/* Sun Demo Styles ================================================== */ /* Page Fonts - Titillium and Playfair */ @import url(https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,700,700i&display=swap); @import url(https://fonts.googleapis.com/css?family=Cormorant:400,400i,500,500i,700,700i&display=swap); @import url('https://fonts.googleapis.com/css?family=Playfair+Display:400i,900i|Titillium+Web:300,400,700'); @import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap'); @import url(https://fonts.googleapis.com/css?family=Merriweather:400,400italic,300,700); @import url(https://fonts.googleapis.com/css?family=Allura); /*.titillium{font-family: 'Titillium Web', sans-serif !important;}*/ .cormorant{font-family: 'Cormorant', sans-serif !important;} .poppins{font-family: 'Poppins', sans-serif;} .lato{font-family: 'Lato', sans-serif} .libre{ font-family: 'Libre Baskerville', serif; } .merriweather{font-family: 'Merriweather', sans-serif !important;} .allura{font-family: 'Allura', cursive !important;} /* Body Options */ body{ font-family: 'Montserrat', sans-serif; font-size:14px; font-weight: 400; letter-spacing: 0px;} body *{outline:none;} /* COLORS ================================================== */ /* Colored */ .bg-white{ background-color: #fff } .bg-cream{ background-color: #f8f8f8; } .primary{ color: #428bca !important; } .colored, .colored-hover:hover{ color:#70291c !important;} .bg-colored, .bg-colored-hover:hover{ background-color:#70291c !important; color: #f8f8f8 !important;} .bg-colored:hover{ background-color: #8c3323 !important } .border-colored, .border-colored-hover:hover{ border-color:#70291c !important; } /* Colored1 */ .colored1, .colored1-hover:hover{ color:#d8a316 !important; } .bg-colored1, .bg-colored1-hover:hover{ background-color:#d8a316 !important; } .border-colored1, .border-colored1-hover:hover{ border-color:#d8a316 !important; } /* Colored2 */ .colored2, .colored2-hover:hover{ color:#eeb421 !important; } .bg-colored2, .bg-colored2-hover:hover{ background-color:#eeb421 !important; } .border-colored2, .border-colored2-hover:hover{ border-color:#eeb421 !important; } ::selection{ background-color:#8b4b3d; } /* Other Colors */ #navigation a:hover, #navigation button:hover, #navigation li.active > a{ color:#8c3323 !important; } /* MARINA VERSION MAIN STYLES ================================================== */ /* TITLE */ .block-title{font-family: "Cormorant"; text-transform: uppercase;} .block-title h2{ font-weight: 700; } .block-title, .tag{ text-align:center; font-size: 20px; font-weight: 500; font-style: normal; color: #70291c; line-height: normal; } .block-subtitle{ text-align:center; font-size: 16px; color: #383838;} /* TEXT OVERLAY */ .txt-overlay{ position: absolute; left:0; top:0; width: 100%; height: 100%; z-index: 5; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .txt-overlay:hover {background-color:rgba(0,0,0,0.6); opacity: 1;} .txt-overlay .txt-wrap{ position: relative; left:0; top:0; width: 100%; height: 100%; color: white; text-align: center; display: table; } .txt-overlay .txt-wrap>*{ display: table-cell; vertical-align: middle; left: 50%;} /* READ MORE COLLAPSE */ .read-more-collapse { text-decoration: underline; color: #70291c; } .read-more-collapse:hover { font-weight: 700; color: #70291c;} #more, .more { display: none; } /* NAVIGATION */ /* Navigation Colors - hover and active */ #navigation.modern .columns ul li a:hover, #navigation.modern.scrolled .columns ul li a:hover, #navigation.modern .columns ul.nav > li.active > a{ color:#8c3323 !important; } /* Navigation styles - You can see navigation hover and active colors in the content/antares/css/style.css file. */ #navigation.modern.white-nav .columns ul li a, #navigation.modern.white-nav .columns ul li button{ font-size:14px; font-weight: 600; } /* Mega menu and dropdown styles */ #navigation.modern.white-nav .columns .nav-menu ul.dropdown-menu.mega-menu li a{ color:#222; font-size: 11px; letter-spacing: 0px; font-weight: 700; text-transform: uppercase; } #navigation.modern.white-nav .columns .nav-menu ul.dropdown-menu li a{ color: #222; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0px; } /* Book button position & style */ #navigation.modern .columns .btn-book{ border: 1px solid #fff; border-radius: 0; font-size: 16px; padding-top: 16px; height: 60px; width: 150px; margin: 10px 0 auto auto; font-weight: 400; line-height: 1;-webkit-transition: all 0.25s ease; transition: all 0.25s ease; } #navigation.modern .columns .btn-book:hover{ border: 2px solid #8c3323;} #navigation.modern .btn-book span.best-rates{ display:block; font-size: 9px; } #navigation.modern.scrolled .btn-book{ padding: 7px; height: 40px } #navigation.modern .btn-book br.direct{ display: none; } @media only screen and (max-width: 560px){ #navigation.modern .columns .btn-book{ width: auto; font-size: 13px;} #navigation.modern .btn-book span.best-rates{ display:none; } #navigation.modern .btn-book br.direct{ display: block; } } /* Mobile Nav Button */ @media only screen and (max-width: 1120px){ #mobile-navigation{ background-color: #fff !important; right: -260px; left: auto !important;} #mobile-navigation.active{ -webkit-transform: translateX(-100%) translateZ(0) !important; -moz-transform: translateX(-100%) translateZ(0)!important; -ms-transform: translateX(-100%) translateZ(0)!important; transform: translateX(-100%) translateZ(0)!important; } #mobile-navigation a:active, #mobile-navigation a:focus, #mobile-navigation li a.active, #mobile-navigation a:hover, #mobile-navigation li a.touchme{background-color: #fff !important; } #mobile-navigation .mb-close{ right: 0; left: auto !important; } #mobile-navigation .nav li a{ color: #333 !important; } #mobile-navigation .nav li a:hover{ color: #70291c !important; } #mobile-navigation .nav-el li.hide{ display:none; } } #navigation.modern.dark-nav.scrolled{ background: rgba(0,0,0,0.6) !important; } #navigation.modern.scrolled{ height: 60px; line-height: 60px; } #navigation.modern .columns .logo a,#navigation.modern .columns .logo img{ max-height: 120px; } #navigation.modern:not(.scrolled) .logo { padding-top: 60px} #navigation.modern.booking-page .columns .logo img{max-height: 45px;} #navigation.modern.booking-page .columns .logo{padding-top: 0;} @media only screen and (max-width: 1120px){ } @media only screen and (max-width: 640px){ #navigation.modern:not(.scrolled) .logo { padding-top: 30px; } #navigation.modern:not(.scrolled) .logo img{ max-height: 80px; } } /* HOME */ .home .home-play-button{opacity: 0.5;} .home .home-play-button:hover{opacity: 1;} /* Page Note */ .home .page-note{ top: -120px; z-index: 100; width: 100%; position: relative; } .home .page-note .left-note{ border-left:5px solid; max-width: 400px; padding: 15px 0 15px 40px; float: left;} .home .page-note .center-note{ margin: 0 auto; top: 35px; position:relative; max-width: 600px; text-align:center; font-size: 30px;} .home .page-note .home-socials{ top: 50px; float: right; padding-right: 40px; position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .home .page-note .home-socials a{ width: 30px; height: 30px; border:1px solid white; opacity: 0.7; margin:0 5px; display: inline-block; text-align: center; border-radius: 100%; line-height: 29px; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } #home_slider::before,.pages::before { content:"";pointer-events:none;position:absolute;left:0;right:0;top:0;height:140px;z-index:21;opacity:0.3;background-image:linear-gradient(to bottom, #000000,rgba(0,0,0,0)) } /* Responsive Home Elements */ @media only screen and (max-width: 1280px){ } @media only screen and (max-width: 840px){ } @media only screen and (max-width: 640px){ } @media only screen and (max-width: 560px){ .home .page-note .left-note{display: none;} .home .page-note .center-note{ width: 100%; text-align: center; position:relative; padding:0; font-size: 20px;} .home .page-note .center-note-small{ width: 100%; top: 45px; text-align: center; position:relative; padding:0; font-size: 20px;} .home .page-note .home-socials{width: 100%; top: 105px; text-align: center; padding:0 !important;} #home .tp-bullets.uranus, .home .home-content{ display: none !important; } } @media only screen and (max-height: 500px){ .home .page-note .left-note{ padding:0 0 0 40px !important; font-size: 12px !important; line-height: 15px !important; margin-top: 50px; } .home .page-note .home-socials{ margin-top: 14px; } } /*#home booking-announce*/ .home .page-announce{ top: 20%; z-index: 500; width: 100%; position: absolute; } .home .page-announce .center-announce{ margin: 0 auto; top: 20px; position:relative; max-width: 800px; text-align:center; font-size: 30px;} /*#home_slider { max-height: 100vh} @media only screen and (max-width: 640px){ #home_slider { max-height: auto !important; } }*/ .slide__overlay{ position: absolute;bottom: 0;left: 0;right: 0;height: 140px;background-image: linear-gradient(to bottom, rgba(0,0,0,0),rgba(0,0,0,0.6));z-index: 20;pointer-events: none;} /* ABOUT */ #about{ padding: 50px;} .home-intro-logo, .home-intro p{ margin-bottom: 20px; } .home-intro-title {margin-bottom: 30px; font-family: 'Cormorant', serif; font-weight: 500; font-style: normal; font-size: 20px; letter-spacing: 2px;line-height: normal;text-transform: uppercase; color: #383838; } #about .description{ font-size: 14px; } #about .description p{margin-bottom: 20px; } #about .description .read-more:hover{ color: #70291c; text-decoration: underline; } /* Destination-item */ .list-item { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .destination-item { -ms-flex: 0 0 100%;flex: 0 0 100%;max-width: 100%; overflow: hidden; border-bottom: 4px solid #fff;border-left: 2px solid #fff; border-right: 2px solid #fff;} /*#rooms .destination-item {min-height: 500px; }*/ #restaurants .destination-item { min-height: 300px; } @media (min-width: 768px) { /*#rooms .destination-item { -ms-flex: 0 0 49.8%;flex: 0 0 49.8%;max-width: 49.8%; min-height: 500px;}*/ #restaurants .destination-item { -ms-flex: 0 0 33.1%;flex: 0 0 33.1%;max-width: 33.1%; min-height: 478px; } } .list-item .destination-item .image {position: relative;overflow: hidden;background-position: center !important;background-size: cover !important;background-repeat: no-repeat !important;} .destination-item .image {width: 100%;top: 0;left: 0;z-index: -1;transition: all .2s;background-size: cover !important;background: #1a2b47;} .list-item .destination-item .effect {position: absolute;left: 0;top: 0;background: #000;z-index: 1;width: 100%;height: 100%;opacity: .3;transition: all .3s;} .list-item .destination-item .image .content{ display: table;width: 100%;height: 100%;color:#fff;padding:10%;position: absolute;z-index: 1; text-shadow: -1px 0 #5a5a5a;} .list-item .destination-item .image .content .float { display: table-cell; vertical-align: middle; text-align: center; } .list-item .destination-item .content .title::after {content: "";height: 2px;width: 50px;background: #fff;display: block;margin: auto;margin-top: 15px;transition: all .3s;} .list-item .destination-item .image .content .title{font-size: 20px; font-weight: 500} .list-item .destination-item .image .content .desc{margin-top: 10px;} .list-item .destination-item .image .content .see-more{text-decoration:underline; margin-top: 10px; font-size:12px;} .destination-item .image {position: absolute;height: 100%;width: 100%;top: 0;left: 0;z-index: -1;transition: all .2s;background-size: cover!important;background: #1a2b47} .destination-item:hover .image {-webkit-transform: scale(1.05); transform: scale(1.05)} .destination-item:hover .effect {opacity: 0.4;} .destination-item:hover .content .title::after {width: 70px !important;} /* DINO PARK */ #dino .qdr-controls .slick-dots li button{opacity: 1;} #dino .slick-dots { padding-left: 8%; max-width: 350px;} #dino .custom-arrow.qdr-controls .slick-arrow { background-color:rgba(0,0,0,0); opacity: 1; top: auto !important; } #dino .custom-arrow.qdr-controls .slick-arrow.slick-prev,#dino .custom-arrow.qdr-controls .slick-arrow.slick-next{bottom:0;} #dino .fixed-details{ position:absolute; z-index: 8;width: auto; left: 8%; max-width: 350px; text-shadow: -1px 0 #5a5a5a;} #dino .hero-slider{ height: 400px !important; } @media (max-width: 560px){ #dino .hero-slider{ height: 320px !important; } } /* SOCIAL GALLERY */ #social .fa{ font-size:18px; font-weight: 500; padding-top: 10px; font-style: normal; color: #383838; line-height: normal; } #social .fa:hover{ color: #70291c; } @media (max-width: 480px){ .hashtag{ font-size: 10px; } } @media (max-width: 800px) { .sm-hide { display: none !important; } } @media (min-width: 801px) { .sm-hide { display: block !important; } } /* Mobile */ @media only screen and (max-width: 30px){ #social .gallery-type-1 .cbp-item-wrapper .cbp-caption>div{ overflow: hidden; } #social .gallery-type-1 .cbp-caption-activeWrap{ position: relative; opacity: 1; background-color:#252525; visibility: visible; } #social .gallery-type-1:not(.no-hover) .cbp-caption-activeWrap a{ opacity: 1; visibility: visible; -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } } /* FOOTER */ .footer-link { letter-spacing: 2px; color:#70291c } .footer-link li { padding: 0 8px 0 3px; display: inline; border-right: 1px solid #70291c; } .footer-link li a { color: #70291c; text-transform: uppercase; text-decoration: none; } .footer-link li a:hover {color: #333 !important; text-decoration: underline !important;} .footer-link li:last-child { border-right: none; } footer { font-size: 12px; width: 100%; font-weight: 500; overflow: hidden; padding: 30px 0; } footer .ref{ margin-top: 15px; margin-bottom: 15px; } .contact a{ color: #70291c; background-color: transparent; cursor: pointer; text-decoration: underline; } .contact a:hover{ text-decoration: none; } /* MARINA ROOM PAGE ================================================== */ .room-desc p{ margin: 0 0 10px; line-height: 24px; box-sizing: border-box;} .room-desc { max-width: 1000px; margin: 0 auto; padding: 50px 30px; text-align:center; } @media (max-width: 768px){ .room-desc{ padding: 30px 20px; } } @media (max-width: 480px){ .room-desc{ padding: 40px 30px 30px; text-align: left;} } .room-desc .room-name { margin-bottom: 30px; font-family: 'Cormorant', serif; font-weight: 400; letter-spacing: 2px;line-height: normal;color: #383838; font-weight: 700; } .room-btn { letter-spacing: 2px; padding: 12px 24px;} #lg-share,.lg-autoplay-button,#lg-download { display: none; } @media only screen and (max-width: 690px){ #rooms .qdr-col-4>*{ width: 50% !important; margin-left:auto !important; margin-right: auto !important; float: none !important; text-align: center;} } .rooms-right-col-list ul{ list-style-type: disc; padding-left: 1rem; } /* MARINA RESTAURANT PAGE ================================================== */ .left-col,.right-col{ padding: 50px 30px; } .left-col h1{margin-bottom: 30px; font-family: 'Cormorant', serif; font-weight: 400; letter-spacing: 2px;line-height: normal;color: #383838; font-weight: 700;} .single-room .row,.single-restaurant .row{ margin-left: auto; margin-right:auto; } @media (max-width: 768px){ .left-col{padding: 50px 0px;} .single-room .left-col{ padding: 50px 0 0 0; } .right-col{padding: 0px 0px;} } /* MARINA PROMOTION PAGE ================================================== */ #promotions .top-title{margin-bottom: 15px; font-weight: 500; font-size: 22px;font-family: 'Allura', cursive !important; color: #965D50; line-height: 1.4} #promotions .title{ font-size: 24px; font-weight: 300px;font-family: 'Merriweather', sans-serif !important;color: #8b4b3d !important;margin-bottom: 15px; } #promotions .short-desc{ color: #999; font-family: 'Merriweather', sans-serif; font-size: 13px;margin-bottom:10px } #promotions .text{ padding: 15px 15px 15px 40px } #promotions .promotion-img{ max-height: 250px; object-fit: cover; } #promotions .promotion-row{background-color: #fcfcfc;} /* MARINA ROOM RATE PAGE ================================================== */ table, td, th {border: 1px solid black;} table {width: 100%;border-collapse: collapse;} .xs-hide {display: block;} .roomrates-remark{ padding: 0px 50px 0px 120px;} .currency .custom-select{width:auto !important;} @media only screen and (max-width: 768px){ .xs-hide{display:none !important;} .qdr-col-4 > *,.qdr-col-5 > * { width: 100% !important; } .roomrates-remark{ padding: 0 15px 0 15px; margin: 0px 50px;} } @media only screen and (min-width: 769px){ .md-hide{display:none;} }