body {
        max-width: 1200px;
        margin: auto;
        padding: 0px 5px 0px 10px;
        box-sizing: border-box;
        text-align: justify;
        font-family: "Source Sans", "DejaVu Sans", Arial;
}

h1 {
	margin: 5px 0px 5px 0px;
}

h2 {
	margin: 10px 0px 10px 0px;
}

h1, h2 {
        font-family: "Andada";
        color: #4f7942;
}

.qrcode {
        float: left;
	height: 10em;
}

@font-face {
        font-family: "Source Sans";
        src: url("../fonts/SourceSansPro-Regular.otf");
}

@font-face {
        font-family: "Andada";
        src: url("../fonts/Andada-Regular.otf");
}

a {
        color: #2a8000;
        text-decoration: none;
}

a:hover {
        color: #a8e4a0;
        text-decoration: underline;
        transition: color 1s;
}

figure {
        text-align: center;
}

.masonry { /* Masonry grid container */
  column-count: 4;
  column-gap: 1em;
  margin: 1.5em;
  padding: 0;
  column-gap: 1.5em;
}

.item {
    display: inline-block;
    background: #fff;
    padding: 1em;
    margin: 0 0 1.5em;
    width: 100%;
    transition: 1s ease all;
    box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #ccc;
    text-align: center;
    min-height: 15.5em;
    max-height: 15.5em;
    transition: max-height 0.5s ease-out;
}

.item .caption {
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.item:hover {
    	max-height: 500em;
    	transition: max-height 0.5s ease-in;
}

.item:hover .caption{
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-line-clamp: none;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.item img{
	max-width: 100%;
	text-align: center;
	max-height: 6em;
	display: block;
	margin: auto;
}

.badges {width: 100%;  margin-top: 0.5em;}
.badges img{
	max-width: 45%;
	max-height: 3em;
	height: auto;
	display: inline;
	vertical-align: middle;
}

@media only screen and (max-width: 320px) {
    .masonry {
        column-count: 1;
    }
}

@media only screen and (min-width: 321px) and (max-width: 768px){
    .masonry {
        column-count: 2;
    }
}
@media only screen and (min-width: 769px) and (max-width: 1200px){
    .masonry {
        column-count: 2;
    }
}
@media only screen and (min-width: 1201px) {
    .masonry {
        column-count: 4;
    }
}