﻿h1 {
	position: absolute;
	width: 100%;
	text-indent: -999em;
}

.cabecera_sup {
	position: relative;
	margin: -29px auto 0;
	width: 100%;
	height: auto;
}
	.cabecera_sup img {
		margin: 0px auto;
		width: 100%;
		height: auto;
	}
	.cabecera_sup .content_logo_fec {
		position: absolute;
		right: 5%;
		bottom: 3px;
		width: 86%;
		max-width: 465px;
		height: auto;
	}
		.content_logo_fec .logo_fec {
			position: relative;
			top: 0;
			left: 61%;
			width: 38.9%;
			max-width: 188px;
			height: auto;
		}
			.logo_fec img {
				margin: 0 auto;
				width: 100%;
				height: auto;
			}
		.content_logo_fec .boca_fec {
			position: relative;
			top: -3px;
			right: 0;
			width: 100%;
			padding: 8px 3%;
			/* Para navegadores que no soportan RGBa */
			background-color: #fff;
			/* RGBa con 0.8 opacidad */
    	background-color: rgba(255, 255, 255, 0.8);
			-webkit-border-radius: 6px;
			-moz-border-radius: 6px;
			border-radius: 6px;
			z-index: 10;
		}
			.boca_fec p {
				margin: 0 auto;
				font: 300 13px/130% 'Oswald',  Arial, Helvetica, sans-serif;
  				color: #2e333a;
  				text-align: right;
			}

.cajas {
	position: relative;
	margin: 25px auto 0;
	width: 100%;
	max-width: 960px;
}
	.cajas .cajas_row {
		position: relative;
		width: 300px;
	}
    /* Para el no volteo de las cajas */
    .cajas .cajas_video {
		  width: 300px;
		height: 191px;
		position: relative;
		margin: 10px auto 0;
	}

    .cajas_video p { 
			width: 100%;
			margin: 15px 20px;
			font: 400 20px/100% 'Ubuntu',  Arial, Helvetica, sans-serif;
  		color: #fff;
		}

		.cajas_video b {
      font-weight: 700; font-family: 'Ubuntu',  Arial, Helvetica, sans-serif;
		}


	/* Para el volteo de las cajas */
	.cajas .caja_flip, .cajas .caja_static {
        width: 300px;
		height: 191px;
		position: relative;
		margin: 10px auto 0;

	}

  .preserve3d .cajas .caja_flip, .cajas .caja_static {
    -webkit-perspective: 800px;
		        perspective: 800px;
	}

		.caja_flip img {
			margin: 0px auto;
			width: 100%;
			height: auto;
		}

		.caja_flip p { 
			width: 100%;
			margin: 15px 20px;
			font: 400 20px/100% 'Ubuntu',  Arial, Helvetica, sans-serif;
  		color: #fff;
		}

		.caja_flip b {
      font-weight: 700; font-family: 'Ubuntu',  Arial, Helvetica, sans-serif;
		}

	.preserve3d .caja_flip .card.flipped {
	  -webkit-transform: rotatey(-180deg);
	          transform: rotateY(-180deg );
	}

  .no-preserve3d .caja_flip .card.flipped .front {
	  display: none;
	}

  .no-preserve3d.opacity .caja_flip .card.flipped .front {
    display: block;
	  opacity: 0;
	}

  .caja_flip .card {
		width: 100%;
		height: 100%;
	}

	.preserve3d .caja_flip .card {
		-webkit-transform-style: preserve-3d;
		        transform-style: preserve-3d;

		-webkit-transition: 0.5s;
		        transition: transform 0.5s;
	}

  .caja_flip .card .face {
		width: 100%;
		height: 100%;
    box-shadow: 0px 10px 8px 0px rgba(159, 92, 59, 0.35);
		border-radius: 0 0 0 16%;	
		position: absolute;
		z-index: 2;  	
	}

  .csstransitions .caja_flip .card .face {
		transition: all 0.3s ease-in-out;
	}

	.preserve3d .caja_flip .card .face {
		-webkit-backface-visibility: hidden;
		        backface-visibility: hidden ;	  	
	}

	.caja_flip .card .front {
		position: absolute;
		z-index: 2;
		cursor: pointer;
	}

  .caja_flip .card .back {
		background-color: #9ac34c;
		cursor: pointer;
    position: absolute;
    z-index: 1;
	}

	.preserve3d .caja_flip .card .back {
		-webkit-transform: rotateY(-180deg) translateZ(1px);
	          transform: rotateY(-180deg) translateZ(1px);
	}

		.card .back p {
			width: 100%;
			margin: 60px auto;
			font: 300 30px/100% 'Ubuntu',  Arial, Helvetica, sans-serif; 
			color: #ffffff;
			text-align: center;
		}
	
	/* Personalizar cada caja */	
	
	.caja_galletas {
		-moz-border-radius: 0;
		-webkit-border-radius: 0;
		border-radius: 0;
	}
    .caja_noticias {
          background: url(../assets/logo_noticias.png) 252px 139px no-repeat #7aa747;
    border-radius: 0 0 0 16%;
    background-size: 11%;
     box-shadow: 0px 10px 8px 0px rgba(159, 92, 59, 0.35);
    }
    .caja_noticias p{
        cursor: pointer;
    }
	 .caja_colesterol {
		background: url(../assets/inicio/logo_colesterol.png) 245px 140px no-repeat #bf0411;
	}
	.caja_avenacol {
		background: url(../assets/inicio/logo_avenacol.png) 250px 140px no-repeat #cb5f04;
	}
		#caja_avenacol .caja_avenacol_carrusel {
			position: relative;
			margin: 0px auto 22px;
			width: 300px;
			height: 129px;
			overflow: hidden;
		}
			.caja_avenacol_carrusel .carrusel {
				position: relative;
				left: -100%; /*-300px;*/
				margin: 0px auto;
				width: 200%;
				height: 100%;
			}
				.carrusel img { 
					display:inline-table; 
					float: left; 
					width: 300px;
					height: 129px;
				}
			 	.carrusel .flecha_left,  .carrusel .flecha_right {
					position: absolute;
					top: 59px;
					left: 4px;
					width: 11px;
					height: 20px;
					z-index: 5;
					cursor: pointer;
					-webkit-transition: -webkit-transform 0.3s ease-in-out;
					transition: transform 0.3s ease-in-out;
				}
				.carrusel .flecha_right { left: 585px; }
					.carrusel .flecha_left:hover, .carrusel .flecha_right:hover { transform: scale(1.05); }
					.flecha_left img, .flecha_right img { width: 11px; height: 20px; }
	.caja_betaglucano {
		background: url(../assets/inicio/logo_betaglucano.png) 255px 140px no-repeat #0c890a;
	}
    .caja_betaglucano_amarilla {
		background: url(../assets/inicio/logo_betaglucano.png) 255px 140px no-repeat #e9bc00;
	}
	.caja_preguntas {
		background: url(../assets/inicio/logo_preguntas.png) 255px 140px no-repeat #e9bc00;
	}
    .caja_tienda {
		background: url(../assets/inicio/logo_carrito2.png) 245px 140px no-repeat #0c890a;
        background-size:42px 44px;
	}

@media screen and (max-width: 44.938em) { /* << 719 */
	.cabecera_sup .content_logo_fec {
		display: none;
	}
}

@media screen and (min-width: 0em) { /* 0 >> */
	.cajas { max-width: 100%; }
	.cajas .cajas_row { margin: 0px auto; max-width: 100%; }
	.cajas .caja_flip, .cajas .caja_static { max-width: 100%; }
}
@media screen and (min-width: 20em) { /* 320 >> */
	.cajas { max-width: 320px; }
}
@media screen and (min-width: 21.250em) { /* 340 >> */
	.cajas .cajas_row { margin: 0px 10px; float: left; }
}
@media screen and (min-width: 41.250em) { /* 660 >> */
	.cajas { max-width: 640px; }
}
@media screen and (min-width: 61.250em) { /* 980 >> */
	.cajas { max-width: 960px; }
}
