/*
Theme Name: X press
Author: Xpress

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.

X press 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: #111111;
    --esmeralda: #50c8c9;
    --gray: #F1F0EF;
    --scale-factor: 1;
    --px14: calc(0.875rem * var(--scale-factor));
    --px16: calc(1rem * var(--scale-factor));
    --px18: calc(1.125rem * var(--scale-factor));
    --px20: calc(1.25rem * var(--scale-factor));
    --px22: calc(1.375rem * var(--scale-factor));
    --px24: calc(1.5rem * var(--scale-factor));
    --px26: calc(1.625rem * var(--scale-factor));
    --px28: calc(1.75rem * var(--scale-factor));
    --px30: calc(1.875rem * var(--scale-factor));
    --px32: calc(2rem * var(--scale-factor));
    --px34: calc(2.125rem * var(--scale-factor));
    --px36: calc(2.25rem * var(--scale-factor));
    --px38: calc(2.375rem * var(--scale-factor));
    --px40: calc(2.5rem * var(--scale-factor));
    --px45: calc(2.8125rem * var(--scale-factor));
    --px50: calc(3.125rem * var(--scale-factor));

}

@font-face {
    font-family: 'got';
    src: url('fonts/Trade-Gothic.otf')
}
@font-face {
    font-family: 'got2';
    src: url('fonts/GOTHIC.TTF')
}

@font-face {
    font-family: 'urb';
    src: url('fonts/Urbanist-VariableFont_wght.ttf')
}




html, body {
    height: auto;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body{
    background-color: var(--black);
    color: #fff;
    font-family: 'urb', sans-serif;
    font-size: var(--px16);
}

b, strong{
    font-weight: bold
}

.got{
    font-family: 'got', sans-serif;
}



.bg-black{
    background-color: var(--black)
}

.bg-gray{
    background-color: var(--gray)
}
.bg-red{
    background-color: var(--esmeralda)
}


.text-black{
    color: var(--black)!important
}

.text-esmeralda{
    color: var(--esmeralda)
}



a{
    text-decoration: none;
    color: var(--black)
}

.fs-12 {
    font-size: 12px;
}

.fs-14 {
    font-size: var(--px14);
}
.fs-18 {
    font-size: var(--px16);
}
.fs-18 {
    font-size: var(--px18);
}
.fs-20 {
    font-size: var(--px20);
}
.fs-22 {
    font-size: var(--px22);
}
.fs-24 {
    font-size: var(--px24);
}
.fs-26 {
    font-size: var(--px26);
}
.fs-28 {
    font-size: var(--px28);
}
.fs-30 {
    font-size: var(--px30);
}
.fs-32 {
    font-size: var(--px32);
}
.fs-34 {
    font-size: var(--px34);
}
.fs-36 {
    font-size: var(--px36);
}
.fs-38 {
    font-size: var(--px38);
}
.fs-40 {
    font-size: var(--px40);
}
.fs-45 {
    font-size: var(--px45);
}
.fs-50 {
    font-size: var(--px50);
}


.bl{
    border-left: 1px solid var(--esmeralda)
}
.br{
    border-right: 1px solid var(--esmeralda)
}
.bt{
    border-top: 1px solid var(--esmeralda)
}
.bb{
    border-bottom: 1px solid var(--esmeralda)
}


.fixed-top{
    background-color: var(--black);
}

#bootscore-navbar li a{
    color: #fff;
    font-family: 'got', sans-serif;
}

#footer-menu li a{
    color: var(--black);
    font-size: var(--px16)
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1{
    font-family: 'got', sans-serif;
}

#bootscore-navbar li.current-menu-item a,
#footer-menu li a:hover,
#bootscore-navbar li a:hover{
    color: var(--esmeralda)
}


.full-img{
    height: 100%
}

.full-img img{
    width: 100%;
    height: 100%!important;
    object-fit: cover;
}


.custom-logo-link img{
    width: 350px;
    transition: all .15s linear
}


#content{
    margin-top: 140px
}

.offcanvas-body{
    flex-direction: column
}

.navbar-expand-lg .navbar-nav{
    flex-direction: column;
    border-right: 2px solid var(--esmeralda);
    transition: flex-direction 0.5s ease-in-out;
    animation-duration: .15s;
    animation-fill-mode:both;
}

.navbar-expand-lg .navbar-nav .nav-link{
    padding-bottom: 0;
    padding-top: 0;
    text-align: right
}


.to-fixed .navbar-expand-lg .navbar-nav{
    flex-direction: row;
    animation-name: in;
}

.retro .navbar-expand-lg .navbar-nav{
    animation-name: out;
}


.fixed-top.to-fixed .custom-logo-link img{
    width: 190px
}


@keyframes in {
    0% {
        transform:translateX(50px);
    }
    100% {
        transform:translateX(0);
    }
}

@keyframes out {
    0% {
        transform:translateX(-50px);
    }
    100% {
        transform:translateX(0);
    }
}

.footer-bottom{
    padding: 10px 25px;
    background-color: #fff;
    display: table;
    margin: auto;
    position: relative;
}

.bootscore-info:after{
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    background-color: var(--esmeralda);
    top: 50%;
}


.bootscore-footer .col-auto{
    flex: 1
}


.cont-banner figure{
    width: 80%;
    margin-left: auto;

}


.img-border img,
.cont-banner figure img{
    border: 1px solid rgba(80, 200,201,.2)
}

.cont-banner .banner2{
    margin-left: 0;
    z-index: 1001;
    padding-right: 3rem
}

.cont-banner:after{
    position: absolute;
    content: "";
    height: 100%;
    width: 3px;
    right: 20%;
    top: 0;
    z-index: -1;
    background-color: var(--esmeralda);
}

.banner2, .banner3{
    margin-top: -8rem;
}

.banner1,  .banner3{
    padding-left: 3rem;
    border-left: 3px solid var(--esmeralda)
}


.box-title{
    color: var(--esmeralda);
    padding: 1.5rem 0;
    border-top: 1px solid var(--esmeralda);
    border-bottom: 1px solid var(--esmeralda);
    margin-bottom: 1.5rem;
    position: relative;
    font-size: 38px
}

.box-title:after,
.box-title:before{
    position: absolute;
    content: "";
    width: 50vw;
    height: 1px;
    left: -50vw;
    top: -1px;
    background-color: var(--esmeralda);
}

.box-title:after{
    top: auto;
    bottom: -1px
}

.box-subtitle{
    flex: 1;
    font-size: 28px;
    font-family: 'urb', sans-serif;
    font-weight: 300
}

.box-description{
    font-size: 16px
}

.box-arrow svg{
    width: 50px;
    height: 30px;
    transition: all .15s linear
}


.box-header a[aria-expanded="true"] svg{
    transform: rotate(180deg)
}

.box-description ul li{
    position: relative;
}

.box-description ul{
    list-style: none
}

.box-description ul li:after {
    position: absolute;
    content: "";
    left: -2rem;
    top: 5px;
    width: 18px;
    height: 18px;
    background-image: url(img/noun-sun.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}


.top-button{
    background-color: var(--esmeralda);
    border-color: var(--esmeralda);
    color: #111;
}

.top-button:active,
.top-button:focus,
.top-button:hover{
    background-color: var(--esmeralda)!important;
    border-color: var(--esmeralda);
    color: #111;
    opacity: .75
}

.img-text figcaption{
    transform: rotate(-90deg);
    transform-origin: left center;
    margin: 0;
    position: absolute;
    left: -1.5rem;
    bottom: 5rem;
    white-space: nowrap;
}

.title-esmeralda strong{
    color: var(--esmeralda);
    font-weight: 500
}


.block-editor-block-list__layout.is-root-container, .editor-styles-wrapper .block-editor-block-list__layout.is-root-container{
    background-color: #000;
    color: #fff
}

.btn{
    border-radius: 0
}

.btn-contact{
    width: 200px;
    max-width: 100%
}



input[type=checkbox] {
    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=checkbox]:hover {
    opacity: 1;
}

input[type=checkbox]:checked {
    background-color: #fff;
    opacity: 1;
}



input[type=checkbox]:checked:before {
    content: '';
}
input[type=checkbox]: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:not(.wp-block-search__input)::placeholder,
textarea::placeholder{
    font-family: 'got', sans-serif;
    color: #fff;
    font-weight: 400
}

textarea, input:not([type="file"], [type="image" ], [type="submit"], [type="checkbox"], [type="radio"]) {
    border: 0;
    border-bottom: 1px solid var(--esmeralda);
    width: 100%;
    background-color: transparent;
    padding-bottom: 1rem;
    color: #fff
}

.acf-input-wrap input{
    color: #111;
    border: 1px solid #8c8f94;
    padding: 4px 8px
}


textarea{
    height: 45px;
    border-bottom: 1px solid var(--esmeralda)
}

.wpcf7-not-valid-tip{
    font-size: 12px
}

.wpcf7-submit{
    border: 0;
    color: var(--esmeralda);
    border-bottom: 1px solid var(--esmeralda);
    background-color: transparent;
    position: relative;
    padding-left: 3px;
    padding-right: 3px;
    font-family: 'got',sans-serif
}

.wpcf7-submit:hover{
    background-color: var(--black);
    color: #fff
}

.wpcf7-list-item-label{
    font-size: 13px
}

.wpcf7-list-item{
    margin-left: 0
}

.row-contact > div{
    position: relative
}

.row-contact p{
    margin-bottom: 0
}




.box-contacto:after{
    position: absolute;
    content: "";
    width: 100%;
    height: calc(100%);
    left: -1.5rem;
    top: -1.5rem;
    background-color: var(--esmeralda);
    z-index: -1
}



.wpcf7-spinner{
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    margin: 0
}

.w-100 img{
    width: 100%
}


.box-data a:hover .box-title{
    color: #fff
}

.box-data a:hover .box-arrow svg line{
    stroke: #fff!important
}


.form-registro input, .form-registro select{
    font-family: pro, sans-serif
}

.form-registro input::placeholder{
    font-family: pro, sans-serif
}


@media (min-width: 992px){
    #footer-menu li{
        flex-grow: 1;
        text-align: center;
    }
    .border-left{
        border-left: 1px solid #000;
        position: relative
    }


    .border-left:after{
        position: absolute;
        content: "";
        width: 1px;
        height: 18px;
        background-color: #000;
        right: 0;
        top: 50%;
        transform: translateY(-50%)
    }
}

@media screen and (max-width: 1400px) {
    :root {
        --scale-factor: 0.9; /* Ajuste de escala para pantallas menores a 1400px */
    }
}

@media (max-width: 1199px) and (min-width: 992px){
    #footer-menu li a{
        --bs-nav-link-padding-x: 0.5rem
    }
}

@media (max-width: 991px){
    #footer-menu{
        justify-content: center
    }

    .custom-logo-link img {
        width: 280px;
    }

    #content{
        margin-top: 115px
    }

    .header-actions .btn{
        border-radius: 0;
        border-color: var(--esmeralda);
        color: var(--esmeralda);
        font-size: 24px;
        line-height: 1.3
    }

    .offcanvas-header{
        background-color: var(--esmeralda);
        color: var(--black);
    }

    .offcanvas-header .btn-close{
        opacity: 1
    }

    .navbar-expand-lg .navbar-nav{
        border: 0;
    }

    #bootscore-navbar li a{
        color: var(--black);
        padding-bottom: 0.5rem;
        padding-top: 0.5rem;
        text-align: left
    }

    .offcanvas-body{
        display: flex;
    }

    .cont-top{
        order: 6;
        color: var(--black);
        margin-top: auto;
        margin-left: auto;
        margin-right: auto
    }

    .banner2, .banner3{
        margin-top: -3rem
    }

}


@media (max-width: 767px){
    .row-md > div{
        flex: 0 0 auto;
        width: 100%;
    }

    .custom-logo-link img {
        width: 240px;
    }

    #content{
        margin-top: 101px
    }

}
@media (max-width: 575px){
    .banner2, .banner3{
        margin-top: -1.5rem
    }

    .row-sm > div{
        flex: 0 0 auto;
        width: 100%;
    }
}

.about {
    text-align: justify;
}

.editor-styles-wrapper textarea, .editor-styles-wrapper input:not([type="file"], .editor-styles-wrapper [type="image" ], .editor-styles-wrapper [type="submit"], .editor-styles-wrapper [type="checkbox"], .editor-styles-wrapper [type="radio"]) {
background-color: black;
}