/* #Media Queries
================================================== */
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
	.hamburger { display: block; }
	#topright {
		margin: 45px 0 0 0;
		padding: 0 !important;
	}
	#topnav { display: none; margin: auto; width: 300px; } 
	.sf-menu { float: none; right: auto; bottom: auto; }
	.sf-menu > li { border: 0 !important; display: block; float: none; }
	.sf-menu > li ul { opacity: 0; }
	.sf-menu a { background: transparent !important; border:0 !important; text-align: left; }
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	#bodychild, .outercontainer, #slidercontainer{width:100%; margin:0}
	#logo h1{font-size:20px; line-height:20px;}
	
	/*============================================== SLIDER SECTION ==============================================*/
	.flex-caption{ top:30px;}
	.flex-caption h1{ font-size:60px; line-height:normal;}
	.flex-caption h1 span{ font-size:25px;}
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
	#bodychild, .outercontainer, #slidercontainer{width:100%; margin:0}
	#outerheader{height:auto;}
	
	#searchform input { font-size: 14px;}
	
	#topright {
		margin: 15px 0 0 0;
	}
	
	
	/*============================================== HEADER SECTION ==============================================*/
	#logo{ float:none; display:block}
	#logo img { width: 200px; }

	#navigation{ text-align: center; clear: both; height: auto; }
	#navigation > .container > .twelve.columns { width: 100%; float: none; }
	#navigation > .container { width: 90%; margin: 0 20px; }

	nav { margin:0; float: none; }

	#topright{ float: none; padding: 0 0 20px 0; width: 100%; clear: both; display: block; }
	
	/*============================================== SLIDER SECTION ==============================================*/
	.flex-caption { top:10px; }
	.flex-caption h1 { font-size:26px; }
	.flex-caption h1 span { font-size:18px; }
	
	#pagetitle-container .twelve.columns { margin-bottom:0px; }

	
	/*============================================== CONTENT SECTION ==============================================*/
	#content.positionright, #content.positionleft{background:transparent;}
	.padcontent{padding-right:0;}
	#content.positionright .padcontent{padding-left:0; padding-right:0}
	
	/* Main Box */
	.main-box .box{ width:100%;}
	.main-box .box.lastcols{ clear:none;}
	

	/*============================================== BLOG SECTION ==============================================*/
	.post{padding-bottom:0px; }
	.wp-pagenavi{margin-bottom:30px;}

	
	/*============================================== PORTFOLIO SECTION ==============================================*/

	#ts-display-pf-filterable li{width:300px;}
	#ts-display-pf-filterable .ts-display-pf-img{
		width:300px;
	}
	
	#ts-display-pf-filterable .ts-display-pf-img a.image{
		width:300px;
	}

	/*============================================== Footer ==============================================*/
	#copyright{ margin-bottom:20px;}
	#copyright, #sn{ text-align:center; float:none;}
	
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	#bodychild, .outercontainer, #slidercontainer{width:100%; margin:0}
	.single .entry-utility{ padding-top:0px;}
	
	/*============================================== SLIDER SECTION ==============================================*/
	.flex-caption h1{line-height:normal;}
	.flex-caption p{ height:60px; overflow:hidden;}
	
	
	/* Content */
	.circle{ margin:0 auto; text-align:center;}

	/*============================================== PORTFOLIO SECTION ==============================================*/

	#ts-display-pf-filterable li{width:420px;}
	#ts-display-pf-filterable .ts-display-pf-img{
		width:420px;
	}
	
	#ts-display-pf-filterable .ts-display-pf-img a.image{
		width:420px;
	}
	#ts-display-pf-filterable .ts-display-pf-img a .rollover{ width:420px;}
	
}
		

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
	#bodychild, .outercontainer, #slidercontainer{width:100%; margin:0}

	
	/*============================================== SLIDER SECTION ==============================================*/
	.flex-caption, .flex-control-nav{ display:none;}
	
	/* Content */
	ul.tabs { height:auto;}
	ul.tabs li{ float:none;}
	html ul.tabs li.active{ border:1px solid #f2f2f2;}
	#tab-body{ border:0px;}
	
	/*============================================== BLOG SECTION ==============================================*/
	.commentlist ol{padding-left:20px;}
	.single .entry-utility{ padding-top:0px;}
	
	.project a { height: 50px !important; width: 50px !important; }
	.more-photos, .more-events { float: none; margin: 0; display: block;}
	h1.center.titleUppercase { padding: 0 20px; }
	.latest-post li date { float: none; }
	.latest-post li a { display: block; margin-top: 10px; }
}