@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic);::selection{color:#fff;background:#c00;text-shadow:none}::-moz-selection{color:#fff;background:#c00;text-shadow:none}*,*:after,*:before{box-sizing:border-box}body,html{margin:0;padding:0;font-size:100%}body{font-family:sans-serif}.clearfix:before,.clearfix:after{content:'';display:table}.clearfix:after{clear:both}body{margin:0;padding:0}.container-colors{border:0 solid orange;margin:0 auto}body{background-color:#fff}.home{width:100%;height:100vh;position:relative;background-image:url('../../content/image_de/image_a380.jpg');background-size:cover;background-position:center center}.overlay-navigation{position:fixed;z-index:99;top:0;left:0;width:100%;height:100%;background-color:hsla(0,0%,100%,0.2);display:none;opacity:0}nav,nav ul{width:100%;height:100%;margin:0;padding:0}nav ul{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;list-style:none}nav ul li{-webkit-flex-basis:20%;-ms-flex-preferred-size:20%;flex-basis:20%;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:100%;overflow:hidden;opacity:0;display:none}nav li a{position:relative;top:46%;color:#fff;text-transform:uppercase;font-family:'Work sans',sans-serif;font-weight:300;letter-spacing:4px;text-decoration:none;display:block;text-align:center;font-size:.9rem;opacity:0}nav li a:before{content:'';width:70px;height:2px;background-color:#fff;position:absolute;top:50%;left:0;z-index:100;-webkit-transform:translateX(-100%);transform:translateX(-100%);opacity:0;-webkit-transition:all .2s linear;transition:all .2s linear}nav li a:after{content:attr(data-content);font-size:.7rem;-webkit-transition:all .2s linear;transition:all .2s linear;opacity:0;position:absolute;z-index:100;color:#fff;display:block;margin-right:auto;margin-left:auto;left:0;right:0;bottom:-50px;text-transform:none;font-family:'Open sans',sans-serif;font-weight:300;font-style:italic;letter-spacing:0}nav li a:hover:before{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}nav li a:hover:after{-webkit-transform:translateY(15px);transform:translateY(15px);opacity:1}nav li:nth-of-type(1){background-color:#29363b}nav li:nth-of-type(2){background-color:#ea495f}nav li:nth-of-type(3){background-color:#f4837d}nav li:nth-of-type(4){background-color:#fdcea9}nav li:nth-of-type(5){background-color:#99b998}.open-overlay{position:absolute;right:5rem;top:3.2rem;z-index:100;width:34px;display:block;cursor:pointer}.open-overlay span{display:block;height:1px;background-color:#fff;cursor:pointer;margin-top:8px}.animate-top-bar{-webkit-animation:animate-top-bar .6s linear 1 both;animation:animate-top-bar .6s linear 1 both}.animate-bottom-bar{-webkit-animation:animate-bottom-bar .6s linear 1 both;animation:animate-bottom-bar .6s linear 1 both}.animate-middle-bar{-webkit-animation:animate-middle-bar .6s linear 1 both;animation:animate-middle-bar .6s linear 1 both}.animate-out-top-bar{-webkit-animation:animate-out-top-bar .6s linear 1 both;animation:animate-out-top-bar .6s linear 1 both}.animate-out-bottom-bar{-webkit-animation:animate-out-bottom-bar .6s linear 1 both;animation:animate-out-bottom-bar .6s linear 1 both}.animate-out-middle-bar{-webkit-animation:animate-out-middle-bar .6s linear 1 both;animation:animate-out-middle-bar .6s linear 1 both}@-webkit-keyframes animate-top-bar{0%{background-color:#fff}50%{-webkit-transform:translateY(9px);transform:translateY(9px)}80%{-webkit-transform:translateY(5px);transform:translateY(5px);background-color:#fff}100%{-webkit-transform:translateY(0);transform:translateY(0);background-color:#29363b}}@keyframes animate-top-bar{0%{background-color:#fff}50%{-webkit-transform:translateY(9px);transform:translateY(9px)}80%{-webkit-transform:translateY(5px);transform:translateY(5px);background-color:#fff}100%{-webkit-transform:translateY(0);transform:translateY(0);background-color:#29363b}}@-webkit-keyframes animate-bottom-bar{0%{background-color:#fff}50%{-webkit-transform:translateY(-9px);transform:translateY(-9px)}80%{-webkit-transform:translateY(-5px);transform:translateY(-5px);background-color:#fff}100%{-webkit-transform:translateY(0);transform:translateY(0);background-color:#29363b}}@keyframes animate-bottom-bar{0%{background-color:#fff}50%{-webkit-transform:translateY(-9px);transform:translateY(-9px)}80%{-webkit-transform:translateY(-5px);transform:translateY(-5px);background-color:#fff}100%{-webkit-transform:translateY(0);transform:translateY(0);background-color:#29363b}}@-webkit-keyframes animate-middle-bar{0%{background-color:#fff}80%{background-color:#fff}100%{background-color:#29363b}}@keyframes animate-middle-bar{0%{background-color:#fff}80%{background-color:#fff}100%{background-color:#29363b}}@-webkit-keyframes animate-out-top-bar{0%{background-color:#29363b}50%{-webkit-transform:translateY(9px);transform:translateY(9px)}80%{-webkit-transform:translateY(5px);transform:translateY(5px);background-color:#29363b}100%{-webkit-transform:translateY(0);transform:translateY(0);background-color:#FFF}}@keyframes animate-out-top-bar{0%{background-color:#29363b}50%{-webkit-transform:translateY(9px);transform:translateY(9px)}80%{-webkit-transform:translateY(5px);transform:translateY(5px);background-color:#29363b}100%{-webkit-transform:translateY(0);transform:translateY(0);background-color:#FFF}} @-webkit-keyframes animate-out-bottom-bar{0%{background-color:#29363b}50%{-webkit-transform:translateY(-9px);transform:translateY(-9px)}80%{-webkit-transform:translateY(-5px);transform:translateY(-5px);background-color:#29363b}100%{-webkit-transform:translateY(0);transform:translateY(0);background-color:#FFF}} @keyframes animate-out-bottom-bar{0%{background-color:#29363b}50%{-webkit-transform:translateY(-9px);transform:translateY(-9px)}80%{-webkit-transform:translateY(-5px);transform:translateY(-5px);background-color:#29363b}100%{-webkit-transform:translateY(0);transform:translateY(0);background-color:#FFF}} @-webkit-keyframes animate-out-middle-bar{0%{background-color:#29363b}80%{background-color:#29363b}100%{background-color:#fff}} @keyframes animate-out-middle-bar{0%{background-color:#29363b}80%{background-color:#29363b}100%{background-color:#fff}}.home a{font-family:"Work Sans",sans-serif;color:#222;font-weight:300;font-size:12px;text-transform:uppercase;text-decoration:none;position:absolute;z-index:10;top:50px;left:50px;padding-bottom:3px;border-bottom:1px solid #222} @media(max-width:640px){nav ul{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}nav ul li{height:20%}nav ul li a{font-size:11px}nav li a:after{font-size:.6rem;bottom:-25px}nav li a:hover:after{-webkit-transform:translateY(0);transform:translateY(0)}.open-overlay{right:1rem}nav li a:before{width:25px}}.main_outer{margin:16px;border:0 solid green}.main_inner{margin:16px;border:0 dotted red}footer{position:fixed;left:0;right:0;bottom:0;max-width:100%;margin:0 auto;background:rgba(255,255,255,0.50);border:1px solid #fff;border-width:1px 0 0;z-index:99999;text-align:center}footer p{font-family:'Titillium Web',arial;font-size:1.05em;font-weight:100;margin:0;padding:4px 0}.footer-link a{color:#fff!important;text-decoration:none;underline:none;background:0}.footer-link a:hover{color:#c00!important;text-decoration:none!important}