/* This CSS file is part of the HTML5 / CSS3 tutorial on http://www.lingulo.com */

/* GLOBAL */
* {padding:0; margin:0;}

html {font-size:62,5%;}

body{ border-top:5px solid #EEDD82; background-color: #FFFFF9; font-family: 'Calibri', sans-serif; color:#333333; }

h1{font-size:124%;}
h2{font-size:116%; line-height:2.5em;}
h3{font-size:108%;}
p{font-size:100%; line-height:1.5em;}
h4{font-size:95%;}
h5{font-size:90%;}
h6{font-size:86%;}

a {text-decoration:none; color: #555555; transition: color .5s ease; }
a:hover {color:#2E8B57; font-weight: bold; }
.aktuell {color:#2E8B57;  }

hr { background-color: #D6D0C1;	border:0; height:0.1em;	margin:1.5em 0;}

/* Kopf */
header {position:relative; 	width:auto; max-width:900px; margin: 0 auto 20px auto; }
header #logo  img, header #logo h1 {float:left;}
header h1 {margin:15px 0 0 10px; font-size:3em; color:#2E8B57; font-family: 'Baumans', cursive;}

/* Navigation */
nav {position:absolute; right:-150px; bottom:0; }
nav ul {list-style:none;}
nav ul li {display:block; float:left; padding:3px 15px; }
nav ul li a {text-transform:uppercase; transition: all .25s ease; }
nav ul li a:hover {color:#2E8B57; }


#wrap {margin: 0 auto; width:98%;} 
/* slider */
/* SLIDESHOW */
/* Prevent the slideshow from flashing on load */
.slidesjs-container { border-top: 1px #d6d0c1 solid; border-bottom:4em solid #EEDD82;}
#slides {display: none;}

/* Center the slideshow */
.container {width:auto; margin: 0 auto; position:relative; }

/* Show active item in the pagination */
.slidesjs-pagination .active {color:red;}
#slider_content1 p .responsive_button, #slider_content2 p .responsive_button, #slider_content3 p  .responsive_button {display:none; color:#000; }
#slider_content1, #slider_content2, #slider_content3 {line-height:1.5em; width:25em; position:absolute; top:15%; left:15%; display:none; z-index:11;}
#slider_content1 h3, #slider_content2 h3, #slider_content3 h3 {color:#FFFFF9; margin-bottom:0.5em; background-color:#666666; padding:0.6em 1em; border-radius: 0.8em 0 0.8em 0; display:inline-block; }
#slider_content1 {display:block;}
#slider_content1 p, #slider_content2 p, #slider_content3 p {margin:0 0 2.5em 0; color:#4a463b; background-color:#FFFFF9; padding:0.8em 1em; border-radius: 0.4em; }


/*inhalt*/
.inhalt {margin: 0 auto; width:80%;margin-bottom:3em;}

/* gaestebuch */
#gbuch {margin: 0 auto; text-align:center; height:600px;}

/* einspalter */	
.oneColumn {margin: 0 auto;}

/* zweispalter */
.twoColumn35 {width:35%;}
.twoColumn50 {width:50%;} 
.twoColumn65 {width:65%;}

/* dreispalter */
.threeColumn {width:33%;} 

/*vierspalter */
.fourColumn25 {width:25%;}


/*mobil*/
#mobileMenu {position: fixed; top: 0; left: 0; width: 100%; display: none; }
#mobileMenu ul li {display:block; background-color: #EEDD82; color: #fff; padding: 12px 0; letter-spacing: 0.1em; text-align: center; text-transform: uppercase; border-bottom: 1px solid #CC5836;}
.toggleMobile {display: none; }

.fleft {float:left;}
.fright {float:right;}
.clearfix:after { content: "."; display: block; height: 0px; clear: both; visibility: hidden; }

/* BUTTONS */
.button {padding:7px 14px; background-color: #2E8B57; color: #FFFFF9; text-decoration:none; border-radius:5px; box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.3); }
.button:hover {background:none #FFFFF9; border-color: #FFFFF9; text-shadow:none; color: #555555; }


/* FOOTER */
footer {position:relative; clear:both; width:auto; height:26em; background:#333333; border-top:4em solid #EEDD82; }

footer .wrapper {line-height:2em; margin: 0 auto; padding-top:2.5em; width:auto; max-width:80%; font-size:0.9em;}
footer .wrapper .column { color:#ababab; float:left; width:33%;}

footer .wrapper .column.midlist ul li{display:block; width:auto; padding:0 0 10px 25px; }
footer .wrapper .column.midlist ul li a:hover { color:#2E8B57;font-weight: bold;}

footer .wrapper .column.rightlist ul li {display:block;width:auto;}
footer .wrapper .column.rightlist ul li a span {margin-left:5em;display:block;}
footer .wrapper .column.rightlist ul li a img {transition: border .25s ease; float:left; border:0.2em solid #444444;}
footer .wrapper .column.rightlist ul li a img:hover { border-color: #5e5e5e;}

footer .wrapper .column h4 {font-size: 16px;color: #fff; border-bottom: 1px solid #444444;padding: 0 0 10px 0;margin-bottom: 10px;}

#copyright {background: #1D1D1D;height:3em;position:absolute; bottom:0;left:0;width:100%;padding-bottom:15px;}
#copyright .wrapper {padding-top:25px;color: #5e5e5e; font-size:14px; position:relative;}
#copyright .wrapper .social { position:absolute; right:0; top:25px;}
#copyright .wrapper .social a { transition: opacity .25s ease;opacity: 0.3; margin-left: 12px; display:block; float:left;}
#copyright .wrapper .social a:hover { opacity: 0.7;}
#copyright .wrapper a {color: #ABABAB;}
#copyright .wrapper a:hover { color: #fff;}

/* SKIPLINK */
/* nach oben */
.go-top {position: fixed;
	bottom: 2em;
	right: 2em;
	text-decoration: none;
	color:rgba(46,139,87,1);
	padding: 1em;
	display: none;
}

.go-top:hover { opacity:0.7;
}



/* MISC */
.clear {
        clear:both;
}

.hidden {
        position:absolute;
        clip: rect(1px 1px 1px 1px); /* IE6 & 7 */
        clip: rect(1px, 1px, 1px, 1px);
}


/* MEDIA QUERIES FOR A RESPONSIVE LAYOUT */

@media (max-width: 1215px)
{
        #slider_content1, #slider_content2, #slider_content3
        {
                width:auto;
                margin-right:50px;
        }
        #slider_content1 h2, #slider_content2 h2, #slider_content3 h2
        {
                font-size:18px;
        }
        #slider_content1 p, #slider_content2 p, #slider_content3 p
        {
                font-size:14px;
        }
        #slider_content1 p .responsive_button, #slider_content2 p .responsive_button, #slider_content3 p  .responsive_button
        {
                display:inline;
        }
        .container .button
        {
                display:none;
        }
}

@media (max-width: 915px)
{
        #boxcontent article
        {
                float: none;
                margin: 30px auto 0 auto;
                width: 60%;
        }
        #spacer
        {
                font-size:15px;
        }
        #spacer .search
        {
                margin-top:19px;
                margin-right:-385px;
        }
        #spacer p
        {
                margin-left:-370px;
        }
        input
        {
                padding:4px;
                font-size:14px;
        }
        input[type="submit"]
        {
                padding: 1px 14px;
        }
        #four_columns
        {
                width: 500px;
        }
        #four_columns .img-item:nth-of-type(3), #four_columns .img-item:nth-of-type(4)
        {
                margin-top: 25px;
        }
        #text_columns article.column1, #text_columns .column2
        {
                float:none;
                max-width: 500px;
                margin: 50px 30px 0 30px;
        }
        .column2 .row
        {
                float:none;
                margin:0 0 40px 50px;
        }
        footer .wrapper .column
        {
                font-size: 12px;
                width: 230px;
        }
}

@media (max-width: 765px)
{
        .container
        {
                height:1px;
                top: -1500px;
        }
        header
        {
                height:120px;
        }
        header nav
        {
                right: auto;
                bottom: auto;
                left: 50%;
                top:100px;
                margin-left: -184px;
        }
        #spacer
        {
                height:100px;
        }
        #spacer p
        {
                text-align:center;
                position:static;
                margin: 0 auto;
                padding:15px 0 7px 0;
        }
        #spacer .search
        {
                text-align:center;
                position:static;
                margin: 0 auto;
        }
        footer
        {
                padding-bottom:70px;
                height: auto;
        }
        footer .wrapper
        {
                width: 350px;
                margin: 0 auto;
        }
        footer .wrapper .column
        {
                margin-top:30px;
                float:none;
                font-size: 14px;
                width: auto;
        }
        footer .wrapper .social
        {
                display:none;
        }
}

@media (max-width: 500px)
{
        header
        {
            margin-top: 80px;
            text-align: center;
        }        
        #spacer
        {
                height:auto;
                padding-bottom:15px;
        }
        #four_columns
        {
                width:auto;
        }
        #four_columns .img-item
        {
                width: 200px;
                float:none;
                margin: 25px auto 0 auto;
        }
        #four_columns h2
        {
                margin: 0 30px;
        }
        .column2 .row
        {
                margin: 0 0 40px 10px;
                width:auto;
        }
        footer .wrapper
        {
                width:auto;
        }
        footer .wrapper .column
        {
                margin: 0 auto 15px auto;
                max-width:300px;
        }
        input
        {
                width:auto;
        }
        #mobileMenu
        {
                display: block;
                z-index: 99;
        }
        .toggleMobile
        {
                position: fixed;
                top: 10px;
                left: 10px;
                display: block;
                width: 40px;
                height: 36px;
                cursor: pointer;
                z-index: 999;
        }
        .toggleMobile span.menu1, .toggleMobile span.menu2, .toggleMobile span.menu3
        {
                display: block;
                position: absolute;
                width: 40px;
                height: 8px;
                left: 0;
                background: #EDA28C;
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        .toggleMobile span.menu1
        {
                top: 0;
        }
        .toggleMobile span.menu2
        {
                top: 14px;
        }
        .toggleMobile span.menu3
        {
                top: 28px;
        }
        .toggleMobile.active span.menu1
        {
                top: 14px;
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        .toggleMobile.active span.menu2
        {
                -webkit-transform: rotate(-45deg);
                -moz-transform: rotate(-45deg);
                -o-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        .toggleMobile.active span.menu3
        {
                opacity: 0;
                -webkit-transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        header nav
        {
                display:none;
        }
        header h1
        {
                font-size:40px;
        }
        header p
        {
                margin-left: 60px;
                font-size:14px;
        }
}

/* KEYFRAMES */

@keyframes stylie-transform-keyframes {
  0% {transform:translateX(30px) translateY(46px) rotate(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  100% {transform:translateX(260px) translateY(-150px) rotate(0deg) translate(-50%, -50%);}
}

@keyframes stylie-transform2-keyframes {
  0% {transform:translateX(40px) translateY(40px) rotate(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  100% {transform:translateX(50px) translateY(40px) rotate(0deg) translate(-50%, -50%);}
}