@media screen and (min-height: 960px) {
    html {
        font-size: 15px;
    }
}

@media screen and (max-height: 800px) {
    html {
        font-size: 9px;
    }
}

@media screen and (max-height: 700px) {
    html {
        font-size: 9px;
    }
}

@media screen and (max-height: 429px) {
    html {
        font-size: 9px;
    }
}

@media screen and (max-height: 390px) {
    html {
        font-size: 9px;
    }
}

@media screen and (max-height: 362px) {
    html {
        font-size: 9px;
    }
}

@media screen and (max-height: 351px) {
    html {
        font-size: 8px;
    }
}

@media screen and (max-height: 311px) {
    html {
        font-size: 8px;
    }
}

@media screen and (max-height: 240px) {
    html {
        font-size: 8px;
    }
}


div.open {
	animation: fadein 2s;
	display:block
}

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

div.closed {
	display:none
}

div#heartpage {
	background-color:#000000;
	height:100%;
	width:100%
}

div#header {
	background-color:#000000;
	z-index:1;
	top:0%;
	width:100%;
	height: 11%;
	position: absolute;
}

div#headerTitleHeaderBackround{
	background-color:#555555;
	text-align:center;
	z-index:1;
	top:0%;
	width:100%;
	height: 100%;
	position: absolute;
}

div#headerTitleHeaderBackround_electricity{
	background-color:#4d94ff;
	text-align:center;
	z-index:1;
	top:0%;
	width:100%;
	height: 100%;
	position: absolute;
}

div#infoButton {
border-radius: 50%;
text-align: right;
position: absolute;
height:80%;
width:5%;
top:10%;
right:7%;
margin: auto;
z-index:10
}

div#infoButton:hover {
 background-color:#888888;
 cursor: pointer;
 cursor: hand;
}

div#back, div#more, div#arrhythmia, div#AED, div#home, div.halfHeart, div.showFibres{
 text-align: left;
 z-index: 10;
 margin: auto;
 position: absolute;
}


div#back {
 float: left;
 height:80%;
 width:5%;
 max-width:5%;
 top:10%;
 left:7%;
}

div#more {
 border-radius: 20px;
 left: 3%;
 float: left;
 width: 5%;
 max-height: 5%;
 top:75%;
 vertical-align: middle;
 text-align: center;
}

div#more:hover {
 background-color:#888888;
 cursor: pointer;
 cursor: hand;
}

div#arrhythmia, div#AED{
 left: 3%;
 float: left;
 max-height: 7%;
 width:7%;
 top:15%;
 z-index:10;
 text-align:center;
 font-size: 230%;
}

div.selectedItem {
	color:rgb(255,255,255);
}

div#footInformation {
	text-align:center;
	background-color:#555555;
	z-index:1;
	top:85%;
	width:100%;
	height: 15%;
	position: absolute;
}

div#footInformation_electricity {
	text-align:center;
	background-color:#4d94ff;
	z-index:1;
	opacity:0.5;
	top:85%;
	width:100%;
	height: 15%;
	position: absolute;
}

div#footECG {
	background-color:#888888;
	z-index:3;
	opacity:1;
	left:25%;
	width:30%;
	height: 100%;
	position: absolute;
}

div#footLVP {
	background-color:#888888;
	z-index:3;
	opacity:1;
	left:60%;
	width:30%;
	height: 100%;
	position: absolute;
}

div#footHealthStatus {
	background-color:#888888;
	z-index:3;
	opacity:0.5;
	left:75%;
	width:20%;
	height: 100%;
	position: absolute;
}

div#myRenderer{
	text-align:center;
	z-index:0;
	left:0%;
	width:100%;
	height: 100%;
	position: absolute;
}

div#heartElectricity{
	text-align:center;
	z-index:0;
	left:0%;
	width:100%;
	height: 100%;
	position: absolute;
}

div#circularMenu{
	text-align:center;
	-webkit-align-self: center;
	margin: auto;
	z-index:2;
	left:45%;
	top:25%;
	width:10%;
	height: 30%;
	position: absolute;
}

div#circularSlider{
	text-align:center;
	margin: auto;
	z-index:0;
	width: 20%;
	vertical-align: middle;
	padding: 100px;
}

div#footMore {
	background-color: transparent;
	z-index:1;
	width:100%;
	height:10%;
	bottom:5%;
	position: absolute;
}

div#heartAttackButtonsContainer {
	background-color:transparent;
	z-index:1;
	bottom:7%;
	width:130%;
	height: 7%;
	left: 3%;
	position: absolute;
}

div.actionButtons {
    background-color:transparent;
 	text-align:center;
 	width:25%;
 	top:10%;
 	height:80%;
 	position: absolute;
 	z-index:2;
 	font-size: 2.5em;
}

div.buttonText {
  text-align: center;
  vertical-align: middle;
  position: absolute;
  top: 25%;
  width:100%;
  color:rgb(106,236,8);
}

div.actionButtons:hover {
	background-color:#999999;
	cursor: pointer;
	cursor: hand;
}

div#headerInfoText {
	font-size: 3em;
	text-align: center;
  	vertical-align: middle;
  	position: absolute;
  	top: 25%;
  	width:100%;
  	height:100%;
}


div#SceneButtonsContainer {
	border-radius: 0% 0% 25px 25px;
	background-color:#555555;
	z-index:1;
	top: 0%;
	width:70%;
	height: 7%;
	left: 15%;
	position: absolute;
}

div#halfHeartButton {
	border-radius: 25px 25px 25px 25px;
	background-color:#555555;
	z-index:1;
	bottom:16%;
	width:7%;
	height: 100%;
	left: 13%;
	position: absolute;
}

div#showFibresButton {
	border-radius: 25px 25px 25px 25px;
	background-color:#555555;
	z-index:1;
	bottom:16%;
	width:7%;
	height: 100%;
	left: 13%;
	position: absolute;
}

div.leftPanel {
  z-index:1;
  background-color: transparent;
  height:80%;
  width:30%;
  left:2%;
  top:4%;
  position: absolute;
}

div.leftTitle {
  background-color: transparent;
  text-align: left;
  vertical-align: middle;
  font-size: 4em;
  top: 0%;
  height:5%
  width:100%;
  z-index:1;
}

div.leftDescription {
  background-color: transparent;
  text-align: left;
  vertical-align: middle;
  font-size: 1.7em;
  top: 0%;
  width:100%;
  z-index:1;
  position: relative;
}

div.leftDetail {
  background-color: transparent;
  text-align: left;
  vertical-align: middle;
  font-size: 1.7em;
  font-weight:normal;
  top: 2%;
  z-index:1;
  position: relative;
}

div.leftClickable{
  background-image: url(../images/heart_v7/question_mark.png);
  background-repeat: no-repeat;
  background-size: 60px 60px;
  padding-left: 16%;
  vertical-align: middle;
  display: block;
  position: absolute;
  top: 75%;
  height:15%;
  width: 90%; 
  font-size: 1.7em;
  z-index:1;
  font-weight: normal;
}

div.leftClickableVideo{
  background-image: url(../images/heart_v7/video_button.png);
  background-repeat: no-repeat;
  background-size: 20%;
  background-position: 0% 20%;
  padding-left: 25%;
  vertical-align: middle;
  position: relative;
  top: 2%;
  height:30%;
  width: 80%; 
  font-size: 1.7em;
  z-index:1;
  font-weight: normal;
}

div.leftClickableAED{
  background-image: url(../images/heart_v7/defibrillation.png);
  background-repeat: no-repeat;
  background-size: 65px;
  padding-left: 16%;
  vertical-align: middle;
  display: block;
  position: absolute;
  top: 75%;
  height:20%;
  width: 100%; 
  font-size: 1.7em;
  z-index:1;
  font-weight: normal;
}

div.leftClickableAED:hover {
 cursor: pointer;
 cursor: hand;
}

div.leftClickable:hover {
 cursor: pointer;
 cursor: hand;
}

div.leftLargeClickable {
  background-color: transparent;
  vertical-align: middle;
  font-size: 1.3em;
  top: 2%;
  left: 0%;
  z-index:1;
  height:30%;
  position: relative;
}

div.leftLargeClickable:hover {
 cursor: pointer;
 cursor: hand;
}

div.leftProgressBar {
  background-color: transparent;
  text-align: left;
  vertical-align: middle;
  font-size: 1.3em;
  top: 85%;
  z-index:1;
  position: absolute;
}

div.leftFootnote {
  background-color: transparent;
  text-align: center;
  vertical-align: middle;
  font-size: 1.5em;
  bottom: 5%;
  z-index:1;
  position: absolute;
}

div#rightInformation {
  background-color: transparent;
  z-index:1;
  height:96%;
  width:20%;
  right:1%;
  top:4%;
  position: absolute;
}

div#rightPanel {
  background-color: transparent;
  z-index:1;
  height:96%;
  width:5%;
  right:21%;
  top:4%;
  position: absolute;
}
div#rightPanelBottom {
  background-color: transparent;
  z-index:1;
  height:96%;
  width:5%;
  right:21%;
  top:40%;
  position: absolute;
}
div.rightLogo {
  z-index: 3;
  left: 28%;
  width:95%;
  bottom: 2%;
  height: 8%;
  position: absolute;
}

div.rightChartTitle{
	background-color: transparent;
  	text-align: center;
  	vertical-align: middle;
	font-size: 1.7em;
	z-index:3;
	left:1%;
	width:97%;
	position: relative;
}

div.rightChart {
  z-index:3;
  left:0%;
  width:95%;
  height: 17%;
  position: relative;
}

div#rightRateLabel{
	background-color: transparent;
	text-align:center;
	z-index:3;
	top:10%;
	position: relative;
	width: 97%
  	font-size: 1.5em;
}

div#rightRate{
	vertical-align: middle;
	background-color: transparent;
	z-index:3;
	left:3%;
	width:93%;
	top:12%;
	height:1%;
	position: relative;
}

div.rightChartDescription{
	background-color: transparent;
  	text-align: center;
  	vertical-align: middle;
	font-size: 1.5em;
	font-weight:normal;
	z-index:3;
	left:1%;
	width:97%;
	top:2%;
	position: relative;
}

div#home {
 float: left;
 height:8%;
 width:8%;
 max-width:8%;
 left:3%;
}

div#home:hover {
 cursor: pointer;
 cursor: hand;
}

div.halfHeart:hover {
 cursor: pointer;
 cursor: hand;
}

div.showFibres:hover {
 cursor: pointer;
 cursor: hand;
}

div.medicationLifestyle:hover {
 cursor: pointer;
 cursor: hand;
}

div.bottomButton:hover {
 cursor: pointer;
 cursor: hand;
}

div#bottom_control {
 background-color: transparent;
 z-index:1;
 left: 2%;
 bottom: 2%;
 height:18%;
 width:80%;
 position: absolute;
}

div.progressClickable:hover {
 cursor: pointer;
 cursor: hand;
}

div.progressClickable {
	background-color: transparent;
 	height:100%;
 	position: absolute;
}