/* ------------------------------------------------------------------------------------------------------------------------ */
/* FORMS																													*/


.form .row {
	margin: 0 -10px 40px -10px;
}

.form div[class*="col-"] {
	padding: 0 10px;
}


/* ---------------------------------------------------------------------------- */
/* FORMS - GROUP																*/


.form .groupVertical, .form .groupHorizontal {
	display: inline-block;
}

.form .groupVertical .group {
	display: block;
	margin: 0 0 10px 0;
}

.form .groupVertical .group:last-child {
	margin: 0;
}

.form .groupHorizontal .group {				
	display: inline-block;
	margin: 0 10px 0 0;
}

.form .groupHorizontal .group:last-child {				
	margin: 0;
}

/* ---------------------------------------------------------------------------- */
/* FORMS - INPUTS																*/


.form input[type="text"],
.form input[type="password"],
.form input[type="email"],
.form input[type="number"],
.form input[type="tel"],
.form input[type="date"],
.form input[type="time"] {
	width: 100%;
	height: 70px;
	border: 1px solid #dedede;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	margin: 0 auto;
	/*padding: 0 10px;*/
	display: block;
	outline: none;
	font-size: 20px;
	line-height: 50px;
	text-align: center;
	color: #636363;
	font-family: 'TitilliumText22LBold', Arial, Helvetica, Tahoma, sans-serif;
}

.form input[type="text"]:focus,
.form input[type="password"]:focus,
.form input[type="email"]:focus,
.form input[type="number"]:focus,
.form input[type="tel"]:focus,
.form input[type="date"]:focus,
.form input[type="time"]:focus {
	-webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
	-moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
	box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}

::-webkit-input-placeholder {
	color: #b9b9b9;
}

::-moz-placeholder {
	color: #b9b9b9;
	opacity:  1;
}

input:focus::-webkit-input-placeholder {
	color: transparent;
}

input:focus:-moz-placeholder {
	color: transparent;
}

input:focus::-moz-placeholder {
	color: transparent;
} 

input:focus:-ms-input-placeholder {
	color: transparent;
}


/* ---------------------------------------------------------------------------- */
/* FORMS - TEXTAREA																*/


.form textarea {
	width: 100%;
	height: 140px;
	border: 0;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: inset 0 1px 3px #e5e5e5;
	-moz-box-shadow: inset 0 1px 3px #e5e5e5;
	box-shadow: inset 0 1px 3px #e5e5e5;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #dedede;
	padding: 8px 10px;
	display: block;
	resize: none;
	color: #333333;
	font-size: 1.0em;
	line-height: 1.2em;
	font-family: Arial, Helvetica, sans-serif;
	outline: none;
}


/* ---------------------------------------------------------------------------- */
/* ERROR VALIDATION																*/


.form .stateError {
	position: relative;
}

.form .stateError .fieldname {
	color: #bf5d5d;
}

.form .stateError input[type="text"],
.form .stateError input[type="password"],
.form .stateError input[type="email"],
.form .stateError input[type="number"],
.form .stateError input[type="tel"],
.form .stateError input[type="date"],
.form .stateError input[type="time"] {
	background: #fdfaf9;
	border: 2px solid #efdddd;
	-webkit-box-shadow: inset 0 1px 3px #ffd4d4;
	-moz-box-shadow: inset 0 1px 3px #ffd4d4;
	box-shadow: inset 0 1px 3px #ffdddd;
	color: #bf5d5d;
	animation: shake 0.8s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
	10%, 90% {
		transform: translate3d(-2px, 0, 0);
	}
	20%, 80% {
		transform: translate3d(4px, 0, 0);
	}
	30%, 50%, 70% {
		transform: translate3d(-8px, 0, 0);
	}
	40%, 60% {
		transform: translate3d(8px, 0, 0);
	}
}

.form .row.stateError .helptext {
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 1s; /* Firefox < 16 */
	animation: fadein 1s;
}


/* ------------------------------------------------------------------------------------------------------------------------ */
/* TIPS																													*/

.tip {
	width: 60%;
	color: #748596;
	text-align: center;
	padding: 40px 40px 30px 40px;
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transform: -webkit-translate(-50%, -50%);
	transform: -o-translate(-50%, -50%);
	transform: -ms-translate(-50%, -50%);
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 1s; /* Firefox < 16 */
	animation: fadein 1s;
}

.tip h2 {
	letter-spacing: normal;
}

/* ------------------------------------------------------------------------------------------------------------------------ */
/* ALERT & FEEDBACKS																													*/


.overlay {
	position: absolute;
	z-index: 99;
	top: 0px;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.85);
	transition: opacity 500ms;
	visibility: visible;
	opacity: 1;
	padding: 20px;
}

.alert {
	width: 300px;
	background: #ffffff;
	color: #676767;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	text-align: center;
	padding: 40px 40px 30px 40px;
	position: absolute;
	z-index: 100;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transform: -webkit-translate(-50%, -50%);
	transform: -o-translate(-50%, -50%);
	transform: -ms-translate(-50%, -50%);
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 1s; /* Firefox < 16 */
	animation: fadein 1s;
	}
	@keyframes fadein {
		from { opacity: 0; }
		to   { opacity: 1; }
	}
	@-moz-keyframes fadein {
		from { opacity: 0; }
		to   { opacity: 1; }
	}
	@-webkit-keyframes fadein {
		from { opacity: 0; }
		to   { opacity: 1; }
}

.alert h2 {
	font-size: 18px;
	letter-spacing: normal;
}

.alert .btn {
	width: 100%;
	margin: 0 auto 20px auto;
}

/* - - - FEEDBACK - - - */

.alert.feedback {
	width: 150px;
	padding: 30px;
}

.alert.feedback [class*="icon25-"] {
	font-size: 60px;
	margin: 0 0 10px 0;
}


.alert.feedback p {
	margin: 0;
}

/* ------------------------------------------------------------------------------------------------------------------------ */
/* BUTTONS																													*/


.btn, a.btn {
	width: 50%;
	border: 0;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: inline-block;
	cursor: pointer;
	font-size: 20px;
	font-family: 'bebas_neuebold', Arial, Helvetica, Tahoma, sans-serif;
	text-align: center;
	text-decoration: none;
	margin: 0 auto 0 auto;
}

/* ---------------------------------------------------------------------------- */
/* DEFAULT BUTTON																*/


.btnDefault, a.btnDefault {
	background: #f7f7f7;
	background: -webkit-linear-gradient(top, #f7f7f7, #e4e4e4);
	background: -moz-linear-gradient(top, #f7f7f7, #e4e4e4);
	background: -ms-linear-gradient(top, #f7f7f7, #e4e4e4);
	background: -o-linear-gradient(top, #f7f7f7, #e4e4e4);
	background: linear-gradient(to bottom, #f7f7f7, #e4e4e4);
	border-bottom: 1px solid #f1f1f1;
	box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.3);
	color: #838E91;
	border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	padding: 25px 10px;
	text-shadow: 0px 1px 1px rgb(255, 255, 255);
	cursor: pointer;
}

.btnDefault:active, a.btnDefault:active {
	background: #efefef;
	color: #989c9c;
	background: -webkit-linear-gradient(top, #efefef, #e8e8e8);
	background: -moz-linear-gradient(top, #efefef, #e8e8e8);
	background: -ms-linear-gradient(top, #efefef, #e8e8e8);
	background: -o-linear-gradient(top, #efefef, #e8e8e8);
	background: linear-gradient(to bottom, #efefef, #e8e8e8);
	box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
}

.btnPrimary, a.btnPrimary {
	background: #f7f7f7;	
	background: -webkit-linear-gradient(top, #f7f7f7, #e4e4e4);
	background: -moz-linear-gradient(top, #f7f7f7, #e4e4e4);
	background: -ms-linear-gradient(top, #f7f7f7, #e4e4e4);
	background: -o-linear-gradient(top, #f7f7f7, #e4e4e4);
	background: linear-gradient(to bottom, #f7f7f7, #e4e4e4);
	border-bottom: 1px solid #cecece;
	border-top: 1px solid #f1f1f1;
	box-shadow: 0px 1px 0px 0px #eaeaea;
	color: #838e91;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	font-size: 16px;
	padding: 10px;
	text-shadow: 0px 1px 1px rgb(255, 255, 255);
}

.btnPrimary:active, a.btnPrimary:active {
	background: #efefef;
	color: #989c9c;
	background: -webkit-linear-gradient(top, #f1f1f1, #e8e8e8);
	background: -moz-linear-gradient(top, #f1f1f1, #e8e8e8);
	background: -ms-linear-gradient(top, #f1f1f1, #e8e8e8);
	background: -o-linear-gradient(top, #f1f1f1, #e8e8e8);
	background: linear-gradient(to bottom, #f1f1f1, #e8e8e8);
	box-shadow: none;
}

/* ---------------------------------------------------------------------------- */
/* LOGIN BUTTON																	*/


.login .btn .btnLogin {
	color: #ffffff;
	background: #9374ab;
	background: -webkit-linear-gradient(top, #9374ab, #644982);
	background: -moz-linear-gradient(top, #9374ab, #644982);
	background: -ms-linear-gradient(top, #9374ab, #644982);
	background: -o-linear-gradient(top, #9374ab, #644982);
	background: linear-gradient(to bottom, #9374ab, #644982);
	border-bottom: 2px solid #6e4f88;
	box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.25);
	text-shadow: none;
	padding: 25px 10px;
	border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
}

.login .btn .btnLogin:active {
	color: #b9a2ce;
	background: #9374ab;
	background: -webkit-linear-gradient(top, #826398, #644982);
	background: -moz-linear-gradient(top, #826398, #644982);
	background: -ms-linear-gradient(top, #826398, #644982);
	background: -o-linear-gradient(top, #826398, #644982);
	background: linear-gradient(to bottom, #826398, #644982);
	box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
}


/* ---------------------------------------------------------------------------- */
/* POLL BUTTON																	*/


.polls.default .btnPolls, .polls.default a.btnPolls {
	background: #ffffff;
	background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.1));
	background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.1));
	background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.1));
	background: -o-linear-gradient(top, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.1));
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.1));
	border-bottom: none;
	border-top: 1px solid rgba(241, 241, 241, 0.35);
	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
	color: inherit;
	border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	text-shadow: none;
	padding: 25px 10px;
}

.polls.default .btnPolls:active, .polls.default a.btnPolls {
	background: #ffffff;
	background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
	background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
	background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
	background: -o-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
	border-top: 1px solid rgba(241, 241, 241, 0.1);
	box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
}


@media only screen and (max-width: 768px) {
	
	/* -------------------------------------------------------------------------------------------------------------------- */
	/* FORMS																												*/
	
	.form div[class*="col-"] {
		padding: 0 10px;
	}

	.form .group div[class*="col-"] {
		margin: 20px 0 0 0;
	}

	.form .group div[class*="col-"]:first-child {
		margin: 0;
	}
	
	.form .groupVertical, .form .groupHorizontal {
		display: block;
	}
	
	.form .groupVertical .group, .form .groupHorizontal .group {
		display: block;
		margin: 0 0 10px 0;
	}
	
	.form .fieldname {
		width: auto;
		margin: 0 0 5px 0;
		float: none;
		display: block;
		line-height: normal;
	}
}

@media only screen and (max-width: 480px) {

	/* -------------------------------------------------------------------------------------------------------------------- */
	/* FORMS																												*/
	
	.form .row {
		margin: 0 -10px 20px -10px;
	}

	/* ------------------------------------------------------------------------ */
	/* FORMS - INPUTS															*/

	.form input[type="text"],
	.form input[type="password"],
	.form input[type="email"],
	.form input[type="number"],
	.form input[type="tel"],
	.form input[type="date"],
	.form input[type="time"] {
		border-radius: 8px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		font-size: 13px;
		height: 40px;
	}

	/* ------------------------------------------------------------------------------------------------------------------------ */
	/* ALERT																													*/

	.alert {
		width: 240px;
		padding: 30px;
	}
	
	.alert .errorIndicator {
		padding: 13px 12px 8px 12px;
		border: 8px solid #ffffff;
		font-size: 20px;
		top: -20px;
		margin-left: -22px;
	}

	/* ---------------------------------------------------------------------------- */
	/* BUTTONS																		*/

	.btn, a.btn {
		width: 80%;
		font-size: 18px;
		margin: 0;
	}

	/* ---------------------------------------------------------------------------- */
	/* DEFAULT BUTTON																*/

	.btnDefault, a.btnDefault {
		background: #f7f7f7;	
		background: -webkit-linear-gradient(top, #f7f7f7, #e4e4e4);
		background: -moz-linear-gradient(top, #f7f7f7, #e4e4e4);
		background: -ms-linear-gradient(top, #f7f7f7, #e4e4e4);
		background: -o-linear-gradient(top, #f7f7f7, #e4e4e4);
		background: linear-gradient(to bottom, #f7f7f7, #e4e4e4);
		border-bottom: 1px solid #eaeaea;
		box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.25);
		color: #838E91;
		border-radius: 8px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		padding: 20px 10px;
		text-shadow: 0px 1px 1px rgb(255, 255, 255);
	}

	.btnDefault:active, a.btnDefault:active {
		background: #efefef;
		color: #989c9c;
		background: -webkit-linear-gradient(top, #efefef, #e8e8e8);
		background: -moz-linear-gradient(top, #efefef, #e8e8e8);
		background: -ms-linear-gradient(top, #efefef, #e8e8e8);
		background: -o-linear-gradient(top, #efefef, #e8e8e8);
		background: linear-gradient(to bottom, #efefef, #e8e8e8);
		box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
	}

	/* ---------------------------------------------------------------------------- */
	/* POLL BUTTON																	*/

	.polls.default .btnPolls, .polls.default a.btnPolls {
		padding: 20px 10px;
		border-radius: 8px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
	}

	/* - - - FEEDBACK - - - */

	.alert.feedback {
		width: 120px;
		padding: 20px;
	}
}

@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) { /* --- IPHONE 6+ LANDSCAPE --- */

	.login .btn .btnLogin {
		padding: 20px 10px;
	}
}

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { /* --- IPHONE 5 LANDSCAPE --- */

	.login .btn .btnLogin {
		padding: 12px;
	}
}	

@media only screen and (max-width: 320px) {

	.login .btn .btnLogin {
		padding: 20px 10px;
	}

	/* ------------------------------------------------------------------------------------------------------------------------ */
	/* ALERT																													*/

	.alert {
		width: 220px;
	}

}