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

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

body {
  padding-top: 0px;
}

@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);
}

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

@font-face{
	font-family:aileron-light-italic;
	src:url(../fonts/aileron.light-italic.otf);
}

.colorText{
	color:#f41111;
}

.SerifaLight{
	font-family: SerifaLightItalicBT;
}

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

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

.marginEspecialTop{
	margin-top: 95px;
}

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


/**Inicio-------------------- Load Page---------------------------------------------------**/
.centrado{
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
.hidden{
	overflow: hidden;
}

.lds-roller {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fcf;
  margin: -4px 0 0 -4px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 63px;
  left: 63px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 68px;
  left: 56px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 71px;
  left: 48px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 72px;
  left: 40px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 71px;
  left: 32px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 68px;
  left: 24px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 63px;
  left: 17px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


.LoadPage-Fondo{
	position: fixed;
	font-size: 0px;
	margin-bottom: 0;
	text-align:center;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	opacity: 15%;
	z-index: -1;
}
.LoadPage-Titulo{
	font-size: 70px;
	margin-bottom: 0;
	top: 10px;
	padding: 10px;
	font-family: 'Allura';
	text-align:center;
	top: 0%;
}
.LoadPage-Links{
	top: 0px;
	padding: 0px;
	font-family: 'aileron-light-italic';
	z-index: 3;
	font-size: 35px;
}

.LoadPage-Logo{
	top: 30px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
/**-------------------------- load Page---------------------------------------------------**/


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

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

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

.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%;

}

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

.header-content h1{
	position: absolute;
	font-size: 150px;
	margin-bottom: 0;
	font-family: 'Playlist Script';
	text-align:center;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}

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

.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: #FF3333;
}
.link:hover{
	color: #FF3333;	
}

/**--------------------------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;
}
.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;
}

.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/Carrusel01.png');
}
.fondoCarrousel2{
	background-image: url('../images/Carrusel02.png');
}
.fondoCarrousel3{
	background-image: url('../images/Carrusel03.png');
}

/**---------------------------------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 {
    height: 250px;
    width: 500px;
}


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

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

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

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

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

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

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

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

.slide:nth-child(9), .slide: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;
}
/**------------------------------------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;
}

.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------------------------------------------------------**/


/**---------------------------------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/Carrusel01-479x720.png');
		}
		.fondoCarrousel2{
			background-image: url('../images/Carrusel02-425x720.png');
		}
		.fondoCarrousel3{
			background-image: url('../images/Carrusel03-425x720.png');
		}
		/**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;
		}

		.frase{
			height: 600px;
		}

		.header-content h1{
			position: absolute;
			font-size: 55px !important;
			margin-bottom: 0;
			font-family: 'Playlist Script';
			text-align:center;
			top: 50%;
			transform: translateY(-50%);
			z-index: 2;
		}
		
		.header-content p{
			position: absolute;
			font-size: 40px;
			margin-bottom: 0;
			margin-top: 0;
			text-align:center;
			top: 70%;
			transform: translateY(-50%);
			z-index: 2;
		}

		.slider{
		    width: 350px;
		}
		.LoadPage-Titulo{
			font-size: 35px;
		}	
}

@media (min-width: 480px) and (max-width: 768px) {
	 	.cardMargen{
			margin-left:5%;
		}
		.cards{
			 margin-top: 25px;
		}
		.fondoCarrousel1{
			background-image: url('../images/Carrusel01-767x720.png');
		}
		.fondoCarrousel2{
			background-image: url('../images/Carrusel02-767x720.png');
		}
		.fondoCarrousel3{
			background-image: url('../images/Carrusel03-767x720.png');
		}	
		.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;
		}

		.header-content h1{
			position: absolute;
			font-size: 105px !important;
			margin-bottom: 0;
			font-family: 'Playlist Script';
			text-align:center !important;
			top: 50%;
			transform: translateY(-50%);
			z-index: 2;
		}
		.slider{
		    width: 650px;
		}
		.LoadPage-Titulo{
			font-size: 50px;
		}
	}

@media (min-width: 768px) and (min-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;
		}

		
		.header-content h1{
			position: absolute;
			font-size: 125px !important;
			margin-bottom: 0;
			font-family: 'Playlist Script';
			text-align:center !important;
			top: 50%;
			transform: translateY(-50%);
			z-index: 2;
		}
		.slider{
		    width: 900px;
		}

}

@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;
    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: 35px;
    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-------------------------------------------------**/