html { 
   scroll-behavior: smooth;
   height: 100%;
   overflow-x: hidden !important;
  }

body { 
   height: 100%;
   margin:-200px 0 0 0;
   padding:0; 
   background-color: #d3d3d3;
   background-image:url('../Mark_Butcher_musician.jpg');
   background-position: center top;
   background-size: cover;
   background-repeat: no-repeat;
   color:#000000;
   font-family: 'Nanum Gothic', sans-serif;
  }

.mbwrapper { 
   position: fixed;
   top:0;
   left:0;
   right:0;
   bottom:0;
   opacity:0;
   z-index: -1;
   background-color: #949494;
   background-image:url('../Mark-Butcher-music-guitar.jpg');
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
  }

a:link, a:visited, a:active {
   color:#ffffff;
  }
              
a:hover { 
   color:#949494; 
  }

#wrapper {
   width:100%;
   height:100%;
   font-size: 1.3em; 
  }  

h1 { 
   font-size: 2em;
   font-family: 'Nanum Gothic', sans-serif;
   font-weight:300;
   letter-spacing:6px;
   text-align:center;
   color:#333333;
   line-height:auto;
  }

h2 {
   font-size: 1.4em;
   font-family: 'Nanum Gothic', sans-serif;
   font-weight:300;
   line-height:auto;
  }

h4 {
   font-size: 1.4em;
   font-family: 'Nanum Gothic', sans-serif;
   font-weight:300;
   line-height:auto;
  }

header { 
   height:100%;
  }

.social {
   position: absolute;
   top:20px;
   right:20px;
   z-index: 10px;  
   -webkit-animation: fadein 2s;
   -moz-animation: fadein 2s;
   -ms-animation: fadein 2s;
   -o-animation: fadein 2s; 
   animation: fadein 2s;
  }

.social .fab {
   margin: 5px;
   padding: 7px;
   width: 20px;
   height: 20px;
   display: inline-block; 
   background:rgba(0,0,0,0.5);
   color:#ffffff;
   border:1px solid #ffffff;
   text-align: center;
   text-decoration: none;
  }

.social .fab:hover {
   background:rgba(0,0,0,0.5);
   color:#cccccc;
   border:1px solid #cccccc;
  }
             
.mb-button {
   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: 10px 20px;
   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;
  }

.nowplayingtitle {
   width:60%;
}

.albuminfo { 
   padding-top:0;
   text-align:center;
   color:#e4e4e4;
   font-size:0.9em;
   font-weight:300;
   font-family:'Nanum Gothic', sans-serif;
  }

.mb-album-order-button {
   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: 10px 15px;
   text-align: center;
   font-size: 1.4em;
   line-height:1em; 
  }

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

.mark-butcher-design {
   width:100%;
   max-width:1200px;
   margin:3% auto 0 auto;
   text-align:center;
  }

.album-release { 
   color:#c3947d;
  }

.mark-butcher-logo {
   padding-top: 14em;
   width: 100%;
   max-width:520px;
   margin:0 auto;
   -webkit-animation: fadein 2s;
   -moz-animation: fadein 2s;
   -ms-animation: fadein 2s;
   -o-animation: fadein 2s; 
   animation: fadein 2s;
  }

.mark-butcher-logo img {
   width:100%;
  }

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

.tracklisting {
   background-image: url('Mark_Butcher_Now_Playing_album_tracklisting.jpg'); 
   height: 1100px; 
   background-attachment: fixed;
   background-position: center top;
   background-repeat: no-repeat;
   background-size: cover;
  }
 
.tracks h2 {
   font-size:1.5em;
   line-height:1.7em;
  }

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

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

.album-order {
   padding:7px 50px 50px 50px;
   background:rgba(0,0,0,0.4);
   margin:100px auto 0 auto;
   text-align:center;
   width:100%;
  }

.mb-order-button {
   clear:both;
   position:absolute;
   left: 20px;
   right: 20px;
   bottom: 20px;
   text-align:center;
   font-family:'Nanum Gothic', sans-serif;
   font-weight:300; 
   font-size:0.7em;
   color:#ffffff;
   letter-spacing:4px;
  }

.mb-order-button a:link {
   background:rgba(0,0,0,0.8);
  }

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

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

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

.video-outline {
   border:5px solid #3d4550;
   width:100%;
   margin:0 auto;
   text-align:center;
  }

.video-wrapper {
   position: relative;
   width: 100%;
   height: 0px;
   padding-top: 60%;
  }

.video-wrapper iframe {
   position: absolute;
   top:0;
   right:0; 
   bottom:0; 
   left:0;
   width:100%;
   height:100%;
  }

.tracknumber {
   display:inline-block;
   font-size:12px;
   font-family:'Nanum Gothic', sans-serif;
   font-weight:200;
   color:#555555;
  }

.tracktitle {
   text-align:center;
   font-family:'Nanum Gothic', sans-serif;
   font-weight:200;
   color:#333333;
  }

.album {
   width:100%;
   margin:0 auto;
   text-align:center;
  }

.album-cover {
   float:left;
   width:45%;
  }

.album-cover img {
   box-shadow:6px 6px 7px #333333;
  }

.album-details {
   float:left;
   width:50%;
   text-align:center;
  }

.mb-main-heading {
   padding:10px;
   color:#fff;
   font-size:1em;
  }

.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:30em;
   border:0;
}

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

.mb-biography {
   width:100%;
   margin:0 auto;
   text-align:left;
  }

.mb-biography-details { 
   width:100%;
   text-align:left;
   height:100%;
  }

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

.mb-info p { 
   margin-bottom:35px;
  }

.mb-biog-photo {
   float:right;
   width:35%;
   height:35%;
   margin:0 0 30px 30px;
   box-shadow:6px 6px 7px #333333;
  }

.newslist {
   width:100%;
   max-width:600px;
   margin:0 auto;
   padding:0;
   background:#bcbebd;
   text-align: center;
  }

.success {
   font-size: 1.4em;
   color:#000000; 
   text-align: center; 
  }

.error {
   padding:5px 0; 
   font-size: 1em;
   text-align: center;
  }

#footer {
   clear:both;
   width:100%;
   margin:0;
   padding:5px 0 15px 0;
   background-color: #f9f9f9;
   color:#333333;  
   text-align: center;
   font-size: 0.65em;
  }

#footer a {
   color:#333333;
   text-decoration:none;
  }

#footer a:hover {
   color:#949494;
   text-decoration:none;
  }

.cherryredrecords {
   vertical-align:middle;
   padding:0 10px;
   opacity:0.9;
  }

.cherryredrecords:hover {
   opacity:1;
  }

.albumcoverpic {
  margin-top:100px;
}

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

h2.aboutmark {
  padding-left:0;
}


@keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
  }

@-moz-keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
  }

@-webkit-keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
  }

@-ms-keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
  }

@keyframes fadeInUp {
   from { transform: translate3d(0,40px,0) }
   to { transform: translate3d(0,0,0); opacity: 1; }
  }

@-webkit-keyframes fadeInUp {
   from { transform: translate3d(0,40px,0) }
   to { transform: translate3d(0,0,0); opacity: 1 }
  }

.animated {
   animation-duration: 1s;
   animation-fill-mode: both;
   -webkit-animation-duration: 1s;
   -webkit-animation-fill-mode: both
  }

.animatedFadeInUp {
   opacity: 0
  }

.fadeInUp {
   opacity: 0;
   animation-name: fadeInUp;
   -webkit-animation-name: fadeInUp;
  }