/* CSS Document  Index.php */
@media  { 

.fotodetails {
	
width:100%;
height:100%;
padding:0;
border:0px;
outline:0;
max-width:100%;
max-height:100%;

}

.fotodetails::backdrop {
padding:0px;
background: rgb(0 0 0 / 90%);
border: 0px;
outline:0px;
margin:0px;
}


.fotodetails__pan {
	
display:flex;
align-items:center;
height:100%;
width:100%;
box-sizing:border-box;
overflow:hidden;
	
}
.fotodetails__pan__big {

box-sizing: border-box;	
margin:0;
flex:1 1;
min-width:300px;
position:relative;
width:100%;
height:100%;
border-radius:5px;
}

.fotodetails__pan__big__img {
margin:auto;
height: 100%; 
object-fit: contain;
width:100%;
opacity:0;
transition:opacity 0.3s ;
border-radius:inherit;
}
.fotodetails__pan__big__loadimg {	
position:absolute;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
 }
 .fotodetails__pan__big__video {	
height: 100%; 
object-fit: contain;
width:100%;
opacity:0;
transition:opacity 0.3s ;
} 
  
.fotodetails__pan__small {
display:flex;
flex-direction:column;
box-sizing: border-box;
padding:1em;
height:100%;
overflow-y: auto;
scrollbar-gutter: stable;
flex-wrap:nowrap;
flex-shrink:0;
}
.fotodetails__pan__small__imgbox {
cursor:pointer;	
position:relative;
box-sizing: border-box;	
}
		
.fotodetails__pan__small__imgbox:last-child {	
margin-bottom:0em;	
}
.fotodetails__pan__small__imgbox_selected {	
outline: 4px solid lightgreen;	
}

.fotodetails__pan__close {

display:flex;
flex-direction:column;	
box-sizing: border-box;		
align-self: start;
flex-shrink:1;
flex-grow:0;
}
.fotodetails__pan__close__button {	
color:red;
padding:0.5em;
cursor:pointer;
font-size:30px; 
}
.fotodetails__pan__close__button:hover{
 color:black
}
.fotodetails__pan__small__imgbox_videotype::after {
	
position:absolute;
content: "\25BA";
font-size:12px;
color:white;
background:red;
border-radius:3px;
width:20px;
height:12px;
line-height:12px;
padding:0.2em;
text-align:center;
vertical-align:center;
top:13px;
left: 30px;
margin-left: -17px;
margin-bottom:-10px;
 
}

}

@media  all and (min-width: 950px) and (orientation: landscape) {
	
.fotodetails__pan__small__imgbox {
 padding:5px;
}	
.fotodetails__pan__small__imgbox__img {
max-height:133px;
width:133px;
border-radius:3px;
}	
	
.fotodetails__pan {
flex-direction:row;
}
	
.fotodetails__pan__small {
padding:1em 1em 1em 1em;
height:100%;
overflow-y: auto;
}
	
.fotodetails__pan__big {	
height:100%;	
padding:0 1em;	
}
		
}	
	

@media  all and (max-width: 950px) and (orientation: portrait) {	
.fotodetails__pan__small {		
order:2; 
height:auto;
min-height:130px;
flex-direction:row;
overflow-x:auto;
flex:0 0 auto;
width:100%;
padding:2px;
}
	
.fotodetails__pan__close {	
order:0;
align-self: end;
display:flex;
flex-direction:row;
justify-content:end;		
}
.fotodetails__pan__big {order:1;height:0;padding: 1em 0;	}
.fotodetails__pan { flex-direction:column;}
.fotodetails__pan__small__imgbox__img {	
height:100px;
max-width:133px;
border-radius:2px;
margin-right:0.5em;
}
.fotodetails__pan__small__imgbox {
 padding:3px;
}	
}