/*========================================================
                      Contact Form
=========================================================*/
/* MF
========================================================*/
.mailform {
  position    : relative;
  text-align  : right;
  margin-left : auto;
  margin-right: auto;
  direction   : rtl;
}

.mailform fieldset {
  border: none;
}

.mailform * {
  -moz-box-sizing   : border-box;
  -webkit-box-sizing: border-box;
  box-sizing        : border-box;
}

.mailform label {
  position  : relative;
  display   : block;
  margin-top: 33px;
  float     : right;
}

.mailform label input,
.mailform label select,
.mailform label textarea {
  display              : block;
  width                : 100%;
  margin               : 0;
  -webkit-appearance   : none;
  outline              : none;
  font-family          : "Roboto", sans-serif;
  font-size            : 21px;
  padding              : 10px 15px;
  line-height          : 24px;
  color                : #fff;
  background           : transparent;
  border               : none;
  border-radius        : none;
  border-bottom        : 1px solid #fff;
  -webkit-border-radius: 0px;
  -moz-border-radius   : 0px;
  direction            : rtl;
  text-align           : right;
}

section.contact .mailform label input,
section.contact .mailform label select,
section.contact .mailform label textarea {
  width        : 50%;
  border       : 3px solid #fff;
  border-radius: 10px;
}

.mailform label input:-moz-placeholder,
.mailform label select:-moz-placeholder,
.mailform label textarea:-moz-placeholder {
  color  : #fff;
  opacity: 1;
}

.mailform label input::-webkit-input-placeholder,
.mailform label select::-webkit-input-placeholder,
.mailform label textarea::-webkit-input-placeholder {
  color  : #fff;
  opacity: 1;
}

.mailform label input::-moz-placeholder,
.mailform label select::-moz-placeholder,
.mailform label textarea::-moz-placeholder {
  color  : #fff;
  opacity: 1;
}

.mailform label input:-ms-input-placeholder,
.mailform label select:-ms-input-placeholder,
.mailform label textarea:-ms-input-placeholder {
  color  : #fff;
  opacity: 1;
}

.mailform label textarea {
  resize  : vertical;
  overflow: auto;
  height  : 130px;
}

@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           : 17px; */
  top               : 0;
  padding           : 10px 15px;
  font-size         : 21px;
  line-height       : 24px;
  color             : #fff;
  font-weight       : 400;
  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(-75%) scale(0.8);
  -ms-transform    : translateY(-75%) scale(0.8);
  -o-transform     : translateY(-75%) scale(0.8);
  -webkit-transform: translateY(-75%) scale(0.8);
  transform        : translateY(-75%) scale(0.8);
}

.mfPlaceHolder.state-1 {
  opacity          : .4;
  -moz-transform   : translateY(-75%) scale(0.8);
  -ms-transform    : translateY(-75%) scale(0.8);
  -o-transform     : translateY(-75%) scale(0.8);
  -webkit-transform: translateY(-75%) scale(0.8);
  transform        : translateY(-75%) scale(0.8);
}

/* 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-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);
  -webkit-border-radius   : 5px;
  -moz-border-radius      : 5px;
  border-radius           : 5px;
  position                : absolute;
  margin-top              : -20px;
  margin-left             : 10px;
  font-weight             : 300;
  font-size               : 12px;
  background              : #111;
  color                   : #FFF;
  opacity                 : 0;
  visibility              : hidden;
  cursor                  : pointer;
  z-index                 : 998;
  line-height             : 12px;
  height                  : 20px;
  padding                 : 3px 7px;
  right                   : 0;
  top                     : 8px;
  width                   : 167px;
}

.mfValidation:hover {
  background: #231634;
}

.mfValidation:before {
  content           : '';
  position          : absolute;
  width             : 0;
  height            : 0;
  border-style      : solid;
  border-width      : 4px 5px 4px 0;
  border-color      : transparent #111 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;
  z-index           : 9998;
  border-width      : 6px 12px 6px 0;
  right             : 161px;
  top               : 12px;
  -moz-transform    : rotate(-45deg);
  -ms-transform     : rotate(-45deg);
  -o-transform      : rotate(-45deg);
  -webkit-transform : rotate(-45deg);
  transform         : rotate(-45deg);
}

.mfValidation:hover:before {
  border-left-color: #231634;
}

.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;
}

@media (max-width: 767px) {
  .mfValidation {
    text-align        : right;
    top               : auto;
    left              : auto;
    bottom            : 100%;
    right             : 10px;
    background        : none;
    padding           : 0;
    margin            : 0 0 3px;
    min-height        : 0;
    color             : #FF0000;
    -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  : 101px;
  word-spacing: 10px;
  text-align  : center;
}

@media (max-width: 991px) {
  .mfControls {
    text-align: center;
  }
}

.mfControls>* {
  word-spacing : normal;
  margin-bottom: 5px;
}

/* Mail Form Submit
========================================================*/
.mfProgress {
  position: relative;
}

.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;
  background-color: #fff;
  border-radius   : 50%;
}

.mfProgress .loader:after {
  content           : '';
  width             : 30px;
  height            : 30px;
  color             : #fff;
  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          : 1;
}

.mfProgress.sending .loader,
.mfProgress.fail .loader,
.mfProgress.success .loader {
  opacity          : 0;
  -moz-transform   : scale(1);
  -ms-transform    : scale(1);
  -o-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;
  -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);
}

.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           : 0px;
  font-size               : 21px;
  line-height             : 20px;
  opacity                 : 0;
  visibility              : hidden;
  top                     : 100%;
  left                    : 50%;
  width                   : 230px;
  margin-left             : -115px;
  margin-top              : 20px;
  color                   : #fff;
  -moz-transform-origin   : 50% 100%;
  -ms-transform-origin    : 50% 100%;
  -o-transform-origin     : 50% 100%;
  -webkit-transform-origin: 50% 100%;
  transform-origin        : 50% 100%;
}

.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);
  }
}