/*-----------------------------------*\
  RESET/BASIC
\*-----------------------------------*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0; padding:0; border:0; outline:0; 
	vertical-align:baseline; background:transparent;
}

* { box-sizing: border-box; }

html {
    font-size: 62.5%;
}

body {
    font-family: libre-franklin, sans-serif; 
    font-size: 1.2rem; line-height: 1.5;
    color: #212126; font-weight: 400;
    background: #fff; min-height: 100vh;
    display: flex; flex-direction: column;
    letter-spacing: 0.005em;
}

@media screen and (max-device-width: 480px){
	body{
		-webkit-text-size-adjust: none;
	}
}

img {
    width: 100%; height: auto;
    display: block;
}

a {
    text-decoration: none;
    transition: all 0.25s ease-in;
    color: #1B54C2;
}

.lgbreak {
	display: none;
}

.basic {
	max-width: 1542px;
	padding: 0 18px;
	margin: 0 auto;
}

.spanish #intro .basic,
.spanish #contact .basic {
	max-width: none;
}

.btn {
	display: inline-block; font-size: 1.7rem;
	line-height: 34px; font-weight: 600;
	border: 1px solid #1B54C2; background: #fff;
	border-radius: 10px; padding: 0 16px;
}

.btn:hover {
	color: #fff;
	background: #1B54C2;
}

@media only screen and (min-width: 768px) {

	body {
	    font-size: clamp(1.4rem, 1.5625vw, 3rem); 
	}

	.basic {
		padding: 0 30px;
	}

	.lgbreak {
		display: block;
	}

	.smbreak {
		display: none;
	}

	.btn {
		font-size: 2.2rem;
		line-height: 46px;
		padding: 0 30px;
	}

}

@media only screen and (min-width: 1280px) {

	.basic {
		padding: 0 40px;
	}

	.btn {
		font-size: 3.1rem;
		line-height: 73px;
		padding: 0 48px;
	}

}

/*-----------------------------------*\
  HEADER
\*-----------------------------------*/

.header-inner {
	display: flex; height: 48px;
	align-items: center;
}

.logo {
	width: 104px;
}

.header-contact {
	margin-left: auto; padding-left: 30px;
	min-height: 18px; font-weight: 600;
	background: url(../images/phone.png) no-repeat left center;
	background-size: 24px; line-height: 1.3;
}

.hc-cta {
	color: #787879; font-size: 1rem;
}

.header-contact a {
	font-size: 1.2rem;
}

@media only screen and (min-width: 768px) {

	.header-inner {
		height: 96px;
	}

	.logo {
		width: 164px;
	}

	.header-contact {
		padding-left: 48px;
		min-height: 36px;
		background: url(../images/phone.png) no-repeat left center;
		background-size: 36px; 
	}

	.hc-cta {
		font-size: 1.4rem;
	}

	.header-contact a {
		font-size: 1.8rem;
	}

}

@media only screen and (min-width: 1280px) {

	.header-inner {
		height: 120px;
	}

	.logo {
		width: 220px;
	}

	.header-contact {
		padding-left: 54px;
		min-height: 44px;
		background: url(../images/phone.png) no-repeat left center;
		background-size: 44px; 
	}

	.hc-cta {
		font-size: 2rem;
	}

	.header-contact a {
		font-size: 2.4rem;
	}

}

@media only screen and (min-width: 1680px) {

	.header-inner {
		height: 160px;
	}

	.logo {
		width: 325px;
	}

	.header-contact {
		padding-left: 60px;
		min-height: 50px;
		background: url(../images/phone.png) no-repeat left center;
		background-size: 50px; 
	}

	.hc-cta {
		font-size: 2.4rem;
	}

	.header-contact a {
		font-size: 3rem;
	}

}


/*-----------------------------------*\
  HERO
\*-----------------------------------*/

#hero {
	position: relative; 
}

.hero-copy {
	padding: 18px 18px 0;
}

h1 {
	font-size: 2.3rem; font-weight: 600;
	color: #1B54C2; line-height: 1.26;
}

@media only screen and (min-width: 768px) {

	.hero-copy {
		padding: 0; position: absolute;
		top: 4.7395833vw; left: 12.03125vw;
	}

	h1 {
		font-size: 2.9167vw; font-weight: 400;
		color: #fff; line-height: 1.257;
	}

}

/*-----------------------------------*\
  INTRO
\*-----------------------------------*/

#intro {
	padding: 30px 0;
}

h2 {
	font-size: 2rem; font-weight: 600;
	color: #1B54C2; line-height: 1.26;
	margin-bottom: 10px;
}

#intro p {
	margin-bottom: 10px;
}

.intro-cta {
	margin-bottom: 20px; font-weight: 600;
	color: #1B54C2; line-height: 1.35;
	font-size: 1.6rem;
}

@media only screen and (min-width: 768px) {

	#intro {
		padding: 40px 0 48px; text-align: center;
		background: rgba(244, 240, 237, 0.85);
	}

	h2 {
		font-size: 3.125vw;
		margin-bottom: 2.395833vw;
	}

	#intro p {
		font-size: 2.135416vw;
		margin-bottom: 2.395833vw;
	}

	.intro-cta {
		margin-bottom: 3.385416vw;
		font-size: 2.552vw;
	}

}

@media only screen and (min-width: 1024px) {

	#intro {
		padding: 56px 0 86px; 
	}

}

@media only screen and (min-width: 1680px) {

	#intro {
		padding: 72px 0 96px; 
	}

}

@media only screen and (min-width: 1920px) {

	h2 {
		font-size: 6rem;
		margin-bottom: 46px
	}

	#intro p {
		font-size: 4.1rem;
		margin-bottom: 46px;
	}

	.intro-cta {
		margin-bottom: 65px;
		font-size: 4.9rem;
	}

}

/*-----------------------------------*\
  GRID
\*-----------------------------------*/

#grid {
	margin-bottom: 13px;
}

.row {
	margin-bottom: 27px;
}

.row-img {
	margin-bottom: 27px;
}

.gridicon {
	width: 52px;
	margin: 0 auto 22px;
}

h3 {
	font-family: franklin-gothic-compressed, sans-serif; 
	font-size: 2.3rem; font-weight: 600;
	letter-spacing: 0.015em; color: #1B54C2;
	text-align: center; margin-bottom: 8px;
	text-transform: uppercase;
}

.spanish h3 {
	line-height: 1.2;
}

.row-copy p {
	margin-bottom: 16px;
}

.row-copy a {
	text-decoration: underline;
	font-weight: 700;
}

@media only screen and (min-width: 768px) {

	#grid {
		margin-bottom: 0;
	}

	.row {
		margin-bottom: 0; display: flex;
	}

	.row-img {
		margin-bottom: 0; width: 50%;
	}

	.row:nth-of-type(even) .row-img {
		order: 2;
	}

	.row-copy {
		width: 50%; padding: 20px 0 0 20px;
		display: flex; 
	}

	.row:nth-of-type(even) .row-copy {
		order: 1; padding: 20px 20px 0 0;
	}

	.gridicon {
		width: clamp(52px, 6.5625vw, 126px);
		margin-bottom: clamp(20px, 2.7vw, 52px);
	}

	.spanish .gridicon {
		margin-bottom: clamp(20px, 2.7vw, 38px);
	}

	h3 {
		font-size: clamp(2.3rem, 2.34375vw, 4.5rem);  
		margin-bottom: clamp(8px, 1.0416vw, 20px);
	}

	.row-copy p {
		margin-bottom: clamp(20px, 2.34375vw, 45px);
	}

}

@media only screen and (min-width: 1024px) {

	.row-copy {
		padding: 30px 0 0 30px;
	}

	.row:nth-of-type(even) .row-copy {
		padding: 30px 30px 0 0;
	}

}

@media only screen and (min-width: 1280px) {

	.row-copy {
		padding: 40px 0 0 40px;
	}

	.row:nth-of-type(even) .row-copy {
		padding: 40px 40px 0 0;
	}

}

@media only screen and (min-width: 1542px) {

	.row-copy {
		font-size: 3rem;
	}

	h3 {
		font-size: 4.5rem;  
	}

	.spanish .gridicon {
		width: 100px;
		margin-bottom: 36px;
	}

	.spanish p {
		margin-bottom: 36px;
	}

}

/*-----------------------------------*\
  CONTACT
\*-----------------------------------*/

#contact {
	background: rgba(244, 240, 237, 0.85);
	padding: 34px 0 40px; color: #1B54C2;
	font-size: 1.9rem;
}

#contact p {
	margin-bottom: 18px;
}

.bigphone {
	display: inline-flex; align-items: center;
	font-weight: 600; font-size: 5vw;
}

.bpicon {
	width: 32px;
	margin-right: 8px;
}

@media only screen and (min-width: 375px) {

	.bigphone {
		font-size: 2.2rem;
	}

}

@media only screen and (min-width: 768px) {

	#contact {
		text-align: center;
		padding: 48px 0 60px;
	}

	#contact p {
		margin-bottom: clamp(2rem, 2.34375vw, 4.5rem);
		font-size: clamp(2rem, 2.34375vw, 4.5rem);
	}

	#contact p:first-of-type {
		margin: 0;
	}

	.bigphone {
		font-size: clamp(2.2rem, 3.54167vw, 6.8rem);
	}

	.bpicon {
		width: clamp(32px, 3.64583vw, 70px);
		margin-right: clamp(10px, 1.40625vw, 27px);
	}

}

@media only screen and (min-width: 1280px) {

	#contact {
		padding: 56px 0 72px;
	}

}

@media only screen and (min-width: 1680px) {

	#contact {
		padding: 80px 0 96px;
	}

}

/*-----------------------------------*\
  BOTTOM BANNER
\*-----------------------------------*/

#btmbanner {
	position: relative;
}

.bb-copy {
	padding: 32px 18px 27px;
	color: #1B54C2; font-size: 2.2rem;
	font-weight: 600; line-height: 1.318;
}

@media only screen and (min-width: 768px) {

	.bb-copy {
		padding: 0; position: absolute;
		color: #fff; font-size: 2.916vw;
		top: 2.76vw; right: 13.5416vw;
		font-weight: 400; line-height: 1.28;
	}

}

/*-----------------------------------*\
  FOOTER
\*-----------------------------------*/

footer {
	padding: 40px 0;
	background: #D3E1F0;
	color: #1B54C2;
	letter-spacing: normal;
	line-height: 1.67;
}

.footerlogo {
	width: 275px;
	margin-bottom: 30px;
}

.legal {
	margin-bottom: 30px;
}

.footerinfo {
	margin-bottom: 30px;
	text-align: center;
}

.copyright {
	margin-bottom: 24px;
}

@media only screen and (min-width: 768px) {

	footer {
		padding: 6.09375vw 0 8.64583vw;
		font-size: 1.4rem;
	}

	.footerlogo {
		width: 345px;
		margin-bottom: 45px;
	}

}

@media only screen and (min-width: 1920px) {

	footer {
		padding: 117px 0 166px;
	}

}
