p {color:black;text-align:justify;font-family:Verdana,Geneva,sans-serif; font-size:14px}
p.ic {color:rgb(50,50,50); font-weight:bold;}
p.destaque {background-color:seashell;padding: 10px}
h1 {color:rgb(0,80,100);font-family:Georgia,serif;font-variant:small-caps;height:70px}
h4 {font-family:Verdana,Geneva,sans-serif;font-size:18px}
h6 {font-family:Georgia,serif;font-variant:small-caps;font-size:16px;text-align:center}
ol {font-family:Verdana,Geneva,sans-serif;color:black}
a {font-family:Verdana,Geneva,sans-serif;color:rgb(0,120,120)}
a.nomes {font-weight:bold;}
.header {background:url(./imagens/imagem_noball.jpg) no-repeat center; background-size:cover; height:442px}/*; border-top-left-radius:10px; border-top-right-radius:10px}*/
.menu {margin-left:0px;padding:15px 0;background-color:rgb(0,90,120); background-size:cover; height:20px;margin-bottom:60px}/* TROCAR QUANDO COLOCAR BUSCA margin-bottom:20px;}*/
.menu a {color:rgb(220,220,220);font-family:Georgia,serif;text-transform:uppercase; font-weight:bold; float:left; display:block; width:14.2857%; /*width:12.5%;*/ text-align:center;}
/*.menubot {padding:8px 0;background-size:cover}
.menubot a {color:black;font-family:Georgia,serif;text-transform:uppercase; font-weight:bold; float:left; display:block; width:14.2857%; text-align:center;font-size:10px}*/
.logo {padding-top:60px;padding-bottom:30px}
.logo a {float:left; display:block; width:25%; text-align:center}
.language {position:relative;top:12px;float:right;padding-right:20px}
.language a {color:black}
.danilo {color:white;font-size:10px;text-align:right;margin-top:158px;margin-right:20px}
.busca {width:auto;line-height:0px}
.gsc-results-wrapper-visible {line-height:20px}
.balao {background-color:rgb(200,220,215); border-radius:10px; padding-top:10px;}

#bolinhascss {
  /*padding: 160px 300px 0px 300px;
  width: 599;*/
  height: 65px;
  padding-top: 160px;
  padding-left: 20%;
}
.circulo {
  width: 65px;
  height: 65px;
  border-radius: 100%;
  display: inline-block;
  margin-right: 20px;
  opacity: .4;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -ms-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
  -webkit-box-shadow: 1px 1px 2px 1px rgba(100,100,100,.9);
  box-shadow: 1px 1px 2px 1px rgba(100,100,100,.9);
}
.circulo:hover {opacity: 1;}
.boian {
  background: url('./imagens/canal.jpg');
  background-position: -270px -375px;
  background-size: 1066.67px 800px;
  background-repeat: no-repeat;
}
.alphan {
  background: url('./imagens/alpha.jpg');
  background-position: -10px 0px;
  background-size: 120px 82.5px;
  background-repeat: no-repeat;
}
.glidern {
  background: url('./imagens/slocum_glider.jpg');
  background-position: -30px -5.5px;
  background-size: 118.4615px 70.7692px;
  background-repeat: no-repeat;
}
.ondasn {
  background: url('./imagens/ondas.jpg');
  background-position: -50px;
  background-size: 124.4444px 66.6667px;
  background-repeat: no-repeat;
}
.vespamn {
  background: url('./imagens/pirajuba.jpg');
  background-position: -22px;
  background-size: 103.6667px 72px;
  background-repeat: no-repeat;
}
.vantsn {
  background: url('./imagens/vants.jpg');
  background-position: -5px 0px;
  background-size: 76.5px 65px;
  background-repeat: no-repeat;
}
.vien {
  background: url('./imagens/vie.jpg');
  background-position: -9px 0px;
  background-size: 76.5px 65px;
  background-repeat: no-repeat;
  margin-right: 0px;
}

.bolinha {padding-top:170px;width:375px;margin:auto}
/* .bolinha a {margin-right:23.5px;display:inline-block} */
.bolinha a {display:inline-block}
/*.pe {text-align:center}
.pe p {text-align:center;font-size:x-small}
.pe a {color:rgb(0,80,100)}*/
.container {
	background: white;
	border-radius: 10px;
	margin-top:23px;
	margin-bottom:23px;
	box-shadow: 0px 0px 7px 0px rgb(220,240,250)
}
@media (max-width: 512px) {
.fig-inicio {height: 250px !important;}
.fig-proj {height: 87px !important;}
.danilo {margin-top: 85px !important;}
.bolinha {margin-top: -90px !important; width: 235px !important}
.proj {width: 31px !important; height: 31px !important; background-size:232px !important;}
.alpha {background-position: -50.7px !important;}
.glider {background-position: -101.55px !important;}
.aranha {background-position: -151.55px !important;}
.pirajuba {background-position: -202.5px !important;}
}

@media (max-width: 724px) {
  .menu {height: 170px}
  .menu a {width: 100%}
}

/* estilo para todas as bolinhas */
.proj{
  background: url('./imagens/bolinhas_semfundo.png') no-repeat; display: block; width: 59px; height: 59px; opacity: .4;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -ms-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
/* bolinha ativa */
.ativo {opacity: 1;}
/* quando passar o mouse por cima */
.proj:hover {opacity: 1;}
/* Aqui tem um estilo para cada bolinha, para ajustar a posição do fundo */
.boia {background-position: 0;}
.alpha {background-position: -100px;}
.glider {background-position: -200px;}
.aranha {background-position: -299px;}
.pirajuba {background-position: -399px;}
.vants {backgroud-position: -50px;}

/* estilo dos gráficos */
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.line {
  fill: none;
  stroke: coral;
  stroke-width: 1.5px;
}
.linet {
  fill: none;
  stroke: mediumspringgreen;
  stroke-width: 1.5px;
}
.linep {
  fill: none;
  stroke: darkturquoise;
  stroke-width: 1.5px;
}
.linem {
  fill: none;
  stroke: lightseagreen;
  stroke-width: 2.5px;
}
.lineprev {
  fill: none;
  stroke: slategray;
  stroke-width: 1.5px;
}
.liner {
  fill: none;
  stroke: gold;
  stroke-width: 1.5px;
}
.lineppt {
  fill: none;
  stroke: cadetblue;
  stroke-width: 1.5px;
}
.graticule {
  fill: none;
  stroke: #777;
  stroke-width: .5px;
  stroke-opacity: .5;
  stroke-dasharray: 10,10;
}
.place{
  stroke: #444;
  fill: #444;
}
.place-label {
  text-anchor: end;
  font-family:Verdana,Geneva,sans-serif;
  font-size: 12px;
}

.menumap {
 position:absolute;
 z-index:1000;
 top:10px;
 right:10px;
 box-shadow: 0 1px 5px rgba(0,0,0,0.65);
 border-radius: 4px;
 background:#fff;
 width:200px;
}
.menumap a {
 font-family:Verdana,Geneva,sans-serif;
 font-size:12px;
 color:black;
 text-decoration:none;
 text-align:center;
 display:block;
 padding-bottom:10px; 
 padding-top:10px; 
 border-bottom:1px solid #ccc; 
}
.menumap a:first-child {
 border-top-left-radius: 4px;
 border-top-right-radius: 4px;
}
.menumap a:last-child {
 border-bottom-left-radius: 4px;
 border-bottom-right-radius: 4px;
 border-bottom:none;
}
.menumap a:hover {
  background:ivory;/*seashell;*/
  /*color:#404040;*/
}
.menumap a.active {
 background:darkturquoise;/*bisque;*/
 font-weight: bold;
}
.menumap a.active:hover {
  opacity:.7;
}