@font-face {
  font-family: "Gilroy";           
  src: local("Gilroy"),
       url("../fonts/Gilroy-Extrabold.woff2") format("woff2"), 
       url("../fonts/Gilroy-Extrabold.woff") format("woff"); 
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Gilroy";
  src: local("Gilroy"),
       url("../fonts/Gilroy-Light.woff2") format("woff2"), 
       url("../fonts/Gilroy-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

body {
  margin: 0;
  padding: 0;

  font-family: "Open Sans", "Arial", sans-serif;
  font-size: 15px;
  line-height: 30px;
  font-weight: 400;
  color: #000000;
}

a {
  text-decoration: none;
}

header {
	padding-top: 40px;
}

.visually-hidden {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
}

.container {
	width: 1160px;
	margin-left: auto;
	margin-right: auto;  
}

.main-navigation {
	display: flex;
	flex-direction: column;
	position: relative;
	box-sizing: border-box;
	min-height: 300px;
	padding: 37px 60px 42px;
	background-color: #f7e296;
}

.main-navigation .index-logo-wrapper {
	position: absolute;
	top: -18px;
	left: 60px;
}

.main-navigation .index-logo:hover {
	opacity: 0.6;
}

.main-navigation .index-logo:active {
	opacity: 0.3;
}

.main-navigation a {
	color: #000000;
}

.main-navigation a:hover,
.main-navigation a:focus {
	opacity: 0.6;
} 

.main-navigation a:active {
	opacity: 0.3;
}

.main-navigation .user-block {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 35px;
}

.goods-search {
	flex-basis: 440px;
}

.goods-search input {
	position: relative;
	margin: 0;
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 40px;
	width: 250px;
	border: none;
	background-color: transparent;
	background-image: url("../img/search.png");
	background-repeat: no-repeat;
	background-position: 4px 13px;
}

.goods-search input::placeholder{
	color: rgba(0, 0, 0, 0.3);
}

.goods-search input:hover::placeholder{
	color: rgba(0, 0, 0, 0.6);
}

.goods-search input:focus {	
	outline: none;
	border-bottom: 2px solid #000000;
	padding-bottom: 10px;
	padding-top: 10px;
	background-position: 4px 11px;
}

.goods-search button {
	background-color: transparent;
	padding: 10px 15px;
	border: 2px solid #000000;
	margin-left: -5px;
	display: none;
}

.goods-search input:focus + button{
	display: inline-block;
}

.goods-search button:hover {
	background-color: #000000;
	color: #ffffff;
}

.goods-search button:active {
	background-color: #000000;
	color: rgba(255, 255, 255, 0.3);
}

.main-navigation .user-item-wrapper {
	flex-basis: 500px;
	display: flex;
	justify-content: space-between;
}

.user-block .sign-in {
	padding-left: 24px;
	background-position: left center;
	background-image: url("../img/user-black.png");
	background-repeat: no-repeat;
	flex-grow: 1;
}

.user-block .exit {
	opacity: 0.3;
}

.user-block .compare {
	padding-left: 20px;
	background-position: left center;
	background-image: url("../img/compare-black.png");
	background-repeat: no-repeat;
	margin-left: 60px;
}

.user-block .cart {
	padding-left: 23px;
	background-position: left center;
	background-image: url("../img/cart-black.png");
	background-repeat: no-repeat;
	margin-left: 40px;
}

.user-item:hover {
	opacity: 0.6;
}

.user-item:active {
	opacity: 0.3;
}

.main-navigation .main-menu {
	font-family: "Gilroy", "Arial", sans-serif;
  font-size: 18px;
  line-height: 24px;
  font-weight: 800;
  color: #000000;
  list-style: none;
  padding: 0;
  margin: 0;
  text-transform: uppercase;
  display: flex;
  flex-direction: row;
  justify-content: space-between;	
}

.main-menu > li > a {
	letter-spacing: 4px;
}

.catalog-open-wrapper {
	position: relative;
}

.catalog-open-wrapper .categories-popup {
	position: absolute;
	left: -60px;
	font-family: "Open Sans", "Arial", sans-serif;
  font-size: 15px;
  line-height: 36px;
  font-weight: 400;
  color: #000000;
  text-transform: none;
  background-color: #f7e296;
  box-sizing: border-box;
	padding-top: 20px;
	padding-left: 60px;
	padding-bottom: 35px;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	width: 1160px;
	display: none;
	z-index: 2;
}

.catalog-open-wrapper:hover .categories-popup {
	display: flex;
}

.catalog-open-wrapper .categories-popup ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
	margin-right: 65px;
}

.catalog-open-wrapper .categories-popup a:hover {
	opacity: 0.6;
}

.catalog-open-wrapper .categories-popup a:active {
	opacity: 0.3;
}

.catalog-open {
	position: relative;
	padding-right: 30px;
}

.catalog-open::after {
	position: absolute;
	content: "";
	width: 16px;
	height: 16px;
	background-image: url("../img/plus.png");
	background-repeat: no-repeat;
	top: 4px;
	right: 0px;
	opacity: 0.6;
}

.main-navigation .service-items-wrapper {
	flex-basis: 500px;
	display: flex;
	justify-content: space-between;
}

.main-slider {
	position: relative;
	min-height: 481px;
	margin-bottom: 100px;
}

.main-slider .main-slider-item {
	margin-top: -158px;
  margin-bottom: 60px;
	display: flex;
	flex-direction: row;
	align-items: center;
	display: none;
	box-sizing: border-box;
}

.main-slider input {
	display: none;
}

.main-slider .label-box {
	position: absolute;
	right: 70px;
	top: 381px;
	width: 80px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	z-index: 3;
}

.main-slider label {
	background-image: url("../img/slider-button-empty.png"); 
	background-repeat: no-repeat;
	background-position: center;
	width: 12px;
	height: 12px;
}

.main-slider .main-slider-switch-1:checked ~ .label-box label:nth-child(1){
	background-image: url("../img/slider-button.png");
}
.main-slider .main-slider-switch-2:checked ~ .label-box label:nth-child(2){
	background-image: url("../img/slider-button.png");
}
.main-slider .main-slider-switch-3:checked ~ .label-box label:nth-child(3){
	background-image: url("../img/slider-button.png");
}

.main-slider .main-slider-switch-1:checked ~ .slider-1 {
	display: flex;
}
.main-slider .main-slider-switch-2:checked ~ .slider-2 {
	display: flex;
}
.main-slider .main-slider-switch-3:checked ~ .slider-3 {
	display: flex;
}

.slider-image {
	width: 580px;
	display: flex;
	justify-content: center;
	box-sizing: border-box;
	margin-top: 41px;
}

.slider-description {
	position: relative;
	width: 580px;
	box-sizing: border-box;
	padding-top: 126px;
	padding-left: 20px;
	padding-bottom: 5px;
	padding-right: 68px; 
	display: flex;
	flex-direction: column;
}

 .main-slider-item .slider-description::before {
	position: absolute;
	content: "";
	width: 100px;
	height: 7px;
	background-color: #ffffff;
	top: 86px;
	left: 20px;
}

.main-slider-item .slider-description::after {
	position: absolute;
	font-family: "Gilroy", "Arial", sans-serif;
  font-size: 180px;
  font-weight: 800;
  color: #ffffff;
	top: 106px;
	right: 50px;
}

.slider-1 .slider-description::after {
	content: "01";
}

.slider-2 .slider-description::after {
	content: "02";
}

.slider-3 .slider-description::after {
	content: "03";
}

.main-slider .action-call {
	font-family: "Gilroy", "Arial", sans-serif;
  font-size: 47px;
  line-height: 56px;
  font-weight: 800;
  color: #000000;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

.slider-description p {
	margin-bottom: 45px;
}

.slider-description a {
	position: relative;
	display:inline-block;
	font-family: "Gilroy", "Arial", sans-serif;
  font-size: 18px;
  line-height: 18px;
  font-weight: 800;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 45px;
  align-self: flex-start;
  }

.parameters tr:first-of-type {
	font-family: "Gilroy", sans-serif;
  font-size: 36px;
  line-height: 48px;
  font-weight: 300;
  color: #000000;
}

.parameters td {
	width: 160px;
}

.parameters tr:last-of-type {
	font-size: 13px;
  line-height: 20px;
 }

.slider-description .more-details {
	display: inline-block;
	padding-top: 12px;
	width: 220px;
	height: 30px; 
	text-align: center;
	vertical-align: middle;
	}

.slider-description a::before{
	position: absolute;
	content:"";
	z-index: -1;	
	height: 8px;
	background-color: #f0c52e;
}

.slider-description a:hover .more-details{
	background-color: #f0c52e;
}

.slider-description a:active .more-details{
	color: rgba(0, 0, 0, 0.3);
}

.main-popular {
	margin-bottom: 181px;
}

.popular-items {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.popular-items li{
	font-family: "Gilroy", "Arial", sans-serif;
  font-size: 18px;
  line-height: 24px;
  font-weight: 800;
  color: #000000;
}

.popular-items a{
	color: #000000;
}

.popular-item {
	position: relative;
	width: 160px;
	padding-top: 195px;
}

.popular-item::before {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	content:" ";
	width: 160px;
	height: 160px;
	background-color: rgba(240, 197, 46, 0.5);
	background-repeat: no-repeat;	
}

.popular-item::after {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	content:"";
	width: 160px;
	height: 160px;
	background-color: transparent;
	background-repeat: no-repeat;	
}

li:nth-of-type(1) .popular-item::after {
	background-image: url("../img/popular-1.png");
	background-position: 50% 50%;
}

li:nth-of-type(2) .popular-item::after {
	background-image: url("../img/popular-2.png");
	background-position: 50% bottom;
}

li:nth-of-type(3) .popular-item::after {
	background-image: url("../img/popular-3.png");
	background-position: 50% 50%;
}

li:nth-of-type(4) .popular-item::after {
	background-image: url("../img/popular-4.png");
	background-position: 50% 50%;
}

li:nth-of-type(5) .popular-item::after {
	background-image: url("../img/popular-5.png");
	background-position: 50% 50%;
}

li:nth-of-type(6) .popular-item::after {
	background-image: url("../img/popular-6.png");
	background-position: 50% 50%;
}

.popular-items li:hover .popular-item::before{
	background-color: rgba(240, 197, 46, 1);
}

.popular-items li:active .popular-item::after{
	opacity: 0.3;
}

.popular-items li:active span{
	opacity: 0.3;
}

.main-services {
	min-height: 288px;
	background-color: #e5e5e5;
	z-index: -3;
}

.main-services-container {
	position: relative;
}

.main-services .main-services-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	position: absolute;
	top: -102px;
	z-index: 2;
}

.services-switch-box{
	width: 280px;
	height: 240px;
	border-right: 7px solid #000000;
	padding-top:80px; 
}

.services-switch-box ul {
	list-style: none;
	padding: 0;
	margin: 0;
	font-family: "Gilroy", "Arial", sans-serif;
  font-size: 18px;
  line-height: 24px;
  font-weight: 800;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.services-switch-box label {
	position: relative;
	display: block;
	width: 160px;
	padding: 10px 0px;
	margin-bottom: 24px;
	text-align: center;
	cursor: pointer;
}

.services-switch-box label::before {
	position: absolute;
	content: "";
	background-color: #f0c52e;
	top: 18px;
	left: 0px;
	width: 160px;
	height: 8px;
	z-index: -1;
}

.services-switch-box label:hover {
	background-color: #f0c52e;
}

.services-switch-box li:active {
	background-color: #000000;
}

.services-switch-box li:active label{
	color: #f7e184;
}

.services-switch-box label:active {
	background-color: #000000;
	color: #f7e184;
}

.main-services input {
	display: none;
}

.services-sliders {
	flex-grow: 1;
	display: flex;
}

.services-sliders-item {
	box-sizing: border-box;
	width: 876px;
	padding-left: 116px;
	position: relative;
	flex-grow: 1;
}

.services-sliders-item::after {
	position: absolute;
	content: "";
	width: 272px;
	height: 319px;
	right: 0px;
	top: 0px;
	background-repeat: no-repeat;
	background-position: center;
}

.services-slider-1::after {
	background-image: url("../img/services-delivery.png");
}

.services-slider-2::after {
	background-image: url("../img/services-warranty.png");
}

.services-slider-3::after {
	background-image: url("../img/services-credit.png");
}

.services-sliders h3 {
	font-family: "Gilroy", "Arial", sans-serif;
  font-size: 47px;
  line-height: 48px;
  font-weight: 800;
  color: #000000;
  margin-top: 74px;
  margin-bottom: 32px; 	
}

.services-sliders p {
	width: 428px;
}

.services-sliders-item {
	display: none;
}

.main-services input:nth-of-type(1):checked ~ .services-sliders .services-slider-1{
	display: block;
}

.main-services input:nth-of-type(2):checked ~ .services-sliders .services-slider-2{
	display: block;
}

.main-services input:nth-of-type(3):checked ~ .services-sliders .services-slider-3{
	display: block;
}

.main-services input:nth-of-type(1):checked ~ .services-switch-box li:nth-child(1){
	background-color: #000000;
	color: #f7e184;
}

.main-services input:nth-of-type(2):checked ~ .services-switch-box li:nth-child(2){
	background-color: #000000;
	color: #f7e184;
}

.main-services input:nth-of-type(3):checked ~ .services-switch-box li:nth-child(3){
	background-color: #000000;
	color: #f7e184;
}

.main-services input:nth-of-type(1):checked ~ .services-switch-box .delivery-item{
	background-color: transparent;
}

.main-services input:nth-of-type(2):checked ~ .services-switch-box .warranty-item{
	background-color: transparent;
}

.main-services input:nth-of-type(3):checked ~ .services-switch-box .credit-item{
	background-color: transparent;
}

.main-producers ul {
	list-style: none;
	margin: 0;
  padding: 2px;
	height: 287px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.main-producers li {
	position: relative;	
}

.main-producers li:hover::before{
	position: absolute;
	content: "";
	top: 0px;
	left: 0px;
	width: 260px;
	height: 100px;
	z-index: 2;
}

.main-producers li:nth-child(1):hover::before{
	background-image: url("../img/prodlogo-1color.jpg");
}

.main-producers li:nth-child(2):hover::before{
	background-image: url("../img/prodlogo-2color.jpg");
}

.main-producers li:nth-child(3):hover::before{
	background-image: url("../img/prodlogo-3color.jpg");
}

.main-producers li:nth-child(4):hover::before{
	background-image: url("../img/prodlogo-4color.jpg");
}

.main-info {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	position: relative;
}

.main-info h3 {
	position: relative;
	margin-bottom: 20px;
	font-family: "Gilroy", "Arial", sans-serif;
  font-size: 47px;
  line-height: 48px;
  font-weight: 800;
  color: #000000;
 }

 .main-info p {
 	margin: 24px 0px;
 	}

.about-us {
	width: 470px;
	display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-bottom: 50px;
}

.main-info h3::before {
	position: absolute;
	content: "";
	top: -50px;
	left: 0px;
	width: 80px;
	height: 7px;
	background-color: #000000;
	z-index: 1;
}

.about-us ul {
	list-style: none;
	font-family: "Gilroy", "Arial", sans-serif;
  font-size: 16px;
  line-height: 40px;
  font-weight: 800;
  color: #000000;
  margin-top: 28px;
  margin-bottom: 40px; 
}

.about-us li {
	position: relative;
}

.about-us li::before {
	position: absolute;
	content: "";
	width: 8px;
	height: 8px;
	top: 18px;
	left: -39px;
	background-image: url("../img/list-bullit-donut.png");
	z-index: 1;
}

.contacts {
	width: 560px;
	display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.contacts p {
	margin-bottom: 40px;
}

.contacts .map {
	width: 560px;
	height: 222px;
	background-color: lightgray;
	margin-bottom: 88px;
}

.contacts .map:hover {
	cursor: pointer;
}

.map-popup {
	position: fixed;
	top: 35px;
	left: 50%;
	margin-left: -480px;
	width: 960px;
	height: 559px;
	background-color: lightgrey;
	background-image: url("../img/map-big.png");
	background-repeat: no-repeat;
	-webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,0.3);
	        box-shadow: 0 10px 20px 0 rgba(0,0,0,0.3);
	z-index: 10;
	display: none;
	-webkit-animation-name: scale;
	        animation-name: scale;
	-webkit-animation-duration: 0.4s;
	        animation-duration: 0.4s;
}


.write-us-popup {
	position: fixed;
	top: 35px;
	left: 50%;
	margin-left: -480px;
	background-color: #ffffff;
	width: 960px;
	min-height: 553px;
	-webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,0.3);
	        box-shadow: 0 10px 20px 0 rgba(0,0,0,0.3);
	z-index: 10;
	display: none;
	-webkit-animation-name: scale;
	        animation-name: scale;
	-webkit-animation-duration: 0.4s;
	        animation-duration: 0.4s;
}

.modal-show {
	display: block;
}

.modal-error {
  -webkit-animation-name: shake;
          animation-name: shake;
	-webkit-animation-duration: 0.6s;
	        animation-duration: 0.6s;
}

.overlay-show {
	position: fixed;
	background-color: rgba(0,0,0,0.3);
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 8;
}

@-webkit-keyframes scale {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }

  70% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes scale {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }

  70% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@-webkit-keyframes shake {
  0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
}

@keyframes shake {
  0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
}

.write-us-popup .write-us-form {
	width: 760px;
	min-height: 553px;
	box-sizing: border-box;
	padding-top: 75px;
	padding-bottom: 75px;
	margin-right: auto;
	margin-left: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: space-between;
}

.write-us-popup input {
	display: block;
	background-color: #f2f2f2;
	border: 2px solid #f2f2f2;
	padding: 16px;
	width: 360px;
	box-sizing: border-box;
}

.write-us-popup textarea {
	display: block;
	background-color: #f2f2f2;
	border: 2px solid #f2f2f2;
	padding: 16px;
	width: 760px;
	min-height: 156px;
	box-sizing: border-box;
}

.write-us-popup input::placeholder {
	color: #b5b5b5;
}

.write-us-popup textarea::placeholder {
	color: #b5b5b5;
}

.write-us-popup textarea:focus,
.write-us-popup input:focus {
	outline: none;
	background-color: #ffffff;
	border-color: #f0c52e;
}

.write-us-popup label {
	font-family: "Gilroy", "Arial", sans-serif;
  font-size: 18px;
  line-height: 24px;
  font-weight: 800;
  color: #000000;
}

.button-cover {
	position: relative;
	width: 190px;
}

.site-button {
	display: block;
	position: relative;
	font-family: "Gilroy", "Arial", sans-serif;
  font-size: 18px;
  line-height: 18px;
  font-weight: 800;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 3px;
  box-sizing: border-box;
  height: 40px;
  padding: 10px 30px;
  background-color: transparent;
  border: none;
  text-align: center;
  cursor: pointer;
  z-index: 1;
  align-self: flex-start;
}

.site-button::before {
	position: absolute;
	content: "";
	background-color: #f0c52e;
	width: 100%;
	height: 8px;
	top: 0;
	bottom: 0;
	margin: auto;
	left: 0;
	transition: height 0.3s;
	-webkit-transition: height 0.3s;
	z-index: -1;
}

.site-button span {
	position: relative;
	z-index: 2;
}

.site-button:hover.site-button::before {
	height: 40px;	
}

.site-button:active {
	color: #a88a20;
}

.modal-close-btn {
	position: absolute;
	top: 22px;
	right: 22px;
	background-color: transparent;
	border: none;
	opacity: 0.6;	
}

.modal-close-btn:hover {
	opacity: 1;
	cursor: pointer;
}

.modal-close-btn:active {
	opacity: 0.3;
}

footer {
	background-color: #464646;
	color: #ffffff;
	padding-top: 60px;
	padding-bottom: 60px;
}

footer a {
	color: #ffffff;
	text-decoration: none;
}

footer ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
}

.footer-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.footer-wrapper .footer-user-block {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 15px; 
}

footer .footer-user-block img:hover {
	opacity: 0.6;
}

footer .footer-user-block img:active {
	opacity: 0.3;
}

.footer-user-block .user-link {
	position: relative;
	padding-left: 26px;
	margin-left: 43px;
}

.user-link-box .exit {
	opacity: 0.3;
	margin-left: 0px;
	padding-left: 15px;
}

.footer-user-block .user-link::before{
	position: absolute;
	content: "";
	width: 13px;
	height: 12px;
	top: 4px;
	left: 0px;
	background-position: 100% 100%;
	background-repeat: no-repeat;
}

.footer-user-block .sign-in::before{
	background-image: url("../img/user.png");
}

.footer-user-block .compare::before{
	background-image: url("../img/compare.png");
}

.footer-user-block .cart::before{
	background-image: url("../img/cart.png");
}

.footer-user-block .user-link:hover::before{
	opacity: 0.6;
}

.footer-user-block .user-link:active::before{
	opacity: 0.3;
}

.footer-user-block .user-link span {
	opacity: 0.7;
}

.footer-user-block .user-link:hover span {
	opacity: 1;
}

.footer-user-block .user-link:active span {
	opacity: 0.3;
}

.footer-contacts {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 50px; 
}

.footer-contacts ul {
	font-family: "Gilroy", "Arial", sans-serif;
  font-size: 18px;
  line-height: 24px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 3px;	
  display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.footer-contacts li {
	margin-right: 38px;
}

.footer-contacts li:last-child {
	margin-right: 0px;
}

.footer-contacts a:hover {
	opacity: 0.6;
}

.footer-contacts a:active {
	opacity: 0.3;
}

.footer-social {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.footer-social ul {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.footer-social li {
	margin-right: 23px;
}

.footer-social li:last-child {
	margin-right: 0px;
}

.footer-social::before {
	content: "";
	width: 80px;
	height: 7px;
	top: auto;
	bottom: auto;
	left: 0px;
	background-color: #ffc600;
}

.social-link {
	display: inline-block;
	background-repeat: no-repeat;
	width: 32px;
	height: 32px;
	opacity: 0.6;
}

.social-link.fb {
	background-image: url("../img/social-fb.png");
}

.social-link.inst {
	background-image: url("../img/social-inst.png");
}

.social-link.twit {
	background-image: url("../img/social-twit.png");
}

.social-link:hover {
	opacity: 1;
}

.social-link:active {
	opacity: 0.3;
}

.developed-by {
	display: inline-block;
	background-image: url("../img/logo-html-yellow.svg");
	background-repeat: no-repeat;
	width: 27px;
	height: 35px;
}

.developed-by:hover {
	opacity: 0.6;
}

.developed-by:active {
	opacity: 0.3;
}



/*----------------------------------------*/
/*--------------catalog.html--------------*/
/*----------------------------------------*/



.main-navigation.main-navigation-catalog {
	min-height: 186px;
}

.page-heading {
	padding-left: 60px;
	box-sizing: border-box;
}

.page-heading h1 {
	font-family: "Gilroy", "Arial", sans-serif;
  font-size: 47px;
  line-height: 47px;
  font-weight: 800;
  margin-top: 40px;
  margin-bottom: 26px;
}

.breadcrumbs {
	list-style: none;
	margin: 0px;
	padding: 0px;
	margin-bottom: 44px;
}

.breadcrumbs li {
	position: relative;
	display: inline-block;
	padding-right: 40px;
}

.breadcrumbs li:not(:last-of-type)::after {
	position: absolute;
	content: "";
	top: 13px;
	right: 17px;
	background-image: url("../img/nav-arrow.png");
	width: 4px;
	height: 7px;
}

.breadcrumbs a {
	opacity: 0.3;
	color: #000000;
}

.breadcrumbs a:hover {
	opacity: 0.6;
}

.breadcrumbs a:active {
	opacity: 0.1;
}

.top-bar {
	background-color: rgba(0,0,0,0.08);
  padding: 20px 0px;
}

.top-filter-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.top-filter {	
	padding-left: 60px;
	width: 200px;
	box-sizing: border-box;
	align-items: center;
}

.top-sort {
	width: 760px;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

.top-sort span {

}

.top-sort ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

.top-sort label{
	opacity: 0.3;
	cursor: pointer;
}

.top-sort label:hover{
	opacity: 0.6;
}

.top-sort input {
	display: none;
}

.top-sort input:checked+label {
	opacity: 1;
}

.types-of-sort {
	width: 335px;
	flex-grow: 1;
}

.types-of-sort li {
	margin-right: 30px;
}

.direction-sort {
}

.direction-sort li {
	width: 11px;
	height: 30px;
	margin-left: 19px;
}

.direction-sort label {
	position: relative;
	font-size: 0px;
}

.direction-sort label::before {
	position: absolute;
	content: " ";
	top: -10px;
	left: 0px;
	background-repeat: no-repeat;
	width: 11px;
	height: 10px;
}

.direction-sort .direction-up::before {
	background-image: url("../img/icon-up-dir.png");
}

.direction-sort .direction-down::before {
	background-image: url("../img/icon-down-dir.png");
}

.catalog-main-block {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	box-sizing: border-box;
}

.filter-section {
	position: relative;
	width: 328px;
	padding-left: 60px;
	box-sizing: border-box;
}

.filter-section::before {
	position: absolute;
	content: "";
	background-color: #eeeeee;
	top: -70px;
	right: 0px;
	width: 1000%;
	height: 110%;
	z-index: -3;
}

.top-bar span {
	font-family: "Gilroy", "Arial", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 800;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 3px; 
  width: 200px;  
}

.filter-form {
	padding-top: 70px;
}

.filter-form .fieldset {
	width: 200px;
	border-top: 2px solid #000000; 
	padding-top: 12px;
	padding-bottom: 20px;
}

.filter-form h3 {
	font-family: "Gilroy", "Arial", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 800;
  color: #000000;
  margin-top: 0px;
  margin-bottom: 25px;
}

.filter-form ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
}

.filter-form .range-fieldset .range-controls label {
	font-family: "Gilroy", sans-serif;
  font-size: 14px;
  line-height: 24px;
  font-weight: 300;
  color: #000000;
	display: inline-block;
	padding: 0px;
	opacity: 0.2;
}

.range-filter {
	height: 80px;
}

.filter-form .range-fieldset .range-controls input {
	display: inline-block;
	width: 60px;
	padding: 0;
	border: none;
	background-color: transparent;
}

.range-controls {
	position: relative;
	height: 20px;
	padding-bottom: 5px;
}

.range-controls .scale {
  height: 2px;
  background: #dbdbdb;
  margin-bottom: 5px;
}

.range-controls .bar {
  width: 60%;
  height: 2px;
  background: #91c92f;
}

.range-controls .toggle {
	position: absolute;
  top: -9px;
  left: 0;
	width: 4px;
  height: 4px;
  padding: 0;
  border: 8px solid #ffffff;
  background-color: #ababab;
  border-radius: 50%;
  box-shadow: 0 2px 1px 0 #cfcfcf;
  cursor: pointer;
}

.range-controls .toggle:active {
	border: 9px solid #ffffff;
	top: -10px;
}

.range-controls .toggle-min {
  left: -8px;
}

.range-controls .toggle-max {
  left: 109px;
}

.filter-form .fieldset input {
	display: none;
}

.filter-form .fieldset label {
	position: relative;
	padding-left: 40px;
	cursor: pointer;
}

.filter-form .checkbox-fieldset label::before{
	position: absolute;
	content: "";
	top: -2px;
	left: 1px;
	background-image: url("../img/checkbox-off-black.png");
	background-repeat: no-repeat;
	width: 23px;
	height: 23px;
}

.filter-form .checkbox-fieldset input:checked+label::before{
	background-image: url("../img/checkbox-on-black.png");
}

.filter-form .radio-fieldset label::before{
	position: absolute;
	content: " ";
	top: -2px;
	left: 0px;
	background-image: url("../img/radio-off-black.png");
	background-repeat: no-repeat;
	width: 25px;
	height: 25px;
}

.filter-form .radio-fieldset input:checked+label::before{
	background-image: url("../img/radio-on-black.png");
}

.filter-form .fieldset li:hover>label::before {
	opacity: 0.6;
}

.filter-form button {
	margin-top: 38px;
}

.goods-gallery {
	width: 760px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding-top: 40px;
}

.goods-gallery ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
}

.goods-list {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
}

.goods-list li{
	margin-top: 29px;
}

.item-container.new-mark::after {
	position: absolute;
	top: 28px;
	right: 28px;
	content: "new";
	font-family: "Gilroy", "Arial", sans-serif;
  font-size: 16px;
  line-height: 58px;
  font-weight: 800;
  color: rgba(0,0,0,0.2);
  text-transform: uppercase;
  width: 60px;
  height: 60px;
  text-align: center;
  vertical-align: middle;  
  border: 2px solid rgba(0,0,0,0.1);
  border-radius: 50%;
  z-index: 5;
}

.goods-list a {
	color: #000000;
}

.item-container {
	position: relative;
	width: 360px;
	height: 380px;
}

.item-container::before{
	position: absolute;
	content: "";
	top: 0px;
	left: 0px;
	width: 360px;
	height: 380px;
	background-color: #eeeeee;
	opacity: 0.7;
	z-index: 1;
	display: none;
}

.item-container .add-to-cart-box {
	position: absolute;
	width: 190px;
	top: 170px;
	left: 85px;
	z-index: 2;
	display: none;
}

.item-container .add-to-cart-box a {
	font-size: 13px;
	line-height: 36px;
	display: block;
	text-align: center;
	opacity: 0.5;
}

.item-container .add-to-cart-box a:hover {
	opacity: 1;
}

.item-container .add-to-cart-box a:active {
	opacity: 0.2;
}

.item-container:hover::before {
	display: block;
}

.item-container:hover .add-to-cart-box {
	display: block;
}

.item-description {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.item-description h3 {
	width: 260px;
	font-family: "Gilroy", "Arial", sans-serif;
	font-size: 18px;
	line-height: 24px;
	font-weight: 800;
  color: #000000;
}

.item-description span {
	font-family: "Gilroy", ""Arial"", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  color: #464646;
  margin-top: 19px;
}

.pagination {
	font-family: "Gilroy", "Arial", sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: 800;
  color: #000000;
  text-transform: uppercase;
  background-color: rgba(0,0,0,0.08);
  display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-top: 20px;
	margin-bottom: 78px;
}

.pagination-item {
	color: rgba(0,0,0,0.3);
	padding: 20px 0px;
}

.pagination-item:hover {
	color: rgba(0,0,0,0.6);
}

.pagination-item:active {
	color: rgba(0,0,0,0.6);
}

.pagination-item--active {
	color: rgba(0,0,0,1);
}

.pagination-item--active:hover {
	color: rgba(0,0,0,1);
}

.pagination-item--previous,
.pagination-item--next {
	color: rgba(0,0,0,1);
	padding: 20px 30px;
}

.pagination-item--previous:hover,
.pagination-item--next:hover {
	color: rgba(0,0,0,1);
	background-color: rgba(0,0,0,0.08);
	padding: 20px 30px; 
}

.pagination-item--previous:active,
.pagination-item--next:active {
	color: rgba(0,0,0,0.3);
}

.pagination ul {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.pagination li {
	margin-right: 32px; 
}

.pagination li:last-child {
	margin-right: 0px; 
}