*, ul {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
a, a:hover {
text-decoration: none;
}
.main-header {
background-color: #148a0c;
}
/* MENU STARTS */
nav img {
max-width: 100%;
}
.menu-container {
background-color: #C4E9FF;
text-align: left;
}
.menu-container > ul > li {
display: inline-block;
width: 16.66666667%;
border-right:.1vw solid#e3e3e3;
vertical-align:middle;
}
.menu-container > ul {
font-size: 0;
}
.menu-container > ul > li > a {
font-family: 'Roboto', sans-serif;
display: inline-block;
padding:1vw 4vw 1vw 2vw;
text-align:left;
text-transform:uppercase;
vertical-align: middle;
}
.menu-container a {
color: #000;
}
.icon {
width:100%;
}
.icon i {
width: 30%;
float:left;
padding:0;
margin:0;
vertical-align:middle;
}
.icon i img {
width:100%;
}
.icon em {
width:70%;
float:left;
text-decoration:none;
font-style:normal;
text-align:left;
padding-left:.8vw;
vertical-align: middle;
font-weight:500;
font-size:1vw;
line-height:1.3vw;
padding-top:.3vw;
}
/* DROPDOWN STARTS */
.menu-container ul li:not(.has-megamenu), .menu-container {
position: relative;
}
.menu-container ul ul {
min-width: 100%;
color: #000;
background-color: #ddd;
position: absolute;
left: 0;
top: 100%;
z-index: 999;
visibility: hidden;
opacity: 0;
-webkit-transform: rotateY(45deg);
transform: rotateY(45deg);
}
.menu-container ul ul li {
display: block;
}
.menu-container ul ul li > a {
font-family: 'Roboto', sans-serif;
background-color: #b6d3e7;
color: #000;
font-size:.9vw;
padding: 1vw 1.5vw;
white-space: nowrap;
display: block;
font-weight:500;
border-bottom:.1vw solid#f6f6f6;
text-transform:uppercase;
}
.menu-container ul ul li > a i {
color: #000;
font-size:1vw;
padding-right:.3vw;
}
/* 2nd,3rd etc level sub menu */
.menu-container ul ul ul {
left: 100%;
top: 0;
}
/* MEGAMENU STARTS */
.has-megamenu {
text-align: justify;
font-size: 14px;
}
.megamenu {
padding: 10px 15px;
}
.megamenu-content h2 {
text-align: left;
margin-bottom: 15px;
font-size: 18px;
}
.megamenu-content img {
display: block;
margin-bottom: 10px;
}
/* DROPDOWN ARROW */
.has-dropdown > a {
position: relative;
}
.has-dropdown > a:after {
display:none;
content: '';
width: 0;
height: 0;
border-width: .5vw .4vw .4vw;
border-color: #ddd transparent transparent transparent;
border-style: solid;
position: absolute;
right:2vw;
top: 50%;
margin-top: -2px;
z-index: 9999;
transition: all .19s;
}
/* BUTTON */
.btn-green {
background-color: #148a0c;
line-height: 1;
letter-spacing: .5px;
padding: 12px 5px;
border-radius: 5px;
display: block;
margin: 15px 0;
}
/* WHEN HOVER */
.menu-container > ul > li > a, .menu-container ul ul, .has-dropdown > a:after {
transition: all .2s ease-in-out;
}
.menu-container li:hover > ul {
visibility: visible;
opacity: 1;
-webkit-transform:  rotateY(0);
transform:  rotateY(0)
}
.menu-container li:hover > a {
background-color: #fafafa;
}
.has-dropdown:hover > a:after {
border-width: 5px 4px 4px;
right: 50%;
top: auto;
bottom: -2px;
-webkit-transform: translateX(50%) rotate(180deg);
transform: translateX(50%) rotate(180deg);
opacity: 1;
}
.has-dropdown .has-dropdown:hover > a:after {
-webkit-transform: translate(0) rotate(-90deg);
transform: translate(0) rotate(-90deg);
top: 50%;
margin-top: -4px;
right: 15px;
bottom: auto;
}
.btn-green:hover, .btn-green:focus, .btn-green:active {
background-color: #0b4c06;
color: #fff;
}
/* IMAGE PRELOADER */
.megamenu-content a:first-of-type {
display: block;
position: relative;
min-height: 60px;
}
.img-preloader {
width: 100%;
height: 100%;
position: absolute;
display: block;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: #15890d;
}
.img-preloader:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 25px;
height: 25px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-width: 4px;
border-style: solid;
border-color: #0b4c07 #fff;
text-align: center;
border-radius: 50%;
-webkit-animation: imgPreloader .99s infinite ease-in-out;
animation: imgPreloader .99s infinite ease-in-out;
}
.img-preloader:before {
content: 'Image is loading...';
text-align: center;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
bottom: 2px;
font-size: 10px;
font-style: italic;
letter-spacing: 0.5px;
}
@-webkit-keyframes imgPreloader {
0% {
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
-webkit-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes imgPreloader {
0% {
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
-webkit-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg);
}
}