@charset "UTF-8";
/*========================================================
                      Contact Form
=========================================================*/
/* MF
========================================================*/
.mailform {
	position: relative;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	margin-top: 58px;
}
.mailform fieldset {
	border: none;
}
.mailform * {
	box-sizing: border-box;
}
.mailform label {
	position: relative;
	display: block;
	width: 100%;
	margin-top: 10px;
}
.mailform label:first-child {
	margin-top: 0;
}
.mailform label input, .mailform label select, .mailform label textarea {
	display: block;
	width: 100%;
	margin: 0;
	-webkit-appearance: none;
	outline: none;
	font-family: "Open Sans", sans-serif;
	font-size: 18px;
	padding: 20px;
	line-height: 22px;
	color: #5c5c5c;
	background: #e8e8e8;
	border: 1px solid #bebebe;
	border-radius: 0px;
}
.mailform label input:-moz-placeholder, .mailform label select:-moz-placeholder, .mailform label textarea:-moz-placeholder {
 color: #5c5c5c;
 opacity: 1;
}
.mailform label input::-webkit-input-placeholder, .mailform label select::-webkit-input-placeholder, .mailform label textarea::-webkit-input-placeholder {
 color: #5c5c5c;
 opacity: 1;
}
.mailform label input::-moz-placeholder, .mailform label select::-moz-placeholder, .mailform label textarea::-moz-placeholder {
 color: #5c5c5c;
 opacity: 1;
}
.mailform label input:-ms-input-placeholder, .mailform label select:-ms-input-placeholder, .mailform label textarea:-ms-input-placeholder {
 color: #5c5c5c;
 opacity: 1;
}
.mailform label textarea {
	resize: vertical;
	overflow: auto;
	height: 195px;
}
@media (max-width: 1365px) {
 .mailform label {
 margin-top: 30px;
}
}
 @-ms-keyframes fout {
 0% {
 -ms-transform: scale(1) translateX(0);
 transform: scale(1) translateX(0);
}
 100% {
 -ms-transform: scale(0) translateX(0);
 transform: scale(0) translateX(0);
}
}
@-webkit-keyframes fout {
 0% {
 -webkit-transform: scale(1) translateX(0);
 transform: scale(1) translateX(0);
}
 100% {
 -webkit-transform: scale(0) translateX(0);
 transform: scale(0) translateX(0);
}
}
@keyframes fout {
 0% {
 -webkit-transform: scale(1) translateX(0);
 transform: scale(1) translateX(0);
}
 100% {
 -webkit-transform: scale(0) translateX(0);
 transform: scale(0) translateX(0);
}
}
/* Mail Form PlaceHolder
========================================================*/
.mfPlaceHolder {
	font: inherit;
	cursor: text;
	position: absolute;
	left: 0;
	top: 0;
	padding: 20px;
	line-height: 22px;
	color: #5c5c5c;
	opacity: 1;
	-webkit-transition: 0.3s all ease;
	transition: 0.3s all ease;
}
*:-webkit-autofill ~ .mfPlaceHolder {
 opacity: .4;
 -ms-transform: translateX(-100%);
 -webkit-transform: translateX(-100%);
 transform: translateX(-100%);
}
.mfPlaceHolder.state-1 {
	opacity: .4;
	-ms-transform: translateX(-100%);
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}
@media (max-width: 1365px) {
 *:-webkit-autofill ~ .container > .mailform .mfPlaceHolder, *:-webkit-autofill ~ .grid_12 .mfPlaceHolder {
 opacity: .4;
 -ms-transform: translateY(-80%);
 -webkit-transform: translateY(-80%);
 transform: translateY(-80%);
}
 .container > .mailform .mfPlaceHolder.state-1, .grid_12 .mfPlaceHolder.state-1 {
 opacity: .4;
 -ms-transform: translateY(-80%);
 -webkit-transform: translateY(-80%);
 transform: translateY(-80%);
}
}
@media (max-width: 979px) {
 *:-webkit-autofill ~ .grid_10 .mfPlaceHolder {
 opacity: .4;
 -ms-transform: translateY(-80%);
 -webkit-transform: translateY(-80%);
 transform: translateY(-80%);
}
 .grid_10 .mfPlaceHolder.state-1 {
 opacity: .4;
 -ms-transform: translateY(-80%);
 -webkit-transform: translateY(-80%);
 transform: translateY(-80%);
}
}
@media (max-width: 767px) {
 *:-webkit-autofill ~ .mfPlaceHolder {
 opacity: .4;
 -ms-transform: translateY(-80%);
 -webkit-transform: translateY(-80%);
 transform: translateY(-80%);
}
 .mfPlaceHolder.state-1 {
 opacity: .4;
 -ms-transform: translateY(-80%);
 -webkit-transform: translateY(-80%);
 transform: translateY(-80%);
}
}
/* Mail Form Validation
  ========================================================*/
.mfValidation {
	-ms-transform-origin: 0% 50%;
	-webkit-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
	-webkit-transition: 0.3s all ease;
	transition: 0.3s all ease;
	box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.5);
	border-radius: 5px;
	position: absolute;
	top: 25px;
	left: 100%;
	width: 210px;
	margin-top: -20px;
	margin-left: 10px;
	padding: 10px;
	height: 40px;
	font-weight: 300;
	font-size: 12px;
	line-height: 20px;
	background: #111;
	color: #FFF;
	opacity: 0;
	visibility: hidden;
	cursor: pointer;
	z-index: 998;
}
.mfValidation:hover {
	background: #231634;
}
.mfValidation:before {
	content: '';
	position: absolute;
	right: 100%;
	top: 50%;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px 5px 4px 0;
	border-color: transparent #111 transparent transparent;
	-webkit-transition: 0.3s all ease;
	transition: 0.3s all ease;
}
.mfValidation:hover:before {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px 5px 4px 0;
	border-color: transparent #231634 transparent transparent;
}
.mfValidation.show {
	-ms-transform: scale(1);
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity: 1;
	visibility: visible;
	-webkit-animation: notifanim 0.4s cubic-bezier(0.55, 0, 0.1, 1) forwards;
	-ms-animation: notifanim 0.4s cubic-bezier(0.55, 0, 0.1, 1) forwards;
	animation: notifanim 0.4s cubic-bezier(0.55, 0, 0.1, 1) forwards;
}
.mfValidation.hide {
	-webkit-animation: notifanim-fo 0.4s cubic-bezier(0.55, 0, 0.1, 1) forwards;
	-ms-animation: notifanim-fo 0.4s cubic-bezier(0.55, 0, 0.1, 1) forwards;
	animation: notifanim-fo 0.4s cubic-bezier(0.55, 0, 0.1, 1) forwards;
}
.mfValidation.valid {
	opacity: 0;
	visibility: hidden;
}
@media (max-width: 767px) {
 .mfValidation {
 text-align: right;
 top: auto;
 left: auto;
 bottom: 100%;
 right: 0;
 background: none;
 padding: 0;
 margin: 0 0 3px;
 min-height: 0;
 box-shadow: none;
}
 .mfValidation:before {
 display: none;
}
 .mfValidation:hover {
 background: none;
 right: 5px;
}
}
 @-ms-keyframes notifanim-fo {
 0% {
 opacity: 1;
 visibility: visible;
 -ms-transform: scale(1);
 transform: scale(1);
}
 20% {
 opacity: 1;
 -ms-transform: scale(1.1);
 transform: scale(1.1);
}
 99% {
 visibility: hidden;
}
 100% {
 visibility: hidden;
 -ms-transform: scale(0.3);
 transform: scale(0.3);
 opacity: 0;
}
}
@-webkit-keyframes notifanim-fo {
 0% {
 opacity: 1;
 visibility: visible;
 -webkit-transform: scale(1);
 transform: scale(1);
}
 20% {
 opacity: 1;
 -webkit-transform: scale(1.1);
 transform: scale(1.1);
}
 99% {
 visibility: hidden;
}
 100% {
 visibility: hidden;
 -webkit-transform: scale(0.3);
 transform: scale(0.3);
 opacity: 0;
}
}
@keyframes notifanim-fo {
 0% {
 opacity: 1;
 visibility: visible;
 -webkit-transform: scale(1);
 transform: scale(1);
}
 20% {
 opacity: 1;
 -webkit-transform: scale(1.1);
 transform: scale(1.1);
}
 99% {
 visibility: hidden;
}
 100% {
 visibility: hidden;
 -webkit-transform: scale(0.3);
 transform: scale(0.3);
 opacity: 0;
}
}
@-ms-keyframes notifanim {
 0% {
 opacity: 0;
 visibility: hidden;
 -ms-transform: scale(0.3);
 transform: scale(0.3);
}
 1% {
 visibility: visible;
}
 50% {
 -ms-transform: scale(1);
 transform: scale(1);
}
 75% {
 -ms-transform: scale(0.9);
 transform: scale(0.9);
}
 100% {
 -ms-transform: scale(1);
 transform: scale(1);
 opacity: 1;
}
}
@-webkit-keyframes notifanim {
 0% {
 opacity: 0;
 visibility: hidden;
 -webkit-transform: scale(0.3);
 transform: scale(0.3);
}
 1% {
 visibility: visible;
}
 50% {
 -webkit-transform: scale(1);
 transform: scale(1);
}
 75% {
 -webkit-transform: scale(0.9);
 transform: scale(0.9);
}
 100% {
 -webkit-transform: scale(1);
 transform: scale(1);
 opacity: 1;
}
}
@keyframes notifanim {
 0% {
 opacity: 0;
 visibility: hidden;
 -webkit-transform: scale(0.3);
 transform: scale(0.3);
}
 1% {
 visibility: visible;
}
 50% {
 -webkit-transform: scale(1);
 transform: scale(1);
}
 75% {
 -webkit-transform: scale(0.9);
 transform: scale(0.9);
}
 100% {
 -webkit-transform: scale(1);
 transform: scale(1);
 opacity: 1;
}
}
/* MF Controls
========================================================*/
.mfControls {
	margin-top: 25px;
	word-spacing: 10px;
	text-align: left;
}
.mfControls > * {
	word-spacing: normal;
	margin-bottom: 5px;
}
/* Mail Form Submit
========================================================*/
.mfProgress {
	position: relative;
}
.mfProgress .cnt, .mfProgress .loader {
	-webkit-transition: 0.4s all ease-in-out;
	transition: 0.4s all ease-in-out;
}
.mfProgress .loader {
	opacity: 0;
	text-align: center;
	letter-spacing: 10px;
	-ms-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}
.mfProgress .loader, .mfProgress .loader:before, .mfProgress .loader:after {
	position: absolute;
	left: 0;
	bottom: 0;
	top: 0;
	right: 0;
	margin: auto;
}
.mfProgress .loader:before {
	content: '';
	width: 20px;
	height: 20px;
	background-color: #fff;
	border-radius: 50%;
}
.mfProgress .loader:after {
	content: '';
	width: 30px;
	height: 30px;
	color: #fff;
	font: 400 30px "FontAwesome";
	line-height: inherit;
	-webkit-transition: 0.4s all ease-in-out;
	transition: 0.4s all ease-in-out;
	-ms-transform: scale(0) rotate(-60deg);
	-webkit-transform: scale(0) rotate(-60deg);
	transform: scale(0) rotate(-60deg);
}
.mfProgress.sending .cnt, .mfProgress.fail .cnt, .mfProgress.success .cnt {
	-ms-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
	opacity: 0;
}
.mfProgress.sending .loader, .mfProgress.fail .loader, .mfProgress.success .loader {
	opacity: 1;
	-ms-transform: scale(1);
	-webkit-transform: scale(1);
	transform: scale(1);
}
.mfProgress.fail .loader:before, .mfProgress.success .loader:before {
	-webkit-animation: fout 0.4s ease-in-out 1 forwards;
	-ms-animation: fout 0.4s ease-in-out 1 forwards;
	animation: fout 0.4s ease-in-out 1 forwards;
}
.mfProgress.fail .loader:after, .mfProgress.success .loader:after {
	-ms-transform: scale(1) rotate(0deg);
	-webkit-transform: scale(1) rotate(0deg);
	transform: scale(1) rotate(0deg);
}
.mfProgress.sending .loader:before {
	-webkit-animation: motion 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;
	-ms-animation: motion 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;
	animation: motion 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
.mfProgress.fail .loader:after {
	content: '\f06a';
}
.mfProgress.success .loader:after {
	content: '\f058';
}
.mfProgress .msg {
	-ms-transform-origin: 0% 50%;
	-webkit-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
	-webkit-transition: 0.3s all ease;
	transition: 0.3s all ease;
	-webkit-animation: notifanim-fo 0.4s ease-in-out forwards;
	-ms-animation: notifanim-fo 0.4s ease-in-out forwards;
	animation: notifanim-fo 0.4s ease-in-out forwards;
	box-sizing: border-box;
	box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.5);
	position: absolute;
	padding: 10px;
	border-radius: 0px;
	font-size: 18px;
	line-height: 20px;
	opacity: 0;
	visibility: hidden;
	top: 100%;
	left: 50%;
	width: 230px;
	margin-left: -115px;
	margin-top: 20px;
	color: #fff;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
}
.mfProgress .msg:before {
	content: '';
	position: absolute;
	bottom: 100%;
	right: 50%;
	-webkit-transform: translate(50%, 0%);
	-ms-transform: translate(50%, 0%);
	transform: translate(50%, 0%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 6px 6px 6px;
	border-color: transparent transparent #111 transparent;
	-webkit-transition: 0.4s all ease-in-out;
	transition: 0.4s all ease-in-out;
}
.mfProgress.fail .msg, .mfProgress.success .msg {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
	visibility: visible;
	-webkit-animation: notifanim 0.4s ease-in-out forwards;
	-ms-animation: notifanim 0.4s ease-in-out forwards;
	animation: notifanim 0.4s ease-in-out forwards;
}
.mfProgress.fail .msg {
	background: #F44336;
}
.mfProgress.fail .msg:before {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 6px 6px 6px;
	border-color: transparent transparent #F44336 transparent;
}
.mfProgress.success .msg {
	background: #2E7D32;
}
.mfProgress.success .msg:before {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 6px 6px 6px;
	border-color: transparent transparent #2E7D32 transparent;
}
 @-ms-keyframes motion {
 0% {
 -ms-transform: translateX(0) scale(1);
 transform: translateX(0) scale(1);
}
 25% {
 -ms-transform: translateX(-50px) scale(0.3);
 transform: translateX(-50px) scale(0.3);
}
 50% {
 -ms-transform: translateX(0) scale(1);
 transform: translateX(0) scale(1);
}
 75% {
 -ms-transform: translateX(50px) scale(0.3);
 transform: translateX(50px) scale(0.3);
}
 100% {
 -ms-transform: translateX(0) scale(1);
 transform: translateX(0) scale(1);
}
}
@-webkit-keyframes motion {
 0% {
 -webkit-transform: translateX(0) scale(1);
 transform: translateX(0) scale(1);
}
 25% {
 -webkit-transform: translateX(-50px) scale(0.3);
 transform: translateX(-50px) scale(0.3);
}
 50% {
 -webkit-transform: translateX(0) scale(1);
 transform: translateX(0) scale(1);
}
 75% {
 -webkit-transform: translateX(50px) scale(0.3);
 transform: translateX(50px) scale(0.3);
}
 100% {
 -webkit-transform: translateX(0) scale(1);
 transform: translateX(0) scale(1);
}
}
@keyframes motion {
 0% {
 -webkit-transform: translateX(0) scale(1);
 transform: translateX(0) scale(1);
}
 25% {
 -webkit-transform: translateX(-50px) scale(0.3);
 transform: translateX(-50px) scale(0.3);
}
 50% {
 -webkit-transform: translateX(0) scale(1);
 transform: translateX(0) scale(1);
}
 75% {
 -webkit-transform: translateX(50px) scale(0.3);
 transform: translateX(50px) scale(0.3);
}
 100% {
 -webkit-transform: translateX(0) scale(1);
 transform: translateX(0) scale(1);
}
}
/* Mail Form Icon
========================================================*/
.mfIcon {
	position: absolute;
	text-align: center;
	top: 12px;
	right: 10px;
	width: 24px;
	height: 24px;
	line-height: 24px;
	color: #FFF;
	font: 400 20px/24px "material-design";
}
.mfIcon span:before, .mfIcon span:after {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -10px;
	margin-left: -10px;
	-webkit-transition: 0.4s all ease-in-out;
	transition: 0.4s all ease-in-out;
}
.mfIcon span:before {
	content: "";
}
.mfIcon span:after {
	content: "";
	-ms-transform: scale(0) rotate(-180deg);
	-webkit-transform: scale(0) rotate(-180deg);
	transform: scale(0) rotate(-180deg);
	-webkit-animation: zoom-out 0.4s ease-in-out 1 forwards;
	-ms-animation: zoom-out 0.4s ease-in-out 1 forwards;
	animation: zoom-out 0.4s ease-in-out 1 forwards;
}
.mfIcon.state-1:after {
	content: "";
	position: absolute;
	bottom: -1px;
	width: 0;
	height: 1px;
	background: #fff;
	-webkit-animation: line 1.2s 0.4s infinite;
	-ms-animation: line 1.2s 0.4s infinite;
	animation: line 1.2s 0.4s infinite;
}
.mfIcon.state-1 span:before {
	-ms-transform: scale(0) rotate(90deg);
	-webkit-transform: scale(0) rotate(90deg);
	transform: scale(0) rotate(90deg);
}
.mfIcon.state-1 span:after {
	-ms-transform: scale(1) rotate(-35deg);
	-webkit-transform: scale(1) rotate(-35deg);
	transform: scale(1) rotate(-35deg);
	-webkit-animation: zoom-in-state-1 0.4s ease-in-out 1 forwards, anim-1 1.2s 0.3s infinite, anim-2 0.6s 0.3s infinite;
	-ms-animation: zoom-in-state-1 0.4s ease-in-out 1 forwards, anim-1 1.2s 0.3s infinite, anim-2 0.6s 0.3s infinite;
	animation: zoom-in-state-1 0.4s ease-in-out 1 forwards, anim-1 1.2s 0.3s infinite, anim-2 0.6s 0.3s infinite;
}
.mfIcon.state-2 span:before {
	content: "";
	-ms-transform: scale(0) rotate(90deg);
	-webkit-transform: scale(0) rotate(90deg);
	transform: scale(0) rotate(90deg);
}
.mfIcon.state-2 span:after {
	-ms-transform: scale(1) rotate(-210deg);
	-webkit-transform: scale(1) rotate(-210deg);
	transform: scale(1) rotate(-210deg);
	-webkit-animation: zoom-in-state-2 0.4s ease-in-out 1 forwards, anim-3 0.6s 0.4s infinite;
	-ms-animation: zoom-in-state-2 0.4s ease-in-out 1 forwards, anim-3 0.6s 0.4s infinite;
	animation: zoom-in-state-2 0.4s ease-in-out 1 forwards, anim-3 0.6s 0.4s infinite;
}
 @-ms-keyframes anim-1 {
 0% {
 left: 50%;
}
 100% {
 left: 90%;
}
}
@-webkit-keyframes anim-1 {
 0% {
 left: 50%;
}
 100% {
 left: 90%;
}
}
@keyframes anim-1 {
 0% {
 left: 50%;
}
 100% {
 left: 90%;
}
}
@-ms-keyframes anim-2 {
 0% {
 -ms-transform: rotate(-35deg);
 transform: rotate(-35deg);
}
 25% {
 -ms-transform: rotate(-30deg);
 transform: rotate(-30deg);
}
 50% {
 -ms-transform: rotate(-35deg);
 transform: rotate(-35deg);
}
 75% {
 -ms-transform: rotate(-30deg);
 transform: rotate(-30deg);
}
 100% {
 -ms-transform: rotate(-35deg);
 transform: rotate(-35deg);
}
}
@-webkit-keyframes anim-2 {
 0% {
 -webkit-transform: rotate(-35deg);
 transform: rotate(-35deg);
}
 25% {
 -webkit-transform: rotate(-30deg);
 transform: rotate(-30deg);
}
 50% {
 -webkit-transform: rotate(-35deg);
 transform: rotate(-35deg);
}
 75% {
 -webkit-transform: rotate(-30deg);
 transform: rotate(-30deg);
}
 100% {
 -webkit-transform: rotate(-35deg);
 transform: rotate(-35deg);
}
}
@keyframes anim-2 {
 0% {
 -webkit-transform: rotate(-35deg);
 transform: rotate(-35deg);
}
 25% {
 -webkit-transform: rotate(-30deg);
 transform: rotate(-30deg);
}
 50% {
 -webkit-transform: rotate(-35deg);
 transform: rotate(-35deg);
}
 75% {
 -webkit-transform: rotate(-30deg);
 transform: rotate(-30deg);
}
 100% {
 -webkit-transform: rotate(-35deg);
 transform: rotate(-35deg);
}
}
@-ms-keyframes anim-3 {
 0% {
 -ms-transform: rotate(150deg);
 transform: rotate(150deg);
 left: 50%;
}
 50% {
 -ms-transform: rotate(150deg);
 transform: rotate(150deg);
 left: 90%;
}
 100% {
 -ms-transform: rotate(150deg);
 transform: rotate(150deg);
 left: 50%;
}
}
@-webkit-keyframes anim-3 {
 0% {
 -webkit-transform: rotate(150deg);
 transform: rotate(150deg);
 left: 50%;
}
 50% {
 -webkit-transform: rotate(150deg);
 transform: rotate(150deg);
 left: 90%;
}
 100% {
 -webkit-transform: rotate(150deg);
 transform: rotate(150deg);
 left: 50%;
}
}
@keyframes anim-3 {
 0% {
 -webkit-transform: rotate(150deg);
 transform: rotate(150deg);
 left: 50%;
}
 50% {
 -webkit-transform: rotate(150deg);
 transform: rotate(150deg);
 left: 90%;
}
 100% {
 -webkit-transform: rotate(150deg);
 transform: rotate(150deg);
 left: 50%;
}
}
@-ms-keyframes zoom-out {
 0% {
 -ms-transform: scale(1) rotate(-35deg);
 transform: scale(1) rotate(-35deg);
}
 100% {
 -ms-transform: scale(0) rotate(-180deg);
 transform: scale(0) rotate(-180deg);
}
}
@-webkit-keyframes zoom-out {
 0% {
 -webkit-transform: scale(1) rotate(-35deg);
 transform: scale(1) rotate(-35deg);
}
 100% {
 -webkit-transform: scale(0) rotate(-180deg);
 transform: scale(0) rotate(-180deg);
}
}
@keyframes zoom-out {
 0% {
 -webkit-transform: scale(1) rotate(-35deg);
 transform: scale(1) rotate(-35deg);
}
 100% {
 -webkit-transform: scale(0) rotate(-180deg);
 transform: scale(0) rotate(-180deg);
}
}
@-ms-keyframes zoom-in-state-1 {
 0% {
 -ms-transform: scale(0) rotate(-180deg);
 transform: scale(0) rotate(-180deg);
}
 100% {
 -ms-transform: scale(1) rotate(-35deg);
 transform: scale(1) rotate(-35deg);
}
}
@-webkit-keyframes zoom-in-state-1 {
 0% {
 -webkit-transform: scale(0) rotate(-180deg);
 transform: scale(0) rotate(-180deg);
}
 100% {
 -webkit-transform: scale(1) rotate(-35deg);
 transform: scale(1) rotate(-35deg);
}
}
@keyframes zoom-in-state-1 {
 0% {
 -webkit-transform: scale(0) rotate(-180deg);
 transform: scale(0) rotate(-180deg);
}
 100% {
 -webkit-transform: scale(1) rotate(-35deg);
 transform: scale(1) rotate(-35deg);
}
}
@-ms-keyframes zoom-in-state-2 {
 0% {
 -ms-transform: scale(0) rotate(-35deg);
 transform: scale(0) rotate(-35deg);
}
 100% {
 left: 50%;
 -ms-transform: scale(1) rotate(150deg);
 transform: scale(1) rotate(150deg);
}
}
@-webkit-keyframes zoom-in-state-2 {
 0% {
 -webkit-transform: scale(0) rotate(-35deg);
 transform: scale(0) rotate(-35deg);
}
 100% {
 left: 50%;
 -webkit-transform: scale(1) rotate(150deg);
 transform: scale(1) rotate(150deg);
}
}
@keyframes zoom-in-state-2 {
 0% {
 -webkit-transform: scale(0) rotate(-35deg);
 transform: scale(0) rotate(-35deg);
}
 100% {
 left: 50%;
 -webkit-transform: scale(1) rotate(150deg);
 transform: scale(1) rotate(150deg);
}
}
@-ms-keyframes line {
 0% {
 left: 40%;
}
 100% {
 left: 40%;
 width: 40%;
}
}
@-webkit-keyframes line {
 0% {
 left: 40%;
}
 100% {
 left: 40%;
 width: 40%;
}
}
@keyframes line {
 0% {
 left: 40%;
}
 100% {
 left: 40%;
 width: 40%;
}
}
.mfInput input[name='phone'] ~ .mfIcon span:before, .mfInput select[name='phone'] ~ .mfIcon span:before, .mfInput textarea[name='phone'] ~ .mfIcon span:before {
 content: "";
}
.mfInput input[name='email'] ~ .mfIcon span:before, .mfInput select[name='email'] ~ .mfIcon span:before, .mfInput textarea[name='email'] ~ .mfIcon span:before {
 content: "";
}
.mfInput input[name='name'] ~ .mfIcon span:before, .mfInput select[name='name'] ~ .mfIcon span:before, .mfInput textarea[name='name'] ~ .mfIcon span:before {
 content: "";
}
.mfInput input[name='birthday'] ~ .mfIcon span:before, .mfInput select[name='birthday'] ~ .mfIcon span:before, .mfInput textarea[name='birthday'] ~ .mfIcon span:before {
 content: "";
}
.mfInput input[name='message'] ~ .mfIcon, .mfInput select[name='message'] ~ .mfIcon, .mfInput textarea[name='message'] ~ .mfIcon {
 display: none;
}
.mfInput input:-webkit-autofill ~ .mfIcon span:before, .mfInput textarea:-webkit-autofill ~ .mfIcon span:before {
 color: #2D2D2D;
}
/* Mail Form Select
========================================================*/
.mfSelect {
	position: relative;
}
.mfSelect .dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-top: 15px;
	max-height: 300px;
	opacity: 0;
	visibility: hidden;
	border: 1px solid #888;
	box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.3);
	-webkit-transition: 0.5s all ease-in-out;
	transition: 0.5s all ease-in-out;
	-webkit-animation: dropd-anim-fo 0.4s ease-in-out forwards;
	-ms-animation: dropd-anim-fo 0.4s ease-in-out forwards;
	animation: dropd-anim-fo 0.4s ease-in-out forwards;
	outline: none;
	-webkit-appearance: none;
	font-weight: inherit;
	line-height: 22px;
	border: 1px solid #bebebe;
	background: #FFF;
	color: #4C3469;
	border-radius: 0px;
}
.mfSelect .dropdown .option {
	position: relative;
	z-index: 1;
	text-transform: uppercase;
	cursor: pointer;
	padding: 10px 15px;
	overflow: hidden;
	-webkit-transition: 0.4s all ease-in-out;
	transition: 0.4s all ease-in-out;
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}
.mfSelect .dropdown .option.selected {
	background: #ececec;
}
.mfSelect .dropdown .option:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: #4C3469;
	opacity: 0;
	z-index: -1;
	-webkit-transition: 0.4s all ease-in-out;
	transition: 0.4s all ease-in-out;
	-webkit-transform: translate(-20%, -50%);
	-ms-transform: translate(-20%, -50%);
	transform: translate(-20%, -50%);
}
.mfSelect .dropdown .option:before {
	content: '\e18e';
	position: absolute;
	display: inline-block;
	left: 15px;
	color: #FFF;
	font: 400 20px 'material-design';
	line-height: inherit;
	-webkit-transition: 0.4s all ease-in-out;
	transition: 0.4s all ease-in-out;
	-webkit-transform: scale(0) rotate(-60deg);
	-ms-transform: scale(0) rotate(-60deg);
	transform: scale(0) rotate(-60deg);
}
.mfSelect .dropdown .option:hover {
	color: #FFF;
	padding-left: 40px;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}
.mfSelect .dropdown .option:hover:before {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
	-webkit-transform: scale(1) rotate(0deg);
	-ms-transform: scale(1) rotate(0deg);
	transform: scale(1) rotate(0deg);
}
.mfSelect .dropdown .option:hover:after {
	width: 500px;
	height: 500px;
	opacity: 1;
}
.mfSelect .dropdown:before {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 15px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 6px 6px 6px;
	border-color: transparent transparent #fff transparent;
}
.mfSelect .value {
	cursor: pointer;
	-webkit-transition: 0.4s all ease-in-out;
	transition: 0.4s all ease-in-out;
	font-family: "Open Sans", sans-serif;
	font-size: 18px;
	padding: 20px;
	line-height: 22px;
	color: #5c5c5c;
	background: #e8e8e8;
	border: 1px solid #bebebe;
	border-radius: 0px;
}
.mfSelect .value:before, .mfSelect .value:after {
	position: absolute;
	right: 12px;
	top: 20px;
	width: 24px;
	height: 24px;
	font: 400 20px 'material-design';
	line-height: 24px;
	color: #FFF;
	text-align: center;
	-webkit-transition: 0.4s all ease;
	transition: 0.4s all ease;
}
.mfSelect .value:before {
	content: '\e151';
	-webkit-transform: rotate(-90deg) scale(1);
	-ms-transform: rotate(-90deg) scale(1);
	transform: rotate(-90deg) scale(1);
}
.mfSelect .value:after {
	content: '\e07b';
	font-size: 24px;
	-webkit-transform: rotate(-180deg) scale(0);
	-ms-transform: rotate(-180deg) scale(0);
	transform: rotate(-180deg) scale(0);
}
.mfSelect .value:hover {
	background: #FFF;
	color: #2D2D2D;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
}
.mfSelect .value:hover:before, .mfSelect .value:hover:after {
	color: #2D2D2D;
}
.mfSelect.show .dropdown {
	-webkit-animation: dropd-anim 0.5s ease-in-out forwards;
	-ms-animation: dropd-anim 0.5s ease-in-out forwards;
	animation: dropd-anim 0.5s ease-in-out forwards;
	opacity: 1;
	z-index: 1;
	visibility: visible;
}
.mfSelect.show .value {
	background: #FFF;
	color: #2D2D2D;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
}
.mfSelect.show .value:before, .mfSelect.show .value:after {
	color: #2D2D2D;
}
.mfSelect.show .value:before {
	-webkit-transform: rotate(0deg) scale(0);
	-ms-transform: rotate(0deg) scale(0);
	transform: rotate(0deg) scale(0);
}
.mfSelect.show .value:after {
	-webkit-transform: rotate(0deg) scale(1);
	-ms-transform: rotate(0deg) scale(1);
	transform: rotate(0deg) scale(1);
}
 @-ms-keyframes dropd-anim-fo {
 0% {
 opacity: 1;
 -ms-transform: translateY(0);
 transform: translateY(0);
}
 20% {
 opacity: 1;
 -ms-transform: translateY(-5px);
 transform: translateY(-5px);
}
 100% {
 -ms-transform: translateY(30px);
 transform: translateY(30px);
 opacity: 0;
}
}
@-webkit-keyframes dropd-anim-fo {
 0% {
 opacity: 1;
 -webkit-transform: translateY(0);
 transform: translateY(0);
}
 20% {
 opacity: 1;
 -webkit-transform: translateY(-5px);
 transform: translateY(-5px);
}
 100% {
 -webkit-transform: translateY(30px);
 transform: translateY(30px);
 opacity: 0;
}
}
@keyframes dropd-anim-fo {
 0% {
 opacity: 1;
 -webkit-transform: translateY(0);
 transform: translateY(0);
}
 20% {
 opacity: 1;
 -webkit-transform: translateY(-5px);
 transform: translateY(-5px);
}
 100% {
 -webkit-transform: translateY(30px);
 transform: translateY(30px);
 opacity: 0;
}
}
@-ms-keyframes dropd-anim {
 0% {
 opacity: 0;
 -ms-transform: translateY(30px);
 transform: translateY(30px);
}
 50% {
 -ms-transform: translateY(0);
 transform: translateY(0);
}
 75% {
 -ms-transform: translateY(5px);
 transform: translateY(5px);
}
 100% {
 -ms-transform: translateY(0);
 transform: translateY(0);
 opacity: 1;
}
}
@-webkit-keyframes dropd-anim {
 0% {
 opacity: 0;
 -webkit-transform: translateY(30px);
 transform: translateY(30px);
}
 50% {
 -webkit-transform: translateY(0);
 transform: translateY(0);
}
 75% {
 -webkit-transform: translateY(5px);
 transform: translateY(5px);
}
 100% {
 -webkit-transform: translateY(0);
 transform: translateY(0);
 opacity: 1;
}
}
@keyframes dropd-anim {
 0% {
 opacity: 0;
 -webkit-transform: translateY(30px);
 transform: translateY(30px);
}
 50% {
 -webkit-transform: translateY(0);
 transform: translateY(0);
}
 75% {
 -webkit-transform: translateY(5px);
 transform: translateY(5px);
}
 100% {
 -webkit-transform: translateY(0);
 transform: translateY(0);
 opacity: 1;
}
}
/* Mail Form Date Picker
========================================================*/
.mfDatePicker {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 15px;
	padding: 10px 15px;
	opacity: 0;
	z-index: 1;
	visibility: hidden;
	box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.3);
	-webkit-transition: 0.5s all ease-in-out;
	transition: 0.5s all ease-in-out;
	-webkit-animation: dropd-anim-fo 0.4s ease-in-out forwards;
	-ms-animation: dropd-anim-fo 0.4s ease-in-out forwards;
	animation: dropd-anim-fo 0.4s ease-in-out forwards;
	background: #fff;
	color: #111;
	border-radius: 5px;
	border: 1px solid #fff;
}
.mfDatePicker:before {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 15px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 6px 6px 6px;
	border-color: transparent transparent #fff transparent;
}
.mfDatePicker table {
	text-align: center;
	border-collapse: separate;
	border-spacing: 3px;
	font-size: 12px;
}
.mfDatePicker table th {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 14px;
}
.mfDatePicker table td {
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	cursor: pointer;
	-webkit-transition: 0.3s all ease;
	transition: 0.3s all ease;
	border-radius: 50%;
}
.mfDatePicker table td:hover {
	background: #ececec;
}
.mfDatePicker table td.dp-offset {
	color: #c6bbba;
}
.mfDatePicker table td.dp-today {
	color: #fff;
	background: #111;
}
.mfDatePicker table td.dp-selected {
	color: #fff;
	background: #4C3469;
}
.mfDatePicker_next, .mfDatePicker_prev {
	font: 400 22px 'material-design';
	line-height: inherit;
	text-align: center;
	color: #111;
	cursor: pointer;
}
.mfDatePicker_next:hover, .mfDatePicker_prev:hover {
	color: #4C3469;
}
.mfDatePicker_panel {
	text-align: center;
	padding: 0 2px;
	line-height: 30px;
}
.mfDatePicker_next {
	float: right;
}
.mfDatePicker_next:before {
	content: '\e0c2';
}
.mfDatePicker_prev {
	float: left;
}
.mfDatePicker_prev:before {
	content: '\e0c3';
}
.mfDatePicker_panel + table {
	margin-top: 5px;
}
.mfDatePicker.open {
	-webkit-animation: dropd-anim 0.5s ease-in-out forwards;
	-ms-animation: dropd-anim 0.5s ease-in-out forwards;
	animation: dropd-anim 0.5s ease-in-out forwards;
	opacity: 1;
	visibility: visible;
}