/* ============================
TITLE:	VISUAL STYLE CSS
DATE:	11 MARZO 2014
DESIGN:	www.bigbox.mx
============================ */
@import url(fonts.css);

/* estilos generales */
*{
	-webkit-transition: all ease-in-out .5s;
	-moz-transition: all ease-in-out .5s;
	-ms-transition: all ease-in-out .5s;
	-o-transition: all ease-in-out .5s;
	font-style: normal;
	font-weight: normal;
}
::selection{}
::-moz-selection{}
body{
	font-family: "regular", sans-serif;
	/*background: url("../../imagenes/basico/footer.png") right bottom no-repeat;*/
	color: #515151;
}
a,
a:link,
a:visited{
	color:#5d5d5d;
	font-weight: bold;
}
a:hover{
	color:#e98223;
}
.smi a img{
	border-radius: 50px;
	border: 1px solid rgba(255,255,255,0)
}
.smi a:hover img{
	border:1px solid rgba(53,111,139,0.3);;
	background-color: rgba(53,111,139,0.02);
	/*-webkit-filter: grayscale(1);
	-moz-filter: grayscale(1);
	-ms-filter: grayscale(1);
	-o-filter: grayscale(1);
	filter: grayscale(1);*/
}
p{
	line-height: 160%;
	margin-bottom: 4%;
	text-align: justify;
}
h1,
h2,
h3{
	font-family: "bold", sans-serif;
}
h1{
	color: #e98223;
}
h2{
	color: #5d5d5d;
}
h2.blue{
	color: #676767;
}
h3{
	color: #366eb6;
}
b,
strong{
	font-family: "bold",sans-serif;
	color: #676767;
}
i,
em{
	font-family: "italic", sans-serif;
}
.fila{
	margin-bottom: 3%;
}
.ui-tooltip {
	border-radius: 0px 7px 7px 7px;
	text-align:center;
	color:#FFF;
	font-family: "light", sans-serif;
	padding: 7px;
	position: absolute;
	z-index: 9999;
	-webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.57);
	-moz-box-shadow:    4px 4px 5px 0px rgba(50, 50, 50, 0.57);
	box-shadow:         4px 4px 5px 0px rgba(50, 50, 50, 0.57);
	background: rgb(74, 145, 216);
	background: -moz-linear-gradient(30deg, rgb(74, 145, 216) 30%, rgb(52, 111, 180) 70%);
	background: -webkit-linear-gradient(30deg, rgb(74, 145, 216) 30%, rgb(52, 111, 180) 70%);
	background: -o-linear-gradient(30deg, rgb(74, 145, 216) 30%, rgb(52, 111, 180) 70%);
	background: -ms-linear-gradient(30deg, rgb(74, 145, 216) 30%, rgb(52, 111, 180) 70%);
	background: linear-gradient(120deg, rgb(74, 145, 216) 30%, rgb(52, 111, 180) 70%);
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-ms-transition: none !important;
	-o-transition: none !important;
}

/* cabeceras y navegación */
header{}
#marca{
	width: 100%;
	height: auto;
	max-width: 400px;
	max-height: 120px;
}
#busqueda,
.buscador{
	display: block;
	width: 100%;
	background: url("../../imagenes/basico/lupa.png") right center no-repeat #5d5d5d;
	color: #fff !important;
	padding-right: 20px;
}
#busqueda::-webkit-input-placeholder,
#busqueda::-webkit-select-placeholder,
#busqueda::-webkit-textarea-placeholder{
	color: #fff;
	text-align: right;
}
.buscador::-webkit-input-placeholder,
.buscador::-webkit-select-placeholder,
.buscador::-webkit-textarea-placeholder{
	color: #fff;
	text-align: right;
}
#busqueda::-moz-input-placeholder,
#busqueda::-moz-select-placeholder,
#busqueda::-moz-textarea-placeholder{
	color: #fff;
	text-align: right;
}
.buscador::-moz-input-placeholder,
.buscador::-moz-select-placeholder,
.buscador::-moz-textarea-placeholder{
	color: #fff;
	text-align: right;
}
.suprow{
	overflow: hidden;
	margin-bottom: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#infoHeader h3 {
	display: inline-block;
	width: 120px;
	/*background-color: #8b8b8b;*/
	background-color: rgba(249, 162, 0, .75);
	color: #fff;
	border-radius: 10px;
	padding: 2px;
	margin-bottom: 6px;
}
#infoHeader a {
	color: #8b8b8b;
	display: block;
	margin-bottom: 6px;
}
nav{
	text-align: center;
	background-color: #f9a200;
	padding: 5px 0;
	margin: 1% 0 !important;
}
ul#menu{
	display: flex;
	align-content: center;
	justify-content: center;
}
ul#menu li{
	display: inline-flex;
	width: 244px;
	height: 52px;
	margin: 0 3px;
	padding: 0 10px;
	border-radius: 26px;
	background: rgba(255,255,255,0);
	align-items: center;
	justify-content: center;
}
ul#menu li:hover{
	background: rgba(255,255,255,.15);
}
ul#menu li.active{
	background: rgba(255,255,255,.25);
}
ul#menu li a,
ul#menu li a:link,
ul#menu li a:visited{
	text-transform: uppercase;
	font-size: 1em;
	font-family: "bold", sans-serif;
	color: #fff;
}
ul#menu li a:hover{}
ul#menu li a.on{}
#subnav{
	background-color: #5d5d5d;
}
#subnav a,
#subnav a:link,
#subnav a:visited{
	padding: 5px 0;
	text-transform: uppercase;
	color: #fff;
	display: inline-block;
	width: 220px;
	text-align: center;
	margin: 5px 0;
}
#subnav a:hover{
	background-color: rgba(255,255,255,.2);
}

/* cuerpo */
#banner{
}
#banner img{
	max-width: 1160px;
	max-height: 450px;
	margin: 0 auto;
}
.flexslider {
	margin: 0 0 65px 0 !important;
	background: transparent !important;
	border: none !important;
	-webkit-border-radius: none !important;
	-moz-border-radius: none !important;
	-o-border-radius: none !important;
	border-radius: none !important;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	-o-box-shadow: none !important;
	box-shadow: none !important;
}
#filtrar-ingredientes{
	background: url("../../imagenes/basico/background-filter.png") center center no-repeat rgba(216,128,46,0.75);
	transform: skew(-12deg);
	-o-transform: skew(-12deg);
	-moz-transform: skew(-12deg);
	-webkit-transform: skew(-12deg);
	margin-bottom: 25px;
}
#filtrar-ingredientes > div{
	transform: skew(12deg);
	-o-transform: skew(12deg);
	-moz-transform: skew(12deg);
	-webkit-transform: skew(12deg);
	text-align: right;
	font-size: 2em;
	font-family: "light", sans-serif;
	padding:10px;
	padding-right: 30px;
}
#filtrar-ingredientes span{
	color: rgba(216,128,46,1);
	font-family: "bold", sans-serif;
}
#filtrar-ingredientes a,
#filtrar-ingredientes a:link,
#filtrar-ingredientes a:visited{
	color: #fff;
	font-family: "bold", sans-serif;
}
#filtrar-ingredientes a:hover{
	color: #ef7f25;
	font-family: "bold", sans-serif;
}
.lista{
	margin-left: 7%;
}
.premium{
	border-top: 1px solid #5d5d5d;
	background: url("../../imagenes/basico/premium-bottom.png") center bottom no-repeat;
	padding-bottom: 70px;
}
.ing-picture{
	border-radius: 50%;
	border: 2px solid orange;
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
}
.ing-s{
	width: 320px;
	height: 320px;
	margin: 0 auto;
}
.ind-s{
	width: 265px;
	height: 265px;
	margin: 0 auto;
}
.gradient,
.gradient2{
	display: block;
	width: 100%;
	border-radius: 50%;
	text-align: center;
	background: rgba(0, 0, 0, 0);
	background: -webkit-radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
	background: -moz-radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
	background: -ms-radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
	background: -o-radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
	background: radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
}
.gradient{
	padding-top: 50%;
	height: 50%;
}
.gradient2{
	height: 100%;
}
.gradient2 img{
	border-radius: 50%;
}
a.ingnav:hover > .ing-picture{
	background-size: 105%;
	-webkit-transition: all 0.25s cubic-bezier(0, 0.91, 0.395, 1.3);
	-moz-transition: all 0.25s cubic-bezier(0, 0.91, 0.395, 1.3);
	-o-transition: all 0.25s cubic-bezier(0, 0.91, 0.395, 1.3);
	transition: all 0.25s cubic-bezier(0, 0.91, 0.395, 1.3);
	-webkit-filter: brightness(95%) grayscale(25%);
	-moz-filter: brightness(95%) grayscale(25%);
	-ms-filter: brightness(95%) grayscale(25%);
	-o-filter: brightness(95%) grayscale(25%);
	filter: brightness(95%) grayscale(25%);
}
a.ingnav:hover > .ing-picture .gradient,
a.ingnav:hover > .ing-picture .gradient2{
	background: rgba(0, 0, 0, .45);
	background: -webkit-radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .45));
	background: -moz-radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .45));
	background: -ms-radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .45));
	background: -o-radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .45));
	background: radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .45));
	-webkit-transition: all 0.25s cubic-bezier(0, 0.91, 0.395, 1.3);
	-moz-transition: all 0.25s cubic-bezier(0, 0.91, 0.395, 1.3);
	-o-transition: all 0.25s cubic-bezier(0, 0.91, 0.395, 1.3);
	transition: all 0.25s cubic-bezier(0, 0.91, 0.395, 1.3);
}
a.ingnav:hover > .ing-picture .gradient img,
a.ingnav:hover > .ing-picture .gradient2 img{
	/*
	transform: scale(1.025,1.025);
	-o-transform: scale(1.025,1.025);
	-ms-transform: scale(1.025,1.025);
	-moz-transform: scale(1.025,1.025);
	-webkit-transform: scale(1.025,1.025);
	*/
	transform: scale(.90,.90);
	-o-transform: scale(.90,.90);
	-ms-transform: scale(.90,.90);
	-moz-transform: scale(.90,.90);
	-webkit-transform: scale(.90,.90);
}
.filtrar-ing{
	text-transform: uppercase;
	font-family: "light", sans-serif;
	font-size: 1.25em;
}
.filtrar-ing span{
	font-family: "bold", sans-serif;
	color: orange;beneficio
}
.filtrar-ing a,
.filtrar-ing a:link,
.filtrar-ing a:visited{
	background: rgba(216,128,46,.30);
	display: inline-block;
	transform: skew(-12deg);
	-o-transform: skew(-12deg);
	-moz-transform: skew(-12deg);
	-webkit-transform: skew(-12deg);
	color: #fff;
	padding: 5px;
}
.filtrar-ing a:hover{
	background: rgba(216,128,46,.75);
}
.filtrar-ing a b{
	display: inline-block;
	transform: skew(12deg);
	-o-transform: skew(12deg);
	-moz-transform: skew(12deg);
	-webkit-transform: skew(12deg);
}
.filtrar-ing a.active{
	background: rgba(216,128,46,1);
}
#listado a,
#listado i{
	display: block;
	margin: 5px 0;
}
#listado a img{
	margin-right: 2px;
}
#listado i{
	background-color: #eee;
	margin: 3px;
	padding: 4px;
}
#listado.resultados b{
	text-transform: uppercase;
}
#listado.resultados small{
	color: #000;
}
#listado.resultados small a,
#listado.resultados small a:link,
#listado.resultados small a:visited{
	display: inline-block;
	color: orange;
	text-transform: uppercase;
}
#listado.resultados small a:hover{
	color: rgba(216,128,46,1)
}
.resalta{
	font-size: 2em;
}
h2.tag-premium,
h2.tag-valor-agregado,
h2.tag-estrella,
h2.tag-otros{
	text-transform: capitalize;
	padding: 5px;
	padding-left: 18px;
	margin-top: 15px;
	font-size: 1.13em;
	border-bottom: 1px solid #6380b9; 
}
h2.tag-premium{
	background: url("../../imagenes/ingredientes/iconos/patentados.png") left center no-repeat rgba(0,0,0,.02);
}
h2.tag-valor-agregado{
	background: url("../../imagenes/ingredientes/iconos/valor-agregado.png") left center no-repeat rgba(0,0,0,.02);
}
h2.tag-estrella{
	background: url("../../imagenes/ingredientes/iconos/estrella.png") left center no-repeat rgba(0,0,0,.02);
}
h2.tag-otros{
	background: url("../../imagenes/ingredientes/iconos/mas-ingredientes.png") left center no-repeat rgba(0,0,0,.02);
}

/* INGREDIENTES BY ID */
#premium{
	background-image: url("../../imagenes/ingredientes/img-premium.png");
}
#aminoacidos{
	background-image: url("../../imagenes/ingredientes/img-aminoacidos.png");
}
#minerales{
	background-image: url("../../imagenes/ingredientes/img-minerales.png");
}
#vitaminas{
	background-image: url("../../imagenes/ingredientes/img-vitaminas.png");
}
#edulcorantes{
	background-image: url("../../imagenes/ingredientes/img-edulcorantes.png");
}
#aceites-omega{
	background-image: url("../../imagenes/ingredientes/img-aceites-omega.png");
}
#proteinas{
	background-image: url("../../imagenes/ingredientes/img-proteinas.png");
}
#probioticos{
	background-image: url("../../imagenes/ingredientes/img-probioticos.png");
}
#frutas-y-vegetales{
	background-image: url("../../imagenes/ingredientes/img-frutas-y-vegetales.png");
}
#extractos-vegetales{
	background-image: url("../../imagenes/ingredientes/img-extractos-vegetales.png");
}
#fibras{
	background-image: url("../../imagenes/ingredientes/img-fibras.png");
}
#enzimas{
	background-image: url("../../imagenes/ingredientes/img-enzimas.png");
}
#especialidades{
	background-image: url("../../imagenes/ingredientes/img-especialidades.png");
}
.roundimg{
	border-radius: 50%;
	max-width: 265px;
	max-height: 265px;
	border: 4px solid orange;
}
.max465{
	max-width: 465px;
}
#pie-ingredientes,
#salutary{
	max-width: 755px;
	margin: 0 auto;
	color: #dd751f;
	font-family: "bold", sans-serif;
	font-size: 1.13em;
}
#pie-ingredientes img{
	float: left;
	margin-right: 0px;
}
.clasificacion{
	display: block;
	font-family: "light", sans-serif;
	font-size: 1.13em;
}
.ficha{
	display: block;
	background: url("../../imagenes/basico/descargar-ficha.png") center center no-repeat;
	color: #fff !important;
	padding: 5px;
	padding-left: 50px;
	width: 185px;
	height: 15px;
	margin: 0 auto;
	text-transform: uppercase;
	font-size: .875em;
}
span.blue{
	/*display: block;*/
	font-family: "light", sans-serif;
	font-style: 1.13em;
	color: #00a550;
}
.descripcioningrediente em{
	font-family: "light", sans-serif;
	font-style: 1.13em;
	color: #6380b9;
}
.form-ico{
	display:block;
	float: left;
	text-indent: -9999px;
	width: 40px;
	height: 40px;
}
#form-nombre{
	background: url(../../imagenes/basico/ico-form-nombre.png) center center no-repeat;
}
#form-correo{
	background: url(../../imagenes/basico/ico-form-correo.png) center center no-repeat;
}
#form-asunto{
	background: url(../../imagenes/basico/ico-form-asunto.png) center center no-repeat;
}
#form-comentarios{
	background: url(../../imagenes/basico/ico-form-comentarios.png) center center no-repeat;
}
#form-vacantes{
	background: url(../../imagenes/basico/ico-form-vacantes.png) center center no-repeat;
}
#form-adjunto{
	background: url(../../imagenes/basico/ico-form-adjunto.png) center center no-repeat;
}
.wrapbtn{
	border: 2px solid #346fb4;
	display: inline-block;
	padding: 1px;
	width: 150px;
}
.wrapmap{
	border: 2px solid #346fb4;
	display: block;
	padding: 2px;
	width: 96%;
	max-width: 960px;
	margin: 0 auto;
}
.noborder{
	border: none !important;
}
#mapa{
	width: 100%;
	height: 350px;
	position: relative;
	z-index: 1 !important;
}
#mapa div{
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-ms-transition: none !important;
	-o-transition: none !important;
}
.premium-item{
	background: url("../../imagenes/basico/alianzas-pie-item.png") center bottom no-repeat;
	padding-bottom: 35px;
	margin-bottom: 25px;
}
.premium-item h2{
	border-bottom: 1px solid rgba(53,111,139,0.75);
	margin-bottom: 15px;
}
.premium_3{
	border-top: 1px solid rgba(53,111,139,0.75);
	background: url("../../imagenes/basico/alianzas-pie-item.png") center bottom no-repeat;
	padding-bottom: 75px;
	margin-top: 15px; 
}
.premium_3 .links{
	display: block;
	width: 100%;
	height: 35px;
	background: url("../../imagenes/basico/background-links.png") center center no-repeat;
}
.premium_3 .links a,
.premium_3 .links a:link,
.premium_3 .links a:visited{
	display: inline-block;
	width: 49%;
	text-align: center;
	line-height: 200%;
	font-family: "bold", sans-serif;
}
.premium_3 .links a.w,
.premium_3 .links a.w:link,
.premium_3 .links a.w:visited{
	color: #fff;
}
.premium_3 .links a.w:hover{
	opacity: .75;
}
.borderbotom{
	border-bottom: 1px solid rgba(53,111,139,0.75);
}
.docto{
	padding-left: 40px;
	min-height: 45px;
	background: url("../../imagenes/basico/documento-biblioteca.png") top left no-repeat;
	margin-top: 5px;
}

/* formularios */
form{
	max-width: 420px;
	margin: 0 auto;
}
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="file"],
input[type="submit"],
input[type="button"],
select,
textarea{
	display: inline-block;
	width: calc(98% - 40px);
	height: 40px;
	padding: 1%;
	color: #346fb4;
	font-family: "regular", sans-serif;
	border: 1px solid #346fb4;
	margin: 1%;
	color: #346fb4;
}
select{
	width: calc(98% - 40px);
	height: 40px;
}
textarea{
	height: 80px;
}
input[type="submit"],
input[type="button"]{
	height: 30px;
	cursor: pointer;
	background-color: #346fb4;
	color: #fff;
	font-family: "regular", sans-serif;
	/*max-width: 150px;*/
	border: 1px solid #346fb4;
	width: 97%;
}

::-webkit-input-placeholder,
::-webkit-select-placeholder,
::-webkit-textarea-placeholder{
	font-family: "light", sans-serif;
}
::-moz-input-placeholder,
::-moz-select-placeholder,
::-moz-textarea-placeholder{
	font-family: "light", sans-serif;
}

input:hover,
select:hover,
textarea:hover,
input[type="submit"]:hover,
input[type="button"]:hover{
	opacity: .85;
	border: 1px solid orange;
}

input:focus,
select:focus,
textarea:focus{
	border: 1px solid orange;
}
input[type="submit"]:active
input[type="button"]:active{
	border: 1px solid #0e3b72;
}

/* pie de página */
footer{
	font-size: .875em;
	border-top: 2px solid #f9a200;
	padding: 10px 0;
	background-color: #f9a200;
	color: #ffffff;
	margin-top: 50px;
}


@media screen and (min-width : 481px) and (max-width : 768px) {
	#subnav{
		text-align: center;
	}
}
@media screen and (min-width : 0px) and (max-width : 480px) {
	#subnav{
		text-align: center;
	}	
}

.img-fluid{
	max-width: 100%;
	height: auto;
}
.rounded{
	border-radius: 50%;
}
.mb-1{
	margin-bottom: 1rem;
}
.mb-2{
	margin-bottom: 2rem;
}
.mb-3{
	margin-bottom: 3rem;
}
.mb-4{
	margin-bottom: 4rem;
}
.mb-5{
	margin-bottom: 5rem;
}
.mt-1{
	margin-top: 1rem;
}
.mt-2{
	margin-top: 2rem;
}
.mt-3{
	margin-top: 3rem;
}
.mt-4{
	margin-top: 4rem;
}
.mt-5{
	margin-top: 5rem;
}
.mx-3{
	margin-left: 3rem;
	margin-right: 3rem;
}
.filter-gray{
	filter: grayscale(1) brightness(110%);
}
.filter-gray:after{
	mix-blend-mode: multiply;
}
.remove-bg{
	filter: brightness(110%);
	mix-blend-mode: multiply;
}
.grow{
	font-size: 2rem;
	text-align: center;
}
.grow.left{
	font-size: 2rem;
	text-align: left;
}
.img-fluid{
	max-width: 100%;
	height: auto;
	border-radius: 50%;
}
.gray{
	color: #8b8b8b;
}