
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.outer-menu {
position: fixed;
z-index: 100000;
right: 3vw;
top: 5vw !important;
}

.outer-menu .checkbox-toggle {
position: absolute;
top: 0;
right: 0;
z-index: 2;
cursor: pointer;
width: 5vw;
height: 5vw;
opacity: 0;
/* padding: 0.5vw !important; */
margin: 0 !important;
}

.outer-menu .checkbox-toggle2 {
position: absolute;
top: 8vw;
right: 0;
z-index: 2;
cursor: pointer;
width: 5vw;
height: 5vw;
opacity: 0;
/* padding: 0.5vw !important; */
margin: 0 !important;
}


.outer-menu .checkbox-toggle:checked + .hamburger > div {
  transform: rotate(135deg);
}
.outer-menu .checkbox-toggle:checked + .hamburger > div:before,
.outer-menu .checkbox-toggle:checked + .hamburger > div:after {
  top: 0;
  transform: rotate(90deg);
}
.outer-menu .checkbox-toggle:checked + .hamburger > div:after {
  opacity: 0;
}
.outer-menu .checkbox-toggle:checked ~ .menu {
  pointer-events: auto;
  visibility: visible;
}
.outer-menu .checkbox-toggle:checked ~ .menu > div {
  transform: scale(1);
  transition-duration: 0.75s;
}
.outer-menu .checkbox-toggle:checked ~ .menu > div > div {
  opacity: 1;
  transition: opacity 0.4s ease 0.4s;
}

section.left, section.right {width: 45%; float: left;}
section.right {float: right;}

.outer-menu .checkbox-toggle:hover + .hamburger {
 /* box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); */
}
.outer-menu .checkbox-toggle:checked:hover + .hamburger > div {
  transform: rotate(225deg);
}
.outer-menu .hamburger {
    position: absolute;
    right: 0;
    z-index: 1;
    width: 2vw;
    height: 2vw;
    padding: 1vw;
    cursor: pointer;
    transition: box-shadow 0.4s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--ltGold);
    border-radius: 50%;
    background: #fff;
}

.outer-menu .hamburger2 {
    position: absolute;
    right: 0;
    z-index: 1;
    width: 2vw;
    height: 2vw;
    padding: 0;
    cursor: pointer;
    transition: box-shadow 0.4s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(200,30,110,0.3);
    padding: 1vw;
    border-radius: 50%;
    border: 1px solid rgba(25,36,47,1);
    top: 8vw;
}
.outer-menu .hamburger > div {
  position: relative;
flex: none;
width: 100%;
height: 3px;
background: var(--ltGold);
transition: all 0.4s ease;
display: flex;
align-items: center;
justify-content: center;
}
.outer-menu .hamburger > div:before,
.outer-menu .hamburger > div:after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -10px;
  left: 0;
  width: 100%;
  height: 3px;
  background: inherit;
  transition: all 0.4s ease;
}
.outer-menu .hamburger > div:after {
  top: 10px;
}
.outer-menu .menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
		  backface-visibility: hidden;
  outline: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outer-menu .menu > div {
  width: 200vw;
  height: 200vw;
  color: var(--ltGold);
  background: rgba(0,115,144,1);
  /* background:rgba(25,36,47,1); */
  border-radius: 50%;
  transition: all 0.4s ease;
  flex: none;
  transform: scale(0);
  -webkit-backface-visibility: hidden;
		  backface-visibility: hidden;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outer-menu .menu > div > div {
  max-width: 90vw;
  max-height: 100vh;
  opacity: 0;
  transition: opacity 0.4s ease;
  width: 40%;
  float: left;
  position: relative;
  /* overflow-y: auto;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center; */
}
/* .outer-menu .menu > div > div > ul {
  list-style: none;
  padding: 0 1em;
  margin: 0;
  display: block;
  max-height: 100vh;
} */

.outer-menu .menu > div > div:nth-of-type(2) {left: 0;}

.outer-menu .menu > div > div > ul > li {
margin: 0 1vw 2vw 0;
float: left;
}

  @media only screen and (max-width: 1000px) {
  .outer-menu .menu > div > div > ul > li {float: none;}
  }


.outer-menu .menu > div > div > ul > li > a {
  position: relative;
  display: inline;
  cursor: pointer;
  transition: color 0.4s ease;
  /* font-weight: 900 !important; */
  font-size: 3vw !important;
  line-height: 50% !important;
  color: rgba(255,250,240,1);
}

.outer-menu .menu > div > div > ul > li.current_page_item > a {color: rgba(153,153,153,0.7); }

.outer-menu .menu > div > div > ul > li > a:hover {color: #fff; border-bottom: 2px dotted rgba(255,250,240,0.7);}

    .outer-menu .menu > div > div > ul > li.current_page_item > a:hover {background: none !important; color: rgba(153,153,153,0.7);}

.outer-menu .menu > div > div > ul > li.current_page_item > a:hover {border-bottom: none !important;}


.outer-menu .menu > div > div > ul > li.contact {margin-bottom: 1vw;}

.outer-menu .menu > div > div > ul > li.contact > a {
  font-size: 2vw !important; text-transform: revert !important; font-weight: 300 !important;
}

nav button {margin-top: 1vw; background: var(--ltGold); color: #000}
  nav button:first-of-type {margin-right: 2vw;}
nav button a {color: #000 !important;}


@media screen and (max-width: 1000px) {

  .outer-menu .checkbox-toggle, .outer-menu .hamburger {width: 8vw !important;
    height: 8vw !important;
    background: rgba(10, 115, 145, 1);
    border-radius: 50%;
    padding: 2vw;}

  .outer-menu .menu > div > div > ul > li > a {font-size: 8vw !important;}
  .outer-menu .menu > div > div > ul > li {margin: 0 0 2.5vw 0; text-align: center;}

  .outer-menu .menu > div > div > ul > li.contact > a {font-size: 3vw !important;}

}