a:hover{ color: #fff; text-decoration:none; } label.mobile_menu span { margin-left: 10px; color:#FFF; font-size:1em; display: none; } .navigation{ float:left; margin-top: -0.8em; } .nav { /* General Font */ /* General Shape */ position: relative; margin: 0px 0 0 0; } ul.nav{ padding:0; list-style:none; } li.dropdown1 { } li.dropdown1:hover{ background: #e21737 !important; color: #fff !important; } /* Main element of the naviagtion */ .nav > li { display: inline-block; float: left; background: none; } .nav > li:nth-child(1) > a:hover { background: none !important; } .nav > li:nth-child(1) > a { padding: 0 0; margin-top: .2em; } .nav li a.active, .nav li a:hover { background: #e21737 !important; color: #fff !important; } .nav > li:nth-child(5){ background:none; } /* Link Style */ .nav > li > a { padding: .5em 1em .5em 1em; display: block; color: #fff; margin: 0; font-size: 15px; font-weight:500; text-transform: uppercase; border: none; letter-spacing: 1px; border-style: solid; border-color: rgba(255, 255, 255, 0); background: none; } .nav > li:nth-child(1) > a,.nav > li:nth-child(5) > a,.nav > li:nth-child(6) > a, .nav > li:nth-child(7) > a{ background:none; } .nav > li:nth-child(1) > a:hover, .nav > li:nth-child(5) > a:hover, .nav > li:nth-child(6) > a:hover{ background: #e21737; color: #fff; } .nav > li:hover > a{ color: #000; border-color:none; background: url(../images/menu-arrow-hover.png) no-repeat 103% 54%; } .nav li > ul li a:hover{ color: #000 !important; text-decoration:none; } /* Simple multilevel dropdown */ .nav > li > ul { opacity: 0; visibility: hidden; position: absolute; list-style: none; top: 27px; width: 200px; text-align: left; margin-top:30px; padding: 0px; z-index: 99; } /* First level appear */ .nav > li:hover > ul { opacity: 1; visibility: visible; margin-top: 15px; } /* Style for dropdown links */ .nav li > ul li{ position: relative; } .nav li > ul li a{ background: #e21737; color: #fff; font-size: 1.05em; font-weight:600; display: block; padding: 4px 10px; text-transform: uppercase; position: relative; -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; } .nav li > ul li a span.arrow{ width:15px; height:10px; position:absolute; right:5px; top:15px; background:url(../images/arrow-before.png) no-repeat center; } .nav > li > ul li:hover a span.arrow{ background:url(../images/nav-arrow.png) no-repeat center } .nav > li > ul li:hover { color:#000; -moz-transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; } .nav ul.dropdown2 { background: #e21737; color: #fff; } .nav ul li:hover > a { color:#000; background:#fcff19; } /* Second and third dropdown level */ .nav > li > ul li ul { opacity: 0; visibility: hidden; position: absolute; list-style: none; top:0px; left: 200px; width: 200px; text-align: left; padding: 0px; margin-left: 30px; background-color:#fcff19; } .nav > li > ul li ul li:hover { background-color:#fcff19; } input#mobile_menu { display: none; } .nav > li > ul li ul li ul { background-color:#FFF; } .nav > li > ul li ul li ul li:hover { color:#0572B8; } /* Second and third level appears */ .nav > li ul li:hover > ul { opacity: 1; visibility: visible; margin-left: 0px; } /* Full width dropdown */ .nav > li > .fulldrop { opacity: 0; visibility: hidden; position: absolute; list-style: none; top:118px; left: 0px; background-color: #0078b3; width: 100%; min-height: 100px; text-align: left; margin-top:30px; padding: 0; z-index: 99; overflow: hidden; } /* Full dropdown appears */ .nav > li:hover .fulldrop { opacity: 1; visibility: visible; margin-top: 0px; } .nav ul li:hover:after { color: white; } /* coldrop based dropdown */ .nav .coldrop { opacity: 0; visibility: hidden; position: absolute; list-style: none; top:118px; background-color: #0078b3; min-height: 100px; text-align: left; margin-top:30px; padding: 0; padding: 0 10px; z-index: 99; } .nav > li:hover .coldrop { opacity: 1; visibility: visible; margin-top: 0px; } .nav .coldrop .column {width: 130px;margin:0 9px;} /* coldrop for full width dropdown */ .nav .column { width: 14.1%; float: left; color:white; margin: 0 0 0 2.2%; } .nav .column ul { padding: 0; margin: 0; } .nav .column ul li { padding: 0; list-style: none; font-size: 11px; } .nav .column h3 { font-size: 14px; padding: 14px 0; font-weight: 400; margin: 5px 0 5px 0; } .nav .column ul li a { display: block; padding: 0 0 15px 0; } .nav > li > ul li ul, .nav li >ul li, .nav > li > .fulldrop, .nav > li > .coldrop, .nav > li > ul, .nav > li { transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; /* Firefox 4 */ -webkit-transition: all 0.3s ease-in-out; /* Safari and Chrome */ -o-transition: all 0.3s ease-in-outs; /* Opera */ } @media all and (max-width:1440px) { .nav > li > ul { top: 27px; } } @media all and (max-width:1366px) { .nav > li > ul { top: 26px; } .nav li > ul li a { font-size: 1em; } } @media (max-width: 1280px){ .nav > li > ul { top: 25px; } .nav li > ul li a { font-size: 0.9em; } .nav > li > a { font-size: 1em; letter-spacing: 0; } .navigation { margin-top: -10px; } } @media (max-width: 1024px){ .nav > li:nth-child(1) > a { margin-top: 0em; } .nav > li > ul { top: 18px; } .nav > li > a { padding: .3em .5em .2em .5em; } .nav > li { margin: 0 2px; } .nav > li > ul { width: 160px; } } @media only screen and (max-width: 959px) { .nav > li > a{ padding:10px 12px; } } @media only screen and (max-width:800px) { .nav > li:nth-child(1) > a:hover{ background:#c2c2c2 !important; } .nav { display: none; } label.mobile_menu span { display: inline; } label.mobile_menu { width: 100%; } label.mobile_menu { position: relative; display: block; width: 100%; background-color:#e21737; padding: 10px 0; margin-top: 10px; margin-bottom:0; cursor: pointer; } .nav { padding: 0; } .nav > li > a { border-width:0; } .nav li { width: 100%; text-align: left; margin-left: 0; } .nav > li { border-right: none; padding:5px 0px; position: relative; } .nav > li > a { display:block; font-size:0.85em; border-top-left-radius:0; border-top-right-radius:0; } li.dropdown1:hover{ border-top-left-radius:0; border-top-right-radius:0; } .nav li > ul li a span.arrow { right:20px; background: url(../images/nav-arrow2.png) no-repeat center; } .nav li ul, .nav li .fulldrop, .nav li .coldrop { top:33px; } .nav > li { background:none; padding:0; } .nav li ul { padding: 0; } .nav > li:nth-child(1) > a ,.nav > li:nth-child(2) > a ,.nav > li:nth-child(6) > a { background:#c2c2c2 !important; } .nav > li > a { background: url(../images/menu-arrow.png) no-repeat 97% 48% #c2c2c2 !important; border-bottom: 1px solid #fff; color: #fff; } .nav .fulldrop, .nav .coldrop { width:95%; padding: 0 2.5%; } .nav li > ul li { padding: 18px 0px; } .nav .column, .nav .coldrop .column { width: 94%; padding: 0 3%; } .nav > li > ul { width: 100%; } .nav > li > ul li ul { width: 100%; top:36px; left: 0; margin-top: 30px; z-index: 2; } .nav > li > ul > li:hover ul { margin-top: 0; } #mobile_menu:checked+.nav { display: block } label.mobile_menu:after { position: absolute; top:-2px; right: 10px; content: "\2261"; font-size: 30px; color: white; } .nav > li > ul li ul li ul { width: 100%; top:43px; left: 0px; margin-left: 0; margin-top: 30px; } .nav > li > ul > li ul li:hover ul{ margin-top: 0; } .nav > li > ul li{ padding:0px 0 0px 0%; width:100%; } .nav > li > ul li ul { margin-left:0; } .nav > li > ul li ul li{ padding: 5px 0 5px 0%; width:100%; } .nav > li > ul li ul li ul li{ padding: 15px 0 15px 0%; width:100%; } .nav ul li.dropdown:after { left: 90%; } /* Disable animation on mobile device */ .nav > li > ul li ul, .nav li >ul li, .nav > li > .fulldrop, .nav > li > .coldrop, .nav > li > ul, .nav > li { transition: none; -moz-transition: none; -webkit-transition: none; -o-transition: none; } .navigation { margin-top: 0; } } @media only screen and (max-width:768px) { .nav li ul, .nav li .fulldrop, .nav li .coldrop { top: 38px; } .nav > li:hover > ul { margin-top: 0px; } ul.nav { padding: 0; list-style: none; z-index: 1; width: 100%; float: left } label.mobile_menu { width: 100%; float: right; } .nav > li:nth-child(1) > a { background: #828282; border-bottom: 1px solid #fff; color: #fff; background: url(../images/menu-arrow.png) no-repeat 97% 48% #828282; } } @media only screen and (max-width:640px) { label.mobile_menu { width: 100%; float: right; margin-top: 0; } .nav > li:nth-child(1) > a { font-size: 0.8em; } .nav > li > a{ font-size:0.8em; } .nav li > ul li a { font-size: 0.8em; } } @media only screen and (max-width:480px) { label.mobile_menu { padding: 5px 0; margin-top: 0px; } label.mobile_menu:after { font-size: 25px; top: -2px; } } label.mobile_menu span { text-transform:uppercase; font-size: 1em; } @media only screen and (max-width:320px) { .nav li ul, .nav li .fulldrop, .nav li .coldrop { top: 28px; } .nav > li > a { padding: 6px 12px; } label.mobile_menu { width: 100%; } }