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

/* ANIMATIONS */

.reveal {
    position: relative;
    transform: translateY(50px);
    opacity: 0;
    transition: 2s all ease;
}

.reveal.active {
    transform: translateY(0);
    opacity: 1;
}

/* MEDIA QUERIES */

@media (max-width: 800px) {
    /* MOBILE GLOBAL */

    h1 {
        overflow-wrap: anywhere;
    }

    :is(#desktop, .desktop-only), #fancy-carousel.desktop {
        display: none;
    }

    .desktop {
        display: none !important;
    }

    .mobile {
        display: block !important;
    }

    :is(#mobile, .mobile-only), #fancy-carousel.mobile {
        display: block;
    }

    #info, #about, #headlines, #grantees, #faq, #partners, #footer {
        padding: 0px 0px 50px 0px;
    }

    #signupwrap {
        z-index: 1000;
        position: absolute;
        width: 80%;
        left: 50%;
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        top: 50%;
    }

    #info .cohort.bottomleft {
        text-align: left;
        bottom: auto;
        top: 10px;
        left: 10px;
    }

    .header .cohort.mobile {
        text-align: right;
    }

    .cohort {
        max-width: 35vw;
    }

    #footer .cohort {
        display: none;
    }

    #menu {
        display: none;
    }

    .content {
        width: 80%;
    }

    .container {
        width: 80%;
    }

    :is(#row, .row), .col {
        display: block;
        width: 100%;
        flex: unset;
    }

    .col {
        width: 100%;
        padding: 0%;
        margin: 0 auto;
    }

    .col.bg {
        width: 100%;
    }

    h2, #artists h2.teal {
        font-size: 3rem;
        line-height: 3rem;
        margin-bottom: 10px;
    }

    .button {
        border: none;
        background: rgba(0,170,218,1);
    }

    p {
        font-size: 1.3rem;
    }

    .raficon {
        top: -6vh;
        height: 12vh;
    }

    h1, h2 {
        text-align: center;
    }

    h1.left, h2.left {
        text-align: left;
    }

    #artists.grants.past h7 {
        margin: 50px auto 30px auto;
    }

    /* MOBILE HOME */

    #home {
        background-position: top center;
        background: url("../img/artistmobile.jpg");
        background-size: cover;
    }

    #home .homecontent {
        margin-top: 0px;
        width: 100%;
        background: transparent;
        padding: 8% 12% 14% 8%;
    }

    #home .mobilebg {
        background: rgba(0,135,188,0.85);
        -webkit-filter: saturate(130%);
        filter: saturate(130%);
        position: absolute;
        z-index: 0;
        top: 0px;
        height: 40vh;
    }

    #home p {
        font-size: 1.2rem;
        line-height: 2rem;
    }

    #home h2 {
        margin: 40px auto;
        color: #00aada;
        font-size: 2.6rem;
        line-height: 2.6rem;
    }

    .raftop {
        width: 100px;
        display: block;
        margin: 0px auto 30px 0px;
    }

    .raftop.subpage {
        position: absolute;
        top: 33px;
        left: 33px;
    }

    .invert {
        -webkit-filter: invert(100%);
        filter: invert(100%);
    }

    #home .button {
        background: rgba(0,170,218,0.8);
        display: block;
        margin: 10px auto 10px 0px;
        max-width: 250px;
        border: none;
    }

    .ca3-scroll-down-link {
        left: 35%;
        bottom: 0px;
        display: none;
    }

    #grantees h3 {
        text-align: left;
        max-width: 250px;
        margin: 0px auto 30px 0px;
    }

    #artists.past .container {
        width: 80%;
    }

    #artists.grants.past  p .bold {
        font-size: 1.3rem;
    }

    #homepage #about h3.white {
        text-align: left;
    }

    /* MOBILE INFO */

    #info {
        text-align: left;
        padding: 0px 0px 60px 0px;
    }

    #info .bg {
        width: 100vw;
        height: 100vw;
        background: url(../img/infomobile.jpg) #000;
        background-size: cover;
        background-position: center;
    }

    #info img, #info .bg {
        float: none;
    }

    #info h2 {
        font-size: 2rem;
        line-height: 2.2rem;
        text-align: left;
    }

    #info .col.right {
        margin: -10vh auto 0px auto;
        width: 80%;
    }

    #info li, #info .bullets span {
        text-align: left;
    }

    .embed-container {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    #info .button {
        margin: 0 auto 0px 0px;
    }

    /* MOBILE ABOUT */

    h1.smallerinmobile {
        font-size: 8vw;
        line-height: 8vw;
    }

    #about {
        background: #00aada;
        padding-bottom: 30px;
    }

    #about .stamp {
        width: 30%;
        display: block;
        margin: 0px auto 30px 0px;
        padding-top: 50px;
    }

    #about h1 {
        margin-bottom: 30px;
        color: #fff;
    }

    h1.narrow {
        font-size: 2rem;
        line-height: 2rem;
    }

    #about .container, #about.main .container {
        padding-top: 80px;
    }

    #about h1.roomy {
        margin-top: 50px;
    }

    #about .col, #content .col {
        padding: 0px 0px;
        margin: 0 auto;
        width: 100%;
    }

    #about .col.pushdownmobile {
        margin-top: 20px;
    }

    #artists.past #content .col.nomobilepadding {
        padding: 0% 2% 0% 2%;
    }

    #artists.past #content .col.nomobilepadding ul {
        margin: 0px;
    }

    #about.main .col {
        padding: 5% 0% 0px 0%;
    }

    #about .col span {
        font-size: 1.4rem;
        margin-bottom: 20px;
    }

    #about p {
        font-size: 1.3rem;
        line-height: 2.2rem;
    }

    #about ul {
        margin-block-start: 0em;
        margin-block-end: 0em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 0px;
    }

    #about li {
        margin-left: 20px;
        font-size: 1.3rem;
        line-height: 2rem;
    }

    #about .button {
        margin-bottom: 50px;
    }

    #content .container h1 {
        padding-bottom: 30px;
    }

    #content .container h1.lessbottom {
        padding-bottom: 0px;
    }

    #content span.aboutfounder {
        margin-bottom: 40px;
    }

    #content .container img.partnerlogos {
        display: inline-block;
        padding: 0px 30px;
        width: 45%;
        height: auto;
        margin: 0px auto;
    }

    #content .col.wider span.founder, #content .col.shorter span.founder {
        font-size: 1.2rem;
    }

    #content .col.wider span.founder span, #content .col.shorter span.founder span {
        font-size: 1rem;
    }

    #content .col.shorter span.founder {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    #content .col.wider {
        padding: 0% 0% 0% 0%;
        display: inline-block;
        width: 46%;
        margin: 1%;
        vertical-align: top;
    }

    #content .col.shorter {
        margin-bottom: 25px;
    }

    #aboutpage #content .col.shorter {
        margin-bottom: 0px;
    }

    #aboutpage #content .col.shorter ul {
        margin: 0px;
    }

    #content .col.wider.spacer {
        display: none;
    }

    /* MOBILE HEADLINES */

    #headlines {
        padding-bottom: 50px;
    }

    #headlines .col {
        width: 80%;
        margin: 10px auto;
        border: 1px solid #fff;
    }

    #headlines h1 {
        margin: 0px auto 40px 10%;
        text-align: left;
        padding-top: 40px;
    }

    /* MOBILE GRANTEES */

    #grantees {
        width: 80%;
        display: block;
        margin: 0 auto;
    }

    #grantees h1 {
        text-align: left;
        margin: 0 auto 0px 0px;
        padding-top: 40px;
    }

    #grantees .bigbutton {
        margin: 0px auto auto 0px;
    }

    #grantees p {
        text-align: left;
    }

    /* MOBILE ARTISTS PAGE */

    #artists {
        padding: 0px 0px 50px 0px;
    }

    #artists .container {
        padding-top: 80px;
    }

    #artists .container.pushup {
        padding-top: 30px;
    }

    #artists .col.left.lesspadding.nomobilepadding, #artists .col.right.lesspadding.nomobilepadding {
        padding-top: 0px;
        padding-bottom: 20px;
    }

    :is(#row, .row).narrow3 {
        width: 100%;
    }

    #artists  .col.right {
        padding-top: 10px;
    }

    #artists .grid {
        width: 100%;
        margin-left: 0px;
    }

    #artists :is(#grid, .artist-grid) :is(#row, .row) .col {
        margin: 10px 0px;
        height: 55vh;
        min-height: 400px;
        padding: 0px 5%;
    }

    #artists :is(#grid, .artist-grid) :is(#row, .row).programslist .col {
        height: 35vh;
        min-height: 200px;
    }

    #artists.programspage :is(#grid, .artist-grid) :is(#row, .row).programslist .col {
        min-height: 370px;
    }

    #artists :is(#grid, .artist-grid) :is(#row, .row).programslist .col.details {
        height: auto;
        min-height: 100px;
    }

    #artists :is(#grid, .artist-grid) :is(#row, .row) .col:hover {
        margin: 10px 0px;
    }

    #artists :is(#grid, .artist-grid) :is(#row, .row) .col.inactive {
        margin: 10px 0px;
        height: 20vh;
        min-height: 100px;
        padding: 0px 5%;
    }

    #artists h5 {
        font-size: 1.2rem;
    }

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

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

    #content span.founder {
        margin: 10px auto 30px 0px;
    }

    #artists.past :is(#row, .row).narrow {
        width: 100%;
    }

    #artists.past :is(#row, .row).narrow.pushdown {
        margin-top: 50px;
    }

    /* MOBILE GRANT PAGES */

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

    #black h3 {
        max-width: 250px;
    }

    #sticky {
        font-size: 1rem;
        max-width: 150px;
        padding: 10px 20px;
    }

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

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

    #white .bigbutton {
        margin: 10px auto 10px 0px;
    }

    :is(#row, .row).pushup {
        margin-top: 10%;
    }

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

    :is(#row, .row).minimalpadding {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    #white h4 {
        margin-top: 40px;
    }

    #white {
        padding-bottom: 20px;
    }

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

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

    .morebottom {
        padding-bottom: 30px;
    }

    #artists.fourth-river h4.mobilepadding {
        padding-top: 30px;
    }

    /* MOBILE EDUCATION */

    #education {
        padding-top: 0px;
    }

    /* MOBILE INDUSTRY */

    #industry {
        padding-top: 0px;
    }

    #industry h2 {
        font-size: 2.5rem;
        line-height: 3rem;
    }

    #industry h2.moretop {
        padding-top: 40px;
    }

    /* MOBILE FAQ */

    #faq {
        padding-top: 0px;
    }

    .header.faq {
        background-position: 30% 50%;
    }

    /* MOBILE FOOTER */

    #footer .col.left {
        width: 100%;
    }

    #footer .col img {
        padding-top: 50px;
    }

    #footer .col .seal img {
        padding-top: 0px;
    }

    #footer .button {
        display: table;
        width: 100%;
        padding: 10px 0px;
        margin: 0px auto 70px auto;
        background: transparent;
        border: 2px solid #fff;
    }

    #footer .col.right {
        display: none;
    }

    #footer form {
        width: 100%;
    }

    #footer #socials {
        display: block;
        margin: 0px auto 30px auto;
        text-align: center;
    }

    #footer #socials a {
        font-size: 1.3rem;
    }

    #footer h3 {
        margin: 0px auto 10px auto;
    }

    #footer .button {
        margin-bottom: 40px;
        font-size: 0.8rem;
    }

    #footer .col img {
        width: 70%;
        margin: 0 auto 10px auto;
    }

    #footer .col .seal img {
        width: 108px;
        margin: 0px auto;
    }

    form input, form input.submit {
        font-size: 0.8rem;
    }

    /* MOBILE DONATE */

    #donate {
        padding-top: 0px;
        padding-bottom: 20px;
    }

    #donate :is(#row, .row).narrow {
        width: 100%;
    }

    #donate h2 {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }

    #donate h6 {
        text-align: center;
    }
}

/* MOBILE BITS AND BOBS */

@media (min-width: 1500px) {
    .content {
        max-width: 1100px;
    }

    #about {
        background-size: 39vw;
    }
}

@media (min-width: 800px) {
    #toggle, #overlay {
        display: none !important;
    }
}

@media (min-width: 800px) and (max-width: 1100px) {
    #about .col span {
        font-size: 1.4rem;
    }
}

@media (min-width: 800px) and (max-width: 1000px) {
    #about .col span {
        font-size: 1.3rem;
    }

    #about li {
        font-size: 1.3rem;
        line-height: 2rem;
    }
}

@media (max-width: 1300px) {
    .buttons .button {
        padding: 10px 30px;
    }
}

@media (min-width: 1900px) {
    #info h2.narrow {
        max-width: 600px;
    }
}

@media (min-width: 800px) and (max-height: 800px) {
    .raficon {
        top: -8vh;
    }
}

@media (min-width: 800px) and (min-height: 850px) {
    .raficon {
        height: 10vh;
    }
}

@media (min-width: 800px) and (min-height: 1300px) {
    .raficon {
        top: -5vh;
    }
}

@media (min-width: 800px) and (max-height: 600px) {
    #artists .header.grant2 {
        background: url("../img/overtones-small.jpg") #000;
        background-size: cover;
        background-position: 50% 50%;
    }

    .raficon {
        top: 49vh;
    }
}

@media (min-width: 800px) and (max-width: 1350px) {
    h2 {
        font-size: 2.6rem;
        line-height: 3rem;
    }
}

@media (min-width: 800px) and (max-width: 1075px) {
    #home .homecontent {
        padding: 6% 8% 6% 8%;
    }
}

@media (min-width: 800px) {
    .notoppadding {
        padding-top: 0px !important;
    }

    #artists.fourth-river .nopadding {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

    #content :is(#row, .row).narrow2, #content :is(#row, .row).narrow2 img {
        max-width: 374px;
        width: 100%;
    }

    #content :is(#row, .row).narrow3 .col {
        max-width: 324px;
        width: 100%;
        margin: 0px auto;
    }

    #content :is(#row, .row).narrow2 .col, #content :is(#row, .row).narrow3 .col {
        padding: 5% 0% 0% 0%;
    }
}