User:Akhilan/Banner/styles.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* Basic Shadowbox Style */
.mainpage-shadowbox {
    color: white;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

/* Headings within Shadowbox */
.mainpage-shadowbox h2,
.mainpage-shadowbox h3 {
    color: white;
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}

/* Links within Shadowbox */
.mainpage-shadowbox a {
    color: white;
    font-weight: bold;
}

/* Banner Image Container */
.banner-image {
    position: relative;
    max-width: 1125px;
    height: auto;
    margin-bottom: 0.6em;
}

/* Images within Banner */
.banner-image img {
    max-width: 100%;
    height: auto;
}

/* Banner Box Layouts */
.banner-box-wide {
    width: 80%;
}

.banner-box-left,
.banner-box-right {
    padding: 8px 7px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    width: 40%;
}

.banner-box-left {
    text-align: left;
}

.banner-box-right {
    text-align: right;
}

.banner-box-2 {
    position: absolute;
    z-index: 2;
    min-width: 20em;
}

/* Large Screen Adjustments */
@media screen and (min-width: 720px) {
    .banner-image img.nolink {
        display: none;
    }

    .mainpage-shadowbox h2 {
        font-size: 1.9em;
    }

    .mainpage-shadowbox h3 {
        font-size: 1.5em;
    }

    .banner-box-left {
        left: 3%;
    }

    .banner-box-right {
        right: 3%;
    }

    .banner-box-2 {
        margin-top: 2em;
    }
}

/* Small Screen Adjustments */
@media screen and (max-width: 720px) {
    .banner-image img:not(.nolink) {
        display: none;
    }

    .banner-image > .mainpage-shadowbox {
        width: 100%;
        min-height: 100%;
        background-color: black;
        opacity: 0;
    }

    .mainpage-shadowbox .quote > a:after {
        content: 'Tap to learn more.';
        white-space: pre;
    }

    .jcarousel-item:hover .mainpage-shadowbox {
        opacity: 1;
        transition: opacity 0.5s;
    }

    .jcarousel-control-prev,
    .jcarousel-control-next {
        display: none;
    }

    .interactiveIcon img {
        position: absolute;
        opacity: 0.4;
        height: 75% !important;
        width: auto;
        bottom: 0;
        right: 0;
    }
}