/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* Site Styles
================================================== */

/**** Colores ****/
	.rojo { background:#C52734; }
	.amarillo { background:#EAB643; }
	.morado { background:#863C5C; }
	.plateado { background:#68859A; }
	.verde { background:#399D65; }
	
	
	body {
		color: #FFF;
		font-size:15px;
		background-color: #ece8e5;
		font-family:Verdana, Geneva, sans-serif;
	}
	h1 {
		font-size:55px;
		color: #FFF;
	    font-family: 'GillSansMTLightRegular';
		margin-top:-60px;
	}
	.idioma {
		float: right;
		margin: -150px 95px 0 0;
	}
	.idiomas{
		position: absolute;
		top: 8px;
		margin: 0 0 0 40px;
	}
	.idiomas a{
		text-decoration: none;
	}
	.social {
		width:135px;
		height:108px;
		float:right;
		margin:-80px 50px 0 0;
	}
	.social #facebook,
	.social #twitter,
	.social #pinterest { width:135px;}
	
	
	#preloader {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #d1d1d1; /* change if the mask should have another color then white */
		z-index: 9998; /* makes sure it stays on top */
	}
	#status {
		width: 200px;
		height: 200px;
		position: absolute;
		left: 50%; /* centers the loading animation horizontally one the screen */
		top: 50%; /* centers the loading animation vertically one the screen */
		background-image: url(../images/preloading.gif); /* path to your loading animation */
		background-repeat: no-repeat;
		background-position: center;
		margin: -100px 0 0 -100px; /* is width and height divided by two */
	}

	/*Estilos a documentos Congelados*/
	.documentoPdf{
		float: left !important;
		position: relative !important;
		margin: 10px auto !important;
		width: 100% !important;
	}
	.documentoPdf .doc{
		margin-top: 50px;
	}
	.documentoPdf a,
	.doc a{
		text-decoration: none !important;
		line-height: 56px !important;
		float: left !important;
		margin-right: 10px !important;
		color: black;
	}
	.documentoPdf a:visited,
	.doc a:visited{
		color: black;
	}
	.documentoPdf img,
	.doc img{
		float: left !important;
	}
	.morado_claro{
		background-color: #BE4C9A;
	}
	.doc{
		width: 290px !important;
		float: left !important;
		margin-left: 15px;
	}
	/*medias queries para Documentos Congelados*/

	@media screen and (max-width: 767px) {
		.doc{
			width: 296px !important;
			margin: 0 auto !important;
			float: none !important;
					}
	}
	@media screen and (max-width: 959px) {
		.doc{
			width: 233px !important;
			margin-top: 30px;
		}
		.documentoPdf{
			margin-top: 50px !important;
		}

	}
	@media screen and (max-width: 826px) {
		.container{
			overflow-x: hidden;
		}

	}
	@media screen and (max-width: 479px) {
		.ingles{
			padding: 0px !important;
		}

	}
/**** Menu Styles ****/
	nav {
		height: 40px;
		width: 100%;
		background: #FFF;
		text-transform:uppercase;
		font-weight: bold;
		position: relative;
	}
	nav ul {
		padding: 0;
		margin: 0 auto;
		width: 100%;
		height: 40px;
	}
	nav li {
		display: inline;
		float: left;
	}
	nav a {
		color: #C52734;
		display: inline-block;
		padding: 0 9px;
		font-size: 9px;
		-moz-font-size: 9px;
		margin:10px 0 0 0;
		text-align: center;
		text-decoration: none;
		font-family: 'GillSansRegular';
		/*line-height: 40px;*/
	}
	nav li.active {
		border-bottom: 4px solid #C52734;
		height: 26px;
		padding-bottom: 4px;
	}
	nav li a {
		/*padding:0px 1.78px;
		border-right: 1px solid #576979;
		box-sizing:border-box;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;*/
	}
	nav li:last-child a {
		border-right: 0;
	}
	nav a#pull {
		display: none;
	}
	#home nav .active{
		border-bottom-color: white !important;
	}
	/*Sub-Menu Styles*/
	.one-third h2{
		margin-bottom: 0px !important;
	}
	@media screen and (min-width: 766px) and (max-width: 960px){
		a.subCategoria{
			float: left;
			position: relative;
			text-align: left;
			line-height: 20px;
			margin-bottom: 15px !important;
		}
	}
	.subCategoria{
		margin: 1px 66px !important;
		/*height: 40px;*/
	}
	
	/*Styles for screen 600px and lower*/
	@media screen and (max-width: 960px) {
		nav { 
			height: auto;
		}
		nav ul {
			width: 100%;
			display: block;
			height: auto;
		}
		nav li {
			width: 31.3333%;
			float: left;
			position: relative;
		}
		nav li a {
			font-size: 10px;
			padding:0px;
		}
		nav a {
			text-align: center;
			width: 100%;
			margin:5px 0 10px 0;
		}
	}
	
	/*Styles for screen 515px and lower*/
	@media only screen and (max-width : 480px) {
		nav {
			border-bottom: 0;
		}
		nav ul {
			display: none;
			height: auto;
		}
		nav a#pull {
			display: block;
			border-top:#CE444F solid 1px;
			color:#fff;
			margin:0;
			padding:10px 0 10px 0;
			width: 100%;
			position: relative;
			background:#CE444F;
			font-size: 14px;
		}
		nav a#pull:after {
			content:"";
			background: url('../images/nav-icon.png') no-repeat;
			width: 30px;
			height: 30px;
			display: inline-block;
			position: absolute;
			right: 15px;
			top: 10px;
		}
	}
	
	/*Smartphone*/
	@media only screen and (max-width : 320px) {
		nav li {
			display: block;
			float: none;
			width: 100%;
		}
		nav li a {
			
		}
	}

/* #Page Styles
================================================== */

/* Definición de alto de botones de contenído principal */
	.x1alto { height:235px; }
	.x2alto { height:478px; }
	
	/* Corrección para columnas con multiples cajas */
    .subirX1 {
	    margin-top: -243px;
    }
	
	.btnMenu { height:317px; }
	.btnMenu h1 {margin:-7px 0 0 0;}
	
	.btnSolo h1 {
		margin:80px auto;
		text-align: center;
	}
	.logo {
		width: 307px;
		height: 107px;
		background: url("../images/logo.png") no-repeat;
	}
	.paginador{
		position: relative;
		bottom: 0px;
		width: 400px;
		float: right;
	}
	@media only screen and (max-width: 960px){
		
		#productosXpagina{
			margin: 0 0 -40px 0 !important;
		}
	}
	@media only screen and (max-width: 767px){
		.paginador{
			position: relative;
			bottom: 0px;
			float: right;
		}
		#pagination{
			width: auto !important;
			float: none !important;
		}
		#productosXpagina{
			margin: 0 auto !important;
			float: none !important;
			
		}
		#slider img{
			width: 100%;
			height: 235px !important;
		}
	}
	@media only screen and (max-width: 767px){

		#mainBanner{
			height: 230px !important;
			background-size: 150% !important;
			
		}
	}
	@media only screen and (min-width: 768px){
			#slider img{
			width: 100%;
			height: 395px !important;
		}
	}
	@media only screen and (max-width: 479px){
		.paginador{
			position: relative;
			bottom: 0px;
			margin: 0 auto;
			width: auto;
			padding: 40px 41px 0px;
		}
		#pagination{
			width: auto !important;
		}
			#slider img{
			width: 100%;
			height: 155px !important;
		}
		#mainBanner{
			height: 155px !important;
		}
	}

	@media only screen and (max-width: 959px){
		.productsC h1{

			
		}
		#productos h1, #productosC h1, #shipchandler h1, #aguaCalais h1{padding: 3px;}
	}
	@media only screen and (max-width: 767px){
			.products{
			line-height: 50px !important;	
		}
	}
/* Diseño general index */

/**** header ****/	
	#header {
		height:215px;
	}
	#header .logo {
		margin:50px 0 0 50px;
	}
	
	
/**** main banner *****/	
	#mainBanner { background: url(../images/bg-mainBanner.jpg) no-repeat; overflow:hidden; /*height:425px;*/ }
	#mainBanner #mensaje { background:url(../images/bg-mensaje.png) repeat; height:423px; width:45%; height:100%; color:#FFF; text-align:center; padding-top:115px; }
	#mainBanner #mensaje h1 { line-height:80px; }
	
	
/***** menu secciones *****/	
	#productos { background:url(../images/ProductosFrescos.jpg) bottom center no-repeat;}
	#productos h1 { background:#C72734; text-align:center; margin:auto; }
	#productosC { background:url(../images/ProductosCongelados.jpg) bottom center no-repeat;}
	#productosC h1 { background:#00B6B0; text-align:center; margin:auto; }
	#shipchandler { background:url(../images/Shipchandler.jpg) bottom center no-repeat;}
	#shipchandler h1 { background:#BE4C9A; text-align:center; margin:auto; }
	#aguaCalais { background:url(../images/agua.jpg) bottom center no-repeat; }
	#aguaCalais h1 { background:#2F4E92; text-align:center; margin:auto; }
	
	#productos h1, #productosC h1, #shipchandler h1, #aguaCalais h1 { font-size:19px !important }
	
	
/**** secciones *****/	
	#recetas { background:url(../images/recetass.jpg) ; }
	#recetas h1 {margin:20px 0 0 30px;}

/**** #Botones de foto ****/
	#photoBtnOne { background:url(../images/cebolla.jpg) center center; }
	#photoBtnTwo { background:url(../images/Consejos.jpg) center center; }
	
	
/**** footer *****/
	#footer { background:#C52734; height: 500px; transition:all ease-in-out 0.5s; }
	#footer .logo {	margin:50px 0 0 50px;}
	#footer .contactInfo {margin:50px 0 0 50px; width:200px; float:left;}
	#footer .contactInfo strong {font-size:1.2em; font-weight:700;}
	#footer #newsletter {width:450px; height:250px; float:right; margin:57px 70px 0 0; background:url(../images/bg-footer-mensaje.png) no-repeat bottom;background-size: 90%}
	.container #footer #newsletter form #boton { float:right; margin: -50px 110px 0 0; }
	
	@media only screen and (max-width: 959px) {

	}

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		.btnMenu { height:175px; }
		.btnMenu h1 {margin:-7px 0 0 0;}
		
		/***** menu secciones *****/	
		#productos { background:url(../images/ProductosFrescos.jpg) top no-repeat;}
		#productos h1 { background:#C72734; text-align:center; font-size:1.7em; }
		#shipchandler { background:url(../images/Shipchandler.jpg) top no-repeat;}
		#shipchandler h1 { background:#5BB4AE; text-align:center; font-size:1.7em; }
		#aguaCalais { background:url(../images/agua.jpg) top no-repeat; }
		#aguaCalais h1 { background:#2F4E92; text-align:center; font-size:1.7em; }
		
		.x1alto { height:135px; }
		.x2alto { height:278px; }
		/* Corrección para columnas con multiples cajas */
		.subirX1 {
			margin-top: -143px;
		}
		.btnSolo h1 {
			margin:40px auto;
			text-align: center;
			font-size:1.9em;
		}
		#recetas h1 {font-size:2em;}
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		#photoBtnTwo{
			display: none !important;
		}
		.columns{
			background-size: 100% !important ;
			/*background: no-repeat;*/
		}
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (max-width: 767px) {
		
		#header .social #facebook{ display:none; }
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		 		
		#header {
			height:125px;
		}
		#header .logo {
			margin:10px 25px;
		}
		.logo {
			width: 250px;
			height: 87px;
			background: url("../images/logo_phone.png") no-repeat;
		}
		#mainBanner { 
			background: url(../images/bg-mainBanner.jpg) no-repeat !important;
			background-size: 170% !important;

			overflow:hidden;
			/*height:130px !important; */
		}
		#recetas{
			height: 211px;
		}
		#mainBanner #mensaje {
			height:223px;
			color:#FFF;
			font-size:0.4em;
			width:300px;
			padding:60px 10px 0 10px;
		}
		#mainBanner #mensaje h1 {
			line-height:30px;
			white-space:pre-wrap;
		}
		#footer { height:auto;}
		#footer .logo {	margin:50px 0 0 25px;}
	}
	@media (max-width: 479px) {
	.productBox {
		padding-left: 0px;
	}
	#footer #newsletter {
		width: 210px !important;
		margin: 30px 24px 0 0;
	}
	nav li{
		float: none !important;
	}
	.bigRowFoto,{
		width: auto !important;
		margin: 0 !important;
		float: none !important;
	}
	.bigRowTexto.black{
		width: 260px !important;
		margin: 0 auto !important;
		float: none !important;
	}
	.bigRowTexto.black{
		width: 260px !important;
	}
	.bigRow.aguaRow {
		height: auto !important;
	}
	.container .two-thirds.column.bigRow {
		width: 300px !important;
		
	}
	
}
/***/
@media (max-width: 767px) {
	#footer{
		height: auto !important;
	}
	.container{
		overflow: hidden !important;
	}
	#footer #newsletter {
		width: 250px !important;
	}
	.container #footer #newsletter form #boton {
		float: right;
		margin: -4px 99px 0 0;
	}
	#productosXpagina {
		margin: 65px 0 -1px 0;
	}
	.productBox p {
		width: 300px !important;
	}
	
	#formulario{
		margin-top: 10px !important;
		text-align: center;
		padding: 20px !important;
		width: 90%;
	}
	#formulario .campo,
	#formulario input[type="submit"]{
		margin: 14px auto !important;
	}
	#blackLine{
		margin: 0px;
	}
}
 #contacto .one-third .column .alpha .productColumn .img_form{
        margin-bottom: -6px !important;
    }

/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/

a:lang(es) { color: black !important; }
