/******//******//******//******//******/
/******      Tailwind Extras          ******/
/******      Tailwind Extras          ******/
/******//******//******//******//******/

@import url("uoc7dwf.css");
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

* {
   font-weight: 300;  
   font-family: "Lato", sans-serif;
}

.z-4{
   z-index: 4;
}

.z-3{
   z-index: 3;
}


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

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

.z-0{
   z-index: 0;
}

.z-minus-1{
   z-index: -1;
}

.z-minus-2{
   z-index: -2;
}

.accordion{
   list-style: none;
}

.top_title_wrapper .text-xxl span{
   display: flex !important;
}
ol, ul {
   list-style: disc;
   padding: 0.4em;
   margin-left: 1.2em;
}

.m-0, .m-0 figure{
   margin: 0px !important;
}

.key-technology .pt-8{
   padding-top: 4em !important;
}

.container1 .accordion{
   margin: 0 auto;
}

.container1 .accordion li .mx-auto{
   margin-left: 0;
}

.grid-cols-4{
   grid-template-columns: repeat(4, minmax(0, 1fr));
}

#customer{
   background-color: #fff;
}

.accordion li div{
   max-width: 100% !important;
}

.tracking-wide{
letter-spacing: 0.025em;
}

.tracking-wider{
   letter-spacing: 0.05em;
   }

   .tracking-widest{
       letter-spacing: 0.12em;
       }


.font-medium{
   font-weight: 500;
}

.font-semibold{
   font-weight: 600;
}


#customer h6{
   color: #000;
   
}

.bold-type, h1{
   font-family: "recent-grotesk", sans-serif !important;
   line-height: 0.9em;
}


.fw-regular{
   font-weight: 500;
}

.fw-bold{
   font-weight: 700;
}

.top_title_wrapper{
   width: 100%;  
   margin-top: 6em;
   margin-bottom: 6em;
   flex-wrap: wrap;
}

.top_title_wrapper .text-xxl{
   line-height: 0.2em;
   font-size: 210px;
   text-transform: uppercase;
   word-wrap: break-word;
   transition: 0s;
}

h1{
    transition: 0s;
} 


.top_title_wrapper .abstract_title{
   width: 25%;
   flex-grow: 1;
}


.top_title_wrapper .pro_right_text{
   width: 25%;
   align-content: end; 
   margin-bottom: 0.4em;
   margin-top: 4em;
}

.top_title_wrapper .professional_title{
   width: 25%;
   flex-grow: 1;
}



.top_title_wrapper .right_text{
   width: 25%;
   align-content: end; 
   margin-bottom: 0.4em;
   margin-top: 4em;
}

.align-center{
   align-content: center;
}

.text-base{
   font-size: 1em;
}

.text-lg{
   font-size: 45px;
}

.text-xl{
   font-size: 3em;
}

.text-2xl{
   font-size: 3.5em;
}

.text-3xl{
   font-size: 4em;
}

.text-4xl{
   font-size: 4.5em;
}

.text-5xl{
   font-size: 5em;
}

.text-6xl{
   font-size: 5.5em;
}


.text-8xl{
   font-size: 140px;
}


.h-50{
   height: 50%;
}

.w-150{
   width: 150%;
}

h2, h3, h4, h5, h6 {
   font-weight: 300;  
   font-family: "Lato", sans-serif;
   margin-bottom: 0.8em;
}

h2{
   font-size: 57px;
}

.bg-pink{
   background-color: #f10195;
}

.text-pink{
   color: #f10195;
}

.text-blue{
   color: #00A7FF;
}

.py-4{
   padding-top: 2em;
   padding-bottom: 2em;
}


.mt-0{
   margin-top: 0;
}

.mt-4{
   margin-top: 2em;
}

.mt-2{
   margin-top: 1.2em;
}

.mt-1{
   margin-top: 0.8em;
}

.mt-05{
   margin-top: 0.4em;
}

.mt-8{
   margin-top: 4em;
}


.mb-0{
   margin-bottom: 0;
}

.mb-4{
   margin-bottom: 2em;
}

.mb-2{
   margin-bottom: 1.2em;
}

.mb-1{
   margin-bottom: 0.8em;
}

.mb-05{
   margin-bottom: 0.4em;
}

.mb-8{
   margin-bottom: 4em;
}

.py-8{
   padding-top: 4em;
   padding-bottom: 4em;
}

.py-10{
   padding-top: 5.5em;
   padding-bottom: 5.5em;
}

.py-12{
   padding-top: 8em;
   padding-bottom: 8em;
}

.px-8{
   padding-left: 4em;
   padding-right: 4em;
}

.px-4{
   padding-left: 2em;
   padding-right: 2em;
}

.px-2{

}

.left-minus-10{
   left: -10%;
}


.left-minus-20{
   left: -20%;
}


.align-center{
   align-content: center;
}

.absolute{
   position: absolute;
}

.h-100{
   height: 100%;
}

.h-90{
   height: 100%;
}

.top-10{
   top: 10%;
}

.top-20{
   top: 20px
}

.bottom-0{
   bottom: 0px;
}

.w-75{
   width: 75%;
}

.w-60{
   width: 60%;
}

/******//******//******//******//******/
/******      THEME AREA          ******/
/******      THEME AREA          ******/
/******//******//******//******//******/

.swipe-button:after{
display: none;
}

.external-link .wp-element-button{
   background-color: transparent !important;
   padding: 5px 5px 5px 50px !important;
   overflow: visible;
   color: #000000;
}

.external-link:hover .wp-element-button::after{
   transform: translateX(0px) rotate(90deg) !important;

}

.external-link .wp-element-button::after{
   height: 100%;
   position: absolute;
   top: 0px;
   width: 35px;
   background-color: #000;
   left: 0px;
   /* content: url(../img/upload-icon-white.svg); */
   content: url(../svg/external-icon-white.svg);
   z-index: 1;
   align-content: center;
   border-left: 1px solid white;
   padding: 5px 9px 2px 9px;
   transition: 0.3s linear;
   transition: 0.5s;
}

.grey-to-color img, .grey-to-color .grey_image, .image_promo_wrapper .background-image{
   filter: grayscale(2);
   transition: 1s linear;
}

.grey-to-color:hover img, .grey-to-color:hover .grey_image, .image_promo_wrapper:hover .background-image{
   filter: grayscale(0);
}


/** NAVIGATION **/



#professional.pro-button-select .pro-text-wrap{
   border-bottom: 4px solid #ffffff;
}


.text-menu a::first-line {
   word-spacing: 165px;
   text-transform: uppercase;
   font-weight: 700;
   letter-spacing: 0.12em;
 }

 .text-menu a{
   width: 165px;
   height: auto;
   text-align: center;
 }

.icon_image_right{
   position: absolute;
   top: -30px;
   right: 50px;
  /* animation: icon_image_rotate 8s linear infinite; */
   
}

@keyframes icon_image_rotate {
   from {
       transform: rotate(0deg);
     }
   
     to {
       transform: rotate(360deg);
     }
 }

.image_promo_wrapper{
   min-height: 450px;
}


.promo_text_wrapper{
   padding: 4em 2.8em;
}


.pro-button-wrapper{
   border-bottom: 1px solid #fff;
}

#professional{
   background: #000;
}

.image-overlap-text .image-overlap img{
   height: 100%;
   /* max-width: fit-content; */
   width: auto;
}

.image-overlap-text, .statistic-block, .promotion-list{
   z-index: 1;
   position: relative;
}

.professional-image-banner{
   min-height: fit-content; 
   overflow: hidden
}

.professional-image-banner .background-image{      
   background-repeat: no-repeat;
   background-size: cover;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   position: absolute;}

.professional-image-banner .text_wrapper{
   z-index: 2;
}

.professional-image-banner .top_text, 
.professional-image-banner .bottom_text{
   font-size: 28px !important;
   font-weight: 900;
}

.professional-image-banner .top_text, 
.professional-image-banner .bottom_text{
   font-size: 8em !important;
   text-transform: uppercase;
}

.professional-image-banner .bottom_text{
   overflow-x: hidden;
   word-wrap: break-word;
}
.professional-image-banner .top_title_wrapper .title_description{
   font-size: 18px !important;

}

.top_title_wrapper{
   display: flex;
   /*flex-wrap: wrap;*/
}

.pink-haze::before{
   width: 100%;
   height: 100%;
   background: #f101b2;
background: radial-gradient(circle, #f101b2 0%, rgba(255, 255, 255, 0) 50%);
   position: absolute;
   top: 0px;
   right: -50%;
   content: '';
   z-index: 1;
   animation: pink-haze_move 10s infinite;

}

.professional-product .swipper-pro-wrapper{
   position: relative;
   overflow: hidden;
   width: 90%;
   margin: 0 auto;
} 

.haze-bottom{
   position: relative;
   overflow: hidden;
}

.haze-swipe .swiper-wrapper::after, .haze-bottom::before{
   width: 100%;
   height: 150%;
   background: #f101b2;
background: radial-gradient(circle, #f101b2 0%, rgba(255, 255, 255, 0) 50%);
   position: absolute;
   top: 25%;
   right: 0%;
   content: '';
   z-index: 2;
   mix-blend-mode: color-dodge;
}

.product-block-wrap .darken_haze_hover::before{
    width: 100%;
    height: 150%;
    background: #f101b2;
 background: radial-gradient(circle, #f101b2 0%, rgba(255, 255, 255, 0) 50%);
    position: absolute;
    top: 25%;
    right: 0%;
    content: '';
    z-index: 2;
    opacity: 0.5;
    mix-blend-mode: darken;
 }

 .product-block-wrap:hover .darken_haze_hover:before {
    transform: scale(0) translateY(15%);
    opacity: 0;
    transition: all 1s;
}


 .bottom-image:after {
    transform: scale(1);
    width: 100%;
    height: 100%;
    background: rgb(233, 36, 137);
    background: radial-gradient(circle, rgba(233, 36, 137, 0.5) 0%, rgba(255, 255, 255, 0) 50%);
    position: absolute;
    bottom: -75%;
    right: 0%;
    content: '';
    z-index: -1;
    mix-blend-mode: darken;
}


 .darken_haze::before{
    width: 100%;
    height: 150%;
    background: #f101b2;
 background: radial-gradient(circle, #f101b2 0%, rgba(255, 255, 255, 0) 50%);
    position: absolute;
    top: 25%;
    right: 0%;
    content: '';
    z-index: 2;
    mix-blend-mode: darken;
 }


.haze-top::before{
   width: 100%;
   height: 100%;
   background: #f101b2;
background: radial-gradient(circle, #f101b2 0%, rgba(255, 255, 255, 0) 50%);
   position: absolute;
   top: -50%;
   right: 0%;
   content: '';
   z-index: -1;
   mix-blend-mode: darken;
}

.product-haze-bottom{
   position: relative;
   overflow-y: clip;
}

.product-haze-bottom::before{
   overflow: visible;
   width: 154%;
   height: 150%;
   background: rgb(233, 36, 137);
   background: radial-gradient(circle, #f101b2 -22%, rgba(255, 255, 255, 0) 58%);
   position: absolute;
   top: 45%;
   right: -20%;
   content: '';
   z-index: 0;
   mix-blend-mode: multiply;
   animation: pink-haze-bottom 8s infinite;

}

.pink-haze-bg::before{
   overflow: visible;
   width: 70%;
   height: 75vh;
   background: #f101b2;
   background: radial-gradient(circle, #f101b2 0%, rgba(255, 255, 255, 0) 50%);
   position: absolute;
   top: -50vh;
   right: -20%;
   content: '';
   z-index: 0;
   mix-blend-mode: color-burn;
   
}

.pink-haze-bg-bottom::before{
   overflow: visible;
   width: 70%;
   height: 75vh;
   background: #f101b2;
   background: radial-gradient(circle, #f101b2 0%, rgba(255, 255, 255, 0) 50%);
   position: absolute;
   top: 50%;
   right: -20%;
   content: '';
   z-index: 0;
   mix-blend-mode: color-burn;
}

.marquee-slider{
   padding: 0px;
   background-color: #fff;
   border: 0px;
}

.marquee-slider .swiper-slide p{
   font-size: 1.2em;
}

.marquee-slider .swiper-slide img{
  display: none;
}

.marquee-slider .swiper-wrapper{
   height: fit-content
}

.marquee-slider .swiper-slide{
   align-content: center;
   align-items: center;
   padding: 0em  1.8em !important;
   margin: 2em 0 2em 0 !important;
   border-right: 1px solid #000;
}

.professional-button, button, .wp-block-button__link{
   font-family: "Lato";
   position: relative;
   align-content: center;
   color: #ffffff;
   letter-spacing: 0.18em;
   font-weight: 500;
   text-align: left;
   border-radius: 0;
   padding: 5px 60px 5px 20px !important;
   font-size: 0.9em;
   overflow: hidden;
}

.professional-button::after, .wp-block-button__link::after{
   height: 100%;
   position: absolute;
   top: 0px;
   right: 0px;
   /* content: url(../img/upload-icon-white.svg); */
   content: url(../svg/arrow-right-white.svg);
   z-index: 1;
   align-content: center;
   border-left: 1px solid white;
   padding: 5px 12px 0px 14px;
   transition: 0.3s linear;
}

.swiper-5 {
   overflow: hidden;


   .swiper-slide {
     height:auto;
   }
 
 
   .swiper-button-prev:after {
     background-image: url("");
     background-repeat: no-repeat;
     background-size: 40% auto;
     background-position: center;
     display: none;
     @apply hidden;
     @apply md:block;
     @apply absolute;
   }
 
 
   .swiper-button-next:after {
     background-image: url("");
     background-repeat: no-repeat;
     background-size: 40% auto;
     background-position: center;
     @apply hidden;
     @apply md:block;
     @apply absolute;
   }
 
   .swiper-slide-next {
     @apply border-x border-grey-line;
   }
 
   .swiper-button-next:after,  .swiper-button-prev:after {
       content: '' !important;
     display: none !important;
   }
 
   .swiper-button-next, .swiper-button-prev {
     top:40% !important;
   }
 
 }
 


.professional-button:hover::after, button:hover::after, .wp-block-button__link:hover::after{
  transform: translateX(40px); 
  transition: 0.5s;
}
/*CHECKLIST*/

.checkbox-list .icon{
margin-right: 20px;
}

.checkbox-list ul li .text-list-wrapper {
   border-bottom: solid 2px #E5E5E5;
   border-top: solid 0px #E5E5E5;
   }

.checkbox-list ul li:first-child  .text-list-wrapper {
   border-bottom: solid 2px #E5E5E5;
   border-top: solid 2px #E5E5E5;
   }

.wp-block-columns{
   margin: auto;
}

.bg-white{
   background-color: #ffffff;
}

.professional-product .cart, 
.professional-product #price-string{
   display: none;
}

.professional-product .product_title, .font-lato{
   font-family: "Lato", sans-serif !important;
}

.professional-product .pro-slider-buttons{
position: absolute;
bottom: 50px;
right: 10px;
width: 120px;
}

.swiper-button-next, .swiper-button-prev{
width: 35px !important;
height: 35px !important;
background-color: #000;
}

.swiper-button-next::before{
   height: 100%;
   position: absolute;
   top: 0px;
   right: 0px;
   content: url(../svg/arrow-right-white.svg);
   z-index: 1;
   align-content: center;
   padding: 5px 12px 0px 14px
} 

.button-group button{
margin-right: 1.2em;
margin-bottom: 0.4em;
}

.button-group {
   flex-wrap: wrap;
}

.download-button::after{
   height: 100%;
   position: absolute;
   top: 0px;
   right: 0px;
   content: url(../svg/download-icon-white.svg);
   z-index: 1;
   align-content: center;
   border-left: 1px solid white;
   padding: 0px 10px;
}

.swiper-button-prev::before{
   height: 100%;
   position: absolute;
   top: 0px;
   right: 0px;
   content: url(../svg/arrow-left-white.svg);
   z-index: 1;
   align-content: center;
   padding: 5px 12px 0px 14px
}

.professional-product .swiper-2 .swiper-slide-next, 
.professional-product .swiper-3 .swiper-slide-next, 
.professional-product .swiper-4 .swiper-slide-next,
.professional-product .swiper-5 .swiper-slide-next{
   border: 0px;
}

.grow{
flex-grow: 1;
}
.top_title_wrapper .text-xxl { 
   display: flex;
   flex-wrap: wrap;
}

.top_title_wrapper .text-xxl span { 
   display: block; 
   margin-bottom: 0em;
   line-height: 0.76em;
   padding-right: 0.05em;
} 

/******//******//******//******//******/
/******    Product Pages       ******/
/******    Product Archive       ******/
/******//******//******//******//******/


.product_icon_container{
	flex-wrap: wrap;
}

.product_icon_container .product_icon_wrapper{
	    margin: 0em 1.4em 1.4em 0em;
	    width: 20%;
    max-width: 100px;
    min-width: 35px;
}

.product_icon_container .product_icon_wrapper img{
	    width: 100%;
}

.slide-instruction{
    position: absolute;
    /* background: red; */
    width: 2px;
    height: 90%;
    bottom: 5%;
    right: -2px;
    box-shadow: 0 0px 8px rgb(149 149 149 / 116%);
    align-items: center;
    display: flex;
    z-index: 2;
    animation: fade_out 8s linear;
    max-height: 232px;

}

.slide-instruction::before{
    right: 4px;
    content: url(../svg/arrow-right.svg);
    position: absolute;
    z-index: 2;
    animation: moving_arrow 2s linear infinite;
    background: rgba(255, 255, 255, 0.391);
    width: 30px;
    height: 30px;
    border-radius: 25em;
    padding: 6px 11px;
}

@keyframes moving_arrow {
    0%   { right: 20px; opacity: 0.5;}
    25%   { right: 12px; opacity: 1; }
    50%   { right: 6px; opacity: 1; }
    75%   { right: 0px; opacity: 0; }
    100% { right: 30px; opacity: 0; }
}

@keyframes fade_out {
    0%   { opacity: 1; }
    100% {  opacity: 0; }
}

.product-top-info{
max-width: 800px;
margin: 0 auto;
}

.product-block-wrap:hover .top-image{
opacity: 0;

}

.product-block-wrap{
   overflow: hidden;
}

.bottom-image:after{
   transform: scale(1);
   width: 100%;
   height: 100%;
   background: rgb(233,36,137);
background: radial-gradient(circle, rgba(233,36,137,0.5) 0%, rgba(255, 255, 255, 0) 50%);
   position: absolute;
   bottom: -75%;
   right: 0%;
   content: '';
   z-index: -1;
   mix-blend-mode: darken;
   
   }

.product-block-wrap:hover .bottom-image {
   bottom: 0px;
   animation-delay: 0.6s;
   }

   .product-block-wrap:hover  .bottom-image img{
       height: 100%;
   }
   
   .product-block-wrap:hover  .bottom-image:after{
      
       transform: scale(1.4) translateY(-15%);
       transition: all  1s;
   }

.product-block-wrap .top-image{
   z-index: 1;
   position: relative;
   transition:  0.5s;
   }

   .product-block-wrap .bottom-image{
       z-index: 0;
       bottom: -25px;
       animation-delay: 0.6s;
       transition: all 0.6s;
       }

.pro-product-container{
   width: 100%;
   max-width: 1800px;
   margin: 0 auto;
   justify-content: center;
   display: flex;
   padding: 2em;

}

.offset-image figure{
   right: -2em;
   position: relative;
   width: 120%;
   float: right;
}

.key-technology .wp-block-column, .swatch-description{
   gap: 0px;
}

.swatchTitle {margin-left: 8px;}

.key-technology{
   padding-top: 4em;
}

.key-technology .wp-block-columns{
   gap: 0px;
}

.key-technology .wp-block-column{
   position: relative;
}


.offset-image{
   position: relative;
   margin: 0px;
}

.offset-image figure{
   margin: 0px;
}

.product-wrapper{
   flex-grow: 1;
}

.pro-product-row{
   display: flex;
   margin: 0 auto;
   width: 100%;
}

.pro-product-container #product-loop{
   margin: 0 auto;
   gap: 8px;
}

.product{
   border: 0px !important;
}

.shop-filter{
   min-width: 300px;
   width: 20%;
}

.category-information{
   max-width: 800px;
}

.swatch-list{
   width: 100%;
   height: fit-content;
   scroll-behavior: smooth;
   -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.swatch-wrapper{
   width: 200px;
   height: fit-content;
   margin-right: 0;
   -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */.swatch-list 
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
    cursor: pointer;
}

.swatch-list-wrap{
   display: flex;
   height: 100%;
   width: fit-content;
  
}

.swatch-description{
   min-width: 300px;
   width: 30%;
   margin-right: 2em;
}

.overflow-scroll{
   overflow-x: scroll;
   -ms-overflow-style: none;  /* IE and Edge */
   scrollbar-width: none;  /* Firefox */
}


/******//******//******//******//******/
/******          Animation       ******/
/******          Animation       ******/
/******//******//******//******//******/

/* Scroll animation helpers
--------------------------------------------- */

.left-to-right-animation{
   transform: translateX(-100%);
   opacity: 1;
   transition: all 1.2s;
}

.left-to-right-animation.visible{
   transform: translateX(0%);
   opacity: 1;
   transition: all 1.2s;
}

.right-to-left-animation{
   transform: translateX(100%);
   opacity: 1;
   transition: all 1.2s;
}

.right-to-left-animation.visible{
   transform: translateX(0%);
   opacity: 1;
   transition: all 1.2s;
}

.refraction_yellow{
   top: 0px;
   left: 0px;
   color: yellow;
   /* animation: yellow_refraction_move 1s; */
   mix-blend-mode: overlay;
}

.refraction_red{
   top: 0px;
   left: 0px;
   color: #E92489;
   /* /animation: red_refraction_move 1s infinite; */
   mix-blend-mode: overlay;
}

.refraction_blue{
   top: 0px;
   left: 0px;
   color: rgb(58, 196, 255);
   /* animation: blue_refraction_move 1s infinite; */
   mix-blend-mode: overlay;
   z-index: 100;
}

.refraction_yellow_movement{
   animation: yellow_refraction_move 1s;
}

.refraction_red_movement{
   animation: red_refraction_move 1s;
}

.refraction_blue_movement{
   animation: blue_refraction_move 1s;
}

@keyframes yellow_refraction_move {
   0% {
       transform: translateX(0px) scale(1);
       filter: blur(0px);
       opacity: 1;
     }


     50% {
       transform: translateX(0.5px) scale(1) skew(1deg, 0.5deg);
       filter: blur(1px);
       opacity: 0.8;
       

     }

   
     100% {
       transform: translateX(0px) scale(1);
       filter: blur(0px);
       opacity: 1;
     }
 }

 @keyframes red_refraction_move {
   0% {
       transform: translateX(0px) scale(1);
       filter: blur(0px);
       opacity: 1;
     }


     50% {
       transform: translateX(1.5px) scale(1);
       filter: blur(1px);
       opacity: 0.8;

     }

   
     100% {
       transform: translateX(0px) scale(1);
       filter: blur(0px);
       opacity: 1;
     }
 }

 @keyframes blue_refraction_move {
   0% {
       transform: translateX(0px) scale(1);
       filter: blur(0px);
       opacity: 1;
     }


     50% {
       transform: translateX(-2px) translateY(-2px) scale(1);
       filter: blur(1px);
       opacity: 0.8;

     }

   
     100% {
       transform: translateX(0px) scale(1);
       filter: blur(0px);
       opacity: 1;
     }
 }

.animatable-section {
   visibility:hidden;
   opacity:0;
   transform: translateY(20%);
   transition: none;
}

span{
   position: relative;
   overflow: hidden;
}


@keyframes pink-haze_move {
   0% {
       transform: translateX(0%);
       opacity: 0.8;
       top: 0px;
       height: 150%;
     }

     25% {
       transform: translateX(-30%);
       opacity: 0.3;
       top: -20%;
       height: 150%;

     }

     50% {
       transform: translateX(-10%);
       opacity: 0.4;
       top: 20%;
       height: 150%;

     }

     75% {
       transform: translateX(40%);
       opacity: 0.5;
       top: -100%;
       height: 150%;

     }

   
     100% {
       transform: translateX(0%);
       opacity: 0.8;
       top: -20px;
       height: 150%;
     }
 }


 @keyframes pink-haze-bottom {
   0% {
       transform: translateY(0%) scale(1);
       opacity: 1;
     }


     50% {
       transform: translateY(-10%) scale(0.7);
       opacity: 0.8;

     }

   
     100% {
       transform: translateY(0%) scale(1);
       opacity: 1;
     }
 }


span.visible::before{
  transform: translateX(-101%);
  transition: all 1.2s;
}

/* @media screen and (min-width:801px) {
} */

.wp-block-media-text__media.animatable-section,
.wp-block-columns.is-style-slide-out > .wp-block-column:first-child,
.homepage-unit-columns .wp-block-column:first-child,
.numbered-heading {
   transform: translateX(-20%);
}

.has-media-on-the-right .wp-block-media-text__media.animatable-section,
.wp-block-columns.is-style-slide-out > .wp-block-column:last-child,
.homepage-unit-columns .wp-block-column:last-child {
   transform: translateX(20%);
}

.homepage-arrows .wp-block-column {
   transform-origin: 0 0;
   transform: scaleX(0);
}

.animatable-section.scrolledPast {
   visibility:visible;
   opacity:1;
   transform: scaleX(1) translateY(0) !important;
   transition: opacity 0.5s linear,
               transform 0.2s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

.wp-block-media-text__media.animatable-section.scrolledPast {
   transition-delay:0s;
}


/** case Study Slider **/

.case-study-swipe .case-wrapper{
   display: flex;
   justify-content: end;
}


.case-study-swipe .case-wrapper .background-image{
   left: 0px;
}

.case-study-swipe .case-wrapper .case-slider-text-wrapper{
   height: fit-content;
   margin-top: 8em;
   max-width: 600px;
}


/******//******//******//******//******/
/******       Gravity Form       ******/
/******       Gravity Form       ******/
/******//******//******//******//******/

form input, 
form textarea, 
form select, 
form input, 
form textarea, 
form select, 
form input, 
form textarea, 
form select, 
form input, 
form textarea, 
form select,
.gform_body .ginput_container input, 
.gform_body textarea, 
.gform_body select, 
.gform_body input, 
.gform_body textarea, 
.gform_body select, 
.gform_body input, 
.gform_body textarea, 
.gform_body select, 
.gform_body input, 
.gform_body textarea, 
.gform_body select
{
   border: 0px;
   border-bottom: 2px solid #E5E5E5;
   background: none !important;
   box-shadow: none;
}

.gform_wrapper input[type='email'], .gform_wrapper textarea, .gform_wrapper input[type='password'], .gform_wrapper input[type='text']{
   border-radius: 0px;
}


.ginput_container_textarea textarea.medium{
   min-block-size: 1px !important;
   height: 50px;
}

.gform_wrapper.gravity-theme .gform_footer input{
   margin: 0px;
}

.gform_footer:hover::after{
   transform: translateX(40px); 
   transition: 0.5s;
}

.gform_footer input[type='submit']{
  padding: 0px !important;
  font-weight: 600 !important;
}

.gform_footer input[type='submit']:hover{
   color: #fff;
}

.gform_footer{
   font-family: "Lato";
   position: relative;
   align-content: center;
   color: #ffffff;
   letter-spacing: 0.18em;
   font-weight: 500;
   text-align: left;
   border-radius: 0;
   border: 0px;
   padding: 5px 60px 5px 20px !important;
   font-size: 0.9em;
   overflow: hidden;
   background-color: #E92489 !important;
   width: fit-content !important;

}

.gform_footer .gform_button{
   border: 0px !important;
   box-shadow: 0px !important;
}

.gform_footer::after{
   height: 100%;
   position: absolute;
   top: 0px;
   right: 0px;
   /* content: url(../img/upload-icon-white.svg); */
   content: url(../svg/arrow-right-white.svg);
   z-index: 1;
   align-content: center;
   border-left: 1px solid white;
   padding: 5px 12px 0px 14px;
   transition: 0.3s linear;
}

@media screen and (max-width: 800px){
   
   .wp-block-column.animatable-section {
       transition-delay: 0s !important;
   }
   
}


@media only screen and (min-width: 1500px) {

   .top_title_wrapper .text-xxl{
       line-height: 0.8em;
       font-size: 260px;
       text-transform: uppercase;
       word-wrap: break-word;
   }


 }

@media only screen and (max-width: 1300px) {

   /* .top_title_wrapper .professional_title h1{
       line-height: 0.8em;
       font-size: 16em;
       text-transform: uppercase;
       overflow-x: hidden;
       overflow-y: hidden;
       word-wrap: break-word;
   } */

   /* .professional-image-banner{
       min-height:50vh; overflow: hidden
   } */

   /* .pro-product-row {
       flex-wrap: wrap;
   } */

   #product-loop{
       display: grid;
       grid-template-columns: 2fr 2fr !important;
   }


   .top_title_wrapper{
     
   }
   
   .top_title_wrapper .text-xxl{
       line-height: 0.8em;
       font-size: 11em;
       text-transform: uppercase;
       overflow-x: hidden;
       overflow-y: hidden;
       word-wrap: break-word;
   }


 }


@media only screen and (max-width: 960px) {

   h2{
       font-size: 2em;
   }

   .professional-product .swipper-pro-wrapper{
       position: relative;
       overflow: hidden;
       width: 100%;
       margin: 0 auto;
   } 


   .professional-image-banner{
       min-height: fit-content !important;
   }

   #swatch-loop{
       display: block;
       flex-wrap: wrap;
   }

   .swatch-list-wrap{
       margin-left: 0px;
       margin-top: 1.8em;
   }

   .swatch-description{
       width: 100%;
       max-width: 500px;
   }

   .key-technology .pt-8{
       padding-top: 1em !important;
   }

   .top_title_wrapper{
       width: 100%;  
       margin-top: 6em;
       margin-bottom: 6em;
       padding: 1.4em;
       flex-wrap: wrap;
   }

   .top_title_wrapper .pro_right_text{
       margin-top: 1em;
       width: 100%;
   }

   .top_title_wrapper{
       width: 100%;  
       margin-top: 5em;
       margin-bottom: 5em;
       padding: 1.4em;
   }
   
   .top_title_wrapper .text-xxl{
       line-height: 0.8em;
       font-size: 8em;
       text-transform: uppercase;
       overflow-x: hidden;
       overflow-y: hidden;
       word-wrap: break-word;
   }

   .top_title_wrapper .abstract_title{
       width: 100%;
   }

   .top_title_wrapper .professional_title{
       width: 100%;
   }
   
   .top_title_wrapper .right_text{
       width: 100%;
   }

   .case-wrapper{
       padding: 0px;
       margin: 0px;
   }

.case-study-swipe .case-wrapper{
   display: block;
   align-content:baseline;

}

.case-study-swipe .case-wrapper .background-image{
   min-height: 500px;
   width: 100%;
   position: relative;
}

.case-study-swipe .case-wrapper .case-slider-text-wrapper{
   height: fit-content;
   position: relative;
   margin-top: 0em;
   max-width: 100%;
}
   

 }


 .shop-filter .accordion .inner {
   overflow: hidden;
   display: block;
}

@media only screen and (max-width: 800px) {
   .grid-cols-2 {
     display: block;
   }


.shop-filter .accordion .inner {
   overflow: hidden;
   display: none;
}

   .offset-image figure{
       right: 0em;
       position: relative;
       width: 100%;
       float: right;
   }

   .key-technology .wp-block-column, .swatch-description, .px-8{
       padding: 1em 0.8em;
   }

   .px-8{
       padding: 1.4em 1.8em;
   }

   .top_title_wrapper{
       width: 100%;  
       margin-top: 2em;
       margin-bottom: 2em;
       padding: 1.4em;
   }

.pro-product-row{
   display: grid;
   grid-template-columns: 1fr !important;
}

   #product-loop{
       display: grid;
       grid-template-columns: 2fr 2fr !important;
   }

   
   .top_title_wrapper .text-xxl{
       line-height: 0.8em;
       font-size: 8em;
       text-transform: uppercase;
       overflow-x: hidden;
       overflow-y: hidden;
       word-wrap: break-word;
   }

   .image_promo_wrapper{
       min-height: 300px;
   }

   .promo_text_wrapper{
       padding: 2.8em 1.8em;
   }

 }



@media only screen and (max-width: 500px) {
/*     
   .top_title_wrapper .text-xxl{
       font-size: 4em;
       text-transform: uppercase;
       overflow-x: hidden;
       overflow-y: hidden;
       word-wrap: break-word;
       line-height: 0.8em;
       margin-top: 0em;
       margin-bottom: 0.4em;
   } */

   .top_title_wrapper{
       width: 100%;  
       margin-top: 0.8em;
       margin-bottom: 0.8em;
       padding: 1.4em;
   }

   #product-loop{
       justify-content: center;
       display: grid;
       grid-template-columns: 2fr !important;
   }
   
   .top_title_wrapper .text-xxl{
       line-height: 0.8em;
       font-size: 5em;
       text-transform: uppercase;
       overflow-x: hidden;
       overflow-y: hidden;
       word-wrap: break-word;
   }

   #product-loop .product{
       width: 300px;
       margin: auto;
   }
 }

 @media only screen and (min-width: 768px) {
   .professional-product .product:nth-child(3n+1) {
       border: 0px; 
   }
}