body {
	color: #000;
	max-width: 100vw;
	/*	padding-left: 60px;*/
	/*	padding-right: 60px;*/
	margin-left: auto;
	margin-right: auto;
	transition: 0.9s all;
	/*	background-color: #F2BB05;*/
	overflow-x: hidden;
	text-align: left;
	background-color: white;
}

.wrapper {
	max-width: 100vw;
	/*			background-color: rgb(0, 10, 0, .2);*/
	margin-left: auto;
	margin-right: auto;
	z-index: -2;
	overflow-x: hidden;
}


/* hamburger menu start*/

header {
	position: fixed;
	padding: 20px;
	left: 0px;
	/*	right:0px;*/
	max-width: 100vw;
	color: black;
	z-index: 6;
}

header h1 a {
	font-size: 45px;
	font-family: arno-pro-display, serif;
	font-weight: 600;
	font-style: normal;
color: black;
}

header h1 a:hover{
	color: #E8AD1C;
		transition: 0.3s ease-in-out;


}

.nav {
	-webkit-transition: 0.5s ease;
	-moz-transition: 0.5s ease;
	-ms-transition: 0.5s ease;
	-o-transition: 0.5s ease;
	transition: 0.5s ease;
	background: black;
	color: black;
	height: 100vh;
	/*	left: -400px;*/
	right: -400px;
	padding: 40px;
	position: fixed;
	top: 0;
	width: 400px;
	;
	z-index: 1;
}

.nav.expanded {
	right: 0;
}

nav .mainlinks {
	padding-top: 50%;
}

nav a {
	z-index: 50;
}

nav .mainlinks a {
	font-size: 48px;
	font-family: arno-pro-display, serif;
	font-weight: 700;
	text-decoration: none;
	display: block;
	margin-bottom: 0px;
	line-height: 1.2;
	color: white;
	z-index: 50;
}

nav .mainlinks a:hover,
nav .social a:hover {
	color: #E8AD1C;
	text-decoration: none;
	transition: .3s;
	z-index: 50;
}

nav .social {
	padding-top: 50px;
	line-height: 1.4;
	font-weight: 300;
	z-index: 50;
}

nav .social a {
	font-size: 22px;
	font-family: arno-pro-display, serif;
	text-decoration: none;
	display: block;
	margin-bottom: 0px;
	color: white;
	line-height: 1.5;
	z-index: 50;
}

.nav-toggle {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	cursor: pointer;
	height: 12px;
	right: 30px;
	position: fixed;
	top: 34px;
	width: 35px;
	z-index: 2;
}

.nav-toggle:hover {
	opacity: 0.8;
}

.nav-toggle .nav-toggle-bar,
.nav-toggle .nav-toggle-bar::after,
.nav-toggle .nav-toggle-bar::before {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	background: black;
	/*	^ bar colors*/
	content: '';
	height: 2px;
	width: 100%;
}

.nav-toggle .nav-toggle-bar {
	margin-top: 0;
}

.nav-toggle .nav-toggle-bar::after {
	margin-top: 8px;
}

.nav-toggle .nav-toggle-bar::before {
	margin-top: -8px;
}

.nav-toggle.expanded .nav-toggle-bar {
	background: transparent;
}

.nav-toggle.expanded .nav-toggle-bar::after,
.nav-toggle.expanded .nav-toggle-bar::before {
	background: white;
	/*	expanded color*/
	margin-top: 0;
}

.nav-toggle.expanded .nav-toggle-bar::after {
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.nav-toggle.expanded .nav-toggle-bar::before {
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

nav .menu-contact {
	position: fixed;
	bottom: 10px;
	color: white;
	/*	font-size: 20px;*/
	word-spacing: 1.5;
}

nav .menu-contact a {
	letter-spacing: 1.5;
	color: white;
	font-size: 15px;
}

.menu-contact hr {
	width: 400px;
	margin-left: 0px;
	border-top: 0px solid #ffffff;
	border-bottom: .5px solid #ffffff;
}

.menu-contact a:hover {
	transition: 0.3s;
}


/* hamburger menu end*/


/* HOME PAGE STARTS*/

.home-bg {
	background-color: #f1f0f2;
	height: 100vh;
	color: black;
}

.home-hero-text {
	color: white;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	max-width: 650px;
	margin-left: auto;
	margin-right: auto;
}

.home-intro-text .home-intro-left h2 {
	font-size: 20px;
	font-family: acumin-pro, sans-serif;
	font-weight: 700;
}

.home-hero-text h3 {
	font-size: 50px;
	font-family: arno-pro-display, serif;
	font-weight: 700;
	line-height: 1.3;
}

.home {
	width: 100vw;
}

.home-intro {
	height: 100vh;
	background-color: #f9f9f9;
	margin: auto;
}

.home-intro-text {
	display: flex;
	flex: wrap;
	max-width: 80vw;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	padding: 30px 0px 30px 0px;
}

.home-intro .home-intro-left {
	font-size: 40px;
	font-family: arno-pro-display, sans-serif;
	line-height: 1.1;
	/*	max-width: 550px;*/
	max-width: 60%;
}

.home-intro .home-intro-left h2 {
	font-size: 20px;
	font-family: acumin-pro, sans-serif;
	padding-bottom: 10px;
	line-height: 1.1;
	max-width: 100%;
}

.home-intro-right {
	margin: auto;
}

.home-intro .home-intro-left p {
	font-size: 18px;
	font-family: arno-pro, serif;
	line-height: 1.1;
	font-weight: 400;
	/*	max-width: 550px;*/
	max-width: 100%;
	padding-top: 16px;
	text-decoration: none;
	color: rgb(0,0,0,.4);
}

.home-intro .home-intro-left p a:hover {
	color: #E8AD1C;
	transition: .3s;
}

.home-intro .home-intro-text .home-intro-left h4 {
	font-family: arno-pro, serif;
	font-weight: 400;
	font-style: normal;
}

.home-intro .home-intro-right {
	font-size: 13px;
	font-family: acumin-pro, sans-serif;
	font-weight: 400;
	line-height: 1.2;
	/*	position:inherit;*/
	width: 25%;
	/*	margin-left: 50px;	*/
	padding-left: 00px;
	margin-left: auto;
	margin-right: auto;
}

.home-intro .home-intro-right img {
	max-width: 350px;
	/*	margin: auto;*/
	margin: 0px 0px;
	padding-right: 40px;
}

.home-intro .home-intro-right .home-specs {
	max-width: 200px;
}

.home-specs hr {
	width: 25px;
	margin-left: 0px;
	border-top: 0px solid #000000;
	border-bottom: .5px solid #000000;
	/*	padding-bottom:5px;*/
	margin-top: 10px;
	margin-bottom: 10px;
}

.home-intro-right .home-title {
	font-weight: 600;
	font-variant-numeric: slashed-zero;
}

.home-content {
	background-color: white;
	width: 80vw;
	margin: auto;
	padding-top: 0px;
}

.home-content .content-row {
	display: flex;
	flex-wrap: wrap;
	margin-top: 50px;
}

.home-content .content-row div {
	width: 40%;
	margin: auto;
}

.content-row .imgBox .home-project-title {
	color: black;
	background-color: white;
	font-size: 20px;
	font-family: arno-pro-display, serif;
	line-height: 1.1;
	font-weight: 600;
	z-index: 5;
	position: relative;
	padding-top: 10px;
	padding-bottom: 1px;
	text-align: center;
}

.content-row .imgBox .home-project-desc {
	color: rgb(0, 0, 0, .4);
	background-color: white;
	font-size: 14px;
	font-family: acumin-pro, sans-serif;
	padding-bottom: 10px;
	line-height: 1.1;
	max-width: 100%;
	z-index: 5;
	position: relative;
	padding-top: 0px;
	text-align: center;
}

.imgBox {
	/* now a container for the image */
	display: inline-block;
	/* shrink wrap to image */
	overflow: hidden;
	/* hide the excess */
	z-index: 1;
}

.imgBox img {
	display: block;
	/* no whitespace */
	transition: 1.15s ease;
}

.imgBox:hover img {
	transform: scale(1.1);
}


/* HOME PAGE ENDS*/


/*about page*/


/*ABOUT PAGE ENDS*/

.about {
	width: 100vw;
}

.about-intro {
	height: 80vh;
	background-color: #f9f9f9;
	margin: auto;
}


.aend{
	height: 50vh;
	margin-top: 0px;
	margin: auto;
}
.about-end{
	background-color: white;

}


.about-intro-text {
	display: flex;
	flex: wrap;
	max-width: 80vw;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	padding: 30px 0px 30px 0px;
}


.end-text{
	top: 0%;
	transform: translateY(0%);
	padding-top: 40px;
}


.about-intro .about-intro-left {
	font-size: 40px;
	font-family: arno-pro-display, sans-serif;
	line-height: 1.1;
	max-width: 60%;
}

.about-intro .about-intro-left h2 {
	font-size: 20px;
	font-family: acumin-pro, sans-serif;
	padding-bottom: 10px;
	line-height: 1.1;
	max-width: 100%;
	font-weight: 700;
}

.about-intro-right {
	margin: auto;
}

.about-intro .about-intro-left p {
	font-size: 18px;
	font-family: arno-pro, serif;
	line-height: 1.1;
	font-weight: 400;
	/*	max-width: 550px;*/
	max-width: 100%;
	padding-top: 16px;
	text-decoration: none;
	color: rgb(0, 0, 0, .4)
}

.about-intro .home-intro-left p a:hover {
	color: #E8AD1C;
	transition: .3s;
}

.about-intro .about-intro-text .about-intro-left h4 {
	font-family: arno-pro, serif;
	font-weight: 400;
	font-style: normal;
}

.about-intro .about-intro-right {
	font-size: 13px;
	font-family: acumin-pro, sans-serif;
	font-weight: 400;
	line-height: 1.2;
	/*	position:inherit;*/
	width: 25%;
	/*	margin-left: 50px;	*/
	padding-left: 00px;
	margin-left: auto;
	margin-right: auto;
}

.about-intro .about-intro-right .about-specs {
	max-width: 200px;
}

.about-text-left {
	width: 30%;
}
.about-column-left a p{
		display: inline;
		max-width: 100%;

	}



/*project hero*/

.pol-bg {
	/* The image used */
	background-image: url("../projects/pol/pol_hero.jpg");
	/* Set a specific height */
	height: 100vh;
	filter: brightness(70%);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	/*
  parallax scrolling effect
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
*/
}

.pathways-bg {
	/* The image used */
	background-image: url("../projects/pathways/pathways_hero.jpg");
	/* Set a specific height */
	height: 100vh;
	filter: brightness(70%);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.microsite-bg {
	/* The image used */
	background-image: url("../projects/microsite/microsite_10.png");
	/* Set a specific height */
	height: 100vh;
	filter: brightness(55%);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}


.duchenne-bg {
	/* The image used */
	background-image: url("../projects/duchenne/duchenne_hero.png");
	/* Set a specific height */
	height: 100vh;
	filter: brightness(50%);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.barefoot-bg {
	/* The image used */
	background-image: url("../projects/barefoot/barefoot_05.jpg");
	/* Set a specific height */
	height: 100vh;
	filter: brightness(50%);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.anew-bg {
	/* The image used */
	background-image: url("../projects/anew/anew_hero.jpg");
	/* Set a specific height */
	height: 100vh;
	filter: brightness(70%);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.md-bg {
	/* The image used */
	background-image: url("../projects/md/md-hero.jpg");
	/* Set a specific height */
	height: 100vh;
	filter: brightness(60%);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.boeing-bg {
	/* The image used */
	background-image: url("../projects/boeing/boeing_hero.jpg");
	/* Set a specific height */
	height: 100vh;
	filter: brightness(50%);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.uc-bg {
	/* The image used */
	background-image: url("../projects/uc/uc_03.jpg");
	/* Set a specific height */
	height: 100vh;
	filter: brightness(60%);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.tedx-bg {
	/* The image used */
	background-image: url("../projects/tedx/ted_hero.jpg");
	/* Set a specific height */
	height: 100vh;
	filter: brightness(80%);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.play-bg {
	/* The image used */
	background-color: #f1f0f2;
	/* Set a specific height */
	height: 100vh;
	color: black;
	filter: brightness(100%);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}


.hero-text {
	color: white;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	max-width: 650px;
	margin-left: auto;
	margin-right: auto;
}

.play-text {
	color: black;
}

.hero-text h2 {
	font-size: 20px;
	font-family: acumin-pro, sans-serif;
	font-weight: 700;
}

.hero-text h3 {
	font-size: 50px;
	font-family: arno-pro-display, serif;
	font-weight: 700;
	line-height: 1.3;
}


/*end project hero*/


/*project intro*/

.project {
	width: 100vw;
}

.project-intro {
	height: 70vh;
	background-color: #f9f9f9;
	/*	color: white;*/
	/*	padding: 80px 0px 80px 0px;*/
	/*	padding: auto;*/
	margin: auto;
}

.project-intro-text {
	display: flex;
	flex: wrap;
	max-width: 70vw;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	padding: 30px 0px 30px 0px;
}

.project-intro .intro-left {
	font-size: 30px;
	font-family: arno-pro-display, sans-serif;
	line-height: 1.1;
	/*	max-width: 550px;*/
	max-width: 60%;
}

.project-intro .intro-left p {
	font-size: 16px;
	font-family: arno-pro, serif;
	line-height: 1.1;
	font-weight: 400;
	/*	max-width: 550px;*/
	max-width: 70%;
	padding-top: 16px;
}

.project-intro .intro-left p a {
	text-decoration: none;
	color: rgb(0,0,0,.4);
	font-size: 18px;
	/*	text-decoration:underline;*/
}

.project-intro .intro-left p a:hover {
	color: #E8AD1C;
	transition: .3s;
}

.project-intro .project-intro-text .intro-left h4 {
	font-family: arno-pro, serif;
	font-weight: 400;
	font-style: normal;
}

.project-intro .intro-right {
	font-size: 13px;
	font-family: acumin-pro, sans-serif;
	font-weight: 400;
	line-height: 1.2;
	/*	position:inherit;*/
	width: 20%;
	/*	margin-left: 50px;	*/
	padding-left: 00px;
	margin-left: auto;
	margin-right: auto;
}

.project-intro .intro-right .project-specs {
	max-width: 200px;
}

.project-specs hr {
	width: 25px;
	margin-left: 0px;
	border-top: 0px solid #000000;
	border-bottom: .5px solid #000000;
	/*	padding-bottom:5px;*/
	margin-top: 10px;
	margin-bottom: 10px;
}

.intro-right .project-time {
	font-weight: 600;
	font-variant-numeric: slashed-zero;
}


/*end intro*/


/*project desc*/

.body-text {
	font-size: 15px;
	font-family: acumin-pro, sans-serif;
	line-height: 1.4;
	display: flex;
	flex: wrap;
	width: 75vw;
	margin: 100px auto 50px auto;
}

.body-text-left {
	width: 30%;
}


.body-text-left p {
	margin-top: auto;
	font-size: 14px;
	line-height: 1.5;
	margin-top: -24px;
	font-family: acumin-pro, sans-serif;
	font-weight: 700;
	color: rgb(0, 0, 0, .22);
	letter-spacing: 1.5;
}

.body-text-right {
	width: 70%;
	padding: 0px 20px 0px 90px;
}

.body-text-left h6 {
	font-weight: 700;
	max-width: 90%;
	font-size: 18px;
}



a {
	text-decoration: none;
	color: rgb(0,0,0,.4);
	/*	text-decoration:underline;*/
}

a:hover {
	color: #E8AD1C;
	transition: .3s;
}

.about-content {
	max-width: 80vw;
	margin: 0px auto;
}

.about-image img {
	max-width: 105%;
	padding; 0px;
	margin: 0px;
}

.about-extra {
	padding: 50px;
	height: 550px;
	background-color: #f9f9f9;
	line-height: 1.3;
	font-family: acumin-pro, sans-serif;
	font-size: 16px;
	margin:auto;
}

.about-extra-text {
	max-width: 75vw;
	text-align: left;
	margin: auto;
	display: flex;
	flex: wrap;
	background-color: #f9f9f9;

}

.about-column-left {
	width: 30%;
}

.about-column-right {
	width: 70%;
	padding: 0px 0px 0px 90px;
	display: flex;
	flex: wrap;
}

.about-column-right div{
	width: 500px;
}
.about-extra-text h6 {
	font-weight: 700;
	max-width: 90%;
	font-size: 18px;
	font-family: acumin-pro, sans-serif;
	font-weight: 700;
	padding-bottom: 20px;
}

.about-column-right h7, .about-column-left h7 {
	font-weight: 600;
	font-size: 14px;
	font-variant-numeric: slashed-zero;
}

.about-column-right p, .about-column-right ul{
	font-size: 12px;
	font-family: acumin-pro, sans-serif;
	font-weight: 400;
	line-height: 1.2;
}


.about-contact {
	height: 300px;
}

.res-left{
	margin-right: 0px;
	padding-right: 10px;
/*	width: 100%;*/
}
.res-right{
	padding-left: 20px;
/*	width: 100%;*/

}

/*
span:before{
	content:'';
	animation: animate infinite 5s;
	color: #E8AD1C;
	font-weight: 600;
}


@keyframes animate{
	0%{
		content: 'project?';
	}
	33%{
		content: 'visual experience?';
	}
	66%{
		content: 'brand?';
	}
	100%{
		content: 'collaboration?';
	}
}
*/

.
/*

Start images formatting

*/

.img-fullwidth {
	padding: 0px 0px;
}

.img-inner-01 {
	margin-left: auto;
	margin-right: auto;
	padding: 0px 10vw;
	margin: 50px 0px 0px 0px;
}

.two-images-inner {
	display: flex;
	flex: wrap;
	width: 80vw;
	margin-left: auto;
	margin-right: auto;
	padding: 50px 0px 00px 0px;
}

.two-images-inner div {
	width: 50%;
	padding: 0vw 0vw;
}

.two-images-inner-left {
	margin-right: 3vw;
}

.two-images-inner-right {
	margin-left: 3vw;
}

.two-images-inner-edge {
	display: flex;
	flex: wrap;
	width: 100vw;
	margin-left: auto;
	margin-right: auto;
	padding: 50px 10px 50px 10px;
}

.two-images-inner-edge div {
	width: 50%;
	padding: 0vw 0vw;
	border-left: 10px solid black;
	border-right: 10px solid black;
}

.play-grid{

	width: 80vw;
	margin: 50px auto;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-end;
	margin-bottom: 40px;
}

.play-grid div {
	width: 33.3%;
	position: relative;
}




/*
.two-images-edge{
	display: flex;
	flex:wrap;


	padding: 0px 0px 100px 0px;
}

.two-images-edge div{
	width: 50%;
}

.two-images-left-edge-left img{
	width: 80%;
}

.two-images-left-edge-right {
	padding: 0px 5vw 0px 1vw;

}
*/


/*END IMAGE STYLING*/


/*START VIDEO STYLING*/

.embed-vid-pol {
	background-color: #f1f0f2;
	justify-content: center;
	margin: 0px 0px;
}

.embed-vid-pol .pol-video {
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.embed-vid-pathways {
	background-color: #6fa7e6;
	justify-content: center;
	margin: 0px 0px;
}

.embed-vid-pathways .pathways-video {
	margin-left: auto;
	margin-right: auto;
	padding: 100px 0px 100px 0px;
	display: block;
}

.two-images-inner-right .play-uc-video{
	margin-left: auto;
	margin-right: auto;
	padding: 0px 0px 0px 0px;
	display: block;
}



.embed-vid-anew {
	background-color: #e3ab90;
	justify-content: center;
	margin: 0px 0px;
}

.embed-vid-anew .anew-video {
	margin-left: auto;
	margin-right: auto;
	padding: 100px 0px 100px 0px;
	display: block;
	width: 70%;
}

.embed-vid-md-intro {
	background-color: #eeeeee;
	justify-content: center;
	margin: 0px 0px;
}

.embed-vid-md-intro .md-video-intro {
	margin-left: auto;
	margin-right: auto;
	padding: 100px 0px 100px 0px;
	display: block;
	width: 70%;
}

.embed-vid-md-site {
	background-color: #0a0a0a;
	justify-content: center;
	margin: 0px 0px;
}

.embed-vid-md-site .md-video-site {
	margin-left: auto;
	margin-right: auto;
	padding: 100px 0px 100px 0px;
	display: block;
	width: 70%;
}

.embed-vid-uc {
	background-color: #ada4a5;
	justify-content: center;
}

.embed-vid-uc .uc-video {
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 100%;
}


/**/


/*MISC*/

.spacing-between-small {
	height: 25px;
}

.spacing-between {
	height: 50px;
}

footer {
	margin-top: 50px;
	background-color: #f9f9f9;
	padding: 5vw 10vw;
}

.footer-text {
	display: flex;
	flex: wrap;
}

.footer-text div {
	width: 50%;
}

.footer-text .next-proj {
	font-size: 16px;
	padding: 5px;
	font-family: acumin-pro, sans-serif;
	font-weight: 700;
}

.footer-text .next-proj-name {
	font-size: 30px;
}

footer .footer-left {
	font-size: 13px;
	font-family: acumin-pro, sans-serif;
	font-weight: 400;
	line-height: 1.2;
}

footer hr {
	width: 25px;
	margin-left: 0px;
	border-top: 0px solid #000000;
	border-bottom: .5px solid #000000;
	/*	padding-bottom:5px;*/
	margin-top: 10px;
	margin-bottom: 10px;
}

footer .project-time {
	font-weight: 600;
	font-variant-numeric: slashed-zero;
}

footer .next-proj {
	margin: auto;
}

.next-proj a {
	color: black;
	right: 0px;
	margin-left: 2vw;
}

.next-proj p {
	font-family: arno-pro, serif;
	font-weight: 400;
	font-style: normal;
	font-size: 26px;
	line-height: 1.1;
	padding-top: 5px;
	color: darkgray;
	margin-left: 2vw;
}

.next-proj p:hover,
.next-proj a:hover {
	color: #E8AD1C;
	transition: .3s;
}


.progress-container {
  height: 0px;
  width: 0px;
  background: #ccc;
  position: fixed;
}

.progress-bar {
  height: 100vh;
  background: #E8AD1C;;
  width: 6px;
  position: fixed;
  top: 0px;
	transition: ease-in-out;
}