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

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

.row {
	width 		: 100vw;
	padding 	: 0px;
	margin 		: 0px;
}

.header{
    height 		: 12vh;
   	width 		: 100vw;
	padding 	: 0px;
	margin 		: 0px;
	background  : none;
}


.footer{
    height 		: 8vh;
   	width 		: 100vw;
	padding 	: 0px;
	margin 		: 0px;
	display 	: flex;
	justify-content : space-between;
}

.mainArea {
  	max-width 	: 100%;
  	margin-left : auto;
  	margin-right: auto;
    height 		: 80vh;
   	width 		: calc(100vw - 24vh);
	padding 	: 0px;
}


.contentArea {
   	width 		: calc(100vw - 24vh);
	height 		: 79vh;
	position 	: relative;
	margin 		: 0px; 
	padding 	: 0px;
}


.iframe {
   	width 		: calc(100vw - 24vh);
	height 		: 79vh;
	position 	: relative;
	margin 		: 0px; 
	padding 	: 0px;
}


.hidden {
	display 	: none;
} 

.click {
	background 	: #00b9ee;
}

.static {
	background 	: rgba(255,255,255,0.25)
}


.left {
	position 	: absolute;
	top 		: 12vh;
	left 		: 0px;
	padding 	: 0px;
	margin 		: 0px;
	background 	: none;
	width 		: 10vh;
	height 		: 80vh;
}

.right {
	position 	: absolute;
	top 		: 12vh;
	right 		: 0px;
	padding 	: 0px;
	margin 		: 0px;
	background 	: none;
	width 		: 10vh;
	height 		: 80vh;

}

#leftNav {
	position 	: absolute;
	top 		: 12vh;
	left 		: 0px;
	padding 	: 0px;
	margin 		: 0px;
	background 	: none;
	width 		: 10vh;
	height 		: 80vh;
}

#rightNav {
	position 	: absolute;
	top 		: 12vh;
	right 		: 0px;
	padding 	: 0px;
	margin 		: 0px;
	background 	: none;
	width 		: 10vh;
	height 		: 80vh;
	display 	: none;
}


#leftNavTop{
	position 	: relative;
	margin 		: 0px;
	padding 	: 0px;
	top 		: 15vh;
    border-top-right-radius: 3vh;
    width		: 10vh;
    height		: 3vh;
	background 	: rgba(255,255,255,0.25);
	z-index 	: 100; 
}

#rightNavTop{
	position 	: relative;
	margin 		: 0px;
	padding 	: 0px;
	top 		: 15vh;
    border-top-left-radius: 3vh;
    width		: 10vh;
    height		: 3vh;
	background 	: rgba(255,255,255,0.25);
}

.Nav1 {
	position 	: relative;
	top 		: 15vh;
	margin 		: 0px;
	padding 	: 0px;
	margin-top 	: 0.5vh;
    width		: 10vh;
    height		: 10vh;
	cursor 		: pointer;
}

.Nav2 {
	position 	: relative;
	top 		: 15vh;
	margin 		: 0px;
	padding 	: 0px;
	margin-top 	: 0.5vh;
    width		: 10vh;
    height		: 10vh;
	cursor 		: pointer;
}

.Nav3 {
	position 	: relative;
	top 		: 15vh;
	margin 		: 0px;
	padding 	: 0px;
	margin-top 	: 0.5vh;
    width		: 10vh;
    height		: 10vh;
	cursor 		: pointer;

}

.Nav4 {
	position 	: relative;
	top 		: 15vh;
	margin 		: 0px;
	padding 	: 0px;
	margin-top 	: 0.5vh;
    width		: 10vh;
    height		: 10vh;
    cursor 		: pointer;

}

#leftNavBtm {
	position 	: relative;
	margin 		: 0px;
	padding 	: 0px;
	top 		: 15vh;
    border-bottom-right-radius: 3vh;
	margin-top 	: 0.5vh;
    width		: 10vh;
    height		: 3vh;
	background 	: rgba(255,255,255,0.25);
}

#rightNavBtm {
	position 	: relative;
	margin 		: 0px;
	padding 	: 0px;
	top 		: 15vh;
    border-bottom-left-radius: 3vh;
	margin-top 	: 0.5vh;
    width		: 10vh;
    height		: 3vh;
	background 	: rgba(255,255,255,0.25);
}

#leftNavToggle {
	position 	: absolute;
	margin 		: 0px;
	padding 	: 0px;
	top 		: 50vh;
    border-top-right-radius: 2vh;
    border-bottom-right-radius: 2vh;
    width		: 3vh;
    height		: 10vh;
	background 	: rgba(255,255,255,0.25);
	cursor 		: pointer;
	display 	: none;

}

#rightNavToggle {
	position 	: absolute;
	margin 		: 0px;
	padding 	: 0px;
	top 		: 50vh;
	right 		: 0px;
    border-top-left-radius: 2vh;
    border-bottom-left-radius: 2vh;
    width		: 3vh;
    height		: 10vh;
	background 	: rgba(255,255,255,0.25);
	cursor 		: pointer;

}

.verticalLeft{
    -webkit-transform 		: rotate(90deg);
    -moz-transform 			: rotate(90deg);
    -o-transform 			: rotate(90deg);
    -ms-transform 			: rotate(90deg);
    transform 				: rotate(90deg);
    white-space 			: nowrap;
    display 				: block;
  	text-align 				: center;
    color 					: white;
  	font-family  			: bryantboldcondensed;
  	font-size 				: 2vh;
  	padding 				: 0px;
  	margin 					: 0px;
  	margin-top 				: 3vh;
}

.verticalRight{
    -webkit-transform 		: rotate(270deg);
    -moz-transform 			: rotate(270deg);
    -o-transform 			: rotate(270deg);
    -ms-transform 			: rotate(270deg);
    transform 				: rotate(270deg);
    white-space 			: nowrap;
    display 				: block;
  	text-align 				: center;
    color 					: white;
  	font-family  			: bryantboldcondensed;
  	font-size 				: 2vh;
  	padding 				: 0px;
  	margin 					: 0px;
  	margin-top  			: 4vh;
}

#leftNav img {
	padding 	: 0px;
	max-width 	: 10vh;
  	max-height 	: 10vh;
  	display 	: block;
    margin 		: auto;
}

#rightNav img {
	padding 	: 0px;
	max-width 	: 10vh;
  	max-height 	: 10vh;
  	display 	: block;
    margin 		: auto;
}

/* if I use relative, the title part will go to the next line. Why???!!!*/
/* also, i would like to have the height = width, but how would i express 100vw - 12vh*/


#homeBtn {
    position 	: absolute;
    top 		: 0px;
    left 		: 0px;
	height 	    : 12vh;
	width 		: 12vh;
	background 	: rgba(255,255,255,0.25);
}

#homeBtn img {
    max-width 	: 6vh;
  	max-height 	: 6vh;
    position 	: absolute;
    top 		: 3vh;
    left 		: 3vh;

}

#title {
    position 	: relative;
    left 		: 12vh;
    top 		: 0px;
	width 		: calc(100vw - 12vh);
	height 		: 12vh;
    padding 	: 0px;
	margin 		: 0px;	
	background  : none;
 
}


.breadcrumb {
	margin 		 : 0px;
	padding 	 : 0px;
	padding-top  : 1.25vh;
	padding-left : 2vh;
	padding-right: 0px;
	border-radius: 0px;
    height 		 : 4vh;
    font-size 	 : 1.5vh;
    background-color: #F1F1F1;
  	font-family  : bryantregular;
}

.breadcrumb a {
    color 		 : #808080;
}

.breadcrumb > .active {
  	font-family  : bryantboldcondensed;
}

.h3 {
	margin 		 : 0px;
	padding 	 : 0px;
    color 		 : #FAFAFA;
  	font-family  : bryantregular;
}

#currentSegmentName {
	margin 		 : 0px;
	margin-top 	 : 2vh;
	padding  	 : 0px;
	padding-left : 2vh;
	padding-right: 0px;
    height 		 : 8vh;
    background 	 : none;
    font-size 	 : 4vh;
}





.sectionBox {
	height 		: 8vh;
	width 		: 16.6%;
	margin 		: 0 auto;
	padding-top : 2vh;
	padding-left : 2.5vw;
	padding-right : 2.5vw;
    line-height : 95%;
	background 	: rgba(255,255,255,0.1);
  	font-family : bryantboldcondensed;
	font-size 	: 2vh;
	text-align 	: center;
	color 		: white;
	margin-left : 0.1vw;
	margin-right: 0.1vw;
	border-bottom : solid 1vh rgba(255,255,255,0.3);
	cursor 		: pointer;
}

.sectionBox:hover{
	height 		: 8vh;
	width 		: 16.6%;
	margin 		: 0 auto;
	padding-top : 2vh;
	padding-left : 2.5vw;
	padding-right : 2.5vw;
    line-height : 95%;

	background 	: #00b9ee;
  	font-family : bryantboldcondensed;
	font-size 	: 2vh;
	text-align 	: center;
	color 		: white;
	margin-left : 0.1vw;
	margin-right: 0.1vw;
	border-bottom : solid 1vh rgba(255,255,255,0.3);
	cursor 		: pointer;
}

.sectionBoxActive{
	height 		: 8vh;
	width 		: 16.6%;
	margin 		: 0 auto;
	padding-top : 2vh;
	padding-left : 2.5vw;
	padding-right : 2.5vw;
    line-height : 95%;

	background 	: #00b9ee;
  	font-family : bryantboldcondensed;
	font-size 	: 2vh;
	text-align 	: center;
	color 		: white;
	margin-left : 0.1vw;
	margin-right: 0.1vw;
	border-bottom : solid 1vh rgba(255,255,255,0.3);
	cursor 		: pointer;
}

.sectionBoxClicked{
	height 		: 8vh;
	width 		: 16.6%;
	margin 		: 0 auto;
	padding-top : 2vh;
	padding-left : 2.5vw;
	padding-right : 2.5vw;
    line-height : 95%;
	background 	: rgba(0,185,238,0.25);
  	font-family : bryantboldcondensed;
	font-size 	: 2vh;
	text-align 	: center;
	color 		: white;
	margin-left : 0.1vw;
	margin-right: 0.1vw;
	border-bottom : solid 1vh rgba(255,255,255,0.3);
}