/* 
Copyright 2016 Alle Rechte vorbehalten (©) DOGENDORF ® 
Markennamen:           DOGENDORF ® 
Author:                Walter Dogendorf
URL:                   https://dogendorf.de  
Version:               1.0.0
Time:                  14:41
Date:                  28.12.2016
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: 862px;
margin-top:0px;
background: #FFFFFF;
}
.dogendorf-poza {
padding:0px !important;
}
#poza-mica {
overflow: scroll;
overflow-y:hidden;
}
.mic {
z-index: 1;
width: 120px;
height: 105px;
top: 615px;
margin-top: 5px;
margin-right: 5px;
line-height: 110px;
background: #FFF;
text-align: center;
border: 1px solid #E9E9E9;
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 rgba(176,174,176,1);
-moz-box-shadow: 3px 3px 5px 0px rgba(176,174,176,1);
box-shadow: 3px 3px 5px 0px rgba(176,174,176,1);
}
.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 #E9E9E9;
border-left:1px solid #E9E9E9;
border-right:1px solid #E9E9E9;
border-bottom:1px solid #E9E9E9;
}
#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:595px;
margin-top: 5px;
padding-top: 8px!important;
padding-left: 8px!important;
padding-right: 8px!important;
bottom:220px;
position:relative;
display: none;
}
.mare div {
max-width: 100%;
max-height: 100%; 
background:#FFF;
border:1px solid #E9E9E9;
display:table-cell;
vertical-align:middle;
text-align: center;
}
.mare img {
max-width: 700px;
max-height: 575px;
vertical-align: middle;
text-align: center;
}
#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: 625px!important;
}
.mare {
height:420px!important;
bottom:170px!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: 625px!important;
}
.mare {
height:420px!important;
bottom:170px!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: 625px!important;
}
.mare {
height:420px!important;
bottom:170px!important;
}
.mare img {
max-width: 500px!important;
max-height: 400px!important;
}
.mic {
height: 78px!important;
line-height: 78px!important;
width: 102px!important;
top:430px!important;
}
}
@media screen and (max-width: 600px) {
.cap-box-poza {
padding:0 auto;
height: 485px!important;
}
.mare {
height:350px!important;
bottom:115px!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: 358px!important;
}
.mare {
height:250px!important;
bottom:90px!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: 320px!important;
}
.mare {
height:225px!important;
bottom:75px!important;
}
.mare img {
max-width: 225px !important;
max-height: 210px !important;
}
.mic {
height: 30px!important;
line-height: 30px!important;
width: 40px!important;
top:225px!important;
}
}