/********************************************************************************
*                             BEM Methodology                                   *
*  [$] Block = block                                                            *
*  [$] Element = block__element                                                 *
*  [$] Modifier = block__element--modifier                                      *
*                                                                               *
*                          Contact Form Component                               *
*                                                                               *
*  [^]cf = Contact Form                                                         *                 
*                                                                               *
*  [@] Animation = Animation CSS                                                *
*  [#] Screen size: xs,sm,md,lg                                                 *
*                                                                               *
********************************************************************************/



.flip-card {
  border-radius: 0.5em;
  position: fixed;
  top: 1em;
  left: 1em;
  width: 5em;
  padding: 0.5em;
  border: 0.1em solid #fff;
  color: #333;
  text-align: center;
  cursor: pointer;
  z-index: 9;
}
.envelope {
  position: relative;
  display: block;
  width: 36em;
  height: 41em;
  margin: 0 auto;
}
.envelope.active .content {
  padding: 15em 2em 2em;
}
.envelope.active .paper.front,
.envelope.active .paper.back {
  animation-duration: 1.5s;
  animation-direction: normal;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.envelope.active .paper.front {
  animation-name: envelope-front;
}
.envelope.active .paper.back {
  animation-name: envelope-back;
}
.envelope.active .paper.back:before {
  animation-duration: 0.5s;
  animation-direction: normal;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 1.25s;
  animation-name: envelope-back-before;
}
.envelope.active .bottom-wrapper {
  transform: rotateX(180deg);
}
.envelope.active .bottom-wrapper:after {
  z-index: 0;
  opacity: 1;
}
.envelope .content {
  padding: 4.5em 3.5em 3.5em 3.5em;
  box-sizing: border-box;
  position: relative;
  z-index: 9;
  transition: all 0.5s ease-in-out;
  transition-delay: 1s;
  width: 36em;
}
.envelope .top-wrapper,
.envelope .bottom-wrapper {
  box-sizing: border-box;
  background: #fffff7;
  color: #333;
}
.envelope .top-wrapper {
  padding: 2em 2em 0;
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
}
.envelope .bottom-wrapper {
  padding: 0 2em 2em 2em;
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  transition: all 0.5s ease-in-out;
  transform-origin: top;
  transform-style: preserve-3d;
  position: relative;
  overflow: hidden;
  margin-top: -1px;
}
.envelope .bottom-wrapper:after {
  position: absolute;
  content: '';
  display: block;
  opacity: 0;
  background: #ffffff;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.envelope form label {
  display: block;
  padding-bottom: 0.3em;
  font-weight:normal;
}
.envelope form input,
.envelope form textarea {
  width: 100%;
  box-shadow: 0;
  background: transparent;
  color: #333;
}
.envelope form input {
  border-width: 0 0 0.1em;
  border-color: #dedede;
  border-style: solid;
}
.envelope form textarea {
  border: 0.1em solid #dedede;
  border-radius: 0.25em;
}
.envelope form .submit-card {
  background: transparent;
  color: #F26522;
  text-align: center;
  padding: 0.5em;
  box-sizing: border-box;
  width: 30%;
  border: 0;
  box-shadow: none;
  cursor: pointer;
  margin: 0 auto;
  border: 1px solid #F26522;
  font-size:0.8em;
}
.envelope form .submit-card:hover {
  color: #ffffff;
  background-color:#F26522;
}
.envelope form .input {
  padding-bottom: 1em;
}
.envelope .paper {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  overflow: hidden;
}
.envelope .paper.back {
  top: 0;
}
.envelope .paper.back:before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 18em 10em 18em;
  border-color: transparent transparent #DCDCDC transparent;
  transform-origin: bottom;
  transform-style: preserve-3d;
  z-index: 0;
}
.envelope .paper.back:after {
  content: '';
  display: block;
  background-color: #DCDCDC;
  width: 36em;
  height: 27em;
}
.envelope .paper.front {
  top: 10em;
  z-index: 0;
}
.envelope .paper.front:before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10em 18em 0 18em;
  border-color: transparent #E7E6E6;
}
.envelope .paper.front:after {
  content: '';
  display: block;
  width: 36em;
  height: 19em;
  background: #E7E6E6;
  margin-top: -1px;
}
.bottom-wrapper .submit {
    text-align:center;
}

/* [#] xs screen */

    @media (max-width: 767px) { 
        
        .flip-card {
          border-radius: 0.5em;
          position: fixed;
          top: 1em;
          left: 1em;
          width: 5em;
          padding: 0.5em;
          border: 0.1em solid #fff;
          color: #333;
          text-align: center;
          cursor: pointer;
          z-index: 9;
        }
        .envelope {
          position: relative;
          display: block;
          width: 24em;
          height: 16em;
          margin: 0 auto;
        }
        .envelope.active .content {
          padding: 15em 2em 2em;
        }
        .envelope.active .paper.front,
        .envelope.active .paper.back {
          animation-duration: 1.5s;
          animation-direction: normal;
          animation-timing-function: ease-in-out;
          animation-fill-mode: forwards;
        }
        .envelope.active .paper.front {
          animation-name: envelope-front;
        }
        .envelope.active .paper.back {
          animation-name: envelope-back;
        }
        .envelope.active .paper.back:before {
          animation-duration: 0.5s;
          animation-direction: normal;
          animation-timing-function: ease-in-out;
          animation-fill-mode: forwards;
          animation-delay: 1.25s;
          animation-name: envelope-back-before;
        }
        .envelope.active .bottom-wrapper {
          transform: rotateX(180deg);
        }
        .envelope.active .bottom-wrapper:after {
          z-index: 0;
          opacity: 1;
        }
        .envelope .content {
          padding: 2.5em 3.5em 3.5em 3.5em;
          box-sizing: border-box;
          position: relative;
          z-index: 9;
          transition: all 0.5s ease-in-out;
          transition-delay: 1s;
          width: 24em;
          float:left;
        }
        .envelope .top-wrapper,
        .envelope .bottom-wrapper {
          box-sizing: border-box;
          background: #fffff7;
          color: #333;
        }
        .envelope .top-wrapper {
          padding: 2em 2em 0;
          border-top-left-radius: 0.5em;
          border-top-right-radius: 0.5em;
        }
        .envelope .bottom-wrapper {
          padding: 0 2em 2em 2em;
          border-bottom-left-radius: 0.5em;
          border-bottom-right-radius: 0.5em;
          transition: all 0.5s ease-in-out;
          transform-origin: top;
          transform-style: preserve-3d;
          position: relative;
          overflow: hidden;
          margin-top: -1px;
        }
        .envelope .bottom-wrapper:after {
          position: absolute;
          content: '';
          display: block;
          opacity: 0;
          background: #ffffff;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: -1;
        }
        .envelope form label {
          display: block;
          padding-bottom: 0.3em;
          font-weight:normal;
        }
        .envelope form input,
        .envelope form textarea {
          width: 100%;
          box-shadow: 0;
          background: transparent;
          color: #333;
        }
        .envelope form input {
          border-width: 0 0 0.1em;
          border-color: #dedede;
          border-style: solid;
        }
        .envelope form textarea {
          border: 0.1em solid #dedede;
          border-radius: 0.25em;
        }
        .envelope form .submit-card {
          background: #fff;
          color: #222;
          text-align: center;
          padding: 0.5em;
          box-sizing: border-box;
          width: 30%;
          border: 0;
          box-shadow: none;
          border-radius: 0.25em;
          cursor: pointer;
          margin: 0 auto;
          border: 1px solid #F26522;
        }
        .envelope form .input {
          padding-bottom: 1em;
        }
        .envelope .paper {
          position: absolute;
          display: block;
          top: 0;
          left: 0;
          border-bottom-left-radius: 0.5em;
          border-bottom-right-radius: 0.5em;
          overflow: hidden;
        }
        .envelope .paper.back {
          top: 0;
        }
        .envelope .paper.back:before {
          content: '';
          display: block;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 0 12em 10em 12em;
          border-color: transparent transparent #ECECEC transparent;
          transform-origin: bottom;
          transform-style: preserve-3d;
          z-index: 0;
        }
        .envelope .paper.back:after {
          content: '';
          display: block;
          background-color: #ECECEC;
          width: 24em;
          height: 16em;
        }
        .envelope .paper.front {
          top: 10em;
          z-index: 0;
        }
        .envelope .paper.front:before {
          content: '';
          display: block;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 7em 12em 0 12em;
          border-color: transparent #E7E6E6;
        }
        .envelope .paper.front:after {
          content: '';
          display: block;
          width: 24em;
          height: 14em;
          background: #E7E6E6;
          margin-top: -1px;
        }

    }




/* [@] Animation ***************************************/

    @-moz-keyframes envelope-front {
      0 {
        top: 10em;
        z-index: 0;
      }
      50% {
        top: 15em;
        z-index: 9;
      }
      100% {
        top: 10em;
        z-index: 9;
      }
    }
    
    @-webkit-keyframes envelope-front {
      0 {
        top: 10em;
        z-index: 0;
      }
      50% {
        top: 15em;
        z-index: 9;
      }
      100% {
        top: 10em;
        z-index: 9;
      }
    }
    
    @-o-keyframes envelope-front {
      0 {
        top: 10em;
        z-index: 0;
      }
      50% {
        top: 15em;
        z-index: 9;
      }
      100% {
        top: 10em;
        z-index: 9;
      }
    }
    
    @keyframes envelope-front {
      0 {
        top: 10em;
        z-index: 0;
      }
      50% {
        top: 15em;
        z-index: 9;
      }
      100% {
        top: 10em;
        z-index: 9;
      }
    }
    
    @-moz-keyframes envelope-back {
      0 {
        top: 0;
      }
      50% {
        top: 5em;
      }
      100% {
        top: 0;
      }
    }
    
    @-webkit-keyframes envelope-back {
      0 {
        top: 0;
      }
      50% {
        top: 5em;
      }
      100% {
        top: 0;
      }
    }
    
    @-o-keyframes envelope-back {
      0 {
        top: 0;
      }
      50% {
        top: 5em;
      }
      100% {
        top: 0;
      }
    }
    
    @keyframes envelope-back {
      0 {
        top: 0;
      }
      50% {
        top: 5em;
      }
      100% {
        top: 0;
      }
    }
    
    @-moz-keyframes envelope-back-before {
      0 {
        border-color: transparent transparent #d3d3d3 transparent;
        transform: rotateX(0deg);
        z-index: 0;
      }
      100% {
        border-color: transparent transparent #ececec transparent;
        transform: rotateX(180deg);
        z-index: 99;
        position: relative;
      }
    }
    
    @-webkit-keyframes envelope-back-before {
      0 {
        border-color: transparent transparent #d3d3d3 transparent;
        transform: rotateX(0deg);
        z-index: 0;
      }
      100% {
        border-color: transparent transparent #ececec transparent;
        transform: rotateX(180deg);
        z-index: 99;
        position: relative;
      }
    }
    
    @-o-keyframes envelope-back-before {
      0 {
        border-color: transparent transparent #d3d3d3 transparent;
        transform: rotateX(0deg);
        z-index: 0;
      }
      100% {
        border-color: transparent transparent #ececec transparent;
        transform: rotateX(180deg);
        z-index: 99;
        position: relative;
      }
    }
    
    @keyframes envelope-back-before {
      0 {
        border-color: transparent transparent #d3d3d3 transparent;
        transform: rotateX(0deg);
        z-index: 0;
      }
      100% {
        border-color: transparent transparent #ececec transparent;
        transform: rotateX(180deg);
        z-index: 99;
        position: relative;
      }
    }