/*=========== RESET ==========*/
* {margin: 0; padding: 0; font-size: 100%; border: none; outline: none; font-weight: 300; box-sizing: border-box;
font-family: 'Lato', sans-serif;}
body {background-color: #fff; color: black}
a {text-decoration: none;}
ul {list-style: none;}
img {max-width: 100%;}
/* ------------------------- */
/* Desativar Elementos */
#lemailr {display: none;}
/* =========== botao scroll ======= */
p{display: block; height: 2500px;}
#myBtn {display: none;position: fixed;bottom: 20px;right: 30px;z-index: 9999;border: none;outline: none;background-color: #a8cf45 ;color: white;cursor: pointer;padding: 15px;border-radius: 10px;}    
#myBtn:hover {background-color: #555;}
/* -------------------------------- */
/* CONTAINER */
.container {width: 100%; float: left; padding: .5% .5%; text-align: center; background-color: #a8cf45;}
.containertopo {width: 100%; float: left; position: fixed; padding: .5% .5%; text-align: center; background-color: white;}
.containerrodape {width: 100%; float: left; padding: .5% .5%; text-align: center; background-color: rgb(157, 185, 222); vertical-align: middle;}
.imagem {padding: 1em 3em; width: 100%; font-size: 1.5em; color: #000000; background-color: rgba(255,255,255,0.5); float: left; text-align: center; vertical-align: middle; }
.rodape {font-size: 1em; color: #fff; text-align: center; padding: 2px; font-weight: bold; width: 100%;}
/* ------------------------------ */
/*=========== BG COLORS ==========*/
.bg-gradient {background: linear-gradient(to right,#050659,#050659);}
.bg-black {background-color: #130400; }
.bg-white {background-color: #fff;}
.bg-blue {background-color: #050659;}
.bg-green {background-color: #a8cf45;}
.bg-cinza {background-color: #808080;}
.bg-tomato {background-color: tomato;}
/*=========== HELPERS ==========*/
.radius {border-radius: 7px;}
/* CABEÇALHO */
.logo {width: 230px; height: 87px; float: left; background: url(img/visaoderede.png) center center/230px no-repeat;font-size: 0; background-color: #fff;}
/* MENU */
.btn-menu {width: 56px; height: 56px; float: right; text-align: center; color: #fff; border-radius:56px; cursor: pointer;}
.menu {display:none; width: 100%; height: 100%; position: fixed; background-color: rgba(255,255,255,.9); top: 0; left: 0;}
.btn-close {font-size: 1.5em; color: #a8cf45; float: right; cursor: pointer; margin: 2% 3% 0 0;}
.menu ul {width: 100%; float: left; text-align: center;}
.menu li {padding: 1%;}
.menu li a {font-size: 2em; color: black; padding: 1% 2%;}
.menu li a:hover {border:1px solid #000;}
/* --------------------- */
/* Texto Padrão */
.fnt-bold { font-weight: bold; font-weight: bold; }
.txt-left {text-align: left;}
.txt-right {text-align: right;}
.txt-center {text-align: center;}
.pad-left20 {padding-left: 20%;}
.mrg-left { padding-left: 2%;}
.mrg-top {margin-top: 40%;}
/* rodape */
.social-icons a {font-size: 1em; color: white; margin-right: 3%; font-weight: bold;}
.social-icons a:last-child {margin-right: 0;}
.social-icons a:hover {color: black;}
.copyright {color: white; margin-top:0%;}
/**/
/**/
/* SMALL DEVICES - SMARTPHONES */
@media screen and (min-width: 200px) {
    /*=========== BG COLORS ==========*/
    .bg-gradient {background: linear-gradient(to right,#050659,#050659);}
    .bg-black {background-color: #130400; }
    .bg-white {background-color: #fff;}
    .bg-blue {background-color: #050659;}
    .bg-green {background-color: #a8cf45;}
    .bg-cinza {background-color: #808080;}
    .bg-tomato {background-color: tomato;}
    .mrg-top {margin-top: 40%;}
    /* ------------------------------ */
    /* CONTAINER */
    .container {width: 100%; float: left; padding: .5% .5%; text-align: center; background-color: #a8cf45; margin-top: 22%}
    .containertopo {width: 100%; float: left; position: fixed; padding: .5% .5%; text-align: center; background-color: white;}
    .containerrodape {width: 100%; float: left; padding: .5% .5%; text-align: center; background-color: rgb(157, 185, 222); vertical-align: middle;}
    .imagem {padding: 1em 3em; width: 100%; font-size: 1.5em; color: #000000; background-color: rgba(255,255,255,0.5); float: left; text-align: center; vertical-align: middle; }
    .rodape {font-size: 1em; color: #fff; text-align: center; padding: 2px; font-weight: bold; width: 100%;}
    /* ------------------------------ */
    /* Colunas */
    .title {width: 90%; height: 100% ; display: block; margin: 2% auto;}
    .title h2 {font-size: 1em; color: black; font-weight: 600; background-color: rgba(255,255,255,1); text-align: center; padding: 4px; border-radius: 10px; margin: 4% 0% 1% 0%; box-shadow: 5px 5px 10px #808080;}
    .title article {font-size: 1em; color: #000000; background-color: rgba(255,255,255,1); text-align: justify; padding: 16px; width: 100%; height: 90%;border-radius: 10px;}
    .title img {width: 100%; border-radius: 10px; background-color: rgba(255,255,255,1);}
    .title a {font-weight: bold;}
    .title a:hover {background-color: yellow;}
    /* --------------------------------- */
    /* Banners Promocionais */
    .promo {width: 90%; height: 100%; margin: 0 auto; margin-top: 2%; background-color: #a8cf45;}
    .promo img {width: 90%; height: 50%; border-radius: 10px; margin-top: 1%;}
    /* --------------------------- */
    /* RODAPÉ */
    .social-icons {font-size: .7em; color: white;}
    .social-icons a {margin-right: 3%; font-weight: bold;}
    .social-icons a:last-child {margin-right: 0;}
    .social-icons a:hover {color: black;}
    .copyright {font-size: .5em; color: white; margin-top:0%;}
    /* ------------------------------------- */
    }
/**/
/**/
/* SMALL DEVICES - SMARTPHONES */
@media screen and (min-width: 400px) {
/*=========== BG COLORS ==========*/
.bg-gradient {background: linear-gradient(to right,#050659,#050659);}
.bg-black {background-color: #130400; }
.bg-white {background-color: #fff;}
.bg-blue {background-color: #050659;}
.bg-green {background-color: #a8cf45;}
.bg-cinza {background-color: #808080;}
.bg-tomato {background-color: tomato;}
.mrg-top {margin-top: 40%;}
/* ------------------------------ */
/* CONTAINER */
.container {width: 100%; float: left; padding: .5% .5%; text-align: center; background-color: #a8cf45; margin-top: 22%}
.containertopo {width: 100%; float: left; position: fixed; padding: .5% .5%; text-align: center; background-color: white;}
.containerrodape {width: 100%; float: left; padding: .5% .5%; text-align: center; background-color: rgb(157, 185, 222); vertical-align: middle;}
.imagem {padding: 1em 3em; width: 100%; font-size: 1.5em; color: #000000; background-color: rgba(255,255,255,0.5); float: left; text-align: center; vertical-align: middle; }
.rodape {font-size: 1em; color: #fff; text-align: center; padding: 2px; font-weight: bold; width: 100%;}
/* ------------------------------ */
/* Colunas */
.title {width: 90%; height: 100% ; display: block; margin: 2% auto;}
.title h2 {font-size: 1em; color: black; font-weight: 600; background-color: rgba(255,255,255,1); text-align: center; padding: 4px; border-radius: 10px; margin: 1% auto; box-shadow: 5px 5px 10px #808080;}
.title article {font-size: 1em; color: #000000; background-color: rgba(255,255,255,1); text-align: justify; padding: 16px; width: 100%; height: 90%;border-radius: 10px;}
.title img {width: 100%; border-radius: 10px; background-color: rgba(255,255,255,1);}
.title a {font-weight: bold;}
.title a:hover {background-color: yellow;}
/* --------------------------------- */
/* Banners Promocionais */
.promo {width: 90%; height: 100%; margin: 0 auto; margin-top: 2%; background-color: #a8cf45;}
.promo img {width: 90%; height: 50%; border-radius: 10px; margin-top: 1%;}
/* --------------------------- */
/* RODAPÉ */
.social-icons {font-size: .7em; color: white;}
.social-icons a {margin-right: 3%; font-weight: bold;}
.social-icons a:last-child {margin-right: 0;}
.social-icons a:hover {color: black;}
.copyright {font-size: .5em; color: white; margin-top:0%;}
/* ------------------------------------- */
}
/**/
/**/
/* SMALL DEVICES - TABLETS*/
@media screen and (min-width: 768px) {
/*=========== BG COLORS ==========*/
.bg-gradient {background: linear-gradient(to right,#050659,#050659);}
.bg-black {background-color: #130400; }
.bg-white {background-color: #fff;}
.bg-blue {background-color: #050659;}
.bg-green {background-color: #a8cf45;}
.bg-cinza {background-color: #808080;}
.bg-tomato {background-color: tomato;}
/* ------------------------------ */
/* CONTAINER */
.container {width: 100%; float: left; padding: .5% .5%; text-align: center; background-color: #a8cf45; margin-top: 10%}
.containertopo {width: 100%; float: left; position: fixed; padding: .5% .5%; text-align: center; background-color: white;}
.containerrodape {width: 100%; float: left; padding: .5% .5%; text-align: center; background-color: rgb(157, 185, 222); vertical-align: middle;}
.imagem {padding: 1em 3em; width: 100%; font-size: 1.5em; color: #000000; background-color: rgba(255,255,255,0.5); float: left; text-align: center; vertical-align: middle; }
.rodape {font-size: 1em; color: #fff; text-align: center; padding: 2px; font-weight: bold; width: 100%;}
/* ------------------------------ */
/* Colunas */
.title {width: 45%; height: 100% ; vertical-align: top; display: inline-block;}
.title h2 {font-size: 1em; color: black; font-weight: 600; background-color: rgba(255,255,255,1); text-align: center; padding: 4px; border-radius: 10px; margin: 1% auto; box-shadow: 5px 5px 10px #808080;}
.title article {font-size: 1em; color: #000000; background-color: rgba(255,255,255,1); text-align: justify; padding: 16px; width: 100%; height: 90%;border-radius: 10px;}
.title img {width: 100%; border-radius: 10px; background-color: rgba(255,255,255,1);}
.title a {font-weight: bold;}
.title a:hover {background-color: yellow;}
/* --------------------------------- */
/* Banners Promocionais */
.promo {width: 90%; height: 100%; margin: 0 auto; margin-top: 2%; background-color: #a8cf45;}
.promo img {width: 90%; height: 50%; border-radius: 10px; margin-top: 1%;}
/* --------------------------- */
/* RODAPÉ */
.social-icons {font-size: 1em; color: white;}
.social-icons a { margin-right: 3%; font-weight: bold;}
.social-icons a:last-child {margin-right: 0;}
.social-icons a:hover {color: black;}
.copyright {font-size: 1em; color: white; margin-top:0%;}
/* ------------------------------------- */
}
/**/
/**/
/* MEDIUM DEVICES - TABLETS & DESKTOPS*/
@media screen and (min-width: 960px) {
/* Menu */
.btn-menu {display: none;}
.btn-close {display: none;}
.menu {width: auto; height: 120px; line-height: 120px; float: right; background-color: #fff; display: block !important; position: static;}
.menu ul {width: 100%; float: left; text-align: center;}
.menu li {padding: 0; float: left;}
.menu li a {color:black; font-size: 1em; padding: 15px; }
.menu li a:hover {border: none; color: #606060; background-color: 606060; font-weight: bold;}
/* ---------------- */
/* Texto Padrão */
.fnt-bold { font-weight: bold; font-weight: bold; }
.txt-left {text-align: left;}
.txt-right {text-align: right;}
.txt-center {text-align: center;}
.pad-left20 {padding-left: 20%;}
.mrg-left { padding-left: 2%;}
.mrg-top {margin-top: 40%;}
.brd-radius10 { border-radius: 10px;}
.brd-radius20 { border-radius: 20px;}
.brd-radius30 { border-radius: 30px;}
/* ----------------------- */
/*=========== BG COLORS ==========*/
.bg-gradient {background: linear-gradient(to right,#050659,#050659);}
.bg-black {background-color: #130400; }
.bg-white {background-color: #fff;}
.bg-blue {background-color: #050659;}
.bg-green {background-color: #a8cf45;}
.bg-cinza {background-color: #808080;}
.bg-tomato {background-color: tomato;}
/* ------------------------------ */
/* CONTAINER */
.container {width: 100%; float: left; padding: .5% .5%; text-align: center; background-color: #a8cf45;margin-top: 12%}
.containertopo {width: 100%; float: left; position: fixed; padding: .5% .5%; text-align: center; background-color: white;}
.containerrodape {width: 100%; float: left; padding: .5% .5%; text-align: center; background-color: rgb(157, 185, 222); vertical-align: middle;}
.imagem {padding: 1em 3em; width: 100%; font-size: 1.5em; color: #000000; background-color: rgba(255,255,255,0.5); float: left; text-align: center; vertical-align: middle; }
.rodape {font-size: 1em; color: #fff; text-align: center; padding: 2px; font-weight: bold; width: 100%;}
/* ------------------------------ */
/* Colunas */
.title h2 {font-size: 1.5em; color: black; font-weight: 600; background-color: rgba(255,255,255,1); text-align: center; padding: 4px; border-radius: 10px; margin: 1% auto; box-shadow: 5px 5px 10px #808080;}
.title article {font-size: 1em; color: #000000; background-color: rgba(255,255,255,1); text-align: justify; padding: 16px; width: 100%; height: 90%;border-radius: 10px;}
.title img {width: 100%; border-radius: 10px; background-color: rgba(255,255,255,1);}
.title a {font-weight: bold;}
.title a:hover {background-color: yellow;}
/* --------------------------------- */
/* Banners Promocionais */
.promo {width: 90%; height: 100%; margin: 0 auto; margin-top: 2%; background-color: #a8cf45;}
.promo img {width: 90%; height: 50%; border-radius: 10px; margin-top: 1%;}
/* --------------------------- */
/* RODAPÉ */
.social-icons {font-size: 1em; color: white;}
.social-icons a {margin-right: 3%; font-weight: bold;}
.social-icons a:last-child {margin-right: 0;}
.social-icons a:hover {color: black;}
.copyright {font-size: 1em; color: white; margin-top:0%;}
/* ------------------------------------- */
}
/**/
/**/
/* LARGE DEVICES - WIDE SCREENS*/
@media screen and (min-width: 1280px) {
/* Misselância */
.cadastro {padding-left:50px; padding-right:50px;padding-top:50px;}
.formulario {width: 100%;}
/* ---------------- */
/* Menu */
.btn-menu {display: none;}
.btn-close {display: none;}
.menu {width: auto; height: 120px; line-height: 120px; float: right; background-color: #fff; display: block !important; position: static;}
.menu ul {width: 100%; float: left; text-align: center;}
.menu li {padding: 0; float: left;}
.menu li a {color:black; font-size: 1em; padding: 15px; }
.menu li a:hover {border: none; color: #606060; background-color: 606060; font-weight: bold;}
/* ---------------- */
/* Texto Padrão */
.fnt-bold { font-weight: bold; font-weight: bold; }
.txt-left {text-align: left;}
.txt-right {text-align: right;}
.txt-center {text-align: center;}
.pad-left20 {padding-left: 20%;}
.mrg-left { padding-left: 2%;}
.mrg-top {margin-top: 40%;}
.brd-radius10 { border-radius: 10px;}
.brd-radius20 { border-radius: 20px;}
.brd-radius30 { border-radius: 30px;}
/* ----------------------- */
/*=========== BG COLORS ==========*/
.bg-gradient {background: linear-gradient(to right,#050659,#050659);}
.bg-black {background-color: #130400; }
.bg-white {background-color: #fff;}
.bg-blue {background-color: #050659;}
.bg-green {background-color: #a8cf45;}
.bg-cinza {background-color: #808080;}
.bg-tomato {background-color: tomato;}
/* ------------------------------ */
/* CONTAINER */
.container {width: 100%; float: left;padding: .5% .5%; text-align: center; background-color: #a8cf45;margin-top: 9%}
.containertopo {width: 100%; float: left; position: fixed; padding: .5% .5%; text-align: center; background-color: white;}
.containerrodape {width: 100%; float: left; padding: .5% .5%; text-align: center; background-color: rgb(157, 185, 222); vertical-align: middle;}
.imagem {padding: 1em 3em; width: 100%; font-size: 1.5em; color: #000000; background-color: rgba(255,255,255,0.5); float: left; text-align: center; vertical-align: middle; }
.rodape {font-size: 1em; color: #fff; text-align: center; padding: 2px; font-weight: bold; width: 100%;}
/* ------------------------------ */
/* Colunas */
.title {width: 45%; height: 100% ; vertical-align: top; display: inline-block; margin: 1% auto;}
.title h2 {font-size: 2em; color: black; font-weight: 600; background-color: rgba(255,255,255,1); text-align: center; padding: 4px; border-radius: 10px; margin: 1% auto; box-shadow: 5px 5px 10px #808080;}
.title article {font-size: 1em; color: #000000; background-color: rgba(255,255,255,1); text-align: justify; padding: 16px; width: 100%; height: 90%;border-radius: 10px;}
.title img {width: 100%; border-radius: 10px;background-color: rgba(255,255,255,1);}
.title a {font-weight: bold;}
.title a:hover {background-color: yellow;}

/* --------------------------------- */
/* Banners Promocionais */
.promo {width: 90%; height: 100%; margin: 0 auto; margin-top: 2%; background-color: #a8cf45;}
.promo img {width: 100%; height: 50%; border-radius: 10px; margin-top: 1%;}
/* --------------------------- */
/* RODAPÉ */
.social-icons {font-size: 1em; color: white;}
.social-icons a {margin-right: 3%; font-weight: bold;}
.social-icons a:last-child {margin-right: 0;}
.social-icons a:hover {color: black;}
.copyright {font-size: 1em; color: white; margin-top:0%;}
/* ------------------------------------- */
}