* {
  padding: 0%;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Open Sans", sans-serif;
  font-size: 0%;
  height: 100vh;
  background-color: whitesmoke;
  overflow: hidden;
}

ul {
  padding: 0px;
  list-style: none;
  list-style-type: none;
}

a {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.navbar {
  height: 17vh;
  font-size: 1.8rem;
  display: flex;
  width: 100%;
  object-fit: contain;
}

.logo {
  width: 30%;
  display: flex;
  object-fit: contain;
  padding: 0.5% 5% 0.5% 2%;
}

.logo svg {
  width: 100%;
  height: 100%;
  padding-left: 7%;
}


.links {
  width: 70%;
  display: flex;
  align-items: center;
  font-size: 1.5rem;
}

.links span{
  font-size: 1.2rem;
  font-weight:lighter;
  opacity: .5;
}
.links ul {
  display: flex;
  width: 100%;
  height: 100%;
  padding-left: 20%;
  padding-right: 3%;

  
}
.links li {
  text-align: center;
  width: 100%;
  
  padding: 7% 0%;
  margin: 1%;
  
  
  
  
}

.links ul .ham{
  display: none;
}

.links a:hover {
  opacity: 0.5;
}



#ticket{
  font-size: 1.5rem;
  margin-top: 2.2%;
  
}

#ticket a{
  
  
  border: .5rem solid rgb(67, 67, 67);
  border-radius: 5rem;
  padding-right: 15%;
  padding-left: 15%;
  padding-top: 10%;
  padding-bottom: 10%;
}








.content {
  position: relative;
  height: 71vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  object-fit: contain;
  animation: homepage 0.3s ease-in-out 0.5s forwards;
  opacity: 0;
}

@keyframes homepage {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


.content li span {
  font-size: 1.3rem;
  color: rgb(53, 53, 53);
}

.content a:hover {
  opacity: 1;
}

.welcomehome {
  width: 100%;
  height: 17rem;
  top: 30%;
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.welcomehome div {
  margin-top: 3rem;
}

.welcome {
  font-size: 2rem;
  position: absolute;
  text-align: center;
  font-weight: lighter;
  animation: slidept 10s ease-in-out infinite forwards;
  opacity: 0;
}
@keyframes slidept {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.welcome h2 {
  font-weight: bold;
  line-height: 5rem;
}
.welcome h3 {
  font-weight: normal;
}

.welcome-ing {
  font-size: 2rem;
  position: absolute;
  text-align: center;
  font-weight: lighter;
  animation: slideing 10s ease-in-out 5s infinite forwards;
  opacity: 0;
}
@keyframes slideing {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.welcome-ing h2 {
  font-weight: bold;
  line-height: 5rem;
}
.welcome-ing h3 {
  font-weight: normal;
}





.bottom {
  position: absolute;
  display: flex;
  width: 100%;
  height: 12vh;
  animation: homepagebottom 1s ease-in-out;
}
@keyframes homepagebottom {
  from {
    top: 50%;
    opacity: 0;
  }
  to {
    top: 88%;
    opacity: 1;
  }
}

.background {
  display: flex;
  width: 100%;
  font-size: 1rem;
  height: 13rem;
}

.background div {
  height: 100%;
  width: 20%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.background svg {
  transform: translate(0, -34%);
  padding: 1vh;
}

.background a {
  font-size: 1.7rem;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.background a img {
  text-align: center;
  width: 100%;
}

.background a span {
  position: absolute;
  text-align: center;
  opacity: 0;
  color: whitesmoke;
}

.background h5 {
  font-size: 1.5rem;
  font-weight: normal;
  font-style: italic;
}

.background a:hover span {
  animation: opacity 0.5s 1 alternate ease-in-out 0.2s forwards;
}

.background a:hover svg {
  animation: azul 0.3s 1 alternate ease-in-out forwards;
}

@keyframes opacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes azul {
  from {
    transform: translate(0, -34%);
  }
  to {
    transform: translate(0, -60%);
  }
}

.azul {
  background: #6666ff;
}
.amarelo {
  background: #f9d939;
}
.laranja {
  background: #f09833;
}
.vermelho {
  background: #e34642;
}
.roxo {
  background: #73477a;
}

.content-static {
  position: relative;
  display: flex;
  object-fit: contain;
  height: 71vh;
  width: 100%;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 10vh;
  animation: homepage2 0.2s ease-in-out forwards;
}

@keyframes homepage2 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.bottom-static {
  position: absolute;
  display: flex;
  width: 100%;
  height: 12vh;
}

.text-sobre {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  font-size: 1.5rem;
}

.text-sobre div {
  width: 40%;
  object-fit: contain;
  padding: 5%;
}

.text-sobre p {
  margin-top: 0.7rem;
}

.text-sobre-eng {
  font-style: italic;
  margin-top: 1rem;
  opacity: 0.5;
}

.calendario {
  width: 100%;
  display: flex;
  padding-top: 2%;
}

.calendario div {
  width: 50%;
}

.calendarioiframe,
.contatosiframe {
  display: flex;
  flex-direction: column;
  
  
}

.calendario-text {
  display: flex;
  flex-direction: column;
  padding-top: 5%;
}

.calendario-text div {
  display: flex;
  flex-direction: column;
  font-size: 1.5rem;
  width: 100%;
  height: 15rem;
}
.calendario-text h3 {
  font-size: 2rem;
  line-height: 2.5rem;
}

.calendario-text h4 {
  padding-top: 1rem;
  font-weight: normal;
  font-style: italic;
  opacity: 0.7;
}

.sub-titulo {
  text-align: left;
}

.contatos {
  display: flex;
  flex-direction: row;
  width: 100%;
  object-fit: contain;
}

.contatos-info {
  width: 25%;
  padding: 2%;
}

.contatos h3 {
  font-size: 2rem;
  line-height: 2.5rem;
}

.contatos p {
  padding-top: 1rem;
  font-size: 1.3rem;
}

.mensagem {
  height: 100%;
  width: 25%;
  display: flex;
  flex-direction: column;
  object-fit: contain;
  padding: 2%;
}

.container {
  width: 100%;
  background-color: whitesmoke;
  border-radius: 0.8rem;
  padding-top: 2%;
  padding-right: 10%;
}

.form-group {
  margin-top: 2rem;
  font-size: 1.3rem;
}

.form-group input,
.form-group textarea {
  background-color: rgb(250, 250, 250);
  width: 100%;
  padding: 0.5rem;
  font-size: 1.3rem;
  border: 0.1rem solid rgba(128, 128, 128, 0.199);
  margin-top: 1rem;
}

textarea {
  resize: vertical;
}

button[type="submit"] {
  width: 100%;
  border: none;
  outline: none;
  padding: 2rem;
  font-size: 1.3;
  border-radius: 1rem;
  text-align: center;
  cursor: pointer;
  margin-top: 2rem;
  transition: 0.3s ease background-color;
}

button[type="submit"]:hover {
  background-color: rgb(189, 189, 189);
}

#status {
  display: block;
  width: 90%;
  max-width: 500px;
  text-align: center;
  padding: 10px;
  margin: 0 auto;
  border-radius: 8px;
}

#status.success {
  background-color: rgb(211, 250, 153);
  animation: status 4s ease forwards;
}

#status.error {
  background-color: rgb(250, 129, 92);
  color: white;
  animation: status 4s ease forwards;
}

@keyframes status {
  0% {
    opacity: 1;
    pointer-events: all;
  }
  90% {
    opacity: 1;
    pointer-events: all;
  }
  100% {
    opacity: 0;
    pointer-events: none;
  }
}

.contatosiframe {
  width: 50%;
  padding: 1%;
}

.custos {
  position: absolute;
  top: 17%;
  font-size: 1.5rem;
  width: 100%;
  opacity: 0;
  animation: custo 1s ease-in-out 0.7s forwards;
}
.custos ul {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.custos li {
  width: 20%;
  text-align: center;
  padding-left: 2%;
  padding-right: 2%;
}

@keyframes custo {
  from {
    opacity: 0;
    padding-top: 50%;
  }
  to {
    opacity: 1;
  }
}

.valor {
  font-size: 2rem;
}

.estudantes h4 {
  font-size: 1.5rem;
  font-weight: normal;
}

.estudantes span {
  font-size: 1.5rem;
  font-weight: lighter;
  font-style: italic;
}

.valor-externo {
  padding-top: 3%;
}
.externos h4 {
  font-weight: normal;
}
.externos span {
  font-size: 1.5rem;
  font-weight: lighter;
  font-style: italic;
}

.obs {
  padding-top: 3%;
}

.obs h4 {
  font-weight: lighter;
}
.obs span {
  margin-top: 2%;
  font-size: 1.5rem;

  font-style: italic;
}

.custoscolor {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  z-index: -3;
}
.custoscolor div {
  display: flex;
  flex-direction: row;
  width: 20%;
  opacity: 0;
  animation: custo2 0.8s ease-in-out 0.4s forwards;
}

@keyframes custo2 {
  0% {
    opacity: 1;
    margin-top: 90rem;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
    top: 0;
  }
}



.info {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  animation: bg-tech-azul2 1s ease-out forwards;
}

@keyframes bg-tech-azul2 {
  0% {
    opacity: 0;
    margin-top: 180%;
  }
  30% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.info h1 {
  margin-top: 2rem;
  padding: 5rem 5rem;
  border: 0.7rem solid white;
  border-radius: 2rem;
  font-size: 4rem;
}

.info h1 span {
  font-style: normal;
}

.info h2 {
  font-size: 1.7rem;
  width: 100%;
  text-align: center;
  padding: 1%;
}

.info h3 {
  margin-top: 4rem;
  font-size: 2rem;
  text-align: left;
}

.info h4 {
  font-weight: normal;
  margin-top: 1rem;
  margin-bottom: 3rem;
  font-size: 1.5rem;
  text-align: left;
}

.info span {
  font-weight: normal;
  font-style: italic;
  opacity: 0.7;
}

.info a{
  margin-top: 10%;
  
}

.info a:hover{
  opacity: .7;
}

.info-geral {
  width: 20%;
  height: 100%;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5% 0.5% 10% 0.5%;
  color: white;
  z-index: 3;
  animation: bg-tech-azul3 2s 0.2s ease-in-out forwards;
}

@keyframes bg-tech-azul3 {
  0% {
    margin-top: 100rem;
    width: 100%;
  }
  50% {
    width: 100%;
    margin-top: 0;
  }
  100% {
    opacity: 1;
    width: 20%;

  }
}

.info-geral h1 {
  margin-top: 5%;
}



.info-content {
  display: flex;
  height: 100%;
  width: 100%;
}


.disc-1,
.disc-2,
.disc-3,
.disc-4{
  width: 100%;
  height: 100%;
  margin-top: 1%;
  text-align: center;
}


.img1,
.img2,
.img3 {
  padding: 1% 1%;
  width: 100%;
  height: 100%;
  text-align: center;
}

.img1,
.img2,
.img3 svg{
text-align: center;
}

.bg-color {
  position:absolute;
  width: 100%;
  height: 100%;
}





#slider {
  padding-left: 21%;
  padding-right: 2%;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: -3;
  animation: bg-tech-azul4 2s 1s ease-in-out forwards;
}

@keyframes bg-tech-azul4 {
  0% {

    opacity: 0;
  }

  30%{
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


#slider input[type=radio] {
  display: none;
}
#slider label {
  cursor:pointer;
  text-decoration: none;
}
#slides {
  position: relative;
  height: 70%;
}

#overflow {
  width: 100%;
  overflow: hidden;
}
#slide1:checked ~ #slides .inner {
  margin-left: 0;
}
#slide2:checked ~ #slides .inner {
  margin-left: -100%;
}
#slide3:checked ~ #slides .inner {
  margin-left: -200%;
}
#slide4:checked ~ #slides .inner {
  margin-left: -300%;
}


#slides .inner {
  transition: margin-left .5s cubic-bezier(0.770, 0.000, 0.175, 1.000);
  width: 400%;
  height: 100%;
  z-index: -3;
  
  
}
#slides .slide {
  width: 25%;
  height: 100%;
  float:left;
  display: flex;
  justify-content: center;
  align-items: center;
  
}
.slide-content{
  width: 100%;
  height: 100%;
  object-fit: contain;
  
}
.slide-content h2{
  padding: 3%;
  padding-bottom: 3%;
}



#controls {
  z-index: 1;
  width: 100%;
}
#controls label {
  transition: opacity 0.2s ease-out;
  height: 3rem;
  width: 3rem;
  opacity: .4;

}
#controls label:hover {
  opacity: 1;
}

#bullets {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;

}
#bullets label {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius:100%;
  background: #ccc;
  margin: 0 1%;
}

#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(1) {
  background: url(https://image.flaticon.com/icons/svg/130/130884.svg) no-repeat;
  float:right;
  
}
#slide1:checked ~ #controls label:nth-last-child(1),
#slide2:checked ~ #controls label:nth-last-child(4),
#slide3:checked ~ #controls label:nth-last-child(3),
#slide4:checked ~ #controls label:nth-last-child(2) {
  background: url(https://image.flaticon.com/icons/svg/130/130882.svg) no-repeat;
  float:left;
  
}

#slide1:checked ~ #bullets label:nth-child(1),
#slide2:checked ~ #bullets label:nth-child(2),
#slide3:checked ~ #bullets label:nth-child(3),
#slide4:checked ~ #bullets label:nth-child(4){
  background: #444;
}






@media (max-width: 1530px) {

  
 

  .content-static div{
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
  }

  .content-static{
    
    padding-bottom: 5%;
    overflow: scroll;
    
  }

  .content{
    overflow: scroll;
    object-fit: contain;
  }

  .contatosiframe{
    padding: 5%;
    margin-top: 5%;
    padding-bottom: 15%;
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%;
    
  }

  .container{
    padding-right: 0;
  }

  .calendarioiframe{
    padding: 5%;
    margin-top: 5%;
    padding-bottom: 15%;
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
  }
  
  .info-content svg{
    width: 100%;
    
    
  }

  .info-content{
    display: flex;
    flex-direction: column;
    
    
  }

 

  .info-geral{
    
    padding-left: 2%;
    padding-right: 2%;
  }

  .info-geral h4{
    margin-bottom: 0;
  }

  .info a{
    margin-top: 7%;
    margin-bottom: 5%;
    opacity: 1;
  }

  

  

  
}











@media (max-width: 1024px) {



 svg{
  width: 100%;
  height: 100%;
}

  .links li {
    display: none;

  }

  

  .links ul .ham{
    display: flex;
    flex-direction: column;
    
    cursor: pointer;
    font-size: 4rem;
  }

 

  .linkshidden{
    background-color: lightgray;
    text-align: center;
    display: flex;
    flex-direction: column;
    margin-top: 16%;
    padding: 5%;
    width: 100%;
    height: 450%;
    opacity: 1;
    z-index: 3;
    animation: ham .5s  ease-in-out;
  } 

  @keyframes ham {
    0% {
      opacity: 0;
      height: 0;
    }
  
    100% {
      opacity: 1;
      height: 1;

    }
  }


  .linkshidden ul{
    width: 100%;
    opacity: 0;
    animation: ham2 .5s  0.5s ease-in-out forwards;
    
  }

  @keyframes ham2 {
    0% {
      opacity: 0;
      
    }
   
    100% {
      opacity: 1;
      
  
    }
  }

  .linkshidden li{
    text-align: center;
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100%;
    font-size: 1.5rem;
    margin: 5%;
    padding: 2%;
    
  }

  .linkshidden li span{
    opacity: .5;
    margin: 2%;
  }

  


  .linkshidden ul .ham{
    font-size: 200%;
    width: 10%;
    height: 10%;
    text-align: center;
    
    transform: translate(0%,0%);
  }

  .linkshidden li .ham{
    box-shadow: .1rem .1rem .5rem rgb(108, 108, 108);
    border-radius: 5rem;
  }




  

  .navbar {
    height: 12vh;
    z-index: 3;
    position: relative;
    
  }
  
  .logo {
    width: 70%;
    
  }
 
  
  .links {
    width: 30%;
    
  }

  .welcomehome h2{
    font-size: 5rem;
  }

  .welcomehome h3{
    font-size: 3rem;
  }

 



  .info-content{
    display: flex;
    flex-direction: column;
  
    
  }

  .text-sobre {
    display: flex;
    flex-direction: column;
  }



  .content{
    height: 70vh;
    z-index: 0;
    overflow: scroll;
  }

  .content-static{
    height: 70vh;
    z-index: 0;
    overflow: scroll;
    
    
  }

  .content-static div{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  
  
  


  .bottom {
    position: relative;
    display: flex;
    opacity: 0;
    width: 100%;
    height: 18vh;
    animation: homepagebottom 1s .5s ease-in-out forwards;
  }
  @keyframes homepagebottom {
    from {
      
      opacity: 0;
    }
    to {
      
      opacity: 1;
    }
  }

  .bottom-static{
    position: relative;
    display: flex;
    width: 100%;
    height: 18vh;
  }

  .bottom-static div{
    height: 18vh;
  }

  .text-sobre{
    margin-top: 50%;
  }

  
 
  .text-sobre{
    margin-top: 50%;
  }

 

  .info-content div {
    
    padding: 0%;
    
  }

  .info{
    display: flex;
    flex-direction: column;
    
    
    width: 100%;
    height: 100%;
  }

  .info-geral {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3%;
    color: white;
    z-index: 3;
    animation: bg-tech-azul3 2s 0.2s ease-in-out forwards;
  }
  
  @keyframes bg-tech-azul3 {
    0% {
      margin-top: 10rem;
      
    }
    30% {
      margin-top: 1rem;
      
    }
    100% {
      opacity: 1;
      
    
    }
  }

  #slider {
    display: flex;
    position: relative;
    flex-direction: column;
    padding: 5%;
    height: 100%;
    width: 100%;
    opacity: 0;
    z-index: -3;
    animation: bg-tech-azul4 2s 1s ease-in-out forwards;
  }
  
  @keyframes bg-tech-azul4 {
    0% {
  
      opacity: 0;
    }
  
    30%{
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  

  .background {
    display: flex;
    width: 100%;
    font-size: 1rem;
    height: 100%;
    
  }

  .bottom-static{
    height: 16vh;
  }
  
  .background div {
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    
  }
  
  .background svg {
    transform: translate(0, 0%);
    padding: 1vh;
    height: 100%;
    
  }



}








  




@media (max-width: 813px) {

  

  .linkshidden{
    margin-top: 5%;
    width: 30%;
    height: 550%;  
  }

  .linkshidden li{
    
    padding: 0;
    margin: 2%;
    font-size: 1rem;
  }

  #ticket{
    font-size: 1rem;
    width: 20%;
    margin-left: 43%;
    margin-right: 45%;
    align-items: center;

  }

  .custos {
    display: block;
    
    top: 2%;
    font-size: .6rem;
  }

  .custos ul{
    width: 100%;
  }

  .custos h3{
    font-size: 1.2rem;
    
  }

  .custos h4{
    font-size: 1rem;
    padding-top: 5%;
  }

  .custos h4 span{
    font-size: .7rem;
    padding-top: 3rem;
  }

  .custos li span{
    font-size: 1rem;
    padding-top: 10%;
  }

  .obj h4{
    font-size: .3rem;
  }

  .valor-externo{
    margin-top: 7%;
  }

  .obs{
    margin-top: 3rem;
  }

  

  .welcomehome h2{
    font-size: 2rem;
  }

  .welcomehome h3{
    font-size: 1.5rem;
  }

  .ticket{
    margin-top: 15%;
    width: 20%;
  }

}






@media (max-width: 380px) {

  .welcomehome{
    top: 30%;
    
  }

  .linkshidden{
    margin-top: 25.8%;
    height: 300%;
    width: 100%;
  
  }


  .linkshidden li{
    padding: 0;
    margin: 5%;
    font-size: 1.2rem;
  }

  #ticket{
    font-size: 1rem;
    width: 20%;
    margin-left: 43%;
    margin-right: 45%;
    align-items: center;

  }



}