@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css");

html {box-sizing: border-box;font-family:"Roboto", sans-serif;}
*, *:before, *:after {box-sizing: inherit;}

body {
  font-family:"Roboto", sans-serif !important;
}

p,
a,
ul,
li {
 font-size: 1rem;
}

p, li {
 color: #2a2a2a;
}

.international-date{
  text-align: center;
  color: #fde9d2;
  font-size: 32px;
  margin-bottom:40px;
  margin-top: 0px !important;
  

}
.red-alert{
border-bottom: 2px solid red;
}
a {
 color: #0052d5;
}

a:hover {
 color: #0052d5;
}

h1, h2, h3, h4{
 font-weight: bold;
}
.max-w-250{
  max-width: 250px;
}
h2 {
 color: #024ee2;
 font-size: 1.6rem;
 padding: 1rem 0 .4rem;
}

h3 {
 font-size: 1.3rem;
} 

h4 {
 font-size: 1.1rem;
}

.nav2 {
 background-color: #024ee2;
 padding: 1rem;
}

.item-menu{
 color: #ffffff !important;
 text-transform: uppercase;
 font-size: 15px !important;
 font-weight: bold;
 display: block;
 padding: .5rem 1.8rem
}

#menu2 a.active {
 color: #ffd0c1 !important;
 text-transform: uppercase;
 font-size: 15px !important;
 font-weight: bold;
 display: block;
 padding: .5rem 1.8rem;
}

#menu2 a.active > a:before {
 visibility: visible;
 -webkit-transform: scaleX(1);
 transform: scaleX(1);
}

.eventDescription{
  margin-bottom: 16px;
  }
  
  .btn-transmissao{
  background: #fde9d2;
  color: #e35a31;
  padding: 16px 10px;
  border-radius: 6px;
  border: 1px solid #e35a31;
  transition:0.5s;
  -webkit-touch-callout: none;  /* iPhone OS, Safari */
    -webkit-user-select: none;    /* Chrome, Safari 3 */
    -khtml-user-select: none;     /* Safari 2 */
    -moz-user-select: none;       /* Firefox */
    -ms-user-select: none;        /* IE10+ */
  }
  

  .btn-transmissao:hover{
  background: #e35a31;
  color: white;
  border-radius: 6px;
  border: 1px solid #e35a31;
  transition:0.5s;
  text-decoration:none;
  
  }
  
  @keyframes slideIn {
    to {
        transform: translateY(0);
        opacity: 1;
        }
    }
  
  .eventTitle{
    font-size: 22px;
    font-weight: bold;
  }
  
  .eventCard{
  background: #fde9d2;
  padding: 16px;
  border-radius: 10px;
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  margin: auto;
  margin-bottom: 20px;
  max-width: 1140px;
  box-shadow: 3px 4px 5px #00000042;
  transform: translateY(20px);
    opacity: 0;
    transition: transform 0.5s, opacity 0.5s;
  
  }
  .in-view {
    transform: translateY(0);
    opacity: 1;
   }
  
  .eventBody{
    display: flex;
    justify-content: start;
    flex-direction: column;
    align-items: start;
    flex: 1;
    margin-inline: 16px;
  }
  
  
  .eventHour{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-right: 1px solid #e35a31;
  
  }
  .eventLocation{
    font-size: 14px;
  }
  
  .content{
    padding:24px;
  }
  
  
  .tickets{
  display: flex;
  flex-direction: row;
  margin-bottom: 14px;
  justify-content: center;
  align-items: center;
  gap: 16px;
  
  
  }
  .invisible{
    display:none;
  }
  .ticket-active{
  background: #fde9d2;
  color: black;
  padding: 16px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0px 4px 0px #00000017;
  z-index: 1;
  text-align: center;
  transition:0.5s;
  -webkit-touch-callout: none;  /* iPhone OS, Safari */
    -webkit-user-select: none;    /* Chrome, Safari 3 */
    -khtml-user-select: none;     /* Safari 2 */
    -moz-user-select: none;       /* Firefox */
    -ms-user-select: none;        /* IE10+ */
    min-width: 150px;
  }
  
  .ticket{
  background: #e35a31;
  color: #fde9d2;
  padding: 16px;
  cursor: pointer;
  transition: 0.5s;
  text-align: center;
  border: 1px solid #fde9d2;
  border-radius: 8px;
  -webkit-touch-callout: none;  /* iPhone OS, Safari */
    -webkit-user-select: none;    /* Chrome, Safari 3 */
    -khtml-user-select: none;     /* Safari 2 */
    -moz-user-select: none;       /* Firefox */
    -ms-user-select: none;        /* IE10+ */
    min-width: 150px;
    
  }
   .ticket,.ticket-active{
  transition: .7s ease;
}

.ticket.glow,.ticket-active.glow {
  transition: .7s;
background: #fde9d2ab;
color: #fde9d2;
}
.compain{
  height: 290px;
}
  .hour{
  font-size:18px;
  margin-right: 14px;
  text-align:center;
  min-width: 110px;
  }
  
  .ticket-active:hover, .ticket:hover{
    transform:scale(1.09);
    transition:0.5s;
  }
  
  /* Estilos para dispositivos móveis */
  @media (max-width: 768px) {
  
  .compain{
    height: auto;
  }
    
    .eventCard{
      width: 100%;
      flex-direction: column;
    }
    
    .max-w-250{
      max-width: 200px;
    }
    .content{
      padding:16px !important;
    }
      .eventHour{
        width: 100%;
      }
      .buttonContainer{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    .btn-transmissao{
      padding: 8px 24px;
    }
    .tickets{
      flex-direction: column !important;
    }
    .ticket-active{
      width: 100%;
    }
    .ticket{
      width: 100%;
    }
    
    .hour{
      margin-right:0px;
      text-align:start;
      width: 100%;
    }
    .eventBody{
      margin-inline: 0px;
      width: 100%;
    }
    
  }
  






nav.breadcumb {
 margin-bottom: 3rem;
}

/* Introdution */
#intr, .general  {
 margin: 3rem 0;
}

/* Contador */
#cont {
 background-color: #e35a31;
 padding: 6rem 0;
 margin-bottom: 0;
}

h2.cont-title {
 color: #ffffff;
}

span.cont-number {
 font-size: 4rem;
 font-weight: 700;
 color: #feead3;
}

p.cont-subtitle {
 font-weight: 500;
 font-size: 1.1rem;
}

hr.cont-line {
 border-top: 3px solid #feead3;
 width: 10%;
}

hr.cont-line.blue {
 border-top: 3px solid #024ee2;
 width: 5%;
 margin: 0.8rem 0;
}

a.cont-btn {
 border: 1px solid #feead3;
 padding: 1rem 6rem;
 border-radius: 10px;
 color: #feead3;
 margin-top: 9rem;
 transition: 0.3s;
}

a.cont-btn:hover {
 background-color: #feead3;
 color: #e35a31;
 font-weight: bold;
}

/* Table */
h3.cont-subtitle.table {
 background-color: #feead3;
 padding: 1rem 2rem;
 border-radius: 2rem;
 margin: 2rem 0;
 //text-align: center;
}

.table.cont {
  color: #21252a;
  margin-top: 3rem;
  border-radius: 10px;
  background-color: #fee9d1;
}

.table td, .table th {
  border-top: 1px solid #c34d29;
  padding: 1.2rem;
}

/* Section Continents */
.general.continents {
 padding: 5rem 0 4rem;
 background-color: #e35a31;
 margin-bottom: 0;
} 

h3.general-subtitle {
 color: #00359d;
 padding-bottom: 1rem;
}

.accordion {
 background-color: #feecd4;
 color: #2a2a2a;
 cursor: pointer;
 padding: 0.7rem 0 0.7rem 2rem;
 width: 100%;
 /*border: none;*/
 text-align: left;
 outline: none;
 font-size: 1rem;
 transition: .3s;
 border: 3px solid #feecd4;
 border-bottom-width: 1px;
 font-weight: normal;
 margin-top: 15px;
 border-radius: 4px;
 font-weight: 500;
 box-shadow: 1px 2px 0px 0 #d7d0c6;
}


.accordion:after {
 font-family: 'Font Awesome 5 Free';
 content: "\f078";
 color: #2a2a2a;
 font-weight: bold;
 float: right;
 margin-right: 17px;
}

.ativo:after {
 font-family: 'Font Awesome 5 Free';
 content: "\f077";
}

.acc2:after{
 margin-right: 17px !important;
 margin-left: -23px !important;
 margin-top: -10px;
}

.panelx {
 padding: 0 18px;
 background-color: #fdfbf9;
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.2s ease-out;
 //border: 2px solid #f4e4e4;
 border-top: 0;
}

.panelx p{
 margin: 25px;
 font-size: 14px !important;
 color: #572727;
}

.panelx a{
 font-size: 0.875rem !important;
}

.panelx a:hover{
 font-size: 0.875rem !important;
}

.panelx ul{
 margin: 25px;
}

ul.accordion-itens {
 padding: 1rem 2rem;
}

span.detail-local {
 font-weight: 500;
 font-size: 1.05rem;
}




.slider {
  overflow-x: auto; /* Permite rolagem horizontal */
  scrollbar-width: none; /* Oculta a barra de rolagem em Firefox */
}

.slider::-webkit-scrollbar {
  display: none; /* Oculta a barra de rolagem no Chrome, Safari, Opera */
}

.slide-track {
  display: flex;
  max-width: fit-content;
  margin: auto;
}

/* Pausar a animação no hover */
.slider:hover .slide-track {
  animation-play-state: paused;
}


.button-programacao{
  display: block;
  margin: 20px 0;
  padding: 10px;
  background: #024EE0;
  text-align: center;
  color: white;
  width: fit-content;
  box-shadow: 8px 6px #FFECD9;
  padding-inline: 3rem;
  color: white;
  transition: .7s;
  text-transform: uppercase;
}
.button-programacao:hover{
  transform:scale(1.1);
  transition:.7s;
  color: white !important;
  text-decoration:none !important;
}





.carroussel{
  display: flex;
  justify-content: center;
  gap: 1rem;
  align-items: center;
}

.balls{
  display: flex;
  align-items: center;
  margin-bottom: 32px;
  justify-content: center;
  gap: 20px;
}
.ball{
  border-radius: 16px;
  background: #D9D9D9;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor:pointer;
  
}
.ball-active{
  background: white;
}

.font-32{
  font-size: 32px !important;
}


.p-45{
  padding:48px !important;
}

.box-content-paragraph{
  color: #FFECD9;
  font-family: Roboto;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
}

.gap-2{
  align-content: center;
  gap:16px !important;
}

.z1{
  z-index: 1 !important;
  
}
.bg-livros{
  background-image: url('https://ucsvirtual.ucs.br/site/midia/arquivos/livros-italia-international.jpg') !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}
.bg-carrer{
  background-image: url('https://www.ucs.br/site/midia/arquivos/carrer-international_2.png') !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}

.bg-ia{
  background-image: url('https://www.ucs.br/site/midia/arquivos/ii-simposio-ia-international_3.png') !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}


.img-target{
  transition:.4s;
  
}
.img-target:hover{
  transform:scale(1.1);
  transition:.4s;
}

.center{
  display: flex;
  justify-content: center; 
}

.img-bandeira{
  height:50px !important;
  
}
.mt-4rem{
  margin-top: 4rem !important;
}
.absolute-left{
  position: absolute;
  top: 64px;
  left: 10px;
}

.absolute-rigth{
  position: absolute;
  top: 64px;
  right: 10px;
}
.max-w-120{
  max-width: 130px;
  min-width: 130px;

  
}
.min-w-500{
   width: 25vw;
}

.relative{
  position:relative;
  
}
.inner-border{
  border: 2px solid black;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 8px;
  right: -8px;
}
.footer-box{
  background: #ffecd9;
  display:flex;
  justify-content:center;
  padding: 32px 16px;
  gap: 16px;
  flex-wrap:wrap;
  align-items: center;
  
}

.subtitle{
background: #ffecd9;
  text-transform: uppercase;
  margin-top: 1rem;
  text-align: center;
  width: fit-content;
  padding:8px 24px !important;
  font-weight: normal;
  display: flex;
  justify-content: center;
  align-items: center;
margin-bottom: 16px;
font-size: 1.25rem;
line-height: 140%;
}

.international-footer{
  background: #005DB0;
  padding: 4rem 0;
}

.mx-2rem{
  margin-inline: 2rem;
}

.polaroid{
  background: white;
  padding: 16px 16px 48px 16px;
  display: flex;
  width: fit-content;
  justify-content: center;
  box-shadow: 2px 3px 4px #00000030;
}

.inclined-to-left{
  transform: rotate(-8deg);
}
.suica{
  min-width: 90px;
  justify-content: center;
  background: #da291c;
}
.inclined-to-right{
  transform: rotate(8deg);
}
.lt-title{
  max-width:fit-content;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  
}
.last-edition{
  background-image: url('https://www.ucs.br/site/midia/arquivos/quadriculado-international.png');
  background-attachment: fixed;
  background-repeat: repeat;
  background-color: #FFECD9;
  padding: 4rem 0;
}

.bandeiras{
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.bandeira-icon{
  max-width: 100px;
  box-shadow: 2px 4px 5px #0003;
  display:flex;
  justify-content: center;
}
.bandeira{
  width: fit-content;
  border: 1px solid #005DB0;
  padding: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition:.4s;
  text-align:center;
}
.bandeira:hover{
  transform:scale(1.1);
  transition:.4s;
}
.bandeira-description{
  margin-top: 16px;
  color: black !important;
}


.relative-box{
  background: #ffebd2;
  padding: 16px;
  border: 2px solid black;
  border-radius: 8px;
  max-width: fit-content;
  margin: auto;
}

.continents{
      background-color: #FF6432;
      padding: 6rem 0;
      
}
.invisible{
  display:none;
  
}
.img-target{
  cursor:pointer;
  
}
 .box-container {
      position: relative;
      width: 300px;
      overflow: hidden;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      cursor: pointer;
      height: 804px;
      background: #eee;
      flex:1;
    }

    .box-title{
      position: absolute;
      bottom: 0;
      background-color: #FF6432;
      width: 100%;
      text-align: center;
      width: 100%;
      color: white;
      padding: 32px;
      box-sizing: border-box;
      transition: transform 0.4s ease;
      z-index: 2;
      font-size: 21px;
      font-weight: 700;
      line-height: 140%;
      min-height: 123px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .box-content {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 100%;
      background-color: #FF6432;
      padding: 20px;
      box-sizing: border-box;
      transform: translateY(100%);
      transition: transform 0.4s ease;
      z-index: 1;
      color:white;
      
    }

    .box-container:hover .box-title {
      transform: translateY(-120%); /* Move o título para cima, mas mantém parte visível */
    }

    .box-container:hover .box-content {
      transform: translateY(80%); /* Revela o conteúdo abaixo do título */
    }

.paineis{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px;
}
.international-title-orange{
  display: block;
  color: white;
  text-align: center;
  background: #ff6432;
  text-transform: uppercase;
  width: 70%;
  margin: auto;
  padding: 16px;
  font-family: "Basic", sans-serif;
  font-size: 36px;
  
}
.bg-blue{
  padding: 6rem 0;
  background-image: url('https://www.ucs.br/site/midia/arquivos/quadriculado-branco.png');
  background-attachment: fixed;
  background-repeat: repeat;
  background-color: #005DB0;
  
 }
 .text-box{
   color: white;
   
 }
.bg-bege{
  background: #FFECD9;
}
.p-42{
  padding: 42px;
}
.star{
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 40px;
}
.passaporte{
position: absolute;
  right: 50px;
}
.bg-orange{
    background-color: #FF6432 !important;
}  
.squares{
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.square-card{
  position: relative;
  background: #FF6432;
  text-align: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
  margin-bottom: 2rem;
  box-shadow: 8px 8px 0px blue;
  min-height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 30%;
}
.button-international-ligth{
  display: block;
  margin: auto;
  padding: 10px;
  background: #FFECD9;
  text-align:center;
  color: #024EE0;
  width: fit-content;
  box-shadow: 8px 6px #ff6432;
  padding-inline: 3rem;
  transition:.7s;
  text-transform: uppercase;
}
.button-international-ligth:hover{
  color: #024EE0 !important;
  transform:scale(1.1);
  transition:.7s;
  text-decoration: none;
}

.button-international{
  display: block;
  margin: auto;
  padding: 10px;
  background: #024EE0;
  text-align:center;
  color: white;
  width: fit-content;
  box-shadow: 8px 6px #ff6432;
  padding-inline: 3rem;
  color:white;
  transition:.7s;
    text-transform: uppercase;
}
.button-international:hover{
  color:white !important;
  transform:scale(1.1);
  transition:.7s;
  text-decoration: none;
}

.button-international-inverted{
  display: block;
  margin: auto;
  padding: 10px;
  background: #ff6432;
  text-align:center;
  color: white;
  width: fit-content;
  box-shadow: 8px 6px #024EE0;
  padding-inline: 3rem;
  color:white;
  position:relative;
  z-index:1;
  transition:.7s;
    text-transform: uppercase;
}

.button-international-inverted:hover{
  color:white !important;
  transform:scale(1.1);
  transition:.7s;
  text-decoration: none;
}

.square-card p{
  color: #FFECD9;
  font-size: 24px;
  text-transform: uppercase;
  margin-inline: 3rem;
  font-weight: 400;
}
.atracoes{
  padding: 6rem 0px;
  background-image: url('https://www.ucs.br/site/midia/arquivos/quadriculado-international.png');
  background-attachment: fixed;
  background-repeat: repeat;
  background-color: #FFECD9;

}

.bg-airplane{
 background-image: url('https://www.ucs.br/site/midia/arquivos/airplanes-international.png');

  background-repeat: repeat;
}

.international-title{
  color: #FFECD9;
  background: #024EE0;
  font-size: 36px;
  width: fit-content;
  padding: 8px;
  text-transform: uppercase;
  font-family: "Basic", sans-serif;

}
.international-description{
color: #024EE0;
  font-family: Roboto;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 33.6px;
  margin-top: 32px;
 }
 
 
 @media (max-width: 770px) {
  /* Estilos para telas com largura máxima de 768px */

  .passaporte{
      position: unset;
  }
  .img-target{
    width:200px;
    height:200px;
  }
  .square-card{
    min-height: 70%;
   padding-top: 20px;
    padding-bottom: 20px;
    max-width: 40%;
      margin-bottom: .3rem;

  }
  .squares{
  justify-content: center;
  gap: 30px;
  }
  .square-card p{
    font-size: 15px;
    margin-inline: 2rem;
  }

  .absolute-left{
    position:unset;
  }
  .absolute-rigth{
    position:unset;
  }
  .first{
    order:1;
  }
  .second{
    order:2;
    
  }
  .min-w-500{
    width: auto;
  }
  .fixed-ph{
    flex-direction:column
  }
  
  .international-title{
    font-size:29px;
  }
  .international-title-orange{
  font-size:20px;
  }

.box-title{
  font-size: 18px;
  }
  .paineis{
    padding: 32px 0;
  }
  .box-content-paragraph{
    font-size:16px;
  }
  .star{
    width:24px;
  }
  .remove-container{
    padding-right:0px !important;
    padding-legt:0px !important;
  }

}
 
.actived{
  border-bottom: 2px solid #FFECD9;
}

@media (min-width: 0) and (max-width: 576px) {
 ul.accordion-itens {
  margin: 0;
  padding: 2rem;
 }
}