@charset "utf-8";
/* CSS Document */
.thumbnail {
	float: left;
	width: 47%;
	height: auto;
	display: inline-block;
	text-align: center;		
	margin: 1.5%;	
	
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: top;
}

.thumbnail:after {
    content: "";
    display: block;
    padding-bottom: 36%;
}

.thumbnail:hover {
	background-size: 110% auto;
	background-repeat: no-repeat;
	background-position: top;
}

.thumbnail-2 {	
	width: 100%;
	height: auto;	
	display: inline-block;
	text-align: center;
	margin-bottom: 1rem;
	overflow: hidden;
	
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: top;
}

.thumbnail-2:after {
   content: "";
   display: block;
   padding-bottom: 55%;
}

.thumbnail-2:hover {
	background-size: 110% auto;
	background-repeat: no-repeat;
	background-position: top;	
}

.thumbnail-3 {	
	width: 100%;
	height: auto;	
	display: inline-block;
	text-align: center;
	margin-bottom: 1rem;
	overflow: hidden;
	
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: top;
}

.thumbnail-3:after {
   content: "";
   display: block;
   padding-bottom: 40%;
}

.thumbnail-3:hover {
	background-size: 110% auto;
	background-repeat: no-repeat;
	background-position: top;	
}


/** LIGHTBOX MARKUP **/
.lightbox {
	/** Default lightbox to hidden */
	display: none;

	/** Position and style */
	position: fixed;
	z-index: 9999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.7);	
}

.lightbox img {
	/** Pad the lightbox image */
	max-width: 100%;
	max-height: inherit;
	margin-top: 2.7%;			
}

.lightbox:target {
	/** Remove default browser outline */
	outline: none;
	/** Unhide lightbox **/
	display: block;
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;		
}

@media screen and (max-width: 1024px) {

}

@media screen and (max-width: 768px) {
	.thumbnail { width: 96%; }
}

@media screen and (max-width: 600px) {

}

@media screen and (max-width: 480px) {

}

@media screen and (max-width: 380px) {

}