body {
	font-family: "Fira Sans", sans-serif;
	color: #212121;
	background-color: #F8F7F7;
}

h1 {
	font-size: 4rem;
	font-weight: 700;
	margin-bottom: 32px;
}

h2 {
	font-size: 2.8rem;
	font-weight: 600;
	margin-top: 32px;
	margin-bottom: 48px;
}

h3 {
	font-size: 2rem;
	font-weight: 600;
	margin-bottom: 32px;
	background-color: #F8F7F7;
	width: fit-content;
}


.navbar {
	background-color: white;
	filter: drop-shadow(0px 5px 15px rgba(56, 48, 48, .05));
	width: 100%;
	position: fixed;
	z-index: 1;
}

.navbar-brand {
	color: #212121;
	font-weight: 500;
}

.navbar-brand:hover {
	color: #212121 !important;
}

.navbar-brand span {
	color: #B2ACAC;
}

.navbar-collapse {
	background: rgba(33, 33, 33, .9);
	padding-left: 24px;
	padding-right: 24px;
	padding-top: 36px;
	padding-bottom: 36px;
	position: absolute;
	top: 56px;
	right: 0;
	width: 30%;
	min-width: 400px;
}


.navbar-toggler {
	border: none;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.nav-link {
	color: #FAF7F7;
	font-size: 2.4rem;
	line-height: 1.6;
	font-weight: 700;
}

.nav-link:active {
	color: #FAF7F7 !important;
}

.nav-link:focus {
	color: #FAF7F7 !important;

}

.nav-link:hover {
	color: #FAF7F7 !important;
	text-decoration: underline;
}

.subnav {
	margin-top: 48px;
	
}

.subnav .nav-link {
	font-size: 1.2rem;
	text-transform: none !important;
}

.subnav p {
	font-size: .875rem;
	text-transform: uppercase;
	color: #969192;
	font-weight: 700;
}

.work {
	padding-top: 124px !important;
	padding-bottom: 84px !important;
}


img {
	width: 100%;
}


.thumbnail img {
	border-radius: 10px;
	transition: transform 0.3s ease-in-out, box-shadow 0.2s ease-in-out;

}

.thumbnail img:hover{
	transform: translate(0px, -6px);
	-webkit-box-shadow: 0px 20px 20px 0px rgba(0,0,0,0.18);
	-moz-box-shadow: 0px 20px 20px 0px rgba(0,0,0,0.18);
	box-shadow: 0px 20px 20px 0px rgba(0,0,0,0.18);
	transition: all ease-in-out 0.3s;
}

.thumbnail img {
	
}


.thumbnail-2 {
	
	transition: transform 0.3s ease-in-out, box-shadow 0.2s ease-in-out;
}

.thumbnail-2:hover{
	transform: translate(0px, -6px);
	-webkit-box-shadow: 0px 20px 20px 0px rgba(0,0,0,0.18);
	-moz-box-shadow: 0px 20px 20px 0px rgba(0,0,0,0.18);
	box-shadow: 0px 20px 20px 0px rgba(0,0,0,0.18);
	transition: all ease-in-out 0.3s;
}



.wrapper {
	width: 100%;
}

.container {
	padding-top: 48px;
	padding-bottom: 48px;
	padding-left: 16px;
	padding-right: 16px;

}


.blurb-container {
	margin-top: 80px;
	margin-bottom: 64px;
	padding: 48px;
	background-color: #F8F7F7;
	opacity: 1;
	background-image: radial-gradient(#B2ACAC 1px, #F8F7F7 1px);
	background-size: 20px 20px;
}

.blurb-container-short {

	padding: 48px;
	background-color: #F8F7F7;
	opacity: 1;
	background-image: radial-gradient(#B2ACAC 1px, #F8F7F7 1px);
	background-size: 20px 20px;

}

.white .blurb {
	background-color: white !important;
}

.blurb {
	font-size: 2rem;
	background-color: #F8F7F7;
	width: fit-content;
}

.small-blurb {
	font-size: 1rem;
	background-color: #F8F7F7;
	max-width: 800px;
}

.categories {
	font-size: .875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #FAF7F7;
	background-color: #B2ACAC;
	display: inline-block;
	padding: 8px;
}


.footer {
	background-color: #212121;
	color: #FAF7F7;
}


.footer a {
	color: #FAF7F7;
}

.footer a:hover {
	text-decoration: none;
}

.icons {
	text-align: right;
}

.icon {
	display: inline-block;
	width: 24px;
	margin-right: 8px;
}

.copyright {
	font-size: .875rem;
}

#footer-date {
	height:15px;
	width: 32px;
}

.selfie-bg {
	background-image: url('images/selfie.jpg');
	background-size: cover;
  	background-position: center;
  	background-repeat: no-repeat;
 	height: 1000px;
}

.ff23 {
	background-color: #26714F;
	color: #FAF7F7 !important;
}

.aci-bg {
	background-color: #124680;
	padding-top: 44px;
	padding-bottom: 60px;
}

.pelton-bg {
	background-color: #dae2ea;
	padding-top: 44px;
	padding-bottom: 60px;
}

.access-bg {
	background-image: url('images/access-bg.png');
	background-size: cover;
	background-attachment: fixed;
  	background-position: center;
  	background-repeat: no-repeat;
  	padding-top: 60px;
  	padding-bottom: 60px;
}

.sdsc-bg {
	background: linear-gradient(270deg, #006298, #6e963b, #006298);
    background-size: 800% 800%;

    -webkit-animation: AnimationName 40s ease infinite;
    -moz-animation: AnimationName 40s ease infinite;
    animation: AnimationName 40s ease infinite;

    padding-top: 48px;
    padding-bottom: 48px;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.sungeo-bg {
	
	background: linear-gradient(45deg,  #265eac 0%,#265eac 53%,#00a87e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

	padding-top: 32px;
	padding-bottom: 64px;
}

.mcity-bg {
	background-image: url('images/Mcity-display_background.jpg');
	background-size: cover;
	background-attachment: fixed;
  	background-position: center;
  	background-repeat: no-repeat;
}

.lajc-bg {
	background-image: url('images/LAJC-display_background.png');
	background-size: cover;
	padding-top: 32px;
	padding-bottom: 38px;
}

.supcon-bg {
	background-color: #6fa84f;
	padding-top: 28px;
	padding-bottom: 44px;
}

.slap-bg {
	background-color: #00a5e5;
	padding-top: 28px;
	padding-bottom: 44px;
}

.glfc-bg {
	background-color: #213469;
	padding-top: 32px;
	padding-bottom: 32px;
}

.inline-link {
	color: #212121;
	font-weight: 700;
}

.inline-link:hover {
	text-decoration: none !important;
}

.stand-alone-link {
	font-size: 2rem;
	color: #212121;
	font-weight: 700;
	display: inline-block;
	width: fit-content;
	margin-top: 24px;
}

.stand-alone-link:hover {
	text-decoration: none !important;
}

.stand-alone-link-small {
	font-size: 1.5rem;
	color: #212121;
	font-weight: 700;
	display: inline-block;
	width: fit-content;
	margin-top: 24px;
}

.stand-alone-link-small:hover {
	text-decoration: none !important;
}

.external-link-icon-header {
	font-size: 24px !important;
	display: inline-block;
	padding: 8px;
	background-color: #212121;
	border-radius: 50px;
	color: #FAF7F7;
	margin-right: 8px;
}

.external-link-icon {
	font-size: 24px !important;
	display: inline-block;
	padding: 8px;
	background-color: #212121;
	border-radius: 50px;
	color: #FAF7F7;
	margin-right: 8px;
}

.external-link-icon-small {
	font-size: 20px !important;
	display: inline-block;
	padding: 8px;
	background-color: #212121;
	border-radius: 50px;
	color: #FAF7F7;
	margin-right: 8px;
}

.showcase {

}

.large-img {
	width: 100%;
	display: block;
	margin: 0 auto;
	margin-bottom: 80px !important;
}

.medium-img {
	width: 100%;
	max-width: 800px;
	display: block;
	margin: 0 auto;
	margin-bottom: 80px !important;
}

.tall-img {
	width: 100%;
	max-width: 600px;
	display: block;
	margin: 0 auto;
	margin-bottom: 80px !important;
}

.small-img {
	width: 100%;
	max-width: 400px;
	display: block;
	margin: 0 auto;
	margin-bottom: 80px !important;
}

.article-img {
	width: 100%;
	margin-bottom: 80px !important;
	max-width: 1020px;
	display: block;
	margin: 0 auto;
}

.small-grid-img {
	width: 100%;
	max-width: 400px;
	display: block;
	padding-left: 24px;
	padding-right: 24px;
	margin: 0 auto;
	margin-bottom: 80px !important;
}

.grid-img {
	width: 100%;
	max-width: 1020px;
	display: block;
	margin: 0 auto;
}

.circle-img {
	border-radius: 500px;
	width: 25%;

	margin: 0 auto;
	display: block;
}

.small {
	max-width: 900px;
}

.showcase-logo {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	display: block;
}

.showcase-logo-medium {
	width: 100%;
	max-width: 740px;
	margin: 0 auto;
	display: block;
}


.showcase-logo-small {
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	display: block;
}

.showcase-logo-exsmall {
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
	display: block;
}

.white {
	background-color: white !important;
}

.more-work {
	padding: 48px;
	opacity: 1;
	background-image: radial-gradient(#B2ACAC 1px, white 1px);
	background-size: 20px 20px;
}

.more-work h3 {
	font-size: .875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #FAF7F7;
	background-color: #B2ACAC;
	display: inline-block;
	padding: 8px;
}

.drop-shadow {
	filter: drop-shadow(0px 5px 10px rgba(56, 48, 48, .07));
}

.tilt {
	transform: rotate(5deg);
}

.button {
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 24px;
	padding-right: 24px;
	font-size: .875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	background-color: #FAF7F7;
	width: fit-content;
	margin-top: 48px;
}

.button:hover {
	background-color: #DEDADA;
	transition: 1s;
}

.button a {
	text-decoration: none;
	color: #212121;
}

.large-button {
	color: #212121;
	border: none;
	padding-top: 32px;
	padding-bottom: 32px;
	padding-left: 24px;
	padding-right: 24px;
	font-size: 2rem;
	font-weight: 700;
	
	background-color: white;
	width: 100%;
}

.large-button:hover {
	background-color: #DEDADA;
	transition: 1s;
}

.large-button a {
	text-decoration: none;
	color: #212121;
}



.dotted-container {
	padding: 48px;
	opacity: 1;
	background-image: radial-gradient(#B2ACAC 1px, white 1px);
	background-size: 20px 20px;
}

.experience-education h2 {
	margin-top: 64px;
}

.experience-education h3 {
	margin-top: 8px !important;
	margin-bottom: 40px;
	margin-left: 52px;
	background-color: white !important;
}

.experience-education h3 span {
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
}


.experience-education h4 {
	font-size: .875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #FAF7F7;
	background-color: #B2ACAC;
	display: inline-block;
	padding: 8px;
	margin-top: 12px;
	margin-left: 52px;
}

.white .experience-education h4 {
	color: white;
}


@media (max-width: 767px) {

	h1 {
		font-size: 2.5rem;
	}

    .icons {
    	text-align: left;
    	margin-top: 24px;
    }

    .navbar-collapse {
		width: 100%;
	}

	.blurb {
		font-size: 1.25rem;
	}

	.blurb-container {
		margin-top: 40px;
		margin-bottom: 16px;
	}

	.circle-img {
		border-radius: 500px;
		width: 60%;
		margin: 0 auto;
		margin-bottom: 40px;
		display: block;
	}

	.experience-education h3 {
		margin-top: 8px !important;
		margin-bottom: 40px;
		margin-left: 0px !important;
		background-color: white !important;
	}

	.experience-education h4 {
		font-size: .875rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 2px;
		color: #FAF7F7;
		background-color: #B2ACAC;
		display: inline-block;
		padding: 8px;
		margin-top: 12px;
		margin-left: 0px !important;
	}

	.dotted-container {
		padding: 16px;
		opacity: 1;
		background-image: radial-gradient(#B2ACAC 1px, white 1px);
		background-size: 20px 20px;
	}

	.blurb-container {
		margin-top: 40px;
		margin-bottom: 20px;
		padding: 16px;
		background-color: #F8F7F7;
		opacity: 1;
		background-image: radial-gradient(#B2ACAC 1px, #F8F7F7 1px);
		background-size: 20px 20px;
	}

	.stand-alone-link {
		font-size: 1.5rem;
		color: #212121;
		font-weight: 700;
		display: inline-block;
		width: fit-content;
		margin-top: 16px;
	}

	.external-link-icon {
		font-size: 16px !important;
		display: inline-block;
		padding: 8px;
		background-color: #212121;
		border-radius: 50px;
		color: #FAF7F7;
		margin-right: 8px;
	}

	.external-link-icon-small {
		font-size: 16px !important;
		display: inline-block;
		padding: 8px;
		background-color: #212121;
		border-radius: 50px;
		color: #FAF7F7;
		margin-right: 8px;
	}

}