#menu, #menu ul, #menu ul li, #menu ul li a, #menu #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:1000; } #menu:after, #menu > ul:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #menu #menu-button { display: none; } #menu { width: auto; /*background: #menu;*/ } #menu > ul { /*box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.05);*/ text-align:center; } #menu.align-right > ul > li { float: right; } #menu > ul > li { float: left; display: inline-block; } #menu.align-center > ul { float: none; } #menu.align-center > ul > li { float: none; } #menu.align-center ul ul { text-align: left; } #menu > ul > li > a { display: block; padding: 8px 18px 13px 18px; text-decoration: none; color: #323233; transition:0.5s; font-size:15px; } #menu > ul > li:hover > a, #menu > ul > li > a:hover, #menu > ul > li > a.active { background:transparent; color: #007D3B; transition:0.5s; } @media only screen and (max-width: 1024px) { #menu > ul > li > a { padding: 20px 6px 14px 6px; border-right: 1px solid rgba(80, 80, 80, 0.12); text-decoration: none; font-size: 14px; color: #ffffff; /*text-transform: uppercase;*/ letter-spacing: 1px; font-weight:500; transition:0.5s; } } #menu > ul > li.has-sub > a { padding-right: 45px; z-index:1000; } /*#menu > ul > li.has-sub > a::after { content: ""; position: absolute; width: 0; height: 0; border: 6px solid transparent; border-top-color: #4D4948; right: 17px; top: 19px; } #menu > ul > li.has-sub.active > a::after, #menu > ul > li.has-sub:hover > a { border-top-color: #ffffff; }*/ #menu ul ul { position: absolute; left: -9999px; top: 60px; padding-top: 6px; font-size: 16px; opacity: 0; -webkit-transition: bottom 0.2s ease, opacity 0.2s ease-in; -moz-transition: bottom 0.2s ease, opacity 0.2s ease-in; -ms-transition: bottom 0.2s ease, opacity 0.2s ease-in; -o-transition: bottom 0.2s ease, opacity 0.2s ease-in; transition: bottom 0.2s ease, opacity 0.2s ease-in; } #menu.align-right ul ul { text-align: right; } #menu > ul > li > ul::after { content: ""; position: absolute; width: 0; height: 0; border: 5px solid transparent; border-bottom-color: #007D3B; top: -4px; left: 20px; } #menu.align-right > ul > li > ul::after { left: auto; right: 20px; } #menu ul ul ul::after { content: ""; position: absolute; width: 0; height: 0; border: 5px solid transparent; border-right-color: #007D3B; top: 11px; left: -4px; } #menu.align-right ul ul ul::after { border-right-color: transparent; border-left-color: #ffffff; left: auto; right: -4px; } #menu > ul > li > ul { top: 120px; } #menu > ul > li:hover > ul { top: 36px; left: 0; opacity: 1; } #menu.align-right > ul > li:hover > ul { left: auto; right: 0; } #menu ul ul ul { padding-top: 0; padding-left: 6px; } #menu.align-right ul ul ul { padding-right: 6px; } #menu ul ul > li:hover > ul { left: 295px; top: 0; opacity: 1; } #menu.align-right ul ul > li:hover > ul { left: auto; right: 100%; opacity: 1; } #menu ul ul li a { text-decoration: none; font-weight: 500; /* padding: 12px 25px;*/ padding: 10px 25px; width: 200px; color: #fff; /*background-color: rgba(0,0,0, 0.8);*/ background:#007D3B; text-align: left; font-size: 14px; text-transform:none; padding:13px; border-bottom:1px dotted #fff; 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); transition:0.5s; } #menu ul ul li:hover > a, #menu ul ul li.active > a { color: #fff; background-color:#045d2e; transition:0.5s; } #menu ul ul li:first-child > a { border-top-left-radius: 3px; border-top-right-radius: 3px; } #menu ul ul li:last-child > a { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } #menu > ul > li > ul::after { position: absolute; display: block; } #menu ul ul li.has-sub > a::after { content: ""; position: absolute; width: 0; height: 0; border: 4px solid transparent; border-left-color: #fff; right: 17px; top: 14px; } #menu.align-right ul ul li.has-sub > a::after { border-left-color: transparent; border-right-color: #fff; right: auto; left: 17px; } #menu ul ul li.has-sub.active > a::after, #menu ul ul li.has-sub:hover > a::after { border-left-color: #fff; } #menu.align-right ul ul li.has-sub.active > a::after, #menu.align-right ul ul li.has-sub:hover > a::after { border-right-color: #333333; border-left-color: transparent; } @media all and (max-width: 800px), 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) { #menu { background: #00adee; display: none; } .cssmenu_m { padding:0; } #menu > ul { display: none; } #menu > ul.open { display: block; border-top: 1px solid rgba(0, 0, 0, 0.1); } #menu.align-right > ul { float: none; } #menu.align-center > ul { text-align: left; } #menu > ul > li, #menu.align-right > ul > li { float: none; display: block; } #menu > ul > li > a { padding: 18px 25px 18px 25px; border-right: 0; text-align: left; } #menu > ul > li:hover > a, #menu > ul > li.active > a { background: rgba(0, 0, 0, 0.1); } #menu #menu-button { display: block; text-decoration: none; font-size: 14px; font-weight: normal; color: #fff; padding: 13px 25px 13px 25px; text-transform: uppercase; letter-spacing: 1px; background: url('images/bg.png'); cursor: pointer; } #menu ul ul, #menu ul li:hover > ul, #menu > ul > li > ul, #menu ul ul ul, #menu ul ul li:hover > ul, #menu.align-right ul ul, #menu.align-right ul li:hover > ul, #menu.align-right > ul > li > ul, #menu.align-right ul ul ul, #menu.align-right ul ul li:hover > ul { left: 0; right: auto; top: auto; opacity: 1; width: 100%; padding: 0; position: relative; text-align: left; } #menu ul ul li { width: 100%; } #menu ul ul li a { width: 100%; box-shadow: none; padding-left: 25px; } #menu ul ul ul li a { padding-left: 45px; } #menu ul ul li:first-child > a, #menu ul ul li:last-child > a { border-radius: 0; } #menu #menu-button::after { display: block; content: ''; position: absolute; height: 3px; width: 22px; border-top: 2px solid #d3eced; border-bottom: 2px solid #d3eced; right: 25px; top: 15px; padding-top: 3px; } #menu #menu-button::before { display: block; content: ''; position: absolute; height: 3px; width: 22px; border-top: 2px solid #d3eced; right: 25px; top: 25px; } #menu > ul > li.has-sub > a::after, #menu ul ul li.has-sub > a::after { display: none; } }