.nav-button { display: none; } /* hide the navigation button by default */
@media only screen and (min-width: 0px) and (max-width: 1250px) {
	
	.banner-caption{
		top:10%;
	}
	.cols-2{
		-webkit-column-count:1; /* Chrome, Safari, Opera */
		-moz-column-count:1; /* Firefox */
		column-count:1;
	}
	#content-bg{
		background:none;
	}
	#content-text{
		padding-top:0;
	}
	#header{
		padding-top:20px;
		margin-top:0;
		height:auto;
		}
	#header-actions{
		padding-right:0;
		margin-top:35px;
	}
	.caption{
		width:50%;
	}
	#content-wrapper{
		margin:0;
		overflow:auto;
	}
	#menu{
		margin-top:0;
		width:auto;
		border:0;
		}
	#menu ul li ul {
		left:0;
		}	
	#logo{
		margin-top:60px;
		}
	#top{
		bottom:20px;
		}
	.content-image{
		margin:0;
	}
	#content-text p{
		margin-right:0;
	}
	.content-box{
		float:none !important;
		width:100%;
		text-align:justify;
		}
	iframe{
		width:100%;
		margin-top:10px;
	}
	.inline-image{
		max-width:50%;
	}
	.inline-image img{
		max-width:100% !important;
	}
	/* Navigation Button
	-------------------------------------------------------- */

	.nav-button {
		display: block;
		position: absolute;
		top: 12px;
		left: 12px;
		width: 50px;
		height: 35px;
		background: url('../img/menu-icon-large.png'), -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background: url('../img/menu-icon-large.png'),    -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background: url('../img/menu-icon-large.png'),     -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background: url('../img/menu-icon-large.png'),      -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background: url('../img/menu-icon-large.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 21px, 100%;
		cursor: pointer;
		border: 0 none;
		border-bottom: 1px solid rgba(255,255,255,.1);
		box-shadow: 0 0 4px rgba(0,0,0,.7) inset;
		border-radius: 5px;
		z-index: 999;
		text-indent: -9999px;
	}
	.nav-button:hover { 
		background-color: rgba(0,0,0,.1); 
	}
	.nav-button.open {
		background: url('../img/close-icon-large.png'), -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background: url('../img/close-icon-large.png'),    -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background: url('../img/close-icon-large.png'),     -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background: url('../img/close-icon-large.png'),      -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background: url('../img/close-icon-large.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 21px, 100%;
	}

	/* Navigation Bar
	-------------------------------------------------------- */

	body {} 

	#menu-top {
		width: 100%;
		float: none;
		background-color: #002B49; /* change the menu color */
		background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background-image:    -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background-image:     -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		background-image:      -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
		display: block;
		height: 50px;
		margin: 0;
		padding: 0;
		overflow: hidden;
		box-shadow: 0 1px 2px rgba(0,0,0,.6);
		position: absolute !important;
		top: 0px;
		left: 0px;
		z-index: 998;
		clear: both;
		padding-bottom:10px;
		text-align:left !important;
	}
	#menu ul li a,
	#menu ul li a.current{
		color:#fff;
	}
	#menu ul li a.current{
		background:#009CBD;
	}
	#menu-top li {
		display: none !important;
		width: 100% !important;
	}
	#menu-top li a {
		display: block;
		width: 100%;
		padding: 10px 5%;
		font-size: 1em;
		font-weight: bold;
		text-shadow: -1px -1px 0 rgba(0,0,0,.15);
		color: #fff;
		text-decoration: none;
		border-bottom: 1px solid rgba(0,0,0,.2);
		border-top: 1px solid rgba(255,255,255,.1); 
		border-radius:0 !important;
		border-left-width:0 !important;
		border-right-width:0 !important;
		box-sizing:border-box;
	}
	#menu-top li a:hover {
		background-color: rgba(0,0,0,.5);
		border-top-color: transparent;
	}
	#menu-top > li:first-child {
		border-top: 1px solid rgba(0,0,0,.2);
	}

	/* Toggle the navigation bar open  */

	#menu-top.open { 
		height: auto; 
		padding-top: 60px;
	}
	#menu-top.open li { 
		display: block !important; 
	}

	/* Submenus ? optional .parent class indicates dropdowns */

	#menu-top > li:hover > a {
		background: rgba(0,0,0,.5);
		border-bottom-color: transparent;
	}
	#menu-top li.parent > a:after {
		content: "?";
		color: rgba(255,255,255,.5);
		float: right;
	}
	#menu-top li.parent > a:hover {
		background: rgba(0,0,0,.75);
	}
	#menu-top li ul {
		display: none;
		border-top: 0 none;
		margin-left:0 !important;
		padding: 0;
		width:100% !important;
		position:relative !important;
		border-radius:0;
	}
	#menu-top ul li ul li{
		background-image:none !important;
		}
	#menu-top li ul a {
		border: 0 none;
		font-size: 0.9em;
		padding: 10px 5%;
		font-weight: normal;
		color: #fff;
	}
	#menu-top li:hover ul {
		display: block;
		border-top: 0 none;
	}
	#menu ul .drop {
		position:static;
		}
	#banner{
		top:60px;
	}
	.banner-caption{
		top:20%;
	}
}
@media only screen and (min-width: 0px) and (max-width: 960px) {
	.inline-image{
		max-width:600px;
	}
	#blog-home,
	#contact-home,
	#brochure,
	#product-images,
	#product-panel{
		max-width:100%;
		border:0;
		padding:10px;
	}
	#product-images{}

	#product-images{
		width:100%;
		padding:30px;
	}
	#home{
		background:#e9e9e9;
	}
	#banner-wrap,#banner,#banner img{
		height:auto;
		min-height: 600px !important;
	}
	.banner-caption{
		top:130px;
	}
	.banner-caption p{
		padding:30px;
	}
	p.banner-headline{
		display:block;
		min-height:300px;
	}
	.ot{
		width:100%;
	}
	.service:first-of-type{
		display:block;
		margin:0 auto;
		max-width:100%;
		text-align:center;
		margin-bottom:50px;
	}
	.imgS,
	.imgL,
	.inline-image,
	.inline-image:nth-of-type(even){
		float:none !important;
		clear:both !important;
		margin:0 auto;
		width: 100%;
	}
	
	.content-text.imgS{
		float:none !important;
		clear:both !important;
	}
	.service-content .action{
		margin:0 auto;
	}
	.bullet-large{
		margin:30px 0;
	}
	#home-right,
	#home-left{
		width:100%;
	}
	.caption p{
		display:none;
	}
	.caption p.headline{
		display:block;
	}
	#contact-details{
		float:none;
		width:100%;
		clear:both;
		text-align:center;
		margin:0;
		padding-bottom:20px;
		}
	#contact-email{
		font-size:0.8em !important;
	}
	#catalogue{
		grid-template-columns: repeat(3, 1fr);
	}
	#product-featured .limit{
		grid-template-columns: repeat(2, 1fr);
	}
	#product-featured .catalogue-thumb{
		margin:0 auto;
	}
	#account{
		float:right;
	}

	.divider{
		display:none;
	}
	#social-icons{
		margin-right:10px;
	}
	div.first{
		display:block !important;
		}
	img.right{
		float:none !important;
	}
	#contact.slant-r{
		-webkit-clip-path:none;
		clip-path:none;
	}
	#contact{
		padding-bottom:50px;
	}
	#contact-form div,
	#contact-form input,
	#contact-form textarea{
		width:100% !important;
		margin-bottom:0;
	}
	#contact-form textarea{
		margin-top:20px !important;
		display: inline-block;
	}
	#contact-form div{
		padding:0 !important;
		margin:0 !important;
	}
	#contact input.submit{
		text-align:center;
		float:none;
	}
	#contact-information{
		float:none;
		max-width:100%;
		margin:40px;
	}
	.footer-col,
	.footer-col:first-of-type{
		width:50%;
		width:math(100%/2);
		min-height:auto;
	}
	#footer h4,
	#footer p{
		padding-right:30px;
	}
}
@media only screen and (min-width: 0px) and (max-width: 789px) {
	#blog-thumbs .limit{
		grid-template-columns:repeat(2,1fr);
	}
	#blog-thumbs .blog-thumb{
		margin:0 auto;
	}
	.content-text ul{
		column-count:2;
	}
	.banner-caption p,
	.banner-headline p{
		max-width:100% !important;
	}
	#banner,
	#slides,
	#banner #slides li{
		height:auto;
		overflow: initial;
		background:#E9F0F3;
	}
	.banner-caption p{
		min-width:100%;
		margin:initial !important;
	}
	#banner-wrap{
		border:0;
		margin-bottom:0;
	}
	.columns-3{
		columns:initial;
	}
	.content-text{
		border-top:0 !important;
	}
	.content-text.quote{
		border-radius:0;
		border:0;
		background:none;
	}
	#banner img{
		display:none !important;
	}
	#contact{
		float:none;
		max-width:80%;
		margin:50px auto;
	}
	#submenu{
		display:none;
	}
	#content-wrapper{
		padding-left:0;
	}
	#info{
		text-align:center;
		padding-left:0;
		padding-right:0;
	}
	#info h1{
		margin-left:0;
	}
	#breadcrumbs,
	#product-tags{
		clear:both;
		float:none;
		overflow:auto;
		display:block;
	}
	#catalogue{
		margin:0;
		grid-template-columns: repeat(2, 1fr);
	}
	#product-related{
		margin:0;
		padding:0;
	}
	#used{
		margin:0;
	}
	#footer{
		padding:30px;
	}
	#footer #menu{
		max-width: 100%;
		margin:0 auto;
		display:table;
		float:none;
	}
	#manufacturers{
		display:none;
	}
	#reviews{
		padding:50px 20px;
	}
}
@media only screen and (min-width: 0px) and (max-width: 640px) {
	.footer-col{
		width:100%;
		margin-right:0;
		padding:0;
	}
	.footer-col p,
	.footer-col:first-of-type,
	#footer-logo{
		margin-right:0;
		padding-right:0;
		width:100%;
	}
	.content-text ul{
		column-count:1;
	}
	#footer #menu ul li{
	display:table-row;
	position:relative;
	}
	.background-image{
		display:none;
	}
	.contact-wrap,
	.contact-wrap.covid{
		padding:0;
		background:none;
	}
	#contact{
		margin:0 auto !important;
		padding:30px;
	}
}
@media only screen and (min-width: 0px) and (max-width: 530px) {
	#blog-thumbs .limit{
		grid-template-columns:repeat(1,1fr);
	}
	#contact-details{
		clear:both;
		width:100%;
	}
	#catalogue{
		grid-template-columns: repeat(1, 1fr);
	}
	#content-first h1{
		text-align:center !important;
	}
#product-featured .limit{
		grid-template-columns: repeat(1, 1fr);
	}
	#ja-jobs-widget ul{
		columns:1 !important;
	}
}
@media only screen and (min-width: 0px) and (max-width: 410px) {
	#account{
		float:left;
		clear:both;
	}

}