#header{ width: 100%; height: auto; position: fixed; z-index: 999999; top: 0px; } header{ font-family: Raleway, Arial, Helvetica; width: 100%; transition: all 0.3s; -webkit-transition: all 0.3s; transform: translateY(-2rem); -webkit-transform: translateY(-2rem); -moz-transform: translateY(-2rem); -ms-transform: translateY(-2rem); -o-transform: translateY(-2rem); opacity: 0; animation-delay: 0.1s; animation-duration: 0.5s; animation-fill-mode: forwards; animation-name: loadDown; position: fixed; top: 0; right: 0; left: 0; z-index: 1999; border-bottom: 1px solid #FFF; background: rgb(00,00,00,0.9); padding: 50px 0px 20px 0px; -webkit-box-shadow: 0px 7px 18px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 7px 18px 0px rgba(0,0,0,0.2); box-shadow: 0px 7px 18px 0px rgba(0,0,0,0.2); } header.fixed { border-bottom: 1px solid #FFF; background: rgb(00,00,00,0.7); padding-top: 20px; padding-bottom: 10px; z-index: 999; position: relative; } #headertop{ width: 100%; background-image: url(../../images/header_top_bg.png); background-color: #00968B; background-size: cover; height: auto; font-size: 10px; position: absolute; z-index: 9999; padding-top: 7px; padding-bottom: 5px; } #headertop a{text-transform: uppercase;} #headertop i{ font-size: 16px; margin-right: 5px; } #menuleft .icon{ padding-left: 0px; } #headertopleft{ float: left; text-align: left; } #headertopright{ float: right; text-align: right; } #menu{ font-size: 15px; padding: 30px 0px; position: relative; width: 1650px; margin: 0px auto; max-width: 100%; } #menuleft{ float: left; padding: 0px!important; margin: 0px!important; } #menuright{ float: right; margin-right: 20px; padding-top: 10px; } header.fixed #menuright{margin-right:20px;} .poweredby{ text-align: right; font-family: century-gothic, sans-serif; font-size: 15px; z-index: 400; padding-right: 20px; display: inline-block; } .poweredbybold{ font-weight: 700; font-style: normal; } #menu img{ width: auto; height: 140px; -webkit-filter: drop-shadow(5px 5px 5px #333); filter: drop-shadow(5px 5px 5px #333); margin-top: -140px; top: 80px; } header.fixed #menu img { width: auto; height: 80px; margin-top: -100px; top: 70px; } .logo:hover{opacity: 1;} .hero-wrapper { position: absolute; height: 130px; overflow: hidden; } dt{display: none;} #header{ padding-left: 0px!important; padding-right: 0px!important; padding-top: 0px!important; padding-bottom: 0px!important; margin-left: 0px!important; margin-right: 0px!important; margin-top: 0px!important; margin-bottom: 0px!important; } @keyframes loadLeftAnim { 0% { transform: translateX(-2rem); -webkit-transform: translateX(-2rem); -moz-transform: translateX(-2rem); -ms-transform: translateX(-2rem); -o-transform: translateX(-2rem); opacity: 0; } 100% { transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); opacity: 1; } } @keyframes loadDown { 0% { transform: translateY(-2rem); -webkit-transform: translateY(-2rem); -moz-transform: translateY(-2rem); -ms-transform: translateY(-2rem); -o-transform: translateY(-2rem); opacity: 0; } 100% { transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); opacity: 1; } } @keyframes loadUp { 0% { transform: translateY(2rem); -webkit-transform: translateY(2rem); -moz-transform: translateY(2rem); -ms-transform: translateY(2rem); -o-transform: translateY(2rem); opacity: 0; } 100% { transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); opacity: 1; } } /* ---------- MEDIA QUERIES ---------- */ @media screen and (max-width: 1200px) { #menu a{padding-right:10px!important;} } @media screen and (max-width: 1024px) { #menu img{ height: 70px; margin-top: -70px; top: 40px; } } @media screen and (max-width: 988px) {} @media screen and (max-width: 910px) { #menu{padding: 30px 0px 0px 0px!important;} .mobilaus{ display: none; } header, header.fixed{ padding-top: 10px; padding-bottom: 10px; } #menuleft{ float: none; text-align: center!important; } #menuright{ width: 100%; float: none; text-align: center; padding-top: 0px; } .poweredby{ text-align: center; font-size: 15px; display: block; padding-bottom: 10px; padding-right: 0px; } #menu img, header.fixed #menu img{ width: auto; height: 60px; margin-top: -60px; top: 40px; } dt{ display: block; text-align: center; margin-bottom: 10px; margin-top: 12px; height: 20px; } dd { display:none; padding: 0px!important; margin-top: 0px!important; margin-left: 0px!important; margin-right: 0px!important; margin-bottom: 15px!important; } .closed { background: url("../../images/hamburger_open.png") no-repeat center; width: 30px; height: 23px; background-size: 30px 22px; display: block; margin: 0px auto; } .open { background: url("../../images/hamburger_close.png") no-repeat center; width: 30px; height: 23px; background-size: 22px 22px; display: block; margin: 0px auto; } .hamburger{text-align: center;} header.fixed #menuright{margin-right: 0px;} .nav-item{ width: 100%!important; text-align: center; clear: both; padding: 10px 0px; position: relative; z-index: 99999; } .menuleft .nav-item{ text-align: left!important; padding-right: 0px!important; } #menuleft .pright-2x{padding-right: 0px!important;} .menupunkt{ float: none; display: block; border-bottom: 1px solid rgb(00,00,00,0.2); background: rgb(00,00,00,0.1); } .menupunkt:hover{background: rgb(00,00,00,0.6);} } @media screen and (max-width: 480px) {} /* -------- MEDIA QUERIES ENDE -------- */ /* === Login Button ===*/ #button_login{ position: fixed; top: 400px; right: 0px; z-index: 99; } .button_login{ width: auto; height: auto; background: rgb(00,00,00,0.7) ; -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75); box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75); padding: 4px 3px 4px 10px; margin-bottom: 10px; font-size: 11px; } .socialmedia_facebook_button, .socialmedia_twitter_button, .socialmedia_instagram_button, .socialmedia_youtube_button, .button_login{ position: fixed; right: 0px; z-index: 99; background: rgb(00,00,00,0.5); padding: 4px 8px 4px 5px; font-size: 16px; min-width: 30px; -webkit-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.3); -moz-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.3); box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.3); } .socialmedia_facebook_button{top: 250px;} .socialmedia_twitter_button{top: 310px;} .socialmedia_instagram_button{top: 280px;} .socialmedia_youtube_button{top: 340px;} #socialmedia_buttons a{opacity: 1;} .socialmedia_facebook_button:hover, .socialmedia_twitter_button:hover, .socialmedia_instagram_button:hover, .socialmedia_youtube_button:hover{ min-width: 50px; background: rgb(00,00,00,0.7); } .button_login{ font-size: 9px!important; font-weight: 600; padding: 4px 7px 4px 8px!important; letter-spacing: 1px; text-transform: uppercase; }