@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/Urbanist-Thin.eot');
    src: url('../fonts/Urbanist-Thin.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Urbanist-Thin.woff2') format('woff2'),
        url('../fonts/Urbanist-Thin.woff') format('woff'),
        url('../fonts/Urbanist-Thin.ttf') format('truetype'),
        url('../fonts/Urbanist-Thin.svg#Urbanist-Thin') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/Urbanist-ExtraLightItalic.eot');
    src: url('../fonts/Urbanist-ExtraLightItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Urbanist-ExtraLightItalic.woff2') format('woff2'),
        url('../fonts/Urbanist-ExtraLightItalic.woff') format('woff'),
        url('../fonts/Urbanist-ExtraLightItalic.ttf') format('truetype'),
        url('../fonts/Urbanist-ExtraLightItalic.svg#Urbanist-ExtraLightItalic') format('svg');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Urbanist';
    src: url('../fonts/Urbanist-Light.eot');
    src: url('../fonts/Urbanist-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Urbanist-Light.woff2') format('woff2'),
        url('../fonts/Urbanist-Light.woff') format('woff'),
        url('../fonts/Urbanist-Light.ttf') format('truetype'),
        url('../fonts/Urbanist-Light.svg#Urbanist-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}






/*CSS START*/

html, body{
font-family: 'Urbanist', 'Roboto Condensed', 'PTSans-Regular', 'Segoe', 'Helvetica', 'Arial', 'Verdana', 'Sans', 'Lucida'; 
font-weight: 100;
font-style: normal;
font-size: 1.0em;
line-height: 2.0em; 
width: 100%; 
min-height: 100%; 
padding: 0px; 
margin: 0px; 
letter-spacing: 0.1em; 
background-color: #FFFFFF; 
}

.transitions, #nav{transition: 0.8s ease-in-out; }
span.mark, #texte a, #footer, #footer a, ul.mmwerbeagentursub, ul.referenzensub, ul.startsub, #logo, img#m2logo{transition: 0.5s ease-in-out; }
#texte, #nav ul ul.mmwerbeagentursub li, #nav ul ul.referenzensub li, #nav ul ul.startsub li{transition: 0.8s ease-in-out; }

a:link, a:visited{
/*cursor: url('curser.png'), auto; */
}
.small{
font-size: 0.6em;
}
/*::-moz-selection { background: #666666; color: #fff; }
::selection { background: #666666; color: #fff; }*/

#content{
width: 100%; 
min-height: 100%; 
padding: 0px; 
margin: 0px; 
overflow-x: hidden; 
position: relative; 
/*
background: rgb(224,224,224);
background: -moz-linear-gradient(0deg, rgba(224,224,224,1) 0%, rgba(218,218,218,1) 20%, rgba(218,218,218,1) 40%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(0deg, rgba(224,224,224,1) 0%, rgba(218,218,218,1) 20%, rgba(218,218,218,1) 40%, rgba(255,255,255,1) 100%);
background: linear-gradient(0deg, rgba(224,224,224,1) 0%, rgba(218,218,218,1) 20%, rgba(218,218,218,1) 40%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e0e0e0",endColorstr="#ffffff",GradientType=1);
*/
border: 0px solid #FF0000; 
}
#head{
position: relative; 
border-radius: 0px; 
display: block; 
width: 80%; 
height: auto;
padding: 50px 0px 30px 0px; 
margin: 0px 10% 0px 10%; 
}
#headline{}

b{
font-weight: 300;
}
h1, h3, h4, h5, h6 {
font-weight: 100;
color: #000000; 
display: block; 
width: 100%; 
padding: 0px; 
border: 0px solid #FF0000; 
}
h1{
font-size: 1.4em; 
}
h2{
padding: 0px; 
border: 0px solid #FF0000; 
display: inline-block; 
font-size: 1.5em; 
font-weight: 100; 
/*transform: rotate(-90deg); */
text-align: left; 
width: 100%; 
margin: 0px 0px 20px 0px;
color: #999999; 
text-transform: uppercase; 
}
h3{
font-size: 1.0em; 
}
h4{
font-size: 0.8em; 
}
h5{
font-size: 0.7em; 
}
h6{
font-size: 0.6em; 
}
hr{
border-top: 1px solid #999999; 
border-left: 0px solid #999999; 
border-right: 0px solid #999999; 
border-bottom: 0px solid #999999; 
}


#texte{
position: relative; 
left: 0%; 
top: 0px; 
width: 80%; 
min-height: 800px; 
display: inline-block; 
margin: 200px 0px 100px 0px; 
padding: 0px 10% 20px 10%; 
opacity: 1.0; 
hyphens: auto; 
border: 0px solid #FF0000; 
color: #000000; 
font-size: 1.2em; 
z-index: 2; 
}

#texte.unsichtbar{
opacity: 0.0; 
}

#texte a{
color: #000000; 
font-weight: 100; 
background-color: #FFFFFF; 
padding: 5px; 
position: relative; 
left: -5px; 
text-decoration: underline; 
border-radius: 8px; 
}
#texte a:hover, #texte a:focus{
background-color: #DFDFDF; 
}

.ausklappen{
max-height: 40px; 
overflow: hidden; 
width: 100%; 
background-color: #F6F6F6; 
padding: 20px; 
margin: 0px; 
background-image: url('../images/sys/plus.png');
background-repeat: no-repeat; 
background-position: right 20px top 20px; 
background-size: 30px 30px; 
transition: 0.8s ease-in-out; 
display: inline-block; 
border-radius: 8px; 
border: 1px solid #FFFFFF; 
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
.ausklappen h3{
height: auto; 
padding: 0px 0px 50px 0px; 
margin: 0px; 
display: block; 
font-weight: 300
}
.ausklappen.auf{
max-height: 1600px; 
}


#nav{
position: absolute; 
left: 0px; 
top: 0px;  
border: 0px solid #FF0000; 
background-color: #F2F2F2; 
width: 70%; 
height: auto; 
min-height: 70px; 
max-height: 70px; 
padding: 10px 25% 0px 5%; 
margin: 0px 0px 0px 0px; 
font-size: 1.0em; 
opacity: 1.0; 
z-index: 1000; 
transition: 0.8s ease-in-out; 
}


#nav ul{
display: flex; 
flex-wrap: nowrap; 
justify-content: center; 
padding: 0px; 
margin: 0px; 
list-style-type: none; 
position: relative; 
top: 0px; 
border: 0px solid #FF0000; 
}
#nav ul li{ 
position: relative; 
border: 0px solid #FF0000; 
padding: 10px 10px 0px 20px; 
margin: 0px 20px 0px 0px; 
text-align: center; 
width: calc(100% - 50px); 
}
#nav ul li a{
text-decoration: none; 
color: #000000; 
display: block; 
text-transform: uppercase; 
text-align: center; 
} 
#nav ul ul li a{
text-align: left; 
}
.start #nav ul li.start, .mmwerbeagentur #nav ul li.mmwerbeagentur, .referenzen #nav ul li.referenzen, .kontakt #nav ul li.kontakt, .datenschutz #nav ul li.datenschutz, .impressum #nav ul li.impressum{
font-weight: 100;
}
/*Sub-Navigation*/
#nav ul ul.mmwerbeagentursub, #nav ul ul.referenzensub, #nav ul ul.startsub {
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
} 
ul.mmwerbeagentursub, ul.referenzensub, ul.startsub{
font-weight: 100; 
margin: 0px; 
padding: 0px; 
width: 100%; 
min-width: 120px; 
height: 0px;
display: flex; 
flex-direction: column; 
align-items: flex-end; 
align-content: flex-end; 
overflow: hidden; 
border: 1px solid; 
border-radius: 8px 8px 8px 8px; 
border-color: rgba(255, 255, 255, 0.0);
}
ul.mmwerbeagentursub.auf, ul.referenzensub.auf, ul.startsub.auf {
border-top: 1px solid #CCCCCC; 
border-right: 1px solid #CCCCCC; 
border-bottom: 1px solid #CCCCCC; 
border-left: 1px solid #CCCCCC; 
overflow: visible;
background-color: #FFFFFF; 
}
#nav ul.startsub.auf, #nav ul.mmwerbeagentursub.auf, #nav ul.referenzensub.auf{
height: auto;
white-space: nowrap; 
margin: 0px; 
}


#nav ul ul.mmwerbeagentursub li, #nav ul ul.referenzensub li, #nav ul ul.startsub li{
width: 88%; 
display: block; 
border-left: 0px solid #999999; 
border-top: 0px solid #999999; 
border-bottom: 1px solid #999999; 
border-right: 0px solid #999999; 
padding: 0px 5% 0px 5%; 
margin: 0px; 
align-self: flex-start; 
text-align: left; 
font-size: 1.0em; 
}
#nav ul ul.mmwerbeagentursub li, #nav ul ul.referenzensub li, #nav ul ul.startsub li{
opacity: 0.0; 
}
#nav ul ul.mmwerbeagentursub.auf li, #nav ul ul.referenzensub.auf li, #nav ul ul.startsub.auf li{
opacity: 1.0; 
}
#nav ul ul.mmwerbeagentursub li a.auf, 
#nav ul ul.referenzensub li a.auf, 
#nav ul ul.startsub li a.auf{
color: #000000;
padding: 0px 0px 0px 0px; 
} 

#nav ul ul.mmwerbeagentursub li a:link, 
#nav ul ul.referenzensub li a:link, 
#nav ul ul.startsub li a:link,
#nav ul ul.mmwerbeagentursub li a:visited, 
#nav ul ul.referenzensub li a:visited, 
#nav ul ul.startsub li a:visited {
color: #333333;
padding: 0px 0px 0px 0px; 
transition: 0.8s ease-in-out; 
}

#nav ul ul.mmwerbeagentursub li a:hover, 
#nav ul ul.referenzensub li a:hover, 
#nav ul ul.startsub li a:hover, 
#nav ul ul.mmwerbeagentursub li a:focus, 
#nav ul ul.referenzensub li a:focus, 
#nav ul ul.startsub li a:focus {
color: #000000;
}

.mmwerbeagentursub, .referenzensub, .startsub {
z-index: 100; 
}


/*Sub-Navigation*/

span.mark{
position: absolute; 
top: -20px; 
left: 50%; 
margin: 0px; 
padding: 0px 0px 0px 0px; 
border-left: 0px solid #999999;
border-right: 0px solid #000000; 
border-bottom: 0px solid #000000; 
border-top: 0px solid #999999; 
background-color: #CCCCCC; 
transform: rotate(45deg);
width: 12px; 
height: 12px; 
opacity: 1.0; 
}



#logo{
position: absolute; 
top: 30px; 
right: 0px; 
width: 300px; 
height: auto; 
margin: 0px 0px 0px 0px; 
border-radius: 300px 300px 0px 0px; 
padding: 50px 0px 0px 0px; 
border: 0px solid #FF0000; 
background-color: #FFFFFF; 
display: inline-block; 
opacity: 0.0; 
z-index: 2000; 
}

#logo.active{
opacity: 1.0; 
}

img#m2logo{
display: block; 
width: 50%;
padding: 0px 25% 0px 25%;  
height: auto; 
opacity: 1.0; 
}
img#m2logo:hover, img#m2logo:focus{opacity: 0.5; }

#logotext{
position: relative; 
width: 100%; 
height: auto; 
display: flex; 
flex-wrap: nowrap; 
justify-content: center; 
padding: 0px; 
margin: 0px auto; 
border: 0px solid #FF0000; 
}

#logotext a{color: #000000; text-decoration: none; }

#lg_4_e, #lg_6_b, #lg_8_a, #lg_10_e, #lg_12_t, #lg_14_r, #lg_1_m, #lg_3_w, #lg_5_r, #lg_7_e, #lg_9_g, #lg_11_n, #lg_13_u {
flex-grow: 1;
flex-basis: auto; 
transition: 0.5s ease-in-out; 
padding: 0px; 
margin: 0px; 
}


#lg_1_m, #lg_2_2, #lg_3_w, #lg_4_e, #lg_5_r, #lg_6_b, #lg_7_e, #lg_8_a, #lg_9_g, #lg_10_e, #lg_11_n, #lg_12_t, #lg_13_u, #lg_14_r {
position: relative; 
opacity: 0.0;
border: 0px solid #FF0000; 
text-align: center; 
color: #000000; 
font-size: 1.1em; 
letter-spacing: 0.0; 
}

#lg_2_2{
transition: 0.1s ease-in-out; 
font-size: 1.1em; 
}

#lg_1_m.activ, #lg_2_2.activ, #lg_3_w.activ, #lg_4_e.activ, #lg_5_r.activ, #lg_6_b.activ, #lg_7_e.activ, #lg_8_a.activ, #lg_9_g.activ, #lg_10_e.activ, #lg_11_n.activ, #lg_12_t.activ, #lg_13_u.activ, #lg_14_r.activ{
opacity: 1.0;
}


/*
#lg_1_m{display:inline-block; top: 200px; left: -100px; }
#lg_2_2{display:inline-block; top: 300px; left: -300px; }
#lg_3_w{display:inline-block; top: 250px; left: -150px; }
#lg_4_e{display:inline-block; top: 500px; left: -260px; }
#lg_5_r{display:inline-block; top: 420px; left: -330px; }
#lg_6_b{display:inline-block; top: 380px; left: -120px; }
#lg_7_e{display:inline-block; top: 320px; left: -380px; }
#lg_8_a{display:inline-block; top: 220px; left: -500px; }
#lg_9_g{display:inline-block; top: 270px; left: -440px; }
#lg_10_e{display:inline-block; top: 190px; left: -150px; }
#lg_11_n{display:inline-block; top: 330px; left: -220px; }
#lg_12_t{display:inline-block; top: 350px; left: -350px; }
#lg_13_u{display:inline-block; top: 370px; left: -420px; }
#lg_14_r{display:inline-block; top: 410px; left: -170px; }
*/
#lg_1_m{display:inline-block; top: -20px; left: 0px; }
#lg_2_2{display:inline-block; top: -30px; left: 0px; }
#lg_3_w{display:inline-block; top: -10px; left: 0px; }
#lg_4_e{display:inline-block; top: -40px; left: 0px; }
#lg_5_r{display:inline-block; top: -30px; left: 0px; }
#lg_6_b{display:inline-block; top: -20px; left: 0px; }
#lg_7_e{display:inline-block; top: -40px; left: 0px; }
#lg_8_a{display:inline-block; top: -20px; left: 0px; }
#lg_9_g{display:inline-block; top: -30px; left: 0px; }
#lg_10_e{display:inline-block; top: -10px; left: 0px; }
#lg_11_n{display:inline-block; top: -30px; left: 0px; }
#lg_12_t{display:inline-block; top: -40px; left: 0px; }
#lg_13_u{display:inline-block; top: -30px; left: 0px; }
#lg_14_r{display:inline-block; top: -10px; left: 0px; }

#lg_1_m.activ{top: 0px; left: 0px; }
#lg_2_2.activ{top: 5px; left: 0px; }
#lg_3_w.activ{top: 0px; left: 0px; }
#lg_4_e.activ{top: 0px; left: 0px; }
#lg_5_r.activ{top: 0px; left: 0px; }
#lg_6_b.activ{top: 0px; left: 0px; }
#lg_7_e.activ{top: 0px; left: 0px; }
#lg_8_a.activ{top: 0px; left: 0px; }
#lg_9_g.activ{top: 0px; left: 0px; }
#lg_10_e.activ{top: 0px; left: 0px; }
#lg_11_n.activ{top: 0px; left: 0px; }
#lg_12_t.activ{top: 0px; left: 0px; }
#lg_13_u.activ{top: 0px; left: 0px; }
#lg_14_r.activ{top: 0px; left: 0px; }



#footer{
position: fixed; 
bottom: 0px; 
right: -97%; 
font-size: 1.0em; 
line-height: 30px; 
display: block;
width: 80%; 
min-height: 30px; 
padding: 5px 10% 5px 10%; 
margin: 0px;
background-color: #FFFFFF; 
background-image: url('../images/sys/plus.png');
background-repeat: no-repeat; 
background-position: left 0% top 5px; 
background-size: 30px 30px; 
overflow: hidden; 
color: #000000; 
border-top: 1px solid #FFFFFF; 
z-index: 999; 
}
#footer, #footer .footext, #footer .foolinks{opacity: 0.5; }
#footer:hover, #footer:focus {opacity: 0.8;}
#footer.offen {
border-radius: 0px; 
right: 0px; 
background-image: url('../images/sys/minus.png'); 
background-position: left 94% top 5px; 
border-top: 1px solid #999999; 
}
#footer.offen, #footer.offen .footext, #footer.offen .foolinks{opacity: 1.0; }
#footer.offen .footext{padding: 0px 0px 0px 0px; }
.footext{width: 69%; margin: 0px; padding: 0px 0px 0px 100px; float: left; display: inline-block; }
.foolinks{width: 30%; margin: 0px; padding: 0px; float: right; display: inline-block; }
#footer a:link, #footer a:visited {color: #000000; text-decoration: none; cursor: pointer; }
#footer a:hover, #footer a:focus {color: #CCCCCC; }



#responsive{
display: none; 
}
#footer_rs{
display: none; 
}

@media screen and (min-width: 769px) and (max-width: 1200px) {
#logo{right: -10%; top: 80px; width: 250px; background-color: none; }
#texte{margin: 250px 0px 100px 0px}
#nav{width: 90%;padding: 20px 5% 20px 5%;}
#nav ul ul{font-size: 0.8em; }
#footer{right: -95%;}
#footer.offen{background-position: left 98% top 5px;}
}

@media screen and (min-width: 300px) and (max-width: 768px) {
#responsive{
background-color: #F2F2F2; 
background-image: url('../images/sys/nav_resp.png'); 
background-position: right 1% top 0px; 
background-repeat: no-repeat; 
display: inline-block; 
position: fixed; 
top: 0px; 
left: 0px; 
width: 88%; 
max-height: 0px; 
overflow: hidden; 
padding: 60px 2% 0px 10%; 
margin: 0px; 
border: 0px solid #FF0000; 
z-index: 2001; 
transition: 0.8s ease-in-out; 
}
#responsive.offen{
max-height: 1000px; 
}
#responsive ul{list-style-type: none; padding: 0px 0px 50px 0px; margin: 0px; }
#responsive ul li a{text-decoration: none; margin: 0px; padding: 0px 0px 0px 5px; color: #000000; font-weight: 100; text-transform: uppercase; }
#responsive ul ul li a{
padding: 0px 0px 0px 20px; 
}
#nav{display: none; }

#logo{
position: relative; 
width: 60%; 
padding: 30px 20% 30px 20%; 
}
#lg_1_m, #lg_2_2, #lg_3_w, #lg_4_e, #lg_5_r, #lg_6_b, #lg_7_e, #lg_8_a, #lg_9_g, #lg_10_e, #lg_11_n, #lg_12_t, #lg_13_u, #lg_14_r, #lg_2_2{
font-size: 1.0em; 
}


#texte{
margin: 30px 0px 100px 0px; 
}

#footer{display: none;  }
#footer_rs{
display: inline-block; 
position: fixed; 
bottom: 0px; 
right: 0px; 
width: 80%; 
padding: 8px 10% 8px 10%; 
min-height: 120px;  
margin: 0px; 
border: 0px solid #999999; 
background-color: #F2F2F2; 
z-index: 1999; 
line-height: 1.2em; 
background-image: url('../images/sys/minus.png');
background-repeat: no-repeat; 
background-position: right 5px top 5px; 
background-size: 30px 30px; 
transition: 0.8s ease-in-out; 
}
#footer_rs a{color: #000000; }
#footer_rs.offen{
padding: 50px 0% 8px 0%; 
bottom: -140px; 
right: 0px; 
width: 40px; 
background-color: #FFFFFF; 
background-image: url('../images/sys/plus.png');
}








}