/* XXXS */
@media only screen and (min-width: 272px) {
    h1, h2, h3, h4, h5, h6,
    p, a, div, section, article,
    span, button, input, optgroup,
    select, option, textarea {
        padding: 0;
        margin: 0;
        font-family: Calibri;
        text-align: justify;
    }

    a {
        cursor: pointer;
    }

    body {
        overflow-x: hidden;
        position: relative;
    }

    /* Google Overrides */
    .grecaptcha-badge {
        z-index: 99999999;
    }

    /* Header */
    .header {
        background: #000000;
        color: #fff;
        font-size: .9rem;
        font-weight: 600;
        width: 100%;
        position: fixed;
        top: 0;
        padding: 5px;
        z-index: 1000;
    }

    /* Footer */
    .footer {
        background: #000000;
        color: #fff;
        font-size: .9rem;
        font-weight: 600;
        width: 100%;
        position: fixed;
        bottom: 0;
        padding: 5px;
        z-index: 1000;
    }

    /* WinterHowl Home Link */
    .winterHowlLink,
    .winterHowlLink:active,
    .winterHowlLink:focus,
    .winterHowlLink:visited {
        color: #ffffff !important;
        cursor: pointer;
    }

    .winterHowlLink:hover {
        text-decoration: none;
        color: #cccccc;
    }

    /* Privacy Policy Link */
    .privacyPolicyLink,
    .privacyPolicyLink:active,
    .privacyPolicyLink:focus,
    .privacyPolicyLink:visited {
        color: #ffffff !important;
        cursor: pointer;
    }

    .privacyPolicyLink:hover {
        text-decoration: none;
        color: #cccccc;
    }

    /* Contact Us Link */
    .contactUsLink,
    .contactUsLink:active,
    .contactUsLink:focus,
    .contactUsLink:visited {
        color: #ffffff !important;
        cursor: pointer;
    }

    .contactUsLink:hover {
        text-decoration: none;
        color: #cccccc;
    }

    .contactUsSubmit {
        width: 80%;
    }

    /* Modal Overrides */
    .modal-content{
        background: #aaa;
    }

    /* About Us */
    .aboutUs {
        background: rgba(0, 0, 0, .1);
    }

    .aboutUs-image1 {
        background-image: url("../media/images/aboutUs-1-small.jpg");
    }

    .aboutUs-image2 {
        background-image: url("../media/images/aboutUs-2-small.jpg");
    }

    .aboutUs-image3 {
        background-image: url("../media/images/aboutUs-3-small.jpg");
    }

    .aboutUs-image4 {
        background-image: url("../media/images/aboutUs-4-small.jpg");
    }

    /* Web Dev */
    .webDev {
        background: rgba(0, 0, 0, .2);
        margin-left: -100vw;
    }


    .webDev-image1 {
        background-image: url("../media/images/webDev-1-small.jpg");
    }

    .webDev-image2 {
        background-image: url("../media/images/webDev-2-small.jpg");
    }

    .webDev-image3 {
        background-image: url("../media/images/webDev-3-small.jpg");
    }

    .webDev-image4 {
        background-image: url("../media/images/webDev-4-small.jpg");
    }

    /* App Dev */
    .appDev {
        background: rgba(0, 0, 0, .1);
    }

    .appDev-image1 {
        background-image: url("../media/images/appDev-1-small.jpg");
    }

    .appDev-image2 {
        background-image: url("../media/images/appDev-2-small.jpg");
    }

    .appDev-image3 {
        background-image: url("../media/images/appDev-3-small.jpg");
    }

    .appDev-image4 {
        background-image: url("../media/images/appDev-4-small.jpg");
    }

    /* Game Dev */
    .gameDev {
        background: rgba(0, 0, 0, .2);
        margin-left: -100vw;
    }

    .gameDev-image1 {
        background-image: url("../media/images/gameDev-1-small.jpg");
    }

    .gameDev-image2 {
        background-image: url("../media/images/gameDev-2-small.jpg");
    }

    .gameDev-image3 {
        background-image: url("../media/images/gameDev-3-small.jpg");
    }

    .gameDev-image4 {
        background-image: url("../media/images/gameDev-4-small.jpg");
    }

    /* Content */
    .content {
        overflow: hidden;
    }

    .contentPane {
        display: flex;
        width: 200vw;
        height: 50vh;
    }

    .coverImage {
        position: relative;
        width: 100vw;
        height: 50vh;
        cursor: pointer;
        filter: brightness(50%);
        z-index: 999;
        box-shadow: 3px 0px 20px 0px #000;
        -webkit-box-shadow: 3px 0px 20px 0px #000;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
    }

    .coverImage:hover {
        filter: brightness(100%);
    }

    .coverImageText {
        color: #ffffff;
        font-size: 1.5rem;
        font-weight: 800;
        position: absolute;
        z-index: 999;
        top: 50%;
        left: 50%;
        right: 0;
        width: 100%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        -webkit-transition: all .75s ease-in-out;
        -moz-transition: all .75s ease-in-out;
        -o-transition: all .75s ease-in-out;
        -ms-transition: all .75s ease-in-out;
        transition: all .75s ease-in-out;
        text-shadow: 1px 0 0 #333, 0 -1px 0 #333, 0 1px 0 #333, -1px 0 0 #333;
    }

    /* Sections */
    .sectionLeft {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 100vw;
        height: 50vh;
    }

    .sectionRight {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100vw;
        height: 50vh;
    }

    .sectionLeft p {
        display: flex;
        padding: 15px;
        max-width: 240px;
        font-size: .5rem;
    }

    .sectionRight p {
        display: flex;
        padding: 15px;
        max-width: 240px;
        font-size: .5rem;
    }

    /* Slides */
    .slide {
        -webkit-transition: all .75s ease-in-out;
        -moz-transition: all .75s ease-in-out;
        -o-transition: all .75s ease-in-out;
        -ms-transition: all .75s ease-in-out;
        transition: all .75s ease-in-out;
    }

    .slideLeft {
        margin-left: -85vw;
    }

    .slideLeft .coverImage {
        filter: brightness(100%);
    }

    .slideRight {
        margin-left: -20vw;
    }

    .slideRight .coverImage {
        filter: brightness(100%);
    }

    .slideLeftText {
        -ms-transform: rotate(270deg); /* IE 9 */
        -webkit-transform: rotate(270deg); /* Safari 3-8 */
        transform: rotate(270deg);
        right: 0;
        left: 45%;
        font-size: 1rem;
    }

    .slideRightText {
        -ms-transform: rotate(90deg); /* IE 9 */
        -webkit-transform: rotate(90deg); /* Safari 3-8 */
        transform: rotate(90deg);
        left: -45%;
        font-size: 1rem;
    }

    .landscapeFix {
        height: 100vh !important;
    }

    /* Privacy Policy Styles */
    .privacyWrapper {
        background: rgba(0, 0, 0, .2);
    }

    .privacyPolicy {
        margin-top: 5%;
        margin-bottom: 5%;
        padding: 25px;
        border-radius: 25px;
        background: rgba(0, 0, 0, .2);
    }
}

/* XXS */
@media only screen and (min-width: 320px) {
    /* Sections */
    .sectionLeft p, .sectionRight p {
        max-width: 265px;
        font-size: .55rem;
    }
}

/* XS */
@media only screen and (min-width: 400px) {
    /* Sections */
    .sectionLeft p, .sectionRight p {
        max-width: 340px;
        font-size: .65rem;
    }
}

/* SM */
@media only screen and (min-width: 576px) {
    /* Content */
    .coverImageText {
        font-size: 2rem;
    }

    /* Sections */
    .sectionLeft p, .sectionRight p {
        max-width: 465px;
        font-size: .9rem;
    }

    .sectionLeft p {
        padding: 15px 30px 15px 15px;
    }

    .sectionRight p {
        padding: 15px 15px 15px 30px;
    }
}

/* MD */
@media only screen and (min-width: 768px) {
    /* Header */
    .header {
        font-size: 1rem;
    }

    /* Footer */
    .footer {
        font-size: 1rem;
    }

    /* Sections */
    .sectionLeft p, .sectionRight p {
        max-width: 600px;
        font-size: 1.1rem;
    }
}

/* LG */
@media only screen and (min-width: 992px) {
    /* Content */
    .coverImageText {
        font-size: 3rem;
    }

    /* Sections */
    .sectionLeft p, .sectionRight p {
        max-width: 775px;
        font-size: 1.25rem;
    }
}

/* XL */
@media only screen and (min-width: 1200px) {
    /* Sections */
    .sectionLeft p, .sectionRight p {
        max-width: 815px;
    }

    /* Slides */
    .slideLeft {
        margin-left: -75vw;
    }

    .slideRight {
        margin-left: -30vw;
    }
}

/* XXL */
@media only screen and (min-width: 1600px) {
    /* Sections */
    .sectionLeft p, .sectionRight p {
        max-width: 1125px;
        font-size: 1.5rem;
    }
}

/* XXXL */
@media only screen and (min-width: 2000px) {
    /* Sections */
    .sectionLeft p, .sectionRight p {
        max-width: 1400px;
        font-size: 1.75rem;
    }
}

/* XXXXL */
@media only screen and (min-width: 3000px) {
    /* Sections */
    .sectionLeft p, .sectionRight p {
        max-width: 2100px;
        font-size: 2rem;
    }
}