.menu-mobile { display: none; padding: 20px; } .cssmenu ul, .cssmenu ul ul li, .cssmenu ul ul li a{ margin: 0; padding: 0; list-style: none; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .cssmenu:after, .cssmenu > ul:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .cssmenu .menu-button { display: none; } .cssmenu { width: auto; line-height: 1; } #menu-line { position: absolute; top: 0; left: 0; height: 3px; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; -ms-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .cssmenu > ul > li { position: relative } .cssmenu.align-center > ul { font-size: 0; text-align: center; } .cssmenu.align-center > ul > li { display: inline-block; float: none; } .cssmenu.align-center ul ul { text-align: left; } .cssmenu.align-right > ul > li { float: right; } .cssmenu.align-right ul ul { text-align: right; } .cssmenu > ul > li > a { -webkit-transition: color .2s ease; -moz-transition: color .2s ease; -ms-transition: color .2s ease; -o-transition: color .2s ease; transition: color .2s ease; } .cssmenu > ul > li.has-sub > a { } /*navigation*/ .header-nav .menu{ margin: 0; padding: 0; } .header-nav .menu > li{ padding: 0; } .header-nav .menu > li > a{ line-height: 60px; font-size: 20px; color: #2c3e50; padding: 0 10px; letter-spacing: 0; display: block; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .header-nav .menu a:hover, .header-nav .menu a:focus, .header-nav .menu a:active{ text-decoration: none; } /*nav-style-dark*/ .header-nav.nav-style-dark{ background-color: #131313; border-top: none; z-index: 999; } .header-nav.nav-style-dark .menu > li > a{ color: #fff; } .header-nav.nav-style-dark .menu > li{ margin-left: -4px; } .header-nav.nav-style-dark .menu > li.active > a, .header-nav.nav-style-dark .menu > li:hover > a{ background-color: rgba(255, 255, 255, .1); } .header-nav.nav-style-dark .menu > .pull-right:hover a{ background-color: #131313; } .header-nav.nav-style-dark .menu > .pull-right{ margin-left: 11px; } .header-nav .menu > .search-box > ul{ width: 480px; text-align: right; max-width: 480px; } .search-box .search-form{ padding: 30px; } .header-nav .menu > .search-box:hover > ul{ left: auto; right: 0; } .header-nav.nav-style-dark .menu > .pull-right > a{ background-color: rgba(255, 255, 255, .1); width: 45px; line-height: 43px; height: 43px; text-align: center; padding: 0; margin-top: 17px; } /*nav-style-light*/ .header-nav.nav-style-light{ background-color: #fff; border-top: none; z-index: 999; } .header-nav.nav-style-light .menu > li{ margin-left: -4px; padding: 0 14px; } .header-nav.nav-style-light .menu > li > a{ position: relative; padding: 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .1em; } .header-nav.nav-style-light .menu > li.active > a:before, .header-nav.nav-style-light .menu > li:hover > a:before{ content: ""; width: 100%; height: 4px; position: absolute; top: 0; left: 0; } .cssmenu > ul > li.has-sub:hover > a::after { border-color: #009ae1; } .cssmenu ul ul { position: absolute; left: -9999px; z-index: 99999 !important; text-align: left; border: 1px solid #e5e5e5; border-bottom: none; background-color: #fff; } .cssmenu li:hover > ul { left: auto; -webkit-animation: fadeinUp .3s; /* Safari and Chrome */ -moz-animation: fadeinUp .3s; /* Firefox */ -ms-animation: fadeinUp .3s; /* Internet Explorer */ -o-animation: fadeinUp .3s; /* Opera */ animation: fadeinUp .3s; } .cssmenu.align-right li:hover > ul { right: 0; } .cssmenu ul ul ul { margin-left: 100%; top: 0; } .cssmenu.align-right ul ul ul { margin-left: 0; margin-right: 100%; } .cssmenu ul ul li { } .cssmenu ul li:hover > ul > li { } .cssmenu ul ul li a { padding: 20px 20px; width: 220px; font-size: 14px; border-bottom: 1px solid #e5e5e5; text-decoration: none; -webkit-transition: color .2s ease; -moz-transition: color .2s ease; -ms-transition: color .2s ease; -o-transition: color .2s ease; transition: color .2s ease; display: block; background-color: #fff; } .nav-style-dark .cssmenu ul ul{ border-color: rgba(255, 255, 255, .1); background-color: #131313; } .nav-style-dark .cssmenu ul ul li a{ background-color: #131313; color: #fff; border-bottom-color: rgba(255, 255, 255, .1); } .nav-style-dark .cssmenu .menu-button::before{ border-color: #fff; } .nav-style-dark .cssmenu .submenu-button::after, .nav-style-dark .cssmenu .submenu-button::before, .nav-style-dark .cssmenu .menu-button::after{ background-color: #fff; } .nav-style-dark .cssmenu ul ul li.active > a, .nav-style-dark .cssmenu ul ul li:hover > a{ background-color: rgba(255, 255, 255, .1); color: #fff; } .nav-style-dark .cssmenu ul ul li.has-sub > a::after, .nav-style-dark .cssmenu ul ul li.has-sub:hover > a::after{ border-color: #fff; } .cssmenu ul ul li.has-sub > a::after { position: absolute; top: calc(50% - 4px ); right: 10px; width: 4px; height: 4px; border-bottom: 1px solid #212121; border-right: 1px solid #212121; content: ""; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: border-color 0.2s ease; -moz-transition: border-color 0.2s ease; -ms-transition: border-color 0.2s ease; -o-transition: border-color 0.2s ease; transition: border-color 0.2s ease; } .cssmenu.align-right ul ul li.has-sub > a::after { right: auto; left: 10px; border-bottom: 0; border-right: 0; border-top: 1px solid #212121; border-left: 1px solid #212121; } .cssmenu ul ul li.has-sub:hover > a::after { border-color: #000; } @media (max-width: 800px) { .header-nav.nav-style-dark .menu > li{ position: relative; } .header-nav .menu > .search-box > .submenu-button, .header-nav .menu > .search-box > a{ display: none !important; } .header-nav .menu > .search-box ul{ display: block !important; } .header-nav .menu > .pull-right{ display: inline-block; float: left !important; margin-bottom: 30px; width: auto; } .header-nav .menu > .search-box{ min-width: 100%; margin: 0; } .search-box .search-form{ padding: 17px 17px 17px 0; } .cssmenu { width: 100%; } body .header-nav .menu li a{ line-height: 50px !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 20px; padding-bottom: 20px; border-bottom: none; } body .header-nav .menu ul{ border: none; -webkit-animation: fadeinUp 0s; /* Safari and Chrome */ -moz-animation: fadeinUp 0s; /* Firefox */ -ms-animation: fadeinUp 0s; /* Internet Explorer */ -o-animation: fadeinUp 0s; /* Opera */ animation: fadeinUp 0s; } .cssmenu ul { width: 100%; display: none; } .cssmenu.align-center > ul, .cssmenu.align-right ul ul { text-align: left; } .cssmenu ul li, .cssmenu ul ul li, .cssmenu ul li:hover > ul > li { width: 100%; height: auto; border-top: 1px solid rgba(120, 120, 120, 0.15); } .cssmenu ul li a, .cssmenu ul ul li a { width: 100%; } .cssmenu > ul > li, .cssmenu.align-center > ul > li, .cssmenu.align-right > ul > li { float: none; display: block; } .cssmenu ul ul li a { padding: 20px 20px 20px 30px; background: none; } .cssmenu ul ul li:hover > a, .cssmenu ul ul li a:hover { } .cssmenu ul ul ul li a { padding-left: 40px; } .cssmenu ul ul, .cssmenu ul ul ul { position: relative; left: 0; right: auto; width: 100%; margin: 0; } .cssmenu > ul > li.has-sub > a::after, .cssmenu ul ul li.has-sub > a::after { display: none; } #menu-line { display: none; } .cssmenu .menu-button { display: block; position: relative; padding: 0 20px; cursor: pointer; text-transform: uppercase; line-height: 78px; text-align: left; color:#000; } .cssmenu .menu-button::after { content: ''; position: absolute; top: 30px; top: calc( 50% - 1px ); right: 0px !important; display: block; width: 15px; height: 2px; background: #000; } .cssmenu .menu-button::before { content: ''; position: absolute; top: 25px; top: calc( 50% - 6px ); right: 0px !important; display: block; width: 15px; height: 12px; border-top: 2px solid #000; border-bottom: 2px solid #000; } .cssmenu .submenu-button { position: absolute; z-index: 10; right: 0; top: 0; display: block; border-left: 1px solid rgba(120, 120, 120, 0.15); height: 52px; width: 52px; cursor: pointer; } .cssmenu .submenu-button::after { content: ''; position: absolute; top: 21px; left: 26px; display: block; width: 1px; height: 11px; background: #000000; z-index: 99; } .cssmenu .submenu-button::before { content: ''; position: absolute; left: 21px; top: 26px; display: block; width: 11px; height: 1px; background: #000000; z-index: 99; } .cssmenu .submenu-button.submenu-opened:after { display: none; } } @keyframes fadeinUp { from { opacity: 0; margin-top: 30px; } to { opacity: 1; margin-top: 0; } } /* Firefox */ @-moz-keyframes fadeinUp { from { opacity: 0; margin-top: 10px;} to { opacity: 1; margin-top: 0;} } /* Safari and Chrome */ @-webkit-keyframes fadeinUp { from { opacity: 0; margin-top: 10px;} to { opacity: 1; margin-top: 0;} } /* Internet Explorer */ @-ms-keyframes fadeinUp { from { opacity: 0; margin-top: 10px;} to { opacity: 1; margin-top: 0;} } /* Opera */ @-o-keyframes fadeinUp { from { opacity: 0; margin-top: 10px;} to { opacity: 1; margin-top: 0;} }