/*!
Theme Name: Gadok
Theme URI: http://underscores.me/
Author: Parra Agency
Author URI: https://parra.agency/
Description: (`･ω･´)
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: gadok
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Gadok is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");

html{
    --gadok: #1C53E3;
    --primario: #061B2B;
    --secundario: #F3F3F3;
    --borde: #e3e3e3;
}
body{
    font-family: 'Roboto', sans-serif;
    color: var(--primario);
}
.menuIzq{
    width: 25px;
    height: 19px;
    border: 0;
    margin: 11px 0;
    margin-right: 20px;
    background: url(img/menu.svg) center no-repeat;
    display: block;
    float: left;
}
.logo{}
.logo a{
    width: 145px;
    height: 35px;
    display: block;
    text-indent: -99em;
    overflow: hidden;
    background: url(img/logo.svg) center no-repeat;
    background-size: contain;
}
.menuGadok{margin: 2px 0;}
.menuGadok .nav-menu{
    display: flex;
    align-items: center;
    border-radius: 100px;
    justify-content: center;
}
.menuGadok .nav-menu li{}
.menuGadok .nav-menu li a{
    color: var(--primario);
    font-weight: 500;
    font-size: 14px;
    padding: 5px 20px;
}
.menuGadok .nav-menu li.current-menu-item a,.menuGadok .nav-menu li.current-page-ancestor a{
    background: var(--gadok);
    color: #FFF;
    border-radius: 100px;
    font-weight: 400;
}
.redsocial{
    text-decoration: none!important;
    border: 1px solid var(--borde);
    border-radius: 100px;
    padding: 6px 7px;
    color: var(--primario);
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    display: inline-block;
    width: 35px;
    height: 35px;
}
.redsocial:hover{
    background: var(--gadok);
    color: #FFF;
}
.inicioIn{
    height: 550px;
    background: black url(img/bg.jpg) center no-repeat;
    background-size: cover;
    position: relative;
}
.inicioIn::after{
    content: '';
    position: absolute;
    height: 288px;
    left: 0;
    right: 0;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}
.inicioIn .container{
    position: relative;
    height: 550px;
    z-index: 9;
}
.iIn6{
    height: 550px;
    position: relative;
    border-left: 2px solid white;
    border-right: 2px solid white;
}
.iIn6Text{
    height: 288px;
    width: 100%;
    background: #FFF;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
}
.iIn6Text h1{
    margin: -2px 0 10px;
    font-size: 43px;
    font-weight: 300;
    line-height: 1.1;
}
.iIn6Text p{
    margin: 0;
    font-size: 21px;
    line-height: 1.3;
}
.finalGad{}
.finalGad img{width: 100%;height: auto}
#final p{font-size: 14px}
#final p a{text-decoration: none!important;color: var(--gadok)!important}
.footerLogo{
    display: block;
    margin-right: 10px;
    float: left;
}
.footerLogo a{
    width: 62px;
    height: 58px;
    display: block;
    background: url(img/k.svg) center no-repeat;
    background-size: contain;
}
.copyGadok{
    width: 285px;
    display: inline-block;
    line-height: 1.2;
    font-size: 13px!important;
    padding: 6px 0 0;
}
.ctaInicio{
    background: #061B2B;
}
.ctaInicio h3{
    margin: 0;
    color: #FFF;
    font-size: 23px;
    font-weight: 400;
    padding-top: 2px;
}
.ctaInicio a{
    display: block;
    text-decoration: none!important;
    color: var(--primario);
    background: #FFF;
    text-align: center;
    border-radius: 100px;
    padding: 10px 25px;
    float: right;
    font-weight: 500;
    font-size: 15px;
}
.ctainterno{background: #e3e3e3;margin-bottom: -1px}
.ctainterno h3{color: var(--primario)}
.ctainterno a{}
.servicioTitulo{
    position: sticky;
    top: 3rem;
    height: auto;
}
.servicioTitulo h3{
    font-size: 24px;
    margin-bottom: 12px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--borde);
    font-weight: 400;
}
.servicioTitulo p{
    font-size: 15px;
    margin: 0;
}
.imgx{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
}
.servicioIn article{
    position: relative
}
.servicioIn .imgx{
    height: 205px;
    background-color: #000;
}
.servicioIn h3{
    font-size: 18px;
    margin: 18px 0 5px;
    font-weight: 500;
}
.servicioIn p{
    font-size: 15px;
    margin: 0 0 15px;
    opacity: 0.7;
}
.servicioIn a,.projrec a{
    text-decoration: none!important;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.5px;
    border-bottom: 2px solid;
    color: var(--primario);
    padding-bottom: 2px;
}
.industrial{
    border-top: 1px solid var(--borde);
    min-height: 600px;
    border-bottom: 1px solid var(--borde);
    background: url(img/refacciones.jpg) left top no-repeat;
    background-size: 46%;
}
.industrial a{
    text-decoration: none!important;
    margin-top: 30px;
    display: block;
    float: left;
    background: var(--gadok);
    color: #FFF;
    padding: 10px 30px;
    border-radius: 100px;
    font-size: 14px;
}
.industrial h1{
    margin: 30px 0 5px;
    font-weight: 300;
    font-weight: 400;
}
.industrial p{
    opacity: 0.7;
    margin: 0;
}
.industrialLogos{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-column-gap: 15px;
    text-align: center
}
.industrialLogos img{
    height: 20px;
    width: auto;
    display: block;
    margin: 0 auto;
}
.projTitulo{}
.projTitulo h3{
    font-size: 24px;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
}
.projrec{
    position: relative;
}
.projrec .imgx{
    height: 160px;
    background-color: #000;
    position: relative;
}
.projrec .imgx time{
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--primario);
    color: #FFF;
    font-size: 10px;
    padding: 4px 10px;
    border-radius: 100px;
}
.projrec h3{
    font-size: 18px;
    margin: 18px 0 5px;
    font-weight: 500;
}
.projrec p{
    font-size: 15px;
    margin: 0 0 5px;
    opacity: 0.7;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.offcanvas{max-width: 75vw}
.menuIzq{display: none}
.tituloInnerPage{}
.tituloInnerPage span{
    position: relative;
    padding-right: 115px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 15px;
}
.tituloInnerPage span::after{
    content: '';
    height: 2px;
    display: inline-block;
    background: var(--gadok);
    position: absolute;
    right: 0;
    width: 100px;
    top: 50%;
    transform: translate(0, -50%);
}
.tituloInnerPage h1{
    font-size: 53px;
    font-weight: 300;
    line-height: 1.1;
    margin: 5px 0 0 -3px;
}
.tituloInnerPage p{
    margin: 0;
    font-size: 18px;
}
.granIMG{
    height: 60vh;
    background-color: #eee;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.servicioInPage{}
.servicioInPage .imgx{
    height: 300px;
    border-radius: 0;
    margin-bottom: 1.5rem;
    position: relative;
}
.servicioInPage .imgx mark{
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1rem 1rem 0 0;
    background: #FFF;
    height: 67px;
}
.servicioInPage .imgx h2{
    font-weight: 400;
    margin: 0;
    font-size: 23px;
    display: inline-block;
    float: inherit;
    clear: inherit;
}
.servicioInPage .imgx img{
    background: var(--gadok);
    padding: 1rem;
    margin-right: -1rem;
    margin-top: -1rem;
    margin-left: 1rem;
}
.servicioInPage p{
    margin: 0 0 1.5rem;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
}
.servicioInPage a{
    text-decoration: none;
    display: inline-block;
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important;
    color: var(--primario);
    padding: 15px 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
}
.servicioInPage a i{padding-left: 15px;}
.servicioInPage a:hover{background: var(--gadok);color: #FFF;border-color: var(--gadok)}
.servicioInPage a:hover i{padding-left: 20px;}
.menuLateral{
    position: sticky;
    top: 3rem;
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}
.menuLateral a{
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
    display: block;
    color: var(--primario);
    text-decoration: none;
    font-size: 15px;
    padding: 15px;
    position: relative;
}
.menuLateral a:hover{background: var(--bs-border-color)}
.menuLateral a.activo{
    background: var(--gadok);
    color: #FFF;
}
.menuLateral a:last-child{border: 0}
.menuLateral a.activo::after{
    content: '';
    position: absolute;
    right: -20px;
    width: 0;
    height: 0;
    top: 0;
    border-style: solid;
    border-width: 26px 0 26px 20px;
    border-color: transparent transparent transparent #1c54e3;
}
.cardProyecto{}
.cardProyecto h5{
    margin: 0 0 0.5rem;
    font-size: 21px;
    font-weight: 400;
}
.cardProyecto p{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    margin: 0.5rem 0 1rem;
    line-height: 1.4;
    font-size: 14px;
}
.cardProyecto time{
    font-size: 14px;
    margin: 0.5rem 0 0;
    opacity: 0.7;
    font-size: 14px;
    text-transform: capitalize;
}
.sliderProyecto{
    text-align: center;
    background: #061B2B;
}
.sliderProyecto img{
    height: 600px;
    width: auto;
}
.formularioLateral{
    position: sticky;
    top: 3rem;
    background: #eee;
}
.formularioLateral form{
    padding: 1.5rem;
}
.formularioLateral label{
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5);
}
.formularioLateral input{
    width: 100%;
    border-radius: 3px;
    border: 1px solid var(--borde);
    font-size: 14px;
    padding: 5px;
    margin-top: 5px;
    color: var(--primario);
}
.formularioLateral textarea{
    width: 100%;
    border-radius: 3px;
    border: 1px solid var(--borde);
    font-size: 14px;
    padding: 5px;
    margin-top: 5px;
    color: var(--primario);
}
.formularioLateral p{margin-bottom: 10px;}
.formularioLateral p:last-child{margin-bottom: 0;}
.formularioLateral .wpcf7-spinner{
    position: absolute;
    bottom: 15px;
    right: 15px;
}
.formularioLateral .wpcf7-submit{
    border: 0;
    background: var(--gadok);
    color: #FFF;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 10px;
    font-size: 12px;
    margin: 0 0 -15px;
}
.industrialFeat{
    
}
.industrialFeat i{
    background: var(--gadok);
    color: #FFF;
    padding: 7px 15px;
    display: block;
    float: left;
    font-size: 25px;
    margin-bottom: 1rem;
    border-radius: 5px;
}
.industrialFeat h3{
    margin: 1rem 0 0.7rem;
    font-size: 18px;
    font-weight: 500;
}
.industrialFeat p{
    margin: 0;
    font-size: 14px;
}
.todosLosServicios{
    
}
.todosLosServicios ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
}
.todosLosServicios ul li{
    text-align: center;
    font-size: 15px;
    font-weight: 400;
    border: 2px solid var(--borde);
    padding: 30px;
}
.todosLosServicios ul li:hover{border-color: var(--gadok)}
.listaCorreosLat{
    position: sticky;
    top: 3rem;
    background: #eee;
    list-style: none;
    padding: 2rem 2rem 1rem;
}
.listaCorreosLat li{
    display: block;
    overflow: hidden;
    margin-bottom: 1rem;
}
.listaCorreosLat i{
    color: #b9b9b9;
    background: #fff;
    width: 60px;
    height: 60px;
    display: block;
    float: left;
    margin-right: 15px;
    text-align: center;
    font-size: 30px;
    padding: 7px 0;
}
.listaCorreosLat p{display: inline;}
.listaCorreosLat p b{}
#cabecera .trp-language-switcher{
    width: auto;
    margin-left: 15px;
}
#cabecera .trp-ls-shortcode-current-language{
    border: 0;
    width: 75px!important;
    padding: 0;
    margin: 0;
    margin-top: -2px;
    border-left: 1px solid var(--borde);
    padding-left: 13px;
}
#cabecera .trp-language-switcher > div > a.trp-ls-shortcode-disabled-language{
    padding: 7px 0;
    border-radius: 0;
}
#cabecera .trp-language-switcher:focus .trp-ls-shortcode-language,#cabecera .trp-language-switcher:hover .trp-ls-shortcode-language{
    border: 1px solid var(--borde)!important;
    width: 60px!important;
    padding: 0!important;
    text-align: center;
}
#cabecera .trp-ls-shortcode-language a:first-child{border-bottom: 1px solid var(--borde)}

@media only screen and (max-width: 1180px) {
    .desHe,.footerLogo{display: none}
    .ctaInicio h3{font-size: 17px;}
    .servicioTitulo p,.servicioIn p,.industrial p,.projrec p{font-size: 14px}
    .servicioTitulo h3{font-size: 20px}
    .servicioIn .imgx,.projrec .imgx{height: 140px}
    .servicioIn h3,.projrec h3{font-size: 15px}
    .industrial h1{font-size: 20px}
    .industrial{min-height: inherit;margin-bottom: 2rem;margin-top: 2rem;}
    .projTitulo h3{margin-bottom: 1rem}
    .finalGad{margin-top: 2rem!important}
    #final p{font-size: 12px}
    .menuIzq{display: block}
    #offGadok{
        
    }
    #offGadok .menu{
    margin: 0;
    padding: 0;
    list-style: none;
    }
    #offGadok .menu li{border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}
    #offGadok .menu li a{
    color: var(--primario);
    font-weight: 500;
    text-decoration: none;
    font-size: 23px;
    display: block;
    padding: 15px;
    }
    #offGadok .menu li.current-menu-item a{background: var(--gadok);color: #FFF}
    #offGadok .offcanvas-header{
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important;
    background: #f3f3f3;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 1px;
    }
    #offGadok .offcanvas-header h5{font-size: 16px;letter-spacing: 2px;}
    .servicioInPage .imgx h2{font-size: 17px}
    .inicioIn{background: black url(img/bgMob.jpg) top no-repeat;}
    .iIn6Text{background: rgba(255, 255, 255, 0.7)}
    .todosLosServicios ul{
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    }
}

@media only screen and (max-width: 600px) {
    .ctaInicio h3{text-align: center}
    .ctaInicio a,.industrial a{float: none;max-width: 200px;margin: 15px auto 0;text-align: center}
    .iIn6Text h1{font-size: 30px;text-align: center}
    .iIn6Text p{font-size: 16px;text-align: center;}
    .iIn6Text,.inicioIn::after{height: 200px;}
    .inicioIn,.inicioIn .container,.iIn6{height: 400px;}
    .servicioTitulo p{margin-bottom: 1rem}
    .industrial{
    padding-top: 200px!important;
    background-size: contain;
    background-position: 0% -100%;
    position: relative;
    }
    .industrial::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 170px;
    background: white;
    }
    .industrial .container{
    position: relative;
    z-index: 3;
    }
    .industrial{margin-top: 0}
    .projrec{margin-bottom: 1rem}
    .servicioIn .imgx, .projrec .imgx{height: 160px;}
    .finalGad{margin-top: 0!important}
    #final p{
    display: block;
    text-align: center;
    width: inherit;
    }
    .text-end{margin-top: 10px}
    .sliderProyecto {margin: 0 -1rem;}
    .sliderProyecto img{height: auto;max-width: 100%;}
    .todosLosServicios ul{grid-template-columns: repeat(2, 1fr);}
}