/* ----------------------------------------------------------------------------- *
 *                           Styles der Basisversion                             *
 * ----------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------- *
 * Änderung des default-Box-Modells aller Elemente auf "border-box"
 * http://www.paulirish.com/2012/box-sizing-border-box-ftw/
 * << apply a natural box layout model to all elements >>
 * ----------------------------------------------------------------------------- */
*, *:before, *:after {
    -webkit-box-sizing: border-box; /* Safari/Chrome, andere WebKit-Browser */
    -moz-box-sizing: border-box; /* Firefox, andere Gecko-Browser */
    box-sizing: border-box; /* Opera/IE 8+ */
}

/* ----------------------------------------------------------------------------- */
.page-wrapper {
    margin: 0;
}

body{
	/*background:url('../files/kinderklub_05-00029_web.jpg') no-repeat centertop; 
	width: 99%;
	height:auto;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;*/
}

header {
    padding: 0.5em 0px;
	margin-left: 0;
}
header img {
	width: 330px; 
	height: auto;
	margin-bottom: 10px;
	margin-left: 10px;
	
	}
aside, footer {
    padding: 0.6em 4px;
}

section {
    padding: 0 6px;
}

.main {width: 90%;
          padding-left: 10px;
		  margin-left: 20px;
		  margin-bottom: 40px;
		  margin_top: -40px;
         /*background: none;*/
         }
.mainContent {
	

}
	.time {margin-top: 10px;}
aside {
    width: 100%;
    margin-left: 0;
}

#slide {
   width: 99%;
    margin-left:-30px;
}
.tinymcewysiwyg img{
   width: 98%;
   height: auto;
    margin-left:0px;
}

	    footer {
        clear: left;
		margin-bottom: -30px;
        margin-left: 0px;
		
    }
 .sprachwahl {
	position:absolute;
	list-style:none;
	z-index:9999;
	top: 10px;
	right: 50px;
	visibility:visible;
	
	}
/*#superbgimage {
	background-color:#000;
	
	}*/
#superbgimage img{
	margin-left: 0px;
	opacity: 1;

	}
/* ----------------------------------------------------------------------------- *
 *                             Textauszeichnungen                                *
 * ----------------------------------------------------------------------------- */
h1 {
    margin: 0;
}

h2 {
    margin: 0.6em 20px;
}

p.teasertext {
    margin: 0.8em 20px;
}

ul, ol {
    padding: 0;
    margin: 0 0 0.625em 20px;
}
.title {
	
	padding-bottom: 0px;
	}

/* ----------------------------------------------------------------------------- *
 *                                  Navigation                                   *
 * ----------------------------------------------------------------------------- */
nav {margin-top: -20px;}
nav ul {
    margin: 0;
	margin-top: -20px;

}

nav ul > li {
    margin-left: 0;

}

nav ul > li > a, nav ul > li > strong {
    padding:0.3em 0px;
    display: block;
}

nav ul a:link {
    text-decoration: none;
}

.title {
	background-color: #9e8c82  ;
	width: 103%;
	margin-left: -10px;
	margin-top: -11px;
	padding: 10px;
	autoHeight: true;
	
	}
.title .tinymcewysiwyg {
	margin-top: -14px;
	text-align:center;
	font-size:14px;
	height: 10px;

	}
.title .tinymcewysiwyg p{
	margin-top: -14px;


	}
@media only screen and (min-width: 20.875em) {
	 @media only screen and (max-width: 50em) {
			.copy {
		visibility:hidden;
		margin-left: 6px;
		}
		#superbgimage img{
	margin-left: 0px;
	/*visibility: hidden;*/

	}
 .sprachwahl {

	top: 10px;
	right: 90px;
	visibility:visible;
	
	}		
    } 
	 
}

/* ----------------------------------------------------------------------------- *
 *                           Styles der Tabletversion                            *
 *                          750px / 16px/em = 46.875em                           *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 50.875em) {

    /* Schriftverkleinerung wird für große Screens wieder aufgehoben */
    @media only screen and (max-width: 58em) {
        body {
            font-size: 0.938em; /* 15px */
        }
		.nav_footer {
	visibility:hidden;}
	.copy {
		visibility:visible;
		margin-left: 10px;}
		
    }
header {margin-left: 0px;}
	header img {
	width: 451px; 
	height: 275;
	margin-bottom: 20px;
	margin-left: 0px;
	}
    .main {
        /* clearing für die floatenden gleichlangen Spalten (.mainContent und .aside) */
            background-image: url(../img/BGContent.png);
        overflow: hidden;
        width: 360px;
		position:absolute;
		right: 60px;
		top: 60px;
    }

    .mainContent {
        width: 98%;
        float: left;
        padding: 10px;
        border-top: none;
    }
		.time {margin-top: 0px;}
}


.title {
	
	padding-bottom: 8px;
	}
.title {
	background-color: #9e8c82;

	margin-left: -10px;
	margin-top: -11px;
	padding: 16px;
	}
		.title ul {

	margin-top: 6px;
	}
	.title ul li {
	float:left;
	list-style:none;
	margin-right: 10px;
	color: #000;
	font-size: 14px;
	margin-bottom: 2px;
	}

.tinymcewysiwyg img{
   width: 100%;
   height: auto;
    margin-left:0px;
}
    aside, footer {
        padding: 0.8em 4px;
    }

    section {
        padding: 0;
    }
    .copy {
        clear: left;
        position: fixed;
        bottom: 0px;
		
		visibility:hidden;
        
    }
	.nav_footer {
	visibility:visible;}
#superbgimage {
	background-color:none;
	
	}
#superbgimage img{
	margin-left: 0;
	opacity: 1;
	}

    /* ----------------------------------------------------------------------------- *
     *                             Textauszeichnungen                                *
     * ----------------------------------------------------------------------------- */
    h2 {
        font-size: 2.1875em; /* 35px */
        line-height: 1.2em;
        margin: 0.3em 0 0;
    }

    p.teasertext {
        margin: 0.8em 0;
    }
.title .tinymcewysiwyg p{
	margin-top: 10px;

	}

    /* ----------------------------------------------------------------------------- *
     *                                  Navigation                                   *
     * ----------------------------------------------------------------------------- */
    nav {
        /* clearing für die floatenden LIs */
        overflow: hidden;
        font-size: 1.2em; /* 18px */
		margin-top: -60px;
		margin-left: -4px;
    }
         nav {
         width:240px;
        clear: left;
        margin-left:8px;
        box-shadow: none;
		height: 600px;
		position:fixed;
		
    }
    nav ul {
        margin: 0 0px;
    }

    nav ul li {
        margin-left: 0px;
        border: none;
        width: auto;
    }

    nav ul > li > a {

        display: inline-block;
    }

}

/* ----------------------------------------------------------------------------- *
 *                          Styles für kleine Desktops                           *
 *                           1024px / 16px/em = 64em                             *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 44em) {
    /* Navigation wird links neben dem Inhalt angeordnet */
	header img {
	width: 451px; 
	height: 275;
	
	}
	#navi {position:fixed;}
    nav {
       position:fixed;
        clear: left;
        box-shadow: none;
		margin-left: -4px;
    }

    nav ul {
        margin: -0.2em 0.8em 0;
		z-index: 1000;
    }

    nav ul > li {
        width: 100%;
        float: none;

    }

    nav ul > li > a {
        padding: 0.3em 5px;
        display: block;
		 color: #7fabd5;
    }
         
    nav ul li span {
  color: #7fabd5;
  margin-left: 26px;
  margin-top: 14px;

}
    nav ul li {
        margin-left: -20px;
        border: none;
        width: auto;
    }
	
	
    /* .main macht Platz für .nav */
    .main {
        width: 360px;
        float: left;
		position:absolute;
		top: 60px;
		right: 60px;
        height: auto;
		min-height: 344px;
         padding-bottom: 0px;
    }

    /* Größenanpassungen */
    .mainContent {
        width: 98%;
        padding: 10px;
        
    }

 #slide {
   width: 688px;
    margin-left:30px;
}
.tinymcewysiwyg img{
   width: 103%;
   height: auto;
    margin-left:0px;
}
.mainContent #rex-xform {
	width: 330px;
	}
.select{width: 320px;}

label{float:left;}
.text{width: 320px;}
.textarea {width: 320px; }
#xform-formular-field-10 {

	width: 320px;
	}

    .copy {
        clear: left;
        position: fixed;
        bottom: 0px;
        margin-left: 24px;
		visibility:hidden;
    }
.nav_footer {
	visibility:visible;}

}
/* ----------------------------------------------------------------------------- *
 *                          Styles für große Desktops                            *
 *                           1248px / 16px/em = 78em                             *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 68em) {
    .page-wrapper {
        margin: 0 auto;
        max-width: 78em;
    }
		header img {
	width: 451px; 
	height: 275;
	position:fixed;
	
	}
.chrome #navi {
  margin-left: -4px;
 
}
.copy {
	margin-left:
	}

#navi {
	width: 240px;
    color: #efefef;
	margin-left: 14px;
    font-size: 20px;
	position:fixed;
	top: 230px;
	
	z-index: 1000;
	list-style: none;
}
#navi ul li {
    list-style: none;

	margin-top: -2px;
	
    color: #7fabd5;
}
        .main {
        width: 360px;
        float: left;
		position:absolute;
		top: 60px;
		right: 60px;
        height: auto;
		
    }
     footer {
        clear: left;
		

    }
	.nav_footer {
	visibility:hidden;}
}


/* ----------------------------------------------------------------------------- *
 *                      Beispiel Responsive-Nav im Basis-Layout                  *
 * ----------------------------------------------------------------------------- */
/* responsive-nav.js v1.0.14 by @viljamis - start */
/*
 #nav ul {
     margin: 0;
     padding: 0;
     width: 100%;
     display: block;
     list-style: none;
 }
 #nav li {
     width: 100%;
     display: block;
 }
 */
.js #nav {
    clip: rect(0 0 0 0);
    max-height: 0px;
    position: absolute;
	left: 18px;
    display: block;
    overflow: hidden;
    zoom: 1;

	
}

#nav.opened {
    max-height: 9999px;
	z-index:1000;
}
/* responsive-nav.js v1.0.14 by @viljamis - ende */

/*
 * Eigene Anpassungen für den Toggle-Button
 */
#nav-toggle {
    display: inline-block;
    position: absolute;
    right: 6%;
    top: 8px;
    height: 40px;
    cursor: pointer;
    padding: 4px;
	padding-top: 6px;
    color: #fff;
    background: #7fabd5;
    z-index:1200;
}

#nav-toggle:hover {
    text-decoration: none;
    background: #9e8c82;
    color: #fff;
}

/* ----------------------------------------------------------------------------- *
 *                  Beispiel Responsive-Nav im im Desktop-Layout                 *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 46.875em) {
    /* responsive-nav.js v1.0.14 by @viljamis - start */
    .js #nav {
        position: relative;
    }

    .js #nav.closed {
        max-height: none;
    }

    #nav-toggle {
        display: none;
    }
.copy {
	visibility:visible; margin-left:14px;}
	.nav_footer{
		visibility:hidden}
    /* responsive-nav.js v1.0.14 by @viljamis - ende */
}

/*----Tablet Landscape---*/
@media only screen and (min-width: 768px) and (max-width: 1280px) and (max-height: 800px)  {
/* Styles */
.copy {
	visibility:hidden;
	}
.nav_footer{
		visibility:visible;
	}
}
@media only screen and (min-width: 240px) and (max-width: 370px)  {
	header img {width: 290px; height:auto;}
	#xform-formular-copy {
		width: 270px;
	background:none;
	border:none;
	
	font-size: 14px;
	}
	.title .tinymcewysiwyg {
	line-height: 14px;
	height: 20px;
	margin-top: 8px;
	}
	.mainContent {
		width: 91%;
		}
	.main {width: 270px;}
	.time {margin-top: 10px;}
}

.tinymcewysiwyg h5 a img {width: 170px; height: 170px; margin-top: -40px; margin-bottom: -20px;}

.booking-link img{
	max-width:170px;
	margin:20px 0 20px 0;
	border:none!important;
}

.booking-link img:hover{
	opacity:0.7
}
		
.booking-wrapper{
	position:fixed;
	bottom:100px;
	left:19%;
	display:none;

	
}

.booking-wrapper img{
	width:170px;
	height:170px;
}

		
@media only screen and (min-width: 1000px){
	.booking-wrapper{
	display:block;
	}
}