@import url('normalize.css');
@import url('sidr.css');
@import url('swiper.css');
@import url('news.css');
/* montserrat-100 - cyrillic_cyrillic-ext_latin_vietnamese */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100;
    src: url('../fonts/montserrat-v29-cyrillic_cyrillic-ext_latin_vietnamese-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-100italic - cyrillic_cyrillic-ext_latin_vietnamese */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 100;
    src: url('../fonts/montserrat-v29-cyrillic_cyrillic-ext_latin_vietnamese-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-200 - cyrillic_cyrillic-ext_latin_vietnamese */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/montserrat-v29-cyrillic_cyrillic-ext_latin_vietnamese-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-200italic - cyrillic_cyrillic-ext_latin_vietnamese */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 200;
    src: url('../fonts/montserrat-v29-cyrillic_cyrillic-ext_latin_vietnamese-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-300 - cyrillic_cyrillic-ext_latin_vietnamese */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/montserrat-v29-cyrillic_cyrillic-ext_latin_vietnamese-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-300italic - cyrillic_cyrillic-ext_latin_vietnamese */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 300;
    src: url('../fonts/montserrat-v29-cyrillic_cyrillic-ext_latin_vietnamese-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-regular - cyrillic_cyrillic-ext_latin_vietnamese */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/montserrat-v29-cyrillic_cyrillic-ext_latin_vietnamese-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-italic - cyrillic_cyrillic-ext_latin_vietnamese */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/montserrat-v29-cyrillic_cyrillic-ext_latin_vietnamese-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-500 - cyrillic_cyrillic-ext_latin_vietnamese */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/montserrat-v29-cyrillic_cyrillic-ext_latin_vietnamese-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-500italic - cyrillic_cyrillic-ext_latin_vietnamese */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 500;
    src: url('../fonts/montserrat-v29-cyrillic_cyrillic-ext_latin_vietnamese-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-600 - cyrillic_cyrillic-ext_latin_vietnamese */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/montserrat-v29-cyrillic_cyrillic-ext_latin_vietnamese-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-600italic - cyrillic_cyrillic-ext_latin_vietnamese */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 600;
    src: url('../fonts/montserrat-v29-cyrillic_cyrillic-ext_latin_vietnamese-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-700 - cyrillic_cyrillic-ext_latin_vietnamese */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/montserrat-v29-cyrillic_cyrillic-ext_latin_vietnamese-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-700italic - cyrillic_cyrillic-ext_latin_vietnamese */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 700;
    src: url('../fonts/montserrat-v29-cyrillic_cyrillic-ext_latin_vietnamese-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
:root {
    /* --body-width: 1170px; */
    --main-bg-color: #e9f4ee;
    --main-text-color: rgba(0, 0, 0, .87);
    --main-color: #4c6457;
    --secondary-color: #3fb13f;
    --accent-color: #ffe000;
    --accent-color-dark: #ef7b28;
    --main-dark-color: #0b6339;
    --main-link-color: var(--main-dark-color);
    --main-link-hover-color: var(--secondary-color);
}

html {
    font-size: 1rem;
    scroll-behavior: smooth;
}

/* Firefox */
* {
    scrollbar-width: thin;
}

/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
    width: 16px;
}

*::-webkit-scrollbar-track {
    background-color: var(--main-bg-color);
}

*::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: var(--accent-color-dark);
    border: 4px solid var(--main-bg-color);
}

/* grid */

body {
    display: grid;

    grid-template-areas:    "topbar topbar  topbar  topbar  topbar  topbar" 
                            "header header  header  nav     nav     nav"
                            "banner banner  banner  banner  banner  banner"
                            "left   left    main    main    right   right"
                            "bottom bottom  bottom  bottom  bottom  bottom"
                            "footer footer  footer  footer  footer  footer";
    grid-template-columns:  1fr     250px   100px   560px     250px     1fr;

    grid-template-rows: 46px 110px auto 1fr auto auto;
    grid-row-gap: 0;
    grid-column-gap: 0;
    min-height: 100vh;
    margin: 0 auto;
    /* max-width: var(--body-width); */
}

body.full {
    grid-template-areas:    "topbar topbar  topbar  topbar  topbar  topbar" 
                            "header header  header  nav     nav     nav"
                            "banner banner  banner  banner  banner  banner"
                            "main   main    main    main    main    main"
                            "bottom bottom  bottom  bottom  bottom  bottom"
                            "footer footer  footer  footer  footer  footer";
}

body.full .aside-left,
body.full .aside-right {
    display: none;
}

body.full main {
    max-width: 1160px;
    margin: auto;
}

body.left-sidebar {
    grid-template-areas:    "topbar topbar  topbar  topbar  topbar  topbar" 
                            "header header  header  nav     nav     nav"
                            "banner banner  banner  banner  banner  banner"
                            "left   left    main    main    main    main"
                            "bottom bottom  bottom  bottom  bottom  bottom"
                            "footer footer  footer  footer  footer  footer";
}

body.left-sidebar .aside-right {
    display: none;
}

body.left-sidebar main {
    max-width: 910px;
}

img {
    width: 100%;
}

aside img {
    display: block;
    margin: auto;
    max-width: 300px;
}

p {
    line-height: 1.4;
    margin: 0 0 .5em;
}

hr {
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    margin-inline-start: auto;
    margin-inline-end: auto;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}

h1 {
    margin: .5em 0 .5em;
}

h2,
h3 {
    margin: 1em 0 .5em;
}

hr {
    border: 1px solid var(--main-color);
    opacity: .1;
}

main h1+hr {
    border: 2px solid var(--secondary-color);
    opacity: 1;
    margin-bottom: 24px;
}

main h2 {
    font-size: 18px;
    background-color: var(--secondary-color);
    color: #fff;
    padding: 6px 12px;
    width: fit-content;
}

main h2+hr {
    border: 2px solid var(--secondary-color);
    opacity: 1;
    margin-top: -12px;
}

aside h2 {
    font-size: 16px;
    background-color: var(--main-dark-color);
    color: #fff;
    padding: 12px;
    margin-top: -18px;
}

aside form {
    padding: 16px;
    background: var(--accent-color);
    border-radius: 0 0 6px 6px;
    margin-top: -8px;
}

aside form>a {
    display: block;
    text-align: right;
}

aside form a {
    color: var(--text-color);
}

aside form section {
    font-size: 14px;
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

aside form section .btn {
    margin-left: 16px;
    background: var(--accent-color-dark);
    box-shadow: none;
}

aside form section .btn:hover {
    background: var(--accent-color-dark);
    filter: brightness(110%);
}

aside h3 {
    font-size: 16px;
    background-color: var(--secondary-color);
    color: #fff;
    padding: 6px 12px;
    width: fit-content;
}

aside h3+hr {
    border: 2px solid var(--secondary-color);
    opacity: 1;
    margin: -10px 0 20px;
}

li {
    margin-bottom: 6px;
}

header {
    grid-area: header;
    grid-column-start: 2;
}

#navigation {
    grid-area: nav;
    grid-column-end: 6;
}

.topbar {
    grid-area: topbar;
}

.banner {
    grid-area: banner;
}

.bottom {
    grid-area: bottom;
}

footer {
    grid-area: footer;
}

main {
    grid-area: main;
}

aside ul {
    margin: 0;
    padding: 0 0 0 18px;
}

.aside-left {
    grid-area: left;
}

.aside-right {
    grid-area: right;
}

table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
}

table td,
table th {
    border: 1px solid #ddd;
    padding: 8px;
}

table tr:nth-child(even) {
    background-color: #f2f2f2;
}

table tr:hover {
    background-color: #ddd;
}

table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}

table .fa-lg {
    display: block;
    margin: auto;
    opacity: .87;
}

/* style */

body {
    font-family: 'Montserrat', sans-serif;
    color: var(--text-color);
    background: var(--main-bg-color);
}

.topbar {
    background: var(--main-color);
    z-index: 80;
    position: sticky;
    top: 0;
}

.banner {
    background: var(--secondary-color);
    color: #fff;
    display: grid;
    grid-template-columns: 600px 560px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    border-bottom: 6px solid var(--main-dark-color);
}

.banner img {
    max-width: calc(100% - 32px);
    margin: 16px;
}

.banner div {
    padding: 32px;
}

.banner div h2 {
    margin-top: 0;
    font-size: 1.5rem;
}

.banner div a {
    font-weight: bold;
    color: var(--accent-color);
    text-decoration: none;
}

.banner div p {
    font-size: 1rem;
}

.banner div p:last-child {
    margin-bottom: 0;
}

main a,
aside a {
    color: var(--main-link-color);
    font-weight: 500;
    transition: all .3s ease-out;
}

main a:hover:not(.btn),
aside a:hover:not(.btn) {
    color: var(--main-link-hover-color);
}

.aside-left>.aside-container {
    background: #fff;
    padding: 8px 0;
    border-radius: 0 16px 16px 0;
    margin: 0 0 16px -16px;
    display: grid;
    grid-template-columns: 1fr 250px;
}

.aside-left .logos {
    grid-column-start: 2;
}

.aside-left .links {
    margin: 16px;
    grid-column-start: 2;
    /* font-size: 85%; */
}

.aside-left .links>a {
    display: grid;
    grid-gap: 8px;
    grid-template-columns: 32px 1fr;
    align-items: center;
    margin-bottom: 12px;
    text-decoration: none;
}

.aside-left .links>a:last-child {
    margin-bottom: 0;
}

.aside-right {
    grid-column-end: 6;
}

main,
aside {
    padding: 16px;
}

aside a,
main a {
    text-decoration: none;
}

main h1~img {
    margin-bottom: 20px;
}

aside .soc {
    margin: 0 0 4px 32px;
    text-indent: -32px;
}

aside .isoc {
    max-width: 24px;
    margin-right: 4px;
}

aside .isoc+span {
    position: relative;
    top: -6px;
}

header {
    position: sticky;
    top: 0;
    z-index: 100;
}


header .mobile-header {
    display: none;
    margin: 19px 0 0;
    font-size: 1.2rem;
    color: #fff;
}

.logo {
    max-width: 60px;
    margin: 24px 5px 10px 5px;
    float: left;
    transition: .3s;
}

/* .nav-logo {
    display: none;
}

.sidr-class-nav-logo {
    display: none;
} */

#sidr-main {
    user-select: none;
}

#sidr-main a {
    cursor: pointer;
}

.sidr-inner>ul>li {
    border-bottom: none
}

.sidr li {
    background: transparent;
}

svg.sidr-class-svg-inline--fa {
    max-width: 8px;
}

header h1 {
    font-size: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
    margin: 22px 0 0;
    color: var(--main-dark-color);
    transition: .3s;
}


header h2 {
    font-size: .9rem;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0;
    color: var(--secondary-color);
    transition: .3s;
    white-space: nowrap;
    text-wrap: balance
}

main h1 {
    color: var(--secondary-color);
    font-size: 1.7rem;
    line-height: 1;
}

main .app {
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: center;
    margin: 16px 0;
    text-decoration: none;
}

main .app:hover {
    text-decoration: none;
}

main .app:last-of-type+hr {
    margin-bottom: 64px;
}

main .app img {
    max-width: calc(100% - 64px);
    margin: 12px auto;
}

main .app h3 {
    color: var(--main-color);
    margin: 0 0 3px;
    font-size: 1.34em;
}

main .app p {
    font-size: 14px;
    margin: 0;
}

.ppid-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.ppid-link {
    padding: 10px;
    text-align: center;
    width: 120px;
    font-size: 90%;
}

.ppid-link p {
    line-height: 1.1;
}

.ppid-link img {
    height: 64px;
    padding: 10px;
    margin: auto;
}

h3 {
    line-height: 1.35;
}

aside h4 {
    /* text-transform: uppercase; */
    font-size: 15px;
    margin:  0 0 6px;
}

.video-thumbnail {
    position: relative;
    cursor: pointer;
}

.video-thumbnail svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    margin-left: 2px;
    content: "\25BA";
    font-size: 24px;
    color: rgba(255, 255, 255, .9);
    transition: .3s;
    pointer-events: none;
}

.video-thumbnail svg:after {
    color: rgba(255, 255, 255, 1);
}

.video-thumbnail:before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .7);
    content: "";
    pointer-events: none;
    transition: .3s;
}

.video-thumbnail:hover:before {
    background: var(--main-color);
    opacity: .87;
}

.logos {
    margin: 16px;
    font-size: 85%;
    text-align: center;
}

.logos img {
    margin: 32px auto 12px;
    display: block;
    max-width: 100px;
    max-height: 64px;
    object-fit: contain;
}

.logos a:first-child img {
    margin-top: 0;
}

.logos.logos-md img {
    max-width: 80px;
}

.logos.logos-l img {
    max-width: 144px;
    max-height: none;
}

.bottom {
    border-top: 8px solid var(--accent-color-dark);
    background: var(--main-color);
    color: #fff;
    font-size: 14px;
    padding: 24px 0;
    display: grid;
    grid-template-columns: 280px 260px 620px;
    justify-content: center;
}

.bottom>div {
    border-right: 2px solid rgba(255, 255, 255, .1);
    padding: 16px 20px 0 32px;
    height: calc(100% - 24px);
    display: flex;
}

.bottom>div:last-child {
    border-right: none;
    display: block;
}

.bottom>div:first-child {
    display: flex;
    align-items: flex-start;
}

.bottom>div:first-child>img {
    margin-right: 12px;
    max-width: 48px;
}

.bottom>div:first-child>div h1 {
    font-size: 1.3rem;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0;
}

.bottom>div:first-child>div h2 {
    font-size: .65rem;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0;
}

.bottom>div:nth-child(2) ul {
    padding: 0;
    margin: 0;
}

.bottom>div:nth-child(2) li {
    list-style: none;
    margin-bottom: 12px;
}

.bottom>div:nth-child(2) ul>li>ul {
    margin-top: 8px;
    padding-left: 8px;
    display: none;
}

.bottom>div:nth-child(2) ul>li>ul>li {
    margin-bottom: 8px;
}

.bottom>div:nth-child(2) ul>li>ul>li>a {
    font-size: 90%;
    opacity: .7;
}

.bottom>div a {
    cursor: pointer;
    text-decoration: none;
    color: #fff;
}

.bottom>div a:hover {
    color: var(--accent-color);
}

.bottom>div h4 {
    margin: 0 0 8px;
}

.bottom>div:nth-child(3)>div:first-child {
    display: flex;
}

.bottom>div:nth-child(3)>div:not(:first-child) {
    margin-top: 12px;
    display: block;
}

.bottom>div:nth-child(3)>div>div:first-child {
    margin-right: 32px;
    max-width: 50%;
}

.bottom>div:nth-child(3)>div:last-child {
    display: flex;
    align-items: center;
    font-size: 90%;
}

.bottom>div:nth-child(3)>div:last-child {
    margin-top: 18px;
}

.bottom>div:nth-child(3)>div:last-child p>a {
    display: grid;
    align-items: center;
    margin-right: 18px;
    grid-template-columns: 28px 1fr;
}

.bottom .soc svg {
    width: 12px;
    height: 12px;
    background: #fff;
    padding: 4px;
    border-radius: 50%;
    color: var(--main-color);
}

#navigation_bottom {
    user-select: none;
}

#navigation_bottom a>svg {
    transition: .3s;
}

#navigation_bottom .openchild>a>svg {
    transform: rotateX(180deg);
}

footer {
    font-size: 80%;
    padding: 32px 16px;
    text-align: center;
    margin-bottom: 24px;
}

/* form */

form label {
    display: block;
    font-size: 14px;
}

input {
    display: block;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, .1);
    margin: 6px 0 10px;
    outline: none;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, .3);
    background: rgba(255, 255, 255, .9);
    /* width: calc(100% - 16px); */
    transition: all .2s ease-out;
    font-size: 14px;
}

input:focus {
    background: rgba(255, 255, 255, 1);
}

.btn {
    display: inline-block;
    font-weight: 400;
    padding: 8px 20px;
    background: var(--main-color);
    border: none;
    color: #fff;
    outline: none;
    text-decoration: none;
    border-radius: 4px;
    /* margin: 0 10px 10px 0; */
    line-height: 1.2;
    cursor: pointer;
    transition: all .3s ease-out;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

.btn:hover {
    background: var(--main-dark-color);
}

.btn:active {
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2);
}

.btn.disabled {
    background: rgba(0, 0, 0, .2);
    pointer-events: none;
    box-shadow: none;
}

/* nav */

#mobile-menu {
    float: left;
    display: none;
    transform: scale(.6);
    outline: none;
    position: relative;
    top: 1px;
}

#navigation {
    /* background: var(--main-color); */
    /* box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12); */
    /* position: sticky;
    position: -webkit-sticky;
    top: 0; */
    font-size: .9rem;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: sticky;
    top: 0;
    max-height: 110px;
    transition: .3s ease-out;
}

#navigation a {
    font-weight: 500;
}

#navigation ul {
    /* height: 46px; */
    /* padding: 15px 0 0; */
    padding: 0;
    margin: 0;
}

#navigation>ul li {
    list-style: none;
    display: block;
    float: left;
    position: relative;
    transition-duration: .3s;
}

/* nav>ul>li {
    background: var(--main-color);
} */

/* nav>ul>li>a:hover {
    background: var(--main-dark-color);
} */

#navigation ul>li>ul {
    background: #fff;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    transition: all 0.2s ease;
    margin-top: 6px;
    left: 0;
    padding: 0;
    min-width: 210px;
    height: auto;
    pointer-events: none;
}

#navigation ul li:hover>ul,
#navigation ul li:focus-within>ul,
#navigation ul li ul:hover,
#navigation ul li ul:focus {
    visibility: visible;
    opacity: 1;
    display: flex;
    flex-direction: column;
    pointer-events: all;
    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12);
}

#navigation>ul>li>a {
    /* color: rgba(255, 255, 255, .9); */
    color: #3f6150;
    text-decoration: none;
    padding: 14px 18px 14px 0;
    font-size: 14px;
}

#navigation>ul>li>a:hover {
    color: var(--main-link-hover-color);
}

#navigation>ul>li>ul>li {
    clear: both;
    background: #fff;
    border-top: 1px solid #ddd;
    margin-bottom: 0px;
    font-size: 13px;
}

/* nav>ul>li>ul>li:hover {
    background: #fbfbfb;
} */

#navigation>ul>li>ul>li:hover a {
    color: var(--main-link-hover-color);
}

#navigation>ul>li>ul>li>a {
    color: inherit;
    text-decoration: none;
    width: 100%;
    display: block;
    padding: 14px 20px;
}

#navigation a {
    cursor: pointer;
}

#navigation .fa-caret-down {
    padding: 0 0 0 3px;
}

/* swiper */

.swiper-container {
    width: 100%;
    height: 400px;
}

.swiper-slide {
    font-size: 18px;
    background: #eee;
}

.swiper-slide img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.swiper-slide h3 {
    position: absolute;
    bottom: 26px;
    margin: 20px;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
}

.swiper-slide a::before {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.65) 80%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.65) 80%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.65) 80%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000', GradientType=0);
}

/* .accordion {
    background-color: #eee;
    cursor: pointer;
    font-weight: 700;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 16px;
    transition: 0.4s;
}

.active,
.accordion:hover {
    background-color: #ccc;
}

.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2212";
}

button.accordion.active+.panel {
    padding: 18px;
}

.panel {
    padding-right: 18px;
    padding-left: 18px;
    background-color: fff;
    max-height: 0;
    overflow: hidden;
    transition: 0.2s ease-out;
}

.panel img {
    margin: auto;
    display: block;
} */

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */

.hamburger {
    padding: 15px 15px;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
}

.hamburger:hover {
    opacity: 0.7;
}

.hamburger-box {
    width: 40px;
    height: 24px;
    display: inline-block;
    position: relative;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 40px;
    height: 4px;
    background-color: #fff;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: "";
    display: block;
}

.hamburger-inner::before {
    top: -10px;
}

.hamburger-inner::after {
    bottom: -10px;
}

.hamburger--arrow.is-active .hamburger-inner::before {
    transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1);
}

.hamburger--arrow.is-active .hamburger-inner::after {
    transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1);
}

@media all and (max-width: 1180px) {
    body {
        grid-template-columns:  1fr 22% 8% 48% 22% 1fr;
    }
    .banner {
        background: var(--secondary-color);
        color: #fff;
        display: grid;
        grid-template-columns: 45% 55%;
    }
    #navigation>ul>li>a {
        padding: 14px 18px 14px 0;
        font-size: 13px;
    }
    .aside-left>.aside-container {
        display: block;
    }
    .bottom {
        grid-template-columns: 280px 260px 1fr;
    }
    .bottom>div {
        padding: 16px;
    }
    .bottom>div:nth-child(3)>div:first-child {
        display: block;
    }
    .bottom>div:nth-child(3)>div>div:first-child {
        margin: 0 0 12px;
    }
    .bottom>div:nth-child(3)>div:last-child {
        display: block;
    }
}

@media all and (max-width: 1030px) {
    #navigation>ul>li>a {
        padding: 14px 13px 14px 0;
        font-size: 13px;
    }
}

@media all and (max-width: 991px) {
    /* grid */
    body, body.full, body.left {
        grid-template-areas: "header" "nav" "banner" "main" "left" "right" "bottom" "footer";
        grid-template-rows: 58px 0 auto 1fr auto auto auto auto;
        grid-template-columns: 100%;
    }
    /* style */
    #mobile-menu {
        display: block;
    }
    header {
        background: var(--main-color);
        position: fixed;
        width: 100%;
        z-index: 100;
        box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
    }
    
    .aside-left>.aside-container {
        border-radius: 16px;
        margin: 0 0 16px;
    }

    .banner {
        grid-template-columns: 100%;
        overflow: hidden;
        align-items: center;
        justify-content: center;
    }
    main .app {
        grid-template-columns: 100px 1fr;
    }
    
    main .app img {
        max-width: calc(100% - 24px);
        margin: 12px 24px 12px 6px;
    }
    h1 {
        font-size: 1.5em;
    }
    h3 {
        font-size: 1.1em;
    }
    .swiper-container {
        height: 260px;
    }
    .swiper-slide h3 {
        font-size: 90%;
    }
    .swiper-slide a::before {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.65) 70%);
    }
    .swiper-slide h3 {
        bottom: 26px;
        margin: 10px;
    }
    .aside-left {
        grid-column-start: 1;
    }
    .aside-right {
        grid-column-end: 1;
    }
    .logo {
        max-width: 42px;
        margin: 7px 10px 0 -7px;
    }
    /* .sidr-class-nav-logo {
        display: block;
        max-width: 100px;
        margin: 30px auto 10px;
    } */
    header h1,
    header h2 {
        display: none;
    }
    header .mobile-header {
        display: inline-block;
    }
    #navigation {
        display: none;
    }
    .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }
    .bottom {
        grid-template-columns: 100%;
    }
    .bottom>div {
        border-right: none;
    }
}

@media all and (min-width: 992px) {
    .scroll-down #navigation {
        max-height: 46px;
        transition: .3s ease-in;
    }
    
    .scroll-down #navigation>ul>li>a {
        color: rgba(255, 255, 255, .9);
    }

    .scroll-down #navigation>ul>li>a:hover {
        color: var(--accent-color);
    }
    
    .scroll-down header {
        height: 46px;
    }
    
    .scroll-down header h2 {
        opacity: 0;
        font-size: 0;
        letter-spacing: -10px;
    }
    
    .scroll-down .logo {
        max-width: 36px;
        margin: 4px 0 0;
    }
    
    .scroll-down header h1 {
        font-size: 1.5rem;
        color: #fff;
        margin: 9px 0 0 48px;
    }
}

@media all and (min-width: 480px) {
    footer br {
        display: none;
    }
}

.row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    align-self: center
}

.row.pagination {
    flex-wrap: nowrap;
}

/* .row.pagination>div .btn {
    white-space: nowrap;
    margin: 0 2px;
}

.row>div {
    flex: 1;
} */

.row>div .btn {
    display: block;
    text-align: center;
    margin: 10px;
}

/* .btn.page {
    padding: 8px;
    background: none;
    color: var(--main-color);
    box-shadow: none;
} */

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}

.pagination>li {
    display: inline;
}

.pagination>li.active:after {
    content: none !important;
}

.pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover {
    color: #777;
    cursor: not-allowed;
    /* background-color: #fff; */
    /* border-color: #ddd; */
}

.pagination>li>a, .pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 8px;
    margin-left: -1px;
    line-height: 1.4;
    color: var(--main-color);
    text-decoration: none;
    /* background-color: #fff; */
    /* border: 1px solid #ddd; */
}


.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    color: var(--accent-color-dark);
    font-weight: bold;
    cursor: default;
    /* background-color: var(--secondary-color);
    border-color: var(--main-dark-color); */
    z-index: 3;
}   
 
.alert {
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}


.input-group .form-control {
    margin-top: 0 !important;
}

.btn-group > .btn, .input-group-btn > .btn {
    margin : 0 0 !important;
}

.input-group-btn > .btn {
    display: inline-block !important;
}

.no-margin {
    margin: 0 !important;
}

.border-right {
    border-right: 1px solid #ccc;
}

.password-container{
  position: relative;
}
.password-container input[type="password"],
.password-container input[type="text"]{
  width: 100%;
  padding: 12px 36px 12px 12px;
  box-sizing: border-box;
}
.fa-eye{
  position: absolute;
  top: 28%;
  right: 4%;
  cursor: pointer;
  color: lightgray;
}