/* ====== NAVIGATION ====== */

:root {
	--wg-darkblue: #3a4556;
	--wg-mediumblue: #6c8aa4;
	--wg-lightblue: #a3cdef;
	--wg-yellow: #dda627;
	--bodytext-grey: #333333;
	--othertext-white: #f2f2f2;
	--lightgreybackground: #d4dce1;
	--darkgreybackground: #333333;
	--hovergrey: #a8b1ba;
}

/*
var(--wg-darkblue);
var(--wg-yellow);
var(--lightgreybackground);
var(--darkgreybackground);
var(--hovergrey);
var(--othertext-white);
*/



nav {
  position: sticky;
  top: 0px;
  z-index: 99;
  width: 100%;
  background: var(--lightgreybackground);
  border-top: 6px solid #fff; }

/*
  nav::before{
  content: " ";
  position: absolute;
*/
/*
  top: -12px;
  border-top: 6px solid var(--wg-darkblue);
*/
/*
  top: -6px;
  border-top: 6px solid #fff;
  width: 100%; }
*/

.menu-wrapper {
  position: relative;
  max-width: 1160px;
  padding: 0px 20px;
  height: 40px; /* HEIGHT OF GREY MENU BAR */
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between; }
@media (min-width: 600px) { .menu-wrapper { padding-left: 40px; padding-right: 40px; } }

.page-overlay { display: none; }


.menu-logo {
	height: 42px;
	padding: 14px 0 0 14px;}

.icon-home {
	font-size: 18px;
	color: var(--wg-darkblue); }
.icon-home:hover { color: var(--wg-yellow); }

.icon-burger {
	font-size: 22px;
	color: var(--wg-darkblue); }
.icon-burger:hover { color: var(--wg-yellow); }

.arrow-down {
	border: solid var(--wg-darkblue);
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    margin-bottom: 2px;
    margin-left: 2px; }





.nav-links {
  display: inline-flex; }

.nav-links li {
  list-style: none; }

.nav-links li a {
  color: var(--wg-darkblue);
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
  padding: 6px 16px;
  border-radius: 8px;
  transition: all 0.3s ease; }



.nav-links li a:hover {	background: var(--hovergrey); }


.nav-links .mobile-item {
  display: none; }

.nav-links .drop-menu {
  position: absolute;
  background-color: var(--lightgreybackground);
  width: 260px;
  line-height: 45px;
  top: 42px;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  margin-left: -10px; }

	
	.drop-menu li:first-child { margin-top: 6px; }
	.drop-menu li:last-child { margin-bottom: 16px; }



.drop-menu li {
	margin-left: 10px;
	margin-right: 10px;  }

.drop-menu li::before{
  content: " ";
  position: absolute;
  top: -4px;
  left: 0;
  border-top: 4px solid transparent;
  width: 100%; }


.nav-links li:hover .drop-menu,
.nav-links li:hover .mega-box {
  transition: all 0.3s ease;
  top: 36px; /* OFFEST DOWN FROM MAIN MENU LINK */
  opacity: 1;
  visibility: visible; }

.drop-menu li a {
  width: 100%;
  display: block;
  padding: 0 0 0 15px;
  font-size: 14px;
  font-weight: 400;
  border-radius: 8px;
  line-height: 34px; }





.mega-box {
  position: absolute;
  left: 0;
  width: 100%;
  padding: 0 30px;
  top: 85px;
  opacity: 0;
  visibility: hidden; }

.mega-box li::before{
  content: " ";
  position: absolute;
  top: -4px;
  left: 0;
  border-top: 4px solid transparent;
  width: 100%; }



.mega-box .content {
  background: var(--lightgreybackground);
  padding: 25px 20px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 8px 8px; }

.mega-box .content .row {
  width: calc(25% - 30px);
  line-height: 45px; }

.content .row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px; }

.content .row {
  color: var(--othertext-white);
  font-size: 20px;
  font-weight: 500; }

.mega-links-header {
  font-size: 19px;
  font-weight: 500;
	color: var(--wg-darkblue); }

.content .row .mega-links {
  margin-left: -40px;
  border-left: 1px solid rgba(255, 255, 255, 0.09); }

.row .mega-links li {
  padding: 0 20px; }

.row .mega-links li a {
  padding: 0px;
  padding: 0 20px;
  color: var(--wg-darkblue);
  font-size: 14px;
  display: block;
line-height: 34px; }



.menu-wrapper .btn {
  color: var(--othertext-white);
  font-size: 20px;
  cursor: pointer;
  display: none; }

.menu-wrapper .btn.close-btn {
  position: absolute;
  right: 45px;
  top: 10px; }


nav input {
  display: none; }

.mobile-menu-only { display: none; }






@media screen and (max-width: 1080px) {
	
		  .mobile-menu-only { display: block; }
	
		  .nav-links li a { color: var(--othertext-white); }
	
		  .drop-menu li a { color: var(--wg-darkblue); }
	
		  .arrow-down { border: solid var(--othertext-white); border-width: 0 2px 2px 0; }
	
		  .menu-wrapper .btn { display: block; }

	      .nav-links .drop-menu { margin-left: 0; }
	
		  .menu-wrapper .nav-links {
			position: fixed;
			height: 100vh;
			width: 100%;
			max-width: 375px;
			top: 0;
			right: -100%;
			background: var(--darkgreybackground);
			display: block;
			padding: 50px 10px;
			line-height: 50px;
			overflow-y: auto;
			box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.18);
			transition: all 0.3s ease; }



		  #menu-btn:checked~.nav-links { right: -15px; z-index: 10; } 
		  #menu-btn:checked~.btn.menu-btn { display: none; }
		  #close-btn:checked~.btn.menu-btn { display: block; }

	
	
		.page-overlay {
			height: 100vh;
			width: 100%;
			background: rgba(0, 0, 0, 0.6);
			position: fixed;
			top: 0;
			right: -100%;
			display: block;
			transition: all 0.3s ease; } 
	
		#menu-btn:checked~.page-overlay { right: 0; z-index: 1} 


	
	
		  .nav-links li {
			margin: 10px 10px; }

		  .nav-links li a {
			padding: 0 20px;
			display: block;
			font-size: 20px; }

		  .nav-links .drop-menu {
			position: static;
			opacity: 1;
			top: 65px;
			visibility: visible;
			padding-right: 10px;
			padding-left: 10px;
			width: 100%;
			max-height: 0px;
			overflow: hidden;
			box-shadow: none;
			transition: all 0.3s ease; }

	
		  #showDrop2:checked~.drop-menu,
		  #showDrop:checked~.drop-menu,
		  #showMega:checked~.mega-box { max-height: 100%; }


		  .nav-links .desktop-item {
			display: none; }

		  .nav-links .mobile-item {
			display: block;
			color: var(--othertext-white);
			font-size: 20px;
			font-weight: 500;
			padding-left: 20px;
			cursor: pointer;
			border-radius: 5px;
			transition: all 0.3s ease; }
	

		  .nav-links .mobile-item:hover { background: var(--hovergrey); }
    	  .nav-links li:hover { background: var(--hovergrey); border-radius: 8px; }


		  .drop-menu li {
			margin: 0; }

		  .drop-menu li a {
			border-radius: 5px;
			font-size: 14px; }
	
	

		  .mega-box {
			position: static;
			top: 65px;
			opacity: 1;
			visibility: visible;
			padding: 0;
			max-height: 0px;
			overflow: hidden;
			transition: all 0.3s ease;
			border-radius: 8px; }
	
		  .mega-box .content {
			box-shadow: none;
			flex-direction: column;
			padding: 20px 20px 0 20px; }

		  .mega-box .content .row {
			width: 100%;
			margin-bottom: 15px;
			border-top: 1px solid rgba(255, 255, 255, 0.08); }

		  .mega-box .content .row:nth-child(1),
		  .mega-box .content .row:nth-child(2) {
			border-top: 0px; }

		  .content .row .mega-links {
			border-left: 0px;
			padding-left: 15px; }

		  .row .mega-links li {
			margin: 0; }

		  .content .row header {
			font-size: 19px; }
}




.header-facebook {
	height: 42px;
	padding-top: 0;
	display: none; }
@media (min-width: 500px) { .header-facebook { display: block; } }
.icon-facebook {
	position: relative;
	display: block;
    border-radius: 50%;
	border: transparent;
    background-color: #fff;
    height: 28px;
    width: 28px;
	margin-right: 5px;
    color: #fff;
    font-size: 18px; }
.icon-facebook:hover { background-color: var(--wg-yellow); }
.fa-facebook-f { 
	font-size: 19px;
	color: #3a4556;
	position: absolute;
	left: 50%;
    top: 50%;
    transform: translate(-50%,-50%); }