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

}

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

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

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

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

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

}

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


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

    color 		 : #FAFAFA;
  	font-family  : bryantregular;
}

#tipBtn{
    position 	: fixed;
	top 		: 5vh;
	right 		: 2vh;
	width 		: 6vh;
	height  	: 6vh;
	padding 	: 0px;
	margin 		: 0px;
	z-index 	: 0;
	cursor      : pointer;

}

#taskSide {
	float 		: left;
	background  : rgba(255,255,255,0.75);
	width 		: 24vw;
	height  	: 80vh;
	padding 	: 0px;
	margin 		: 0px;
}


.taskBox {
	position 	: relative;
	width 		: 24vw;
	height 		: 20vh;
	background  : rgba(255,255,255,1);
	padding 	: 2vh;
	margin 		: 0px;
	font-family : bryantregular;
	font-size 	: 2vh;
 }	

.taskSelected {
	background  : rgba(255,255,255,0.5);
}

.taskNum {
	float 		: left;
	width 		: 21vw;
	height 		: 3vh;
	font-family : bryantpromedium;
	font-size 	: 2vh;
	color 		: #00B9EE;
}

.line {
	float 		: left;
	width 		: 21vw;
	height 		: .5vh;
	background  : #00B9EE;
	margin 		: 1vh auto;
	padding 	: 0px;
	border-radius: 1vh;
}


.resourceIcon {
	position 	: relative;
	float 		: left;
	width 		: 3vh;
	height 		: 3vh;
	padding 	: 0px;
	margin 		: 0px;
	color  		: #00B9EE;

}

.resourceIcon img {
	width 		: 3vh;
	height 		: 3vh;
	color  		: #00B9EE;
	padding 	: 0px;
	margin 		: 0px;
}

.taskName {
	float 		: left;
	width 		: 21vw;
	height 		: 12.5vh;
	font-family : bryantregular;
	font-size 	: 2vh;
	color 		: #808080;

}

#contentSide{
	float 		: left;
	width 		: 76vw;
	height 		: 80vh;
	margin 		: 0px;
	padding     : 0px;
	background  : rgba(255,255,255,0.75);

}

#contentLoader{
   	width 			: 76vw;
	height 			: 53vh;
	position 		: relative;
	margin 			: 0px; 
	padding 		: 0px;
	background 		: rgba(255,255,255,0.25);
	display 		: flex;
	justify-content : center;
}

.scriptPart{
    padding 			: 0px;
	margin  			: 0px;
	height  			: 27vh;
	width   			: 76vw;

	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         : stretch;
	border-top 			: solid 1vh rgba(0,0,0,0.25);
	position 			: relative;

}


#scriptCarousel{
    padding 			: 0px;
	margin  			: 0px;
	height  			: 26vh;
	width   			: 76vw;

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

.arrowL, .arrowR {
    padding 			: 0px;
	margin  			: 0px;
	width   			: 4vw;
	height 				: 100%;
	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;
	/*background 			: #00b9ee;*/
	background 			: #fff;
}

.icons{
	width 		: 100%;
	height 		: 100%;
	position 	: relative;
	cursor 		: pointer;
}

.icons img {
	
	bottom 		: 0px;
	left 		: 0px;
	margin 		: auto;
	padding 	: 0px;
	position 	: absolute;
	right 		: 0px;
	top 		: 0px;
	width 		: 3vh;
  	display 	: block;
  	height 		: 3vh;

}


.scriptBox {
    padding 			: 0px;
	margin  			: 0px;
	width   			: 68vw;
	height 				: 100%;

	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;
	background 			: white;


}

.expandBtn {
	position 			: absolute;
	top 				: 0px;
	right 				: 37vw;
	margin  			: 0px;
	padding 			: 0px;
	height  			: 3vh;
	width   			: 6vh;

    border-bottom-left-radius 		: 100vh;
    border-bottom-right-radius 		: 100vh;

	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         : flex-start;
	background 			: rgba(0,0,0,0.25);
	z-index 			: 100;
}

.expandBtn img {
	width 		: 2.5vh;
	margin  	: .5vh;
	padding 	: 0px;
}


.scriptContent {
	position 			: relative;
	top 				: 0px;
	left 				: 0px;

	padding 			: 1vh 3vw;
	margin  			: auto;
	width 				: 68vw;
	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 		: bryantregular;
	font-size 			: 2.5vh;

	color 				: #808080;
}


.indicator {
	position 			: absolute;
	right 				: 6vw;
	bottom 				: 1vh;
	margin  			: 0px;
	padding 			: 0px;
	height  			: 3vh;
	width   			: 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;
	color 				: rgba(0,0,0,0.25);
  	font-family 		: bryantpromedium;
	font-size 			: 2vh;
	z-index 			: 100;

}

.footer{
    height 				: 8vh;
   	width 				: 100vw;
	padding 			: 0px;
	margin 				: 0px;

	list-style          : none;

	display             : -webkit-box;
	display             : -moz-box;
	display             : -ms-flexbox;
	display             : -webkit-flex;
	display             : flex;
	-webkit-flex-flow   : row nowrap;	
	justify-content 	: space-between;
	align-items         : center;

}

.sectionBox {
	height 			: 8vh;
	width 			: 16.5%;
	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 .7vh rgba(255,255,255,0.3);
	cursor 			: pointer;
}

.sectionBox:hover{
	height 			: 8vh;
	width 			: 16.5%;
	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 .7vh rgba(255,255,255,0.3);
	cursor 			: pointer;
}

.sectionBoxActive{
	height 			: 8vh;
	width 			: 16.5%;
	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 .7vh rgba(255,255,255,0.3);
	cursor 			: pointer;
}


.sectionBoxClicked{
	height 			: 8vh;
	width 			: 16.5%;
	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 .7vh rgba(255,255,255,0.3);
}




.closeBtn{
	position 	: absolute;
	right 		: 15px;
	top 		: 25px;
	color 		: white;
	cursor 		: pointer;
	width     : 6vh;
	height    : 6vh;
}

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


#lightbox{
	position 	: fixed;
	z-index 	: 1000;
	background 	: #F4A544;
	width 		: 35vw;
	height 		: 100vh;
	bottom 		: 0px;
	right 		: 0px;
	padding 	: 5vh 0px;
 
	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;
	font-size 			: 2.5vh;
	display 			: none;
}


.tipText{
	float 		: left;
	color 		: white;
	margin 		: 5vh 3vw;
  	font-family : bryantregular;
	font-size 	: 2.5vh;
}

h4{
  	font-family 		: bryantpromedium;
	font-size 			: 2.5vh;

}