@font-face{
    font-family: "bebas";
    src: url("./bebas/BebasNeue.otf");
}

/* Normal font (regular) */
@font-face {
    font-family: 'agdasima';  /* Same family name for both */
    src: url('./agdasima/Agdasima-Regular.ttf') format('truetype');
    font-weight: normal; /* Regular weight */
    font-style: normal;
}

/* Bold font */
@font-face {
    font-family: 'agdasima'; /* Same family name */
    src: url('./agdasima/Agdasima-Bold.ttf') format('truetype');
    font-weight: bold; /* Set bold weight */
    font-style: normal;
}


body {
    margin: 0;
    padding: 0;
    min-width: 100vw;
    min-height: 100vh;
    background-image: url("./assets/FONDO.svg");
    background-repeat: no-repeat;
    background-size: 100%;
    font-family: "bebas";
    color: white;
    overflow: hidden;
    /* position: relative; */
}

.grid{
    display: grid;
    grid-template-columns: repeat(480, 0.21vw);
    grid-template-rows: repeat(270, 0.37vh);
    padding: 0;
    margin: 0;
}

.img_container{
    padding: 0;
    margin: 0;
}

.logo{
    grid-column: 23 / span 142;
    grid-row: 8 / span 50; 
}

.titulo_precios {
    grid-column: 82 / span 100;
    grid-row: 45 / span 10;
    font-size: 6vh;
}

img {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: auto;
}

.mujeres_atributo {
    position: relative;
    grid-column: 20 / span 62;
    grid-row: 84 / span 40;
}

.mujeres_atributo img {
    z-index: 1;
}

.container_titulo_mujeres_atributo {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 15%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.titulo_mujeres_atributo {
    font-size: 3.5vh;
    /* height: 100%; */
    padding: 0; 
    margin: 0;
    margin-bottom: -1.5vh;
}

.mujeres {
    position: relative;
    grid-column: 20 / span 62;
    grid-row: 124 / span 40 ;
}

.mujeres img{
    z-index: 1;
}

.titulo_mujeres{
    font-size: 4.4vh;
    position: absolute; 
    z-index: 2;
    top: 5%;
    left: 8%;
    margin: 0; 
}

#femeninoPrecio{
    font-size: 4vh;
    z-index: 2;
    position: absolute;
    top: 60%;
    left: 24%;
    margin: 0;
}

.coocentral_aa
{
    position: relative;
    font-size: 3vh;
    grid-column: 20 / span 62;
    grid-row: 164 / span 40;
}

.coocentral_aa img{
    z-index: 1;
}

.container_titulo_coocentral_aa{
    grid-column: 21 / span 62;
    grid-row: 196 / span 48;
    position: absolute; 
    z-index: 2;
    top: 0;
    left: 8%;
    margin: 0; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.titulo_coocentral_aa{
    padding: 0;
    margin: 0;
    margin-bottom: -1.5vh;
    font-size: 3.5vh;
}

.aa {
    min-width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
}

.pasilla{
    position: relative;
    font-size: 4.3vh;
    grid-column: 20 / span 62;
    grid-row: 204 / span 40;
}

.pasilla img {
    z-index: 1;
}

.container_titulo_pasilla{
    grid-column: 20 / span 62;
    grid-row: 206 / span 40;
    position: absolute; 
    z-index: 2;
    top: 8%;
    left: 8%;
    margin: 0; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.titulo_pasilla{
    padding: 0;
    margin: 0;
    margin-bottom: -1.5vh;
}

#PasillaPrecio{
    font-size: 4vh;
    z-index: 2;
    position: absolute;
    top: 60%;
    left: 24%;
    margin: 0;
}

.regional
{
    position: relative;
    z-index: 1;
    grid-column: 92 / span 62;
    grid-row: 84 / span 40;
}

.titulo_regional{
    font-size: 4.3vh;
    position: absolute; 
    z-index: 2;
    top: 5%;
    left: 6%;
    margin: 0; 
}

#RegionalPrecio{
    font-size: 4vh;
    z-index: 2;
    position: absolute;
    top: 60%;
    left: 24%;
    margin: 0;
}

.rain_forest
{
    position: relative;
    z-index: 1;
    grid-column: 92 / span 62;
    grid-row: 124 / span 40 ;
}

.titulo_rain_forest{
    font-size: 3.8vh;
    position: absolute; 
    z-index: 2;
    top: 7%;
    left: 5%;
    margin: 0; 
}

/* .container_precio_rain_forest{
    font-size: 50px;
    position: absolute; 
    z-index: 2;
    top: 5%;
    left: 8%;
    margin: 0; 
} */

#RainForestPrecio {
    font-size: 4vh;
    z-index: 2;
    position: absolute;
    top: 60%;
    left: 24%;
    margin: 0;
}

.flo_cert
{
    position: relative;
    grid-column: 92 / span 62;
    grid-row: 164 / span 40;
    z-index: 1;
}

.titulo_flo_cert{
    font-size: 4.3vh;
    position: absolute; 
    z-index: 2;
    top: 7%;
    left: 5%;
    margin: 0; 
}

#FlocertPrecio {
    font-size: 4vh;
    z-index: 2;
    position: absolute;
    top: 60%;
    left: 24%;
    margin: 0;
}

.cacao_ep{
    position: relative;
    z-index: 1;
    grid-column: 92 / span 62;
    grid-row: 204 / span 40;
}

.titulo_ep{
    font-size: 4.3vh;
    position: absolute; 
    z-index: 2;
    top: 7%;
    left: 5%;
    margin: 0; 
}

#CacaoEpPrecio{
    font-size: 4vh;
    z-index: 2;
    position: absolute;
    top: 60%;
    left: 24%;
    margin: 0;
}

.mojado_ra
{
    grid-column: 163 / span 62;
    grid-row: 84 / span 40;
    position: relative;
}

#MojadoRaPrecio{
    font-size: 4vh;
    z-index: 2;
    position: absolute;
    top: 60%;
    left: 24%;
    margin: 0;
}

.titulo_mojado_ra {
    position: absolute;
    font-size: 4vh;
    z-index: 2;
    top: 5%;
    left: 5%;
    margin: 0; 
}

.titulo_mojado_flo{
    z-index: 2;
    position: absolute;
    margin: 0;
    top: 5%;
    left: 5%;
    font-size: 4vh;
}

.mojado_flo
{
    position: relative;
    grid-column: 163 / span 62;
    grid-row: 124 / span 40 ;
    z-index: 1;
}

#MojadoFloPrecio{
    font-size: 4vh;
    z-index: 2;
    position: absolute;
    top: 60%;
    left: 24%;
    margin: 0;
}

.mojado_estandar
{
    position: relative;
    grid-column: 163 / span 62 ;
    grid-row: 164 / span 40;
    z-index: 1;
}

.container_titulo_mojado_estandar{
    position: absolute;
    z-index: 2;
    top: 0%;
    left: 12%;
    max-height: 6vh;
}

.titulo_mojado_estandar{
    margin: 0;
    padding: 0;
    font-size: 3.5vh;
}

#MojadoEstandarPrecio{
    font-size: 4vh;
    z-index: 2;
    position: absolute;
    top: 60%;
    /* left: 18%; */
    left: 24%;
    margin: 0;
}

.estandar {
    display: flex; 
    justify-content: center;
    align-items: center;
    margin-bottom: -1.5vh;
    padding: 0;
}

.cacao_corriente{
    position: relative;
    grid-column: 163 / span 62 ;
    grid-row: 204 / span 40;
    z-index: 1;
}

.container_titulo_cacao_corriente{
    position: absolute;
    z-index: 2;
    top: 0%;
    left: 12%;
    max-height: 6vh;
    /* display: flex;
    flex-direction: column;
    justify-content: center; */
}

.titulo_cacao_corriente{
    margin: 0;
    padding: 0;
    font-size: 3.5vh;
    margin-bottom: -1.5vh;
}

#CacaoCorrientePrecio{
    font-size: 4vh;
    z-index: 2;
    position: absolute;
    top: 60%;
    left: 24%;
    margin: 0;
}

.fecha
{
    /* grid-column: 79 / span 200;
    grid-row: 238 / span 13; */
    font-size: 5vh;
    margin: 0;
}

#reloj {
    grid-column: 236 / span 225;
    grid-row: 17 / span 29;
    font-size: 7vh;
    font-family: agdasima;
    font-weight: bold;
    display: flex;
    justify-content: center;
}

.lema {
    grid-column: 236 / span 225;
    grid-row: 45 / 52;
    font-size: 5vh;
    display: flex;
    justify-content: center;
}

.titularesCaja{
    background-color: rgba(255,255,255,0.2);
    grid-column: 1 / 481;
    grid-row: 252 / span 13;
    width: 100%;
    height: 6.5vh;
    overflow: hidden;
    border: rgba(0,0,0,0.3) 1px solid;
}

.titulares{
    animation: titulares 60s linear infinite;
    display: inline-block;
    height: 100%;
    white-space: nowrap;
    padding-left: 100%;
}

.titular{
    display: inline-block;
    /* display: flex; */
    align-items: center;
    vertical-align: middle;
    padding-left: 2em;
    padding-right: 2em; 
    font-size: 5vh;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    color: #ffffff;
    overflow: hidden;
}

@keyframes titulares {
    0%{
        transform: translate3d(0,0,0);
    }
    100%{
        transform: translate3d(-100%,0,0);
    }
}

.video {
    box-sizing: border-box;
    grid-column: 236 / span 225;
    grid-row: 85 / span 162;
    background-color: white;
}

.video iframe {
    width: 100%;
    height: 100%;
}

.grupo-132{
    position: absolute;
    top: 60vh;
    left: -16vw;
    z-index: -1;
}

.grupo-122 {
    position: absolute;
    /* top: 421px; */
    top: 39vh;
    /* left: 1145px; */
    left: 60vw;
    z-index: -1;
}

.grupo-121 {
    min-width: 339px;
    position: absolute;
    /* top: -128px; */
    top: -11.85vh;
    /* left: 1655px; */
    left: 86.2vw;
    z-index: -1;
}

.l1{
    min-height:60px;
    border-left: 2px white dotted;
    border-right: 2px white dotted;
    grid-column: 75 / 146;
    grid-row: 120 / span 100; 
    z-index: -1;
}

.l2{
    min-height:50px;
    /* border-left: 1px white dotted; */
    border-right: 2px white dotted;
    grid-column: 146 / 217;
    grid-row: 120 / span 100; 
    z-index: -1;
}

.precio {
    color: black;
}

.dolar_trm{
    /* grid-column: 236 / span 225;
    grid-row: 250 / span 100 ; */
    color: #f6a700;
    font-size: 5vh;
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
    align-items: center;
}

.dolar{
    margin-left: 1vw;
}

.cuadro_precio{
    height: auto;
    /* max-height: 18vh; */
    min-width: 100%;
}

.container_trm_fecha{
    grid-column: 236 / span 225;
    grid-row: 57 / span 30;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* 
    precios
*/



/* 
{
    grid-column: ;
    grid-row: ;
}
*/