@charset "8-utf";

.template {
  position: absolute;
  margin: 0px;
  top: 0px;
  width: 100%;
  overflow: hidden;
}

/*Fonts*/
.font_light {
  font-family: "space-grotesk-variable", sans-serif;
  font-variation-settings: "wght" 300;
}

.font_reg {
  font-family: "space-grotesk-variable", sans-serif;
  font-variation-settings: "wght" 400;
}

.font_bold {
  font-family: "space-grotesk-variable", sans-serif;
  font-variation-settings: "wght" 700;
}

/*Paleta de Cores*/

.red {
  color: #ff2b5c;
}

.green {
  color: #00ffb9;
}

.blue {
  color: #3e2eff;
}

.gray {
  color: #f4e0d7;
}

.white {
  color: #ffffff;
}


.bg_degrade_red1 {
  background: rgb(255, 66, 96);
  background: linear-gradient(
    180deg,
    rgba(255, 66, 96, 1) 0%,
    rgba(255, 47, 54, 1) 100%
  );
}

.bg_degrade_red2 {
  background: rgb(247, 137, 147);
  background: linear-gradient(
    0deg,
    rgba(247, 137, 147, 1) 0%,
    rgba(255, 47, 54, 1) 100%
  );
  /*background: rgb(247,140,150);
  background: linear-gradient(0deg, rgba(247,140,150,1) 0%, rgba(255,71,80,1) 5%, rgba(255,99,133,1) 10%, rgba(247,137,147,1) 20%, rgba(255,47,54,1) 100%);*/
}

.bg_degrade_red3 {
  background: rgb(247, 140, 150);
  background: linear-gradient(
    0deg,
    rgba(247, 140, 150, 1) 0%,
    rgba(255, 71, 80, 1) 50%,
    rgba(255, 99, 134, 1) 100%
  );
}

.bg_red {
  background-color: #ff2f36;
}

.bg_green {
  background-color: #00ffb9;
}

.bg_blue {
  background-color: #3e2eff;
}

.bg_light_red {
  background-color: #ffa0a0;
}

.bg_gray {
  background-color: #f4e0d7;
}

.graphismo {
  position: relative;
  left: 0%;
}

.black {
  color: black;
}

.header {
  width: 60%;
  margin-left: 20%;
}

.text_header{
  position: relative; 
  animation-name: move;
  animation-duration: 1s;
  animation-iteration-count: 1;
  top: 100px;
}

@keyframes move {

  from {
    top: 250px;
    opacity: 0;
  }

  100% {
    top: 100px;
    opacity: 1;
  }

}

.graphic {
  position: relative;
  top: -60px;
  width: 60%;
  border: 1px solid black;
  border-radius: 20px;
  background-color: #ffa0a0;
}

.box {
  border: 1px solid white;
  border-radius: 15px;
  width: 60%;
}

.seta {
  width: 15%;
}

.botao {
  text-decoration: none;
  border: #ffffff 1px solid;
  border-radius: 30px;
  height: 45px;
  width: 50%;
}

.graphic_footer {
  width: 75%;
}

.opacity {
  opacity: 0;
}

/* Modal */
.modal-content {
  background-color: #ffa0a0;
  border: 0.15rem solid rgb(0, 0, 0);
  border-radius: 10px;
}
.form-control {
  background-color: #ffa0a0;
  border: 0.15rem solid rgb(0, 0, 0);
  border-radius: 25px;
  color: #fff;
}
.btn {
  color: #ffa0a0;
  text-align: center;
  border: none;
  border-radius: 25px;
  background-color: #ffffff;
}
.invalid-feedback {
  color: #fff;
}
.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: #fff;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
  background-color: #fff;
}
/* Large devices (desktops, 900px and up)*/
@media (max-width: 900px) {
  .graphic {
    width: 70%;
  }

  .botao {
    width: 75%;
  }

  .graphic_footer {
    width: 100%;
  }
}

/* Smallers devices (landscape phones, 420px and up)*/
@media (max-width: 420px) {
  .graphic {
    width: 95%;
  }

  .box {
    width: 100%;
  }

  .botao {
    width: 95%;
  }
}