:focus{ outline:none; }

.picH {color:white; font-family:Arial, Helvetica, sans-serif; font-weight:700; margin-left:10%; margin-bottom:7%; position:relative; z-index:300; float:left; clear:both;}

.picA {
display:inline-block;
width: 20%;                /*200px; */
height:20%;
position:relative;
border:5px solid #fff;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}


.gallery{margin:0px auto; width:900px; height:640px;position:relative;}
.galleryfp{margin:0; width:100%; height:100%; position:relative;}
.galleryfp,p { font-family:"Trebuchet MS", "Lucida Sans", Arial, sans-serif; width:85%; margin-left:4%; 
 font-size:1.2em; color:white; font-weight:600; line-height:1.2em; text-align:left;}
.galleryfp,p { margin-top:-10px;}


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

.closed{
position:fixed;
top:550px;
right:755px;
display:none;
text-align:center;
font-weight:bold;
font-size:70px;
color:lime;
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:30;
}


.closed-layer{
display:none;
position:absolute;
top:140px;
left:150px;
width:500px;
height:352px;
background:transparent;
z-index:30;
cursor:pointer;
}

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

a:focus{ border:none;}
                                
a:focus img{
width:250%;
height:250%;
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:2s;
-moz-transition-property:width, height, top, bottom, left, right, z-index;
-moz-transition-duration:2s;
-o-transition-property:width, height, top, bottom, left, right, z-index;
-o-transition-duration:2s;
transition-property:width, height, top, bottom, left, right, z-index;
transition-duration:2s;
cursor:default;
z-index:25;
}
                       

a:focus:nth-child(4n+1) img{left:-198px;}   /*4 & 8  */
a:focus:nth-child(4n+2) img{left:-20px;}  /*1 and 5   */
a:focus:nth-child(4n+3) img{left:-203px;} /* 6th and 10th  */
a:focus:nth-child(4n+4) img{left:-20px;}  /* 3 and  7 */
a:focus:nth-child(-n+4) img{top:20px;}    /*2   3*/
a:focus:nth-child(n+9) img{top:-150px;}   /*   */
a:focus:nth-child(n+13) img{top:-95px;}   /*   */


}
      @media screen and (max-width 1020px) {
   
/*   h1 {
	margin-left:-32%;
}                             */
   .gallery{ display:inline-block; position:relative; z-index:300; max-width:490px; margin-left:12%; margin-bottom:5px;}
    .picA { display:inline-block; position:relative; width:40%; height:20%;} 

}


 @media screen and (max-width 800px) {
 
/*  .gallery{ display:inline-block; position:relative; z-index:300; max-width:480px; margin-left:10%;}  */
    .galleryfp { display:inline-block; position:relative; z-index:300; max-width:500px; margin-left:2%;}
    
.closed{
position:fixed;
top:550px;
right:855px;
display:none;
text-align:center;
font-weight:bold;
font-size:70px;
color:lime;
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:30;
}

    

}

   @media screen and (max-width 568px) {   
   .gallery{ display:inline-block; position:relative; z-index:300; max-width:490px; margin-left:12%;}
   
    .picA { display:inline-block; position:relative; width:40%; height:20%;} 

    
.closed{
position:fixed;
top:300px;
right:55px;
-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:30;
}



}

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

#bgvideo { 	display:none;}
h1 { font-size:1.2em; margin-left:-1%; }
  .gallery{ display:inline-block; position:relative; z-index:300; max-width:480px; margin-left:10%;}
    .galleryfp { display:inline-block; position:relative; z-index:300; width:100%; max-width:100%; margin-left:0%;}
 
/* .gallery{ display:inline-block; position:relative; z-index:300; max-width:414px; margin-left:14%;} */
 .picA { display:inline-block; position:relative; width:35%; height:20%;} /* took out  zindex here and pic comes on top  */


.closed{
position:fixed;
top:350px;
right:155px;
-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:30;
}


                                                 /* 05=19=16 */
 a:focus img{
width:230%;                      /* was 300% */
height:230%;                      /* was 3000% */
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:2s;
-moz-transition-property:width, height, top, bottom, left, right, z-index;
-moz-transition-duration:2s;
-o-transition-property:width, height, top, bottom, left, right, z-index;
-o-transition-duration:2s;
transition-property:width, height, top, bottom, left, right, z-index;
transition-duration:2s;
cursor:default;
z-index:25;
}

                                                
a:focus:nth-child(4n+1) img{left:-198px;}   /*4 & 8  */
a:focus:nth-child(4n+2) img{left:-20px;}  /*1 and 5   */
a:focus:nth-child(4n+3) img{left:-203px;} /* 6th and 10th  */
a:focus:nth-child(4n+4) img{left:-20px;}  /* 3 and  7 */
a:focus:nth-child(-n+4) img{top:20px;}    /*2   3*/
a:focus:nth-child(n+9) img{top:-150px;}   /*   */
a:focus:nth-child(n+13) img{top:-95px;}   /*   */

 
}

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

h1 { font-size:1.1em; margin-left:7%; }

 .gallery{ display:inline-block; position:relative; z-index:300; max-width:430px; margin-left:8%;} 
 
 a:focus img{
width:200%;                   
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:2s;
-moz-transition-property:width, height, top, bottom, left, right, z-index;
-moz-transition-duration:2s;
-o-transition-property:width, height, top, bottom, left, right, z-index;
-o-transition-duration:2s;
transition-property:width, height, top, bottom, left, right, z-index;
transition-duration:2s;
cursor:default;
z-index:25;
}