/*
Theme Name: medford
Theme URI: http://underscores.me/
Author: MBell
Author URI: http://www.justmakeawebsite.com
Description: JMAWTheme
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: med
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

medford is based on Underscores https://underscores.me/, (C) 2012-2016 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
# JMAW Layout
# JMAW Responsive
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# JMAW Stylesheet
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# JMAW CSS Reset
--------------------------------------------------------------*/

html {
	font-size: 100%;
	box-sizing: border-box;
}
  
*, *:before, *:after {
	box-sizing: inherit;
}
  
body, h1, h2, h3, h4, h5, h6, p, ol, ul {
	margin: 0;
	padding: 0;
	margin-block-start:0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}
  
h1 { 
    display: block;
    font-size: 2em;
    font-weight: bold;
}

h2 {
    display: block;
	font-size: 1.75em;
	font-weight: bold;
}

h3 { 
    display: block;
	font-size: 1.5em;
    font-weight: bold;
}

h4 { 
	display: block;
	font-size: 1.25em;
    font-weight: bold;
}

h5 { 
    display: block;
    font-size: .83em;
    font-weight: bold;
}

h6 { 
    display: block;
    font-size: .67em;
    font-weight: bold;
}

img {
	max-width: 100%;
	height: auto;
  }


/*--------------------------------------------------------------
# JMAW Set Defaults
--------------------------------------------------------------*/

body{
	margin:0;
    font-family: 'Lato', serif;
	color: #2b2d2d;
	line-height: 1.5;
	word-spacing: .1em;
	background-color: #e2e2e2;
}

/* Set Bottom Margin */
h1, h2, h3, h4, h5, h6, p, ol, ul, img, .img-example, .article-info {
	margin: 0 0 28px 0;
  }

  ol li:last-child, ul li:last-child{
	  margin-bottom:40px;
  }

h2, h3, h4,
.step1-header, 
.step2-header, 
.step3-header, 
.step4-header, 
.step5-header{
	margin-top:40px;
  }

  h5, h6{
	margin-top:40px;
  }

h1{
	font-size: 2.1em;
	font-weight: bold;
}

h2{
	font-size: 1.8em;
	font-weight: bold;
}

h3{
	font-size: 1.55em;
	font-weight: bold;
}

h4{
	font-size: 1.30em;
	font-weight: bold;
}

h5{
	font-size: 1em;
    font-weight: bold;
}

h6{
    font-size: 1em;
    font-weight: normal;
}

h1, h2, h3, h4, h5, h6{
	line-height: 1.2;
}

strong { 
	font-weight: 600;
	color:#000;
}

.bold{
	font-style: bold;
}

.italic{
	font-style: italic;
}

.underline{
	text-decoration: underline;
}

a:link{
    text-decoration: none;
    color: rgb(13, 151, 249);
}

a:hover{
    text-decoration: underline;
    color: rgb(13, 151, 249);
}

a:visited{
    color: rgb(13, 151, 249);
}


/*--------------------------------------------------------------
# JMAW Default Lists
--------------------------------------------------------------*/

ul, ol {
	list-style-position: outside;
	margin-left: 2em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

ol li, ul li{
	margin-bottom: 15px;
	margin-left: 0;
	padding-top:0; 
	padding-left: .8em;
}

ol ol, ul ul {
	margin-left: 1em;
	margin-bottom: .5em;
}



/*--------------------------------------------------------------
# JMAW Site Structure
--------------------------------------------------------------*/
/*
 * Site Structure Containers
 * <div> that defines the site structure. 
 * High level <div> for header, footer, main, aside, and the nested divs within them that appear on every page on the site.
*/

#site-container{
	border: 0px red solid;
	width:90%;
	max-width: 1200px;
	font-size:1rem; 
	margin: 0 auto;
	background-color: #fff;
}

header {
	float:left;
	border-bottom: 5px #00a004 solid;
	width:100%;
	max-width: 1200px;
	font-size:1rem; 
	padding: 0 1em;
	margin: 0 auto;
	background-color:#000;
}

.header-middle{
	float:left;
	border: 0px #fff solid;
	width:100%;
	max-width: 1200px;
	min-height:4em;
	margin-top: 2.2em;
}

.logo{
	float: left;
	border: 0px red solid;
}

.logolink{
	float:left;
	border: 0px #fff solid;
	padding:0;
	margin: 0;
}

main{
	border: 0px purple solid;
	font-size:1rem; 
}

footer{
	width: 100%;
	height:6em; 
	margin-top:6em;
	font-size:1rem; 
	text-align: center;
    color: #fff;
    background-color:#000;
}

.footer-middle{
	border:0px #fff solid;
	float:left;
	width:100%;
	margin-top:1.4em;
}

.footer-links{
	border:0px #fff solid;
	float:left;
	width:100%;
}

.footer-links a{
	padding-right:.7em;
}

.footer-links a:last-child{
	padding-right:0;
}

.footer-copyright{
	border:0px #fff solid;
	float:left;
	width:100%;
}


.home-page-header{
	border-top: 5px #000 solid;
	border-bottom: 5px #000 solid;
	position: relative;
	top: 0px; 
	left: 0px;
	overflow: hidden;
	background: linear-gradient(transparent 20%, #020202), url('../med/img/hd-bkgr.jpg') repeat;
	width:100%;
	height:275px;
	margin-bottom:2em;
}

.home-page-header-middle{
	float:left;
	border: 0px #fff solid;
	width:100%;
	margin-top:1.6em;
	padding: 0 1em;
}

.home-page-header-left{
	border: 0px #fff solid;
	float:left;
	width:35%;
}

.home-page-header-left img{
	margin-bottom:0;
}

.home-page-header-right{
	border: 0px #fff solid;
	float:right;
	width:60%;
	color: #f8f5f5;
}

.home-headline{
	border: 0px #fff solid;
	width:100%;
	text-align:center;
	font-weight: 600;
	margin: 0 auto;
}

.home-message{
	border: 0px #fff solid;
	width:75%;
	text-align:center;
	font-weight: 600;
	margin: 0 auto;
}

.home-page-header-h1{
	font-size:2.4em;
	margin-bottom:0;

}.home-page-header-h3{
	font-size:1.2em;
	margin-top:1em;
}

.home-five-step-container{
	border:0px #000 solid;
	margin-top:2.3em;
	margin-bottom:10em;
}

.home-five-step-header{
	border:0px #000 solid;
	font-size:1.02em;
	text-align:center;
	margin-bottom:2.4em;
}

.home-five-step-image{
	border:0px #000 solid;
	margin-bottom:2.2em;
}

.home-five-step-message{
	border:0px #000 solid;
	font-size:1em;
	margin-bottom:2.2em;
}

.home-five-step-get-started{
	border:0px #000 solid;
	text-align: center;
	margin-bottom:2em;
}

.home-five-step-get-started a{
	color:#fff;
}

.get-started-button{
	display:inline-block;
	border-radius: 5px;
	background-color: #2a5ece;
	padding: 10px 30px 10px 30px;
	font-size:.8em;
	text-decoration: none;
}

.get-started-button:hover{
	background-color: #4679e6;
	cursor: pointer;
	text-decoration: none;
}

/*--------------------------------------------------------------
# JMAW Navigation
--------------------------------------------------------------*/

.menu-btn, .close-menu{
	border: 0px orange solid;
	float:right;
	display:none;
	padding:0;
	margin: 0;
}

nav {
	border: 0px orange solid;
	float:right;
	padding-top:.2em;
}

.main-menu{
	float:right;
	padding:0;
	margin:0;
	list-style: none;
	border: 0px pink solid;
}

.main-menu li{
	display:inline-block;
	padding: 0 1em 0 0;
	margin: 0;
}

.main-menu li:last-child{
	padding-right: 0;
}

.current-page{
	color: #99d5fd;
}


/*--------------------------------------------------------------
# JMAW Page Structure Containers
--------------------------------------------------------------*/


.page-header, .category-header{
	border-top: 5px #000 solid;
	position: relative;
	top: 0px; 
	left: 0px;
	overflow: hidden;
	width:100%;
	height:275px;
	margin-bottom:2em;
}

.page-header{
	border-bottom: 5px #000 solid;
	background: linear-gradient(transparent 20%, #020202), url('../med/img/hd-bkgr.jpg') repeat;
}

.category-header{
	border-bottom: 5px #2a5ece solid;
	background-color: #2a5ece;
}


.page-title{
	position: absolute;
	top: 49%;
	left: 50%;
	transform: translate(-50%, -50%);
	overflow: hidden;
	width:56%;
	color: #fff;
	text-align:center;
}

.page-title h1{
	font-size: 2.9em;
	font-weight: 900;
	line-height: 1.6em; 
	letter-spacing:.04em;
	margin: 0;
}

.page-content{
	border: 0px green solid;
	max-width: 750px;
	font-size: 1.3em;
	padding: 0 .5em;
	background-color: #fff;
	margin: 0 auto;
}

.article-info{
	border: 0px #000 solid;
	width:100%
}

.article-info::after {
	content: "";
	display: block;
	clear: both;
  }

.author-info{
	float: left;
	border: 0px #000 solid;
	width:315px;
}

.author-image{
	border: 0px #000 solid;
	float:left;
}

.author-name, .modified-date{
	border: 0px #000 solid;
	float:left;
	color:#000;
	font-size: .8em;
	margin-left:.8em;
}

.author-name{
	border: 0px #000 solid;
	/* margin-top:.7em; */
}

.article-social{
	border: 0px #000 solid;
	float:right;
	/* margin-top:.7em; */
}

.tip, .tech, .warning, .nnote {
	padding:23px;
	margin-bottom: 28px;
	font-size: .8em;
	/* border-radius:5px; */
}

.tip{
	border: 1px #b7cfe6 solid;
	background-color:#ddedfc;
}

.tech{
	border: 1px #b9e3b9 solid;
	background-color:#dffadf;
}

.warning{
	border: 1px #e1c2fd solid;
	background-color:#efe2fb;
}

.nnote{
	border: 1px #ebe1b2 solid;
	background-color:#f9f6e5;
}

.keypoint{
	border-left: 5px #ddd solid;
	padding:23px;
	margin-bottom: 28px;
	font-size: .8em;
}

blockquote {
	display: block;
	border-width: 2px 0;
	border-style: solid;
	border-color: #eee;
	padding: 2em 2em 0em 2em;
	margin: 1.5em 0;
	font-size: .8em;
	position: relative;
  }

  blockquote:before {
	border: 0px #000 solid;
	content: '\201C';
	position: absolute;
	top: .3em;
	left: -.05em;
	width: 2.2rem;
    height: 1.7rem;
	font: 6em/1em 'PT Sans', sans-serif;
	color: #ddd;
	text-align: center;
  }

  blockquote:after {
	  border: 0px #000 solid;
	  content: '\201D';
	  position: absolute;
	  top: .85em;
	  left: 95%;
	  width: 2.3rem;
      height: 1.7rem;
	  font: 6em/.85em 'PT Sans', sans-serif;
	  color: #ddd;
	  text-align: center;
  }

code {
	font-family: monospace;
	font-size: .8em !important;
  }


pre {
	display: block;
	font-family: monospace;
	white-space: pre;
	margin: 1em 0;
	
  }

/*--------------------------------------------------------------
# JMAW Custom Classes
--------------------------------------------------------------*/

/*
 * Custom Classes
 * <div> that defines a class for custom positioning or styling of an element. Examples include custom <ol>, <ul>, <p> and <h1>.
*/

.img-example {
	border:1px #e2e2e2 solid;
	margin: 0 0 .6em 0;
	/* margin: 2em 0 2em 0; */
	margin: 0 0 .6em 0;
}

.step1-header, 
.step2-header, 
.step3-header, 
.step4-header, 
.step5-header{
	border: 0px #000 solid;
	float:right;
	width:100%;
	padding:5px;
	border-radius: 5px 5px 0 0;
}

.step1-header{
	background-color: #359612;
}

.step2-header{
	background-color: #3869cc;
}

.step3-header{
	background-color: #f4d31a;
}

.step4-header{
	background-color: #efa027;
}

.step5-header{
	background-color: #b6403c;
}

.step-icon{
	border: 0px #000 solid;
	float:left;
}

.step1-icon, 
.step2-icon, 
.step3-icon, 
.step4-icon, 
.step5-icon{
	font-size: 2.1em;
	font-weight: bold;
	border-width: 4px;
	border-style: solid;
	border-radius: 10px;
	color: #fff;
	padding: 0 .3em;
	margin-left:.1em;
}

.step1-icon{
	border-color:#017504;
	background-color: #03a807;
}

.step2-icon{
	border-color:#2458a6;
	background-color: #3783f5;
}

.step3-icon{
	border-color:#f1c102;
	background-color: #f6d703;
}

.step4-icon{
	border-color:#e47b00;
	background-color: #fda60f;
}

.step5-icon{
	border-color:#9e2e2e;
	background-color: #d83a3a;
}

.step-title{
	border:0px #000 solid;
	float:right;
	width:85%;
	text-align:center;
	color:#fff;
	margin-top: .4em;
}

.step-h2-exception {
	font-size:2em;
	margin: 0px;
	padding: 0px;
}

.ulnostyle{
	list-style-type: none;
}

.uldisc {
	list-style-type: disc;
}

.list-disc {
	list-style-type: disc;
}

.uldecimal{
	list-style-type: decimal;
}

.ullower-alpha{
	list-style-type: lower-alpha;
}

.list-lower-alpha{
	list-style-type: lower-alpha;
}

.ulupper-alpha{
	list-style-type: upper-alpha;
}

.ul-wrap{
	border:0px #000 solid;
	margin-bottom: 1.3em;
}

.ul-wrap ul{
	list-style-position: outside;
	margin-bottom: 0px;
	padding-left: 0px;
}

.ul-wrap ul li{
	padding-left: 0px;
}

.ul-wrap p{
	margin-bottom: .3em;
}

ul.nospace {
	padding:0px;
	margin:0px;
	width: 80%;
    margin: auto;
}

.no-border{
	border: 0px;
}

.page-not-found-heading{
	border: 0px blue solid;
	padding-top:3.5em;
	font-size: 2.2em;
	font-weight: 900;
	text-align: center;
}

.page-not-found-subheading{
	border: 0px #000 solid;
	font-size: 1.2em;
	font-weight: 600;
	color: #635f5f;
	text-align: center;
}

.page-not-found-image{
	border: 0px #000 solid;
	max-width:100%;
}

/*--------------------------------------------------------------
# JMAW Custom Tables
--------------------------------------------------------------*/

table {
	margin: 0 0 28px 0 !important;
}



/*--------------------------------------------------------------
# JMAW Alignment Classes
--------------------------------------------------------------*/

/*
 * Alignment Classes
 * Class that defines the alignment of <div> text and <img>
*/

/*underscore cause theme has a aligncenter class*/
.align-center {
    display: block;
    clear: both;
    margin-right: auto;
	margin-left: auto;
}

.text-center{
	text-align: center;
}

.indent{ 
	margin-left: 1.6em;
}

.gs-container{
	border:0px #000 solid;
	width:100%;
	overflow:auto;
}

.gs-wix {
	float:left;
	margin-left:3em;
}

.gs-wordpress {
	float:right;
	margin-right:3em;
}

/*--------------------------------------------------------------
# JMAW Clearfix and Other CSS Solutions
--------------------------------------------------------------*/

/* 
 * Solves Problems with Collapsing Margins
 * Source: https://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use
*/

/*prevents margin from collapsing */
/*
main,
.page-header{
	overflow: auto; 
}
*/


/* main:after {
    content: " ";
    clear: both;
    height: 0;
} */

/* #site-container:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
} */

/* WPForms Margin Correction */
div.wpforms-container-full, .wpforms-form .wpforms-one-third{
	margin-left: 0%;
}

.wpforms-one-half{
	margin-left: 0 !important;
}


/*--------------------------------------------------------------
# JMAW Responsive
--------------------------------------------------------------*/

@media screen and (max-width: 1150px){

	#site-container{
		width: 90%;
		max-width: 1150px;
		transition: width 1s;
	}

	.home-page-header-h1{
		font-size:2.2em;
	
	}.home-page-header-h3{
		font-size:1.1em;
	}

}


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

	#site-container{
		width: 90%;
		max-width: 1024px;
		transition: width 1s;
	}

	.page-header, .category-header{
		height:270px;
	}

	.page-title{
		width:60%;
	}

	.page-title h1{
		font-size: 2.8em;
		line-height: 1.5em;
	}

	.page-content{
		max-width: 84%;
	}

	.menu-btn{
        display:block;
    }

	nav{
		width:100%;
	}

	.main-menu{
		display:none;
		float:left;
		width:25%;
		padding: 1em 0 1.25em 0;
	}

	.main-menu li{
		display:block;
		padding:0 0 .5em 1em;
	}

	.main-menu li:last-child{
		padding-bottom: 0;
	}
	
	.home-page-header-h1{
		font-size:2.1em;
	}

	.home-message{
		width:80%;
	}

}


@media screen and (max-width: 950px){

	#site-container{
		width: 90%;
		max-width: 950px;
		transition: width 1s;
	}

	.page-header, .category-header{
		height:260px;
	}

	.page-title{
		width:65%;
	}

	.page-title h1{
		font-size: 2.6em;
	}

	ul, ol {
		padding-left: 2em;
	}

	h1, h2, h3, h4, h5, h6, p, ol, ul, img, .img-example, .article-info {
		margin: 0 0 25px 0;
	  }
	
	  ol li:last-child, ul li:last-child{
		  margin-bottom:30px;
	  }
	
	h2, h3, h4,
	.step1-header, 
	.step2-header, 
	.step3-header, 
	.step4-header, 
	.step5-header{
		margin-top:30px;
	  }
	
	h5, h6{
	margin-top:30px;
	}

	.home-page-header-left{
	width:30%;
	}

	.home-message{
		width:81%;
	}

	.home-page-header-h1{
		font-size:1.9em;
	}
	
	.home-page-header-h3{
		font-size:1.1em;
		margin-top:1em;
	}

}

/* Kindle Fire and Samsung Galaxy 800 */
@media screen and (max-width: 850px){
	
	#site-container{
		width: 95%;
		max-width: 850px;
		transition: width 1s;
	}

	.page-header, .category-header{
		height:250px;
	}

	.page-title{
		width:70%;
	}

	.instruction-list{
		padding:10px;
	}

	.home-page-header-right{
		width:62%;
	}

}

/* ipad 768px iphone verical*/
@media screen and (max-width: 768px){

	#site-container{
		width: 100%;
		max-width: 768px;
		transition: width .25s;
	}

	.page-title{
		width:75%;
	}

	.page-title h1{
		font-size: 2.3em;
		line-height: 1.4em;
	}

	.page-content{
		font-size: 1.15em;
		max-width: 90%;
		transition: width .25s;
	}

	.step-h2-exception {
		font-size:1.7em;
	}

	.step-title {
		margin-top: .6em;
	}

	h1, h2, h3, h4, h5, h6, p, ol, ul, img, .img-example, .article-info {
		margin: 0 0 25px 0;
	  }
	
	  ol li:last-child, ul li:last-child{
		  margin-bottom:35px;
	  }
	
	h2, h3, h4,
	.step1-header, 
	.step2-header, 
	.step3-header, 
	.step4-header, 
	.step5-header{
		margin-top:35px;
	  }
	
	h5, h6{
	margin-top:35px;
	}
	
	h1{
		font-size: 2em;
		font-weight: bold;
	}
	
	h2{
		font-size: 1.7em;
		font-weight: bold;
	}
	
	h3{
		font-size: 1.45em;
		font-weight: bold;
	}
	
	h4{
		font-size: 1.20em;
		font-weight: bold;
	}

	.home-page-header{
		height:250px !important;
	}

	.home-page-header-h1{
		font-size:1.6em;
	}
	
	.home-page-header-h3{
		font-size:1em;
		margin-top:1em;
	}

}

@media screen and (max-width: 650px){

	.home-page-header-h1{
		font-size:1.5em;
	}
	
	.home-page-header-h3{
		font-size:.9em;
		margin-top:1em;
	}

}

@media screen and (max-width: 615px){

	.article-social{
		width: 100%;
		float:left;
	}

	.a2a_svg{
		height: 28px !important;
		line-height: 28px !important;
		width: 28px !important;
	}

	.home-page-header{
		height:225px !important;
	}

	.home-page-header-h1{
		font-size:1.4em;
	}

}


@media screen and (max-width: 575px){

	.page-content{
		font-size: 1em;
		max-width: 95%;
		transition: width .25s;
	}

	.page-header, .category-header{
		height:230px;
	}

	.page-title{
		width:85%;
	}

	.page-title h1{
		font-size: 2.2em;
	}

	.page-header, .category-header{
		height:250px;
	}

	.logo{
		border: 0px #fff solid;
		width: 80%;
	}

	.main-menu li{
		border: 0px blueviolet solid;
		font-size: .8em;
	}

	.bars, .close{
		width:97%;
	}

	.step-h2-exception {
		font-size:1.5em;
	}

	.step-title {
		margin-top: .4em;
	}

	.step1-icon, 
	.step2-icon, 
	.step3-icon, 
	.step4-icon, 
	.step5-icon{
		font-size: 1.7em;
	}
	
	h1, h2, h3, h4, h5, h6, p, ol, ul, img, .img-example, .article-info {
		margin: 0 0 22px 0;
	  }
	
	  ol li:last-child, ul li:last-child{
		  margin-bottom:25px;
	  }
	
	h2, h3, h4,
	.step1-header, 
	.step2-header, 
	.step3-header, 
	.step4-header, 
	.step5-header{
		margin-top:25px;
	  }
	
	h5, h6{
		margin-top:25px;
	}
	
	h1{
		font-size: 1.9em;
		font-weight: bold;
	}
	
	h2{
		font-size: 1.6em;
		font-weight: bold;
	}
	
	h3{
		font-size: 1.35em;
		font-weight: bold;
	}
	
	h4{
		font-size: 1.10em;
		font-weight: bold;

	}

	.author-name, .modified-date{
		border: 0px #000 solid;
		float:left;
		color:#000;
		font-size: .9em;
		margin-left:.8em;
	}

	.home-page-header{
		height:215px !important;
	}

	.home-page-header-middle{
		margin-top:2.1em;
	}

	.home-page-header-right{
		width:63%;
	}

	.home-page-header-h1{
		font-size:1.2em;
	}
		
	.home-page-header-h3{
		font-size:.75em;
		margin-top:1em;
	}

}

/* Blackberry Bold and NokiaN900 */ 
@media screen and (max-width: 480px){


	.header-middle{
		min-height:3.5em;
		margin-top: 1.8em;
	}

	.page-header, .category-header{
		height:200px;
	}

	.page-title h1{
		font-size: 1.8em;
	}

	.footer-links, .footer-copyright{
		font-size:.9em; 
	}

	.bars, .close{
		width:86%;
	}

	li p{
		margin-top: .5em;
		margin-bottom: .5em;
	}

	.instruction-list{
		font-size: .9em;
		padding:20px;
	}
	
	.instruction-list ul{
		margin-left:0px;
		margin-bottom:.5em;
		padding-left: 1.19em;
	}
	
	.instruction-list ul li, ol li {
		line-height:1.25em;
		margin-left:0px;
	}

	.step-h2-exception {
		font-size:1.3em;
	}

	.step1-icon, 
	.step2-icon, 
	.step3-icon, 
	.step4-icon, 
	.step5-icon{
		border-width: 3px;
		border-radius: 8px;
	}

	.home-page-header{
		height:205px !important;
	}

	.home-page-header-middle{
		margin-top:2.5em;
	}

	.home-page-header-right{
		width:65%;
	}

	.home-page-header-h1{
		font-size:1em;
	}
		
	.home-page-header-h3{
		font-size:.7em;
		margin-top:1em;
	}

}


}

@media screen and (max-width: 370px){

	.header-middle{
		min-height:2.9em;
		margin-top: 1.6em;
	}

	.page-header, .category-header{
		height:170px;
	}

	.page-content{
		font-size: .7em;
		transition: width .25s;
	}

	.bars, .close{
		width:75%;
	}

	.page-title{
		width:90%;
	}

	.page-title h1{
		font-size: 1.4em;
	}

	.step-h2-exception {
		font-size:1.1em;
	}

	.step-title {
		margin-top: .6em;
	}

	.step1-icon, 
	.step2-icon, 
	.step3-icon, 
	.step4-icon, 
	.step5-icon{
		font-size: 1.6em;
	}

	h1, h2, h3, h4, h5, h6, p, ol, ul, img, .img-example, .article-info {
		margin: 0 0 17px 0;
	  }
	
	  ol li:last-child, ul li:last-child{
		  margin-bottom:20px;
	  }
	
	h2, h3, h4,
	.step1-header, 
	.step2-header, 
	.step3-header, 
	.step4-header, 
	.step5-header{
		margin-top:20px;
	  }
	
	h5, h6{
	margin-top:20px;
	}

	h1{
		font-size: 1.7em;
	}
	
	h2{
		font-size: 1.4em;
	}
	
	h3{
		font-size: 1.15em;
	}
	
	h4{
		font-size: 1.05em;
	}

	.home-page-header{
		height:190px !important;
	}

	.home-page-header-h1{
		font-size:.9em;
	}

	.home-page-header-h3{
		font-size:.65em;
		margin-top:1em;
	}

}

/*iPhone 3, 4 5 */
@media screen and (max-width: 320px){


	.page-header, .category-header{
		height:145px;
	}

	.page-content{
		font-size: .6em;
		transition: width .25s;
	}

	.bars, .close{
		width:65%;
	}

	.page-title h1{
		font-size: 1.1em;
	}

	.step-title {
		margin-top: .5em;
	}

	.step1-icon, 
	.step2-icon, 
	.step3-icon, 
	.step4-icon, 
	.step5-icon{
		font-size: 1.4em;
		border-width: 2px;
		border-radius: 8px;
	}

	h1, h2, h3, h4, h5, h6, p, ol, ul, img, .img-example, .article-info {
		margin: 0 0 17px 0;
	  }
	
	  ol li:last-child, ul li:last-child{
		  margin-bottom:15px;
	  }
	
	h2, h3, h4,
	.step1-header, 
	.step2-header, 
	.step3-header, 
	.step4-header, 
	.step5-header{
		margin-top:15px;
	  }
	
	  h5, h6{
		margin-top:15px;
	  }

}