@media (min-width:992px){
nav#nav{
width:100%;
}
ul.megamenu {
margin: 0;
padding: 0;
width: 100%;
display: flex;
justify-content: flex-end;
height: 90px;
}
ul.megamenu,
ul.megamenu li{
list-style-type:none;
}
ul.megamenu li {
display:block;
float: unset;
margin: 0;
}
ul.megamenu li.level0 {
text-align: center;
padding: 0;
line-height: 38px;
margin-right: 0;
display: flex;
align-items: center;
justify-content: center;
width: 25%;
}
ul.megamenu li.level0:hover {
cursor:pointer;
background-color: #fff;
}
.InnerSkin ul.megamenu a.level0{
color:#003f87;
}
ul.megamenu a.level0{
color: #003f87;
display: inline-block;
float: none;
font-size: 16px;
padding: 0 5px;
position: relative;
font-family: "Source Sans 3", sans-serif;
line-height: 24px;
font-weight:bold;
text-transform:uppercase;
}
ul.megamenu a.level0 .fas.fa-caret-down {
display:none;
}
ul.megamenu li.level0 span {
color: #4e4d4f;
font-family: "Source Sans 3", sans-serif;
vertical-align:top;
margin:0 15px;
line-height: 33px;
}
ul.megamenu a.level0.current {
background-color:transparent;
color: #003f87;
}
ul.megamenu a.level0:hover, ul.megamenu li.level0:hover a {
color:#003f87;
}
ul.megamenu li.level0:hover a.MenuLink {
color:#003f87;
}
ul.megamenu ul {
padding:0;
margin:0;
}
ul.megamenu li a {
float: left;
text-decoration:none;
}
/*.HomeSkin ul.megamenu li.level0:nth-of-type(1) .sub {
opacity:1;
visibility:visible;
display:block;
}*/
ul.megamenu li.level0:nth-of-type(1) .sub {
left:490px;
}
ul.megamenu li.level0:nth-of-type(1) .wrapper {
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
column-gap: 0.5em;
-webkit-perspective: 1;
}
/*ul.megamenu li.level0:nth-of-type(2) .wrapper, ul.megamenu li.level0:nth-of-type(3) .wrapper {
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
column-gap: 0.5em;
-webkit-perspective: 1;
}
ul.megamenu li.level0:nth-of-type(4) .sub ul {
min-height:unset;
}*/
ul.megamenu .wrapper {
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
column-gap: 0.5em;
padding-bottom: 2px;
font-size: 18px;
line-height: 21px;
-webkit-perspective: 1;
}
.megamenusubcontent {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
width: 100%;
}
ul.megamenu li.level0 .sub ul.megamenusubcontent {
padding: 0 45px 30px 45px;
position:relative;
min-width:300px;
}
/* ul.megamenu li.level0 .sub ul.megamenusubcontent::before {
position: absolute;
display: block;
content: "";
left: 0;
bottom: 0px;
width: 1px;
height: 80%;
background: linear-gradient(to bottom, rgba(234,234,234,1) 29%,rgba(144,144,144,1) 100%);
}*/
ul.megamenu li.level0 .sub ul.megamenusubcontent:first-child {
border-left: unset;
}
ul.megamenu li.level0 .sub ul.megamenusubcontent:first-child::before, ul.megamenu li.level0:nth-of-type(1) .sub ul.megamenusubcontent:nth-child(2)::before {
display:none;
}
ul.megamenu .sub ul li.subheader {
padding-top:0;
}
ul.megamenu li .sub {
position: absolute;
top: 90px; /* Adjust based on your menu */
left: 50%; /* Keep it centered horizontally */
transform: translateX(-50%) translateY(-20px); /* Start slightly above */
opacity: 0; /* Hidden by default */
visibility: hidden; /* Hidden by default */
display: block; /* Block-level for positioning */
background-color: #fff;
padding: 30px 35px 0px 25px;
background-color: #FFFFFF;
box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.25);
z-index: 1300;
width: auto;
transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s; /* Visibility delay for smooth transition */
text-align: left;
}
ul.megamenu li.level0:hover > .sub{
transform: translateX(-50%) translateY(0); /* Slide into view */
opacity: 1; /* Fully visible */
visibility: visible; /* Now visible */
transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0s; /* Reset visibility delay */
background-color: #FFFFFF;
box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.25);
}
ul.megamenu li.level0 {
line-height: 40px;
width: 16%;
}
ul.megamenu li .sub .menushadow {
display:none;
}
ul.megamenu li .sub ul{
list-style: none;
margin: 0;
padding: 0 8px;
}
ul.megamenu li.level0 .sub ul{
list-style: none;
padding: 0;
}
ul.megamenu .sub ul li {
width: 100%;
line-height: 20px;
min-width:165px;
}
ul.megamenu .sub li.subheader > a {
color: #616161;
font-size: 22px;
border-bottom: 0;
display: block;
line-height: 1.2;
position: relative;
font-family: "Source Serif 4", serif;
margin-bottom: 20px;
font-weight: 500;
}
ul.megamenu .sub li.subheader > a:hover {
color: #003f87;
}
ul.megamenu .sub ul li a {
float: none;
text-indent: 0;
display: block;
text-decoration: none;
color: #002a5c;
margin:0;
transition: transform 0.3s ease;
}
ul.megamenu .sub ul li a.level2{
font-size: 17px;
margin-bottom: 9px;
color: #4e4d4f;
z-index: 10;
position: relative;
line-height: 24px;
font-weight:300;
}
ul.megamenu .sub ul li a.level3 {
font-size: 15px;
margin-bottom: 8px;
color: #4e4d4f;
padding-left: 12px;
z-index: 10;
position: relative;
line-height: 16px;
}
ul.megamenu .sub ul li a:hover{
color: #003f87;
transform: translateX(3px);
}
}
@media (min-width:1200px){
ul.megamenu li.level0 {
line-height: 45px;
width: 17%;
}
ul.megamenu a.level0 {
font-size: 16px;
line-height:90px;
}
ul.megamenu li.level0:nth-of-type(5) .sub {
left: 58%;
right: unset;
}
ul.megamenu a.level0::after {
content: "";
display: block;
width: 100%;
height: 10px;
position: absolute;
bottom: 0;
transform-origin: center;
background-color: #f1c400;
left: 0;
transition: 0.35s cubic-bezier(0.76, -0.18, 0.55, 1.07);
transform: rotateY(90deg);
}
ul.megamenu a.level0:hover::after {
transform: rotateY(0deg);
}
}
@media (min-width:1385px){
}
@media (min-width:1600px){
ul.megamenu li.level0 {
margin:0;
}
ul.megamenu a.level0 {
font-size: 18px;
}
}
@media (min-width:1600px){
ul.megamenu a.level0 {
font-size: 20px;
}
ul.megamenu .sub li.subheader > a {
font-size: 28px;
}
ul.megamenu .sub ul li a.level2 {
font-size: 19px;
margin-bottom:12px;
}
}