body {
	font-family: 'Source Sans Pro', 'IBM Plex Sans', -apple-system, sans-serif;
	color: #555;
	font-weight: 300;
	/*background-image: url(https://images.pexels.com/photos/317355/pexels-photo-317355.jpeg?w=940&h=650&dpr=2&auto=compress&cs=tinysrgb);*/
	/*background-image: url(https://media.giphy.com/media/edSudCo1NpcYw/giphy.gif);*/
	/*background-image: url(images/bg12.jpg);*/
	/*background-image: url(https://images.pexels.com/photos/314726/pexels-photo-314726.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);*/
	padding: 0;
	margin: 0;
	max-width: 100%;
	overflow-x: hidden;
}

html {
	overflow-x: hidden;
}

footer {
	background-color: #0394b2;
	padding-top: 3%;
	padding-bottom: 3%;
}

footer p {
	color: #fff;
	font-size: .9em;
	font-weight: 300;
	text-transform: none;
	padding-bottom: 2em;
	line-height: 0.9em;
	border-left: none;
}

footer a {
	color: #fff;
}

.footer-nav {
	text-align: left;
}

.footer-nav a {
	font-size: 1.5em;
	margin-right: 5%;
}

.footer-nav a:hover {
	border-bottom: 2px solid white;
	color: white;
}

#index header {
	background-color: #0394b2;
}

#index header a,  #index header h4 {
	color: #fff!important;
}

.cover, .cover h2, .cover a {
	color: white;
}

.cover {
	background-color: #0394b2;
	/*width: 100%;*/
	/*position: absolute;*/
	overflow-x: hidden;
	z-index: -100;
	margin-bottom: 0;
	padding-bottom: 0;
	padding: 0;
	/*height: 60vh;*/
}

.bg {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -100;
	margin-bottom: 0;
	padding-bottom: 0;
}

h1 {
	/*text-align: center;
	color: #333;
	font-size: 2em;
	font-weight: 700;*/
	margin-top: 5%;
	color: #0394b2;
	font-size: 4em;
	font-weight: 900;
}

h2 {
	color: #0394b2;
	font-size: 1.8em;
	font-weight: 900;
}

.subheader {
	font-weight: 300;
	font-size: 1.5em;
	color: #888;
}

#index h2, #about h2, #howrse h2, #passion h2 {
	margin-top: 5%;
	font-size: 2.5em;
}

h3 {
	color: #0394b2;
	font-size: 2.2em;
	font-weight: 300;
	text-align: center;
	margin-top: 5%;
	margin-bottom: 5%;
	font-style: italic;
	line-height: 1.4em;
}

h4 {
	color: #0394b2;
	/*text-transform: uppercase;*/
	font-weight: 900;
	font-size: 1.4em;
	margin-top: 1.7em;
	margin-bottom: .2em;
	/*letter-spacing: 1px;*/
	/*border-left: 12px solid #ebf5f7;*/
	/*padding-left: 8px;*/
}

#passion h4 {
	margin-top: 0em;
	font-size: 2.2em;
}

#passion .navbar-brand h4 {
	font-size: 1.4em;
}

h5 {
	color: black;
	line-height: 1.4em;
	font-size: 1.2em;
	color: #666;
	font-weight: 400;
}

h6 {
	color: white;
	line-height: 1.4em;
	font-size: 1.4em;
	font-weight: 300;
}

p, label, .passion  {
	font-size: 1.2em;
}

b {
	font-weight: 600;
}

.underscore {
	color: #0394b2;
	border-top: 4px solid #0394b2;
	width: 2.5em;
	text-align: left;
	display: inline-block;
	position: relative;
	margin-top: 0px;
}

.project-title {
	/*color: #0394b2;*/
	color: #333;
	font-weight: 700;
	font-size: 1.8em;
	line-height: 1.3em;
}

.projecttitle {
	color: #0394b2;
	font-weight: 700;
	font-size: 2.7em;
	line-height: 1.3em;
}

.microtag {
	text-transform: uppercase;
	font-weight: 300;
	font-size: 0.75em;
	color: #444;
	letter-spacing: 1.5px;

}

.leading-link {
	color: #fff;
	border: none;
	padding: 3%;
	padding-top: 4%;
	padding-bottom: 4%;
	border-radius:5px;
	background-color: #0394b2;
	position: relative;
}

.at-a-glance .leading-link i {
	color: #fff;
}

.deliverables {
	position:absolute; 
	bottom:0;
	left: 0;
	width: 100%;
	text-align: center;
	padding-top: 5%;
}

.deliverables .projectCover {
	border-radius: 0px 0px 10px 10px;
}

.role {
	font-weight: 300;
	font-size: 1em;
	color: #444;
}

.recommendation {
	background-color: #0394b2;
	padding: 7%;
	padding-bottom: 1%;
	border-radius: 7px;
	color: #fff;
}

.recommendation .role {
	color: #fff;
}

.at-a-glance {
	background-color: #ebf5f7;
	padding: 3%;
	border-radius: 10px;
	font-size: 0.85em;
}

.at-a-glance i {
	color: #0394b2;
}

.highlight-box {
	background-color: #ebf5f7;
	padding: 1.5em;
	padding-bottom: 1%;
	border-radius: 10px;
}

.highlight-box span {
	color: #0394b2;
}


.next-project {
	margin-top: 7%;
	background-color: #ebf5f7;
	padding: 3%;
	border-radius: 10px;
	font-size: 0.85em;
}

.navbar-brand h4 {
	text-transform: none;
	color: ##0394b2;
	border-left: none;
}

.nav-item {
	font-weight: 300;
	font-size: 1.1em;
	box-sizing:border-box;
}

.nav-item:hover {
	border-bottom: 4px solid #0394b2;
}

#index .nav-item:hover {
	border-bottom: 4px solid #fff;
}

.selected {
	font-weight: 700;
	border-bottom: 4px solid #0394b2;
}

#index .selected {
	border-bottom: 4px solid #fff;
}

.navbar-nav li:hover>.dropdown-menu {
	display: block;
}

.main {
	padding-bottom: 5%;
/*	padding-left: 6%;*/
	background-color: white;
	overflow-x: hidden;
}

.mainintro {
	padding: 3em;
	background-color: rgba(255,255,255, 0.85);
}

.arrow {
	background-color: white;
	text-align: center;
}

.splash{
	background-color:  #0394b2;
}

#index ul {
	list-style-type: none;
}

ol {
	color: #0394b2;
	font-size: 1.1em;
}

a {
	text-decoration: none;
	color: #0394b2;
	position: relative;
}

.sticky-top {
	/*background-color: #0394b2;*/
	/*border-bottom: 3px solid white;*/
	/*background-color: transparent;*/
	/*z-index: 200;*/
	/*margin-top: -9vh;*/
}

nav .navbar-nav li a,  nav a {
	color: #0394b2!important;
}

.challenge {
	color: #0394b2;
	text-align: center;
}

.display-3 {
	text-align: center;
	font-size: 2.4em;
	font-weight: 700;
}

.jumbotron {
	background-size: cover;
	margin-top: 5vh;
	height: 35vh;
	background-repeat: no-repeat;
	background-position: center;
	/*background-attachment: fixed;*/
	display:block;

}

#IC .jumbotron {
	background-image: url(images/ic/header.jpg);
}

#SafeD .jumbotron {
	background-image: url(https://images.pexels.com/photos/442584/pexels-photo-442584.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500);
}

#PIP .jumbotron {
	background-image: url(images/pip/header.jpg);
}

#WeOfT .jumbotron {
	background-image: url(images/weoft/cover.jpg);
}

#RBC .jumbotron {
	background-image: url(images/rbc/header.jpg);
}

#CIBC .jumbotron {
	background-image: url(images/cibc/header.jpg);
}

a:hover {
	text-decoration: none;
	color: #b5b5b5;
}

img {
	width: 100%;
}

#howrse img {
	width: auto;
}

.howrse-presentation {
	width: auto;
	height: auto;
	margin: auto;
	padding: auto;
}



a button {
	margin-bottom: 5%;
}

a button:hover {
	background-color: white;
	border: 1px solid white;
	color: #0394b2;
}

.btn-block {
	background-color: #0394b2;
	color: white;
	padding: 2%;
	border: 1px solid transparent;
}


.btn-block i {
	color: white;
}

.btn-block:hover {
	cursor: pointer;
	background-color: #006e85;
	border: 1px solid transparent;
}

.btn{
	border-radius: 5px;
}

.rounded-circle {
	/*border: 16px rgba(255,255, 255, .5) solid;*/
}

.projects a:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	bottom: -3px;
	left: 0;
	background-color: #0394b2;
	visibility: hidden;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: all 0.2s ease-in-out 0s;
	transition: all 0.2s ease-in-out 0s;

}

.projects a:hover:before {
	text-decoration: none;
	visibility: visible;
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}

.enlarge:hover {
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	/*box-shadow: 0px 0px 5px 0px #444;  */
}

.form-group {
	margin: 0px;
}

.form-group label {
	margin-top: 3%;

}

.form-group input, .form-group textarea {
	border: 1px solid #0394b2;
}

.form-group button {
	margin-top: 5%;
}

.form-control {
	/*margin-top: 0px;*/
	/*border-radius: 0;*/
}

.projectArrows {
	text-align: center;
}

.card-text {
	font-style: italic;
}

.clickable {
	/*box-shadow:0px 4px 20px 1px #bbb;  */
}

.still-image {
	box-shadow:0px 2px 5px 1px #ccc;
}

.clickable:hover {
	/*box-shadow:1px 1px 15px 10px #ddd;  */
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.btn-outline-dark {
	border: 1px solid #0394b2;
	color: #0394b2;
}

.btn-outline-dark:hover {
	background-color: #0394b2;
	border: 1px solid #0394b2;
}

.project-item {
	background-color: white;
}

.nav {
	text-align: center;
	background-color: white;
	font-family: 'Overpass', sans-serif;
	font-size: 100%;
/*	transition: background .25s ease-in-out;
	-moz-transition: background .25s ease-in-out;
	-webkit-transition: background .25s ease-in-out;*/

}

nav {
	color: white!important;
	font-size: 1.2em;
}

.introButton {
	font-size: 1.4em;
	display: flex;
	align-items: center; /* align vertical */
	border-radius: 50px;
}

.introButton:hover {
	/*color: #bdf4ff;*/
	color: #0394b2;
	/*background-color: white;*/
}

.material-icons.md-14 { font-size: 14px; }
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
.material-icons-outlined.md-480 { font-size: 480px; }

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 300,
  'GRAD' 200,
  'opsz' 48;
  vertical-align:top;
}


i {
	vertical-align:middle;
}

.overlay {
	position: relative;
	width: 50%;
	margin-bottom: 2%;
}

.projectCover {
	opacity: 1;
	/*display: block;*/
	width: 100%;
	height: auto;
	transition: .1s ease;
	backface-visibility: hidden;
	box-shadow: 0px 0px 6px 1px #ddd;
	border-radius: 5px;
	/*filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
	/* Firefox 3.5+ 
	filter: gray;  IE6-9 
	-webkit-filter: grayscale(100%); Chrome 19+ & Safari 6+ */
}

.gray {
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
	filter: gray; /* IE6-9 */
	-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

.rounded-circle {
	opacity: 1;
	display: block;
	width: 100%;
	height: auto;
	transition: .25s ease;
	backface-visibility: hidden;
}

.projectCover:hover {
	box-shadow: 3px 3px 8px 3px #ccc;
	/*-webkit-filter: grayscale(0%);*/
	/*filter: none;  For IE8 and earlier */
}

.projectCover:hover .project-title {
	color: #0394b2;
}


.projectDetails {
	transition: .25s ease;
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	text-align: center;
}

.overlaytest {
	position: relative;
}

.abouttext h4, .at-a-glance h4 {
	border: none;
	padding-left: 0px;
}

.abouttext {
	position: absolute;
	border: 1px red solid;
}

a .text {
	color: #0394b2;
	font-size: 100%;
	padding: 0;
	margin: 0;
}

.overlay:hover .projectCover {
	opacity: 0.05;
}

.overlay:hover .projectDetails {
	opacity: 1;
}

.overlaytest:hover .projectDetails {
	opacity: 1;
}

.overlaytest:hover .rounded-circle {
	opacity: 0.05;
}

#navbartest {
	position: sticky;
	top: 0;
}

.passion {
	margin-top: 6%;

}

/*.projectCover {
	opacity: 0;
	transition: opacity 2s;
	transform: translate(0, 20px); 
	transition: all 2s;
}

.projectCover.visible { 
	opacity: 1;
	transform: translate(0, 0);
	}*/

	.introgif {
		opacity: 0;
		transition: opacity 1.5s;
		transform: translate(0, -20px); 
		transition: all 1.5s;
		padding-top: 8vh;
	}

	.introgif.visible { 
		opacity: 1;
		transform: translate(0, 0);
	}

	.introtext {
		display: block;
		vertical-align: middle;
		overflow: auto;
	}

	.vertical-center {
		min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
		min-height: 100vh; /* These two lines are counted as one :-)       */
		display: flex;
		align-items: center;
	}


	/* Mockups */

	#mockups {
		text-align: center;
	}

	#mockups .generate {
		padding-left: 5%;
		padding-right: 5%;
		position: fixed;
		bottom: 0;
	}

	#mockups h2 {
		margin-top: 5%;
		font-size: 1.5em;
		font-family: 'Permanent Marker', -apple-system, sans-serif;
		margin-bottom: 10%;
		color: black;
	}

	.fill-in {
		font-weight: 900;
		border-bottom: 1px black solid;
		padding-bottom: 1px;
		padding-right: 5%;
		padding-left: 5%;
	}

	.prompt {
		font-size: 2em;
	}


	@media (min-width: 768px) {
		.carousel-multi-item-2 .col-md-4 {
			float: left;
			width: 33%;
			max-width: 100%; 
		} 
		.carousel-multi-item-3 .col-md-4 {
			float: left;
			width: 20%;
			max-width: 100%; 
		}
		.carousel-multi-item-2, .carousel-multi-item-3 {
/*			height: 55vh;*/
			font-size: 80%;
		}
	}

	.carousel-multi-item-2 .card, .carousel-multi-item-3 .card  {
		border-radius: 2px; 
		border-color: white;
	}

	.controls-top {
		text-align: center;
	}


	@media only screen and (min-width: 1800px) {

		h6 {
			font-size: 1.6em;
		}
	}

	@media (max-width: 600px) {
		.recommendation {
			padding-top: 4%;
		}

		.highlight-box {
			padding: 4%;
		}

		.project-blurb {
			margin-top: 3%;
		}
	}