/*
header#header {background: #1e74a1;}
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: #1e74a1;
}

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: 0.0375em;
}
h4, .h4 { font-size: 15px; }
h5, .h5 { font-size: 13px; }
h6, .h6 { font-size: 11px; }

a:hover,
a:focus {
	color: #2f96bd;
}
a:active {
	color: #0a578a;
}

.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 */
.header-gradients,
.header-gradients .gradient {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.header-gradients {
	min-height: 740px;
	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(244,244,244,1) 50%, rgba(244,244,244,1) 100%);
	overflow: hidden;
}
.header-gradients .gradient.grey {
	min-height: 740px;
	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(244,244,244,1) 50%, rgba(244,244,244,1) 100%);
}
.header-gradients .gradient.blue {
	min-height: 460px;
	transform-origin: left bottom;
	transform: skewY(-5deg);
	background: rgb(47,150,189);
	background: linear-gradient(170deg, rgba(47,150,189,1) 0%, rgba(12,78,127,1) 100%);
}
.header-gradients .angle-1,
.header-gradients .angle-2 {
    position: absolute;
    left: 0;
    width: 100%;
    height: 200px;
    background: rgba(255,255,255,0.1);
    transform-origin: left top;
}
.header-gradients .angle-1 {
    transform: skewY(-1deg);
    bottom: -170px;
}
.header-gradients .angle-2 {
    transform: skewY(-2deg);
    bottom: -140px;
}

header nav a {
	padding-bottom: 0.25rem;
	color: #fff !important;
	font-size: 13px;
	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 -1rem;
	width: calc(100% + 2rem);
	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 {
	color: #1e74a1;
	background-color: #d7edee;
}
.survey-progress .step.done {
	color: #83c676;
	background-color: #d8f0d3;
}


/* 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: #1e74a1;
}

.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: #1e74a1 !important;
}

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

.btn:active,
.btn-primary:active {
	background-color: #0a578a !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: #1e74a1;
}

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

.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: #0a578a;
}


/* Results */

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

.user-details dt {
	width: 180px;
	clear: left;
}
.user-details dt.remuneration {
	color: #1e74a1;
}
.user-details dt.commission {
	color: #2f96bd;
}
.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.025);
}

.graph-value {
	font-size: 13px;
	font-weight: bold;
	color: #888;
}
.graph-value .total {
	color: #0a578a;
}
.graph-value .remuneration {
	color: #1e74a1;
}
.graph-value .commission {
	color: #2f96bd;
}
.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: #1e74a1;
}
.graph-block.commission {
	background: #2f96bd;
}
.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: #1e74a1;
}
a.advertiser:hover .btn-inner,
a.advertiser:focus .btn-inner {
	background-color: #2f96bd;
}
a.advertiser:active .btn-inner{
	background-color: #0a578a;
}
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;
}

/* General Styles */



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

section.splash-page {
	min-height: 100vh;
	background: transparent url(/images/bg-hero.jpg) center center no-repeat;
	-webkit-background-size: cover;
	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.7);
  backdrop-filter: blur(5px);
}

section.splash-page .logo img {
	width: 320px;
	max-width: min(100%, 70vw);
}

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

p.splash-intro {
	font-size: 1.125rem;
	line-height: 1.6;
}
.splash-intro--delayed p.splash-intro {
	font-size: 1rem;
}


/*
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: 20px;
		padding-right: 20px;
		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;
	}
}