/* CSS Document */
body {	
	font: 12px/22px 'Roboto-Medium', Verdana, "sans-serif";
	color: #222222;
	background: #FFFFFF;
}
@font-face {
  font-family:'Roboto-Medium';
  src: url("typography/BeVietnamPro-Regular.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family:'SourceSansPro-Regular';
  src: url( "typography/SourceSansPro-Regular.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}
/*---------------------------------------------------------------------------*/
/*  Link Styles  */
/*---------------------------------------------------------------------------*/
a { color: #008BDF; }
a:hover {color: #022466;}
/*---------------------------------------------------------------------------*/
/*  Heading Styles  */
/*---------------------------------------------------------------------------*/
h1, 
h2, 
h3, 
h4 {
	font-family:'SourceSansPro-Regular', sans-serif;
}
h1 { font-size: 1.9em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.3em; }

h1 {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#253a90+0,ffffff+100 */
	background: -webkit-linear-gradient(left, #253a90 0%, #ffffff 100%);
	background: -o-linear-gradient(left, #253a90 0%, #ffffff 100%);
	background: linear-gradient(to right, #253a90 0%, #ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	color: #FFFFFF;
	font-weight: 600;
	position: relative;
	padding-bottom:20px;
	padding-top: 20px;
	padding-left: 0.5em;
	margin-bottom:40px;
	margin-top: 3px;
}
h1 small {
	color: #FFFFFF;
}
h1:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 33%;
	height: 3px;
	background-color:#D4FFB7;
}
h2{
	color: #AC44D1; 
	font-weight: 600;
	position: relative;
	padding-bottom:5px;
	margin-bottom: 10px;
}
h2:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 15px;
	height: 3px;
	background-color:#D4FFB7;
}
h3{
	color: #AC44D1; 
	padding-bottom:5px;
	margin-bottom: 10px;
}
/*---------------------------------------------------------------------------*/
/*  RESPONSIVE IMAGES  */
/*---------------------------------------------------------------------------*/
img{display:block; max-width:100%; height:auto;}
/*---------------------------------------------------------------------------*/
/*  MENU TOPO  */
/*---------------------------------------------------------------------------*/
#menu-topo-azul{
	background-color: #022466;  
	font-size: 1em;
	color: #FFFFFF;
	padding-top: 5px;
	padding-left: 6.5em;
	padding-right: 6.5em;
}
#menu-topo-azul-xs{
	background-color: #022466;  
	font-size: 1em;
	color: #FFFFFF;
	padding-top: 3px;
}
.btn-restrita-topo {
			font-weight: 600;
		}
		.btn-restrita-topo {
			color: #FFFFFF;
			text-decoration: none;
			text-align: center;
			margin: 0;
			background-color: transparent;
			border: 1px solid #FFFFFF;
		}
		.btn-restrita-topo:hover{
			color:#0072BC;
			text-decoration: none;
			text-align: center;
			margin: 0;
			background-color: #FFFFFF;
			border:1px solid #FFFFFF;
		}
#topo-clubes-restrita img{
	max-width: 100px;
	max-height: inherit;
	padding-bottom: 10px;
	padding-top: 10px;
}
/*---------------------------------------------------------------------------*/
/*  NAVBAR - MENU PRINCIPAL  */
/*---------------------------------------------------------------------------*/
#nav {
	font-size: 1.4em;
	padding-bottom: 1px;
	padding-top: 0.2em;
	margin-bottom: 1px;
	z-index: 999;
}
#nav.navbar-default {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#008bdf+0,022466+100 */
	background: -webkit-linear-gradient(#008bdf 0%, #022466 100%);
	background: -o-linear-gradient(#008bdf 0%, #022466 100%);
	background: linear-gradient(#008bdf 0%, #022466 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	border-top: 2px solid #D4FFB7;
	border-bottom: 0;
	border-left: 0;
	border-right: 0;
	border-radius: 0;
	display: flex !important;
	justify-content: center !important;
}
		#nav.navbar-default a {
			background-color: transparent;
			color: #FFFFFF;
			border-bottom: 3px solid transparent;
			font-weight: normal;
		}
		#nav.navbar-default a:hover {
			color:#FFFFFF;
			border-bottom: 3px solid #D4FFB7;
			font-weight: normal;
		}
		#nav.navbar-default .navbar-toggle {
			border:1px solid  #F5F5F5;
			background-color: transparent;
		}
		#nav.navbar-default .navbar-toggle:hover {
			border:1px solid  #D4FFB7;	
			background-color: transparent;
		}		
		#nav.navbar-default .navbar-toggle span {
			background-color:  #F5F5F5;
		}
		#nav.navbar-default .navbar-toggle:hover span {
			border:1px solid  #D4FFB7;
			background-color:transparent;
		}
		#nav.navbar-default .navbar-collapse {
			border:none;
			text-align: center;
		}
		.navbar-toggle{
			position: relative;
			float: none;
			margin: 0 auto !important;
		}
.affix {
      top: 0;
      width: 100%;
      z-index: 9999 !important;
  }
.affix + .container-fluid {
	  width: 100%;
  }
/*---------------------------------------------------------------------------*/
/*  FOOTER  */
/*---------------------------------------------------------------------------*/
#rodape {
	background-color: #022466;
	border-bottom: 1px solid #D4FFB7;
	border-right: none;
	border-left: none;
	color: #FFFFFF;
	margin-top: 25px;
}
#rodape p a {
	color: #FFFFFF;
	text-decoration: none;
}
#rodape p a:hover {
	color:#D4FFB7;
	text-decoration: none;
	font-weight: normal;
}
#rodape li a {
	color: #FFFFFF;
	text-decoration: none;
}
#rodape li a:hover {
	color:#D4FFB7;
	text-decoration: none;
	font-weight: normal;
}
#rodape h3 {
	color: #D4FFB7;
	position: relative;
	font-weight: 500;
	text-transform: uppercase;
	border-bottom: 1px dotted #D4FFB7;
}
#rodape h3:after {
	content: "";
	position: absolute;
	left:0;
	bottom: -1px;
	width: 5em;
	height: 2px;
	background-color:#D4FFB7;
}
.footer-fa a{
	color: #FFFFFF;
	text-decoration: none;
}
.footer-fa a:hover {
	color:#D4FFB7;
	text-decoration: none;
}
.aza{
	font-size: 0.8em;
	font-weight: 600;
	color:#024959;
}
.aza a{
	color: #024959;
	font-weight: 600;
	text-decoration: none;
}
.aza a:hover{
	color: #FF8000;
	font-weight: 600;
	text-decoration: none;
}
.copy{
	font-size: 0.8em;
	color: #666666;
	font-style: italic;
}
/*---------------------------------------------------------------------------*/
/*  INDEX  */
/*---------------------------------------------------------------------------*/
#topo-inicial{
	background: -webkit-linear-gradient(#008bdf 0%, #022466 100%);
	background: -o-linear-gradient(#008bdf 0%, #022466 100%);
	background: linear-gradient(#008bdf 0%, #022466 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	border-top: 2px solid #D4FFB7;
	border-bottom: 0;
	border-left: 0;
	border-right: 0;
	border-radius: 0;
}
#form-index{
	border: 2px solid #022466;
	border-radius: 10px;
	padding-bottom: 20px;
	padding-top: 20px;
	margin-top: 20px;
	margin-bottom: 10px;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
	-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
}
.btn-degrade{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#008bdf+0,022466+100 */
	background: -webkit-linear-gradient(#008bdf 0%, #022466 100%);
	background: -o-linear-gradient(#008bdf 0%, #022466 100%);
	background: linear-gradient(#008bdf 0%, #022466 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	border: 2px solid #022466;
	border-radius: 100px;
	color: #FFFFFF;
}
.btn-degrade:hover{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#022466+0,008bdf+100 */
	background: -webkit-linear-gradient(#022466 0%, #008bdf 100%);
	background: -o-linear-gradient(#022466 0%, #008bdf 100%);
	background: linear-gradient(#022466 0%, #008bdf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	border: 2px solid #022466;
	border-radius: 100px;
	color: #FFFFFF;
}
/*---------------------------------------------------------------------------*/
/*  RESPONSIVE MENU  */
/*---------------------------------------------------------------------------*/
/* Breakpoint para telas menores que 1280px - Toggle habilitado */
@media (max-width: 1279px) {
  .navbar-header {
      float: none; /* Remove a flutuação */
  }
  .navbar-left,.navbar-right {
      float: none !important; /* Remove a flutuação de ambos os lados */
  }
  .navbar-toggle {
      display: block; /* Exibe o botão toggle */
  }
  .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
      display: none!important; /* Esconde o menu quando colapsado */
  }
  .navbar-nav {
      margin-top: 7.5px;
  }
  .navbar-nav>li {
      float: none; /* Remove flutuação dos itens do menu */
  }
  .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .collapse.in {
      display: block !important; /* Exibe o menu quando expandido */
  }
}

/* Breakpoint para telas de 1280px ou mais - Toggle desabilitado, menu aberto */
@media (min-width: 1280px) {
  .navbar-toggle {
      display: none; /* Esconde o botão toggle */
  }
  .navbar-collapse.collapse {
      display: block !important; /* Exibe o menu completo */
  }
}

/* Breakpoint para telas menores que 768px - Tamanho XS (modificado) */
@media (max-width: 767px) {
  .navbar-nav {
      margin-top: 0;
  }
  .navbar-nav>li {
      float: none; /* Remove a flutuação dos itens */
      width: 100%; /* Exibe os itens em bloco (100% de largura) para XS */
  }
  .navbar-nav>li>a {
      padding-top: 8px;
      padding-bottom: 8px;
  }
  .navbar-collapse {
      border-top: none;
      box-shadow: none;
  }
}

/* Forçar XS a partir de 768px */
@media (min-width: 768px) and (max-width: 991px) {
  .navbar-nav {
      float: none; /* Garantir que não haja flutuação de itens */
      width: 100%; /* Aplicar largura total */
  }
  .navbar-nav>li {
      width: 100%; /* Força os itens a se comportarem como xs */
  }
  .navbar-nav>li>a {
      padding-top: 8px;
      padding-bottom: 8px;
  }
}