@import url('https://fonts.googleapis.com/css?family=Fugaz+One|Permanent+Marker');
@import url('https://fonts.googleapis.com/css?family=Caveat+Brush');




*, :after, :before {
    box-sizing:border-box;
}

.grid-wrapper {
    padding: 0 15px;
}

ul.filter-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 90%;
    margin: 0 auto;
    margin-bottom: 60px;
    text-align: center;
}

ul.filter-menu li {
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 10px;
}

ul.filter-menu li:last-child {
    margin-right: 0;
}

ul.filter-menu li span {
    display: block;
    padding: 15px;
    font-size: 21px;
    background-color: rgba(255,255,255,0.6);
    font-family: 'Permanent Marker', cursive;
    color: #000;
    border-radius: 5px;
    transition: all 300ms linear;
    cursor: pointer;
}

ul.filter-menu li.active span,
ul.filter-menu li span:hover {
	background-color: #fff;
}





h1 {
	font-family: 'Caveat Brush', cursive;
	font-size: 60px;
    text-align: center;
    color: #222;
    word-spacing: 15px;
    letter-spacing: 8px;
    text-transform: uppercase;
}

.grid:after,.grid:before {
	content: '';
	display: table;
	clear: both;
}

.grid-item {
	float:left;
	width: 355px;
	padding: 0;
    margin-bottom: 40px;
}

.grid-item a {
    display: block;
    padding: 15px 15px 50px 15px;
    background-color: #fff;
    max-width: 80%;
    margin: 0 auto;
    position: relative;
    text-decoration: none;
    box-shadow: 0 3px 6px rgba(0,0,0,0.8);
    text-align: center;
    transform: rotate(5deg);
    box-shadow: 0 3px 6px rgba(0,0,0,.6);
    transition: all 200ms ease;
}

.grid-item img {
	max-width: 250px;
	display: block;
}

.grid-item a:after {
    content: attr(title);
    display: inline-block;
    text-align: center;
    position: relative;
    top: 25px;
    color: #333;
    transform: rotate(2deg);
    font-family: 'Great Vibes', cursive;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 3px;
}

.grid-item:nth-child(2n) a {
    transform: rotate(-5deg);
}

.grid-item:nth-child(3n) a {
    transform: rotate(-5deg);
}

.grid-item:nth-child(4n) a {
    transform: rotate(-10deg);
}


.grid-item:nth-child(5n) a {
    transform: rotate(-6deg);
}

.grid-wrapper .grid-item a:hover {
	transform: rotate(0deg);
    box-shadow: 0 3px 6px rgba(0,0,0,.9);
}

@media(max-width: 991px) {

	.grid-item {
		width: 50%;
	}

}

@media(max-width: 767px) {

	.grid-item {
		width: 100%;
	}

	.grid-item a {
	    transform: rotate(-5deg);
	}

	.grid-item:nth-child(2n) a {
	    transform: rotate(5deg);
	}

}