@charset "utf-8";
/* CSS Document */

header {
    
    width: 1200px;
    margin: 20px auto 10px auto;
    height:118px;
    
}

#header-table-1,
#header-table-2 {
    
    height:118px;
    
}

#header-table-3,
#header-cont-1 {
    
    height:59px;
    
}

#header-left {
    
    width:20%;
    
}

#header-book-now,
#header-mobile-menu-open,
#header-mobile-menu-close {

    display:none;
    cursor:pointer;
    
}

#header-book-now {
    
    margin-top:5px;    
    
}

#header-mobile-menu-open > svg {
    
    width:32px;
    height:auto;
    
}

#header-mobile-menu-close {
    
    position: absolute;
    right:-2px;
    top:-54px;
    
}

#header-mobile-menu-close > svg {
    
    width:20px;
    height:auto;
    
}

#header-logo > a > img {
    
    width:225px;
    height:117px;
    
}


#header-right {
    
    width:80%;
    
}

#header-strap {
    
    width:65%;
    font-size: var(--text-size-normal);
    
}

#header-language {
    
    width:15%;
    
}

#header-social {
    
    width:20%;
    
}

#header-language-con {
    
    position: relative;
    display:none;
    
}

#language-button,
#header-language-con > ul {
    
    padding:4px 8px 4px 8px;
    width:120px;
    border:0;
    text-align: left;
    font-size: var(--text-size-normal);
    line-height: var(--text-lh-normal-tight);
    
}

#language-button {

    background-color: transparent;
    font-size: var(--text-size-normal);
    
}

#header-language-con > ul {
    
    list-style: none;
    position:absolute;
    top:-8px;
    left:0;
    z-index: 1100;
    
}

#header-language-con > ul > li {
    
    padding:8px 0 8px 0;
    
}

#language-button > img,
#header-language-con > ul > li > a > img {
    
    margin-right:8px;    
    
}

#header-social > a > svg {
    
    height:32px;
    margin-right:8px;
    
}

#header-social > a:last-of-type > svg {
    
    margin-right:0;
    
}

#header-menu {
    
    background-color: #ffffff;    
    
}

#header-menu > nav {
    
    position: relative;   
    
}

#header-menu > nav > ul {
    
    list-style: none; 
    text-transform: uppercase;
    font-size: var(--text-size-normal);
    padding:0;
    margin:0;

}

#header-menu > nav > ul > li {

    display: inline;
    padding: 0 10px 0 10px;
    position: relative;

}

#header-menu > nav > ul > li:last-of-type {

    padding: 0 0 0 10px;

}

#header-menu > nav > ul > li > .plus {

    display: none;
    cursor: pointer;
    position: absolute;
    font-size: 24px;
    right:0;
    top:-1px;
}


#header-menu > nav > ul > li > a {

    height:24px;
    display: inline-block;

}

#header-menu > nav > ul > li > a > .more {

    display: inline-block;

}

#header-menu .sub {
 
    position: relative;
    display: none;
    z-index: 1000;
    
}

#header-menu .sub > ul {

    list-style: none; 
    text-align: left;
    position: absolute;
    left:0px;
    top:7px;
    margin:0;
    padding:4px 8px;
    width:240px;
    font-size: var(--text-size-small);

}

#header-menu .sub > ul > li {

    margin:0;
    padding:4px 0;

}

.menu {

    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);   

}

@media screen and (max-width: 1220px) {

    header {

        width:971px;

    }
    
    #header-strap {

        font-size: var(--text-size-tiny);

    }
    
    #language-button,
    #header-language-con > ul {

        font-size: var(--text-size-small);

    }
    
    #header-social > a > svg {

        height:24px;
        margin-right:4px;

    }
    
    #header-social > a:last-of-type > svg {

        margin-right:0;

    }
    
    #header-menu > nav > ul {

        font-size: var(--text-size-small);

    }
    
    #header-menu > nav > ul > li {

        padding: 0 5px 0 5px;

    }
    
    #header-menu > nav > ul > li:last-of-type {

        padding: 0 0 0 6px;

    }

}

@media screen and (max-width: 1000px) {
    
    header {

        width: 100%;
        margin: 0;
        padding:var(--mobile-padding);
        height:auto;

    }
    
    header table,
    header tbody,
    header tr,
    header td {
        
        display:block;
        
    }
    
    #header-table-1,
    #header-table-2 {

        height:auto;

    }
    
    #header-table-3,
    #header-cont-1 {

        height:auto;

    }
    
    #header-left,
    #header-right,
    #header-strap {

        width:100%;

    }
    
    #header-logo,
    #header-book-now,
    #header-mobile-menu-open {
        
        display:inline-block;
        width:33%;
        vertical-align: top;
        
    }
    
    #header-mobile-menu-close {
        
        display: block;    
        
    }
    
    #header-mobile-menu-open {
        
        text-align: right;    
        
    }
    
    #header-strap {
        
        text-align: center;
        padding: 8px;
        
    }    
    
    #header-logo {
        
        text-align: center;    
        
    }
    
    #header-language,
    #header-social {
        
        width:50%;
        display:inline-block;        
        
    }
    
    #header-language {

        text-align: right;
        
    }
    
    #header-language-con > ul {

        right:0;
        left:auto;

    }
    
    #header-social {

        text-align: left;
        
    }
    
    #header-social > a > svg {

        margin-right:8px;

    }
    
    #header-logo > a > img {

        width:100%;
        height:auto;
        max-width:160px;

    }
    
    #header-menu {
        
        width:256px;
        position:fixed;
        z-index: 1000; 
        right:-257px;
        top:0;
        padding: 64px 16px 8px 8px;
        
    }
    
    #header-menu > nav > ul > li {

        display: block;
        padding: 4px;
        text-align: left;
        font-size: var(--text-size-normal);

    }
    
    #header-menu > nav > ul > li:last-of-type {

        padding: 4px;

    }
    
    #header-menu > nav > ul > li > .plus {

        display: inline-block;

    }
    
    #header-menu > nav > ul > li > a > .more {

        display: none;

    }
    
    #header-menu .sub > ul {

        position: relative;
        left:auto;
        top:auto;
        width:256px;

    }

    .menu {
        
        border:0;
        box-shadow:none;
        background-color: #ffffff;
        
    }

}