/** vanilla_lightbox_08.css 042920
from bautista_08.css 042420 from bautista.css  **/
* {
    box-sizing: border-box;
}
body {
    background-color: #ecf0f1;
}
.gallery-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #fff;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
    width: 80%;
    margin: 1em auto 0;
    padding: 10px;
}
.gallery-item {
    flex-basis: 32.7%;
    /*margin-bottom: 6px;*/
    opacity: .85;
    cursor: pointer;
}
.gallery-item:hover {
    opacity: 1;
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gallery-content {
    font-size: .8em;
}

.lightbox {
    position: fixed;
    display: none;
    background-color:rgba(253, 251, 254, 0.75); /*rgba(235, 248, 255, 0.75);rgba(188, 222, 250, 0.4);#BCDEFA; rgba(254, 253, 250, 0.6);#FEFDFA;*/
    width: 100%;
    height: 100%;              
    overflow: auto;
    top: 0;
    left: 0;
}
.lightbox-content {
    position: relative;
    width: 70%;
    height: 70%;
    margin: 5% auto;
}
.lightbox-content img {
    border-radius: 7px;
border:1px solid  rgba(59, 59, 59, .8);
    box-shadow: 0 0 6px 2px rgba(59, 102, 125, .5); /*  rgba(80, 162, 206, .5);rgba(184, 230, 255, 1); rgba(225, 225, 225, 1);*/
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lightbox-prev,
.lightbox-next {
    position: absolute;
    padding: 0.25em;
    top: 45%;
    cursor: pointer;
    width:2.125em;
    height:2.25em;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background-color: rgba(200, 162, 206, 0.2);
  border-radius:50%;
}

.lightbox-prev {
    left: -2.125em;
}
.lightbox-next {
    right: -2.125em;
}

.previousArrow .arrowCircle,
.nextArrow .arrowCircle {
    fill:rgba(249, 251, 250, 0.5); 
    stroke:rgba(147, 198, 240, 0.5); 
}

.previousArrow:hover .arrowCircle,
.nextArrow:hover .arrowCircle { 
    fill:rgba(249, 251, 250, 0.8); 
    stroke:rgba(0, 136, 204, 0.8); 
}


.previousArrow .arrow-previous,
.nextArrow .arrow-next {
    fill:rgba(147, 198, 240, 0.8); 
    stroke:rgba(147, 198, 240, 0.8); 
}

.previousArrow:hover .arrow-previous,
.nextArrow:hover .arrow-next {
    fill:rgba(0, 136, 204, 0.8); 
    stroke:rgba(0, 136, 204, 0.8); 
}


.lightbox-prev:hover,
.lightbox-next:hover {
    opacity: .8;
}

@media (max-width: 767px) {
    .gallery-container {
        width: 100%;
    }
    .gallery-item {
        flex-basis: 49.80%;
        margin-bottom: 3px;
    }
    .lightbox-content {
        width: 80%;
        height: 60%;
        margin: 15% auto;
    }
}
@media (max-width: 480px) {
    .gallery-item {
        flex-basis: 100%;
        margin-bottom: 1px;
    }
    .lightbox-content {
        width: 90%;
        margin: 20% auto;
    }
}

.title,
.caption {
  background:rgba(253, 254, 251, 0.7);
    padding:.375em 0 .25em .325em;
    border-radius:3px;
    margin:0;
    line-height:1.2;
}

figure.gallery-item {
  line-height:1.5;
}

.gallery-container figure.gallery-item {
  padding-bottom:2.25em;
}


fig-caption p {
  line-height:1.1;
}

@media screen and (min-width: 768px) and (max-width: 880px) {

  fig-caption p {
  font-size:0.875em; 
  line-height:1.2;
  }
}