@charset "utf-8";
/* Table of Contents
==================================================
	#Desktop (1600)
	#Desktop (1366)
	#Desktop (1024)
	#Tablet (Portrait)
	#Mobile (Portrait)
	#Mobile (Landscape)

/* #Additional - Large Screens beyond 1920px
================================================== */
@media only screen and (min-width: 1700px) and (max-width: 2100px) {

    :root										{ --container-width: 1170px; }
    .container                                  { max-width: 1170px; }



}

/* #Additional - Large Screens beyond 1600px
================================================== */
@media only screen and (min-width: 1367px) and (max-width: 1600px) {

    :root										{ --container-width: 1170px; }
    .container                                  { max-width: 1170px; }



}

/* #Additional - Large Screens beyond 1366px
================================================== */
@media only screen and (min-width: 1180px) and (max-width: 1366px) {

    :root										{ --container-width: 1170px; }
    .container                                  { max-width: 1170px; }

}



/* #iPad Pro - Large Screens beyond 1024px
================================================== */
@media only screen and (min-width: 959px) and (max-width: 1180px) {

    :root										{ --container-width: 960px; }
    .container									{ max-width: 960px; }

    #header .rightNav ul						{ grid-gap: 15px; }
    #caption .title								{ font-size: 52px; line-height: 52px; }
    #caption .subtitle							{ font-size: 17px; line-height: 30px; }
    #searchForm									{ grid-gap: 20px; bottom: 30px; }
    #searchForm .field .form-control			{ font-size: 16px; }
    #searchForm .field.dateinout				{ width: 30%; }
    #searchForm .field.adultschildren			{ width: 33%; }
    #searchForm .field.promocode				{ width: 17%; }
    #searchForm .field.button					{ width: 20%; }
    #searchForm .field .form-control			{ height: 44px; }
    #searchForm .field button					{ padding: 12px 15px; }

    /*----------------- Inner Pages -----------------*/
    #innerBanner, #innerBanner .inner-slider, #innerBanner .owl-stage-outer, #innerBanner .owl-stage, #innerBanner .owl-item { height: auto; }

    /*----------------- Other Blocks -----------------*/
    #facilitiesMoreSec .slider .facilities-more-slider .item .image:after { height: 65%; }
    #facilitiesMoreSec .slider .facilities-more-slider .item .info { bottom: 20px; right: 20px; left: 20px; }
    #facilitiesMoreSec .slider .customNav		{ margin-right: 100px; margin-left: 100px; }

}



/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {

    :root										{ --container-width: 100%; }
    .container									{ max-width: 100%; padding: 0 15px; }

    #header										{ padding: 15px 15px; }
    #header .leftNav .languageMenu				{ display: none; }
    #header .leftNav .phoneIcon					{ display: none; }
    #header .rightNavMobile						{ display: flex; }
    #header .rightNav							{ display: none; }
    #caption									{ width: calc(100% - 30px); }
    #caption .title								{ font-size: 48px; line-height: 48px; }
    #caption .subtitle							{ font-size: var(--font-text-size); line-height: 30px; }
    #caption .subtitle br						{ display: none; }
    #searchForm									{ display: none; flex-direction: column; justify-content: center; grid-gap: 30px; padding: 15px; padding-top: 30px; background-color: #0a1329; position: fixed; top: 0; bottom: 0; left: 0; z-index: 4; }
    #searchForm[style*='display: block']		{ display: flex !important; }
    #searchForm a.searchFormClose				{ display: block; }
    #searchForm .field							{ position: static; width: 100% !important; }
    #searchForm .field .form-control			{ height: 50px; font-size: 16px; }
    #searchForm .field button					{ padding: 15px 15px; }
    #searchForm .field .popups					{ padding-bottom: 30px; top: 0; bottom: 0; left: 0; }
    #searchForm .field .popups .calendar		{ width: 100%; }
    #searchForm .field .popups .calendar .daterangepicker { float: none; width: 542px; }
    #searchForm .field .popups .roomsbox		{ width: 100%; margin-top: 7px; }
    #searchForm .field .popups .roomsbox #rooms { grid-gap: 30px; min-height: 286px; max-height: 286px; padding-right: 30px; }
    #searchForm .field .popups .roomsbox #rooms .room { flex-direction: column; grid-gap: 30px; }
    #searchForm .field .popups .roomsbox #rooms .room .room-title { min-width: 100%; max-width: 100%; }
    #searchForm .field .popups .roomsbox #rooms .room .icon.adult, #searchForm .field .popups .roomsbox #rooms .room .icon.child, #searchForm .field .popups .roomsbox #rooms .room .icon.baby { width: 100%; }
    #searchForm .field .popups .roomsbox #rooms .room select { width: 100%; }
    #searchForm .field .popups .roomsbox #rooms .room .icon.remove { top: 2px; }
    #searchForm .field .popups .roomsbox #rooms .room .ages-inputs { flex-direction: column; grid-gap: 30px; }
    #searchForm .field .popups .roomsbox #rooms .room .ages-inputs .ages-label { min-width: 100%; max-width: 100%; }
    #searchForm .field .popups .roomsbox #rooms .room .ages-inputs .ages-container { flex-direction: column; grid-gap: 30px; width: 100%; }
    #searchForm .roomsbox .action-buttons		{ grid-gap: 15px; margin-top: 30px; }
    #searchForm .field .popups .promocodebox	{ width: 100%; }
    #searchForm .field .popups .promocodebox .form-control { margin-top: 7px; }
    #searchFormBtn								{ display: block; }
    .text-center span.title					{ margin: 0 0 20px 0; font-size: 20px; line-height: 40px; }
    #text-center h2							{ width: 100%; margin: 0 0 20px 0; font-size: 35px; line-height: 45px; }
    #footer										{ padding-bottom: 54px; }
    .footerSection .ftr_info					{ margin-bottom: 30px; text-align: center; }
    .footerSection .ftr_info .logo				{ display: flex; justify-content: center; }

    /*----------------- Inner Pages -----------------*/
    #innerBanner, #innerBanner .inner-slider, #innerBanner .owl-stage-outer, #innerBanner .owl-stage, #innerBanner .owl-item { width: 100%; height: auto; }
    #innerBanner .inner-slider .desktop			{ display: none; }
    #innerBanner .inner-slider .tablet			{ display: block; }
    #innerBanner .inner-slider .owl-dots		{ width: auto; top: auto; transform: translateY(0%); bottom: 90px; right: 15px; left: 15px; }
    #innerBanner .inner-slider .owl-dots .owl-dot { width: 32px; height: 32px; margin: 0 5px; }
    #innerBanner .inner-slider .owl-dots .owl-dot:first-child { margin-top: 0; margin-left: 0; }
    #innerBanner .inner-slider .owl-dots .owl-dot:last-child { margin-bottom: 0; margin-right: 0; }
    #innerBanner .inner-slider .owl-dots .owl-dot.active { margin-top: 0px; margin-bottom: 0px; }
    #innerBanner .inner-slider .owl-dots .owl-dot:before, #innerBanner .inner-slider .owl-dots .owl-dot:after { display: none; }
    #innerBanner .inner-slider .owl-dots .owl-dot span { width: 8px; height: 8px; }

    /*----------------- Other Blocks -----------------*/
    #facilitiesMoreSec span.title				{ margin: 0 0 20px 0; font-size: 20px; line-height: 40px; }
    #facilitiesMoreSec h2						{ width: 100%; margin: 0 0 20px 0; font-size: 35px; line-height: 45px; }
    #facilitiesMoreSec .slider .facilities-more-slider .owl-stage-outer:before, #facilitiesMoreSec .slider .facilities-more-slider .owl-stage-outer:after { width: 55px; }
    #facilitiesMoreSec .slider .facilities-more-slider .item .image:after { height: 75%; }
    #facilitiesMoreSec .slider .facilities-more-slider .item .info { bottom: 15px; right: 15px; left: 15px; }
    #facilitiesMoreSec .slider .facilities-more-slider .item .info h3 { margin: 0 0 0px 0; font-size: 23px; line-height: 23px; }
    #facilitiesMoreSec .slider .facilities-more-slider .item .info .text { width: 100%; margin-right: 0; }
    #facilitiesMoreSec .slider .facilities-more-slider .item .info p { margin: 15px 0 0 0; font-size: 16px; font-weight: 300; line-height: 20px; }
    #facilitiesMoreSec .slider .customNav		{ margin-right: 70px; margin-left: 70px; }

}



/*  #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {

    :root										{ --container-width: 100%; }
    .container									{ max-width: 100%; padding: 0 15px; }

    #header										{ padding: 15px 15px; }
    #header .logo								{ width: 130px; }
    #header .leftNav .hamburger nav				{ width: 100%; }
    #header .leftNav .hamburger nav .nav_middle { grid-gap: 30px; padding: 90px 15px 30px 15px; }
    #header .leftNav .languageMenu				{ display: none; }
    #header .leftNav .phoneIcon					{ display: none; }
    #header .rightNavMobile						{ display: flex; }
    #header .rightNav							{ display: none; }
    #caption									{ width: calc(100% - 30px); }
    #caption .title								{ font-size: 48px; line-height: 48px; }
    #caption .subtitle							{ font-size: var(--font-text-size); line-height: 30px; }
    #caption .subtitle br						{ display: none; }
    #searchForm									{ display: none; flex-direction: column; justify-content: center; grid-gap: 30px; padding: 15px; padding-top: 30px; background-color: #0a1329; position: fixed; top: 0; bottom: 0; left: 0; z-index: 4; }
    #searchForm[style*='display: block']		{ display: flex !important; }
    #searchForm a.searchFormClose				{ display: block; }
    #searchForm .field							{ position: static; width: 100% !important; }
    #searchForm .field .form-control			{ height: 50px; font-size: 16px; }
    #searchForm .field button					{ padding: 15px 15px; }
    #searchForm .field .popups					{ padding-bottom: 30px; top: 0; bottom: 0; left: 0; }
    #searchForm .field .popups .calendar		{ width: 100%; }
    #searchForm .field .popups .calendar .daterangepicker .drp-calendar.left { float: none; margin-right: auto; margin-left: auto; }
    #searchForm .field .popups .roomsbox		{ width: 100%; margin-top: 7px; }
    #searchForm .field .popups .roomsbox #rooms { grid-gap: 30px; min-height: 286px; max-height: 286px; padding-right: 30px; }
    #searchForm .field .popups .roomsbox #rooms .room { flex-direction: column; grid-gap: 30px; }
    #searchForm .field .popups .roomsbox #rooms .room .room-title { min-width: 100%; max-width: 100%; }
    #searchForm .field .popups .roomsbox #rooms .room .icon.adult, #searchForm .field .popups .roomsbox #rooms .room .icon.child, #searchForm .field .popups .roomsbox #rooms .room .icon.baby { width: 100%; }
    #searchForm .field .popups .roomsbox #rooms .room select { width: 100%; }
    #searchForm .field .popups .roomsbox #rooms .room .icon.remove { top: 2px; }
    #searchForm .field .popups .roomsbox #rooms .room .ages-inputs { flex-direction: column; grid-gap: 30px; }
    #searchForm .field .popups .roomsbox #rooms .room .ages-inputs .ages-label { min-width: 100%; max-width: 100%; }
    #searchForm .field .popups .roomsbox #rooms .room .ages-inputs .ages-container { flex-direction: column; grid-gap: 30px; width: 100%; }
    #searchForm .roomsbox .action-buttons		{ grid-gap: 15px; margin-top: 30px; }
    #searchForm .field .popups .promocodebox	{ width: 100%; }
    #searchForm .field .popups .promocodebox .form-control { margin-top: 7px; }
    #searchFormBtn								{ display: block; }
    .text-center span.title					{ margin: 0 0 20px 0; font-size: var(--font-subtitle-cursive-size); line-height: 40px; }
    .text-center h2							{ width: 100%; margin: 0 0 20px 0; font-size: var(--font-title-size); line-height: 45px; }
    #footer										{ padding-bottom: 47px; }
    .footerSection .ftr_info					{ margin-bottom: 30px; text-align: center; order: 1; }
    .footerSection .ftr_info .logo				{ display: flex; justify-content: center; }
    .footerSection .ftr_contact					{ margin-bottom: 30px; text-align: center; order: 2; }
    .footerSection .ftr_contact ul li			{ padding: 0 0 0 0px; }
    .footerSection .ftr_contact ul li img		{ position: static; display: inline-block; margin: 11px 10px 0 0; vertical-align: top; }
    .footerSection .ftr_menu					{ text-align: center; order: 3; }
    .footerBottom .copy_text br					{ display: block; }

    /*----------------- Inner Pages -----------------*/
    #innerBanner, #innerBanner .inner-slider, #innerBanner .owl-stage-outer, #innerBanner .owl-stage, #innerBanner .owl-item { width: 100%; height: auto; }
    #innerBanner .inner-slider .desktop			{ display: none; }
    #innerBanner .inner-slider .mobile			{ display: block; }
    #innerBanner .inner-slider .owl-dots		{ width: auto; top: auto; transform: translateY(0%); bottom: 90px; right: 15px; left: 15px; }
    #innerBanner .inner-slider .owl-dots .owl-dot { width: 32px; height: 32px; margin: 0 5px; }
    #innerBanner .inner-slider .owl-dots .owl-dot:first-child { margin-top: 0; margin-left: 0; }
    #innerBanner .inner-slider .owl-dots .owl-dot:last-child { margin-bottom: 0; margin-right: 0; }
    #innerBanner .inner-slider .owl-dots .owl-dot.active { margin-top: 0px; margin-bottom: 0px; }
    #innerBanner .inner-slider .owl-dots .owl-dot:before, #innerBanner .inner-slider .owl-dots .owl-dot:after { display: none; }
    #innerBanner .inner-slider .owl-dots .owl-dot span { width: 8px; height: 8px; }

    /*----------------- Other Blocks -----------------*/
    #facilitiesMoreSec span.title				{ margin: 0 0 20px 0; font-size: 20px; line-height: 40px; text-align: left; }
    #facilitiesMoreSec h2						{ width: 100%; margin: 0 0 20px 0; font-size: 35px; line-height: 45px; text-align: left; }
    #facilitiesMoreSec .bgBox					{ display: none; width: 50%; height: 370px; }
    #facilitiesMoreSec .slider					{ position: relative; width: calc(100% + 30px); margin-left: -15px; padding-bottom: 0; }
    #facilitiesMoreSec .slider .facilities-more-slider .owl-stage-outer:before, #facilitiesMoreSec .slider .facilities-more-slider .owl-stage-outer:after { display: none; }
    #facilitiesMoreSec .slider .facilities-more-slider .item .image:after { height: 45%; background: linear-gradient(180deg, rgba(2,8,21,0) 5%, var(--color-white-transparent) 65%, var(--color-white) 95%);  -webkit-animation-name: none; animation-name: none; }
    #facilitiesMoreSec .slider .facilities-more-slider .center .item .image:after { -webkit-animation-name: none; animation-name: none; }
    #facilitiesMoreSec .slider .facilities-more-slider .item .info { position: static; padding: 0 15px; margin-top: -30px; -webkit-animation-name: fadeOut; animation-name: fadeOut; }
    #facilitiesMoreSec .slider .facilities-more-slider .center .item .info { -webkit-animation-name: fadeIn; animation-name: fadeIn; }
    #facilitiesMoreSec .slider .facilities-more-slider .item .info h3 { margin: 0 0 50px 0; font-size: 20px; line-height: 20px; color: var(--color-black)}
    #facilitiesMoreSec .slider .facilities-more-slider .item .info .text { width: 100%; margin-right: 0; }
    #facilitiesMoreSec .slider .facilities-more-slider .item .info p { margin: 15px 0 0 0; font-size: 16px; line-height: 28px; color: var(--color-black)}
    #facilitiesMoreSec .slider .customNav		{ margin-top: 0; padding: 0 15px; position: absolute; top: 45%; }

}



/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {

    :root										{ --container-width: 100%; }
    .container									{ /*width: 540px;*/ max-width: 100%; padding: 0 15px; }

    #facilitiesMoreSec .slider .customNav		{ top: 69%; }

}
