*{
  font-family:ARIAL;
}
.wrapper{
  width:960px;
  /*height:100%;*/
  margin:0 auto;
  background-color:#fff;
  display:flex;
  position: relative;
}
.page_game .wrapper, .page_komtakt .wrapper, .page_startseite .wrapper{
  min-height: 810px;
  height: 105%;
}


.navigation{
  width:200px;
  margin:0 10px;
  /*height:100%;*/
  float:left;
  background-color: #e580f8;
  position:relative;
  min-height: 810px;
}
.nav{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.nav div{
  padding:10px 20px;
  margin-bottom:5px;
  background-color:#2b2c7f;
  color:#fff;
  font-size:20px;
  font-weight:500;
  display:table;
  cursor:pointer;
}
.nav a, .nav a:hover, .nav a:focus, .nav a:visited{
  color:white;
  text-decoration: none;
}
.nav div:hover{
  background-color:#e43737;
  transform:rotate(10deg) scale(1.1);
  transition: all ease 0.2s;
}
div.nav7{
  text-align: right;
    font-size: 16px;
    padding: 5px 20px;
}
.logo{
  margin:10px;
}
.ibims{
  margin:21px;
  animation:dreh 1.2s steps(2) infinite;
}
@keyframes dreh{
  from{transform:rotate(-7deg);}
  to{transform:rotate(25deg);}
}

.main{
  display:flex;
  flex-direction:column;
  min-height:100%;
}
.com_easybookreloaded.view-entry .main{
  height:100%;
}
#easybook iframe{
height: 345px;
}
.main-head{
  margin-top:20px;
}
.baer{
  height:122px;
  margin-right:10px;
  position:relative;
}
.baer_zu{
  background: url('images/baer_zu.png');
  animation: 4s blinzeln steps(1) infinite;
  width:27px;
  height:13px;
  position:absolute;
  left:256px;
  top:46px;
}
@keyframes blinzeln{
  0%,25%,85%,100%{opacity:0;}
  20%,80%{opacity:1.0;}
}
.main-content{
  margin:25px 0;
}
.main-img img{
  /*width:100%;*/
  display:block;
}
.main-img{
  margin-top:25px;
  margin-right:10px;
  /*text-align:center;*/
  position: relative;
  width: 730px;
  overflow: hidden;
}
.main-img span{
  color: #c34890;
  font-size: 47px;
  position: absolute;
  top: 386px;
  left: 16px;
  line-height: 1.3;
}
.klick-box{
  position: absolute;
  right: -33px;
  top: 210px;
  transform: rotate(10deg);
  cursor:pointer;
}
.klick-box span{
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: #000;
  color: #98f75b;
  font-size:55px;
  font-weight:600;
  margin-left: 6px;
}
.klick-box-text{
  border:6px solid #c32e6e;
  /*background-image:url('https://www.youngcaritas.de/cms/contents/youngcaritas.de/medien/bilder/vor-ort/europa/saint-malo/solidaritaetsmarsch5/sonnenuntergang_v5.png');*/
  /*background-size:100% 100%;*/
  /*padding:20px;*/
  text-align:center;
  color:#fff;
}
.klick{
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{
  0%,100%{opacity:1.0;}
  50%{opacity:0;}
}
.ballon{
  background: url('images/ballons.jpg');
  animation: 4s steering steps(4) infinite;
  width:122px;
  height:132px;
  position:absolute;
  left: 172px;
      top: 22px;
}
@keyframes steering{
  to{background-position-x:-488px}
}
.nav .nav-active{
  background-color:#e43737;
}
.main-content h1{
  text-align:center;
  font-family:ARIAL;
}
.itemid-110 table{
  border: 1px solid #000;
  width: 100%;
}
.itemid-110 th{
  background-color: #e580f8;
  color:#fff;
  padding:10px;
  text-align: center;
}
.itemid-110 td{
  padding: 10px;
  text-align:center;
}
.itemid-110 table tr:nth-child(2n){
background-color: #caffc4;
color: #000;
}
.itemid-110 .table-header{
  width:100%;
}
.copyright{
  text-align: center;
  font-size: 12px;
  bottom: 10px;
  width: 200px;
  padding: 5px;
  margin-top: 60px;
  color: #555;
  position:absolute;
}
.itemid-107 .kontakt-formular, .itemid-108 .kontakt-formular{
  width: 420px;
  margin: 0 auto 30px;
}
.itemid-107 .kontakt-formular label, .itemid-108 .kontakt-formular label{
  margin-right:20px;
}
.itemid-107 .kontakt-formular input[type=text], .itemid-108 .kontakt-formular input[type=text]{
  width:280px;
  padding:5px;
}
.itemid-107 .kontakt-formular textarea, .itemid-108 .kontakt-formular textarea{
  width:100%;
  padding:5px;
}
.itemid-107 .kontakt-formular p, .itemid-108 .kontakt-formular p{
  text-align:right;
}
.itemid-107 .kontakt-formular input[type=submit], .itemid-108 .kontakt-formular input[type=submit]{
  width:100%;
  height:50px;
  margin-top:20px;
}
.itemid-107 .danke p{
  text-align:center;
}
.itemid-108 .main{
  height:100%;
}
.itemid-108 .prev-next button{
  margin-right:5px;
  margin-left:5px;
}
.itemid-108 .prev{
  float:left;
  width:42.5%;
  text-align: right;
  min-height: 1px;
  padding:10px;
}
.itemid-108 .next{
  float:right;
  width:42.5%;
  text-align: left;
  min-height: 1px;
  padding:10px;
}
.itemid-108 .seite{
  width:15%;
  float:left;
  padding:10px;
  text-align:center;
}
.itemid-108 .eintrag{
  width:600px;
  margin:5px auto;
  border:1px solid #000;
}
.itemid-108 .eintrag-oben{
  width:100%;
  padding:10px;
  border-bottom: 1px solid #000;
  background-color: lightgreen;
  height: 100%;
}
.itemid-108 .eintrag-oben p{
  margin:0;
}
.itemid-108 .eintrag-unten{
  width:70%;
  padding:10px;
}
.itemid-108 .eintraege{
  /*line-height: 20px;*/
}
.itemid-107 .success p, .itemid-108 .error p, .itemid-108 .success p, .itemid-107 .error p{
  margin:0;
}
.itemid-108 .kontakt-formular textarea{
  max-width:575px;
}
.itemid-107 .content, .itemid-108 .content{
   height:0.5px;
   width:0.5px;
   border:none;
   color:#fff;
}
.itemid-107 .error, .itemid-107 .success, .itemid-108 .error, .itemid-108 .success{
  width:100%;
  padding:10px;
  border:1px solid #444;
  border-radius:5px;
  margin: 20px auto;
  text-align:center;
}
.itemid-108 .error, .itemid-107 .error{
  background-color:rgba(255,0,0,0.3);
}
.itemid-107 .success, .itemid-108 .success{
  background-color:rgba(0,255,0,0.3);
}
.name-error, .email-error, .msg-error{
  color:#ff0000;
  display:none;
}
.itemid-107 label, .itemid-108 label{
  margin: 20px 0 5px;
}
/*
 * Styles for the Pong game
 * Author: David Laurell <david.laurell@gmail.com>
 * License: GPLv3
 */

@CHARSET "UTF-8";

#gamediv {
	display: block;
	margin: 0 auto;
	width: 725px;
	height: 420px;
	background: #FFdEAD ;
	padding: 10px;
  margin-top: 55px;
}

/*
	Title screen
*/
#titleScreen {
	/*border: 2px solid #333;*/
	padding: 15%;
	margin: 0 auto;
	margin-top: 3em;
	width: 50%;
	text-align: center;
}
#titleScreen h1 {
	font-weight: normal;
	color: #ffc;
	font-size: 1.5em;
}
#titleScreen p {
	font-weight: bold;
	font-size: 0.8em;
	color: #ccc;
	text-align: left;
}

#titleScreen .vcard {
	font-size: 0.8em;
}
#titleScreen .vcard a {
	color: #ccc;
}

/*
	Play screen
*/
#playScreen {
	display: none;
}

#playScreen .ingamebuttons {
	float: left;
	position: relative;
	top: -3.5em;
	left: 0;
	text-align: center;
}

#gameCanvas {
	position: relative;
	top: 0;
	left: 0;
	color: #ccc;
}
#computerScore,
#playerScore {
	position: relative;
	top: -340px;
	left: 0;
	font-size: 60px;
	color: #ccc;
	line-height: 0;
	width: 40%;
	opacity:0.8;filter:alpha(opacity=80);
}

#computerScore {
	float: left;
	text-align: right;
}
#playerScore {
	float: right;
	text-align: left;
}

#pauseText {
	display: none;
	position: relative;
	top: -360px;
	left: 0;
	font-size: 3em;
	margin: 3em auto;
	/*opacity:0.4;*/
  /*filter:alpha(opacity=40);*/
	color: #fff;
	text-align: center;
	/*line-height: 0;*/
  border: 2px solid #fff;
  background-color: rgba(230,0,126,0.9);
  padding:20px;
  width:50%;
}

/*
	Buttons
*/
#playButton,
#pauseButton,
#soundButton {
	border: none;
	background: rgba(100,100,100,0.2);
	color: #ffc;
	padding: 10px;
	font-size: 0.8em;


}
#playButton{
  width:85px;
  height:85px;
  font-size:50px;
  margin-bottom:20px;
}
#pauseButton,
#soundButton {
	float: left;
  width: 44px;
  height: 44px;
  font-size:22px;
}
#pauseButton{
  	margin-left: 1em;
}
#soundButton{
  	margin-left: 0.5em;
}
#pauseButton:hover{
	color: red;
}
#soundButton:hover{
	color: blue;
}
#playButton:hover {
	color: #00FF40;
}
.mod-newsflash-adv .item{
  margin: 0 10px;
  padding: 10px;
}
.mod-newsflash-adv .item h4{
  background-color: #cdf5ce;
  padding: 10px 5px;
}
.mod-newsflash-adv .item .item_published{
  text-align: right;
    font-size: 11px;
    margin-right: 10px;
}
.mod-newsflash-adv .item .item_introtext{
  padding:10px;
}
.booking{
  width: 500px;
height: 150px;
margin: 113px;
margin-bottom:0;
padding: 55px;
text-align: center;
font-size: 30px;
-webkit-animation-name: led;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: steps(1, end);
}
.kramer{
  text-align:center;
  margin-top:20px;
}
.kramer p{
  font-weight:bold;
  font-size:16px;
}
.page_news iframe{
  width: 100%;
  height: 27em;
}
.facebook{
  text-align: center;
    padding: 20px;
}
@-webkit-keyframes led {
  0% {
    background-image:url(images/led1.png);
  }
  20% {
    background-image:url(images/led2.png);
  }
  40% {
    background-image:url(images/led3.png);
  }
  60% {
    background-image:url(images/led4.png);
  }
  80% {
    background-image:url(images/led5.png);
  }
  100% {
    background-image:url(images/led1.png);
  }
}

.com_easybookreloaded .btn-success{
  border-radius: 0;
  background-color:#e43737;
  border:0;
  padding:10px 20px;
}
.com_easybookreloaded .btn-success:hover, .com_easybookreloaded .btn-success:focus, .com_easybookreloaded .btn-success:active{
  transform: scale(1.1);
  transition: all ease 0.2s;
  background-color:#e43737;
}
.easy_entries .easy_frame:hover{
  border: 1px solid rgba(97, 11, 11, 0.49);
}
.easy_entries .easy_top{

}
#termine{
  width:550px;
  height:600px;
  margin-left: 90px;
  border: 1px solid #ddd;
}
#termine table{
  margin:0 auto;
}
.date-tag{
  float: left;
    height: 50px;
    background-color: #005e8d;
    width: 50px;
    font-size: 30px;
    color: #fff;
    text-align: center;
    padding: 16px 0;
    margin-right: 30px;
}
#jevents_body .ev_td_left{
  text-align:center;
  background-color: #ee5f5b;
  line-height: 1.1;
}
.ev_td_left .date-monat{
  font-size: 40px;
    text-transform: uppercase;
    color: #fff; 
    font-weight: bold;
}
.ev_td_left .date-jahr{
  font-size:37px;
  color:#fff;
}
div#ev_icon_yearly{
  font-size: 40px;
    width: 120px;
    font-weight: bold;
    color: #ee5f5b;
}
.itemid-140 iframe{
  height:100%;
  min-height:2000px;
  border:0;
  width:100%;
}
.imprint{
  padding: 50px;
/*  text-align: center;*/
}