html {
	padding: 0;
}

body {
	margin: 0;
	padding: 0;
	min-height: 100%;
	background-color: #fff;
	font-family: Arial,sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #333;
	height: 100%;
	background-color: #dbdbdb;
}

#mainDiv {
	width: 900px;
	height: 600px;
	background-color: #666;
	margin: auto;
	padding: 0;
}

.text-1 {
	color: #480077;
	font-size: 80px;
	font-weight: 700;
	font-style: italic;
	width: 550px;
}
.text-2 {
	color: #bd0dff;
	font-size: 80px;
	font-weight: 700;
	width: 550px;
}
.text-3 {
	color: #480077;
	font-size: 60px;
	font-style: italic;
	width: 550px;
}
.text-4 {
	color: #bd0dff;
	font-size: 60px;
	width: 550px;
}
.text-5 {
	color: #480077;
	font-size: 40px;
	font-style: italic;
	width: 550px;
}
.text-6 {
	color: #bd0dff;
	font-size: 40px;
	width: 550px;
}
.text-7 {
	color: #480077;
	font-size: 40px;
	font-style: italic;
	width: 550px;
}

.texted1 {
	height: 85px;
	line-height: 85px;
	text-align: left;
}
.texted2 {
	height: 100px;
	line-height: 170px;
	text-align: left;
}
.texted3 {
	height: 70px;
	line-height: 120px;
	text-align: left;
}
.texted4 {
	height: 70px;
	line-height: 100px;
	text-align: left;
}
.texted5 {
	height: 50px;
	line-height: 70px;
	text-align: left;
}
.texted6 {
	height: 50px;
	line-height: 70px;
	text-align: left;
}
.texted7 {
	height: 50px;
	line-height: 80px;
	text-align: left;
}
.texts {
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
	-webkit-animation: fadein 1.5s; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 1.5s; /* Firefox < 16 */
	-ms-animation: fadein 1.5s; /* Internet Explorer */
	-o-animation: fadein 1.5s; /* Opera < 12.1 */
	animation: fadein 1.5s;
}
#textfields {
	position: relative;
	width: 50%;
	left: 35%;
	height: 535px;
}

html.w-mod-touch * {
	background-attachment: scroll !important
}

p {
	font-family: Verdana;
	height: 37.5%;
	color: #fff;
}

h2 {
	font-family: Verdana;
	color: #fff;
	font-size: 12px;
	font-style: italic;
	margin-left: 5%;
}

.material-icons {
	background-color: rgba(128, 128, 128, 0.41);
	font-size: 37px !important;
}

.wrapper {
	position: fixed;
	display: -webkit-box;
	width: 100%;
	height: 100%;
	float: none;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.window {
	background: url('../page_referencePoint/bgd_1.png');
	overflow: hidden;
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: block;
	width: 900px;
	height: 614px;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: start;
	-webkit-justify-content: flex-start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-box-align: stretch;
	-webkit-align-items: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
}

.window-inner {
	height: 540px;
}

.top-left {
	display: inline-block;
	background: #480077;
	margin-top: 25px;
	margin-left: 20px;
	margin-right: 0;
	padding-top: 5px;
	padding-left: 7px;
	padding-right: 25px;
	height: 23px;
	font-size: 14px;
	font-style: italic;
	font-weight: 900;
	clip-path: polygon(0% 0%, 100% 0%, calc(100% - 20px) 100%, 0% 100%);
	-webkit-clip-path: polygon(0% 0%, 100% 0%, calc(100% - 20px) 100%, 0% 100%);
	float: left;
	color: #fff;
}

.top-left2 {
	display: inline-block;
	background-color: #480077;
	color: #fff;
	margin-top: 25px;
	margin-left: -8px;
	padding-top: 5px;
	padding-left: 20px;
	padding-right: 25px;
	height: 23px;
	font-size: 14px;
	font-style: italic;
	font-weight: 900;
	clip-path: polygon(20px 0%, 100% 0%, calc(100% - 20px) 100%, 0% 100%);
	-webkit-clip-path: polygon(20px 0%, 100% 0%, calc(100% - 20px) 100%, 0% 100%);
	float: left;
}

.helpText {
	position: absolute;
	z-index: 9;
	bottom: 70px;
	left: 520px;
	width: 310px;
	background-color: #444;
	padding: 0px 10px 10px 10px;
	border: solid 1px #fff;
	color: #fff;
	display: none;
}
.helpText p {
	color: inherit;
}

#intro {
	width: 270px;
	height: 440px;
	margin-top: 62px;
	margin-left: 20px;
	position: absolute;
	z-index: 1;
	background-color: #595959;
}

#intro div {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
}

.bottom {
	position: relative;
	bottom: 0;
	width: 100%;
	background-color: #480077;
	height: 15%;
}

#initial1 {
	display: none;
}

.mid-left-top-text {
	overflow-y: auto;
	height: 131px;
	margin-top: 20px;
}

#transcriptContainer {
	width: unset !important;
	height: 165px !important;
	position: absolute !important;
	display: unset !important;
	margin-left: 5%;
	margin-top: 10px;
}

#transcriptHeading {
	width: unset !important;
	height: 20px !important;
	position: unset !important;
	display: unset !important;
	color: #fff;
	font-weight: bold;
	font-family: Verdana;
}

::-webkit-scrollbar {
	width: 12px;
}

::-webkit-scrollbar-track {
	border-radius: 10px;
	background: #F5F5F5;
	border: 1px solid #828383;
}

::-webkit-scrollbar-thumb {
	border-radius: 6px;
	background: #828383;
	border: 2px solid transparent;
	background-clip: padding-box;
}

.vid-leftmost-intro {
	width: 100%;
	position: absolute;
	top: 189px;
}

button {
	border: none;
	padding: 0;
	margin: 0;
	background: none;
}

:focus {
	outline-color: #fff;
}

button:focus, div:not(#speech-bubble):focus, a:focus, p:focus, image:focus, video:focus {
	outline: #fff 2px solid;
}

button.material-icons, button.audio {
	position: relative;
}

.material-icons:focus, .audio:focus{
	z-index: 100;	
}

.exitPromptBtn:focus {
	outline: none;
}

.exitPromptBtn:focus img {
	outline: #fff 2px solid;
}

.button {
	background-color: #333;
	border: 1px solid #fff;
	color: #fff;
	padding: 0px 8px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 13px;
	margin: 4px 2px;
	cursor: pointer;
	font-style: italic;
	font-weight: 700;
	position: absolute;
}

.button:focus {
	box-shadow: 0 0 0 4px #000;
}

.button-invisible {
	opacity: 0;
	cursor: default;
}

.button-invisible:focus {
	opacity: 1;
	cursor: pointer;
}

#skipToNavbarBtn, #skipToMainBtn {
	z-index: 10;
	position: absolute;
	left: 2px;
}

.videoPlayBtn {
	background-image: url('../../images/video_play_button.png');
	width: 80px;
	height: 80px;
	position: absolute;
}

.bottom-wrapper {
	position: relative;
	margin-top: 15px;
	margin-right: 15px;
	float: left;
}

.bottom-wrapper-container {
	float: right;
}

.material-icons {
	cursor: pointer;
	float:left;
	border: solid 1px #fff;
}

.prev {
	height: 37px;
	width: 37px;
	background: url('../imgs/buttons/prev.png');
	background-repeat: no-repeat;
}
.prev:hover {
	background: url('../imgs/buttons/prev_hover.png');
}

.prev-inactive {
	height: 37px;
	width: 37px;
	background: url('../imgs/buttons/prev_inactive.png');
	background-repeat: no-repeat;
}

.next {
	height: 37px;
	width: 37px;
	background: url('../imgs/buttons/next.png');
	background-repeat: no-repeat;
}
.next:hover {
	background: url('../imgs/buttons/next_hover.png');
}

.play {
	height: 37px;
	width: 37px;
	background: url('../imgs/buttons/play.png');
	background-repeat: no-repeat;
}
.play:hover {
	background: url('../imgs/buttons/play_hover.png');
}

.pause {
	height: 37px;
	width: 37px;
	background: url('../imgs/buttons/pause.png');
	background-repeat: no-repeat;
}
.pause:hover {
	background: url('../imgs/buttons/pause_hover.png');
}

.home {
	height: 37px;
	width: 37px;
	background: url('../imgs/buttons/home.png');
	background-repeat: no-repeat;
}
.home:hover {
	background: url('../imgs/buttons/home_hover.png');
}

.home-inactive {
	height: 37px;
	width: 37px;
	background: url('../imgs/buttons/home_inactive.png');
	background-repeat: no-repeat;
}

.help {
	height: 37px;
	width: 37px;
	background: url('../imgs/buttons/question.png');
	background-repeat: no-repeat;
}
.help:hover {
	background: url('../imgs/buttons/question_hover.png');
}

.logout {
	height: 37px;
	width: 37px;
	background: url('../imgs/buttons/exit.png');
	background-repeat: no-repeat;
}
.logout:hover {
	background: url('../imgs/buttons/exit_hover.png');
}

.back-btn-container-container {
	position: relative;
	float: right;
	margin: 10px 10px 0 0;
	width: 121px;
	height: 42px;
	clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 12% 50%);
	-webkit-clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 12% 50%);
	background-color: transparent;
}

.back-btn-container-container:focus-within {
	background-color: #000;
}

.back-btn-container {
	position: absolute;
	width: 117px;
	height: 38px;
	clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 13% 50%);
	-webkit-clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 13% 50%);
	background-color: transparent;
	margin: 2px;
}

.back-btn-container:focus-within {
	background-color: #fff;
}

.back-btn {
	width: 111px;
	height: 32px;
	cursor: pointer;
	z-index: 2;
	color: #fff;
	background-color: #000;
	font-weight: 600;
	font-style: italic;
	font-size: 18px;
	clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 15% 50%);
	-webkit-clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 15% 50%);
	line-height: 100%;
	padding-left: 20px;
	outline: none !important;
	margin: 3px;
}

@keyframes fadein {
	from { opacity: 0; }
	to	 { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
	from { opacity: 0; }
	to	 { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
	from { opacity: 0; }
	to	 { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
	from { opacity: 0; }
	to	 { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
	from { opacity: 0; }
	to	 { opacity: 1; }
}

.prev {
	height: 39px !important;
	width: 39px !important;
}

.prev-inactive {
	height: 39px !important;
	width: 39px !important;
}

.next {
	height: 39px !important;
	width: 39px !important;
}

.next-inactive {
	height: 39px !important;
	width: 39px !important;
}

.play {
	height: 39px !important;
	width: 39px !important;
}

.play-inactive {
	height: 39px !important;
	width: 39px !important;
}

.pause {
	height: 39px !important;
	width: 39px !important;
}

.pause-inactive {
	height: 39px !important;
	width: 39px !important;
}

.home {
	height: 39px !important;
	width: 39px !important;
}

.home-inactive {
	height: 39px !important;
	width: 39px !important;
}

.help {
	height: 39px !important;
	width: 39px !important;
}

.help-inactive {
	height: 39px !important;
	width: 39px !important;
}

.logout {
	height: 39px !important;
	width: 39px !important;
}

.logout-inactive {
	height: 39px !important;
	width: 39px !important;
}

#navbar button img {
	width: 100%;
	vertical-align: middle;
}

#navbar button{
	overflow: hidden;
}

.audio {
	background-color: rgb(51, 51, 51) !important;
	height: 39px !important;
	width: 39px !important;
	cursor: pointer;
	border: solid 1px #fff;
	padding: 4px;
}