* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* FUENTES PROPIAS*/
@font-face {
	font-family: bodoni;
	src: url(../media/bodoniposter.otf);
}
@font-face {
	font-family: west;
	src: url(../media/westayscript.otf);
	font-style: normal;
  	font-stretch: 1% 500%; /* Required by Chrome */
}

@font-face {
	font-family: nxl;
	src: url(../media/NexaLight.otf);
}

@font-face {
	font-family: nxb;
	src: url(../media/NexaBold.otf);
}

@font-face {
	font-family: bor;
	src: url(../media/BorisBlackBloxx.ttf);
}

/* VARIABLES */

:root {
	--santo1: #3D4394;
	--santo2: #0D7DA6;
	--santo3: #5FB7E0;
	--santo4: #BBE0F1;
	--santo5: #D1EBF6;
	--santo6: #E3F3FA;
	--azul1: #0058a3;
	--azul2: #00b2e3;
	--azul3: #8bcdee;
	--azul4: #cbe7f8;


	--gris1: #ededed;
	--gris2: #cccccc;
	--gris3: #999999;
	--gris4: #666666;
	--gris5: #374049;

	--titulos1-familia: 'Montserrat', sans-serif;
	--titulos1-fontweight: 100;
	--titulos2-fontweight: 200;
	--titulos3-fontweight: 300;
	--titulos4-fontweight: 400;
	--titulos5-fontweight: 500;
	--titulos6-fontweight: 600;
	--titulos7-fontweight: 700;
	--titulos8-fontweight: 800;
	--titulos9-fontweight: 900;

	--open: 'Open Sans', sans-serif;
	--open-fontweight3: 300;
	--open-fontweight4: 400;
	--open-fontweight6: 600;
	--open-fontweight8: 800;
}

/* BODY */

@media screen and (min-width: 1290px){

body{
	/* background: var(--gris4); */
	min-width: 1313px;
	width: 60vw;
	margin: auto;
	font-family: var(--open);
	font-weight: var(--open-fontweight3);
	color: var(--gris4);
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto auto;
	grid-template-areas:"homepage"
						"cartamenu"
						"direcciones"; 	
}
/* ------------------------------------------------------------------------------------------------- */

/* PANTALLAS GRANDES */
/* PANTALLAS GRANDES */
/* PANTALLAS GRANDES */
/* PANTALLAS GRANDES */
/* PANTALLAS GRANDES */

	/* @media screen and (min-width: 992px){ */

.homepage{
	grid-area: homepage;
	min-width: 1313px;
	background-color:white;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas: "headerproductos"
						  "cartamenu"
}

.direcciones{
	grid-area: direcciones;
	background-color: lightblue;
	/* height: 200px;
	width: 98vw; */
	max-width: 1313px;

}

/* .cartamenu{
	grid-area: cartamenu;
	background-color:white;
	display: grid;
	grid-template-columns: 98vw;
	grid-template-areas: "cabezaizq cabezaizq cabezaizq cabezader cabezader cabezader"
						 "platouno platouno platodos platodos platotres platotres"
} */



/* ------------------------------------------------------------------------------------------------- */

/* POPUP */

.fotohackertres{
	display: none;
}

.popup { 
	position: fixed; background: rgba(0,0,0,0.80); left: 0px; right: 0px; bottom: 0px; top: 0px; z-index: 999; display: none; }
.popup-inner { background: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; width: 600px; height: 322px; position: relative; display: table; margin: auto; top: 90px; box-sizing: border-box; max-width: 100%; }
.popup .close { cursor: pointer; height: 34px; width: 34px; position: absolute; right: 0px; top: -44px; color: #fff; font-size: 30px; font-family: monospace; font-weight: 300; }
/* .popup .close:hover { } */

.popup-content {  box-sizing: border-box; }

 @media only screen and (max-width:768px) {
       .popup-inner  {width: 100% !important}
   }
   
   .popup{
	z-index: 11111;
   }

   .popup-inner{
	background-color: rgb(0, 0, 0);

   }
/* POPUP */

/* ------------------------------------------------------------------------------------------------- */

/* ESTILOS PARA EL HOMEPAGE */
/* ESTILOS PARA EL HOMEPAGE */
/* ESTILOS PARA EL HOMEPAGE */
/* ESTILOS PARA EL HOMEPAGE */


.headerproductos{
	grid-area: headerproductos;
	position:fixed;
	z-index:999;
	background-color:rgb(255, 255, 255);
	display: grid;
	grid-template-columns: 2% 19% 67% 8% 2%;
	grid-template-rows: 110px;
	grid-template-areas: "blanco1 logo navppal redes blanco2";
	max-width: 1313px;
	min-width: 1313px;
	/* overflow: hidden; */
	}

	.cartamenu{
		grid-area: cartamenu;
		/* width:85vw;
		margin:110px auto 0 auto;
		height:450px;
		position:relative;
		color:rgb(104, 233, 233);
		text-shadow:rgba(0,0,0,0.1) 2px 2px 0px;	 */
		/* overflow: hidden; */
		display: grid;
		grid-template-columns: 98vw;
		grid-template-rows: auto auto ;
		margin-top:85px;
		background-color: rgb(245, 245, 245);
				max-width: 1313px;
		/* min-width: 1313px; */
		overflow: hidden;
		margin: auto;
		text-align: center;

	
}


/* ------------------------------------------------------------------------------------------------- */

		/* HEADERPRODUCTOS */
		/* HEADERPRODUCTOS */


	
		.cajaheader1{
			grid-area: blanco1;
			background-color: white;
			}

		.cajaheader2 {
			grid-area: logo;
			display: flex;
			/* text-align: center; */
			align-items: center;
			justify-content: center;
			margin-top: 0.5rem;
			}

		.logosantorini {
			/* margin-top: .8rem; */
			width: 16vw;
			max-width: 200px;
			margin-bottom: -.5rem;
			/* margin-left: 1rem; */
			/* height: 70px; */
			}

		.cajaheader3{
			grid-area: navppal;
			font-family: var(--open);
			font-weight: var(--open-fontweight4);
			/* font-size: clamp(.8rem, 1.2vw, 5rem); */
			margin: 1.4rem 0rem 0 0rem;
			/* margin-top: 2rem; */
			line-height: 1em;
			display: flex;
			justify-content: center;
			align-items: center;

			}

			.cajaheader2movil, .cajaheader3movil, .cajaheader7movil{

				display: none;
			}	

		/* .lineavertical{
			width: 1px;
			height: 1.5rem;
			background-color: var(--azul2);
			padding: .8px;
		} */

		.lineavertical{
			border-left: 1.5px solid var(--santo3);
			height:50%;
		}

		.cajaheader7 {
			grid-area: redes;
			margin: 2rem 0rem 0 0rem;
			display: flex;
			justify-content: right;
			align-items: center;

			}

		.cajaheader5{
			grid-area: blanco2;
			}
			
		.cajaheader8, .cajaheader9{
			display: none;				
		}

		.floatwhatsapp{
			position: fixed;
			bottom: 30px;
			right: 2.3rem;
			z-index: 10000;
		}

		.whatsappfloat{
		margin: auto;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-decoration: none;

		}
		
		.whatsappfloat p{
			font-family: nxb;
			font-size: .8rem;
			margin: auto;
			text-align: center;
			line-height: .8rem;
			color: var(--gris3);
		}

		.floatbutton{
			background-image: url("../img/todos/whatsapp.svg");
			background-repeat: no-repeat;
			width: 3.4rem;
			height: 3.4rem;
		}

		.instagramimg, .facebookimg {
			width: 1.5rem;
			margin-left: 1rem;
			}

/* ------------------------------------------------------------------------------------------------- */

.cajaheader1{
	grid-area: blanco1;
	background-color: white;
	}

.cajaheader2 {
	grid-area: logo;
	display: flex;
	/* text-align: center; */
	align-items: center;
	justify-content: center;
	margin-top: 0.5rem;
	}

.logosantorini {
	/* margin-top: .8rem; */
	width: 16vw;
	margin-bottom: -.5rem;
	/* margin-left: 1rem; */
	/* height: 70px; */
	}

.cajaheader3{
	grid-area: navppal;
	font-family: var(--open);
	font-weight: var(--open-fontweight4);
	font-size: clamp(1rem, 1vw, 5rem);
	margin: 1.4rem 0rem 0 0rem;
	/* margin-top: 2rem; */
	line-height: 1em;
	display: flex;
	justify-content: center;
	align-items: center;

	}

/* .lineavertical{
	width: 1px;
	height: 1.5rem;
	background-color: var(--azul2);
	padding: .8px;
} */

.lineavertical{
	border-left: 1.5px solid var(--santo3);
	height:50%;
}

.cajaheader7 {
	grid-area: redes;
	margin: 2rem 0rem 0 0rem;
	display: flex;
	justify-content: right;
	align-items: center;

	}

.cajaheader5{
	grid-area: blanco2;
	}
	
.cajaheader8, .cajaheader9{
	display: none;				
}

.floatwhatsapp{
	position: fixed;
	bottom: 30px;
	right: 2.3rem;
	z-index: 10000;
}

.whatsappfloat{
margin: auto;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-decoration: none;

}

.whatsappfloat p{
	font-family: nxb;
	font-size: .8rem;
	margin: auto;
	text-align: center;
	line-height: .8rem;
	color: var(--gris3);
}

.floatbutton{
	background-image: url("../img/todos/whatsapp.svg");
	background-repeat: no-repeat;
	width: 3.4rem;
	height: 3.4rem;
}

.instagramimg, .facebookimg {
	width: 1.5rem;
	margin-left: 1rem;
	}

/* ------------------------------------------------------------------------------------------------- */

		/* MENU DESPLEGABLE */
			
			.headerproductos ul{
				list-style: none;
			}
			
			.headerproductos ul li{
			display: inline-block;
			position: relative;
			}
			
			.headerproductos ul li:hover{
				background:white;
				border-radius: 0em;
				}
			
			.headerproductos ul li a{
				color: var(--gris4);
				display: block;
				text-decoration: none;
				text-align: center;
				margin: 0 .4rem;
				/* padding: 5px 20px; */
			}

			.headerproductos ul li a:hover{
				color: var(--santo3);
			}

			

			.cajaheader3 a{
				color: var(--gris4);
				display: block;
				text-decoration: none;
				text-align: center;
				margin: 0 .7rem;
			}

			.cajaheader3 a:hover{
				color: var(--santo3);
			}

			.headerproductos ul li .children1{
				display: none;
				background:white;
				border-radius: 5px;
				box-shadow:0 4px 8px rgba(0,0,0,0.2);
				position: absolute;
				/* left: -150%; */
				/* width: 400%; */
				z-index: 1000;
				/* padding: 10px; */
				}
							
			.headerproductos ul li:hover .children1{
			display: block;
			}
							
			.headerproductos ul li .children1 li{
				display: block;
			}
			
			.children1 {
				/* list-style-type: none; */
				columns: 2;
				-webkit-columns: 2;
				-moz-columns: 2;
			}

			ul .children1 li a{
				color:var(--gris4);
				text-align: center;
				margin: 2px;
				padding: 5px 1rem;
			}

			ul .children1 li a:hover{
				background:var(--santo3);
				text-align: center;
				margin: 2px;
			}


			ul .children1 h3{
				color: var(--gris4);
				padding: 20px;
				text-align: center;
				font-size: 1rem;
			}

			.headerproductos ul li .childrendos{
				display: none;
				background:rgb(255, 255, 255);
				border-radius: 5px;
				box-shadow:0 4px 8px rgba(0,0,0,0.2);
				position: absolute;
				left: -20%;
				width: 12vw;
				z-index: 1000;
				padding: 10px;
				}

							
			.headerproductos ul li:hover .childrendos{
			display: block;
			}
							
			.headerproductos ul li .childrendos li{
				display: block;
			}
			
			.childrendos {
				/* list-style-type: none; */
				columns: 1;
				-webkit-columns: 1;
				-moz-columns: 1;
			}

			ul .childrendos li a{
				color:var(--gris4);
				text-align: center;
				margin: 2px;
				padding: 5px 1rem;
			}

			ul .childrendos li a:hover{
				background:var(--santo1);
				/* text-align: left; */
				width: 100%;
				/* margin: 2px; */
			}


			ul .childrendos h3{
				color: var(--gris4);
				padding: 20px;
				text-align: center;
				font-size: 1rem;
			}

			.headerproductos ul li .childrentres{
				display: none;
				background:white;
				border-radius: 5px;
				box-shadow:0 4px 8px rgba(0,0,0,0.2);
				position: absolute;
				left: -50%;
				width: 200%;
				z-index: 1000;
				padding: 10px;
				}
							
			.headerproductos ul li:hover .childrentres{
			display: block;
			}
							
			.headerproductos ul li .childrentres li{
				display: block;
			}
			
			.childrentres {
				/* list-style-type: none; */
				columns: 1;
				-webkit-columns: 1;
				-moz-columns: 1;
			}

			ul .childrentres li a{
				color:var(--gris4);
				text-align: center;
				margin: 2px;
				padding: 5px 1rem;
			}

			ul .childrentres li a:hover{
				background:var(--santo1);
				text-align: left;
				margin: 2px;
			}


			ul .childrentres h3{
				color: var(--gris4);
				padding: 20px;
				text-align: center;
				font-size: 1rem;
			}


/* ------------------------------------------------------------------------------------------------- */
	

/* ESTILOS PARA EL GRID DE DIRECCIONES */
/* ESTILOS PARA EL GRID DE DIRECCIONES */
/* ESTILOS PARA EL GRID DE DIRECCIONES */
/* ESTILOS PARA EL GRID DE DIRECCIONES */

footer{
	text-align: center;
	font-size: .7rem;
	display: flex;
	justify-content: center;
	/* max-width: 1313px; */

}

footer>div{
	/* max-width: 1313px; */

margin: 1rem 3rem;
}

footer h2{
	font-family: var(--titulos1-familia);
	font-weight: var(--titulos4-fontweight);
}

h2.motel{
	font-weight: var(--titulos8-fontweight);

}


/* ------------------------------------------------------------------------------------------------- */


	/* ESTILOS CABEZOTE MENU */
	/* ESTILOS CABEZOTE MENU */

	.cabezotemenu {
		display: flex;
		justify-content: center;
		margin: 8rem 0 0 0;
		max-width: 1313px;
	}
	
	
	.cajacabizq{
		width: 28vw;
		display: flex;
		align-items: center;
		justify-content: center;
	
	}
	
	.cajacabizq h3{
		font-family: west;
		font-size: 3.4rem;
		transform:scale(2,1); 
		-webkit-transform:scale(1.4,1);
		font-weight: normal;
		color: black;
		margin: 0 3rem;
		
	}

	.shop{
		font-family: nxb;
		font-size: 3.4rem;
		transform:scale(1,1); 
		color: var(--santo3);
		margin-right: 1rem;
	}

	.rayita{
		background-color: var(--santo3);
		width: 40px;
		height: 2px;
		
	}
	.cajacabder{
		width: 40vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.opciones{
		width: 48vw;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: center;
	}
	
	.marca{
		font-family: var(--titulos1-familia);
		font-weight: var(--titulos5-fontweight);
		font-size: 1.5rem;
		color: #ee3178;
		margin-bottom: 0.5rem;
	}
	
	.marca span{
		font-family: var(--titulos1-familia);
		font-weight: var(--titulos9-fontweight);
		font-size: 1.5rem;
		color: #ee3178;
	}
	
	.categoria{
	width: 10vw;
	height: 2rem;
	font-family: var(--open);
	font-weight: var(--open-fontweight6);
	font-size: 1.2rem;
	padding: 0rem .4rem;
	text-decoration: none;
	border-color: var(--santo3);
	border-radius: .3rem;
	border-style: solid ;
	text-align: center;
	margin: 0.1rem;
	
	}
	
	
	
	/* ------------------------------------------------------------------------------------------------- */
	
	
			/* ESTILOS PLATOS */
			/* ESTILOS PLATOS */
	
	.platos{
		display: flex;
		justify-content: center;
		margin: 1rem 2rem;
		flex-wrap: wrap;
		max-width: 1313px;
		/* grid-template-columns: repeat(3, 1fr); */
		margin-top: 14rem;

	}
	
	.articulo{
	width: 277px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin: 1rem;
	margin-top: -12rem;
	}
	
	.fotoplato{
		width: 250px;
		height: 30vh;
		border-radius: 1rem;
		z-index: 1;

	}	
		
	
	.item01{
		background-image: url(../img/sexshop/L07.jpg);
		background-size: cover;
		background-position: center;
	}
	
	.item02{
		background-image: url(../img/sexshop/L08.jpg);
		background-size: cover;
		background-position: center;
	}
	
	.item03{
		background-image: url(../img/sexshop/L02.jpg);
		background-size: cover;
		background-position: center;
	}
	
	.item04{
		background-image: url(../img/sexshop/L03.jpg);
		background-size: cover;
		background-position: center;
	}
	
	.item05{
		background-image: url(../img/sexshop/L04.jpg);
		background-size: cover;
		background-position: center;
	}
	
	.item06{
		background-image: url(../img/sexshop/L05.jpg);
		background-size: cover;
		background-position: center;
	}
	
	.item07{
		background-image: url(../img/sexshop/L01.jpg);
		background-size: cover;
		background-position: center;
	}
	
	.item08{
		background-image: url(../img/sexshop/L06.jpg);
		background-size: cover;
		background-position: center;
	}
	.item09{
		background-image: url(../img/sexshop/L09.jpg);
		background-size: cover;
		background-position: center;
	}
	
	.item10{
		background-image: url(../img/sexshop/L10.jpg);
		background-size: cover;
		background-position: center;
	}
	
	.item11{
		background-image: url(../img/sexshop/L11.jpg);
		background-size: cover;
		background-position: center;
	}

	
	.precioplato{
		font-family: bor;
		font-size: 1.4rem;
		letter-spacing: 2px;
		background-color: var(--santo1);
		color: white;
		padding: 0 1rem;
		border-radius: 5px;
		position: relative;
		top: -1rem;
		box-shadow:0 4px 8px rgba(0,0,0,0.3);
		z-index: 1;

	}
	
	.nombreplato{
		font-family: var(--titulos1-familia);
		font-weight: var(--titulos9-fontweight);
		font-size: 1.3rem;
		color: white;
		z-index: 1;
		padding: 0 2.4rem;
		margin-top: 1rem;
		line-height: 1.3rem;
	}
	
	.lineadivisoria{
		width: 80%;
		height: 1.5px;
		background-color: var(--santo3);
		margin: .5rem;
	}
	
	.descripcionplato{
		width: 80%;
		height: 90px;
		min-height: 90px;
		max-height: 90px;
		font-family: var(--open);
		font-weight: var(--open-fontweight4);
		font-size: .8rem;
		z-index: 1;
		color: white;

	}

	.basedecolor{
		background-color: var(--santo2);
		width: 100%;
		height: 260px;
		min-height: 260px;
		border-radius: 15px;
		position: relative;
		top: -15rem;
	
	}
/* ------------------------------------------------------------------------------------------------- */
	


}