/* Vars */

:root {
 --cor-base:#244561;
 --cor-clara:#5b7898;
 --cor-escura:#002639;
 --cor-dois:#cdaf75;
 --cor-bg:#fff;
}

/* Reset */

* {
 margin:0; padding:0; border:0; outline:0;
 box-sizing:border-box;
}

/* Base */

html {
 position:relative;
 min-height:100%;
}

body {
 margin:0;
 height:100%;
 min-width:300px;
 overflow-y:scroll;
 overflow-x:hidden;
 background-color:var(--cor-bg);
 color:#000;
 font-family:Arial,Helvetica;
 font-size:1em;
 font-weight:400;
}

.barlow {
 font-family:"Barlow",Arial,Helvetica;
 font-size:1em;
 font-weight:400;
}

/* Tags */

a {
 text-decoration:none;
 color:#000;
 outline:none;
 overflow-wrap:anywhere;
}

a:hover {
 text-decoration:none;
 color:var(--cor-base);
}

a.azul {
 text-decoration:none;
 color:var(--cor-escura);
 outline:none;
 overflow-wrap:anywhere;
}

a.azul:hover {
 text-decoration:none;
 color:var(--cor-clara);
}

a.branco {
 text-decoration:none;
 color:#fff;
 outline:none;
 overflow-wrap:anywhere;
}

a.branco:hover {
 text-decoration:none;
 color:var(--cor-dois);
}

input[type=text],input[type=password],input[type=date],input[type=file],select,textarea {
 width:100%;
 font-family:Barlow,Arial,Helvetica;
 border:solid 1px var(--cor-base);
 background-color:#fff;
 border-radius:3px;
 color:#000;
 margin-bottom:12px;
 padding:8px;
 outline:none;
 resize:none;
}

input[type=text]:focus,input[type=password]:focus,input[type=date]:focus,select:focus,textarea:focus {
 background-color:#f8f3ea;
}

input[type=text],input[type=password],input[type=file] {
 width:100%;
}

input[type=checkbox] {
 margin:10px 4px 13px 17px;
 vertical-align:middle;
}

input[type=checkbox]:nth-child(1) {
 margin-left:0;
}

::placeholder {
 color:var(--cor-escura);
 opacity:0.4;
 font-size:0.9em;
}

button,input[type=button],input[type=submit] {
 background-color:var(--cor-base);
 border:solid 1px var(--cor-base);
 border-radius:3px;
 padding:10px;
 margin:0;
 color:#fff;
 outline:none;
 cursor:pointer;
}

button:hover,input[type=button]:hover,input[type=submit]:hover {
 background-color:var(--cor-escura);
 border:solid 1px var(--cor-escura);
}

h1 {
 color:var(--cor-base);
 border-bottom:solid 2px var(--cor-clara);
 padding:0.3em 0;
 margin-bottom:1em;
 font-weight:500;
}

hr {
 border:0;
 width:100%;
 height:1px;
 background-color:var(--cor-base);
}

li {
 margin-left:1em;
}

blockquote {
 border-left:solid 3px var(--cor-base);
 padding-left:1em;
 font-style:italic;
}

break {
 flex-basis:100%;
 width:0; height:0;
 overflow:hidden;
}

main {
 margin:0;
 padding:0;
}

/* Table */

.table {
 display:table;
 width:100%;
 border-collapse:collapse;
}

.table > div {
 display:table-row;
}

.table > div > div {
 display:table-cell;
 border:1px solid var(--cor-escura);
 padding:7px;
 vertical-align:middle;
}

.table-header > div {
 font-weight:bold;
 background:var(--cor-clara);
}

@media (max-width:768px) {

 .table {
  display:block;
 }

 .table > div {
  display:block;
  border:1px solid var(--cor-base);
  border-radius:6px;
  overflow:hidden;
  margin-bottom:1em;
 }

 .table > div > div {
  display:block;
  border:none;
  border-bottom:1px solid var(--cor-clara);
  padding:8px;
 }

 .table > div > div:last-child {
  border-bottom:none;
 }

 .table > div > div::before {
  content:attr(data-label);
  font-size:0.9em;
  font-weight:bold;
  display:block;
  margin-bottom:4px;
  color:var(--cor-base);
 }

 .table-header {
  display:none !important;
 }

}

/* Dialog */

dialog {
 position:fixed;
 overflow:hidden;
 margin:auto;
 min-width:280px;
 max-width:600px;
 padding:0;
 border-radius:9px;
 box-shadow:0 10px 20px #0009;
 z-index:99;
}

dialog[open]:not(:modal) {
 top:20%;
 left:50%;
 transform:translate(-50%,-50%);
 margin:0;
}

dialog::backdrop {
 background:rgba(0,0,0,.15);
}

#dialog-header {
 padding:12px 14px 10px 14px;
 font-weight:bold;
 background:var(--cor-base);
 color:#fff;
}

#dialog-content {
 padding:20px 16px;
}

#dialog-footer {
 text-align:right;
 padding:6px;
 border-top:1px solid #ddd;
}

#dialog-footer button {
 min-width:70px;
 cursor:pointer;
 margin:6px;
}

#dialog-footer button:last-child {
 margin-right:12px;
}

@media screen and (max-width:600px) {

 dialog {
  max-width:85%;
 }

 #dialog-footer {
  text-align:center;
 }

 #dialog-footer button {
  margin:6px 6px 0 6px;
 }

 #dialog-footer button:last-child {
  margin-right:6px;
  margin-bottom:12px;
 }

}

/* Específicos */

.nosel {
 user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 -webkit-user-select:none;
 -webkit-touch-callout:none;
 -webkit-tap-highlight-color:transparent;
}

.yessel {
 user-select:text !important;
 -moz-user-select:text !important;
 -ms-user-select:text !important;
 -webkit-user-select:text !important;
}

.noresp {
 display:initial;
}

.yesresp {
 display:none;
}

.flex {
 display:flex;
 flex-wrap:wrap;
 justify-content:center;
}

.loading {
 display:none;
 z-index:99;
}

.load1 {
 position:absolute;
 top:0; left:0;
 z-index:99;
 width:100%;
 height:100%;
 background-color:#fff;
 opacity:0.2;
}

.load2 {
 width:48px;
 height:48px;
 position:fixed;
 top:49%;
 left:49%;
 transform:translate(-50%,-50%);
 animation:rotation 1.7s infinite linear;
}

@keyframes rotation {
 from { transform:rotate(0deg); }
 to { transform:rotate(359deg); }
}

/* YouTube */

.embed-container {
 position:relative;
 padding-bottom:56.25%;
 height:0;
 overflow:hidden;
 max-width:100%;
}

.embed-container iframe,.embed-container object,.embed-container embed {
 position:absolute;
 top:0; left:0;
 width:100%;
 height:100%;
}

@media screen and (max-width:639px) {

 .noresp {
  display:none;
 }

 .yesresp {
  display:initial;
 }

}

@media screen and (max-width:330px) {
 body {
  font-size:0.9em;
 }
}

@media screen and (max-width:270px) {
 body { display:table-column;background:url(/imagens/layout/logotipo.png) center center / contain no-repeat fixed padding-box content-box var(--cor-bg); }
}

/* Projeto */

.topo {
 display:inline-block;
 width:100%;
 height:170px;
 background-color:#f0f1f3;
 border-bottom:1px solid var(--cor-escura);
 position:fixed;
 top:0;
 left:0;
 z-index:2;
}

.topo_logo {
 flex:1;
 max-width:170px;
 min-width:170px;
 text-align:center;
 padding:10px 10px 0;
}

.logo {
 width:100%;
 max-width:150px;
}

.logoresp {
 display:none;
}

.topo_midias {
 flex:1;
 max-width:50px;
 min-width:50px;
 padding:18px 10px 0;
}

.topo_bola {
 display:inline-block;
 width:30px;
 height:30px;
 border-radius:20px;
 background-color:var(--cor-dois);
 text-align:center;
 margin:2px 0;
 padding-top:8px;
 transition:0.3s;
}

.topo_ico {
 width:14px;
}

.topo_bola:hover {
 background-color:var(--cor-base);
}

.topo_bola:hover .topo_ico {
 filter:invert() brightness(100);
}

.topo_direito {
 flex:1;
 text-align:right;
 padding-right:20px;
 padding-top:32px;
}

.topo_player {
 display:inline-block;
 width:100%;
 max-width:870px;
 margin-left:15px;
}

.playerbox {
 width:100%;
 height:54px;
 margin:0 auto;
 background-color:var(--cor-escura);
 border-radius:15px;
 border:1px solid var(--cor-dois);
 outline:3px solid var(--cor-escura);
 padding:11px 10px 5px;
}

.playerbot1, .playerbot2 {
 flex:1;
 max-width:30px;
 min-width:30px;
 height:30px;
 margin:0 2px;
 padding-top:7px;
 text-align:center;
 background-color:var(--cor-dois);
 border-radius:20px;
 transition:0.3s;
 cursor:pointer;
}

.playerico {
 width:20px;
}

.playerbot1:hover, .playerbot2:hover {
 background-color:#fff;
}

.playertxt {
 flex:4;
 text-align:left;
 padding:0 10px;
 margin-top:-3px;
 color:#fff;
 font-size:1.1em;
 font-weight:700;
 line-height:16px;
}

.playertxt div {
 justify-content:left;
 flex-wrap:nowrap;
}

.playerpos {
 display:none;
}

#prghora {
 font-size:0.8em;
 font-weight:400;
 color:#fff;
 margin-right:4px;
}

#prgatual {
 height:19px;
 overflow:hidden;
 width:100%;
}

#prgatualhid {
 display:none;
}

.menu {
 display:inline-block;
 padding-top:30px;
}

.menuitem {
 display:inline-block;
 padding:0 10px;
 font-size:1.2em;
 font-weight:600;
 color:var(--cor-escura);
}

.menuitem:hover {
 color:var(--cor-dois);
}

.menubola {
 display:inline-block;
 width:9px;
 height:9px;
 background-color:var(--cor-dois);
 border-radius:10px;
 margin:0 4px 1px;
}

#menu_hamb_ico {
 display:none;
 position:fixed;
 top:48px;
 right:10px;
 width:30px;
 height:30px;
 cursor:pointer;
}

#menu_resp {
 display:none;
 position:absolute;
 top:118px;
 left:0;
 width:100%;
 text-align:center;
 background-color:#f0f1f3;
 border-bottom:1px solid var(--cor-escura);
 padding:10px 20px 15px;
 z-index:9;
}

.menuitem_resp {
 display:inline-block;
 width:100%;
 background-color:var(--cor-escura);
 border-radius:5px;
 padding:8px 5px;
 margin-bottom:10px;
 font-size:1em;
 font-weight:500;
 color:#fff;
 cursor:pointer;
}

.menuitem_resp:hover {
 color:#fff;
}

.rodape {
 width:100%;
 background-color:var(--cor-escura);
 padding:20px;
 text-align:center;
 color:#fff;
}

.rodmenu {
 display:inline-block;
 margin:5px 25px 0;
 font-weight:500;
}

.rodlogo {
 width:100%;
 max-width:170px;
 margin:30px 0 20px;
}

.rodredes {
 display:inline-block;
 width:35px;
 height:35px;
 border-radius:20px;
 background-color:var(--cor-dois);
 text-align:center;
 margin:0 5px;
 padding-top:9px;
 transition:0.3s;
}

.rodredesico {
 width:17px;
}

.rodredes:hover {
 background-color:#fff;
}

.rodbox1, .rodbox2 {
 flex:1;
 padding:50px 10px 20px;
 text-align:center;
}

.rodico {
 display:inline-block;
 vertical-align:top;
 width:25px;
}

.rodtxt {
 display:inline-block;
 text-align:left;
 padding-left:10px;
 font-size:1.05em;
 font-weight:500;
 line-height:1.35em;
}

.inweb {
 width:100%;
 background-color:var(--cor-base);
 text-align:center;
 padding:12px;
 color:rgba(255,255,255,0.5);
 font-size:0.8em;
 font-weight:500;
 letter-spacing:0.5px;
}

.floatwhats {
 position:fixed;
 bottom:15px;
 right:25px;
 z-index:9;
 cursor:pointer;
 transition:0.3s;
}

.floatwhats_img {
 width:60px;
}

.floatwhats:hover {
 bottom:22px;
}

/*** INTERNAS ***/

.titulo {
 width:100%;
 background-color:var(--cor-base);
 margin-top:170px;
 padding:50px 20px;
 text-align:center;
 font-family:barlow;
 font-size:2em;
 font-weight:600;
 color:#fff;
 line-height:1em;
}

.centro {
 width:100%;
 max-width:1300px;
 margin:0 auto;
 padding:50px 15px;
 font-size:1.1em;
 line-height:1.4em;
}

.radio-col1 {
 flex:1;
 padding-right:50px;
 font-size:0.9em;
 line-height:1.2em;
}

.radio-col2 {
 flex:2;
}

.radio-box {
 flex:1;
 margin:15px;
 padding:20px;
 border:1px solid var(--cor-base);
}

.ctt-dados {
 flex:2;
 padding-right:70px;
 line-height:1.2em;
}

.ctt-form {
 flex:3;
}

.st-image-share-buttons {
 display:none !important;
}

/***********/

@media screen and (max-width:1280px) {
 .topo {
  height:120px;
 }
 .topo_logo {
  max-width:120px;
  min-width:120px;
 }
 .logo {
  max-width:100px;
 }
 .topo_midias {
  max-width:30px;
  min-width:30px;
  padding:6px 5px 0 0;
 }
 .topo_bola {
  width:25px;
  height:25px;
  margin:1px 0;
  padding-top:5px;
 }
 .topo_direito {
  padding-right:15px;
  padding-top:18px;
 }
 .topo_player {
  max-width:660px;
  margin-left:10px;
 }
 .menu {
  padding-top:15px;
 }
 .menuitem {
  padding:0 5px;
  font-size:1em;
 }
 .menubola {
  width:7px;
  height:7px;
  margin:0 2px 1px;
 }
 .titulo {
  margin-top:120px;
 }
}

@media screen and (max-width:1150px) {
 .rodmenu {
  display:none;
 }
 .rodlogo {
  margin:0 0 20px;
 }
 .rodbox1 {
  flex:none;
  display:inline-block;
  width:100%;
  padding:40px 10px 0;
 }
 .centro {
  padding:35px 15px;
 }
 .radio-box {
  margin:10px;
 }
 .ctt-dados {
 padding-right:30px;
 }
}

@media screen and (max-width:850px) {
 .topo_direito {
  padding-right:55px;
  padding-top:35px;
 }
 .topo_player {
  max-width:400px;
 }
 .menu, .topo_midias {
  display:none;
 }
 .topo_bola {
  width:35px;
  height:35px;
  margin:0 5px;
  padding-top:9px;
 }
 .topo_ico {
  width:18px;
 }
 #menu_hamb_ico {
  display:inline-block;
 }
 .rodape {
  padding:0 20px;
 }
 .rodbox2 {
  padding:30px 10px;
 }
 .rodtxt {
  padding-left:6px;
  font-size:0.9em;
 }
 .inweb {
  text-align:left;
  font-size:0.75em;
 }
 .floatwhats {
  bottom:5px;
  right:10px;
 }
 .floatwhats_img {
  width:45px;
 }
 .floatwhats:hover {
  bottom:5px;
 }
 .titulo {
  padding:40px 20px;
  font-size:1.6em;
 }
 .centro {
  padding:25px 15px;
  font-size:1em;
 }
 .ctt-dados {
  flex:none;
  display:inline-block;
  width:100%;
  padding:50px 5px 20px;
 }
 .ctt-form {
  order:-1;
  flex:none;
  display:inline-block;
  width:100%;
  padding:0 5px;
 }
}

@media screen and (max-width:700px) {
 .rodape {
  padding:0 20px 15px;
 }
 .rodbox1 {
  padding:30px 10px 15px;
 }
 .rodbox2 {
  flex:none;
  display:inline-block;
  width:100%;
  padding:10px 0;
 }
 .radio-col1 {
  flex:none;
  display:inline-block;
  width:100%;
  padding:0 0 25px;
  font-size:1em;
 }
 .radio-col2 {
  flex:none;
  display:inline-block;
  width:100%;
 }
 .radio-box {
  flex:none;
  display:inline-block;
  width:45%;
  padding:15px;
 }
}

@media screen and (max-width:600px) {
 .topo {
  height:95px;
 }
 .topo_logo {
  max-width:70px;
  min-width:70px;
  padding:52px 0 0 10px;
 }
 .logo {
  display:none;
 }
 .logoresp {
  display:inline-block;
  max-width:70px;
 }
 .playerbox {
  height:45px;
  margin:0 auto;
  border-radius:0;
  border:0;
  outline:0;
  position:fixed;
  top:0;
  left:0;
  padding:7px 5px 0;
 }
 .playerbot1 {
  margin:0 3px;
  padding-top:6px;
 }
 .playerbot2 {
  display:none;
 }
 .playerico {
  width:18px;
 }
 .playertxt {
  padding:0 6px;
  margin-top:-2px;
  font-size:1em;
  line-height:15px;
 }
 #menu_hamb_ico {
  top:55px;
 }
 #menu_resp {
  top:92px;
  padding:10px 12px 15px;
 }
 .titulo {
  margin-top:95px;
  padding:30px 20px;
  font-size:1.4em;
 }
 .centro {
  font-size:0.95em;
 }
 .radio-box {
  width:90%;
  margin:10px 0;
 }
}

@media screen and (max-width:400px) {
 .inweb {
  padding-right:80px;
 }
}
