/* Setting fade transition and default settings */

body {
  background: #333366;
  color: #fff;
  font-family: 'kohinoor';
  line-height: 1.25;
  margin: 0;
  transition: background-color 1s ease;
}


  .flex-apoio {
    max-width: 50%;
    display: flex;
    flex-wrap: wrap;
    height: 80px;
    /*background-color: DodgerBlue;*/
    /*justify-content: center;*/
    margin: 0 auto;
  }

  .flex-apoio > div {
    flex-grow: 8;
    /*background-color: #efefef;*/
    width: 200px;
    margin: 2px;
    text-align: center;
    /*line-height: 75px;*/
    /*font-size: 30px;*/
    /*color: #333366;*/
  }



  .flex-container {
    max-width: 80%;
    display: flex;
    flex-wrap: wrap;
    height: 100px;
    /*background-color: DodgerBlue;*/
    /*justify-content: center;*/
    margin: 0 auto;
  }

  .flex-container > div {
    flex-grow: 8;
    /*background-color: #efefef;*/
    width: 320px;
    margin: 4px;
    text-align: center;
    /*line-height: 75px;*/
    /*font-size: 30px;*/
    /*color: #333366;*/
  }


/* panel styles */
.panel {
  /* min height incase content is higher than window height */
  font-size: 1.6em;
  min-height: 80vh;
  display: flex;
  justify-content: space-around;
  /*align-items: center;*/
  outline: 0px solid hotpink; 
  /* turn above on to see the edge of panels */
}

.formato {
  font-size: 1.6em;
  display: flex;
  justify-content: space-around;
  outline: 0px solid hotpink; 
}

/* colours 
.color-violet {
  background-color: #7A4EAB;
}
.color-indigo {
  background-color: #4332CF;
} */
.color-turquesa {
  background-color: #33cccb;
}
.color-blue {
  /*background-color: #2F8FED;*/
  background-color: #0099cc;
}
.color-green {
  /*background-color: #4DCF42;*/
  background-color: #99cc33;
}
.color-white {
  background-color: #FFF;
}
.color-orange {
  /*background-color: #F19031;*/
  background-color: #FF9933;
}
.color-black {
  background-color: #000;
}

/* styling for demo, can ignore */

h1 {
  font-family: 'hknova';
  font-weight: 900;
  font-size: 5em;
  font-weight: 900;
  margin: 0 1em;
}

p {
  /*  max-width: 30em;
  margin-bottom: 1.618em;*/
  width: 50%;
  float: right;
  margin: 0 2em;
  /*text-indent: 30px;*/
  /*text-align: justify;*/
  letter-spacing: 2px;
}

a {
  color: #4332CF;
  }


    a.branco:link    { font-size: 0.6em; color:#FFF; text-decoration:none;  }
    a.branco:visited { font-size: 0.6em; color:#FFF; text-decoration:none;  }
    a.branco:hover   { font-size: 0.6em; color:#EEF; text-decoration:none; box-shadow: 0 2px 0 #EEF; padding-bottom: 2px; }
    a.branco:active  { font-size: 0.6em; color:#FFF; text-decoration:none;  }

    .clear { clear: both; }

    .posicaoLogo { max-width: 100%; overflow: hidden; border: 0px solid white; text-align: right; padding-right: 10em; padding-top: 2em; }
    .posicaoFoto { margin: 0 auto; border: 0px solid white; text-align: center; }
    .tamanhoLogo { width: 35%; }

    @media only screen and (max-width: 896px) {
      p            { width: 80%; margin: 0 auto; float: none; }
      h1           { font-size: 2em; margin-left: 0.7em; margin-bottom: 0.5em; }
      .flex-apoio  { max-width: 100%; width: 100%; }
      .flex-apoio > div { width: 160px; border: 0px solid purple; }
      .flex-container { max-width: 100%; width: 100%; }
      .flex-container > div { width: 160px; border: 0px solid purple; }
      .posicaoFoto { max-width: 100%; margin: 0 auto; border: 0px solid white; }
      .tamanhoLogo { width: 50%; margin: 0 auto; }
    }
    @media only screen and (max-width: 736px) {
    }
    @media only screen and (max-width: 414px) {
      .panel       { font-size: 1em; border: 0px solid black; }
      .formato     { font-size: 1em; border: 0px solid black; }
      .flex-apoio     > div { width: 160px; }
      .flex-container > div { width: 100%; height: 25vh; flex-grow: 0; margin: 1px; }
      p            { width: 80%; margin: 0 auto; float: none; }
      h1           { font-size: 2.3em; margin-left: 0.8em; margin-bottom: 0.5em; }
      .tamanhoLogo { width: 80%; margin: 0 auto; }
      .posicaoLogo { text-align: center; padding-right: 0em; margin: 0 auto; }
    }
    @media only screen and (max-width: 320px) {
      p            { width: 90%; }
      h1           { font-size: 1.8em; margin-left: 1em; margin-bottom: 0.5em; }
    }