#mgmenu,
#mgmenu ul,
#mgmenu ul li,
#mgmenu ul li a,
#menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#clickarea, #clickarea2, #searchbox, #sansearch:before ,#sansearch:after, #mgmenu > ul > li.has-sub > a:after, #mgmenu > ul > li.has-sub > a:before, #mgmenu ul ul li,#mgmenu ul ul li.has-sub > a:before,#menu-button, #menu-button:before, #menu-button:after,#mgmenu .submenu-button:before,#mgmenu ul ul,#mgmenu ul.open ul{
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}

#clickarea,#clickarea2{top: 9px; right:12px; cursor: pointer;z-index:9999;width: 55px;height: 50px; position: absolute; background:url("../graphics/spacer.png")repeat; }
#clickarea{display:none;}
#searchbox {opacity:0;margin-top:-50px; position:relative; width:100%; z-index:8000;}
#searchbox.search-opened {opacity:1;margin-top:0px;}

#sansearch {position: absolute; top: 15px; right:15px;}
#sansearch:before{position: absolute; top: 0px; right:0px; content: ''; background: transparent; width: 17px; height:17px; border-radius: 17px; -moz-border-radius: 17px; -webkit-border-radius: 17px; border:2px solid #ffffff; }
#sansearch:after{position: absolute; top: 20px; left: -6px; content: '';  background: #ffffff; height:2px; width:11px; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);}
#header.scroll #sansearch:before, .std #sansearch:before{border-color:#5f636a;}
#header.scroll #sansearch:after, .std #sansearch:after{background:#5f636a;}

#mgmenu:after,
#mgmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

#menu-button {
display: none;
}

#mgmenu  > ul > li{
float: right;
margin-right:6%;
}

#mgmenu  > ul > li:nth-child(1){margin-right:150px;}

#mgmenu > ul > li > a {
letter-spacing: 0.3px;
text-decoration: none;
padding-bottom:17px;
}

#mgmenu ul ul {position: absolute;left: -9999px;}
#mgmenu ul ul li {height: 0;}
#mgmenu ul ul > li:hover > ul{left: 130px;}
#mgmenu > ul> li:hover > ul{left: auto;}
#mgmenu > ul ul li a {
border-bottom: 1px solid rgba(150, 150, 150, 0.15);
padding: 15px 5px 15px 15px;
width: 245px; 
font-size:13.5px;
line-height:12px;
letter-spacing: 0.2px;
text-decoration: none;
text-align:left;
color: #cccccc;
-webkit-transition: background .25s, color .25s; transition: background .25s, color .25s;
}


#header.scroll #mgmenu > ul ul li a {
color: #cccccc;}

#mgmenu > ul ul li a:hover,  #mgmenu > ul ul li a:active, #header.scroll #mgmenu > ul ul li a:hover,  #header.scroll #mgmenu > ul ul li a:active {color:#ffffff;}
	

#mgmenu ul ul ul {margin-left: 115px; top: 0; } 
#mgmenu > ul ul ul li a { padding: 15px 15px 15px 15px;}

#mgmenu ul ul{
-webkit-transition: background .25s; -moz-transform: background .25s; -o-transition: background .25s; transition: background .25s;
background:rgba(8, 9, 9, 0.7);
}

#mgmenu li:hover > ul > li{
height: 42px;
opacity:1;
}

#mgmenu ul ul li:hover > a,#header.scroll #mgmenu ul ul li:hover > a{background:rgba(112, 112, 115, 0.6);}

#header.scroll #menu-button,#header.scroll #menu-button:after, #header.scroll #menu-button:before, .std #menu-button,.std  #menu-button:after, .std  #menu-button:before {background:#5f636a;}

@media screen and (max-width: 1580px){
#mgmenu  > ul > li{margin-right:5%;}
#mgmenu  > ul > li:nth-child(1){margin-right:90px;}
}

@media screen and (max-width: 1380px){
#mgmenu  > ul > li{margin-right:4%;}
#mgmenu  > ul > li:nth-child(1){margin-right:80px;}
}

@media screen and (min-width: 1251px){
#clickarea2:hover >  #sansearch:before{border-color:#21a7e0;}
#clickarea2:hover >  #sansearch:after,  #clickarea:hover > #menu-button, #clickarea:hover > #menu-button:before, #clickarea:hover > #menu-button:after {background-color:#21a7e0;}
#mgmenu > ul > li:hover > a:after {width:100%;}
}

@media screen and (max-width: 1250px){
#mgmenu ul ul{background-color:transparent;}
#mgmenu {
max-width:330px;
overflow-y:auto;
position: fixed;
right:0px;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
background:rgba(8, 9, 9, 0.85);
top:73px;
height:0;
opacity:0;
}



#mgmenu::-webkit-scrollbar {
display: none;
}

#mgmenu ul ul > li:hover > ul{left: auto;}
#mgmenu ul {display: flex;flex-direction: column-reverse;}
#mgmenu ul ul, #mgmenu ul ul ul{flex-direction: column;}
#mgmenu ul li {width: 100%;border-top: 1px solid rgba(120, 120, 120, 0.2);}
#mgmenu ul ul li,#mgmenu li:hover > ul > li {height: auto;}
#mgmenu ul li a,#mgmenu ul ul li a, ul ul ul li a{width: 100%;border-bottom: 0;}
#mgmenu ul ul ul li a {padding-left: 30px;}
#mgmenu ul ul li a {color: #ffffff;background: none;}
#mgmenu ul ul,
#mgmenu ul ul ul,
#mgmenu.align-right ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left;
}

#mgmenu > ul > li.has-sub > a:after,
#mgmenu > ul > li.has-sub > a:before,
#mgmenu ul ul > li.has-sub > a:after,
#mgmenu ul ul > li.has-sub > a:before {
display: none;
}

#menu-button, #menu-button:before, #menu-button:after {
display: block;
width: 30px;
height: 2px;
background-color: #fff;
position: absolute;
cursor: pointer;
}

#mgmenu.main-menu-opened{height:100%; opacity:1; display:block;}
#menucontents.open {height:auto;}

#mgmenu > ul > li > a {
padding: 20px; text-align:center;}

#menu-button {
top: 26px;
right: 15px;
height: 2px;
width: 30px;
background: #ffffff;
z-index:9998;
}
#menu-button:after {top: 10px;content: '';}
#menu-button:before {top: -10px;content: '';}
#clickarea{display:block;}
#clickarea2{ right:68px;}
#menu-button.menu-opened, #header.scroll #menu-button.menu-opened{background-color: transparent;}
 
#menu-button.menu-opened:after {
background: red;
-moz-transform: translateY(-10px) rotate(-45deg);
-ms-transform: translateY(-10px) rotate(-45deg);
-webkit-transform: translateY(-10px) rotate(-45deg);
transform: translateY(-10px) rotate(-45deg);
}

#menu-button.menu-opened:before {
background: red;
-moz-transform: translateY(10px) rotate(45deg);
-ms-transform: translateY(10px) rotate(45deg);
-webkit-transform: translateY(10px) rotate(45deg);
transform: translateY(10px) rotate(45deg);
}



#header.scroll #menu-button.menu-opened:before, #header.scroll #menu-button.menu-opened:after{
background: red;
}

#mgmenu .submenu-button {
position: absolute;
z-index: 9999;
right: 0;
top: 0;
display: block;
height: 53px;
width: 46px;
cursor: pointer;
}

#mgmenu ul ul .submenu-button {height: 42px; width: 34px;}
#mgmenu .submenu-button:before {
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  content: '';
  display: inline-block;
  height: 7px;
  padding: 2px;
  position: absolute;
  right: 20px;
  top: 20px;
  transform-origin:100% 50%;
  transform: rotate(-45deg) translateY(-50%);
  transition: all 0.15s ease-in-out;
  width: 7px;
}
#mgmenu ul ul .submenu-button:before {right:15px;}
#mgmenu .submenu-button.submenu-opened:before {transform: rotate(45deg); top: 22px;}

#mgmenu ul ul{height: 0px;}
#mgmenu ul.open ul{height: auto;}
#mgmenu > ul > li.has-sub > a {padding-right: 20px;}

#clickarea2.search-opened{margin-right:-55px;}
}

@media screen and (max-width: 600px) {
#mgmenu {max-width:600px;}
}

#mgmenu.search-opened{opacity:0;margin-top:-50px;}

#sansearch.search-opened:before {
background: red;
height: 2px;
width: 30px;
right:-6px;
-moz-transform: translateY(11px) rotate(-45deg);
-ms-transform: translateY(11px)  rotate(-45deg);
-webkit-transform: translateY(11px)  rotate(-45deg);
transform: translateY(11px)  rotate(-45deg);
border:0;
border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; 
}
#clickarea.search-opened{margin-right:-55px;opacity:0;}

#header.scroll  #sansearch.search-opened:after{
background: red;
height: 2px;
width: 30px;
left:-24px;
-moz-transform: translateY(-9px)  rotate(45deg);
-ms-transform: translateY(-9px)   rotate(45deg);
-webkit-transform: translateY(-9px)    rotate(45deg);
transform: translateY(-9px)    rotate(45deg);
}