﻿/* Semantic Targets */
body.culture main dt img {
    width: auto;
    height: 1.5em;
}

body.culture h1 {
    border-left: solid 8px var(--red);
    color: var(--drk-gray);
}

body.culture nav.divided > div:first-child:after {
    border-right: solid 2px white;
    content: '';
    position: absolute;
    top: 0;
    right: 15px;
    height: 100%;
}

/* Functional Targets */
[data-aside] {
    min-height: 16.9325vw;
}

[data-banner] {
    position: relative;
    height: 21.125vw;
    min-height: 28vh;
    margin-top: 77px;
}

[data-panels] ul {
    margin-bottom: -33vw;
}

[data-panels] + * {
    padding-top: calc(33vw - 4em);
}

[data-slidedeck] .card {
    border-radius: 0;
    cursor: pointer;
}
    [data-slidedeck] .card > * {
        color: inherit;
    }

    [data-slidedeck] .card:hover {
        background-color: var(--red);
        color: white;
    }

[data-callout] {
    min-height: 33vw;
}
    [data-callout]:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-color: rgba(0,0,0,0.65);
    }

.big {
    font-size: 28px;
}

/* Breakpoints */
@media only screen and (min-width: 576px){

    [data-panels] ul {
        width: calc(100% - 80px);
        margin-bottom: -25vw;
    }
        [data-panels] + * {
            padding-top: calc(25vw - 8em);
        }
}

@media only screen and (max-width: 767px){
    [data-aside] .btn, 
    nav.divided .btn {
        font-size: 14px;
        padding: 10px 20px 10px 12px;
        line-height: 1;
        height: auto;
    }
    .btn:before,
    .btn.btn-black:before {
        font-size: 2.375em;
    }
    .banner-padding .md-banner-padding {
        padding-top: unset !important;
        padding-bottom: unset !important;
    }
}

@media only screen and (min-width: 992px){
    body.culture main dt img {
        height: 0.875em;
    }
    [data-banner] figcaption {
        font-size:6.5em
    }
}

[data-banner] figcaption {
    margin: 0;
    line-height: .75;
    color: #fff;
    font-size: 3.6em;
    font-family: 'Titillium Web',sans-serif;
    text-transform: uppercase;
    display: block
}

@media(min-width: 768px) {
    [data-banner] figcaption {
        font-size:5em
    }
}

@media(min-width: 1200px) {
    [data-banner] figcaption {
        font-size:7.5em
    }
}