@font-face {
    font-family: 'RobotoCondensed';
    src: url('assets/fonts/roboto/RobotoCondensed.eot');
    src: local(''), url('assets/fonts/roboto/RobotoCondensed.woff') format('woff'), url('assets/fonts/roboto/RobotoCondensed.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    font-size: 30px;
    line-height: 50px;
    background-color: #fff;
}

nav.navbar {
    box-shadow: none;
    background-color: rgba(19, 21, 21, .8);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

a:hover {
    text-decoration: none;
}

.menu-link {
    font-size: 15px;
    line-height: 20px;
    color: #fff;
    padding-bottom: 26px;
    border-bottom: solid 1px transparent;
    font-weight: bold;
    cursor: pointer;
}

.first-dt-element {
    max-height: 80vh;
}

.menu-link:hover {
    color: #e0e0e0;
    border-bottom: solid 1px #fff;
}

.third-screen {
    background-image: url("assets/img/third-block-bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
}

.first-screen {
    background-image: url("assets/img/top-bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
}

h2 {
    font-family: 'RobotoCondensed', sans-serif;
    font-size: 100px;
    font-weight: 600;
    line-height: 100%;
    margin-bottom: 0;
}

h3 {
    font-family: 'RobotoCondensed', sans-serif;
    font-size: 40px;
    font-weight: 600;
    line-height: 100%;
    margin-bottom: 0;
}

p {
    font-weight: bold;
}

p.bigger {
    font-size: 40px;
}

p.small {
    font-size: 20px;
    line-height: 29px;
}

.left-lined {
    border-left-width: 2px;
    border-left-style: solid;
    border-left-image: linear-gradient(to bottom, #fff, rgba(0, 0, 0, 0)) 1 100%;
    border-right: none;
    padding-left: 15px
}

img {
    max-width: 100%;
}

.row {
    margin-left: 0;
    margin-right: 0;
}

.sx-color {
    color: #2FAC66;
    font-family: 'Montserrat', sans-serif;
}

.ks-color {
    color: #95C11F;
}

.forth-screen {
    background: linear-gradient(0deg, #D7D7D7 0%, #F8F8F8 100%);
}

.fifth-screen {
    background-image: url("assets/img/eukaliptus-bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
}

.sixth-screen {
    background-image: url("assets/img/climat-bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
}

.seventh-screen {
    background-image: url("assets/img/silk-bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
}

.nineth-screen {
    background-image: url("assets/img/experts-bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
}

.eighth-screen {
    background-image: url("assets/img/eco-bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100vh;
}

.tenth-screen {
    min-height: 100vh;
    background: #000;
}

.gradient {
    max-width: 340px;
    width: 50%;
    background: linear-gradient(to right, #ffffff, transparent) 47% 0;
    height: 2px;
    float: left;
}

.gradient-black {
    max-width: 340px;
    width: 50%;
    background: linear-gradient(to right, #9c9c9c, transparent) 47% 0;
    height: 2px;
    float: left;
}

.scroll-text-wrappper {
    overflow: auto;
}

.flag {
    margin-right: 20px;
}

.flag img {
    opacity: 0.5;
    transition: 0.3s;
}

.flag img:hover {
    opacity: 1;
}

.flag.active img {
    opacity: 1;
}

.green-circle {
    background-image: url("assets/img/circle.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.carousel .carousel-indicators li {
    width: 50px;
    height: 2px;
    border-radius: 0;

}

.carousel .carousel-indicators li.active {
    height: 7px;
    margin-top: -5px;
}

.carousel .carousel-control-next-icon, .carousel .carousel-control-prev-icon {
    width: 76px;
    height: 76px;
}

.first-slide {
    background-image: url("assets/img/davidov.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    height: 100vh;
}

.second-slide {
    background-image: url("assets/img/shustov.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    height: 100vh;
}

.expert-text {
    border-radius: 20px;
    background: rgba(34, 34, 34, 0.8) url("assets/img/quotes.png") no-repeat 10% 10%;
}

.expert-name {
    background: rgba(34, 34, 34, 0.8);
    border-radius: 20px;
    position: absolute;
    bottom: 10%;
}

.expert-name p {
    font-size: 14px;
    line-height: 20px;
}

h2.product-block-title {
    font-size: 60px;
    line-height: 60px;
    color: #000;
}

.product-block-title span {
    font-weight: bold;
}

.product-title {
    font-family: Montserrat, sans-serif;
    font-size: 40px;
    line-height: 50px;
    color: #000;
    display: block;
    font-weight: bold;
}

.product-title .category {
    font-size: 16px;
    line-height: 20px;
    font-weight: normal;
}

.eleventh-screen {
    background-color: #fff;
    min-height: 100vh;
}

.product-button {
    background: #fff;
    color: #907C4B;
    border: 1px solid #907C4B;
    padding: 18px 37px;
    font-size: 16px;
    line-height: 20px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.05em;
    margin-top: 20px;
    display: inline-block;
}

.product-button:hover {
    background: #907C4B;
    color: #fff
}

.navbar-nav {
    flex-direction: row;
}

ul.navbar-nav li:not(:first-child) {
    margin-left: 60px;
}

ul.navbar-nav li:first-child {
    margin-left: 0;
}

ul.navbar-nav li.dropdown:hover .dropdown-menu {
    display: block;
}

.navbar-nav .dropdown-menu {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 0;
}

.navbar-nav .dropdown-menu a {
    color: #fff;
}

a.dropdown-item:hover {
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: none;
}

.social-wrapper {
    display: flex;
    align-items: flex-end;
    flex-direction: column-reverse;
}

.social-icons img {
    margin-right: 50px;
}

.social-icons-footer a:not(:last-child) {
    padding-right: 50px
}

#spoiler1, #spoiler2 {
    color: #95C11F !important;
    border-bottom: 2px dotted;
}

p .expert-text {
    float: left;
}

@media screen and (min-width: 768px) {
    .flags-wrapper {
        position: fixed;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
    }
}

@media screen and (min-width: 768px) and (max-width: 1140px) {
    .flag img {
        width: 20px;
    }

    .flag {
        margin-right: 10px;
    }
}

@media screen and (max-width: 767px) {
    .navbar-nav {
        flex-direction: column;
    }

    ul.navbar-nav li.nav-item {
        margin-left: 0;
        margin-bottom: 15px;
    }

    .menu-link {
        padding-bottom: 0;
    }

    .navbar-toggler {
        position: absolute;
        right: 0;
        top: 10%;
    }

    div.navbar-collapse {
        flex-direction: column-reverse;
        padding-top: 20px;
    }

    .social-icons img {
        margin-right: 10px;
    }

    .social-icons-footer a:not(:last-child) {
        padding-right: 10px
    }

    .sixth-screen {
        background-image: url("assets/img/climat-bg-m.jpg") !important;
    }

    .seventh-screen {
        background-image: url("assets/img/silk-bg-m.jpg") !important;
    }

    .eighth-screen {
        background-image: url("assets/img/eco-bg-m.jpg") !important;
    }

    .third-screen,
    .forth-screen,
    .fifth-screen,
    .sixth-screen,
    .seventh-screen,
    .eighth-screen,
    .nineth-screen,
    .eleventh-screen {
        min-height: 100vh;
        height: auto;
        padding-bottom: 3rem;
    }

    .eleventh-screen {
        padding-bottom: 0 !important
    }

    .carousel .carousel-control-next-icon, .carousel .carousel-control-prev-icon {
        width: 32px;
        height: 32px;
    }

    nav.navbar {
        background: #000;
    }

    h2 {
        line-height: 40px !important;
    }
}

@media screen and (min-width: 768px) {
    .third-screen, .fifth-screen, .sixth-screen, .seventh-screen, .eighth-screen, .nineth-screen, .eleventh-screen {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }

    .eleventh-screen {
        padding-bottom: 3rem !important
    }

    .social-wrapper {
        position: absolute;
        bottom: 10px;
    }

    nav.navbar {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .menu-link {
        font-size: 9px;

    }

    ul.navbar-nav li:not(:first-child) {
        margin-left: 10px;
    }

    .expert-text p {
        font-size: 14px;
        line-height: 20px;
    }

    h3 {
        font-size: 36px;
        line-height: 36px;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1280px) {
    .menu-link {
        font-size: 13px;

    }

    ul.navbar-nav li:not(:first-child) {
        margin-left: 10px;
    }
}

@media screen and (min-width: 1281px) and (max-width: 1437px) {
    .menu-link {
        font-size: 14px;
    }

    ul.navbar-nav li:not(:first-child) {
        margin-left: 20px;
    }
}

@media screen and (min-width: 1438px) and (max-width: 1570px) {
    ul.navbar-nav li:not(:first-child) {
        margin-left: 40px;
    }
}

@media screen and (min-width: 1650px) {
    .togas-logo {
        padding-left: 3rem
    }
}

button.navbar-toggler {
    float: right
}

.fa-bars.menu {
    color: #fff;
    position: absolute;
    right: 5px;
    font-size: 30px;
}

@media screen and (max-width: 1919px) {
    p.bigger {
        font-size: 25px;
    }

    body {
        font-size: 20px;
        line-height: 35px;
    }

    .product-title {
        font-size: 36px;
        line-height: 40px;
    }

    .product-title .category {
        font-size: 16px;
        line-height: 24px;
    }

    h2 {
        font-size: 80px;
        line-height: 100px;
    }
}

@media screen and (max-width: 1668px) {
    .product-title {
        font-size: 24px;
        line-height: 32px;
    }

    .product-title .category {
        font-size: 14px;
        line-height: 22px;
    }
}

@media screen and (max-width: 1448px) {
    .gradient-black {
        width: 70%;
    }

    .product-title {
        font-size: 20px;
        line-height: 24px;
    }

    .product-title .category {
        font-size: 12px;
        line-height: 20px;
    }

    .product-button {
        padding: 10px 27px;
        font-size: 12px;
        line-height: 16px;
    }
}

@media screen and (max-width: 991px) {
    h2 {
        font-size: 40px;
    }

    h3 {
        font-size: 24px;
        line-height: 24px;
    }

    p.bigger {
        font-size: 22px;
        line-height: 33px;
    }

    body {
        font-size: 20px;
        line-height: 30px;
    }

    p.small {
        font-size: 14px;
        line-height: 20px;
    }

    .green-circle {
        background-size: contain;
    }

    .first-slide, .second-slide {
        background-size: contain;
        background-position: top;
    }

    .third-screen {
        background-image: url("assets/img/third-block-bg-m.jpg") !important;
    }

    hr.gradient {
        margin-top: 0;
        height: 1px;
    }

    .expert-name p {
        font-size: 12px;
        line-height: 20px;
    }

    .expert-name {
        background-image: url("assets/img/quotes.png");
        background-position: 10% 50%;
        background-repeat: no-repeat;
        background-size: 30%;
    }

    .tenth-screen, .first-slide, .second-slide {
        height: 100vh;
        min-height: 667px
    }

    .spoiler1-hidden, .spoiler2-hidden {
        display: none;
    }

    h2.product-block-title {
        font-size: 40px;
        line-height: 40px;
        color: #000;
    }

    .gradient-black {
        width: 100%;
    }

}

@media screen and (max-width: 375px) {
    h2, h2.product-block-title {
        font-size: 36px;
    }
}

#scroll-text::-webkit-scrollbar {
    width: 12px;
}

#scroll-text::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}

#scroll-text::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.5);
}

.footer-line-right {
    width: 100%;
    background: linear-gradient(to right, #9c9c9c, transparent) 47% 0;
    height: 2px;
    float: right;
    opacity: 0.1;
}

.footer-line-left {
    width: 100%;
    background: linear-gradient(to left, #9c9c9c, transparent) 47% 0;
    height: 2px;
    float: left;
    opacity: 0.1;
}

.footer-link {
    font-size: 18px;
    line-height: 22px;
    color: #2B3031 !important;
    font-weight: bold;
    border-bottom: 2px dotted #2B3031;
}

.bottom-block {
    background-color: #131515;
    font-size: 11px;
    line-height: 13px;
}

#up-link {
    color: #2B3031 !important;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    line-height: 17px;
}

#up-link .fa-chevron-up {
    border: 1px solid #D5D6D6;
    border-radius: 50%;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

#up-link .fa-chevron-up:hover {
    background-color: #D5D6D6;
    color: #fff !important;
}

.footer-icon {
    border: 1px solid #D5D6D6;
    border-radius: 50%;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.footer-icon:hover {
    background-color: #D5D6D6;
}

.top-icon {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    box-sizing: border-box;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.top-icon:hover {
    border: 1px solid #D5D6D6;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

@media screen and (min-width: 1230px) and (max-width: 1400px) {
    .quote-block p {
        font-size: 17px;
        line-height: 30px;
    }
}

@media screen and (min-width: 1630px) {
    .col-xxl-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
        position: relative;
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
    }
}

@media screen and (min-width: 1921px) {
    .quote-block {
        position: absolute;
        right: 7.9%;
    }

    .professor-block {
        position: absolute;
        left: 8.4%;
    }
}

@media screen and (max-width: 1920px) and (min-width: 1740px) {
    .quote-block {
        position: absolute;
        right: 8%;
    }

    .professor-block {
        position: absolute;
        left: 8.8%;
    }
}

@media screen and (max-width: 1739px) and (min-width: 1550px) {
    .quote-block {
        position: absolute;
        right: 8.1%;
    }

    .professor-block {
        position: absolute;
        left: 9%;
    }
}

@media screen and (max-width: 1549px) and (min-width: 1440px) {
    .quote-block {
        position: absolute;
        right: 8.1%;
    }

    .professor-block {
        position: absolute;
        left: 9.2%;
    }
}

@media screen and (max-width: 1439px) and (min-width: 1330px) {
    .quote-block {
        position: absolute;
        right: 8.3%;
    }

    .professor-block {
        position: absolute;
        left: 9.3%;
    }
}

@media screen and (max-width: 1329px) and (min-width: 1230px) {
    .quote-block {
        position: absolute;
        right: 8.3%;
    }

    .professor-block {
        position: absolute;
        left: 9.5%;
    }
}

@media screen and (max-width: 1229px) and (min-width: 992px) {
    .quote-block {
        position: absolute;
        right: 8.6%;
    }

    .professor-block {
        position: absolute;
        left: 10%;
    }

    .quote-block p {
        font-size: 13px;
        line-height: 21px;
    }
}