/* Custom CSS to override Bootswatch Cerulean settings */

.navbar-brand {
    font-size: 1.5em;
}

.container {
    padding-left: 0px;
    padding-right: 0px;
}

body {
    background-color: #EAEAF3;
}

.display-5 {
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.2;
}

.display-6 {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.2;
}

.jumbotron {
    background-color: #fff;
    padding: 2rem 2rem;
}

.img-multimedia {
    margin-right: 5px;
    margin-bottom: 10px;
    width: 325px;
    height: auto;
    float: left;
}

.p-multimedia {
    font-size: small;
}

.img-small {
    width: 170px;
    height: 115px;
    float: left;
}

.img-small:hover {
    border: 2px solid #2FA4E7;
}

.img-big {
    width: 450px;
    height: auto;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
    float: left;
}

.img-big:hover {
    border: 2px solid #2FA4E7;
}

.img-thumbnail {
    margin-top: 10px;
    margin-bottom: 30px;
    border: none;
}

th {
    font-size: small;
}

td {
    font-size: small;
}

/* Adding media queries to adjust image sizes for smaller screen sizes
1. For the Visualizations component so that the four-across layout is preserved for smaller screens
2. For the Comparisons component so that the images do not ever overlap when zoomed in and are 100% width for smaller screens */

@media (max-width: 1000px) {
    .img-big {
        width: 300px;
        height: auto;
    }
}

@media (max-width: 800px) {
    .img-multimedia {
        width: 300px;
    }
    .img-small {
        width: 120px;
        height: 75px;
    }
    .img-big {
        width: 100%;
        height: auto;
    }
}

@media (max-width: 525px) {
    .img-multimedia {
        width: 300px;
    }
    .img-small {
        width: 75px;
        height: 50px;
    }
}

@media (max-width: 480px) {
    .img-multimedia {
        width: 300px;
    }
    .img-small {
        width: 70px;
        height: 45px;
    }
}