/* Override the body background color so there is a dark background behind the posters */
body {
	background-color: #222222;
	height:100vh !important;
	padding-top: 0!important;
}

body.footer-fixed {
	padding-bottom:100px;
}

.awesomebar {
	position: static !important;
}

#image-wall-wrapper {
	position:relative;
	padding-bottom: 20px;
	padding-top: 20px;
	overflow-x:hidden;
	overflow-y: auto;
	flex:1 1 auto;
	min-height:0;
}

/* image wall container */
#image-wall {
	padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
	position:relative;
	overflow:hidden;
	overflow-y:auto;
	
}



#image-wall:focus {
    outline: 0 !important;
}

/* Apply an animation transition so the loading overlay and content fade in and out */
#image-wall-loading,
#image-wall-container {
	-webkit-transition:opacity 1s ease;
	-moz-transition:opacity 1s ease;
	-ms-transition:opacity 1s ease;
	transition:opacity 1s ease;
}

/* Loading overlay used when images are loading or resizing */
#image-wall-loading {
	position:absolute;
	opacity:1;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,.6);
	z-index:100;
}

#image-wall-loading:after {
    content: "Downloading images. Please wait...";
    display: block;
    text-align: center;
    padding-top: 12px;
    color: #DDD;
}

/* Show the loading overlay when the container is tagged as loading */
.images-loaded #image-wall-loading {
	z-index:-1;
	opacity:0;
}

.images-loaded.images-loading #image-wall-loading {
	background:transparent;
	position:static;
	height:auto;
	opacity:1;
	z-index:100;
}

.images-loaded.images-loading #image-wall-loading-spinner {
	margin-top:0;
}

.images-loaded #image-wall-container {
	opacity:1;
}

/* Custom spinner element */
#image-wall-loading-spinner {
	-webkit-animation: spin 1s infinite linear;
    -moz-animation: spin 1s infinite linear;
    -ms-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
    border: 0.25rem solid rgba(255, 255, 255, 0.2);
    border-top-color: white;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    height: 25px;
    width: 25px;  
    margin: 50px auto 0 auto;  
}

/* Custom animation with default and webkit support */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* Container that will hold the image thumbnails */
#image-wall-container {
	opacity:0;
}

/* Container for an individual thumbnail */
.image-wall-thumbnail-container {
	visibility:hidden;
	margin-bottom:15px;
}

.image-wall-thumbnail-link {
	display:block;
}

.image-wall-thumbnail {
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
	max-height:100%;
	max-width:100%;
	border:none;
	padding:0;
}

.image-wall-thumbnail-hidden {
	display:none;
}


#image-wall-empty-message {
	text-align: center;
	max-width:100%;
	width:600px
}

@media(min-width:768px) {
	body.footer-fixed {
		padding-bottom:56px;
	}
}