/* Fonts and basic styling _____________________________________________________________ */



/* Web Fonts
   ----------------------------------------------------*/

@font-face{ 
	font-family: 'sandwich';
	src: url('/static/fonts/sandwich_paper_light-webfont.eot');
	src: url('/static/fonts/sandwich_paper_light-webfont.eot?iefix') format('eot'),
	     url('/static/fonts/sandwich_paper_light-webfont.woff') format('woff'),
	     url('/static/fonts/sandwich_paper_light-webfont.ttf') format('truetype'),
	     url('/static/fonts/sandwich_paper_light-webfont.svg#webfont') format('svg');
}






body { font-family: arial, Arial, Helvetica, sans-serif; font-weight: normal } 

article { font-family: "coming soon", arial, Arial, Helvetica, sans-serif; font-weight: normal }
article { font-family: "Roboto", Arial, Helvetica, sans-serif; font-weight: normal }



/* global styles ________________________________________________________________________________________ */

html { font-size:100%; }

body { 
	font-size: 62.5%; 
	line-height: 15px; 
}





h1 { font-size: 30px; line-height: 35px; padding: 5px 0 10px 0; margin: 0; font-weight: normal; }

h2 { font-size: 20px; line-height: 25px; padding: 5px 0 15px 0; margin: 0; font-weight: normal; color: #666666 }

h3 { font-size: 15px; line-height: 20px; padding: 5px 0 10px 0; margin: 0; font-weight: normal; }

h4 { font-size: 13px; line-height: 20px; padding: 5px 0 10px 0; margin: 0; font-weight: normal; }




a, 
legend,
blockquote { font-weight: bold; }

a { color: #069; background: white; text-decoration: none; }
a:hover { text-decoration: underline; }

p, 
ol, 
ul, 
blockquote,
form, 
table { margin: 0 0 1em 0; }

ol li, 
ul li,
fieldset div { margin: 0 0 0.5em 0; }

li ol, 
li ul { margin-top: 0.5em; margin-bottom: 0; }

h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0.25em 0 0.5em 0; font-family: sandwich;}

p { padding: 0; }

blockquote { margin-left: 1em; font-style: italic; }
cite { font-size: 0.85em; font-style: normal; font-weight: normal; display: block; margin: 0.25em 0 0.5em 0; }

ol, 
ul,
optgroup option { padding-left: 1em; }

ol li, 
ul li,
blockquote,
fieldset { padding: 0 0 0 0.75em; list-style: none; }

ul li,
ol li { 
	list-style-position: inside; 
	list-style: square;
	margin-left: 15px;
	padding-left: 5px;
}

blockquote,
form,
table { border-left: 2px solid #999; }

form { margin-left: 1em; padding: 0.25em 0; }
fieldset { border: none; }
legend { padding-bottom: 0.75em}
fieldset div { overflow: auto; }
label { float: left; width: 5em; }
input { float: left; width: 10em; }
select { float: left; width: 10.5em; }
optgroup { font-style: normal; padding: 0 0 0 0.15em; }



input[type=submit], 
input[type=image], 
input[type=checkbox], 
input[type=radio] { width: auto; float: none; }

.btn,
input[type=submit],
button {
	background: #444; color: white; padding: 5px 15px 5px 15px; text-align: center; border: none; 
	margin-left: 230px; 
	border-radius: 3px; 
}


table { margin-left: 1em; }
tr { vertical-align: top; }

td,
th { padding: 0.2em 0.75em; border: 1px solid #ddd }


iframe,
img { max-width: 100%; }

img { height: auto; }



	/* Styling between 300 and 720px wide */
	@media all and (max-width: 719px) { 
	
    article { font-size: 11px; line-height: 15px; }
			article p { margin-bottom: 1em;; }
		
		h1 { font-size: 26px; line-height: 30px; }
		
		.title {
			font-size: 32px;
			text-align: left;
			line-height: 28px;
			padding: 0.25em 0 0.25em 0;
		}
		
		.title__name {
			display: inline;
		}

		h2 { font-size: 22px; line-height: 30px; }

		h3 { font-size: 19px; line-height: 25px; }

		h4 { font-size: 17px; line-height: 20px; }		
      
	}
	
	@media all and (min-width: 720px) and (max-width: 959px) {

		article { font-size: 14px; line-height: 20px; } 
			article p { padding-bottom: 1em }
		
		h1 { font-size: 35px; line-height: 40px; }
		
		.title {
			font-size: 32px;
			text-align: center;
			margin: 0;
			padding: 10px 0 10px 0;
			line-height: 30px;
		}
		
		.title__name {
			display: block;
		}

		h2 { font-size: 40px; line-height: 40px; }

		h3 { font-size: 30px; line-height: 30px; }

		h4 { font-size: 19px; line-height: 20px; }		
		
	}

	@media all and (min-width: 960px) {

		article { font-size: 16px; line-height: 25px; } 
			article p { padding-bottom: 1em }
		
		h1 { font-size: 35px; line-height: 40px; }
		
		.title {
			font-size: 54px;
			text-align: center;
			margin: 0;
			padding: 10px 0 5px 0;
			line-height: 40px;
		}
		
		.title__name {
			display: block;
		}

		h2 { font-size: 40px; line-height: 40px; }

		h3 { font-size: 30px; line-height: 30px; }

		h4 { font-size: 19px; line-height: 20px; }		
		
	}





/* Icon classes _________________________________________________________________________________________ */

i { background: transparent; display: block; width: 24px; height: 24px; float: left; padding: 0; margin: 0; }

	.i-next { background-position: -20px -2px; width: 16px; height: 16px; }

	.i-more { background-position: -2px -2px; width: 16px; height: 16px; }
	
	.i-left { background-position: -38px -2px; width: 10px; height: 15px; }
	
	.i-right { background-position: -50px -2px; width: 10px; height: 15px; }
	



/* General classes ______________________________________________________________________________________ */

.hide-visually { position: absolute; margin-left: -9999px; }

.notice, 
.warning,
.message, 
.error { text-align: left; padding: 5px 10px; padding: 0.5rem 1rem; margin-bottom: 10px; margin-bottom: 1rem; }

.notice,
.warning { border: 1px solid #ccc; background: #ffd; }
.message { border: 1px solid #aca; background: #dfd; }
.error { border: 1px solid #caa; background: #fdd; }

.fm-field-error { background: #fcb; }
.fm-required { color: #c00; float: left; margin-top: 12px; margin-top: 1.2rem; line-height: 5px; line-height: 0.5rem; padding: 0 5px 0 5px; padding: 0 0.5rem 0 0.5rem }






/*------------------------------------*\
	#7. Responsive Iframe
\*------------------------------------*/

.iframe--outer {
	width: 100%;
	height: 0;
	position: relative;
	overflow: hidden;
	padding-bottom: 56.25%;
	 margin-bottom: 20px; 
}

	.iframe--inner {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}


	




/*==============================================================*/
	/*  FORM STYLES                                                 */
	/*==============================================================*/

	.comment-form { margin: 0 0 12px 0; }
	.comment-form fieldset { border: 1px solid #999; padding: 8px 12px 8px 12px; 
	  -webkit-border-radius:0.5em;
	  -moz-border-radius:0.5em;
	  border-radius:0.5em;
	}
	.comment-form legend { font-weight:bold; background:#3C6980; color:#eee; padding: 1px 8px 2px 8px; ; 
	  -webkit-border-radius:0.4em;
	  -moz-border-radius:0.4em;
	  border-radius:0.4em;
	}
	.comment-form div { clear:both; overflow:auto; padding: 0 12px 6px 12px; }
	.comment-form label { width: 160px; float: left; }
	.comment-form input { width: 160px; float: left; }
	.comment-form select { width: 160px; margin-bottom: 8px;}
	.comment-form textarea, .comment-form ul { margin-left: 140px; }
	.comment-form ul { margin: 0 0 6px 160px; padding: 2px 0 0 0 }
	.comment-form li { margin: 0; padding: 0 0 10px 24px; list-style: none; position: relative; }
	.comment-form li input { position: absolute; left: 0; top: 3px; }
	.comment-form li .note { color: #888; }
	.comment-form .checkbox, .comment-form .radiobox { width: 20px; margin: 0; }
	.comment-form .btn-submit, .comment-form input[type="submit"] { margin-left:160px; width: auto; }
	.comment-form input { width: 200px; }
	.comment-form .small { width: 50px; }
	.comment-form .medium { width: 130px;}



	/*
	---------------------------------------------------------
	ADDITIONAL STYLES
	---------------------------------------------------------
	*/


	.vote-form { margin: 0 auto; width: 50%; border: 1px solid #eee; padding: 8px 8px 8px 12px}
	.vote-form fieldset { padding: 0.5em 0 0; }
	.vote-form legend { font-weight:bold; color:#444; border-bottom: 1px solid #ddd; padding: 0 0 4px 0; margin: 0 0 4px 0; 
	display: block; width: 98%; }
	.vote-form div { clear:both; overflow:auto; padding: 0 0.5em 0.5em 0.5em; position: relative; }
	.vote-form label { float: left; width: 30%; }
	.vote-form input { float: left; padding: 2px 6px; width: 60%; }
	.vote-form select { width: 160px; margin-bottom: 8px;}
	.vote-form textarea, .vote-form ul { margin-left: 0px;  float: left;}
	.vote-form ul { margin: 0 0 6px 160px; padding: 2px 0 0 0 }
	.vote-form li { margin: 0; padding: 0 0 10px 24px; list-style: none; position: relative; }
	.vote-form li input { position: absolute; left: 0; top: 3px; }
	.vote-form li .note { color: #888; }
	.vote-form .checkbox, form .radiobox { width: 20px; margin: 0; }
	.vote-form .small { width: 50px; }
	.vote-form .medium { width: 130px;}
	.vote-form .btn-submit, .vote-form input[type="submit"] { width: 20%; margin-left: 30%; padding: 1px 0 1px 0; }


	.contact-form { width: auto; }
	.contact-form div { clear: none; overflow: auto; }
	.contact-form input[type=text] { width: 200px; }


	.comment-form textarea { margin-left: 0; width: 100%; min-height: 120px; }
	.comment-form .notes { font-size: 0.9em; font-weight: bold; padding-bottom: 0; }
	.comment-form .btn-submit, .comment-form input[type="submit"] { margin: 0 0 8px 12px; }