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

/*  Este diseño ya permite que se vea en móviles, tablets y desktops, paso de una a tres columnas. Luego si es necesario 
	haré un diseño que pase de 1 a 2 y de 2 a 3. Falta el footer y la información real. Se van a poner imágenes de 600px 
	de ancho por 400 0 335 de alto dependiendo de si su relación es 16:9 o 4:3. Vamos a continuar en index3.html y 
	style3.css  */

* {
	padding:0;
	margin:0;
	/*-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;*/
	box-sizing: border-box;
	}
	
/* Fonts */

/* Font Bebas Neue */
@font-face {
	font-family: "BebasNeue";
	font-display: auto;
    font-style: normal;
	font-weight:lighter;
    src: url("fonts/BebasNeue.woff") format("woff"), url("fonts/BebasNeue.ttf") format("truetype");
}

body {
	font-family: "Calibri", times, serif;
	color:#333;
	font-size: 1.15rem;
	line-height: 1.6em;
	margin: 0;
	overflow-x:hidden;
	}
	
.logo-tenerifeliz {
	background: white;
	/*background-color:#FF9;*/
	text-align: center;
	display: block;
	width: 100%;
	padding: 0px;
	z-index: 1500;
	}

.menu_bar {
	display:none;
	}
	
.flags {
	display:block;
	/*width:100%;*/
	position: fixed;
	text-align:right;
	top:90px;
	right:2%;
	background:none;
	z-index:1200;
	}
	
.flags .spain-flag {
	display: block;
	padding-top: .15em;
	padding-right: 1.9em;
	color: #fff;
	overflow: hidden;
	font-size: 22px;
	}
	
.flags .uk-flag {
	display: block;
	padding-top: .15em;
	/*padding-right: .08em;*/
	color: #fff;
	overflow: hidden;
	font-size: 22px;
	}

/* WhatsApp */

.flags .whatsapp {
	display: block;
	padding-top: .15em;
	padding-right: 4.4em;
	color: #fff;
	overflow: hidden;
	font-size: 22px;
	}	


/* Inicio Encabezado */
header {
	width: 100%;
	position:fixed;
	}

header nav {
	background:#023859;
	background:#000;
	z-index:1000;
	width:100%;
	margin:0 auto;
	padding-left: 40px;
	}

header nav ul {
	padding: 0px 0px;
	}

header nav ul li {
	display: inline-block;
	position: relative;
	text-align: left;
	padding-left: 0px;
	}

header nav ul li:hover {
	background:#606060;
	}

header nav ul li a {
	color:#fff;
	display:block;
	text-decoration:none;
	padding: .5em .6em;
	padding-left: 1em;
	}

/* Esto afecta el despliegue del submenú para que ocurra al pasar el mouse sobre el principal*/
header nav ul li:hover .children {
	display:block;
	}

/* Esto afecta a todo el submenu */
header nav ul li .children {
	display: none;
	background:#011826;
	position: absolute;
	width: 155%;
	width: 170%;
	z-index:1000;
	}

/* Esto también afecta a todo el submenú. Aqui lle agregamos la linea inferior separatoria */
header nav ul li .children li {
	display:block;
	overflow: hidden;
	width:100%;
	border-bottom: .4px solid rgba(255,255,255,.6);
	}

/* Esto no parece afectar nada */
header nav ul li .children li a {
	display: block;
	}

/* Esto no parece afectar nada tampoco. Lo cambio y no ocurre nada */
header nav ul li .children li a span {
	float: right;
	float: left;
	position: relative;
	top:40px;
	margin-right:0;
	margin-left:100px;
	}

/* Esta parte afecta la posición de la flecha en el menú*/
header nav ul li .caret {
	position: relative;
	top:3px;
	margin-left:10px;
	margin-right:0px;
	}

header nav ul li ul li {
	position: relative;
	top:0px;
	margin-left:0px;
	margin-right:10px;
}
/* Fin encabezado */

/* Inicio del main */
.main {
	padding-top:7.05em;
	width:100%;
}

.titulo-servicios {
	margin-left: 1.2em;
	margin-top: 1.4em;
	}

h1 {
	font-family: "BebasNeue";
	font-size: 1.3em;
	line-height: 1.2em;
	font-weight:100;
	font-weight:80;
	color:#006600;
	padding-left: 1.4em;
	padding-top: .5em;
	}

p {
	margin-bottom: 1.2em;
	padding-left: 2em;
	padding-right: 1em;
	margin-top: .4em;
	line-height: 1.2em;
	}
	
/* Estilos de letras*/

h2 {
	font-family: "BebasNeue";
	font-size: 1.2em;
	font-weight:100;
	color:#006600;
	margin-top:6px;
	}

h3 {
	font-family: "BebasNeue";
	font-size: 1.2em;
	font-weight:100;
	color:#006600;
	margin-top:.7em;
	padding-left: 1.5em;
	}

.titulo a {
	text-decoration:none;
	} 
	
h4 {
	font-family: "Calibri";
	font-size: 1.03em;
	font-weight:bold;	
	color:#006600;
	margin-top:.5em;
	line-height: 1.2em;
	}

h4 a {
	/*text-decoration:none;*/
	color:#006600;
	}
	
.style_02 {
	line-height: 1.3em;
	padding-bottom:.3em;
	}
	
.style_03 {
	line-height: 1.1em;
	padding-top: .7em;
	}
	
.actividad {
	width: 100%;
	height:auto;
	margin-top:.6em;
	background-color:#FFFFFF;
	padding-left: 1.6em;
	padding-right:1.6em;
	}

.imagen1 img {
	max-width: 100%;
  	height: auto;
	}

.imagen img {
	max-width: 100%;
  	height: auto;
	margin-top:5px;
	}

.texto {
	display: grid;
	line-height:1.3;
	margin-top:4px;
	}
	
.detalles {
	padding-bottom: .4em;
	}

.detalles li {
	list-style: none;
	line-height:1.2;
	}
	
.detalles1 li {
	padding-top: .4em;
	padding-bottom: .4em;
	list-style: none;
	line-height:1.2;	}

/* Fin de main */

/* Inicio  del footer */

h5 {
	font-family: "Calibri";
	font-size: 1.8em;
	font-weight:bold;
	color:#ffcc00;
	line-height:30px;
	}

h6 {
	font-family: "Calibri";
	font-size: 1.03em;
	font-weight:bold;	
	color:#006600;
	line-height: 1.2em;
	}	

.style_04 {
	font-family: "Calibri";
	font-size: 1em;
	font-weight:bold;
	color:#ffcc00;
	line-height:30px;
	}

.style_05 {
	font-family: "Calibri";
	font-size: 1.5em;
	color:#CCC;
	}

.footer {
	display:grid;
	width:100%;
	margin-top: 1.5em;
	padding-top:.5em;
	padding-bottom:2em;
	background-color:#000;
	color:#FFF;
	}
	
.titulo-footer {
	width: 160px;
	margin-top:10px;
	margin-left:10px;
	}

.contacto {
	margin-left: 2em;
	line-height:1.3;
	font-size:10px;
	}
	
address {
	padding-left: 2.5em;
	padding-top:.6em;
	font-style:normal;
	}

.redes {
	margin-left: 2em;
	margin-top: .5em;
	}
	
.enlaces {
	margin-left: 1em;
	margin-top: .5em;
	}
	
#capa_pie {
	margin-top:1.8em;
	margin-left:2em;
	margin-right:2em;
	line-height:1.2em;
	}

.style_06 {
	font-family: "Calibri";
	font-size: 14px;
	color:#CCCCCC;
	}

.style_07 {
	font-family: "Calibri";
	font-size: 1.03em;
	font-weight:bold;	
	color:#006600;
	margin-top:.5em;
	margin-left:1.9em;
	line-height: 1em;
	}

/* Media menú para móviles */
/* antes 767*/

@media screen and (max-width: 1080px) {

/* Afecta la distancia del menu desplegado a la barra de menú */	
	
body {
	padding-top:2.6em;
	font-size: 1em;
	}

.logo-tenerifeliz {
	background: white;
	text-align: center;
	top:0;
	padding-bottom:1px;
	position:fixed;
	}

/* Afecta a la posición de la barra del menú en responsive. Eliminando el display: block; desaparece toda la barra de menú 
el height me permite controlar el alto de la barra - OJO => Llevarlo a rem o em*/

	.menu_bar {
		display:block;
		width:100%;
		position: fixed;
		top:82px;
		background:#000;
		height: 47px;
		z-index: 1000;
	}

/* Afecta al botón del menú en la barra de menu. El overflow hidden no parece afactar si se quita. Las instrucciones comentadas parecen no tener efecto, se dejarán hasta el final del diseño */

	.menu_bar .bt-menu {
		display: block;
		padding-top: .15em;
		padding-left: .2em;
		color: #fff;
		overflow: hidden;
		font-size: 22px;
		}

/* Esta afecta a los elementos del menu vertical que ocuparían toda la pantalla del móvil si se pone en 100%
   - Sin el position fixed el menu vertical aparece desplegado y así se queda
   - El right 100% indispensable para que el menu horizontal desparezca y no se despliego solo el vertical
   - Con el padding left en cero, los elementos verticales quedan alineados con la parte izquierda dela pantalla 
   - No veo el efecto del overflow scroll, pero lo dejaré hasta el final del diseño
   - El height lo voy a dejar porque podría necesitarlo cuando al header la agrege el logo de la empresa*/

	header nav {
		width: 70%;
		position: fixed;
		right:100%;
		margin: 0;
		padding-left: 0px;
		top:130px;
	}

/* Afecta a los módulos del menu horizontal. En este caso les he puesto el mismo borde que tienen en el despplegado total
   - El display: block, permite que los submenùs se alineen verticalmente. 
   - El width permite que los elementos del menu vertical abarquen todo el ancho del elemento que los contiene, al igual 
	 que con sus elementos hijos, debe estar al 100% 
   - El backgorund define el coor de fondo de los elementos del menu vertical y el de sus hijos, antes del hover */
	
	header nav ul li {
		display: block;
		border-bottom: .4px solid rgba(255,255,255,.6);
		width: 100%;
		background:#011826;
	}

	header nav ul li a {
		display: block;
		padding-left: 1.5em;
	}

	header nav ul li:hover .children {
		display: none;
	}

	header nav ul li .children {
		width: 100%;
		position: relative;
	}

	header nav ul li .children li a {
		margin-left:.5em;
	}
	
	header nav ul li .caret {
		float: right;
	}
	
	header nav ul li ul li {
		background: #999;
		background: #606060;
		background: #707070;
		/*padding-left: 5px;*/
	}
	
	header nav ul li ul li:hover {
		background: #CCC;
		background: #8f8f8f;		
	}

.main {
	padding-top:5.5em;
	width:100%;
}

/* Reduccion de los tamaños tanto del titulo como del texto cuando se pasa al móvil*/

h1 {
	font-size: 1.4em;
	line-height: .6em;
	padding-left: .8em;
	}

h3 {
	font-family: "BebasNeue";
	font-size: 1.3em;
	font-weight:100;
	color:#006600;
	margin-top:.6em;
	padding-left: .9em;
	}
	
h4 {
	line-height: 1em;
	padding-bottom:.3em;
	padding-top: .3em;
	}

p {
	margin-bottom: 1.6em;
	padding-left: 1.3em;
	padding-right: 1em;
	margin-top: .8em;
	line-height: 1.3em;
	}

.titulo-servicios {
	margin-left: 1.2em;
	margin-top: 1.4em;
	}
	
.detalles {
	padding-bottom: .6em;
	}

.style_07 {
	font-family: "Calibri";
	font-size: 1.03em;
	font-weight:bold;	
	color:#006600;
	margin-top:.5em;
	margin-left:1.2em;
	line-height: 1em;
	}

/* Fin de reducción de tamaño, applicado al h1 y al p (párrafo)*/

/* Se define el Grid para despktop y tablets - Se debe buscar el breakpoint optimo y con el arrancaríamos. Luego se iría mejorando */

/* Fin del @media del menú para móviles */

}

/* Inicio del media para tablet y desktop*/

@media screen and (min-width: 48em) {
	
.contenedor-actividades {
	display:grid;
	width:90%;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2,1fr);
	grid-gap:.5em;
	align-items: start;
	justify-content: start;
	margin:auto;
	}
	
.actividad {
	padding-left: .5em;
	padding-right:.3em;
	}
	
.actividad1 {
	padding-left: .5em;
	padding-right:.3em;
	}
	
.imagen img {
	max-width: 100%;
  	height: auto;
	margin-top:.8rem;
	}

.titulo-servicios {
	margin-left: 2em;
	margin-left: 1.2em;
	margin-top: 1.4em;
	}

p {
	margin-bottom: .4em;
	}

h4 {
	line-height: 1em;
	padding-bottom:.2em;
	padding-top: .1em;
	}	
	
.style_02 {
	line-height:1.1em;
	margin-top: .1em;
	}
	
.contenedor-footer {
	display:grid;
	width:95%;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(1,1fr);
	align-items: start;
	justify-content: start;
	margin:auto;
	}
	
#capa_pie {
	margin-top:1.8em;
	margin-left:8em;
	margin-right:8em;
	line-height:1em;
}
	
}	

/* Fin del @media para tablets y desktops */

/* Ajuste para titulo_servicios y h4 */

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

.titulo-servicios {
	margin-left: 2em;
	margin-top: 1.4em;	
}

h4 {
	padding-top: 0em
	}

}