:root {
	--index_size: calc(1vw + 1vh);
}

/*************************Базовые стили**********************/
@font-face {/*подключаем нестандартые шрифты*/
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Light.ttf');
}
body {
    font-family: Montserrat, Arial, sans-serif;
}

/***********************************************************/

/*************************МЕНЮ**********************/

/*кнопка меню*/
.burger-menu_button {
    position: fixed;/*фиксируем кнопку на месте*/
    /* top:  17vh; */
    top:  calc(var(--index_size) * 0.5);
    left: calc(var(--index_size) * 0.5);
    z-index: 2000;
    width: calc(var(--index_size) * 2);
    height: calc(var(--index_size) * 2);
    /* border-radius: 50%; */
    /*background-color: #fff;*/
    /* transition: 0.4s; */
    transition: 1s;
}
.burger-menu_button:hover .burger-menu_lines { /* эффект при наведении на кнопку для линий */
    filter: brightness(0.9);
}

/*линии кнопки меню*/
.burger-menu_lines,/*спам, центральная линия*/
.burger-menu_lines::after,/*псевдо элемент спама (его копия)*/
.burger-menu_lines::before {/*псевдо элемент спама (его копия)*/
    position: absolute;
    width: 3.5vh;;/*ширина линий*/
    height: 0.2vh;;/*высота линий*/
    /*background-color: rgba(37, 37, 37, 0.8);/*цвет линий серый*/
    background-color: rgba(255, 255, 255);/*цвет линий серый*/
    /**background-color: #ffffff;/*цвет линий бнлый*/
    border-radius: 0.5vh;/* сглаживание углов у палочек кнопки */
}

.burger-menu_lines {/*размещаем спам линий в нутри кнопки*/
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 1s;/*скорость при анимации*/
}

.burger-menu_lines::before {/*размещаем спам линий в нутри кнопки*/
    content: '';/*переменная содержащая, в нашем случае, координаты спама(центральной линии)*/
    top: -1vh;;/*выше центральной линии на 12px*/
    transition: 1s;
}

.burger-menu_lines::after {/*размещаем спам линий в нутри кнопки*/
    content: '';
    top: 1vh;;/*ниже центральной линии на 12px*/
    transition: 1s;
}

.burger-menu_active .burger-menu_button,
.burger-menu_active .burger-menu_lines{
    background-color: transparent;
}

.burger-menu_active .burger-menu_lines::before {
    top: 0;
    transform: rotate(45deg);/*поворот линий*/
    filter: brightness(-3);/*тон линий*/

    transition: 1s;

}

.burger-menu_active .burger-menu_lines::after {
    top: 0;
    transform: rotate(-45deg);
    filter: brightness(3);
    transition: 1s;
}

.burger-menu_nav {/*блок всего текста в меню*/
    /*padding-top: 15vw;*/
    padding-top: calc(var(--index_size) * 5);
    padding-left: 3%;
    padding-right: 3%;
    position: fixed;
    z-index: 20;
    display: flex;
    flex-flow: column;
    height: 100%;
    background-color: rgba(90, 90, 90, 0.9);
    overflow-y: auto;
    left: -100%;
    transition: 1s;

    position: fixed;/*!!!!!!!!!!!!!!!!*/
    top:0; /*!!!!!!!!!!!!!!!!*/
}

.burger-menu_active .burger-menu_nav {
    left: 0;
}

.burger-menu_link { /*строки текста в меню*/
    padding: 1vh;
    font-family: Montserrat, Arial, sans-serif;/*шрифт*/
    /* font-weight: 300; */
    text-transform: uppercase;/*все буквы станут заглавными*/
    font-size: calc(var(--index_size)* 0.7);
    text-decoration: none;/*убрать подчеркивание ссылки*/
    text-transform: uppercase;
    letter-spacing: 5px;
    color: #fff;
    transition: 0.5s;
}


.burger-menu_link:hover,
.box_ico a:hover {
    transition: 0.5s;
    filter: brightness(0.7);
}

/**НЕ ВИДИМЫЙ БЛОК закрывающий весь экран кроме активного меню**/
.burger-menu_overlay {/**на этот болк наводится через мыш через JS для закрытия меню по клику в любое место экрана и строк меню**/
    display: none;/*по умолчанию этот блок скрыт от мыши*/
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
    width: 100%;
    height: 100%;
}
/*Если блок меню имеет класс "burger-menu_active" значит Меню активно(открыто) тк у запрытого меню класс "burger-menu". Переименовывает этот класс JS*/
/*то тогда существует селектор: ".burger-menu_active .burger-menu_overlay"*/
/*и тогда делаем невидимый блок "burger-menu_overlay" видимым для мыши: */
.burger-menu_active .burger-menu_overlay {
    display: block;/*делаем невидимый блок  видимым для мыши*/
    /* background-color: rgba(255, 203, 91, 0.2); */
}

.box_ico.PC,
.box_ico.MOBILE{/*сначала скроем оба блока*/
    display: none;/*скрыть блок*/
}
.box_ico.PC.active,
.box_ico.MOBILE.active{/*теперь откроем тот блок которому JS добавил класс active*/
	display: block; /* показать блок */
}


.box_ico a{
	text-decoration: none; /* Отменяем подчёркивание у ссылки */
}
.box_ico a img{
    opacity: 0.8;
    margin-left: 3vh;
	height: 3vh;
	width: auto;
	transition: 1s all;	
}
/***********************************************************/




/*******************************************    mobile    *************************************************************/

@media (max-width: 1000px) {
   
    /*кнопка меню*/
    .burger-menu_button {
        top:  calc(var(--index_size) * 0.8);
        left: calc(var(--index_size) * 1);
    }
    .burger-menu_nav {/*блок всего текст в меню*/
        /*padding-top: 45vw;*/
        padding-top: calc(var(--index_size) * 10);
    }
    /*линии кнопки меню*/

    .burger-menu_link { /*строки текста в меню*/
        font-size: calc(var(--index_size) * 1.2);
        display: inline-block; /* Позволяет тулбару быть шире контейнера */
    }

    
}