@charset "UTF-8";
@import url(../font-awesome.min.html);
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:200");

/*
	Visualize by TEMPLATED
	templated.co @templatedco
	Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
*/

/* Reset */


/* Thumbnails */

	.thumbnails {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: row;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		position: relative;
		margin: 0 0 2em -2em;
	}

		.thumbnails a {
			-moz-transition: all 0.2s ease;
			-webkit-transition: all 0.2s ease;
			-ms-transition: all 0.2s ease;
			transition: all 0.2s ease;
			border-bottom: none;
			display: block;
			width: 100%;
			margin: 0 0 2em 0;
			text-align: center;
			border-radius: 4px;
			box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
			background-color: rgba(255, 255, 255, 0.075);
			cursor: pointer;
			outline: 0;
			overflow: hidden;
		}

			.thumbnails a img {
				display: block;
				width: 100%;
				border-top-left-radius: 4px;
				border-top-right-radius: 4px;
			}

			.thumbnails a h3 {
				margin: 1em;
			}

			.thumbnails a:hover {
				background-color: rgba(255, 255, 255, 0.25);
				box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 0.5em 0 #FF6382;
			}

		.thumbnails > div {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			width: calc(100% / 3);
			padding-left: 2em;
		}

			.thumbnails > div > :last-child {
				margin-bottom: 0;
			}

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

			.thumbnails {
				margin: 0 0 2em -1.5em;
			}

				.thumbnails a {
					margin: 0 0 1.5em 0;
				}

				.thumbnails > div {
					padding-left: 1.5em;
				}

		}

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

			.thumbnails h3 {
				font-size: 0.8em;
			}

		}

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

			.thumbnails {
				display: block;
			}

				.thumbnails a {
					margin: 0 0 2em 0 !important;
				}

				.thumbnails > div {
					display: block;
					width: 100%;
				}

					.thumbnails > div:last-child > :last-child {
						margin-bottom: 0 !important;
					}

				.thumbnails h3 {
					font-size: 1em;
				}

		}