/**
*  @template       Bittler
*  @version        see info.php of this template
*  @author         Internet-Service Berlin
*  @copyright      Martina Bittler
*  @license        All rights reserved
*  @license terms  no use without written permission
*  @platform       see info.php of this template
*/

@font-face {font-family: 'great_vibesregular';src:url('../fonts/greatvibes-regular-webfont.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face {font-family: 'roboto_condensedlight';src: url('../fonts/RobotoCondensed-Light-webfont.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face {font-family: 'roboto_condensedbold';src: url('../fonts/RobotoCondensed-Bold-webfont.woff') format('woff');font-weight: normal;font-style: normal;}
* {margin:0;padding:0;}
html {overflow-y:scroll;}
html body {background:#51a6b1;font-family:'roboto_condensedlight',sans-serif;font-size:18px;line-height:24px;color:#5b5b5b;height:100%;}
a, img {border:none;outline:none;}
strong, b {font-family:'roboto_condensedbold',sans-serif;font-weight:normal;}
.js .slicknav_menu , .js #menu {display:none;}
a, img, input, textarea, button, form, p, div {transition: 0.25s;}
hr {clear:both;border:0px;border-top:solid 1px #656565;color:#656565;border-bottom:transparent;margin:40px 0 60px 0;}
.clr {clear:both;height:1px;line-height:1px;font-size:0;background:transparent;}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ H E A D E R ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#top {width:100%;height:155px;background:rgba(255,255,255,.85);margin:0 0 4px 0;}
#header {width:1200px;height:155px;margin:0 auto;position:relative;}
#logo {width:660px;position:relative;margin:0 auto;cursor:pointer;}
#logo:focus, #logo:hover {opacity:0.8;}
#logo_img {position:absolute;top:10px;left:0;}
#logo_img img {width:184px;height:130px;}
#logo_img:focus, .logo_img:hover {opacity:0.8;}
#logo_title {color:#0089a0;font-family:'great_vibesregular',serif;font-size:36px;line-height:36px;}
#logo_title  div {position:absolute;}
#logo_title  div#logo_title_frame {position:relative;}
.title01 {left:200px;top:50px;}
.title02 {left:430px;top:50px;max-width:190px;}
#logo_title .title01::first-letter {font-size:90px;line-height:74px;vertical-align:top;padding-right:10px;}
#logo_title .title02::first-letter {font-size:90px;line-height:74px;vertical-align:top;padding-right:8px;color:#61c2d0;}
.name01, .name02 {color:#61c2d0;}
.name01 {left:318px;top:80px;}
.name02 {left:524px;top:80px;max-width:190px;}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ NAVI ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
nav {width:100%;height:46px;left:0;background:rgba(255,255,255,.85);margin:0 0 20px 0;}
nav ul {width:1200px;margin:0 auto;list-style:none;display:flex;justify-content:space-around;}
nav ul li {position:relative;}
nav ul li a {display:block;padding:0 0 20px 0;font-family:'roboto_condensedlight',sans-serif;font-size:20px;line-height:46px;font-weight:normal;color:#878787;text-decoration:none;text-transform:uppercase;}
nav ul ul li a {display:block;padding:10px 20px 0px 20px;font-size:18px;line-height:24px;font-weight:normal;color:#fff;text-decoration:none;}
nav ul li a:hover {color:#0089a0;}
nav ul ul li a:hover {color:#ddd;}
nav ul ul {display:none;position:absolute;width:260px;top:46px;left:-15px;background:rgba(81,166,177,.9);padding:5px 0 20px 0;z-index:999999;}
nav ul li:hover > ul {display:inherit;}
nav ul ul li {width:260px;display:block;position:relative;float:none;padding:0;}
nav ul ul ul {position: absolute;top:0;left:100%;}
nav ul li.menu-current a, nav ul li.menu-parent a {color:#0089a0;}
nav ul li ul li.menu-current a, nav ul li.menu-parent li a:hover {color:#ddd;}
nav ul li.menu-parent li a {color:#fff;}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ C O N T E N T F R A M E ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#container {width:100%;padding:0 0 30px 0;}
#contentframe {width:1200px;min-height:400px;margin:0 auto;box-sizing:border-box;display:flex;position:relative;}
#content {flex:1 1 auto;padding:40px 40px 60px 40px;box-sizing:border-box;background:rgba(255,255,255,.85);}
#colframe {display:flex;justify-content:space-between;}
#colleft {flex:1 1 50%;padding:0 30px 0 0;box-sizing:border-box;}
#colright {flex:1 1 50%;padding:0 0 0 30px;box-sizing:border-box;}
#content a:link, #content a:visited {color:#0089a0;text-decoration:none;font-weight:normal;}
#content a:focus, #content a:hover, #content a:active {color:#5b5b5b;}
#content p, #content ul, #content table {padding:0 0 20px 0;}
#content ul, #content ol {padding:0;margin:0 0 20px 25px;}
#content h1 {font-family:'roboto_condensedlight',sans-serif;font-size:32px;line-height:40px;font-weight:normal;padding:0 0 20px 0;color:#0089a0;}
#content h2 {font-family:'roboto_condensedlight',sans-serif;font-size:22px;line-height:28px;font-weight:normal;padding:0 0 10px 0;color:#0089a0;}
#content h2 a:link, #content h2 a:visited {font-family:'roboto_condensedlight',sans-serif;color:#0089a0;text-decoration:none;}
#content h2 a:focus, #content h2 a:hover, #content h2 a:active {color:#0089a0;}
#content table {width:100%;border-collapse:separate;border-spacing:0 5px;}
#content tr {background:rgba(255,255,255,.85);}
#content td {vertical-align:top;padding:5px;}
.clr {clear:both;height:0px;font-size:0px;line-height:0px;}
.bildrechts {float:right;padding:0 0 10px 15px;}
.embed-container {position: relative; padding-bottom: 56.25%; /* ratio 16x9 */height: 0; overflow: hidden; width: 100%;height: auto;}
.embed-container iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ TEASER ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#teaser {width:1200px;margin:20px auto;display:flex;flex-wrap:nowrap;justify-content:space-between;}
.teaser_box {flex:1 1 31%;background:rgba(255,255,255,.85);margin:0 2% 0 0;padding:40px 40px 50px 40px;box-sizing:border-box;}
.teaser_box:nth-of-type(3) {margin:0;}
#teaser h2 {font-size:36px;line-height:36px;text-align:center;padding:0 20px 10px 20px;}
#teaser h2 a:link, #teaser h2 a:visited {font-family:'great_vibesregular',serif;font-weight:normal;color:#0089a0;text-decoration:none;}
#teaser h2 a:focus, #teaser h2 a:hover, #teaser h2 a:active {color:#5b5b5b;}
#teaser a:link, #teaser a:visited {color:#0089a0;text-decoration:none;font-weight:normal;}
#teaser a:focus, #teaser a:hover, #teaser a:active {color:#5b5b5b;}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ NAVI RIGHT ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#right {flex:0 0 230px;margin:0 0 0 30px;}
#right ul {list-style:none;width:100%;padding:30px 30px 60px 30px;box-sizing:border-box;background:rgba(255,255,255,.85);}
#right li {line-height:20px;padding:0 0 8px 0;}
#right a:link, #right a:visited, #right a:active {color:#525252;text-decoration:none;font-family:'roboto_condensedlight',sans-serif;font-weight:normal;font-size:18px;text-transform:uppercase;}
#right a:focus, #right a:hover, #right li.menu-current a {color:#0089a0;}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ FOOTER ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#footer {width:100%;margin:0;padding:40px 0;background:#51a6b1;position:relative;z-index:1;}
#footerframe {width:1200px;margin:0 auto;display:flex;box-sizing:border-box;}
.footernav {flex:0 1 33%;font-size:18px;line-height:20px;}
.footerinfo  {flex:0 1 33%;font-size:18px;line-height:20px;font-family:'roboto_condensedlight',sans-serif;font-weight:normal;color:#fff;text-align:center;}
.footerinfo a:link, .footerinfo a:visited {font-family:'roboto_condensedlight',sans-serif;font-weight:normal;color:#fff;text-decoration:none;}
.footerinfo a:focus, .footerinfo a:hover, .footerinfo a:active {color:#ddd;}
.footernav ul {list-style-type:none;text-align:center;}
.footernav li a:link, .footernav li a:visited {font-family:'roboto_condensedlight',sans-serif;font-weight:normal;color:#fff;text-decoration:none;}
.footernav li a:focus, .footernav li a:hover, .footernav a:active {color:#ddd;}
.footernav li.menu-current a {color:#ddd;}
.cc-revoke, .cc-revoke > *, .cc-animate.cc-revoke.cc-bottom {display:none !important;/*hide*/}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ BOF UP ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.move-up {position:fixed;bottom:20px;right:20px;display: none;z-index:1000;width:80px;height:80px;border:none;background:#fff;cursor:pointer;text-align:center;padding:30px 10px 10px;opacity:0.8;border-radius:40px;box-sizing:border-box;}
.move-up i {border: solid #656565;border-width: 0 3px 3px 0;display:inline-block;padding:15px;transform: rotate(-135deg);}
.move-up:hover,.move-up:active {opacity:1;}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ SLICKNAV ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.slicknav_btn {position:absolute;display: block;right:20px;top:10px;cursor: pointer;text-decoration: none;background:transparent;z-index:999999; }
.slicknav_btn img {width:36px;height:36px; }
.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar {margin-top: 0; }
.slicknav_menu {position:relative; box-sizing: border-box;background:#fff;padding:0;}
.slicknav_menu .slicknav_menutxt {display: block;float: left; }
.slicknav_menu .slicknav_icon {display:none; }
.slicknav_menu .slicknav_no-text {margin: 0; }
.slicknav_menu:before {content: " ";display: table; }
.slicknav_menu:after {content: " ";display: table;clear: both; }
.slicknav_nav {clear: both; position:absolute;top:0;left:0;z-index:99999;background:rgba(81,166,177,.9);width:80%;color: #fff;padding:10px 20px 50px 20px;list-style: none;overflow: hidden;box-sizing:border-box;box-shadow: 0 0 5px #888;}
.slicknav_nav ul {display: block;list-style: none;overflow: hidden;padding: 0;margin:0;  }
.slicknav_nav li {display: block;}
.slicknav_nav .slicknav_arrow {font-size: 15px;margin: 0 0.4em 0 0;float:right;}
.slicknav_nav .slicknav_item {cursor: pointer; }
.slicknav_nav .slicknav_item a {display: inline; padding: 0;margin: 0; }
.slicknav_nav .slicknav_row {display: block; }
.slicknav_nav .slicknav_parent-link a {display: inline;padding: 0;margin: 0;  }
.slicknav_nav a {display: block;font-family:'roboto_condensedlight',sans-serif;font-size:18px;line-height:36px;font-weight:normal;color:#fff;text-decoration:none;}
.slicknav_nav ul.menu-top:nth-of-type(2) {padding-top:20px;}
.slicknav_nav ul.menu-top:nth-of-type(2) a {font-family:'roboto_condensedlight',sans-serif;}
.slicknav_nav a:hover {color:#ddd;}
.slicknav_nav li.menu-current a:hover {color:#ddd;}
.slicknav_nav li li a {padding:0 0 0 25px;}
.slicknav_nav .slicknav_txtnode {margin-left: 15px; }
/* ~~~~~~~~~~~~~~~~~~~~ Aktiv ~~~~~~~~~~~~~~~~ */
.slicknav_nav ul li.menu-current  a {color:#ddd;}
.slicknav_nav ul li.menu-current  li a {color:#fff;}
.slicknav_nav li.menu-current li a:hover {color:#fff;}
/* ~~~~~~~~~~~~~~~~~~~~ Buttons ~~~~~~~~~~~~~~~~ */
#cross {display:none;}
a.slicknav_open #burger {display:none;}
a.slicknav_open #cross {display:block;}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ START RESPONSIVE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@media only screen and (max-width: 1230px) {
img {max-width:100%;width:auto;height:auto;line-height:0;}
#header{width:100%;margin:0;padding:0;box-sizing:border-box;}
.logo_img {left:15px;}
#logo p:nth-of-type(1) {left:90px;}
#logo p:nth-of-type(2) {left:95px;}
nav {width:100%;padding:0 20px;box-sizing:border-box;}
nav ul {width:100%;}
#content, #contentframe {margin:0;width:100%;}
#teaser {width:100%;margin:0;padding:2%;justify-content:space-between;box-sizing:border-box;}
#footerframe  {width:100%;margin:0;padding:0 20px;justify-content:space-around;}
.footernav, .footerinfo  {flex:0 0 23%;width:23%;box-sizing:border-box;}
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@media only screen and (max-width: 960px) {
.js .slicknav_menu {display:block;}
#top {position:static;}
#logo {width:100%;margin:0;}
#logo_img {top:30px;left:2%;}
#logo_img img {width:70%;height:auto;}
nav, #right {display:none;}
#container {padding:0;}
#container h1 {hyphens:auto;}
#contentframe {padding:2%;}
#teaser {flex-wrap:wrap;justify-content:center;}
.teaser_box {flex:1 0 100%;margin:0 0 2% 0;}
#footerframe {flex-wrap:wrap;}
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@media only screen and (max-width: 800px) {
#content td {display:block;}
#content tr {display:block;margin:0 0 10px 0;}
#colframe {flex-direction:column;}
#colleft, #colright {flex:1 1 100%;padding:0;}
#footerframe {flex-wrap:wrap;}
.footerinfo, .footernav  {flex:1 1 100%;width:100%;text-align:center;padding:0 0 20px 0;}
.footernav ul {justify-content:center;}
.footernav li {flex:1 1 100%;}
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@media only screen and (max-width: 640px) {
#header, #top {height:200px;}
#logo_img {position:static;text-align:center;padding:10px 0 0 0;display:block;}
#logo_img img {width:150px;height:auto;}
#logo_title {font-size:28px;line-height:28px;display:block;max-width:320px;margin:10px auto 0 auto;}
.title01 {left:0px;top:0px;}
.title02 {left:178px;top:0px;max-width:140px;}
#logo_title .title01::first-letter {font-size:66px;line-height:60px;padding-right:10px;}
#logo_title .title02::first-letter {font-size:66px;line-height:60px;padding-right:6px;}
.name01 {left:90px;top:25px;}
.name02 {left:251px;top:25px;max-width:140px;}
}