/* header */ #header_wrap { } .not-fullscreen { height: 100%; } /* header background */ /*@media (orientation: portrait) { .not-fullscreen { height: 100%; } }*/ .not-fullscreen { height: 100%; } #hamburger-menu {display:none;} /*Effekte Header Box*/ .headerbox_big { width: 50%; color:white; padding-left: 6%; float:left; position: relative; margin-top: -9em; z-index: 99; padding: 0.4em 1.5em 0.4em 0 ; z-index: 1;} .headerbox_big h1 {font-size: 0.7em; text-align: right; } .headerbox_small { width: 30%; color:white; padding-left: 6%; float:left; position: relative; margin-top: -3em; z-index: 99; padding: 0.4em 1.5em 0.4em 0; z-index: 1;} .headerbox_small h2 {font-size: 0.8em; text-align: right;} #nav { display: none!important; } #menu-container { display: block!important; } #menu-wrapper { overflow: hidden; max-width: 100%; cursor: pointer; } #menu-wrapper #hamburger-menu { position: relative; width: 35px; height: 20px; margin: 30px; float:right; } #menu-wrapper #hamburger-menu span { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; left: 0; display: block; width: 100%; height: 5px; border-radius: 10px; color: #730f74; background-color: #730f74; position: absolute; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .4s ease-in-out; transition: .4s ease-in-out; } #menu-wrapper #hamburger-menu span:nth-child(1) { top: 0; } #menu-wrapper #hamburger-menu span:nth-child(2) { top: 9px; } #menu-wrapper #hamburger-menu span:nth-child(3) { top: 18px; } #menu-wrapper #hamburger-menu.open span:nth-child(1) { top: 9px; -webkit-transform: rotate(135deg); transform: rotate(135deg); } #menu-wrapper #hamburger-menu.open span:nth-child(2) { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; left: -60px; } #menu-wrapper #hamburger-menu.open span:nth-child(3) { top: 9px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } #menu-container .menu-list .menu-submenu { padding-top: 20px; padding-bottom: 20px; } #menu-container .menu-list { padding-left: 0; display: block; position: absolute; width: 100%; background: rgba(206, 89, 146, 0.92); z-index: 999; overflow-y: hidden; overflow-x: hidden; margin-top: 5px; left: -160%; } .menu-list li { width: 100%; } .menu-list li a { padding: 15px!important; width: 100%!important; display: block!important; font-size: 16px!important; letter-spacing: 0.05em!important; transition:0.4s ease; color: #bababa; } #menu-container ul, #menu-container ul li { list-style: none; list-style-type: none; } .menu-list .sub-menu a { background-color: rgba(111, 111, 111, 0.59); height: 100%; } .menu-list li a:hover { color: #c52d30; } .menu-list li a:hover { background-color: #502950!important; color: #e8e8e8; text-decoration: none; } #menu-container .menu-list li.accordion-toggle, #menu-container .menu-list .menu-login { font-size: 16px; padding: 20px; text-transform: uppercase; border-top: 1px solid #dbdcd2; } #menu-container .menu-list li:first-of-type { border-top: 0; } .accordion-toggle, .accordion-content { cursor: pointer; font-size: 16px; position: relative; letter-spacing: 1px; } .accordion-content { display: none; } .accordion-toggle a:before, .accordion-toggle a:after { content: ''; display: block; position: absolute; top: 50%; right: 30px; width: 15px; height: 2px; margin-top: -1px; background-color: #5a5858; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transition: all 0.3s; transition: all 0.3s ease-out; } .accordion-toggle a:before { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 1; z-index: 2; } .accordion-toggle.active-tab { background: yellowgreen; transition: all 0.3s ease; } .accordion-toggle a.active:before { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); background: #fff !important; } .accordion-toggle a.active:after { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); background: #fff !important; opacity: 0; } #menu-container li.current-menu-item a, #menu-container li.current-menu-item a:hover, #menu-container li.current-menu-item a:focus, #menu-container li.current-menu-item a:active { background-color: rgb(91, 61, 91); color: #e8e8e8; text-decoration: none; } .main-nav > ul > li { float: left; height: auto!important; } .box40, .box60 { width: 94%; float: left; margin: 3%; } /* nav */ #nav { background: none; display: block; margin-top: 0; padding: 20px; } #nav li { display: block; width: 100%; } #nav > a { background-repeat: no-repeat; background-size: 30px; font-size: 1px; height: 30px; text-indent: -9999px; width: 30px; } #nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type { display: block; } #nav:not( :target ) > a:first-of-type { background-image: url(../images/backgrounds/nav-button.png); } #nav:target > a:last-of-type { background-image: url(../images/backgrounds/nav-close.png); } /* Ebene 1 */ #nav .main-nav > ul { background: #fff; display: none; height: auto; left: 0; margin-top: 2em; position: absolute; right: 0; } #nav:target .main-nav > ul { display: block; float: none; height: auto; } #nav .main-nav > ul > li { display: block; float: none; padding-left: 20px; width: calc(100% - 20px); } .main-nav > ul > li > a { clear: both; display: block; float: none; height: auto; line-height: 1.5; width: 100%; text-decoration: none; color: white; } #nav li a { padding: 10px 0; } /* Ebene 2 */ #nav .main-nav li ul { clear: both; left: 0; padding-top: 1px; position: static; top: auto; width: 100%; } #nav .main-nav li ul li a, #nav .main-nav li ul li a:hover, #nav .main-nav li ul li a:focus, #nav .main-nav li ul li a:active { line-height: 1.5; margin-left: -20px; padding-right: 0; width: 100%; white-space: normal; } #nav li:hover ul li:first-child a { margin-top: 1px; padding-top: .5em; } /* content */ .content img { height: auto; max-width: 100%; } .content .box14 { width: 50%; } .content .box12 { float: none; margin: 0 auto; width: 100%; max-width: 560px; } .content input[type="text"], .content input[type="email"], .content input[type="password"], .content textarea { width: 70%; max-width: 548px; } .box50left, .box50right, .box75, .box25 { width: 100%; height: auto; margin-right: 0px; margin-left: 0px; } .box33, .box100 { width: 92%; margin: 4%; float: none; } .flexbox { display: block; } .content #map { height: 520px; } /* footer */ #footer .widget, #footer .footer-nav { float: left; width: 50%; }