/************************************************************************************
Bigger than 980
*************************************************************************************/
@media screen and (min-width: 1024px) {

html {
	background: #3d3334 url(images/body-bg-tile.png) repeat-x;
	
	}


}

/************************************************************************************
smaller than 980
*************************************************************************************/
@media screen and (max-width: 1024px) {


body {
	background: url(images/body-bg-980.png) no-repeat center top;
	width: 100%;
	display: table;
	font: .81em/150% Arial, Helvetica, sans-serif;
	color: #666;
}


#header {
	float: left; width: 880px; margin: 155px 0 68px 0;
}

#header img {float: left; width: 280; height: 141px; margin: 20px 0 0 100px;}

/* site logo */
#site-logo {
	width: 380px;
	float: left;
	margin: 60px 0 0 40px;
}


h1#site-logo {

	font: bold 30px/100% Arial, Helvetica, sans-serif;
	color: #e1904b;
	text-decoration: none;
}

#pagewrap {
	width: 95%;
	max-width: 880px;
	margin-left: auto;
	margin-right: auto;

}

#pagewrap2 {
	clear: both;
	padding: 0 0 20px 0;
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	max-width: 948px;
}

#separator {background: #ffffff; height: 2px; width: 100%; float: left; clear: both; margin: 0 0 30px 0;}



/* Slideshow*/

#content-slideshow {width:948px; margin:0px; overflow:hidden;}
.clear {clear:both}
.wrapper {margin:0px auto;}
.slide {width:100%; float:left; overflow:hidden;}

#portfolio {background: #32292a;}

#portfolio .wrapper{width:100%;}
#portfolio .wrapper .column1 {margin:0px auto; width:100%;}

#portfolio .slideshowWrap {width:880px !important; overflow:hidden !important; float:left; z-index:3; position:relative}

#portfolio .slideshow {position:relative; left:0; z-index:2;}
#portfolio .item {width:176px; height: 178px; background:#ffffff; float:left; overflow:hidden; z-index:1;}

#portfolio #prevItem, #portfolio #nextItem {width:34px; float:left; height:138px; margin-top:40px; background:url(img/controls2.png)  no-repeat; cursor:pointer}
#portfolio #nextItem {margin-right:0; background:url(img/controls2.png) -54px 0px no-repeat;}


}

/************************************************************************************
smaller than 650
*************************************************************************************/
@media screen and (max-width: 650px) {

body {
	background: url(images/body-bg-600.png) no-repeat center top;
	width: 100%;
	display: table;
	font: .81em/150% Arial, Helvetica, sans-serif;
	color: #666;
}


#header {
	float: left; width: 100%; margin: 100px 0 52px 0;
}

#header img {display: none;}

/* site logo */
#site-logo {
	width: 300px;
	float: left;
	margin: 40px 0 0 40px;
}


h1#site-logo {

	font: bold 20px/100% Arial, Helvetica, sans-serif;
	color: #e1904b;
	text-decoration: none;
}

#pagewrap {
	width: 95%;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;

}

#pagewrap2 {
	clear: both;
	padding: 0 0 20px 0;
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	max-width: 560px;
}

#separator {background: #ffffff; height: 2px; width: 100%; float: left; clear: both; margin: 0 0 30px 0;}



/* post */
.post {
	float: left;
	width: 100%;
	padding: 0; margin: 0;
}

.contactpost {
	float: left;
	width: 280px !important;
	padding: 0; margin: 0;
}

.volunteer {
	float: left;
	width: 250px !important;
	padding: 0; margin: 0;
}

/* Slideshow*/

#content-slideshow {width:560px; margin:0px; overflow:hidden;}
.clear {clear:both}
.wrapper {margin:0px auto;}
.slide {width:100%; float:left; overflow:hidden;}

#portfolio {background: #32292a;}

#portfolio .wrapper{width:100%;}
#portfolio .wrapper .column1 {margin:0px auto; width:100%;}

#portfolio .slideshowWrap {width:512px !important; overflow:hidden !important; float:left; z-index:3; position:relative; background: #32292a;}

#portfolio .slideshow {position:relative; left:0; z-index:2;}
#portfolio .item {width:128px; height: 130px; float:left; overflow:hidden; z-index:1; background: #32292a;}

#portfolio #prevItem, #portfolio #nextItem {width:24px; float:left; height:87px; margin-top:20px; background:url(img/controls2.png)  no-repeat; cursor:pointer}
#portfolio #nextItem {margin-right:0; background:url(img/controls2.png) -64px 0px no-repeat;}


}




/************************************************************************************
smaller than 560
*************************************************************************************/
@media screen and (max-width: 480px) {

	/* disable webkit text size adjust (for iPhone) */
	html {
		-webkit-text-size-adjust: none;
	}

body {
	background: url(images/body-bg-320.png) no-repeat center top;
	width: 100%;
	display: table;
	font: .81em/150% Arial, Helvetica, sans-serif;
	color: #666;
	margin-top: 20px;
}

.post {
	float: left;
	width: 100%;
	padding: 0; margin: 0;
}

/* site logo */
#site-logo {
	width: 100%;
	float: left;
	margin: 20px 0 0 0;
}

#header {
	float: left; width: 100%; margin: 100px 0 0 0; clear: both; width: 280px;
}

h1#site-logo {

	font: bold 20px/100% Arial, Helvetica, sans-serif; padding-right: 50px;
	color: #e1904b;
	text-decoration: none;
}

#pagewrap {
	width: 95%;
	max-width: 320px;
	margin-left: auto;
	margin-right: auto;

}

#pagewrap2 {
	display: none

}

.volunteer {
	display: none;
}

#separator {
	display: none;
}

}