.blue {
    color:#39b5fb;
}

.red {
    color:#bd0707;
}

.white{
    color:#fff;
}
.gray{
    color:#797979;
}

.bg-blue{
    background:#1074b7;
}

/* ============================== 
RESPONSIVE
============================== */
.mobile{
    display:none;
}

#pdp .panel-spacer{
    opacity:0;
}

/* PANEL TEMPLATE */
#pdp {
    overflow:hidden;
}

#pdp .panel-template{
}

#pdp .panel-template .col-half,
#pdp .panel-template .col-third{
    /*padding:1.2%;*/
    position:relative;
}

#pdp .panel-template .position-absolute.col-half{
    height:100%;
    margin:0;
    padding: 0;
    position: absolute;
    top:0;
}

#pdp .panel-template .position-absolute.col-half.left{
    left:0;
}

#pdp .panel-template .position-absolute.col-half.right{
    right:0;
}

#pdp .panel-template .wrapper{
    display:table;
}

#pdp .panel-template .wrapper .vertical-center{
    display:table-cell;
    vertical-align:middle;
}


#pdp .panel-template .position-absolute.vertical-center{
    display:block;
    position: absolute;
    top:50%;
    transform:translateY(-50%);
    transform-origin:bottom left;
    vertical-align:baseline;
}

.mobile .mobile-only{
    display:block;
}

.desktop .mobile-only{
    display:none;
}

.mobile .desktop-only{
    display:none;
}

.desktop .desktop-only{
    cursor:pointer;
    display:block;
}

#pdp .panel-template .position-absolute.col-half{
    bottom:0;
    padding: 0;
    position: absolute;
    height:61%;
    top:auto;
}


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

#pdp #pdp-panel-hero {
    background:url('https://res.cloudinary.com/corsair-pwa/image/upload/akamai/pdp/hydro-x/bending-kit/images/xt_bending_hero_2x.jpg') center no-repeat;
    background-size:cover;
}

#pdp #pdp-panel-hero .hero-content-container {
    background:rgba(0,0,0,.5);
    position:relative;
}

#pdp #pdp-panel-hero .hero-content-container .wrapper {
    position:relative;
    z-index:1;
}


/* ============================== 
HARDLINE TUBING RUN
============================== */

#pdp.bending-toolkit #tube-run {
    background:#eee url('https://res.cloudinary.com/corsair-pwa/image/upload/akamai/pdp/hydro-x/bending-kit/images/xt_bending_tube_run_2x.jpg') center no-repeat;
    background-size:cover;
}


/* ============================== 
HACKSAW AND DEBURRING TOOL
============================== */

#pdp.bending-toolkit #hacksaw {
    background-color:#fff;
}


/* ============================== 
CUTTING JIG
============================== */

#pdp.bending-toolkit #jig {
    background:#eee url('https://res.cloudinary.com/corsair-pwa/image/upload/akamai/pdp/hydro-x/bending-kit/images/xt_bending_jig_2x.jpg') center no-repeat;
    background-size:cover;
}


/* ============================== 
SILICONE INSERT
============================== */

#pdp.bending-toolkit #insert {
    background-color:#fff;
}


/* ============================== 
MANDREL
============================== */

#pdp.bending-toolkit #mandrel {
    background-color:#eee;
}



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

    /* ============================== 
    RESPONSIVE
    ============================== */
    .mobile{
        display:block;
    }

    .desktop{
        display:none;
    }


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

    #pdp.bending-toolkit.satin-wht #pdp-panel-hero {
        background-image:url('https://res.cloudinary.com/corsair-pwa/image/upload/akamai/pdp/hydro-x/bending-kit/images/xt_bending_hero.jpg');
    }


    /* ============================== 
    HARDLINE TUBING RUN
    ============================== */

    #pdp.bending-toolkit #tube-run {
        background-image:url('https://res.cloudinary.com/corsair-pwa/image/upload/akamai/pdp/hydro-x/bending-kit/images/xt_bending_tube_run.jpg');
    }


    /* ============================== 
    CUTTING JIG
    ============================== */

    #pdp.bending-toolkit #jig {
        background-image:url('https://res.cloudinary.com/corsair-pwa/image/upload/akamai/pdp/hydro-x/bending-kit/images/xt_bending_jig.jpg');
    }

}



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


    #pdp .panel-template .wrapper .vertical-center{
        display:block;
    }


    #pdp .panel-template .col-half{
        margin-top:0;
    }


}
    


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


    #pdp .panel-template h1{
        font-size:1.9em !important;
    }
}