html,
body {
	margin: 0;
	padding: 0;
	background: #0a4e70;
	color: white;
	font-family: 'Quicksand', sans-serif;
}

#logo{ font-size: 26px; height: 16px; padding:10px; color: #f29400; font-weight: normal; float: left; background-image: url("images/meteo365.png"); background-size: 180px 38px; background-position: center center; text-shadow: 2px 4px 3px rgba(0,0,0,0.3); width: 180px; letter-spacing: 2px; /*line-height: 50px;*/ background-repeat: none; /*border: 1px solid rgba(255,255,255,0.2);*/ border-radius: 30px;  position: absolute; top: 10px; left:10px; z-index: 999999; box-shadow: 1px 1px 4px #000;}

#content1 { background-image: url("images/weltkarte.png"); width: 90%; background-repeat: none; background-size: 90%; margin: 0 auto;   }


#container {
	width: 80%; position: absolute; top:10%;  max-width: 1000px; height: 90%; left:50%; margin-left: -500px; overflow: scroll; -ms-overflow-style: none; scrollbar-width: none;  text-align: center; z-index: 2000; background-color: rgba(0,0,0,0);  }


h1 { color: white; font-size: 26px; z-index: 9999999;  text-shadow: 2px 2px 4px #03111e;  font-weight: 100; letter-spacing: 2px; text-align: center; }
h2 { color: white; font-size: 20px; z-index: 9999999;  text-shadow: 2px 2px 4px #03111e;  font-weight: 100; letter-spacing: 2px; text-align: center; line-height: 50px; }
#inhalt { margin: 50px auto 0; width: 100%; max-width: 800px; padding-bottom: 60px;}




#content2 {  width: 100%; background-color: white;  padding-top: 10px;  }
#content2a {  width: 100%; background-color: rgba(10,78,112,0.8);  padding-top: 10px;  }
ul#menu { list-style-type: none; margin: 0 auto; padding: 0; }
ul#menu li img { width: 14px; vertical-align: middle; }
li { float: left;  border-radius: 20px; margin: 2px 10px 0; padding: 2px 6px;  background-color: rgba(10,78,112,0.8); }
a { display: block; color: #fff; text-decoration: none; }


#headercontent { width:100%; max-width: 680px; margin: 10px auto; }
#content3 { margin: 20px auto; color: #0a4e70; border-top: 1px dashed rgba(10,78,112,0.2); padding-top: 10px;}
#contentlink  {  width: 100%; max-width: 800px; margin: 30px auto;  color: #0a4e70; display: flex; justify-content: space-between; height: auto; align-content: space-between; /*background-color: rgba(10,78,112,0.8);*/}
#content4  { margin: 20px auto; width: 100%; max-width: 800px;  color: #0a4e70; line-height: 30px; text-align: center; }
/*.links { width: -webkit-calc(50% - 20px); width: -moz-calc(50% - 20px); width: calc(50% - 20px); float: left; margin-bottom: 20px; border-radius: 20px; border: 2px solid #0a4e70; background-color: white; }
.eins { width: 20%; float: left; border-radius: 20px;  }
.zwei { width: 72%; float: right; border-radius: 20px;  line-height: 28px; }*/

.links img {  border-radius: 20px; }

#contentlink33  {  width: 100%; max-width: 800px; margin: 10px auto;  color: white; text-shadow: 2px 2px 4px #03111e; /*background-color: rgba(10,78,112,0.8);*/}
.links { width: -webkit-calc(100% - 20px); width: -moz-calc(100% - 20px); width: calc(100% - 20px); padding: 10px; float: left; margin-bottom: 20px; border-radius: 20px; border: 2px solid #0a4e70;  box-shadow: 1px 1px 4px #000;  /*height: 280px;*/ }
.eins { width: 46px; float: left; border-radius: 20px;  }
.zwei { width: -webkit-calc(100% - 60px); width: -moz-calc(100% - 60px); width: calc(100% - 60px); float: right; border-radius: 20px;  line-height: 28px; }
.eins2 { width: -webkit-calc(100% - 220px); width: -moz-calc(100% - 220px); width: calc(100% - 220px); float: left; border-radius: 20px;  line-height: 28px; }
.zwei2 { width: 200px; float: right; border-radius: 20px;  }
.links2 { width: -webkit-calc(50% - 20px); width: -moz-calc(50% - 20px); width: calc(50% - 20px);  float: left; margin-bottom: 20px; border-radius: 20px; border: 2px solid #0a4e70;  box-shadow: 1px 1px 4px #000;  /*height: 280px;*/ background-color: #0a4e70; }

#menubutton { box-shadow: 1px 1px 4px #000; background-image: url("images/menu.png"); background-size: 18px 18px;  display: inline-block; margin-top: 5px; width: 30px; height: 30px;  background-position: center center;  background-repeat: no-repeat; border-radius: 50%; background-color: rgba(10,78,112,1);   } 

#tipps { text-align: center; font-weight: bold; font-size: 20px;}

.wetterlayer { background-color: #f29400; border-radius: 30px; padding: 0px 10px 0px 5px; color: white; text-shadow: 2px 2px 4px #03111e; letter-spacing: 1px; font-weight: 300; display: inline-block;  box-shadow: 1px 1px 4px #000; width: auto; margin: 10px; }

img.wettericon { width: 18px; margin-right: 5px; vertical-align: middle; /*background: radial-gradient(rgba(10,78,112,1), rgba(10,78,112,0));*/ }

.oben { width: 50px; height: 50px; border-radius: 50%; background-color: #f29400; border:2px solid #fff; margin: -25px auto 0; line-height: 45px; text-align: center; box-shadow: 1px 1px 4px #000; }
.oben img { vertical-align: middle; text-align: center;}

.unten { width: 90%; margin: 10px auto 10px; color: white; line-height: 25px; }


#container {
	width: 80%; position: absolute; top:10%;  max-width: 1000px; height: 90%; left:50%; margin-left: -500px; overflow: scroll; -ms-overflow-style: none; scrollbar-width: none;  text-align: center; z-index: 2000; background-color: rgba(0,0,0,0);  }


#content {font-size: 16px; line-height: 30px; width: 80%; margin: 0 auto; text-align: left; overflow: scroll; overflow-x: hidden!important; }


/* Hide scrollbar for Chrome, Safari and Opera */
#container::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#container {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

#content::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#content {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}


#wetterlayer { background-color: rgba(0,0,0,0.2); padding: 10px; margin: 50px 0 20px; text-align: center;}

#rain, #schnee, #wolken, #temp, #wind, #rachas, #wellen { padding: 10px; letter-spacing: 1px;}
#ubicacion, #terremoto, #messen, #timezone { background-color: rgba(0,0,0,0.4); padding: 10px; margin: 20px 0 20px;}
#ubicacion b, #terremoto b, #messen b, #timezone b {color:#f29400; }
#rain b, #schnee b, #wolken b, #temp b, #wind b, #rachas b, #wellen b, #howto b { color:#f29400;}

#meteo { background-color: rgba(0,0,0,0.2); text-align: center; margin: 30px auto; line-height: 30px; padding: 5px;}
#meteo a { color: white;}

#howto { background-color: rgba(0,0,0,0.4); text-align: center; margin: 30px 0; padding: 10px; border-bottom: 3px solid #000; }


@media only screen and (max-width: 700px) {
	
h1 { color: white; font-size: 20px; z-index: 9999999;  text-shadow: 2px 2px 4px #03111e;  font-weight: 100; letter-spacing: 2px; text-align: center; margin-top:60px; }
h2 { color: white; font-size: 16px; z-index: 9999999;  text-shadow: 2px 2px 4px #03111e;  font-weight: 100; letter-spacing: 2px; text-align: center; line-height: 20px; padding: 0; margin: 0; }
#inhalt { margin: 10px auto 0; width: 100%; max-width: 800px; padding-bottom: 10px;}
	li { float: left;  border-radius: 20px; margin: 0px 10px 10px; padding: 2px 6px;  background-color: rgba(10,78,112,0.8); }
}


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