/* ===================================
    About
====================================== */

/*
    Theme Name: MegaOne
    Theme URI:
    Author: Themes Industry
    Author URI:
    Description: One Page Parallax Template
    Tags: one page, multipurpose, parallax, creative, html5
*/

/* ===================================
    Table of Content
====================================== */

/*  - Fonts
    - General
    - Social Icon Hover
    - Header And Navigation
    - Slider
    - About
    - Work
    - Clients
    - Price
    - Blog
    - Contact
    - Footer
    - Loader
    - Media Queries   */



/* ===================================
    Header & Navigation
====================================== */

/* Nav Three Circles Hover Effect */
.nav-three-circles .navbar-nav .nav-item .nav-link {
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    transition: color 0.3s;
    position: relative;
    display: inline;
}
.nav-three-circles .navbar-nav .nav-item .nav-link::after {
    position: absolute;
    top: 80%;
    left: 50%;
    color: transparent;
    content: '•';
    text-shadow: 0 0 transparent;
    font-size: 1.2em;
    -webkit-transition: text-shadow 0.3s, color 0.3s;
    -moz-transition: text-shadow 0.3s, color 0.3s;
    transition: text-shadow 0.3s, color 0.3s;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
    pointer-events: none;
}
.nav-three-circles .navbar-nav .nav-item .nav-link.active::after,
.nav-three-circles .navbar-nav .nav-item .nav-link:hover::after {
    color: #4E99CD;
    text-shadow: 10px 0 #ED3F28, -10px 0 #97CB57, -20px 0 #F7BF34;
}


/* ===================================
    Cube Portfolio
====================================== */

.cbp-l-caption-alignCenter{
    position: absolute;
    top: 0;
    z-index: 4;
    opacity: 0;
    -webkit-transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -ms-transition: opacity .4s ease-in-out;
    -o-transition: opacity .4s ease-in-out;
    transition: opacity .4s ease-in-out;
}

.cube-portfolio1 .cbp-caption-zoom .cbp-caption:hover .cbp-l-caption-alignCenter {
    opacity: 1;
}

.cbp-l-caption-body p{
    font-size: 12px;
}

.cbp-l-caption-body h5{
    font-weight: 400;
}

.plus {
    position: relative;
    display: block;
    margin: 40% 40%;
    height: 70px;
    width: 70px;
}


.cbp-l-caption-alignCenter .cbp-l-caption-body {
    display: flex !important;
    justify-content: center;
    align-items: center;
    height: 100%;
    display: table-cell;
    vertical-align: inherit;
    text-align: center;
    padding: 0 !important;
}

.plus::before {
    width: 2px;
    margin-left: -1px;
    left: 50%;
    top: 5px;
    bottom: 5px;
}
.plus::after {
    height: 2px;
    margin-top: -1px;
    top: 50%;
    left: 5px;
    right: 5px;
}

.plus::before, .plus::after {
    content: " ";
    position: absolute;
    background: #fff;
}


.cbp-popup-next, .cbp-popup-prev, .cbp-popup-close{
    z-index: 0;
}



/*------------------------------------------------*/

/* ===================================
    Residencias
====================================== */

/* ============= CSS Grid - Residencias =============  */
.grid-residences {
     display: grid;
     /* grid-template-columns: 1fr 1fr 1fr 1fr; */
     grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
     gap: 25px;
}

.grid-residences .grid-item .square-img img {
     height: 100% !important;
     width: 100% !important;
     object-fit: cover;
     object-position: 50% 50%;
}

/* md */
@media (max-width: 991px) {
     .grid-residences {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
          gap: 20px;
     }
}
/* sm */
@media (max-width: 720px) {
     .grid-residences {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
          gap: 20px;
     }
}
/* xs */
@media (max-width: 575px) {
     .grid-residences {
          display:flex; 
          gap: 0px;
     }
}

ul.grid-residences {
     list-style-type: none;
}

.resident-title {
     background-color: #ED1C24;
     min-height: 50px;
     color: #ffffff;
     position: absolute;
     z-index: 1;
     bottom: 0;
     width: 100%;
     display: flex;
     padding: 10px;
     text-align: center;
     text-transform: uppercase;
     font-weight: 500;
}
/* ============= Modal - Residencias =============  */

#residences-modal.white-popup-block {
     position: relative;
     background: #1B1B1B;
     padding: 20px;
     width: auto;
     max-width: 1200px;
     margin: 20px auto;
}

.modal-residences-content {
     display: grid;
     grid-template-columns: 1fr 2fr;
     /* grid-template-areas:
     "event-poster evento-descripcion"; */
     align-items:flex-start;
     gap: 20px
}

.modal-residences-content img {
     height: 100%;
     width: 100%;
     object-fit: cover;
     object-position: 50% 50%;
}

.close-modal svg {
     position: absolute;
     top: -20px;
     right: 2px;
     fill: #ffffff;
}
.close-modal:hover svg {
     position: absolute;
     top: -20px;
     right: 2px;
     fill:#ED1C24;
}

.popup-social ul {
     display: flex;
     justify-content: flex-end;
     align-items: center;
     align-content: center;
     margin-bottom: 0px;
     list-style-type: none;
     margin: 15px;
     padding: 0px;
}

.popup-social a svg {
     fill: #ffffff !important; 
}
.popup-social a:hover svg {
     fill: #000000 !important; 
}

/* sm */ @media (max-width: 767px) {
     .white-popup-block {
          width: 80%;
     }
     .modal-residences-content {
          grid-template-columns: 1fr;
     }
}
/* xs */ @media (max-width: 575px) {
     .white-popup-block {
          width: 90%;
     }
}
/* xxs */ @media (max-width: 430px) {
     .white-popup-block {
          width: 100%;
     }
}



/* ============= Splite - Next Event =============  */

.splide-main .splide__arrows {
     display: none;
}

.splide-main .splide__arrow {
     background: #ed1c24;
     height: 3em;
     width: 3em;
}
.splide-main .splide__slide img {
     width: 100%;
     height: auto;
     bottom: 30px;
}

.splide-main .splide__pagination {
     bottom: -30px;
}

.splide-main .splide__pagination__page.is-active {
    background: #ed1c24;
    transform: scale(1.4);
    z-index: 1;
}
.splide__progress__bar {
     height: 5px;
     background: #ed1c24;
   }
.splide__pagination__page {
     background: #ccc;
     border: 0;
     border-radius: 50%;
     display: inline-block;
     height: 6px;
     margin: 6px;
     opacity: 1;
     padding: 0;
     position: relative;
     transition: transform .2s linear;
     width: 6px;
}

/* ============= Year Calendar - Next Events =============  */
/* sm */
@media (max-width: 991px) {
     .year-program {
          display: block !important;
          align-items: center;
     }
     .year-program a {
          margin-top: 15px;
     }
}

/* ============= Modal - Eventos =============  */

#program-modal.white-popup-block {
     position: relative;
     background: #1B1B1B;
     padding: 20px;
     width: auto;
     max-width: 600px;
     margin: 20px auto;
}

.modal-residences-content {
     display: grid;
     grid-template-columns: 1fr 2fr;
     /* grid-template-areas:
     "event-poster evento-descripcion"; */
     align-items:flex-start;
     gap: 20px
}

.modal-residences-content img {
     height: 100%;
     width: 100%;
     object-fit: cover;
     object-position: 50% 50%;
}

.close-modal svg {
     position: absolute;
     top: -20px;
     right: 2px;
     fill: #ffffff;
}
.close-modal:hover svg {
     position: absolute;
     top: -20px;
     right: 2px;
     fill:#ED1C24;
}

.popup-social ul {
     display: flex;
     justify-content: flex-end;
     align-items: center;
     align-content: center;
     margin-bottom: 0px;
     list-style-type: none;
     margin: 15px;
     padding: 0px;
}

.popup-social a svg {
     fill: #ffffff !important; 
}
.popup-social a:hover svg {
     fill: #000000 !important; 
}

/* sm */ @media (max-width: 767px) {
     .white-popup-block {
          width: 80%;
     }
     .modal-residences-content {
          grid-template-columns: 1fr;
     }
}
/* xs */ @media (max-width: 575px) {
     .white-popup-block {
          width: 90%;
     }
}
/* xxs */ @media (max-width: 430px) {
     .white-popup-block {
          width: 100%;
     }
}

.table-program {
     color: #ffffff;
     margin-bottom: 0px;
}

.table-program tr {
     border-top: 1px;
     border-color: #ED1C24 !important;

}



/* ============= CSS Grid - Eventos =============  */
.grid-event {
     display: grid;
     /* grid-template-columns: 1fr 1fr 1fr 1fr; */
     grid-template-columns: repeat(3, 1fr);
     gap: 0px;
}

.grid-event-none{
     display: block;
}

.grid-event .grid-item .square-img img {
     height: 100% !important;
     width: 100% !important;
     object-fit: cover;
     object-position: 50% 50%;
     aspect-ratio: 1/1;
}

.mfp-container button{
     min-width: 30px !important;
     min-height:30px !important;
     background: transparent;
     color: transparent;
     cursor: pointer;
}

.mfp-container button:hover{
     background: transparent !important;
}

.bg-hover-img{
     background: rgba(64, 117, 163, 0.8);
}
/* md */
@media (max-width: 991px) {
     .grid-event {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
     }
}

/* sm */
@media (max-width: 730px) {
     .grid-event {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 0px;
     }
}
/* xs */
@media (max-width: 575px) {
     .grid-event {
          /*display:flex;
          gap: 0px;*/
          display: grid;
          grid-template-columns: repeat(1, 1fr);
     }


     .grid-event-none{
          display: none;
     }
}




ul.grid-event {
     list-style-type: none;
}


/* ===================================
    Residencias & Events
====================================== */

/* ============= Splide =============  */
.splide-big .splide__slide img.splide-item {
     height: 100% !important;
     width: 100% !important;
     object-fit: cover;
     object-position: 50% 50%;
}

/* xs to up*/
@media (min-width: 576px) {
     .splide-big .splide__list {
          transform: none !important;
     }
     .splide-big .splide__pagination,
     .splide-big .splide__arrows {
          display: none;
     }
}

/*.splide-big .splide__arrow button{
     background: #ed1c24;
     height: 3em;
     width: 3em;
     min-width: none;
}*/
.splide-big .splide__slide img {
     width: 100%;
     height: auto;
}

/* ============= Select component =============  */
.special-select {
     color: #ffffff;
     padding: 0px 10px;
     border-radius: 10px;
     /* border-color:  #ED1C24; */
     border: 1px solid #ED1C24;
     background-color: transparent;
     height: 60px !important;
     /* needed */
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     /* SVG background image */
     /* background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E"); */
     background-image: url("data:image/svg+xml,%3Csvg width='24' height='14' viewBox='0 0 24 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L12 12L23 1' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
       background-size: .6em;
       background-position: calc(100% - 1.3em) center;
       background-repeat: no-repeat;

     font-size: 18px;
       width: 100%;
       max-width: 550px;
   }
   
.special-select:hover {
     cursor: pointer;
   }
.special-select::-ms-expand {
       display: none;
}
.special-select:focus-visible {
     outline: 1px solid #ED1C24;
}

/* ============= Magnific Popup =============  */
.image-source-link {
    color: #98C3D1;
}

.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
    opacity: 0;
    -webkit-backface-visibility: hidden;
    /* ideally, transition speed should match zoom duration */
    -webkit-transition: all 0.5s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
        opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
        opacity: 0.9;
}

.mfp-with-zoom.mfp-removing .mfp-container, 
.mfp-with-zoom.mfp-removing.mfp-bg {
    opacity: 0;
}

/* ============= Magnific Popup - Zoom effect =============  */

.zoom-effect a {
     position: relative;
     display: block;
 }

.zoom-effect .grid-item figure {
     margin: 0;
     position: relative;
     overflow: hidden;
 }
.zoom-effect .grid-item figure:hover .square-img  {
     transition: all 0.3s ease 0s;
     -webkit-transition: all 0.3s ease 0s;
     -moz-transition: all 0.3s ease 0s;
     -ms-transition: all 0.3s ease 0s;
     -o-transition: all 0.3s ease 0s;
 }


.zoom-effect .grid-item a:hover .square-img img {
    /* -webkit-filter: blur(5px);
     -moz-filter: blur(5px);
     -ms-filter: blur(5px);
     -o-filter: blur(5px);
     filter: blur(5px)*/;
     opacity: 0.10;
     transform: scale(1.1, 1.1);
     -webkit-transform: scale(1.1, 1.1);
     -moz-transform: scale(1.1, 1.1);
     -ms-transform: scale(1.1, 1.1);
     -o-transform: scale(1.1, 1.1);
     transition: all 0.3s ease 0s;
     -webkit-transition: all 0.3s ease 0s;
     -moz-transition: all 0.3s ease 0s;
     -ms-transition: all 0.3s ease 0s;
     -o-transition: all 0.3s ease 0s;
 }
.zoom-effect .grid-item figure:hover .square-img img {
     opacity: 0.15;
     transform: scale(1.1, 1.1);
     -webkit-transform: scale(1.1, 1.1);
     -moz-transform: scale(1.1, 1.1);
     -ms-transform: scale(1.1, 1.1);
     -o-transform: scale(1.1, 1.1);
     transition: all 0.3s ease 0s;
     -webkit-transition: all 0.3s ease 0s;
     -moz-transition: all 0.3s ease 0s;
     -ms-transition: all 0.3s ease 0s;
     -o-transition: all 0.3s ease 0s;
 }

.zoom-effect .grid-item figure:hover .square-hover-content img {
     opacity: 1;
     transform: scale(1.1, 1.1);
     -webkit-transform: scale(1.1, 1.1);
     -moz-transform: scale(1.1, 1.1);
     -ms-transform: scale(1.1, 1.1);
     -o-transform: scale(1.1, 1.1);
     transition: all 0.3s ease 0s;
     -webkit-transition: all 0.3s ease 0s;
     -moz-transition: all 0.3s ease 0s;
     -ms-transition: all 0.3s ease 0s;
     -o-transition: all 0.3s ease 0s;
 }
 
.zoom-effect .grid-item figure .square-img img {
     cursor: pointer;
     display: block;
     opacity: 1;
     width: 100%;
     transition: all 0.3s ease 0s;
 }



.zoom-effect .grid-item .square-hover-main {
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    display: table;
    height: 100%;
    top: 0;
    width: 100%;
}

.zoom-effect .grid-item .square-hover-box {
     display: table-cell;
     height: 100%;
 }

.zoom-effect .grid-item .square-hover-content {
     /* bottom: -15px; */
     transition: all 0.3s ease 0s;
     -webkit-transition: all 0.3s ease 0s;
     -moz-transition: all 0.3s ease 0s;
     -ms-transition: all 0.3s ease 0s;
     -o-transition: all 0.3s ease 0s;
 }


.zoom-effect .grid-item figcaption {bottom:0; left:0; opacity: 0; position: absolute; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; width: 100%; height: 100%; padding:45px; z-index: 1; text-align: center}
.zoom-effect .grid-item figure:hover figcaption {opacity: 1; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s;}
 /* .hover-option2 .grid-item figcaption {height: 100%}
 .container .hover-option2 .grid-item figcaption {padding: 30px;} */


body.magnificpopupnoscroll {
     overflow-y: hidden !important;
}

.zoom-effect .grid-item .icon-plus {
     width: 30px !important;
     margin: auto;
}

/* justified gallery */
.justified-gallery>a>.jg-caption, .justified-gallery>div>.jg-caption, .justified-gallery>figure>.jg-caption {padding:7px 15px; opacity: 0; display: initial !important; bottom: 0;  transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 11px; text-transform: uppercase}
.caption.caption-visible {opacity: 1; bottom: 0 !important}