/************
 * General *
************/

* {
    margin: 0;
    border: 0 none;
    padding: 0;
    text-decoration: none;
    color: #222;
    outline: none;
    font-family: 'Open Sans', sans-serif;

}

/* lightboxbefehle */

ul.lightbox li {    
	overflow: hidden;   
	position: absolute; 
	width: 0;    		
	height: 0;   		
	left: 0;     		
	top: 0;     		
	opacity: 0;			
}

ul.lightbox li:target {
	width: 100%;
	height: 100%;
	opacity: 1; 						
	background: rgba(0, 0, 0, 0.8);		
	-moz-transition: opacity 1.5s;    	
	-o-transition: opacity 1.5s;    	
	-webkit-transition: opacity 1.5s;  	

}

ul.lightbox li:target a {
	position: absolute;
	 width: 75%;
         left: auto;						
	margin: 5% 0% 0% 13%; 				
	border:10px solid #fff;			
	-moz-box-shadow: 0 1px 8px #000000;	
	-o-box-shadow: 0 1px 8px #000000;	
	-webkit-box-shadow: 0 1px 8px #000000; 
	box-shadow: 0 1px 8px #000000;
	
}


/* Fotozoom logo*/

.image1 {
      transition: transform 0.2s;
      width: 35%;
}

.image1:hover {
      transform: scale(1.3, 1.3); 

 }


/* Fotozoom */

.image {
      transition: transform 0,7s;
      width: 30%;
      border: 4px solid transparent;
      border-radius: 20px;
      background: repeating-linear-gradient(190deg, rgba(255,150,0, 0.5) 120px, rgba(255,20,0, 0.5) 160px, rgba(255,180,0, 0.5) 300px); repeating-linear-gradient(-190deg, rgba(255,100,0, 0.5) 30px, rgba(255,0,0, 0.5) 60px, rgba(255,50,0, 0.5) 230px);
      background-size: 50% 50%;
      animation: borderAnimation 10s alternate infinite;
}

.image:hover {
      transform: scale(2.0, 2.0); 

 }

    </style>
  

.container {
    max-width: 900px;

}


img:{
       width: 35%;
       height: auto;

 }

.shadow { 
  font-size: 2em;
  animation: textshadow 12s infinite alternate; 
}


.container img {
    max-width: 100%;

}

.yellowBackground {
    background-color: #518225;
}

.greenBackground {
    background-color: #518232;

}

.blueBackground {
    background-color: #5382c8;

}

.blueBackground *, .greenBackground * {
    color: #f8f8f8;

}

.tgBackground {
    background-color: #FFFFCC;
} 

.sketchBackground {
    background: url("../img/1background.png") center top no-repeat;
    background-size: 100%;
}

.separated {
    margin-top: 50px;
    margin-bottom: 50px;
}

.topSeparated {
    margin-top: 10px;
}

.leftIndent {
    padding-left: 30px;
}

.smallText {
    font-size: 10pt;
}

.boldText {
    font-weight: bold;
}

body {
    min-width: 320px; 
    max-width: 900px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    background: linear-gradient(to bottom, #FFFFCC, #8ebf42);

}
/***********
 * Header *
***********/

header {
    line-height: 60px;
    font-size: 18pt;
    text-align: center;
  
}

nav a {
position: sticky;
        display: inline-block;
        padding: 0 20px 10px;
	

}

nav a.active {
    color: #a00;
}

/************
 * Content *
************/

h1, h2, h3, h4, h5, h6, p, li {
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
}

h1 {
    font-size: 20pt;
 
}

p, li {
    font-size: 9pt;
}

ul {
    padding: 10px 0 10px 30px;
}

section {
    padding: 10px;
}

section a {
    color: #5382c8;
}

article {
    padding: 10px 15px;

}

div.galleryPictureContainer {
    margin: 10px 0 20px;
}

div.galleryPictureContainer h2 {
    margin-bottom: 10px;
}

div.galleryPicture {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin-right: 10px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

}

div.galleryPicture.buch_buecherwurm.pic1 {
    background-image: url("..img/small/pergola/1.jpg" alt="model");
     width: 100%;
    height: auto;
}

div.galleryPicture.buch_buecherwurm.pic2 {
    background-image: url("../img/small/buch_buecherwurm/2.jpg");
}

div.galleryPicture.buch_buecherwurm.pic3 {
    background-image: url("../img/small/buch_buecherwurm/3.jpg");
}

div.galleryPicture.buch_die_unendliche_geschichte.pic1 {
    background-image: url("../img/small/buch_die_unendliche_geschichte/1.jpg");
}

div.galleryPicture.buch_die_unendliche_geschichte.pic2 {
    background-image: url("../img/small/buch_die_unendliche_geschichte/2.jpg");
}

div.galleryPicture.holz_und_licht.pic1 {
    background-image: url("../img/small/holz_und_licht/1.jpg");
}

div.galleryPicture.holz_und_licht.pic2 {
    background-image: url("../img/small/holz_und_licht/2.jpg");
}

div.galleryPicture.holz_und_licht.pic3 {
    background-image: url("../img/small/holz_und_licht/3.jpg");
}

div.galleryPicture.holz_und_licht.pic4 {
    background-image: url("../img/small/holz_und_licht/4.jpg");
}

div.galleryPicture.klabautermann.pic1 {
    background-image: url("../img/small/klabautermann/1.jpg");
}

div.galleryPicture.totem.pic1 {
    background-image: url("../img/small/totem/1.jpg");
}

div.galleryPicture.totem.pic2 {
    background-image: url("../img/small/totem/2.jpg");
}

div.galleryPicture.werbetafeln.pic1 {
    background-image: url("../img/small/werbetafeln/1.jpg");
}

div.galleryPicture.werbetafeln.pic2 {
    background-image: url("../img/small/werbetafeln/2.jpg");
}

div.galleryPicture.werbetafeln.pic3 {
    background-image: url("../img/small/werbetafeln/3.jpg");
}

div.galleryPicture.werbetafeln.pic4 {
    background-image: url("../img/small/werbetafeln/4.jpg");
}

div.galleryPicture.spielpferd.pic1 {
    background-image: url("../img/small/spielpferd/1.jpg");
}

div.galleryPicture.glubschaugenvogel.pic1 {
    background-image: url("../img/small/glubschaugenvogel/1.jpg");
}

div.galleryPicture.eule.pic1 {
    background-image: url("../img/small/eule/1.jpg");
}

div.galleryPicture.eule.pic2 {
    background-image: url("../img/small/eule/2.jpg");
}

div.galleryPicture.eule.pic3 {
    background-image: url("../img/small/eule/3.jpg");
}

div.galleryPicture.eule.pic4 {
    background-image: url("../img/small/eule/4.jpg");
}

div.galleryPicture.koi.pic1 {
    background-image: url("../img/small/koi/1.jpg");
}

div.galleryPicture.koi.pic2 {
    background-image: url("../img/small/koi/2.jpg");
}

div.galleryPicture.koi.pic3 {
    background-image: url("../img/small/koi/3.jpg");
}

div.galleryPicture.regenwurmschlange.pic1 {
    background-image: url("../img/small/regenwurmschlange/1.jpg");
}

div.galleryPicture.regenwurmschlange.pic2 {
    background-image: url("../img/small/regenwurmschlange/2.jpg");
}

div.galleryPicture.peperoniglastisch.pic1 {
    background-image: url("../img/small/peperoniglastisch/1.jpg");
}

div.galleryPicture.peperoniglastisch.pic2 {
    background-image: url("../img/small/peperoniglastisch/2.jpg");
}

/***********
 * Footer *
***********/

footer {
    line-height: 20px;
    text-align: center;
    font-size: 11pt;
    padding: 20px 0;
}

footer a {
    display: inline-block;
    padding: 5px;
}

footer a.active {
    color: #a00;
}

/************************
 * Responsive settings *
************************/

@media all and (max-width: 743px) {
    header {
        font-size: 16pt;
        line-height: 30px;
        padding-bottom: 10px;
    }

    nav a {
        padding: 0 5px;
    }
}

@media all and (max-width: 540px) {
    header {
        font-size: 14pt;
    }
}

@media all and (max-width: 472px) {
    header {
        font-size: 12pt;
    }
}

@media all and (max-width: 418px) {
    header, footer {
        font-size: 10pt;
    }
}

@media all and (max-width: 345px) {
    header, footer {
        font-size: 9pt;
    }
}
@keyframes textshadow { 
	0%   { text-shadow: 1px 1px 0px #333 }
	10%   { text-shadow: 3px 3px 2px #333 }
	20%  { text-shadow: 9px 10px 6px #999 }
	40%  { text-shadow: 10px 15px 6px #ccc }
	60%  { text-shadow: 0px 10px 4px #ccc }
	80%  { text-shadow: -10px 8px 3px #ccc }
	100%  { text-shadow: 1px 5px 1px #eee }
    
}
@keyframes borderAnimation {
0% {
    filter: hue-rotate(0);
    background-position:10% 0%;
    background-size: 100% 100%;
    border-radius: 0px;
 }
 

  100% {
    filter: hue-rotate(360deg) 
     background-position:100% 0%;
     background-size: 500% 500%;
     border-radius: 10px;
}
  @keyframes slide {

      0% {background-position:0 0;}
      16.66% {background-position:0 0;}
      33.32% {background-position:-800px 0;}
      49.98% {background-position:-800px 0;}
      66.64% {background-position:-1600px 0;}
      83.30% {background-position:-1600px 0;}
      100% {background-position:0 0;}
  }
}