@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,300&display=swap');

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@600&display=swap');

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@600&family=Montserrat&display=swap');

@import url('https://fonts.googleapis.com/css?family=Open+Sans:600');

@import url('https://fonts.googleapis.com/css2?family=Lemonada:wght@600&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');


/* tags */

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

/* body{
	margin: 0;
	padding: 0;
} */

h2{
	
	font-family: 'Lemonada','sans-serif';
	/* font-family: 'IBM Plex Sans', sans-serif; */
	/* font-weight: bolder; */
	font-size: 3vw;
	color: white;
	font-style: italic;
	text-decoration-color: rgba(129, 129, 189, 0.094);
	text-decoration-line: underline;
	text-shadow: 0 0 5px black, 0 0 5px black, 0 0 10px gray;
	
}

p,
li,
h3{
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 2.7vw;	
	color: white;
	font-style: oblique;
	text-shadow: 1px 1px 2px black, 0 0 5px black, 0 0 5px gray;
}

.fuente-satisfy{
font-family: 'Satisfy';
font-size: 3.5vw;	
color: white;	
text-shadow: 1px 1px 2px black, 0 0 5px black, 0 0 5px gray;
}

ul{
	/* list-style: none; */
	list-style-type: square;
}



/* id */

/* #cargaPagina{
	cursor:pointer;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	background-position:center;
	background-size:100%;
	width:100%;
	text-align:center;
	height:100%;
	position:fixed;
	top: 0px;
	z-index:110;
} */

/* clases */

/* estructura cajas contenedores */

.caja1{
	padding: 10px;
	margin-bottom: 20px;
	border-right: 3px solid black;	
}

.caja2{
	padding: 10px;
	margin-bottom: 20px;
	border-right: 3px solid black;
}	

.caja3{	
	margin-bottom: 20px;
}

.caja4{
	height: auto;
	z-index: 90;
}

.caja5{
	background-image: linear-gradient(to bottom left, #daebfb9c , #d4e7fb);
}

.cajaPie{
	height: auto;
}

.cajaInteriorPie1{
	padding-top: 10px;
	font-family: 'Montserrat', sans-serif;
	font-style: italic;
	font-weight: bolder;
	font-size: 2.4vmax;
	color: white;
	text-shadow: 2px 2px 5px black, 0 0 5px black, 0 0 5px blue;
	/* font-size: 3vmax;	 */
}

.cajaInteriorPie2{
	height: auto;
	font-family: 'Montserrat', sans-serif;
	font-style: italic;
	font-weight: bolder;
	font-size: 2.7vmax;	
	color: white;
	text-shadow: 2px 2px 5px black, 0 0 5px black, 0 0 5px blue;
}

.cajaInteriorPie3{
	height: auto;
	font-family: 'Montserrat', sans-serif;
	font-style: italic;
	font-weight: bolder;
	font-size: 2.4vmax;	
	color: white;
	text-shadow: 2px 2px 5px black, 0 0 5px black, 0 0 5px blue;
}

.barra-final-pie{
	height: 40px;
	background-color: #000;
	color: #ccc;
}

/* fondos */

.backgroundImg1 {	
	background-image: url("img/foto blanes.jpg");
	position: relative;
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	height: auto;
} 

/* .backgroundImg2 {
	background-image: url("img/foto blanes.jpg");
	position: relative;
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	height: 300px;
	border-bottom: 2px solid blue;
}  */

.backgroundImg2{
	background-image: url("img/blanes vista playa.jpg");
	position: relative;
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	height: auto; 
}

.backgroundImg3{
	background-image: url("img/blanes vista playa.jpg");
	position: relative;
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	height: auto; 
}

/* .seccion1{
	background-color: antiquewhite;
} */

/* .fondo1{
	background-color: rgba(240, 255, 240, 0.329);
	border-bottom: 3px solid black;
	border-right: 5px solid black;
} */

/* menu superior */

/* barra superior nombre y logo */
.menu-idioma{
	position: absolute;
	/* background-color: #000; */
	top: 10px;
	left: 10px;
	z-index: 100;
}

.icono-idioma{
	height: auto;
	margin-left: 10px;
	border-bottom: 2px solid black;
	border-right: 2px solid black;
}

.flag{
	max-height: 35px;
	padding: 1px;
	cursor:pointer;
}

.cabecera-menu {
    position: fixed;
    height: auto;    
	font-family: 'Roboto Flex', sans-serif;
    font-weight: bold;
    text-align: center;
	background-color:  #7196b9cd;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border-bottom: 4px solid black;
	transition: 0.6s;
    z-index: 99;	
}

.cabecera-texto{
	position: relative;
	top: -20px;
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: bold;
	font-style: oblique;
	color: white;
    font-size: 6vmax;
    text-shadow: 0 0 4px black, 0 0 5px black;
    transition: 0,6s;
}

/* barra menu cabecera */
.barraNav {
    margin-top: -30px;
    text-align: center;
    transition: 0.6s;	
	display: none;
}

a.enlace{
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 4vmax;
	color: white;
	text-shadow: 2px 2px 2px black, 0 0 2px black, 0 0 5px blue;
	text-decoration: none;
	padding: 5px 15px 5px 15px;
}

a.enlace:hover{
	color: whitesmoke;
	text-shadow: 2px 2px 2px black, 0 0 5px black, 0 0 5px red;
}

/* otras classes de estilos */

.p1{
	font-family: 'Montserrat', sans-serif;
	/* font-style: italic; */	
	font-size: 3.5vw;
	color: white;
	text-shadow: 0 0 5px black, 0 0 5px white, 0 0 10px gray;
}

/* .imgCarga{
	max-width: 400px;
	height: auto;
} */

/* .barra-inicio-menu{
	height: 1px;
	background-color: black;
} */

/* imagen logo muñeco bar stop */

.barStop{
	position: fixed;
	top: 30px;
	left:  0px;
	height: 80px;
	width: auto;
	display: none;
	border-radius: 50%;
	z-index: 1;
}



/* .separador{
	height: 10px;
	background-color: #000;	
} */



/* .borde{
	border: 2px solid red;
} */


/* separador  zona */

hr.sep1 {
	position:relative;
	background-color:none;
	border:none;
	height:1px;
	width:100%;
	margin: 45px auto;
	text-align:center;	
}

hr.sep1:after {
	position: relative;
	top: -0.8em;
	font-size: 4.0em;
	background: none;
	display: inline-block;
	color: whitesmoke;
	text-shadow: 1px 1px 2px black, 0 0 5px black, 1px 1px 5px blue;
	line-height: 1;
	content: "~~~~~";
}

/* caja cookies */

.cardCookies{
	border: 3px solid black;
	border-radius: 6px;
	margin: 2px;
	background-color: #d4e7fbd4;
	font-size: 4vw;	
	color: white;
	text-shadow: 1px 1px 2px black, 0 0 5px black, 0 0 5px gray;
}

.card {
	width: 80%;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
	background-color: transparent;
	background-clip: border-box;
	border: 3px solid black;
	border-radius: 6px;
	margin: 2px;
	-webkit-box-shadow: 0px 0px 5px 0px rgb(249, 249, 250);
	-moz-box-shadow: 0px 0px 5px 0px rgba(212, 182, 212, 1);
	box-shadow: 0px 0px 5px 0px rgb(161, 163, 164);
}
 
.card-text{
	overflow: hidden;
	font-size: 2.7vw;
}

.cookies a {
	font-size: 4vw;	
	margin: 10px;
	text-decoration: none;
	color: blue;
	padding: 8px;
}
  
.cookies a:hover {
	font-size: 4vw;
	text-decoration: none;
	color: black;
	margin-top: 8px;
}

.textoCajaCookie{
	font-size: 4vw;;
}

#cajaCookie{
	position: absolute;
	top: 20PX;
	left: 10%;
	z-index: 99;
	display: inherit;
}

.btn{
	font-size: 3vw;
}

.btn:hover{
	background-color: blue;
}

/* boton lateral inferior regreso inicio de la pagina */

#cajaBotonInicio{
	position: fixed;
	right: 10px;
	top: 75%;
	z-index: 90;
}

.ir-arriba {
	display: none;	
	padding: 5px;
	background:#fff;
	font-size: 20px;
	cursor: pointer;
	position: fixed;
	bottom: 20px;
	right: 0px;
	border-bottom: 1px solid black;
	border-right: 2px solid black;
	z-index: 99;
}

/*carousel de texto*/
 	/* Fonfo texto scroll efecto cristral */
.carousel-inner{
	background: rgba(147, 196, 225, 0.665);
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);
	border-bottom: 1px solid black;
}

/* caja que contine el texto en scroll slider */

.texto-scroll{
	position: relative;
	font-family: 'Montserrat', sans-serif;
	font-size: 6vw;
	color: white;
	text-shadow: 1px 1px 2px black, 1px 1px 5px black, 1px 1px 5px blue;
	/* padding-left: 10px; */
	/* overflow-x: hidden; */
}

/* efecto visual cristal */
.efecto-blur{
	background: rgba(147, 196, 225, 0.367);
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);
}

/* .list-card{
	margin-top: 5%;
	margin-right: 20px;
}

.list-card li {
    list-style: none;
} */

/* Media screen adaptable pantallas */
@media only screen and (max-width: 820px) {

	ul{
		list-style-type: square;
	}
	
	h2{
		font-family: 'IBM Plex Sans', sans-serif;
		font-size: 8vw;	
		color: white;
		text-shadow: 1px 1px 2px black, 0 0 5px black, 0 0 5px gray;		
	}

	p,
	li,
	h3{
		font-family: 'IBM Plex Sans', sans-serif;
		font-size: 7vw;	
		color: white;
		text-shadow: 1px 1px 2px black, 0 0 5px black, 0 0 5px gray;
	}

	.fuente-satisfy{
		font-family: 'Satisfy';
		font-size: 8vw;	
		color: white;	
		text-shadow: 1px 1px 2px black, 0 0 5px black, 0 0 5px gray;
		}

	.caja1,
	.caja2{
		padding: 5px;
		margin-bottom: 20px;
		border: none;
	}

	.texto-scroll{
		font-size: 7vw;		
	}

	.icono-idioma{
		height: auto;
		margin-right: 10px;
		border-bottom: 2px solid black;
		border-right: 2px solid black;
	}
	
	.flag{
		max-height: 25px;
		padding: 1px;
	}

	.cabecera-texto{
		padding-top: 20px;
		font-size: 4.5vmax;
	}

	.icono-stop{		
		width: 45px;
	}

	#cajaCookie{
		top: 120PX;
	}

	.barStop{
		position: fixed;
		top: 50px;
		right: 0px;
		height: 70px;
		width: auto;
		display: none;
		border-radius: 50%;
		z-index: 1;
	}

	.icono-stop{
		margin-top:5px;
		/* right: 0px; */
		display: inherit;
	}

	.menu-idioma{
		position: absolute;
		/* background-color: #000; */
		top: initial;
		bottom: 5px;
		left: 10px;
		z-index: 100;
	}

	.icono-idioma{		
		height: auto;
		margin-left: 1px;
		border-bottom: 2px solid black;
		border-right: 2px solid black;
	}
	
	.flag{
		height: 20px;
		padding: 1px;
		cursor:pointer;
	}

	.cabecera-texto{
		font-size: 8vw;
	}

	.card-text{
		overflow: hidden;
		font-size: 5.5vw;
	}

	li.card-text1{
		overflow: hidden;
		font-size: 3.5vw;
		
	}

	.cajaInteriorPie1,
	.cajaInteriorPie3{
		font-size: 5vw;
	}
}