@charset "utf-8";
/* CSS Document */

*{box-sizing:border-box;
margin:0;padding:0;scrollbar-width:thin;
-webkit-tap-highlight-color: transparent;
}

html{

background:#222222;	

}

html,body{
width: 100%;
height: auto	
}

body.focused{
background: #000;
overflow-y:hidden	
}

body.focused .scrollToTop{display:none}

section
{
width:max-content;
max-width:100%;
text-align: justify;
padding	:20px;
cursor: default;
text-align-last: center;
}

section span{
display:inline-block;
position:relative;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
max-width:24%;
height:auto;
margin-bottom:20px;
cursor:pointer;
overflow: hidden;
max-height: 220px;
vertical-align: top;
}

section span > span{
position:fixed;
top:0;
bottom:0;
margin:auto	;
width: 80px;
height: 80px;
color:#FFF;
font-size: 24px;
background-color: rgba(0,0,0,.6);
border-radius:50%;
cursor:pointer;
z-index:9;
display:none;
}

section span i{
position:absolute;
height:max-content;
width:max-content;
top:0;
bottom:0;
left:0;
right:0;
margin:auto	;

}

section span .prev{
left:50px
}
section span .next{
right: 50px;	
}

section div img{
max-width: 100%;
max-height: 100%;}



.exit_btn {
  display: block;
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  box-shadow: 0 2px 3px rgba(0,0,0,0.27);
  border-radius: 50px;
  z-index: 6;
  cursor: pointer;
}

.exit_btn i {
  display: block;
  width: max-content;
  height: max-content;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  color: #FFF;
  text-shadow: 0 2px 3px rgba(0,0,0,0.27);
}

.scrollToTop {
  cursor: pointer;
  z-index: 2;
  position: fixed;
  display: block;
  bottom: 20px;
  left: 25px;
  border-radius: 2px;
  color: white;
  width: 50px;
  height: 50px;
  font-size: 18px;
  padding: 16px 0;
  text-align: center;
  background-color: rgba(0,0,0,.6);
}

.zoomed{
trasform:scale(1);
transition: all .5s ease, -webkit-transform .5s ease;
z-index: 2;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: max-content;
width: max-content;	
max-width: 75%;
max-height: 95vh;
}

.zoomed > img {
  width: auto;
  max-height: 95vh;}
  
  .shadowed{
	opacity:.08 ;
  }
  
  .pic.zoomed{width: auto;}
  
  .pic.zoomed > span{
	display:block;  
  }

.count,.close{
position: fixed;
color: #fff;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.47);
font-weight: bold;
font-family: Roboto;
display:none;
z-index:99
}

.count{ bottom: 26px;left: 30px;}
.close { top: 26px; right: 20px;padding: 8px 14px;}

.close:hover,.close:active {background:red;}
.close:active{top:29px}

.close i{position: relative;}
 .pic.zoomed > .count,
 .pic.zoomed > .close
 {
	display:block 
 }

@media only screen and (max-width: 1290px)
{

section span{
max-width:32%;
height:auto;	
}


.zoomed{
max-width: 92%;	
}


}

@media only screen and (max-width: 960px)
{
section span{
max-width:49%;
height:auto;
margin-bottom: 12px;	
}

section span > span
{
width: 60px;
height: 60px;	
}

	
	
}

@media only screen and (max-width: 550px)
{
section{text-align:center;padding: 20px 5px;}

section span{
max-width:95%;
height:auto;
margin-bottom: 15px;	
}

section span > span
{
width: 50px;
height: 50px;	
}	
section span .prev {
  left: 22px;
}

section span .next {
  right: 22px;
}

.zoomed > img { max-height: 84vh!important;}
	
}