header{padding-bottom: 20px;}
.brand{padding: 25px 20px 0 0;}
.brand img{width: 75%; margin: 0 0 0 auto; display: block;}
ul.xtra-tMenu{margin: 35px 0 0 0; padding: 0; list-style: none; z-index: 1; position: relative; text-align: right;}
ul.xtra-tMenu li{display: inline-block; margin: 0 20px;}
ul.xtra-tMenu li a{color: #000;}
ul.xtra-tMenu li a:hover{color: #dcdcdc;}

.menu-container{ position: relative;}
.menu-container .section{ width: 100%;  height: 500px;}
.menu-container .section:nth-of-type(1){ background: #ffc107;}
.menu-container .section:nth-of-type(2){ background: #ff9800;}
.menu-container ul.toggle{ position: fixed; top: 4%;  right: 11%; width: 50px;  height: 50px; cursor: pointer; z-index: 4; }
.menu-container ul.toggle::before{ content: ''; position: absolute; top: 0;   left: -150%; color: #262626; font-size: 27px; line-height: 50px; transition: .5s;}
.menu-container ul.toggle li{ list-style: none; background: #262626; position: absolute; left: 5%; width: 90%;   height: 3px; transform: translate(0,-50%); transition: .9s;}
.menu-container ul.toggle li:nth-of-type(1){ top: 20%;}
.menu-container ul.toggle li:nth-of-type(2){ top: 50%;}
.menu-container ul.toggle li:nth-of-type(3){ top: 80%;}
.menu-container ul.toggle.active li{ background: #fff;}
.menu-container ul.toggle.active::before{ content: 'Close'; color: #fff;}
.menu-container ul.toggle.active li:nth-of-type(1){ top: 50%; transform: translate(0,-50%) rotate(45deg);}
.menu-container ul.toggle.active li:nth-of-type(2){ top: 50%; opacity: 0;}
.menu-container ul.toggle.active li:nth-of-type(3){ top: 50%; transform: translate(0,-50%) rotate(-45deg);}
.menu-container .fullscreen-menu{ position: fixed; bottom: 100%;  left: 0; width: 100%;  height: 100%; background: #000; transition: .9s; z-index: 3;}
.menu-container .fullscreen-menu.active{ bottom: 0;}
.menu-container .fullscreen-menu ul.menu{ position: absolute; top: 50%;   width: 100%;  text-align: center;  transform: translateY(-50%);}
.menu-container .fullscreen-menu ul.menu li{ list-style: none; position: relative;}
.menu-container .fullscreen-menu ul.menu li a{ display: inline-block; position: relative; padding: 5px 20px; background: transparent; color: #fff; text-decoration: none; font-size: 24px;}
.menu-container .fullscreen-menu ul.menu li .topItem{ display: inline-block; position: relative; padding: 5px 20px; background: transparent !important; color: #fff; text-decoration: none; font-size: 24px;}
.menu-container .fullscreen-menu ul.menu li .topItem button{background: transparent; color: #fff; outline: none; border: none; }
.menu-container .fullscreen-menu ul.menu li a:hover{ background: #ffc107}

.sub-menu{margin-bottom: 20px;}
.sub-menu li a{font-size: 20px !important;}







/*==============================================================================
                              Start Mobile CSS
===============================================================================*/
/* ================== Mobile Menu Change Brake Point ================== */
/* @media only screen and (max-width: 991px) { */
@media(min-width:320px) and (max-width:1080px){
  /* ================== Mobile Base CSS ================== */
.menu-container-out{position: relative;}
.menu-container ul.toggle {position: absolute; right: 0; top: -50px;}
.brand img{margin: 0 auto 0 0; width: 50%;}
.brand {padding: 20px 0px 0 20px;}

  
}