* {
	box-sizing: border-box;
}

body {
	font-family: "Roboto", "Arial", sans-serif;
	font-style: normal;
	font-weight: normal;
	color: #ffffff;
	background-color: #849d8f;
}

body > input[type="radio"] {
  display: none;
}

.site-wrapper {
	min-width: 1200px;
	background-color: #849d8f;
	background-image: url("../img/slide-1.png");
	background-repeat: no-repeat;
	background-position: top center;
	-webkit-transition: background-image 0.5s ease, background-color 0.5s ease;
			transition: background-image 0.5s ease, background-color 0.5s ease;
}

.wrapper {
	min-width: 1200px;
	background-image: -webkit-linear-gradient(top, #9cb0a5 0%, #849d8f 40%);
	background-image: linear-gradient(180deg, #9cb0a5 0%, #849d8f 40%);
}

.site-wrapper:before,
.site-wrapper:after {
	content: "";
	visibility: hidden;
}

.site-wrapper:before {
	background-image: url("../img/slide-2.png");
}

.site-wrapper:after {
	background-image: url("../img/slide-3.png");
}

h1 {
	font-size: 35px;
	line-height: 41px;
	margin-top: 0;
	margin-bottom: 25px;
}

h2 {
	font-size: 35px;
	line-height: 41px;
}

h3 {
	font-size: 24px;
	line-height: 30px;
}

h4 {
	font-size: 16px;
	line-height: 22px;
}

input[type=submit] {
	outline: none;
}

input[type=text],
input[type=email],
input[type=search],
input[type=password] {
	font-size: 16px;
	line-height: 24px;
	font-weight: bold;
	color: #323232;
}

textarea {
	font-size: 16px;
	line-height: 24px;
	font-weight: bold;
	color: #323232;
	font-family: "Roboto", "Arial", sans-serif;
}

input::-webkit-input-placeholder {
	font-weight: normal;
	color: #999999;
}

input::-moz-placeholder {
	font-weight: normal;
	color: #999999;
}

input:-moz-placeholder {
	font-weight: normal;
	color: #999999;
}

input:-ms-input-placeholder {
	font-weight: normal;
	color: #999999;
}

textarea::-webkit-input-placeholder {
	font-weight: normal;
	color: #999999;
}

textarea::-moz-placeholder {
	font-weight: normal;
	color: #999999;
}

textarea:-moz-placeholder {
	font-weight: normal;
	color: #999999;
}

textarea:-ms-input-placeholder {
	font-weight: normal;
	color: #999999;
}

/*Шапка*/

.main-header {
	min-height: 118px;
	margin-bottom: 20px;
}

.container {
	width: 1200px;
	margin: 0 auto;
	padding-left: 27px;
	padding-right: 27px;
}

.clearfix::after {
	content: "";
	display: table;
	clear: both;
}

nav {
	float: left;
	min-height: 70px;
	width: 586px;
}

.index-logo {
	float: left;
	min-height: 73px;
	width: 160px;
	margin-left: -5px;
	margin-right: 10px;
	padding-top: 10px;
}

.main-navigation {
	float: left;
	min-height: 73px;
	width: 406px;
	padding-top: 22px;
}

.main-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation .menu-item {
	position: relative;
	display: inline-block;
	padding: 7px 13px;
  border-radius: 15px;
}

.menu-link {
	display: block;
	color: #ffffff;
	font-weight: bold;
	font-size: 16px;
	line-height: 18px;
	text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.main-navigation .menu-item:hover {
	background: #f7f6f3;
}

.menu-item:hover .menu-link {
  color: #323232;
  border: none;
}

.main-navigation .menu-item:active {
	text-decoration: none;
	color: #323232;
	background: #f7f6f3;
	box-shadow: inset 0 2px 2px #696969;
}

.drop-menu {
	display: none;
	position: absolute;
	z-index: 12;
	top: 37px;
	left: -6px;
	background-color: #f8f7f4;
	width: 143px;
	border-radius: 5px;
	padding: 0;
	box-shadow: 0 20px 30px rgba(0, 0, 0, 0.4);
}

.menu-catalog:hover .drop-menu {
	display: block;
}

.drop-menu::before {
	content: "";
	position: absolute;
	top: -5px;
	width: 100%;
	height: 5px;
}

.drop-menu a {
	display: block;
	width: 143px;
	padding: 9px 20px;
	text-decoration: none;
	color: #323232;
	font-size: 14px;
	line-height: 16px;
}

.drop-menu a:hover {
	background: #fbded7;
}

.drop-menu a:active {
	background: #f6b5a5;
}

.drop-menu-head {
  position: relative;
	font-weight: bold;
	border-radius: 5px 5px 0 0;
}

.drop-menu li:first-child a {
	border-radius: 5px 5px 0 0;
}

.drop-menu li:last-child a {
	border-radius: 0 0 5px 5px;
}

.drop-menu-head::after {
	content: "";
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 6px;
	height: 1px;
	width: 130px;
	background-color: #d1d0ce;
}

.main-navigation .active {
	background-color: #d07058;
}

.active .menu-link {
	color: #ffffff;
  border: none;
}

.btn {
	display: inline-block;
	text-decoration: none;
	color: #ffffff;
	font-weight: bold;
	background-image: -webkit-linear-gradient(#f26843, #e74b36);
	background-image: linear-gradient(#f26843, #e74b36);
	box-shadow: 0 2px 2px rgba(229, 75, 54, 0.6);
}

.btn:hover {
	color: #fefefe;
	background: #f38367;
}

.btn:active {
	color: #fceeec;
	background-image: -webkit-linear-gradient(#d74632, #e1613e);
	background-image: linear-gradient(#d74632, #e1613e);
	box-shadow: inset 0 2px 1px #942718;
}

.user-block {
	float: right;
	min-height: 73px;
	width: 560px;
	padding-top: 22px;
  font-size: 0;
	text-align: right;
}

.user-block > div {
	display: inline-block;
}

.user-block-btn {
	display: inline-block;
	padding: 8px 0;
	color: #ffffff;
	background-color: rgba(255, 255, 255, 0.2);
	text-decoration: none;
	font-size: 14px;
	line-height: 16px;
	font-weight: 500;
}

.search-btn {
	position: relative;
	border-radius: 50%;
	width: 33px;
	height: 33px;
	color: rgba(255, 255, 255, 0);
}

.search-btn::before {
	content: "";
	position: absolute;
	right: 8px;
	width: 17px;
	height: 17px;
	background: url("../img/spritesheet.png") no-repeat;
	background-position:  -72px -77px;
}

.search {
	position: relative;
	margin-right: 10px;
}

.search-block {
	display: none;
	position: absolute;
	top: 38px;
	right: 0;
	z-index: 3;
	width: 342px;
	height: 84px;
	background-color: #f8f7f4;
	border-radius: 7px;
	text-align: center;
	padding-top: 20px;
	box-shadow: 0 20px 30px rgba(0, 0, 0, 0.4);
}

.search-block::before {
	content: "";
	position: absolute;
	top: -5px;
	right: 0;
	width: 100%;
	height: 5px;
}

.search-block input[type=search] {
	width: 311px;
	height: 44px;
	border-radius: 6px;
	border: 1px solid #d3d3d2;
	padding-left: 15px;
	padding-right: 15px;
}

.search-block label {
	position: absolute;
	top: 6px;
	left: 30px;
	font-size: 11px;
	line-height: 13px;
	color: #999999;
	display: none;
}

input[type=search]:hover {
	box-shadow: inset 0 0 0 1px #c7c6c5;
}

input[type=search]:focus {
	box-shadow: inset 0 0 0 1px #8fbdec;
	border-color: #8fbdec;
	outline: none;
}

input[type=search]:focus::-webkit-input-placeholder {
	color: transparent;
}

input[type=search]:focus::-moz-placeholder {
	color: transparent;
}

input[type=search]:focus:-moz-placeholder {
	color: transparent;
}

input[type=search]:focus:-ms-input-placeholder {
	color: transparent;
}

input[type=search]:focus + label {
	display: block;
	color: #5b9ddf;
}

input[type=search]:valid + label {
	display: block;
}

.search:hover .search-block {
	display: block;
}

.search:hover .search-btn {
	background-color: #f8f7f4;
}

.search:hover .search-btn::before {
	background-position: -105px -5px;
}

.login-btn {
	position: relative;
	padding-left: 45px;
	padding-right: 16px;
	border-radius: 15px;
}

.login-btn::before {
	content: "";
	position: absolute;
	top: 6px;
	left: 16px;
	width: 21px;
	height: 19px;
	background: url("../img/spritesheet.png") no-repeat;
	background-position: -5px -35px;
}

.login {
	position: relative;
	margin-right: 10px;
}

.login-block {
	display: none;
	position: absolute;
	top: 38px;
	right: 0;
	z-index: 4;
	width: 277px;
	height: 214px;
	background-color: #f8f7f4;
	text-align: left;
	border-radius: 7px;
	padding: 20px;
	box-shadow: 0 20px 30px rgba(0, 0, 0, 0.4);
}

.login-block::before {
	content: "";
	position: absolute;
	top: -6px;
	right: 0;
	width: 100%;
	height: 6px;
}

.login-block input[type=email],
.login-block input[type=password] {
	width: 240px;
	height: 44px;
	border-radius: 6px;
	border: 1px solid #d3d3d2;
	padding-left: 15px;
	padding-right: 15px;
	margin-bottom: 20px;
}

.login-block label {
	position: absolute;
	top: 6px;
	left: 35px;
	font-size: 11px;
	line-height: 13px;
	color: #999999;
	display: none;
}

.login-block .password {
	top: 69px;
	left: 35px;
}

.login-block input[type=email]:hover,
.login-block input[type=password]:hover {
	box-shadow: inset 0 0 0 1px #c7c6c5;
}

.login-block input[type=email]:focus,
.login-block input[type=password]:focus {
	box-shadow: inset 0 0 0 1px #8fbdec;
	border-color: #8fbdec;
	outline: none;
}

.login-block input[type=email]:focus::-webkit-input-placeholder,
.login-block input[type=password]:focus::-webkit-input-placeholder {
	color: transparent;
}

.login-block input[type=email]:focus::-moz-placeholder,
.login-block input[type=password]:focus::-moz-placeholder {
	color: transparent;
}

.login-block input[type=email]:focus:-moz-placeholder,
.login-block input[type=password]:focus:-moz-placeholder {
	color: transparent;
}

.login-block input[type=email]:focus:-ms-input-placeholder,
.login-block input[type=password]:focus:-ms-input-placeholder {
	color: transparent;
}

.login-block input[type=email]:focus + label,
.login-block input[type=password]:focus + label {
	display: block;
	color: #5b9ddf;
}

.login-block input[type=email]:valid + label,
.login-block input[type=password]:valid + label {
	display: block;
}

.login-block .btn {
	width: 102px;
	height: 45px;
	font-size: 18px;
	line-height: 24px;
	color: #fefefe;
	border-radius: 22px;
	border: none;
	cursor: pointer;
}

.login-block .help {
	float: right;
	width: 124px;
	height: 45px;
}

.login:hover .login-block {
	display: block;
}

.login:hover .login-btn {
	color: #323232;
	background-color: #f8f7f4;
}

.login:hover .login-btn::before {
	background-position: -36px -35px;
}

.help a {
	font-size: 13px;
	line-height: 24px;
	color: #323232;
}

.help a:hover,
.help a:active {
	color: #e84d37;
}

.login:hover .login-block {
	display: block;
}

.basket-btn {
	position: relative;
  min-width: 116px;
	padding-left: 45px;
	padding-right: 18px;
  text-align: left;
	border-radius: 15px;
}

.basket-btn::before {
	content: "";
	position: absolute;
	z-index: 5;
	top: 6px;
	left: 16px;
	width: 21px;
	height: 20px;
	background: url("../img/spritesheet.png") no-repeat;
	background-position: -43px -5px;
}

.basket {
	position: relative;
}

.full .basket-btn,
.basket:hover .basket-btn {
	color: #313131;
	background-color: #f7f6f3;
}

.full .basket-btn::before,
.basket:hover .basket-btn::before  {
	background-position: -74px -5px;
}

.full .basket-btn::after {
	content: "";
	position: absolute;
	z-index: 4;
	top: 8px;
	left: 20px;
	width: 15px;
	height: 11px;
	background-color: #e84d37;
}

.user-basket {
	position: absolute;
	top: 38px;
	right: 0;
	z-index: 5;
	display: none;
	background-color: #f8f7f4;
	border-radius: 7px;
	padding: 15px;
	box-shadow: 0 20px 30px rgba(0, 0, 0, 0.4);
  color: #323232;
  font-size: 13px;
	line-height: 16px;
}

.user-basket::before {
	content: "";
	position: absolute;
	top: -6px;
	width: 100%;
	height: 6px;
}

.full .user-basket {
  width: 539px;
	min-height: 242px;
}

.user-basket table {
	border-collapse: collapse;
	text-align: left;
}

.user-basket .price {
	color: #999999;
}

.user-basket td {
	padding: 9px 10px;
}

table a {
	text-decoration: none;
	color: #323232;
}

table a:hover,
table a:active {
	color: #e84d37;
}

.user-basket .del {
	cursor: pointer;
}

.user-basket .mini-ice {
  width: 33px;
  height: 33px;
  border-radius: 50%;
}

.user-basket .name-ice {
	width: 240px;
}

.user-basket td {
	white-space: nowrap;
}

.user-basket .name-ice {
	white-space: inherit;
}

.user-basket .total {
	font-size: 15px;
	line-height: 18px;
	font-weight: bold;
	text-align: right;
	border-top: 1px solid #cacac7;
	padding-top: 15px;
}

.user-basket .btn {
	width: 170px;
	height: 45px;
	border-radius: 23px;
	text-align: center;
	padding-top: 11px;
	font-size: 18px;
	line-height: 24px;
	margin-top: 10px;
}

.user-basket::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 0;
	width: 100%;
	height: 6px;
}

.basket:hover .user-basket {
	display: block;
}

.contact {
	float: right;
	min-height: 45px;
	width: 267px;
	text-align: right;
}

.contact span {
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;
}

.contact span:last-child {
	font-size: 22px;
	line-height: 24px;
}

/*Конец шапки*/
/*Слайдер*/

.slider {
	position: relative;
}

.slide {
	display: none;
	width: 680px;
	margin: 0 auto;
	padding-top: 210px;
	padding-bottom: 20px;
	margin-bottom: 40px;
}

.description {
	text-align: center;
}

.description p {
	font-weight: bold;
	font-size: 60px;
	line-height: 60px;
}

.description .btn {
	font-size: 32px;
	line-height: 44px;
	margin: -28px auto;
	padding: 10px 40px;
	border-radius: 35px;
	box-shadow: 0 2px 3px #bd3f18;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.description .btn:active {
	box-shadow: inset 0 2px 3px #942718;
}

.slider-controls {
	position: absolute;
	z-index: 10;
	left: 27px;
	bottom: 25px;
}

.slider-controls label {
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 8px;
	vertical-align: top;
	background-color: transparent;
	border: 2px solid #ffffff;
	border-radius: 50%;
	cursor: pointer;
}

.slider-controls label:hover {
	background-color: rgba(255, 255, 255, 0.3);
}

#btn-1:checked ~ .site-wrapper #slide1,
#btn-2:checked ~ .site-wrapper #slide2,
#btn-3:checked ~ .site-wrapper #slide3 {
	display: block;
}

#btn-1:checked ~ .site-wrapper {
	background-color: #849d8f;
	background-image: url("../img/slide-1.png");
}

#btn-2:checked ~ .site-wrapper {
	background-color: #8996a6;
	background-image: url("../img/slide-2.png");
}

#btn-3:checked ~ .site-wrapper {
	background-color: #9d8b84;
	background-image: url("../img/slide-3.png");
}

#btn-1:checked ~ .site-wrapper label[for="btn-1"],
#btn-2:checked ~ .site-wrapper label[for="btn-2"],
#btn-3:checked ~ .site-wrapper label[for="btn-3"] {
	background-color: #ffffff;
}

/*Конец слайдера*/

.discount {
	margin-bottom: 40px;
}

.discount-item {
	float: left;
	width: 560px;
	min-height: 229px;
	margin-right: 26px;
	background: #c40d38 url("../img/fon-raspberry.jpg") no-repeat center top;
	background-size: cover;
	border-radius: 15px;
	padding: 20px;
}

.discount-item:last-child {
	margin-right: 0;
	background: #653a23 url("../img/fon-choсo.jpg") no-repeat center top;
	background-size: cover;
}

.discount-item h2 {
	margin: 0;
}

.discount-item p {
	font-weight: 500;
	font-size: 18px;
	line-height: 22px;
}

.discount-item .btn {
	float: right;
	border-radius: 23px;
	padding: 11px 23px;
	font-size: 18px;
	line-height: 24px;
	margin-top: 18px;
}

.popular {
	font-size: 0;
}

.product {
	min-height: 1100px;
	margin-bottom: 27px;
	font-size: 0;
}

.product-item  {
	display: inline-block;
	vertical-align: top;
	position: relative;
	margin-right: 26px;
	min-height: 342px;
	width: 267px;
	text-align: center;
	margin-bottom: 20px;
}

.product-item:nth-child(4n) {
	margin-right: 0;
}

.product-item-img {
	position: relative;
	margin-bottom: 8px;
}

.product-item-img img {
  border-radius: 50%;
}

.product-item-img .hit {
	position: absolute;
	top: 0;
	left: 0;
}

.product-item-img p {
	position: absolute;
	top: 163px;
	font-weight: bold;
	font-size: 45px;
	line-height: 45px;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}

.product-item-img span {
	font-size: 30px;
}

.product-item .info {
	color: #ffffff;
	font-weight: 500;
	font-size: 16px;
	line-height: 22px;
	text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.product-item .ruble {
	vertical-align: middle;
	margin-bottom: 6px;
}

.product-item .info:hover,
.product-item .info:active,
.html-academy p a:hover,
.html-academy p a:active,
.breadcrumbs a:hover,
.breadcrumbs a:active {
	color: #ffbc9e;
  border-bottom: 1px solid #ffbc9e;
}

.product-item::before {
	content: "";
	width: 293px;
	height: 118%;
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 5px;
	position: absolute;
	top: -5px;
	left: -13px;
	z-index: -1;
	display: none;
	box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15);
}

.product-btn {
	position: absolute;
	bottom: -37px;
	left: 33px;
	width: 200px;
	border-radius: 23px;
	padding: 12px 16px;
	font-size: 18px;
	line-height: 24px;
	color: #fefefe;
	display: none;
}

.product-item:hover::before,
.product-item:hover .product-btn {
	display: block;
}

.product-item:hover .info {
	border: none;
}

.product-item:hover {
	z-index: 5;
}

.seo {
	margin-bottom: 40px;
	color: #323232;
	padding: 23px 20px;
	background: #f1e7ce url("../img/wafer-fon.jpg");
	border-radius: 14px;
}

.seo h3 {
	font-weight: bold;
	margin: 0;
	padding: 0;
}

.seo-item {
	float: left;
	width: 540px;
	margin-right: 26px;
	position: relative;
}

.seo-item:nth-child(2n+1) {
	margin-right: 0;
}

.seo-item img {
	position: absolute;
	left: 0;
	top: 10px;
}

.seo-item p {
	padding-left: 57px;
	padding-top: 8px;
	padding-right: 5px;
	font-size: 16px;
	line-height: 22px;
	margin-bottom: 0;
}

.blog-and-sub {
	margin-bottom: 40px;
	color: #323232;
}

.blog {
	float: left;
	margin-right: 26px;
	min-height: 220px;
	width: 560px;
	padding: 22px 250px 20px 20px;
	background: #ffffff url("../img/fon-strawberry.jpg") no-repeat;
	background-position: top -224px left -52px;
	border-radius: 14px;
}

.blog h4 {
	font-weight: 500;
	margin-top: 0;
	margin-bottom: 4px;
}

.blog a {
	font-size: 24px;
	line-height: 30px;
	font-weight: bold;
	color: #323232;
}

.blog a:hover,
.blog a:active {
	color: #e84d37;
}

.sub {
	float: left;
	position: relative;
	z-index: 1;
	min-height: 220px;
	width: 560px;
	border-radius: 14px;
	background-color: #ffffff;
	padding: 30px 25px;
	text-align: right;
}

.sub::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 560px;
	height: 100%;
	background: url("../img/fon-post.png") no-repeat top center;
	background-size: 100% 100%;
}

.sub p {
	font-size: 16px;
	line-height: 22px;
	color: #5a5a5a;
	margin-top: 0;
	text-align: left;
}

.sub form {
	margin-top: 35px;
}

.sub input[type=email] {
	width: 366px;
	height: 44px;
	margin-right: 10px;
	border-radius: 4px;
	border: 1px solid #d3d3d2;
	outline: none;
	padding-left: 15px;
	padding-right: 15px;
}

.sub label {
	position: absolute;
	top: 115px;
	left: 40px;
	font-size: 11px;
	line-height: 13px;
	color: #999999;
	display: none;
}

.sub input[type=email]:hover {
	box-shadow: inset 0 0 0 1px #c7c6c5;
}

.sub input[type=email]:focus{
	box-shadow: inset 0 0 0 1px #8fbdec;
	border-color: #8fbdec;
}

.sub input[type=email]:focus::-webkit-input-placeholder {
	color: transparent;
}

.sub input[type=email]:focus::-moz-placeholder {
	color: transparent;
}

.sub input[type=email]:focus:-moz-placeholder {
	color: transparent;
}

.sub input[type=email]:focus:-ms-input-placeholder {
	color: transparent;
}

.sub input[type=email]:focus + label {
	display: block;
	color: #5b9ddf;
}

.sub input[type=email]:valid + label {
	display: block;
}

.sub .btn {
	font-size: 18px;
	line-height: 24px;
	padding: 10px 18px;
	border-radius: 35px;
	border: none;
	cursor: pointer;
}

.map-contacts {
	position: relative;
	width: 100%;
	min-height: 430px;
	margin: 0 auto;
	background: #f7f1d9 url("../img/map.jpg") no-repeat top center;
}

.yandex-map {
	position: absolute;
	top:0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
}

.contact-us {
	float: right;
	position: relative;
	z-index: 3;
	color: #323232;
	background: #ffffff;
	width: 302px;
	min-height: 304px;
	border-radius: 13px;
	padding: 15px 25px;
	margin-top: 62px;
}

.contact-us p {
	font-size: 14px;
	line-height: 20px;
	margin-bottom: 18px;
}

.contact-us b{
	display: block;
	font-size: 18px;
	line-height: 24px;
	margin: 2px 0;
}

.contact-us .btn {
	width: 253px;
	border-radius: 23px;
	padding: 10px 20px;
	font-size: 18px;
	line-height: 24px;
	text-align: center;
	margin-top: 5px;
}

/*Конец основного содержимого главной страницы, всплывающая форма ниже*/

.breadcrumbs-block {
	min-height: 20px;
	width: 267px;
	margin-bottom: 5px;
}

.breadcrumbs {
	margin-top: -22px;
	margin-left: -9px;
	padding: 0;
	margin-bottom: 0;
}

.breadcrumbs li {
	display: inline-block;
	font-size: 14px;
	line-height: 16px;
}

.breadcrumbs li::before {
	content: "»";
	margin-left: 5px;
	margin-right: 5px;
	color: #ffffff;
}

.breadcrumbs li:first-child::before {
	content: "";
}

.breadcrumbs a {
	color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/*Фильтр*/

.filter {
	min-height: 157px;
	width: 1146px;
	margin-bottom: 15px;
	font-size: 16px;
	line-height: 18px;
	font-weight: 500;
}

.filter fieldset {
	display: inline-block;
	border: none;
	vertical-align: top;
	padding-left: 0;
	padding-bottom: 16px;
	margin-left: 0;
}

.filter legend {
	font-size: 14px;
	line-height: 16px;
	font-weight: 500;
	padding-left: 16px;
}

.filter .filter-block {
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 20px;
	padding: 9px 10px 9px 8px;
}

.sort-block .filter-block {
	padding: 6px 15px 7px 15px;
	width: 193px;
	text-align: center;
}

.sort-block select {
	border-color: transparent;
	color: #ffffff;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: transparent url(../img/select.png) 98% center no-repeat;
}

.sort-block option {
	color: #323232;
}

fieldset:first-child:hover .filter-block{
	background-color: #ffffff;
}

fieldset:first-child:hover select {
	color: #323232;
	background: url(../img/selectHover.png) 98% center no-repeat;
}

.price-block .filter-block {
	position: relative;
	width: 220px;
	padding: 16px 15px;
}

.price-block .scale {
	height: 4px;
	background: rgba(255, 255, 255, 0.5);
}

.price-block .bar {
	width: 100px;
	height: 4px;
	background: #ffffff;
	margin-left: 29px;
}

.range-toggle {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #ffffff;
	cursor: pointer;
	position: absolute;
	top: 8px;
}

.range-toggle-min {
	left: 34px;
}

.range-toggle-max {
	left: 132px;
}
.filter-btn {
	display: inline-block;
	height: 36px;
	width: 144px;
	color: #ffffff;
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 18px;
	border: 2px solid #fcfcfc;
	margin-top: 22px;
	cursor: pointer;
}

.filter-btn:hover {
	color: #323232;
	background-color: #fbfcfb;
	border: none;

}

.filter-btn:active {
	color: #323232;
	background-color: #eaeaea;
	box-shadow: inset 0 2px 1px #6c6d6c;
	border: none;
}

.fatty label {
	position: relative;
	padding-left: 37px;
	padding-right: 8px;
	cursor: pointer;
}

.fatty label:last-child {
	padding-right: 5px;
}

.fatty input {
	display: none;
}

.fatty label::before {
	content: "";
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid #f8f7f4;
	position: absolute;
	left: 8px;
	top: 0;
}

.fatty label::after {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #f8f7f4;
	position: absolute;
	left: 13px;
	top: 5px;
	display: none;
}

.fatty input[type=radio]:checked + label:after {
	display: block;
}

.fatty label:hover::before {
	width: 16px;
	height: 16px;
	border: 2px solid #f8f7f4;
}

.additive label {
	position: relative;
	padding-left: 39px;
	padding-right: 10px;
	cursor: pointer;
}

.additive label:last-child {
	padding-right: 8px;
}

.additive input {
	display: none;
}

.additive label::before {
	content: "";
	width: 18px;
	height: 18px;
	border-radius: 3px;
	border: 1px solid #ffffff;
	position: absolute;
	left: 8px;
	top: 0;
}

.additive label::after {
	content: "";
	width: 9px;
	height: 5px;
	border: 2px solid #ffffff;
	border-top: none;
	border-right: none;
	-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg);
	position: absolute;
	left: 13px;
	top: 4px;
	display: none;
}

.additive input[type=checkbox]:checked + label:after {
	display: block;
}

.additive label:hover::before {
	width: 16px;
	height: 16px;
	border: 2px solid #ffffff;
}

.additive input[type=checkbox]:disabled + label::after,
.additive input[type=checkbox]:disabled + label::before,
.fatty input[type=radio]:disabled + label::before {
	border-color: rgba(255, 255, 255, 0.3);
}

.fatty input[type=radio]:disabled + label::after {
	background-color: rgba(255, 255, 255, 0.3);
}

.fatty input[type=radio]:disabled + label:hover::before,
.additive input[type=checkbox]:disabled + label:hover::before {
	width: 18px;
	height: 18px;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

/*Пагинатор*/

.paginator {
	width: 1146px;
	height: 58px;
	text-align: right;
	border-bottom: 1px solid #a9bbb1;
}

.page-btn {
	display: inline-block;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: transparent;
	text-decoration: none;
	color: #ffffff;
	font-size: 16px;
	line-height: 18px;
	font-weight: 500;
	padding: 5px 0;
	text-align: center;
	margin-right: -2px;
}

.first-page-btn,
.last-page-btn {
	display: inline-block;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	padding: 5px 0;
	text-decoration: none;
	text-align: center;
	font-size: 16px;
	line-height: 18px;
	color: transparent;
	background: url("../img/spritesheet.png") no-repeat;
}

.first-page-btn {
	background-position: -16px 1px;
}

.last-page-btn {
	background-position: 6px 1px;
}

.page-btn:hover,
.last-page-btn:hover {
	background-color: rgba(255, 255, 255, 0.2);
}

.page-btn:active,
.paginator .current {
	background-color: #ffffff;
	color: #323232;
}

.last-page-btn:active {
	background-color: rgba(255, 255, 255, 0.5);
}

/*Всплывающая форма*/

@-webkit-keyframes bounce {
	0%   {
		-webkit-transform: translateY(-2000px);
				transform: translateY(-2000px);
	}
	70%  {
		-webkit-transform: translateY(30px);
				transform: translateY(30px);
	}
	90%  {
		-webkit-transform: translateY(-10px);
				transform: translateY(-10px);
	}
	100% {
		-webkit-transform: translateY(0);
				transform: translateY(0);
	}
}

@keyframes bounce {
	0%   {
		-webkit-transform: translateY(-2000px);
				transform: translateY(-2000px);
	}
	70%  {
		-webkit-transform: translateY(30px);
				transform: translateY(30px);
	}
	90%  {
		-webkit-transform: translateY(-10px);
				transform: translateY(-10px);
	}
	100% {
		-webkit-transform: translateY(0);
				transform: translateY(0);
	}
}

@-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);
	}
}

.feedback-block {
	width: 1146px;
	height: 560px;
	border-bottom: 1px solid #a9bbb1;
}

.feedback {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 30;
	margin-top: -221px;
	margin-left: -239px;
	display: none;
	height: 442px;
	width: 478px;
	color: #323232;
	background: #f8f7f4;
	border-radius: 10px;
	padding: 20px 25px;
}

.feedback-show {
	display: block;
	-webkit-animation: bounce 0.6s;
			animation: bounce 0.6s;
}

.feedback-error {
	-webkit-animation: shake 0.6s;
			animation: shake 0.6s;
}

.feedback-close {
	width: 18px;
	height: 18px;
	position: absolute;
	top: 15px;
	right: 15px;
	font-size: 0;
	border: 0;
	background-color: transparent;
	outline: 0;
	cursor: pointer;
}

.feedback-close::before,
.feedback-close::after {
	content: "";
	position: absolute;
	top: 7px;
	left: 0;
	width: 21px;
	height: 2px;
	background-color: #000000;
	border-radius: 1px;
}

.feedback-close::before {
	-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
}

.feedback-close::after {
	-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg);
}

.feedback span {
	font-size: 24px;
	line-height: 28px;
	font-weight: 500;
}

.feedback input[type=text],
.feedback input[type=email],
.feedback textarea {
	border-radius: 6px;
	border: 1px solid #d3d3d2;
	padding-left: 15px;
	padding-right: 15px;
	margin-top: 20px;
}

.feedback input[type=text],
.feedback input[type=email] {
	width: 267px;
	height: 44px;
}

.feedback textarea {
	width: 426px;
	height: 155px;
	padding: 11px 15px;
}

.feedback label {
	position: absolute;
	top: 53px;
	left: 40px;
	font-size: 11px;
	line-height: 13px;
	color: #999999;
	display: none;
}

.feedback .user-email {
	top: 117px;
}

.feedback .area {
	top: 181px;
}

.feedback input[type=text]:hover,
.feedback input[type=email]:hover,
.feedback textarea:hover {
	box-shadow: inset 0 0 0 1px #c7c6c5;
}

.feedback input[type=text]:focus,
.feedback input[type=email]:focus,
.feedback textarea:focus {
	box-shadow: inset 0 0 0 1px #8fbdec;
	border-color: #8fbdec;
	outline: none;
}

.feedback input[type=text]:focus + label,
.feedback input[type=email]:focus + label,
.feedback textarea:focus + label {
	display: block;
	color: #5b9ddf;
}

.feedback input[type=text]:focus::-webkit-input-placeholder,
.feedback input[type=email]:focus::-webkit-input-placeholder,
.feedback textarea:focus::-webkit-input-placeholder {
	color: transparent;
}

.feedback input[type=text]:focus::-moz-placeholder,
.feedback input[type=email]:focus::-moz-placeholder,
.feedback textarea:focus::-moz-placeholder {
	color: transparent;
}

.feedback input[type=text]:focus:-moz-placeholder,
.feedback input[type=email]:focus:-moz-placeholder,
.feedback textarea:focus:-moz-placeholder {
	color: transparent;
}

.feedback input[type=text]:focus:-ms-input-placeholder,
.feedback input[type=email]:focus:-ms-input-placeholder,
.feedback textarea:focus:-ms-input-placeholder {
	color: transparent;
}

.feedback .btn {
	float: right;
	width: 140px;
	height: 45px;
	border-radius: 23px;
	border: none;
	font-size: 18px;
	line-height: 24px;
	margin-top: 20px;
	cursor: pointer;
}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 25;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: none;
}

.overlay-show {
	display: block;
}

/*Подвал*/

.main-footer {
	min-height: 103px;
	padding: 20px 0;
}

.footer-social {
	float: left;
	width: 267px;
	margin-right: 26px;
	padding-top: 19px;
  padding-left: 4px;
}

.social-btn {
	display: inline-block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: url("../img/spritesheet.png") no-repeat;
	margin-right: 15px;
	opacity: 0.8;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.4);
}

.social-btn-twit {
	background-position: -100px -78px;
}

.social-btn-inst {
	background-position: -31px -78px;
}

.social-btn-fb {
	background-position: -68px -36px;
}

.social-btn-vk {
	background-position: -133px -6px;
}

.social-btn:hover {
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.6);
	opacity: 1;
}

.social-btn:active {
	border-color: #dbe3de;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.6),
              inset 0 2px 1px #9b9b9b;
}

.footer-nav {
	float: left;
	width: 560px;
	margin-right: 26px;
	padding-left: 128px;
	padding-right: 120px;
}

.footer-nav ul {
	padding: 0;
	margin-top: 12px;
}

.footer-nav li {
	float: left;
	position: relative;
	height: 23px;
	min-width: 142px;
	list-style: none;
	font-size: 13px;
	line-height: 18px;
}

.footer-nav a {
	color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.footer-nav a::before {
	content: "";
	display: none;
	position: absolute;
	top: 2px;
	left: -22px;
	width: 15px;
	height: 13px;
	background: url("../img/spritesheet.png") no-repeat;
	background-position: -5px -77px;
}

.footer-nav a:hover {
	font-weight: bold;
}

.footer-nav a:hover::before {
	display: block;
}

.html-academy {
	float: left;
	width: 267px;
	position: relative;
}

.html-academy > a {
	position: relative;
	top: 0;
	left: 78px;
}

.html-academy p {
	margin-top: 0;
	font-size: 12px;
	line-height: 18px;
	text-align: right;
}

.html-academy .academy-link {
	color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}