/*
Theme Name: Santipuig

Author: Santipuig

Description: A powerful Bootstrap 5 WordPress Starter Theme with WooCommerce Support. <a href="https://bootscore.me/category/documentation/" target="_blank">Documentation</a>. This theme gives you full control whatever you do and the full freedom to design whatever you want. It comes with a wide selection of category, page, post, author and archive templates as well as sidebar, header, footer and 404 widgets. There are no customizer settings in the backend. All settings can only be made by touching the code. Some CSS, HTML, PHP and JS Skills are required to customize it.
Version: 5.3.4
Requires at least: 5.0
Tested up to: 6.4.1
Requires PHP: 7.4
License: MIT License
License URI: https://github.com/bootscore/bootscore/blob/main/LICENSE
Text Domain: bootscore
Tags: featured-images, threaded-comments, translation-ready

Use this theme to make something cool, have fun, and share what you've learned with others.

Santipuig is based on Underscores https://underscores.me/, (C) 2012-2022 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/* 
All style editing is done via scss/_bscore_custom.scss
*/



:root {

    --black: #111;
    --red: #d41f32;
    --gray: #e9e9e9;

    --px10: 0.625rem;   /* 10px / 16px (tamaño de fuente base) = 0.625rem */
    --px12: 0.75rem;
    --px14: 0.875rem;
    --px16: 1rem;
    --px18: 1.125rem;
    --px20: 1.25rem;
    --px22: 1.375rem;
    --px24: 1.5rem;
    --px26: 1.625rem;
    --px28: 1.75rem;
    --px30: 1.875rem;
    --px32: 2rem;
    --px34: 2.125rem;
    --px36: 2.25rem;
    --px38: 2.375rem;
    --px40: 2.5rem;
    --px45: 2.8125rem;
    --px50: 3.125rem;
}




@font-face {
    font-family: osw;
    src: url(fonts/Oswald-Light.ttf);
    font-weight: 300;
}

body{
    font-family: osw, sans-serif;
    font-weight: 300;
    color: var(--black);
}


html, body {
    height: auto;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}


.text-red{
    color: var(--red)
}

.osw{
    font-family: osw, sans-serif;
}

.bl{
    border-left: 1px solid #000
}
.br{
    border-right: 1px solid #000
}
.bt{
    border-top: 1px solid #000
}
.bb{
    border-bottom: 1px solid #000
}

.bg-gray{
    background-color: var(--gray)
}

#bootscore-navbar li a{
    font-family: osw,sans-serif;
    font-size: var(--px20);
    color: var(--black)
}


.navbar-expand-lg .offcanvas .offcanvas-body {
    align-items: end
}

.top-nav-widget{
    position: relative
}

.top-nav-widget .wp-block-social-links{
    margin-bottom: 0.75rem;
}

.top-nav-widget .wp-block-social-links.is-style-logos-only .wp-social-link svg {
    height: 1.0em;
    width: 1.0em;
}

#footer-menu li a,
#submenu ul li a{
    position: relative;
    color: var(--black);
    font-size: var(--px20);
    line-height: 1
}



#footer-menu li a{
    --bs-nav-link-padding-x: 1.5rem
}


#footer-menu li a:after,
#footer-menu li a:before,
#submenu ul li a:after,
#submenu ul li a:before{
    position: absolute;
    content: "";
    left: 0;
    height: 20px;
    width: 1px;
    top: 53%;
    transform: translateY(-50%);
    background-color: #000;

}

#footer-menu li a:before,
#submenu ul li a:before{
    left: auto;
    right: -1px;
}

#footer-menu >li:first-child a:after,
#submenu ul >li:first-child a:after{
    display: none
}

#footer-menu >li:last-child a:before,
#submenu ul >li:last-child a:before{
    display: none
}

#footer-menu,
#submenu ul{
    justify-content: center
}

#footer-menu li a{
    font-size: var(--px16)
}

.footer-logo{
    text-align: center
}

.footer-logo img{
    width: 120px
}


ul li.current-menu-item a,
#footer-menu li a:hover,
#bootscore-navbar li a:hover,
#submenu ul li a:hover{
    color: var(--red)!important
}

#nav-main{
    z-index: 1;
    background-color: #fff;
    transition: all .15s linear;
}

.cont-submenu{
    position: relative;
    z-index: 0;
    transition: all .15s linear;
}

.to-fixed .cont-submenu{
    margin-top: -100px
}

.to-fixed #nav-main{
    padding: 0;

    box-shadow: 0px 0px 6px 1px rgba(0,0,0,.25)
}


#content{
    margin-top: 200px;
    min-height: 400px;
}

.alm-listing{
/*    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    gap: 3px*/
}

.alm-listing > div:not(.img-loading){
   opacity: 0!important
}

.alm-item{
/*    flex: 0 0 auto;*/
    width: calc(25% - 7px);
    margin-bottom: 7px;
    position: absolute;
    left: 0;
    top: 0
}

.cont-item{
    position: relative;
    height: 100%;
}

.cont-item .descripcion{
    position: absolute;
    text-align: center;
    width: 100%;
    bottom: 1rem;
    padding: 0 1rem;
    color: #fff;
    opacity: 0;
    transform: translateY(100%);
    transition: all .15s ease
}

.cont-item:hover .descripcion{
    opacity: 1;
    transform: translateY(0);
}


#rotating-image{
    transition: transform 0.15s linear;
}


.navbar-brand.md svg,
.navbar-brand.md img{
    position: absolute;
    left: 0;
    top: 3px;
    width: 120px;
    height: 120px
}

.navbar-brand.md > img:first-child{
    position: relative;
    top: 0
}


.mfp-zoom-in {
    /* start state */
    /* animate in */
    /* animate out */
}
.mfp-zoom-in .mfp-with-anim {
    opacity: 0;
    transition: all 0.2s ease-in-out;
    transform: scale(0.8);
}
.mfp-zoom-in.mfp-bg {
    opacity: 0;
    transition: all 0.3s ease-out;
}
.mfp-zoom-in.mfp-ready .mfp-with-anim {
    opacity: 1;
    transform: scale(1);
}
.mfp-zoom-in.mfp-ready.mfp-bg {
    opacity: 0.8;
}
.mfp-zoom-in.mfp-removing .mfp-with-anim {
    transform: scale(0.8);
    opacity: 0;
}
.mfp-zoom-in.mfp-removing.mfp-bg {
    opacity: 0;
}

img.mfp-img{
    animation: open 1s;
}
@keyframes open {
    0%   {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.header-actions .btn{
    border-radius: 0;
    font-size: 24px;
    line-height: 1
}

.full-img img {
    height: 100%!important;
    width: 100%;
    object-fit: cover;
}


.cont-img-contact {
    display: flex;
    justify-content: end;
}

.cont-img-contact figure {
    flex: 0 0 auto;
    width: calc(50vw - 66.66666667% + 1.5rem);
    max-width: none;
}


.servicio1 > div:first-child{
    display: flex;
    justify-content: end;
}

.servicio1 > div:last-child{
    display: flex;
    justify-content: start;
}

.servicio1 figure,
.servicio2 figure {
    flex: 0 0 auto;
    width: calc(50vw - 1.5rem);
    max-width: none;
    height: 100%;
}

.box-servicio{
    background-color: var(--gray);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.box-servicio:after {
    position: absolute;
    content: "";
    top: 0;
    left: calc(var(--bs-gutter-x) * -1);
    width: calc(var(--bs-gutter-x) + 50vw);
    height: 100%;
    background-color: var(--gray);
    z-index: -1;
}

.servicio2 .box-servicio:after{
    left: auto;
    right: calc(var(--bs-gutter-x) * -1);
}


input[type=checkbox], input[type=radio] {
    position: relative;
    border: 2px solid #000;
    border-radius: 2px;
    background: none;
    cursor: pointer;
    line-height: 0;
    margin: 0 .6em 0 0;
    outline: 0;
    padding: 0 !important;
    vertical-align: text-top;
    height: 20px;
    width: 20px;
    -webkit-appearance: none;
    opacity: .5;
    border-radius: 10px
}

input[type=radio]{
    border-radius: 0;
    border: 1px solid #000;
    height: 16px;
    width: 16px;
}

input[type=checkbox]:hover, input[type=radio] {
    opacity: 1;
}

input[type=checkbox]:checked, input[type=radio]:checked {
    background-color: #fff;
    opacity: 1;
}


input[type=checkbox]:checked:before, input[type=radio]:checked:before {
    content: '';
}

input[type=checkbox]:before, input[type=radio]:before  {
    position: absolute;
    right: 50%;
    top: 50%;
    width: 5px;
    height: 10px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    margin: -1px -1px 0 -1px;
    transform: rotate(45deg) translate(-50%, -50%);
    z-index: 2;
}

.text-privacy{
    font-size: 11px
}


input::placeholder,
textarea::placeholder{
    font-family: 'Oswald', sans-serif;
    color: var(--black);
    font-weight: 400;
    font-size: 18px
}

textarea, input:not([type="file"], [type="image" ], [type="submit"], [type="checkbox"], [type="radio"]) {
    border: 0;
    border-bottom: 1px solid var(--black);
    width: 100%;
    background-color: transparent;
}

textarea{
    height: 50px;
    padding: 10px;
    padding-left: 0;
    padding-top: 0
}

.form-item p{
    display: flex;
    align-items: end
}

.form-item p > span:first-child{
    width: 100px;
    line-height: 1
}

.wpcf7-submit{
    border: 1px solid #000;
    background-color: #fff;
    color: var(--black);
    position: relative;
    padding: 5px 4rem;
    max-width: 100%;
    min-width: auto;
    text-transform: uppercase;
    border-radius: 0;
}

.wpcf7-submit:hover{
    background-color: var(--black);
    color: #fff
}

.wpcf7-form p > label{
    display: block
}

.wpcf7-form-control-wrap{
    flex: 1
}

.wpcf7-list-item-label{
    font-size: 13px
}

.wpcf7-list-item{
    margin-left: 0
}

.wpcf7-form > div p{
    margin-bottom: 3rem
}

.cont-btn p,
.row-contact p{
    margin-bottom: 0;
    position: relative;
    text-align: right
}



.wpcf7-not-valid-tip{
    font-size: 14px
}

.wpcf7-spinner{
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    margin: 0
}

.nav-link.active{
    color: var(--red)!important
}


.text-bottom{
    position: absolute!important;
    bottom: 10rem;
    right: calc(var(--bs-gutter-x) / 2);
}


@media(min-width:1200px){
    #bootscore-navbar li a{
        --bs-navbar-nav-link-padding-x: 1.5rem;
    }
    #submenu li a{
        --bs-nav-link-padding-x: 3rem;
    }
}


@media (max-width: 991px){
    
    .offcanvas-body{
        display: flex;
        flex-direction: column;
        align-items: initial!important
    }
    .offcanvas-header{
        background-color: var(--red);
        color: #fff;
    }
    .offcanvas-header .btn-close{
        opacity: 1;
        filter: invert(1);
    }
    
    .top-nav-widget .bl{
        border: 0
    }
    
    .top-nav-widget p{
        text-align: center
    }
    
    .top-nav-widget .wp-block-social-links{
        justify-content: center
    }
    
    .alm-item{
        width: calc(33.333333333% - 7px);
    }

    #footer-menu >li:first-child a:after,
    #submenu ul >li:first-child a:after{
        display: block
    }

    #footer-menu >li:last-child a:before,
    #submenu ul >li:last-child a:before{
        display: block
    }

}

@media (max-width: 767px){
    .row-md > div{
        flex: 0 0 auto;
        width: 100%;
    }
    .social-footer{
        border: 0;
    }
    .social-footer ul{
        justify-content: center
    }

    .text-bottom{
        position: relative!important;
        bottom: 0;
        right: auto
    }
    
    .cont-img-contact figure{
        width: 100%;
    }

}
@media (max-width: 575px){

    #content{
        margin-top: 236px
    }
    
    #submenu .nav{
        --bs-nav-link-padding-x: 1.5rem
    }

    .row-sm > div,
    .servicio1 > div,
    .servicio2 > div{
        flex: 0 0 auto;
        width: 100%;
    }

    .servicio1 figure, .servicio2 figure{
        flex: 0 0 auto;
        width: 100%;
    }
    .box-servicio:after{
        display: none
    }

    .order-sm{
        order: -1
    }

    .alm-item{
        width: calc(50% - 7px);
    }

    #footer-menu li{
        flex: 0 0 auto;
        width: 33.3333333%;
        text-align: center
    }




    #footer-menu >li:nth-child(2),
    #footer-menu >li:nth-child(1){
        width: 50%;
    }


    #footer-menu >li:nth-child(2) a{
        padding-right: 0
    }

    #footer-menu >li:nth-child(1) a{
        padding-left: 0;
    }



    #footer-menu >li:nth-child(3){
        width: 100%;
        border-bottom: 1px solid #000;
        padding-bottom: 0.5rem;
        margin-bottom: 0.5rem
    }

    #footer-menu >li a:before,
    #footer-menu >li a:after{
        display: none!important
    }

}