*{
	box-sizing: border-box;
}

body{
	font-family: 'Roboto', sans-serif;
	margin: 0;
}

a:hover, a:active, a:focus{
    text-decoration: underline;
}

.left{
	float: left;
}

.right{
	float: right;
}

.flex{
	display: flex;
}

.flex-reverse{
	display: flex;
  flex-direction: row-reverse;
	justify-content: center;
}

.flex-even{
	flex: 1 1 0;
}

.flex-center{
	align-self: center;
}

.role.flex{
	gap: 1em;
}

.half{
	width: 50%;
}

.clearfix{
	clear: both;
	display: block;
}

.container{
    margin: 2em auto;
    width: 85%;
    /*height: 100vh;*/
}

.container-60{
	width: 60%;
	margin: 0 auto;
}

.container-75{
	width: 75%;
	margin: 0 auto;
}

.main-drag{
	width: 60%;
}

.side-car{
	width: 40%;
}

.site-name{
    font-size: 1.15em;
    letter-spacing: .15em;
	font-weight: normal;
}

.site-name a{
	text-decoration:none;
	color: inherit;
}

.site-name a:hover, .site-name a:active, .site-name a:focus{
    text-decoration: underline;
}

nav ul.menu {
	margin-top: .8em;
}

nav ul.menu li{
	float: left;
	list-style-type: none;
}

nav ul.menu li a{
	text-decoration: none;
    color: black;
    margin-right: 1.5em;
    font-size: 1.1em;
    text-transform: uppercase;
}

nav ul.menu li a:hover, nav ul.menu li a:active, nav ul.menu li a:focus{
    text-decoration: underline;
}

.landing{
    margin-bottom: 38vh;
    margin-top: 22vh;
}

.title{
    font-size: 6em;
	font-weight: normal;
	margin: 0;
}

.pitch{
	margin-top: .4em;
}

.pitch p{
    margin: 0;
    line-height: 1.5em;
	font-weight: 300;
}

.pitch__link{
	color: #ff5252;
    top: .6em;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    font-size: .95em;
}

a.pitch__link:hover, a.pitch__link:focus{
	color:#B30606;
}

.project-list, .project-list ul{
	list-style-type: none;
	box-sizing: border-box;
}

.project-info{
	margin-top: 3em;
	font-size: 110%;
	margin-left: 3em;
}

.project-info li p{
	font-weight: bold;
	margin-bottom: 0;
}

.project-info li ul{
	font-weight: 300;
	margin: 0;
	padding: 0;
	line-height: 1.6em;
}

.project-list img, .project img{
	width: 100%;
	height: auto;
}

.project-list__item{
    margin: 8em auto;
}

.project-list__blurb{
	margin-top: 6em;
}

.project-list h2{
	font-weight: normal;
    font-size: 2em;
}

.project-list p{
	font-weight: 300;
    line-height: 1.5em;
}

ol{
	padding: 0 2em;
}

ol li:first-child {
	padding-top: 0;
}

ol li{
	padding: 1em 0;
}

img.img-tablet{
	width: 90%;
}

img.img-responsive{
	width: 100%;
}

.project-link{
	text-decoration: none;
	color: inherit;
}

.project__intro--container{
	background: #444a46;
    padding: 2em 0em 5em;
    margin: 2em auto 6em;
}

.project__intro{
	width: 30em;
    margin: 4em auto;
    text-align: center;
    color: white;
}

.project__text--intro{
	font-weight: 300;
    line-height: 1.6em;
}

.project__title{
	font-size: 3em;
}

.project__text{
	font-weight: 300;
    font-size: 1.25em;
    line-height: 1.6em;
}

.project__text a{
	text-decoration: none;
	color: #ff5252;
}

.project__text a:hover, .project__text a:focus{
	color:#B30606;
}

.container-narrow{
	width: 50%;
	margin: 0 auto;
}

.project__section{
	margin-top: 5em;
    margin-bottom: 6em;
}

.project__section h3{
	font-size: 2.3em;
}

.project__section h4{
	font-size: 1.2em;
}

.project__section .concept-bg.flex:first-child{
	margin-bottom: 2em;
}

.container-img{
	box-sizing: border-box;
	background: #fafafa;
	width: 90%;
	min-height: 3em;
	margin: 7em auto;
}

.container-img img{
	width: auto;
    height: auto;
    margin: 0 auto;
    display: block;
}

.container-img figcaption{
	position: absolute;
	margin: 1em auto 0;
	left: 0;
	right: 0;
}

.container-bg{
	background: #fafafa;
}

.bumpers{
	padding: 3em 0;
}

.bumpers-small{
	padding: 1em;
}

.bumper-top{
	padding-top: 3em;
}

.bumper-left{
	padding-left: 2em;
}

.bumper-left--large{
	padding-left: 7em;
}

.concept__intro{
	width: 50em;
}

.concept-bg{
	background: #E8EDEE;
	margin:1em;
}

.concept-bg img{
	margin-bottom: -4px;
}

.concept--title{
	text-align: center;
	padding:2em 3em;
}

.concept--title .project-link{
	text-align: center;
	float: none;
}

.concept--title__wide{
	background: #747E81;
	width: 40%;
	align-self: center;
	padding: 1em 3em 3em;
	color: #fff;
	margin-left: 7%;
}

.concept--title__wide.reverse{
	margin-left: 0;
	background: #fff;
	color: inherit;
}

.concept--title h3{
	font-size: 1.7em;
}

.concept--img__wide{
	width: 60%;
	margin-top: 5%;
}

.concept--img__tall{
	width: 31%;
  margin-top: 5%;
	margin-right: -5px;
}

.concept--img__center{
	margin: 1em;
}

.container-img .flex img{
	height: 100%;
	width: auto;
}

.insight-grid{
	display: grid;
  	grid-template-columns: 1fr 1fr 1fr;
  	grid-template-rows: auto;
  	grid-template-areas:
    "insight1 insight2 insight3"
    "solution1 solution2 solution3";
	grid-column-gap: 60px;
  	grid-row-gap: 30px;
	margin: 5em auto;
}

.insight-grid h4, .insight-grid p{
	margin: 0;
}

.insight-grid h4{
	text-transform: uppercase;
	font-size: 1em;
	font-weight: bold;
	margin-bottom: .3em;
}

.insight-grid p{
	font-size: .9em;
}

.insight1{
	grid-area: insight1;
}

.insight2{
	grid-area: insight2;
}

.insight3{
	grid-area: insight3;
}

.solution1{
	grid-area: solution1;
}

.solution2{
	grid-area: solution2;
}

.solution3{
	grid-area: solution3;
}

.design-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	grid-template-areas:
		"design1 masonry";
}

.grid-masonry{
	grid-area: masonry;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-template-areas:
		"design2 design2"
		"comingsoon comingsoon"
		"mobile1 mobile2";
}

.design1{
	grid-area: design1;
}

.design2{
	grid-area: design2;
}

.comingsoon{
	grid-area: comingsoon;
}

.mobile1{
	grid-area: mobile1;
}

.mobile2{
	grid-area: mobile2;
}

figure{
	margin: 0;
}

figure + figure{
	margin-top: 4em;
}

figcaption{
	font-weight: 300;
    font-style: italic;
    text-align: center;
    color: #666;
	margin-top: 1em;
}

img.split-figure{
	width: 48%;
}

img.final-design{
	width: 48%;
    box-shadow: 2px 2px 13px #ddd;
    margin-bottom: 3em;
}

.final-tablet img.final-design{
	box-shadow:none;
}

.icon-set{
	width: 48%;
    position: relative;
    left: 5em;
}

img.list-icon{
	width: auto;
	height: 3.5em;
	margin-top: 3em;
}

.box-shadow{
    box-shadow: 2px 2px 13px #ddd;
}

.small-30{
	width: 30%;
	float: left;
}

.small-70{
	width: 70%;
	float: left;
}

.center-block{
	display: block;
	margin: 0 auto;
}

footer{
    flex-grow: stretch;
}

.clear{
	clear: both;
	display: block;
}

.web-presence a, .project-link{
    font-size: .8em;
    float: left;
    margin-right: 1em;
	text-decoration: none;
	color: #ff5252;
	cursor: pointer;
	text-transform:uppercase;
}

.web-presence a:hover, .web-presence a:focus,
.project-link:hover, .project-link:focus{
	color:#B30606;
    text-decoration: underline;
}

.white-link{
	color: #fff;
	text-decoration: underline;
}

.white-link:hover, .white-link:focus{
	color: #eee;
}

.copyright{
	font-size: .9em;
	color: #aaa;
	font-weight: 300;
	margin-top: .5em;
}

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

.center{
	text-align: center;
}

.case-nav{
	margin: 4em auto 3em;
    display: block;
    text-align: center;
    font-size: 2.1em;
    font-weight: 300;
}

.case-nav a{
	text-decoration: none;
	color: #484848;
	margin: 0 1em;
}

.case-nav a:hover, .case-nav a:focus, .case-nav a:active{
	border-bottom: 2px solid #484848;
}

.project-grid{
	display: grid;
	margin: 7em auto 10em;
	grid-template-columns: auto;
	grid-template-rows: auto;
	grid-column-gap: 2em;
    grid-row-gap: 8em;
}

.project-list__blurb{
	align-self: center;
	margin-top: 0;
}

.project__c1.project-list__blurb{
	grid-column: 1;
	grid-row: 1;
}

.project__c1.project-background{
	grid-column: 2 / span 2;
	grid-row: 1;
}

.project__4yh.project-background{
	grid-column: 1 / span 2;
	grid-row: 2;
}

.project__4yh.project-list__blurb{
	grid-column: 3;
	grid-row: 2;
}

.project__sa.project-list__blurb{
	grid-columm: 1;
	grid-row: 3;
}

.project__sa.project-background{
	grid-column: 2 / span 2;
	grid-row: 3;
}

.project__mm.project-background{
	grid-column: 1 / span 2;
	grid-row: 4;
}

.project__mm.project-list__blurb{
	grid-column: 3;
	grid-row: 4;
}

.project__rs.project-list__blurb{
	grid-column: 1;
	grid-row: 5;
}

.project__rs.project-background{
	grid-column: 2 / span 2;
	grid-row: 5;
}

.project__sc.project-background{
	grid-column: 1 / span 2;
	grid-row: 6;
}

.project__sc.project-list__blurb{
	grid-columm: 3;
	grid-row: 6;
}

.stat-list div{
	padding: 1.5em;
	text-align: center;
	font-size: .9em;
}

.stat-list h4{
	font-size: 2.1em;
	margin: 1em 0 0.8em 0;
}

img.half{
	width: 50%;
}

.concept-img{
	margin: 3em 0;
}

.concept-img.flex{
	align-items: flex-start;
}
.concept-img figure+figure{
	margin: 0;
}

.concept-showcase{
	gap: 2em;
}

.concept-showcase img{
	box-shadow: 1px 3px 8px 0px #ddd;
	margin: 1em;
}

.flex.digest-challenges img{
	width: auto;
}

.digest-designs img{
	width: 30%;
}

.digest-designs img+img{
	margin-left: 4%;
}

.digest-delivery{
	display:flex;
	align-items: flex-end;
	justify-content: flex-end;
	width: 50%;
}

.digest-delivery figure{
	width: 30%;
}

.digest-delivery img{
	width: 100%;
}

.digest-delivery figure+figure{
	margin-left: 1%;
}

.design-delivery{
	display: flex;
}

.delivery-text{
	width: 50%;
}

.flex img{
	width: 100%;
}

.content-strategy.flex{
	align-items: center;
}

.content-strategy figure{

}

.content-strategy figure+figure{
	margin: 0;
}

.img-bg{
	background-image: url("/images/concepts/shapes.png");
	background-size: cover;
	width: 100%;
	height: auto;
	padding: 2em 1em 5em;
}

.img-bg img{
	width: 93%;
  box-shadow: 2px 0px 5px 1px #ddd;
}
/* animations */

body{
  position: relative;
  animation: sitename .9s cubic-bezier(.39,.26,.69,.31);
  /* Safari and Chrome */
  -webkit-animation: site-entrance .9s;
}

@keyframes site-entrance
{
  from {top:20px; opacity: 0;}
  to {top: 0; opacity: 1}
}
@-webkit-keyframes site-entrance /* Safari and Chrome */
{
  from {top:20px; opacity: 0;}
  to {top:0; opacity: 1;}
}


/*medium*/
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
    .title{
        font-size: 4em;
    }

    .pitch p{
        margin-bottom: .2em;
    }

	.money-meter-prototype{
		display: none;
	}

	.container-narrow{
		width: 80%;
	}

	.container-img{
		padding: 0 1em;
	}

	.design-delivery{
		flex-direction: column;
	}

	.digest-delivery{
		align-items: center;
		justify-content: space-around;
		width: 100%;
	}

	.delivery-text{
		width: 100%;
	}

	.content-strategy.flex{
		flex-wrap: wrap;
	}

	.concept__intro{
		width: 85%;
	}

	.concept--title {
    padding: 0.3em 0.9em;
	}

	.concept--img__center{
		margin: 1em;
	}

	.concept--img__wide{
		margin-top: 10%;
	}

	.concept--title h3{
		font-size: 1.4em;
	}



}
/* Medium Devices, Desktops */
@media only screen and (max-width : 1025px) {
	.container-img{
		padding: 0 1em;
	}

	.container-img img {
		width: 100%;
	}

	.container-img .flex img{
		width: 48%;
	}

	.icon-set{
		width: 56%;
    	left: 2em;
	}

	.container-75{
		width: 85%;
	}

	.design-grid{
		grid-column-gap: 20px;
	}

	img.img-tablet{
		width: 100%;
	}

	.digest-delivery{
		align-items: center;
	}

	.concept--img__center{
		margin: 1em;
	}

	.concept--title{
		padding: 1em;
	}

}

@media (max-width: 767px) {
	.project-grid{
		margin: 7em auto 10em;
		grid-template-columns: 50% 50%;
		grid-template-rows: auto;
		grid-column-gap: 1em;
		grid-row-gap: 8em;
	}

	.project-list__blurb{
		align-self: center;
		margin-top: 0;
	}

	.project__c1.project-list__blurb{
		grid-column: 1;
		grid-row: 1;
	}

	.project__c1.project-background{
		grid-column: 2;
		grid-row: 1;
	}

	.project__4yh.project-background{
		grid-column: 1;
		grid-row: 2;
	}

	.project__4yh.project-list__blurb{
		grid-column: 2;
		grid-row: 2;
	}

	.project__sa.project-list__blurb{
		grid-columm: 1;
		grid-row: 3;
	}

	.project__sa.project-background{
		grid-column: 2;
		grid-row: 3;
	}

	.project__mm.project-background{
		grid-column: 1;
		grid-row: 4;
	}

	.project__mm.project-list__blurb{
		grid-column: 2;
		grid-row: 4;
	}

	.project__rs.project-list__blurb{
		grid-column: 1;
		grid-row: 5;
	}

	.project__rs.project-background{
		grid-column: 2;
		grid-row: 5;
	}

	.project__sc.project-background{
		grid-column: 1;
		grid-row: 6;
	}

	.project__sc.project-list__blurb{
		grid-columm: 2;
		grid-row: 6;
	}


}

/*small*/
@media screen and (max-width: 39.9375em) {
    .site-name{
        font-size: 1.05em;
    }

	.project__intro{
		width: 95%;
    	margin: 0 auto;
	}

	.project__section{
		margin:0;
	}

	.project__section .flex{
		display: block;
	}

	.project-info{
		margin-left: 0;
	}

	.container-75{
		width: 95%;
		margin: 0 auto;
	}

	.main-drag{
		width: 100%;
	}

	.side-car{
		width: 100%;
	}

    .title{
        font-size: 2.3em;
    }

    .pitch p{
        margin-bottom: .5em;
        font-size: .9em;
    }

    .landing{
    margin-bottom: 30vh;
    margin-top: 18vh;
    }

	.small-30, .small-70{
		width: 100%;
		float: none;
		margin-top: 1em;
	}

	.money-meter-prototype{
		display: none;
	}

	.container-narrow, .container{
		width: 95%;
	}

	.container-img{
		width: 100%;
		padding: 1em;
	}

	.container-img .flex img{
		width: 48%;
	}

	.container-img img {
		width: 100%;
	}

	.icon-set{
		left: 0;
	}

	.insight-grid{
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		grid-template-areas:
		"insight1 solution1"
		"insight2 solution2"
		"insight3 solution3";
		grid-column-gap: 15px;
		grid-row-gap: 25px;
		margin: 3em auto 7em;
	}

	.design-grid{
		grid-column-gap: 10px;
	}

	.grid-masonry{
		grid-row-gap: 20px;
	}

	.case-nav{
		margin: 1em auto 2em;
		font-size: 1.1em;
	}


	.project-grid{
		display: block;
		margin-top: 5em;
	}

	.project-list__blurb{
		text-align: center;
		margin-bottom: 3.5em;
		margin-top: 5em;
	}

	.project-list h2{
		font-size: 1.6em;
	}

	.project-list__blurb a{
		margin: 0 auto;
		left: 0;
		right: 0;
		position: absolute;
		font-size: 1.1em;
	}

	img.img-tablet{
		width: 100%;
	}

	.role.flex{
		display: block;
	}

	.flex-reverse{
		flex-direction: row;
	}

	.concept-img figure+figure{
		margin-top: 2em;
	}

	.digest-designs img+img{
		margin-left: 2%;
	}

	.design-delivery{
		flex-direction: column;
	}

	.delivery-text{
		width: 100%;
	}

	.digest-delivery{
		width: 100%;
		justify-content: space-between;
		align-items; center;
	}

	.concept--title{
		padding:1em 1em 0.5em;
	}

	.concept--title__wide, .concept--title__wide.reverse{
		width: 100%;
		background: transparent;
		color: #000;
		margin: 0;
	}

	.concept--img__wide{
		width: 100%;
		padding: 1em 1em 0;
	}

	.concept--img__tall{
		width: 50%;
		margin: auto;
	}

	.concept--img__center{
		padding: 1em 1em 2em;
	}

}