/* imports */
@import url(https://fonts.googleapis.com/css?family=Raleway:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic);

/* main styles */
* { margin:0; padding:0; box-sizing:border-box;}
html body{ width:100%; height:auto;}
h1 { font-family:'Open Sans'; font-weight:300;}
h2, h3, h4, h5 { font-family:'Raleway'; font-weight:500;}
a { color:inherit; text-decoration:none;}
.bold { font-weight:600;}

/* specific styles */
/* slider image */
#outer-img { max-height:1000px; overflow:hidden; display:block;}
#outer-img img { display:block; min-width:100%; width:auto; min-height:100%;}
/* main */
header { position:absolute; top:0; left:0; width:100%; height:900px; display:block; z-index:1;}
section { position:relative; width:100%; height:auto; display:block;}
footer { position:relative; display:block; width:100%; min-height:50px; height:auto; background-color:black; color:white; text-align:center;} 

/* header - top */
.top { width:90%; height:auto; margin:auto;}
.menu { text-align:right; margin:0; color:white; font-family:'Raleway'; font-weight:500;}
.menu:nth-child(1) { margin-top:2em; font-size:0.9em;}
.menu:nth-child(2) { text-transform:uppercase; font-size:1em;}
.menu:nth-child(2) ul li { background-color:transparent;}
.menu:nth-child(2) ul li:hover { background-color:#103a58; -webkit-transition:all ease 0.5s; transition:all ease 0.5s;}
.menu ul li { display:inline-block; margin:0.25em; padding:0.5em;}
/* header - center */
.center { width:90%; height:auto; margin:12em auto; text-align:center;}
.center h1 { color:white; font-size:3em; margin-top:0.5em;}
/* header - bottom */
.bottom { max-width: 1225px; margin:6em auto; }

/* section styles */
.wrapper { width:85%; height:auto; margin:auto;}
.intro { text-align:center; margin-bottom:2em;}
.intro h1 { font-size:2.2em; text-transform:uppercase;}
.intro h2 { font-size:1em; line-height:1.5em; margin:1em 0;}
.border { width:85%; margin:auto; border-bottom:1px solid lightgray;}
/* flexbox */
.row { display:flex; flex-direction:row; flex-wrap:wrap;}
.col { flex:1 1 8%; margin:0 0.5em;}
.col:nth-child(1) { margin-left:0;}
.col:nth-child(3) { margin-right:0;}
.col-span-1 { flex-basis:30%}
.col-span-2 { flex-basis:40%; margin:3em 0.5em;}
.col-span-3 { flex-basis:8%; padding:0.5em; border:1px solid white; color:white;}
/* dropdown menu's */
.col-span-3:nth-child(1) { margin-right:0; background-color:white; color:#103a58;} 
.col-span-3:nth-child(2) { margin-left:0; max-width:40px; border-left:none;}
.col-span-3:nth-child(3) { margin-right:0.5em;}
.col-span-3:nth-child(8) { background-color:white; color:#103a58;}
/*.dropdown-menu { text-align:center; font-size:0.9em;} 
.dropdown-menu h3 { font-weight:500;}*/
.col-span-3:nth-child(1) .dropdown-menu h3, .col-span-3:nth-child(8) .dropdown-menu h3 { font-weight:600;}
.hotel-btn { position:absolute; margin:0.3em 0.2em; width:1em; height:1em; background:transparent; border-top:0.2rem solid white; border-right:0.2rem solid white; box-shadow:0 0 0 lightgray; -webkit-transition:all 200ms ease; transition:all 200ms ease; -webkit-transform: translate3d(0, -50%, 0) rotate(-225deg); transform: translate3d(0, -50%, 0) rotate(-225deg); cursor:pointer;}
.hotel-btn:hover { border-top:0.2rem solid white; border-right:0.2rem solid white; box-shadow:0.15rem -0.15rem 0 #103a58;}
/*.dropdown { display:none; position:relative; width:; margin:1em 0 0 0; padding:; font-family:'Raleway'; font-weight:500; font-size:0.9em; line-height:1.5em;}
.dropdown.on { display:block;}*/
/* choose hotel dropdown */
.menu-2 ul li { list-style-type:none;}
/* history */
#history { width:100%; height:auto; margin:auto; padding:5em 0;}
.image { position:relative;}
.image img { display:block; margin:0; width:100%;}
.info { border-left:1px solid lightgray; border-bottom:1px solid lightgray; border-right:1px solid lightgray;}
.info-intro { padding:1.25em 0.75em 0 0.75em;}
.info-intro h3 { font-size:1.1em;}
.info-about { padding:0.75em 0.75em;}
.info-about h3 { font-size:0.825em; line-height:1.4em;}
.info h4 { font-size:0.8em; font-weight:600; color:#103a58;}
.check-mark { display:inline-block; max-width:15px; height:15px; margin:0.2em 0;}
.check-mark img { width:120%; background-color:#103a58; padding:0.15em; margin:-0.2em 0;}
/* about */
#about { width:100%; height:auto; margin:auto; padding:5em 0;}
.about-image { width:100%; height:auto;}
.about-image img { width:100%;}
/* contacts */
#contacts { width:100%; height:auto; padding:5em 0 5em 0;}
/* google maps specifics */
.map-wrapper { width:100%; height:500px; position:relative; display:block; background-color:lightgray;}
#map-canvas { width:100%; height:100%;}
#iw_container .iw_title { font-size:16px; font-weight:bold;}
.iw_content { padding:15px 15px 2px 0;}
/* end - google maps specifics */
.contacts-info { margin:2em 0; font-size:0.95em; line-height:1.4em;}
#contact-area { width:100%; margin:0 0 2em 0;}
label { color:black !important; font-weight:500; font-size:0.85em;}
#contact-area input { width:100%; height:auto; min-height:2em; margin:0 0 1em 0; border:1px solid black; border-radius:2px;}
#contact-area textarea { width:100%; height:10em; border:1px solid black; border-radius:2px;}
#contact-area textarea:focus, #contact-area input:focus { opacity:0.5; border-color:lightgray;}
#contact-area input.submit-button { width:100px; float:right; margin:1em 0 0 0; background-color:#103a58; border:none; color:white; font-family:'Raleway'; font-weight:500; font-size:1em; cursor:pointer; border-radius:2px;} 
#contact-area input.submit-button:hover { border:none; background-color:lightgray;}
form { font-family:'Raleway'; font-size:0.9em; font-weight:500; line-height:1.4em; margin-top:1.5em;}
footer .wrapper { padding:1em 0 0 0;}

.dropbtn {
    background-color: transparent;
    color: white;
    border: none;
    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
    z-index: 10001;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 5000000;
    text-align: left;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

#booking-container{font-family: 'Open Sans';text-align: center;height: 75px;}
#booking-container .hotelpicker_div{width: 35%}
#booking-container .datepicker_div,
#booking-container .book{width: 20%}

#booking-container .datepicker_div,
#booking-container .hotelpicker_div{
    float: left;
    border: 2px solid #00507a;
    height: 75px;
    background-color: aliceblue;
    margin: 0 5px;
    font-weight: 600;
    font-size: 1.2em;
    letter-spacing: 0.015em;
    color: #00507a;
    cursor: pointer;
    position:relative;
}

#booking-container .datepicker_div .date_div,
#booking-container .hotelpicker_div .date_div{
    padding: 0.5em;
}

#booking-container .hotelpicker_div .select_div{
    margin-top: 1em;
    border: 2px solid #00507a;
    background-color: aliceblue;
    position:relative;
    z-index: 10;
}

#booking-container .hotelpicker_div .select_div:before{
    display: block;
    width: 1px;
    content: " ";
    font-size: 0;
    margin: -8px auto 0 auto;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid #00507a;
}

#booking-container .hotelpicker_div .select_div .hotel_row {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

#booking-container .hotelpicker_div .select_div .hotel_row:hover {
    color: aliceblue;
    background-color: #00507a;
}

#booking-container .datepicker_div .book-description,
#booking-container .hotelpicker_div .book-description{
    font-size: 0.8em;
}

#booking-container .book{
    float: left;
    padding: 0.5em;
    border: 2px solid #00507a;
    height: 75px;
    background-color: dodgerblue;
    color: white;
    margin: 0 5px;
    padding-top: 24px;
    font-weight: 600;
    font-size: 1.2em;
    letter-spacing: 0.015em;
    text-transform: uppercase;
    cursor: pointer;
    position:relative;
}

/* DATEPICKER */

#datepicker{
    width: 69%;
    margin: 15px auto;
    position:relative;
    z-index:15;
}

.ui-datepicker {
    width: 100% !important;
    color: rgb(0, 105, 151);
    background-color: white !important;
}

.ui-datepicker table td a,
.ui-datepicker table td span{
    text-align: center;
}

.dp-highlight .ui-state-default {
    background: #006997;
    color: #FFF;
}

/* JOBS */

.btn-jobs{
    background-color: #103a58;
    padding: 1em;
    color: white;
    margin-right: 0.5em;
    float: left;
    margin-top: 1em;
}

/* responsive styles specifications */
/* Media Queries */
@media all and (max-width:1280px) {
    .center { margin:9em auto;}
    .col-span-3 { flex-basis:25%; margin:0.5em 0.5em;}
    .col-span-3:nth-child(1) { margin-left:0.5em; flex-basis:21%;}
    #booking-container{width: 80%;margin: 0 auto;}
}

@media all and (max-width:1000px) {
    #booking-container .hotelpicker_div,
    #booking-container .book{width: 98%;margin:0 1%;}
    #booking-container .datepicker_div{width: 48%;margin:1%;}
    #booking-container .hotelpicker_div .select_div {
        margin-top: 0.7em;
    }
    #booking-container .hotelpicker_div .select_div .hotel_row {
        padding-top: 0.7em;
        padding-bottom: 0.7em;
    }
    #datepicker{margin:18% auto;}
}

@media all and (max-width:960px) {
    .center { margin:7em auto;}
    .col-span-3 { flex-basis:40%;}
    .col-span-3:nth-child(1) { flex-basis:34%;}
}

@media all and (max-width:768px) {
    .col { margin:1em 0;}
    .col-span-1 { flex-basis:100%;}
    .col-span-2 { flex-basis:100%;}
    .col-span-3 { margin:0.5em;}
    .col-span-2:nth-child(2) .contacts-info { margin:-2em 0 1em 0;}
    #contact-area { margin:0 0 2em 0;}
    div.slogan img{width: 80%;}
}

@media all and (max-width:460px) {
    .center { margin:5em auto;}
    .dropdown-menu h3 { font-size:1em;}
    .no-mobile {display:none !important;}
    #datepicker {
        margin: 45% auto;
    }
}