* {
  box-sizing: border-box;
}

/* This technique doesn't naturally cause horizontal overflow, but once there is natural vertical overflow, it causes horizontal overflow, so stopping here. */
body {
  overflow-x: hidden;
}




@font-face {
  font-family: bryantregular;
  src: url(../fonts/bryant/regular.otf);
}

@font-face {
  font-family: bryantregularcondensed;
  src: url(../fonts/bryant/regularcondensed.otf);
}

@font-face {
  font-family: bryantboldcondensed;
  src: url(../fonts/bryant/boldcondensed.otf);
}

@font-face {
  font-family: bryantmediumcondensed;
  src: url(../fonts/bryant/mediumcondensed.otf);
}

@font-face {
  font-family: bryantlightcondensed;
  src: url(../fonts/bryant/lightcondensed.otf);
}

@font-face {
  font-family: bryantprobold;
  src: url(../fonts/bryant/probold.otf);
}

@font-face {
  font-family: bryantpromedium;
  src: url(../fonts/bryant/promedium.otf);
}

body {
  background: #00b9ee; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#00b9ee, #A2CE59); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#00b9ee, #A2CE59); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#00b9ee, #A2CE59); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#00b9ee,  #A2CE59); /* Standard syntax (must be last) */
  width : 100vw;
  height: 100vh;
  margin : 0px;
  padding: 0px;
}

.container-fluid {
  height    : 100vh;
  width     : 100vw;
  padding   : 0px;
  margin    : 0px;
}

.header {
  height      : 5vh;
  width       : 100vw;
  padding     : 0px;
  margin      : 0px;
  background  : rgba(255,255,255,.7);
}


#backBtn {
  position    : absolute;
  top         : 0px;
  left        : 0px;
  background  : rgba(0,0,0,.4);
  height      : 5vh;
  width       : 5vh;
  padding     : 0px;
  margin      : 0px;
  display     : flex;
  align-items : center;
  justify-content: center;
  cursor      : pointer;
  z-index     : 100;
}



#backBtn img {
  margin      : 0px;
  padding     : 0px;
  height      : 2vh;
  width       : 2vh;
  margin-left : -0.5vh;
  cursor      : pointer;

}


#topBar{
  position    : absolute;
  margin      : 0px;
  padding     : 0px;
  height      : 5vh;
  width       : calc(100vw - 5vh);
  display     : flex;
  align-items : center;
  justify-content: flex-end;
}


ul {
    list-style-type : none;
    margin      : 0px;
    padding     : 0px;
    overflow    : hidden;
}

li {
    float: right;
}

li a {
  color           : #808080;
  text-align      : center;
  margin          : 0px;
  padding         : 0px 1vw;
  text-decoration : none;
  font-family     : bryantregular;
  font-size       : 2vh;
  border-left     : 1px solid #808080;

}

li a.active {
  color         : #00B9EE;
  font-family   : bryantboldcondensed;
}



.mainArea {
  position            : relative;
  height              : 85vh;
  width               : 92vw;
  padding             : 0px;
  margin              : auto;
  margin-top          : 5vh;
  display             : flex;
  list-style          : none;
  
  display             : -webkit-box;
  display             : -moz-box;
  display             : -ms-flexbox;
  display             : -webkit-flex;
  display             : flex;
  
  -webkit-flex-flow   : column wrap;
  justify-content     : flex-start;
  align-items         : center;

}

.className {
  padding         : 0px;
  margin          : 10vh 0px;

  height          : 10vh;
  width           : 92vw;
  list-style      : none;
  
  display         : -webkit-box;
  display         : -moz-box;
  display         : -ms-flexbox;
  display         : -webkit-flex;
  display         : flex;
  
  -webkit-flex-flow   : row wrap;
  justify-content     : flex-start;
  align-items         : center;
  
  justify-content     : flex-start;
  align-items         : center;
  padding-left        : 2vw;

}

.stepBox {
  padding         : 0px;
  margin          : 0px;
  height          : 35vh;
  width           : 92vw;
  list-style      : none;
  
  display         : -webkit-box;
  display         : -moz-box;
  display         : -ms-flexbox;
  display         : -webkit-flex;
  display         : flex;
  
  -webkit-flex-flow   : row wrap;
  justify-content     : flex-start;
  align-items         : center;
  
  background      : rgba(255,255,255,0.25);

}

.text{
  width               : 25vw;
  height              : 18vh;
  line-height         : 9vh;
  padding-left        : 2vw;
  color               : white;
  display             : -webkit-box;
  display             : -moz-box;
  display             : -ms-flexbox;
  display             : -webkit-flex;
  display             : flex;
      
  -webkit-flex-flow   : row wrap;
  justify-content     : flex-start;
  align-items         : center;

}

h1 {
  text-align    : left;
  font-family   : bryantpromedium;
  font-size     : 7vh;
  color         : white;
  margin        : 0px;
  padding       : 0px;
}

h2 {
  text-align    : left;
  font-family   : bryantregular;
  font-size     : 6vh;
  color         : white;
  margin        : 0px;
  padding       : 0px;
  margin-left   : 2vw;
}


.others{
  width               : 67vw;
  height              : 30vh;
  margin              : 0px;
  padding             : 0px;
  color               : white;
  display             : -webkit-box;
  display             : -moz-box;
  display             : -ms-flexbox;
  display             : -webkit-flex;
  display             : flex;
      
  -webkit-flex-flow   : row wrap;
  justify-content     : flex-end;
  align-items         : center;

}

.prevSection {
  width               : 67vw;
  height              : 30vh;
  margin              : 0px;
  padding             : 0px;
  padding-right       : 1vh;
  color               : white;
  display             : -webkit-box;
  display             : -moz-box;
  display             : -ms-flexbox;
  display             : -webkit-flex;
  display             : flex;
      
  -webkit-flex-flow   : row wrap;
  justify-content     : flex-end;
  align-items         : center;

}

.sectionName {
  margin              : 1vh;
  padding             : 0px;
  width               : 15vw;
  height              : 28vh;

  list-style          : none;
  
  display             : -webkit-box;
  display             : -moz-box;
  display             : -ms-flexbox;
  display             : -webkit-flex;
  display             : flex;
  
  -webkit-flex-flow   : column wrap;
  justify-content     : center;
  align-items         : center;
  font-size           : 2.5vh; 
  font-family         : bryantregular;
  background          : #00B9EE;

}

.sectioninfo{
  font-size           : 2vh; 
  font-family         : bryantregular;
  padding             : 2vh;
  color               : white;
}


.quickStart {

  background          : white;
  height              : 4.5vh;
  width               : 13vw;
  padding             : 0px;

  list-style          : none;
  
  display             : -webkit-box;
  display             : -moz-box;
  display             : -ms-flexbox;
  display             : -webkit-flex;
  display             : flex;
  
  -webkit-flex-flow   : row wrap;
  justify-content     : center;
  align-items         : center;
  
  font-size           : 2vh; 
  font-family         : bryantprobold;
  color               : #00B9EE;
  cursor              : pointer;
  border-radius       : 10vh;

}

.sectioninfo img{
  margin              : 0px;
  padding             : 0px;
  width               : 7vh;
  height              : 7vh;  
}

.parts {
/*  margin              : 1vh;
*/ 
  margin              : 1vh 0px;
  margin-right        : 3vw;
  padding             : 0px;
  width               : 15vw;
  height              : 28vh;
  color               : white;
  padding-bottom      : 1vh;

  list-style          : none;
  
  display             : -webkit-box;
  display             : -moz-box;
  display             : -ms-flexbox;
  display             : -webkit-flex;
  display             : flex;
  
  -webkit-flex-flow   : column wrap;
  justify-content     : space-around;
  align-items         : center;
}



.unitTitle {
  height              : 14vh;
  width               : 14vw;
  padding             : 1vw;
  margin              : 0px;
  list-style          : none;
  
  display             : -webkit-box;
  display             : -moz-box;
  display             : -ms-flexbox;
  display             : -webkit-flex;
  display             : flex;
  
  -webkit-flex-flow   : row wrap;
  justify-content     : flex-start;
  align-items         : left;
  
  font-size           : 4vh; 
  font-family         : bryantregular;
  color               : white;


}

.topBtm {
  background          : rgba(255,255,255,1);
  height              : 4.5vh;
  width               : 13vw;
  padding             : 0px;
  margin              : 1vh;

  list-style          : none;
  
  display             : -webkit-box;
  display             : -moz-box;
  display             : -ms-flexbox;
  display             : -webkit-flex;
  display             : flex;
  
  -webkit-flex-flow   : row wrap;
  justify-content     : center;
  align-items         : center;
  
  font-size           : 2vh; 
  font-family         : bryantpromedium;
  cursor              : pointer;
  border-radius       : 10vh;


}

.parts a:link    {
  text-decoration:  none;
  color           : white;

  } 

.parts a:visited {
  text-decoration:  none;
  color           : white;

  } 

.parts a:hover   {
  text-decoration   : none;
  color           : #00b9ee;

  } 


.parts a:active  {
  text-decoration   : none;
  color           : white;
  } 


#plants {
  background  : #A2CE59;
  color       : #A2CE59;
}

#plants a {
  color       : #A2CE59;
}


#bodyParts {

  background  : #F4A544;
  color       : #F4A544;
}


#bodyParts a {
  color       : #F4A544;
}

#insects {
  background  : #A5559C;
  color       : #A5559C;

}

#marineMammals {
  background  : #23B3A9;
  color       : #23B3A9;

}