@import url(material-design.css);

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

                      Contact Form

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

/* MF

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

.mailform {

  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 label {

  position: relative;

  display: block;

  width: 100%;

  margin-top: 40px; }

  .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: "Roboto", sans-serif;

    font-size: 15px;

    padding: 29px 70px;

    line-height: 16px;

    color: #5a585d;

    background: transperent;

    border: 1px solid #2c2a31;

    -webkit-border-radius: 15px;

    -moz-border-radius: 15px;

    border-radius: 15px; }

    @media (max-width: 479px) {

      .mailform label input, .mailform label select, .mailform label textarea {

        padding: 29px 20px; } }

    .mailform label input:-moz-placeholder, .mailform label select:-moz-placeholder, .mailform label textarea:-moz-placeholder {

      color: #5a585d;

      opacity: 1; }

    .mailform label input::-webkit-input-placeholder, .mailform label select::-webkit-input-placeholder, .mailform label textarea::-webkit-input-placeholder {

      color: #5a585d;

      opacity: 1; }

    .mailform label input::-moz-placeholder, .mailform label select::-moz-placeholder, .mailform label textarea::-moz-placeholder {

      color: #5a585d;

      opacity: 1; }

    .mailform label input:-ms-input-placeholder, .mailform label select:-ms-input-placeholder, .mailform label textarea:-ms-input-placeholder {

      color: #5a585d;

      opacity: 1; }

  .mailform label textarea {

    margin-top: 22px;

    resize: vertical;

    overflow: auto;

    height: 333px; }

  @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: 29px 70px;

  line-height: 16px;

  color: #5a585d;

  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(-30%);

    -ms-transform: translateY(-30%);

    -o-transform: translateY(-30%);

    -webkit-transform: translateY(-30%);

    transform: translateY(-30%); }

  .mfPlaceHolder.state-1 {

    opacity: .4;

    -moz-transform: translateY(-30%);

    -ms-transform: translateY(-30%);

    -o-transform: translateY(-30%);

    -webkit-transform: translateY(-30%);

    transform: translateY(-30%); }



/* 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.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;

  top: -25px;

  left: 0;

  width: 200px;

  margin-top: -20px;

  margin-left: 10px;

  padding: 10px;

  min-height: 40px;

  font-weight: 300;

  font-size: 12px;

  line-height: 20px;

  background: #111;

  color: #cedb00;

  opacity: 0;

  visibility: hidden;

  cursor: pointer;

  z-index: 998; }

  .mfValidation:hover {

    background: #231634; }

  .mfValidation:before {

    content: '';

    position: absolute;

    right: 50%;

    top: 106%;

    -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: 5px 4px 0 4px;

    border-color: #111 transparent transparent transparent; }

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

      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: 25px;

  word-spacing: 10px;

  text-align: center; }

  .mfControls > * {

    display: inline-block;

    word-spacing: normal;

    margin-top: 5px;

    padding: 16px 76px;

    -moz-transition: 0.3s ease all;

    -o-transition: 0.3s ease all;

    -webkit-transition: 0.3s ease all;

    transition: 0.3s ease all;

    background: #000;

    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: #b60b00;

      font: 400 31px 'material-design';

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

  .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: '\e03b'; }

  .mfProgress.success .loader:after {

    content: '\e04b'; }



.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: 15px;

  font-size: 15px;

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