/* Lists
   ========================================================================== */

/**
 * Remove default list styles, margins, and padding.
 */

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ================================= 
  Base Element Styles
==================================== */

* {
	box-sizing: border-box;
}

body {
	font-family: 'Varela Round', sans-serif;
	line-height: 1.6;
	color: #3a3a3a;
}

p {
	font-size: .95em;
	margin-bottom: 1.8em;
}

h2,
h3,
a {
	color: #093a58;
}

h2,
h3,
h4 {
	margin-top: 0;
}

h4 {
	margin-bottom: .4em;
}

a {
	text-decoration: none;
}

img {
	max-width: 100%;
}

figure {
  position: relative;
	margin: 0;
	line-height: 0;
}

figcaption {
	font-size: .9em;
	line-height: 1.5;
	color: #fff;
	padding: 1em;	
	background: rgba(19,43,102, .85);
  
  position: absolute;
  bottom: 0;
  width: 100%;
}

/* ================================= 
  Base Layout Styles
==================================== */

/* ---- Navigation ---- */

.name {
	font-size: 1.25em;
}

.name,
.main-nav {
  text-align: center;
}

.name a,
.main-nav a {
	text-align: center;
}

.main-nav a {
	font-size: .95em;
	color: #3acec2;
	text-transform: uppercase;
  display: block;
  padding: 0.5em;
}

.main-nav a:hover {
	color: #093a58;
}

/* ---- Layout Containers ---- */

.banner {
	color: #fff;
	background: #3acec2;
  text-align: center;
  padding: 3em;
  margin: 0 0 1em;
}

.col {
  padding: 1em;
}

.col h2 {
  text-align: center;
}

.main-footer {
	background: #d9e4ea;
	padding: 2em 0;
	margin-top: 30px;
  text-align: center;
}

/* ---- Page Elements ---- */

.logo {
	width: 190px;
}

.headline {
  margin-bottom: 0;
}

.icon-location {
  width: 35px;
  position: absolute;
  top: -15px;
  right: -15px;
}

/* ================================= 
  Media Queries
==================================== */

@media (min-width: 769px) {

  body {
    padding-top: 58px /* approximate height of main-header */
  }
  
  .container {
    width: 90%;
    margin: 0 auto;
  }
  
  .col h2 {
    text-align: inherit;
  }
  
  .tagline {
    font-size: 1.4em;
  }
  
  /* ---- Main Header Layout ---- */
  
  .main-header {
    position: fixed;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
    width: 100%;
    top: 0;
    z-index: 1000;
  }
  
  .name {
    float: left;
  }
  
  .main-nav {
    float: right;
  }
  
  .main-nav li {
    float: left;
    margin: 0.6em;
  }
  
  /* ---- Column Layout ---- */
  
  .col {
    float: left;
  }
  
  .primary {
    width: 60%;
  }
  
  .secondary {
    width: 40%;
  }
  
	/* ---- Float clearfix ---- */

	.clearfix::after {
		content: " ";
		display: table;
		clear: both;
	}

}

@media (min-width: 1025px) {
  
  .container {
    width: 80%;
    max-width: 1150px;
  }
  
  .col {
    padding: 1.2em;
  }
  
  .primary {
    width: 40%;
  }
  
  .secondary,
  .tertiary {
    width: 30%;
  }

}