/* extras */
.nearred{
    color: #7d3bfd;
}
.ahover a{
    position: relative;
}
.ahover a:after{
    content: "";
    position: absolute;
    left: 0px;
    bottom: -5px;
    height: 1px;
    width: 0%;
    background-color:#7d3bfd;
    transition: all 0.25s ease-in-out;
}
.ahover a:hover:after{
    width: 40%;
}
h3{
    font-size: 2.2rem;
    font-weight: 200;
}
.jp h3 {
    font-size: 2.1rem;
    font-weight: 200;
}
h6.subtext{
    font-weight: 200;
    line-height: 24px;
}
.jp .icon-box h3 {
    font-weight: 300;
    color: #000000;
    margin-bottom: 0;
    font-size: 18px;
}
/* extras */

#brand-video{
  cursor: pointer;
  transition: all 0.5s ease;
}
#brand-video:hover #brand-play path{
  fill: #0A0A0B !important;
}
/* floating action button*/
.floatingbutton {
    background: #7d3bfd;
    border-radius: 25px;
    text-align: center;
    color: #fff;
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 2.6667em;
    display: inline-block;
    cursor: default;
    z-index:9999 ;
    padding: 8px 15px;
    line-height: 0;
    cursor: pointer;
}
.floatingbutton span{
    font-size: 14px;
}
.floatingbutton.overlapbutton{
    border-radius: 50%;
    padding: 15px;
}
.floatingbutton svg{
    width: 20px;
    height: 20px;
    fill: #fff;
}
  .floatingbutton span {
    vertical-align: middle;
  }
  .child {
    right: 20px;
    width: 0px;
    height: 0px;
    display: none;
    opacity: 0;
    border-radius: 26px;
    background: #fff;
    position: fixed;
    right: 20px;
    display: inline-block;
    bottom: 20px;
    z-index: 9999;
  }
  .child h2{
    text-align: left;
    font-weight: 300;
    letter-spacing: -0.02em;
    margin: 22px 0 10px 22px;
    font-size: 26px;
  }
  .jp-home .child h2{
    font-size: 20px;
  }
  .backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #8c8c8c;
    opacity: 0.5;
    display: none;
    z-index: 9999;
  }
  .floatingbutton.close{
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    width: initial;
    height: min-content;
    padding: 0;
    background-color: transparent;
  }
  .floatingbutton.close svg{
    width: 14px;
    height: 14px;
    fill: #000;
  }
  .child .hbspt-form label{
    font-size: 12px;
    margin-left: 23px;
    margin-bottom: 0;
    margin-top: 11px;
    display: none;
  }
  .child .hbspt-form .hs-form-required{
      display: none;
  }
  .child .hbspt-form input, .child .hbspt-form textarea, .child .hbspt-form select{
    border: none;
    border-bottom: 1px solid #d7d8da;
    width: 100%;
    font-size: 14px;
    color: #000;
    padding-left: 23px;
    resize: none;
    font-weight: 500;
  }
  .child .hbspt-form select{
    width: calc(100% - 20px);
    border: none;
    padding-left: 20px;
  }
  .child .hs_country_region .input, .child .hs_country_region_new .input{
    border-bottom: 1px solid #d7d8da;
  }
  .child .hs-fieldtype-text, .child .hs_country_region_new{
    height:60px;
  }
  .hs_submit{
    position: absolute;
    z-index: 9999;
    right: 6px;
    bottom: 6px;
  }
  .child .hbspt-form .hs-button{
    background: transparent;
    box-shadow: 0 0 0 0;
    outline: 0;
    border: none;
    width: 120px;
    border-radius: 50px;
    line-height: 48px;
    text-align: left;
    padding-right: 49px;
    cursor: pointer;
    color: #7d3bfd;
    font-weight: 500;
    text-transform: uppercase;
  }
  .child .hbspt-form input:focus, .child .hbspt-form textarea:focus, .child .hbspt-form input{
      outline: none
  }
  
  .child .hs-form-field{
      position: relative;
  }
  .child .hs_error_rollup{
      display: none !important;
  }
  .child input:-webkit-autofill,
  .child input:-webkit-autofill:hover,
  .child input:-webkit-autofill:focus,
  .child input:-webkit-autofill:active,
  .child select:-webkit-autofill,
  .child select:-webkit-autofill:hover,
  .child select:-webkit-autofill:focus,
  .child select:-webkit-autofill:active{
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #000 !important;
    font-weight: 500;
}
.child .hs-error-msg, .child label.hs-error-msg{
    display: block;
    color: #ED1C24;
    margin: 0;
    padding: 0;
    margin-left: -8px;
    font-size: 11px;
    position: relative;
    top: -2px;
}
.child .hs-form{
    margin-top:20px
}
ul.no-list.hs-error-msgs.inputs-list{
    position: relative;
}
ul.no-list.hs-error-msgs.inputs-list li{
    list-style: none !important;
}
ul.no-list.hs-error-msgs.inputs-list:before {
    content: "";
    width: 100%;
    height: 1px;
    background-color: #ed1c24;
    position: absolute;
    display: block;
    left: 0;
    top: -1px;
}
.child ul li::marker{
    color: #7d3bfd !important;
}
/*-----thankyou-----*/
.child .submitted-message{
    margin-top: 175px;
    margin-left: 30px;
}
.child .submitted-message p:first-child{
    margin-bottom: 6px;
}
.child .submitted-message p:first-child strong{
    color: #fff;
    font-size: 48px;
    line-height: 58px;
    font-weight: 300;
}
.child .submitted-message p{
    font-size: 28px;
    font-weight: 200;
    color: #fff;
}
.child.thankyou{
    background-color: #d03036;
}
.child.thankyou .overlapbutton, .child.thankyou h2{
    display: none;
}
.child.thankyou .close svg{
    fill: #fff;
}
/* floating action button*/

/* banner */

#lottie.banner-homepage {
    /*transform: translate3d(-120px, 0px, 0px) scale(1.17)*/
    transform: translate3d(0px, 6px, 0px) scale(1.07);
    will-change: transform;
    width: 620px;
    z-index: 2;
}
#lottie #getstarted, #lottie #getstarted + g,#lottie #getstarted path{
    cursor: pointer;
    transition: all 0.5s ease;
}
#lottie #getstarted:hover path{
    fill: #0A0A0B !important;
}
/*#lottie .ai{
    opacity: 0.8 !important;
}*/
.spectrum-fullwidth {
    background-color: #f7f9fc;
    position: relative;
    z-index: 9;
    top: -40px;
}
.v5.banner h1{
    font-size: 2.4rem;
    margin-bottom: 0;
    line-height: 44px;
    letter-spacing: -0.02em;
    font-weight: 500;
}
.v5.banner h1 .text-gradient-anim{
     font-size: 2.4rem;
    font-weight: 600;
}
.jp-home .v5.banner h1{
    line-height: 46px;
}
.v5.banner i{
    font-size: 14px;
    font-weight: 300;
    line-height: 18px;
    font-style: normal;
}
.v5 .banner_content{
    font-weight: 400;
}
.v5.banner .banner-content{
    line-height: 25px;
    font-size: 15px;
    font-weight: 500;
}
.v5.banner .banner_content{
    font-size: 1.3rem;
}

/* banner */

/* navigation */

nav {
    width: var(--menu-width);
    display: flex;
    transform-style: preserve-3d;
    justify-content: space-evenly;
    position: relative;
    z-index: 2;
    margin: 0px 0 0 auto;
    perspective: 2000px;
    flex-wrap: wrap;
    top: -5px;
}

nav .menu-item, nav .mmenu-text {
    color:#262728;
    transform-style: preserve-3d;
    flex-grow: 1;
    display: flex;
    box-sizing: border-box;
    justify-content: center;
    perspective: 200px;
    letter-spacing: 0.5px;
}
.submenu-arrow{
    position: relative;
}
.submenu-arrow:before{
    display: inline-block;
    margin-left: .15em;
    vertical-align: middle;
    content: "";
    border-top: .26em solid;
    border-right: .26em solid transparent;
    border-bottom: 0;
    border-left: .26em solid transparent;
    position: absolute;
    right: -12px;
    top: 8px;
}

nav .menu-text, nav .menu-text a, nav .mmenu-text a {
    text-decoration: none;
    text-shadow: 0 1px 5px rgba(0,0,0,0.1);
    transition: color 0.1s ease-out;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.02rem;
    color: #262728;
    font-family: 'Roboto', sans-serif;
}

nav .menu-text a:hover, nav .menu-item:hover a {
    color: #7d3bfd;
    
}
nav .menu-item:hover .submenu-arrow:before{
    border-top-color: #7d3bfd;
}

#sub-menu-holder {
    pointer-events: none;
    color: rgba(0,0,0,0.5);
    font-weight: normal;
    padding: 1em;
    position: absolute;
    transition: opacity 2 ease-out;
    transform: rotateX(-25deg) scale(1);
    transform-origin: 50% 7em 0em;
    opacity: 0;
    box-shadow: 0 50px 100px -20px rgba(50,50,93,0.25),0 30px 60px -30px rgba(0,0,0,0.3);
    box-sizing: border-box;
    border-radius: 10px;
    background: white;
    display: block;
    height: 300px;
    width: calc(var(--menu-width) * 1.5);
}

#sub-menu-container {
    position: absolute;
    z-index: -1;
    min-width: 100%;
    top: 40px;
    width: 100%;
}

nav .menu-item:hover ~ #sub-menu-container #sub-menu-holder {
    animation: clipPath 0.25s ease-out 1 forwards;        
    transition: clip-path 0.25s ease-out, left 0.15s ease-out, height 0.15s ease-out;
    opacity: 1;
    right: auto;
}

nav .menu-item:nth-of-type(1):hover ~ #sub-menu-container #sub-menu-holder{
    width: 33em;
    left: -12.9em;
    height: 26.4em;
}
nav .menu-item:nth-of-type(2):hover ~ #sub-menu-container #sub-menu-holder {
    width: 650px;
    left: calc(-10em + 5px);
    height: 11.6em;
}
nav .menu-item.product-global:hover ~ #sub-menu-container #sub-menu-holder {
    width: 397px;
    left: calc(-5em + 66px);
    height: 10.6em;
}
.menu-item:nth-of-type(3) .sub-menu.triple{
    height: 11em;
}

nav .menu-item:nth-of-type(3):hover ~ #sub-menu-container #sub-menu-holder {
    right: -17px;
    height: 11em;
    width: 660px;
}
.nav-en .menu-item:nth-of-type(3):hover ~ #sub-menu-container #sub-menu-holder {
    right: 20px;
    width: 560px;
}
nav .menu-item:nth-of-type(4):hover ~ #sub-menu-container #sub-menu-holder {
    right: -1px;
    height: 17em;
    width: 529px;
}
nav .menu-item:nth-of-type(4):hover ~ #sub-menu-container #sub-menu-holder #sub-menu-bottom{
    width: 250px;
    right: 0;
    left: initial;
    height: 100%;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    background-size: auto 100%;
    opacity: 0.1 !important;
    mix-blend-mode: hard-light;
    /* background-image: url("https://near.com/media/images/v4/whatsnew.jpg"); */
}
.menu-item .sub-menu.triple {
    min-width: 41.25em;
    height: 13em;
    display: grid;
    padding: 1.5em 2.5em;
    grid-template-columns: 33.3% 33.3% 33.3%;
    padding-bottom: 10px;
    padding-right: 10px;
    transform: translateX(8px);
}
.menu-item .sub-menu.productnav {
    min-width: 26em;
    height: 13em;
    display: grid;
    padding: 1.5em 2.5em;
    grid-template-columns: 60% 40%;
    padding-bottom: 10px;
    padding-right: 10px;
    transform: translateX(16px);
    padding-top: 1.8em !important;
}
.nav-fr .menu-item .sub-menu.productnav{
    width: 41em;
    grid-template-columns: 33.33% 33.33% 33.33%;
}

nav .menu-item.resources-section .sub-menu.triple{
    grid-template-columns: 30.6% 34.7% 34.7%;
}
nav .menu-item .sub-menu.double.tripletwo{
    grid-template-columns: 34% 34% 32%;
    min-width: 36em;
}
.menu-item .sub-menu {
    position: absolute;
    top: 13px;
    padding-top: 2.2em !important;
    color: rgba(0,0,0,0.5);
    border-radius: 10px;
    min-width: 27.5em;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 999;
    margin-left: -5em;
    clip-path: inset(0 10em 10em 15em);
    opacity: 0;
    font-weight: initial;
    padding: 1.5em;
    transition: all 0.25s ease-out, opacity 0.25s ease-in, margin-left 0.25s ease-out, clip-path 0.15s ease-out;
}
nav .menu-item .sub-text{
    color: #5C5C5C;
    font-size: 12px;
    text-transform: initial;
    padding-left: 30px;
}

.menu-item .sub-menu.double {
    min-width: 34em;
    height: 26em;
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 1.5em 0 1.5em 2em;
    transform: translateX(-5px);
}
.nav-jp .menu-item .sub-menu.double{
    height: 27em;
    top: 16px;
}
.aboutus-section.menu-item .sub-menu.triple {
    min-width: 34em;
    height: 18em;
    display: grid;
    padding: 1.5em 0 0.5em 2em;
    grid-template-columns: 34% 35% 30%;
    transform: translateX(-33px);
}
.nav-jp .aboutus-section.menu-item .sub-menu.triple {
    min-width: 34em;
    height: 18em;
    display: grid;
    padding: 2.4em 0 0.5em 2.2em !important;
    grid-template-columns: 34% 35% 30%;
    transform: translateX(-32px);
}
.aboutus-section.menu-item .title{
    font-size: 14px;
}
.menu-item:hover .sub-menu {
    pointer-events: all;
    clip-path: inset(0 0 0 0);
}
.aboutus-section .triple .bottom-container{
    grid-area: 1 / 4 / 4 / 4;
    margin-left: 22px;
    font-size: 14px;
}
.aboutus-section .triple .bottom-container h2{
    margin-top: 23px;
    font-size: 19px;
    font-weight: 600;
}

.aboutus-section .triple .bottom-container a.btn{
    float: none;
    right: initial;
    left: 0;
}
.aboutus-section.menu-item .icon-box{
    padding-left: 0;
    padding-right: 0;
}
.menu-text:after {
    transition: bottom 0.25s ease-out, opacity 0.01s ease-out 0.01s;
    opacity: 0;
    content: '';
    position: absolute;
    pointer-events: none;
    bottom: -5em;
    left: calc(50% - 10px);
    border-color: transparent transparent white transparent;
    border-width: 10px;
    border-style: solid;
}
.aboutus-section .menu-text:after{
    left: calc(40% - 10px);
}

.menu-item:hover .menu-text:after {
    bottom: -12px;
    opacity: 1;
    transition: bottom 0.25s ease-out, opacity 0.01s ease-out 0.15s;
}
.menu-item:hover .sub-menu {
    opacity: 1;
    margin-left: 0;
}

.menu-item:hover ~ #sub-menu-container #sub-menu-holder  {
    transition: transform 0.25s ease-out, opacity 0.25s ease-out, clip-path 0.25s ease-out;
}

@keyframes clipPath {
    0% {
        opacity: 0;
    }
    100% {
        transform: rotateX(0deg) scale(1);
        top: -10px;
        opacity: 1;        
    }
}

/* Menu specific */
.menu-item .title {
    font-weight: 400;
    color: #7d3bfd;
    margin: 0 0 0.25em 0;
    font-size: 15px;
    line-height: 18px;
    padding-left: 30px;
}
.nav-fr .product-section.menu-item .sub-text, .nav-fr .product-section.menu-item .title{
    padding-left: 25px;
}
.menu-item .icon-box * {
    transition: all 0.1s ease-out;
    position: relative;
}
.menu-item .icon-box.space {
    margin-bottom: 1.25em;
}
.menu-item .icon-box.flat {height: 1.5em;margin-bottom: 0.5em;}
.menu-item .icon, .menu-item .text {
    float: left;
    color: #9ea9af;
    position: relative;
    width: 100%;
    padding-left: 0px;
}

.menu-item .icon-box .text:after{
    content: "";
    position: absolute;
    left: 30px;
    bottom: -6px;
    height: 1px;
    width: 0%;
    background-color:#7d3bfd;
    transition: all 0.25s ease-in-out;
}
.menu-item .icon-box:hover .text:after{
    width: 20%;
}
.menu-item .icon {
    color: rgb(44 70 86);
    font-size: 1.25em;
    margin: 0 5px 0 0;
    position: absolute;
    left: 0;
    top: 2px;
    width: 22px;
    height: 22px;
}
.menu-item .icon svg, .menu-item .icon .image-icon{
    width: 22px;
    height: 22px;
}
.product-section.menu-item .icon .image-icon, .product-section.menu-item .icon svg{
    width: 35px;
    height: 35px;
}
.nav-fr .product-section.menu-item .icon .image-icon, .nav-fr .product-section.menu-item .icon svg{
    width: 30px;
    height: 30px;
}
.product-section.menu-item .icon svg.pinnacle{
    width: 26px;
    height: 26px;
}
/* .product-section.menu-item .sub-menu.triple a{
    height: 40px !important;
} */
.product-section.menu-item .icon{
    left: -14px;
}
.menu-item .icon-box {
    cursor: pointer;
}
.menu-item .icon-box {
    float: left;
    width: 100%;
    margin: 0;
    row-gap: 0;
    line-height: 1em;
}

.menu-item .icon-box .text i {
    clip-path: inset(0 100% 0 0);
    font-size: 0.75em;
    position: relative;
    top: -1px;
}

/* Base Icon Style */


#sub-menu-bottom {
    background: #d4e3ea70;
    position: absolute;
    bottom: 0;
    opacity: 0;
    transition: all 0.25s ease-out, height 0.1s ease-out;
    left: 0;
    width: 100%;
    height: 5em;
}
nav .menu-item:nth-of-type(2):hover ~ #sub-menu-container #sub-menu-bottom {
    background: #d4e3ea70;
    position: absolute;
    bottom: 0;
    opacity: 0;
    transition: all 0.25s ease-out, height 0.1s ease-out;
    left: 0;
    width: 100%;
    height: 5em;
}
nav .menu-item.product-global:hover ~ #sub-menu-container #sub-menu-bottom {
    background: #d4e3ea70;
    position: absolute;
    bottom: 0;
    opacity: 0;
    transition: all 0.25s ease-out, height 0.1s ease-out;
    left: initial;
    width: 11em;
    height: 100%;
    right: 0;
}
nav .menu-item:nth-of-type(3).highlight:hover ~ #sub-menu-container #sub-menu-holder #sub-menu-bottom {
    height: 4.8em;
}
.nav-en .menu-item:nth-of-type(3).highlight:hover ~ #sub-menu-container #sub-menu-holder #sub-menu-bottom,.nav-jp .menu-item:nth-of-type(3).highlight:hover ~ #sub-menu-container #sub-menu-holder #sub-menu-bottom,.nav-fr .menu-item:nth-of-type(3).highlight:hover ~ #sub-menu-container #sub-menu-holder #sub-menu-bottom {
    width: 176px;
    right: 0;
    left: initial;
    height: 100%;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    background: #d4e3ea70;
}

.resources-section .triple .bottom-container{
    top: 29px;
}

.resources-section .triple .bottom-container a{
    right: 0.5em;
} 
.resources-section .sub-menu.triple a.icon-box{
    padding-left: 0;
} 
.bottom-container {
    grid-area: 5 / -3 / 5 / 3;
    padding-left: 10px;
    color: #3a5260;
    font-weight: 500;
    position: relative;
    top: 27px;
    font-size: 14px;
}

.triple .bottom-container {
    grid-area: 2 / -4 / 2 / -1;
    margin-top: 0;
    padding-left: 0;
    top: 15px;
}
.productnav .bottom-container,  .double.tripletwo .bottom-container{
    grid-area: 2 / -2 / 1 / -1;
    margin-top: 0;
    padding-left: 0;
  
    top: 26px;
    left: -6px;
}
.double.tripletwo .bottom-container{
    top: 15px;
    left: 6px;
}
.double.tripletwo .bottom-container .btn-custom-primary{
    float: none;
    right: initial;
    left: 29px;
    bottom: -22px;
}
.double.tripletwo .bottom-container .icon.custom-bg{
    left: initial;
    right: -68px;
    width: auto;
    height: auto;
    top: -15px;
    opacity: 0.3;
    z-index: -1;
}
.double.tripletwo .bottom-container .icon.custom-bg svg{
    width: auto;
    height: 140px;
}
.nav-fr .productnav .bottom-container {
    grid-area: 2 / -4 / 2 / -1;
    margin-top: 0;
    padding-left: 0;
    top: 25px;
    left: -4px;
}
.nav-fr .productnav .bottom-container .icon{
    position: initial;
    display: inline-block;
    width: auto;
    margin-top: 2px;
    padding-right: 7px;
}
.nav-fr .productnav .bottom-container .icon-box{
    background: none;
    margin-left: 14px;
    padding-right: 0;
    padding-bottom: 8px;
    display: inline-block;
}
/*.nav-fr .menu-item .productnav .bottom-container .sub-text, .nav-fr .menu-item .productnav .bottom-container .title{
    text-align: left;
}*/
.nav-fr .menu-item .productnav .bottom-container .sub-text{
    width: 100%;
    margin-left: 0;
}
.nav-fr .menu-item .productnav .bottom-container .icon-box .text:after{
    left: 41px;
}
.menu-item .productnav .icon-box .text:after{
    left: 26px;
}
.menu-item .productnav .bottom-container .title, .menu-item .productnav .bottom-container .sub-text{
    padding: 0;
    text-align: center;
}
.nav-fr .menu-item .productnav .bottom-container .title, .nav-fr .menu-item .productnav .bottom-container .sub-text{
    padding: 0;
    text-align: left;
    margin: 0;
}
.menu-item .productnav .bottom-container .sub-text{
    width: 80%;
    margin: 0 auto;
}
.menu-item .productnav .btn-custom-primary{
    right: 1.4em;
}
.productnav .bottom-container a{
    width: 89%;
    bottom: -22px;
}
.triple .bottom-container a{
    position: relative;
    top: -8px;
}
.triple .bottom-container h5{
    font-size: 14px;
    font-weight: 600;
    margin-top: 20px;
}

.top-container {
    grid-area: 1 / -3 / 1 / 3;
    margin: 0 0 2em 0;
}

.bottom-container a {
    float: right;
    background: #7d3bfd;
    padding: 0.5em 1em;
    border-radius: 6px;
    position: absolute;
    color: #ffffff !important;
    font-weight: bold;
    text-decoration: none;
    right: 1.5em;
    bottom: -2px;
    font-weight: 400;
    font-size: 14px;
}

/* .bottom-container a:hover {
    background: linear-gradient(90deg, #8ea4b136, #a3b5bf33);
} */

.sub-menu h3 {
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgb(44 70 86 / 68%);
    margin: 0.75em 0;
}

.sub-menu .box a {
    width: 100%;
    float: left;
    font-size: 1em;
    line-height: 1.75em;
    color: #7a8a94;
    text-decoration: none;
}

.sub-menu .box a:hover {
    color: rgb(44 70 86);
}

.box {
    margin: 0 0 3em 0;
}

.icon.big i {
    font-size: 1.25em;
    top: 0.2em;
}
nav .menu-item.highlight:hover ~ #sub-menu-container #sub-menu-holder #sub-menu-bottom { opacity: 1; }
nav .menu-item:nth-of-type(5):hover ~ #sub-menu-container #sub-menu-holder #sub-menu-bottom {
    opacity: 0;
}
.mobilemock-hide{
    overflow: hidden;
    width: 510px;
    transform: translate(10px, -10px) scale(1.12);
}
/* mockup */
.webmock{
    background-image: url("../images/fr/creatives/desktop-mockup.png");
    width: 765px;
    height: 450px;
}
.webmocktwo{
    background-image: url("../images/fr/creatives/Mock-demo.png");
    width: 495px;
    height: 400px;
    background-size: 100% auto;
}
.bigmat{
    width: 144px;
        position: absolute;
        top: 128px;
        right: 89px
}
.mobilemoctwo{
    background-image: url("../images/fr/creatives/mobile-mockup.png");
    width: 765px;
    height: 450px;
    background-size: 100% auto;
    position: relative;
}
.mobilemoctwo .cone, .mobilemoctwo .ctwo, .mobilemoctwo .cthree{    
    position: absolute;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.mobilemoctwo .cthree{
    width: 184px !important;
    right: 26px;
    bottom: 88px;
}
.mobilemoctwo .cone{    
    width: 185px !important;
    top: 40px;
    left: 30px;
}
.mobilemoctwo .ctwo{
    width: 183px !important;
    left: 38.4%;
    top: 46%;
}
.imgLeft .webmock, .mobilemoctwo{
    background-position: right;
}

.product-display-carousel .carousel-item .webmock img{
    width: 136px;
    margin-left: 44%;
    padding-top: 20%;
    border-radius: 0;
    box-shadow: none;
}
.product-display-carousel .imgLeft .carousel-item .webmock img{
    width: 191px;
    margin-right: 23.3%;
    padding-top: 18.3%;
}
.mobilemock{
    background-image: url("../images/fr/creatives/mobile-phone-mockup.png");
    width: 210px;
    height: 370px;
    position: absolute;
    top: 120px;
    left: -90px;
}
.dc-creative{
    width: 166px;
    top: 31.6%;
    left: 5.3%;
    position: absolute;
    border: 1px solid #e9e9e9;
}
.dc-creativemobile{
    position: absolute;
    width: 143px;
    left: 15.4%;
    top: 20%;
}
.innerpagemock{
    right: 0;
    left: inherit;
    top: 50px;
}
.product-display-carousel .carousel-item .mobilemock img{
    width: calc(100% - 32px);
    border-radius: 0;
    box-shadow: none;
    padding-top: 54px;
    padding-left: 26px;
}
.product-display-carousel .imgLeft .carousel-item .mobilemock{
    top: 130px;
    left:inherit;
    right: -50px;
}
.product-display-carousel .imgLeft .carousel-item .mobilemock img{
    padding-left: inherit;
    padding-right: 33px;
    padding-top: 62px;
}
.product-display-carousel .carousel-item .webmock.thridmock img {
        width: 84px;
        margin-left: 53.5%;
        padding-top: 81px;
}
.product-display-carousel .carousel-item .mobilemock.thridmock img {
    padding-top: 80px;
}
.product-display-carousel .imgLeft .carousel-item .webmock.fourthmock img {
    width: 123px;
    margin-right: 23%;
    padding-top: 137px;
}
.product-display-carousel .imgLeft .carousel-item .mobilemock.fourthmock img {
    padding-top: 56px;
    width: 183px;
}

#info-box {
    position: absolute;
    bottom: 2em;
    right: 2em;
}

#info-box ul {
    list-style: none;
}
#info-box a {
    color: white;
    text-decoration: none;
    text-align: right;
    padding: 0.5em 0;
    transition: all 0.1s ease-out;
    display: block;
    text-transform: uppercase;
    font-size: 1.25em;
    font-weight: 900;
    letter-spacing: 1px;
}
#info-box a:hover {
    color: rgba(255,255,255,0.5);
}


/** Nav FR **/
.nav-fr .menu-item .icon {
    top: 4px;
}
.nav-fr .menu-item .title{
    text-transform: none !important;
}
.nav-fr .product-section.menu-item .allspark .icon svg{
    top: -28px;
    width: 44px;
    height: 44px;
    margin-left: calc(50% - 22px);
}
.nav-fr .menu-item .icon-box.allspark .text:after{
    left: calc(50% - 20px);
}
.nav-fr .allspark .text{
    padding-left: 34px;
}
.nav-fr .menu-item:nth-of-type(3) .sub-menu.triple{
    padding-left: 25px
}
.nav-fr .product-section .triple .bottom-container a{
    top: 36px;
    width: 85%;
    margin-left: 0px;
    right: 15px;
}
.nav-fr .product-section .triple .bottom-container .allspark .title, .nav-fr .product-section .triple .bottom-container .allspark .sub-text{
    padding-left: 0;
}
.nav-fr .menu-item:nth-of-type(1):hover ~ #sub-menu-container #sub-menu-holder {
    left: -13.9em;
    height:23.4em;
}
.nav-fr nav .menu-item:nth-of-type(2):hover ~ #sub-menu-container #sub-menu-holder {
    width: 630px;
    left: calc(-10em + 5px);
    height: 11.6em;
}
.nav-fr .product-section .sub-menu.double {
    height: 24em;
    transform: translateX(14px);
}
.nav-fr nav .menu-item:nth-of-type(2):hover ~ #sub-menu-container #sub-menu-holder #sub-menu-bottom{
    position: absolute;
    bottom: 0;
    transition: all 0.25s ease-out, height 0.1s ease-out;
    left: 0;
    width: 100%;
    height: 5em;
}
.nav-fr .product-section .btn{
    width: 170px;
    color: #fff;
    height: 40px;
    margin-top: -5px;
    margin-left: 0;
    bottom: 0;
    left: 0;
    right: inherit;
    float: none;
    top: -7px;
    line-height: 27px;
}
.nav-fr .menu-item.product-section .icon-box{
    height:auto;
    width: 390px;
}
.nav-fr .product-section .triple .bottom-container {
    grid-area: 1 / 3 / 1 / 3;
    left: -3px;
    top: 40px;
    padding: 0;
}

.nav-fr .bottom-container .allspark .text{
    padding: 0;
    float: none;
    text-align: center;
    margin-left: -3px;
}
.nav-fr .bottom-container .allspark .text .icon{
    position: absolute;
    top: -19px;
    left: calc(50% - 22px);
    display: block;
    padding: 0;
    margin: 0;
    width: 44px;
    height: auto;
}
.nav-fr .product-section .sub-menu.triple{
    min-width: 38em;
    height: 13em;
    grid-template-columns: 31.3% 36.3% 35.6%;
    padding-left: 6px;
    padding-bottom: 8px;
}
.nav-fr .sub-menu.double{
    height: 26em;
    transform: translateX(-22px);
}
nav .resources-menu .sub-menu.double {
    height: 13em;
    transform: translateX(22px);
    min-width: 31em;
}
.nav-fr .resources-menu .sub-menu.double {
    height: 13em;
    transform: translateX(7px);
    min-width: 28em;
}
.nav-fr .sub-menu.double > a{
    padding-bottom: 0;
}
.nav-fr .product-section .sub-menu.double{
    height: 20.7em;
}
.nav-fr .product-section .bottom-container{
    top: 30px;
    left: -7px;
}
.nav-fr .bottom-container .allspark{
    display: inline-block;
    background: transparent;
    width: auto;
}
.nav-fr .resources-section .triple .bottom-container a {
    right: 1.5em;
}
.nav-fr .bottom-container{
    top: 3px;
}
.nav-fr .bottom-container a {
    bottom: 22px;
}
.nav-fr .product-section .sub-menu a{
    position: relative;
}
.nav-fr .product-section .sub-menu a.allspark{
    grid-area: 4 / 1 / 4 / 3;
    top: 16px;
    left: 0px;
    padding: 0;
    width: 100%;
}
/*.nav-fr .product-section .sub-menu a:nth-child(5):before, .nav-fr .product-section .sub-menu a:nth-child(6):before{
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #f4f4f4;
} */
.nav-fr .menu-item:nth-of-type(3).highlight:hover ~ #sub-menu-container #sub-menu-holder #sub-menu-bottom{
    display: none;
}
.nav-fr .menu-item:nth-of-type(3):hover ~ #sub-menu-container #sub-menu-holder {
    right: 130px;
    width: 420px;
}
.nav-fr .menu-item:nth-of-type(4):hover ~ #sub-menu-container #sub-menu-holder {
    right: 42px
}
.nav-fr .aboutus-section.menu-item .sub-menu.triple{
    min-width: 35em;
    grid-template-columns: 34% 35% 31%;
    transform: translateX(-50px);
}

/** Nav JP **/

.nav-jp .menu-item .sub-menu.double{
    transform: translateX(-28px);
}
.nav-jp .menu-item:nth-of-type(1):hover ~ #sub-menu-container #sub-menu-holder{
    height: 26.2em;
    left: -13.9em;
}

.nav-jp .menu-item:nth-of-type(3):hover ~ #sub-menu-container #sub-menu-holder {
    right: 120px;
    height: 10.5em;
    width: 430px;
}
.nav-jp .menu-item:nth-of-type(3).highlight:hover ~ #sub-menu-container #sub-menu-holder #sub-menu-bottom{
    display: none;
}
.nav-jp .menu-item.product-section .sub-menu.triple{
    grid-template-columns: 34.7% 30.6% 34.7%;
}
.nav-jp .sub-menu a.icon-box {
    padding: 0.4rem !important;
}

/* .nav-jp .resources-section .triple .bottom-container{
    padding-left: 15px;
} */
.nav-jp .solutions-menu .bottom-container {
    top: 29px;
    padding-left: 5px;
}
.nav-jp .solutions-menu .bottom-container a{
    bottom: 10px;
    right: 2.5em;
}
.nav-jp .product-section .triple .bottom-container{
    top: 22px;
    left: -7px;
}
.nav-jp .menu-item.resources-section .sub-menu.triple {
    grid-template-columns: 28.2% 36.8% 34.8%;
    transform: translateX(19px);
}
.nav-jp .resources-menu .sub-menu.double {
    height: 13em;
    transform: translateX(22px);
    min-width: 28em;
}
/* Navigation */


/* spectrum */
.w400{
    font-weight: 500 !important;
}
.area{
    width: 100%;
    height:100vh;
   
}
.spectrun-content-list li a{
    color: #7D3BFD;
}
.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background-image:url("../images/homepage/p1.png") ;
    background-repeat: no-repeat;
    background-size: 100%;
    animation: animate 25s linear infinite;
    bottom: -150px;
    
}

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
    background-image:url("../images/homepage/p2.png") ;
    background-repeat: no-repeat;
    background-size: 100%;
}


.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
    background-image:url("../images/homepage/p3.png") ;
    background-repeat: no-repeat;
    background-size: 100%;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
    background-image:url("../images/homepage/p2.png") ;
    background-repeat: no-repeat;
    background-size: 100%;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
    background-image:url("../images/homepage/p3.png") ;
    background-repeat: no-repeat;
    background-size: 100%;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
    background-image:url("../images/homepage/p2.png") ;
    background-repeat: no-repeat;
    background-size: 100%;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}
.circles li:nth-child(11){
    left: 75%;
    width: 80px;
    height: 80px;
    animation-delay: 2s;
    background-image:url("../images/homepage/p2.png") ;
    background-repeat: no-repeat;
    background-size: 100%;
}


.circles li:nth-child(12){
    left: 40%;
    width: 20px;
    height: 20px;
    animation-delay: 1.8s;
    animation-duration: 12s;
}

.circles li:nth-child(13){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 4.2s;
    background-image:url("../images/homepage/p3.png") ;
    background-repeat: no-repeat;
    background-size: 100%;
}

.circles li:nth-child(14){
    left: 90%;
    width: 60px;
    height: 60px;
    animation-delay: 6s;
    animation-duration: 18s;
}

.circles li:nth-child(15){
    left: 25%;
    width: 20px;
    height: 20px;
    animation-delay: 2.5s;
    background-image:url("../images/homepage/p2.png") ;
    background-repeat: no-repeat;
    background-size: 100%;
}

.circles li:nth-child(16){
    left: 5%;
    width: 110px;
    height: 110px;
    animation-delay: 1.5s;
}

.circles li:nth-child(17){
    left: 65%;
    width: 150px;
    height: 150px;
    animation-delay: 4.2s;
    background-image:url("../images/homepage/p3.png") ;
    background-repeat: no-repeat;
    background-size: 100%;
}

.circles li:nth-child(18){
    left: 20%;
    width: 25px;
    height: 25px;
    animation-delay: 8.2s;
    animation-duration: 45s;
}

.circles li:nth-child(19){
    left: 40%;
    width: 15px;
    height: 15px;
    animation-delay: 9s;
    animation-duration: 35s;
    background-image:url("../images/homepage/p2.png") ;
    background-repeat: no-repeat;
    background-size: 100%;
}

.circles li:nth-child(20){
    left: 95%;
    width: 150px;
    height: 150px;
    animation-delay: 10s;
    animation-duration: 11s;
}


@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}
/* Spectrum */

/* flower bracket style */

.el {
    display: inline-flex;
    overflow: hidden;
}

.el>div {
    width: 50%;
    height: 1px;
    background: #bdbdbd;
    margin: 21px 28px;
    position: relative;
}

.el>div:before,
.el>div:after {
    content: '';
    position: absolute;
    width: 31px;
    height: 31px;
    border-top-left-radius: 200px;
    border: 1px solid #bdbdbd;
    border-right: none;
    border-bottom: none;
}

.el>div:after {
    right: -30px;
}

.right:after {
    transform: rotate(-180deg);
    top: -30px;
}

.left:before {
    transform: rotate(-90deg);
    top: -30px;
    left: -30px;
}

.left:after {
    transform: rotate(90deg);
}

.right:before {
    left: -30px;
}


/* flower bracket style */


/* header style */

h3 {
    color: #3f403f;
}

.sub-content {
    font-size: 22px;
    font-weight: 300;
    line-height: 20px;
}
.gradient-meter-container{
    transform: all 1s ease;
}
.gradient-meter-container h3 {
    font-size: 18px;
    font-weight: 300;
    padding-left: 20px;
    padding-right: 20px;
    position: relative;
}
.gradient-meter-container h3 {
    font-size: 16px;
}
.gradient-meter-container h3:first-child:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 3px;
    height: 12px;
    width: 12px;
    background: url("../images/homepage/arrow.svg");
    transform: rotate(180deg);
    
}

.gradient-meter-container h3:last-child:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 3px;
    height: 12px;
    width: 12px;
    background: url("../images/homepage/arrow.svg");
}

.gradient-meter-container ul.spectrun-content-list:before {
    content: "";
    position: absolute;
    height: 30px;
    width: 100%;
    top: 0;
    background-image: url("../images/homepage/gradient.webp");
    -webkit-animation: hue 40s infinite ease-in-out;
    background-size: 200%;
}
@-webkit-keyframes hue {
    0% {
        background-position: 0 0;
        background-size: 100%;
    }
    10% {
        background-position: 10% 30%;
        background-size: 180%;
    }
    20% {
        background-position: 20% 50%;
        background-size: 400%;
    }

    30% {
        background-position: 50% 80%;
        background-size: 350%;
    }

    40% {
        background-position: 80% 20%;
        background-size: 580%;
    }
   
    50%{
        background-position: 20% 40%;
        background-size: 420%;
    }

    65% {
        background-position: 100% 10%;
        background-size: 340%;
    }
    
    75% {
        background-position: 30% 20%;
        background-size: 270%;
    }

    85% {
        background-position: 60% 70%;
        background-size: 440%;
    }

    100% {
        background-position: 0% 0%;
        background-size: 100%;
    }
}
@-webkit-keyframes hue1 {
    0% {
        background-position: 0 0;
        background-size: auto 100%;
    }
    10% {
        background-position: 10% 30%;
        background-size: auto 180%;
    }
    20% {
        background-position: 20% 50%;
        background-size: auto 400%;
    }

    30% {
        background-position: 50% 80%;
        background-size: auto 350%;
    }

    40% {
        background-position: 80% 20%;
        background-size: auto 580%;
    }
   
    50%{
        background-position: 20% 40%;
        background-size: auto 420%;
    }

    65% {
        background-position: 100% 10%;
        background-size: auto 340%;
    }
    
    75% {
        background-position: 30% 20%;
        background-size: auto 270%;
    }

    85% {
        background-position: 60% 70%;
        background-size: auto auto 440%;
    }

    100% {
        background-position: 0% 0%;
        background-size: auto 100%;
    }
}
.gradient-meter-container ul {
    position: relative;
    list-style: none;
    padding: 0;
    margin-top: 10px;
    padding-top: 40px;
    align-items: center;
}

.gradient-meter-container li {
    flex: 1;
    text-align: center;
    font-weight: 400;
}
.gradient-meter-container .equalalign li {
    flex: none;
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    font-weight: 400;
}

.gradient-meter-container li span {
    position: relative;
    bottom: 1px;
    color: #4b7eb8 !important;
    right: 5px;
    font-size: 20px;
    font-weight: 300;
    -webkit-text-fill-color: #4b7eb8 !important;
}

.mob-add{
    display: none;
}

.spectrum-logo svg.icon {
    max-width: 74px;
    max-height: 50px;
    margin: auto;
    vertical-align: middle;
    display: inline-block;
}
.spectrum-logo li:last-child img{
    max-width: 80px;
}

.spectrum-logo {
    background: #fff;
    box-shadow: 0px 0px 50px 0px rgb(0 0 0 / 30%);
    border-radius: 10px;
    padding: 20px 0px !important;
    margin: 0;
}

.spectrum-c1{
    font-size: 18px;
}
.spectrum-c2{
    font-weight: 400;
}
/* header style */


/* resources */

.MultiCarousel {
    float: left;
    /* overflow: hidden; */
    padding: 15px;
    width: 100%;
    position: relative;
}

.MultiCarousel .MultiCarousel-inner {
    transition: 1s ease all;
    float: left;
    left: -10px;
    position: relative;
}

.MultiCarousel .MultiCarousel-inner .item {
    position: relative;
    float: left;
    
}
.MultiCarousel .MultiCarousel-inner .item.dark h4,  .MultiCarousel .MultiCarousel-inner .item.dark p{
    color: #000;
}
.MultiCarousel .MultiCarousel-inner .item>a {
    background-blend-mode: overlay;
    margin: 10px 15px;
    border-radius: 5px;
    overflow: hidden;
    display: block;
    min-height: 240px;
    background-size: cover !important;
    position: relative;
    transition: all .2s ease-in-out;
    -webkit-box-shadow: 0 8px 8px 0 rgb(0 0 0 / 16%);
    box-shadow: 0 8px 8px 0 rgb(0 0 0 / 16%);
    top: 0;
}

.MultiCarousel .MultiCarousel-inner .item>a:before{
    width: 100%;
    height: 80px;
    content: "";
    position: absolute;
    left: 0;
    bottom:0;
    background:#fff;
    z-index: 0;
}
.MultiCarousel .MultiCarousel-inner .item>a span{
    top: 72%;
}
/* .MultiCarousel .leftLst,
.MultiCarousel .rightLst {
    float: right;
} */
.MultiCarousel:before{
    position: absolute;
    left: -500px;
    top: 0;
    width: 500px;
    height: 100%;
    content: "";
    background-color: #fff;
    z-index: 1;
}
.MultiCarousel:after{
    position: absolute;
    right: -500px;
    top: 0;
    width: 500px;
    height: 100%;
    content: "";
    background-color: #fff;
    z-index: 1;
}
.resources-section .row{
    position: relative;
}
.resources-section .row:before{
    position: absolute;
    left: 0;
    top: 20%;
    width: 220px;
    height: 80%;
    content: "";
    background-color: #fff;
    z-index: 1;
    opacity: 0.7;
}
.resources-section .row:after{
    position: absolute;
    right: 0;
    top: 20%;
    width: 234px;
    height: 80%;
    content: "";
    background-color: #fff;
    z-index: 1;
    opacity: 0.7;
}

.MultiCarousel .leftLst{
    left: -40px;
    z-index: 2;
}
.MultiCarousel .rightLst{
    right: -30px;
}
.MultiCarousel .leftLst svg,
.MultiCarousel .rightLst svg {
    fill: #fff;
    width: 12px;
    height: 24px;
}
/* .MultiCarousel .leftLst:before{
    position: absolute;
    left: 24px;
    top: -90px;
    width: 212px;
    height: 270px;
    content: "";
    background-color: #fff;
    z-index: 0;
    opacity: 0.9;
    mix-blend-mode: color;
}
.MultiCarousel .rightLst:before{
    position: absolute;
    left: 24px;
    top: -90px;
    width: 212px;
    height: 270px;
    content: "";
    background-color: #fff;
    z-index: 0;
    opacity: 0.9;
    mix-blend-mode: color;
} */
.MultiCarousel .leftLst svg {
    transform: rotate(180deg);
}

.MultiCarousel .btn-primary {
    background-color: #fff;
    transition: all .2s ease-in-out;
    border: none;
    border-radius: 50px;
    padding: 20px;
    width: 64px;
    box-shadow: 4px 6px 14px rgb(160 160 182 / 32%);
    position: absolute;
    top: calc(50% - 12px);
    z-index: 2;
}

.MultiCarousel .btn-primary:hover {
    opacity: 1;
}

.MultiCarousel .leftLst.over,
.MultiCarousel .rightLst.over {
    pointer-events: none;
    border: none;
    opacity: 0.3;
}

.MultiCarousel h4 {
    color: #3f403f;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    z-index: 1;
    margin-bottom: 0;
}

.MultiCarousel p {
    font-size: 12px;
    color: #fff;
    line-height: 15px;
    z-index: 1;

}
.banner-mobile{
    display: none;
}
.MultiCarousel .item>a:hover {
    top: -10px;
}
.MultiCarousel .item>a h5:before{
    font-weight: 400 !important;
  color: #ffffff;
  font-size: 11px;
  display: inline-block;
  padding: 3px 6px;
  border-radius: 4px;
  top: 15px;
  left: 15px;
  position: absolute;
}
.MultiCarousel .item>a.videos h5:before{
  background-color:#8cbecf;
  content: "Product Hub/Videos"
}
.MultiCarousel .item>a.case-studies h5:before{
  background-color:#948991;
  content: "Case Study"
}
.MultiCarousel .item>a.case-studies.videos h5:before{
  background-color:#948991;
  content: "Case Study/Video"
}
.MultiCarousel .item>a.videos h5:before{
  background-color:#bd4036;
  content: "Video"
}
.MultiCarousel .item>a.ebooks h5:before{
  background-color:#f2b51c;
  content: "eBook & Whitepaper"

}
.MultiCarousel .item>a.data-stories h5:before{
  background-color:#46c9ff;
  content: "Data Story"

}
.MultiCarousel .item>a.product-hub h5:before{
  background-color:#0957db;
  content: "Product Hub"
}
.MultiCarousel .item>a.research-insights h5:before{
  background-color:#7e9d1c;
  content: "Research Insights"
}
.MultiCarousel .item>a.webinars h5:before{
  background-color:#23CF5F;
  content: "Webinars & Podcasts"
}
.MultiCarousel .item>a.research-insights.whitepapers h5:before{
  background-color:#69D4D9;
  content: "Whitepaper"
}

/* resources */


/* whats new */

.vert .carousel-item-next.carousel-item-left,
.vert .carousel-item-prev.carousel-item-right {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.vert .carousel-item-next,
.vert .active.carousel-item-right {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100% 0);
}

.vert .carousel-item-prev,
.vert .active.carousel-item-left {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}

/* #whatsnew {
    width: calc(100% - 102px);
} */

#whatsnew .carousel-item {
    height: 100%;
    min-height: initial;
    padding: 18px 24px 15px 24px;
    font-size: 12px;
    line-height: 18px;
    color: #585858;
}
#whatsnew .carousel-item p{
    font-size: 16px;
    line-height: 20px;
    color: #171717;
    margin-bottom: 0;
    font-weight: 400;
}
#whatsnew .carousel-item p b{
    font-weight: 600;
}

#whatsnew .carousel-item.pinnacle{
    background: url("../images/whatsnew/pinnacle.webp");
    background-size: cover;
}
#whatsnew .carousel-item.merger{
    background: url("../images/whatsnew/merger.webp");
    background-size: cover;
}
.whatsnew-section {
    background: rgb(255 255 255 / 95%);
    border-radius: 4px;
    box-shadow: 0px 0px 40px rgb(0 0 0 / 20%);
    position: absolute;
    bottom: 36%;
    padding: 10px 20px;
}

.whatsnew-section h4 {
    padding: 0 4px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #000;
    text-transform: uppercase;
}

#whatsnew .carousel-inner {
    height: 100%;
    position: relative;
}

#whatsnew .carousel-inner::after {
    display: none;
}

#whatsnew svg {
    width: 14px;
    height: 14px;
    position: absolute;
    right: 20px;
    top: calc(50% - 5px);
    fill: #7d3bfd;
}


/* whats new */


/* overflow container */

[class^="extend-"] img {
    display: block;
    width: 100%;
    height: auto;
}

.imgLeft {
    direction: rtl;
}

.imgLeft>img {
    position: absolute;
    right: 0;
}

.imgRight {
    direction: ltr;
}

.imgRight>img {
    position: absolute;
    left: 0;
}

.product-display-carousel .carousel-item {
    min-height: initial;
    height: auto;
}

.product-display-carousel .carousel-inner {
    border-radius: 10px;
    box-shadow: 0 0 40px rgb(0 0 0 / 30%);
    overflow: inherit;
}


.product-display-carousel .carousel-inner::after {
    display: none;
}

.product-display-carousel .carousel-item img {
    width: 800px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgb(0 0 0 / 33%);
}
.product-display-carousel .carousel-item img.over-card{
    position: absolute;
    z-index: 1;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 0 20px rgb(0 0 0 / 15%);
}
.product-display-carousel .carousel-item img.card{
    width: 170px;
    bottom: 20px;
    left: -70px;
}
.product-display-carousel .carousel-item img.settings-crd{
    width: 320px;
    top: 40px;
    left: -70px;
    border-radius: 4px;
}
.product-display-carousel{
    top:-200px;
}
#allspark-section{
    top:-230px;
}
#vista-section .carousel-item > img:nth-child(1){
    border-radius:4px;
}

.product-display-carousel .carousel-item img.vista-1{
    width: 320px;
    bottom: -40px;
    right: -40px;
    border-radius: 8px;
}
.product-display-carousel .carousel-item img.vista-2{
    width: 320px;
    top: 30px;
    right: -50px;
    border-radius: 8px;
}
.product-display-carousel .carousel-item img.carbon-1{
    width: 300px;
    bottom: -30px;
    left: -60px;
    border-radius: 8px;
}
.product-display-carousel .carousel-item img.carbon-2{
    width: 240px;
    bottom: -50px;
    left: -40px;
    border-radius: 10px;
    box-shadow: 0 0 50px rgb(0 0 0 / 14%);
}
.product-display-carousel .carousel-item img.pinnacle-2{
    width: 240px;
    bottom: -50px;
    right: -40px;
    border-radius: 10px;
    box-shadow: 0 0 50px rgb(0 0 0 / 14%);
}
.fr-homepage .product-display-carousel .carousel-item img.pinnacle-2{
    right: inherit;
    left: -40px;
}

.product-display-carousel .carousel-indicators li {
    box-shadow: 0 0 50px rgb(0 0 0 / 64%);
    background-color: #ffc8ca;
    border-top: initial;
    border-bottom: initial;
    position: relative;
    opacity: 1;
    width: 40px;
    
}
.product-display-carousel .carousel-indicators li.active::before{
    content: "";
    background-color: #7d3bfd;
    position: absolute;
    width: 0px;
    height: 3px;
    left: 0;
    top: 0;
    animation: bulletloader 5s ease-in-out;
    width: 0px;
    
}
@keyframes bulletloader {
    from {width: 0px;}
    to {width: 40px;}
  }
.product-display-carousel .carousel-indicators {
    bottom: -40px;
}

.product-intro h4, .thedata h4 {
    font-weight: 300;
    color: #5c5c5c;
    font-size: 26px;
}

.product-intro h4 b, .thedata h4 b {
    font-weight: 400;
    font-size: 30px;
    color: #7d3bfd;
}

.product-intro svg {
    width: 120%;
    height: auto;
}
.product-intro svg.icon{
    width: 30px;
    height: 40px;
}

.product-intro .card {
    border: none;
    box-shadow: 0 0 40px rgb(0 0 0 / 12%);
    border-radius: 10px;
}

.product-intro .card h5 {
    font-weight: 300;
    color: #000000;
    margin-bottom: 0;
    font-size: 18px;
}
.jp-home .product-intro .card h5{
    font-size: 16px;
}
.product-intro .card p {
    font-weight: 300;
    font-size: 13px;
    line-height: 16px;
    margin-top: 7px;
}

.bcg-color {
    background-color: #f8faff;
}

/* overflow container */

/* Contact us - homepage */

.contact-bg{
    background-color: #f8faff;
    background-size: cover;
    position: relative;
}
.contact-bg:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgb(255 255 255 / 40%);
    z-index: 1;
}
.contact-container{
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 25px 0 rgb(0 0 0 / 50%);
    z-index: 2;
}
.contact-container h4{
    font-size: 38px;
    line-height: 48px;
    margin: 0 0 28px;
    letter-spacing: -.2px;
    color: #000;
 }
 .contact-container a{
     color: #7d3bfd;
 }
 .contact-container .form-columns-2{
    max-width: 100%;
    margin-bottom: 40px;
 }
 .contact-container .form-columns-2 input{
    font-size: 16px;
    font-weight: 400;
    display: block;
    width: 100%;
    height: 30px;
    padding: 0;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    color: #121212;
    border: none;
    border-bottom: 1px solid rgba(151, 151, 151, .3);
    border-radius: 0;
    background-color: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    margin-top: 20px;
 }
 .contact-container input:focus{
     outline: none;
 }
 .contact-container .hs-fieldtype-text{
     position: relative;
 }
 .contact-container .hs-fieldtype-text:nth-child(odd){
     padding-right: 20px;
 }
 .contact-container .hs-fieldtype-text.field input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #b3b3b3;
    font-weight:300;
    font-size: 15px;
}
.contact-container .hs-fieldtype-text.field input::-moz-placeholder { /* Firefox 19+ */
  color: #b3b3b3;
    font-weight:300;
    font-size: 15px;
}
.contact-container .hs-fieldtype-text.field input:-ms-input-placeholder { /* IE 10+ */
  color: #b3b3b3;
    font-weight:300;
    font-size: 15px;
}
.contact-container .hs-fieldtype-text.field input:-moz-placeholder { /* Firefox 18- */
    color: #b3b3b3;
    font-weight:300;
    font-size: 15px;
}
.contact-container fieldset .hs-fieldtype-text label{
    display: none;
}
 .contact-container fieldset .hs-fieldtype-text .input input{
     position: relative;
     z-index: 1;
 }
 .contact-container fieldset .hs-fieldtype-text .input:before{
    color: #b3b3b3;
    position: absolute;
    bottom: 2px;
    z-index: 0;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
 }

.contact-container .hs-dependent-field ul, .hs_proof_of_mobile_device_ownership_provided ul{
     padding-left: 0;
     list-style: none;
}
.contact-container .hs-dependent-field ul li span, .hs_proof_of_mobile_device_ownership_provided ul li span{
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    position: relative;
    display: block;
    padding: 3px 0 4px 42px;
    margin-left: 0;
}
.hs_proof_of_mobile_device_ownership_provided ul.no-list.hs-error-msgs.inputs-list li {
    position: absolute;
    left: 0px;
    top: -12px !important;
}
.contact-container .hs-dependent-field ul li span:before, .hs_proof_of_mobile_device_ownership_provided ul li span:before{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 24px;
    height: 24px;
    content: '';
    border-radius: 2px;
    background: #f0f0f0;
}
.hs_proof_of_mobile_device_ownership_provided ul.no-list.hs-error-msgs.inputs-list:before{
    display: none !important;
}
.contact-container .hs-dependent-field ul li span:after, .hs_proof_of_mobile_device_ownership_provided ul li span:after{
    position: absolute;
    top: 10px;
    left: 8px;
    display: block;
    width: 7px;
    height: 11px;
    margin: -5px 0 0 0;
    content: '';
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
}
.contact-container .hs-dependent-field ul li label input, .hs_proof_of_mobile_device_ownership_provided ul li label input{
    display: none;
}
.contact-container .hs-dependent-field ul li label input[type='checkbox']:checked + span:before, .hs_proof_of_mobile_device_ownership_provided ul li label input[type='checkbox']:checked + span:before {
    background-color: #3e94ff;
}
.contact-container .hs-dependent-field ul li label input[type='checkbox']:checked + span:after, .hs_proof_of_mobile_device_ownership_provided ul li label input[type='checkbox']:checked + span:after {
    opacity: 1;
}
.contact-container .legal-consent-container, .hs_proof_of_mobile_device_ownership_provided {
    margin-top: 20px;
}
.contact-container .hs-button{
    font-size: 16px;
    font-weight: 400;
    line-height: 15px;
    width: 180px;
    padding: 16px 10px 16px;
    cursor: pointer;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    text-align: center;
    vertical-align: top;
    letter-spacing: -.1px;
    color: #fff;
    border: none;
    border-radius: 6px;
    background-color: #7d3bfd;
    -webkit-box-shadow: 0 8px 15px 0 rgb(62 148 255 / 23%);
    box-shadow: 0 8px 15px 0 rgb(62 148 255 / 23%);
}
.contact-container .hs_submit{
    position: absolute;
    right: 50px;
    bottom: 22px;
}
.contact-container span.hs-form-required{
    display: none!important;
}
.contact-container ul.no-list.hs-error-msgs.inputs-list{
    padding: 0;
    position: relative;
    list-style: none !important;
    margin: 0;
}
.contact-container ul.no-list.hs-error-msgs.inputs-list li{
    position: absolute;
    left: 0px;
    top: 8px;
    width: 100%;
}
.contact-container .hs-dependent-field ul.no-list.hs-error-msgs.inputs-list li{
    top: -15px;
}
.contact-container ul.no-list.hs-error-msgs.inputs-list li:nth-child(2) {
    top: 12px;
}
.contact-container label.hs-error-msg{
    width: 100%;
    color: #ec222b !important;
    font-size:11px !important;
    font-weight:300;
    text-align: left;
    display: block !important;
}
.contact-container span.hs-form-required,.contact-container  .hs_error_rollup{
    display: none;
}
/* Contact us - homepage */


/* footer */

.region-select .dropdown-toggle{
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    position: relative;
    height: 40px;
    padding: 5px 32px 5px 12px;
    cursor: pointer;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(18, 18, 18, .5);
    border-radius: 6px;
    background-color: #fff;
    border: none;
    box-shadow: 0 5px 9px 0 rgb(0 0 0 / 5%);
}
.region-select svg.region-icon{
    height: 60%;
    display: inline-block; 
    margin-right: 10px;
    box-shadow: 0px 2px 9px 0 rgb(0 0 0 / 24%);
    border-radius: 50px;
}
.region-select .dropdown-toggle:hover{
    box-shadow: none;
    background-color: transparent;
    color: rgba(18, 18, 18, .5);
}
.privacylink{
    line-height: 25px;
    vertical-align: text-bottom;
}
.region-select.dropup .dropdown-toggle::after{
    display: none;
}
.region-select .icon-svg {
    position: absolute;
    top: 50%;
    right: 6px;
    display: block;
    margin: -3px 0 0 0;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    opacity: .5;
    fill: #262626;
    width: 12px;
    height: 6px;
}
.region-select.show>.btn-secondary.dropdown-toggle, .region-select.show>.btn-secondary.dropdown-toggle:focus{
    background-color: transparent;
    border: none;
    color: rgba(18, 18, 18, .5);
    outline: none;
    box-shadow: none;
}
.region-select.show>.btn-secondary.dropdown-toggle svg.icon-svg{
    transform: rotate(180deg);
}

.region-select .dropdown-menu{
    visibility: hidden;
    margin: 0 0 10px;
    padding: 4px;
    /*-webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;*/
    white-space: nowrap;
    opacity: 0;
    border-radius: 7px;
    background-color: #fff;
    -webkit-box-shadow: 0 12px 26px 0 rgb(0 0 0 / 9%);
    box-shadow: 0 12px 26px 0 rgb(0 0 0 / 9%);
    border: none;
    min-width: 90px;
    
}
.region-select.show .dropdown-menu.show a{
    display: block;
    height: 29px;
    padding: 6px;
    font-size: 12px;
    color: #888889;
}
.region-select.show .dropdown-menu.show a svg{
    height: 90%;
}
.region-select.show .dropdown-menu.show{
    visibility: visible;
    opacity: 1;
    /*-webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;*/
}

    /* Navigation Region select */

    .headerregion.region-select{
        margin-left: 16px;
        position: relative;
        top: -5px;
    }
    .headerregion.region-select .dropdown-toggle{
        height: 22px;
        padding: 5px 18px 5px 8px;
        line-height: 12px;
        box-shadow: 0px -3px 17px 0 rgb(0 0 0 / 18%);
        border-radius:4px;
        background-color: rgba(255, 255, 255, 0.9);
        letter-spacing: 0;
    }
    .headerregion.region-select svg.region-icon {
        height: 100%;
        margin-right: 5px;
        box-shadow: 0px 2px 15px 0 rgb(0 0 0 / 24%);
        vertical-align: top;
    }
    .headerregion.region-select .icon-svg{
        width: 6px;
        height: 5px;
    }
    .headerregion.region-select .dropdown-toggle::after{
        display: none;
    }

/* footer */


/* the Data */
.thedata ul{
    padding-left: 15px;
    margin-top: 10px;
}
.thedata ul li{
    position: relative;
    font-weight: 400;
    line-height: 28px;
}

.custom-borderradius{
    border-radius: 7px !important;
}
.text-nred{
    color: #7d3bfd;
}
h5.custom{
    font-weight: 400;
    font-size: 1.5rem;
    text-transform: none;
    text-align: center;
    text-shadow: none;
}
.thedata .icon-box {
    display: block;
    max-width: 400px;
    padding: 1.5rem;
    -webkit-transition: all .3s .12s;
    transition: all .3s .12s;
    text-decoration: none;
    border-radius: 14px !important;
}
.thedata .icon-box.hover, .thedata .icon-box:hover {
  background-color: #fff;
  -webkit-box-shadow: 0 0 30px 6px rgb(0 0 0 / 5%);
  box-shadow: 0 0 30px 6px rgb(0 0 0 / 5%);
}
.thedata .icon-box h3 {
  color: #000;
  font-size: 16px;
  font-weight: 300;
}
.thedata .icon-box p {
  font-size: 14px;
  line-height: 20px;
}
.thedata .icon-box .icon-box-icon .icon {
    width: 35px;
    height: 35px;
    margin: 20px 0;
}
.button-bottomalign{
    position: absolute;
    bottom: 30px;
}
/* the Data */

@media(min-width: 1500px){
    #lottie.banner-homepage{
        transform: translate3d(0px, 6px, 0px) scale(1.3);
    }
}
@media(min-width: 1024px) and (max-width: 1340px){
    .whatsnew-section{
        bottom: 220px;
    }
}
@media (min-width: 1100px) and (max-width: 1300px){
    .career-sub iframe {width: 100%; border:0; height:520px; margin-top:0px;}
}
@media(min-width:992px) and (max-width:1200px){
    .product-intro .card h5 {
        font-size: 15px;
    }
    .MultiCarousel h4 {
        font-size: 12px;
    }
    .MultiCarousel .MultiCarousel-inner .item>a span{
        overflow: hidden;
        text-overflow: ellipsis;
        width: 90%;
        height: 39px;
    }
    .v5.banner h1,.v5.banner h1 .text-gradient-anim {
        font-size: 2rem;
    }
    .fr-homepage #whatsnew .des-add{
        display: none;
    }

}
@media(min-width:992px) and (max-width:1024px){
    .whatsnew-section{
        bottom:190px;
    }
    .banner-content span {
        display: block;
    }
    .gradient-meter-container .spectrun-content-list li {
        flex: auto;
    }
    #lottie.banner-homepage{
        width: 40%;
    }
    .banner.v5{
        height: 640px;
    }
    footer .seal-footer.trustee-seal {
        margin-left: 5px;
        margin-right: 10px;
    }

}
@media(max-width: 991px){
    .MultiCarousel{
        overflow:hidden;
    }
    .headerregion.region-select{
        position: absolute;
        top: 3px;
        right: 65px;
    }
}
@media (min-width: 671px) and (max-width:991px){
   
    .mobilemock-hide {
        position: relative;
        left: 25%;
    }
    #lottie.banner-homepage{
        width: 40%;
    }
    #first {
        order: 1;
    }
    #second {
        order: 2;
    }
    #vista-section{
        margin-bottom:40px; 
    }
    .iab-block{
        width: 280px;
    }
    .branding-home, .drive-to-web-home, .digital-circular-home, .drive-to-store-home{
        width: 100%;
    }
    .product-display-carousel .carousel-item .webmock img {
        width: 160px;
        position: relative;
        top: -30px;
        left: 70px;
    }
    .product-display-carousel .imgLeft .carousel-item .webmock img {
        width: 250px;
        position: relative;
        top: -30px;
        left: 10px;
    }
    .product-display-carousel .imgLeft .carousel-item .webmock.fourthmock img {
        width: 156px;
        margin-right: 23%;
        padding-top: 66px;
        position: relative;
        top: -30px;
    }
    .product-display-carousel .carousel-item .webmock.thridmock img {
        width: 153px;
        margin-left: 44%;
        padding-top: 152px;
    }
    .webmock {
        width: 100%;
        height: auto;
        background-size: cover;
    }
    .mobilemock{
        display: none;
    }
    .MultiCarousel .MultiCarousel-inner .item>a {
        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-position: unset !important;
    }
    .resources-section .row:before, .resources-section .row:after{
        display: none;
    }
    .contact-container .hs-button {
        font-size: 14px;
        font-weight: 400;
        line-height: 15px;
        width: 120px;
    }
    .MultiCarousel .btn-primary.rightLst{
        right:0 !important;
    }
    .MultiCarousel .btn-primary.leftLst{
        left:0 !important;
    }
    .v4 .banner,.v5.banner{
        min-height:520px;
    }
    #lottie.banner-homepage{
        transform: translate3d(-30px, 0px, 0px) scale(1.25);
    }
    .v5.banner h1 {
        font-size: 1.8rem;
        margin-bottom: 10px !important;
        line-height: 36px;
        font-weight: 500;
    }
    .v5.banner h1 .text-gradient-anim {
        font-size: 1.7rem;
        font-weight: 700;
        display: block;
    }
    .jp-home .v5.banner h1 .text-gradient-anim {
        font-size: 1.5rem;
    }
    .v5.banner .banner_content {
        margin-top: 0 !important;
        line-height: 20px !important;
        margin-bottom: 10px;
        font-size: 1.2rem;
    }
    .banner-content span {
        display: block;
    }
    .v5.banner .banner-content {
        line-height: 20px;
        font-size: 16px;
    }
    .jp-home .v5.banner .banner-content {
        line-height: 22px;
        font-size: 14px;
    }
    .banner-line {
        width: 110px;
        border-color: #909090;
        margin: 30px auto 20px 0;
    }
    .whatsnew-section{
        bottom: 170px;
    }
    .fr-homepage .whatsnew-section {
        bottom: 140px;
        z-index: 10;
    }
    .des-add{
        display: none;
    }
    .whatsnew-section h4{
        font-size: 14px;
    }
    #whatsnew {
        width: calc(100% - 92px);
    }
    #whatsnew .carousel-inner:before{
        left: 5px;
        height: 55px;
    }

    ul.spectrum-logo {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .spectrum-logo li {
        flex: none;
        text-align: center;
        font-weight: 400;
        display: inline-block;
        width: calc(100% / 4);
        padding: 10px;
    }
    .fr-homepage .spectrum-logo li {
        width: calc(100% / 3);
    }
    .spectrun-content-list li {
        flex: auto;
    }
    .spectrun-content-list li a{
        font-size: 14px;
        line-height: 18px;
    }
    .h3, h3 {
        font-size: 1.3rem;
    }
    .product-display-carousel{
        position: relative !important;
    }
    .product-display-carousel .carousel-item img{
        width: 100%;
    }
    .product-display-carousel .carousel-item img.over-card{
        display: none !important;
    }
    .product-display-carousel, #allspark-section{
        top:0;
    }
    
}
@media (min-width:400px) and (max-width:670px){
    .gradient-meter-container ul.spectrun-content-list:before {
        left: 48% !important;
    }
}
@media (max-width: 670px) {
    .contact-container .legal-consent-container, .hs_proof_of_mobile_device_ownership_provided {
        margin-top: 30px;
    }
    .free-trial.mob-add{
        display: inline-block !important;
    }
    .iab-block .trustee-seal{
        margin-bottom: 15px;
    }
    .v5.banner i {
        font-size: 12px;
    }
    .thedata .col{
        width: calc(100% / 2);
        flex-basis: unset;
    }
    .resources-section .row:before, .resources-section .row:after{
        display: none;
    }
    h3{
        font-weight:400;
    }
    #first {
        order: 1;
    }
    #second {
        order: 2;
    }
    .v4 .banner{
        min-height:540px;
    }
    .line-effect{
        background-position: 0 70%;
    }
    #lottie.banner-homepage {
        transform: translate3d(-28px, -50px, 0px) scale(1.75);
    }
    #whatsnew .carousel-item p {
        font-size: 14px;
    }
    .v5.banner h1, .jp-home .v5.banner h1 {
        font-size: 1.3rem;
        margin-bottom: 0 !important;
        line-height: 28px;
        font-weight: 500;
        margin-top: 20px !important;
    }
    .v5.banner h1 .text-gradient-anim {
        font-size: 1.3rem;
        font-weight: 600;
    }
    .v5.banner .banner_content {
        margin-top: 2px !important;
        line-height: 22px !important;
        margin-bottom: 10px;
        font-size: 1.1rem !important;
    }
    .banner-line {
        margin: 10px auto 10px 0;
        width:80px;
    }
    .v5.banner .banner-content {
        line-height: 22px;
        font-size: 16px;
    }
    .banner-content span {
        display: block;
    }
    .banner-content span.span_content{
        display: none;
    }
    .whatsnew-section{
        bottom: 20px;
        padding: 0px 5px;
    }
    .whatsnew-section h4{
        font-size: 12px;
        padding: 0 5px;
    }

    #whatsnew .carousel-inner:before{
        left: 5px;
        height: 55px;
    }
    #whatsnew .carousel-item{
        text-align: left;
    }
    #whatsnew svg {
        width: 15px;
        height: 15px;
        right: 16px;
        top: calc(50% - 7px);
    }

    .h3, h3, .jp h3 {
        font-size: 1.3rem;
    }
    .gradient-meter-container{
        padding: 0 20px;
    }
    .gradient-meter-container h3{
        text-align: center;
        margin:0 auto;
        padding-left: 20px;
    }
    .gradient-meter-container h3:nth-child(1){
        position: absolute;
        top: 340px;
        left: 31%;
    }
    .fr-homepage .gradient-meter-container h3:nth-child(1){
        top:320px;
    }
    .gradient-meter-container h3:first-child:before{
       transform: rotate(90deg);
       right: 3px;
       left: unset;
    }
    .gradient-meter-container h3:after{
        transform: rotate(-90deg);
        left: 0;
        right: unset;
    }
    ul.spectrun-content-list {
        position: relative;
        list-style: none;
        padding: 0;
        margin-top: 10px;
        padding-top: 30px;
        align-items: center;
        display: block !important;
        text-align: center;
        margin-bottom: 80px;
    }
    .gradient-meter-container ul.spectrun-content-list:before{
        height: 270px;
        width: 30px;
        top: 16px;
        -webkit-animation: hue1 20s infinite ease-in-out;
        background-size: auto 300%;
        left: 45%;
    }
    .spectrun-content-list li:nth-child(odd){
        padding-right: 200px;
        padding-left: 0;
        text-align: right !important;
        display: block;
    }
    .spectrun-content-list li:nth-child(odd) span{
        float: right;
        left: 5px;
        top: 0px;
    }
    
    .spectrun-content-list li:nth-child(even) {
        position: relative;
        left: 64%;
        text-align: left;
        padding-left: 0;
        display: block;
    }
    .spectrun-content-list li {
        text-align: left;
        font-weight: 400;
        padding-left: 55px;
        font-size: 14px;
        line-height: 18px;
        margin: 10px 0 !important;
    }
    .spectrum-c1, .spectrum-c2 {
        font-size: 17px;
    }
    ul.spectrum-logo {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .spectrum-logo li {
        flex: none;
        text-align: center;
        font-weight: 400;
        display: inline-block;
        width: calc(100% / 2);
        padding: 10px;
    }
    .spectrum-logo svg.icon{
        width: 56px;
        height: 50px;
    }
    h6.subtext{
        line-height: 20px;
    }
    .product-display-carousel, #allspark-section{
        top:0;
    }
    .product-display-carousel{
        position: relative !important;
    }
    .product-display-carousel .carousel-item img{
        width:100%;
    }
    .product-display-carousel .carousel-item img.over-card{
        display: none !important;
    }
    .product-intro h4, .thedata h4{
        font-size: 18px;
    }
    .product-intro h4 b, .thedata h4 b{
        font-size: 20px;
    }
    .product-intro .card h5{
        font-size: 1rem;
    }
    .product-intro .card p{
        font-size: 12px;
    }
    .MultiCarousel .MultiCarousel-inner .item>a {
        background-size: 100% auto !important;
        background-repeat: no-repeat !important;
        background-position: unset !important;
        margin:10px 30px;
    }

    .MultiCarousel .MultiCarousel-inner .item.empty{
        display: none;
    }
    .MultiCarousel .btn-primary.leftLst{
        left:0 !important;
    }
    .MultiCarousel .btn-primary.rightLst{
        right:0 !important;
    }
    .contact-container h4 {
        font-size: 24px;
        line-height: 28px;
        margin: 0 0 8px;
    }
    .contact-container .form-columns-2 input, .contact-container .legal-consent-container{
        margin-top: 40px;
    }
    .contact-container .hs-fieldtype-text:nth-child(odd){
        padding-right:0;
    }
    .legal-consent-container .hs-form-booleancheckbox-display p{
        font-size: 0.9rem;
    }
    .contact-container .hs_submit{
        position: relative;
        bottom: -20px;
        right: 0;
    }
    .contact-container .form-columns-2{
        margin-bottom: 0;
    }
    .mobilemock-hide {
        max-width: 400px;
        position: relative;
        left: 25%;
    }
    
    .mobilemoctwo {
        width: 465px;
        height: 330px;
        background-repeat: no-repeat;
        left: 30px;
    }
    .mobilemoctwo .cone {
        width: 115px !important;
        top: 54px;
        left: 18px;
    }
    .mobilemoctwo .ctwo {
        width: 111px !important;
        left: 38.4%;
        top: 46%;
    }
    .branding-home, .drive-to-web-home, .digital-circular-home, .drive-to-store-home{
        width: 100%;
    }
}
@media (max-width: 400px), (min-device-width: 320px) and (max-device-width: 480px){
    form.hs-form-01f92b19-2412-49c7-a7d7-25d75cfa8716_a360f9f1-b5a6-4c12-ba51-f012e0b816ce:not(.hs-video-form) .form-columns-2 .hs-form-field .hs-input, form.hs-form-01f92b19-2412-49c7-a7d7-25d75cfa8716_a360f9f1-b5a6-4c12-ba51-f012e0b816ce:not(.hs-video-form) .form-columns-3 .hs-form-field .hs-input {
        width: 100%;
    }
}
@media screen and (min-width: 480px) and (max-width: 740px) and (orientation: landscape) {
    .v4 .banner{
        min-height:610px;
    }
    .v5.banner h1 {
        font-size: 1.5rem;
        margin-bottom: 0 !important;
        line-height: 28px;
        font-weight: 500;
    }
    .v5.banner h1 .text-gradient-anim {
        font-size: 1.3rem;
        font-weight: 600;
    }
    .v5.banner .banner_content{
        margin-top: 3 !important;
        line-height: 18px !important;
        margin-bottom: 10px;
    }
    .banner-line {
        margin: 0 auto 10px 0;
    }
    .v5.banner .banner-content {
        line-height: 18px;
        font-size: 14px;
    }
    .whatsnew-section {
        bottom: 14px;
    }
    .whatsnew-section h4{
        font-size: 14px;
    }
    #whatsnew {
        width: calc(100% - 115px);
        max-height: 70px;
    }
    .banner-mobile{
        top: 25% !important;
    }
    .h3, h3 {
        font-size: 1.2rem;
    }
    .gradient-meter-container{
        padding: 0 20px;
    }
    .gradient-meter-container h3{
        text-align: center;
        margin:0 auto;
    }
    .gradient-meter-container h3:nth-child(2){
        position: absolute;
        top: 330px;
        left: 34%;
    }
    .gradient-meter-container h3:after, .gradient-meter-container h3:before{
        display: none;
    }
    ul.spectrun-content-list {
        position: relative;
        list-style: none;
        padding: 0;
        margin-top: 10px;
        padding-top: 30px;
        align-items: center;
        display: block !important;
        text-align: center;
        margin-bottom: 80px;
    }
    .gradient-meter-container ul.spectrun-content-list:before{
        height: 270px;
        width: 30px;
        top: 10px;
        -webkit-animation: hue1 20s infinite ease-in-out;
        background-size: auto 300%;
        left: 45% !important;
    }
    .spectrun-content-list li:nth-child(odd){
        padding-right: 0px;
        padding-left: 0;
        text-align: right;
        width: 190px;
    }
    .spectrun-content-list li:nth-child(odd) span{
        float: right;
        left: 5px;
        top: -6px;
    }
    
    .spectrun-content-list li:nth-child(even) {
        position: relative;
        left: 45%;
    }
    .spectrun-content-list li {
        text-align: left;
        font-weight: 400;
        padding-left: 55px;
        font-size: 14px;
    }
    .spectrum-c1, .spectrum-c2 {
        font-size: 17px;
    }
    ul.spectrum-logo {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .spectrum-logo li {
        flex: none;
        text-align: center;
        font-weight: 400;
        display: inline-block;
        width: calc(100% / 3);
        padding: 10px;
    }
    .product-display-carousel{
        position: relative !important;
    }
    .product-display-carousel .carousel-item img{
        width:100%;
    }
    .product-display-carousel .carousel-item {
        min-height: initial;
        height: auto !important;
    }
    .product-display-carousel .carousel-item img.over-card{
        display: none !important;
    }
    .product-intro h4, .thedata h4{
        font-size: 18px;
    }
    .product-intro h4 b, .thedata h4 b{
        font-size: 20px;
    }
    .product-intro .card h5{
        font-size: 1rem;
    }
    .product-intro .card p{
        font-size: 12px;
    }
    .contact-container h4 {
        font-size: 24px;
        line-height: 28px;
        margin: 0 0 8px;
    }
    .contact-container .form-columns-2 input, .contact-container .legal-consent-container{
        margin-top: 40px;
    }
    .contact-container .hs-fieldtype-text:nth-child(odd){
        padding-right:0;
    }
    .legal-consent-container .hs-form-booleancheckbox-display p{
        font-size: 0.9rem;
    }
    .contact-container .hs_submit{
        position: relative;
        bottom: -20px;
        right: 0;
    }
    .contact-container .form-columns-2{
        margin-bottom: 0;
    }
}
@media screen and (min-width: 671px) and (max-width: 740px) and (orientation: landscape){
    .whatsnew-section {
        bottom: 214px;
        z-index: 2;
    }
}
@media screen and (min-width: 740px) and (max-width: 766px) and (orientation: landscape) {
    .spectrun-content-list li a{
        font-size: 11px;
    }
    .gradient-meter-container li span{
        display: none;
    }
    .whatsnew-section {
        z-index: 10;
        bottom: 100px;
    }
    .homepage-custom .banner-content{
        width: 50%;
    }
}
@media(min-width: 320px) and (max-width: 670px){
    #whatsnew svg{
            top: 30px;
    }
    .banner.v5{
        text-align: center;
        min-height: 580px;
    }
    .fr-homepage .banner.v5 {
        text-align: center;
        min-height: 620px;
    }
    .banner-line{
        display: inline-block;
    }
    #lottie,.line-effect{
        display: none !important;
    }
    .global-banner.banner-mobile{
        position: absolute;
        width: 300%;
        right: -98%;
        top: 37%;
        background: url(../images/banner-images/ipo/banner-mobbg-listed.webp) no-repeat;
        background-size: 100% auto;
        height: 100%;
        z-index: 1;
        display: block;
    }
    .jp-home .banner-mobile{
        position: absolute;
        width: 300%;
        right: -98%;
        top: 37%;
        background: url(../images/homepage//webp/banner-mobbg.png) no-repeat;
        background-size: 100% auto;
        height: 100%;
        z-index: 1;
        display: block;
    }
    .fr-homepage .banner-mobile{
        position: absolute;
        width: 300%;
        right: -98%;
        top: 40%;
        background: url(../images/banner-images/ipo/banner-mobbg-fr-listed.webp) no-repeat;
        background-size: 100% auto;
        height: 100%;
        z-index: 1;
        display: block;
    }
    .whatsnew-section{
        bottom: 42px;
        z-index: 10;
    }
    .spectrum-fullwidth{
        margin-top: 20px;
    }
    .container {
        padding: 0 25px;
    }
    #the-team.container{
        padding: 0;
    }
    .mobilemock, .product-display-carousel .imgLeft .carousel-item .mobilemock{
        position: relative;
        left: -50px;
        top: 0;
        right: 40px;
    }
    .webmock{
        display: none;
    }
}

@media only screen  and (min-device-width: 375px)  and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { 
    #contactform{
        display: none;
    }
}