/* ///// base ///// */

	@font-face {
		font-family: 'din_next_lt_prolight';
		src: url('../fonts/dinnextltpro-light-webfont.woff2') format('woff2'),
			url('../fonts/dinnextltpro-light-webfont.woff') format('woff');
		font-weight: normal;
		font-style: normal;
	}
	@font-face {
		font-family: 'din_next_lt_promedium';
		src: url('../fonts/dinnextltpro-medium-webfont.woff2') format('woff2'),
			url('../fonts/dinnextltpro-medium-webfont.woff') format('woff');
		font-weight: normal;
		font-style: normal;
	}
	html, body {
		font-family: 'din_next_lt_prolight';
		font-weight: 300;
		color: #5C6268;
	}
	html {
		scroll-behavior: smooth;
	}
	a {
		color: #B28D34;
	}
	a:hover {
		color: #A07A28;
	}

/* ///// typography ///// */
	h1 {
		font-size: 7.5rem;
		line-height: 7.5rem;
		letter-spacing: -.175rem;
	}
	h1.site-title {
		font-size: 18vh;
		line-height: 17vh;
		color: rgba(255,255,255,0.9);
	}
	h2 {
		font-size: 7.25rem;
		line-height: 8.75rem;
		letter-spacing: -.15rem;
	}
	h3 {
		font-size: 4rem;
	  	line-height: 4.75rem;
	}
	h4 {
		font-size: 3rem;
		line-height: 3.5rem;
	}
	h5 {
		font-family: 'din_next_lt_promedium';
		font-size: 1rem;
		line-height: 1.5rem;
		text-transform: uppercase;
		letter-spacing: .125rem;
		opacity: 0.75;
	}
	h6 {
		font-family: 'din_next_lt_promedium';
		font-size: 1rem;
		line-height: 1.5rem;
	}
	p {
		font-size: 1rem;
		line-height: 1.75rem;
	}
	.large {
		font-size: 1.857rem;
		line-height: 2.5rem;
	}
	.small {
		font-size: .875rem;
		line-height: 1.125rem;
	}
	@media (max-width: 768px) {
		h1 {
			font-size: 3.75rem;
			line-height: 3.75rem;
			letter-spacing: 0;
		}
		h1.site-title {
			font-size: 8vh;
			line-height: 8vh;
		}
		h2 {
			font-size: 3.5rem;
			line-height: 3.75rem;
			letter-spacing: 0;
		}
		h3 {
			font-size: 2.75rem;
			line-height: 3.5rem;
		}
		h4 {
			font-size: 1.5rem;
			line-height: 2.25rem;
		}
		h5 {
			/*font-size: 1.25rem;*/
		}
		.large {
			font-size: 1.5rem;
			line-height: 2rem;
		}
		.Xcallout {
			font-size: 2.5rem;
			line-height: 3.25rem;
		}
	}


/* ///// colors ///// */
	.white-bg {
		background-color: #fff;
	}
	.white {
		color: #fff;
	}
	.gray-bg-100 {
		background-color: #5c6268;
	}
	.gray-100 {
		color: #5c6268;
	}
	.gray-bg-75 {
		background-color: #85898E;
	}
	.gray-75 {
		color: #85898E;
	}
	.gray-bg-50 {
		background-color: #AEB1B4;
	}
	.gray-50 {
		color: #AEB1B4;
	}
	.gray-bg-10 {
		background-color: #EFF0F0;
	}
	.gray-10 {
		color: #EFF0F0;
	}
	img.mobile-shadow {
		filter: drop-shadow(0 2px 8px rgba(0,0,0,.15));
	}


/* ///// spacing /////*/
	.vh-90 {
		min-height: 90vh;
	}
	.vh-80 {
		min-height: 80vh;
	}
	.vh-75 {
		min-height: 75vh;
	}
	.vh-66 {
		min-height: 66vh;
	}
	.vh-50 {
		min-height: 50vh;
	}
	.vh-33 {
		min-height: 33vh;
	}
	.vh-25 {
		min-height: 25vh;
	}
	.vh-20 {
		min-height: 20vh;
	}
	.vh-10 {
		min-height: 10vh;
	}
	.pt {
		padding-top: 96px;
		padding-bottom: 96px;
	}
	.pt-project {
		padding-top: 80px;
		padding-bottom: 80px;
	}	
	@media (max-width: 1440px) {
		.pt-project {
			padding-top: 48px;
			padding-bottom: 48px;
		}
	}
	@media (max-width: 565px) {
		.pt {
			padding-top: 54px;
			padding-bottom: 54px;
		}
		.pt-project {
			padding-top: 32px;
			padding-bottom: 16px;
		}
	}
	.spacer-24 {
		height: 24px;
	}
	.spacer-32 {
		height: 32px;
	}
	.spacer-48 {
		height: 48px;
	}
	.spacer-64 {
		height: 64px;
	}
	.spacer-72 {
		height: 72px;
	}
	.spacer-96 {
		height: 96px;
	}


/* ///// buttons ///// */
	.btn {
		min-width: 180px;
		padding: 16px 8px 16px 8px;
		border-radius: 100px;
	}
	.btn-primary {
		background-color: #232323;
		border-color: #232323;
	}
	.btn-primary:hover {
		background-color: #A07A28;
		border-color: #A07A28;
	}
	.btn-primary:focus {
		background-color: #A07A28;
		border-color: #A07A28;
	  box-shadow: 0 0 0 0.25rem rgb(160 122 40 / 50%);
	}
	.btn span {
		font-size: 1rem;
		left: 4px;
		top: 2px;
		position: relative;
		transition: all .2s;
		position: relative;
	}
	a.btn:hover span.east {
		left: 8px;
		position: relative;
	}
	.projectdetails-link {
		text-decoration: none;
		font-size: .875rem;
	}
	.projectdetails-link span {
		top: 6px;
		position: relative;
	}
	.scroll-down-arrow {
		z-index: 200;
		position: relative;
		width: 24px;
		display: inline-block;
		-webkit-transition: .2s ease-in-out;
		transition: .2s ease-in-out;
	}
	.scroll-down-arrow:hover {
		width: 32px;
	}


/* ///// navbar ///// */
	.navbar-brand {
		font-size: 1rem;
	}
	.nav-link {
		font-weight: 300;
		text-transform: uppercase;
	}
	.navbar-light .navbar-brand, .navbar-light span {
		color: #5C6268;
	}
	.navbar-light .navbar-nav .nav-link {
    	color: #5C6268;
		border: solid 1px rgba(0, 0, 0, 0);
		border-radius: 50px;
		padding: 8px 16px;
  	}
  	.navbar-dark .navbar-nav .nav-link {
    	color: #fff;
		border: solid 1px rgba(0, 0, 0, 0);
		border-radius: 50px;
		padding: 8px 16px;
	}
	.navbar-light .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:hover {
		border: solid 1px;
	}
	.navbar-dark a {
		color: #fff;
	}
	.progress-container {
		position: fixed;
		top: 50%;
		right: 40px;
		z-index: 5;
		height: 100px;
		width: 2px;
		background: rgba(152, 152, 158, 0.3);
		overflow: hidden;
		transform: translate(0, -50%);
	}
	@media (max-width: 576px) {
		.progress-container {
			right: 16px;
		}
	}
	.progress-bar {
		height: 1px;
		width: 2px;
		background: #B28D34;
	}
	.subnav .material-icons {
		font-size: 2rem;
		color: #5C6268;
		-webkit-transition: .2s ease-in-out;
		transition: .2s ease-in-out;
	}
	.subnav .material-icons:hover {
		color: #B28D34;
	}
	.subnav-shadow {
		box-shadow: 0px 4px 16px 2px rgba(0,0,0,.2);
	}


/* ///// hamburger menu overlay ///// */
  .hamburger-link {
    position: fixed;
    top: 32px;
    right: 24px;
    height: 14px;
    width: 24px;
    z-index: 1400;
  }
  .hamburger-icon {
    width: 24px;
    height: 14px;
    margin: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 1px;
  }
  .hamburger-bar {
    background-color: #222;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    position: absolute;
    left: 0;
    transition: all 0.25s ease-in-out;
  }
  .bar-white {
    background-color: #fff;
  }
  .hamburger-bar-2 {
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .hamburger-bar-3 {
    bottom: 0;
  }
  .hamburger-menu.open .hamburger-bar-1 {
    transform: translateY(7px) translateY(-50%) rotate(45deg);
    background-color: #222;
  }
  .hamburger-menu.open .hamburger-bar-2 {
    opacity: 0;
  }
  .hamburger-menu.open .hamburger-bar-3 {
    transform: translateY(-7px) translateY(50%) rotate(-45deg);
    background-color: #222;
  }
	.menu-overlay {
	  background-color: #fff;
	  color: #000;
	  height: 100%;
	  width: 100%;
	  position: fixed;
	  top: 0;
	  transition: opacity 0.2s ease-in-out;
	  z-index: 250;
	  opacity: 0;
	  visibility: hidden;
	  z-index: 1200;
	}
	.menu-overlay.open {
	  opacity: 1;
	  visibility: visible;
	}
	.menu-overlay a {
		font-size: 3.5rem;
		line-height: 5.5rem;
		text-decoration: none;
		font-weight: 500;
		color: #5C6268;
		text-transform: uppercase;
	}
	.menu-overlay a:hover {
		color: #B28D34;
	}
	@media (max-width: 576px) {
		.menu-overlay a {
			font-size: 2.5rem;
			line-height: 3.5rem;
		}
	}


/* ///// footer ///// */
	footer a {
		color: #5C6268;
		text-decoration: none;
	}
	.footer-icon {
		width: 24px;
		height: 24px;
	}
	.footer-icon:hover path {
		fill: #A07A28;
	}


/* ///// sections ///// */
	#intro {
		top: -91px;
		position: relative;
		margin-bottom: -91px;
	}
	@media (max-width: 576px) {
		#intro {
			top: -66px;
			margin-bottom: -66px;
		}
	}
	.wireframe-grid {
		background-image: url(https://res.cloudinary.com/mplgraphics/f_auto,q_auto/mplgraphics/wireframe-grid.png);
		background-attachment: fixed;
	}

	ul.about-list {
		margin: 0;
	  padding: 0;
		list-style-type: none;
	}
	.about-list li {
		border-top: solid 1px rgba(69,69,69,.25);
		padding: 12px;
		margin: 0;
	}
	.about-list li:last-child {
		border-bottom: solid 1px rgba(69,69,69,.25);
	}
	@media (max-width: 991px) {
		.about-list li {
			padding: 8px 16px !important;
		}
		.about-list li:last-child {
			border-bottom: none;
		}
	}
	.border-left {
		border-left:  solid 1px #dee2e6;
	}
	@media (max-width: 767px) {
		.border-left{
			border-left: none;
		}
	}


/* ///// portfolio ///// */
	.card {
		border-radius: 0;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
		border: none;
		-webkit-transition: .2s ease-in-out;
		transition: .2s ease-in-out;
	}
	.card-img, .card-img-top {
		border-radius: 0;
	}
	.card-body {
		padding: 1.5rem;
		color: #5C6268;
	}
	.badge, .card-text span {
		font-weight: 300;
		color: #5C6268;
		border-radius: .25rem;
		border: solid 1px rgba(0,0,0,.25);
	}
	.card figure {
		overflow: hidden;
		margin: 0;
		padding: 0;
		border-radius: 0;
	}
	a.card-link {
		text-decoration: none;
	}
	a.card-link figure {
	    overflow: hidden;
	    margin: 0;
	    padding: 0;
	}
	a.card-link figure img {
	    -webkit-transform: scale(1);
	    transform: scale(1);
	    -webkit-transition: .3s ease-in-out;
	    transition: .3s ease-in-out;
	}
	a.card-link:hover figure img {
	    -webkit-transform: scale(1.25);
	    transform: scale(1.25);
	}

	a.project-nav span {
	    -webkit-transform: scale(1);
	    transform: scale(1);
	    -webkit-transition: .3s ease-in-out;
	    transition: .3s ease-in-out;
	}
	a.project-nav:hover span {
	    -webkit-transform: scale(1.1);
	    transform: scale(1.1);
	}
	.header-pivotal-background-image {
		background: url(https://res.cloudinary.com/mplgraphics/q_auto/mplgraphics/header-pivotal-background.jpg) no-repeat top center;
		background-size: cover;
	}
	.header-kim-gallant-background-image {
		background: url(https://res.cloudinary.com/mplgraphics/q_auto/mplgraphics/header-kim-gallant-background.jpg) no-repeat top center;
		background-size: cover;
	}
	.header-nationwide-background-image {
		background: url(https://res.cloudinary.com/mplgraphics/q_auto/mplgraphics/header-nationwide-background.jpg) no-repeat center center;
		background-size: cover;
	}
	.header-plexus-design-system-background-image {
		background: url(https://res.cloudinary.com/mplgraphics/q_auto/mplgraphics/header-plexus-design-system-background.jpg) no-repeat top center;
		background-size: cover;
	}
	.header-plexus-background-image {
		background: url(https://res.cloudinary.com/mplgraphics/q_auto/mplgraphics/header-plexus-background.jpg) no-repeat bottom center;
		background-size: cover;
	}
	.header-branding-background-image {
		background: url(https://res.cloudinary.com/mplgraphics/q_auto/mplgraphics/header-branding-background.jpg) no-repeat center center;
		background-size: cover;
	}
	.aboutme-bg {
		background-image: url(https://res.cloudinary.com/mplgraphics/f_auto,q_auto/mplgraphics/about-at-desk.jpg);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	.about-background {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-image: url(https://res.cloudinary.com/mplgraphics/q_auto:best/mplgraphics/about-mark-cutout.png);
		background-repeat: no-repeat;
		background-position: 95% bottom;
		background-size: contain;
	}
	@media (max-width: 768px) {
		.about-background {
			background-position: center bottom;
			background-size: 150%;
		}
	}
	@media (max-width: 576px) {
		.about-background {
			background-position: center bottom;
			background-size: 200%;
		}
	}



.scroll-indicator {
	width: 28px;
	height: 44px;
	border-radius: 24px;
	border: solid 2px #000;
	background-color: #fff;
	display: inline-block;
}
.scroll-indicator div {
	width: 8px;
	height: 8px;
	background-color: #000;
	border-radius: 100%;
	margin: 4px auto 4px auto;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.scroll-indicator:hover div {
	margin: 28px auto 4px auto;
}


/* ///// animation ///// */
	.fadein {
		animation: fadeIn ease 1s;
		-webkit-animation: fadeIn ease 1s;
		-moz-animation: fadeIn ease 1s;
		-o-animation: fadeIn ease 1s;
		-ms-animation: fadeIn ease 1s;
	}
	@keyframes fadeIn {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

  .wireframe-iphone {
    width: 160px;
    top:  50%;
    position: relative;
    animation: iphone 28s;
    animation-iteration-count: infinite;
    z-index: 100;
    opacity: 0.7;
    /*animation-delay: 2s;*/
  }
  @keyframes iphone {
    from {
      left: -600px;
    }
    to {
      left: 110%;
    }
  }
  .wireframe-macbook {
    height: 280px;
    left: 60%;
    animation: macbook 22s;
    animation-iteration-count: infinite;
    z-index: 100;
    opacity: 0.7;
  }
  @keyframes macbook {
    from {
      top: -280px;
    }
    to {
      top: 120%;
    }
  }
  .wireframe-ipad {
    height: 340px;
    left: 20%;
    animation: ipad 40s;
    animation-iteration-count: infinite;
    z-index: 100;
    opacity: 0.7;
  }
  @keyframes ipad {
    from {
      top: -600px;
    }
    to {
      top: 200%;
    }
  }
	.wireframe-samsung {
	    height: 280px;
	    left: 40%;
	    top:  -400px;
	    animation: samsung 50s;
	    animation-iteration-count: infinite;
	    animation-delay: 12s;
	    z-index: 100;
	    opacity: 0.7;
	  }
	  @keyframes samsung {
	    from {
	      top: -400px;
	    }
	    to {
	      top: 200%;
	    }
	  }

	.animate-intro {
		z-index: 100;
		left: 0;
		top: 0;
	}
	.fade-in {
		position: relative;
		-webkit-transition-delay: 5s;
		-o-transition-delay: 5s;
		transition-delay: 5s;
		-webkit-transition: .7s;
		-o-transition: .7s;
		transition: .7s;
		opacity: 0;
	}
	.scale-in {
		-webkit-transition-delay: 5s;
		-o-transition-delay: 5s;
		transition-delay: 5s;
		-webkit-transition: .7s;
		-o-transition: .7s;
		transition: .7s;
		transform: scale(0.75);
	}
	.inView {
	   opacity: 1;
	   transform: scale(1);
	}

	.project-shadow {
		box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	}