﻿@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400..700&display=swap');
body {
    color: #000;
    font-weight: 400;
    font-size: 15px;
    font-family: "Libre Baskerville", serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.control {
height:36px
}

.form-control {
    text-transform: uppercase;
    font-weight: 400;
}
::-webkit-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #8E8E8E;
    opacity: 1; /* Firefox */
    font-size: 14px;
    font-weight: 200;
}
input[type="checkbox"] {
    margin-right: 5px;
    vertical-align: middle;
}
.border {
    border: 1px solid #170312 !important;
}

.border-bottom {
    border-bottom: 1px solid #170312 !important;
}

a:hover {
    color: #170312;
}

a {
    color: #33032f;
    text-decoration: none;
}
.navbar {
    z-index:300;
}
.navbar-brand img {
    height: 50px;
    margin: 0;
}
.nav-link {
    font-weight: 600;
    color: #fff;
}
    .nav-link:hover {
        color: #F9B233;
    }

.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show > .nav-link {
    color: #00AACA;
}

/*.navbar-light .navbar-nav .nav-link {
    font-family: 'Noto Serif HK', serif;
}*/
.navbar-dark .navbar-nav .nav-link {
    color: #8E8E8E !important;
}
.navbar-black .navbar-nav .nav-link {
    color: #f1f1f1 !important;
}


.nav-tabs .nav-link {
    font-size: 3.5vw;

}
.offcanvas-collapse {
    top: 50px !important;
    opacity: .9 !important;    
/*    background-color: #000500 !important;*/
}

.icon2 {
    height:18px;
}
.navbar-toggler-icon {
    filter: invert(1);
}
    .btn-primary {
        background-color: #D58936;
        border-color: #D58936;
        color: #fff;
    }

        .btn-primary:hover {
            background-color: #AF2E1A;
        }

    .btn-secondary {
        background-color: #AF2E1A;
        border-color: #AF2E1A;
        color: #fff;
    }

        .btn-secondary:hover {
            background-color: #333333;
        }


    .text-primary {
        color: #D58936 !important;
    }

    .text-secondary {
        color: #AF2E1A !important;
    }


    .bg-primary {
        background-color: #D58936 !important;
    }

    .bg-secondary {
        background-color: #AF2E1A !important;
    }

    .bg-light {
        background: #eaeaea !important;
    }

    .bg-gradient {
        background: linear-gradient(180deg,#22519a 0%,#575756 90%) !important;
    }

    .bg-black {
        background-color: #170312;
    }

    .bg-dark {
        background-color: #575756 !important;
    }

    .text-primary {
        color: #33032f !important;
    }

    .text-success {
        color: #D2E303 !important;
    }

    .map {
        z-index: 99;
    }

    .icono {
        width: 3rem;
        margin: 2rem;
    }

    .imagenfondo {
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .fotoBKG {
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .search-bar {
        border-radius: .4rem !important;
    }

    .chip {
        display: inline-block;
        padding-left: 12px;
        padding-right: 12px;
        padding-top: 5px;
        padding-bottom: 5px;
        border-radius: 25px;
        font-size: 14px;
        font-weight: 400;
        line-height: 32px;
        /*   background-color: #2b2b2b;*/
        /* width: 110px;*/
        bottom: 55px;
        right: 20px;
        z-index: 100;
        position: fixed;
    }

        .chip a {
            color: #fff;
        }

    .box {
        position: fixed;
        z-index: 150;
        right: 20px;
        bottom: 1px;
        display: block;
        padding: 5px 12px;
        border-radius: 6px;
        background: #2b2b2b;
        opacity: .9;
        color: #ffffff;
        width: 200px;
    }

    .carousel-item {
        min-height: 200px;
        max-height: 450px;
    }

    .tarjetas {
        min-height: 200px;
        background-color: #2b2b2b;
    }

    .card {
        border: none;
    }

    .card-body {
        padding-bottom: 0;
        height: 160px !important;
    }

    .card-img-top {
        width: 100%;
        object-fit: cover;
        height: 200px !important;
    }

    .card-img {
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    .card-title {
        font-weight: 500;
    }

    .card-header {
        font-weight: 500;
    }

    .card-footer {
        font-weight: 500;
        border-top: unset;
        color: #fff;
        background-color: #AF2E1A
    }

    .card-img-overlay {
        top: 40px;
        left: 10px;
        text-shadow: 1px 1px 1px #000;
        color: #fff;
    }

    .card-img-overlay2 {
        background-color: #fff;
        border-radius: 0;
        padding: 5px 5px 0 0;
        position: absolute;
        top: 0;
        right: 0;
    }


    .badgetArea {
        min-height: 80px;
        max-height: 130px;
    }

    .rounded-pill {
        border: solid 1px #06bcc1 !important;
        border-radius: .8rem !important;
    }

    .text-shadow {
        text-shadow: 1px 1px 2px #000, -1px -1px 3px #000;
    }


    .list-group-item {
        background-color: unset;
    }

    h1 {
        font-weight: 600;
        font-size: 22px;
    }

    h2 {
        font-size: 20px;
        font-weight: 500;
    }

    h3 {
        font-size: 18px;
        font-weight: 600;
    }

    h4 {
        font-size: 14px;
        font-weight: 700;
    }

    .small, small {
        font-size: 12px !important;
    }

    .badge {
        margin: 6px 3px;
        font-weight: unset;
        font-size: 4.2vw;
    }

    .telefonos {
        font-size: 5.5vw;
        font-weight: 400;
    }

    .rrss {
        height: 25px;
    }

    .rrss-2 {
        height: 40px;
    }

    .navbar-nav .nav-link {
        font-size: 18px;
    }

    .accordion-button:not(.collapsed) {
        color: #fff;
        background-color: #2b2b2b;
        box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
    }

    header .rrss {
        color: #00AACA !important;
    }


    footer {
        background-color: #AF2E1A;
        color: #fff;
        font-size: 16px;
    }

        footer .rrss {
            color: #fff !important;
        }

        footer a {
            color: #fff;
        }

            footer a:link {
                color: #fff;
            }

            footer a:active {
                color: #fff;
            }

            footer a:hover {
                color: #fff;
            }

            footer a:visited {
                color: #fff;
            }

    .logofooter {
        max-width: 300px;
        padding: 0;
    }

    .responsive-iframe {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }

    .ratioPag {
        --aspect-ratio: 100%;
    }

    .ratioMed {
        --aspect-ratio: calc(3 / 5 * 100%)
    }

    .alturaViewer {
        height: 250px;
    }

    #Background {
        position: fixed;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        background-color: #f6f3f7;
        opacity: 0.6;
        z-index: 10;
    }

    #Progress {
        position: fixed;
        top: 15%;
        left: -75%;
        z-index: 8;
    }

    @media (min-width: 475px) {
        .offcanvas-collapse {
            top: 70px !important;
        }


        #Progress {
            left: -40%;
        }

        .small, small {
            font-size: 2vw !important;
            line-height: 2.1vw !important;
        }
    }
    /* X-Small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default in Bootstrap*/
    /*Small devices (landscape phones, 576px and up) SM*/
    @media (min-width: 576px) {

        #Progress {
            left: -25%;
        }

        .ratioPag {
            --aspect-ratio: calc(3 / 4 * 100%)
        }


        .portada {
            height: 100%;
            min-height: 300px !important;
        }


        .small, small {
            font-size: 1.5vw !important;
            line-height: 1.6vw !important;
        }

        .badge {
            font-size: 2.5vw;
        }


        .alturaViewer {
            height: 350px;
        }


        .telefonos {
            font-size: 3vw;
        }
    }
    /* Medium devices (tablets, 768px and up) MD*/
    @media (min-width: 768px) {
        #Progress {
            left: -5%;
        }

        .bd-placeholder-img-lg {
            font-size: 3.5rem;
        }

        .portada {
            height: 100%;
            min-height: 350px !important;
        }

        .small, small {
            font-size: 1vw !important;
            line-height: 1.1vw !important;
        }

        .badge {
            font-size: 1.8vw;
        }


        .alturaViewer {
            height: 400px;
        }
        .navbar-brand img {
            height: 70px;
        }
    }
    /* Large devices (desktops, 992px and up) LG*/
    @media (min-width: 991.98px) {
        #Progress {
            left: 10%;
        }

        .ratioPag {
            --aspect-ratio: calc(3 / 5 * 100%)
        }

        .portada {
            height: 100%;
            min-height: 400px !important;
        }

        .navbar-brand img {
            margin: 0;
            height: 100px;
        }

        .badge {
            font-size: 1.3vw;
        }

        .telefonos {
            font-size: 1.5vw;
        }

        .alturaViewer {
            height: 450px;
        }
        /*        .navbar-brand img {
            height: 110px;
        }*/
    }
    /*X-Large devices (large desktops, 1200px and up) XL*/
    @media (min-width: 1200px) {
        #Progress {
            left: 15%;
        }

        .ratioPag {
            --aspect-ratio: calc(9 / 16 * 100%)
        }

        .portada {
            height: 100%;
            min-height: 500px !important;
        }



        .small, small {
            font-size: .8vw !important;
            line-height: .9vw !important;
        }

        .badge {
            font-size: 1.1vw;
        }
        /*     .navbar-brand img {
            height: 120px;
        }*/

        .telefonos {
            font-size: 1.7vw;
        }

        .alturaViewer {
            height: 450px;
        }

        .navbar-expand-xl {
            flex-wrap: nowrap;
            justify-content: flex-start;
        }
    }
    /* XX-Large devices (larger desktops, 1400px and up) XXL*/
    @media (min-width: 1400px) {
        #Progress {
            left: 20%;
        }

        .ratioPag {
            --aspect-ratio: calc(9 / 16 * 100%)
        }






        .badge {
            font-size: 1vw;
        }
        /*     .navbar-brand img {
            height: 140px;
        }*/

        .telefonos {
            font-size: 1.1vw;
        }
        /*        .alturaViewer {
            height: 500px;
        }*/



        .portada {
            height: 100%;
            min-height: 600px !important;
        }
    }

    @media (min-width: 1600px) {
        #Progress {
            left: 25%;
        }


        .badge {
            font-size: .9vw;
        }
    }

