.promo-content sup{
	vertical-align: super;
}

img.bg {
	width: 100%;
	vertical-align: top;
}

.btn{
	display: inline-block;
	padding: 18px 25px;
	border: 2px solid #fff;
	font: 16px/20px gothic;
	text-align: center;
	cursor: pointer;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
}
.btn:after {
	display:block;
	content: '';
	border-bottom: solid 1px #fff;
	transform: scaleX(0);
	transition: transform 250ms ease-in-out;
	position: relative;
	top: 3px;
}
.btn:hover:after { transform: scaleX(1); }


.promo-content{
	font: 18px/22px gothic;
	color: #3b3b3b;
	min-width: 1000px;
}

.promo-content h1,
.promo-content h2{
	font: 50px/60px gothicb;
	text-align: center;
	margin: 0 0 45px;
	text-transform: uppercase;
}
.promo-content h3{
	font: 18px/22px gothicb;
	margin: 0 0 20px;
	text-transform: uppercase;
}
.promo-content video{
	width: 100%;
	vertical-align: top;
}
.promo-content .clear{
	clear: both;
}
.promo-content .button{
	display: inline-block;
	background: #E8443E;
	padding:15px 45px;
	font: 18px/22px gothicb,'CenturyGothicRegular';
	border-radius: 5px;
	cursor: pointer;
}
.promo-content .button:hover{
	background: #923F3C;
}
.promo-content a.button{
	color: #fff;
	text-decoration: none;
}
.promo-content .wrapper{
	display: block;
	margin: 0 auto;
}


.promo-content .goretex-logo{
	position: absolute;
	left: 72%;
	width: 16%;
	height: auto;
	top: 20%;
}
.promo-content .goretex-logo img{
	width: 100%;
}


.promo-content .button.white{
	background: #fff;
	border: 1px solid #000;
}
.promo-content .button.white:hover{
	background: #000;
}
.promo-content a.button.white{
	color: #000;
}
.promo-content a.button.white:hover{
	color: #fff;
}

.promo-content .text-block{
	text-align: center;
	font: 22px/26px gothic;
	margin: 0 auto 90px;
	max-width: 1366px;

}
.promo-content .video-block{
	position: relative;
}


.block-substrate{
	background: #f2f2f2;
	padding: 45px 0 45px;
	margin: 0 0 90px;
	position: relative;
}
.block-substrate-top-0{
	padding-top: 0;
}
.block-substrate-bottom-0{
	padding-bottom: 0;
}
.block-substrate:after{
	position: absolute;
	bottom: -12px;
	left: 50%;
	margin-left: -12px;
	content: "";
	transform: rotate(45deg);
	width: 24px;
	height: 24px;
	background: #545454;
}
.block-substrate.block-substrate-none:after{
	display: none;
}
.block-inner{
	margin: 0 auto;
	padding: 0 30px;
	max-width: 1366px;
}


.page-block{
	position: relative;
	margin: 0 0 100px;
}
.page-block .page-block-inner{
	position: relative;
	font-size: 0;
	line-height: 0;
	width: 100%;
}
.page-block .page-block-inner > .text,
.page-block .page-block-inner > .image {
	display: inline-block;
	width: 50%;
	vertical-align: top;
}
.page-block .page-block-inner > .image img{
	width: 100%;
}
.page-block .page-block-inner > .text{
	position: absolute;
	height: 100%;
	top: 0;
	bottom: 0;
	text-align: center;
}
.page-block .page-block-inner > .text:before {
	content: "";
	vertical-align: middle;
	display: inline-block;
	height: 100%;
}
.page-block .page-block-inner > .text > .inner {
	display: inline-block;
	position: relative;
	vertical-align: middle;
	text-align: left;
	width: 80%;
	padding: 0;
	font: 18px/22px gothic;
}
.page-block .page-block-inner > .text > .inner h1,
.page-block .page-block-inner > .text > .inner h2,
.page-block .page-block-inner > .text > .inner h3{
	text-align: left;
}


.promo-content .main-block{
	padding-top: 0;
	font-size: 0;
	line-height: 0;
	position: relative;
	margin: 0 0 60px;
	min-height: 600px;
}
.promo-content .main-block .main-block-about{
	display: inline-block;
	vertical-align: top;
}
.promo-content .main-block .main-block-about{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	height: 100%;
}
.promo-content .main-block .main-block-about:before{
	display: inline-block;
	vertical-align: middle;
	height: 100%;
	content: "";
}
.promo-content .main-block .main-block-about > .text{
	display: inline-block;
	vertical-align: middle;
	padding: 60px 75px 60px 150px;
	font: 22px/26px gothic;
	color: #fff;
	position: relative;
	max-width: 1000px;
}
.promo-content .main-block .main-block-about > .text > .text-block-center{
	display: inline-block;
	vertical-align: middle;
}
.promo-content .main-block > .block{
	position: relative;
	min-height: 600px;
}
.promo-content .main-block > .block > img{
	width: 100%;
}
.promo-content .main-block > .block > .inner{
	position: absolute;
	width: 70%;
	top: 0;
	height: 100%;
	color: #fff;
}
.promo-content .main-block > block > .inner:before{
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	content: "";
}
.promo-content .main-block .main-block-about > .text h1,
.promo-content .main-block .main-block-about > .text h2{
	text-align: left;
	font: 50px/1.3 gothicb;
	margin-bottom: 0;
	color: #fff;
}
.promo-content .main-block .main-block-about > .text p{
	padding: 30px 0 0;
	font: 18px/24px gothic;
}
.promo-content .main-block .main-block-about > .text .button{
	background: none;
	border: 1px solid #fff;
	margin-top: 40px;
}
.promo-content .main-block .main-block-about > .text .button:hover{
	background: #fff;
	color: #000;
}


.page-block.technologies .technologies-list{
	font-size: 0;
	line-height: 0;
}
.page-block.technologies .technologies-list h3{
	margin:90px 0 0;
}
.page-block.technologies > .inner{
	text-align: center;
	margin: 0 auto;
}
.page-block.technologies > .inner > .description{
	margin:45px 0 80px;
}
.page-block.technologies > .inner > ul > li{
	display: inline-block;
	width: 25%;
	margin: 0 2%;
	vertical-align: top;
}
.page-block.technologies > .inner > ul > li img{
	width: 100%;
}
.page-block.technologies > .inner > ul > li > h3{
	font: 18px/22px gothicb;
	margin: 0 0 45px;
}
.page-block.technologies > .inner > ul > li .text{
	margin:45px 0 15px;
	font: 18px/22px gothic;
	min-height: 80px;
}


.page-block.advantages{
	margin: 0 0 30px;
}
.page-block.advantages .page-block-inner > .image{
	text-align: right;
}
.page-block.advantages .page-block-inner > .image img{
	width: 90%;
	cursor: pointer;
}
.page-block.advantages .page-block-inner > .text{
	/*position: static; */
}


.page-block.features .page-block-inner > .text{
	position: static;
}
.page-block.features .page-block-inner > .text .header{
	margin:0 0 30px;
}
.page-block.features .page-block-inner > .text img{
	width: 100%;
}
.page-block.features .page-block-inner > .text h2{
	text-align: center;
}
.page-block.features .page-block-inner > .text h3,
.page-block.features .page-block-inner > .text > .inner{
	text-align: center;
}
.page-block.features .page-block-inner > .text h4{
	font-family: gothicb;
	text-transform: uppercase;
}


.page-block.collections .collections-list{
	font-size: 0;
	line-height: 0;
	margin: 3px 0;
}
.page-block.collections > .inner{
	text-align: center;
}
.page-block.collections > .inner > ul > li{
	position: relative;
	display: inline-block;
	width: 33.33%;
	vertical-align: top;
}
.page-block.collections > .inner > ul > li:hover{
	opacity: 0.8;
}
.page-block.collections > .inner > ul > li img{
	width: 100%;
}


.page-block.how-it-works{
	overflow: hidden;
}
.page-block.how-it-works > .inner{
	text-align: center;
}
.page-block.how-it-works > .inner > h2{
	font: 22px/28px gothic;
	text-transform: uppercase;
	color: #545454;
	margin: 0 0 15px;
}
.page-block.how-it-works > .inner > h3{
	font: 48px/52px gothicb;
	margin: 0 0 30px;
}
.page-block.how-it-works > .inner > .text{
	max-width: 900px;
	text-align: center;
	font: 18px/22px gothic;
	margin: 0 auto 100px;
}
.page-block.how-it-works > .inner .blocks{
	font-size: 0;
	line-height: 0;
	margin: 0 auto;
	text-align: center;
}
.page-block.how-it-works > .inner .blocks > .blocks-item{
	display: inline-block;
	position: relative;
	width: 40%;
	font: 18px/22px gothic;
	text-align: left;
	vertical-align: top;
	margin: 0 5% 100px 5%;
}
.page-block.how-it-works > .inner .blocks > .blocks-item img.bg{
	width: 100%;
}
.page-block.how-it-works > .inner .blocks > .blocks-item .h{
	font: 18px/24px gothicb;
	text-transform: uppercase;
}
.page-block.how-it-works > .inner .blocks > .blocks-item .t{
	margin-bottom: 20px;
}
.page-block.how-it-works > .inner .blocks > .blocks-item.video p{
	font: 22px/28px gothic;
	margin: 0 0 10px;
}


.shoecare-block{
	background-color: rgb(22, 44, 63);
	color: #fff;
	padding: 85px 0 95px;
	text-align: center;
}
.shoecare-block h2{
	font: 36px/42px gothic;
	text-transform: uppercase;
}
.shoecare-block p{
	margin-top: 1em;
	font:16px/1.7em gothic;
}
.shoecare-block .shoecare-products{
	margin-top: 58px;
	margin-bottom: 24px
}
.shoecare-block .shoecare-products a{
	color: #fff;
	text-decoration: none;
}
.shoecare-block .shoecare-products ul{
	font-size: 0;
	line-height: 0;
}
.shoecare-block .shoecare-products li{
	display: inline-block;
	max-width: 230px;
	margin: 0 10px;
	vertical-align: top;
}
.shoecare-block .shoecare-products li:after {
	display:block;
	content: '';
	border-bottom: solid 1px #fff;
	transform: scaleX(0);
	transition: transform 250ms ease-in-out;
	margin: 5px 0 0;
}
.shoecare-block .shoecare-products li:hover:after { transform: scaleX(1); }

.shoecare-block .shoecare-products li img{
	border-radius: 50%;
}
.shoecare-block .shoecare-products li p{
	text-transform: uppercase;
	font:16px/1.25 gothic;
	color: #fff;
}
.shoecare-block .btn{
	margin: 2.8em 0 0;
}


.gotoup {
	background-image: url("https://www.ecco-shoes.ru/assets/img/icons-s2f6806ca1d.png");
	background-position: 0 -1777px;
	bottom: 30px;
	cursor: pointer;
	display: none;
	opacity: 0.5;
	position: fixed;
	right: 15px;
	transition: all 0.3s ease 0s;
	z-index: 5;
	height: 60px;
	width: 60px;
}
.gotoup:hover{
	opacity: 1;
}




.how-it-works .callouts > div{
	position: absolute;
	z-index: 10;
	cursor: pointer;
}
.how-it-works .callouts > div > p{
	font-size: 16px;
	width: 350px;
	-ms-transform: translateY(100%) translateY(-45px) translateX(66px);
	transform: translateY(calc(100% - 45px)) translateX(66px);
}
.how-it-works .callouts > div:after {
	content: "";
	position: absolute;
	left: calc(100% - 1px);
	top: 50%;
	-ms-transform: translateY(-2px) scaleX(0);
	transform: translateY(-2px) scaleX(0);
	border-top: 1px solid #545454;
	width: 50%;
	transition: transform .4s;
	-ms-transform-origin: left;
	transform-origin: left;
}
.how-it-works .callouts:not(.opened) > div:hover:after {
	transform: translateY(-2px) scaleX(1);
	-ms-transform: translateY(-2px) scaleX(1);
}
.how-it-works .callouts:not(.opened) > div:hover .st2 {
	transition: transform .4s;
	transform: scale(1.5) translateX(-7px) translateY(-7px);
	-ms-transform: scale(1.5) translateX(-7px) translateY(-7px);
}
.how-it-works .callouts > div:hover svg{
	transform: rotate(135deg);
	-ms-transform: rotate(135deg);
}
.how-it-works .callouts > div svg{
	cursor: pointer;
	width: 2vw;
	height: 2vw;
	transition: transform .3s ease;
	display: inline-block;
	position: relative;;
}
.how-it-works .blocks-item.protection .callouts > div svg{
	width: 45px;
	height: 45px;
}
.how-it-works .callouts > div svg path{
	fill: #ea9b18;
}
.how-it-works .callouts > div p {
	letter-spacing: .0125em;
	padding: 0;
	font-size: 16px;
	text-align: left;
	margin: 0;
	width: 370px;
	line-height: 1.3em;
	color: #545454;
	font-style: normal;
	font-weight: 400;
	font-family: gothic,sans-serif;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease-out .15s;
	position: absolute;
	bottom: 0;
	left: 0;
	display: flex;
	display: -ms-flexbox;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: center;
	justify-content: left;
	-ms-flex-pack: center;
	z-index: 2;
}
.how-it-works .callouts:not(.opened) > div:hover p{
	opacity: 1;
	visibility: visible;
	background: rgba(255, 255, 255, 0.8);
	padding: 20px 25px;
	border: 1px solid #545454;
}
.how-it-works .callouts.opened > div p{
	opacity: 1;
	visibility: visible;
}
.how-it-works .callouts.opened > div:after {
	-ms-transform: translateY(-2px) scaleX(1);
	transform: translateY(-2px) scaleX(1);
}

.how-it-works .callouts.opened > div svg{
	-ms-transform: rotate(135deg);
	transform: rotate(135deg);
}
.how-it-works .callouts > div p strong{
	font-family: gothicb;
}
.how-it-works img.bg{
	transition: opacity .6s ease;
}

.how-it-works{
	max-width: 1920px;
	margin: 0 auto;
}
.how-it-works .hover .callouts > div{
	opacity: 0;
}
.how-it-works .hover .callouts:not(.opened) > div:hover{
	opacity: 1;
}
.how-it-works .hover-img{
	display: none;
}
.how-it-works[data-hover-id="breath"] img.hover-img[data-block-id="breath"] { display: block; }
.how-it-works[data-hover-id="wind"] img.hover-img[data-block-id="wind"] { display: block; }
.how-it-works[data-hover-id="waterproof"] img.hover-img[data-block-id="waterproof"] { display: block; }

.how-it-works .callouts > div.right > p {
	transform: translateY(calc(100% - 45px)) translateX(-390px);
	-ms-transform: translateY(100%) translateY(-45px) translateX(-390px)
}
.how-it-works .callouts > div.right:after{
	transform-origin: right;
	-ms-transform-origin: right;
	left: -50%;
}





.page-block.collections{
	margin: 0 0 0 0;
}
.page-block.collections .collections-list .item{
	position: relative;
	text-align: center;
	color: #fff;
}
.page-block.collections .collections-list .item img{
	vertical-align: top;
}
.page-block.collections .collections-list .item .text{
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	bottom: 0;
}
.page-block.collections .collections-list .item .text:before{
	content: "";
	vertical-align: middle;
	display: inline-block;
	height: 100%;
}
.page-block.collections .collections-list .item .text .inner{
	display: inline-block;
	position: relative;
	vertical-align: middle;
	width: 90%;
}





/* slider */
.why-block{
	color: #fff;
	position: relative;
	overflow: hidden;
}
.why-block .h{
	font: 48px/1.1em gothicb;
	padding-bottom: 0;
	text-transform: uppercase;
	position: absolute;
	top: 80px;
	text-align: center;
	width: 100%;
	color: #fff;
}
.why-block .h.small{
	top: 40px;
	font: 18px/1.1em gothic;
}
.slider-switch-layer{
	position: absolute;
	top: 20%;
	left: 10%;
	width: 80%;
	margin: 0 auto;
}
.slider-switch{
	width: 100%;
	z-index: 1;
	height: 1.467em;
	background-color: rgba(35,35,35,.3);
	border: 0;
	border-radius: .667em;
	box-shadow: inset -1px 2px 6px 0 rgba(0,0,0,.33);
}
.slider-switch .tick {
	content: "";
	width: 1px;
	height: 1.467em;
	position: absolute;
	top: 0;
	background-color: #000;
	-webkit-opacity: .3;
	opacity: .3;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	box-sizing: content-box;
}
.slider-switch .noUi-handle {
	width: 2.933em;
	height: 2.933em;
	border-radius: 50%;
	box-shadow: -1px 3px 6px 0 rgba(0,0,0,.52);
	top: -.733em;
	left: -1.4665em;
	z-index: 2;
	cursor: pointer;
}
.noUi-handle::before,
.noUi-handle::after {
	content: "";
	display: block;
	position: absolute;
	height: 14px;
	width: 1px;
	background: none!important;
	left: 14px;
	top: 6px;
}
.slider-switch .noUi-handle:before{
	width: 1.6em;
	height: 1.6em;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	border-radius: 50%;
	box-shadow: inset -1px 3px 6px 0 rgba(0,0,0,.52);
}
.slider-switch-container .steps-container {
	position: relative;
	width: 100%;
	height: 5em;
	margin: 0 auto .2em auto;
	z-index: 1;
	max-width: 1280px;
}
.slider-switch-container .step{
	width: auto;
	height: 5em;
	text-align: center;
	position: absolute;
}
.slider-switch-container .step:first-child .label,
.slider-switch-container .step:last-child .label {
	position: relative;
	left: -50%;
}
.slider-switch-container .step .label {
	display: inline-block;
	cursor: pointer;
	text-transform: uppercase;
	font-size: 1.667em;
	white-space: nowrap;
	position: relative;
	top: 15%;
	-webkit-transform: translateY(-50%) translateZ(0);
	-ms-transform: translate(0,-50%);
	transform: translateY(-50%) translateZ(0);
	left: -50%;
}
.slider-switch-container .tooltips-container {
	width: 100%;
	position: relative;
	top: 2em;
	z-index: 2;
	margin: 0 auto;
	max-width: 1280px;
}
.slider-switch-container .tooltips-container .tooltip:before {
	content: "";
	position: absolute;
	top: -10px;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid currentColor;
	-webkit-opacity: .6;
	opacity: .6;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	filter: alpha(opacity=60);
}
.slider-switch-container .tooltips-container .tooltip {
	display: none;
	width: 30em;
	position: absolute;
	margin-left: -12.6em;
	padding: 1.667em 3.5em 1.33em 1.667em;
	padding-right: 3.5em;
	padding-left: 1.667em;
	padding-right: 3.5em;
	padding-left: 1.667em;
	box-sizing: border-box;
	text-align: left;
	color: #000;
}
.slider-switch-container .tooltips-container .tooltip:first-child {
	display: block;
	margin-left: -.5em;
	right: auto;
	left: 0;
}
.slider-switch-container .tooltips-container .tooltip:first-child::before {
	left: 0;
	right: auto;
}
.slider-switch-container .tooltips-container .tooltip:last-child,
.slider-switch-container .tooltips-container .tooltip.last {
	left: auto;
	right: 0;
	margin-right: -.5em;
	margin-left: 0;
}
.slider-switch-container .tooltips-container .tooltip:last-child:before,
.slider-switch-container .tooltips-container .tooltip.last:before {
	left: auto;
	right: 0;
}
.slider-switch-container .tooltips-container .tooltip .tooltip-bg-color {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #000;
	-webkit-opacity: .6;
	opacity: .6;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	filter: alpha(opacity=60);
	z-index: 0;
}
.slider-switch-container .tooltips-container .tooltip .tooltip-content {
	font-size: 1.2em;
	line-height: 1.33;
	color: #fff;
	position: relative;
}
.slider-switch-container .tooltips-container .tooltip .tooltip-content h3{
	font:16px/20px gothicb;
	text-transform: uppercase;
}
.slider-switch-container .tooltips-container .tooltip .tooltip-content p {
	font:16px/20px gothic;
}

.slider-switch-container .step:first-child .label,
.slider-switch-container .step:last-child .label {
	position: relative;
	left: -50%;
}
.slider-switch-container .slider-switch {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	z-index: 1;
	height: 1.467em;
	background-color: rgba(35,35,35,.3);
	border: 0;
	border-radius: .667em;
	box-shadow: inset -1px 2px 6px 0 rgba(0,0,0,.33);
}
.noUi-handle:before,
.noUi-handle:after {
	content: "";
	display: block;
	position: absolute;
	height: 14px;
	width: 1px;
	background: #e8e7e6;
	left: 14px;
	top: 6px;
}
.slider-switch-container .slider-switch .noUi-handle:before {
	width: 1.6em;
	height: 1.6em;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	border-radius: 50%;
	box-shadow: inset -1px 3px 6px 0 rgba(0,0,0,.52);
}
.slider-switch-container .slider-switch .noUi-handle{
	width: 2.933em;
	height: 2.933em;
	border-radius: 50%;
	box-shadow: -1px 3px 6px 0 rgba(0,0,0,.52);
	top: -.733em;
	left: -1.4665em;
	z-index: 2;
	cursor: pointer;
}


.slider-switch-container .step .label.summer{
	background: url(/promos/pages/goretex/images/aw18/sun128_White.png);
	width: 60px;
	height: 60px;
}
.slider-switch-container .step .label.autumn{
	background: url(/promos/pages/goretex/images/aw18/downpour128_White.png);
	width: 60px;
	height: 55px;
}
.slider-switch-container .step .label.winter{
	background: url(/promos/pages/goretex/images/aw18/snow128_White.png);
	width: 60px;
	height: 62px;
}


.how-it-works .callouts > div.callout-construction svg{
	width: 3.5vw;
	height: 3.5vw;
}
.how-it-works .callouts > div.callout-construction:after{
	display: none;
}
.how-it-works .callouts > div.callout-sloy:after{
	height: 100px;
	border-left: 1px solid #545454;
	border-top: 1px solid #545454;
	left: 50%;
	top: -99px;
}
.how-it-works .callouts > div.callout-sloy p{
	left: 40px;
	top: -90px;
	bottom: auto;
	transform: none;
	-ms-transform: none;
	display: block;
}
.how-it-works .callouts > div.callout-membrana:after{
	height: 180px;
	border-top: 0;
	border-left: 0;
	border-right: 1px solid #545454;
	border-bottom: 1px solid #545454;
	left: 0;
	bottom: 80px;
	top: 2vw;
	margin-top: 1px;
}
.how-it-works .callouts > div.callout-membrana p{
	border: 100px;
	bottom: -160px;
	text-align: right;
	left: -200px;
	width: 200px;
	transform: none;
}
.how-it-works .callouts > div.callout-podkladka:after{
	height: 100px;
	border-top: 0;
	border-left: 0;
	border-right: 1px solid #545454;
	border-bottom: 1px solid #545454;
	left: 0;
	bottom: 100px;
	top: 2vw;
	margin-top: 1px;
}
.how-it-works .callouts > div.callout-podkladka p{
	border: 100px;
	bottom: -80px;
	text-align: right;
	left: -180px;
	width: 200px;
	transform: none;
	text-align: right;
}
.how-it-works .callouts > div .title{
	position: absolute;
	top: -20px;
	left: -100px;
	width: 250px;
	display: block;
	font: 15px/1 gothicb;
	text-align: center;
}

html:not([dir="rtl"]) .noUi-horizontal .noUi-handle{
	right: -23px!important;
}