/* General Demo Style */
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);

@font-face {
	font-family: 'codropsicons';
	src:url('../fonts/codropsicons/codropsicons.eot');
	src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
url('../fonts/codropsicons/codropsicons.woff') format('woff'),
url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Sticky footer styles
-------------------------------------------------- */

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by its height */
  margin: 0 auto -40px;
  /* Pad bottom by footer height */
  padding: 0 0 40px;
}

/* Set the fixed height of the footer here */
#footer {
	height: 40px;
}


/* Custom site CSS
-------------------------------------------------- */

#wrap > .container {
  padding: 25px 15px 0;
}

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 15px; padding: 0; margin: 0;}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

body {
	font-family: 'Lato', Calibri, Arial, sans-serif !important;
	background-color: #FBFBFB;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: 'Lato', Calibri, Arial, sans-serif !important;
}
h2 {
	margin-bottom: 0.1em;
	text-align: center;
}

a {
	color: #1F60AD;
	text-decoration: none;
}

a:hover {
	color: #000;
}

.caption {
	margin-top: 0px;
	margin-bottom: 0px;
	color: #4F4F4F;
	padding-top: 10px;
	border-top: thin dotted #DDDDDD;
	font-style: normal;
}



.colwhite{
	background-color: #FFFFFF;
	border-radius: 8px;
}
.row.row-offcanvas.row-offcanvas-right .col-xs-12.col-sm-9 a, .row.row-offcanvas.row-offcanvas-right .col-xs-12.col-sm-9 a:visited{
	color: #286BD7;
}
.row.row-offcanvas.row-offcanvas-right .col-xs-12.col-sm-9 a:hover, .row.row-offcanvas.row-offcanvas-right .col-xs-12.col-sm-9 a:active {
	color: #06F;
}
.row.row-offcanvas.row-offcanvas-right .col-xs-12.col-sm-9 li.active a, .row.row-offcanvas.row-offcanvas-right .col-xs-12.col-sm-9 li.active a:hover{
	color: #CF3437 !important;
}

.main,
.title-container > header {
	width: 100%;
	margin: 0 auto;
	padding: 2em 0;
}
.main {
	max-width: 82.667em;
	min-height: 20em;
}
/* minified, smaller version of coloured buttons */
.main-mini {
	max-width: 82.667em;
	min-height: 3em;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

/* main heading (large) */
.title-container > header {
	text-align: left;
	font-size: 16px;
	padding: 3em 1em 2em;
	
		 
}
/* page heading (tighter) */
.title-container > header.page {
	padding: 1.3em 0.7em 1.2em;
	color: #E55D53;
}

.title-container > header h1 {
	font-size: 2.625em;
	line-height: 1.3;
	margin: 0;
	font-weight: 300;
	font-family: 'Lato', Calibri, Arial, sans-serif !important;
	color: #E55D53;
}

.title-container > header h1 a {
	text-decoration:none;
	color: #89867e;
}
.title-container > header h1 a:hover {
	text-decoration:none;
	color: #69665e;
}
/* page heading (tighter) */
.title-container > header.page h1{
	line-height: 1.2;
	padding-left: 40px;
	padding-right: 40px;
}
.title-container > header.page h1 a {
	color: #FFFFFF;
	;
}
.title-container > header.page h1 a:hover {
	text-decoration:none;
	color: #79766e;
}

.title-container > header span {
	display: block;
	font-size: 60%;
	color: #ceccc6;
	padding: 0 0 0.6em 0.1em;
}

/* Header Style */
.codrops-top {
	text-transform: uppercase;
	position: relative;
	width: 100%;
	font-size: 0.9em;
	line-height: 2.2;
}

.codrops-top a {
	padding: 0 1em;
	letter-spacing: 0.1em;
	color: #373737;
	display: inline-block;
	font-weight: bold;
}

.codrops-top a:hover {
	color: #E99F8D;
	text-decoration: none;	
}

.codrops-top span.right {
	float: right;
}

.codrops-top span.right a {
	float: left;
	display: block;
}

.codrops-icon:before {
	font-family: 'codropsicons';
	margin: 0 4px;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.codrops-icon-drop:before {
	content: "\e001";
}
.codrops-icon-prev:before {
	content: "\e004";
}
.codrops-icon-archive:before {
	content: "\e002";
}
.codrops-icon-next:before {
	content: "\e000";
}
.codrops-icon-about:before {
	content: "\e003";
}
#imageSwap {
	margin-bottom: 10px;
	margin-top: 5px;
}
h3 {
	color: #A5381E;
	font-size: 2.0em;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 18px;
}
h5 {
	font-size: 1.2em;
	margin-top: 15px;
	color: #42290D;	
}
.infoBox {
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	margin-top: 5px;
	margin-bottom: 10px;
	background-color: #D9EDF7;
	color: #154964;
}

.title-container {
	background-color: #E55D53;
}
.page-header {
	background-color: #C5E3FA;
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 0.5em;
	padding-bottom: 1em;
	margin-top: 0px;
	margin-bottom: 0em;
	margin-right: 0px;
	margin-left: 0px;
}
.page-header h2 {
	margin-bottom: 20px;
}
.khp-logo {
	margin-right: 1em;
}
#sidebar .sidebar-nav.well {
	border-radius: 0px;
	border: none;
	background-color: #3A3A3A;
	
}
#default {
	background-color: #F9F9F9;
	width: 100%;
	text-align: center;
	position: relative;
	padding-top: 20px;
	padding-right: 40px;
	padding-left: 40px;
	padding-bottom: 20px;
	margin-right: 0px;
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	border: thin dotted #A9A9A9;
}
#sec01 {
	background-color: #EAF5FB;
	width: 100%;
	text-align: center;
	position: relative;
	padding-top: 20px;
	padding-right: 40px;
	padding-left: 40px;
	padding-bottom: 20px;
	margin-right: 0px;
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}
#sec02 {
	background-color: #FDF9ED;
	width: 100%;
	text-align: left;
	position: relative;
	padding-top: 20px;
	padding-right: 40px;
	padding-left: 40px;
	padding-bottom: 20px;
	margin-right: 0px;
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}
#sec03 {
	background-color: #840000;
	width: 100%;
	text-align: center;
	position: relative;
	padding-top: 20px;
	padding-right: 40px;
	padding-left: 40px;
	padding-bottom: 20px;
	margin-right: 0px;
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}
#sec04 {
	background-color: #F0D37C;
	width: 100%;
	text-align: center;
	position: relative;
	padding-top: 20px;
	padding-right: 40px;
	padding-left: 40px;
	padding-bottom: 20px;
	margin-right: 0px;
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	color: #222222;
}
#sec05 {
	background-color: #428BCA;
	width: 100%;
	text-align: center;
	position: relative;
	padding-top: 20px;
	padding-right: 40px;
	padding-left: 40px;
	padding-bottom: 20px;
	margin-right: 0px;
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	color: #FFFFFF;
}
.transRow {
	width: 100%;
	text-align: center;
	position: relative;
	padding-top: 20px;
	padding-right: 40px;
	padding-left: 40px;
	padding-bottom: 20px;
	margin-right: 0px;
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}
.orange {
	background-color: #DD7E15;
}

.purple {
	background-color: #843275;
}
.blue {
	background-color: #3998F7;
}
.green {
	background-color: #279A56;
}
.yellow {
	background-color: #DFAF1D;
}
.red {
	background-color: #98110E;
}

.greenBox {
	position: relative;
	padding: 5px 5px;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 15px;
	color: #fff;
	background: #3BB084;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#b8db29), to(#5a8f00));
	background: -moz-linear-gradient(#3BB084, #1F5A44);
	background: -o-linear-gradient(#3BB084, #1F5A44);
	background: linear-gradient(#3BB084, #1F5A44);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.blueBox {
	position: relative;
	padding: 5px 5px;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 15px;
	color: #fff;
	background: #00468C;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#b8db29), to(#00468C));
	background: -moz-linear-gradient(#2693FF, #00468C);
	background: -o-linear-gradient(#2693FF, #00468C);
	background: linear-gradient(#2693FF, #00468C);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

}
.yellowBox {
	position: relative;
	padding: 5px 5px;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 15px;
	color: #fff;
	background: #D9A300;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#b8db29), to(#D9A300));
	background: -moz-linear-gradient(#FFD24D, #D9A300);
	background: -o-linear-gradient(#FFD24D, #D9A300);
	background: linear-gradient(#FFD24D, #D9A300);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

}
.redBox {
	position: relative;
	padding: 5px 5px;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 15px;
	color: #fff;
	background: #B22722;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#b8db29), to(#B22722));
	background: -moz-linear-gradient(#E8514A, #B22722);
	background: -o-linear-gradient(#E8514A, #B22722);
	background: linear-gradient(#E8514A, #B22722);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

}
.redBG {
	position: relative;
	padding: 5px 5px;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 15px;
	color: #fff;
	background: #B22722;
	}

.blueBubble .left{
margin-left: 40px;
background: #2e88c4;
}
.blueBubble{
	position: relative;
padding: 15px;
margin: 1em 0 3em;
color: #fff;
background: #075698;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));
background: -moz-linear-gradient(#2e88c4, #075698);
background: -o-linear-gradient(#2e88c4, #075698);
background: linear-gradient(#2e88c4, #075698);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}
.blueBubble.left:after {
top: 16px;
left: -40px;
bottom: auto;
border-width: 15px 40px 0 0;
border-color: transparent #267EBB;
}
.blueBubble:after {
content: "";
position: absolute;
bottom: -20px;
left: 50px;
border-width: 20px 0 0 20px;
border-style: solid;
border-color: #075698 transparent;
display: block;
width: 0;
}




.greenBubble .left{
margin-left: 40px;
background: #5a8f00;
}
.greenBubble{
	position: relative;
padding: 15px;
margin: 1em 0 3em;
color: #fff;
background: #5a8f00;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#b8db29), to(#5a8f00));
background: -moz-linear-gradient(#b8db29, #5a8f00);
background: -o-linear-gradient(#b8db29, #5a8f00);
background: linear-gradient(#b8db29, #5a8f00);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}
.greenBubble.left:after {
top: 16px;
left: -40px;
bottom: auto;
border-width: 15px 40px 0 0;
border-color: transparent #A0C81E;
}
.greenBubble:after {
content: "";
position: absolute;
bottom: -20px;
left: 50px;
border-width: 20px 0 0 20px;
border-style: solid;
border-color: #A0C81E transparent;
display: block;
width: 0;
}


.yellowBubble .left{
margin-left: 40px;
background: #D9A300;
}
.yellowBubble{
	position: relative;
padding: 15px;
margin: 1em 0 3em;
color: #fff;
background: #D9A300;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#FFD24D), to(#D9A300));
background: -moz-linear-gradient(#FFD24D, #D9A300);
background: -o-linear-gradient(#FFD24D, #D9A300);
background: linear-gradient(#FFD24D, #D9A300);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}
.yellowBubble.left:after {
top: 16px;
left: -40px;
bottom: auto;
border-width: 15px 40px 0 0;
border-color: transparent #F7C83C;
}
.yellowBubble:after {
content: "";
position: absolute;
bottom: -20px;
left: 50px;
border-width: 20px 0 0 20px;
border-style: solid;
border-color: #D9A300 transparent;
display: block;
width: 0;
}


.redBubble .left{
margin-left: 40px;
background: #B22722;
}
.redBubble{
	position: relative;
padding: 15px;
margin: 1em 0 3em;
color: #fff;
background: #B22722;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#E8514A), to(#B22722));
background: -moz-linear-gradient(#E8514A, #B22722);
background: -o-linear-gradient(#E8514A, #B22722);
background: linear-gradient(#E8514A, #B22722);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}
.redBubble.left:after {
top: 16px;
left: -40px;
bottom: auto;
border-width: 15px 40px 0 0;
border-color: transparent #DD4942;
}
.redBubble:after {
content: "";
position: absolute;
bottom: -20px;
left: 50px;
border-width: 20px 0 0 20px;
border-style: solid;
border-color: #DD4942 transparent;
display: block;
width: 0;
}

.purpleBubble .left{
margin-left: 40px;
background: #843275;
}
.purpleBubble{
	position: relative;
padding: 15px;
margin: 1em 0 3em;
color: #fff;
background: #843275;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#D188C4), to(#843275));
background: -moz-linear-gradient(#D188C4, #843275);
background: -o-linear-gradient(#D188C4, #843275);
background: linear-gradient(#D188C4, #843275);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;}
.purpleBubble.left:after {
top: 16px;
left: -40px;
bottom: auto;
border-width: 15px 40px 0 0;
border-color: transparent #C075B2;
}
.purpleBubble:after {
content: "";
position: absolute;
bottom: -20px;
left: 50px;
border-width: 20px 0 0 20px;
border-style: solid;
border-color: #843275 transparent;
display: block;
width: 0;
}



.whiteBubble .left{
	margin-left: 20px;
	background-color: #FFFFFF;
}
.whiteBubble .right{
	margin-right: 20px;
	background-color: #FFFFFF;
}
.whiteBubble{
	position: relative;
	padding: 15px;
	margin-top: 1em;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 1em;
	color: #2A2A2A;
	background: #FFFFFF;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#FFFFFF), to(#FFFFFF));
	background: -moz-linear-gradient(#FFFFFF, #FFFFFF);
	background: -o-linear-gradient(#FFFFFF, #FFFFFF);
	background: linear-gradient(#FFFFFF, #FFFFFF);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.whiteBubble.left:after {
top: 16px;
left: -20px;
bottom: auto;
border-width: 20px 20px 0 0;
border-color: transparent #FFFFFF;
}
.whiteBubble.right:after {
top: 16px;
left: 233px;
bottom: auto;
border-width: 20px 0 0 20px;
border-color: transparent #FFFFFF;
}
.whiteBubble:after {
content: "";
position: absolute;
bottom: -20px;
left: 50px;
border-width: 20px 0 0 20px;
border-style: solid;
border-color: #FFFFFF transparent;
display: block;
width: 0;
}
.whiteBubble.bottomRight:after {
content: "";
position: absolute;
bottom: -20px;
left: 280px;
border-width: 20px 0 0 20px;
border-style: solid;
border-color: #FFFFFF transparent;
display: block;
width: 0;
}


.greyBubble .left{
	margin-left: 40px;
	background-color: #F0F0F0;
}
.greyBubble{
	position: relative;
	padding: 15px;
	margin: 1em 0 3em;
	color: #2A2A2A;
	background: #F0F0F0;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#F0F0F0), to(#F0F0F0));
	background: -moz-linear-gradient(#F0F0F0, #F0F0F0);
	background: -o-linear-gradient(#F0F0F0, #F0F0F0);
	background: linear-gradient(#F0F0F0, #F0F0F0);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.greyBubble.left:after {
top: 16px;
left: -40px;
bottom: auto;
border-width: 15px 40px 0 0;
border-color: transparent #F0F0F0;
}
.greyBubble:after {
content: "";
position: absolute;
bottom: -20px;
left: 50px;
border-width: 20px 0 0 20px;
border-style: solid;
border-color: #F0F0F0 transparent;
display: block;
width: 0;
}




.greenBubbleRound {
position: relative;
width: 270px;
padding: 50px 40px;
margin: 1em auto 50px;
text-align: center;
color: #fff;
background: #5a8f00;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#b8db29), to(#5a8f00));
background: -moz-linear-gradient(#b8db29, #5a8f00);
background: -o-linear-gradient(#b8db29, #5a8f00);
background: linear-gradient(#b8db29, #5a8f00);
-webkit-border-top-left-radius: 220px 120px;
-webkit-border-top-right-radius: 220px 120px;
-webkit-border-bottom-right-radius: 220px 120px;
-webkit-border-bottom-left-radius: 220px 120px;
-moz-border-radius: 220px / 120px;
border-radius: 220px / 120px;
}

.greenBubbleRound:after {
.oval-speech:after {
content: "";
position: absolute;
z-index: -1;
bottom: -30px;
right: 50%;
width: 60px;
height: 30px;
background: #fff;
-webkit-border-bottom-right-radius: 40px 50px;
-moz-border-radius-bottomright: 40px 50px;
border-bottom-right-radius: 40px 50px;
-webkit-transform: translate(-30px, -2px);
-moz-transform: translate(-30px, -2px);
-ms-transform: translate(-30px, -2px);
-o-transform: translate(-30px, -2px);
transform: translate(-30px, -2px);
}
}

.sidebar-nav {
	background-color: #434343;
}

.img-centre {
	margin-left: auto;
	margin-right: auto;
}

.panel-primary{
	border:none;}
.panel-heading .panel-title {
	color: #FFFFFF;
	font-weight: bold;
	font-size: large;
	cursor:pointer;
}
/* Accordion Panel fixes  
provides active and hover state improvements to UI
*/
.panel-title{
         color:#333;
}
.panel-title.hover{
	color: #282828;
}
/*
.panel-heading{
         background-color: #f5f5f5;
}
.panel-heading.active, .panel-heading.active.hover{
         background-color: #2A587F;
}
.panel-heading.hover{
	background-color: #C7C7C7;
	cursor: pointer;
}
.panel-heading.active .panel-title, .panel-heading.active.hover .panel-title{
         color:#fff;
}*/
/* \end
Accordion Panel fixes  
*/
.primary{
	background-color: #C9E3FC;
	border: thin solid #83BEF9;
}
.panel.panel-primary .panel-body {
	background-color: #DEEDFD;	
}
.panel.panel-primary .panel-body .img-responsive.img-circle {
	background-color: #428BCA;
	margin-top: 5px;
	margin-bottom: 15px;
}
.panel-danger{
	border:none;}
.panel.panel-danger .panel-heading {
	background-color: #B31511;
}
.panel-danger>.panel-heading {
color: #b94a48;
background-color: #b94a48;
border-color: #b94a48;
}
.panel.panel-danger .panel-body {
	background-color: #FAD2D1;
}
.panel.panel-danger .panel-body .img-responsive.img-circle {
	background-color: #B31511;
	margin-top: 5px;
	margin-bottom: 15px;
}
.panel-success{
	border:none;}
.panel.panel-success .panel-heading {
	background-color: #279A56;
}
.panel.panel-success .panel-body {
	background-color: #EEFAF3;
}
.panel.panel-success .panel-body .img-responsive.img-circle {
	background-color: #279A56;
	margin-top: 5px;
	margin-bottom: 15px;
}
.panel-info{
	border:none;}
.panel.panel-info .panel-heading {
	background-color: #DFAF1D;
}
.panel-info>.panel-heading {
background-color: #DFAF1D;
border-color: #DFAF1D;
}
.panel.panel-info .panel-body {
	background-color: #F3E1A8;	
}
.panel.panel-info .panel-body .img-responsive.img-circle {
	background-color: #DFAF1D;
	margin-top: 5px;
	margin-bottom: 15px;
}
.table.table-left-text {
	text-align: left;
}
tbody .tb-row-green {
	background-color: #DBF5E6;
}
tbody .tb-row-red {
	background-color: #B31511;
}
tbody .tb-row-redLight {
	background-color: #F7B3B1;
}
tbody .tb-row-blue {
	background-color: #3877AD;
}
tbody .tb-row-yellow {
	background-color: #F7EDCB;
}
tbody .tb-row-yellowDark {
	background-color: #DFAF1D;
}
tbody .tb-row-yellowLight {
	background-color: #F3E1A8;
}
tbody .tb-row-drk {
	background-color: #21211E;
	color: #FFFFFF;
	font-size:x-large;
}
tbody .tb-row-pale {
	background-color: #E9E9E9;
	color: #FFFFFF;
	font-size: x-large;
}
.alert-success {
	margin-top: 10px;
	margin-bottom: 5px;
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 10px;
	padding-left: 5px;
}
.allCaps {
	font-variant: small-caps;
}
.whiteTxt {
	color: #FFFFFF;
}
.textLarge {
	font-size: 36px;
}
.textMedium {
	font-size: 30px;
}
#sec03 h3 {
	color: #FFFFFF;
}
#sec03 p {
	text-align: left;
	
}
#sec03 .box01 {
	background-color: #F5F4F2;
	color: #161616;
}
#sec03 .box01 p {
	color: #1A1A1A;
}
.noTopBottomMargin {
	margin-top: 0px;
	margin-bottom: 0px;
}
.quote {
	font-style: italic;
	font-weight: bold;
	color: #585858;
}
.box {
	background-color: #FFFFFF;
}
.strong {
	font-weight: bold;
}
.well h4 {
	color: #FFFFFF;
	font-size: x-large;
}
.page-header.askHeader {
	border-bottom: thick solid #DD7E15;
	background-color: #EEAF69;
}
.page-header.assessHeader {
	border-bottom: thick solid #843275;
	background-color: #D797CB;
}
.page-header.adviseHeader {
	border-bottom: thick solid #3998F7;
	background-color: #82BEF9;
}
.page-header.agreeHeader {
	border-bottom: thick solid #279A56;
	background-color: #84E0AA;
}
.panel-body p a {
	color: #0F72C3;
}

.page-header.arrangeHeader {
	border-bottom: thick solid #98110E;
	background-color: #F6AEAD;
}


/*
 * To see in action, go to http://jsfiddle.net/seydoggy/9jv5e8d1/
 */
.panel-horizontal {
    display:table;
    width:100%;
}
.panel-horizontal > .panel-heading, .panel.panel-horizontal > .panel-body, .panel.panel-horizontal > .panel-footer {
    display:table-cell;
}
.panel-horizontal > .panel-heading, .panel.panel-horizontal > .panel-footer {
    width: 25%;
    border:0;
    vertical-align: middle;
}
.panel-horizontal > .panel-heading {
    border-right: 1px solid #ddd;
    border-top-right-radius: 0;
    border-bottom-left-radius: 4px;
}
.panel-horizontal > .panel-footer {
    border-left: 1px solid #ddd;
    border-top-left-radius: 0;
    border-bottom-right-radius: 4px;
}
.textBlack {
	color: #191919;
}
.textWhite {
	color: #FFFFFF;
}

.panel-body.text-left p a {
}
.modal-content .modal-header {
	color: #262626;
}
.modal-content .modal-header #myModalLabel {
	color: #333333;
}
tbody tr th {
	font-weight: bold;
	color: #FFFFFF;
	background-color: #3998F7;

}
#sec05 .row .marginBottom {
}
.table .tb-row-drk {
	background-color: #2B2B2B;
}
.borderBox {
	border: thin dotted #6D6D6D;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	margin-bottom: 5px;
	margin-top: 5px;
}
.whiteLinks a {
	color: #F9F9F9;
}
.whiteLinks li a {
	color: #F9F9F9;
}
.whiteBg {
	background-color: #FFFFFF;
}
.panel-body h4 {
	border-bottom: thin dotted #FFFFFF;
	font-weight: bold;
	margin-bottom: 12px;
	margin-top: 18px;
	padding-bottom: 6px;
}
.infoText .glyphicon {
	color: #E55D53;
	font-size: 15px;
	margin-top: 5px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 10px;
}
.infoText {
	color: #D02B20;
	border: thin dotted #F1AEAA;
	padding-left: 10px;
	padding-top: 5px;
	padding-right: 10px;
	font-size: small;
}

h4 {
	font-weight: bold;
}
.caseStudy {
	background-color: #840000;
	color: #FFFFFF;
}
.caseStudy h4 {
	color: #FFFFFF;
}
.strip {
	border: medium solid #0D0C0C;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;

}
.yellowStrip {
	background-image: url(../module03/brief-intervention/images/yellow-bg-strip.png);
}
.blueStrip {
	background-image: url(../module03/brief-intervention/images/blue-bg-strip.png);
}
.btn-yellow {
	background-color: #F5E785;
	color: #000000;
	border: medium solid #333333;
	margin-bottom: 5px;
}
.btn-yellow:hover {
	background-color: #E1C720;
	color: #000000;
	border: medium solid #030303;
}
.btn-yellow:focus {
	background-color: #E1C720;
	color: #000000;
	border: medium solid #030303;
}
.img-centre {
	text-align: center;
}
.formTitle {
	font-size: large;
	color: #FFFFFF;
	background-color: #ADAEAF;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
}
.whiteLinks {
	color: #F8F3F3;
	text-decoration: underline;
}
.assistHeader {
	background-color: #EBCB69;
	border-bottom: thick solid #DFAF1D;
}
.greyBg {
	background-color: #E7E7E7;
}
.boxRed {
	background-color: #FDDEDE;
}

.caseStudyTab a{
	color: #A52218;

}
.topTitle {
	background-color: #212020;
}
.panel.panel-default {
}
.panel.panel-default .panel-heading {
	background-color: #A6A6A6;
}
.tabbable .tab-content {

}
.tabbable {
}
.tab-pane {
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
}
.lightYellow {
	background-color: #FBF6E5;
}












































































@media (min-width: 768px) {
	.khp-logo {
		display: block;
	}
	.khp-logo img {
		width: 345px;
	}
	.navbar-brand {
		padding: 15px;
	}
	
}
@media (min-width: 992px) {
	.khp-logo img {
		width: 410px;
	}
}
@media (min-width: 1200px) {
	.khp-logo img {
		width: 610px;
	}
	.khp-logo {
		margin: 0px 0 0 0;
	}
}
.navbar-header .moduleLink {
	color: #E55D53;
	
}










@media screen and (max-width: 32.438em) { 
	.codrops-icon span {
		display: none;
	}
.nav-stacked.ac-site-sidenav.panel-body {
	border-top-width: thin;
}

	.title-container > header {
		font-size: 75%;
	}
	.main {
		min-height: 5em;
	}
	.main-mini {
		min-height: 2em;
	}
}

/* style search box */
.form-search {
max-width: 330px;
padding: 15px;
margin: 0 auto;
}

/* style pagination */
#pageNav{
	margin-top:15px;
	text-align:center !important;
}

/* style footer */
.container .credit {
  margin: 20px 0;
}

#footer > .container {
  padding-left: 15px;
  padding-right: 15px;
}
#footer p{
	margin-bottom:0 !important;
}
#footer p{
	margin-top:13px !important;
}
#footer a{
	color:#666;
}
#footer a:hover, #footer a:active{
	color:#444;
	text-decoration:underline;
}


/* panels */


.panel-success {
	border-color: #52AE79;
}

.panel-success > .panel-heading {
	color: #FFFFFF;
	background-color: #279A56;
	border-color: #52AE79;
}

.panel-success > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #dddddd;
}

.panel-success > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #dddddd;
}


/* sidebar menu */
.ac-site-sidenav .glyphicon-plus, .ac-site-sidenav .glyphicon-minus {
float: right;
margin-top: 2px;
margin-right: -6px;
opacity: .25;}

accordion-inner {
	border: thin solid #BEBEBE;
}

.sidebar-nav{
	padding: 0;
	
	background-color: #3C3C3C;
	margin-bottom:20px;
	border:1px solid thin #e3e3e3;
	
}
.nav > li.navTitle {
	padding: 10px 15px;
	text-align:right;
}
.sidebar-nav .nav > li {
	border-bottom:1px solid #E7E7E7;
}
.sidebar-nav .nav > li.active {
	color: #286BD7;
	background-color: rgb(243, 243, 245)
}
.sidebar-nav .nav > li a {
	color: #EDF2FB
}
.sidebar-nav .nav > li.active a, .sidebar-nav .nav > li.active a:visited, .sidebar-nav .nav > li.active a:hover{
	color: #FFFFFF;
	background-color: #C5291D;
	font-weight: bold;
}
.sidebar-nav .nav > li.activeTitle a, .sidebar-nav .nav > li.activeTitle a:visited, .sidebar-nav .nav > li.activeTitle a:hover{
	color: #FFFFFF;
	background-color: #000000;
	font-weight: bold;
}
.sidebar-nav .nav > li.title a, .sidebar-nav .nav > li.title a:visited, .sidebar-nav .nav > li.title a:hover{
	color: #E9E9E9;
	background-color: #161717;
	font-weight: bold;
}
.nav > li.navTitle{
	font-family: Lato, Calibri, Arial, sans-serif;
	font-size: 17px;
	font-weight: 300;
}
@media screen and (max-width: 767px) {
	li.navTitle{
		text-align: right !important;
	}
}
.nav > li.navTitle.darkOrange{
	background-color: #DD684C;
	color: rgb(255, 255, 255);
	border-bottom: 4px solid rgb(174, 78, 1);
}
.nav > li.navTitle.lightOrange{
	background: rgb(233, 147, 26);
	color: rgb(255, 255, 255);
	border-bottom: 4px solid rgb(191, 117, 20);
}
.nav > li.navTitle.lightBlue{
	background: rgb(22, 145, 190);
	color: rgb(255, 255, 255);
	border-bottom: 4px solid rgb(12, 110, 149);
}
.nav > li.navTitle.darkBlue{
	background: rgb(22, 107, 162);
	color: rgb(255, 255, 255);
	border-bottom: 4px solid rgb(10, 75, 117);
}
.nav > li.navTitle i{
	display: inline-block;
	margin-right:10px;
	border: 4px solid transparent;
	border-radius: 50%;
	font-size: 1.1em;
	background: rgba(255,255,255,0.1);
}

.nav > li.navTitle span.icon{
	float:left;
}

.sidebar-nav .icon-team, .sidebar-nav .icon-blog, .sidebar-nav .icon-home, .sidebar-nav .icon-portfolio, .sidebar-nav .icon-services, .sidebar-nav .icon-contact, .sidebar-nav .icon-menu {
	font-family: 'icomoonMain';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

.sidebar-nav .icon-team:before {
	content: "\e000";
}

.sidebar-nav .icon-blog:before {
	content: "\e001";
}

.sidebar-nav .icon-home:before {
	content: "\e002";
}

.sidebar-nav .icon-portfolio:before {
	content: "\e003";
}

.sidebar-nav .icon-services:before {
	content: "\e004";
}

.title-container .icon-contact:before {
	content: "\e005";
}

.title-container .icon-menu:before {
	content: "\f0c9";
}

.title-container a, .title-container li {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* TABS
-------------------------------------------------- */

.tab-pane.box01 {
border-top: none !important;
margin-top: 0 !important;
}

.box01 {
	background-color: #FEFCF7;
	border: 1px solid #E0E0E0 !important;
	margin: 20px 0 !important;
	padding: 20px 30px 18px 30px !important;
	color: #575757 !important;
}

/* HELPERS
-------------------------------------------------- */
.centeredText {
	text-align:center;	
}
.textRight {
	text-align:right;	
}

.small{
	font-size:smaller;
	line-height: 1.3em;
}
.alignCenter { 
	text-align: center; 
}
.marginRight{
	margin-right:15px !important;
}
.marginLeft{
	margin-left:15px !important;
}
.marginTop{
	margin-top:15px !important;
}
.marginBottom{
	margin-bottom: 15px !important;
}
.noMargin{
	margin:0 !important;
}
.noPadding{
	padding:0 !important;
}
.noRightPadding{
	padding-right: 0px;
}
.noLeftPadding{
	padding-left: 0px;
}



.bs-callout {
margin: 20px 0;
padding: 20px;
border-left: 3px solid #eee;
}
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.bs-callout-info {
background-color: #f4f8fa;
border-color: #5bc0de;
}
.bs-callout-info h4 {
color: #5bc0de;
}
.bs-callout-warning {
background-color: #fcf8f2;
border-color: #f0ad4e;
}
.bs-callout-warning h4 {
color: #f0ad4e;
}
.bs-callout-danger {
background-color: #fdf7f7;
border-color: #d9534f;
}
.bs-callout-danger h4 {
	color: #A52723;
}
.highlight {
	padding: 9px 14px;
	margin-top: 15px;
	margin-bottom: 15px;
	background-color: #FDFBFA;
	border: 1px solid #F7E1DC;
	border-radius: 4px;
}
.bs-example {
position: relative;
padding: 45px 15px 15px;
margin: 0 -15px 15px;
background-color: #fafafa;
box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
border-color: #e5e5e5 #eee #eee;
border-style: solid;
border-width: 1px 0;
}

#trigger-happy {
    display:none;
}
 
#trigger-happy:target {
    display:block;
}
#top-link-block.affix-top {
    position: absolute; /* allows it to "slide" up into view */
    bottom: -82px; /* negative of the offset - height of link element */
    right: 10px; /* padding from the left side of the window */
}
#top-link-block.affix {
    position: fixed; /* keeps it on the bottom once in view */
    bottom: 18px; /* height of link element */
    right: 10px; /* padding from the left side of the window */
}

#ex1Slider .slider-selection {
	background: #BABABA;
}

hr.light {
	width: 100%;
	margin: 0 auto;
	border-left: 0px none white;
	border-right: 0px none white;
	border-bottom: 0px none white;
	border-top: 1px solid #B6B7B9;
}

.sliderWrapper {
margin-bottom: 20px;
}
.scalesSliderWrapper {
margin-top: 20px;
}

.sliderContainer {
display: block;
width: 80%;
float: left;
}

.sliderScale {
display: block;
width: 10%;
text-align: center;
float: left;
font-size: 14px;
margin: -5px 0 20px;
}

.red-green-slider.ui-slider-horizontal {
background: #ffbcbc; /* Old browsers */
background: -moz-linear-gradient(left,  #ffbcbc 0%, #d1ffcc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffbcbc), color-stop(100%,#d1ffcc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #ffbcbc 0%,#d1ffcc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #ffbcbc 0%,#d1ffcc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #ffbcbc 0%,#d1ffcc 100%); /* IE10+ */
background: linear-gradient(to right,  #ffbcbc 0%,#d1ffcc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbcbc', endColorstr='#d1ffcc',GradientType=1 ); /* IE6-9 */
}

.hide-until-markers-dragged-1, .hide-until-scales-dragged {
	display: none;
}


/* overrides for iPads */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {

.title-container > header.page {
	padding: 0.2em 0.7em 1em;
	background-color: #E55D53;
}

.codrops-top {
	font-size: 1.1em;
}
.navbar-default{
		background:transparent !important;
}
.codrops-top  .dropdown-menu{
	font-size:1em;
}
.codrops-top  .dropdown-menu > li > a{
	padding: 6px 20px;
	
}

}
/* iPads (landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
.title-container > header h1 {
	font-size: 2.2em;
	line-height: 1.1;

}
}
/* iPads (portrait) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
.title-container > header h1 {
	font-size: 2em;
	line-height: 1;

}
}