body {
  background-color: #ebf4f3;
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  padding: 0; }
  body h1, body h2, body p {
    color: #2d4750;
    text-align: center; }
  body * {
    box-sizing: border-box; }
  body header {
    padding: 1rem;
    width: 100%;
    min-width: 420px;
    text-align: center;
    background: #fff;
    z-index: 10; }
    body header h1 {
      font-size: 1.1rem;
      margin: .5rem 0 1.3rem 0; }
    body header form {
      display: flex;
      justify-content: center; }
    body header input[type="file"] {
      width: 0.1px;
      height: 0.1px;
      opacity: 0;
      overflow: hidden;
      position: absolute;
      z-index: -1; }
    body header label {
      position: relative;
      color: #ffffff;
      width: 10rem;
      height: 3rem;
      background: #1fc4c7;
      background: linear-gradient(133deg, #1fc4c7 0%, #6ff5dd 100%);
      -webkit-box-shadow: 0px 10px 8px -10px rgba(0, 0, 0, 0.25);
      -moz-box-shadow: 0px 10px 8px -10px rgba(0, 0, 0, 0.25);
      box-shadow: 0px 10px 8px -10px rgba(0, 0, 0, 0.25);
      -webkit-transition: all 1s ease-out;
      -moz-transition: all 1s ease-out;
      -o-transition: all 1s ease-out;
      transition: all 1s ease-out;
      background-size: 1px 200px;
      display: inline-block;
      transition: all .5s;
      cursor: pointer;
      padding: 15px 40px;
      text-align: center;
      border-radius: 20rem;
      margin: 0 .5rem; }
      body header label span:first-of-type {
        font-size: .85rem;
        position: absolute;
        top: 1rem;
        left: 0;
        right: 0;
        margin: 0 auto;
        text-transform: uppercase; }
      body header label:hover {
        -webkit-box-shadow: 0px 10px 13px -15px rgba(0, 0, 0, 0.56);
        -moz-box-shadow: 0px 10px 13px -15px rgba(0, 0, 0, 0.56);
        box-shadow: 0px 10px 13px -15px rgba(0, 0, 0, 0.56);
        background-position: 100px; }
      body header label.cargado span:first-of-type {
        font-size: 0.6rem;
        top: .3rem;
        opacity: 0.7; }
    body header span.file_back, body header span.file_front {
      position: absolute;
      top: 1.4rem;
      left: 0;
      right: 0;
      margin: 0 auto;
      font-family: 'Montserrat', sans-serif;
      color: #fff;
      font-size: .9rem; }
  body .content div.icono {
    position: relative;
    width: 100%;
    height: 13.5rem; }
    body .content div.icono #icon {
      position: absolute;
      top: 0px;
      height: 192px;
      width: 192px;
      z-index: -1;
      left: 0;
      right: 0;
      margin: 0 auto; }
      body .content div.icono #icon #img_back {
        position: absolute;
        top: -48px;
        left: -48px;
        height: 288px;
        width: 288px;
        object-fit: cover;
        background-color: #fff; }
      body .content div.icono #icon #img_front {
        position: absolute;
        top: -48px;
        left: -48px;
        height: 288px;
        width: 288px;
        object-fit: cover; }
      body .content div.icono #icon #icon_mask {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0; }
      body .content div.icono #icon #icon_mask > svg {
        position: absolute;
        top: -192px;
        left: -192px;
        height: 576px;
        width: 576px;
        visibility: hidden; }
      body .content div.icono #icon #icon_mask.round > #icon_mask_round,
      body .content div.icono #icon #icon_mask.corners > #icon_mask_corners,
      body .content div.icono #icon #icon_mask.square > #icon_mask_square,
      body .content div.icono #icon #icon_mask.squircle > #icon_mask_squircle {
        visibility: visible; }
  body .content .opciones_masks {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 2rem;
    margin-bottom: 2rem; }
    body .content .opciones_masks svg {
      height: 32px;
      width: 32px;
      margin: 0 16px;
      cursor: pointer; }
  body .content #animation_items {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 2rem; }
  body .content #animation_items > svg {
    height: 3rem;
    width: 3rem;
    padding: 8px;
    fill: #516e78;
    cursor: pointer; }
  body .content #animation_duration {
    position: absolute;
    top: 48px;
    left: calc(50% - 32px);
    height: 32px;
    width: 64px;
    padding: 0;
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 32px;
    text-align: center;
    background: transparent;
    border: none;
    outline: none; }
  body .content #animation_duration::selection {
    color: #FFF; }
  body .content #icon.top > #img_back {
    transform: translateY(-55px); }
  body .content #icon.top > #img_front {
    transform: translateY(-72px); }
  body .content #icon.top > #icon_mask {
    transform: translateY(-40px); }
  body .content #icon.right > #img_back {
    transform: translateX(55px); }
  body .content #icon.right > #img_front {
    transform: translateX(72px); }
  body .content #icon.right > #icon_mask {
    transform: translateX(40px); }
  body .content #icon.bottom > #img_back {
    transform: translateY(55px); }
  body .content #icon.bottom > #img_front {
    transform: translateY(72px); }
  body .content #icon.bottom > #icon_mask {
    transform: translateY(40px); }
  body .content #icon.left > #img_back {
    transform: translateX(-55px); }
  body .content #icon.left > #img_front {
    transform: translateX(-72px); }
  body .content #icon.left > #icon_mask {
    transform: translateX(-40px); }
  body .content #icon.push > #img_back {
    transform: scale(0.7); }
  body .content #icon.push > #img_front {
    transform: scale(0.6); }
  body .content #icon.push > #icon_mask {
    transform: scale(0.8); }
  body .content #icon.pop > #img_back {
    transform: scale(1.3); }
  body .content #icon.pop > #img_front {
    transform: scale(1.4); }
  body .content #icon.pop > #icon_mask {
    transform: scale(1.2); }
  body footer {
    background: #fff;
    padding: 2rem;
    min-height: 15rem;
    height: auto !important; }
    body footer h2 {
      font-size: 1.1rem; }
    body footer p {
      font-size: .9rem;
      margin: 0 0 1rem 0;
      padding: 0; }
      body footer p a {
        color: #14b7ba; }

/*# sourceMappingURL=style.css.map */