/* FONTS
**************************************************************************************/

@media only screen and (max-width: 575.98px) {

	h2 {
		font-size: 3em;
	}

	p.lead {
		font-size: 1.8em;
	}

}


/* LAYOUT AND LAYOUT OPTIONS
**************************************************************************************/

@media only screen and (max-width: 767px) {

	body {
		padding-top:80px;
	}

	/* MAIN LAYOUT
	----------------------------------------------------------------------------------------------------*/

	/* FLEXBOX PRESETS */

	.flexbox-absolute-center {
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		flex-direction: column;
		-ms-flex-pack: center;
	  	justify-content: center;
	  	-ms-flex-align: center;
		align-items: center;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.flexbox-justified {
		-ms-flex-pack: distribute;
	  	justify-content: space-around;
	}

}


/* HEADER / HEADER NAVIGATION / HEADER SUB NAVIGATION
**************************************************************************************/

@media only screen and (max-width: 767px) {

	/* HEADER */

	#header {
		-webkit-transition: all 150ms;
		-moz-transition: all 150ms;
		transition: all 150ms;
	}	

	#header {
		height:80px;
	}

	#header section  {
		padding:10px 15px;
		height:auto;
	}

	#header a#logo {
		margin: 0 0 0 15px;
	}

	#header a#logo,
	#header a#logo img {
		width: 141px;
		height: 60px;
	}

	/* HEADER EXPAND BUTTON FOR MOBILE */

	a#expand-nav {
		display:block;
		margin:20px 0 0;
	}

	/* HEADER NAVIGATION */

	ul#header-navigation {
		position:absolute;
		top:80px;
		left:0;
		display:block;
	    width:100%;
	    max-width:100%;
	    height:auto;
	    margin:0;
	    padding:10px 0;
	    background-color: rgba(255,255,255,0.92);
	    opacity:0;
	    overflow-y:scroll;
	    -webkit-transform: scaleY(0);
		-moz-transform: scaleY(0);
		transform: scaleY(0);
		-webkit-overflow-scrolling: touch;
		-webkit-transform-origin: top;
		-moz-transform-origin: top;
		transform-origin: top;
		-webkit-box-shadow: 0 6px 6px -6px rgba(0,0,0,0.2);
	    -moz-box-shadow: 0 6px 6px -6px rgba(0,0,0,0.2);
	    box-shadow: 0 6px 6px -6px rgba(0,0,0,0.2);
		z-index:9999;
	}

	ul#header-navigation:before {
		content: "";
		position:absolute;
		top:0;
		left:0;
		display:block;
		width:100%;
		height:10px;
		-webkit-box-shadow: inset 0 6px 6px -6px rgba(0,0,0,0.2);
	    -moz-box-shadow: inset 0 6px 6px -6px rgba(0,0,0,0.2);
	    box-shadow: inset 0 6px 6px -6px rgba(0,0,0,0.2);
	} 

	ul#header-navigation li {
		text-align:center;
	} 

	ul#header-navigation a {
		pointer-events: none;
	}

	#header.mobile-nav-active ul#header-navigation {
		opacity:1;
		-webkit-transform: scaleY(1);
		-moz-transform: scaleY(1);
		transform: scaleY(1);
	}

	#header.mobile-nav-active ul#header-navigation a {
		pointer-events: inherit;
	}

}

@media only screen and (max-width: 575.98px) {


}

/* CONTENT
**************************************************************************************/

@media only screen and (max-width: 1439px) {

	/* CONTENT - GENERAL
	----------------------------------------------------------------------------------------------------*/

	/* LINKS AND BUTTONS */

	.popup-links {
		display:none;
	}

}

@media only screen and (max-width: 1139px) {

	/* SECTIONS - HOME
	----------------------------------------------------------------------------------------------------*/

	#home h1 {
		font-size:7vw;
	}

	/* SECTIONS - ABOUT
	----------------------------------------------------------------------------------------------------*/

	#about-content div:first-child {
	    padding: 3% 25px;
	}

	#about-content p {
		font-size:1.9vw;
	}


}

@media screen and (max-width: 959px) {

	/* SECTIONS - BONLOK FITTINGS
	----------------------------------------------------------------------------------------------------*/

	#bonlok-fittings-content div {
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
		padding:0 2%;
	}


	/* SECTIONS - BONLOK TESTING
	----------------------------------------------------------------------------------------------------*/

	#bonlok-testing:before {
		display:none;
	}

	#bonlok-testing section {
		padding: 0;
	}

	#bonlok-testing-content .left-column,
	#bonlok-testing-content .right-column {
		-ms-flex: 0 0 100%;
	    flex: 0 0 100%;
	    max-width: 100%;
	    padding:4.5rem 15px;
	}

	#bonlok-testing-content .left-column img {
		float:left;
		margin-right:20px;
	}

	#bonlok-testing-content .left-column .text-wrapper {
		padding:10px 0;
	}

	#bonlok-testing-content .right-column {
		background-color:#000000;
	}

}

@media only screen and (max-width: 767px) {

	/* FLEXBOX PRESETS */

	.flexbox-divide-two > div {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* CONTENT - GENERAL
	----------------------------------------------------------------------------------------------------*/

	/* BOX - TEXT AND ICON */

	.box {
		-ms-flex: 0 0 46%;
		flex: 0 0 46%;
		max-width: 46%;
	    margin-bottom: 1rem;
	}

	/* PHOTO BOX */

	.photo-box {
		margin-bottom:0.3rem;
		-ms-flex: 0 0 49%;
		flex: 0 0 49%;
		max-width: 49%;
	}

	/* SECTIONS - HOME
	----------------------------------------------------------------------------------------------------*/

	#home {
		background:none;
	}

	#home-intro {
		background-image: url(../images/bg-home.jpg);
		background-repeat: no-repeat;
		background-position: center top;
		background-size:cover;
		padding: 4.5rem 15px;
	}

	#home-features {
		padding: 2rem 15px;
	}

	/* SECTIONS - ABOUT
	----------------------------------------------------------------------------------------------------*/

	#about section {
	    padding: 2rem 15px 0;
	}

	#about-content div:first-child {
	    padding: 20px 25px 30px;
	}

	#about-content p {
		font-size:2.1em;
		text-align:center;
	}

	/* TECHNICAL SPECIFICATIONS
	----------------------------------------------------------------------------------------------------*/

	#technical-specifications-content div:first-child,
	#technical-specifications-content div:last-child {
		padding:0;
	}

	/* SECTIONS - BENEFITS
	----------------------------------------------------------------------------------------------------*/

	#benefits-content div {
		-ms-flex: 0 0 46%;
		flex: 0 0 46%;
		max-width: 46%;
	}

	/* SECTIONS - PARTNERS
	----------------------------------------------------------------------------------------------------*/

	#partners-content {
		-ms-flex-pack: center;
  		justify-content: center;
	}

	#partners-content img {
		-ms-flex: 0 0 33%;
		flex: 0 0 33%;
		max-width: 33%;
	}

	/* SECTIONS - GALLERY
	----------------------------------------------------------------------------------------------------*/

	#gallery section {
	    padding: 4rem 15px 4.5rem;
	}

	/* SECTIONS - BONLOK TESTING
	----------------------------------------------------------------------------------------------------*/

	#bonlok-testing-content .left-column img {
		float:none;
		margin:0 0 1rem;
	}

	/* SECTIONS - ENQUIRY
	----------------------------------------------------------------------------------------------------*/

	#enquiry section {
	    padding: 4rem 15px 4.5rem;
	}

}

@media only screen and (max-width: 575.98px) {

	/* CONTENT - GENERAL
	----------------------------------------------------------------------------------------------------*/

	/* BOX - TEXT AND ICON */

	.box {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	    margin-bottom: 1rem;
	}

	/* PHOTO BOX */

	.photo-box {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* ICON BOX */

	.icon-box {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
	
	/* SECTIONS - HOME
	----------------------------------------------------------------------------------------------------*/

	#home h1 {
		font-size:8vw;
	}

	#home p.lead {
		font-size:4vw;
	}

	#home-intro {
		padding: 3.5rem 15px 4rem;
	}

	#home-features {
		padding: 1rem 15px 2rem;
	}

	/* SECTIONS - ABOUT
	----------------------------------------------------------------------------------------------------*/

	#about-content p {
		font-size: 1.8em;
	}

	/* SECTIONS - BONLOK VIDEO
	----------------------------------------------------------------------------------------------------*/

	#bonlok-video section {
		padding: 0 15px 2rem;
	}

	/* SECTIONS - BONLOK FITTINGS
	----------------------------------------------------------------------------------------------------*/

	#bonlok-fittings-content div {
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	/* SECTIONS - BENEFITS
	----------------------------------------------------------------------------------------------------*/

	#benefits-content div {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* SECTIONS - BONLOK TESTING
	----------------------------------------------------------------------------------------------------*/

	#bonlok-testing-content .left-column,
	#bonlok-testing-content .right-column {
	    padding:4rem 15px;
	}

	/* SECTIONS - PARTNERS
	----------------------------------------------------------------------------------------------------*/

	#partners-content {
		-ms-flex-pack: justify;
  		justify-content: space-between;
	}

	#partners-content img {
		-ms-flex: 0 0 45%;
		flex: 0 0 45%;
		max-width: 45%;
		margin-bottom: 1rem;
	}

	/* CONTENT - FORMS
	----------------------------------------------------------------------------------------------------*/

	#ajax-form-container .left-column {
		margin-bottom:0;
	}

	#bonlok-testing-content .left-column img {
		width:100%;
		height:auto;
	}

	#ajax-form-container .right-column {
		margin-bottom:10px;
	}

	#ajax-form-container .left-column,
	#ajax-form-container .right-column {
		width:100%;	
	}

	/* CONTENT - FOOTER
	----------------------------------------------------------------------------------------------------*/

	/* FOOTER COPYRIGHT */

	#footer p {
		line-height:1.2;
	}

}

@media only screen and (max-width: 480px) {

	/* SECTIONS - BONLOK FITTINGS
	----------------------------------------------------------------------------------------------------*/

	#bonlok-fittings-content {
		-ms-flex-pack: justify;
  		justify-content: space-between;
	}

	#bonlok-fittings-content div {
		-ms-flex: 0 0 48%;
		flex: 0 0 48%;
		max-width: 48%;
		padding:0;
	}

}