/* ========================= ШРИФТИ =============================== */

/* Google Fonts */

  @import url("https://fonts.googleapis.com/css?family=Quicksand:600,700&display=swap");
  @import url("https://fonts.googleapis.com/css?family=Orbitron:500&display=swap");
  @import url("https://fonts.googleapis.com/css?family=Quicksand:500&display=swap");
  @import url("https://fonts.googleapis.com/css?family=Exo:regular,500,700&display=swap");
  @import url("https://fonts.googleapis.com/css?family=Shantell+Sans&display=swap");
  @import url("https://fonts.googleapis.com/css?family=Rubik+Dirt:regular&display=swap");

  /*Локальне підключення шрифтів */
/*Скидання стилів */
@import url("reset.css");
@import url("fonts.css");



			   .wrapper {
			   	min-height: 100%;
			   	overflow: clip;
			   }
		
			   body {
			   	font-family: "Proxima Nova", sans-serif;
			   	color: #2B2929;
			   }
		
			   /* HEADER */
			   .header {
			   	position: sticky;
			   	top: 0;
			   	left: 0;
			   	width: 100%;
			   	z-index: 50;
			   	background-color: #fff;
			   	padding: 25px 0px;
			   }
		
			   [class*="__container"] {
			   	max-width: 1320px;
			   	margin: 0 auto;
			   	padding: 0px 15px;
			   	position: relative;
			   }
		
			   .header__logo {
			   	vertical-align: middle;
			   	margin-right: 34px;
			   }
		
			   .button-open,
			   .button-close {
			   	padding: 11px 20px;
			   	border-radius: 8px;
			   	background: #FFBC57;
			   	color: #FFF;
			   	font-size: 19px;
			   	font-weight: 600;
			   	line-height: 1.2;
			   }
		
			   .button-open span,
			   .button-close span {
			   	vertical-align: middle;
			   }
		
			   .button-open:hover,
			   .button-close:hover {
			   	background: #94d4ee;
			   }
		
			   .button-open:active,
			   .button-close:active {
			   	background: #32bbf2;
			   }
		
			   .button-open::before,
			   .button-close::before {
			   	content: "";
			   	width: 24px;
			   	height: 24px;
			   	vertical-align: middle;
			   	margin-right: 10px;
			   }
		
			   .button-open::before {
			   	background: url(../img/menu-catalog.svg) 0 0 / 100% no-repeat;
			   }
		
			   .button-close::before {
			   	background: url(../img/close-catalog.svg) 0 0 / 100% no-repeat;
			   }
		
			   .button-close {
			   	display: none;
			   }
		
			   .wrapper:target .header__menu {
			   	display: block;
			   }

								.wrapper:target .button-open {
									display: none;
								}
				
				
								.wrapper:target .button-close {
									display: inline-block;
								}
				
								.page {
									position: relative;
								}
				
								.wrapper:target .page::before {
									content: "";
									background-color: rgba(27, 26, 26, 0.5);
									backdrop-filter: blur(2.5px);
									position: absolute;
									top: 0;
									left: 0;
									width: 100%;
									height: 100%;
									z-index: 4;
								}
				
				
								.header__container:target .header__menu {
									display: none;
								}
				
				
								.header__container:target .button-open {
									display: inline-block;
								}
				
								.header__menu {
									position: absolute;
									top: 180%;
									left: 0;
									display: none;
								}
				
								.menu {
									background-color: #fff;
									min-width: 300px;
									border-radius: 8px 0px 0px 8px;
									padding: 8px 0px;
								}
				
								/* .menu__list {
				  border-right: 5px solid #FFBC57;
				} */
				
								.menu__link {
									padding: 10px 30px;
									font-size: 20px;
									line-height: 1.4;
									font-weight: 600;
									width: 100%;
									position: relative;
								}
				
								.menu__link::after {
									content: "";
									background: url(../img/arrow-orange.svg) 0 0/ 100% no-repeat;
									width: 24px;
									height: 24px;
									position: absolute;
									top: 18px;
									right: 15px;
								}
				
								.menu__item:hover .menu__link {
									background-color: #FFBC57;
								}
				
								.menu__item:hover .menu__link::after {
									background: url(../img/arrow-black.svg) 0 0/ 100% no-repeat;
								}
				
								.menu__link img {
									vertical-align: middle;
									margin-right: 16px;
								}
				
								.sub-menu {
									background-color: #fff;
									position: absolute;
									top: 0;
									left: 100%;
									height: 100%;
									min-width: 318px;
									border-radius: 0px 8px 8px 0px;
									overflow: auto;
									display: none;
									width: 106%;
									/* 318/300 */
								}
				
				
								.sub-menu__list {
									padding: 20px 20px 30px 30px;
								}
				
								.sub-menu__list::before {
									content: "";
									width: 5px;
									height: 97.402597%;
									/* 600/616 */
									background-color: #FFBC57;
									position: absolute;
									top: 8px;
									left: 0;
								}
				
								.sub-menu__item:not(:last-child) {
									margin-bottom: 10px;
								}
				
								.sub-menu__link {
									font-size: 19px;
									line-height: 210.526316%;
									/* 40/19 */
								}
				
								.sub-menu__item:hover .sub-menu__link {
									color: #01B5FF;
								}
				
								.menu__item:hover .sub-menu {
									display: block;
								}
				
								/* HEADER */
				
								/* MAIN */
								.category {
									position: relative;
									background-color: #F8F8F8;
									padding: 70px 0px;
									font-size: 0;
								}
				
								.category__bg {
									display: none;
								}

																.wrapper:target .category__bg {
																	display: block;
																	position: absolute;
																	/* top: 50%; */
																	top: 0;
																	right: 0;
																	/* margin-top: -410px; */
																	z-index: 5;
																}
								
																/* .category__title {
								} */
																.title {
																	font-size: 40px;
																	font-weight: 600;
																	line-height: 120%;
																	/* 48/40 */
																	margin-bottom: 40px;
																}
								
																.category__items {
																	margin: 0px -5px -24px;
																}
								
																.category__item {
																	display: inline-block;
																	padding: 0px 5px 24px;
																	overflow: hidden;
																}
								
																.category__link {
																	position: relative;
																	border-radius: 8px;
																	max-width: 250px;
																	min-height: 300px;
																	font-size: 20px;
																	font-weight: 600;
																	line-height: 140%;
																	/* 28/20 */
																}
								
																.category__link::after {
																	content: "";
																	background: url(../img/category/arrow-in-circle.svg) 0 0 / 100% no-repeat;
																	width: 50px;
																	height: 50px;
																	position: absolute;
																	bottom: 20px;
																	right: 20px;
																}
								
																.category__item:hover .category__link {
																	box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
																}
								
																.category__item span {
																	color: rgba(177, 177, 177, 1);
																	position: absolute;
																	right: 20px;
																	top: 20px;
																}
								
																.category__name {
																	font-size: 20px;
																	position: absolute;
																	left: 20px;
																	top: 20px;
																}
								
																.category__image {
																	max-width: 100%;
																}
								
																.footer {
																padding-block: 25px;
														      background-color: #919191;
																}					                   
														
																.footer__link {	                  
																width: 75px;
																height: 75px;
																border-radius: 50%;
																position: fixed;
																bottom: 25px;
																right: 25px;
																z-index: 50;
																}
														
																.footer__link img {
																max-width: 100%;
																position: absolute;
																top: calc(50% - 24px);
																left: calc(50% - 24px);
																}