/* CSS copyright R&R Conna GmbH */

@font-face {font-family:'Muli';font-style: normal;font-weight: 900;src: url("https://fonts.filavision.de/muli-900.woff2") format("woff2");}
@font-face {font-family:'Muli';font-style: normal;font-weight: 400;src: url("https://fonts.filavision.de/muli-regular.woff2") format("woff2");}

/* grundlegendes */
body{margin:0px;color:#fff;font-family:'Muli',sans-serif;font-size:20px;letter-spacing:1px;text-align:center}
h1,h2,h3{text-transform:uppercase;letter-spacing:2px;}
h1{font-weight:normal;font-size:1.5em;padding:20px 0px 30px;margin:0px}
h2{font-size:2em;font-weight:900;padding:70px 0px 100px;margin:0px}
h3{font-size:1.5em;font-weight:900;letter-spacing:1px;}
a,.fakelink{color:#fff;text-decoration:none;cursor:pointer}
p{position:relative}
input,textarea{font-family:'Muli',sans-serif;font-size:1em;border-radius:5px;padding:10px;border:none;margin:10px 0px;width:400px}
input[type=submit]{border:2px solid #fff;border-radius:20px;padding:20px;cursor:pointer;display:inline-block;background:transparent;width:auto;color:#fff}
.g-recaptcha{border-radius:5px;margin:10px 0px}
.wrapper{width:100%;max-width:1300px;margin:auto;position:relative}
.video-container{position:fixed; overflow: hidden;top:0;bottom:0;left:0;right:0;z-index:0 }
video{min-width: 100%; min-height: 100%; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);}
.bg{position:absolute;top:0;bottom:0;right:0;left:0;z-index:0}
.table{display:table;width:100%}
.td{display:table-cell;vertical-align:middle}
.red{color:#AC0000}
.quote{font-size:5em;line-height:1em;}
.floatleft{float:left}
.floatright{float:right}
.clear{clear:both}
.hide{display:none}
.height100{height:100vh;width:100%;display:table;position:relative}
.page{position:relative;padding:50px 0px;}
.o0{-moz-opacity:0;-khtml-opacity:0;opacity:0;filter:alpha(opacity=0)}
.valign-middle{display:table-cell;vertical-align:middle;text-align:center;position:relative;width:100%}

/* menü */
#menubar{text-align:left;position:fixed;top:0px;left:0px;width:100%;z-index:100}
#menubar .bg{background:#1E1F22;-moz-opacity:0;-khtml-opacity:0;opacity:0;filter:alpha(opacity=0);-webkit-transition:all 1s ease;transition:all 1s ease;}
#mobilemenubtn{display:none;position:absolute;top:12px;right:0px;width:30px;height:16px;border-top:2px solid #fff;border-bottom:2px solid #fff;z-index:300;cursor:pointer;}
#mobilemenubtn div{display:block;position:absolute;top:0px;left:0px;width:100%;height:7px;border-bottom:2px solid #fff}
#menubar ul{list-style:none;margin:0px;padding:0px;float:right}
#menubar li{display:inline-block;padding:50px 20px;text-transform:uppercase;-webkit-transition:all 1s ease;transition:all 1s ease;cursor:pointer;position:relative}
#activebar{position:absolute;height:8px;width:100%;background:#dc0c15;bottom:0px;-webkit-transition:all 1s ease;transition:all 1s ease;-moz-opacity:0;-khtml-opacity:0;opacity:0;filter:alpha(opacity=0);left:0px}
#logo{width:300px;padding:50px 0px;-webkit-transition:all 1s ease;transition:all 1s ease;cursor:pointer}
#emailreiter{position:fixed;z-index:100;color:#fff;right:0px;top:44vh;}
#emailreiter a{background:#AC0000;border-top-left-radius:20px;border-bottom-left-radius:20px;display:block;padding:40px 10px 40px 12px;border:1px solid #AC0000}
a#jobs{background:#1E1F22;margin:40px 0px 0px;border:1px solid #333}

/* start */
.start{-moz-opacity:0;-khtml-opacity:0;opacity:0;filter:alpha(opacity=0)}
.start .bg{background:#000;-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8;filter:alpha(opacity=80)}
#los{position:absolute;bottom:20vh;width:100%}
#los div{border:2px solid #AC0000;border-radius:20px;padding:20px;cursor:pointer;display:inline-block;}

/* agentur */
.agentur{color:#333;background:#f3f3f3}
.agentur .bg{background-image:url(img/agentur.jpg);background-position:50% 50%;background-size:cover;-moz-opacity:0.12;-khtml-opacity:0.12;opacity:0.12;filter:alpha(opacity=12);}
.agentur h3{margin:0px 0px 20px}
.agentur .table{margin:50px 0px}
.agentur .td{text-align:left;padding:0px 50px 0px 0px;width:50%;}
.agentur .td:last-child{padding:0px 0px 0px 50px;border-left:2px solid #AC0000}

/* services */
.services .bg{background:#000;-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8;filter:alpha(opacity=80)}
.services .table{margin:0px 0px 10px}
.services .td{padding:0px 20px;width:33.333%}
.services .td:first-child{padding:0px 20px 0px 0px;}
.services .td:last-child{padding:0px 0px 0px 20px;}
.redbox{position:relative;padding:20px;line-height:2em;cursor:pointer}
.redbox .bg{background:#AC0000;-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5;filter:alpha(opacity=50);border-radius:20px;}
#servicearrow{width:75%;position:relative;margin:0px auto;height:50px}
#servicearrow div{left:calc(50% - 25px);width:0;height:0;border-left:25px solid transparent;border-right: 25px solid transparent;border-bottom: 50px solid #fff;-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8;filter:alpha(opacity=80);position:absolute;-webkit-transition:all 1s ease;transition:all 1s ease}
.services .desc{padding:20px;position:relative;color:#000;-webkit-transition:all 1s ease;transition:all 1s ease;}
.services .desc .bg{background:#fff;border-radius:20px;}
.services .active{font-weight:bold}

/* referenzen */
.referenzen{color:#333;}
.referenzen h2{padding:70px 0px 10px;}
.auszug{padding:0px 0px 50px;}
.referenzen .bg{background:#F3F3F3}
.referenzen img{max-width:250px;max-height:80px;padding:50px 30px;display:inline-block;vertical-align:middle}

/* kontakt */
.kontakt{color:#F3F3F3;}
.kontakt .bg{background:#1E1F22;}
.kontakt .table{margin:50px 0px}
.kontakt .td{text-align:left;padding:0px 50px 0px 0px;width:50%;}
.kontakt .td:last-child{padding:0px 0px 0px 50px;vertical-align:top;border-left:2px solid #AC0000}
#karte{width:80%;max-width:400px}
.kontakt .fakelink{padding:20px 0px;display:inline-block}
.bgfusszeile{background:#000;-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8;filter:alpha(opacity=80)}
#message{position:absolute;bottom:20px;right:20px;border:2px solid #fff;border-radius:20px;padding:20px;color:#fff}

/* responsive */
@media screen and (max-width:1440px){
body{font-size:18px;}
.wrapper{width:90%;}
.referenzen img{padding:30px;}
}

@media screen and (max-width:1200px){
.referenzen img{max-width:200px;max-height:60px;}
h2{padding:20px 0px 50px;}
}

@media screen and (max-width:1100px){
body{font-size:16px;}
.wrapper{width:90%;}
#emailreiter a{padding:5px 50px 50px;}
}

@media screen and (max-width:1000px){
body{font-size:14px;}
.wrapper{width:96%;}
#emailreiter,#activebar,.services .desc,#servicearrow{display:none}
#logo{width:200px;padding:10px 0px;position:relative;z-index:110}
#mobilemenubtn{display:block;}
#menubar .bg{-moz-opacity:1;-khtml-opacity:1;opacity:1;filter:alpha(opacity=100);}
#menubar ul{display:none;margin:0px;padding:50px 0px 0px;float:none;background:#1E1F22;position:fixed;top:0px;left:0;right:0;}
#menubar li{display:block;padding:20px 0px;text-align:center;border-top:1px solid #333}
h1{font-size:1.3em;}
h2{font-size:1.6em;padding:0px 0px 50px;}
h3{font-size:1.1em;}
.referenzen h2{padding:0px 0px 10px;}
.auszug{padding:10px 0px 20px}
.start{height:100vh !important;display:table !important;}
.start .valign-middle{display:table-cell;padding:0px}
.height100{height:auto;display:block;}
.valign-middle,.page{display:block;padding:70px 0px}
.table{display:block;width:100%}
.td{display:block;width:100%;padding:0px}
.agentur .table, .services .table, .kontakt .table{margin:20px 0px}
.agentur .td, .services .td, .kontakt .td{text-align:center;padding:0px;width:100%;}
.agentur .td:last-child{padding:0px;border-left:none}
.quote{font-size:3em;}
.services .td:first-child{padding:0px;}
.services .td:last-child{padding:0px;}
.services .active{font-weight:normal}
.services p{display:block}
.redbox{padding:10px}
.referenzen br{display:none}
.referenzen img{max-width:100px;max-height:50px;padding:30px 15px;}
.kontakt .td:last-child{padding:50px 0px 0px;border-left:none}
input,textarea{width:90%;max-width:400px}
.g-recaptcha{display:inline-block}
#message{position:relative;bottom:auto;right:auto;left:auto;display:inline-block}
}