/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
/* --------------------------------
Reset Browser Inherited Style
---------------------------------*/

html,body,h1,h2,h3,h4,h5,h6,p,dd,dl,dt,div,hr,img,input,select,textarea,ul,ul li{
	margin:0;
	padding:0;
	border:0;
    font-family: 'Red Hat Text', sans-serif;
    font-weight: 400; 
    font-size: 17px;
    box-sizing: border-box;
    color: #000;
    
}

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    /*line-height: 1.4;*/
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
img,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/*-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.2s ease-in-out;*/
/* ==========================================================================
   Author's custom styles
   ========================================================================== */
.bc{-webkit-background-size: cover!important;-moz-background-size: cover!important;-o-background-size: cover!important;background-size: cover!important;}
.wrapper{max-width: 1840px;margin: 0 auto;padding: 0 40px;}
hr{border: 0;background: #cfcfcf; height: 1px;width: 100%;}
.top .menu-w::after,.logo::after{visibility: hidden;display: block;content: "";clear: both;height: 0;}
/* a{text-decoration:none;border-bottom: 1px solid #ccc;color: #000;} */
a {
    border-bottom:0;
    text-decoration:underline;
    text-decoration-color:#ccc;
    /* text-underline-position: under; */
    color:#000;
}
/* a:hover{border-bottom: 1px solid #666;} */
a:hover {
    text-decoration-color:#666;
}
p{margin-bottom: 30px;}
.container{line-height: 1.45;padding-top: 59px;padding-bottom: 140px;}
.tos-prev, .tos-next, .tos-close{border: 0;}
.tos-prev:hover, .tos-next:hover, .tos-close:hover{border: 0;}
.animatebackground{-webkit-transition: all 2s ease-in-out;-moz-transition: all 2s ease-in-out;-o-transition: all 2s ease-in-out;transition: all 2s ease-in-out;}
.animatebackground:hover{-webkit-animation: animatedBackground 2s ease-out 1;-moz-animation: animatedBackground 2s ease-out 1;animation: animatedBackground 2s ease-out 1;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
.showcase-n {
    border: 0;
    text-decoration: none;
}
.showcase-n:hover{border: 0;}
/*font*/
.menu-w *,h1,h2,h3,.copyright,.showcase > div,.showcase > div p,.paging,.morestuff .category,.quicklinks a{font-family: 'Spartan', sans-serif;}
h1{font-size: 37px;font-weight: 800;margin-bottom: 60px;}
h2{font-size: 27px;font-weight: 800;margin-bottom: 30px;}
h3{font-size: 16px;font-weight: 800;margin-bottom: 23px;}

/*top*/
.overlay{display: none;content: '';position: fixed;left: 0;top: 0;z-index: 999;background:rgba(0,0,0,0.8);width: 100%;height: 100%;}
.mobile-top{display: none; padding: 20px 20px 20px 40px;border-bottom: 1px solid #bbb;grid-template-columns: auto 40px;align-items: center;grid-column-gap: 15px;}
.mobile-top .mlogo img{max-width: 100%;height: auto;}
.mobile-top > div:first-child{text-align: left;}
.close-btn{margin-top: 4px;cursor: pointer;border: 0;}
.close-btn:hover{text-decoration: none;border: 0;}
.logo{min-height:151px; padding: 40px 0 50px 0;text-align: center;display: block;}
.logo a img{max-width: 100%;height: auto;}
.menu-w > div:first-child{float: left;}
.menu-w > div:last-child{float: right;}
.menu-w *{font-size: 12px;font-weight: 800;}
ul.menu{list-style: none;margin: 0;padding: 0;}
ul.menu li{display: inline-block;vertical-align: top;padding-left:36px;padding-top: 7px;}
ul.menu li:first-child{padding-left: 0;}
ul.menu li a,
.quicklinks a,
a.b2g {
    color: #000;
    border: 0px;
    text-underline-position: auto;
    text-decoration:none;
}
ul.menu li a:hover,
.quicklinks a:hover,
a.b2g:hover {
    color:#919191;
}
.navicon {
    display: none;
    float: right;
    width: 50px;
   /* height: 50px;*/
    text-indent: -9999em;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    z-index: 999;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
   /*margin-top: -18px;*/
}
 .navicon .inner {
    display: block;
    width: 50px;
    height: 24px;
    margin: 0px 16px 0 16px;
    padding: 0;
    position: relative;
}
 .navicon .bar {
    display: block;
    position: absolute;
    width: 100%;
    height:4px;
    left: 0;
    background: #000;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    padding: 0;
}
 .navicon .bar.top {
    top: 0;
}
 .navicon .bar.mid {
    top: 50%;
    margin-top: -2px;
}
 .navicon .bar.btm {
    top: 100%;
    margin-top: -4px;
}
 .navicon.is-active .bar.top,.navicon.is-active .bar.mid,.navicon.is-active .bar.btm {
    top: 50%;
    margin-top: -2px;
} 

/*about*/
.supporter-logos a{display: inline-block;vertical-align: middle;margin: 0 45px 30px 0;border-bottom: 0;}
.supporter-logos a:first-child{margin-left: 0;}
.supporter-logos a:last-child{margin-right: 0;}
.supporter-logos a img{max-width: 100%;height: auto;}

/*footer*/
.footer{background: #000;padding: 20px 0 60px 0;}
.copyright, 
.copyright>* {
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    color: #a8a8a8;
    font-family: 'Spartan', sans-serif;
}
.social{text-align: right;margin-bottom: 20px;}
.social a{border: 0;display: inline-block;vertical-align:top;margin: 0 10px 10px 10px;}
.social a:last-child{margin-right: 0;}
.flogo{text-align: center;margin-bottom: 50px;}
.flogo a img{max-width: 100%;height: auto;}

/*showcases*/
.showcases-listing{display: grid;grid-template-columns: repeat(2, 1fr);grid-column-gap: 40px;grid-row-gap: 45px;}
.showcase{display: grid;grid-template-columns: 1fr 1fr;grid-column-gap: 40px;grid-column-gap: 27px;}
.showcase img{width: 100%;height: auto;}
.showcase > div,.showcase > div p{font-size: 12px;font-weight: 400;}
.showcase a {
    text-underline-position: auto;
    border: 0;
}
.showcase a h3{display: inline-block;}
.showcase a:hover h3{text-decoration: underline;}
.paging{font-size: 15px;font-weight: 700;text-align: center;margin-top: 100px;line-height: 0;}
.paging a{display: inline-block;vertical-align: middle;border: 0;}
.paging span{margin: 4px 28px 0 28px;display: inline-block;vertical-align: middle;}

/*artist*/
.artists-listing{display: grid;grid-template-columns: repeat(4, 1fr);grid-column-gap: 40px;grid-row-gap: 40px;}
.artist a {
    border: 0;
    text-underline-position: auto;
    text-decoration:none;
}
.artist a img{width: 100%;height: auto;margin-bottom: 10px;}
.artist h3{margin-bottom: 9px;}
.artist h3 a:hover{text-decoration: underline;}

/*artist page*/
.layout1{display: grid;grid-template-columns: auto 283px;grid-column-gap: 50px;}
.artist-profile p img{max-width:100%;height: auto;margin: 0 auto;display: inherit;}
.artist-profile p{font-size: 13px;margin-bottom: 27px;}
.artist-gallery{display: grid;grid-gap: 20px;grid-template-columns: repeat(4,1fr);}
.artist-gallery > div a{width: 100%;height: 0; padding-bottom: 100%;display: block;}
.artist-gallery > div{overflow: hidden;}
.featured-pic{grid-column-start: 1;grid-column-end: 5;}
.artist-gallery > div.featured-pic a{width: 100%;height: 0; padding-bottom:66.71%;}

/*more stuff*/
.morestuff-listing{display: grid;grid-template-columns: repeat(4,1fr);grid-gap: 19px 40px;}
.morestuff p{font-size: 13px;margin-bottom: 27px;}
.morestuff p img{width: 100%;height: auto;}
.morestuff h3{margin-bottom: 23px;}
.morestuff h3 a {
    border: 0;
    text-decoration: none;
    text-underline-position: auto;
}
.morestuff h3 a:hover{border: 0;text-decoration: underline;}
.category{padding:6px 8px 5px 8px;font-size: 10px;font-weight:800; display: inline-block;;}
.category.tiffany{background: #70fdba;}
.category.blue{background: #a9e0e1;}
.category.light-blue{background: #a6fcff;}
.category.pink{background: #ffaaae;}
.category.purple{background: #fca5ff;}
.category.yellow{background: #fffd72;}

.morestuff-listing-w > div {
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}
.singlecell {
    text-align:center;
    padding:10px;
    margin:0;
    position:relative;
}
.singlecell.withheight > img {
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
}

/*article*/
.layout2{display: grid;grid-template-columns: auto 244px;grid-column-gap: 50px;}
.other-articles .morestuff{margin-bottom: 23px;display: inline-block;}
.category.big{font-size: 15px;font-weight: 800;}
.notes{padding-top: 10px;}
.notes p{margin-bottom: 0;font-size: 13px;}
hr.short{height: 1px; border: 0;background: #888888;max-width: 237px;margin-bottom: 17px;}

/*homepage*/
.hidden {display: none;}
#artist-info{max-width: 750px;}
#artist-info p:last-child{margin-bottom: 0;}
.tos-wrapper.tos-fixed .tos-slide.tos-html > div{padding: 50px;}
.quicklinks{margin-top: 92px;}
.quicklinks a {
    font-size: 12px;
    border: 0;
    display: inline-block;
    vertical-align: top;
    margin-right: 50px;
    font-weight: 800;
    text-decoration:none;
    text-underline-position: auto;
}
.quicklinks a:last-child{margin-right: 0;}
/* .quicklinks a:hover {
    text-decoration: underline;
    text-decoration-color:#000;
} */
.playmusic-btn{cursor:pointer;background: url(../images/sound-off.png);background-size: 32px 32px;width: 32px;height: 32px; float: right;border: 0;margin-top: 10px;}
.playmusic-btn.off{background: url(../images/icon-sound.png);background-size: 32px 32px;width: 32px;height: 32px; float: right;border: 0;}
.playmusic-btn:hover{border: 0;}

/*gallery*/
.gallery{margin-bottom:50px;}
.grid-sizer { width:20%; }
/*.gutter-sizer { width:1%;min-width: 1%;max-width: 1%; }*/

.grid-item {
    width:20%;
    height:0;
    padding-bottom: 13%;
    display: block;
    float: left;
    /* vertical gutter */
  /*margin-bottom: 1%; */

  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
    position: relative;
    overflow: hidden;

}

.grid:after {
  content: '';
  display: block;
  clear: both;
}
.grid {
    width:100%; position:relative;
}
.c5xr3{width:100%;padding-bottom:39%;}
.c3xr3{width:60%;padding-bottom:39%;}
.c3xr2{width:60%;padding-bottom:26%;}
.c3xr1{width:60%;padding-bottom:13%;}
.c2xr3{width:40%;padding-bottom:39%;}
.c2xr2{width:40%;padding-bottom:26%;}
.c2xr1{width:40%;padding-bottom:13%;}
.c1xr2{width:20%;padding-bottom:26%;}


.grid-item div{position: absolute;width: 100%;height: 100%;display: block;border: 5px solid transparent; box-sizing: border-box;overflow: hidden;}
.grid-item a{position: absolute;width: 100%;height: 100%;display: block;}

/*overide*/
.tos-slide > *{max-width: 90%;}

.caps {
    text-transform: uppercase;
}

.audio-bars {
    display:none;
    position: relative;
    width: 32px;
    height: 32px;
    border-radius:16px;
}
.playmusic-btn.off .audio-bars {
    display:block;
}
.audio-bars .bar {
    position: absolute;
    bottom: 0;
    left: 5px;
    top: 0;
    width: 5px;
    background-color: white;
    opacity:0.8;
    -webkit-animation: up-down 0.6s infinite;
            animation: up-down 0.6s infinite;
}
.audio-bars .bar:nth-child(2) {
    left: 13px;
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}
.audio-bars .bar:nth-child(3) {
    left: 21px;
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}

.mb-5 {
    margin-bottom:5px;
}

/* ==========================================================================
   Media Queriess
   ========================================================================== */
@media all and (min-width: 801px) {
   .top .top_right{display: block!important;}
}
@media all and (max-width:800px) {
    .menu-w{display: grid;grid-template-columns: auto 50px;align-items: center;}
   .navicon{display:block;}
   .logo{padding-bottom: 40px;}
    .logo a img,.flogo a img{max-width: 165px;height: auto;}
    .mobile-top{display: grid;}
    .top .top_right{display: none;background:#fff;position:fixed;width:90%;height:100vh; float: none;clear: both;top:0px;right:0;z-index:9999;overflow: auto;}
    .top ul.menu {width:100%;float: none;clear: both;margin:0px 0 0px 0;padding:0 0 0px 0;overflow: hidden;}
    .top ul.menu li{display: block;text-align: left;padding:20px 40px 20px 40px;border-bottom: 1px solid #bbb;margin-left: 0;}
    .social{text-align: center;}
    .showcase{grid-template-columns: 1fr;grid-row-gap: 20px;}
    .showcases-listing {grid-row-gap: 30px;grid-column-gap: 30px;}
    .artists-listing{grid-column-gap: 30px;grid-row-gap: 30px;}
    .layout1{grid-template-columns: 1fr;}
    .layout1.artist-page .side{grid-row-start: 1;}
    .morestuff-listing{grid-template-columns: repeat(3,1fr);grid-column-gap: 30px;grid-row-gap: 30px;}
    .layout2{grid-template-columns: 1fr;}
    .layout2 .main{margin-bottom: 60px;}
    .layout2 .side.other-articles{display: grid;grid-template-columns: repeat(3,1fr);grid-column-gap: 30px;grid-row-gap: 30px;border-top:1px solid #CCC;padding-top: 60px;}
    
    .grid-sizer{width: 33%;}
    .grid-item{width: 33%;padding-bottom: 22%;}
}
@media all and (max-width:700px) {
    .artists-listing{grid-template-columns: repeat(3,1fr);}
    .morestuff-listing{grid-template-columns: repeat(2,1fr);}
    .layout2 .side.other-articles{display: grid;grid-template-columns: repeat(2,1fr);}
    
}
@media all and (max-width:600px) {
    .wrapper{padding: 0 25px;}
    .artists-listing{grid-template-columns: repeat(2,1fr);}
    
    
}
@media all and (max-width:400px) {
    .showcases-listing{grid-template-columns: 1fr;}
    .wrapper{padding: 0 20px;}
    h1{font-size: 33px;margin-bottom: 30px;}
    h2{font-size: 23px;margin-bottom: 25px;}
    h3{font-size: 15px;}
    .artists-listing{grid-column-gap: 20px;}
    .artist-gallery{grid-template-columns: repeat(3,1fr);}
    .featured-pic{grid-column-end: 4;}
    .morestuff-listing{grid-template-columns: 1fr;}
    .layout2 .side.other-articles{display: grid;grid-template-columns:1fr;}
    .grid-sizer{width: 50%;}
    .grid-item{width: 50%;padding-bottom:33%;}
}
@media all and (max-width:300px) {
      h1{font-size: 28px;margin-bottom: 30px;-webkit-hyphens: auto;-moz-hyphens: auto;-ms-hyphens: auto;hyphens: auto;}
}
/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after,.clear {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}