@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');


body{
  width: calc(100vw-20px);
  background-color: #000;
  color:silver;
  padding:0;
  margin:0;
  overflow-x:hidden;
}
.clear { clear: both; }
a,a:visited{
    text-decoration:none;
    color:inherit;
}

.fx_ini{
    width:100%;
    height:300px;
    display: grid;
    grid-template-columns: 400px 1fr 400px;
    grid-column-gap: 20px;
}
.citacao{
    text-align:center;
    font-style: italic;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:1.5em;
    color:rgba(249, 198, 26, 0.88);
}
.citacao i{
    margin-left:10px;
    margin-right:10px;
    
}
.ber {
	width: 100%;
	padding: 10px;
	text-align: center;
	position: relative;
    background: linear-gradient(to right, #6A3E0C 0%, #A76A1E 50%, #584118 100%);
	color: #ADADAD;
	display: block;
	margin: auto;
	text-decoration: none;
    font-size:2em;
    display: flex;
    justify-content: center;
    align-items: center;

}
.centro{
  display: flex;
  align-items: center;
  justify-content: center;
    
}

.container {
  position: relative;
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-box-reflect: below 0 linear-gradient(transparent, transparent, #0005);
}
.container .loader {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  animation: roda 2s linear infinite;
}
.container .loader:nth-child(1):before, .container .loader:nth-child(2):before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to top, transparent, rgba(0, 255, 249, 0.4));
  background-size: 100px 180px;
  background-repeat: no-repeat;
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
}
.container .loader:nth-child(2), .container .loader:nth-child(4) {
  animation-delay: -1s;
  filter: hue-rotate(290deg);
}
.container .loader i {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background: #00fff9;
  border-radius: 50%;
  z-index: 100;
  box-shadow: 0 0 10px #00fff9, 0 0 20px #00fff9, 0 0 30px #00fff9, 0 0 40px #00fff9, 0 0 50px #00fff9, 0 0 60px #00fff9, 0 0 70px #00fff9, 0 0 80px #00fff9, 0 0 90px #00fff9, 0 0 100px #00fff9;
}
.container .loader span {
  position: absolute;
  inset: 20px;
  background: #000;
  border-radius: 50%;
  z-index: 1;
}
@keyframes roda {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


.fx_l1{
    width:100%;
    display: grid;
    grid-template-columns: 400px 1fr;
    grid-column-gap: 20px;
    border-bottom: 1px solid #666666;
}
.fx_l2{
    width:100%;
    display: grid;
    grid-template-columns: 1fr 400px;
    grid-column-gap: 20px;
    margin-top:10px;
    border-bottom: 1px solid #666666;
}
.l_t_2{
    color:rgba(249, 198, 26, 0.88);
    font-size:2em;
    font-weight: 700;
}
.l_sinop{
    font-size:1.3em;
    font-style: italic;
    padding:20px;
}
.l_saiba{
    font-style: italic;
    color:rgba(249, 198, 26, 0.88);
    float:right;
    margin-top:10px;
    margin-right:25px;
}



.fx_1{
    width:calc(100% - 20px);
    height:50px;
    padding:10px;
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
    grid-column-gap: 20px;
}

.fx_2{
    width:100%;
    padding:8px;
    background:#fff;
    text-align:center;
background: -ms-linear-gradient(top, rgba(235,233,249,1) 0%, rgba(255,255,255,1) 51%, rgba(193,191,234,1) 100%);
background: linear-gradient(to bottom, rgba(235,233,249,1) 0%, rgba(255,255,255,1) 51%, rgba(193,191,234,1) 100%);
    font-size:24px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-column-gap: 10px;
}

.fx_contos{
    width:100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;
}
.conto_prev{
    width:100%;
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-column-gap: 10px;
    border-bottom: 1px solid #666666;
}
.c_peq{
    font-size:0.8em;
    color:#fff;
}
.c_peq i{
    margin-left:10px;
    margin-right:3px;
}

.social{
    text-align:center;
    font-size:30px;
}
.social i{
    margin:5px 15px 5px 15px;
    transform: perspective(100px) rotateY(40deg);
  transition: all 1s ease;
}
.social i:hover{
    color:rgba(249, 198, 26, 0.88);
    transform: perspective(100px) rotateY(-40deg);
  transition: all 0.5s ease;
}

.tit_p{
    width:92%;
    margin-left:2%;
    padding:4px;
    background:#000;
    color:rgba(249, 198, 26, 0.88);
    text-align:center;
    border-radius:10px;
}
.imgs {
  position: relative;
}
.imgs img {
    height:50px;
}
.imgs img.shine {
  position: absolute;
  top: 0;
  left: 0;
  filter: saturate(3) brightness(3.6);
  transition: -webkit-mask-position-x 2.3s ease, mask-position-x 2.3s ease;
  -webkit-mask-image: linear-gradient(135deg, #0000 20%, #000 30%, #0000 40%, #0000 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position-x: -150px;
  mask-image: linear-gradient(135deg, #0000 20%, #000 30%, #0000 40%, #0000 100%);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-position-x: -150px;
}
.imgs:hover .shine {
  -webkit-mask-position-x: 300px;
  mask-position-x: 300px;
}
.grd_ini_1{
    width:calc(100% - 20px);
    display: grid;
    grid-template-columns: 300px 1fr 3fr;
    grid-column-gap: 10px;
}
.grd_ini_livros{
    width:100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align:center;
}
.news{
    padding:5px;
    overflow-y:auto;
    height:380px;
}

.livro{
    float:left;
    margin:5px;
    width:250px;
    height:400px;
    text-align:center;
    transition:.5s;
    padding:5px;
}
.book-container {
  --rotate: -30deg;
  --perspective: 600px;
  --transitionDelay: 1s;
  --radius: 2px;
  --thickness: 15px;
  --bgColor: #01060f;
  --width: 200px;
  --height: 300px;
  
  display: flex;
  justify-content: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.book-container:hover {
  --rotate: -25deg;
}

.book {
  margin-left: calc(-15px - var(--thickness));
  width: var(--width);
  height: var(--height);
  background: red;
  transform: perspective(var(--perspective)) rotateY(var(--rotate));
  transition: transform ease var(--transitionDelay);
  position: relative;
}

.book img {
  margin: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
}

.book:before,
.book:after {
  position: absolute;
  top: calc(1.5% + var(--thickness)/7.5);
  height: calc(97.5% - var(--thickness)/2.5);
  content: ' ';
  z-index: -1;
}

.book:before {
  width: 100%;
  top: calc(2% + var(--thickness)/7.5);
  height: calc(97.5% - var(--thickness)/1.75);
  left: calc(var(--thickness) + 2px);
  background-color: var(--bgColor);
  box-shadow: 5px 5px 20px #333;
  border-radius: var(--radius);
}

.book:after {
  width: var(--thickness);
  left: 100%;
  background-color: #EFEFEF;
  box-shadow: inset 0px 0px 5px #aaa;
  transform: perspective(100px) rotateY(20deg);
}

.grd_ini_2{
    margin-top:5px;
    width:calc(100% - 20px);
    display: grid;
    grid-template-columns: 4fr 2fr 1fr;
    grid-column-gap: 10px;
}
.conto_prev{
    width:100%;
}
.conto_prev .tit{
    font-weight: 700;
}
.conto_prev .peq{
    font-size: small;
    color:darkblue;
}
.conto_prev .cont{
    display:inline;
    font-weight: 700;
    color:darkblue;
    transition:.5s;
    padding:5px;
    
}
.conto_prev .cont:hover{
    border-radius:5px;
    background:yellow;
    transition:.5s;
}
.letra_p{
    font-size:15px;
}
.noticia{
    margin:15px;
    text-align:justify;
}
.noticia_tit{
    color:#800000;
}

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
.snip1217 {
  font-family: 'Raleway', Arial, sans-serif;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
}
.snip1217 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.snip1217 li {
  display: inline-block;
  list-style: outside none none;
  margin: 0.5em 1.5em;
  padding: 0;
}
.snip1217 a {
  padding: 0.3em 0;
  color: silver;
  position: relative;
  text-decoration: none;
  display: inline-block;
}
.snip1217 a:before,
.snip1217 a:after {
  height: 3px;
  position: absolute;
  content: '';
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  background-color: rgba(249, 198, 26, 0.88);
  width: 0;
}
.snip1217 a:before {
  top: 0;
  left: 0;
}
.snip1217 a:after {
  bottom: 0;
  right: 0;
}
.snip1217 a:hover,
.snip1217 .current a {
  color: grey;
}
.snip1217 a:hover:before,
.snip1217 .current a:before,
.snip1217 a:hover:after,
.snip1217 .current a:after {
  width: 100%;
}

.contador{
    display:block;
    position:relative;
    margin-top:-20px;
    margin-left:10px;
    color:#fff;
    text-shadow: 0px 0px 3px #000000;
}


.wrapper {
  position: relative;
  perspective: 40em;
  display: grid;
  transform-style: preserve-3d;
  margin:10px;
}

.card {
  grid-area: 1 / 1;
  height: 50px;
  width: 420px;
  transform: translateX(10px) rotateY(25deg) rotateX(10deg);
  background: rgba(249, 198, 26, 0.88);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 20px;
  color: #000;
  text-transform: uppercase;
  font-size: 60px;
  font-weight: 700;
  backface-visibility: hidden;
  box-shadow: 0 10px 30px -3px rgba(0,0,0,.1);
}

h1 {
  font-size: 40px;
  font-weight: 700;
}

.card .enclosed {
  background: #000;
  line-height: 1;
  color: rgba(249, 198, 26, 1);
  padding: 3px ;
  display: inline-block;
  transform: translate(-1px, 1px) scale(0.95);
  transform-origin: right center;
}

.wrapper:before {
  --bw: 9px;
  grid-area: 1 / 1;
  content: '';
  backface-visibility: hidden;
  height: 100%;
  width: 100%;
  margin-top: calc(-1 * var(--bw));
  margin-left: calc(-1 * var(--bw));
  background: transparent;
  transform: translateX(-60px) rotateY(-30deg) rotateX(15deg) scale(1.03);
  pointer-events: none;
  border: var(--bw) solid #6E6E6E;
  box-sizing: content-box;
}


.wrapper:hover > div,
.wrapper:hover:before {
  transform: none;
}


.wrapper > div,
.wrapper:before {
  will-change: transform;
  transition: .3s transform cubic-bezier(.25,.46,.45,1);
}


.newsletter {
  overflow: hidden;
  height: 40px;
  width: 400px;
  margin: 0 auto;
  position: relative;
}
.newsletter input {
  width: 100%;
  border: 1px solid white;
  border-radius: 5px;
  height: 40px;
  padding: 10px 0 10px 15px;
  text-transform: lowercase;
  outline: none;
  -moz-transition: border 0.2s ease;
  -o-transition: border 0.2s ease;
  -webkit-transition: border 0.2s ease;
  transition: border 0.2s ease;
}
.newsletter input:focus {
  border: 1px solid #999;
}
.newsletter input:focus + btc {
  background-color: rgba(249, 198, 26, 0.88);
  color:#000;
}
.newsletter btc {
  position: absolute;
  z-index: 999;
  right: 2px;
  top: 2px;
  height: 36px;
  border: none;
  background-color: rgba(249, 198, 26, 0.88);
  -moz-transition: background-color 0.3s ease, width 0.3s ease;
  -o-transition: background-color 0.3s ease, width 0.3s ease;
  -webkit-transition: background-color 0.3s ease, width 0.3s ease;
  transition: background-color 0.3s ease, width 0.3s ease;
  color: #000;
  padding: 0px;
  margin: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  text-transform: uppercase;
  width: 100px;
  text-align: center;
  cursor: pointer;
  @inlude transform(translateZ(0));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:0.8em;

    
}
.newsletter btc:hover {
  width: 140px;
}



.rodape{
    width:calc(100% - 20px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 10px;
    background:#000;
    color:rgba(249, 198, 26, 0.88);
    text-align:center;
    padding:15px;
    align-items: center;
}
.rodape img:hover{
    transform: perspective(100px) rotateY(20deg);
    transition: all 0.5s ease;
}
.rodape img{
    transition: all 0.5s ease;
}









.pad10{
    padding:10px;
}
.brd_cinza{
    border-top: 1px solid #e1e1e1;
}
.fd_preto{
    background:#000;
}
.fd_lilas{
    background:#AA80FF;
}
.fd_verde{
    background:#008040;
}
.fd_verdec{
    background:#33FF33;
}
.fd_azul_c{
    background:#66CCFF;
}
.fd_azul{
    background:#33BBFF;
}
.fd_amareloe{
    background:#B39500;
}
.fd_cinza2{
    background:darkgrey;
}
.fd_cinza{
    background:silver;
}
.fd_dourado{
    background:#FFEA80;
}
.fd_fin_vermelho{
background: rgba(246,246,246,1);
background: -moz-linear-gradient(315deg, rgba(246,246,246,1) 0%, rgba(255,255,255,1) 53%, rgba(250,100,100,1) 100%);
background: -webkit-gradient(right bottom, left top, color-stop(0%, rgba(246,246,246,1)), color-stop(53%, rgba(255,255,255,1)), color-stop(100%, rgba(250,100,100,1)));
background: -webkit-linear-gradient(315deg, rgba(246,246,246,1) 0%, rgba(255,255,255,1) 53%, rgba(250,100,100,1) 100%);
background: -o-linear-gradient(315deg, rgba(246,246,246,1) 0%, rgba(255,255,255,1) 53%, rgba(250,100,100,1) 100%);
background: -ms-linear-gradient(315deg, rgba(246,246,246,1) 0%, rgba(255,255,255,1) 53%, rgba(250,100,100,1) 100%);
background: linear-gradient(315deg, rgba(246,246,246,1) 0%, rgba(255,255,255,1) 53%, rgba(250,100,100,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa6464', endColorstr='#f6f6f6', GradientType=1 );
}
.fd_fin_verde{
background: rgba(246,246,246,1);
background: -moz-linear-gradient(135deg, rgba(246,246,246,1) 0%, rgba(255,255,255,1) 53%, rgba(20,204,10,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(246,246,246,1)), color-stop(53%, rgba(255,255,255,1)), color-stop(100%, rgba(20,204,10,1)));
background: -webkit-linear-gradient(135deg, rgba(246,246,246,1) 0%, rgba(255,255,255,1) 53%, rgba(20,204,10,1) 100%);
background: -o-linear-gradient(135deg, rgba(246,246,246,1) 0%, rgba(255,255,255,1) 53%, rgba(20,204,10,1) 100%);
background: -ms-linear-gradient(135deg, rgba(246,246,246,1) 0%, rgba(255,255,255,1) 53%, rgba(20,204,10,1) 100%);
background: linear-gradient(135, rgba(246,246,246,1) 0%, rgba(255,255,255,1) 53%, rgba(20,204,10,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14cc0a', endColorstr='#f6f6f6', GradientType=1 );
}

.content_box{
    position:absolute;
    top:0;
    right:0;
    overflow:auto; 
    overflow-x:hidden;
    width: calc(100% - 400px);
    height:100vh;
    padding-left:50px;
    padding-right:50px;
}
.mnu_box{
    overflow:auto; 
    width:100%;
    background-color: #fcfdfd;
}
.mnu > div > img {  
    width: 100%;  
    object-fit: cover;  
}
*::-webkit-scrollbar-track
{
	border-radius: 10px;
}

*::-webkit-scrollbar
{
	width: 5px;
	background-color: #F5F5F5;
}

*::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-image: -webkit-gradient(linear,
									   left bottom,
									   left top,
									   color-stop(0.44, rgb(122,153,217)),
									   color-stop(0.72, rgb(73,125,189)),
									   color-stop(0.86, rgb(28,58,148)));
									   width:30px;
}

.mnu_grid{
    display: grid;
    grid-template-columns: repeat(3,33%);
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    margin:5px;
}

.btn_mnu{
    width:55px;
    height:55px;
    border: 1px solid #D6D6D6;
    border-radius:5px;
    text-align:center;
    box-shadow: 2px 2px 12px 4px #D9D9D9;
    padding:3px;
    transition: all 300ms ease-in-out;
    word-wrap: break-word;
    font-size:10px;
    float:left;
    margin:5px;
    
}
.btn_mnu i{
    font-size:30px;
}
.btn_mnu:hover{
    background: linear-gradient(135deg, #CE0000 0%, #D2AF00 100%);
    transition: all 300ms ease-in-out;
    color:#fff;
    box-shadow:none;
}
.mnu_body{
    width:90vw;
    margin-left:3vw;
    margin-top:2vh;
    visibility:hidden;
    position:fixed;
    z-index:99999;
    box-shadow: 0px 0px 15px 5px #000000;
    border: 15px ridge #868EA4;
    background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
    padding:1vw;
    transition: all 300ms ease-in-out;
}
.mnu_bar{
    position:fixed;
    top:12px;
    left:12px;
    color:#400080;
    font-size:1.5em;
    transition: all 300ms ease-in-out;
    text-shadow: 2px 2px 6px #9C9C9C;
    z-index:990;
}
.mnu_bar:hover{
    color:red;
    transition: all 300ms ease-in-out;
    animation-name: tada;
    animation-duration: 1s;
    
}

.g_cinza{
    background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
}
.g_vd_musgo{
    background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(164,179,87,1) 100%);
}
.g_vermelho{
    background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,0,0,1) 100%);
}
@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}
.jan_flut{
    width:100%;
    padding:10px;
    border-radius:15px;
}


.modal{
    width:100vw;
    height:100vh;
    position:fixed;
    top:0;
    left:0;
    background: rgba(0,0,0,0.81);
    display:flex;
  align-items: center;
  justify-content: center;
    color:#fff;
    z-index:999;
    overflow:hidden;
}
.modal img{
    max-height:80vh;
    box-shadow: 0px 0px 35px 15px #fff;
}

.contador{
    font-family: "Share Tech Mono", monospace;
    margin-top:110px;
    color:#474747;
}
.grid_compras {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, auto);
  grid-column-gap: 10px;
        border-bottom: 1px solid #666666;
}

.bdr_bt{
        border-bottom: 1px solid #666666;
}
.capitulos{
    color:#000;
    background: #FFFFFF;
    background: -moz-linear-gradient(-45deg, #FFFFFF 0%, #FFFFFF 50%, #DCDCDC 100%);
    background: -webkit-linear-gradient(-45deg, #FFFFFF 0%, #FFFFFF 50%, #DCDCDC 100%);
    background: linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 50%, #DCDCDC 100%);
    -webkit-box-shadow: inset 1px 1px 6px 0px #9E9E9E; 
    box-shadow: inset 1px 1px 6px 0px #9E9E9E;
    padding:20px;
    margin:10px;
    font-size:1.4em;
}