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

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

main, html{
 position: relative;
 background: #E5E5E5;
 height: auto;
 width: 100%;
}

.container{
 background-image: url(Imagens/home-deco.png);
 background-repeat: no-repeat;
 background-position-x: right;
 width: 100%;
 height: auto;
 margin-bottom: 250px;
}
/* header*/

header{
 position:relative;
 width:82%;
 height:57px;
 background-color:#FFFFFF;
 border-radius:50px;
 display:flex;
 flex-direction:row;
 justify-content:space-between;
 font-family:inter;
 font-size:20px;
 margin-left:9%;
 top:39px;
}
.nav-title{
 width: 20%;
 height: 30px;
 margin: auto;
 font-size: 27px;
}
.nav-title a{
 text-decoration: none;
 color: #315a94;
}
.title-purple{
 color: #9D6BFF;
}
.nav-elements{
 width: 60%;
 height: 30px;
 margin: auto;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 align-items: center;
}
.nav-elements a{
 text-decoration: none;
 color: #000000;
}
/*final da header*/
/*área de opçôes*/
.container-options{
 position: relative;
 width: 62%;
 height: 200px;
 float: left;
 left: 30px;
 top: 110px;
 display: flex;
 flex-direction: row;
 justify-content: space-evenly;
}
.container-options img{
 width: 95%;
}
/*área do perfil*/ 
.perfil{
 width: 10%;
 height: 250px;
 position: relative;
 text-align: center;
 display: flex;
 flex-direction: column;
 justify-content: space-evenly;
 align-items: center;
 float: right;
 margin-right: 100px;
 margin-top: 120px;
}
 
.info-user img{
 width: 101px;
 height: 101px;
 padding-bottom: 10px;
}
 
.perfil h1{
 font-family: inter;
 font-style: normal;
 font-weight: 400;
 font-size: 20px;
 line-height: 24px;
 color: #FFFFFF;
}
        
.perfil p{
 font-family: inter;
 font-style: normal;
 font-weight: 400;
 font-size: 12px;
 line-height: 15px;
 color: #FFFFFF;
}
 
.edit-area{
 display: flex;
 flex-direction: row;
}
 
.edit-area a{
 text-decoration: none;
 padding-left: 5px;
}
 
.edit-area img{
 width: 15px;
 height: 15px; 
}

/*fim da área do usuário*/
/*área de acessibilidade*/

#acessibilidade{
 position:absolute;
 left:78%;
 top:542px;
 width: 20%;
 height: auto;
}
.acessibilidade-box{
 background: #F6F6F6;
 box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 border-radius: 10px;
 width: 106px;
 height: 89px;
 margin-bottom: 20px;
 text-align: center;
 cursor: pointer;
 display: flex;
 flex-direction: column;
 justify-content: space-evenly;
}
.box-partition{
 display: flex;
 flex-direction: row;
 justify-content: space-evenly;
}

.acessibilidade-box p{
 font-family: 'Inter';
 font-style: normal;
 font-weight: 400;
 font-size: 13px;
 line-height: 16px;
 color: #9D6BFF;

}

/*fim da área de acessibilidade*/


/*área de conteúdo*/

.box-content{
 width: 66%;
 height: auto;
 background: #FFFFFF;
 border: 1px solid #CDCDCD;
 border-radius: 30px;
 margin-left: 42px;
 margin-top: 180px;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 align-items: center;
 font-family: inter;
}
.comment-box{
 position: relative;
 width: 90%;
 height: auto;
 background: #F4F4F4;
 border-radius: 30px;
 margin-bottom: 20px;
 margin-top: 10px;
}
.icon-comment{
 display: flex;
 flex-direction: row;
 justify-content: space-around;
 padding: 15px;
}
.icon-comment img{
 width: 60px;
 height: 60px;
}
.icon-comment textarea{
 border-radius: 40px;
 width: 85%;
 height: 60px;
}

.row hr{
 border: 1px solid #9E9E9E;
 width: 90%;
 margin: auto;
}

.options{
 display: flex;
 flex-direction: row;
 justify-content: space-around;
 padding: 15px;
}

.options-comment{
 display: flex;
 flex-direction: row;
 align-items: center;
 cursor: pointer;
}
.icon-post{
 display: inline-block;
 padding: 20px;
}
.text-comment{
  display: inline-block;
}
.text-comment h4{
 padding-bottom: 20px;
 font-family: inter;
 font-style: normal;
 font-weight: 550;
 font-size: 20px;
 line-height: 19px;
}
.text-comment p{
 padding-bottom: 20px;
 font-family: inter;
 font-style: normal;
 font-weight: 400;
 font-size: 18px;
 line-height: 34px;
}
/* fim da área conteúdo*/

/*footer*/
#sec_footer{
 width: 100%;
 height: 400px;;
 background-color: #9D6BFF;
 margin-top: 22vh;
 clear: right;
}

.img13{
 position: absolute;
 top: 134.5vh;
 left: 76vw;
}

.palavras-footer{
 width: 68vw;
 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: 7vh;

 }

.palavras-footer p{
 width: 99vw;
 text-align: left;
 color: white;
 font-size: 19px;
 margin-left: 8.5vw;
 padding: 0.6vw;
 font-family: Inder;
}

.plataforma{
 margin-left: 5vw;
}

.plataforma h3{
 margin-bottom:0.5vh;
}

.plataforma a{
 width: 13vw;
 display: block;
 text-align: left;
 color: white;
 font-size: 19px;
 margin-left: -0.5vw;
 padding: 0.3vw;
 font-family: Inder;
 text-decoration: none;
}

.plataforma a:hover{
 color: #0b0020;
 cursor: pointer;
}

.social{
 width: 13vw;
 margin-left: 1vw;
 padding-left: 4.5vw;
}

.social h3{
 margin-bottom: 1vh;
}

.social a{
 width: 10vw;
 display: block;
 text-align: left;
 color: white;
 font-size: 19px;
 margin-left: 1.5vw;
 padding: 0.5vw;
 font-family: Inder;
 text-decoration: none;
}

.social a:hover{
 color:#0b0020;
 cursor: pointer;
}

.social img{
 float: left;
 margin-top: 0.5vh;
 margin-right: 0.5vw;
}

.contato{
 width: 25vw;
}

.contato h3{
 margin-bottom: 1vh;
 margin-left: 7.5vw;
}

.contato p{
 width: 40vw;
 padding-left: 1.5vw;
}
.contato img{
 float: left;
 margin-top: 0.7vh;
 margin-left: 7vw;
 margin-right: 0.4vw;
}
.ptd_nav{
 width: 50%;
 display: flex;
 flex-direction: row;
 margin-left: 7vw;
 justify-content: space-between;
 color: white;
 font-size: 15px;
 font-family: Inder;
}
.ptd a{
  margin-left: -3%;
  margin-top: 20vh;
  font-weight: bold;
  cursor: pointer;
}

.ptd a:hover{
  color: #0b0020;
}

#menu_responsivo{
  display: none;
}

.nav_responsiva {
  display:none;
  justify-content:space-around;
  align-items:center;
  font-family:Inter;
  background-color:#FFF;
  height:8vh;
  border-bottom:1px solid #AFAFAF;
}

.nav-list {
  list-style:none;
  display:none;
}

.nav-list.active {
  background-color:#FFF;
}

.nav-list li {
  letter-spacing:3px;
  margin-left:32px;
}

.nav-list ul {
  width:80vw;
  height:92vh;
}

.nav-list li a {
  text-decoration:none;
  color:#000;
}

.mobile-menu {
  display:none;
  cursor:pointer;
  margin-left:70vw;
}

.mobile-menu div {
  width:32px;
  height:2px;
  background:#ADADAD;
  margin:8px;
  transition:0.3s;
}

.titleroxo{

  display: flex;
  color: #fff;
  align-items: center;
  
  top:200px;
  left: 00px;
  border-radius: 20px;
  position: absolute;
  width: 500px;
  height: 90px;
  background-color: #9D6BFF;
  border: solid 1px rgb(75, 75, 75);
}
.titleroxo p{
  margin-left: 20px;
  font-size: 25px;
}
.titleroxo2{
  
  visibility: hidden;
  display: flex;
  color: #fff;
  align-items: center;
  
 
  border-radius: 20px;
  position: relative;
  width: 0%;
  height: 0px;
  background-color: #9D6BFF;
  border: solid 1px rgb(75, 75, 75);
}
.titleroxo2 p{
  margin: auto;
 
  font-size: 25px;
}
.perfil_abas{
  
  display: flex;
  flex-direction: row;
  width: 90%;
  height: 60px;
margin: 10px;
}

.parte_foto{
  width: 9%;
  height: 100%;
 
}
.parte_foto img{
  width: 60px;
  height: 100%;
}
.nome_paciente{
  display: flex;
  align-items: center;
  color: #575757;
  width: 60%;
  height: 100%;

}
.nome_paciente p{
  padding-left: 20px;
}
.aba_enviar{
  display: flex;
  
  width:26%;
  height: 100%;
  
}
.botao{
  display: flex;
  margin: auto;
  width:80%;
  height: 30px;
  background-color:#9D6BFF;
  cursor: pointer;
  border-radius: 10px;
  color: #fff;
  border:solid 1px rgb(101, 101, 101);
}
.botao p{
  margin: auto;
}
.fundo_paciente{
  width: 70%;
  height:auto ;
}
.perfil_2espec{
  visibility: hidden;
  width: 0px;
  height: 0px;
 }
 .fundo_geral_2{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8% 0 8% 0;
  margin:5% 5% 5% 12%;
  width: 100%;
  height: auto;
  border-radius: 50px ;
}

@media screen and (max-width:544px){
  .invisi_mob{
    display:none;
  }
  .parte_foto img {
    width: 46px;
    height: 75%;
    margin: 21% 0% 0% 0%;
  }
  
  .box-content {
    width: 90%;
    height: auto;
   margin: auto;

}
  .invisi_mob{
    display:none;
  }
  .container{
  background-image: none;
  margin-bottom: 70px;
  }
  .titleroxo {
    display:none;
}
#acessibilidade {
  position: absolute;
  left: 72%;
  top: 542px;
  width: 28%;
  height: auto;
}
.titleroxo2{
  visibility: visible;
  height: 100px;
  width: 90%;
  position: relative;
}
.fundo_geral_2 {
  padding: 7% 0 7% 0;
  margin: auto;
}

.nome_paciente p {
  padding-left: 23px;
}
.botao {
  width: 109%;
}

.perfil_2espec{
  margin: auto;
  visibility: visible;
  height: 80px;
  width: 90%;
 
  display: flex;
  align-items: center;
  flex-direction: row;
}
.centraliza_perfil2_espec{
  display: flex;
  flex-direction: row;
  margin: auto;
  height: 80%;
  width: 100%;
 
}
.nome_especialista2{
  font-family: 'Inter', sans-serif;
  line-height: 70px;
  font-size: 19px;
}
.fotoPerfil2{
  
  margin:8px 10px 0 0;
  width: 50px;
  height: 50px;
}
.nav_responsiva {
  display:flex;
}

.nav-list {
  position:absolute;
  top:8vh;
  right:0;
  width:200px;
  height:92vh;
  flex-direction:column;
  align-items:center;
  justify-content:space-around;
  transition:0.3s ease-in;
  display:flex;
}

.nav-list li {
  margin-left:0;
  opacity:0;
}

.mobile-menu {
  display:block;
  
}

.nav-list.active {
  z-index:10;
  transform: translateX(0);
}

@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);
}
.botao{
  cursor: pointer;
}
}
@media screen and (max-width:1189px){
@media screen and (min-width:544px)
{
  .box-content {
    width: 90%;
    height: auto;
   margin: auto;

}
  .invisi_mob{
    display:none;
  }
  .container{
  background-image: none;
  margin-bottom: 70px;
  }
  .titleroxo {
    display:none;
}
#acessibilidade {
  position: absolute;
  left: 72%;
  top: 542px;
  width: 28%;
  height: auto;
}
.titleroxo2{
  visibility: visible;
  height: 100px;
  width: 90%;
  position: relative;
}
.fundo_geral_2 {
  padding: 7% 0 7% 0;
  margin: auto;
}
.parte_foto img {
  width: 62px;
  height: 99%;
  margin: 0% 0% 0% 0%;
}

.nome_paciente p {
  padding-left: 23px;
}
.botao {
  width: 109%;
}

.perfil_2espec{
  margin: auto;
  visibility: visible;
  height: 80px;
  width: 90%;
 
  display: flex;
  align-items: center;
  flex-direction: row;
}
.centraliza_perfil2_espec{
  display: flex;
  flex-direction: row;
  margin: auto;
  height: 80%;
  width: 100%;
 
}
.nome_especialista2{
  font-family: 'Inter', sans-serif;
  line-height: 70px;
  font-size: 19px;
}
.fotoPerfil2{
  
  margin:8px 10px 0 0;
  width: 50px;
  height: 50px;
}
.nav_responsiva {
  display:flex;
}

.nav-list {
  position:absolute;
  top:8vh;
  right:0;
  width:200px;
  height:92vh;
  flex-direction:column;
  align-items:center;
  justify-content:space-around;
  transition:0.3s ease-in;
  display:flex;
}

.nav-list li {
  margin-left:0;
  opacity:0;
}

.mobile-menu {
  display:block;
  
}

.nav-list.active {
  z-index:10;
  transform: translateX(0);
}

@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);
}
.botao{
  cursor: pointer;
}
}
}