@charset "UTF-8";

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

html,
body,
div,
header,
footer,
nav,
main,
section {
    box-sizing: border-box;
    /* border: solid black 1px; */
}

body {
    margin: 20px 30px;
    background-color: orange;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: min-content min-content auto min-content;
    grid-template-areas:
        "header"
        "nav"
        "main"
        "footer";
}

a {
    text-decoration: none;
}

header {
    background-color: white;
    grid-area: header;
    height: min-content;
    margin: 0;
    padding-right: 60px;
    padding-left: 60px;
}

main {
    grid-area: main;
    margin: 0;
    
    height: min-content;
}

main img {
    width: 40%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

main p {
    text-align: center;
    font-family: 'Roboto', sans-serif;
}

footer p {
    display: inline-block;
}

h1 {
    margin-left: 70px;
    font-size: 1.5rem;

    font-family: "Raleway", sans-serif;
    /* font-optical-sizing: auto; */
    font-weight: normal;
    font-style: normal;
    color: white;
}

h2 {
    margin-top: 50px;
    margin-bottom: 30px;

    
}

h3 {
    margin-left: 70px;

    font-size: 0.8rem;

    font-family: "Raleway", sans-serif;
    /* font-optical-sizing: auto; */
    font-weight: normal;
    font-style: normal;
    color: white;
}



iframe {
    width: 500px;
    height: 500px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 100px;
}

footer {
    grid-area: footer;
    text-align: center;
    height: min-content;
    margin: 0;
    background-color: orange;
    padding-bottom: 30px;
}

.accreditation {
    font-size: small;
}

.fa-check {
    margin-right: 10px;
}

#top-right {
    display: inline-block;
    float: right;
    margin-top: 20px;
}

#top-right img{
    /* display: block; */
}

.phone {
    position: relative;

}

#phone {
    margin: 0;
}

.phone .img,
.phone .nr {
    display: inline-block;
}

.phone .img {
    padding-left: 20px;
    
}

.phone .nr{
    font-size: 2rem;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: darkblue;
    padding-left: 5px;
    
    /* To center text vertically in div */
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    
}

.BBB {
    display: block;
}

.ctaFrame {
    background-color: white;
    padding-left: 60px;
    padding-right: 60px;
}

#cta {
    background-color: darkslategray;
    background-image: url(/img/background2.png);
    background-size: cover;
    
    display: flex;
    align-items: center;
    /* justify-content: center; */

    padding-left: 60px;
}

#cta div {
    display: inline-block;
}


#ctaLeft {
    
}

.contactForm {
    /* To center the form in the div */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
   
  
}

form {
    
    height: 500px;
    width: 350px;
    background-color: rgb(22, 141, 210);
    margin: 40px;
    display: block;

    /* To center everything in the form */
    text-align: center;
}

label {
    margin: 10px;
}

form h1 {
    font-size: 1.5rem;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding-top: 1.5rem;
    margin: 0;
    
}

form h2 {
    font-size: 1rem;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 300;
    color: white;
    padding-top: 0;
    margin: 0;
    font-style: italic;
    padding-left: 4.5rem;
    padding-right: 4.5rem;
    margin-bottom: 10px;
}

input {
    margin-bottom: 10px;
}






#menuicon,
#menucheckbox {
    display: none;
}

#contact {
    margin-bottom: 50px;
}

#welcome {
    font-size: 2.5rem;
    margin-bottom: 100px;
}

#email {
    margin-bottom: 30px;
}

#address {
    margin-top: 50px;
}


/* ----- Navigation ----- */

nav {
    grid-area: nav;
    height: min-content;
    margin: 0;
    background-color: white;
    font-size: 1rem;
    font-weight: 300;
    font-family: 'Roboto', sans-serif;
}

nav ul {
    /* Both inner and outer lists */
    list-style: none;
    margin: 0 0 0 50px;
    padding: 0;
    display: flex;
    flex-direction: row;
}

nav ul ul {
    /* Only inner list */
    background-color: #3BACB6;
    box-shadow: 3px 3px 16px #999999;
    flex-direction: column;
    position: absolute;
    visibility: hidden;
    margin-left: 0;
}

nav ul li:hover ul {
    /* Show drop-down-meny (inner list) */
    visibility: visible;
}

nav a {
    color: inherit;
    text-decoration: none;
    display: block;
    padding-left: 10px;
    padding-right: 10px;
}

nav a:hover {
    color: #e3eed7;
}

/* Rooms Facilities Styling */

#roomFacilities {
    padding: 20px;
    font-family: 'Roboto', sans-serif;
    width: 50%;
    display: block;
    margin-top: 50px;
    margin-bottom: 100px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.35);
    border-radius: 10px;
    border: 6px solid #305A72;
}

#roomFacilities fieldset {
    background: #FAFAFA;
    margin-bottom: 20px;
    display: grid;
    border: 1px solid #B0CFE0;
}

#roomFacilities legend {
    font-weight: bold;
    font-style: italic;
}

#roomsLeft {
    float: left;
    margin-left: 50px;
}

#roomsRight {
    float: right;
    margin-right: 150px;
}


/* Form */

/* form {
    width: 50%;
    display: block;
    margin-top: 50px;
    margin-bottom: 100px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.35);
    border-radius: 10px;
    border: 6px solid #305A72;
}

li {
    list-style: none;
    margin: 10px;
}

.bookingListItem {
    margin: 0px;
    padding: 0px;
    text-align: left;
}

.radio {
    float: left;
    padding: 5px;
}

.radioText {
    float: left;
}

#booking {
    padding: 20px;
    font-family: 'Roboto', sans-serif;
}

#booking fieldset {
    background: #FAFAFA;
    margin-bottom: 20px;
    display: grid;
    gap: 0.6em;
    white-space: nowrap;
    border: 1px solid #B0CFE0;
}

#booking legend {
    font-weight: bold;
    font-style: italic;
}

#send {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#date {
    grid-template-columns: 1fr 1fr;
}

#customer {
    grid-template-columns: min-content auto;
}

#customer ul {
    padding-left: 0;
}

#send {
    font-size: 1.5em;
    border-radius: 2rem;
    background-color: #305A72;
    color: white;
    padding: 10px 30px;
}

#send:hover {
    background-color: #3BACB6;
} */





@media screen and (max-width:560px) {
    #booking fieldset {
        grid-template-columns: auto;
        gap: 0.2em;
    }
}


/* Media Queries */

@media screen and (max-width:1400px) {
    main img {
        width: 60%;
    }

    picture {
        width: 60%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .accreditation {
        margin-bottom: 60px;
    }

    #roomsLeft {
        margin-left: 0px;
    }

    #roomsRight {
        margin-right: 50px;
    }
}

@media screen and (max-width:1050px) {
    #roomsLeft {
        float: none;
    }

    #roomsRight {
        float: left;
    }
}

@media screen and (max-width:860px) {
    form {
        width: 80%;
    }
}

@media screen and (max-width:700px) {
    main img, picture {
        width: 80%;
    }
}

@media screen and (max-width:570px) {
    iframe {
        width: 300px;
        height: 300px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 100px;
    }
    
    .features ul {
        padding-left: 0px;
    }

    #date {
        grid-template-columns: 1fr;
    } 
}

@media screen and (max-width:460px) {
    img:hover {
        transform: scale(1.1);
        transition: transform 2s;
        z-index: 100;
    }

    header {
        text-align: center;
    }

    h1 {
        margin-left: 0px;
    }

    #roomFacilities {
        width: 80%;
    }

    
    /* Burger Menu */

    nav ul {
        flex-direction: column;
        gap: 0;
    }

    #menuicon {
        background-image: url(/images/menuicon.png);
        width: 24px;
        height: 24px;
        display: inline-block;
        cursor: pointer;
        margin: 10px;
    }

    #menucheckbox~ul {
        display: none;
    }

    #menucheckbox:checked~ul {
        display: flex;
    }

}