*{
    font-family: 'JetBrains Mono', monospace;
}

footer{
    color: white;
}

.titulos{
    font-family: 'Bevan', cursive;
    font-size: 4rem !important;
    color: #522B78 !important;
    text-align: right !important;
}


.titulosesq{
    font-family: 'Bevan', cursive;
    font-size: 4rem !important;
    color: #522B78 !important;
    text-align: left !important;
   
}

#banner{
  background-image: url('../imagens/1x/banner-lab-digital.png');
  height: 920px;
  
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;

}

#bemvindo{
  background-color: #522B78;
  background: -moz-linear-gradient(top, #522B78, #000) repeat-X;
 
/* Safari, Google Chrome */
 
background: -webkit-gradient(linear, left top, left bottom, from(#522B78), to(#21033f)) repeat-X;
box-shadow: 8px 1px 8px #0000004b;
z-index: 2;

}

#chamadadetalhes{
  background-color: #efeff0;
  background: -moz-linear-gradient(top,  #ffffff , #B6A6C6 ) repeat-X;
  padding-right: 0px;
  
  

  
 
/* Safari, Google Chrome */
 
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#B6A6C6)) repeat-X;
padding-top: 150px;
padding-left: 0px;
}



@keyframes slideInFromRight {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes showing {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

#tecnologia{
  background-color: #522B78;
  animation: 1s ease-out 0s 1 slideInFromRight;
  margin-bottom: 150px;
  padding: 50px;
  padding-left: 100px;
  border-radius: 150px 0px 0px 150px;
  color: white;
  width: 80%;
  margin-left: auto;
  margin-right: 0;
  box-shadow: 4px 4px 4px #00000069;
 
 
}

#design{

  background-color: #DB8E33;
  animation: 1s ease-out 0s 1 slideInFromLeft;
  margin-bottom: 150px;
  padding: 50px;
  padding-left: 100px;
  border-radius: 0px 150px 150px 0px;
  color: white;
  width: 80%;
  margin-left: 0;
  margin-right: auto;
  box-shadow: 4px 4px 4px #00000069;
  
}

#chamada{
  margin-left: 10%;
  margin-top: 100px;
  animation: 1s ease-out 0s 1 showing;
  
 
}
#chamada h1 span{
  font-family: 'Franklin Gothic Medium';
  color: white;
  font-weight: 900 !important;
  font-size: 4.2rem;
}

#chamada h1 #digital{
  font-size: 10rem; line-height:9rem; letter-spacing: 1px;
}


#chamada div p{
  font-family: 'JetBrains Mono';
  color: white;
  font-size: 1.5rem;
}

#chamada #botaocontato{
  font-family: 'JetBrains Mono';
  color: white;
  font-size: 18px;
  background-color: #522B78;
  height: 50px;
  border-radius: 10px;
  padding: 10px;
  padding-left: 18px;
  margin-bottom: 200px;
  width: 350px;
  margin-top: 60px;
}




.navbar{
    position: fixed !important;
    z-index: 20 !important;
    width: 100% !important;
    background: white !important;
    top: 0 !important;
    transition: top 0.3s !important; /* Transition effect when sliding down (and up) */
    box-shadow: 10px 4px 15px #0000002d;
    display: block;
 
}

#baratodiv{
  transition: display 0.6s ease;
}

#baratodiv{
  transition: display 0.6s ease;
}

#baratodiv{
  transition: display 0.6s ease;
}

#navbar{
    transition: top 0.3s !important; /* Transition effect when sliding down (and up) */
    position: fixed !important;
}

.scrolled-down{
    transform:translateY(-100%) !important; transition: all 0.3s ease-in-out !important;
  }
  .scrolled-up{
    transform:translateY(0) !important; transition: all 0.3s ease-in-out !important;
  }




  .logo{
    background-image: url(../../imagens/logo.svg);
    background-position-y: 50%;
    width: 25%;
    height: 104px;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    }


    menu{
      height: 150px;
      padding-left: 10px !important;
       
      
   }
   .menu a{
       width: 93%;
       min-width: 150px;
       height: 100%;
       padding: 30px !important;
       
     
   }
   
   
   
   
   .menu:hover{
       background:#EE8B3D ;
       color: white !important;
   }
   
   
   ul li a:hover{
       color: white !important;
   }
   
   
   #triangulo{
       background-image: url(../../imagens/fundohome.svg);
       background-size: contain;
       background-repeat: no-repeat;
       /* background-position-x: 750px; */
       /* background-position-y: 190px; */
       height: 600px;
       width: 100%;
       z-index: -10;
       margin-left: 0px;
       animation-name: triangulos;
       animation-duration: 7s;
       animation-delay: 0s;
       animation-iteration-count: infinite;
       animation-timing-function: ease;
       animation-play-state: running;
   
   }
   
   
   @keyframes triangulos {
       0%   {background-image: url(../../imagens/fundohome.svg);}
       33%   {background-image: url(../../imagens/fundohome1.svg);}
       66%   {background-image: url(../../imagens/fundohome2.svg);}
       100%  {background-image: url(../../imagens/fundohome3.svg);}
   }
   #seletor{
       margin-top: -200px;
   }
   
   #textoseletor{
       background-color: rgba(177, 5, 154, 0.09);
   }
   
   
   
   #botoeslg{
     background-color: rgba(177, 5, 154, 0.09);
   }
   
   #botoes{
     margin-top: 150px ;padding-left: 100px;
   }
   
   #utilidade{
       background-image: url(../../imagens/utilidade.svg);
       background-size: contain;
       background-repeat: no-repeat;
       background-position-y: 100px;
       /* background-position-x: 750px; */
       /* background-position-y: 190px; */
       height: 600px;
       width: 100%;
       z-index: -10;
       animation-name: cerebro;
       animation-duration: 2s;
       animation-delay: 0s;
       animation-iteration-count: infinite;
       animation-timing-function: ease-in-out;
       animation-play-state: running;
   }
   
   @keyframes cerebro {
       0%   {background-image: url(../../imagens/utilidade.svg);}
       25%  {background-image: url(../../imagens/utilidade1.svg);}
       50%  {background-image: url(../../imagens/utilidade2.svg);}
       75%  {background-image: url(../../imagens/utilidade3.svg);}
       100% {background-image: url(../../imagens/utilidade4.svg);}
     }
   
   
   
   
   
   
   .frases{
       font-size: 1.5rem !important;
       text-align: center;
       font-style: italic;
   }
   
   
   #rapidez{
       background-image: url(../../imagens/rapidez.svg);
       background-size: contain;
       background-repeat: no-repeat;
       /* background-position-x: 750px; */
       background-position-y: 90px; 
       height: 600px;
       width: 120%;
       z-index: 10;
       animation-name: cavalo;
       animation-duration: 2s;
       animation-delay: 0s;
       animation-iteration-count: infinite;
       animation-timing-function: ease-in-out;
       animation-play-state: running;
     
   }
   
   @keyframes cavalo {
       0%   {background-image: url(../../imagens/rapidez.svg);}
       33%   {background-image: url(../../imagens/rapidez1.svg);}
       66%   {background-image: url(../../imagens/rapidez2.svg);}
       100%  {background-image: url(../../imagens/rapidez3.svg);}
     }
   
   
   #diamante{
       background-image: url(../../imagens/diamante1.svg);
       background-size: contain;
       background-repeat: no-repeat;
       /* background-position-x: 750px; */
       background-position-y: -20px; 
       height: 600px;
       width: 220%;
       z-index: 10;
       animation-name: brilho;
       animation-duration: 4s;
       animation-delay: 0s;
       animation-iteration-count: infinite;
       animation-timing-function: ease-in-out;
       animation-play-state: running;
     
   }
   
   
   @keyframes brilho {
       0%   {background-image: url(../../imagens/diamante1.svg);}
       33%   {background-image: url(../../imagens/diamante2.svg);}
       66%   {background-image: url(../../imagens/diamante3.svg);}
       99%  {background-image: url(../../imagens/diamante4.svg);}
     }
   
   #rodape{
       background-color: #522b78;
   }
   
   #assinatura{
       background-color: #522b89;
   }
   
   
   
   
   
   /* Slideshow container */
   .slideshow-container {
       position: relative;
       background: #f7e8fff1;
     }
     
     /* Slides */
     .mySlides {
       display: none;
       padding: 80px;
       text-align: center;
     }
     
     /* Next & previous buttons */
     .prev, .next {
       cursor: pointer;
       position: absolute;
       top: 50%;
       width: auto;
       margin-top: -30px;
       padding: 16px;
       color: #888;
       font-weight: bold;
       font-size: 20px;
       border-radius: 0 3px 3px 0;
       user-select: none;
     }
     
     /* Position the "next button" to the right */
     .next {
       position: absolute;
       right: 0;
       border-radius: 3px 0 0 3px;
     }
     
     /* On hover, add a black background color with a little bit see-through */
     .prev:hover, .next:hover {
       background-color: rgba(0,0,0,0.8);
       color: white;
     }
     
     /* The dot/bullet/indicator container */
     .dot-container {
         text-align: center;
         padding: 20px;
         background: rgb(241, 131, 27);
     }
     
     /* The dots/bullets/indicators */
     .dot {
       cursor: pointer;
       height: 15px;
       width: 15px;
       margin: 0 2px;
       background-color: #522b78;
       border-radius: 50%;
       display: inline-block;
       transition: background-color 0.6s ease;
     }
     
     /* Add a background color to the active dot/circle */
     .active, .dot:hover {
       background-color: #EE8B3D;
       color: white;
   
     }
     
   
     /* Add an italic font style to all quotes */
     q {font-style: italic;}
     
     /* Add a blue color to the author */
     .author {color: #EE8B3D;}
   
   
   
     .switch {
       position: relative;
       display: inline-block;
       width: 60px;
       height: 34px;
     }
     
     .switch input { 
       opacity: 0;
       width: 0;
       height: 0;
     }
     
     .slider {
       position: absolute;
       cursor: pointer;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background-color: #ccc;
       -webkit-transition: .4s;
       transition: .4s;
     }
     
     .slider:before {
       position: absolute;
       content: "";
       height: 26px;
       width: 26px;
       left: 4px;
       bottom: 4px;
       background-color: #EE8B3D;
       -webkit-transition: .4s;
       transition: .4s;
     }
     
     input:checked + .slider {
       background-color: #522b78;
     }
     
     input:focus + .slider {
       box-shadow: 0 0 1px #522b78;
     }
     
     input:checked + .slider:before {
       -webkit-transform: translateX(26px);
       -ms-transform: translateX(26px);
       transform: translateX(26px);
     }
     
     /* Rounded sliders */
     .slider.round {
       border-radius: 34px;
     }
     
     .slider.round:before {
       border-radius: 50%;
     }
   
   
     #adolescentes{
     background-image: url(../../imagens/fotos/planilhando2.png);
     background-size: contain;
     width: 100%;
   height: 100%;
   background-repeat: no-repeat;
   background-position-y: 100px;
     }
   
     #devdesign{
       background-image: url(../../imagens/fotos/usabilidade.jpg);
       background-size: contain;
       width: 100%;
     height: 100%;
     background-repeat: no-repeat;
     background-position-y: 100px;
       }
   
   
   #aprendedigital{
     background-image: url(../../imagens/icones/aprendedigital.svg);
     background-size: contain;
     
     background-repeat: no-repeat;
     
   }
   
   #logicaprograma{
     background-image: url(../../imagens/icones/logica.svg);
     background-size: contain;
     background-repeat: no-repeat;
     
   }
   
   #ferramentasportifolio{
     background-image: url(../../imagens/icones/apresentacao.svg);
     background-size: contain;
     background-repeat: no-repeat;
     
   }
   
   #digitacao{
     background-image: url(../../imagens/icones/digitacao.svg);
     background-size: contain;
     background-repeat: no-repeat;
     
   }
   
   #tempo{
     background-image: url(../../imagens/icones/tempo.svg);
     background-size: contain;
     background-repeat: no-repeat;
     
   }
   
   #resumo{
     background-image: url(../../imagens/icones/resumo.svg);
     background-size: contain;
     background-repeat: no-repeat;
     
   }
   
   
   #pv{
     background-image: url(../../imagens/icones/propostadevalor.svg);
     background-size: contain;
     background-repeat: no-repeat;
     
   }
   
   #canvas{
     background-image: url(../../imagens/icones/canvas.svg);
     background-size: contain;
     background-repeat: no-repeat;
     
   }
   
   #projsoftware{
     background-image: url(../../imagens/icones/projsoftware.svg);
     background-size: contain;
     background-repeat: no-repeat;
     
   }
   
   #testeusabilidade{
     background-image: url(../../imagens/icones/testeusabilidade.svg);
     background-size: contain;
     background-repeat: no-repeat;
     
   }
   
   #etnografia{
     background-image: url(../../imagens/icones/etnografia.svg);
     background-size: contain;
     background-repeat: no-repeat;
     
   }
   
   
   #di{
     background-image: url(../../imagens/icones/di.svg);
     background-size: contain;
     background-repeat: no-repeat;
     
   }
   
   .fotos{
     width: 100%;
     margin-bottom: 50px;
   }
   
   
   #empresas{
     background-image: url(../../imagens/icones/empresas.svg);
     background-size: contain 110%;
     width: 100%;
   height: 100%;
   background-repeat: no-repeat;
   background-position-y: 10px;
   }
   
   #di{
     background-image: url(../../imagens/icones/di.svg);
     background-size: contain;
     background-repeat: no-repeat;
     
   }
   
   #trilhas{
     background-image: url(../../imagens/icones/metativa.svg);
     background-size: contain;
     background-repeat: no-repeat;
     
   }
   
   #horarios{
     background-image: url(../../imagens/icones/tempo.svg);
     background-size: contain;
     background-repeat: no-repeat;
     
   }
   
   #appnuvem{
     background-image: url(../../imagens/icones/nuvememp.svg);
     background-size: contain;
     background-repeat: no-repeat;
     
   }
   
   #exemplosreais{
     background-image: url(../../imagens/icones/exemploreal.svg);
     background-size: contain;
     background-repeat: no-repeat;
     
   }
   
   #provas{
     background-image: url(../../imagens/icones/testeusabilidade.svg);
     background-size: contain;
     background-repeat: no-repeat;
     
   }
   
   
   #pc{
     background-image: url(../../imagens/icones/exemploreal.svg);
     background-size: contain;
     background-repeat: no-repeat;
     
   }
   
   
   #games{
     background-image: url(../../imagens/icones/games.svg);
     background-size: contain;
     background-repeat: no-repeat;
     
   }
   
   
   #audiovisu{
     background-image: url(../../imagens/icones/audiovisu.svg);
     background-size: contain;
     background-repeat: no-repeat;
     
   }
   
   #metativa{
     background-image: url(../../imagens/icones/testeusabilidade.svg);
     background-size: contain;
     background-repeat: no-repeat;
     
   }
   
   
   #professores{
     background-image: url(../../imagens/icones/designinstrucional.svg);
     background-size: contain 110%;
     width: 100%;
   height: 100%;
   background-repeat: no-repeat;
   background-position-y: 10px;
   }
   
   


/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 572px) {

  #design{


    padding-left: 5px;
    margin-bottom: 40px;
   
  }

  #tecnologia{
    
    margin-bottom: 40px;
  
   
  }
  
  #chamadadetalhes {
    padding-top: 40px;
  }
 

  #chamada{
    margin: 10px;
    margin-top: 20px;
    text-align: center;
  }

  #chamada div p{
    font-size: 1rem;
  } 
  
  #chamada h1 span{
    font-family: 'Franklin Gothic Medium';
    color: white;
    font-weight: 900 !important;
    font-size: 2.2rem;
  }

  #chamada h1 .experimentacao{
    letter-spacing: 1px;
  }

  #chamada h1 #digital{
    font-size: 4rem;
    line-height: 4rem;
    letter-spacing: 14px;
  }

  #chamada #botaocontato{
    font-family: 'JetBrains Mono';
    
    font-size: 18px;
    background-color: #522B78;
    height: auto;
    border-radius: 10px;
    
    padding-left: 18px;
    margin-bottom: 100px;
    width: 100%;
    margin-top: 50px;
    text-align: center;
  }

  .titulos{
    font-family: 'Bevan', cursive;
    font-size: 4rem !important;
    color: #522B78 !important;
    text-align: center !important;
    font-size: 1.5rem !important;
  }


  .titulosesq{
      font-family: 'Bevan', cursive;
      font-size: 4rem !important;
      color: #522B78 !important;
      text-align: center !important;
      font-size: 1.5rem !important;
    
  }

  .logo{
   
    background-image: url(../../imagens/logo.svg);
    background-position-y: 50%;
    width: 150px;
    height: 104px;
    background-repeat: no-repeat;
    background-size: contain;
    }

    #utilidade{
      background-image: url(../../imagens/utilidade.svg);
      background-size: contain;
      background-repeat: no-repeat;
      background-position-y: center;
      background-position-x: 90px;
      /* background-position-x: 750px; */
      /* background-position-y: 190px; */
      height: 300px;
      width: 100%;
      z-index: -10;
      animation-name: cerebro;
      animation-duration: 2s;
      animation-delay: 0s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
      animation-play-state: running;
  }

  #rapidez{
    background-image: url(../../imagens/rapidez.svg);
    background-size: contain;
    background-repeat: no-repeat;
    /* background-position-x: 750px; */
    background-position-y: 0; 
    height: 300px;
    width: 100%;
    z-index: 10;
    animation-name: cavalo;
    animation-duration: 2s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-play-state: running;
  
}

#diamante{
  background-image: url(../../imagens/diamante1.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px; 
  height: 400px;
  width: 100%;
  z-index: 10;
  animation-name: brilho;
  animation-duration: 3s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-play-state: running;

}

@keyframes brilho {
  0%   {background-image: url(../../imagens/diamante1mob.svg);}
  33%   {background-image: url(../../imagens/diamante2mob.svg);}
  66%   {background-image: url(../../imagens/diamante3mob.svg);}
  99%  {background-image: url(../../imagens/diamante4mob.svg);}
}

}