/*!
Theme Name: konighirsch
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: konighirsch
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

konighirsch is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
body {
    font-family: 'Montserrat';
    font-weight: 300;
    background-color: #000;
    color: #fff;
}

.block_1 {
    min-height: 100vh;
    background-image: url(img/bg_1.jpg);
    background-size: cover;
    background-position: center right;
}

.fw-bold-900 {
    font-weight: 900;
}

.y_color {
    color: #e6b332;
}

.g_color {
    color: #096b30;
}

.fw-bold-500 {
    font-weight: 500;
}

.bg_slider {
    background-color: #333;
}

.swiper-button-next,
.swiper-button-prev {
    background-color: white;
    background-color: rgba(255, 255, 255, 0.5);
    right: 10px;
    padding: 30px;
    color: #000 !important;
    fill: black !important;
    stroke: black !important;
}

.swiper-pagination-bullet-active {
    background: #096b30;
}

.block_6 {
    min-height: 500px;
}

/* BURGER ==================================== */
.burger {
    width: 50px;
    height: 50px;
    position: fixed;
    top: 20px;
    right: 20px;
    border-radius: 6px;
    z-index: 10;
    background-color: #106c30;
}

.burger span {
    position: relative;
    margin-top: 9px;
    margin-bottom: 9px;
    -webkit-user-select: none;
    user-select: none;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -15px;
    margin-top: -1.5px;
}

.burger span,
.burger span::before,
.burger span::after {
    display: block;
    width: 30px;
    height: 3px;
    background-color: #e7b332;
    outline: 1px solid transparent;
    -webkit-transition-property: background-color, -webkit-transform;
    -moz-transition-property: background-color, -moz-transform;
    transition-property: background-color, transform;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.burger span::before,
.burger span::after {
    position: absolute;
    content: "";
}

.burger span::before {
    top: -9px;
}

.burger span::after {
    top: 9px;
}

.burger.clicked span {
    background-color: transparent;
}

.burger.clicked span::before {
    -webkit-transform: translateY(9px) rotate(45deg);
    -moz-transform: translateY(9px) rotate(45deg);
    -ms-transform: translateY(9px) rotate(45deg);
    -o-transform: translateY(9px) rotate(45deg);
    transform: translateY(9px) rotate(45deg);
}

.burger.clicked span::after {
    -webkit-transform: translateY(-9px) rotate(-45deg);
    -moz-transform: translateY(-9px) rotate(-45deg);
    -ms-transform: translateY(-9px) rotate(-45deg);
    -o-transform: translateY(-9px) rotate(-45deg);
    transform: translateY(-9px) rotate(-45deg);
}

.burger.clicked span:before,
.burger.clicked span:after {
    background-color: #ffffff;
}

.burger:hover {
    cursor: pointer;
}

/* NAV ========================================= */
nav {
    background-color: #106c30;
    position: fixed;
    z-index: 9;
    top: 0;
    right: 0;
    height: 100%;
    max-width: 300px;
    width: 100%;
    padding: 80px 30px 50px 20px;
    overflow-y: auto;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -moz-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

nav.show {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
}

nav.show ul.main li {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1;
}

nav.show ul.main li:nth-child(1) {
    transition-delay: 0.15s;
}

nav.show ul.main li:nth-child(2) {
    transition-delay: 0.3s;
}

nav.show ul.main li:nth-child(3) {
    transition-delay: 0.45s;
}

nav.show ul.main li:nth-child(4) {
    transition-delay: 0.6s;
}

nav.show ul.main li:nth-child(5) {
    transition-delay: 0.75s;
}

nav.show ul.main li:nth-child(6) {
    transition-delay: 0.85s;
}

nav ul.main {
    list-style-type: none;
}

nav ul.main li {
    margin-bottom: 20px;
    -webkit-transform: translateX(40px);
    -moz-transform: translateX(40px);
    -ms-transform: translateX(40px);
    -o-transform: translateX(40px);
    transform: translateX(40px);
    opacity: 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

nav ul.main li:last-of-type {
    margin-bottom: 0px;
}

nav ul.main li a {
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 17px;
    display: block;
    letter-spacing: 5px;
    font-weight: 600;
    padding: 10px 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

nav ul.main li a span {
    color: #b7ac7f;
}

/* Déplacement droite au passage de la souris */
nav ul.main li a:hover {
    margin-left: 20px;
}

/* Filet rouge au passage de la souris */
nav a::before {
    content: "";
    position: absolute;
    opacity: 0;
    left: -5px;
    top: 45%;
    height: 4px;
    width: 15px;
    background: #e6b332;
    transition: all .3s;
}

nav a:hover::before {
    left: 0px;
    opacity: 1;
}

/* OVERLAY ========================================== */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #6C858D;
    opacity: 0;
    visibility: hidden;
}

.overlay.show {
    opacity: 0.5;
    visibility: visible;
}

/* MEDIA QUERIES */

/* xl-размер (<=1399px) */
@media (max-width: 1399px) {
    /* Можно добавить стили при необходимости */
}

/* lg-размер (<=1199px) */
@media (max-width: 1199px) {
    nav {
        max-width: 280px;
        padding: 80px 25px 50px 15px;
    }
    
    nav ul.main li a {
        font-size: 16px;
        letter-spacing: 4px;
    }
    
    .block_1 {
        background-position: center center;
    }
}

/* md-размер (<=991px) */
@media (max-width: 991px) {
    nav {
        max-width: 250px;
        padding: 70px 20px 40px 15px;
    }
    
    nav ul.main li a {
        font-size: 15px;
        letter-spacing: 3px;
    }
    
    nav ul.main li {
        margin-bottom: 15px;
    }
    
    .burger {
        width: 45px;
        height: 45px;
        top: 15px;
        right: 15px;
    }
    
    .burger span,
    .burger span::before,
    .burger span::after {
        width: 25px;
        height: 2.5px;
    }
    
    .burger span::before {
        top: -8px;
    }
    
    .burger span::after {
        top: 8px;
    }
    
    .block_6 {
        min-height: 400px;
    }
}

/* sm-размер (<=768px) */
@media (max-width: 767px) {
    nav {
        max-width: 100%;
        padding: 80px 30px 50px 30px;
    }
    
    nav ul.main li a {
        font-size: 16px;
        text-align: center;
        letter-spacing: 2px;
        padding: 12px 0;
    }
    
    nav ul.main li {
        margin-bottom: 10px;
    }
    
    /* Убираем смещение при hover на мобильных */
    nav ul.main li a:hover {
        margin-left: 0;
    }
    
    /* Убираем или изменяем псевдоэлементы на мобильных */
    nav a::before {
        display: none;
    }
    
    .burger {
        width: 40px;
        height: 40px;
        top: 10px;
        right: 10px;
    }
    
    .burger span {
        margin-left: -12.5px;
    }
    
    .burger span,
    .burger span::before,
    .burger span::after {
        width: 25px;
        height: 2px;
    }
    
    .block_1 .fs-4 {
        font-size: 1rem!important;
    }
    
    .block_6 {
        min-height: 300px;
    }
    
    .swiper-button-next,
    .swiper-button-prev {
        padding: 20px;
        transform: scale(0.8);
    }
}

/* xs-размер (<=575px) */
@media (max-width: 575px) {
    nav {
        padding: 70px 20px 40px 20px;
    }
    
    nav ul.main li a {
        font-size: 14px;
        letter-spacing: 1px;
        padding: 10px 0;
    }
    
    .burger {
        width: 35px;
        height: 35px;
        top: 10px;
        right: 10px;
    }
    
    .burger span {
        margin-left: -10px;
        margin-top: -1px;
    }
    
    .burger span,
    .burger span::before,
    .burger span::after {
        width: 20px;
        height: 2px;
    }
    
    .burger span::before {
        top: -6px;
    }
    
    .burger span::after {
        top: 6px;
    }
    
    .burger.clicked span::before {
        -webkit-transform: translateY(6px) rotate(45deg);
        transform: translateY(6px) rotate(45deg);
    }
    
    .burger.clicked span::after {
        -webkit-transform: translateY(-6px) rotate(-45deg);
        transform: translateY(-6px) rotate(-45deg);
    }
    
    .block_6 {
        min-height: 250px;
    }
    
    .swiper-button-next,
    .swiper-button-prev {
        padding: 15px;
        transform: scale(0.7);
    }
}

/* Дополнительные очень маленькие экраны (<=375px) */
@media (max-width: 375px) {
    nav {
        padding: 60px 15px 30px 15px;
    }
    
    nav ul.main li a {
        font-size: 13px;
        letter-spacing: 0.5px;
    }
    
    .burger {
        width: 32px;
        height: 32px;
    }
}