/*

Theme Name: Griffith Autism Support Group Theme

Theme URI: www.griffithautism.org.au

Description: minimalist responsive theme with bright colours for a local autism support group.
The theme was built to be easy to use and extremely appproachable.

Version: 1.0

Author: Jane Hume

Author URI: 

Tags: Minimalist, responsive, bright, statcic header, not-for-profit theme.

*/



/* reset goes here */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, main {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*-------BASE STYLES-------*/
body{
	max-width: 100%;
	margin: 160px auto 0;
	background-color: #fff;
	font-family: 'Josefin Sans', sans-serif;
	color:#333; 
	font-size: 1.4em;
	line-height: 1.4em;
	letter-spacing: 0.06em;
	text-align: center;
}


::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background-color: #333;
    border-left: 1px solid #666;
}
::-webkit-scrollbar-thumb {
    background-color: #0099cc;
}
::-webkit-scrollbar-thumb:hover {
	background-color: #666;
}




::-moz-scrollbar {
    width: 12px;
}
::-moz-scrollbar-track {
    background-color: #333;
    border-left: 1px solid #666;
}
::-moz-scrollbar-thumb {
    background-color: #0099cc;
}
::-moz-scrollbar-thumb:hover {
	background-color: #666;
}
/*-------TYPOGRAPHY-------*/
h1{
	font-size: 1.5em;
	text-transform: uppercase;
	font-weight: 200;
	color: #33cccc;
	letter-spacing: 0.2em;
	line-height: 1.25em;
}
h2{	
	font-size: 1em;
	text-transform: uppercase;
	font-weight: 200;
	color: #33cccc;
	letter-spacing: 0.1em;
}

h3{	
	font-size: 1.5vw;
	text-transform: uppercase;
	color: #FFF;
}
h4{
	font-size: 1vw;
	text-align: center;
	color: #fff;
	line-height: 1.4em;
	text-transform: lowercase;
}
h5{
	font-size: 1.5em;
	text-transform: uppercase;
	font-weight: 200;
	color: #33ccff;
	letter-spacing: 0.2em;
	line-height: 1.25em;
}
h6{
	font-size: 1.5em;
	text-transform: uppercase;
	font-weight: 200;
	color: #FF3333;
	letter-spacing: 0.2em;
}
h7{	font-size: 1em;
	color: #FFF;
	text-decoration: underline;
}
a{
	font-size: 0.8em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 0.8em;
 	transition: color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out;
  	-webkit-transition: color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out;
  	-moz-transition: color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out;
  	-ms-transition: color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out;
  	-o-transition: color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out;
}

/*-------HEADER-------*/
header{
	width: 100%;
	height:150px;
	overflow: hidden;
	position: fixed;
	top:0;
	left:0;
	z-index:999;
	background-color:rgba(255,255,255,0.75);
	-webkit-box-shadow: 3px 3px 6px 0px rgba(50, 50, 50, 0.65);
	-moz-box-shadow:    3px 3px 6px 0px rgba(50, 50, 50, 0.65);
	-ms-box-shadow:    3px 3px 6px 0px rgba(50, 50, 50, 0.65);
	-o-box-shadow:    3px 3px 6px 0px rgba(50, 50, 50, 0.65);
	box-shadow:         3px 3px 6px 0px rgba(50, 50, 50, 0.65);
}

header img{
	height: 130px;
	float:left;
	margin-left:12.5%;
	padding-top:10px;
}

header nav{
	float: right;
	margin-right: 12.5%;
}
header nav li{
    display: inline-block;
    margin-top: 75px;
    margin-right: 20px;
}

header nav a{
	text-decoration: none;
	color: #333;
	text-align: center;
	padding: 10px 5px;
}

.first a:hover, .first a:active{
	color: #b8f2ff;
	border-bottom:solid 4px #b8f2ff;
}

.second a:hover, .second a:active{
	color: #ff4500;
	border-bottom:solid 4px #ff4500;
}

.third a:hover, .third a:active{
	color: #FFCC33;
	border-bottom:solid 4px #FFCC33;
}
/*-------SLIDE SHOW-------*/
.slideshow{
	width: 75%;
	margin-left: 12.5%;
	padding: 0;	
}
/*-------MISSION STATEMENT-------*/

.mission-statement{
	float:left;
	width:41%;
	background-color:#b8f2ff;
	padding:3%;
	margin-left: 12.5%;
	
}
/*-------ARTICLE-------*/

.article{
	float:left;
	width:41%;
	background-color:#fff;
	padding:3%;
	margin-left: 12.5%;
	
}
.article li{
border-bottom: 1px solid #333;
padding-top:20px;
padding-bottom:20px;
font-size:12px;
color:#0099cc;
}
.article a{
display:block;
text-align:center;
color:#0099cc;
margin-top:3%;
margin-bottom:10px;
font-size:24px;
line-height:36px;

}
.article a:hover, .article a:active{
	color: #333;
}
.article li p{
font-size:18px;
color:#333;
text-align:left;
}
.article img{
max-width:98%;
height:auto;
margin-top:2%;
margin-bottom:2%;

}

/*-------COMMENTS---------*/
#article-comments {
  background-color:#fcfcfc;
  border-top:1px solid transparent;
  padding:0!important;
color#000;
}
 

/*-------SINGLE-POST-------*/

.single-post{
	float:left;
	width:41%;
	background-color:#fff;
	padding:3%;
	margin-left: 12.5%;
	text-align:left;
	
}
.single-post h1{
padding-bottom:30px;
margin-top:30px;
}
.single-post a{
text-transform:none;
color:#0099cc;
margin-top:3%;
padding-bottom:30px;
font-size:30px;
font-weight:400;
}
.single-post a:hover, .single-post a:active{
color:#ffcc33;
}
.single-post img{
max-width:98%;
height:auto;
margin-top:2%;
margin-bottom:2%;
}

.single-post em{
font-size:14px;
font-style:italic;
color:#333;
padding-bottom:30px;
padding-top:10px;
font-weight:normal;
}
.single-post em a {
font-size:14px;
font-weight:normal;
color:#33cccc;
}

.single-post strong{
color:#0099cc;
text-decoration:none;
}

.single-post em strong{
color:#33cccc;
font-size:24px;
text-decoration:underline;
font-style:normal;
}

.single-post table em{
font-size:12px;
font-style:italic;
color:#333;
padding-bottom:30px;
padding-top:10px;
font-weight:normal;
}

.single-post table strong{
font-size:16px;
color:#0099cc;
text-decoration:none;
}

.single-post table em strong{
color:#33cccc;
font-size:16px;
text-decoration:none;
font-style:normal;
}
.single-post table td{
padding:1%;
border:1px solid #333;
}



.comments{
	float:left;
	width:41%;
	background-color:#fff;
	padding:3%;
	margin-left: 12.5%;
	text-align:left;
}

.comments p{
font-size: 10px;
color:#666;
}

.comments H3{
color:#333;
font-size:18px;
}
.comments a{
color:#0099cc;
}

#submit{
background-color:#0099cc;
padding:2%;
border: 0;
color:#fff;
font-size:14px;
}
ol.commentlist { list-style:none; margin:0 0 1em; padding:0; text-indent:0; }
ol.commentlist li { }
ol.commentlist li.alt { }
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment { border-bottom:1px dotted #666; padding:1em; }
ol.commentlist li div.comment-author {}
ol.commentlist li div.vcard { color:333;}
ol.commentlist li div.vcard cite.fn { font-style:normal; }
ol.commentlist li div.vcard cite.fn a.url {}
ol.commentlist li div.vcard img.avatar { border:3px solid #0099cc; float:right; margin:0 0 1em 1em; }
ol.commentlist li div.vcard img.avatar-32 {}
ol.commentlist li div.vcard img.photo {}
ol.commentlist li div.vcard span.says {}
ol.commentlist li div.commentmetadata {}
ol.commentlist li div.comment-meta { display:none }
ol.commentlist li div.comment-meta a { display:none}
ol.commentlist li p { font-size:18px; margin:0 0 1em; }
ol.commentlist li ul { font-size:14px; list-style:square; margin:0 0 1em 2em; }
ol.commentlist li div.reply { font-size:11px; color:#0099cc}
ol.commentlist li div.reply a {font-size:11px; color:#0099cc }
ol.commentlist li ul.children { list-style:none; margin:1em 0 0; text-indent:0; }
ol.commentlist li ul.children li {}
ol.commentlist li ul.children li.alt {}
ol.commentlist li ul.children li.bypostauthor {}
ol.commentlist li ul.children li.byuser {}
ol.commentlist li ul.children li.comment {}
ol.commentlist li ul.children li.comment-author-admin {}
ol.commentlist li ul.children li.depth-2 { border-left:5px solid #555; margin:0 0 .25em .25em; }
ol.commentlist li ul.children li.depth-3 { border-left:5px solid #999; margin:0 0 .25em .25em; }
ol.commentlist li ul.children li.depth-4 { border-left:5px solid #bbb; margin:0 0 .25em .25em; }
ol.commentlist li ul.children li.depth-5 {}
ol.commentlist li ul.children li.odd {}
ol.commentlist li.even {}
ol.commentlist li.odd { background:#f6f6f6; }
ol.commentlist li.parent { border-left:5px solid #111; }
ol.commentlist li.pingback { border-bottom:1px dotted #666; padding:1em; }
ol.commentlist li.thread-alt { }
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}

/*-------ICON WRAPPER-------*/
.icon-wrapper{
	float: left;
	width:47%;
		margin-left: 12.5%;
	margin-top: 40px;
}
/*-------RESOURCES WRAPPER-------*/

.resources-wrapper{
	display: inline-block;
	float: left; 
	width: 26.333%;
	text-align: center;
	padding: 3%;
	margin-right: 1.5%;
	background-color: #0099cc;

}
.resources-wrapper img{
	width: 50%;
}
.resources-wrapper:hover, .resources-wrapper:active{
	background-color: #0a7a9e;
	transition: color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out;
  	-webkit-transition: color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out;
  	-moz-transition: color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out;
  	-ms-transition: color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out;
  	-o-transition: color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out;
	}
/*-------SERVICES WRAPPER-------*/
.services-wrapper{
	display: inline-block;
	float: left; 
	width: 26.333%;
	text-align: center;
	padding: 3%;
	margin-right: 1.5%;
	background-color: #ff5600;
}

.services-wrapper img{
	width: 50%;
	min-width: 60px;
}

.services-wrapper:hover, .services-wrapper:active{
	background-color: #e50033;
	transition: color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out;
  	-webkit-transition: color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out;
  	-moz-transition: color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out;
  	-ms-transition: color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out;
  	-o-transition: color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out;
	}
/*-------FUNDING WRAPPER-------*/
.funding-wrapper{
	display: inline-block;
	float: left; 
	width: 26.333%;
	text-align: center;
	padding: 3%;
	background-color: #FFCC33;
}
.funding-wrapper img{
	width: 50%;
	min-width: 60px;
}

.funding-wrapper:hover, .funding-wrapper:active{
	background-color: #ffa300;
	transition: color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out;
  	-webkit-transition: color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out;
  	-moz-transition: color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out;
  	-ms-transition: color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out;
  	-o-transition: color 0.3s ease-in-out, background 0.3s ease-in-out, border 0.3s ease-in-out;
	}

/*-------RESOURCES TEXT-------*/

.resources{
	float:left;
	width:41%;
	background-color:#b8f2ff;
	padding:3%;
	margin-left: 12.5%;
	
}
/*-------WHAT IS AUTISM-------*/
.what-is-autism{
	float: left;
	width:41%;
	background-color: #fff;
	padding:3%;
	margin-left: 12.5%;
	color: #33ccff;

}
/*-------CONTACT WRAPPER-------*/
.contact-wrapper{
	float:left;
	width:47%;
	background-color:#fff;;
	margin-left: 12.5%;
}
.contact-wrapper p{
margin-bottom:40px;
}

/*-------CONTACT-FORM-WRAPPER-------*/
.contact-form {
	background-color: #ffcc33;
	min-height: 400px;
	height: auto !important;
	height: 400px;
	font-size: 0.8em;
	color:#FFF;
	padding:3%;
}


/*-------SIDEBAR-------*/


.sidebar{
	background-color: #333;
	width:19.5%;
	padding: 3%;
	height: 900px;
	margin-right: 12.5%;
	margin-left:62%;
	margin-bottom: 3%;
	overflow-y: scroll;

}


.sidebar ul li {
display:block;
margin-bottom:40px;
border-bottom: 1px solid #fff;
padding-top:20px;
padding-bottom:20px;
font-size:14px;
color:#fff;
}

.sidebar h3{
text-align:center;
color:#fff;
margin-top:3%;
padding-bottom:30px;
font-size:30px;
}
.textwidget{
text-align:left;
}
.sidebar a{
display:block;
text-align:center;
color:#0099cc;
line-height:24px;
font-size:18px;
margin-bottom:10px;
}
.sidebar a:hover, .sidebar a:active{
	color: #b8f2ff;
}

.sidebar-mobile{
	display: none;
}
/*-------FOOTER NAVIGATION-------*/
.footer-nav{
	clear:both;
	float: none;
	width: 100%;
	padding: 30px 0;
	margin: 0 auto;
	background-color: #22b3b3;
	text-align: center;
}
.column{
	margin: 0 10%;
	display: inline-block;
	text-align: left;

	
}
.column li a{
	color: #fff;
	font-size: 18px;
	line-height: 2.5em;
	text-transform: none;
	list-style-type: disc;
	-webkit-margin-after: 0.5em;

}



/*-------FOOTER-------*/
footer{
	width: 98%;
	clear: both;
	float: none;
	background-color: #33cccc;
	padding:1%;
	text-align: center;
	color: #fff;
	font-size: 0.6em;
}
/*-------<1200px-------*/
@media screen and (max-width:1200px) {

h3{
	font-size: 1.8vw;
	}

h4{
	font-size: 1.2vw;
}
header img{
margin-left:5%;
}

header nav{
margin-right:5%;
}

.slideshow{
	width: 100%;
	margin-left:0;	
	overflow: visable;
}

.mission-statement{
	width:65.5%;
	margin-left:0;
}
.article{
	width:65.5%;
	margin-left:0;
}
.single-post{
	width:65.5%;
	margin-left:0;
}
.icon-wrapper{
	width:71.5%;
	margin-left: 0;
}

.what-is-autism{
	width:61.5%;
	margin-left:0;
}
.contact-wrapper{
	width:71.5%;
	margin-left:0;
}
.contact-form{
	width:94%;
	margin-left:0;
}

.sidebar{
	margin-right: 0;
	margin-left:74%;
}
}

/*-------<900px-------*/
@media screen and (max-width:900px){

h3{
	font-size: 2vw;
	}

h4{
	font-size: 1.8vw;
}



/*-------MISSION STATEMENT-------*/
 .mission-statement{
    clear: both;
    float: none;
    width:92%;
    text-align: center;
    margin-left: 0;
    padding: 4%;
	
}
/*-------ARTICLE-------*/
.article{
    clear: both;
    float: none;
    width:92%;
    text-align: center;
    margin-left: 0;
    padding: 4%;
	
}
/*-------SINGLE-POST-------*/
.single-post{
    clear: both;
    float: none;
    width:92%;
    text-align: center;
    margin-left: 0;
    padding: 4%;
	
}
/*-------ICON WRAPPER-------*/
.icon-wrapper{
	clear: both;
	float: none;
	width:100%;
	margin-left: 0;
}


/*-------WHAT IS AUTISM-------*/
.what-is-autism{
    clear: both;
    float: none;
    width:92%;
    text-align: center;
    margin: 0;
    padding: 4%;
}
/*-------CONTACT WRAPPER-------*/
 .contact-wrapper{
    clear: both;
    float: none;
    width:100%;
    margin-left: 0;
    padding: 0;
	
}

.contact-form{
	width:94%;
}


/*-------ASIDE-------*/
.sidebar{
	 display:none
    }
.sidebar-mobile{
	display:block;
	  clear: both;
		float: none;
		width:92%;
		background-color: #333;
		padding: 2%;
		text-align: center;
		margin: 0;
		padding: 4%;
	    
    }
.sidebar-mobile li span{
display:block;
margin-bottom:40px;
border-bottom: 1px solid #fff;
padding-top:20px;
padding-bottom:20px;
font-size:14px;
color:#fff;
}


.sidebar-mobile h3{
text-align:center;
color:#fff;
margin-top:3%;
padding-bottom:30px;
font-size:30px;
font-weight:400;
}
.sidebar-mobile a{
text-align:center;
color:#0099cc;
line-height:24px;
font-size:18px;
}
.sidebar-mobile a:hover, .sidebar-mobile a:active{
	color: #b8f2ff;
}

footer p{
	font-size:1em;
}
}
/*-------<700px-------*/
@media screen and (max-width:700px){
header{
	clear:both;
	position:absolute;
	overflow: visible;
	height: 200px;
}
header img{
	clear: both;
	height: 120px;
	float:none;
	margin-left:0;
	padding-top:0px;
}


header nav{
	clear: both;
	float: none;
	margin-right:0;
	padding: 0;
	line-height: 0.3em;
}
header nav li{
    display: inline-block;
    margin-top: 30px;
    margin-right: 20px;
}

.slideshow{
	display: none;
}
.mission-statement{
	margin: 210px 0 0 0;
}
.article{
	margin: 210px 0 0 0;
}
.single-post{
	margin: 210px 0 0 0;
}

.contact-wrapper{
	margin: 210px 0 0 0;
}


/*-------ICON WRAPPER-------*/

h3{
	font-size: 6vw;
}
h4{
	font-size: 4vw;
}
.icon-wrapper{
	width:100%;
}
.icon-wrapper img{
	width: 30%;
}
.resources-wrapper{
	clear:both;
	float: none;
	width: 84%;
	margin: 0;
	padding: 8%;
}
.services-wrapper{
	clear:both;
	float: none;
	width: 84%;
	margin: 0;
	padding: 8%;
}

.funding-wrapper{
	clear:both;
	float: none;
	width: 84%;
	margin: 0;
	padding: 8%;
}
.footer-nav{
	display: none;
}

	
}