.banner-section,
.zw-template-inner {
     overflow: hidden 
}
.s24 .device-img {
    max-width: 1020px;
}
 a.act-btn.cta-btn {
     padding: 14px 50px;
     border-radius: 4px 
}
 img {
     display: block;
     position: relative;
     width: 100% 
}
 h1 {
     font-size: 50px;
     line-height: 1.1 
}
 h1 strong {
     font-family: var(--primaryfont-bold);
     color: #09a254 
}
 h3 {
     font-size: 30px 
}
 p {
     margin: 0 0 15px;
     font-size: 17px 
}
 body h2 {
     font-size: 42px;
     line-height: 1.1;
     font-family: var(--primaryfont-bold) 
}
 h2 strong {
     font-family: var(--primaryfont-bold);
     display: block;
     font-size: 55px 
}
 .rows {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between 
}
 .rows>div {
     flex: 0 0 50%;
     max-width: 50% 
}
 .zw-product-header,.banner-section {
     background: #c0e0ff;
}
 h2 span.caption {
     color: #ff5800;
     display: block;
     font-size: 20px;
     margin-bottom: 5px;
     font-family: var(--secondaryfont-regular) 
}
 h4 {
     line-height: 1.2;
     font-family: var(--secondaryfont-bold) 
}

.banner-section {
     padding: 60px 0 80px;
     position: relative
}
.non-umain .banner-content {
    margin-top: 70px;
}
.banner-content {
    max-width: 500px;
}
.banner-content p a {
    text-decoration: underline;
    color: #000;
}
 .device-main {
     padding-top: 6em 
}
 .device-content {
     text-align: center;
     max-width: 820px;
     margin: 0 auto 40px 
}
 .device-img {
     max-width: 800px;
     margin: 0 auto 
}
 .device-main .content-wrap {
     padding-bottom: 8em 
}
 .signup-box {
     margin: 0 auto;
     max-width: 100% 
}
.banner-section .col-2 {
    max-width: 410px;
    margin: 0 auto;
}
.body-umain .zs-sign, .body-umain .zs-create-account{
    display: none;
}
.zs-create-account {
    position: relative;
    font: 400 14px/1.4 Roboto;
    padding: 35px 0;
    text-align: center
}
.zs-create-account span {
    background: #c0e0ff;
    padding: 0 10px;
    position: relative;
    z-index: 1
}
.zs-create-account::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #9eccf8;
    opacity: 50%
}3
 .creditelm #email {
     background: #ececec 
}
.redeem-form-section h2 {
     font-size: 18px;
     text-align: center;
     margin-bottom: 20px;
}

a.btn-signin {
    padding: 14px 25px;
    background: #f0483e;
    text-align: center;
    border: 0;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font: 16px/1.1 var(--zf-primary-semibold);
    width: 100%;
    box-sizing: border-box;
    opacity: 100%
}
.zs-sign p {
    font-size: 18px;
    text-align: center
}
.creditelm {
    width: 100%;
    max-width: 350px;
    margin-left: auto
}
.creditelm input {
     color: #000;
     padding: 14px 12px;
     border: 1px solid #d5d5d5;
     display: block;
     width: 100%;
     margin: 15px 0 0;
     font-size: 13px;
     background: #fff;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     position: relative;
     z-index: 1;
     transition: .5s ease;
     border-radius: 0 
}
 .creditelm .note {
     font-size: 11px;
     margin: 10px 0 10px;
     text-align: left;
     width: 100%;
     display: inline-block;
     color: #000 
}
 .coupon-error.note {
     color: red 
}
 .creditelm .coupon-error:empty {
     display: none 
}
 .creditelm .existingUser {
     font-size: 14px;
     padding: 17px 30px;
     background: #f0483e;
     text-align: center;
     text-transform: uppercase;
     border: 0;
     color: #fff;
     width: calc(100% - 60px);
     cursor: pointer;
     font-weight: 600;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     width: 100%;
     border-radius: 4px;
}

 .redeem-form-section .form-title-wrap .form-title {
     text-align: center;
     max-width: 800px;
     margin: 0 auto 
}
 .redeem-form-section h2.form-title {
     text-align: center 
}
 .redeem-form-section .form-wrap {
     margin: 0 auto;
     border-radius: 4px;
     background: #ffffff;
     padding: 25px 35px 35px;
     box-shadow: 0 0 30px rgba(0,0,0,0.09);
     min-height: 400px;
     position: relative;
}
.umain .redeem-form-section .form-wrap {
    min-height: 310px;
}
 .redeem-form-section .form-wrap .particles:before {
     opacity: 0;
     content: '';
     position: absolute;
     background: url(/sites/zweb/images/notebook/znotebook-wallet-sprite.png) no-repeat;
     transition: .5s cubic-bezier(0.25,0.1,0.07,1.41) .1s;
     background-size: 100px auto;
     /* z-index: -1; */
}

 .redeem-form-section .form-wrap .particles:after {
     opacity: 0;
     content: '';
     position: absolute;
     transition: .5s cubic-bezier(0.25,0.1,0.07,1.41) .1s;
     background: url(/sites/zweb/images/notebook/znotebook-wallet-sprite.png);
     background-size: 154px auto;
}

 .redeem-form-section .form-wrap .particles1:before {
     width: 24px;
     height: 29px;
     left: -70px;
     top: -5%;
     background-position: -104px -44px;
     transform: translate(20px,5px) rotate(20deg);
     background-size: 160px auto;
}
 .redeem-form-section .form-wrap .particles1:after {
     left: -11%;
     top: 20%;
     width: 20px;
     height: 15px;
     background-position: -102px -10px;
     transform: translate(40px,-10px) rotate(125deg);
}
 .redeem-form-section .form-wrap .particles2:before {
     left: -20%;
     top: 36%;
     width: 20px;
     height: 35px;
     background-position: -24px 0;
     -webkit-transform: translate(30px,-40%) rotate(-65deg);
     transform: translate(30px,-40%) rotate(-65deg);
}
.redeem-form-section .form-wrap .particles2:after,
.redeem-form-section .form-wrap .particles3:before{
  display:none;
}
 /* .redeem-form-section .form-wrap .particles2:after {
     left: 10px;
     top: -60px;
     width: 20px;
     height: 20px;
     background-position: -119px 0;
     transform: translate(30px,-20px) rotate(120deg);
     display: none;
} 
 .redeem-form-section .form-wrap .particles3:before {
     right: -16%;
     top: 14%;
     width: 24px;
     height: 45px;
     background-position: -43px 0;
     -webkit-transform: translate(30px,-40%) rotate(65deg);
     transform: translate(30px,-40%) rotate(65deg)
}*/
 .redeem-form-section .form-wrap .particles3:after {
    right: -10%;
    top: 17%;
    width: 23px;
    height: 41px;
    background-position: -43px 0;
    transform: translate(-18px,-20px) rotate(65deg);
    background-size: 100px auto;
}
 .redeem-form-section .form-wrap .particles4:before {
     right: -11%;
     top: -5%;
     width: 12px;
     height: 10px;
     background-position: -66px -17px;
     transform: translate(-30px,20px) rotate(120deg)
}
 .redeem-form-section .form-wrap .particles4:after {
     right: -18%;
     top: 40%;
     width: 20px;
     height: 20px;
     background-position: -139px 0;
     transform: translate(-30px,20px) rotate(120deg)
}
 .redeem-form-section .form-wrap .particles5:before {
     right: -23%;
     top: 45%;
     width: 13px;
     height: 11px;
     background-position: -77px 0;
     transform: translate(-30px,-20px) rotate(120deg);
}
 .redeem-form-section .form-wrap .particles5:after {
     right: 30px;
     top: -50px;
     width: 18px;
     height: 20px;
     background-position: -120px 0;
     transform: translate(-50px,-10px) rotate(190deg)
}
 .redeem-form-section .form-wrap .particles6:before {
     right: -16%;
     bottom: 27%;
     width: 26px;
     height: 30px;
     background-position: 0 0;
     transform: translate(-30px,20px) rotate(120deg);

}
 .redeem-form-section .form-wrap .particles6:after {
     right: -35%;
     bottom: 5%;
     width: 20px;
     height: 20px;
     background-position: -100px 0;
     transform: translate(-60px,-35px) rotate(120deg) 
}
.middle-animated .redeem-form-section .form-wrap .particles::before {
     transform: translate(0,0) rotate(30deg);
}
.middle-animated .redeem-form-section .form-wrap .particles::after {
     transform: translate(0,0) rotate(0);
}
.middle-animated .redeem-form-section .form-wrap .particles:after,
.middle-animated .redeem-form-section .form-wrap .particles:before {
     opacity: 1;
}
 .device-main.note-section {
     background: #e1f3ff 
}
 .note-section .title {
     padding-bottom: 5em;
     margin-bottom: 0 
}
 .split-section .col-1 {
     flex: 0 0 40%;
     max-width: 30% 
}
 .split-section .col-2 {
     flex: 0 0 60%;
     max-width: 60% 
}
 .split-section .content-wrap {
     padding-bottom: 8em 
}
 .split-section .rows {
     align-items: center 
}
 .split-section .content-wrap:nth-child(2n+2) .col-1 {
     order: 2 
}
 .note-img img {
     border: 4px solid #000;
     border-radius: 12px 
}
 .device-main.screen-sec {
     background: #f6feff 
}
 .watch-section .title.device-content {
     margin-bottom: 5em 
}
 .watch-img {
     max-width: 400px;
     margin: 0 auto 
}
 .watch-section .col-1 {
     margin: 0 auto;
     flex: 0 0 50%;
     max-width: 50% 
}
 .watch-section .col-2 {
     flex: 0 0 50%;
     max-width: 50% 
}
 .watch-section .rows {
     max-width: 900px;
     margin: 0 auto 
}
 .watch-main .content-wrap:nth-child(2n+2) .col-1 {
     padding-left: 40px 
}
 .multi-screen img {
     border: 3px solid #000;
     border-radius: 12px 
}
 .large-screen .device-img {
     max-width: 1000px 
}
 .device-main.screen-section {
     background: #fafafa 
}
 .drag-section .device-img {
     max-width: 650px 
}
 .note-img {
     max-width: 700px;
     margin: 0 auto 
}

.zwc-notebook-wallet-note p {
    text-align: center;
    margin: 0px auto 80px;
    background: #f9f9f9;
    border: 1px solid #e3e3e3;
    max-width: 700px;
    padding: 10px 0;
    border-radius: 4px;
    font-size: 14px;
}
.zwc-notebook-wallet-note p a {
    text-decoration: underline;
    text-underline-offset: 2px;
    color: #3059f1;
}
 @media screen and (min-width: 768px) {
     .watch-img,.note-img,.device-img {
         opacity:0 
    }
     .middle-animated .watch-img,.middle-animated .note-img,.middle-animated .device-img {
         animation: slideRight 1s ease-out .1s forwards 
    }
     .middle-animated .device-img {
         animation: slideDown 1s ease-out .4s forwards 
    }
     .split-section .content-wrap.middle-animated:nth-child(2n+2) .watch-img,.split-section .content-wrap.middle-animated:nth-child(2n+2) .note-img {
         animation: slideLeft 1s ease-out .1s forwards 
    }
     @keyframes slideLeft {
         0% {
             visibility: hidden;
             opacity: 0;
             transform: translateX(-30px) 
        }
         100% {
             visibility: visible;
             opacity: 1;
             transform: translateX(0) 
        }
    }
     @keyframes slideRight {
         0% {
             visibility: hidden;
             opacity: 0;
             transform: translateX(30px) 
        }
         100% {
             visibility: visible;
             opacity: 1;
             transform: translateX(0) 
        }
    }
     @keyframes slideUp {
         0% {
             visibility: hidden;
             opacity: 0;
             transform: translateY(-30px) 
        }
         100% {
             visibility: visible;
             opacity: 1;
             transform: translateY(0) 
        }
    }
     @keyframes slideDown {
         0% {
             visibility: hidden;
             opacity: 0;
             transform: translateY(30px) 
        }
         100% {
             visibility: visible;
             opacity: 1;
             transform: translateY(0) 
        }
    }
     @keyframes scaling {
         0% {
             visibility: hidden;
             opacity: 0;
             transform: scale(.2) 
        }
         100% {
             visibility: visible;
             opacity: 1;
             transform: scale(1) 
        }
    }
     @keyframes rotate {
         0% {
             transform: rotate(0) 
        }
         100% {
             transform: rotate(360deg) 
        }
    }
}
 @media screen and (max-width: 1440px) {
     h1 {
         font-size:50px 
    }
     body h2 {
         font-size: 42px 
    }
}
 @media screen and (max-width: 1280px) {
     h1 {
         font-size:42px 
    }
     body h2 {
         font-size: 36px 
    }
}
 @media screen and (max-width: 1199px) {
      
    .banner-section {
        padding: 3em 0 4em;
    }
    .banner-section .col-1 {
        max-width: 40%;
        margin: 0 auto;
    }
    .redeem-form-section .form-wrap .particles {
        display: none;
    }
    .redeem-form-section .form-wrap {
        max-width: 400px;
    }
    .device-img {
         max-width:550px 
    }
     .split-section .col-2 {
         flex: 0 0 50%;
         max-width: 50% 
    }
     .split-section .col-1 {
         max-width: 45%;
         flex: 0 0 45% 
    }
     .device-main {
         padding-top: 4em 
    }
     .large-screen .device-img {
         max-width: 800px 
    }
}
 @media screen and (max-width: 1023px) {
     body h2 {
         font-size:32px 
    }
     p {
         font-size: 16px 
    }
   .banner-section .col-1,.banner-section .col-2 {
      flex: 0 0 100%;
      max-width: 100%;
   }
    .banner-content {
        max-width: 600px;
        margin: 0 auto;
        text-align: center;
    }
    .banner-section .col-2 {
        max-width: 400px;
    }
     .banner-section {
         padding: 2em 0 4em;
    }
     .split-section .col-1 {
         max-width: 48% 
    }
     .large-screen .device-img {
         max-width: 560px 
    }
     .drag-section .device-img {
         max-width: 450px 
    }
     .note-section .title {
         padding-bottom: 2em 
    }
     .device-main .content-wrap,.split-section .content-wrap {
         padding-bottom: 5em 
    }
}
 @media screen and (max-width: 767px) {
     h1 {
         font-size:30px;
         line-height: 1.2 
    }
    p {
         font-size: 15px 
    }
     body h2 {
         font-size: 28px 
    }
    h3 {
         font-size: 25px 
    }
    .device-main .content-wrap {
         padding-bottom: 5em 
    }
    .split-section .col-1,.split-section .col-2 {
         flex: 0 0 100%;
         max-width: 100% 
    }
    .split-section .content-wrap:nth-child(2n+2) .col-1 {
         order: 0 
    }
    .split-section .col-1 {
         max-width: 500px;
         text-align: center;
         margin: 0 auto 25px 
    }

   .banner-content {
       text-align: center;
       max-width: 700px;
       margin: 0 auto 40px;
   }
   .redeem-form-section .form-wrap {
       padding: 30px 30px;
   }
   .creditelm .existingUser {
       padding: 20px 14px;
       font-size: 13px;
   }
}
@media screen and (max-width: 375px) {
   .redeem-form-section .form-wrap {
      padding: 20px 15px;
   }
   .creditelm .existingUser {
      font-size: 12px;
   }
}