header {

    position:absolute;
    top:0;
    left:0;
    z-index:20;
    background-color:black;
    height:20px;
    width:100%;
    padding-top:2px;
    padding-bottom:8px;
    
    border-bottom: 1px solid white;
}

header li {
    font-size:15px;
}

header ul {
    
    list-style-type: none;
    
    display: grid;
    grid-template-columns: 30px auto 90px;
    
    height:100%;
    
    margin-left:10px;
    margin-right:10px;
    
}

header ul img {
    width:100%;
    height:30px;
    margin-top:-2px;
}

.startframe h1 {
    font-size:40px;
}

.startframe h2 {
    font-size:20px;
}

.startframe p {
    font-size:15px;
    padding:0;
    max-width:none;
}

.startframe {
    max-width:none;
}

.rightSide h2 {
    font-size: 30px;
}

.rightSide h3 {
    font-size: 16px;
}

#mapSegment p {
    font-size: 16px;
    top:100px;
    max-width:none;
    display:none;
}

#placeButtons {
    width:20px;
}

.bottom {
    width:100vw;
    height:20px;
}

.infoButton {
    width:30px;
    margin-top:-15px;
    margin-right:-25px;

}

#startpage .infoButton {
    top:45%;
    right:40px;
}

#infoCloseButton {
    width:30px;
    right:10px;
}


#infoPanel h2 {
    font-size:30px;
    margin-bottom: 2vh;
}

#infoPanel p {
    font-size:15px;
    margin-bottom:1em;
}

#infoPanel #credits {
    font-size:10px;
}

#mousecursor {
    width:40px;
    margin-left:0px;
}

#handmouse {
    width:60px;
    margin-left:40px;
}

#circlecursor {
    margin-top:10px;
    width:60px;
}

.child {
    grid-template-columns: 0px auto 30px;
    
}

.leftSide {
    display:none;
}

.rightSide {
    width:100vw;
}

.rightSideStart {
    width:100vw;
}

.startframe p {
    margin-left:50px;
    margin-right:50px;
}

.mapIMG {
    width:100vw;
}

#plcaeButtons {
    right:0px;
}

#placeButtons div {

    width:50px;
}

.placeButton {
    min-width:30px;
    height:30px;
}

.mapIMG img {
    width:100%;
    aspect-ratio: 1/2;
}

.area {
    width:16%;
}

.nearArea {
    width:80%;
    height:40%;
    left:7%;
}

.village {
    
    transform:translateX(-10%) translateY(26.5%) scale(170%);
    
}

.stadion {
    
    transform:translateX(17%) translateY(-9%) scale(200%);
    
}

.subway {
    
    transform:translateX(-65%) translateY(15%) scale(250%);
    
}

.olympiaPark {
    
    transform:translateX(-7%) translateY(-14%) scale(200%);

    
}

.sBahn {
    
    transform:translateX(43%) translateY(34%) scale(200%);
    
}


#area1spot01 {
    left:33%;
    top:50%;
}

#area1spot02 {
    left:33%;
    top:53%;
}

#area1spot03 {
    left:63%;
    top:48%;
}

#area2spot01 {
    left:53%;
    top:33%;
}

#area2spot02 {
    left:52%;
    top:43%;
}

#area2spot03 {
    left:58%;
    top:37%;
}

#area2spot04 {
    left:48%;
    top:39%;
}

#area3spot01 {
    left:30%;
    top:30%;
}

#area3spot02 {
    left:34%;
    top:34%;
}

#area3spot03 {
    left:38%;
    top:38%;
}

#area3spot05 {
    left:60%;
    top:46%;
}

#area4spot01 {
    left:45%;
    top:33%;
}

#area4spot02 {
    left:48%;
    top:38%;
}

#area4spot03 {
    left:53%;
    top:35%;
}

#area4spot04 {
    left:57%;
    top:32%;
}

#area4spot05 {
    left:63%;
    top:30%;
}

#area5spot01 {
    left:23%;
    top:58%;
}

#area5spot02 {
    left:23%;
    top:54%;
}

#area5spot03 {
    left:36%;
    top:28%;
}

#area1 {
    
    left:55%;
    top:35%;
    
}

#area2 {
    
    left:43%;
    top:53.5%;
    
}

#area3 {
    
    left:72%;
    top:43%;
    
}

#area4 {
    
    left:55%;
    top:56%;
    
}

#area5 {
    
    left:30%;
    top:35%;
    
}

#area6 {
    
    left:20%;
    top:10%;
    
}

#pictureFigcaption {
    
    position:absolute;
    top:100%;
    margin-top:5px;
    width:48%;
    font-size: 10px;
    
}

#picture #pictureInfo figcaption {
    font-size: 10px;
}

#pictureDrawFigcaption {
    
    position:absolute;
    top:100%;
    margin-top:5px;
    width:48%;
    font-size: 10px;
    
}

#pictureDraw #pictureDrawInfo figcaption {
    font-size: 10px;
}

#pictureDuo figcaption {
    
    position:absolute;
    top:100%;
    margin-top:5px;
    width:100%;
    font-size: 10px;

    
}

#pictureVideo figcaption {
    position: absolute;
    top:100%;
    margin-top:5px;
    font-size: 10px;
    width:50%;
}

#picture, #pictureDraw, #pictureDuo, #pictureVideo, #pictureVideoDuo {
    max-width: 100%;

}

#picture .image {
    min-width:100vw;
}