/* utilidades */


* {margin:0; padding:0}
img,fieldset, abbr {border:none}
ul,li {list-style:none}

a {text-decoration: none}
a:hover {text-decoration: underline}

.ftl {float:left}
.ftr {float:right}
.clear:after {content:"."; clear:both; display:block; visibility: hidden; height:0;}
.hacked {overflow:hidden}

.hidden {display:none;}
.fixed {position:fixed; top:0}



html { font-size:100%}
body { font-size:62.5%; font-family: Arial, Helvetica, sans-serif; color:#666; text-align:center; background-color: #ececec}
	
legend, hr { display:none;}

.both { clear:both;}


html { font-size:100%}
body { font-size:62.5%; font-family: Arial, Helvetica, sans-serif; color:#666; text-align:center; background-color: #ececec}
	
legend, hr { display:none;}

.both {clear:both;}
	

	.wrapper0 {clear: both; font-size:100%; width: 920px; margin: 5em auto 0 auto; text-align:left; }
	.wrapper2 {position: relative; clear: both; width: 100%; margin-top: 50px }
	.wrapper3 {position: relative; clear: both; width: 100%; }
	
	
	.contenido { width: 920px;  text-align: left; margin-bottom: 40px; padding: 15px 15px 70px 15px; background-color: #fff  }
 		
	
	#social {height: 26px; padding: 6px 0; background-color: #222; padding-right: 3%}
	#social ul  {float: right;  }
	#social ul li {float: right; margin-right: 12px; }
	#social img {padding-top: 3px;}

	#social img.icoIg {width: 20px; height: 20px; margin-top: 1px; margin-right: 5px} 

	
	header {display: block; margin-bottom: 0; background-color: #fff }
	header #brand {margin: 18px 0 18px 0; }
	header #brand.interior img {margin-bottom: 20px}
	
	header #imgCab.home {position: relative; height: 559px; background: #fff url("../img/granja-de-huevos-velasco5.jpg") 0 0 no-repeat; text-align: left  }
	header #imgCab.granja {position: relative; height: 2px; background: #fff; text-align: center  } 
	header #imgCab.contactar {position: relative; height: 2px; background: #fff; text-align: center   } 
	header #imgCab.noticias {position: relative; height: 2px; background: #fff; text-align: center  } 
	header #imgCab.catalogo {position: relative; height: 2px; background: #fff; text-align: center  } 
	
	
	
	/* Granja */
	
	.back {border-top: 2px solid #fff; position: relative; height: 331px; margin: 0 0 80px 0; background: #fff url("../img/granja-de-huevos-3.jpg") 0 0 no-repeat; text-align: center  }
	.txt8 {position: absolute; top:11%; right: 10%; width: 580px; height: 256px; text-align: left;  background-color: #fff}
	.txt8 p {padding: 40px 30px 15px 40px; font-size: 28px; color: #333; text-align: left; line-height: 36px; font-weight: 300;}
	.txt8 span {padding-left: 40px; font-size: 19px; color: #f3ae2f; text-align: left; font-weight: 900;}
	
	
	nav {margin-bottom: 15px;}
	nav  li {display: inline; margin: 0 40px 0 0}
	nav a  {font-size: 12px; color: #333; font-weight: bold}
	nav a:hover {color: #b30926; text-decoration: none}
	nav  li.selected a {color: #c30437; }
	
	
	#menu2 {width:100%; margin: 0 0 15px 0; background-color:#FFF; z-index:1000 ;border: 1px solid #d4d4d4}
	#menu2  li {display: inline-block; margin: 0 40px 0 0; padding: 28px 0 28px 0 }
	#menu2  li.selected a {display: block; padding: 0 0 6px 0; border-bottom: 2px solid #f68a1f; color: #333}
	#menu2 a { font-size: 13px; color: #666; }
	#menu2 a:hover {color: #b30926; text-decoration: none; }
	

	
	#marque {position: absolute; bottom: 33%; left: 11%; }
	#marque p {width: 66%; padding: 0 0 15px 0; font-size: 36px; color: #fff; font-family: "Barlow", sans-serif; font-weight: 600; font-style: normal; line-height: 46px}
	#marque span {font-size: 26px; color: #e5e5e5; letter-spacing: 1px}
	
	#marque a.btnInfo {display: inline-block; background-color:#f68a1f; border-radius: 3px; color: #fff; margin-top: 30px; padding: 18px 40px 18px 40px; font-weight: bold; font-size: 13px } 
	#marque a.btnInfo:hover {color: #fff; background-color: #f47921; text-decoration: none;	} 
	#marque a.btnInfo2 {display: inline-block; color: #fff; margin-top: 40px; padding: 15px 35px 15px 35px; font-weight: bold; font-size: 13px; } 
	

	
		
	h1, h2 {padding: 40px 0 20px 0; font-family: Arial Rounded MT Std Light, arial, Helvetica; font-size: 28px; font-weight:normal; color: #404040; letter-spacing: 1px;}
	h1 {padding: 50px 0 0 0}	
	
	h3 {font-size: 18px; font-weight: normal; padding: 30px 0 25px 0; color: #ed1846; text-transform: uppercase; text-align: center; line-height: 26px} 
	
	
	.contenido .col1 {position: relative; float: left; width: 49%; margin-right: 2px;}
	.contenido .col2 {float: left; width: 49%}
	.contenido .col1 img, .contenido .col2 img {width: 100%; }
	
	.contenido .col1 img.icon, .contenido .col2 img.icon {width: initial}
	
	
	.contenido .txt, .contenido .txt2 {padding: 36px 50px 20px 50px; }
	.contenido .txt2 {padding-bottom: 28px }
	
	div.link {margin-top: 0; padding: 0 20px 30px 20px; text-align: center}
	div.link a { font-size: 15px; color: #5182d9; text-transform: uppercase; line-height: 22px;   }
		
			
	
	.contenido .txt  ul li , .contenido .txt2 ul li {text-align: center; font-size: 16px; font-weight: normal; line-height: 26px}
	.contenido p {text-align: center; font-size: 16px; font-weight: normal; line-height: 26px; margin-bottom: 18px}
	
	.contenido a.link {display: block; padding-top: 20px; color: #5182d9; font-size: 13px; text-transform: uppercase; text-align: center; }  
	.contenido a.link:hover {color: #b30926; text-decoration: none}

		

	.contenido  ul.iconos {display: block; text-align: center;}
	.contenido  ul.iconos li  { display: inline-block; width: 233px;  margin: 0 auto 38px auto; } 
	.contenido  ul.iconos  span  {margin-top: 14px; display: block; font-size: 12px; line-height: 18px; text-transform: uppercase}
	
	
	/* ficha */
	
	.ficha h3 { font-size: 24px; color: #333; margin: 0 0 5px 0; padding-top: 40px; }
	.ficha {position: relative; padding: 0 0 0 0}
	.fondo {background: #ececec url("../img/fondo-ficha.pngb") 0 490px no-repeat;   }
	
	.contenido .txt3 {position: relative; float: left; margin-left: 36px; width: 480px; height: 440px; text-align: right;   }
	.contenido .txt4 {float: left; width: 230px; padding-top: 10px; height: 440px; }
	
	.contenido .txt4 h4 {padding: 10px 0 12px 0; color: #b30926; text-align: left; font-size: 17px; font-weight: normal;   }
	.contenido .txt4 p {text-align: left; color: #666}
	
	.contenido .txt3 img.fProducto {margin-right: 10px}
			
	.contenido .txt3 ul {position: absolute; bottom: 10%; left: 27%; text-align: center}
	.contenido .txt3 ul li {display: inline-block; margin-right: 20px}
	.contenido .txt3 ul span  {margin-top: 12px; display: block; font-size: 22px; text-transform: uppercase}
	
	.btnI {position: absolute; top: 220px; left: 30px }
	.btnD {position: absolute; top: 220px; right: 35px }
	
	
	.dLoad {padding: 3em 4em 0 0; text-align: right;}
	.dLoad img {  width: 24px; height: 24px; margin-right: 6px }
	.dLoad a {float: right;  color: #333; font-size: 14px }
	.dLoad span {float: right; margin-top: 3px }
	
	
	/* Canal etico */
	
	.canal a.btnInfo {display: inline-block; width: 182px;  background-color:#f68a1f; border-radius: 3px; color: #fff; margin: 12px 0 5% 35%;  padding: 18px 40px 18px 40px; font-weight: bold; font-size: 13px; text-align: center } 
	.canal img.imgCanal {margin: 3% 0 6% 0}
	
	
	/* Contactar */
	
		
	#contactar2 .col2 li a {color: #5182d9}
	#contactar2 .col2 li  {margin-bottom: 12px}
	
	
	/* Estilos para el botón flotante de WhatsApp */
  .boton-whatsapp {
    position: fixed; /* Se queda fijo en la pantalla */
    width: 60px;
    height: 60px;
    bottom: 30px; /* Distancia desde abajo */
    right: 30px; /* Distancia desde la derecha */
    background-color: #25D366; /* Color verde de WhatsApp */
    color: #FFF;
    border-radius: 50px; /* Totalmente redondo */
    text-align: center;
    font-size: 30px;
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3); /* Sombra suave */
    z-index: 1000; /* Se asegura que esté por encima de todo */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
  }

  /* Efecto al pasar el ratón por encima */
  .boton-whatsapp:hover {
    transform: scale(1.1); /* Lo agranda un 10% */
    background-color: #128C7E; /* Verde más oscuro */
  }
	
	

	.wp-container-final { position: fixed; bottom: 20px; right: 20px; z-index: 999999; font-family: sans-serif; }
.wp-boton-click { width: 60px; height: 60px; background-color: #25d366; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.3); border: none; }

#wp-ventana-nueva { width: 320px; position: absolute; bottom: 75px; right: 0; background-color: #e5ddd5; border-radius: 10px; box-shadow: 0 5px 25px rgba(0,0,0,0.2); display: none; flex-direction: column; overflow: hidden; }

.wp-header-nueva { background: #075e54; color: white; padding: 10px 15px; display: flex; align-items: center; height: 50px; }
.wp-header-nueva img { width: 35px; height: 35px; border-radius: 50%; margin-right: 12px; background: #fff; flex-shrink: 0; }
.wp-header-text { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: left; }
.wp-header-text strong { font-size: 15px; line-height: 1.2; }
.wp-header-text span { font-size: 12px; opacity: 0.8; }
.wp-btn-cerrar { background: none; border: none; color: white; font-size: 28px; cursor: pointer; }

.wp-body-nuevo { padding: 15px; background-image: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png'); background-size: cover; }
.wp-burbuja-nueva { background: white; padding: 12px; border-radius: 0 10px 10px 10px; font-size: 14px; line-height: 1.4; color: #333; box-shadow: 0 1px 1px rgba(0,0,0,0.1); }

.wp-item-contacto { display: flex; align-items: center; gap: 10px; margin-top: 12px; text-decoration: none; color: #075e54; font-weight: bold; }
.wp-item-contacto svg { flex-shrink: 0; }

.wp-footer-nuevo { background: #f0f0f0; padding: 10px; display: flex; align-items: center; gap: 10px; }
.wp-input-falso { flex: 1; background: white; padding: 8px 15px; border-radius: 20px; font-size: 14px; color: #b0b0b0; border: 1px solid #e6e6e6; }

@media screen and (max-width: 480px) {
    #wp-ventana-nueva { width: 280px; right: 0; }
}
	

	
	
	/* Galeria fotos */

	
	.galeria .txt h3 {padding-bottom: 40px;}
	.galeria ul li {margin-bottom: 60px;}
	.galeria ul li p {font-size: 14px;}

	.galeria img { padding-bottom: 12px;}
	
	/* Noticias */
	
	.noticias .txt span, .noticias .txt2 span {display: block; padding: 1px 00 0; text-align: center; color: #333; font-size: 14px; background: #fff url("../img/icon-fecha.gif") 118px 0 no-repeat; }
	.noticias h3 {padding: 12px 0 12px 0;}
	
	.noticias .txt span.medio, .noticias .txt2 span.medio {background: none; font-size: 12px; margin-bottom: 17px; color: #999}
							
	
	form .text {float: left; width: 40%; height: 40px; border: 3px solid #f68a1f; margin: 0 6% 25px 0; color: #666; font-size: 16px; padding-left: 20px}
	
	form .coment {clear: both; float: left; width: 100%; margin-top: 20px; font-size: 16px; color: #666; }
	form  textarea {width: 90%; height: 180px; border: 3px solid #f68a1f; margin-top: 8px; padding: 20px; color: #666; font-size: 16px; font-family: arial;}
	
	form #lPrivacidad {display: block; clear: both; padding-top: 15px }
	form #lPrivacidad #cPrivacidad {float: left; width: 20px; height: 20px; margin-right: 10px }
	form #lPrivacidad p {text-align: left} 
	form #lPrivacidad a {color: #5182d9} 
	form #lPrivacidad a:hover {color: #f68a1f; text-decoration: none} 
	

	/* Inicializamos para Btn para Ipad/Iphone */
	
	form .btnEnviar {background-color: #f68a1f; border: none; font-size: 15px; color: #fff; margin-top: 25px; padding: 15px 35px 15px 35px; font-weight: bold; cursor:pointer; border-radius: 3px;  }
	

    .wrapper2 .capa-anti-eventos {width: 100%; height: 100%; position: absolute; cursor: pointer}


	
	footer {margin: 0 0 80px 0; padding: 0 0 140px 0; background-color: #f68a1f; border: 1px solid #fff}
	.contenidoFooter {text-align: center; width: 920px; height: 220px;  } 
	
	footer ul {float: left; display: inline; margin: 40px 30px 30px 30px; text-align: left   }
	footer ul li {color: #fff; line-height: 22px; }
	footer ul li.tit {color: #fff; padding-bottom: 12px}
	footer ul li.logo {padding-top: 40px}
	footer ul li, footer ul li a {font-size: 15px}
	
	footer ul li a {color: #fff;}
	
	
.img-contenedor img {
-webkit-transition:all 4s ease; /* Safari y Chrome */
-moz-transition:all 4s ease; /* Firefox */
-o-transition:all 4s ease; /* IE 9 */
-ms-transition:all 4s ease; /* Opera */
width:100%;
}
.img-contenedor:hover img {
-webkit-transform:scale(1.17);
-moz-transform:scale(1.17);
-ms-transform:scale(1.17);
-o-transform:scale(1.17);
transform:scale(1.17);
}
.img-contenedor {/*Ancho y altura son modificables al requerimiento de cada uno*/

position: relative;
width:925px;
height:526px;
overflow:hidden;

}



/* Aviso Legal & PrivacidaD */


.aLegal h3, .aLegal p, .aLegal ul li {text-align: left !important  }

.aLegal ul li {list-style: inside }
.aLegal ol li {list-style: upper}

.aLegal table {width: 100%; border: 1px solid #111; padding: 20px; margin-bottom: 25px; border: 1px solid #111}

.aLegal table td.col1 {width: 30%; font-weight: bold}
.aLegal table td.col2 {width: 60%; }
.aLegal table td {padding-bottom: 8px }


.aLegal table td, .aLegal ol li {font-size: 1.6em !important; padding-bottom: 8px; margin-left: 22px }
.aLegal table span {font-weight: bold}


.aLegal table.politica td.col1 {color: #f68b1f }



/* Botones */


.btnFoto {position: absolute; left: 340px; bottom: 48px;  font-size: 14px;  padding: 9px 20px 8px 20px; border: 3px solid #f3ae2f; text-align: center; z-index: 100;}
	
.btnFoto2 {position: absolute; left: 176px; bottom: 48px;  font-size: 14px;  padding: 9px 20px 8px 20px; border: 3px solid #f3ae2f; text-align: center; z-index: 100;}
.btnFoto3 {position: absolute; left: 640px; bottom: 48px;  font-size: 14px;  padding: 9px 20px 8px 20px; border: 3px solid #f3ae2f; text-align: center; z-index: 101;}	
	
.btnFoto4 {position: absolute; left: 35px; bottom: 48px;  font-size: 14px;  padding: 9px 20px 8px 20px; border: 3px solid #f3ae2f; text-align: center; z-index: 100;}
.btnFoto5 {position: absolute; left: 490px; bottom: 48px;  font-size: 14px;  padding: 9px 20px 8px 20px; border: 3px solid #f3ae2f; text-align: center; z-index: 101;}	
	

.btnVideo {position: absolute; left: 38%; top: 24%; color: #fff; text-align: center; z-index: 101; }	

.btnVideo a {display: block; padding: 15px 31px 14px 31px; border: 1px solid #fff;font-size: 10px; color:#fff; letter-spacing: 1px;}
.btnVideo a:hover {background-color: #fff; color: #333; text-decoration: none}


@media (min-width: 490px) and (max-width: 768px) {  


	.wrapper0 {width: 100% ; margin: 0.2em auto 0.2em auto;  }
	.contenido { float: left; width: 88%; display: block; height: 100%; padding: 0 3% 3% 3%; margin: 1% 3% 15% 3% }
	.img-contenedor  {width:100%; height: 100%}	

	nav, nav ul {text-align: center;}

	header #imgCab {height: 420px; background-position: -600px -30px; }
	#marque { margin-left: -380px;}
	#marque p {padding: 0 40px 10px 40px;   }

	.contenido img.producto {width: 100%; margin: 3% 0 0 0}


	.btnFoto2 {position: absolute; left: 116px; bottom: 48px;  }
	.btnFoto3 {position: absolute; left: 440px; bottom: 48px;  }


	form .text { width: 54%; }


	footer ul {margin: 40px 15px 20px 25px;   }
}


	
/* Versión movil */
	
	@media screen and (max-width: 480px) { 
	
	section, article {padding: 0; margin: 0}
	
	#social  {display: none }
	.btnFoto, .btnFoto2, .btnFoto3, .btnFoto4, .btnFoto5 {display:none}
	
	#Menu2home {display:none} 
	
		
	.wrapper0 {width: 100% ; margin: 0.2em auto 0.2em auto;  }
	.contenido { float: left; width: 88%; display: block; height: 100%; padding: 0 3% 3% 3%; margin: 1% 3% 15% 3% }
	
	.img-contenedor  {width:100%; height: 100%}
	
	
	/* Canal etico */
	
	.canal a.btnInfo { margin: 12px 0 5% 0%; } 
	.canal img.imgCanal {display: none}
	
	
	
	
	/* menu */
	
	 nav {
		width:100%;
		height:100%;
		left:-100%;
		margin-left: 0px;
		
		position: absolute;
		z-index: 100;
	}
 
	 nav ul li {
		text-align: center;
		display:block;
		float:none;
		border-bottom:1px solid rgba(255,255,255, .3);
		width: 100%
				
	}
 
	.menu_bar {
	
		position: absolute;
		top: 0; 
		right: 0; 		
		display:block;
		
		height: 100px; 
	}
	
	 
	.menu_bar .bt-menu {
				
		display:block;
		width: 80px;
		height: 88px;
		background: #fff url(../img/btn-menu-movil.png) no-repeat center 40px ;
		background-size: 38px;
		color:#000;
	
				
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
		
			
	}
	
	#menu {width: 100%;  }
	#menu {background-color: #222}
	#menu li {float: none; padding: 14px 0 15px 0; background-image: none }
	#menu li a {color: #fff; font-size: 14px; margin: 0 0 20px 0 !important  }
	
	
	#menu li.sel {  padding: 9px 0 9px 0;}
	#menu li.sel a { color: #333; background-color: inherit !important}
	
	
	
	#menu2 {margin: 12px 0 8px 0; padding: 15px 12px 5px 10px;  border: none; border-bottom: 1px solid #ccc}
	#menu2  li {display: inline-block; text-align: center; margin: 0 20px 0 0; padding: 0 0 12px 0  }
	#menu2  li.selected a {display: block; padding: 0 0 3px 0; }
	#menu2 a { font-size: 12px;}
	
	
	
	/* menu */

	
	#marque {left: 3%; z-index: 1; margin-left: 0; bottom: 0; width: 94%; }
	#marque p { padding: 0 20px 10px 20px; font-size: 28px; line-height: 38px;  font-weight: bold; /*text-shadow: 1px 2px #999; */  letter-spacing: 0;   }
	#marque span {display: none }
	
	
	
	header #brand {margin: 0 0 12px 0; padding-top: 16px; text-align: left; }
	header #brand img {width: 166px; margin: 6px 0 0 27px}
	

	header #imgCab.home {height: 428px !important; background-size: 460% !important; background-position: 39.5% 0 !important;  }

	#marque  a.btnInfo { font-size: 14px; margin-top: 20px; margin-bottom: 5px; font-weight: normal; line-height: 20px } 
	#marque  a.btnInfo2 {display: block; clear: both !important;  margin-top: 0px; margin-bottom: 30px;  } 
	
	
	
	 h1 {margin-top: 40px}		
	 h1, h2 { font-size: 26px; padding: 5px 20px 40px 20px;  }
	
	.contenido .col1 {width: 100%; padding-top: 10px }
	.contenido .col2 {width: 100%}
	.contenido .col1 img, .contenido .col2 img {width: 100%}
		
	
	.contenido .txt {padding: 4% 8% 8% 8%}
	.contenido .txt2 {padding: 4% 8% 8% 8%}
	
	.contenido img.producto {width: 100%; margin: 3% 0 0 0}
	.contenido  ul.iconos {margin-bottom: 30px;}
	
	.contenido .col1 .btnVideo {left: 29%; top: 16%;}
		
	
	.ficha h3 {font-size: 18px; margin: 0; padding: 0; padding: 32px 40px 0 40px; height: 30px  }
	
	.ficha .txt3 {position: relative; float: left; margin-left: 0; width: 100%; height: 100%; text-align: right;   }
	.ficha .txt3 ul {display: none}
	
	.ficha .txt4 {float: left; margin-top: 2px; width: 90%; padding: 0 20px 0 15px;  }
		
	.ficha .txt3 img {width: 100%; margin-top: 105px }
	
	
	.dLoad {padding: 0.5em 1em 0 0; text-align: right;}
	.dLoad img {  width: 22px; height: 22px;  }
	.dLoad a {float: right; padding-top: .3em; color: #333; font-size: 12px }
	.dLoad span {display: none}
	
	
	.noticias .txt span.fecha {float: none; margin: 0 auto 0 auto; width: 114px; background: #fff url("../img/icon-fecha.gif") 0 0 no-repeat;  }
	
	
	.btnI {position: absolute; top: 64px; left: 25% }
	.btnD {position: absolute; top: 64px; right:25% }
	
	

	/* galeria fotos */

	.contenido .txt {padding: 4% 4% 8% 4%}

		
	form  {padding: 8% 0 3% 0 }
	form .text { width: 92%; }
	form  textarea {width: 84%; }	
	
	form .btnEnviar {width: 76%; font-size: 14px; font-weight: normal; text-transform: uppercase }
	

	
	footer { margin: 0; padding: 30px 0 120px 0;   }
	.contenidoFooter {width: 100%;  text-align: center; height: 660px !important;    }
	
	footer ul {margin: 20px 100px 20px 0; width: 100%  }
		
	footer ul li {line-height: 24px; text-align: center; width: 100%}
	footer ul li, footer ul li a {font-size: 17px}
	
	
	
}	



/* Carrousell Logos */


@keyframes slides {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.logos {

margin-top: 140px;	
  overflow: hidden;
  padding: 30px 0px;
  white-space: nowrap;
  position: relative;
}

/*
.logos:before, .logos:after {
  position: absolute;
  top: 0;
  content: '';
  width: 250px;
  height: 100%;
  z-index: 2;
}

.logos:before {
  left: 0;
  background: linear-gradient(to left, rgba(255,255,255,0), rgb(255, 255, 255));
}

.logos:after {
  right: 0;
  background: linear-gradient(to right, rgba(255,255,255,0), rgb(255, 255, 255));
}

*/

.logo_items {
  display: inline-block;
  animation: 50s slides infinite linear;
}

.logos:hover .logo_items {
  animation-play-state: paused;
}

.logo_items img{
  height: 120px;
  margin: 0 25px
}


	
	/*  Tipografia */

.barlow-thin {
  font-family: "Barlow", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.barlow-extralight {
  font-family: "Barlow", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.barlow-light {
  font-family: "Barlow", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.barlow-regular {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.barlow-medium {
  font-family: "Barlow", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.barlow-semibold {
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.barlow-bold {
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.barlow-extrabold {
  font-family: "Barlow", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.barlow-black {
  font-family: "Barlow", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.barlow-thin-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.barlow-extralight-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.barlow-light-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.barlow-regular-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.barlow-medium-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.barlow-semibold-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.barlow-bold-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.barlow-extrabold-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.barlow-black-italic {
  font-family: "Barlow", sans-serif;
  font-weight: 900;
  font-style: italic;
}