/* ***************************************************************************************************** */
/* 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;
}

h1.has-logo{
    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(.description) {
    color:              #d22128;
    text-decoration:    underline;
}

.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;
}

/* 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.fourtyseven-percent-width{
    width:              47%;
    height:             auto;
}

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

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

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

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

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

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

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

div.twohundredfifty-pixel-wide img{
    max-width:          250px;
}

div.twohundredfifty-pixel-wide video{
    max-width:          250px;
}

footer {
    padding-bottom:      100px;
}

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

body.is-android-phone h1{
    font-family:        'Raleway', sans-serif;
    font-size:          2rem;
}

body.is-android-phone h2{
    font-family:        'Raleway', sans-serif;
    font-size:          2rem;
}

body.is-android-phone h3{
    font-family:        'Raleway', sans-serif;
    font-size:          1.75rem;
}

body.is-android-phone p{
    font-family:        'Raleway', sans-serif;
    font-size:          1.5rem;
}

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;
    }

}

/* 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;
}

/* 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;
}