* {
  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, #F4A544); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#00b9ee, #F4A544); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#00b9ee, #F4A544); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#00b9ee,  #F4A544); /* 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   : bryantprobold;
  font-size     : 4vh;
  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;

}


.lightbox {
  position            : absolute;
  left                : 0px;
  top                 : 0px;

  background          : rgba(0,0,0,0.75);
  height              : 100vh;
  width               : 100vw;
  padding             : 0px;
  margin              : 0px;
  z-index             : 1000;

  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;
  display             : none;
}


.contentCard {

  background          : white;
  height              : 95vh;
  width               : 80vw;
  padding             : 0px;
  margin              : auto;
  margin-top          : 5vh;
  border-top-left-radius : 4vh;
  border-top-right-radius: 4vh;

  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         : flex-start;

  font-family         : bryantregular;
  font-size           : 2vh;
  color               : white;
  z-index             : 1000;
}


.contentCardTop {
  height              : 9vh;
  width               : 80vw;
  padding             : 0px;
  margin              : 0px;
  margin-bottom       : 2vh;
  border-top-left-radius: 3vh;
  border-top-right-radius: 3vh;
  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-family         : bryantregular;
  color               : white;
}

#contentCardTop1 {
  background          : #A2CE59;
}

#contentCardTop2 {
  background          : #F4A544;
}


h3 {
  float               : left;
  font-family         : bryantprobold;
  font-size           : 4vh;  
  line-height         : 100%;
  padding             : 0px;
  margin              : 0px;
  margin-left         : 3vh;

}

h4 {
  float               : left;
  font-family         : bryantregular;
  font-size           : 4vh;  
  line-height         : 100%;
  padding             : 0px;
  margin              : 0px;
  margin-left         : 3vh;
}

.closeBtn{
  position  : absolute;
  top       : 6.5vh;
  right     : 12vw;
  cursor    : pointer;
  width     : 6vh;
  height    : 6vh;
}

.closeBtn img{
  width     : 6vh;
  height    : 6vh;
}


.subtitle {
  height              : 7vh;
  width               : 80vw;  
  margin              : 0px;
  padding             : 0px 3vw;

  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;

  font-family         : bryantpromedium;
  font-size           : 3vh;
}




.resourceIcon {
  position  : absolute;
  top       : 14vh;
  right     : 10vw;

  width     : 33vw;
  height    : 10vh;
  margin    : auto;

  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-family         : bryantregular;
  color               : #00b9ee;

}


#res_icon_video_plants {
  background-image    : url(../img/ui/res_video_plants.png);
  background-size     : 10vh 10vh;
  width               : 10vh;
  height              : 10vh;
  margin              : 0px 1vw;
  background-repeat   : no-repeat;
}

#res_icon_book_plants {
  background-image    : url(../img/ui/res_book_plants.png);
  background-size     : 10vh 10vh;
  width               : 10vh;
  height              : 10vh;
  margin              : 0px 1vw;
  background-repeat   : no-repeat;

}

#res_icon_pc_plants {
  background-image    : url(../img/ui/res_pc_plants.png);
  background-size     : 10vh 10vh;
  width               : 10vh;
  height              : 10vh;
  margin              : 0px 1vw;
  background-repeat   : no-repeat;

}


#res_icon_video_body {
  background-image    : url(../img/ui/res_video_body.png);
  background-size     : 10vh 10vh;
  width               : 10vh;
  height              : 10vh;
  margin              : 0px 1vw;
  background-repeat   : no-repeat;
}

#res_icon_book_body {
  background-image    : url(../img/ui/res_book_body.png);
  background-size     : 10vh 10vh;
  width               : 10vh;
  height              : 10vh;
  margin              : 0px 1vw;
  background-repeat   : no-repeat;

}

#res_icon_pc_body {
  background-image    : url(../img/ui/res_pc_body.png);
  background-size     : 10vh 10vh;
  width               : 10vh;
  height              : 10vh;
  margin              : 0px 1vw;
  background-repeat   : no-repeat;

}


.res_num {
  position            : absolute;
  width               : 3vh;
  height              : 3vh;
  margin              : auto;

  margin-top          : 4vh;
  margin-left         : 6.2vh;
  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-family         : bryantprobold;
  color               : white;
  font-size           : 2vh;
}

.contentCard1 {
  height              : 15vh;
  width               : 80vw;
  padding             : 0px 2vw;
  margin              : 0px;

  list-style          : none;
  display             : -webkit-box;
  display             : -moz-box;
  display             : -ms-flexbox;
  display             : -webkit-flex;
  display             : flex; 
  -webkit-flex-flow   : row wrap;
  font-family         : bryantregular;
  justify-content     : space-between;
  align-items         : center;
}

.contentbox {
  height              : 12vh;
  width               : 15vw;
  padding             : 2vh;
  margin              : 0px auto;

  list-style          : none;
  display             : -webkit-box;
  display             : -moz-box;
  display             : -ms-flexbox;
  display             : -webkit-flex;
  display             : flex; 
  -webkit-flex-flow   : row wrap;
  justify-content     : space-around;
  align-items         : center;
  font-family         : bryantregular;
  color               : white;
  font-size           : 2vh;
}

.contentbox2 {
  height              : 12vh;
  width               : 13vw;
  padding             : 2vh;
  margin              : 0px auto;
  list-style          : none;
  display             : -webkit-box;
  display             : -moz-box;
  display             : -ms-flexbox;
  display             : -webkit-flex;
  display             : flex; 
  -webkit-flex-flow   : row wrap;
  justify-content     : space-around;
  align-items         : center;
  font-family         : bryantregular;
  color               : white;
  font-size           : 2vh;
}

.plantcolor {
  background          : #A2CE59;

}

.bodycolor {
  background          : #F4A544;
}


.contentCard2 {
  height              : 12vh;
  width               : 80vw;
  margin              : 0px;
  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     : flex-start;
  align-items         : flex-start;
  font-family         : bryantregular;
  background          : #f1f1f1;
  color               : #808080;

}


.contentCard2sub {
  height              : 12vh;
  width               : 38vw;
  margin              : 0px;

  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         : flex-start;
  font-family         : bryantregular;
  color               : #808080;
  font-size           : 2.1vh;
}

.contentCard2sub p{
  padding             : 0px 3vw;

}

.contentCard3 {
  height              : 17vh;
  width               : 80vw;
  padding             : 0px 2vw;
  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     : space-between;
  align-items         : center;
}

.contentCard4 {
  height              : 26vh;
  width               : 80vw;
  margin              : 0px;
  padding             : 0px;

  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         : flex-start;
  font-family         : bryantregular;
  font-size           : 2.1vh;
  line-height         : 95%;
  background          : #f1f1f1;
  color               : #808080;

}

#cc14 {
  border-bottom       : solid 1.5vh #A2CE59;

}

#cc24 {
  border-bottom       : solid 1.5vh #F4A544;

}


#plantsst {
  color       : #A2CE59;

}

#bodysst {
  color       : #F4A544;

}

.contentCard4 p {
  padding             : 0px 3vw;

}