@font-face {
    font-family: "Anodina"; src: url("../fonts/Anodina/Anodina.eot");
    src: url("../fonts/Anodina/Anodina.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Anodina/Anodina.woff2") format("woff2"),
    url("../fonts/Anodina/Anodina.woff") format("woff"),
    url("../fonts/Anodina/Anodina.ttf") format("truetype"),
    url("../fonts/Anodina/Anodina.svg#Anodina") format("svg");
}

@font-face {
    font-family: "Rubik"; src: url("../fonts/Rubik/Rubik.eot");
    src: url("../fonts/Rubik/Rubik.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Rubik/Rubik.woff2") format("woff2"),
    url("../fonts/Rubik/Rubik.woff") format("woff"),
    url("../fonts/Rubik/Rubik.ttf") format("truetype"),
    url("../fonts/Rubik/Rubik.svg#Rubik") format("svg");
}

* {
    font-family: 'Rubik', sans-serif;
    margin: 0; padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body { background-color: #FAFAFA; }
a {text-decoration: none;}
article {text-align: justify;}
p {line-height: 1.5; width: 94%; font-family: "Anodina"; font-size: 18px; margin: auto auto 8px auto;}
h1 {margin: 10px auto;}

article figure {text-align: center; margin: auto;}
article figure img {width: 98%; margin: 15px auto;}

.bordaRedonda5px {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.bordaRedonda5pxCima {
    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
}
.sombraPreta {
	-webkit-box-shadow: 0px 3px 5px rgba(50, 50, 50, 0.77);
    -moz-box-shadow:    0px 3px 5px rgba(50, 50, 50, 0.77);
    box-shadow:         0px 3px 5px rgba(50, 50, 50, 0.77);
}
.sombraPretaCima {
	-webkit-box-shadow: 0px -3px 5px rgba(50, 50, 50, 0.77);
    -moz-box-shadow:    0px -3px 5px rgba(50, 50, 50, 0.77);
    box-shadow:         0px -3px 5px rgba(50, 50, 50, 0.77);
}
.zoom:hover{
	-webkit-transform: scale(1.03);
    -ms-transform: scale(1.03);
    transform: scale(1.03);
}
.efeitoAparecer {
	-webkit-transition: 0.4s ease-in;
	-moz-transition: 0.4s ease-in;
	-o-transition: 0.4s ease-in;
	transition: 0.4s ease-in;
}
.imgResponsivo {
    width: 100%; height: 100%;
    background-size: 100%;
    -webkit-background-size: 100%;
    -o-background-size: 100%;
    -khtml-background-size: 100%;
    -moz-background-size: 100%;
}

.barraBarra {color: grey;}

.col1 {width: 100%; padding: 0px;}
.col2 {width: 45%; display: inline-table; vertical-align: top; margin: 5px;}
.col3 {width: 31%; display: inline-table; vertical-align: top; margin: 5px;}
.col4 {width: 20%; display: inline-table; vertical-align: top;}
.blocoLatInterno {margin-bottom: 15px;}

.barraBanner {width: 100%; height: 230px; background: linear-gradient(to right, #001E2C, #0188C7);}
.bannerCoders {position: absolute; text-align: right; padding: 5px; right: 5%; top: 0; width: calc(95% - 420px);}
.bannerCoders p {text-align: left; color: white; font-size: 16px; font-style: italic;}
.bannerCoders div {margin: 10px auto; padding: 5px 5px 1px 5px; display: inline-table;}
.fotoAutor {float: right; width: 40px; margin-left: 10px;}

.barraMenuPrincipal {width: 100%; height: auto; text-align: center; background-color: #01A9DB; z-index: 999999;}
.simbolo {position: absolute; margin-top: 10px; margin-left: 5%; width: 300px;}
.menuPrincipal {width: 90%; margin: auto;}
nav ul {width: auto;}
nav ul li {padding: 8px 6px; color: black; font-weight: bold; display: inline-table; text-decoration: none; list-style: none; cursor: pointer; font-size: 16px;}
nav a {color: black;}

nav ul li ul {display: none; position: absolute; background-color: #01A9DB; margin-left: -6px; margin-top: 8px; z-index: 999999;}
nav ul li ul li {display: block; text-align: left;}

nav li:hover ul, nav li.over ul{display:block;}
nav ul li:hover {background-color: #D8D8D8;}

.codePHPEsquerdo {position: absolute; left: 0px; padding: 10px 6px; background-color: black; color: white;}
.codePHPDireito {position: absolute; right: 0px; padding: 10px 6px; background-color: black; color: white;}
.codePHPEsquerdo:hover, .codePHPDireito:hover {background-color: black;}

.menuMovel nav {width: auto; position: absolute; z-index: 99999999; right: 3px; background-color: #0188C7;}
.menuMovel nav ul li ul {margin-left: auto;}
.menuMovel {display: none;}

.menuPesquisa {display: none; padding: 5px; background-color: #0188C7; z-index: 9999999; position: absolute; left: 0px; margin-top: 8px; margin-right: 0px; width: 100%;}

.mascara {background-color: black; opacity: 0.5; position: fixed; width: 100%; height: 100%; display: none; z-index: 999999;}

#barraMenuMovel {display: none;}

.barraMeio {width: 88%; height: auto; min-height: 450px; margin: 20px auto; padding: 15px 0px; text-align: center;}
.bloco {width: 23%; display: inline-table; background-color: #01A9DB; margin: 5px; cursor: pointer; vertical-align: top;}
.bloco:hover {background-color: #D8D8D8;}
.blocoTitulo {text-align: left; padding: 1px 4px 3px 4px; color: black; font-size: 18px;}

.barraTitulo {width: 100%; padding: 5px 0px; background-color: #01A9DB; color: black;}
.conteudoContainer {padding: 10px 25px; background-color: white;}

.categoria {padding: 3px 5px; margin: 3px auto auto 3px; position: absolute; background-color: #01A9DB; color: black;}

.barraRodape {width: 100%; height: auto; margin-top: 80px; padding: 60px 0px 20px 0px; text-align: center; background-color: #086A87;}
.rodade {width: 90%; margin: auto;}
.copyright {margin-top: 50px;}
.redesSociais {display: inline-table; margin: 5px; cursor: pointer;}
.redesSociais img:hover {filter: invert(0%) sepia(4%) saturate(20%) hue-rotate(334deg) brightness(104%) contrast(100%);}
.barraRodape ul li {width: 100%; padding: 5px; text-decoration: none; list-style: none; cursor: pointer; color: white; text-align: left;}
.barraRodape ul li:hover {background-color: black;}
.ulMenuRodape {display: none;}

.code {background-color: #071019; font-family: 'Courier New', Courier, monospace; padding: 10px 10px 7px 10px; width: 94%; margin: 15px auto; text-align: left;}
.code p {line-height: 1; width: 100%; font-size: 14px; text-align: left; font-family: 'Courier New', Courier, monospace;}

.video {width: 100%; height: 300px;}

/*SVG*/
.svg15 { margin-right: 8px; height: 15px; width: 15px; text-align: center; vertical-align: top; float: left; }
.svg20 { margin-right: 8px; height: 20px; width: 20px; text-align: center; vertical-align: top; float: left; }
.svg22 { margin-right: 8px; height: 22px; width: 22px; text-align: center; vertical-align: top; float: left; }
.svg25 { margin-right: 8px; height: 25px; width: 25px; text-align: center; vertical-align: top; float: left;}
.svg30 { margin-right: 8px; height: 30px; width: 30px; text-align: center; vertical-align: top; float: left; }
.svg50 { margin-right: 8px; height: 50px; width: 50px; text-align: center; vertical-align: top; }
.svg130 { margin-right: 8px; height: 130px; width: 130px; text-align: center; vertical-align: top; }
.svgBranco { filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%); }
.svgPreto { filter: invert(0%) sepia(4%) saturate(20%) hue-rotate(334deg) brightness(104%) contrast(100%); }
.svgVerde { filter: invert(64%) sepia(36%) saturate(6501%) hue-rotate(68deg) brightness(93%) contrast(98%); }
.svgVermelho { filter: invert(24%) sepia(95%) saturate(6805%) hue-rotate(356deg) brightness(100%) contrast(120%); }
.svgAzul { filter: invert(16%) sepia(70%) saturate(7449%) hue-rotate(239deg) brightness(64%) contrast(150%); }
.svgAzulClaro { filter: invert(42%) sepia(77%) saturate(5049%) hue-rotate(178deg) brightness(96%) contrast(99%); }
.svgAmarelo { filter: invert(71%) sepia(60%) saturate(509%) hue-rotate(3deg) brightness(102%) contrast(102%); }
.svgCinza { filter: invert(47%) sepia(5%) saturate(15%) hue-rotate(344deg) brightness(90%) contrast(92%); }

.voltarTopo {position:fixed; bottom: 10px; right: 10px; padding: 10px 4px 10px 10px; background-color: black; cursor: pointer; display: none; text-align: center;}
.voltarTopo:hover {background-color: darkblue;}

.comentariosFace {width: 98%; margin: 50px auto 30px auto;}


/*INPUST*/
input, textarea {width: 90%; padding: 10px; border: 1px solid #01A9DB; font-size: 16px;}
button {width: auto; padding: 8px 10px; background-color: #01A9DB; border: 1px solid #01A9DB; font-size: 16px; font-weight: bold; color: black; cursor: pointer;}
button:hover {background-color: #D8D8D8;}
textarea {min-height: 130px;}
input:focus, button, textarea { outline: 0; }
form div {margin: 10px auto;}



/*Responsividade*/
@media (max-width: 1100px) {
	.simbolo {width: 270px; margin-left: 2%;}
	.bannerCoders {width: calc(95% - 310px); right: 2%;}
	.bannerCoders div {margin: 8px auto;}
}
@media (max-width: 1000px) {
	.barraMeio {width: 98%;}
	.bloco {width: 23%;}
	.rodade {width: 99%;}
	.barraBanner {height: 200px;}
	.simbolo {width: 250px;}
	.bannerCoders {width: calc(95% - 270px);}
	.bannerCoders div {margin: 3px auto;}
	.bannerCoders p {line-height: 1.1;}
	.video {height: 260px;}
}
@media (max-width: 900px) {
	.bloco {width: 30%;}
	.barraBanner {height: 180px;}
	.simbolo {width: 250px;}
	.bannerCoders {width: calc(95% - 250px);}
	.video {height: 220px;}
}
@media (max-width: 800px) {
	.bloco {width: 47%;}
	.col2, .col3 {width: 96%;}
	.barraBanner {height: 150px;}
	.simbolo {width: 190px;}
	.bannerCoders {width: calc(95% - 240px);}
	.bannerCoders div {height: 130px;}
	.bannerCoders div:nth-child(2) {display: none;}
	.bannerCoders p {line-height: 1.5;}
	.menuPrincipal {width: 98%; padding: 4px 0px;}
	#barraMenuPC {display: none;}
	#barraMenuMovel {display: block;}
	.video {height: 300px;}
}
@media (max-width: 680px) {
	.barraBanner {height: 130px;}
	.simbolo {width: 130px;}
	.bannerCoders {width: calc(95% - 130px);}
	.bannerCoders div {height: 90px;}
	.bannerCoders p {line-height: 1.2;}
	.barraMenuPrincipal {padding: 3px;}
}
@media (max-width: 500px) {
	.bloco {width: 96%;}
}
@media (max-width: 480px) {
	.barraBanner {height: auto;}
	.simbolo {display: none;}
	.bannerCoders {width: 98%; margin: auto 10px; position: relative;}
	.bannerCoders div {height: 90px;}
	.video {height: 200px;}
}