/* Display title icon, make buttons larger */
@media (min-width: 340px) {
    .bigbutton {width: 300px;}
    .button-text-small {display: none;}
    .button-text-large {display: block;}
}

/* Make buttons larger */
@media (min-width: 340px) {
    .bigbutton {width: 320px;}
}

/* Display title text, display cards */
@media (min-width: 440px) {
    .bigbutton {width: 350px;}
    .card {
        box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.5);
    }
    .content {
        padding: 20px 10px 0px 10px;
    }
}

/* Replace video and slideshow with medium versions */
@media (min-width: 535px) {
    .vid-med, .slideshow-med {
        display: block;
    }
    .vid-small, .slideshow-small {
        display: none;
    }
}

/* Use longer logo in navigation */
@media (min-width: 768px) {
    .titlemed {display: block;}
    .titlesmall {display: none;}
}

/* Make large buttons next to paragraphs */
@media (min-width: 850px) {
    .flex-container {
        flex-direction: row;
    }
    .bigbuttonbox {
        margin-left: 10px;
    }
}

/* Use navigation rail instead of top navigation bar */
@media (min-width: 970px) {
    .desktopnavi {
        display: flex;
    }
    .mobilenavi, .mobilemenu {
        display: none;
    }
    .content {
        min-width: 960px;
        max-width: 1280px;
        border-radius: 0px;
        margin: auto;
        padding: 20px 10px 40px 130px;
    }
}

/* Change video and slideshow to be shown next to each other */
@media (min-width: 1250px) {
    .video-highlights {
        flex-direction: row;
    }
}

/* Replace video and slideshow with large versions */
@media (min-width: 1450px) {
    .vid-large, .slideshow-large {
      display: block;
    }
    .vid-med, .slideshow-med {
      display: none;
    }
}

@media (min-width: 440px) {
    html {
        background: #1F1F1F url("img/bg.png") fixed;
    }
}

@media (max-width: 439px) {
    html {
        background: #25232A;
    }
}