:root {
  --blue: #1e73be;
  --light-blue: #1bd6ea;
  --links: #337ab7;
  --amp: #7c99ba;
  --qsp: #3c6ad6;
}


@font-face {
  font-family: "Poppins-Bold";
  src: url("fonts/Poppins/Poppins-Bold.ttf");
}

@font-face {
  font-family: "Poppins-SemiBold";
  src: url("fonts/Poppins/Poppins-SemiBold.ttf");
}

@font-face {
  font-family: "Roboto-Regular";
  src: url("fonts/Roboto/Roboto-Regular.ttf");
}

@font-face {
  font-family: "Roboto-Bold";
  src: url("fonts/Roboto/Roboto-Bold.ttf");
}

*,
:after,
:before,
html,
body {
  box-sizing: border-box;
  margin: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #4324b0ff, #13076d, #0e0464ff, #272664, #383e74, #5392ac);
  z-index: -1;
}

.container-fluid {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 50px 10%;
}

.form-page-container {
  justify-content: space-between;
}

.logo-row img {
  width: auto;
  height: 60px;
  z-index: 10;
}

.logo-row img.qsp-logo {
  height: 40px;
}

h1.title-row {
  font: 5.5vw "Poppins-Bold";
  color: #ffffff;
  text-align: center;
  text-transform: uppercase;
  margin: 5% 0;
}

#end-h1{
  color: #ffffff;
}

.contact-form {
  background-color: white;
  /* border: 5px; */
  border-radius: 20px;
  padding: 5%;
  position: relative;
}


.form-input-wrapper {
  font: 4vw "Roboto-Bold";
  color: #0078d0f7;
  font-size: 2.5vw;
  text-transform: uppercase;
  /* margin: 0.75vh 0; */
  padding: 0;
}

.form-control {
  font: 3vw "Roboto-Regular";
  border-color: var(--amp) !important;
}

.form-control:focus {
  border-color: var(--blue) !important;
  box-shadow: none !important;
}

.form-check-input {
  border-color: var(--amp) !important;
  width: 1.7rem;
  height: 1.7rem;
}

.form-check-input:focus {
  border-color: none !important;
  outline: 0;
  box-shadow: none !important;
}

.form-check-input:checked {
  background-color: var(--blue);
  border-color: none;
}

.terms {
  font-size: 1.3rem;
}

a {
  color: var(--links);
  text-decoration: none;
}

.submit-btn-col {
  display: flex;
  justify-content: center;
  margin-top: 0;
}

.btn-send {
  background-color: #2365b6;
  font-family: "Poppins-SemiBold";
  font-size: 4vw;
  color: white;
  letter-spacing: 1px;
  text-align: center;
  width: 30vw;
  border: none;
  /* padding: 15px; */
  position: relative;
  margin-top: 0;
  box-shadow: 0 4px 16px rgb(0 0 0 / 7%);
  overflow: hidden;
}

.btn-send:hover,
.btn-send:focus,
.btn-send:active {
  background-color: #195a93;
}

.prizes-container {
  width: 100%;
  height: 350px;
  padding: 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.prize-row, .prize-col {
  height: 100%;
  width: 100%;
}

.prize-col {
  display: flex;
  justify-content: center;
  align-items: center;
}

.prize {
  width: auto;
  height: 100%;
}

.hidden {
  visibility: hidden;
}

.alert {
  background-color: rgba(128, 128, 128, 0.496);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.alert .text {
  background-color: white;
  font: 1.5rem "Roboto-Regular";
  text-align: center;
  width: 55vw;
  height: 25vh;
  border: 3px var(--amp) solid;
  border-radius: 20px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@media screen and (orientation: portrait) {
  .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .title-row h1 {
    margin: 12% 0 7%;
  }

  .form-row {
    /* margin-top: 4%; */
  }
}

@media screen and (orientation: landscape) {
  .container-fluid {
    padding: 1% 5%;
    justify-content: space-evenly;
  }

  .wrapper {
    width: 100%;
    height: 20%;
    display: flex;
    flex-direction: row;
  }

  .logo-row {
    flex-direction: column;
    justify-content: space-evenly;
    width: 40%;
  }

  .img-col {
    display: flex;
    justify-content: center;
    margin: 2% 0;
  }

  img {
    width: 100%;
    height: auto;
  }

  .title-row {
    height: 100%;
    display: flex;
    align-items: center;
  }

  .title-row h1 {
    font: 4vw "Poppins-Bold";
  }

  .form-input-wrapper {
    font: 2vw "Roboto-Bold";
    color: var(--amp);
  }

  .form-control {
    font: 2vw "Roboto-Regular";
    border-color: var(--amp) !important;
  }

  .btn-send {
    font-size: 2vw;
    width: 15vw;
    margin-top: 15px;
  }
}

/* * OBRIGADO */

.thanks-container {
  padding: 5%;
}

.thanks-row {
  margin-top: 15%;
}

.thanks-col h1 {
  font: 6vw "Poppins-Bold";
  color: #ffffff;
  text-align: center;
}

.svg-row {
  margin-top: 25%;
}

.svg-img {
  width: 35vw;
}

footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5%;
  display: flex;
  justify-content: center;
}

.footer-wrap {
  width: 90%;
  display: flex;
  justify-content: center;
}

.footer-wrap .logo-row {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

.img-col.thanks {
  width: 30%;
}

@media screen and (orientation: landscape) {
  .thanks-container {
    justify-content: space-evenly;
    padding-bottom: 20%;
  }

  .thanks-row {
    margin-top: 0;
  }

  .thanks-col h1 {
    font: 4vw "Poppins-Bold";
  }

  .svg-row {
    margin-top: 10%;
  }

  .svg-img {
    width: 22.5vw;
  }

  .footer-wrap .logo-row {
    flex-direction: row;
    width: 100%;
  }

  .img-col.thanks {
    width: 25%;
  }
}

/* *SORTEIO */

.sorteio-text {
  font: 3vw "Roboto-Regular";
}

#test,
#go {
  background-color: var(--amp);
  font-family: "Poppins-SemiBold";
  font-size: 3vw;
  color: white;
  letter-spacing: 1px;
  text-align: center;
  width: 300px;
  border: none;
  position: relative;
  box-shadow: 0 4px 16px rgb(0 0 0 / 7%);
  overflow: hidden;
}

#go {
  background: linear-gradient(to right, #2365b6, #04326b);
}

.winner-num {
  font: 10vw "Roboto-Bold";
  text-align: center;
}

.winner-name {
  font: 5vw "Roboto-Bold";
  text-align: center;
}