/*!
 * json-gallery.css
 * MIT License (c) 2014 Jorge Yau
 * codenameyau.github.io
 */

/* Thumbnail preview size 
#json-gallery .img-thumbnail {height: 280px; width: 455px;}*/

/* Slideshow carousel width */
.modal-dialog {width: 1000px; top: 20px;}

/* Thumbnail settings */
.gallery-item {
    margin: 15px 0;
    margin-left: auto;
    margin-right: auto;
}
.json-thumbnail-title a {color: #cacaca;}
.json-thumbnail-title a:hover {color: #fafafa;}
.json-thumbnail-title {
    text-align: center;
    position: relative;
    background: rgba(0,0,0,.9);
    width: 455px;
    opacity: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: -280px;
    line-height: 280px;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}
.json-thumbnail-title:hover {
    opacity: 1;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}
.img-thumbnail {
    border-radius: 0;
    box-shadow: 5px 5px 5px #151515;
    padding: 0;
    border: 0 solid rgba(0,0,0,.85);
}

/* Override bootstrap carousel */
.carousel-indicators {
    position: fixed;
    top: 10px;
    left: 0;
    bottom: 0;
    margin-left: 0;
    right: 20px;
    width: inherit;
    height: 20px;
}

/* Change carousel background */
#json-gallery-modal {background: rgba(0,0,0,.80);}
#json-gallery-modal .modal-body {padding: 0; background: rgba(0,0,0,.90);}
#json-gallery-modal img {margin: auto;}
.carousel-indicators li {background: rgba(0,0,0,.3);}
.carousel-indicators .active {background: rgba(255,255,255,.85);}
.carousel-indicators li,
.carousel-indicators .active {
    margin: 0px 5px;
    height: 10px;
    width: 10px;
}

/* Carousel circle and arrow controls */
.carousel-control {width: 8%; color: rgba(255,255,255,.35);}
.carousel-control.left {
    background-image: linear-gradient(to right,rgba(0,0,0,0.1) 0,rgba(0,0,0,0.0001) 100%)
}
.carousel-control.right {
    background-image: linear-gradient(to right,rgba(0,0,0,0.0001) 0,rgba(0,0,0,0.1) 100%);
}
.carousel-control .glyphicon-chevron-left {left: 25%;}
.carousel-control .glyphicon-chevron-right {right: 25%;}
.carousel-caption {bottom: 0; padding: 10px; color: #d1d1d1; letter-spacing: 1px;}
.carousel-footer-bg {
    background: rgba(0,0,0,.8);
    height: 60px;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
}

/* JSON popup gallery */
.json-gallery-header {
    border: 0;
    padding-bottom: 0;
}
.json-gallery-title {
    color: #3c3c3c;
    border: 0;
    padding-bottom: 0;
}
.json-gallery-caption {
    text-align: center;
    background: rgba(0,0,0,.5);
    color: #cccccc;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: capitalize;
}
.json-title-link {font-size: 1.6em;}
.gallery-item:hover {cursor: pointer;}


/* Responsive gallery layout */
@media (max-width: 1200px) {
    /* Json Gallery */
    .img-thumbnail, .json-thumbnail-title {
    width: 375px !important; height: 240px !important;}
    .json-thumbnail-title {line-height: 240px; margin-top: -240px;}
}

@media (max-width: 1000px) {
    .modal-dialog {width: 90%; margin: auto;}
    .gallery-item {text-align: center;}
}

@media (max-width: 450px) {
    .img-thumbnail, .json-thumbnail-title {
    width: 100% !important; height: 200px !important;}
    .json-thumbnail-title {line-height: 200px; margin-top: -200px;}
}