/* ----------------------------------------------------------------------------------------------------

Copyright 2016 Alle Rechte vorbehalten (©) DOGENDORF ® 
Markennamen:           DOGENDORF ®
Author:                Walter Dogendorf
URL:                   https://dogendorf.de  
Version:               2.0.1/Gelb
Time:                  14:45
Date:                  15.04.2017
Die Hinweise!          "(©) DOGENDORF ®" im Quelltext, dürfen nicht entfernt werden.
        
Beachten Sie bei dem Umgang, mit den ihnen durch unsere zur Verfügung gestellte/n Vorlage/n dass sämtliche Daten und Grafiken dem Copyright unterligen.
Das Kopieren im Ganzen oder in Teilen ohne unsere vorherige ausdrückliche schriftliche Zustimmung ist untersagt. Jegliche Zuwiderhandlungen werden juristisch verfolgt.

--------------------------------------------------------------------------------------------------- */
.cap-box-poza {
padding:0 auto;
height: 625px;
margin-top:25px;
background: transparent!important;
}
.dogendorf-poza {
padding:0px !important;
}
#poza-mica {
overflow: scroll;
overflow-y:hidden;
}
.mic {
z-index: 1;
width: 95px;
height: 80px;
top: 530px;
margin-top: 5px;
margin-right: 5px;
line-height: 110px;
background:transparent;
text-align: center;
border: 1px solid #888888;
border-radius: 0 !important;
position: relative;
overflow: hidden;
cursor: pointer;
display: inline-block;
text-transform: uppercase;
vertical-align:bottom; 
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-box-shadow: 3px 3px 5px 0px #000;
-moz-box-shadow: 3px 3px 5px 0px #000);
box-shadow: 3px 3px 5px 0px #000;
}
.mic img {
max-width: 100%;
max-height: 100%;
padding: 3px 3px 3px 3px;
width: auto;
height: auto;
}
.mic:hover {
z-index:2;
-webkit-transform:scale(0.9);
transform:scale(0.9);
}
.mic:hover ~ #mare_unu { 
display:none; 
}
#mic_1 {
border-top:1px solid #888888;
border-left:1px solid #888888;
border-right:1px solid #888888;
border-bottom:1px solid #888888;
}
#mic_1:hover ~ #mare_1 { 
display:table; 
}
#mic_2:hover ~ #mare_2 { 
display:table; 
}
#mic_3:hover ~ #mare_3 { 
display:table; 
}
#mic_4:hover ~ #mare_4 { 
display:table; 
}
#mic_5:hover ~ #mare_5 { 
display:table; 
}
#mic_6:hover ~ #mare_6 { 
display:table; 
}
#mic_7:hover ~ #mare_7 { 
display:table; 
}
#mic_8:hover ~ #mare_8 { 
display:table; 
}
#mic_9:hover ~ #mare_9 { 
display:table; 
}
#mic_10:hover ~ #mare_10 { 
display:table; 
}
.mare {
width:98%;
height:550px;
margin-top: 5px;
padding-top: 8px!important;
padding-left: 8px!important;
padding-right: 8px!important;
bottom:113px;
position:relative;
display: none;
}
.mare div {
max-width: 100%;
max-height: 100%; 
background:transparent;
border:0px solid #E9E9E9;
display:table-cell;
vertical-align:middle;
text-align: center;
}
.mare img {
max-width: 550px;
max-height: 500px;
vertical-align: middle;
text-align: center;
border:1px solid #888888;
}
#mare_unu {
margin-top: 5px;
padding-top: 8px!important;
padding-left: 8px!important;
padding-right: 8px!important;
display:table; 
text-align:center;
}
@media screen and (max-width: 1280px) {
.cap-box-poza {
padding:0 auto;
height: 530px!important;
}
.mare {
height:420px!important;
bottom:80px!important;
}
.mare img {
max-width: 500px!important;
max-height: 400px!important;
}
.mic {
height: 80px!important;
line-height: 80px!important;
width: 105px!important;
top:430px!important;
}
}
@media screen and (max-width: 980px) {
.cap-box-poza {
padding:0 auto;
height: 530px!important;
}
.mare {
height:420px!important;
bottom:80px!important;
}
.mare img {
max-width: 500px!important;
max-height: 400px!important;
}
.mic {
height: 80px!important;
line-height: 80px!important;
width: 105px!important;
top:430px!important;
}
}
@media screen and (max-width: 768px) {
.cap-box-poza {
padding:0 auto;
height: 530px!important;
}
.mare {
height:420px!important;
bottom:80px!important;
}
.mare img {
max-width: 500px!important;
max-height: 400px!important;
}
.mic {
height: 80px!important;
line-height: 80px!important;
width: 105px!important;
top:430px!important;
}
}
@media screen and (max-width: 600px) {
.cap-box-poza {
padding:0 auto;
height: 420px!important;
}
.mare {
height:350px!important;
bottom:60px!important;
}
.mare img {
max-width: 345px !important;
max-height: 320px !important;
}
.mic {
height: 50px!important;
line-height: 50px!important;
width: 63px!important;
top:350px!important;
}
}
@media screen and (max-width: 414px) {
.cap-box-poza {
padding:0 auto;
height: 305px!important;
}
.mare {
height:250px!important;
bottom:45px!important;
}
.mare img {
max-width: 250px !important;
max-height: 240px !important;
}
.mic {
height: 38px!important;
line-height: 38px!important;
width: 47px!important;
top:250px!important;
}
}
@media screen and (max-width: 320px) {
.cap-box-poza {
padding:0 auto;
height: 290px!important;
}
.mare {
height:240px!important;
bottom:35px!important;
}
.mare img {
max-width: 240px !important;
max-height: 230px !important;
}
.mic {
height: 30px!important;
line-height: 30px!important;
width: 40px!important;
top:245px!important;
}
}