html {
    margin:    0 auto;
    max-width: 1400px;
    background-color: #F1F1F1; 
}

*{
  box-sizing: border-box;
}

@font-face {
  font-family: ahm;
  src: url(ahm.otf) format('truetype')
}
.ahm::before, .ahm3::before {
  font-family: ahm;
  font-size: 1.2em;

}

.ahm.atencao::before { content: 'A'; }
.ahm.breja::before { content: 'B'; }
.ahm.camera::before { content: 'C'; }
.ahm.windows::before { content: 'D'; }
.ahm.equipamento::before { content: 'E'; }
.ahm.pdf::before { content: 'F'; }
.ahm.graph::before { content: 'G'; }
.ahm.home::before { content: 'H'; }
.ahm.ideia::before { content: 'I'; }
.ahm.txt::before { content: 'J'; }
.ahm.tree::before { content: 'K'; }
.ahm.lupulo::before { content: 'L'; }
.ahm.malte::before { content: 'M'; }
.ahm.snow::before { content: 'N'; }
.ahm.book::before { content: 'O'; }
.ahm.prancheta::before { content: 'P'; }
.ahm.globo::before { content: 'Q';}
.ahm.lupa::before { content: 'R'; }
.ahm.skull::before { content: 'S'; }
.ahm.town::before { content: 'T'; }
.ahm.user::before { content: 'U'; }
.ahm.link::before { content: 'V'; }
.ahm.processo::before { content: 'W'; }
.ahm.linux::before { content: 'X'; }
.ahm.yeast::before { content: 'Y'; }
.ahm.svg::before { content: 'Z'; }
.ahm.preco::before { content: 'a';}
.ahm.terminal::before { content: 'b'; }
.ahm.menu::before { content: 'c'; }
.ahm.run::before { content: 'd'; }
.ahm.drop::before { content: 'e'; }
.ahm.calendario::before { content: 'f'; }
.ahm.lista::before { content: 'g'; }
.ahm.nota::before { content: 'h'; }

/* Fonte Branca 

@font-face {
  font-family: ahm2;
  src: url(ahm2.otf) format('truetype')
}
.ahm2::before {
  font-family: ahm2;
  font-size: 1.2em;
  color: #FFFFFF;
}

.ahm2.atencao::before { content: 'A'; color: #FFF; }
.ahm2.breja::before { content: 'B'; color: #FFF; }
.ahm2.camera::before { content: 'C'; color: #FFF; }
.ahm2.windows::before { content: 'D'; color: #FFF; }
.ahm2.equipamento::before { content: 'E'; color: #FFF; }
.ahm2.pdf::before { content: 'F'; color: #FFF; }
.ahm2.graph::before { content: 'G'; color: #FFF; }
.ahm2.home::before { content: 'H'; color: #FFF; }
.ahm2.ideia::before { content: 'I'; color: #FFF; }
.ahm2.txt::before { content: 'J'; color: #FFF; }
.ahm2.tree::before { content: 'K'; color: #FFF; }
.ahm2.lupulo::before { content: 'L'; color: #FFF; }
.ahm2.malte::before { content: 'M'; color: #FFF; }
.ahm2.snow::before { content: 'N'; color: #FFF; }
.ahm2.book::before { content: 'O'; color: #FFF; }
.ahm2.prancheta::before { content: 'P'; color: #FFF; }
.ahm2.globo::before { content: 'Q'; color: #FFF;}
.ahm2.lupa::before { content: 'R'; color: #FFF; }
.ahm2.skull::before { content: 'S'; color: #FFF; }
.ahm2.town::before { content: 'T'; color: #FFF; }
.ahm2.user::before { content: 'U'; color: #FFF; }
.ahm2.link::before { content: 'V'; color: #FFF; }
.ahm2.processo::before { content: 'W'; color: #FFF; }
.ahm2.linux::before { content: 'X'; color: #FFF; }
.ahm2.yeast::before { content: 'Y'; color: #FFF; }
.ahm2.svg::before { content: 'Z'; color: #FFF; }
.ahm2.preco::before { content: 'a'; color: #FFF;}
.ahm2.terminal::before { content: 'b';color: #FFF; }
.ahm2.menu::before { content: 'c'; color: #FFF;}
.ahm2.run::before { content: 'd'; color: #FFF;}
.ahm2.drop::before { content: 'e'; color: #FFF;}
.ahm2.calendario::before { content: 'f'; color: #FFF;}
.ahm2.lista::before { content: 'g'; color: #FFF;}
.ahm2.nota::before { content: 'h'; color: #FFF;}
*/

h4, h5 {
  border-bottom: 1px solid #CC6600;
    display:inline-block;
}

p {
  color: #000000;
  font-size: 1.1em;
 } 

#gerais li, ol, ul {
  font-size: 1.05em;
  color: #000000;
}

cite {
  font-style: oblique 20deg;
  color: #CC6600;
}

#topo_a  {
  color: #CC6600;

}


#topo {
    color: #CC6600;
    border: none;
  }

#banner {
  margin-top: 16px;
  padding-bottom: 16PX;
  background-color: #FFF;
  }

  #topo {
    margin-top: 16px;
    background-color: #FFF;
}

  .topo_info h5{
  font-size: 1.2em;
  font-style: oblique;
  font-weight: lighter;
  }

.badge {
    background-color: #CC6600;
    color: white;
    padding: 4px 8px;
    text-align: center;
    border-radius: 5px;
}
.melhor {
  color: #CC6600;
  padding: 4px 8px;
  text-align: center;
  border-radius: 5px;
  font-style: oblique;
  font-weight: lighter;
}

#principal{
    margin-left: 210px;
    padding-left: 4px;
    background-color: #FFFFFF;
    }

#principal h3{
    color:#CC6600;
    font-weight: bold;
    padding: 0 0 2px 6px;
    }

/* mySidebar */
.w3-sidebar {
  z-index: 3;
  width: 200px;
  top: 10px;
  bottom: 0;
  height: inherit;
}

    #mySidebar {
    width: 200px;
    height: max-content;
    background-color: #FFF;
    border: 1px solid #CC6600;
    border-radius: 25px;
    overflow-x: hidden;
    }
    .sidebar {
    width: 200px;
    background-color: #FFF;
    }
    .sidebar ul {
      width: 200px;
      list-style-type: none;
      margin: 0;
      padding: 8px 8px 0 8px;
    }
    .sidebar li a {
      display: block;
      color: #CC6600;
      padding: 6px;
      text-decoration: none;
      background-color: #FFF;
    }
    .sidebar li {
      text-align: left;
      border-bottom: 1px solid #CC6600;
    }
    
    .sidebar li:last-child {
      border-bottom: none;
    }
    
    .sidebar li.bloco {
      background-color: #CC6600;
      color: #FFF;
      padding: 2px 12px;
    }
    .sidebar a.bloco {
      background-color: #CC6600;
      color: #EEE;
      padding: 2px 12px;
      border-bottom: solid 1px #CC6600;
    }
    
    .sidebar li a:hover:not(.active) {
      background-color: #FFF;
      color: #CC6600;
      border-left: solid 2px #CC6600;
      border-bottom: none;
    }
    
    .sidebar a:link {
      color: #CC6600;
      background-color: #FFF;
      text-decoration: none;
    }
    .sidebar h7 {
      font-size: 70%;
    }
    
    .area {
      color: #CC6600;
      background-color: #FFF;
    }
    .compartilhar {
      color: #EEE;
      font-style: oblique 15deg;
      background-color: #CC6600;
      padding: 2px 12px;
      text-align: right;
      }

      .flex-container {
          display: flex;
          justify-content: space-evenly;
      }

/*Links de Todo o site*/
 
 /* active link */
#principal a:link {
  color: #CC6600;
  background-color: #FFF;
}

/* visited link */
#principal a:visited {
  color: #CC6600;

}
#principal .fa-link, .fa-file-pdf {
  color: #CC6600;
}
/* mouse over link */
#principal a:hover {
  color: #CC6600;
  border-bottom: solid 2px #CC6600;
  text-decoration: none;
 }

img {
  padding: 4px;
}
 #myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: solid 1px #CC6600; /* Insere borders */
  outline: none; /* Remove outline */
  background-color: #FFF; /* Set a background color */
  color: #CC6600; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 5px; /* Some padding 15*/
  border-radius: 5px; /* Rounded corners 10*/
  font-size: 18px; /* Increase font size 18*/
}

#myBtn:hover {
  background-color: #EEE; /* Add a background on hover */
  color: #CC6600; /* Add a color for tex on hover */
  border: solid #CC6600;
}

.w3-button {
color: #CC6600;
  
}

video, audio {
  width: 100%;
  height: auto;
}

/* pensamentos------------------------------------------------ */

.pensamentos {
display:none;
padding:10px 2px;
font-size: 1.2em;
}

.pensamentos .citar{ 
  font-style: italic;
  color: #CC6600;
  border-top: solid 2px #CC6600;
  
  }

.pensamentos cite {
  font-style: oblique 15deg;
  color: #CC6600;
}

.footer-pensamentos{
  background-color:#CC6600;
}
.footer-pensamentos button{
  background-color:#CC6600;
  color: #eee;
}

.pensamentos {display:none;}

.footer{
    background-color:#e0fcfe;
    left: 210px;
    right:0;
    bottom: 0;
    margin-bottom: 10px;
    border-top: 2px solid #9f9f9f;
}

.footer em{
  color: #9f9f9f;
}

.cards_slides {
display:none;
}
/* Style the counter cards */

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    padding: 16px 8px;
    text-align: left;
      }
  .card > h3 {
    border-style: none;
    text-align: left;
    color:#FFF;
  }

  .card > h4 {
    border-style: none;
    text-align: left;
    color:#CC6600;
  }
.column-tempo > .card > h5 {
  background-color: #CC6600;
  color: white;
  text-align: center;
  align-content: center;
  border: none;

}
.receitas h4{
    color:#CC6600;
}

.row-beer {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 10px;
  border-bottom: solid 1px #CC6600;
}

.equip {
    border: solid 1px #CC6600;
    padding: 0 4px;
  }
  
.equip h3 {
    border-style: none;
    color: #CC6600;
  }
.equip h5 {
    border-style: none;
    color: #CC6600;
  }
  
.equip i {
    font-size: 1.2em;
    color: #CC6600;
  }
  

/* Create four equal columns that sits next to each other */
.column-beer {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 2px 10px;
  color: #EEE;
}

.column-beer img {
  margin-top: 2px;
  vertical-align: middle;
}

/* Float four columns side by side */
.column {
  float: left;
  width: 25%;
  padding: 0 10px;
  margin-bottom: 20px;
}
.column_midias {
  float: left;
  width: 25%;

}

.column_midias > .img {
  padding: 1px;
  margin: 1px;

}

/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.topleft {
  position: absolute;
  top: 8px;
  left: 12px;
  font-size: 20px;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 600px) {
  .column_midias {
    width: 100%;
    display: block;
    margin-bottom: 2px;
  }
}


/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column-beer, .column_midias {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column-beer, .column_midias {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}

.nav_rod{
float: right;  
color: #CC6600;
padding: 4px;
border-radius: 5px;
}

.navega > a {
color:#CC6600;
text-decoration: none;
padding: 0 2px;
font-style: oblique;
text-align: center;
border-radius: 5px;
}

.topnav {
  overflow: hidden;
  border-radius: 5px;
}

.topnav a {
text-decoration: none;
border: solid 1px #CC6600;
margin: 0 4px;
}   

.topnav a {
  float: left;
  display: block;
  color: #CC6600;
  text-align: center;
  padding: 2px 8px;
  text-decoration: none;
  border-radius: 5px;

}
.topnav a:hover {
  background-color: #EEE;
  color: black;
  border: solid 1px #CC6600;
}

.topnav a.active {
  background-color: #CC6600;
  color: #FFF;
}

.topnav .icon {
  display: none;
}
.moldura, .moldura-tag {
text-align: left;
background-color: #FFF;
color: #CC6600;
padding: 4px;
border-radius: 5px;
border: solid 1px #CC6600;
display:inline-block;
}

.nav_rod{
float: right;  
color:#CC6600;
padding: 4px;
border-radius: 5px;
border: solid 1px #CC6600;
}
.navega > a {

color:#CC6600;
text-decoration: none;
padding: 0 2px;
font-style: oblique;
text-align: center;
border-radius: 5px;
}
.navega a:hover {
border: solid 1px #CC6600;
  color: #CC6600;
}

.atualiza {
text-align: left;
border: solid 1px #CC6600;
}

.tag {
  border: solid 1px #CC6600;
}

/* Float four columns side by side */
.column-tempo {
  float: left;
  width: 25%;
  padding: 0 10px;
}

/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns Linha Tempo*/
@media screen and (max-width: 600px) {
  .column-tempo {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}