@font-face {
  font-family: GothamBold;
  src: url("/fonts/Gotham Bold.otf");
}
:root {
  --circle: 924px;
}

html,
body {
  margin: 0px;
  font-family: GothamBold, Arial, Helvetica, sans-serif;
}
body {
  min-height: 100vh;
  position: relative;
}
main {
  background-image: url(./imgs/bg-festa-do-milho-2024.jpg?v=2);
  background-position: top center;
  background-size: cover;
  min-height: 100vh;
}
a,
a:link,
a:active,
a:visited {
  color: inherit;
  text-decoration: inherit;
}
.disable {
  pointer-events: none;
  filter: grayscale(1);
}
.icon {
  transition: 0.25s;
}
.icon:hover {
  transform: scale(1.1);
}
.icon::before {
  position: absolute;
  white-space: nowrap;
  bottom: 103%;
  font-size: 12px;
  font-weight: bold;
  /* background: #ffec00; */
  padding: 2px 4px;
  border-radius: 4px;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.plano {
  right: 18%;
  top: 92%;
}
@media (max-width: 600px) {
  .plano {
    top: 150%;
  }
}
.plano::before {
  content: "ENTREGA PLANO DE NEGÓCIO E PROJETO SOCIAL";
  width: 200% !important;
  white-space: break-spaces;
  transform: translateX(-50%);
  left: 50% !important;
}
.icon {
  position: absolute;
}
.icon::before {
  width: 100%;
  text-align: center;
}
.ingresso {
  left: -42px;
  top: 50%;
}
.ingresso::before {
  content: "INGRESSOS";
}
.regimento {
  left: -3%;
  top: 36%;
}
.regimento::before {
  content: "REGIMENTOS";
}
.parceiros {
  top: 67%;
  left: 0;
}
.parceiros::before {
  content: "PARCEIROS";
}
.inscricao {
  right: 3%;
  top: 74%;
}
.inscricao::before {
  content: "INSCRIÇÃO";
}
.logotipo {
  right: 0%;
  top: 33%;
  cursor: pointer;
}
.logotipo::before {
  content: "LOGOTIPO";
}
.mapa {
  right: -7%;
  top: 52%;
}
.mapa::before {
  content: "MAPA DA FESTA";
}
.festa-historia {
  left: 1%;
  top: 100%;
}
.festa-historia img {
  width: 150px !important;
  height: 105px !important;
}
/* .wesley-safadao::before {
  content: "29/05";
  color: #00913d;
  bottom: 100%;
  left: 41%;
  font-size: 16px;
} */
.atitude-67 {
  background-position: -53px -179px;
  width: 144px;
  height: 117px;
  left: 60%;
  top: 101%;
}
/* .atitude-67::before {
  content: "30/05";
  color: #00913d;
  bottom: 100%;
  left: 41%;
  font-size: 16px;
} */
.festa {
  background-position: -264px -183px;
  width: 132px;
  height: 107px;
}
.circle-out,
.circle-in {
  border: 1px dashed black;
  border-radius: 50%;
}
.circle-out {
  box-sizing: border-box;
  width: var(--circle);
  height: var(--circle);
  padding: calc(var(--circle) / 8.4);
  position: absolute;
  left: calc(50% - calc(var(--circle) * 0.5));
  top: calc(var(--circle) / -5.1333);
}
.circle-in {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.circle-in > img {
    transform: scale(1.2);
}
.circle-in span {
  text-transform: uppercase;
  font-weight: bold;
  white-space: nowrap;
  color: #00913d;
  padding-bottom: 5px;
}
.circle-in img {
  /* object-fit: cover;
  object-position: 0px -350px;
  width: 600px;
  height: 460px; */
  pointer-events: none;
  width: 75%;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.modal {
  display: flex;
}
.modal img {
  transition: 0.25s;
}
.modal > a {
  margin: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
/* .modal img:hover {
  transform: scale(1.1);
} */

footer {
  position: absolute;
  bottom: 7vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
footer img {
  height: 40px;
  filter: grayscale(1) brightness(0.3);
  padding: 20px;
}

footer .copy {
  /* padding-left: 65px; */
  display: flex;
  align-items: center;
  /* background: #1a4005; */
  text-align: center;
  opacity: 90%;
  color: rgb(0, 0, 0);
  font-size: 14px;
}

@media screen and (min-width: 600.001px) and (max-width: 960px) {
  .wesley-safadao,
  .festa-historia,
  .atitude-67 {
    top: 102%;
  }
  .wesley-safadao {
    left: 4%;
  }
  .festa-historia {
    position: absolute;
  }
  .atitude-67 {
    right: 4%;
  }
  .inscricao {
    left: 8%;
    top: 80%;
  }
  .logotipo {
    right: 8%;
    top: 80%;
  }
  .ingresso {
    left: 10%;
    top: 77%;
  }
  .mapa {
    right: 10%;
    top: 77%;
  }
  .parceiros {
    top: 66%;
    left: 1%;
  }
  .regimento {
    top: 66%;
    right: 1%;
    left: auto;
  }
}
@media screen and (min-width: 960.001px) {
  /* footer img {
    padding: 17px 35px 17px calc(50vw - 700px);
  } */
  main {
    background-position: center !important;
  }
}
@media screen and (max-width: 1904px) {
  :root {
    --circle: 770px;
  }
  main {
    /* height: 870px; */
    min-height: 100vh;
  }
}

@media screen and (max-width: 600px) {
  main {
    background-position: center;
    height: 100%;
    padding-top: 20px;
  }
  .circle-out {
    padding: 0;
    border: none;
    width: 100%;
    height: max-content;
    position: relative;
    top: 0;
    left: 0;
  }
  .circle-in {
    border: none;
  }
  .circle-in span {
    width: 80%;
    text-align: center;
    white-space: normal;
  }
  /* .circle-in img {
    object-position: 0px -235px;
    width: 400px;
    height: 280px;
  } */
  .wesley-safadao {
    left: 18%;
    top: 150%;
  }
  .atitude-67 {
    left: 50%;
    top: 150%;
  }
  .logotipo,
  .mapa,
  .inscricao {
    top: 200%;
  }
  .regimento,
  .ingresso,
  .parceiros {
    top: 240%;
  }

  .logotipo {
    right: 10%;
  }
  .mapa {
    left: calc(50% - 43px);
    right: initial;
  }
  .inscricao {
    left: 10%;
    right: inherit !important;
  }
  .regimento {
    left: 10%;
  }
  .ingresso {
    left: calc(50% - 43px);
    right: initial;
  }
  .parceiros {
    left: initial;
    right: 10%;
  }
}
.meridional {
  position: absolute;
  right: 280px;
  bottom: 100px;
  width: 100px;
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 0.984;
  letter-spacing: 0.3rem;
  transition: 0.25s;
  font-weight: 700 !important;
}
.meridional:hover {
  transform: scale(1.05);
}
.meridional img {
  height: 70px;
}
.atitude-67 {
  display: none;
}

@media (max-width: 600px) {
  .meridional {
    display: none;
  }
  .button-meridional span {
    display: none;
  }
  .atitude-67 {
    display: block;
  }
  footer img {
    height: 40px;
    padding: 12px;
  }
  /* footer .copy {
    padding-left: 12px;
  } */
}
.modal2 img {
  margin-bottom: 10px;
  height: 50px;
  transition: 0.3s;
}
.modal2 .item {
  display: flex;
  flex-direction: column;
  margin: 2px;
  justify-content: center;
  align-items: flex-start;
  width: 60px;
  margin-left: 20px;
  text-align: center;
}
.modal2 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
#myModal > div {
  margin: 30px auto !important;
  max-width: 500px;
}
#myModal .modal {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.item img {
  height: 80px;
}
.item {
  text-align: center;
  transition: 0.3s;
}
.item span:hover {
  color: gray;
}
.item:hover {
  transform: scale(1.09);
}
#myModal2 > div {
  margin: 30px auto !important;
  max-width: 500px;
}
#myModal2 .modal {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
#myModal3 > div {
  margin: 30px auto !important;
  max-width: 800px;
  background-color: rgb(255, 254, 254) !important;
  border: rgb(0, 0, 0) !important;
}
#myModal3 > div > span {
  background: transparent !important;
  font-size: 40px !important;
  top: 10px !important;
}

#myModal3 .modal {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
#myModal3 .modal span {
  background-color: #ffec00;
  padding: 2px 10px 0 10px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
  margin-top: 10px;
  text-align: center;
  object-fit: contain;
  border-radius: 0px 0px 8px 8px;
}
#myModal3 .modal span:hover {
  color: black;
}
#myModal3 .modal a {
  display: flex;
  justify-content: center;
  flex-direction: column;
  border: solid 1px grey;
  border-radius: 10px;
  padding: 5px;
}
#myModal3 .modal img {
  width: 100%;
  object-fit: contain;
}
@media (max-width: 700px) {
  #myModal3 .modal {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  #myModal3 > div {
    max-width: 500px;
  }
}
@media (max-width: 500px) {
  #myModal3 .modal {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  #myModal3 > div {
    max-width: 300px;
  }
}

.icon img {
  filter: drop-shadow(0 0 1px rgba(0,0,0.4));
  height: 100px;
  width: 100px;
  object-fit: contain;
}
@media (max-width: 600px) {
  .icon img {
    height: 80px;
    width: 80px;
  }
  .plano::before {
    width: 350% !important;
  }
  .festa-historia img {
    width: 90px !important;
    height: 80px !important;
  }
  .icon::before {
    font-size: 10px;
  }
}