/*
header#header {background: #de0f22;}
section#content {background: #5ba74c;}
footer#footer {background: #eee;}
*/



/*body {
	font-family: Roboto;
	font-size: 0.95rem;
	color: #444;
}*/

div, header, footer, section, a {
	position: relative;
}

.site-wrapper {
	min-height: 100vh;
}

main {
	-ms-flex-positive: 1;
	flex-grow: 1;
	max-width: 100%;
}

/*h1, h2, h3, h4, h5, a {
	color: #de0f22;
}

h1, .h1, h2, .h2, h3, .h3 {
	font-family: 'Fira Sans';
	font-weight: 800;
	font-style: italic;
}
h1, .h1 { font-size: 38px; }
h2, .h2 { font-size: 32px; }
h3, .h3 { font-size: 28px; }

h4, .h4, h5, .h5, h6, .h6, nav, .btn {
	font-family: 'Poppins';
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
}
h4, .h4 { font-size: 15px; }
h5, .h5 { font-size: 13px; }
h6, .h6 { font-size: 11px; }*/

a:hover,
a:focus {
	color: #e7aaa3;
}
a:active {
	color: #c50013;
}

.section-heading {
	margin-bottom: 1em;
	padding-bottom: 1em;
	text-align: center;
	border-bottom: 1px solid #eee;
}

.icon-faded {
	color: rgba(0,0,0,0.2);
}

section.survey-content {
	z-index: 100;
}

/*
header nav a {
	padding-bottom: 0.25rem;
	color: #fff !important;
	font-size: 11px;
	text-decoration: none !important;
	border-bottom: 3px solid;
	border-bottom-color: transparent;
}
header nav a:not(:last-child) {
	margin-right: 2rem;
}
header nav a:hover,
header nav a:focus {
	border-bottom-color: rgba(255,255,255,0.1);
}

header .logo img {
	width: 220px;
	max-width: 100%;
	height: auto;
}*/


/* Page */

.survey-page {
	position: relative;
	background: #fff;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.survey-page .page-overlay {
	position: absolute;
	top: 10px;
	left: -5px;
	width: calc(100% + 10px);
}
.survey-page .page-overlay .gradient {
	margin-top: 350px;
	height: 240px;
	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
.survey-page .page-overlay .mask {
	background: #fff;
}


/* Content Page */

.content-page {
	position: relative;
	min-height: 600px;
	background: #fff;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.content-page .page-overlay {
	position: absolute;
	top: 10px;
	left: -5px;
	width: calc(100% + 10px);
}
.content-page .page-overlay .gradient {
	margin-top: 350px;
	height: 240px;
	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
.content-page .page-overlay .mask {
	background: #fff;
}



/* Progress Bar */

.survey-progress {
	margin: 1rem 0 0;
	width: 100%;
	color: #c0c0c0;
	background-color: #eee;
}
.survey-progress h4 {
	font-size: 14px;
	line-height: 50px;
	color: inherit;
}
.survey-progress .step {
	position: relative;
}
.survey-progress .step:not(:first-child):before {
	content: '';
	position: absolute;
	top: 0;
	left: -10px;
	height: 100%;
	width: 20px;
	background: url(/images/progress-arrow.png) center center no-repeat;
	background-size: cover;
}
.survey-progress .step.active,
.survey-progress .step.done {
	color: #fff;
	background-color: #5ba74c;
}
.survey-progress .step.done {
	background-color: #83c676;
}


/* Form fields */

.form-actions {
	border-top: 1px solid #eee;
}
.form-control {
	font-size: inherit;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.form-group > label {
	margin-bottom: 0;
	text-align: left !important;
	color: #959ea2;
}

.autocomplete-group {
/*	font-family: 'Poppins';*/
	font-size: 13px;
	font-weight: 500;
	color: #aaa;
	text-transform: uppercase;
	letter-spacing: 1px;
}


/* Buttons */

.btn:not(.btn-sm) {
	font-size: 15px;
}

.btn,
.btn-primary {
	color: #fff !important;
	background-color: #de0f22 !important;
}

.btn:hover,
.btn:focus,
.btn-primary:hover,
.btn-primary:focus {
	background-color: #e7aaa3 !important;
}

.btn:active,
.btn-primary:active {
	background-color: #c50013 !important;
}

.btn-secondary,
.btn-secondary:visited {
	background-color: #5ba74c !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
	background-color: #83c676 !important;
}

.btn-secondary:active {
	background-color: #4d973e !important;
}

/* Sortable Lists */

.sortable-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sortable-list li {
	margin-bottom: 5px;
	padding: 0 10px;
	height: 2.2em;
	line-height: 2.2em;
	color: #fff;
	font-weight: 700;
	cursor: pointer !important;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color: #de0f22;
}

.sortable-list li:active {
	background-color: #e7aaa3;
}

.sortable-list li.drop-target {
	height: 2.2em;
	background-color: #f2f2f2;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.sortable-list .sort-order {
	font-size: 17px;
	background-color: #c50013;
}


/* Results */

/*.email-signup {
	padding: 25px 25px 0 25px;
	background-color: #f4f4f4;
}*/

.user-details dt {
	width: 180px;
	clear: left;
}
.user-details dt.remuneration {
	color: #de0f22;
}
.user-details dt.commission {
	color: #e7aaa3;
}
.user-details dd {
	margin-bottom: 0.25rem;
}

.graph {
	border-bottom: 1px solid rgba(0,0,0,0.1);
	background-color: #eee;
}

.graph .j-graph-gridlines {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.graph .graph-gridline {
	position: absolute;
	top: 0;
	margin-left: -1px;
	height: 100%;
	width: 1px;
	background-color: rgba(0,0,0,0.1);
}

.graph-value {
	font-size: 13px;
	font-weight: bold;
	color: #888;
}
.graph-value .total {
	color: #c50013;
}
.graph-value .remuneration {
	color: #de0f22;
}
.graph-value .commission {
	color: #e7aaa3;
}
.user .graph-value .total {
	color: #4d973e;
}
.user .graph-value .remuneration {
	color: #5ba74c;
}
.user .graph-value .commission {
	color: #83c676;
}
.graph-value .zero-data {
	font-style: italic;
	font-weight: normal;
}

.graph-bar {
	height: 25px;
}
.graph-block {
	display: block;
	float: left;
	height: 100%;
}
.graph-block.remuneration {
	background: #de0f22;
}
.graph-block.commission {
	background: #e7aaa3;
}
.user .graph-block.remuneration {
	background: #5ba74c;
}
.user .graph-block.commission {
	background: #83c676;
}

.benefits .percentage-sign {
	margin-left: 0.1rem;
	font-size: 0.8rem;
	color: #666;
}



/* Advertisers */

/*a.advertiser {
	text-decoration: none !important;
	border-color: #eee;
}
a.advertiser:hover,
a.advertiser:focus {
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
a.advertiser .btn-inner,
a.advertiser:visited .btn-inner {
	color: #fff !important;
	background-color: #de0f22;
}
a.advertiser:hover .btn-inner,
a.advertiser:focus .btn-inner {
	background-color: #e7aaa3;
}
a.advertiser:active .btn-inner{
	background-color: #c50013;
}
a.advertiser .logo {
	max-width: 250px;
}
a.advertiser .desc {
	line-height: 1.4;
}*/


/* Footer */
/*footer.page-footer {
	color: #aaa;
	background-color: #eee;
}
footer.page-footer img {
	width: 140px;
}

footer nav a {
    color: #666;
}*/

footer.sn-footer a {
	color: #959ea2;
}
footer.sn-footer a:hover,
footer.sn-footer a:focus {
	color: #363d40;
}


/* General Styles */



/*
SPLASH PAGE
========================================================
*/

section.splash-page {
	min-height: 100vh;
	background: transparent url(https://www.lawsonwilliams.co.nz/images/banner-1.jpg) center center no-repeat;
	background-size: cover;
}

section.splash-page .page-content {
	padding: 10% 10% 60px 16%;
	width: 60%;
	height: 100%;
	min-height: 100vh;
	background-color: rgba(240,240,240,0.75);
}

section.splash-page .logo img {
	width: 300px;
}

section.splash-page .splash-intro {
	line-height: 1.4;
}

p.splash-intro {
	font-size: 1.1rem;
	line-height: 1.6;
}

section.splash-page .page-content a:hover,
section.splash-page .page-content a:focus {
	color: #a20110;
}

/*
PLUGIN OVERRIDES
========================================================
*/

.select2-container--default .select2-selection--single .select2-selection__arrow {
	top: -1px;
	height: 100%;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
	margin-left: -2px;
	border-top-color: #495057;
	border-width: 6px 3px 0 3px;
}


/*
MEDIA QUERIES / RESPONSIVE STYLES
========================================================
*/

@media all and (max-width: 767px) {
	section.splash-page .page-content {
		padding-left: 3rem;
		padding-right: 3rem;
		width: 100%;
	}
	.survey-progress h4 {
		font-size: 12px;
		line-height: 40px;
	}
	.survey-progress .step:not(:first-child):before {
		left: -7px;
		width: 14px;
	}
}

@media all and (max-width: 575px) {
	.survey-progress h4 {
		font-size: 10px;
	}

	.xs-fw {
		width: 100% !important;
	}
}

@media all and (min-width: 992px) {
	.user-details dt,
	.user-details dd {
		float: left;
	}
}