/*
Theme Name: El Cerrito
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap')

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{ margin:0; line-height:1.6; font-size: 14px; font-family: "Roboto", sans-serif; font-weight: 400; font-style: normal;}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}input[type="search"]{-webkit-appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}

.roboto-thin {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: normal;
  }
  
  .roboto-light {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .roboto-medium {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
  }
  
  .roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .roboto-black {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: normal;
  }
  
  .roboto-thin-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: italic;
  }
  
  .roboto-light-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: italic;
  }
  
  .roboto-regular-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .roboto-medium-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: italic;
  }
  
  .roboto-bold-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: italic;
  }
  
  .roboto-black-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: italic;
  }
  

  header{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,0.49763655462184875) 36%, rgba(0,0,0,0) 91%);}

  .header{
    display: flex;
    justify-content: space-between; 
    align-items: center;    
    align-content: stretch;
    max-width: 1240px;
    margin: auto;
  }

  header nav ul{
    margin: 0;
    display: flex;
    
    justify-content: flex-end; 
    align-items: center;    

    height: 100%;
    gap: 60px;
  }

  header nav ul li a{
    color: #ffffff;
    text-decoration: none;
    display: block;
    padding: 5px 0;
    border-bottom: solid 1px transparent;
  }

  header nav ul li a:hover{
    border-bottom: solid 1px #ffffff;
  }

  .logo{
    width: 270px;
    animation: navbar-scroll linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 200px;
  }


  @keyframes navbar-scroll {
    to{
      width: 120px;
    }
}


  /*** BACKGROUND ***/

.bg-green{background-color: #005E1C;}
.bg-green2{background-color: #4E5B4D;}
.bg-black-green{background-color: #4E5B4D;}
.bg-black-green-2{background-color: #02300E;}
.bg-grey{background-color: #F5F5F5;}
.bg-white{background-color: #ffffff;}
.bg-black{background-color: #1E1E1E;}
.bg-black-opacity{background: rgba(0,0,0,.6);}

/*** BACKGROUND ***/

/*** COLOR ***/

.color-white{color: #ffffff;}
.color-black{color: #000000;}
.color-green{color: #005E1C;}
.color-grey{color: #808080;}

.line-titulo{border-bottom: solid 2px #005E1C;}

/*** COLOR ***/

/*** FONTS ***/

.f100{font-weight: 100;}
.f200{font-weight: 200;}
.f300{font-weight: 300;}
.f400{font-weight: 400;}
.f500{font-weight: 500;}
.f600{font-weight: 600;}
.f700{font-weight: 700;}
.f800{font-weight: 800;}
.f900{font-weight: 900;}

.font-12{font-size: 12px;}
.font-14{font-size: 14px;}
.font-16{font-size: 16px;}
.font-18{font-size: 18px;}
.font-20{font-size: 20px;}
.font-22{font-size: 22px;}
.font-24{font-size: 24px;}
.font-26{font-size: 26px;}
.font-28{font-size: 28px;}
.font-30{font-size: 30px;}
.font-36{font-size: 36px;}
.font-42{font-size: 42px;}
.font-54{font-size: 54px;}
.font-60{font-size: 60px;}
.font-72{font-size: 72px;}

.text-center{text-align: center;}
.text-right{text-align: right;}
.text-left{text-align: left;}

/*** FONTS ***/

/*** BLOCKS ***/

.max-1240{width: 100%; max-width: 1240px;}
.max-980{width: 100%; max-width: 980px;}

.m-auto{margin: auto;}

.m-top-10{margin-top: 10px;}
.m-top-20{margin-top: 20px;}
.m-top-30{margin-top: 30px;}
.m-top-40{margin-top: 40px;}
.m-top-50{margin-top: 50px;}
.m-top-60{margin-top: 60px;}
.m-top-70{margin-top: 70px;}
.m-top-80{margin-top: 80px;}
.m-top-90{margin-top: 90px;}
.m-top-100{margin-top: 100px;}
.m-top-150{margin-top: 150px;}
.m-top-200{margin-top: 200px;}

.m-bottom-10{margin-bottom: 10px;}
.m-bottom-20{margin-bottom: 20px;}
.m-bottom-30{margin-bottom: 30px;}
.m-bottom-40{margin-bottom: 40px;}
.m-bottom-50{margin-bottom: 50px;}
.m-bottom-60{margin-bottom: 60px;}
.m-bottom-70{margin-bottom: 70px;}
.m-bottom-80{margin-bottom: 80px;}
.m-bottom-90{margin-bottom: 90px;}
.m-bottom-100{margin-bottom: 100px;}
.m-bottom-150{margin-bottom: 150px;}
.m-bottom-200{margin-bottom: 200px;}

.m-left-10{margin-left: 10px;}
.m-left-20{margin-left: 20px;}
.m-left-30{margin-left: 30px;}
.m-left-40{margin-left: 40px;}
.m-left-50{margin-left: 50px;}
.m-left-60{margin-left: 60px;}
.m-left-70{margin-left: 70px;}
.m-left-80{margin-left: 80px;}
.m-left-90{margin-left: 90px;}
.m-left-100{margin-left: 100px;}
.m-left-150{margin-left: 150px;}
.m-left-200{margin-left: 200px;}

.m-right-10{margin-right: 10px;}
.m-right-20{margin-right: 20px;}
.m-right-30{margin-right: 30px;}
.m-right-40{margin-right: 40px;}
.m-right-50{margin-right: 50px;}
.m-right-60{margin-right: 60px;}
.m-right-70{margin-right: 70px;}
.m-right-80{margin-right: 80px;}
.m-right-90{margin-right: 90px;}
.m-right-100{margin-right: 100px;}
.m-right-150{margin-right: 150px;}
.m-right-200{margin-right: 200px;}

.p-top-10{padding-top: 10px;}
.p-top-20{padding-top: 20px;}
.p-top-30{padding-top: 30px;}
.p-top-40{padding-top: 40px;}
.p-top-50{padding-top: 50px;}
.p-top-60{padding-top: 60px;}
.p-top-70{padding-top: 70px;}
.p-top-80{padding-top: 80px;}
.p-top-90{padding-top: 90px;}
.p-top-100{padding-top: 100px;}
.p-top-150{padding-top: 150px;}
.p-top-200{padding-top: 200px;}

.p-bottom-10{padding-bottom: 10px;}
.p-bottom-20{padding-bottom: 20px;}
.p-bottom-30{padding-bottom: 30px;}
.p-bottom-40{padding-bottom: 40px;}
.p-bottom-50{padding-bottom: 50px;}
.p-bottom-60{padding-bottom: 60px;}
.p-bottom-70{padding-bottom: 70px;}
.p-bottom-80{padding-bottom: 80px;}
.p-bottom-90{padding-bottom: 90px;}
.p-bottom-100{padding-bottom: 100px;}
.p-bottom-150{padding-bottom: 150px;}
.p-bottom-200{padding-bottom: 200px;}

.p-left-10{padding-left: 10px;}
.p-left-20{padding-left: 20px;}
.p-left-30{padding-left: 30px;}
.p-left-40{padding-left: 40px;}
.p-left-50{padding-left: 50px;}
.p-left-60{padding-left: 60px;}
.p-left-70{padding-left: 70px;}
.p-left-80{padding-left: 80px;}
.p-left-90{padding-left: 90px;}
.p-left-100{padding-left: 100px;}
.p-left-150{padding-left: 150px;}
.p-left-200{padding-left: 200px;}

.p-right-10{padding-right: 10px;}
.p-right-20{padding-right: 20px;}
.p-right-30{padding-right: 30px;}
.p-right-40{padding-right: 40px;}
.p-right-50{padding-right: 50px;}
.p-right-60{padding-right: 60px;}
.p-right-70{padding-right: 70px;}
.p-right-80{padding-right: 80px;}
.p-right-90{padding-right: 90px;}
.p-right-100{padding-right: 100px;}
.p-right-150{padding-right: 150px;}
.p-right-200{padding-right: 200px;}

/*** PAGES ***/

.two-col-flex{
    display: flex;    
    justify-content: space-between; 
    align-items: center;    
    align-content: stretch;
    gap: 100px;
}
.two-col-flex > div{
    width: 50%;
}

.two-col-flex.col-70-30 > div:nth-child(1){
    width: 60%;
}
.two-col-flex.col-70-30 > div:nth-child(2){
    width: 40%;
}

.three-col-flex{
    display: flex;    
    justify-content: space-between; 
    align-items: center;    
    align-content: stretch;
    gap: 10px;
}
.three-col-flex > div{
    width: 33.33%;
}

.three-col-flex > div div{
    display: flex;
        
    justify-content: center; 
    align-items: center; 
    /* flex-flow: column; */ 
    flex-direction: column;  
    align-content: center;

    height: 100%;
    gap: 5px;
}

.generic-flex{
    display: flex;    
    justify-content: space-between; 
    align-items: flex-start;      
    align-content: stretch;
    gap: 20px;
}

.generic-flex > div div{
    display: flex;
        
    justify-content:flex-start; 
    align-items: center;    
    /* flex-flow: column; */ 
    flex-direction: column;  
    align-content: center;

    height: 100%;
    gap: 30px;
}

.col-5 > div{
    width: 20%;

}
.galeria{
    display: flex;
  flex-wrap: wrap; /* Permite que los elementos se muevan a la siguiente línea */
  justify-content: flex-end; /* Alinea los elementos hacia la derecha */
}
.galeria img{display: block;}
.galeria img:nth-child(1){width: 100%;}
.galeria img:nth-child(2){width: 50%;}
.galeria img:nth-child(3){width: 50%;}
.galeria img:nth-child(4){width: 33.33%;}
.galeria img:nth-child(5){width: 33.33%;}
.galeria img:nth-child(6){width: 33.33%;}

.equipo-grupos h2{
    margin-bottom: 0;
}
.equipo-grupos p{
    margin-top: 0;
}
.equipo-grupos div{
    position: relative;
}
.equipo-grupos div::after{
    content: "";
    display: block;
    width: 3px;
    height: 200px;
    background-color: #127F29;
    position: absolute;
    right: -70px;
    top: 10px;
}
.equipo-grupos div:last-child:after{display: none;}

.grid-33-66 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:"Produccion Uso";
}

.Produccion {grid-area: Produccion; }

.Uso {grid-area: Uso; }

.grid-50-50 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:"cont-uso space-uso";
}

.cont-uso{grid-area: cont-uso;}
.space-uso{grid-area: space-uso;}

.text-two-columns{
    column-count: 2;
    column-gap: 40px;
}

.text-two-columns p{margin-top: 0;}

.oculto {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.visible {
    display: block;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.vermenos, .vermas{
    cursor: pointer;
    display: inline-block;
}

.nf-form-fields-required{display: none;}

#nf-field-8{height:158px;}
.nf-error-msg{display: none !important;}

.footer{
    display: flex;
    justify-content: space-between; 
    align-items: center;   
    gap: 5px;

}

.banner-noticias{
  width: 100%;
  height: 50vh;
  background-position: center center;
  background-size: cover;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  overflow: auto;
  flex-direction: column;
}

.banner-noticias-int{
  width: 100%;
  height: 30vh;
  background-position: center center;
  background-size: cover;
}

.banner-noticias div{
  color: #ffffff;
  text-align: center;
  font-size: 32px;
  line-height: 1.2;
}

.int-noticias{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 20px;
}

.int-noticias a{
  color: #4E5B4D;
  font-weight: 700;
}

.pagination a{
  color: #ffffff;
  font-weight: 700;
}

@media (max-width: 968px) {

  .two-col-flex, .three-col-flex, .generic-flex, .footer{
    flex-wrap: wrap;
  }
  .col-5 > div, .footer > div {
    width: 100%;
    text-align: center;
  }
  .two-col-flex > div, .three-col-flex > div{
    width: 100%;
  }
  #menu{display: none;}
  .footer img, header img {max-width: 80%;}
  .two-col-flex.col-70-30 > div, .equipo-grupos > div{
    width: 100% !important; 
  }
  .equipo-grupos div:after{display: none;}

  .grid-33-66 {
    grid-template-columns: 1fr;
    grid-template-areas:"Produccion" "Uso";
  }
  .grid-50-50 {
      grid-template-columns: 1fr;
      grid-template-areas:"cont-uso" "space-uso";
  }
  .text-two-columns{
    column-count: 1;
    column-gap: 0px;
    text-align: center;
  }
  .int-noticias{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .int-noticias{
    grid-template-columns: repeat(1, 1fr);
  }
}