html, body {
    overflow-x: hidden; 
}

body {
    margin: 0;
    background-color: #903d38;
}

#logo {
    width: 23%;
    margin-left: 40%;
    margin-top: -23%;
    z-index: 1;
    position: absolute;
}

.topo {
    background-image: url('img/topo.jpg');
    background-position: center center;
    padding: 13px;
    background-size: cover;
    height:49vw;
    transition: transform 2s, filter 1.5s ease-in-out;
    transform-origin: center center;
    filter: brightness(50%);
    z-index: -1;
    position: static;

}
.topo:hover {
    filter: brightness(100%);
    transform: scale(1.1);
    
}



/* BARRA DE NAVEGAÇÃO */
.desktop {
    font-family: 'Special Elite', cursive;
    overflow: hidden;
    background-color: transparent;
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index:1000;
}



/* LINKS DA BARRA DE NAVEGAÇÃO */
.desktop a {
    float: left;
    text-transform:uppercase;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 16px 16px;
    text-decoration: none;
}

#watch-sonja {
    list-style: none;
    float: right;
}

#watch-sonja a {
    color: #962824;
}

/* HOVER DA BARRA DE NAVEGAÇÃO */
.desktop a:hover {
    background: #ddd;
    color: black;
}



/* LINKS DA NAVEGAÇÃO MOBILE */
.mobile {
    font-family: 'Special Elite', cursive;
    width: 100%;
    height: 50px;
    text-transform: uppercase;
    background-color: transparent;
    position: absolute;
    z-index: 1;
    margin: 0;
}

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

.mobile ul li {
    list-style: none;
}



/* ÍCONE E LINHAS DA NAVEGAÇÃO MOBILE */
.hamburger{
    position: relative;
    height: 100%;
}

.line {
    width: 40px;
    height: 4px;
    background-color: white;
    position: absolute;
    margin-left: 10px;
    transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) 0.32s;
}

.line1 {
    top: 20%;
}

.line2 {
    top: 45%; 
}

.line3 {
    top: 70%;
}

.hamburger:hover {
    cursor: pointer;
}

.mobile-menu {
    background-color: transparent;
    padding-left:0px;
    line-height: 100%;
    list-style-type: none;
    margin-top: -10px;
}

nav.desktop a {
    text-decoration: none;
    color: #000000;
}

nav a:hover{
    color: #00899c;
}

.desktop {
  display: none;
}




/* SOBRE */
.release h1 {
    margin:55px;
    margin-left: 5%;
    padding-top: 4%;
    width: 80%;
}
.release {
    width: 100%;
    height: 100%;
    padding: 25px;
    background-color: #903d38;
}

p b {
    color: #e1c23a;
}

#vrelease {
    align-content: center;
    display: block;
    margin: 0 auto;
    background: #e1c23a;
    padding: 10px;
    max-width: 100%;
}

.release p {
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color:#e1c23a;
    margin-top: -13%;
    padding:15%;
    text-align: justify;
    height: 40%;
}

.release a {
    border-bottom: 1px solid #179ab3;
    text-decoration: none;
    color: #179ab3;
}

#arelease {
    float:left;
    width: 100px;
}



#frelease {
    -webkit-filter: grayscale(100%) blur(2px); 
    filter: blur(2px) grayscale(100%);;
    max-width: 26%;
    margin: 5%;
    padding-top:7%;
    float: left;
    margin-top: -5%;
}

#frelease:hover {
    transition: filter 1.5s;
    -webkit-filter: grayscale(0) blur(0.2px); 
    filter: blur(0.2px) grayscale(0);;
}


/*  DISCOGRAFIA 2021 e 2023 */
.discografia h1, .discografia2 h1 {
    margin:55px;
    margin-left: 13%;
    margin-top: 10%;
    width: 70%;
}
#rosa, #rosa2 {
    z-index: -10;
    position: absolute;
    margin-top: -45px;
    margin-left: -210px;
}

#player, #player2 {
    background-color: #31231d;
    width: 384px;
    position:absolute;
    padding:15px;
    margin-left: 3%;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 18px;
    color: #eee9d3;
    font-weight:bold;
    display:none;
}


#titulo, #titulo2 {
    margin: 0;
}

#player img, #player2 img {
    width: 30px;
    
}

#capa, #capa2 {
    width:412px;
    margin-left: 3%;
    position: relative;
}


#play, #play2 {
    position: absolute;
    width:412px;
}


#ficha, #ficha2 {
    column-gap: 20px;
    background-color:#e1c23a;
    border: 1px solid #e1c23a;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 18px;
    max-width: 100%;
    color: #534c2a;
    padding: 20px;
    margin-top: 15%;
    margin-right: 20%;
    float: right;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#ficha p b, #ficha2 p b {
    color: #903d38;
}

/* Three image containers (use 25% for four, and 50% for two, etc) */
.column, .column2 {
  float: right;
  width: 20%;
    margin:9px;
}
.row, .row2 {
    width: 80%;
}

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

#pd, #pd2 {
    margin-top: -5%;
    margin-left: 950px;
    font-family: 'Special Elite', cursive;
    font-size: 26px;
    position: absolute;
    color: #eee9d3;
    
}

#pd p, #pd2 p {
    border-bottom: 1px solid #eee9d3;
}



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


/* GALERIA */
.fundo {
    width: 100%;
    height: 100%;
    background-color: #903d38;
   
}

.galeria {
    padding-top: 4%;
    margin: 5%;
    width: 70%;
    margin-left: 13%;
}

h1 {
    font-family: 'Special Elite', cursive;
    color: #eee9d3;
    font-size: 24px;
    letter-spacing: 15px;
    font-weight: 100;
    border-bottom: 1px solid #eee9d3;
    padding: 8px;
}

.galeria p {
    font-family: 'Open Sans Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 5px;
    text-align: center;
    font-size: 24px;
    background-color: #eac655;
    color: #5e5429;
    padding: 10px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    margin-top: -20px;
    word-wrap: break-word;
    height: auto;
     width:320px;
}

.item {
    float: left;
    max-width: 100%;
    margin: 3px;
}

.fade-in {
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

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


.item img {
    border: 12px solid #eac655;
    width:320px;
    border-top-left-radius: 25px
    border-top-right-radius: 25px;
    height:209.5px;
    background: rgba(255, 255, 255, .6);
    color: rgba(0, 0, 0, .6);
}

.item img:hover {
    opacity: 1;
}

/* FOOTER */

@media (max-height:800px){
	footer { position: static;  }
	header { padding-top:40px; }
}

footer {
    width: 100%;
}
.ft{
    float: left;
    width: 33%;
}

.ft a{
    text-decoration: none;
    color: #eee9d3;
}


.ft p {
    font-family:'Open Sans Condensed', sans-serif;
    color: #eee9d3;
    font-weight: 800;
    font-size: 20px;
    text-align:center;
    margin-top: 12%;
}


#logoft {
    width:30%;
    margin-bottom:15%;
    margin-left:20%;
}

.ms img {
    width: 7%;
    margin-left: 9%;
    margin-top: 12%;
    
}

#fb {
 opacity: 0.5;   
}
#fb:hover {
    opacity: 1;
}

#twitter {
    opacity: 0.5;
}
#twitter:hover {
    opacity: 1;
}

#youtube {
    opacity: 0.5;
}
#youtube:hover {
    opacity: 1;
}

#insta  {
    opacity: 0.5;
}
#insta:hover {
    opacity: 1;
}

@media (max-width: 880px) {

	.ft {
		display: block;
		width: 100%;
		text-align: center;
	}
    #logoft {
        width:20%;
        margin-right: 18%;
        margin-top:0;
    }
    
    .ms {
        margin-top: -20%;
        margin-right: 8%;
    }

}

/* MEDIA QUERY */

@media (min-width: 666px){
    .desktop {
      display: block;
    }
    .mobile {
      display: none;
    }
  }
  
  
  @media (min-width: 0px) and (max-width: 1139px) {
      { 
          float: none;
          display: block;
          margin: 6%;
          flex-direction: column;
      }
      #capa {
          max-width: 90%;
          height: auto;
          height: 100%;
          display: block;
          margin-left: auto;
          margin-right: auto;
      }
      #player {
          position: static;
          margin-left: auto;
          margin-right: auto;
          display: block;
          max-width: 82%;
      }
      #pd {
          margin-left: 10%;
          margin-top: 1%;
      }
      .item {
          width: 100%;
      }
      .item img {
          width: 100%;
          height: auto;
      }
      .item p {
          width: 100.6%;
          height: auto;
      }
  }
  
  @media (min-width: 1140px) and (max-width: 1329px) {
      #ficha {
          margin-top: 0;
          margin-right: 10%;
          width: 50vw;
          
      }
      
      #pd {
          margin: 0 auto;
          display: block;
      }
      .item p {
          width: 100.6%;
          height: auto;
      }
      .item {
          margin: 2% 2% 2% 5%;
      }
      .item p {
          width: 94.16%;
      }
      #ficha p {
          height: 330px;
      }
  }
  
  @media (min-width: 1330px) and (max-width: 1442px) {
      #ficha p {
          height: 300px;
      }
  }
  
  
  @media (min-width: 1330px) and (max-width: 1908px) {
      #ficha {
          margin-top: 0;
          margin-right: 15%;
          width: 45vw;
      }
      #pd {
          margin-top: -3%;
          margin-left: 43%;
      }
      .item {
          margin: 2% 2% 2% 5%;
      }
      .item p {
          width: 94.2%;
      }
  
  }
  @media (min-width: 1908px) {
      #frelease {
          width: 18%;
          margin-top: -170px;
      }
      #ficha {
          margin-top: 3%;
          margin-right: 20%;
          width: 40vw;
      }
      #player {
          margin-left: 14%;
      }
      #capa {
          margin-left: 14%;
      }
      #pd {
          margin-left: 49%;
          margin-top: -3%;
      }
      .item {
          margin: 50px;
      }
  
      .item p {
          width: 94.2%;
      }
  
  } margin-top
      
  
  
      /*duplicada CALMA  */
  
      @media (min-width: 0px) and (max-width: 1139px) {
          {
             float: none;
             display: block;
             margin: 6%;
             flex-direction: column;
         }
         
         #capa2 {
             max-width: 90%;
             height: auto;
             height: 100%;
             display: block;
             margin-left: auto;
             margin-right: auto;
         }
         #player2 {
             position: static;
             margin-left: auto;
             margin-right: auto;
             display: block;
             max-width: 82%;
         }
         #pd2 {
             margin-left: 10%;
             margin-top: 1%;
         }
         .item2 {
             width: 100%;
         }
         .item2 img {
             width: 100%;
             height: auto;
         }
         .item2 p {
             width: 100.6%;
             height: auto;
         }
     }
     
     @media (min-width: 1140px) and (max-width: 1329px) {
         #ficha2 {
             margin-top: 0;
             margin-right: 10%;
             width: 40vw;
         }
         
         #pd2 {
             margin: 0 auto;
             display: block;
         }
         .item2 .p2 {
             width: 100.6%;
             height: auto;
         }
         .item2 {
             margin: 2% 2% 2% 5%;
         }
         .item .p2 {
             width: 94.16%;
         }
         #ficha2 .p2 {
             height: 330px;
         }
     }
     
     @media (min-width: 1330px) and (max-width: 1442px) {
         #ficha2 p {
             height: 300px;
         }
     }
     
     
     @media (min-width: 1330px) and (max-width: 1908px) {
         #ficha2 {
             margin-top: 0;
             margin-right: 15%;
             width: 45vw;
         }
         #pd2 {
             margin-top: -3%;
             margin-left: 43%;
         }
         .item2 {
             margin: 2% 2% 2% 5%;
         }
         .item .p2 {
             width: 94.2%;
         }
     
     }
     @media (min-width: 1908px) {
         #frelease {
             width: 18%;
             margin-top: -170px;
         }
         #ficha2 {
             margin-top: 3%;
             margin-right: 20%;
             width: 40vw;
         }
         #player2 {
             margin-left: 14%;
         }
         #capa2 {
             margin-left: 14%;
         }
         #pd2 {
             margin-left: 49%;
             margin-top: -3%;
         }
         .item2 {
             margin: 50px;
         }
     
         .item .p2 {
             width: 94.2%;
         }