
<<<<<<<<<<<<<<<< CLAM 

body {
  width: 100%;
  margin: 0 auto;
  }

.example {background: purple;}


/* Extra small devices (phones, 600px and down) */
@media only screen and (min-width: 350px) {
  .example {background: yellow;}
  
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .example {background: green;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .example {background: blue;}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .example {background: orange;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .example {background: pink;}
}


/*
@media only screen and (min-width: 768px) {
  body {
    max-width: 980px;
    margin: 0 auto;
    }
  }

*/

/* FONTE GOTHAM */
  @font-face {
    font-family: 'Gotham';
    src: url('gotham.otf');
    src: url('gotham.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
  }
/* -------------------- */

/* FONTE FIRA */
@font-face {
  font-family: 'Fira-light';
  src: url('FiraSans-Light.ttf');
  src: url('FiraSans-Light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Fira-regular';
  src: url('FiraSans-Regular.ttf');
  src: url('FiraSans-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Fira-bold';
  src: url('FiraSans-Bold.ttf');
  src: url('FiraSans-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* -------------------- */

/* FONTE VOLLKORN */
@font-face {
  font-family: 'Vollkorn-regular';
  src: url('Vollkorn-Regular.ttf');
  src: url('Vollkorn-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Vollkorn-bold';
  src: url('Vollkorn-Bold.ttf');
  src: url('Vollkorn-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
/* -------------------- */

h1 {

  font-family: 'Roboto', serif;
  font-weight: regular;
  font-size: 5em;
  text-transform: uppercase;
  color: #red;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 10px;
  
  /* 
  line-height: 1em;
  */
}

@media only screen and (min-width: 768px) {
    /* For tablet: */
    h1 {
        font-family: 'Roboto', serif;
        font-weight: regular;
        font-size: 92px;
        text-transform: uppercase;
        color: #red;
        text-align: center;
        margin: 0 auto;
        margin-bottom: 10px;    
    }
  }

  .h1-color {
    font-family: 'Vollkorn-regular', serif;
    font-weight: regular;
    font-size: 5em;
    text-transform: uppercase;
    line-height: 1em;
    color: #5D3003;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 10px;
  }

  @media only screen and (min-width: 768px) {
      /* For tablet: */
      .h1-color {
        font-family: 'Vollkorn-regular', serif;
        font-weight: regular;
        font-size: 5em;
        text-transform: uppercase;
        line-height: 1em;
        color: #5D3003;
        text-align: center;
        margin: 0 auto;
        margin-bottom: 10px;
      }
    }
.h3Class {
  font-family: 'Roboto', serif;
  font-weight: regular;
  font-size: 1,92em;
  color: #f3ebeb;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 10px;
}

h3 {
  font-family: 'Roboto', serif;
  font-weight: regular;
  font-size: 1,92em;
  color: white;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 10px;
}

@media only screen and (min-width: 768px) {
    /* For tablet: */
  h3 {
    font-family: 'Vollkorn-regular', serif;
    font-weight: regular;
    font-size: 32px;
    color: red;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 10px;
  }
}

.h3-color {
  font-family: 'Vollkorn-regular', serif;
  font-weight: regular;
  font-size: 1,92em;
  color: yellow;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 10px;
}

@media only screen and (min-width: 768px) {
    /* For tablet: */
  .h3-color {
    font-family: 'Vollkorn-regular', serif;
    font-weight: regular;
    font-size: 32px;
    color: blue;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 10px;
  }
}


.h4Class {
  font-color: white;
  font-family: 'Roboto', serif;
  font-weight: regular;
  font-size: 1.4em;
  line-height: 1.5em;
  color: white;
  text-align: center;
  margin: 0 auto;
  padding-top: 20px;
}

h4 {
  font-color: white;
  font-family: 'Roboto', serif;
  font-weight: regular;
  font-size: 1.4em;
  line-height: 1.5em;
  color: black;
  text-align: center;
  margin: 0 auto;
  padding-top: 20px;
}


@media only screen and (min-width: 768px) {
    /* For tablet: */
  h4 {
    font-family: 'Roboto', serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 36px;
    color: black;
    text-align: center;
    margin: 0 auto;
    padding-top: 20px;
  }
}

h5 {
  font-family: 'Fira-regular', sans-serif;
  font-weight: regular;
  font-size: 20px;
  padding: 32px 24px 0px 24px;
}

p {
  font-family: 'Fira-regular', sans-serif;
  font-weight: regular;
  font-size: 16px;
  line-height: 24px;
  padding: 32px 24px 32px 24px;
  margin-bottom: 0px;
}


.RespiroFooter{
    padding-top:5%;
    padding-right:;
    padding-bottom: 4%;
    padding-left:;
    margin-bottom: 0px;
}

@media only screen and (min-width: 768px) {
    /* For tablet: */
  p {
    font-family: 'Fira-regular', sans-serif;
    font-weight: regular;
    font-size: 20px;
    line-height: 32px;
    padding: 32px 24px 32px 24px;
  }
}


/* unvisited link */
a:link {
  color: #ea5c5a;
}

/* visited link */
a:visited {
  color: #ea5c5a;
}

/* mouse over link */
a:hover {
  color: #ea5c5a;
}


.menu {
  font-family: 'Roboto', sans-serif;
  font-weight: Boldr;
  font-size: 1.2em;
  text-align: center;
  line-height: 2.5em;
  letter-spacing: -0.01em;
  padding: 20px 20px 0px 20px;
}

@media only screen and (min-width: 768px) {
    /* For tablet: */
  .menu {
    font-family: 'Fira-regular', sans-serif;
    font-weight: regular;
    font-size: 24px;
    text-align: center;
    line-height: 40px;
    letter-spacing: -0.01em;
    padding: 20px 20px 0px 20px;
  }
}


.NavMenu {
	z-index:1000;
}

.abre {
  background: url("../HTMLResources/capa.jpg"), linear-gradient(to bottom, rgba(255,210,255,0), rgba(0,0,0,0));
  padding: 32px;
  background-blend-mode: lighten;
  background-position: center;
  background-size: cover;
  height: 100%;
  width: 100%;
  padding: 32px;
  margin: auto;
  position: relative;
  display: table;
}

.abremusica {
  background: url("../HTMLResources/abremusica.jpg"), linear-gradient(to bottom, rgba(255,210,255,0), rgba(0,0,0,0));
  padding: 32px;
  background-blend-mode: lighten;
  background-position: center;
  background-size: cover;
  height: 100%;
  width: 100%;
  padding: 32px;
  margin: auto;
  position: relative;
  display: table;
}

.abre2 {
  background: url("../HTMLResources/musicarua.jpg"), linear-gradient(to bottom, rgba(255,210,255,0), rgba(0,0,0,0));
  padding: 32px;
  background-blend-mode: lighten;
  background-position: center;
  background-size: cover;
  height: 100%;
  width: 100%;
  padding: 32px;
  margin: auto;
  position: relative;
  display: table;
}

.menu-content {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 32px;
  height: 100%;
  margin: auto;
  position: relative;
}

.img-texto {
  /*margin: 0px auto;*/
  margin-top: 20px;
}


.header-titulo {
  font-family: 'Gotham', sans-serif;
  /*
  color:#676767;
  */
  color:#000000;
  font-weight: regular;
  /*
  text-align: right;
  padding-right: 16px;*/
}

.conteudo {
  min-width: 300px;
  margin: 0 auto;
}

.conteudo-interno {
  min-width: 300px;
  margin: 0 auto;
  padding-top: 40px;
}

.conteudo-texto{
    height: 100%;
    padding-top: 15%;   
    padding-right: 0%;   
    padding-bottom: 20%;   
    padding-left: 0%;
}

img.displayed {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}

img.scroll {
   position:fixed;right:0;left:92%;z-index:1030;
   top:60px;
}


img.scrollgif {
   position:absolute;right:0;left:92%;z-index:1;
   top:70px;
}


@media only screen and (min-width: 768px) {
    /* For tablet: */
  img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    width: 200px;
  }
}

.row2:after {
  content: "";
  clear: both;
}


.row:after {
  content: "";
  display: table; 
  clear: both;
}

.column
{
  float: left;
  width: 33%;
}


.discos {
    width: 33%; 
    float: left; 
    padding-top: 10px;   
    padding-right: 10px;   
    padding-bottom: 10px;   
    padding-left: 10px;
    text-align: center
  }
  

.tituloConteudo{
    font-family:Permanent Marker;
    font-style:black; 
    font-size:42px;
    font-weight:black;
    text-align:center; 
    padding-top:0%; padding-right:0px; padding-bottom:0%; padding-left:0px; 
}

.tituloAbre{
    font-family:Permanent Marker;
    font-style:black; 
    font-size:42px;
    font-weight:black;
    text-align:center; 
    top:0px;
    padding-top:30%; padding-right:0px; padding-bottom:0%; padding-left:0px; 
}

.tituloInterno{
    font-family:Permanent Marker;
    font-style:black; 
    font-size:42px;
    font-weight:black;
    text-align:center; 
    top:0px;
    padding-top:50%; padding-right:0px; padding-bottom:0%; padding-left:0px; 
}


.tituloConteudoBranco{
    font-color:white;
    font-family:Permanent Marker;
    font-style:black; 
    font-size:42px;
    font-weight:black;
    text-align:center; 
    padding-top:20px; padding-right:0px; padding-bottom:0px; padding-left:0px; 
}

.fontRoboto{
    font-family:Roboto;
    font-style:black; 
    font-size:12px;
    font-weight:black;
}


.titulo {
  margin: 20 auto;
  display: table-cell;
  vertical-align: middle;
  align: center;
}

.titulo-menu {
  margin: 20 auto;
  vertical-align: middle;
  align: center;
}

.intertitulo {
  margin: 0 auto;
  vertical-align: middle;
  text-align: center;
  font-family: 'Vollkorn-regular', serif;
  color: #5D3003;
  font-weight: regular;
  font-size: 36px;
  line-height: 40px;
  text-align: center;
  letter-spacing: -0.04em;
  padding-top: 20px;
  padding-left: 24px;
  padding-right: 24px;
}

@media only screen and (min-width: 768px) {
    /* For tablet: */
  .intertitulo {
    margin: 0 auto;
    vertical-align: middle;
    text-align: center;
    font-family: 'Vollkorn-regular', serif;
    color: #5D3003;
    font-weight: regular;
    font-size: 48px;
    line-height: 52px;
    text-align: center;
    letter-spacing: -0.04em;
    padding-top: 20px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

.logo-especiais {
   width:119px;
   height:80px;
   text-align: center;
   margin-left: 16px;
   margin-bottom:12px;
   margin-top:10px;
}

.logo-especial {
	text-align: center;
	/*
   width:119px;
   height:32px;

   margin-left: 16px;
   margin-bottom:12px;
   margin-top:1px;
   */

}

.titulo-interno {
  font-family: 'Vollkorn-regular', serif;
  font-weight: regular;
  font-size: 48px;
  text-transform: uppercase;
  line-height: 52px;
  color: white;
  text-align: center;
  margin: 0 auto;
  vertical-align: bottom;
  padding-top: 270px;
}

.titulo-interno2 {
  font-family: 'Vollkorn-regular', serif;
  font-weight: regular;
  font-size: 44px;
  text-transform: uppercase;
  line-height: 48px;
  color: white;
  text-align: center;
  margin: 0 auto;
  vertical-align: bottom;
  padding-top: 180px;
}

@media only screen and (min-width: 768px) {
    /* For tablet: */
  .titulo-interno {
    font-family: 'Vollkorn-regular', serif;
    font-weight: regular;
    font-size: 52px;
    text-transform: uppercase;
    line-height: 56px;;
    color: white;
    text-align: center;
    margin: 0 auto;
    vertical-align: bottom;
    padding-top: 270px;
  }
}

@media only screen and (min-width: 768px) {
    /* For tablet: */
  .titulo-interno2 {
    font-family: 'Vollkorn-regular', serif;
    font-weight: regular;
    font-size: 48px;
    text-transform: uppercase;
    line-height: 52px;;
    color: white;
    text-align: center;
    margin: 0 auto;
    vertical-align: bottom;
    padding-top: 230px;
  }
}

.quote {
  font-family: 'Vollkorn-regular', serif;
  font-weight: regular;
  font-size: 32px;
  line-height: 44px;
  font-style: italic;
  color: #cc6600;
  text-align: center;
  margin: 0 auto;
  padding: 32px 24px 0px 24px;
  display: table-cell;
  vertical-align: bottom;
}

@media only screen and (min-width: 768px) {
    /* For tablet: */
  .quote {
    font-family: 'Vollkorn-regular', serif;
    font-weight: regular;
    font-size: 40px;
    line-height: 52px;
    font-style: italic;
    color: #cc6600;
    text-align: center;
    margin: 0 auto;
    padding: 32px 24px 0px 24px;
    display: table-cell;
    vertical-align: bottom;
  }
}

.autor{
  font-family: 'Fira-light', sans-serif;
  color: #5D3003;
  font-weight: light;
  font-size: 16px;
  text-align: center;
  padding-bottom: 32px;
}

@media only screen and (min-width: 768px) {
    /* For tablet: */
  .autor{
    font-family: 'Fira-light', sans-serif;
    color: #5D3003;
    font-weight: light;
    font-size: 20px;
    text-align: center;
    padding-bottom: 32px;
  }
}

.header {
  background-color: #f3ebeb;
  top:0px;
  width:100%;
  /*
  max-width: 980px;
  */
  height:100px;
  position:fixed;right:0;left:0;z-index:1030;
  border: 3	px solid blue;
  border-collapse: collapse;
  margin: 0 auto;
  /*
  max-width:980px;
  text-align: center;
  align: middle;
  */
}

 /*
  CSS Corpo texto artigos
*/

.paragrafo{
  padding-top: 3%;
  padding-right: 10%;
  padding-bottom: 0%;
  padding-left: 10%;
}


 /*
  CSS do Selo
*/

.capa{
    max-whidth: 20px;
}

.img3{
    transition: .5s;
    opacity: 0.8;
    display: block;
}

.quadro:hover .overlay {
  opacity: 1;
}

.img3:hover .overlay{
    transform: scale(4.1);
    opacity: 1;
}

.quadro{
    overflow: hidden;
    position: relative;
 }

@media screen and (max-width: 600px) {

  
  .discos {
    width: 100%; 
    float: left; 
    padding-top: 10px;   
    padding-right: 10px;   
    padding-bottom: 10px;   
    padding-left: 10px;
    text-align: center
  }
  
  
}

/*
#a0a09c
  Fim CSS do Selo
*/


.footer {
  height: 80px;
  margin: 24 auto;
  position: relative;
  display: table;
  background-color: orange ;
  width: 100%;
  text-align: center;
  padding-top: 30px;  
  
}

.nav-footer {
  text-align: center;
  font-family: 'Fira-regular', sans-serif;
  color: #A25100!important;
  font-weight: regular;
  font-size: 16px;
  padding: 0 15px;
}

.nav-footer-hidden {
  text-align: center;
  font-family: 'Fira-regular', sans-serif;
  color: #A25100!important;
  font-weight: regular;
  font-size: 16px;
  padding: 0 15px;
  visibility: hidden;
}

@media only screen and (min-width: 768px) {
    /* For tablet: */
  .nav-footer {
    text-align: center;
    font-family: 'Fira-regular', sans-serif;
    font-weight: regular;
    font-size: 20px;
    padding: 0 15px;
    color: #A25100;
  }
}

@media only screen and (min-width: 768px) {
    /* For tablet: */
  .nav-footer-hidden {
    text-align: center;
    font-family: 'Fira-regular', sans-serif;
    font-weight: regular;
    font-size: 20px;
    padding: 0 15px;
    visibility: hidden;
    color: #A25100;
  }
}

.box {
  size:90%;
  margin:24px 24px;
  text-align: center;
  background: linear-gradient(150deg, #cc6600, #5D3003);
  color: white;
  padding: 24px 16px;
  font-family: 'Fira-light', sans-serif;
  font-weight: light;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.9px;
}


@media only screen and (min-width: 768px) {
    /* For tablet: */
    .box {
      margin:24px 24px;
      text-align: center;
      background-color: black;
      color: white;
      padding: 32px 16px;
      font-family: 'Fira-light', sans-serif;
      font-weight: light;
      font-size: 24px;
      line-height: 28px;
      letter-spacing: 1.2px;
    }
  }