/**
* Theme Name:     Rage Flatsome Child
* Author:         Tilt
* Template:       flatsome
* Text Domain:	   rage-flatsome-child
* Description:    Multi-Purpose Responsive WooCommerce Theme
* Author URI:     http://tilt.ie
*/

/* BRAND COLOURS 
* Green #4eba63
* Grey #707070
* Black #222222
*/


/* General CSS */
.nav-column>li>a, .nav-dropdown>li>a, .nav-vertical-fly-out>li>a, .nav>li>a {
	color: #fff;
	transition: all .2s;
}
.nav-column li.active>a, .nav-column li>a:hover, .nav-dropdown li.active>a, .nav-dropdown>li>a:hover, .nav-vertical-fly-out>li>a:hover, .nav>li.active>a, .nav>li.current>a, .nav>li>a.active, .nav>li>a.current, .nav>li>a:hover, .nav-dark .nav>li.active>a, .nav-dark .nav>li>a:hover {
	color: #4eba63;
}
.green-border>.col-inner {
	border:2px solid #4eba63;
}
.white-border>.col-inner {
	border:2px solid #ffffff;
}
.black-border>.col-inner {
	border:2px solid #222222;
}
.bottom-black-gradient {
	height: 20vh;
	margin-top:-20vh;
	position:relative;
	z-index:99;
	background: linear-gradient(to top, #222222 0%, transparent 100%);
}
.minus-top-50 {
	margin-top:-50px;
}
.minus-top-80 {
	margin-top:-80px;
}

.rage-heading {
	text-shadow: 2px 2px 0px #4eba63;
}
.justify-text p {
	text-align: justify;
	text-justify: inter-word;
}
.white {
    color: #222222 !important;
}
.button span {
    font-weight: 700;
}
.rage-texture-bg-green {
	background:url(/wp-content/uploads/2025/02/Dirt-01_green.svg);
	background-repeat: repeat;
	background-size:contain;
}
.rage-texture-bg-black {
	background:url(/wp-content/uploads/2025/02/Dirt-01_black.svg);
	background-repeat: repeat;
	background-size:contain;
}

/* rolling hazard barriers */

/* green */
.rage-rolling-hazard-strip-green {
	width: 100%;
	--h: 20px;
	--tile: calc(var(--h) * 1.3);
	height: var(--h);
	overflow: hidden;
	background-image: url("data:image/svg+xml;utf8,\
		<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 100'>\
		<polygon points='65,0 130,0 65,100 0,100' fill='%234eba63'/>\
		</svg>");
	background-repeat: repeat-x;
	background-size: var(--tile) 100%;
	animation: roll 3s linear infinite;
}

/* white */
.rage-rolling-hazard-strip-white {
	width: 100%;
	--h: 20px;
	--tile: calc(var(--h) * 1.3);
	height: var(--h);
	overflow: hidden;
	background-image: url("data:image/svg+xml;utf8,\
		<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 100'>\
		<polygon points='65,0 130,0 65,100 0,100' fill='%23ffffff'/>\
		</svg>");
	background-repeat: repeat-x;
	background-size: var(--tile) 100%;
	animation: roll 3s linear infinite;
}

/* black */
.rage-rolling-hazard-strip-black {
	width: 100%;
	--h: 20px;
	--tile: calc(var(--h) * 1.3);
	height: var(--h);
	overflow: hidden;
	background-image: url("data:image/svg+xml;utf8,\
		<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 100'>\
		<polygon points='65,0 130,0 65,100 0,100' fill='%23000000'/>\
		</svg>");
	background-repeat: repeat-x;
	background-size: var(--tile) 100%;
	animation: roll 3s linear infinite;
}

@media (max-width: 550px) {
	.rage-rolling-hazard-strip-green,
	.rage-rolling-hazard-strip-white,
	.rage-rolling-hazard-strip-black {
		--h: 15px;
	}
}

@keyframes roll {
	from { background-position: 0 0; }
	to   { background-position: calc(-1 * var(--tile)) 0; }
}

/* icon bounce */

@keyframes icon-bounce {
  0%, 12.5%, 100% {
    transform: scale(1);
  }
  6.25% {             
    transform: scale(1.1);
  }
}

.icon-bounce-1,
.icon-bounce-2,
.icon-bounce-3,
.icon-bounce-4 {
  animation: icon-bounce 4s ease-in-out infinite;
  transform-origin: center;
}

/* staggered starts (1 s apart) */
.icon-bounce-1 { animation-delay: 1s; }
.icon-bounce-2 { animation-delay: 2s; }
.icon-bounce-3 { animation-delay: 3s; }
.icon-bounce-4 { animation-delay: 4s; }


/* Homepage */
.service-heading {
	margin-top:-120px;
}

/* Services  */
.rage-letter-shape-1 .img {
	clip-path: polygon(15% 0, 0 15%, 0 85%, 15% 100%, 50% 100%, 50% 80%, 60% 100%, 85% 100%, 100% 85%, 100% 60%, 78% 52%, 100% 52%, 100% 15%, 85% 0);
	box-shadow: 10px 10px 0px #4eba63;
}
.rage-tape-bg {
	background-image: url(/wp-content/uploads/2025/07/rage-tape-bg.png);
	background-repeat:no-repeat;
	background-size: 100% 100%;
}

/* service icons */
.service-icon-container .img, .service-icon-container h3, .service-icon-container .banner .banner-bg, .rage-other .col-inner .img {
	transition:all 0.3s cubic-bezier(.7,2.26,.49,.48); 
}
.service-icon-container:hover .banner .banner-bg, .rage-other:hover .col-inner .img {
	transform:scale(1.2);
	transform-origin: center;
}
.service-icon-container .banner .banner-bg, .service-icon-container .banner {
    overflow: visible;
}
.service-icon-container:hover h3 {
	color:#fff !important;
	transform:scale(0.95);
}
.service-icon-container .text-box {
	pointer-events:none;
}
.rage-service-heading h3 {
	color:#222;
}

/* creative */
.rage-creative .banner .banner-bg {
	background:url(/wp-content/uploads/2025/07/Rage-X-white.svg);
	background-size:cover;
}
.rage-creative:hover .banner .banner-bg {
	background:url(/wp-content/uploads/2025/07/Rage-X-black.svg);
	background-size:cover;
}
/* branding */
.rage-branding .banner .banner-bg {
	background:url(/wp-content/uploads/2025/07/Rage-R-white.svg);
	background-size:cover;
}
.rage-branding:hover .banner .banner-bg {
	background:url(/wp-content/uploads/2025/07/Rage-R-black.svg);
	background-size:cover;
}
/* advertising */
.rage-advertising .banner .banner-bg {
	background:url(/wp-content/uploads/2025/07/Rage-A-white.svg);
	background-size:cover;
}
.rage-advertising:hover .banner .banner-bg {
	background:url(/wp-content/uploads/2025/07/Rage-A-black.svg);
	background-size:cover;
}
/* art */
.rage-art .banner .banner-bg {
	background:url(/wp-content/uploads/2025/07/Rage-O-white.svg);
	background-size:cover;
}
.rage-art:hover .banner .banner-bg {
	background:url(/wp-content/uploads/2025/07/Rage-O-black.svg);
	background-size:cover;
}
/* other */
.rage-other .col-inner .overlay {
	clip-path: polygon(15% 0, 85% 0, 100% 15%, 100% 85%, 85% 100%, 15% 100%, 0 85%, 0 15%);
	transition:opacity 0s;
	opacity:0 !important;
}
.rage-other:hover .col-inner .overlay {
	opacity:1 !important;
}

/* Our Work slider */
.rage-case-studies .box {
	clip-path: polygon(25% 0, 100% 0%, 75% 100%, 0% 100%);

}
.rage-case-studies .flickity-prev-next-button {
	padding:10px;
	background: #222222;
	opacity:1;
}
.rage-case-studies .flickity-prev-next-button svg {
	fill: #222222;
}
.rage-case-studies .overlay {
	background-color: rgba(78, 186, 99, 0) !important;
	transition: all 0.3s ease-in-out
} 
.rage-case-studies .portfolio-box:hover .overlay {
  background-color: rgba(78, 186, 99, 0.8) !important;
}
.has-hover:not(:hover) .image-overlay-add .overlay {
	opacity: 1 !important;
} 

.rage-case-studies .portfolio-box-category {
	color:#fff !important;
}
.rage-case-studies .box-text {
	opacity:0 !important;
}
.rage-case-studies .portfolio-box:hover .box-text {
	opacity:1 !important;
}
.portfolio-box-title {
	font-size:2rem;
}

/* Case Studies */
.case-study-atts {
	font-weight:bolder;
	font-size:3rem;
	color:#4eba63;
}
.page-title .entry-title {
	padding: 10px 0 10px 10px;
	border-left: 4px solid #4eba63;
}
.tag-cloud-link {
	font-size:0.8rem !important;
}
.cool-tag-cloud .ctcdefault .ctcleft a, .cool-tag-cloud .ctcdefault .ctcleft .tag-cloud-link {
	border:1px solid #4eba63 !important;
	background: transparent !important;
}
.cool-tag-cloud .ctcdefault .ctcleft a:hover {
	border:1px solid #eee !important;
	background: #eee !important;

}
.cool-tag-cloud .ctcleft a, .cool-tag-cloud .ctcleft .tag-cloud-link, .cool-tag-cloud .ctcleft a:hover, .cool-tag-cloud .ctcleft .tag-cloud-link:hover {
	margin: 5px !important;
	display: inline-block!important;
	height: auto;
	line-height: 22px!important;
	text-decoration: none!important;
	padding-left: 10px !important;
	text-shadow: 1px 1px 0 rgba(255,255,255,0)!important;
	white-space: none !important;
	position: inherit !important;
	border-color: transparent!important;
	border: inherit !important;
	transition: none!important;
}
.ctcdefault .ctcright a:hover, .cool-tag-cloud .ctcdefault .ctcright a, .cool-tag-cloud .ctcdefault .ctcleft a, .cool-tag-cloud .ctcdefault .ctcright .tag-cloud-link, .cool-tag-cloud .ctcdefault .ctcleft .tag-cloud-link, .cool-tag-cloud .ctcdefault .ctcright a:visited, .cool-tag-cloud .ctcdefault .ctcleft a:visited {
	color: #ffffff !important;
}
.cool-tag-cloud .ctcdefault .ctcleft a:hover, .cool-tag-cloud .ctcdefault .ctcleft .tag-cloud-link:hover {
	color:#4eba63 !important;
}
.cool-tag-cloud .ctcdefault .ctcleft a:after, .cool-tag-cloud .ctcdefault .ctcleft .tag-cloud-link:after, .cool-tag-cloud .ctcdefault .ctcleft a:hover:after {
	background: transparent !important;
}
.tagcloud a:hover {
	color:#ffffff;
	border-color: transparent !important;
	background-color: transparent !important;
}
.tagcloud a, .tagcloud a:hover {
	border-right: 1px solid #ffffff !important;
	padding-right: 5px !important;
}
.wppsac-post-categories .wppsac-post-categories-list li:nth-child(4n+1) a {
	background:#4eba63;
}
.wppsac-post-categories .wppsac-post-categories-list a:focus, .wppsac-post-categories .wppsac-post-categories-list a:hover {
	background:#4eba63 !important;
	color:#fff !important;
}
.wppsac-post-slider.design-4 .wppsac-post-content a.wppsac-readmorebtn {
	color: #ffffff;
	background: #222222;

}
.wppsac-post-slider.design-4 a.wppsac-readmorebtn:hover {
	color: #fff !important;
	background: #4eba63;
}
.wppsac-post-slider .slick-arrow, .wppsac-post-carousel .slick-arrow {
	background-color:transparent;
	color:#4eba63 !important;
}
.wppsac-post-slider .slick-arrow svg, .wppsac-post-carousel .slick-arrow svg {
	fill: #4eba63;
}
.wppsac-post-slider:hover .slick-arrow svg, .wppsac-post-carousel:hover .slick-arrow svg {
	fill: #4eba63;
}
.wppsac-post-slider.design-4 .slick-next {
	right: -40px !important;
}
.wppsac-post-slider.design-4 .slick-prev {
	left: -40px !important;
}
.wppsac-post-title a {
	font-size:2rem !important;
	color: #4eba63 !important;
}

/* portfolio */
.has-filtering .active {
	border:1px solid #222222;
}
.has-filtering .nav>li.active>a {
	color:#fff !important;
	border:none;
}	
.has-filtering .nav li {
	border: 1px solid #222222;
	border-radius: 0;
}
.has-filtering .nav li a {
	color: #222222;
}
.has-filtering .nav li a:hover {
	color: #fff;
}
.mng-portfolio-container .portfolio-box .box-image {
	clip-path: polygon(15% 0, 85% 0, 100% 15%, 100% 85%, 85% 100%, 15% 100%, 0 85%, 0 15%);
}
.mng-portfolio-container .portfolio-box .box-image:hover .overlay {
	opacity:9;
	background-color:rgba(78, 186, 99, 0.85) !important;
}
.mng-portfolio-container .portfolio-box .box-text, .mng-portfolio-container .portfolio-box .box-image .overlay {
	transition:all 0.3s ease-in-out;
}
.box-overlay.dark .box-text, .box-shade.dark .box-text {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0);
}
.mng-portfolio-container .box-text {
	opacity:0 !important;
}
.mng-portfolio-container .portfolio-box:hover .box-text {
	padding: 10px !important;
	color:#222222;
	pointer-events:none;
	opacity:1 !important;
}
.mng-portfolio-container .portfolio-box h6 {
	color:#222222;
	opacity:1 !important;
}

/* Make recent post slider square images */
.wppsac-post-slider .wppsac-post-image-bg{
  position: relative;
  width: 100% !important;
  padding-top: 100% !important;
  overflow: hidden;
}

.wppsac-post-slider .wppsac-post-image-bg > a{
  position: absolute;
  inset: 0;
  display: block;
}

.wppsac-post-slider .wppsac-post-image-bg img{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: top center;
  display: block;
}


/* Forms */
.rage-contact-form label {
	text-transform:uppercase;
}
.rage-contact-form input[type=email], .rage-contact-form input[type=number], .rage-contact-form input[type=search], .rage-contact-form input[type=tel], .rage-contact-form input[type=text],  .rage-contact-form input[type=url], .rage-contact-form textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 10px;
	border: 2px solid #222222;
	box-shadow: none;
	color: #222222;
}
.rage-contact-form .dark-form input[type=submit], .rage-contact-form .darkform input[type=submit].button {
	background-color:#222222;
}
.rage-contact-form .dark label {
	color:#222222;
}
.rage-contact-form input[type=submit], .rage-contact-form input[type=submit].button {
	background-color: #222222;
	border: 1px solid #ffffff;
}
.project-form-container .form-title-1 {
	background: url(/wp-content/uploads/2025/07/Rage-X-icon-white.svg) no-repeat;
    padding: 15px 0 10px 35px;
    margin-left: -35px;
    margin-bottom: 20px;
}
.project-form-container .form-title-2 {
	background: url(/wp-content/uploads/2025/07/Rage-R-white.svg) no-repeat;
    padding: 15px 0 10px 35px;
    margin-left: -35px;
    margin-bottom: 20px;
}
.project-form-container .form-title-3 {
	background: url(/wp-content/uploads/2025/07/Rage-O-white.svg) no-repeat;
    padding: 15px 0 10px 35px;
    margin-left: -35px;
    margin-bottom: 20px;
}

.rage-contact-form .button-icon-animation {
	position: relative;
	display: inline-block;
	overflow: visible;
	width: 100px;
	left: -200px;
	top: -20px;
	pointer-events: none;
}

.rage-button .button {
	position: relative;
	display: inline-block;
	overflow: visible;
}

.rage-contact-form .button-icon-animation:before,
.rage-contact-form .button-icon-animation:after,
.rage-button .button:before,
.rage-button .button:after {
	content: "";
	position: absolute;
	background-repeat: no-repeat;
	background-size: contain;
	display: block;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease;
}

.rage-contact-form .button-icon-animation:before,
.rage-button .button:before {
	left: -25px;
	top: -10px;
	transform: translateY(-50%);
	width: 30px;
	height: 60px;
	background-image: url("/wp-content/uploads/2025/07/rage-icons-white.svg");
	animation: bounce-cycle 4s ease-in-out infinite;
}

.rage-contact-form .button-icon-animation:after,
.rage-button .button:after {
	right: -40px;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	background-image: url("/wp-content/uploads/2025/07/rage-icons-2x-white.svg");
	animation: bounce-cycle-slow 7s ease-in-out infinite;
}

.rage-button .button.icons-visible::before,
.rage-button .button.icons-visible::after,
.rage-contact-form .wpcf7-submit.icons-visible ~ .button-icon-animation:before,
.rage-contact-form .wpcf7-submit.icons-visible ~ .button-icon-animation:after {
	opacity: 1;
	visibility: visible;
}

.rage-button .button.icons-visible:hover::before,
.rage-contact-form .wpcf7-submit.icons-visible:hover ~ .button-icon-animation:before {
	animation: bounce-out 0.3s ease-in-out forwards;
}

.rage-button .button.icons-visible:hover::after,
.rage-contact-form .wpcf7-submit.icons-visible:hover ~ .button-icon-animation:after {
	animation: bounce-out 0.3s ease-in-out 0.3s forwards;
}

@keyframes bounce-cycle {
	0%, 100% { transform: translateY(-50%) translateX(0); }
	50% { transform: translateY(-60%) translateX(4px); }
}

@keyframes bounce-cycle-slow {
	0%, 100% { transform: translateY(-50%) scale(1); }
	50% { transform: translateY(-55%) scale(1.05); }
}

@keyframes bounce-out {
	0% { transform: translateY(-50%) scale(1); }
	100% { transform: translateY(-50%) scale(0.9); }
}


.header-button {
	border: 1px solid #fff;
	position: relative;
}
.header-button:before,
.header-button:after {
	content: "";
	position: absolute;
	background-repeat: no-repeat;
	background-size: contain;
	display: block;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease;
}
.header-button:before {
	left: -13px;
	top: -10px;
	transform: translateY(-50%);
	width: 40px;
	height: 20px;
	background-image: url(/wp-content/uploads/2025/07/rage-icons-3x-white.svg);
	animation: bounce-cycle 4s ease-in-out infinite;
	z-index: 99;
}
.header-button:after {
	right: -5px;
	top: -5px;
	transform: translateY(-50%);
	width: 25px;
	height: 25px;
	background-image: url("/wp-content/uploads/2025/07/rage-icons-2x-white.svg");
	animation: bounce-cycle-slow 7s ease-in-out infinite;
}
.header-button.icons-visible::before,
.header-button.icons-visible::after {
	opacity: 1;
	visibility: visible;
}
.header-button.icons-visible:hover::before {
	animation: bounce-out 0.3s ease-in-out forwards;
}
.header-button.icons-visible:hover::after {
	animation: bounce-out 0.3s ease-in-out 0.3s forwards;
}
@keyframes bounce-cycle {
	0%   { transform: scale(1); }
	5%   { transform: scale(0.9); }
	10%  { transform: scale(1.1); }
	15%  { transform: scale(1); }
	100% { transform: scale(1); }
}
@keyframes bounce-cycle-slow {
	0%       { transform: scale(1); }
	4.285%   { transform: scale(0.9); }
	8.571%   { transform: scale(1.1); }
	12.857%  { transform: scale(1); }
	100%     { transform: scale(1); }
}
@keyframes bounce-out {
	0%    { transform: scale(1); opacity: 1; }
	25%   { transform: scale(0.9); opacity: 1; }
	50%   { transform: scale(1.1); opacity: 1; }
	100%  { transform: scale(1); opacity: 0; }
}


.secondary {
	border:1px solid #fff;
}


/* Responsive CSS */
@media all and (max-width:550px) {
	.mobile-centre-button {
		text-align:center;
	}
	.rage-contact-form .button-icon-animation {
		left: -10px;
		top: -70px;
	}
}