/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 30 2025 | 12:42:12 */
.ctm-subscribeform .fusion-form-field {
    padding: 0px !important;
}
header.fusion-header-wrapper {
    display: none;
}
/* .page-id-4258 section#content:before {
    content: '';
    background: url(https://staging.acrylicdigital.co.uk/wp-content/uploads/2025/05/image-2.png);
    position: absolute;
	width: 1861px;
    height: 2281px;
	background-position: center right;
	top: 10%;
	z-index: -1;
	right: -18%;
	background-size: auto;
} */
.page-id-4258 section#content:after {
    content: '';
    background: url(https://staging.acrylicdigital.co.uk/wp-content/uploads/2025/05/image-1-2.png);
    position: absolute;
    width: 2716px;
    height: 2468px;
    background-position: center right;
    top: 34%;
    right: -18%;
    background-size: auto;
    z-index: -1;
}
.single-avada_portfolio section#content:before {
    content: '';
    background: url(https://staging.acrylicdigital.co.uk/wp-content/uploads/2025/05/Knot-Shape-web-png.png);
    position: absolute;
    width: 100%;
    height: 1471px;
    background-position: center right;
    top: 42%;
    right: -23%;
    transform: rotate(0deg);
    z-index: 9;
    background-size: auto;
}
.ctm-subscribeform input {
    border-radius: 50px !important;
}
.ctm-recent-projects {
  overflow: clip;
  position: relative;
}

.ctm-recent-projects:before {
  content: "";
  position: absolute;
  background: url('/wp-content/uploads/2025/05/twistedpaint-web.png');
  aspect-ratio: 1/1;
  height: 100%;
  inset: 0 auto 0 15%;
  margin: auto;
  transform: rotate(40deg);
  background-size: contain;
  background-repeat: no-repeat;
}

@media(max-width: 640px){
  .ctm-recent-projects:before {
      inset: -10%;
  }
}
.ctm-logo-wrapper  .fusion-lottie.fusion-lottie-1 {
  position: absolute;
  inset: 0;
  transform: translate(-10%, -24%);
}

.ctm-hero-banner-serch {
  width: 100%;
  text-align: center;
  max-width: 562px;
  margin-inline: auto;
  padding-inline: 0;
  z-index: 11;
}
.ctm-hero-banner-serch .fusion-form-input-with-icon i {
  display: none;
}
.ctm-hero-banner-serch .fusion-form-form-wrapper .fusion-form-field .fusion-form-input-with-icon {
  position: relative;
}
.ctm-hero-banner-serch .fusion-form-form-wrapper .fusion-form-field .fusion-form-input-with-icon:before {
  content: "";
  position: absolute;
  inset: -7px 0 0;
  background: #D8D4D4;
  z-index: -1;
  border-radius: 43px;
}
.ctm-hero-banner-serch .fusion-form-form-wrapper .fusion-form-field input.fusion-form-input {
  padding: 19px 65px 22px;
  border-radius: 50px;
  height: auto;
  line-height: 31px;
  width: 100% !important;
  border: 0;
}



.ctm-hero-banner-serch .fusion-form-form-wrapper  button.fusion-button {
  background: #FD646B;
  border-radius: 28px;
  max-width: 244px;
  width: 100%;
  padding: 14px;
  text-transform: uppercase;
  transition: all 0.3s ease-in-out;
}
.ctm-hero-banner-serch .fusion-form-form-wrapper  button.fusion-button:before {
  content: "";
  position: absolute;
  inset: -4px 0 4px;
  background: #920726;
  border-radius: 28px;
  z-index: -1;
  transition: all 0.3s ease-in-out;
}
.ctm-hero-banner-serch .fusion-form-form-wrapper  button.fusion-button:hover {
  background: #B19CD9;
}
.ctm-hero-banner-serch .fusion-form-form-wrapper  button.fusion-button:hover:before {
  background: #6E1BAD;
  inset: 4px 0 -4px;
}

.ctm_btn {
  background: #FD646B !important;
  border-radius: 28px !important;
  max-width: none !important;
  width: auto !important;
  padding: 14px !important;
  display: inline-flex !important;
  margin-inline: auto !important;
  text-transform: uppercase !important;
  transition: all 0.3s ease-in-out !important;
}
.ctm_btn:before {
  content: "" !important;
  position: absolute !important;
  inset: -4px 0 4px !important;
  background: #920726 !important;
  border-radius: 28px !important;
  z-index: -1 !important;
  transition: all 0.3s ease-in-out !important;
}
.ctm_btn:hover {
  background: #B19CD9 !important;
}
.ctm_btn:hover:before {
  background: #6E1BAD !important;
  inset: 4px 0 -4px !important;
}

.ctm_bgimage {
  overflow: clip;
  position: relative;
}

.ctm_bgimage:before {
  content: "";
  position: absolute;
  background: url('/wp-content/uploads/2025/05/Knot-Shape-web.png');
  margin: auto;
  background-size: contain;
  background-repeat: no-repeat;
  inset: 0% 0 -11% 0;
  background-position: bottom right;
  transform: translate(23%, 0%);
  max-width: 1576px;
}



.ctm_bgimage .fusion-column-wrapper {
  position: relative;
}
.ctm_bgimage .fusion-column-wrapper .fusion-imageframe img{
  mix-blend-mode: luminosity;
  opacity: 0.86;
}
.ctm_bgimage .fusion-column-wrapper .ctm_column {
  position: relative;
}
.ctm_bgimage .fusion-column-wrapper .ctm_column .fusion-text {
  color: #fff;
  position: relative;
  z-index: 2;
  margin-top: 20px;
}
.ctm_bgimage .fusion-column-wrapper .fusion-lottie {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, calc(-50% - 30px));
  width: 748px;
  aspect-ratio: 1/1;
  height: auto;
  margin: 0;
}
.ctm_bgimage .fusion-column-wrapper .ctm_column:nth-of-type(3) .fusion-lottie {
  transform: translate(-50%, calc(-50% - 90px));
}
body.page-id-4291 main#main{
  position: relative;
}
body.page-id-4291 main#main:before {
  background-image: url('https://staging.acrylicdigital.co.uk/wp-content/uploads/2025/05/infinitynew8-web-png.png');
  content: "";
  position: absolute;
  inset: -30% -30% 0;
  z-index: 0;
  display: block;
  background-size: auto 100%;
/*   animation: transformLoop 24s steps(3) infinite; */
  animation: bounceSteps 18s infinite;
  transform-origin: center;
  animation-timing-function: cubic-bezier(.18,.89,.45,1.36);
  background-position: center;
}
/*
@keyframes transformLoop {
  0% {
    transform: rotate(-18deg);
  }
  33.33% {
    transform: rotate(40deg);
  }
  66.66% {
    transform: rotate(125deg);
  }
  100% {
    transform: rotate(-18deg);
  }
}
*/
@keyframes bounceSteps {
  0% {
    transform: rotate(45deg) translate(10px, 12px);
  }

  11% {
    transform: rotate(55deg) translate(12px, 14px); /* overshoot */
  }

  22% {
    transform: rotate(180deg) translate(5px, 8px); /* settle */
  }

  33% {
    transform: rotate(180deg) translate(5px, 8px); /* hold */
  }

  44% {
    transform: rotate(190deg) translate(7px, 10px); /* overshoot */
  }

  55% {
    transform: rotate(12deg) translate(16px, 17px); /* settle */
  }

  66% {
    transform: rotate(12deg) translate(16px, 17px); /* hold */
  }

  77% {
    transform: rotate(20deg) translate(12px, 10px); /* overshoot */
  }

  88% {
    transform: rotate(45deg) translate(10px, 12px); /* settle */
  }

  100% {
    transform: rotate(45deg) translate(10px, 12px); /* loop reset */
  }
}
@media(max-width: 991px){
  .ctm_bgimage .fusion-column-wrapper .fusion-lottie {
    transform: translate(-50%, calc(-50% - -20px));
    width: 650px;
  }  
  .ctm_bgimage .fusion-column-wrapper .ctm_column:nth-of-type(3) .fusion-lottie {
    transform: translate(-50%, calc(-50% - 140px));
  }
  .ctm-logo-wrapper  .fusion-lottie.fusion-lottie-1 {
    position: absolute;
    inset: 0;
    transform: translate(0%, -44%);
  }
}

@media(max-width: 767px){
  .ctm_bgimage .fusion-column-wrapper .fusion-lottie {
    transform: translate(-50%, calc(-50% - 30px));
    width: 650px;
  }
  .ctm_bgimage .fusion-column-wrapper .ctm_column:nth-of-type(3) .fusion-lottie {
	  transform: translate(-50%, calc(-50% - 4%));
	  width: 640px;
  }
  .ctm-logo-wrapper  .fusion-lottie.fusion-lottie-1 {
    transform: translate(-32%, -25%);
    width: 130%;
  }
  body.page-id-9 main#main{
	background-image: url(https://staging.acrylicdigital.co.uk/wp-content/uploads/2025/05/image.png);
	background-size: auto 100%;
	background-position: bottom center;
  }
	
	.ctm_bgimage:before {
		background-position: right 17%;
		transform: none;
		inset: 0 -63% 0 0;
		width: auto;
		transform: translate(4%, 0);
	}
	

}