/* -------------------------------------------------- */
/* 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;}html{scroll-behavior: smooth;}
/* -------------------------------------------------- */
/* Common
/* -------------------------------------------------- */
body{
	font-family: proxima-nova, Helvetica, sans-serif;
	font-size: 14px;
	color: #221e1f;
}
h1, h2, h3, h4{
	line-height: 1.2em;
	padding: .5em 0;
}
a{
	color: #004563;
}
strong{
	font-weight: 700;
}
sup{
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}
p{
	line-height: 1.6em;
	padding: .5em 0;
}
.container-max,
.container-med,
.container-min,
.container-tiny{
	position: relative;
	width: 100%;
	max-width: 1080px;
	padding: 0 18px;
	margin: 0 auto;
}
.container-med{
	max-width: 980px;
}
.container-min{
	max-width: 880px;
}
.container-tiny{
	max-width: 680px;
}
a.btn,
button.btn{
	display: inline-block;
	line-height: 36px;
	padding: 0 32px;
	background-color: rgba(0,68,98,1);
	font-family: proxima-nova, Helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	border-radius: 20px;
	border: 2px solid #004563;
	-webkit-transition: background-color .25s; /* Safari */
	transition: background-color .25s;
}
a.btn:hover,
button.btn:hover{
	background-color: rgba(0,68,98,0);
	color: #004563;
}
/* -------------------------------------------------- */
/* Header
/* -------------------------------------------------- */
header{
	background: url('/assets/images/watercolor-banner.gif') repeat-x center -80px;
	background-size: auto 160px;
	padding-top: 80px;
	margin-bottom: 24px;
}
header .container-max{
	display: flex;
	align-items: end;
}
.logo{
	background: url('/assets/images/jcarnscreative.png') no-repeat center bottom;
	width: 263px;
	height: 48px;
	background-size: 263px 48px;
	position: relative;
	z-index: 100;
}
header nav{
	margin-left: auto;
}
header nav ul{
	display: flex;
	margin: 0 -16px;
}
header nav li{
	padding: 0 16px;
}
header nav a{
	display: block;
	line-height: 36px;
	text-decoration: none;
	color: #0086b8;
	font-size: 18px;
	border-bottom: 2px solid rgba(0,134,184,0);
	-webkit-transition: border-color .25s; /* Safari */
	transition: border-color .25s;
}
header nav a:hover,
header nav a.active{
	border-color: rgba(0,134,184,1);
}
header nav li:last-child a{
	color: #fff;
	border-radius: 20px;
	padding: 0 32px;
	border: 2px solid #0086b8;
	background-color: rgba(0,134,184,1);
	-webkit-transition: background-color .25s; /* Safari */
	transition: background-color .25s;
}
header nav li:last-child a:hover,
header nav li:last-child a.active{
	background-color: rgba(0,134,184,0);
	color: #0086b8;
}
.mnav-btn{
	background: #0086b8 url('/assets/images/menu.svg') no-repeat center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: none;
	margin-left: auto;
	position: relative;
	z-index: 100;
}
.show .mnav-btn{
	background-image: url('/assets/images/close.svg');
}
button:hover{
	cursor: pointer;
}
.mnav{
	background: rgba(255,255,255,.95);
	position: fixed;
	z-index: 90;
	top: 0; bottom: 0;
	width: 100%;
	display: none;
	align-items: center;
	justify-content: center;
}
.mnav a{
	display: block;
	line-height: 1em;
	padding: 9px;
	font-weight: 800;
	font-size: 36px;
	text-decoration: none;
}
body.show{ overflow: hidden; }
.show .mnav{ display: flex; }

@media screen and (max-width: 840px) {
	.mnav-btn{ display: block; }
	header nav{ display: none; }
	.logo{
		width: 219px;
		height: 40px;
		background-size: 219px 40px;
	}

}
@media screen and (min-width: 841px) {
	.show .mnav{ display: none; }
	body.show{ overflow: auto; }
}

/* -------------------------------------------------- */
/* Hero
/* -------------------------------------------------- */
.hero{
	background: url('/assets/images/hero-wave.png') no-repeat center bottom;
	background-size: 120% auto;
	line-height: 0;
	padding-top: 54px;
}
.hero .container-min{
	display: flex;
}
.hero-img{
	flex-basis: 380px;
	flex-grow: 0;
	flex-shrink: 0;
}
.hero-img img{
	width: 100%;
	height: auto;
}
.hero-txt{
	padding: 36px 18px 0 0;
}
.hero-txt h1{
	font-size: 42px;
	font-weight: 800;
	color: #004563;
	line-height: 1.2em;
}
.hero p{
	margin-bottom: 0;
	color: #0086b8;
	line-height: 1.6em;
	font-size: 18px;
}
@media screen and (max-width: 840px) {
	.hero .container-min{
		display: block;
		text-align: center;
	}
	.hero{
		padding-top: 0;
	}
	.hero-txt{ padding: 0 0 9px 0; }
	.hero-img img{ max-width: 380px; }
	.hero-txt p{ 
		padding: .25em 0;
		line-height: 1.4em; 
	}
	.hero-txt h1{
		line-height: 1em;
		font-size: 36px; 
		padding:.25em 0}
}
/* -------------------------------------------------- */
/* Testimony
/* -------------------------------------------------- */
.testimony-sec{
	padding: 18px 0;
	background: #0086b8;
	color: #fff;
	box-shadow: 0 0 21px rgba(0,0,0,.3);
}
.testimony-sec h2{
	font-size: 21px;
	font-weight: 700;
	text-align: center;
}
.testimony .container-min.flex{
	display: flex;
}
.qmark-open, .qmark-close{
	flex-basis: 96px;
	flex-grow: 0;
	flex-shrink: 0;
	height: 81px;
}
.qmark-open{
	background: url('/assets/images/open-quotes.svg') no-repeat;
	margin-top: -96px;
}
.qmark-close{
	background: url('/assets/images/close-quotes.svg') no-repeat;
}
.qtxt{
	flex-grow: 1;
	text-align: center;
	padding: 0 36px;
	overflow: hidden;
}
.qauthor{
	font-weight: 700;
}
.glide__bullets{
	padding: .5em 0 .5em 3px;
}
.glide__bullet{
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: #fff;
	margin-right: 3px;
}
.glide__bullet--active{
	background: #faad76;
}
@media screen and (max-width: 720px) {
	.qmark-open,.qmark-close{ display: none; }
	.qtxt{ padding: 0; }
}

/* -------------------------------------------------- */
/* Brands
/* -------------------------------------------------- */
.brands{
	padding: 36px 0 54px 0;
	background: #0086b8;
}
.brands .sec-title{
	font-size: 16px;
	font-weight: 400;
	color: #fff;
	text-align: center;
	padding-bottom: 18px;
}

.brands-list{
	display: flex;
	justify-content: center;
	align-items: center;
	margin: -18px -9px;
	flex-wrap: wrap;
}
.brands-list li{
	padding: 18px 27px;
}

/* -------------------------------------------------- */
/* Work
/* -------------------------------------------------- */
.work-sec{
	padding: 54px 0;
}
.work .work-sec{
	padding:  72px 0;
}
.work-sec .sec-title{
	display: flex;
	align-items: center;
	padding-bottom: 18px;
}
.work-sec h2,
.work-sec h3{
	font-size: 36px;
	font-weight: 800;
	color: #0086b8;
}
.work-sec h3{
	font-size: 20px;
}
.work-sec .sec-title .btn{
	margin-left: auto;
}
@media screen and (max-width: 500px) {
	.work-sec .sec-title .btn{ display: none; }
}
/* -------------------------------------------------- */
/* Work
/* -------------------------------------------------- */
.works{
	display: flex;
	flex-wrap: wrap;
	margin: -18px;
}
a.work{
	padding: 18px;
	width: 33.333%;
	text-decoration: none;
}
.work a.work,
.approach a.work{
	width: 33.333%;
}
a.work img{
	box-shadow: 0 0 9px rgba(0,0,9,.2);
	width: 100%;
	height: auto;
	-webkit-transition: box-shadow .25s; /* Safari */
	transition: box-shadow .25s;
}
a.work:hover img{
	box-shadow: 0 0 18px rgba(0,0,9,.4);
}
a.work .work-txt{
	padding: 1em 0;
}
a.work .work-txt p{
	color: #000;
	line-height: 1.4em;
	padding: 0;
}
a.work p.channels{
	padding: .25em 0;
	margin: 0;
	font-size: 11px;
	opacity: .5;
}
a.work h3{
	font-size: 17px;
	font-weight: 800;
	padding: 0;
}
.filter-wrap{
	width: 100%;
	max-width: 540px;
	margin: 0 auto;
	padding: 0 0 54px 0;
}
.filter-wrap .steps{
	padding: 0;
}
.filter-items{
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 18px;
}
.filter-items li{
	width: 50%;
}
@media screen and (max-width: 350px) {
	.filter-items li{ width: auto; }
}
.filter-items label{
	display: block;
	padding: 9px 9px 9px 24px;
	background: url('/assets/images/checbox-unticked.svg') no-repeat left center;
}
.filter-items input[type=checkbox]{
	display: none;
}
.filter-items input[type=checkbox]:checked + label{
	background-image: url('/assets/images/checbox-ticked.svg');
}
@media screen and (max-width: 800px) {
	.work a.work,
	.approach a.work,
	a.work{ width: 50%; }
}
@media screen and (max-width: 540px) {
	.work a.work,
	.approach a.work,
	a.work{ width: 100%; }
}
/* -------------------------------------------------- */
/* Home: Closing Callout
/* -------------------------------------------------- */
.cc{
	padding-top: 54px;
}
.cc-img{
	position: relative;
	width: 100%;
	max-width: 480px;
	margin: 0 auto -72px auto;
}
.cc-img img{
	position: absolute;
	top: 0;
	width: 100%;
	height: auto;
}
.cc-img img.cc-img-blank{
	position: relative;
}
.cc-txt{
	background: #dceef7;
	padding: 72px 0 36px 0;
	text-align: center;
}
.cc-txt h3{
	font-size: 21px;
	color: #0086b8;
	font-weight: 800;
}
.btns{ 
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: -3px; 
}
.btns .btn{ 
	margin: 3px; 
}

/* -------------------------------------------------- */
/* Page title
/* -------------------------------------------------- */
.pg-title{
	background:linear-gradient(90deg, #eaf4f9 50%, #daebf5 50%);
}
.pg-title .container-max{
	background: url('/assets/images/curve-bg.png') no-repeat left bottom;
	background-size: auto 200px;
	min-height: 150px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: 0 180px;
}
.pg-title h1{
	font-size: 45px;
	padding: 0;
	font-weight: 800;
	color: #004563;
	text-align: center;
}
.pg-title img{
	position: absolute;
	height: auto;
}
.about .pg-title img{
	width: 105px;
	bottom: -21px;
	left: 48px;
}
@media screen and (max-width: 1080px) {
	.pg-title{ background: #daebf5; }
	.pg-title .container-max{ 
		background: none; 
		padding: 0 18px;
	}
	.pg-title img{ display: none; }
	.pg-title h1{ font-size: 39px; }
}

/* -------------------------------------------------- */
/* About
/* -------------------------------------------------- */
.body{
	padding: 54px 0;
}
.about .txt-img{
	display: flex;
}
.about .txt-img-txt{
	flex-grow: 1;
	padding-right: 54px;
}
.about .txt-img-img{
	flex-basis: 280px;
	flex-shrink: 0;
	flex-grow: 0;
}
.about .txt-img-img img{
	width: 100%;
	height: auto;
	margin-top: -18px;
}
.specialties h2{
	font-size: 24px;
	font-weight: 700;
	color: #0086b8;
	text-align: center;
}
.specialties-ribbon{
	padding: 36px 0 90px 0;
	background: #dceef7;
	box-shadow: 0 0 18px rgba(0,0,0,.2);
}
.specialties-list{
	display: flex;
	flex-wrap: wrap;
	margin: 0 20%;
	padding: 1em 0;
}
.specialties-list li{
	background: url('/assets/images/bullet.svg') no-repeat 3px .6em;
	width: 50%;
	padding-left: 18px;
	font-size: 18px;
	font-weight: 700;
	color: #004563;
	line-height: 1.4em;
}
.work-thumbs{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: -63px -9px -9px -9px;
}
.work-thumbs a{
  width: 33.33%;
	padding: 9px;
}
.work-thumbs a img{
	box-shadow: 0 0 9px rgba(0,0,9,.2);
	width: 100%;
	height: auto;
	-webkit-transition: box-shadow .25s; /* Safari */
	transition: box-shadow .25s;
}
.work-thumbs a:hover img{
	box-shadow: 0 0 18px rgba(0,0,9,.4);
}
p.btn-p{
	padding-top: 2em;
}
p.center{
	text-align: center;
}
@media screen and (max-width: 800px) {
	.specialties-list{ 
		justify-content: center;
		margin: 0%; 
	}
	.specialties-list li{ width: 80%; }
	.work-thumbs a{ width: 50%; }
}
@media screen and (max-width: 780px) {
	.about .txt-img{
		flex-wrap: wrap;
	}
	.about .txt-img-txt,
	.about .txt-img-img{
		padding: 0;
		flex-basis: 100%;
	}
	.about .txt-img-img{ 
		padding-top: 36px;
		text-align: center;
	}
	.about .txt-img-img img{ 
		max-width: 280px;
		margin: 0 auto; 
	}
	p.btn-p{
		text-align: center;
	}
}
@media screen and (max-width: 550px) {
	.work-thumbs a{ width: 100%; }
}
/* -------------------------------------------------- */
/* Work
/* -------------------------------------------------- */
.work .pg-title img{
	width: 115px;
	bottom: -21px;
	left: 18px;
}
.work-cols{
	display: flex;
	flex-wrap: wrap;
	margin: -18px;
}
.work-col-txt,
.work-col-imgs{
	width: 50%;
	padding: 18px;
}
.work-col-imgs{
	line-height: 0;
}
.work-col-imgs img{
	width: 100%;
	height: auto;
	margin-bottom: 18px;
	border: 1px solid #cbc8c8;
}
.work-cc{
	padding-bottom: 18px;
}
.work-cc p{
	padding: 0;
}
.work-csr{
	padding: 18px 0;
	border-top: 1px solid #221e1f;
	border-bottom: 1px solid #221e1f;
}
.work-csr h2{
	font-size: 20px;
	font-weight: 800;
	color: #0086b8;
	padding: 0 0 3px 0;
}
.work-csr p{
	padding: 0 0 1em 0;
}
@media screen and (max-width: 700px) {
	.work-col-txt,
	.work-col-imgs{
		width: 100%;
	}
}
/* -------------------------------------------------- */
/* Approach
/* -------------------------------------------------- */
.approach .pg-title img{
	width: 143px;
	bottom: -15px;
	left: 36px;
}
.approach .intro h2{
	font-size: 24px;
	font-weight: 800;
	color: #0086b8;
	text-align: center;
}
.steps{
	padding: 24px 0;
}
.step{
	border-bottom: 1px solid #004563;
}
.step-title{
	display: flex;
	align-items: center;
	padding: 24px 0;
	width: 100%;
}
.step-title h3{
	text-align: left;
	font-family: proxima-nova, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: 800;
	color: #004563;
	line-height: 1.1em;
	padding: 0 18px 0 0;
}
.step-arrow{
	width: 20px;
	height: 20px;
	background: url('/assets/images/arrow.svg') no-repeat center;
	margin-left: auto;
	transform: rotate(0deg);
	-webkit-transition: transform .25s; /* Safari */
	transition: transform .25s;
}
.step.show .step-arrow{
	transform: rotate(-180deg);
}
.step-txt{ 
	display:none; 
}
.step-txt p{
	margin-bottom: 12px;
}
.step-txt p:last-child{
	padding: 0;
	margin-bottom: 30px;
}
.step.show .step-txt{
	display: block;
}

/* -------------------------------------------------- */
/* Contact
/* -------------------------------------------------- */
.contact .pg-title img{
	width: 110px;
	bottom: -12px;
	left: 18px;
}
.cols-txt-form{
	display: flex;
	flex-wrap: wrap;
	margin: 18px;
}
.cols-txt-form .col-txt,
.cols-txt-form .col-form{
	width: 50%;
	padding: 18px;
}
.emphasis{
	font-size: 18px;
	font-weight: 800;
	color: #0086b8;
}
p.quote{
	color: #0086b8;
	font-style: italic;
}
.cols-txt-form .col-txt a{
	color: #221e1f;
	text-decoration: none;
}
.form-row label{
	display: block;
	padding-bottom: 6px;
	font-size: 12px;
}
.form-row{
	margin-bottom: 12px;
}
input,textarea{
	font-family: proxima-nova, Helvetica, sans-serif;
	font-size: 14px;
	color: #221e1f;
	border: 1px solid #cbc8c8;
	width: 100%;
	padding: 9px;
}
.submit-btn{
	font-family: proxima-nova, Helvetica, sans-serif;
	font-size: 14px;
	background-color: #0086b8;
	border: 2px solid #0086b8;
	color: #fff;
	font-weight: 800;
	padding: 9px 33px;
	-webkit-transition: background-color .25s; /* Safari */
	transition: background-color .25s;
}
.submit-btn:hover{
	background-color: #fff;
	color: #0086b8;
}
.alert{
	color: red;
}
.alert.ok{
	color: green;
}
@media screen and (max-width: 700px) {
	.cols-txt-form .col-txt,
	.cols-txt-form .col-form{
		width: 100%;
	}
}
/* -------------------------------------------------- */
/* Footer
/* -------------------------------------------------- */
footer{
	background: url('/assets/images/watercolor-banner.gif') repeat-x center top;
	background-size: auto 160px;
	padding-top: 40px;
	color: #000;
	font-size: 11px;
	font-weight: 700;
	text-align: center;
}
footer .container-min.flex{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.logo-alt{
	background: url('/assets/images/jcarnscreative-alt.png') no-repeat center bottom;
	width: 263px;
	height: 48px;
	background-size: 263px 48px;
}
.social{
	margin-left: auto;
}
.social ul{
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: center;
	margin: -6px;
}
.social li{
	padding: 6px;
}
footer .btm-row{
	padding: 90px 0 48px 0;
}
@media screen and (max-width: 840px) {
	.logo-alt{
		width: 219px;
		height: 40px;
		background-size: 219px 40px;
	}
}
@media screen and (max-width: 500px) {
	footer .container-min.flex{ justify-content: center; }
	footer{ padding-top: 18px; }
	.social{ 
		padding-top: 18px;
		width: 100%;
		margin:0; 
	}
}

/* -------------------------------------------------- */
/* Responsive video
/* -------------------------------------------------- */
.video { 
	position: relative; 
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
	height: auto;
	margin-bottom: 1em;
} 
.video iframe, .video object, .video embed { 
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

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