* {
  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;
  overflow-y: 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;
}


#topBar 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;
  font-family     : bryantregular;
  font-size       : 2vh;
  border-left     : 1px solid #808080;
  text-decoration:  none;

}

li a.active {
  color         : #00B9EE;
  font-family   : bryantboldcondensed;
  text-decoration:  none;

}

li a.hover {
  text-decoration:  none;
}

.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;
}

.stepBox {
  padding         : 0px;
  margin          : 0.5vh;
  height          : 20vh;
  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               : 57vw;
  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     : 7vh;
  color         : white;
  margin        : 0px;
  padding       : 0px;
}

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


.others{
  width               : 35vw;
  height              : 18vh;
  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     : center;
  align-items         : center;

}



.btnBox {

  margin              : 0px 1vh;
  padding             : 0px;
  width               : 14.5vw;
  height              : 14vh;

  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;

}



.btn {
  background          : rgba(255,255,255,0.2);
  height              : 5.5vh;
  width               : 12.5vw;
  padding             : 0px;
  margin              : 1vh;
  border-radius       : 5vh; 
  
  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;
  font-size           : 2vh;
  color               : white;
}

.overview {
  background          : rgba(255,255,255,0.2);
  height              : 5.5vh;
  width               : 12.5vw;
  padding             : 0px;
  margin              : 1vh;
  border-radius       : 5vh; 
  
  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;
  font-size           : 2vh;
  color               : white;
  cursor              : pointer;
}



.btnBox :link    {
  text-decoration:  none;
  color           : white;

  } 

.btnBox :visited {
  text-decoration:  none;
  color           : white;

  } 

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

  } 


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


#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   : row wrap;
  justify-content     : center;
  align-items         : center;
  display             : none;

}


.contentCard {

  background          : white;
  height              : 80vh;
  width               : 70vw;
  padding             : 0px;
  margin              : auto;
  margin-top          : 10vh;
  border-radius       : 3vh;


  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             : 1100;
}


.contentCardTop {

  background          : #00b9ee;
  height              : 12vh;
  width               : 70vw;
  padding             : 0px;
  margin              : 0px;
  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;
}

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       : 13vh;
  right     : 17.5vw;
  color     : red;
  cursor    : pointer;
  width     : 6vh;
  height    : 6vh;
}

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

.contentCardMid {
  height              : 18vh;
  width               : 66vw;
  margin              : 0px 2vw;
  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;
  border-bottom       : solid 1px #00b9ee;
}

.focus {
  width     : 33vw;
  height    : 10vh;
  margin    : auto;
  padding   : 1vw 0px;
  list-style          : none;
  
  display             : -webkit-box;
  display             : -moz-box;
  display             : -ms-flexbox;
  display             : -webkit-flex;
  display             : flex;
  
  -webkit-flex-flow   : column nowrap;
  justify-content     : flex-start;
  align-items         : flex-start;

  font-family         : bryantregular;
  font-size           : 3vh;
  color               : #00b9ee;
  border-right        : solid 1px #00b9ee;

}

.focus p {
  margin              : 1vh 3vh;
}



.resourceIcon {
  width     : 33vw;
  height    : 12.5vh;
  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 {
  background-image    : url(../img/ui/res_video.png);
  background-size     : 10vh 10vh;
  width               : 10vh;
  height              : 10vh;
  margin              : 0px 1vw;
  background-repeat   : no-repeat;
}

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

}

#res_icon_pc {
  background-image    : url(../img/ui/res_pc.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;
}

.contentCardBtm {
  height              : 46vh;
  width               : 66vw;
  margin              : 2vh 2vw;

  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;
}

.purpose {
  width               : 33vw;
  height              : 40vh;
  margin              : 0px;
  padding             : 1vw 0px;
  
  display             : -webkit-box;
  display             : -moz-box;
  display             : -ms-flexbox;
  display             : -webkit-flex;
  display             : flex;
  
  -webkit-flex-flow   : column nowrap;
  justify-content     : flex-start;
  align-items         : flex-start;

  font-family         : bryantregular;
  font-size           : 2.5vh;
  color               : #00b9ee;

}


.vocabulary {
  width               : 33vw;
  height              : 40vh;
  margin              : 0px;
  padding             : 1vw 0px;
  
  display             : -webkit-box;
  display             : -moz-box;
  display             : -ms-flexbox;
  display             : -webkit-flex;
  display             : flex;
  
  -webkit-flex-flow   : column nowrap;
  justify-content     : flex-start;
  align-items         : flex-start;

  font-family         : bryantregular;
  font-size           : 2.5vh;
  color               : #00b9ee;

}

.contentCardBtm ul {
  margin              : 0px;
  list-style-type     : disc;
  list-style-position : outside;
  color               : #00b9ee;
}


.contentCardBtm li {
  float               : left;  
  margin              : 0px;
}