*{
    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-texto h2{
                                position: absolute;
                                top: 200px;
                                left: 47%;
                                font-weight: normal;
                                font-family: inder;
                                font-size: 3rem;
                                color: blueviolet;
                                font-style: normal;
                                font-weight: 400;
                                color: #6146D9; }
                            
.Aside-texto img{
                                position: absolute;
                                top: 200px;
                                left: 30%;
                                align-items: center;
                                justify-content: center;
                                width: 50%;
                                height: 350px;}


.Section-texto{                 margin-top: 600px;}
                                
.Section-texto a{
                                text-decoration: none;
                                align-items: center;
                                justify-content:flex-end;
                                margin-left: 70%;
                                text-align: center;
                                font-family: inder;
                                font-style: normal;
                                font-weight: 400;
                                font-size: 1.2rem;
                                color: #000000;}
                                
.Section-texto p{
                                width: 90%;
                                text-align: left;
                                margin-left: 5% ;
                                margin-top: 50px;
                                font-family: inder;
                                font-style: normal;
                                font-weight: 400;
                                font-size: 20px;
                                line-height: 36px;
                                color: #606060;}













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


}
      

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

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

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

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

        .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;}


}


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

@media only screen and (min-width:425px){ 
      @media only screen and (max-width: 659px){
        
        .Aside-texto h2{                  margin-top: -10%;}

        .Aside-texto img{
                                          margin-left: -10%;
                                          margin-top: 10%;
                                          width: 80%;
                                          height: 400px;
                                          justify-content: center;
                                          display: flex;
                                          align-items: center;}

        .Section-texto a{                 
                                          margin-left: 37%;
                                          font-size: 15px;}

        .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.5%;}
        
        .social p{                        font-size: 17px;}

        .social img{                      float: left;}

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

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

        .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 M==============------------------------------------*/

@media only screen and (min-width:375px){ 
    @media only screen and (max-width: 562px){
        
        .Aside-texto h2{
                                        margin-top: -10%;
                                        text-align: center;}

        .Aside-texto img{
                                        margin-left: -10%;
                                        margin-top: 10%;
                                        width: 80%;
                                        height: 300px;
                                        justify-content: center;
                                        display: flex;
                                        align-items: center;}

        .Section-texto a{
                                        margin-left: 20%;
                                        font-size: 15px;}

        .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;}

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

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

        .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: 561px){
        
        .Aside-texto h2{
                                        margin-top: -10%;
                                        text-align: center;
                                        margin-left: -10%;}

        .Aside-texto img{
                                        margin-left: -10%;
                                        margin-top: 10%;
                                        width: 80%;
                                        height: 300px;
                                        justify-content: center;
                                        display: flex;
                                        align-items: center;}

        .Section-texto a{ 
                                        margin-left: 10%;
                                        font-size: 15px;}

        .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;}

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

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

        .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);}    
}