*{
    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{
                            margin-top: -43.5%;}
                            
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;}
                              


                        /*-------------------------INICIO DO ASIDE---------------------------*/


aside{
                            position: absolute;
                            left: 70px;
                            top: 200px;
                            font-family: 'Inder', sans-serif;
                            font-style: normal;
                            font-weight: 400;
                            font-size: 22px;
                            line-height: 38px;
                            color: #6146D9;}
                        
                        
aside h3{                   margin-left: 30px;}

                            
aside p{
                            font-family: 'Inder', sans-serif;
                            height: 17px;
                            margin-left: 30px;
                            margin-top: 10px;
                            font-size: 20px;
                            line-height: 25px;
                            color: #323232;}
                            
aside img{
                            position: absolute;
                            width: 500px;
                            height: auto;
                            left:690px;
                            top: -30px;}
                     
aside button{
                            margin-top: 50px;
                            text-align: center;
                            border-radius: 10px;
                            font-size: 20px;
                            width: 188px;
                            height: 45px;
                            cursor: pointer;
                            margin-left: 30px;
                            font-family: 'Inder', sans-serif;}
                      
.botao1{
                            color:#fff;
                            background-color: #6146D9;}
                        
.botao1:hover{
                            transform: scale(1.1);
                            opacity: 90%;
                            transition:  1s;} 
                        
.botao2{
                            color:#000;
                            background: linear-gradient(118.08deg, #EEEEEE 43.87%, #1F3A71 228.46%);}
                        
.botao2:hover{
                            transform: scale(1.1);
                            opacity: 90%;
                            transition: 1s;} 
                        

                          /*-------------------------INICIO DO SECTION1---------------------------*/

.Section img{
                            width: 100%;
                            margin-top: 50%;
                            justify-content: center;
                            align-items: center;}     
                        
                          /*-------------------------INICIO DO SECTION2---------------------------*/

.Section2 img{              width: 100%;}
    
.Aside-img img{
                            position: absolute;
                            width: 96%;
                            height: 500px;
                            margin-top: -700px;}

                         /*-------------------------INICIO DO SECTION3---------------------------*/

.Section3{
                            align-items: center;
                            justify-content: center;}

.Section3 img{
                            width: 90%;
                            margin-top: 50px;
                            margin-left: 70px;}

/*-------------------------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;}    
                          

/* ----------------------------========================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;}

      aside img{
                            width: 43vw;
                            margin-left: -70%;
                            margin-top: -80px;}

      aside h3{             font-size: 20px;}

      aside p{              font-size:18px;}

      aside button{
                            font-size: 15px;
                            width: 140px;}

      .Aside-img{           margin-top: 100px;}

      .Aside-img img{       height: 550px;}

      .Section3{
                            margin-top: -60px;
                            margin-left: -6%;}

}


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


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


      .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: 5%;
                            height: 190px;
                            top: 200px;
                            border-radius: 60px 0px 0 40px;}
      
      #acessibilidade-hid img{
                            margin-left: 20%;
                            width: 23px;}

      .fotodefundo{         height: 500px;}
      
      aside img{
                            width: 40vw;
                            margin-left: -90%;
                            margin-top: -30px;}

      aside h3{             font-size: 20px;}

      aside p{              font-size:18px;}

      aside button{
                            font-size: 15px;
                            width: 140px;}
      
      .Aside-img{           margin-top: 250px;}

      .Aside-img img{       height: 400px;}

      .Section3{
                            margin-top: -200px;
                            margin-left: -6%;}

      header{               margin-top: -65%;}

}

/*======================================================================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{
                            width: 100%;
                            margin-left: -1%;
                            margin-top: -20px;
                            height: 280px;
                            text-decoration: none;}
      .social h3{
                            font-size: 25px;
                            margin-left: 1%;}
      
      .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: 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;}


      .fotodefundo{         height: 400px;}
      
      aside img{            display: none;}
    
      aside h3{
                            font-size: 15px;
                            margin-left: -20%;}
    
      aside p{
                            font-size:15px;
                            margin-left: -20%;}
    
      aside button{         display: none;}
      
      .Aside-img{           margin-top: 100%;}
    
      .Aside-img img{       height: 200px;}
    
      .Section3{
                            margin-top: -100%;
                            margin-left: -10%;
                            width: 105vw;}
    
  }
}

/* ----------------------------==============================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: 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;}

        .fotodefundo{       height: 400px;}

        aside img{          display: none;}

        aside h3{
                            font-size: 15px;
                            margin-left: -20%;}

        aside p{
                            font-size:15px;
                            margin-left: -20%;}

        aside button{       display: none;}

        .Aside-img img{
                            height: 200px;
                            margin-top: -212%;}

        .Section img{   
                            margin-top: -30px;
                            padding-top: -180%;}

        .Section3{
                            margin-top: -160%;
                            margin-left: -10%;  
                            width: 105vw;}

        header{             margin-top: -125%;}

  }
}

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

@media only screen and (min-width:320px){ 
    @media only screen and (max-width: 562px){
  
  
      .fotos img{
                                margin-top: 100px;
                                width: 70vw;
                                align-items: center;
                                margin-left: 15%;
                                height: 360px;}
    
      .fotos h2{
                                font-size: 1.5rem;
                                margin-top: 80%;
                                margin-left: -25%;}
    
      .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;}
      
      .fotodefundo{             height: 400px;}
          
      aside img{                display: none;}
        
      aside h3{
                                font-size: 15px;
                                margin-left: -20%;}
        
      aside p{
                                font-size:15px;
                                margin-left: -20%;}
        
      aside button{             display: none;}
          
      .Aside-img{               margin-top: 152%;}
        
      .Aside-img img{           height: 200px;}

      .Section img{   
                                margin-top: 50%;
                                padding-top: 180px;}

      .Section3{
                                margin-top: -160%;
                                margin-left: -20%;
                                width: 105vw;}

      header{                   margin-top: -395px;}

  
  }
}

/*----------------------------------------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);}    
}