/*Parte geral*/
body { font-family: 'Muli', sans-serif; margin: 0 0 0 0; background-color: #FFFFFF;}
a {color: black; text-decoration: none;}
a:visited,
a:hover,
a:active,
a:focus {text-decoration: none !important;color: inherit;}
p {text-decoration: none; font-size:medium; color: black;}
h1 {font-size:xx-large; font-weight: bolder; color: black;}
h2 {font-size:x-large; font-weight:bold; color: black;}
h3 {font-size:large; font-weight:bolder; color: black;}

/*Apenas o menu*/
#menu_img_logo {height: 80px; padding-left: 1vw; padding-right: 1vw;}
#menu_img_logo:hover {transform: scale(1.3);}
#menu_txt_logo {height: 80px; padding-left: 1vw; padding-right: 0vw;}
a.menu {color: black; font-weight:lighter; font-size: 1.5vw; padding-left: 1vw; padding-right: 1vw; padding-top: 0.1vw; padding-bottom: 0.1vw;}
a.menu:hover {color: #57A1D4; border-style: none none solid none;}
a.menu_icons {color: black; font-weight: lighter; font-size: 18px; padding-left: 0.1vw; padding-right: 0.1vw;}
a.menu_icons:hover {color: #57A1D4; border-style: none none solid none;}
.linha_menu {border-collapse: collapse; border-bottom: 1px solid #CCCCCC;}
.linha_menu_sombra {
  border-collapse: collapse;
  border-bottom: none;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

#intro_index {
  background-image: url("fotos/braga_cor.jpg");
  background-attachment: scroll; background-size: cover; background-repeat: no-repeat; vertical-align: middle;
  padding-top: 20%;padding-left: 20%;padding-right: 20%;padding-bottom: 20%;
}
h1.titulo_intro {text-align: left; color:gray; padding-left: 20px; line-height: 1;}
h2.titulo_intro {text-align: left; color:gray; padding-left: 35px;line-height: 1;}
h3.titulo_intro {text-align: left; color:gray; padding-left: 25px; line-height: 1;}
p.texto_intro {text-align: left; color:gray; font-weight:lighter; padding-left: 60px;}

#intro_faq {
  background-image: url("fotos/boulder_colegio_alemao_porto.jpg");
  background-attachment: scroll; background-size:auto; background-repeat: no-repeat; vertical-align: middle;
  padding-top: 10%; padding-left: 20%; padding-right: 20%; padding-bottom: 10%;
}
h2.subtitulo_faq {text-align: left; font-weight:bolder; color: black; padding-left: 60px; padding-right: 60px;}
h3.subsubtitulo_faq {text-align: left; font-weight:bolder; color: black; padding-left: 60px; padding-right: 60px;}
p.texto_faq {text-align: left; color:gray; font-weight:lighter; padding-left: 60px; padding-right: 60px}

#intro_manutencao {
  background-image: url("fotos/nuno_manutencao.jpg");
  background-attachment: scroll; background-size:auto; background-repeat: no-repeat; vertical-align: middle;
  padding-top: 10%; padding-left: 20%; padding-right: 20%; padding-bottom: 10%;
}
h1.titulo_manutencao {text-align: left; font-weight:bolder; color: black; padding-left: 60px; padding-right: 60px; font-size: 80px;}

#intro_homeclimbing {
  background-image: url("fotos/home_climbing.jpg");
  background-attachment: scroll; background-size:auto; background-repeat: no-repeat; vertical-align: middle;
  padding-top: 10%; padding-left: 20%; padding-right: 20%; padding-bottom: 10%;
}
h1.titulo_homeclimbing {text-align: left; font-weight:bolder; color: black; padding-left: 60px; padding-right: 60px; font-size: 80px;}


a.contact_icons {font-weight: lighter; font-size: 18px; padding-left: 0.1vw; padding-right: 0.1vw;}
a.contact_icons:hover {color: #57A1D4; border-style: none none solid none;}
a.comdecor {text-decoration:dashed;}

.fixedButton{position: fixed; bottom: 0px; right: 0px; padding: 15px;}
.roundedFixedBtn{height: 60px; line-height: 60px; width: 60px; font-weight: bold; border-radius: 50%; background-color: #48abe0; color: white; text-align: center; vertical-align: top; cursor: pointer;}

button {border-radius: 5px; border-style: 1px; padding: 10px 20px 10px 20px; font-size: 1vw; transition-duration: 0.4s;}
button.linha_azul {border-style:none; border-bottom-style: double; border-radius: 0%; color:black; background-color: white; padding: 10px 0px 10px 0px; font-size: 1vw; font-weight: bolder; transition-duration: 0.4s;}
button.linha_azul:hover {border-bottom-style: double; border-color:#57A1D4 ; color:#57A1D4; background-color: white; padding: 10px 0px 10px 0px; font-size: 1vw; transition-duration: 0.4s;}
button.linha_azul_mini {border-style:none; border-bottom-style: double; border-radius: 0%; color:#57A1D4; background-color: white; padding: 10px 0px 10px 0px; font-size:xx-small; font-weight: bolder; transition-duration: 0.4s;}
button.linha_azul_mini:hover {border-bottom-style: double; border-color:#57A1D4 ; color:#57A1D4; background-color: white; padding: 10px 0px 10px 0px; font-size:xx-small; transition-duration: 0.4s;}
button.preto_azul_linha { background-color:transparent; color:black;}
button.fundobranco { background-color:transparent; border-color: black; color:black;}
button.fundobranco:hover {background-color: black; color:white; border-color: black;}
button.fundopreto {color:white; background-color:black;}
button.fundopreto:hover {background-color: white; color:black; border-color: black;}
button.fundotransparente {border-color: white; padding: 10px 20px 10px 20px; color:white; background-color:transparent; transition-duration: 0.4s;}
button.fundotransparente:hover {background-color: white; color:black; border-color: white;}
button.setabrancafundonegro {border-radius: 5px; border-style: 1px; padding: 10px 20px 10px 20px; font-size: 1vw; color:white; background-color:black; transition-duration: 0.4s;}
button.redondo {border-radius: 100%; background-color: #48abe0; color: white; border: none; font-size: 20px; padding-left: 5px; padding-right: 5px; padding-top: 15px; height: 50px; width: 50px; box-shadow: 0 2px 4px darkslategray; cursor: pointer; transition: all 0.2s ease;}
button.redondo:hover {background-color: white; color:black;}
button.grande {background-color: #48abe0; /*Este botão tem a cor azul deste tema*/ color: white; border: none; font-size: xx-large; padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 20px; height: 100%; width: 100%; box-shadow: 0 2px 4px darkslategray; cursor: pointer; transition: all 0.2s ease;}
button.grande:hover {background-color: white; color:black;}
button.medio {
  background-color: #48abe0; /*Este botão tem a cor azul deste tema*/
  color: white;
  border: none;
  font-size: x-large;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  height: 100%;
  width: 100%;
  box-shadow: 0 2px 4px darkslategray;
  cursor: pointer;
  transition: all 0.2s ease;
}
button.medio:hover {background-color: white; color:black;}

.botao_arredondado {
  display: inline-block;
  padding: 12px 24px;
  background-color: #48abe0; /* Azul, muda conforme tua paleta */
  color: white;
  text-decoration: none;
  border-radius: 50px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.botao_arredondado:hover {
  background-color: #48abe0; /* Tom mais escuro no hover */
  color: whitesmoke;
  transform: scale(1.1);
}

#footer {clear: both; /*sempre que usar float tenho de libertar*/ width: 100%;
  padding: 20px; text-align: center; font-weight: bold; background-color:#303E4E; color: #FFFFFF;}
* {box-sizing: border-box;}
/*As proximas linhas são necessárias para criar o efeito das 3 ou 2*/
.coluna_5 {text-align: center; color:gray; font-weight: lighter;
  float: left; width: 20%; padding: 20px; text-align: center;}
.coluna_4 {text-align: center; color:gray; font-weight: lighter;
  float: left; width: 25%; padding: 10px; text-align: center;}
.coluna_3 {text-align: center; color:gray; font-weight: lighter;
  float: left; width: 33.33%; padding: 10px; text-align: center;}
.coluna_2 {text-align: center; color:gray; font-weight: lighter; float: left; width: 50%; padding: 40px; padding-bottom: 10%; text-align: center;}
.coluna_2_txt_img {float: left; width: 50%;}
.coluna_1 {/*A ideia é dividir o paragrafo em 3 partes*/ padding: 5% 25% 5% 25%; text-align: center;}

.margem_menu_top_bottom {padding-top: 220px; padding-bottom: 220px;}
.margemparaomenu {padding-top: 60px; /*Tenho de variar os px de acordo com a resolução e tamanho da barra de menu*/}
.margemparaoanterior {padding-top: 60px; /*Tenho de variar os px de acordo com a resolução e tamanho do ecran*/}
.margenslaterais {padding-left: 100px; padding-right: 100px;}

.largura100_altura100 {width: 100%; height: 100%;}
.largura_100 {width: 100%;}
.largura100 {width: 100%;}
.largura20 {width: 20%;}
.largura_20 {width: 20%;}
.largura30 {width: 30%;}
.largura_30 {width: 30%;}
.largura40 {width: 40%;}
.largura_40 {width: 40%;}
.largura50 {width: 50%;}
.largura_50 {width: 50%;}
.largura60 {width: 60%;}
.largura_60 {width: 60%;}
.largura70 {width: 70%;}
.largura_70 {width: 70%;}
.largura80 {width: 80%;}
.largura_80 {width: 80%;}
.largura90 {width: 90%;}
.largura_90 {width: 90%;}
.largura_200px {width: 200px; min-width: 200px;}
.largura_250px {width: 250px; min-width: 250px;}
.largura_250px_menu {width: 250px; min-width: 250px;}
.altura_100 {height: 100%;}
.altura_25px {height: 25px; min-height: 25px;}

.altura_50px {height: 50px; min-height: 50px;}
.altura_100px {height: 100px; min-height: 100px;}
.altura_150px {height: 150px; min-height: 150px;} 
.altura_200px {height: 200px; min-height: 200px;}
.altura_250px {height: 250px; min-height: 250px;}
.altura_300px {height: 300px; min-height: 300px;}
.altura_400px {height: 400px; min-height: 400px;}
.altura_500px {height: 500px; min-height: 500px;}

.alinha_fundo {vertical-align: bottom;}
.alinha_centro {vertical-align: middle;}
.alinharaocentro {vertical-align: middle;}
.alinha_centro_menu {vertical-align: middle;}
.alinha_topo {vertical-align: top;}
.alinha_texto_direita {text-align: right;}
.alinha_texto_centro {text-align: center;}
.centrar {text-align: center;}
.alinha_texto_esquerda {text-align: left;}
.alinharesquerda {text-align: left;}
.alinhar_esquerda {text-align: left;}
.alinhar_direita {text-align: right;}

.margem_30px {width: 30px; min-width: 30px;}
.margem_60px {width: 60px; min-width: 60px;}
.margem_90px {width: 90px; min-width: 90px;}
.margem_120px {width: 120px; min-width: 120px;}
.margem_120px_menu {width: 120px; min-width: 120px;}
.margem_menu_top_bottom {padding-top: 40px; padding-bottom: 40px;}

.padding_60px {padding-left: 60px; padding-right: 60px}
.padding_80px {padding-left: 80px; padding-right: 80px}

.font_48px { font-size: 48px; }
.font_64px { font-size: 64px; }
.font_80px { font-size: 80px; }

.texto_medio {font-size: medium;}

.texto_fininho {font-weight:lighter;}
.italico {font-style: italic;}
.negrito {font-weight: bolder;}

.img_preencher {height: 100%; width: 100%; object-fit: cover;}
.img_aumentar:hover {transform: scale(1.1);}
.imagem_aumentar:hover {transform: scale(1.1);}


.cinza {color: #767676;}
.branco {color: whitesmoke;}
.cinza_claro {color:gray;}
.sombra {-webkit-box-shadow: 1px 1px 15px 5px #000000; box-shadow: 1px 1px 15px 5px #000000;}
.sombra_menu {box-shadow: 0 2px 4px darkslategray;}

.fundo_circulos {background-image: url(fundo_circulos.png);}
.fundo_azul {background-color: #57A1D4; overflow: auto;}
.fundo_cinza {background-color:rgba(232,232,232,1); overflow: auto;}
.fundo_brancosujo {background-color:whitesmoke; overflow: auto;}
.fundo_branco {background-color: white; overflow: auto;}
.fundo_preto {background-color: black; overflow: auto;} 
.movel_oculta {visibility: visible;}
.imagem_esquerda {float: left; clear: left; width: 40%; padding-left: 2%; padding-right: 2%; padding-top: 2%; padding-bottom: 2%;}
.texto_direita {float:left; width: 60%; padding-left: 2%; padding-right: 2%; padding-top: 2%; padding-bottom: 2%;}

/* Style The Dropdown Button */
.dropbtn {
  background-color: white;
  color: black;
  border-color: white;
  padding: 12px;
  font-size:large;
  border-style: none none solid none;
  border-radius: 0;
  cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {position: relative; display: inline-block;}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {color: #57A1D4; border-color: #57A1D4;}

/*Quando o meio é o tablet vamos alterar alguns itens*/
@media (max-width: 1000px) {
  .margemparaomenu {padding-top: 40px;}
  #menu_img_logo {height: 40px;}
  #menu_txt_logo {height: 40px;}
  #menu_img_logo:hover {transform: scale(1.1);}
  a.menu {font-size: 2vw;}
  h1.titulo_intro {padding-top: 120px; padding-left: 30px; padding-left: 30px;}
  p.texto_intro {padding-left: 30px; padding-left: 30px;}
  h1.titulo_manutencao {padding-left: 30px; padding-right: 30px; font-size: 80px;}
  button {padding: 5px 10px 5px 10px; font-size: 1.5vw;}
  .imagem_esquerda {float:none; width: 100%;}
  .texto_direita {float:none; width: 100%;}
  .margem_30px {width: 3px; min-width: 3px;}
	.coluna_5 {width: 100%;}
  .coluna_4 {width: 100%;}
	.coluna_3 {width: 100%;}
	.coluna_2 {width: 100%; padding: 10px;}
  .coluna_2_txt_img {width: 100%;}
  .imagem_esquerda {float: left; width: 100%; padding-left: 5%; padding-right: 5%;}
  .texto_direita {float:left; width: 100%; padding-left: 10%; padding-right: 10%;}
  .movel_oculta {visibility:hidden;}
  .largura_250px_menu {width: 125px; min-width: 125px;}
  .margem_120px_menu {width: 100px; min-width: 100px;}
  .alinha_centro {text-align: center;}
}

/*Quando o meio é o telémovel vamos alterar alguns itens*/
@media (max-width: 400px) {
  .margemparaomenu {padding-top: 30px; /*Tenho de variar os px de acordo com a resolução e tamanho da barra de menu*/}
  .margem_menu_top_bottom {padding-top: 0px; padding-bottom: 0px;}
  imagem_esquerda {float:none; width: 100%;}
  texto_direita {float:none; width: 100%;  padding-left: 20%; padding-right: 20%;}
  #menu_img_logo {height: 35px;}
  #menu_txt_logo {height: 35px;}
  #menu_img_logo:hover {transform: scale(1.1);}
  a.menu {font-size: 2vw;}
  h1.titulo_intro {padding-top: 120px; padding-left: 30px; padding-left: 30px;}
  p.texto_intro {padding-left: 30px; padding-left: 30px;}
  button {padding: 5px 10px 5px 10px; font-size: 1.5vw;}
	.coluna_4 {width: 100%;}
	.coluna_3 {width: 100%;}
	.coluna_2 {width: 100%; padding: 10px;}
  .coluna_2_txt_img {width: 100%;}
  .movel_oculta {visibility:hidden;}
  .largura_250px_menu {width: 100px; min-width: 100px;}
  .margem_120px_menu {width: 60px; min-width: 60px;}
  .alinha_centro {text-align: center;}
  .dropbtn {padding: 6px; font-size: 2vw;}
}