@font-face {
  font-family: AdihausDIN;
  src: url('fonts/AdihausDIN-Regular.ttf');
}

@font-face {
  font-family: AdihausDIN-Bold;
  src: url('fonts/AdihausDIN-Bold.ttf');
}


*, *:before, *:after {
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	  font-weight: unset;
	  font-family: sans-serif;
  }
html {
  /*scroll-behavior: smooth;*/
}
body{
	margin: 0;
	padding: 0;
	background-color: white;
	/*overflow-x: hidden;*/
}

img{
	width: 100%;
}

img {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	pointer-events: none;
}

div{
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

input[type=number] { -moz-appearance:textfield; }

button{

	background: none;
	border: none;
	cursor: pointer;
  font-family: 'AdihausDIN';
}


button:focus{
	outline: none;
}

a{
	color: white;
	text-decoration: underline;
	cursor: pointer;
  font-family: 'AdihausDIN';
}

a:hover{
	color: lightgrey;
}
h1, h2 ,h3 ,h4 h5{
  font-family: 'AdihausDIN-Bold';
}

p{
  font-family: 'AdihausDIN';
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.mobile{
 display: block;
}

.desktop{
	display: none;
}

/*menu Boton to x*/
/* Styling the menu button */
        .menu-btn {
            position: absolute;
            z-index: 3;
            right: 20px;
            top: 20px;
            cursor: pointer;
            transition: all 0.5s ease-out;
        }
 
        /* Styling the hamburger lines */
        .menu-btn .btn-line {
            width: 28px;
            height: 5px;
            margin: 0 0 5px 0;
            background: white;
            transition: all 0.5s ease-out;
        }
 
        /* Adding transform to the X */
        .menu-btn.close {
            transform: rotate(180deg);
        }
 
        /* Styling the three lines to make it an X */
        .menu-btn.close .btn-line:nth-child(1) {
            transform: rotate(45deg) translate(8px, 6px);
        }
 
        .menu-btn.close .btn-line:nth-child(2) {
            opacity: 0;
        }
 
        .menu-btn.close .btn-line:nth-child(3) {
            transform: rotate(-45deg) translate(7px, -6px);
        }
 



/*///////////////////////////////////////////*/


/*RADIO BUTTONS*/
/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 6px;
  left: 21px;
  height: 8px;
  width: 8px;
  /*background-color: #eee;*/
  border-radius: 50%;
  border: 1px solid white;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  /*background-color: #ccc;*/
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  /*background-color: #2196F3;*/
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
 	top: 1px;
    left: 1px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: white;
}

/*END RADIO BUTTON*/
/*///////////////////////////////////////////////*/

/*File INPUT*/
.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
  width: 0px;
}
.custom-file-input::before {
  content: 'Subir foto';
  display: inline-block;
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  font-size: 0.8rem;
}
.custom-file-input:hover::before {
  border-color: black;
}
.custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}
/*file input*/
/*/////////////////////////////////////////////*/


/*FORMULARIO*/
#registro{
	background-image: url('/img/bk2.jpg');
	background-size: 100% 100%;
	background-position: top left;
	color: white;
	margin-top: 38px;
	padding-bottom: 20px;

}
#formulario{
	padding-top: 20px;
	width: 95vw;
	max-width: 891px;
    margin: auto;
}

#form{
	width: 100%;
    margin: auto;
}

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


.input-text{
	width: 100%;
    max-width: 424px;
    font-size: 0.8rem;
    padding: 10px 20px;
    /* margin-right: auto; */
    margin-bottom: 10px;
    background: none;
    border: 1px white solid;
    color: white;
}

.input-text:-webkit-autofill,
.input-text:-webkit-autofill:hover, 
.input-text:-webkit-autofill:focus,
{
  border: 1px solid green;
  -webkit-text-fill-color: white;
}

.input-text::placeholder{
	color: white;
}

.input-row{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 10px;
	align-items: center;
}

.form-div{
	width: 100%;
	max-width: 424px;
    font-size: 0.8rem;
}

.bt-submit{
	width: 170px;
    margin: auto;
    display: block;
    margin-top: 20px;
}

.checks{
	font-size: 18px;
	margin: 0 5px;
}

.mleft{
	margin-left: auto;
}
.mright{
	margin-right: auto;
}

.m-b-10{
	margin-bottom: 10px;
}
.m-t-10{
	margin-top:10px;
}

.custom-file-input{
 width: 100%
}

.time{
	width: 61px;
    font-size: 0.8rem;
    padding: 10px 20px;
    text-align: center;
    color: white;
    background: none;
    border: 1px solid white;
}

.time::placeholder{
	color: white
}

.terminos{
	text-align: center;
    font-size: 0.7rem;
    margin-top: 0;
}

.dot{
	margin: 0;
	font-weight: bolder;
	font-size: 1rem;
	margin: 0 3px;
	align-self: center;
}

input:invalid {
  box-shadow: 0 0 5px 1px red;
}

input:focus:invalid {
  box-shadow: none;
}

#video video{
	width: 100vw;
}

#videoBanner{
	overflow-x: hidden;
    width: 100%;
}   

#videoPromo{
	position: relative;
	background-color: black;
	width: 100%;
	transition: all 1s /*cubic-bezier(.47,1.64,.41,.8)*/;

}

.flexbutton{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	position: absolute;
	bottom: 0;
	width: 50vw;
	margin: auto;
	padding-bottom: 15px;
	right: 50%;
    transform: translateX(50%);
}

.flexbutton button{
	width: 50vw;
	min-width: 120px; 
	max-width: 230px;
}

#header{
	position: fixed;
	width: 100%;
	z-index: 2;
}

#menucontainer{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  position: relative;
  background: #00000052;
}

.logo_adidas{
	width: 75px;
}


#como{
	width: 0;
	position: relative;
	background-image: url('/img/bk1.png');
	background-size: cover;
	background-position: center;
	transition: all 1s /*cubic-bezier(.47,1.64,.41,.8)*/;
	overflow-x: hidden;

}

.fix-w{
	width: 100vw;
}

#sliderHeader{
	display: flex;
}

.subtitel{
	margin: 38px;
    text-align: center;
    font-size: 32pt;
    color: lightgrey;
}

.chanelSubtitle{
	margin-bottom: 10px;
}

#canal{
	
}

#chanelflex{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
.bt_canal{
	padding-top: calc(540 / 1080 * 100%);
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	transition: all 1s;
}

.bt_canal:hover{
	background-size: auto 110%;
}


#carrera{
	background-image: url('/img/carrera.jpg');
}
#pisada{
	background-image: url('/img/pisada.jpg');
}

#canal{
	position: relative;
}

.overcanal{
	background-color: #0000007a;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
	justify-content: center;
	align-items: center;
    transition: all 1s;
    color: white;
    overflow: hidden;
}

.bt_canal:hover .overcanal{
	background-color: #00000000;
}

.btplay{
	width: 78px;
	opacity: 0;
	transition: all 1s;
	position: absolute;
	top: 70%;
}

.bt_canal:hover .btplay{
	opacity: 0.6;
	top: 57%;
	transition: all 1s;
	
}

#video_cannel{
	position: absolute;
    top: 0;
    background: black;
    height: 100%;
    vertical-align: middle;
    transition: all 1s;
    display: none;
    left: -100%;
    width: 100%;
}

#video_cannel video{
	width: 100%;
}

#superStart{
	background-image: url(/img/superstart.jpg);
    background-size: cover;
    background-position: 25%;
    display: flex;
    align-items: center;
    margin-top: 38px;
    padding: 20px 0;
}

.text_banner{
	width: 35%;
    margin-left: 2vw;
}

.button_banner{
	min-width: 110px;
    width: 50%;
    max-width: 158px;
    padding: 0;
    margin-top: 20px;
}

.logo_banner{
	width: 85px;
    margin-left: auto;
}

.bt-vovler{
	position: absolute;
    right: 0;
    top: 1vh;
    max-width: 280px;
    width: 40vw;
}

#end_content{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/img/bk1.png);
    background-size: 100% 100%;
    background-position: center;
    display: flex;
    align-content: center;
    flex-wrap: nowrap;
    flex-direction: column;

}

#pisada_end{
	margin: auto;
    width: 100%;
    padding: 0;
        max-width: 1000px;
}
#carrera_end{
    margin: auto;
    width: 90%;
    padding: 0;
    max-width: 1000px;
}

#carrera_end .titulo_end{
  margin: auto;
  cursor: pointer;
}

#pisada_end .titulo_end{
	margin: auto;
    max-width: 440px;
    width: 50%;
    margin-bottom: 45px;
}
.contenedo_pisadas{
	display: flex;
}

.bt_pisada{
	width: 33%;
    max-width: 214px;
    margin: auto;
    display: block;
}

#slider{
	width: 100%;
  max-width: 900px;
  overflow-x: hidden;
  margin: 38px auto;
  position: relative;
}

.slide_container{
	display: flex;
  	align-items: center;
  	margin: 0 20px 0 0;
  	width: 900px;
  	position: relative;
    left: 0;
    transition: all 0.5s;
}

.product{
	 width: 280px;
    position: relative;
    margin-right: 20px;
    color: black;
}

.prices{
	position: absolute;
    top: 71%;
    left: 2%;
    background-color: white;
    padding: 5px;
    border-radius: 5px;
}

.prices p{
    margin: 0
}

.info{
	padding-left: 2%;
}

#alert{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  position: absolute;
    width: 320px;
    background: #ff00007a;
    text-align: center;
    padding: 5px;
    border-radius: 8px;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2vh;
    cursor: pointer;
}

#alert p{
  flex-grow: 1;
  margin: 0;
  font-size:0.7rem;
}

#alert img{
  height: 20px;
  width: 20px;
  margin: 5px;
}

#succes{
  height: 522px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#succes_img{
  width: 100%;
  max-width: 600px;
  margin: auto;
}

#succes button{
  display: block;
  margin: auto;
  width: 180px;
}

/*MENU*/

.show{
  height: 113px !important;
}

#menuButtons{
      color: white;
    background-color: black;
    padding-top: 1px;
    padding-bottom: 1px;
    height: 0px;
    overflow-y:hidden;
    transition: all .5s;
}

.show{
  height: auto;
}

.menu_buttons{

}

.menu_button{
  color: white;
    display: block;
    margin: 9px 20px;
    text-align: right;
    margin-left: auto;
    transition: all 0.5s;
}

.menu_button:hover{
  margin-right: 30px;
}

.menu_button:after{
  content: '_';
  background-image: url(/img/t.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: transparent;
}






/*/////////////////////////////////////*/



#chanelflex_2{
  flex-wrap: wrap;
  width: 100%;
  position: absolute;
  top: 0;
  transition: all 0.5s;
}
.bt_canal{
  padding-top: calc(540 / 1080 * 100%);
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  transition: all 1s;
}

.bt_canal:hover{
  background-size: auto 110%;
}


#man{
  background-image: url('/img/man.jpg');
}
#woman{
  background-image: url('/img/woman.jpg');
}



.overcanal{
  background-color: #0000007a;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
  justify-content: center;
  align-items: center;
    transition: all 1s;
    color: white;
    overflow: hidden;
}

.bt_canal:hover .overcanal{
  background-color: #00000000;
}

.btplay{
  width: 78px;
  opacity: 0;
  transition: all 1s;
  position: absolute;
  top: 70%;
}

.bt_canal:hover .btplay{
  opacity: 0.6;
  top: 57%;
  transition: all 1s;
  
}

.sub2{
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-59%,-112%);
    width: 353px;
    text-align: center;
}

.ajustebt{
  opacity: 0.6;
    top: 33%;
}

.bt_mw{
  width: 80%;
    display: block;
    margin: auto;
    cursor: pointer;
}