/* **************************** RESPONSIVE STRUCTURE ************************** */

html, body, .page_wrapper {
	min-width: 300px; /* make this the minimum width at which responsive is designed to - generally a bit less than 320px */
}

/* bring all our containers down to pretty much 100% width when screen is too small */
@media only screen and (max-width: 1000px) { /* this should target about 40px larger than .content_container's width, unless you have no need for .edgeflush'es, in which case you can target .content_container's width exactly */
	.content_container,
	.page_container,
	.extended_container, 
	 .fullwidth_container 
	{ width: 100%; padding-left: 0; padding-right: 0; margin-right: 0; margin-left: 0; }
	.edgeflush, .home.page .edgeflush, .stretch .edgeflush { width: 96%; padding-left: 2%; padding-right: 2%; } /* elements whose content is now flush against the edge of the page, which would look bad as a result */
	.undo-edgeflush { margin-left: -2%; margin-right: -2%; }
}

/* elements that will be shown at their respective breakpoints, both block and inline versions */
.show-breakpoint0,
.show-breakpoint1, .show-breakpoint2, .show-breakpoint3, .show-breakpoint4,
.show-breakpoint5, .show-breakpoint6, .show-breakpoint7, .show-breakpoint8,
.show-breakpoint0-inline,
.show-breakpoint1-inline, .show-breakpoint2-inline, .show-breakpoint3-inline, .show-breakpoint4-inline,
.show-breakpoint5-inline, .show-breakpoint6-inline, .show-breakpoint7-inline, .show-breakpoint8-inline { display: none; }

/* elements that will be shown based on device - !important's are used to override anything else which might display them */
.show-mobiledevice-only { display: none; }
	.chr-mobile-true .show-mobiledevice-only { display: block; }
	.chr-mobile-false .show-mobiledevice-only { display: none !important; }
.show-nonmobile-only { display: none; }
	.chr-mobile-true .show-nonmobile-only { display: none !important; }
	.chr-mobile-false .show-nonmobile-only { display: block; }
.mod-idevice .hide-on-idevice { display: none !important; }
.mod-android .hide-on-android { display: none !important; }

/* **************************** RESPONSIVE LOGIC ************************** */

/* just add the things that need to change, such as hiding
   or resizing things that won't fit, or showing new special
   elements that are hidden by default */

@media only screen and (max-width: 1300px) { /* RESPONSIVE BREAKPOINT 0 */

	.hide-breakpoint0 { display: none; }
	.show-breakpoint0 { display: block; }
	.show-breakpoint0-inline { display: inline; }

}

@media only screen and (min-width: 1000px) {
	#desktop-nav{
		display: inline-block; /* desktop menu*/
	}
}

@media only screen and (max-width: 1000px) { /* RESPONSIVE BREAKPOINT 1 */

	.hide-breakpoint1 { display: none !important; }
	.show-breakpoint1 { display: block; }
	.show-breakpoint1-inline { display: inline; }
	
	/* hide things that we don't have room for now */
	.css_selector { display: none; }
	
	/* avoid zooming into form elements by upping font sizes, + adjustments to form layout that it affects */
	input, textarea, select { font-size: 1em; }
	.chr_content form.wpcf7-form textarea { height: 9.35em; }
	.chr_content form.wpcf7-form button[type="submit"] { height: 3.8em; }
	
	/* Front page fixes*/
	.masthead_content_top{
		width: 96%;
		padding: 0 2%;
	}

	.header_widget_area {
    	float: left;
    	margin-left: 5%;
	}

	.header_widget_area h2 .phone_icon {
       background-size: 20px;
       padding-left: 25px;
 	   font-size: 20px;
	}

	.header_menu ul.menu > li > ul.sub-menu {
		min-height: inherit; 
	}

	.logo_wrapper {
	    display: block;
	    float: left;
	    position: relative;
	    height: 100%;
	    width: 170px; /*fix for icon size */
	}


	/*Front page slider fixes */
	.chr_slider,
	.front-page .feature{
		height: 450px;

	}

	.chr_slider .background_image{
		background-size: cover;
		background-position: center !important;
	}

	.chr_slider .feature_image{
		display: none !important;

	}

	/* Slider text fixes */
	.frontpage_slideshow.chr_slider .title {
	    font-size: 54px;
	    line-height: 53px;
	}

	.chr_slider .content{
		padding: 195px 290px 150px 2%; 
	}

	.home .content_section .title{
		text-align: center;
	}

	.home .content_section .content p{
		text-align: center;
	}

	/* Fix content-header elements to be responsive */
	.inner_header_feature_image{
		display: none;
	}

	.content_side,
	.content_main,
	.page-template-template-gallery .content_main,
	.feature .inner_header_content{
		width: 96%; 
		padding: 0 2%;
	}

	/* Sidebar fixes */
	#sidebar{
		width: 100%;
		padding-top: 0 !important; /*overide added padding with scrolling sidebar*/
	}

	.sidebar .image_gallery {
	    float: left;
	    width: 50%
	}

	.sidebar .widget{
		float: left;
		width: 40%;
		margin-left: 5px;
	}



	.front-page .content_main{
		width: 100%;
		padding: 0;
	}

	.content_side{
		float: left;
		margin-top: 10px; 
	}

	/*Product page*/
	.product-dropdown{
		margin-bottom: 20px;
		padding: 0;
		font-size: 1em;
	}
	
	.product-page{
		width: 96%;
	}

	.product_title{
		text-align: left;
	}

	.product_menu{
		width: 575px; /*shrinks product menu to 3 for ipad */
		margin: 2% auto;
	}

	.product_content.cols-3 .col:nth-of-type(1){
		width: 40%;
	}

	.product_content.cols-3 .col:nth-of-type(2){
		float: right; /* float product image to right */
	}

	.product_content.cols-3 .col:nth-of-type(3){
		float: left; /*override product content CSS */
		width: 100%;
		margin-top: 10px;
	}

	.product_content .product_specs dl {
		width: 90%;
		overflow: hidden;
		margin: 0;
		padding: 2% 5% 5% 5%;
	}


	.product_content .product_specs dd,
	.product_content .product_specs dt,
	.product_content .product_specs dt:first-child {
		float: left;
		width: 46%;
		margin: 0;
		margin-top: 10px; 
	}

	/* Contact page */ 
	.wpcf7{
		width: 96%;
	}

	/* Fix footer elements to be responsive */
	.not-front-page #content{
		margin-bottom: 15px; /*remove whitespace from top of footer*/
	}

	.not-front-page .feature {
    	border-top: none;
    }

	.footer_feature_image{
		display: block;
		margin: 0 auto;
		position: relative;
	    left: 0;
    	top: 0;
	}
	
	.footer_middle h2.title{
		margin-top: 15px;
		margin-bottom: 0;
	}

	.footer_content_top,
	.footer_content_middle,
	.footer_content_bottom{
		padding: 2% 2% !important;
	}
	
	.footer_bottom div.widget {
	    width: 48%;
	}

	.footer_details{
		margin-bottom: 2%;

	}

	.pdf_icon, .email_icon, .phone_icon, .fax_icon{
		display: block;
	}

	/* Section fixes */
	.page_container{
		left: 0;
	}

	.section_wrapper{
		padding: 0 !important;
	}

	.content_section .section_content{
		padding: 60px 10px 40px;
	}

	/* Contact Page */
	.contactmap{
		width: 410px;
	    height: 350px;
	}
	
	#desktop-nav{
		display: none; /* hide standard nav, replace with hamburger */
	}

	/* Mobile Menu Toggle (i.e Hamburger) */
	 #mobile-nav{
		display: block;
		top: 0px;
		height: 100%;
		max-height: 100%;
		cursor: pointer;
	}

	.mm-navbar-top {
		top: 107px;
	}

	.mm-hasnavbar-top-1 .mm-panels {
		top: 148px;
	}

	.mm-title,
	.mm-listview > li > a, .mm-listview > li > span {
		color: #404040;
		font-family: 'Open Sans Bold';
		font-size: 12px;
		text-transform: uppercase;
	}

	.mm-listview > li:hover > a,
	.mm-opened ul.menu > li[class*="current-"] > a,
	.header_menu ul.menu > li > ul.sub-menu > li:hover > a,
	.header_menu ul.menu > li > ul.sub-menu > li:active > a { color: #EB8C21; background-color: transparent; }

	.mm-listview .mm-next{
		width: 100%;
		cursor: pointer !important;
	}

	.menu-item a.menu-image-title-after.menu-image-not-hovered img, .menu-item a.menu-image-hovered.menu-image-title-after .menu-image-hover-wrapper
	{
	         /* Responsive menu images */
    	height: 100px;
    	padding-right: 10px !important; /*inline override*/
	}

	.sf-menu li:first-child{
		text-align: center; /* make home icon centred, remove if menu changed */
	}

	.sf-menu li a{
		padding: 10px;
	}

	.sub-menu{
		width: auto !important; /*overwrite inline megamenu styles*/
		left: 0 !important;
		padding: 0 !important;
	}

	#mobile-toggle{
		display: block;
		float: right;
		padding: 10px 35px 16px 0px; 
	    margin-top: 40px;
    	margin-right: 1%;
	}

	#masthead_bottom{
		height: 0;
	}

	/** Image Gallery **/
	.image-post{
		width: 25%;
	}


	
	#sidebar .sidebar_submenu{
		display: none;
	}
	

}

@media only screen and (max-width: 900px) { /* RESPONSIVE BREAKPOINT 2 */

	.hide-breakpoint2 { display: none; }
	.show-breakpoint2 { display: block; }
	.show-breakpoint2-inline { display: inline; }
	
	.featured_page{
		width: 50%;
		margin: 2% 0;
	}

	.featured_page:nth-child(odd){
		clear: left;
	}

	.contact-details{
		width: 96%;
	}

	.contactmap{
	    overflow: hidden;
	    height: 300px;
	    width: 96%;
	    float: left;
	    padding-bottom: 20px;
	}

	.chr_slider .content{
		padding-right: 250px;
	}
	
}

@media only screen and (max-width: 800px) { /* RESPONSIVE BREAKPOINT 3 */

	.hide-breakpoint3 { display: none !important;}
	.show-breakpoint3 { display: block; }
	.show-breakpoint3-inline { display: inline; }
	
	
	
	/* make the google map responsive, overriding inline styles */
	#wpgmza_map { float: none !important; width: 100% !important; height: 180px !important; }
	
	/* adjust width helper classes to stretch now */
	.w-100, .w-90, .w-80, .w-70, .w-60, .w-50, .w-40, .w-30, .w-20, .w-10 { float: none; width: 100%; }

	.content_section ul.icons li{
		width: 45%;

	}

	.content_section ul.icons li:nth-child(odd){
		clear: left;
	}


	/* Sidebar fixes */
	#sidebar{
		padding-top: 20px !important;
	}
	.sidebar .image_gallery {
	    width: 100%
	}

	.sidebar .widget{
	    float: left;
	    width: 90%;
	    padding: 5%;
	    margin: 0;
	    text-align: center;
	}

	/* Turn product menu into drop down */
	.product_content.cols-3 .col:nth-of-type(1),
	.product_content.cols-3 .col:nth-of-type(2)
	{
		float: left;
		width: 100%;
		margin: 0;
		
	}

	.product_content.cols-3 .col:nth-of-type(3) {
	}

	.product_content
	.main-btn{
		display: none;
	}

	.product_content
	.mobile-btn{
		display: block;
		float: left;
		width: 100%;
		padding: 0;
		border: 1px solid #eb8c21;
	}

	.product_menu,
	.nav-jcarousel{
		display: none;
	}

	/* carousel */
	.sidebar .image_gallery .nav .prev{
		left: 10%;
	}

	.sidebar .image_gallery .nav .arrow{
		right: 10%;
	}

	.wpcf7-form-control.wpcf7-submit{
		width: 100%;
	}
	
	.chr_slider .content{
		padding-right: 200px;
	}


}

@media only screen and (max-width: 700px) { /* RESPONSIVE BREAKPOINT 4 */

	.hide-breakpoint4 { display: none; }
	.show-breakpoint4 { display: block; }
	.show-breakpoint4-inline { display: inline; }
	
	/*front page + footer fixes*/
	.frontpage_slideshow.chr_slider .title {
	    font-size: 43px;
	    line-height: 42px;
	}

	.featured_page {
		width: 100%;
	}

	.chr_slider .content{
		padding: 208px 22% 150px 2%; 
	}

	.footer_middle .map{
		float: none;
		width: auto;
		height: auto;
		padding-bottom: 20px;
	}

	.footer_middle .street{
		margin-top: 10px;
	}

	/*Menu fixes ipad down to mobile*/
	.menu-item a img{
		display: none; /*hide mobile menu images */
	}

	.sf-menu li:first-child a img{
		display: inline-block; /*ensures home icon can be seen */
	}

	.menu-item a.menu-image-title-after.menu-image-not-hovered img, .menu-item a.menu-image-hovered.menu-image-title-after .menu-image-hover-wrapper {
    	 padding-right: 0px; /* remove image padding */
	}
	
	/* tabling fixes (products and contact) */
	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}

	table{
	    width: 100%;
    	height: inherit !important;
   		text-align: center;
	}

	table ul li{
		text-align: left;
	}

	.contact-table{
		text-align: left;
	}

	.chr_content td {
	    padding: 0;
	}

	.chr_content tr {
    	padding-bottom: 10px;
	}
	
	

	.home .content_section .title{
		text-align: left;
	}

	.home .content_section .content p{
		text-align: left;
	}

	
	/* time for the hamburger menu */

		/*body { overflow: visible; } /* needed for menus longer than the current page - watch out though, this will also do a crazy zoom out thing on mobile devices on viewing the menu, which is probably worse and definitely would happen more */
	
		#megamenu_lightbox { display: none !important; }
		#menu { }
			#menu .hamburger { display: block; }
			#menu ul.menu { display: none; }

		body > ul.menu {
			list-style-type: none;
			position: absolute;
			width: 50%;
			left: -51%;
			z-index: 100;
			text-transform: uppercase;
			font-weight: bold;
			background-color: #fff;
			height: 100%;
			border-right: 3px solid #fff;
		}
		
			body > ul.menu.open { left: 0; height: auto; /* height auto to enable calculation of overage height in jQuery */}
			
			body > ul.menu > li { display: block; background-color: #2064A2; margin: 2px 0; }
				body > ul.menu > li > a { display: block; text-decoration: none; padding: 20px; color: #fff; font-size: 1.5em; }
				
					body > ul.menu > li > a img,
					body > ul.menu > li > a .menu-image-hover-wrapper { display: none; } /* hide menu images */
					
					body > ul.menu > li[class*="current-"] > a { color: #b3f0ff; }
					
		body > ul.menu .megamenu_wrapper,
		body > ul.menu .megamenu_image,
		body > ul.menu .megamenu_description,
		body > ul.menu .megamenu_footer { display: none; -webkit-transition: none; -moz-transition: none; transition: none; }
		
			body > ul.menu .megamenu_wrapper { max-width: 100%; }
			body > ul.menu > li[class*="current-"] .megamenu_wrapper { display: block; }
		
		body > ul.menu ul.sub-menu { position: relative; }
			body > ul.menu ul.sub-menu > li { display: block; border-top: 1px dotted #fff; }
			
					body > ul.menu ul.sub-menu > li > a {
						display: block;
						padding: 14px;
						color: #fff;
						text-decoration: none;
						font-size: 1.2em;
						text-transform: none;
						padding-left: 40px;
						font-weight: normal;
					}
					
						body > ul.menu ul.sub-menu > li[class*="current-"] > a { color: #b3f0ff; }
	
	/* footer to multiline */
	
		.footer_text .widget,
		.footer_text .widget.footer_signature { float: left; width: 100%; text-align: center; margin: 5px 0; }
			.footer_text .widget:first-child { margin-top: 0; }
			.footer_text .widget:last-child { margin-bottom: 0; }

}

@media only screen and (max-width: 600px) { /* RESPONSIVE BREAKPOINT 5 */

	.hide-breakpoint5 { display: none; }
	.show-breakpoint5 { display: block; }
	.show-breakpoint5-inline { display: inline; }

	#wpadminbar{
		position: fixed;
	}

	.sidebar .widget{
		width: 80%;
		padding: 10%; 
		margin: 0;
		text-align: left;
	}

	/** Posts on archive page **/
	.post.excerpt .content {
	    width: 100%;
	}

	/** Image Gallery **/
	.image-post{
		width: 50%;
	}

	.post.excerpt .thumb {
   		min-height: 125px;
	}
	



		/* OLD responsive menu */
	/*
	#menu { }
		#menu ul.menu { list-style-type: none; }
			#menu ul.menu > li { display: block; }
				#menu ul.menu > li > a { text-decoration: none; }
					#menu ul.menu > li > a:hover,
					#menu ul.menu > li[class*="current-"] > a { }
				
		#menu ul.sub-menu {
			display: none;
			position: relative;
			left: 0;
			top: 0;
			z-index: auto; /* reset from normal design */
		/*
			#menu ul.sub-menu > li { display: block; }
					#menu ul.sub-menu > li > a { text-decoration: none; }
						#menu ul.sub-menu > li > a:hover,
						#menu ul.sub-menu > li[class*="current-"] > a { }
		#menu ul > li:hover ul.sub-menu { display: block; }
	*/
	
}

@media only screen and (max-width: 500px) { /* RESPONSIVE BREAKPOINT 6 */

	.hide-breakpoint6 { display: none; }
	.show-breakpoint6 { display: block; }
	.show-breakpoint6-inline { display: inline; }

	/*puts phone number under logo on small screens */
	.logo_wrapper {
	    position: relative;
	    height: 75%;
	    left: 2%;
	}

	.header_widget_area{
		height: auto;
		display: block;
		position: absolute;
		top: 65px;
		left: 1%;
	}

	.contact-label, 
	.contact-value{
		float: none;
		width: 100%;
		margin: 0;
	}

	.contact-label{
		margin-top: 10px;
	}

	.contact-value:last-child{
		margin-bottom: 10px;
	}

	.sidebar .image_gallery .nav,
	.post-gallery .image-gallery .nav{
		width: 98%;
	}

	.chr_slider .content{
		padding: 208px 2% 150px 2%; 
	}
	
	

}

@media only screen and (max-width: 400px) { /* RESPONSIVE BREAKPOINT 7 */

	.hide-breakpoint7 { display: none; }
	.show-breakpoint7 { display: block; }
	.show-breakpoint7-inline { display: inline; }
	
	/** Image Gallery **/
	.image-post{
		width: 100%;
	}
	
	
	
}

@media only screen and (max-width: 320px) { /* RESPONSIVE BREAKPOINT 8 */

	.hide-breakpoint8 { display: none; }
	.show-breakpoint8 { display: block; }
	.show-breakpoint8-inline { display: inline; }
	
	
	
}

/* ******************** The end, thanks for visiting! ******************* */