/***
*
*Hoja de Estilos Xima Distribuciones - 2019 V1.0
*Creado por Proyectos web.
*
* */

/**------------------------Inicio Generales--------------------------------------------**/

body {
  padding-top: 0px;
  font-family: 'sans-serif','Helvetica','Verdana','Monaco';
}

@media (min-width: 992px) {
  body {
    padding-top: 10px;
  }
}

body{
	background-color:white;
}

@font-face{
	font-family: SerifaLightItalicBT;
	src:url(../fonts/SerifaLightItalicBT.ttf);
}

@font-face{
	font-family: Aileron-Italic;
	src:url(../fonts/Aileron-Italic.ttf);
}

@font-face{
	font-family: Aileron-Black;
	src:url(../fonts/Aileron-Black.ttf);
}

@font-face{
	font-family:Playlist Script;
	src:url(../fonts/PlaylistScript.otf);
}

.colorText{
	color:#f41111;
}

.SerifaLight{
	font-family: SerifaLightItalicBT;
}

.AileronItalic{
	font-family: Aileron-Italic;
}

.AileronBlack{
	font-family: Aileron-Black;
}

.marginEspecialTop{
	margin-top: 45px;
	/*Anterior 95*/
}

/**-------------------------Fin de Generales-----------------------------------------**/

/**Inicio-------------------- VIDEO ---------------------------------------------------**/

.header{
	height: 100vh;
	display:flex;
	align-items: center !important;
	
}

.content{
max-width: 1020px;
padding-left: 0;
padding-right: 0;
margin: auto;
text-align:center;
align-items: center !important;
}
/**.contenido{
	max-width: 49rem;
	padding-left: 1rem;
	padding-right: 1rem;
	margin: auto;
	text-align: center;
}**/

/*.header-video{
	position:absolute;
	top: 1;
	left: 0;
	width: 98vw;
	height: 100vh;
	overflow: hidden !important;
	z-index: -1;
}

.header-video video{
	min-width: 100%;
	overflow: hidden !important; 	
	min-height: 100vh;
	color: #00BB2D;
}*/

.header-video{
	position:absolute;
	top: 1;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	z-index: -1;
}

.header-video video{
	min-width: 100%;
	min-height: 100%;
	color: #00BB2D;

}

.header-overlay{
	height: 100vh;
	width: 100%;
	position: absolute;
	background: #6aa84f;
	top: 1;
	left: 0;
	opacity: .75;
	z-index: 1;
}

.header-content h1{
	position: absolute;
	font-size: 9rem;
	margin-bottom: 0;
	font-family: 'Playlist Script';
	text-align:center;
	top: 40%;
	margin-left: 5vw;
	transform: translateY(-70%);
	z-index: 2;
	color: #fff;
}

.header-content p{
	position: absolute;
	font-size: 3rem;
	margin-bottom: 0;
	margin-top: 0;
	text-align:center;
	top: 70%;
	margin-left: 3vw;
	transform: translateY(-70%);
	z-index: 2;
}


.header-content{
	overflow: hidden !important;
}


.section-EcoMateriales{
	padding-top: 0;
}

.Space-EcoMateriales{
	padding: 10px;
}

/**Inicio-------------------- Linea de Eco Materiales ---------------------------------------------------**/
hr{
	background-color: #6aa84f;
}
/**-------------------- FIN Linea de Eco Materiales ---------------------------------------------------**/

/**Inicio--------------------------Boton Redes Sociales-----------------------------------------**/
.link{
	color: #ffffff;
}
.link:hover{
	color: #ffffff;	
}

/**--------------------------Fin Boton Redes Sociales-----------------------------------------**/

/**Inicio------------------ Boton Enviar---------------------------------------------**/
.buttonSend{
	background-color:#f41111 !important;
	color:white !important;
}
.buttonSend:hover{
	background-color:#f41111 !important;
	color:white !important;
}
/**--------------------------Fin Boton Enviar-----------------------------------------**/

/**---------------------------Inicio Footer-------------------------------------------**/
.ColorFooter{
	background-color:#f41111 !important;
}
/**---------------------------Fin Footer-------------------------------------------**/

/**---------------------------Inicio Footer Bio -------------------------------------------**/
.ColorFooterBio{
	background-color:#6aa84f !important;
}
/**---------------------------Fin Footer Bio-------------------------------------------**/

/**----------------------------Redes Sociales-----------------------------------------**/
.social{
	font-size: 30px;
	color:white;
	margin-left: 15px !important;
	
}

/**----------------------------Redes Sociales------------------------------------------**/

/**-------------------------------Start NavBar-----------------------------------------**/
.navBarColor{
	background-color: #fcfcfc;
}
.formatoNavLink{
	Color:black !important;
	font-size: 1.1REM !important;
	
}
.nav-link:hover{
	background-color: #f41111 !important;
	Color:white !important;
	border-radius: 3.5px;
}
.nav-link2{
	background-color: #ffffff !important;
	Color:#969090 !important;
	border-radius: 3.5px;
	font-size: 1.2REM !important;
}
.nav-link2tel{
	background-color: #ffffff !important;
	Color:#969090 !important;
	border-radius: 3.5px;
	font-size: 1REM !important;
}

.navbar-toggler-icon {
  background-image: url("../images/bars.png")!important;
  border-color: red !important;
}
/**------------------------------- End NavBar------------------------------------------**/

/**-------------------------------Inicio Carrousel-------------------------------------**/

.carousel-item {
  width: 100%;
  height: 35vh;
  min-height: 530px;
  /*background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;*/
  background-repeat: no-repeat;
	-webkit-background-size: 100% 100%;         /* Safari 3.0 */
     -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
       -o-background-size: 100% 100%;           /* Opera 9.5 */
          background-size: 100% 100%;  /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
}

.carousel-control-prev-icon {
  background-image: url("../images/FlechaIzq.png");
}
.carousel-control-next-icon {
  background-image: url("../images/FlechaDerecha.png");
 }
.carousel-control-prev-icon,
 .carousel-control-next-icon {
  width:60px !important;
  height: 60px !important;
}
.carousel-indicators li {
  background-color: rgba(211, 12, 12, 0.502);
}
.carousel-indicators .active {
  background-color: #d30c0c;
  width: 25px !important;
  height: 10px !important;
}

.fondoCarrousel1{
	background-image: url('../images/carrusel/Productos-Alta-Calidad-1920-x-550.jpg');
	
}
.fondoCarrousel2{
	background-image: url('../images/carrusel/Paquete-Cafeteria-1920-x-550.jpg');
}
.fondoCarrousel3{
	background-image: url('../images/carrusel/Productos-Ecologicos-1920-x-550.jpg');	
}
.fondoCarrousel4{
	background-image: url('../images/carrusel/Paquete-Restaurantes-1920-x-550.jpg');	
}
.fondoCarrousel5{
	background-image: url('../images/carrusel/Materias-Primas-1920-x-550.jpg');	
}
.fondoCarrousel6{
	background-image: url('../images/carrusel/Paquete-Industria-1920-x-550.jpg');
	
}

/**---------------------------------Fin Carrousel------------------------------------------**/


/**---------------------------------Proveedores--------------------------------------------**/
.slider {
    background: white;
    height: 200px;
    margin: auto;
    overflow: hidden;
    position: relative;
    padding: 20px;
    width: 1420px;
}

.slider::before, .slider::after {
    background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
    content: "";
    height: 100%;
    position: absolute;
    width: 100px;
    z-index: 2;
}

.slider::after {
    right: 0;
    top: 0;
    -webkit-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
}

.slider::before {
    left: 0;
    top: 0;
}

.slider .slide-track {
    animation: scroll 80s linear infinite;
    display: flex;
    width: calc(500px * 18);

}

.slider .slide-track:hover {
    animation-play-state: paused;
}

.slider .slide-2 {
    height: 250px;
    width: 500px;
}


.slide-2:nth-child(1), .slide-2:nth-child(10) {
    background-image: url(../images/Proveedor01.png);
}

.slide-2:nth-child(2), .slide-2:nth-child(11) {
    background-image: url(../images/Proveedor02.png);
}

.slide-2:nth-child(3), .slide-2:nth-child(12) {
    background-image: url(../images/Proveedor03.png);
}

.slide-2:nth-child(4), .slide-2:nth-child(13) {
    background-image: url(../images/Proveedor01.png);
}

.slide-2:nth-child(5), .slide-2:nth-child(14) {
    background-image: url(../images/Proveedor02.png);
}

.slide-2:nth-child(6), .slide-2:nth-child(15) {
    background-image: url(../images/Proveedor03.png);
}

.slide-2:nth-child(7), .slide-2:nth-child(16) {
    background-image: url(../images/Proveedor01.png);
}

.slide-2:nth-child(8), .slide-2:nth-child(17) {
    background-image: url(../images/Proveedor02.png);
}

.slide-2:nth-child(9), .slide-2:nth-child(18) {
    background-image: url(../images/Proveedor03.png);
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-500px * 9));
    }
}

/**---------------------------------Fin Proveedores----------------------------------------**/

/**---------------------------------Anclas--------------------------------------------------**/
.ancla{
      display: block;
      margin-top: -100px;
      height: 120px;
      visibility: hidden;
}
/**Fin Anclas**/



/**Productos**/
.icon{
	margin-top: 30px;
}
/**Fin de Productos**/

/**Inicio Maps**/
.map2{
	width: 100%;
	height: 400px;
	margin-top: 30px;
	border-color: #EA9314;
	border-style: 1;
}
.linkcontacto{
	text-decoration: none;
	color: #969090;
	font-size: 1.2rem;
}

/**------------------------------------Fin Maps-------------------------------------------------**/

/**--------------------------------PRODUCTOS INSTITUCIONALES-----------------------------------------**/
.ProductosInstitucionales{
	background-image: url(../images/ProductosInstitucionales.jpg)!important;
	background: no-repeat center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/**---------------------------------FIN DE PRODUCTOS INSTITUCIONALES--------------------------------------**/

/**--------------------------------MATERIAS PRIMAS-----------------------------------------**/
.MateriaPrima{
	background-image: url(../images/MateriaPrima.jpg)!important;
	background: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
   background-size: cover;
   height: 550px;
  
}

.fontSizeMP{
	  font-size: 1.25rem !important;
  	font-weight: 300 !important;
}



/**--------------------------------FIN MATERIAS PRIMAS--------------------------------------**/

/**---------------------------------QUIENES SOMOS-------------------------------------------**/
.QuienesSomos{
	background-image:  url(../images/QuienesSomos.png)!important;
	background: no-repeat center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 580px;		
}
/*--------------------------------- craear opacidad en imagen-------------------------------------------*/
.QuienesSomos:before {
	content:'';
	position: absolute;
    top: 103px;
	bottom: 0;
	left: 0;
	height: 580px;
	right: 0;
	background-color: rgba(0,0,0,0.4);
}

.QuienesSomos h1{
	font-size: 60px;
}

.frase{
	background-image:  url(../images/imgFrase.png)!important;
	background: no-repeat center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 500px;
	margin-top: -35px;
}

.frase p{
	font-size: 35px;
}

.fontSizeQuienesSomos{
	  font-size: 1.25rem !important;
  	font-weight: 300 !important;
}

/**------------------------------- Misión y visión----------------------------------------------**/
[class*=" imghvr-"] figcaption, [class^="imghvr-"] figcaption {
    background-color: #f41111;
    text-align: center;
}
[class*=" imghvr-"], [class^="imghvr-"] {
    background-color: #f41111;
    color: #fff;
        text-align: center;
}
/**------------------------------- Misión y visión----------------------------------------------**/
/**--------------------------------Valores------------------------------------------------------**/

.valores{
    background-image:  url(../images/Valores.png)!important;
	background: no-repeat center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 450px;
}


.ValorImagen{
	width: 200px;
	height: 200px;

}


/**-------------------------------- Fin de Valores------------------------------------------------------**/


/**-------------------------------- PORQUE ELEGIRNOS------------------------------------------------------**/

.opcionImagen{
	width: 200px;
	height: 220px;
}

.tiempoentrega{
	color:#E94F1D;
	font-size: 22px;
}
.atenciop{
	color:#16B09E;
	font-size: 22px;
}
.pedidosv{
	color:#109096;
	font-size: 22px;
}
.variedadp{
	color:#68BA83;
	font-size: 22px;
}
.preciosc{
	color:#F9B233;
	font-size: 22px;
}
.enviosmx{
	color:#8163A8;
	font-size: 22px;
}


/**-------------------------------- Fin de Valores------------------------------------------------------**/

/**---------------------------------Start Responsive Cels----------------------------------------**/

@media (min-width: 0px) and (max-width: 479px) {
	 	.cardMargen{
		margin-left:0%;
		}
		.misionVision{
			height: 400px;
		}
		.cards{
			 margin-top: 25px;
		}
		.fondoCarrousel1{
			background-image: url('../images/carrusel/Productos-Alta-Calidad-425-x-850.jpg');							
		}
		.fondoCarrousel2{			
			background-image: url('../images/carrusel/Paquete-Cafeteria-425-x-850.jpg');
		}
		.fondoCarrousel3{
			background-image: url('../images/carrusel/Productos-Ecologicos-425-x-850.jpg');					
		}
		.fondoCarrousel4{
			background-image: url('../images/carrusel/Paquete-Restaurantes-425-x-850.jpg');			
		}
		.fondoCarrousel5{
			background-image: url('../images/carrusel/Materias-Primas-425-x-850.jpg');		
		}
		.fondoCarrousel6{
			background-image: url('../images/carrusel/Paquete-Industria-425-x-850.jpg');
		}
		
		/**Modificación**/
		.fontSizeMP{
		 	 font-size: 1.0rem !important;
	  		 font-weight: 150 !important;
		}
		.MateriaPrima{
   			height: 600px !important;
  		}

  		.fontSizeQuienesSomos{
	  	font-size: 1.0 rem !important;
  		font-weight: 250 !important;
		}
		.QuienesSomos{
			height: 920px;
		}
		.QuienesSomos:before{	
			top: 87px;		
			height: 920px;
		}

		.frase{
			height: 600px;
		}

		.header-content h1{		
			font-size: 4rem !important;			
			top: 50%;
			margin-left: 8vw;
			transform: translateY(-50%);
			z-index: 2;
		}
		
		.header-content p{
			text-align: center !important;
			font-size: 2rem;
			margin-left: 0;
			top: 65%;
			transform: translateY(-50%);
			z-index: 2;
		}

		.slider{
		    width: 350px;
		}
		.oculta_UL{
			display: none;
		}
		.header-overlay{
			overflow: hidden !important; 
			height: 100vh;
			width: 100%;
			/*background: red;				*/
		}
		

}

@media (min-width: 480px) and (max-width: 768px) {
	 	.cardMargen{
			margin-left:5%;
		}
		.cards{
			 margin-top: 25px;
		}
		.fondoCarrousel1{
			background-image: url('../images/carrusel/Productos-Alta-Calidad-1440-x-894.jpg');						
		}
		.fondoCarrousel2{
			background-image: url('../images/carrusel/Paquete-Cafeteria-1440-x-894.jpg');
		}
		.fondoCarrousel3{
			background-image: url('../images/carrusel/Productos-Ecologicos-1440-x-894.jpg');				
		}
		.fondoCarrousel4{
			background-image: url('../images/carrusel/Paquete-Restaurantes-1440-x-894.jpg');		
		}
		.fondoCarrousel5{
			background-image: url('../images/carrusel/Materias-Primas-1440-x-894.jpg');	
		}
		.fondoCarrousel6{
			background-image: url('../images/carrusel/Paquete-Industria-1440-x-894.jpg');			
		}
			
		.fontSizeMP{
		 	 font-size: 1.0rem !important;
	  		 font-weight: 150 !important;
		}
		.MateriaPrima{
   			height: 600px !important;
  		}	

  		.grid figure {
  			margin-top:5px !important;
  		}
  		.fontSizeQuienesSomos{
		  	font-size: 1.0rem !important;
	  		font-weight: 280 !important;
		}
  		.QuienesSomos{
			height: 600px;
		}
		.QuienesSomos:before{
			top: 95px;
			height: 600px;
		}

		.header-content h1{			
			font-size: 5rem !important;						
			top: 50%;
			margin-left: 8vw;
			transform: translateY(-50%);
			z-index: 2;
		}
		.header-content p{			
			font-size: 2.2rem;
			top: 70%;
			transform: translateY(-50%);
			z-index: 2;
		}
		.slider{
		    width: 650px;
		}

		.header-overlay{
			overflow: hidden !important; 
			height: 100vh;
			width: 100%;
			/*background: orange;				*/
		}

	}

@media (min-width: 768px) and (max-width: 992px) {
	 	.cardMargen{
		margin-left:0%;
		}
		.cards{
			 margin-top: 25px;
		}
		.fontSizeMP{
		 	 font-size: 1.2rem !important;
	  		 font-weight: 200 !important;
		}
		.MateriaPrima{
   			height: 600px !important;
  		}	

  		.fontSizeQuienesSomos{
		  	font-size: 1.5rem !important;
	  		font-weight: 280 !important;
		}
  		.QuienesSomos{
			height: 730px;
		}
		.QuienesSomos:before{
			top: 6.3vh;
			height: 730px;
		}

		
		.header-content h1{
			font-size: 6rem !important;			
			text-align:center !important;	
			margin-left: 8vw;
			top: 40%;
			transform: translateY(-50%);
			z-index: 2;
		}		
		.header-content p{		
			font-size: 2.5rem;
			top: 60%;
			/*margin-left: 0vw;*/
			transform: translateY(-50%);
			z-index: 2;
		}
		.slider{
		    width: 900px;
		}
		.header-overlay{
			overflow: hidden !important; 
			height: 100vh;
			width: 100%;
			/*background: purple;				*/
		}		

}

@media screen > (min-width: 1024px) {
	 	.cardMargen{
		margin-left:0%;
		}			
}
/**------------------------------------End Responsive Cels--------------------------------------------**/


/**Codigo para Icono Flotante**/

.fab-container{
    position: fixed;
    bottom: 50px;
    right: 50px;
    z-index: 999;
    cursor:pointer;

}

.fab-icon-holder{
   width: 70px;
    height: 70px;
    border-radius: 100%;
    /**background: #d30c0c;**/
    background: #00BB2D;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
    
}

.fab-icon-holder:hover{
    opacity: 0.8;
}

.fab-icon-holder i{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 45px;
    color: #ffffff;
}

/** -----------------------------------------------Fab Icon Biodegradable-----------------------------------------------**/
.fab-icon-holderBio{
	width: 70px;
	 height: 70px;
	 border-radius: 100%;
	 background: #38761d;
	 box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
	 
 }

 .fab-icon-holderBio:hover{
    opacity: 0.8;
}

.fab-icon-holderBio i{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 35px;
    color: #ffffff;
}

/** -----------------------------------------------Fab Icon Biodegradable-------------------------------------------------**/




/*---------------------------------------------------------Animacion zom-------------------------------------------------------------------*/

.zoom {
	transition: 1.5s ease;
	-moz-transition: 1.5s ease;
	/* Firefox */
	-webkit-transition: 1.5s ease;
	/* Chrome - Safari */
	-o-transition: 1.5s ease;
	/* Opera */
  }
  .zoom:hover {
	transform: scale(1.08);
	-moz-transform: scale(1.08);
	/* Firefox */
	-webkit-transform: scale(1.08);
	/* Chrome - Safari */
	-o-transform: scale(1.08);
	/* Opera */
	-ms-transform: scale(1.08);
	/* IE9 */
  }

/*---------------------------------------------------------Fin Animacion zom-------------------------------------------------------------------*/