/*
Theme Name: Website Manager FS Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/* BRAND COLOURS
 * Green: #70f453
 * Yellow: #fffc80
 * Black: #222222
*/ 
/*************** Website Manager CSS ***************/
.off-canvas-center.mfp-bg.mfp-ready {
    opacity: .95;
}
.grecaptcha-badge { 
    opacity: 0;
}
.header-full-width .container {
    max-width: 90% !important;
}
.html .social-icons, .header-contact i {
    font-size: 1.5rem;
	color:#222222;
}
.header-button .plain.is-outline:not(:hover) {
    color: #222222;
	font-size: .7rem;
}
.slide-title {
    text-shadow: 0 0 10px rgba(0,0,0,0.6);
}
.is-small, .is-small.button {
    font-size: 2.5rem;
}
.nav>li>a>i.icon-search {
    font-size: 2rem;
}
.button.icon.circle {
    box-shadow: 0 2px 5px rgb(0 0 0 / 20%);
}
.header-bg-image {
	background-position: center;
	background-size: cover;
}
.image-opacity .img .parallax-active {
	opacity:1 !important;
}
.sgr-infotext {
	visibility:0;
}
.header-button-1 .is-outline:hover, .header-button-1 .primary.is-outline:hover {
    background-color: #222222;
    border-color: #66ff6d;
    color: #66ff6d;
    border: none;
}

/* Animated Menu icon */
.custom-hamburger > a{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.custom-hamburger > a > i.custom-hamburger-icon{
  display:inline-block !important;
  position:relative !important;
  width:50px !important;
  height:35px !important;
  font-size:0 !important;
  line-height:0 !important;
  overflow:visible !important;

  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  transition: clip-path 250ms ease;
}

.custom-hamburger > a.is-active > i.custom-hamburger-icon{
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%) !important;
}

.custom-hamburger > a > i.custom-hamburger-icon:before{
  content:none !important;
}
.custom-hamburger > a > i.custom-hamburger-icon:after{
  content:none !important;
}

.custom-hamburger > a > i.custom-hamburger-icon > span.custom-hamburger-bars{
  position:absolute !important;
  left:0 !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:40px !important;
  height:4px !important;
  background:#222 !important;
  display:block !important;
  transition: background 0ms 300ms;
}

.custom-hamburger > a > i.custom-hamburger-icon > span.custom-hamburger-bars:before,
.custom-hamburger > a > i.custom-hamburger-icon > span.custom-hamburger-bars:after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  width:50px !important;
  height:5px !important;
  background:#222 !important;
  display:block !important;
  transform-origin:center !important;
}

.custom-hamburger > a > i.custom-hamburger-icon > span.custom-hamburger-bars:before{
  top:-15px !important;
  transition:
    top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.custom-hamburger > a > i.custom-hamburger-icon > span.custom-hamburger-bars:after{
  top:15px !important;
  transition:
    top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.custom-hamburger > a.is-active > i.custom-hamburger-icon > span.custom-hamburger-bars{
  background:rgba(255,255,255,0) !important;
}

.custom-hamburger > a.is-active > i.custom-hamburger-icon > span.custom-hamburger-bars:before{
  top:0 !important;
  transform:rotate(45deg) !important;
  transition:
    top 300ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.custom-hamburger > a.is-active > i.custom-hamburger-icon > span.custom-hamburger-bars:after{
  top:0 !important;
  transform:rotate(-45deg) !important;
  transition:
    top 300ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
	
/* Slide menu */
.off-canvas-right .mfp-content, .off-canvas-left .mfp-content {
    --drawer-width: 40vw !important;
	padding: 5% 2% 4% 4%;
}
.off-canvas-left .mfp-content, .off-canvas-right .mfp-content {
    background-color: #222222 !important;
}
.mfp-wrap .mfp-container .mfp-content {
    width: 40%;
}
	.mfp-wrap .nav>li>a {
    font-size: 1.5rem;
	font-weight:lighter;
    color: #fff;
}
.mfp-wrap .nav-sidebar li.active > a:not(:hover):not(:focus),
.mfp-wrap .nav-sidebar li.current-menu-item > a:not(:hover):not(:focus),
.mfp-wrap .nav-sidebar li.current-menu-parent > a:not(:hover):not(:focus),
.mfp-wrap .nav-sidebar li.current-menu-ancestor > a:not(:hover):not(:focus){
  color:#70f453;
}
.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.active>a, .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 {
    color: #70f453;
}

.mfp-ready .mfp-close {
    opacity: 0;
}

.cart-item {
	margin-top: -30px !important;
}

.nav-sidebar .toggle {
    box-shadow: none !important;
    color: #70f453;
    margin: 0 120px 0 0;
    opacity: .8;
}
.nav-sidebar .toggle i {
    font-size: 2.3rem;
}
.nav-vertical>li>ul li a {
    color: #fff;
}
.nav-vertical>li>ul li a:hover {
    color: #70f453;
}
.nav-sidebar.nav-vertical>li+li {
    border-top: none;
}

/* Show animated icon above slide menu */
.custom-hamburger{
	position: absolute !important;
	top: 70px !important;
	right: 5% !important;
	left: auto !important;
	z-index: 9999 !important;
	background: linear-gradient(150deg, #70f453, #fffc80);
	border-radius: 5000px;
	height: 90px;
	width: 90px;
	padding: 28px 20px;
}
.mfp-bg{z-index:9997 !important;}
.mfp-wrap{z-index:9998 !important;}

/* homepage */
.wm-border-radius-r .col-inner {
	border-top-right-radius:10px;
	border-bottom-right-radius:10px;
}
.pack-container .col-inner {
    transition: all 0.3s ease-in-out;
}
.pack-container>.col-inner {
    background:transparent;
    border-radius:10px;
    -webkit-border-radius:10px;
    border:3px solid #222222;
	position:relative;
	top:0;
	color:#222;
}
.pack-container:hover>.col-inner{
    background: #222;
    top:-10px;
}
.pack-container:hover h2, .pack-container:hover p {
    color:#fff !important;
}
.pack-container:hover .secondary {
	background: linear-gradient(150deg, #70f453, #fffc80);
}
.pack-container:hover .secondary {
	color:#222;
}
.pack-container .fas, .pack-container .fa {
	font-size: 4rem;
    width: 120px;
    height: 120px;
    background: transparent;
    border-radius: 50%;
    padding-top: 30px;
    color: #222222;
}
.pack-container:hover .fas, .pack-container:hover .fa {
    color: #70f453;
}
.other-service-pod {
	background: linear-gradient(150deg, #70f453, #fffc80);
	color:#222222 !important;
	border-radius:10px;
	transition:all 0.4s cubic-bezier(.67,1.9,.72,.68);
}
.other-service-pod-container:hover .other-service-pod {
	background:#222222 !important;
	color:#70f453 !important;
	transform:scale(1.1);
}
.other-service-pod-container .orange-icon {
	color:#222222;
	pointer-events:none;
	font-size:5rem;
}
.other-service-pod-container:hover i.orange-icon {
	color:#70f453;
}
.other-service-pod-container .service-pod-title {
	transition:all 0.2s ease-in-out;
	position:relative;
	top:10px;
}
.other-service-pod-container:hover .service-pod-title {
	top:20px;
	font-weight:bolder;
}
.other-service-pod .text-box {
	pointer-events:none;
}

.wm-border-radius-r {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

.home-hero-service-title {
	opacity:0;
	height:0px;
	transition:all 0.3s ease-in-out;
}
.home-hero-service-icon {
	transition:all 0.3s ease-in-out;
}
.home-hero-service-icon .text {
	margin-top:-20px;
	font-size:0.8rem;
}
.wm-animated-svg svg.draw-me path { stroke: url(#wm-linear-gradient-device) !important; }

.home-hero-micro-heading {
	font-size:0.9rem;
	font-weight:300 !important;
	margin-top:10px;
}
/* Service pod SVG icons */
.svg-service-icon {
    width: 80%;
    max-width: 110px;
    height: auto;
    transition: filter 0.3s ease;
}

.other-service-pod:hover .svg-service-icon {
    filter: invert(55%) sepia(96%) saturate(500%) hue-rotate(75deg) brightness(105%);
}

/* wm bg */

.header-top, .primary, .wm-topper, .wm-bg {
	background: linear-gradient(150deg, #70f453, #fffc80);
	color:#222222 !important;
}
.wm-gradient-bg {
  padding-top:50px;
  color:#fff;
	background-color:transparent;
	background: linear-gradient(150deg, #70f453, #fffc80);
	background-size: 300% 300%;
	animation: gradient 15s ease infinite;
	min-height: 100vh;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* Animated SVGs */
.wm-animated-svg svg.draw-me path,
.wm-animated-svg svg.draw-me circle,
.wm-animated-svg svg.draw-me line,
.wm-animated-svg svg.draw-me rect {
  stroke-dasharray: var(--path-length, 1000);
  stroke-dashoffset: var(--path-length, 1000);
  transition: stroke-dashoffset 2s ease, fill-opacity 1s ease;
  fill-opacity: 0;
}
.wm-animated-svg svg.draw-me { visibility: hidden; }

/* Animated border */
.wm-image-border {
  width: 50%;
  height: 100%;
	margin:0 auto;
  display: grid;
  place-content: center;
  color: white;
  text-shadow: 0 1px 0 #000;
  --border-angle: 0turn;
  --main-bg: conic-gradient(
      from var(--border-angle),
      #222222
    );
  border: solid 2px transparent;
	border-radius:10px;
  --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, #70f453, #fffc80 99%, transparent);
  background: var(--main-bg) padding-box, var(--gradient-border) border-box, var(--main-bg) border-box;
  background-position: center center;
  -webkit-animation: bg-spin 4s linear infinite;
          animation: bg-spin 4s linear infinite;
}
@-webkit-keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}
@keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}
.wm-image-border:hover {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

.wm-image-border img {
	position: relative;
    bottom: -20px;
    border-radius: 10px;
}

/* Internal pages */
.circle-image .img-inner {
	border-radius:10px;
	-webkit-border-radius:10px;
}
.our-services-container-orange .button.primary:not(.is-outline) {
	background-color:#fff !important;
	color:#70f453;
}
.our-services-container-orange .other-service-pod-container:hover .other-service-pod {
	background:#666 !important;
}
.error-404 {
	margin-bottom:30vh !important;
}

/* FAQs */
.wm-faqs .accordion-title {
    border: 2px solid #222222;
    border-radius: 10px;
    margin-bottom: 10px;
	color:#222222;
}
.wm-faqs .accordion-title.active {
    background-color: #222;
}
.wm-faqs .accordion-title.active {
    color: #66ff6d !important;
}
.wm-faqs .text a {
    color: #222222;
    text-decoration: underline !important;
}

/* My Account */
.lightbox-content {
	border-radius:25px;
	-webkit-border-radius:25px;
}
.user-id {
	display:none;
}
.paypal-buttons-context-iframe {
	margin-top:8px !important;
}
.product-container, .account-container, .shop-container, form.lost_reset_password, .my-account, .woocommerce {
	padding-bottom:180px;
}
.secondary.is-underline, .secondary.is-link, .secondary.is-outline, .stars a.active, .star-rating:before, .woocommerce-page .star-rating:before, .star-rating span:before, .color-secondary {
	color:#ffb600 !important;
}
#wrapper>.message-wrapper {
	padding-top: 1.5em;
	background:#f7f7f7;
}

/* cart/checkout */
.woocommerce-checkout .has-border, .review_form .has-border, #review_form .has-border  {
	border-radius:25px !important;
	-webkit-border-radius:25px !important;
}
.checkout-page-title .flex-col {
	border-radius: 50px;
	-webkit-border-radius: 50px;
    border: 2px solid #70f453;
}
.button, .wpcf7-submit {
	border-radius:50px;
	-webkit-border-radius:50px;
}
.tax_label {
	display:none;
}

/* Footer */
#footer {
	
}

/* Forms */
.simple-contact-form input[type='email'], .simple-contact-form input[type='date'], .simple-contact-form input[type='search'], .simple-contact-form input[type='number'], .simple-contact-form input[type='text'], .simple-contact-form input[type='tel'], .simple-contact-form input[type='url'], .simple-contact-form input[type='password'], .simple-contact-form textarea, .simple-contact-form select, .simple-contact-form .select-resize-ghost, .simple-contact-form .select2-container .simple-contact-form .select2-choice, .simple-contact-form .select2-container .select2-selection {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: none;
	border-bottom:3px solid #fff;
    padding: 0 .75em;
    height: 2.507em;
    font-size: 1rem;
    border-radius: 0;
    max-width: 100%;
    width: 100%;
    vertical-align: middle;
    background-color: transparent;
    color: #fff;
    -webkit-box-shadow: inset 0 0px 0px rgb(0 0 0 / 0%);
    box-shadow: inset 0 0px 0px rgb(0 0 0 / 0%);
    -webkit-transition: color .3s, border .3s, background .3s, opacity .3s;
    -o-transition: color .3s, border .3s, background .3s, opacity .3s;
    transition: color .3s, border .3s, background .3s, opacity .3s;
}
.simple-contact-form input[type='submit'], .simple-contact-form .input[type='submit']:not(.is-form) {
	background: linear-gradient(150deg, #70f453, #fffc80);
}
.simple-contact-form ::-webkit-input-placeholder { /* WebKit browsers */
    color: #fff !important;
    opacity: 1;
}
.simple-contact-form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #fff !important;
    opacity: 1;
}
.simple-contact-form ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #fff !important;
    opacity: 1;
}
.simple-contact-form :-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #fff !important;
    opacity: 1;
}

/* normal-form */
input[type='email'], input[type='date'], input[type='search'], input[type='number'], input[type='text'], input[type='tel'], input[type='url'], input[type='password'], textarea, select, .select-resize-ghost, .select2-container .select2-choice, .select2-container .select2-selection {
	border-radius:5px;
	-webkit-border-radius:5px;
	border:2px solid #222;
}
.normal-form input[type='submit'], .normal-form .input[type='submit']:not(.is-form) {
	background-color:#222 !important;
	color:#70f453 !important;
	border-radius:5px;
	-webkit-border-radius:5px;
	border:2px solid #222;
}
/* custom enquiry */
#custom-enquiry {
	background:#fff;
	color:#666 !important;
    border-radius: 5px;
	-webkit-border-radius: 5px;
	width:95%;
	max-width:650px;
	padding:30px
	border:2px solid #222;
}
#custom-enquiry label {
    color: #70f453;
}
.mfp-bg.mfp-ready {
    opacity: .95;
}
.mfp-bg {
	background: linear-gradient(150deg, #70f453, #fffc80);
}
input[type=submit], input[type=submit].button, input[type=submit], .primary, .dark .button.is-form, .button, input[type=submit], input[type=reset], input[type=button], .dark .button.is-form:hover, .button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover {
	border-radius:5px;
}
.secondary  {
	color: #70f453;
}

/*************** MOBILE CSS  ***************/

/* MIN */
@media screen and (min-width:1440px) {
	.nav-sidebar .toggle {
		margin: 0 50% 0 0;
	}
}

/* MAX */
@media only screen and (max-width: 1200px) {
	.mfp-wrap .mfp-container .mfp-content {
		width: 50%;
	}
}
@media only screen and (max-width: 850px) {

	.is-small, .is-small.button {
        font-size: 2rem;
    }
	.custom-hamburger {
		display:none;
	}
	.mfp-ready .mfp-close {
		opacity: 8;
	}
	.mfp-wrap .mfp-container .mfp-content {
		width: 70%;
	}
}
@media only screen and (max-width: 550px) {
	h1.large-title {
		font-size:1.6rem;
	}
	h2.large-title {
		font-size:1.2rem;
	}
	p, .text {
		font-size: 1.1rem !important;
	}
	.is-small, .is-small.button {
        font-size: 1.2rem;
    }
	.other-service-pod-container .orange-icon {
		font-size:4rem !important;
	}
	.pack-container {
	margin-bottom:15px;
	}
	.header-bottom {
		padding: 10px 0;
	}
	.page-template-default #logo img {
		max-height: 110px !important;
	}
	.header-bg-image {
		background-position: 20%;
	}
	.orange-section-top {
		height:50px;
		margin-top:-50px;
	}
	.orange-section-bottom {
		height:50px;
		margin-bottom:-50px;
	}
	.home-hero-service-icon .text {
		font-size:0.6rem;
	}
	.nav-sidebar .toggle i {
		font-size: 2rem;
	}
	.nav-sidebar .toggle {
		margin: 0 50px 0 0;
	}
	.mfp-wrap .mfp-container .mfp-content {
    width: 90%;
}

}
@media only screen and (max-width: 350px) {
	h1.large-title {
		font-size:1.2rem;
	}
	h2.large-title {
		font-size:1rem;
	}
	p, .text {
		font-size: 1rem !important;
	}

}