/* font */
@font-face {
font-family: 'RobotoThin';
src: url('/fonts/Roboto/Roboto-Thin.ttf');
}
@font-face {
font-family: 'RobotoLight';
src: url('/fonts/Roboto/RobotoCondensed-Light.ttf');
}
@font-face {
font-family: 'RobotoRegular';
src: url('/fonts/Roboto/RobotoCondensed-Regular.ttf');
}
@font-face {
font-family: 'RobotoCondensed';
src: url('/fonts/Roboto/Roboto-Condensed.ttf');
}
@font-face {
    font-family: 'RobotoMedium';
    src: url('/fonts/Roboto/Roboto-Medium.ttf');
}
@font-face {
font-family: 'RobotoBoldCondensed';
src: url('/fonts/Roboto/Roboto-BoldCondensed.ttf');
}
@font-face {
font-family: 'RobotoBold';
src: url('/fonts/Roboto/Roboto-Bold.ttf');
}
/* font  end*/

/* html zoom */
@viewport {
    width: device-width;
    zoom: 1; /* IE */
    -ms-zoom: 1;
    -moz-transform: scale(1); /* Firefox */
    -o-transform: scale(1); /* Opera */
    -webkit-transform: scale(1); /* Safari And Chrome */
    transform: scale(1); /* Standard Property */
    user-zoom: fixed;
    min-zoom: 1;
    max-zoom: 1;
}
@-ms-viewport {
    width: device-width;
    zoom: 1; /* IE */
    -ms-zoom: 1;
    -moz-transform: scale(1); /* Firefox */
    -o-transform: scale(1); /* Opera */
    -webkit-transform: scale(1); /* Safari And Chrome */
    transform: scale(1); /* Standard Property */
    user-zoom: fixed;
    min-zoom: 1;
    max-zoom: 1;
}
@-o-viewport {
    width: device-width;
    zoom: 1; /* IE */
    -ms-zoom: 1;
    -moz-transform: scale(1); /* Firefox */
    -o-transform: scale(1); /* Opera */
    -webkit-transform: scale(1); /* Safari And Chrome */
    transform: scale(1); /* Standard Property */
    user-zoom: fixed;
    min-zoom: 1;
    max-zoom: 1;
}

iframe {
    width: device-width;
    zoom: 1; /* IE */
    -ms-zoom: 1;
    -moz-transform: scale(1); /* Firefox */
    -o-transform: scale(1); /* Opera */
    -webkit-transform: scale(1); /* Safari And Chrome */
    transform: scale(1); /* Standard Property */
    user-zoom: fixed;
    min-zoom: 1;
    max-zoom: 1;
}
/* html zoom end*/

body{
    margin:0;
    font-family: 'RobotoRegular';
    /* overflow: hidden; */
}
div{
    box-sizing:border-box;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus{
    text-decoration: underline;
    -moz-text-decoration-color: red;
    text-decoration-color: red;
    border:none;
    outline:none;
}
.canv{
    z-index:1;
    position:absolute;
    bottom:0;
    top:0;
    width:100%;
}
html {
    height: 100%;
    -webkit-text-size-adjust: none;
/*    touch-action: manipulation; /* prevent all but scroll & zoom */
    touch-action: none; /* prevent default events (pinch, zoom, scroll, ...) */
}
html.safariIPhone {
	height: calc(100% - 60px - 35px);
    overflow: hidden;
    -webkit-text-size-adjust: none;
    /*    touch-action: manipulation; /* prevent all but scroll & zoom */
    touch-action: none; /* prevent default events (pinch, zoom, scroll, ...) */
}
#ingamecanvas{
    width:100%;
    height:100%;
    display:block;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -khtml-user-drag: none;
    -webkit-user-drag: none;
    -moz-user-drag: none;
    -ms-user-drag: none;
    user-drag: none;
}
.hidden{
    display:none;
}
.text-box-centering{
    display:table-cell;
    vertical-align:middle;
}

.button-teacher-menu{
    width:100%;
    height: 100%;
    text-align:center;
}
.button-teacher-menu:hover{
    text-decoration:none;
}
#collapseMenu > div > a.active{
    color:#FFFFFF;
    background-color:rgba(255,144,1,0.6);
    border:3px solid rgba(255,144,1,1);
}
.teacher-menu-font{
    font-size:16px;
    font-weight:600;
}


button{
    color:white;
    border:none;
    /*padding: 0.5em 2.5em;/**/
    /*margin: 0.25em;/**/
    border-radius:0.5em;
    /*text-transform:uppercase;/**/
    /*float:right;/**/
}
button,
button > a,
button > a > span,
button > span,
.btn,
.btn > a,
.btn > a > span,
.btn > span{
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}
button:hover{
    cursor:pointer;
}
button.next{
    background-color:green;
    position: relative;
    left: 1em;
}
button.prev{
    background-color:grey;
    position: relative;
    left: 0.5em;
}


.noborder{
    border:none;
}

.layer{
    position:absolute;
    bottom:0;
    top:0;
    width:100%;

    margin:0;
    padding:0;
    border:none;
    outline:none;

    background:transparent;
    overflow-y:auto;
}
.layer#gui{
    z-index:500;
}
.layer#help{
    z-index:1200;
    display:none;
}
.layer#content{
    z-index:100;
    right: 0;
    height: 100%;
}
.layer#wallpaper{
    z-index:0;

    background-image: "";
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.layer#warning-message {
    z-index:1000;
    background-color: #000000;
    text-align: center;
    color: white;
}
.layer#fullscreen-message {
    z-index: 1000;
    background-color: #000000;
    text-align: center;
    color: white;
}
.layer#teachermenu, .layer#teacherRightMenu, .layer#studentnamepanel {
    z-index: 650;
    width: auto;
    overflow: hidden;
}
.safariIPad .layer#teacherRightMenu {
	transform: scale(0.5);
	transform-origin: top right;
}
.layer#teacherRightMenu {
    opacity: 0.4;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
}
.layer#teacherRightMenu:hover {
    opacity: 1;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
}
.layer#teachermenu{
    z-index: 1000;
    bottom: 125px;
	overflow-y: auto;
}
.safariIPad .layer#teachermenu{
    bottom: 100px;
}


.img-responsive{
    width: 100%;
}


.default.btn{
	background-color: #737373;
	margin-top: 0.5em;
	color: white;
	border-radius: 15px;
	width:100%;
	border: none;
}
.default.btn:not(.menuButton):hover{
	background-color: #404040;
}
.default.btn:not(.menuButton):active{
	background-color: #c4d56b;
}
.default.btn.selected:not(.menuButton){
	background-color: #a5c308;
}
.btn.pauseButton {
	min-width: 100px;
	width: 200px;
	visibility: hidden;
}


.circle-button{
    border-radius:50%;
    height:6vh;
    width:6vh;
    background-color:#737373;
}
.circle-button:hover{
    background-color: #404040;
}
.circle-button:active{
    background-color: #c4d56b;
}
.circle-button.disabled{
    border-radius:50%;
    height:6vh;
    width:6vh;
    background-color:#ececec;
    cursor: default;
}
.circle-button.disabled:hover{
    cursor: default;
}
.circle-button.green{
    border-radius:50%;
    height:6vh;
    width:6vh;
    background-color:#a5c308;
}
.circle-button.green:hover{
    background-color: #c4d56b;
}
.circle-button.green.disabled{
    border-radius:50%;
    height:6vh;
    width:6vh;
    background-color:#ececec;
    cursor: default;
}
.circle-button.green.disabled:hover{
    cursor: default;
}
.circle-button.disabled > a{
    cursor: default;
}

.menuButton{
    background-color:#737373;
}
.menuButton:hover{
    background-color: #404040;
}
.menuButton:active{
    background-color: #c4d56b;
}
.menuButton.selected:not(.sub){
    background-color :#a5c308;
}
.menuButton.selected:not(.sub):hover{
    background-color :#c4d56b;
}
.menuButton.selected:not(.sub):active{
    background-color :#c4d56b;
}
.menuButton.sub.selected{
    background-color :#c4d56b;
}
.menuButton.sub.selected:hover{
    background-color :#a5c308;
}
.menuButton.sub.selected:active{
    background-color :#a5c308;
}



.default.btn.circular{
	font-size:1vw;
	border-radius:50%;
	/*overflow: hidden;*/
	margin-top: 0;
	padding: 0;
}
.default.btn.circular:after{
  content: "";
  display: block;
  padding-bottom: 100%;
  border-radius:50%;
  /*background-color:#737373;*/
}
.default.btn.circular > div{
	width:70%;
	margin: 0;
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	width:80%;
	text-align: center;
	word-wrap: break-word;
	line-height:normal;
}

@media (min-width:480px){
    .default.btn.circular{font-size:1vw;}
}
@media (min-width:860px){
    .default.btn.circular{font-size:1vw;}
}
@media (min-width:992px){
    .default.btn.circular{font-size:1.2vw;}
    .default.btn.circular > div{width:80%}
}
@media (min-width:1080px){
    .default.btn.circular{font-size:1.2vw;}
}
@media (min-width:1200px){
    .default.btn.circular{font-size:16px;}
}

.progress-bar-green{
    background: rgba(35, 138, 55, 1);
    background: -webkit-linear-gradient(top, rgba(83, 242, 78, 1) 0%, rgba(35, 138, 55, 1) 100%);
    background: linear-gradient(to bottom, rgba(83, 242, 78, 1) 0%, rgba(35, 138, 55, 1) 100%);
}
.progress-bar-purple{
    background: rgba(53, 17, 84, 1);
    background: -webkit-linear-gradient(top, rgba(154, 61, 204, 1) 0%, rgba(53, 17, 84, 1) 100%);
    background: linear-gradient(to bottom, rgba(154, 61, 204, 1) 0%, rgba(53, 17, 84, 1) 100%);
}

body{font-size:11px;}

@media (min-width:480px){
    body{font-size:16px;}
}
@media (min-width:860px){
    body{font-size:22px;}
}
@media (min-width:1080px){
    body{font-size:25px;}
}




#nextButtonContainer {
	
	position:absolute;
	min-height:75px;
	z-index:999;
	line-height:75px;
	min-width:100px;
	width:220px;
	bottom:10px;
	margin-left: 15px;
	text-align: center;
}
#nextButtonContainer.noData {
	display:none;
}
#teachernextbutton {
	text-transform: uppercase;
}
#teachernextbutton .lead {
	display:block;
	margin-bottom:0;
}

#nextButtonContainer .waitContent {
	word-wrap: normal;
	color: #737373;
	cursor: default;
}




.shadow {
    background-color: black;
    position: absolute;
    width: 24%;
    height: 10%;
    bottom: 10%;
    margin-left: 51%;
    opacity: 0.3;
    border-radius: 75px 70px 86px 54px;
    display: none;
}



.hoverable:hover {
    background: rgba(255,255,255,.8);
}

.move img {
    position: absolute;
    left: 35%;
    max-height: 64%;
    bottom: 5%;
}

.move .text {
    top: 7%;
    position: absolute;
    text-align: center;
    width: 100%;
}

.circle {
    width: 25px;
    height: 25px;
    border: 2px solid white;
    border-radius: 15px;
    bottom: 5%;
    position: absolute;
    right: 3%;
}

.green {
    background-color: #13c044;
}
.red {
    background-color: #c20c29;
}
.yellow {
    background-color: #febe24;
}
.blue {
    background-color: #177fff;
}
.orange {
    background-color: #ff6c00;
}
.pink {
    background-color: #f964ff;
}
.violett {
    background-color: #8100d3;
}


#tutorialHTMLcontent .overlay-logo,
#gameHTMLcontent .overlay-logo {
	width:50vh;
	max-width:840px;
	height:auto;
	margin:auto;
}
#tutorialHTMLcontent .lead,
#gameHTMLcontent .lead {
	font-size: 2.333vh;
}



#resultsHTMLcontent{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0);
    line-height: 5vh;
}
#timeline{
    width: 100%;
    height: 76%;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    overflow: none;
}
#timelineContent{
    width: 100%;
    height: 80%;
    margin-top: 7%;
    overflow-y: auto;
    overflow-x: hidden;
}
#timelineHeading{
    text-align: center;
    font-weight: bold;
    font-size: 7vh;
    color: black;
    margin-top: 7vh;
}
#btn_timeline{
    position:absolute;
    width: 400px;
    margin-bottom: 0;
    bottom: 2vh;
    left :calc(50% - 200px);
    right :calc(50% - 200px);
}
#btn_text{
    font-size :4vh;
}

.even{
    background-color: #a5c308;
    color: white;
    line-height: 10vh;
}
.odd{
    background-color: white;
    color: #737373;
    line-height: 10vh;
}
.age{
    text-align: center;
    font-size: 10vh;
    line-height: 10vh;
}
.name{
    text-transform: uppercase;
}