/* main image viewer container */
.image-viewer{
    position: relative;
    display: flex;
    flex-direction: column;
}

/* images container */
.image-viewer .images {
    display:flex;
    justify-content:center;
    width:100%;
    height: 100%;
    pointer-events:none;
} 

/* inactive images */
.image-viewer .images img{
    height:0;
    opacity:0;
    transition:0.3s ease-out;
    max-width: 1080px;
    max-height: 640px;
}

.image-viewer .images img.active{
    height:auto;
    opacity:1;
}

/* Image viewer controls container */
.image-viewer .controls{
    margin-top:20px;
    position: relative;
    text-align: center;
}

/* Image viewer right and left arrow control containers*/
.image-viewer .controls .left-control,
.image-viewer .controls .right-control{
    display:inline;
    width:40px;
    background:rgba(250, 250, 250, .1);
    cursor: pointer;
    font-size:25px;
    position: relative;
    top: 3px;
    margin:0 20px;
}

/* Image viewer thumbnails container*/
.image-viewer .controls .thumbnails{
    display:inline;
    width:100%;
}

/* Image viewer thumbnail icon */
.image-viewer .controls .thumbnails i{
    cursor: pointer;
    margin-right: 5px;
}

/* loading div */
.image-viewer .loading{
    position: absolute;
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    color: white;
}


/* Small devices (landscape phones, 576px) */
@media (max-width: 576px) {  
 
/*About me*/
img {
    width:100%;
}

.image-viewer {
    align-items: center;
    justify-content: center;
}

.image-viewer .controls .thumbnails i{
    font-size:.5rem;
}


/* Image viewer right and left arrow control containers*/
.image-viewer .controls .left-control,
.image-viewer .controls .right-control{
    font-size:10px;
    top:2px;
}

}