.head-left{display: flex; flex-grow: 1; background-color:#fff; position:relative;}
.head-left:before{
    content:''; display: block; position: absolute; height: 201px; width:100%; bottom:0px; left:0px; background-color:#812437;
}
.head-right{display: flex; flex-grow: 1; background-color:#fff; position: relative;}
.head-right:before{
    content:''; display: block; position: absolute; height: 234px; width:100%; top:0px; right:0px; background-color:#eab705;
}
.head-content{width:1224px; background-color:#fff; background-image: url(../images/hero-home-10.jpg); background-size: 100% auto; background-position: center top; background-repeat: no-repeat; aspect-ratio:498/125;}
header{position: relative;overflow: visible; max-height: none; z-index: 2;}
header .container{padding-top:0px; position: absolute; left:0px; right:0px; bottom:0px;}
header nav{position: relative; top:0px; right:0px;}

#Content{margin-top:0px;}

@media screen and (max-width:1224px){
    .head-content{width:100%;}
}

@media screen and (max-width:980px) {
    header .menu-toggle{display: block; height: 42px; width:69px; position: absolute; top:5px; left:40px; transition:all 0.3s ease-in-out; }
    header nav{display:none;}
    
    header .menu-toggle:before{content:'MENU'; color:#2d2d2d; font-weight: 600; font-size: 16px; display: block; width:53px; padding-bottom: 3px; text-align: center;  position: absolute; top:0px; right:16px; transition:all 0.3s ease-in-out;}
    header .menu-toggle:after{content:''; display: block; width:53px;   height: 5px; position: absolute; top:31px; right
        :16px; transition:all 0.3s ease-in-out;}
    
    
    header{transition:all 0.3s ease-in-out; overflow:visible;}
    .body-wrap{ background-color:#fff; transition:all 0.3s ease-in-out; position: relative; z-index: 1}
    #TopContent #mainnav{display: none;}
    
    body.nav-on header .menu-toggle{transform: translateX(426px);}
    body.nav-on .body-wrap{transform: translateX(-450px); }
    body.nav-on header{transform: translateX(-450px); }
    body.nav-on header .menu-toggle:before{content:'CLOSE'; color:#fff;}
    
    
    #mobile-nav{display: block; position:fixed;  top:0px; right:0px; height: 100vh; width:450px; max-width: 100%; overflow-y: auto; overflow-x: hidden; box-shadow: inset rgba(0,0,0,0.4) 0px -1px 1px 2px; padding-top:81px; background-color:#2d2d2d;}
    
    #mobile-nav ul{list-style: none; margin:0px; padding:0px; width:100%; min-height: 100%; text-align: right;}
    #mobile-nav li{margin:0px; padding:0px; border-bottom: 2px solid #f6b730;}
    #mobile-nav .submenu{position: absolute; top:0px; right:100%; width:100%; transition:all 0.3s ease-in-out; background-color:#803022;}
    #mobile-nav .subsubmenu{position: absolute; top:0px; right:100%; width:100%; transition:all 0.3s ease-in-out; background-color:#572218;}
    #mobile-nav a,
    #mobile-nav .no-link{display: inline-block; padding:24px 48px 24px; text-decoration: none;  color:#f6b730; cursor:pointer;  text-transform: uppercase;}
    #mobile-nav .toggle{background-color:#f6b730;}
    #mobile-nav .on > .submenu,
    #mobile-nav .on > .subsubmenu{right:55px; }
    
    #mobile-nav li > ul{position: absolute; top:0px; right:100%; width:100%; height: 100%; min-height: 100vh; transition:all 0.3s ease-in-out; background-color:#115789; padding-top:81px; padding-bottom: 81px; z-index: 2}
    #mobile-nav li > ul ul{background-color:#2d2d2d;z-index: 3;}
    #mobile-nav li > ul ul a{color:#fff;}
    #mobile-nav li > ul ul li{border-bottom-color: #fff;}
    
    #mobile-nav .toggle{position: absolute; margin:18px; z-index: 0; background-image: url(../images/icons/menu-plus-g.svg); background-size: 66%; background-repeat: no-repeat; background-position: center; background-color:#f6b730; transform: translateY(-67px);}
    #mobile-nav .toggle:before,
    #mobile-nav .toggle:after{display: none;}
    #mobile-nav li.on > ul,
    #mobile-nav li > ul li.on > ul{right:55px; }
    #mobile-nav li > ul .toggle{left:55px;}

    #mobile-nav{background-color:#1e0f32; background:linear-gradient(#1e0f32 0%, #000000 100%)}
}

@media screen and (max-width:767px) {
    .body-wrap{padding-top:0px;}
    #Content{padding-top:0px;}

    .head-content{background-size: auto 100%; aspect-ratio: 50/18; }
}