@charset "UTF-8";
    
/*RESET==================================*/
    
*{
    padding: 0;
    margin: 0;
    border: none;
    font-size: 100%;
    font-weight: normal;
    list-style-type: none;
    text-decoration:none;
	font-weight:normal;
    }

div.clearer{
    clear: both;
    }

/*SCHRIFTFORMATIERUNG====================*/
h1 { 
    font-family: 'Poiret One','Muli','Questrial';
    font-size: 800%;
    color:#52334e; 
    }

h2{ 
    font-family: 'Poiret One', cursive;
    font-size: 140%;
    color:#52334e;
    line-height: 150%;
    font-weight: lighter;
    margin-left: 3.2em;
    }

h3{
    
}

#einleitung p{
    font-family: 'Muli','Questrial','Poiret One';
    font-size: 80%;
    line-height: 200%;
    color:#52334e;
}

#und_so_gehts p{
    font-family: 'Muli','Questrial','Poiret One';
    font-size: 80%;
    line-height: 180%;
    color: #3f5764;
    padding: 7em 10em;
}

#impressum{
   font-family: 'Muli','Questrial','Poiret One';
    font-size: 85%;
    line-height: 180%;
    color: #3f5764;
    float: left;
    padding: 0 8em 0 5.8em
}


span.kursiv{
    font-family: 'Poiret One', cursive;
    color: #52334e;
    
}

.links_adresse{
    margin-left: 7.5em;
    float: left;
    width: 20%;
    font-family: 'Muli','Poiret One','Questrial';
    font-size: 80%;
    color: #3f5764;
}

.rechts_adresse{
    margin-left: 12em;
    float: left;
    width: 20%;
    font-family: 'Muli','Poiret One','Questrial';
    font-size: 80%;
    color: #3f5764;
}

.ueberschrift_tiere{
    font-family: 'Muli','Poiret One','Questrial';
    font-size: 500%;
    color:#52334e;
    margin-left: 0.37em;
}

article.preise{
    margin: 0 5.5em;
    font-family: 'Muli','Poiret One','Questrial';
    font-size: 80%;
    color:#52334e;
}

figcaption#tiger{
    margin: 1em 30%;
    font-family: 'Muli','Poiret One','Questrial';
    font-size: 80%;
    color:#52334e;
}

figcaption{
    font-family: 'Muli','Poiret One','Questrial';
    font-size: 80%;
    margin: 0.5em;
    color:#52334e;
}


/*Hauptboxen====================*/

body{
    background-image: url(../bilder/hintergrund.jpg);
    background-repeat: no-repeat;/*keine wiederkolung des bildes*/
    background-attachment: fixed;/* bild bleibtan der selben stelle*/
    -webkit-background-size:cover;/* zeigt das bild auf den ganzen hintergrund an in allen browsern*/
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    position: relative;*/
    background-attachment: fixed;
    
    }
 
div.wrapper{
    max-width: 900px;
    min-width: 400px;
    background-color: rgba(255, 255, 255, 0.64);
    height: auto;
    margin:auto;
    /*-webkit-box-shadow: 1px 7px 33px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 7px 33px 0px rgba(0,0,0,0.75);
    -o-box-shadow: 1px 7px 33px 0px rgba(0,0,0,0.75);
    box-shadow: 1px 7px 33px 0px rgba(0,0,0,0.75);*/
}

header{
    width: 92.8%;
    background-color: #f2f1ef;
    padding: 2em;
}

footer{
    width: 100%;
    padding:1em 0 3em 0;
    background-color: rgb(195, 199, 181);
    height: auto;
}


/*NAVIGATION======================================*/


#navi{
    /*position: fixed;*/
    top: 0;
    width: 74.%;
    background-color: rgba(240, 249, 255, 0.7);
    padding:0.5em 0 1em 28em;
    border-top: 1em;
    left: 0; /*kasten fängt ganz links an*/
    margin-bottom: 3em;
   }

nav{
    text-align: center;
    }

nav ul li a{ /*text unterstreichungen weg*/
    list-style-type: none;
    text-decoration: none; 
    margin-left: 1em;
    }

ul li{
    display: inline;/* nebeneinander ausrichten */
    font-size: 1.7em;
    }

ul li a{
    font-size: 55%;
    font-family: 'Roboto Condensed', sans-serif;
}

.hvr-underline-from-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 0.5px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 1em;
  background: #8e7777;
  height: 4px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before {
  right: 0;
}


/*slider====================*/

@-moz-keyframes slide-animation {
	20% { left: 0%; }
	25% { left: -100%; }
	45% { left: -100%; }
	50% { left: -200%; }
	70% { left: -200%; }
	75% { left: -300%; }
	95% { left: -300%; }
    100% { left: -400%; }
	}

@-o-keyframes slide-animation {
	20% { left: 0%; }
	25% { left: -100%; }
	45% { left: -100%; }
	50% { left: -200%; }
	70% { left: -200%; }
	75% { left: -300%; }
	95% { left: -300%; }
    100% { left: -400%; }
	}

@-ms-keyframes slide-animation {
	20% { left: 0%; }
	25% { left: -100%; }
	45% { left: -100%; }
	50% { left: -200%; }
	70% { left: -200%; }
	75% { left: -300%; }
	95% { left: -300%; }
    100% { left: -400%; }
	}

@-webkit-keyframes slide-animation {
	20% { left: 0%; }
	25% { left: -100%; }
	45% { left: -100%; }
	50% { left: -200%; }
	70% { left: -200%; }
	75% { left: -300%; }
	95% { left: -300%; }
    100% { left: -400%; }
}
	

@keyframes slide-animation {
	20% { left: 0%; }
	25% { left: -100%; }
	45% { left: -100%; }
	50% { left: -200%; }
	70% { left: -200%; }
	75% { left: -300%; }
	95% { left: -300%; }
    100% { left: -400%; }
	}


div#slider { 
	position: relative;
	border:0.5em solid #ebf7fa;
	overflow: hidden; /* Sorgt dafür, dass die überstehenden Bilder nicht sichtbar sind */ 
	}

div#slider figure { 
	position:relative;
	width: 500%; 		/* 5 Bilder, die die komplette Wrapperbreite ausfüllen (100%), ergeben eine Gesamtbreite von 500% */
	margin: 0;
	left: 0;
	font-size: 0;
	-moz-animation:slide-animation 30s infinite; /* Animationsdauer insgesamt */
	-o-animation:slide-animation 30s infinite; 
	-webkit-animation:slide-animation 30s infinite;
	animation:slide-animation 30s infinite;
	}


div#slider figure img { 
	width: 20%; 		/* 5 Bilder mal 20% gleich 100% */
	}




/*Start===============================*/

article#start{
    width: 100%;
    background-color: rgba(181, 199, 188, 0.81);
    margin-bottom:3em;
    
}

div#einleitung{
    background-color: hsl(0, 0%, 100%);
    padding: 2em 6em
}



#ueberschrift{
    margin-top: 8em;
    padding: 10%;
    width: 80%; 
    height: 16em;
    
}
/*==============galerie==============*/

#transition:before{
    display: block;
    content: " ";
    width: 100%;
    padding-top: 60%;
    position: relative;
}

#transition {
    position: relative;
    cursor: pointer;
    width: 800px;
    margin: auto;
}



.split-side {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                overflow: hidden;
            }

.split-side.front-picture {
                z-index: 2;
                width: 70%;
                transition: width 0.35s cubic-bezier(0.785, 0.135, 0.150, 0.860);
            }

.split-side.back-picture {
                z-index: 1;
            }

section.galerie{
    background-color: #ebf7fa;
    height:auto;
    padding: 2em 0;
    margin: 4em auto;
}




article#drei{
    width: 100%;
    height:auto;
    background-color:#ebf7fa;   
}

div.grow {
    float: left;
    margin-left: 1.875em;
}

/*==============und so gehts==============*/

section .und{
    margin: -7em 0
}

/*==============preise==============*/

article#preise{
    height: auto;
    background-color: #ebf7fa;
    margin: 10em 0;
    padding: 2em 0;
}



table{
    margin: 2em 4.8em;
    border-collapse: collapse;
}

th{
   padding: 0.2em 0.5em;
}

tbody{
    background-color: #f2f1ef;
}

/*==============Impressum==============*/

section{
    height: auto;
    padding: 4em 0;
    margin: 10em 0 5em 0;
    background-color: #ebf7fa;
}

iframe{
    -webkit-box-shadow: 0px 0px 28px -3px rgba(0,0,0,0.51);
    -moz-box-shadow: 0px 0px 28px -3px rgba(0,0,0,0.51);
    box-shadow: 0px 0px 28px -3px rgba(0,0,0,0.51);
}



article.impressum{
    width: 100%;
    height: auto;
    margin: 5em 0 5em 0s;
}




nav ul li a:link,
nav ul li a:visited {
                                color: #52334e;
                                }
nav ul li a:hover,
nav ul li a:focus,
nav ul li a:active {
                                color: #8e7777;
                                }









@media only screen and (max-width: 500px){
    
#navi{
    /*position: fixed;*/
    top: 0;
    width: 40%;
    background-color: rgba(255, 240, 245, 0.7);
    padding:0.5em 30% 1em 30%;
    border-top: 1em;
    left: 0; /*kasten fängt ganz links an*/
    margin-bottom: 3em;
   }
    
nav{
    text-align: center;
    }

nav ul li a{ /*text unterstreichungen weg*/
    list-style-type: none;
    text-decoration: none; 
    margin-left: 1em;
    }

ul li{
    display: inline;/* nebeneinander ausrichten */
    font-size: 1.7em;
    }

ul li a{
    font-size: 55%;
    font-family: 'Roboto Condensed', sans-serif;
}
  
.hvr-underline-from-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 0.5px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-left:before {
    display: none;
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 1em;
  background: #8e7777;
  height: 4px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before {
  right: 0;
}
    
    
    
    
    
    
    
nav {
	background-color: #ebeae3;
	width: 100%;
	float:none;
	padding-top:0;
	padding-left:0;
	border-top: 5px solid white;
	}

nav ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   }

nav a {
    text-decoration: none;
	padding: 0.8em 1em;
	letter-spacing:3px;
	border-bottom: 5px solid white;
	display: block;
	}

nav a:hover, 
nav a:focus, 
nav a:active {
   background-color: #e3e0cf;
   color: #010101;
   }


    
    
    
h1 { 
    font-family: 'Poiret One','Muli','Questrial';
    font-size: 500%;
    color:#52334e; 
    }

h2{ 
    font-family: 'Poiret One', cursive;
    font-size: 140%;
    color:#52334e;
    line-height: 150%;
    font-weight: lighter;
    margin-left: 3.2em;
    }
    
#transition:before{
    display: none;
    display: block;
    content: " ";
    width: 100%;
    padding-top: 60%;
    position: relative;
}

#transition {
    display: none;
    position: relative;
    cursor: pointer;
    width: 800px;
    margin: auto;
}
    
#und_so_gehts p{
    font-family: 'Muli','Questrial','Poiret One';
    font-size: 90%;
    line-height: 180%;
    color: #3f5764;
    padding: 7em 3em;
}
    
    
.links_adresse{
    margin-left: 4em;
    float: left;
    width: 25%;
    font-family: 'Muli','Poiret One','Questrial';
    font-size: 80%;
    color: #3f5764;
}

.rechts_adresse{
    margin-left: 10em;
    float: left;
    width: 25%;
    font-family: 'Muli','Poiret One','Questrial';
    font-size: 80%;
    color: #3f5764;
}
    
div.grow {
    float: left;
    margin-left: 0;
}    

    
table{
    margin: 2em 0em;
    border-collapse: collapse;
}
    
iframe{
    display: none;
    -webkit-box-shadow: 0px 0px 28px -3px rgba(0,0,0,0.51);
    -moz-box-shadow: 0px 0px 28px -3px rgba(0,0,0,0.51);
    box-shadow: 0px 0px 28px -3px rgba(0,0,0,0.51);
    width: 480px;
    height: 450px;
}
    
    article.impressum{
    width: 100%;
    height: 15em;
    margin: 5em 0 5em 0s;
}
    
section.galerie{
    background-color: #ebf7fa;
    height:auto;
    
    margin:  auto;
}
    
}/*handy zu*/