@font-face { src: url("../fonts/ProximaNova-Regular.woff2") format("woff2"); font-family: "Proxima nova"; font-weight: 400; font-style: normal; }
@font-face { src: url("../fonts/ProximaNova-Semibold.woff2") format("woff2"); font-family: "Proxima nova"; font-weight: 600; font-style: normal; }
@font-face { src: url("../fonts/ProximaNova-Bold.woff2") format("woff2"); font-family: "Proxima nova"; font-weight: 700; font-style: normal; }

:root{
	--accent: #0E65F3;
	--btn-bg: #DEE8F1;
	--bg: #F1F2F6;
	--fz: 16px;
	--font: 'Proxima nova', Arial, sans-Serif;
	--systemfont: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}
p{
	margin: 0;
	padding: 0;
}
body{
	font-family: var(--font);
	
	background: var(--bg);
	line-height: 1.2;
}
h1{
	font-size: 42px;
}
h1,h2,h3,h4{
	font-weight: 600;
}
a, a:hover, a:visited{
	color: #000;
	text-decoration: none;
}
ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

/* main styles */

.container{
	width: 1160px;
	margin: 0 auto;
}

.breadcrumbs{
	margin-top: 120px;
	margin-bottom: 15px;
}
.breadcrumbs__list{
	display: flex;
}
.breadcrumbs__item, .breadcrumbs__item a{
	margin-right: 10px;
	color: #9e9e9e;
	display: flex;
	align-items: center;
	transition: opacity 0.25s ease-out;
}
.breadcrumbs__span{
	width: 14px;
	margin-left: 10px;
	height: 15px;
	display: block;
	background: url('../img/arrow-breadcrumb.svg') no-repeat;
	background-size: contain;
}
.breadcrumbs__item a:hover{
	opacity: 0.7;
}

.categories{
	display: flex;
	align-items: center;
}
.categories__btn{
	padding: 6px 18px;
	background: var(--btn-bg);
	border: none;
	margin-right: 10px;
	border-radius: 40px;
	line-height: 1.35;
	transition: background 0.25s ease-out;
}
.categories__btn:hover{
	background: var(--bg);
}
.categories__btn.active{
	background: var(--accent);
	color: #fff;
	transition: background 0.25s ease-out;
}
.categories__btn.active:hover{
	background: rgba(14, 101, 243,.9);
}

.col-3{
	width: calc(100%/4);
}

.logo img{
	width: 140px;
	height: 34px;
}

.go-top{
	width: 40px;
	height: 40px;
	background: #fff;
	border-radius: 20px;
	position: fixed;
	bottom: 30px;
	left: 20px;
	z-index: 1000;
	box-shadow: 0 0 5px 0 rgba(0,0,0,.25);
	background: url('../img/go-top.svg') no-repeat center, #fff;
	opacity: 0;
	transition: opacity 0.4s ease-out;
	cursor: pointer;
}
.go-top.show{
	opacity: 1;
}

/* header */

.header{
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	background: #fff;
	z-index: 777;
	padding: 13px 0;
	font-size: 16px;
}
.header .container{
	width: 1280px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.header__logo{
	position: relative;
	z-index: 1000;
	height: fit-content;
}
.header__nav{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 900px;
}
.header__menu{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 40px;
}
.header__item{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	position: relative;
	padding: 10px 0;
} 
.header__item:not(:last-of-type){
	margin-right: 20px;
}
.header__link{
	transition: color 0.25s ease-out;
	display: flex;
	align-items: center;
}
.header__link:hover, .footer__item:hover a{
	color: var(--accent);
}
.header__link_select::after{
	content: '';
	background: url('../img/arrow-down.svg') no-repeat center;
	width: 8px;
	height: 6px;
	display: block;
	margin-left: 5px;
}
.header__dropdown{
	position: absolute;
	z-index: 1;
	background: #fff;
	border-radius: 5px;
	padding: 16px;
	opacity: 0;
	top: 40px;
	left: -10px;
	transition: opacity 0.05s ease-out;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
}
.header__dropdown.active{
	opacity: 1;
}
.header-drop__list{
	opacity: 0;
	transition: opacity 0.15s ease-out 0.1s;
}
.header__dropdown.active .header-drop__list{
	opacity: 1;
}
.header-drop__item:not(:last-of-type){
	margin-bottom: 20px;
}
a.header-drop__link{
	transition: color 0.25s ease-out;
	display: block;
	width: max-content;
}
.header-drop__item.active a{
	color: var(--accent);
}
a.header-drop__link:hover{
	color: var(--accent);
}

.header__phone{
	font-weight: 600;
	display: flex;
	align-items: center;
}
.header__phone::before{
	content: '';
	background: url('../img/phone.svg') no-repeat center;
	width: 18px;
	height: 22px;
	display: block;
	margin-right: 5px;
}
.header__tel{
	display: flex;
	align-items: center;
	height: fit-content;
	padding: 5px 25px;
	border-right: 2px solid #E4E4E4;
	border-left: 2px solid #E4E4E4;
}
.header__profile{
	display: flex;
	align-items: center;
	font-weight: 600;
}
a.header__reg{
	display: block;
	padding: 15px 25px;
	border-radius: 10px;
	background: var(--btn-bg);
	color: var(--accent);
	margin-left: 35px;
	transition: background 0.25s ease-out;
}
a.header__reg:hover{
	background: #F1F2F6;
}
.header__login{
	transition: opacity 0.25s ease-out;
}
.header__login:hover{
	opacity: 0.8;
}

.header__mobile{
	display: none;
}
.header__menu_mobile{
	position: fixed;
	background: #fff;
	width: 100vw;
	overflow-y: scroll;
	top: 0;
	left: 0;
	z-index: 555;
	display: flex;
	padding-top: 60px;
	padding-bottom: 50px;
	flex-direction: column;
	align-items: center;
	transition: transform 0.4s ease-out;
	transform: translate(0,-200vh);
}
.header-mob .header__item {
	padding: 8px 0;
}
.header__menu_mobile .header__link{
	margin: 0 auto;
	font-weight: 600;
}
.header__menu_mobile .header__link.active{
	color: var(--accent);
	font-weight: 600;
}
a.header-mob__link{
	font-size: 26px;
	font-weight: 700;
	color: var(--accent);
	text-transform: uppercase;
}
a.header-mob__link_callback{
	font-size: 20px;
	margin-top: 30px;
	font-weight: 600;
	text-transform: none;
}
.header-mob__link_login{
	margin-bottom: 5px;
}
.header-mob__w{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 60px;
}
.header-mob__w .footer__static{
	margin-top: 5px;
}
.header-mob__soc{
	margin-top: 20px;
	display: flex;
	width: 110px;
	justify-content: space-between;
}

.fb, .tg, .whatsapp{
	width: 30px;
	height: 30px;
	background-size: cover;
}
.fb{
	background: url('../img/facebook.svg') no-repeat;
}
.tg{
	background: url('../img/tg.svg') no-repeat;
}
.whatsapp{
	background: url('../img/whatsapp-accent.svg') no-repeat;
}


.burger {
	margin: auto;
	display: grid;
	place-items: center;
	height: 55px;
	width: 55px;
	cursor: pointer;
	overflow:hidden;
	position: relative;
	z-index: 1000;
	transform: scale(.6);
}
.burger span {
	width: 40px;
	height: 3px;
	display: block;
	background-color: var(--accent);
	transition: all 0.3s ease-in-out;
	justify-self: end;
}
.burger span:nth-child(1) {
	width: 40px;
}
.burger span:nth-child(2) {
	width: 40px;
}
.burger:hover span:nth-child(1) {
	width: 40px;
}
.burger:hover span:nth-child(2) {
	width: 40px;
}
.burger.active span:nth-child(1) {
	transform-origin: center center;
	transform: rotate(-45deg) translate(-20%, 500%);
	width: 55px;
}
.burger.active span:nth-child(2) {
	transform: translateX(40px);
}
.burger.active span:nth-child(3) {
	transform-origin: center center;
	transform: rotate(45deg) translate(-20%, -500%);
	width: 55px;
}

/* footer */

.footer{
	padding: 40px 0 60px;
}
.footer .container{
	display: flex;
	justify-content: space-between;
	font-size: 14px;
}
.footer .col-3{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.footer__logo img{
	width: 120px;
	height: 30px;
}
.footer__decode{
	margin-top: 10px;
	max-width: 160px;
}
.footer__static{
	margin-top: 30px;
}
.footer__contacts{
	margin-top: auto;
	display: flex;
	font-size: 16px;
	margin-top: 40px;
	flex-direction: column;
}
.footer__departament{
	margin-bottom: 10px;
}
.footer__cont-link{
	font-size: 20px;
	line-height: 1.25;
	font-weight: 600;
}
.footer__title{
	font-size: 22px;
	margin-bottom: 20px;
}
.footer__item{
	margin-bottom: 15px;
	font-size: 16px;
}
.footer__cards img{
	margin-right: 20px;
}
.footer-mobile{
	width: 100%;
	display: none;
}
.footer-mobile__acc {
	padding: 20px 0;
	font-size: 16px;
	border-bottom: 1px solid var(--btn-bg);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.footer-mobile__open {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}
.footer-mobile__open .footer__item{
	margin-top: 20px;
}
.footer-mobile__open a.footer__link{
	color: var(--accent);
}
.footer-mobile__text-w{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.footer-mobile .footer__departament{
	margin-top: 30px;
}
.footer-mobile__logo{
	margin-top: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.footer-mobile__logo .footer__decode{
	max-width: 100%;
	margin-top: 12px;
}
.footer-mobile__span{
	display: block;
	width: 18px;
	height: 9px;
	background: url('../img/arrow-down.svg') no-repeat;
	background-size: cover;
	transform: rotate(0deg);
	transition: transform 0.25s ease-out;
}
.footer-mobile__acc.active .footer-mobile__span{
	transform: rotate(540deg);
}



/* Модальные окна */
.cont{
	width: 560px;
	margin: 0 auto;
}

.login, .registration{
	display: none;
}
.login, .registration{
	height: 100vh;
	width: 100vw;
	position: fixed;
	top: 0;
	left: 0;
	background: var(--bg);
	z-index: 10000;
	/* overflow: hidden; */
}
.login__over, .registration__over{
	margin-top: 40px;
	margin-bottom: 40px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}
.registration__over{
	margin-bottom: 60px;
}
.login__logo img, .registration__logo img{
	width: 120px;
	height: 29px;
}
.login__text, .registration__text{
	display: flex;
	align-items: center;
}
.login__text p, .registration__text p{
	opacity: 0.8;
	margin-right: 10px;
}
.login__link, .registration__link, a.registration__link{
	border: none;
	background: transparent;
	color: var(--accent);
	text-decoration: underline;
	padding: 0;
}
.login__card, .registration__card{
	padding: 55px 50px 65px 50px;
	border: 2px solid #ECECEC;
	box-shadow: 0px 17px 76px rgb(0 0 0 / 5%);
	border-radius: 15px;
	background: #fff;
	text-align: center;
}
.login__title{
	font-size: 60px;
}
.registration__title{
	font-size: 45px;
}
.login__subtitle, .registration__subtitle{
	font-size: 21px;
	font-weight: 400;
	margin-bottom: 40px;
}
.login__input, .registration__input{
	width: 100%;
	padding: 15px 50px 15px 15px;
	border-radius: 5px;
	color: var(--accent);
	border: 1px solid ;
	border: 1px solid #656D7E;
	margin-bottom: 15px;
}
.login__forgot, .registration__forgot{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 5px 0 30px;
}
.registration__forgot{
	margin: 23px 0 0;
}
.login__btn, .registration__btn{
	background: var(--accent);
	width: 100%;
	text-align: center;
	border-radius: 5PX;
	font-weight: 600;
	padding: 15px;
	border: none;
	color: #fff;
}
.registration__second{
	display: none;
}
.registration__info{
	font-size: 21px;
	margin-bottom: 24px;	
}
.registration__second .registration__subtitle{
	margin-bottom: 0;
}
.registration__enter{
	font-weight: 600;
	opacity: 0.8;
}
.registration__second .registration__forgot p{
	font-size: 14px;
}

.mail-wrap, .callback-wrapp{
	position: fixed;
	z-index: 1100;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: none;
}
.mail-wrap.active, .callback-wrapp.active{
	display: flex;
}
.overlay{
	opacity: 0;
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
}
.overlay.active{
	opacity: 1;
}
.mail, .callback{
	padding: 40px 45px;
	background: #fff;
	border-radius: 10px;
	position: relative;
	z-index: 2;
	width: 760px;
	text-align: center;
	margin: auto;
}
.callback{
	width: 560px;
}
.mail__title{
	font-size: 30px;
	margin-bottom: 10px;
}
.mail-wrap__i, .callback-wrap__i{
	position: absolute;
	top: 20px;
	right: 40px;
	width: 36px;
	height: 36px;
	cursor: pointer;
}
.mail__form, .mail__item, .mail__input{
	text-align: left;
	width: 100%;
}
.mail__form, .callback__form{
	margin-top: 30px;
}
.mail__placeholder{
	opacity: 0.8;
	font-size: 20px;
}
.mail__input{
	height: 60px;
	padding: 0 20px;
	border-radius: 5px;
	border: 1px solid #656d7e;
}
.mail__textarea{
	width: 100%;
	border: 1px solid #656d7e;
	border-radius: 5px;
	padding: 20px;
	height: 100px;
}
.mail__item:not(:last-of-type){
	margin-bottom: 25px;
}
.callback__btn{
	width: 100%;
	margin-top: 25px;
	background: var(--accent);
	border: none;
	border-radius: 5px;
	text-align: center;
	padding: 20px;
	color: #fff;
	font-weight: 600;
}
.callback__form p{
	font-size: 14px;
	text-align: center;
	margin-top: 20px;
}
a.callback__link{
	text-decoration: none;
}