.quicklink-menu {
transition: opacity 0.3s ease-in-out;
}

#navigation {
z-index: 9;
}

#navigation .nav-menu li {
position: relative;
}

#navigation .nav-menu {
list-style: none;
margin: 0;
padding: 0;
}


#navigation .nav-menu a {
text-decoration: none;
color: #fff; font-weight: 700;
display: block;
font-size: 17px;
transition: background 0.3s;
line-break: 1.2;

    transition: transform .6s 
cubic-bezier(.77, 0, .175, 1);
}



#navigation .nav-menu li li a {
border-bottom: 0px !important;
}

#navigation .nav-menu a span {
font-size: 8px;
position: relative;
top: -2px;
padding-left: 10px;
opacity: 0.3;
}


/* Dropdown Menu */
#navigation .quicklink-menu {
list-style: none;
margin-top: 15px;
padding: 0px 0;
top: 100%;
left: 0;
background: #ffffff0d;
z-index: 9
}

#navigation .quicklink-menu:before {
position: absolute;
top: -6px;
left: 16px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #FFF;
border-left: 6px solid transparent;
border-bottom-color: #FFF;
content: '';
}

#navigation .quicklink-menu a {
padding: 20px 30px;
display: block;
color: #FFF;
font-size: 14px;line-height: 1.4;
transition: background 0.3s;
}

#navigation .quicklink-menu ul {
width: 250px; top: 0px;
}

#navigation .quicklink-menu ul li {
width: 100%; float: none; 
}

#navigation .quicklink-menu li:nth-child(even) ul {
right: inherit;
left: -250px;

}

#navigation .quicklink-menu li:nth-child(odd) ul {
right: 250px;
left: inherit;
}




@media (max-width: 1050px) /*-- MOBILE --*/ {

#navigation .quicklink-menu:before {
  left: 26px;
}

#navigation .quicklink-menu {
  margin-top: 0px;
}

/* The overlay behind the mobile menu */
.opac-block {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5); /* adjust opacity here */
z-index: 9; /* should be below the menu but above content */
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
}

/* When the menu is open */
body.menu-open .opac-block {
opacity: 1;
visibility: visible;
}

#navigation #social {
display: flex !important;
}
#navigation {
position: fixed;
top: 0;
left: 0;
width: 380px;
height: 100%; z-index: 9999;
transform: translateX(-100%);        overflow-x: hidden;
transition: transform 0.3s ease-in-out;
    transition: transform .6s 
cubic-bezier(.77, 0, .175, 1);
}

#navigation.menu-open {
transform: translateX(0);
}

.menu-button {
position: fixed;
background:none;
color: white;
border: none;
cursor: pointer;
display: block;
z-index: 999999;
text-transform: uppercase;
letter-spacing: 3px;
font-weight: 700;
font-size: 14px;
display: flex;
flex-direction: row;
align-items: center;
right: 20px;
top: 58px;
padding: 8px 17px;
}

.menu-button:before {
content: "";
background: url(https://chilwellschool.kinsta.cloud/images/menu.svg);
width: 22px;
height: 20px;
position: relative;
display: block;
background-size: auto 20px;
margin-right: 11px;
}


.menu-button:before
#navigation 	.nav-menu {
flex-direction: column;
}

#navigation  .quicklink-menu {
position: relative;
}

#navigation .nav-menu a {
color: #FFF !important;
padding: 15px 28px 15px !important;
}

#navigation .quicklink-menu a {
padding: 15px 28px 15px !important;
font-size: 15px !important;
}

#navigation .quicklink-menu ul {
width: 100%;
left: 0px !important;
background: #ffffff14;
padding-left: 20px; 
}

#navigation .social-media {
  display: flex !important;width: 90%;
  margin-left: 20px; margin-top: 10px;
}


}

@media (min-width: 1051px) {


#navigation .nav-menu {
display: flex;
}

.menu-button {
display: none;
}
#navigation {
transform: none;   
position: relative;
}

#navigation .quicklink-menu {
position: absolute;
}

#navigation li > .quicklink-menu:hover {
display: block;
}


#navigation li:nth-child(5) .quicklink-menu,
#navigation li:nth-child(6) .quicklink-menu,
#navigation li:nth-child(7) .quicklink-menu,
#navigation li:nth-child(8) .quicklink-menu {
right: 0px;left: inherit;
}

#navigation li:nth-child(5) .quicklink-menu:before,
#navigation li:nth-child(6) .quicklink-menu:before,
#navigation li:nth-child(7) .quicklink-menu:before,
#navigation li:nth-child(8) .quicklink-menu:before {
left: auto; right: 45px;
}



/* Dropdown Menu */
#navigation .quicklink-menu {
list-style: none;
padding: 0px 0;
top: 100%;
left: 30px;
width: 500px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}

#navigation .quicklink-menu li {
width: 50%;
float: left;
height: 55px;
}

#navigation .quicklink-menu a {
padding: 20px 30px;
display: block;
color: #FFF;
font-size: 14px;line-height: 1.4;
transition: background 0.3s;
text-align: left;
display: flex;
align-items: center;
height: 55px;
}


#navigation .nav-menu > li:last-child {
margin-right: 0px;
}

#navigation .nav-menu > li:last-child a {
padding-right: 0px;
}

#navigation .nav-menu > li:first-child a {
padding-left: 0px;
}

}

.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}


@media (min-width: 1051px) {
#navigation .nav-menu li a {
border-bottom: 3px solid rgba(255,255,255,0);}


#navigation .nav-menu .current-menu-item a,
#navigation .nav-menu li:hover a {
border-bottom: 3px solid rgba(255,255,255,0.2);
}
.quicklink-menu {
  opacity: 0;
  transform: translateY(10px); /* start slightly below */
  visibility: hidden;
  pointer-events: none;
  transition: 
	opacity 0.3s ease-in-out,
	transform 0.3s ease-in-out,
	visibility 0.3s ease-in-out;
}

.quicklink-menu.open {
  opacity: 1;
  transform: translateY(0); /* slide up into place */
  visibility: visible;
  pointer-events: auto;
}

#navigation .nav-menu a {
font-size: 15px;
padding:10px 0px 10px;
}

#navigation .nav-menu a {
margin-left: 10px; margin-right: 10px;
}

#navigation .nav-menu > li:first-child > a {
margin-left: 0px;
}

#navigation .nav-menu li li a {
font-size: 14px;
}

}

@media (min-width: 1151px) {

#navigation .nav-menu a {
font-size: 16px;
}

#navigation .nav-menu a {
margin-left: 14px; margin-right: 14px;
}

}

@media (min-width: 1250px) {


#navigation .nav-menu a {
font-size: 17px;
padding: 12px 0px 12px;
}

#navigation .nav-menu a {
margin-left: 18px; margin-right: 18px;
}

#navigation .nav-menu li li a {
font-size: 15px;
}

}



@media (min-width: 1350px) {

#navigation .nav-menu a {
margin-left: 22px; margin-right: 22px;
}

}
@media (min-width: 1450px) {

#navigation .nav-menu a {
margin-left: 26px; margin-right: 26px;
}

}

@media (min-width: 1550px) {

#navigation .nav-menu a {
margin-left: 28px; margin-right: 28px;
}

}