html {
    height: 100%; /* para corrigir a expansao da textura */
}

a {
	text-decoration: none;
	border: none;
	color: inherit;
	width: fit-content; /*para a área dos links não ficarem saindo da div */
    display: block;
}

/* fundo */

body {
    background-image: none;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: left top;
    margin: 0 0;
    background-repeat: repeat-y;
    background-image: url(img/textura.png);
    font-family: 'Roboto', sans-serif;
    font-size: 1.0rem;    }

  .bg_video{
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -1000;
    background-image: url(img/textura.png);
    background-color: #000;
    background-repeat: repeat-y;
    opacity: 0.5;
	    }

.box {
width: 700px;
padding: 1.0rem;
padding-left: 5.0rem;
}

@keyframes changeBackgroundColor {
        0% { background-color: rgb(0, 0, 0); }   /* Começa  */
		25% { background-color: rgb(14, 92, 88); } /* Quarter In */
		50% { background-color: rgb(17, 54, 118); } /* Metade */
		75% { background-color: rgb(124, 150, 176); } /* Quarter Out */
        100% { background-color: rgb(2, 2, 2); }  /* Finaliza */
}
#lettering {
background-color: #cd22a0;
color: #eee;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 1.5rem;
font-weight: 100;
text-align: right;
text-transform: uppercase;
position: fixed;
z-index: 100;
animation-name: changeBackgroundColor; /* Nome da animação definida acima */
animation-duration: 30s;              /* Duração da animação */
animation-iteration-count: infinite; /* Repetir a animação infinitamente */
animation-timing-function: linear;
}

#agenda {
	background-color: #202020;
	color: #666;
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 1.2rem;
	font-weight: 300;
	text-transform: lowercase;
			}

		#trabalhos {
			background-color: #000;
			color: #666;
			font-family: 'IBM Plex Sans', sans-serif;
			font-size: 1.2rem;
			font-weight: 300;		
			text-transform: lowercase;
			
				}
		
	#specs {
	background-color: #87bfcf;
    color: #212121;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 1.2rem;
    font-weight: 300;
    text-transform: lowercase;
			
				}


@keyframes changeBackgroundColor_tools {
        50% { background-color: rgb(210, 210, 128); }   /* Começa  */
		100% { background-color: rgb(211, 193, 28); } /* Finaliza */
		

}

	#tools {
	background-color: #d39013;
    color: #212121;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 1.2rem;
    font-weight: 300;
    text-transform: lowercase;
	animation-name: changeBackgroundColor_tools; /* Nome da animação definida acima */
	animation-duration: 8s;              /* Duração da animação */
	animation-iteration-count: infinite; /* Repetir a animação infinitamente */
	animation-timing-function: step-start ;	
					}

#spacer {
color: transparent;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 1.5rem;
font-weight: 100;
}


#header {
background-color: #333;
color: #767676;
padding-left: 1.0rem;
padding-right: 5.0rem;
}

#avisos {
color: #333;
background-color: #767676;
border-top: 1px dashed #666;
}

#posts {
color: #333;
background-color: #a9a6a6;
border-top: 1px dashed #666;
}


#legal {
color: #a9a6a6;
background-color: #000;
}

#pagecontent {
	background-color: #dbdbdbf0;
    color: #000000;
    padding-left: 3.5rem;
    padding-right: 2.5rem;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 200;
    font-size: 1.2rem;
    line-height: 1.6rem;
	overflow: hidden;
}

#pagecontent a {
	display: inline;
    background-color: #c2dcef;
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: #80c9cf;
}
#pagecontent p {
	margin-bottom: 50px;
	clear: both;
}
#pagecontent h4 {
	text-transform: none;
    font-size: 1.4rem;
    font-weight: 400 !important;
    line-height: 2rem;
    width: 30rem;
    color: rgb(10, 97, 159);
    margin-bottom: 2.5rem;
    margin-top: 1.5rem;
}


#pagecontent h3 {
    text-transform: uppercase;
    font-size: 1.7rem;
    font-weight: 200 !important;
    line-height: 2.5rem;
    color: rgb(10, 97, 159);
}



#pagecontent strong {
	background-color: #d1d1d1;
	font-weight: 300;
    }

#pagecontent img {
	display: block;
    float: left;
    margin-right: 25px;
    height: max-content;
    width: 5rem !important;
	filter: grayscale(100%);
    
}

#pagecontent a.tools  {
text-decoration: unset;
}

#pagecontent hr:not(:last-child) { /*aplica o hr em todos menos no último */
	clear: both;
    padding-top: 2rem;
    color: #8d8d8d;
    border-bottom: dashed 1px;
    border-top: none;
    border-left: none;
    border-right: none;
	margin-bottom: 1.3rem;
}



#pagecontent hr:last-child { /*esconde o hr do último */
	display: none; 
}


#edicao {
	background-color: #40bea5;
    color: #212121;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 1.2rem;
    font-weight: 300;
    text-transform: lowercase;
	overflow: hidden; /* overflow hidden em todas para corrigir o desengonçamento quando se usa zoom no navegador */
	height: 1.5rem;
	
}

#animacao {
	background-color: #f5760f;
    color: #212121;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 1.2rem;
    font-weight: 300;
    text-transform: lowercase;
	overflow: hidden;
	height: 1.5rem;
	

}

#color {
	background-color: #edc611;
    color: #212121;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 1.2rem;
    font-weight: 300;
    text-transform: lowercase;
	overflow: hidden;
	height: 1.5rem;
	

}

#dit {
	background-color: #6bb6c1;
    color: #212121;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 1.2rem;
    font-weight: 300;
    text-transform: lowercase;
	overflow: hidden;
	height: 1.5rem;
	

}

#vetor_bitmap {
	background-color: #e571d3;
    color: #212121;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 1.2rem;
    font-weight: 300;
    text-transform: lowercase;
	overflow: hidden;
	height: 1.5rem;
	

}

#shortcuts {
	background-color: #ffffff;
    color: #212121;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 1.2rem;
    font-weight: 300;
    text-transform: lowercase;
	overflow: hidden;
	height: 1.5rem;
	

}

#youtube {
	background-color: #f10000;
    color: #ededed;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 1.2rem;
    font-weight: 300;
    text-transform: lowercase;
	overflow: hidden;
	height: 1.5rem;
	

}

#pagecontent.box div {
	margin-top: 0.8rem;
	
}

/* tipografia */

h1 {
	font-weight: 100;
	font-size: 3.0rem;
	font-kerning: normal;
	margin: 0.0rem;
	text-transform: uppercase;
	font-family: 'IBM Plex Sans', sans-serif;
	letter-spacing: -2px;
}


h4 {
	font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 400 !important;
    font-size: 1.3rem;
    font-kerning: normal;
    margin: 0.0rem;
    color: #2f2f2f;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    line-height: 1.5rem;
	
}


h3 {
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 400 !important;
	font-size: 1.0rem;
	font-kerning: normal;
	margin: 0.0rem;
	color: #eee;
	text-transform: lowercase;
	margin-bottom: 0.5rem;
	margin-top: -0.5rem;
	line-height: 1.3rem;

}


h2 {
	line-height: 1.5rem;

}

#h2a {
	font-weight: 100;
	font-size: 1.4rem;
	font-kerning: normal;
	margin: 0.0rem;
	color: #eee;
	text-transform: uppercase;
	font-family: 'IBM Plex Sans', sans-serif;
	background-color: #4f4481;
	padding-left: 1.0rem;
	padding-right: 5.0rem;
}


#h2b {
	font-weight: 100;
	font-size: 1.4rem;
	font-kerning: normal;
	margin: 0.0rem;
	color: #eee;
	text-transform: uppercase;
	font-family: 'IBM Plex Sans', sans-serif;
	background-color: #375457;
	padding-left: 1.0rem;
	padding-right: 5.0rem;
}

#h2c {
	font-weight: 100;
	font-size: 1.4rem;
	font-kerning: normal;
	margin: 0.0rem;
	color: #fff;
	text-transform: uppercase;
	font-family: 'IBM Plex Sans', sans-serif;
	background-color: #537d80;
	padding-left: 1.0rem;
	padding-right: 5.0rem;
}

#h2d {
	font-weight: 100;
	font-size: 1.4rem;
	font-kerning: normal;
	margin: 0.0rem;
	color: #fff;
	text-transform: uppercase;
	font-family: 'IBM Plex Sans', sans-serif;
	background-color: #6ea2a5;
	padding-left: 1.0rem;
	padding-right: 5.0rem;
}

#h2d2 {
    font-weight: 100;
    font-size: 1.4rem;
    font-kerning: normal;
    margin: 0.0rem;
    color: #fff;
    text-transform: uppercase;
    font-family: 'IBM Plex Sans', sans-serif;
    background-color: #4b6c83;
    padding-left: 1.0rem;
    padding-right: 5.0rem;
}
#h2e {
	font-weight: 100;
	font-size: 1.4rem;
	font-kerning: normal;
	margin: 0.0rem;
	color: #eee;
	text-transform: uppercase;
	font-family: 'IBM Plex Sans', sans-serif;
	background-color: #7e8080;
	padding-left: 1.0rem;
	padding-right: 5.0rem;
}

#h2f {
	font-weight: 100;
	font-size: 1.4rem;
	font-kerning: normal;
	margin: 0.0rem;
	color: #eee;
	text-transform: uppercase;
	font-family: 'IBM Plex Sans', sans-serif;
	background-color: #595b5b;
	padding-left: 1.0rem;
	padding-right: 5.0rem;
}


#h2g {
	font-weight: 100;
	font-size: 1.4rem;
	font-kerning: normal;
	margin: 0.0rem;
	color: #eee;
	text-transform: uppercase;
	font-family: 'IBM Plex Sans', sans-serif;
	background-color: #1c1e1e;
	padding-left: 1.0rem;
	padding-right: 5.0rem;
}



#disciplinas {
	color: #3d3c3c;
    background-color: #807e7e;
    border-top: 1px dashed #999;
    text-transform: lowercase;
    padding-top: 2.0rem;
    padding-bottom: 2.0rem;
    font-size: 1.2rem;
    font-weight: 400;
	
}

#disciplinas h4 {
	color: #eee;
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 1.5rem;
	font-weight: 300 !important;
}

#tutoriais {
	color: #333;
	background-color: #a7a7a7;
	border-top: 1px dashed #666;
	padding-top: 2.0rem;
	padding-bottom: 2.0rem;
}
#ref_rapida {
	color: #333;
	background-color: #d3d3d3;
	border-top: 1px dashed #666;
	padding-top: 2.0rem;
	padding-bottom: 2.0rem;
}
#software {
	color: #666;
	background-color: #c0e4db;
	border-top: 1px dashed #666;
	padding-top: 2.0rem;
	padding-bottom: 2.0rem;
}

#samples {
	color: #666;
	background-color: #b4dbea;
	border-top: 1px dashed #666;
	padding-top: 2.0rem;
	padding-bottom: 2.0rem;
}

#footages {
	color: #333;
	background-color: #b4dbea;
	border-top: 1px dashed #666;
	padding-top: 2.0rem;
	padding-bottom: 2.0rem;
	line-height: 1.4rem;
}





#softwares {
	color: #666;
	background-color: #c0e4db;
	border-top: 1px dashed #666;
	padding-top: 2.0rem;
	padding-bottom: 2.0rem;
}

#tutoriais h4 {
	color: #333;
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 1.5rem;
}
#ref_rapida h4 {
	color: #333;
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 1.5rem;
}
#software h4 {
	color: #666;
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 1.5rem;
}
#softwares h4 {
	color: #666;
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 1.5rem;
}
#samples h4 {
	color: #666;
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 1.5rem;
}
#gdo h4, #spotify h4  {
	color: #c3c0c0;
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 1.5rem;
}
#softwares img {
	float:left;	margin-right: 1rem;	margin-bottom: 1rem;	width: 3rem;
	height: fit-content;
	opacity: 0.6;
}

#creditos_fundo {
	font-weight: 300;
    font-size: 0.9rem;
    font-kerning: normal;
    margin: 0rem;
    color: #878787;
    text-transform: uppercase;
    font-family: 'IBM Plex Sans', sans-serif;
    background-color: #141414;
    padding: 0.5rem 3rem;
	
}


/* seletores imprimir */


#imprimir {
    margin: 0 0;
    background-color: #eee;
    background-image: none;
    padding: 5mm;
    width: 210mm;
        }

 .tituloimprimir {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 30px;
    color: #333;
    font-weight: 100;
    text-transform: uppercase;
}


 .textopreto {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 18px;
    color: #333;
    font-weight: 100;
    text-transform: lowercase;
}


.textoimprimir {
    font-family: 'Roboto', sans-serif;
    font-size: 15pt;
    line-height: 1.4em;
    color: #000;
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#imprimir hr {
    border: none;
    border-bottom: 1px dashed #999;
}


/* para imagens sem o bg branco */

body#imprimir table td a:link
{
  background-color: transparent !important;
}

body#imprimir table td a:visited
{
  background-color: transparent !important;
}

body#imprimir table td a:active
{
  background-color: transparent !important;
}





body#imprimir a:link
{
  font-family: 'Roboto', sans-serif;
    font-size: 15pt;
    line-height: 1.4em;
    color: #666;
    background-color: #fff;
	display: inline;
}

body#imprimir a:visited
{
  font-family: 'Roboto', sans-serif;
    font-size: 15pt;
    line-height: 1.4em;
    color: #666;
    background-color: #fff;
	display: inline;
}

body#imprimir a:active
{
    font-family: 'Roboto', sans-serif;
    font-size: 15pt;
    line-height: 1.4em;
    color: #000;
    background-color: #fff;
	display: inline;
}


body#imprimir p { /* para corrigir os p's do word */
    /* margin-top: 0px; deprecated com novas versões do wordpres */    margin-bottom: 0px;
}

body#imprimir table {  /* para corrigir tabelas do word */
    border: 0.01rem dashed #c8c8c8 !important;
    width: 100% !important;
    border-spacing: 0px;
    background-color: #dbd9d9;
  }

body#imprimir table tr td {  /* para corrigir tabelas do word */
    border: 0.01rem dashed #c8c8c8 !important;
    padding: 5px;
    vertical-align: top;
      }

body#imprimir ol {  /* para eliminar recuo dos itens em nœmero */
    padding: 20px;
}


/* media queries */

@-ms-viewport {
	width: auto!important;
}
@viewport {
	width: device-width;
}

@media screen and (max-width:580px) {
a {
width: 100%; /* para não bagunçar a grid em responsivo */
}
#pagecontent {
font-size: 1.3rem;
line-height: 1.8rem;
font-weight: 300;	
}
#pagecontent h4 {
font-size: 2rem;
line-height: 2.7rem;
width: 90%;	
}
.box {
width: 95%; /* para não quebrar a margem direita */
}

body {
font-size: 1.1rem;	
}

h1 {
	        font-size: 3.5rem;
        line-height: 3.5rem;
        margin-bottom: 1rem;
}

#lettering {
	padding-left: 1.0rem; /* para o lettering não quebrar a margem direita, compensa com o padding da esquerda */
	font-size: 1.7rem;
}

#samples img {
	margin-bottom: 4.2rem !important;
}
#softwares img {
	margin-bottom: 4.2rem !important;
}
#software img  {	margin-bottom: 4.2rem !important;
}
#ref_rapida img  {
	margin-bottom: 4.2rem !important;
}
#tutoriais img  {
	margin-bottom: 4.2rem !important;
}
#gdo img  {
	margin-bottom: 4.2rem !important;
}
#spotify img  {
	margin-bottom: 4.2rem !important;
}
#creditos_fundo { /*para esconder o crédito em mobile porque não aparece */
display: none;
}

.bg_video { 
display: none;
 }

}