/* ==== BROWSER RESETS  ==== */
* { box-sizing: border-box; padding: 0; margin: 0 }
body, html { height: 100% }
body { max-width: 1600px }


/* ==== UTILITY CLASS  ==== */
.img-fluid { width: 100%; height: auto }
* { margin:0; padding:0; box-sizing: border-box }


/* ====== HERO AND FOOTER SECTIONS ======= */

.container-hero, .container-footer { width: 100%; text-align: center }

.container-hero { 
	background: blue; 
	margin: 0 auto 5% auto; 
	padding: 6% 0 6% 0;
}

.container-footer { 
	background: #233b53;
	margin: 0 auto
}

.container-hero h1, .container-footer p { color: #fff }

.container-hero h1 {
	font-size: calc(28px + (54 - 28) * ((100vw - 320px) / (1600 - 320))); 
	font-weight: 800;
	line-height: 1.4;
	margin: 0 auto;
	width: 60%;
	font-family: 'Montserrat', sans-serif; 
}

.container-footer p {
	font-family: sans-serif;
	margin: 0 auto;
	padding: 3% 5%;
	line-height: 1.3;
	font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1600 - 320))); 
}






/* === CONTAINERS FOR FLEXBOX GRIDS === */

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


/* Desktop */
@media all and (min-width:768px) { 
	.container-wide   { width: 90%; margin: 0 auto 8% auto }
	.container-narrow { width: 80%; margin: 0 auto 8% auto; max-width: 1070px }
}

/* Mobiles */
@media all and (max-width:767px) { 
	.container-wide   { width: 84%; margin: 0 auto 12% auto }
	.container-narrow { width: 70%; margin: 0 auto 12% auto }
}


/*  ===== CONTENT WITHIN COLUMNS OF FLEXBOX GRIDS ====*/

.flex-grid-two h2, .flex-grid-two h3 {  
	font-weight: 700; 
	color: #183b56;
	line-height: 1.1;
}

.flex-grid-two h2 {  
	font-size: calc(26px + (48 - 26) * ((100vw - 320px) / (1600 - 320))); 
	margin-bottom: 3%;
}

.flex-grid-two h3 { 
	font-weight: 700;
	font-size: calc(18px + (26 - 18) * ((100vw - 320px) / (1600 - 320))); 
}

.flex-grid-two p { 
	font-weight: 400;
	color: #465E72;
	line-height: 1.5;
	margin-bottom: 6%;
	font-size: calc(15px + (20 - 15) * ((100vw - 320px) / (1600 - 320))); 
}

.flex-grid-two button { 
	font-family: sans-serif;
	font-weight: bold; 
	background-color: green; 
	color: #fff; 
	letter-spacing: 2px;
	text-transform: uppercase;
	border-width: 0; 
	font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1600 - 320))); 
}

/* Desktop */
@media all and (min-width:768px) { button { padding: 12px 28px } }

/* Mobiles */
@media all and (max-width:767px) { button { padding: 8px 16px } }


.flex-grid-two hr { 
	margin-bottom: 20px; 
	width: 20%; 
	height: 12px; 
	background-color: #B9995E; 
	border-width:0
}

/* Mobiles */
@media all and (max-width:767px) { 
	.flex-grid-two hr {  margin-top: 5%; margin-left: auto; margin-right: auto }
}


/* Desktop */
@media all and (min-width:768px) { 
	.flex-grid-two .col-no-gutter .col-no-gutter-inner {  padding: 0 10% }
}

/* Mobiles */
@media all and (max-width:767px) { 
	.flex-grid-two .col-no-gutter .col-no-gutter-inner {  padding: 5% 10% }
}


/* ==== TWO COLUMN FLEXBOX GRID ======= */

.flex-grid-two { display: flex }

/* Desktop */
@media all and (min-width:768px) { 
	.flex-grid-two { 
		flex-direction: row; /* left to right */
		text-align: left
	}
}

/* Mobiles */
@media all and (max-width:768px) { 
	.flex-grid-two { 
		flex-direction: column; /* top to bottom */
		text-align: center
	}
}

/* ==== EQUAL COLUMNS IN TWO COLUMN GRID ======= */

/* Desktop */
@media all and (min-width:768px) { 
	.flex-grid-two .col-gutter { width: 46% }
	.flex-grid-two .col-gutter:nth-child(1) { margin-right: 8% }
	.flex-grid-two .col-gutter:nth-child(2) { margin-right: 0 }

	.flex-grid-two .col-no-gutter { width: 50% }

	.flex-grid-two .col-vertical-center { align-self: center }
}

/* Mobiles */
@media all and (max-width:768px) { 
	.flex-grid-two .col-gutter, 
	.flex-grid-two .col-no-gutter { width: 100% }

	.flex-grid-two .col-no-gutter h2 { margin-top: 5% }
	.flex-grid-two .col-no-gutter button { margin-bottom: 5% }

}