body{
  background-color: black;
}

.bodywrap {
  overflow: hidden;
  max-width: 100%;
  position: static;
  display: block;
}

  .backgroud{

  }
    #bioBackground{
      z-index: -2;
      width: 130%;
      opacity: 0.7;
      filter: blur(5px);
       position: absolute;
    }
  .bioText {
    margin: 5%;
    width: 45%;
    background: grey;
    opacity: 0.65;
  }

    #bioP{
      color: white;
      padding: 3%;
      text-align: justify;
      font-size: large;

    }

/*music*/
  iframe.music {
    width: 90%;
    max-width: 660px;
    height: 160px;  
    border-radius:12px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 10px;
  }


/*Media*/
iframe.media{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

#moreVideos{
  display: none;  
}

#seeMoreBtn{
  align-items: center;
  color: black;
}

#moreFotos{
  display: none;
}

#seeMoreFotosBtn{
  align-items: center;
  color: black;

}


.imageGrid{
  margin-right: 5%;
  margin-left: 5%;
}

.mediaFotos{
  max-height: 450px;
  padding: 5px;
}

/*next gigs*/
  #optune{
    margin: 10px;
  }

  .flyerVertical{
    width: 20%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
  }

  .flyerHorizontal{
    width: 30%;   
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
  }

  iframe.media{
    margin: 10px;
  }
 
  .youtubeLandscape{
    width: 70%;
  }

/*contact*/
  form{
    background-color: grey;
    padding: 15px;    
    margin-left: 30%;
    margin-right: 30%;
    margin-top: 2%;
    margin-bottom: 2%;
  }

  .form{
    border-radius: 5px;
    border: 2px solid dimgrey;
  }

  input{
    margin-right: 5%;
  }

  #message{
    width: 90%;
    height: 50%;
  }





/******************* 
 ****** footer *****
 *******************/

#footer {
  position: fixed;
  padding: 20px 20px 0px 20px;

  bottom: 0;
  width: 100%;
  /* Height of the footer*/ 
  height: 40px;
}


/******************************************************* *************************** ***************************  
 ****** medium screen *******
 ****************************/
@media all and  (min-width: 500px) and (max-width: 2017px){ 
 .bioText {
    margin: 5%;
    width: 90%;
    background: grey;
    opacity: 0.5;
  }

  iframe.music {  
    display: block;
    width: 90%;
    margin: 0 auto;
  }


  /*Next gigs*/
  .flyerVertical{
    width: 40%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
  }

  .flyerHorizontal{
    width: 60%;   
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
  }

  /*Media*/
  .youtube{
  
  }

  form{
    background-color: grey;
    padding: 15px;    
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 5%;
    margin-bottom: 5%;
  }
}

/**************************** *************************** *************************** *************************** 
 *** small screen (handy)****
 ****************************/
@media all and (max-width: 500px){ 
   .bioText {
    margin: 5%;
    width: 90%;
    background: grey;
    opacity: 0.6;
  }

  iframe.music {
    display: block;
    width: 90%;
    margin: 2%;
    margin: 0 auto;
  }
 

/*Media*/
iframe.media{
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10%;
  padding-right: 10%;
  width: 90%;

}




  .flyerVertical{
    width: 40%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
  }

  .flyerHorizontal{
    width: 60%;   
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
  }
  .youtubeLandscape{
    width: 560px;
    height: 315px;
  }

  form{
    background-color: grey;
    padding: 15px;    
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 5%;
    margin-bottom: 5%;
  }

}