#pdp {
    color: white;
    text-shadow: 0px 1px 5px black;
}

#pdp h2 {
    font-family: bebas-neue-pro-semiexpanded, sans-serif;
    font-size: 3.75rem;
    line-height: normal;
}

#pdp .panel-template {
    padding: 5vw 0 5vw !important;
}



/* ==============================
HERO
============================== */

.panelone {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent, rgba(0, 0, 0, 0.2)), url('//cwsmgmt.corsair.com/pdp/voyager-backpack/P4.png') center no-repeat;
    background-size: cover;
    min-height: 100vh;
}

#pdp .panelone h2 {
    font-family: bebas-neue-pro-semiexpanded, sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 7rem;
    line-height: 6.75rem;
    letter-spacing: .0em;
    margin-bottom: 0;
}

.panelone p {
    font-family: "verveine";
    font-size: 4rem !important;
    font-weight: 300 !important;
    line-height: 5rem !important;
}

.panelcontent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 2;
}

.two-tile {
    display: flex;
}

.two-tile img {
    flex: 2;
    width: 30%;
}

.two-tile img.paneltwo-image {
    flex: 1;
    width: 50%;
}

.two-tile-reverse {
    flex-direction: row-reverse;
}



/* ==============================
TAKE YOUR VOYAGER ANYWHERE
============================== */

#pdp #take-voyager.panel-template {
    color: white;
    background: linear-gradient(135deg, rgba(24, 46, 40, 0), #000 33%, #000 66%, transparent);
}



/* ==============================
ROOM FOR MORE
============================== */

.panelcontent.panelthree {
    padding: 2vw 0;
}


.three-points {
    display: flex;
    flex-direction: column;
    max-width: 65%;
}

.three-points div {
    flex: 1;
    margin-bottom: 1.5rem;
}

#pdp section .three-points h2 {
    font-size: 2.25rem;
    letter-spacing: .05rem;
}

#pdp section .three-points p {
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: .05rem;
    line-height: 2.25rem;
}

.panelthreeH2 {
    margin-left: 12%;
}



/* ==============================
FEATURES
============================== */

#backpack-features {
    background: linear-gradient(135deg, rgba(24, 46, 40, 0), #000 33%, #000 66%, transparent);
}

#backpack-features h2 {
    text-align: center;
}

#backpack-features .wrapper {
    display: flex;
}

#pdp #backpack-features.panel-template .col-half {
    flex: 2;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

#pdp #backpack-features.panel-template .col-half h2 {
    font-size: 2.25rem;
    letter-spacing: .05rem;
    margin-bottom: 10px;
    text-align: left;
}

#pdp section#backpack-features ul {
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: .05rem;
    line-height: 2.25rem;
    list-style-position: inside;
    list-style-type: circle;
    margin-left: 45px;
}

#pdp section#backpack-features li {
    margin-bottom: 15px;
    text-indent: -25px;
}



@media (min-width: 1673px) {
    .panelthreeH2 {
        margin-left: 14%;
    }
}



@media only screen and (min-width: 1320px) {
    #backpack-features .wrapper {
        width: 88%;
    }
}



@media (max-width: 1024px) {



    /* ==============================
    TAKE YOUR VOYAGER ANYWHERE
    ============================== */

    #take-voyager p br {
        display: none;
    }




    /* ==============================
    ROOM FOR MORE
    ============================== */

    .panelthree {
        padding: 0 1rem;
    }

    .panelthreeH2 {
        margin-left: 0;
    }

    #pdp .panel-template {
        padding: 0 !important;
        padding-top: 10vw !important;
    }

    .panelcontent {
        margin-bottom: 10vw;
    }

    .three-points {
        max-width: 100%;
        width: 90%;
    }

    .two-tile img,
    .two-tile img.paneltwo-image {
        flex: 1;
        width: 100%;
    }

    .two-tile,
    .two-tile-reverse {
        flex-direction: column;
    }

    .two-tile {
        padding-top: 5rem !important;
        text-align: center;
    }



    /* ==============================
    FEATURES
    ============================== */

    #backpack-features .wrapper {
        margin: 0 auto;
        width: 94%;
    }
}



@media only screen and (max-width: 820px) {



    /* ==============================
    FEATURES
    ============================== */

    #pdp section#backpack-features li {
        margin-bottom: 20px;
    }
}



@media only screen and (max-width: 768px) {

    /* ==============================
    HERO
    ============================== */

    .panelone {
        background-position: 75% center;
    }

    #pdp .panelone h2 {
        font-size: 3.5rem;
        line-height: 4rem;
        letter-spacing: .025em;
        margin: 0 auto;
        padding-bottom: 1rem;
        width: 90%;
    }



    /* ==============================
    ROOM FOR MORE
    ============================== */

    #pdp section h2.panelthreeH2 {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }

    #pdp section .three-points h2,
    #pdp #backpack-features.panel-template .col-half h2 {
        font-size: 1.75rem;
        line-height: 2.5rem;
    }

    #pdp section .three-points p,
    #pdp section#backpack-features ul {
        font-size: 1.1rem;
        line-height: 1.75rem;
    }
}