@import url(fontawesome-all.min.css);

:root {
  --main: #000;
  --bg-color: #1a1b1f;
  --text: #fff;
  --text2: rgba(255,255,255,.8);
  --text3: rgba(255,255,255,.5);
  --text4: rgba(255,255,255,.3);
  --text5: #A5A6F6;
  --bg1: rgba(36, 41, 67, 0.1);
  --bg2: rgba(255,255,255,0.03);
}

.theme-light {
  --main: #fff;
  --bg-color: #eee;
  --text: #333;
  --text2: rgba(0,0,0,.8);
  --text3: rgba(0,0,0,.5);
  --text4: rgba(0,0,0,.3);
  --text5: #6E00F5;
  --bg1: rgba(0,0,0,0.1);
  --bg2: rgba(0,0,0,0.02);
}

/* Basic */
	@-ms-viewport {
		width: device-width;
	}

	body {
		-ms-overflow-style: scrollbar;
	}

	@media screen and (max-width: 480px) {
		html, body {
			min-width: 320px;
		}
	}

	html {
		box-sizing: border-box;
	}

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

	body.is-preload *, body.is-preload *:before, body.is-preload *:after {
		-moz-animation: none !important;
		-webkit-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
		-moz-transition: none !important;
		-webkit-transition: none !important;
		-ms-transition: none !important;
		transition: none !important;
	}

/* Tiles */
	.tiles {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		border-top: 0 !important;
	}

	.tiles + * {
		border-top: 0 !important;
	}

	.tiles article {
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-transition: -moz-transform 0.25s ease, opacity 0.25s ease, -moz-filter 1s ease, -webkit-filter 1s ease;
		-webkit-transition: -webkit-transform 0.25s ease, opacity 0.25s ease, -webkit-filter 1s ease, -webkit-filter 1s ease;
		-ms-transition: -ms-transform 0.25s ease, opacity 0.25s ease, -ms-filter 1s ease, -webkit-filter 1s ease;
		transition: transform 0.25s ease, opacity 0.25s ease, filter 1s ease, -webkit-filter 1s ease;
		padding: 4em 4em 2em 4em;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		height: 40vh;
		max-height: 40em;
		min-height: 23em;
		overflow: hidden;
		position: relative;
		width: 50%;
	}

	.tiles article .image {
		display: none;
	}

	.tiles article header {
		position: relative;
		z-index: 3;
	}

	.tiles article h3 {
		font-size: 1.75em;
	}

	.tiles article h3 a:hover {
		color: inherit !important;
	}

	.tiles article:hover {
		color: transparent;
	}

	.tiles article .link.primary {
		border: 0;
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 4;
	}

	h3:hover {
		color: transparent;
	}

	.major:hover {
		display: hidden;
		color: transparent;
	}

	.tiles article:before {
		-moz-transition: opacity 0.5s ease;
		-webkit-transition: opacity 0.5s ease;
		-ms-transition: opacity 0.5s ease;
		transition: opacity 0.5s ease;
		bottom: 0;
		content: '';
		display: block;
		height: 100%;
		left: 0;
		opacity: 0.85;
		position: absolute;
		width: 100%;
		z-index: 2;
	}

	.tiles article:after {
		background-color: var(--bg1);
		content: '';
		display: block;
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 1;
	}

	.tiles article:hover:before {
		opacity: 0;
	}

	.tiles article.is-transitioning {
		-moz-transform: scale(0.95);
		-webkit-transform: scale(0.95);
		-ms-transform: scale(0.95);
		transform: scale(0.95);
		-moz-filter: blur(0.5em);
		-webkit-filter: blur(0.5em);
		-ms-filter: blur(0.5em);
		filter: blur(0.5em);
		opacity: 0;
	}

	/* change this and .tiles article { width: } to stagger projects */
	/* .tiles article:nth-child(4n - 1), .tiles article:nth-child(4n - 2) {
		width: 55%;
	} */
	
	.tiles article:nth-child(6n - 5):before {
		background-color: var(--bg-color);
	}

	.tiles article:nth-child(6n - 4):before {
		background-color: var(--bg-color);
	}

	.tiles article:nth-child(6n - 3):before {
		background-color: var(--bg-color);
	}

	.tiles article:nth-child(6n - 2):before {
		background-color: var(--bg-color);
	}

	.tiles article:nth-child(6n - 1):before {
		background-color: var(--bg-color);
	}

	.tiles article:nth-child(6n):before {
		background-color: var(--bg-color);
	}

	@media screen and (max-width: 1280px) {
		.tiles article {
			padding: 4em 3em 2em 3em ;
			height: 30vh;
			max-height: 30em;
			min-height: 20em;
		}
	}

	@media screen and (max-width: 980px) {
		.tiles article {
			width: 50% !important;
		}
	}

	@media screen and (max-width: 736px) {
		.tiles article {
			padding: 3em 1.5em 1em 1.5em ;
			height: 16em;
			max-height: none;
			min-height: 0;
		}
			.tiles article h3 {
				font-size: 1.5em;
			}
	}

	@media screen and (max-width: 480px) {
		.tiles {
			display: block;
		}
		.tiles article {
			height: 20em;
			width: 100% !important;
		}
	}