@charset "utf-8";
/* CSS Document */
	


@font-face{
	font-family: Mazda_T_Bd;
	src:url(fonts/MazdaType-Bold.otf) format("opentype");
	-apple-system-font-family: Mazda_T_Bd;
	src:url(fonts/MazdaType-Bold.otf) format("opentype");
	}
@font-face{
	font-family: Mazda_T_Re;
	src:url(fonts/MazdaType-Regular.otf) format("opentype");
-apple-system-font-family: Mazda_T_Re;
	src:url(fonts/MazdaType-Regular.otf) format("opentype");

	}
@font-face{
	font-family: Mazda_Icons;
	src:url(fonts/mazda-icons.ttf) format("truetype");
-apple-system-font-family: Mazda_Icons;
	src:url(fonts/mazda-icons.ttf) format("truetype");

	}
@font-face{
	font-family: Standard-Icons;
	src:url(fonts/standard-icon-font.ttf) format("truetype");
-apple-system-font-family: Standard-Icons;
	src:url(fonts/standard-icon-font.ttf) format("truetype");

	}

#instagram{display:none !important;}	
/*MENU*/
.rec{
	background-color:#101010;
	height:60px;
	position:fixed;
	top:0;
	width:100%;
    z-index:85;
}
.rec img{
	position:fixed;
	top:0;
	left:0px;
	height:42.6px;
	margin:8.52px 23.3px;
}
header input {	
	display: none;
}
#versiones-autos input{cursor: pointer;}
header label{
	border: 1px solid #FFF;
	border-radius: 3px;
	z-index:99;
	}
header ul { 
	border:none;
}
header label:before{
	font-family: Mazda_Icons;
-apple-system-font-family: Mazda_Icons;
	content:"\e918";
}
header label {	
	cursor: pointer;
	display: inline-block;
	font-size: 20px;
	padding: 0 9px;
	transition: all .15s ease;
	position:fixed;
	right:10px;
	top:10px;
	color: #FFF;
}

header input:checked + label:before{	
	content:"\e924";
}

nav {
	max-height: 0;
	overflow: hidden;
	transition: all .15s ease;
}
header input:checked ~ nav {
	max-height:88vh;
	max-width:100vw;
	width:100%;
	position:fixed;
	top:60px;
	right:0px;
	padding:0;
	z-index:90;
	background-color:#fff;
	overflow:scroll;
}
nav a{
	font-family:Mazda_T_Bd;
-apple-system-font-family: Mazda_t_Bd;
	color:#999999;
	text-decoration:none;
	font-size: 12px;
    line-height: 20px;
	display: block;
  	margin: 20px 0;
	text-transform: uppercase;
	transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
    letter-spacing: 0.25em;
    white-space: nowrap; 
	
}
	
nav ul {
	list-style: none;
	margin:0;
    padding: 0 20px 30px;
    max-width: 100vw;
	
}
nav li {
	border-bottom: 1px solid #999999;
	background: transparent;
	text-align:center;
}
nav li:last-child, nav li:nth-last-child(2){
	border-bottom: 0;
}
nav li:last-child{
	margin-top: 45px;
}
/*TERMINA MENU*/


/*INICIA SLIDER*/
#banner-index{
	height: 96.61vw;
	overflow:hidden;
}
#c-slider {
  margin:0 auto;
  width: 100%;
  position: relative;
  overflow: hidden;
}

#slider {
  display:flex;
  width: 500%;
}

#slider section {
  width: 100%;
  overflow:hidden;
  
}
#slider section div{
	animation-name: banner-index;
    animation-duration: 5s;
    animation-iteration-count: infinite;
	animation-direction: alternate;
}
@keyframes banner-index{
	from{transform:scale(1);}
	to{transform:scale(1.03);}
}
	
#slider section div{
  background-repeat:no-repeat;
  background-size:cover;
  width:100%;
  height:96.61vw; 
}
#a{background-image:url(../img/INDEX-BANNER/BANNER_INDEX_RESPONSIVO_01.jpg);}
#b{background-image:url(../img/INDEX-BANNER/BANNER_INDEX_RESPONSIVO_02.jpg);}
#c{background-image:url(../img/INDEX-BANNER/BANNER_INDEX_RESPONSIVO_03.jpg);}
#d{background-image:url(../img/INDEX-BANNER/BANNER_INDEX_RESPONSIVO_04.jpg);}
#e{background-image:url(../img/INDEX-BANNER/BANNER_INDEX_RESPONSIVO_05.jpg);}

#btn-prev, #btn-next {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  line-height: 40px;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  color:#999999;
  z-index:10;
}
#btn-prev:before{
    font-family:Mazda_Icons;
-apple-system-font-family: Mazda_Icons;
	content:"\e912";
}
#btn-next:before{
    font-family:Mazda_Icons;
-apple-system-font-family: Mazda_Icons;
	content:"\e911";
}
#btn-prev {  left: 5px;}
#btn-next {  right: 5px;}

#btn-prev:hover, #btn-next:hover {
  color:#101010;
}
#slider section div a{
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
/*TERMINA SLIDER*/



/*INICIA POP-UP*/

.ventana, .video{
   width: 100vw;
   height: 100%;
   background-color: rgba(16, 16, 16, .7);   
   left: 0;
   top:0;
   bottom:0;
   z-index: 100;
   padding:15px 0;
   display:none;
   }
  .ventana{
	position:fixed;
	overflow:scroll;
	height:100vh;}

   
.ventana .pop-up{
	margin:5px auto;
	max-width: 600px;
	overflow-y: scroll;
	-webkit-overflow-scrolling:auto;
}
.pop-up{
    width: 90%;
	position:relative;
}
.video .pop-up{
	max-width:640px;
	margin:35% auto;
}

.video{position:fixed;}
iframe{
    overflow: scroll;
	-webkit-overflow-scrolling:auto;
	height:90vh;
	border:none;
	width:100%;
	margin:0 auto;
		
}


.cerrar{
	text-align: right;
  font-weight: 900;
  position:absolute;
  z-index: 100;
}
.ventana .cerrar{
  right: 10px;
  top: 8px;
 }
 
.video .cerrar{
  right: 0;
  top: 0;
 }
 
.cerrar a:before{
	font-family: Mazda_Icons;
-apple-system-font-family: Mazda_Icons;
	content:"\e924";
}
.ventana .cerrar a:before{
	color:#101010;
}
.video .cerrar a:before{
		color:#ffffff;
}
.cerrar:hover{
	color:#999999;
}
#video-testimonios{
	width:90%;
	height:auto;
	margin-top:30px;
}



/*TERMINA POP-UP*/

#index{
	color:#FFF;
}

/*INICIA TIRA*/
#tira{ background:#000;}

.barra {
	width:90%;
	height:auto;
	background-color:#000;
	padding:0 5%;
}
.barra h1{
	margin-top:0;
	max-width:446px;
}

.numero{
	font-size:50px;
	margin:0;
	line-height: 1.3;
}
#tira-1, #tira-2{
	height:50px;
	background-image: url(../img/INDEX_TIRA_01.jpg);
}
#tira-1, #tira-2, #index .CTA, .CTA, .fondo, .banner-pags, #valores, #nuestro-trabajo div:first-child, .banner-autos, #ingresar{
	width:100%;
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
}
.banner-autos{	background-position:bottom;
	animation-name: banner-autos;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-direction: alternate;}
@keyframes banner-autos {
    from   {transform:scale(1);}
   to  {transform:scale(1.01);}
    }


#tira-2{
	transform: scaleX(-1);	
}
#tira-1 div{
	background: linear-gradient(to bottom, rgba(255,255,255,0) 20%, rgba(0,0,0,1) 100%);
	width:100%;
	height:100%;	
}
#tira-2 div{
	background: linear-gradient(to top, rgba(255,255,255,0) 20%, rgba(0,0,0,1) 100%);
	width:100%;
	height:100%;
}
.barra p, .barra h1{
	display:inline-block;
}
/*TERMINA TIRA*/

/*EFECTO*/
.cuadro, .caracteristicas{overflow: hidden;}

.cuadro img, .caracteristicas img{
	transform: scale(1) translateZ(0);
    transition: transform 1.5s cubic-bezier(.25,.46,.45,.94);
}
.cuadro img:hover, .caracteristicas img:hover{
	transform: scale(1.04) translateZ(0);
    transition: transform 1.5s cubic-bezier(.25,.46,.45,.94);}



/*INICIA SECCION 3*/
.cuadro{
	max-width: 400px;
    width: 90%;
    margin: 20px auto;
	background-color: #101010;
}
.cuadro img, .cuadro .previsualizacion, #mejor-opcion img, .caracteristicas img, #versiones-autos img{
	width:100%;
}
.cuadro .info{
    padding: 10px 20px 20px;
}
.cuadro div p{
	max-width:314px;
	margin:16px auto;
}
#play{
	width: 64px;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 64px;
	margin-top: -32px;
	margin-left:-32px;
	z-index:5;
	 }
#cuadros_3{
	margin:0 1%;
}

/*TERMINA SECCION 3*/

/*CTAs*/
#index-cta{background-image:url(../img/INDEX_RESPONSIVO_CTA2.jpg);}
#index-cta2{background-image:  url(../img/INDEX_RESPONSIVO_CTA3.jpg); height:99.66vw !important;}
#index-cta2 .tit_CTA{font-size:14px !important;}
#autofinanciamiento-cta{background-image:url(../img/BANNER_AUTOFIN_RESPONSIVO_02.jpg);}
#sorteos-cta{background-image:url(../img/BANNER_SORTEO_RESPONSIVO_02.jpg);}
#FAQ-cta{background-image:url(../img/BANNER_FAQ_02.jpg);}



#FAQ-cta p{color:#101010;}

.CTA{
  height:105.79vw !important; 
}
.CTA p{color:#fff; }
.CTA p:last-child{margin-bottom:10px !important;}
.degradado, .contenedor{
	height:100%;
	max-width:100vw;
	position:relative;
}
#index .contenedor div:first-child{
	position: absolute;
    top: 10px;
    width:100%;
}
.contenedor div:first-child{
	position: absolute;
    top: 15px;
    width:100%;
}
#index .contenedor div:last-child{
	position: absolute;
    bottom: 30px !important;
    width:100%;
}
.contenedor div:last-child{
	position: absolute;
    bottom: 15px;
    width:100%;
}
.contenedor div:first-child p{
	padding:0 10%;
	margin:20px auto;
}

.CTA .contenedor div:first-child p{
	margin:5px auto;
}
#index .degradado{
	    background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(41,184,229,0) 40%, rgba(41,184,229,0) 60%, rgba(10,10,10,.9) 100%);
}


/*TERMINA CTAs*/

/*MEJOR OPCION*/
#mejor-opcion{
	margin: 20px;
	background-color: #101010;
}
#mejor-opcion .fondo{
	background-image:url(../img/INDEX_MEJOROPCION.jpg);
	height:200px;
}
#mejor-opcion .degradado{
	background: linear-gradient(to bottom, rgba(16,16,16,0) 60%, rgba(10,10,10,1) 100%);}

#mejor-opcion .caja{
	padding: 16px 10%;
}

	

/*TERMINA MEJOR OPCION*/

/*INDEX CTA final*/

#index-cta2 .degradado{
	height: 42%;
    background: linear-gradient(to top, rgba(16,16,16,0) 2%, rgba(10,10,10,.7) 100%);
}
#index-cta2 .degradado p{
	margin: 0 auto;
    padding: 5% 5% 0;
}
#index-cta2 .degradado div{
	margin:0 auto;
}
/*TERMINA CTA FINAL*/

/*INICIA FOOTER*/
footer{
	background-color: #101010;
	padding:0 20px;
	text-align:left;
	color:#999999;
	text-transform:uppercase;
	}
footer a{
	color:#999999;
	text-decoration:none;
	}
#distrib:before{
	content: '\f124   ';
	font-family: Standard-Icons;
-apple-system-font-family: Standard_Icons;

}
footer a:hover:before, #descargables a:hover:before{
	color:#c60303;
}
footer a:hover, #facebook:hover:before, #instagram:hover:before{
	color:#fff;
}
footer a:before{
font-size:20px;
position: relative;
    top: 3px;
}
#contact:before{
	content:'\e915   ';
	font-family: Mazda_Icons;
-apple-system-font-family: Mazda_Icons;

}
footer #facebook{
	margin-left:0;
}
footer .izq, #footer-social, #footer-contactanos{
	margin:10px 0;
}
footer hr{
	border:.5px #999 solid;
	margin:10px 0;
	opacity:.3;
}
#footer-legal{	font-size:13px;}
#footer-legal a{display:block;}
#infinito{font-size:11px;}
#infinito div{
	padding:0;
}


/*TERMMINA FOOTER*/
 
/*BANNERS*/
#quienes-somos .banner-pags{background-image:url(../img/BANNER_QUIENESSOMOS_01.jpg);}
#autofinanciamiento-banner{background-image:url(../img/BANNER_AUTOFIN_01.jpg);}
#sorteos-banner{background-image:url(../img/BANNER_SORTEO_01.jpg);}
#acceso-banner{background-image:url(../img/INGRESAR_01.jpg);}
#FAQ-banner{background-image:url(../img/BANNER_FAQ_01.jpg);}
#contacto-banner{background-image:url(../img/BANNER_CONTACTO_01.jpg);}

.banner-pags{
	height:25.76vw;
	min-height:200px;
	color:#fff;
}
.banner-pags .degradado{
	background:  rgba(0,0,0,.7);
}
.CTA .degradado{background:none;}

.banner-pags .contenedor{
	padding:5px 10%;
}
.CTA .contenedor{
	padding:5px 3%;
}
.contenedor div{max-width: 94%;}
/*TERMINA BANNERS*/

.historia{    padding: 60px 10%;}

#valores{background-image:url(../img/BANNER_QUIENESSOMOS_02.jpg);}
.valores-fff{background: rgba(255,255,255,.8); width:85vw; padding:20px; margin:20px auto; box-sizing:border-box;}
#valores .flex{padding:20px 0;}
#carrousel{height:400px; position:relative; margin-top:0; margin-bottom:40px;}
#valores #slider section p, #valores #slider section h4 {
  width:100%;
  }
#valores #slider section{
	margin:0 20px;}
#valores #btn-prev {left: -7px; top: 65%;}
#valores #btn-next {right: -7px; top: 65%;}
#valores #slider{ align-items:center;}
#valores .flex{padding-bottom:0;}
.valores-fff p:last-child{margin-bottom:0;}
#valores section .caja{height:auto!important;}

/*TERMINA VALORES*/
#nuestro-trabajo{ padding:20px;}
#nuestro-trabajo div:first-child{background-image:url(../img/BANNER_QUIENESSOMOS_03.jpg); height: 90vw;}
#nuestro-trabajo div:last-child{margin:40px 20px 20px;}

/*TERMINA ACERCA DE*/

#descripcion{padding: 40px 20px;}
#descripcion div{margin:0 10px 36px; padding-bottom:20px; border-bottom: 1px solid #D5D5D5; box-sizing:border-box;}
#descripcion div img{transform: scale(.7,.7);}
#descripcion div:last-of-type{ border:none; margin-bottom:0; padding:0;}
#descripcion hr:last-of-type{display:none;}

/*TERMINA DESCRIPCION*/

#video video{width:100%; max-width:800px; margin:0 auto;}
#beneficios ul li{text-align:left; margin-bottom:16px; list-style-type: none;}
#beneficios ul li:before {
	content:"\2713";
    font-size: 120%;
    float: left;
    margin-left: -1em;
    margin-right: 1em;
	transform: rotate(15deg);
}

#beneficios ul{margin:0 auto; max-width: 628px;}
#beneficios{padding:40px 7%;}

/*INICIA THANK YOU*/
#thank_you #facebook, #thank_you #instagram{	
	color:#101010;
	font-size:30px;
	}
#facebook, #instagram{
	text-decoration:none;
	margin: 0 10px;
	font-weight:bold;
}
#facebook:before{
	font-family: Mazda_Icons;
-apple-system-font-family: Mazda_Icons;

    content: "\e90e";
	}

#instagram:before{
	font-family: Mazda_Icons;
-apple-system-font-family: Mazda_Icons;
    content: "\e914";
	}

	
body{
	background-color: transparent;
	color: #101010;
	font-size: 16px;
    font-family: Mazda_T_Re,arial,sans-serif;
-apple-system-font-family: Mazda_T_Re;

    line-height: 1.75;
	margin:59px 0 0;
	text-align:center;
	}
main{	
    background-color: #f5f5f5;
}

.text{
	font-size:16px;
	margin:0;
	text-transform:uppercase;
}
#sorteos .text{font-size:14px;}
	
h1, h2, h3, h4, h5, h6 {
    font-family: Mazda_T_Bd,arial,sans-serif;
-apple-system-font-family: Mazda_T_Bd;

	line-height: 1.3;
	text-transform:uppercase;
	}

.tit_1{ font-size:16px;  margin-bottom: 2em; }
.tit_2{ font-size:14.5px; }
.tit_CTA{ font-size:18px !important;  }
.drive_tg{font-size:13px; margin: 0; padding: 16px 0 0; color: #fff;}
.version{margin: 0; padding:0; color: #101010;}
.banner-autos .version{color:#fff;font-size:20px;}
.plantilla .tit_1{margin:0;}
.tit_carro {
    font-size: 30px;
    margin-bottom: 1.2rem;
    line-height: 3.6rem;
	margin:0;
	text-transform:uppercase;
}
.tit_1, .tit_2, .tit_CTA, .drive_tg, .version{
	letter-spacing: 0.15em;
	text-transform:uppercase;
	font-family: Mazda_T_Bd;
-apple-system-font-family: Mazda_T_Bd;

}

hr{
	border: dashed 1px #999999;
	margin: 40px 0;
	}



.logo-ma {
	margin:12.8px 36.2px 12.8px 0;
}
.text-bl, #index, .tit_sec, .tit_CTA, #autos, .tit_carro{
	color:#ffffff;
}


/*.balance-ob{
	color:#999999;
}
.balance-cl{
	color:#E7E7E7;
}*/
.border-gral{
	border: 1px solid #D5D5D5;
}


.active{color:#101010;}

.icon{
	font-size:20px;
	color:#999999;
}
	
.button{
	text-decoration: none;
	height:45px !important;
	font-family:Mazda_T_Bd;
-apple-system-font-family: Mazda_T_Bd;

	font-size:14px;
	background-color:#910A2D;
	border-radius:3px !important;
	text-transform:uppercase;
	padding:0 23px;
	color:#ffffff;
	letter-spacing:2.5px;
	margin:0 auto 16px;
	line-height: 45px;
	display: inline-block;
	text-align:center;
	border: none;
	cursor:pointer;
}

.button:hover{
	background: #c60303!important;
}

.cuadro .button{
	width:149.5px;
}

.button_sec{ font-size:13px;}

/*.button-secondary{
	border: solid 2pt black;
	background-color:#fffffff;
	color:#101010;
}*/

.tertiary-links{
	font-family:Mazda_T_Bd;
-apple-system-font-family: Mazda_T_Bd;

	font-size:13px;
	text-transform:uppercase;
	text-decoration:none;
    border-bottom: solid 1px #101010;
    color: #101010;

}

	
a .icons{
	font-size:18px;
	padding-right:12px;
}
a .icons:hover{
		color:#101010;
}


.tertiary-links:hover{
	border-bottom: solid 2px #c60303;
	color:#101010;
}
a[download]:hover {
	border:none;
}

/*.tooltip{
	height:45px;
	border-radius:3px;
	border: 1px solid #D5D5D5;
}

.tooltip p{
	padding: 0 23px;
	font-size:15px;
	font-family:Mazda_T_Re;
-apple-system-font-family: Mazda_T_Re;

	color: #999999;
}
*/

/*INICIA FORMA*/
.form-field{
	height:45px;
	max-width:100%;
	width:100%;
	font-size:16px;
	font-family:Mazda_T_Re;
-apple-system-font-family: Mazda_T_Re;

	background-color:#ffffff;
	border: 1px solid #D5D5D5;
	color:#999999;
	box-sizing:border-box;
	padding:10px;
	margin: 8px 0;
	border-radius:3px;
}
.form-field:focus{
	border: 2px solid #101010;
	color:#101010;
}
.form-field:invalid{
	border: 2px solid #910A2D;
}

textarea {min-height: 100px!important;}

#forma label{display:block; width:100%;}

.truco{
	clear:both;
	border: rgba(0,0,0,0);
	margin:0;
}
/*TERMINA FORMA*/

/*INICIA CADA CARRO*/
.banner-autos{
	height:96.61vw;
	}
.sombra{
	    background: linear-gradient(to top, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 51%, rgba(10,10,10,.7) 100%);
		width:100%;
		height:96.61vw;
		position:absolute;
}
#auto_01{background-image:url(../img/AUTOS/Mazda_2_Sedan/BANNER_Auto_RESPONSIVO_01.jpg);}
#auto_02{background-image:url(../img/AUTOS/Mazda_2_Hatchback/BANNER_Auto_RESPONSIVO_02.jpg);}
#auto_03{background-image:url(../img/AUTOS/Mazda_3_Sedan/BANNER_Auto_RESPONSIVO_03.jpg);}
#auto_04{background-image:url(../img/AUTOS/Mazda_3_Hatchback/BANNER_Auto_RESPONSIVO_04.jpg);}
#auto_05{background-image:url(../img/AUTOS/Mazda_6/BANNER_Auto_RESPONSIVO_05.jpg);}
#auto_06{background-image:url(../img/AUTOS/Mazda_CX-3/BANNER_Auto_RESPONSIVO_06.jpg);}
#auto_07{background-image:url(../img/AUTOS/Mazda_CX-5/BANNER_Auto_RESPONSIVO_07.jpg);}
#auto_08{background-image:url(../img/AUTOS/Mazda_CX-9/BANNER_Auto_RESPONSIVO_08.jpg);}
#auto_09{background-image:url(../img/AUTOS/Mazda_MX-5/BANNER_Auto_RESPONSIVO_09.jpg);}
#auto_10{background-image:url(../img/AUTOS/AUTO_10/BANNER_Auto_RESPONSIVO_10.jpg);}
#auto_11{background-image:url(../img/AUTOS/Mazda_CX-30/BANNER_Auto_RESPONSIVO_01.jpg);}
#auto_12{background-image:url(../img/AUTOS/Mazda_CX-50/BANNER_Auto_12.jpg);}


.auto-caracteristicas, #versiones-autos{ padding:40px 0 20px;}
.desde{margin:0 auto;}
.caracteristicas{
	max-width: 400px;
    width: 90%;
    margin: 40px auto;
}
.caracteristicas-contenedor div:nth-of-type(3){
		margin-top:0;}

summary:focus{outline: 1px solid #910A2D;}
summary{ cursor:pointer;}

#descargables{
	background-color:#fff;
	padding: 60px 9%;
	margin:0;
}
.download{
    padding: 15px 20px;
    text-align: left;
    color: #101010;
    text-transform: uppercase;
	font-family: Mazda_T_Bd;
-apple-system-font-family: Mazda_T_Bd;

	text-decoration:none;
	 display: block;
    text-align: center;	
}

.download:before {
    content: '\f10d   ';
    font-family: Standard-Icons;
-apple-system-font-family: Standard_Icons;

	font-size:20px;
	padding-right: 5px;
	position:relative;
	top:3px;
	}
 #descargables a:hover:before{
	 top:10px; font-size: 25px;}
.download:hover span{
	border-bottom: solid 2px #c60303;}


/*Carros específicos y FAQ https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tabs_open */
.instrucciones{margin:16px 8%;}
#versiones-autos h2{margin:0 10% !important;}
	
.i{text-transform:none; font-family:Mazda_T_Re; font-weight:bold; -apple-system-font-family: Mazda_T_Re;

}

#preguntas summary h3{display:inline-block;}
#preguntas #Autofinanciamiento, #preguntas #Proceso, #preguntas #Sorteos{text-align:left;}

.tab {
    overflow: hidden;
	display:inline-block;
	max-width:100%;
	
}
.boxing{margin:0 auto; padding: 0 2%;}


.tab div, .tab div h3 {
    background-color: inherit;
    float: left;
	padding: 0;
    border:none;
   	text-transform:uppercase;
	outline: none;
    cursor: pointer;
    transition: 0.3s;
	font-family:Mazda_T_Bd;
-apple-system-font-family: Mazda_T_Bd;

	display:block;
	padding-bottom:7px;
	border-bottom: solid 2px #999999;
    color:#999999;
	}
	
	.tab div h3{
	width:100%;
	font-size: 9.5px;
	}
	
.tab div figure{
font-size: 16px;
    text-transform: capitalize;
    font-family: Mazda_T_Re;
-apple-system-font-family: Mazda_T_Re;



	margin:0;
	padding-left: 1vw;
    padding-right: 1vw;
    box-sizing: border-box;
	
}
.tab div.active figure, .tab div:hover figure{color:#101010;}
.tab div{
    border: none;
    display: inline-block;
    width: 152px;
    box-sizing: border-box;
    padding: 0 2%;
	margin-bottom: 30px;
}

.tab div figcaption{
	    font-size: 12.5px;
}


.tab div.active h3, .tab div:hover h3   {
    padding-bottom:7px;
	border-bottom: solid 2px #c60303;
    color:#101010;

}

.tab div img{max-width:414px; opacity:0.2;}
.tab div.active img, .tab div:hover img{opacity:1;}

.tabcontent {animation: fadeEffect 2s; }

@keyframes fadeEffect {from {opacity: 0;} to {opacity: 1;}}


/*cotizacion*/
#content-tab{display:none;}
.tabcontent {
    display: none;
    margin: 10px 5% 40px;
	background-color:#fff;
	box-sizing:border-box;
	padding:30px 20px 14px;
}
.tabcontent h3{ margin-bottom:25px !important;}
.cot { margin-bottom:40px;}
.cot2 {margin-bottom:20px;}
.cot h4, .cot2 h4{border-top:#101010 solid 1px; border-bottom:#101010 solid 1px; padding: 13px 0; margin-top:0;}
.cot div, .cot2 div{border-bottom:1px solid #D5D5D5;}
.nota{margin-bottom:40px;}
.cot p, .cot2 p {   line-height: 21px;}
.cot1, cot2{margin:0 auto;}

/*SORTEOS*/
#galeria{padding: 40px 20px; background-color:#fff;}
#calendario{padding: 40px 20px;}
#calendario p{max-width:900px; margin:0 auto;}
#image{
    max-width: 800px;
    height: 61.7vw;
	margin: 40px auto 15px;
	background-image:url(../img/SORTEO-GALERIA/GALERIA_SORTEO_01.jpg);
	background-repeat: no-repeat;
	background-position:center;
    background-size:100%;
	color:#FFF;
    text-align: center;
    text-shadow: -.5px -.5px .5px #101010, .5px .5px .5px #101010, -.5px .5px .5px #101010, .5px -.5px .5px #101010;
}
.preview{
	width:21%;
	margin:.4vw 1%;
    border: 1px solid #D5D5D5;
	border-radius:3px;
	cursor:pointer;
}
.load{
	display:none;
}
.div-gale{margin:0 5%;}


table{font-size:10pt; margin:0 auto;}
#tabla{max-width:100%; overflow:scroll;margin:30px auto; }
table, th, td {
    border-collapse: collapse;
	box-sizing:border-box;
}
tr{color:#999999;}
th {
    background-color: black;
    color: white;
	text-transform:uppercase;
	font-weight:100;
	text-align:center;
	font-size:9pt;
		}
td, th{padding:5px 10px;}
tr{border-bottom: solid 1px #d5d5d5; border-top: solid 1px #d5d5d5;}

td:nth-child(4), td:nth-child(3){
	text-align:left;
}
td{vertical-align:top;}
th:nth-child(5){word-wrap: break-word;}

table th:first-child, table td:first-child{max-width:56px;}
th:nth-child(2), td:nth-child(2){max-width:72px;}
th:nth-child(3), td:nth-child(3){max-width:96px; word-wrap:break-word;}

th:nth-child(4), td:nth-child(4){max-width:200px;}
th:nth-child(5), td:nth-child(5){max-width:99px;}

#calendario input{display:none;}
#calendario label{	
cursor:pointer; line-height: 4rem;
    color: #191919;
	position: relative;
    left: -115px;
}
#calendario label:before {
    font-family: Helvetica;
-apple-system-font-family: Helvetica;

    content: "+";
	border: solid 1px #191919;
    border-radius: 50px;
	    padding: 0 4px;
}
#calendario label::after {
    content: " más.";
}
#calendario input:checked ~ .div1,#calendario input:checked ~ .div2, #calendario input:checked ~ .div3, #calendario input:checked ~ .div4, #calendario input:checked ~ .div5, #calendario input:checked ~ .div6, #calendario input:checked ~ .div7, #calendario input:checked ~ .div8, #calendario input:checked ~ .div9, #calendario input:checked ~ .div10, #calendario input:checked ~ .div100 {
    max-height: 2000vh;
    position: relative;
	width:160vw;
}
#calendario input:checked + label:before{
	content: "-";}
#calendario input:checked + label:after{
	content: " menos.";
	}
	
.div1, .div2, .div3, .div4, .div5, .div6, .div7, .div8, .div9, .div10, .div100{
	max-height: 0;
    overflow: hidden;
    transition: all .15s ease;
}
#label100{display:none;}

.X{color: #FFF;
    font-size: 18px;
	cursor:pointer;
	position: absolute;
    top: 0;
}
.modal-reposo{
	height:auto;
	overflow:hidden;
	cursor:pointer;
	color:#101010;
	
}

.modal-activo{
	position: fixed;
	left: 0;
	z-index: 2000;
	width: 100vw;
	overflow: hidden;
	background:rgba(16, 16, 16, .8);
	height:100vh;
	top:0;
}



.info-modal-reposo{
	display:none;
}


.info-modal-activo img{
	       width: auto;
    height: 96vh;
    max-width: 96vw;
    max-height: 90vh;}
	
.modal-activo td{display:none; padding-top: 30px;}

.info-modal-activo{
	margin:0;
    padding: 2vw;
	height: auto;
	position:fixed;
	display:block !important;
	width: 100vw;
    min-width: 100vw;
	background: rgba(10,10,10,.75);

}



/*AUTOS GENERAL*/
.texto-auto{
	background-color:rgba(16,16,16,1);
	outline: 1px solid #FFF;
    outline-offset: -7px;
	padding:20px 10px;
	    position: relative;
    top: -5px;
}
.texto-auto h2, .texto-auto p{margin:0;}


.fondo-auto{
	width:90vw;
	height:auto;
	background-color:#101010;
	margin:10px auto;
	position:relative;
}
.fondo-auto img{
	width:100%;
	height:auto;
}
.fondo-auto a{
	height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 4;
}
#autos-gral{margin: 20px 1% 10px;}

.blck01, .blck02{
	background-color:#101010;
	outline:none;
	width:90vw;
	margin:10px auto;
	height:90vw;
    padding: 82px 20px;
    box-sizing: border-box;}

 .blck02{ padding: 105px 20px;}


#landing{
	background-image:url(../img/BANNER_FORMULARIO.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	text-align:left;
	max-width: 600px;
    margin: 0 auto;
	
}

#thank_you{
	background-image:url(../img/BANNER_AGRADECIMIENTO.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	max-width: 640px;
	margin: 0 auto;
}
#thank_you section{
	min-height:580px;
	}

#landing section, #thank_you section{
	background:rgba(255, 255, 255, .5);
	margin:5%;
	padding:5%;
}
#landing h1{
	text-align:center;
}
#landing h2:after, #landing h1:after {
    content: '';
    background-color: #101010;
    display: block;
    height: 1px;
    margin: 0.325em 0 0.5em 0;
    width: 100%;
}
#landing .button{
	float:right;
}

/*INGRESAR*/
#ingresar{background-image:url(../img/INGRESAR_CLIENTES.jpg);  box-sizing:border-box;}
#instruccion-usuario, #instruccion-clave{
	text-align:left;
	margin:35px;
}
#instrucciones h3{
	text-align:left;
	margin:10px 35px 0;;
}
#instruccion-usuario img, #instruccion-clave img{
	width:100%;
	max-width:340px;
}
.ejemplo{
	border:solid 1px #101010;
	padding:5px 70px 5px 10px;
	background:#fff;}
#instruccion-usuario{
	border-bottom:solid 1px #999999;
	padding-bottom:40px;
	margin-top:10px;}
	#instruccion-clave{
	padding-top:1px;}
#instrucciones{margin:50px 1%;}
.blanco{
	background:rgba(255,255,255,.5);
	height:100%;
	padding:50px 35px;
	box-sizing:border-box;
}

.textFAQ{ padding:16px 0; font-family:Mazda_T_Bd;     line-height: 18px; -apple-system-font-family: Mazda_T_Bd;
 }
#preguntas details{border-bottom: 1px solid #D5D5D5;}
#Autofinanciamiento h2, #Proceso h2, #Sorteos h2{border-bottom: 1px solid #999999;
    padding-bottom: 16px;
    margin-bottom: 2px;}
#preguntas .tabcontent{background-color:transparent;}
#preguntas{padding: 50px 7%;}
#preguntas .tab div{margin: 5px auto;
    width: 65%;
    position: relative;
    left: 20%;}
#preguntas .tab div h2{
	margin-bottom:35px;
}
#preguntas summary:focus {
    outline:none;
}
#preguntas details p{margin-top:0;}

#ayudarte, #corpo, #agencia{padding:60px 8%;}
#corpo .tertiary-links:before{font-family: Standard-Icons; content: '\f130'; cursor: default;text-decoration: none; color:#101010; -apple-system-font-family: Standard_Icons;
}
#corpo .tertiary-links{border:none;}
#corpo .tertiary-links:hover{border:none;}
#ayudarte p:first-of-type{margin-bottom:32px;}
#contacto .button{margin-top:40px;}
#corpo{background:#FFF;}
#corpo div div{padding:16px 0;}
#corpo div div:first-of-type{border-bottom:1px solid #D5D5D5; margin-bottom:16px;}
#contacto select{margin-bottom:30px; max-width: 500px;}

#proximamente{
	margin: 0;
    position: absolute;
    top: 20px;
    left: 70px;
    z-index: 6;
}
#terminos h2, #privacidad h2{font-family:Mazda_T_Bd; -apple-system-font-family: Mazda_T_Bd;
margin-top: 36px;}
#mapa h2{font-family:Mazda_t_Bd; -apple-system-font-family: Mazda_T_Bd;
margin-bottom:0;}
#mapa h3, #mapa h4{margin:0;font-family: Mazda_T_Re; -apple-system-font-family: Mazda_T_Re;
}
#mapa h3{  font-size: 15px;}
#mapa h4{  font-size: 14px;}
#terminos, #privacidad, #mapa{text-align:left;}
#terminos h1, #privacidad h1, #mapa h1{text-align:center;}
#terminos section, #privacidad section, #mapa section{margin:60px 10% 80px; padding:60px 0 0;}
#mapa main a{color:#101010; text-decoration:none;}

#asesores{    margin: 0 auto;    width: 95%; max-width: 600px;}
#asesores option{max-width:100%; white-space:normal; word-break: break-word; text-align: left;}
#asesores option:first-child{text-transform:uppercase; font-family:Mazda_T_Bd; -apple-system-font-family: Mazda_T_Bd;
 margin-bottom:20px;}
#asesores option:nth-child(8n+0) {margin-bottom:20px;}
/*TERMINIA CSS MOVIL*/

.oculto{
	display:none !important;
}
/*Ajustes de pantalla*/
@media screen and (min-width:360px){
#index-cta2 .degradado p{
	 padding: 5% 5% 5%;
}
}

@media screen and (min-width:480px){
#slider section div, #banner-index{
    height:38.64vw; 
}
#a{background-image:url(../img/INDEX-BANNER/BANNER_INDEX_01.jpg);}
#b{background-image:url(../img/INDEX-BANNER/BANNER_INDEX_02.jpg);}
#c{background-image:url(../img/INDEX-BANNER/BANNER_INDEX_03.jpg);}
#d{background-image:url(../img/INDEX-BANNER/BANNER_INDEX_04.jpg);}
#e{background-image:url(../img/INDEX-BANNER/BANNER_INDEX_05.jpg);}

#btn-prev, #btn-next {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  line-height: 40px;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  color:#999999;
}
#btn-prev:before{
    font-family:Mazda_Icons;
-apple-system-font-family: Mazda_Icons;

	content:"\e912";
}
#btn-next:before{
    font-family:Mazda_Icons;
-apple-system-font-family: Mazda_Icons;

	content:"\e911";
}
#btn-prev {  left: 5px;}
#btn-next {  right: 5px;}

#btn-prev:hover, #btn-next:hover {
  color:#101010;
}
/*TERMINA SLIDER*/
#tira-1, #tira-2, .barra{
	display:inline-block;
}
#tira-1, #tira-2 {
    width: 21%;
    height: 100%;
}
#tira-1, #tira-2{background-position:right;}
.barra{width:58%; padding:0;}
#tira{display:flex; align-items: center; height: 150px;}
#tira-1 div, #tira-2 div{background:none;}

#index-cta {
    height: 390px !important;
}

#index .contenedor div:first-child {
    top: 35px;
}
#index-cta2 .degradado p {
    font-size: 18px !important;
    max-width: 500px;
}
#index .contenedor div:last-child{
    bottom: 25px !important;
}
.banner-pags{
	background-position:center;
}
#autofinanciamiento-banner{background-position:left;}
#autofinanciamiento-cta{background-position:right;}
.banner-pags .degradado{
	background:  linear-gradient(to right, rgba(255,255,255,0) 20%, rgba(10,10,10,.9) 100%);
    right: 0;
    position: relative;
    display: flex;
    align-items: center;
}
.CTA .degradado{
	background:  linear-gradient(to left, rgba(255,255,255,0) 20%, rgba(10,10,10,.9) 100%);}
	
#FAQ-cta .degradado{
	background:  linear-gradient(to left, rgba(255,255,255,0) 20%, rgba(255,255,255,.5) 100%);}
.banner-pags .cta-fantasma{
	height:100%;
	width:50%;
	display:inline-block;
}
.banner-pags .contenedor{width: 50%; height:auto; display:inline-block;}
.valores-fff {padding:20px 6%;}
#carrousel {height: 320px;}
#valores #btn-prev, #valores #btn-next {top:70%;}
#autofinanciamiento-cta{background-image:url(../img/BANNER_AUTOFIN_02.jpg);}
#sorteos-cta{background-image:url(../img/BANNER_SORTEO_02.jpg);}
	.CTA {
    height: 26.5vw !important;
}
.CTA .contenedor div {
    position: static;
}
#autofinanciamiento-cta .degradado .contenedor div #texto-cta:after {
		content:"Estas a sólo unos pasos...";
	}
#FAQ-cta .degradado .contenedor div #texto-cta:after {
	content:"No dudes en contactarnos.";}
#FAQ-cta {
    background-position:right;
}

.banner-autos, .sombra {
    height: 75vw;
}

#auto_01{background-image:url(../img/AUTOS/Mazda_2_Sedan/BANNER_Auto_01.jpg);}
#auto_02{background-image:url(../img/AUTOS/Mazda_2_Hatchback/BANNER_Auto_02.jpg);}
#auto_03{background-image:url(../img/AUTOS/Mazda_3_Sedan/BANNER_Auto_03.jpg);}
#auto_04{background-image:url(../img/AUTOS/Mazda_3_Hatchback/BANNER_Auto_04.jpg);}
#auto_05{background-image:url(../img/AUTOS/Mazda_6/BANNER_Auto_05.jpg);}
#auto_06{background-image:url(../img/AUTOS/Mazda_CX-3/BANNER_Auto_06.jpg);}
#auto_07{background-image:url(../img/AUTOS/Mazda_CX-5/BANNER_Auto_07.jpg);}
#auto_08{background-image:url(../img/AUTOS/Mazda_CX-9/BANNER_Auto_08.jpg);}
#auto_09{background-image:url(../img/AUTOS/Mazda_MX-5/BANNER_Auto_09.jpg);}
#auto_10{background-image:url(../img/AUTOS/AUTO_10/BANNER_Auto_10.jpg);}

.drive_tg{font-size:10px;}
.version{font-size:18px;}
.tit_carro {
    font-size: 30px;
    line-height: 2rem;
	}
#versiones-autos a:before{content:"Agenda tu ";}
.tabcontent {
    margin: 10px 5% 40px;}
	.preview{
	width:16%;
		}
table, th, td {word-wrap:break-word;}
th:nth-child(2), td:nth-child(2){max-width:58px;}
th:nth-child(3), td:nth-child(3){max-width:96px; word-wrap:break-word;}

th:nth-child(4), td:nth-child(4){max-width:165px;}
th:nth-child(5), td:nth-child(5){max-width:60px;}
#tabla{overflow:hidden;margin:40px auto;}

#calendario input:checked ~ .div1, #calendario input:checked ~ .div2, #calendario input:checked ~ .div3, #calendario input:checked ~ .div4, #calendario input:checked ~ .div5, #calendario input:checked ~ .div6, #calendario input:checked ~ .div7, #calendario input:checked ~ .div8, #calendario input:checked ~ .div9, #calendario input:checked ~ .div10, #calendario input:checked ~ .div100 {
   width: 100%;
   margin:0 auto;
}
#calendario label{position:static;}
.fondo-auto, .blck01, .blck02{
	width:45%;
	margin:10px 5px;
	display:inline-block;
}
.texto-auto h2, .texto-auto p{font-size:11px;}
.blck01, .blck02 {height:293.67px; top: 0;}
.blck01{float: left; margin-left: 15px; padding: 90px 20px;}
.blck02{float: right; margin-right: 15px; padding: 120px 20px;}
#autos-gral{max-width:470.40px; margin:0 auto;}
.blanco{
	padding:50px 17%;
}
#instrucciones{margin:60px 5%;}
#preguntas .tab div {
        left: 16%;
}
#proximamente{
	top: 40px;
    left: 120px;
}
.video .pop-up {
    margin: 5% auto;
}
}
	
@media screen and (min-width: 600px) {
	.flex_form{ display:flex;}
	.margin-field{ margin-left:10px;}
	
	#index-cta{background-image:url(../img/INDEX_CTA2.jpg);}
	#index-cta .degradado{
	    background: linear-gradient(to left, rgba(255,255,255,0) 20%, rgba(10,10,10,.9) 100%);
}


  .contenedor{width: 55%; height:auto;}
	#index-cta, .CTA {    height: 200px !important;}
.buttom{margin-bottom:16px;}
.degradado{display: flex;
    align-items: center;
	background: linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 25%, rgba(10,10,10,.9) 65%);}
	
	#autofinanciamiento-cta .degradado .contenedor div #texto-cta:after {
		content:"Estas a unos pasos de ser parte de Mazda Autofinanciamiento.";
	}
	#texto-cta{margin:0 auto 10px;}
		
#index .contenedor div:first-child p {
   max-width:512px;
}
.contenedor div:first-child p {
   max-width:480px;
}
.banner-pags .contenedor .tit_2{ margin-top:0;}

#mejor-opcion .fondo {
    height: 250px;
}
.cta-fantasma{
	height:100%;
	width:50%;
}
.contenedor div{
	position:static !important;
}
#index-cta2 {
    background-image: url(../img/INDEX_CTA3.jpg);
    height: 70vw !important;
}
#index-cta2 .degradado p {
    padding: 2% 5% 2%;
}
#index-cta2 .degradado {
    height: 46%;
}
.banner-pags .degradado {
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 20%, rgba(10,10,10,.9) 60%);
}

.CTA .degradado {
    background: linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 20%, rgba(10,10,10,.9) 60%);
}

.banner-pags .contenedor p{
   max-width:264px;
   margin: 0 auto;
}
#valores #slider section p {
  width:56%; float:right; display:inline-block; margin-top:0; text-align:left; padding-left:16px; border-left: 1px solid #999999;
}
#valores #slider section h4{
	width:35%; display:inline-block;padding-right:16px;
}
#valores #slider section .caja{height:auto;}
#carrousel {height: 280px;}
#valores #btn-prev, #valores #btn-next {top: 60%;}
#valores #btn-next { right: 10px;}	
#valores #btn-prev { left: 10px;}
#autofinanciamiento .banner-pags  .tit_1{margin-top:0;}
#descripcion {    padding: 40px 2%;}
#descripcion  div:first-child, #descripcion div:nth-child(2){
    display: inline-block;
    width: 40%;
	border:none;
	margin:0 25px 15px;
	padding:0;
}
#descripcion  div:nth-child(2){
	float:right;}
	
#descripcion div:last-of-type{
padding:26px 10% 20px;	
border-top:1px solid #D5D5D5;
}
#footer-legal .izq a{
	display:inline;
	padding: 0 15px;
    border-left: solid 1px rgba(153, 153, 153, .6);
}
#footer-legal .izq a:first-child{
	padding-left:0;
	border-left:none;
}
#footer-legal der p{
	white-space: nowrap;
}
#footer-legal .izq, #footer-legal der, #infinito .der, #infinito .izq{
	display:inline-block;
}
#index-cta .tit_CTA{font-size:16px!important;}
.drive_tg{font-size:13px;}
.version{font-size:20px;}
.tit_carro {
    font-size: 38px;
    line-height: 3rem;
	}
.download{
	width: 158px;
    line-height: 2.3rem;
	display: inline;
    padding: 15px 2.8%;
}
#descargables a{
    border-right: 1px solid #D5D5D5;
}
#descargables a:last-of-type{
	border:none;
}
#descargables div{
	margin-top: 50px;}
.tabcontent {
    margin: 10px 8% 40px;}
.preview {
    width: 13.6%;
}
#galeria, #calendario {
    padding: 60px 7%;}
	#image {
        height: 57vw;}
table th:nth-child(2), td:nth-child(2){max-width:80px;}
table th:nth-child(3), td:nth-child(3){max-width:90px; word-wrap:break-word;}

table th:nth-child(4), td:nth-child(4){max-width:195px;}
table th:nth-child(5), td:nth-child(5){max-width:99px;}
#autos-gral {    max-width: 600px;}
.blck01, .blck02 {padding: 90px 40px; height: 361px;}
.texto-auto h2, .texto-auto p {    font-size: 14px;}
.blck01 { margin-left: 23px; margin-right:0; padding: 105px 40px;}
.blck02 { margin-right: 23px;  margin-left: 0;     padding: 145px 40px;}
#FAQ-cta .cta-fantasma{display:none;}
#FAQ-cta .contenedor{margin:0 auto;}
#FAQ-cta{background-position:center;}
#FAQ-cta .degradado{background:linear-gradient(to right, rgba(179,220,237,0) 0%, rgba(255,255,255,.6) 50%, rgba(188,224,238,0) 100%);}
#preguntas .tabcontent {
    margin: 0 5% 40px;
}
#preguntas .tab div {
    width: 165px;
    padding: 0;
    margin-bottom: 0;
	position:static;
}
#corpo div div{display:inline-block; float:left; padding: 0 35px; width:36%;}
#corpo div div:first-child{ border-bottom:none;  }
#corpo div div:nth-child(2){border-left:1px solid #D5D5D5;}
#corpo{ padding: 60px 2%;}
#contacto-corpo{display:block; margin:50px auto 0; width:96%; max-width:780px; }
.X {
    font-size: 20px;
    }
.video .pop-up {
    margin: 1% auto;
}
}
@media screen and (min-width:768px){
    .barra .tit_2{
        font-size:1em;
        
        
    }
    .barra p, .barra h1:second-child{
        margin:0 15px;
    }
	nav ul {
    padding: 0 100px 30px;
}	
	nav a{
	font-size: 14px;
    margin: 24px 0;
	letter-spacing: 0.15em;
	}
	
	.barra h1 {
    margin:16px; width:446px;
}
   .barra{ width: 100%;}
   .barra div{display: flex;margin: 10px auto;width: 560px; align-items: center;}
   .numero{ font-size:55px;}
   
   .cuadro{
	width: 31.3%;
	display:inline-block;
	float: left;
    margin: 20px 1%;
	height: 400px;
	overflow: hidden;
	position:relative;
    }
	.previsualizacion{
	height: 100%;
    width: auto !important;
    position: relative;
	}
	.video-test{
	height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 4;
	}
	.video .pop-up{
	width: 640px;
  	height: 324px;
   	position: absolute;
  	top: 50%;
  	left: 50%;
 	margin-top: -177px;   /* ajustar 1/2 alto de video */
  	margin-left: -320px;  /* ajustar 1/2 ancho de video */
	}
	.cuadro div:first-child{
		height:70%;
	}
	
	.cuadro div p {
    max-width: 300px;
	}

#tira {
     height: 100px;
}
#mejor-opcion{
	margin: 20px 2%;
}
#mejor-opcion{
	height:431px;
}
#mejor-opcion .caja, #mejor-opcion .fondo{
	width:49.5%;
	display:inline-block;
}

#mejor-opcion .degradado{
	background: linear-gradient(to right, rgba(16,16,16,0) 60%, rgba(10,10,10,1) 100%);}

.flex{
	display:flex;
	align-items:center;
}
#mejor-opcion .caja div{
	padding:16px 10%;
	max-width:100%;
}
 #mejor-opcion .fondo{
	 height:100%;
 }
 #mejor-opcion .caja{
	padding: 0;
}
#index-cta2 .tit_CTA {
    font-size: 18px;
}
#footer-contact div{
	display:inline-block;}
#footer-contactanos{border-left:solid 1px rgba(153, 153, 153, .6);padding-left:30px;}
#footer-social{padding-right:20px;}
#footer-contact .der{float:right;}
.banner-pags .contenedor p{max-width: 328px; font-size:17.5px;}
#autofinanciamiento .banner-pags .contenedor p {max-width: 408px;}
.tit_1 {margin-bottom: 1.5em;}
.banner-pags .cta-fantasma {width: 60%;}
.banner-pags .contenedor{width:70%;}
#carrousel { height: 300px; padding: 40px 60px; margin:20px 8% 40px;}
#valores #btn-next, #valores #btn-prev {top: 64%;}
#valores .flex{min-width:652.8px; margin:0 8%;}
#valores .flex div:first-child{margin-right: 20px; width: 170%;}
.valores-fff { padding: 40px 8%;}
#nuestro-trabajo div:first-child{width: 200%;  height: 600px;}
#nuestro-trabajo div:last-child {
    margin:20px; margin-left:40px;
}
#index-cta .tit_CTA, #index-cta2 .tit_CTA {
     font-size: 18px!important; 
}
#mejor-opcion .caja  p{
	text-align:left;}
	#index-cta2 {
    background-image: url(../img/INDEX_CTA3.jpg);
    height: 47.43vw !important;
}
.drive_tg{font-size:13px; padding-top: 20px;}
.version{font-size:20px;}
.tit_carro {
    font-size: 40px;
    line-height: 3.6rem;
	}
.auto-caracteristicas .hatchback span:before{
	content:"Hatchback ";
}
.auto-caracteristicas .sedan span:before{
	content:"Sedán ";
}
.auto-caracteristicas .version{display:none;}
.plantilla .tit_1{    font-size: 18px;}
.caracteristicas{display: inline-block;
    margin: 40px 0 0;
    padding: 0 16px;
    box-sizing: border-box;
    width: 50%;
	float:left;
	max-width:432px;}
.auto-caracteristicas,versiones-autos {
    padding: 60px 5%;
}
.caracteristicas-contenedor{max-width:862px; margin:0 auto;}
.download{    padding: 15px 5%;}
#descargables {
    padding: 65px 9%;
}





/*TABS CARROS*/
#hr-no, .hr-no{display:none;}

.tab div {
	width:172px;
	padding:0;
}
#versiones-5 .tab div{
	width:145px;
	}

.tab div h3 {
    font-size: 11px !important;
}
 #versiones-5 .tab div h3 {
    font-size: 10px !important;
}
.cot, .cot2{
	display:inline-block; 
	width: 50%;
    padding: 0;
	box-sizing: border-box;
	margin-bottom:0;
}
.cot2{    float: right;
}
.cot div, .cot2 div {
    border-bottom: 1px solid #101010;
}

.cot2{border-left: solid 1px #D5D5D5;}

.cot p, .cot2 p{
	text-align:left;
	padding-left:35px;}
#sorteos-banner .contenedor p:after{
	content:", donde tendrás la posibilidad de convertirte en dueño de un Mazda.";}
#sorteos-cta .degradado .contenedor div #texto-cta:after{
	content:"Así como ellos tu también puedes ganar.";}.contenedor div:first-child p { padding: 0 ;}
.div-gale{margin:0 auto;     max-width: 90%;}
#tabla {    margin: 50px auto;}
table th:nth-child(2), td:nth-child(2){max-width:77px;}
table th:nth-child(3), td:nth-child(3){max-width:137px;}

table th:nth-child(4), td:nth-child(4){max-width:250px;}
#autos-gral { max-width:none; width:100vw; }
.fondo-auto, .blck01, .blck02 {
    width: 33.33vw;
    margin: 0;
	height:33.33vw;
	float:left;
}
.fondo-auto img{display:none;}
.fondo-auto{background-repeat:no-repeat; background-position:center; background-size:cover;}

/*
.a01{background-image:url(../img/AUTOS/Auto_01.jpg);}
.a02{background-image:url(../img/AUTOS/Auto_02.jpg);}
.a03{background-image:url(../img/AUTOS/Auto_03.jpg);}
.a04{background-image:url(../img/AUTOS/Auto_04.jpg);}
.a05{background-image:url(../img/AUTOS/Auto_05.jpg);}
.a06{background-image:url(../img/AUTOS/Auto_06.jpg);}
.a07{background-image:url(../img/AUTOS/Auto_07.jpg);}
.a08{background-image:url(../img/AUTOS/Auto_08.jpg);}
.a09{background-image:url(../img/AUTOS/Auto_09.jpg);}
.a10{background-image:url(../img/AUTOS/Auto_10.jpg);}
.a11{background-image:url(../img/AUTOS/Auto_11.jpg);}
*/
.a01{background-image:url(../img/AUTOS/Mazda_2_Sedan.jpg);}
.a02{background-image:url(../img/AUTOS/Mazda_2_HatchBack.jpg);}
.a03{background-image:url(../img/AUTOS/Mazda_3_Sedan.jpg);}
.a04{background-image:url(../img/AUTOS/Mazda_3_Hatchback.jpg);}
.a05{background-image:url(../img/AUTOS/Mazda_6.jpg);}
.a06{background-image:url(../img/AUTOS/Mazda_CX-3.jpg);}
.a07{background-image:url(../img/AUTOS/Mazda_CX-5.jpg);}
.a08{background-image:url(../img/AUTOS/Mazda_CX-9.jpg);}
.a09{background-image:url(../img/AUTOS/Mazda_MX-5.jpg);}
.a10{background-image:url(../img/AUTOS/Auto_10.jpg);}
.a11{background-image:url(../img/AUTOS/Mazda_CX-30.jpg);}
.a12{background-image:url(../img/AUTOS/Mazda_CX-50.jpg);}

.texto-auto{background: linear-gradient(to top, rgba(16,16,16,0) 2%, rgba(10,10,10,.7) 100%); box-sizing:border-box; top:0;outline: none;}
.blck01, .blck02 {background-color:#000; opacity:1;}
.blck01{padding: 55px 40px;}
.blck02{padding: 92px 40px;}
.fondo-auto p, .fondo-auto h2{position:relative; top:40%;}
#ingresar{
max-width: 500px;
    margin: 30px auto;
}
#instruccion-usuario, #instruccion-clave{
	display: flex;
    align-items: center;
}
#instruccion-usuario img, #instruccion-clave img {
    width: 260px;}
#instruccion-usuario div:first-child, #instruccion-clave div:first-child {
    width: 80%;
	margin-right:8%;
}
.blanco{padding:65px 20% 75px;}
#FAQ-cta .degradado .contenedor div #texto-cta:after {
	content:"No dudes en contactarnos, estamos para servirte.";}
#FAQ-cta #texto-cta{max-width:250px;}
#preguntas .tab div {
    width: 195px;}
#preguntas .boxing {
    margin-top: 50px;
}
#preguntas {
    padding: 80px 7% 50px;
}
.textFAQ {
    padding: 24px 0;}
#corpo div div{ width:40%;}
#contacto-corpo {
    margin: 50px auto 10px;
}
#proximamente{
	top: 50px;
    left: 50px;
}
.X {
    font-size: 30px;
    }
.modal-activo td {
    padding-top: 50px;
}
.video {
    padding: 0;
}
.tabcontent {
  	padding:50px 20px 44px;
}
#versiones-autos {
    padding: 60px 0 20px;
}
.instrucciones {
    margin: 25px 8%;
}
.caracteristicas-contenedor div:nth-of-type(3){
		margin-top:40px;}
}
@media screen and (min-width:992px){
	body{margin:90px 0 0;}
	.active{color:#fff;}
	.rec{
	height:90px;
	}
	.rec img{
	height:64px;
	margin:13px 17px;
}
	nav a{line-height: 28px; position:relative;}
	.active{
	border-bottom: solid 2px #c60303;
}
nav li a:hover:after{ width:100%;}
nav li a:after{
	width: 0;
    height: 2px;
    background: #c60303;
    position: absolute;
    left: 0;
    content: '';
    bottom: -2px;
    transition: .3s ease-in-out;
}
 
 header input, header label {
		display:none;
	}
	nav, header input:checked ~ nav{
		position:fixed;
		top:0;
		right:10px;
		overflow:visible;
		transition:none;
		width: calc(100% - 215px);
		max-height:90px;
		height:90px;
		background: transparent;
   		z-index:90;
		text-align:right;
		}
	nav ul{
		width: 100%;
		height:70px;
		border: none;
		padding:10px 0;
			}
		nav li{
		display:inline-block;
		border:none;
		width:auto;
		height:70px;
	}
	nav li a{
		padding:0;
		font-size:.65rem;
		white-space:normal;
		color:#FFF;
		margin: 25px 12px;
	}
	nav li:last-child{
	display:none;
}	

	.historia p{
	max-width:70%;
	margin:0 auto;
}
#valores .flex div:first-child {    width: 171%;}
#carrousel {    height: 280px;}
.banner-pags .contenedor {  width: 50%;}
#autofinanciamiento .banner-pags .contenedor p {
    max-width: 370px;
}
.blck01 {    padding: 100px 40px;}
.blck02 {    padding: 130px 40px;}



	}
	
@media (min-width: 1024px){
.barra h1 {
    width: 582px;
    max-width: 586px;
}
.barra div{ width: 100%;}

	nav li a {
    font-size: 13px;
    margin: 25px 9.2px;
	font-family:Mazda_T_Re;
-apple-system-font-family: Mazda_T_Re;

}

	.tit_carro {
    font-size: 40px;
    line-height: 4rem;
}
	
	#tira-1, #tira-2 {width: 16%;}

	.cuadro{
		height:430px;}
	
	#play {
    width: 76px;
    height: 76px;
    margin-top: -38px;
    margin-left: -38px;
}
#tira {
	height:150px;}
	.numero{ font-size:75px; margin:0 30px;}
#mejor-opcion .caja p{
    line-height: 2.5em;}
	#mejor-opcion {
    height: 560px;}
	#mejor-opcion .caja div {
    padding: 16px 10%;
    max-width: 100%;
}
#index-cta2 .degradado p {
	font-size: 27px !important;
	max-width:800px;
}

#infinito .der{float:right;}
#infinito .izq{margin:0;}

.historia p{
	max-width:50%;}

#valores #btn-next, #valores #btn-prev {
    top: 62%;
}

#valores .flex div:first-child {    width: 173%;}
#valores .flex div:first-child p{max-width:355.88px; margin-left:auto; margin-right:auto;}
#valores .flex div p{max-width:195.34px; margin-left:auto; margin-right:auto;}
#nuestro-trabajo div:first-child{width: 155%;}
#nuestro-trabajo {padding: 40px;}
#nuestro-trabajo div:last-child { margin-left: 60px;}
#descripcion {    padding: 40px 5%;}
#descripcion div{
	box-sizing:border-box;
    display: inline-block;
    width: 33.3% !important;
	border:none ;
	margin:0 !important;
	padding:0 4% 15px !important ;
	float:left !important ;
}
#descripcion hr:first-of-type{display:none;}
#descripcion hr:last-of-type{display:block;}
#autofinanciamiento-cta .degradado .contenedor div #texto-cta:after {
    content: "Estas a unos pasos de ser parte de Mazda Autofinanciamiento y tu también comenzar a vivir estos beneficios.   ";
}
.contenedor div:first-child p {
   max-width:350px;
 
}
.tit_1{ font-size:22.7px;}
	.tit_2{ font-size:19.54px;}
	.plantilla .tit_2{font-size: 16px;}
	  #index-cta .tit_CTA, .tit_CTA{ font-size: 27px !important;}
	.drive_tg{font-size:17.5px; }
#index-cta, .CTA {
    height: 26.5vw !important;
}
#descripcion div:last-of-type {
    border-top: none;
}
.version{display:none;}

.hatchback span:before{
	content:"Hatchback ";
}
.sedan span:before{
	content:"Sedán ";
}
.caracteristicas{
    width: 25%;
}

.auto-caracteristicas, versiones-autos {
    padding: 60px 1%;
}
.caracteristicas-contenedor{max-width:3000px; padding:1.8%;}
.caracteristicas-contenedor hr:first-of-type{display:none;}
.plantilla .tit_1{
    font-size: 22.7px;
}
#descargables {
    padding: 100px 9%;
}




.tab div h3{
padding-left: 1vw;
    padding-right: 1vw;
    box-sizing: border-box;
	 font-size: 14px !important;
}
.tab div {
    width: 230px;
}
#image {
        height: 525px; margin:50px auto 30px;}

table th:nth-child(2), td:nth-child(2){max-width:105px;}
table th:nth-child(5), td:nth-child(5){max-width:105px;}
table th:nth-child(4), td:nth-child(4) {
    max-width: 350px;
}
#calendario {
    padding: 60px 5%;
}
th, td{box-sizing:content-box; padding:5px 20px;}
.texto-auto {
    background: rgba(16,16,16,.85);
    outline: 1px solid #FFF;
	height:33.33vw;
	padding: 5vw;
	outline-offset: -13px;
	opacity:0;
}
.texto-auto .tit_2{
	font-size:19.54px;}
.texto-auto p { font-size:16px;}

.blck01 {    padding: 90px 40px;}
.blck02 {    padding: 130px 40px;}
.blck01, .blck02{outline:none; opacity:1;  background: rgba(0,0,0,.8);}


.fondo-auto:hover .texto-auto{
	opacity:0;
	animation-name:hover-carros;
	animation-duration:1.5s;
	animation-fill-mode: forwards;
}
@keyframes hover-carros{
	from {opacity:0;}
	to {opacity:1}
}


.texto-auto .tit_1{
	font-size:21px;}
.fondo-auto p, .fondo-auto h2 {top: 30%;}
#acceso main{display:flex; padding:20px 3%;}
#instrucciones{margin:25px 0;}
#instruccion-usuario{margin:0 35px; padding-bottom:10px;}
#instruccion-clave{padding:0; margin:10px 35px 0;}
#instrucciones h3, #instruccion-usuario, #instruccion-clave{margin-right:0;}
#ingresar{width:50%;}
.blanco{padding: 50px 11%;}
ol{margin-top:0;}
#acceso  main p:first-child{margin-bottom:0;}
#ingresar .button{float:right;}
.tab div figcaption {
    font-size: 15px;
}
#preguntas .tab div {
    width: 250px;
}
.video .pop-up {
    max-width: 900px;}
.video .pop-up {
    width: 900px;
    height: 485px;
    margin-top: -242.5px;
    margin-left: -450px;
}
#video-testimonios {
    width: 96%;}
#terminos section, #privacidad section, #mapa mapa {
    margin: 60px 15%;	

}
.X {
    font-size: 25px;
}
.modal-activo td {
    padding-top: 40px;
}
.banner-autos{
	height:38.65vw;
	
}
.sombra{height:38.65vw;}
.tabcontent {
    padding: 60px 20px 54px;
}
#versiones-5 .tab div {
    width: 180px;
}
#versiones-5 .tab div h3 {
    font-size: 11px !important;
}

}

@media (min-width: 1070px){
#footer-legal .der p{	margin:10px 0;}
#footer-legal .der{float:right;}
#valores #btn-next, #valores #btn-prev {    top: 59%;}
#carrousel {max-width:908.64px;    height: 250px; margin:20px auto 40px;}
#valores .flex{max-width:908.64px; margin:0 auto;}
.caracteristicas {
        padding: 0 20px;
}
.blck01 {
    padding: 9vw 2vw;
}

.blck02 {
    padding: 14vw 2vw;}
.texto-auto p {
    max-width:178px; margin:0 auto;
}



}

@media (min-width: 1300px){
nav li a {margin: 25px 17px;}
.barra h1 {margin: 16px 56px; min-width:582px; max-width:1000px;}
.button_sec{ font-size:14px!important;}
.button{
	font-size:18px;
	}
.cuadro .button{
	width:150px;}
#cuadros_3{
    max-width: 1280px;
    margin: 0 auto;
}
#nuestro-trabajo {
    padding: 60px; padding-right: 0;
}
#nuestro-trabajo div:first-child {
    width: 120%;
}
#nuestro-trabajo div:last-child h2, #nuestro-trabajo div:last-child p{ max-width: 400px;}
#nuestro-trabajo div:first-child {
    width: 51%; background-position:top;}
#nuestro-trabajo div:last-child{ margin: 0 auto;}
.auto-caracteristicas, #versiones-autos {
    padding: 100px 1%;
}
.tab div {
    width: 286px;
}
#image {display: inline-block;    width: 800px; float:left; margin:5px 0;}
.prev-box{
    display: inline-block;
    width: 300px;
	float:right;
}
.preview {
    width: 44%;
	}
.gale{
    height: 525px; margin: 50px auto 30px;}

.fondo-auto, .blck01, .blck02 {
    width: 25vw;
    height:25vw;
}
.blck01{padding: 5vw 1vw;}
.blck02{padding: 8.6vw 1vw;}
.fondo-auto p, .fondo-auto h2 {top: 30%;}
.texto-auto {
    height:25vw;
	outline-offset: -13px;
	}
#acceso  main{padding:20px 10%;}
#instrucciones{margin-left:30px;}
.tab div h3 {
    font-size: 16px !important;
}
#preguntas .tab div {
    width: 290px;
}
#proximamente {
      left: 90px;
}
#versiones-5 .tab div {
    width: 240px;
}
#versiones-5 .tab div h3 {
    font-size: 14px !important;
}
}

/*Ventana Eventos*/
#landingEventos{
	background-color: #101010;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	text-align:left;
	max-width: 100vw;
    margin: 0 auto;
}

.ventana .pop-upM{
	margin:5px auto;
	max-width: 921px;
	-webkit-overflow-scrolling:auto;
}

.cerrarM{
	text-align: right;
  font-weight: 900;
  position:absolute;
  z-index: 100;
}

.ventana .cerrarM{
  right: 10px;
  top: 8px;
 }
 
.ventana .cerrarM a:before{
	color:#fff;
}

.cerrarM a:before{
	font-family: Mazda_Icons;
-apple-system-font-family: Mazda_Icons;
	content:"\e924";
}

#iframeImagenes{
    height: 95vh;
    overflow-y: auto;
}

#iframeImagenes::-webkit-scrollbar {
    -webkit-appearance: none;
}

#iframeImagenes::-webkit-scrollbar:vertical {
    width:5px;
}

#iframeImagenes::-webkit-scrollbar-button:increment,#iframeImagenes::-webkit-scrollbar-button {
    display: none;
} 

#iframeImagenes::-webkit-scrollbar:horizontal {
    height: 10px;
}

#iframeImagenes::-webkit-scrollbar-thumb {
    background-color: #fff;
    border-radius: 20px;
}

#iframeImagenes::-webkit-scrollbar-track {
    border-radius: 10px;  
}

/*Expandir Imagenes*/
.imageEvet{
    width: 400px;
    height: 430px;
    /*background-image: url('../imgAdjudicacion/Imagen1.jpg');*/
    /*position: absolute;*/
}

.infoEve{
    display: flex;
    align-items: center;
    justify-content: center;
}

.cuadro:hover > .infoEve{
    position: absolute;
    width: 400px;
    height: 430px;
    margin-top: -430px;
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.tit_img{
    color: #fff;
}

/*Modal*/
#verimagenModal{
    background-color: #000;
    width: 90%;
    left: 5%;
    margin-left: 0;
}

.modal-header{
    margin-bottom: 5px;
    border-bottom: 0px solid #eee;
}

.close{
    color: #fff;
}

.modal-footer{
    border-top: 0px solid #ddd;
    background-color: #000;
}

.modal-body{
    max-height: 75vh;    
}

.modal-body::-webkit-scrollbar {
    -webkit-appearance: none;
}

.modal-body::-webkit-scrollbar:vertical {
    width:5px;
}

.modal-body::-webkit-scrollbar-button:increment,.modal-body::-webkit-scrollbar-button {
    display: none;
} 

.modal-body::-webkit-scrollbar:horizontal {
    height: 10px;
}

.modal-body::-webkit-scrollbar-thumb {
    background-color: #979794;
    border-radius: 20px;
}

.modal-body::-webkit-scrollbar-track {
    border-radius: 10px;  
}

/*Main*/
.sinEventos{
    background: #101010;
    color: #fff;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main{
    background-color: #101010;
    height: 100vh;
}