*{
	padding: 0;
	margin: 0;
	text-decoration: none;
	list-style: none;
	box-sizing: border-box;
	font-family: 'revicons', 'Arial', sans-serif;
}

*, ::after, ::before {
    box-sizing: border-box;
}

body{
	background: url("../img/background.jpg") no-repeat;
    background-size:cover;
	overflow: none;

}

/*1.- Variables css*/
html:root {
    --fondo: url(../img/fondo.jpg);
    --primario: linear-gradient(#000000, #5c5c5c );
	--pedidos: #000000;
    --secundario: #fff;
    --terciario: #F30004;
    --bordes: 1px solid #050505;
    --sombra: 2px 27px 31px black outset;
        --boton-app: #0b7c10;
        --appUno:  rgb(173, 173, 173); 
    --letras-oscuras: #06070A;
    --background-producto: linear-gradient(#ffffff, #EAE1E1);
    --letra-mapa: #fff;
    
}

.fondo{
	background:#F30004;
}


/* Negro */

.negro{
	color: black;
}

/* Blanco */

.blanco{
	color: var(--secundario)!important;
}

.verde{
	color: var(--boton-app);
}

.btn-contacto__blanco{

	background: var(--secundario);
}

	.btn-contacto__naranja{		
		background: var(--primario);
	}

	.btn-contacto__normal{		
		background: var(--primario);
		color: var(--secundario)
	}

/*Nombre personalizado*/

.nombre{
    color: black;
    font-size: 12px;
}

.parrafo{	
		font-size: 20px;
		font-weight: bold;
		line-height: 22px;
}





/*Slider*/



/*CardiTel*/
/*CardiTel*/
.carditel {
    filter: drop-shadow(1px 1px 6px white);
    position: absolute;
    bottom:7%;
    left: 50%;
    transform: translateX(-50%);
    padding: 3vh;
    width: 32%;
    margin: 0 auto;
}

/*Slider*/
.contacto-adelante{
    z-index: 2 !important;
    position: absolute;
    bottom:10%;
}

/* Color logo de whatsapp */
.fa-whatsapp{
	color: green;
	font-weight: bold;
	font-size: 1.3rem;
}

/*fin Slider*/
		

/*2.- Clases de botones */
	
    .imagen {
    width: 41vmin;
    padding: 15px;
    filter: drop-shadow(1px 2px 2px black);
    margin: -12px 6px -19px 6px;
    border-radius: 6px;
}

	
	
	.app{
		color: var(--appUno);
		font-size: 4vw;
		text-align: center;
		padding-bottom: 4px;
	}

.btn-pedidos {
    border: none;
    outline: none;
    background: var(--pedidos);
    width: 44%;
    padding: 1% 0%;
    border-radius: 5px;
    color: var(--secundario);
    font-size: 4vw;
    font-weight: bold;
    text-align: center;
    margin-bottom: 2%;
    cursor: pointer;
    border: var(--secundario);
    box-shadow: var(--sombra);
    text-align: center;
    margin: 0 auto;

}

.titulo-pedidos{
	color: var(--letras-oscuras);
	font-weight: bold;
	font-size: 5vmin;
	text-align: center;
	margin: 6px;
}

.titulo-pedidos-2{
	width: 70%;
	color: var(--letras-oscuras);
	font-weight: bold;
	font-size: 5vmin;
	padding:1.5vw; 
	margin-bottom: 2vw;
	text-align: center;
    background: rgba(255, 255, 255, 0.5 );
	border-radius: 4px; 
}



	

	.btn-recomendar{

		border: none;
		outline: none;
		background: var(--primario);
		width: 80%;
		padding: 5% 2%;
		border-radius: 5px;
		color: var(--secundario);
		font-size: 5vw;
		font-weight: bold;
		margin-bottom: 2%;
		cursor: pointer;
		border: var(--bordes);
		box-shadow: var(--sombra);

	}
	
	.btn-descargar-colores{
		background: var(--primario);
		color: var(--secundario);
		border: var(--bordes)!important;
	}

	.btn-descargar{
		border: none;
		outline: none;
		/* background: var(--primario);
		color: var(--secundario); */
		width: 100%;
		padding: 2% 2%;
		border-radius: 5px;
		font-size: 5vw;
		font-weight: bold;
		margin-bottom: 2%;
		margin-top: 2vw;
		cursor: pointer;
		border: solid #0b806c 1px;
		box-shadow: var(--sombra);
	}




	.btn-redes{
		border: none;
		outline: none;
		background: var(--primario);
		width: 18%;
		padding: 3vw 0;
		border-radius: 5px;
		color: var(--secundario);
		font-size: 5vw;
		font-weight: bold;
		margin: 0.5vh 2vw 0 2vw;
		cursor: pointer;
		border: var(--bordes);
		box-shadow: var(--sombra);
		

	}
	.btn-contacto{
		border: none;
		outline: none;
		width: 40%;
		padding: 2vw 1vw;
		border-radius: 5px;
		font-size: 5vw;
		font-weight: bold;
		margin-bottom: 1vw;
		margin-left: 0;
		cursor: pointer;
		border: var(--bordes);
		box-shadow: var(--sombra);

	}

	[class*="btn-"]:hover{
		transform: translateY(1px);
	}

	/*Centrar*/
	.centrar{
		display: block;
		margin: -2px auto;
		text-align: center;
	}

	.centrar-2{
		display: block;
		margin: 0 auto;
		text-align: center;
		padding: 0 20px;
	}

/*Banners-portada*/

.banners-portada{
    position: absolute;
    bottom: 40%;
    z-index: 2;
   
}

.img-banner{
    padding: 10px;
}



/*3.- Clases row y col*/

.row{
	display: flex;
	flex-wrap: wrap;
	padding: 0 4px;
}
 .col{
 	flex: 100%;
 	max-width: 100%;
 	margin: 0 auto;
 	width: 50%;
 	
 }

 .col-3{
 	flex: 33.33%;
 	max-width: 33.33%;
 	margin: 0 auto;
 	width: 50%;
 	
 }



/*Logo*/

 .logo-cliente{
 	width: 55vmin;
 	height: auto;
 	/*margin-top: 0vh;*/
 	vertical-align: middle;
 	
 }

/*cartel*/

 .portada-1{
 	max-width: 35vh;
 	height: auto;
 	margin-top: 0vh;
 	vertical-align: middle;
 	filter: drop-shadow(1px 4px 4px rgba(0, 0, 0, .6)); 
 }

 
 /*Contraportada*/

 #contra-portada-1{
 	width: 90vmin;
 	margin-bottom: 6vmax;
 }


 
  

/*Main*/

main{
	
	max-width: 420px;

	height: 100vh;
	background: var(--fondo) no-repeat center;
	overflow: none;
	background-size: 100% 100vh;
	margin: auto;
}






/*Aplicación del mapa*/
/*Iframe del mapa*/
div#mapa div h2:first-of-type {
    background-color: black;
    padding: 3vmax;
    color: var(--letra-mapa);
    font-size: 2vh;
}


iframe{
	padding-top: 5%;
    z-index: 10000;
}

/*fin de iframe*/

 

section label#mapa-app span{
	position: absolute;
    top: -5px;
    width: 40px;
	height: 70px;
	background: var(--primario);
	border: var(--bordes);
	box-shadow: var(--sombra);
    padding: 40px 5px 0 10px;
    margin-right: 20px;
    right: 0;
    color: var(--secundario);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    cursor: pointer;
    z-index: 2;
}

/*Mapa*/


#mapa{
	position: absolute;
	width: 100%;
	height: 100vh;
	top:0;
	left: -200%;
	transition: left .2s linear;
	background: url(../img/fondo.jpg) no-repeat center;
	background-size: cover;
	z-index: 10000;

}

input#mapa-1:checked ~ #mapa{
	left: 0;
}

input#mapa-1{
	display: none;
}

/*Icono cerrar*/
i.fa-times-circle{
	position: absolute;
	right: 0;
	top: 0;
	margin:  10px 10px 0 0;
	color: white;
	font-size: 8vw;
	border-radius: 5px;
    cursor: pointer;
	
}

/*Aplicacion Card Footer*/

/*Botones*/


/*fin de botones hover*/


footer{
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 10%;
	background-color: rgba(0, 0, 0, .7);
	padding-top: 10px;
}

div.centrar{
	display: flex;
	justify-content: space-around;
	align-items: center;
}

/*Páginas*/



section#pagina-pedidos{
	display: none;
}

section#pagina-recomendar{
	display: none;
}

#pagina-inicio{
	display: none;
}


/*Inputs*/
input#scardtacus-1, input#scardtacus-2, input#scardtacus-3{
	display: none;
}




input#scardtacus-2:checked ~ section#pagina-inicio {
	display: block;
	
	
}
input#scardtacus-3:checked ~ #pagina-recomendar{
	display: block;
	
}

input#scardtacus-1:checked ~ #pagina-pedidos{
	display: block;
	
}



/*Checked label*/

input#scardtacus-1:checked ~ footer div.centrar #boton-pedidos{
	opacity: 1;
	color: var(--boton-app);
	transform: scale(1.1);
	
}

input#scardtacus-2:checked ~ footer div.centrar #boton-inicio{
	opacity: 1;
	color: var(--boton-app);
	transform: scale(1);
	
}

 input#scardtacus-3:checked ~ footer div.centrar #boton-recomendar{
	opacity: 1;
	color: var(--boton-app);
	transform: scale(1.1);
	
}


/*Aplicación de pedidos*/

.imagen-pedidos {
    width: 32vmin;
    height: auto;
    visibility: hidden;
}

#figure-producto-1{

	background: url(../img/fondo-02.jpg) no-repeat center;
	background-size: auto;
    margin: 0;
	padding: 0;

}

#figure-producto-2{

	background: url(../img/fondo-02.jpg) no-repeat center;
	background-size: auto;
	margin: 0;
	/* padding: 36px; */
}

#figure-producto-3{

	background: url(../img/fondo-02.jpg) no-repeat center;
	background-size: auto;
    margin: 0;
	padding: 0;
}

#figure-producto-4{

	background: url(../img/fondo-02.jpg) no-repeat center;
	background-size: auto;
    margin: 0;
	padding: 0;
}

#figure-producto-5{

	background: url(../img/fondo-02.jpg) no-repeat center;
	background-size: auto;
    margin: 0;
	padding: 0;
}

#figure-producto-6{

	background: url(../img/fondo-02.jpg) no-repeat center;
	background-size: auto;
    margin: 0;
	padding: 0;
}

#figure-producto-7{

	background: url(../img/fondo-02.jpg) no-repeat center;
	background-size: auto;
    margin: 0;
	padding: 0;
}

#figure-producto-8{

	background: url(../img/fondo-02.jpg) no-repeat center;
	background-size: auto;
    margin: 0;
	padding: 0;
}

#figure-producto-9{

	background: url(../img/fondo-02.jpg) no-repeat center;
	background-size: auto;
    margin: 0;
	padding: 0;
}

#figure-producto-10{

	background: url(../img/fondo-02.jpg) no-repeat center;
	background-size: auto;
    margin: 0;
	padding:0;
}







[id*="section-"]{
		display: table;
		margin: 0 auto;
		text-align: center;
		position: absolute;
		top: 0;
		left: -200%;
		transition: left .3s linear;
		z-index: 10;
		background: var(--fondo);
		background-size: cover;
		height: 100vh;
        width: 100%;
	}


	/*Input None*/
	input[id*="producto-"]{
		display: none;
	}

input#producto-1:checked ~ section#section-fondo-1{
	left: 1px;
}

input#producto-2:checked ~ section#section-fondo-2{
	left: 1px;
}

input#producto-3:checked ~ section#section-fondo-3{
	left: 1px;
}

input#producto-4:checked ~ section#section-fondo-4{
	left: 1px;
}

input#producto-5:checked ~ section#section-fondo-5{
	left: 1px;
}

input#producto-6:checked ~ section#section-fondo-6{
	left: 1px;
}

input#producto-7:checked ~ section#section-fondo-7{
	left: 1px;
}

input#producto-8:checked ~ section#section-fondo-8{
	left: 1px;
}

input#producto-9:checked ~ section#section-fondo-9{
	left: 1px;
}

input#producto-10:checked ~ section#section-fondo-10{
	left: 1px;
}

/*Responsive*/


 /*Desde 280px*/








@media(min-width: 280px) and (min-height: 653px){

.btn-contacto, .btn-descargar {
    width: 100%;
    padding: 5vw 1vw;
    
}

.btn-redes{
 	width: 30%;
 	padding: 4vw 0;
 }

 #contra-portada-1 {
    width: 80vmin;
    margin-bottom: 18vmax;
}

.imagen {
    width: 44vmin;
    padding: 7px;
    filter: drop-shadow(1px 4px 4px rgba(0, 0, 0, .6));
    margin: 54px 6px -8px 7px;
}

.imagen-pedidos {
    width: 78vmin;
    height: auto;
}

}




 @media (min-width: 320px){
 	.portada-1{
 	max-width: 45vh;
 	height: auto;
 	margin-top: 2vh;
 	vertical-align: middle;
 }
 .parrafo{
	 font-size: 15px;
 }
 
.btn-descargar{
	width: 100%;
    padding: 4vw 1vw;
}

  .btn-contacto {
    width: 100%;
    padding: 2vw 1vw;
    
}

.btn-redes{
 	width: 18%;
 	padding: 3vw 0;
 }


.imagen {
    width: 43vmin;
    margin: -13px 6px -8px 6px;
    padding: 14px;
}

.imagen-pedidos {
    width: 60vmin;
    height: auto;
}



 }



  @media (min-width: 320px) and (min-height: 480px){
 	.portada-1{
 	max-width: 38vh;
 	height: auto;
 	margin-top: 2vh;
 	vertical-align: middle;
 }

 .btn-descargar{
	width: 100%;
    padding: 3vw 1vw;
}

.imagen-pedidos {
    width: 43vmin;
    height: auto;
}
 }



 @media (min-width: 320px) and (min-height: 568px){

   		.imagen {
    
    max-width: 44vh;
    height: auto;
    margin-top: 2vh;
    vertical-align: middle;
}

.portada-1 {
    max-width: 44vh;
    height: auto;
    margin-top: 2vh;
    vertical-align: middle;
}
 }



   


  @media (min-width: 360px){
/*Cartel*/.portada-1 {
    max-width: 41vh;
    height: auto;
    margin-top: -2vh;
    vertical-align: middle;
}


      
/*      bloque recomendar*/
      .bloque-recomendar{
             margin: -22% 0
     }


 /*Footer*/footer {
    height: 7%;
    
}

/*Logo*/
.logo-cliente{
	width: 60vmin;
}

#contra-portada-1 {
    width: 90vmin;
    margin-bottom: 18vmax;
}

/*Pagina 1- Pedidos*/
.imagen {
    width: 45vmin;
    padding: 1px;
    filter: drop-shadow(1px 4px 4px rgba(0, 0, 0, .6)); 
    margin: 2px;
}

.imagen-pedidos {
    width: 60vmin;
    height: auto;
}

/*Boton-pedidos*/
.btn-pedidos {
    border: none;
    outline: none;
    background: var(--pedidos);
    width: 44%;
    padding: 1% 0%;
    border-radius: 1px;
    color: var(--secundario);
    font-size: 4vw;
    font-weight: bold;
    margin-bottom: 2%;
    cursor: pointer;
    border: var(--secundario);
    box-shadow: var(--sombra);
}
      
/*      carrusel*/
      
 
 }

/*Finaliza 360*/




 @media (min-width: 375px){
 	.btn-descargar{
	width: 100%;
    padding: 4vw 1vw;
	height: 3.5rem;
}

.parrafo{
	font-size: 20px;
}



	.btn-contacto {
    width: 85%;
    padding: 3vw 1vw;
	height: 3rem;
}

	.btn-redes {
    width: 18%;
    padding: 4vw 0;
}
 }


 @media(min-width: 375px) and (min-height: 812px){
 	.logo-cliente {
    width: 60vmin;
}

.imagen-pedidos {
    width: 78vmin;
    height: auto;
}

 }




 @media(min-width: 384px) and (min-height: 640px){
 	.logo-cliente {
    width: 32vmin;

}

.portada-1 {
    max-width: 40vh;
    height: auto;
    margin-top: 2vh;
    vertical-align: middle;
}

.imagen {
    width: 43vmin;
    
}
   
    
}



 



 @media(min-width: 411px){
 	.logo-cliente {
    width: 52vmin;
}

.parrafo{
	font-size: 20px;
}

.imagen {
    width: 44vmin;
    padding: 1px;
    filter: drop-shadow(1px 4px 4px rgba(0, 0, 0, .6));
    margin: 16px 4px 0 4px;
}
 }

 @media (min-width: 414px){
 	.portada-1 {
    max-width: 38vh;
    height: auto;
    margin-top: -2vh;
    vertical-align: middle;
}

.fa-whatsapp{
	
	font-weight: bold;
	font-size: 1.4rem;
}



 }


/*Hasta 412*/


 /*Desde 420px*/
 @media(min-width: 420px){
     
/*     nombre*/

.parrafo{
	font-size:16px;
}
     

     
     
/*     Productos*/
     
     
     [id*="section-"]{
		display: table;
		margin: 0 auto;
		text-align: center;
		position: absolute;
		top: -200%;
		left: 0;
		transition: top .3s linear;
		z-index: 10;
		background: var(--fondo);
		background-size: cover;
		height: 100vh;
        width: 100%;
	}


	/*Input None*/
	input[id*="producto-"]{
		display: none;
	}

input#producto-1:checked ~ section#section-fondo-1{
	top: 1px;
}

input#producto-2:checked ~ section#section-fondo-2{
	top: 1px;
}

input#producto-3:checked ~ section#section-fondo-3{
	top: 1px;
}

input#producto-4:checked ~ section#section-fondo-4{
	top: 1px;
}

input#producto-5:checked ~ section#section-fondo-5{
	top: 1px;
}

input#producto-6:checked ~ section#section-fondo-6{
	top: 1px;
}

input#producto-7:checked ~ section#section-fondo-7{
	top: 1px;
}

input#producto-8:checked ~ section#section-fondo-8{
	top: 1px;
}

input#producto-9:checked ~ section#section-fondo-9{
	top: 1px;
}

input#producto-10:checked ~ section#section-fondo-10{
	top: 1px;
}


     
     
/*     mpa*/
     
     #mapa{
	position: absolute;
	width: 100%;
	height: 100vh;
	top:-200%;
	left: 0 ;
	transition: top .2s linear;
	background: url(../img/fondo.jpg) no-repeat center;
	background-size: cover;
	z-index: 3;

}

     iframe{
	padding-top: 5%;
    z-index: 10000;
}
     
input#mapa-1:checked ~ #mapa{
	top: 0;
}
     
     
/*     Slider ancho*/
     
     #slider{
       display: none;
     }
     
/*     tituloo pedidos 2*/
     
     .titulo-pedidos-2 {
    width: 68%;
    color: var(--letras-oscuras);
    font-weight: bold;
    font-size: 3vmin;
    padding: 1.5vw;
    margin-bottom: 2vw;
    text-align: center;
    background: rgba(255, 255, 255, 0.5 );
    border-radius: 2px;
}
     
/*     Bloque recomendar*/
     .bloque-recomendar{
             margin: -180px 0
     }
     
/*     Contraportada*/
     
     #contra-portada-1 {
     width: 100%;;
    margin-bottom: 14vmax;
    margin-top: 121px;
}
     
     
     
/*     primer sectio*/
     
 	
 	main{
	position: relative;
	max-width: 420px;

	height: 100vh;
	background: var(--fondo) no-repeat center;
	overflow: none;
	background-size: 100% 100vh;
	margin: 0 auto;
}

 	/*Id Escritorio*/
#escritorio{
	display: relative;
	max-width: 70%;
	height: 100vh;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 0 10px;
	background:url(../img/escritorio-bg.html);
	background-size: cover;

}

.column{

	flex: 50%;
	max-width: 50%;
	padding: 0 4px;
}

.column h1, .column h2, .column p{
	position: relative;
	z-index: 10;
	text-align: right;
	text-shadow: 2px 2px 2px rgb(255, 255, 255); 
	

	padding-right: 8vw;
}  

/*Letras*/

.column h1{
	font-size: 6vw;
	color: #f0a321;
	text-shadow: 2px 4px 4px rgba(0, 0, 0, 1);

}


.column h2{
   font-size: 3vw;
   color: var(--principal);
   text-shadow: 2px 4px 4px rgba(0, 0, 0, 1);

}


.column p{
    font-size: 2vw;
    font-weight: bold;
    color: black;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, .4);
}


/*Img phone*/

.column img#phone{
	width: 140%;
	vertical-align: middle;
	/* z-index:  */
}

/*Transición de modelos*/



.column #modelo-1, .column #modelo-2, .column #modelo-3 {
	position: absolute;
	top: 50%;
	left: 25%;
	transform: translateY(-50%);
	
	width: 20%;
	vertical-align: middle;
	border-radius: 5px;
	z-index: 1;
	  
}

.column #modelo-1{
	animation: modelos 12s linear 12s infinite;
	-webkit-animation: modelos 12s linear 12s  infinite;
	-moz-animation: modelos 12s linear 12s  infinite;
}

.column #modelo-2{
	animation: modelos 12s linear 8s infinite;
	-webkit-animation: modelos 12s  linear 8s infinite;
	-moz-animation: modelos 12s linear 8s  infinite;
}

.column #modelo-3{
	animation: modelos 12s linear 4s infinite;
	-webkit-animation: modelos 12s  linear 4s infinite;
	-moz-animation: modelos 12s linear 4s  infinite;
}
     
/*     Footer*/
     
     footer {
    height: 7%;
    margin: 0 auto;
    width: 100%;
    position: absolute;
}
     
     .app{
    font-size: 15px;
         cursor: pointer;
     }
     
     
/*     Productos*/
     
   
     
/*     botones*/
     
     .btn-recomendar{
         font-size: 1vw;    
     }  
     
     
     .btn-redes {
    width: 9%;
   padding: 7px 2px;
    font-size:15px;
}
     
     
     .btn-contacto {
    width: 78%;
    font-size: 15px;
    padding: 10px 10px;
}
     
     .btn-descargar {
    width: 100%;
    padding: 1vw 1vw;
    font-size: 18px;
}
     
     .btn-pedidos{
    font-size: 1vw;
     }
     
     
/*     MApa*/
     
     div#mapa div h2:first-of-type {
    padding: 2vmax 4px 0 4px;
	background-color:var(--principal);
    color: var(--letra-mapa);
    font-size: 1vw;
	
}
     
/*     Boton cerrar del mapa*/
     
     i.fa-times-circle{
         font-size: 2vw;
     }
     
     
/*     Logo*/
     
     .logo-cliente {
    width: 35vmin;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
     
     .titulo-pedidos{
         font-size: 2vmin;
     }
     
/*     Banner portada*/
     
     .banners-portada{
    position: absolute;
    bottom: 35%;
         z-index: 2;
   
}


/*Transicion*/

@keyframes modelos{
0%{
	opacity: 1;
}

20%{
	opacity: 1;
}

30%{
	opacity: 0;
}

90%{
	opacity: 0;
}

100%{
	opacity: 1;
}







}

/*Column*/

 }


 

 	












 /*Desde 992px*/

 /*Desde 1200px*/