@charset "UTF-8";
/*
Template Name: CleanCut
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.7
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 */


/* 320px
---------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:180px) and (max-width:360px) {
	#topbar, #header, #pageintro, #intro, .container, .p-footer, #copyright{max-width:90%; margin:0 auto;}
	.imgl, .imgr{display:inline-block; float:none; margin:auto;}
	.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 40px 0; padding:0;}

	#topbar .fl_left, #topbar .fl_right{margin:0; padding:0; text-align:center;}
	#topbar .fl_left{display:none;}
	
	#header{text-align:center;}
	#header #logo, #header nav{display:block; float:none;}
	#header nav ul{display:none;}
	#header nav .jq-selectbox ul{display:block;}
	#header #logo h1{padding-bottom:20px;}
	form input[type="submit"]{margin-bottom:10px;}
	
	.calltoaction div{margin-top:30px;}
	.calltoaction div:first-child{margin-top:0;}
	.calltoaction.opt4{font-size:1.5em;}
	
	.pricingtable-wrapper-opt3{padding:0; background-color:inherit;}
	.pricingtable-wrapper.opt3 .pricingtable, .pricingtable-wrapper.opt3:first-child .pricingtable{border-width:1px;}
	.pricingtable-wrapper.opt3.topdeal .pricingtable{margin:inherit; box-shadow:0 0 0 0 rgba(0,0,0,0.06);}

	#blog-post #comment-count div{float:none; margin-top:10px; text-align:center;}
	#blog-post #comment-count div:first-child{margin-top:0;}
	#blog-post .list.block li > ul, #blog-post .list.block li > ol{margin:0; padding:0; list-style:none; border:none;}
	
	#fof{padding:30px 0 0 0;}
	#fof h1{margin:0 0 20px 0; font-size:7em;}
	#fof h2{margin:0 0 20px 0; font-size:2em;}
	
	.p-footer div{margin-bottom:5%;}
	.p-footer .footer_gallery li, .p-footer .footer_gallery .first{display:inline-block; float:left; width:auto; margin:0 10px 10px 0; padding:0; clear:none;}
	.p-footer .footer_gallery li img{}
	
	#copyright{text-align:center;}
	#copyright div{float:none; line-height:1.6em;}
	#copyright div:first-child{margin-bottom:8px;}
}


/* 500px
---------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:361px) and (max-width:615px) {
	#topbar, #header, #pageintro, #intro, .container, .p-footer, #copyright{max-width:95%; margin:0 auto;}
	.imgl, .imgr{display:inline-block; float:none; margin:auto;}
	.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 40px 0; padding:0;}

	#topbar .fl_left, #topbar .fl_right{margin:0; padding:0; text-align:center;}
	#topbar .fl_left{margin-bottom:15px;}

	#header{text-align:center;}
	#header #logo, #header nav{display:block; float:none;}
	#header nav ul{display:none;}
	#header nav .jq-selectbox ul{display:block;}
	#header #logo h1{padding-bottom:20px;}
	form input[type="submit"]{margin-bottom:10px;}
	
	.calltoaction div{margin-top:30px;}
	.calltoaction div:first-child{margin-top:0;}
	
	.pricingtable-wrapper-opt3{padding:0; background-color:inherit;}
	.pricingtable-wrapper.opt3 .pricingtable, .pricingtable-wrapper.opt3:first-child .pricingtable{border-width:1px;}
	.pricingtable-wrapper.opt3.topdeal .pricingtable{margin:inherit; box-shadow:0 0 0 0 rgba(0,0,0,0.06);}
	
	#fof{padding:30px 0 0 0;}
	#fof h1{margin:0 0 20px 0; font-size:7em;}
	#fof h2{margin:0 0 20px 0; font-size:2em;}
	
	.p-footer div{margin-bottom:5%;}
	.p-footer .footer_gallery li, .p-footer .footer_gallery .first{display:inline-block; float:left; width:auto; margin:0 10px 10px 0; padding:0; clear:none;}
	
	#copyright div{float:none;}
	#copyright div:first-child{margin-bottom:8px;}
}


/* 800px
---------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:616px) and (max-width:850px) {
	#topbar, #header, #pageintro, #intro, .container, .p-footer, #copyright{max-width:95%; margin:0 auto;}
	
	#header nav ul{display:none;}
	#header nav .jq-selectbox{display:block; min-width:300px;}
	form input[type="submit"]{margin-bottom:10px;}
	
	.calltoaction.opt4 div{display:block; float:none; width:100%; margin:30px 0 0 0;}
	.calltoaction.opt4 div:first-child{margin-top:0; text-align:center;}
	.calltoaction.opt4{font-size:1.5em;}
	
	#fof{padding:30px 0 0 0;}
	#fof h1{margin-top:0; font-size:12em;}
	#fof h2{margin-top:0;}
}


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

@media screen and (min-width:1028px) {
	#topbar, #header, #pageintro, #intro, .container, .p-footer, #copyright{max-width:95%; margin:0 auto;}
}

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


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

@media screen and (max-width:850px) {
	/* Sliders - Hide Captions */
	.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;}
	/* Sliders - Hide Captions */
	.rslides_caption, .flex-caption, .nivo-caption, .nivo-controlNav.nivo-thumbs-enabled{visibility:hidden; opacity:0;}
	/* Jquery Isotope - Sorting Filters */
	.isotope-container.two_col li, .isotope-container.three_col li, .isotope-container.four_col li, .isotope-container.five_col li, .isotope-container.six_col li{display:block; width:100%; margin:0 0 20px 0;}
}

@media screen and (min-width:180px) and (max-width:361px) {
	/* Slider Specific */
	.rslides_container a.prev, .rslides_container a.next, .flex-direction-nav, .nivo-directionNav a{display:none;}
	/* Shop Specific */
	#basket.table .t-body, #basket.table .t-row, #basket.table .t-cell{display:block; margin-bottom:10px; padding:0;}
	#basket.table .t-body, #basket.table .t-cell{border:0;}
	#basket.table .t-row{padding:8px 8px 0 8px;}
	#basket.table .t-header{display:none;}
}

@media screen and (min-width:180px) and (max-width:650px) {
	/* Shop Specific */
	#shop{margin-bottom:50px;}
	#basket .prd-preview{display:none;}
	/* Sidebar Gallery */
	.sdb-gallery li, .sdb-gallery .first{display:inline-block; float:left; width:auto; margin:0 10px 10px 0; padding:0; clear:none;}
	/* Timeline */
	.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;}
}