/* CSS web Marine - Helados artesanos */
*{padding: 0;margin: 0;}
/*Estilos*/
/* Azul: #221C35 */
/* Marron: #C0A16F */
body{
	overflow-x: hidden;
}
a,p{
	color: #221C35;
	font-family: Poppins;	
}
a{
	font-size: 16px;
	text-decoration: none;
	text-align: center;
}
h2, h3{
	color: #221C35;
	font-family: Oswald;
	font-weight: 400;	
}
h2{
	text-align: center;
	font-size: 35px;
}
h3{
	font-size: 60px;
	text-align: right;
}
p{
	text-align: center;
	font-size: 14px;
}
.left{
	text-align: left;
}
.blanco{
	color: white;
}
.rtoranzo{
	position: absolute;
	top: 25px;
	left: 15px;
	
}
a.r15toranzo{
	background-color: #006f99b5;
	border-radius: 3px;
	padding: 10px 20px;
}

/*_________________Navegador________________*/

.enlaces span{
	padding: 15px;
}
.enlaces{
	margin-top: 70px;
	display: flex;
	justify-content: space-between;
	min-width: 420px;
}
.navegador{
	background-color: #ebecf0;
	display: flex;
	justify-content: center;
	/*position: sticky;*/
}
.fila1{
	display: flex;
	justify-content: center;
	margin: auto;
	width: 75%;
}
.logonavegador img{
	width: 150px;
	padding: 30px 50px;
}
	.logonavegador img:first-child{
		display: block;
	}
	.logonavegador img:last-child{
		display: none;
	}
.navegador .enlaces a {
	position: relative;
}
.navegador .enlaces a::after{
	height: 1px;
	width: 0%;
	content: '';
	position: absolute;
	top: 35px;
	left: 0;
	background-color: #221C35;
	transition: 0.6s;
}
.navegador .enlaces span:hover a::after{
	width: 100%;
}
.navegador .fila1 .enlaces span.subrayado a::after{
	width: 100%;
}

/*________________Seccion 1________________*/

.seccion1, .seccion11, .seccion12{
	background-color: #ebecf0;
	box-shadow: 0px 10px 59px 0px rgba(11, 82, 90, 0.19);
	display: flex;
	justify-content: center;
}
.seccion1{
	background-image: url('img/artesanos.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}
.seccion11{
	align-items: center;
	position: relative;
	background-image: url('img/texturemarine2.png');
	flex-direction: column;
	overflow-x: hidden;
}
.imagen1{
	margin-bottom: 100px;
	margin-top: 30px;
}	
	.imagen1 img:nth-of-type(1){
		display: none;
	}
.imagen1 img, .imagen2 img, .imagen23 img{
	width: 100%;
}
.fondo2{
	width: 100%;
	display: flex;
	justify-content: space-between;
	background-image: url('img/heladosvector2.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
}
.fondo3{	
	display: flex;
	justify-content: center;
	width: 35vh;
	padding: 20px;
	margin-bottom: 50px;
	margin-top: 50px;
}		
		.eligefrappe{
			position: absolute;
			background-color: white;
			/*height: 40%;*/
			width: 30%;
			box-shadow: 0px 10px 59px 0px rgba(11, 82, 90, 0.19);
			right: -35%;
			transition: 1s;
			z-index: 4;
		}
		.eligefrappe.mostrar11{
			right: 0;
			transition: 1s;
		}
		.eligefrappe.mostrar h2{
			min-width: 300px;
		}
		.eligefrappe.mostrar .boton2{
			width: initial;
			max-width: 200px;
		}
.none{
	position: absolute;
	top: 20%;
	left: 35%;
	display: none;
}
.none.mostrar{
	display: block;
	font-size: 14px;
	color: white;
}
.sipe.ocultar{
	opacity: 0;
}
.novedad{
	position: absolute;
	margin: auto;
	width: 35%;
	bottom: 220px;
}
.novedad img, .nove2 img{
	width: 100%;
}
.nove2{
	opacity: 0;
	position: absolute;
	margin:auto;
	width: 35%;
	bottom: 220px;
	z-index: 2;
	transition: 1s;
}
.nove2:hover{
	opacity: 1;
}
		.relativo{
			position: absolute;
			height: 100%;
			width: 100%;
			/*top: 0;
			left: 0;*/
		}
		.cor1, .cor2{
			position: absolute;
			top: 0px;
			/*left: 0;
			animation-delay: 1s;*/
			height: 100%;
			width: 100%;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center center;
			/*transition: 1s;*/
			animation-duration: 4s;
			animation-iteration-count: 1;
			animation-direction: alternate;
			animation-timing-function: linear;
		}
		.cor1{
			background-image: url('img/cortina1.png');
			animation-name: cortinillaA;
			left: -100%;
		}
		.cor2{
			background-image: url('img/cortina2.png');
			animation-name: cortinillaB;
			left: 100%;
		}
		@keyframes cortinillaA{
			0%{left: 0;}
			25%{left: 0;}
			100%{left: -100%;}
		}
		@keyframes cortinillaB{
			0%{left: 0;}
			25%{left: 0;}
			100%{left: 100%;}
		}

/*__________________Seccion 2_________________*/

.seccion2, .seccion21{
	background-color: #ebecf0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 700px;	
	background-repeat: no-repeat;
	background-position: center;
}
.seccion21{
	background-image: url('img/caramelo2.png');
	background-size: contain;
}
.seccion2{
	background-image: url('img/heladosvector2.png');
	background-size: cover;
	
}
.fila2{
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}
.fila2 img{
	width: 270px;
	padding: 20px;
}
.fila2 h2{
	padding: 0 40px 30px 40px;
}
.fila2 p{
	padding: 0 30px;
}
.boton1, .boton2{
	margin-top: 40px;
}
.boton1, .boton2, .boton11{
	text-align: center;
	padding: 8px 30px;
	border: 1px;
	background-color: #221C35;
	transition: 0.5s;
}
.boton1 a, .boton2 a, .boton11 p{
	color: white;
	font-size: 14px;
}
.boton1:hover, .boton2:hover, .boton11:hover{
	background-color: #547DA7;
}
.boton11{
	margin-bottom: 50px;
	position: relative;
}
		.pruebacaramel{
			position: absolute;
			top: 0;
			left: 10%;
			transition: 2s;
			height: 0;
		}
		.pruebacaramel img{
			background-size: cover;
			height: 100%;
		}
		.pruebacaramel.caer{
			height: 100%;
		}

/*_______________Seccion 3_______________*/

.seccion3{
	background-color: #ebecf0;
	display: flex;
	justify-content: center;
	height: 800px;
}
.izquierda, .derecha{
	width: 500px;
	height: 500px;
	margin-top: 100px;
	box-shadow: 0px 10px 59px 0px rgba(11, 82, 90, 0.19);
	overflow: hidden;
}
.derecha img{
	width: 100%;
	transition: 0.6s;
}
.izquierda{
	background-color: white;
	display: flex;
	justify-content: center;
	align-items: center;
}
.derecha img:hover{
	transform: scale(1.1);
}
.cuadrado3{
	padding: 60px;
}
.cuadrado3 p{
	margin-bottom: 20px;
	font-size: 15px;
}
.boton2{
	width: 20%;
}

/*________________Seccion 4________________*/

.seccion4, .seccion41, .seccion42{
	height: 60vh;
	width: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.seccion4{
	background-image: url('img/tropical.jpg');	
}
.seccion41{
	background-image: url('img/scroll3.jpg');
}
.seccion42{
	background-image: url('img/scroll61.jpg');	
}
.conos h3, .boton3, .boton4{
	margin-right: 100px;
}
.conos{
	width: 60%;
}
.boton3, .boton4{
	width: 120px;
	margin-left: auto;
	margin-top: 40px;
	text-align: center;
	padding: 8px 30px;
	border: 1px;
	transition: 0.5s;
}
.boton3{
	background-color: white;
}
.boton3:hover, .boton4:hover{
	background-color: #547DA7;
}
.boton3 a{
	font-size: 14px;
}
.boton4{
	background-color: #221C35;
}

/*________________Seccion 5 y 6_______________*/

.seccion5{
	background-color: #ebecf0;
	display: flex;
	justify-content: center; 
}
.linea11{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 70px;
}
.linea11 img{
	width: 70%;
	padding: 10px;
}
.seccion6{
	background-color: #ebecf0;
	display: flex;
	flex-direction: column;
	align-items: center;

}
.absolutos{
	display: flex;
	justify-content: center;
	position: relative;
	top: -60px;
}
.box1{
	width: 25%;
	margin: 0 10px;
	position: relative;
}
.box1 img{
	width: 100%;
	box-shadow: 0px 10px 59px 0px rgba(11, 82, 90, 0.19);
}
.frase{
	max-width: 800px;
	padding: 30px 100px 100px 100px;
}
.frase p{
	padding-top: 20px;
}
.opacidad{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 99%;
	/*height: 0;*/
	background-color: black;
	opacity: 0;
	/*background-color: rgba(255, 210, 102, 0.8);*/
	transition: 1s;
}
.box1:hover .opacidad, .op7:hover .opacidad{
	/*height: 100%;*/
	opacity: 0.6;
}
.opacidad.mostrar{
	opacity: 0.6;
}
.op7{
	position: relative;
	transition: 1s;
}
.op6{
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	padding: 50px;
}
h4{
	font-weight: 400;
	font-family: Poppins;
	font-size: 20px;
	color: white;
}

/*__________sabores__________*/

.sabores{
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	margin: 100px auto;
}
.rowsabor{
	display: flex;
	justify-content: space-around;
}
.boxsabor{
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	width: 300px;
	margin-bottom: 50px;
	transition: 1s;
	position: relative;
	bottom: 0;
}
.boxsabor img, .vuelta img{
	width: 100%;
}
.padretruco-s{
	position: relative;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}
.vuelta{
	backface-visibility: hidden;
	transition: 1s;
	position: absolute;
	bottom: 0;
	/*border-top: 1px solid grey;*/
	opacity: 0;
}
.padretruco-s:hover .boxsabor{
	transform: scale(1.1);
	bottom: 20px;
}
.padretruco-s:hover .vuelta{
	bottom: 20px;
	opacity: 1;
}
.vuelta p{
	font-size: 18px;
	padding-top: 10px;
}
.lineasabor{
	position: absolute;
	bottom: 0;
	transition: 1s;
	display: flex;
	justify-content: center;
	height: 1px;
	width: 100%
}
.lineasabor span{
	bottom: 40px;
	position: absolute;
	width: 0;
	left: 50%;
	background-color: grey;
	height: 1px;
	transition: 1s;
}
.padretruco-s:hover .lineasabor span{
	bottom: 60px;
	opacity: 1;
	width: 80%;
	left: 10%;
}

/*_________________Seccion 7__________________*/

.seccion7{
	background-color: #ebecf0;
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 200px 0;
	height: 100vh;
}
.fila7{
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	transition: 1s;
}
.box7{
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	padding: 10px;
	box-sizing: border-box;
	transition: 2s;
}
.box7 img{
	width: 100%;
	/*box-shadow: 0px 10px 59px 0px rgba(11, 82, 90, 0.19);*/
}
.fila7:nth-of-type(1){
	align-items: flex-end;
}
.fila7:nth-of-type(2){
	align-items: flex-start;
}
.box7:nth-of-type(1){
	margin-bottom: 100px;
	margin-right: 200px;
}
.box7:last-of-type{
	margin-left: 200px;
	margin-top: 100px;
}
.seccion7:hover .box7{
	margin: initial;
}

/*__________________Footer___________________*/

.footer1{
	background-color: #222;
	display: flex;
	justify-content: center; 
	flex-direction: column;
	align-items: center;
	padding: 60px;
}
.redes{
	display: flex;
	justify-content: center;
	flex-direction: row;
	margin: auto;	
}
.sociales{
	width: 40px;
	margin-top: 15px;
	padding: 0 5px;
	position: relative;
}
.sociales img{
	width: 100%;
}
.sociales img:nth-child(1){
	opacity: 0;
	transition: 0.2s;
	position: absolute;
	width: 40px;
}
.sociales img:nth-child(1):hover{
	opacity: 1;	
}
.footer1 p{
	font-size: 15px;
	color: grey;
	letter-spacing: 0.8;
}
.footer2{
	background-color: #222;
	border-top: 1px solid grey;
	padding: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.footer2 p, .footer2 a{
	font-size: 13px;
	color: grey;
}
.boxfoot a{
	padding: 12px 8px;
}
.boxfoot a:hover{
	color: #D2D9D9;
}
/*#fdcc52  amarillo*/
/*ebecf0  gris clarito*/

			.burger{
				display: none;
				z-index: 6;
			}
			.padretruco{
				display: flex;
				flex-direction: column;
			}
			.item1, .item2, .item3{
				width: 40px;
				height: 3px;
				border-radius: 50px;
				margin: 5.5px;
			}
			.item1{
				transform-origin: left;
				transition: 1s;
				background-color: #221C35;
			}
			.item2{
				background-color: #C0A16E;
				transition: 0.5s;
			}
			.item3{
				transform-origin: left;
				transition: 1s;
				background-color: #C0A16E;
			}
			.padretruco.animacion .item1{
				transform: rotate(45deg);
			}
			.padretruco.animacion .item2{
				opacity: 0;
			}
			.padretruco.animacion .item3{
				transform: rotate(-45deg);
			}
			/*________Desplegable________*/
			.degradado{
				/*position: absolute;*/
				top: -100vh;
				right: -100vh;
				background-image: url('img/degradado.png');
				height: 100vh;
				width: 100%;
				background-size: cover;
				background-repeat: no-repeat;
				position: fixed;
				transition: 1s;
				opacity: 0;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				z-index: 5;
			}
			.degradado.mostrar{
				top: 0;
				right: 0;
				opacity: 1;
			}
			.desp1{
				padding: 20px;
				border-bottom: 1px solid white;
			}
			.desp1:last-child{
				border-bottom: none;
			}
			.desp1 a{
				font-size: 17px;
				transition: 0.5s;
			}
			.desp1 a:hover{
				color: white;
			}

.fila1.fixed{
	padding-left: 100px;
	padding-right: 100px;
	position: fixed;
	z-index: 5;
}

/*_____________________MediaQ_____________________*/
@media(max-width: 1150px){
.rtoranzo{display: none;}


	.enlaces{
		display: none;
	}
	.burger{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-right: 8%; 
	}
	.logonavegador img:nth-of-type(1){
		display: none;
	}
	.logonavegador img:nth-of-type(2){
		display: block;
		width: 180px;
		padding: initial;
		padding-top: 30px;
		padding-bottom: 30px;
	}
	.logonavegador{
		padding-left: 8%;
	}
	.fila1{
		justify-content: space-between;
		width: 100%;
		/*padding-left: 100px;
		padding-right: 100px;
		position: fixed;*/
		background-color: transparent;
		box-shadow: 0px 10px 59px 0px rgba(11, 82, 90, 0.19);
	}
	.seccion1{
		background-image: initial;
	}
	.seccion3{
		flex-direction: column;
		align-items: center;
		height: initial;
		position: relative;
	}
	.derecha{	
		margin-bottom: 100px;
		/*position: absolute;
		top: 50%;
		left: 50%;*/
	}
	.izquierda, .derecha{
		margin-top: 0;
	}
	.boton2{
		width: initial;
	}
	.nove2, .novedad{
		width: 50%;
	}
	.seccion7{
		height: 80vh;
	}

	/*____Sabores___*/
	.rowsabor{
		flex-wrap: wrap;
		/*margin:0 117px;*/
	}
	/*___________Scrolls 2 y 3_______*/
	.conos h3{
		font-size: 40px;
	}
	.seccion21{
		background-size: cover;
	}
}

@media(max-width: 480px){

	.imagen2:nth-of-type(2){
		display: none;
	}
	.imagen2:nth-of-type(1){
		margin-top: -40px;
	}
	.imagen1 img:nth-of-type(2){
		display: none;
	}
	.imagen1 img:nth-of-type(1){
		display: block;
	}
	.imagen1{
		margin-bottom: initial;
		margin-top: 40px;
	}
	.izquierda{
		margin-top: 0;
	}
	.derecha, .izquierda{
		width: 70%;
		height: initial;
	}
	.cuadrado3{
		padding: 19px;
	}
	.cuadrado3 .boton2{
		margin-top: 25px;
	}
	.cuadrado3 h2{
		font-size: 25px;
	}
	.derecha img{
		margin-bottom: -4px;
	}
	.boton2{
		width: initial;
	}
	.conos h3{
		font-size: 30px;
	}
	.seccion41, .seccion42{
		background-position: 40%;
	}
	.conos h3, .boton3, .boton4 {
    margin-right: 50px;
	}
	.absolutos{
		flex-direction: column;
		align-items: center;
	}
	.box1{
		width: 70%;
		margin: 12px 0;
	}
	.seccion4, .seccion41, .seccion42{
		background-attachment: static;
		height: 70vh;
	}
	.frase{
		max-width: 800px;
		padding: 30px 50px 100px 50px;
	}

	/*___________Nuevos productos_____*/
	.seccion7{
		padding: 50px 0;
		height: initial;
	}
	.box7:nth-of-type(1), .box7:last-of-type{
		margin: initial;
	}
	.fila7:nth-of-type(1), .fila7:nth-of-type(2){
		align-items: center;
		flex-direction: column;
	}
	.seccion21{
		background-size: cover;
	}
	.eligefrappe{
		width: 80%;
		right: -80%;
	}
	.nove2, .novedad{
		width: 80%;
	}	
	.nove2.mostrar{
		opacity: 1;
	}
	/*____________Sabores____________*/
	.vuelta{
		opacity: 1;
		bottom: 30px;
	}
	.padretruco-s{
		margin-bottom: 15px;
	}
	.padretruco-s.mostrar .boxsabor{
		transform: scale(1.1);
		bottom: 20px;
	}
	.padretruco-s.mostrar .vuelta{
		bottom: 20px;
	}
	.padretruco-s.mostrar .lineasabor span{
		bottom: 60px;
		opacity: 1;
		width: 80%;
		left: 10%;
	}
	.padretruco-s.mostrar .boxsabor,  .padretruco-s.mostrar .vuelta, .padretruco-s.mostrar .lineasabor span {
		display: flex;
	}

}