﻿/* OFFER DETAILS */
.offercontenttext{float:right; width:calc(100% - 340px);}
.buydetail{float:left; width:380px;}
.perissueprice{float:right; margin-right:30px; margin-top:10px;}
.offerheadertext{font-weight:700; font-size:18px;}
.videoholdersizer{float:right; width:550px; margin-left:20px; margin-bottom:20px;}
.reasonsizer{width:50%;}
.offeritemsize{width:300px; float:left;}
.coverholdersizer{width:300px; float:left;}
.ipadcoverholder3d {    background-image: url(https://mcgraphics.blob.core.windows.net/pmimages/ipad-flat.png);    background-repeat:no-repeat;    width: 300px;    height: 416px;    position: relative;    z-index: 1;}
#stage {  }
#stage img {    width: 270px;    height: 385px;    background: red;    border: 0px solid #000000;    top: 15px;    left: 15px;    bottom: 15px;    position: absolute;    z-index: 2;}
#stage img:nth-of-type(1) {  animation-name: fader;  animation-delay: 2s;  animation-duration: 1s;  z-index: 3;}
#stage img:nth-of-type(2) {  z-index: 4;}
#stage img:nth-of-type(n+3) {  display: none;}
@keyframes fader {  from { opacity: 1.0; }  to   { opacity: 0.0; }}
.buybuttonoffer {            float: right;            width: 120px;            margin-top: 5px;        }
.imageipad3d {
    width: 270px;
    height: 385px;
    background: red;
    border: 0px solid #000000;
    top: 15px;
    left: 15px;
    bottom: 15px;
    position: absolute;
    border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
}


    @media screen and (max-width:549px) {

/* OFFER DETAILS */
.offercontenttext{float:none; width:100%;}
.buydetail{float:left; width:calc(100% - 130px); margin-bottom:10px;}
.perissueprice{float:right; margin-right:0px; margin-top:10px;}
.offerheadertext{font-weight:700; font-size:18px;}
.videoholdersizer{ width:100%; margin-top:20px; margin-bottom:20px;}
.reasonsizer{width:100%;}
.offeritemsize{width:100px; float:left; margin-right:10px;}
        .coverholdersizer {
            width: 150px;
            float: left;
            margin-right: 20px;
        }

        .ipadcoverholder3d {
            background-image: url(https://mcgraphics.blob.core.windows.net/pmimages/ipad-flat.png);
            background-size: cover;
            width: 140px;
            height: 194px;
            position: relative;
            z-index: 10;
            background-size: cover
        }

        .imageipad3d {
            width: 120px;
            height: 174px;
            border-radius: 6px 6px 6px 6px;
            -moz-border-radius: 6px 6px 6px 6px;
            -webkit-border-radius: 6px 6px 6px 6px;
            border: 0px solid #000000;
            top: 10px;
            left: 10px;
            position: absolute;
            z-index: -1;
        }

        #stage img {
            width: 120px;
            height: 174px;
            top: 10px;
            left: 10px;
        }
.buybutton {    width: 120px;    margin-left: calc(50% - 60px);}
}

@media screen and (min-width:550px) and (max-width:749px) {

/* OFFER DETAILS */
.offercontenttext{float:none; width:100%;}
.buydetail{float:left; width:50%; margin-bottom:10px;}
.perissueprice{float:right; margin-right:10px; margin-top:12px;}
.offerheadertext{font-weight:700; font-size:18px;}
.videoholdersizer{ width:100%; margin-top:20px; margin-bottom:20px;}
.reasonsizer{width:100%;}
.offeritemsize{width:100px; float:left; margin-right:10px;}
.coverholdersizer{width:150px; float:left; margin-right:20px;}
    .ipadcoverholder3d {
        background-image: url(https://mcgraphics.blob.core.windows.net/pmimages/ipad-flat.png);
        background-size:cover;
        width: 140px;
        height: 194px;
        position: relative;
        z-index: 10;
        background-size: cover
    }
    .imageipad3d {
        width: 140px;
        height: 194px;
        border-radius: 6px 6px 6px 6px;
        -moz-border-radius: 6px 6px 6px 6px;
        -webkit-border-radius: 6px 6px 6px 6px;
        border: 0px solid #000000;
        top: 0px;
        left: 0px;
        position: absolute;
        z-index: -1;
    }
    #stage img {
        width: 120px;
        height: 174px;
        top: 10px;
        left: 10px;
    }
.buybutton {    width: 120px;    margin-left: calc(50% - 60px);}

}

@media screen and (min-width:750px) and (max-width:1089px) {

/* OFFER DETAILS */
.offercontenttext{float:right; width:calc(100% - 320px);}
.buydetail{float:left; width:calc(100% - 130px); margin-bottom:10px;}
.perissueprice{float:right; margin-right:10px; margin-top:12px;}
.offerheadertext{font-weight:700; font-size:18px;}
.videoholdersizer{float:right; width:350px; margin-left:20px; margin-bottom:20px;}
.reasonsizer{width:100%;}
.completecollcover{width:33.3%; height:100px; float:left;}
.offeritemsize{width:270px; float:left;}

}

@media screen and (min-width: 1090px) and (max-width:1400px) {

/* OFFER DETAILS */
.offercontenttext{float:right; width:calc(100% - 320px);}
.buydetail{float:left; width:380px;}
.perissueprice{float:right; margin-right:10px; margin-top:12px;}
.offerheadertext{font-weight:700; font-size:18px;}
.videoholdersizer{float:right; width:500px; margin-left:20px; margin-bottom:20px;}
.reasonsizer{width:50%;}
.completecollcover{width:33.3%; height:120px; float:left;}
.offeritemsize{width:300px; float:left;}

}
