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

@font-face{
  font-family: inder;
  src: url(fontes/Inder-Regular.ttf);
}

@font-face{
  font-family: inter;
  src: url(fontes/Inter-Regular.ttf);
}

body{                                      overflow-x: hidden;} 

img{                                        width: 100%; }


header a {
                                            color: #9D6BFF;
                                            text-decoration: none;
                                            transition: 0.3s;}
  
header a:hover {                            opacity: 0.7;}
  
.logo {
                                            font-family: inder;
                                            font-style: normal;
                                            font-weight: 400;
                                            font-size: 31px;
                                            line-height: 46px;
                                            padding-left: 35px;}

.logo:hover{
                                            transform: scale(1.1);
                                            transition: all 1s; }
  
nav {
                                            display: flex;
                                            justify-content: space-between;
                                            align-items: center;
                                            font-family: inder;
                                            background: #fff;
                                            height: 17vh;
                                            font-family: inder;
                                            font-style: normal;
                                            font-size: 20px;
                                            line-height: 25px;}
  
.login{
                                            font-size: 20px;
                                            padding: 1.0vh 4vw 1.0vh 4vw;
                                            background-color: #9D6BFF;
                                            color: white;
                                            border-radius: 5px;
                                            font-family: 'Inder';
                                            cursor: pointer;
                                            margin-right: 35px;}

.login:hover{
                                            transform: scale(1.1);
                                            transition: all 1s;}
  
.nav-list {
                                            list-style: none;
                                            display: flex;}
  
.nav-list li {                              margin-left: 32px;}
  
.mobile-menu {
                                            display: none;
                                            cursor: pointer;}
  
.mobile-menu div {
                                            width: 32px;
                                            height: 2px;
                                            background: #D9D9D9;
                                            margin: 8px;
                                            transition: 0.3s;}

.nav-list active{                           position: absolute;}


                        /*----------------------ASIDE FOTOS------------------------*/

.fotos{                      
                                            margin-top: 5%;
                                            width: 100%}
                   
.fotos img{
                                            width: 50vw;
                                            height: 500px;
                                            margin-top: 20px;
                                            padding-left: 10px;}
                        
.fotos h2 {
                                            position: absolute;
                                            left: 55%;
                                            top:38%;
                                            font-family: 'Inder';
                                            font-style: normal;
                                            font-weight: 400;
                                            font-size: 42px;
                                            line-height: 52px;
                                            color: #9D6BFF;}
                        
.fotos p {
                                            position: absolute;
                                            left: 55%;
                                            top:400px;
                                            font-family: 'Inder';
                                            font-style: normal;
                                            font-weight: 400;
                                            font-size: 25px;
                                            line-height: 40px;
                                            color: #000000;
                                            width: 40%;
                                            margin-left: auto;
                                            margin-right: auto;}

                        /*----------------------SECTION TEXTO2------------------------*/

.texto2{
                                            text-align: center;
                                            margin-top: 100px;}

.texto2 h1{
                                            font-weight: normal;
                                            color: #9D6BFF;
                                            font-size: 56px;
                                            font-family: 'Inder';
                                            line-height: 40px;}
.texto2 p{
                                            text-align: left;
                                            margin-left: 5%;
                                            width: 90%;
                                            font-family: 'Inder';
                                            font-size: 25px;
                                            line-height: 45px;
                                            font-style: normal;
                                            margin-top: 50px;}

.texto2 img{
                                            margin-top: 100px;
                                            width: 90%;
                                            align-items: center;
                                            justify-content: center;}


/*-------------------------INICIO DO FOOOTER---------------------------*/
  
.sec_footer{              
                                            background: #9D6BFF;
                                            height: auto;}

.palavras-footer{
                                            width: 68%;
                                            display: flex;
                                            flex-direction: row;
                                            float: left;
                                            justify-content: space-around;}
      
.palavras-footer h3{    
                                            font-size: 25px;
                                            font-family: 'Inder';
                                            color: white;
                                            font-weight: bolder;
                                            margin-top: 60px;}
      
.palavras-footer p{
                                            width: 100%;
                                            text-align: left;
                                            color: white;
                                            font-size: 19px;
                                            margin-left: 13%;
                                            padding: 7px;
                                            font-family: 'Inder';}
      
.plataforma{                                margin-left: 5%;}
      
.plataforma h3{                             margin-bottom:px;}
      
.plataforma a{
                                            width: 100%;
                                            display: block;
                                            text-decoration: none;
                                            color: white;
                                            font-size: 19px;
                                            margin-left: -3%;
                                            padding: 7px;
                                            font-family: 'Inder';}
      
.plataforma a:hover{
                                            color: #0b0020;
                                            cursor: pointer;}
      
.social{                                    margin-left: 5%;}
      
.social h3{                                 margin-bottom: 0px;}
      
.social a{
                                            width: 100%;
                                            display: block;
                                            text-align: left;
                                            color: white;
                                            font-size: 19px;
                                            margin-left: 26%;
                                            padding: 7px;
                                            font-family: 'Inder';
                                            text-decoration: none;
                                            padding-top: 20px;}
      
.social a:hover{
                                            color:#0b0020;
                                            cursor: pointer;}
      
.social img{
                                            float: left;
                                            margin-top: 20px;
                                            margin-right: 5%;
                                            width: 25px;
                                            height: 25px;}
      
.contato{                                   width: 30%;}
      
.contato h3{
                                            margin-bottom: 20px;
                                            margin-left: 30%;}
      
.contato a{                 
                                            padding-left: 0%;
                                            text-decoration: none;
                                            color: #fff;}
      
.contato img{
                                            float: left;
                                            margin-top: 5px;
                                            margin-left: 30%;
                                            margin-right: 2%;
                                            width: 25px;
                                            height: 25px;}

.contato .img18 img{
                                            margin-left: -35px;
                                            margin-top:50px;}    

.contato .img18 a{
                                            text-decoration: none;
                                            color: #fff;
                                            position: absolute;
                                            margin-left:0px;
                                            padding-top:50px;}

.ptd_nav{
                                            width: 65%;
                                            padding-top: 5%;
                                            display: flex;
                                            flex-direction: row;
                                            justify-content: space-evenly;
                                            color: white;
                                            font-size: 20px;
                                            font-family: 'Inder';
                                            cursor: pointer;}

.ptd_nav a{
  text-decoration: none;
  color: #fff;
}

.ptd_nav a:hover{
  color:#0b0020;
  cursor: pointer;
}
      
.ptd a{
                                            margin-top: -0px;
                                            font-weight: bold;
                                            cursor: pointer;
                                            text-decoration: none;}
      
.ptd a:hover{                               color: #0b0020;} 

.ptd .img13 img{
                                            padding-top: 80px;
                                            width: 500px;
                                            margin-left: -70px;}
                 
#acessibilidade{
                                            position: fixed;
                                            width: 3%;
                                            height: 55px;
                                            background-color: #FFF;
                                            right: 0%;
                                            top: 250px;
                                            border-radius: 100% 0 0 100%;
                                            border: 1px solid #616161;
                                            cursor: pointer;
                                            z-index: 4;
                                            display: block;}
                        
#acessibilidade img{
                                            margin-left: 5px;
                                            margin-top: 10px;
                                            width: 80%;}
                        
#acessibilidade-hid{
                                            position: fixed;
                                            width: 3%;
                                            height: 250px;
                                            background-color: #fff;
                                            right: 0%;
                                            top: 230px;
                                            border-radius: 40px 0px 0 40px;
                                            border: 1px solid #616161;
                                            visibility: hidden;
                                            z-index: 5;
                                            display: block;}
                        
#acessibilidade-hid img{
                                            display: block;
                                            margin-left: 10%;}
                        
.acess1{
                                            width: 70%;
                                            padding-top: 20px;
                                            padding-left: 2px;
                                            cursor: pointer;
                                            z-index: 1;}
                        
.acess1-fake{
                                            width: 70%;
                                            margin-top: -24px;
                                            padding-left: 2px;
                                            cursor: pointer;
                                            z-index: 9999;
                                            visibility: hidden;}
                        
.acess2{
                                            width: 80%;
                                            padding-left:4px;
                                            padding-top: 10px;}
                        
.acess3{
                                            width: 65%;
                                            padding-left: 6px;
                                            padding-top: 10px;}
                        
.acess4{
                                            width:70%;
                                            padding-top: 10px;
                                            padding-left: 2px;}
                        
.acess5{
                                            width: 70%;
                                            padding-top: 15px;
                                            padding-left: 2px;}
                        
.acess6{
                                            width: 80%;
                                            padding-top: 20px;
                                            padding-left: 2px;
                                            cursor: pointer;}    
                        
/* ---------------------------------------FIM DA MONTAGEM--------------------------------------*/



/* ---------------------------------------INICIO DO RESPONSIVO----------------------------------------*/


/* ---------------------------------------NOTEBOOK----------------------------------------*/



@media only screen and (min-width: 1021px) and (max-width: 1440px) {  
  
          #acessibilidade{    top: 35%;}

}


/* ----------------------------------------NOTEBOOK L----------------------------------------*/

@media only screen and (min-width: 749px) and (max-width: 1024px) {  

         .logo{                   width: 80%;}

        #acessibilidade{          top: 35%;}

        .Aside-texto img{
                                  margin-left: -10%;
                                  width: 70%;
                                  justify-content: center;
                                  display: flex;
                                  align-items: center;}

        .Section-texto a{         margin-left: 60%;}


        #acessibilidade{
                                  height: 40px;
                                  top: 255px;
                                  width: 40px;}

        #acessibilidade img{
                                  margin-left: 5px;
                                  margin-top: 5px;
                                  width: 80%;}

        #acessibilidade-hid{
                                  width: 5%;
                                  height: 190px;
                                  top: 255px;
                                  border-radius: 60px 0px 0 40px;}

        #acessibilidade-hid img{
                                  margin-left: 20%;
                                  width: 23px;}

        .fotos p{
                                  font-size: 28px;
                                  line-height: 35px;}

        .texto2{                  margin-top: 70px;}

        .texto2 h1{               font-size: 56px;}

        .texto2 p{
                                  line-height: 45px;
                                  font-size: 30px;}

        .texto2 img{
                                  margin-top: 40px;
                                  width: 90vw;}


        }


/* ----------------------------------------TABLET----------------------------------------*/

@media only screen and (min-width: 562px) and (max-width: 820px) {
          
          #acessibilidade{
                                    height: 40px;
                                    top: 200px;
                                    width: 40px;}
  
          #acessibilidade img{
                                    margin-left: 5px;
                                    margin-top: 5px;
                                    width: 80%;}
          
          #acessibilidade-hid{
                                    width: 5%;
                                    height: 190px;
                                    top: 200px;
                                    border-radius: 60px 0px 0 40px;}
          
          #acessibilidade-hid img{
                                    margin-left: 20%;
                                    width: 23px;}

          .fotos img{
                                    margin-top: 150px;
                                    width: 50vw;
                                    height: 360px;}

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

          .fotos p{                 font-size: 1.3rem;}

          .texto2{                  margin-top: 70px;}
  
          .texto2 h1{               font-size: 3rem;}

          .texto2 p{                font-size: 1.5em;}

          .texto2 img{
                                    margin-top: 10%;
                                    width: 90vw;}
          
          .contato{                 width: 100%;}


}

/*---------------------------===============-MOBILE L========================--------------------------*/



@media only screen and (min-width:425px){ 
  @media only screen and (max-width: 659px){
  
          .fotos img{
                                    margin-top: 100px;
                                    width: 85vw;
                                    align-items: center;
                                    margin-left: 8%;
                                    height: 360px;}
        
          .fotos h2{
                                    font-size: 2rem;
                                    margin-top: 70%;
                                    margin-left: -35%;}
  
          .fotos p{
                                    font-size: 1.3rem;
                                    margin-top: 70%;
                                    margin-left: -45%;
                                    width: 80%;
                                    font-family: 'Inder';}
        
          .texto2{                  margin-top: 100%;}
          
          .texto2 h1{               font-size: 2rem;}
        
          .texto2 p{
                                    font-size: 1.3rem;
                                    font-family: 'Inder';}
  
          .texto2 img{
                                    margin-top: 10%;
                                    width: 90vw;}

          .img17 img{               margin-top: 20px;}

          .img17 a{
                                    position: absolute;
                                    margin-left: 0;
                                    margin-top: 23px;}

          #acessibilidade{
                                    height: 40px;
                                    top: 200px;
                                    width: 40px;}
          
          #acessibilidade img{
                                    margin-left: 5px;
                                    margin-top: 5px;
                                    width: 80%;}
          
          #acessibilidade-hid{
                                    width: 10%;
                                    height: 190px;
                                    top: 200px;
                                    border-radius: 60px 0px 0 40px;}
    
          #acessibilidade-hid img{
                                    margin-left: 20%;
                                    width: 23px;}

          .plataforma{              display: none;}

          .ptd{                     display: none; }
        
          .nome_centro{             display: none;}
        
          #sec_footer{
                                    margin-top: 90px;
                                    height: 440px;}
          .social{
                                    margin-top: -20px;
                                    height: 280px;
                                    text-decoration: none;}
          .social h3{
                                    font-size: 25px;
                                    margin-left: 1%;}
    
          .social p{
                                    font-size: 17px;
                                    text-decoration: none;}

          .social img{              float: left;}

          .img14 a{                 float: left;}

          .img14 img{               margin-top: -3px;}

          .img15 a{
                                    margin-top: -35px;
                                    margin-left: 15%;
                                    padding-top: 15%;
                                    float: left;}

          .img15 img{
                                    margin-top: 5px;
                                    margin-left: -80%;}

          .img16 a{
                                    margin-top: 55%;
                                    padding-top: 26%;
                                    margin-left: 15%;
                                    float: left;}

          .img16 img{
                                    margin-top: 15px;
                                    margin-left: 80%;}
          .contato{
                                    width: 100%;
                                    margin-left: -160%;
                                    font-family: 'Inder';}

          .contato h3{              font-size: 25px;}

          .contato p{               font-size: 18px;} 

          .img17 p{
                                    float: left;
                                    margin-left: 37%;
                                    margin-top: 0px;
                                    padding-top: -200px;
          }
          .img18 a{
                                    float: left;
                                    margin-left: 37%;
                                    font-size: 18px;
          }

          .plataforma{              display: none;}

          .ptd_nav a{               display: none;}

  }
}

/* ----------------------------------------MOBILE M----------------------------------------*/

@media only screen and (min-width:375px){ 
  @media only screen and (max-width: 562px){


          .fotos img{
                                    margin-top: 100px;
                                    width: 70vw;
                                    align-items: center;
                                    margin-left: 25%;
                                    height: 360px;}
        
          .fotos h2{
                                    font-size: 2rem;
                                    margin-top: 70%;
                                    margin-left: -35%;}
  
          .fotos p{
                                    font-size: 1rem;
                                    margin-top: 60%;
                                    margin-left: 45%;
                                    width: 80%;
                                    font-family: 'Inder';}
        
          .texto2{                  margin-top: 130%;}
          
          .texto2 h1{               font-size: 2rem;}
        
          .texto2 p{
                                    font-size: 0.8rem;
                                    font-family: 'Inder';}
  
          .texto2 img{
                                    margin-top: 10%;
                                    width: 90vw;}

          .img17 img{               margin-top: 20px;}

          .img17 a{
                                    position: absolute;
                                    margin-left: 0;
                                    margin-top: 23px;}

          #acessibilidade{
                                    height: 40px;
                                    top: 260px;
                                    width: 40px;}
          
          #acessibilidade img{
                                    margin-left: 5px;
                                    margin-top: 5px;
                                    width: 80%;}
        
        #acessibilidade-hid{
                                    width: 10%;
                                    height: 190px;
                                    top: 230px;
                                    border-radius: 60px 0px 0 40px;}
        
        #acessibilidade-hid img{
                                    margin-left: 10%;
                                    width: 23px;}

        .plataforma{                display: none;}

        .ptd{                       display: none;}
      
        .nome_centro{               display: none;}
      
        #sec_footer{
                                    margin-top: 90px;
                                    height: 440px;}
        .social{
                                    width: 100%;
                                    margin-left: -1%;
                                    margin-top: -20px;
                                    height: 280px;
                                    text-decoration: none;}
        .social h3{
                                    font-size: 25px;
                                    margin-left: 1.5%;}
        
        .social p{                  font-size: 17px;}

        .social img{                float: left;}

        .img14 a{
                                    margin-top: -35px;
                                    margin-left: 15%;
                                    float: left;}

        .img14 img{                 margin-top: -3px;}

        .img15 a{
                                    margin-top: -35px;
                                    margin-left: 15%;
                                    padding-top: 15%;
                                    float: left;}

        .img15 img{
                                    margin-top: 5px;
                                    margin-left: -80%;}

        .img16 a{
                                    margin-top: -25%;
                                    padding-top: 26%;
                                    margin-left: 15%;
                                    float: left;}

        .img16 img{
                                    margin-top: 15px;
                                    margin-left: -80%;}

        .contato{
                                    width: 100%;
                                    margin-top: 230px;
                                    margin-left: -160%;
                                    font-family: 'Inder';}

        .contato h3{                font-size: 25px;}

        .contato p{                 font-size: 18px;} 

        .img17 p{
                                    float: left;
                                    margin-left: 37%;
                                    margin-top: 0px;
                                    padding-top: -200px;}

        .img18 a{
                                    float: left;
                                    margin-left: 37%;
                                    font-size: 18px; }

        .plataforma{                display: none;}

        .ptd_nav a{                 display: none;}

  }
}

/*---------------------------------------MOBILE S------------------------*/

  @media only screen and (min-width:320px){ 
    @media only screen and (max-width: 562px){
  
  
        .fotos img{
                                  margin-top: 10px;
                                  width: 70vw;
                                  align-items: center;
                                  margin-left: 15%;
                                  height: 360px;}
      
        .fotos h2{
                                  font-size: 1.5rem;
                                  margin-top: 80%;
                                  margin-left: -35%;}
      
        .fotos p{
                                  font-size: 1rem;
                                  margin-top: 70%;
                                  margin-left: -45%;
                                  width: 90%;
                                  font-family: 'Inder';}
      
        .texto2{                  margin-top: 120%;}
        
        .texto2 h1{
                                  font-size: 2rem;
                                  margin-left: 5%;}
      
        .texto2 p{
                                  font-size: 1rem;
                                  font-family: 'Inder';
                                  margin-left: 8%;}
      
        .texto2 img{
                                  margin-top: 10%;
                                  width: 90vw;}
    
        .img17 img{               margin-top: 20px;}
    
        .img17 a{
                                  position: absolute;
                                  margin-left: 0;
                                  margin-top: 23px;}
    
        #acessibilidade{
                                  height: 40px;
                                  top: 200px;
                                  width: 40px;}
        
        #acessibilidade img{
                                  margin-left: 5px;
                                  margin-top: 5px;
                                  width: 80%;}
        
        #acessibilidade-hid{
                                  width: 10%;
                                  height: 190px;
                                  top: 200px;
                                  border-radius: 60px 0px 0 40px;}
        
        #acessibilidade-hid img{
                                  margin-left: 10%;
                                  width: 23px;}
    
        .plataforma{              display: none;}

        .ptd{                     display: none;}
      
        .nome_centro{             display: none;}
      
        #sec_footer{
                                  margin-top: 90px;
                                  height: 440px;}
        .social{
                                  width: 100%;
                                  margin-left: -1%;
                                  margin-top: -20px;
                                  height: 280px;
                                  text-decoration: none;}

        .social h3{
                                  font-size: 25px;
                                  margin-left: 1.5%; }
        
        .social p{                font-size: 17px;}

        .social img{              float: left;}

        .img14 a{
                                  margin-top: -35px;
                                  margin-left: 15%;
                                  float: left;}
    
        .img14 img{               margin-top: 30px;}

        .img15 a{
                                  margin-top: -50px;
                                  margin-left: 15%;
                                  padding-top: 15%;
                                  float: left;}
    
        .img15 img{
                                  margin-top: 5px;
                                  margin-left: 0%;}

        .img16 a{
                                  margin-top: -35%;
                                  padding-top: 26%;
                                  margin-left: 15%;
                                  float: left;}
    
        .img16 img{
                                  margin-top: 15px;
                                  margin-left: 0%;}

        .contato{
                                  width: 100%;
                                  margin-top: 230px;
                                  margin-left: -160%;
                                  font-family: 'Inder';}

        .contato h3{              font-size: 25px; }

        .contato p{               font-size: 18px;} 

        .img17 p{
                                  float: left;
                                  margin-left: 37%;
                                  margin-top: 0px;
                                  padding-top: -200px;}

        .img18 a{
                                  float: left;
                                  margin-left: 37%;
                                  font-size: 18px;}
    
        .plataforma{              display: none;}

        .ptd_nav a{               display: none;}
  


    }
  }

/*----------------------------------------RESPONSIVO NAV MOBILE---------------------------*/


@media (max-width: 999px) {


        body {                    overflow-x: hidden;}
    
        nav{                      height: 12vh;}
    
        .nav-list {
                                  position: absolute;
                                  top: 11.9vh;
                                  right: 0;
                                  width: 50vw;
                                  height: 42vh;
                                  background: #F6F5F5;
                                  z-index: 2;
                                  flex-direction: column;
                                  align-items: center;
                                  justify-content: space-around;
                                  transform: translateX(100%);
                                  transition: transform 0.3s ease-in;}
      
      .login{                     margin-right: 0;}
  
      .nav-list li a:hover{       background-color: darkgray;}
      
      .nav-list li {
                                  margin-left: 0;
                                  opacity: 0;}

      .mobile-menu {              display: block;}
    
      .nav-list.active {
                                  transform: translateX(0);
                                  position: absolute;}

 

@keyframes navLinkFade {
      from {
                                  opacity: 0;
                                  transform: translateX(50px);}

      to {
                                  opacity: 1;
                                  transform: translateX(0);}

}
    
    .mobile-menu.active .line1 {
                                  transform: rotate(-45deg) translate(-8px, 8px);}
    
    .mobile-menu.active .line2 {  opacity: 0;}
    
    .mobile-menu.active .line3 {
                                  transform: rotate(45deg) translate(-5px, -7px);}    
}