#smar_GUI {
	position: absolute;
	width: 100%;
	height: 100%;
}

nav#smar_sideElements button > svg {
	width: 75%;
	height: 75%;
	position: absolute;
	top: 12.5%;
	left: 12.5%;
}

#smar_mainElements button > svg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0%;
	left: 0%;
}


/*//////////////////////////////////////////////
 Top Left Navigation section that contains Home,
 Info, Fullscreen and Menu
//////////////////////////////////////////////*/

#smar_sideElements {
	display: block;
	position: absolute;
	top: 0%;
	left: 0%;
	height: auto;
	width: 4%;
	margin: 0 0 0 1%;
	height: 100%;
}

#smar_sideElements button {
	top: 0%;
	left: 0%;
	z-index: 15;
	pointer-events: all;
	outline: none;
	width: 100%;
	height: 5%;
	margin-top: 20%;
	position: relative;
	display: block;
	overflow: visible;
	background-color: rgba(0,0,0,0); /* need for IE10 */
}

/*//////////////////////////////////////////////
 Navigation section that contains Back, Next,
 Replay and End
//////////////////////////////////////////////*/

#smar_mainElements {
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	position: absolute
}

#smar_mainElements button {
	z-index: 15;
	pointer-events: all;
	top: 46.5%;
	transform: translate3d(0, 0, 0);
	width: 5%;
	height: 7%;
	position: absolute;
	background-color: rgba(0,0,0,0); /* need for IE10 */
}

/*//////////////////////////////////////////////
 Next Button
//////////////////////////////////////////////*/

button#smar_Next {
	left: 95%;
}

button#smar_Next>svg {
	position: absolute;
	top: 0%;
	left: 0%;
}

button#smar_Next:hover svg:nth-child(2), button#smar_Next:focus svg:nth-child(2) {
	transition: 0.5s left ease;
	left: 10%;
}

/*/////////////////////////////////////////////
 Back Button
/////////////////////////////////////////////*/

button#smar_Back {
	left: 0%;
}

button#smar_Back>svg {
	position: absolute;
	top: 0%;
	left: 0%;
}

button#smar_Back:hover svg:nth-child(2), button#smar_Back:focus svg:nth-child(2) {
	transition: 0.5s left ease;
	left: -10%;
}

/*/////////////////////////////////////////////
 Back and Next shared transform
/////////////////////////////////////////////*/
#smar_Back:active,
#smar_Next:active {
	transform: scale(0.9);
}

/*//////////////////////////////////////////////
 Replay Button
//////////////////////////////////////////////*/
#smar_Replay {
	border: none !important;
	left: 1%;
	margin-left: -1%;
	width: 5%;
}

/*//////////////////////////////////////////////
 Home Button
//////////////////////////////////////////////*/


/*//////////////////////////////////////////////
 Exit Button
//////////////////////////////////////////////*/

button#smar_Exit {
	left: 95%;
}





#smar_sub_Play:before {
	content: "\51";
}

#smar_sub_Pause:before {
	content: "\41";
	position: relative;
	left: 5%;
}

#smar_Menu:before {
	content: "\4f";
}

.FS-enlarge:before {
	content: "\e989";
}

.FS-shrink:before {
	content: "\e98a";
}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
	#smar_Replay {
		height: 8%;
	}
}