body {
        overflow-x: hidden;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
  width: 322pt;
  position: absolute;
  top: 114%;
  left: 0.35%;
}
li {
  float: left;
}
li a {
  color: white;
  display: block;
  padding: 14px 16px;
  text-align:center;
  text-decoration: none;
}
li a:hover {
          background-color: #4CAF50;
}
li a:focus {
          background-color: #0000FF;
}
.frame {
        position: absolute;
        width: 100%;
        height: 165%;
        top: 119%;
        left: 0%;
	overflow: hidden;
}
.waterdrop { 
	width: 3%;
	height: 4.5%;
	left: 16.8%;
	top: 25%;
	z-index: 3;
	position: absolute;
}
.thermometer {
	width: 4.5%;
	height: 6%;
	left: 16%;
	top: 30%;
	z-index: 3;
	position: absolute;
}
.wallbox {
	width: 3.75%;
	height: 7%;
	left: 51.75%;
	top: 59.5%;
	z-index: 3;
	position: absolute;
}
.haus {
	position: absolute;
	width: 3.75%;
	height: 7%;
	left: 61.5%;
	top: 47%;
	z-index: 3;
}
.GTE_Image {
	width: 16%; 
	height: 17%; 
	left: 45%; 
	top: 57%; 
	z-index: 3; 
	position: absolute;	
}
.Ioniq_Image {
	width: 11%; 
	height: 14%; 
	left: 68%; 
	top: 58.5%; 
	z-index: 3; 
	position: absolute;
}
.stromstecker {
	position: absolute;
	width: 3.75%;
	height: 7%;
	left: 61.5%;
	top: 8.5%;
	z-index: 3;
}
.batterie {
	width: 3.75%;
	height: 7%;
	left: 34.15%;
	top: 48%;
	position: absolute;
}
.sonne {
	 position: absolute;
	 width: 3.75%;
	 height: 7%;
	 left: 34.25%;
	 top: 8%;
	 z-index: 3;
}
.e3dc {
	position: absolute;
	width: 13%;
	height: 26%;
	left: 43%;
	top: 18%;
	margin-left: 0px;
	border-width: 1%;
	border-style: solid;
	border-color: rgb(255, 255, 255);
	border-radius: 10%;
	background-color: rgb(255, 255, 255);
	z-index: 2;
}
.wallbox-value {
	position: absolute;
	width: 140px;
	height: 24px;
	left: 53.25%;
	top: 49%;
	z-index: 2;
	color: rgb(255, 255, 255);
	text-align: center;
	font-family: RobotoCondensed-Bold;
	font-weight: bold;
	font-size: 130%;
}
.pMS-value {
	position: absolute;
	width: 140px;
	height: 24px;
	left: 72.5%;
	top: 12.5%;
	z-index: 2;
	color: rgb(255, 255, 255);
	text-align: center;
	font-family: RobotoCondensed-Bold;
	font-weight: bold;
	font-size: 130%;
}
.pMG-value {
	position: absolute;
	width: 140px;
	height: 24px;
	left: 77.5%;
	top: 12.5%;
	z-index: 2;
	color: rgb(255, 255, 255);
	text-align: center;
	font-family: RobotoCondensed-Bold;
	font-weight: bold;
	font-size: 130%;
}
.humidity-value {
	position: absolute;
	width: 140px;
	height: 24px;
	left: 18.5%;
        top: 24%;
	z-index: 2;
	color: rgb(255, 255, 255);
	text-align: center;
	font-family: RobotoCondensed-Bold;
	font-weight: bold;
	font-size: 130%;
}
.temp-value {
	position: absolute;
	width: 140px;
	height: 24px;
	left: 18.5%;
	top: 29.5%;
	z-index: 2;
	color: rgb(255, 255, 255);
	text-align: center;
	font-family: RobotoCondensed-Bold;
	font-weight: bold;
	font-size: 130%;
}
.string2-value {
	position: absolute;
	width: 140px;
	height: 24px;
	left: 21%;
	top: 9%;
	z-index: 2;
	color: rgb(255, 255, 255);
	text-align: center;
	font-family: RobotoCondensed-Bold;
	font-weight: bold;
	font-size: 130%;
}
.string1-value {
	position: absolute;
	width: 140px;
	height: 24px;
	left: 26%;
	top: 9%;
	z-index: 2;
	color: rgb(255, 255, 255);
	text-align: center;
	font-family: RobotoCondensed-Bold;
	font-weight: bold;
	font-size: 130%;
}
.soc-value {
	position: absolute;
	width: 140px;
	height: 24px;
	left: 32.5%;
	top: 53.5%;
	z-index: 2;
	color: rgb(255, 255, 255);
	text-align: center;
	font-family: RobotoCondensed-Bold;
	font-weight: bold;
	font-size: 130%;
}
.net-value {
	position: absolute;
	width: 140px;
	height: 24px;
	left: 56.25%;
	top: 21.5%;
	z-index: 2;
	color: rgb(255, 255, 255);
	text-align: center;
	font-family: RobotoCondensed-Bold;
	font-weight: bold;
	font-size: 130%;
}
.haus-value {
	position: absolute;
	width: 140px;
	height: 24px;
	left: 56.25%;
	top: 35%;
	z-index: 2;
	color: rgb(255, 255, 255);
	text-align: center;
	font-family: RobotoCondensed-Bold;
	font-weight: bold;
	font-size: 130%;
}
.batterie-value {
	position: absolute;
	width: 140px;
	height: 24px;
	left: 36%;
	top: 35%;
	z-index: 2;
	color: rgb(255, 255, 255);
	text-align: center;
	font-family: RobotoCondensed-Bold;
	font-weight: bold;
	font-size: 130%;
}
.pv-value {
	position: absolute;
	width: 140px;
	height: 24px;
	left: 36%;
	top: 21.5%;
	z-index: 2;
	color: rgb(255, 255, 255);
	text-align: center;
	font-family: RobotoCondensed-Bold;
	font-weight: bold;
	font-size: 130%;
}
.Golf7GTEremainingchargetime-value {
	position: absolute; 
	width: 12%; 
	height: 1.5%; 
	left: 54%; 
	top: 73%; 
	z-index: 2; 
	color: rgb(255, 255, 255); 
	text-align: center; 
	font-family: RobotoCondensed-Bold; 
	font-weight: bold; 
	font-size: 120%;
}
.Golf7GTESOC-value {
	position: absolute; 
	width: 8.75%; 
	height: 1.5%; 
	left: 48.5%; 
	top: 73%; 
	z-index: 2; 
	color: rgb(255, 255, 255); 
	text-align: center; 
	font-family: RobotoCondensed-Bold; 
	font-weight: bold; 
	font-size: 120%;	
}
.Golf7GTEStatus-value {
	position: absolute; 
	width: 8.75%; 
	height: 1.5%; 
	left: 43.5%; 
	top: 73%; 
	z-index: 2; 
	color: rgb(255, 255, 255); 
	text-align: center; 
	font-family: RobotoCondensed-Bold; 
	font-weight: bold; 
	font-size: 120%;	
}
.wallboxioniq-value {
	position: absolute; 
	width: 140px; 
	height: 24px; 
	left: 66.25%; 
	top: 49%; 
	z-index: 2; 
	color: rgb(255, 255, 255); 
	text-align: center; 
	font-family: RobotoCondensed-Bold; 
	font-weight: bold; 
	font-size: 130%;	
}
.pv-module-txt {
	position: absolute;
	width: 8.75%;
	height: 1.5%;
	left: 31.75%;
	top: 15.25%;
	z-index: 2;
	color: rgb(255, 255, 255);
	text-align: center;
	font-family: RobotoCondensed-Bold;
	font-weight: bold;
	font-size: 130%;
}
.stromnetz-txt {
	position: absolute;
	width: 8.75%;
	height: 1.5%;
	left: 59%;
	top: 15.25%;
	z-index: 2;
	color: rgb(255, 255, 255);
	text-align: center;
	font-family: RobotoCondensed-Bold;
	font-weight: bold;
	font-size: 130%;
}
.speicher-txt {
	position: absolute;
	width: 8.75%;
	height: 1.5%;
	left: 31.75%;
	top: 45%;
	z-index: 2;
	color: rgb(255, 255, 255);
	text-align: center;
	font-family: RobotoCondensed-Bold;
	font-weight: bold;
	font-size: 130%;
}
.hausnetz-txt {
	position: absolute;
	width: 8.75%;
	height: 1.5%;
	left: 59%;
	top: 45%;
	z-index: 2;
	color: rgb(255, 255, 255);
	text-align: center;
	font-family: RobotoCondensed-Bold;
	font-weight: bold;
	font-size: 120%;
}
.wallbox-txt {
	position: absolute;
	width: 8.75%;
	height: 1.5%;
	left: 48.75%;
	top: 57.25%;
	z-index: 2;
	color: rgb(255, 255, 255);
	text-align: center;
	font-family: RobotoCondensed-Bold;
	font-weight: bold;
	font-size: 130%;
}
.wallbox-Ioniq-txt {
	position: absolute; 
	width: 8.75%; 
	height: 1.5%; 
	left: 69.5%; 
	top: 57.25%; 
	z-index: 2; 
	color: rgb(255, 255, 255); 
	text-align: center; 
	font-family: RobotoCondensed-Bold; 
	font-weight: bold; 
	font-size: 130%;
}
.strasse-txt {
	position: absolute;
	width: 140px;
	height: 24px;
	left: 21%;
	top: 8.35%;
	z-index: 2;
	color: rgb(255, 255, 255);
	text-align: center;
	font-family: RobotoCondensed-Bold;
	font-weight: bold;
	font-size: 130%;
}
.garten-txt {
	position: absolute;
	width: 140px;
	height: 24px;
	left: 26%;
	top: 8.35%;
	z-index: 2;
	color: rgb(255, 255, 255);
	text-align: center;
	font-family: RobotoCondensed-Bold;
	font-weight: bold;
	font-size: 130%;
}
.dEpM-txt {
	position: absolute;
	width: 324px;
	height: 24px;
	left: 70%;
	top: 5%;
	z-index: 2;
	color: rgb(255, 255, 255);
	text-align: center;
	font-family: RobotoCondensed-Bold;
	font-weight: bold;
	font-size: 130%;
}
.strasse2-txt {
	position: absolute;
	width: 140px;
	height: 24px;
	left: 72.5%;
	top: 11%;
	z-index: 2;
	color: rgb(255, 255, 255);
	text-align: center;
	font-family: RobotoCondensed-Bold;
	font-weight: bold;
	font-size: 130%;
}
.garten2-txt {
	position: absolute;
	width: 140px;
	height: 24px;
	left: 77.5%;
	top: 11%;
	z-index: 2;
	color: rgb(255, 255, 255);
	text-align: center;
	font-family: RobotoCondensed-Bold;
	font-weight: bold;
	font-size: 130%;
}
.eigenverbrauch-txt {
	position: absolute;
	width: 140px;
	height: 24px;
	left: 49.25%;
	top: 31.75%;
	z-index: 2;
	color: rgb(0, 0, 0);
	text-align: center;
	font-family: RobotoCondensed-Bold;
	font-weight: bold;
	font-size: 100%;
}
.autarkie-txt {
	position: absolute;
	width: 140px;
	height: 24px;
	left: 49.25%;
	top: 37.5%;
	z-index: 2;
	color: rgb(0, 0, 0);
	text-align: center;
	font-family: RobotoCondensed-Bold;
	font-weight: bold;
	font-size: 100%;
}
.ladezustand-txt {
	position: absolute; 
	width: 8.75%; 
	height: 1.5%; 
	left: 43.5%; 
	top: 70%; 
	z-index: 2; 
	color: rgb(255, 255, 255); 
	text-align: center; 
	font-family: RobotoCondensed-Bold; 
	font-weight: bold; 
	font-size: 120%;	
}
.soc-txt {
	position: absolute; 
	width: 8.75%; 
	height: 1.5%; 
	left: 48.5%; 
	top: 70%; 
	z-index: 2; 
	color: rgb(255, 255, 255); 
	text-align: center; 
	font-family: RobotoCondensed-Bold; 
	font-weight: bold; 
	font-size: 120%;
}
.remainingchargingtime-txt {
	position: absolute; 
	width: 12%; 
	height: 1.5%; 
	left: 54%; 
	top: 70%; 
	z-index: 2; 
	color: rgb(255, 255, 255); 
	text-align: center; 
	font-family: RobotoCondensed-Bold; 
	font-weight: bold; 
	font-size: 120%;
}
.egv-value {
	position: absolute;
	width: 140px;
	height: 24px;
	left: 49.5%;
	top: 35%;
	z-index: 2;
	color: rgb(0, 0, 0);
	text-align: center;
	font-family: RobotoCondensed-Bold;
	font-weight: bold;
	font-size: 100%;
}
.aut-value {
	position: absolute;
	width: 140px;
	height: 24px;
	left: 49.5%;
	top: 40%;
	z-index: 2;
	color: rgb(0, 0, 0);
	text-align: center;
	font-family: RobotoCondensed-Bold;
	font-weight: bold;
	font-size: 100%;
}
.border1 {
	position: absolute;
	overflow: visible;
	width: 140px;
	height: 80px;
	border-width: 0px 3px 3px 0px;
	border-style: solid;
	border-color: rgb(255, 255, 255);
	border-image: initial;
	left: 56%;
	top: 18.5%;
	z-index: 1;
}
.border2 {
	position: absolute;
	overflow: visible;
	width: 140px;
	height: 80px;
	border-width: 3px 3px 0px 0px;
	border-style: solid;
	border-color: rgb(255, 255, 255);
	border-image: initial;
	left: 56%;
	top: 36%;
	z-index: 1;
}
.border3 {
	position: absolute;
	overflow: visible;
	width: 145px;
	height: 52px;
	border-width: 3px 0px 0px 3px;
	border-style: solid;
	border-color: rgb(255, 255, 255);
	border-image: initial;
	left: 53%;
	top: 50%;
	z-index: 1;
}
.border4 {
	position: absolute;
	overflow: visible;
	width: 140px;
	height: 80px;
	border-width: 3px 0px 0px 3px;
	border-style: solid;
	border-color: rgb(255, 255, 255);
	border-image: initial;
	left: 36%;
	top: 36%;
	z-index: 1;
}
.border5 {
	position: absolute;
	overflow: visible;
	width: 140px;
	height: 80px;
	border-width: 0px 0px 3px 3px;
	border-style: solid;
	border-color: rgb(255, 255, 255);
	border-image: initial;
	left: 36%;
	top: 18.5%;
	z-index: 1;
}
.border6 {
	position: absolute; 
	overflow: visible; 
	width: 145px; 
	height: 52px; 
	border-width: 3px 3px 0px 0px; 
	border-style: solid; 
	border-color: rgb(255, 255, 255); 
	border-image: initial; 
	left: 66%; 
	top: 50%; 
	z-index: 1;
}
.arrow1 {
	position: absolute;
	width: 130px;
	height: 30px;
	left: 56.25%;
	top: 25%;
	color: rgb(255, 255, 255);
	text-align: center;
	font-family: RobotoCondensed-Bold;
	font-size: 18pt;
	z-index: 2;
	font-weight: bold;
	display: block;
}
.arrow2 {
	position: absolute;
	width: 130px;
	height: 30px;
	left: 56.25%;
	top: 30.25%;
	color: rgb(255, 255, 255);
	text-align: center;
	font-family: RobotoCondensed-Bold;
	font-size: 18pt;
	z-index: 2;
	font-weight: bold;
}
.arrow3 {
	position: absolute;
	width: 130px;
	height: 30px;
	left: 36%;
	top: 30.25%;
	color: rgb(255, 255, 255);
	text-align: center;
	font-family: RobotoCondensed-Bold;
	font-size: 18pt;
	z-index: 2;
	font-weight: bold;
}
.arrow4 {
	position: absolute;
	width: 130px;
	height: 30px;
	left: 53.5%;
	top: 44.25%;
	color: rgb(255, 255, 255);
	text-align: center;
	font-family: RobotoCondensed-Bold;
	font-size: 18pt;
	z-index: 2;
	font-weight: bold;
}
.arrow5 {
	position: absolute;
        width: 130px;
        height: 30px;
        left: 36%;
        top: 25%;
        color: rgb(255, 255, 255);
        text-align: center;
        font-family: RobotoCondensed-Bold;
        font-size: 18pt;
        z-index: 2;
        font-weight: bold;
}
.arrow6 {
	position: absolute; 
	width: 130px; 
	height: 30px; 
	left: 66.5%; 
	top: 44.25%; 
	color: rgb(255, 255, 255); 
	text-align: center; 
	font-family: RobotoCondensed-Bold; 
	font-size: 18pt; 
	z-index: 2; 
	font-weight: bold;
}
.div-box0 {
	background-color:#333333; 
	width: 80%; 
	height: 30%; 
	position: absolute; 
	top: 83%; 
	left: 10%
}
.div-box1 {
	position: absolute; 
	top: 83%; 
	left: 10%; 
	color: white; 
	width: 20%; 
	height: 10%
}
.div-box2 {
	position: absolute; 
	top: 83%; 
	left: 30%; 
	color: white; 
	width: 20%; 
	height: 10%
}
.div-box3 {
	position: absolute; 
	top: 83%; 
	left: 50%; 
	color: white; 
	width: 20%; 
	height: 10%
}
.div-box4 {
	position: absolute; 
	top: 83%; 
	left: 70%; 
	color: white; 
	width: 20%; 
	height: 10%
}
.div-box5 {
	position: absolute; 
	top: 95%; 
	left: 10%; 
	color: white; 
	width: 20%; 
	height: 10%
}
.div-box6 {
	position: absolute; 
	top: 95%; 
	left: 30%; 
	color: white; 
	width: 20%; 
	height: 10%
}
.div-box7 {
	position: absolute; 
	top: 95%; 
	left: 50%; 
	color: white; 
	width: 20%; 
	height: 10%
}
.div-box8 {
	position: absolute; 
	top: 95%; 
	left: 70%; 
	color: white; 
	width: 20%; 
	height: 10%
}
.div-txt {
	font-size: 200%; 
	text-align: center
}
.Solarproduktion-value {
	position: relative; 
	font-size: 150%; 
	text-align: center; 
	top: -19%
}
.Hausverbrauch-value {
	font-size: 150%; 
	text-align: center; 
	position: relative; 
	top: -19%
}
.Einspeisung-value {
	font-size: 150%; 
	text-align: center; 
	position: relative; 
	top: -19%
}
.Netzbezug-value {
	font-size: 150%; 
	text-align: center; 
	position: relative; 
	top: -19%
}
.Autarkie-value {
	font-size: 150%; 
	text-align: center; 
	position: relative; 
	top: -19%
}
.Eigenverbrauch-value {
	font-size: 150%; 
	text-align: center; 
	position: relative; 
	top: -19%
}
.hoechsteproduktion-value {
	font-size: 150%; 
	text-align: center; 
	position: relative; 
	top: -19%
}
.CO2-value {
	font-size: 150%; 
	text-align: center; 
	position: relative; 
	top: -19%
}
.CO2-txt {
	font-size: 100%; 
	text-align: center; 
	position: relative; 
	top: -40%
}
.jahr {
	position: absolute; 
	top: 80.5%; 
	left: 10%; 
	color: white; 
	font-size: 150%
}
.button1 {
	position: absolute; 
	top: 110%; 
	left: 38.00%
}
.button2 {
	position: absolute; 
	top: 110%; 
	left: 46.50%
}
.button3 {
	position: absolute; 
	top: 110%; 
	left: 49%
}
.button4 {
	position: absolute; 
	top: 110%; 
	left: 51.5%
}
.button5 {
	position: absolute; 
	top: 110%; 
	left: 54.00%
}
.button6 {
	position: absolute;
	top: 110%;
	left: 44.00%
}
.button7 {
	position: absolute;
	top: 110%;
	left: 41.50%
}
@media only screen and (max-width: 320px) {
}
@media only screen and (max-width: 375px) {
}
@media only screen and (max-width: 414px) {
.waterdrop {
	display: none;
}
.thermometer {
        display: none;
}
.wallbox {
        width: 8%;
        height: 6%;
        left: 57%;
        top: 50%;
}
.haus {
        width: 8%;
        height: 6%;
        left: 82%;
        top: 40%;
}
.stromstecker {
        width: 9%;
        height: 6%;
        left: 82%;
        top: 11%;
}
.batterie {
        width: 8%;
        height: 5%;
        left: 10.5%;
        top: 40%;
}
.sonne {
         width: 8%;
         height: 6%;
         left: 10.5%;
         top: 11%;
}
.e3dc {
        width: 35%;
        height: 20%;
        left: 31.5%;
        top: 18%;
        margin-left: 0px;
        border-width: 1%;
        border-radius: 10%;
}
.wallbox-value {
        width: 15%;
        height: 1.5%;
        left: 62%;
        top: 39%;
        font-size: 100%;
}
.pMS-value {
        width: 10%;
        height: 1.5%;
        left: 4.5%;
        top: 60.5%;
        font-size: 100%;
}
.pMG-value {
        width: 10%;
        height: 1.5%;
        left: 25%;
        top: 60.5%;
        font-size: 100%;
}
.humidity-value {
	display: none;
}
.temp-value {
	display: none;
}
.string2-value {
        width: 15%;
        height: 1.5%;
        left: -0.5%;
        top: 4.5%;
        font-size: 100%;
}
.string1-value {
        width: 15%;
        height: 1.5%;
        left: 15.5%;
        top: 4.5%;
        font-size: 100%;
}
.soc-value {
        width: 10%;
        height: 1.5%;
        left: 10%;
        top: 44%;
        font-size: 100%;
}
.net-value {
        width: 15%;
        height: 1.5%;
        left: 70%;
        top: 23.5%;
        font-size: 100%;
}
.haus-value {
        width: 15%;
        height: 1.5%;
        left: 70%;
        top: 28.5%;
        font-size: 100%;
}
.batterie-value {
        width: 15%;
        height: 1.5%;
        left: 15%;
        top: 28.5%;
        font-size: 100%;
}
.pv-value {
        width: 15%;
        height: 1.5%;
        left: 15%;
        top: 23.5%;
        font-size: 100%;
}
.pv-module-txt {
        width: 20%;
        height: 1.5%;
        left: 4%;
        top: 18%;
        font-size: 100%;
}
.stromnetz-txt {
        width: 20%;
        height: 1.5%;
        left: 75%;
        top: 18%;
        font-size: 100%;
}
.speicher-txt {
        width: 20%;
        height: 1.5%;
        left: 4%;
        top: 37%;
        font-size: 100%;
}
.hausnetz-txt {
        width: 20%;
        height: 1.5%;
        left: 75%;
        top: 37%;
        font-size: 100%;
}
.wallbox-txt {
        width: 20%;
        height: 1.5%;
        left: 50%;
        top: 47%;
        font-size: 100%;
}
.strasse-txt {
        width: 20%;
        height: 1.5%;
        left: -3%;
        top: 4%;
        font-size: 100%;
}
.garten-txt {
        width: 20%;
        height: 1.5%;
        left: 13%;
        top: 4%;
        font-size: 100%;
}
.dEpM-txt {
        width: 30%;
        height: 1.5%;
        left: 5%;
        top: 55%;
        font-size: 100%;
}
.strasse2-txt {
        width: 20%;
        height: 1.5%;
        left: 0%;
        top: 60%;
        font-size: 100%;
}
.garten2-txt {
        width: 20%;
        height: 1.5%;
        left: 20%;
        top: 60%;
        font-size: 100%;
}
.eigenverbrauch-txt {
        width: 20%;
        height: 1.5%;
        left: 40%;
        top: 26%;
        font-size: 100%;
}
.autarkie-txt {
        width: 20%;
        height: 1.5%;
        left: 49%;
        top: 31%;
        font-size: 100%;
}
.egv-value {
        width: 10%;
        height: 1.5%;
        left: 55%;
        top: 28.5%;
        font-size: 100%;
}
.aut-value {
        width: 10%;
        height: 1.5%;
        left: 55%;
        top: 34%;
        font-size: 100%;
}
.border1 {
        width: 18%;
        height: 3%;
        border-width: 0px 2px 2px 0px;
        left: 68%;
        top: 21.5%;
}
.border2 {
        width: 18%;
        height: 3%;
        border-width: 2px 2px 0px 0px;
        left: 68%;
        top: 32.5%;
}
.border3 {
        width: 18%;
        height: 3%;
        border-width: 2px 0px 0px 2px;
        left: 14%;
        top: 32.5%;
}
.border4 {
        width: 18%;
        height: 3%;
        border-width: 2px 0px 0px 2px;
        left: 60%;
        top: 43%;
}
.border5 {
        width: 18%;
        height: 3%;
        border-width: 0px 0px 2px 2px;
        left: 14%;
        top: 21.5%;
}
.arrow1 {
        width: 10%;
        height: 1.5%;
        left: 72.5%;
        top: 20%;
        font-size: 120%;
}
.arrow2 {
        width: 10%;
        height: 1.5%;
        left: 72.5%;
        top: 30.5%;
        font-size: 120%;
}
.arrow3 {
        width: 10%;
        height: 1.5%;
        left: 18.5%;
        top: 30.5%;
        font-size: 120%;
}
.arrow4 {
        width: 10%;
        height: 1.5%;
        left: 64%;
        top: 41%;
        font-size: 120%;
}
.arrow5 {
        width: 10%;
        height: 1.5%;
        left: 18.5%;
        top: 20%;
        font-size: 120%;
}
body {
        overflow-x: hidden;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
  width: 88%;
  position: absolute;
  left: 1%;
  top: 67%;
}
li {
  float: left;
}
li a {
  color: white;
  display: block;
  padding: 14px 7px;
  text-align:center;
  text-decoration: none;
}
li a:hover {
          background-color: #4CAF50;
}
li a:focus {
          background-color: #0000FF;
}
.frame {
	position: absolute;
	width: 100%;
	height: 200%;
	top: 75%;
	left: -1%;
}

}
@media only screen and (max-width: 720px) {

}
@media only screen and (min-width: 2560px) {

}
@media only screen and (min-width: 3840px) {

}