@media only screen and (max-width: 1285px) {
  .album-order {
   padding:1.5em 2em 2em 2em;
   background:#444444;
   margin-top:0;
  }

  .mb-biography-details {
    font-size:0.7em;
    line-height:0.9em;
  }
}


@media only screen and (max-width: 1024px) {
   body {
    width:100%;
    margin:0;
    padding:0;
    background-image: url('../Mark_Butcher_musician_mobile.jpg');
    background-size:cover;
   }

  .social {
    position: absolute;
    top: 0;
    right:10px;
    margin-top: 0;
    float:right;
    text-align: right;
    z-index: 40;
   }

  .social a {
    width: auto; 
    height:auto;
    margin:4px;
    padding:0;
    color:#ffffff; 
    border:0 solid transparent; 
    border-radius:0; 
    float:right;
   }

  .social a i {
    font-size: 20px;
   }

  .social a:hover {
    background-color:transparent;
    border:0 solid transparent;
   }

  .mark-butcher-logo {
   padding-top: 25%;
   width:60%; 
   max-width: 500px;
  }

.mb-button {
   width:85%;
   margin: 2px 1px 4px 0;
   background:rgba(0,0,0,0.5);
   font-family:'Nanum Gothic', sans-serif;
   font-weight:300;
   color: #ffffff;
   border:1px solid #ffffff;
   text-decoration: none;
   padding: 5px 10px;
   text-align: center;
   font-size: 1em;
   line-height:1em;
  }

.mb-button:hover {
   background:rgba(0,0,0,0.5);
   color:#949494;
   border:1px solid #949494;
  }

  .mb-biog-photo {
    display:block;
    width:90%;
    text-align:center;
    float:left;
   }

  .mb-info { 
    text-align:left;
    color:#eeeeee;
   }

.mb-info p {
    clear:both;
    display:block;
    padding:0 30px;
    line-height:auto;
    font-size:1.4em;
   }

  .album-order {
   padding:1.5em 2em 2em 2em;
   background:#444444;
   margin-top:0;
  }

.gigs {
    background-image:url('mb-texture-bg.jpg');
    background-repeat:repeat;
   }

.gigsmain {
   clear:both;
   padding-top:40px;
   padding-bottom:40px;
   width:70%;
   margin:0 auto;
   text-align:center;
  }

.poster {
   width:80%;
   border:0;
  }

.about-mark {
   width:100%;
   height:auto;
   padding:40px 0;
   background-color:#5a5a5a;
   font:0.8em;
  }

  .album-order {
   width:100%;
   background:#444444;
   margin:0 auto;
   padding:50px 0;
  }

.album-cover {
   float:none;
   display:block;
   margin:0 auto;
   text-align:center;
}

.album-cover img {
   margin:0;
   padding:0;
   width:90%;
}

.album-details {
   float:none;
   display:block;
   margin:30px auto;
   text-align:center;
   width:100%;
  }

  .nowplayingtitle {
    width:40%;
    height:40%;
  }

}






@media screen and (max-width:768px) {
  body {
   width:100%;
   background-image: url('../Mark_Butcher_musician_mobile.jpg');
   background-size:cover;
  }

  .social {
   position: absolute;
   top: 0;
   right:10px;
   margin-top: 0;
   float:right;
   text-align: right;
   z-index: 40;
  }

  .social a {
   width: auto; 
   height:auto;
   margin:4px 4px 0 4px;
   padding:0;
   color:#ffffff; 
   border:0 solid transparent; 
   border-radius:0; 
   float:right;
  }

  .social a i {
   font-size: 20px;
  }

  .social a:hover {
   background-color:transparent;
   border:0 solid transparent;
  }

  .mark-butcher-logo {
   padding-top: 4%;
   width:60%; 
   max-width: 500px;
  }

.mb-button {
   width:85%;
   margin: 2px 1px 4px 0;
   background:rgba(0,0,0,0.5);
   font-family:'Nanum Gothic', sans-serif;
   font-weight:300;
   color: #ffffff;
   border:1px solid #ffffff;
   text-decoration: none;
   padding: 5px 10px;
   text-align: center;
   font-size: 1em;
   line-height:1em;
  }

.mb-button:hover {
   background:rgba(0,0,0,0.5);
   color:#949494;
   border:1px solid #949494;
  }

  .mb-main-heading {
   font-size:0.8em;
  }

  .album-cover {
   float:none;
   display:block;
   width:100%;
   height:100%;
  }

  .albuminfo {
   font-size:0.7em;
   height:100%;
  }

  .mb-album-order-button {
   background:rgba(0,0,0,0.8);
   font-family:'Nanum Gothic', sans-serif;
   font-weight:300;
   display: inline-block;
   margin:5px auto;
   width:5%;
   margin: 2px 1px 4px 0;
   font-size: 1em;
   line-height:1.4em;
  }

  .mb-album-order-button:hover {
   background:rgba(0,0,0,0.5);
   color:#949494;
   border:1px solid #949494;
  }

  .tracklisting {
   background-image: url('Mark_Butcher_Now_Playing_album_tracklisting_mobile.jpg'); 
   background-attachment: fixed;
   background-position: 27% top;
   background-repeat: no-repeat;
   background-size: cover;
  }

  .mb-info { 
   text-align:left;
   color:#eeeeee;
   line-height:26px;
   font-size:0.5em;
  }

  .mb-biography-details {
    font-size:1em;
    line-height:1.1em;
  }
}




@media screen and (max-width:600px) and (orientation:portrait) {
  body {
   width:100%;
   background-image: url('../Mark_Butcher_musician_mobile.jpg');
   background-position: top center;
  }

  .mark-butcher-logo {
   padding-top: 0;
   width:50%; 
   max-width: 400px;
  }

  .mark-butcher-logo .mobilemblogo {
   display: block;
  }

  .mark-butcher-logo .mblogo {
   display: none;
  }

  .tracklisting {
   background-image: url('Mark_Butcher_Now_Playing_album_tracklisting_mobile.jpg'); 
   background-attachment: fixed;
   background-position: 50% top;
   background-repeat: no-repeat;
   background-size: cover; 
  }

  .mb-info { 
   text-align:left;
   color:#eeeeee;
   line-height:26px;
   font-size:0.5em;
  }

  .gigs {
   background-image:url('mb-texture-bg.jpg');
   background-repeat:repeat;
  }

  .gigsmain {
   clear:both;
   padding-top:40px;
   padding-bottom:40px;
   width:70%;
   margin:0 auto;
   text-align:center;
  }
}






@media screen and (max-width:640px) {
  .mark-butcher-logo {
    display:none;
  }

  .mb-biog-photo {
    display:block;
    width:83%;
    text-align:center;
    float:left;
   }

  .nowplayingtitle {
   padding-top:10px;
  }

.mb-button {
   width:85%;
   margin: 2px 1px 4px 0;
   background:rgba(0,0,0,0.5);
   font-family:'Nanum Gothic', sans-serif;
   font-weight:300;
   color: #ffffff;
   border:1px solid #ffffff;
   text-decoration: none;
   padding: 5px 10px;
   text-align: center;
   font-size: 1em;
   line-height:1em;
  }

.mb-button:hover {
   background:rgba(0,0,0,0.5);
   color:#949494;
   border:1px solid #949494;
  }

  .album-cover {
   width:100%;
   height:100%;
  }

  .album-details {
   width:100%;
  }

  .nowplayingtitle {
    width:70%;
    height:70%;
  }

  .mb-main-heading {
   color:#fff;
   font-size:0.6em;
  }

  h1 {
   font-size: 1.7em;
  }

  h2 {
   font-size: 1em;
  }

  .mb-main-heading {
   font-size:0.9em;
  }

  .tracklisting {
   height:auto;
   background-image: url('Mark_Butcher_Now_Playing_album_tracklisting_mobile.jpg'); 
   background-attachment: fixed;
   background-position: 25% top;
   background-repeat: no-repeat;
   background-size: cover;
  }
  
  .tracklist {
   width:90%;
  }

  .trackcredit {
   text-align:center; 
   font-size:0.5em; 
   font-weight:300; 
   color:#555555;
  }

  .trackcreditname {
   text-align:center; 
   font-size:0.5em; 
   font-weight:300; 
   color:#555555;
  }

  .mb-order-button {
   left:0;
   width:100%;
   padding-top:50%;
  }

  .mb-album-order-button {
   background:rgba(0,0,0,0.8);
   font-family:'Nanum Gothic', sans-serif;
   font-weight:300;
   display: inline-block;
   margin:5px auto;
   width:10%;
   margin: 2px 1px 4px 0;
   font-size: 1em;
   line-height:1.4em;
  }

  .mb-album-order-button:hover {
   background:rgba(0,0,0,0.5);
   color:#949494;
   border:1px solid #949494;
  }

  .albuminfo {
   clear:both;
   text-align:center;
   color:#e4e4e4;
   font-size:0.75em;
   font-weight:600;
   font-family:'Nanum Gothic', sans-serif;
   height:100%;
  }

  .video-outline { 
   border:2px solid #3d4550;
   padding:2px;
  }

  .social {
   position: absolute;
   top: 0;
   right:10px;
   margin-top: 0;
   float:right;
   text-align: right;
   z-index: 40;
  }

  .social a {
   width: auto; 
   height:auto;
   margin:4px;
   padding:0;
   color:#ffffff; 
   border:0 solid transparent; 
   border-radius:0; 
   float:right;
  }

  .social a i {
   font-size: 20px;
  }

  .social a:hover {
   background-color:transparent;
   border:0 solid transparent;
  }

  .gigs {
   background-image:url('mb-texture-bg.jpg');
   background-repeat:repeat;
  }

  .gigsmain {
   clear:both;
   padding-top:40px;
   padding-bottom:40px;
   width:70%;
   margin:0 auto;
   text-align:center;
  }

  .poster {
   width:80%;
   border:0;
  }

  .about-mark {
   height:auto;
   font-size:0.8em;
  }

  .mb-info { 
   text-align:left;
   color:#eeeeee;
   line-height:26px;
   font-size:0.7em;
  }

  .mb-button {
   display: inline-block;
   margin:3px auto;
   width:30%;
  }

  .album-order {
   width:100%;
   background:#444444;
   margin:0 auto;
   padding:50px 0;
   height:auto;
  }

.album-cover {
   float:none;
   display:block;
   margin:0 auto;
   text-align:center;
   clear:both;
}

.album-details {
   float:none;
   display:block;
   margin:30px auto;
   text-align:center;
   width:100%;
  }

.albumcoverpic {
  margin-top:40px;
}

h2.newalbum {
  margin-top:40px;
  color:#ffffff;
}

.mb-info h2.aboutmark {
  margin-left:30px; padding-left:10px !important;
}

}





 @media screen and (max-width:400px) {
  .nowplayingtitle {
   padding-top:20px;
  }

  .gigs {
   background-image:url('mb-texture-bg.jpg');
   background-repeat:repeat;
  }

  .gigsmain {
   clear:both;
   padding-top:40px;
   padding-bottom:40px;
   width:70%;
   margin:0 auto;
   text-align:center;
  }

  .newslist select, .newslist input {
   font-size: 0.9em;
  }

  .newslist select {
   max-width: 250px;
  }
 }