.web{display:block;}
.mob{display:none;}
.webonlytxt{display:inline-block;}

[v-cloak] { display: none; }

/** MEMBER AREA **/

.memberlinks {    display: grid;    gap: 20px;    margin-bottom: 20px;    grid-template-columns: repeat(6, minmax(0, 1fr));    align-items: end;    margin-left: -25px;    width: calc(100% + 25px);    padding: 20px 25px 40px 25px;    box-sizing: border-box;    background: rgb(7,159,159);    background: linear-gradient(0deg, rgba(7,159,159,0) 0%, rgba(7,159,159,1) 75%, rgba(7,159,159,1) 100%);}
.memberpill, .memberpillactive { border: 3px white solid; text-align:center;  text-decoration:none; background-color:white;  width:100%; color:#202020;  height:40px;   display: flex;   flex-direction: row;   flex-wrap: nowrap; justify-content: center;  align-items: center; }
.memberpill:hover, .memberpillactive:hover { border: 3px #646464 solid; }
.memberpillactive { border: 3px #646464 solid; }
.pilltext{line-height:14px; font-weight:600; width:100%; box-sizing:border-box; padding:0px 5px; vertical-align:middle; text-align:center; height:40px; font-size:13px; display: flex; flex-direction: column; justify-content: center;}
.filterdots{width:100%; float:right; position:absolute; top:10px;}
.mtitleholder {  width: calc(100% - 25px);  float: left;}
.plusactive{color:forestgreen; font-size:16px;}
.plusnonactive{color:orangered; font-size:16px;}
.mattopimg{z-index:3;}
.matbottomimg1{z-index:2; top:-8px; width:92%; margin-left:4%; border:1px #cdcdcd solid; background-color:white; height:50px; position:absolute;}
.matbottomimg2{z-index:1; top:-16px; width:84%; margin-left:8%; border:1px #cdcdcd solid; background-color:white; height:50px; position:absolute;}
.view{overflow:visible;}
.bmselect {position: relative; display: inline-block; width: 300px;}
.bmselect select {    font-family: 'Inter',sans-serif; display: inline-block; width: 100%; cursor: pointer; padding: 8px 8px; outline: 0; border: 0px solid #000000;  background: #e9e9e9;    color: #2f2f2f;    appearance: none;    -webkit-appearance: none;    -moz-appearance: none;}
.bmselect select::-ms-expand {    display: none;}
.bmselect select:hover, .bmselect select:focus {    color: #000000;    background: #e9e9e9;}
.bmselect select:disabled {    opacity: 0.5;    pointer-events: none;}
.bmselect_arrow {    position: absolute;    top: 16px;    right: 15px;    pointer-events: none;    border-style: solid;    border-width: 8px 5px 0px 5px;    border-color: #7b7b7b transparent transparent transparent;}
.bmselect select:hover ~ .bmselect_arrow,.bmselect select:focus ~ .bmselect_arrow {    border-top-color: #000000;}
.bmselect select:disabled ~ .bmselect_arrow {    border-top-color: #cccccc;}
.notifytable{width:600px}
.pointholdertop { width: 18.5%; border:1px #cdcdcd solid; float:left; margin-bottom:10px; margin-right:2%; overflow:hidden;}
.pointstxtheader{width:100%; text-align:center; background-color:black; color:white; height:28px; line-height:26px; font-weight:600;}
.pointcol1{width:120px;}
.pointcol2{width:120px;}
.pointcol3{}
.pointcol4{width:60px;}
.pointcol5{width:60px;}
.pointcol6{width:60px;}
.orderdcol1{width:250px; float:left;}
.orderdcol2{width:calc(100% - 470px); float:left; margin-right:20px;}
.orderdcol3{width:100px; float:left;}
.orderdcol4{width:100px; float:left;}
.orderddet1{width:150px; float:left;}
.orderddet2{width:calc(100% - 360px); float:left;}
.orderddet3{width:70px; float:left;}
.orderddet4{width:70px; float:left;}
.orderddet5{width:70px; float:left;}


/* MEMBER PAGES */
.memberlinkformat {    display: block;    line-height: 25px;    width: 100%;    height: 25px;    border-top: 1px #dcdcdc solid;    overflow: hidden;}
.memberlinkformatbottom {    display: block;    line-height: 25px;    width: 100%;    height: 25px;    border-top: 1px #dcdcdc solid;    border-bottom: 1px #dcdcdc solid;    overflow: hidden;}
.memberissueholder {    width: 150px;}
.latestissuedetailheight {    height: 40px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.col1size {}
.col2size {    width: 170px;}
.col3size {    width: 200px;}
.col4size {    width: 150px;}
.col5size {    width: 80px;}

.subimgholder{width:90px; float:left;}
.subdetail{width:calc(100% - 110px); margin-left:10px; float:left; font-size:13px;}
.nosubmessage{padding:40px 10px; font-weight:600; font-size:16px; text-align:center;}

.plusfcover{width:100%; background-color:#252d3c; padding:30px 15px; box-sizing:border-box;}

.subcanceltxt{font-size:12px; font-weight:400;}
.tablerowholder {    width: 100%;    border-bottom: 1px #c8c8c8 solid;    padding-top: 5px;    padding-bottom: 5px;}
.firstcolumnholder {    width: 200px;    text-align: right;    font-weight: 600;}
.secondcolumnholder {    width: 250px;    text-align: right;}
.addressholder {    width: 98%;    padding: 1%;    background-color: #F4F4F4;    margin-bottom: 20px;    position: relative;    border-radius: 5px 5px 5px 5px;    -moz-border-radius: 5px 5px 5px 5px;    -webkit-border-radius: 5px 5px 5px 5px;    border: 1px solid #c0c0c0;}
.tablesizer {    border-top: 1px #c8c8c8 solid;    border-bottom: 1px #c8c8c8 solid;    height: 30px;    width: 100%;    font-size: 15px;}
.pointholder {    border-bottom: 1px #c8c8c8 solid;    width: 100%;    height: 30px;    font-size: 13px;}
.giftholder {    width: 96%;    padding: 2%;    background-color: #F4F4F4;    margin-bottom: 20px;    position: relative;    border-radius: 5px 5px 5px 5px;    -moz-border-radius: 5px 5px 5px 5px;    -webkit-border-radius: 5px 5px 5px 5px;    border: 1px solid #c0c0c0;}
.giftholder1 {    width: 440px;    float: right;}
.giftholder2 {    width: 600px;    float: left;    border-right: 1px #dbdbdb solid;    padding-right: 30px;}
.giftholder3 {    float: right;    width: 430px;}
.giftcoverholder {    width: 100px;    float: left;}
.activateboxholder {    margin-top: 10px;    width: 400px;}
.activatetextboxholder {    width: 200px;    margin-right: 10px;    float: left;}
.giftcover {    width: 100%;}
.table1sizer {    border-top: 1px #c8c8c8 solid;    border-bottom: 1px #c8c8c8 solid;    height: 30px;    width: 100%;}
.table2sizer {    border-bottom: 1px #c8c8c8 solid;    height: 50px;    width: 100%; }
.wishdelete {    font-size: 20px;    cursor: pointer;}
.reviewdelete {    font-size: 20px;    cursor: pointer;    float: right;}
.reviewdeletebutton {    float: right;    width: 15px;}
.reviewtitletext {    font-size: 18px;}
.orderholder1 {    width: 100%;    font-size: 14px;    border-bottom: 1px #c8c8c8 solid;    padding-top: 10px;    padding-bottom: 10px;}
.ValidationBox {    padding: 10px;    margin: 10px 0;    clear: both;    color: Red;    font-size: 1.1em;    background-color: #dbdbdb;}
.cycholder, .renewprimaryholder {    border: solid #fd510f 2px;   padding: 15px;  margin-top:10px; margin-bottom:10px;}
.cycsep{border-bottom: 1px #dbdbdb solid;  padding-top: 5px; padding-bottom: 5px;}
.cycsep:nth-last-child(1){border-bottom: 0px #dbdbdb solid;}
.cyccol1{width:calc(100% - 400px); float:left;}
.cyccol2{width:130px; text-align:right; float:right; padding-left:15px;}
.cyccol3{width:70px; text-align:right; float:right; padding-top:7px;}
.cyccol4{width:40px; text-align:right; float:right; padding-top:3px;}
.cyccol5{width:130px; text-align:right; float:right;}
.cycheader{font-size:17px; margin-bottom:3px; font-weight:700;}

.renewholder {width: 100%; break-inside: avoid; overflow: auto;}
.renewcoverholder{width:120px; float:left;}
.renewcontent{width:calc(100% - 140px); margin-left:15px; float:left;}
.renewcontentleft{float:left;}
.renewcontentright{float:right; text-align:right;}


.cancel-control {    width: 100%;    padding: 5px;    box-sizing: border-box;    -webkit-border-radius: 4px;    -moz-border-radius: 4px;    border-radius: 4px;    border:1px gray solid;    margin-top:8px;}
.plusactive{color:forestgreen;}
.plusnonactive{color:orangered;}

.cancelheadertxt{font-size:18px; font-weight:700; line-height:22px; margin-bottom:20px;}
.dialogExpiryDate{font-size:18px; font-weight:700; line-height:22px;}
.jmagtxt{font-size:16px; font-weight:700; line-height:22px; margin-bottom:10px;}
.cancelinfotxt {    width: 100%;    padding: 15px;    box-sizing: border-box;    -webkit-border-radius: 4px;    -moz-border-radius: 4px;    border-radius: 4px;    border: none;    background-color: #fae1d5;    margin-top: 15px;    margin-bottom: 15px;    text-align: center;}
.canceljmagoption {    width: 100%;    padding: 15px;    box-sizing: border-box;    -webkit-border-radius: 4px;    -moz-border-radius: 4px;    border-radius: 4px;    border: 2px red solid;    background-color:white;    margin-top: 15px;    margin-bottom:15px;    text-align:center;}

.dialogCancelReason, .dialogCancelReasonPlus{margin-bottom:8px;}
.ui-widget input {    font-family: 'Open Sans',sans-serif;}
.cancelbutton, .actionbutton {    background-color: white;    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    border-radius: 5px;    -webkit-appearance: none;    border: 1px black solid;    text-indent: 0;    display: inline-block;    color: black !important;    font-family: 'Open Sans',sans-serif;    font-size: 13px;    font-weight: 600;    height: 35px;    line-height: 35px;    width: 100%;    text-decoration: none; text-transform:uppercase;    text-align: center;    cursor: pointer;}
.actionbutton{background-color:#cdcdcd; border:1px #cdcdcd solid;}
.cancelbutton a:active, .actionbutton a:visited, .actionbutton a:hover {    color: white;}
.cancelbutton:active {    position: relative;    top: 1px;}
.cancelbutton:hover {    background-color: #656565; color:white !important; border:none;}


.gotoplusbtn{width:100px; float:right; margin-top:5px;}

.zoneqty{font-size:14px;}
.zoneholder {    border-radius: 5px;    -moz-border-radius: 5px;    -webkit-border-radius: 5px;    border: 1px #cdcdcd solid;    padding: 15px;    margin-bottom: 10px; box-sizing:border-box;}
.nozones{text-align:center;}
.zonesdetail{}
.zonepostcode{width:150px; padding-top:5px; padding-bottom:5px;}
.zoneipaddress{width:120px;}
.zonelocation{width:80px;}
.zoneoptions{width:60px; text-align:right;}
.zoneheader{width: 100%; font-weight:bold; border-bottom:2px #cdcdcd solid;}
.addzonecol2{width:300px}
.zoneaddbtn{float:right;}
/*.popup .close {  position: absolute;  top: 10px;  right: 20px;  transition: all 200ms;  font-size: 30px;  font-weight: bold;  text-decoration: none;  color: #333;}
.popup .close:hover {  color: #fd510f;}
*/
.artwifi{width:58%; float:left; }
.artpreview{width:40%; float:right;  border: 1px #cdcdcd solid; }
.artworkholder{width:100%;}
.artlogoholder{background-color:#202d3c; position:relative; text-align:center; padding:15px; box-sizing:border-box; overflow:hidden;}
.artlogoimg{width:50%;}
.artworkheader{}
.artworktxtheader{font-size:7.5vw; font-family: 'Open Sans',sans-serif; font-weight:600; color:#fd510f; text-align:center; line-height:9vw; padding-top:8%; padding-bottom:5%;}
.artworktxtsubheader{font-size:7.5vw; font-family: 'Open Sans',sans-serif; font-weight:600; color:#fd510f; text-align:center; line-height:9vw; padding-top:8%; padding-bottom:5%;}
.artworktxtbody{font-size:3.5vw; font-family: 'Open Sans',sans-serif; font-weight:800; color:#fd510f; text-align:left; line-height:4vw; padding-top:0%; padding-bottom:2%; padding-left:10%; padding-right:10%;}
.artworkhowtoholder{ position:relative; text-align:left; font-weight:700; padding-bottom:15px; padding-left:5%; padding-right:5%; box-sizing:border-box; color:#202d3c; font-size:2.7vw; font-family: 'Open Sans',sans-serif; line-height:4vw; padding-left:10%; padding-right:10%;}
.artworkfooterholder{position:relative; z-index:2;}
.artbtleft{width:20%; text-align:center;}
.artbtright{width:20%; text-align:center;}
.artorange{color:#fd510f;}
.artworkfootertxt{position:absolute; top:35%; left:35%; width:40%; font-size:2vw; font-family: 'Open Sans',sans-serif; font-weight:600; color:white; line-height:3vw;}

.artworktxtheader_preview{font-size:1.8vw; font-family: 'Open Sans',sans-serif; font-weight:600; color:#fd510f; text-align:center; line-height:2.5vw; padding-bottom:2%;}
.artworktxtbody_preview{font-size:0.95vw; font-family: 'Open Sans',sans-serif; font-weight:800; color:#fd510f; text-align:left; line-height:1.4vw; padding-top:0%; padding-bottom:2%; padding-left:10%; padding-right:10%;}
.artworkhowtoholder_preview{position:relative; text-align:left; padding-top:5px; padding-bottom:5px; font-weight:600; padding-left:5%; padding-right:5%; box-sizing:border-box; color:#202d3c; font-size:0.7vw; font-family: 'Open Sans',sans-serif; line-height:1.5vw; padding-left:10%; padding-right:10%;}
.artworkfooterholder_preview{position:relative; z-index:2; }
.artworkfootertxt_preview{position:absolute; top:35%; left:35%; width:40%; font-size:0.5vw; font-family: 'Open Sans',sans-serif; font-weight:600; color:white; line-height:0.8vw;}
.mbcardholder{width:300px;}
.mbcardaddressholder{width:350px;}
.mbaboveboxtxt{text-transform:uppercase; font-size:11px; font-weight:600; margin-bottom:5px;}
.stripeaddw100{width:90%;}
.mbbelowboxtxt{margin-top:0px; font-size:11px;}
#divCYCPopup {    padding: 20px !important;}

.tabbuttonplus{    -webkit-border-radius: 25px !important;    -moz-border-radius: 25px !important;    border-radius: 25px !important;    font-size: 18px !important;    font-weight: 700;    height: 35px !important;    line-height: 33px !important;    width: 100%;  background-color:#4b4b4b !important; border:2px #4b4b4b solid !important;  font-size:14px !important; color:white !important;   }
.tabbuttonplus:hover {        background-color: #4b4b4b !important; color:white !important;    }
.tabbuttonplusinv{    -webkit-border-radius: 25px !important;    -moz-border-radius: 25px !important;    border-radius: 25px !important;    font-size: 18px !important;    font-weight: 700;    height: 35px !important;    line-height: 33px !important;    width: 100%;  background-color:transparent !important; border:2px #4b4b4b solid !important;  font-size:14px !important; color:#4b4b4b !important;   }
.tabbuttonplusinv:hover {        background-color: #4b4b4b !important; color:white !important;    }

.sorttabbuttonplus{    -webkit-border-radius: 25px !important;    -moz-border-radius: 25px !important;    border-radius: 25px !important;    font-size: 18px !important;    font-weight: 700;    height: 20px !important;    line-height: 18px !important;    width: 100%;  background-color:#4b4b4b !important; border:2px #4b4b4b solid !important;  font-size:11px !important; color:white !important; }
.sorttabbuttonplus:hover {        background-color: #4b4b4b !important; color:white !important;    }
.sorttabbuttonplusinv{    -webkit-border-radius: 25px !important;    -moz-border-radius: 25px !important;    border-radius: 25px !important;    font-size: 18px !important;    font-weight: 700;    height: 20px !important;    line-height: 18px !important;    width: 100%;  background-color:transparent !important; border:2px #4b4b4b solid !important;  font-size:11px !important; color:#4b4b4b !important;  }
.sorttabbuttonplusinv:hover {        background-color: #4b4b4b !important; color:white !important;    }

.plusfilters{width:100%; float:right; position:absolute;}
.dropbtn3{width:120px; text-align:right;}
.mtitlesdd{right:0px; z-index:999;}
.mddlink{line-height:25px; display:block !important; width:110px;}
.maddoptions{width:130px; text-align:left;}
.dropdown{float:right;}
.view{overflow:visible;}

.popcover{width:100%; text-align:center;}
.poptxt1{width:100%; text-align:center; font-size:16px; font-weight:600; margin-bottom:5px;}
.poptxt2{width:100%; text-align:center; margin-bottom:10px;}
.popbtn{margin-bottom:10px; width:100%; text-align:center;}
.membercoverpopup{width:250px !important; margin-top:15% !important;}

.buybuttonplus {    -webkit-border-radius: 30px !important;    -moz-border-radius: 30px !important;    border-radius: 30px !important;    height: 60px !important;    line-height: 58px !important;    text-transform: none !important;}
.buybuttonplusinv{-webkit-border-radius: 30px !important;    -moz-border-radius: 30px !important;    border-radius: 30px !important;    height: 60px !important;    line-height: 58px !important;    text-transform: none !important; border:3px white solid; background-color:transparent; color:white !important; font-size: 18px !important; font-weight: 700;}
.buybuttonplusinv:hover {    background-color: white !important; color: #202d3c !important;}
.fa-ellipsis-v{color:#0991a8;}

.lbg {    background-color: #f5f5f5;}
.mb20{margin-bottom:20px;}

.mbcardcol1{width:40px;}
.mbcardcol2{}
.mbcardcol3{width:150px;}
.mbcardcol4{width:100px; text-align:right;}
.mbcardcol5{width:150px; text-align:right;}
.mbcardbtn{width:120px; height:30px; line-height:30px;}

.pointcolhead1{font-weight:600; width:120px;}
.pointcolhead2{font-weight:600; width:120px;}
.pointcolhead3{font-weight:600; text-align:left;}
.pointcolhead4{font-weight:600; width:60px;}
.pointcolhead5{font-weight:600; width:60px; text-align:right;}
.pointcolhead6{font-weight:600; width:60px; text-align:right;}
.pointcol1{width:120px;}
.pointcol2{width:120px; color:red; font-weight:600;}
.pointcol3{text-align:left;}
.pointcol4{width:60px;}
.pointcol5{width:60px; text-align:right;}
.pointcol6{width:60px; text-align:right;}
.pointvalsum{font-size:16px;}
.pointholdertop { width: 18.5%; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border:1px #cdcdcd solid; float:left; margin-bottom:10px; margin-right:1%; overflow:hidden;}
.pointboxpoints{font-size:26px; font-weight:900; width:100%; text-align:center; line-height:22px;}
.pointstxt{width:100%; text-align:center;}
.pointstxtheader{width:100%; text-align:center; background-color:black; color:white; height:28px; line-height:26px; font-weight:600;}
.pointholderpad{padding:10px;}
.pointboxval{margin-top:10px; font-size:18px; font-weight:600; width:100%; text-align:center;}
.pointmulti{font-size:12px; color:gray;}
.bmimgnotactive{opacity:.3;}
.bookmarkfilter {    text-align: right;    margin-top: -20px;}
.lowerbmdesc {    font-size: 12px; }

.bmselect {    position: relative;    display: inline-block;    margin-bottom: 15px;    width: 300px;}
.bmselect select {    font-family: 'Open Sans',sans-serif; display: inline-block;    width: 100%;    cursor: pointer;    padding: 8px 8px;    outline: 0;    border: 0px solid #000000;    border-radius: 5px;    background: #e9e9e9;    color: #2f2f2f;    appearance: none;    -webkit-appearance: none;    -moz-appearance: none;}
.bmselect select::-ms-expand {    display: none;}
.bmselect select:hover, .bmselect select:focus {    color: #000000;    background: #e9e9e9;}
.bmselect select:disabled {    opacity: 0.5;    pointer-events: none;}
.bmselect_arrow {    position: absolute;    top: 16px;    right: 15px;    pointer-events: none;    border-style: solid;    border-width: 8px 5px 0px 5px;    border-color: #7b7b7b transparent transparent transparent;}
.bmselect select:hover ~ .bmselect_arrow,.bmselect select:focus ~ .bmselect_arrow {    border-top-color: #000000;}
.bmselect select:disabled ~ .bmselect_arrow {    border-top-color: #cccccc;}

.ppcbookmarkholder {    width: 15%;  margin-right:2%;  float: left;   margin-bottom: 15px; box-sizing:border-box;   cursor: pointer;    margin-top: 3px;     position: relative;    cursor: default;}
.ppcbookmarkholder:nth-child(6n) {    margin-right:0%;}


.orderdetailcol1{width:160px; float:left;}
.orderdetailcol2{width:calc(100% - 460px); float:left; margin-right:20px;}
.orderdetailcol3{width:60px; float:left;}
.orderdetailcol4{width:60px; float:left;}
.orderdetailcol5{width:80px; float:left;}
.orderdetailcol6{width:80px; float:left;}

.mpaccountholder{width:calc(100% - 530px); float:left;}
.mpcoversholder{width:480px; float:right;}
.mpclosearrow{float:right; width:35px;}
.mpcovers{width:460px;}
.mpcoversize{width:80px; margin-left:10px; height:110px;}
.mpupbtn{width:20px; height:20px; background-size:400%; background-position:45px -260px; display:inline-block; transform: rotate(90deg);}
.mpdownbtn{width:20px; height:20px; background-size:400%; background-position:15px -260px; display:inline-block; transform: rotate(90deg);}
#OpenArrow a, #CloseArrow a {height:40px; display:block; cursor:pointer;}
.mpgotoplus{margin-top:30px;}
.mpnofavs{margin-left: calc(50% - 300px); width: 600px;}

.desktoppushimg{width:120px; height:max-content;}
.desktoppushtxt{width:100%; padding-left:20px; box-sizing:border-box; font-size:13px;}
.desktoppushh1{font-size:17px; font-weight:700; line-height:21px;}
.webpopup .buttons{  text-align:right; } 
.webpopup a{ width:130px; } 
.desktoppushbtn1{color:#079F9F; background-color:white;}



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

/** MEMBER AREA **/

.memberlinks { margin-left: -20px; width: calc(100% + 40px); margin-top: -15px; grid-template-columns: repeat(3, minmax(0, 1fr));}
.plusmenubtn{margin-bottom:10px;}
.memberpill, .memberpillactive {font-weight:500; font-size:11px;}
.memberissuefilter{width:100%; margin-top:0px;}
.mobcatpill{margin-top:15px;}
.bookmarkfilter{margin-top:0px;}
.pager {word-wrap: anywhere; line-height:30px;}
.pager > a {padding: 4px;}
.notifytable{width:100%}
.pointholdertop { width: 40%; margin-right:5%;}
.pointcol1{width:80px;}
.pointcol2{width:80px; display:none;}
.pointcol4{width:40px;}
.pointcol5{width:40px;}
.pointcol6{width:40px;}
.orderdcol1{width:150px; float:left; min-height:30px;}
.orderdcol2{width:calc(100% - 150px); float:left; margin-right:0px;}
.orderdcol3{width:100px; float:left; margin-top:20px;}
.orderdcol4{width:calc(100% - 250px); float:left; margin-top:20px;}
.orderddet1{display:none;}
.orderddet2{width:calc(100% - 180px); float:left;}
.orderddet3{width:60px; float:left;}
.orderddet4{width:60px; float:left;}
.orderddet5{width:60px; float:left;}
.sortplusmenubtntxt{font-size:12px; width:100%; margin-bottom:4px;}
.readpmapp{font-size:20px; line-height:30px;}
.readcover{z-index:1; width: 160px; max-height:240px; margin-left:auto;}


    .web{display:none;}
.mob{display:block;}
.webonlytxt{display:none;}

.latestissuedetailheight {    height: 35px;}
.col1size {}
.col2size {    width: 70px;}
.col3size {    width: 70px;}
.col4size {    width: 80px;}
.tablerowholder {     font-size: 11px;}
.tablesizer {    font-size: 12px;}
.pointholder {   font-size: 11px;}
.cyccol1{width:100%;  margin-bottom:5px;}
.cyccol2{width:110px; padding-left:15px;}
.cyccol3{width:60px; padding-top:2px;}
.cyccol4{width:30px; padding-top:5px;}
.cyccol5{width:60px; }
.cycheader{font-size:14px;}
.giftholder1 {    width: 100%;    float: right; margin-bottom:30px;}
.giftholder2 {    width: calc(100%);    float: left;    border-right: 1px #dbdbdb solid;    padding-right: 40px; margin-top:30px;}
.giftholder3 {    float: right;    width: calc(100% - 120px);}
.artwifi{width:100%; margin-bottom:30px; }
.artpreview{width:100%;  }
.artworktxtheader_preview{font-size:1.8vw;  line-height:2.5vw;}
.artworktxtbody_preview{font-size:2.95vw; line-height:3.8vw; }
.artworkhowtoholder_preview{font-size:1.7vw; line-height:2.5vw;}
.artworkfooterholder_preview{position:relative; z-index:2; }
.artworkfootertxt_preview{font-size:1.5vw; line-height:1.8vw;}
.membercoverpopup{width:250px !important; margin-top:20px !important;}

.mbcardaddressholder, .mbcardholder{width:100%;}

.mbcardcol1{width:30px;}
.mbcardcol2{}
.mbcardcol3{width:90px;}
.mbcardcol4{width:60px; text-align:right;}
.mbcardcol5{width:90px; text-align:right;}
.mbcardbtn{width:120px; height:30px; line-height:30px;}

.tabbuttonplus, .tabbuttonplusinv{font-size: 14px !important;    font-weight: 700;    height: 30px !important;    line-height: 28px !important;}

.pointcolhead1{font-weight:600; width:80px;}
.pointcolhead2{font-weight:600; width:80px; display:none;}
.pointcolhead3{font-weight:600; text-align:left;}
.pointcolhead4{font-weight:600; width:40px;}
.pointcolhead5{font-weight:600; width:40px; text-align:right;}
.pointcolhead6{font-weight:600; width:40px; text-align:right;}
.pointcol1{width:80px;}
.pointcol2{width:80px; display:none;}
.pointcol3{text-align:left;}
.pointcol4{width:40px;}
.pointcol5{width:40px; text-align:right;}
.pointcol6{width:40px; text-align:right;}
.pointholdertop { width: 47%;  margin-right:2%; overflow:hidden;}

.bookmarkfilter {    text-align: left;    margin-top: 0px;}

.ppcbookmarkholder {    width: 30%;  margin-right:3.33%;  float: left;   margin-bottom: 15px; box-sizing:border-box;   cursor: pointer;    margin-top: 3px;     position: relative;    cursor: default;}
.ppcbookmarkholder:nth-child(3n) {    margin-right:0%;}

.orderdetailcol1{width:140px; float:left;}
.orderdetailcol2{width:calc(100% - 200px); float:left; margin-right:10px;}
.orderdetailcol3{width:60px; float:left;}
.orderdetailcol4{width:50px; float:left;}
.orderdetailcol5{width:70px; float:left;}
.orderdetailcol6{width:70px; float:left;}

.mpaccountholder{width:calc(100% - 180px);}
.mpcoversholder{width:140px; margin-top:15px;}
.mpcovers{width:140px;}
.mpcoversize{width:60px; margin-left:10px; height:90px;}
.mpcoverhidemob:nth-child(3n){display:none;}
.mpcoverhidemob:nth-child(4n){display:none;}
.mpgotoplus{margin-top:10px;}
.mpclosearrow{margin-top:15px;}
.mpnofavs{margin-left: calc(50% - 150px); width: 300px;}

.webpopup a{ width:auto; } 


}
@media screen and (min-width:550px) and (max-width:749px) {

/** MEMBER AREA **/

.memberlinks { margin-left: -20px; width: calc(100% + 40px); margin-top: -15px; grid-template-columns: repeat(3, minmax(0, 1fr));}
.plusmenubtn{margin-bottom:10px;}
.memberpill, .memberpillactive {font-weight:500; font-size:11px;}
.memberissuefilter{width:100%; margin-top:0px;}
.mobcatpill{margin-top:15px;}
.bookmarkfilter{margin-top:0px;}
.pager {word-wrap: anywhere; line-height:30px;}
.pager > a {padding: 4px;}
.notifytable{width:100%}
.pointholdertop { width: 40%; margin-right:5%;}
.pointcol1{width:80px;}
.pointcol2{width:80px; display:none;}
.pointcol4{width:40px;}
.pointcol5{width:40px;}
.pointcol6{width:40px;}
.orderdcol1{width:150px; float:left; min-height:30px;}
.orderdcol2{width:calc(100% - 150px); float:left; margin-right:0px;}
.orderdcol3{width:100px; float:left; margin-top:20px;}
.orderdcol4{width:calc(100% - 250px); float:left; margin-top:20px;}
.orderddet1{display:none;}
.orderddet2{width:calc(100% - 180px); float:left;}
.orderddet3{width:60px; float:left;}
.orderddet4{width:60px; float:left;}
.orderddet5{width:60px; float:left;}
.sortplusmenubtntxt{font-size:12px; width:100%; margin-bottom:4px;}
.readpmapp{font-size:20px; line-height:30px;}
.readcover{z-index:1; width: 160px; max-height:240px; margin-left:auto;}

.web{display:none;}
.mob{display:block;}

.giftholder1 {    width: 100%;    float: right;}
.giftholder2 {    width: calc(100%);    float: left;    border-right: 1px #dbdbdb solid;    padding-right: 40px;}
.giftholder3 {    float: right;    width: calc(100% - 120px);}
.artwifi{width:100%; margin-bottom:30px; }
.artpreview{width:100%;  }
.artworktxtheader_preview{font-size:1.8vw;  line-height:2.5vw;}
.artworktxtbody_preview{font-size:2.95vw; line-height:3.8vw; }
.artworkhowtoholder_preview{font-size:1.7vw; line-height:2.5vw;}
.artworkfooterholder_preview{position:relative; z-index:2; }
.artworkfootertxt_preview{font-size:1.5vw; line-height:1.8vw;}
.tabbuttonplus, .tabbuttonplusinv{font-size: 13px !important;}
.memberissuefilter{width:100%; float:left; margin-top:15px;}

.bookmarkfilter {    text-align: left;    margin-top: 0px;}

.orderdetailcol1{width:140px; float:left;}
.orderdetailcol2{width:calc(100% - 240px); float:left; margin-right:20px;}
.orderdetailcol3{width:60px; float:left;}
.orderdetailcol4{width:60px; float:left;}
.orderdetailcol5{width:80px; float:left;}
.orderdetailcol6{width:80px; float:left;}

.mpaccountholder{width:calc(100% - 180px);}
.mpcoversholder{width:140px; margin-top:15px;}
.mpcovers{width:140px;}
.mpcoversize{width:60px; margin-left:10px; height:90px;}
.mpcoverhidemob:nth-child(3n){display:none;}
.mpcoverhidemob:nth-child(4n){display:none;}
.mpgotoplus{margin-top:10px;}
.mpclosearrow{margin-top:15px;}
.mpnofavs{margin-left: calc(50% - 150px); width: 300px;}

}

@media screen and (min-width:750px) and (max-width:1089px) {

/** MEMBER AREA **/

.memberlinks { margin-left:-20px; width:calc(100% + 40px);}
.memberpill, .memberpillactive {font-weight:500; font-size:11px; }
.memberissuefilter{width:100%; margin-top:10px;}
.bookmarkfilter{margin-top:0px;}
.notifytable{width:100%}


/* MEMBER PAGES */
.latestissuedetailheight {    height: 35px;}
.col1size {}
.col2size {    width: 130px;}
.col3size {    width: 140px;}
.col4size {    width: 90px;}
.tablerowholder {  font-size: 12px;}
.giftholder1 {    width: 100%;    float: right;}
.giftholder2 {    width: calc(100%);    float: left;    border-right: 1px #dbdbdb solid;    padding-right: 40px;}
.giftholder3 {    float: right;    width: calc(100% - 120px);}
.tabbuttonplus, .tabbuttonplusinv{font-size: 13px !important;}
.cartamount {    display: none !important;}
.bmselect {      width: 250px;}
.bookmarkfilter {  text-align: left;  margin-top: 0px;}
}

@media screen and (min-width:1090px) and (max-width:1400px) {
.giftholder1 {    width: 300px;    float: right;}
.giftholder2 {    width: calc(100% - 380px);    float: left;    border-right: 1px #dbdbdb solid;    padding-right: 40px;}
.giftholder3 {    float: right;    width: calc(100% - 120px);}
.tabbuttonplus, .tabbuttonplusinv{font-size: 13px !important;}

}

@media screen and (max-width:361px) {
    .plusmenubtn {        width: 90px;    }
    .sortplusmenubtntxt {    width: 66px;  }
    .sortplusmenubtn {    width: 98px; }
}


@media screen and (min-width: 1090px) and (max-width:1470px) {

/** MEMBER AREA **/

.memberlinks { margin-left:-20px; width:calc(100% + 40px);}
.pilltext{font-weight:500; width:130px; padding:0px 5px; vertical-align:middle; text-align:center; height:40px; font-size:12px;}

}


/* _____________ NEW LIBRARY _____________*/

/*FILTERING*/
.library-filter {    margin-top: 20px;    display: flex;    flex-direction: row;    flex-wrap: wrap;    font-family: 'Inter', arial, sans-serif;    margin-bottom: 30px;}
.library-filter div:last-child {    margin-left: auto;}
.smartdrop, .smartsearch {    border: 1px solid #CFD3D6;    border-radius: 20px;    padding: 1px 1px 1px 10px;    display: inline-block;    background: transparent;    margin-right: 5px;    display: flex;    position: relative;}
.library-filter:last-child {    margin-right: 0;}
.library-filter select {    font-family: 'Inter', arial, sans-serif;}
.smartdrop label {    margin: 10px 3px 10px 0;    font-size: 13px;    font-weight: 400;    color: #787878;}
.smartsearch div {    margin: 9px 10px 9px 0;}
#dropShowing * {    background-color: #eee;    border-radius: 20px;    padding: 10px;}
.smartdrop select {    font-family: 'Inter';    display: inline-block;    width: 100%;    cursor: pointer;    padding: 13px 8px;    outline: 0;    border: none;    background: #ffffff;    color: #787878;    appearance: none;    -webkit-appearance: none;    -moz-appearance: none;    font-weight: 600;}
.smartdrop select::-ms-expand {    display: none;    font-weight: 600;}
.smartdrop select:hover, .smartdrop select:focus {    color: #787878;    background: #eee;    font-weight: 600;}
.smartdrop select:disabled {    opacity: 0.5;   pointer-events: none;}
.select_arrow {    position: absolute;    top: 12px;    right: 15px;    width: 1px;    height: 1px;    border: solid #079F9F;    border-width: 0 2px 2px 0;    display: inline-block;    padding: 3px;    transform: rotate(45deg);    -webkit-transform: rotate(45deg);}
.smartdrop select:hover ~ .select_arrow, .smartdrop select:focus ~ .select_arrow {    border-color: #079F9F;    font-weight: 600;}
.smartdrop select:disabled ~ .select_arrow {    border-top-color: #079F9F;    background-color: white;}
.smartdrop select, .smartsearch input {    border: 0;    font-family: 'Inter';    font-size: 14px;    font-weight: 600;    color: #787878;    padding: 9px 5px;    outline: none;    background: transparent;    padding-right: 40px;    border-radius: 5px 20px 20px 5px;}
.smartsearch input {    font-weight: 400;}
.smartsearch input[type=search] {    flex-grow: 1;}
.searchicosmall, .cancelicosmall, .mobileeditionicosmall {    height: 15px;    display: inline-block;    width: 15px;    background-position: -44px -239px;    background-size: 400%;    margin-top: 0;}
.searchSentence {    font-size: 14px;    margin: 10px 0 30px 0;    font-style: italic;}
.resetSearch {    font-weight: 600;    cursor: pointer;}
.resetSearch:hover {        text-decoration: underline;    }
.cancelicosmall {    background-position: -45px -269px;}

/*to be the reader*/
.mobileeditionicosmall {    background-position: -32px -269px;}
.onlyMobile {    display: none;}
.onlyNonMobile {    display: block;}
.smartsearch.onlyMobile {    display: none;}
.smartsearch.onlyNonMobile {    display: flex;}


/*RESULT GRID*/

.result-grid {    margin: 20px 0 10px 0;    display: grid;    grid-template-columns: repeat(auto-fill, minmax(0,1fr));    gap: 40px;}
.result-grid > div {        display: flex;        flex-direction: column;        justify-content: flex-end    }
.result-grid.grid-bookmark {        grid-template-columns: repeat(2,minmax(0,1fr));    }
.result-item {    text-align: left;    text-decoration: none;    color: inherit;    margin-bottom: 10px;}
.result-empty {    margin: 60px 50px;    text-align: center;}
.result-item img {    max-width: 100%;    height: auto;    border-radius: 5px;    overflow: hidden;    cursor: pointer;}
.result-options {    /* Add your styles for result-options here */    margin-top: 5px;    float: right;    font-weight: 700;    font-size: 15px;    position: relative;    cursor: pointer;}
.option-dropdown {    display: none;    position: absolute;    top: 100%;    right: 0;    padding: 0;    text-align: left;    z-index: 99;    list-style: none;    width: 160px;    font-size: 14px;    background: #fff;    top: 3px;    overflow: hidden;}
.option-dropdown li {        cursor: pointer;    }
.option-dropdown li a, .option-dropdown li span {    padding: 10px;    color: inherit;    text-decoration: none;    display: block;}
.option-dropdown li:hover {    background-color: #eee;}
.option-dropdown.open {    display: block;}
.result-title {    margin-top: 10px;    white-space: nowrap;    overflow: hidden;    position: relative;}
.result-title.bold {        font-weight: 600;    }
.result-title:after, .result-subtitle:after {    content: "";    pointer-events: none;    position: absolute;    width: 30px;    height: 100%;    top: 0;    right: 0;    background-image: linear-gradient(to left,rgba(255,255,255,1),rgba(255,255,255,0));}
.dark-theme .result-title:after, .dark-theme .result-subtitle:after {    background-image: linear-gradient(to left,rgba(20,20,20,1),rgba(0,0,0,0))}
.result-subtitle {    color: #646464;    margin-top: 5px;    white-space: nowrap;    overflow: hidden;    position: relative;    font-weight: 400;}
.result-subtitle.bold {        font-weight: 600; color:#333333;    }
.result-subtitle2 {    color: #aaa;    margin-top: 3px;    font-size: 11px;}
.result-showmore {    text-align: center;    margin: 30px 0 0px 0;    font-size: 12px;}
.result-year {    font-size: 16px;    font-weight: 700;}
.result-progress {    appearance: none;    display: block;    margin: 0 auto 2rem auto;    width: 12.5rem;    height: 0.25rem;    border: 0;}
progress.result-progress::-webkit-progress-bar {    background-color: #ddd;}
progress.result-progress::-webkit-progress-value {    background-color: #079F9F;}
.result-showmore .btnshow {    font-size: .875rem;    background: none;    border: 0;    padding: 0;    line-height: 1.4285714286;    font-weight: bold;    text-align: center;    display: inline-flex;    border-radius: 64px;    cursor: pointer;    outline: 0;    vertical-align: top;    border: 2px solid #333;    padding: 10px 50px;    text-decoration: none;}
.result-showmore .btnshow:hover {        background: #eee;    }
.back-lib {    float: none;    cursor: pointer;}


@media (min-width: 300px) {
    .result-grid {    grid-template-columns: repeat(2,minmax(0,1fr));}
    .result-year {    grid-column: 1 / 3;}
    .result-grid.grid-bookmark {    grid-template-columns: repeat(3,minmax(0,1fr));}
}

@media (min-width: 500px) {
    .result-grid {        grid-template-columns: repeat(3, minmax(0,1fr));    }
    .result-year {        grid-column: 1 / 4;    }
    .result-grid.grid-bookmark {        grid-template-columns: repeat(4,minmax(0,1fr));    }
}

@media (min-width: 800px) {
    .result-grid {        grid-template-columns: repeat(4, minmax(0,1fr));    }
    .result-year {        grid-column: 1 / 5;    }
    .result-grid.grid-bookmark {        grid-template-columns: repeat(5,minmax(0,1fr));    }
}

@media (min-width: 1000px) {
    .result-grid {        grid-template-columns: repeat(5, minmax(0,1fr));    }
    .result-year {        grid-column: 1 / 6;    }
    .result-grid.grid-bookmark {        grid-template-columns: repeat(6,minmax(0,1fr));    }
}

.magazine-container {    position: relative;    margin-bottom: 0; /* Add margin at the bottom to separate from the content */}
.result-item img.magazine {    box-shadow: -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);    -moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.3);    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);}
.result-item img.magazine:nth-child(2) { position: absolute; bottom: 0; left: 50%; z-index: -1; /* Ensure the second magazine is behind the first one */ transform: translateX(-50%) translateY(-2%) rotate(4deg); /* Adjust the rotation angle for the magazines */ box-shadow: none; filter: brightness(.9);    }
.subscriptionExpiryBanner {    background: #eee;    padding: 10px;    margin-bottom: 20px;    margin-top: 10px;}
.year-jumper {    margin-top: 20px;    margin-bottom: 20px;}
.year-jumper details {        padding: 0px;        margin-top: 10px;    }
.year-jumper summary {        cursor: pointer;    }
.year-title {    text-transform: uppercase;    font-size: 14px;    font-weight: 700;}
.decade-group {    margin-top: 10px;    font-size: 14px;}
.decade-group div {        margin-top: 5px;        display: flex;        flex-direction: row;        flex-wrap: wrap;        justify-content: flex-start;    }
.decade-group a {        margin: 3px;        padding: 3px 5px;        text-decoration: none;        color: inherit;        font-size: 12px;    }
.decade-group a:hover {    text-decoration: underline;}
.decade-group a:first-child {    margin-left: 3px;    padding: 3px 5px;}

.result-grid.grid-bookmark {    grid-template-columns: repeat(6,minmax(0,1fr));}
.result-empty {    margin-bottom: 200px;}


.magazine-container {    position: relative;    margin-bottom: 0; /* Add margin at the bottom to separate from the content */}

.result-item img.magazine {    box-shadow: -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);    -moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.3);    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);}
.result-item img.magazine:nth-child(2) {        position: absolute;        bottom: 0;        left: 50%;        z-index: -1; /* Ensure the second magazine is behind the first one */        transform: translateX(-50%) translateY(-2%) rotate(4deg); /* Adjust the rotation angle for the magazines */        box-shadow: none;        filter: brightness(.9);    }

.subscriptionExpiryBanner {    background: #eee;    padding: 10px;    margin-bottom: 20px;    margin-top: 10px;}
.year-jumper {    margin-top: 20px;    margin-bottom: 20px;}
.year-jumper details {        padding: 0px;        margin-top: 10px;    }
.year-jumper summary {        cursor: pointer;    }
.year-title {    text-transform: uppercase;    font-size: 14px;    font-weight: 700;}
.decade-group {    margin-top: 10px;    font-size: 14px;}
.decade-group div {        margin-top: 5px;        display: flex;        flex-direction: row;        flex-wrap: wrap;        justify-content: flex-start;    }
.decade-group a {        margin: 3px;        padding: 3px 5px;        text-decoration: none;        color: inherit;        font-size: 12px;    }
.decade-group a:hover {            text-decoration: underline;        }
.decade-group a:first-child {            margin-left: 3px;            padding: 3px 5px;        }

/*ribbon styling*/
.ribbon-container {    position: relative;}
.ribbon {    width: 75px; /* Adjusted width */    height: 75px; /* Adjusted height */    overflow: hidden;    position: absolute;}
.ribbon::before,    .ribbon::after {        position: absolute;        z-index: -1;        content: '';        display: block;        border: 2.5px solid #046a6a;    }
.ribbon span {    position: absolute;    display: block;    width: 112.5px; /* Adjusted width based on half of the original */    padding: 7.5px 0; /* Adjusted padding */    background-color: #079F9F;    box-shadow: 0 2.5px 5px rgba(0, 0, 0, .1); /* Adjusted box shadow */    color: #fff;    font: 700 9px/1 'Lato', sans-serif; /* Adjusted font size */    text-shadow: 0 0.5px 0.5px rgba(0, 0, 0, .2); /* Adjusted text shadow */    text-transform: uppercase;    text-align: center;}

/* top right*/
.ribbon-top-right {    top: -5px;    right: -5px;}
.ribbon-top-right::before, .ribbon-top-right::after {    border-top-color: transparent;    border-right-color: transparent;}
.ribbon-top-right::before {    top: 0;    left: 0;}
.ribbon-top-right::after {    bottom: 0;    right: 0;}
.ribbon-top-right span {    left: -12.5px;    top: 15px;    transform: rotate(45deg);}
.ribbon.ribbon-allaccess span {    background-color: #C01529;}
.ribbon.ribbon-allaccess::before, .ribbon.ribbon-allaccess::after {    border: 2.5px solid #91101f;}
.fadeBottom {    padding: 0 25px 25px 25px;    margin-left: -25px;    margin-right: -25px;    background: linear-gradient(0deg,rgba(238,238,238,.4) 0%,rgba(238,238,238,0) 200px,rgba(238,238,238,0) 100%);}

.more-buttons {    display: flex;    flex-direction: row;    flex-wrap: wrap;}
.more-buttons a {    width: 180px;    flex-grow: 0;    margin-right: 10px;    margin-bottom: 10px;    padding: 10px 0;    border-radius: 10px;    border: 1px solid #666;    font-size: .875rem;    line-height: 1.4285714286;    font-weight: bold;    text-align: center;    color: inherit;    text-decoration: none;    cursor: pointer;    vertical-align: top;}
.more-buttons a:last-child {    margin-right: 0;}
.more-buttons a:hover {    background: #eee;}


/*Dark*/
.dark-theme .smartdrop select:hover, .dark-theme .smartsearch input:hover {    background: transparent;}
.dark-theme .fadeBottom {    background: unset;}
.dark-theme .result-showmore .btnshow:hover {        background: #eee;  color:black;  }
.dark-theme .more-buttons a:hover {    background: #eee; color:black; }
.dark-theme .option-dropdown {background: #2f2f2f;}
.dark-theme .option-dropdown li:hover {    background-color: black;}
.dark-theme .result-subtitle { color: #ABABAB;}
.dark-theme .result-subtitle.bold { font-weight: 600; color:#D7D7D7; }



/*Mobile */
@media (max-width: 600px) {

    .smartdrop label {    display: none;}
    .result-grid {    gap: 30px;}
    .onlyMobile {    display: block;}
    .onlyNonMobile {    display: none;}
    .smartsearch.onlyMobile {    display: flex;}
    .smartsearch.onlyNonMobile {    display: none;}
    .smartdrop label {    font-size: 12px;    font-weight: 400;}
    .smartdrop select {    font-size: 12px;    font-weight: 400;}
    .smartsearch input {    font-size: 16px;    font-weight: 400;}
    .smartdrop select:hover,.smartdrop select:focus {    color: #787878;    background: #eee;    font-weight: 400;}
    .more-buttons a {    width: 140px;    margin-right: 10px;    margin-bottom: 10px;}
}