.adi_gallery{
margin:10px auto;
width:100%;
max-width: 700px;
height:auto;
position:relative;
}


.adi_gallery a{
display:inline-block;
width:200px;
height:141px;
position:relative;
border:2px solid #fff;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
margin: 10px 10px 10px 10px;
}

.adi_gallery a img{
display:block;
max-width: 700px;
width:auto;
height:100%;
-webkit-transition-property:width, height, top, bottom, left, right, z-index;
-webkit-transition-duration:1s;
-moz-transition-property:width, height, top, bottom, left, right, z-index;
-moz-transition-duration:1s;
-o-transition-property:width, height, top, bottom, left, right, z-index;
-o-transition-duration:1s;
transition-property:width, height, top, bottom, left, right, z-index;
transition-duration:1s;
position:absolute;
z-index:1;
top:0px;
left:0px;
cursor:pointer;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;    

/*give the thumbnails a frame*/
background-color:#eee; /*frame colour*/
padding: 6px; /*frame size*/
/*add a drop shadow to the frame*/
-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
box-shadow: 0 0 6px rgba(132, 132, 132, .75);
/*and give the corners a small curve*/
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}


.adi_gallery .closed{
position:absolute;
top:85px;
right:195px;
display:none;
text-align:center;
font-weight:bold;
font-size:70px;
color:#555;
width:20px;
height:20px;
-webkit-text-shadow:0px 0px 5px #fff;
-moz-text-shadow:0px 0px 5px #222;
text-shadow:0px 0px 5px #fff;
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
cursor:pointer;
z-index:1000;
}

.adi_gallery .closed-layer{
display:none;
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:transparent;
z-index:1000;
cursor:pointer;
}

.adi_gallery a:focus~.closed, a:focus~.closed-layer{
display:block;
}


.adi_gallery a:focus{
border:none;
}

.adi_gallery a:focus img{
width:auto;
height:330%;
position:absolute;
box-shadow:0 0 15px 2px #000;
-moz-box-shadow:0 0 15px 2px #000;
-webkit-box-shadow:0 0 15px 2px #000;
-webkit-transition-property:width, height, top, bottom, left, right, z-index;
-webkit-transition-duration:1s;
-moz-transition-property:width, height, top, bottom, left, right, z-index;
-moz-transition-duration:1s;
-o-transition-property:width, height, top, bottom, left, right, z-index;
-o-transition-duration:1s;
transition-property:width, height, top, bottom, left, right, z-index;
transition-duration:1s;
cursor:default;
z-index:25;
}



.adi_gallery a:focus img{
left:-50px;
}

.adi_gallery a:focus:nth-child(n+1) img{
left:-150px;
}

:focus{
outline:none;
}

.adi_gallery a .adi_gallery_title{
font-size:0px;
color: black;
visibility:hidden;
text-align: center;
width:100%;
height:auto;
overflow: hidden;
-webkit-transition-property:, width, height, top, bottom, left, right;
-webkit-transition-duration:1s;
-moz-transition-property:, width, height, top, bottom, left, right;
-moz-transition-duration:1s;
-o-transition-property:, width, height, top, bottom, left, right;
-o-transition-duration:1s;
transition-property:, width, height, top, bottom, left, right;
transition-duration:1s;
position:absolute;
z-index:25;
top:0px;
left:0px;
cursor:pointer;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;    
/*give the thumbnails a frame*/
background-color:#eee; /*frame colour*/
padding: 6px; /*frame size*/
/*add a drop shadow to the frame*/
-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
box-shadow: 0 0 6px rgba(132, 132, 132, .75);
/*and give the corners a small curve*/
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

.adi_gallery a:focus .adi_gallery_title{
font-size:16px;
visibility:visible;
/* Fallback for web browsers that don't support RGBa */
background-color: rgb(255, 255, 255);
/* RGBa with 0.6 opacity */
background-color: rgba(255, 255, 255, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF',EndColorStr='#19000000');
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF',EndColorStr='#19000000')";
text-align: center;
padding: 2px 10px 2px 10px;
width:100%;
height:auto;
position:absolute;
overflow: hidden;
box-shadow:0 0 15px 2px #000;
-moz-box-shadow:0 0 5px 2px #000;
-webkit-box-shadow:0 0 15px 2px #000;
-webkit-transition-property:width, height, top, bottom, left, right;
-webkit-transition-duration:1s;
-moz-transition-property: width, height, top, bottom, left, right;
-moz-transition-duration:1s;
-o-transition-property: width, height, top, bottom, left, right;
-o-transition-duration:1s;
transition-property: width, height, top, bottom, left, right;
transition-duration:1s;
cursor:default;
z-index:25;
}




.adi_gallery a:focus .adi_gallery_title{
left:-50px;
}

.adi_gallery a:focus:nth-child(n+1) .adi_gallery_title{
left:-150px;
}


@media only screen and (min-width: 220px) and (max-width: 767px){
.adi_gallery{
margin:10px auto;
width:100%;
max-width: 380px;
height:auto;
position:relative;
}


.adi_gallery a{
display:inline-block;
width:200px;
height:141px;
position:relative;
border:2px solid #fff;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
margin: 10px 10px 10px 10px;
}

.adi_gallery a img{
display:block;
max-width: 1000px;
width:auto;
height:100%;
-webkit-transition-property:width, height, top, bottom, left, right, z-index;
-webkit-transition-duration:1s;
-moz-transition-property:width, height, top, bottom, left, right, z-index;
-moz-transition-duration:1s;
-o-transition-property:width, height, top, bottom, left, right, z-index;
-o-transition-duration:1s;
transition-property:width, height, top, bottom, left, right, z-index;
transition-duration:1s;
position:absolute;
z-index:1;
top:0px;
left:0px;
cursor:pointer;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;    

/*give the thumbnails a frame*/
background-color:#eee; /*frame colour*/
padding: 6px; /*frame size*/
/*add a drop shadow to the frame*/
-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
box-shadow: 0 0 6px rgba(132, 132, 132, .75);
/*and give the corners a small curve*/
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}


.adi_gallery .closed{
position:absolute;
top:85px;
right:195px;
display:none;
text-align:center;
font-weight:bold;
font-size:70px;
color:#555;
width:20px;
height:20px;
-webkit-text-shadow:0px 0px 5px #fff;
-moz-text-shadow:0px 0px 5px #222;
text-shadow:0px 0px 5px #fff;
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
cursor:pointer;
z-index:1000;
}

.adi_gallery .closed-layer{
display:none;
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:transparent;
z-index:1000;
cursor:pointer;
}

.adi_gallery a:focus~.closed, a:focus~.closed-layer{
display:block;
}


.adi_gallery a:focus{
border:none;
}

.adi_gallery a:focus img{
width:auto;
height:200%;
position:absolute;
box-shadow:0 0 15px 2px #000;
-moz-box-shadow:0 0 15px 2px #000;
-webkit-box-shadow:0 0 15px 2px #000;
-webkit-transition-property:width, height, top, bottom, left, right, z-index;
-webkit-transition-duration:1s;
-moz-transition-property:width, height, top, bottom, left, right, z-index;
-moz-transition-duration:1s;
-o-transition-property:width, height, top, bottom, left, right, z-index;
-o-transition-duration:1s;
transition-property:width, height, top, bottom, left, right, z-index;
transition-duration:1s;
cursor:default;
z-index:25;
}



.adi_gallery a:focus img{
left:-50px;
}

.adi_gallery a:focus:nth-child(n+1) img{
left:-150px;
}


:focus{
outline:none;
}

.adi_gallery a .adi_gallery_title{
font-size:0px;
color: black;
visibility:hidden;
text-align: center;
width:100%;
height:auto;
overflow: hidden;
-webkit-transition-property:, width, height, top, bottom, left, right;
-webkit-transition-duration:1s;
-moz-transition-property:, width, height, top, bottom, left, right;
-moz-transition-duration:1s;
-o-transition-property:, width, height, top, bottom, left, right;
-o-transition-duration:1s;
transition-property:, width, height, top, bottom, left, right;
transition-duration:1s;
position:absolute;
z-index:25;
top:0px;
left:0px;
cursor:pointer;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;    
/*give the thumbnails a frame*/
background-color:#eee; /*frame colour*/
padding: 6px; /*frame size*/
/*add a drop shadow to the frame*/
-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
box-shadow: 0 0 6px rgba(132, 132, 132, .75);
/*and give the corners a small curve*/
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

.adi_gallery a:focus .adi_gallery_title{
font-size:16px;
visibility:visible;
/* Fallback for web browsers that don't support RGBa */
background-color: rgb(255, 255, 255);
/* RGBa with 0.6 opacity */
background-color: rgba(255, 255, 255, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF',EndColorStr='#19000000');
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF',EndColorStr='#19000000')";
text-align: center;
padding: 2px 10px 2px 10px;
width:100%;
height:auto;
position:absolute;
overflow: hidden;
box-shadow:0 0 15px 2px #000;
-moz-box-shadow:0 0 5px 2px #000;
-webkit-box-shadow:0 0 15px 2px #000;
-webkit-transition-property:width, height, top, bottom, left, right;
-webkit-transition-duration:1s;
-moz-transition-property: width, height, top, bottom, left, right;
-moz-transition-duration:1s;
-o-transition-property: width, height, top, bottom, left, right;
-o-transition-duration:1s;
transition-property: width, height, top, bottom, left, right;
transition-duration:1s;
cursor:default;
z-index:25;
}




.adi_gallery a:focus .adi_gallery_title{
left:-50px;
}

.adi_gallery a:focus:nth-child(n+1) .adi_gallery_title{
left:-150px;
}


}