@font-face {
  font-family: Almendra;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fantastic/fontes/almendra-latin.woff2') format('woff2');
}

@font-face {
  font-family: Iansui;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fantastic/fontes/iansui-latin.woff2') format('woff2');
}


html {
  min-height: 100%;
  position: relative;
}

body {
  margin: 0px;
  font-size: 1.1em;
  line-height: 1.6em;
  font-style: normal;
  letter-spacing: 1px;
  font-family: Iansui, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  text-align: justify;
  color: #f2f2f2;
  background: #0c151e none repeat scroll 0% 0%;
}

h1 {
  color: #ffff00;
  font-size: 2.4em;
  line-height: 3.0em;
  font-style: bold;
  letter-spacing: .16rem;
  margin-top: 1.2em;
  margin-bottom: 0.0em;
  font-family: "Almendra Display", cursive;
}
h2 {
  color: #00d900;
  font-size: 1.8em;
  line-height: 1.9em;
  font-style: bold;
  letter-spacing: .16rem;
  margin-top: 0.7em;
  margin-bottom: 01em;
  font-family: "Almendra Display", cursive;
}
h3 {
  color: #ffff99;
  font-size: 1.3em;
  line-height: 1.5em;
  margin-top: 1.4em;
  margin-bottom: 0.0em;
  font-family: "Almendra Display", cursive;
}
h4, h5, h6 {
  margin-top: 0.4em;
  margin-bottom: 0.0em;
}
h4 {
  color: #99ffb2;
}
h5 {
  color: #ffffff;
}
h6 {
  color: #ffffff;
}

p {
  margin-top: 0.1;
  margin-bottom: 0.0;
}

header {
  margin: 0px;
}

section {
  margin-top: 2%;
  margin-bottom: 2%;
  margin-left: 8%;
  margin-right: 8%;
  padding::1%; 
}

footer {
  color: #FBFDFD;
  display: block;
  font-size: 0.7em;
  position: relative;
  width: 100%;
  max-width: 100%;
}

img {
  max-width: 100% !important;
  max-height: 100%;
}

hr { border: solid 1px #ffbf00;}

a:link, a:visited, a:hover, a:active {
  text-decoration: none;
}

strong, b { color: #fff8df; font-weight: 600; }

a:link {
  color: #99e6ff;
}

a:visited {
  color: #99e6ff;
}

a:hover, a:focus {
  color: #cfbfff;
  font-weight: bold;
}

a:active {
  color: #99ffe5;
}


.cover {
  position: relative;
  background-image: url("../imagens/hiper/estrela_portal.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
}
.cover_nave {
  position: relative;
  background-image: url("../imagens/hiper/comanda_nave_12.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-attachment: fixed;
  background-size: 100%;
}
.cover_sim {
  position: relative;
  background-image: url("../imagens/hiper/Portal__sim.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
}
.cover_talvez {
  position: relative;
  background-image: url("../imagens/hiper/Portal__talvez.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
}
.cover_nao {
  position: relative;
  background-image: url("../imagens/hiper/Portal__nao.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
}

.encolhe {
  height: 1600px;
  width: 2px;
}

.artigo {
  width: 80%;
  max-width: 98%;
  margin: 0px auto;
  color: #cacad9;
}

.copyright {
  font-size: 14px;
  text-align: right;
  vertical-align: baseline;
  margin-top: 4px;
  padding-right: 50px;
}

.baixo_dir {
  position: absolute;
  right: 20px;
  bottom: 4px;
  padding: 10px;
}

.banner {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  text-align: center;
  position: absolute;
  top: 0px;
  left: opx;
  margin: 0px;
  padding: 0px;
  border-bottom: 0px solid #0f1013;
  /* background-image: url("../imagens/hiper/cimo_portal.jpg"); */
}

.img_esquerda {
  float: left;
  margin: 10px 20px 10px 0px;
}

.img_direita {
  float: right;
  display: inline-block;
  margin: 10px 0px 10px 20px;
}

.img_100 {
  clear: both;
  display: block;
  width: 100%;
  max-width: 100% !important;
  height: auto;
  margin: 0px;
}

.max_100 {
  max-width: 100% !important;
  max-height: 100% !important;
}

/* Define a classe que aplicará o efeito */
    .zoom {
      transition: transform 0.2s ease-in-out; /* Suaviza a transição */
    }

    /* Ao passar o cursor, a imagem aumenta 1.5 vezes seu tamanho */
    .zoom:hover {
      transform: scale(1.5);
    }

 /* Classe que define a transição para a imagem */
    .moveUp {
      transition: transform 0.3s ease; /* Suaviza a transição */
    }

    /* Ao passar o mouse, a imagem se move 10px para cima */
    .moveUp:hover {
      transform: scale(0.7) translateY(-60px);
    }

.rodar-imagem {
    transition: transform 0.5s ease-in-out;
}
.rodar-imagem:hover {
    transform: rotate(360deg);
}


 @keyframes rotateImage {
    0% {
    transform: rotate(0deg);
    }
    100% {
    transform: rotate(360deg);
            }
        }
.roda-imagem-inf {
    animation: rotateImage 3s linear infinite; /* gira continuamente num loop */
}


@keyframes rotateImage {
    0% {
transform: rotate(0deg);
    }
    100% {
transform: rotate(360deg);
    }
}
.rodando-imagem {
	animation: rotateImage 1.4s linear infinite;
    }
.rodando-imagem:hover {
	animation-play-state: paused; /* Pausa a animação quando o mouse está sobre a imagem */
}


.borda {
  border: 2px solid #000000;
}

.moldura {
  border: 3px solid #000000;
  margin: 12px;
}

.texto_esquerda {
  text-align: left;
}

.texto_direita {
  text-align: right;
}

.texto_centro {
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}

.centrada {
  float: none;
  clear: both;
  margin-right: auto;
  margin-left: auto;
}

.grande {
  font-size: 3em;
}

.media {
  font-size: 2em;
}

.pequena {
  font-size: 0.6em;
}

.input {
  border: 1px solid #49526d;
  border-radius: 10px;
  transition: all 0.1s ease 0s;
  background-color: #d0dae6;
  color: black;
  padding-left: 4px;
  padding-right: 4px;
  margin-bottom: 8px;
  font-size: 1em;
  line-height: 2em;
  width: 600px;
  max-width: 90%;
}

.button, .button:visited {
  display: inline;
  width: 250px;
  max-width: 98%;
  margin: 8px 4px 4px;
  padding: 5px 20px 5px 20px;
  color: #eef0f9;
  background-color: #00468c;
  border: 0px solid #373d4a;
  border-radius: 22px;
  text-align: center;
  font-size: 1.2em;
  line-height: 1.4em;
}

.button:hover {
  color: #b9ff73;
  background-color: #374e88;
  border-color: #373d4a;
}

.botao, .botao:visited {
  display: inline-block;
  margin: 0px;
  padding: 6px 12px 6px 12px;
  color: #bfffdf;
  background-color: #1e598a;
  border: border: 1px solid #000000;
  border-radius: 50%;
  text-align: center;
  font-size: 0.7em;
}
.botao:hover {
  color: #200040;
  background-color: #9999ff;
}

.hide {
  display: none;
}

.topo {
  position: fixed;
  right: 12px;
  bottom: 2px;
  display: inline-block;
  z-index: 13;
}

.logo {
  position: absolute;
  top: 6px;
  left: 10px;
  display: block;
  float: left;
  text-align: left;
  font-size: 1.2em;
  font-weight: bold;
  z-index: 99;
}

.cor_verde {
  color: #00ff80;
}
.cor_amarela {
  color: #ffff26;
}
.cor_rosa {
  color: #ff99ff;
}
.cor_encarnada {
  color: #fe5656;
}
..cor_violeta {
  color: #b973ff;
}
.cor_f_escuro {
  background-color: rgb(0 52 72 / 96%);
  padding: 20px;
  border: 0px solid #1a1d22;
  border-radius: 20px;
}
.cor_f_escuro_t {
  background-color: rgb(34 41 63 / 80%);
  padding: 20px;
  border: 0px solid #1a1d22;
  border-radius: 20px;
}
.cor_f_claro {
  background-color: rgb(251 251 251 / 96%);
  color: #200040;
  padding: 20px;
  border: 0px solid #222222;
  border-radius: 20px;
}
.cor_f_claro_t {
  background-color: rgb(251 251 251 / 80%);
  color: #200040;
  padding: 20px;
  border: 0px solid #222222;
  border-radius: 20px;
}
.cor_f_roxo {
  background-color: rgb(53 2 81 / 96%);
  padding: 14px;
  border: 1px solid #4d0066;
  border-radius: 20px;
}
.cor_f_roxo_t {
  background-color: rgb(53 2 81 / 85%);
  padding: 14px;
  border: 1px solid #4d0066;
  border-radius: 20px;
}

.f_tdh {
  background-color: #1f3250;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 2rem;
  color: #c7b6e7;
  border: 0px solid #1a1d22;
  padding-left: 18px;
  padding-right: 18px;
}

.f_td {
  background-color: #001040;
  padding: 18px;
  border: 0px solid #1a1d22;
}

div.borda img {
  border: 1px solid #16171f;
}

div.gallery {
  margin: 0px;
  border: 0px solid #16171f;
  display: inline-block;
}

div.gallery:hover {
  border: 0px solid #777777;
}

div.gallery img {
  width: auto;
  height: 100%;
  text-align: center;
  margin: 20px 5px 0px;
}

@media only screen and ( max-width : 1200px ) {
  h1 {
    font-size: 1.6em;
    padding-top: 6px;
  }
  h2 {
    font-size: 1.2em;
    line-height: 1.1em;
  }
  h3 {
    font-size: 1em;
  }
  h4 {
    font-size: 0.9em;
  }
  h2, h3, h4, h5, h6 {
    margin-top: 0.1em;
	margin-bottom: 0.1em;
  }
  body {
    font-size: 1em;
  }
  table {
    width: 98%;
  }
  .logo {
    font-size: 1.2em;
    position: fixed;
    top: 4px;
    left: 6px;
    display: block;
    float: left;
    z-index: 12;
  }
    .encolhe {
  height: 1024px;
  width: 2px;
}

@media all and ( max-width : 768px ) {
  li, img {
   max-width: 100% !important;
  }
section {
  margin-top: 1%;
  margin-bottom: 1%;
  margin-left: 3%;
  margin-right: 3%;
  padding::1%; 
}
  .logo {
    font-size: 0.9em;
    position: fixed;
    top: 2px;
    left: 4px;
    display: block;
    float: left;
    z-index: 12;
  }
  .encolhe {
  height: 700px;
  width: 2px; 
}
 h1 {
    font-size: 1.5em;
    padding-top: 3px;
  }
  h2 {
    font-size: 1.4em;
    line-height: 1.4em;
  }
  h3 {
    font-size: 1em;
  }
  h4 {
    font-size: 0.8em;
  }
  h2, h3, h4, h5, h6 {
    margin-top: 0.1em;
	margin-bottom: 0.0em;
  }
  body {
    font-size: 0.8em;
  }
  table {
    width: 100%;
  }
 .artigo {
  width: 92%;
  max-width: 99%;
  margin: 0px auto;
  color: #cacad9;
}
}