@charset "UTF-8";
.clear{ clear:both; border:0; opacity:0; height:0; font-size:0; visibility: hidden; }

*{margin: 0; padding: 0;}

/* =====================  kalibrierung  ===================== */
body{font-family: 'Roboto Condensed', sans-serif; font-size: 17px; line-height: 24px; background: #FAF6EA;}
p{margin-bottom: 15px;}
.textwrap a{text-decoration: none; color: #FAF6EA; background: #10698C; display: inline-block; padding: 0 5px; opacity: 0.7;
-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
a:hover{opacity: 1.0;}
h1{color: #10698C; font-size: 48px; line-height: 60px; margin-bottom: 36px;}
h2{margin-bottom: 15px;}
h3{ }

.textwrap ul{padding: 0; margin: 0; margin-left: 20px;}
.textwrap ul li{}

.txtimg{text-align: center; margin: 20px 0; background: #2a8e9924; padding: 20px 0;}
.txtimg img{max-width: 85%; max-height: 450px; width: auto; height: auto;}

#content p.bodytext{-moz-column-count: 3; -moz-column-gap: 40px; -webkit-column-count: 3; -webkit-column-gap: 40px; column-count:3; column-gap: 40px;}

#navwrap{background: #FAF6EA; text-align: center; width: 100%; top: -74px; z-index: 99;
-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.5); box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
#nav{list-style: none;}
#nav li{display: inline-block;}
#nav li ul{position: absolute; opacity: 0; height: 0; z-index: 99; background: #E34234; width: 100%; left: 0; /*overflow: hidden;*/ top: -200px;
  -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
#nav li:hover ul{opacity: 1.0; height: auto; width: 100%; top: auto;}
#nav li ul li a{color: #FAF6EA; padding: 15px 20px; border-top: 1px solid #E34234; border-bottom: 1px solid #E34234; border-radius: 0;}
#nav li ul li a span.hovtit{position: absolute; width: 90%; padding: 0 5%; top: 100%; left: 0; color: #10698C; background: #FAF6EA; overflow: hidden; height: 0; 
 -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
#nav li ul li:hover a span.hovtit{height: auto; padding: 2px 5%;}
#nav li a.arr{background: url(../Images/arr_green.png) no-repeat center 80%; background-size: auto 20%;}
#nav li:hover a.arr, #nav li a.arr.act, #nav li a.arr.act_parent{background: url(../Images/arr_white.png) no-repeat center 90% #E34234; background-size: auto 20%;}
#nav li ul li:hover a, #nav li ul li a.act{background: #FAF6EA; color: #10698C;}
#nav li span.plus{display: none;}
#nav li a{padding: 20px 36px; color: #10698C; font-size: 14px; text-transform: uppercase; display: inline-block; text-decoration: none; font-weight: 700; letter-spacing: 1px; border-radius: 10px 10px 0 0;
-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
#nav li a.act, #nav li a.act_parent, #nav li:hover a{color: #FAF6EA; background: #E34234;}
#nav li a.arr.act_parent{background: url(../Images/arr_white.png) no-repeat center 90% #10698C; background-size: 10%;}

#logo svg, #logo img{width: 60%; padding: 0px 20% 20px 20%;}
#head #quote{text-align: center; font-size: 45px; line-height: 45px; color: #FAF6EA; text-transform: uppercase; letter-spacing: 3px; font-weight: 300; padding: 60px 15%; width: 70%; position: absolute; bottom: -10%; text-shadow: 0 0 6px #000000;}
#slogwrap{position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden;}
#slogwrap_inner{display: inline-table;    width: 100%;    height: 100%; margin-top: -3%;}
#slog{display: table-cell; vertical-align: middle;}
#slog svg{width: 30%; padding: 5% 35%; opacity: 0.8;}

#hlog{position: absolute; top: 0; left: 0; z-index: 199; height: 49px; padding: 5px 10px 10px 10px;}
#hlog img{height: 49px; width: auto;}

#lang{position: absolute; right: 0; top: 0; margin: 10px;}
#lang ul{padding: 0; margin: 0; list-style: none;}
#lang ul li{float: left;}
#lang ul li a{background: none; color: #10698C; border-radius: 10px; font-size: 16px; display: inline-block; padding: 10px 15px; text-decoration: none; text-transform: uppercase;
  -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
#lang ul li a:hover{color: #FAF6EA; background: #E34234;}

#facebook{position: absolute; left: 20px; top: 13px; width: 40px; height: 40px; opacity: 0.6; background: url(../Images/fbk.png) #FAF6EA; border-radius: 100%; background-size: cover;
 -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
#facebook:hover{opacity: 1.0;}

.teaserwrap{max-width: 1280px; margin: 0 auto; z-index: 89; position: relative; text-align: center;}
.teaserwrap a{line-height: 0; width: 29.333%; margin: 0 2%; display: inline-block; border-radius: 100%; overflow: hidden;}
.teaserwrap a.big{width: 21%;}
.teaser{background: #FAF6EA; position: relative; border: 4px solid #10698C; border-radius: 100%; overflow: hidden;}
.teaser .inner{text-align: center; color: #FAF6EA; background: rgba(37, 131, 142, 0.78); line-height: 24px; position: absolute; height: 60%; width: 80%; padding: 20% 10%; left:0; top: 0; opacity: 0.7; border-radius: 100%; overflow: hidden;
 -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
.teaser:hover .inner{opacity: 1.0;}
.teasin{display: inline-table; width 100%; height: 100%;}
.teasinwrap{display: table-cell; vertical-align: middle;}
.teasinwrap p{margin-bottom: 0;}
.teaser img{width: 100%; height: auto;}
.teaser .tlink{background: #10698C; color: #FAF6EA;  line-height: 24px; text-transform: uppercase; letter-spacing: 1px; padding: 5px 10px; border: 4px solid #10698C; display: block; text-align: center;
  -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}

.teaser:hover .tlink{background: #FAF6EA; color: #10698C;}

#prefoot{position: relative; height: 250px; margin-top: -80px;}
#prefoot img{position: absolute; bottom: 0;}
#map_canvas{position: absolute; width: 100%; height: 100%;}
#prefoot_color{position: absolute; width: 100%; height: 140%; bottom: 0;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+40,25838e+100&0+40,1+100 */
background: -moz-linear-gradient(top,  rgba(255,255,255,0) 40%, rgba(37,131,142,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 40%,rgba(37,131,142,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,0) 40%,rgba(37,131,142,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#10698C',GradientType=0 ); /* IE6-9 */

}
#footer{background: #10698C; padding: 20px;}
.foot_inner{    max-width: 1280px;    margin: 30px auto 70px auto;    padding: 0 40px;}
.footnav{display: inline-block; width: 70%; margin-right: 0; padding: 2%; background: rgba(255,255,255,0.1);}
.footnav ul#nav li {display: inline-block; float: left; margin: 0 5px; padding: 10px; background: rgba(255,255,255,0.2); max-width: 20%;}
.footnav ul#nav li a, .footnav ul#nav li:hover a{color: #FAF6EA; background: none; padding: 0; margin: 0; line-height: auto;}
.footnav ul#nav li ul{position: inherit; height: auto; opacity: 1; background: transparent}
.footnav ul#nav li ul li {display: block; float: none; margin: 0; max-width: inherit; padding: 0; background: transparent;}
.footnav ul#nav li ul li a{font-weight: normal; padding: 0; border: none;}
.footnav ul#nav li ul li:hover a{color: #E34234;}
#add{display: inline-block; width: 20%; color: #FAF6EA; float: right; padding: 5px 2%; font-size: 16px;}
#add span{min-width: 60px; margin-right: 2%; display: inline-block;}

#fav{width: 100%; height: 100%; position: fixed; left: -20%; bottom: -20%; opacity: 0.1; z-index: -99;}
#fav svg{width: 100%; height: 100%;}

#content{max-width: 1280px; margin: 70px auto; padding: 0 40px;}

#slider{position: relative; overflow:hidden;}
#slider_inner{position: absolute; width: 100%; height: 70%; left: 0; top: 0; z-index: 79;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+60&0.6+1,0+60 */
background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.6) 1%, rgba(0,0,0,0) 60%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 1%,rgba(0,0,0,0) 60%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 1%,rgba(0,0,0,0) 60%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.logwrap{display: inline-table; width: 100%; height: 100%;}
#logo{display: table-cell; vertical-align: middle;}

img.wave{position: absolute; bottom: 0; z-index: 15;}

#grade{position: absolute; width: 100%; height: 40%; bottom: 0; z-index: 49;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */
background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

.swiper-container{height: 800px;}

.responsive-video iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.responsive-video { position: relative; padding-bottom: 56.25%; padding-top: 0px; height: 0; overflow: hidden; margin: 50px 0; border-radius: 20px;}

.state{margin: 70px 0; border-radius: 300px; background: #10698C; color: #FAF6EA; padding: 20px 60px 20px 40px; position: relative; text-align: center;}
.statewrap{display: inline-table; min-height: 200px; width: auto;}
.state .port{height: 100%; position: absolute; left: 0; top: 0; border-radius: 300px;}
.state span{position: absolute; opacity: 0.5; font-size: 54px; margin-top: -3px; margin-left: 3px;}
.state span.beg{margin-left: -23px;}
.state_inner{display: table-cell; vertical-align: middle;}
.state h5{    text-align: right; font-size: 16px; font-style: italic; margin-right: 20px; font-weight: normal; margin-top: 10px;}

.gallery{margin: 50px 0;}
.gallery a{display: inline-block; width: 25%;}
.gallery a:hover img{opacity: 1.0;-moz-transform: scale(1.2) rotate(-3deg); -webkit-transform: scale(1.2) rotate(-3deg); -o-transform: scale(1.2) rotate(-3deg); -ms-transform: scale(1.2) rotate(-3deg); transform: scale(1.2) rotate(-3deg);}
.gallery .imwrap{padding: 3px;}
.gallery a img{width: 100%; height: auto; opacity: 0.85; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
.gallery .imgin{overflow: hidden; border-radius: 10px;}



.accordion {
  width: 100%;
  max-width: 1280px;
  height: 500px;
  overflow: hidden;
  margin: 50px auto;
}

.accordion ul {
  width: 100%;
  display: table;
  table-layout: fixed;
  margin: 0;
  padding: 0;
  height: 500px;
}

.accordion ul li {
  display: table-cell;
  vertical-align: bottom;
  position: relative;
  width: 16.666%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  transition: all 500ms ease;
  opacity: 0.75;
}

.accordion ul li:hover{opacity: 1.0;}

.accordion ul li div {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.accordion ul li div a {
  display: block;
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 3;
  vertical-align: bottom;
  padding: 50px;
  box-sizing: border-box;
  color: #fff;
  text-decoration: none;
  font-family: Open Sans, sans-serif;
  transition: all 200ms ease;
}

.accordion ul li div a * {
  opacity: 0;
  margin: 0;
  width: 100%;
  text-overflow: ellipsis;
  position: relative;
  z-index: 5;
  white-space: nowrap;
  overflow: hidden;
  -webkit-transition: all 400ms ease;
  transition: all 400ms ease;
}

.accordion ul li div a h2 {
  font-family: Montserrat, sans-serif;
  text-overflow: clip;
  font-size: 24px;
  text-transform: uppercase;
  margin-bottom: 2px;
  top: 160px;
  text-shadow: 0 0 3px #000000;
}

.accordion ul li div a p {
  top: 160px;
  font-size: 13.5px;
  text-shadow: 0 0 3px #000000;
}
.accordion ul:hover li { width: 8%; }

.accordion ul:hover li:hover { width: 60%; }

.accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.4); }

.accordion ul:hover li:hover a * {
  opacity: 1;
}
 @media screen and (max-width: 600px) {

body { margin: 0; }

.accordion { height: auto; }

.accordion ul li{opacity: 0.5;}

.accordion ul li,
.accordion ul li:hover,
.accordion ul:hover li,
.accordion ul:hover li:hover {
  position: relative;
  display: table;
  table-layout: fixed;
  width: 100%;
  -webkit-transition: none;
  transition: none;
  width: auto;
}
}

.accordion ul li .title{position: absolute;
  text-shadow: 0 0 3px #000000;
      bottom: 50%;
    width: 250%;
    left: -75%;
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
  font-size: 24px; font-weight: bold;
  text-transform: uppercase;
  color: #FAF6EA;
  display: inline-block;
-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}

    
.accordion ul li:hover .title{opacity: 0;}    

.about {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: #666;
}

.about a {
  color: blue;
  text-decoration: none;
}

.about a:hover { text-decoration: underline; }

#slider.single .headimg{height: 550px;}

ul.downloads{list-style: none; margin: 0; padding: 0;}
ul.downloads li{display: inline-block; width: 50%;} 
ul.downloads li a{display: block; margin: 3px; background: #10698C; padding: 20px; color: #FAF6EA; text-decoration: none; border-radius: 20px; border: 3px solid #10698C;;
  -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
ul.downloads li a:hover{background: none; color: #10698C;}
ul.downloads li a span{display: inline-block; width: 33.33%;}

ul.columns{list-style: none; margin: 50px 0; padding: 0; width: 101%; margin-left: -0.5%; overflow: hidden;}
ul.columns li{width: 32.33%; float: left; margin: 0.5%; background: rgba(37, 131, 142, 0.83); padding-bottom: 600px; margin-bottom: -600px;}
ul.columns li .in{padding: 20px; color: #FAF6EA;}
ul.columns li .in h3{text-align: center; margin-bottom: 10px;}
ul.columns li .in p{margin-bottom: 0;}

ul.columns li .in ul{padding-left: 20px;}
ul.columns li .in ul li{width: auto; float: none; background: transparent;}

ul.schools{list-style: none; margin-bottom: 30px;}
ul.schools li{color: #FAF6EA; margin-bottom: 5px;}
ul.schools li .head{padding: 5px 20px; background: #10698C; cursor: pointer; position: relative; border-radius: 5px;}
ul.schools li .head .date{margin-right: 20px;}
ul.schools li .head .plus{position: absolute; right: 20px; top: 5px; font-size: 40px;
  -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
ul.schools li.open .head{border-radius: 5px 5px 0 0 ;}
ul.schools li.open .head .plus{-moz-transform: rotate(315deg); -webkit-transform: rotate(315deg); -o-transform: rotate(315deg); -ms-transform: rotate(315deg); transform: rotate(315deg);}
ul.schools li h3{display: inline-block; margin: 0;} 
ul.schools li .cont{display: none; border: 1px solid #10698C; color: black; padding: 20px; background: rgba(37, 131, 142, 0.10); border-radius: 0 0 5px 5px;}
ul.schools li .cont h4{color: #10698C;}

ul.schools li .cont .www{margin-top: 20px;}
ul.schools li .cont span{margin-right: 20px;}
ul.schools li .cont span h4{display: inline-block; margin-right: 5px;}


.swbuttons{list-style: none; float: left; margin-right: 30px;}
.swbuttons li{display: inline-block; padding: 5px 15px; margin-right: 5px; border: 1px solid #10698Cd9; text-transform: uppercase; cursor: pointer;
  -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
.swbuttons li:hover, .swbuttons li.active{background: #10698Cd9; color: #FAF6EA;}
#search{float: right; position: relative;}
#search input{padding: 5px 32px 5px 15px; background: #10698C; color:#FAF6EA; border: none; display: inline-block; border: 2px solid #999999; border-radius: 20px; width: 220px;}
#search input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #cacaca;
}
#search input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #cacaca;
   opacity:  1;
}
#search input::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #cacaca;;
   opacity:  1;
}
#search input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color:   #cacaca;;
}
#search input::-ms-input-placeholder { /* Microsoft Edge */
   color:    #cacaca;
}
#search input:focus {outline:none;}
#search .del{position: absolute; width: 20px; height: 20px; margin: 7px; cursor: pointer; background: yellow; right: 0; top: 0; background: url(../Images/no.png) no-repeat center center; background-size: contain; content: "";}

ul.ui-autocomplete.ui-menu.ui-widget{max-width: 267px; list-style: none; margin: 0; padding: 5px 0; background: #FAF6EA; border: 2px solid #999999; border-radius: 20px; overflow: hidden;}
ul.ui-autocomplete.ui-menu.ui-widget li{padding: 3px 15px; cursor: pointer;
-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
ul.ui-autocomplete.ui-menu.ui-widget li:hover{background: #10698C; color: #FAF6EA;}

.ui-helper-hidden-accessible{display: none;}
ul.events{list-style: none; width: 101%; margin-left: -0.5%; margin-bottom: 50px;}
ul.events li{display: inline-block; width: 32.333%; padding: 0.5%;
    -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}

ul.events li.passive{opacity: 0; width: 0; overflow: hidden; padding: 0; height: 0;}

ul.events li .ev{height: 255px; overflow: hidden; position: relative;}
ul.events li .ev .capt{position: absolute; width: 90%; padding: 12px 5%; bottom:0; left: 0; background: rgba(37, 131, 142, 0.85); color: #FAF6EA;}
ul.events li .ev .capt h3{margin-bottom: 0;}
ul.events li .ev .capt p{margin-bottom: 0; margin-top: 5px; display: none;}
ul.events li .ev .date{position: absolute; right: 0; top: 0; padding: 2px 5px; color: #FAF6EA; text-decoration: none;background: rgba(37, 131, 142, 0.5);
    -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
ul.events li:hover .ev .date{top: -30px;}

#viewswitch{width: 35px; height: 35px; background: pink; display: inline-block; margin-left: 10px; background: url(../Images/liste.png) no-repeat center center; border: 1px solid #10698C;}
#viewswitch.list{background-image: url(../Images/grid.png);}

ul.events.list li{display: block!important; width: auto!important;}
ul.events.list li a{text-decoration: none;}
ul.events.list li .ev{height: auto; background: none!important;}
ul.events.list li .ev .capt{position: inherit; width: 84%; padding: 5px 0.5%; margin-left: 15%;}
ul.events.list li .ev .date{position: inherit; display: inline-block; width: 14%; padding: 5px 0.5%; float: left; background: none; color: #10698C;}
ul.events.list li:hover .ev .date{top: auto;}


.switch{display: inline-block;}
.switch span{text-transform: uppercase;}
.onoffswitch {
    position: relative; width: 150px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
  display: inline-block;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
    font-size: 15px; color: #FAF6EA; font-family: 'Roboto Condensed', sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "ON";
    padding-left: 10px;
    background-color: #10698C; color: #FFFFFF;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
  background: #bfffbf;
}

.ce-bodytext{-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 50px; -moz-column-gap: 50px; column-gap: 50px;}

.tx-powermail{margin-top: 50px; background: #10698C; padding: 30px 20px; color: #FAF6EA}
.tx-powermail h3{margin: 0; padding: 10px 2%; cursor: pointer; position: relative;}
.tx-powermail h3 .plus{position: absolute; right: 4%; top: 0; font-size: 60px; display: block; line-height: 40px;
-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
.powermail_fieldset{border: 0; padding: 0; margin: 0; display: inline-block; width: 45%; margin-right: 2%; margin-left: 2%; vertical-align: top;}
.tx-powermail .formwrap{display: none; margin-top: 20px;}
.tx-powermail.open h3 .plus{-moz-transform: rotate(315deg); -webkit-transform: rotate(315deg); -o-transform: rotate(315deg); -ms-transform: rotate(315deg); transform: rotate(315deg);}
.powermail .formwrap{display: none;}
.powermail_fieldset legend{display: none;}
.powermail_fieldset label{display: block;}
.powermail_fieldset label .mandatory{color: #F49A2F;}
.powermail_fieldset input{display: block; padding: 10px 3%; width: 94%; margin-bottom: 10px; border: 0; background: rgba(255,255,255,0.4); color: rgb(50,50,50);
  -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
.powermail_fieldset input.parsley-error{background: #F49A2F ;}
.powermail_fieldset input.parsley-success{background: #B5CE47;}
.powermail_fieldset input:hover, .powermail_fieldset input:focus{background: rgba(255,255,255,0.75);}
.powermail_fieldset select{display: block; padding: 10px 3%; width: 100%; margin-bottom: 10px; border: 0; background: rgba(255,255,255,0.4); color: rgb(50,50,50);}
.powermail_fieldset select:hover, .powermail_fieldset select:focus{background: rgba(255,255,255,0.75);}
.powermail_fieldset textarea{display: block; padding: 10px 3%; width: 94%; margin-bottom: 10px; border: 0; background: rgba(255,255,255,0.4); color: rgb(50,50,50);}
.powermail_fieldset textarea:hover, .powermail_fieldset textarea:focus{background: rgba(255,255,255,0.75);}
.powermail_fieldset input[type="submit"]{width: 100%; background: rgba(244,147,54,0.85); color: #FAF6EA; font-weight: bold;
-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
.powermail_fieldset input[type="submit"]:hover{background: rgba(244,147,54,1.0);}
.parsley-errors-list{list-style: none; padding: 0; margin: 0; margin-bottom: 10px; margin-top: -5px; font-size: 12px;}


.powermail_fieldwrap_type_radio .powermail_field{padding: 2%; border: 0; margin: 0; margin-bottom: 15px; background: rgba(255,255,255,0.4);}
.powermail_fieldwrap_type_radio .powermail_field .radio:first-child label{margin-top: 0;}
.powermail_fieldwrap_type_radio .powermail_field .radio{position: relative;}
.powermail_fieldwrap_type_radio .powermail_field input{position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; padding: 0; left: 0; top: 0; cursor: pointer;}
.powermail_fieldwrap_type_radio .powermail_field label{  display: block;  padding: 10px 20px;  padding-left: 40px;  margin-top: 10px; color: #FAF6EA; z-index: 1; cursor: pointer; background: url(../Images/no.png) no-repeat 10px center rgba(37, 131, 142,0.45);
-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
.powermail_fieldwrap_type_radio .powermail_field label:hover, .powermail_fieldwrap_type_radio .powermail_field .radio.check label{background: url(../Images/yes.png) no-repeat 10px center rgba(37, 131, 142,0.8);}


.powermail_fieldwrap_type_check .powermail_field{padding: 2%; border: 0; margin: 0; margin-bottom: 15px; background: rgba(255,255,255,0.4);}
.powermail_fieldwrap_type_check .powermail_field .ckeckbox:first-child label{margin-top: 0;}
.powermail_fieldwrap_type_check .powermail_field .ckeckbox{position: relative;}
.powermail_fieldwrap_type_check .powermail_field input{position: absolute; opacity: 0; width: 0%; height: 0%; margin: 0; padding: 0; left: 0; top: 0; cursor: pointer;}
.powermail_fieldwrap_type_check .powermail_field label{  display: block;  padding: 10px 20px;  padding-left: 40px;  margin-top: 10px; color: #FAF6EA; z-index: 1; cursor: pointer; background: url(../Images/no.png) no-repeat 10px center rgba(37, 131, 142,0.45);
-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
.powermail_fieldwrap_type_check .powermail_field label:hover, .powermail_fieldwrap_type_check .powermail_field .check label{background: url(../Images/yes.png) no-repeat 10px center rgba(37, 131, 142,0.8);}




ul#social{list-style: none; padding: 0; text-align: center; margin-top: 0px; margin-bottom: 20px;}
ul#social li{display: inline-block; margin: 0 15px;}
ul#social li a{width: 64px; height: 64px; overflow: hidden; background-color: rgba(250, 246, 234, 0.15); display: block; border-radius: 100%; color: transparent; border: 2px solid rgba(250, 246, 234, 0.4);
  -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
ul#social li.fb a{background: url(../Images/fb.svg) no-repeat center left; background-size: 128px;}
ul#social li.in a{background: url(../Images/in.svg) no-repeat center left; background-size: 128px;}
ul#social li.yt a{background: url(../Images/yt.svg) no-repeat center left; background-size: 128px;}
ul#social li a:hover{background-position: center right; border: 2px solid rgba(250, 246, 234,1.0); background-color: rgba(250, 246, 234,0.15);}


ul.hometeas{list-style: none; padding: 0; margin: 0; margin: 0.5% 0; width: 101%; margin-left: -0.5%; color: #FAF6EA; line-height: 0;}

ul.hometeas a{text-decoration: none; color: #FAF6EA; line-height: 0;}

ul.hometeas li{display: inline-block; width: 24%; position: relative; background: #10698C; margin: 0.5%; overflow: hidden; border-radius: 20px;

-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}

ul.hometeas li.one{width: 99%; height: 250px;}
ul.hometeas li.two{width: 49%;}
ul.hometeas li.three{width: 32.3333%;}

ul.hometeas li img{opacity: 0.55; width: 100%; height: auto;

-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}

ul.hometeas li .tit{position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center;}

ul.hometeas li .tit .out{display: inline-table; width: 100%; height: 100%;}

ul.hometeas li .tit .out .inn{display: table-cell; vertical-align: middle; padding: 20px;

-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}

ul.hometeas li .tit .out .inn h2{font-size: 1.7em; text-shadow: 0 0 3px #000000; line-height: 1.5em; margin: 0; font-weight: normal;

-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}

ul.hometeas li .tit .out .inn p{margin: 0; line-height: 0; opacity: 0;

-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}

ul.hometeas li .tit .out .inn hr{height: 0px; width: 0px; background: rgba(255,255,255,0.5); border: none; line-height: 0; opacity: 0; margin: 0;

-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}



ul.hometeas li:hover .tit .out .inn h2{opacity: 0.85;}

ul.hometeas li:hover .tit .out .inn p{opacity: 1.0; margin: 10px 0; line-height: 24px;}

ul.hometeas li:hover .tit .out .inn hr{height: 1px; width: auto; opacity: 1.0; margin: 10px 0; line-height: 24px;}

ul.hometeas li:hover img{opacity: 0.35; -moz-transform: scale(1.5); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);}

.dl{color: #FAF6EA; text-decoration: none; display: inline-block;
  -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
.dl:hover{color: #10698C; background: rgba(255,255,255,0.85); padding: 0px 5px;}

#tx_cookies{position: fixed; bottom: 0; width: 100%; height: auto; font-size: 12px; line-height: 16px;}
#tx_cookies_showPermanent{position: fixed; left: 10px; bottom: 10px; top: auto; background: url(../Images/cook.svg) no-repeat center center #10698C !important; border: 1px solid #FAF6EA!important; width: 25px; height: 25px; border-radius: 50px; background-size: 60%!important; z-index: 98;
webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; cursor: pointer;}
#tx_cookies_showPermanent:hover{width: 60px; height: 60px; border: 2px solid #FAF6EA!important;}

#tx_cookies_link a, #tx_cookies #tx_cookies_close, #tx_cookies form input[type="submit"]{color: #FAF6EA; background: #10698C; opacity: 0.7; padding: 2px 5px; margin-right: 10px; text-decoration: none;
  webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
#tx_cookies_link a:hover, #tx_cookies #tx_cookies_close:hover, #tx_cookies form input[type="submit"]:hover{opacity: 1.0;}
#tx_cookies_link, #tx_cookies form{display: inline-block;}

/*********** SMALLSCREEN-SIZE ****************/
@media only all and (max-width: 1600px){
#slider.single .headimg{height: 450px;}
.swiper-container{height: 600px;}
#head #quote{bottom: -15%;}
#logo img{width: 60%; padding: 0px 20% 20px 20%;}
}



#tx_cookies_inner p{display: none;}
#tx_cookies_inner p#tx_cookies_hint{display: block; margin-bottom: 5px;}

/*********** TABLET-SIZE ****************/
@media only all and (max-width: 1200px){
}

@media only all and (max-width: 1064px){
  
  #hlog{height: 40px; padding: 5px 10px 10px 10px; width: 100%; background: rgb(250 246 234 / 87%); text-align: left;}
  #hlog img{height: 40px; width: auto;}
  
  #logo img{width: 80%; padding: 0px 10% 20px 10%;}
#slog svg{width: 50%; padding: 5% 25%;}
.swiper-container{height: 600px;}
#head #quote{bottom: -20%;}
#slider.single .headimg{height: 320px;}
#nav{overflow: hidden; position: fixed; top: 0; left: 0; width: 80%; height: 100%; background: #10698C; z-index: 999; margin-left: -90%; overflow-y: auto;
-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
#nav.open{margin-left: 0; -webkit-box-shadow: 5px 0 5px 0 rgba(0,0,0,0.2); box-shadow: 5px 0 5px 0 rgba(0,0,0,0.2);}
#nav li{display: block; width: auto; text-align: left; position: relative;}
#nav li a{color: #FAF6EA; font-size: 30px; line-height: 30px; display: block; padding: 15px 20px;}
#nav li a.arr,#nav li:hover a.arr, #nav li:hover a.arr{background: none;}
#nav li a.arr.act, #nav li a.arr.act_parent{background: #FAF6EA; color: #10698C;}
 #nav li.arr.act .plus, #nav li.arr.act_parent .plus{color: #10698C;}
#nav li span.plus{cursor: pointer; position: absolute; right: 0; top: 0; display: block; font-size: 60px; line-height: 0; padding: 30px; color: #FAF6EA; display: block; font-family: Arial, sans-serif;
-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
#nav li .plus.open{-moz-transform: rotate(315deg); -webkit-transform: rotate(315deg); -o-transform: rotate(315deg); -ms-transform: rotate(315deg); transform: rotate(315deg);}
#nav li ul.subnav{position: inherit; top: auto; padding-top: 0!important; opcity: 1!important; height: auto; display: none; margin: 0; opacity: 1;  -webkit-box-shadow: 0 0px 0px 0 rgba(0,0,0,0); box-shadow: 0 0px 0px 0 rgba(0,0,0,0);}
#nav li ul.subnav li a{font-size: 26px; line-height: 26px; font-weight: normal; padding: 15px 40px;}

#nav li ul li a span.hovtit{position: inherit; height: auto; display: block; padding: 2px 5px; font-size: 12px; line-height: 14px;}

#nav li:hover ul.subnav{height: auto;}
#mobnav{position: fixed!important; z-index: 9999; right: 0; top: 0; width: 55px; height: 55px; background: url(../Images/menu.png) no-repeat center center #10698C; display: block; cursor: pointer;}
.footnav{display: none;}

#facebook{left: 100%; width: 50px; height: 50px; top: 190px; left: auto; right: -60px;
-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
#facebook.open{right: 2px; opacity: 1;}

.swbuttons{float: none; margin-bottom: 10px;}
.swbuttons li{margin-bottom: 10px;}

#search{float: none;}
#search input{padding: 10px 7% 10px 3%; width: 90%;}


#add{padding: 0; float: none; width: auto;}
.teaserwrap{text-align: center; margin: 0 2%;}
.teaserwrap a{width: 46%; margin: 0 2%;}
.teaserwrap a.big{width: 29.33%; margin: 0 2%;}
.teaserwrap a .teaser .inner{opacity: 1.0; background: rgba(37, 131, 142, 0.54);}

ul.downloads li{width: 100%;} 

ul.columns{width: auto; margin-left: 0;}
ul.columns li{width: auto; margin: 0; padding: 0; margin: 10px 0;}

ul.events li{width: 49%;}
ul.events.list li .ev .capt{margin-left: 25%; width: 73%;}
ul.events.list li .ev .date{width: 24%;}

ul.schools li .cont span{margin-right: 0px; display: block;}
#navwrap{position: fixed!important; top: 0!important;}

.ce-bodytext{-webkit-column-count: 1; -moz-column-count: 1; column-count: 1; -webkit-column-gap: 50px; -moz-column-gap: 50px; column-gap: 50px;}
.powermail_fieldset{width: 100%; margin: 0;}


#lang{position: fixed; top: 65px; right: -20%; z-index: 2; margin: 0;
-webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;}
#lang.open{right: 0;}
#lang ul li{float: none;}
#lang ul li a{font-size: 1.5em; padding: 15px 15px; width: 23px; height: 23px; background: #FAF6EA; border: 1px solid #10698C;} 

ul.hometeas li{width: 32.3333%;}
ul.hometeas li.one{width: 99%; height: 350px;}
ul.hometeas li.two{width: 49%;}
ul.hometeas li.three{width: 32.3333%;}

ul.hometeas li .tit .out .inn h2{font-size: 1.6em;}

}

/*********** MOBILE-SIZE ****************/

@media only all and (max-width: 600px){
    #logo svg{width: 80%; padding: 60px 10% 20px 10%;}
#slog svg{width: 80%; padding: 5% 10%;}
    #head #quote{bottom: -30%;}
    .teaserwrap a{width: 96%; margin: 0 2%;}
.teaserwrap a.big{width: 46%; margin: 0 2%;}
ul.events li{width: 99%;}
ul.events.list li .ev .capt{width: auto; display: block; margin: 0;}
ul.events.list li .ev .date{display: block; width: auto; float: none;}
.gallery a {width: 50%;}
#content{padding: 0 20px;}

.state{padding: 20px!important; border-radius: 0; text-align: center;}
.statewrap{padding-left: 0!important;}
.state .port{display: block; position: inherit; width: 200px; height: 200px; margin: 0 auto; margin-bottom: 20px;}
.state_inner{display: block;}

ul.hometeas li{width: 49%;}
ul.hometeas li.one{width: 99%; height: auto;}
ul.hometeas li.two{width: 49%;}
ul.hometeas li.three{width: 49%;}

ul.hometeas li .tit .out .inn h2{font-size: 1.2em;}

}

@media only all and (max-width: 400px){
ul.hometeas li .tit .out .inn h2{font-size: 1.0em;}
}

@media only all and (max-width: px){
#head #quote{bottom: -30%; font-size:28px; line-height: 32px;}
}