/* Utility rules */
.bg-black {
  background-color: #000;
}
.bg-white {
  background-color: #FFF;
}
.bg-gray {
  background-color: #666;
}
.vh-100 {
  min-height: 100vh;
}

/* Specific base template html */
a#site-logo {
    display: block;
    margin: 0 auto;
    text-align: center;

    img {
        padding: 20px 0;
        max-width: 100%;
        max-height: 220px;
    }
}
a.join-link {
    width: 100%;
    display: block;
    text-align: center;
    font-weight: 900;
    font-size: 36px;

    padding: 10px 5px;
}
a.big-yellow-button {
    color: #000;
    background-color: #FC3;
    border-radius: 5px;
    text-decoration: none;
    
}
a.big-yellow-button:hover {
    color: #fff;
    background-color: #EB2;
}
p#partner-list-heading {
    color: #FC3;
    text-align: center;
    padding-top: 1em;
}
div#partner-list {
    .partner-block {
        img {
            max-width: 100%;
        }
    }
}
a#newsletter-button {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    max-width: 90%;
    display: block;
    margin: 0 auto;
}
ul#social-links {
    list-style: none;
    text-align: center;
    li {
        display: inline-block;
    }
}
img.social-link {
    width: 40px;
    margin: 0.5em
}
div#main-content {
    padding: 0;
}
header#site-header {
    background-image: url("/static/img/TORCA_website_header.9ed48e7fba64.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position-x: right;
    background-color: #FC3;
    min-height: 220px;
    flex: 0 0 auto;
}

p.mission-statement {
    max-width: 80%;
    font-style: italic;
    font-weight: bold;
}
p.mission-subheading {
    max-width:90%;
}

.navbar .navbar-nav a.nav-link {
    color: #333;
    font-weight: bold;
}

/*
 * Spinning animation for menu cogs on hover
 */

@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

@media (width >= 576px) {
    /* navbar overrides for cogs */
    li.nav-item:after{
        content: '';
        background: url("/static/img/menu_cog.d3559384caed.png");
        background-size: cover;
        height: 70px;
        width: 70px;
        position: absolute;

    }
    li.nav-item:hover:after {
        -webkit-animation-name: spin;
        -webkit-animation-duration: 3000ms;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        -moz-animation-name: spin;
        -moz-animation-duration: 3000ms;
        -moz-animation-iteration-count: infinite;
        -moz-animation-timing-function: linear;
        -ms-animation-name: spin;
        -ms-animation-duration: 3000ms;
        -ms-animation-iteration-count: infinite;
        -ms-animation-timing-function: linear;
        
        animation-name: spin;
        animation-duration: 3000ms;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    .nav-item {
        display: flex;
        justify-content: center;
        place-items: center;
        height: 70px;
        width: 70px;
        color: #000;
        margin: 0 5px;
        .nav-link {
            z-index: 10;
        }
        .nav-link:hover {
            font-size: 1.1rem;
        }
    }
}
@media (width < 576px) {
    header#site-header {
        background-image: unset;
    }
    nav.main-nav {
        background-image: url("/static/img/TORCA_website_header.9ed48e7fba64.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-position-x: right;
    }
    .navbar .navbar-nav a.nav-link {
        padding-left: 1em;
    }
    a.nav-link:hover {
        background-color: rgba(190,190,190, 0.5);
    }
    p.mission-statement {
        max-width: unset;
    }
    p.mission-subheading {
        max-width: unset;
    }
}

footer#torca-footer {
    background-color: #21252e;
    color: #FFF;
    text-align: center;
}
a.partner-link {
    display: flex;
    aspect-ratio: 1/1;
    width: fit-content;
    align-items: center;
}