/* CSS Lizard agora é Neptune popup */

	.buttons {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;        
    }

    .buttonPopup {
        font-size: 30px;
        font-weight: 300;
        color: #ffffff;
        background-image: url(/images/popup/popup.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 400px;
        height: 295px;
    }

    .buttonPopup span {
        font-weight: 300;
        color: #ff9900;
        line-height: 70px;
    }

    .buttonPopup p {
        margin: 30px 0px 0px 65px;
        text-align: center;
        color: #333333;
        font-weight: 200;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .buttonPopup p.bt-go {
        background-image: url(/images/popup/bt-arrow.svg);
        background-repeat: no-repeat;
        background-position: 44% 0px;
        background-size: contain;
        height: 50px;
        cursor: pointer;
    }

    .modal h2 {
        background: linear-gradient(-70deg, #0e4980 54%, rgba(0, 0, 0, 0) 30%);
        display: flex;
        vertical-align: baseline;
        justify-content: center;
        font-weight: 400;
        background-color: #f0f0f0;
        padding: 20px;
        border-radius: 20px;
        font-size: 26px;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
        margin-bottom: 45px;
    }

    .modal h2 svg {
        width: 44%;
        margin-left: 20px;
    }

    .modal p {
        font-size: 25px;
        font-weight: 300;
    }

    .bts-footer {
        display: flex;
        justify-content: space-around;
        flex-direction: row;
        align-items: normal;
    }

    .bts-footer .ir-lizard {
    background-image: url(/images/popup/bt-lizard.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: cover;
    cursor: pointer;
    width: 205px;
    padding: 18px 30px 20px 0px;
    font-size: 14px;
    font-weight: 500;
    color: #6699cc;
    }

    .bts-footer .ir-neptune {
    background-image: url(/images/popup/bt-neptune.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: cover;
    cursor: pointer;
    width: 207px;
    padding: 18px 50px 0px 0px;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    }

    .bts-footer a,
    .bts-footer a:hover {
        text-decoration: none;
    }

    .bts-footer .ir-lizard a {
        color: #6699cc;
    }

    .bts-footer .ir-neptune a {
        color: #ffffff;
    }


#modal-container {
  position:fixed;
  display:table;
  height:100%;
  width:100%;
  top:0;
  left:0;
  transform:scale(0);
  z-index:99999;
  &.one-lizard {
    transform:scaleY(.01) scaleX(0);
    animation:unfoldIn 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
    .modal-background {
      .modal {
        transform:scale(0);
        animation: zoomIn .5s .8s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
      }
    }
    &.out-lizard {
      transform:scale(0);
      animation:unfoldOut 1s .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
      .modal-background {
        .modal {
          animation: zoomOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
        }
      }
    }
  }
  
  .modal-background {
    display:table-cell;
    background:rgba(0,0,0,.8);
    text-align:center;
    vertical-align:middle;
    .modal {
      background-color: #ffffff;
      padding:20px;
      display:inline-block;
      border-radius:10px;
      font-weight:300;
      position:relative;
      
      p {
        font-size:18px;
        line-height:22px;
      }
      .modal-svg {
        position:absolute;
        top:0;
        left:0;
        height:100%;
        width:100%;
        border-radius:3px;
        rect {
          stroke: #fff;
          stroke-width: 2px;
          stroke-dasharray: 778;
          stroke-dashoffset: 778;
        }
      }
    }
  }
}

.content {
  min-height:100%;
  height:100%;
  background:#333333;
  position:relative;
  z-index:0;
  opacity: .95;
  h1 {
    padding: 0px;
    text-align:center;
    font-size:30px;
    line-height:30px;
    color: #ff9900;
    margin: 0px;
  }
  .buttons {
    max-width:800px;
    margin:0 auto;
    padding:0;
    text-align:center;
    .button {
      display:inline-block;
      text-align:center;
      padding:10px 15px;
      margin:10px;
      background:red;
      font-size:18px;
      background-color:#efefef;
      border-radius:3px;
      box-shadow:0 1px 2px rgba(0,0,0,.3);
      cursor:pointer;
      &:hover {
        color:white;
        background:#009bd5;
      }
    }
  } 
}

@keyframes unfoldIn {
  0% {
    transform:scaleY(.005) scaleX(0);
  }
  50% {
    transform:scaleY(.005) scaleX(1);
  }
  100% {
    transform:scaleY(1) scaleX(1);
  }
}

@keyframes unfoldOut {
  0% {
    transform:scaleY(1) scaleX(1);
  }
  50% {
    transform:scaleY(.005) scaleX(1);
  }
  100% {
    transform:scaleY(.005) scaleX(0);
  }
}

@keyframes zoomIn {
  0% {
    transform:scale(0);
  }
  100% {
    transform:scale(1);
  }
}

@keyframes zoomOut {
  0% {
    transform:scale(1);
  }
  100% {
    transform:scale(0);
  }
}

@media only screen and (max-width: 991px) {
  .button {
    width: 100%;
  }

  .modal img {
    width: 100%;
  }

  .modal h2 {
    font-size: 20px;
    background: linear-gradient(-70deg, #0e4980 48%, rgba(0, 0, 0, 0) 30%);
  }

  .modal h2 svg {
    width: 40%;
  }

  .bts-footer .ir-lizard {
    width: 44%;
    margin-bottom: 20px;
    padding: 18px 30px 20px 0px;
  }

  .bts-footer .ir-neptune {
    width: 40%;
    margin-bottom: 20px;
    padding: 18px 50px 22px 0px;
  }

  .bts-footer {
    flex-direction: column;
    align-items: center;
  }
}