/*

	rojo  			ea1c24
	gris claro 		b8b8b8
	gris oscuro 	282828
	

*/
@font-face {
	font-family: 'Norican-Regular';
	src: url('fonts/Norican-Regular.eot');
	src: local('☺'), url('fonts/Norican-Regular.woff') format('woff'), url('fonts/Norican-Regular.ttf') format('truetype'), url('fonts/Norican-Regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'AlexBrush-Regular';
	src: url('fonts/AlexBrush-Regular.eot');
	src: local('☺'), url('fonts/AlexBrush-Regular.woff') format('woff'), url('fonts/AlexBrush-Regular.ttf') format('truetype'), url('fonts/AlexBrush-Regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'AgendaMedium';
	src: url('fonts/AgendaMedium.eot');
	src: local('☺'), url('fonts/AgendaMedium.woff') format('woff'), url('fonts/AgendaMedium.ttf') format('truetype'), url('fonts/AgendaMedium.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}


* {
	margin: 0;
	padding: 0;
}

html {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}


body {
	position: relative;
	display: block;
	font-family: 'AgendaMedium', Arial, Verdana !important;
	font-size: 18px;
	height: 100%;
	width: 100%;
}

#bgall {
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: #282828 url(imagen/bgloop.png) center top;
	z-index: -1;
}

.pin1 {
	position: absolute;
	width: 1px;
	top: 160%;
	left: 5px;
	z-index: 1000;
}

.pin2.promocion {
	top: 50%;
	height: 100%;
}

.pin2 {
	position: absolute;
	width: 1px;
	top: 200%;
	left: 15px;
	z-index: 1000;
}

.pin1, .pin2 {
	background: none;
}

.titulo {
	display: block;
	font-family: 'Norican-Regular', Arial, Verdana !important;
	font-size: 50px;
	color: #eb1c24;
	line-height: 1;
	margin-bottom: 20px;
}

.subtitulo {
	font-family: 'AlexBrush-Regular', Arial, Verdana !important;
	display: block;
	text-align: center;
	padding: 10px;
	font-size: 30px;
	color: #ffffff;
	line-height: 1;
	text-shadow: rgba(0,0,0, 1) 4px 4px 6px;
}

#top {
	position: relative;
	display: block;
	width: 100%;
	height: 110vh;
}

#top .etiqueta {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	display: block;
	max-height: 80%;
	transition: all 2s ease;
	z-index: 100;
}

.etiqueta-top {
	position: fixed;
	right: 2%;
	display: block;
	max-height: 22%;
	transition: all 2s ease;
	z-index: 100;
	margin-top: -50%;
}

#top .subtitulo {
	width: 90%;
	position: absolute;
	bottom: 15%;
	left: 50%;
	transform: translateX(-50%);
}

#donfabian {
	display: block;
	padding: 15% 10% 10% 10%;
	width: 80%;
	min-height: 75%;
	background: rgba(0,0,0, 0.7);
	color: #eaeaea;
	text-align: justify;
	overflow: hidden;
}

#donfabian .foto {
	width:70%;
	max-width: 370px;
	float: right;
	margin: 0 0 50px 10%;
	border-radius: 100vw;
}

#origen {
	position: relative;
	display: block;
	padding: 10% 20%;
	width: 60%;
	min-height: 80%;
	background: rgba(40,40,40, 0.85);
	background: #282828;
	color: #eaeaea;
	text-align: justify;
	z-index: 10;
	overflow: hidden;
}

#origen .bgorigen {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
}


#contacto {
	display: block;
	padding: 7% 10% 7% 10%;
	width: 80%;
	min-height: 80%;
	background: rgba(0,0,0, 0.5);
	overflow: hidden;
}

form {
	display: block;
	width: 80%;
	max-width: 400px;
	margin: 20px auto 4% auto;
	padding: 3%;
}

form input[type="text"], form input[type="number"], form textarea {
	display: block;
	width: 96%;
	padding: 5px;
	margin: 5px 0;
	background: #282828;
	color: #ea1c24;
	border: 0px;
	font-size: 15px;
}

form textarea {
	height: 50px;
}


form input[type="submit"] {
	display: block;
	width: 100px;
	padding: 10px;
	background: #ea1c24;
	color: #ffffff;
	border: 0px;
	
	-webkit-box-shadow: 2px 1px 5px 2px rgba(0,0,0, 0.2);
	   -moz-box-shadow: 2px 1px 5px 2px rgba(0,0,0, 0.2);
		    box-shadow: 2px 1px 5px 2px rgba(0,0,0, 0.2);
}

.telefono {
	display: block;
	padding: 10px 0;
	margin: 2% auto;
	color: #ffffff;
	text-align: center;
	font-size: 24px;
}

.redes {
	display: block;
	text-align: center;
	background: #282828;
	padding: 1%;
	border-radius: 100vw;
	margin-top: 2%;
}

.botonred {
	display: inline-block;
	width: 44px;
	height: 44px;
	border-radius: 100vw;
	margin: 0; 
	padding: 0;
	vertical-align: bottom;
}

.botonred.fb {  background: #ea1c24 url(imagen/icon-wh-fb.png) center center / 90% no-repeat; }
.botonred.ig {  background: #ea1c24 url(imagen/icon-wh-ig.png) center center / 90% no-repeat; }
.botonred.tw {  background: #ea1c24 url(imagen/icon-wh-tw.png) center center / 90% no-repeat; }
.botonred.wa { background: #ea1c24 url(imagen/icon-wh-wa.png) center center / 90% no-repeat; }
.botonred.tel { background: #ea1c24 url(imagen/icon-wh-tel.png) center center / 90% no-repeat; }

a.red {
	display: inline-block;
	width: 44px;
	height: 44px;
	margin: 0 2px; 
	padding: 0;
	color: rgba(0,0,0, 0);
	text-decoration: none;
	text-align: center;
	vertical-align: bottom;
}

#contacto .llamar {
	display: inline-block;
	padding: 10px 15px;
	background: #ea1c24;
	border-radius: 100vw;
	font-size: 20px;
	text-decoration: none;
	color: #fff;
}

#footer {
	position: relative;
	display: block;
	padding: 30px 0 10px 0;
	text-align: center;
	color: #1b1b1b;
	min-height: 20%;
	background: #ea1c24;
	z-index: 5;
}

#footer a {
	color: #fff;
}

#footer .logo {
	display: inline-block;
	max-height: 150px;
}

#footer .franja {
	display: block;
	height: 10px;
	margin-top: 20px;
	background: #ffffff;
}

.promo_head {
	background: rgba(228, 3, 46, 0.6);
}

.promo_head, .promo_form {
	position: relative;
	color: #fff;
	margin: 0;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 5;
}

.promo_form {
	background: #000;
	background: rgba(0,0,0, 0.7);
	
	-webkit-box-shadow: 2px -41px 50px 2px rgba(0,0,0, 0);
	   -moz-box-shadow: 2px -41px 50px 2px rgba(0,0,0, 0);
		    box-shadow: 2px -41px 50px 2px rgba(0,0,0, 0);
}

#bgform {
	position: absolute; 
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0.3;
	background: rgba(0,0,0, 0.9) url(imagen/bg_cafe_form.jpg) center center / cover no-repeat;
	background: none;
	z-index: 0;
	
			filter: blur(8px);
	-webkit-filter: blur(8px);
}

.promo_form form {
	position: inherit;
	display: inline-block;
	margin-top: 10%;
	z-index: 2;
	background: rgba(0,0,0, 0.7);
	border-radius: 50px 0;
	vertical-align: top;
}


.promo_form form .titulo {
	font-size: 46px;
}

.promo_form form input {
	padding: 10px;
}

.promo_form .empaque_cafe {
	position: relative;
	width: 50%;
	height: 100%;
	display: inline-block;
	vertical-align: top;
	z-index: 5;
}

.promo_form .empaque_cafe img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	height: 75%;
	display: block;
}

.promo_form .empaque_cafe .gramos {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 88%;
	color: #888;
}

.etiqueta-top.promocion {
	max-height: 30%;
}

.promo_head .banner_envios1 {
	background: url(imagen/promos/bolsas_ed.png?6) center center / 100% no-repeat;
	display: block;
	position: fixed;
	width: 37%;
	padding-bottom: 37%;
	top: 0;
	right: 50%;
	z-index: 1;
}


.promo_head .banner_envios2 {
	background: url(imagen/promos/envios_ed.png?6) center center / 100% no-repeat;
	display: block;
	position: fixed;
	width: 37%;
	padding-bottom: 37%;
	top: 0;
	left: 50%;
	z-index: 1;
}


.promo_head .banner_envios3 {
	background: url(imagen/promos/sombras_ed.png?6) center center / 100% no-repeat;
	display: block;
	position: fixed;
	width: 37%;
	padding-bottom: 37%;
	top: 0;
	right: 51%;
	z-index: 0;
}

.info_condiciones {
	position: absolute;
	top: 10px;
	width: 70%;
	left: 1%;
	color: #ccc;
	font-size: 15px;
	z-index: 5;
}

.promo_head .subtitulo {
	position: absolute;
	bottom: 150px;
	left: 50%;
	transform: translateX(-50%);
}


#avisos-legal {
	display: block;
	margin: 10% auto;
	width: 96%;
	max-width: 750px;
	text-align: justify;
	color: #fff;
}

#avisos-legal b {
	color: #ea1c24;
}


#empaque {
	display: block;
	width: 100%;
	text-align: center;
}


#empaque .empaque_cafe {
	position: relative;
	width: 100%;
	height: 110vh;
	display: block;
	vertical-align: top;
	z-index: 5;
	background: rgba(234,28,36, 0.7);
}

#empaque .empaque_cafe img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	height: 55%;
	display: block;
	padding: 2% 5%;
}

#empaque .empaque_cafe .gramos {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 88%;
	color: #ffffff;
}




/* Chevron */
.solicitaahora {
	z-index: 10;
  position: absolute;
  bottom: 10px;
  left: 50%;
  padding: 10px 2%;
  transform: translateX(-50%);
  background: #000000;
  border-radius: 800px;
  color: #fff;
  text-align: left;
  font-size: 20px;
  cursor: pointer;
  text-align: center;
  z-index: 50;
}

.scroll-bajar {
  position: absolute;
  bottom: 80px;
  left: 50%;
  width: 40px;
  height: 30px;
  transform: translateX(-50%);
  z-index: 50;
}

.chevron {
  position: absolute;
  width: 40px;
  height: 8px;
  opacity: 0;
  transform: scale3d(2, 2, 2);
  animation: move 3s ease-out infinite;
}

.chevron:first-child {
  animation: move 3s ease-out 1s infinite;
}

.chevron:nth-child(2) {
  animation: move 3s ease-out 2s infinite;
}

.chevron:before,
.chevron:after {
  content: ' ';
  position: absolute;
  top: 0;
  height: 100%;
  width: 51%;
  background: #ffffff;
}

.chevron:before {
  left: 0;
  transform: skew(0deg, 30deg);
}

.chevron:after {
  right: 0;
  width: 50%;
  transform: skew(0deg, -30deg);
}

@keyframes move {
  25% {
    opacity: 1;

  }
  33% {
    opacity: 1;
    transform: translateY(30px);
  }
  67% {
    opacity: 1;
    transform: translateY(40px);
  }
  100% {
    opacity: 0;
    transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
  }
}

.text {
  display: block;
  margin-top: 75px;
  margin-left: -30px;
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .25;
  animation: pulse 2s linear alternate infinite;
}

@keyframes pulse {
  to {
    opacity: 1;
  }
}






/* Responsivo */

@media only screen and (max-width: 1050px) {	
	.promo_head .banner_envios1, .promo_head .banner_envios2, .promo_head .banner_envios3 { top: 7%; }
}
@media only screen and (max-width: 870px) {	
	.promo_head .banner_envios1, .promo_head .banner_envios2, .promo_head .banner_envios3 { top: 12%; }
}
@media only screen and (max-width: 780px) {	
	.promo_head .banner_envios1, .promo_head .banner_envios2, .promo_head .banner_envios3 { top: 16%; }
}


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


	.promo_head .banner_envios1 {
		width: 44vh;
		padding-bottom: 44vh;
		top: 42vh;
		left: default;
		right: 0;
		z-index: 0;
	}

	.promo_head .banner_envios2 {
		width: 45vh;
		padding-bottom: 45vh;
		top: 0;
		left: 0%;
	}

	.promo_head .banner_envios3 {
		width: 44vh;
		padding-bottom: 44vh;
		top: 42vh;
		left: default;
		right: 0;
		z-index: 0;
	}


	.titulo {
		text-align: center;
		font-size: 40px;
	}

	#top .etiqueta {
		max-height: 50%;
	}

	.etiqueta-top {
		max-height: 17%;
	}

	#donfabian .foto {
		display: block;
		margin: 20px auto;
		float: none;
	}

	#origen, #donfabian, #contacto {
		width: 80%;
		padding: 30% 10%;
	}

	form {
		width: 90%;
		padding: 2%;
		margin-bottom: 25%;
	}

	.promo_form form {
		display: block;
		margin: 5% auto 0 auto;
		width: 88%;
		border-radius: 30px 0;
	}
	
	.promo_form form .titulo {
		font-size: 30px;
		margin-top: 20px;
	}

	.promo_form form input[type=text], form input[type="number"] {
		padding: 7px;
		width: 94%;
	}

	.promo_head .banner_envios {
		top: 15%;
		width: 90%;
		padding-bottom: 90%;
	}
	
	.promo_head .subtitulo {
		bottom: 25%;
		width: 90%;
		font-size: 26px;
	}
	
	.solicitaahora {
	  bottom: 80px;
	}

	.scroll-bajar {
	  bottom: 150px;
	}

	.etiqueta-top.promocion {
		max-height: 20%;
	}

	.scroll-bajar {
		bottom: 15%;
	}
	
	.solicitaahora {
		bottom: 3%;
	}
	
	.promo_form .empaque_cafe {
		display: block;
		width: 90%;
		margin: 0 auto;
		height: 50%;
	}
	
}


@media only screen and (max-height: 420px) {


	#donfabian .foto {
		margin: 0 0 30px 30px;
		max-width: 50vh;
		max-height: 50vh;
	}
	
	.etiqueta-top {
		max-height: 33%;
	}


}



#error {
	display: block;
	text-align: center;
	padding: 8px 3px;
	margin-bottom: 0px;
	background: #ffc3c3;
	color: #cd1f1f;
	border: 1px solid #cd1f1f;
	font-size: 15px;
}

#alerta {
	display: block;
	text-align: center;
	padding: 8px 3px;
	margin-bottom: 0px;
	background: #fff4a8;
	color: #a18c00;
	border: 1px solid #a18c00;
	font-size: 15px;
}

#exito {
	display: block;
	text-align: center;
	padding: 8px 3px;
	margin-bottom: 0px;
	background: #c4feb0;
	color: #436837;
	border: 1px solid #436837;
}

/* GENERALES */
.noscroll { overflow: hidden; touch-action: none; }
.oculto, #hide, #showacepto, #subir { display: none; }
.colorwhite { color: #ffffff; }
.colorblack { color: #000000; }
.center { transform: translate(-50%, -50%); }
.abcenter { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.ocultar_toggle { display: block; }
.mostrar, .boton { cursor: pointer; }

/* EFECTOS */
.start { opacity: 0; transform: translate3d(0%, -30%, 0) scale(0.7); }
.animar { transition: all 1s ease; }
.rotar { transform: rotateY(360deg); transition: all 0.5s ease; }
.an-opacidad { opacity: 0; }
.an-right {	opacity: 0; margin-right: -25vw; }
.an-right-ab {	opacity: 0; transform: translateX(80%); }
.an-left { opacity: 0; margin-left: -25vw; }
.an-top { opacity: 0; margin-top: -25vw; }
.an-bottom { opacity: 0; margin-bottom: -25vw; }
.an-grow { opacity: 0; transform: scale(.5); }
.an-scale { opacity: 0; transform: scale(1.5); }
.an-reservar { background: #925c25; }
.an-rotar, .an-rotar180 { opacity: 0; transform: rotate(180deg); }
.an-rotar360 { opacity: 0; transform: rotateY(720deg); }
.an-block { display: none; opacity: 0; transition: all 0s ease; }
.an-subir { margin-top: -100%; }
.an-bajar { margin-top: 0; }