/// ----------------------------------------------------------------------------------------
/// Bulma override styles
/// ----------------------------------------------------------------------------------------
/// @author - Modop
/// @description - This styles override the Bulma base classes/setttings
////

/////
/// ----------------------------------------------------------------------------------------
/// @description - All viewport widths up to infinity
/// ----------------------------------------------------------------------------------------
////
@media (min-width: $mobile) {
    .container {
        width: 100%;
    }

    .button {
        border: none;
        border-radius: 0;
        box-shadow: 0 rem-calc(2) rem-calc(10) $shadow-color;
        font-family: $styleguide-titles-font-family;
        font-size: rem-calc(12);
        letter-spacing: rem-calc(1);
        padding: 1.5rem 2rem;
        text-transform: uppercase;
        @include button-hover();
    }

    .select {
        background-color: transparent;
        color: $gray;
        font-size: rem-calc(12);
    }

    .select,
    .select:hover,
    .select:focus {
        border: none;
        border-color: none;
        outline: none;
    }

    // Move drop down arrow to the left
    .select:not(.is-multiple):not(.is-loading)::after {
        left: 1em;
    }

    .select select:not([multiple]) {
        padding-left: 2.5em;
        padding-right: .5em;
    }

    .hidden {
        visibility: hidden;
    }

    // ensures no flashing of unstyled background/content for hero videos 
    .hero video,
    .hero .video-react {
        background-color: $white !important;

        .video-react-big-play-button {
            display: none !important;
        }
    }

    .hero .video-react .video-react-poster {
        background-color: $white !important;
        background-position: 50% 0 !important;
        background-size: cover !important;
        vertical-align: top !important;
    }
}
/// End of Mobile Up

/////
/// ----------------------------------------------------------------------------------------
/// @description - Tablet (768px) viewport widths up to infinity
/// ----------------------------------------------------------------------------------------
////
@media (min-width: $tablet) {
}
/// End of Tablet Up

/////
/// ----------------------------------------------------------------------------------------
/// @description - Desktop (1024px) viewport widths up to infinity
/// ----------------------------------------------------------------------------------------
////
@media (min-width: $desktop) {
    .container {
        max-width: rem-calc(1280);
    }

    .button {
        font-size: rem-calc(14);
        padding: 1.75rem 3rem;
    }
}
/// End of Desktop Up


/////
/// ----------------------------------------------------------------------------------------
/// @description - Widescreen (1280px) viewport widths up to infinity
/// ----------------------------------------------------------------------------------------
////
@media (min-width: $widescreen) {
    .container {
        max-width: rem-calc(1366);
    }
}
/// End of Widescreen Up