@charset "utf-8";
/* estilos pausados do bom Pedrokas */

/* JANELA */
html {
  font-size: 8px;
  scroll-behavior: smooth;
}

::-moz-selection {
	background: #0000ff;
	color: #fff;
}

::selection {
	background: #0000ff;
	color: #fff;
}

/* TIPOGRAFIA */
.moldura-texto {
	font-family: minipax, serif;
	font-size: 1.6rem;
	line-height: 1.05;
	color: #000;
	text-wrap: nowrap;
}

.texto-normal {
	font-family: minipax, serif;
	font-size: 1.4rem;
	line-height: 1.2;
	color: #000;
}

.arialnarrow {
	font-family: arialnarrow, sans-serif;
}

.legenda {
	font-family: arialnarrow, sans-serif;
	font-size: 1rem;
	line-height: 1;
	color: #000;
}

a.legenda:link {
	color: #0000ff;
	text-decoration: none;
}
a.legenda:visited {
	color: #0000ff;
	text-decoration: none;
}
a.legenda:hover {
	color: #000;
	text-decoration: none;
}
a.legenda:active {
	color: #000;
	text-decoration: none;
}

.outline {
	font-family: arialnarrow-outline, sans-serif;
}

/* LAYOUT */
#intro {
	position: absolute;
	z-index: 999;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #000;
	opacity: 1;
	transition: opacity 1s ease;
	overflow: hidden;
}

#intro img {
	position: absolute;
	width: 0;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: aumentar 3s ease-in-out forwards;
}

#icone {
	cursor: pointer;
}

#cabecalho {
	position: fixed;
	z-index: 2;
	width: calc(100% - 1rem);
	left: 1rem;
	top: 1rem;
}

#rodape {
	position: fixed;
	z-index: 2;
	width: calc(100% - 1rem);
	left: 1rem;
	bottom: 1rem;
}

.tags {
	font-family: arialnarrow, sans-serif;
	font-size: 1.4rem;
	line-height: 1.4;
	padding-left: 5px;
	padding-right: 5px;
	color: #000;
}

.tag1 {
	background-color: #EF476F;
}

.tag2 {
	background-color: #06D6A0;
}

.tag3 {
	background-color: #86BBD8;
}

#titulo-artigo {
    position: fixed;
	z-index: 2;
	height: 4rem;
	top: 3rem;
    left: 50%;
    transform: translateX(-50%);
	animation: fadeIn 2s ease-in-out forwards;
}

.imagem {
	width: 100%;
}

.imagem2 {
	width: 80%;
}

.imagem3 {
	width: 150%;
}

.botao {
	padding-bottom: 0.6rem;
}

.caixa80 {
	width: 80%;
	text-align: center;
}

.caixa-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.caixa-link:hover .imagem {
    content: attr(data-hover);
}

.caixa-link:hover .moldura-texto {
    color: #0000ff;
}

.caixa-link:hover .caixa80 {
    cursor: pointer;
}

.botao-artigos {
    position: fixed;
    right: 3rem;
    bottom: 8rem;
    z-index: 3;
    display: block;
    cursor: pointer;
    width: 30rem;
    animation: vibracao 0.75s ease-in-out forwards alternate;
    transform-origin: bottom center;
    transition: all 0.3s ease;
}

.botao-artigos:hover {
    animation: vibracao 0.75s ease-in-out infinite alternate;
}

.scroll-passou-800 .caixa80 .moldura-texto {
    display: none;
}

.scroll-passou-800 .caixa-link:hover .moldura-texto {
    display: block;
}

.scroll-passou-800 .botao-artigos {
    width: 15rem !important;
    bottom: 5rem;
}

#contentor {
	position: relative;
	z-index: 1;
	padding: 0;
	height: 100vh;
}

.arranque {
	height: 16rem;
}

.intervalo {
	height: 12.5rem;
}

.intervalo-meio {
	height: 6.25rem;
}

.intervalo-quarto {
	height: 3.125rem;
}

.intervalo-duplo {
	height: 25rem;
}
	
.intervalo-triplo {
	height: 37.5rem;
}

.margem-v {
	height: 1rem;
}

.sobrepor {
	position: relative;
	z-index: 1;
	top: -9.375rem;
}

.sobrepor2 {
	position: relative;
	z-index: 1;
	top: -3.125rem;
}

.sobrepor3 {
	position: relative;
	z-index: 1;
	top: -18.75rem;
}

/* ANIMAÇÕES */
@keyframes aumentar {
    0% { 
        width: 0;
    }
    100% { 
        width: 60vw;
    }
}

@keyframes vibracao {
    0% { 
        transform: rotate(-20deg) translateX(-1px) translateY(0px);
    }
    20% {
        transform: rotate(1deg) translateX(2px) translateY(-1px);
    }
    40% {
        transform: rotate(-30deg) translateX(-2px) translateY(1px);
    }
    60% { 
        transform: rotate(-5deg) translateX(1px) translateY(-2px);
    }
	70% { 
        transform: rotate(10deg) translateX(1px) translateY(-2px);
    }
	100% { 
        transform: rotate(-20deg) translateX(1px) translateY(-2px);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.botao-artigos .botao-imagem {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

@media screen and (min-width: 768px) {
	html {
	  font-size: 10px;
	}
}

@media screen and (min-width: 992px) {
	html {
	  font-size: 12px;
	}
}

@media screen and (min-width: 1200px) {
	html {
	  font-size: 14px;
	}
}

@media screen and (min-width: 1400px) {
	html {
	  font-size: 16px;
	}
}