/* design-3 mobile stylesheet */

body {
	margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
	font-family: Helvetica, Arial, sans-serif;
	line-height: 1;
}

#main {
	max-width: 100%; 
	margin: 0 auto;
	padding: 0;
	height: auto;
}

a:link, 
a:visited, 
a:hover, 
a:active  {
	text-decoration: none;
}

.clearfix:before,  
.clearfix:after {  
    content: " ";  
    display: table;  
}  
.clearfix:after {  
    clear: both;  
}  
.clearfix {  
    *zoom: 1;  
}  

/* phones */
@media (max-width: 690px) {  /* some styles for LT 361px are located below */

div#main {
	background-image: none;
}

header {
	min-height: 3em;
	max-width: 100%;
	margin: 0;
	padding: 1em 0 .5em 1em;
	font-family: Helvetica, Arial, sans-serif;
	color: #fff;
	background-size: 25%; 
	/* background-image - see separate color stylesheets */
}

	header h1 {
		max-width: 70%;
		margin: 0 0 0 25%;
		padding-right: 1em;
		font-size: 1em;
		font-weight: bold;
		font-family: Helvetica, Arial, sans-serif;
		letter-spacing: .03em;
		text-transform: uppercase;
	}

	header h3 {
		max-width: 70%;
		margin: 0.313em 0 0 25%;
		padding-right: 1.2em;
		font-size: .875em; 
		font-weight: normal;
	}
	
	header .social-media {
		float: left;
		width: 100%;
		padding: 0;
		margin: 0 0 .5em 0;
		list-style-type: none;
		text-align: center;		
	}

	header .social-media ul {
		padding: 0;
		margin: 0;
	}
	
	header .social-media li {
		display: inline;
		float: left;
		text-align: center;
		width: 19%;
	}

	header .social-media li:first-child {
		padding-left: 4em;
	}


	header .social-media li.menu-icon {
		float: right;
	}

	
	header .social-media a {
		display: block;
	}
	
	header .social-media img {
		width: 40%;
	}
	
	.header-content {
		clear: both;
		margin: 2em 0 1em 0;
		padding-top: .5em;
	}
	
	.social-tagline {
		margin-left: 6em;
	}
	
#left-col { /* only displays on viewports larger than 480px */
	display: none;
}

nav { /* need to adjust nav for mobile collapsible style */
	clear: both;
	max-width: 90%;
	margin: 5em 0 0 0;
	font-weight: normal;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 0.85em;
	letter-spacing: .05em;
	padding: 1em;
	border: solid 1px #ccc;
	background-color: #fff;
}
	
	nav ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
	
	nav ul li {
	}

	nav ul a {
		display: block;
		padding: 0 0 0.938em 0;
		text-decoration: none;	
	}
	
	nav a:link, 
	nav a:visited, 
	nav a:hover, 
	nav a:active {
		text-decoration: none;	
	}
	
	nav a:active {
		font-weight: bold;
	}

#center-col {
	max-width: 100%; 
	margin: .5em 1.5em 1.250em 1.5em;
	height: auto;
	padding: 0;
	display: inline-block;
	text-align: left;
}

	#center-col h2 {
		font-size: 1em;
		letter-spacing: .04em;
		font-weight: bold;
		margin-top: 0;
		margin-bottom: .5em;
	}
	
	#center-col p,
	#center-col table,
	#center-col ul,
	#center-col ol,
	#center-col label,
	#center-col input,
	#center-col textarea,
	#center-col select {
		font-size: .65em;
		letter-spacing: 0.047em;
		font-family: Helvetica, Arial, sans-serif;
		line-height: 1.5em;
	}
	
	#center-col p,
	#center-col ul,
	#center-col ol {
		font-size: .85em;
	}
	
	.title-social-box {
		margin-top: 1em;
	}
	
#right-col { /* only displays on viewports larger than 480px */
	display: none;
}

#horizontal-bar { /* see #horizontal-bar-mobi */
	display: none;
}

#horizontal-bar-mobi {
	clear: both;
	max-width: 100%;
	min-height: 9em;
	background-repeat: no-repeat;
	background-position: right;
	background-size: 30%;
	height: auto;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 1em 0 1em 1.5em;
}
	
	#horizontal-bar-mobi h3 {
		font-size: .95em;
		font-weight: bold;
		color: #000;
		text-align: left;
		margin-bottom: 0;	
		font-family: Helvetica, Arial, sans-serif;
		letter-spacing: .025em;
	}

	#horizontal-bar-mobi p {
		clear: both;
		font-size: 0.7em;
		color: #000;
		line-height: 1.5em;
		text-align: left;
		margin: 0.5px 8.5em 0 0;
		max-width: 68%;
	}
	
	#horizontal-bar-mobi a, 
	#horizontal-bar-mobi a:visited {
		text-decoration: underline;
		font-style: italic;
	}
	
#member-logo-mobi {
	text-align: center;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

footer {
	overflow: hidden;
	margin-top: 0;
	margin-bottom: 0.5em;
	max-width: 100%;
	font-family: Helvetica, Arial, sans-serif;
	line-height: .86em;
	text-align: center;
	letter-spacing: 0.094em;
	padding: 1em;
	width: 90%;
}

	footer h4 {
		font-size: 0.54em;
		font-weight: normal;
		text-transform: uppercase;
		margin-bottom: 0;
	}
	
	footer p {
		font-size: 0.54em;
	}

	footer p:last-child {
		margin: 0 0 3em 0;
	}
	
	footer .gradient-bar {
		height: 0.625em;
		max-width: 100%;
		margin: 0;
	}

	.no-wrap {
		text-wrap: none;
	}	
}

@media (max-width: 520px) {
	header .social-media li:first-child {
		padding-left: 2em;
	}
	
	header .social-media img {
		width: 50%;
	}
	
	header h1,
	header h3 {
		max-width: 90%;
		margin: .5em 0 0 0;
	}

}

@media (max-width: 360px) { 
	header {
		min-height: 3em;
		padding-top: 0;
	}

	header h1 {
		max-width: 70%;
		margin: 0 0 0 20%;
		padding-right: 1em;
		font-size: 1em;
		font-weight: bold;
		font-family: Helvetica, Arial, sans-serif;
		letter-spacing: .03em;
		text-transform: uppercase;
	}

	header h3 {
		max-width: 92%;
		margin: 0.313em 0 0 20%;
		padding-right: 1em;
		font-size: .875em; 
		font-weight: normal;
	}
	
	header .social-media {
		margin: .75em 0 0 0;
		padding: 0;
	}

	header .social-media li:first-child {
		padding-left: 1em;
	}
	
	header .social-media img {
		width: 60%;
	}

	#horizontal-bar-mobi p {
		margin: 0.5px 7.5em .75em 0;
	}
	
	footer {
		max-width: 95%;
		padding: 0 .75em 0 .75em;
	}

}

@media (max-width: 320px) { 
	header {
		min-height: 3em;
	}
	
	header h3 {
		max-width: 100%;
		margin: 0.9em 0 0 4%;
		padding-right: 1.5em;
	}
	
	header .social-media a {
		width: 3.35em;
	}
	
	#horizontal-bar-mobi p {
		margin: 0.5px 6.5em .75em 0;
	}

}