@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,100;1,700&display=swap');
* {
 margin:0;
 padding:0;
}
html, body {
 width: 100%;
 height: 100%;
}
body {
 font-family: 'Montserrat', sans-serif;
 background: #ffffff;
 font-weight:700;
 color:#ffffff; 
 font-size:1em;
 background-image: url("img/bg.jpg");
 background-repeat: repeat;
 background-attachment: fixed;
 background-position: center;
}





/* font size on different screens sizes */
@media only screen and (min-width:0px)  {
 body{font-size:60%;}
 div.main_inner_new{width:95vw;}
 div.listrow1{width:60px;}
 div.listrow2{width:calc(100% - 95px - 60px - 10px);}
 div.listrow3{width:95px;}
 div.listbg{padding: 1.5em 1.5em;}
 div.listcontent_right{right:15px;}
 div.runs_symbols{min-width:70px;}
 h1{font-size:10px;}
 .highlight-container:before {top:-5px}
 img.change_img{height:25px;}
 img.profileimg{width:20px;height:20px;border-radius:10px;}
 div.listrow_border_left{border-bottom-left-radius: 10px;border-top-left-radius: 5px;}
 div.listrow_border_right{border-bottom-right-radius: 5px;border-top-right-radius: 10px;}
}
@media only screen and (min-width:400px)  {
 div.disp_row5{display:block;}
}
@media only screen and (min-width:500px)  {
 body{font-size:70%;}
 div.main_inner_new{width:95vw;}
 div.listrow1{width:65px;}
 div.listrow2{width:calc(100% - 115px - 65px - 10px);}
 div.listrow3{width:115px;}
 div.listbg{padding: 1.5em 1.5em;}
 div.listcontent_right{right:15px;}
 div.runs_symbols{min-width:80px;}
 h1{font-size:15px;}
 img.change_img{height:25px;}
 img.profileimg{width:20px;height:20px;border-radius:10px;}
 .highlight-container:before {top:-1px}
 div.listrow_border_left{border-bottom-left-radius: 10px;border-top-left-radius: 5px;}
 div.listrow_border_right{border-bottom-right-radius: 5px;border-top-right-radius: 10px;}
}
@media only screen and (min-width:600px)  {
 body{font-size:70%;}
 div.main_inner_new{width:95vw;}
 div.listrow1{width:95px;}
 div.listrow2{width:calc(100% - 115px - 95px - 10px);}
 div.listrow3{width:115px;}
 div.listbg{padding: 1.5em 1.5em;}
 div.runs_symbols{min-width:90px;}
 div.disp_row4{display:block;}
 h1{font-size:20px;}
 img.change_img{height:25px;}
 img.profileimg{width:20px;height:20px;border-radius:10px;}
 div.listrow_border_left{border-bottom-left-radius: 10px;border-top-left-radius: 5px;}
 div.listrow_border_right{border-bottom-right-radius: 5px;border-top-right-radius: 10px;}
}
@media only screen and (min-width:800px)  {
 body{font-size:80%;}
 div.main_inner_new{width:90vw;}
 div.listrow2{width:calc(100% - 155px - 95px - 10px);}
 div.listrow3{width:155px;}
 div.listbg{padding: 1.5em 1.5em;}
 div.runs_symbols{min-width:100px;}
 h1{font-size:25px;}
 img.change_img{height:25px;}
 img.profileimg{width:20px;height:20px;border-radius:10px;}
 div.listrow_border_left{border-bottom-left-radius: 10px;border-top-left-radius: 5px;}
 div.listrow_border_right{border-bottom-right-radius: 5px;border-top-right-radius: 10px;}
}
@media only screen and (min-width:1100px)  {
 body{font-size:85%;}
 div.main_inner_new{width:80vw;max-width:1000px;}
 div.listbg{padding: 1.75em 1.75em;}
 h1{font-size:30px;}
 img.change_img{height:30px;}
 img.profileimg{width:25px;height:25px;border-radius:13px;}
 div.listrow_border_left{border-bottom-left-radius: 14px;border-top-left-radius: 7px;}
 div.listrow_border_right{border-bottom-right-radius: 7px;border-top-right-radius: 14px;}
}
@media only screen and (min-width:1300px)  {
 body{font-size:90%;}
 div.main_inner_new{width:70vw;max-width:1200px;}
 div.listbg{padding: 2em 2em;}
 h1{font-size:35px;}
 img.change_img{height:35px;}
 img.profileimg{width:30px;height:30px;border-radius:15px;}
 div.listrow_border_left{border-bottom-left-radius: 20px;border-top-left-radius: 10px;}
 div.listrow_border_right{border-bottom-right-radius: 10px;border-top-right-radius: 20px;}
}
@media only screen and (min-width:1500px)  {
 body {font-size:90%;}
}








.disp_row4{
 display:none;
}
.disp_row5{
 display:none;
}
img.logo {
 min-width:300px;
 max-width:20vw;
}
div.logo {
 width:100%;
 display: flex;
 align-items: center;
 justify-content: center;
}
.main_new {
 display: flex;
 justify-content: center;
}
.main_inner_new {
 width:50vw;
 min-width:300px;
}
a {
 color:#ffffff;
}

	


.ranking {
 padding-top: 10px;
 margin: 0px;
 width: 100%;
 display: flex;
 align-items: center;
}
.listbg {
 background-color: rgba(0,0,0,0.5);
 transform: skew(-25deg);
 padding: 2em 2em;
}
.listcontent {
 position: absolute;
 z-index: 10;
}
.listcontent_left {
 left:30px;
}
.listcontent_right {
 right: 40px;
}
.listrow1 {
 float:left;
 position:relative;
 width:95px;
 margin-right:5px;
}
.listrow2 {
 float:left;
 position:relative;
 width:calc(100% - 225px - 95px - 10px);
}
.listrow3 {
 float:right;
 position:relative;
 width:225px;
}
.overlay{
 position: fixed;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-image: url('img/bg_overlay.png');
 background-repeat: repeat;
 background-attachment: fixed;
 background-position: center;
 cursor: unset;
 z-index: -1;
 background-color: unset;
}






/* Login zentriert */
.centervh {
 display: -webkit-flex;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-align-items: center;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 width: 100%;
 height: 100%;
}
.centervh_inner {
 text-align: center;
 margin: 0 auto;
 width: 600px;
 min-width:200px;
 max-width:80vw;
}








.container_new {
 line-height: 1.4;
 text-align: center;
 padding: 44px;
 color: #333;
 position: absolute;
 top: 0;
 right: 0;
}
.highlight-container, .highlight {
 position: relative;
 padding:10px;
}
.highlight-container {
 display: inline-block;
}
.highlight-container:before {
 content: " ";
 display: block;
 height: 90%;
 width: 100%;
 margin-left: -3px;
 margin-right: -3px;
 position: absolute;
 background: #ffd500;
 transform: rotate(2deg);
 left: -1px;
 border-radius: 20% 25% 20% 24%;
 padding: 10px 3px 3px 10px;
}













.change_img{
 height:35px;
}

.myButton {
 background: url(./script/img/startsign/start_stop_off.png) no-repeat;
 cursor: pointer;
 width: 150px;
 height: 150px;
 background-size: contain;
}
.myButton:hover {   
 background:url(./script/img/startsign/start_stop_on.png) no-repeat;
 cursor: pointer;
 width: 150px;
 height: 150px;
 background-size: contain;
}