@charset "UTF-8";
/* CSS Document */
/*Author: Dilara Bitkin */



@font-face { font-family: 'Bebas Neue Book';
             src: url('technic/BebasNeueBook.ttf') format('truetype'); }
			
@font-face { font-family: 'Birch';
             src: url('technic/Birch.ttf') format('truetype'); }			 
	
	hr {color:#a3897a;}
body {
	background:url(../images/background.png); 
    background-size: 100%;
    background-repeat: no-repeat;}
body.two {
	background:url(../images/background2.png); 
    background-size: 100%;
    background-repeat: no-repeat;}
body.three {
	background:url(../images/background3.png); 
    background-size: 100%;
    background-repeat: no-repeat;}
body.four {
	background:url(../images/background4.png); 
    background-size: 100%;
    background-repeat: no-repeat;}
body.five {
	background:url(../images/background5.png); 
    background-size: 100%;
    background-repeat: no-repeat;}
body.six {
	background:url(../images/background6.png); 
    background-size: 100%;
    background-repeat: no-repeat;}
h1 {font-family:Birch;
    font-style:italic;
	font-weight:300;
	color:#422918;}
	
h2 {font-family:Birch;
    text-transform: uppercase;
	color:#005321;
	font-weight: 300;
	margin-bottom: 0;
	text-decoration: underline;
	font-size:1em;}	
h4 {font-family:Birch;
    text-transform: uppercase;
	color:#005321;
	font-weight: 300;
	margin-bottom: 0;
	text-decoration: underline;
	font-size:1em;
	margin-left: 3%;}
	
p {font-family:gotham, helvetica neue;
   color:#422918;
   font-size: 0.8em;
   margin: 3%;}


/* =Nav
-------------------------------------------------------------- */
#nav-trigger {
  display: none;
  text-align: right; }
  #nav-trigger span {
	font-family: Bebas Neue;
    display: inline-block;
    padding: 10px 30px;    
    cursor: pointer;
    text-transform: uppercase;
	color: white;
	font-weight: 300;
    letter-spacing: 2px;}
  
    #nav-trigger span.open:after {
      border-left: solid 10px transparent;
      border-top: none;
      border-bottom: solid 10px #fff;
      border-right: solid 10px transparent; }

nav {
  margin-bottom: 30px;
  position: relative;
  z-index:1;}

nav#nav-main {
  padding: 10px 0; }
  nav#nav-main ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center; }
  nav#nav-main li {
    display: inline-block;}
    nav#nav-main li:last-child {
      border-right: none; }
  nav#nav-main a {
    font-family: Bebas Neue;
	text-transform: uppercase; 
	text-decoration:none;
	display: block;
    color: white;
    padding: 10px 20px; 
	font-weight: 300;
    letter-spacing: 2px;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;}
	
	nav#nav-main a.active { color:#a3897a}
	
 nav#nav-main a:hover {
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;}
  
nav#nav-mobile {
  position: relative;
  display: none; }
  nav#nav-mobile ul {
    display: none;
    list-style-type: none;
    position: absolute;  
    right: 0;
    text-align: center;
    background-color: #005321; 
	padding: 0% 3%;}
  nav#nav-mobile li {
    display: block;
    padding: 5% 0;
    margin: 0 5%;
    border-bottom: solid 1px #fff; }
    nav#nav-mobile li:last-child {
      border-bottom: none; }
  nav#nav-mobile a {
	font-family: Bebas Neue; 
	text-transform: uppercase; 
	font-weight:300;
	letter-spacing:2px;
	text-decoration: none;
    display: block;
    color: white;
    padding: 10px 30px; }
	
  img.headlg {
	width: 40%;
    margin: -22% 30%; }
	
	
section.welcome {
	text-align: center;
    margin-top: 30%;}	

.meatmargin {margin: 0 9%;}

audio {
	width:20%;}
.endsound audio {
	width:20%;}	
.endsound {
	text-align:center;
    border: 0;
	height: 139px;
	background-image: linear-gradient(to right, rgba(163, 137, 122, 0), rgba(163, 137, 122, 0.75), rgba(163, 137, 122, 0));
	padding: 2% 0 3% 0;}

a.ebutton {
	background-color:#005321;
	color:#fff;
	-moz-border-radius:28px;
	-webkit-border-radius:28px;
	border-radius:28px;
	padding:6px 16px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;}
	
a.ebutton:hover {
	background-color:#2f6627;
	border-shadow:0px 1px 0px #2f6627;}
.ebutton p {
	font-family: gotham, helvetica neue;
    color: #422918;
    font-size: 0.8em;
    margin:0;}
li.icon img { 
    width:40%;}	
li.icon img:hover {
	-webkit-transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
    transform: rotateY(180deg);
    transform-style: preserve-3d;
	-webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;}	
	
li.icon {margin: 22% 0 0 0;
    list-style-type:none;}	
	
ul.categories {
	text-align: center;
	padding: 0;
    margin: 0;}	
	
ul.undercategories  {
	text-align: center;
	padding: 0;
    margin: 0;}	

ul.undercategories p, ul.undercategories h2 {
	color:#422918;}
		
section.bgcate {
	background-color:#a3897a}
		
li.icon p {font-size:0.6em;}	


article.poem {text-align: center;
background-color: #a3897a;padding: 5%;
margin-top: 10%;}

h3 {color:#fff;font-family:Birch;font-weight: 100;}

article.poem p {color:#fff;}

article.trph img {width:100%;}

section.fell {}

span.italic {font-style:italic;}

span.ebutton {font-family:Birch;font-weight: 600;
font-size: 1.3em; }
p.fzitat {color:#a3897a;}
span.ebutton a {color:#a3897a;}
p.fzitat {color:#a3897a;}

section.footer img {
	margin-bottom: 5%;
	width:35%;}

section.footer {
	text-align:center;
 margin-top:6%;}
	
nav.footer ul {
	margin: 0;
    padding: 0;}	
	
nav.footer ul li {
	list-style:none;
	line-height: 200%;}	

nav.footer ul li a {
	color:#005321;
	text-decoration:none;
	font-family: Bebas Neue; 
	text-transform: uppercase; 
	font-weight:300;
	letter-spacing:2px;}	
	
nav.footer ul li a:hover {
	color:#a3897a;}		
	
div.copyr p, div.copyr a {
	color:#a3897a;
	font-family: Bebas Neue; 
	text-transform: uppercase; 
	font-weight:300;
	letter-spacing: 2px;
	text-decoration:none;
	}	
	
div.copyr a:hover {
	color:#005321;}	
	
	article.headline {
		text-align:center;
		padding-top:15%;}
		
	 ul.undercategories li.icon {margin: 4% 0 3% 0;}	
		
	section.bgcate {
		padding: 1% 0;
		margin-bottom: 6%;}	
		
	p.button	{margin: 5% 0 2% 0;}
	
	
	.gallery {
  width: auto;
  margin: 0 auto;
  padding: 5px;
  background: #fff;
}
	
	.gallery > div {
  position: relative;
 text-align:center;
  padding: 5px;
}

.gallery > div > img {
  display: inline;
  width: 200px;
  transition: .1s transform;
  transform: translateZ(0); /* hack */
}

.gallery > div > img:hover {
  z-index: 2;
  position:relative;
}

.gallery > div > img:hover {
  transform: scale(1.7,1.7);
  transition: .3s transform;
}



.cf:before, .cf:after {
  display: table;
  content: "";
  line-height: 0;
}

.cf:after {
  clear: both;
}

.clearfix {display: block;}



form span {
    display: inline-block;
    margin: 12px 0 0;
    padding: 4px 0;
    width: 200px;
    height: auto;}
	
form input {
    clear: left;
    margin: 12px 0 0;
    padding: 4px 0 4px 5px;
    width: 200px;
    height: 22px;
    border: 1px solid #999;
    border-radius: 3px;
    font: 13px 'Lato', Arial, Helvetica, sans-serif;
    color: #293535;
    background: #f7f7f7;
}



	
	.clear {
    clear: both;}
	
	.clearfix::after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;}  
	

input,
select,
textarea,
button,
.ui-btn {
	font-size:1em;line-height:1.3;font-family:Helvetica, Arial, sans-serif }
legend,
.ui-input-text input,
.ui-input-search input {
	color:inherit;text-shadow:inherit}
.ui-mobile label,
div.ui-controlgroup-label {
	font-weight:normal;font-size:16px}
.ui-field-contain {
	border-bottom-color:#828282;border-bottom-color:rgba(0,0,0,.15);border-bottom-width:1px;border-bottom-style:solid}
.table-stroke thead th,
.table-stripe thead th,
.table-stripe tbody tr:last-child {
	border-bottom:1px solid #d6d6d6;border-bottom:1px solid rgba(0,0,0,.1)}
.table-stroke tbody th,
.table-stroke tbody td {
	border-bottom:1px solid #e6e6e6;border-bottom:1px solid rgba(0,0,0,.05)}
.table-stripe.table-stroke tbody tr:last-child th,
.table-stripe.table-stroke tbody tr:last-child td {border-bottom:0}
.table-stripe tbody tr:nth-child(odd) td,
.table-stripe tbody tr:nth-child(odd) th {
	background-color:#eeeeee;background-color:rgba(0,0,0,.04)}
.ui-btn,
label.ui-btn {
	font-weight:bold;border-width:1px;border-style:solid}
.ui-btn {text-decoration:none !important}
.ui-btn-active {cursor:pointer}
.ui-corner-all {
	-webkit-border-radius:.6em ;border-radius:.6em }
.ui-btn-corner-all,
.ui-btn.ui-corner-all,
.ui-slider-track.ui-corner-all,
.ui-flipswitch.ui-corner-all,
.ui-li-count {
	-webkit-border-radius:1em ;border-radius:1em }
.ui-btn-icon-notext.ui-btn-corner-all,
.ui-btn-icon-notext.ui-corner-all {
	-webkit-border-radius:1em;border-radius:1em}
.ui-btn-corner-all,
.ui-corner-all {
	-webkit-background-clip:padding;background-clip:padding-box}
.ui-popup.ui-corner-all > .ui-popup-arrow-guide {
	left:.6em ;right:.6em ;top:.6em ;bottom:.6em }
.ui-shadow {
	-webkit-box-shadow:0 1px 4px  rgba(0,0,0,.3) ;-moz-box-shadow:0 1px 4px  rgba(0,0,0,.3) ;box-shadow:0 1px 4px  rgba(0,0,0,.3) }
.ui-shadow-inset {
	-webkit-box-shadow:inset 0 1px 4px  rgba(0,0,0,.3) ;-moz-box-shadow:inset 0 1px 4px  rgba(0,0,0,.3) ;box-shadow:inset 0 1px 4px  rgba(0,0,0,.3) }
.ui-overlay-shadow {
	-webkit-box-shadow:0 0 12px 		rgba(0,0,0,.6);-moz-box-shadow:0 0 12px 			rgba(0,0,0,.6);box-shadow:0 0 12px 				rgba(0,0,0,.6)}
.ui-btn-icon-left:after,
.ui-btn-icon-right:after,
.ui-btn-icon-top:after,
.ui-btn-icon-bottom:after,
.ui-btn-icon-notext:after {
	background-color:#000000 ;background-color:rgba(0,0,0,0.4) ;background-position:center center;background-repeat:no-repeat;-webkit-border-radius:1em;border-radius:1em}
.ui-alt-icon.ui-btn:after,
.ui-alt-icon .ui-btn:after,
html .ui-alt-icon.ui-checkbox-off:after,
html .ui-alt-icon.ui-radio-off:after,
html .ui-alt-icon .ui-checkbox-off:after,
html .ui-alt-icon .ui-radio-off:after {
	background-color:#000000 ;background-color:rgba(0,0,0,0.4) }
.ui-nodisc-icon.ui-btn:after,
.ui-nodisc-icon .ui-btn:after {background-color:transparent}
.ui-shadow-icon.ui-btn:after,
.ui-shadow-icon .ui-btn:after {
	-webkit-box-shadow:0 1px 0 rgba(255,255,255,.4) ;-moz-box-shadow:0 1px 0 rgba(255,255,255,.4) ;box-shadow:0 1px 0 rgba(255,255,255,.4) }
.ui-btn.ui-checkbox-off:after,
.ui-btn.ui-checkbox-on:after,
.ui-btn.ui-radio-off:after,
.ui-btn.ui-radio-on:after {
	display:block;width:18px;height:18px;margin:-9px 2px 0 2px}
.ui-checkbox-off:after,
.ui-btn.ui-radio-off:after {
	filter:Alpha(Opacity=30);opacity:.3}
.ui-btn.ui-checkbox-off:after,
.ui-btn.ui-checkbox-on:after {
	-webkit-border-radius:.1875em;border-radius:.1875em}
.ui-btn.ui-checkbox-off:after {
	background-color:#666;background-color:rgba(0,0,0,.3)}
.ui-radio .ui-btn.ui-radio-on:after {
	background-image:none;background-color:#fff;width:8px;height:8px;border-width:5px;border-style:solid}
.ui-alt-icon.ui-btn.ui-radio-on:after,
.ui-alt-icon .ui-btn.ui-radio-on:after {background-color:#000}
.ui-tabs{position:relative;padding:.2em}
.ui-header { 
    display:table;width:100%}
.ui-header .ui-title {
    display:table-cell;width:100%;line-height:2.5em}
.ui-header .ui-btn {display:table-cell}
.ui-header .ui-btn-left, .ui-header .ui-btn-right {
    position:static;top:0}
label.error {
	display:block;color:red;font-style:italic;font-weight:normal}
input.error, textarea.error, select.error {
	border:2px solid red;background-color:#FFFFD5;color:red;-moz-box-shadow:0 0px 4px red inset;-webkit-box-shadow:0 0px 4px red inset;box-shadow:0 0px 4px red inset}
div.error {color:red}
	
section.responsformular { 
position:relative;}

section.rp img {width:100%;}

/* =Media Queries
-------------------------------------------------------------- */

@media all and (min-width: 360px) { 
    section.welcome {
    margin-top: 40%; }
	}
	.endsound audio {
	width: 90%;
	margin-top: 6%;}	
.endsound {
	text-align:center;
    border: 0;
	height: 139px;
	background-image: linear-gradient(to right, rgba(163, 137, 122, 0), rgba(163, 137, 122, 0.75), rgba(163, 137, 122, 0));
	padding: 6% 0 16% 0;}
@media all and (min-width: 480px) { 
.endsound audio {
	width: 90%;
	margin-top: 3%;}
    img.headlg {
      margin: -27% 30%; }
	
	li.icon {
	 margin: 10% 0 0 0;
display: inline-block;
width: 37%; vertical-align: text-top;}	

section.rp img {width:auto;}
	}
	
	
@media all and (min-width: 640px) { 
   

    img.headlg {
    margin: -34% 30%; }
	
	 section.welcome {
	margin: 45% 12% 0 12%; } 
	
	nav.footer ul li { 
	  display:inline-block;
	  padding: 0 1%;}
	  
section.footer img {
    width: 25%; }  
	  
section.bgcate {
		
		margin-bottom: 1%;}	
.endsound {
    padding: 6% 0 12% 0;
	  }
	
}
@media all and (min-width: 725px) {
li.icon {
	 margin: 8% 0 0 0;
     display: inline-block;
     width: 24%;}	
section.fell {
	background:url(../images/fell.jpg);
	background-repeat: no-repeat;
	padding: 3% 2%;
    text-align: right;
    margin-top: -1%;}
	
section.footer img {
    margin: 2%;
    width: 15%; }
		
	}	
	@media all and (min-width: 768px) {
.endsound audio {
	width: 15%;
	margin-top: 1%;}		
article.poem {
			text-align: center;
            padding:inherit;
			width:40%;
			float:left;
			margin-top:4%;}
			
section.boxpoem {
			display:inline-block;
			width:100%;
			overflow:hidden;
			background-color:#a3897a;
			}
		
		article.trph img {
			width:59%;
			float:right;}
		
	}
@media all and (min-width: 820px) { 
	.endsound {padding:3% 0 6% 0;}

}
	
	@media all and (min-width: 960px) {
		.endsound {padding:1% 0 8% 0;}
		.endsound audio {margin-top:0;}
		section.boxpoem {margin-top: 5%;}
	
		article.poem p {
    color: #fff;
    line-height: 1.6em; }
	
	section.footer img {
    width: 10%; }
	
	 }
@media all and (min-width: 1024px) {	
    section.welcome { 
    margin: 48% 25% 0 25%;}
  	
	ul.categories { margin:0 10%;}
	ul.undercategories { margin:0 10%;}
	
	section.fell {
    padding: 8% 2% 2% 28%;}
	
	section.footer img {
    width: 10%; }
	
	 }
@media all and (min-width: 1150px) { 
	.endsound audio {margin-top: 0;}

}
	
	
	@media all and (min-width: 1280px) {	
	
	        article.poem { 
			margin-top:7%;}
			
	article.poem p {
    color: #fff;
    line-height: 1.8em;
	}
	section.footer img {
    width: 7%;}
	
	}
@media all and (min-width: 1400px) {
	.endsound {height:180px;}

}
	@media all and (min-width: 1680px) {	
section.welcome { 
    margin: 50% 17% 0 17%;}
    }
	
	@media all and (max-width: 900px) {

  #nav-trigger {
    display: block; }

  nav#nav-main {
    display: none; }

  nav#nav-mobile {
    display: block; }
}