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

html {
font-size: calc(18px + (20 - 18) * ((100vw - 480px) / (1280 - 480)));
}

}

@media only screen and (max-width: 1024px) {
	
.menubtn {
display: block
}

#headerWrapper {
background-color: rgba(20, 20, 20, 0.5);
}

.leistungen-template-default #headerWrapper {
background-color: rgba(20, 20, 20, 1);
}

#mainmenuWrapper {
height: auto;
width: 100%;
background-color: rgba(20, 20, 20, 1);
padding:20px 0;
position: fixed;
top:78px;
left:0;
display: none
}

#mainmenuWrapper .menu {
list-style:none;
display: block;
width: 100%;
}

#mainmenuWrapper .menu li {
text-align: left;
padding:0 0 0 30px;
}

#mainmenuWrapper .menu a {
padding: 10px 0
}

.submenuWrapper {
position: relative;
display: block;
left: 0;
height: auto;
background-color:transparent;
padding: 20px 0
}

#mainmenuWrapper .menu .sub-menu li {
padding:0 0 0 10px
}

#mainmenuWrapper .menu .sub-menu a {
text-decoration: none
}

#contentWrapper,
#contentWrapper.page,
#contentWrapper.projektDetail,
#contentWrapper.leistungDetail {
padding:80px;
}

}

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

#beitragWrapper {
padding: 25px 50px 100px;
overflow: auto;
height: 100vh;
}
	
#beitragWrapper .maincharity {
padding: 10px 0;
display: none;
}

#contentWrapper,
#contentWrapper.page,
#contentWrapper.projektDetail,
#contentWrapper.leistungDetail {
padding:50px;
}

#contentWrapper.leistungDetail .galleryWrapper.oberflaechen .icon {
display: block;
}
	
/* ------------------------------------------------------------------- TEASER HOME ----- */

#teaserWrapper {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-column-gap: 50px;
grid-row-gap: 50px;
padding:0 100px;
}

#triggerWrapper {
width: 80px;
}

#contentWrapper.projektUebersicht {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

#projektshowcase .image {
width: calc(50% - 10px);
margin: 0 0 10px 0;
overflow: hidden;
}

#footerWrapper .copy {
padding: 0 50px;
}

#footerWrapper .copy .spacer {
display:block;
overflow: hidden;
height: 0;
}
	
}

@media only screen and (max-width: 480px) {
	
#headerWrapper #logo {
max-width: 180px;
}
	
/* ------------------------------------------------------------------- TEASER HOME ----- */

#teaserWrapper {
grid-template-columns: repeat(1, minmax(0, 1fr));
grid-column-gap: 50px;
}

#contentWrapper.projektUebersicht {
grid-template-columns: repeat(1, minmax(0, 1fr));
grid-column-gap: 0;
grid-row-gap: 20px;
}

#projektshowcase .image {
width: 100%;
margin: 0 0 10px 0;
overflow: hidden;
}
	
}