/*CSS referente às abas/accordion function e à aspectos gerais*/

/*fontes*/

@font-face {
  font-family: "Vazirmatn Regular";
  src: url("font/Vazirmatn-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Vazirmatn Medium";
  src: url("font/Vazirmatn-Medium.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Vazirmatn SemiBold";
  src: url("font/Vazirmatn-SemiBold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}


/*configurações gerais------------------------------------------*/
* {
  margin: 0;
  font-family: "Vazirmatn Regular", Helvetica, sans-serif;
}

body {
  overflow: hidden;
}




/*config das divisoes gerais*/
section {
  margin: 0;
  width: 100%;
  font-weight: bold;
  background-color: #e8e8e8;
  overflow: hidden;
}

::-webkit-scrollbar {
  width: 0px;
}

/*configuração de cada aba----------------------------*/

/*config caixa aba*/
.item {
  float: left;
  outline: 1.5px solid #000000;
  background-color: #e8e8e8;
  margin: 0 !important;
  height: 100vh;
  cursor: pointer;  
  letter-spacing: 5px;
  
  white-space: nowrap;
}

/*config caixa conteudo*/
.info {
  width: 85%;
  float: left;
  height: 100vh;
  display: none;
}

/*config hover state*/
.item:hover {
  animation-play-state: paused;
  background-color: #09ef3f;
  color: #000000;
  transition: EASE-IN;
}


/*config active state*/
.item.active {
  background-color: #000000;
  color: #ecf0f1 !important;
}

#title.active {
  background-color: #000000;
  color: #ecf0f1 !important;
}

#intro.active {
  background-color: #000000;
  color: #ecf0f1 !important;
}



/*confi específica: introdução*/

#intro {
  width: 2%;
}

.icon img {
  width:80%;
  position: relative;
  top: 92vh;
  left: 10%;
}

#intro.active .icon {
  /*color:transparent;*/
  transform: rotate(0.5turn);
}



/*confi específica: rede/lista*/
#title {
  width: 9%;
  font-size: 6vw;
  font-family: "Vazirmatn SemiBold", Helvetica, sans-serif !important;
  font-weight: 600;
  writing-mode: vertical-rl;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.marqueetitle {
  animation: marquee 35s linear infinite;
  position: absolute;
  line-break: none;
  right:0.5vw;
  white-space: nowrap;
  height: 24em;
  z-index: -1;
}

@keyframes marquee {
  0% {
    top: -1.15em;
  }
  100% {
    top: -55.10em;
  }
}

.marqueetitle:hover {
  animation-play-state: paused;
}



/*confi específica: about*/
#about {
  width: 4%;
  font-size: 2.2vw;
  letter-spacing: 2px;
  font-family: "Vazirmatn SemiBold", Helvetica, sans-serif !important;
  font-weight: bolder !important;
  writing-mode: vertical-rl;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  white-space: nowrap;
  display: inline;
}

#about p {
  padding-top: 5%;
  padding-right: 0.5vw;
}

#textAbout{
    display: inline-block;
}


#textClose img{
  display: none;  
  width:1.5vw;
  padding-top: 5%;
  padding-right: 0.5vw;
}

#about.active #textAbout {
  display: none;
}

#about.active #textClose img {
  display: inline-block;
}

.booklink {
  font-family: "Vazirmatn medium", Helvetica, sans-serif !important;
  font-weight: 100 !important;
  color:#09ef3f !important;
  text-decoration: none !important;
}

.booklink:hover{
  color:#7a7a7a !important;
}

.booklink:visited{
  color:#adadad  !important;
}

@media only screen and (max-width: 950px) {
 
  #textClose img {
    display: none;  
    width:2.5vw;  
  }

  .icon img {
    width: 100%;
    left: 0;
  }

}