@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(20%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}


.button_container {
  display: block;
  position: fixed;
  top: 12px;
  left: 16px;
  height: 27px;
  width: 35px;
  cursor: pointer;
  z-index: 1000;
  -webkit-transition: opacity .25s ease;
          transition: opacity .25s ease;
}
.button_container:hover {
  opacity: .7;
}
.button_container.active .top {
  -webkit-transform: translateY(11px) translateX(0) rotate(405deg);
      -ms-transform: translateY(11px) translateX(0) rotate(405deg);
          transform: translateY(11px) translateX(0) rotate(405deg);
  background: #fff;
}
.button_container.active .middle {
  opacity: 0;
  background: #fff;
}
.button_container.active .bottom {
  -webkit-transform: translateY(-11px) translateX(0) rotate(315deg);
      -ms-transform: translateY(-11px) translateX(0) rotate(315deg);
          transform: translateY(-11px) translateX(0) rotate(315deg);
  background: #fff;
}
.button_container span {
  background: #000;
  border: none;
  border-radius: 4px;
  height: 4px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all .35s ease;
          transition: all .35s ease;
  cursor: pointer;
}
.button_container span:nth-of-type(2) {
  top: 11px;
}
.button_container span:nth-of-type(3) {
  top: 22px;
}	  

.overlay {
  position: fixed;
  background: rgb(250,237,139);
  background: linear-gradient(30deg, rgba(250,237,139,1) 0%, rgba(238,174,202,1) 39%, rgba(148,187,233,1) 68%, rgba(152,212,196,1) 100%);
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .35s, visibility .35s, height .35s;
          transition: opacity .35s, visibility .35s, height .35s;
  overflow: hidden;
  z-index: 998;
}
.overlay.insta { z-index: 1; }
.overlay.open {
  opacity: 1.0;
  visibility: visible;
  height: 100%;
}
.overlay.open li { display: block; height: auto; margin-bottom: 30px; }
.overlay.open li {
  -webkit-animation: fadeInRight .5s ease forwards;
          animation: fadeInRight .5s ease forwards;
  -webkit-animation-delay: .35s;
          animation-delay: .35s;
  opacity: 0;
}
.overlay.open li:nth-of-type(2) { clear:right;
  -webkit-animation-delay: .65s;
          animation-delay: .65s;
}
.overlay.open li:nth-of-type(3) { clear:both;
  -webkit-animation-delay: .5s;
          animation-delay: .5s;
}
.overlay.open li:nth-of-type(4) {
  -webkit-animation-delay: .7s;
          animation-delay: .7s;
}
.overlay.open li:nth-of-type(5) {
  -webkit-animation-delay: .8s;
          animation-delay: .8s;
}
.overlay.open li:nth-of-type(6) {
  -webkit-animation-delay: .9s;
          animation-delay: .9s;
}

nav {
  position: relative;
  height: 75%;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  text-align: center;
  border-top: none; border-bottom: none;
  color: #fff;
}
.insta nav { top: 70%; }
nav a {
  color: #FFF;
  display: inline;
  font-family: 'smoothysans';
  font-size: 2.5vw;
  height: 2.5vw;
  position: relative;
  opacity: 1.0;
  text-decoration: none;
  overflow: hidden;
  border: none;
  padding: 0 10px;
}
nav a:hover, nav a:focus, nav a:active {
  color: #FFF;
}

nav a.unavailable { opacity: 0.5; }
nav a.unavailable:before, nav a.unavailable:after { display: none; }

ul ul { border: 2px solid #fff; border-radius: 5px; width: 44vw; margin-left: 4vw; margin-bottom: 4vw; padding: 30px; position: relative; }
.submenu { float: left; margin-bottom: 0 !important; }
.submenu li { margin-bottom: 10px !important; }
.submenu li:last-of-type { margin-bottom: 0px !important; }
.submenu a { font-family: 'brandon-grotesque'; font-size: 2vw; font-weight: 500; height: auto; display: inline-block; color: #fff; font-style: oblique; overflow: visible; padding: 0; }

.subTitle { font-family: 'smoothysans'; display: inline-block; font-size: 2.5vw; height: auto; font-style: normal; }
.subSubtitle { display: block; font-weight: 700; letter-spacing: 3px; padding-bottom: 5px; }

nav a.title { margin-bottom: 30px; }

nav a:before, nav a:after, .subTitle:before, .subTitle:after { content:''; height:4px; width:0; bottom:-6px; position:absolute; background: #FFF; transition:0.2s ease all; -moz-transition:0.2s ease all; -webkit-transition:0.2s ease all; }
nav a:before, .subTitle:before { left: 50%; border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
nav a:after, .subTitle:after { right: 50%; border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
nav a:hover:before, nav a:hover:after { width: calc(50% + 5px); }
.subTitle:hover:before, .subTitle:hover:after { width: calc(25% + 10px); }

.submenu a:before, .submenu a:after { height:2px; bottom:-4px; }
.submenu a.title:before, .submenu a.title:after { height:0px; bottom:-4px; }


.submenu:nth-of-type(2):after {
    content: "Currently paused due to COVID-19 and closed to new subscribers";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-45%, -50%);
    width: auto;
    color: #000;
    text-align: center;
    font-size: 2vw;
}

@media screen and (max-device-width: 850px) {
	.overlay.open li { margin-bottom: 15px; }
	nav { height: 80%; }
	ul ul { width: 92vw; padding: 15px; position: relative; }
	nav a { font-size: 7vw; height: 7vw; }
	nav a.title { margin-bottom: 0px; }
	.subTitle { font-size: 7vw; }
	.submenu a { font-size: 5vw; }

}
@media screen and (max-width: 855px) and (orientation: landscape) {
	nav a { font-size: 3vw; height: 3vw; }
	.subTitle { font-size: 3vw; }
	.submenu a { font-size: 2vw; }

}
@media screen and (max-width: 1024px) and (orientation: landscape) {
	.overlay.open li { margin-bottom: 15px; }
	nav { height: 80%; }
	ul ul { width: 44vw; padding: 15px; position: relative; }
	nav a { font-size: 3vw; height: 3vw; }
	nav a.title { margin-bottom: 0px; }
	.subTitle { font-size: 3vw; }
	.submenu a { font-size: 2vw; }

}

@media screen and (max-width: 550px) {
	.overlay.open li { margin-bottom: 15px; }
	nav { height: 80%; }
	ul ul { width: 92vw; padding: 15px; position: relative; }
	nav a { font-size: 7vw; height: 7vw; }
	nav a.title { margin-bottom: 0px; }
	.subTitle { font-size: 7vw; }
	.submenu a { font-size: 5vw; }
	.submenu:nth-of-type(2):after { font-size: 5vw; }

}


@media only screen and (max-width: 1024px) {
	.featherlight .featherlight-content { padding: 0 !important; border-bottom: 0 !important; max-height: 80vh; }
}