/*** FONT DECLARATIONS ***/

/* Webfont: Lato-Light */
@font-face {
	font-family: 'LatoWebLight';
	src: url('fonts/Lato-Light.eot'); /* IE9 Compat Modes */
	src: url('fonts/Lato-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('fonts/Lato-Light.woff2') format('woff2'), /* Modern Browsers */
		 url('fonts/Lato-Light.woff') format('woff'), /* Modern Browsers */
		 url('fonts/Lato-Light.ttf') format('truetype');
	font-style: normal;
	font-weight: normal;
	text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Regular */
@font-face {
	font-family: 'LatoWeb';
	src: url('fonts/Lato-Regular.eot'); /* IE9 Compat Modes */
	src: url('fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
		 url('fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
		 url('fonts/Lato-Regular.ttf') format('truetype');
	font-style: normal;
	font-weight: normal;
	text-rendering: optimizeLegibility;
}

/*** GENERAL STYLES ***/
html, body {
	width: 100%;
	height: 100%;
}

html {
	overflow: hidden;
}

body {
	font-family: 'LatoWeb', Roboto, Open-Sans, Helvetica, sans-serif;
	font-size: 16px;
	overflow: auto;
}

h1 {
	font-family: 'LatoWeb', Roboto, Open-Sans, Helvetica, sans-serif;
	font-size: 23px;
}

label {
	font-weight: normal;
}

.page-content {
	padding: 0;
}

.theme {
	padding: 0;
}

#survey-area {
	position: relative;
	margin: 0 30px;
}

#logo-area #S0.section-heading {
	background-color: transparent;
	margin: 0;
	padding: 15px 0;
}

#logo-area .logo {
	padding: 15px 0;
	background-size: auto 50px;
	background-position: left center;
}

.question,
.reflowed,
.section-heading,
.list-group,
.message-body,
.text-block {
	margin: 0;
	padding: 25px 2%;
}

#progress-and-buttons {
	position: relative;
	padding: 30px;
}

.progress {
	height: 36px;
	margin: 0 auto;
	max-width: 50%;
}

.progress .progress-bar {
	line-height: 36px;
}

#buttons-area > p,
.buttons-reflowed #buttons-area > p {
	overflow: hidden;
	margin: 0;
	padding: 10px 10px 0 10px;
}

.page-number, .buttons-reflowed .page-number {
	position: static;
	margin: 10px 0 0;
}

#progress-and-buttons .btn {
	margin: 0 10px 10px 0;
	padding: 7px 20px;
}

.tagline {
	display: block;
	text-align: center;
}

.validation-message {
	border: none;
	background: none;
	margin: 5px -10px 0 -10px;
	padding: 10px;
	font-size: 13px;
}

#BS.btn,
#BJ.btn,
#BN.btn {
	float: right;
	margin: 0 0 10px 10px;
}

.vt-lang-rtl #BS.btn,
.vt-lang-rtl #BJ.btn,
.vt-lang-rtl #BN.btn {
	float: left;
}

/* Expand the background image a bit at higher resolutions */
@media (min-width: 992px) {

	/* Shift the buttons onto same line as progress bar */
	#buttons-area > p {
		margin: -46px 0 0 0;
	}

	.page-number {
		position: absolute;
		width: 100%;
		margin: 10px 0 0 -30px;
	}

}

@media (max-width: 768px) {

	#survey-area {
		margin: 0 15px;
	}

	#buttons-area > p {
		text-align: center;
	}

	#progress-and-buttons .btn {
		margin: 5px;
	}

	#BS.btn,
	#BJ.btn,
	#BN.btn {
		float: none;
	}

}

/*** BUTTON STYLING (scale effect) ***/
.btn:hover {
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}

.btn {
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	outline: 1px solid transparent;
}

/*** TEXT ELEMENT STYLING (floating label effect) ***/
.question.shortanswer input,
.question.shortanswer input:focus,
.question.fillin input,
.question.fillin input:focus,
.question.essay textarea,
.question.essay textarea:focus,
.question .response-fillin input,
.question .response-fillin input:focus,
.question .response-essay textarea,
.question .response-essay textarea:focus,
.reflowed .response-fillin input,
.reflowed .response-fillin input:focus,
.reflowed .response-essay textarea,
.reflowed .response-essay textarea:focus {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
	overflow: hidden;
}

.reflowed.matrix .response-area {
	overflow: hidden;
}

/* Extra space for hint text, that floats to the top */
.question.shortanswer .field-wrapper,
.question.fillin .field-wrapper,
.question.essay .field-wrapper {
	position: relative;
	margin: 20px 0 0 0;
}

.question.fillin .topic-text,
.question.matrix .response-fillin,
.reflowed.matrix .response-fillin,
.question.matrix .response-essay,
.reflowed.matrix .response-essay {
	position: relative;
	padding-top: 20px;
	vertical-align: top;
}

/* Align text inputs and textareas to the same height */
.question.shortanswer input,
.question.fillin input,
.question .response-fillin input,
.k-widget.form-control,
.k-widget .k-input,
.k-widget .k-select,
.k-widget .k-input,
.k-widget .k-picker-wrap,
.k-widget .k-picker-wrap::before {
	height: 20px !important;
}

.question.essay textarea,
.question .response-essay textarea {
	min-height: 20px;
}

.k-widget.k-datepicker .k-picker-wrap::before {
	padding: 0;
}

.k-widget .k-state-default {
	margin-top: -1px;
}

.k-widget .k-select {
	margin-top: -5px;
}

/* Remove backgrounds for some specific kendo components (number fields, date pickers etc) */
.k-widget.form-control .k-input,
.k-widget.form-control .k-input:focus,
.k-widget.form-control .k-state-default,
.k-widget.form-control .k-state-hover,
.k-widget.form-control .k-state-focused,
.k-widget.form-control .k-state-active.k-state-border-down,
.k-widget.form-control .k-select,
.input-group .k-datepicker {
	background: none;
	border: none;
	box-shadow: none;
}

/* Symbol styling */
.input-group {
	display: table-cell;
}

.input-group-addon,
.has-error .input-group-addon {
	border: none;
	background: none;
}

/* Placeholder element styling */
.placeholder-label {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	color: #bfc3c9;
	font-size: 14px;
	font-weight: normal;
	pointer-events: none;
	transition: all 0.3s ease;
}

.vt-lang-rtl .placeholder-label {
	left: auto;
	right: 0;
}

.response-fillin > .placeholder-label,
.response-essay > .placeholder-label {
	left: 8px;
	top: 20px;
}

input ~.placeholder-label {
	width: 100%;
}

.response-fillin .placeholder-label {
	text-align: initial;
	width: calc(100% - 16px);
}

.k-numerictextbox .placeholder-label,
.k-datepicker .placeholder-label {
	width: calc(100% - 28px);
}

input:focus ~ .placeholder-label,
input.has-value ~ .placeholder-label,
textarea:focus ~ .placeholder-label,
textarea.has-value ~ .placeholder-label {
	font-size: 11px;
	top: -20px;
	left: 0;
}

.response-fillin > input:focus ~ .placeholder-label,
.response-fillin > .has-value ~ .placeholder-label,
.response-essay > textarea:focus ~ .placeholder-label,
.response-essay > .has-value ~ .placeholder-label {
	left: 8px;
	top: 0px;
}

input[data-role=maskedtextbox]:focus ~ .placeholder-label,
input[data-role=maskedtextbox].has-value ~ .placeholder-label {
	display: none;
}

input[style*="center"] ~ .placeholder-label {
	text-align: center;
}

input[style*="left"] ~ .placeholder-label {
	text-align: left;
}

input[style*="right"] ~ .placeholder-label {
	text-align: right;
}

.vt-lang-rtl .placeholder-label,
.vt-lang-rtl input:focus ~ .placeholder-label,
.vt-lang-rtl input.has-value ~ .placeholder-label,
.vt-lang-rtl textarea:focus ~ .placeholder-label,
.vt-lang-rtl textarea.has-value ~ .placeholder-label {
	left: auto;
	right: 0;
}

.vt-lang-rtl .response-fillin > input ~ .placeholder-label,
.vt-lang-rtl .response-fillin > input:focus ~ .placeholder-label,
.vt-lang-rtl .response-fillin > .has-value ~ .placeholder-label,
.vt-lang-rtl .response-essay > textarea ~ .placeholder-label,
.vt-lang-rtl .response-essay > textarea:focus ~ .placeholder-label,
.vt-lang-rtl .response-essay > .has-value ~ .placeholder-label {
	left: auto;
	right: 8px;
}

/* Bottom bar styling */
.bar {
	position: relative;
	border-bottom: 1px solid #bfc3c9;
	display: block;
}

.input-group .bar {
	width: 100%;
	float: left;
}

.bar::before {
	content: '';
	height: 2px;
	width: 0;
	left: 50%;
	bottom: -1px;
	position: absolute;
	transition: left 0.3s ease, width 0.3s ease;
	z-index: 2;
}

.has-error .bar::before {
	width: 100%;
	left: 0;
}

input:focus ~ .bar::before,
textarea:focus ~ .bar::before {
	width: 100%;
	left: 0;
}

.validation-block {
	padding-top: 10px;
	padding-bottom: 10px;
}