@media only screen and (min-width: 400px) {
    .gallery-item, .gallery-icon img { height: 200px; width: auto; }
    .menu-header-container::after,#reserve { top: 154px;  }
    .menu-item { font-size: 1rem; }
    #awards {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        width: 275px;
    }
    #awards a { width: 47%; }
    .indoors { border-right: 2rem solid #6a6c65; }
    .indoors .flex,#landscape .flex {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .indoors img {
        height: 75px;
        width: 30%;
    }
    #landscape img {
        height: 65px;
        margin: auto;
        width: auto;
    }
}

@media only screen and (min-width: 550px) {
    .indoors img { height: 100px; }
    #landscape img { height: 90px; }
}

@media only screen and (min-width: 750px) {
    .flex {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    h2 { padding: 3rem; }
    #promotion { border-bottom: 1px solid #eee; }
    #languages {
        background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), color-stop(0.5, #447f8d), to(#447f8d));
        background: -webkit-linear-gradient(left, transparent 0%, #447f8d 50%, #447f8d 100%);
        background: -moz-linear-gradient(left, transparent 0%, #447f8d 50%, #447f8d 100%);
        background: -o-linear-gradient(left, transparent 0%, #447f8d 50%, #447f8d 100%);
        background: linear-gradient(left, transparent 0%, #447f8d 50%, #447f8d 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00729cbd',endColorstr='#729cbd',GradientType=1);
        border-color: #447f8d;
        border-style: solid;
        border-width: 0 .5rem 0 0;
    }
    #languages, .menu-header-container { position: absolute; }
    #not-frontpage #languages {
        background: #fff;
        border-right: 3px dotted #6a6c65;
        color: #6a6c65;
        padding: 30.2px;
        width: 35.5%;
    }
    #not-frontpage #languages a { color: #6a6c65; }
    #not-frontpage #languages a:hover { border-color: #6a6c65; }
    .menu-header-container {
        background: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(255,255,255,0)), color-stop(0.5, rgba(255,255,255,1)), to(rgba(255,255,255,1)));
        background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
        background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
        background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
        background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff',endColorstr='#ffffff',GradientType=1);
        border-width: 0 .5rem 0 0;
        top: 34px;
    }
    #availability { width: 75%; }
    #engagement { width: 25%; }
    .menu-header { text-align: right; }
    #page-header {
        border-bottom: .1rem solid #6a6c65;
        margin-top: 0;
        right: 0;
    }
    #page-header #logo {
        margin: 0.67em 0;
        margin-left: 35.5%;
        width: 23%;
     }
    #page-header .menu-header-container {
        background: transparent;
        -webkit-filter: none;
        filter: none;
        border-width: 0;
        display: inline-block;
        position: relative;
            top: 0;
        width: 41.5%;
    }
    .menu-header-container::after { display: none; }
    #menu-header {
        background-color: #fff;
        float: right;
    }
    #not-frontpage #reserve, #reserve {
        position: absolute;
            top: -22.5px;
            left: -62.5px;
        -webkit-transform: rotateZ(45deg);
        transform: rotateZ(-45deg);
    }
    #reserve a {
        border-color: #fff;
        border-radius: 0;
        border-style: double;
        border-width: 0 .25rem .25rem 0;
        padding: 50px 50px 10px;
    }
    #page-header-frontpage,#availability,main,#page-footer { top: 0; }
    #page-header-frontpage {
        border-color: #447f8d;
        border-radius: 0 0 50% 0;
        border-style: solid;
        border-width: 0 .5rem .5rem 0;
        height: 100vh;
        width: 100%;
    }
    #logo-frontpage,#logo-frontpage img { margin-top: 2rem; }
    #motto { padding: inherit; }
    #awards {
        background-color: transparent;
        box-shadow: none;
        padding: 0 .5rem 0 0;
        position: absolute;
            bottom: -1rem;
            right: 0;
        text-align: right;
        width: 125px;
    }
    #awards a { opacity: .85; }
    #awards a:hover { opacity: 1; }
    #panorama { width: 50%; }
    .indoors {
        border-right: 0 none;
        position: relative;
    }
    #indoors-rooms { border-bottom: 0 none; }
    #landscape {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    #location {
        background-color: #6a6c65;
        background-image: -webkit-radial-gradient(white 15%,transparent 16%),-webkit-radial-gradient(white 15%,transparent 16%);
        background-image: radial-gradient(white 15%,transparent 16%),radial-gradient(white 15%,transparent 16%);
        background-size: 60px 60px;
        background-position: 0 0,30px 30px;
    }
    #content-header { margin-top: 78px; }
    #content-header-title {
        font-size: 4rem;
       	letter-spacing: 6px;
      	padding: 7rem 0;
      	width: 65%;
    }
    #double-rooms, #family-rooms, #maisonettes { width: auto; }
}

@media only screen and (min-width: 1024px) {
    #awards {
        padding: 0 0 .25rem .5rem;
        width: 150px;
    }
    #panorama { width: auto; }
    #indoors { margin-left: -2rem; }
    .indoors header {
        background-color: #fff;
        background-color: rgba(255,255,255,.3);
        position: absolute;
            top: 0; bottom:0;
            right: 0; left:0;
        -webkit-transition: opacity .3s;
        transition: opacity .3s;
    }
    .indoors header:hover { opacity: 0; }
    .indoors img { height: 150px; }
    #landscape {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        padding-bottom: 0;
    }
    #landscape img {
        height: 100px;
        margin: auto;
        opacity: .8;
        width: auto;
    }
    #landscape img:hover { opacity: 1; }
    #location {
        box-shadow: inset 0 0 1rem #6a6c65;
        margin: 2rem auto;
        padding: 2rem;
    }
    #double-rooms, #family-rooms, #maisonettes { width: 220px; }
    #room-type-description { width: 30%; }
    #room-type-gallery { width: 70%; }
    #map {
        background-color: #eee;
        border-radius: 25% 0 25% 25%;
        box-shadow: .5rem .5rem .5rem .25rem #6a6c65;
        margin: 2rem;
        max-height: 500px;
        padding: 2rem;
        width: 60%;
    }
    #card {
        margin: 2rem;
        width: 40%;
    }
}

@media only screen and (min-width: 1275px) {
    #indoors-rooms { padding: 1rem 1rem 1rem 2rem; }
    #indoors-amenities { padding: 1rem 1rem 1rem 2rem; }
    #landscape div { width: 100%; }
    #landscape img { height: 150px; }
}

@media print {
    * {
        color: #000;
        box-shadow: none;
        text-shadow: none;
        background: transparent;
    }
    html { background-color: #fff; }
    nav { display: none; }
    a[href]::after { content: " (" attr(href) ") "; }
    a[href] {
        color: #06c;
        border: none;
        font-weight: bold;
        text-decoration: underline;
    }
    a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
    abbr[title]::after { content: " (" attr(title) ")"; }
    figure {
        margin-bottom: 1em;
        overflow: hidden;
    }
    figure img { border:1px solid #000; }
}