body {
font-family:"Roboto",sans-serif;
border:0;
margin:0;
padding:0;
font-size:13pt;
color:#fff;
background-color:#313131;
letter-spacing:.05em;
}

.mainnormal {
width: 100%;
height: auto;
position: relative;
margin: 0 auto;
}

@-webkit-keyframes rotation {
		from {
				-webkit-transform: rotate(0deg);
		}
		to {
				-webkit-transform: rotate(359deg);
		}
}

a {
color:#fff;
text-decoration: none;
}

.header {
width:100%;
height:auto;
position:relative;
padding:20px 0 0 0;
display: block;
height:100px;
}

.header .logo {
width:200px;
height:auto;
background-image:url(../../media/werbeagentur-logo-neu.svg);
background-size:100%;
background-repeat:no-repeat;
margin:5px auto 0 auto;

}

.header .logo a {
display:block;
}

.header .logo img {
visibility: hidden;
}

.content .grid {
width:calc(100%-80px);
height:70vh;
position: relative;
position: relative;
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 40px;
padding:0 40px 40px 40px;
margin-bottom:90px;
transition:all .5s;
transition-timing-function: ease;
}
.content .vframe {
width:95%;
height:auto;
position: relative;
display:inline-block;
}


.footer .grid {
width:calc(100%-120px);
height:15vh;
position: relative;
display:block;
display: grid;
grid-template-columns: 31.5% 31.5% 31.5%;
grid-gap: 40px;
padding:30px 40px 40px 8%;
transition:all .5s;
transition-timing-function: ease;
}
.footer .grid .elem {

}
.content .grid .elem {
text-align: center;
vertical-align:middle;
display:inline-block;
position: relative;
transition:all .5s;
transition-timing-function: ease;
overflow:hidden;
opacity: 0;
top:20px;
}
.content .grid .elem.vis {
opacity:1.0;
top:0px;
}
.content .grid .elem .background {
display:block;
width:100%;
height:100%;
background-size:cover;
background-position: center;
position: relative;
}
.content .grid .elem:nth-child(4) .background {
display:block;
width: 100%;
height: 100%;
/* top:-20%; */
/* left:-20%; */
background-size: 150%;
background-position: center;
background-repeat:repeat;
position: absolute;
/* transform-origin: 50% 50%; */
/* -webkit-animation: rotation 250s infinite linear; */

}
.content .grid .elem a {
text-transform: uppercase;
font-size:2.0em;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display: flex;
align-items: center;
justify-content: center;
background-color:rgba(0,0,0,.4);
transition:all .5s;
transition-timing-function: ease;
}

.content .grid .elem a:hover {
background-color:rgba(0,0,0,0.0);
}

.content .grid .elem a h2 {
text-shadow:1px 1px 6px #000;
letter-spacing:.05em;
font-size: 35px;
font-weight: 600;
color: #fff;
}




.content {
text-align:center;
}

.content .commentslideshow {
width:calc(100%-80px);
height:auto;
min-height:400px;
position: relative;
display:block;
padding:0 40px 40px 40px;
background-color:#777;
text-align:left;
}

.fancybox-slide p {
color:#000;

}

#popup {
display: none;
}


.fancybox-slide p a {
color:#000;
}

video {
display:inline-block;
width:100%;
height:auto;
position: relative;
margin-bottom:34px
}

#inhalt2405 {
padding: 0 40px 40px 40px;
}

@media screen and (max-width:1400px) and (min-width:860px) {
.content .commentslideshow {
width:calc(100%-80px);
height:auto;
min-height:500px;
position: relative;
display:block;
padding:0 40px 40px 40px;
background-color:#777;

}


}
.rsOverflow {

}
.content .commentslideshow .commentslide .background {
width:100%;
height:400px;
background-size:500px;
background-repeat:no-repeat;
background-position: 80% 40px;
position:absolute;
left:0;
top:0;
}
.content .commentslideshow .anfuehrungszeichen {
font-size:6.0em;
position:absolute;
left:48%;
top:50px;
}
.content .commentslideshow .commentslide a {
width:30%;
display:block;
margin:60px auto 40px 10%;
position: relative;
}
.content .commentslideshow .commentslide a p {
position: relative;

}
.content .commentslideshow .commentslide p:first-of-type:before {
content:"«";
font-size:6.0em;
position:absolute;

width:20px;
height:50px;
display:inline-block;
left:-70px;
top:-80px;
}

.content .commentslideshow .commentslide p:last-of-type:after {
content:"»";
font-size:6.0em;
position:absolute;
right:0px;
top:-80px;
width:20px;
height:50px;
display:inline-block;
}
.rsNav {
width:100%;
height:30px;
margin:0;
text-align:center;
position:relative;
}

.rsBullet {
width:15px;
height:15px;
display:inline-block;
position:relative;
background-color:#aaa;
margin:0 10px;
border-radius:40px;
cursor:pointer;
top:-200px;
}
.rsBullet.rsNavSelected {
width:15px;
height:15px;
display:inline-block;
position:relative;
background-color:#eee;
margin:0 10px;
}

#inhalt2232 h2 {

font-size: 1.6em;
}
@media screen and (max-width:1200px){
.content .grid .elem a {
text-transform: uppercase;
font-size:1.5em;
-webkit-appearance:none;
}
}

@media screen and (min-width:1000px){
#inhalt2405 p {
margin-top:0;
}
}

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

.header {
width:100%;
height:auto;
position:relative;
padding:20px 0 0 0;
display: block;
height:90px;
}

.header .logo {
padding-top:20px;
padding-bottom:0px;
}
.content {
width:94%;
padding:0 3%;
}

.content .vframe {
width:100%;
height:auto;
position: relative;
display:inline-block;
}

video {
display:inline-block;
width:100%;
height:auto;
position: relative;
margin-bottom:17px;
margin-top:0px;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
}

.content .grid {
width:100%;
grid-template-columns: 48% 48%;
padding:0 0 0 0px;
grid-gap:4%;
}

.content .grid .elem a {
text-transform: uppercase;
font-size:1.1em;
}
.footer {
padding:50px 3% 0 3%;
}

.footer .grid {
width:calc(100%-120px);
height:auto;
position: relative;
display:block;
display: block;
grid-template-columns: 100%;
grid-gap: 40px;
padding:0 0px 20px 0px;
transition:all .5s;
transition-timing-function: ease;
}

.footer .grid .elem {
height:auto;
}
.content .commentslideshow {
width:calc(100%-20px);
height:auto!important;
min-height:1000px;
position: relative;
display:block;
padding:30px 20px 40px 20px;
background-color:#777;
}

.content .commentslideshow .commentslide .background {
width:100%;
height:34vh;
background-size:120%;
background-repeat:no-repeat;
background-position:center;
position:relative;
left:0;
top:0;
}

.content .commentslideshow .commentslide a {
width:100%;
display:block;
margin:80px 0 40px 0%;
position: relative;
}
.content .commentslideshow .commentslide a p {
position: relative;

}
.content .commentslideshow .commentslide p:first-of-type:before {
content:"«";
font-size:6.0em;
position:absolute;

width:20px;
height:50px;
display:inline-block;
left:0px;
top:-120px;
}

.content .commentslideshow .commentslide p:last-of-type:after {
content:"»";
font-size:6.0em;
position:absolute;
right:40px;
top:-50px;
width:20px;
height:50px;
display:inline-block;
}


.rsNav {
width:100%;
height:30px;
margin:0;
text-align:center;
position:absolute;
top:0px;
left:0;
}

.rsBullet {
width:10px;
height:10px;
display:inline-block;
position:relative;
background-color:#aaa;
margin:0 10px;
padding:5px;
border-radius:40px;
cursor:pointer;
top:15px;
}
.rsBullet.rsNavSelected {
width:10px;
height:10px;
display:inline-block;
position:relative;
background-color:#eee;
margin:0 10px;
}

#inhalt2232 h2 {
margin-top:40px;
margin-bottom:30px;
font-size: 1.6em;
}
#inhalt2405 {
padding: 0 0px 0px 0px;
}


}

@media screen and (max-width:900px) and (orientation:landscape){
.content .grid {
width:calc(100%);
height:100vh;
position: relative;
position: relative;
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 40px;
padding:0 40px 40px 0px;
transition:all .5s;
transition-timing-function: ease;
}

.content .commentslideshow .commentslide .background {
width: 60%;
height: 280px;
background-size: 120%;
background-repeat: no-repeat;
background-position: center;
position: relative;
left: 0;
top: 0;
margin:0 auto;
}


}

.grid img {
visibility: hidden;
}
.grid .social a {
width:25px;
height:25px;
overflow: hidden;
display: inline-flex;
background-size:100%;
background-repeat:no-repeat;
}
.grid a#facebook {
background-image:url(../../media/fb-icon.png);
}

.grid a#instagram {
background-image:url(../../media/instagram-icon.png);
top: -7px;
position: relative;
margin-left: 14px;
}


@media (prefers-color-scheme: light) {
body {
color: #000;
background-color: #eee;
}

a {
color:#000;
}
.content .commentslideshow {
background-color: #fff;
}
.content .grid .elem a h2 {
color:#fff;
}
.header .logo {

background-image:url(../../media/werbeagentur-logo-neu-black.svg);

}

.content .grid .elem a {

background-color: rgba(255,255,255,.6);
}
.content .grid .elem a h2 {
color:#000;
text-shadow:none;
}

.content .grid .elem a:hover h2 {
color:#fff;
text-shadow:none;
text-shadow:1px 1px 10px #000;
}

.grid a#facebook {
background-image:url(../../media/fb-icon-schwarz.png);
}

.grid a#instagram {
background-image:url(../../media/instagram-icon-schwarz.png);
}

}

@media screen and (max-width:1000px) {
.content .grid .elem a h2 {
text-shadow:1px 1px 6px #000;
letter-spacing:.05em;
font-size: 20px;
font-weight: 600;
color: #fff;
}
}

@media screen and (max-width:350px) {
.content .grid .elem a h2 {
text-shadow:1px 1px 6px #000;
letter-spacing:.05em;
font-size: 17px;
font-weight: 600;
color: #fff;
}
}