/*
Simple Responsive Template v 1.2

primary styles 
   Author: https://www.prowebdesign.ro - Add your own styles to customize the project.

BASE (MOBILE) SIZE: These are the mobile styles. Keep it light: Speed is Important.
*/

/* typography */
body{
	color:#000;
	font-family:Open Sans, sans-serif;
	font-size:1em; 
	font-weight:400; 
	line-height:1.5em;
}
h1{
	color:#39f;
	font-family:Open Sans, sans-serif;
	font-size:1.7em;
	font-weight:600; 
	line-height:2em;
	margin:.45em 0;
	padding:0 0 1em;
} 
h2{
	color:#f00;
	font-family:Open Sans, sans-serif;
	font-size:1.6em;
	font-weight:600;
	line-height:1.9em;
	margin:.45em 0;
	padding:0;
} 
.proj{
	color:teal;	
	font-weight:600;
} 
h3{
	color:#f00;
	font-family:Open Sans, sans-serif;
	font-size:1.5em;
	font-weight:500;
	line-height:1.8em;
	margin:.45em 0;
	padding:0;
} 
.home {
padding-bottom:2em;	
}
.proj{
	color:teal;	
	font-weight:500;
}
/* links */
a,
a:visited,
a:active,
a:hover{color:#36f;}
a:hover{ text-decoration:none;}

/* Box sizing. Awesome thing. Read about it here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp */
*{	box-sizing:border-box;
	-moz-box-sizing:border-box;}
  
/* structure */   
.wrapper{
	width: 92%; 
	margin: 0 auto;
}
header{ 
	padding:10px 0;
}
#banner{ 
    padding-left:.1875em;
	text-align:left;
}
	
#hero,
#page-header{
	background:#f3f3f3;
	border-top:1px solid #e2e2e2;
	border-bottom:1px solid #e2e2e2;
	padding:20px 0;
}
#hero h1{ 
	line-height:1.2em;
	margin-top:0;
	margin-bottom:10px;}
}

#content {  
	margin:40px 0;
	background:#fff;
	padding:0 0 0 .45em;
}
p { 
    color:#000;
	font-family:Open Sans, sans-serif;
	font-size:1.1em; 
	font-weight:500; 
	line-height:1.5em;
	margin:0 0 1.5em;
    padding:0;
}
.blue { 
    color:#33f;
}
p.bq { 
    color:#000;
	font-family:Open Sans, sans-serif;
	font-size:1.1em; 
	font-style:italic;
	font-weight:500; 
	line-height:1.5em;
	margin:0;
    padding:0 0 0 30px;
}
p.dia { 
    color:#00a;
	font-family:Open Sans, sans-serif;
	font-size:1.1em;
	font-weight:600; 
	line-height:1.5em;
	margin:0;
    padding:0 5px 50px 0;
}
.green { 
    color:green;
}
.navy { 
    color:#00b;
}
.teal { 
    color:teal;
}

aside { 
	background:#fff;
	margin:0;
}
aside a {
	font-size:.925em;
	font-weight:600;
	line-height:1.3em;
}
aside h2 {
	background:#fff;
	color:#f00;
	font-size:1.6em;
	font-weight:600;
	line-height:1.9em;
	padding-left:8px;
	text-decoration:underline;
}
aside h3 {
	background:#dff;
	color:#f00;
	font-size:1.2em;
	font-weight:700;
	line-height:1.5em;
	padding-left:8px;
	text-decoration:none;
}
aside p {
	font-size:.925em; 
	line-height:1.5em;
	padding-left:0;
}
aside ul {
	display:block;
	font-size:.925em;
	font-weight:500;
	line-height:2.5em;
	list-style-type:none;
	padding-bottom:2em;
	padding-left:0;
	padding-right:.8em;
}
aside li {
	background:#dff;
	display:block;
}
.addto{
    margin:1.25em 0 1.875em 0;
    padding:2.5em 0 1.875em;0;
    width:350px;	
}
.macro li a {
	color:#33f;
	display:block;
	font-size:.9em;
	padding:.1em 0;
	text-decoration:none;
}
.search{
    margin:1.25em 0 1.875em 0;
    padding:0;
    width:300px;	
}

/* RESPONSIVE IMAGES */
img{
	max-width:100%;
	height:auto;
}
/*MAIN MENU*/
.menu-toggle{
	background:#fd0;
	color:#00a;
	cursor:pointer;
	display:block;
	font-size:20px;
	font-weight:500;
	margin:50px 0 10px;
	padding:10px 0;
	text-transform:uppercase;
}
.menu-toggle.toggled-on{
	background:#fb0;
}
.srt-menu{
	display:none;
}
.srt-menu.toggled-on{
	display:block;
	position:relative;
	z-index:10;
}
.srt-menu{
	clear:both;
	margin-bottom:10px;
}
.srt-menu li a {
	background:#3cf;
	color:#000;
	display:block;
	font-size:1em;
	font-weight:500;
	margin:3px 0;
	padding-bottom:5px 0;
	text-decoration:none;
}
.srt-menu li a:hover{
	background:#8ff;
	color:#00a;
	font-size:1em;
	font-weight:500;
}
.srt-menu li li a {
	background:#ebebe9;
	padding-left:15px;
}
.srt-menu li li li a {
	background:#efefef;
	padding-left:80px;
}
/*SECONDARY MENU*/
#secondary-navigation{
	margin-bottom:20px;
}
#secondary-navigation ul{
	margin:0;
	padding:0;
}
#secondary-navigation ul li a{ 
	background:#ebebeb;
	color:#30d;
	display:block;
	font-size:1.1em;
	font-weight:500;
	margin:5px 0; 
	padding:10px 5px 10px 8px;
	text-decoration:none;
}
#secondary-navigation ul li a:hover,
#secondary-navigation ul li.current a{
	background:#e6e6e0;
	color:#37f;
}

/*FOOTER*/
footer{
	clear:both;
	font-size:.9em;
	line-height:.8em;
	padding:30px 5px 20px 0;
}
footer a{
	color:#00a;
	font-size:.9em;
	padding-right:5px;
}	
footer ul{
	margin:0;
	padding:0;
}

/*colors and backgrounds*/
body{
	background:#fff;
}
footer{ 
	background:#ff3;
	color:#00a;
}
footer h1, footer h2, footer h3{ 
	color:#008; 
	margin-bottom:10px;
}
footer ul{
	margin:0 0 0 8%;
}

a.buttonlink{ 
	background:#09f; 
	border-radius:7px; 
	color:#fff;
	display:block;
	float:left; 
	margin:10px 15px 10px 0; 
	padding:10px 20px 10px 0;
	text-decoration:none;
}
a.buttonlink:hover{
	background:#8dbc01;
}

/* Contain floats*/ 
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: " ";
  display:table;
}
.clearfix:after,
.container:after,
.row:after{
  clear: both;
}

/*
LARGER MOBILE DEVICES
This is for mobile devices with a bit larger screens.
*/
@media only screen and (min-width: 481px) {
body{
	padding:0 0;
}
#banner{
	float:left;
	text-align:left;
	margin-bottom:-20px;/*this depends on the height of the logo*/
	margin-top:3px;
	padding:10px 0 10px;
}
.menu-toggle{/*make menu float right, instead of sitting under the logo*/
	margin-top:13px; /*this depends on the height of the logo*/
	float:right;
}
} 

/*
TABLET & SMALLER LAPTOPS
The average viewing window and preferred media query for those is 768px.
But I think that some more breathing space is good:)
*/
@media only screen and (min-width: 920px) {

body{
	margin:0 0 0 20px;
    padding-right:20px;
}
footer{
	margin:0;
	padding:15px 5px 10px 0;
}
.wrapper{
	max-width:1200px; 
	margin:.75em auto;
	width:90%;
}
#banner{ 
	float:left; 
	margin-bottom:0;
	padding-top:5px;
	text-align:left;
}
header{
	padding:0;
}
#wide-content{
	float:left;
	width:90%;
}
#content {  
	float:left;
	padding-top:30px;
	width:50%;
}

	aside {
	float:right;
	padding-top:30px;
	width:27%;
	}
	/*** MAIN MENU - ESSENTIAL STYLES ***/
	.menu-toggle{
		display:none;
	}
	#menu-main-navigation{
		display:block;
	}
	.srt-menu, .srt-menu * {
		list-style:none;
		margin:0;
		padding:0;
	}
	.srt-menu ul {
		display:none;
		position:absolute;
		width:12em;
		/* left offset of submenus need to match (see below) */
	}
	.srt-menu ul li {
		width:100%;
	}
	.srt-menu li:hover {
		visibility:inherit;
		/* fixes IE7 'sticky bug' */
	}
	.srt-menu li {
		float:left;
		height:25px;
		margin-left:1px;
		position:relative;
	}
	.srt-menu li li {
		height:auto;
		margin-left:0px;
	}
	.srt-menu a {
		display:block;
		position:relative;
	}
	.srt-menu li:hover ul,.srt-menu li.sfHover ul {
		display:block;
		left:0;
		top:42px;
		/* match top ul list item height */
		z-index:99;
		-webkit-box-shadow: 2px 3px 2px 0px rgba(00, 00, 00, .3);
		box-shadow: 2px 3px 2px 0px rgba(00, 00, 00, .3);
	}
	ul.srt-menu li:hover li ul,ul.srt-menu li.sfHover li ul {
		top:-999em;
	}
	ul.srt-menu li li:hover ul,ul.srt-menu li li.sfHover ul {
		left:12em;
		/* match ul width */
		top:0;
	}
	ul.srt-menu li li:hover li ul,ul.srt-menu li li.sfHover li ul {
		top:-999em;
	}
	ul.srt-menu li li li:hover ul,ul.srt-menu li li li.sfHover ul {
		left:10em;
		/* match ul width */
		top:0;
	}
	
	/*** DEMO2 SKIN ***/
	#topnav, .srt-menu {
		float:right;
		margin: .35em 0 0 0;
	}
	.srt-menu a {
		text-decoration:none;
	}
	.srt-menu li a{
		background:#fff;
		margin:0;
		padding:10px 12px;
	}
	.srt-menu a, .srt-menu a:visited {
		/* visited pseudo selector so IE6 applies text colour*/
		color:#666;
	}
	.srt-menu li li a {
		border-top:1px solid rgba(255,255,255,.2);
		background:#333;
		/*fallback for old IE*/
		background:rgba(0,0,0,.6);
		color:#fff;
		padding-left:20px;
	}
	.srt-menu li li a:visited{
		color:#fff;
	}
	.srt-menu li li li a,.srt-menu li.current * li a{
		padding-left:20px;
		background:rgba(0,0,0,.6);
	}
	.srt-menu li:hover > a,.srt-menu li.current a{
		color:#fff;
		background:#5ec79e;
	}
	.srt-menu li li:hover > a{
		color:#fff;
		background:#5ec79e;
	}
	}
/*DESKTOPThis is the average viewing window. So Desktops, Laptops, andin general anyone not viewing on a mobile device. Here's whereyou can add resource intensive styles.*/
@media only screen and (min-width: 1024px) {
	hero h1{
		font-size:1.4em;
	}
}
/*LARGE VIEWING SIZEThis is for the larger monitors and possibly full screen viewers.*/
@media only screen and (min-width: 1240px) {
	hero h1{
		font-size:2.2em;
	}
}
/*RETINA (2x RESOLUTION DEVICES)This applies to the retina iPhone (4s) and iPad (2,3) along with other displays with a 2x resolution.*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (min--moz-device-pixel-ratio: 1.5),only screen and (min-device-pixel-ratio: 1.5) {
}
/*iPHONE 5 MEDIA QUERYiPhone 5 or iPod Touch 5th generation styles (you can include your own file if you want)*/
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {
}
/*PRINT STYLESHEET*/
@media print {
	* {
		background:transparent !important;
		color:black !important;
		text-shadow:none !important;
		filter:none !important;
		-ms-filter:none !important;
	}
	a, a:visited {
		text-decoration:none;
	}
	a[href]:after {
		content: " (" attr(href) ")";
	}
	abbr[title]:after {
		content: " (" attr(title) ")";
	}
	.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
		content: "";
	}
	/* Don't show links for images, or javascript/internal links */
	pre, blockquote {
		border:1px solid #999;
		page-break-inside:avoid;
	}
	thead {
		display:table-header-group;
	}
	tr, img {
		page-break-inside: avoid;
	}
	img {
		max-width:100% !important;
	}
	@page {
		margin:0.5cm;
	}
	p, h2, h3 {
		orphans:3;
		widows:3;
	}
	h2, h3 {
		page-break-after:avoid;
	}
}