/* ***************************************************************************************************** */
/* Global styles
/* ***************************************************************************************************** */

body {
    font-family:        'Raleway', sans-serif;
    width:              100%;
    display:            block;
    margin:             0px;
    padding:            0px;
    background-color:   rgb(245,245,245);
    text-align:         center; 
}

h1,h2,h3 {
    padding-top:        25px;
}

h1 {
    font-family:        'Raleway', sans-serif;
    font-size:          1.5rem;
}

.section-heading {
    margin-top: 0px;
}

h2 {
    font-family:        'Raleway', sans-serif;
    font-size:          1.5rem;
}

h3 {
    font-family:        'Raleway', sans-serif;
    font-size:          1.25rem;
}

p {
    font-family:        'Raleway', sans-serif;
    font-size:          1rem;
}

a {
    color:              black;
    text-decoration:    none;
}

a:visited {
    /*color:              #d22128;*/
}

a:hover:not(.footer-nav-label) :not(.description) {
    color:              #d22128;
    text-decoration:    none;
}

a.footer-nav-label:hover {
    color:              white !important;
    text-decoration:    underline;
}

.footer-content-block a.footer-nav-label:visited {
    color:              white !important;
}

.footer-content-block a.footer-nav-label {
    color:              white;
}

.anniversary-callout {
    font-size:          3em;
    font-weight:        900;
    margin-top:         .67em;
    margin-bottom:      .67em;
    padding-top:        25px;
    line-height:        unset !important;
}

a:hover .anniversary-callout {
    color:              #d22128;
}

.client-logo {
    margin-top:         20px;
    width:              200px;
    margin-left:        auto;
    margin-right:       auto;
}   

/* Return to top button styles */
#return {
    position:           fixed;
    top:                0;
    right:              0;
    width:              40px;
    height:             40px;
    margin:             20px;
    opacity:            0.5;
    transition:         opacity 0.5s ease-in-out;
}

#return .fa-square-caret-up {
    height:             auto;
    width:              100%;
    color:              black;
}

#return .fa-square-caret-up:hover {
    color:              #D22329;
}

#return.hide {
    opacity:            0;
    pointer-events:     none;
}

/* Header styles */
header {
    padding:            25px 0px 25px 0px;
    background-color:   #D22128;
    color:              white;
}

header img.tvgla-logo {
    margin:             0px 0px 0px 0px;
    max-width:          50%;
    height:             auto;
}

/* Main content styles*/
.section {
    padding-bottom:     50px;
}

div.row {
    margin-bottom:      25px;
    width:              40%;
    /*max-width:          900px;*/
    min-width:          900px;
    margin-left:        auto;
    margin-right:       auto;
}

div.single-column {
    /* none */
}

div.single-column img {
    width:              100%;
    height:             auto;
}

div.single-column video {
    width:              100%;
    height:             auto;
}

div.two-column {
    display:            flex;
    flex-direction:     row;
    flex-wrap:          nowrap;
    justify-content:    space-between;
}

div.two-column img {
    max-width:          49%;
}

div.two-column video {
    max-width:          49%;
}

div.two-column div.stacked {
    display:            flex;
    flex-direction:     column;
    justify-content:    space-between;
}

div.two-column div.stacked img {
    width:              100%;
    height:             auto;
}

div.three-column {
    display:            flex;
    flex-direction:     row;
    flex-wrap:          nowrap;
    justify-content:    space-between;
}

div.three-column img {
    max-width:          32%;
    object-fit:         contain;
}

div.three-column div.article-container {
    max-width:          28%;
    object-fit:         contain;
    text-align:         left;
}

div.three-column div.article-container img.thumbnail {
    width:              100%;
    max-width:          unset;
}

div.three-column video {
    max-width:          32%;
    object-fit:         contain;
}

/* Custom width classes */
div.forty-seven-percent-width{
    width:              47%;
    height:             auto;
}

div.forty-seven-percent-width img{
    max-width:          100%;
}

div.sixty-five-percent-width{
    width:              65%;
    height:             auto;
}

div.sixty-five-percent-width img{
    max-width:          100%;
}

div.thirty-one-percent-width{
    width:              31%;
    height:             auto;
}

div.thirty-one-percent-width img{
    max-width:          100%;
}

div.five-hundred-pixel-wide img{
    max-width:          500px;
}

div.five-hundred-pixel-wide video{
    max-width:          500px;
}

div.two-hundred-fifty-pixel-wide img{
    max-width:          250px;
}

div.two-hundred-fifty-pixel-wide video{
    max-width:          250px;
}

footer {
    padding-bottom:      100px;
}

/* Footer component styles (shared by _includes/components/footer.html) */
.footer-parent-container {
    background-color:   #d22029;
    color:              white;
}

.footer-child-container {
    padding:            20px 0px 0px 0px;
    display:            flex;
    flex-wrap:          wrap;
    justify-content:    space-between;
}

.footer-content-block {
    flex:               1 1 50%;
    text-align:         right;
    margin-right:       45px;
}

.social-headline {
    font-weight:        900;
    margin-top:         0px;
    margin-bottom:      10px;
    color:              white;
}

.social-icons {
    max-width:          24px;
    height:             auto;
}

.tvgla-logo-footer {
    margin-left:        45px;
}

.tvgla-logo-footer img {
    margin-right:       0px;
}

/* ***************************************************************************************************** */
/* Android smartphone specific styles
/* ***************************************************************************************************** */

body.is-android-phone #return{
    width:              10%;
    height:             10%;
    aspect-ratio:       1;
}

body.is-smartphone #return{
    width:              10%;
    height:             10%;
    aspect-ratio:       1;
}

/* ***************************************************************************************************** */
/* Width Scaling adjustments
/* ***************************************************************************************************** */

@media( max-width: 920px ) {
    div.row {
        width:           99%;
        min-width:       0px;
    }

    .info {
        padding-left:   5px;
        padding-right:  5px;
    }

    /* Monthly card date/title cells (homepage content blocks) */
    td.card-date-cell {
        width:           25% !important;
        font-size:       0.8rem;
        line-height:     1.2;
    }

    td.card-title-cell {
        width:           75% !important;
    }

    .card-date-title {
        font-size:       1rem;
        line-height:     1.15;
        padding-top:     0px;
    }

    /* Footer: logo occupies the left half, social/contact links stack in the right half */
    .footer-child-container {
        display:             grid;
        grid-template-columns: 50% 50%;
        align-items:         center;
        padding:             20px 15px 20px 15px;
        box-sizing:          border-box;
    }

    .tvgla-logo-footer {
        grid-row:            span 2;
        margin-left:         0px;
        text-align:          left;
    }

    .footer-content-block {
        flex:                none;
        margin-right:        0px;
    }

}

/* High pixel density detection
@media (min-resolution: 3dppx) {
}*/

/* Desktop detection 
@media (pointer: fine) {
}*/

/* Mobile/Tablet (Touchscreen) detection
@media (pointer: coarse) {
} */

/* ***************************************************************************************************** */
/* Lightbox styles
/* ***************************************************************************************************** */

/* The background layer */
.overlay {
    display:            none; /* Hidden by default */
    position:           fixed;
    z-index:            9999; /* Stay on top */
    left:               0;
    top:                0;
    width:              101%;
    height:             101%;
    background-color:   rgba(0, 0, 0, 0.9); /* Dark background */
    justify-content:    center;
    align-items:        center;
}

/* The actual image inside the overlay */
.overlay-content {
    max-width:          90%;
    max-height:         80%;
    border:             3px solid white;
    border-radius:      4px;
    /* Ensure crispness on S25 Ultra / High-DPI */
    image-rendering:    -webkit-optimize-contrast;
}

/* Close button */
.close-btn {
    position:           absolute;
    top:                0px;
    right:              40px;
    color:              #ffffff;
    font-size:          5rem;
    font-weight:        bold;
    cursor:             pointer;
}

body.is-android-phone .close-btn{
    font-size:          10rem;
}

body.is-smartphone .close-btn {
    font-size:          10rem;
}

img.overlay-content {
    background-color: white;
}

/* ***************************************************************************************************** */
/* Page-specific styles (scoped to body#<page-id>, matching each page's <body id="..."> */
/* ***************************************************************************************************** */

/* Homepage (body#base) */
body#base a:hover .anniversary-callout {
    color:              black;
}

body#base a:hover .card-title {
    color:              black;
}

body#base a:hover .learn-more {
    text-decoration:    underline;
}

body#base div.two-column div.article-container {
    max-width:          49%;
    padding-left:       1%;
    margin-bottom:      25px;
}

body#base div.two-column div.article-container:first-child {
    max-width:          49%;
    padding-right:      1%;
    padding-left:       unset;
}

body#base div.two-column div.article-container a {
    max-width:          100%;
}

body#base div.two-column div.article-container img {
    max-width:          100%;
}

body#base div.article-container h2 {
    margin-top:         0px;
    padding-top:        0px;
}

body#base td {
    background-color:   #979797;
}

body#base td h2 {
    color:              white;
}

body#base a:visited {
    color:              #323232;
}

body#base a:hover td {
    background-color:   #d22029;
}

body#base a:hover td h2 {
    color:              white !important;
}

/* Story pages (shared template: in-their-words, our-20th-year-in-business) */
.story-page div.copy-section {
    margin-bottom:      0px;
    padding-bottom:     0px;
}

.story-page div.row {
    margin-bottom:      0px;
    padding-bottom:     0px;
}

.story-page .left-aligned {
    text-align:         left;
}

.story-page h1, .story-page h2, .story-page h3, .story-page h4 {
    font-size:          3em;
    font-weight:        900;
    line-height:        1em;
    margin-bottom:      .5lh;
}

.story-page main p:not(.anniversary-callout), .story-page main li {
    color:              #323232;
    font-weight:        500;
    line-height:        1.5em;
}

.story-page .subhead {
    font-style:         italic;
    font-size:          1.25em;
    font-weight:        400;
    margin-top:         0px;
    margin-bottom:      1.2em;
    color:              #323232;
}

.story-page .client-name {
    color:              #D22128;
}

.story-page main {
    padding-bottom:      100px;
}

/* Mobile: match the homepage's mobile text sizes instead of scaling up for touch */
@media( max-width: 920px ) {
    .story-page h1, .story-page h2, .story-page h3, .story-page h4 {
        font-size:          1.5rem;
        line-height:        1.2;
    }
    .story-page main p:not(.anniversary-callout), .story-page main li {
        font-size:          1rem;
    }
    .story-page .subhead {
        font-size:          1.1rem !important;
    }
}

/* "20 Lessons in 20 Years" page (20-in-20/index.html) */
.lesson-number {
    font-weight:        900;
    font-size:           6rem;
    color:               #d22029;
    line-height:         1.0;
}

.lesson-copy {
    font-weight:         500;
    font-size:           1.5rem;
    font-family:         'Raleway';
}

.lesson-lead {
    font-size:           1.5rem;
}

/* Fixed width (not "ch", which measures against the cell's own small font,
   not the much larger number inside it) so 1- and 2-digit numbers share the
   same column and right-align flush against each other. Sized to fit "20"
   at the desktop .lesson-number size (6rem). */
.lesson-number-cell {
    vertical-align:      middle;
    text-align:          right;
    width:               7.5rem;
    padding-right:       40px;
}

@media( max-width: 920px ) {
    .lesson-number {
        font-size:       3rem;
    }
    .lesson-copy {
        font-size:       1rem;
    }
    .lesson-lead {
        font-size:       1rem;
    }
    /* Sized to fit "20" at the mobile .lesson-number size (3rem) */
    .lesson-number-cell {
        width:           4rem;
        padding-right:   20px;
    }
}

/* Top 5 Innovation Executions showcase (body#top-5-innovation-executions) */
body#top-5-innovation-executions .countdown-parent-container {
    display:            flex;
    justify-content:    center;
    align-items:        center;
    width:              100%;
    overflow:           hidden;
}

body#top-5-innovation-executions .countdown-child-container {
    position:           relative;
    padding:            40px 0px 0px 0px;
    display:            flex;
    align-items:        center;
    text-align:         left;
    gap:                20px;
}

body#top-5-innovation-executions .countdown-number {
    font-size:          6rem;
    font-weight:        900;
    color:              #d22029;
    line-height:        1;
    flex-shrink:        0;
}

body#top-5-innovation-executions .countdown-title-block {
    display:            flex;
    flex-direction:     column;
    justify-content:    center;
}

body#top-5-innovation-executions .countdown-title {
    margin:             0 0 4px 0;
    font-size:          2.2rem;
    letter-spacing:     0.05em;
    color:              #1a1a1a;
    line-height:        1.2;
    font-weight:        800;
}

body#top-5-innovation-executions .countdown-subtitle {
    margin:             0;
    font-size:          1.4rem;
    font-weight:        400;
    color:              #555555;
    letter-spacing:     0.04em;
    line-height:        1.3;
    padding-top:        0px;
}

body#top-5-innovation-executions .honorable-mention-title {
    font-family:        'Raleway', sans-serif;
    font-size:          1.5rem;
}

body#top-5-innovation-executions .honorable-mention-subtitle {
    margin:             -8px 0 12px 0;
    font-size:          1.1rem;
    font-weight:        400;
    color:              #555555;
    letter-spacing:     0.04em;
    padding-top:        0px;
}

body#top-5-innovation-executions .info p {
    line-height:        1.5em;
}

body#top-5-innovation-executions .back-nav a:hover .nav-label {
    color:              white;
    text-decoration:    underline;
}

/* Video audio button */
/* This targets the mute button and the volume slider specifically */
video.auto-control::-webkit-media-controls-mute-button,
video.auto-control::-webkit-media-controls-volume-slider {
    display: none !important;
    -webkit-appearance: none;
}

/* For some versions of Safari/Chrome to ensure the container is hidden */
video.auto-control::-webkit-media-controls-volume-control-container {
    display: none !important;
}