@charset "UTF-8";
@font-face {
  font-family: 'Roboto Condensed';
  src: url('../fonts/RobotoCondensed-Regular.ttf') format('truetype'), url('../fonts/RobotoCondensed-Bold.ttf') format('truetype'), url(',,/fonts/RobotoCondensed-Light.ttf') format('truetype'), url('../fonts/RobotoCondensed-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Corbel';
  src: url('../fonts/Corbel.ttf') format('truetype'), url('../fonts/Corbel Bold.ttf') format('truetype'), url('../fonts/Corbel Italic.ttf') format('truetype'), url('../fonts/Corbel Bold Italic.ttf') format('truetype');
}

* {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body {
    background: url(../images/grid.png) repeat;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased; 
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
}
h1, h2 {
	font-family: 'Roboto Condensed', sans-serif;
}
h3, p {
	font-family: 'Corbel', sans-serif;
}
a, a:hover, a:focus, a:active, a:visited {
    outline: 0;
	text-decoration: none;
}
.wrapper {
	display: flex;
	justify-content: center;
}
.grid {
    display: grid;
	max-width: 1280px;
	margin: 0 25px;
    grid-gap: 20px;
    grid-template-columns: repeat(4, minmax(212px, 1fr));
	grid-template-rows: auto 94px 94px 212px 212px auto;
}

.grid > div > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
	border-top: 10px solid #4c6071;
	border-bottom: 6px solid #4c6071;
	margin: 0;
	padding: 0;
}
.title h1 {
	color: #4c6071;
	font-size: 52px;
	font-weight: 700;
	letter-spacing: 2px;
	margin: 0 0 5px 0;
}
.box {
	border-top: 10px solid #4c6071;
	border-bottom: 6px solid #4c6071;
	margin: 0;
	width: 100%;
	padding-top: 3em;
	box-shadow: inset 0 0 0 0 #4c6071;
	-webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	transition: all ease 0.5s;
}
.box h2 {
	font-size: 21px;
	color: #fff;
	margin-top: 0.6em;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 0;
	font-weight: 500;
}
.box a {
	color: #fff;
}
.box a:hover {
	color: #e16b5b;
}
.box:hover {
	box-shadow: inset 0 200px 0 0 #4c6071;
}
	.title {
		grid-column: 1 / 5;
        grid-row: 1 / 2;
	}
	.intro {
		grid-column: 2 / 4;
        grid-row: 2 / 3;
		background: #1e8bb8;
		padding-top: .75em;
}
    .region {
        grid-column: 1 / 2;
        grid-row: 2 / 4;
		background: #92cad4;
    }
    .mp4 {
        grid-column: 2 / 4;
        grid-row: 3 / 5;
		margin: 0;
		padding: 0;
		overflow: hidden;
    }
    .vid {
        grid-column: 4 / 5;
        grid-row: 2 / 4;
		background: #5bbde4;
    }
    .xs {
        grid-column: 1 / 2;
        grid-row: 4 / 5;
		background: #35a3c2;
    }
	.mod {
        grid-column: 4 / 5;
        grid-row: 4 / 5;
		background: #1e8bb8;
    }
    .recon {
        grid-column: 1 / 2;
        grid-row: 5 / 6;
		background: #5bbde4;
    }
    .syll {
        grid-column: 2 / 3;
        grid-row: 5 / 6;
		background: #1e8bb8;
    }
    .stroke {
        grid-column: 3 / 4;
        grid-row: 5 / 6;
		background: #35a3c2;
    }
	.mri {
        grid-column: 4 / 5;
        grid-row: 5 / 6;
		background: #92cad4;
    }
	.foot {
		grid-column: 1 / 5;
        grid-row: 6 / 7;
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: space-between;
		font-family: 'Corbel', sans-serif; font-size: 12px; color: #4c6071; text-decoration: none;
	}
	.foot a {
		font-style: italic; color: #4c6071; text-decoration: none;
	}
	.foot a:hover {
		cursor: pointer;
		color: #e16b5b;
	}

@media screen and (max-width: 1024px) {
	.grid {
		margin: 0 15px;
    	grid-gap: 10px;
    	grid-template-columns: repeat(2, minmax(212px, 1fr));
		grid-template-rows: auto 94px 311px 160px 160px 160px 160px auto;
	}
	.title h1 {
		color: #4c6071;
		font-size: 32px;
		font-weight: 600;
		letter-spacing: 1px;
		margin: 0;
	}
	.box h2 {
		font-size: 18px;
		margin-top: 0.4em;
		margin-right: 0;
		margin-left: 0;
		margin-bottom: 0;
		font-weight: 500;
	}
	.title {
		grid-column: 1 / 3;
        grid-row: 1 / 2;
	}
	.intro {
		grid-column: 1 / 3;
        grid-row: 2 / 3;
		padding-top: .50em;
	}
	.region {
        grid-column: 1 / 2;
        grid-row: 4 / 5;
    }
    .mp4 {
        grid-column: 1 / 3;
        grid-row: 3 / 4;
		overflow: hidden;
    }
    .vid {
        grid-column: 2 / 3;
        grid-row: 4 / 5;
    }
    .xs {
        grid-column: 1 / 2;
        grid-row: 5 / 6;
    }
	.mod {
        grid-column: 2 / 3;
        grid-row: 5 / 6;
    }
    .recon {
        grid-column: 1 / 2;
        grid-row: 6 / 7;
    }
    .syll {
        grid-column: 1 / 2;
        grid-row: 7 / 8;
    }
    .stroke {
        grid-column: 2 / 3;
        grid-row: 7 / 8;
    }
	.mri {
        grid-column: 2 / 3;
        grid-row: 6 / 7;
    }
	.foot {
		grid-column: 1 / 3;
        grid-row: 8 / 9;
	}
}