html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{ line-height: 1; }ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

* { box-sizing: border-box; }

img { -ms-interpolation-mode: bicubic; }
iframe:not([seamless]) { border: none; }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
* { margin: 0; padding: 0; }
*:focus { outline: 0; }

html { display: block; height: 100%; width: 100%; margin: 0; }

body { height: 100%; width: 100%; color: #ffffff; margin: 0; padding: 0; background-color: #000; font-family: josefin, sans-serif; font-style: normal; font-weight: 300; font-size: 1em; line-height: 100%; }

a, a:visited { text-decoration: none; color: #ffffff; }
a:hover { color: #fff; }

header { border: dotted 0px red; height:100%; background: url(../img/lazymarf-desktop3.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; 
display: flex; flex-direction: column; justify-content: space-between; }

h2 { font-family: Times; font-style: normal; letter-spacing: 5px; text-align: center;}
h3 { font-family: josefin, sans-serif; font-style: normal; font-weight: 300; }

.nav2 { margin-bottom: 0%; }
.nav { position: absolute; top: 0px; right: 0px; }
.mobile { display: none; }

.container { width: 100%; background: #000; }
.inner { width: 100%; max-width: 960px; margin: 0px auto; }
.logo { position: absolute; border: dotted 0px red; width: 30%; top: 2%; left: 50px; }
.logo img { width: 100%; }

p.more {text-align: center; padding: 50px 0px; margin: 0 auto; display: block; }
a.more { display: inline-block; text-align: center; border: solid 1px #ffffff; color: #ffffff; margin: 5px 10px; padding: 10px 20px 7px 20px; font-size: 22px; line-height: 100%; letter-spacing: 5px; text-decoration: none; text-transform: uppercase; }
a.more:hover { border: solid 1px #fff; background-color: #fff; color: #000; text-decoration: none; }


.nav .social { line-height: 10px; position: relative; width: 100%; text-align: center; padding: 20px 50px 10px 50px; margin: 0px 0px 0px 0px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; }
.nav2 .social { border: dotted 0px red; /* background: url(../img/background-social.png) repeat-x center top scroll; */ line-height: 10px; position: relative; width: 100%; text-align: center; padding: 0px 50px 0px 50px; margin: 0px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; }
.social a { font-size: 10px; display: inline-block; color: #fff; background-color: rgba(0,0,0,0.5); margin: 0px 10px 10px 10px; padding: 8px 0px; width: 50px; height: 50px; border: solid 2px #fff; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; /* future proofing */ -khtml-border-radius: 100px; /* for old Konqueror browsers */ }
.social a:hover { color: #20202F; background-color: #e3efe1; }
.social a.bubble { font-family: jaf-bernino-sans-comp, sans-serif; font-style: normal; font-weight: 700; font-size: 14px; line-height: 100%; letter-spacing: 5px; padding: 16px 15px 12px 15px; height: auto; width: auto; text-decoration: none; text-transform: uppercase; display: inline-block; color: #e3efe1; /* -moz-border-radius: 100px;
-webkit-border-radius: 100px; border-radius: 100px; -khtml-border-radius: 100px; */ }
.social a.bubble:hover { color: #20202F; background-color: #e3efe1; }
.social a.linkimage { border: none; background: none; padding: 0px; height: auto; width: auto; display: inline-block; -moz-border-radius: 0px;
-webkit-border-radius: 0px; border-radius: 0px; -khtml-border-radius: 0px; }
.social a.linkimage:hover { background-color: none; }
.social a.linkimage span { display: none; }
.social a.linkimage img { border: dotted 0px red; width: 50%; }
.social h4 { display: none; }

.social .smem-socials a {font-size: 1.5em; position: relative;}
.social .smem-socials a i {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.retail { text-align: center; background-color: #000; width: 90%; margin: 0 auto; padding: 20px 0px 50px 0px;}
.retail h2 { font-size: 300%; line-height: 100%; margin: 50px auto 30px auto; }
.smem-releases { width: 90%; margin: 0px auto; display: flex; flex-flow: row wrap; align-content: space-between; justify-content: center; }
.release { display: flex; flex-direction: column; border: dotted 0px red; width: 22%; margin: 0px 1% 1% 1%; padding: 0px 0px 20px 0px; border-bottom: solid 0px #fff; }
.release h2 { display: block; text-align: center; font-size: 200%; line-height: 100%; margin: 20px auto 15px auto; }
.release .packshot { width: 100%; order: 1; margin: 0px auto; }
.release .info { width: 100%; order: 2; margin-bottom: 30px;}
.release .release-date { display: none; }
.release .packshot img { width: 100%; border: solid 1px #999; margin-bottom: 10px; }
.release-meta { text-transform: uppercase; color: #e3efe1; }
.release-meta .subtitle { display: none; }
.release .tracklist { display: none; }
.release-embed { margin-top: 25px; }
.release-embed iframe { width: 100%; height: 100px; }
.retail-links { display: flex; flex-flow: row wrap; align-content: space-between; justify-content: space-between; margin-top: 20px;}
.retail-link { flex-grow: 1; border: solid 1px #ffffff; color: #ffffff; margin: 5px; padding: 10px 20px 7px 20px; font-size: 16px; line-height: 16px; letter-spacing: 5px; height: auto; width: auto; text-decoration: none; text-transform: uppercase; }
.retail-link:hover { border: solid 1px #fff; background-color: #fff; color: #000; text-decoration: none; }
 

.videos-single { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; width: 100%; margin: 0px auto 0px auto; }
.videos-single iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  }


.videos { background-color: #000; padding: 20px 0px 50px 0px; }
.videos h2 { font-size: 300%; line-height: 110%; margin: 50px auto 30px auto; }
#video-player {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 100; display: none;}
#video-player.active {display: block;}
#video-player #video-player-inner, #video-player #video-player-inner iframe {width: 100%; height: 100%;}
#video-player-close{display: block; background: black; width: 50px; height: 50px; position: absolute; top: 20px; right: 20px; color: #fff; font-size: 3em; z-index: 9999;}
.smem-videos {width: 100%; margin: 0 auto; display: flex;}
.smem-videos .video { width: 33%; margin: 1%;}
.smem-videos .video a.video-link {display: block;}
.smem-videos .video a.video-link .video-thumb {width: 100%;}
.smem-videos .video a.video-link .video-thumb img, .smem-videos .video a.video-link .video-thumb video {max-width: 100%;}
.smem-videos .video .video-subtitle {text-align: center;}
.smem-videos .video .video-subtitle h3 { text-align: center; text-transform: uppercase; font-size: 200%; line-height: 110%; letter-spacing: 5px; margin: 30px auto 30px auto; }


/* TOURDATES */
.tour { background-color: #000; padding: 20px 0px 50px 0px; text-align: center; margin-bottom: 0px;  }
.tour h2 { font-size: 300%; line-height: 100%; margin: 50px auto 30px auto; }
.tour .smem-tourDates { width: 100%; max-width: 1280px; margin: 0px auto; text-transform: uppercase; font-size: 150%; line-height: 110%; letter-spacing: 3px; }
.tour .smem-tourDates h2 { font-size: 200%; letter-spacing: 5px; margin: 50px auto 30px auto; }
.smem-tourDates .date { border-bottom: solid 3px #363b29; margin: 0px; padding: 15px 20px 10px 20px; font-size: 0.7em; }
.smem-tourDates .date:hover { background: #363b29; color: #e3efe1; }
.smem-tourDates .date:last-child { border: none; }
.smem-tourDates .date .day { font-size: 110%; display: inline-block; width: 19%; margin-right: 1%; vertical-align: middle; text-align: left; }
.smem-tourDates .date .venue { font-size: 110%; display: inline-block; width: 29%; margin-right: 1%; vertical-align: middle; text-align: left; }
.smem-tourDates .date .town{ font-size: 110%; display: inline-block; width: 29%; margin-right: 1%; vertical-align: middle; text-align: left; }
.smem-tourDates .date .ticketlinks-wrap { display: inline-block; width: 20%; vertical-align: middle; }
.smem-tourDates .date a { flex-basis: max-content; font-size: 75%; line-height: 100%; color: #e3efe1; border: solid 2px #e3efe1; text-decoration: none; display: block; width: 100%; padding: 7px 20px 3px 20px; margin: 0px 0px 0px 0px; }
.smem-tourDates .date:hover a { color: #e3efe1; border: solid 2px #e3efe1; }
.smem-tourDates .date a:hover { border: solid 2px #fff; background-color: #fff; color: #000; text-decoration: none; }
.smem-tourDates .date .show-info { font-size: 75%; font-style: italic; }
.no-tour-dates p a { text-decoration: underline; }
.no-tour-dates a.cta { color: #e3efe1; border: solid 2px #e3efe1; text-decoration: none; display: inline-block; width: auto; padding: 10px 20px 7px 20px; margin: 50px 0px 0px 0px; }
.no-tour-dates a.cta:hover { border: solid 2px #fff; background-color: #fff; color: #000; text-decoration: none; }

.photos {padding: 30px 0px 50px 0px; background: #313326 url(../img/background1.jpg) repeat-x center top scroll; }
.photos h2 { font-size: 300%; display: block; margin: 30px 0px; }
.smem-gallery { display: flex; flex-wrap: wrap; flex-flow: row wrap; align-content: space-between; justify-content: center; }
.smem-gallery .gallery-image { width: 10%; margin: 1%; }
.smem-gallery .gallery-image a { display: block; height: 100%; width: 100%; }
.smem-gallery .gallery-image a .gallery-thumb { height: 100%; }
.smem-gallery .gallery-image a .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.smem-gallery .gallery-image .image-subtitle { text-align: center; color: #e3efe1; }
.smem-gallery .gallery-image .image-subtitle h3 { text-align: center; color: #e3efe1; font-size: 75%; padding: 10px 0px; }

                #image-viewer{position:fixed;top:0;left:0;width:100vw;min-height:100vh;overflow-y:scroll;background:rgba(0,0,0,.7);z-index:800;display:none}
                #image-viewer #image-viewer-nav{width:100vw;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;font-size:3em}
                #image-viewer #image-viewer-nav #image-nav-prev{left:2vw;position:absolute}
                #image-viewer #image-viewer-nav #image-nav-prev.inactive a{opacity:.4;cursor:not-allowed}
                #image-viewer #image-viewer-nav #image-nav-next{right:2vw;position:absolute}
                #image-viewer #image-viewer-nav #image-nav-next.inactive{opacity:.4;cursor:not-allowed}
                #image-viewer #image-viewer-close{position:fixed;top:0;right:0;padding:40px;font-size:3em;color:#fff;z-index:801;cursor:pointer}
                #image-viewer #image-viewer-inner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
                #image-viewer #image-viewer-inner img{width:90vw;height:90vh;object-fit:contain}
                @media (max-width:992px){
                                .smem-gallery{padding:0px}
                                .smem-gallery .gallery-image,.smem-gallery .gallery-image.first,.smem-gallery .gallery-image.last{padding:0;text-align:center}
                                .smem-gallery .gallery-image img,.smem-gallery .gallery-image.first img,.smem-gallery .gallery-image.last img{width:100%;max-width:800px}
                }

.about { background-color: #000; padding: 20px 0px 50px 0px; }
.about .bio { width: 100%; max-width: 600px; margin: 0px auto; font-size: 100%; line-height: 140%; letter-spacing: 3px; }
.about h2 { font-size: 300%; line-height: 100%; margin: 50px auto 30px auto; }
.about a, .about a:visited { text-decoration: none; color: #e3efe1; }
.about a:hover { color: #fff; text-decoration: underline; }
.about p { margin-bottom: 20px;}

section { display: block; width: 100%; padding: 0px; margin: 0px; overflow: hidden; }
.imagepanel { display: block; width: 100%; height: 75%; position: relative; margin: 0px; padding: 0px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.imagepanel img { width: 100%; }
#image1 { background: #000 url(../img/lazymarf-desktop1.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;  }
#image2 { background: #000 url(../img/lazymarf-desktop2.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;  }
#image3 { background: #000 url(../img/lazymarf-desktop4.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;  }

footer { color: #e3efe1; display: inline-block; width: 100%; font-size: 100%; text-align: center; margin: 50px 0px 20px 0px; }
footer a:link, footer a:visited { color: #e3efe1; }
footer a:hover { color: #fff; }

/* HIDDEN SECTIONS */
.modal { overflow-y: scroll; }
.modal .modal-inner { position: relative; width: 100%; max-width: 600px; height: 80%; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
.modal .modal-inner .modal-close { position: absolute; top: 10px; right: 10px; padding: 0px; color: #e3efe1; }
.modal .modal-inner .modal-close:hover { color: #fff; }
.modal .modal-inner iframe { position: relative; width: 100%; height: 100%; }


@media only screen and (max-width: 1600px) { 
.release { width: 31%; }
    
}

@media only screen and (max-width: 1280px) { 
.release { width: 45%; }
.smem-videos { width: 100%; margin: 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; }
.smem-videos .video { width: 31%; }
.smem-gallery .gallery-image { width: 20%; }
.tour .smem-tourDates { width: 90%; }

    
}
@media only screen and (max-width: 800px) {
.logo { width: 80%; }
.container { width: 100%; margin: 0 auto; }
.mastheadfooter { height:200px; }
.nav .social { border: dotted 0px red; flex-direction: row; justify-content: center;}
.social .smem-socials { border: dotted 0px red; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; }
.social .smem-socials a { /* margin: 10px 0; */}
.release { width: 100%; }
.smem-videos .video { width: 45%; }
.tour .smem-tourDates { font-size: 150%; }
.smem-tourDates .date { margin: 0px; }
.smem-tourDates .date .day { display: block; width: 100%; margin: 5px 0px; text-align: center; }
.smem-tourDates .date .venue { display: block; width: 100%; margin: 5px 0px; text-align: center; }
.smem-tourDates .date .town{ display: block; width: 100%; margin: 5px 0px; text-align: center; }
.smem-tourDates .date .ticketlinks-wrap { display: inline-block; width: auto; margin: 5px 0px; }
.smem-tourDates .date a { padding: 5px 20px; }
.about .bio { width: 80%; }
.modal .modal-inner { position: relative; width: 100%; max-width: 414px; height: 100%; overflow: scroll; }
.modal .modal-inner iframe { overflow: scroll; width: 100%; max-width: 414px; }
.imagepanel { height: auto; }

p.more { width: 90%; }
a.more { display: block; padding: 10px 0px 7px 0px; margin: 10px 0; height: auto; width: 100%; }

header { height:auto; background: url(none); 
display: block; }
.mobile { display: block; width: 100%; }
.logo { display: none; /* width: 90%; margin: 50px auto; */ }
.mastheadfooter { display: none; }
.nav { position: relative; background-color: #000; }
.nav2 { background-color: #000; }

.social { margin: 0px 0px 0px 0px; }
.retail .inner { width: 90%; margin: 30px auto; }
.retail .left { float: none; width: 100%; }
.retail .right { float: none; width: 100%; text-align: center; }
.retail h2 { font-size: 30px; }
.retail a { width: 100%; }
.retail .spacer { height: 0px; }
.smem-tourDates .date { margin: 0px; font-size: 80%; }
.smem-tourDates .date .day { display: block; width: 100%; margin: 5px 0px; text-align: center; }
.smem-tourDates .date .venue { display: block; width: 100%; margin: 5px 0px; text-align: center; }
.smem-tourDates .date .town{ display: block; width: 100%; margin: 5px 0px; text-align: center; }
.smem-tourDates .date .ticketlinks-wrap { display: inline-block; width: auto; margin: 5px 0px; }
.smem-tourDates .date a { padding: 5px 20px; }

.photos h2 { font-size: 250%; }
.tour h2 { font-size: 250%; }
.smem-gallery .gallery-image { width: 30%; }

.modal .modal-inner { position: relative; width: 100%; max-width: 414px; }

}

@media only screen and (max-width: 414px) {
.social a.linkimage img { border: dotted 0px red; width: 100%; }
.modal .modal-inner { position: relative; width: 100%; max-width: 414px; height: 100%; overflow: scroll; }
.modal .modal-inner iframe { overflow: scroll; width: 100%; max-width: 414px; }
  

}




/* ANIMATIONS */

.anim1 { opacity: 0; -webkit-animation: fadein 1s forwards; animation: fadein 1s forwards; -webkit-animation-delay: 0s; animation-delay: 0s; }
.anim2 { opacity: 0; -webkit-animation: fadein 1s forwards; animation: fadein 1s forwards; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
.anim3 { opacity: 0; -webkit-animation: fadein 1s forwards; animation: fadein 1s forwards; -webkit-animation-delay: 1.0s; animation-delay: 1.0s; }
.anim4 { opacity: 0; -webkit-animation: fadein 1s forwards; animation: fadein 1s forwards; -webkit-animation-delay: 2s; animation-delay: 2s; }
.anim5 { opacity: 0; -webkit-animation: fadein 1s forwards; animation: fadein 1s forwards; -webkit-animation-delay: 3s; animation-delay: 3s; }

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

@keyframes zoomin {
    from { opacity: 0; transform: scale(0.0); }
    to   { opacity: 1; transform: scale(1.0); }
}
@-webkit-keyframes zoomin {
    from { opacity: 0; transform: scale(0.0); }
    to   { opacity: 1; transform: scale(1.0); }
}