/* 

    #############################################
    #   Simple JS/CSS Gallery v1.00             #
    #       By Mark Foyster                     #
    #############################################

    For usage instructions, please refer to README.md

*/

/*############# CSS FOR CANVAS AND CONTAINER ##############*/

#galleryCanvasContainer{
	display: inline-block;
	position: relative;
	top: 50px; /*calc(var(--popUpTitleFontSize) + 10px); */
	height: calc(100% - 60px) ;
	width: 100%;
	
}
#galleryCanvas{
	display: block;
	width: 100%;
    height: 100%;
    border: 1px solid black;
}


/*################## CSS FOR CONTROLS ######################*/
#leftArrow{
    position: absolute;
    top: calc(50% - 25px);
    left: calc(10px + 5%);
}
#rightArrow{
    position: absolute;
    top: calc(50% - 25px);
    right: calc(10px + 5%);
}

@keyframes controlFadeIn 
{
    from { 
        visibility: hidden;
        opacity: 0;
    }
    to { 
        visibility: visible;
        opacity: 1;
    }
}

@keyframes controlFadeOut 
{
    from { 
        visibility: visible;
        opacity: 1;
    }
    to { 
        visibility: hidden;
        opacity: 0;
    }
}

.fadeControlsOut{
    animation: controlFadeOut 0.8s ease-in-out;
    visibility: hidden;
}
.fadeControlsIn{
    animation: controlFadeIn 0.8s ease-in-out;
    visibility: visible;
}

#zoomCtlBox{
    position: absolute;
    bottom: 5%;
    left: calc(50% - 40px);
    background-color: whitesmoke;
    padding: 5px;
    border-radius: 10px;
}
.zoomControls{
    padding: 10px;
}