@font-face { 
font-family: carosello-Regular; 
src: url('../fonts/Carosello-Regular.otf');
}
@font-face { 
font-family:carosello-Regular; 
src: url('../fonts/Carosello-Regular.woff');
}
@font-face { 
font-family: carosello-Regular;; 
src: url('../fonts/Carosello-Regular.eot');
}
@font-face { 
font-family: carosello-Regular; 
src: url('../fonts/Carosello-Regular.ttf');
}

@font-face { 
font-family: MyriadPro-Bold; 
src: url('../fonts/original_MyriadPro-Bold.otf');
}
@font-face { 
font-family: MyriadPro-Bold; 
src: url('../fonts/original_MyriadPro-Bold.woff');
}
@font-face { 
font-family: MyriadPro-Bold;
src: url('../fonts/original_MyriadPro-Bold.eot');
}
@font-face { 
font-family: MyriadPro-Bold; 
src: url('../fonts/original_MyriadPro-Bold.ttf');
}

@font-face { 
font-family: MyriadPro-Regular; 
src: url('../fonts/MyriadPro-Regular.otf');
}
@font-face { 
font-family: MyriadPro-Regular; 
src: url('../fonts/MyriadPro-Regular.woff');
}
@font-face { 
font-family: MyriadPro-Regular;
src: url('../fonts/MyriadPro-Regular.eot');
}
@font-face { 
font-family: MyriadPro-Regular; 
src: url('../fonts/MyriadPro-Regular.ttf');
}

@font-face { 
font-family: original_MyriadPro-Semibold; 
src: url('../fonts/original_MyriadPro-Semibold.otf');
}
@font-face { 
font-family: original_MyriadPro-Semibold; 
src: url('../fonts/original_MyriadPro-Semibold.woff');
}
@font-face { 
font-family: original_MyriadPro-Semibold;
src: url('../fonts/original_MyriadPro-Semibold.eot');
}
@font-face { 
font-family: original_MyriadPro-Semibold; 
src: url('../fonts/original_MyriadPro-Semibold.ttf');
}

@font-face { 
font-family: MyriadPro-BoldCondIt; 
src: url('../fonts/MyriadPro-BoldCondIt.otf');
}
@font-face { 
font-family: MyriadPro-BoldCondIt; 
src: url('../fonts/MyriadPro-BoldCondIt.woff');
}
@font-face { 
font-family: MyriadPro-BoldCondIt;
src: url('../fonts/MyriadPro-BoldCondIt.eot');
}
@font-face { 
font-family: MyriadPro-BoldCondIt; 
src: url('../fonts/MyriadPro-BoldCondIt.ttf');
}

.col-md-4 {
    width: 0px !important;
}

a{
	text-decoration: none !important;
}

.navbar-default {
    -webkit-box-shadow: 0px 10px 7px -1px rgba(0,0,0,0.44);
    -moz-box-shadow: 0px 10px 7px -1px rgba(0,0,0,0.44);
    box-shadow: 0px 10px 7px -1px rgba(0,0,0,0.44);
}

/*----sección menu----*/
.navbar-default{
	position: fixed !important;
	z-index: 1000000000000000000;
	width: 100% !important;
	background-color: #ffffff !important;
	padding-bottom: 30px;
}

.navbar-brand {
  	padding: 0px;
}

.logo{
	position: absolute;
	min-width: 200px;
	min-height: 124px;
	top: 10px;
}

.logo2{
	position: absolute;
	top: 5px;
	right: 30px;
}

@media(max-width: 440px){
	.logo{
		width: 10% !important;
		position: absolute;
		min-width: 100px;
		min-height: 50px;
		top: 4px;
	}
	.imglacteos{
		display: none;
	}

	.botontodoslosproductos{
		background-color: #753e02 !important;
		border-color: #753e02 !important;
		border-radius: 50px !important;
		width: 100%;
		font-size: 12px !important;
	}
}

@media(max-width: 990px){
	.logo2{
		display: none;
	}
}
.opciones{
	font-family: MyriadPro-BoldCondIt;
	color: #753e02 !important;
	font-size: 20px !important;
}

.opciones:hover{
	color: #d57602 !important;
}

@media(max-width: 1173px){
	.opciones{
		font-size: 18px !important;
	}	
}

@media(max-width: 1013px){
	.opciones{
		font-size: 15px !important;
	}	
}

.brand-centered {
	display: flex;
	justify-content: center;
	position: absolute;
	width: 100%;
	top: 0;
	right: 67px;
}

@media(max-width: 1187px){
	.brand-centered {
		right: 56px;
	}	
}

@media(max-width: 1145px){
	.brand-centered {
		right: 66px;
	}	
}

.brand-centered .navbar-brand {
  	display: flex;
  	align-items: center;
}

.navbar-toggle {
    z-index: 1;
}

.navbar-alignit .navbar-header {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
/*	height: 50px;*/
}

.navbar-alignit .navbar-brand {
	top: 50%;
	display: block;
	position: relative;
	height: auto;
	transform: translate(0,-50%);
	margin-right: 15px;
  	margin-left: 15px;
}

.navbar-nav>li>.dropdown-menu {
	z-index: 9999;
}

.redessociales{
	background-image: url("../img/tablita.png");
	min-width: 60px;
	min-height: 125px;
	background-repeat: no-repeat;
	position: fixed;
	top: 120px;
	right: 0px;
	z-index: 1;
}

li{
	list-style:none;
}

.coloricono{
	color: #753e02 !important;
}

.facebook{
	font-size:24px !important;
	color: #Comprasgourmet.123# !important;
	cursor: pointer;
 	position: absolute;
	top: 24px;
	right: 10px;
}

.facebook:hover{
	color: #753e02 !important;
}

.instagram{
	font-size:24px !important;
	color: #Comprasgourmet.123# !important;
	cursor: pointer;
 	position: absolute;
	top: 60px;
	right: 10px;
}

.instagram:hover{
	color: #753e02 !important;
}

.navbar-right {
    margin-right: 3% !important;
}

/*----sección banner----*/
.banner{
	background-image: url("../img/fondo1.png");
    background-size: 100% ;
    background-repeat: no-repeat;
    position:relative;
}

.imglacteos{
	position: relative;
	width: 100%;
	float: right;
}

.fondos{
	padding-right: 0px !important;
	padding-left: 0px !important;
}

.lacteos2{
	position:relative;
	margin-top: 320px;
	margin-bottom: 150px;
}

.parrafo1{
	position: relative;
	margin-top: 330px;
}

@media(max-width: 980px){
	.parrafo1{
		margin-top: -630px;
	}	
}

@media(max-width: 830px){
	.parrafo1{
		margin-top: -448px;
	}	
}

@media(max-width: 638px){
	.parrafo1{
		
	}	
}

@media(max-width: 440px){
	.parrafo1{
		
	}	
}

.text1{
	font-family: carosello-Regular;
	font-size: 120px;
	color: #753e02;
	line-height: 0px;	
	text-shadow: -10px -10px 10px #fff, 10px -10px 10px #fff, -10px 10px 10px #fff, 10px 10px 10px #fff;
}

@media(max-width: 1087px){
	.text1{
		font-size: 80px;
	}	
}

@media(max-width: 565px){
	.text1{
		font-size: 50px;
	}	
}

@media(max-width: 410px){
	.text1{
		font-size: 40px;
	}	
}

.text3{
	font-family: carosello-Regular;
	font-size: 120px;
	color: #753e02;
	line-height: 0px;
	text-shadow: -10px -10px 10px #fff, 10px -10px 10px #fff, -10px 10px 10px #fff, 10px 10px 10px #fff;
}

@media(max-width: 1087px){
	.text3{
		font-size: 80px;
	}	
}

@media(max-width: 565px){
	.text3{
		font-size: 50px;
	}	
}

@media(max-width: 410px){
	.text3{
		font-size: 40px;
	}	
}

.text2{
	font-family: MyriadPro-Bold;
	font-size: 80px;
	color: #d57602;
	line-height: 150px;
	letter-spacing: -4px;
	text-shadow: -10px -10px 10px #fff, 10px -10px 10px #fff, -10px 10px 10px #fff, 10px 10px 10px #fff;
}

@media(max-width: 1087px){     
	.text2{         
		font-size: 55px;         
		line-height: 98px;
		}
	}

@media(max-width: 565px){     
	.text2{         
		font-size: 38px;         
		line-height: 60px;
		}
	}

@media(max-width: 410px){
	.text2{
		font-size: 35px;
		line-height: 30px;
	}	
}


/*----sección productos----*/

@media(max-width: 440px){
	.sliderpro{
		margin-top: -80px;
	}	
}


.fondo2{
	position: relative;
	width: 100%;
	margin-top: -815px;
	z-index: -1;
}


@media(max-width: 911px){
	.fondo2{
	margin-top: -582px;
	}	
}

@media(max-width: 640px){
	.fondo2{
	margin-top: -382px;
	}	
}

@media(max-width: 410px){
	.fondo2{
	margin-top: -248px;
	}	
}

.divproductos{
	text-align: center;
	/*margin-top: -199px;*/
}

@media(max-width: 1128px){
	.divproductos{
	margin-top: -150px;
	}	
}

@media(max-width: 885px){
	.divproductos{
	margin-top: -100px;
	}	
}

@media(max-width: 640px){
	.divproductos{
	margin-top: -50px;
	}	
}

@media(max-width: 440px){
	.divproductos{
	margin-top: -230px;
	}	
}

.productos{
	font-family: carosello-Regular;
	font-size: 50px;
	color: #753e02;
	line-height: 0px;
}

@media(max-width: 440px){
	.productos{
		font-size: 40px;
	}	
}

.marcas{
width: 100%
}

@media(max-width: 753px){
	.marcas{
		width: 100%;
	}	
}

@media(max-width: 380px){
	.marcas{
		width: 160%;
	}	
}

.principales{
	font-family: MyriadPro-Bold;
	font-size: 33px;
	color: #d57602;
}

@media(max-width: 440px){
	.principales{
		font-size: 25px;
	}	
}

.textproductos{
	font-family: MyriadPro-Regular;
	font-size: 15px;
}

.slider {
    width: 100%;
    margin: 100px auto;
}

.slick-slide {
    margin: 0px 0px;
}

.slick-slide img {
    width: 100%;
}

.slick-slide {
    transition: all ease-in-out .3s;
    opacity: .2;
}
    
.slick-active {
    opacity: .5;
}

.slick-current {
    opacity: 1;
}

/*----Quienes somos----*/
.quinessomos{
	position: relative;
	margin-top: 50px;
}

@media(max-width: 440px){
	.quinesomos{
		margin-top: -400px !important;
	}	
}

.quinessomosimagen{
	margin-top: 0px;
}

@media(max-width: 440px){
	.quinessomosimagen{
		margin-top: 100px;
	}	
}


.quienes{
	font-family: carosello-Regular;
	font-size: 45px;
	color: #753e02;
	line-height: 0px;
	margin-bottom: 40px;
}

.somos{
	font-family: MyriadPro-Bold;
	font-size: 25px;
	color: #d57602;
}

.centrar{
	text-align: center;
}

.lacteosdelcentro{
	margin-left: 30px;
}

@media(max-width: 1176px){
	.lacteosdelcentro{
		width: 100%;
		height: 100%;
	}	
}

@media(max-width: 755px){
	.lacteosdelcentro{
		width: 50%;
		height: 50%;
		margin-top: -20px;
	}	
}

@media(max-width: 410px){
	.lacteosdelcentro{
		width: 70%;
		height: 70%;
		margin-top: -75px;
	}	
}

@media(max-width: 718px){
	.logosdos{
		margin-top: 22px;
		margin-left: 130%;
	}	
}

@media(max-width: 380px){
	.logodos{
		margin-left: 161%;
	}	
}

/*----Galeria de productos----*/
.col-md-3{
	padding-right: 0px !important;
	padding-left: 0px !important;
}

.galeria{
	margin-top: 50px;
}

.imagengaleria{
	width: 100%;
	height: 100%;
}

.view-first .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background-color: rgba(213,118,2, 0.7);
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}

.view-first:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}

.view .mask,.view .content {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	top: 0;
}

.view h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   background: rgba(0, 0, 0, 0.8);
   margin: 20px 0 0 0;
}

.view p {
   font-family: carosello-Regular;
   font-size: 40px;
   position: relative;
   color: #fff;
   padding: 98px 20px 20px;
   text-align: center;
}

.view a.info {
   display: inline-block;
   text-decoration: none;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
   font-family: MyriadPro-Bold;
   text-align: center;
   margin-left: 109px;
}

.view a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}


/*----Contacto----*/
.contacto{
	margin-top: 100px;
}

.contactoe{
	font-family: carosello-Regular;
	font-size: 45px;
	color: #753e02;
	line-height: 0px;
}

.informes{
	font-family: MyriadPro-Bold;
	font-size: 25px;
	color: #d57602;
}

.direccion{
	font-family: original_MyriadPro-Semibold;
	font-size: 15px;
}

.telefono{
	font-family: original_MyriadPro-Semibold;
	font-size: 15px;
	margin-top: 15px;
}


.telefono2{
	font-family: original_MyriadPro-Semibold;
	color: #743d03;
	font-size: 18px;
	margin-top: 15px;
	text-decoration: none !important;
}

.telefono2:hover{
	color: #d57602;
}

.correo{
	font-family: original_MyriadPro-Semibold;
	font-size: 15px;
	margin-top: 10px;
}

.fondofor{
	width: 100%;
	position: absolute;
	top: 0px;
	z-index: -1;
}

iframe {
 max-width: 100%;
 max-width: 100%;
}

@media(max-width: 1192px){
	.fondofor{
		top:40px;
	}	
}

@media(max-width: 960px){
	.fondofor{
		top:80px;
	}	
}

@media(max-width: 756px){
	.fondofor{
		top:50px !important;
	}	
}

.form-control{
	width: 80% !important;
	border-radius: 50px !important;
	border: 1px solid #d57602 !important;
	height: 50px !important;
	margin-top: 30px;
}

@media(max-width: 380px){
	.form-control{
		width: 100% !important;
		height: 40px !important;
		margin-top: 20px;
	}	
}

.form-group {
    margin-bottom: 130px !important;
    margin-top: 100px !important;
}

@media(max-width: 748px){
	.form-group{
		margin-left: 100px !important;
		padding-top: 100px !important;
	}	
}

@media(max-width: 552px){
	.form-group{
		margin-left: 40px!important;
		padding-top: 60px !important;
		width: 95% !important;
		margin-top: 10px;
	}	
}

@media(max-width: 380px){
	.form-group{
		margin-left: 10px!important;
	}	
}

.formulario{
	margin-top: 70px;
}

@media(max-width: 552px){
	.formulario{
		margin-top: -100px;
		margin-bottom: -96px;
	}	
}

.separacioninput{
	margin-top: 10px !important;
}

@media(max-width: 410px){
	.separacioninput{
		margin-top: -8px !important;
	}	
}

.separacionboton{
	margin-top: 30px;
}

.centrado{
	text-align: center;

}

.textboton{
	font-family: MyriadPro-Bold;
	font-size: 16px;
	color: #ffffff;
}

.botontodoslosproductos{
	background-color: #753e02 !important;
	border-color: #753e02 !important;
	border-radius: 50px !important;
}

.botontodoslosproductos:hover{
	background-color: #d57602 !important;
	border-color: #d57602 !important;
}

.naranja{
	background-color: #753e02 !important;
	border-color: #753e02 !important;
	border-radius: 50px !important;
	width: 30px !important;
	width: 113px !important;
	height: 37px !important;
	margin-left: -52px;
}

.naranja:hover{
	background-color: #d57602 !important;
	border-color: #d57602 !important;
}


/*----footer----*/
.footer{
	margin-top: 30px;
}

.derechos{
	font-family: original_MyriadPro-Semibold;
	font-size: 13px;
	color: #292f52;
}

.e3creativa{
	font-family: original_MyriadPro-Semibold;
	font-size: 13px;
	color: #753e02;
	text-decoration: none !important;
}

.e3creativa:hover{
	color: #d57602;
}

/*SUCURSALES*/
.seccionsucursales{
   background-image: url("../img/fondosucursales.png");
   background-size: cover;
   background-repeat: repeat;
   position: relative;
   z-index: 1;
}

.sucu{
	font-family: MyriadPro-Regular;
	font-size: 15px;
}

/*.sucur{
	position: relative;
	margin-top: 20px;
}*/

* {box-sizing: border-box}

.tab {
	position: relative;
	margin-top: 200px;
    float: left;
  /*  height: 300px;*/
}

/* Style the buttons inside the tab */
.tab button {
    display: block;
    background-color: inherit;
   
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
 
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #db8828;
}

/* Create an active/current "tab button" class */
.tab button.active {
    background-color: #db8828;
}

/* Style the tab content */
.tabcontent {
	position: relative;
    float: left;
    margin-top: 200px;
}


/* Main carousel style */
.carousel {
    width: 100%;
}

/* Indicators list style */
.article-slide .carousel-indicators {
	margin-top: 50px;
    bottom: 0;
    left: 0;
    margin-left: 5px;
    width: 100%;
}
/* Indicators list style */
.article-slide .carousel-indicators li {
    border: medium none;
    border-radius: 0;
    height: 54px;
    margin-bottom: 5px;
    margin-left: 0;
    margin-right: 5px !important;
    margin-top: 0;
    width: 100px;
}
/* Indicators images style */
.article-slide .carousel-indicators img {
    border: 2px solid #FFFFFF;
    float: left;
    height: 102px;
    left: 0;
    width: 100px;
}
/* Indicators active image style */
.article-slide .carousel-indicators .active img {
    border: 2px solid #428BCA;
    opacity: 0.7;
}

.direccion2{
	position: relative;
	margin-top: 100px;
	font-family: MyriadPro-Bold;
	font-size: 20px;
	color: #d57602;

}

.botonmapas{
	background-color: #743d03 !important;
	border: 3px solid #d67602 !important;
}

.botonmapas:hover{
	background-color: #d57602 !important;
	border-color: #d57602 !important;
}

.fondosucursal{
	background-image: url("../img/fondoimagenes.jpg");
    background-size: 97%;
    background-repeat: no-repeat;
    position:relative;
    z-index: 100000;
}


.direccion3{
	font-family: MyriadPro-Regular;
	font-size: 15px;
}



  
      /* Ensure elements load hidden before ScrollReveal runs */
      .sr .fooReveal { visibility: hidden; }

      /* add perspective to your container */
      .fooContainer { perspective: 800px; }

/*.suscursa{
 display: block;
}
*/
@media(max-width: 440px){
	.suscursa, .suscursa2222{
		display: none;
	}
}


.responsivesec{
	display: none;
	position: relative;
	padding-top: 104px;
}

@media(max-width:440px){
  .responsivesec{
    display: block;
  } 
}

.sucu2{
display: block;
background-color: transparent;
width: 80%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
}

.sucu2:hover{
	background-color: #d67602;
}



.distribuidores{
	position: relative;
	padding-top: 200px;
}

.fondodistribuidores{
	background-image: url("../img/fondodistribucion.png");
    background-size: 100%;
    background-repeat: no-repeat;
    position:relative;
    z-index: 100000;
    margin-top: 50px;
    padding-bottom: 150px;
}

.mapa{
	width: 80%;
	position: relative;
	margin-top: 100px;
}

@media(max-width: 977px){
	.mapa{
		top:-40px;
	}	
}

.globitooaxaca{
	background-image: url("../img/globito.png");
	background-repeat: no-repeat;
	position: absolute;
	top: 518px;
	left: 549px;
	cursor: pointer;
	width: 43px;
	height: 63px;
	z-index: 1;
}

.globitooaxaca:hover{
	-webkit-transform:scale(1.3);
	transform:scale(1.3);
	background-image: url("../img/globitonaranja.png");
	background-repeat: no-repeat;
}

@media(max-width: 1100px){
	.globitooaxaca{
		top:430px;
		left: 449px;
		width: 4%;
	}	
}

@media(max-width: 977px){
	.globitooaxaca{
		top:330px;
		left: 349px;
		width: 4%;
	}	
}

.globitopuebla{
	background-image: url("../img/globito.png");
	background-repeat: no-repeat;
	position: absolute;
	top: 415px;
	left: 498px;
	z-index: 1;
	cursor: pointer;
	width: 43px;
	height: 63px;
}

.globitopuebla:hover{
	-webkit-transform:scale(1.3);
	transform:scale(1.3);
	background-image: url("../img/globitonaranja.png");
	background-repeat: no-repeat;
}

@media(max-width: 1100px){
	.globitopuebla{
		top:360px;
		left: 420px;<
		width: 3%;
	}	
}

@media(max-width: 977px){
	.globitopuebla{
		top:260px;
		left: 320px;
		width: 3%;
	}	
}

.globitoveracruz{
	background-image: url("../img/globito.png");
	background-repeat: no-repeat;
	position: absolute;
	top: 446px;
	left: 610px;
	z-index: 1;
	cursor: pointer;
	width: 43px;
	height: 63px;
}

.globitoveracruz:hover{
	-webkit-transform:scale(1.3);
	transform:scale(1.3);
	background-image: url("../img/globitonaranja.png");
	background-repeat: no-repeat;
}

@media(max-width: 1100px){
	.globitoveracruz{
		top:380px;
		left: 510px;
		width: 4%;
	}	
}

@media(max-width: 977px){
	.globitoveracruz{
		top:270px;
		left: 380px;
		width: 3%;
	}	
}

.globitotlaxcala{
	background-image: url("../img/globito.png");
	background-repeat: no-repeat;
	position: absolute;
	top: 370px;
	left: 466px;	
	z-index: 1;
	cursor: pointer;
	width: 43px;
	height: 63px;
}

.globitotlaxcala:hover{
	-webkit-transform:scale(1.3);
	transform:scale(1.3);
	background-image: url("../img/globitonaranja.png");
	background-repeat: no-repeat;
}

@media(max-width: 1100px){
	.globitotlaxcala{
		top:330px;
		left: 389px;
		width: 3%;
	}	
}

@media(max-width: 977px){
	.globitotlaxcala{
		top:239px;
		left: 300px;
		width: 3%;
	}	
}

@media(max-width: 763px){
	.globitotlaxcala, .globitoveracruz, .globitopuebla, .globitooaxaca {
		display: none;
	}	
}

.globitomorelos{
	background-image: url("../img/globito.png");
	background-repeat: no-repeat;
	position: absolute;
	top: 400px;
	left: 426px;	
	z-index: 1;
	cursor: pointer;
	width: 43px;
	height: 63px;
}

.globitomorelos:hover{
	-webkit-transform:scale(1.3);
	transform:scale(1.3);
	background-image: url("../img/globitonaranja.png");
	background-repeat: no-repeat;
}

/*--------------estilos tablas------------*/
/*----------------------------------------*/
/*----------------------------------------*/
#customers {
    width: 100%;
}

#customers td, #customers th {
    border: 1px solid #ddd;
    padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}
/*
#customers tr:hover {background-color: #ddd;}*/

#customers th {
    padding-top: 12px;
    padding-bottom: 12px;
/*    text-align: left;*/
	text-align: center;
    background-color: #743d03;
    color: white;
}
