#epson {
    background-image: url(./img/hero-bg.jpg);
    height: 500px;
    border-radius: 12px 12px 0 0;
    margin: 32px 0 0 0;
    background-position: right;
    background-repeat: no-repeat;
    background-color: white;
}
#epson .mobile-hero {
    display: none;
}
#epson .textcontent {
    width: 28%;
    position: relative;
    top: 180px;
    left: 60px;
    display: flex;
    flex-direction: column;
}
#epson .textcontent h1 {
    margin: 0;
}
.butn {
    background: #10218b;
    color: #ffffff !important;
    padding: 8px 10px;
    text-decoration: none;
    width: max-content;
}
.butn:hover {
    background: #9ddfff;
    color: #10218b
}
#intro {
    background-color: #ffffff;
    padding: 60px 100px;
    text-align: center;
}
#intro p {
    font-size: 16px;
}
#steps {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 60px 0;
}
#steps h2{
    font-size: 30px;
}
.blocks {
    display: inline-flex;
    width: 100%;
    gap: 16px;
}
.blocks .block {
    flex: 20%;
    background-color: white;
    padding: 20px 0;
    border-radius: 8px;
}
.blocks .block p, h3 {
    margin: 8px 16px;
    text-align: left;
}
#steps .butn {
    margin: 20px 0;
}
.hyperlink {
    color:#10218b;
    text-decoration: none;
}
.hyperlink:hover {
    text-decoration: underline;
}
#qualifying {
    background-color: #ffffff;
    margin: 60px 0;
}
#save {
    max-height: 500px;
    border-radius: 12px;
    margin: 60px 0;
    background-repeat: no-repeat;
    overflow: hidden;
}
/* listings catalogue products */
.product-grid {border-radius:20px;background:#fff;/* padding-bottom:20px; */width: 100%;display:flex;align-items: stretch;flex-wrap: wrap;justify-content: center;}
.product-grid .overlay {
    left: 0px !important;
    top: 0px !important;
    width: 45px !important;
}
.product-grid .overlay img {
    width: 100% !important;
    border-radius: 0px 0px 10px 0px !important;
}
.product-grid > li {border-right:1px solid #f0f0f0;margin-right: 0px !important;display: flex;width: 206px !important;margin-bottom: 0px !important;flex-shrink: 1;width: 206px;flex-flow: column;}
.product-grid > li:last-of-type {
    border-right: 0px;
    margin-right: 0px;
    width: 206px;
}
img {max-width:100%;}
.product-grid > li:last-of-type a {border-right:0px;}
.product-grid > li:nth-of-type(4n) {border-right:1px solid #f0f0f0;}
.product-grid > li:nth-of-type(5n) {border-right:0px}
.product-grid > li:before {display:none;}

.savecontent {
    display: inline-flex;
}
#save .savecontent .left {
    height: 500px;
    flex: 50%;
    background-color: white;
}
#save .savecontent .right {
    background-color: #ffffff;
    flex: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.rightwrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 130px;
}
.rightwrapper > img {
    max-width: 100px;
    margin: 20px 0;
}
.rightwrapper > h3 {
    margin: auto 0;
}
.rightwrapper > p {
    margin: 8px 0;
}
#heatfree {
    text-align: center;
    margin: 60px 0;
}
#heatfree > .blocks {
    margin-top: 20px;
}
#heatfree h2 {
    font-size: 30px;
    line-height: 36px;
}


/*-----------------------------*/
/*           Tablet            */
/*-----------------------------*/
@media only screen and (min-width: 600px) and (max-width: 1024px) {
    #epson {
        background-image: url(./img/epson-firstbanner-tablet.png);
        background-position: right;
        background-repeat: no-repeat;
    }
    #epson .textcontent {
        width: 36%;
    }
    #steps .blocks {
        flex-direction: column;
    }
    #steps .blocks .block {
        display: inline-flex;
        align-items: center;
    }
    .rightwrapper {
        margin: 0px 32px;
    }
    #save {
        height: 500px;
    }
    .savecontent {
        display: inline-flex;
        height: 100%;
    }
    #save .savecontent .left {
        height: 100%;
        flex: 50%;
        background-color: white;
        position: relative;
    }
    #save .savecontent .left img {
        height: auto;
        position: absolute;
        max-width: 100%;
        bottom: 0;
        left: -8px;
    }
    #heatfree > .blocks {
        flex-wrap: wrap;
    }
    #heatfree > .blocks .block {
        flex: 48%;
    }
    #steps .butn {
        margin: 32px 0 0 0;
    }
}

/*-----------------------------*/
/*           Mobile            */
/*-----------------------------*/
@media only screen and (max-width: 599px) {
    #epson {
        background-image: none;
        display: flex;
        flex-direction: column;
        background-color: white;
        height: max-content;
    }
    #epson .mobile-hero {
        display: block;
    }
    #epson .textcontent {
        width: 100%;
        display: flex;
        position: static;
        padding: 32px;
        align-items: center;
    }
    #epson .textcontent h1{
        font-size: 40px;
    }
    #epson .textcontent h2{
        font-size: 24px;
        line-height: 30px;
        text-align: center;
    }
    .butn {
        padding: 10px 16px;
    }
    #intro {
        padding: 16px 40px 40px 40px;
    }
    #intro > p {
        font-weight: lighter;
    }
    #steps {
        margin: 60px 0;
    }
    #steps h2 {
        margin: 0 0 60px 0;
    }
    #steps .blocks {
        flex-direction: column;
    }
    #steps .blocks .block {
        display: inline-flex;
        align-items: center;
    }
    #steps .butn {
        margin: 40px 0 0 0;
    }
    .rightwrapper {
        margin: 0px 32px;
    }
    #heatfree .blocks {
        flex-wrap: wrap;
        width: 100%;
        display: flex;
    }
    #heatfree .blocks .block {
        flex: 48%;
    }
    #save {
        height: max-content;
        max-height: 1000px;
    }
    .savecontent {
        flex-direction: column-reverse;
        min-height: 680px;
        display: flex;
    }
    #save .savecontent .left {
        position: relative;
        flex-basis: auto;
        background: white;
    }
    #save .savecontent .left img {
        position: absolute;
        width: 102%;
        bottom: 0;
        left: -8px;
    }
    .rightwrapper {
        text-align: center;
        align-items: center;
    }
    .rightwrapper > h3 {
        font-size: 30px;
        font-weight: normal;
    }
    .rightwrapper > p {
        font-size: 18px;
        font-weight: lighter;
    }
}