html, body
{
    height: 100%; /* root and body MUST be height 100% */
}

button {
    border: 0;
    padding: 0;
    background: #ffffff;
    cursor: pointer;
    display: block;
    margin: 0;
    border-radius: 0;
    outline: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

button.modal-close {	
    position: absolute;
    left: 0;
    background: #faa74a;
    color: #ffffff;
    font-family: Courier New, Courier, monospace;
    font-size: 1em;
    letter-spacing: 1px;
}

button.modal-close.off {
    top: 0;
    padding: 2px 7px 5px 7px;
}

button.modal-close.on {
    top: 50%;
    padding: 4px 8px 6px 9px;
}

a.gallHD {
    position: absolute;
    bottom: -20px;
    display: block;
    font-size: 0.6em;
    text-transform: uppercase;
    visibility: hidden;
}

.title#banner-pic {
    background-image: url('../pics/header_pic_gallery.jpg');
}

.nav#arrow-gallery {
    left:40%;
    border-top: 18px solid #fcbb75;
}

#gallery-main-image {
    margin: 0 130px 10px 0;
    background-image: url('../pics/1_gallery-hd.jpg');
}

.gallery {
    display: inline;
    background-size: 100%;
}

.gallery.grid {
    position: relative;
    float: left;
    width: 80px;
    height: 80px;
    margin: 0 20px 20px 0;
    font-size: 0em;
}

.gallery.grid:hover {
    opacity: 0.5;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.gallery-wrapper {
    display: block;
    position: relative;
    float: left;
    width: 400px;
    margin-bottom: 10px;
}

.gallery-wrapper:after {
    content: "";
    display: table;
    clear: both;
}

.gallImg {
    display: block;
    margin: 20px auto;
    padding: inherit;
    max-width: 90vw;
    max-height: 90vh;
    -webkit-transition: all 0s;
    -moz-transition: all 0s;
    transition: all 0s;
}

.gallImg.off {
    width: 25px;
    height: 25px;
    visibility: visible;
}

.gallImg.on {
    width: 100%;
    height: auto;
    visibility: hidden;
}

#modal {
    position: fixed;
    top: 0;
    left: -100%;
    height: 100%;
    width: 100%;
    visibility: hidden;
    border-spacing: 0;
    z-index: 3000;
}

#modal-tbody, #modal-tr, #modal-td {
    height: 100%; /* All table elements should be height 100% */
}

#modal-td {
    vertical-align: middle;
}

#modal-content {
    position: relative;
    left: 100%;
    height: auto; /* HEIGHT optional, any unit */
    width: 90%; /* WIDTH optional, any unit */    
    //    max-height: 80%; /* MAX-HEIGHT optional, if height auto, must be % */
    //    min-height: 80vh; /* MIN-HEIGHT optional, any unit */
    //    max-width: 80%; /* MAX-WIDTH optional, any unit */
    //    min-width: 320px; /* MIN-WIDTH optional, any unit */
    margin: 0 auto;
    border: 0;
    background-color: #333333;
    background-color: rgba(55,55,55,0.8);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    overflow: visible;
    -webkit-transition-property: scale, opacity;
    -moz-transition-property: scale, opacity;
    transition-property: scale, opacity;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    transition-duration: 0.3s;
    background-image: url('#');
}

#modal-content.off {
    opacity: 0;
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
}

#modal-content.on {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

#modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    background: #000000;
    background: rgba(0,0,0,0.9);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

#modal-overlay.off {
    opacity: 0;
    visibility: hidden;
}

#modal-overlay.on {
    z-index: 1000;
    opacity: 1;
    visibility: visible;
}

#a1 {
    background-image: url('../pics/gallery/t1.jpg');
}
#a2 {
    background-image: url('../pics/gallery/t2.jpg');
}
#a3 {
    background-image: url('../pics/gallery/t3.jpg');
}
#a4 {
    background-image: url('../pics/gallery/t4.jpg');
}
#a5 {
    background-image: url('../pics/gallery/t5.jpg');
}
#a6 {
    background-image: url('../pics/gallery/t6.jpg');
}
#a7 {
    background-image: url('../pics/gallery/t7.jpg');
}
#a8 {
    background-image: url('../pics/gallery/t8.jpg');
}
#acry29 {
    background-image: url('../pics/gallery/t29_cry08.gif');
}
#acry30 {
    background-image: url('../pics/gallery/t30_cry08.gif');
}
#acry31 {
    background-image: url('../pics/gallery/t31_cry08.gif');
}
#a9 {
    background-image: url('../pics/gallery/t9.jpg');
}
#a10 {
    background-image: url('../pics/gallery/t10.jpg');
}
#a11 {
    background-image: url('../pics/gallery/t11.jpg');
}
#a12 {
    background-image: url('../pics/gallery/t12.jpg');
}
#a13 {
    background-image: url('../pics/gallery/t13.jpg');
}
#a14 {
    background-image: url('../pics/gallery/t14.jpg');
}
#a15 {
    background-image: url('../pics/gallery/t15.jpg');
}
#a16 {
    background-image: url('../pics/gallery/t16.jpg');
}
#a17 {
    background-image: url('../pics/gallery/t17.jpg');
}
#a18 {
    background-image: url('../pics/gallery/t18.jpg');
}
#a19 {
    background-image: url('../pics/gallery/t19.jpg');
}
#a20 {
    background-image: url('../pics/gallery/t20.jpg');
}
#a21 {
    background-image: url('../pics/gallery/t21.jpg');
}
#a22 {
    background-image: url('../pics/gallery/t22.jpg');
}
#a23 {
    background-image: url('../pics/gallery/t23.jpg');
}
#a24 {
    background-image: url('../pics/gallery/t24.jpg');
}
#a25 {
    background-image: url('../pics/gallery/t25.jpg');
}
#a26 {
    background-image: url('../pics/gallery/t26.jpg');
}
#a27 {
    background-image: url('../pics/gallery/t27.jpg');
}
#a28 {
    background-image: url('../pics/gallery/t28.jpg');
}

@media screen and (max-width: 569px) {
    .gallery-wrapper {
        width: 100%;
    }
    .gallery.grid {
        margin: 0 10px 10px 0;
    }
    #gallery-main-image {
        margin: 0 0 10px 0;
        background-image: url('../pics/1_gallery-hd.jpg');
    }
}

@media  only screen and (-webkit-min-device-pixel-ratio: 1.5),  
only screen and (   min--moz-device-pixel-ratio: 1.5),  
only screen and (     -o-min-device-pixel-ratio: 3/2),  
only screen and (        min-device-pixel-ratio: 1.5),  
only screen and (min-resolution: 192dpi) {  
    .nav#banner-pic {
        background-image: url('../pics/header_pic_gallery-hd.jpg');
    }
}