@charset "UTF-8";
/*
Template Name: Transform
Template URI: http://www.os-templates.com/
Description: Designed and Built by <a href="http://www.os-templates.com/">OS Templates</a>. This modern template is adaptable, lightweight and fully customisable. The template is easy to use, enabling you to create your site within minutes.
Version: 1.0.1
Author: OS-Templates.com
Author URI: http://www.os-templates.com/
Copyright: OS-Templates.com
Licence: Single Site
Licence URI: http://www.os-templates.com/template-terms
File: Media Queries CSS
*/

@-ms-viewport{width:device-width;} /* http://msdn.microsoft.com/en-gb/library/ie/hh869615%28v=vs.85%29.aspx */


/* 
---------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:180px) and (max-width:650px) {
	#header, #pageintro, .container, #p-footer, #copyright{max-width:90%; margin:0 auto;}
	.imgl, .imgr{display:inline-block; float:none;}
	.fl_left, .fl_right{display:block; float:none;}
	[class^="col-"], [class*=" col-"], [class^="col-"].nogutter, [class*=" col-"].nogutter{display:block; float:none; width:auto; margin:0 0 30px 0; padding:0;}
	
	#header{text-align:center; padding:30px 0 20px;}
	#header #logo, #header #topnav{float:none; margin:0; padding:0; clear:none;}
	#header #logo span{margin:6px 10px 0 0; font-size:26px;}
	
	.sdb-gallery li, .sdb-gallery .first{display:inline-block; float:left; width:auto; margin:0 10px 10px 0; padding:0; clear:none;}
	
	.timeline{padding:0;}
	.timeline:after, .timeline li article:after{display:none;}
	.timeline li, .timeline li:nth-child(even){margin:0 0 30px 0; padding:80px 0 0 0;}
	.timeline li time, .timeline li:nth-child(even) time{top:26px; left:80px; right:auto; margin:0;}
	.timeline li .tli{position:absolute; top:0; left:0; margin:0;}
	.timeline li article, .timeline li:nth-child(even) article{margin:0;}
	.timeline li:nth-child(even) article p:last-child{text-align:left;}

	.clients{border:none; border:0;}
	.clients div{padding:10px; border-width:1px;}
	.clients :last-child{margin-bottom:0;}
	
	#blog-post #comment-list ul{margin:0; padding:0; border:none;}
	
	.comingsoon #logo{margin:0 0 50px 0;}
	.comingsoon #logo *, .comingsoon .notice{font-size:40px; line-height:1.2em;}
	.comingsoon #logo span{font-size:32px;}
	.comingsoon .notice{font-size:32px;}
}

@media screen and (min-width:651px) and (max-width:850px) {
	#header, #pageintro, .container, #p-footer, #copyright{max-width:95%; margin:0 auto;}
	#header{padding:30px 0 20px;}
	#header #logo, #header #topnav{float:none; margin:0; padding:0; clear:none;}
}

@media screen and (min-width:180px) and (max-width:850px) {
	#topnav ul{display:none;}
	.hpcircle{width:220px; height:220px;}
	.hpcircle span{line-height:190px; font-size:90px;}
}


/* Framework Sizing
---------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:361px) {
	#header, #pageintro, .container, #p-footer, #copyright{max-width:95%; margin:0 auto;}
}

@media screen and (min-width:1140px) {
	html.boxed .wrapper, #header, #pageintro, .container, #p-footer, #copyright{max-width:1140px; margin:0 auto;}
	html.boxed .wrapper{max-width:1200px;}
	html.boxed #header, html.boxed #pageintro, html.boxed .container, html.boxed #p-footer, html.boxed #copyright{max-width:95%; margin:0 auto;}
}


/* Other
---------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:851px) {
	/* Hide The Jquery Generated Navigation Form from 851px upwards */
	#topnav form{display:none;}
}

@media screen and (min-width:1141px) and (max-width:1300px) {
	/* Sliders - Resize Captions */
	.flex-homepage .flex-caption .hptitle{font-size:140px;}
	.flex-homepage .flex-caption .hpsubtitle{margin:-10px 0 10px 0; font-size:45px;}
}

@media screen and (min-width:851px) and (max-width:1140px) {
	/* Sliders - Resize Captions */
	.flex-homepage .flex-caption .hptitle, html.boxed .flex-homepage .flex-caption .hptitle{font-size:100px;}
	.flex-homepage .flex-caption .hpsubtitle, html.boxed .flex-homepage .flex-caption .hpsubtitle{margin:-10px 0 10px 0; font-size:30px;}
}

@media screen and (max-width:850px) {
	/* Sliders - Hide Dots */
	.flex-full-basic .flex-control-paging{display:none;}
	/* Sliders - Hide Captions */
	.flex-caption{display:none;}
	.flex-homepage .flex-caption{display:block;}
	.flex-homepage .flex-caption *{display:none;}
	}

@media screen and (max-width:650px) {
	/* Creates A Container For Tables To Be Scrolled In  */
	.res-table{display:block; width:100%; margin:0 0 30px 0; padding:0 0 15px 0; overflow:auto; overflow-x:scroll;}
	.res-table table, .res-table .table{margin:0; padding:0; white-space:nowrap;}
}