/*
Theme Name: compoldata
Author: Gmno/Arwald
Author URI: https://wordpress.org/
Description: Tema para la web de Compoldata.
Version: 6.6
*/
/**---------------------------CLASES COMUNES--------------**/
html {-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always; text-rendering: optimizeLegibility;}

    .uno h1,.dos h1,.tres h1,.cua h1{
        margin: 0;
        padding: 10px 0 0 0;
    }
    a {
        color: black;
    }
    .content-legal{
        padding: 15% 5% 15% 5%;
    }
    .content-legal p{
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 22px;
    }
/*--Tipografía--*/
:root {

    /* Colors: */
    --unnamed-color-9f9f9f: #9F9F9F;
    --unnamed-color-ffffff: #FFFFFF;
    --unnamed-color-080808: #080808;
    --unnamed-color-fd0d1b: #FD0D1B;
    --unnamed-color-0a23fb: #0A23FB;
    --unnamed-color-2c275b: #2C275B;
    --unnamed-color-fd5c64: #FD5C64;
    
    /* Font/text values */
    --unnamed-font-family-roc-grotesk: Roc Grotesk;
    --unnamed-font-style-normal: normal;
    --unnamed-font-weight-normal: normal;
    --unnamed-font-size-24: 24px;
    --unnamed-character-spacing-0: 0px;
    --unnamed-line-spacing-34: 34px;
    }
    
    /* Character Styles */
    .unnamed-character-style-1 {
    font-family: var(--unnamed-font-family-roc-grotesk);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-24);
    line-height: var(--unnamed-line-spacing-34);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-080808);
    }
    .cn-button.bootstrap {
        font-size: 16px !important;
        font-weight: bold !important;
        font-family: roc-grotesk, sans-serif !important;
        color: #fff;
        background: #ffffff00 !important;
    }
    .cn-close-icon{
        display: none !important;
    }
    .cookie-notice-container{
        font-family: roc-grotesk, sans-serif !important;
    }
    .cookie-notice-container a{
        font-family: roc-grotesk, sans-serif !important;
        color: white !important;
    }
/* Character Styles */
p{
    font-size: 24px;
    margin:0;
    padding:0;
}

/* Page content */

body{
margin: 0;
padding:0;
font-family: roc-grotesk, sans-serif;
font-weight: 400;
font-style: normal;
}

/* font-family: roc-grotesk, sans-serif;
font-weight: 600;
font-style: normal;


font-family: roc-grotesk-compressed, sans-serif;
font-weight: 600;
font-style: normal; */

/**---------------------------HEADER--------------**/

 
.contenedor-header{
     position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent; 
     mix-blend-mode: difference;
}
.header{
    margin:  0 5% 0 5% ;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
    "titol menuh";
}
.titol{
    margin-top: 27px;
    grid-area: titol;
   
}
.titol a{
    letter-spacing: 1px;
    font-size: 30px;
    font-family: roc-grotesk-compressed, sans-serif;
    color: #FFFFFF;
    text-decoration: none;
}
.menuh{
    text-align: right;
    margin-top: 20px;
    grid-area: menuh;
} 
ul#menu-menu-principal li {
    list-style-type: none;
    display: inline;
    margin-left:24px;
}
.menuh a{
    /* font-size: calc(12px + 0.5vw); */
    text-decoration: none;
    color: #FFFFFF;
}

/**---------------------------HOME--------------**/

.first{
    padding: 10% 5% 1% 5%;
    background-color: #080808;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 5%;
    grid-template-areas:
    "txtfirst cheese";
}
.txtfirst{
    margin-top: 10%;
    margin-right: 10%;
    color: #FFFFFF;
    grid-area: txtfirst;
}
.txtfirst p{
    margin-bottom: 25%;
    font-size: 16px;
    line-height: calc(18px + 0.5vw);
}
.txtfirst h1{
    margin-bottom: 10px;
    font-family: roc-grotesk-compressed, sans-serif;
    font-size: calc(25px + 3vw);
    line-height: calc(30px + 3vw);
}

.cheese{
    grid-area: cheese;
    margin-left: 25%;
}
.cheese img{
    width:100%;
}
.consultoria{
    position: relative;
    padding: 0 5% 1% 5%;
    padding-top: 50px;
    background-color: #080808;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "bars txtcon" 
    "bars2 txtcon" ;
}
.bars{
    position: absolute;
    top:45%;
    left:20%;
    grid-area: bars;
}
.bars2{
    position: absolute;
    left: 20%;
    grid-area: bars2;
}
.bars img{
    width: 70%;
}
.bars2 img{
    width: 70%;
}
.txtcon{
    margin-top: 10%;
    color:#FFFFFF;
    grid-area: txtcon;
}
.txtcon h1{
    margin-bottom: 10px;
    margin-right: 20px;
    font-family: roc-grotesk-compressed, sans-serif;
    font-size: calc(25px + 3vw);
    line-height: calc(30px + 3vw);
}
.txtcon p{
    margin-bottom: 25%;
    font-size: 16px;
    line-height: calc(18px + 0.5vw);
}
.areas{
    padding: 5% 5% 5% 5%;
    background-color: #080808;
}
.areas h1{
    font-family: roc-grotesk-compressed, sans-serif;
    font-size: calc(25px + 3.5vw);
    line-height: calc(30px + 3vw);
    margin-right: 50%;
    color: #FFFFFF;
}

.puntos{
    
    padding: 15% 5% 0% 5%;
    background-color: #FFFFFF;
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    " . uno" 
    "graf graf"
    "dos cir"
    "moun tres"
    "cua cua";
}
.puntos h2{
    font-family: roc-grotesk-compressed, sans-serif;
    margin: 0 auto;
    font-size: 162px;
    line-height: 150px;
}
.uno{
    grid-area: uno;
    display: grid;
    grid-template-columns: 1fr 10fr;
    column-gap: 10%;
    margin-bottom: 10%;

}

.uno h1{
    font-family: roc-grotesk-compressed, sans-serif;
    font-size: calc(35px + 3vw);
    line-height: calc(35px + 1.5vw);
}
.uno p{
    margin-right: 25%;
    font-size: 16px;
    line-height: calc(18px + 0.3vw);
}
.graf{
    grid-area:graf;
    margin-bottom: 15%;
}
.graf img{
    width: 100%;
}
.dos{
    grid-area: dos;
    display: grid;
    grid-template-columns: 1fr 10fr;
    column-gap: 10%;
}
.dos h1{
    font-family: roc-grotesk-compressed, sans-serif;
    font-size: calc(35px + 3vw);
    line-height: calc(35px + 1.5vw);
}
.dos p{
    margin-right: 25%;
    font-size: 16px;
    line-height: calc(18px + 0.3vw);
}
.cir{
     grid-area: cir;
     margin-left: 20%;
     margin-bottom: 15%;
}
.cir img{
    width: 75%;
}
.moun{
     grid-area: moun;
     margin-bottom: 15%;
}
.moun img{
    width: 75%;
}
.tres{
    grid-area: tres;
    display: grid;
    grid-template-columns: 1fr 10fr;
    column-gap: 10%;
}
.tres h1{
    font-family: roc-grotesk-compressed, sans-serif;
    font-size: calc(35px + 3vw);
    line-height: calc(35px + 1.5vw);
}
.tres p{
    margin-right:25%;
    font-size: 16px;
    line-height: calc(18px + 0.3vw);
}

.cua{
    margin-top: 5%;
    grid-area: cua; 
    min-height: calc(450px + 30vw);
    background-image: url(https://compoldata.com/wp-content/themes/compoldata/imagenes/cua.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "cuatxt .";
}
.cuatxt{
    grid-area: cuatxt;
    display: grid;
    grid-template-columns: 1fr 10fr;
    column-gap: 10%;
}
.cuatxt h1{
    font-family: roc-grotesk-compressed, sans-serif;
    font-size: calc(35px + 3vw);
    line-height: calc(35px + 1.5vw);
}
.cuatxt p{
    margin-right: 25%;
    font-size: 16px;
    line-height: calc(18px + 0.3vw);
}
.rowpics{
    background-color: #FFFFFF;
    padding: 0% 5% 10% 5%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 8px;
    grid-template-rows: auto;
    grid-template-areas: 
    "pic1 pic2"
    "pic1 pic3"
    "pic4 pic5";
}
.pic1{
    grid-area: pic1;
}
.pic1 img{
    width: 100%;
    height: 99.1%;
}
.pic2{
    grid-area: pic2;  
}
.pic2 img{
    width: 100%;
}
.pic3{
    grid-area: pic3;
}
.pic3 img{
    width: 100%;   
}
.pic4{
    grid-area: pic4;
}

.pic4 img{
    width: 100%;
}
.pic5{
    grid-area: pic5;
   
}
.pic5 img{
    width: 100%;
}

/**---------------------------FOOTER--------------**/
.contenedor-footer{
    background-color: #FFFFFF;
      
}
.contenedor-contacto{
    padding: 0% 5% 5% 5%; 
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
    "titcon cont";
}
.page-id-26 .contenedor-contacto{
    display: none;
}
.page-id-39 .contenedor-contacto{
    display: none;
}
.page-id-41 .contenedor-contacto{
    display: none;
}
.titcon{
    grid-area: titcon;
}
.titcon h1{
    font-family: roc-grotesk-compressed, sans-serif;
    font-size: calc(25px + 3.5vw);
    margin-top: 0;
}

.cont{
    grid-area:cont;
}
.fil{ 
    border-top: 2px solid;
    border-color: #9F9F9F;
    font-family: roc-grotesk, sans-serif;
    margin-top: 10px;
    margin-bottom: 50px;
}

input.wpcf7-form-control{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 18px;
}

.wpcf7-text {
    border: none;
    font-family: roc-grotesk, sans-serif !important;
    font-size: 18px;
    height: auto;
    width: 100%;
}

.wpcf7-textarea {
    border: none;
    width: 101%;
    padding-top: 10px;
    font-size: 18px;
    font-family: roc-grotesk, sans-serif !important;
}

.wpcf7-list-item {
    margin: 0;
    font-size: 14px;
}
.wpcf7-submit {
    color: black !important;
    border: none;
    height: 50px;
    text-align: left;
    display: flex;
    background-color: unset;
    cursor: pointer;
    margin-top: 0px;
    color: #535353;
    font-family: roc-grotesk, sans-serif;
    font-size: 24px !important;
}
.clients{
    background-color: #eeeeee;
    margin-top: 5%;
    padding-top: 50px;
    padding-bottom: 50px;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "cli1 cli2 cli3 cli4"
    "cli5 cli6 cli7 cli8";
   
}
.cli1{
    grid-area: cli1;
    display:grid;
}
.cli1 img{
    mix-blend-mode: multiply;
    align-self: center;
    justify-self: center;
    width: 70%;
}
.cli2{
    grid-area: cli2;
    display:grid;
}
.cli2 img{
    mix-blend-mode: multiply;
    align-self: center;
    justify-self: center;
    width: 70%;
}
.cli3{
    grid-area: cli3;
    display:grid;
}
.cli3 img{
    mix-blend-mode: multiply;
    align-self: center;
    justify-self: center;
    width: 70%;
}
.cli4{
    grid-area: cli4;
    display:grid;
}
.cli4 img{
    mix-blend-mode: multiply;
    align-self: center;
    justify-self: center;
    width: 70%;
}
.cli5{
    grid-area: cli5;
    display:grid;
}
.cli5 img{
    mix-blend-mode: multiply;
    align-self: center;
    justify-self: center;
    width: 70%;
}
.cli6{
    grid-area: cli6;
    display:grid;
}
.cli6 img{
    mix-blend-mode: multiply;
    align-self: center;
    justify-self: center;
    width: 70%;
}
.cli7{
    grid-area: cli7;
    display:grid;
}
.cli7 img{
    mix-blend-mode: multiply;
    align-self: center;
    justify-self: center;
    width: 70%;
}
.cli8{
    grid-area: cli8;
    display:grid;
}
.cli8 img{
    mix-blend-mode: multiply;
    align-self: center;
    justify-self: center;
    width: 70%;
}
.footer-info{
    border-top: 1px solid #dddddd;
    background-color: #eeeeee;
    padding: 50px 5% 50px 5%; 
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    "cop legal";
}
.cop{
    grid-area: cop;
    text-align: left;
    color: #080808;
}
.cop p{
    font-size: 18px;
}
.legal{
    grid-area: legal;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 5%;
    text-align: center;
}
.legal a{
    text-decoration: none;
    color: #080808;
}
   
/*-----------------------------------------------RESPONSIVE------*/

@media screen and (max-width: 1440px){
 .cua{
     min-height: 750px ;
 }
}
@media screen and (max-width: 1024px){
    .header{
        grid-template-columns: 1fr auto;
    }
    .cheese{
        margin-top: 15%;
    }

    .cuatxt p {
       margin-right: 0;
}
.cua{
    min-height: 550px;
}
.rowpics{
    padding: 5% 5% 20% 5%;
}
.clients{
    margin-top: 5%;
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "cli1 cli2"
    "cli3 cli4"
    "cli5 cli6"
    "cli7 cli8";

}
}
@media screen and (max-width: 980px){
    .menu-desktop{
        display: none;
    }
}
@media screen and (max-width: 768px){
    .bars {
       top: 30%;
       left: 10%;
       right: 10%;
     }
     .bars2 {
        left: 10%;
        right: 10%;
      }
    .bars img {
        width: 100%;
    }
    .bars2 img {
    width: 100%;
}
.cua{
    min-height: 450px;
}
.rowpics{
    padding: 0% 5% 20% 5%;
}
.cop{
    margin-bottom: 5%;
}
.legal{
    grid-template-columns: 1fr;
    text-align: left;
}
.legal a{
    margin-top: 5%;
}
.footer-info{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
    "cop"
    "legal";
}
}
@media screen and (max-width: 680px){

    .header{
        margin-right: 10%;
    }
    .first {
        padding: 15% 5% 1% 5%;
        background-color: #080808;
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 5%;
        grid-template-areas:
            "txtfirst"
            "cheese"
            "txtfirstp";
    }
    .cheese {
        margin: 0% 0% 5% 15%;
    }
    .cheese img{
        width: 75%;
    }
    .txtfirstp{
        margin-top: 10%;
    }
.consultoria {
    grid-template-columns: 1fr;
    grid-template-areas:
        "txtcon"
        "bars"
        "bars2"
        "txtconp";
}
    .bars {
        position: unset;
    }
    .bars2 {
       margin-top: 10%;
       position: unset;
     }
    .txtconp{
        margin-top: 10%;
        position: unset;
    }
    .puntos {
        padding: 15% 5% 0% 5%;
        background-color: #FFFFFF;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
        "uno"
        "graf"
        "dos"
        "cir"
        "tres"
        "moun"
        "cua";
    }
    .uno, .dos, .tres{
        margin-bottom: 25%;
    }
    .puntos h2{
        margin: 0 auto;
    }
    .tres{
        padding-top: 15%;
    }
    .cua{
        background-position-y: 60%;
        min-height: 500px;
    }  
    .moun img {
        width: 100%;
    }
    .areas h1{
        margin-right: 0;
    }
    .rowpics {
        grid-template-columns: 1fr;
          grid-template-areas:
            "pic1"
            "pic2" 
            "pic3"
            "pic4"
            "pic5";
    }
    .contenedor-contacto {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
        "titcon" 
        "cont";
    }
    .clients{
        margin-top: 5%;
        display:grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: 
        "cli1"
        "cli2"
        "cli3"
        "cli4"
        "cli5"
        "cli6"
        "cli7"
        "cli8";
    }

}