@charset "utf-8";
.noScrolling{overflow:hidden;}
.album{width:100%;font-family:'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;float:left;}
.album li{float:left;margin:5px;position:relative;}
.album li>a img{display:block;padding:1px;position:relative;background:white;}
.album li>a .hf{height:150px;}
.album li>a .qf{height:150px;}
.album li>a span{position:absolute;height:150px;top:1px;left:1px;right:1px;text-align:center;line-height:150px;color:rgba(27,54,81,.8);text-shadow:0 1px 1px rgba(255,255,255,.6);opacity:0;background:lightgray;-ms-transition:opacity .3s linear;transition:opacity .3s linear;}
.album li>a span.zweizeilig{height:100px;line-height:24px;padding-top:50px;}
.album li>a:hover span{opacity:.8;}
.preview{height:80px;position:fixed;left:80px;bottom:0;right:80px;z-index:20;overflow:hidden;transition:height .5s linear;}
.preview ul{position:absolute;left:0;transition:left .5s;}
.preview li{float:left;}
.preview li img{display:block;padding:0;border-radius:4px;height:80px;}
#prevbuttonleft,#prevbuttonright{position:fixed;bottom:0;width:30px;z-index:20;line-height:80px;margin:0;font-size:36px;cursor:default;}
.previewButton{height:80px;transition:height .5s linear;color:dimgrey;}
#prevbuttonleft{left:21px;padding:0;padding-left:20px;}
#prevbuttonright{text-align:right;right:30px;padding:0;padding-right:17px;}
#prevbuttonleft.btnActive,#prevbuttonright.btnActive,.thumb{cursor:pointer;}
.btnActive:hover{color:orange;}
.slide{width:0;height:0;position:fixed;overflow:hidden;left:0;top:0;padding:0;z-index:10;color:lightgrey;text-align:center;background-color:black;opacity:0;-ms-transition:opacity 1s ease;transition:opacity 1s ease;}
.slide div h3,.slide div p{width:0;height:0;opacity:0;-ms-transition:opacity .3s linear 1.2s;transition:opacity .3s linear 1.2s;}
.slide div h3{font-size:25px;float:left;text-align:right;border-right:1px solid lightgrey;}
.slide div p{font-size:16px;font-family:Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;font-style:italic;text-align:left;float:left;margin-top:26px;}
.slide a.slide-close{z-index:1001;color:#fff;position:absolute;top:43px;left:50%;font-size:15px;line-height:26px;text-align:center;width:50px;height:23px;overflow:hidden;margin-left:-25px;opacity:0;box-shadow:0 1px 2px rgba(0,0,0,.3);-ms-transition:opacity .3s linear 1.2s;transition:opacity .3s linear 1.2s;}
.slide img{max-height:100%;max-width:100%;position:relative;-webkit-box-shadow:1px 1px 4px rgba(0,0,0,.3);box-shadow:0 2px 7px rgba(0,0,0,.2);}
.slide:target{width:auto;height:auto;bottom:0;right:0;padding:80px 100px 120px 100px;opacity:1;}
.slide:target div h3,.slide:target div p{opacity:1;padding:0 20px;width:270px;height:60px;}
.slide:target img{-webkit-animation:fadeInScale 1.2s ease-in-out;-moz-animation:fadeInScale 1.2s ease-in-out;-o-animation:fadeInScale 1.2s ease-in-out;-ms-animation:fadeInScale 1.2s ease-in-out;animation:fadeInScale 1.2s ease-in-out;}
.slide:target a.slide-close,.slide:target>div{opacity:1;}
.thumb{filter:saturate(20%) brightness(80%) opacity(70%);}
.thumbActive{filter:saturate(80%);}
div.fade img{animation:fadeInScale 1.2s ease-in-out;}
@keyframes fadeInScale{0%{transform:scale(.6);opacity:0;}
100%{transform:scale(1);opacity:1;}}
div.slidein,div.slideout{width:auto;height:auto;left:80px;bottom:100px;right:80px;padding:60px 80px 120px 80px;}
div.slidein{opacity:1;}
div.slideout{opacity:0;z-index:10;}
.slidein div h3,.slidein div p,.slideout div h3,.slideout div p{padding:0 20px;width:270px;height:50px;transition:opacity 1s linear;}
.slidein div h3,.slidein div p{opacity:1;}
.slideout div h3,.slideout div p{opacity:0;}
.slide div{position:absolute;}
.control{position:fixed;left:80px;bottom:80px;right:80px;height:40px;z-index:20;transition:bottom .5s linear;background-color:black;}
.control .btn{font-size:36px;position:absolute;font-weight:bold;cursor:pointer;z-index:2000;color:dimgrey;}
.control .btn:link,.control .btn:visited{color:dimgrey;}
.control .btn:hover{color:orange;}
.control #btnPrev,.control #btnNext{margin-top:-3px;font-weight:normal;font-size:32px;}

#btnClose .slide-close{font-size:30px;margin-top:3px;}
#btnCaption{right:170px;}
#btnPreview{right:110px;}
#btnPrev{right:24px;}
#btnNext{right:0;}
#iconCaption,#iconPreview{font-size:24px;padding-top:6px;position:absolute;cursor:default;color:dimgrey;}
#iconCaption{right:170px;font-size:24px;}
#iconPreview{right:110px;font-size:21px;margin-top:2px;}
.viewableOverlay{position:fixed;top:0;left:0;right:0;bottom:-300px;overflow:hidden;opacity:1;background-color:black;z-index:5;}
.hiddenOverlay,.hiddenControl{width:0;height:0;position:fixed;top:0;left:0;overflow:hidden;opacity:.3;border:none;background-color:#4AB;}
.slide-close-hidden{display:none;}
.invisible{display:none;}
.previewHeight{height:0;}
.controlBottom{bottom:0;}
div.slide.slideBottom{bottom:20px;}
.slideFadeBottom{transition:bottom .5s linear;}
div.slidePadding{padding:50px 70px 60px 70px;}
.slideFadePadding{transition:padding .5s linear;}
@media (max-width: 900px){.slidein div h3,.slideout div h3{padding-left:60px;padding-right:20px;width:230px;height:50px;}
.slidein div p,.slideout div p{width:260px;height:50px;}
.caption{margin-left:-69px;}
.slide div h3{font-size:21px;}
.slide div p{font-size:14px;}
div.slidein,div.slideout{padding:60px 0 120px 0;}
.album li>a .hf{height:130px;}
.album li>a .qf{height:130px;}
.album li>a span{height:130px;line-height:130px;font-size:14px;}
.album li>a span.zweizeilig{height:90px;line-height:24px;padding-top:40px;}}
@media (max-width: 704px){.control{transition:initial;}}
@media (max-width: 700px){.album li>a .hf{height:100px;}
.album li>a .qf{height:100px;}
.album li>a span{height:100px;line-height:100px;font-size:11px;}
.album li>a span.zweizeilig{height:66px;line-height:17px;padding-top:34px;}
.album li>a img{}
div.slidein,div.slideout{left:0;right:0;padding:20px 0 0 0;}
.caption{display:none;}
.control{bottom:6px;}
.control #btnPrev,.control #btnNext{margin-top:0;}
#iconCaption{display:none;}
#btnCaption{display:none;}
#iconPreview{display:none;}
#btnPreview{display:none;}
.preview{height:0;}
.album .thumbAccess{display:initial;}
#prevbuttonleft{display:none;}
#prevbuttonright{display:none;}}
@media (max-width: 500px){.album li>a .hf{height:70px;}
.album li>a .qf{height:70px;}
.album li>a span{height:70px;line-height:70px;}
.album li>a:hover span{opacity:0;}
.album li>a img{}}
@keyframes fadeInScale{0%{transform:scale(.6);opacity:0;}
100%{transform:scale(1);opacity:1;}}