@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');

/*reseteo*/
*
{
    margin-top: 0em;
    margin-bottom:0em;
    text-decoration: none;
}

.clsWidthContent{
    max-width: 1440px;
    margin: auto;
    padding: 0 2em;
}

.chek
{
    width: 20px;
    height: auto;
    padding: 1em;
    margin-top: 0.5em;
}

.clsLOPDContainer
{
    color: grey;
    font-size: 0.7em;
}
.clsLOPDContainer a
{
    color: #028cb0;
    font-size: 0.9em;
}

/*--------------------------HEADER------------------------------------*/
#mainHeader{
    /*Color de fondo del contenedor de todo el HEADER*/
    background-color: white;
    width: 100%;
    height: auto;

}
#containerNavHeaderSocial
{

    align-items: center;
    color: #F5F5F5;
    display: flex;
    flex-direction: row;
    padding: 0.3em;
    justify-content: space-between;

}

#containerNavHeaderSocial a
{
  /*color de los enlaces del header superior*/
  color: #6CC0EC;
  font-size: 0.9rem;
  margin: 0em;
  align-self: flex-start;
  padding: 0.5em;
}
#containerNavHeaderSocial ul
{
    align-self: flex-end;
    display: inline-flex;

}
#ulNavHeaderSocial li
{
    padding: 0.5em;
}
#containerLogoNavHeaderPrincipal
{
    padding: 0.8em;

}
#navHeaderSocial{
    /*color de la parte superior del header */
    background: #ECF0F1;
    flex-direction: row;

}
#barraMenuResponsive
{
        display: none;
}
.sticky
{
    /******************INTENTO DE STIKY NAV**********/
}

/*---------------------------------------------Header Parte 2 navbar y botones de contacto-----------------*/
#containerNavHeaderContacto
{

    background-color: white;
    display: flex;
    padding:0.5em;
    flex-direction: row;
    justify-content: flex-end;

}
#containerNavHeaderPrincipal
{
    background-color: white;


}
#containerNavHeaderPrincipal li
{
    padding-right: 1em;
}

.clsNavHeaderContactoButtonIcon.clsiconblue,
#ulNavHeaderPrincipal li a,
.clsBotoncontainerFooterContactoText a,
.clsTitleArticleFooter{
    font-family: 'Montserrat', sans-serif;
}

/*-------------------------------------------NAV BAR---------------------------------------------------------*/

#ulNavHeaderPrincipal > li{
    position: relative;
    padding: 0.8em;
}

#ulNavHeaderPrincipal .clsSubMenu{
    background-color: #fefeff;
}

#ulNavHeaderPrincipal .clsSubMenu li{

}

#ulNavHeaderPrincipal .clsSubMenu li{
    border-bottom: 1px solid #ccc;
    width: 200px;
}

#ulNavHeaderPrincipal .clsSubMenu li a{
    text-transform: uppercase;
    display: block;
    color: #666;
    padding: 0.8em;
}

#ulNavHeaderPrincipal .clsSubMenu{
    position: absolute;
    top: 100%;
    left: 0;
    padding: 0;
    z-index: 1000;
    display: none;
    box-shadow: 0px 2px 2px 1px rgba(22,57,66,0.2);

}

#ulNavHeaderPrincipal > li:hover .clsSubMenu{
    display: initial;
}

#inpuMenuResponsive{
    display: none;
}


#inputSectoresSubmenu
{
    display: none;
}

#liFormSearchContent .clsSubMenu{
    right: 0;
    left: auto;
}
#formMainMenuContainer input
{
    width: 15em;
    max-width: 100%;
}


/*----------------------------------FOOTER------------------------------------------------------*/

#mainFooter
{
    background-color: #0E2838!important;
    display: flex;
    flex-direction: column;

}
.clsArticleFooter
{

    background-color: #0E2838;
    width: 50%;

}
#containerFooterContacto
{
    color: white;
    padding-top: 3em;
}
.clsBotoncontainerFooterContacto
{

    padding: 1em;
    margin-top: 1em;
    margin-left:1em;
    margin-right: 1em;
    flex-direction: row;
    display: flex;


}
.clsBotoncontainerFooterContactoIcon
{
        padding-right:  0.7em;
}
.clsBotoncontainerFooterContactoText a
{
    font-size: 0.8em;
    color:#3498BC;
}
.clsBotoncontainerFooterContactoText a:hover
{
    font-size: 0.8em;
    color:white;
}

.clsContainerNewArticleFooter a
{
    color: white;
}
.clsContainerNewArticleFooter a:hover
{
    color: #3498BC;
}

.containerColsHorario
{
    display: flex;
    justify-content: center;
    margin: 1em;
    margin-top: 0.1em;
    border-style: outset;
    border-width: 1px;
    border-color: #00a8cc;


}
.col1
{
    display: inline-flex;
    flex-direction: column;
    margin-right: 1em;
    padding: 2em;
    text-align: left;
    line-height : 2em;
}
.col2
{
    display: inline-flex;
    flex-direction: row;
    width: 95px;
    margin-right: 0em;
    padding: 2em;
    line-height : 2em;
    text-align: right;
    color: #cecece;
}


.clsDiaGris
{
        color: #cecece;
}
.clsDiaVerde
{
    color: green;
}
.clsTitleArticleFooter
{
    color: white;
    font-style: bold;
    margin: 1.7em;
}
#ulMenuArticleFooter
{
    padding: 0em;
}
#ulMenuArticleFooter a
{
    color: grey;
    margin: 0.5em;
}
#ulMenuArticleFooter a:hover
{
    color: #3498BC;
}
#ulFooterSocial
{
        display: flex;
        flex-direction: row;
        align-items: center;
        align-content: space-between;
}
#ulFooterSocial li
{
    padding: 1em
}
#ulMenuArticleFooter li
{
    color: grey;
    margin: 0.8em;
    padding-right: 1em;
}
.clsContainerNewArticleFooter
{
    margin-left: 1.5em;
    margin-right: 1.5em;
    margin-bottom: 2em;
    font-style: bold;
}

.clsFechaNoticiaFooter
{
    margin: 0.5em;
    padding-top: 1em;
    display: flex;
}
#formFooterSuscripcion
{
    padding: 0 1em;
}
/* #formFooterSuscripcion #submit
{
    margin-left: 3em;
} */
.clsInputArticleFormFooter
{

    margin: 0em 1em;
    padding: 0.5em;
    color: whitesmoke;
    /* text-align: right; */

}

#divContainerLOPD{

}

.clsInputArticleFormFooter a
{
    color: white;
    font-size: 0.8em;
}
#containerFooter
{
    display: flex;
    flex-direction: row;
    padding-bottom: 1em;
}
#footerInfoContainer
{
        display: flex;
        flex-direction: column;
        max-width: 100%;
        background-color: #0E2838;
        border-top: 1px solid  #888;
        padding: 1em;
}
#footerInfoContainer span small
{
        color: whitesmoke;
}
#footerInfoContainer ul
{

    align-self: flex-end;
    display: inline-flex;
    padding: 0.5em;
}
#ulFooterInfoContainerSocial li
{
    padding-left: 2em;
}
.clsiconblue
{
    color: #3498BC;
}
/********************************************************************INPUTS Y TEXT AREAS*********************************************************/


input
{
  font-family: 'Lato', sans-serif;
  font-size: 0.875em;
  width: calc(100% - 30px);
  height: 50px;
  padding: 0px 15px 0px 15px;

  background: white;
  outline: none;
  color: #726659;

  border: solid 1px #b3aca7;

  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
}

input:hover {
  background: #b4c2c4;
  color: black;
}

textarea {
  width: 470px;
  max-width: 470px;
  height: 110px;
  max-height: 110px;
  padding: 15px;

  background: transparent;
  outline: none;

  color: #726659;
  font-family: 'Lato', sans-serif;
  font-size: 0.875em;

  border: solid 1px #b3aca7;

  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
}

textarea:hover {
    background: #b4c2c4;
    color: black;
}

#submit {
  max-width: 300px;
  width: 100%;
  height: 50px;
  border-radius: 10px 10px 10px 10px;
  padding: 0;
  margin: 1em auto;
  background-color: #3498DB;
  font-size: 0.875em;
  color: white;
  outline:none;
  cursor: pointer;
  border: solid 1px #b3aca7;
  border-top: none;
  display: block;
}

#submit:hover {
  color: black;
  background-color: #88cdfc;
  font-style: bold;
}
/**********************************************************fin INPUTS Y TEXT AREAS****************************************************************************/

/*-------------------------------------FIN FOOTER--------------------------------------*/
/*menu que aparece cuando la pagina esta en dispósitivos pequeños*/
#barraMenuResponsive
{
    flex-direction: row;
    position: absolute;
    right: 1em;
    top: 1em;
    cursor: pointer;
}

#barraMenuResponsive img{
    width: 40px;
    height: 40px;
    cursor: pointer;
}

#mainSectionContent
{
    width: 100%;
}


#containerLogoNavHeaderPrincipal .clsWidthContent{
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

}
#containerLogoNavHeaderPrincipal img
{
    /* position: absolute; */
    align-self: flex-start;
}

#containerNavHeaderPrincipal >ul > li{
    flex-wrap: wrap;
    display: inline-block;

}
/*---------------------------------Efecto del Navbar--------------------------*/
#ulNavHeaderPrincipal li a
{
    transition: all 0.3s ease 0s;
    font-size: 0.9em;
}
#ulNavHeaderPrincipal li a:hover
{
    color: #0c7b93;
    font-weight: bold;
}
/*--------------------------FIN de HEADER------------------------------------*/


/*------------------------------------------------------ICOOS DEl CONTACTOheader------------------------------------------*/

.clsNavHeaderContactoButtonIcon
{
    display: inline-block;
}

.clsNavHeaderContactoButton
{
    border-color: #00a8cc;
    border-style: solid;
    margin-right: 0.7em;
    border-width: 1px;
    border-radius: 4px;
    display: inline-block;
    padding: 0.4em 1em;
    font-size: 0.8em;
    box-shadow: 1px 1px 2px  #DCDCDC ;
}
.clsNavHeaderContactoButton:hover
{
    background-color: #f1f3f4;
    border-color: #9FD6F5;
    transition: all 0.4s ease 0s;
}

#closeMenuResponsive{
    display: none;
}

.iconodiagonal
{
    font-size:1.5em;
    font-style: bolder;
    font-weight: 900;

}
/*--------------------------------------------------FIN----ICOOS DEl CONTACTOheader--------------------------------------*/

#avisoCookies{
    position: fixed;
    bottom: 2em;
    text-align: center;
    width: 100%;
}

#avisoCookies div{
    padding: 1em;
    background-color: #fff;
    border: 2px solid #0E2838;
    border-radius: 4px;
    font-size: 1.1em;
}

#avisoCookies div a{
    border-bottom: 1px dotted;
}

#avisoCookies div button{
    color: #fff;
    background-color: #043D5D;
    border-width: 0;
    padding: 0.5em 1em;
    cursor: pointer;
}

/****************************************************QUERYS 1440px**********************************************************/
@media (max-width: 1440px)
{
    #containerNavHeaderPrincipal li
    {
        padding-right: 0.5em;
    }
    *{
        font-size: 14px;
    }
}

@media (max-width: 1260px){

    *{
        font-size: 14px;
    }

    #closeMenuResponsive{
        width: 2em;
        height: 2em;
        border-radius: 4px;
        background-color: #f00;
        cursor: pointer;
        color: #fff;
        text-align: center;
        display: block;
        line-height: 2em;
        align-self: flex-end;
    }

    #closeMenuResponsive label{
        color: #fff;
        cursor: pointer;
        display: block;
        width: 100%;
        height: 100%;
    }
    #containerNavs{
        display: none;
        background-color: #0E2838;
        width: 250px;
        padding: 1em;
    }

    #containerNavHeaderSocial{
        display: none;
    }

    #containerNavs > nav{
        background-color: #0E2838;
    }

    #barraMenuResponsive{
        display: block;
        top: 2em;
        z-index: 1200;
    }

    #inpuMenuResponsive:checked ~  #containerNavs{
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 0;
        right: 0;
        min-height: 150%;
        z-index: 2000;
        padding-bottom: 8em;
    }

    #inpuMenuResponsive:checked ~  #veloMenu{
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            z-index: 100;
            top: 0;
            left: 0;
    }

    #containerNavHeaderContacto{
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    #containerNavHeaderPrincipal ul{
        display: flex;
        flex-direction: column;
    }

    .clsNavHeaderContactoButton{
        width: calc(100% - 2em);
        margin: 0.8em 0;
    }

    #ulNavHeaderPrincipal{
        margin: 0;
        padding: 0;
    }

    #containerNavHeaderPrincipal ul > li:hover .clsSubMenu:not(.clsResponsiveShow){
        display: none;
    }

    #containerNavHeaderPrincipal ul > li{
        border-bottom: 1px solid #888;
    }

    #containerNavHeaderPrincipal >ul > li a{
        color: #fff;
    }
    #liFormSearchContent .icon-search{
        display: none;
    }

    #liFormSearchContent .clsResponsiveShow{
        display: block;
        position: relative;
    }

    #liFormSearchContent .clsResponsiveShow input{
        width: calc(100% - 30px);
    }

}
/****************************************************QUERYS 1024**********************************************************/
@media (max-width: 1024px) {

    #ulNavHeaderPrincipal a
    {
        /* font-size: 9px; */
    }
    #containerLogoNavHeaderPrincipal
    {
        padding: 0.5em;
        max-width: 100%;
    }

    #divGaleryNewNext, #divGalerYNewNext
    {
        display: none;
    }

    .clsArticleFooter
    {
        width: 48%;
    }

    .col2, .col1
    {
        padding: 1em;
    }

}

/****************************************************QUERY 768**********************************************************************/
@media (max-width: 768px){

    *{
        font-size: 13px;
    }

    #containerNavs
    {
        display: none;
    }
    #mainRedesIndustrialesImg img
     {
         padding-left: 0em;
         max-width: 715px;
     }
     #containerNavs
     {
         display: none;
     }

     #containerFooter
     {
         flex-flow:wrap;
     }
     .clsMarcasLogosContainerNivel1_1
     {
         display: flow-root !important;
     }
     .clsMarcasLogosContainerNivel1
     {
         display: flow-root !important;
     }

}



/*************************************************media QUERY 425px*************************************/
@media (max-width: 425px)
{
    #formFooterSuscripcion
    {
        display: flex;
        flex-direction: column;
    }
    #containerFooter
    {
        display: flex;
        flex-direction: column !important;
    }
    .clsArticleFooter
    {
        width: 100%;
    }

    #submit
    {
        width: 150px;
    }
}

/************************************************************QUERY 320******************************************************/

@media (max-width: 320px) {

    #containerNavHeaderContacto
    {
        flex-direction: column;

        justify-content: space-around;
    }
    #containerNavHeaderContacto a
    {
        padding-bottom: 2em;
    }
    .col1
    {
        padding: 1em;
    }
    .col2
    {
        padding: 1em;
    }
    input
    {
        width: 180px;
    }
    #submit
    {
        width: 150px;
    }

}