@import url("https://use.typekit.net/cuy7hca.css");

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {font-weight: 600;}
.preloader__heading img {max-width: 4rem;margin:0 auto;}
.preloader {transform: none !important;}
.overflow-visible {overflow:visible;}
img.of-contain {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  font-family: 'object-fit: contain;';
}
.line-height-1 {line-height: 1}
.newsletter .btn-outline-secondary {border-color:#fff;border-radius:2rem;border-left:none;}
.newsletter .form-control {color:#fff;background:none;border-color: #fff;border-radius: 2rem;border-right:none;}
.footer__area-border-top {border-color: var(--color-dark-3);}
.newsletter form {/*max-width: 14rem;float: right;*/}

.fullp_wrapper {
  min-height: 100vh;
  height: 100vh;
    overflow-y: scroll;
    height: 100vh;
    scroll-snap-type: mandatory;
    scroll-snap-points-y: repeat(100vh);
    scroll-snap-type: y mandatory;
}
.fullp_wrapper .content-wrap::before {display: none;}


.section_full_h .pin-up-storyboard .content-wrap .item-content h3 {
    width: 100%;
    top: 100%;
    position: relative;
    text-align: center;
}

.section_full_h .bike-box.lazy-bg {background-size: auto 65%;}
.section_full_h {scroll-snap-align: start;transition: all 0.1s ease-in-out;background:#fff;height: 100vh;overflow: hidden;position: absolute;left: 0;top: 0;width: 100%;background-size: auto 65%;background-position: center;background-repeat: no-repeat;}
.section_full_h:not(.first) {
  opacity: 0;
  visibility: hidden;
} 
.section_full_h .slider-fullscreen-projects__footer {position: absolute;}

.info * {font-size: 0.7rem;}
.info {border-top: 1px solid #D9D9D9;text-align: left;}
.info ol {padding-left: 1rem}
.info ol li {margin-bottom: 1rem;}

.sep-row {border-top: 1px solid #D9D9D9;}

@keyframes swinging {
  0% {transform: rotate(2deg);}
  50% {transform: rotate(-2deg);}
  100% {transform: rotate(2deg);}
}
.swinging {
  transform-origin: 65.15% 0%;
  animation: swinging 3.5s ease-in-out infinite;
}

@keyframes sway  {
    0% { transform: rotate(8deg); }
    50% { transform: rotate(-8deg); }
    100% { transform: rotate(8deg); }
}
.sway {
  animation: sway 2.4s infinite;
  animation-timing-function: ease-in-out;
  -webkit-transform-origin: top;
  -moz-transform-origin: top;
  transform-origin: top;
}

.floating-lock {/*animation: float 8s ease-in-out infinite;*/animation: sway 6.4s infinite;
  animation-timing-function: ease-in-out;
  -webkit-transform-origin: top;
  -moz-transform-origin: top;
  transform-origin: top;}

@keyframes float {
  0% {
      transform:rotate(0deg); 
      transform: translatey(0px);

      transform: translate(0, 0) rotate(0deg);
  }
  50% {

       transform: translate(0, -15px) rotate(3deg);
  }
  75% {
      transform: translate(0, -10px) rotate(-3deg);
  }
  100% {
      transform: translate(0, 0) rotate(0deg);
  }
}

.shop__cart-checkout .shop__cart-item-thumb {
    display: none;
}

body .form-control {border-color: #707070;border-radius: 0;}
body .form-control.error {border-color: #F9423A}
body .form-control:focus {border-color:#000;border-style: dashed;outline: none;box-shadow: none;}


.shop__cart-checkout {
    max-width: none !important;
  }
.shop__cart-checkout .--wizard > .--content legend {
    font-size: calc(var(--h3-min-font-size) * 1px + (var(--h3-max-font-size) - var(--h3-min-font-size)) * ((100vw - 320px) / 2240));
}
.shop__cart-checkout .--wizard > .--steps > ul > li + li::before {display: none;}

.shop__cart-checkout .--wizard > .--steps > ul {background: none;padding: 0;}
.shop__cart-checkout .--wizard > .--steps .current a, 
.shop__cart-checkout .--wizard > .--steps .current a:hover, 
.shop__cart-checkout .--wizard > .--steps .current a:active {color:var(--color-dark-3);}
.shop__cart-checkout .--wizard > .--steps li:after {bottom:0;left:0;content:'';height: 3px;background:#25282A;width:100%;position: absolute;}
.shop__cart-checkout .--wizard > .--steps li {
    font-size: 75%;
    width: calc(33.333333% - 2rem);
    display: block;float: left;
    position: relative;
    margin-left: 2rem;
}
.shop__cart-checkout .--wizard > .--steps li.current:after {background:var(--color-dark-3);}
.shop__cart-checkout .--wizard > .--steps {
    position: absolute;
    bottom: 0;
    width: calc(100% - 15px);
    left: 0;
}
.shop__cart-checkout .--wizard > .--steps ul {padding-left: calc(33.333333% - 5rem);}

.shop__cart-checkout .--wizard > .--steps ul::after {
    content: '';
    width: calc(33.333333% - 5rem);
    height: 3px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: var(--color-dark-3);
}
.shop__cart-checkout .--wizard > .--steps ul::before {
    content: 'Dettagli prodotto';
    font-size: 75%;
    position: absolute;
    bottom: 4px;
    left: 0;
    color: var(--color-dark-3);
    line-height: 1.45;
}

.shop__cart-button-accent {background-color: var(--color-dark-3) !important;}

p a::after, a.underline::after {display:block;z-index:1;content: '';position: absolute;width: 100%;height: 100%;bottom: 0px;left: 0;opacity: 1;transform-origin: 0% 50%;transform: scaleX(0);transition: all 0.8s ease-in-out;border-bottom: 1.2px solid #F9423A;transition-delay: 0s;}

p a:hover::after, 
p a:focus::after, 
a.underline:hover::after, 
a.underline:focus::after  {opacity: 1;transform: scaleX(1);transition-delay: 0.5s;}

p a:hover, a.underline:hover {color:#F9423A;}
p a, a.underline {position: relative;color:#F9423A;font-weight: 600;white-space: nowrap;}

p a::before, a.underline::before {display:block;content: '';position: absolute;width: 100%;height: 100%;bottom: 0px;left: 0;opacity: 1;transform-origin: 100% 100%;transform: scaleX(1);transition: all 0.8s ease-in-out;border-bottom: 1.2px solid #F9423A;transition-delay: 0.5s;}

p a:hover::before, 
p a:focus::before, 
a.underline:hover::before, 
a.underline:focus::before  {opacity: 1;transform: scaleX(0);transition-delay: 0s;}

.color-white p a::after, 
.color-white a.underline::after, 
.color-white p a::before, 
.color-white a.underline::before {border-color: #fff;}

#shop__cart-partial h4 {display: none;}
#shop__cart-partial .list-group .list-group-item {border:none;padding-top:0;padding-bottom:0;font-size: 80%;line-height: 1.4;}
.shop__cart-checkout .shop__cart-item-details {line-height: 1;margin-bottom: 10px;}

#shop__cart-partial .list-group .list-group-item:after {height: 1px;background: #000;margin:0 1.25rem;}

#shop__cart-partial .list-group .list-group-item.flex-column p {
    margin: 0 0 2rem;
    line-height: 1;
}
.shop__cart-checkout .shop__cart-item-title a {color: #000;}
.shop__cart-item-details {color: #f9423a;}
#shop__cart-partial .list-group .list-group-item.flex-column svg {
    width: 60px;
    height: 60px;
}
#shop__cart-partial .list-group .list-group-item.flex-column svg path {fill: #f9423a;}
#shop__cart-partial img.cart-lock {
    position: absolute;
    top: auto;
    width: 225%;
    max-width: none;
    bottom: -104%;
    left: -60%;
    z-index: -1;
}
.shop__cart-checkout .shop__cart-item-thumb {max-width: 35px;}
#shop__cart-partial h4.shop__cart-item-title {display: block;}
#shop__cart-partial .btn-primary {border-bottom-left-radius: 0;
    border-top-left-radius: 0;}
#shop__cart-partial form.card {padding:15px;}
#shop__cart-partial form.card input {font-size: 90%;}
.btn-primary {
    color: #fff;
    background-color: #f9423a;
    border-color: #f9423a;
    
}
.btn-primary:hover {
    color: #fff;
    background-color: #25282A;
    border-color: #25282A;
    
}

#shop__cart-steps {padding-bottom: 5rem;}


button {background: none;}

.product-detail .shop__product-qty.number-input button {color: #fff;border:none;}
.product-detail .shop__product-qty.number-input {display: flex;align-items: center;}
.product-detail .number-input button::before, 
.product-detail .number-input button::after {background: #fff;}
.product-detail .number-input input[type="number"] {
    color: var(--color-dark-3);
    border: none;
    width: auto;
    height: 4rem;
    width: 8rem;
}
.product-detail .number-input button {width: 2rem;height: 2rem;}

header .menu > li {vertical-align: middle;}
header .shop__cart-button .shop__items-count {
    top: 50%;
    padding: 2px 8px;
    border-radius: 6px;
    border-color: var(--color-dark-3) !important;
    border-width: 1px;
    font-size: 14px;
    line-height: 14px;
    transform: translate(0,-50%);color: var(--color-dark-3);
}
header .shop__cart-button .shop__empty-cart-icon {
    display: none;
    width: 30px;
    height: 36px;
    margin: 0 auto;
    left: -2px;
    position: relative;
}
header .shop__cart-button.shop__position-top-right {top: auto;right: auto;}
header .shop__cart-button {position: relative;margin-left: 2rem;}
header .shop__cart-button .shop__button-container {
    width: 58px;
    height: 36px;
    padding: 0;
    color: #FFF;
    border-radius: 29px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: 0.3s cubic-bezier(.175, .885, .32, 1.275);
    -o-transition: 0.3s cubic-bezier(.175, .885, .32, 1.275);
    transition: 0.3s cubic-bezier(.175, .885, .32, 1.275);
    
}


.newsletter ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #fff;
}
.newsletter ::-moz-placeholder { /* Firefox 19+ */
  color: #fff;
}
.newsletter :-ms-input-placeholder { /* IE 10+ */
  color: #fff;
}
.newsletter :-moz-placeholder { /* Firefox 18- */
  color: #fff;
}

.color-dark-1 {
  color: var(--color-dark-1) !important;
}

.color-dark-2 {
  color: var(--color-dark-2) !important;
}

.color-dark-3 {
  color: var(--color-dark-3) !important;
}

.color-dark-4 {
  color: var(--color-dark-4) !important;
}

.color-light-1 {
  color: var(--color-light-1) !important;
}

.color-light-2 {
  color: var(--color-light-2) !important;
}

.color-light-3 {
  color: var(--color-light-3) !important;
}

.color-light-4 {
  color: var(--color-light-4) !important;
}

.color-white {
  color: #fff !important;
}

.section-app {margin-top:-5px;}
.section-app .slider-fullscreen-projects__footer {position: relative;left: 0;}

.section--large {
  width: 100vw;
  color: white;
}

.video-element {
  transform: scale(1);
  width: 100vw;
  height: 100vh;
  background-image: url('../../assets/img/assets/hips1.jpg');
  background-size: cover;  
  background-position: center;
}

.button_lg {font-size: 1.5rem;
padding: 1rem 1.5rem;
text-transform: none;}

.bg {
  height: auto;
}
.bg canvas {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 100vw;
  max-height: 100vh;
}

.test-canvas {position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 100vw;
  max-height: 100vh;}

.bg #container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}
.bg #container h1 {
  z-index: 9999;
  font-size: 12rem;
  font-weight: 900;
}

.desc p {font-size: 0.75rem}
.desc {left: 5rem}

.bg .container-hero {
  height: calc(400vh);
  top: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
}
.bg .container-hero div.h1 {
  width: 50%;
  font-size: 8rem;
  font-weight: 600;
  text-align: center;
}
@media (max-width: 800px) {
  .container-hero div.h1 {
    width: 90%;
  }
}

.position-absolute {position: absolute !important;}
.position-static {position: static;}

.z-index-1 {z-index: 1}
.z-index-2 {z-index: 2}


.section_cta .position-absolute {
    top: 0;
    left: 0;
    width: 100%;
}
.section_cta .lock-wrapper {margin-top: -12rem;}


.mt-n5 {margin-top: -3rem;}

.orange {color: #F9423A;}


.font-weight-300 {font-weight: 300}
.font-weight-400 {font-weight: 400}
.font-weight-600 {font-weight: 600}

.intro {
  height: 100vh;
}

.intro video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.intro h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 80px;
  color: white;
}

.rev {
  height: 100vh;
  color: black;
}

.wrapper-lock {transform: scale(0.9);transform-origin: bottom;}

.mb-n {margin-top: 3rem;
margin-bottom: -2rem;
position: relative;
z-index: 9;}
.mb-n .h1 {line-height: 1.3;}


.rev h1 {
  padding-top: 300px;
  text-align: center;
  font-size: 80px;
}
.col-lock {height: 39.75rem;width:25rem;}
.col-phone {height: 22.125rem;width:10.938rem;}


.btn_cta {position: fixed;right: calc(var(--gutter-horizontal) / 2);bottom: calc(var(--gutter-vertical) / 2)}



.logo__wrapper-img img {max-height: 4rem;}

.text-uppercase {text-transform: uppercase;}

/*--------------------------
* MENU TABS
---------------------------*/

.menu__tabs li {
  display: inline-block;
  margin:0 2rem;
}
.menu__tabs a {
  font-weight: 600;
  display: inline-block;
  color: #C5C6C6;
  text-decoration: none;
}
.menu__tabs a:hover {
  background: #fff;color: #F9423A;
}
.menu__tabs a.active {
  color: #F9423A;
  background: #FFF;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

/*--------------------------
* MENU WRAPPER
---------------------------*/
.menu {position: relative;}
.menu__tabs {
    list-style: none;
    overflow: hidden;
    margin-bottom: 0;
}


.card-header, .card {
    padding: 0;
    margin-bottom: 0;
    background-color: transparent;
    border: none;
}
.card .btn-link {color: #000;padding: 0;}
.card-body {padding-left: 0;padding-right: 0;}


.flex {
  display: flex;
  align-items: center;
}

.app-btn {
  color: #fff;
  margin: 2rem 1rem 0 0;
  text-align: left;
  border-radius: 5px;
  text-decoration: none;
  font-family: "Lucida Grande", sans-serif;
  font-size: 10px;
  text-transform: uppercase;line-height: 1.1;padding: 0.75rem 1rem;
}
.app-btn.blu {
  background-color: #101010;
  transition: background-color 0.25s linear;
}
.app-btn.blu:hover {
  background-color: #454545;
}
.app-btn img {margin-right: 12px;}
.app-btn i {
  text-align: center;
  font-size: 28px;
  margin-right: 7px;
}
.app-btn .big-txt {
  font-size: 17px;
  text-transform: capitalize;
}

.app-box {height: 100%;}
.app-box img {/*max-height: 80%;*/max-width: 260px;}
.app-lockbg {
    position: absolute;
    right: -10%;
    z-index: -1;
    top: -20%;
}
.app-lockbg.z-index-1 {z-index: 1}
.app-sideline {
    position: absolute;
    top: auto;
    left: -50%;
    height: 1px;
    width: 260px;
    background-color: var(--color-dark-3);
    transform: scaleX(0);
    transform-origin: top left;
    z-index: 1;
    margin-left: /*calc(916px - 100vw);*/ calc(100vw - 524px);
    border-radius: 10px;
}
.app-wrapper .abstitle {
    position: absolute;
    top: -5rem;
    left: 50%;width:100%;
    transform: translate(-50%,-100%);
}
.app-text-wrap:before {position:absolute;content:'';background:rgba(255,255,255,0.2);width: 100%;left: 0;border-radius: 10px;height: 1px;}
.app-text-wrap {
    position: absolute;
    left: -50%;
    width: 260px;font-size: 0.7rem;
    margin-left: calc(100vw - 524px);
    text-align: center;
    display: flex;
    justify-content: space-between;
}


.slider-showcase .text-left {left:2rem;top:-4rem;position: relative;}

@media (min-width: 1920px){
  .app-text-wrap {margin-left: calc(100vw - 590px);}
  .app-sideline {margin-left: calc(100vw - 590px);}
}

.button {border-width: 1px;}

.app-text {color: rgba(255,255,255,0.2);}

.app-item-content .col-lg-4:before {content: '';position: absolute;height: 100%;width: 100%;left: 0;top: 0;background:var(--color-dark-2);z-index: -1}
.app-item-content .col-lg-4.slideInUp * {position: relative;z-index:1}



/*
.sideline {
    position: absolute;
    top: 50%;
    height: 24rem;
    width: 2rem;
    background-color: var(--color-dark-3);
    transform: scaleY(0);
    transform-origin: top center;
    z-index: 1;
    border-radius: 25rem;
    left: 47px;
    margin-top: -11rem;
}


.sideline, .storyboard-sideline {
    position: absolute;
    top: 50%;
    height: 24rem;
    width: 2rem;
    background-color: var(--color-light-1);
    transform: scaleY(0);
    transform-origin: top center;
    z-index: 1;
    border-radius: 25rem;
    left: 47px;
    margin-top: -11rem;
    box-shadow: 0 0 0px 7px #fff;
}
*/

footer {
    position: relative;
    z-index: 999;
}
.sideline, .storyboard-sideline {
    position: absolute;
    top: 50%;
    height: 14rem;
    width: 2px;
    background-color: var(--color-dark-3);
    transform: scaleY(0);
    transform-origin: top center;
    z-index: 1;
    border-radius: 25rem;
    left: var(--gutter-horizontal);;
    margin-top: -9rem;
    z-index: 99999;margin-left: 6px;opacity: 0;
}





/*.text {padding:0 1rem;color:#000 !important;}*/


#menu {
    position: fixed;
    left: calc(var(--gutter-horizontal) / 2);
    padding: 0;
    bottom: calc(var(--gutter-horizontal)/ 2);
    list-style: none;
    margin: 0;z-index: 999;
}
#menu li {margin-top: 1rem;}
#menu li a {text-indent: -9999px;
    width: 15px;
    height: 15px;border-radius: 100%;border:1px solid;display: block;}

.text {
    text-indent: -9999px;
    width: 10px;
    height: 10px;
    background: var(--color-dark-2);
    border-radius: 100%;
    padding: 0;
    top: -4px;opacity: 0 !important;
    position: relative;z-index: 99;
}
.text-wrap {
    position: absolute;opacity: 0 !important;
    left: 65px;
    height: 2px;
    width: 20rem;
    z-index: 999;
    top: 50%;
    transform: rotate(-90deg);
    transform-origin: left;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    border-radius: 25rem;
    margin-top: 11rem;
    text-transform: uppercase;
    font-size: .65rem;
    font-weight: 600;
    line-height: calc(2rem - 3px);
    background: var(--color-dark-2);
    opacity: 0.8;
}


/*
.text-wrap {
    position: absolute;
    left: 65px;
    height: 100px;
    width: 100vh;
    z-index: 999;
    top: 100%;
    transform: rotate(-90deg);
    transform-origin: left;
    display: flex;
    justify-content: space-around;
    flex-direction: row-reverse;
}


.text-wrap {
    position: absolute;
    left: 65px;
    height: 2rem;
    width: 24rem;
    z-index: 999;
    top: 50%;
    transform: rotate(-90deg);
    transform-origin: left;
    display: flex;
    justify-content: space-around;
    flex-direction: row-reverse;
    border: 1px solid;
    border-radius: 25rem;
    margin-top: 12rem;
    box-shadow: 0 0 0px 7px #fff;
}


.text-wrap {
    position: absolute;
    left: 65px;
    height: 2rem;
    width: 24rem;
    z-index: 999;
    top: 50%;
    transform: rotate(-90deg);
    transform-origin: left;
    display: flex;
    justify-content: space-around;
    flex-direction: row-reverse;
    border: 1px solid;
    border-radius: 25rem;
    margin-top: 12rem;
    text-transform: uppercase;
    font-size: .65rem;
    font-weight: 600;
    line-height: calc(2rem - 3px);
    mix-blend-mode: difference;
    background: #fff;opacity: 0.8;
}
*/
.item-content .feature p, .swiper-slide .feature p{/*font-size: 1.2rem;*/font-size:calc(var(--paragraph-min-font-size) * 1px + (var(--paragraph-max-font-size) - var(--paragraph-min-font-size)) * ((10vw - 2240px) / 2240));margin:0;margin-right: -3rem;line-height: 1.45}
.item-content .feature h4, .swiper-slide .feature h4 {margin-bottom: 0;margin-right: -2rem;}

.vh_100 {height: 100vh}

.item-content {background:#fff;}

.item-content-0 .feature:nth-child(3), 
.swiper-slide-0 .feature:nth-child(3) {top: 6rem;position: relative;}

.item-content-2 .feature:nth-child(1), 
.swiper-slide-2 .feature:nth-child(1) {margin-top: 10rem;/*left: 3rem*/}

.item-content-2 .feature:nth-child(2), 
.swiper-slide-2 .feature:nth-child(2) {position: relative;/*left: -2rem*/}

.item-content-2 .feature:nth-child(3), 
.swiper-slide-2 .feature:nth-child(3) {position: relative;/*left: -8rem*/}

.item-content-2 .col-lg-3.slideInUp {z-index: 1;}
.swiper-slide-2 .col-lg-3.slideInUp h2 {margin-right: -9rem;}

.crossline {text-decoration: line-through}


header .shop__cart-button .shop__full-cart-icon {
    display: block;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    position: relative;
    left: -2px;
}
header .shop__cart-button .shop__button-container {width: 58px;height: 30px;}




@media (min-width: 1920px) {.container {max-width: 1340px;}}

.slideInUp p{font-weight: 600;margin-right: -2rem;}


.accordion .btn-link i:before {transition: all 0.3s linear;}
.accordion .btn-link i {position: absolute;right: 0;top:0.5rem;transition: all 0.3 linear;font-size: 2.5rem}
/*.accordion .btn-link:not(.collapsed) i.fa-chevron-down::before {
    content: "\f077";
}*/

.accordion .btn-link:not(.collapsed) i.fa-chevron-down {
    transform: rotate(-180deg);
}

.accordion .btn-link .fa-chevron-down::before {
    content: "\e5cf";
    font-family: 'Material icons';
}

.accordion .btn-link {color: var(--color-dark-1);}
.accordion .btn-link:not(.collapsed) {color: var(--color-dark-3);}

.item-content, .app-item-content, .storyboard-item-content {
    width: 100%;
    height: 100%;
    position: absolute;top: 0;left: 0;transition: all 0.4s ease;
}

.bg-tras {/*
background: -moz-linear-gradient(top,  rgba(37,40,42,0.65) 0%, rgba(37,40,42,0) 74%, rgba(37,40,42,0) 80%); 
background: -webkit-linear-gradient(top,  rgba(37,40,42,0.65) 0%,rgba(37,40,42,0) 74%,rgba(37,40,42,0) 80%); 
background: linear-gradient(to bottom,  rgba(37,40,42,0.65) 0%,rgba(37,40,42,0) 74%,rgba(37,40,42,0) 80%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a625282a', endColorstr='#0025282a',GradientType=0 );*/
box-shadow: none !important}

.menu > li > a {
    text-transform: none;
    font-size: calc(10 * 1px + (18 - 10) * ((100vw - 320px) / 2240));
    letter-spacing: 0;
    color: var(--color-fark-1);text-transform: lowercase;
}



.header.light .menu > li > a {color: #fff;}

body.section_7 .page-wrapper__content, 
body.section_8 .page-wrapper__content, 
body.section_9 .page-wrapper__content, 
body.section_10 .page-wrapper__content, 
body.section_11 .page-wrapper__content, 
body.section_12 .page-wrapper__content, 
body.section_13 .page-wrapper__content, 
body.section_14 .page-wrapper__content, 
body.section_15 .page-wrapper__content, 
body.section_16 .page-wrapper__content, 
body.section_17 .page-wrapper__content, 
body.section_18 .page-wrapper__content, 
body.section_19 .page-wrapper__content, 
body.section_20 .page-wrapper__content, 
body.section_21 .page-wrapper__content {background:var(--color-dark-2);}

.header_sticky.light[data-arts-header-sticky-logo="primary"] .logo__img-primary, 
body.section_7 .header_sticky[data-arts-header-sticky-logo="primary"] .logo__img-primary, 
body.section_8 .header_sticky[data-arts-header-sticky-logo="primary"] .logo__img-primary, 
body.section_9 .header_sticky[data-arts-header-sticky-logo="primary"] .logo__img-primary, 
body.section_10 .header_sticky[data-arts-header-sticky-logo="primary"] .logo__img-primary, 
body.section_11 .header_sticky[data-arts-header-sticky-logo="primary"] .logo__img-primary, 
body.section_12 .header_sticky[data-arts-header-sticky-logo="primary"] .logo__img-primary, 
body.section_13 .header_sticky[data-arts-header-sticky-logo="primary"] .logo__img-primary, 
body.section_14 .header_sticky[data-arts-header-sticky-logo="primary"] .logo__img-primary, 
body.section_15 .header_sticky[data-arts-header-sticky-logo="primary"] .logo__img-primary, 
body.section_16 .header_sticky[data-arts-header-sticky-logo="primary"] .logo__img-primary, 
body.section_17 .header_sticky[data-arts-header-sticky-logo="primary"] .logo__img-primary, 
body.section_18 .header_sticky[data-arts-header-sticky-logo="primary"] .logo__img-primary, 
body.section_19 .header_sticky[data-arts-header-sticky-logo="primary"] .logo__img-primary, 
body.section_20 .header_sticky[data-arts-header-sticky-logo="primary"] .logo__img-primary {opacity: 0;visibility: hidden;}


.header_sticky.light[data-arts-header-sticky-logo="primary"] .logo__img-secondary, 
body.section_7 .header_sticky[data-arts-header-sticky-logo="primary"] .logo__img-secondary, 
body.section_8 .header_sticky[data-arts-header-sticky-logo="primary"] .logo__img-secondary, 
body.section_9 .header_sticky[data-arts-header-sticky-logo="primary"] .logo__img-secondary, 
body.section_10 .header_sticky[data-arts-header-sticky-logo="primary"] .logo__img-secondary, 
body.section_11 .header_sticky[data-arts-header-sticky-logo="primary"] .logo__img-secondary, 
body.section_12 .header_sticky[data-arts-header-sticky-logo="primary"] .logo__img-secondary, 
body.section_13 .header_sticky[data-arts-header-sticky-logo="primary"] .logo__img-secondary, 
body.section_14 .header_sticky[data-arts-header-sticky-logo="primary"] .logo__img-secondary, 
body.section_15 .header_sticky[data-arts-header-sticky-logo="primary"] .logo__img-secondary, 
body.section_16 .header_sticky[data-arts-header-sticky-logo="primary"] .logo__img-secondary, 
body.section_17 .header_sticky[data-arts-header-sticky-logo="primary"] .logo__img-secondary, 
body.section_18 .header_sticky[data-arts-header-sticky-logo="primary"] .logo__img-secondary, 
body.section_19 .header_sticky[data-arts-header-sticky-logo="primary"] .logo__img-secondary, 
body.section_20 .header_sticky[data-arts-header-sticky-logo="primary"] .logo__img-secondary  {opacity: 1;visibility: visible;}

.section_cta .h1 {margin-left: -2rem;margin-right: -2rem;}

.pin-up-storyboard .content-wrap .item-content {
    height: calc(100vh - 3*var(--gutter-vertical)) !important;
    width: calc(100vw - 3*var(--gutter-horizontal));
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    z-index: 1;
    background-size: cover;
    background-position: center;text-align: left;max-width: 1840px;
max-height: 1000px;
}

.curtain {opacity: 0 !important;visibility: hidden !important;}

.pin-up-storyboard .content-wrap .item-content, .pin-up-storyboard .content-wrap::after {
width: 80rem !important;
height: 53rem !important;
transform: translate(-50%, -50%) scale(0.85);max-width: none;max-height: none;transition: all -0.5s linear;
}

@media (max-width: 1280px) {
.pin-up-storyboard .content-wrap .item-content, 
.pin-up-storyboard .content-wrap::after {transform: translate(-50%, -50%) scale(0.75);}
.wrapper-lock {transform: scale(0.8);}
.mb-n {margin-bottom: -8rem;}
}

.content-wrap, .storyboard-content-wrap, .content-wrap-t {height: 100%;position: relative;}
.app-item-content .social-btns {margin-right: -4rem;}

.swiper-lazy {width: 100%;}

.wrapper-h .inner{
    transform: scale(0.7);
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-left: 7px solid #fff;
    border-right: 7px solid #fff;
}
.wrapper-h section {position: relative;z-index: 2;border-left: 5px solid #fff;border-right: 5px solid #fff}
.wrapper-h {background-color: var(--color-dark-2);}
.wrapper-h:before {height:50%;content:'';width:100%;display:block;top:0;left:0;position:absolute;background-color:#fff;z-index: 1;}
.wrapper-h::after {
    height: 100%;
    width: 100%;
    background-color: #fff;
    content: '';
    top: calc(50% + 5px);
    left: 50%;
    transform: translate(-50%,-50%) scale(0.7);
    transform-origin: 50% 50%;
    z-index: 0;
    position: absolute;
    box-shadow: 0px 0px 0px 2em var(--color-dark-3);
}
.wrapper-h {
    /*height: calc(100vh - 11rem);
    width: calc(100vw - 6rem);*/
/*
border-top: 6rem solid #fff;
border-left: 2rem solid #fff;
border-right: 2rem solid #fff;
border-bottom: 2rem solid #fff;*/
    overflow: hidden;
}






.content-wrap:before {height:50%;content:'';width:100%;display:block;top:0;left:0;position:absolute;background-color:#fff;z-index: 1;}
.content-wrap::after {
    height: 100%;
    width: 100%;
    background-color: #fff;
    content: '';
    top: calc(50% + 5px);
    left: 50%;
    transform: translate(-50%,-50%) scale(0.7);
    transform-origin: 50% 50%;
    z-index: 0;
    position: absolute;
    box-shadow: 0px 0px 0px 2em var(--color-dark-3);
}


.content-wrap {
    background: var(--color-dark-2);
    height: 100vh;
    text-align: center;
}
.content-wrap::after {
    height: calc(100vh - 3*var(--gutter-vertical)) !important;
    width: calc(100vw - 3*var(--gutter-horizontal)) !important;
    background-color: #fff;
    content: '';
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transform-origin: 50% 50%;
    z-index: 0;
    position: absolute;
    box-shadow: 0px 0px 0px 1em var(--color-dark-3);max-width: 1840px;
max-height: 1000px;
}


.section-product-features .section-fullheight__inner {min-height: 0;}
.section .slider-fullscreen-projects__footer {margin-top: 1.5rem;position: relative;left: auto;bottom: auto;right: auto;}

.app-box img {max-width: 300px;max-height:60vh}

.slider__dot svg .circle {
    stroke: var(--color-dark-3);fill: rgba(104, 104, 104, 0.5) !important;
}
.slider__dot_active::after {
    background-color: #8d8d8d;
}

/* =Simple animation up */
.slideInUp {
  visibility: hidden;
  opacity: 0;
  transition: all 0.7s ease-out;
  -webkit-transform: translate3d(0, 50px, 0);
  transform: translate3d(0, 50px, 0);
}

.fadeIn {
  visibility: hidden;
  opacity: 0;
  transition: all 0.7s ease-out;
}

.is-active .slideInUp, .swiper-slide-active .slideInUp {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.is-active .fadeIn, .swiper-slide-active .fadeIn {
  visibility: visible;
  opacity: 1;
}


.slider__dot svg {
    width: 125px;
    height: 2px;
    border-radius: 4px;
}
.slider__dot {
    position: relative;
    width: 125px;
    height: 10px;
    border-radius: 4px;
    margin:0 10px;
}
.slider__dot::after {
    width: 125px;
    height: 2px;
    border-radius: 4px;
}


.feature::before {
    content: '';
    position: absolute;
    height: 10rem;
    width: 10rem;
    background: url(../../assets/img/assets/marker3.svg);
    background-repeat: repeat;
    background-size: auto;
    background-size: 100%;
    background-repeat: no-repeat;
    right: calc(100% + 2rem);
    top: 1rem;
}


.item-content-1 .feature:nth-child(1)::before, 
.swiper-slide-1 .feature:nth-child(1)::before, 
.item-content-0 .feature:nth-child(1)::before, 
.swiper-slide-0 .feature:nth-child(1)::before, 
.item-content-0 .feature:nth-child(3)::before, 
.swiper-slide-0 .feature:nth-child(3)::before, 
.item-content-2 .feature:nth-child(3)::before, 
.swiper-slide-2 .feature:nth-child(3)::before {
    background-image: url(../../assets/img/assets/marker.svg);
    background-size: auto 10px;
    background-position: top right;
    width: 17rem;
}

/*
.item-content-1 .feature:nth-child(2), 
.swiper-slide-1 .feature:nth-child(2) {left: 2rem;}

.item-content-1 .feature:nth-child(3), 
.swiper-slide-1 .feature:nth-child(3) {left: 4rem;}
*/
.item-content-1 .feature, 
.swiper-slide-1 .feature {margin-bottom: 3rem;}

.item-content-0 .feature:nth-child(2)::before, 
.swiper-slide-0 .feature:nth-child(2)::before {
    background-image: url(../../assets/img/assets/marker2.svg);
    width: 23rem;height: 15rem;
    /*left: calc(-100% - 2rem);*/
}

.item-content-0 .feature:nth-child(3)::before, 
.swiper-slide-0 .feature:nth-child(3)::before  {
    background-image: url(../../assets/img/assets/marker3.svg);
    /*background-size: 6.5rem;
    left: calc(-100% + 5.65rem);*/
}

/* =Simple animation up */
.slideInLeft, .feature {
  visibility: hidden;
  opacity: 0;
  transition: all 0.7s ease-out;
  -webkit-transform: translate3d(50px, 0, 0);
  transform: translate3d(50px, 0, 0);
}
.is-active .slideInLeft, .is-active .feature, .swiper-slide-active .feature {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.feature {
    position: relative;
    left: -1.5rem;
}


.delay1, .feature:nth-child(1) {transition-delay: 0.3s}
.delay2, .feature:nth-child(2) {transition-delay: 0.6s}
.delay3, .feature:nth-child(3) {transition-delay: 0.9s}
.delay4, .feature:nth-child(4) {transition-delay: 4s}
.delay5, .feature:nth-child(5) {transition-delay: 5s}




.section1,
.section3 {
  min-height: 100vh;
  background-color: #222;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 50px;
}

.head {
  display: flex;
  flex-direction: row;
  height: 100vh;
  justify-content: space-around;
  align-items: flex-start;
  padding-top: 60px;
}

.content-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: left;
  height: 400px;
  width: 50%;
  font-size: 40px;
  padding-left: 5em;
}

.images-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50%;
}

.heading {
  opacity: 0;
  position: absolute;
  top: 2em;
}

.scroll-img {
  width: 30vw;
  opacity: 0;
  position: absolute;
  top: 5em;
}

.active {
  opacity: 1;
}

@media only screen and (min-width: 1025px) {
  .section1,
  .section3 {
    font-size: 50px;
  }
  
  .content-box{
    font-size: 40px;  
  padding-left: 5em;
  }
  
}
@media only screen and (max-width: 1024px) {
  .section1,
  .section3 {
    font-size: 35px;
  }
  .content-box{
    font-size: 30px;  
  padding-left: 3em;
    text-align: center;
  }
}
@media only screen and (max-width: 770px) {
  .section1,
  .section3 {
    font-size: 20px;
  }
  .content-box{
    font-size: 25px;  
  padding-left: 1em;
  }
}





.invalid-feedback {display: block;}



.main-wrapper {
  position: relative;
  width: 100%;
  height: auto;
}
.main-wrapper__panel-wrapper {height: 100vh}
.main-wrapper__panel {
  position: absolute;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  visibility: hidden;
  /*height: calc(100vh - 3*var(--gutter-vertical)) !important;
  width: calc(100vw - 3*var(--gutter-horizontal));
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;*/ height: 100%;width: 100%;left: 0;top: 0;
  background-size: auto 80%;background-color: #fff: 
  background-position: center;
  /*max-width: 1840px;
  max-height: 1000px;*/
}

.main-wrapper__panel-wrapper {
  position: relative;
}



.quantity {
  position: relative;
}
.quantity input {
  width: 50px;
  height: 42px;
  line-height: 1.65;
  float: left;
  display: block;
  padding: 0;
  margin: 0;
  padding-left: 20px;
  border: 1px solid #eee;
}
.quantity input:focus {
  outline: 0;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.quantity-nav {
  float: left;
  position: relative;
  height: 42px;
}

.quantity-button {
  position: relative;
  cursor: pointer;
  border-left: 1px solid #eee;
  width: 20px;
  text-align: center;
  color: #333;
  font-size: 13px;
  font-family: "Trebuchet MS", Helvetica, sans-serif !important;
  line-height: 1.7;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  user-select: none;
}
.quantity-button--up {
  position: absolute;
  height: 50%;
  top: 0;
  border-bottom: 1px solid #eee;
}
.quantity-button--down {
  position: absolute;
  bottom: -1px;
  height: 50%;
}