/* -------------------------------------------------- */
/* 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{position: absolute;left:-9999px;white-space:nowrap;}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;}html{scroll-behavior: smooth;}

/* -------------------------------------------------- */
/* Common
/* -------------------------------------------------- */
body{
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	color: #000000;
}
h1, h2, h3, h4{
	line-height: 1.2em;
	padding: 9px 0;
	font-weight: 600;
}
h2{ font-size: 33px; }
h3{ font-size: 27px; }
.rule,
.card-cols h2{
	background: url('/assets/images/hr.svg') no-repeat center bottom;
	padding: 0 0 18px 0;
	margin: 0 0 12px 0;
}
.rule.lt,
.card-cols h2{
	background-position: left bottom;
}

strong{
	font-weight: 700;
}
sup{
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}
p{
	line-height: 1.8em;
	padding: 12px 0;
}
p.btns{
	display: flex;
	padding: 24px 0 12px 0;
	margin: 0 -6px;
}
p.center.btns{
	justify-content: center;
}
p.btns a{
	margin: 0 6px;
}
a{ color: #000; }
a:hover{ text-decoration: none; }
.center{ text-align: center; }
article{
	padding:  0 0 96px 0;
}
.bg{ background: #efefef url('/assets/images/bg.webp'); }
.bg-alt{ background: #e2f3fc url('/assets/images/bg-alt.webp'); }
.dark-bg{ color: #fff; }

/* -------------------------------------------------- */
/* Containers
/* -------------------------------------------------- */
.container,
.container-med,
.container-lrg{
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 24px;
}
.container-med{ max-width: 728px; }
.container-lrg{ max-width: 1080px; }

/* -------------------------------------------------- */
/* Lists
/* -------------------------------------------------- */
main ul{
	padding: 3px 0;
}
main li{
	text-align: left;
	background: url("/assets/images/dot.svg") no-repeat left 16px;
	padding: 6px 6px 6px 15px;
	line-height: 1.6em;
}
main li p{
	padding: 0;
}
main ul.two-cols{
	column-count: 2;
	column-gap: 48px;
}

/* -------------------------------------------------- */
/* Alert Ribbons
/* -------------------------------------------------- */
.alert-ribbon{
	background-color: #e2f3fc;
	padding: 3px 0;
	text-align: center;
	font-size: 14px;
}
.alert-ribbon,
.alert-ribbon a{
	color: #003b71;
}
.alert-ribbon p{
	padding: 6px 0;
	line-height: 1.4em;
}
.alert-ribbon2{
	background-color: #000;
	padding: 12px 0;
	text-align: center;
	font-size: 18px;
}
.alert-ribbon2,
.alert-ribbon2 a{
	color: #fff;
}
.alert-ribbon2 p{
	padding: 6px 0;
}

/* -------------------------------------------------- */
/* Header + Navigation
/* -------------------------------------------------- */
header{
	position: sticky;
	z-index: 100;
	top: 0;
	width: 100%;
	height: 99px;
	display: flex;
	align-items: center;
	background-color: #fff;
	border-bottom: 1px solid #efefef;
}
header .container{
	display: flex;
	align-items: center;
}
.logo{
	display: block;
	background: url('/assets/images/logo.png') no-repeat;
	background-size: 235px 50px;
	width: 235px;
	height: 50px;
	overflow: hidden;
}
.prime-nav{
	margin: 0 0 0 auto;
}
.prime-nav ul{
	display: flex;
	align-items: center;
	margin: -8px;
}
.prime-nav li{
	padding: 8px;
	position: relative;
}
.prime-nav a{
	display: block;
	font-size: 15px;
	padding: 8px 8px 0 0;
	text-decoration: none;
	font-weight: 600;
	color: #000000;
	transition: color .25s;
	line-height: 1.2em
}
.prime-nav .hr{
	display: block;
	margin: 0;
	border: none;
	height: 8px;
	border-bottom: 2px solid transparent;
	transition: border-color .5s;
}
.prime-nav li:hover .hr,
.prime-nav a.active .hr,
a.text-btn:hover .hr{
	border-color: #000;
}

.prime-nav ul ul{
	display: block;
	visibility: hidden;
	opacity: 0;
	position: absolute;
	z-index: 500;
	width: 300px;
	left: 50%;
  transform: translate(-50%, 8px);
  transition: all .25s ease;
	padding: 12px 0;
	background: #fff;
	box-shadow: 0 0 6px rgba(0,0,0,.2);
	border-radius: 2px;
}
.prime-nav ul ul li{ 
	border-bottom: 1px solid #efefef;
	padding: 0; 
}
.prime-nav ul ul li:last-child{ border: none; }
.prime-nav ul ul a{
	text-align: center;
	text-transform: none;
	font-weight: 500;
	display: block;
	padding: 12px 0px;
	opacity: .5;
	letter-spacing: normal;
	font-size: 15px;
}
.prime-nav ul ul a:hover{
	opacity: 1;
}
.prime-nav ul li:hover ul{
	visibility: visible;
	opacity: 1;
	transform: translate(-50%, 14px);
}

/* -------------------------------------------------- */
/* Hero
/* -------------------------------------------------- */
.hero{
	background: #0268a0 no-repeat center;
	background-size: cover;
	position: relative;
	align-items: center;
	padding: 192px 0; 
}
.hero-screen{
	background-color: rgba(0,0,0,.2);
	position: absolute;
	z-index: 0;
	width: 100%;
	top: 0;
	bottom: 0;
}
.hero-text{
	position: relative;
	z-index: 10;
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	text-align: center;
	text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
.hero h1{ font-size: 72px; }

/* -------------------------------------------------- */
/* Button
/* -------------------------------------------------- */
a.btn, 
button.btn,
a.btn-xl,
button.btn-xl{
	display: inline-flex;
	align-items: center;
	font-family: Inter, sans-serif;
	background-color: transparent;
	border: 2px solid #000000;
	color: #000000;
	transition: color .25s, background-color .25s, border-color .25s;
	padding: 16px;
	font-size: 15px;
	font-style: normal;
	font-weight: 600;
	text-decoration: none;
	line-height: 1em;
	text-shadow: none;
}
a.btn-xl,
button.btn-xl{
	font-size: 18px;
	padding: 18px;
}
.dark-bg a.btn,
.dark-bg button.btn,
.dark-bg a.btn-xl,
.dark-bg button.btn-xl{
	border-color: #fff;
	color: #fff;
}
a.btn:hover, 
button.btn:hover,
a.btn-xl:hover,
button.btn-xl:hover{
	cursor: pointer;
	color: #fff;
	background-color: #000000;
	border-color: #000000;
}
p.callout{
	font-size: 27px;
	line-height: 1.4em;
}

/* -------------------------------------------------- */
/* Sections (shared)
/* -------------------------------------------------- */
.sec-hd{
	text-align: center;
	padding: 0 0 39px 0;
}
.sec-gen{
	padding: 96px 0;
}

/* Work */

.work.sec-gen{
	padding: 72px 0;
}
.work .subsec{
	padding: 24px 0;
}

/* -------------------------------------------------- */
/* Cards grid
/* -------------------------------------------------- */
.card-grid{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: -9px;
	padding: 0 0 24px 0;
}
.card-grid .card{
	padding: 9px;
	width: 20%;
}
.card-grid .card-wrap{
	background: #fff;
	height: 100%;
	color: #000000;
	box-shadow: 0 0 9px rgba(0,0,0,.1);
	border-radius: 2px;
	overflow: hidden;
}
.card-grid img{
	width: 100%;
	height: auto;
}
.card-grid .card-text{
	padding: 15px 24px 24px 24px;
}
.card-grid .card-text h3{
	font-size: 18px;
	font-weight: 700;
}

/* Team */

.team-mem-pos{
	font-size: 15px;
	font-weight: 500;
	font-style: italic;
	line-height: 1.4em;
	color: #27AE60 ;
}
.team-mem-bio{
	line-height: 1.6em;
}

/* Work */

.work .card-grid .card{
	width: 33.33%;
}
.work .card-grid .card-text{
	text-align: center;
}
.work .card-grid .card-text h3{
	padding: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4em;
}
.work .client-name{
	font-size: 16px;
	font-weight: 500;
	padding: 9px 0;
}


/* -------------------------------------------------- */
/* Card columns
/* -------------------------------------------------- */
.card-cols{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.card-cols.reverse{
	flex-direction: row-reverse;
}
.card-cols .card-img,
.card-cols .card-text{
	width: 50%;
}
.card-cols .card-text{
	padding: 0 24px 0 48px;
}
.card-cols.reverse .card-text{
	padding: 0 48px 0 24px;
}
.card-cols .card-text-container{
	width: 100%;
	max-width: 728px;
}
.card-cols.reverse .card-text-container{
	margin-left: auto;
}
.card-cols .card-img{ line-height: 0;}
.card-cols .card-img img{
	width: 100%;
	height: auto;
}

/* -------------------------------------------------- */
/* Contact
/* -------------------------------------------------- */
#c{
	scroll-margin-top: 99px;
}
.cform{
	padding: 24px 0;
}
.cform input, 
.cform select{
	font-family: Inter, sans-serif;
	font-size: 18px;
	color: #000;
	padding: 18px;
	background: #fff;
	border: 1px solid #efefef;
	width: 100%;
}
.cform .form-row{
	padding: 0 0 12px 0;
}
.cform .form-cols{
	display: flex;
	flex-wrap: wrap;
	margin: -6px;
}
.cform .form-col{
	width: 50%;
	padding: 6px;
}
.cform label{
	font-size: 14px;
	font-weight: 700;
	display: block;
	padding: 0 0 6px 0;
}
.alert{
	background: #ffdfdf url('/assets/images/alert.svg') no-repeat 12px 12px;
	color: red;
	padding: 12px 12px 12px 42px;
	border-radius: 2px;
}
.alert.ok{
	background: #dffff3 url('/assets/images/check.svg') no-repeat 12px 12px;
	color: #176e51;
}

/* -------------------------------------------------- */
/* Testimony
/* -------------------------------------------------- */
.sec-testimony{
	padding: 72px 0 96px 0;
	background: #0268a0;
}
.quotes-icon{
	width: 96px;
	height: 96px;
	background: #fcaf17 url('/assets/images/quotes.svg') no-repeat center;
	margin: 0 auto;
	border-radius: 48px;
}
.testimonies blockquote{
	text-align: center;
	padding: 24px 0 0 0;
}
.testimonies p.quote{
	font-size: 24px;
	font-style: italic;
	padding: 0 0 24px 0;
}
.testimonies .cite{
	background: url('/assets/images/hr.svg') no-repeat center top;
	padding: 26px 0 9px 0;
}
.testimonies .cite strong{
	display: block;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.glide__bullets{
	display: flex;
	justify-content: center;
	padding: 24px 0 0 0;
}
.glide__bullets button{
	margin: 0 3px;
	width: 12px;
	height: 12px;
	border-radius: 6px;
	background: #fff;
	opacity: .5;
}
.glide__bullets button.glide__bullet--active{
	opacity: 1;
}

/* -------------------------------------------------- */
/* Interior (shared)
/* -------------------------------------------------- */
.inside-head{
	padding: 48px 0;
	text-align: center;
}
.inside-head h1{
	font-size: 42px;
	font-weight: 600;
}
.inside-head p{
	font-size: 19px;
	font-weight: 500;
}

figure img{
	width: 100%;
	height: auto;
}
figcaption{
	padding: 9px 0 0 0;
	font-size: 14px;
	font-style: italic;
	opacity: .6;
	text-align: center;
}

/* -------------------------------------------------- */
/* Work
/* -------------------------------------------------- */
.client-brand{
	position: relative;
}
.client-brand img{
	width: 100%;
	height: auto;
}
.client-brand img.client-brand-logo{
	position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
}

/* -------------------------------------------------- */
/* Pagination
/* -------------------------------------------------- */
.pagination{
	padding: 48px 0;
}

/* -------------------------------------------------- */
/* Footer
/* -------------------------------------------------- */
footer{
	font-size: 14px;
	color: #fff;
	text-align: center;
}
footer .top-row{
	background: #0071bc;
	padding: 24px 0;
}
footer .btm-row{
	background: #0268a0;
	padding: 12px 0;
}
footer a{ color: #fff; }
.split-2-cols{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	margin: -12px;
}
ul.li-icons{
	display: flex;
	align-items: center;
	justify-content: center;
	margin: -6px;
	padding: 12px;
}
ul.li-icons.no-links{ margin: -12px auto -12px -12px; }
ul.li-icons li{ padding: 6px; }
ul.li-icons.no-links li{ padding: 12px; }
ul.li-icons a{
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	height: 48px;
	width: 48px;
	border-radius: 24px;
}
@media screen and (max-width: 400px) {
	footer .split-2-cols{ justify-content: center }
	footer .split-2-cols ul{ width: 100%; }
	footer ul.li-icons.no-links{ margin: -12px; }
}

/* -------------------------------------------------- */
/* Mobile Nav
/* -------------------------------------------------- */
.mnav-toggle{
	position: relative;
	z-index: 101;
	width: 36px;
	height: 36px;
	color: #000;
	display: none;
	margin: 0 0 0 auto;
	shape-rendering: crispEdges;
}
.mnav-close{ display: none; }
.mnav{
	position: fixed;
	z-index: 100;
	background: #fff;
	top: 99px;
	right: 0;
	bottom: 0;
	left: 0;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	display: none;
	padding: 24px 0;
}
.mnav ul.li-icons{
	margin-top: auto;
}
.mnav ul.li-icons a{
	color: #fff;
	background: #000;
}
body.show{ overflow: hidden; }
body.show .mnav{ display: flex; }
body.show .mnav-open{ display: none; }
body.show .mnav-close{ display: block; }
body.show .alert-ribbon{ display: none; }
.mnav ul.li-mnav{
	width: 100%;
}
.mnav ul.li-mnav a{
	text-align: center;
	display: block;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 24px;
	border-bottom: 1px solid #efefef;
}

/* -------------------------------------------------- */
/* Breaking Points
/* -------------------------------------------------- */
@media screen and (max-width: 1599px) {
	.card-cols{
		align-items: flex-start;
	}
}
@media screen and (max-width: 1279px) {
	.card-cols .card-img{ width:34%; }
	.card-cols .card-text{ width: 66%; }
}
@media screen and (max-width: 1079px) {
	.prime-nav{ display: none; }
	.mnav-toggle{ display: block; }
	.card-grid .card,
	.plans .card-grid .card,
	.work .card-grid .card{ width: 50%; }
}
@media screen and (min-width: 1078px) {
	.prime-nav{ display: block; }
	body.show .mnav{ display: none; }
	.mnav-toggle{ display: none; }
}
@media screen and (max-width: 900px) {
	.card-cols .card-img,
	.card-cols .card-text,
	.card-cols .card-text-container{ 
		width: 100%; 
		max-width: 100%;
	}
	.card-cols .card-text,
	.card-cols.reverse .card-text{ padding: 24px; }
}
@media screen and (max-width: 800px) {
	h2{ font-size: 30px; }
	.hero{ padding: 96px 0; }
	.hero h1{ font-size: 48px; }
	.testimonies p.quote{ font-size: 24px; }
	.gallery a{ width: 25%; }
	footer .top-row-cols p,
	footer .top-row-cols ul,
	footer .btm-row ul li{ 
		text-align: center;
		width: 100%;
	}
	footer ul.social{ padding: 24px 0 0 0; }
	.list-card-wrap{ display: block; }
	.list-card-txt p.btns{ justify-content: center; }
	.list-card-img{ 
		text-align: center;
		padding: 24px 24px 0 24px; 
	}
}
@media screen and (max-width: 700px) {
	.card-grid .card,
	.plans .card-grid .card,
	.work .card-grid .card{ width: 100%; }
	.cform .form-col{ width: 100%; }
}
@media screen and (max-width: 600px) {
	.gallery a{ width: 50%; }
	.insight figure.half-width{
		float: none;
		width: 100%;
		margin-left: 0;
	}
}
@media screen and (max-width: 480px) {
	.list-card-img{ padding: 0; }
	.list-card-img img{ 
		width: 100%;
	}
}