/* Programs styles. Edit this file directly; no build step. */

/* ARTISTS */

#artists {
    color: #000;
    background: #fff;
}

#artists p a {
    color: #00aada;
}

#artists.fourth-river #white a.button {
    color: #fff !important;
    padding: 12px 30px;
    border: 1px solid #fff;
}

#artists p.minisocials {
    margin-top: -15px;
}

#artists p.minisocials a {
    font-size: 2rem;
    padding: 5px;
}

#artists p.minisocials a:hover {
    color: #000;
}

#artists.grants {
    padding-bottom: 0px;
    margin-bottom: -40px;
}

#artists .header.mainartist {
    background: url("../img/artist9.jpg");
    background-size: cover;
    background-position: 50% 0%;
}

#artists.resources .header {
    background: url("../img/artist12.jpg");
    background-size: cover;
    background-position: 50% 0%;
}

#artists .header.grant1 {
    background: url("../img/header-principal-grant.jpg");
    background-size: cover;
    background-position: 50% 10%;
}

#artists .header.grant3 {
    background: url("../img/fourth-river.jpg");
    background-size: cover;
    background-position: 50% 50%;
}

#artists .header.grant4 {
    background: url("../img/header-office-hours.jpg");
    background-size: cover;
    background-position: 50% 50%;
}

@media (min-width: 800px) and (max-height: 700px) {
    #artists .header.grant3 {
        background: url("../img/fourth-river-lores.jpg");
        background-size: cover;
        background-position: 50% 50%;
    }
}

@media (max-width: 800px) {
    #artists .header.grant3 {
        background: url("../img/fourth-river-mobile.jpg");
        background-size: cover;
        background-position: 50% 50%;
    }

    #artists .header.grant1 {
        background: url("../img/header-principal-grant.jpg");
        background-size: cover;
        background-position: 25% 10%;
    }

    #artists .header.grant4 {
        background: url(../img/header-office-hours-mobile.jpg);
        background-size: cover;
        background-position: 50% 50%;
    }
}

#artists .header.grant2 {
    background: url("../img/overtones.jpg") #000;
    background-size: cover;
    background-position: 50% 50%;
}

.header.about {
    background: url("../img/artist6.jpg");
    background-size: cover;
    background-position: top center;
}

.header.donate {
    background: url("../img/header-donate.jpg");
    background-size: cover;
    background-position: 50% 20%;
}

.header.faq {
    background: url("../img/header-faq.jpg");
    background-size: cover;
    background-position: 50% 50%;
}

.header.industry {
    background: url("../img/artist3.jpg");
    background-size: cover;
    background-position: top left;
}

.header.education {
    background: url("../img/artist7.jpg");
    background-size: cover;
    background-position: 50% 50%;
}

.svg, .resourcesimage {
    width: 50px;
    height: 50px;
    display: block;
    margin: 0px auto 30px auto;
    color: #fff;
}

.resourcesimage {
    width: 70px;
    height: 70px;
}

.raficon {
    position: absolute;
    top: -5vh;
    left: 50%;
    height: 15vh;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

#artists p {
    font-size: 1.3rem;
}

#artists p.biggerp {
    font-size: 1.5rem;
    line-height: 1.7rem;
    margin-top: -30px;
    padding-top: 0px;
}

#artists p .bold {
    font-size: 1.15rem;
    line-height: 1.2rem;
}

#artists .col.right p, #artists.past .col.left p, p.styrene {
    font-size: 1.3rem;
    font-family: "Styrene Reg";
}

#artists.fourth-river .col.right p, #artists.fourth-river .col.left p {
    font-size: 1.15em;
}

@media (min-width: 800px) and (max-width: 1087px) {
    #artists.fourth-river .col.right p, #artists.fourth-river .col.left p {
        font-size: 1.1em;
    }
}

#artists a svg.linkicon {
    height: 25px;
    width: 25px;
    margin-bottom: -5px;
    fill: #00aada;
}

#artists a:hover svg.linkicon {
    fill: black;
}

#artists h2.teal {
    color: #00aada;
    font-size: 3.5rem;
}

#artists .col.lesspadding {
    padding-bottom: 40px;
}

#artists :is(#grid, .artist-grid) {
    width: calc(100% + 30px);
    margin-left: -15px;
    display: block;
}

#artist.fourth-river {
    width: calc(90% + 30px);
    margin-left: auto;
    display: block;
    margin: 0px auto;
}

#artists :is(#grid, .artist-grid) :is(#row, .row) .col {
    color: #000;
    background: #00aada;
    align-items: center;
    text-align: center;
    margin: 15px;
    transition: 0.4s;
    cursor: pointer;
    justify-content: center;
    min-height: 350px;
}

#artists :is(#grid, .artist-grid) :is(#row, .row) .col.details {
    min-height: 50px;
    background: transparent;
    text-align: left;
    padding: 0px 0px 20px 0px;
    margin-top: 0px;
}

#artists :is(#grid, .artist-grid) :is(#row, .row) .col.details:hover {
    background: transparent;
    margin-top: 0px;
    text-align: left;
    color: black;
    cursor: default;
}

.copy {
    display: block;
    text-align: left;
    font-size: 1rem;
    line-height: 1.2rem;
}

.copy span {
    display: block;
    margin: 0px auto 10px auto;
    text-align: left;
}

#artists :is(#grid, .artist-grid) :is(#row, .row) .col.publishing {
    background: rgba(0, 170, 218, 0.9) url("../img/publishing.jpg");
    background-size: cover;
    background-position: 50% 50%;
}

#artists :is(#grid, .artist-grid) :is(#row, .row) .col.releasing {
    background: rgba(0, 170, 218, 0.9) url("../img/releasing.jpg");
    background-size: cover;
    background-position: 50% 50%;
}

#artists :is(#grid, .artist-grid) :is(#row, .row) .col.record-labels {
    background: rgba(0, 170, 218, 0.9) url("../img/record-labels.jpg");
    background-size: cover;
    background-position: 50% 50%;
}

#artists :is(#grid, .artist-grid) :is(#row, .row) .col.streaming {
    background: rgba(0, 170, 218, 0.9) url("../img/streaming.jpg");
    background-size: cover;
    background-position: 50% 50%;
}

#artists :is(#grid, .artist-grid) :is(#row, .row) .col.financial {
    background: rgba(0, 170, 218, 0.9) url("../img/financial.jpg");
    background-size: cover;
    background-position: 50% 50%;
}

#artists :is(#grid, .artist-grid) :is(#row, .row) .col.booking {
    background: rgba(0, 170, 218, 0.9) url("../img/booking.jpg");
    background-size: cover;
    background-position: 50% 50%;
}

#artists :is(#grid, .artist-grid) :is(#row, .row) .col.office1 {
    background: rgba(0, 170, 218, 0.9) url("../img/office1.jpg");
    background-size: cover;
    background-position: 50% 50%;
}

#artists :is(#grid, .artist-grid) :is(#row, .row) .col.office2 {
    background: rgba(0, 170, 218, 0.9) url("../img/office2.jpg");
    background-size: cover;
    background-position: 50% 50%;
}

#artists :is(#grid, .artist-grid) :is(#row, .row) .col.office3 {
    background: rgba(0, 170, 218, 0.9) url("../img/office3.jpg");
    background-size: cover;
    background-position: 50% 50%;
}

#artists :is(#grid, .artist-grid) :is(#row, .row) .col.office4 {
    background: rgba(0, 170, 218, 0.9) url("../img/office4.jpg");
    background-size: cover;
    background-position: 50% 50%;
}

#artist :is(#grid, .artist-grid).office-hours :is(#row, .row) col {
    margin: 15px;
}

#artists :is(#grid, .artist-grid) :is(#row, .row) .col .wrap {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

#artists :is(#grid, .artist-grid) :is(#row, .row) .col span.more {
    background: #000;
    color: #fff;
    padding: 10px 20px;
}

#artists :is(#grid, .artist-grid) :is(#row, .row) .col:hover {
    color: #fff;
    background: #000;
    align-items: center;
    text-align: center;
    margin: 15px;
}

#artists.fourth-river :is(#grid, .artist-grid) :is(#row, .row) .col:hover {
    color: #000;
    background: #00aada;
    align-items: center;
    text-align: center;
    margin: 15px;
}

#artists :is(#grid, .artist-grid) :is(#row, .row) .col:hover h4 {
    color: #00aada;
}

#artists.fourth-river :is(#grid, .artist-grid) :is(#row, .row) .col:hover h4 {
    color: #fff;
}

#artists :is(#grid, .artist-grid) :is(#row, .row) .col:hover span.more {
    background: #fff;
    color: #000;
}

#artists.fourth-river :is(#grid, .artist-grid) :is(#row, .row) .col:hover span.more {
    background: #000;
    color: #fff;
}

#artists :is(#grid, .artist-grid) :is(#row, .row) .col.inactive {
    cursor: default;
    background: lightgray;
}

#artists :is(#grid, .artist-grid) :is(#row, .row) .col.inactive:hover {
    background: lightgray;
}

#artists h4 {
    color: #fff;
}

#artists.fourth-river h4 {
    color: #00aada;
}

#artists.fourth-river :is(#grid, .artist-grid) h4, #artists.officehours :is(#grid, .artist-grid) h4 {
    color: #fff;
    text-shadow: 0px 0px 4px rgba(0,0,0,0.5);
}

#artists.fourth-river #white h4 {
    color: #fff;
}

:is(#grantinfo, .grant-info) {
    display: block;
    margin: 0px auto;
}

:is(#grantinfo, .grant-info) .col {
    padding: 5% 5% 0px 5%;
}

:is(#grantinfo, .grant-info) .col span {
    font-size: 1.4rem;
    line-height: 1.4rem;
}

:is(#grantinfo, .grant-info) .col  p {
    font-size: 1.2rem;
    line-height: 1.7rem;
    margin: 15px 0px;
}

#black {
    display: block;
    background: #000;
    width: 100%;
    padding: 70px 0px;
}

#black img {
    max-width: 80%;
    display: block;
    margin: 0 auto;
}

#black h2, #black h3 {
    color: #fff;
}

#white {
    display: block;
    background: #00aada;
    width: 100%;
    margin-top: 80px;
    padding: 20px 0px 50px 0px;
}

#white.notop {
    margin-top: 0px;
}

#artists #white .container {
    padding-bottom: 0px;
}

#artists .container {
    padding-bottom: 0px;
    margin-bottom: 50px;
    padding-top: 50px;
}

#artists .container.lesspadding {
    padding-bottom: 50px;
    margin-bottom: 0px;
}

#artists #white .container {
    padding-top: 0px;
    margin-top: -20px;
    margin-bottom: 0px;
}

#artists #white .container.morebottom {
    padding-bottom: 50px;
}

#white h4 {
    text-align: left;
    color: #fff;
}

#white h4.center {
    text-align: center;
}

#artists.principal #white h4, #artists.fourth-river #white h4 {
    padding-top: 40px;
}

h3.padtop {
    margin-top: 100px;
}

#white ul, #white li {
    font-size: 1.1rem;
    list-style: square;
}

#white li {
    margin: 15px 0px;
}

#white .bigbutton {
    width: 250px;
    display: block;
    margin: 10px auto;
    text-align: center;
    color: #000;
    border-color: #000;
}

#white .bigbutton:hover {
    background: #fff;
}

#artists.principal #white .bigbutton, #artists.fourth-river #white .bigbutton {
    margin: 10px auto 10px 0px;
}

#sticky {
    border: 2px solid #fff;
    text-transform: uppercase;
    padding: 12px 30px;
    background: #00aada;
    color: #fff;
    transition: 0.4s;
    display: table;
    margin: 0 auto;
    font-family: "Styrene Bold", sans-serif;
    position: fixed;
    bottom: 40px;
    right: 30px;
    z-index: 15;
    font-size: 1.1rem;
    max-width: 240px;
    text-align: center;
}

#sticky:hover {
    background: #000;
    color: #00aada;
    border-color: #000;
}

#sticky.inactive {
    cursor: default;
    background: #000;
    color: #fff;
    border-color: #000;
}

#sticky.inactive:hover {
    background: #00aada;
    color: #fff;
}