/*==================================================================

------------------------------------------------------------------------------
	CSS Structure
------------------------------------------------------------------------------
	
	01. Colors
		--Red
		--Green
		--Blue
		--Purple
		--Orange
		--Carrot
		--Turquoise
	02. Text Input Design
	03. Buttons
	04. Alerts
	05. Extra
		--Checkboxes
		--Radiobuttons
		--facile-ratings
	06. Form Styling
	07. Animations
	08. Alternative Style

==================================================================*/

/*===============================================================
	Colors
=================================================================*/

	.contact-form{padding:0;color:#000;font-weight:400;}
	/*.success,.error{display:none;}*/
	.form.facile-color-site .header,
	.facile-color-site .facile-btn,
	.facile-color-site .facile-checkbox input[type='radio'] + span:after,
	.facile-color-site .facile-checkbox input[type='checkbox'] + span:after{
		background:#FEE5C7;color:#fff;border:1px solid #401011;
	}
	.facile-color-site select:focus,
	.facile-color-site select:active,
	.facile-color-site .facile-checkbox input[type='radio']:checked + span,
	.facile-color-site .facile-checkbox input[type='checkbox']:checked + span,
	.facile-color-site .facile-text:focus{
		border-color:#FEE5C7;
	}
	.facile-color-site .facile-ratings input:checked ~ label,
	.facile-color-site .facile-ratings input + label:hover,
	.facile-color-site .facile-ratings input + label:hover ~ label,
	.facile-color-site .facile-icon-input .facile-text:focus + i{
		color:#FEE5C7;
	}
	.facile-color-site .facile-btn.btn-block{color:#401011;text-transform:uppercase;font-weight:bold;}
	.facile-color-site .facile-btn.btn-block:hover{color:#fff;background:#401011;border:1px solid #FEE5C7;}



	/*===============================================================
		Red Color
	=================================================================*/
	.form.facile-color-red .header,
	.facile-color-red .facile-btn,
	.facile-color-red .facile-checkbox input[type='radio'] + span:after,
	.facile-color-red .facile-checkbox input[type='checkbox'] + span:after{
		background:#e74c3c;
	}
	.facile-color-red select:focus,
	.facile-color-red select:active,
	.facile-color-red .facile-checkbox input[type='radio']:checked + span,
	.facile-color-red .facile-checkbox input[type='checkbox']:checked + span,
	.facile-color-red .facile-text:focus{
		border-color:#e74c3c;
	}
	.facile-color-red .facile-ratings input:checked ~ label,
	.facile-color-red .facile-ratings input + label:hover,
	.facile-color-red .facile-ratings input + label:hover ~ label,
	.facile-color-red .facile-icon-input .facile-text:focus + i{
		color:#e74c3c;
	}


	/*===============================================================
		Green Color
	=================================================================*/
	.form.facile-color-green .header,
	.facile-color-green .facile-btn,
	.facile-color-green .facile-checkbox input[type='radio'] + span:after,
	.facile-color-green .facile-checkbox input[type='checkbox'] + span:after{
		background:#2ecc71;
	}
	.facile-color-green select:focus,
	.facile-color-green select:active,
	.facile-color-green .facile-checkbox input[type='radio']:checked + span,
	.facile-color-green .facile-checkbox input[type='checkbox']:checked + span,
	.facile-color-green .facile-text:focus{
		border-color:#2ecc71;
	}
	.facile-color-green .facile-ratings input:checked ~ label,
	.facile-color-green .facile-ratings input + label:hover,
	.facile-color-green .facile-ratings input + label:hover ~ label,
	.facile-color-green .facile-icon-input .facile-text:focus + i{
		color:#2ecc71;
	}

	/*===============================================================
		Blue Color
	=================================================================*/
	.form.facile-color-blue .header,
	.facile-color-blue .facile-btn,
	.facile-color-blue .facile-checkbox input[type='radio'] + span:after,
	.facile-color-blue .facile-checkbox input[type='checkbox'] + span:after{
		background:#3498db;
	}
	.facile-color-blue select:focus,
	.facile-color-blue select:active,
	.facile-color-blue .facile-checkbox input[type='radio']:checked + span,
	.facile-color-blue .facile-checkbox input[type='checkbox']:checked + span,
	.facile-color-blue .facile-text:focus{
		border-color:#3498db;
	}
	.facile-color-blue .facile-ratings input:checked ~ label,
	.facile-color-blue .facile-ratings input + label:hover,
	.facile-color-blue .facile-ratings input + label:hover ~ label,
	.facile-color-blue .facile-icon-input .facile-text:focus + i{
		color:#3498db;
	}

	/*===============================================================
		Purple Color
	=================================================================*/
	.form.facile-color-purple .header,
	.facile-color-purple .facile-btn,
	.facile-color-purple .facile-checkbox input[type='radio'] + span:after,
	.facile-color-purple .facile-checkbox input[type='checkbox'] + span:after{
		background:#9b59b6;
	}
	.facile-color-purple select:focus,
	.facile-color-purple select:active,
	.facile-color-purple .facile-checkbox input[type='radio']:checked + span,
	.facile-color-purple .facile-checkbox input[type='checkbox']:checked + span,
	.facile-color-purple .facile-text:focus{
		border-color:#9b59b6;
	}
	.facile-color-purple .facile-ratings input:checked ~ label,
	.facile-color-purple .facile-ratings input + label:hover,
	.facile-color-purple .facile-ratings input + label:hover ~ label,
	.facile-color-purple .facile-icon-input .facile-text:focus + i{
		color:#9b59b6;
	}

	/*===============================================================
		Orange Color
	=================================================================*/
	.form.facile-color-orange .header,
	.facile-color-orange .facile-btn,
	.facile-color-orange .facile-checkbox input[type='radio'] + span:after,
	.facile-color-orange .facile-checkbox input[type='checkbox'] + span:after{
		background:#f39c12;
	}
	.facile-color-orange select:focus,
	.facile-color-orange select:active,
	.facile-color-orange .facile-checkbox input[type='radio']:checked + span,
	.facile-color-orange .facile-checkbox input[type='checkbox']:checked + span,
	.facile-color-orange .facile-text:focus{
		border-color:#f39c12;
	}
	.facile-color-orange .facile-ratings input:checked ~ label,
	.facile-color-orange .facile-ratings input + label:hover,
	.facile-color-orange .facile-ratings input + label:hover ~ label,
	.facile-color-orange .facile-icon-input .facile-text:focus + i{
		color:#f39c12;
	}

	/*===============================================================
		Carrot Color
	=================================================================*/
	.form.facile-color-carrot .header,
	.facile-color-carrot .facile-btn,
	.facile-color-carrot .facile-checkbox input[type='radio'] + span:after,
	.facile-color-carrot .facile-checkbox input[type='checkbox'] + span:after{
		background:#e67e22;
	}
	.facile-color-carrot select:focus,
	.facile-color-carrot select:active,
	.facile-color-carrot .facile-checkbox input[type='radio']:checked + span,
	.facile-color-carrot .facile-checkbox input[type='checkbox']:checked + span,
	.facile-color-carrot .facile-text:focus{
		border-color:#e67e22;
	}
	.facile-color-carrot .facile-ratings input:checked ~ label,
	.facile-color-carrot .facile-ratings input + label:hover,
	.facile-color-carrot .facile-ratings input + label:hover ~ label,
	.facile-color-carrot .facile-icon-input .facile-text:focus + i{
		color:#e67e22;
	}

	/*===============================================================
		Turquoise Color
	=================================================================*/
	.form.facile-color-turquoise .header,
	.facile-color-turquoise .facile-btn,
	.facile-color-turquoise .facile-checkbox input[type='radio'] + span:after,
	.facile-color-turquoise .facile-checkbox input[type='checkbox'] + span:after{
		background:#1abc9c;
	}
	.facile-color-turquoise select:focus,
	.facile-color-turquoise select:active,
	.facile-color-turquoise .facile-checkbox input[type='radio']:checked + span,
	.facile-color-turquoise .facile-checkbox input[type='checkbox']:checked + span,
	.facile-color-turquoise .facile-text:focus{
		border-color:#1abc9c;
	}
	.facile-color-turquoise .facile-ratings input:checked ~ label,
	.facile-color-turquoise .facile-ratings input + label:hover,
	.facile-color-turquoise .facile-ratings input + label:hover ~ label,
	.facile-color-turquoise .facile-icon-input .facile-text:focus + i{
		color:#1abc9c;
	}


/*===============================================================
	Text Input
=================================================================*/
.facile-text{
	border:solid 1px #CCC;
	border-radius:2px;
	height:auto;
	padding:9px 12px;
	width:100%;
	display:block;
	-webkit-transition:all .3s ease;
	-moz-transition:all .3s ease;
	transition:all .3s ease;
}
textarea.facile-text{
	resize:vertical;
}
.facile-text,
.form-group .facile-text,
.form-group .facile-text:focus,
.facile-text:focus,
.input-group.facile-group .input-group-addon,
select{
	-webkit-box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
	-moz-box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
	box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
}
.facile-text:focus{
	border-color:#ea6153;
}
.input-group.facile-group .facile-text{
	border-radius: 0 2px 2px 0;
}
.input-group.facile-group .input-group-addon{
	background:#F0F0F0;
	border-color:#CCC;
	border-radius:2px 0 0 2px;
}
.form-group.has-error .facile-text{
	border-color:#c0392b;
	background:rgba(192, 57, 43, .02);
}
.form-group.has-success .facile-text{
	border-color:#2ecc71;
	background:rgba(46, 204, 113, .02);
}
.form-group.has-warning .facile-text{
	border-color:#f39c12;
	background:rgba(243, 156, 18, .02);
}


/*===============================================================
	Buttons
=================================================================*/
.facile-btn{
	padding:10px 11px;
	background:#ea6153;
	color:#FFF;
	border:none;
	position:relative;
	top:0;
	font-size:14px;
	border-radius:2px;
	-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,.07);
	-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,.07);
	box-shadow: 0 2px 0 0 rgba(0,0,0,.07);
}
.facile-btn:hover,
.facile-btn:focus{
	color:#FFF;
}
.facile-btn:active{
	top:1px;
	opacity:.8;
	filter:Alpha(opacity=80);
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none;
}
.facile-btn:active:focus,
.facile-btn:focus{
	outline:none;
}
.facile-btn.btn-gray{
	background:#DEDEDE;
	color:#444;
}
.facile-btn.btn-success{
	background:#2ecc71;
}
.facile-btn.btn-warning{
	background:#f39c12;
}
.facile-btn.btn-danger{
	background:#c0392b;
}
.facile-icon-left i{
	margin-right:15px;
	margin-left:-15px;
}
.facile-icon-right i{
	margin-left:15px;
	margin-right:-15px;
}
.facile-icon-input,
.facile-button-input{
	position:relative;
}
.facile-icon-input i{
	position:absolute;
	left:14px;
	top:50%;
	font-size:20px;
	line-height:20px;
	color:#CCC;
	margin-top:-10px;
	-webkit-transition:all .3s ease;
	-moz-transition:all .3s ease;
	transition:all .3s ease;
}
.facile-icon-input .facile-text{
	padding-left:38px;
}
.facile-icon-input textarea + i{
	top:14px;
	margin:0;
}
.facile-icon-input .facile-text:focus + i{
	color:#ea6153;
	-webkit-transform:scale(1.25);
	-moz-transform:scale(1.25);
	-ms-transform:scale(1.25);
	-o-transform:scale(1.25);
	transform:scale(1.25);
}
.facile-button-input .input-btn{
	position:absolute;
	height:24px;
	width:24px;
	line-height:24px;
	vertical-align:middle;
	border-radius:50%;
	position:absolute;
	font-size:12px;
	color:#FFF;
	background:#222;
	top:50%;
	margin-top:-12px;
	right:10px;
	text-align:center;
	display:block;
	text-decoration:none;
	opacity:.4;
	filter:Alpha(opacity=40);
}
.facile-button-input .input-btn:hover{
	opacity:1;
	filter:Alpha(opacity=100);
}
.facile-icon-input .facile-text{
	padding-right:45px;
}

/*===============================================================
	Alerts
=================================================================*/
.facile-alert.alert{
	padding:15px;
	padding-right:35px;
	border:none;
	color:#FFF;
}
.facile-alert.alert .close{
	text-shadow:none;
	color:#FFF;
	opacity:.5;
	font-size:24px;
	right:-18px;
}
.facile-alert.alert .close:hover{
	opacity:.8;
}
.facile-alert.alert.alert-warning{
	background:#f39c12;
}
.facile-alert.alert.alert-info{
	background:#3498db;
}
.facile-alert.alert.alert-danger{
	background:#c0392b;
}
.facile-alert.alert.alert-success{
	background:#2ecc71;
}


/*===============================================================
	Extra (Checkboxes, Radiobuttons, facile-ratings)
=================================================================*/
.facile-checkbox{
	position:relative;
}
.facile-ratings input[type='radio'],
.facile-checkbox input[type='radio'],
.facile-checkbox input[type='checkbox']{
	opacity:0;
	position:absolute;
	height:100%;
	width:20px;
	z-index:11;
	cursor:pointer;
}
.facile-checkbox label{
	cursor:pointer;
	font-weight:400;
	color:#000;
}
.facile-checkbox label,
.facile-checkbox input[type='radio'] + span,
.facile-checkbox input[type='checkbox'] + span{
	line-height:1em;
	display:inline-block;
	*display:inline;
	*zoom:1;
	vertical-align:middle;
	margin:0;
}
.facile-checkbox input[type='radio'] + span,
.facile-checkbox input[type='checkbox'] + span{
	position:relative;
	border-radius:50%;
	height:16px;
	width:16px;
	border:solid 1px #CCC;
	margin-right:5px;
	-webkit-box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
	-moz-box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
	box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
}
.facile-checkbox input[type='radio'] + span:after,
.facile-checkbox input[type='checkbox'] + span:after{
	content: ' ';
	position:absolute;
	top:1px;
	left:1px;
	right:1px;
	bottom:1px;
	border-radius:50%;
	opacity:0;
	visibility:hidden;
	background:#ea6153;
	
	-webkit-transform:scale(0);
	-moz-transform:scale(0);
	-ms-transform:scale(0);
	-o-transform:scale(0);
	transform:scale(0);
	
	-webkit-transition:all .3s ease;
	-moz-transition:all .3s ease;
	transition:all .3s ease;
}
.facile-checkbox input[type='checkbox'] + span:after{
	content: '\f3fd';
	color:#FFF;
	font-family: 'IonIcons';
	font-size:18px;
	line-height:14px;
	vertical-align:middle;
	text-align:center;
	top:0;
	left:0;
	right:0;
	bottom:0;
}
.facile-checkbox input[type='radio']:checked + span,
.facile-checkbox input[type='checkbox']:checked + span{
	border-color:#ea6153;
}
.facile-checkbox input[type='radio']:checked + span:after,
.facile-checkbox input[type='checkbox']:checked + span:after{
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	-o-transform:scale(1);
	transform:scale(1);
	
	opacity:1;
	visibility:visible;
}
.facile-ratings{
	position:relative;
	display:inline-block;
	*display:inline;
	*zoom:1;
}
.facile-ratings:before,
.facile-ratings:after{
	content: ' ';
}
.facile-ratings:after{
	clear:both;
}
.facile-ratings input + label{
	color:#CCC;
	font-size:22px;
	padding-right:8px;
	float:right;
	display:block;
	-webkit-transition:color .3s linear;
	-moz-transition:color .3s linear;
	transition:color .3s ease, transform .1s linear;
}
.facile-ratings input:checked ~ label,
.facile-ratings input + label:hover,
.facile-ratings input + label:hover ~ label{
	color:#ea6153;
}
.facile-ratings input + label:hover{
	-webkit-transform:scale(1.3);
	-moz-transform:scale(1.3);
	-ms-transform:scale(1.3);
	-o-transform:scale(1.3);
	transform:scale(1.3);
}
select{
	padding:9px 12px;
	border:solid 1px #CCC;
	border-radius:2px;
	background-image: url("img/arrow.png");
	background-position: 99.5% center;
	background-repeat:no-repeat;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
select:focus,
select:active{
	border-color:#ea6153;
}


/*===============================================================
	Form Styling
=================================================================*/
.form{
	padding:30px;
	padding-bottom:20px;
	background:#FFF;
	border-radius:3px;
	margin:auto;
	max-width:430px;
}
.form-group{
	margin-bottom:20px;
}
.form p{
	margin:0;
}
.form.large-form{
	max-width:600px;
}
.form .header *{
	margin:0;
	font-weight:600;
}
.form .header{
	margin:-30px;
	padding:30px;
	margin-bottom:40px;
	background:#ea6153;
	color:#FFF;
	text-align:center;
	border-radius:3px 3px 0 0;
}
.space{
	display:block;
	clear:both;
	height:30px;
}
.form .header h1{
	font-size:32px;
	font-weight:400;
}
.form .row p{
	line-height:1em;
	margin-top:4px;
	font-size:16px;
}
.form .row{
	margin:0 -10px;
}
.form .row > div{
	padding:0 10px;
}
.row.form-group{
	margin-bottom:0;
}







/*================================================================
	Load Animations
================================================================*/
.js .form{
	opacity:0;
	visibility:hidden;
	-webkit-transition:all .4s .3s ease;
	-moz-transition:all .4s .3s ease;
	transition:all .4s .3s ease;
}
.js .loaded .form{
	opacity:1;
	visibility:visible;
}
.js .loaded .form .header{
	-webkit-transition:box-shadow .4s .7s ease;
	-moz-transition:box-shadow .4s .7s ease;
	transition:box-shadow .4s .7s ease;
	-webkit-box-shadow: 0 5px 0 0 rgba(0,0,0,.05);
	-moz-box-shadow: 0 5px 0 0 rgba(0,0,0,.05);
	box-shadow: 0 5px 0 0 rgba(0,0,0,.05);
}

.js .form-group{
	opacity:0;
	visibility:hidden;
	-webkit-transition:all .4s ease;
	-moz-transition:all .4s ease;
	transition:all .4s ease;
	-webkit-transition-delay:.7s;
	-moz-transition-delay:.7s;
	transition-delay:.7s;
}
.js .loaded .form-group{
	opacity:1;
	visibility:visible;
}

.js .facile-animation1 .form-group{
	-webkit-transform:translateY(30px);
	-moz-transform:translateY(30px);
	-ms-transform:translateY(30px);
	-o-transform:translateY(30px);
	transform:translateY(30px);
}
.js .facile-animation1.loaded .form-group{
	-webkit-transform:translateY(0);
	-moz-transform:translateY(0);
	-ms-transform:translateY(0);
	-o-transform:translateY(0);
	transform:translateY(0);
}

.js .facile-animation2 .form-group{
	-webkit-transform:scale(.9);
	-moz-transform:scale(.9);
	-ms-transform:scale(.9);
	-o-transform:scale(.9);
	transform:scale(.9);
}
.js .facile-animation2.loaded .form-group{
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	-o-transform:scale(1);
	transform:scale(1);
}

.js .facile-animation3 .form-group{
	-webkit-transform:translateX(-30px);
	-moz-transform:translateX(-30px);
	-ms-transform:translateX(-30px);
	-o-transform:translateX(-30px);
	transform:translateX(-30px);
}
.js .facile-animation3.loaded .form-group{
	-webkit-transform:translateX(0);
	-moz-transform:translateX(0);
	-ms-transform:translateX(0);
	-o-transform:translateX(0);
	transform:translateX(0);
}

.js .facile-animation4 .form-group{
	-webkit-transform:translateX(30px);
	-moz-transform:translateX(30px);
	-ms-transform:translateX(30px);
	-o-transform:translateX(30px);
	transform:translateX(30px);
}
.js .facile-animation4.loaded .form-group{
	-webkit-transform:translateX(0);
	-moz-transform:translateX(0);
	-ms-transform:translateX(0);
	-o-transform:translateX(0);
	transform:translateX(0);
}


.js .facile-animation5 .form-group{
	-webkit-transform:translateX(-30px);
	-moz-transform:translateX(-30px);
	-ms-transform:translateX(-30px);
	-o-transform:translateX(-30px);
	transform:translateX(-30px);
}
.js .facile-animation5 .form-group:nth-of-type(2n){
	-webkit-transform:translateX(30px);
	-moz-transform:translateX(30px);
	-ms-transform:translateX(30px);
	-o-transform:translateX(30px);
	transform:translateX(30px);
}
.js .facile-animation5.loaded .form-group{
	-webkit-transform:translateX(0);
	-moz-transform:translateX(0);
	-ms-transform:translateX(0);
	-o-transform:translateX(0);
	transform:translateX(0);
}

.js .loaded .form-group:nth-of-type(1){
	-webkit-transition-delay: .8s;
	-moz-transition-delay: .8s;
	transition-delay: .8s;
}
.js .loaded .form-group:nth-of-type(2){
	-webkit-transition-delay: .9s;
	-moz-transition-delay: .9s;
	transition-delay: .9s;
}
.js .loaded .form-group:nth-of-type(3){
	-webkit-transition-delay: 1s;
	-moz-transition-delay: 1s;
	transition-delay: 1s;
}
.js .loaded .form-group:nth-of-type(4){
	-webkit-transition-delay: 1.1s;
	-moz-transition-delay: 1.1s;
	transition-delay: 1.1s;
}
.js .loaded .form-group:nth-of-type(5){
	-webkit-transition-delay: 1.2s;
	-moz-transition-delay: 1.2s;
	transition-delay: 1.2s;
}
.js .loaded .form-group:nth-of-type(6){
	-webkit-transition-delay: 1.3s;
	-moz-transition-delay: 1.3s;
	transition-delay: 1.3s;
}
.js .loaded .form-group:nth-of-type(7){
	-webkit-transition-delay: 1.5s;
	-moz-transition-delay: 1.5s;
	transition-delay: 1.5s;
}
.js .loaded .form-group:nth-of-type(8){
	-webkit-transition-delay: 1.6s;
	-moz-transition-delay: 1.6s;
	transition-delay: 1.6s;
}
.js .loaded .form-group:nth-of-type(9){
	-webkit-transition-delay: 1.7s;
	-moz-transition-delay: 1.7s;
	transition-delay: 1.7s;
}
.js .loaded .form-group:nth-of-type(10){
	-webkit-transition-delay: 1.8s;
	-moz-transition-delay: 1.8s;
	transition-delay: 1.8s;
}
.js .loaded .form-group:nth-of-type(11){
	-webkit-transition-delay: 1.9s;
	-moz-transition-delay: 1.9s;
	transition-delay: 1.9s;
}
.js .loaded .form-group:nth-of-type(12){
	-webkit-transition-delay: 2s;
	-moz-transition-delay: 2s;
	transition-delay: 2s;
}



/*================================================================
	Alternative Style
================================================================*/
.facile-alt .facile-text{
	border:none;
	border-bottom:solid 2px transparent;
	border-radius:2px;
	background:#F4F4F4;
}
.facile-alt select{
	background-color:#F4F4F4;
	border:none;
	border-bottom:solid 2px transparent;
}
.facile-alt .facile-btn,
.facile-alt select,
.facile-alt .facile-text,
.facile-alt .facile-text:focus,
.facile-alt .form-group .facile-text,
.facile-alt .form-group .facile-text:focus,
.facile-alt .facile-checkbox input[type='radio'] + span,
.facile-alt .facile-checkbox input[type='checkbox'] + span{
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none;
}
.facile-alt .input-group.facile-group{
	border-radius:2px;
}
.facile-alt .input-group.facile-group .input-group-addon{
	border-radius:2px 0 0 2px;
	border:none;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none;
}
.facile-alt .facile-checkbox input[type='radio'] + span,
.facile-alt .facile-checkbox input[type='checkbox'] + span{
	background:#F4F4F4;
	border-color:#E5E5E5;
}