@media all and (min-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) { #gruemenu, #gruemenu ul, #gruemenu ul li, #gruemenu ul li a, #gruemenu #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; /*z-index:999;*/ font-size: 16px; float:right;} #gruemenu #menu-button { display: none;} #gruemenu { width: auto; z-index:99; } #gruemenu > ul { padding:0; margin:0; float:left; z-index:0;} #gruemenu > ul > li {float: left; display: inline-block;} #gruemenu > ul > li a {background:none} #gruemenu > ul > li > a { padding:0 10px; height:40px; line-height:40px; text-transform:uppercase; font-size:16px; font-weight:600; text-decoration: none; text-transform:} #gruemenu > ul > li:hover > a, #gruemenu > ul > li > a:hover, #gruemenu > ul > li.active > a { background: rgba(0, 0, 0, 0.1); border-radius:3px;} #gruemenu > ul > li.has-sub > a {/*padding-right: 38px;*/} #gruemenu > ul > li.has-sub > a::after {/*content: ""; position: absolute; width: 0; height: 0; border: 6px solid transparent; right: 14px; top: 17px;*/} #gruemenu > ul > li.has-sub.active > a::after, #gruemenu > ul > li.has-sub:hover > a {} #gruemenu ul ul { position: absolute; left: -9999px; top: auto; padding-top: 6px; z-index:999; -webkit-transition: top 0.2s ease; -moz-transition: top 0.2s ease; -ms-transition: top 0.2s ease; -o-transition: top 0.2s ease; transition: top 0.2s ease;} #gruemenu:after, #gruemenu > ul:after {content: ".";display: block;clear: both; visibility: hidden; line-height: 0; height: 0;} #gruemenu > ul > li > ul::after { content: ""; position: absolute; width: 0; height: 0; border: 5px solid transparent; top: -4px; left: 20px;} #gruemenu ul ul ul::after {content: "";position: absolute; width: 0; height: 0; border: 5px solid transparent; top: 11px; left: -4px;} #gruemenu > ul > li > ul {top:120px;} #gruemenu > ul > li > ul {top:120px;} #gruemenu > ul > li:hover > ul {top: 37px;left: 0;} #gruemenu.align-right > ul > li:hover > ul {left: auto; right: 0;} #gruemenu ul ul ul {padding-top: 0;padding-left: 6px;} #gruemenu ul ul > li:hover > ul {left: 240px;top: 0;} #gruemenu ul ul li a { text-decoration: none; padding: 11px 25px; width: 240px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.1), -1px 1px 1px rgba(0, 0, 0, 0.1);} #gruemenu > ul > li > ul::after { position: absolute; display: block;} #gruemenu ul ul li.has-sub > a::after { content: ""; position: absolute; width: 0; height: 0; border: 4px solid transparent; right: 17px; top: 14px;} #gruemenu ul ul li.hover > a, #gruemenu ul ul li.active > a { background-color:#3a95ce!important; color:#ffffff!important;} #gruemenu ul ul li.has-sub a:hover{ background-color:#3a95ce!important; color:#ffffff!important;} #gruemenu ul ul li:hover > a{ background-color:#3a95ce!important; color:#ffffff!important;} #gruemenu ul ul li.has-sub.active > a:after, #gruemenu ul ul li.has-sub:hover > a:after{ border-left-color:#ffffff!important;} } @media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) { #gruemenu, #gruemenu ul, #gruemenu ul li, #gruemenu ul li a, #gruemenu #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; z-index:9999; font-size: 14px; /*background:#3a94ce;*/ color:#FFF;} #gruemenu > ul { display: none; } #gruemenu > ul.open { display: block; border-top: 1px solid rgba(0, 0, 0, 0.1); } #gruemenu > ul > li{float: none;display: block;} #gruemenu > ul > li > a {padding:10px 20px; border-right: 0; background:none; font-weight:bold;} #gruemenu > ul > li:hover > a, #gruemenu > ul > li.active > a {background: rgba(0, 0, 0, 0.1);} /*#gruemenu #menu-button {display: table; text-decoration: none; padding: 18px 25px 18px 25px;text-transform: uppercase;letter-spacing: 1px; cursor: pointer; text-indent:-9999px;}*/ #gruemenu #menu-button {display: table; text-decoration: none; padding:15px 25px;text-transform: uppercase;letter-spacing: 1px; cursor: pointer; text-indent:-9999px; background-color:#3a95ce;} #gruemenu ul ul, #gruemenu ul li:hover > ul, #gruemenu > ul > li > ul, #gruemenu ul ul ul, #gruemenu ul ul li:hover > ul {left: 0;right: auto;top: auto;width: 100%;padding: 0;position: relative;text-align: left;} #gruemenu ul ul li {width: 100%;} #gruemenu ul ul li a {width: 100%;box-shadow: none;padding:10px 10px 10px 40px;} #gruemenu ul ul ul li a { padding-left: 60px;} #gruemenu ul ul ul ul li a{ padding-left: 80px;} #gruemenu ,#gruemenu ul li:first-child > a, #gruemenu ul ul li:first-child > a, #gruemenu ul ul li:last-child > a {border-radius: 0!important;} /*#gruemenu #menu-button::after {display: block; content: ''; position: absolute; height: 3px; width: 22px; border-top: 2px solid rgba(0, 0, 0, 0.1); border-bottom: 2px solid rgba(0, 0, 0, 0.1); right: 25px;top: 18px;} #gruemenu #menu-button::before { display: block; content: ''; position: absolute; height: 3px; width: 22px; border-top: 2px solid rgba(0, 0, 0, 0.1); right: 25px; top: 28px;} */ #gruemenu #menu-button::before{font-family: "FontAwesome"; position:absolute; content:"\f039"; color:#ffffff; left:9px; top:8px; color:#ffffff; font-size:30px; z-index:1001; text-indent:0; border:none!important;} #gruemenu #menu-button::after{border:none!important;} #gruemenu > ul > li.has-sub > a::after, #gruemenu ul ul li.has-sub > a::after {display: none;} }