@charset "utf-8";

/*fonts*/

@font-face {
	font-family: 'Manrope';
	src: url('/css24/webfonts/Manrope/Manrope-VariableFont_wght.ttf') format('truetype-variations');
	font-weight: 400;
	font-stretch: 100%; /* Set the font stretch values based on your font */
}
/*licence for PauProBol */

/**
 * @license
 * MyFonts Webfont Build ID 3867246, 2020-12-16T11:57:38-0500
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: FF Bau Pro Bold by FontFont
 * URL: https://www.myfonts.com/products/bold-bau-pro-363983
 * Copyright: Copyright © 2023 Monotype Imaging Inc. All rights reserved.
 * 
 * © 2023 MyFonts Inc. */
@font-face {
	font-family: "FFBauProBold";
	src: url('/css24/webfonts/FFBauProBold/font.woff2') format('woff2'), url('/css24/webfonts/FFBauProBold/font.woff') format('woff');
}

/* licence for Graphik */

/*
        This font software is the property of Commercial Type.

        You may not modify the font software, use it on another website, or install it on a computer.

        License information is available at http://commercialtype.com/eula
        For more information please visit Commercial Type at http://commercialtype.com or email us at info[at]commercialtype.com

        Copyright (C) 2023 Schwartzco Inc.
        License: 2305-RYOLXG     
*/
@font-face {
	font-family: 'Graphik Web';
	src: url('/css24/webfonts/Graphik/Graphik-Semibold-Web.woff2') format('woff2'),
		 url('/css24/webfonts/Graphik/Graphik-Semibold-Web.woff') format('woff');
	font-weight:  600;
	font-style:   normal;
	font-stretch: normal;
  }
  
  .Graphik-Semibold-Web {
	font-family: 'Graphik Web';
	font-weight:  600;
	font-style:   normal;
	font-stretch: normal;
  }
  
  
  @font-face {
	font-family: 'Graphik Web';
	src: url('/css24/webfonts/Graphik/Graphik-Regular-Web.woff2') format('woff2'),
		 url('/css24/webfonts/Graphik/Graphik-Regular-Web.woff') format('woff');
	font-weight:  400;
	font-style:   normal;
	font-stretch: normal;
  }
  
  .Graphik-Regular-Web {
	font-family: 'Graphik Web';
	font-weight:  400;
	font-style:   normal;
	font-stretch: normal;
  }

html{
	background: #fff;
}
*{
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	cursor: none !important;
}

html, body{
	font-family: "Graphik Web", sans-serif;
	background: #ffffff;
	/*overflow-x: hidden;*/
	color: #333333;
	line-height: initial;
	font-size: 16px;
	font-weight: 400;
}
main{
	line-height: 1.5;
}
html, body, h1, h2, h3, h4, h5{
	margin: 0;
	padding: 0;
}
a{
	color: inherit;
	text-decoration: none;
}
#nav{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	min-height: 32px;
	/*padding: 6px 40px 0;*/
	padding: 6px 20px 0;
	z-index: 2048;
	color: #fff;
	font-size: 18px;
	background: rgba(0,0,0,0.99);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	-webkit-transform: translate3d(0,0,0);
	-webkit-transform: translateZ(0);
	backface-visibility: hidden;
	perspective: 1000;
	transform: translate3d(0,0,0);
	transform: translateZ(0);
}

#nav.hidden {
	display: none;
}

#nav a, #menu a,#nav a:hover, #menu a:hover, #foot a:hover{
	text-decoration: none;
	color: inherit;
}
#nav a, #nav > .sub{
	display: inline-block;
	-webkit-transition: all 0.26s ease;
	transition: all 0.26s ease;
}
#nav > a{
	padding-bottom: 0px;
	position: relative;
}
#nav > a span{
	opacity: 0;
}
#nav [class^="icon-"], #nav [class*=" icon-"] {
	font-size: 32px;
	font-size: 26px;
	padding: 0 ;
	height: 1em;
	width: 2em;
	display: inline-block;
	opacity: 1;
}
#nav a .tooltip{
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	bottom: 0.2em;
	word-break: keep-all;
	white-space: nowrap;
	pointer-events: none;
	-webkit-transition: all 0.26s ease;
	transition: all 0.26s ease;
	opacity: 0;
	font-size: 14px;
}
#nav a:hover .tooltip{
	opacity: 1;
}
#nav a:hover {
	opacity: 0.6;
}
#nav .sub{
	position: relative;
}
#nav #lang{
	white-space: nowrap;
}
#nav #lang div{
	display: inline-block;
	font-size: 0;
}
#nav #lang a{
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
	max-width: 0;
	overflow: hidden;
	padding: 3px 0px;
	font-size: 1rem;
}
#nav #lang.active a, #nav #lang a.active{
	max-width: 2.2em;
	/*-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;*/
	padding: 3px 6px;
}
#nav .logo{
	right: 20px;
	position: absolute;
	top: 9px;
}
#nav .logo img{
	height: 26px;
}
#nav #search .container{
	display: inline-block;
	-webkit-transition: all 0.6s ease;
	transition: all 0.6s ease;
	max-width: 0;
	overflow: hidden;
	padding: 0;
}
#nav #search input{
	background: transparent;
	font: inherit;
	border: 0 none;
	border-bottom: 1px solid;
	color: #fff;
}
#nav #search.active .container{
	max-width: 120px;
}
#nav #search-result{
	position: absolute;
	top: 60px;
	width: 96%;
	left: 2%;
}
#nav #search-result a{
	display: none;
	padding: 0 0.2em;
	background: rgba(0,0,0,1);
	font-size: 14px;
	line-height: 22px;
}
#nav #search-result a:hover{
	opacity: 0.9;
}
#nav #search-result a.active{
	display: block;
}

.nav-whitespace{
	height: 100px;
}
.nav-whitespace + .nav-whitespace{
	height: 50px;
}

#menu{
	position: fixed;
	top: 0;
	bottom: 0;
	left: -560px;
	width: 560px;
	left: -39%;
	width: 39%;
	-webkit-transition: all 0.8s ease;
	transition: all 0.8s ease;
	z-index: 4096;
	font-size: 2em;
	background: #000;
}
#menu.active{
	left: 0;
}
#menu .bg,#menu .bg:after,.menu .bg{
	position: absolute;
	top: 0;
	left: -2px;
	right: 0;
	bottom: 0;
	z-index: 2;
	overflow: hidden;
}
#menu .bg{
}
#menu .bg:after{
	content:"";
	background: rgba(0,0,0,0.25);
}
#menu .menu{
	position: absolute;
	top: 50%;
	right: 16%;
	color: #fff;
	font-weight: 600;
	line-height: 3.5em;
	z-index: 10;
	/*-webkit-transform: translateY(-50%);
	transform: translateY(-50%);*/
	margin-top: -10.5em;
	opacity: 0;
	z-index: 9;
	pointer-events: none;
	text-align: right;
	-webkit-transition: all 0.8s ease;
	transition: all 0.8s ease;
}
#menu #menu-main, #menu .menu.active{
	z-index: 11;
	pointer-events: initial;
	opacity: 1;
}
#menu .menu.active ~ #menu-main{
	opacity: 0;
	z-index: 9;
	pointer-events: none;
	right: 0;
}
#menu a{
	display: block;
	-webkit-transition: all 0.6s ease, opacity 0.2s 0s ease;
	transition: all 0.6s ease, opacity 0.2s 0s ease;
	white-space: nowrap;
	position: relative;
	opacity: 0;
	left: -200px;
}
#menu .menu.active a, #menu.active #menu-main a{
	left: 0;
	opacity: 1;
}
#menu .menu.sub a:not(.back){
	font-size: 0.66666em;
	line-height: 3.6em;
	font-weight: normal;
	text-transform: uppercase;
}
#menu a:hover span, #menu a.active span,#menu a:hover{
	opacity: 0.5;
}
#menu a span{
	-webkit-transition: all 0.25s ease;
	transition: all 0.25s ease;
}
#menu #menu-main a, #menu .menu .back{
}

#menu .close, #menu .close:last-child{
	position: absolute;
	top: 6%;
	left: 2%;
	width: 1.5em;
	height: 1.5em;
	background: url(../images/icons/artra-ico-close-w.svg) center center no-repeat;
	background-size: contain;
	z-index: 40;
	opacity: 1;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	-webkit-transition: all 0.25s ease;
	transition: all 0.25s ease;
}
#menu .close:hover{
	opacity: 0.5;
}
#menu .back:before{
	content: "";
	width: 1.2em;
	height: 1.2em;
	vertical-align: middle;
	display: inline-block;
	margin-right: 0.25em;
	background: url(../images/icons/artra-ico-left-w.svg) no-repeat center center;
	background-size: contain;
	-webkit-transition: all 0.25s ease;
	transition: all 0.25s ease;
	margin-top: -0.15em;
}
#menu .back:hover:before{
	margin-right: 0;
}
#menu + .shade{
	position: fixed;
	z-index: 4000;
	top: 0;
	left: 0;
	bottom: 0;
	width: 0;
}
#menu.active + .shade{
	width: 100%;
}
#menu .bg > div.active{
	position: absolute;
	background-size: cover;
	width: 200%;
	height: 160%;
	left: -20%;
	bottom: -20%;
	-webkit-animation: bg-raptor 10s ease infinite alternate;
	animation: bg-raptor 10s ease infinite alternate;
	right: auto;
	top: auto;
	background-position: right bottom;
	filter: blur(15px);
	z-index: 1;
}
#bg-raptor{
}

.menu.collection{
	width: 61%;
	position: fixed;
	top: 0;
	left: -61%;
	bottom: 0;
	z-index: 4002;
	-webkit-transition: all 0.8s ease;
	transition: all 0.8s ease;
}
.menu.collection.active{
	left: 39%;
}
.collection a{
	position: absolute;
	left: 50%;
	top: unset;
	bottom: 13.5%;
	color: #333333;
	overflow: hidden;
	z-index: 10;
	padding: 1em 3em 1em 4em;
	line-height: 1em;
	border-right: 3px solid #fff;
	border-bottom: 3px solid #fff;
	margin-left: -110px;
}
.collection a:before{
	content:"";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	-webkit-transform: skew(-32deg);
	transform: skew(-32deg);
	transform-origin: left bottom;
	border-top: 3px solid #fff;
	border-left: 3px solid #fff;
	height: 1.5em;
	-webkit-transition: all 0.25s ease;
	transition: all 0.25s ease;
	-webkit-box-sizing: initial;
	box-sizing: initial;
	background: #fff;
}
.collection a:after{
	content:"";
	position: absolute;
	bottom: 0px;
	left: 0;
	width: 100%;
	height: 1.5em;
	border-left: 3px solid #fff;
	-webkit-transition: all 0.25s ease;
	transition: all 0.25s ease;
	background: #fff;
}
.collection a:hover:after, .collection a:hover:before{
	background: #fff;
}
.collection a span{
	position: relative;
	z-index: 5;
	-webkit-transition: all 0.25s ease;
	transition: all 0.25s ease;
	font-weight: 400;
    font-size: 20px;
    font-family: 'Graphik Web';
	color: #333;
}
.collection a span:after{
	display: inline-block;
	font-family: 'icomoon';
	content: "\e90f";
	font-size: 1em;
	padding: 0 0 0 0.5em;
}
.collection a:hover span{
	color: #333;
}
.collection .bg{
	background-size: cover;
	background-position: left center;
	/*background-position: left 15% center;*/
	background-position: left 49% center;
}
.collection:last-child a span{
	color: #333333;
}
.collection:last-child a:before, .collection:last-child a, .collection:last-child a:after{
	border-color: #333;
}


#menu-col .collection{
	display: none;
}

#cursor{
	border: 4px solid #fff;
	mix-blend-mode: difference;
	pointer-events: none;
	/*z-index: 9086;*/
	z-index: 2147483660;
	position: fixed;
	width: 46px;
	height: 46px;
	margin: -23px;
	-webkit-transition: width 0.26s ease, height 0.26s ease, margin 0.26s ease;
	transition: width 0.26s ease, height 0.26s ease, margin 0.26s ease;

	-webkit-transition: transform 0.26s ease;
	transition: transform 0.26s ease;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	-webkit-filter: grayscale(1);
	filter: grayscale(1);

	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	-webkit-transform: matrix(0.3, 0, 0, 0.3, 0, 0);
	backface-visibility: hidden;
	perspective: 1000;
	transform: matrix(0.3, 0, 0, 0.3, 0, 0);
}
#cursor.pointer{
	/*width: 32px;
	height: 32px;
	margin: -16px;*/

	-webkit-transform: matrix(0.7, 0, 0, 0.7, 0, 0);
	transform: matrix(0.7, 0, 0, 0.7, 0, 0);
	border: 2px solid #fff;
}
#cursor.hidden{
	opacity: 0;
}

.ppg{
	width: 12em;
	height: 3em;
	background: url(../images/pro-power-grip.svg) no-repeat left center;
	background-size: contain;
}
.icon-hamburger{
	background: url(../images/icons/artra-ico-hamburger.svg) center center no-repeat;
	background-size: contain;
}
.icon-home{
	background: url(../images/icons/artra-ico-home.svg) center center no-repeat;
	background-size: contain;
}
.icon-search{
	background: url(../images/icons/artra-ico-search.svg) center center no-repeat;
	background-size: contain;
}
.icon-contact{
	background: url(../images/icons/artra-ico-contact.svg) center center no-repeat;
	background-size: contain;
}
.icon-contact-w{
	background: url(../images/icons/artra-ico-contact-w.svg) center center no-repeat;
	background-size: contain;
}
.icon-download{
	background: url(../images/icons/artra-ico-download.svg) center center no-repeat;
	background-size: contain;
}
.icon-language{
	background: url(../images/icons/artra-ico-language.svg) center center no-repeat;
	background-size: contain;
}
.icon-logo{
	background: url(../images/icons/artra-ico-download-logo.svg) center center no-repeat;
	background-size: contain;
}

.icon-instructions{
	background: url(../images/icons/artra-ico-instructions.svg) center center no-repeat;
	background-size: contain;
}
.icon-link{
	background: url(../images/icons/artra-ico-copy-link.svg) center center no-repeat;
	background-size: contain;
	height: 32px !important;
}
.icon-katalog{
	background: url(../images/icons/artra-ico-catalogue.svg) center center no-repeat;
	background-size: contain;
}
.icon-info{
	background: url(../images/icons/artra-ico-info.svg) center center no-repeat;
	background-size: contain;
}
.icon-download-pdf{
	background: url(../images/icons/artra-ico-download.svg) center center no-repeat;
	background-size: contain;
}

.icon-hamburger.w{
	background: url(../images/icons/artra-ico-hamburger-w.svg) center center no-repeat;
}
.icon-home.w{
	background: url(../images/icons/artra-ico-home-w.svg) center center no-repeat;
}
.icon-search.w{
	background: url(../images/icons/artra-ico-search-w.svg) center center no-repeat;
}
.icon-contact.w{
	background: url(../images/icons/artra-ico-contact-w.svg) center center no-repeat;
}
.icon-download.w{
	background: url(../images/icons/artra-ico-download-w.svg) center center no-repeat;
}
.icon-language.w{
	background: url(../images/icons/artra-ico-language-w.svg) center center no-repeat;
}


.icon-logo-2023{
	background: url(../images/2023/ico/artra-ico-download-logo.svg) center center no-repeat;
	background-size: contain;
}

.fullslide{
	position: relative;
	height: 100vh;
	width: 100%;
	overflow: hidden;
}
.fullslide > .container{
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	top: -100%;
	-webkit-transition: all 0.7s ease;
	transition: all 0.7s ease;
}
.fullslide > .container.active{
	top: 0;
}
.fullslide > .container.active ~ .container{
	top: 100%;
}
.fullslide .prev, .fullslide .next{
	position: absolute;
	z-index: 10;
	bottom: 5%;
	right: 3%;
	width: 60px;
	height: 60px;
}
.fullslide .prev{
	margin-bottom: 60px;
}
.fullslide .prev:after, .fullslide .next:after{
	content: "";
	position: absolute;
	top: 8px;
	left: 8px;
	width: 38px;
	height: 38px;
	border: 4px solid;
	border-left-color: transparent;
	border-top-color: transparent;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
}
.fullslide .next:after{
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.numanim .mono{
	display: inline-block;
	width: 0.666em;
	text-align: right;
}
.numanim{
	white-space: nowrap;
}
.numanim .mono:nth-last-child(3n){
	padding-left: 0.4em;
}

input[type=checkbox]{
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0.001;
}
input + label{
	height: 1em;
	width: 1em;
	border: 0.1em solid;
	position: relative;
	display: inline-block;
	vertical-align: middle;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
input:checked +label {
	background-color: #333333;
}
input[type=checkbox] + label:after {
	content: "";
	position: absolute;
	display: none;
	left: 29%;
	top: 7.5%;
	width: 25%;
	height: 50%;
	border: solid white;
	border-width: 0 0.18em 0.18em 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
input[type=checkbox]:checked + label:after {
	display: block;
}

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
    background-color: #333333;
}

.width{
	max-width: 1100px;
	margin: auto;
}
h2{
	font-weight: inherit;
}
.line{
	display: block;
	border-bottom: 1px solid;
}

#video, #video video{
	width: 100%;
	font-size: 0;
}
#video video{
	background: url(/images/loading.gif) no-repeat center center;
	background-size: initial;
}

#products{
	max-width: 2000px;
	width: 96%;
	margin: auto;
}
#products:after{
	content: "";
	display: block;
	clear: both;
}
#products .product-container, #search-result .product-container{
	float: left;
	width: 33.33333%;
	margin: 2% 0;
	padding-top: 35.33333%;
	padding-bottom: 3em;
	position: relative;
	display: none;
}
#products .product-container.active, #search-result .product-container{
	display: block;
}
.product{
	position: absolute;
	left: 1px;
	right: 1px;
	top: 0;
	min-height: 100%;
	border: 1px solid transparent;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	padding: 1em;
	background: #fff;

	padding-right:10px !important;
	padding-left:10px !important;
}
.product > .img{
	width: 100%;
	padding-top: 95.4225%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center bottom;
	position: relative;
	/*568 542*/
}
.product > .img > .img{
	position: absolute;
	top: 0;
	left: -10px;
	right: -10px;
	bottom: 0;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	opacity: 0;
	pointer-events: none;
	background-size: cover;
}
.product > .img > .img.active{
	opacity: 1;
}
.product > .img:after{
	content: "";
	background: rgba(11, 17, 64, 0.04);
	position: absolute;
	top: 0;
	left: -10px;
	right: -10px;
	bottom: 0;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.product:hover{
	border-color: inherit;
	z-index: 3;
	transition: all 0.5s ease;
}
.product:hover .img:after{
	background: transparent;
}
.product > .details{
	max-height: 0;
	-webkit-transition: all 0.6s ease;
	transition: all 0.6s ease;
	overflow: hidden;
	position: relative;
	font-size: 2.6vw;
	padding: 0% 0;
}
.product > .details .img{
	float: left;
	width: 32%;
	padding-top: 46.77%;
	background-size: cover;
	background-position: center center;
	position: relative;/*182*266 vyrez:95x137*/
}
.product > .details .img:nth-child(2){
	margin: 0 2%;
}
.product > .details .img:first-child:after{
	content: "";
	position: absolute;
	top: 0%;
	left: 0;
	width: 0;
	height: 0;
	border-top: 2.66em solid #fff;
	border-right: 1.82em solid transparent;
}
.product > .details .img:last-child:after{
	content: "";
	position: absolute;
	bottom: 0em;
	right: 0;
	width: 0;
	height: 0;
	border-bottom: 2.66em solid #fff;
	border-left: 1.82em solid transparent;
}
.product > .details:after{
	content: "";
	display: block;
	clear: both;
}
.product:hover > .details{
	max-height: 400px;
	padding: 2% 0 0;
}
.product .name{
	padding: 0.6em 0;
	font-size: 1.2em;
}
.product .type{
	padding-bottom: 1em;
	font-size:15px;
	font-family: 'Graphik Web';
	font-weight: 400;
}
.product .metal_free{
	max-width: 80px;
	margin-bottom: 18px;
}

#products.dassler{
	max-width: 1540px;
}
#products.dassler .product-container, #search-result.dassler .product-container{
	width: 25%;
	padding-top: 25%;
	margin: 0 0 4%;
}
.dassler .product{
	padding: 0 0 0em;
}
.dassler .product:hover{
	padding: 0 0 1em;
}
.dassler .product > .details{
	font-size: 34px;
}
.dassler .product > .img{
	padding-top: 100%;
}
.dassler .product > .details,.dassler .product > .name, .dassler .product > .type{
	width: calc(94% + 20px);
	left: 0;
	margin-left: auto;
	margin-right: auto;
}

#product{
	max-width: 2000px;
	width: 96%;
	margin: auto;
	position: relative;
	/*border: 1px solid;*/
}
#product .ppg{
	background-color: #000;
	font-size: 0.5em;
	margin: 1em 0 1em;
}
#product:after{
	content: "";
	display: block;
	clear: both;
}
#product > .details, #product > .img, #product > .info{
	float: left;
	/*border: 1px solid;*/
}
#product > .details{
	position: relative;
	font-size: 50px;
	width: 10%;
	margin-right: 1%;
}
#product > .details .img{
	width: 100%;
	padding-top: 146.15%;
	background-size: cover;
	background-position: center center;
	position: relative;
}
#product > .details .img:nth-child(2){
	margin: 6% 0;
}
#product > .details .img:first-child:after{
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	width: 0;
	height: 0;
	border-top: 3em solid #fff;
	border-right: 2em solid transparent;
}
#product > .details .img:last-child:after{
	content: "";
	position: absolute;
	bottom: -1px;
	right: -1px;
	width: 0;
	height: 0;
	border-bottom: 3em solid #fff;
	border-left: 2em solid transparent;
}
#product > .container{
	position: absolute;
	top: 0;
	left: 18%;
	z-index: 10;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	pointer-events: none;
}
#product > .container div:last-child{
	font-size: 14px;
	font-weight: 600;
}
#product > .container h2{
	font-size: 2em;
}
#product > .container.active{
	left: 64%;
	pointer-events: initial;
}
#product > .img{
	width: 52%;
	padding-top: 6%;
	padding-bottom: 39%;
	position: relative;
	margin-right: 1%;
}
#product > .img > .img{
	width: 89%;
	height: 91%;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 6%;
	z-index: 3;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	background-size: cover;
	pointer-events: none;
}
#product > .img > .img.img-sole{
	background-size: contain !important;
	height: 140%;
}
#product > .img > .img.active{
	opacity: 1;
}
#product > .img > .img.main{
	opacity: 1;
	background-position: center bottom;
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 1;
	left: 4%;
	width: 92%;
	height: 94%;
	pointer-events: initial;
}
#product > .img > .text{
	position: absolute;
	z-index: 2;
	left: 0;
	bottom: auto;
	top: 90%;
	margin-top: 0.8em;
	right: 0;
	text-align: center;
	text-transform: uppercase;
	color: #333333;

	top: auto;
	bottom: 6%;
}
#product > .img .bm{
	display: inline-block;
	padding: 0 1em;
}
#product > .img .bm:after{
	content:"";
	display: inline-block;
	width: 0;
	vertical-align: middle;
	height: 1.6em;
	border-left: 1px solid;
}
#product .info{
	width: 32%;
	padding-top: 6.2em;
	font-weight: 100;
	position: relative;
	font-size: 14px;
}
#product .info .row{
	display: table-row;
}
#product .info .row > div{
	display: table-cell;
	padding: 0.5em 0;
}
#product .info .row > .name{
	padding-right: 1em;
	font-weight: 600;
}
#product .picto{
	padding: 2em 0;
	padding-top: 0 !important;
}
#product .picto > div{
	width: 2.8em;
	height: 2.8em;
	vertical-align: middle;
	display: inline-block;
	margin-right: 7px;
	position: relative;
}
.picto-1{
	background-image: url(../images/icons/pikto-1.svg);
}
.picto-2{
	background-image: url(../images/icons/pikto-2.svg);
}
.picto-3{
	background-image: url(../images/icons/pikto-3.svg);
}
.picto-4{
	background-image: url(../images/icons/pikto-4.svg);
}
.picto-5{
	background-image: url(../images/icons/pikto-5.svg);
}
.picto-6{
	background-image: url(../images/icons/pikto-6.svg);
}
.picto-7{
	background-image: url(../images/icons/pikto-7.svg);
}
.picto-8{
	background-image: url(../images/icons/pikto-8.svg);
}
.picto-9{
	background-image: url(../images/icons/pikto-9.svg);
}
.picto-10{
	background-image: url(../images/icons/pikto-10.svg);
}
.picto-11{
	background-image: url(../images/icons/pikto-11.svg);
}
.picto-12{
	background-image: url(../images/icons/pikto-12.svg);
}
.picto-13{
	background-image: url(../images/icons/pikto-13.svg);
}
.picto-14{
	background-image: url(../images/icons/pikto-14.svg);
}
.picto-15{
	background-image: url(../images/icons/pikto-15.svg);
}
.picto-16{
	background-image: url(../images/icons/pikto-16.svg);
}
.picto-17{
	background-image: url(../images/icons/pikto-17.svg);
}
.picto-18{
	background-image: url(../images/icons/pikto-18.svg);
}
#product .picto .tooltip{
	pointer-events: none;
	opacity: 0;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
	position: absolute;
	bottom: 100%;
	left: 50%;
	min-width: 160px;
	max-width: 240px;
	padding: 0.6em;
	background: #333333;
	margin-left: -80px;
	margin-bottom: 10px;
	color: #fff;
	z-index: 30;
	text-align: center;
}
#product .picto .tooltip:after{
	content: "";
	position: absolute;
	top: 100%;
	border: 10px solid transparent;
	border-top-color: #333333;
	left: 50%;
	margin-left: -17px;
}
#product .picto > div:hover .tooltip{
	opacity: 1;
}
#product .links > div{
	display: inline-block;
	margin-right: 2em;
	position: relative;
}
#product .links > div span{
	display: inline-block;
	width: 1.6em;
	height: 1.6em;
	vertical-align: middle;
	margin-right: 0.3em;
}
#product .links .sub{
	position: absolute;
	bottom: 100%;
	min-width: 180px;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	-webkit-transition: opacity 0.4s ease;
	transition: opacity 0.4s ease;
}
#product .links > div:hover .sub{
	opacity: 1;
	max-height: 24em;
}
#product .links .sub:after{
	content: "";
	border: 10px solid transparent;
	border-top-color: #000;
	border-bottom-width: 0;
	margin: auto;
	width: 0;
	height: 0;
	display: block;
}
#product .links .sub div{
	background: #000;
	color: #fff
}
#product .links .sub a{
	display: block;
	text-align: center;
	padding: 0.5em;
	border-bottom: 1px solid #555;
	font-size: 14px;
}
#product .links .sub a:hover{
	background: #555;
}


#zoom{
	position:absolute;
	top:0;
	left:0;
	width:0;
	height:0;
	background-color: #fff;
	background-repeat:no-repeat;
	-webkit-transition:width 0s 0.4s ease, opacity 0.4s ease;
	transition:width 0s 0.4s ease, opacity 0.4s ease;
	opacity:0;
	pointer-events: none;
	background-size: 2508px auto;
	z-index: 10;
}
#zoom.active{
	-webkit-transition:width 0s 0s ease, opacity 0.4s ease;
	transition:width 0s 0s ease, opacity 0.4s ease;
	width:100%;
	height:auto;
	opacity:1;
	padding-top: 140.8%;
}
#main #zoom-div{
	position:absolute;
	border:1px solid white;
	background-color:rgba(200,200,200,0.3);
	cursor:zoom-in;
	padding:0;
	-webkit-transition:none;
	transition:none;
	pointer-events:none;
	z-index:4;
}
#main #zoom-div:not(.active){
	display:none;
}

#key-features{
	padding: 100px 0 100px;
	position: relative;
	margin: auto;
	overflow: hidden;
}
#key-features h2{
	position: absolute;
	top: 89px;
	left: 10%;
	z-index: 5;
	font-weight: 900;
	font-size: 3rem;
	line-height: 1.2em;
	max-width: 45%;
}
#key-features .text{
	position: absolute;
	top: 80%;
	font-weight: 100;
	font-size: 1.2em;
	line-height: 1.8em;
	left: 50%;
}
#key-features .text b{
	font-size: 1.5em;
	font-weight: bold;
}
#key-features .container{
	width: 100%;
	position: relative;
	margin: auto;
	padding-top: 64%;
	padding-top: 1024px;
	margin: auto;
	max-width: 1600px;
}
#key-features .container:after{
	content: "";
	display: block;
	clear: both;
}
#key-features .skew{
	width: 36%;
	/* 69,48 */
	/*padding-top: 27.79%; 40%*/
	padding-top: 25.01%;
	/*padding-top: 20.845%;30% */
	-webkit-transform: skew(-35deg);
	transform: skew(-35deg);
	-webkit-transform-origin: left bottom;
	transform-origin: left bottom;
	position: absolute;
	overflow: hidden;
}
#key-features .skew .img{
	width: 150%;
	height: 100%;
	-webkit-transform: skew(35deg);
	transform: skew(35deg);
	-webkit-transform-origin: left bottom;
	transform-origin: left bottom;
	position: absolute;
	top: 0;
	left: -0%;
	background-size: cover;
	background-position: center center;
}
#skew-1{
	top: 22%;
	left: 4.5%;
}
#skew-2{
	top: 0%;
	left: 51%;
}
#skew-3{
	top: 61.7%;
	left: -13.2%;
}
#skew-4{
	top: 39.8%;
	left: 33.3%;
}



/* skosenie galeria */
/* 312x447 */
/*30x43*/
/* 10x7 */
#filter{
	position: fixed;
	top: 80px;
	left: 2%;
	right: 2%;
	border-top: 1px solid;
	border-bottom: 1px solid;
	font-size: 0;
	z-index: 1024;
	background: #ffffff;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding-right: 260px;
}
#filter:after, #filter:before{
	content: "";
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
	position: absolute;
	top: -1px;
	bottom: -1px;
	opacity: 0;
	width: 0;
	background: #fff;
}
#filter.scrolled:after,#filter.scrolled:before{
	border: 1px solid;
	width: 1%;
	opacity: 1;
}
#filter.scrolled:after,#filter:after{
	left: 100%;
	border-left: 0px none;
}
#filter.scrolled:before,#filter:before{
	right: 100%;
	border-right: 0px none;
}
#filter .filter-1{
	position: relative;
	z-index: 12;
}
#filter .filter-2{
	position: relative;
	max-height: 0;
	-webkit-transition: all 0.9s ease;
	transition: all 0.9s ease;
	overflow: hidden;
	z-index: 11;
}
#filter.active .filter-2{
	max-height: 600px;
	overflow: visible;
}
#filter .container{
	font-size: 1rem;
	display: inline-block;
	position: relative;
	padding: 0.5em 0.8em 0.6em;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	white-space: nowrap;
}
#filter .container.active .name{
	font-weight: 600;
}
#filter .container:before{
	content: "";
	position: absolute;
	top: 0%;
	left: 0;
	width: 0;
	height: 0;
	border-top: 0.9em solid #fff;
	border-right: 0.6em solid transparent;
}
#filter .container .name:after{
	content: "";
	display: inline-block;
	margin-left: 0.5em;
	vertical-align: middle;
	height: 1em;
	width: 1em;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url(../images/icons/artra-ico-drop-down.svg?v2);
}
#filter .container.show .name:after{
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
	background-image: url(../images/icons/artra-ico-drop-down-w.svg);
}
#filter .container .name{
	display: inline-block;
	vertical-align: middle;
	font-weight: 600;
}
#filter .container.show{
	background: #333333;
}
#filter .container.show .name{
	color: #fff;
}
#filter .container .sub{
	position: absolute;
	top: 100%;
	left: 0;
	border: 0px solid;
	-webkit-transition: all 0.9s ease;
	transition: all 0.9s ease;
	max-height: 0;
	overflow: hidden;
	background: #fff;
	z-index: 12;
	min-width: 100%;
}
#filter .container.show .sub{
	max-height: 400px;
	border: 1px solid;
	z-index: 3;
}
#filter .io{
	position: absolute;
	top: 50%;
	right: 60px;
	margin-top: -0.5em;
	line-height: 1em;
	height: 1em;
	padding-right: 40px;
	background: url(../images/icons/artra-ico-plus.svg) right center no-repeat;
	background-size: contain;
	font-size: 1rem;
	z-index: 10;
}
#filter .io.less{
	display: none;
	background: url(../images/icons/artra-ico-minus.svg) right center no-repeat;
}
#filter.active .io.more{
	display: none;
}
#filter.active .io.less{
	display: block;
}

#filter.dassler{
	max-width: 1540px;
	left: 50%;
	right: auto;
	width: 96%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	padding: 9px 260px 9px 0;
}
#filter.dassler .container{
	padding: 0;
	height: 40px;
	line-height: 40px;
	border: 1px solid transparent;
	-webkit-transition: all 0s ease;
	transition: all 0s ease;
}
#filter.dassler .container .name{
	padding: 0 0.8em;
}
#filter .container.show .name:after{
	background-image: url(../images/icons/artra-ico-drop-down.svg);
}
#filter.dassler .container:hover{
	border: 1px solid;
}
#filter.dassler .container.show{
	background: #fff;
	border: 1px solid;
	border-bottom: 0px none;
}
#filter.dassler .container.show .name{
	color: inherit;
}
#filter.dassler .container .sub{
	margin-top: 0px;
	margin-left: -1px;
	-webkit-transition: none;
	transition: none;
}
#filter.dassler .container.show .sub{
	max-height: none;
	padding: 0.8em 0;
}
#filter.dassler .container .sub:before{
	content: "";
	position: absolute;
	border: none;
	left: 0;
	right: 0;
	width: auto;
	height: 2px;
	top: -2px;
	background: #fff;
}
#filter.dassler .container.show:before{
	background: #fff;
	top: 100%;
	margin-top: -1px;
	height: 3px;
	left: 0;
	right: 0;
	width: 100%;
	border: 0 none;
	z-index: 15;
}


#filter .item input + label{
	margin-right: 1em;
}
#filter .sub .item{
	padding: 0.4em 1em;
	white-space: nowrap;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
#filter .sub .item:hover{
	background: rgba(11, 17, 64, 0.03);
}
/*#filter .sub .item:first-child{
	padding-top: 1.2em;
}
#filter .sub .item:last-child{
	padding-bottom: 1.2em;
}*/
#filter .sub .item .num{
	opacity: 0.5;
	display: inline-block;
	padding-left: 0.4em;
}

#labels{
	min-height: 2em;
	width: 96%;
	margin: auto;
}
#labels > div{
	height: 2em;
	line-height: 2em;
	padding: 0 0.6em;
	background: rgba(0,0,0,0.1);
	display: inline-block;
	margin: 0 1em 1em 0;
	font-weight: 100;
}
#labels > div:after{
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 1.2em;
	height: 1.2em;
	background-image: url(../images/icons/artra-ico-close.svg);
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	margin-left: 0.4em;
}
#labels > div.close-all{
	background: #333;
	color: #fff;
}
#labels > div:hover:after{
	background-image: url(../images/icons/artra-ico-close-w.svg);
}
#labels > div:hover{
	background: #f00;
	color: #fff;
}
#labels.dassler{
	max-width: 1540px;
}
 #labels.dassler > div:hover{
	background: rgba(0,0,0,0.1);
	color: inherit;
}
#labels.dassler > div.close-all{
	background: transparent;
	text-decoration: underline;
	color: inherit;
}
#labels.dassler > div.close-all:hover{
	background: #000;
	color: #fff;
}
#labels.dassler > div:hover:after{
	background-image: url(../images/icons/artra-ico-close.svg);
}
#labels.dassler > div.close-all:hover:after{
	background-image: url(../images/icons/artra-ico-close-w.svg);
}

#no-results{
	display: none;
}
#no-results.active{
	display: block;
}
#no-results h2{
	padding: 1em 0;
}

#norms{
	width: 96%;
	max-width: 1060px;
	margin: auto;
	padding-top: 100px;
	overflow: auto;
	min-height: 960px;
	font-weight: 100;
}
#norms th{
	font-weight: 600;
	text-align: left;
}
#norms > div{
	width: 1060px;
}
#norms h2{
	text-align: center;
	padding-bottom: 1em;
}
#norms table{
	margin: auto;
	border-collapse: collapse;
}
#norms td, #norms th{
	padding: 0.3em;
	border-bottom: 1px solid;
}
#norms .switch{
	width: 33%;
	text-align: center;
	display: inline-block;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 1.2rem;
	padding: 1em;
	transition: all 0.25s ease;
}
#norms #normy2 table:last-child{
	margin-top: 2em;
}
#norms #normy2 table{
	margin-left: 0;
}
#norms #piktogramy2 table{
	float: left;
	width: 47%;
	margin-right: 3%;
}
#norms #piktogramy2 table td:first-child{
	border-bottom: none;
}
#norms #piktogramy2:after{
	content: "";
	display: block;
	clear: both;
}
#norms .switch:hover{
	opacity: 0.5;
}
#norms .text-under-size{
	max-width: 758px;
    margin: auto;
    margin-top: 40px;
	font-size: 13px;
}
#sprievodca{
	position: relative;
	height: 780px;
}
#sprievodca .picto{
	width: 32px;
	height: 32px;
	background-size: contain;
}
#sprievodca > div{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	padding-top: 2em;
	opacity: 0;
	pointer-events: none;
}
#sprievodca > div.active{
	opacity: 1;
	pointer-events: initial;
}
#norms #normy2 table table:last-child{
	margin: 0;
}
#norms #normy2 td.left{
	border-left: 1px solid;
}
#normy2 table table td{
	border-bottom: 0 none;
	padding: 0.3em 0.6em 0.3em 0;
}
#norms #normy2 td:nth-child(3){
	padding-left: 1em;
}
#norms #velkosti2 td{
	white-space: nowrap;
	padding-left: 0.6em;
    padding-right: 0.6em;
}

#download{
	padding-top: 140px;
}
#download *{
	font-family: 'Graphik Web';
	font-weight: 400;
	font-size: 15px;
}
#download .width.heading{
	position: fixed;
	top: 0px;
	padding-top: 60px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background: #fff;
	z-index: 942;
	height: 30px;
}
#download #download-head.scrolled .width.heading{
	padding-top: 58px;
}
#download #filter{
	position: absolute;
	top: 220px;
	min-width: 1000px;
	max-width: 1300px;
}
#download #filter.scrolled{
	position: fixed;
	top: 130px;
}
#download #filter .container{
	position: relative;
	bottom: 0;
}
#download [class^="icon-"], #download [class*=" icon-"]{
	width: 2em;
	height: 1.56em;
	display: inline-block;
	vertical-align: middle;
}
#download h2{
	font-size: 20px;
	padding-bottom: 0.4em;
	font-family: 'FFBauProBold';
	text-transform: uppercase;
}
#download .dl{
	display: inline-block;
	/*width: 200px;*/
	margin-right: 5.6em;
	font-family: 'Graphik Web';
	font-weight: 400;
	font-size: 15px;
}
#dl-table-head{
	background: #fff;
	z-index: 944;
	padding-top: 5em;
	position: relative;
}
#download #filter.active + #dl-table-head{
	padding-top: 7.6em;
}
#dl-table-head.width.scrolled{
	position: fixed;
	left: 50%;
	margin-left: -650px;
	top: 118px;
}
#dl-table-head.width.scrolled:after{
	content: "";
	position: absolute;
	top: 100%;
	left: -10000px;
	right: -10000px;
	border-bottom: 1px solid;
}
#dl-table-head.width.scrolled + .line{
	padding-top: 151px;
	border-bottom: none;
}
#dl-table-head label{
	margin-bottom: 0.2em;
}
.dl-table{
	position: relative;
}
#dl-table-body > div{
}
.dl-table > div > div:nth-child(2){
	width: 29%;
	text-align: left;
}
.dl-table > div > div:nth-child(1){
	width: 8%;
}
.dl-table > div > div{
	display: inline-block;
	width: 10.5%;
	text-align: center;
	padding: 10px 0;
	vertical-align: top;
	white-space: nowrap;
}
.dl-table > .dl-row > div:not(.tooltip){
	height: 30px;
	border-bottom: 1px solid;
}
.dl-row{
	position: relative;
}
.dl-row .tooltip{
	position: absolute;
	overflow: hidden;
	pointer-events: none;
	left: 0;
	width: 37%;
	top: 100%;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	opacity: 0;
	z-index: 3;
	margin-top: -1px;
	padding: 0;
	background: #fff;
}
.dl-row .tooltip img{
	width: 0;
	margin: auto;
	display: block;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	opacity: 0;
}
.dl-row.hover .img{
	opacity: 0;
}
.dl-row.hover .tooltip{
	border: 1px solid;
	border-top: none;
	opacity: 1;
}
.dl-row.hover .tooltip img{
	width: 100%;
	opacity: 1;
}
.dl-table > .dl-row.hover > div:nth-child(2){
	border-bottom: none;
	border-right: 1px solid;
	padding-right: 1px;
	margin-right: -2px;
	background: #fff;
}
.dl-table > .dl-row.hover > div:nth-child(1){
	border-bottom: none;
	background: #fff;
}
.dl-table > .dl-row.hover > div:nth-child(1):before{
	content: "";
	border-left: 1px solid;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
}
.dl-row:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	-webkit-transition: background 0.3s ease;
	transition: background 0.3s ease;
}
.dl-row.active:after{
	background: rgba(11, 17, 64, 0.03);
}
.dl-row.active.hover:after{
	left: 40%;
}
.dl-row label{
	opacity: 0;
	pointer-events: none;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.dl-row.active label,.dl-row > div:first-child label{
	opacity: 1;
	pointer-events: initial;
}
.dl-table .img{
	display: inline-block;
	vertical-align: middle;
	margin: -10px 1em -10px 0;
	width: 62px;
	height: 50px;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
#download #dl-table-body a:hover{
	opacity: 1;
}
#dl-table-body a:hover .img{
	/*-webkit-transform: scale(1.26);
	transform: scale(1.26);*/
}
#dl-table-body .dl-row:not(.show.show2){
	display: none;
}
#dl-search{
	white-space: nowrap;
}
#dl-search > div{
	overflow: hidden;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
	max-width: 0;
	display: inline-block;
	vertical-align: middle;
}
#dl-search > div input, #dl-search > div input:focus, #dl-search > div input{
	width: 10em;
	font: inherit;
	border: none;
	outline: none;
	border-bottom: 1px solid;
}
#dl-search.active > div{
	max-width: 10em
}
#dl-search > a .tooltip{
	overflow: hidden;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
	max-width: 8em;
	display: inline-block;
	vertical-align: middle;
}
#dl-search.active > a .tooltip{
	max-width: 0;
}
#download-all{
	background: #333333;
	color: #fff;
	font-size: 1rem;
	display: inline-block;
	position: relative;
	padding: 1em 1.2em;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	white-space: nowrap;
}
#download-all:before{
	content: "";
	position: absolute;
	font-size: 1.8em;
	top: 0%;
	left: -1px;
	width: 0;
	height: 0;
	border-top: 0.9em solid #fff;
	border-right: 0.6em solid transparent;
}
#download .container .dl{
	vertical-align: middle;
	text-align: center;
	width: auto;
	padding: 0 1em;
	position: relative;
}
#download #link-tooltip{
	pointer-events: none;
	opacity: 0;
	position: absolute;
	top: 100%;
	padding: 0.4em;
	background: #333;
	z-index: 2000;


	position: fixed;
	top: auto;
	bottom: 10px;
	left: 50%;
	width: 300px;
	margin-left: -150px;
}
#download #link-tooltip.active{
	opacity: 1;
	pointer-events: initial;
}
#download #link-tooltip input{
	background: transparent;
	border: 0 none;
	border-bottom: 1px solid;
	padding: 0.1em 0.3em;
	font:inherit;
	background: #333;
	color: #fff;
	display: block;
	font-weight: 100;
	width: 97%;
}
#download .container{
	position: absolute;
	bottom: 10em;
	right: 0;
}
#download #filter.active + #dl-table-head .container{
	bottom: 12.6em;
}
#download .width{
	position: relative;
	max-width: 1300px;
	width: 96%;
}
#download p{
	margin: 0;
	padding: 3em 0px 1em 0;
	font-family: 'Graphik Web';
	font-size: 15px;
	max-width: 558px;
}
#download #dropbox_btn{
	top: 40px;
    position: relative;
    display: flex;
	width: max-content;
}
#download #dropbox_btn span:nth-child(1){
	margin-right: 6px;
}
#download #dropbox_btn span:nth-last-child(1){
	display: block;
    height: max-content;
    margin: auto;
}
#download a{
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
#download a:hover{
	opacity: 0.5;
}

#download-head{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: #fff;
	z-index: 1024;
	border-bottom: 1px solid;
}
#download #download-head #filter, #download #download-head .width.heading, #download-head #dl-table-head.width.scrolled{
	position: relative;
	-webkit-transform: none;
	transform: none;
	left: 0;
	top: 0;
	margin: 0em auto;
}
#download-head #dl-table-head.width.scrolled:after{
	display: none;
}
#download-head #dl-table-head{
	padding-top: 0em;
}
#download-head #labels{
	max-width: 1300px;
	margin-top: 0.5em;
}
#download-head #labels:after{
	content: "";
	display: inline-block;
	height: 2em;
	width: 20em;
	margin-bottom: 1em;
	vertical-align: middle;
	display: none;
}
#download #download-head .heading .container{
	top: 10.5em;
	z-index: 20;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
#download #download-head #text{
	max-height: 12em;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
	overflow: hidden;
	position: relative;
}
#download #download-head.scrolled #text{
	max-height: 22px;
	margin-bottom: 1em;
}
#download #download-head.scrolled .heading .container{
	top: 3.8em;
}
#download #labels > div{
	margin-bottom: 0.6em;
}
#download-head + .width{
	padding-top: 300px;
}

.cookies_notice{
	display:none;
	width: 100%;
    height: 200px;
    position: fixed;
    bottom: 0;
    background: rgba(0,0,0,0.92);
}
.cookies_notice p{
	color: white;
    padding: 10px;
    margin-top: 4px;
}

.gdpr, .cookies{
	background: #000;
	color: #f5f5f5;
	font-weight: 100;
	padding-bottom: 100px;
}
.gdpr .width, .cookies .width{
	max-width: 820px;
}
@media (max-width: 900px){
	.gdpr .width, .cookies .width{
			padding: 0 15px;
	}
}
.gdpr h3, .cookies h3{
	padding-top: 1em;
}
.gdpr li, .cookies li{
	padding-bottom: 0.5em;
}
.gdpr ol {
	counter-reset: list;
	margin: 0;
}

.gdpr ol > li {
	list-style: none;
	position: relative;
}

.gdpr ol > li:before {
	counter-increment: list;
	/*content: counter(list, lower-alpha) ".) ";*/
	content: counter(list, upper-alpha) ") ";
	position: absolute;
	left: -1.4em;
}
.gdpr a, .cookies a{
	text-decoration: underline;
}





#nums{
	background: red;
	color: #fff;
}
#nums .wrap{
	position: absolute;
	top: 50%;
	margin-top: -6%;
	right: 10%;
	font-size: 0;
}
#nums .numanim, #nums .sub{
	font-size: 120px;
	font-size: 12vw;
	font-weight: 900;
	display: inline-block;
}
#nums .small{
	display: inline-block;
	font-size: 14px;
	font-size: 1.4vw;
	text-transform: uppercase;
	padding-left: 0.6em;
	line-height: 1.3em;
}
#num-point-9{
	opacity: 0;
	max-width: 0;
	-webkit-transition: max-width 0.6s 1.6s ease, opacity 0.6s 2.5s ease;
	transition: max-width 0.6s 1.6s ease, opacity 0.6s 2.5s ease;
}
#nums .dots{
	top: 50%;
	position: absolute;
	left: 2em;
	margin-top: -7.5em;
	z-index: 10;
}
#nums .dots span{
	display: block;
	width: 1.5em;
	height: 1.5em;
	position: relative;
}
#nums .dots span:after{
	content: "";
	position: absolute;
	width: 0.5em;
	height: 0.5em;
	top: 0.5em;
	left: 0.5em;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	transition: all 0.25s ease;
	background: rgba(255,255,255,0.5);
}
#nums .dots span:hover:after, #nums .dots span.active:after{
	background: #fff;
}
.fired + #num-point-9{
	opacity: 1;
	max-width: 2em;
}

#soles h2{
	text-transform: uppercase;
}
#soles .bg{
	background-size: cover;
	background-position: center center;
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	width: 100vw;
	height: 100vh;
	top: 0;
}
#soles .prev, #soles .next{
	display: none;
}
#soles.fullslide > .container, #soles.fullslide > .container.active,#news.fullslide > .container, #news.fullslide > .container.active{
	top: 0;
	-webkit-transition: all 1.4s ease;
	transition: all 1.4s ease;
	color: #fff;
	opacity: 0;
	z-index: 3;
	-webkit-transition-delay: 0.5s;
	transition-delay: 0.5s;
}
#soles.fullslide > .container.active,#news.fullslide > .container.active{
	opacity: 1;
	z-index: 4;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}
#soles.fullslide > .container.active ~ .container,#news.fullslide > .container.active ~ .container{
	top: 0;
	opacity: 0;
	z-index: 3;
	pointer-events: none;
}
.sole .name{
	position: absolute;
	bottom: 10%;
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
	-webkit-transform-origin: left bottom;
	transform-origin: left bottom;
	font-size: 120px;
	font-size: 18.5vh;
	left: 100%;
	line-height: 12.5vh;
	font-weight: 600;
	z-index: 10;
}
.other .name{
	position: absolute;
	bottom: 10%;
	font-size: 120px;
	font-size: 17vh;
	left: 20%;
	line-height: 12vh;
	font-weight: 600;
	z-index: 10;
	text-shadow: 0 0 1.5em rgba(0,0,0,1);
}
#soles .sole .ppg{
	position: absolute;
	left: 100%;
	margin-left: -14vh;
	bottom: 7%;
	font-size: 14px;
	font-size: 1.2vh;
}
.sole .wrap{
	position: absolute;
	top: 15%;
	right: 10%;
	font-size: 3vw;
	font-weight: 900;
	z-index: 10;
	text-transform: uppercase;
	text-align: right;
}
.sole .wrap .small{
	padding-top: 1em;
	font-size: 0.34em;
	font-weight: 100;
	text-transform: none;
}
#soles .double .bg{
	width: 50%;
	width: 50vw;
	background-position: center center;
}
#soles .double .bg:nth-child(2){
	left: 50%;
}
#wellness .name{
	bottom: auto;
	top: 5%;
	left: 50%;
	margin-top: 67px;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	font-size: 12vw;
}
#soles #wellness .bg{
	background-position: center bottom 20%;
}
#wellness .small{
	font-size: 16px;
	line-height: 2.2em;
}
#soles .dots{
	display: none;
}
#soles .dots.show{
	display: block;
}
#soles .dots#inovations-dots > a.active span, #soles .dots#inovations-dots > a:hover span{
	text-shadow: none;
}
#soles .dots,#news .dots {
	position: absolute;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	left: 40px;
	z-index: 1002;
	white-space: nowrap;
}
#soles .dots > a,#news .dots > a{
	display: block;
	width: 2rem;
	height: 2rem;
	margin: 0.2rem;
	position: relative;
}
#soles .dots > a:after, #news .dots > a:after{
	content: "";
	position: absolute;
	width: 24%;
	height: 24%;
	top: 38%;
	left: 38%;
	background: rgba(250,250,250,0.5);
	-webkit-border-radius: 50%;
	border-radius: 50%;
}
#soles .dots > a.active:after,#soles .dots > a:hover:after{
	background: rgba(250,250,250,1);
}
#soles .dots > a span{
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 20%;
	left: -50%;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
	color: #fff;
}
#soles .dots > a.active span, #soles .dots > a:hover span{
	opacity: 1;
	left: 100%;
	text-shadow: 0 0 1em rgba(0,0,0,0.7);
}
#soles #inovations-dots > a:first-child.active span,#soles #inovations-dots > a:first-child.active ~ a span{
	color: #333333;
}
#soles #inovations-dots > a:first-child.active:after,#soles #inovations-dots > a:first-child.active ~ a:after{
	background: #333333;
}

#soles #dna .name{
	text-align: center;
	left: 2%;
	right: 2%;
	font-size: 7.5vw;
	font-weight: 900;
	white-space: nowrap;
}
#soles #dna .wrap{
	position: absolute;
	bottom: 30%;
	right: 10%;
	text-align: right;
	color: #fff;
	font-weight: 600;
	font-size: 2rem;
	line-height: 1.6em;
	text-shadow: 0 0 1.8em rgba(0,0,0,0.6);
	z-index: 10;
}
#remeslo .name{
	left: 3%;
	font-weight: 900;
	font-size: 12vh;
}
#remeslo .name span{
	font-size: 0.3em;
	position: relative;
	z-index: 5;
}
#remeslo .wrap{
	position: absolute;
	right: 3%;
	bottom: 10%;
	font-weight: 600;
	font-size: 1.6em;
	text-align: right;
	-webkit-text-shadow: 0 0 2em rgba(0,0,0,0.7);
	text-shadow: 0 0 2em rgba(0,0,0,0.7);
}
#detail .name{
	left: 3%;
	right: 3%;
	text-align: center;
	font-weight: 900;
	top: 10%;
}
#detail .name span{
	font-size: 0.3em;
	position: relative;
	z-index: 5;
}
#rodina .name,#sci-not-fi .name{
	left: 3%;
	right: 53%;
	text-align: center;
	top: 8%;
}
#sci-not-fi .name{
	font-weight: normal;
	font-size: 6vw;
	color: rgba(0,0,0,0.8);
	-webkit-text-shadow: none;
	text-shadow: none;
}
#rodina .name:last-child,#sci-not-fi .name:last-child{
	left: 51%;
	right: 1%;
	color: #ffffff;
}
#rodina .name{
	font-weight: 900;
	font-size: 4vw;
}
#wellness .wrap{
	right: 52px;
}
#sci-not-fi .bg:nth-child(2):hover{
	left: 18%;
}
#sci-not-fi .bg{
	background-attachment: fixed;
}
#sci-not-fi .bg:nth-child(2){
	-webkit-transition: all 0.8s ease;
	transition: all 0.8s ease;
	width: auto;
	right: 0;
}
#sci-not-fi .name{
	pointer-events: none;
	white-space: nowrap;
}
#sci-not-fi .wrap{
	position: absolute;
	z-index: 5;
	pointer-events: none;
	right: 3.6%;
	top: 26%;
	text-align: right;
	line-height: 2em;
	font-size: 1.2em;
}
#sci-not-fi .wrap2{
	position: absolute;
	z-index: 5;
	pointer-events: none;
	right: 3%;
	left: 53%;
	top: auto;
	bottom: 8%;
	text-align: center;
	font-size: 2rem;
	font-size: 2.5vw;
	font-weight: 600;
}

#news .wrap{
	padding-top: 80px;
	max-width: 1200px;
	width: 90%;
	margin: auto;
	position: relative;
	color: #333333;
}
#news h2{
	padding-bottom: 0em;
	font-weight: 900;
	font-size: 3rem;
	position: relative;
	padding-right: 3em;
}
#news h2 .num{
	position: absolute;
	right: 0;
	font-weight: 100;
	top: 0;
}
#news .small{
	padding-bottom: 3em;
	padding-top: 2em;
	font-weight: 100;
	max-width: 600px;
}
#news img{
	max-width: 100%;
}
#news .dots{
	left: 20px;
}
#news .dots > a:after{
	background: rgba(0,0,0,0.5);
}
#news .dots > a.active:after,#news .dots > a:hover:after{
	background: rgba(0,0,0,1);
}
#news .next, #news .prev{
	display: none;
}
#news.fullslide > .container.active,#news.fullslide > .container{
	-webkit-transition: opacity 0.4s;
	transition: opacity 0.4s;
}
#news #obstaranie a img{
	display: inline-block;
	vertical-align: middle;
	margin-right: 1em;
}
#news #obstaranie a{
	padding: 0.5em 0;
	display: block;
}
#news #obstaranie a:hover{
	opacity: 0.7;
}

#news #novinka_2022 a img{
	display: inline-block;
	vertical-align: middle;
	margin-right: 1em;
}
#news #novinka_2022 a{
	padding: 0.5em 0;
	display: block;
}
#news #novinka_2022 a:hover{
	opacity: 0.7;
}

/*sole 4:3*/
#foot{
	padding-top: 100px;
	position: relative;
	background: #fff;
}
#foot .width{
	max-width: 1920px;
		width: 99%;
	margin: auto;
	position: relative;
}
#foot .width > h3{
	font-family: "FFBauProBold", sans-serif;
	padding-left: 2.5%;
	font-weight: 900;
}

#roller{
	margin-top: 1em;
	padding-bottom: 60px;
	font-size: 14px;
}
#roller .next, #roller .prev{
	position: absolute;
	left: 50%;
	margin-left: 820px;
	bottom: 41.5%;
	height: 50%;
	width: 60px;
	background: url(../images/icons/artra-ico-right.svg) no-repeat center center;
	background-size: contain;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
#roller .prev{
	left: auto;
	margin-left: 0;
	right: 50%;
	margin-right: 820px;
	background: url(../images/icons/artra-ico-left.svg) no-repeat center center;
}
#roller .next:hover, #roller .prev:hover{
	opacity: 0.5;
}
#roller .container{
	max-width: 1800px;
	width: 96%;
	margin: auto;
	position: relative;
	overflow: hidden;
	padding-top: 16%;
	padding-bottom: 3em;
}
#roller .container .wrap{
	width: 458.5%;
	left: 0;
	position: absolute;
	top: 0;
	bottom: 0;
	-webkit-transition: all 0.8s ease;
	transition: all 0.8s ease;
}
#roller.roll-1 .container .wrap{
	left: 0;
}
#roller.roll-2 .container .wrap{
	left: -100%;
}
#roller.roll-3 .container .wrap{
	left: -200%;
}
#roller.roll-4 .container .wrap{
	left: -200%;
}
#roller.roll-5 .container .wrap{
	left: -200%;
}
#roller.roll-6 .container .wrap{
	left: -200%;
}
#roller.roll-7 .container .wrap{
	left: -200%;
}
#roller.roll-8 .container .wrap{
	left: -200%;
}
#roller.roll-9 .container .wrap{
	left: -200%;
}
#roller.roll-1 .prev{
	opacity: 0;
}
#roller.roll-3 .next{
	opacity: 0;
}
#roller .product-container{
	
	padding-top: 7%;
	position: relative;
	float: left;
}
#roller .dassler .product-container{
	width: 3.136%;
	margin: 0;
	margin-right: 0.5%;
	border: 1px solid transparent;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
#roller .dassler{
	padding-bottom: 6em;
}
#roller .product-container .product{
	border: none;
}
#roller .product > .img:after{
	background: rgba(11, 17, 64, 0.05);
}
#roller .product:hover > .img:after{
	background: rgba(11, 17, 64, 0);
}
#roller + a{
	position: absolute;
	top: 0;
	right: 2.05%;
	padding-bottom: 0.2em;
	top: -0em;
	border-bottom: 1px solid #333333;
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
#roller + a:hover{
	opacity: 0.5;
}
@media (max-width: 420px){
	#roller + a{
		top: 5px;
		font-size: 14px;
	}
	#foot h3{
		line-height: 1.35;
	}
	
}

#roller .product-container .details{
	display: none;
}
#roller .container:after{
	content: "";
	display: block;
	clear: both;
}
#roller .product .name{
	font: normal normal 600 17px/24px Manrope;
}
#roller .details{
	font-size: 1.1vw;
}
#roller .dots{
	text-align: center;
	padding: 2em 0 0;
	font-size: 10px;
}
#roller .dots > span{
	display: inline-block;
	width: 5em;
	height: 1em;
	vertical-align: bottom;
	position: relative;
}
#roller .dots > span:nth-child(4), #roller .dots > span:nth-child(5){
	display: inline-block;
}

#roller .dots > span:nth-child(n+5){
	display: none;
}
#roller .dots > span:after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0.2em;
	width: 84%;
	height: 0.1em;
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
	background: #333333;
}
#roller .dots > span:hover:after{
	height: 0.6em;
}
#roller.roll-1 .dots > span:nth-child(1):after,
#roller.roll-2 .dots > span:nth-child(2):after,
#roller.roll-3 .dots > span:nth-child(3):after,
#roller.roll-4 .dots > span:nth-child(4):after,
#roller.roll-5 .dots > span:nth-child(5):after,
#roller.roll-6 .dots > span:nth-child(6):after,
#roller.roll-7 .dots > span:nth-child(7):after,
#roller.roll-8 .dots > span:nth-child(8):after,
#roller.roll-9 .dots > span:nth-child(9):after{
	height: 0.6em;
}

#ribbon{
	background: red;
	color: #fff;
	font-size: 1.4em;
	padding: 1.6em;
	text-align: center;
	font-weight: bold;
}
#ribbon > div{
	margin: 0 auto;
	max-width: 860px;
}
#foot-menu{
	background: #333333;
	color: #fff;
	font-size: 16px;
	line-height: 2.2;
	padding: 60px 0;
}
#foot-menu h5{
	font-weight: 900;
	font-size: 1.2em;
	padding-bottom: 1.2em;
}
#foot-menu a{
	-webkit-transition: all 0.25s ease;
	transition: all 0.25s ease;
	display: block;
}
#foot-menu a:hover{
	opacity: 0.5;
}
#foot-menu .menu{
	float: left;
	width: 16.66666%;
}
#foot-menu .container{
	max-width: none;
	margin: 0;
	padding: 0;
}
#foot-menu .container:after{
	content: "";
	display: block;
	clear: both;
}
#foot-menu a span{
	display: inline-block;
	width: 32px;
	height: 32px;
	margin-right: 0.6em;
	vertical-align: middle;
}
#copy{
	background: #000;
	color: #fff;
	text-align: center;
	padding: 1em;
	font-weight: normal;
	font-size: 14px;
}
#copy .bm{
	display: inline-block;
	padding: 0 1em;
}
#copy .bm:after{
	content:"";
	display: inline-block;
	width: 0;
	vertical-align: middle;
	height: 1.6em;
	border-left: 1px solid;
}

.modal {
	display: none;
	position: fixed;
	z-index: 100;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.7);
}
.modal-content {
	position: relative;
	background-color: #fefefe;
	margin: auto;
	padding-left: 70px;
	padding-right: 70px;
	padding-top: 30px;
	padding-bottom: 20px;
	border: 1px solid #888;
	width: 80%;
	max-width:800px;
	min-height:180px;
}
.close {
	position: absolute;
	color: #333333;
	right: 8px;
	top:8px;
	font-size: 28px;
	font-size: 32px;
	line-height: 20px;
}

#design-text{
	position: absolute;
	top: 50%;
	right: 40px;
	margin-top: -5em;
	font-size: 1.6em;
	color: #fff;
	text-align: right;
}
#design #design-text li{
	font-size: inherit;
}
#design ul.self-end{
	display: none;
}
div.state.active{
	color: red;
}

.close:hover,
.close:focus {
	color: white;
	text-decoration: none;
	background: #333333;
}
.modal-content h2{
	color: #333333;
	text-transform: uppercase;
	font-weight: 600;
	line-height: 1.2em;
}
.text-left{
	text-align: left;
}
#newsletter-modal input[type=email]{
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: 2px solid #333333;
	font-size: 16px;
	width: 320px;
	outline:none;
	padding-bottom: 5px;
}
#newsletter-modal input:-internal-autofill-selected{
	background-color: white;
}
#newsletter-modal ::placeholder {
	color: #333333;
}
#newsletter-modal :-ms-input-placeholder {
	color: #333333;
}
#newsletter-modal  ::-ms-input-placeholder {
	color: #333333;
}
#newsletter-modal input[type=email], p {
	letter-spacing: 0.5px;
}
#newsletter-modal a{
	font-size: 14px;
}

.grecaptcha-badge{
	display:none;
}

.container2 {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 16px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.container2 input {
	position: absolute;
	opacity: 0;
}
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;
	width: 20px;
	border: 2px solid #333333;
}

.container2 input:checked ~ .checkmark {
	background-color: #333333;
}
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}
.container2 input:checked ~ .checkmark:after {
	display: block;
}
.container2 .checkmark:after {
	left: 7px;
	top: 3px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.container2 * {
	box-sizing: border-box;
}

.icon-artra-ico-check {
	font-size: 20px;
	position: absolute;
	top: 6px;
	right: 0px;
	opacity: 0;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
}
.icon-artra-ico-check.show{
	opacity: 1;
	right: -17px;
}
.special-case{
	opacity:0;
}
.special-case.show{
	opacity:1;
}
a.underline{
	position:relative;
}
a.underline:hover{
	cursor: pointer;
}
a.underline::before{
	content:"";
	position:absolute;
	bottom:-4px;
	width:100%;
	height: 1px;
	background: #333333;
}

.before-submit, .after-submit{
	height:auto;
	transition: all 0.6s ease !important;
	-webkit-transition: all 0.6s ease !important;
	opacity: 1;
}
.before-submit.hide, .after-submit.hide{
	height:0 !important;
	overflow:hidden;
	opacity:0;
}
.after-submit{
	margin-top: 5%;
	text-align: center;
}
@media (max-width:767px){
	.modal-content {
		width: 100%;
		margin: auto;
		padding-left: 20px;
		padding-right: 20px;
	}
	#newsletter-modal input[type=email]{
		width:145%;
	}
}

/**/
.map-artra .states{
	top: 100px;
	height: 105%;
}
#mapa-zastupcovia{
	min-height: 730px;
}
.map-artra ul{
	line-height: 1.5;
}

#menu a:nth-child(1){
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}
#menu a:nth-child(2){
	-webkit-transition-delay: 0.4s;
	transition-delay: 0.4s;
}
#menu a:nth-child(3){
	-webkit-transition-delay: 0.6s;
	transition-delay: 0.6s;
}
#menu a:nth-child(4){
	-webkit-transition-delay: 0.8s;
	transition-delay: 0.8s;
}
#menu a:nth-child(5){
	-webkit-transition-delay: 1.0s;
	transition-delay: 1.0s;
}
#menu a:nth-child(6){
	-webkit-transition-delay: 1.2s;
	transition-delay: 1.2s;
}
#menu a:nth-child(7){
	-webkit-transition-delay: 1.4s;
	transition-delay: 1.4s;
}

#products.dassler .product-container .name, #search-result.dassler .product-container .name{
	font-weight: 600;
	font-family: 'Manrope';
}

@media (max-aspect-ratio: 0.8), (max-width: 540px){
	#raptor .bg, #rapid .bg, #rover .bg, #gripper .bg{
		width: 260%;
		height: 100%;
		height: 160vw;
		width: 100vh;
		background-size: cover;
		-webkit-transform: rotate(-90deg) translate(-50%, -50%);
		transform: rotate(-90deg) translate(-50%, -50%);
		-webkit-transform-origin: left top;
		transform-origin: left top;
		top: 50%;
		left: 50%;
	}
	#raptor .bg,#gripper .bg{
		background-position: left 10% center !important;
	}
	#rapid .bg{
		left: 33%;
	}
	#soles #gripper .name{
		font-size: 13vh;
		line-height: 9.2vh;
	}
	#soles #remeslo .bg{
		background-position: left 62% center;
	}
	#remeslo .wrap{
		top: 10%;
		left: 3%;
		right: 3%;
		text-align: center;
		font-size: 1.2em;
		color: #000;
		-webkit-text-shadow: 0 0 2em rgba(0,0,0,0);
		text-shadow: 0 0 2em rgba(0,0,0,0);
	}
	#soles #remeslo .name{
		text-align: center;
		left: 3%;
		right: 3%;
		font-size: 17vw;
		line-height: 0.7em
	}

	#soles .dots{
		bottom: -20px;
		top: auto;
		left: 50%;
	}
	#soles .dots > a{
		display: inline-block;
	}
	#soles .dots > a span{
		display: none;
	}
	#soles #dna .wrap{
		font-size: 1rem;
		text-align: center;
		left: 5%;
		right: 5%;
		bottom: 20%;
	}
	#soles:after{
		content: "";
		position: absolute;
		z-index: 12;
		bottom: 0;
		left: 0;
		right: 0;
		background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#66000000',GradientType=0 ); /* IE6-9 */
		height: 60px;
	}
	#menu .close, #menu .close:last-child{
		top: 46px;
	}
}
@media (max-aspect-ratio: 1), (max-width: 540px){

	#soles #rodina .bg,#soles #detail .bg{
		width: 100%;
		height: 50%;
	}
	#soles #rodina .bg:nth-child(2),#soles #detail .bg:nth-child(2){
		top: 50%;
		width: 100%;
		height: 50%;
		left: 0;
	}
	#soles #rodina .name{
		top: auto;
		bottom: 52%;
		left: 5%;
		right: 5%;
		font-size: 7vw;
	}
	#detail .name{
		top: 50%;
		margin-top: -0.9em;
	}
	#soles #rodina .name:last-child{
		top: 52%;
		bottom: auto;
		color: #000;
		text-shadow: 0 0 1em #fff;
	}
	#sci-not-fi .bg:first-child{
		width: 100%;
		background-size: 150% !important;
		background-position: right -20% center ! important;
	}
	#soles #sci-not-fi .bg:nth-child(2){
		background-size: 300%;
		background-position: right 75% center;
		left: 94%;
	}
	#soles #sci-not-fi .bg:nth-child(2) ~ .wrap2{
		left: 30%;
		font-size: 1.6em;
	}
	#soles #sci-not-fi .bg:nth-child(2) ~ .wrap,#soles #sci-not-fi .bg:nth-child(2) ~ .wrap2{
		color: transparent;
		-webkit-transition: all 0.4s ease;
		transition: all 0.4s ease;
	}
	#soles #sci-not-fi .bg:nth-child(2).active ~ .wrap,#soles #sci-not-fi .bg:nth-child(2).active ~ .wrap2{
		color: #fff;
	}
	#soles #sci-not-fi .bg:nth-child(2).active{
		left: 15%;
	}
}
@media (max-aspect-ratio: 1.25){

	.other .name{
		font-size: 10vw;
		line-height: 8vw;
	}
}
#roller .next{
	left: 98%;
	width: 2%;
	margin: 0;
}
#roller .prev{
	right: 98%;
	width: 2%;
	margin: 0;
}

@media screen and (max-width: 2000px){

	#product > .details{
		font-size: 2.4vw;
	}
}
@media screen and (max-width: 1600px){
	#product .info{
		width: 42%;
	}
	#product #zoom.active{
		padding-top: 107.3%;
	}
	#product > .img{
		width: 46%;
	}
	#product > .container.active{
		left: 58%;
	}
	.dassler .product > .details{
		font-size: 2vw;
	}

	#key-features .container{
		padding-top: 64%;
		margin-left: 5%;
	}
}
@media screen and (max-width: 1400px){
	#product .info{
		font-size: 14px;
	}
	#product > .img > .text{
		top: 100%;
		bottom: auto;
	}
	#key-features h2{
		font-size: 2.2em;
	}
	#foot-menu{
		font-size: 14px;
	}
	.dl-row a{
		font-size: 14px;
	}
}
@media screen and (max-width: 1333px){
	#products.dassler .product-container, #search-result.dassler .product-container{
		width: 33.333%;
		padding-top: 33.333%;
	}
	#products.dassler .product-container .details, #search-result.dassler .product-container .details{
		font-size: 2.6vw;
	}
}
@media screen and (max-width: 1354px){
	#dl-table-head.width.scrolled{
		margin-left: 0;
		left: 2%;
	}
}
@media screen and (max-width: 1200px){
	#products .product-container{
		width: 50%;
		margin: 2% 0;
		padding-top: 52%;
	}
	#product > .container h2{
		font-size: 1.2em;
	}

	h2{
		font-size: 1.5rem;
	}

	.product .details{
		font-size: 4vw;
	}
	.sole .name{
		font-size: 15vh;
		line-height: 10.7vh;
	}
	#soles .sole .ppg{
		margin-left: -11.4vh;
		font-size: 0.9vh;
	}
	#product > .img .text{
		bottom: auto;
		top: 100%;
		margin-top: 0.8em;
		line-height: 1em;
	}
	#product > .img .bm{
		display: block;
		font-size: 0;
	}
	#key-features{
		margin-top: 5em;
	}
	#key-features .container{
		padding-top: 768px;
		width: 1200px;
		left: 50%;
		margin-left: -600px;
	}
	#roller .next {
		left: 96.5%;
		width: 5%;
		margin: 0;
	}
	#roller .prev {
		right: 96.5%;
		width: 5%;
		margin: 0;
	}
	#roller .next, #roller .prev{
		bottom: 39.5%;
	}

	#roller .container{
		padding-top: 33%;
	}
	#roller .container .wrap{
		width: 600%;
	}
	#roller.roll-4 .container .wrap{
		left: -300%;
	}
	#roller.roll-5 .container .wrap{
		left: -400%;
	}
	#roller.roll-6 .container .wrap{
		left: -500%;
	}
	#roller.roll-7 .container .wrap{
		left: -500%;
	}
	#roller.roll-8 .container .wrap{
		left: -500%;
	}
	#roller.roll-9 .container .wrap{
		left: -500%;
	}
	#roller.roll-3 .next{
		opacity: 1;
	}
	#roller.roll-6 .next{
		opacity: 0;
	}


	#roller .dots > span:nth-child(n+4){
		display: inline-block;
	}
	#roller .dots > span:nth-child(n+7){
		display: none;
	}

	@media screen and (max-width: 1200px){
		#roller .container .wrap {
			width: 932.5%;
		}
	
		#roller .dots > span:nth-child(n+6) {
			display: inline-block;
		}
	}

	#newsletter .btn-text{	
		font-family: 'Graphik Web';
		font-weight: 400;
	}
	
	#foot-menu h5{
		font-family: "FFBauProBold";
	}
	#foot-menu a{
		font-family: 'Graphik Web';
		font-weight: 400;
	}
	#copy{
		font-family: 'Graphik Web';
		font-weight: 400;
	}

	@media screen and (max-width: 1500px){			
		#foot-menu .menu {
			width: 33.33333%;
			padding-bottom: 4em;
		}
	}
	@media screen and (max-width: 760px){
		#foot-menu .menu {
			width: 50% !important;
			padding-bottom: 2em;
		}
		#filter{
			top: 37px !important;
		}
	}
	@media screen and (max-width: 580px){
		#foot-menu .menu {
			float: none;
			width: 100%;
		}
	
		#foot-menu .width-2 {
			width: 80%;
			margin: auto;
		}
		#contact-form-button{
			margin-right: 16px !important;
		}
	}

	#design-text{
		display: none;
	}
	#design ul.self-end{
		display: initial;
	}

	.map-artra .states{
		top: auto;
		height: 100%;
	}
	#foot-menu .menu{
		width: 33.33333%;
		padding-bottom: 4em;
	}

	#dl-table-head.width.scrolled{
		position: relative;
		left: 0%;
		-webkit-transform: none;
		transform: none;
		top: 0px;
	}
	#dl-table-head.width.scrolled:after{
		display: none;
	}
	#dl-table-head.width.scrolled + .line{
		padding-top: 0px;
		border-bottom: 1px solid;
	}
	#download .width.heading{
		position: relative;
		top: 0px;
		padding-top: 60px;
		left: 0%;
		-webkit-transform: none;
		transform: none;
	}
	#download{
		padding: 1em;
		overflow: auto;

	}
	#download > *{
		width: 1160px !important;
	}
	#download #filter.scrolled{
		position: absolute;
		top: 220px;
	}

}
@media screen and (max-width: 1000px){
	#key-features h2{
		position: relative;
		top: 0;
		left: 0;
		padding-bottom: 0.5em;
		padding-left: 10%;
		max-width: none;
	}
	#menu{
		width: 60%;
		left: -60%;
	}

	.menu.collection{
		display: none;
	}
	#menu-col .collection{
		display: block;
		width: 100%;
		padding-top: 100%;
		position: relative;
	}
	#menu #menu-col{
		width: 100%;
		top: 26px;
		margin-top: 0;
		right: 0;
		overflow: auto;
		height: 90%;
	}
	#menu #menu-col > a{
		padding-right: 10%;
	}
	#menu #menu-col .collection a{
		position: absolute;
		line-height: 1em;
		left: 50%;
	}
	#menu #menu-col .collection:last-child a span{
		color: #333333;
	}
	#menu #menu-col .collection:last-child a:before, #menu #menu-col .collection:last-child a, #menu #menu-col .collection:last-child a:after{
		border-color: #333;
	}
	#menu #menu-col .collection > span{
		position: absolute;
		left: 2%;
		right: 2%;
		top: 4%;
		z-index: 5;
		font-weight: 600;
		text-transform: uppercase;
		text-align: center;

	}
	#menu #menu-col .bg:after{
		display: none;
	}
	#menu #menu-col .bg{
		background-size: 270%;
		background-position: left 49% center;
	}
	#menu-col > a:not(.back){
		display: none;
	}
	.other .name{
		font-size: 10vw;
		line-height: 8vw;
	}

	#products.dassler .product-container .name, #search-result.dassler .product-container .name{
		font-size: 14px;
	}

}
@media screen and (max-width: 880px){
	#nav [class^="icon-"], #nav [class*=" icon-"]{
		width: 1.4em;
	}
	#menu{
		font-size: 1.5em;
	}
	#menu .menu .back.de span{
		font-size: 22px;
	}
	#menu .back.de:before{
		position: relative;
		right: -6px;
		font-size: 22px;
	}
	.sole .wrap, #wellness .wrap{
		text-align: center !important;
		font-size: 2rem;
		top: 0px !important;
		margin-top: 80px;
		left: 3%;
		right: 3%;
	}
	.sole .wrap .small{
		font-size: 1rem;
	}
	#wellness .name{
		display: none;
	}
	#soles #wellness .bg{
		width: 100%;
		height: 65%;
		background-position: center bottom 22%;
	}
	#soles #wellness .bg:nth-child(2){
		top: 65%;
		height: 35%;
		left: 0;
		background-position: center bottom 18%;
	}

	#roller .container{
		padding-top: 50%;
	}
	#roller .container .wrap{
		width: 458.5%;
	}
	#roller .dots > span:nth-child(n+4),#roller .dots > span:nth-child(n+7){
		display: inline-block;
	}
	#roller.roll-4 .container .wrap{
		left: -300%;
	}
	#roller.roll-5 .container .wrap{
		left: -400%;
	}
	#roller.roll-6 .container .wrap{
		left: -500%;
	}
	#roller.roll-7 .container .wrap{
		left: -600%;
	}
	#roller.roll-8 .container .wrap{
		left: -700%;
	}
	#roller.roll-9 .container .wrap{
		left: -800%;
	}
	#roller.roll-10 .container .wrap{
		left: -900%;
	}
	#roller.roll-6 .next{
		opacity: 1;
	}
	#roller.roll-9 .next{
		opacity: 0;
	}

	#products.dassler .product-container, #search-result.dassler .product-container{
		width: 50%;
		padding-top: 50%;
	}
	#products.dassler .product-container .details, #search-result.dassler .product-container .details{
		font-size: 4vw;
	}

	#mapa-zastupcovia{
		min-height: 30px;
	}

	#filter .filter-1{
		max-height: 0;
		-webkit-transition: all 0.9s ease;
		transition: all 0.9s ease;
		overflow: hidden;
	}
	#filter.active .filter-1{
		max-height: 600px;
		overflow: visible;
	}
	#filter{
		min-height: 48px;
	}

	#filter .io{
		position: relative;
		top: 0;
		right: 0;
		margin: 0;
		height: 40px;
		line-height: 40px;
		padding: 0 40px 0 0.8em;
	}
	#filter.active .io.less{
		display: inline-block;
		background-size: 16px;
		padding-right: 1.8em;
	}
	#filter.dassler{
		padding-right: 140px;
	}

	#ribbon{
		font-size: 1.2em;
	}
	#copy {
		line-height: 1em;
	}
	#copy .bm{
		display: block;
		font-size: 0;
	}

	.product .metal_free{
		max-width: 80px;
		margin-bottom: 22px;
	}
	.product .type{
		padding-bottom: 0.7em !important;
	}
}
@media screen and (max-width: 760px){
	#nav{
		background: rgba(0,0,0,0.96);
	}
	#nav [class^="icon-"], #nav [class*=" icon-"] {
		font-size: 20px;
		padding: 0;
		vertical-align: middle;
	}
	#nav .logo{
		top: 8px;
		right: 10px;
	}
	#nav #search .container{
		height: 1em;
		border-bottom: 1px solid;
	}
	#nav #search{
		height: 1em;
	}
	#nav .logo img{
		height: 26px;
	}
	#nav #lang div{
		vertical-align: top;
	}
	#nav #lang a{
		max-width: 2em;
		max-height: 0;
		padding: 0px 6px;
		font-size: 1rem;
		display: block;
	}
	#nav #lang a.active, #nav #lang.active a{
		max-height: 1.9em;
		padding: 3px 6px;
	}
	#cursor{
		display: none;
	}
	*{
		cursor: initial !important;
	}
	#products .product-container{
		width: 96%;
		margin: 2% 0;
		padding-top: 100%;
	}
	.product .details{
		font-size: 7.5vw;
	}

	#product{
		padding-top: 0px;
	}
	#product > .container, #product > .container.active{
		position: relative;
		width: 96%;
		margin: 0 auto;
		top: 0;
		left: 0;
	}
	#product > .details, #product > .img, #product > .info{
		float: none;
		width: 96%;
		margin: auto;
	}
	#product > .img{
		padding-bottom: 80%;
	}
	#product > .details{
		margin-top: 90%;
		position: absolute;
		font-size: 7vw;
		padding: 0% 0;
		top: 12rem;
	}
	#product > .info{
		padding-top: 50%;
		margin-top: 8rem;
	}
	#product > .details:after{
		content: "";
		display: block;
		clear: both;
	}
	#product > .details .img{
		float: left;
		width: 32%;
		padding-top: 46.77%;
	}
	#product > .details .img:nth-child(2){
		margin: 0 2%;
	}

	#key-features h2{
		font-size: 1.4em;
	}
	#key-features .skew{
		width: 46%;
		/*width: 40%;
		 69,48 */
		padding-top: 31.96%;
		/*padding-top: 27.79%
		padding-top: 20.845%;30% */
	}
	#skew-2, #skew-3{
		display: none;
	}
	#skew-1{
		top: 20%;
		left: -13.5%
	}
	#skew-4{
		top: 7%;
		left: 37%
	}
	#key-features .container{
		 padding-top: 40%;
		 padding-top: 304px;
		 width: 760px;
		 margin-left: -348px;
	 }
	#key-features .text{
		position: relative;
		top: auto;
		left: 0;
		margin-left: 40%;
		font-size: 1em;
	}

	#news{
		height: auto;
	}
	#news .dots{
		display: none;
	}
	#news h2{
		font-size: 1.8em;
	}
	#news.fullslide > .container,#news.fullslide > .container.active ~ .container{
		position: relative;
		opacity: 1;
		pointer-events: initial;
		width: auto;
		height: auto;
	}

	#foot-menu .menu{
		width: 50%;
		padding-bottom: 2em;
	}
	.product .type {
		padding-bottom: 0.7em;
	}
}
@media screen and (max-width: 580px){

	#nav{
		padding: 6px 10px 0;
	}
	#nav .logo{
		top: 7px;
		right: 4px;
	}
	#nav .logo img, #nav .logo svg.nav-logo{
		height: 24px;
		width: 130px;
		right: 6px;
		position: relative;
		top: -1px;
	}
	
	#nav #lang.active:hover a,#nav #lang.active a.active{
		padding: 3px 6px;
	}
	h2{
		font-size: 1.2rem;
	}
	#ribbon{
		font-size: 1rem;
	}
	#newsletter button{
		font-size: 14px;
	}

	#menu{
		width: 87%;
		left: -87%;
	}
	#key-features h2{
		font-size: 1.2em;
	}
	#key-features .text{
		margin:32px 0 10px;
		padding-left: 10%;
	}
	#key-features .text b{
		font-size: 1.2em;
	}

	body .hm{
		display: none !important;
	}

	#raptor .wrap .small{
		padding-right: 20%;
		padding-left: 20%;
	}
	#soles #wellness .bg{
		height: 70%;
		background-position: center bottom 36%;
	}
	#soles #wellness .bg:nth-child(2){
		top: 70%;
		height: 30%;
	}
	#wellness .small{
		font-size: 14px;
	}
	#detail .name span{
		font-size: 0.6em;
	}
	#detail .name{
		line-height: 1.2em;
		margin-top: -1.2em;
	}
	#sci-not-fi .bg:first-child{
		background-size: 116% !important;
	}

	#rapid .bg{
		background-image: url(/images/rapid-mobil.jpg) !important;
	}
	#gripper .bg{
		background-image: url(/images/gripper-mobil.jpg) !important;
	}
	#gripper .bg, #rapid .bg{
		-webkit-transform: none;
		transform: none;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-position: center center !important;
	}

	#nums .small{
		display: block;
		font-size: 14px;
		text-align: right;
	}
	#nums .wrap{
		text-align: right;
		margin-top: -7.5rem;
	}
	.fullslide .prev, .fullslide .next{
		bottom: 50%;
		margin-bottom: -7.5rem;
		right: 10%;
	}
	.fullslide .prev{
		margin-bottom: -5.5rem;
	}

	.body-product .nav-whitespace,.body-map .nav-whitespace{
		height: 50px !important;
	}

	#products.dassler .product-container, #search-result.dassler .product-container{
		width: 100%;
		padding-top: 100%;
	}
	#products.dassler .product-container .details, #search-result.dassler .product-container .details{
		font-size: 8vw;
	}
	#products.dassler .product-container .type, #search-result.dassler .product-container .type{
		font-size: 14px;
	}
	.product .name{
		padding: 0.6em 0 0.4em;
	}

	div.contact-page h1{
		font-size: 32px !important;
	}
	div.contact-page h2{
		font-size: 20px !important;
	}
	div.contact-page{
		font-size: 16px;
		min-height: unset;
	}
	div.contact-page .mobile-mb{
		margin-bottom: 1em !important;
	}
	div.contact-page .mobile-mt{
		margin-top: 0.5em !important;
	}
	.contact-text .nav-whitespace{
		display: none;
	}
	.contact-form{
		padding-top: 10px;
	}
	.contact-form > .container > .row:first-child > div > div{
		font-size: 26px !important;
	}

	#foot-menu h5{
		padding-bottom: 0;
	}
	#foot-menu .menu{
		float: none;
		width: 100%;
	}
	#foot-menu .width{
		width: 80%;
		margin: auto;
	}

	@supports (-webkit-touch-callout: none) {
		#sci-not-fi .bg{
			background-attachment: initial;
			background-size: auto 100%;
		}
		#sci-not-fi .bg:nth-child(2){
			width: 85%;
			right: auto;
			background-position: left 36% center !important;
		}
	}
	.body-contact main{
		overflow: hidden !important;
	}
}
@media screen and (max-height: 880px){
	#menu .menu{
		line-height: 3em;
	}
}
@media screen and (max-height: 666px){
	#menu .menu{
		line-height: 2em;
		margin-top: -6em;
	}
	#menu .menu.sub a:not(.back){
		line-height: 2.4;
	}
	#menu .close, #menu .close:last-child{
		top: 26px;
	}
}

@keyframes bg-raptor{
	0%{
		left:-80%;
		bottom: -40%;
		width: 200%;
		height: 160%;
	}
	32%{
	}
	100%{
		left: -50%;
		bottom: -20%;
		width: 280%;
		height: 210%;
	}
}

@media (max-height:920px){
	#filter.dassler .container.show .sub{
		max-height: 520px;
		overflow: auto;
	}
}