/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 09.11.2017, 21:11:26
    Author     : karsten
*/

div.gallery  {
    width: 790px;
    margin: 10px auto;
    /*text-align: center;*/
}
@media (max-width:1279px) {
    div.gallery  {
        width: 500px;
    }
}
@media (max-width:829px) {
    div.gallery  {
        width: 300px;
    }
}
 
ul.bildergalerie {
     margin: 10px 0 0 0;
     padding-left: 0px;
}
ul.bildergalerie  li {
     position: relative;
     display: inline-block;
     list-style: none;
     line-height: 0;
     padding-right: 1px;
     padding-bottom: 1px;
}
ul.bildergalerie  li img.landscape {
     width: 199px;
     height: auto;
     cursor: pointer;
}
ul.bildergalerie  li img.portrait {
     width: auto;
     height: 132px;
     cursor: pointer;
}
input[type=checkbox] {
     display: none;
}
 
input[type=checkbox]:checked ~ label img.landscape {
     position: fixed;
     width: 900px;
     height: 596px;
     top: 50%;
     left: 50%;
     margin-top: -298px;
     margin-left: -450px;
     box-shadow: 0 0 20px #888;
     z-index: 2;
}
input[type=checkbox]:checked ~ label img.portrait {
     position: fixed;
     width: 596px;
     height: 900px;
     top: 50%;
     left: 50%;
     margin-top: -450px;
     margin-left: -298px;
     box-shadow: 0 0 20px #888;
     z-index: 2;
}

.overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: none;
     background: rgba(255,255,255,.8);
     z-index: 1;
}

ul.bildergalerie:hover li {
     -webkit-transition: all .2s ease-in-out;
     -moz-transition: all .2s ease-in-out;
     -o-transition: all .2s ease-in-out;
     -ms-transition: all .2s ease-in-out;
     transition: all .2s ease-in-out;
     opacity: .5;
}
 
ul.bildergalerie:hover li:hover {
     opacity: 1;
}