@charset "utf-8";
/* CSS Document */

/*MOINHOS DO MAR*/
/*v3.2*/


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

----------------- GERAL -----------------
////////////////////////////////////////*/

/*---------------------------/ 
   Estrutura
------------------------/
#sp-top-bar
#sp-header
#sp-0-slider *(criar)
#sp-page-title
#sp-main-body
#sp-0-footholder *(criar)
#sp-footer

/*---------------------------/ 
   Cores
------------------------/
rgba(100,189,255,1.00)  - body background
rgba(255,255,255,0)  - #sp-main-body background

#666666  - text (p, li)
#13B5EA  - h3
#041B38  - h6
#3b3b3b  - a
#13B5EA  - a:hover
#13B5EA  - a:active
#13B5EA  - a:focus

#6C6C6C  - Cinza escuro
#808080  - Cinza claro

#2B3B4C  - #footer
#ffffff; - #sp-sk-footholder

#1f1f1f  - links menu
#14B5EA  - links menu:hover
#14B5EA  - links menu:active
#14B5EA  - links menu:active + hover
#14B5EA  - links menu:focus

#1f1f1f  - links 2ºnivel menu
#6C6C6C  - links 2ºnivel menu:hover
#6C6C6C  - links 2ºnivel menu:active
#6C6C6C  - links 2ºnivel menu:active + hover
#6C6C6C  - links 2ºnivel menu:focus

#041B38  - offcanvas toogler
#13B5EA  - offcanvas toogler over
#5ff4c2  - overlay

#1f1f1f  - links offcanvas
#14B5EA  - links offcanvas:hover
#14B5EA  - links offcanvas:active
#14B5EA  - links offcanvas:active + hover
#14B5EA  - links offcanvas:focus

#1f1f1f  - links 2ºnivel offcanvas
#6C6C6C  - links 2ºnivel offcanvas:hover
#6C6C6C  - links 2ºnivel offcanvas:active
#6C6C6C  - links 2ºnivel offcanvas:active + hover
#6C6C6C  - links 2ºnivel offcanvas:focus

#009ddc  - Forms theme color
*/

/*---------------------------/ 
   Fonts
------------------------*/
/*
font-family: Roboto, Roboto Condensed, sans-serif;
font-family: 'Open Sans', sans-serif;
Light
Light Italic
Regular
Regular Italic
Semi-Bold
Semi-Bold Italic
Bold
Bold Italic
Extra-Bold
Extra-Bold Italic

font-family: 'Lora', serif;
Regular
Regular Italic
Bold
Bold Italic

font-family: 'Sintony', sans-serif;
Regular
Bold

font-family: 'Lato', sans-serif;
Thin
Thin Italic
Light
Light Italic
Regular
Regular Italic
Bold
Bold Italic
Black
Black Italic

font-family: 'Raleway', sans-serif;
Thin
Thin Italic
Extra-Light
Extra-Light Italic
Light
Light Italic
Regular
Regular Italic
Medium
Medium Italic
Semi-Bold
Semi-Bold Italic
Bold
Bold Italic
Extra-Bold
Extra-Bold Italic
Black
Black Italic
*/

*{
	margin: 0px;
	padding: 0px;	
}
/*html{} */
/*body{} */
/*Na secção Stiky Footer*/
.sp-default-log{ display:none;}


/*---------------------------/ 
   links
------------------------*/
a{
	color: #3B3B3B;
}
a:hover, a:focus, a:active {
	color:#13B5EA;
}
/*a:visited {
	color:darkturquoise;
}*/
a, a:hover, a:focus, a:active a:visited {
    text-decoration: none !important;
	outline: 0;
}
a {
    -webkit-transition: color 200ms, background-color 200ms;
    transition: color 200ms, background-color 200ms;
}
/*---------------------------/ 
   lists
------------------------*/
ul li{
	list-style-type: none;
    margin: 0;
    padding: 0;
}
.txt ul, .txt ol {
    padding-left: 15px;
	
}
.txt ul li{
	list-style-type: disc;
}
.txt ul li, .txt ol li {
	margin-top: 8px;
	margin-left: 15px;
    padding-left: 8px;
	font-size: 14px;
	font-weight: 400;
	color: #666666;
	font-family: 'Sintony', sans-serif; 
	line-height: 1.6;
}

body, p, h1, h2, h3, h4, h5, h6{
	font-family: 'Lato', sans-serif /*!important*/; 
	line-height: 1.1;
}
body{font-weight:300; 
}
p, .qx p {
	font-size: 14px; /*body bootstrap.min:5*/
	font-weight: 400; /*body inline:2*/
	letter-spacing: inherit;
	word-spacing: inherit;
	line-height: 26px; /*body template:1744*/
	margin: 0 0 10px 0; /*p bootstrap.min*/
	color: #666666;
	}
h1, .qx h1{ 	
	font-size: 30px;
	font-weight:700;
	margin: 20px 0 10px 0;
	}
h2, .qx h2{ 
	font-size: 30px;
	font-weight:300; 
	margin: 20px 0 10px 0;
	}
h3, .qx h3{
	font-size: 25px; 
	font-weight:normal;
	margin: 20px 0 10px 0;
	color: /*#13B5EA*/ #13B5EA;
	}
h4, .qx h4{ 
	font-size: 20px;
	font-weight:700; 
	margin: 15px 0 10px 0;
	}
h5, .qx h5{
	font-size: 20px;
	font-weight:400;
	margin: 15px 0 10px 0;
	}
h6, .qx h6{
	font-size: 16px; 
	font-weight:600;
	margin: 15px 0 10px 0;
	color: #041B38;
	}
hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border-top-width: 0px;
    border-top-style: none;
    border-top-color: currentcolor;
    border-top: 1px solid #DDD;
	height: 0;
}
.qx{
	padding: 0 0px 0 0px;
}

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

_______ TEMPLATE - @ MEDIA-QUERIES _______
+////////////////////////////////////////*/


/*---------------------------/ 
   < 319px
------------------------*/
@media (max-width: 319px) {
  .layout-boxed .body-innerwrapper {
	max-width: 100%;
	}
  #sp-header[style]{ /*força alteração de CSS inline-style*/
	max-width: 100% !important;
    }
  .container {
    width: 100%;
    }
  #sp-main-body .container {
	float: left;
    }
  .mod-languages-inline{
	display: none !important;
	}
}
/*---------------------------/ 
   320px >
------------------------*/
@media (min-width: 320px) {
  .layout-boxed .body-innerwrapper {
	max-width: 100%;
	}
  #sp-header[style]{ /*força alteração de CSS inline-style*/
	max-width: 100% !important;
    }
  .container {
    width: 100%;
    }
  #sp-main-body .container {
	float: left;
    }
  .mod-languages-inline{
	display: none !important;
	}
}
/*---------------------------/ 
   480px >
------------------------*/
@media (min-width: 480px) {
  .layout-boxed .body-innerwrapper {
	max-width: 100%;
	}
  #sp-header[style]{ /*força alteração de CSS inline-style*/
	max-width: 100% !important;
    }
  .container {
    width: 100%;
    }
  #sp-main-body .container {
	float: left;
    }
  .mod-languages-inline{
	display: none !important;
	}
}
/*---------------------------/ 
   768px >
------------------------*/
@media (min-width: 768px) {
  .layout-boxed .body-innerwrapper {
	max-width: 100%px;
	}
  #sp-header[style]{ /*força alteração de CSS inline-style*/
	max-width: 100%px !important;
    }
  .container {
    width: 100%px;
    }
  #sp-main-body .container {
	  float:none;
    }
	.mod-languages-inline{
		display: none !important;
	}
}
/*---------------------------/ 
   992px >
------------------------*/
@media (min-width: 992px) {
  .layout-boxed .body-innerwrapper {
	max-width: 992px;
	}
  #sp-header[style]{ /*força alteração de CSS inline-style*/
	max-width: 992px !important;
    }
  .container {
    width: 970px;
    }
  .mod-languages-inline{
	display: table !important;
	}
}
/*---------------------------/ 
   1170px >
------------------------*/
@media (min-width: 1170px) {
  .layout-boxed .body-innerwrapper {
	max-width: 1170px;
	}
  #sp-header[style]{ /*força alteração de CSS inline-style*/
	max-width: 1170px !important;
    }
  .container {
    width: 1100px;
    }
  .mod-languages-inline{
	display: table !important;
	}
}
/*/////////////////////////////////////////

_________ QUIX - @ MEDIA-QUERIES _________
+////////////////////////////////////////*/

/*---------------------------/ 
   < 319px
------------------------*/
@media (max-width: 319px) {
  .sppb-row-container {
	width: 100% !important;
    }
}
/*---------------------------/ 
   320px >
------------------------*/
@media (min-width: 320px) {
  .qx-container {
	width: 100% !important;
    }
}
/*---------------------------/ 
   480px >
------------------------*/
@media (min-width: 480px) {
  .qx-container {
	width: 100% !important;
    }
}
/*---------------------------/ 
   768px >
------------------------*/
@media (min-width: 768px) {
  .qx-container {
    width: 750px !important;
    }
}
/*---------------------------/ 
   992px >
------------------------*/
@media (min-width: 992px) {
  .qx-container {
    width: 970px !important;
    }
}
/*---------------------------/ 
   1170px >
------------------------*/
@media (min-width: 1170px) {
  .qx-container {
    width: 1070px !important;
    }
}

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

----------- PÁGINAS DO SITE ------------
////////////////////////////////////////*/

/*---------------------------/ 
   Artigos oficiais JOOMLA
------------------------*/
article.item{
	padding-top: 50px;
}


/*_________________________________________________________________________
///////////////////////////////////////////////////////////////////////////

-------------------------------- LAYOUT ----------------------------------
////////////////////////////////////////////////////////////////////////*/


/*+++++++++++++++++++++++++++++++++++++++/
                  BODY 
++++++++++++++++++++++++++++++++++++++++*/

body{
    background-color: #F3F3F3;
}
#sp-main-body {
	background-color: rgba(255,255,255,0);
}
/*Retirar o padding do template original*/
#sp-main-body{
	padding-top: 0px !important;
	padding-bottom: 0px !important;
}
.layout-boxed .body-innerwrapper {
    margin: 0 auto;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
/*+++++++++++++++++++++++++++++++++++++++/
             Content area
++++++++++++++++++++++++++++++++++++++++*/
/*#sp-main-body .container{
	margin-top: 50px;
	margin-bottom: 50px;
}
#sp-main-body .container .qx{
	margin-top: -50px;
	margin-bottom: -50px;
}*/


/*+++++++++++++++++++++++++++++++++++++++/
            STIKY FOOTER
++++++++++++++++++++++++++++++++++++++++*/
/* Para além de colar o footer em baixo é necessário criar uma section (div) 
que bloqueie o footer de subir por cima do conteúdo quando a janela de browser está piquena.
Criar uma nova secção no layout Hlx3 "sk-footholder" o Hlx3 converte em "sp-sk-footholder"
Opcional criar uma nova Module Position "0-footholder". 
IMPORTANTE - Criar um modulo novo do tipo"custom" e inserir o código <div><p></p></div>
*/
html{
    height:100%;
	direction: ltr;
} 
body{
    margin:0;
    padding:0;
    height:100%;/*esta opção desconfigura o "overlay" no offcanvas, para corrigir é necessário mudar a sua posição de absolute para fixed (linha 969)*/
}
.body-wrapper{
    position:relative;
    min-height:100%;
    width: 100%; 
    margin: auto;
}
#sp-main-body {
    margin: auto;
    width: 100%;
}
#sp-footer, #sp-sk-footholder {
	min-height:100px;
	width: 100%;	
}
#sp-sk-footholder {
    width: 100%;
    margin: auto;
    padding:0px;
    color: #ffffff;
	background-color: none;
	float: left;
}
#sp-footer {
    position: absolute;
    bottom:0;
	z-index: 999;
    background: none; /*era preset hlx3*/
    padding: 20px 0 0px 0;
	background-color: #2B3B4C;
	background-image: url(/img/footer.png);
	background-repeat: repeat;
}

/*+++++++++++++++++++++++++++++++++++++++/
          Hlx3 - SP-TOP-BAR
++++++++++++++++++++++++++++++++++++++++*/

#sp-top-bar {
	/*display: none;*/
    background-color: #2B3B4C;
    color: #999999;
    padding: 8px 0;
}
.entry-header {
    /*position: relative;
    margin-bottom: 30px;*/
	display: none;
}

/*+++++++++++++++++++++++++++++++++++++++/
         Hlx3 - SP-HEADER
++++++++++++++++++++++++++++++++++++++++*/
/*Controlar a altura da DIV Header com o tamanho da DIV Logo*/
/*A class "mod-languages-inline" foi criada para o modulo "mod-languages"
para diferenciar o modo horizontal do vertical*/
/* Alterar também #sp-0-slider (procurar)*/
#sp-header, #sp-header .logo, #sp-header .mod-languages-inline {
	height: 100px; 
}
.sp-megamenu-parent > li > a, #offcanvas-toggler{ 
	line-height: 100px; 
	/*margin-top: 0px;*/
}

#sp-header.menu-fixed-out{
    background: #FFF;
    /*Criar um gradiente de cor:*/
	/*background: -moz-linear-gradient(left, rgba(33,97,8,0.85) 0%, rgba(0,204,227,0.85) 100%); /* FF3.6-15 */
    /*background: -webkit-linear-gradient(left, rgba(33,97,8,0.85) 0%,rgba(0,204,227,0.85) 100%); /* Chrome10-25,Safari5.1-6 */
    /*background: linear-gradient(to right, rgba(33,97,8,0.85) 0%,rgba(0,204,227,0.85) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e600a9b6', endColorstr='#e600cce3',GradientType=1 ); /* IE6-9 */
    /*background-image: none;*/
    /*background-repeat: repeat;*/
    /*background-attachment: scroll;*/
    /*background-clip: border-box;*/
    /*background-origin: padding-box;*/
    /*background-position-x: 0px;*/
    /*background-position-y: 0px;*/
    /*background-size: auto auto;*/
	/*box-shadow: none;*/
	box-shadow: 0 3px 3px rgba(0,0,0,0.05);
	position: relative;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 99;
	
}
#sp-header.menu-fixed{
	background-color: #FFF !important;
    /*Criar um gradiente de cor:*/
	/*background: -moz-linear-gradient(left, rgba(33,97,8,1) 0%, rgba(0,204,227,1) 100%) !important; /* FF3.6-15 */
    /*background: -webkit-linear-gradient(left, rgba(33,97,8,1) 0%,rgba(0,204,227,1) 100%)!important; /* Chrome10-25,Safari5.1-6 */
    /*background: linear-gradient(to right, rgba(33,97,8,1) 0%,rgba(0,204,227,1) 100%)!important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e600a9b6', endColorstr='#e600cce3',GradientType=1 ); /* IE6-9 */
}


/*---------------------------/ 
   logotipo
------------------------*/
/*Controla o logo Hlx3"*/
#sp-header .logo {
    display: inline-block;
    display: table;
    -webkit-transition: all 0ms ease;
    transition: all 0ms ease;
    margin: 0;
}
#sp-header .logo a {
    -webkit-transition: color 400ms, background-color 400ms;
    transition: color 400ms, background-color 400ms;
}
#sp-header .logo a:hover {
    color:#5ff4c2;
	color: #6E6E6E !important; 	
}
.sp-megamenu-parent > li { 
	/*line-height: 50px; 
	margin-top: 0px;
	height: 90px;*/
}

/*---------------------------/ 
   Logo no formato texto
------------------------*/
/*Controla o logo quando este é texto Hlx3"*/
#sp-header .logo a {
    font-size: 22px;
	font-weight:600;
    line-height: 1;
    margin: 0;
    padding: 0;
    display: table-cell;
    vertical-align: middle;
	color: #121212;
}
/* "TRICK" Criar linha abaixo do header alinhada com as margens do texto" /
#sp-header .container{
    border-bottom: 1px solid #c3c3c3;
	position: relative;
}
#sp-header .container:before {
  content : "";
  position: absolute;
  left    : 0px;
  bottom  : -2px;
  height  : 1px;
  width   : 15px;  /* valor do padding /
  border-bottom:3px solid rgba(252,252,252,1.00);
}
#sp-header .container:after {
  content : "";
  position: absolute;
  right   : 0px;
  bottom  : -2px;
  height  : 1px;
  width   : 15px;  /* valor do padding /
  border-bottom:3px solid rgba(252,252,252,1.00);
}
/* end "TRICK"..............................................................*/





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

     MODULO_LINGUAS Dropdown 01
++++++++++++++++++++++++++++++++++++++++*/

/*-------------------------------/ 
   CORES Mod_LINGUAS dropdown
-----------------------------*/
/*No ".lang-block" menu, o background tem que ser 
atribuido na tag "li"e a cor do texto no link, tag "a"*/

/* ... BOTÃO NO ESTADO NORMAL */
#sp-menu .sp-dropdown ul.lang-block > li{
	background-color: #FFF;  
}
/* ... BOTÃO NO ESTADO NORMAL */
#sp-menu .sp-dropdown ul.lang-block > li > a{
	/*texto*/ color: #1A1A1A; 
}
/* ... BOTÃO NO ESTADO HOVER (cor botão)*/
#sp-menu .sp-dropdown ul.lang-block li:hover{
	background-color: none; /*base*/ 
}
/* ... BOTÃO NO ESTADO HOVER (cor link)*/
#sp-menu .sp-dropdown ul.lang-block li:hover > a{
	/*texto*/ color: #00AFEA; 
}
/*-------------------------------/ 
   MOD_LINGUAS menu 1º Nivel
-----------------------------*/
/*controlar a div sp-dropdown que contem as bandeiras*/
a.a-bandeira ~ div.sp-dropdown{
	width: 160px !important;
	;
}
/* COLOCAR UMA BANDEIRA JUNTO AO TÍTULO DO MENU ("Bandeira" Pt-pt)
   Inserir a (img) da bandeirinha através da administração de menus do Joomla,
   através da aba (Link Type > Link Image), e atribuir uma class à anchor "a"
   ( Link Type > Link CSS Style) "a-bandeira" */
#sp-menu a.a-bandeira img{ 
	float: left;
	width: 21px; /*Tamanho das bandeiras quando inseridas no menu*/
	margin-right: 10px;
	filter: grayscale(15%);
	}
#sp-menu .sp-module{
	padding: 0px;
	}
/*-------------------------------/ 
   MOD_LINGUAS menu 2º Nivel
-----------------------------*/
#sp-menu div.mod-languages ul.lang-block img{
	opacity: 1;
	filter: grayscale(15%);
	width: 20px; /* tamanho original 22px*/
	}
/* POSICIONAR os btns das bandeirinhas */
#sp-menu ul.lang-block a{ 
	line-height: 0px;
	margin: 0px !important;
	padding: 0px !important;
	position: relative;
	}
/* DESATIVAR as setinhas definidas no template Hlx3*/
#sp-menu ul.lang-block a::before {
	display: none;
	}
/* colocar conteúdo à frente de cada bandeirinha do menu dropdown*/
#sp-menu ul.lang-block a::after{
    content: "";
	position:absolute;
	left: 35px;
	bottom: 0px;
	line-height: 15px;
	}
/* CSS para selecionar o tag "a" que contenha um determinado texto contido no seu link ([href*="/pt/"]) e atribuir-lhe um nome ("Português")*/
#sp-menu ul.lang-block a[href*="/pt/"]::after{
    content: "Português" !important;
}
#sp-menu ul.lang-block a[href*="/en/"]::after{
    content: "English" !important;
}
#sp-menu ul.lang-block a[href*="/fr/"]::after{
    content: "Français" !important;
}
#sp-menu ul.lang-block a[href*="/es/"]::after{
    content: "Español" !important;
}
#sp-menu ul.lang-block a[href*="/it/"]::after{
    content: "Italiano" !important;
}
#sp-menu ul.lang-block a[href*="/de/"]::after{
    content: "Deutsch" !important;
}

/* Introduz uma linha divisória entre as tags "li" das bandeiras*/
#sp-menu ul.lang-block > li {   
	border-bottom: 1px solid #e8e8e8;
	padding: 12px 5px !important;
	margin: 0px;
}
#sp-menu ul.lang-block > li:last-child {   
	border-bottom: none;	
}

/*-------------------------------/ 
   Bandeiras - Dropdown
------------------------*/
/*a*/.dropdown-toggle{
    line-height: 22px; 
    font-size: 0;
    color: transparent; 
 }
/*Para ajustar a altura da bandeirinha Mod-lang "dropdown"*/
#sp-menu a.a-bandeira img{ 
	margin-top: 40px;
}


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

     MODULO_LINGUAS inline 01
++++++++++++++++++++++++++++++++++++++++*/

/*-------------------------------/ 
   Bandeiras/Linguas - inline
-----------------------------*/
.mod-languages-inline { /*class atribuida no modulo para o diferenciar*/
	/*background-color: pink;*/
	display: table;
    float: right;
	/*margin-left: 8px;*/
	}
div.mod-languages ul.lang-inline {
	display: table-cell;
    vertical-align: middle;
	list-style: none;
	}
div.mod-languages ul.lang-inline li {
	/*background-color: aqua;*/
	display: inline-block !important;
	margin-left: 0px !important;
	margin-right: 0px !important;
	}
div.mod-languages ul.lang-inline li.lang-active {
    float: right;
    padding-left: 8px;
	}
div.mod-languages li.lang-active a {
	pointer-events: none; /* desativar o link e ponteiro */
	cursor: default;
	-moz-user-select: none; /* Firefox 2+*/
	-ms-user-select: none; /* IE 10+ */
	-webkit-user-select: none; /* Chrome, Opera, Safari */
	-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
	-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
	user-select: none; /* Standard syntax */
	}
div.mod-languages ul.lang-inline li.lang-active img:onclik{
	pointer-events: none;
	cursor: default;
	}
div.mod-languages ul.lang-inline li img {    
	opacity: 0.6;
	filter: grayscale(90%);
	width: 21px; /*Tamanho das bandeiras geral*/
	padding-top: 6px;
	}
div.mod-languages ul.lang-inline li img:hover{
	opacity: 1;
	filter: grayscale(15%);
	}
div.mod-languages ul.lang-inline li.lang-active img {
	opacity: 1;
	filter: grayscale(15%);
	}


/*/////////////////////////////////////////            
                 
----------------- MENUS ------------------
/////////////////////////////////////////*/


/*+++++++++++++++++++++++++++++++++++++++/
           MENU - TRANSIÇÕES
++++++++++++++++++++++++++++++++++++++++*/

#sp-menu a {
    -webkit-transition: color 400ms, background-color 400ms;
    transition: color 400ms, background-color 400ms;
	}
#sp-menu li {
    -webkit-transition: color 400ms, background-color 400ms;
    transition: color 400ms, background-color 400ms;
	}

/*+++++++++++++++++++++++++++++++++++++++/
           MENU - CORES 
++++++++++++++++++++++++++++++++++++++++*/
#sp-menu a {
    background-color: transparent;
	}

/*-------------------------------/ 
   CORES menu 1º Nivel
-----------------------------*/
/*Colocar os styles CSS no "li" em vez de "a" 
  para que os botões mantehnam o estado "hover" activo quando se arrasta o mouse para 
  os menus de subnível (um "li" que tem ">" um "a"*/

/* ... BOTÃO e texto NO ESTADO NORMAL*/
#sp-menu .sp-megamenu-parent li.sp-menu-item > a{
	color: #1f1f1f;  
	background-color: transparent;
	}
/* ... BOTÃO e texto NO ESTADO HOVER*/
#sp-menu .sp-megamenu-parent li.sp-menu-item:hover > a{
	color: #13B5EA; 
	background-color: transparent;
	}
/* ... BOTÃO e texto NO ESTADO ACTIVO*/
#sp-menu .sp-megamenu-parent li.sp-menu-item.active > a{
	color: #14B5EA; 
	background-color: transparent;
	}
#sp-menu .sp-megamenu-parent > li.sp-menu-item.active > a::before{ /*linha abaixo*/
	content: "";
    box-sizing: border-box;
    position: absolute;
    bottom: 0px;
    width: 100%;
    left: 0%;
    border: 2px solid #14B5EA;
	}
/* ... BOTÃO e texto NO ESTADO ACTIVO e HOVER*/
#sp-menu .sp-megamenu-parent li.sp-menu-item.active:hover > a{
	color: #14B5EA; 
	background-color: transparent;
	}
/*-------------------------------/ 
   CORES menu 2º Nivel
-----------------------------*/

/* ... BOTÃO e texto NO ESTADO NORMAL*/
#sp-menu .sp-dropdown li.sp-menu-item > a{
	color: #1f1f1f;
	background-color: transparent;
	}
/* ... BOTÃO e texto NO ESTADO HOVER*/
#sp-menu .sp-dropdown li.sp-menu-item:hover > a{
	color: #6C6C6C; 
	background-color: transparent;
	}
/* ... BOTÃO e texto NO ESTADO ACTIVO*/
#sp-menu .sp-dropdown li.sp-menu-item.active > a {
    color: #6C6C6C; 
	background-color: transparent;
}
/* ... BOTÃO e texto NO ESTADO ACTIVO e HOVER*/
#sp-menu .sp-dropdown li.sp-menu-item.active:hover > a {
    color: #6C6C6C; 
	background-color: transparent;
}


/*+++++++++++++++++++++++++++++++++++++++/
         MENU - GENERAL STYLE
++++++++++++++++++++++++++++++++++++++++*/

/*-------------------------------/ 
   STYLE menu de 1º Nivel
-----------------------------*/
#sp-menu .sp-megamenu-parent {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
  float: right;
  position: relative;
  z-index: 9999;
}
#sp-menu .sp-megamenu-parent >li {
    display: inline-block;
    position: relative;
    padding: 0 2px;
	margin-right: 20px;
}
#sp-menu .sp-megamenu-parent >li:last-child {
    display: inline-block;
    position: relative;
    padding: 0 2px;
	margin-right: 0px;
}
/* controlo sobre o 1º nível de btns */
#sp-menu .sp-megamenu-parent > li > a {
    display: inline-block;
    padding: 0 0px !important;
	font-size:13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;	
}
/*SETA APOS O TEXTO PARA MENUS DE NIVEL_0 COM DROPDOWN*/
#sp-menu .sp-megamenu-parent >li.sp-has-child > a:after,
#sp-menu .sp-megamenu-parent >li.sp-has-child > span:after {
  	font-family: "FontAwesome";
  	content: " \f107";
}
#sp-menu .sp-megamenu-parent .sp-module {
  	padding: 0px;
}
/*---------------------------------------------
... LINHA HORIZONTAL ABAIXO DO TEXTO DOS BOTÕES
*/
#sp-menu .sp-megamenu-parent li.sp-menu-item::after, 
#sp-menu .sp-megamenu-parent li.sp-menu-item::before {
	content: "";
	box-sizing: border-box;
	position: absolute;
	bottom: 0px;
	width: 0%;
	border-top: 0px solid #0D7DA7; /* forma uma linha para cima (ATENÇÃO, COM 0px NESTE MOMENTO NÃO MOSTRA NADA)*/
	border-bottom: 0px solid #0D7DA7; /* forma uma linha para baixo (ATENÇÃO, COM 0px NESTE MOMENTO NÃO MOSTRA NADA)*/
	transition: 0.2s ease-in;
}
#sp-menu .sp-megamenu-parent li.sp-menu-item::after {
	left: 50%;
	bottom: 5px; /* controlar a altura. pode-se retirar */
	border-top-right-radius:2px; /* Cantos redondos de cima */
	border-bottom-right-radius:2px; /* Cantos redondos de baixo */
}
#sp-menu .sp-megamenu-parent li.sp-menu-item::before {
	right: 50%;
	bottom: 5px; /* controlar a altura. pode-se retirar */
	border-top-left-radius:2px; /* Cantos redondos de cima */
	border-bottom-left-radius:2px; /* Cantos redondos de baixo */
}
/* Efeito de transição */
#sp-menu .sp-megamenu-parent li.sp-menu-item:hover::after, 
#sp-menu .sp-megamenu-parent li.sp-menu-item:hover::before {
    transition-timing-function: ease-in;
    width: 50%;
}

/*-------------------------------/ 
   STYLE menu de 2º Nivel
-----------------------------*/
#sp-menu .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
	padding:8px 15px;
	margin: 0px;
	background: #fff; /*COR GERAL DA DIV DE SUBMENUS*/
	box-shadow: 0 3px 5px 0 rgba(0,0,0,0.2);
}
/* Introduz uma linha divisória entre as tags "li" */
#sp-menu .sp-megamenu-parent .sp-dropdown li.sp-menu-item {   
	border-bottom: 1px solid #e8e8e8;
}
#sp-menu .sp-megamenu-parent .sp-dropdown li.sp-menu-item:last-child {   
	border-bottom: none;	
}
/* Sp-dropdown */
#sp-menu .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a, 
#sp-menu .sp-megamenu-parent .sp-dropdown li.sp-menu-item span {
    display: block;
    padding: 10px 8px; /*PADDINGS DAS TAG "a" NOS SUBMENUS*/
    /*color: #333333;*/
    cursor: pointer;
}
/*////////////////////////////////////////////////////////            
                 
----------------- OFFCANVAS MENU -----------------------
//////////////////////////////////////////////////////*/


/*+++++++++++++++++++++++++++++++++++++++/ 
   Off-canvas - TOOGLER
/*++++++++++++++++++++++++++++++++++++++*/ 
#offcanvas-toggler {
    float: right;
    margin-left: 15px;
}
#sp-menu #offcanvas-toggler > i { 
	font-size: 25px; 
	font-weight: lighter;
	color: #041B38 !important;
}
#sp-menu #offcanvas-toggler > i:hover { 
	color: #13B5EA !important; 
}
#offcanvas-toggler > i {
    -webkit-transition: color 200ms, background-color 200ms;
    -o-transition: color 200ms, background-color 200ms;
    transition: color 200ms, background-color 200ms;
}

/*+++++++++++++++++++++++++++++++++++++++/ 
   Off-canvas - MENU
++++++++++++++++++++++++++++++++++++++++*/

/*-------------------------------/ 
   Offcanvas - CORES 
-----------------------------*/
/*Atribui regra a um "ul" que tem (">") um "li" que tem (">") um "a"*/
.offcanvas-inner .sp-module ul > li > a { 
	color: #f1f1f1 !important; 
	background-color: none !important;
}
.offcanvas-inner .sp-module ul > li:hover > a { 
	color: #13B5EA !important; 
	background-color: none !important;
}
.slide-top-menu .offcanvas-menu {
    background-color: olivedrab;
}
/*COR DA DIV PRINCIPAL, 
Esta div fica por cima do overlay, e por cima do body qualquer 
cor aplicada com transparência vai buscar as cores do overlay e do body*/
.offcanvas-menu {
    background-color: rgba(0,0,0,0.7);
    color: inherit;
}
/*COR DAS SETAS (Link) PARA ABRIR SUB-MENUS,*/
.offcanvas-menu span i {
    background-color: none;
    color: #f1f1f1;
}
.offcanvas-menu span:hover i {
    background-color: none;
    color: #13B5EA;
}
/*-------------------------------/ 
   Offcanvas - ESTRUTURA 
-----------------------------*/
/*div class=..offcanvas-menu*/

.offcanvas-menu .a-bandeira{/*Menu de linguas dropdown*/
	display: none;
}
/*(.slide-top-menu) chama o .offcanvas-menu para o estado visivel*/
.slide-top-menu .offcanvas-menu {
    right: 0;
    visibility: visible;
}
.slide-top-menu .offcanvas-menu {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
/*(.offcanvas-menu) encontra-se invisivel*/
.offcanvas-menu {
    right: -320px;
    transform: translateX(0px);
}
.offcanvas-menu {
    width: 320px;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    -webkit-transform: translateX(320px);
    transform: translateX(320px);
    visibility: hidden;
    overflow: inherit;
    -webkit-transition: .5s;
    transition: .5s;
    z-index: 10000;
}
.offcanvas-menu .offcanvas-inner .sp-module:first-child {
    margin-top: 20px;
	margin-left:20px;
    padding: 30px;
}
.offcanvas-menu .offcanvas-inner .sp-module {
    margin-top: 0px ;
    padding: 30px ;
	padding-top: 15px;
}
.offcanvas-menu .offcanvas-inner .sp-module {
    margin-top: 0px;
    border-bottom: none; /*1px solid rgba(0,0,0,0.08);*/
    margin-bottom: 0px;
}

.offcanvas-menu .offcanvas-inner .sp-module:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/*-------------------------------/ 
   icon > close Offcanvas
-----------------------------*/
/*botao (x) para fechar o modulo*/
a.close-offcanvas {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1;
    width: 25px;
    height: 25px;
    line-height: .5;
    text-align: center;
    font-size: 22px;
    padding-top: 3px;
	color: #fff !important;
	border-radius: 100%;
	/*border: 1px solid #fff;*/
	border: none;
}
a.close-offcanvas:hover {
    color: #13B5EA !important;
	border-color: #5ff4c2;
}
a.close-offcanvas {
    -webkit-transition: color 400ms, background-color 400ms;
    -o-transition: color 400ms, background-color 400ms;
    transition: color 400ms, background-color 400ms;
}
/*Icon para fechar o offcanvas*/
a.close-offcanvas .fa-remove::before, 
a.close-offcanvas .fa-close::before, 
a.close-offcanvas .fa-times::before {
    content: "\f00d";
}

/*+++++++++++++++++++++++++++++++++++++++/ 
   Off-canvas - OVERLAY 
/*++++++++++++++++++++++++++++++++++++++*/
/* <div class=.offcanvas-overlay 
- Controla o Overlay que fica por cima da página 
quando surge o menu offcanvas */

/*(.slide-top-menu) chama o .offcanvas-overlay para o estado visivel*/
.slide-top-menu .offcanvas-overlay {
    visibility: visible;
    opacity: 1;
}
/*(.offcanvas-overlay) encontra-se invisivel*/
.offcanvas-overlay {
    /*background: rgba(0,120,180,0.5);*/
	background: rgba(20,20,20,0.4);
    bottom: 0;
    left: 0;
    opacity: 0;
    position: fixed; /*Para funcionar com o stikyhelder não pode ser "absolute"*/
    right: 0;
    top: 0;
    z-index: 9999;
    visibility: hidden;
    -webkit-transition: .5s;
    transition: .5s;
}

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

------------ SMART SLIDER 3 -------------
////////////////////////////////////////*/

/*---------------------------/ 
   Mod-SLIDER - UNDER HEADER
------------------------*/
/*section inicial onde está o slider, para encostar ao topo da página por baixo do header*/
/*Usar uma margem negativa no conteúdo do modulo slider para que o Header se sobreponha*/
/*#sp-slider, #sp-0-slider,(este último é criado automaticamente a partir do "module position" name)*/ 

#sp-0-slider{
	position: relative;
	margin-top: -90px!important;
	/*background-color: lightgray;*/
}
/*Only for box layout*/
#sp-slider .container{
	padding-right: 0px !important;
	padding-left: 0px !important;
}

/*Para corrigir o problema das margens negativas 
nas dimensões dos dispositivos moveis no firefox,
tudo o que não estiver a funcionar bem deverá levar
algures um Float left... aplicado ainda à DIV ".container" 
nos media queries*/
#sp-slider {
    float: left;
}
/*---------------------------/ 
   < 319px
------------------------*/
@media (max-width: 319px) {
  #sp-slider .container{
	width: 100%;
	float: left;
	}
}
/*---------------------------/ 
   320px >
------------------------*/
@media (min-width: 320px) {
  #sp-slider .container{
	width: 100%;
	float: left;
	}
}
/*---------------------------/ 
   480px >
------------------------*/
@media (min-width: 480px) {
  #sp-slider .container{
	width: 100%;
	float: left;
	}
}
/*---------------------------/ 
   768px >
------------------------*/
@media (min-width: 768px) {
  #sp-slider .container{
	width: 100%px;
	float:none;
	}
}
/*---------------------------/ 
   992px >
------------------------*/
@media (min-width: 992px) {
  #sp-slider .container{
	width: 992px;
	}
}
/*---------------------------/ 
   1170px >
------------------------*/
@media (min-width: 1170px) {
  #sp-slider .container{
	width: 1170px;
	}
}


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

------------  Butão UP PAGE  -------------
////////////////////////////////////////*/

.scrollup { /*circulo*/
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 62px;
    right: 50px;
    display: none;
    z-index: 999;
    /*border: 2px solid #ccc;*/
	border: none;
    background-color: rgba(180, 180, 180, 0.4);
    border-radius: 40px;
}
@media (max-width: 480px) {
	.scrollup {
		bottom: 40px;
    	right: 10px;
	}	
}
.scrollup:hover {
    background-color: rgba(180,180,180,0.2);
}
.scrollup::before { /*seta*/
    content: " \f106";
    font-family: "FontAwesome";
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 3px;
    width: 50px;/*Largura*/
    height: 50px;
    line-height: 46px;/*Altura*/
    text-align: center;
    font-size: 25px;
    font-weight: 700;
    color: #fefefe;
}

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

----------------  FOOTER  ----------------
////////////////////////////////////////*/


/*---------------------------/ 
  Hlx3 - SP-FOOTER (Copy Right)
------------------------*/
#copyright p, #copyright a{
	color: #a0a0a0 !important; 
    text-align: center;
	font-size: 13px !important;
}
#copyright a:hover {
	color:#5ff4c2 !important;
}
/*Criar um modulo para substituir o footer Padrão do Hlx3*/
#copyright{
	background-color:none;
}



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

----------- COMING SOON PAGE ------------
////////////////////////////////////////*/

/*Alterar a página de coming soon padrão do Hlx3*/
.sp-comingsoon body {
	background-color: #f6f6f6 !important;
	color: #3b3b3b !important;
}
.sp-comingsoon-title{
  	background-color: #f6f6f6 !important;
  	color: #3b3b3b !important;
  	font-size: 35px !important;
}
.sp-comingsoon-content{
  	background-color: #f6f6f6 !important;
  	color: #3b3b3b !important;
  	font-size: 25px !important;
}
.sp-comingsoon .sp-comingsoon-title {
  	margin-top: 10% !important;
}
#sp-comingsoon-countdown{
	display: none !important;
}
.sp-comingsoon-countdown{
	display: none !important;
}



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

_______ Google Maps ________
+////////////////////////////////////////*/



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

---------------- BA FORMS ----------------
////////////////////////////////////////*/

/*Formulário de inscrição*/
#rsform_1_page_0 {
    text-align: left;
}

/*-------------------------------/ 
"FORMS" > GERAL
----------------------------*/
.com-baforms .ba-form > div, .popup-form .ba-form > div {
	/*Retirara a animação fade do formulário*/
    /*animation: forms-modal .3s .4s linear both;
    -webkit-animation: forms-modal .3s .4s linear both;*/
	animation: none!important;
    -webkit-animation: none!important;
}

.ba-form .tool {/*Div que abraça as caixas de input*/
    margin: 0px 0px 15px 0px !important;
    text-align: left;
}
.com-baforms form {/*Div wrapper do "FORMS"*/
    margin: 0px !important;
}
/*-------------------------------/ 
   span6 @ MEDIA-QUERIES
-----------------------------*/
@media (max-width: 320px) {
	.ba-form .row-fluid .span6 {
		width: 100% !important;
		margin-left: 0px !important;
		}
	.ba-form .row-fluid [class*="span"] {
    	margin-left: 0 !important;
		}
}
@media (max-width: 480px) {
	.ba-form .row-fluid .span6 {
		width: 100% !important;
		margin-left: 0px !important;
		}
	.ba-form .row-fluid [class*="span"] {
    	margin-left: 0 !important;
		}
}
@media (max-width: 768px) {
	.ba-form .row-fluid .span6 {
		width: 100% !important;
		margin-left: 0px !important;
		}
	.ba-form .row-fluid [class*="span"] {
    	margin-left: 0 !important;
		}
}
/*-------------------------------/ 
"FORMS" > CONTACTOS 
----------------------------*/
.form-contactos .ba-form[style]{
	width: 100% !important;
	background-color: none !important;
	border: none !important;
	padding: 0px !important;
}
.form-contactos .ba-form{
	padding: 0px !important;
}
.form-contactos .tool input[style],
.form-contactos .tool textarea[style]{
	height: 45px !important;
	font-size: 14px!important; 
	color: rgba(100, 100, 100, 1)!important;
	background-color: rgba(255, 255, 255, 1); 
	/*border: 1px solid rgba(230, 230, 230, 1)!important;*/
	border-radius: 2px;
}
/*btn submit nos contactos
----------------------------*/
/*Controlar o tamanho por defeito de 100% do btn
O CSS original utiliza um "!important" para colocar 
a seguinte regra em primeiro lugar é necessário
especificar a localização da DIV ".ba-btn-submit"
assinalando que está dentro de outra DIV neste caso
".form-orcamento" */
@media (max-width: 1200px) {
	.form-contactos .ba-btn-submit {
    	width: 150px !important;
		}
}
/*"captcha recaptcha
----------------------------*/
#recaptcha > div {
    margin: auto;
}
@media (max-width: 385px) {
	.g-recaptcha {
	transform:scale(0.83);
	transform-origin:0 0;
	/*-webkit-transform:scale(0.85);
	-webkit-transform-origin:0 0;*/
	}
}
/*-------------------------------/ 
"FORMS" BTN SUBMIT geral
----------------------------*/
.ba-btn-submit[style]{
    width: 150px !important; /*Alterar @media "btn" acima*/
    height: 40px !important;
    background-color: rgba(2, 173, 234, 1) !important;
    color: rgba(250, 250, 250, 1) !important;
    font-size: 14px !important;
    font-weight: normal !important;
    border-radius: 3px !important;
    border: none !important;
}


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

-------------- OTHER SHIT ----------------
////////////////////////////////////////*/


.sp-menu-item #login-form {
    float: right;
    margin-left: 3px;
	margin-right: 3px;
	/*color: pink;*/
}
.sp-menu-item .logout-button {
    display: none;
}

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

----------- Artigo tarifarios ------------
////////////////////////////////////////*/
#tarifario{background-color: none;}

#tarifario div.tbl{
  display: flex;
  justify-content: center;
	/*display: inline-block;*/
	/*padding-left: 10px;*/
	/*padding-right: 10px;*/
	margin-bottom: 15px;
}

#tarifario table{
	max-width: 350px;
	border-spacing: 0rem;
	border: 0px;
	border-collapse: collapse;
	
}
#tarifario td, #tarifario th {
  border: 1px solid #c5c5c5;
  padding: 0.5rem;
}

#tarifario table thead th{
	width: 100%;
	background-color: #0097D8;
	border: 1px solid #0097D8;
	color: #FFF;
}
#tarifario table.socios thead th{
	background-color: #EBB400;
	border: 1px solid #EBB400;
}
#tarifario table.aluguer thead th{
	background-color: #64BDFF;
	border: 1px solid #64BDFF;
}
#tarifario tbody:before {
    content: "-";
    display: block;
    line-height: 5px;
    color: transparent;
}
#tarifario tbody td:first-child{
	width: 150px;
}
#tarifario tbody td:last-child{
	width: 170px;
	font-weight:600;
}
#tarifario tbody tr:first-child td:first-child{background-color: none;}
#tarifario tbody tr:first-child td:last-child{
	background-color: none;
	font-weight:600;
}


/*-------------------------------/ 
MODULO - 00 Footer/00 Footholder
----------------------------*/
/*Para proporcionar elasticidade ao stiky footer*/
/*O Footer e o Footholder têm que ter sempre a mesma altura, para assegurar a mesma altura
com conteúdo dinâmico, é necessário que o conteúdo do Footer, seja replicado no Footholder
a visibilidade do conteúdo deste fica presente mas escondida com "visibility: hidden"*/
/*É possível introduzir conteúdo dinâmico, utilizando o sistema de artigos e a extensão
RL Articles anywhere para carregar ambos os modúlos*/

/*Copiar o modulo "00 Footer" e colar no modulo 00 Footholder*/
#sp-sk-footholder #mod-foot{
	visibility: hidden;
}
#sp-footer #mod-foot{
	visibility: visible;
}
#mod-foot p{
    color: #A0A0A0;
	margin: 0;
}
#mod-foot .row{
	margin: 0;
	padding: 30px 0 30px 0;
}
#mod-foot a{
	text-decoration: none;
    color: #1D6AB1; 
}
#mod-foot a:hover, #mod-foot a:focus {
    color: #0F80E9;
}
/*
.div_adress, .div_info{
	padding-top: 20px;
}
.div_logo{
	padding: 0px 30px 0 0;
	float: left;
}
.div_adress{
	float: left;

}
.div_info{
	float: left;
	width: 100%;
}
.div_adress p, .div_info p{
	font-size: 13px; 
	line-height: 20px; 
	padding: 0px; 
	margin: 0;
	text-align: center;
}

@media (max-width: 405px) {
	.div_adress, .div_info{
	padding-top: 30px;
	}
}
#col_01, #col_02{
	margin-right: -15px;
	margin-left: -15px;
}*/

*, ::after, ::before {
    box-sizing: border-box;
}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
	position: relative !important;
	width: 100% !important;
	min-height: 1px !important;
	padding-right: 15px !important;
	padding-left: 15px !important;
}
@media (min-width: 768px) {
	.col-md-4 {
		-webkit-box-flex: 0 !important;
		-ms-flex: 0 0 33.333333% !important;
		flex: 0 0 33.333333% !important;
		max-width: 33.333333% !important;
	}
	.col-md-6 {
		-webkit-box-flex: 0 !important;
		-ms-flex: 0 0 50% !important;
		flex: 0 0 50% !important;
		max-width: 50% !important;
	}
}