/* ==================== 
1. resets & defaults
2. base styles
3. layout
4. components
5. content by pages
==================== */


/* ==================== 1. resets & defaults ==================== */
html, body,
h1, h2, h3, h4, h5, h6,
ul, ol, p, figure,
form, fieldset, input, textarea {
    margin: 0;
    padding: 0;
}

header, nav, main, article, section, aside, footer, figure {
    display: block;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.cl:before,
.cl:after {
    display: table;
    content: " ";
}

.cl:after {
    clear: both;
}

/* ----- */

html, body {
    width: 100%;
    height: 100%;
}

nav ul, .nav ul {
    list-style: none;
}

a img, fieldset {
    border: 0;
}

.logo img {
    display: block;
}

.img-container img,
.thumb img,
figure img {
    display: block;
    max-width: 100%;
}

button,
input[type=button],
input[type=submit] {
    cursor: pointer;
    outline: none !important;
}

a, a:hover, a:focus {
    text-decoration: none;
}

    a.is-active {
        cursor: default;
    }

.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.disabled-click {
    pointer-events: none;
}

/* ----- */

.no-scroll,
.no-scroll body {
    height: 100% !important;
    overflow: hidden;
}

.hidden {
    display: none !important;
}

.item-fade {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
    z-index: -1;
}

    .item-fade.fade-in {
        opacity: 1;
        visibility: visible;
        z-index: 1;
    }

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

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

/* ----- */

.float-left {
    float: left !important;
}

.float-right {
    float: right !important;
}

.block-center {
    margin-left: auto !important;
    margin-right: auto !important;
}

.text-l {
    text-align: left !important;
}

.text-r {
    text-align: right !important;
}

.text-c {
    text-align: center !important;
}

.lowercase {
    text-transform: lowercase !important;
}

.uppercase {
    text-transform: uppercase !important;
}

.nocase {
    text-transform: none !important;
}

.italic {
    font-style: italic;
}

.underline {
    text-decoration: underline;
}

.line-through {
    text-decoration: line-through;
}

.highlight {
    background-color: #ffff00;
}

/* ----- */

body {
    background: #f6f6f6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}



/* ==================== 2. base styles ==================== */


/* ----------- fonts ----------- */
body, input, textarea, button {
    font-family: 'Helvetica Neue World', Helvetica, Arial, sans-serif;
    font-weight: normal;
}
/* ----------- /fonts ----------- */


/* ----------- container ----------- */
.container {
    width: 100%;
    max-width: 1630px;
    padding-left: 0;
    padding-right: 0;
    margin: 0 auto;
}
/* ----------- /container ----------- */


/* ----------- row ----------- */
.row-sm {
    margin-left: -10px;
    margin-right: -10px;
}

    .row-sm .col,
    .row-sm [class*=col-] {
        padding-left: 10px;
        padding-right: 10px;
    }

.row-xs {
    margin-left: -5px;
    margin-right: -5px;
}

    .row-xs .col,
    .row-xs [class*=col-] {
        padding-left: 5px;
        padding-right: 5px;
    }
/* ----------- /row ----------- */


/* ----------- icons ----------- */
.icon {
    display: inline-block;
    position: relative;
}

    .icon::before {
        content: "";
        display: block;
        width: 16px;
        height: 16px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        position: relative;
    }

.i-90::before {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.i-180::before {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.i-270::before {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}

.i-arrow::before {
    background-image: url("../images/icons/arrow_right_gray.svg");
}

.i-arrow--blue::before {
    background-image: url("../images/icons/arrow_right_blue.svg");
}

.i-arrow--white::before {
    background-image: url("../images/icons/arrow_right_white.svg");
}

.i-arrow-long::before {
    width: 14px;
    height: 10px;
    background-image: url("../images/icons/arrow_right_long.svg");
}

.i-arrow-long--blue::before {
    width: 14px;
    height: 10px;
    background-image: url("../images/icons/arrow_right_long_blue.svg");
}

.i-arrow-long--white::before {
    width: 14px;
    height: 10px;
    background-image: url("../images/icons/arrow_right_long_white.svg");
}

.i-attachement::before {
    background-image: url("../images/icons/attachement.svg");
}

.i-attachement--white::before {
    background-image: url("../images/icons/attachement_white.svg");
}

.i-calendar::before {
    background-image: url("../images/icons/calendar.svg");
}

.i-chevron::before {
    width: 12px;
    height: 8px;
    background-image: url("../images/icons/dropdown_chevron.svg");
}

.i-close::before {
    background-image: url("../images/icons/close2.svg");
}

.i-close--white::before {
    background-image: url("../images/icons/close2_white.svg");
}

.i-close-solid::before {
    background-image: url("../images/icons/close_solid.svg");
}

.i-file::before {
    background-image: url("../images/icons/file.svg");
}

.i-file-upload::before {
    background-image: url("../images/icons/file_upload.svg");
}

.i-link::before {
    background-image: url("../images/icons/link.svg");
}

.i-link--white::before {
    background-image: url("../images/icons/link_white.svg");
}

.i-remove::before {
    background-image: url("../images/icons/remove.svg");
}

.i-search::before {
    background-image: url("../images/icons/search.svg");
}

.i-triangle-right--white::before {
    width: 15px;
    height: 13px;
    background-image: url("../images/icons/triangle_right_white.svg");
}
/* ----------- /icons ----------- */


/* ----------- colors ----------- */
.color-white {
    color: #fff !important;
}

.color-blue {
    color: #0099ff !important;
}

.color-blue-dark {
    color: #056699 !important;
}
/* ----------- /colors ----------- */



/* ==================== 3. layout ==================== */

.app {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
}

.app-header,
.app-footer,
.page-head,
.page-nav,
.page-content,
.page-content-wrap {
    padding: 0 50px;
}

@media (max-width: 1199px) {
    .app-header,
    .app-footer,
    .page-head,
    .page-nav,
    .page-content,
    .page-content-wrap {
        padding: 0 25px;
    }
}

@media (max-width: 767px) {
    .app-header {
        padding: 0;
    }

    .app-footer,
    .page-head,
    .page-nav,
    .page-content,
    .page-content-wrap {
        padding: 0 15px;
    }
}


/* ---------- header ---------- */
header.app-header {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 300;
}

    header.app-header .container {
        position: relative;
    }

        header.app-header .container::before {
            content: "";
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.8);
            pointer-events: none;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }

.chrome header.app-header .container::before,
.safari header.app-header .container::before,
.opera header.app-header .container::before,
.edge header.app-header:not(.nav-is-open):not(.search-is-open) .container::before {
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(11px);
    backdrop-filter: blur(11px);
}

/* logo */
header.app-header .logo {
    float: left;
    margin-right: 50px;
}

    header.app-header .logo img {
        width: 160px;
    }

/* main wrap */
header.app-header .main-wrap {
    flex-grow: 1;
    padding-right: 38px;
}

    header.app-header .main-wrap > div {
        display: flex;
        align-items: center;
    }

        header.app-header .main-wrap > div:first-child {
            justify-content: flex-end;
            height: 80px;
            border-bottom: 1px solid rgba(0,0,0,0.1);
            padding-top: 11px;
        }

            header.app-header .main-wrap > div:first-child > * + * {
                margin-left: 36px;
            }

/* search */
header.app-header .search-wrap {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
}

    header.app-header .search-wrap > button {
        display: block;
        background-color: transparent;
        border: 0;
        padding: 0;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }

        header.app-header .search-wrap > button img {
            display: block;
            width: 25px;
            opacity: 0;
        }

header.app-header .search-box {
    display: flex;
    width: 25px;
    margin-left: auto;
    overflow: hidden;
}

header.app-header .search-wrap .i-search {
    border-right: 2px solid #000;
    padding-right: 15px;
    margin: auto 10px auto 0;
}

    header.app-header .search-wrap .i-search::before {
        width: 25px;
        height: 25px;
    }

header.app-header .search-wrap .search-input {
    flex-grow: 1;
    height: 25px;
    background-color: transparent;
    border: 0;
    outline: none;
    margin-right: 25px;
    color: #000;
    font-size: 16px;
}
    /*header.app-header .search-wrap .search-input::-webkit-input-placeholder {
    color: inherit;
    opacity: 0.4;
}
header.app-header .search-wrap .search-input::-moz-placeholder {
    color: inherit;
    opacity: 0.4;
}
header.app-header .search-wrap .search-input:-ms-input-placeholder {
    color: inherit;
    opacity: 0.4;
}
header.app-header .search-wrap .search-input::-ms-input-placeholder {
    color: inherit;
    opacity: 0.4;
}*/
    header.app-header .search-wrap .search-input::placeholder {
        color: inherit;
        opacity: 0.4;
    }

/* lang */
header.app-header .main-wrap .lang-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background-color: #000;
    color: #fff;
    font-size: 13px;
    font-weight: 300;
}

/* link */
header.app-header .main-wrap .link {
    position: relative;
    color: #000;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.2;
    text-decoration: none;
}

    header.app-header .main-wrap .link span {
        /*display: block;*/
    }

/* nav */
header.app-header nav li li:not(:last-child) {
    margin-bottom: 5px;
}

header.app-header nav a {
    color: #000;
    font-size: 14px;
}

header.app-header nav .nav-link {
    font-weight: bold;
    line-height: 21px;
}

header.app-header .main-wrap nav > ul > li > div,
header.app-header .app-nav .nav-col > ul > li > div {
    display: flex;
    justify-content: space-between;
}

header.app-header nav li ul {
    padding-bottom: 20px;
}

header.app-header nav .toggle-subnav-btn {
    display: none;
    background-color: transparent;
    border: 0;
    padding: 0 6px;
    position: relative;
    margin-left: 10px;
}

    header.app-header nav .toggle-subnav-btn::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -10px;
        right: -10px;
    }

    header.app-header nav .toggle-subnav-btn .icon::before {
        transition: all 0.2s ease;
    }

header.app-header nav .show .toggle-subnav-btn .icon::before {
    transform: rotate(-180deg);
}

header.app-header .main-wrap nav > ul {
    display: flex;
    margin: 0 -25px;
}

    header.app-header .main-wrap nav > ul > li {
        padding: 0 25px;
    }

header.app-header .main-wrap .nav-link {
    display: flex;
    align-items: center;
    border-bottom: 4px solid transparent;
    padding: 27px 0 28px;
}

    header.app-header .main-wrap .nav-link.active {
        border-bottom-color: #000;
    }

header.app-header .main-wrap nav li ul {
    display: none;
}

header.app-header .app-nav {
    display: none;
    justify-content: space-between;
    padding-top: 40px;
}

    header.app-header .app-nav .nav-col {
        flex-grow: 1;
        max-width: 820px;
        margin-right: 100px;
    }

        header.app-header .app-nav .nav-col > ul {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -35px;
        }

            header.app-header .app-nav .nav-col > ul > li {
                flex: 0 0 33.333333%;
                padding: 0 35px;
                margin-bottom: 50px;
            }

                header.app-header .app-nav .nav-col > ul > li > div {
                    margin-bottom: 20px;
                }

    header.app-header .app-nav .nav-link {
        display: block;
        padding: 0;
        font-size: 16px;
    }

@media (min-width: 768px) {
    header.app-header .app-nav .nav-col > ul > li:nth-child(1) {
        order: 1;
    }

    header.app-header .app-nav .nav-col > ul > li:nth-child(2) {
        order: 4;
    }

    header.app-header .app-nav .nav-col > ul > li:nth-child(3) {
        order: 6;
    }

    header.app-header .app-nav .nav-col > ul > li:nth-child(4) {
        order: 2;
    }

    header.app-header .app-nav .nav-col > ul > li:nth-child(5) {
        order: 5;
    }

    header.app-header .app-nav .nav-col > ul > li:nth-child(6) {
        order: 7;
    }

    header.app-header .app-nav .nav-col > ul > li:nth-child(7) {
        order: 3;
    }

    header.app-header .app-nav .nav-col > ul > li:nth-child(8) {
        order: 8;
    }

    header.app-header .app-nav .nav-col > ul > li:last-child {
        order: 10;
    }
}

header.app-header .app-nav .bnr-col {
    flex: 0 0 40.5%;
    max-width: 660px;
}

    header.app-header .app-nav .bnr-col .row {
        margin: 0 -30px;
    }

        header.app-header .app-nav .bnr-col .row > div {
            padding: 0 30px;
        }

header.app-header .app-nav .bnr {
    display: block;
    max-width: 300px;
    margin-bottom: 60px;
}

    header.app-header .app-nav .bnr img {
        display: block;
        max-width: 100%;
    }

/* social */
header.app-header .social-media-wrap {
    height: 80px;
    margin-left: auto;
}

/* search open */
header.app-header.search-is-open .search-wrap > button img {
    opacity: 1;
}

header.app-header.search-is-open .search-box {
    width: 100% !important;
}

header.app-header.search-is-open .social-media-wrap {
    display: none;
}

header.app-header.search-is-open .main-wrap nav {
    width: 100%;
}

    header.app-header.search-is-open .main-wrap nav > ul {
        justify-content: space-between;
    }

    header.app-header.search-is-open .main-wrap nav li ul {
        display: block;
        padding-bottom: 30px;
    }

header.app-header.search-is-open .main-wrap .nav-link {
    border-bottom-color: transparent;
    padding-bottom: 5px;
}

@media (min-width: 992px) {
    header.app-header.search-is-open .main-wrap nav > ul > li {
        max-width: 20%;
    }
}

/* nav open */
header.app-header.nav-is-open {
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}

    header.app-header.nav-is-open .app-nav {
        display: flex;
    }

    header.app-header.nav-is-open .container::before {
        position: fixed;
    }

    header.app-header.nav-is-open .main-wrap nav {
        display: none;
    }

@media (min-width: 1650px) {
    header.app-header .logo {
        margin-right: 70px;
    }

    header.app-header nav .nav-link {
        font-size: 18px;
    }

    header.app-header nav li li a {
        font-size: 16px;
    }

    header.app-header .app-nav .nav-link {
        font-size: 20px;
    }

    header.app-header .app-nav .nav-col > ul > li > div {
        margin-bottom: 20px;
    }
}

@media (max-width: 1499px), (min-width: 1500px) and (max-height: 809px) {
    header.app-header .logo img {
        width: 120px;
    }

    header.app-header .main-wrap > div:first-child {
        padding-top: 5px;
    }

        header.app-header .main-wrap > div:first-child > * + * {
            margin-left: 30px;
        }

    header.app-header .main-wrap > div:first-child,
    header.app-header .social-media-wrap {
        height: 60px;
    }

    header.app-header .main-wrap .nav-link {
        padding: 19px 0 16px;
    }

    header.app-header .app-nav .nav-col > ul > li {
        margin-bottom: 40px;
    }

    header.app-header .app-nav .bnr-col {
        flex: 0 0 30%;
    }

        header.app-header .app-nav .bnr-col .row {
            margin: 0 -10px;
        }

            header.app-header .app-nav .bnr-col .row > div {
                padding: 0 10px;
            }

    header.app-header .app-nav .bnr {
        margin-bottom: 20px;
    }
}

@media (max-width: 1400px) {
    header.app-header .main-wrap nav > ul > li {
        padding: 0 20px;
    }
}

@media (max-width: 1350px) {
    header.app-header .search-box {
        width: 20px;
    }

    header.app-header .search-wrap .i-search::before {
        width: 20px;
        height: 20px;
    }

    header.app-header .search-wrap > button img {
        width: 20px;
    }

    header.app-header .main-wrap .lang-btn {
        width: 30px;
        height: 30px;
    }

    header.app-header .logo {
        margin-right: 30px;
    }

    header.app-header .main-wrap nav > ul {
        margin: 0 -15px;
    }

        header.app-header .main-wrap nav > ul > li {
            padding: 0 15px;
        }

    header.app-header .social-media-wrap a {
        margin-left: 10px;
    }

    header.app-header .app-nav .nav-col {
        margin-right: 60px;
    }

        header.app-header .app-nav .nav-col > ul {
            margin: 0 -20px;
        }

            header.app-header .app-nav .nav-col > ul > li {
                padding: 0 20px;
            }

                header.app-header .app-nav .nav-col > ul > li > div {
                    margin-bottom: 15px;
                }
}

@media (max-width: 1250px) {
    header.app-header .main-wrap nav > ul > li {
        padding: 0 12px;
    }
}

@media (max-width: 1199px) {
    header.app-header .logo img {
        width: 108px;
    }

    header.app-header .main-wrap > div:first-child,
    header.app-header .social-media-wrap {
        height: 54px;
    }

    header.app-header .main-wrap {
        padding-right: 20px;
    }

    header.app-header .logo {
        margin-right: 20px;
    }

    header.app-header .main-wrap .nav-link {
        padding: 16px 0 13px;
    }

    header.app-header .main-wrap nav > ul {
        margin: 0 -12px;
    }

        header.app-header .main-wrap nav > ul > li {
            padding: 0 12px;
        }

    /*header.app-header .social-media-wrap a{
        margin-left: 10px;
    }*/

    header.app-header .app-nav .nav-col {
        margin-right: 40px;
    }

        header.app-header .app-nav .nav-col > ul {
            margin: 0 -15px;
        }

            header.app-header .app-nav .nav-col > ul > li {
                padding: 0 15px;
            }
}

@media (max-width: 1120px) {
    header.app-header:not(.search-is-open) .main-wrap nav {
        display: none;
    }

    header.app-header .main-wrap nav > ul {
        margin: 0 -8px;
    }

        header.app-header .main-wrap nav > ul > li {
            padding: 0 8px;
        }

    header.app-header .app-nav {
        padding-top: 30px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    header.app-header.search-is-open .main-wrap nav a {
        font-size: 13px;
    }
}

@media (max-width: 991px) {
    header .app-header .main-wrap > div:first-child {
        padding: 16px 0 15px;
    }

        header.app-header .main-wrap > div:first-child > * + * {
            margin-left: 20px;
        }

    header.app-header .main-wrap .lang-btn {
        width: 28px;
        height: 28px;
        padding-top: 1px;
        font-size: 12px;
    }

    header.app-header .main-wrap nav > ul {
        flex-wrap: wrap;
        margin: 0 -15px;
    }

        header.app-header .main-wrap nav > ul > li {
            width: 50%;
            padding: 0 15px;
        }

    header.app-header .main-wrap .link {
        display: none;
    }

    header.app-header.search-is-open .main-wrap nav {
        padding: 25px 0 30px;
    }

        header.app-header.search-is-open .main-wrap nav li ul {
            display: none;
        }

    header.app-header.search-is-open .main-wrap .nav-link {
        padding: 10px;
    }

    header.app-header.nav-is-open .app-nav {
        display: block;
    }

    header.app-header .app-nav .nav-col {
        margin-right: 0;
    }

    header.app-header .app-nav .bnr-col {
        max-width: 100%;
    }

        header.app-header .app-nav .bnr-col .row > div {
            display: none;
        }

            header.app-header .app-nav .bnr-col .row > div:nth-child(1),
            header.app-header .app-nav .bnr-col .row > div:nth-child(2),
            header.app-header .app-nav .bnr-col .row > div:nth-child(3) {
                display: block;
            }
}

@media (max-width: 767px) {
    header.app-header .main-wrap {
        padding: 0 15px;
    }

    header.app-header .logo {
        margin-right: 15px;
    }

        header.app-header .logo img {
            width: 60px;
        }

    header.app-header .main-wrap > div:first-child,
    header.app-header .social-media-wrap {
        height: 60px;
    }

    header.app-header .main-wrap > div:first-child {
        padding: 0;
    }

    header.app-header:not(.search-is-open) .main-wrap > div:last-child {
        display: none;
    }

    header.app-header .main-wrap .link {
        display: none;
    }

    header.app-header.search-is-open .main-wrap nav {
        padding: 10px 0 50px;
    }

    header.app-header nav .toggle-subnav-btn {
        display: block;
    }

    header.app-header .main-wrap nav > ul,
    header.app-header .app-nav .nav-col > ul {
        margin: 0;
    }

        header.app-header .main-wrap nav > ul > li,
        header.app-header .app-nav .nav-col > ul > li {
            width: 100% !important;
            border-bottom: 1px solid rgba(127,127,127,0.2);
            padding: 0;
            margin-bottom: 0;
        }

    header.app-header.search-is-open .main-wrap .nav-link,
    header.app-header .app-nav .nav-link {
        padding: 12px 0;
    }

    header.app-header .main-wrap .nav-link {
        border-bottom: 0;
    }

    header.app-header .nav-link {
        font-size: 16px;
    }

    header.app-header .app-nav {
        padding: 10px 15px 50px;
    }

        header.app-header .app-nav .nav-col > ul {
            display: block;
        }

        header.app-header .app-nav .nav-col li ul,
        header.app-header .app-nav .bnr-col {
            display: none;
        }

        header.app-header .app-nav .nav-col > ul > li > div {
            margin-bottom: 0;
        }
}


@media (min-width: 768px) and (max-height: 780px) {
    header.app-header .app-nav .nav-col > ul > li {
        margin-bottom: 10px;
    }
}

/* scrolled */
@media (min-width: 768px) {
    body .app-header .logo img,
    body .app-header .main-wrap > div:first-child {
        transition: all 0.3s ease;
    }

    .edge .app-header .logo img {
        transition: none;
    }

    body.is-scrolled .app-header .logo img {
        width: 54px;
    }

    body.is-scrolled .app-header:not(.search-is-open):not(.nav-is-open) .main-wrap > div:first-child {
        border-bottom-color: transparent;
    }

    body.is-scrolled .app-header:not(.search-is-open) .main-wrap > div:last-child {
        display: none;
    }

    body.is-scrolled .app-header .main-wrap > div:last-child {
        padding-left: 74px;
    }
}

@media (min-width: 992px) {
    body.is-scrolled .app-header .main-wrap > div:first-child {
        padding-top: 0;
    }
}

@media (min-width: 1200px) {
    body.is-scrolled .app-header .logo {
        margin-right: 30px;
    }

        body.is-scrolled .app-header .logo img {
            width: 60px;
        }

    body.is-scrolled .app-header .main-wrap > div:last-child {
        padding-left: 90px;
    }
}

@media (min-width: 1500px) {
    body.is-scrolled .app-header .logo img {
        width: 80px;
    }

    body.is-scrolled .app-header .main-wrap > div:last-child {
        padding-left: 110px;
    }
}
/* ---------- /header ---------- */


/* ---------- page ---------- */
.page {
    flex-grow: 1;
    width: 100%;
    position: relative;
}

.page-head {
    display: flex;
    flex-direction: column;
    height: 400px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 160px;
    padding-bottom: 40px;
    position: relative;
}

    .page-head::before,
    .page-head::after {
        content: "";
        width: 100%;
        pointer-events: none;
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .page-head::before {
        height: 242px;
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000);
        opacity: 0.8;
        z-index: 1;
    }

    .page-head::after {
        background: url("../images/head_pattern.png") right top no-repeat;
        opacity: 0.2;
        top: 0;
        z-index: 0;
    }

    .page-head .container {
        margin: auto;
        position: relative;
        z-index: 2;
    }

    .page-head .title,
    .page-head .text {
        color: #fff;
    }

        .page-head .title::after {
            content: "";
            display: block;
            width: 70px;
            height: 3px;
            background-color: #fff;
            opacity: 0.3;
            margin-top: 4px;
        }

    .page-head .text {
        margin-top: 6px;
    }

    .page-head .container,
    .page-nav .container,
    .page-content .container,
    .page-content-wrap .container {
        padding-left: 160px;
        padding-right: 160px;
    }

.page-nav .card,
.page-content .card {
    display: block;
    background-color: #fff;
    border: 0;
    border-radius: 0;
}

.page-nav .card,
.page-content .card,
.page-content-head-inner {
    padding-left: 60px;
    padding-right: 60px;
}

.page-content .card {
    padding-top: 60px;
    padding-bottom: 60px;
}

.page-nav {
    margin: -40px 0 48px;
    position: relative;
    z-index: 3;
}

    .page-nav .card {
        height: 80px;
        box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.07);
        overflow: hidden;
    }

    .page-nav .scroll-btn {
        background-color: transparent;
        border: 0;
        padding: 18px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

        .page-nav .scroll-btn .icon {
            display: block;
            opacity: 0.4;
            transition: all 0.3s ease;
        }

            .page-nav .scroll-btn .icon::before {
                width: 12px;
                height: 12px;
            }

        .page-nav .scroll-btn.prev-btn {
            left: 0;
        }

        .page-nav .scroll-btn.next-btn {
            right: 0;
        }

        .page-nav .scroll-btn.prev-btn:hover .icon {
            transform: translateX(-4px);
        }

        .page-nav .scroll-btn.next-btn:hover .icon {
            transform: translateX(4px);
        }

        .page-nav .scroll-btn.disabled {
            display: none;
        }

    .page-nav ul {
        display: flex;
        white-space: nowrap;
        overflow: auto;
        position: relative;
    }

    .page-nav li {
        margin-right: 50px;
    }

        .page-nav li:last-child {
            margin-right: 0 !important;
        }

        .page-nav li a {
            display: block;
            border-bottom: 2px solid transparent;
            padding: 29px 0 25px;
            color: #7f7f7f;
            font-size: 16px;
            font-weight: 300;
            line-height: 24px;
        }

            .page-nav li a:hover,
            .page-nav li a.active {
                color: #0099ff;
            }

            .page-nav li a.active {
                border-bottom-color: #0099ff;
                font-weight: bold;
            }

.page-content {
    margin-top: -40px;
    position: relative;
    z-index: 2;
}

.page-nav + .page-content {
    margin-top: 0 !important;
}

.page-content .card {
    min-height: 400px;
}

    .page-content .card > .back-btn {
        padding: 14px;
        position: absolute;
        top: 18px;
        left: 4px;
    }

    .page-content .card > button.back-btn {
        background-color: transparent;
        border: 0;
    }

    .page-content .card > .back-btn .icon {
        display: block;
    }

@media (max-width: 1499px), (min-width: 1500px) and (max-height: 809px) {
    .page-head {
        height: 305px;
        padding-top: 120px;
        padding-bottom: 30px;
    }

        .page-head .container,
        .page-nav .container,
        .page-content .container,
        .page-content-wrap .container {
            padding-left: 120px;
            padding-right: 120px;
        }

    .page-nav .card,
    .page-content .card,
    .page-content-head-inner {
        padding-left: 30px;
        padding-right: 30px;
    }

    .page-content .card {
        padding-top: 35px;
    }

    .page-head .text {
        font-size: 14px;
        margin-top: 10px;
    }

    .page-nav {
        margin: -30px 0 30px;
    }

        .page-nav .card {
            height: 60px;
        }

        .page-nav ul {
            height: 90px;
            padding-bottom: 30px;
        }

        .page-nav li {
            margin-right: 40px;
        }

            .page-nav li a {
                padding: 19px 0 15px;
                font-size: 14px;
            }

        .page-nav .scroll-btn {
            height: 100%;
            padding: 18px 9px;
        }

    .page-content {
        margin-top: -30px;
    }

        .page-content .card > .back-btn {
            top: 7px;
            left: 0;
        }
}

@media (max-width: 1199px) {
    .page-head {
        padding-top: 108px;
    }

        .page-head .container,
        .page-nav .container,
        .page-content .container,
        .page-content-wrap .container {
            padding-left: 0;
            padding-right: 0;
        }
}

@media (max-width: 991px) {
    .page {
        background-color: #fff;
    }

    .page-head {
        height: 216px;
        padding-bottom: 0;
    }

        .page-head .text {
            display: none;
        }

    .page-nav {
        box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.07);
        margin: 0;
    }

    .page-content {
        margin-top: 0;
    }

        .page-nav .card,
        .page-content .card {
            box-shadow: none;
            padding-left: 0;
            padding-right: 0;
        }

    .page-content-head-inner {
        padding-left: 15px;
        padding-right: 15px;
    }

    .page-nav li {
        margin-right: 24px;
    }

        .page-nav li a {
            font-size: 12px;
        }

    .page-nav .scroll-btn {
        display: none;
    }

    .page-content .card > .back-btn {
        display: none;
    }
}

@media (max-width: 767px) {
    .page-head {
        height: 180px;
        padding-top: 60px;
    }
}

@media (max-width: 575px) {
    .page-head {
        height: 140px;
    }

        .page-head .title {
            text-align: center;
        }

            .page-head .title::after {
                display: none;
            }
}
/* ---------- /page ---------- */


/* ---------- footer ---------- */
footer.app-footer {
    flex-shrink: 0;
    background-color: #3B3B3B;
    color: rgba(255,255,255,0.5);
    font-size: 14px;
}

    footer.app-footer a {
        color: inherit;
    }

    footer.app-footer .bnr-col,
    footer.app-footer .subscribe-col {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    footer.app-footer .bnr-col {
        /*flex: 0 0 62%;*/
        flex: 0 0 100%;
        display: flex;
        justify-content: space-between;
        padding-right: 38px;
    }

    footer.app-footer .logo {
        max-width: 200px;
    }

    footer.app-footer .bnr {
        margin-left: 40px;
        max-width: 300px;
    }

        footer.app-footer .logo img,
        footer.app-footer .bnr img {
            display: block;
            max-width: 100%;
            height: 200px;
            object-fit: contain;
        }

    footer.app-footer .subscribe-col {
        flex: 0 0 38%;
        display: flex;
        flex-direction: column;
        padding-left: 38px;
    }

        footer.app-footer .subscribe-col > strong {
            display: block;
            margin-bottom: 6px;
            color: #fff;
            font-size: 18px;
        }

        footer.app-footer .subscribe-col > p {
            max-width: 490px;
            margin-bottom: 15px;
            color: rgba(255,255,255,0.8);
            line-height: 2;
        }

        footer.app-footer .subscribe-col .form {
            display: flex;
            border-bottom: 2px solid #000;
            padding-bottom: 9px;
            margin: auto 0 9px;
        }

            footer.app-footer .subscribe-col .form input {
                flex-grow: 1;
                background-color: transparent;
                border-color: transparent;
                outline: none;
                padding-bottom: 7px;
                color: #fff;
                font-size: 18px;
            }

                footer.app-footer .subscribe-col .form input::placeholder {
                    color: inherit;
                    opacity: 0.2;
                }

            footer.app-footer .subscribe-col .form button {
                flex-shrink: 0;
                background-color: #000;
                border: 0;
                padding: 13px;
            }

                footer.app-footer .subscribe-col .form button img {
                    display: block;
                    width: 24px;
                }

    footer.app-footer nav {
        border-top: 1px solid rgba(255,255,255,0.1);
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding: 62px 0 67px;
    }

        footer.app-footer nav > ul {
            display: flex;
            justify-content: space-between;
        }

@media (min-width: 992px) {
    footer.app-footer nav > ul > li {
        max-width: 20%;
    }
}

footer.app-footer nav a {
    display: inline-block;
    line-height: 2;
}

footer.app-footer nav > ul > li > a {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 4px;
}

footer.app-footer nav li li a {
    padding: 6px 0;
}

footer.app-footer nav a:hover {
    text-decoration: underline;
}

footer.app-footer .bottom-wrap {
    padding: 45px 0 65px;
}

    footer.app-footer .bottom-wrap > .row {
        justify-content: space-between;
    }

        footer.app-footer .bottom-wrap > .row + .row {
            margin-top: 25px;
        }

        footer.app-footer .bottom-wrap > .row:first-child img {
            display: block;
            width: 180px;
        }

    footer.app-footer .bottom-wrap p {
        line-height: 1.8;
    }

    footer.app-footer .bottom-wrap .nav-col ul {
        display: flex;
        list-style: none;
    }

    footer.app-footer .bottom-wrap .nav-col li {
        margin-right: 40px;
    }

footer.app-footer .social-media-wrap > span {
    color: inherit;
}

@media (max-width: 1499px) {
    footer.app-footer {
        font-size: 12px;
    }

        footer.app-footer .bnr-col,
        footer.app-footer .subscribe-col {
            padding-top: 40px;
            padding-bottom: 40px;
        }

        footer.app-footer .bnr-col {
            flex: 0 0 68%;
            padding-right: 20px;
        }

        footer.app-footer .subscribe-col {
            flex: 0 0 32%;
            padding-left: 20px;
        }

            footer.app-footer .subscribe-col > strong {
                font-size: 16px;
            }

            footer.app-footer .subscribe-col > p {
                max-width: 100%;
                font-size: 12px;
            }

        footer.app-footer nav {
            padding: 35px 0;
        }

            footer.app-footer nav > ul > li > a {
                font-size: 14px;
            }

            footer.app-footer nav li li a {
                padding: 3px 0;
            }

        footer.app-footer .bottom-wrap {
            padding: 35px 0 40px;
        }
}

@media (max-width: 1300px) {
    footer.app-footer .bnr-col {
        flex: 0 0 60%;
    }

    footer.app-footer .subscribe-col {
        flex: 0 0 40%;
    }

    footer.app-footer .bnr {
        margin-left: 30px;
    }

        footer.app-footer .logo img,
        footer.app-footer .bnr img {
            height: 180px;
        }

    footer.app-footer .social-media-wrap > span {
        display: none;
    }
}

@media (max-width: 991px) {
    footer.app-footer .bnr-col {
        flex: 0 0 100%;
    }

    footer.app-footer .subscribe-col {
        flex: 0 0 60%;
        padding: 0 15px;
    }

        footer.app-footer .subscribe-col .form input {
            font-size: 14px;
        }

        footer.app-footer .subscribe-col .form button {
            padding: 9px;
        }

    footer.app-footer nav {
        border-top: 0;
        padding: 20px 0 15px;
    }

        footer.app-footer nav > ul {
            justify-content: flex-start;
        }

            footer.app-footer nav > ul > li {
                margin-bottom: 20px;
            }
}

@media (max-width: 767px) {
    footer.app-footer .subscribe-col {
        flex: 0 0 100%;
    }

    footer.app-footer .bottom-wrap > .row:first-child img {
        max-width: 110px;
        margin-top: 15px;
    }

    footer.app-footer .bottom-wrap .nav-col ul {
        display: block;
    }

    footer.app-footer .bottom-wrap .nav-col li + li,
    footer.app-footer .bottom-wrap .social-col {
        margin-top: 15px;
    }

    footer.app-footer .social-media-wrap > span {
        display: block;
        margin-right: auto;
    }
}

@media (max-width: 575px) {
    footer.app-footer .bnr-col {
        display: block;
    }

        footer.app-footer .bnr-col > * {
            max-width: 100%;
            overflow: hidden;
        }
        /*footer.app-footer .bnr-col *{
        display: block;
        width: 100%;
    }*/
        footer.app-footer .bnr-col img {
            height: 150px;
        }

    footer.app-footer .bnr {
        margin: 20px 0 0 0;
    }
}
/* ---------- /footer ---------- */



/* ==================== 4. components ==================== */


/* ----------- hamburger ----------- */
.hamburger {
    flex-shrink: 0;
    display: block;
    width: 20px;
    height: 16px;
    background-color: transparent;
    border: 0;
    outline: none !important;
    cursor: pointer;
    padding: 0;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    overflow: visible;
    position: relative;
    z-index: 50;
}

    .hamburger:before {
        content: "";
        position: absolute;
        top: -12px;
        bottom: -12px;
        left: -12px;
        right: -12px;
    }

    .hamburger span,
    .hamburger span::before,
    .hamburger span::after {
        display: block;
        width: 20px;
        height: 2px;
        background-color: #000;
        border-radius: 4px;
        position: absolute;
        transition-property: transform;
        transition-duration: 0.15s;
        transition-timing-function: ease;
    }

    .hamburger span {
        top: 0;
    }

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

        .hamburger span::before {
            top: 7px;
            transition-property: transform, opacity;
            transition-timing-function: ease;
            transition-duration: 0.15s;
        }

        .hamburger span::after {
            top: 14px;
        }

    .hamburger.is-active span,
    .nav-is-open .hamburger span {
        transform: translate3d(-1px, 7px, 0) rotate(45deg);
    }

        .hamburger.is-active span::before,
        .nav-is-open .hamburger span::before {
            transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
            opacity: 0;
        }

        .hamburger.is-active span::after,
        .nav-is-open .hamburger span::after {
            transform: translate3d(0, -14px, 0) rotate(-90deg);
        }

        .hamburger.is-active span,
        .hamburger.is-active span::before,
        .hamburger.is-active span::after,
        .nav-is-open .hamburger span,
        .nav-is-open .hamburger span::before,
        .nav-is-open .hamburger span::after {
            width: 22px;
        }

@media (min-width: 1300px) {
    .hamburger {
        height: 22px;
    }

        .hamburger,
        .hamburger span,
        .hamburger span::before,
        .hamburger span::after {
            width: 28px !important;
        }

            .hamburger span::before {
                top: 10px;
            }

            .hamburger span::after {
                top: 20px;
            }

            .hamburger.is-active span,
            .nav-is-open .hamburger span {
                transform: translate3d(-1px, 10px, 0) rotate(45deg);
            }

                .hamburger.is-active span::after,
                .nav-is-open .hamburger span::after {
                    transform: translate3d(0, -20px, 0) rotate(-90deg);
                }
}
/* ----------- /hamburger ----------- */


/* ---------- title,text ---------- */
.title {
    display: block;
    color: #000;
    font-weight: bold;
    line-height: 1;
}

    .title * {
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
    }

    .title a {
        color: inherit;
    }

.title-xxl {
    font-size: 70px;
    font-weight: 300;
    line-height: 1.4;
}

.title-xl {
    font-size: 54px;
    line-height: 1.2;
}

.title-lg,
.text-wrap h1 {
    font-size: 40px;
    line-height: 1.25;
}

.title-md,
.text-wrap h2 {
    font-size: 28px;
    line-height: 1.3;
}

.title-sm,
.text-wrap h3 {
    font-size: 24px;
    line-height: 1.3;
}

.title-xs,
.text-wrap h4 {
    font-size: 20px;
    line-height: 1.5;
}

.title-xxs,
.text-wrap h5 {
    font-size: 20px;
    font-style: italic;
    line-height: 1.5;
}

.text-wrap h6 {
    font-size: 18px;
    font-style: italic;
    line-height: 1.5;
}

.title.with-border,
.title.with-border-sm {
    position: relative;
}

    .title.with-border::before,
    .title.with-border::after,
    .title.with-border-sm::before,
    .title.with-border-sm::after {
        content: "";
        display: block;
        width: 100%;
        background-color: #0099ff;
    }

    .title.with-border::after,
    .title.with-border-sm::after {
        height: 1px;
        margin-top: 30px;
    }

    .title.with-border::before,
    .title.with-border-sm::before {
        max-width: 128px;
        height: 3px;
        position: absolute;
        bottom: -1px;
        left: 0;
    }

    .title.with-border::after {
        max-width: 450px;
    }

    .title.with-border-sm::after {
        max-width: 260px;
    }

.text,
.text-wrap {
    color: #000;
    font-size: 20px;
    font-weight: 300;
}

    .text-wrap:before,
    .text-wrap:after {
        display: table;
        content: " ";
    }

    .text-wrap:after {
        clear: both;
    }

    .text-wrap > * {
        margin-bottom: 20px;
    }

        .text-wrap > *:last-child {
            margin-bottom: 0;
        }

    .text-wrap ol {
        padding-left: 40px;
    }

    .text-wrap li + li {
        margin-top: 10px;
    }

    .text-wrap ul {
        list-style: none;
    }

        .text-wrap ul li {
            padding-left: 30px;
            position: relative;
        }

            .text-wrap ul li::before {
                /*flex-shrink: 0;*/
                content: "";
                width: 10px;
                height: 10px;
                background-color: #0099ff;
                /*margin: 11px 30px 0 0;*/
                position: absolute;
                top: 11px;
                left: 0;
            }

    .text-wrap img,
    .text-wrap .img-with-pattern {
        max-width: 45%;
        margin-bottom: 35px;
    }

        .text-wrap img[style*="float: left"],
        .text-wrap .img-with-pattern[style*="float: left"] {
            margin-right: 50px;
        }

        .text-wrap img[style*="float: right"],
        .text-wrap .img-with-pattern[style*="float: right"] {
            margin-left: 50px;
        }

    .text-wrap ul + img,
    .text-wrap ul + .img-with-pattern {
        margin-top: 12px;
    }

        .text-wrap ul + img + *,
        .text-wrap ul + .img-with-pattern + * {
            margin-top: 25px;
        }

    .text-wrap .img-with-pattern {
        position: relative;
    }

        .text-wrap .img-with-pattern img {
            display: inline-block;
            max-width: 100%;
            margin: 0;
            position: relative;
            z-index: 2;
        }

        .text-wrap .img-with-pattern::before {
            content: "";
            background: url("../images/img_pattern.png") right bottom no-repeat;
            background-size: contain;
            position: absolute;
            top: 0;
            bottom: -10px;
            left: 0;
            right: -10px;
            z-index: 1;
        }

    .text-wrap .row > div img {
        max-width: 100%;
    }

    .text-wrap blockquote {
        display: flex;
        flex-direction: column;
        color: rgba(0, 0, 0, 0.5);
    }

        .text-wrap blockquote::before {
            flex-shrink: 0;
            content: "";
            display: inline-block;
            width: 32px;
            height: 32px;
            background: url("../images/icons/quotation_marks.svg") 0 0 no-repeat;
            background-size: contain;
            margin-bottom: 15px;
        }

    .text a,
    .text a:hover,
    .text-wrap a,
    .text-wrap a:hover {
        color: #0099ff;
    }

    .text a,
    .text-wrap a {
        text-decoration: none;
    }

        .text a:hover,
        .text-wrap a:hover {
            text-decoration: underline;
        }

        .text a[target="_blank"],
        .text-wrap a[target="_blank"] {
            position: relative;
            padding-right: 15px;
            background: url(../images/icons/target_blank.svg) right 0 no-repeat;
            background-size: 12px 12px;
        }
    /*.text a[target="_blank"]::after,
.text-wrap a[target="_blank"]::after{
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url("../images/icons/target_blank.svg") 0 0 no-repeat;
    background-size: contain;
    margin-left: 3px;
}*/

    .text strong,
    .text-wrap strong {
        font-weight: bold;
    }

    .text b,
    .text-wrap b {
        font-weight: normal;
    }

    .text-wrap > hr {
        margin: 50px 0;
    }

    .text-wrap > br,
    .text-wrap > .cl {
        margin: 0;
    }

    .text-wrap .dropdown-menu ul {
        padding: 10px 0;
    }

    .text-wrap .dropdown-menu li,
    .text-wrap .dropdown-menu li + li {
        margin: 0;
    }

        .text-wrap .dropdown-menu li::before {
            display: none;
        }

    .text-wrap .dropdown-menu li {
        display: block;
    }

        .text-wrap .dropdown-menu li > a,
        .text-wrap .dropdown-menu li > span {
            display: flex;
            padding: 8px 16px;
            color: #000;
            font-size: 16px;
            font-weight: bold;
        }

        .text-wrap .dropdown-menu li ul {
            padding: 0;
            margin: -3px 0 0 10px;
        }

        .text-wrap .dropdown-menu li li > a,
        .text-wrap .dropdown-menu li li > span {
            font-size: 14px;
            font-weight: normal;
            padding: 5px 16px 5px 20px;
        }

    .text-wrap .form-select .dropdown-menu .scrollable-container {
        max-height: 300px;
    }

.br-description {
    display: block;
    margin-bottom: 0;
}

.block-description {
    margin-bottom: 0px;
}

.block-description > * {
    margin-bottom: 20px;
}

.block-description > *:last-child{
    margin-bottom: 0px !important; 
}

@media (max-width: 1649px) {
    .title-xxl {
        font-size: 50px;
    }
}

@media (max-width: 1499px), (min-width: 1500px) and (max-height: 809px) {
    .title-xl {
        font-size: 36px;
    }

    .title-lg,
    .text-wrap h1 {
        font-size: 32px;
    }

    .text,
    .text-wrap {
        font-size: 18px;
    }
}

@media (max-width: 991px) {
    .title-xxl {
        font-size: 40px;
    }

    .title-xl {
        font-size: 32px;
    }

    .title-lg,
    .text-wrap h1 {
        font-size: 30px;
    }

    .title-md,
    .text-wrap h2 {
        font-size: 24px;
    }

    .title-sm,
    .text-wrap h3 {
        font-size: 20px;
    }

    .title-xs,
    .text-wrap h4 {
        font-size: 18px;
    }

    .title-xxs,
    .text-wrap h5 {
        font-size: 18px;
    }

    .text-wrap h6 {
        font-size: 16px;
    }

    .text,
    .text-wrap {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    .title-xxl {
        font-size: 32px;
    }

    .title-xl,
    .title-lg,
    .text-wrap h1 {
        font-size: 22px;
    }

    .title-md,
    .text-wrap h2 {
        font-size: 20px;
    }

    .title-sm,
    .text-wrap h3 {
        font-size: 18px;
    }

    .title-xs,
    .text-wrap h4 {
        font-size: 16px;
    }

    .title-xxs,
    .text-wrap h5 {
        font-size: 16px;
    }

    .text-wrap h6 {
        font-size: 14px;
    }

    .text,
    .text-wrap {
        font-size: 14px;
    }

        .text-wrap .img-with-pattern::before {
            bottom: -8px;
            right: -8px;
        }

        .text-wrap img[style*="float: left"],
        .text-wrap .img-with-pattern[style*="float: left"] {
            margin-right: 30px;
        }

        .text-wrap img[style*="float: right"],
        .text-wrap .img-with-pattern[style*="float: right"] {
            margin-left: 30px;
        }
}

@media (max-width: 575px) {
    .title-xxl {
        font-size: 26px;
    }

    .text-wrap .img-with-pattern::before {
        bottom: -6px;
        right: -6px;
    }

    .text-wrap img[style*="float: left"],
    .text-wrap .img-with-pattern[style*="float: left"],
    .text-wrap img[style*="float: right"],
    .text-wrap .img-with-pattern[style*="float: right"] {
        float: none !important;
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
    }

    .text-wrap .img-with-pattern {
        width: calc(100% - 10px);
    }

        .text-wrap .img-with-pattern img {
            width: 100%;
        }
}
/* ---------- /title,text ---------- */


/* ---------- hr ---------- */
hr {
    border-top-color: #0099ff;
    margin: 50px 0;
    position: relative;
}

    hr::before {
        content: "";
        width: 128px;
        height: 3px;
        background-color: #0099ff;
        position: absolute;
        bottom: -1px;
        left: 0;
    }
/* ---------- /hr ---------- */


/* ---------- buttons, links ---------- */
.btn,
.btn:focus {
    min-width: 52px;
    height: auto;
    border: 1px solid transparent;
    border-radius: 0;
    box-shadow: none !important;
    outline: none;
    padding: 15px 26px;
    color: #000;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

@media (min-width: 992px) {
    .btn-lg,
    .btn-lg:focus {
        min-width: 64px;
        padding: 21px 32px;
    }
}

/* primary */
.btn-primary,
.btn-primary:focus,
.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: #0099ff;
    border-color: #0099ff;
    color: #fff;
}

/* secondary */
.btn-secondary,
.btn-secondary:focus,
.btn-secondary:hover,
.btn-secondary:not(:disabled):not(.disabled):active {
    background-color: #000;
    border-color: #000;
    color: #fff;
}

/* warning */
.btn-warning,
.btn-warning:focus,
.btn-warning:hover,
.btn-warning:not(:disabled):not(.disabled):active {
    background-color: #FEF8E9;
    border-color: #FEF8E9;
    color: #F7991C;
}

/* danger */
.btn-danger,
.btn-danger:focus,
.btn-danger:hover,
.btn-danger:not(:disabled):not(.disabled):active {
    background-color: #FEEEF3;
    border-color: #FEEEF3;
    color: #ED3D24;
}

/* info */
.btn-info,
.btn-info:focus,
.btn-info:hover,
.btn-info:not(:disabled):not(.disabled):active {
    background-color: #E1EEF5;
    border-color: #E1EEF5;
    color: #056699;
}

/* ligh */
.btn-light,
.btn-light:focus,
.btn-light:hover,
.btn-light:not(:disabled):not(.disabled):active {
    background-color: #F6F6F6;
    border-color: #F6F6F6;
    color: #7F7F7F;
}

.btn.is-loading {
    background-image: url("../images/icons/spinner_white.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 28px 28px;
    pointer-events: none;
}

    .btn.is-loading > * {
        opacity: 0;
    }


.link {
    position: relative;
    font-size: 14px;
}

    .link,
    .link:hover {
        color: #000;
    }

button.link {
    background: none;
    border: 0;
    padding: 0;
}

.link span,
.link .icon,
.btn span span,
.btn .icon {
    display: inline-block;
    transition: all 0.3s ease;
}

.link span,
.btn span {
    position: relative;
}

.link .icon,
.btn .icon {
    opacity: 0;
    margin-top: -4px;
    position: absolute;
    top: 50%;
    right: 0;
}

    .link .icon:first-child,
    .btn .icon:first-child {
        margin-top: -5px;
        right: 100%;
    }

.link:hover span:first-child,
.btn:hover span span:first-child {
    transform: translateX(-8px);
}

.link:hover .icon + span,
.btn:hover .icon + span {
    margin-left: 22px;
}

.link:hover .icon,
.btn:hover .icon {
    opacity: 1;
    transform: translateX(90%);
}

    .link:hover .icon:first-child,
    .btn:hover .icon:first-child {
        transform: translateX(100%);
    }

/* arrow btn */
.arrow-btn {
    display: block;
    width: 48px;
    height: 48px;
    border: 0;
}

    .arrow-btn.prev-btn {
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        background-color: rgba(255,255,255,0.45);
    }

    .arrow-btn.next-btn {
        background-color: #4c4c4c;
    }

    .arrow-btn .icon {
        display: block;
    }

        .arrow-btn .icon::before {
            width: 12px;
            height: 12px;
            margin: 0 auto;
        }

    .arrow-btn.prev-btn .icon {
        opacity: 0.4;
        transform-origin: center right;
    }

    .arrow-btn.next-btn .icon {
        transform-origin: center left;
    }

    .arrow-btn,
    .arrow-btn .icon {
        transition: all 0.3s ease;
    }

.desktop .arrow-btn.prev-btn:hover {
    background-color: #ababab;
}

.desktop .arrow-btn.next-btn:hover {
    background-color: #000;
}

.desktop .arrow-btn.prev-btn:hover .icon {
    opacity: 1;
    transform: translateX(-5px);
}

.desktop .arrow-btn.next-btn:hover .icon {
    transform: translateX(5px);
}

.show-more-items-btn {
    width: 100%;
    max-width: 214px;
}

@media (max-width: 767px) {
    .arrow-btn {
        display: block;
        width: 36px;
        height: 36px;
        border: 0;
    }
}
/* ---------- /buttons, links ---------- */


/* ---------- tooltip ---------- */
.tooltip-inner {
    max-width: 600px;
    padding: 15px;
    font-size: 12px;
    line-height: 2;
    text-align: left;
}
/* ---------- /tooltip ---------- */


/* ---------- form ---------- */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 8px 16px;
}

    .form-label .tooltip-btn {
        background: none;
        border: 0;
        padding: 0;
        position: relative;
        top: -1px;
    }

        .form-label .tooltip-btn img {
            display: inline-block;
            width: 16px;
        }

.form-description {
    color: #a5a5a5;
    font-size: 16px;
    font-weight: 300;
    margin: 0 0 8px 16px;
}

.form-label + .form-description {
    margin-top: -8px;
}

.form-control,
textarea.form-control {
    height: 48px;
}

.form-control-wrap,
.form-control,
.calendar-input-wrap .form-control[readonly] {
    color: #000;
    font-size: 14px;
    font-weight: 300;
}

    .form-control-wrap > label,
    .form-control,
    .calendar-input-wrap .form-control[readonly] {
        padding: 10px 16px;
    }

.form-control,
.calendar-input-wrap .form-control[readonly] {
    background-color: #f6f6f6;
    border-color: #f6f6f6;
    border-bottom: 2px solid rgba(0,153,255,0.2);
    border-radius: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

    .form-control:focus,
    .form-control:hover,
    .calendar-input-wrap .form-control[readonly]:focus {
        background-color: #f2f1f1;
        border-color: #f2f1f1;
        border-bottom-color: rgba(0,153,255,0.5);
        box-shadow: none;
    }

textarea.form-control {
    padding: 12px 16px;
    resize: vertical;
}

.form-control::placeholder {
    color: #a5a5a5;
}

/* checkbox, radio */
.custom-control {
    min-height: 20px;
    padding: 0;
    margin: 0;
}

.custom-control-label {
    display: flex;
    color: #242424;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

    .custom-control-label::before {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        background: #fff;
        background-size: 20px 20px;
        border: 1px solid rgba(0,0,0,0.2);
        box-shadow: none !important;
        margin: 0 11px 0 0;
        position: relative;
        top: 0;
        left: 0;
    }

.custom-checkbox .custom-control-label::before {
    background: #fff url("../images/icons/tick_white.svg") -100px no-repeat;
    border-radius: 3px;
}

.custom-radio .custom-control-label::after {
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    left: 6px;
    top: 6px;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-position: center;
    background-color: #0099ff;
    border-color: #0099ff;
}

.custom-control-label span {
    margin: auto 0;
}

.custom-checkbox .custom-control-label::after {
    display: none !important;
}

.custom-checkbox.empty-label {
    width: 20px;
}

    .custom-checkbox.empty-label .custom-control-label::before {
        margin: 0;
    }

.custom-checkbox.btn {
    padding-left: 12px;
    padding-right: 12px;
}

    .custom-checkbox.btn .custom-control-label {
        color: #fff;
    }

/* dropdown */
.form-select .form-control {
    display: block;
    padding-right: 44px;
    position: relative;
    text-align: left;
}

    .form-select .form-control::after {
        content: "";
        width: 12px;
        height: 100%;
        background: url("../images/icons/dropdown_chevron_blue.svg") center no-repeat;
        background-size: 12px 8px;
        position: absolute;
        top: 0;
        right: 22px;
    }

.form-select.show .form-control::after {
    transform: rotate(180deg);
}

.form-select .form-control > span {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.form-select .dropdown-menu {
    width: 100%;
    background-color: #f6f6f6;
    border: 0;
    border-radius: 0;
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);
    padding: 0;
    margin: 0;
}

    .form-select ul.dropdown-menu,
    .form-select .dropdown-menu ul {
        list-style: none;
    }

    .form-select .dropdown-menu .scrollable-container {
        max-height: 200px;
    }

    .form-select .dropdown-menu label {
        display: block;
        width: 100%;
        position: relative;
        overflow: hidden;
        margin: 0;
        color: #000;
        font-size: 16px;
        font-weight: 300;
        line-height: 1.5;
    }

        .form-select .dropdown-menu label input {
            opacity: 0;
            position: absolute;
            top: -100%;
            left: 0;
        }

        .form-select .dropdown-menu label > span {
            display: flex;
            padding: 10px 16px;
            cursor: pointer;
        }

    .form-select .dropdown-menu .custom-control-label {
        display: flex;
    }

    .form-select .dropdown-menu label:hover > span {
        background-color: #ecebeb;
    }

    .form-select .dropdown-menu label input:checked + span {
        background-color: #e5f5ff;
        color: #0099ff;
        cursor: default;
    }

.form-select .form-control > span span:not(:last-child)::after {
    content: ","
}

/* error */
.error-text {
    display: none;
    padding: 2px 0 0 5px;
    color: #ed3d24;
    font-size: 12px;
}

.has-error .error-text {
    display: block;
}

.has-error .form-control {
    border-bottom-color: #ed3d24;
}

.submit-btn {
    width: 100%;
    max-width: 214px;
}

@media (min-width: 768px) {
    .form-group {
        margin-bottom: 26px;
    }
}

@media (min-width: 1500px) {
    .form-group {
        margin-bottom: 38px;
    }

    .form-control,
    textarea.form-control {
        height: 60px;
    }

    .form-control {
        font-size: 16px;
    }

    textarea.form-control {
        padding: 16px;
    }

    .form-control-wrap > label {
        padding-top: 7px;
        transform: translateY(13px);
    }
}
/* ---------- /form ---------- */


/* ---------- file upload ---------- */
.custom-file {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border: 1px dashed #a5a5a5;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

    .custom-file input {
        display: block;
        width: 100%;
        height: 100%;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
    }

    .custom-file .upload-icon {
        margin-right: 14px;
    }

        .custom-file .upload-icon img {
            display: block;
            width: auto;
            height: 24px;
        }

    .custom-file span {
        color: #a5a5a5;
        font-size: 14px;
        font-weight: 300;
    }

.files-container .file {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    background-color: #f6f6f6;
    border: 1px solid #dae1f5;
    border-radius: 4px;
    padding: 0 9px 0 12px;
    margin-bottom: 10px;
}

    .files-container .file .icon {
        flex-shrink: 0;
    }

    .files-container .file .name {
        flex-grow: 1;
        margin: 1px 2px 0 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #7F7F7F;
        font-size: 11px;
        font-weight: 300;
    }

    .files-container .file .remove-btn {
        background: #E0E5F8;
        border: 0;
        padding: 0;
    }

        .files-container .file .remove-btn .icon {
            display: block;
        }

            .files-container .file .remove-btn .icon::before {
                width: 20px;
                height: 20px;
            }

@media (min-width: 768px) {
    .custom-file,
    .files-container {
        width: 204px;
    }

        .files-container .file {
            height: 34px;
            margin-bottom: 7px;
        }

    [data-files-count="0"] .custom-file,
    [data-files-count="1"] .custom-file,
    [data-files-count="2"] .custom-file,
    [data-files-count="3"] .custom-file {
        flex-direction: column;
        padding: 20px 0;
    }

    [data-files-count="0"] .custom-file {
        height: 204px;
    }

    [data-files-count="1"] .custom-file {
        height: 163px;
    }

    [data-files-count="2"] .custom-file {
        height: 122px;
    }

    [data-files-count="3"] .custom-file {
        height: 81px;
        padding: 10px 0 6px;
    }

    [data-files-count="4"] .custom-file {
        height: 40px;
    }

    [data-files-count="0"] .custom-file .upload-icon,
    [data-files-count="1"] .custom-file .upload-icon,
    [data-files-count="2"] .custom-file .upload-icon,
    [data-files-count="3"] .custom-file .upload-icon {
        flex-grow: 1;
        width: 100%;
        height: auto;
        max-height: 74px;
        margin-right: 0;
        position: relative;
    }

    [data-files-count="0"] .custom-file img,
    [data-files-count="1"] .custom-file img,
    [data-files-count="2"] .custom-file img,
    [data-files-count="3"] .custom-file img {
        height: 100%;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    [data-files-count="0"] .custom-file .upload-icon {
        margin-bottom: 25px;
    }

    [data-files-count="1"] .custom-file .upload-icon {
        margin-bottom: 15px;
    }

    [data-files-count="2"] .custom-file .upload-icon {
        margin-bottom: 10px;
    }

    [data-files-count="3"] .custom-file .upload-icon {
        margin-bottom: 6px;
    }

    [data-files-count="5"] .custom-file {
        display: none;
    }

    [data-files-count="5"] .files-container .file {
        margin-bottom: 8px;
    }

        [data-files-count="5"] .files-container .file:last-child {
            margin-bottom: 0;
        }
}

@media (min-width: 1500px) {
    .custom-file,
    .files-container {
        width: 260px;
    }

        .custom-file span {
            font-size: 16px;
        }

        .files-container .file {
            height: 40px;
            margin-bottom: 10px;
        }

    [data-files-count="0"] .custom-file,
    [data-files-count="1"] .custom-file,
    [data-files-count="2"] .custom-file,
    [data-files-count="3"] .custom-file {
        padding: 20px 0;
    }

    [data-files-count="0"] .custom-file {
        height: 260px;
    }

    [data-files-count="1"] .custom-file {
        height: 210px;
    }

    [data-files-count="2"] .custom-file {
        height: 160px;
    }

    [data-files-count="3"] .custom-file {
        height: 110px;
        padding: 15px 0 10px;
    }

    [data-files-count="4"] .custom-file {
        height: 60px;
    }

    [data-files-count="0"] .custom-file .upload-icon,
    [data-files-count="1"] .custom-file .upload-icon,
    [data-files-count="2"] .custom-file .upload-icon,
    [data-files-count="3"] .custom-file .upload-icon {
        max-height: 94px;
    }

    [data-files-count="0"] .custom-file .upload-icon {
        margin-bottom: 35px;
    }

    [data-files-count="1"] .custom-file .upload-icon {
        margin-bottom: 25px;
    }

    [data-files-count="4"] .custom-file .upload-icon img {
        height: 36px;
    }

    [data-files-count="5"] .files-container .file {
        margin-bottom: 14px;
    }
}
/* ---------- /file upload ---------- */


/* ---------- form-container ---------- */
.form-container .title {
    margin-bottom: 32px;
}

.form-container hr {
    max-width: 450px;
    margin: 34px 0;
}

.form-container .title + hr {
    margin-top: 32px;
}

.form-container .title + .text-wrap {
    margin-top: -20px;
}

.form-container .text-wrap + hr {
    margin-top: 21px;
}

.form-container .main-row > div:first-child .row > div {
    display: flex;
    flex-direction: column;
}

    .form-container .main-row > div:first-child .row > div .form-group {
        margin-top: auto;
    }

@media (max-width: 767px) {
    .form-container .main-row > .upload-col {
        padding-top: 10px;
        padding-bottom: 5px;
    }
}

@media (min-width: 768px) {
    .form-container .main-row {
        flex-wrap: nowrap;
    }

        .form-container .main-row > .upload-col {
            padding-top: 32px;
        }

    .form-container .submit-btn {
        margin-left: 16px;
    }
}

@media (min-width: 1500px) {
    .form-container .main-row {
        margin-left: -15px;
        margin-right: -15px;
    }

        .form-container .main-row > div {
            padding-left: 15px;
            padding-right: 15px;
        }
}

@media (min-width: 1650px) {
    .form-container .main-row > .upload-col {
        padding-left: 40px;
        padding-right: 30px;
    }
}
/* ---------- /form-container ---------- */


/* ---------- datepicker ---------- */
.datepicker.datepicker-dropdown {
    border: 0;
    border-radius: 0;
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.10);
    padding: 20px 30px 24px;
    margin: 0;
}

    .datepicker.datepicker-dropdown:before,
    .datepicker.datepicker-dropdown:after {
        display: none;
    }

.datepicker table {
    border-collapse: collapse;
}

    .datepicker table td,
    .datepicker table th {
        color: #7F7F7F;
        font-size: 16px;
        font-weight: normal;
        text-align: center;
    }

        .datepicker table td.prev,
        .datepicker table td.next,
        .datepicker table tbody td,
        .datepicker table th.clear {
            cursor: pointer;
        }

    .datepicker table thead th {
        padding: 8px 0;
    }

    .datepicker table .datepicker-switch {
        font-size: 18px;
        pointer-events: none;
    }

    .datepicker table thead tr:last-child th {
        padding-top: 20px;
    }

    .datepicker table .svg-chevron {
        display: inline-block;
        width: 8px;
        height: 12px;
    }

        .datepicker table .svg-chevron path {
            fill: none;
            stroke: #7F7F7F;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

    .datepicker table th:hover .svg-chevron path {
        stroke: #0099FF;
    }

    .datepicker table td {
        width: 30px;
        padding: 8px 10px;
    }

        .datepicker table td.old,
        .datepicker table td.new {
            visibility: hidden;
            pointer-events: none;
        }

            .datepicker table td.new > span {
                height: 0;
                overflow: hidden;
            }

    .datepicker table tr td > span {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        line-height: 1;
    }

    .datepicker table tr td.today span {
        background: #E5E6E8;
    }

    .datepicker table tr td:hover span,
    .datepicker table tr td.active span {
        background: #0099FF;
        color: #fff;
    }

    .datepicker table th.clear {
        height: 52px;
        background-color: #0099ff;
        border-color: #0099ff;
        color: #fff;
        font-size: 14px;
    }

        .datepicker table th.clear:hover {
            opacity: 0.8;
        }

@media (max-width: 575px) {
    .datepicker.datepicker-dropdown {
        width: auto;
        padding: 15px 12px;
        left: 15px;
        right: 15px;
    }

    .datepicker table {
        width: 100%;
    }

        .datepicker table thead tr:last-child th {
            padding-top: 10px;
        }

        .datepicker table td {
            padding: 6px 0;
        }
}
/* ---------- /datepicker ---------- */


/* ---------- scrollable container ---------- */
.scrollable-container {
    overflow: hidden;
}

.mobile .scrollable-container,
.tablet .scrollable-container {
    overflow-y: scroll;
    -webkit-overflow-scrolling: scroll;
}

.scrollable-container .mCSB_scrollTools {
    width: 8px;
    z-index: 10;
}

.scrollable-container .mCSB_inside > .mCSB_container {
    min-height: 100%;
}

    .scrollable-container .mCSB_inside > .mCSB_container:not(.mCS_no_scrollbar_y) {
        margin-right: 0;
    }

.scrollable-container .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: #bcbcbc !important;
}

.scrollable-container .mCSB_scrollTools .mCSB_draggerRail {
    width: 100%;
    background-color: transparent !important;
}
/* ---------- scrollable container ---------- */


/* ----------- social media icons ----------- */
.social-media-wrap {
    display: flex;
    align-items: center;
    margin-left: auto;
}

    .social-media-wrap > span {
        margin-right: 18px;
        color: #858585;
        font-size: 14px;
        font-weight: 300;
    }

    .social-media-wrap a {
        position: relative;
        margin: 0 20px;
    }

        .social-media-wrap a:last-child {
            margin-right: 0;
        }

        .social-media-wrap a img {
            display: block;
            height: 18px;
        }

        .social-media-wrap a::before {
            content: "";
            position: absolute;
            top: -10px;
            bottom: -10px;
            left: -10px;
            right: -10px;
        }
/* ----------- /social media icons ----------- */


/* ---------- img, bg-img ---------- */
/*.bg-img{
	display: block;
	width: 100%;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	z-index: 1;
}
.bg-img::before{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.bg-img--cover{
	background-size: cover;
}
.bg-img--contain{
	background-size: contain;
}

.bg-img.fit-container{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}*/

/*.img-cover,
.img-contain{
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.img-cover{
    object-fit: cover;
}
.img-contain{
    object-fit: contain;
}

.img-21by9::before {
    content: "";
    display: block;
    padding-top: 42.857143%;
}
.img-16by9::before {
    content: "";
    display: block;
    padding-top: 56.25%;
}
.img-4by3::before {
    content: "";
    display: block;
    padding-top: 75%;
}
.img-1by1::before {
    content: "";
    display: block;
    padding-top: 100%;
}*/
.embed-responsive img.embed-responsive-item {
    object-fit: cover;
}
/* ---------- /img, bg-img ---------- */


/* ---------- slick slider ---------- */
.slick-slide {
    outline: none;
}
/* ---------- /slick slider ---------- */


/* ---------- article slider ---------- */
.article-slider-container {
    position: relative;
    margin: 0 36px 45px 0 !important;
}

    .article-slider-container .slider-controls {
        position: absolute;
        bottom: 0;
        right: 0;
    }

        .article-slider-container .slider-controls .arrow-btn.prev-btn .icon {
            opacity: 1;
        }

        .article-slider-container .slider-controls .arrow-btn.next-btn {
            position: absolute;
            bottom: 36px;
            left: 100%;
        }

        .article-slider-container .slider-controls .arrow-btn.disabled {
            opacity: 0;
        }

        .article-slider-container .slider-controls > div {
            display: flex;
            align-items: center;
            padding-top: 10px;
            position: absolute;
            top: 100%;
            right: -36px;
            color: #000;
            font-size: 16px;
            font-weight: 300;
            line-height: 1;
        }

            .article-slider-container .slider-controls > div::before {
                content: "";
                width: 80px;
                height: 1px;
                background-color: #7F7F7F;
                margin-right: 18px;
            }

            .article-slider-container .slider-controls > div b {
                font-weight: bold;
                margin-right: 4px;
            }

            .article-slider-container .slider-controls > div span {
                margin-left: 4px;
            }

@media (min-width: 768px) {
    .article-slider-container {
        margin: 0 48px 65px 0 !important;
    }

        .article-slider-container .slider-controls .arrow-btn.next-btn {
            bottom: 48px;
        }

        .article-slider-container .slider-controls .arrow-btn .icon::before {
            width: 14px;
            height: 14px;
        }

        .article-slider-container .slider-controls > div {
            padding-top: 15px;
            right: -48px;
            font-size: 22px;
        }
}
/* ---------- /article slider ---------- */


/* ---------- vertical slider ---------- */
.vertical-slider-container {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 20px;
}

    .vertical-slider-container .slide-content {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 328px;
        padding-bottom: 19px;
        color: #fff;
        text-align: center
    }

        .vertical-slider-container .slide-content strong {
            display: block;
            font-size: 300px;
            font-weight: bold;
            line-height: 0.88;
        }

        .vertical-slider-container .slide-content p {
            font-size: 20px;
            font-weight: normal;
        }

    .vertical-slider-container .slider-controls {
        padding: 18px 0 24px;
    }

        .vertical-slider-container .slider-controls,
        .vertical-slider-container .slider-controls > div {
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .vertical-slider-container .slider-controls > div {
                width: 140px;
                color: #fff;
                font-size: 26px;
                font-weight: 300;
            }

                .vertical-slider-container .slider-controls > div > * {
                    margin: 0 6px;
                }

                .vertical-slider-container .slider-controls > div b {
                    font-weight: bold;
                }

@media (max-width: 1499px) {
    .vertical-slider-container .slide-content {
        height: 250px;
    }

        .vertical-slider-container .slide-content strong {
            font-size: 220px;
        }

        .vertical-slider-container .slide-content p {
            font-size: 18px;
        }

    .vertical-slider-container .slider-controls {
        padding: 12px 0 8px;
    }

        .vertical-slider-container .slider-controls > div {
            width: 100px;
            font-size: 20px;
        }

        .vertical-slider-container .slider-controls .arrow-btn {
            width: 42px;
            height: 42px;
        }
}

@media (max-width: 1199px) {
    .vertical-slider-container .slide-content {
        padding-bottom: 15px;
    }
}

@media (max-width: 991px) {
    .vertical-slider-container {
        padding: 15px;
    }

        .vertical-slider-container .slide-content {
            height: 200px;
            padding-bottom: 0;
        }

            .vertical-slider-container .slide-content strong {
                font-size: 160px;
            }

            .vertical-slider-container .slide-content p {
                font-size: 16px;
            }

        .vertical-slider-container .slider-controls {
            padding: 10px 0 5px;
        }
}

@media (max-width: 991px) {
    .vertical-slider-container {
        padding: 15px;
    }

        .vertical-slider-container .slide-content {
            height: auto;
            min-height: 260px;
        }

            .vertical-slider-container .slide-content strong {
                font-size: 160px;
            }

            .vertical-slider-container .slide-content p {
                font-size: 16px;
            }

        .vertical-slider-container .slider-controls {
            padding: 10px 0 5px;
        }
}
/* ---------- /vertical slider ---------- */


/* ---------- links wrap ---------- */
.link-item {
    display: flex;
}

    .link-item .icon-wrap {
        flex-shrink: 0;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        position: relative;
    }

        .link-item .icon-wrap::before,
        .link-item .icon-wrap::after {
            content: "";
            border-radius: 50%;
            position: absolute;
        }

        .link-item .icon-wrap::before {
            width: 100%;
            height: 100%;
            border: 1px solid #8f8f8f;
            top: 0;
            left: 0;
            z-index: 1;
        }

        .link-item .icon-wrap::after {
            background-color: transparent;
            top: 6px;
            bottom: 6px;
            left: 6px;
            right: 6px;
            z-index: 3;
        }

        .link-item .icon-wrap .icon {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 2;
            transform: translate(-50%,-50%);
        }

            .link-item .icon-wrap .icon::before {
                width: 32px;
                height: 32px;
            }

        .link-item .icon-wrap .hover-icon {
            z-index: 5;
        }

            .link-item .icon-wrap .hover-icon::before {
                opacity: 0;
                transform: translate(-3px, -3px);
            }

    .link-item .text {
        margin: auto 0 auto 22px;
        word-break: break-word;
    }

    .link-item .icon-wrap::before,
    .link-item .icon-wrap::after,
    .link-item .icon-wrap .hover-icon::before,
    .link-item .text {
        transition: all 0.3s ease;
    }

    .link-item:hover .icon-wrap::before,
    .link-item:hover .icon-wrap::after {
        transform: scale(0.85);
    }

    .link-item:hover .icon-wrap::before {
        border-color: #0099ff;
    }

    .link-item:hover .icon-wrap::after {
        background-color: #0099ff;
    }

    .link-item:hover .icon-wrap .hover-icon::before {
        opacity: 1;
        transform: translate(0, 0);
    }

    .link-item:hover .text {
        color: #0099ff;
    }

.article .link-items-wrap,
.title + .link-items-wrap,
.page-content-nav + .link-items-wrap {
    margin: 30px 0;
}

@media (min-width: 768px) {
    .article .link-items-wrap {
        margin: 40px 0;
    }

    .link-items-wrap .row > div {
        display: flex;
        padding-top: 40px;
    }

        .link-items-wrap .row > div:nth-child(1),
        .link-items-wrap .row > div:nth-child(2) {
            padding-top: 0;
        }

        .link-items-wrap .row > div:nth-child(odd) {
            border-right: 1px solid #ccc;
            padding-right: 60px;
        }

        .link-items-wrap .row > div:nth-child(even) {
            padding-left: 60px;
            margin-left: -1px;
        }

        .link-items-wrap .row > div:nth-child(1) {
            border-right: none;
        }

        .link-items-wrap .row > div:nth-child(2) {
            border-left: 1px solid #ccc;
        }
}

@media (min-width: 992px) {
    .article .link-items-wrap {
        margin: 60px 0;
    }

    .title + .link-items-wrap,
    .page-content-nav + .link-items-wrap {
        margin: 50px 0;
    }
}

@media (min-width: 768px) and (max-width: 1499px) {
    .link-item .icon-wrap {
        width: 60px;
        height: 60px;
    }

        .link-item .icon-wrap .icon::before {
            width: 28px;
            height: 28px;
        }

    .link-item .text {
        margin-left: 20px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .link-items-wrap .row > div:nth-child(odd) {
        padding-right: 30px;
    }

    .link-items-wrap .row > div:nth-child(even) {
        padding-left: 30px;
    }

    .link-item .text {
        margin-left: 18px;
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    .link-items-wrap .row > div + div {
        padding-top: 25px;
    }

    .link-item .icon-wrap {
        width: 42px;
        height: 42px;
    }

        .link-item .icon-wrap .icon::before {
            width: 20px;
            height: 20px;
        }

    .link-item .text {
        margin-left: 14px;
        font-size: 14px;
    }
}
/* ---------- /links wrap ---------- */


/* ---------- article ---------- */
.article > * {
    margin-bottom: 20px;
}

.article .title {
    margin-bottom: 33px;
}

.article > hr {
    margin: 50px 0;
}

.article > *:last-child {
    margin-bottom: 0;
}

.article > .title {
    max-width: 780px;
}

.article > .date {
    display: block;
    margin-bottom: 20px;
    color: rgba(0,0,0,0.5);
    font-size: 18px;
    font-weight: 300;
    line-height: 30px;
}

    .article > .date:first-child {
        border-left: 2px solid #bebebe;
        padding: 1px 0 0 18px;
    }

.article-social-media-wrap {
    display: flex;
    margin-top: 55px;
}

    .article-social-media-wrap a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        border: 1px solid #d9d8d8;
        margin-right: 20px;
        transition: all 0.3s ease;
    }

        .article-social-media-wrap a:hover {
            border-color: #0099ff;
        }

        .article-social-media-wrap a img {
            display: block;
            height: 18px;
        }


@media (min-width: 992px) {
    .article > .date:first-child {
        margin-top: -21px;
    }

    .page-head + .page-content .article > .title:first-child {
        padding: 0 0 0 20px;
        position: relative;
        margin: -24px 0 33px;
    }

        .page-head + .page-content .article > .title:first-child::before {
            content: "";
            width: 0;
            height: 33px;
            border-left: 2px solid #bebebe;
            position: absolute;
            top: 3px;
            left: 0;
        }
}

@media (min-width: 1500px) {
    .article > .date {
        margin-bottom: 20px;
        color: rgba(0,0,0,0.5);
        font-size: 20px;
        font-weight: 300;
        line-height: 32px;
    }

        .article > .date:first-child {
            margin-top: -36px;
        }

    .page-head + .page-content .article > .title:first-child {
        margin-top: -39px;
    }
}

@media (max-width: 1499px) {
    .article > .date:first-child {
        padding-left: 13px;
    }
}

@media (min-width: 992px) and (max-width: 1499px) {
    .back-btn ~ .article > .date:first-child,
    .back-btn ~ .article > .title:first-child {
        margin-left: 13px !important;
    }

    .page-head + .page-content .article > .title:first-child {
        padding-left: 15px;
    }
}
/* ---------- /article ---------- */


/* ---------- page-content-nav ---------- */
hr + .page-content-nav {
    margin-top: -16px;
}

.page-content-nav {
    height: 48px;
    padding-right: 96px;
    overflow: hidden;
    position: relative;
}

    .page-content-nav::after {
        content: "";
        width: 30px;
        height: 100%;
        background: -webkit-linear-gradient(left, rgba(255,255,255,0.1) 0, rgba(255,255,255,1) 100%);
        background: -moz-linear-gradient(left, rgba(255,255,255,0.1) 0, rgba(255,255,255,1) 100%);
        background: linear-gradient(left, rgba(255,255,255,0.1) 0, rgba(255,255,255,1) 100%);
        position: absolute;
        top: 0;
        right: 96px;
        pointer-events: none;
    }

    .page-content-nav ul {
        list-style: none;
        display: flex;
        white-space: nowrap;
        overflow: auto;
        position: relative;
    }

    .page-content-nav li {
        padding: 9px 0 8px;
        margin-right: 10px;
    }

        .page-content-nav li:last-child {
            margin-right: 5px !important;
        }

        .page-content-nav li > * {
            display: block;
            border-bottom: 1px solid transparent;
            padding-right: 20px;
            color: rgba(0,0,0,0.3);
            font-size: 16px;
            font-weight: bold;
            line-height: 30px;
        }

            .page-content-nav li > *::after {
                content: "";
                display: block;
                height: 1px;
            }

            .page-content-nav li > *:hover::after {
                border-color: rgba(0,0,0,0.3);
            }

            .page-content-nav li > *.active {
                color: #000;
            }

                .page-content-nav li > *.active::after {
                    border-color: rgba(0,0,0,0.3);
                    background-color: #000;
                }

    /* controls */
    .page-content-nav .scroll-btn {
        display: block;
        width: 48px;
        height: 48px;
        border: 0;
        position: absolute;
        top: 0;
    }

        .page-content-nav .scroll-btn.prev-btn {
            right: 48px;
            background-color: rgba(171,171,171,0.1);
        }

        .page-content-nav .scroll-btn.next-btn {
            right: 0;
            background-color: rgba(0,0,0,0.7);
        }

        .page-content-nav .scroll-btn .icon {
            display: block;
        }

            .page-content-nav .scroll-btn .icon::before {
                width: 12px;
                height: 12px;
                margin: 0 auto;
            }

        .page-content-nav .scroll-btn.prev-btn .icon {
            opacity: 0.6;
            transform-origin: center right;
        }

        .page-content-nav .scroll-btn.next-btn .icon {
            transform-origin: center left;
        }

            .page-content-nav .scroll-btn.next-btn .icon::before {
                background-image: url(../images/icons/arrow_right_white.svg);
            }

        .page-content-nav .scroll-btn,
        .page-content-nav .scroll-btn .icon {
            transition: all 0.3s ease;
        }

            .page-content-nav .scroll-btn.prev-btn:hover {
                background-color: rgba(171,171,171,0.4);
            }

.desktop .page-content-nav .scroll-btn.next-btn:hover {
    background-color: #000;
}

.desktop .page-content-nav .scroll-btn.prev-btn:hover .icon {
    opacity: 1;
    transform: translateX(-5px);
}

.desktop .page-content-nav .scroll-btn.next-btn:hover .icon {
    transform: translateX(5px);
}

.page-content-nav .scroll-btn.disabled {
    opacity: 0.4;
}
/* ---------- /page-content-nav ---------- */


/* ---------- date-list-slider ---------- */
.date-list-slider li > * {
    font-size: 20px;
    line-height: 30px;
}
/*.date-list-slider{
    height: 48px;
    padding-right: 96px;
    overflow: hidden;
    position: relative;
}*/
/*.date-list-slider::after{
    content: "";
    width: 100px;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0.1) 0, rgba(255,255,255,1) 100%);
    background: -moz-linear-gradient(left, rgba(255,255,255,0.1) 0, rgba(255,255,255,1) 100%);
    background: linear-gradient(left, rgba(255,255,255,0.1) 0, rgba(255,255,255,1) 100%);
    position: absolute;
    top: 0;
    right: 96px;
}*/
/*.date-list-slider ul{
    list-style: none;
    display: flex;
    white-space: nowrap;
    overflow: auto;
    position: relative;
}
.date-list-slider li{
    padding: 9px 10px 8px 0;
    margin-right: 24px;
}
.date-list-slider li:last-child{
    margin-right: 5px !important;
}
.date-list-slider .date{
    display: block;
    border-bottom: 1px solid transparent;
    color: rgba(0,0,0,0.3);
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
}
.date-list-slider .date:hover{
    border-color: rgba(0,0,0,0.3);
}
.date-list-slider .date.active{
    color: #000;
    border-color: #000;
}
*/
/* ---------- /date-list-slider ---------- */


/* ---------- text items list ---------- */
.text-items-list {
    width: 100%;
    overflow: hidden;
    margin: 40px 0;
}

    .text-items-list li {
        display: flex;
        flex-direction: column;
        margin-bottom: 38px;
    }

        .text-items-list li::before {
            display: none;
        }

        .text-items-list li img {
            width: 70px;
            height: 70px;
            margin-bottom: 20px;
        }

        .text-items-list li p {
            border-left: 2px solid #0099FF;
            padding-left: 14px;
            font-size: 16px;
            font-weight: normal;
        }

@media (min-width: 1500px) {
    .text-items-list .row {
        margin-left: -40px;
        margin-right: -40px;
    }

        .text-items-list .row > * {
            padding-left: 40px;
            padding-right: 40px;
        }
}

@media (max-width: 1499px) {
    .text-items-list li img {
        width: 60px;
        height: 60px;
        margin-bottom: 20px;
    }

    .text-items-list li p {
        font-size: 14px;
    }
}

@media (min-width: 992px) {
    .text-items-list .row {
        margin-left: -25px;
        margin-right: -25px;
    }

        .text-items-list .row > * {
            padding-left: 25px;
            padding-right: 25px;
        }
}

@media (max-width: 991px) {
    .text-items-list {
        margin: 25px 0;
    }
}

@media (max-width: 575px) {
    .text-items-list {
        margin: 20px 0;
    }

        .text-items-list li {
            margin-bottom: 15px;
        }

            .text-items-list li img {
                width: 50px;
                height: 50px;
                margin-bottom: 15px;
            }
}
/* ---------- /text items list ---------- */


/* ---------- coming-soont ---------- */
.coming-soon-wrap {
    padding: 30px 0 10px;
    text-align: center;
}

    .coming-soon-wrap img {
        display: block;
        width: 198px;
        margin: 0 auto 30px;
    }

    .coming-soon-wrap .title {
        font-size: 30px;
        line-height: 1.3;
        margin-bottom: 13px;
    }

    .coming-soon-wrap .text {
        font-size: 18px;
        line-height: 1.2;
        margin-bottom: 60px;
    }
/* ---------- /coming-soont ---------- */


/* ---------- message popup ---------- */
.message-popup .fancybox-content > .close-popup-btn {
    padding: 16px;
    top: 10px;
    right: 10px;
}

    .message-popup .fancybox-content > .close-popup-btn:before {
        border-radius: 0;
    }

    .message-popup .fancybox-content > .close-popup-btn:hover:before {
        background: #e6e6e6;
    }

.fancybox-content.message-popup-content {
    width: 100%;
    max-width: 640px;
    padding: 60px;
    text-align: center;
}

.message-popup .fancybox-content .popup-body + .popup-foo {
    padding: 40px 0 0;
    margin-bottom: -20px;
}

.fancybox-content.message-popup-content .icon {
    display: block;
    width: 82px;
    margin: 0 auto 18px;
}

.fancybox-content.message-popup-content .title {
    color: #000;
    font-size: 32px;
    margin-bottom: 35px;
}

.fancybox-content.success-message-content .title {
    color: #0099FF;
}

.fancybox-content.error-message-content .title {
    color: #ED3D24;
}

.fancybox-content.message-popup-content .text {
    color: #000;
    font-size: 14px;
}

    .fancybox-content.message-popup-content .text h6 {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
    }

.fancybox-content.message-popup-content .popup-foo .btn {
    display: block;
    width: 100%;
}

@media (max-width: 575px) {
    .message-popup .fancybox-content > .close-popup-btn {
        padding: 12px;
        top: 6px;
        right: 6px;
    }

    .fancybox-content.message-popup-content {
        padding: 30px 15px;
    }

    .message-popup .fancybox-content .popup-body + .popup-foo {
        padding: 20px 0 0;
        margin-bottom: -15px;
    }

    .fancybox-content.message-popup-content .icon {
        width: 65px;
        margin-bottom: 12px;
    }

    .fancybox-content.message-popup-content .title {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .fancybox-content.message-popup-content .text {
        font-size: 12px;
    }

        .fancybox-content.message-popup-content .text h6 {
            font-size: 14px;
            margin-bottom: 10px;
        }
}
/* ---------- /message popup ---------- */


/* ---------- forum members ---------- */
.forum-members-container ul {
    padding: 10px 0;
}

.forum-members-container li,
.forum-members-container li + li {
    margin: 0;
}

    .forum-members-container li::before {
        display: none;
    }

.forum-members-container li {
    display: block;
}

    .forum-members-container li > a,
    .forum-members-container li > span {
        display: flex;
        padding: 8px 16px;
        color: #000;
        font-size: 16px;
        font-weight: bold;
    }

    .forum-members-container li ul {
        padding: 0;
        margin: -3px 0 20px 10px;
    }

    .forum-members-container li li > a,
    .forum-members-container li li > span {
        font-size: 14px;
        font-weight: normal;
        padding: 5px 16px 5px 20px;
    }
/* ---------- /forum members ---------- */


/* ---------- banner ---------- */
.banner-link {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 120px;
    background: #fff url("../images/pattern4.png") right bottom no-repeat;
    padding: 30px 30px 17px 30px;
}

    .banner-link > div {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .banner-link .title {
        font-size: 18px;
        line-height: 1.2;
        margin: auto 5px auto 0;
    }

    .banner-link > div .icon {
        flex-shrink: 0;
        margin: auto 0 auto auto;
    }

    .banner-link .icons-wrap {
        display: block;
        margin-top: auto;
    }

        .banner-link .icons-wrap img {
            display: block;
            height: 28px;
        }

@media (max-width: 1499px) {
    .banner-link {
        padding: 25px 18px 17px;
    }
}
/* ---------- /banner ---------- */


/* ---------- accordion ---------- */
.accordion-item-head {
    display: flex;
    cursor: pointer;
}

.accordion-item-body {
    display: none;
}
/* ---------- /accordion ---------- */


/* ---------- tag ---------- */
.tags-container {
    max-width: 100%;
    overflow: hidden;
    margin-bottom: 15px;
}

    .tags-container .row > div {
        max-width: 50%;
        margin-bottom: 10px;
    }

.tag-item {
    display: flex;
    align-items: flex-start;
    max-width: 100%;
    background-color: #F6F6F6;
    border: 1px solid #EBEBEB;
    border-radius: 8px;
    overflow: hidden;
    white-space: nowrap;
}

    .tag-item .name {
        flex-grow: 1;
        max-width: 100%;
        padding: 4px 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #7F7F7F;
        font-size: 13px;
        line-height: 1.55;
    }

    .tag-item .remove-btn {
        flex-shrink: 0;
        height: 28px;
        background: #EBEBEB;
        border: 0;
    }
/* ---------- /tag ---------- */



/* ==================== 5. content by pages ==================== */


/* ---------- home ---------- */
@media (min-width: 1200px) {
    .page-home .page-content-wrap .container {
        padding-left: 140px;
        padding-right: 140px;
    }
}

@media (min-width: 1500px) {
    .page-home .page-content-wrap .container {
        padding-left: 180px;
        padding-right: 180px;
    }
}

/* --- intro --- */
.intro-section {
    position: relative;
}

/* slider */
.intro-slider .slide-content {
    width: 100%;
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 60px;
}

@media (min-width: 768px) {
    .intro-slider .slide-content {
        padding-top: 143px;
    }
}

@media (min-width: 1199px) {
    .intro-slider .slide-content {
        padding-top: 155px;
    }
}

@media (min-width: 1500px) and (min-height: 810px) {
    .intro-slider .slide-content {
        padding-top: 220px;
    }
}

.intro-slider .slide-content::before {
    content: "";
    width: 100%;
    height: 80%;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000);
    opacity: 0.8;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.intro-slider .slide-content section {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 480px;
    position: relative;
    z-index: 2;
}

.intro-slider .slide-content .title,
.intro-slider .slide-content .text {
    color: #fff;
    text-align: center;
}

    .intro-slider .slide-content .title + .text {
        margin-top: 18px;
    }

.intro-slider .slide-content .btn-row {
    display: flex;
    justify-content: center;
    margin-top: 60px;
}

    .intro-slider .slide-content .btn-row > * {
        margin: 0 10px;
    }

.intro-slider .slide-content .btn {
    padding: 21px 24px;
}

.intro-slider .slide-content .btn-secondary:not(:hover) {
    background-color: rgba(0,0,0,0.8);
}

.intro-slider .slide-content .btn:hover {
    padding-left: 30px;
    padding-right: 30px;
}

.intro-slider .slide-content .play-btn-wrap {
    width: 65px;
}

.intro-slider .slide-content .play-btn .wrap {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.intro-slider .slide-content .play-btn span,
.intro-slider .slide-content .play-btn .icon {
    transform: translateX(0) !important;
}

.intro-slider .slide-content .play-btn .wrap > span {
    width: 0;
    overflow: hidden;
}

    .intro-slider .slide-content .play-btn .wrap > span span {
        padding-right: 16px;
        opacity: 0;
        transition: all 0.3s ease;
    }

.intro-slider .slide-content .play-btn .icon {
    margin-top: 0;
    opacity: 1;
    position: relative;
    top: 1px;
}

.intro-slider .slide-content .play-btn:hover .wrap > span span {
    opacity: 1;
}

/* slider nav */
.intro-slider-nav {
    width: 100%;
    position: absolute;
    bottom: 60px;
    left: 0;
}

.intro-slider-nav-item {
    display: flex;
    min-height: 100%;
    padding-bottom: 21px;
    position: relative;
    cursor: pointer;
}

    .intro-slider-nav-item figure {
        flex-shrink: 0;
        width: 140px;
        min-height: 94px;
    }

        .intro-slider-nav-item figure img {
            transition: all 0.3s ease;
        }

    .intro-slider-nav-item .info-wrap {
        display: flex;
        flex-direction: column;
        padding-left: 18px;
    }

    .intro-slider-nav-item .title,
    .intro-slider-nav-item .text,
    .intro-slider-nav-item .link {
        color: #fff;
        font-size: 14px;
        line-height: 1.4;
    }

    .intro-slider-nav-item .title {
        font-size: 18px;
        margin-bottom: 4px;
    }

    .intro-slider-nav-item .text {
        opacity: 0.5;
        margin-bottom: 4px;
    }

    .intro-slider-nav-item .link-wrap {
        margin-top: auto;
    }

    .intro-slider-nav-item .link {
        line-height: 1;
    }

    .intro-slider-nav-item:hover .link .icon {
        opacity: 1;
        transform: translateX(100%);
    }

        .intro-slider-nav-item:hover .link .icon + span {
            margin-left: 22px;
        }

    .intro-slider-nav-item:hover figure img {
        transform: scale(1.1);
    }

    .intro-slider-nav-item .slide-progress-bar {
        width: 100%;
        max-width: 460px;
    }

        .intro-slider-nav-item .slide-progress-bar,
        .intro-slider-nav-item .slide-progress-bar > span {
            height: 2px;
            border-radius: 4px;
            position: absolute;
            bottom: 0;
            left: 0;
        }

    .intro-slider-nav-item .slide-progress-bar {
        width: 100%;
        background-color: rgba(255,255,255,0.2);
    }

        .intro-slider-nav-item .slide-progress-bar > span {
            background-color: #fff;
        }

@media (min-width: 992px) {
    .intro-slider-nav .row {
        flex-wrap: nowrap;
        justify-content: space-between;
    }
}

@media (min-width: 1650px) {
    .intro-slider-nav .row > div {
        flex: 0 0 auto !important;
        width: auto;
        max-width: 536px !important;
    }

    .intro-slider-nav-item .text {
        max-height: 57px;
        overflow: hidden;
    }
}

@media (min-width: 1500px) and (max-width: 1649px) {
    .intro-slider .slide-content .title {
        font-size: 48px;
    }
}

@media (min-width: 1500px) and (max-width: 1649px), (min-width: 1650px) and (max-height: 860px) {
    .intro-slider-nav-item .title {
        max-height: 50px;
        overflow: hidden;
    }

    .intro-slider-nav-item .text {
        max-height: 38px;
        overflow: hidden;
    }
}

@media (max-width: 1649px), (max-height: 930px) {
    .intro-slider .slide-content section {
        height: 440px;
    }

    .intro-slider-nav {
        bottom: 40px;
    }
}

@media (min-width: 1500px) and (max-height: 860px) {
    .intro-slider .slide-content section {
        height: 380px;
    }

    .intro-slider .slide-content .title {
        font-size: 48px;
    }

    .intro-slider .slide-content .btn-row {
        margin-top: 35px;
    }
}

@media (min-width: 1500px) and (max-height: 809px) {
    .intro-slider .slide-content {
        min-height: 650px;
    }

        .intro-slider .slide-content section {
            height: 360px;
        }

        .intro-slider .slide-content .title {
            font-size: 40px;
        }
}

@media (min-width: 1500px) and (max-height: 730px) {
    .intro-slider .slide-content section {
        height: 340px;
    }

    .intro-slider .slide-content .title {
        font-size: 36px;
    }

    .intro-slider-nav {
        bottom: 20px;
    }
}

@media (min-width: 1500px) and (max-height: 680px) {
    .intro-slider .slide-content section {
        height: 310px;
    }
}

@media (min-width: 1500px) and (max-width: 1649px) and (max-height: 730px) {
    .intro-slider-nav-item .text {
        display: none;
    }
}


@media (max-width: 1499px) {
    .intro-slider-nav-item .title {
        max-height: 88px;
        overflow: hidden;
        font-size: 16px;
    }

    .intro-slider-nav-item .text {
        display: none;
    }
}

@media (max-width: 1499px) and (max-height: 809px) {
    .intro-slider .slide-content section {
        height: 100%;
        padding-bottom: 220px;
    }
}

@media (max-width: 1499px) and (max-height: 700px) {
    .intro-slider .slide-content section {
        padding-bottom: 190px;
    }

    .intro-slider .slide-content .text {
        font-size: 16px;
    }

    .intro-slider-nav {
        bottom: 20px;
    }
}

@media (max-width: 1499px) and (max-height: 620px) {
    .intro-slider .slide-content section {
        padding-bottom: 200px;
    }

    .intro-slider .slide-content .title + .text {
        display: none;
    }
}

@media (max-width: 1499px) and (max-height: 580px) {
    .intro-slider .slide-content {
        min-height: 550px;
    }

        .intro-slider .slide-content section {
            padding-bottom: 180px;
        }
}

@media (max-width: 1299px), (max-height: 809px) {
    .intro-slider .slide-content .btn-row {
        margin-top: 30px;
    }

    .intro-slider .slide-content .btn {
        padding: 15px 16px;
    }

    .intro-slider .slide-content .play-btn .wrap > span span {
        padding-right: 10px;
    }

    .intro-slider .slide-content .play-btn .icon {
        margin-left: 2px;
    }

    .intro-slider-nav-item .info-wrap {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 991px), (max-width: 1299px) and (max-height: 770px) {
    .intro-slider .slide-content .title {
        font-size: 32px;
    }

    .intro-slider .slide-content .text {
        display: none;
    }

    .intro-slider .slide-content .btn-row {
        margin-top: 30px;
    }

    .intro-slider-nav-item .title {
        font-size: 13px;
        font-weight: normal;
    }
}

@media (min-width: 992px) and (max-width: 1024px) and (min-height: 1100px) {
    .intro-slider .slide-content section {
        height: 540px;
    }
}

@media (max-width: 991px) {
    .intro-slider .slide-content {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        padding-bottom: 440px;
    }

        .intro-slider .slide-content section {
            flex-grow: 1;
            height: auto;
            max-height: 380px;
            padding-top: 40px;
            padding-bottom: 60px;
        }

        .intro-slider .slide-content .title br {
            display: none;
        }

        .intro-slider .slide-content .btn-row {
            margin-top: 40px;
        }

    .intro-slider-nav {
        bottom: 0;
        padding-bottom: 5px;
    }

        .intro-slider-nav .row > div {
            margin-bottom: 30px;
        }

    .intro-slider-nav-item .slide-progress-bar {
        max-width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .intro-slider-nav-item .text {
        display: block;
    }
}

@media (max-width: 575px) {
    .intro-slider .slide-content {
        padding-bottom: 335px;
    }

        .intro-slider .slide-content section {
            max-height: 320px;
        }

        .intro-slider .slide-content .title {
            font-size: 22px;
        }

        .intro-slider .slide-content .btn-row {
            margin-top: 20px;
        }

            .intro-slider .slide-content .btn-row > * {
                margin: 0 5px;
            }

        .intro-slider .slide-content .show-more-items-btn {
            max-width: 160px;
        }

    .intro-slider-nav .row > div {
        margin-bottom: 15px;
    }

    .intro-slider-nav-item {
        padding-bottom: 15px;
    }

        .intro-slider-nav-item figure {
            width: 120px;
            min-height: 80px;
        }
}

@media (max-width: 374px) {
    .intro-slider .slide-content {
        padding-bottom: 275px;
    }

        .intro-slider .slide-content section {
            padding-top: 20px;
            padding-bottom: 40px;
        }

    .intro-slider-nav-item figure {
        width: 100px;
        min-height: 60px;
    }

    .intro-slider-nav-item .title {
        font-size: 12px;
    }
}


/* slider video */
.intro-video-popup .fancybox-bg {
    background-color: #000;
}

.intro-video-popup.fancybox-is-open .fancybox-bg {
    opacity: 0.8;
}

.intro-video-popup .fancybox-slide--video .fancybox-content {
    width: 100% !important;
    height: auto !important;
    max-width: 1000px;
}

    .intro-video-popup .fancybox-slide--video .fancybox-content::before {
        content: "";
        display: block;
        padding-top: 56.25%;
    }

.intro-video-popup .fancybox-close-small {
    width: auto;
    height: auto;
    background-color: rgba(0,0,0,0.8);
    padding: 20px;
    margin-left: 10px;
    opacity: 1;
    top: 0;
    left: 100%;
    right: auto;
}

    .intro-video-popup .fancybox-close-small::before {
        content: "";
        display: block;
        width: 24px;
        height: 24px;
        background: url("../images/icons/close2_white.svg") center no-repeat;
        background-size: contain;
        position: relative;
    }

    .intro-video-popup .fancybox-close-small svg {
        display: none;
    }

.intro-video-popup-is-open header.app-header .container::before,
.intro-video-popup-is-open .intro-slider .slide-content section,
.intro-video-popup-is-open .intro-slider-nav {
    opacity: 0;
}

@media (max-width: 1499px), (max-height: 830px) {
    .intro-video-popup .fancybox-slide--video .fancybox-content {
        max-width: 800px;
    }

    .intro-video-popup .fancybox-close-small {
        padding: 14px;
    }

        .intro-video-popup .fancybox-close-small::before {
            width: 20px;
            height: 20px;
        }
}

@media (max-width: 991px), (max-height: 640px) {
    .intro-video-popup .fancybox-slide--video .fancybox-content {
        max-width: 640px;
    }
}

@media (max-width: 991px) {
    .intro-video-popup .fancybox-slide--video .fancybox-content {
        max-width: 600px;
    }
}

@media (max-width: 767px) {
    .intro-video-popup .fancybox-close-small {
        padding: 10px;
        margin: 0 0 10px;
        top: auto;
        bottom: 100%;
        left: auto;
        right: 0;
    }

        .intro-video-popup .fancybox-close-small::before {
            width: 16px;
            height: 16px;
        }
}


/* --- about --- */
.page-home .about-section {
    background-color: #fff;
    padding-top: 40px;
    padding-bottom: 40px;
}

@media (min-width: 1500px) {
    .page-home .about-section {
        padding-top: 120px;
        padding-bottom: 80px;
    }

        .page-home .about-section .article {
            padding-left: 40px;
            padding-right: 40px;
        }
}

@media (min-width: 992px) {
    .page-home .about-section {
        padding-top: 80px;
        padding-bottom: 60px;
    }
}

/* --- forum --- */
.page-home .forum-section {
    display: flex;
    flex-direction: column;
    background: url("../images/home/forum.jpg") center no-repeat;
    background-size: cover;
    padding-top: 60px;
    padding-bottom: 60px;
}

    .page-home .forum-section .container {
        margin: auto;
    }

    .page-home .forum-section .title {
        max-width: 880px;
        color: #fff;
    }

    .page-home .forum-section .title-xxl {
        margin: 16px 0 80px;
    }

@media (min-width: 992px) {
    .page-home .forum-section {
        min-height: 620px;
    }
}

@media (max-width: 1199px) {
    .page-home .forum-section .title-xxl {
        margin-bottom: 60px;
    }
}

@media (max-width: 991px) {
    .page-home .forum-section .title-xxl {
        margin-bottom: 30px;
    }
}

/* --- news --- */
.page-home .news-section {
    padding-top: 60px;
    padding-bottom: 60px;
    margin: 0;
}

    .page-home .news-section .head {
        margin-bottom: 60px;
    }

        .page-home .news-section .head .container {
            display: flex;
            justify-content: space-between;
        }

        .page-home .news-section .head .title {
            font-size: 22px;
            line-height: 1.1;
            position: relative;
        }

            .page-home .news-section .head .title::before,
            .page-home .news-section .head .title::after {
                content: "";
                display: block;
                width: 100%;
                background-color: #0099ff;
            }

            .page-home .news-section .head .title::after {
                max-width: 316px;
                height: 1px;
                margin-top: 30px;
            }

            .page-home .news-section .head .title::before {
                max-width: 168px;
                height: 3px;
                position: absolute;
                bottom: -1px;
                left: 0;
            }

    .page-home .news-section .slider-controls {
        display: flex;
    }

        .page-home .news-section .slider-controls .arrow-btn {
            margin-left: 13px;
        }

            .page-home .news-section .slider-controls .arrow-btn.prev-btn {
                webkit-backdrop-filter: blur(0);
                backdrop-filter: blur(0);
                background-color: rgba(171,171,171,0.1);
            }

                .page-home .news-section .slider-controls .arrow-btn.prev-btn:hover {
                    background-color: rgba(171,171,171,0.4);
                }

        .page-home .news-section .slider-controls .slick-disabled {
            opacity: 0.6;
            pointer-events: none;
        }

    .page-home .news-section .info-wrap {
        max-width: 576px;
        padding-right: 20px;
    }

        .page-home .news-section .info-wrap .date {
            display: block;
            margin-bottom: 15px;
            color: rgba(0,0,0,0.5);
            font-size: 20px;
            font-weight: 300;
        }

        .page-home .news-section .info-wrap .title {
            margin-bottom: 11px;
        }

        .page-home .news-section .info-wrap .btn {
            margin-top: 30px;
        }

    .page-home .news-section .embed-responsive::before {
        padding-top: 77.5%;
    }

@media (min-width: 768px) {
    .page-home .news-section .slide-content .row {
        flex-direction: row-reverse;
    }
}

@media (min-width: 992px) {
    .page-home .news-section .head .title {
        font-size: 32px;
    }
}

@media (min-width: 1200px) {
    .page-home .news-section {
        padding-top: 95px;
        padding-bottom: 120px;
    }

        .page-home .news-section .head {
            margin-bottom: 100px;
        }

            .page-home .news-section .head .title {
                font-size: 50px;
            }
}

@media (max-width: 1199px) {
    .page-home .news-section .slick-slide .row > div:first-child {
        padding-right: 60px;
    }
}

@media (max-width: 767px) {
    .page-home .news-section .embed-responsive {
        margin-bottom: 20px;
    }

    .page-home .news-section .info-wrap .title {
        margin-bottom: 15px;
    }

    .page-home .news-section .info-wrap .btn {
        margin-top: 20px;
    }
}

/* --- animation --- */
.page-home .news-section .slick-slide {
    z-index: 900 !important;
    opacity: 1 !important;
}

.page-home .news-section .slick-active {
    z-index: 1050 !important;
}

    .page-home .news-section .slick-active + .slick-slide {
        z-index: 1020 !important;
    }

.page-home .news-section .info-wrap > *,
.page-home .news-section figure {
    opacity: 0;
}

.page-home .news-section .active-slide .info-wrap > *,
.page-home .news-section .active-slide figure,
.page-home .news-section .next-slide figure,
.page-home .news-section .next-slide-after figure {
    opacity: 1;
}

/* -- next-slide -- */

/* hide active slide */
.page-home .news-section .show-next-slide .active-slide .info-wrap > *,
.page-home .news-section .show-next-slide .active-slide figure {
    animation-fill-mode: both;
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.34, 1.3, 0.64, 1);
}

.page-home .news-section .show-next-slide .active-slide .info-wrap .info-item-1,
.page-home .news-section .show-next-slide .active-slide .info-wrap .info-item-2,
.page-home .news-section .show-next-slide .active-slide figure {
    animation-name: hideActiveSlideLeftLg;
}

.page-home .news-section .show-next-slide .active-slide .info-wrap .info-item-3,
.page-home .news-section .show-next-slide .active-slide .info-wrap .info-item-4 {
    animation-name: hideActiveSlideLeft;
}

/* show next slide */
.page-home .news-section .show-next-slide .next-slide .info-item-1 {
    animation-name: fadeIn;
    animation-fill-mode: both;
    animation-duration: 0.2s;
    animation-timing-function: ease-in;
}

.edge .page-home .news-section .show-next-slide .next-slide .info-item-1,
.page-home .news-section .show-next-slide .next-slide .info-wrap .info-item-1 ~ * {
    animation-fill-mode: both;
    animation-name: showNextSlide;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.34, 1.3, 0.64, 1);
}

.page-home .news-section .show-next-slide .next-slide .info-item-1,
.page-home .news-section .show-next-slide .next-slide .info-item-2 {
    animation-delay: 0.25s;
}

.page-home .news-section .show-next-slide .next-slide .info-item-3 {
    animation-delay: 0.35s;
}

.page-home .news-section .show-next-slide .next-slide .info-item-4 {
    animation-delay: 0.40s;
}

.page-home .news-section .show-next-slide .next-slide figure,
.page-home .news-section .show-next-slide .next-slide-after figure {
    transition: all 1s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.page-home .news-section .show-next-slide .next-slide figure,
.page-home .news-section .show-next-slide .next-slide-after figure {
    transition-delay: 0.25s;
}


/* --- prev-slide --- */

/* hide active slide */
.page-home .news-section .show-prev-slide .active-slide .info-item-1 {
    animation-name: fadeOut;
    animation-fill-mode: both;
    animation-duration: 0.2s;
    animation-timing-function: ease-in;
}

.page-home .news-section .show-prev-slide .active-slide .info-wrap .info-item-1 ~ * {
    animation-fill-mode: both;
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.34, 1.3, 0.64, 1);
}

.page-home .news-section .show-prev-slide .active-slide .info-wrap .info-item-2 {
    animation-name: hideActiveSlideRight;
}

.page-home .news-section .show-prev-slide .active-slide .info-wrap .info-item-3,
.page-home .news-section .show-prev-slide .active-slide .info-wrap .info-item-4 {
    animation-name: hideActiveSlideRightLg;
}

/* show prev slide */
.page-home .news-section .show-prev-slide .prev-slide .info-wrap > *,
.page-home .news-section .show-prev-slide .prev-slide figure {
    animation-fill-mode: both;
    animation-name: showPrevSlide;
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.34, 1.3, 0.64, 1);
}

.page-home .news-section .show-prev-slide .prev-slide .info-item-1,
.page-home .news-section .show-prev-slide .prev-slide .info-item-2,
.page-home .news-section .show-prev-slide .prev-slide figure {
    animation-delay: 0.4s;
}

.page-home .news-section .show-prev-slide .prev-slide .info-item-3 {
    animation-delay: 0.35s;
}

.page-home .news-section .show-prev-slide .prev-slide .info-item-4 {
    animation-delay: 0.25s;
}

.page-home .news-section .show-prev-slide .active-slide figure,
.page-home .news-section .show-prev-slide .next-slide figure {
    transition: all 1s cubic-bezier(0.34, 1.3, 0.64, 1);
}


@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes hideActiveSlideLeft {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-80px);
    }
}

@keyframes hideActiveSlideLeftLg {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-130px);
    }
}

@keyframes hideActiveSlideRight {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(80px);
    }
}

@keyframes hideActiveSlideRightLg {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(130px);
    }
}

@keyframes showNextSlide {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes showPrevSlide {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}


/* --- idea --- */
.page-home .idea-section {
    display: flex;
    flex-direction: column;
    background: url("../images/home/idea.jpg") center no-repeat;
    background-size: cover;
    padding-top: 60px;
    padding-bottom: 60px;
}

    .page-home .idea-section .container {
        padding-right: 0;
    }

    .page-home .idea-section .title {
        max-width: 710px;
        color: #fff;
    }

    .page-home .idea-section .box {
        display: flex;
        flex-direction: column;
        width: 547px;
        height: 356px;
        -webkit-backdrop-filter: blur(11px);
        backdrop-filter: blur(11px);
        background-color: rgba(255,255,255,0.05);
        padding: 54px;
    }

        .page-home .idea-section .box p {
            max-width: 390px;
            color: #fff;
            font-size: 24px;
        }

        .page-home .idea-section .box .link-wrap {
            display: flex;
            justify-content: flex-end;
            margin-top: auto;
        }

        .page-home .idea-section .box a {
            color: #fff;
            font-size: 22px;
        }

            .page-home .idea-section .box a .icon {
                transition: all 0.3s ease;
            }

                .page-home .idea-section .box a .icon::before {
                    width: 16px;
                    height: 11px;
                }

            .page-home .idea-section .box a:hover .icon {
                transform: translateX(6px);
            }

@media (min-width: 992px) {
    .page-home .idea-section {
        min-height: 720px;
        padding-top: 136px;
        padding-bottom: 136px;
    }

        .page-home .idea-section .row {
            flex-wrap: nowrap;
            justify-content: space-between;
        }
}

@media (max-width: 991px) {
    .page-home .idea-section .row > div:first-child {
        margin-bottom: 30px;
    }

    .page-home .idea-section .box {
        width: auto;
        height: auto;
        max-width: 340px;
        padding: 20px 20px;
    }

        .page-home .idea-section .box p,
        .page-home .idea-section .box a {
            font-size: 16px;
            font-weight: normal;
        }

        .page-home .idea-section .box p {
            margin-bottom: 40px;
        }
}


/* --- statistic --- */
.page-home .statistic-section {
    padding-top: 60px;
    padding-bottom: 60px;
}

.page-home .statistic-item > * {
    display: block;
}

.page-home .statistic-item > b {
    color: #333;
    font-size: 40px;
    line-height: 0.75;
    margin-bottom: 15px;
}

.page-home .statistic-item .text {
    color: #808080;
    line-height: 1.4;
}

@media (min-width: 576px) {
    .page-home .statistic-section {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

@media (min-width: 992px) {
    .page-home .statistic-section {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .page-home .statistic-item > b {
        font-size: 52px;
        margin-bottom: 35px;
    }
}

@media (min-width: 1500px) {
    .page-home .statistic-item > b {
        font-size: 100px;
    }
}

@media (max-width: 1499px) {
    .page-home .statistic-item .text {
        max-width: 200px;
        font-size: 14px;
    }
}

@media (max-width: 991px) {
    .page-home .statistic-section .row {
        justify-content: space-between;
    }

    .page-home .statistic-item {
        margin-bottom: 40px;
    }
}
/* ---------- /home ---------- */


/* ---------- about ogp ---------- */
.ogp-map-container {
    width: 100%;
    max-width: 1302px;
    margin-bottom: 48px;
    position: relative;
    z-index: 10;
}

    .ogp-map-container > img {
        display: block;
        width: 100%;
        min-height: 230px;
        max-height: 570px;
        object-fit: cover;
    }
    /* map svg */
    .ogp-map-container .svg-map,
    .ogp-map-container .svg-map svg {
        height: 100%;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .ogp-map-container .svg-map {
        width: 100%;
        overflow: hidden;
    }

    .ogp-map-container svg .region {
        fill: transparent;
        stroke: #fff;
        stroke-miterlimit: 22.926;
    }

    .ogp-map-container svg .name {
        fill: #fff;
        font-size: 16px;
        text-shadow: 0 3px 5px rgba(0,0,0,0.9);
    }

    .ogp-map-container svg .dot {
        fill: #fff;
    }

    .ogp-map-container svg .circle,
    .ogp-map-container svg .circle-triangle {
        fill: #050505;
    }

    .ogp-map-container svg .circle {
        stroke-width: 2;
    }

    .ogp-map-container svg .samegrelo-svaneti .circle {
        stroke: #0099FF;
    }

    .ogp-map-container svg .guria .circle {
        stroke: #f7ed6e;
    }

    .ogp-map-container svg .adjara .circle {
        stroke: #f26638;
    }

    .ogp-map-container svg .imereti .circle {
        stroke: #ccc;
    }

    .ogp-map-container svg .mtskheta-mtianeti .circle {
        stroke: #0780d8;
    }

    .ogp-map-container svg .tbilisi .circle {
        stroke: #12a248;
    }

    .ogp-map-container svg .kvemo-kartli .circle {
        stroke: #c93826;
    }

    .ogp-map-container svg .kakheti .circle {
        stroke: #1c3663;
    }

    .ogp-map-container svg .samtskhe-javakheti .circle {
        stroke: #f7991c;
    }


    .ogp-map-container svg .region,
    .ogp-map-container svg .circle-wrap {
        transition: all 0.3s ease;
    }

    /* map svg hover */
    .ogp-map-container svg .abkhazeti:hover .region,
    .ogp-map-container svg .abkhazeti.is-active .region {
        fill: #006666;
    }

    .ogp-map-container svg .samegrelo-svaneti:hover .region,
    .ogp-map-container svg .samegrelo-svaneti.is-active .region {
        fill: #0099ff;
    }

    .ogp-map-container svg .racha:hover .region,
    .ogp-map-container svg .racha.is-active .region {
        fill: #154f8a;
    }

    .ogp-map-container svg .guria:hover .region,
    .ogp-map-container svg .guria.is-active .region {
        fill: #f7ed6e;
    }

    .ogp-map-container svg .adjara:hover .region,
    .ogp-map-container svg .adjara.is-active .region {
        fill: #f26638;
    }

    .ogp-map-container svg .imereti:hover .region,
    .ogp-map-container svg .imereti.is-active .region {
        fill: #ccc;
    }

    .ogp-map-container svg .samtskhe-javakheti:hover .region,
    .ogp-map-container svg .samtskhe-javakheti.is-active .region {
        fill: #f7991c;
    }

    .ogp-map-container svg .shida-kartli:hover .region,
    .ogp-map-container svg .shida-kartli.is-active .region {
        fill: #0e68b1;
    }

    .ogp-map-container svg .kvemo-kartli:hover .region,
    .ogp-map-container svg .kvemo-kartli.is-active .region {
        fill: #c93826;
    }

    .ogp-map-container svg .tbilisi:hover .region,
    .ogp-map-container svg .tbilisi.is-active .region {
        fill: #12a248;
    }

    .ogp-map-container svg .mtskheta-mtianeti:hover .region,
    .ogp-map-container svg .mtskheta-mtianeti.is-active .region {
        fill: #0780d8;
    }

    .ogp-map-container svg .kakheti:hover .region,
    .ogp-map-container svg .kakheti.is-active .region {
        fill: #1c3663;
    }

.desktop .ogp-map-container svg g[data-id]:hover .circle-wrap {
    transform: scale(1.2);
}

.ogp-map-container svg .zugdidi .circle-wrap {
    transform-origin: 31% 34%;
}

.ogp-map-container svg .ozurgeti .circle-wrap {
    transform-origin: 32.5% 57%;
}

.ogp-map-container svg .batumi .circle-wrap {
    transform-origin: 28.5% 68%;
}

.ogp-map-container svg .khoni .circle-wrap {
    transform-origin: 36% 45%;
}

.ogp-map-container svg .tskaltubo .circle-wrap {
    transform-origin: 39% 42%;
}

.ogp-map-container svg .kutaisi .circle-wrap {
    transform-origin: 40.5% 52%;
}

.ogp-map-container svg .akhaltsikhe .circle-wrap {
    transform-origin: 45.5% 63%;
}

.ogp-map-container svg .dusheti .circle-wrap {
    transform-origin: 59.3% 54%;
}

.ogp-map-container svg .tbilisi-city .circle-wrap {
    transform-origin: 61.3% 66.3%;
}

.ogp-map-container svg .rustavi .circle-wrap {
    transform-origin: 61% 74%;
}

.ogp-map-container svg .bolnisi .circle-wrap {
    transform-origin: 57.5% 81%;
}

.ogp-map-container svg .dedoplistskaro .circle-wrap {
    transform-origin: 75.2% 75%;
}

.ogp-map-container svg [data-id] {
    cursor: pointer;
}

/* map popup */
.ogp-map-popup {
    display: none;
    width: 100%;
    padding: 0 40px;
    position: absolute;
    top: 70%;
    left: 0;
    z-index: 10
}

    .ogp-map-popup > div {
        width: 100%;
        max-width: 920px;
        background: #fff url(../images/pattern_sm.svg) bottom right no-repeat;
        background-size: 178px 15px;
        box-shadow: 0 7px 10px 0 rgba(0, 0, 0, 0.16);
        padding: 44px 44px 60px;
        position: relative;
        margin: 0 auto;
    }

    .ogp-map-popup .close-btn {
        background-color: transparent;
        border: 0;
        padding: 10px;
        position: absolute;
        top: 20px;
        right: 20px;
    }

        .ogp-map-popup .close-btn .icon {
            display: block;
        }

            .ogp-map-popup .close-btn .icon::before {
                width: 22px;
                height: 22px;
            }

    .ogp-map-popup article {
        display: none;
    }

        .ogp-map-popup article > .title {
            display: flex;
            margin-bottom: 20px;
        }

            .ogp-map-popup article > .title::before {
                flex-shrink: 0;
                content: "";
                display: block;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                margin: 9px 14px 0 0;
            }

.ogp-map-container [data-content="zugdidi"] > .title::before,
.ogp-map-btn[data-id="zugdidi"] .wrap span::before {
    background-color: #0099ff;
}

.ogp-map-container [data-content="khoni"] > .title::before,
.ogp-map-btn[data-id="khoni"] .wrap span::before,
.ogp-map-container [data-content="tskaltubo"] > .title::before,
.ogp-map-btn[data-id="tskaltubo"] .wrap span::before,
.ogp-map-container [data-content="kutaisi"] > .title::before,
.ogp-map-btn[data-id="kutaisi"] .wrap span::before {
    background-color: #ccc;
}

.ogp-map-container [data-content="ozurgeti"] > .title::before,
.ogp-map-btn[data-id="ozurgeti"] .wrap span::before {
    background-color: #f7ed6e;
}

.ogp-map-container [data-content="batumi"] > .title::before,
.ogp-map-btn[data-id="batumi"] .wrap span::before {
    background-color: #f26638;
}

.ogp-map-container [data-content="akhaltsikhe"] > .title::before,
.ogp-map-btn[data-id="akhaltsikhe"] .wrap span::before {
    background-color: #f7991c;
}

.ogp-map-container [data-content="dusheti"] > .title::before,
.ogp-map-btn[data-id="dusheti"] .wrap span::before {
    background-color: #0780d8;
}

.ogp-map-container [data-content="tbilisi"] > .title::before,
.ogp-map-btn[data-id="tbilisi"] .wrap span::before {
    background-color: #12a248;
}

.ogp-map-container [data-content="rustavi"] > .title::before,
.ogp-map-btn[data-id="rustavi"] .wrap span::before,
.ogp-map-container [data-content="bolnisi"] > .title::before,
.ogp-map-btn[data-id="bolnisi"] .wrap span::before {
    background-color: #c93826;
}

.ogp-map-container [data-content="dedoplistskaro"] > .title::before,
.ogp-map-btn[data-id="dedoplistskaro"] .wrap span::before {
    background-color: #1c3663;
}

.ogp-map-btn-wrap {
    display: none;
    width: 100%;
    padding: 0 15px 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
}

.ogp-map-btn {
    display: block;
    width: 100%;
    background-color: rgba(255,255,255,0.44);
    border: 0;
    padding: 0;
    margin-bottom: 6px;
    color: #fff;
    font-size: 12px;
}

    .ogp-map-btn .wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 25px;
        padding: 0 5px 0 10px;
    }

        .ogp-map-btn .wrap span {
            display: flex;
            align-items: center;
        }

            .ogp-map-btn .wrap span::before {
                flex-shrink: 0;
                content: "";
                display: block;
                width: 5px;
                height: 5px;
                border-radius: 50%;
                margin: 0 5px 0 0;
            }

@media (max-width: 1499px) {
    .ogp-map-popup,
    .ogp-map-popup > div {
        padding-left: 30px;
        padding-right: 30px;
    }

        .ogp-map-popup > div {
            padding-top: 35px;
            padding-bottom: 50px;
        }

        .ogp-map-popup .close-btn {
            top: 10px;
            right: 10px;
        }
}

@media (max-width: 1199px) {
    .ogp-map-popup,
    .ogp-map-popup > div {
        padding-left: 20px;
        padding-right: 20px;
    }

    .ogp-map-container .svg-map svg {
        height: 108%;
    }

    .ogp-map-popup {
        top: 75%;
    }
}

@media (max-width: 991px) {
    .ogp-map-container {
        width: auto;
        margin-left: -25px;
        margin-right: -25px;
    }

        .ogp-map-container svg .name {
            font-size: 18px;
        }
}

@media (max-width: 767px) {
    .ogp-map-container {
        margin-left: -15px;
        margin-right: -15px;
    }

    .ogp-map-popup,
    .ogp-map-popup > div {
        padding-left: 15px;
        padding-right: 15px;
    }

        .ogp-map-popup .close-btn {
            top: 5px;
            right: 5px;
        }
}

@media (max-width: 575px) {
    .ogp-map-container img {
        height: 364px;
    }

    .ogp-map-container .svg-map svg {
        height: 180px;
    }

    .ogp-map-container svg .name {
        display: none;
    }

    .ogp-map-popup {
        top: 158px;
    }

    .ogp-map-btn-wrap {
        display: block;
    }
}
/* ---------- /about ogp ---------- */


/* ---------- news ---------- */

/* item */
.news-grid-item .img-count {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background-color: rgba(255,255,255,0.3);
    position: absolute;
    bottom: 4px;
    right: 4px;
    color: #000;
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
}

    .news-grid-item .img-count::before {
        content: "";
        width: 100%;
        height: 3px;
        background-color: transparent;
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .news-grid-item .img-count b {
        font-weight: bold;
    }

    .news-grid-item img,
    .news-grid-item .img-count,
    .news-grid-item .img-count::before {
        transition: all 0.3s ease;
    }

.news-grid-item figure a:hover img {
    transform: scale(1.1);
}

.news-grid-item figure a:hover .img-count {
    background-color: rgba(255,255,255,0.45);
}

    .news-grid-item figure a:hover .img-count::before {
        background-color: #0099ff;
    }

.news-grid-item .info-wrap {
    padding-top: 8px;
}

    .news-grid-item .info-wrap > * {
        color: #000;
        font-size: 16px;
        line-height: 1.5;
    }

    .news-grid-item .info-wrap a {
        color: inherit;
    }

    .news-grid-item .info-wrap .date {
        display: block;
        opacity: 0.5;
        font-weight: 300;
    }

    .news-grid-item .info-wrap .title {
        margin-top: 6px;
    }

    .news-grid-item .info-wrap .text {
        margin-top: 12px;
    }

/* grid */
.news-grid {
    margin-bottom: -40px;
}

    .news-grid .news-grid-item {
        margin-bottom: 40px;
    }

.page-news .news-grid {
    margin-bottom: 0;
}

.news-section {
    margin-top: 60px;
}

@media (min-width: 1650px) {
    .news-grid-item .info-wrap > * {
        font-size: 20px;
    }

    .news-grid-item .info-wrap .text {
        margin-top: 15px;
    }

    .page-news .news-grid > div:nth-child(1) .news-grid-item .title,
    .page-news .news-grid > div:nth-child(2) .news-grid-item .title {
        font-size: 24px;
    }
}

@media (min-width: 992px) {
    .page-news .news-grid > div:nth-child(1),
    .page-news .news-grid > div:nth-child(2) {
        flex: 0 0 50%;
        max-width: 50%;
    }

        .page-news .news-grid > div:nth-child(1) .news-grid-item,
        .page-news .news-grid > div:nth-child(2) .news-grid-item {
            margin-bottom: 60px;
        }

            .page-news .news-grid > div:nth-child(1) .news-grid-item .title,
            .page-news .news-grid > div:nth-child(2) .news-grid-item .title {
                font-size: 18px;
            }

            .page-news .news-grid > div:nth-child(1) .news-grid-item .img-count,
            .page-news .news-grid > div:nth-child(2) .news-grid-item .img-count {
                width: 60px;
                height: 60px;
                font-size: 24px;
            }
}

@media (max-width: 1499px) {
    .news-grid-item .info-wrap > * {
        font-size: 16px;
    }

    .news-grid-item .info-wrap .text {
        display: none;
    }
}

@media (max-width: 767px) {
    .news-grid-item .info-wrap > * {
        font-size: 14px;
    }
}


/* archive */
.news-archive-container {
    padding-top: 25px;
}

.news-archive-item {
    margin-bottom: 26px;
}

    .news-archive-item > * {
        color: #000;
        font-size: 14px;
        font-weight: normal;
        line-height: 1.3;
    }

    .news-archive-item .date {
        flex-shrink: 0;
        width: 100%;
        opacity: 0.5;
        font-weight: 300;
    }

    .news-archive-item .title {
        cursor: pointer;
    }

        .news-archive-item .title:hover,
        .news-archive-item .title.active {
            font-weight: bold;
        }

@media (min-width: 576px) {
    .news-archive-item {
        display: flex;
    }

        .news-archive-item > * {
            font-size: 16px;
        }

        .news-archive-item .date {
            width: 190px;
        }
}

@media (min-width: 768px) {
    .news-archive-container {
        padding-top: 35px;
    }

    .news-archive-item > * {
        font-size: 18px;
    }

    .news-archive-item .date {
        width: 228px;
    }
}

@media (min-width: 992px) {
    .news-archive-container {
        padding-top: 46px;
    }
}

/* popup */
.news-popup.fancybox-is-open .fancybox-bg {
    opacity: 0.19;
}

.news-popup .fancybox-slide {
    padding: 0;
    overflow: hidden;
}

.news-popup .close-popup-btn {
    width: 48px;
    height: 48px;
    background-color: rgba(255,255,255,0.45);
    border: 0;
    padding: 0;
    position: absolute;
    top: 0 !important;
    left: 0;
    right: auto !important;
    z-index: 5;
    transition: all 0.3s ease;
}

    .news-popup .close-popup-btn::before {
        background: url("../images/icons/close_solid.svg") center no-repeat !important;
        background-size: 16px 16px !important;
        border-radius: 0 !important;
    }

    .news-popup .close-popup-btn svg {
        display: none !important;
    }

.news-popup .close-btn .icon {
    display: flex;
    justify-content: center;
}

.news-popup .close-popup-btn:hover {
    background-color: rgba(255,255,255,0.7);
}

.news-popup .content-container,
.news-popup .scrollable-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
}

.news-popup .content-container {
    max-width: 100%;
    background-color: transparent !important;
    overflow: visible !important;
}

.news-popup .content-container-bg,
.news-popup .content-container-bg::before {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.news-popup .content-container-bg {
    overflow: hidden;
}

    .news-popup .content-container-bg::before {
        content: "";
        background-color: #fff;
    }

.news-popup .mCSB_inside > .mCSB_container {
    margin-right: 0 !important;
}

.news-popup .mCSB_scrollTools .mCSB_draggerContainer,
.news-popup .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 8px !important;
}

.news-popup .mCSB_scrollTools .mCSB_draggerContainer {
    background-color: rgba(200,200,200,0.3);
    top: 22px !important;
    bottom: 22px !important;
}

.news-popup .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: rgba(200,200,200) !important;
}

.news-popup .mCSB_scrollTools .mCSB_draggerRail {
    background-color: transparent !important;
}

.news-popup .content-container .article {
    padding: 50px 30px 105px 15px;
}

.news-popup .btn-wrap {
    display: flex;
    background-image: linear-gradient(to top, #fff 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.3));
    padding: 30px 34px 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 20px;
    z-index: 10;
}

.news-popup .fancybox-bg,
.news-popup .content-container .article,
.news-popup .content-container-bg::before {
    opacity: 0;
    transition: all 0.3s ease;
}

.news-popup .content-container-bg::before {
    transform: translateX(100%);
}

.news-popup .fancybox-slide--complete .content-container-bg::before {
    transform: translateX(0);
}

.news-popup .fancybox-slide--complete .fancybox-bg,
.news-popup .fancybox-slide--complete .content-container .article,
.news-popup .fancybox-slide--complete .content-container-bg::before {
    opacity: 1;
}

@media (min-width: 768px) {
    .news-popup .content-container {
        max-width: 50%;
        min-width: 650px;
    }

    .news-popup .close-popup-btn {
        box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.19);
        top: 50% !important;
        left: 0;
        transform: translate(-50%,-50%);
    }

    .news-popup .content-container .article {
        padding: 34px 34px 105px;
    }
}

@media (min-width: 1500px) {
    .news-popup .close-popup-btn {
        width: 64px;
        height: 64px;
    }

    .news-popup .content-container .article {
        padding: 50px 50px 145px;
    }

    .news-popup .btn-wrap {
        padding: 50px 50px 40px;
    }
}

@media (max-width: 1499px) {
    .news-popup .article > .title {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .news-popup .article > .date {
        margin: 0 0 15px;
    }
}
/* ---------- /news ---------- */


/* ---------- blog ---------- */
.blog-list-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 80px;
}

    .blog-list-item figure.embed-responsive {
        max-width: 372px;
        min-width: 200px;
    }

    .blog-list-item figure img {
        transition: all 0.3s ease;
    }

    .blog-list-item .info-wrap {
        padding-left: 36px;
    }

    .blog-list-item .title {
        font-size: 26px;
        line-height: 1.35;
        margin-bottom: 15px;
    }

    .blog-list-item figure a:hover img {
        transform: scale(1.1);
    }

@media (max-width: 1499px) {
    .blog-list-item {
        margin-bottom: 50px;
    }

        .blog-list-item .info-wrap {
            padding-left: 30px;
        }

    .blog-list .info-wrap .title {
        font-size: 20px;
    }

    .blog-list .info-wrap .text {
        font-size: 16px;
    }
}

@media (max-width: 991px) {
    .blog-list-item {
        margin-bottom: 30px;
    }
}

@media (max-width: 767px) {
    .blog-list-item .info-wrap {
        padding-left: 15px;
    }

    .blog-list .info-wrap .title {
        font-size: 18px;
    }

    .blog-list .info-wrap .text {
        font-size: 14px;
    }
}

@media (max-width: 575px) {
    .blog-list-item {
        display: block;
    }

        .blog-list-item .info-wrap {
            padding-left: 0;
        }

        .blog-list-item figure.embed-responsive {
            max-width: 100%;
            margin-bottom: 20px;
        }
}
/* ---------- /blog ---------- */


/* ---------- steering committee membership ---------- */
.steering-committee-container {
    margin-top: 40px;
}

    .steering-committee-container > .title {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 154px;
        background: #056699 url("../images/pattern.svg") right bottom no-repeat;
        background-size: 640px 20px;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        margin-bottom: 48px;
        color: #fff;
    }

    .steering-committee-container .row > div {
        display: flex;
        flex-direction: column;
    }

.steering-committee-item {
    flex-grow: 1;
    max-width: 400px;
    border: 1px solid rgba(127,127,127,0.3);
    border-radius: 6px;
    margin-bottom: 20px;
}

    .steering-committee-item .head {
        display: flex;
        align-items: center;
        width: 100%;
        height: 154px;
        background: rgba(209,209,212,0.68) url("../images/pattern_sm.svg") right bottom no-repeat;
        background-size: 178px 15px;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        padding: 0 26px;
    }

        .steering-committee-item .head .title {
            color: #333;
            margin-bottom: 0;
        }

            .steering-committee-item .head .title span {
                font-weight: normal;
            }

    .steering-committee-item .body {
        padding: 25px;
        color: #000;
        font-size: 18px;
        line-height: 1.6;
    }

.steering-committee-container .row + p {
    margin-top: 15px;
}

@media (min-width: 1650px) {
    .steering-committee-container .row {
        margin-left: -20px;
        margin-right: -20px;
    }

        .steering-committee-container .row > div {
            padding-left: 20px;
            padding-right: 20px;
        }
}

@media (max-width: 1549px) {
    .steering-committee-item .body {
        font-size: 16px;
    }
}

@media (max-width: 1499px) {
    .steering-committee-item .head {
        height: 118px;
        padding: 0 20px;
    }

        .steering-committee-item .head .title {
            font-size: 22px;
        }

    .steering-committee-item .body {
        padding: 20px;
    }
}
/*@media (max-width: 1400px){
    .steering-committee-container > .title{
        display: none;
    }
}*/
@media (max-width: 1300px) {
    .steering-committee-item .head .title {
        font-size: 20px;
    }

    .steering-committee-item .body {
        font-size: 14px;
    }
}

@media (max-width: 991px) {
    .steering-committee-container .row {
        margin-left: -5px;
        margin-right: -5px;
    }

        .steering-committee-container .row > div {
            padding-left: 5px;
            padding-right: 5px;
        }

    .steering-committee-item .head {
        padding-left: 15px;
        padding-right: 15px;
    }

    .steering-committee-item .body {
        padding: 15px;
        font-size: 12px;
    }

    .steering-committee-container .row + p {
        margin-top: 5px;
    }
}

@media (max-width: 767px) {
    .steering-committee-item {
        margin-left: auto;
        margin-right: auto;
    }

    .steering-committee-container > .title {
        height: 130px;
    }
}
/* ---------- /steering committee membership ---------- */


/* ---------- timeline ---------- */
.page-timeline article {
    display: flex;
    flex-direction: column;
}

    .page-timeline article > * {
        width: 100%;
        max-width: 1024px;
        margin-left: auto;
    }

    .page-timeline article > .title {
        margin-bottom: 60px;
    }

.timeline-container {
    position: relative;
}

    .timeline-container::before {
        content: "";
        width: 1px;
        background: url("../images/timeline_border.png") 0 0 repeat-y;
        position: absolute;
        top: 48px;
        bottom: 48px;
        left: 177px;
        z-index: 1;
    }

.timeline-item,
.timeline-item > div {
    display: flex;
    align-items: flex-start;
}

.timeline-item {
    justify-content: flex-end;
    position: relative;
    z-index: 2;
    touch-action: auto;
}

    .timeline-item:not(.is-open),
    .timeline-item > div > img {
        cursor: pointer;
    }

    .timeline-item .date {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        width: 90px;
        height: 97px;
        margin: 32px 14px 0 0;
        opacity: 0.3;
        font-size: 40px;
    }

    .timeline-item > div {
        flex-grow: 1;
        padding: 32px 40px 32px 25px;
    }

        .timeline-item > div > img {
            flex-shrink: 0;
            width: 97px;
        }

    .timeline-item .info-wrap {
        max-width: 640px;
        padding-left: 52px;
    }

        .timeline-item .info-wrap::after {
            content: "";
            display: block;
            width: 178px;
            height: 15px;
            background: url("../images/pattern_sm.svg") 0 0 no-repeat;
            opacity: 0;
            position: absolute;
            bottom: 0;
            right: 0;
        }

        .timeline-item .info-wrap .head {
            display: flex;
            flex-direction: column;
            max-width: 470px;
            min-height: 120px;
            margin: -12px 0 -11px;
            position: relative;
        }

        .timeline-item .info-wrap .title {
            margin: auto 0;
            transition: font-size 0.3s ease;
        }

        .timeline-item .info-wrap .text-wrap {
            padding: 35px 0 10px;
            font-size: 18px;
        }

            .timeline-item .info-wrap .text-wrap::before,
            .timeline-item .info-wrap .text-wrap::after {
                display: none;
            }

    .timeline-item .close-btn {
        background-color: transparent;
        border: 1px solid transparent;
        padding: 8px;
        position: absolute;
        top: 10px;
        right: 10px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

        .timeline-item .close-btn .icon {
            display: block;
        }

            .timeline-item .close-btn .icon::before {
                width: 18px;
                height: 18px;
            }

        .timeline-item .close-btn:hover {
            border-color: #c7c7c7;
        }

    .timeline-item .date,
    .timeline-item > div {
        transition: all 0.1s ease;
    }

    .timeline-item.is-open .date,
    .timeline-item.is-open .date {
        opacity: 1;
    }

    .timeline-item.is-open > div {
        background: #fff;
        box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.16);
    }

    .timeline-item.is-open .info-wrap::after {
        opacity: 1;
    }

    .timeline-item.is-open .close-btn {
        visibility: visible;
        opacity: 1;
    }

    .timeline-item .info-wrap .title.animate {
        font-size: 28px;
    }

@media (max-width: 1499px) {
    .timeline-container::before {
        left: 168px;
    }

    .page-timeline article > .title {
        margin-bottom: 20px;
    }

    .timeline-item .date {
        width: 81px;
        font-size: 36px;
    }

    .timeline-item .info-wrap .title.animate {
        font-size: 24px;
    }

    .timeline-item .info-wrap .text-wrap {
        font-size: 16px;
    }
}

@media (min-width: 1350px) {
    .timeline-item.is-open {
        cursor: default;
    }
}

@media (max-width: 1349px) {
    .timeline-item .info-wrap {
        padding-left: 40px;
    }
}

@media (max-width: 1199px) {
    .timeline-container::before {
        left: 154px;
    }

    .page-timeline article > .title {
        margin-bottom: 20px;
    }

    .timeline-item .date {
        width: 67px;
        font-size: 30px;
    }

    .timeline-item .info-wrap {
        padding-left: 25px;
    }

        .timeline-item .info-wrap .head .title {
            font-size: 18px;
        }

        .timeline-item .info-wrap .text-wrap {
            font-size: 14px;
        }
}

@media (max-width: 991px) {
    .timeline-item > div {
        padding-right: 0;
    }

    .timeline-item .info-wrap {
        flex-grow: 1;
    }

        .timeline-item .info-wrap .head {
            width: 100%;
            max-width: 100%;
            padding-right: 25px;
            position: relative;
        }

            .timeline-item .info-wrap .head::after {
                content: "";
                width: 12px;
                height: 8px;
                background: url("../images/icons/dropdown_chevron_blue.svg") center no-repeat;
                background-size: contain;
                position: absolute;
                top: 50%;
                right: 0;
                transform: translateY(-45%);
            }

    .timeline-item.is-open .info-wrap .head::after {
        display: none;
    }
}

@media (max-width: 767px) {
    .timeline-container::before {
        top: 18px;
        bottom: 18px;
        left: 70px;
    }

    .page-timeline article > .title {
        margin-bottom: 15px;
    }

    .timeline-item .date {
        width: 36px;
        height: 45px;
        margin: 12px 6px 0 0;
        font-size: 16px;
    }

    .timeline-item > div {
        padding: 12px 0 24px 6px;
    }

        .timeline-item > div > img {
            width: 45px;
        }

    .timeline-item .info-wrap {
        padding: 0 9px;
    }

        .timeline-item .info-wrap .head {
            min-height: inherit !important;
            padding-top: 0 !important;
            margin: 0 !important;
        }

            .timeline-item .info-wrap .head::after {
                margin-top: 6px;
            }

            .timeline-item .info-wrap .head .title {
                padding-top: 14px !important;
                font-size: 13px;
            }

        .timeline-item .info-wrap .text-wrap {
            padding-top: 15px;
            font-size: 12px;
        }

    .timeline-item .close-btn {
        top: 15px;
        right: 5px;
    }

    .timeline-item.is-open > div {
        flex-direction: column;
    }
}
/* ---------- /timeline ---------- */


/* ---------- action plans ---------- */
.action-plan-items-container {
    padding-top: 25px;
}

    .action-plan-items-container > .text {
        margin-bottom: 25px;
    }

.action-plan-item {
    width: 100%;
    max-width: 320px;
    box-shadow: 0 30px 30px 0 rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 30px;
}

    .action-plan-item .head,
    .action-plan-item .body {
        padding-left: 26px;
        padding-right: 26px;
    }

    .action-plan-item .head {
        height: 154px;
        background: #d1d1d4 url("../images/pattern2.png") right bottom no-repeat;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        padding-top: 25px;
        font-size: 30px;
    }

        .action-plan-item .head b {
            font-weight: bold;
        }

    .action-plan-item .body {
        padding-top: 25px;
        padding-bottom: 26px;
    }

        .action-plan-item .body .text {
            margin-bottom: 30px;
            font-size: 18px;
        }

@media (min-width: 768px) {
    .action-plan-items-container {
        padding-top: 35px;
    }

        .action-plan-items-container > .text {
            margin-bottom: 42px;
        }

    .action-plan-item {
        width: 260px;
    }
}

@media (min-width: 992px) {
    .action-plan-items-container {
        padding-top: 48px;
    }
}

@media (max-width: 767px) {
    .action-plan-item {
        margin-left: auto;
        margin-right: auto;
    }
}
/* ---------- /action plans ---------- */


/* ---------- council structure ---------- */
.council-structure-container {
    margin: 40px 0 20px;
}

    .council-structure-container > .title {
        margin-bottom: 30px;
    }

.council-tree .row > div {
    margin-bottom: 18px;
}

.council-tree .row:last-child > div {
    margin-bottom: 0;
}

.council-tree > .row {
    margin-left: -7px;
    margin-right: -7px;
}

    .council-tree > .row > div {
        padding-left: 7px;
        padding-right: 7px;
    }

.council-tree .row .row {
    margin-left: -6px;
    margin-right: -6px;
}

    .council-tree .row .row > div {
        padding-left: 6px;
        padding-right: 6px;
    }

        .council-tree .row .row > div + div::before,
        .council-tree .row .row + .row > div:first-child::after {
            content: "";
            background-color: rgba(0,0,0,0.1);
            position: absolute;
        }

.council-tree-item {
    display: flex;
    width: 100%;
    min-height: 100%;
    padding: 0 0 6px 6px;
    position: relative;
}

    .council-tree-item::before,
    .council-tree-item::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .council-tree-item::before {
        width: 6px;
        top: 7px;
    }

    .council-tree-item::after {
        height: 6px;
        right: 22px;
    }

    .council-tree-item.level-1::before,
    .council-tree-item.level-1::after {
        background-color: #056699;
    }

    .council-tree-item.level-2::before,
    .council-tree-item.level-2::after {
        background-color: #0099FF;
    }

    .council-tree-item.level-21::before,
    .council-tree-item.level-21::after {
        background-color: #333;
    }

    .council-tree-item.level-3::before,
    .council-tree-item.level-3::after {
        background-color: #F7991C;
    }

    .council-tree-item.level-4::before,
    .council-tree-item.level-4::after {
        background-color: #ED3D24;
    }

    .council-tree-item > div {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        border: 1px solid #D8D8D8;
        padding: 20px 11px;
    }

        .council-tree-item > div > :first-child {
            margin-top: auto;
        }

        .council-tree-item > div > :last-child {
            margin-bottom: auto;
        }

    .council-tree-item strong {
        font-size: 12px;
        font-weight: bold;
    }

    .council-tree-item p {
        display: none;
    }

    .council-tree-item.level-1 {
        flex-shrink: 0;
    }

@media(min-width: 768px) {
    .council-tree .row {
        flex-wrap: nowrap;
    }

        .council-tree .row .row > div {
            flex: 0 0 31%;
            max-width: 302px;
        }

            .council-tree .row .row > div:first-child {
                flex: 0 0 38%;
                max-width: 381px;
            }

            .council-tree .row .row > div + div::before {
                width: 12px;
                height: 2px;
                top: 50%;
                left: 0;
                margin: -1px 0 0 -6px;
            }

        .council-tree .row .row + .row > div:first-child::after {
            width: 2px;
            height: 18px;
            bottom: 100%;
            left: 50%;
            margin: 0 0 0 -1px;
        }

    .council-tree-item > div {
        min-height: 100px;
        padding: 20px 28px;
    }

    .council-tree-item strong {
        font-size: 13px;
    }

    .council-tree-item p {
        display: block;
        font-size: 12px;
        font-weight: 400;
        margin-top: 5px;
    }
}

@media(min-width: 992px) {
    .council-structure-container > .title {
        margin-bottom: 50px;
    }
}

@media(min-width: 1500px) {
    .council-tree-item {
        padding: 0 0 9px 9px;
    }

        .council-tree-item::before {
            width: 9px;
            top: 7px;
        }

        .council-tree-item::after {
            height: 9px;
            right: 22px;
        }
}

@media(max-width: 767px) {
    .council-tree .row .row .council-tree-item {
        width: auto;
        margin-left: 28px;
    }

    .council-tree .row .row:first-child > div:first-child .council-tree-item {
        margin-left: 0;
    }

    .council-tree > .row > div:last-child::before {
        content: "";
        width: 2px;
        height: 100%;
        background-color: rgba(0,0,0,0.1);
        position: absolute;
        top: 0;
        left: 13px;
    }

    .council-tree .row .row > div + div::before {
        width: 2px;
        height: 18px;
        bottom: 100%;
        left: 70px;
    }

    .council-tree .row .row + .row > div:first-child::after,
    .council-tree .row .row:first-child div:nth-child(2)::before {
        width: 23px;
        height: 2px;
        top: 50%;
        left: 14px;
        margin-top: -1px;
    }

    .council-tree .row .row:first-child div:nth-child(2)::before {
        bottom: auto;
    }

    .council-tree-item strong {
        max-width: 160px;
        margin-bottom: auto;
    }

    .council-tree-item.level-1 > div {
        width: 38px;
        padding: 0;
        position: relative;
        overflow: hidden;
    }

    .council-tree-item.level-1 strong {
        width: 200px;
        height: 18px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: rotate(-90deg) translate(-50%, -50%);
        transform-origin: left top;
        text-align: center;
    }
}
/* ---------- /council structure ---------- */


/* ---------- consultations ---------- */

/* --- calendar --- */

/* head */
.calendar-head {
    align-items: center;
    justify-content: space-between;
    margin-bottom: 50px;
}

    .calendar-head .filters-col {
        max-width: 670px;
    }

        .calendar-head .filters-col .row > div {
            margin-bottom: 10px;
        }

    .calendar-head .form-control {
        width: 100%;
    }

.calendar-input-wrap {
    position: relative;
}

    .calendar-input-wrap .form-control {
        padding-right: 50px;
    }

    .calendar-input-wrap .icon {
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        pointer-events: none;
    }

        .calendar-input-wrap .icon::before {
            width: 20px;
            height: 20px;
        }

.calendar-head .filters-btn {
    background-color: transparent;
    border: 0;
    padding: 10px;
}

    .calendar-head .filters-btn img {
        display: block;
        height: 22px;
    }

@media (max-width: 991px) {
    .calendar-head {
        margin-bottom: 15px;
    }

        .calendar-head .filters-col {
            padding-top: 20px;
        }
}

@media (min-width: 576px) {
    .calendar-head .filters-btn-col {
        display: none;
    }
}

@media (max-width: 575px) {
    .calendar-head .filters-col {
        display: none;
        padding-top: 12px;
    }
}

/* calendar container */
.calendar-items-list > .title {
    margin-bottom: 26px;
}

@media (max-width: 991px) {
    .calendar-items-list > .title {
        font-size: 16px;
        margin-bottom: 20px;
    }
}

/* calendar item */
.calendar-item {
    display: flex;
    width: 100%;
    margin-bottom: 26px;
}

    .calendar-item .date {
        flex-shrink: 0;
        width: 114px;
        margin: 9px 15px 0 0;
    }

        .calendar-item .date > * {
            display: block;
            text-align: center;
        }

        .calendar-item .date b {
            font-size: 40px;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 12px;
        }

        .calendar-item .date span {
            font-size: 20px;
            font-weight: 300;
            line-height: 1.1;
        }

    .calendar-item > div {
        flex-grow: 1;
        border-left: 2px solid;
        padding: 28px 34px 2px;
    }

        .calendar-item > div * {
            color: inherit;
        }

        .calendar-item > div > .title {
            margin-bottom: 20px;
        }

/* calendar info wrap */
.calendar-item-info-wrap {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

    .calendar-item-info-wrap .item {
        padding: 0 26px;
        position: relative;
        transition: all 0.3s ease;
    }

        .calendar-item-info-wrap .item:last-child {
            padding-right: 0 !important;
        }

        .calendar-item-info-wrap .item svg {
            display: block;
            height: 20px;
            position: absolute;
            top: 0;
            left: 0;
        }

        .calendar-item-info-wrap .item .icon-pin path,
        .calendar-item-info-wrap .item .icon-user path,
        .calendar-item-info-wrap .item .icon-users path {
            fill: none;
            stroke: #000;
            stroke-width: 1.2;
        }

        .calendar-item-info-wrap .item .icon-clock path {
            fill: #000;
        }

        .calendar-item-info-wrap .item > strong {
            display: block;
            min-height: 32px;
            margin-top: 2px;
            line-height: 20px;
            font-weight: normal;
        }

        .calendar-item-info-wrap .item > div {
            min-width: 140px;
            max-width: 200px;
            line-height: 2.5;
            /*position: absolute;*/
        }

        .calendar-item-info-wrap .item:nth-child(4) > div {
            max-width: 245px;
        }

        .calendar-item-info-wrap .item > div p {
            padding-bottom: 15px;
        }

.calendar-item {
    cursor: pointer;
}


    .calendar-item.show .calendar-item-info-wrap {
        max-width: 100%;
    }

        .calendar-item.show .calendar-item-info-wrap .item > strong {
            font-weight: bold;
        }

@media (min-width: 1650px) {
    .calendar-item-info-wrap .item > strong {
        white-space: nowrap;
    }
}

@media (max-width: 1499px) {
    .calendar-item .date {
        width: 96px;
        margin-right: 10px;
    }

        .calendar-item .date b {
            font-size: 36px;
        }

        .calendar-item .date span {
            font-size: 16px;
        }

    .calendar-item > div {
        padding: 18px 30px 0;
    }

        .calendar-item > div > .title {
            font-size: 18px;
            margin-bottom: 15px;
        }

    .calendar-item .calendar-item-info-wrap .item {
        padding-right: 20px;
    }
}

@media (max-width: 1300px) {
    .calendar-item-info-wrap .item > div {
        line-height: 2;
    }
}

@media (max-width: 1020px), (min-width: 1200px) and (max-width: 1300px) {
    .calendar-item .calendar-item-info-wrap {
        flex-wrap: wrap;
        max-width: 410px;
    }

        .calendar-item .calendar-item-info-wrap .item:nth-child(odd) {
            flex: 0 0 40%;
        }

        .calendar-item .calendar-item-info-wrap .item:nth-child(even) {
            flex: 0 0 60%;
        }

    .calendar-item-info-wrap .item > div {
        max-width: 245px;
    }
}

@media (max-width: 991px) {
    .calendar-item .calendar-item-info-wrap .item:nth-child(odd) {
        flex: 0 0 45%;
    }

    .calendar-item .calendar-item-info-wrap .item:nth-child(even) {
        flex: 0 0 55%;
    }

    .calendar-item-info-wrap .item > strong {
        font-weight: 300;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .calendar-item > div {
        padding-bottom: 6px;
        position: relative;
    }

        .calendar-item > div::after {
            content: "";
            width: 12px;
            height: 8px;
            background: url("../images/icons/dropdown_chevron_blue.svg") center no-repeat;
            background-size: contain;
            position: absolute;
            bottom: 24px;
            right: 24px;
        }

    .calendar-item.show > div::after {
        transform: rotate(180deg);
    }
}

@media (min-width: 768px) {
    .calendar-item .calendar-item-info-wrap {
        display: flex !important;
        max-width: 680px;
        transition: all 0.1s linear;
    }

    .calendar-item-info-wrap .item > div {
        display: none;
    }
}

@media (max-width: 767px) {
    .calendar-item-info-wrap {
        display: none;
    }

    .calendar-item .date {
        width: 60px;
        margin-right: 5px;
    }

        .calendar-item .date b {
            font-size: 20px;
            margin-bottom: 6px;
        }

        .calendar-item .date span {
            font-size: 10px;
        }

    .calendar-item > div {
        padding: 15px 15px 0;
    }

        .calendar-item > div > .title {
            font-size: 14px;
            padding-right: 20px;
            position: relative;
        }

            .calendar-item > div > .title::after {
                content: "";
                width: 12px;
                height: 8px;
                background: url("../images/icons/dropdown_chevron_blue.svg") center no-repeat;
                background-size: contain;
                position: absolute;
                top: 50%;
                right: 0;
                margin-top: -4px;
            }

    .calendar-item.show > div > .title::after {
        transform: rotate(180deg);
    }

    .calendar-item .calendar-item-info-wrap {
        max-width: 100%;
    }

        .calendar-item .calendar-item-info-wrap .item {
            flex: 0 0 100% !important;
        }

    .calendar-item-info-wrap .item > strong {
        min-height: inherit;
        margin: 0 0 10px;
    }

    .calendar-item-info-wrap .item > div {
        max-width: 100% !important;
    }
}

/* completed */
.completed-consultations-list .date {
    display: block;
    width: 124px;
    height: 60px;
    background-color: transparent;
    border-left: 2px solid transparent;
    padding: 15px 0;
    position: relative;
    color: inherit;
    font-size: 24px;
    font-weight: bold;
    line-height: 30px;
    text-align: center;
}

    .completed-consultations-list .date::after {
        content: "";
        border-top: 30px solid transparent;
        border-bottom: 30px solid transparent;
        border-left: 12px solid transparent;
        position: absolute;
        top: 0;
        left: 100%;
    }

.completed-consultations-list section {
    margin-bottom: 34px;
}

    .completed-consultations-list section > div {
        margin: 11px 0 15px;
    }

.completed-consultations-list .text {
    font-weight: bold;
    line-height: 1.5;
}

.completed-consultations-list section > div ul {
    list-style: none;
    padding-left: 20px;
    margin-top: 5px;
}

.completed-consultations-list section > div a {
    color: #0091f9;
    font-size: 14px;
}

    .completed-consultations-list section > div a:hover {
        text-decoration: underline;
    }

/* --- colors --- */

/* primary */
.calendar-item.calendar-item-primary > div,
.completed-consultations-list .calendar-item-primary .date {
    background-color: #e5f5ff;
    border-left-color: #0099ff;
    color: #0099ff;
}

    .completed-consultations-list .calendar-item-primary .date::after {
        border-left-color: #e5f5ff;
    }

.calendar-item-primary .calendar-item-info-wrap .item .icon-pin path,
.calendar-item-primary .calendar-item-info-wrap .item .icon-user path,
.calendar-item-primary .calendar-item-info-wrap .item .icon-users path {
    stroke: #0099ff;
}

.calendar-item-primary .calendar-item-info-wrap .item .icon-clock path {
    fill: #0099ff;
}

/* secondary */
.calendar-item.calendar-item-secondary > div,
.completed-consultations-list .calendar-item-secondary .date {
    background-color: #f6f6f6;
    border-left-color: #7f7f7f;
    color: #7f7f7f;
}

    .completed-consultations-list .calendar-item-secondary .date::after {
        border-left-color: #f6f6f6;
    }

.calendar-item-secondary .calendar-item-info-wrap .item .icon-pin path,
.calendar-item-secondary .calendar-item-info-wrap .item .icon-user path,
.calendar-item-secondary .calendar-item-info-wrap .item .icon-users path {
    stroke: #7f7f7f;
}

.calendar-item-secondary .calendar-item-info-wrap .item .icon-clock path {
    fill: #7f7f7f;
}

/* warning */
.calendar-item.calendar-item-warning > div,
.completed-consultations-list .calendar-item-warning .date {
    background-color: #FEF8E9;
    border-left-color: #F8B153;
    color: #F8B153;
}

    .completed-consultations-list .calendar-item-warning .date::after {
        border-left-color: #FEF8E9;
    }

.calendar-item-warning .calendar-item-info-wrap .item .icon-pin path,
.calendar-item-warning .calendar-item-info-wrap .item .icon-user path,
.calendar-item-warning .calendar-item-info-wrap .item .icon-users path {
    stroke: #F8B153;
}

.calendar-item-warning .calendar-item-info-wrap .item .icon-clock path {
    fill: #F8B153;
}

/* danger */
.calendar-item.calendar-item-danger > div,
.completed-consultations-list .calendar-item-danger .date {
    background-color: #FEEEF3;
    border-left-color: #ED3D24;
    color: #ED3D24;
}

    .completed-consultations-list .calendar-item-danger .date::after {
        border-left-color: #FEEEF3;
    }

.calendar-item-danger .calendar-item-info-wrap .item .icon-pin path,
.calendar-item-danger .calendar-item-info-wrap .item .icon-user path,
.calendar-item-danger .calendar-item-info-wrap .item .icon-users path {
    stroke: #ED3D24;
}

.calendar-item-danger .calendar-item-info-wrap .item .icon-clock path {
    fill: #ED3D24;
}

/* info */
.calendar-item.calendar-item-info > div,
.completed-consultations-list .calendar-item-info .date {
    background-color: #E1EEF5;
    border-left-color: #056699;
    color: #056699;
}

    .completed-consultations-list .calendar-item-info .date::after {
        border-left-color: #E1EEF5;
    }

.calendar-item-info .calendar-item-info-wrap .item .icon-pin path,
.calendar-item-info .calendar-item-info-wrap .item .icon-user path,
.calendar-item-info .calendar-item-info-wrap .item .icon-users path {
    stroke: #056699;
}

.calendar-item-info .calendar-item-info-wrap .item .icon-clock path {
    fill: #056699;
}
/* ---------- /consultations ---------- */


/* ---------- ogp-idea ---------- */
.page-ogp-idea .page-content-head {
    display: flex;
    width: 100%;
    background: url(../images/home/idea.jpg) center no-repeat;
    background-size: cover;
    padding-top: 60px;
    padding-bottom: 60px;
}

.page-ogp-idea .page-content-head-inner {
    margin: auto 0;
}

.page-ogp-idea .page-content-head .title {
    max-width: 600px;
    color: #fff;
    font-weight: 300;
}

@media (min-width: 1650px) {
    .page-ogp-idea .page-content-head .title-xxl {
        font-size: 60px;
    }
}

@media (min-width: 992px) {
    .page-ogp-idea .page-content-head {
        height: 500px;
    }

        .page-ogp-idea .page-content-head .title {
            margin-left: 26px;
        }
}

@media (max-width: 767px) {
    .page-ogp-idea .page-content-head {
        width: auto;
        margin-left: -15px;
        margin-right: -15px;
    }
}
/* ---------- /ogp-idea ---------- */


/* ---------- contact ---------- */
.page-contact .map-container {
    width: 100%;
    min-height: 240px;
    max-height: 500px;
    position: relative;
    overflow: hidden;
}

    .page-contact .map-container::before {
        content: "";
        display: block;
        padding-top: 40%;
    }

    .page-contact .map-container .map {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

.page-contact .contact-info-wrap {
    color: #000;
    font-size: 16px;
    font-weight: normal;
}

    .page-contact .contact-info-wrap > * {
        margin-bottom: 18px;
    }

    .page-contact .contact-info-wrap a {
        color: inherit;
    }

    .page-contact .contact-info-wrap .mail,
    .page-contact .contact-info-wrap .phone {
        display: inline-block;
    }

    .page-contact .contact-info-wrap .mail {
        margin-bottom: 4px;
    }

.page-contact .social-media-wrap {
    display: block;
    margin: 0;
}

    .page-contact .social-media-wrap > strong {
        display: block;
        margin-bottom: 18px;
        color: #0099ff;
        font-size: 18px;
        font-weight: bold;
    }

    .page-contact .social-media-wrap > div {
        display: flex;
        margin: 0 -10px;
    }

        .page-contact .social-media-wrap > div a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 46px;
            height: 46px;
            border: 1px solid #d9d8d8;
            margin: 0 10px;
            transition: all 0.3s ease;
        }

            .page-contact .social-media-wrap > div a:hover {
                border-color: #0099ff;
            }

            .page-contact .social-media-wrap > div a img {
                display: block;
                height: 18px;
            }

@media (min-width: 768px) {
    .page-contact .info-col > * {
        width: 322px;
    }

    .page-contact .contact-info-wrap {
        font-size: 14px;
        margin-top: -7px;
    }
}

@media (min-width: 992px) {
    .page-contact .info-col > * {
        width: 380px;
    }

    .page-contact .contact-info-wrap {
        font-size: 16px;
    }
}

@media (min-width: 1500px) {
    .page-contact .contact-info-wrap {
        font-size: 18px;
    }

    .page-contact .info-col > * {
        width: 410px;
    }
}

@media (min-width: 1650px) {
    .form-container .main-row > .info-col {
        padding-left: 40px;
    }
}

@media (max-width: 767px) {
    .page-contact .map-container {
        width: auto;
        margin-left: -15px;
        margin-right: -15px;
    }

    .page-contact .info-col {
        padding-top: 40px;
    }
}
/* ---------- /contact ---------- */


/* ---------- sitemap ---------- */
.page-sitemap nav {
    padding-top: 25px;
}

    .page-sitemap nav li {
        margin: 15px 0;
    }

        .page-sitemap nav li ul {
            margin-top: 20px;
        }

    .page-sitemap nav a {
        display: inline-block;
        color: #000;
        font-size: 16px;
        font-weight: 300;
        line-height: 1.3;
    }

    .page-sitemap nav strong {
        font-weight: bold;
    }

    .page-sitemap nav a:hover,
    .page-sitemap nav a.active {
        color: #0099ff;
    }

@media (min-width: 992px) {
    .page-sitemap nav a {
        font-size: 18px;
    }
}

@media (min-width: 1650px) {
    .page-sitemap nav a {
        font-size: 20px;
    }
}
/* ---------- /sitemap ---------- */


/* ---------- search results ---------- */
.page-search-results .page-content hr {
    margin: 35px 0;
}

    .page-search-results .page-content hr:last-child {
        display: none;
    }

.search-result-item .title {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 10px;
}

.search-result-item .text-wrap {
    font-size: 14px;
}
/* ---------- /search results ---------- */


/* ---------- projects ---------- */
.page-content-nav + .projects-container {
    margin-top: 50px;
}

.projects-container .row {
    margin-bottom: -30px;
}

    .projects-container .row > div {
        margin-bottom: 30px;
    }

.projects-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    border: 1px solid rgba(127,127,127,0.3);
    border-radius: 6px;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.07);
    overflow: hidden;
    transition: all 0.3s ease;
}

    .projects-item:hover {
        box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.2);
    }

    .projects-item .body {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        min-height: 200px;
        background-color: rgba(209,209,212,0.68);
        padding: 15px;
        position: relative;
    }

        .projects-item .body::after {
            content: "";
            width: 100%;
            max-width: 320px;
            height: 25px;
            background: url("../images/pattern3.png") bottom right no-repeat;
            background-size: 100% auto;
            position: absolute;
            bottom: 0;
            right: 0;
        }

        .projects-item .body > div {
            margin: auto 0;
        }

        .projects-item .body .title {
            color: #000;
            font-size: 18px;
            font-weight: bold;
            line-height: 1.4;
        }

        .projects-item .body .date {
            color: #000;
            font-size: 14px;
            font-weight: 300;
            opacity: 0.5;
        }

        .projects-item .body hr {
            width: 48px;
            border-top-color: #707070;
            margin: 20px 0;
        }

            .projects-item .body hr::before {
                display: none;
            }

    .projects-item .foo {
        background-color: #fff;
        padding: 15px;
    }

        .projects-item .foo .btn {
            display: block;
            width: 100%;
        }

@media (min-width: 576px) {
    .projects-item .body {
        min-height: 300px;
        padding: 32px;
    }

    .projects-item .foo {
        padding: 30px 26px;
    }

    .projects-item .body hr {
        margin: 30px 0;
    }
}

@media (min-width: 1199px) {
    .projects-container .row {
        margin-bottom: -40px;
    }

        .projects-container .row > div {
            margin-bottom: 40px;
        }

    .projects-item .body {
        min-height: 346px;
    }

        .projects-item .body .title {
            font-size: 22px;
        }

        .projects-item .body .date {
            font-size: 16px;
        }
}

@media (min-width: 1650px) {
    .projects-container .row {
        margin-bottom: -40px;
    }

        .projects-container .row > div {
            margin-bottom: 40px;
        }

    .projects-item .body .title {
        font-size: 30px;
    }

    .projects-item .body .date {
        font-size: 20px;
    }
}
/* ---------- /projects ---------- */


/* ---------- monitoring ---------- */

/*++++++++++++++
status:
	upcoming 
	ongoing
	suspensed
	finished
+++++++++++++++*/

.page-monitoring {
    width: 100%;
    overflow: hidden;
}

    .page-monitoring .main-col {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

        .page-monitoring .main-col > .card {
            flex-grow: 1;
        }

    .page-monitoring .aside-col {
        flex-shrink: 0;
        width: 29.8%;
        min-width: 300px;
        padding-bottom: 60px;
    }

        .page-monitoring .aside-col:first-child {
            padding-right: 16px;
        }

        .page-monitoring .aside-col:last-child {
            padding-left: 16px;
        }

@media (min-width: 992px) {
    .page-monitoring .page-content > .container {
        display: flex;
    }
}


/* --- statistic --- */
.page-monitoring-statistic-content .chart-container {
    background-color: #fff;
    border: 2px solid #F6F6F6;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.07);
    padding: 20px;
    margin-bottom: 16px;
}

    .page-monitoring-statistic-content .chart-container .title {
        font-size: 22px;
        font-weight: normal;
        margin-bottom: 20px;
    }

    .page-monitoring-statistic-content .chart-container .info-wrap {
        background-color: #f6f6f6;
        border-radius: 10px;
        padding: 12px 15px;
        color: #767171;
        font-size: 12px;
    }

        .page-monitoring-statistic-content .chart-container .info-wrap .status-item {
            display: block;
            background-color: transparent;
            border: 0;
            padding: 0;
            margin-bottom: 3px;
            font-size: 12px;
            font-weight: bold;
        }

    .page-monitoring-statistic-content .chart-container > .row > div {
        display: flex;
        flex-direction: column;
    }

.page-monitoring-statistic-content .banner-link {
    margin-bottom: 30px;
}

@media (max-width: 991px) {
    .page-monitoring-statistic-content {
        background-color: #f6f6f6;
    }

        .page-monitoring-statistic-content .main-col .card {
            background-color: transparent;
            padding-bottom: 0;
        }

        .page-monitoring-statistic-content .chart-container {
            margin-bottom: 30px;
        }

        .page-monitoring-statistic-content .aside-col {
            width: 100%;
            padding-left: 0 !important;
        }
}

@media (min-width: 1650px) {
    .page-monitoring-statistic-content .chart-container {
        padding: 40px;
    }
}


/* --- status and liability items --- */
.page-monitoring .status-item,
.page-monitoring .liability-rate-item {
    border: 1px solid;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.4;
}

.page-monitoring .liability-rate-item {
    padding-left: 32px;
    position: relative;
    white-space: nowrap;
}

    .page-monitoring .liability-rate-item > img {
        display: block;
        width: 16px;
        max-width: 100%;
        margin: 0;
        position: absolute;
        top: 50%;
        left: 8px;
        transform: translateY(-50%);
    }

    .page-monitoring .status-item.status-upcoming,
    .page-monitoring .status-upcoming .status-item,
    .page-monitoring .liability-rate-item.mostly-done {
        background-color: rgba(0,179,255,0.1);
        border-color: #00B3FF;
        color: #00B3FF;
    }

    .page-monitoring .status-item.status-ongoing,
    .page-monitoring .status-ongoing .status-item,
    .page-monitoring .liability-rate-item.partly-done {
        background-color: rgba(247,153,28,0.1);
        border-color: #F7991C;
        color: #F7991C;
    }

    .page-monitoring .status-item.status-suspensed,
    .page-monitoring .status-suspensed .status-item,
    .page-monitoring .liability-rate-item.not-done {
        background-color: rgba(237,61,36,0.1);
        border-color: #ED3D24;
        color: #ED3D24;
    }

    .page-monitoring .status-item.status-finished,
    .page-monitoring .status-finished .status-item,
    .page-monitoring .liability-rate-item.done {
        background-color: rgba(106,219,166,0.1);
        border-color: #6ADBA6;
        color: #6ADBA6;
    }

@media (min-width: 1500px) {
    .page-monitoring .status-item {
        font-size: 13px;
    }
}



/* --- filters --- */
.page-monitoring .filters-container .form-select .form-control,
.page-monitoring .filters-container .accordion-item-head {
    padding: 10px 36px 10px 22px;
}

    .page-monitoring .filters-container .form-select .form-control::after,
    .page-monitoring .filters-container .accordion-item-head::after {
        content: "";
        width: 9px;
        height: 100%;
        background: url(../images/icons/dropdown_chevron_black.svg) center no-repeat;
        background-size: 100% 6px;
        position: absolute;
        top: 0;
        right: 22px;
        transition: all 0.1s ease;
    }

.page-monitoring .filters-container .form-select.show .form-control::after,
.page-monitoring .filters-container .accordion-item.is-open .accordion-item-head::after {
    transform: rotate(-180deg);
}

.page-monitoring .filters-container .form-select .form-control,
.page-monitoring .filters-container .form-select .dropdown-menu {
    background-color: #fff;
    border: 0;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.07);
    font-weight: normal;
}

.page-monitoring .filters-container .form-select .form-control {
    font-size: 16px;
}

.page-monitoring .filters-container .form-select .dropdown-menu {
    border-top: 1px solid #B2B2B2;
}

    .page-monitoring .filters-container .form-select .dropdown-menu > li:first-child {
        margin-top: -1px;
    }

.form-select .filters-container .dropdown-menu label {
    font-weight: 400;
}

.page-monitoring .filters-container .form-select .dropdown-menu label > span {
    align-items: center;
    min-height: 52px;
    color: #B2B2B2;
}

.page-monitoring .filters-container .form-select .dropdown-menu label input:checked + span {
    color: #000;
}

    .page-monitoring .filters-container .form-select .dropdown-menu label input:checked + span::before {
        content: "";
        width: 2px;
        height: 26px;
        background: #0099FF;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }

.page-monitoring .filters-container .form-select .dropdown-menu label:hover > span {
    background-color: #f8f8f8;
}

.page-monitoring .filters-container .accordion-items-group {
    margin-top: 20px;
}

.page-monitoring .filters-container .accordion-item {
    background: #fff;
}

    .page-monitoring .filters-container .accordion-item + .accordion-item,
    .page-monitoring .filters-container .accordion-item-body {
        border-top: 1px solid #F6F6F6;
    }

.page-monitoring .filters-container .accordion-item-head {
    height: 60px;
    position: relative;
}

    .page-monitoring .filters-container .accordion-item-head .title,
    .page-monitoring .filters-container .accordion-item-head .badge {
        align-self: center;
    }

    .page-monitoring .filters-container .accordion-item-head .title {
        flex-grow: 1;
        color: #000;
        font-size: 16px;
        font-weight: normal;
    }

    .page-monitoring .filters-container .accordion-item-head .badge {
        background-color: #F6F6F6;
        border: 0;
        border-radius: 8px;
        padding: 5px 13px 4px;
        margin: 0 17px 0 5px;
        color: #B2B2B2;
        font-size: 15px;
    }

.page-monitoring .filters-container .accordion-item-body {
    padding: 0 22px;
}

    .page-monitoring .filters-container .accordion-item-body ul {
        list-style: none;
        padding: 12px 0 9px;
    }

    .page-monitoring .filters-container .accordion-item-body li {
        display: flex;
        padding: 9px 0;
    }

.page-monitoring .filters-container .custom-control-label {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4;
}

.page-monitoring .filters-container .status-checkbox .custom-control-label::before {
    margin: 6px 27px 0 0;
}

.page-monitoring .filters-container .monitoring-rating-checkbox .custom-control-label span {
    display: flex;
    align-items: flex-start;
}

.page-monitoring .filters-container .monitoring-rating-checkbox .custom-control-label img {
    width: 22px;
    margin: 0 12px 0 2px;
}

.page-monitoring .tags-container .tags-wrap {
    height: 64px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.page-monitoring .tags-container .foo {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 5;
}

    .page-monitoring .tags-container .foo .btn {
        padding: 0;
        position: relative;
        z-index: 2;
        color: #0099FF;
        font-size: 12px;
        font-weight: bold;
    }

        .page-monitoring .tags-container .foo .btn::before {
            content: attr(data-expand-text);
        }

.page-monitoring .tags-container.show .foo .btn::before {
    content: attr(data-collapse-text);
}

.page-monitoring .tags-container:not(.show) .foo::before {
    content: "";
    width: 100%;
    height: 80px;
    background: rgb(246,246,246);
    background: linear-gradient(0, rgba(246,246,246,1) 0%, rgba(246,246,246,0) 100%);
    pointer-events: none;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
}

@media (max-width: 1349px) {
    .page-monitoring .filters-container .form-select .form-control,
    .form-select .dropdown-menu label,
    .page-monitoring .filters-container .accordion-item-head .title,
    .page-monitoring .filters-container .custom-control-label {
        font-size: 14px;
    }
}

@media (max-width: 1649px) {
    .page-monitoring .filters-container .form-select .form-control,
    .page-monitoring .filters-container .accordion-item-head {
        padding-right: 26px;
        padding-left: 18px;
    }

        .page-monitoring .filters-container .form-select .form-control::after,
        .page-monitoring .filters-container .accordion-item-head::after {
            right: 14px;
        }

        .page-monitoring .filters-container .accordion-item-head .badge {
            padding-left: 8px;
            padding-right: 8px;
            margin-right: 10px;
            font-size: 12px;
        }
}

@media (max-width: 767px) {
    .monitoring-commitment-content .filters-container {
        display: flex;
        position: relative;
        z-index: 5;
    }

        .monitoring-commitment-content .filters-container .dropdown {
            flex-grow: 1;
        }

        .monitoring-commitment-content .filters-container .filters-btn {
            flex-shrink: 0;
            width: 48px;
            height: 48px;
            background: #fff;
            border: 0;
            box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.07);
            padding: 0;
            margin-left: 10px;
        }

            .monitoring-commitment-content .filters-container .filters-btn img {
                display: block;
                width: 24px;
                margin: 0 auto;
            }

    .monitoring-commitment-content:not(.filters-contaier-is-open) .filters-container .filters-btn .close-icon,
    .monitoring-commitment-content.filters-contaier-is-open .filters-container .filters-btn .filters-icon {
        display: none;
    }

    .monitoring-commitment-content .filters-container .toggleable-filters-wrap {
        width: 100%;
        margin-top: 10px;
        position: absolute;
        top: 100%;
        left: 0;
    }

    .page-monitoring .filters-container .accordion-items-group {
        margin-top: 0;
    }


    .monitoring-commitment-content::before,
    .monitoring-commitment-content .toggleable-filters-wrap {
        opacity: 0;
        visibility: hidden;
        z-index: -1;
        transition: opacity 0.2s ease;
    }

    .monitoring-commitment-content::before {
        content: "";
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.3);
        position: absolute;
        top: 0;
        left: 0;
    }

    .monitoring-commitment-content.filters-contaier-is-open::before,
    .monitoring-commitment-content.filters-contaier-is-open .toggleable-filters-wrap {
        opacity: 1;
        visibility: visible;
        z-index: 3;
    }

    .monitoring-commitment-content.filters-contaier-is-open .toggleable-filters-wrap {
        z-index: 5;
    }

    .page-monitoring .filters-container .accordion-item-head {
        height: 40px;
    }

    .page-monitoring .filters-container .form-select .dropdown-menu label > span {
        min-height: 40px;
    }

    .page-monitoring .filters-container .accordion-item-head .badge {
        padding: 4px 10px 3px;
    }

    .monitoring-commitment-content .main-col {
        position: relative;
        z-index: 1;
    }
}

@media (min-width: 768px) {
    .monitoring-commitment-content .filters-container .filters-btn {
        display: none;
    }
}



/* --- monitoring commitment --- */
@media (max-width: 991px) {
    .monitoring-commitment-content {
        background-color: #f6f6f6;
        padding-top: 25px;
    }
}

@media (max-width: 767px) {
    .monitoring-commitment-content {
        padding: 0;
    }

        .monitoring-commitment-content .aside-col {
            width: 100%;
            max-width: inherit;
            padding: 10px 16px 20px;
        }
}

@media (min-width: 768px) {
    .monitoring-commitment-content > .container {
        display: flex;
    }

    .monitoring-commitment-content .main-col {
        overflow: hidden;
    }
}

/* --- projects list --- */
.page-monitoring .page-content .projects-list-card {
    padding: 20px 16px 20px;
}

.page-monitoring .projects-list-item {
    border: 1px solid #F6F6F6;
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
    padding: 10px 15px 15px 10px;
    margin-bottom: 20px;
}

    .page-monitoring .projects-list-item .head {
        display: flex;
        margin-bottom: 20px;
    }

        .page-monitoring .projects-list-item .head .icon-wrap {
            flex-shrink: 0;
            display: flex;
            width: 60px;
            height: 60px;
        }

            .page-monitoring .projects-list-item .head .icon-wrap > * {
                display: block;
                width: 40px;
                margin: auto;
            }

        .page-monitoring .projects-list-item .head .title {
            padding: 0 17px;
            margin: auto 0;
            font-size: 12px;
            line-height: 1.4;
        }

    .page-monitoring .projects-list-item .foo {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .page-monitoring .projects-list-item .item-link {
        display: inline-flex;
        color: #0099FF;
        font-size: 14px;
    }

        .page-monitoring .projects-list-item .item-link > * {
            margin: auto 0;
        }

        .page-monitoring .projects-list-item .item-link .icon {
            margin-left: 10px;
        }

    .page-monitoring .projects-list-item > p {
        color: #707070;
        font-size: 12px;
        line-height: 1;
        text-align: right;
        margin-bottom: 10px;
    }

    /* upcoming */
    .page-monitoring .projects-list-item.status-upcoming .icon-wrap {
        background-color: rgba(0,179,255,0.1);
    }

        .page-monitoring .projects-list-item.status-upcoming .icon-wrap svg * {
            fill: #00B3FF;
        }
    /* ongoing */
    .page-monitoring .projects-list-item.status-ongoing .icon-wrap {
        background-color: rgba(247,153,28,0.1);
    }

        .page-monitoring .projects-list-item.status-ongoing .icon-wrap svg * {
            fill: #F7991C;
        }
    /* suspensed */
    .page-monitoring .projects-list-item.status-suspensed .icon-wrap {
        background-color: rgba(237,61,36,0.1);
    }

        .page-monitoring .projects-list-item.status-suspensed .icon-wrap svg * {
            fill: #ED3D24;
        }
    /* finished */
    .page-monitoring .projects-list-item.status-finished .icon-wrap {
        background-color: rgba(106,219,166,0.1);
    }

        .page-monitoring .projects-list-item.status-finished .icon-wrap svg * {
            fill: #6ADBA6;
        }

@media (max-width: 1199px) {
    .page-monitoring .projects-list > div {
        margin-left: -8px;
        margin-right: -8px;
    }

    .page-monitoring .projects-list > .row > div {
        padding-left: 8px;
        padding-right: 8px;
    }

    .page-monitoring .projects-list-item {
        margin-bottom: 16px;
    }
}

@media (max-width: 991px) {
    .page-monitoring .projects-list-item .item-link {
        font-size: 12px;
    }

    .page-monitoring .projects-list-item > p {
        margin-top: 10px;
    }
}

@media (min-width: 767px) {
    .page-monitoring .page-content .projects-list-card {
        padding: 24px 20px 40px;
    }
}

@media (min-width: 992px) {
    .page-monitoring .page-content .projects-list-card {
        padding-top: 30px;
    }

    .page-monitoring .projects-list > .row > div {
        max-width: calc(50% - 1px)
    }

    .page-monitoring .projects-list-item {
        padding: 20px 15px 17px 20px;
    }

        .page-monitoring .projects-list-item .head .title {
            font-size: 14px;
        }

        .page-monitoring .projects-list-item > p {
            font-size: 13px;
        }
}

@media (min-width: 1650px) and (min-height: 810px) {
    .page-monitoring .page-content .projects-list-card {
        padding: 40px;
    }
}

@media (min-width: 1650px) {
    .page-monitoring .projects-list-item {
        padding: 24px 19px 17px 24px;
    }

        .page-monitoring .projects-list-item .head {
            margin-bottom: 30px;
        }

            .page-monitoring .projects-list-item .head .icon-wrap {
                width: 80px;
                height: 80px;
            }

            .page-monitoring .projects-list-item .head .title {
                font-size: 18px;
            }

        .page-monitoring .projects-list-item > p {
            font-size: 16px;
        }
}



/* --- sdg goal items --- */
.sdg-item {
    display: inline-flex;
    min-height: 32px;
    border: 1px solid transparent;
    position: relative;
}

    .sdg-item::before {
        content: "";
        width: 100%;
        height: 100%;
        opacity: 0.3;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }

    .sdg-item > i,
    .sdg-item > span {
        position: relative;
        z-index: 2;
    }

    .sdg-item > i {
        display: flex;
        width: 41px;
        padding: 2px 3px 2px 2px;
    }

        .sdg-item > i img {
            max-width: 100%;
            margin: auto;
        }

    .sdg-item > span {
        display: flex;
        padding: 6px 10px 5px 8px;
    }

        .sdg-item > span > * {
            margin: auto 0;
        }

        .sdg-item > span b {
            margin-right: 8px;
            color: #333;
            font-size: 20px;
            font-weight: bold;
            line-height: 1;
        }

        .sdg-item > span span {
            color: #000;
            font-size: 13px;
            font-weight: 300;
            line-height: 1.25;
        }

/* 01 */
.sdg-1 {
    border-color: #EB1B2E;
}

    .sdg-1::before,
    .sdg-1 > i {
        background-color: #EB1B2E;
    }

/* 02 */
.sdg-2 {
    border-color: #D3A02A;
}

    .sdg-2::before,
    .sdg-2 > i {
        background-color: #D3A02A;
    }

/* 03 */
.sdg-3 {
    border-color: #4C9F38;
}

    .sdg-3::before,
    .sdg-3 > i {
        background-color: #4C9F38;
    }

/* 04 */
.sdg-4 {
    border-color: #C41E34;
}

    .sdg-4::before,
    .sdg-4 > i {
        background-color: #C41E34;
    }

/* 05 */
.sdg-5 {
    border-color: #EF402C;
}

    .sdg-5::before,
    .sdg-5 > i {
        background-color: #EF402C;
    }

/* 06 */
.sdg-6 {
    border-color: #1BAED9;
}

    .sdg-6::before,
    .sdg-6 > i {
        background-color: #1BAED9;
    }

/* 07 */
.sdg-7 {
    border-color: #FEB612;
}

    .sdg-7::before,
    .sdg-7 > i {
        background-color: #FEB612;
    }

/* 08 */
.sdg-8 {
    border-color: #8E1738;
}

    .sdg-8::before,
    .sdg-8 > i {
        background-color: #8E1738;
    }

/* 09 */
.sdg-9 {
    border-color: #F36D26;
}

    .sdg-9::before,
    .sdg-9 > i {
        background-color: #F36D26;
    }

/* 10 */
.sdg-10 {
    border-color: #E21385;
}

    .sdg-10::before,
    .sdg-10 > i {
        background-color: #E21385;
    }

/* 11 */
.sdg-11 {
    border-color: #FA9D25;
}

    .sdg-11::before,
    .sdg-11 > i {
        background-color: #FA9D25;
    }

/* 12 */
.sdg-12 {
    border-color: #CE8C2B;
}

    .sdg-12::before,
    .sdg-12 > i {
        background-color: #CE8C2B;
    }

/* 13 */
.sdg-13 {
    border-color: #47753F;
}

    .sdg-13::before,
    .sdg-13 > i {
        background-color: #47753F;
    }

/* 14 */
.sdg-14 {
    border-color: #107DBD;
}

    .sdg-14::before,
    .sdg-14 > i {
        background-color: #107DBD;
    }

/* 15 */
.sdg-15 {
    border-color: #3FAF49;
}

    .sdg-15::before,
    .sdg-15 > i {
        background-color: #3FAF49;
    }

/* 16 */
.sdg-16 {
    border-color: #08568C;
}

    .sdg-16::before,
    .sdg-16 > i {
        background-color: #08568C;
    }

/* 17 */
.sdg-17 {
    border-color: #173667;
}

    .sdg-17::before,
    .sdg-17 > i {
        background-color: #173667;
    }

@media (max-width: 991px) {
    .sdg-item > span b {
        font-size: 16px;
    }

    .sdg-item > span span {
        font-size: 12px;
    }
}


/* --- details --- */
.monitoring-commitment-details strong {
    font-weight: bold;
}

/* head */
.monitoring-commitment-details > .head {
    display: flex;
    align-items: flex-start;
    background-color: #fff;
    padding: 16px 40px 16px 0;
}

    .monitoring-commitment-details > .head .back-btn {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 35px;
        position: relative;
        margin-right: 32px;
    }

        .monitoring-commitment-details > .head .back-btn .icon::before {
            display: none;
        }

        .monitoring-commitment-details > .head .back-btn svg {
            display: block;
            width: 16px;
            transform: rotate(180deg);
        }

        .monitoring-commitment-details > .head .back-btn::after {
            content: "";
            width: 2px;
            height: 100%;
            opacity: 0.3;
            position: absolute;
            top: 50%;
            left: 100%;
            transform: translateY(-50%);
        }

    .monitoring-commitment-details > .head .title {
        font-size: 32px;
        font-weight: normal;
        line-height: 1.45;
        margin-right: auto;
    }

    .monitoring-commitment-details > .head .icon-wrap {
        flex-shrink: 0;
        align-self: center;
        width: 60px;
        margin-left: 20px;
    }

        .monitoring-commitment-details > .head .icon-wrap svg {
            display: block;
            width: 100%;
        }

    /* upcoming */
    .monitoring-commitment-details > .head.status-upcoming {
        background-color: #E5F7FF;
    }

        .monitoring-commitment-details > .head.status-upcoming .title {
            color: #0099FF;
        }

        .monitoring-commitment-details > .head.status-upcoming .back-btn::after {
            background-color: #0099FF;
        }

        .monitoring-commitment-details > .head.status-upcoming svg * {
            fill: #0099FF;
        }

    /* ongoing */
    .monitoring-commitment-details > .head.status-ongoing {
        background-color: rgba(247,153,28,0.1);
    }

        .monitoring-commitment-details > .head.status-ongoing .title {
            color: #F7991C;
        }

        .monitoring-commitment-details > .head.status-ongoing .back-btn::after {
            background-color: #F7991C;
        }

        .monitoring-commitment-details > .head.status-ongoing svg * {
            fill: #F7991C;
        }

    /* suspensed */
    .monitoring-commitment-details > .head.status-suspensed {
        background-color: rgba(237,61,36,0.1);
    }

        .monitoring-commitment-details > .head.status-suspensed .title {
            color: #ED3D24;
        }

        .monitoring-commitment-details > .head.status-suspensed .back-btn::after {
            background-color: #ED3D24;
        }

        .monitoring-commitment-details > .head.status-suspensed svg * {
            fill: #ED3D24;
        }

    /* finished */
    .monitoring-commitment-details > .head.status-finished {
        background-color: rgba(106,219,166,0.1);
    }

        .monitoring-commitment-details > .head.status-finished .title {
            color: #6ADBA6;
        }

        .monitoring-commitment-details > .head.status-finished .back-btn::after {
            background-color: #6ADBA6;
        }

        .monitoring-commitment-details > .head.status-finished svg * {
            fill: #6ADBA6;
        }

/* body */
.monitoring-commitment-details > .body > * {
    margin-bottom: 30px;
}

.monitoring-commitment-details > .body .progress-wrap {
    margin: 10px 0;
}

    .monitoring-commitment-details > .body .progress-wrap > *:not(:last-child),
    .monitoring-commitment-details > .body .progress-wrap > div > *:not(:last-child) {
        margin-right: 10px;
    }

    .monitoring-commitment-details > .body .progress-wrap .status-item,
    .monitoring-commitment-details > .body .progress-wrap .liability-rate-item {
        display: inline-flex;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .monitoring-commitment-details > .body .progress-wrap > div {
        display: inline;
    }

    .monitoring-commitment-details > .body .progress-wrap .text-sm {
        font-size: 14px;
    }

.monitoring-commitment-details > .body .sdg-wrap {
    margin: 10px 0;
}

    .monitoring-commitment-details > .body .sdg-wrap > * {
        float: left;
    }

    .monitoring-commitment-details > .body .sdg-wrap > strong {
        margin: 6px 8px 4px 0;
    }

    .monitoring-commitment-details > .body .sdg-wrap .sdg-item {
        margin: 4px 5px;
    }

.monitoring-commitment-details .link-items-wrap > .title {
    font-size: 18px;
    margin-bottom: 25px;
}

.monitoring-commitment-details .link-items-wrap .row > div:nth-child(2) {
    border-left: 0;
}

.monitoring-commitment-details .link-items-wrap .row > div:nth-child(odd) {
    padding-right: 15px;
}

.monitoring-commitment-details .link-items-wrap .row > div:nth-child(even) {
    padding-left: 15px;
    margin-left: 0;
}

/* stages */
.monitoring-commitment-details .stages-container > .title {
    font-size: 18px;
    margin-bottom: 25px;
}

.monitoring-commitment-details .stage-item {
    border-left: 2px solid transparent;
    margin-bottom: 24px;
}

.monitoring-commitment-details .stage-item-head {
    padding: 22px 0 10px 22px;
}

    .monitoring-commitment-details .stage-item-head .main-wrap {
        display: flex;
        align-items: flex-start;
    }

    .monitoring-commitment-details .stage-item-head .title-wrap {
        width: 100%;
        /*overflow: hidden;
    white-space: nowrap;*/
    }

    .monitoring-commitment-details .stage-item-head .title {
        width: 100%;
        /*overflow: hidden;*/
        font-size: 14px;
        line-height: 1.4;
        /*text-overflow: ellipsis;*/
    }

    .monitoring-commitment-details .stage-item-head .status-text {
        font-size: 12px;
        white-space: nowrap;
        margin-left: 34px;
    }

    .monitoring-commitment-details .stage-item-head .toggle-btn {
        flex-shrink: 0;
        width: 60px;
        background: none;
        border: 0;
        border-left: 2px solid transparent;
        margin-left: 16px;
    }

        .monitoring-commitment-details .stage-item-head .toggle-btn svg {
            display: block;
            width: 16px;
            margin: auto;
            transition: transform 0.2s ease;
        }

            .monitoring-commitment-details .stage-item-head .toggle-btn svg path {
                fill: none;
                stroke-width: 3;
                stroke-linecap: round;
            }

.monitoring-commitment-details .stage-item.is-open .stage-item-head .toggle-btn svg {
    transform: rotate(-180deg);
}

.monitoring-commitment-details .stage-item-head .bottom-wrap {
    width: 100%;
    padding: 22px 18px 0 0;
    white-space: nowrap;
    font-size: 12px;
    line-height: 22px;
}

    .monitoring-commitment-details .stage-item-head .bottom-wrap .row {
        flex-wrap: nowrap;
        justify-content: space-between;
    }

.monitoring-commitment-details .stage-item-body .row {
    flex-wrap: nowrap;
    margin: 0;
}

    .monitoring-commitment-details .stage-item-body .row > div {
        padding: 0;
    }

.monitoring-commitment-details .stage-item-body > .row > div {
    display: flex;
    flex-direction: column;
}

    .monitoring-commitment-details .stage-item-body > .row > div > .row {
        min-height: 100%;
    }

.monitoring-commitment-details .stage-item-body .row > div + div {
    border-left: 2px solid transparent;
}

.monitoring-commitment-details .stage-item-body .col-head,
.monitoring-commitment-details .stage-item-body .col-body {
    padding: 14px;
    font-size: 12px;
}

.monitoring-commitment-details .stage-item-body .col-head {
    display: flex;
    align-items: center;
    height: 67px;
    line-height: 1.2;
}

.monitoring-commitment-details .stage-item-body .col-body {
    font-weight: 300;
}

.monitoring-commitment-details .stage-item-body > .row:last-child .col-body {
    padding-bottom: 24px;
}


.monitoring-commitment-details .stage-item .toggleable-container {
    overflow: hidden;
    position: relative;
    z-index: 3;
    transition: height 0.2s ease;
}

.monitoring-commitment-details .stage-item .scrollable-container {
    width: 100%;
    overflow: hidden;
}

.monitoring-commitment-details .stage-item .mCSB_scrollTools .mCSB_draggerContainer {
    background-color: rgba(0,0,0,0.1);
    border-radius: 5px;
}

.monitoring-commitment-details .stage-item .mCSB_scrollTools.mCSB_scrollTools_horizontal {
    height: 4px;
    margin: 0 10px;
    bottom: 8px;
}

.scrollable-container .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: rgba(0,0,0,0.3) !important;
    margin: 0 !important;
}

.monitoring-commitment-details .stage-item .scrollable-container .stage-item-body {
    min-width: 600px;
}

@media (min-width: 992px) {
    .monitoring-commitment-details .stage-item-body .col-head,
    .monitoring-commitment-details .stage-item-body .col-body {
        font-size: 13px;
    }

    .monitoring-commitment-details .stage-item-head .title {
        font-size: 16px;
        line-height: 1.2;
    }

    .monitoring-commitment-details .stage-item-head .status-text {
        font-size: 14px;
    }

    .monitoring-commitment-details .stage-item-head,
    .monitoring-commitment-details .stage-item-body > .row > div:first-child > .col-head,
    .monitoring-commitment-details .stage-item-body > .row > div:first-child > .col-body,
    .monitoring-commitment-details .stage-item-body > .row > div:first-child > .row > div:first-child > .col-head,
    .monitoring-commitment-details .stage-item-body > .row > div:first-child > .row > div:first-child > .col-body {
        padding-left: 22px;
    }

        .monitoring-commitment-details .stage-item-head .bottom-wrap {
            overflow: hidden;
            transition: height 0.2s ease;
        }

    .monitoring-commitment-details .stage-item.is-open .stage-item-head .bottom-wrap {
        height: 0;
        opacity: 0;
    }

    .monitoring-commitment-details .stage-item .toggleable-container {
        height: 0;
    }
}

@media (min-width: 1350px) {
    .monitoring-commitment-details .stage-item-head .bottom-wrap {
        padding-right: 60px;
        font-size: 14px;
    }
}

@media (min-width: 1650px) {
    .monitoring-commitment-details .stage-item-head .bottom-wrap {
        padding-right: 100px;
        font-size: 16px;
    }

    .monitoring-commitment-details .stage-item-body .col-head,
    .monitoring-commitment-details .stage-item-body .col-body {
        font-size: 16px;
    }

    .monitoring-commitment-details .stage-item-head .title {
        font-size: 20px;
    }

    .monitoring-commitment-details .stage-item-head .status-text {
        font-size: 16px;
    }

    .monitoring-commitment-details .stage-item-head .toggle-btn {
        width: 70px;
        margin-left: 18px;
    }

        .monitoring-commitment-details .stage-item-head .toggle-btn svg {
            width: 18px;
        }

    .monitoring-commitment-details .stage-item-head,
    .monitoring-commitment-details .stage-item-body > .row > div:first-child > .col-head,
    .monitoring-commitment-details .stage-item-body > .row > div:first-child > .col-body,
    .monitoring-commitment-details .stage-item-body > .row > div:first-child > .row > div:first-child > .col-head,
    .monitoring-commitment-details .stage-item-body > .row > div:first-child > .row > div:first-child > .col-body {
        padding-left: 34px;
    }
}

@media (max-width: 991px) {
    .monitoring-commitment-details .stage-item-head {
        padding: 35px 20px 20px 10px;
        position: relative;
    }

        .monitoring-commitment-details .stage-item-head .title-wrap {
            margin: auto 0;
        }

        .monitoring-commitment-details .stage-item-head .title-wrap,
        .monitoring-commitment-details .stage-item-head .title {
            overflow: visible;
            text-overflow: inherit;
            white-space: normal;
        }

        .monitoring-commitment-details .stage-item-head .status-text {
            position: absolute;
            top: 5px;
            right: 20px;
        }

        .monitoring-commitment-details .stage-item-head .toggle-btn {
            width: 32px;
            height: 32px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            margin: auto 0 auto 15px;
        }

            .monitoring-commitment-details .stage-item-head .toggle-btn svg {
                width: 10px;
            }

        .monitoring-commitment-details .stage-item-head .bottom-wrap {
            display: none;
        }


    .monitoring-commitment-details .stage-item .toggleable-container {
        height: 67px;
    }

    .mobile .monitoring-commitment-details .stage-item .scrollable-container,
    .tablet .monitoring-commitment-details .stage-item .scrollable-container {
        overflow-y: hidden;
        overflow-x: scroll;
        -webkit-overflow-scrolling: scroll;
    }

    .monitoring-commitment-details .stage-item .scrollable-container .stage-item-body {
        display: flex;
        min-width: initial;
    }

    .monitoring-commitment-details .stage-item-body > .row:last-child > div:first-child {
        border-left: 1px solid;
    }

    .monitoring-commitment-details .stage-item-body .col-head,
    .monitoring-commitment-details .stage-item-body .col-body {
        padding: 12px 10px;
    }

    .monitoring-commitment-details .stage-item-body .col-body {
        padding-bottom: 24px;
    }

    .monitoring-commitment-details .stage-item-col-1 {
        width: 180px;
    }

    .monitoring-commitment-details .stage-item-col-2 {
        width: 140px;
    }

    .monitoring-commitment-details .stage-item-col-3,
    .monitoring-commitment-details .stage-item-col-4,
    .monitoring-commitment-details .stage-item-col-5 {
        width: 200px;
    }

    .monitoring-commitment-details .stage-item-col-6 {
        width: 300px;
    }
}

@media (max-width: 767px) {
    .monitoring-commitment-details .stage-item-head {
        padding-right: 10px;
    }

        .monitoring-commitment-details .stage-item-head .status-text {
            right: 10px;
        }

        .monitoring-commitment-details .stage-item-head .toggle-btn {
            margin-left: 10px;
        }
}

/* stage upcoming */
.monitoring-commitment-details .stage-item.status-upcoming {
    background-color: #EFF9FF;
    border-left-color: #1699FF;
}

    .monitoring-commitment-details .stage-item.status-upcoming .status-text {
        color: #1699FF;
    }

    .monitoring-commitment-details .stage-item.status-upcoming .toggle-btn {
        border-left-color: rgba(22,153,255,0.3);
    }

        .monitoring-commitment-details .stage-item.status-upcoming .toggle-btn svg path {
            stroke: #1699FF;
        }

    .monitoring-commitment-details .stage-item.status-upcoming .stage-item-body .row > div {
        border-left-color: #C1E3F8;
    }

    .monitoring-commitment-details .stage-item.status-upcoming .stage-item-body .col-head {
        background-color: #E2F2FC;
    }

/* stage ongoing */
.monitoring-commitment-details .stage-item.status-ongoing {
    background-color: #FEF5E9;
    border-left-color: #F7991C;
}

    .monitoring-commitment-details .stage-item.status-ongoing .status-text {
        color: #F7991C;
    }

    .monitoring-commitment-details .stage-item.status-ongoing .toggle-btn {
        border-left-color: rgba(247,153,28,0.3);
    }

        .monitoring-commitment-details .stage-item.status-ongoing .toggle-btn svg path {
            stroke: #F7991C;
        }

    .monitoring-commitment-details .stage-item.status-ongoing .stage-item-body .row > div {
        border-left-color: #f4e4ce;
    }

    .monitoring-commitment-details .stage-item.status-ongoing .stage-item-body .col-head {
        background-color: #f8eee0;
    }

/* stage finished */
.monitoring-commitment-details .stage-item.status-finished {
    background-color: #EBFDF5;
    border-left-color: #4EC18B;
}

    .monitoring-commitment-details .stage-item.status-finished .status-text {
        color: #4EC18B;
    }

    .monitoring-commitment-details .stage-item.status-finished .toggle-btn {
        border-left-color: rgba(78,193,139,0.3);
    }

        .monitoring-commitment-details .stage-item.status-finished .toggle-btn svg path {
            stroke: #4EC18B;
        }

    .monitoring-commitment-details .stage-item.status-finished .stage-item-body .row > div {
        border-left-color: #D2F2E4;
    }

    .monitoring-commitment-details .stage-item.status-finished .stage-item-body .col-head {
        background-color: #DEF8ED;
    }

/* stage suspensed */
.monitoring-commitment-details .stage-item.status-suspensed {
    background-color: #FFF1F0;
    border-left-color: #ED3D24;
}

    .monitoring-commitment-details .stage-item.status-suspensed .status-text {
        color: #ED3D24;
    }

    .monitoring-commitment-details .stage-item.status-suspensed .toggle-btn {
        border-left-color: rgba(237,61,36,0.3);
    }

        .monitoring-commitment-details .stage-item.status-suspensed .toggle-btn svg path {
            stroke: #ED3D24;
        }

    .monitoring-commitment-details .stage-item.status-suspensed .stage-item-body .row > div {
        border-left-color: #FCCAC8;
    }

    .monitoring-commitment-details .stage-item.status-suspensed .stage-item-body .col-head {
        background-color: #FCE5E4;
    }

@media (max-width: 991px) {
    .monitoring-commitment-details .stage-item.status-upcoming .toggle-btn {
        background-color: rgba(22,153,255,0.3);
    }

    .monitoring-commitment-details .stage-item.status-ongoing .toggle-btn {
        background-color: rgba(247,153,28,0.3);
    }

    .monitoring-commitment-details .stage-item.status-finished .toggle-btn {
        background-color: rgba(78,193,139,0.3);
    }

    .monitoring-commitment-details .stage-item.status-suspensed .toggle-btn {
        background-color: rgba(237,61,36,0.3);
    }
}



/* comments */
.monitoring-commitment-details .comments-container {
    margin-top: 40px;
}

    .monitoring-commitment-details .comments-container > .title {
        margin-bottom: 40px;
    }

    .monitoring-commitment-details .comments-container .link {
        color: #0099FF;
    }

.monitoring-commitment-details .comments-list {
    list-style: none;
}

.monitoring-commitment-details .comment-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16px;
}

    .monitoring-commitment-details .comment-item figure {
        flex-shrink: 0;
        padding: 30px 18px 10px 0;
    }

        .monitoring-commitment-details .comment-item figure img {
            display: block;
            width: 48px;
            height: 48px;
            object-fit: cover;
        }

    .monitoring-commitment-details .comment-item > div {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        min-height: 88px;
        background-color: #F6F6F6;
        border-radius: 16px;
        padding: 14px 20px 0;
    }

    .monitoring-commitment-details .comment-item .text {
        flex-grow: 1;
        padding-bottom: 5px;
        font-size: 16px;
        font-weight: normal;
    }

    .monitoring-commitment-details .comment-item .date {
        margin: 0 0 5px auto;
        color: #AEAEAE;
        font-size: 12px;
    }

.monitoring-commitment-details .reply-wrap {
    padding-left: 66px;
}

    .monitoring-commitment-details .reply-wrap .comment-item figure {
        padding: 0 5px 0 0;
    }

        .monitoring-commitment-details .reply-wrap .comment-item figure img {
            width: 34px;
            height: 34px;
        }

    .monitoring-commitment-details .reply-wrap .comment-item > div {
        min-height: inherit;
    }

.monitoring-commitment-details .add-reply-btn {
    display: flex;
    margin: -12px 0 16px 0;
}

.monitoring-commitment-details .reply-form {
    display: none;
}

    .monitoring-commitment-details .reply-form > div {
        padding-bottom: 20px;
    }

    .monitoring-commitment-details .reply-form .form-group {
        flex-grow: 1;
    }

    .monitoring-commitment-details .reply-form .btn-wrap {
        display: flex;
        justify-content: flex-end;
    }

    .monitoring-commitment-details .reply-form .btn {
        flex-shrink: 0;
    }

.monitoring-commitment-details .show-all-comments-btn {
    display: flex;
    margin: 40px 0;
}

.monitoring-commitment-details .comment-form {
    margin-top: 40px;
}

    .monitoring-commitment-details .comment-form .form-group {
        margin-bottom: 20px;
    }

    .monitoring-commitment-details .comment-form .help-block,
    .monitoring-commitment-details .comment-form .input-description {
        padding: 8px 0 0 16px;
        margin-bottom: -12px;
        font-size: 12px;
        font-weight: 300;
    }

    .monitoring-commitment-details .comment-form .input-description {
        color: #A5A5A5;
    }

    .monitoring-commitment-details .comment-form .has-error .input-description {
        display: none;
    }

@media (max-width: 1499px) {
    .monitoring-commitment-details > .head {
        padding-right: 25px;
    }

        .monitoring-commitment-details > .head .title {
            font-size: 26px;
        }

    .monitoring-commitment-details .link-item .text {
        margin-left: 15px;
        font-size: 16px;
    }
}

@media (max-width: 991px) {
    .monitoring-commitment-details > .head {
        flex-wrap: wrap;
        padding: 10px 32px 20px;
        position: relative;
    }

        .monitoring-commitment-details > .head .back-btn {
            width: auto;
            height: auto;
            padding: 14px;
            position: absolute;
            top: 5px;
            left: 16px;
        }

            .monitoring-commitment-details > .head .back-btn::after {
                display: none;
            }

        .monitoring-commitment-details > .head .title {
            order: 3;
            width: 100%;
            font-size: 16px;
            text-align: center;
        }

        .monitoring-commitment-details > .head .icon-wrap {
            align-self: flex-start;
            max-width: 42px;
            margin: 0 auto 10px;
        }

    .page-monitoring .main-col > .body {
        padding: 22px;
    }

    .monitoring-commitment-details > .body .progress-wrap > * {
        display: flex !important;
        width: 100%;
        margin-right: 0 !important;
    }

    .monitoring-commitment-details > .body .progress-wrap > div {
        margin-top: 8px;
    }

    .monitoring-commitment-details > .body .progress-wrap .text-sm {
        margin: auto 0;
        font-size: 12px;
    }

    .monitoring-commitment-details > .body .sdg-wrap > * {
        float: none;
        width: 100%;
    }

    .monitoring-commitment-details > .body .sdg-wrap > strong {
        display: block;
    }

    .monitoring-commitment-details .link-items-wrap .row > div + div {
        padding-top: 20px;
    }

    .monitoring-commitment-details .comment-item figure {
        padding: 0 10px 0 0;
    }

        .monitoring-commitment-details .comment-item figure img {
            width: 40px;
            height: 40px;
        }

    .monitoring-commitment-details .reply-wrap .comment-item figure img {
        width: 24px;
        height: 24px;
    }

    .monitoring-commitment-details .comment-item > div {
        min-height: inherit;
        padding: 12px 16px 0
    }

    .monitoring-commitment-details .comment-item .text {
        padding-bottom: 3px;
        font-size: 12px;
    }

    .monitoring-commitment-details .add-reply-btn {
        font-size: 12px;
    }

    .monitoring-commitment-details .reply-form .form-control {
        height: 44px;
        padding: 6px 16px;
        font-size: 12px;
    }

    .monitoring-commitment-details .reply-form .btn {
        width: 100%;
        max-width: 104px;
        padding: 6px 12px;
        margin: 4px 0 0 auto;
        font-size: 12px;
    }

    .monitoring-commitment-details .comment-form .help-block {
        margin-bottom: 0;
    }

    .monitoring-commitment-details .comment-form .submit-btn {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .monitoring-commitment-details > .head {
        padding: 10px 32px;
    }

        .monitoring-commitment-details > .head .back-btn {
            top: 2px;
            left: 2px;
        }

        .monitoring-commitment-details > .head .icon-wrap {
            width: 32px;
        }

    .page-monitoring .main-col > .body {
        padding: 20px 16px;
    }
}

@media (min-width: 992px) and (max-width: 1499px) {
}

@media (min-width: 1500px) {
    .page-monitoring .monitoring-commitment-details > .card {
        padding-right: 40px;
    }
}


/* --- methodology --- */
.monitoring-methodology-container section {
    margin: 50px 0;
}

    .monitoring-methodology-container section .head,
    .monitoring-methodology-container section .box {
        background-color: #F6F6F6;
        border-bottom: 1px solid #C8C8C8;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }

    .monitoring-methodology-container section .head {
        padding: 15px 10px;
        margin-bottom: 34px;
    }

        .monitoring-methodology-container section .head .title {
            font-size: 14px;
            line-height: 1.2;
            text-align: center;
        }

    .monitoring-methodology-container section .box {
        padding: 15px 10px;
    }

/* ratings */
.monitoring-methodology-container .ratings-section .body ul {
    list-style: none;
}

.monitoring-methodology-container .ratings-section .body li {
    display: flex;
    align-items: flex-start;
    margin: 38px 0;
}

    .monitoring-methodology-container .ratings-section .body li > img {
        flex-shrink: 0;
        width: 40px;
    }

    .monitoring-methodology-container .ratings-section .body li > div {
        flex-grow: 1;
        padding-left: 10px;
        font-size: 12px;
    }

        .monitoring-methodology-container .ratings-section .body li > div > strong {
            margin-right: 10px;
            line-height: 1.3;
        }

        .monitoring-methodology-container .ratings-section .body li > div > p {
            font-weight: 300;
        }

/* status */
.monitoring-methodology-container .status-section .body .row {
    margin-left: -20px;
    margin-right: -20px;
}

    .monitoring-methodology-container .status-section .body .row > div {
        padding: 13px 20px;
    }

.monitoring-methodology-container .status-section .body .label {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.2;
}

    .monitoring-methodology-container .status-section .body .label > i {
        width: 20px;
        height: 20px;
        padding: 0;
        margin-right: 10px;
    }

/* stages */
.monitoring-methodology-container .stages-section > .title {
    margin-bottom: 60px;
}

.monitoring-methodology-container .stages-wrap {
    width: 100%;
    max-width: 554px;
    margin: 0 auto;
    position: relative;
}

    .monitoring-methodology-container .stages-wrap > img {
        display: block;
        width: 100%;
        border-radius: 50%;
        box-shadow: 50px 50px 99px 0 rgba(0, 0, 0, 0.1);
    }

    .monitoring-methodology-container .stages-wrap > div {
        width: 19.134%;
        position: absolute;
    }

        .monitoring-methodology-container .stages-wrap > div.popover-is-open {
            z-index: 10;
        }

        .monitoring-methodology-container .stages-wrap > div button {
            width: 100%;
            background: none;
            border: 1px solid transparent;
            border-radius: 50%;
            padding: 6.605%;
        }

            .monitoring-methodology-container .stages-wrap > div button i {
                display: block;
                border-radius: 50%;
                position: relative;
            }

                .monitoring-methodology-container .stages-wrap > div button i::before {
                    content: "";
                    display: block;
                    padding-top: 100%;
                }

                .monitoring-methodology-container .stages-wrap > div button i img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                    position: absolute;
                    top: 0;
                    left: 0;
                }


    .monitoring-methodology-container .stages-wrap .stage-popover {
        display: none;
        width: 300px;
        background: #fff;
        box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: 25px 20px;
        position: absolute;
    }

        .monitoring-methodology-container .stages-wrap .stage-popover::before {
            content: "";
            position: absolute;
        }

        .monitoring-methodology-container .stages-wrap .stage-popover .title {
            font-size: 18px;
        }

            .monitoring-methodology-container .stages-wrap .stage-popover .title span {
                font-weight: 300;
            }

            .monitoring-methodology-container .stages-wrap .stage-popover .title::after {
                content: "";
                display: block;
                width: 55px;
                height: 2px;
                margin: 14px 0 10px;
            }

        .monitoring-methodology-container .stages-wrap .stage-popover .text {
            font-size: 12px;
            font-weight: normal;
        }

    .monitoring-methodology-container .stages-wrap > div.stage-1 {
        top: 0;
        left: 50%;
        transform: translate(-50%, -35%);
    }

    .monitoring-methodology-container .stages-wrap .btn-stage-1 i {
        background-color: #0099FF;
    }

    .monitoring-methodology-container .stages-wrap .btn-stage-1:hover,
    .monitoring-methodology-container .stages-wrap .stage-1.popover-is-open .btn-stage-1 {
        border-color: #0099FF;
    }

    .monitoring-methodology-container .stages-wrap .stage-1 .stage-popover .title::after {
        background: #0099FF;
    }

    .monitoring-methodology-container .stages-wrap > div.stage-2 {
        bottom: 0;
        right: 0;
        transform: translate(-15%, -40%);
    }

    .monitoring-methodology-container .stages-wrap .btn-stage-2 i {
        background-color: #F7991C;
    }

    .monitoring-methodology-container .stages-wrap .btn-stage-2:hover,
    .monitoring-methodology-container .stages-wrap .stage-2.popover-is-open .btn-stage-2 {
        border-color: #F7991C;
    }

    .monitoring-methodology-container .stages-wrap .stage-2 .stage-popover .title::after {
        background: #F7991C;
    }

    .monitoring-methodology-container .stages-wrap > div.stage-3 {
        bottom: 0;
        left: 50%;
        transform: translate(-100%, 30%);
    }

    .monitoring-methodology-container .stages-wrap .btn-stage-3 i {
        background-color: #ED3D24;
    }

    .monitoring-methodology-container .stages-wrap .btn-stage-3:hover,
    .monitoring-methodology-container .stages-wrap .stage-3.popover-is-open .btn-stage-3 {
        border-color: #ED3D24;
    }

    .monitoring-methodology-container .stages-wrap .stage-3 .stage-popover .title::after {
        background: #ED3D24;
    }

@media (max-width: 1349px) {
    /* stages */
    .monitoring-methodology-container .stages-wrap .stage-popover {
        margin-top: 30px;
        left: 50%;
        transform: translateX(-50%);
    }

        .monitoring-methodology-container .stages-wrap .stage-popover::before {
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            left: 50%;
            transform: translateX(-50%);
        }

    .monitoring-methodology-container .stages-wrap .stage-1 .stage-popover {
        top: 100%;
        margin-top: 30px;
    }

        .monitoring-methodology-container .stages-wrap .stage-1 .stage-popover::before {
            border-bottom: 24px solid #fff;
            bottom: 100%;
        }

    .monitoring-methodology-container .stages-wrap .stage-2 .stage-popover,
    .monitoring-methodology-container .stages-wrap .stage-3 .stage-popover {
        bottom: 100%;
        margin-bottom: 30px;
    }

        .monitoring-methodology-container .stages-wrap .stage-2 .stage-popover::before,
        .monitoring-methodology-container .stages-wrap .stage-3 .stage-popover::before {
            border-top: 24px solid #fff;
            top: 100%;
        }
}

@media (max-width: 991px) {
    .monitoring-methodology-container .stages-wrap .stage-2 .stage-popover {
        transform: translateX(-85%);
    }

        .monitoring-methodology-container .stages-wrap .stage-2 .stage-popover::before {
            left: 85%;
        }
}


@media (min-width: 768px) {
    .monitoring-methodology-container section .box {
        padding: 26px;
    }

    /* status */
    .monitoring-methodology-container .status-section .body .row {
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    /* stages */
    .monitoring-methodology-container .stages-wrap .stage-popover {
        width: 360px;
        padding: 30px 25px;
    }

        .monitoring-methodology-container .stages-wrap .stage-popover .title {
            font-size: 30px;
        }

            .monitoring-methodology-container .stages-wrap .stage-popover .title::after {
                margin: 24px 0 20px;
            }

        .monitoring-methodology-container .stages-wrap .stage-popover .text {
            font-size: 18px;
        }
}

@media (min-width: 768px) and (max-width: 991px) {
    /* rating */
    .monitoring-methodology-container .ratings-section .body ul {
        display: flex;
        flex-wrap: wrap;
        margin-left: -15px;
        margin-right: -15px;
    }

    .monitoring-methodology-container .ratings-section .body li {
        width: 50%;
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (min-width: 992px) {
    .monitoring-methodology-container section .head {
        display: flex;
        min-height: 65px;
    }

        .monitoring-methodology-container section .head .title {
            font-size: 20px;
            margin: auto;
        }

    .monitoring-methodology-container section .box {
        padding: 38px;
    }

    /* rating */
    .monitoring-methodology-container .ratings-section .body {
        padding-right: 50px;
    }

        .monitoring-methodology-container .ratings-section .body li {
            margin: 38px 0;
        }

            .monitoring-methodology-container .ratings-section .body li > img {
                width: 52px;
            }

            .monitoring-methodology-container .ratings-section .body li > div {
                flex-grow: 1;
                display: flex;
                font-size: 16px;
                margin: auto 0;
            }

                .monitoring-methodology-container .ratings-section .body li > div > strong {
                    flex-shrink: 0;
                    display: flex;
                    align-items: center;
                    width: 180px;
                    height: 52px;
                    border-right: 2px solid #F6F6F6;
                    padding: 0 20px;
                    margin-right: 38px;
                }

    /* status */
    .monitoring-methodology-container .status-section .body .row {
        justify-content: center;
    }

        .monitoring-methodology-container .status-section .body .row > div + div {
            border-left: 2px solid #F6F6F6;
        }

    /* stages */
    .monitoring-methodology-container .stages-wrap .stage-popover {
        width: 360px;
        padding: 25px 20px;
    }

        .monitoring-methodology-container .stages-wrap .stage-popover .title {
            font-size: 24px;
        }

            .monitoring-methodology-container .stages-wrap .stage-popover .title::after {
                margin: 14px 0 10px;
            }

        .monitoring-methodology-container .stages-wrap .stage-popover .text {
            font-size: 16px;
        }
}

@media (min-width: 1350px) {
    .monitoring-methodology-container .status-section .body .label {
        font-size: 20px;
    }

        .monitoring-methodology-container .status-section .body .label > i {
            margin-right: 21px;
        }

    /* stages */
    .monitoring-methodology-container .stages-wrap .stage-popover::before {
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
    }

    .monitoring-methodology-container .stages-wrap .stage-1 .stage-popover {
        top: 7%;
        left: 100%;
        margin-left: 30px;
    }

        .monitoring-methodology-container .stages-wrap .stage-1 .stage-popover::before {
            border-right: 24px solid #fff;
            top: 10%;
            right: 100%;
        }

    .monitoring-methodology-container .stages-wrap .stage-2 .stage-popover {
        bottom: 7%;
        left: 100%;
        margin-left: 30px;
    }

        .monitoring-methodology-container .stages-wrap .stage-2 .stage-popover::before {
            border-right: 24px solid #fff;
            bottom: 10%;
            right: 100%;
        }

    .monitoring-methodology-container .stages-wrap .stage-3 .stage-popover {
        bottom: 7%;
        right: 100%;
        margin-right: 30px;
    }

        .monitoring-methodology-container .stages-wrap .stage-3 .stage-popover::before {
            border-left: 24px solid #fff;
            bottom: 10%;
            left: 100%;
        }
}

@media (min-width: 1650px) {
    /* rating */
    .monitoring-methodology-container .ratings-section .body li > div {
        font-size: 20px;
    }

        .monitoring-methodology-container .ratings-section .body li > div > strong {
            width: 212px;
            height: 52px;
            padding: 0 29px;
        }

    /* status */
    .monitoring-methodology-container .status-section .body .row {
        margin-right: -4%;
        margin-left: -4%;
    }

        .monitoring-methodology-container .status-section .body .row > div {
            padding-left: 4%;
            padding-right: 4%;
        }

    /* stages */
    .monitoring-methodology-container .stages-wrap .stage-popover {
        width: 520px;
        padding: 30px 40px;
    }

        .monitoring-methodology-container .stages-wrap .stage-popover .title {
            font-size: 30px;
        }

            .monitoring-methodology-container .stages-wrap .stage-popover .title::after {
                margin: 24px 0 20px;
            }

        .monitoring-methodology-container .stages-wrap .stage-popover .text {
            font-size: 18px;
        }
}

@media (max-width: 1499px), (max-height: 809px) and (min-width: 1500px) {
    .monitoring-methodology-container {
        padding-top: 20px;
    }
}
/* ---------- /monitoring ---------- */