style.css

@font-face {
	font-family: FuturaNormal;
	src: url(fonts/futura-normal.woff) format('woff');
}

@font-face {
	font-family: HelveticaNeueRoman;
	src: url(fonts/helveticaneue-cyr-roman.woff) format('woff');
}

@font-face {
	font-family: HelveticaNeueLight;
	src: url(fonts/helveticaneue-cyr-light.woff) format('woff');
}

@font-face {
	font-family: HelveticaNeueMedium;
	src: url(fonts/helveticaneue-medium.woff) format('woff');
}

@font-face {
	font-family: HelveticaNeueBold;
	src: url(fonts/helveticaneue-bold.woff) format('woff');
}

@font-face {
	font-family: HelveticaNeueHeavy;
	src: url(fonts/helveticaneue-heavy.woff) format('woff');
}

@font-face {
	font-family: ProximaNovaLight;
	src: url(fonts/proxima-nova-light.woff) format('woff');
}

@font-face {
	font-family: ProximaNovaSemibold;
	src: url(fonts/proxima-nova-semibold.otf);
}

@font-face {
	font-family: ProximaNovaExtrabld;
	src: url(fonts/proxima-nova-extrabld.woff) format('woff');
}

body {
	margin: 0;
	transition: .4s;
}

.dark {
	display: none;
	position: fixed;
	z-index: 2;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #000;
	opacity: 0;
	transition: .4s;
}

.wrapper {
	width: 1170px;
	margin: 0 auto;
}

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

hr {
	border: 0;
	margin: 0 auto;
}

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

a {	text-decoration: none}

button {
	padding: 0;
	border: 0;
	cursor: pointer;
	outline: none;
	background: 0;
}

input {
	outline: 0;
	border: 0;
	background: 0;
}

hr.short {
	background: #000;
	width: 70px;
	height: 2px;
}

hr.long {
	background: #e5e5e5;
    width: 100%;
    height: 1px;
}

#map {height: 100%}

input[type="submit"] {cursor: pointer}

.bttn {
	display: block;
	width: 228px;
	height: 48px;
	font: 12px/48px HelveticaNeueRoman;
	text-transform: uppercase;
	text-align: center;
	transition: .4s;
}

.gray.bttn {
	border: 1px solid #e2e2e2;
	color: #676767;
}

.gray.bttn:hover {color: #676767}

.black.bttn {
	border: 1px solid #000;
	color: #000;
}

.full.black.bttn {
	border: 1px solid #000;
	color: #fff;
	background: #000;
}

.full.black.bttn:hover {background: #424242}

.black.bttn:hover {
	background: #000;
	color: #fff;
}

.white.bttn {
	border: 1px solid #fff;
	color: #fff;
}

.white.bttn:hover {
	background: #fff;
	color: #000;
}

section.head {
	height: 100vh;;
	transition: .4s;
}

header .menu {height: 67px}

.black nav a {color: #000}
.black .logo {background: url(images/logo-black.png) no-repeat center / 100% 100%}

nav > ul {
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
}

nav .menu {
	width: 520px;
	margin: 0 0 0 100px;
}

nav .icons {
	width: 156px;
    float: right;
    position: relative;
    top: 18px;
}

.black .icons {top: 18px}

nav > ul > li:nth-child(n+1):nth-child(-n+4) a {
	text-transform: uppercase;
}

nav a {
	font: 15px/26px FuturaNormal;
	color: #fff;
	cursor: pointer;
}

nav .logo {
	display: inline-block;
	width: 70px;
	height: 20px;
	background: url(images/logo.png) no-repeat center / cover;
	position: relative;
	top: 3px;
}

nav > ul > li {
	display: inline-block;
	position: relative;
}
/*
.drop-menu {padding: 15px}

.drop-menu > a::after {
	content: "";
	display: inline-block;
	margin: 0 0 1px 12px;
	width: 6px;
	height: 6px;
	background: url(images/triangle.svg) no-repeat center;
}
*/
.black .drop-menu > a::after {background-image: url(images/triangle-black.svg)}

.drop-menu ul {
	width: 233px;
	padding: 15px;
	background: #1e1e1e;
	visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 0px;
}

.drop-menu li {	padding: 5px 0}

.drop-menu li a {
	font: 12px/36px HelveticaNeueRoman;
	color: #c8c8c8;
}
/*
.drop-menu a:hover {color: #fff}
.drop-menu:hover {background: #1e1e1e}
.drop-menu:hover > a {color: #c8c8c8}

.drop-menu:hover ul {
	visibility: visible;
    opacity: 1;
    z-index: 1;
}
*/
nav .search form {
	position: absolute;
	left: 0px;
	top: -7px;
	opacity: 0;
	z-index: -1;
	transition: .4s;
	display: none;
}

nav input[type="search"] {
	-webkit-appearance: none;
	background: transparent;
	width: 188px;
	height: 25px;
	border: 0;
	border-bottom: 1px solid #fff;
	color: #fff;
	padding: 0 4px;
	font: 14px/36px ProximaNovaLight;
}

nav input[type="search"]::placeholder {color: #fff}
.black nav input[type="search"]::placeholder {color: #000}

input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	width: 10px;
	height: 10px;
	background: url(images/search-close.svg);
}

.black input[type="search"]::-webkit-search-cancel-button {
	background: url(images/search-close-black.svg);
}

.black nav input[type="search"] {
	border-bottom: 1px solid #000;
	color: #000;
}

nav .icons button,
nav .wish a,
nav .cart a {
	display: block;
	width: 13px;
	height: 13px;
}

nav .search button {background: url(images/search.svg) no-repeat center}
nav .account button {background: url(images/account.svg) no-repeat center}
nav .wish a {background: url(images/wish.svg) no-repeat center}
nav .cart a {background: url(images/cart.svg) no-repeat center}

.black .search button {background-image: url(images/search-black.svg)}
.black .wish a {background-image: url(images/wish-black.svg)}
.black .cart a {background-image: url(images/cart-black.svg)}
.black .hamburger {background-image: url(images/hamburger-black.svg)}

nav .language {
	text-decoration: underline;
	font: 16px/26px HelveticaNeueRoman;
	text-align: center;
}

nav .search input[type="submit"] {display: none}

.sign {
	width: 370px;
	height: 425px;
	background: #fff;
	overflow: hidden;
	position: fixed;
	top: -600%;
	left: 50%;
	z-index: 2;
	transform: translate(-50%, -50%);
	padding: 45px 0 25px 0;
	transition: .4s;
}

.sign > div {
	width: 100%;
	position: absolute;
	transition: .4s;
}

.sign .in {
	left: 0px;
}

.close {
	width: 26px;
	height: 26px;
	background: url(images/close.svg) no-repeat center;
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
}

.close.simple {background: url(images/search-close-black.svg) no-repeat center / 60% 60%}

.sign h3 {
	text-align: center;
	font: 24px/26px HelveticaNeueRoman;
	margin: 0 0 35px 0;
}

.sign form {
	padding: 0 30px;
	position: relative;
}

.sign form button {
	position: absolute;
	top: 72px;
    right: 50px;
    color: #aeaeae;
}

.sign input:not([type="submit"]) {
	width: 100%;
	height: 46px;
	border: 1px solid #d9d9d9;
	padding: 0 20px;
	font: 16px/26px HelveticaNeueRoman;
	color: #393939;
	box-sizing: border-box;
}

.sign .in input[type="password"] {
	margin: 10px 0 21px 0;
}

.sign input[type="submit"] {
	width: 168px;
	height: 54px;
	margin: 0 auto;
	font: 14px/26px HelveticaNeueLight;
	text-transform: none;
}

.sign .with {
	display: block;
	font: 14px/26px HelveticaNeueLight;
	color: #adadad;
}

.sign .in .with {margin: 20px auto 25px auto}

.sign .with::before,
.sign .with::after {
	content: "";
	display: inline-block;
	height: 1px;
	background: #e6e6e6;
	position: relative;
	top: -3px;
}

.sign .in .with::before,
.sign .in .with::after {width: 128px}

.sign .with::before {margin: 0 23px 0 0}
.sign .with::after {margin: 0 0 0 23px}

.social {
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

.sign .social {	width: 252px}
.social * {
	border-radius: 50%;
	transition: .4s;
}

.sign .social * {
	width: 40px;
	height: 40px;
}

.social .in {background: #393939 url(images/in.svg) no-repeat center / 35% 35%}
.social .fb {background: #393939 url(images/fb.svg) no-repeat center / 35% 35%}
.social .vk {background: #393939 url(images/vk.svg) no-repeat center / 35% 35%}
.social .lj {background: #393939 url(images/lj.svg) no-repeat center / 35% 35%}
.social .pi {background: #393939 url(images/pi.svg) no-repeat center / 35% 35%}

.social .in:hover {background-image: url(images/in-black.svg)}
.social .fb:hover {background-image: url(images/fb-black.svg)}
.social .vk:hover {background-image: url(images/vk-black.svg)}
.social .lj:hover {background-image: url(images/lj-black.svg)}
.social .pi:hover {background-image: url(images/pi-black.svg)}

.social *:hover {background-color: #dcdcdc}

.sign hr {
	background: #e6e6e6;
	height: 1px;
	margin: 33px 0 25px 0;
}

 .in > button {
 	text-decoration: underline;
 	font: 14px/14px HelveticaNeueLight;
 	display: block;
 	margin: 0 auto;
 }

 .sign .up {
	position: absolute;
    top: 45px;
    left: 100%;
 }

 .sign .up input {
	margin: 0 0 10px 0;
}

.sign .up input[type="submit"] {
	margin: 5px auto;
}

.sign .up .with {margin: 15px 0 5px 0}

.sign .up .with::before,
.sign .up .with::after {width: 121px}

h1 {
	font: 60px/70px FuturaNormal;
	margin: 25vh 0 0 0;
	text-align: center;
	color: #fff;
	text-transform: uppercase;
}

section.head h1 {
	width: 100%;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

header.main {
	position: absolute;
	top: 20px;
	left: 0;
	right: 0;
	z-index: 2;
}

section.head .bttn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%);
}

.breadcrumbs {
	height: 69px;
	border-top: 1px solid #f5f5f5;
	border-bottom: 1px solid #f5f5f5;
}

.breadcrumbs * {
	font: 14px/69px HelveticaNeueLight;
	color: #353535;
}

.head .owl-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 36px;
	position: absolute;
	top: 70%;
	left: 50%;
	transform: translateX(-50%);
}

.head .owl-nav div {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(255,255,255,.2);
	cursor: pointer;
	box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, .35);
	transition: .4s;
}

.head .owl-nav .disabled {
	width: 15px;
	height: 15px;
	background: #fff;
}

.filter {
	width: 215px;
	margin: 20px 85px 0 0;
	float: left;
}

.filter label {
	font: 12px/26px HelveticaNeueLight;
	text-transform: uppercase;
	cursor: pointer;
	display: inline-block;
	margin: 20px 0;
	position: relative;
}

#novelties + label::before,
#sale + label::before,
.filter li label::before {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	border: 1px solid #000;
}

#novelties + label::before, #sale + label::before {margin: 0 20px 0 0}
.filter li label::before {margin: 0 10px 0 20px}

#novelties + label::after,
#sale + label::after,
.filter li label::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	background: #000;
	position: absolute;
	left: 2px;
	top: 8px;
	opacity: 0;
	transition: .4s;
}

.filter li label::after {left: 22px}

#novelties:checked + label::after,
#sale:checked + label::after,
.filter input:checked + label::after {
	opacity: 1;
}

.filter .accordion > label::before {
	content: "+";
	display: inline-block;
	margin: 0 22px 0 0;
	transform: rotate(0deg);
	transition: .4s;
	transform-origin: 48% 60%;
	font-size: 20px;
}

.filter li label {
	font: 12px/26px HelveticaNeueLight;
	margin: 4px 0;
	text-transform: inherit;
}

.accordion > input:checked ~ label::before {transform: rotate(-45deg)}

.accordion label {cursor: pointer}

.accordion > div {
    height: 0;
    transition: .4s;
    overflow: hidden;
}

.accordion > #collection:checked ~ div {height: 310px}

.catalog .head {
	margin: 40px 0 30px 0;
	width: 870px;
    float: right;
}

.catalog h1 {
	font: 24px/26px HelveticaNeueMedium;
	color: #000;
	margin: 0;
	display: inline-block;
}

.catalog .found {
	display: inline-block;
	float: right;
	font: 12px/26px HelveticaNeueLight;
}

.choosed {
	float: left;
	width: 870px;
	margin: 0 0 40px 0;
}

.choosed .item {
	display: inline-block;
	font: 12px/48px HelveticaNeueBold;
	background: #9e9e9e;
	color: #fff;
	text-transform: uppercase;
	padding: 0 15px;
	margin: 0 11px 0 0;
	transition: .4s;
	opacity: 1;
}

.choosed .item button {
	background: 0;
	color: #fff;
	margin: 0 0 0 10px;
	font: 18px/26px HelveticaNeueBold;
}

.products {
	width: 870px;
	float: left;
}

.products .product,
section.wear-with .product {
	width: 270px;
	float: left;
	position: relative;
	margin: 0 30px 30px 0;
}

.products .product *,
section.wear-with * {
	text-align: center;
	font: 14px/26px HelveticaNeueLight;
	margin: 0;
}

.product .img {
	display: block;
	height: 400px;
	overflow: hidden;
}

.products .product .sizes,
section.wear-with .sizes {
	position: relative;
	height: 50px;
	background: rgba(0,0,0,.5);
	bottom: 8px;
	transition: .4s;
}

.products .product .sizes div,
section.wear-with .sizes div {
	margin: 0 auto;
	padding: 10px 0;
	width: 100%;
	display: flex;
	justify-content: center;
}

.products .product .sizes span,
section.wear-with .sizes span {
	font: 12px/28px HelveticaNeueLight;
	color: #fff;
	display: inline-block;
	width: 28px;
	height: 28px;
	border: 1px solid #fff;
}

.products .product .sizes span + span,
section.wear-with .sizes span + span {
	margin-left: 8px;
}

.products .product .img:hover .sizes,
section.wear-with .img:hover .sizes {bottom: 58px}

.products .product .title {
	color: #9b9ea8;
	display: block;
	margin: 10px 0;
}

.products .product .price {color: #000}

.old-price {
	font: 12px/26px HelveticaNeueLight;
	color: #ca2221;
	text-decoration: line-through;
}

.with-sale {position: relative}

.with-sale::before {
	content: "Sale";
	font: 14px/26px HelveticaNeueRoman;
	color: #000;
	display: inline-block;
	padding: 6px 18px;
	border: 1px solid;
    border-image: url(images/sale-border.png) 1;
	position: absolute;
	z-index: 1;
	top: 10px;
	left: 10px;
}

.products .product img {width: 100%}

.products button {
	width: 268px;
	text-transform: none;
	margin: 0 auto 30px auto;
}

.novelties,
.sale {
	height: 88.89vh;
	margin: 10px 0 0 0;
}

.novelties {background: url(images/novelties.jpg) no-repeat center / cover}
.sale {background: url(images/sale.jpg) no-repeat center / cover}

h2 {
	font: 48px/36px ProximaNovaSemibold;
	text-transform: uppercase;
	letter-spacing: 14px;
}

.novelties h2 {
	margin: 36.11vh 0 0 700px;
	display: inline-block;
}

.sale h2 {
	margin: 36.11vh 0 0 0;
	display: inline-block;
}

.novelties a {margin: 7.41vh 0 0 700px}
.sale a {margin: 7.41vh 0 0 0}

section.account {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 60px 0;
}

.account .menu {height: 267px}

.account > div {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 270px;
}

.account > div a {
	display: block;
	height: 63px;
	background: #f1f1f1;
	font: 16px/63px HelveticaNeueLight;
	color: #353535;
	text-align: center;
	cursor: pointer;
}

.account > div a.active {
	background: #767676;
	color: #fff;
}

.account .wishlist,
.account .history {	width: 870px}

.wishlist .item,
.history .item {
	border: 1px solid #ececec;
	position: relative;
	margin: 0 0 18px 0;
}

.wishlist .item img,
.history .item img {
	float: left;
	margin: 0 60px 0 0;
}

.wishlist .item > div,
.history .item > div {float: left}

.history .date {
	font: 14px/26px HelveticaNeueLight;
	display: inline-block;
	margin: 50px 130px 0 0;
}

.history .number {
	font: 20px/48px HelveticaNeueLight;
	float: left;
}

.wishlist .item .title {
	font: 22px/26px HelveticaNeueLight;
	margin: 55px 0 20px 0;
}

.history .item .title {
	font: 22px/26px HelveticaNeueLight;
	margin: 10px 0 20px 0;
}

.wishlist .item .price,
.history .item .price {
	font: 14px/26px HelveticaNeueLight;
	color: #767676;
}

.wishlist .item .size-title,
.history .item .count-title {
	font: 14px/26px HelveticaNeueRoman;
	color: #161616;
	margin: 10px 0 5px 0;
}

.wishlist .item .size,
.history .item .count {
	width: 36px;
	height: 36px;
	font: 12px/36px HelveticaNeueRoman;
	color: #676767;
	border: 1px solid #cdcdcd;
	text-align: center;
	position: relative;
}

.wishlist .item .size::after {
	content: "";
	display: inline-block;
	border-style: solid;
	border-width: 17px 17px 0 0;
	border-color: #000 transparent transparent transparent;
	position: absolute;
	top: -1px;
	left: -1px;
}

.history .total {
	font: 14px/26px HelveticaNeueLight;
}

.history .total b {
	font: 14px/26px HelveticaNeueMedium;
	display: inline-block;
	margin: 20px 0 0 0;
}

.wishlist .item button,
.history .item button {
	position: absolute;
	right: 35px;
}

.history .order {margin-bottom: 54px}

.item.history .order > button {float: right}

.wishlist .item button:first-of-type {bottom: 100px}
.wishlist .item button:last-of-type,
.history .item button {bottom: 40px}

.account .profile {
	width: 770px;
	justify-content: space-between;
	border: 1px solid #ececec;
	padding: 50px;
}

.profile {
	display: flex;
	flex-wrap: wrap;
}

.item.wishlist,
.item.history,
.item.cart,
.item.profile {
	display: block;
}

.account > .item {display: none}

.account .profile div {
	width: 360px;
	margin-bottom: 40px;
}

.account .profile div *:not(button) {
	display: block;
	width: 100%;
}

.account .profile label {
	font: 12px/26px HelveticaNeueLight;
	color: #767676;
}

.account .profile label::after {
	content: "";
	display: inline-block;
	width: 35px;
	height: 35px;
	background: url(images/edit.svg) no-repeat;
	float: right;
	position: relative;
	top: 22px;
	cursor: pointer;
}

.account .profile label:hover::after {background: url(images/edit-hover.svg) no-repeat}

.account .profile label:last-of-type {margin: 40px 0 0 0}

.account .profile input:not([type="submit"]) {
	border-bottom: 2px solid #767676;
	font: 18px/26px HelveticaNeueLight;
}

.account .profile input[type="submit"] {margin: 0 auto}

section.product {
	padding: 44px 0 0 0;
	position: relative;
}

section.product .image {
	width: 555px;
	float: left;
	margin: 0 60px 0 0;
}

section.product .image img {
	width: 100%;
	height: 100%;
}

.product .nav {
	width: 99px;
	height: 49px;
	border: 1px solid #b2b2b2;
	position: absolute;
	top: 44px;
	right: 0;
	display: flex;
}

.product .nav a {
	display: inline-block;
	width: 50%;
	height: 100%;
	text-align: center;
	font: 25px/49px Consolas;
	transition: .4s;
}

.product .nav a:first-child {border-right: 1px solid #b2b2b2}

.product .nav a:hover {
	background: #000;
	color: #fff;
}

.image div {
	width: 100%;
	height: 100%;
	background: url('images/product.jpg') no-repeat;
	background-size: 200% auto;
	position: absolute;
	top: 0;
	left: 0;
	cursor: zoom-in;
}

section.product h1 {
	font: 30px/26px HelveticaNeueLight;
	color: #161616;
	text-transform: none;
	margin: 0 auto 15px auto;
	text-align: left;
}

section.product .price {
	font: 14px/26px HelveticaNeueLight;
	color: #767676;
}

section.product .info b {font: 12px/26px HelveticaNeueRoman}

section.product .info div:not(.product-tabs) label {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 0 9px 0 0;
	border: 3px solid #fff;
	outline: 1px solid #cdcdcd;
	cursor: pointer;
	font: 12px/30px HelveticaNeueRoman;
	text-align: center;
	position: relative;
}

input[name=color]:checked + label::after,
input[name=size]:checked + label::after {
	content: "";
	display: inline-block;
    border-style: solid;
    border-width: 17px 17px 0 0;
    border-color: #000 transparent transparent transparent;
    position: absolute;
    top: -4px;
    left: -4px;
}

.size-table,
section.product button.share {
	font: 12px/26px HelveticaNeueLight;
	color: #676767;
	text-transform: uppercase;
	text-decoration: underline;
}

section.product .size-table {margin: 30px 0 45px 0}

section.product button.gray {margin: 10px 0 30px}

section.product button.share::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	background: url(images/share.svg) no-repeat center;
	margin: 0 10px -3px 0;
}

.product-tabs {margin: 40px 0 0 0}

.product-tabs label {
	font: 12px/50px HelveticaNeueRoman;
	text-transform: uppercase;
	color: #676767;
	width: 170px;
	height: 50px;
	display: inline-block;
	text-align: center;
	cursor: pointer;
}

section.product .product-tabs p {margin: 30px 0}

.product-tabs #description:checked ~ label[for="description"],
.product-tabs #care:checked ~ label[for="care"] {background: #ececec}

.product-tabs div {
	border-top: 1px solid #ececec;
	display: none;
}

.product-tabs #description:checked ~ .description,
.product-tabs #care:checked ~ .care {display: block}

.product-photos {
	display: flex;
	margin: 65px auto 25px auto;
}

.product-photos div:first-child {
	margin: 200px 40px 0 70px;
}

.product-photos img {
	width: 485px;
	display: block;
	margin: 0 0 40px 0;
}

p.wear-with {
	font: 18px/26px HelveticaNeueLight;
	margin: 0 auto 20px auto;
}

section.wear-with {	padding: 31px 0 0 0}
section.wear-with img {width: 100%}
section.wear-with .product:last-child {margin: 0}

.instagram h2,
.subscribe h2 {
	font: 30px/36px ProximaNovaSemibold;
	margin: 80px 0 30px 0;
	text-align: center;
}

.instagram div {
	overflow: hidden;
    white-space: nowrap;
    word-wrap: normal;
	margin: 37px 0 0 0;
}

.instagram a {
	display: inline-block;
	width: 294px;
	height: 294px;
	position: relative;
	overflow: hidden;
	user-select: none;
}

.instagram img {
	width: 100%;
}

.instagram a:hover img {filter: brightness(.5)}

.instagram a:hover::before,
.instagram a:hover::after {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	position: absolute;
	z-index: 1;
	top: 50%;
	margin: -10px 0 0 0;
}

.instagram a span {
	position: absolute;
	color: #fff;
	font: 16px/36px ProximaNovaSemibold;
	top: 50%;
	margin: -18px 0 0 0;
	z-index: -1;
}

.instagram a:hover span {z-index: 0}

.instagram .likes {left: 35%}
.instagram .commentaries {left: 70%}

.instagram a:hover::before {
	background: url(images/likes.svg) no-repeat center;
	left: 25%;
}

.instagram a:hover::after {
	background: url(images/commentaries.svg) no-repeat center;
	left: 60%;
}

.shipping {padding: 50px 0}

.shipping p {font: 16px/26px HelveticaNeueLight}

.shipping .numbers {
	display: flex;
	align-items: center;
}

.shipping .description {display: flex}

.shipping .numbers div {
	width: 36px;
	height: 36px;
	border: 1px solid #000;
	border-radius: 50%;
	font: 16px/36px HelveticaNeueLight;
	text-align: center;
}

.shipping .line {
	width: 240px;
	height: 1px;
	background: #000;
	margin: 0 0 0 6px;
}

.shipping .ready {background: url(images/ready.svg) no-repeat center / 50% 50%}

.shipping .description > div {
	flex-basis: 276px;
    margin: 40px 10px 63px 0;
}

.shipping .description > div div {
	width: 60px;
	height: 60px;
}

.shipping .packing div {background: url(images/packing.svg) no-repeat center}
.shipping .method div {background: url(images/method.svg) no-repeat center}
.shipping .payment div {background: url(images/payment.svg) no-repeat center}
.shipping .confirm div {background: url(images/confirm.svg) no-repeat center}

.countries {width: 970px}

.country, .contacts-tab.first, .contacts-tab.second {display: none}

#rb:checked ~ .rb,
#other-countries:checked ~ .other-countries,
#contacts:checked ~ .contacts-tab.first,
#shops:checked ~ .contacts-tab.second {display: block}

#rb:checked ~ .tabs label[for="rb"],
#other-countries:checked ~ .tabs label[for="other-countries"],
#contacts:checked ~ .tabs label[for="contacts"],
#shops:checked ~ .tabs label[for="shops"] {text-decoration: underline}

.tabs {
	width: 535px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 52px auto 70px auto;
}

.contacts label {cursor: pointer}

.contacts label h1 {
	font: 30px/26px HelveticaNeueLight;
	display: inline;
	color: #000;
	text-transform: none;
}

.tabs label {
	font: 30px/26px HelveticaNeueLight;
	cursor: pointer;
}

.tabs .separator {
	width: 1px;
	height: 68px;
	background: #f0f0f0;
}

.country label {
	display: block;
	height: 63px;
	padding: 0 30px;
	margin: 0 0 4px 0;
	background: #f1f1f1;
	font: 16px/63px HelveticaNeueLight;
	position: relative;
}

.country label::after {
	content: "";
	width: 16px;
    height: 10px;
    background: url(images/triangle-black.svg) no-repeat center;
    position: absolute;
    top: 50%;
    right: 30px;
    margin: -5px 0 0 0;
    transition: .4s;
    transform: rotate(0deg);
}

.accordion > input:checked ~ label::after {transform: rotate(180deg)}

.accordion > input:checked ~ div {height: auto}

.shipping-method {
	width: 47%;
	display: flex;
    justify-content: flex-start;
	float: left;
}

.shipping-method .number {
	display: inline-block;
	width: 48px;
	height: 48px;
	border: 2px solid #e1e1e1;
	border-radius: 50%;
	margin-right: 20px;
	text-align: center;
	font: 18px/50px HelveticaNeueHeavy;
}

.shipping-method .method-title {
	font: 16px/16px HelveticaNeueMedium;
	text-transform: uppercase;
}

.shipping-method p {width: 370px}

.accordion > div > p,
.accordion > div li {
	font: 16px/26px HelveticaNeueLight;
	color: #adadad;
}

.accordion > div > p {margin: 30px 30px 0 30px}

.accordion > div > p:last-child {
	margin-bottom: 40px;
}

.accordion ul {
	list-style: square;
	padding: 0 0 0 45px;
	margin-top: 30px;
}

.accordion ol ul {
	margin-top: 15px;
	margin-bottom: 15px;
}

.accordion img {
	display: block;
	max-width: 100%;
}

.contacts .tabs {width: 330px}

.contacts-tab {margin: 0 auto 50px auto}

.contacts-tab > p {
	font: 22px/26px HelveticaNeueLight;
	margin: 60px 0 75px 0;
	text-align: center;
}

.contacts-tab > div {
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
}

.contacts-tab .location {width: 570px}

.location select {
	width: 270px;
    height: 48px;
    border: 1px solid #000;
    padding: 0 20px;
}

.map .placeholder {
	width: 230px;
	padding: 20px;
	background: #fff;
	text-align: left;
	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25);
	font: 14px/26px HelveticaNeueLight;
	position: absolute;
	top: 30%;
	left: 30%;
	z-index: 1;
}

.map .placeholder::after {
	content: "";
	display: block;
	width: 7px;
	height: 7px;
	background: #fff;
	position: absolute;
	bottom: -3.5px;
	left: 48px;
	transform: rotate(45deg);
}


.contacts-tab > div div {width: 33%}

.contacts-tab span {
	font: 16px/26px HelveticaNeueMedium;
	text-transform: uppercase;
	display: block;
	text-align: center;
}

.contacts-tab > div p,
.contacts-tab label {
	font: 16px/26px HelveticaNeueLight;
	text-align: center;
	margin: 0;
}

.contacts .map {
	height: 695px;
	position: relative;
}

.contacts + .info p {text-align: center}

.subscribe p {
	font: 16px/24px HelveticaNeueLight;
	text-align: center;
}

.info p {
	font: 14px/26px HelveticaNeueLight;
	margin: 40px auto;
}

.subscribe form {
	width: 570px;
	height: 140px;
	margin: 0 auto 70px auto;
}

.subscribe .name {
	width: 50%;
	float: left;
}

.subscribe .email {
	width: 50%;
	float: right;
}

.subscribe label {
	font: 11px/24px HelveticaNeueLight;
	color: #afafaf;
	text-transform: uppercase;
}

.subscribe input:not([type="submit"]) {
	font: 20px/24px HelveticaNeueRoman;
	width: 270px;
	height: 30px;
	border-bottom: 1px solid #000;
	display: block;
}

.subscribe input[type="submit"] {
	margin: 0 auto;
	position: relative;
	top: 37px;
}

.subscribe p {margin: 15px 0 70px 0}

.we-in-social p {
	font: 16px/24px HelveticaNeueRoman;
	margin: 47px 0 30px 0;
	text-align: center;
}

.we-in-social .social {
	width: 378px;
	margin-bottom: 59px;
}

.we-in-social .social * {
	width: 58px;
	height: 58px;
}

.subscribe-success {
	width: 408px;
	transform: translate(-50%, -50%);
	background: #fff;
	border: 1px solid #000;
	padding: 55px 180px;
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 1;
	text-align: center;
	transition: .4s;
	display: none;
	opacity: 0;
}

.subscribe-success span {
	font: 20px/28px ProximaNovaExtrabld;
	text-transform: uppercase;
}

.subscribe-success hr {
	width: 185px;
	margin: 20px auto 35px auto;
}

.subscribe-success p {
	font: 16px/26px HelveticaNeueLight;
	margin: 0;
}

footer {
	height: 195px;
	padding: 60px 0 0 0;
	background: #f8f8f8;
}

footer .wrapper {position: relative}

footer .wrapper * {
	font: 16px/24px HelveticaNeueRoman;
	color: #393939;
	display: block;
}

footer p:nth-of-type(2) {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
}

.not-found .logo {
	width: 134px;
	height: 42px;
	margin: 118px auto 165px auto;
}

.not-found h1 {
	font: 24px/100px HelveticaNeueHeavy;
	color: #dfdfdf;
	margin: 10px 0;
}

.not-found p {
	font: 16px/26px HelveticaNeueLight;
	color: #adadad;
	text-align: center;
	margin: 0 0 50px 0;
}

.not-found a {margin: 0 auto}

.hanger {
	width: 100px;
	height: 63px;
	margin: 0 auto;
	background: url(images/hanger.svg) no-repeat center / 100% 100%;
}

.table-of-sizes {
	background: #fff;
	padding: 10px;
	position: fixed;
	top: -50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	transition: .4s;
}

.table-of-sizes .close {
	width: 30px;
	height: 30px;
	background: #fff;
	border-radius: 50%;
	font-size: 25px;
	top: -10px;
	right: -10px;
	box-shadow: -2px 3px 25px -5px #000;
}

.table-of-sizes.visible {top: 50%}

@media (min-width: 1201px) {
	.products .product:nth-child(3n) {margin-right: 0}
}

@media (max-width: 1200px) {
	.only-desktop {display: none}

	.wrapper {width: 940px}

	nav .menu {
		width: 510px;
	    margin: 0 0 0 79px;
	}

	h1 {margin: 22vh 0 0 0}

	.novelties h2 {margin: 36.11vh 0 0 50%}
	.novelties a {margin: 7.41vh 0 0 50%}

	nav input[type="search"] {width: 125px}

	.catalog .head {width: 700px}

	.filter {margin: 20px 25px 0 0}

	.filter button + button {margin-top: 10px}

	.choosed, .products {width: 700px}

	.products .product:nth-child(2n) {margin-right: 0}

	.products .product {
    	width: 330px;
    	margin: 0 40px 30px 0;
    }

    .products .product .img {height: 490px}
    .shipping .line {width: 180px}

    section.account {padding: 40px 0}

    .account > div {width: 220px}

    .account .profile {
    	width: 630px;
    	padding: 35px;
    	height: 195px;
    }

    .account .wishlist,
    .account .history {width: 700px}
    .wishlist .item img,
    .history .item img {margin: 0 40px 0 0}
    .wishlist .item .title {margin: 35px 0 20px 0}
    .history .item .title {margin: 20px 0 20px 0}
    
    .wishlist .item button:first-of-type,
    .history .item button {
		bottom: 20px;
		right: 25px;
    }

    .wishlist .item button:last-of-type {
    	width: 192px;
    	bottom: 20px;
    	left: 240px;
    }

    .account .profile div {width: 300px}

    section.wear-with .product {
	    width: 300px;
	    margin: 0 20px 20px 0;
	}

	section.wear-with .product:nth-child(3) {margin: 0}

	section.product {align-items: flex-start}
    .product-photos div:first-child {margin: 200px 40px 0 0}
    .product-photos img {width: 450px}

	footer {height: 100px}
	footer p:first-of-type {
		float: left;
		margin: 0 160px 0 0;
	}
}

@media (min-width: 971px) {
	.only-mobile {display: none}

	.black .account button {background-image: url(images/account-black.svg)}

	.shipping-method:nth-of-type(odd) {margin: 40px 0 0 30px}
	.shipping-method:nth-of-type(even) {margin: 40px 0 0 0}
}

@media (max-width: 970px) {
	.only-desktop-tablet {display: none !important}

	.wrapper {width: 87.5vw}

	.bttn {
	    width: 71.25vw;
	    height: 15vw;
	    font: 3.75vw/15vw HelveticaNeueRoman;
	}

	section.head.main {
	    height: 100vh;
	    padding: 0;
	}

	nav {height: 15.625vw}

	nav a {font: 4.69vw/8.125vw FuturaNormal}

	nav .logo {
		width: 21.875vw;
    	height: 6.25vw;
		margin: 4.6vw 0 0 0;
	}

	.drop-menu > a::after {
	    background-image: url(images/triangle-black.svg);
	}

	.drop-menu:hover {background: 0}
	.drop-menu ul {
		width: 93%;
		background: #fff;
	}

	.drop-menu li a {
		font: 3vw/10vw HelveticaNeueRoman;
		color: #000;
	}

	nav .menu {
		display: block;
		position: absolute;
		margin: 0;
		padding: 0 6.25vw;
		left: 0;
		top: -170vw;
		background: #fff;
		width: 100vw;
		height: 77vh;
		z-index: 2;
		transition: .4s;
		box-sizing: border-box;
	}

	nav .menu > li {
		display: block;
		padding: 5vw 3.125vw;
	}

	nav .menu > li:nth-child(-n+6) {border-bottom: 1px solid #f0f0f0}

	nav .menu > li > a {color: #000}

	nav > ul > li:nth-child(n+1):nth-child(-n+7) a {text-transform: uppercase}

	nav .icons button, nav .cart a {
	    width: 5vw;
		height: 5vw;
	}
	
	nav .icons {
		width: 29.69vw;
		top: 5vw;
	}

	nav .account button {width: 100%}

	nav .language {text-decoration: none}

	.language a {
		display: inline-block;
		width: 20.62vw;
		height: 8.44vw;
		text-align: center;
		font: 3.75vw/8.44vw HelveticaNeueRoman;
	}

	.language .active {	border: 1px solid #000}

	nav input[type="search"] {
		width: 31.25vw;
		height: 7.81vw;
	    border-bottom: 1px solid #aeaeae;
	    color: #000;
	}

	nav .hamburger {
		width: 25px;
		height: 17px;
		background: url(images/hamburger.svg) no-repeat center;
	}

	.sign {
		width: 100%;
		margin: -247.5px 0 0 -50%;
	}
	.sign .in .with::before, .sign .in .with::after {width: 103px}
	.sign .up .with::before, .sign .up .with::after {width: 96px}

	.catalog .head {
		width: 87.5vw;
		margin: 30px 0 15px 0;
		float: none;
	}

	.catalog > .accordion > label::before {content: "Фильтры поиска"}
	.catalog > .accordion > input:checked ~ label::before {content: "Скрыть фильтры"}

	.catalog > .accordion aside {
	    height: 0;
	    transition: .4s;
	    overflow: hidden;
	}

	.filter {
		width: 100%;
		margin: 0;
	}

	#filter:checked ~ aside {height: 106.875vw}

	label[for="filter"],
	.filter > button {
		width: 100%;
		text-transform: none;
	}

	.filter label {
		font: 14px/26px HelveticaNeueLight;
		margin: 15px 0;
	}

	.filter li label {font: 14px/26px HelveticaNeueLight}

	#novelties + label::after, #sale + label::after, .filter input + label::after {top: 9px}

	.choosed {margin: 10px 0 30px 0}

	.choosed, .products {width: 100%}

	.products .product {
		width: 100%;
		margin: 0 0 30px 0;
	}

	section.product h1 {margin-top: 35px}

	.products .product .img {height: 414px}

	.choosed .item {
	    font: 10px/25px HelveticaNeueBold;
	    padding: 0 9px;
	    margin: 0 1px 0 0;
	}

	.choosed .item button {
	    margin: 0 0 0 10px;
	    font: 18px/20px HelveticaNeueBold;
	}

	h1 {
	    font: 7.5vw/11.25vw FuturaNormal;
	    margin: 33.5vh 0 0 0;
	}

	.indicators {margin: 6vh auto 0 auto}

	.novelties, .sale {height: 84.51vh}

	.novelties {
		background: url(images/novelties-mobile.jpg) no-repeat center / cover;
		position: relative;
	}

	h2 {
	    font: 9.37vw/11.25vw ProximaNovaSemibold;
	    letter-spacing: 7px;
	    width: 100%;
	    text-align: center;
	    position: relative;
	}

	.novelties h2, .sale h2 {margin: 60vh 0 0 0}

	.novelties a,
	.sale a {
		margin: 5vh auto 0 auto;
		position: relative;
	}

	section.novelties::before,
	section.sale::before {
	    content: "";
	    display: block;
	    position: absolute;
	    left: 0;
	    bottom: 0;
	    width: 100%;
	    height: 30vh;
	    background: rgba(249,250,252,.9);
	}

	.sale {
		background: url(images/sale-mobile.jpg) no-repeat center / cover;
		position: relative;
	}

	section.shipping {
		padding: 12px 0;
	}

	.shipping .description {
		display: block;
		overflow: hidden;
	    white-space: nowrap;
	    word-wrap: normal;
	}

	.shipping .description > div {
		width: 100%;
		margin: 0;
		display: inline-block;
		position: relative;
		right: 0;
		transition: .4s;
	}

	.shipping .description > div div {margin: 0 auto}

	.steps {
		height: 206px;
		margin: 35px 0;
		position: relative;
	}

	.steps p {text-align: center}

	.steps input {display: none}

	.steps .indicators {
		display: flex;
		width: 15.31vw;
		justify-content: space-between;
		margin: 0 auto;
	}

	label[for^="step-"] {
		display: inline-block;
		width: 2.19vw;
		height: 2.19vw;
		background: #000;
	}

	#step-2:checked ~ .description div {right: 100%}
	#step-3:checked ~ .description div {right: 200%}
	#step-4:checked ~ .description div {right: 300%}

	#step-1:checked ~ div label[for="step-1"],
	#step-2:checked ~ div label[for="step-2"],
	#step-3:checked ~ div label[for="step-3"],
	#step-4:checked ~ div label[for="step-4"] {
		outline: 1px solid #000;
		outline-offset: 1px;
	}

	#step-1:checked ~ div label[for="step-2"]::after,
	#step-2:checked ~ div label[for="step-3"]::after,
	#step-3:checked ~ div label[for="step-4"]::after,
	#step-2:checked ~ div label[for="step-1"]::after,
	#step-3:checked ~ div label[for="step-2"]::after,
	#step-4:checked ~ div label[for="step-3"]::after {
		content: "";
		width: 4vw;
		height: 5vw;
		background: url(images/arrow-right.svg) no-repeat center;
		position: absolute;
		top: 14%;
	}

	#step-1:checked ~ div label[for="step-2"]::after,
	#step-2:checked ~ div label[for="step-3"]::after,
	#step-3:checked ~ div label[for="step-4"]::after {
		background: url(images/arrow-right.svg) no-repeat center;
		right: 0;
	}

	#step-2:checked ~ div label[for="step-1"]::after,
	#step-3:checked ~ div label[for="step-2"]::after,
	#step-4:checked ~ div label[for="step-3"]::after {
		background: url(images/arrow-left.svg) no-repeat center;
		left: 0;
	}

	.tabs {
		width: 263px;
		margin: 5.6vw auto 10vw auto;
	}

	.contacts .tabs {width: 220px}

	.tabs label {font: 14px/26px HelveticaNeueLight}

	.tabs .separator {
		height: 34px;
	}

	.contacts-tab > p {margin: 50px 0 30px 0}
	.contacts-tab > div {display: block}
	.contacts-tab > div div {width: auto}
	.contacts-tab span, .contacts-tab > div p {text-align: left}

	.contacts-tab label {
		display: inline-block;
		margin: 10px 30px 0 0;
	}

	.contacts-tab .location, .contacts-tab .location select {width: 100%}

	.contacts-tab .location select:first-child {margin: 0 0 20px 0}

	.contacts .map {height: 480px}

	.shipping-method {
	    width: 100%;
	    display: block;
	    float: none;
	}

	.shipping-method p {
		width: auto;
		margin: 0;
	}

	.shipping-methods > p {margin: 20px 0}

	.shipping-method .number {margin: 28px 0 22px 0}

	.account {padding: 20px 0}

	.account > div {
		width: 100%;
		margin: 0 0 19px 0;
	}

	.account .item {
		flex-direction: column;
		border: 0;
		padding: 0;
		height: auto;
		margin: 15px 0 0 0;
	}

	.account .profile div,
	.product-photos img {width: 100%}
	
	.wishlist .item,
	.history .item {margin: 20px 0}
	.wishlist .item > div,
	.wishlist .item img,
	.history .item > div,
	.history .item img {float: none}

	.wishlist .item button,
	.wishlist .item button:last-of-type,
	.history button {
		position: static;
		width: 100%;
	}

	.wishlist .item button:first-of-type,
	.history .item button {margin: 20px 0 8px 0}
	.wishlist .close,
	.history .close {top: 0}

	section.product.wrapper {
		width: 100%;
		margin: 0;
		flex-direction: column;
		padding: 0;
	}

	section.product .price {
		display: block;
		margin: 0 auto 20px auto;
	}

	section.product .image {width: 100%}

	section.product img {
		margin: 0 0 25px 0;
	}

	.product-photos,
	.product-photos div:first-child,
	.product-photos img {
		display: block;
		margin: 0;
		width: 100%;
	}

	.product-tabs label {width: 134px}

	.instagram h2, .subscribe h2 {
	    font: 5vw/11.25vw ProximaNovaSemibold;
	    margin: 9.37vw 0 3.125vw 0;
	    letter-spacing: 2px;
	}

	.instagram div {margin: 17px 0 0 0}

	.instagram a {
	    width: 200px;
	    height: 200px;
	}

	.subscribe p {font: 4.37vw/7.5vw HelveticaNeueLight !important}
	.subscribe p:nth-of-type(1) {margin: 4.69vw 0 6.25vw 0}

	.subscribe form {
	    width: 87.5vw;
	    height: auto;
	    margin: 0 auto 9.37vw auto;
	}

	.subscribe .name,
	.subscribe .email {
	    width: 100%;
	    float: none;
	}

	.subscribe input:not([type="submit"]) {	width: 100%}

	.subscribe input[type="submit"],
	.subscribe .email {
	    margin: 9.37vw auto 0 auto;
	    position: static;
	}

	.subscribe p:nth-of-type(2) {margin: 11vw 0 9.37vw 0}

	.we-in-social .social {
	    width: 78.75vw;
	    margin-bottom: 14.375vw;
	}

	.we-in-social .social * {
	    width: 12.5vw;
	    height: 12.5vw;
	}

	.subscribe-success {width: 87.5vw}

	footer {
	    height: 48.44vw;
	    padding: 10.94vw 0 0 0;
	}

	footer .wrapper * {font: 4.375vw/7.5vw HelveticaNeueRoman}

	footer p:first-of-type {
	    float: none;
	    margin: 0 0 9.375vw 0;
	}

	footer p:nth-of-type(2) {
	    position: relative;
	    top: -1.56vw;
	    margin: 0;
	}

	.not-found .logo {
		width: 67px;
		height: 22px;
		margin: 29px auto 63px auto;
	}

	.not-found h1 {
		font: 18px/50px HelveticaNeueHeavy;
		color: #dfdfdf;
		margin: 0 0 20px 0;
	}

	.hanger {
		width: 77px;
		height: 48px;
	}

	.product .nav {
		position: static;
		margin: 20px 0 0 20px;
	}

	.table-of-sizes, .table-of-sizes img {width:280px}
}