charset "utf-8";
/* CSS Document für Gallery*/

body{font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;background-color:#F0E9D5;
}

h1 {float:left; margin-left: 15%; margin-top: 3%;max-width: 40%; height: auto; color:#b30000;font-size: 200%;}

#gallery{max-width: 80%; height: auto; float:left; margin-left:10%; margin-top:2%; margin-bottom:2%;overflow: auto;
}

img {
width: 80%;margin-left:10%;margin-top:5%;
height: auto;

-webkit-transition: ease-in-out 0.9s all !important;
-moz-transition: ease-in-out 0.9s all !important;
-ms-transition: ease-in-out 0.9s all !important;
-o-transition: ease-in-out 0.9s all !important;
transition: ease-in-out 0.9s all !important;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-ms-border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px5px 5px;
border-radius: 5px 5px 5px 5px;
border: 2 px dotted #a78d51; }

img:hover {
-webkit-transform: scale( 1.24 1.30 );
-moz-transform: scale( 1.24, 1.30 );
-ms-transform: scale( 1.24, 1.30 );
-o-transform: scale( 1.24, 1.30 );
transform: scale( 1.24, 1.30 );
background-color: #a78d51; }


#gallery a{float:left; width: 30%; height: auto; padding-bottom: 5%;color:#b30000;font-size: 200%;}





@media screen and (max-width:599px){
h1 {float:left; margin-left: 3%; margin-top: 3%;max-width: 60%; height: auto; color:#b30000;font-size: 150%;}
    
#gallery{width: 98%; height: auto; float:left; margin-left:1%;overflow:auto;} 
    
img {
width: 100%;margin-top:5%;
    height: auto;}

    
    
#gallery a{float:left; width: 60%; height: auto; padding-bottom: 3%;color:#b30000;font-size: 100%;padding-top: 2%;}
    
}



@media screen and (min-width: 600px){
#gallery{max-width: 70%; height: auto; float:left; margin-left: 15%; margin-top:2%; margin-bottom:2%;overflow:auto;}      
    
    
#gallery a{float:left; width: 30%; height: auto; padding-bottom: 3%;color:#b30000;font-size: 150%;}    
}