body {
  margin: 0px;
}

.topcontainer {
  position: sticky;
  top: 0px;
  z-index: 100;
}


.topcontainer img {
  /*display: none;*/
  display: block;
  padding: 5px;
}

.topbar {
  background-color: #557a95;
  color: white;
  height: 45px;
  display: flex;
}

.topbaritem {
  margin: auto;
  padding: 5px;
  font-family: 'Roboto', sans-serif;
}

.topbaritem a {
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  color: white;
}

.menucontainer {
  /*background-color: #379683;*/
  position: sticky;
  top: 0px;
  display: block;
}

 /* Add a black background color to the top navigation */
 .topnav {
  /*background-color: #379683;*/
  background-color: #5d5c61;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-family: 'Roboto', sans-serif;
}


/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #7395AE;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
} 

 /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
 @media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
} 

.area0 {
  height: 280px;
  background-image: url("../img/img2.jpg");
  opacity: 0.7;
}

.area0item {
  float: right;
  font-family: 'Roboto', sans-serif;
  font-weight: bolder;
  font-size: 40px;
  color: white;
  vertical-align: baseline;
  padding: 10px;
  position: sticky;
  top: 80px;
  z-index: 90;
}

@media screen and (max-width: 600px) {
  .area0 { height: 150px; }
  .area0item { position: unset;}
}

.infoarea {
  display: none; /*block para mostrar */
  background-color: seashell;
}

#alerttext {
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  color: firebrick;
}

#infotext {
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  color: #7395AE;
}

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

.slide-left {
  width:100%;
  overflow:hidden;
}
.slide-left p {
  animation: slide-left 10s;
}

@keyframes slide-left {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
} 
 
/***************************************/

.area1 {
  background-color: white;
  display: flex;
  height: 150px;
  padding: 15px;
}

.area1 img {
  display: block;
  width: 160px;
}

.area1group {
  display: flex;
  width: 100%;
  padding: 5px;
}

.area1group img {
  display: none;
}

.area1item {
  margin: auto;
  padding: 5px;
  font-family: 'Roboto', sans-serif;
  text-align: center;
  box-sizing: border-box;
}

.area1group a {
  display: flex;
  text-decoration: none;
  color: #7395AE;
  width: 100%;
}

/* Para ecrans pequenos */
@media screen and (max-width: 600px) {
  .area1 { display: block; height: auto;}
  .area1 img  { display: none; }
  .area1group img { display: block; }
  .area1item { 
    width: 100%;
    margin: 20px; 
    vertical-align: middle;
  }
  
}

.privacy {
  /*background-color: rgb(230, 237, 244);
  border-color: rgb(230, 237, 230);*/
  border-radius: 10px;
  display: block;
  margin-right: auto;
  margin-left: auto;
  width: 90%;
  min-height: 300px;
  margin-bottom: 10px;
  padding: 10px;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: #7395AE;
}

.privacy h4 {
  font-size: 20px;
  color: #5d5c61;
}

.privacy h5 {
  font-size: 16px;
  color: #5d5c61;
}

/* O rodapé para ecran pequeno*/
.footercontainer {
    display: block;
    background-color: #5D5C61;
    padding: 50px;
    min-height: 150px;
}

.ftgroup1 {
  display: block;
}

.ftgroup2 {
  display: block;
  text-align: center;
  margin: 5px;
  font-family: 'Roboto', sans-serif;
  color: white;
  font-size: smaller;
}

.ftgroup2 a {
  text-decoration: none;
  color: white;
}


/* items do rodape para ecran pequeno*/
.footeritem {
    color: #fff;
    font-family: 'Roboto', sans-serif;
    flex-grow: 1;
    text-align: center;
    display: grid;
    margin-bottom: 20px;
    padding: 5px;
    font-size: small;
}

.footeritem a {
  color: #fff;
  text-decoration-line: none;
}

.footeritem + .footermItem {
  margin-left: 5px;
}

/* Para ecran grande - rodapé */
@media (min-width: 600px) {
  .ftgroup1 {
    display: flex;
    flex-direction: row;
  }
  .footeritem {
    display: block;
    text-align: left;
    margin-top: 0px;
  }
}

.gmapslink {
  margin-top: 10px;
  margin-bottom: 10px;
  text-decoration: underline;
}

.gmapslink img {
  width: 20px;
}

.aboutus {
  background-color: rgb(230, 237, 244);
  border-color: rgb(230, 237, 230);
  border-radius: 10px;
  display: block;
  margin-right: auto;
  margin-left: auto;
  width: 90%;
  min-height: 300px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 20px;
  margin-bottom: 10px;
  padding: 10px;
}

.aboutus h4 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1 1;
  padding-top: 5px;
  color: #5d5c61;
  font-family: 'Roboto', sans-serif;
}


 /* item não visivel, basicamente para evitar spanbots 
     na pagina de contato */
  .naover {
    display: none;
  }


/* Cancelar o flow entre elementos,
 * tipo nova linha 
 * adicionar uma div com esta class
 * na quebra que se pretende */
.clearfix {
  clear: both;
}

.contactus {
    background-color: rgb(230, 237, 244);
    border-color: rgb(230, 237, 230);
    border-radius: 10px;
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 90%;
    margin-bottom: 10px;
    padding: 10px;
    color: #5d5c61;
    font-family: 'Roboto', sans-serif;
  }

  .contactus h4 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1 1;
    padding-top: 5px;
  }

  /* Estilo aplicado a elementos de formulario - contactus */
  input[type=text], input[type=email], select, textarea {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */ 
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
  }

  /* formato para botão de envio de formulario */
  input[type="submit"] {
    background-color: #04AA6D;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
  }

  /* formato para botão de envio de formulario - passar por cima */
  input[type='submit']:hover {
    background-color: #45a049;
  }

  .alertArea {
    background-color: rgb(230, 237, 244);
    border-radius: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: auto;
    margin-left: auto;
    width: 80%;
    height: 320px;
    /*font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    text-align: center;
    line-height: 320px;
    vertical-align: middle;
  }

  .alertSuccess {
    color: green;
  }

  .alertError {
    color: red;
  }