body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background-color: #F7F6DF;
	font-family: 'Open Sans', sans-serif;
}

.grid-item-content {
	/* transition: top left filter 0.5s; */
} 
.grid-item-content:hover {
	position: relative;
	top: -5px;
	left: -5px;
	filter: drop-shadow(17px 17px 0px yellow);
}
.img-container {
	width: 100%;
	background-color: yellow;
}
.img-container>img {
	width: 100%;
}
#bg {
	position: fixed;
	bottom: 0px;
	left: 0px;
}

/* Pic page */
.main-image {
	filter: drop-shadow(12px 12px 0px yellow);
	margin-bottom: 40px;
}
h1 {
    font-family: 'Passion One', cursive;
}
hr {
	margin-bottom: 50px;
}


/* Pagination color */
.pagination > li > a
{
    background-color: white;
    color: purple;
}

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover
{
    color: purple;
    background-color: #eee;
    border-color: #ddd;
}

.pagination > .active > a
{
    color: white;
    background-color: purple !important;
    border: solid 1px purple !important;
}

.pagination > .active > a:hover
{
    background-color: purple;
    border: solid 1px purple;
}

/* set for xs devices */
.grid-item-content {
	padding: 0px 0px 28px 0px;
	filter: drop-shadow(12px 12px 0px yellow);
}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 
	.grid-item-content {
		padding: 0px 0px 28px 0px;
	}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.grid-item-content {
		padding: 18px 9px;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.grid-item-content {
		padding: 0px 0px 28px 0px;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.grid-item-content {
		padding: 0px 12px 48px 12px !important;
	}
}