:root {
  --cor-mabel: rgb(255, 140, 0);
}

@font-face{
  font-family: myFont;
  src: url(public/pixelfont.ttf);
  font-display: swap;
}

* {
    box-sizing: border-box;
    margin: 0;
    max-width: 100vw;
  }
  
  html,
  body {
    background-image: linear-gradient(to left, rgba(202,229,25,255), yellow);
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  

  #titulo h1{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: #f38121;
    display: flex;
    justify-content: center;
    padding-left: 5vw;
    font-size: 4vmax
    
  }
  
  .inicio {
    max-width: 100vw;
    padding-right: 5vw;
    height: 100vh;
    background-color: whitesmoke;
    display: flex;
   
    align-items: center;
    /*border-right: 6px dashed yellowgreen;*/
  }
  
    .icons {
      
      display: flex;
      flex-flow: column;
      position: fixed;
      z-index: 8;
      
  }
  
  .icons img {
    width: 3vw;
    min-width: 30px;
    height: auto;
    margin-left: 10px;
  
    display: flex;
    padding-block: 3px;
    z-index: 8;
    
  }
  
  .icons img:hover {
    opacity: 0.5;
  }
  
  .icons a {
    display: flex;
    padding-block: 3px;
  }
  
    #icone {
      max-width: 50%;
      min-width: 250px;
      height: auto;
      display: block;
      margin-right: auto;
      margin-left: auto;
    }
  
    .logo {
      max-width: 8vw;
      min-width: 80px;
      height: auto;
      margin: 5px 0 0 5px;
      
      border-radius: 25%;
      z-index: -1;
    }
  
  
  .meio {
    display: flex;
    flex-flow: column;
    max-width: 100vw;
  }
  
    .main-content {
      display: flex;
      flex-flow: column;
      justify-content: center;
    }
  
    .about-div {
      /*background-image: url("../../public/mabelcapa.jpg");
      background-size: cover;
      */
     /* background-color: rgb(246, 255, 0);*/
      background-image: linear-gradient(to top left, yellowgreen, yellow);
      max-height: 1300px;
      max-width: 100vw;
      min-height: 100vh;
      
    }
  
    .about {
      font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: rgb(255, 255, 255);
      font-size: larger;
      color: rgb(48, 48, 9);
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      margin-top: 25vh;
      margin-bottom: 50vh;
      margin-left: 40px;
      margin-right: 30px;
      padding: 10px;
      padding-bottom: 10vh;
      padding-top: 5vh;
      text-align: justify;
      border-radius: 0px 50px 30px;
        overflow-wrap: break-word;
        word-wrap: break-word;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }
  
    .aboutTitle {
      font-size:x-large;
      margin-bottom: 8px;
    }
  
    .titleParagraph {
      margin-bottom: 8px;
    }

    .turmas {
      display: grid;
      grid-template-columns: 1fr 1fr;
      width: 100%;
      position: relative;
    }

    @media (max-width: 768px) {
      .turmas {
          grid-template-columns: 1fr; /* Uma única coluna para dispositivos móveis */
      }

      #colunaKids {
        height: 50vh;
      }

      #colunaTeens {
        height: 50vh;
      }

      .colunaTurmas { 
        height: 50vh; 
      }
  }

    .coluna {
      position: relative;
      filter: blur(4px);
      -webkit-filter: blur(4px);
    }

    .coluna:hover {
      -webkit-filter: none !important; 
       filter: none !important;
    }

    .textoColuna {
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
      color: white;
      font-weight: bold;
      border: 3px solid #f1f1f1;
      position: relative;
      bottom: 65%;
      left: 10%;
      z-index: 2;
      width: 80%;
      padding: 20px;
      text-align: center;

    }

    .textoColuna button {
      background-color: rgba(0, 0, 0, 0);
      color: white;
      border: 2px solid white;
      padding: 4px;
      margin-top: 15px;
      cursor: pointer;
    }

    #colunaKids {
      background-image: url(public/kids2.avif);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      z-index: 1;
    }
    

    #colunaTeens {
      background-image: url(public/teens2.avif);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      z-index: 1;
    }

    @media (min-width: 769px){
      #colunaKids {
        height: 70vh;
      }

      #colunaTeens {
        height: 70vh;
      }
      .colunaTurmas { 
        height: 70vh;
        
      }
    }
  
    .header {
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 4;
    }

    .header ul {
      margin: 0;
      padding: 0;
      list-style: none;
      overflow: hidden;
    }
  
    .header img {
      z-index: -1;
    }
  
    .header{position:-webkit-sticky; position:sticky; top:0;}
  

    .header li {
      align-self: center;
    }
  
    .header li a{
      display: block;
      padding: 20px 20px;
      text-decoration: none;
      color: yellowgreen;
      font-size: 18px;
    }
  
    .header li a:hover{
      color: rgb(127, 170, 42);
    }

    .header .menu {
      clear: both;
      max-height: 0;
      transition: max-height .2s ease-out;
    }

    .header .menu-icon {
      cursor: pointer;
      display: inline-block;
      float: right;
      padding: 28px 20px;
      position: relative;
      user-select: none;
    }
    
    .header .menu-icon .navicon {
      background: yellowgreen;
      display: block;
      height: 2px;
      position: relative;
      transition: background .2s ease-out;
      width: 18px;
    }
    
    .header .menu-icon .navicon:before,
    .header .menu-icon .navicon:after {
      background: yellowgreen;
      content: '';
      display: block;
      height: 100%;
      position: absolute;
      transition: all .2s ease-out;
      width: 100%;
    }
    
    .header .menu-icon .navicon:before {
      top: 5px;
    }
    
    .header .menu-icon .navicon:after {
      top: -5px;
    }

    .header .menu-btn {
      display: none;
    }
    
    .header .menu-btn:checked ~ .menu {
      max-height: 240px;
    }
    
    .header .menu-btn:checked ~ .menu-icon .navicon {
      background: transparent;
    }
    
    .header .menu-btn:checked ~ .menu-icon .navicon:before {
      transform: rotate(-45deg);
    }
    
    .header .menu-btn:checked ~ .menu-icon .navicon:after {
      transform: rotate(45deg);
    }
    
    .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
    .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
      top: 0;
    }
  
    @media (min-width: 48em) {
      .header{
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .header li {
        float: left;
      }
      .header li a {
        padding: 20px 30px;
      }
      .header .menu {
        clear: none;
        float: right;
        max-height: none;
      }
      .header .menu-icon {
        display: none;
      }
    }
  
  #beforeStructure {
    display: flex;
    justify-content: center;
    background-color: cyan;
  }
  
  #beforeStructure h1 {
    padding-block: 25px;
    color: white;
    font-size: 70px;
  }
  
  .structure {
    background-color: cyan;
    display: flex;
    flex-flow: column;
    max-height: 300vh;
  }
  

  .structure .imgNormal {
    max-width: 20vw;
    min-width: 150px;
    height: 300px;
    margin-inline: 0;
    display: flex;
    opacity: 1;
    transition: 0.3s;
    margin-left: 0;
  }
  
  .structure .imgNormal:hover {
    transform: translateX(10vw) scale(1.5);
    -webkit-clip-path: none !important; 
    clip-path: none !important;
    border-radius: 15px;
    z-index: 6;
  }
  
  .structure article:nth-child(even) .imagemArtigo .imgNormal:hover{
    transform: translateX(-10vw) scale(1.5);
  }

  .imagemArtigo {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: flex-start;
    background-color: whitesmoke;
    max-height: 300px;
    margin-top: 10px;
    cursor: url(https://cdn.custom-cursor.com/db/14085/32/color-pixels-aquamarine-pointer.png)   
    , pointer !important
  }

  @media (max-width: 1000px){
    .imagemArtigo {
      max-height: 250px;
    }
    .structure .imgNormal {
      height: 250px;
    }
    .imagemArtigo a {
      max-height: 250px;
    }
  }

  .imagemArtigo a {
    max-height: 300px;
    cursor: url(https://cdn.custom-cursor.com/db/14085/32/color-pixels-aquamarine-pointer.png)   
    , pointer !important
  }

  .imagemArtigo:hover {
    background-color: rgb(2, 211, 211);
    transition: 0.8s;
  }


  .structure article:nth-child(odd) .imagemArtigo p{
    margin-left: 20vw;
  }

  .structure article:nth-child(even) .imagemArtigo p{
    margin-right: 20vw;
  }


  .imagemArtigo p {
    font-family: myFont;
    font-size: 30px;
  }

  .imagemArtigo:hover p{
    color: white;
  }
   /*
  .structure article:nth-child(odd) .imagemArtigo p{
    transform: translate(-30vw);
  }

  .structure article:nth-child(even) .imagemArtigo p{
    transform: translate(30vw);
  }
*/
  .structure article:nth-child(odd) .imagemArtigo .imgNormal{
    -webkit-clip-path:polygon(0% 0%, 100% 0%,50% 100%,0% 100%);
    clip-path:polygon(0% 0%, 100% 0%,50% 100%,0% 100%);
  }
  
  .structure article:nth-child(even) .imagemArtigo .imgNormal{
    -webkit-clip-path:polygon(0% 0%, 100% 0%,100% 100%,50% 100%);
    clip-path:polygon(0% 0%, 100% 0%,100% 100%,50% 100%);
  }

  .structure article:nth-child(even) .imagemArtigo {
    display: flex;
    justify-content: flex-end;
  }
  

  .fim {
    transition: 1s ease;
    background-color: rgb(246, 255, 0);
    display: flex;
    justify-content: space-between;
    max-width: 100vw;
    flex-flow: row wrap;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-inline: 15px;
    font-weight: 10;
  }
  .fim a {
    text-decoration: none;
    color:black;
  }
  
  .fim a:hover {
    color: blue
  }
  
  
  
  #ludoteca:hover {
    opacity: 0.7;
  }
  
#beforeActivities {
  background-color: var(--cor-mabel);
  display: flex;
  justify-content: center;
}


    #beforeActivities h1 {
      color: whitesmoke;
      padding-block: 25px;
      font-size: 4vw;
    }
  
.activities {
      background-color: var(--cor-mabel);
      height: 90vh;
      max-width: 100vw;
      display: flex;
      justify-content: center;
      align-items: flex-start;
    }

    .img-slider {
      position: relative;
      width: 800px;
      height: 500px;
      margin: 10px;
      background: var(--cor-mabel);
      justify-content: center;
    }
    
    .img-slider .slide {
      z-index: 1;
      position: absolute;
      width: 100%;
      clip-path: circle(0% at 0 50%);
    }

    .img-slider .slide.active {
      clip-path: circle(150% at 0 50%);
      transition: 2s;
      transition-property: clip-path;
      display: flex;
      justify-content: center;
    }

    .img-slider .slide img {
      z-index: 1;
      max-width: 100%;
      border-radius: 5px;
      max-height: 75vh;
      justify-self: center;
    }

    .img-slider .slide .info {
      position: absolute;
      top: 0;
      padding: 15px 30px;
      z-index: 8;
    }

    .img-slider .slide .info h2 {
      color: rgb(132, 193, 10);
      font-size: 45px;
      text-transform: uppercase;
      font-weight: 800;
      letter-spacing: 2px;
    }

    .img-slider .slide .info p {
      color: #fff;
      background: rgba(0, 0, 0, 0.1);
      font-size: 16px;
      width: 60%;
      padding: 10px;
      border-radius: 4px;
    }

    .img-slider .navigation {
      z-index: 2;
      position: absolute;
      display: flex;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
    }

    .img-slider .navigation .btn {
      background: rgba(255, 255, 255, 0.5);
      width: 12px;
      height: 12px;
      margin: 10px;
      border-radius: 50%;
      cursor: pointer;
    }

    .img-slider .navigation .btn.active {
      background: rgb(132, 193, 10);
      box-shadow: 0 0 2px rbga(0, 0, 0, 0.5);
    }

    @media (max-width: 820px){
      .img-slider {
        width: 600px;
        height: fit-content;
      }

      .img-slider .slide .info {
        padding: 10px 25px;
      }

      .img-slider .slide .info h2 {
        font-size: 35px;
      }

      .img-slider .slide .info p {
        width: 70%;
        font-size: 15px;
      }

      .img-slider .navigation {
        bottom: 25px;
      }

      .img-slider .navigation .btn {
        width: 10px;
        height: 10px;
        margin: 8px;
      }
    }

    @media (max-width: 684px){
      #beforeStructure h1 {
        padding-block: 25px;
        font-size: 60px;
      }
    }

    @media (max-width: 620px){

      .about-div{
        max-height: 1400px;
      }

      #beforeStructure h1 {
        padding-block: 25px;
        font-size: 40px;
      }
      .img-slider {
        width: 400px;
        height: fit-content;
      }

      .img-slider .slide .info {
        padding: 10px 20px;
      }

      .img-slider .slide .info h2 {
        font-size: 30px;
      }

      .img-slider .slide .info p {
        width: 80%;
        font-size: 13px;
      }

      .img-slider .navigation {
        bottom: 15px;
      }

      .img-slider .navigation .btn {
        width: 8px;
        height: 8px;
        margin: 6px;
      }
    }

    @media (max-width: 420px){

      .imagemArtigo {
        max-height: 200px;
      }
      .structure .imgNormal {
        height: 200px;
      }
      .imagemArtigo a {
        max-height: 200px;
      }

      .imagemArtigo p {
        font-family: myFont;
        font-size: 25px;
      }

      .structure article:nth-child(odd) .imagemArtigo p{
        margin-left: 0;
      }
    
      .structure article:nth-child(even) .imagemArtigo p{
        margin-right: 0;
      }

      #beforeStructure h1 {
        font-size: 30px;
      }


      .about-div{
        max-height: 1570px;
      }


      .activities{
        height: 70vh;
      }

      .img-slider {
        width: 320px;
        height: fit-content;
      }

      .img-slider .slide .info {
        padding: 5px 10px;
      }

      .img-slider .slide .info h2 {
        font-size: 25px;
      }

      .img-slider .slide .info p {
        width: 90%;
        font-size: 11px;
      }

      .img-slider .navigation {
        bottom: 10px;
      }
    }



    @media (max-width: 370px){

      .about-div{
        max-height: 1830px;
      }

      #beforeStructure h1 {
        font-size: 30px;
      }

      .activities{
        height: 70vh;
      }

      .img-slider {
        width: 320px;
        height: fit-content;
      }

      .img-slider .slide .info {
        padding: 5px 10px;
      }

      .img-slider .slide .info h2 {
        font-size: 25px;
      }

      .img-slider .slide .info p {
        width: 90%;
        font-size: 11px;
      }

      .img-slider .navigation {
        bottom: 10px;
      }
    }

    @media (max-width: 340px){

      .about-div{
        max-height: 2040px;
      }

      #beforeStructure h1 {
        font-size: 25px;
      }

      .imagemArtigo p {
        font-family: myFont;
        font-size: 20px;
      }

      .activities{
        height: 80vh;
      }

    }


    @media (max-width: 300px){
      .about-div{
        max-height: 2200px;
      }

    }