/* ESTILOS WEB INSECTOPIA */
/* Desarrollado por Víctor Herrera. Línea Diseño https://www.linea-online.es */

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

html{background-color:#ffffff;}

body {
	margin:0px;
	padding:0px;
	font-family: "Inter", sans-serif;
	color:#fff;
	font-weight:500;
	line-height: 1.8;
	font-size:22px;
}

/* Cabecera */

header{
	height:170px;
	width:1500px;
	margin:auto;
	color:#000;
	background-color:#fff;
}

#logo, #prox, #mail{
	width:33%;
	float:left;
	margin-top:40px;
}

#prox{
	margin-top:90px;
	color:#000;
	font-size:30px;
	font-weight:800;
	text-align:center;
}

#mail{float:right; margin-top:105px; text-align:right;}

a{
	color:#000;
	text-decoration:none;
	-webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}
a:hover{
	color:#B9C25A;
	-webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}

/* FRANJA 1 SLIDER BIENVENIDA */

#bienvenida{
	width:100%;
	height:685px;
	background: url(imgs/insectopia_slider_bienvenida.jpg) no-repeat center top; 
	-webkit-background-size: fixed;
	-moz-background-size: fixed;
	-o-background-size: fixed;
	background-size: fixed;
}

#bienvenida h1{
	width:30%;
	padding-top:270px;
	margin-left:900px;
	text-align:center;
	font-size:45px;
	line-height:55px;
}

/* 3 FRANJAS INFO */

#3_franjas{width:100%;}

#f1_energia, #f2_salud, #f3_sabor{
	width:100%;
	height:680px;
	background: url(imgs/insectopia_fuente_energia.jpg) no-repeat center top; 
	-webkit-background-size: fixed;
	-moz-background-size: fixed;
	-o-background-size: fixed;
	background-size: fixed;
	margin-top:-30px;
}

#f2_salud{background: url(imgs/insectopia_formula_saludable.jpg) no-repeat center top;}
#f3_sabor{background: url(imgs/insectopia_mejor_sabor.jpg) no-repeat center top;}

.parrafo_franja{
	width:32%;
	padding-top:140px;
	padding-left: 220px;
}

.parrafo_franja h2{font-size:45px; line-height:45px;}

#f2_salud .parrafo_franja{padding-top:89px;}

/* FRANJA BARRITAS */

#franjas_barritas{
	width:1500px;
	height:950px;
	margin:auto;
	background: url(imgs/insectopia_barritas.png) no-repeat 0px 250px; 
}

#franjas_barritas h1, #franjas_nosotros h1{
	padding-top:70px;
	width:50%;
	font-size:45px;
	line-height:55px;
	color:#B9C25A;
}

.info_barritas{
	width:36%;
	margin-left:750px;
	color:#000;
	font-size:15px;
}

.info_barritas h3{font-size:25px; color:#B9C25A; margin-bottom:-10px;}

.info_barritas:nth-child(3){margin-left:1020px;}
.info_barritas:nth-child(4){margin-left:820px; padding-top:10px;}


/* FRANJA SOBRE NOSOTROS */

#franjas_nosotros{
	width:100%;
	height:860px;
	background: url(imgs/insectopia_fondo_nosotros.jpg) no-repeat center top; 
	-webkit-background-size: fixed;
	-moz-background-size: fixed;
	-o-background-size: fixed;
	background-size: fixed;
}

#franjas_nosotros h1{padding-left:220px;}

#info_nosotros{
	width:40%;
	padding-left:220px;
	font-size:18px;
}

#info_nosotros h3{color:#B9C25A;font-size:30px;}
#info_nosotros h5{font-size:20px; line-height:24px;}

.img-lista{
    padding-left: 50px;
	list-style: none;
	background-image: url("imgs/insectopia_icon_nosotros.png");
	background-position: 0 0;
	background-size: 35px 41px;
	background-repeat: no-repeat;
}

ul {margin-left:-30px; width:85%;}

ul li{
	font-size:15px;
	height:41px;
	padding:5px 0px;
	line-height:18px;
}


/**********************************/

/* RESPONSIVE PC pantalla 1500px*/

@media only screen and (max-width: 1500px) {
	
	header{
		width:1100px;
	}

	#bienvenida h1{
		width:45%;
		margin-left:580px;
	}

	.parrafo_franja{
		width:45%;
		padding-top:120px;
		padding-left:150px;
	}
	
	#franjas_barritas{
		width:1300px;
		background-size:800px 553px;
	}

	#franjas_barritas h1, #franjas_nosotros h1{
		padding-top:50px;
		padding-left:150px;
		width:60%;
		font-size:40px;
		line-height:50px;
	}

	.info_barritas{width:42%;margin-left:600px;}
	.info_barritas:nth-child(3){margin-left:780px; width:35%;}
	.info_barritas:nth-child(4){margin-left:600px; margin-top:-10px;}
	
	
	#franjas_nosotros{height:860px;}
	#franjas_nosotros h1{padding-left:150px;}
	#info_nosotros{width:45%;padding-left:150px;}
	#info_nosotros p{line-height:28px;}

	.img-lista{
		padding-left: 50px;
		list-style: none;
		background-image: url("imgs/insectopia_icon_nosotros.png");
		background-position: 0 0;
		background-size: 35px 41px;
		background-repeat: no-repeat;
	}

	ul {margin-left:-30px; width:85%;}

	ul li{
		font-size:15px;
		height:41px;
		padding:5px 0px;
		line-height:18px;
	}

}


/**************************/

/*RESPONSIVE *Mobile 768px HORIZ y 480px VERT*/


@media screen and (max-width: 1100px) and (min-width: 300px) {
	
		
	header{
		width:100%;
		height:220px;
		margin:auto;
	}
	
	#logo, #prox, #mail{
		width:80%;
		text-align:center;
		float:none;
		margin-top:0px;
		margin-left:10%;
	}

	#logo{margin-top:50px;}

	#bienvenida{
		background-size:2200px 785px;
		height:620px;
	}

	#bienvenida h1{
		width:60%;
		margin:auto;
		font-size:45px;
		padding-top:250px;
		padding-left:260px;
		text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
	}

	.parrafo_franja{
		width:90%;
		padding-top:370px;
		padding-left:60px;
		font-size:30px;
	}
	
	#f1_energia, #f2_salud, #f3_sabor{
		width:100%;
		height:800px;
		background: url(imgs/insectopia_fuente_energia.jpg) no-repeat right top; 
		-webkit-background-size: 1000px 354px;
		-moz-background-size: 1000px 354px;
		-o-background-size: 1000px 354px;
		background-size: 1000px 354px;
		margin-top:-10px;
		background-color:#5389af;
	}
	
	#f2_salud .parrafo_franja{padding-top:400px;}
	
	#f2_salud{background: url(imgs/insectopia_formula_saludable.jpg) no-repeat right top; background-size: 1000px 354px; background-color:#788339; height:970px;}
	#f3_sabor{background: url(imgs/insectopia_mejor_sabor.jpg) no-repeat right top; background-size: 1000px 354px; background-color:#bc96a8; height:830px;}
	
	.parrafo_franja h2{font-size:50px; line-height:55px;}
	
	
	#franjas_barritas{
		width:100%;
		height:2400px;
		background-position:60px 200px;
		background-size:900px 623px;
	}

	#franjas_barritas h1, #franjas_nosotros h1{
		padding-top:50px;
		padding-left:60px;
		width:90%;
		font-size:50px;
		line-height:55px;
	}

	.info_barritas h3{font-size:40px;}

	.info_barritas{
		width:90%;
		margin-left:60px;
		margin-top:600px;
		font-size:30px;
		}
	.info_barritas:nth-child(3){margin-left:60px; width:90%; margin-top:50px;}
	.info_barritas:nth-child(4){margin-left:60px; margin-top:-10px;}
	
	#franjas_nosotros{
		height:2400px;
		background: url(imgs/insectopia_fondo_nosotros.jpg) no-repeat right top; 
		background-size: 1700px 761px;
		background-color:#4c5059;
	}
	
	#franjas_nosotros h1{padding-top:800px;}
	
	#franjas_nosotros h1{padding-left:60px;}
	#info_nosotros{width:90%;padding-left:60px;}
	#info_nosotros p{line-height:50px; font-size:30px;}
	#info_nosotros h3{font-size:40px;}
	#info_nosotros h5{font-size:35px; line-height:45px; margin-top:80px;}
	
	ul {margin-left:-30px; width:90%;}

	ul li{
		font-size:30px;
		height:70px;
		padding:0px 0px 70px 0px;
		line-height:40px;
	}


	
	
}