/********** Template CSS **********/

:root {
    --primary: #07CCE0;
    --secundary: #90FFFF;
    --light: #F3F4F5;
    --dark: #191919;
}

.back-to-top {
    position: fixed;
    display: none;
    left: 15px;
    bottom: 15px;
    z-index: 99;
}

@font-face {
    font-family: 'Montserrat-Regular';
    /*a name to be used later*/
    src: url('../fonts/Montserrat-Regular.ttf');
    /*URL to font*/
}

@font-face {
    font-family: 'Montserrat-Bold';
    /*a name to be used later*/
    src: url('../fonts/Montserrat-Bold.ttf');
    /*URL to font*/
}

@font-face {
    font-family: 'Photograph-Signature';
    /*a name to be used later*/
    src: url('../fonts/Photograph-Signature.ttf');
    /*URL to font*/
}


/*** Spinner ***/

#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/

.btn {
    font-weight: 500;
    transition: .5s;
}

.btn.btn-primary,
.btn.btn-secondary {
    color: #FFFFFF;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    width: 50px;
}

.shop {
    background-color: var(--primary) !important;
    color: var(--light) !important;
}

.shop:hover {
    background-color: var(--dark) !important;
    color: var(--light) !important;
}

.btn-square:hover,
.btn-sm-square:hover,
.btn-lg-square:hover {
    background-color: var(--dark) !important;
    color: white !important;
}


/*** Navbar ***/

.navbar.sticky-top {
    top: -100px;
    transition: .5s;
}

.navbar .navbar-brand {
    display: flex;
    align-items: center;
}

.navbar .navbar-brand img {
    max-height: 50px;
    width: 100%;
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

.navbar .navbar-nav .nav-link {
    margin-right: 30px;
    padding: 25px 0;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    outline: none;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--primary);
    cursor: pointer;
}

@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link {
        margin-right: 0;
        padding: 10px 0;
    }
    .navbar .navbar-nav {
        border-top: 1px solid #EEEEEE;
    }
}

.navbar .navbar-nav .nav-link {
    color: var(--dark);
    font-weight: 500;
}

@media (max-width: 1200px) and (min-width: 991.98px) {
    .navbar .navbar-nav .nav-link {
        margin-right: 7px;
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        border: none;
        margin-top: 0;
        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }
    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}


/*** Header ***/

.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#close-preview {
    position: absolute;
    top: 1.5rem;
    right: 2.5rem;
    font-size: 2rem;
    cursor: pointer;
    color: var(--light);
}

.display-4,
.read {
    z-index: 8;
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-bg {
    background-image: url('../img/animal-lg-4.jpg');
    background-position: top;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.header-enrrollables-bg {
    background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url('../img/cortinas/cortinas-enrollables.jpg');
    background-position: center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.header-panel-japones-bg {
    background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url('../img/cortinas/panel-japones.webp');
    background-position: center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.header-romanas-bg {
    background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url('../img/slides/romanas/cortinas-romanas-2.jpg');
    background-position: center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.header-sheer-bg {
    background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url('../img/slides/sheer/cortina-sheer-2.jpg');
    background-position: center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.header-tradicional-bg {
    background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url('../img/slides/tradicional/cortina-tradicional-2.webp');
    background-position: center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.header-aluminio-bg {
    background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url('../img/slides/persianas-aluminio/persiana-aluminio-3.jpg');
    background-position: center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.header-madera-bg {
    background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url('../img/slides/persianas-madera/persianas-madera-3.jpg');
    background-position: center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.header-vertical-bg {
    background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url('../img/slides/persianas-verticales/persianas-verticales-2.jpg');
    background-position: center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.header-error-bg {
    background-image: url('../img/pages-imgs/photo-img-error.jpg');
    background-position: center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.header-contact-bg {
    background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), url('../img/pages-imgs/photo-img-contact.jpg');
    background-position: center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.header-about-bg {
    background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url('../img/pages-imgs/photo-image-about.jpg');
    background-position: center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.header-estampados-bg {
    background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url('../img/slides/estilos/background-estilos.jpg');
    background-position: center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.header-colgadura-bg {
    background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url('../img/slides/colgadura/colgadura-bg.jpg');
    background-position: center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.header-tapetes-bg {
    background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url('../img/slides/tapetes/tapetes.jpg');
    background-position: center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.header-proyeccion-bg {
    background-image: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .6)), url('../img/slides/toldos/proyeccion-2.webp');
    background-position: center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.header-toldos-verticales-bg {
    background-image: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .6)), url('../img/slides/toldos/verticales-2.jpg');
    background-position: center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.header-service-bg {
    background-image: linear-gradient(rgba(9, 30, 36, 0.6), rgba(7, 33, 37, 0.6)), url('../img/img-resources/textiles-img.png');
    background-position: center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.header-catalogue-bg {
    background-image: linear-gradient(rgba(30, 32, 32, 0.2), rgba(22, 23, 24, 0.2)), url('../img/slides/bg-catalogue.jpg');
    background-position: center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.btn-play {
    position: relative;
    display: block;
    box-sizing: content-box;
    width: 16px;
    height: 26px;
    border-radius: 100%;
    border: none;
    outline: none !important;
    padding: 18px 20px 20px 28px;
    background: #FFFFFF;
}

.btn-play:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 60px;
    height: 60px;
    background: #FFFFFF;
    border-radius: 100%;
    animation: pulse-border 1500ms ease-out infinite;
}

.btn-play:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 60px;
    height: 60px;
    background: #FFFFFF;
    border-radius: 100%;
    transition: all 200ms;
}

.btn-play span {
    display: block;
    position: relative;
    z-index: 3;
    width: 0;
    height: 0;
    left: -1px;
    border-left: 16px solid var(--primary);
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
}

@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(2);
        opacity: 0;
    }
}

.modal-pet .modal-dialog {
    position: relative;
    max-width: auto;
    margin: 10px auto 0 auto;
}

.modal-video .modal-dialog {
    position: relative;
    max-width: 800px;
    margin: 10px auto 0 auto;
}

.modal-video .modal-body {
    position: relative;
    padding: 0px;
}

.modal-video .btn-close {
    position: absolute;
    width: 50px;
    height: 50px;
    right: 12px;
    top: 0px;
    z-index: 999;
    font-size: 20px;
    font-weight: normal;
    color: #fff !important;
    opacity: 1;
}

.modal-pet .modal-header .img-header {
    height: auto;
    max-width: 100%;
}

.modal-pet .modal-body {
    position: relative;
    padding: 0px;
}

.modal-pet .modal-body .text-dark {
    padding: 1rem 1rem;
    text-align: justify;
}

.modal-pet .btn-close {
    position: absolute;
    width: 50px;
    height: 50px;
    right: 0px;
    top: 0px;
    z-index: 999;
    font-size: 30px;
    font-weight: normal;
    color: #fff !important;
    opacity: 1;
}

.header-carousel .owl-nav {
    position: absolute;
    width: 200px;
    height: 40px;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
}

.header-carousel .owl-nav .owl-prev,
.header-carousel .owl-nav .owl-next {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: transparent;
    border: 1px solid #FFFFFF;
    font-size: 22px;
    transition: .5s;
}

.header-carousel .owl-nav .owl-prev:hover,
.header-carousel .owl-nav .owl-next:hover {
    background: var(--primary);
    border-color: var(--primary);
}

.header-carousel .owl-dots {
    position: absolute;
    height: 45px;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    background: transparent;
    border: 1px solid #FFFFFF;
    transition: .5s;
}

.header-carousel .owl-dot::after {
    position: absolute;
    content: "";
    width: 5px;
    height: 5px;
    top: 4px;
    left: 4px;
    background: #FFFFFF;
    border-radius: 5px;
}

.effects {
    max-width: 100%;
    height: 86vh;
    object-fit: cover;
}

@media (max-width: 768px) {
    .effects {
        height: 40vh;
    }
}

.header-carousel .owl-dot.active {
    background: var(--primary);
    border-color: var(--primary);
}

.breadcrumb-item+.breadcrumb-item::before {
    color: var(--light);
}


/*** Cortinas - Persianas ***/

.img-specief .content-specief {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    object-fit: contain;
}

.img-specief p {
    width: auto;
}

.img-extra {
    width: 100%;
    height: 350px;
    object-fit: contain;
    overflow: hidden;
    cursor: pointer;
}

.img-extra-c {
    width: 100%;
    height: 350px;
    object-fit: cover;
    overflow: hidden;
    cursor: pointer;
}

@media (max-width: 768px) {
    .img-extra {
        height: auto;
    }
    .img-extra-c {
        height: auto;
    }
}


/* Toldos */

.hor-ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
}

@media (max-width: 768px) {
    .hor-ul {
        align-items: flex-start !important;
        flex-direction: column !important;
    }
}

.cotizar-d {
    display: flex;
}

.cotizar-d .bg-primary {
    border-radius: 5rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.cotizar-d:hover .bg-primary {
    background-color: var(--dark) !important;
    cursor: pointer;
}


/*** Catalogue ***/

.catalogue {
    background-color: var(--dark);
}

a.btn {
    border-radius: 4px;
    padding: 6px 30px 6px;
    text-decoration: none;
    transition: all 0.1s 0s ease-out;
}

.no-touch a.btn:hover {
    transform: translateY(-2px);
    transition: all 0.25s 0s ease-out;
}

.no-touch a.btn:active,
a.btn:active {
    box-shadow: 0 1px 0px 0 rgba(255, 255, 255, 0.25);
    transform: translate3d(0, 1px, 0);
    transition: all 0.025s 0s ease-out;
}

.describe {
    display: flex;
    justify-content: center;
}


/* div.describe:hover .describe-product img {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    -webkit-transition: transform 2000ms ease-in-out, filter 2000ms ease-in-out;
    -moz-transition: transform 2000ms ease-in-out, filter 2000ms ease-in-out;
    transition: transform 2000ms ease-in-out, filter 2000ms ease-in-out;
} */

div.describe-product img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

div.describe-product {
    background: #ffffff;
    display: inline-block;
    perspective: 1000;
    position: relative;
    height: 400px;
    text-align: left;
    transition: all 0.3s 0s ease-in;
    z-index: 1;
}

div.describe .describe-product {
    background: rgba(0, 0, 0, 0.1);
    height: 400px;
    border-radius: 2rem 2rem 0rem 0rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .05);
}

.describe-product {
    padding: 45px 30px;
    color: #FFFFFF;
    overflow: hidden;
    background: rgba(0, 0, 0, .6);
    cursor: pointer;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: left;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}

div.describe:hover .describe-product-catalog img {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    -webkit-transition: transform 2000ms ease-in-out, filter 2000ms ease-in-out;
    -moz-transition: transform 2000ms ease-in-out, filter 2000ms ease-in-out;
    transition: transform 2000ms ease-in-out, filter 2000ms ease-in-out;
}

div.describe-product-catalog img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

div.describe-product-catalog {
    background: #ffffff;
    display: inline-block;
    perspective: 1000;
    position: relative;
    text-align: left;
    transition: all 0.3s 0s ease-in;
    z-index: 1;
}

div.describe .describe-product-catalog {
    background: rgba(0, 0, 0, 0.1);
    height: 200px;
    margin-top: -2rem;
    border-radius: 0rem 0rem 2rem 2rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .05);
}


/* 
.describe-product-catalog .item-wrap {
    position: relative;
    overflow: hidden;
} */

.describe-product-catalog .item-wrap .overlay {
    cursor: zoom-in;
}

.describe-product-catalog .item-wrap .overlay img {
    vertical-align: bottom;
    width: 100%;
    height: 100%;
    -moz-transition: all 0.3s ease-in-out;
    border-radius: 2rem 2rem 0rem 0rem;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.describe-product-catalog .item-wrap .overlay::before {
    content: "";
    display: block;
    background: rgba(0, 0, 0, 0.8);
    opacity: 0;
    border-radius: 1rem 1rem 0rem 0rem;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    z-index: 1;
}


/* .describe-product-catalog .item-wrap .overlay::after {
    content: "...";
    font-family: georgia, serif;
    font-size: 2rem;
    z-index: 1;
    display: block;
    height: 40px;
    width: 40px;
    line-height: 30px;
    margin-left: -15px;
    margin-top: -15px;
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
    color: #FFFFFF;
    opacity: 0;
    visibility: hidden;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
} */

.describe-product-catalog .item-wrap .item-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 5.6rem 0 0 0;
    z-index: 3;
    text-align: center;
}

.hide {
    display: none;
}

.describe-product-catalog .item-wrap .item-text .folio-title {
    color: #FFFFFF;
    font-size: 1rem;
    line-height: 1.364;
}

.describe-product-catalog .item-wrap .item-text .folio-types {
    font-family: "montserrat-regular", sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .1rem;
    color: rgba(255, 255, 255, 0.7);
    display: block;
}

.describe-product-catalog .item-wrap .details-link {
    display: block;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    height: 3rem;
    width: 3rem;
    line-height: 1rem;
    color: white;
    text-align: center;
    z-index: 2;
    border-radius: 3px;
    position: absolute;
    bottom: 3.6rem;
    left: 4rem;
}

.describe-product-catalog .item-wrap .details-link i {
    font-size: 2.5rem;
    line-height: 3rem;
}

.describe-product-catalog .item-wrap .details-link:hover,
.describe-product-catalog .item-wrap .details-link:focus {
    background-color: #FFFFFF;
    color: #000000;
}

.describe-product-catalog .item-wrap .item-text,
.describe-product-catalog .item-wrap .details-link {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.describe-product-catalog .item-wrap:hover .overlay::before {
    opacity: 1;
    visibility: visible;
}

.describe-product-catalog .item-wrap:hover .overlay::after {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.describe-product-catalog .item-wrap:hover .overlay img {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}

.describe-product-catalog .item-wrap:hover .item-text,
.describe-product-catalog .item-wrap:hover .details-link {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

.describe-product-catalog {
    padding: 45px 30px;
    color: var(--light);
    overflow: hidden;
    background: rgba(0, 0, 0, .6);
    cursor: pointer;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: left;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}

.img-color {
    width: 100%;
    height: auto;
}

#portfolio .bricks-wrapper:before,
#portfolio .bricks-wrapper:after {
    content: "";
    display: table;
}

#portfolio .bricks-wrapper:after {
    clear: both;
}

#portfolio .bricks-wrapper .brick {
    float: left;
    width: 50%;
    padding: 0;
    margin: 0;
}

#portfolio .bricks-wrapper .brick:nth-child(2n+1) {
    clear: both;
}

.run-info {
    background-color: var(--light);
    position: relative;
    width: 100%;
    padding: 1.5em 0.5em;
    border-radius: 2rem;
}

.run-info ul {
    padding-right: 2rem;
}

.run-info>ul {
    list-style-type: none;
    display: flex;
    justify-content: space-evenly;
}

.run-info>ul>li {
    text-align: center;
    font-size: 1.2em;
    font-weight: 100;
    display: inline-block;
    cursor: pointer;
    padding: 0 1em 1em 1em;
    margin: 0 0.3em 1em 0.3em;
    width: 100%;
}

.run-info>ul>li:hover {
    border-bottom-color: var(--primary);
}


/* PANEL CLOSE BUTTON */

svg.btn-close {
    float: right;
    cursor: pointer;
    margin-right: 1em;
}


/* TAB SYSTEM */

.ld-tab {
    display: none;
}

.ld-active-tab {
    display: block;
    padding-left: 1rem;
}

li.ld-tab-header {
    border-bottom-style: solid;
    border-bottom-color: white;
    transition: border-color 250ms ease-out;
}

li.ld-active-tab-header {
    border-bottom-color: var(--secundary);
}


/* Contact Form */

.s-loader {
    margin: 1.2rem auto 3rem;
    width: 70px;
    text-align: center;
    -webkit-transform: translateX(0.45rem);
    -ms-transform: translateX(0.45rem);
    transform: translateX(0.45rem);
}

.s-loader>div {
    width: 9px;
    height: 9px;
    background-color: var(--primary);
    border-radius: 100%;
    display: inline-block;
    margin-right: .9rem;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.s-loader .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.s-loader .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes sk-bouncedelay {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

#message-warning,
#message-success {
    display: none;
    padding: 3rem;
    margin-bottom: 3.6rem;
    width: 100%;
}

#message-warning {
    color: var(--dark);
}

#message-success {
    color: #f9a828;
}

#message-warning i,
#message-success i {
    margin-right: 10px;
}

.form-floating label {
    font-weight: bold;
}


/* form loader */

#submit-loader {
    display: none;
    position: relative;
    left: 0;
    top: 1.8rem;
    width: 100%;
    text-align: center;
    margin-bottom: 4.2rem;
}

#submit-loader .text-loader {
    display: none;
    font-family: "montserrat-bold", sans-serif;
    font-size: 1.4rem;
    color: var(--primary);
    letter-spacing: .2rem;
    text-transform: uppercase;
}

.oldie #submit-loader .s-loader {
    display: none;
}

.oldie #submit-loader .text-loader {
    display: block;
}


/* ------------------------------------------------------------------- 
   * masonry entries - (_layout.css) 
   * ------------------------------------------------------------------- */

.item-wrap {
    width: 100%;
    height: 300px;
}

.bricks-wrapper .item-wrap {
    position: relative;
    overflow: hidden;
}

.bricks-wrapper .item-wrap .overlay {
    cursor: zoom-in;
}

.bricks-wrapper .item-wrap .overlay img {
    vertical-align: bottom;
    width: 100%;
    height: 100%;
    border: solid 5px rgba(0, 0, 0, .05);
    -moz-transition: all 0.3s ease-in-out;
    border-radius: 2rem;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.bricks-wrapper .item-wrap .overlay::before {
    content: "";
    display: block;
    background: rgba(0, 0, 0, 0.8);
    opacity: 0;
    border-radius: 1rem;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    z-index: 1;
}

.bricks-wrapper .item-wrap .overlay::after {
    content: "...";
    font-family: georgia, serif;
    font-size: 2rem;
    z-index: 1;
    display: block;
    height: 40px;
    width: 40px;
    line-height: 30px;
    margin-left: -15px;
    margin-top: -15px;
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
    color: #FFFFFF;
    opacity: 0;
    visibility: hidden;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
}

.bricks-wrapper .item-wrap .item-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 3.6rem 0 0 0;
    z-index: 3;
    text-align: center;
}

.icons-redir {
    margin-left: 15px;
    margin-top: -50px;
    cursor: pointer;
    position: absolute;
    z-index: 1;
}

@media (max-width: 768px) {
    .icons-redir {
        margin-top: -75px;
    }
}

.icons-redir a {
    font-size: 1.2rem;
    padding: 0.5rem 1rem 0.5rem 1rem;
    color: var(--dark);
    background-color: var(--light);
    border-radius: 1rem;
}

.icons-redir a:hover {
    background-color: var(--light);
    color: var(--primary);
}

.hide {
    display: none;
}

.bricks-wrapper .item-wrap .item-text .folio-title {
    color: #FFFFFF;
    font-size: 1rem;
    line-height: 1.364;
}

.bricks-wrapper .item-wrap .item-text .folio-types {
    font-family: "montserrat-regular", sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .1rem;
    color: rgba(255, 255, 255, 0.7);
    display: block;
}

.bricks-wrapper .item-wrap .details-link {
    display: block;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    height: 3rem;
    width: 3rem;
    line-height: 1rem;
    color: white;
    text-align: center;
    z-index: 2;
    border-radius: 3px;
    position: absolute;
    bottom: 3.6rem;
    left: 4rem;
}

.bricks-wrapper .item-wrap .details-link i {
    font-size: 2.5rem;
    line-height: 3rem;
}

.bricks-wrapper .item-wrap .details-link:hover,
.bricks-wrapper .item-wrap .details-link:focus {
    background-color: #FFFFFF;
    color: #000000;
}

.bricks-wrapper .item-wrap .item-text,
.bricks-wrapper .item-wrap .details-link {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.bricks-wrapper .item-wrap:hover .overlay::before {
    opacity: 1;
    visibility: visible;
}

.bricks-wrapper .item-wrap:hover .overlay::after {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.bricks-wrapper .item-wrap:hover .overlay img {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}

.bricks-wrapper .item-wrap:hover .item-text,
.bricks-wrapper .item-wrap:hover .details-link {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}


/*** Img Border ***/

.img-border {
    position: relative;
    height: 100%;
    min-height: 400px;
}

.img-border::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 3rem;
    bottom: 3rem;
    border: 5px solid var(--primary);
}

.img-border img {
    position: absolute;
    top: 3rem;
    left: 3rem;
    width: calc(100% - 3rem);
    height: calc(100% - 3rem);
    object-fit: cover;
}


/*** Facts & Visiting Hours ***/

.facts {
    background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), url(../img/context-description/index-benefist.png) center center no-repeat;
    background-size: cover;
}

.facts h4 {
    text-transform: uppercase;
}

.visiting-hours {
    background: url(../img/context-description/index-info-contact.jpg) center center no-repeat;
    background-size: cover;
}

.visiting-hours .list-group-item {
    display: flex;
    justify-content: space-between;
    color: var(--light);
    background: rgba(0, 0, 0, .15);
    border-color: rgba(255, 255, 255, .15);
}

.visiting-hours .list-group-item:hover {
    color: var(--dark);
    background: rgba(255, 255, 255, 0.555);
    border-color: rgba(238, 238, 238, 0.15);
    cursor: pointer;
}

.visiting-hours .table {
    color: var(--light);
    background: rgba(0, 0, 0, .15);
}

.visiting-hours .table td {
    padding: .5rem 1rem;
    border-color: rgba(255, 255, 255, .15);
}

.visiting-hours .table td:hover {
    padding: .5rem 1rem;
    background-color: var(--light);
    color: var(--dark);
    font-weight: bold;
    cursor: pointer;
}

.visiting-hours .table td a {
    color: var(--light);
}

.visiting-hours .table td a:hover {
    color: var(--dark);
    font-weight: bold;
}

.visiting-hours .table td:hover a {
    color: var(--dark);
}

.visiting-hours .table tr:last-child td {
    border: none;
}


/*** Animal ***/

.animal-item {
    position: relative;
    display: block;
}

.animal-item .animal-text {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .7);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 100px !important;
    opacity: 0;
    transition: .5s;
}

.animal-item:hover .animal-text {
    opacity: 1;
    padding-bottom: 20px !important;
}


/*** Membership ***/

.catalogue-hover:hover .catalog .bg-primary {
    background-color: var(--dark) !important;
}

.membership-item {
    padding: 45px 30px;
    color: #FFFFFF;
    overflow: hidden;
    height: 450px;
    background: rgba(0, 0, 0, .6);
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: left;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}

.membership-item:hover img {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    -webkit-transition: transform 1000ms ease-in-out, filter 1000ms ease-in-out;
    -moz-transition: transform 1000ms ease-in-out, filter 1000ms ease-in-out;
    transition: transform 1000ms ease-in-out, filter 1000ms ease-in-out;
}

.membership-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.membership-item h4 {
    font-size: 1.2rem;
}

.membership-item .display-1 {
    color: var(--white);
    font-size: 3rem;
    font-weight: normal;
    font-family: 'Photograph-Signature';
}

.membership-item .display-7 {
    color: var(--white);
    font-size: 2rem;
    font-weight: normal;
    font-family: 'Montserrat-Bold';
}

.accesories {
    padding: 45px 30px;
    color: #FFFFFF;
    overflow: hidden;
    height: 450px;
    background: rgb(0 0 0 / 46%);
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    align-content: center;
    flex-direction: column;
}

.accesories:hover img {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    -webkit-transition: transform 1000ms ease-in-out, filter 1000ms ease-in-out;
    -moz-transition: transform 1000ms ease-in-out, filter 1000ms ease-in-out;
    transition: transform 1000ms ease-in-out, filter 1000ms ease-in-out;
}

.accesories img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.accesories h4 {
    font-size: 2rem;
}

.accesories .text-info {
    font-size: 1.5rem;
    text-align: center;
}

.accesories .display-1 {
    color: var(--white);
    font-size: 3rem;
    font-weight: normal;
    font-family: 'Photograph-Signature';
}

.accesories .display-7 {
    color: var(--white);
    font-size: 2rem;
    font-weight: normal;
    font-family: 'Montserrat-Bold';
}


/*** Testimonial ***/

.testimonial-carousel::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

.testimonial-carousel::after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

@media (min-width: 768px) {
    .testimonial-carousel::before,
    .testimonial-carousel::after {
        width: 200px;
    }
}

@media (min-width: 992px) {
    .testimonial-carousel::before,
    .testimonial-carousel::after {
        width: 300px;
    }
}

.testimonial-carousel .owl-item .testimonial-text {
    background: var(--light);
    transform: scale(.8);
    transition: .5s;
}

.testimonial-carousel .owl-item.center .testimonial-text {
    background: var(--primary);
    transform: scale(1);
}

.testimonial-carousel .owl-item .testimonial-text *,
.testimonial-carousel .owl-item .testimonial-item img {
    transition: .5s;
}

.testimonial-carousel .owl-item.center .testimonial-text * {
    color: var(--light) !important;
}

.testimonial-carousel .owl-item.center .testimonial-item img {
    border-color: var(--primary) !important;
}

.testimonial-carousel .owl-nav {
    position: absolute;
    width: 350px;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    opacity: 0;
    transition: .5s;
    z-index: 1;
}

.testimonial-carousel:hover .owl-nav {
    width: 300px;
    opacity: 1;
}

.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
    position: relative;
    color: var(--primary);
    font-size: 45px;
    transition: .5s;
}

.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
    color: var(--dark);
}


/*** Contact ***/

.img-contact-form {
    background-image: url('../img/context-description/contact-page.png');
}

.ms-4 h5 {
    word-break: break-all;
    font-size: 1rem;
}

.col-lg-10 h1 {
    padding-right: 50%;
}

.button-div .bg-light:hover {
    background-color: var(--secundary) !important;
    cursor: pointer
}

.img-contact img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.button-div p {
    color: var(--dark) !important;
}

@media (max-width: 678px) {
    .ms-4 h5 {
        font-size: 1rem;
    }
    .col-lg-10 h1 {
        padding-right: 0;
    }
}


/*** Footer ***/

.footer {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url(../img/pages-imgs/photo-img-error.jpg) center center no-repeat;
    background-size: cover;
}

.footer .contact-info {
    color: var(--white);
    cursor: pointer;
    transition: .3s;
}

.footer .contact-info:hover {
    color: var(--white);
    font-weight: bold;
    transition: .3s;
}

.footer .fa {
    color: var(--primary);
}

.footer .btn.btn-social {
    margin-right: 5px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light);
    border: 1px solid #FFFFFF;
    transition: .3s;
}

.footer .btn.btn-social:hover {
    color: var(--primary);
}

.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    color: var(--primary);
    letter-spacing: 1px;
    box-shadow: none;
}

.footer .copyright {
    padding: 25px 0;
    font-size: 15px;
    border-top: 1px solid rgba(256, 256, 256, .1);
}

.footer .copyright a {
    color: var(--light);
}

.footer .copyright a:hover {
    color: var(--primary);
}


/* WHATSAPP BUTTON */

@keyframes pulse {
    0% {
        transform: scale(1, 1);
    }
    50% {
        opacity: 0.3;
    }
    100% {
        transform: scale(1.45);
        opacity: 0;
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
}

.nav-bottom {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-content: flex-end;
    width: auto;
    height: auto;
    position: fixed;
    z-index: 8;
    bottom: 0px;
    right: 0px;
    padding: 5px;
    margin: 0px;
}

@media (max-width: 360px) {
    .nav-bottom {
        width: 320px;
    }
}

.whatsapp-button {
    display: flex;
    justify-content: center;
    align-content: center;
    width: 60px;
    height: 60px;
    z-index: 8;
    transition: 0.3s;
    margin: 10px;
    padding: 7px;
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 50%;
    background-color: #fff;
    /* offset-x > | offset-y ^| blur-radius | spread-radius | color */
    -webkit-box-shadow: 1px 1px 6px 0px rgba(68, 68, 68, 0.705);
    -moz-box-shadow: 1px 1px 6px 0px rgba(68, 68, 68, 0.705);
    box-shadow: 1px 1px 6px 0px rgba(68, 68, 68, 0.705);
}

.circle-anime {
    display: flex;
    position: absolute;
    justify-content: center;
    align-content: center;
    width: 60px;
    height: 60px;
    top: 15px;
    right: 15px;
    border-radius: 50%;
    transition: 0.3s;
    background-color: #77bb4a;
    animation: pulse 1.2s 4s ease 4;
}

.popup-whatsapp {
    display: none;
    position: absolute;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: auto;
    height: auto;
    padding: 10px;
    bottom: 85px;
    right: 6px;
    transition: 0.5s;
    border-radius: 10px;
    background-color: #fff;
    /* offset-x > | offset-y ^| blur-radius | spread-radius | color */
    -webkit-box-shadow: 2px 1px 6px 0px rgba(68, 68, 68, 0.705);
    -moz-box-shadow: 2px 1px 6px 0px rgba(68, 68, 68, 0.705);
    box-shadow: 2px 1px 6px 0px rgba(68, 68, 68, 0.705);
    animation: slideInRight 0.6s 0s both;
}

.popup-whatsapp>div {
    margin: 5px;
}

.about-us-cards {
    margin: -17px auto 0;
    display: table;
    width: auto;
    background: var(--tertiary);
    padding: 12px 32px;
    border-radius: 2rem;
    text-align: center;
    color: #fff;
    box-shadow: 0 9px 18px rgba(0, 0, 0, 0.12), 0 5px 7px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}


/* MODAL */

.img-modal {
    height: 3rem;
}

.modal-footer {
    justify-content: space-around;
}

.modal-dialog {
    margin-top: 0;
    margin-bottom: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.modal-content {
    border-radius: 2rem !important;
}

.modal-body {
    height: auto;
    max-height: 50vh;
    overflow-y: auto;
}


/* FORM */

.modal input {
    position: relative;
    border-radius: 3px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    outline: none;
    padding: 1.125em 0 6px 6px;
    font-size: 1em;
    margin: 0px 0px 9px 0px;
    border: 1px solid #dddddd;
    color: #444;
}

.modal input {
    z-index: 99;
    width: 100%;
}

.modal textarea {
    width: 100%;
    height: 6em;
}

.modal label {
    font-size: 1rem;
    font-weight: bold;
    z-index: 100;
    top: 0.75em;
    left: 0.375em;
    height: 1.1111em;
    padding: 0 0.375em;
    transition: 0.3s all ease-in-out;
    color: var(--palet-1);
}

.modal input:focus~label {
    z-index: 9999;
}

.modal input:focus {
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    border: 1px solid rgba(81, 203, 238, 1);
}

@media (max-width: 680px) {
    .popup-whatsapp p {
        font-size: 0.9em;
    }
}

.popup-whatsapp>.content-whatsapp.-top {
    display: flex;
    flex-direction: column;
}

.popup-whatsapp>.content-whatsapp.-top p {
    color: #585858;
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 1em;
}

.popup-whatsapp>.content-whatsapp.-bottom {
    display: flex;
    flex-direction: row;
}

.closePopup {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    margin: 0px 0px 15px 0px;
    border-radius: 50%;
    border: none;
    outline: none;
    cursor: pointer;
    background-color: #f76060;
    -webkit-box-shadow: 1px 1px 2px 0px rgba(68, 68, 68, 0.705);
    -moz-box-shadow: 1px 1px 2px 0px rgba(68, 68, 68, 0.705);
    box-shadow: 1px 1px 2px 0px rgba(68, 68, 68, 0.705);
}

.closePopup:hover {
    background-color: #f71d1d;
    transition: 0.3s;
}

.send-msPopup {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff;
    margin: 0px 0px 0px 5px;
    border: none;
    outline: none;
    cursor: pointer;
    -webkit-box-shadow: 1px 1px 2px 0px rgba(68, 68, 68, 0.705);
    -moz-box-shadow: 1px 1px 2px 0px rgba(68, 68, 68, 0.705);
    box-shadow: 1px 1px 2px 0px rgba(68, 68, 68, 0.705);
}

.send-msPopup:hover {
    background-color: #f8f8f8;
    transition: 0.3s;
}

.is-active-whatsapp-popup {
    display: flex;
    animation: slideInRight 0.6s 0s both;
}

input.whats-input[type=text] {
    width: 250px;
    height: 40px;
    box-sizing: border-box;
    border: 0px solid #fff;
    border-radius: 20px;
    font-size: 1em;
    background-color: #fff;
    padding: 0px 0px 0px 10px;
    -webkit-transition: width 0.3s ease-in-out;
    transition: width 0.3s ease-in-out;
    outline: none;
    transition: 0.3s;
}

@media (max-width: 420px) {
    input.whats-input[type=text] {
        width: 225px;
    }
    .membership-item {
        height: auto;
    }
}

input.whats-input::placeholder {
    color: rgba(68, 68, 68, 0.705);
    opacity: 1;
}

input.whats-input[type=text]:focus {
    background-color: #f8f8f8;
    -webkit-transition: width 0.3s ease-in-out;
    transition: width 0.3s ease-in-out;
    transition: 0.3s;
}

.icon-whatsapp-small {
    width: 24px;
    height: 24px;
}

.icon-whatsapp {
    width: 45px;
    height: 45px;
}

.icon-font-color {
    color: #fff;
}

.icon-font-color--black {
    color: #333;
}


/* END WHATSAPP */