/*
Template Name: Cassida
Template URL: https://www.codesymbol.com/templates/cassida/demo
Version: 1.0.0
Author: CodeSymbol
Author URL: https://themeforest.net/user/codesymbol/
*/

/*
================================================================
================================================================
    Elements
================================================================
================================================================
*/


    /* ---------------------- */
    /* Rooms                  */
    /* ---------------------- */

        /* Global */
            .rooms-grid {

            }

        /* Style Hover */
            .rooms-grid.style-hover {
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-gap: 42px;
            }
            .rooms-grid.style-hover article {
                display: block;
            }
            .rooms-grid.style-hover article .inner {
                position: relative;
            }
            .rooms-grid.style-hover article .inner::after {
                position: absolute;
                display: block;
                content: "";
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                opacity: 0.5;
                z-index: 4;
                pointer-events: none;
                background-color: var(--cs-ca-color-00, #000);
            }
            .rooms-grid.style-hover article .inner > a {
                display: block;
                width: 100%;
                height: auto;
                margin: 0;
            }
            .rooms-grid.style-hover article .media {
                position: relative;
                backface-visibility: hidden;
                will-change: contents;
                height: 352px;
                overflow: hidden;
            }
            .rooms-grid.style-hover article .inner-media {
                position: relative;
                overflow: hidden;
                height: 100%;
                transform: scale(1);
            }
            .rooms-grid.style-hover article:hover .inner-media {
                transform: scale(1.04);
            }
            .rooms-grid.style-hover article .inner-media img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            .rooms-grid.style-hover article .text {
                position: absolute;
                top: 50%;
                left: 0;
                width: 100%;
                padding: 10px 30px;
                z-index: 5;
                text-align: center;
                transform: translateY(-50%);
            }
            .rooms-grid.style-hover article .room-title {
                display: block;
                font-family: 'Canela';
                font-size: 34px;
                line-height: 42px;
                margin-bottom: 0;
                color: var(--cs-ca-color-08, #fff);
            }
            .rooms-grid.style-hover article .room-details {
                position: absolute;
                top: 100%;
                left: 50%;
                opacity: 0.8;
                text-align: center;
                transform: translateX(-50%);
            }
            .rooms-grid.style-hover article .room-details span {
                display: inline-block;
                margin: 0 9px;
                color: var(--cs-ca-color-08, #fff);
            }
            .rooms-grid.style-hover article .room-details span i {
                font-size: 16px;
                vertical-align: middle;
            }
            .rooms-grid.style-hover article .room-price {
                position: absolute;
                bottom: 30px;
                left: 50%;
                padding: 3px 14px;
                z-index: 5;
                color: var(--cs-ca-color-08, #fff);
                background-color: var(--cs-ca-accent-01, #af8c3e);
                transform: translateX(-50%);
            }
            .rooms-grid.style-hover article .room-price .old-price {
                position: absolute;
                left: -40px;
                opacity: 0.5;
                font-weight: 700;
                text-decoration: line-through;
            }
            .rooms-grid.style-hover article .room-price .current-price {
                font-weight: 700;
            }
            .rooms-grid.style-hover article .room-price .current-price span {
                opacity: 0.8;
                font-size: 11px;
                font-weight: 400;
            }

        /* Style Standard */
            .rooms-grid.style-standard {
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-gap: 60px;
            }
            .rooms-grid.style-standard article {
                display: block;
            }
            .rooms-grid.style-standard article .inner {
                position: relative;
            }
            .rooms-grid.style-standard article .inner > a {
                display: block;
                width: 100%;
                height: auto;
                margin: 0;
            }
            .rooms-grid.style-standard article .media {
                position: relative;
                backface-visibility: hidden;
                will-change: contents;
                overflow: hidden;
            }
            .rooms-grid.style-standard article .inner-media {
                overflow: hidden;
                transform: scale(1);
            }
            .rooms-grid.style-standard article:hover .inner-media {
                transform: scale(1.04);
            }
            .rooms-grid.style-standard article .inner-media img {
                display: block;
                width: 100%;
            }
            .rooms-grid.style-standard article .room-price {
                position: absolute;
                top: 20px;
                left: 20px;
                padding: 0px 12px;
                z-index: 5;
                opacity: 0.85;
                color: var(--cs-ca-color-08, #fff);
                background-color: var(--cs-ca-accent-01, #af8c3e);
            }
            .rooms-grid.style-standard article .room-price .current-price {
                font-weight: 700;
            }
            .rooms-grid.style-standard article .room-price .current-price span {
                opacity: 0.8;
                font-size: 11px;
                font-weight: 400;
            }
            .rooms-grid.style-standard article .text {
                margin-top: 18px;
            }
            .rooms-grid.style-standard article .room-title {
                display: block;
                font-family: 'Canela';
                font-size: 28px;
                line-height: 34px;
                margin-bottom: 14px;
                font-weight: 300;
                color: var(--cs-ca-color-00, #000);
            }
            .rooms-grid.style-standard.bold article .room-title {
                margin-top: 25px;
                font-weight: 400;
            }
            .rooms-grid.style-standard article .room-details {
                margin-bottom: 10px;
            }
            .rooms-grid.style-standard article .room-details span {
                display: inline-block;
                margin-right: 14px;
                color: var(--cs-ca-color-00, #000);
            }
            .rooms-grid.style-standard.bold article .room-details span {
                margin-right: 20px;
            }
            .rooms-grid.style-standard article .room-details span:last-child {
                margin: 0;
            }
            .rooms-grid.style-standard article .room-details span i {
                font-size: 20px;
                margin-right: 4px;
                vertical-align: middle;
            }
            .rooms-grid.style-standard article .text p {
                margin-top: 18px;
            }
            .rooms-grid.style-standard article .explore {
                color: var(--cs-ca-accent-01, #af8c3e);
            }

        /* Style Big */
            .rooms-grid.style-big {
                display: block;
            }
            .rooms-grid.style-big article {
                display: block;
                margin-bottom: 50px;
            }
            .rooms-grid.style-big article:last-child {
                margin: 0;
            }
            .rooms-grid.style-big article:nth-child(even) {
                text-align: right;
            }
            .rooms-grid.style-big article .inner {
                position: relative;
            }
            .rooms-grid.style-big article .inner > a {
                display: block;
                width: 100%;
                height: auto;
                margin: 0;
            }
            .rooms-grid.style-big article .media {
                position: relative;
                height: 500px;
                backface-visibility: hidden;
                will-change: contents;
                overflow: hidden;
            }
            .rooms-grid.style-big article .inner-media {
                position: relative;
                height: 100%;
                overflow: hidden;
                transform: scale(1);
            }
            .rooms-grid.style-big article:hover .inner-media {
                transform: scale(1.04);
            }
            .rooms-grid.style-big article .inner-media img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            .rooms-grid.style-big article .content-box {
                position: absolute;
                right: -150px;
                top: 50%;
                width: 480px;
                min-height: 280px;
                padding: 46px 46px;
                text-align: left;
                background-color: var(--cs-ca-color-08, #fff);
                box-shadow: 1px 1px 10px #0000001a;
                transform: translateY(-50%);
            }
            .rooms-grid.style-big article:nth-child(even) .content-box {
                right: auto;
                left: -150px;
            }
            .rooms-grid.style-big article .content-box .head {
            }
            .rooms-grid.style-big article .content-box .room-price {
                margin-bottom: 5px;
            }
            .rooms-grid.style-big article .content-box .room-price .current-price {
                font-weight: 700;
                font-size: 14px;
                color: var(--cs-ca-accent-01, #af8c3e);
            }
            .rooms-grid.style-big article .content-box .room-price .current-price span {
                opacity: 0.8;
                font-size: 11px;
                font-weight: 400;
                color: var(--cs-ca-color-00, #000);
            }
            .rooms-grid.style-big article .content-box .room-title {
                display: block;
                font-family: 'Canela';
                font-size: 28px;
                line-height: 34px;
                margin-bottom: 14px;
                color: var(--cs-ca-color-00, #000);
            }
            .rooms-grid.style-big article:hover .content-box .room-title {
                color: var(--cs-ca-accent-01, #af8c3e);
            }
            .rooms-grid.style-big article .content-box .room-details {
                margin-bottom: 10px;
            }
            .rooms-grid.style-big article .content-box .room-details span {
                display: inline-block;
                margin-right: 20px;
                color: var(--cs-ca-color-00, #000);
            }
            .rooms-grid.style-big article .content-box .room-details span:last-child {
                margin: 0;
            }
            .rooms-grid.style-big article .content-box .room-details span i {
                font-size: 20px;
                margin-right: 6px;
                vertical-align: middle;
            }
            .rooms-grid.style-big article .content-box .text {
                margin-top: 18px;
            }
            .rooms-grid.style-big article .content-box .explore {
                color: var(--cs-ca-accent-01, #af8c3e);
            }

        /* Room Single */
            .room-single {

            }
            .room-single::before {
                position: absolute;
                content: "";
                width: 100%;
                height: 140px;
                top: 0;
                left: 0;
                opacity: 1;
                z-index: 3;
                pointer-events: none;
                background-image: -webkit-linear-gradient(rgba(0,0,0,0.55) 0%,rgba(0,0,0,0.3) 50%,transparent 100%);
                background-image: linear-gradient(rgba(0,0,0,0.55) 0%,rgba(0,0,0,0.3) 50%,transparent 100%);
            }
            .room-single > .room-header {
                position: relative;
                height: calc(100vh - 100px);
            }
            .room-single > .room-header .bg {
                position: relative;
                height: 100%;
            }
            .room-single > .room-header .bg::after {
                position: absolute;
                content: "";
                width: 100%;
                height: 350px;
                bottom: 0;
                left: 0;
                opacity: 1;
                z-index: 3;
                pointer-events: none;
                background-image: -webkit-linear-gradient(transparent 0%,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.6) 100%);
                background-image: linear-gradient(transparent 0%,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.6) 100%);
            }
            .room-single > .room-header .bg img {
                position: relative;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            .room-single > .room-header .wrapper {
                position: absolute;
                bottom: 50px;
                left: 50%;
                width: 1200px;
                z-index: 4;
                transform: translateX(-50%);
            }
            .room-single > .room-header .info {
                position: relative;
            }
            .room-single > .room-header .info .room-title {
                display: block;
                font-family: 'Canela';
                font-size: 50px;
                line-height: 59px;
                margin-bottom: 35px;
                color: var(--cs-ca-color-08, #fff);
            }
            .room-single > .room-header .info .room-details {
                
            }
            .room-single > .room-header .info .room-details p {
                position: relative;
                display: inline-block;
                padding-right: 28px;
                margin-right: 28px;
                margin-bottom: 0;
            }
            .room-single > .room-header .info .room-details p::after {
                position: absolute;
                content: "";
                top: 38px;
                right: -11px;
                width: 21px;
                height: 1px;
                background-color: var(--cs-ca-color-05, #808080);
            }
            .room-single > .room-header .info .room-details p:last-child::after {
                display: none;
            }
            .room-single > .room-header .info .room-details p .label {
                display: block;
                opacity: 0.6;
                color: var(--cs-ca-color-08, #fff);
            }
            .room-single > .room-header .info .room-details p .content {
                color: var(--cs-ca-color-08, #fff);
            }
            .room-single > .room-header .room-price {
                position: absolute;
                bottom: 0;
                right: 0;
            }
            .room-single > .room-header .room-price .current-price {
                font-size: 25px;
                font-weight: 700;
                color: var(--cs-ca-accent-01, #af8c3e);
            }
            .room-single > .room-header .room-price .current-price span {
                font-size: 14px;
                font-weight: 400;
                opacity: 0.5;
                color: var(--cs-ca-color-08, #fff);
            }
            .room-single > .room-content {
                padding: 100px 0;
            }
            .room-single > .room-content {
                
            }
            .room-single > .room-content p:last-child {
                margin: 0;
            }
            .room-single > .similar-rooms {
                padding: 100px 0;
            }
            .room-single > .similar-rooms .rooms-grid.style-standard {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                grid-gap: 20px;
            }
            .room-single > .similar-rooms .rooms-grid.style-standard article .room-title {
                font-size: 24px;
                line-height: 30px;
                margin-bottom: 14px;
            }

/*
================================================================
================================================================
    Transitions
================================================================
================================================================
*/

    header a,
    header nav a > span::after,
    header:not(.showNav) nav > ul > li:not(.mega-menu) > ul ul,
    header .menu-icon span,
    header:not(.showNav) nav > ul > li > ul,
    footer a:not(.logo-link)::after,
    footer a,
    section .button,
    .booking-tool .booking-step.feature-search .step-label,
    .video-popup-wrapper .popup-button a,
    .image-box .inner-media,
    .image-box.style-title-over .label::after,
    .image-box.style-title-over .discover,
    .accordion .panel .label,
    .accordion .panel .label i::before,
    .accordion .panel .label i::after,
    .facilities .facility-box .inner-media,
    .pricing-tables .pricing-column .inner-media,
    .restaurant-menu ul li .inner-media,
    .team-member .content .social a,
    .rooms-grid article .inner-media,
    .rooms-grid.style-big article .content-box .room-title,
    .contact-box ul li a::after,
    .contact-form input[type="text"],
    .contact-form input[type="email"],
    .contact-form input[type="submit"],
    .contact-form textarea,
    .blog-archive article .inner-media,
    .blog-archive article > .meta > div a::after,
    .blog-archive article > h2 a,
    .blog-archive article > .content .read-more,
    .blog-single-post > .page-header .meta > div a::after,
    .blog-single-post .blog-single-content .content .post-end a,
    .blog-single-post .comment_form form input[type="text"],
    .blog-single-post .comment_form form input[type="email"],
    .blog-single-post .comment_form form input[type="submit"],
    .blog-single-post .comment_form form textarea,
    .sidebar .widget-recent-posts > .widget-content ul li .recentpost-data span,
    .sidebar .widget > .widget-content ul li a,
    .sidebar .widget > .widget-content ul li a::after,
    .sidebar .widget > .widget-content ul li img,
    .carousel-slider .swiper-pagination span::after,
    .carousel-slider .swiper-nav-prev,
    .carousel-slider .swiper-nav-next,
    .carousel-slider.style-horizontal-focused article,
    .carousel-slider.style-horizontal-focused article .inner::after,
    .carousel-slider.style-horizontal-focused article .media .inner-media,
    .carousel-slider.style-horizontal-focused article .media::before,
    .carousel-slider.style-horizontal-focused article .text,
    .carousel-slider.style-horizontal-focused.style-boxed article .explore,
    .carousel-slider.style-fullscreen article .text,
    .carousel-slider.style-fullscreen article .media::before,
    .carousel-slider.clients-slider article,
    .label-slider > .slides .slide .big-label,
    .label-slider > .slides .slide ul,
    .label-slider > .slides .slide ul li a,
    .list-slider > .list ul li a,
    .list-slider > .details .panel,
    .strips-slider article .inner::after,
    .strips-slider article .media .inner-media,
    .strips-slider article .text,
    .strips-slider .swiper-nav-prev,
    .strips-slider .swiper-nav-next,
    .vertical-slider article .inner::after,
    .vertical-slider article .media .inner-media,
    .vertical-slider article .text,
    .vertical-slider .swiper-nav-prev,
    .vertical-slider .swiper-nav-next,
    .big-slider article,
    .big-slider article .room-price,
    .big-slider article .explore,
    .big-slider .swiper-nav-prev,
    .big-slider .swiper-nav-next,
    .big-slider .swiper-pagination span::after,
    .block-slider article .room-title,
    .block-slider .swiper-nav-prev,
    .block-slider .swiper-nav-next,
    .sliced-slider .swiper-nav-prev,
    .sliced-slider .swiper-nav-next {
        -webkit-transition: all 0.28s ease;
        -moz-transition: all 0.28s ease;
        -ms-transition: all 0.28s ease;
        -o-transition: all 0.28s ease;
        transition: all 0.28s ease;
    }

    .carousel-slider.style-intro article .text .subtitle {
        -webkit-transition: all 0.70s ease 0.60s;
        -moz-transition: all 0.70s ease 0.60s;
        -ms-transition: all 0.70s ease 0.60s;
        -o-transition: all 0.70s ease 0.60s;
        transition: all 0.70s ease 0.60s;
    }
    .carousel-slider.style-intro article .text h2 {
        -webkit-transition: all 0.70s ease 0.85s;
        -moz-transition: all 0.70s ease 0.85s;
        -ms-transition: all 0.70s ease 0.85s;
        -o-transition: all 0.70s ease 0.85s;
        transition: all 0.70s ease 0.85s;
    }
    .carousel-slider.style-intro article .text a {
        -webkit-transition: background-color 0.28s ease, opacity 0.70s ease 1.10s, transform 0.70s ease 1.10s;
        -moz-transition: background-color 0.28s ease, opacity 0.70s ease 1.10s, transform 0.70s ease 1.10s;
        -ms-transition: background-color 0.28s ease, opacity 0.70s ease 1.10s, transform 0.70s ease 1.10s;
        -o-transition: background-color 0.28s ease, opacity 0.70s ease 1.10s, transform 0.70s ease 1.10s;
        transition: background-color 0.28s ease, opacity 0.70s ease 1.10s, transform 0.70s ease 1.10s;
    }

    .label-slider > .images img,
    .list-slider > .images img,
    .big-slider .big-slider-images img,
    .block-slider .block-slider-images img,
    .sliced-slider .sliced-slider-images img {
        -webkit-transition: all 0.8s ease;
        -moz-transition: all 0.8s ease;
        -ms-transition: all 0.8s ease;
        -o-transition: all 0.8s ease;
        transition: all 0.8s ease;
    }
    body .preloader {
        -webkit-transition: all 1.0s ease;
        -moz-transition: all 1.0s ease;
        -ms-transition: all 1.0s ease;
        -o-transition: all 1.0s ease;
        transition: all 1.0s ease;
    }

    header:not(.showNav) nav > ul > li > ul {
        -webkit-transition: all 0.3s ease 0.05s;
        -moz-transition: all 0.3s ease 0.05s;
        -ms-transition: all 0.3s ease 0.05s;
        -o-transition: all 0.3s ease 0.05s;
        transition: all 0.3s ease 0.05s;
    }


/*
================================================================
================================================================
    Media Quieries
================================================================
================================================================
*/


    /* ----------------------- */
    /* Medium Screens (Small Desktop) */
    /* ----------------------- */
    @media only screen and (max-width : 1680px) {

        /* ----------------------*/
        /* Rooms                 */
        /* ----------------------*/
            .rooms-grid.style-big article .content-box {
                right: 30px;
            }
            .rooms-grid.style-big article:nth-child(even) .content-box {
                left: 30px;
            }
    }

    /* ----------------------- */
    /* Medium Devices (Tablet) */
    /* ----------------------- */
    @media only screen and (max-width : 1300px) {
        /* ----------------------   */
        /* Elements                 */
        /* ----------------------   */

            /* Rooms */
                .rooms-grid.style-standard {
                    grid-gap: 40px;
                }
                .room-single > .room-header .wrapper {
                    left: 0;
                    width: 100%;
                    padding: 0 50px;
                    transform: none;
                }
                .room-single > .room-header .info .room-title {
                    font-size: 42px;
                    line-height: 50px;
                    margin-bottom: 15px;
                }
                .room-single > .room-header .room-price {
                    right: 50px;
                }

    }


    /* ---------------------- */
    /* Small Devices (Mobile) */
    /* ---------------------- */
    @media only screen and (max-width : 1024px) {

        /* ----------------------   */
        /* Elements                 */
        /* ----------------------   */
            /* Rooms */
                .rooms-grid.style-hover {
                    display: grid;
                    grid-template-columns: 1fr;
                    grid-gap: 45px;
                }
                .rooms-grid.style-standard {
                    grid-template-columns: 1fr;
                    grid-gap: 45px;
                }
                .rooms-grid.style-big article .media {
                    height: 250px;
                }
                .rooms-grid.style-big article .content-box,
                .rooms-grid.style-big article:nth-child(even) .content-box {
                    position: relative;
                    right: auto;
                    left: auto;
                    top: auto;
                    width: auto;
                    min-height: 280px;
                    padding: 32px 32px;
                    transform: none;
                }
                .room-single > .room-header .wrapper {
                    padding: 0 20px;
                }
                .room-single > .room-header .info .room-title {
                    font-size: 32px;
                    line-height: 40px;
                    margin-bottom: 15px;
                }
                .room-single > .room-header .room-price {
                    right: 20px;
                }
                .room-single > .room-content,
                .room-single > .similar-rooms {
                    padding: 60px 0;
                }
                .room-single > .similar-rooms .rooms-grid.style-standard {
                    display: grid;
                    grid-template-columns: 1fr;
                    grid-gap: 30px;
                }

    }