/* normalize */
html {font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}
body {margin:0;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
audio:not([controls]) { display: none; height: 0; }
[hidden], template { display: none; }
a {color:#444;text-decoration:none; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out;}
a:active, a:hover {outline: 0;color:#fff;}
abbr[title] { border-bottom: 1px dotted; }
b, strong, .bold {font-family:'sansemi';}
dfn { font-style: italic; }
mark { background: #ff0; color: #000; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
img { border: 0; }
svg:not(:root) { overflow: hidden; }
hr { box-sizing: content-box; height: 0; }
pre { overflow: auto; }
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }
button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; }
button { overflow: visible; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
button[disabled], html input[disabled] { cursor: default; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
input { line-height: normal; -webkit-appearance: none; border-radius: 0;}
select { border-radius: 0;}
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="checkbox"] {-webkit-appearance: checkbox;}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }
input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; border-radius: 0;-webkit-appearance: none !important;}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
legend { border: 0;  padding: 0; }
textarea { overflow: auto; }
optgroup { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0;}
td, th { padding: 0; vertical-align: top;}
::-moz-selection {background: #8ccae5; text-shadow: none; }
audio, canvas, iframe, svg, video { vertical-align: middle; }
img { vertical-align: top; }
fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; }
.hidden, .invisible { display: none !important; }
.clearfix:before, .clearfix:after { content: " ";  display: table; }
.clearfix:after, .clear { clear: both; }
/* nur safari */
* {-webkit-tap-highlight-color: rgba(0,0,0,0);}
svg:not(:root) { overflow: hidden; }

/* allgemein */
* { margin:0; padding:0; border:0; }
html,body { height:100%; width:100%; font-size: 100%}
html { font-size:100%; }
*:focus  { outline: 0; }
ul, ol { margin: 0; padding: 0 ; }
nav ul, ul { list-style: none; list-style-image: none;list-style-position: outside;}
.home-li li::before {position:relative;}
main li {position:relative; padding-left:14px;margin-bottom:10px;}
main li:before {content: "";position:absolute;display:block;width:4px;height:4px;background: url('../methodpix/dot.svg') no-repeat;left: 0;top:10px;}

.transit, input.submit {-webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out;}
.loading {position:fixed; top:50%; left:50%; margin:-40px 0 0 -40px; width:80px; height:80px; background:url('../methodpix/loadeisi.png') no-repeat center center; -webkit-animation-duration: 1s; animation-duration: 1s;  -webkit-animation-fill-mode: both;  animation-fill-mode: both; -webkit-animation-name: pulse; 	animation-name: pulse;	-webkit-animation-iteration-count: infinite;}
@-webkit-keyframes pulse {  0% { -webkit-transform: scale(0.7); } 50% { -webkit-transform: scale(1.0); } 100% { -webkit-transform: scale(0.7); } }
@keyframes pulse {  0% { transform: scale(0.7); } 50% { transform: scale(1.0); } 100% { transform: scale(0.7); } }
.no-js .wrap {opacity:1;}
.no-js .loading {display:none;}

/*FUCKYOUMS*/
.leist img, .kont img, .top img {pointer-events:none;}

/************** FONTS *****************/
@font-face {font-family: 'sansbold';src: url('fonts/opensans-bold-webfont.woff2') format('woff2'),url('fonts/opensans-bold-webfont.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face {font-family: 'sansreg';src: url('fonts/opensans-regular-webfont.woff2') format('woff2'),url('fonts/opensans-regular-webfont.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face {font-family: 'sansemi';src: url('fonts/opensans-semibold.woff2') format('woff2'),url('fonts/opensans-semibold.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face {font-family: 'montlight';src: url('fonts/montserrat-light-webfont.woff2') format('woff2'),url('fonts/montserrat-light-webfont.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face {font-family: 'montreg';src: url('fonts/montserrat-regular-webfont.woff2') format('woff2'),url('fonts/montserrat-regular-webfont.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face {font-family: 'montbold';src: url('fonts/montserrat-bold.woff2') format('woff2'),url('fonts/montserrat-bold.woff') format('woff');font-weight: normal;font-style: normal;}

body {font-family:'sansreg', sans-serif;color:#000;line-height:1.4em;margin:0;padding:0;background:#fff;font-size:1em;}

h1, h2, h3, h4, h5, h6 {color:#000;font-weight:300;}
h1 {font-size:34px; line-height:38px; letter-spacing:1px;margin-bottom:40px;font-family:'montlight';text-transform:uppercase;}
h2 {font-size:24px; line-height:30px; letter-spacing:1px;margin-bottom:40px;font-family:'montreg';}
h3 {font-size:16px; line-height:26px;font-family:'montlight';}
h4 {font-size:16px; line-height:26px;font-family:'montreg';}
h5 {font-size:16px; line-height:26px;margin-bottom:10px;font-family:'montlight';}
h6 {font-size:34px; line-height:44px; letter-spacing:1px;font-family:'montlight';}

/* COLORZ */
.blau {color:#45a3e5;}
.green {color:#66bf39;}
.orange {color:#eb670f;}
.turkis {color:#01c7c5;}

/* ### tinyMCE ### */
.blau {color:#45a3e5!important;;}
.green {color:#66bf39!important;}
.orange {color:#eb670f!important;}
.dunkel {color:#637277!important;}
.turkis {color:#01c7c5!important;;}

/* CONTAINER */
/* 
.wrap {opacity:0;width:100%;}
.center {max-width:1200px; margin:100px auto; position:relative; padding:0 40px;}
.centerkl {max-width:800px; margin:0 auto; position:relative; padding:0 40px;}
.centernav {max-width:1400px; margin:0 auto; position:relative;padding:0 2%;z-index:9999;}
 */ 
.centernav {max-width:1400px; margin:0 auto; position:relative;padding:0 2%;z-index:9999;}
header {position:relative; width:100%;}
.warp {width:100%;height:100%;z-index:20;position:relative;}
.cont {width:100%;position:relative;z-index:8;}
.contbox {width:29%;padding:40px 2%;float:left;}

/*NAVI*/
.navigation {z-index:1000;position:fixed;margin-top:0; top:0px; right:0; width:100%; max-height:100%;display:none;overflow: hidden; bottom:0;}
label.hamburg {display:block;}
.overflowbox {position: relative; top:0; height: calc(100% - 10px); max-height: 100%; overflow:auto; background:#000;}

.main_nav {margin-top:5px;position: relative; margin-bottom:20px; font-weight:400;font-size:22px;}
.main_nav li {float:none; margin-right:0;width:100%;position:relative;border-bottom: 1px solid #303535;padding:0;-webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out;}
.main_nav li a {color:#fff;padding:50px 30px;display:block;text-align:center;text-transform:uppercase;font-family:'montlight';}
.main_nav li a:hover, .main_nav li.trail a {color:#000;background:#fff;}
.main_nav li:hover.active .active {color:#000;}
.main_nav li.active .active {color:#000;text-align:center;text-transform:uppercase;font-family:'montlight';font-weight:normal;}
.main_nav li.trail a {border-bottom:1px solid #e3e2e1;color:#0f6d9f;}
.main_nav li.active {padding:30px 0;display:block;border-bottom: 1px solid #e3e2e1;width:100%;background:#fff;text-align:center;}
.main_nav .level_2 {display:none;}

/* HAMBURGER */
.nav_toggler {position:fixed;top:0;right:20px;z-index:1001;}
label.hamburg {z-index:1005;background:none; width:59px; height:50px; position:absolute; top:18px; right:34px; cursor:pointer; margin-left:auto; margin-right:auto;border-radius:4px;}
input#hamburg {display:none;}
/* COOL HAMBURGER */
svg {height: 80px;position: absolute;width: 80px;}
.plates {display: flex;flex-wrap: wrap;max-height:160px;}
.plate {height:80px;width:80px;}
.burger {filter: url(#gooeyness);}
.x {transform: scale(0);transition: transform 400ms;}
.line {fill: none;stroke: #000;stroke-width: 6px;stroke-linecap: round;stroke-linejoin: round;transform-origin: 50%;transition: stroke-dasharray 500ms 200ms, stroke-dashoffset 500ms 200ms, transform 500ms 200ms;}
.line.nav-open {stroke:#fff;}
.x .line {stroke-width: 5.5px;}
/* First plate */
.plate1 .line2 {stroke-dasharray: 40 200;stroke-dashoffset: 0px;}
.plate1 .line3 {stroke-dasharray: 40 179;stroke-dashoffset: 0px;}
.active .line {transition: stroke-dasharray 500ms, stroke-dashoffset 500ms, transform 500ms;}
.active.plate1 .line1 {transform: scale(0, 1);transition: transform 500ms 100ms;}
.active.plate1 .line2 {stroke-dasharray: 5px 200;stroke-dashoffset: -164px;}
.active.plate1 .line3 {stroke-dasharray: 5px 179;stroke-dashoffset: -142px;}
.active .x {transform: scale(1);transition: transform 400ms 350ms;}


/* ##### BLINKY ##### */

.all, .ally {width:100%;background:#58696b;position:relative;}
.all {height:100%;}
.ally {min-height:100%;}
#dreileft, #dreilefty {clip-path: polygon(0 0, 0% 100%, 100% 0);-webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);background:#c8d12e;height:100%;width:100%;}
#dreilefty {position:absolute;top:0;left:0;z-index:5;z-index:5;}
#dreileft, .uno, .due, .weiss {float:left;}

    @keyframes bgcolor {
        
        0% {background-color: #45a3e5} /* blau */
        20% {background-color: #dd391e} /* rot */        
        40% {background-color: #66bf39} /* grün */
        60% {background-color: #eb670f} /* orange */
        80% {background-color: #01c7c5} /* turkis */  
        100% {background-color: #cac306} /* gelb */
    }
    #dreileft {
        -webkit-animation: bgcolor 4s infinite;
        animation: bgcolor 4s infinite;
        -webkit-animation-direction: alternate;
        animation-direction: alternate;
    }
    #dreilefty {
        -webkit-animation: bgcolor 8s infinite;
        animation: bgcolor 8s infinite;
        -webkit-animation-direction: alternate;
        animation-direction: alternate;
    }
    @keyframes bgback {
        0% {background-color: #eb670f} /* orange */
        20% {background-color: #04cb20} /* grün */
        40% {background-color: #cac306} /* gelb */
        60% {background-color: #00b6e3} /* turkis */
        80% {background-color: #dd391e} /* rot */
        100% {background-color: #45a3e5} /* blau */
    }
    .all {
        -webkit-animation: bgback 4s infinite;
        animation: bgback 4s infinite;
        -webkit-animation-direction: alternate;
        animation-direction: alternate;
    }
    .ally {
        -webkit-animation: bgback 8s infinite;
        animation: bgback 8s infinite;
        -webkit-animation-direction: alternate;
        animation-direction: alternate;
    }
    .uno, .due, .weiss {font-size:5em;}

    .weiss {color:#fff;}
    .uno, .due {color:#000;}
    .loggo {position:absolute;left:20%;top:40%;width:60%;}
    .loggo img {width:100%;}
    .logga {margin:0 auto;width:25%;padding:50px 20px;position:relative;z-index:8;}
    .logga img {width:100%;}
    .loggo a, .logga a {display:block;}
    
    .programm {padding: 20px 40px;background:#000;color:#fff;float:left;margin-bottom:40px;}
    .programm:hover {background:#fff;color:#000;}


@media (max-width: 960px) { 
    .loggo {left:22%;top:40%;width:60%;}
    .logga {width:60%;}
}
@media (max-width: 820px) { 
    .contbox {width:42%;padding:30px 4%;}
}
@media (max-width: 620px) { 
    .contbox {width:92%;margin-bottom:50px;}
}
@media (max-width: 500px) { 
    .loggo {left:10%;top:43%;width:80%;}
    .logga {width:70%;margin:0 0px;}
}