@import "style.css";
@media (max-width: 1280px) {}
@media (max-width: 1200px) {}
@media (max-width: 1024px) {}
@media (max-width: 925px) {}
@media (max-width: 768px) {}
@media (min-width: 640px) {
    .section-first article dl dt, .section-first article dl dd {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: 0 -10px;
    }
    .section-first article dl span {
        max-width: calc(100% / 3);
        padding: 10px;
    }
}
@media screen and (min-width:768px) and (max-width:1024px) {
    .section-first article dl {
        max-width: 640px;
    }
}
@media (min-width: 768px) {
    .section-first h2 {
        padding: 70px 0 0;
    }
    h1 strong {
        padding: 1% 2%;
        margin: 0;
    }
    header nav {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 5;
        text-align: left;
    }
    header article {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        font-size: 4.5vw;
        align-items: flex-end;
    }
    h1 strong {
        padding: 1% 2%;
        font-size: 60%;
    }
    h1 span {
        display: inline-block;
    }
    .section-second ul.step li div:after {
        bottom: inherit;
        top: 50%;
        transform: translateY(-50%);
        left: inherit;
        right: -14px;
        border-width: 15px 0 15px 15px;
        border-color: transparent transparent transparent #fff;
        margin: -3% 0 0;
    }
    header article {
        font-size: 4.6vw;
        padding: 0;
    }
    .container {
        width: 100%;
        padding: 0 2.5%;
    }
    .section-third .container {
        max-width: 980px;
    }
    .section-third dl.row {
        max-width: none;
        padding: 25px;
    }
    .section-third ul.row > li > div.row {
        margin: 0 -5px;
    }
    .section-third ul.row > li > div.row > article {
        width: calc(100% / 3);
        padding: 0 5px;
    }
    .section-first article div {
        padding: 380px 0 0;
        background-size: 540px auto;
    }
    .section-first article .PA511D {
        padding: 230px 0 0;
    }
    .section-second ul.step {
        margin: 0 -10px;
        max-width: none;
    }
    .section-second ul.step li {
        width: calc(100% / 3);
        padding: 0 10px;
    }
    .section-third dl.row > dd div {
        padding: 30px;
        font-size: 21px;
        background-position: center 60%;
    }
    .section-third dl.row > dd div:after {
        background-position: center;
    }
    header div.row:after {
        opacity: 1;
    }
    ul.step.delighter li {
        opacity: 0;
        transform: translateX(-200%);
        transition: all .5s ease-out;
    }
    ul.step.started li {
        opacity: 1;
        transform: none;
    }
    ul.step.started li:nth-child(5) {
        transition: all .5s ease-out .1s;
    }
    ul.step.started li:nth-child(4) {
        transition: all .5s ease-out .3s;
    }
    ul.step.started li:nth-child(3) {
        transition: all .5s ease-out .5s;
    }
    ul.step.started li:nth-child(2) {
        transition: all .5s ease-out .7s;
    }
    ul.step.started li:nth-child(1) {
        transition: all .5s ease-out .9s;
    }
    .trial_buy.delighter, .section-contactUs.delighter a {
        opacity: 0;
        transition: all .5s ease-out;
        transform: translatey(100%);
    }
    .trial_buy.started, .section-contactUs.started a {
        transform: none;
        opacity: 1;
    }
    .section-third dl dd div.delighter {
        opacity: 0;
        transition: all .7s ease-out;
        transform: translateX(20%);
    }
    .section-third dl dt div.delighter {
        opacity: 0;
        transition: all .7s ease-out;
        transform: translateX(-20%);
    }
    .section-third dl dd div.started, .section-third dl dt div.started {
        transform: none;
        opacity: 1;
    }
    .section-first article.delighter h3 span:after {
        transition: all .5s ease-out;
        transition-delay: .7s;
        width: 0;
        opacity: 0;
    }
    .section-first article.started h3 span:after {
        width: 100%;
        opacity: 1;
    }
    .section-first article.delighter h3 + p {
        transition: all .5s ease-out;
        transition-delay: .7s;
        transform: translatey(100%);
        opacity: 0;
    }
    .section-first article.started h3 + p {
        transform: none;
        opacity: 1;
    }
    .section-first article.delighter dl dt span, .section-first article.delighter dl dd span {
        opacity: 0;
        transform: translatey(100%);
        transition: all .5s ease-out;
    }
    .section-first article.started dl dt span, .section-first article.started dl dd span {
        opacity: 1;
        transform: none;
    }
    .section-first article.started dl dt span:nth-child(1), .section-first article.started dl dd span:nth-child(1) {
        transition: all .5s ease-out .1s;
    }
    .section-first article.started dl dt span:nth-child(2), .section-first article.started dl dd span:nth-child(2) {
        transition: all .5s ease-out .3s;
    }
    .section-first article.started dl dt span:nth-child(3), .section-first article.started dl dd span:nth-child(3) {
        transition: all .5s ease-out .5s;
    }
}
@media (min-width: 980px) {
    .section-third dl.row > dt ul.row {
        margin: 0 -15px;
    }
    .section-third dl.row > dt ul.row > li {
        padding: 0 15px;
        width: 50%;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
    }
    .section-third ul.row > li label {
        width: 160px;
    }
    .section-contactUs a:hover {
        background-color: #C9242C;
        color: #fff;
    }
    .submit button:hover, .buyNow a:hover {
        color: #C9242C;
        background-color: #fff;
    }
}
@media (min-width: 1024px) {
    header div.row picture, header div.row picture:nth-of-type(3) {
        width: calc(100% / 3);
    }
    .section-first article dl dt, .section-first article dl dd {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .section-first article dl dt span {
        flex-direction: row-reverse;
        margin: 0 0 0 25px;
    }
    .section-first article dl dd span {
        margin: 0 25px 0 0;
    }
    .section-first article dl dt span:nth-of-type(2), .section-first article dl dd span:nth-of-type(2) {
        margin: 0;
    }
    .section-first article dl dd {
        -ms-flex-pack: end;
        justify-content: flex-end;
    }
    .section-first article dl dt, .section-first article dl dd {
        max-width: 280px;
    }
    .section-first article dl span {
        max-width: 100%;
        flex-wrap: nowrap;
    }
    .section-first article dl span strong {
        width: 120px;
        text-align: left;
        padding: 0 0 0 10px;
    }
    .section-first article dl dt span strong {
        text-align: right;
        padding: 0 10px 0 0;
    }
    .section-first article div {
        padding: 25px 0;
        background-position: center;
        background-size: 46% auto;
    }
    .section-first article .PA511D {
        padding: 0;
    }
    .section-second ul.step {
        max-width: none;
    }
    .section-second ul.step li {
        width: calc(100% / 5);
    }
    .section-first article dl {
        -ms-flex-pack: justify;
        justify-content: space-between;
        max-width: none;
    }
    .section-first article dl dt span strong {
        padding: 0 6px 0 0;
    }
}
@media (min-width: 1200px) {
    .section-third dl.row > dt {
        padding: 20px;
    }
    .section-third dl.row > dd div {
        padding: 5%;
    }
    .section-third dl.row > dd div:after {
        background-position: center top;
        opacity: 1;
    }
    .section-third dl.row > dt {
        padding: 0 20px 0 0;
    }
    .section-third ul.row > li label[for="address"] {
        width: 230px;
    }
    .section-third ul.row > li label[for="fileUpload"] {
        width: auto;
    }
    .section-third dl.row > dt {
        min-width: 768px;
        max-width: 60%;
    }
    .section-third dl.row > dd {
        -ms-flex: 1;
        flex: 1;
    }
    .section-third .container {
        max-width: 1366px;
    }
    .section-third dl.row > dd div {
        font-size: 23px;
        text-align: left;
    }
    .section-third dl.row > dd div ul {
        display: block;
    }
    .section-third dl.row > dd div {
        font-size: 20px;
    }
    .section-third dl.row > dd div:before {
        display: inline-block;
    }
}