body {
  overflow-x: hidden;
  overflow-y: scroll;
}

/*** Color Variables ***/
/*** Centering Hack ***/
/*** Header Styles ***/
header {
  width: 100vw;
  min-height: auto;
  background: #5661f2;
  display: -webkit-box;
  display: flex;
}

/*** Navigation Styles ***/


nav {
  width: 100%;
  height: 110px; 
  display: block; 
  position: fixed;
  z-index: 95000;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
    font-family: "Roboto",sans-serif;
    font-weight: 300;
     background: radial-gradient(1225px at 100% 100%, #3F7692 20%, #86C8C6 100%);
}
nav.navShadow {
  box-shadow: 0 4px 30px -5px rgba(0, 0, 0, 0.2);
  height: 75px; 
}
nav.navShadow #word-mark {
  opacity: 0;
}

#brand,
#menu, ul
 {
  display: inline-block;  
}
 

#brand {
padding-left: 40px;
position: relative;
top: 24%; 
display: block;
}

#logo {
  width: 55px;
  height: 55px;
  max-width: 25vw;
    max-height: 25vw;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
}
#logo img{ width: 100%; height: auto;}

#word-mark {
  width: auto;
  height: 30px;
  background: #fff;
  border-radius: 90px;
  position: relative;
   top: 4px;
  margin-left: 2%;
  opacity: 1;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  font-size: 20px;
  font-family: georgia;
  padding: 1px 12px 0 11px;
  display: inline-block;
}

/*** Menu Styles ***/
#menu { 
  padding-right: 40px;
  display: inline-block;
  position: absolute; 
  top: 35%;
  right: 0;
}
.navShadow #brand {  
  top: 13%; 
}
.navShadow #menu {  
  top: 30%; 
}
.coverheaderspace{ height: 110px;     width: 100%;  
    max-height: 40vw;    
  background: radial-gradient(1225px at 100% 100%, #3F7692 20%, #86C8C6 100%);
}


nav li {
  margin:  0 20px;
    list-style-type: none;  display: inline-block;
}
nav li a {
  width: auto;
  height: 30px;  
  border-radius: 90px;
  font-size: 20px;  
  color: black;
  background: #fff;
  text-decoration: none;  
  padding: 3px 12px 5px 11px; 
}

#menu-toggle {
  width: 55px;
   max-width: 25vw;  
  height: 55px;
    max-height: 25vw;
 background: #4C849B;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  border-radius: 50%;
  cursor: pointer;
  display: none;
}
#menu-toggle:hover .bar {
  width: 25px;
}
 
#menu-toggle.closeMenu .bar {
  width: 25px;
}
#menu-toggle.closeMenu .bar:first-child {
  -webkit-transform: translateY(7px) rotate(45deg);
          transform: translateY(7px) rotate(45deg);
}
#menu-toggle.closeMenu .bar:nth-child(2) {
  -webkit-transform: scale(0);
          transform: scale(0); 
}
#menu-toggle.closeMenu .bar:last-child {
  -webkit-transform: translateY(-7px) rotate(-45deg);
          transform: translateY(-7px) rotate(-45deg);
}

.bar {
  width: 25px;
  height: 2px;
  background: #fff;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.bar:nth-child(2) {
  width: 20px;
  margin: 5px 0;
}
.bar:last-child {
  width: 15px;
}

/*** Hero Section Styles ***/
#hero-section {
  width: 100%;
  min-height:  510px; 
  height:  auto;  
    margin:  0px; 
	padding: 50px 50px 0  ;
background: radial-gradient(1600px at 100% 100%, #144372 0%, #A0E7DA 100%);
}

#head-line {
  width: 520px;
  height: 30px;
  background: #fff;
  border-radius: 90px;
  position: relative;
}
#head-line:before, #head-line:after {
  content: "";
  height: 30px;
  border-radius: 90px;
}
#head-line:before {
  width: 360px;
  background: #fff;
  position: absolute;
  top: -60px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
#head-line:after {
  width: 200px;
  background: #fff;
  position: absolute;
  left: 50%;
  bottom: -60px;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}

/*** Section Styles ***/
section{
  width: 100%;
  height: auto;
  min-height: 500px;
  display: block;
  overflow: auto;
}

section.aa {
  background: #eee;
}
section.bb {
background:  #eee ;
 padding: 20px 0;
}

#heading {
  width: 120px;
  height: 20px;
  background: #fff;
  border-radius: 90px;
  margin-top: 40px;
}


@media screen and (max-width: 767px) {
    
    
 .coverheaderspace, nav { 
    background: radial-gradient(500px at 100% 100%, #538DA1 0%, #5C98A8 100%);
}
 
    
    nav.navShadow { height: 75px; }
    .navShadow #brand { top: 13%; }

  #menu-toggle {
    display: -webkit-box;
    display: flex;
margin: -25% 0 0 0; 
  }

  header {  
 width: 100%;
 max-height: 40vw;
}

nav ul {  
    position: absolute;
    display: block;
     height: 0px; 
    background: #4C849B;
	left: 0%;
    top: 70px;  
    box-shadow: none;
 opacity:0;
  }
  
   nav ul.showMenu {  
   visibility: visible;
 display: block; 
 height: auto;   
 max-height: auto;   
 position: absolute; 
 margin: auto;
 transform: translate(-75%,  0%);
 width: 100vw;
 /* word-break: break-word;  */
 white-space: nowrap;
 transition: 0.1s linear all; 
  opacity:1;
	}
	
 
   
  
    nav ul.showMenu li {
    height: 80px;
    opacity: 1;  
    visibility: visible;
	    width: 40%;
    display: inline-block;
  }

 nav li {
    width: 48%;
    height: 80px;
    float: left;
    padding-left: 13%;
    opacity: 0;
    visibility: hidden;
    margin-left: 0;
    -webkit-transition: all 0.1s  ;
    transition: all 0.1s  ;
  }
 nav li:first-child, nav li:nth-child(2) {
    margin-top: 35px;
  }

  #head-line {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
    
}


@media screen and (max-width: 400px) {   
#word-mark{display: none;}
  }
  
@media screen and (max-width: 380px) {  
    nav li { padding-left: 8%;  } 
 nav ul.showMenu { transform: translate(-65%,  0%);  } 
  }
  
  
@media screen and (max-width: 310px) {  
   nav li {     padding-left: 5%;  overflow: auto; }
}

@media screen and (max-width: 270px) {
     nav ul.showMenu { transform: translate(-40%,  0%);   } 
   }
   
@media screen and (max-width: 270px) {
     nav ul.showMenu {  
  width: 120vw;
  } 
   }
   
   @media screen and (max-width: 170px) {
   nav ul.showMenu li {   width: 90%;   }
    }
    
    
#youtube {
  position: fixed;
  right: 2vw;
  bottom: 2vh;
  font-size: 30px;
  color: #fff;
}