@charset "UTF-8";
/* CSS Document */
/*********************************************************************************/
/* Below 1900px                                                                   */
/*********************************************************************************/
@media (max-width: 1900px) { 

	.wrapper {
		max-width: 1500px;
	}
	.contentwide .wrapperwide {
		max-width: 1500px;
	}
	#menuwrapper {
		padding-top: 0;
		width: 100%;
		max-width: 100%;
	}

}

/*********************************************************************************/
/* Below 1600px                                                                   */
/*********************************************************************************/
@media (max-width: 1600px) { 

	.wrapper {
		max-width: 1200px;
	}
	.contentwide .wrapperwide {
		max-width: 1200px;
	}
	.slider .captionwrapper .caption,
	#contentbanner .captionwrapper .caption {
		width: 40%;
	}
	.slider .captionwrapper .caption h1,
	.slider .captionwrapper .caption h2,
	#contentbanner .captionwrapper .caption h1,
	#contentbanner .captionwrapper .caption h2 {
		font-size: 1.75rem;
	}
	.slider .captionwrapper .caption h1 .subtitle,
	.slider .captionwrapper .caption h2 .subtitle,
	#contentbanner .captionwrapper .caption h1 .subtitle,
	#contentbanner .captionwrapper .caption h2 .subtitle {
		font-size: 1.5rem;
	}
	.sectionwrap .productpromo .product .image img {
		height: 175px;
	}
	#submenuwrap {
		width: 32%;
	}
	.contentcentre {
		width: 63%;
	}
	.content .mediawrapper,
	.content .mediawrapper.mediacentre {
		width: 90%;
		margin: 1rem 5%;
	}

}

/*********************************************************************************/
/* Below 1200px                                                                   */
/*********************************************************************************/
@media (max-width: 1200px) { /* 1200px */

	.wrapper {
		max-width: 1000px;
	}
	.contentwide .wrapperwide {
		max-width: 1000px;
	}
	#header #logo {
		width: 400px;
		height: 103px;
	}
	
	#header #menu ul li a, 
	#credentials ul li a {
		font-size: .875rem;
		padding: 1rem .5rem;
	}
	.contentform .formlayout li.halfwidth {
		width: 100%;
	}
	#credentials ul li .freepromo {
		font-size: 1rem;
	}
	.flexwrapper.flexstart .contentblock {
		width: 46%;
	}
	
}

/*********************************************************************************/
/* Below 1000px                                                                   */
/*********************************************************************************/
@media (max-width: 1000px) { /* 1000px */

	.wrapper {
		max-width: 960px;
	}
	.contentwide .wrapperwide {
		max-width: 960px;
	}
	.contentcentre .profilewrap .profilebanner.maxheight img {
		max-height: 400px;
	}
	.contentcentre.noside {
		margin: 0 0 2rem 0;
	}
	
}

/*********************************************************************************/
/* Below 960px                                                                   */
/*********************************************************************************/
@media (max-width: 960px) { /* 960px */

	.wrapper {
		max-width: 840px;
	}
	.contentwide .wrapperwide {
		max-width: 840px;
	}
	
	#header.homeheader {
		margin: 0;
	}
	#header #logo {
		float: none;
		margin: 1rem auto;
	}
	#topnav #left {
	    display: none;
	}
	#topnav #right {
	    text-align: center;
	}
	#topnav #credentials {
	float: none;
	display: inline-block;
	margin: 5px 0 0 0;
	}
	
	#header #menu {
		display: none;
	}
	.slicknav_menu {
		display:block;
		text-align: center;
	}

	#bannerwrap {
		display: block;
		float: left;
	}
	#bannerouter {
		float: left;
		width: 100%;
		margin: 0;
	}
	#bannerwrap.homebanner #banner {
	    width: 100%;
	    float: left;
	}
	#bannerwrap.homebanner #bannerpromo {
		float: left;
		width: 100%;
		margin: 0;
	}
	.slider .captionwrapper, 
	#contentbanner .captionwrapper {
		position: relative;
		max-width: none;
		width: 100%;
		float: left;
		margin: 0;
	}
	.slider .captionwrapper .caption, 
	#contentbanner .captionwrapper .caption {
		position: relative;
		width: 90%;
		float: left;
		margin: 0;
		padding: 1rem 5%;
		background: #39587F;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}
	
	#bannerwrap.homebanner #bannerpromo .textblock p {
		font-size: 2rem;
	}
	
	.content .flexrow .halfwidth,
	.contentflex .thirdwidth,
	.contentcentre .block50,
	.contentcentre .block50.pad {
	    width: 98%;
	    margin-bottom: 1rem;
	}

	.flexwrapper .contentblock {
		width: 98%;
	}
	
	.contentheader h1 {
	    font-size: 2rem;
	}
	
	#submenuwrap {
	    width: 100%;
	    margin: 0;
	}
	#submenuwrap .profileimg {
	    width: 60%;
	    padding: 1rem 20%;
	}
	#submenuwrap #submenu ul li {
	    font-size: 1rem;
	}
	.contentcentre {
	    width: 98%;
	}

	
}

/*********************************************************************************/
/* Below 840px                                                                   */
/*********************************************************************************/
@media (max-width: 840px) { /* 840px */

	.wrapper {
		max-width: 640px;
	}
	.contentwide .wrapperwide {
		max-width: 640px;
	}
	.contentcentre .profilewrap .profilebanner.maxheight img {
		max-height: 300px;
	}

	
}

/*********************************************************************************/
/* Below 640px                                                                   */
/*********************************************************************************/
@media (max-width: 640px) { /* 640px */

	.wrapper {
		max-width: 480px;
	}
	.contentwide .wrapperwide {
		max-width: 480px;
	}
	#credentials ul li .freepromo {
		width: 98%;
		padding: 1rem 1%;
		margin: 0;
	}
	#topnav,
	#topnav #right {
		height: auto;
	}
	#header #logo {
		width: 300px;
		height: 77px;
	}
	.flexwrapper.flexstart .contentblock {
		width: 96%;
		margin: 1rem 2%;
		padding: 1rem 2%;
	}
	.content .mediawrapper,
	.content .mediawrapper.mediacentre {
		width: 100%;
		margin: 1rem 0;
	}

	
}

/*********************************************************************************/
/* Below 480px                                                                   */
/*********************************************************************************/
@media (max-width: 480px) { /* 480px */

	.wrapper {
		max-width: 360px;
	}
	.contentwide .wrapperwide {
		max-width: 360px;
	}
	#credentials ul li.hideresp {
		display: none;
	}
	#credentials ul li .freepromo {
		float: left;
		width: 100%;
		padding: 1rem auto;
		text-align: center;
	}

	
}