@import url('../../OneCol1/Css/OneCol1.css');

/* Product Details */


/* 
   Page Layout
   - This is last to assure it overrides other rules if necessary
*/

#ProductPrimary {
    position: relative;
    float: left;
    width: calc(100% - 430px);
    min-width: 50%;
}

#ProductSecondary {
    position: relative;
    float: right;
    width: 400px;
    max-width: 50%;
}

/* ############################################################################
   ## 
   ##  Layout for Different Screen Sizes
   ##
   ##  Be sure to co-ordinate these layouts with the responsive sizes used in all templates in the site, or you'll run into trouble.
   ##
   ######################################################################### */

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

    #ProductPrimary {
        float: none;
        width: 100%;
        margin-bottom: var(--site-box-margin-bottom);
    }

    #ProductSecondary {
        float: none;
        width: 100%;
        max-width: none;
    }

}