:root {
    --primary: #20AF92;
    --primary_ligth: #0051AB;
    --secondary: #002D6C;
    --violet: #8042B9;
    --orange: #E48010;
    --text: #707A80;
    --fondo : #EFF0F1;

    --wp: #25D366;
    --ligth: #ffffff;
    --grey: #EFF0F1;
    --greyligth: #EDEDED;
    --alert: indianred;
    --greybold: #505050;
    --redmarck: #d50037;
}


@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@1,400;1,500&family=Roboto:wght@300&display=swap');

*{
    font-family: 'Roboto', sans-serif;
}

.titulo {
    font-family: 'EB Garamond', serif;
    font-style: italic;
}


/*@over botstrap styles*/
.bg-primary, .btn-primary{background-color: var(--primary) !important;}
.bg-red{background-color: var(--redmarck) !important;}
.bg-light{background-color: var(--ligth) !important;}
.bg-mix{background: linear-gradient(180deg,var(--ligth)50%,var(--grey));}
.bg-grey{background-color: var(--grey) !important;}
.bg-greyligth{background-color: var(--greyligth) !important;}
.bg-secondary{background-color: var(--secondary) !important;}
.bg-footer{background-color: var(--fondo) !important;}
.bg-blue{background-color: var(--primary_ligth) !important;}
.bg-violet{background-color: var(--violet) !important;}

.text-primary{color: var(--primary) !important}
.text-secondary{
    color: var(--secondary) !important
}
.text-link{
    color: var(--secondary) !important
}
.text-violet{
    color: var(--violet) !important;
}
.text-light{
    color: var(--ligth) !important;
}

.text-blue-light{
    color: var(--primary_ligth) !important
}

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

.btn{
    border-radius: 10px;
    font-size: 1rem;
    padding: 3px 1rem 3px 1rem;
}

.btn-primary{
    background-color: var(--primary);
    background: var(--primary);
    color: var(--bs-body-color);
    border-style: none;
}

.btn-outline-primary {
    border-color: var(--primary);
    color: var(--ligth);
}

.btn-outline-secondary {
    color: var(--secondary);
    border-color: var(--secondary);
}

.btn-outline-primary:hover {
    color: #fff;
    background-color:var(--primary);
    border-color: var(--secondary);
}

.btn-outline-secondary:hover {
    color: #fff;
    background-color:var(--secondary);
    border-color: var(--secondary);
}

.btn-secondary{
    background: linear-gradient(rgb(233,35,112) 0%, rgb(233,35,112) 99%);color: var(--bs-white) !important;
    border-style: none !important;
    border-radius: 0px !important;
    font-size: 16px!important;
}

.border-dark{
    border-color: #494949 !important;
}

body{
    background-color: var(--fondo);
}

hr{
    text-align: center;
    width: 70%;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.75));
}
.clean-navbar .navbar-nav .nav-link {
    font-weight: 600;
    font-size: 1rem;
    text-transform: capitalize !important;
}

.page-footer ul li:before, .page-footer ul li:after {
     background-color: transparent !important;
}


/*MyStyles*/
.menu{
    background-color: var(--ligth) !important
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
}

.line-divisor{
    margin: 0px !important;
    height: 2px !important;
}

.float-card{
    top: 16rem;
    position: absolute;
    margin-left: 16rem;
    padding-top: 4rem;
    padding-bottom: 1rem;
    border-radius: 1rem;
    border: 3px solid var(--violet);
    color: var(--violet);
    width: 390px;
}

.card-tour{
    width: 100%;
    height:350px;
}

.tour-absolute{
    position: absolute;
    width: 450px;
    margin-top: -10rem;
}


.more{
    right: -50px !important;
    top: 450px !important;
}

.card,.easy-card{
    background-color: var(--fondo) !important;
    border: 0px !important;
}
.easy-card {
    border-radius: 2rem !important;
}
.card, .easy-card:hover{
    border-radius: 22.3rem !important;
}


input[type="text"], .send-email{
    width:350px;
}

.border-tittle {
    border: 0px dotted var(--primary);
    background-color: var(--primary);
    border-radius: 40px 0px 40px 0px;
    width: 350px;
    text-align: center;
    padding: 5px;
    color: var(--ligth);
}

.border-tittle:hover{
    border-radius: 0px 40px 0px 40px;
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    background: var(--secondary);
    color: var(--primary) !important;
}

.img-responsive {
    padding: 0.25rem;
    /* background-color: #fff; */
    /* border: 1px solid #dee2e6; */
    border-radius: 0.25rem;
    max-width: 100%;
    height: auto;
}

.tab-my{
    width: 33%;
    margin: auto;
    text-align: center;
}

.btn-nav{
    border-color: var(--primary) !important;
    color: var(--ligth) !important;
    border: 1px solid var(--primary) !important;
}

.nav-pills .nav-link {
    width:100% !important;
    background: none;
    border: 0;
    border-radius: 0.25rem;
}

.tab-button{
    border-radius: 1.25rem 1.25rem 0rem 0rem !important;
}

.border-tabs{
    border-color: var(--primary) !important;
    color: var(--ligth) !important;
    border: 1px solid var(--primary) !important;
    margin-top: -1rem;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {

    color: black !important;
    background-color: var(--primary) !important;
    font-weight: bold !important;
}

.navbar-light .navbar-nav .nav-link.active {
    color: var(--primary) !important;
    text-decoration: underline var(--primary);
}
.navbar-dark .navbar-nav .show>.nav-link, .navbar-dark .navbar-nav .nav-link.active {
    color: var(--primary) !important;
    text-decoration: underline var(--primary);
}

.bg-whatsapp{
    background: var(--wp) !important;
}

bt.email{
    background: var(--secondary) !important;
}

@media (max-width: 1199px){
    .video-container{
        height: 325px !important;
        padding-bottom: 2rem;
    }

    .hoja-rom {
        top: 250px !important;
        right: 0px !important;
    }
}

@media (max-width: 991px){
    .nav-container{
        border-color: var(--primary) !important;
        color: var(--ligth) !important;
        border: 1px solid var(--primary) !important;
        margin-top: -1rem;
    }

    .director{
        top: 2rem;left: -5rem;width: 25rem !important;
    }
    .hoja-tnt{
        top: -3rem !important;
        left: -10rem !important;
    }

    .card-play {
        border-radius: 2rem !important;
        position: relative !important;
        top: 0px !important;
        height: 100% !important;
        padding: 1rem;
    }

    .video-container{
        height: 200px !important;
        padding-bottom: 2rem;
    }
    .hoja-rom {
        top: 150px !important;
        right: 0px !important;
    }

    .position-absolute .img-more-map {
        padding: 0px !important;
        height: 25px !important;
        margin-right: 100px !important;
    }

    .tour-absolute {
        position: relative !important;
        width: 100% !important;
        margin-top: 0rem !important;
    }

    .card-tour {
        width: 100% !important;
        height: auto !important;
    }

    .director {
        top: 0rem !important;
        left: 0rem !important;
        width: 100% !important;
    }

    .director-image {
        width: auto !important;
        height: 100% !important;
    }
}

@media (max-width: 768px){
    .tour-absolute{
        position: relative !important;
        width: 100%!important;
        margin: 0rem!important;
    }
    .card-tour{
        height:auto !important;
    }

    .more {
        right: 0px !important;
        top: 480px !important;
        width: 75%;
    }

    .director{
        top: 2rem !important;
        left: 0rem !important;
        width: 100% !important;
    }

    .hoja-tnt{
        top: -3rem !important;
        left: -10rem !important;
    }

    .video-container{
        height: 325px !important;
        padding-bottom: 2rem;
    }
}

/*Mobile Devices*/
@media (max-width: 576px){
    .float-card {
        top: -3rem;
        position: relative;
        margin-left: 1rem;
        padding-top: 3rem;
        padding-bottom: 1rem;
        border-radius: 1rem;
        width: 350px;

    }
    .imagine{
        display: inline-block !important;
        margin-right: 0px;
        margin-left: 0px;
        max-width:350px;
    }

    .imagine img{
        width:300px;
    }

    .tipos-card-img{
        height: 300px;
    }

    .media-line {
        width: 60% !important;
        height: 6px!important;
        background-color: var(--ligth);
        top: 300px !important;
    }

    .quote-text {
        margin-left: 0rem !important;
        text-align: center !important;
    }
    .autor {
        margin-left: 0rem !important;
    }
    .more{
    transform: translateY(0%) !important;
    right: 0rem !important;
    top: 445px !important;
    width: 50%;
    left: 18px;
    }

    .header-hoja{
        height:auto !important;
    }

    .director-image{
        width: 400px !important;
        height: auto;
    }

    .hoja-rom {
        top: 350px !important;
        right: 70px !important;
    }

    .video-container{
        height: 300px !important;
        padding-bottom: 2rem;
    }
}


.card-activity{
    width: 400px;
    align-items: center;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    margin-left: auto;
    margin-right: auto;
}

.pagination-tnt{
    top: 2rem !important;
    right: -15rem !important;
    width: 100% !important;
    bottom: 0px !important;
    left: 15rem !important;
}

.bg-double-wabe{
    background: linear-gradient(#FFFFFF 50%, var(--grey) 50% );
}

.director{
    top: 2rem;left: -5rem;width: 35rem;
}
.director-image{
    width: 550px;
    height: auto;
}

.cartel{
    border-radius: 1rem 1rem 1rem 1rem !important;
    color: var(--ligth) !important;
    border: 3px solid var(--secondary) !important;
}

.cartel:hover{
    border: 3px solid var(--primary) !important;
    -webkit-box-shadow: 2px 2px 5px #999;
    -moz-box-shadow: 2px 2px 5px #999;
    transition: all ease .1s;
}

.card-play{
    border-radius: 2rem !important;
    position: absolute;
    top: -100px;
    height: 450px;
    padding: 1rem;
}



.hoja-din{
    border: 0px dotted var(--secondary);
    background-color: var(--secondary);
    border-radius: 150px 0px 150px 0px;
    width: 350px;
    height: 150px;
    text-align: center;
    padding: 5px;
    color: var(--ligth);
    z-index: -1;
}

.hoja-rom{
    border: 3px solid var(--secondary);
    background-color: var(--fondo);
    border-radius: 150px 0px 150px 0px;
    width: 400px;
    height: 150px;
    text-align: center;
    padding: 5px;
    color: var(--ligth);
    z-index: 0;
    top: 400px;
    right: -5px;
    position: absolute;
}

.video.col-12:hover ~ .hoja-din{
    border: 0px dotted var(--primary);
    background-color: var(--primary);
    border-radius: 0px 150px 0px 150px;
    transition: all ease .1s;
}

.talleres-cards{
    border-radius: 1.3rem !important;
    background-color: #ffffff !important;
    border: 0px !important;
    border: 3px solid var(--secondary) !important;
}

.talleres-cards:hover{
    border: 3px solid var(--primary) !important;
    background-color:var(--secondary) !important;
    color: var(--ligth) !important;
    -webkit-box-shadow: 2px 2px 5px #999;
    -moz-box-shadow: 2px 2px 5px #999;
    transition: all ease .1s;
}

.active-action:hover, .director:hover {
    -webkit-box-shadow: 15px 15px 20px #999;
    -moz-box-shadow: 15px 15px 20px #999;
    border: 0px solid var(--ligth) !important;
    background-color:var(--secondary) !important;
    transition: all ease .1s;
}
/*PANORAMICA*/

.imagenPano-footer{
    background-image: url(../img/actvivities-footer.jpg);
    background-repeat: repeat-x;
    width: 100%;
    height: 50vh;
    position: relative;
    background-size: cover;
}

.imagenPano {
    -webkit-animation: animatedBackground 15s alternate ease-in-out infinite;
    animation-name: mov-izq;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: 0s;
    -moz-animation-name: mov-izq;
    -moz-animation-duration: 15s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -moz-animation-delay: 0s;
    -webkit-animation-name: mov-izq;
    -webkit-animation-duration: 15s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
}


@keyframes mov-izq{
    0% { background-position: 0em }
    100%{background-position:-800px}
}
@-webkit-keyframes mov-izq{
    0% { background-position: 0em }
    100%{background-position:-800px}
}

.box{
    border-radius: 3px;
    transition: .2s all;
}
.box-wrap:hover .box{
    filter:blur(3px);
    opacity:.5;
    transform: scale(.98);
    box-shadow:none;
}
.box-wrap:hover .box:hover{
    transform:scale(1);
    filter:blur(0px);
    opacity:1;
}
.video-container{
    height: 450px;
    padding-bottom: 2rem;
}

.imgTitleFestival{
    height:25px;
}