* {
  margin:0;
  padding:0;
  text-decoration: none!important;
  box-sizing : border-box;
}
html{
  scroll-behavior: smooth;
}
/*navigation start*/

.nav{
  width: 100%;
  height: 50px;
  position: fixed;
  top: 3vh;
  z-index: 995;

}
.nav2{
  width: 100%;
  padding-bottom: 3vh;
  position: fixed;
  padding-top: 3vh;
  z-index: 995;
  background-color: #fff;
  overflow: visible;
}
.nav-left{
  float: left;
  width: 13%;
  height: 50px;
  border:none;
  background: none;
  position: relative;
  z-index: 999;


}
.nav-right{
  float: right;
  width: 13%;
  height: 50px;
  z-index: 999;
}
.nav-right-menu{
  float: right;
  width: 13%;
  height: 50px;
  z-index: 999;
  top: 3%;
  right: 0;


  position: absolute;
}

.menu-butt{
  width: 35px;
  height: 22px;
  margin-left: 54%;
  background-image: url("assets/images/burger.svg");

}
.arrow-container{
  width: 4%;
  position: fixed;
  bottom: 8vh;
  left:  48%;
  z-index: 990;
}
.arrow{
  transform: translateY(0vh);
  margin-left: auto;
  margin-right: auto;
  transition: all .5s ease-out;

}
.arrow:hover{
  opacity: .5;
    transition: all .5s ease-out;
}
.arrow-container.fade-out{
  opacity: 0;
  visibility: hidden;
  
  transition: all .5s ease-out;
}
.burger{
  opacity: 1;
  transition: all .5s ease-out;
   cursor: pointer;
}
.burger:hover{
  opacity: .5;
  transition: all .5s ease-out;
}
.nav-butt{
  width: 25px;
  height: 25px;
  margin-left: 24%;
  display: block;
  opacity: 1;
  transition: all .5s ease-out;

}

.nav-butt:hover{
  opacity: .5;
  transition: all .5s ease-out;
}

.nav-butt-spacer{
  height: 20px;
}

.logo-container{
  width: 74%;
  float:left;
  margin-right: auto;
  margin-left: auto;
  z-index: 900;
}

.quote-mark{
  width: 60px;
  height: 40px;

}
.quote-mark2{
  width: 60px;
  height: 40px;
  float: right;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);

}
.quote-padding{
  padding-top: 20px;
}


.text1, .text2, .text3, .text4, .text5, .text6 { /*display: none;*/ 
position: absolute;
display: none;

}
.quote-container{
  position: relative;
  padding-top: 5vh;
}
.logo{
/*  width: 360px;*/
  width: 140px;
  margin-left: auto;
  margin-right: auto;

   transform: translateY(0vh);
    transition: all 1s ease-out;
}
.logo-menu{
/*  width: 360px;*/
  width: 140px;
  margin-left: auto;
  margin-right: auto;
  z-index: 999;
  padding-top: 3vh;
  
 }


.logo.fade-in {
      width: 400px;
    transform: translateY(20vh);
}
.logo.fade-out {
    opacity: 0;
    
}
.landing.{
  opacity: 0;
}
.landing.fade-in{
  opacity: 1;
}
/*navigation start*/

.main-container{
  width: 100%;
 
}
.landing-container{
  width: 100%;
  background-color: #c8e8e8;
}
.landing-container2{
  width: 100%;
  

}
.subhead2{
 
  font-family: 'Source Sans Pro', sans-serif;
      font-size: 1.2vw;color: #5baba5;

}
.landing-content{
  width: 74%;
  height: 90vh;

  margin-left: auto;
  margin-right: auto;
}
.landing-content2{
  width: 74%;
  height: 90vh;
z-index: 990;
  margin-left: auto;
  margin-right: auto;
  
  position: relative;
}
.menu-container{
  width: 100%;
  background-color: #fff;
  z-index: 990;
  position: relative;
  overflow: auto;
  padding-bottom: 14%;
}
.menu-content{
  width: 74%;
  
  background-color:  #fff;
  margin-left: auto;
  margin-right: auto;
  

}
.about-container{
  width: 100%;
  background-color: #c8e8e8;
  z-index: 990;
  position: relative;
  overflow: auto;
  padding-bottom: 10vh;

}
.menu-custom-container{
  width: 100%;
  background-color: #ebf9f9;
  z-index: 990;
  position: relative;
  overflow: auto;
  padding-bottom: 10vh;

}
.about-content{
  width: 74%;
  
  background-color:  #c8e8e8;
  margin-left: auto;
  margin-right: auto;
}
.clients-container{
  width: 100%;
  background-color: #211f5e;
  z-index: 990;
  position: relative;
  overflow: auto;
  padding-bottom: 14%;

}
.clients-content{
  width: 74%;

  background-color:  #211f5e;
  margin-left: auto;
  margin-right: auto;
}

.footer-container{
  width: 100%;
  background-color: #211f5e;
  z-index: 990;
  position: relative;
}
.footer-content{
  width: 74%;
  height: 70px;
  background-color:  #211f5e;
  margin-left: auto;
  margin-right: auto;
}
.footer-butt-container{
  display: inline;
  
}

.footer-type-container-left{
  float: left;
}
.footer-type-container-right{
  float: right;
}
.footer-butt{
  width: 14px;
  height: 14px;
  display: inline;
  margin-left: 5px;

}
.footer-line{
  width: 100%;
  height: 1px;
  background-color: #c8e8e8;
  display: block;
  margin-bottom: 20px;
}

.rule{
  height: 1px;
  background-color: #c8e8e8;
  margin-top: 50px;
  margin-bottom: 50px;
}
.rule-custom{
  height: 1px;
  background-color: #c8e8e8;
  margin-top: 50px;
  margin-bottom: 50px;
  width: 80%;
}
.rule2{
  height: 1px;
  background-color: #c8e8e8;
  margin-top: 2.5vh;
}
.rule3{
  height: 1px;
  background-color: #fff;
  margin-top: 50px;
  margin-bottom: 20px;
  width: 50%;
}


.event-menu-container{
  width: 50%;
  float: right;
  margin-top: 14vh;
  transition: all 1s ease-out;

}
.event-menu-container.fadein3{
  opacity: 1;
  transition: all 1s ease-out;

}
.event-menu-item{
 
}
.event-spacer{
  
  height: 50px;
  width: 100%;
}

.event-menu-butt{
  height: 50px;
  width: 50%;
  background-color: #fff;
  border: 2px;
  border-style: solid;
  border-color: #7ec4bf;
  transition: all .5s ease;
  margin-top: 20px;
}
.event-menu-butt2{
  height: 50px;
  width: 50%;
  background-color: #ebf9f9;
  border: 2px;
  border-style: solid;
  border-color: #7ec4bf;
  transition: all .5s ease;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}
.event-menu-custom{
  
}
.event-menu-custom-header{

  width: 100%;

  padding-top: 10vh;
}
.event-menu-custom-header h1{
text-align: center;
color: #7ec4bf;
}
.event-menu-butt:hover{
  background-color: #7ec4bf;
  transition: all .5s ease;
   border-color: #7ec4bf;
}

.event-menu-butt:hover .butt-type{
  color: #fff;
  transition: all .5s ease;
}

.event-menu-butt2:hover{
  background-color: #7ec4bf;
  transition: all .5s ease;
   border-color: #7ec4bf;
}

.event-menu-butt2:hover .butt-type{
  color: #fff;
  transition: all .5s ease;
}


.event-rollover-hidden{
   height: 0;
  opacity: 0;
  transition: opacity 1s ease;
  transition: height .5s ease;
}
.event-menu-header-container{
  width: 100%;
  height: 200px;
  background-color: #7ec4bf;}
.glass-img{
  width: 80%;
  bottom: 0;
  z-index: 900;
  position: fixed;
}
.about-img-mobile{
  display: none;
}
.about-img-desktop{
  display: inherit;
}
.about-photo-bio-container:hover .about-bio-containerL{
  opacity: 1;
  transition: opacity 1s ease;
}


.about-photo-bio-container:hover .about-bio-containerR{
  opacity: 1;
  transition: opacity 1s ease;
}

/*fonts start*/

h1{
  font-family: 'Josefin Sans', sans-serif;
  font-size: 3.8vw;
  line-height: 4vw;
  
}
h2{
  font-family: 'Josefin Sans', sans-serif;
  font-size: 2.3vw ;
  line-height: 3vw;
}
h3{
  font-family: 'Josefin Sans', sans-serif;
  font-size:  1.8vw;
  line-height: 1.65vw;
}
h4{
  font-family: 'Source Sans Pro', sans-serif;
  font-size: .8vw;
  line-height: 1vw;
}
p{
  font-family: 'Source Sans Pro', sans-serif;
  color: #21205e;
  font-size: 1.32vw;
  line-height: 1.65vw;
}
.big-paragraph{
  font-size: 1.8vw;
  line-height: 2vw;
}

.contact-type{
  padding-top: 11px;

}
.vert-rule{
  height: 20vh;
  background-color: #7ec4bf;
  width: 1px;
  margin-right: 3%;
  margin-left: 3%;
  float: left;
  margin-top: 14vh;
  opacity: 0;
  transform: translateY(50px);
    transition: all 1s ease-out;
}

.vert-rule.fade-in {
    opacity: 1;
    transform: translateY(0);
}
.landing-type-container{
  width: 35%;
  padding-top: 20vh;
  float: left;
  clear: both;
}
.landing-img-container{
  width: 100%;
}
.landing-type-container2{
  width: 38%;
  padding-top: 14vh;
  float: left;
  clear: both;
  opacity: 0;
   transform: translateY(50px);
    transition: all 1s ease-out;
}
.landing-type-container2.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.landing-type-container3{
  width: 29%;
  padding-top: 10vh;
  float: left;
  text-align: center;
  opacity: 0;
   transform: translateY(50px);
    transition: all 1s ease-out;
}
.landing-type-container3.fade-in {
    opacity: 1;
    transform: translateY(0);
}
.landing-type-container4{
  width:100%;

  text-align: center;
  opacity: 0;
   transform: translateY(50px);
    transition: all 1s ease-out;
}
.landing-type-container4.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.event-menu-container.fade-in {
    opacity: 1;
    transform: translateY(0);
}
.event-menu-container{
  opacity: 0;
  transform: translateY(50px);
    transition: all 1s ease-out;
}

.about-photos-container{
  width: 50%;
  float: right;
  margin-top: 10vh;
  opacity: 0;
  transform: translateY(50px);
    transition: all 1s ease-out;
}

.about-photos-container.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.client-logo-container{
  width: 50%;
  float: right;
  height: 70%;
  margin-top: 10%;
  opacity: 0;
  transform: translateY(50px);
    transition: all 1s ease-out;
}
.client-logo-container.fade-in {
    opacity: 1;
    transform: translateY(0);
}


.white-headline{
  color: #fff;
  padding-bottom: 10px;
}
.navy-headline{
  color: #21205e;
  padding-bottom: 10px;
}
.teal-headline{
  color: #7ec4bf;
  padding-bottom: 10px;
}

.event-headline{
  color: #7ec4bf;
  
}
.event-headline-and{
  color: #c8e8e8;
}
.navy-sub a{
  color: #21205e;
  font-family: 'Source Sans Pro', sans-serif;
  transition: opacity 0.5s;
}

.navy-sub a:hover{
  color: #fff;
  transition: opacity 5s;
}
.event-descriptor{
  color: #21205e;
  font-family: 'Source Sans Pro', sans-serif;
  padding-top: 20px;
  padding-bottom: 40px;
}
.about-name{
  color: #ffffff;
  
}
.about-descriptor{
  color: #21205e;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
}
.white-sub{
  color: #fff;
  font-family: 'Source Sans Pro', sans-serif;
}
.white-sub2{
  color: #fff;
  font-family: 'Josefin Sans', sans-serif;
}
.name-spacer{
  padding-top: 30px;
}

.footer-type{
  color: #fff;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 12px;
}
.footer-type a{
  color: #fff;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 12px;
  text-decoration: none;

}

.footer-type a:hover{
  color: #c8e8e8;
}
.footer-type-teal{
  color: #c8e8e8;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 12px;
  padding-left: 5px;
  padding-right: 5px;
}
.footer-copyright{
  color: #fff;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 12px;
  text-decoration: none;

}
.butt-type{
  font-family: 'Josefin Sans', sans-serif;
    color: #7ec4bf;
    text-align: center;
    font-size: 15px;
    text-transform: uppercase;
    margin-top: 15px;
    letter-spacing: 2px;
  }

.custom-event-spacer{
  padding-top: 5vh;
}
.event-menu-custom-spacer{
   height: 12vh;
}

/*fonts end*/

.underline{
  height: 1px;
  width:100%;
  background-color: #FFF;
  margin-top: 50px;
  margin-bottom: 50px;
}

.client-logo-row{
  display: inline-block;
}

.client-logo{
  max-width: 33%;
  float: right;
  display: inline;
}



.about-photoL{
  width:60%;
  float: left;
  display: inline
}
.about-photoR{
  width:60%;
  float: right;
  display: inline
}
.about-bio-containerL{
   width:35%;
  float: left;
  display: inline;
  padding-top:5vh;
  opacity: 0;
  transition: opacity 1s ease;
  text-align: left;
}
.about-bio-containerR{
   width:35%;
  float: right;
  display: inline;
  padding-top:5vh;
  opacity: 0;
  transition: opacity 1s ease;


}


.overlay-hugeinc {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0s 0.5s;
}

.overlay-hugeinc.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s;
}

.overlay-hugeinc nav {
  perspective: 1200px;
}

.overlay-hugeinc nav ul {
  opacity: 0.4;
  transform: translateY(-25%) rotateX(35deg);
  transition: transform 0.5s, opacity 0.5s;
}

.overlay-hugeinc.open nav ul {
  opacity: 1;
  transform: rotateX(0deg);
}

.overlay-hugeinc.close nav ul {
  transform: translateY(25%) rotateX(-35deg);
}
.bio-rule{
  width: 150%;
  height: 1px;
  background-color: #fff;
  left: -50%;
  position: relative;
  margin-bottom: 10px;
  margin-top: 10px;
}
.bio-rule2{
  width: 146%;
  height: 1px;
  background-color: #fff;
  margin-bottom: 10px;
  margin-top: 10px;
}

.bio-rule-mobile{
  display: none;
}





.fade-in2{
  animation: animationFrames ease 2s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: animationFrames ease 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: animationFrames ease 2s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: animationFrames ease 2s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: animationFrames ease 2s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes animationFrames{
  0% {
    opacity:0;
    
  }
  100% {
    opacity:1;
    
  }
}

@-moz-keyframes animationFrames{
  0% {
    opacity:0;
    
  }
  100% {
    opacity:1;
   
  }
}

@-webkit-keyframes animationFrames {
  0% {
    opacity:0;
    
  }
  100% {
    opacity:1;
    
  }
}

@-o-keyframes animationFrames {
  0% {
    opacity:0;
    
  }
  100% {
    opacity:1;
    
  }
}

@-ms-keyframes animationFrames {
  0% {
    opacity:0;
   
  }
  100% {
    opacity:1;
    
  }
}









#container {
  margin: 0 auto;
  width: 400px;
}

ul {
  list-style: none;
}



    
.title {
  color: #7ec4bf;
  text-align: left;
  transition: all .5s ease-out;

  
}
.sub{
  height: 0px;
  opacity: 0;
  visibility: hidden;
  transition: all .5s ease-out;
  width:80%;
  color: #21205e;
  font-family: 'Source Sans Pro', sans-serif;
  padding-top: 0px;
 
}
    
li:hover .sub,li:active .sub { 
  opacity: 1;
  cursor: pointer;
  height:20vh; 
  padding-top: 20px;
  visibility: visible;
  transition: all .5s ease-out;


}

    
li:hover .title,li:active .title {
  text-decoration: underline;
  cursor: pointer;
  transition: all .5s ease-out;
}

.plus-sign{
  width:1vw;
  
  margin-bottom: 1.5vw;
  margin-left:1vw;

}
.event-break{
  display: none;
}

.small-screen-break{
  display: none;
}
.desktop-break{
  display: inline;
}
.mobile-hide{
  display: inline;
}
.mobile-show{
  display: none;
}













input {
  display: none;
}

.open {
  background-color: #7ec4bf;

  width: 24px;
  height: 4px;
  display: block;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  top: 8px;
}

.open:before {
  content: "";
  background-color: #7ec4bf;
  width: 24px;
  height: 4px;
  display: block;
  border-radius: 2px;
  position: relative;
  top: -8px;
  transform: rotate(0deg);
  transition: all 0.3s ease;
}

.open:after {
  content: "";
  background-color: #7ec4bf;
  width: 24px;
  height: 4px;
  display: block;
  border-radius: 2px;
  position: relative;
  top: 4px;
  transform: rotate(0deg);
  transition: all 0.3s ease;
}

.menuOpen {
  width: 40px;
  height: 40px;
  display: block;
  padding: 15px;
  cursor: pointer;
  float: left;
      margin-left: 54%;
}

.menuOpen:hover .open:before {
  top: -9px;
}

.menuOpen:hover .open:after {
  top: 5px;
}

.menu {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: #21205e;
}

.menu label {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 20px;
  top: 20px;
  background-size: 100%;
  cursor: pointer;
}

.menu .menuContent {
  position: relative;
  top: 50%;
  font-size: 54px;
  text-align: center;
  padding-bottom: 20px;
  margin-top: -360px;
  width: 80%;
  margin-right: auto;
  margin-left: auto;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  

}

.menu ul li a {
  display: block;
  color: white;
  text-decoration: none;
  transition: color 0.2s;
  font-size: 3vw;
  text-transform: uppercase;
  padding: 10px 0;
  font-weight: 900;
  font-family: 'Josefin Sans', sans-serif;


}

.menu ul li a:hover {
  color: #c8e8e8;
}

.menu ul li:hover {
  
}

.menuEffects {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s;
}

.menuEffects ul {
  transform: translateY(0%);
  transition: all 0.5s;
}

#menuToggle:checked ~ .menuEffects {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s;
}

#menuToggle:checked ~ .menuEffects ul {
  opacity: 1;
}

#menuToggle:checked ~ .menuOpen .open {
  background-color: transparent;
}

#menuToggle:checked ~ .menuOpen .open:before {
  content: "";
  background-color: white;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

#menuToggle:checked ~ .menuOpen .open:after {
  content: "";
  background-color: white;
  transform: rotate(-45deg);
  position: relative;
  top: 0;
  right: 0;
  z-index: 1;
}

#menuToggle:not(:checked) ~ .menuEffects ul {
  transform: translateY(-30%);
}


.asterisk{
  width: 100%;
  
}


.asterisk-copy{
  font-size: 1vw;
}