/*========================================================
Contact Form
=========================================================*/
/* MF
========================================================*/
.mailform {
margin-top: 9px;
position: relative;
text-align: right;
margin-right: auto;
margin-left: auto;
}
.mailform fieldset {
border: none;
}
.mailform * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.mailform .offset1 {
margin-top: 60px;
}

.mailform label {
position: relative;
display: block;
width: 100%;
margin-top: 30px;
}
.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-weight: 300;
font-family: "Heebo", sans-serif;
font-size: 16px;
padding: 10px 27px 10px 19px;
line-height: 24px;
color: #525252;
background: rgba(255, 255, 255, 0);
border: none;
border-bottom: 1px solid #a7a7a7;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
@media (max-width: 479px) {
.mailform label input, .mailform label select, .mailform label textarea {
padding: 19px 20px;
}
}
.mailform label input:-moz-placeholder, .mailform label select:-moz-placeholder, .mailform label textarea:-moz-placeholder {
color: #525252;
opacity: 1;
}
.mailform label input::-webkit-input-placeholder, .mailform label select::-webkit-input-placeholder, .mailform label textarea::-webkit-input-placeholder {
color: #525252;
opacity: 1;
}
.mailform label input::-moz-placeholder, .mailform label select::-moz-placeholder, .mailform label textarea::-moz-placeholder {
color: #525252;
opacity: 1;
}
.mailform label input:-ms-input-placeholder, .mailform label select:-ms-input-placeholder, .mailform label textarea:-ms-input-placeholder {
color: #525252;
opacity: 1;
}
.mailform label textarea {
resize: vertical;
overflow: auto;
height: 317px;
border: 1px solid #a7a7a7;
}
@media (max-width: 1365px) {
.mailform label {
margin-top: 30px;
}
}

@-ms-keyframes fout {
0% {
transform: scale(1) translateX(0);
}
100% {
transform: scale(0) translateX(0);
}
}
@-o-keyframes fout {
0% {
transform: scale(1) translateX(0);
}
100% {
transform: scale(0) translateX(0);
}
}
@-webkit-keyframes fout {
0% {
transform: scale(1) translateX(0);
}
100% {
transform: scale(0) translateX(0);
}
}
@-moz-keyframes fout {
0% {
transform: scale(1) translateX(0);
}
100% {
transform: scale(0) translateX(0);
}
}
@keyframes fout {
0% {
transform: scale(1) translateX(0);
}
100% {
transform: scale(0) translateX(0);
}
}
/* Mail Form PlaceHolder
========================================================*/
.mfPlaceHolder {
font: inherit;
cursor: text;
position: absolute;
right: 0;
top: 0;
padding: 10px 27px 10px 19px;
line-height: 24px;
color: #525252;
opacity: 1;
-moz-transition: 0.3s all ease;
-o-transition: 0.3s all ease;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}
*:-webkit-autofill ~ .mfPlaceHolder {
opacity: .4;
-moz-transform: translateY(-40%);
-ms-transform: translateY(-40%);
-o-transform: translateY(-40%);
-webkit-transform: translateY(-40%);
transform: translateY(-40%);
}
.mfPlaceHolder.state-1 {
font-size: 12px;
opacity: .4;
-moz-transform: translateY(-40%);
-ms-transform: translateY(-40%);
-o-transform: translateY(-40%);
-webkit-transform: translateY(-40%);
transform: translateY(-40%);
}

/* Mail Form Validation
========================================================*/
.mfValidation {
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-moz-transition: 0.3s all ease;
-o-transition: 0.3s all ease;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
-webkit-animation: notifanim-fo 0.4s cubic-bezier(0.55, 0, 0.1, 1) forwards;
-moz-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;
-o-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;
-webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1);
box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: absolute;
top: -25px;
right: 0;
width: 200px;
margin-top: -12px;
margin-right: 10px;
padding: 5px;
height: 30px;
font-weight: 300;
font-size: 12px;
line-height: 20px;
background: #e1e4f4;
color: #205b55;
opacity: 0;
visibility: hidden;
cursor: pointer;
z-index: 998;
}
.mfValidation:hover {
background: #e1e4f4;
}
.mfValidation:before {
content: '';
position: absolute;
left: 50%;
top: 100%;
margin-top: 4px;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 8px 5px 0 5px;
border-color: #e1e4f4 transparent transparent transparent;
-moz-transition: 0.3s all ease;
-o-transition: 0.3s all ease;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}
.mfValidation.error {
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-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;
-moz-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;
-o-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;
}
@media (max-width: 767px) {
.mfValidation {
text-align: left;
top: auto;
top: 0;
right: auto;
bottom: 100%;
left: 0;
background: none;
padding: 0;
margin: 0 0 3px;
min-height: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.mfValidation:before {
display: none;
}
.mfValidation:hover {
background: none;
left: 5px;
}
}

@-ms-keyframes notifanim-fo {
0% {
opacity: 1;
visibility: visible;
transform: scale(1);
}
20% {
opacity: 1;
transform: scale(1.1);
}
99% {
visibility: hidden;
}
100% {
visibility: hidden;
transform: scale(0.3);
opacity: 0;
}
}
@-o-keyframes notifanim-fo {
0% {
opacity: 1;
visibility: visible;
transform: scale(1);
}
20% {
opacity: 1;
transform: scale(1.1);
}
99% {
visibility: hidden;
}
100% {
visibility: hidden;
transform: scale(0.3);
opacity: 0;
}
}
@-webkit-keyframes notifanim-fo {
0% {
opacity: 1;
visibility: visible;
transform: scale(1);
}
20% {
opacity: 1;
transform: scale(1.1);
}
99% {
visibility: hidden;
}
100% {
visibility: hidden;
transform: scale(0.3);
opacity: 0;
}
}
@-moz-keyframes notifanim-fo {
0% {
opacity: 1;
visibility: visible;
transform: scale(1);
}
20% {
opacity: 1;
transform: scale(1.1);
}
99% {
visibility: hidden;
}
100% {
visibility: hidden;
transform: scale(0.3);
opacity: 0;
}
}
@keyframes notifanim-fo {
0% {
opacity: 1;
visibility: visible;
transform: scale(1);
}
20% {
opacity: 1;
transform: scale(1.1);
}
99% {
visibility: hidden;
}
100% {
visibility: hidden;
transform: scale(0.3);
opacity: 0;
}
}
@-ms-keyframes notifanim {
0% {
opacity: 0;
visibility: hidden;
transform: scale(0.3);
}
1% {
visibility: visible;
}
50% {
transform: scale(1);
}
75% {
transform: scale(0.9);
}
100% {
transform: scale(1);
opacity: 1;
}
}
@-o-keyframes notifanim {
0% {
opacity: 0;
visibility: hidden;
transform: scale(0.3);
}
1% {
visibility: visible;
}
50% {
transform: scale(1);
}
75% {
transform: scale(0.9);
}
100% {
transform: scale(1);
opacity: 1;
}
}
@-webkit-keyframes notifanim {
0% {
opacity: 0;
visibility: hidden;
transform: scale(0.3);
}
1% {
visibility: visible;
}
50% {
transform: scale(1);
}
75% {
transform: scale(0.9);
}
100% {
transform: scale(1);
opacity: 1;
}
}
@-moz-keyframes notifanim {
0% {
opacity: 0;
visibility: hidden;
transform: scale(0.3);
}
1% {
visibility: visible;
}
50% {
transform: scale(1);
}
75% {
transform: scale(0.9);
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes notifanim {
0% {
opacity: 0;
visibility: hidden;
transform: scale(0.3);
}
1% {
visibility: visible;
}
50% {
transform: scale(1);
}
75% {
transform: scale(0.9);
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* MF Controls
========================================================*/
.mfControls {
margin-top: 11px;
word-spacing: 10px;
text-align: center;
text-align: right;
/*button:hover {background-color: darken(desaturate(adjust_hue(map-get($scheme, default), -225.0000000000001), 1.612903225806457%), 51.37254901960784%);;}*/
}
@media (max-width: 479px) {
.mfControls {
text-align: center;
}
}
.mfControls > * {
text-transform: none;
display: inline-block;
word-spacing: normal;
margin-top: 30px;
text-transform: uppercase;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-transition: 0.3s ease all;
-o-transition: 0.3s ease all;
-webkit-transition: 0.3s ease all;
transition: 0.3s ease all;
color: #fff;
/*float: right;*/
}

/* Mail Form Submit
========================================================*/
.mfProgress {
position: relative;
}
.mfProgress .cnt, .mfProgress .loader {
-moz-transition: 0.4s all ease-in-out;
-o-transition: 0.4s all ease-in-out;
-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;
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.mfProgress .loader, .mfProgress .loader:before, .mfProgress .loader:after {
position: absolute;
right: 0;
bottom: 0;
top: 0;
left: 0;
margin: auto;
}
.mfProgress .loader:before {
content: '';
width: 20px;
height: 20px;
border-radius: 50%;
}
.mfProgress .loader:after {
content: '';
width: 30px;
height: 30px;
color: #050505;
font: 400 30px "FontAwesome";
line-height: inherit;
-moz-transition: 0.4s all ease-in-out;
-o-transition: 0.4s all ease-in-out;
-webkit-transition: 0.4s all ease-in-out;
transition: 0.4s all ease-in-out;
-moz-transform: scale(0) rotate(-60deg);
-ms-transform: scale(0) rotate(-60deg);
-o-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 {
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
opacity: 0;
}
.lt-ie9 .mfProgress.sending .cnt, .lt-ie9 .mfProgress.fail .cnt, .lt-ie9 .mfProgress.success .cnt {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.mfProgress.sending .loader, .mfProgress.fail .loader, .mfProgress.success .loader {
opacity: 1;
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
.lt-ie9 .mfProgress.sending .loader, .lt-ie9 .mfProgress.fail .loader, .lt-ie9 .mfProgress.success .loader {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
filter: alpha(opacity=100);
}
.mfProgress.fail .loader:before, .mfProgress.success .loader:before {
-webkit-animation: fout 0.4s ease-in-out 1 forwards;
-moz-animation: fout 0.4s ease-in-out 1 forwards;
-ms-animation: fout 0.4s ease-in-out 1 forwards;
-o-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 {
-moz-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-webkit-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
color: #fff;
}
.mfProgress.sending .loader:before {
-webkit-animation: motion 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;
-moz-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;
-o-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 {
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-moz-transition: 0.3s all ease;
-o-transition: 0.3s all ease;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
-webkit-animation: notifanim-fo 0.4s ease-in-out forwards;
-moz-animation: notifanim-fo 0.4s ease-in-out forwards;
-ms-animation: notifanim-fo 0.4s ease-in-out forwards;
-o-animation: notifanim-fo 0.4s ease-in-out forwards;
animation: notifanim-fo 0.4s ease-in-out forwards;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.5);
position: absolute;
padding: 10px;
border-radius: 0;
font-size: 16px;
line-height: 20px;
opacity: 0;
visibility: hidden;
top: 100%;
right: 50%;
width: 230px;
margin-right: -115px;
margin-top: 20px;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
background: #111;
color: #fff;
}
.mfProgress .msg:before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translate(50%, 0%);
width: 0;
height: 0;
border-style: solid;
border-width: 0 6px 6px 6px;
border-color: transparent transparent #111 transparent;
-moz-transition: 0.4s all ease-in-out;
-o-transition: 0.4s all ease-in-out;
-webkit-transition: 0.4s all ease-in-out;
transition: 0.4s all ease-in-out;
}
.mfProgress.fail .msg, .mfProgress.success .msg {
transform: scale(1);
opacity: 1;
visibility: visible;
-webkit-animation: notifanim 0.4s ease-in-out forwards;
-moz-animation: notifanim 0.4s ease-in-out forwards;
-ms-animation: notifanim 0.4s ease-in-out forwards;
-o-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% {
transform: translateX(0) scale(1);
}
25% {
transform: translateX(-50px) scale(0.3);
}
50% {
transform: translateX(0) scale(1);
}
75% {
transform: translateX(50px) scale(0.3);
}
100% {
transform: translateX(0) scale(1);
}
}
@-o-keyframes motion {
0% {
transform: translateX(0) scale(1);
}
25% {
transform: translateX(-50px) scale(0.3);
}
50% {
transform: translateX(0) scale(1);
}
75% {
transform: translateX(50px) scale(0.3);
}
100% {
transform: translateX(0) scale(1);
}
}
@-webkit-keyframes motion {
0% {
transform: translateX(0) scale(1);
}
25% {
transform: translateX(-50px) scale(0.3);
}
50% {
transform: translateX(0) scale(1);
}
75% {
transform: translateX(50px) scale(0.3);
}
100% {
transform: translateX(0) scale(1);
}
}
@-moz-keyframes motion {
0% {
transform: translateX(0) scale(1);
}
25% {
transform: translateX(-50px) scale(0.3);/*========================================================
Contact Form
=========================================================*/
/* MF
========================================================*/
.mailform {
margin-top: 9px;
position: relative;
text-align: left;
margin-left: auto;
margin-right: auto;
}
.mailform fieldset {
border: none;
}
.mailform * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.mailform .offset1 {
margin-top: 60px;
}

.mailform label {
position: relative;
display: block;
width: 100%;
margin-top: 30px;
}
.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-weight: 300;
font-family: "Heebo", sans-serif;
font-size: 16px;
padding: 10px 19px 10px 27px;
line-height: 24px;
color: #525252;
background: rgba(255, 255, 255, 0);
border: none;
border-bottom: 1px solid #a7a7a7;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
@media (max-width: 479px) {
.mailform label input, .mailform label select, .mailform label textarea {
padding: 19px 20px;
}
}
.mailform label input:-moz-placeholder, .mailform label select:-moz-placeholder, .mailform label textarea:-moz-placeholder {
color: #525252;
opacity: 1;
}
.mailform label input::-webkit-input-placeholder, .mailform label select::-webkit-input-placeholder, .mailform label textarea::-webkit-input-placeholder {
color: #525252;
opacity: 1;
}
.mailform label input::-moz-placeholder, .mailform label select::-moz-placeholder, .mailform label textarea::-moz-placeholder {
color: #525252;
opacity: 1;
}
.mailform label input:-ms-input-placeholder, .mailform label select:-ms-input-placeholder, .mailform label textarea:-ms-input-placeholder {
color: #525252;
opacity: 1;
}
.mailform label textarea {
resize: vertical;
overflow: auto;
height: 317px;
border: 1px solid #a7a7a7;
}
@media (max-width: 1365px) {
.mailform label {
margin-top: 30px;
}
}

@-ms-keyframes fout {
0% {
transform: scale(1) translateX(0);
}
100% {
transform: scale(0) translateX(0);
}
}
@-o-keyframes fout {
0% {
transform: scale(1) translateX(0);
}
100% {
transform: scale(0) translateX(0);
}
}
@-webkit-keyframes fout {
0% {
transform: scale(1) translateX(0);
}
100% {
transform: scale(0) translateX(0);
}
}
@-moz-keyframes fout {
0% {
transform: scale(1) translateX(0);
}
100% {
transform: scale(0) translateX(0);
}
}
@keyframes fout {
0% {
transform: scale(1) translateX(0);
}
100% {
transform: scale(0) translateX(0);
}
}
/* Mail Form PlaceHolder
========================================================*/
.mfPlaceHolder {
font: inherit;
cursor: text;
position: absolute;
left: 0;
top: 0;
padding: 10px 19px 10px 27px;
line-height: 24px;
color: #525252;
opacity: 1;
-moz-transition: 0.3s all ease;
-o-transition: 0.3s all ease;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}
*:-webkit-autofill ~ .mfPlaceHolder {
opacity: .4;
-moz-transform: translateY(-40%);
-ms-transform: translateY(-40%);
-o-transform: translateY(-40%);
-webkit-transform: translateY(-40%);
transform: translateY(-40%);
}
.mfPlaceHolder.state-1 {
font-size: 12px;
opacity: .4;
-moz-transform: translateY(-40%);
-ms-transform: translateY(-40%);
-o-transform: translateY(-40%);
-webkit-transform: translateY(-40%);
transform: translateY(-40%);
}

/* Mail Form Validation
========================================================*/
.mfValidation {
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-moz-transition: 0.3s all ease;
-o-transition: 0.3s all ease;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
-webkit-animation: notifanim-fo 0.4s cubic-bezier(0.55, 0, 0.1, 1) forwards;
-moz-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;
-o-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;
-webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1);
box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: absolute;
top: -25px;
left: 0;
width: 200px;
margin-top: -12px;
margin-left: 10px;
padding: 5px;
height: 30px;
font-weight: 300;
font-size: 12px;
line-height: 20px;
background: #e1e4f4;
color: #205b55;
opacity: 0;
visibility: hidden;
cursor: pointer;
z-index: 998;
}
.mfValidation:hover {
background: #e1e4f4;
}
.mfValidation:before {
content: '';
position: absolute;
right: 50%;
top: 100%;
margin-top: 4px;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 8px 5px 0 5px;
border-color: #e1e4f4 transparent transparent transparent;
-moz-transition: 0.3s all ease;
-o-transition: 0.3s all ease;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}
.mfValidation.error {
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-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;
-moz-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;
-o-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;
}
@media (max-width: 767px) {
.mfValidation {
text-align: right;
top: auto;
top: 0;
left: auto;
bottom: 100%;
right: 0;
background: none;
padding: 0;
margin: 0 0 3px;
min-height: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.mfValidation:before {
display: none;
}
.mfValidation:hover {
background: none;
right: 5px;
}
}

@-ms-keyframes notifanim-fo {
0% {
opacity: 1;
visibility: visible;
transform: scale(1);
}
20% {
opacity: 1;
transform: scale(1.1);
}
99% {
visibility: hidden;
}
100% {
visibility: hidden;
transform: scale(0.3);
opacity: 0;
}
}
@-o-keyframes notifanim-fo {
0% {
opacity: 1;
visibility: visible;
transform: scale(1);
}
20% {
opacity: 1;
transform: scale(1.1);
}
99% {
visibility: hidden;
}
100% {
visibility: hidden;
transform: scale(0.3);
opacity: 0;
}
}
@-webkit-keyframes notifanim-fo {
0% {
opacity: 1;
visibility: visible;
transform: scale(1);
}
20% {
opacity: 1;
transform: scale(1.1);
}
99% {
visibility: hidden;
}
100% {
visibility: hidden;
transform: scale(0.3);
opacity: 0;
}
}
@-moz-keyframes notifanim-fo {
0% {
opacity: 1;
visibility: visible;
transform: scale(1);
}
20% {
opacity: 1;
transform: scale(1.1);
}
99% {
visibility: hidden;
}
100% {
visibility: hidden;
transform: scale(0.3);
opacity: 0;
}
}
@keyframes notifanim-fo {
0% {
opacity: 1;
visibility: visible;
transform: scale(1);
}
20% {
opacity: 1;
transform: scale(1.1);
}
99% {
visibility: hidden;
}
100% {
visibility: hidden;
transform: scale(0.3);
opacity: 0;
}
}
@-ms-keyframes notifanim {
0% {
opacity: 0;
visibility: hidden;
transform: scale(0.3);
}
1% {
visibility: visible;
}
50% {
transform: scale(1);
}
75% {
transform: scale(0.9);
}
100% {
transform: scale(1);
opacity: 1;
}
}
@-o-keyframes notifanim {
0% {
opacity: 0;
visibility: hidden;
transform: scale(0.3);
}
1% {
visibility: visible;
}
50% {
transform: scale(1);
}
75% {
transform: scale(0.9);
}
100% {
transform: scale(1);
opacity: 1;
}
}
@-webkit-keyframes notifanim {
0% {
opacity: 0;
visibility: hidden;
transform: scale(0.3);
}
1% {
visibility: visible;
}
50% {
transform: scale(1);
}
75% {
transform: scale(0.9);
}
100% {
transform: scale(1);
opacity: 1;
}
}
@-moz-keyframes notifanim {
0% {
opacity: 0;
visibility: hidden;
transform: scale(0.3);
}
1% {
visibility: visible;
}
50% {
transform: scale(1);
}
75% {
transform: scale(0.9);
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes notifanim {
0% {
opacity: 0;
visibility: hidden;
transform: scale(0.3);
}
1% {
visibility: visible;
}
50% {
transform: scale(1);
}
75% {
transform: scale(0.9);
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* MF Controls
========================================================*/
.mfControls {
margin-top: 11px;
word-spacing: 10px;
text-align: center;
text-align: left;
/*button:hover {background-color: darken(desaturate(adjust_hue(map-get($scheme, default), -225.0000000000001), 1.612903225806457%), 51.37254901960784%);;}*/
}
@media (max-width: 479px) {
.mfControls {
text-align: center;
}
}
.mfControls > * {
text-transform: none;
display: inline-block;
word-spacing: normal;
margin-top: 30px;
text-transform: uppercase;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-transition: 0.3s ease all;
-o-transition: 0.3s ease all;
-webkit-transition: 0.3s ease all;
transition: 0.3s ease all;
color: #fff;
/*float: left;*/
}

/* Mail Form Submit
========================================================*/
.mfProgress {
position: relative;
}
.mfProgress .cnt, .mfProgress .loader {
-moz-transition: 0.4s all ease-in-out;
-o-transition: 0.4s all ease-in-out;
-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;
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-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;
border-radius: 50%;
}
.mfProgress .loader:after {
content: '';
width: 30px;
height: 30px;
color: #050505;
font: 400 30px "FontAwesome";
line-height: inherit;
-moz-transition: 0.4s all ease-in-out;
-o-transition: 0.4s all ease-in-out;
-webkit-transition: 0.4s all ease-in-out;
transition: 0.4s all ease-in-out;
-moz-transform: scale(0) rotate(-60deg);
-ms-transform: scale(0) rotate(-60deg);
-o-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 {
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
opacity: 0;
}
.lt-ie9 .mfProgress.sending .cnt, .lt-ie9 .mfProgress.fail .cnt, .lt-ie9 .mfProgress.success .cnt {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.mfProgress.sending .loader, .mfProgress.fail .loader, .mfProgress.success .loader {
opacity: 1;
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
.lt-ie9 .mfProgress.sending .loader, .lt-ie9 .mfProgress.fail .loader, .lt-ie9 .mfProgress.success .loader {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
filter: alpha(opacity=100);
}
.mfProgress.fail .loader:before, .mfProgress.success .loader:before {
-webkit-animation: fout 0.4s ease-in-out 1 forwards;
-moz-animation: fout 0.4s ease-in-out 1 forwards;
-ms-animation: fout 0.4s ease-in-out 1 forwards;
-o-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 {
-moz-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-webkit-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
color: #fff;
}
.mfProgress.sending .loader:before {
-webkit-animation: motion 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;
-moz-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;
-o-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 {
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-moz-transition: 0.3s all ease;
-o-transition: 0.3s all ease;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
-webkit-animation: notifanim-fo 0.4s ease-in-out forwards;
-moz-animation: notifanim-fo 0.4s ease-in-out forwards;
-ms-animation: notifanim-fo 0.4s ease-in-out forwards;
-o-animation: notifanim-fo 0.4s ease-in-out forwards;
animation: notifanim-fo 0.4s ease-in-out forwards;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.5);
position: absolute;
padding: 10px;
border-radius: 0;
font-size: 16px;
line-height: 20px;
opacity: 0;
visibility: hidden;
top: 100%;
left: 50%;
width: 230px;
margin-left: -115px;
margin-top: 20px;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
background: #111;
color: #fff;
}
.mfProgress .msg:before {
content: '';
position: absolute;
bottom: 100%;
right: 50%;
transform: translate(50%, 0%);
width: 0;
height: 0;
border-style: solid;
border-width: 0 6px 6px 6px;
border-color: transparent transparent #111 transparent;
-moz-transition: 0.4s all ease-in-out;
-o-transition: 0.4s all ease-in-out;
-webkit-transition: 0.4s all ease-in-out;
transition: 0.4s all ease-in-out;
}
.mfProgress.fail .msg, .mfProgress.success .msg {
transform: scale(1);
opacity: 1;
visibility: visible;
-webkit-animation: notifanim 0.4s ease-in-out forwards;
-moz-animation: notifanim 0.4s ease-in-out forwards;
-ms-animation: notifanim 0.4s ease-in-out forwards;
-o-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% {
transform: translateX(0) scale(1);
}
25% {
transform: translateX(-50px) scale(0.3);
}
50% {
transform: translateX(0) scale(1);
}
75% {
transform: translateX(50px) scale(0.3);
}
100% {
transform: translateX(0) scale(1);
}
}
@-o-keyframes motion {
0% {
transform: translateX(0) scale(1);
}
25% {
transform: translateX(-50px) scale(0.3);
}
50% {
transform: translateX(0) scale(1);
}
75% {
transform: translateX(50px) scale(0.3);
}
100% {
transform: translateX(0) scale(1);
}
}
@-webkit-keyframes motion {
0% {
transform: translateX(0) scale(1);
}
25% {
transform: translateX(-50px) scale(0.3);
}
50% {
transform: translateX(0) scale(1);
}
75% {
transform: translateX(50px) scale(0.3);
}
100% {
transform: translateX(0) scale(1);
}
}
@-moz-keyframes motion {
0% {
transform: translateX(0) scale(1);
}
25% {
transform: translateX(-50px) scale(0.3);
}
50% {
transform: translateX(0) scale(1);
}
75% {
transform: translateX(50px) scale(0.3);
}
100% {
transform: translateX(0) scale(1);
}
}
@keyframes motion {
0% {
transform: translateX(0) scale(1);
}
25% {
transform: translateX(-50px) scale(0.3);
}
50% {
transform: translateX(0) scale(1);
}
75% {
transform: translateX(50px) scale(0.3);
}
100% {
transform: translateX(0) scale(1);
}
}


}
50% {
transform: translateX(0) scale(1);
}
75% {
transform: translateX(50px) scale(0.3);
}
100% {
transform: translateX(0) scale(1);
}
}
@keyframes motion {
0% {
transform: translateX(0) scale(1);
}
25% {
transform: translateX(-50px) scale(0.3);
}
50% {
transform: translateX(0) scale(1);
}
75% {
transform: translateX(50px) scale(0.3);
}
100% {
transform: translateX(0) scale(1);
}
}