@font-face {
  font-family: 'Audiowide';
  font-style: normal;
  font-weight: 400;
  src: local('Audiowide Regular'), local('Audiowide-Regular'), url(l7gdbjpo0cum0ckerWCdmA_OIxo.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Audiowide';
  font-style: normal;
  font-weight: 400;
  src: local('Audiowide Regular'), local('Audiowide-Regular'), url(l7gdbjpo0cum0ckerWCdlg_O.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



h2 {
opacity:0.5;
text-align:center;
text-transform: uppercase;
}    

body {
    font-family: 'Audiowide', cursive;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-color:white;
}




.logo {
    height: 90px;
    position: absolute;    margin-top: -10px; z-index:888;
}

#menu {
position:fixed;width:100%;margin-top:-20px;margin-left:-50px;z-index:9999;

}



#menu ul, li  {
    list-style-type:none;
    width:100%;
}
.menu li {
    width: calc(100% / 4);
    line-height:2;
    height:30px;
    float:left;
    text-align:center;
    display:none;
    background-color:#b85430;
    text-transform:uppercase;
	color:yellow;
	cursor:pointer;
}
.contentwrapper {
min-width:300px;
max-width:900px;
margin-left:auto;
margin-right:auto;
    padding-top: 30px;
}
.content {
    display:grid;
    padding-left:5px; padding-right:5px;
    padding-top: 35px;
}

.contentblock img {
		width:100%;
		
}



.contentblock {
	width:95%;
	float: left;
    background-color: rgba(255,255,255,0.8);
    padding: 5px;
    border-radius: 5px;
    overflow:hidden;
    line-height:1.8;
    
}





@media only screen and (min-width: 800px) {
	.content{grid-template-columns: auto auto;}

}

@media only screen and (min-width: 1200px) {
	.content{grid-template-columns: auto auto auto;}

}
@media only screen and (min-width: 1600px) {
	
	.content{grid-template-columns: auto auto auto auto;}

}

.tennis-ball {
  position: absolute;
  overflow: hidden;
  height: 15em;
  width: 15em;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background-color: #cc0;
  background: radial-gradient(ellipse at center, #cc0 0%, darken(#cc0, 15) 100%);;
  box-sizing: border-box;
  transform: translate(-50%, -50%) rotate(30deg);
  box-shadow: 10px 20px 25px 10px rgba(#000, .2);
  
  &:before,
  &:after {
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    border: solid 1em #fff;
    border-radius: 50%;
    box-sizing: border-box;
  }
  
  &:before {
    right: 70%;
  }
  
  &:after {
    left: 70%;
  }
}


@media (orientation: portrait) { 
body {background-image:url('background-hochkant.jpg');}

.menu li {width:100%; padding-top:10px;padding-bottom:10px;}
.contentwrapper {

    padding-top: 60px;
}
}

@media (orientation: landscape) { 
body {background-image:url('background.jpg');}
}