@charset "utf-8";
/* CSS Document */
/*format*/
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", arial, helvetica, sans-serif;
color:#9F9F9F;
padding-top: 84px;
font-size: normal;
list-style-type:none;
background: #ffffff;
}
a:link, a:visited, a:active {color: #9F9F9F;}
a:hover {color: #00bfff}
a:link, a:visited, a:active, a:hover{text-decoration: none;}
H1 {
color:#3B3B3B;
font-size:24px;
text-align: left;
line-height:10px;
}
h1 span{
color: #00bfff;
text-transform: uppercase;
font-weight: 800;
line-height: 30px;
}
h2 {
color:#666666;
font-size: large;
text-align:left;
line-height:15px;
}
h3 {
color:#929292;
font-size:small;
line-height:15px;
}
h4 {
color:#929292;
text-decoration:underline;
font-size: larger;
}
h5 {
color:#929292;
font-size: large;
text-align:left;
line-height:15px;
text-transform: uppercase;
}
p{
font-size:small;
line-height:20px;
}
img{
border-radius:10px;
border: 1px #000000;
width:100%;
}
ul.leaf{
list-style-image:url('images/v-list.png');
}
ul.leaf img{width: 50%; height: 50%;}
#title{
position: relative;
float:left;
padding: 0 1%;
text-align:center;
font-size: 150%;
font-weight:700;
font-family: Bradley Hand ITC, verdana, sans-serif;
top:0%;
margin: 0 auto;
}
header{
position:fixed;
width:85%;
height:100px;
align:center;
z-index:999;
top:0;
border-radius:0 0 10px 10px;
border-bottom: 1px #000000;
transition:all 1s ease;
background-color: #ffffff;
color:#848484;
margin: 0 auto;
display: block;
}
@media only screen and (max-device-width: 480px) {
header {
height: 400px;
}
}
/* Sticky*/
/*Sticky header*/
.sticky{
background-color:#848484;
color:#ffffff;
transition:all 1s ease;
height: 84px;
opacity: 0.95;
}
/*Sticky titles*/
.sticky-container{
min-height: 1000px;
position: relative;
}
/*Collection pages*/
.sticky-box{
position: -webkit-sticky;
position: sticky;
height: 35px;
top: 105px;
width: 100%;
background-color:#D8D8D8;
color: #ffffff;
font-size: large;
font-family: helvetica, arial, sans-serif;
margin-bottom: 10px;
line-height: 35px;
text-indent: 15px;
z-index:3;
}
.sticky-container-left{
min-height: 300px;
position: relative;
}
.sticky-container-right{
min-height: 300px;
position: relative;
background-color: #ffffff;
box-shadow: 1px 10px 10px #848484;
}
.sticky-box23{
position: -webkit-sticky;
position: sticky;
height: 35px;
top: 105px;
width: 100%;
background-color:#00bfff;
color: #ffffff;
font-size: large;
font-family: helvetica, arial, sans-serif;
margin-bottom: 10px;
line-height: 35px;
text-indent: 15px;
z-index:3;
display: flex;
border-radius: 10px 10px 0 0;
}
/*END OF STICKY*/
#wrapper{
position:absolute;
margin: 0 auto;
width:85%;
left:10%;
background-color:#ffffff;
}
.after-box{clear: both; height: 20px;}
.parallax, .parallax2, .parallax3{
position: relative;
float: left;
width: 100%;
/* The image used */
/* Set a specific height */
height: 400px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax{background-image: url(images/santorini.jpg);}
#cta{margin: 2% 0 1% 0;}
.parallax2{background-image: url(images/hotel-infinity-pool-bali.jpg);}
#cta2{margin: 2% 0 1% 0;}
.parallax3{background-image: url(images/landscape-bali.jpg);}
#cta3{margin: 2% 0 1% 0;}
#scroll-down{
left:-9999px;
height:0px;
}
/*end of format*/
/* Homepage*/
/* MAIN*/
#layer1{
position:relative;
height:auto;
float:left;
width:100%;
text-align:center;
margin:0 auto;
margin-top:1%;
vertical-align:middle;
}
.layer3{
position:relative;
float:left;
width:99%;
border:solid 1px #ffffff;
border-radius:10px;
}
/*Destination menu*/
#destinationmenu{
line-height: 25px;
position: relative;
width: 70%;
}
#destionationmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
background-color: #676767;
}
#destionationmenu li{
font-size: normal;
padding: 0;
}
#destinationmenu ul li{
display: inline;
}
#destinationmenu ul ul{
background-color: #d8d8d8;
list-style-type: none;
}
#destionationmenu li li{
}
/*Layer 2*/
#layer2{
position:relative;
float: left;
width: 100%;
height: auto;
border-radius: 10px;
}
#topdestinations{
position:relative;
float:left;
padding: 1%;
width:1%;
list-style-type: none;
display: inline-block;
}
#searchbox{
position: relative;
float:left;
width: 30%;
vertical-align: middle;
padding: 2%;
border-radius: 10px;
}
#searchbox img{width: 25%; height: 15%; z-index: 3; border-radius: 0px !important; }
#layer2destinationright{
position:relative;
float:left;
width:57%;
vertical-align: middle;
margin-left: 2%;
}
@media only screen and ( max-width: 40em ) /* 1000 */
{
#layer2destinationright
{
visibility: hidden;
}
}
/*End of layer 2*/
/*qualityboxs*/
.quality{
position:relative;
float:left;
width: 27%;
min-height: 250px;
display:inline-block;
margin: 2% 0 0 3%;
border-radius: 5px;
padding: 0% 1% 0% 1%;
}
.quality #qualityimg{
position: relative;
float: left;
}
.quality #qualityimg img{
margin-bottom: 2%;
height: 150px;
display: block;
margin-left: auto;
margin-right: auto;}
#qualitycriteria{
position: relative;
float: left;
display: block;
margin-left: auto;
margin-right: auto;
}
/*Other destinations*/
#otherdestinationsbox{
position:relative;
float:left;
left: 0.5%;
margin: 0 auto;
margin-top:1%;
width:99%;
top: 0;
border-radius:10px 10px 0 0;
padding: 0.5% 0 3% 0;
}
.destinationbox1, .destinationbox2, .destinationbox3{
position:relative;
font-size:smaller;
float:left;
min-width:25%;
height: 300px;
margin:1%;
}
/*end of Homepage*/
/*product*/
.btn {
background: #00FF00;
background-image: linear-gradient(to bottom, #00bfff, #2980b9);
-webkit-border-radius: 14;
-moz-border-radius: 14;
border-radius: 14px;
border: none;
color: #ffffff;
font-size: x-large;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.btn:hover {
background: #3cb0fd;
background-image: linear-gradient(to bottom, #3cb0fd, #00bfff);
text-decoration: none;
}
.btn a:visited{color: #ffffff;}
.btn a:active{color: #ffffff;}
#book{
position:absolute;
float: left;
left: 0;
width:98%;
font-size:large;
text-align:right;
height: auto;
padding: 2% 2% 2% 0%;
background-color: #40ff00;
bottom: 0;
border-radius: 0 0 5px 5px;
}
#book a{
color:#ffffff;
font-weight:700;
margin: 0 0 0 2%;
}
#book img{width:7%; vertical-align:text-bottom; padding-left:5px;}
/*End of product*/
/*Category*/
.category{
position:relative;
float:left;
width: 27%;
min-height: 330px;
display: inline-block;
margin: 2% 0 0 3%;
border: 1px solid #d8d8d8;
border-radius:5px;
padding: 0% 1% 0% 1%;
}
.category #catimg img{width: 99.5%; height: 99.5%;}
a .category #book{color: #ffffff; font-weight: 900;}
.category #book{background-color: #00bfff;}
/*End of category*/
/*Features*/
.features{
position:relative;
float:left;
width: 45%;
min-height: 200px;
display: inline-block;
margin: 1% 0 0 2%;
border-radius:5px;
padding: 0% 1% 0% 1%;
font-size: 14px;
}
/*Hotel Collection pages*/
.collection{
position:relative;
float:left;
width: 45%;
height: 430px;
display: inline-block;
margin: 2% 0 0 3%;
border: 1px solid #d8d8d8;
border-radius:5px;
padding: 0%;
}
.collection #text-collection{
position:absolute;
float: left;
left: 0;
text-indent: 10px;
width:98%;
text-align:left;
height: auto;
padding: 2% 2% 2% 0%;
background-color: #ffffff;
top: 0;
border-radius: 5px 5px 0 0;
}
.collection img{border-radius: 5px;}
.collection #book{background-color: #ffffff;}
.collection #book a{color: #848484;}
/* End of Hotel Collection pages*/
/*Footer*/
#footer{
position:relative;
float:left;
left: 0.5%;
margin: 0 auto;
margin-top:1%;
width:99%;
top: 0;
border-radius:10px 10px 0 0;
padding: 0.5% 0 3% 0;
background-color:#d8d8d8;
height: auto;
text-align: center;
}
.footer-content1{
position:relative;
font-size:smaller;
float:left;
min-width:30.33%;
height: 260px;
margin:1%;
}
.footer-content2{
position:relative;
font-size:smaller;
float:left;
min-width:30.33%;
height: 260px;
margin:1%;
border-left: #000000 solid 1px;
}
#footer .footer-content2 li img{width: 50px; height: 50px; position: relative; float: left; margin: 3px; left:10%;}
.footer-content3{
position:relative;
font-size:smaller;
float:left;
min-width:30.33%;
height: 260px;
margin:1%;
border-left: #000000 solid 1px;
}
/*end of Footer*/
/*Newsletter*/
#mc_embed_signup{
border:dashed 1px #000000;
margin:0% 0 3% 3%;
border-radius:10px;
clear:left;
font:14px Helvetica,Arial,sans-serif;
width:250px;
padding:5px;
}
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
#chatbox{
}
#mail-contact{
position:relative;
}
#img.mail-contact{
}
.mail-contact{
float:right;
max-width:25px;
max-height:25px;
}
#scrollToTop{
position:fixed;
float:left;
left: 0.5%;
width:50px;
height:50px;
top:560px;
}
/*Media*/
.media{
position: relative;
float: left;
width: 100%;
}
/*video*/
.video, .gallery{
position:relative;
float:left;
width: 45%;
height: auto;
display: inline-block;
margin: 2% 0 0 3%;
padding: 0%;
z-index: 998;
}
/*photo gallery*/
row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Create four equal columns that floats next to eachother */
.column {
float: left;
width: 30%;
margin: 0% 0% 0% 0.5%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1001;
padding-top: 50px;
left: 10%;
top: 12%;
width: 85%;
height: 80%;
overflow: hidden;
background-color: #d8d8d8;
}
/* Modal Content */
.modal-content {
position: relative;
margin: auto;
padding: 0;
width: 40%;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
/* Hide the slides by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
background-color: #848484;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.caption-container {
text-align: center;
background-color: #848484;
padding: 2px 16px;
color: white;
margin-bottom: 1%;
}
img.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
/*navigation*/
.logo{
position: relative;
float: left;
left: 0;
width: 23%;
display: block;
white-space: nowrap;
}
.navigationbox{
position: relative;
float: left;
width: 75%;
}
.brand{
position: relative;
float: left;
font-family: Freestyle Script, sans-serif;
font-size: xx-large;
font-weight: 700;
}
#nav
{
width: 60%; /* 1000 */
min-width:50%;
font-weight: bolder;
font-size:x-small;
position: relative;
float:left;
left:5.5%;
margin-left: -30em; /* 30 480 */
z-index:999;
margin: auto;
}
#nav > a
{
display: none;
}
#nav li
{
position: relative;
list-style-type:none;
}
#nav li a
{
color: #fff;
font-size:larger;
display: block;
}
#nav li a:active
{
background-color: #d8d8d8 !important;
}
#nav span:after
{
width: 0;
height: 0;
border: 0.313em solid transparent; /* 5 */
border-bottom: none;
border-top-color: #ffffff;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: -0.313em; /* 5 */
}
/* first level */
#nav > ul
{
height: 3.75em; /* 60 */
background-color: #848484;
}
#nav > ul > li
{
width: 20%;
height: 100%;
float: left;
}
#nav > ul > li > a
{
height: 100%;
font-size: 1.5em; /* 24 */
line-height: 2.5em; /* 60 (24) */
text-align: center;
}
#nav > ul > li:not( :last-child ) > a
{
border-right: 1px solid #848484;
}
#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a
{
background-color: #848484;
}
/* second level */
#nav li ul
{
background-color: #d8d8d8;
display: none;
position: absolute;
top: 100%;
}
#nav li:hover ul
{
display: block;
left: 0;
right: 0;
}
#nav li:not( :first-child ):hover ul
{
left: -1px;
}
#nav li ul a
{
font-size: 1.25em; /* 20 */
border-top: 1px solid #d8d8d8;
padding: 0.75em; /* 15 (20) */
}
#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a
{
background-color: #d8d8d8;
}
@media only screen and ( max-width: 40em ) /* 1000 */
{
#nav
{
width: 100%;
position: static;
margin: 0;
}
}
@media only screen and ( max-width: 40em ) /* 640 */
{
html
{
font-size: 75%; /* 12 */
}
#nav
{
position: relative;
top: auto;
left: auto;
bottom:auto;
}
#nav > a
{
width: 3.125em; /* 50 */
height: 3.125em; /* 50 */
text-align: left;
text-indent: -9999px;
background-color: #000000;
position: fixed;
top:0%;
left:0%;
}
#nav > a:before,
#nav > a:after
{
position: absolute;
border: 2px solid #fff;
top: 35%;
left: 25%;
right: 25%;
content: '';
}
#nav > a:after
{
top: 60%;
}
#nav:not( :target ) > a:first-of-type,
#nav:target > a:last-of-type
{
display: block;
}
/* first level */
#nav > ul
{
height: auto;
display: none;
position: absolute;
left: 0;
right: 0;
}
#nav:target > ul
{
display: block;
}
#nav > ul > li
{
width: 100%;
float: none;
}
#nav > ul > li > a
{
height: auto;
text-align: left;
padding: 0 0.833em; /* 20 (24) */
}
#nav > ul > li:not( :last-child ) > a
{
border-right: none;
border-bottom: 1px solid #ffffff;
}
/* second level */
#nav li ul
{
position: relative;
padding: 1.25em; /* 20 */
padding-top: 0;
}
}
/*Hotel search*/
#cta2{
position: relative;
float: left;
width: 47%;
height: 320px;
padding: 1%;
border: 1px solid #d8d8d8;
border-radius: 10px;
margin: 1% 1% 0 0;
}
#video{
position: relative;
float: left;
width: 47%;
height: 320px;
padding: 1%;
border-radius: 10px;
margin: 1% 0 0 0;
}
#countrybox{
position: relative;
float: left;
width: 46.5%;
height: 150px;
padding: 1%;
border: 1px solid #d8d8d8;
border-radius: 10px;
margin: 1% 1% 0 0;
}
#countryboximg{position: relative; float: left;}
#countryboximg img{width: 150px; height: 150px;}
#countrydescription{position: relative; float: left; width: 69%; height: 150px; margin-left: 2%;}
#countryboxtitle{position: relative; float: left; height: 10%; margin: 0 1%;}
#countryboxtitle h2{line-height: 0px;}
#countryboxlist{position: relative; float: left; width: 98%; height: 90%; margin: 0 1%; line-height: 25px;}
ul.arrow-right{list-style-type: none;}
#destinationboxes{
position: relative;
float: left;
width: 60%;
}
#stickyboxes-right{
position: relative;
float: left;
width: 60%;
}
#countrybox2{
position: relative;
float: left;
width: 46.5%;
height: 150px;
padding: 1%;
border: 1px solid #d8d8d8;
border-radius: 10px;
margin: 1% 1% 0 0;
font-size: 8px;
}
#countryboximg2{position: relative; float: left;}
#countryboximg2 img{width: 100px; height: 100px;}
#countrydescription2{position: relative; float: left; width: 34%; height: 100px; margin-left: 2%;}
#countryboxtitle2{position: relative; float: left; height: 10%; margin: 0 1%;}
#countryboxtitle2 h2{line-height: 0px;}
#countryboxlist2{position: relative; float: left; width: 98%; height: 90%; margin: 0 1%; line-height: 25px;}
/*Landingpages*/
/*Titel*/
.hotelname{
font-size: x-large;
color: #00bfff;
}
/*Main Slider*/
#product-images{
position: relative;
float: left;
left: 7%;
width: 98%;
}
#map-landing{
position: relative;
float: left;
width: 10%;
margin-left: 2%;
}
/*End of Main Slider*/
/*layer3-left*/
.layer3-left{
position: relative;
float: left;
width: 75%;
height: auto;
border: none;
}
.layer3-left3{
position: relative;
float: left;
width: 55%;
height: auto;
border: none;
}
/*End of layer3-left*/
/*layer3-right*/
.layer3-right{
position: relative;
float: left;
width: 23%;
height: auto;
margin-left: 1%;
border: 1px solid #d8d8d8;
background-color: #d8d8d8;
}
.layer3-right3{
position: relative;
float: left;
width: 43%;
height: auto;
margin-left: 1%;
border: 1px solid #d8d8d8;
background-color: #d8d8d8;
}
.roomtype{position: relative; left: 2%;}
.roomtype ul{font-size: 12px;}
.roomtype h2{color:#00bfff;}
.roomdetails{display: inline-block;}
#room1 #book{left: -2%; margin-bottom: 2%; position: relative;}
#room2 #book{left: -2%; margin-bottom: 2%; position: relative;}
#room3 #book{left: -2%; margin-bottom: 2%; position: relative;}
#room4 #book{left: -2%; margin-bottom: 2%; position: relative;}
#room5 #book{left: -2%; margin-bottom: 2%; position: relative;}
/*End of layer3-right*/
/*Tab organisation*/
#landing-images-left{
position: relative;
float: left;
width: 35%;
}
#landing-text-right{
position: relative;
float: right;
width: 62%;
margin-left: 1%;
}
/*End of landingpages*/
/*About-us*/
#testimonials{
position:relative;
float:left;
width:99%;
}
/*End of About us*/