/* Media Queries for responsive layout */
/* use them to define CSS for various screen widths here, or use them in the other stylesheets above (Layout, Content, etc.) */
/* We are taking a mobile-up approach here. You provide default CSS for the smallest screen size, then provide overriding */
/* styling at various breakpoints for larger devices. */

/* We use this media query to add styles to any device that supports media queries */
@media only screen { }

/* phone portrait */
@media all and (min-width: 320px) {
    #colorbox #prodImg img {max-width: 280px;}
}

/* phone landscape */
@media all and (min-width: 480px) {
    #colorbox #prodImg img {max-width: 440px;}
}

/* Used to alter styles for screens at least 768px wide. This is where the grid changes. */
@media only screen and (min-width: 768px) {
    #colorbox #prodImg img {max-width: 720px;}
}

@media all and (max-width: 1000px) {
    #product .zoomProdImg {max-height: auto; max-width: 100%; margin: 0;}
    #product .zoomedboxWrap {display: none !important; top: -999em !important;}
    #product .zoomProdImgWrap {border: none; height: auto; width: auto; display: block;}
}

@media all and (min-width: 1024px) {
    #colorbox #prodImg img {max-width: 980px;}
}

/* Used to alter styles for screens at least 1280px wide. */
@media only screen and (min-width: 1280px) {}

/* Used to alter styles for screens at least 1440px wide. */
@media only screen and (min-width: 1440px) {}

/* Apply styles to screens in landscape orientation */
@media only screen and (orientation: landscape) {}

/* Apply styles to screens in portrait orientation */
@media only screen and (orientation: portrait) {}

/* We also use Modernizr to add a .touch class to the body when applicable */
/* You can prepend this class to anything and it will style only for touch devices */
.touch .your-element {}