/* -------------------------------------------------- */
/* Reset - http://purecss.io/base
/* -------------------------------------------------- */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section, main{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}.hide{display:none;}html{box-sizing: border-box;}*,*:before,*:after{box-sizing:inherit;}.clear{font-size:0px;clear: both;height: 0px;}*:focus{outline: none;}strong{font-weight:bold;}em{font-style:italic;}input:invalid{box-shadow: none;}button{border:none;background:none;padding:0;margin: 0;}button::-moz-focus-inner{border:0;}input,button{border-radius:0;border-radius:none;}

/* -------------------------------------------------- */
/* General
/* -------------------------------------------------- */
html,body{
	width: 100vw;
	height: 100vh;
	overflow-x: hidden;
}
body{
	background: #fff;
	font-family: 'Nunito', sans-serif;
	font-size: 18px;
	color: #404040;
}
a,a:visited,a:active{
	color: #333;
	border-bottom: 2px solid #333;
	text-decoration: none;
	font-weight: 700;
}
p{
	line-height: 1.8em;
	margin-bottom: 16px;
}

.l-txt{ font-size: 24px; }

p:last-child{ margin-bottom: 0; 
}
.center,
.center h1,
.center h2,
.center h3,
.center p{
	text-align: center;
}

/* -------------------------------------------------- */
/* Headers
/* -------------------------------------------------- */
h1,h2,h3{
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	line-height: 1.2em;
	text-decoration: none;
	color: #333;
	border: none;
	margin-bottom: 16px;
}
h1{ font-size: 60px; }
h2{ font-size: 48px; }
h3{ font-size: 36px; }

.h-bar{
	background: url('/assets/images/h-bar.svg') no-repeat left bottom;
	padding-bottom: 21px;
	margin-bottom: 21px;
}
.center .h-bar{
	background-position: center bottom;
}

/* -------------------------------------------------- */
/* Containers
/* -------------------------------------------------- */
.container,
.container-max,
.container-min{
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 18px;
}
.container-max{
	max-width: 1440px;
}
.container-min{
	max-width: 720px;
}
/* -------------------------------------------------- */
/* Buttons
/* -------------------------------------------------- */
a.btn, .btn,
a.btn:hover, .btn:hover{
	background: #333;
	font-family: 'Nunito', sans-serif;
	font-size: 18px;
	color: #fff;
	display: inline-block;
	line-height: 48px;
	border: none;
	border-radius: 24px;
	padding: 0 24px;
	cursor: pointer;
}

/* -------------------------------------------------- */
/* Pagination / Step thru
/* -------------------------------------------------- */
.pagination{
	padding: 54px 0;
}
.pagination.stepthru{
	padding: 0;
	margin: -27px 0 18px 0;
}
.pagination ul{
	display: flex;
	justify-content: center;
	margin: -3px;
}
.pagination.stepthru ul{
 	justify-content: start;
}
.pagination li{
	padding: 3px;
}
.pagination a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: none;
	color: #333;
	border-radius: 50%;
}
.pagination a.active{
	color: #fff;
	background: #333;
}



/* -------------------------------------------------- */
/* Sections
/* -------------------------------------------------- */
section{
	padding: 72px 0;
}
/* -------------------------------------------------- */
/* Header
/* -------------------------------------------------- */
header{
	position: relative;
	background: #f3f2f2 url('/assets/images/wave-down.png') no-repeat 45vw top;
	background-size: 800px auto;
	min-height: 480px;
}
.home header{
	background-color: #171f33;
	background-image: url('/assets/images/wave-down-alt.png');
}
.about header{
	background-color: #fff369;
}
.work header{
	background-color: #25d8eb;
}
.contact header{
	background-color: #69ffb5;
}
.site-header{
	background: transparent;
	padding: 27px 0;
}
.site-header .container{
	display: flex;
	align-items: center;
}
a.twp{
	font-family: 'Nunito', sans-serif;
	font-size: 15px;
	color: #333;
	text-decoration: none;
	border: none;
}
.home a.twp{
	color: #fff;
}
.twp-icon,
.twp-text{
	vertical-align: middle;
}
.twp-icon{
	display: inline-block;
	background: url('/assets/images/twp-alt-sprite-sheet.png') no-repeat left center;
	background-size: 972px 32px;
	width: 36px;
	height: 32px;
	-webkit-animation: twp-animate .7s steps(26) forwards;
	animation: twp-animate .7s steps(26) forwards;
}
.home .twp-icon{
	background-image: url('/assets/images/twp-sprite-sheet.png');
}
@-webkit-keyframes twp-animate {
    from { background-position: 0; }
    to { background-position: -936px; }
}
@keyframes twp-animate {
    from { background-position: 0; }
    to { background-position: -936px; }
}
.twp-text{
	margin-left: 6px;
	text-transform: none;
}
/* -------------------------------------------------- */
/* Header: Nav
/* -------------------------------------------------- */
.site-nav{
	margin-left: auto;
}
.site-nav ul{
	display: flex;
}
.site-nav li{
	padding: 0 18px
}
.site-nav a{
	position: relative;
	display: block;
	color: #333;
	border: none;
	padding: 9px 0;
	font-size: 15px;
}
.home .site-nav a{ color: #fff; }
.home .site-nav a span{ background: #fff; }
.site-nav a span{
	background: #333;
	height: 3px;
	width: 0;
	position: absolute;
	left: 0;
	top: 0;
	-webkit-transition: width .15s; /* Safari */
	transition: width .15s;
}
.site-nav a:hover span,
.site-nav li.active a span{
	width: 18px;
}

/* -------------------------------------------------- */
/* Header: Masthead
/* -------------------------------------------------- */
.masthead{
	padding: 54px 0;
}
.home .masthead{
	padding-bottom: 108px;
}
.masthead .container{
	padding-right: 20%;
}
.home .masthead h1,
.home .masthead p{
	color: #fff;
}
.home .masthead .h-bar{
	background-image: url('/assets/images/h-bar-light.svg');
}
.home .masthead a,
.home .masthead a:visited,
.home .masthead a:active{
	color: #25d8eb;
	border-color: #25d8eb;
}

/* -------------------------------------------------- */
/* Past clients
/* -------------------------------------------------- */
.past-clients{
	position: relative;
	padding: 36px 18px 72px 18px;
	background: #69ffb5;
}
.past-clients h3{
	font-family: Nunito, sans-serif;
	font-size: 14px;
	margin-bottom: 27px;
	color: #000;
	opacity: .3;
}
.past-clients ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: -18px -48px;
}
.past-clients li{
	margin: 18px 48px;
	opacity: .3;
	-webkit-transition: opacity .25s; /* Safari */
	transition: opacity .25s;
}
.past-clients li:hover{
	opacity: 1;
}

/* -------------------------------------------------- */
/* Cards
/* -------------------------------------------------- */
.cards{
	display: flex;
	background: #fff;
	flex-wrap: wrap;
}
.card{
	display: flex;
	align-items: center;
	width: 50%;
	min-height: 33vw;
	background: transparent no-repeat center;
	background-size: cover;
	padding: 54px 0;
}
.work.cards:nth-child(odd){
	flex-direction: row-reverse;
}
.card.two,
.card.three{
	background: #171f33;
}
.card.two h2,
.card.two p,
.card.three h2,
.card.three p{
	color: #fff;
}
.card.two .h-bar,
.card.three .h-bar{
	background-image: url('/assets/images/h-bar-light.svg');
}
.work .card h2,
.work .card img,
.work .card p{
	margin-bottom: 9px;
}

/* -------------------------------------------------- */
/* CTA
/* -------------------------------------------------- */
.cta{
	background: #333 url('/assets/images/wave-up-alt.png') no-repeat 45vw bottom;
	background-size: 800px auto;
	padding:  96px 0 96px 0;
}
.cta h2,
.cta p{
	color: #fff;
}
.cta .h-bar{
	background-image: url('/assets/images/h-bar-light.svg')
}
.cta .btn,
.cta .btn:hover{
	background-color: #fff;
	color: #333;
}

/* -------------------------------------------------- */
/* Tags
/* -------------------------------------------------- */
.tags{
	display: flex;
	flex-wrap: wrap;
	margin: -2px;
}
.tags li{
	margin: 2px;
	padding: 0 14px;
	background: #efefef;
	color: #333;
	font-size: 12px;
	font-weight: 700;
	line-height: 28px;
	border-radius: 14px;
}
.card.two .tags li,
.card.three .tags li{
	background: #0e131f;
	color: #c3c4c7;
}

/* -------------------------------------------------- */
/* Inside
/* -------------------------------------------------- */
.inside{
	padding: 96px 0;
}
.imgs{
	padding-top: 36px;
	display: flex;
	flex-wrap: wrap;
	margin: -9px;
}
.imgs img{
	width: 25%;
	height: auto;
	padding: 9px;
}
.imgs img.img-wide{
	width: 50%;
}

/* -------------------------------------------------- */
/* Work
/* -------------------------------------------------- */
.crumbs{
	margin: -37px -6px 9px -6px;
}
.crumbs a{
	display: inline-block;
	padding: 6px;
	font-size: 15px;
	border: none;
}
.crumbs svg,
.crumbs span{
	vertical-align: middle;
}
.crumbs svg{
	fill: #eb3825;
	margin-right: 3px;
}
.work-preview{
	background: #f3f2f2;
	text-align: center;
	line-height: 0;
	overflow-y: auto;
}
.work-preview .bottom{
	background: #fff;
}
.work-preview img{
	width: 100%;
	max-width: 1366px;
	min-width: 960px;
	height: auto;
}
.work-text{
	padding: 54px 0 108px 0;
}
.work-text section{
	padding: 0 0 54px 0;
}
.work-text h2{
	font-size: 19px;
	margin-bottom: 30px;
}
.work-text ul{
	display: flex;
	flex-wrap: wrap;
	margin: -9px
}
.work-text li{
	width: 50%;
	padding: 9px
}
.work-text li span{
	display: block;
	background: url('/assets/images/bullet.svg') no-repeat left .5em;
	padding-left: 18px;
	line-height: 1.4em;
}
blockquote p{
	font-size: 21px;
	line-height: 1.6em;
	padding-left: 27px;
	border-left: 6px solid #333;
}
blockquote cite{
	display: flex;
	align-items: center;
	padding-left: 27px;
}
blockquote img{
	width: 70px;
	border-radius: 50%;
	margin-right: 12px;
}
blockquote .author{
	flex-grow: 1;
	line-height: 1.2em;
}
blockquote .title{
	opacity: .8;
	font-size: 14px;
}

/* -------------------------------------------------- */
/* Contact
/* -------------------------------------------------- */
.contact main{
	padding: 54px 0 108px 0;
}
.contact p:last-child{
	margin-bottom: 0;
}
form{
	padding-top: 21px;
}
input,
textarea,
select{
	font-family: 'Nunito', sans-serif;
	font-size: 18px;
	color: #404040;
	width: 100%;
	border: 2px solid #cccfd3;
	padding: 12px;
}
.form-row{
	margin-bottom: 18px;
}
label{
	display: block;
	margin-bottom: 9px;
	font-size: 15px;
	font-weight: bold;
	color: #333;
}
.alert{
	color: red;
}
.success{
	color: green;
}
.map img{
	width: 100%;
	min-width: 880px;
	height: auto;
}
.map{
	overflow: hidden;
	padding: 36px 18px;
}
@media screen and (max-width: 900px) {
	.map img{
		width: 50%;
	}
}
/* -------------------------------------------------- */
/* Footer
/* -------------------------------------------------- */
footer{
	width: 100%;
	padding: 18px 0;
}
footer .container{
	display: flex;
}
footer p{
	margin-bottom: 0;
	font-size: 13px;
}
footer p:last-of-type{
	text-align: right;
	flex-grow: 1;
}

/* -------------------------------------------------- */
/* CMS edit button
/* -------------------------------------------------- */
.edit-btn{
	background: #000000 url('/assets/images/pencil.svg') no-repeat center;
	border: none;
	height: 48px;
	width: 48px;
	position: fixed;
	z-index: 9999;
	bottom: 18px;
	left: 18px;
}

/* -------------------------------------------------- */
/* Breakpionts
/* -------------------------------------------------- */
@media screen and (max-width: 1000px) {
	.card h2{
		font-size: 36px;
	}
	.card{
		display: block;
		width: 100%;
	}
	.card.three{
		background: #fff;
	}
	.card.three .tags li{
		background: #efefef;
		color: #333;
	}
	.card.three h2,
	.card.three p{
		color: #333;
	}
	.card.three .h-bar{
		background-image: url('/assets/images/h-bar.svg');
	}
	.card.four{
		background: #171f33;
	}
	.card.four .tags li{
		background: #0e131f;
		color: #c3c4c7;
	}
	.card.four h2,
	.card.four p{
		color: #fff;
	}
	.card.four .h-bar{
		background-image: url('/assets/images/h-bar-light.svg');
	}
	.work.cards .card:first-child{
		padding-bottom: 300px;
	}
	.card .container-min{
		max-width: 100%;	
	}
}	
@media screen and (max-width: 720px) {
	.masthead .container{
		padding-right: 18px;
	}
}
@media screen and (max-width: 600px) {
	.imgs img{
		width: 50%;
	}
	.imgs img.img-wide{
		width: 100%;
	}
	.work-text li{
		width: 100%;
	}
}
@media screen and (max-width: 580px) {
	.twp-text{
		display: none;
	}
	.site-nav li{
		padding: 0 9px
	}
	.site-header .container{
		padding-right: 9px;
	}
	.masthead{
		padding: 27px 0 54px 0;
	}
	.masthead.work{
		padding-bottom: 90px;
	}
	h1{
		font-size: 48px;
	}
	.l-txt{
		font-size: 21px;
	}
	footer .container{
		display: block;
	}
	footer p,
	footer p:last-of-type{
		text-align: center;
		margin-bottom: 9px;
	}
}