/* =Fonts
-----------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
/* =Layout
-----------------------------------------------------------------------------*/
body {background:#cdd9d3 url(../images/paper_3.png) repeat;}

.wrapper {
    background:#fff;
	margin: auto;
	max-width: 1280px;
	padding: 16px 16px 36px;
	_width: 1280px;
	box-shadow:0 2px 12px rgba(40, 40, 40, 0.4);
}
#main aside {
	background-color: #f6f6f6;
}
#blocks li {
	background-color: #f8f8f8;
	height: 100px;
}
.width-75 {
  width: 75%;
}
.indent-5 {
  margin:0 0 2% 1.5%;
}

/* =Header
-----------------------------------------------------------------------------*/
#header {
	display: flex;
    flex-direction: row;
	overflow: hidden;
	margin-bottom: 2em;
    padding-bottom: 15px;
	border-bottom: 1px solid #eee;
}
#header .site-logo {
    margin: 0 10px 0 0;
    align-self: center;
}
#header h1 {
	margin: 0;
    flex-grow: 1;
    align-self: center;
}
#header nav {
    align-self: center;
    margin-bottom: 0;
}

/* =Accents
-----------------------------------------------------------------------------*/
aside.fifth {margin-left: 2%;}
aside.fifth .inner {background:#d7e1d8; border:1px solid #88a489; border-radius:5px;}
aside.fifth .inner .nav-v ul li {border-color:#9CB39D;}
aside.fifth img, .framed {
	padding: 4px;
	background-color: #fff;
	border: 1px solid #d7e1d8;
	border-radius: 2px;
	box-shadow: 3px 3px 7px 0 rgba(0,0,0,0.30);
}

/* =Utilities
-----------------------------------------------------------------------------*/

.linethrough {text-decoration: line-through;}

/* =Typography
-----------------------------------------------------------------------------*/
h1, h2, h3, h4, h5 {font-family: 'Oswald', 'Trebuchet MS', Helvetica, Arial, sans-serif;}
h2 {color:#294b2b; margin-bottom:.8em;}
h3 {color:#749475;}
h4 {margin:2% 0 .5% 0;}
p {margin-bottom: .8em;}
p.construction {line-height:20px; font-size: 20px; color: #777;}
p.construction .fa-exclamation-triangle {color:#ff9900;}
p.footnote {color:#777;}
figcaption {line-height:1.3; font-size: .9em; margin:10px 0 0 0; padding:0 0 10px 0;}

/* =Footer
-----------------------------------------------------------------------------*/
#footer {border-top:1px solid #eee; padding-top:1.5em; margin:1.5em 0; font-size:.85em;}
#footer p {float:left;}
#footer nav {float:right;}
#footer nav ul {margin:0; list-style:none;}
#footer nav#social-media ul li {display:inline; padding:0 10px 0 0;}
/*#footer nav ul li a.social-icon {margin:-3px 0 0 0; padding:3px 0 4px 30px; display:block;}
#footer nav ul li a.social-icon.facebook {background:url(../images/glyphicons_facebook.png) no-repeat 0 0;}*/

/* =Tablet (Portrait)
-----------------------------------------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .wrapper { width: 748px; }
}

/* =Mobile (Portrait)
-----------------------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
	.wrapper { width: 300px; }
	#header nav, #header h1 { float: none; }
	#header h1 { margin-bottom: .5em; }
	#nav ul li { margin: 0; float: none; margin-bottom: 1px; background-color: #f6f6f6; }
	#nav ul li a, #nav ul li span { display: block; padding: 2px 5px; }
	#footer nav {float:left;}
}

/* =Mobile (Landscape)
-----------------------------------------------------------------------------*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.wrapper { width: 420px; }
	#header nav, #header h1 { float: none; }
	#footer nav {float:left;}
}

/* =Overrides
-----------------------------------------------------------------------------*/
.block-links li {margin-bottom:7px;}
.block-links a {display:block;}
.third {width:30%;}

/* =Forms
-----------------------------------------------------------------------------*/
form {width:85%;}
form header {margin:0 0 20px 0;}
form header div {font-size:90%; color:#999;}
form header h2 {margin:0 0 5px 0;}
form > div {clear:both; overflow:hidden; padding:1px; margin:0 0 10px 0;}
form > div > fieldset > div > div {margin:0 0 5px 0;}
form > div > label, legend {width:33%; float:left; padding-right:2%;}
form > div > div, 
form > div > fieldset > div {width:65%; float:right;}
form > div > fieldset label {font-size:90%;}
form p.disclaimer {color: #999; font-style:italic; font-size: 12px; margin:5px 0}
fieldset {border:0; padding:0;}

input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea {width:100%; border-top:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #eee; border-bottom:1px solid #eee;}
input[type=text],
input[type=email],
input[type=url],
input[type=password] {width:50%;}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus {outline:0; border-color:#4697e4;}

input[type=radio] {margin:0 3px 0 0; vertical-align:middle; top:-2px;}
input.input-spacing {margin:0 0 0 7px;}

@media (max-width:600px) {
  form > div {margin:0 0 15px 0;}
  form > div > label,
  legend {width:100%; float:none; margin:0 0 5px 0;}
  form > div > div,
  form > div > fieldset > div {width:100%; float:none;}
  input[type=text],
  input[type=email],
  input[type=url],
  input[type=password],
  textarea,
  select {width:100%;}
}
@media (min-width:1200px) {
  form > div > label, legend {text-align:right;}
}

/* =Custom Styles
-----------------------------------------------------------------------------*/

.fifth.block-links.wider {
	width: 20%;
}