*{
    box-sizing:border-box
}
h1,h2,h3,h4,h5,p,ul,ul li{
    margin:0;
    padding:0
}
img{
    width:100%
}
ul li{
    list-style:none
}
body{
    display:block;
    width:100%;
    margin:0;
    padding:0
}
.wrapper{
    display:block;
    width:100%;
    max-width:960px;
    margin:0 auto
}
p{
    font-family:"Lato",sans-serif;
    font-style:normal;
    font-weight:normal;
    font-size:20px;
    line-height:29px;
    margin-bottom:10px;
    color:#000000
}
.header{
    box-shadow:0 2px 4px rgba(0,0,0,0.2)
}
.header__wrapper{
    display:flex;
    justify-content:space-between;
    padding:12px
}
.header__logo-img{
    max-height:26px;
    width:auto;
}
.header__block{
    display:flex
}
.header__item{
    height:28px;
    width:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 6px
}
.header__item:hover{
    background:#8903ab;
    border-radius:3px;
    cursor:pointer
}
.header__item img{
    width:16px
}
.tags{
    padding-bottom:20px
}
.tags__list{
    display:flex;
    flex-wrap:wrap;
    list-style:none;
    margin:0;
    padding:0
}
.tags__item{
    padding:6px 26px 6px 6px;
    margin-right:10px;
    margin-bottom:6px;
    background:#eeeeee;
    position:relative;
    font-size:16px;
    font-family:"Lato",sans-serif;
    text-transform:lowercase
}
.tags__item:after{
    position:absolute;
    content:"";
    height:12px;
    width:12px;
    background-size:cover;
    right:6px;
    top:9px
}
.tags__item:hover{
    background:#dedddd;
    cursor:pointer
}
.menu{
    display:flex;
    flex-direction:row;
    align-items:center;
    background:#8903ab
}
.menu-ul{
    display:flex;
    flex-direction:row;
    align-items:center
}
.menu-ul li{
    padding:16px 18px;
    position:relative
}
.menu-ul li:after{
    content:" ";
    height:5px;
    width:5px;
    border-radius:50%;
    background:#fff;
    margin:auto;
    position:absolute;
    top:0;
    bottom:0;
    right:0
}
.menu-ul li:last-child{
    padding-right:55px
}
.menu-ul li:last-child:after{
    content:none
}
.menu-ul li a{
    font-family:"Roboto Condensed",sans-serif;
    font-style:normal;
    font-weight:bold;
    font-size:18px;
    line-height:21px;
    color:#fff;
    text-decoration:none
}
.menu-ul li a:hover{
    text-decoration:underline
}
.content{
    padding:30px 50px
}
.current-category{
    font-family:"Roboto Condensed",sans-serif;
    font-style:normal;
    font-weight:bold;
    font-size:25px;
    line-height:29px;
    margin-bottom:22px;
    color:#8903ab
}
.title{
    font-family:"Roboto Condensed",sans-serif;
    font-style:normal;
    font-weight:bold;
    font-size:40px;
    line-height:47px;
    color:#000000;
    text-align:center
}
.subtitle{
    font-family:"Roboto Condensed",sans-serif;
    font-style:normal;
    font-weight:normal;
    font-size:30px;
    line-height:35px;
    margin:11px 0;
    color:#000000;
    position:relative;
    padding-bottom:10px;
    text-align:center
}
.subtitle:after{
    position:absolute;
    content:"";
    height:4px;
    width:100px;
    background:#8903ab;
    bottom:0;
    left:calc(50% - 50px)
}
.post-date{
    font-family:"Lato",sans-serif;
    font-style:normal;
    font-weight:300;
    font-size:16px;
    line-height:31px;
    position:relative;
    display:inline-block;
    text-transform:uppercase;
    color:#000000;
    margin-top:30px
}
.categories{
    margin-top:15px
}
.categories ul{
    display:flex;
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap
}
.categories ul li{
    background:#C0C0C0;
    font-family:"Roboto Condensed",sans-serif;
    font-style:normal;
    font-weight:bold;
    font-size:20px;
    line-height:23px;
    letter-spacing:0.15em;
    padding:5px 14px;
    color:#FFFFFF;
    margin-right:13px;
    margin-bottom:5px
}
.categories ul li.current{
    background:#8903ab
}
.categories ul li:last-child{
    margin-right:0
}
.content .image{
    display:block;
    margin:40px auto;
    border:4px solid #8903ab
}
.content .image.horizontal{
    width:100%;
    max-width:540px
}
.content .image.vertical{
    width:100%;
    max-width:410px
}
.social{
    display:flex;
    flex-direction:row;
    align-items:center;
    padding:18px 0;
    border-top:1px solid #E3E3E3;
    border-bottom:1px solid #E3E3E3;
    margin-bottom:30px
}
.social span{
    font-family:"Lato",sans-serif;
    font-style:normal;
    font-weight:600;
    font-size:20px;
    line-height:24px;
    margin-right:40px;
    color:#000000
}
.social img{
    width:41px;
    height:41px;
    margin-right:40px
}
h1{
    font-family:"Lato",sans-serif;
    font-style:normal;
    font-weight:bold;
    font-size:38px;
    line-height:46px;
    margin:35px 0;
    color:#000000;
    position:relative;
    padding-bottom:20px
}
h1:after{
    position:absolute;
    content:"";
    height:4px;
    width:160px;
    background:#8903ab;
    bottom:0;
    left:0
}
.table-title b{
    font-family:"Roboto Condensed",sans-serif;
    font-style:normal;
    font-weight:bold;
    font-size:25px;
    line-height:45px;
    padding:5px 10px;
    background:#8903ab;
    text-transform:uppercase;
    position:relative;
    color:#FFFFFF;
    z-index:2;
    text-align:center
}
.table-title{
    position:relative
}
.table-title:before{
    content:"";
    display:block;
    height:5px;
    width:100%;
    background:#F2F2F2;
    z-index:1;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
}
.graph,.label,.table-title b{
    display:block;
    width:100%;
    max-width:540px;
    margin:40px auto
}
.label{
    margin:35px auto
}
.label li{
    font-family:"Lato",sans-serif;
    font-style:normal;
    font-weight:normal;
    font-size:16px;
    line-height:29px;
    margin-bottom:25px;
    color:#000000;
    display:flex;
    flex-direction:row;
    align-items:center
}
.graph{
    height:325px
}
.square1,.square2{
    height:25px;
    width:25px;
    margin-right:8px;
    display:inline-block
}
.square1{
    background-color:#B8B8B8
}
.square2{
    background-color:#1202F7
}
.graph tbody{
    position:relative;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(2em,1fr));
    column-gap:10%;
    align-items:end;
    height:100%;
    margin:3em 0 1em 2.8em;
    padding:0;
    border-top:1px solid #919191;
    border-bottom:1px solid #919191;
    background:repeating-linear-gradient(180deg,#F2F2F2 0,#F2F2F2 0 1px,transparent 1px,transparent 20%)
}
.graph tbody:after,.graph tbody:before{
    position:absolute;
    left:-3.2em;
    width:2.8em;
    text-align:right;
    font-family:"Roboto Condensed",sans-serif;
    font-style:normal;
    font-weight:normal;
    font-size:18px;
    line-height:32px;
    color:#000000
}
.WeightConsistently tbody:before{
    content:"100%";
    top:-1em
}
.WeightConsistently tbody:after{
    content:"0%";
    bottom:-1em
}
.graph tbody th{
    position:absolute;
    top:-3em;
    left:0;
    width:100%;
    font-weight:normal;
    text-align:center;
    white-space:nowrap;
    text-indent:0;
    transform:rotate(-45deg)
}
.graph tr{
    position:relative;
    display:block
}
.graph tr:hover{
    z-index:999
}
.graph tr:hover{
    opacity:0.7
}
.graph td,.graph th{
    display:block;
    text-align:center
}
.graph td{
    width:100%;
    height:100%;
    border-radius:0.5em 0.5em 0 0;
    transition:background 0.5s
}
.graph td span{
    overflow:hidden;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    font-family:"Roboto Condensed",sans-serif;
    font-style:normal;
    font-weight:bold;
    font-size:20px;
    line-height:36px;
    width:100px;
    color:#FFFFFF;
    transition:opacity 0.5s
}
.AverageMineral tbody:before,.AveragePounds tbody:before{
    content:"Pounds";
    font-family:"Roboto Condensed",sans-serif;
    font-style:normal;
    font-weight:normal;
    font-size:18px;
    line-height:32px;
    color:#000000;
    position:absolute;
    top:46%;
    transform:translate(-50%,-50%);
    transform:rotate(-90deg)
}
.AverageWeightLoss tbody:before{
    content:"Average Pounds Lost After 1 Month";
    font-family:"Roboto Condensed",sans-serif;
    font-style:normal;
    font-weight:normal;
    font-size:18px;
    line-height:32px;
    color:#000000;
    width:325px;
    position:absolute;
    top:45%;
    text-align:center;
    left:-11em;
    transform:translate(-50%,-50%);
    transform:rotate(-90deg)
}
.AverageWeightLossPercentage tbody:before{
    content:"% Who Lost Over 30 Pounds After 1 Month";
    font-family:"Roboto Condensed",sans-serif;
    font-style:normal;
    font-weight:normal;
    font-size:18px;
    width:325px;
    line-height:32px;
    color:#000000;
    position:absolute;
    top:45%;
    text-align:center;
    left:-11em;
    transform:translate(-50%,-50%);
    transform:rotate(-90deg)
}
.SideEffects tbody:before{
    content:"% Who Experienced Side Effects";
    font-family:"Roboto Condensed",sans-serif;
    font-style:normal;
    font-weight:normal;
    font-size:18px;
    width:325px;
    line-height:32px;
    color:#000000;
    position:absolute;
    top:45%;
    text-align:center;
    left:-11em;
    transform:translate(-50%,-50%);
    transform:rotate(-90deg)
}
a{
    cursor:pointer;
    color:#8903ab;
    text-decoration:underline
}
.prod-img{
    display:block;
    width:100%;
    max-width:300px;
    margin:40px auto
}
.coupon{
    width:100%;
    margin:40px auto 10px;
    position:relative
}
.coupon span{
    display:block;
    width:100%;
    max-width:350px;
    margin:0 auto;
    font-family:"Roboto Condensed",sans-serif;
    font-style:normal;
    font-weight:bold;
    font-size:18px;
    line-height:22px;
    color:#000000;
    text-align:center;
    background:#fff;
    position:relative;
    z-index:2
}
.coupon:before{
    content:"";
    display:block;
    height:0;
    border-bottom:2px dashed #919191;
    width:100%;
    background:#F2F2F2;
    z-index:1;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
}
.coupon:after{
    content:" ";
    width:50px;
    height:37px;
    background:url(https://com-pubs.com/diet/ss/za/v1/assets/img/scissors.png) no-repeat;
    background-size:contain;
    position:absolute;
    top:-20px;
    right:20px;
    z-index:2
}
.claim-now{
    font-family:"Roboto Condensed",sans-serif;
    font-style:normal;
    font-weight:bold;
    font-size:14px;
    line-height:18px;
    color:#8903ab;
    text-align:center
}
.note{
    font-family:"Lato",sans-serif;
    font-style:normal;
    font-weight:normal;
    font-size:20px;
    line-height:29px;
    text-align:center;
    margin:20px auto 10px;
    padding:5px 0;
    background:yellow
}
.stock-update img{
    width:18px;
    margin-right:5px
}
.stock-update{
    border:1px dotted #000;
    background:#EFFFF7;
    padding:4px 9px;
    margin:15px 0;
    display:flex;
    align-items:center
}
.stock-update p{
    margin:0
}
.stock-update span{
    color:#dc3545
}
.order-block{
    padding:20px;
    border:1px dotted #000;
    background:#EFFFF7;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-around
}
.order-block-img{
    width:30%;
    max-width:300px;
    margin:0 auto
}
.order-block-text{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:70%
}
.order-block-text p{
    margin-bottom:0;
    font-family:"Roboto Condensed",sans-serif;
    font-style:normal;
    font-weight:bold;
    font-size:14px;
    line-height:18px;
    text-align:center
}
.order-block-text .note{
    margin:10px 0;
    font-family:"Lato",sans-serif;
    font-style:normal;
    font-weight:normal;
    font-size:20px;
    line-height:29px;
    text-align:center;
    padding:5px 15px
}
.button{
    display:block;
    background:#de7474;
    background:linear-gradient(180deg,#de7474 0%,#f72210 60%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#de7474",endColorstr="#8903ab",GradientType=1);
    text-align:center;
    width:100%;
    max-width:500px;
    text-align:center;
    margin:15px auto;
    color:#fff;
    font-family:"Lato",sans-serif;
    font-style:normal;
    font-weight:bold;
    font-size:30px;
    line-height:54px;
    text-decoration:none;
    border-radius:10px;
    padding:20px 15px;
    color:#fff
}
.checkmark{
    display:inline-block;
    font-family:"Roboto Condensed",sans-serif;
    font-style:normal;
    font-weight:bold;
    font-size:14px;
    line-height:18px;
    color:#8903ab;
    text-align:center;
    padding-left:30px;
    position:relative
}
.checkmark:before{
    content:" ";
    width:30px;
    height:29px;
    background:url(https://com-pubs.com/diet/ss/za/v1/assets/img/checkmark2.png) no-repeat;
    background-size:contain;
    position:absolute;
    left:5px;
    top:-11px
}
.offer{
    background:url("https://com-pubs.com/diet/ss/za/v1/assets/css/offer-bg.jpeg");
    background-size:cover;
    background-position:center
}
.offer__wrapper{
    background:rgba(154,39,183,0.3);
    padding:40px 20px
}
.offer__img{
    max-width:300px;
    display:block;
    margin:0 auto
}
.offer__link a:hover{
    text-decoration:none!important
}
.offer__button{
    margin:40px auto;
    display:block;
    position:relative;
    border:none;
    box-shadow:0 0 0 0 rgba(232,76,61,0.7);
    border-radius:20px;
    background-color:#e84c3d;
    padding:20px 40px;
    color:#fff;
    font-weight:bold;
    font-size:22px;
    background-repeat:no-repeat;
    cursor:pointer;
    animation:pulse 1.25s infinite cubic-bezier(0.66,0,0,1)
}
.offer__button:hover{
    animation:none
}
.offer__button,.offer__button:active,.offer__button:focus{
    outline:none
}
.offer h2,.offer p{
    text-align:center
}
.offer h2{
    color:#fff;
    font-size:32px;
    font-family:"Lato",sans-serif
}
.offer .claim-now{
    padding-top:10px
}
.offer .note{
    background:#abff9c
}
.offer a{
    text-decoration:none
}
@keyframes pulse{
    to{
        box-shadow:0 0 0 45px rgba(232,76,61,0)
    }
}
.footer{
    padding:20px 0;
    border-top:4px solid #8903ab
}
.footer__logo{
    height:50px;
    width:50px;
    display:block;
    margin-right:20px
}
.footer__wrapper{
    display:flex;
    align-items:center;
    justify-content:center
}
.footer__text{
    font-family:"Lato",sans-serif
}
@media (min-width:600px){
    .title{
        padding:30px 0;
        text-align:left
    }
    .subtitle:after{
        left:0
    }
    .subtitle{
        text-align:left
    }
}
@media (min-width:601px){
    .header__wrapper{
    }
    .header__logo-img{
        max-height:400px;
    }
    .header__item{
        height:36px
    }
    .header__item img{
        width:24px
    }
    .offer h2{
        font-size:46px
    }
}
@media screen and (max-width:1150px){
    .menu{
        display:none
    }
}
@media screen and (max-width:750px){
    .order-block{
        flex-direction:column
    }
    .order-block-img{
        width:100%;
        margin-bottom:20px
    }
    .order-block-text{
        width:100%
    }
}
@media screen and (max-width:600px){
    .content{
        padding:30px 15px
    }
    .current-category{
        display:none
    }
    .title{
        font-size:30px;
        line-height:35px
    }
    .subtitle{
        font-size:20px;
        line-height:25px
    }
    .post-date{
        font-weight:300;
        font-size:14px;
        line-height:25px
    }
    .categories ul li{
        font-size:12px;
        line-height:14px;
        margin-right:5px;
        letter-spacing:0.15em
    }
    .content .image.horizontal,.content .image.vertical{
        max-width:100%
    }
    .content .image{
        margin:35px auto;
        border-top:4px solid #8903ab
    }
    .social img{
        width:27px;
        height:27px;
        margin-right:15px
    }
    .social{
        padding:12px 0
    }
    .social span{
        font-size:15px;
        line-height:18px;
        margin-right:20px
    }
    p{
        font-size:18px;
        line-height:32px;
        letter-spacing:-0.02em
    }
    h1{
        position:relative;
        font-weight:800;
        font-size:28px;
        line-height:45px;
        letter-spacing:-0.02em;
        padding-bottom:14px
    }
    h1:after{
        position:absolute;
        content:"";
        height:4px;
        width:100px;
        background:#8903ab;
        bottom:0;
        left:0
    }
    .table-title b{
        font-size:17px;
        line-height:31px
    }
    .table-title:before{
        display:none
    }
    .graph,.label,.table-title b{
        max-width:100%;
        margin:25px 0
    }
    .graph{
        margin-top:0;
        margin-bottom:35px
    }
    .graph tbody{
        margin-top:0;
        margin-left:2em
    }
    .table-title{
        margin-top:35px
    }
    tbody:after,tbody:before{
        font-size:12px!important;
        line-height:22px!important
    }
    .graph td span{
        font-size:12px;
        line-height:25px
    }
    .coupon:after,.coupon:before{
        display:none
    }
    .AverageWeightLossPercentage tbody:before,.AverageWeightLoss tbody:before,.SideEffects tbody:before{
        left:-15em
    }
    .label li{
        margin-bottom:15px
    }
}
@media screen and (max-width:500px){
    .stock-update img{
        display:none
    }
    .button{
        font-size:24px;
        line-height:30px
    }
}
@media screen and (max-width:400px){
    .note,.order-block-text .note{
        font-size:18px;
        line-height:32px;
        letter-spacing:-0.02em;
        padding:5px
    }
    .button{
        font-size:24px;
        line-height:30px
    }
}