/* ==========================================================================
 Gallery specific styles
 ==========================================================================

 * Coding philosophy: Create content for smallest screensize first (iphone etc where the screen width is less than 480px. )
 * Then create a number of modifications to improve the experience for larger screen sizes via the media queries.
 *
 *
 * */

/* reset themes for gallery*/

.gallery-container ul {
    list-style: none;
}
.gallery-container :focus {
    outline: 0;
}

.gallery-container * {
    text-decoration: none;
}

/* ====== Colour Theme ==========
 ===============================*/

/* ==============
 MOBILE: Gallery
 ============== */
.gallery-container {
    width: 100%;
}

.gallery {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.image-viewer {
    display: block;
}

.image-viewer .listing {
    width: 100%;
    height: 100%;
}

#image-viewer {
    position: relative;
    /*margin:0px;*/
    padding: 0px;
}

.box {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width:380px;
    /*height:280px;*/
    margin: 10px 0px;
    -moz-box-shadow: 0 0 5px rgba(0,0,0,.35);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.35);
    box-shadow: 0 0 5px rgba(0,0,0,.35);
}

.box:before {
    content: "";
    display: block;
    padding-top: 100%;
}

.image-viewer .content {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    /*height:100%;
     width:100%;
     padding: 10px;*/
    background: #fff;
    overflow: hidden;
}

.image-viewer li:first-child {
    margin-left: 0px;
}

.image-viewer li:last-child {
    margin-right: 0px;
}

.image-viewer .content a {
    color: #fff;
}

.image-viewer .content div {
    position: absolute;
    height: 0px;
    /*width: 260px;*/
    background: rgba(0,0,0,0.45);
    overflow: hidden;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 0 10px;
    line-height: 26px;
    transition: height 1s;
}

.image-viewer .icons {
    height: 16px;
    width: 16px;
    margin: 5px 3px;
    float: right;
    /*position: absolute;*/
    /*right: 20px;*/
}

.image-viewer .content:hover div {
    height: 22%;
}

.image-viewer canvas {
    opacity: 1;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    /*top: 10px;
     left:10px;*/
    transition: opacity 1s .2s;
}

.image-viewer .content:hover canvas {
    opacity: 0;
}

.gallery-nav {
    display: block;
    width: 80%;
    margin: -15px auto auto;
    line-height: 1px;
    font-size: 20px;
    height:20px;
}

.gallery-nav .left {
    cursor: pointer;
    width:10%;
    height:100%;
    padding-top:15px;
    padding-left:5%;
    margin-left:-5%;
    float: left;
}

.gallery-nav .navigator {
    width: 80%;
    height:100%;
    padding-top:10px;
    float: left;
    text-align: center;
}

.gallery-nav .right {
    cursor: pointer;
    width:10%;
    height:100%;
    padding-top:15px;
    padding-right:5%;
    margin-right:-5%;
    float: left;
    text-align: right;
    
}

.gallery-nav a {
    cursor: pointer;
    display: inline-block;
    margin: 0 5px;
    padding: 4px;
    border-radius: 50%;
    background-color: #CCCCCC;
}

.gallery-nav a:hover {
    background-color: #B3D4FC;
    color: #fff;
}

.gallery-nav a.jp-current, .gallery-nav a.jp-current:hover {
    background-color: #B3D4FC;
}

/* ==========================================================================
 Author's custom styles
 ========================================================================== */

/* ==========================================================================
 Media Queries
 ========================================================================== */

@media only screen and (min-width: 480px) {

    /* ====================
     INTERMEDIATE: Gallery
     ==================== */
    #image-viewer {
        padding: 0 15%;
    }

    /* ========================
     INTERMEDIATE: IE Fixes
     ======================== */

}

@media only screen and (min-width: 760px) {

    /* ====================
     WIDE: CSS3 Effects
     ==================== */

    .gallery-container {
        height: 100%;
        margin-top: 50px;
        margin-bottom: 10px;
    }


.gallery-nav{
    width:98%;
}
    .gallery-nav a {
        margin: 0 11px;
        height:6px;
        width:6px;
    }

    /*.gallery-nav {
     width:5%;
     float:left;
     }

     */
    #image-viewer {
        padding: 0; /*there will be four images to fill up the screen so go back to zero padding*/
    }
    .box {
        width:48%;
    }
    
    .image-viewer li:nth-child(odd) {

        margin-left: 0px;
        margin-right: 12px;
    }

    .image-viewer li:nth-child(even) {
        margin-right: 10px;
        float: right;
    }

    /* ============
     WIDE: Menu
     ============ */

    /* ============
     WIDE: Main
     ============ */

}

@media only screen and (min-width: 1140px) {

    /* ===============
     Maximal Width
     =============== */
    .image-viewer .box:nth-child(n) {
        position: relative;
        display: inline-block;
        float: none;
        width: calc( (100% - 40px)/3 );
        margin-left: 10px;
        margin-right: 10px;
    }

    /*left hand images*/
    .image-viewer .box:nth-child(3n-2) {
        margin-left: 0px;
    }

    /* right hand images*/
    .image-viewer .box:nth-child(3n) {
        margin-right: 0px;
    }

    .image-viewer canvas {

    }
}