@font-face {
    font-family: 'Avenir';
    src: url('../fonts/Avenir-Light.woff2') format('woff2'),
         url('../fonts/Avenir-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;

}

@font-face {
    font-family: 'Avenir';
    src: url('../fonts/Avenir-Book.woff2') format('woff2'),
         url('../fonts/Avenir-Book.woff') format('woff');
    font-weight: 400;
    font-style: normal;

}

@font-face {
    font-family: 'Avenir';
    src: url('../fonts/Avenir-Medium.woff2') format('woff2'),
         url('../fonts/Avenir-Medium.woff') format('woff');
    font-weight: 600;
    font-style: normal;

}

@font-face {
    font-family: 'Avenir';
    src: url('../fonts/Avenir-Heavy.woff2') format('woff2'),
         url('../fonts/Avenir-Heavy.woff') format('woff');
    font-weight: 700;
    font-style: normal;

}

@font-face {
    font-family: 'Avenir';
    src: url('../fonts/Avenir-Black.woff2') format('woff2'),
         url('../fonts/Avenir-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;

}

html,
body {
	height: 100%;
	min-height: 100%;
}
body {
	background-color: #fff;
	color: #2c2f33;
	font-size: 62.5%;
	position: relative;
	right: 0;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
@media print {
	.print-hide {
		display: none;
	}
}

body,
select,
input,
textarea,
button {
	font-family: 'Avenir', Helvetica, Arial, sans-serif;
}

/* Sticky footer */
body {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}
.page-content {
	flex: 1;
}
/* End */

/* BUTTONS */

.btn {
	color: #fff;
	font-weight: 900;
	border-radius: 50px;
	transition: 0.3s;
	padding: 15px 40px;
}
.btn-sm {
	font-size: 12px;
	padding: 10px 20px;
}
.btn-primary {
	border: none;
	background-color: #75b253;
	background-size: 200% auto;
	background-image: linear-gradient(to right, #57943d 0%, #9dd271 100%);
	box-shadow: 0px 8px 25px rgba(140,222,96,0.3);
}
.btn-primary:hover {
	background-position: right center;
}
.btn-secondary {
	color: #2c2f33;
	background-color: transparent;
    border: 2px #b6b7b8 solid;
}
.btn-secondary:hover {
	color: #fff;
	border-color: #2c2f33;
	background-color: #2c2f33;
}
.btn-back {
	position: relative;
}
.btn-back:before {
	font-family: "Font Awesome 5 Free";
	content: '\f104';
	color: #75b253;
	margin-right: 10px;
}

.btn-line {
  color: #75b253;
  font-weight: 900;
  border-bottom: 2px solid #75b253;
  text-decoration: none;
}

.play-button {
  display: block;
  font-size: 18px;
  color: #2c2f33;
  text-decoration: none;
  position: relative;
  padding-left: 50px;
}
.play-button:before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 11px;
  content: '\f04b';
  color: #64A52B;
  background-color: transparent;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #B2B4B5;
  border-radius: 100%;
  transition: all 0.3s;
}
.play-button:hover {
  color: #2c2f33;
}
.play-button:hover:before {
  border-color: #64A52B;
  background-color: #64A52B;
  color: #fff;
}

/* TEXT */

h1 {
	font-size: 48px;
	color: #2c2f33;
	font-weight: 600;
	margin-bottom: 1rem;
}
h1 span {
	color: #75b253;
}
h2 {
	font-size: 30px;
	line-height: 1.4;
	color: #2c2f33;
	font-weight: 700;
	margin-bottom: 1rem;
}
h2.quotes span {
	position: relative;
}
h3 {
	color: #2c2f33;
	font-size: 24px;
	line-height: 1.4;
	font-weight: 700;
	margin-bottom: 1rem;
}
h4 {
	color: #87919e;
	font-size: 18px;
	font-weight: 700;
	margin-bottom: .75em;
  line-height: 1.5;
}
h5 {
	color: #87919e;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 1rem;
}
h6 {
	font-size: 14px;
	font-weight: 900;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  text-decoration: none;
}

.light {
	font-weight: 300;
}
p {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
}
p.small {
	font-size: 14px;
	font-weight: 600;
}
p.large {
	font-size: 18px;
}
a {
	color: #75b253;
	transition: all 0.3s;
}
a:hover {
	color: #4d8f31;
}
blockquote {
	border-left: 2px solid #75b253;
	padding-left: 50px;
	margin: 4rem 0;
}
blockquote p {
	font-size: 18px;
	line-height: 1.4;
}
blockquote p:last-child {
	margin: 0;
}
blockquote:before {
	content: '';
	display: block;
	width: 40px;
	height: 28px;
	background: url(../images/blockquote-quotes.svg) no-repeat;
	background-size: cover;
	margin-bottom: 25px;
}
blockquote cite {
	font-size: 16px;
	font-weight: 900;
	font-style: normal;
}
blockquote cite span {
	display: block;
  font-weight: 900;
	color: #75b253;
}

blockquote.right {
	text-align: right;
	border-left: none;
	border-right: 2px solid #75b253;
	margin: 0;
	padding-left: 0;
	padding-right: 50px;
}
blockquote.right:before {
	transform: scaleX(-1);
	margin: 0 0 25px auto;
}
blockquote.large p {
	font-size: 30px;
}
ul {
	font-size: 16px;
	font-weight: 600;
}
ul:not(.nav) li {
	margin-bottom: 1rem;
}
ul.tick-list {
	margin: 2rem 0;
	padding: 0;
	list-style: none;
}
ul.tick-list li {
	position: relative;
	padding-left: 32px;
	font-weight: 700;
	margin-bottom: 1rem;
}
ul.tick-list li:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 20px;
	background: url(../images/list-tick.svg) no-repeat center;
	background-size: cover;
}

ul.tick-list-alt {
	padding: 0;
	list-style: none;
}
ul.tick-list-alt li {
	position: relative;
	padding-left: 20px;
	font-weight: 400;
	margin-bottom: 0.25rem;
}
ul.tick-list-alt li:before {
	content: '\f00c';
	position: absolute;
	left: 0;
	top: 4px;
	font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 12px;
  color: #64A52B;
}

ul.split-column {
  column-count: 2;
}

ol.numbered-list {
	counter-reset: numbered;
	margin: 3rem 0 1rem 0;
	padding: 0;
	font-size: 18px;

}
ol.numbered-list li:before {
	content: counter(numbered) '.';
	counter-increment: numbered;
	color: #c2dfb1;
	font-size: 30px;
	font-weight: 900;
	line-height: 1;
	position: absolute;
	z-index: 2;
	top: 0;
	left: -10px;
}
ol.numbered-list li:after {
	content: '';
	position: absolute;
	z-index: -1;
	left: 0;
	top: -21px;
	width: 65px;
	height: 65px;
	border-radius: 100%;
	background-color: #f5faf3;
}
ol.numbered-list li {
	list-style: none;
	position: relative;
	z-index: 1;
	padding-left: 30px;
	margin: 20px 0;
    min-height: 65px;
}

hr {
	margin: 5rem 0;
}
::-moz-selection { /* Code for Firefox */
	color: #fff;
    background: #75b253;
}

::selection {
	color: #fff;
    background: #75b253;
}

/* Icons */

.feather {
	transition: all 0.5s;
}
.lg {
	width: 30px;
	height: 30px;
}
.green {
	color: #75b253;
}

.offset-left {
	position: absolute;
	left: -45px;
}

/* Section types */
section {
	position: relative;
	z-index: 2;
}

.grey-ripple {
	background-color: #f9f9f8;
	margin: -12rem 0 0 0;
	position: relative;
	z-index: 1;
	padding-bottom: 9rem;
}
.grey-ripple:before,
.grey-ripple:after {
	content: '';
	position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
    width: 100%;
}
.grey-ripple:before {
	background: url(../images/grey-ripple-top.svg) no-repeat center bottom;
	background-size: cover;
    top: 0;
    height: 200px;
}
.grey-ripple:after {
	background: url(../images/grey-ripple-bottom.svg) no-repeat center bottom;
	background-size: cover;
    bottom: 0;
    left: 0;
    height: 86px;
}
.grey-ripple .section-container {
	padding-top: calc(4rem + 200px);
	padding-bottom: calc(8rem - 86px);
}
@media all and (max-width: 1024px) {
	.grey-ripple {
		margin-top: -8rem;
		padding-bottom: 6rem;
	}
}

.no-ripple-bottom:after {
  display: none;
}

#testimonials {
	background-image: url(../images/testimonials-bg.png);
  background-position: left bottom;
  background-size: auto 500px;
  background-repeat: no-repeat;
}
@media all and (max-width: 1200px) {
	#testimonials {
		background-position: left bottom;
		background-size: auto 50%;
	}
}

.plants-bg {
	padding-bottom: 10rem;
	background: url(../images/3-plants-bg.png) no-repeat right calc(100% + 10px);
	background-size: 45% auto;
    margin-bottom: -5rem;
}
@media all and (max-width: 1024px) {
	.plants-bg {
		background-position: left bottom;
		background-size: 60% auto;
	}
}
@media all and (max-width: 667px) {
	.plants-bg {
		background-position: center bottom;
		background-size: 80% auto;
	}
}

.no-hero {
	min-height: 55vw;
}
.no-hero:before {
	content: '';
	position: absolute;
	z-index: -1;
	height: 55vw;
	top: 0;
	transform: translateY(-50%);
  left: -35%;
  right: -35%;
  border-radius: 100%;
	bottom: -25px;
	background: #f2f2f1;
}
h2.quotes span:before,
h2.quotes span:after {
	content: '';
	position: absolute;
	animation-name: float;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
h2.quotes span:before {
	width: 79px;
	height: 69px;
	left: -80px;
	top: -20px;
	background: url(../images/quotes-left.png) no-repeat;
	background-size: cover;
	animation-duration: 3s;
}
h2.quotes span:after {
	width: 68px;
	height: 60px;
	background: url(../images/quotes-right.png) no-repeat;
	background-size: cover;
	animation-duration: 2s;
}
.section-container {
	width: 90%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 4rem 0;
}
.section-container + .section-container {
	padding-top: 0;
}

.home .section-container {
  padding: 4rem 0 6rem 0;
}

.hero .section-container {
  padding: 4rem 0 12rem 0;
}
@media all and (max-width: 1024px) {
  .hero .section-container {
    padding: 2rem 0 6rem 0;
  }
}

/* HEADER */

header {
	background-color: #f2f2f1;
	position: relative;
	z-index: 999;
  transition: all 0.3s;
}
header .section-container {
	padding: 40px 0;
  transition: padding 0.3s;
}

@media all and (min-width: 1025px) {
  header {
    position: sticky;
    top: 0;
    box-shadow: 0 0 15px rgba(0,0,0,0);
  }
  header.fixed {
    background-color: #fff;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
  }
  header.fixed .section-container {
    padding: 20px 0;
  }
}

/* Navs */

.nav-item,
.nav-link {
	font-size: 14px;
	font-weight: 600;
}

.nav.flex-column .nav-link {
  padding: 0.25rem 0;
}
.nav.flex-column .nav-item:first-child .nav-link {
  padding-top: 0;
}

@media all and (min-width: 1025px) {
	header .nav-item.separate {
		position: relative;
		margin-left: 1rem;
	}
	header .nav-item.separate:before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: -0.5rem;
		margin: auto;
		width: 1px;
		height: 50px;
		background-color: #d4d5d5;
		display: block;
	}
}
header .nav-link {
	color: #2c2f33;
}
header .nav-link:hover,
header .nav-link:focus {
	color: #75b253;
}
header .nav-link.active {
	font-weight: 900;
	color: #75b253;
}

/* Nav dropdown */

@media (min-width: 768px) {
  .animate {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
  }
}

@keyframes slideIn {
  0% {
    top: 1rem;
    opacity: 0;
  }

  100% {
    top: 0rem;
    opacity: 1;
  }

  0% {
    top: 1rem;
    opacity: 0;
  }
}

.slideIn {
  -webkit-animation-name: slideIn;
  animation-name: slideIn;
}


.dropdown-toggle:after {
  vertical-align: middle;
  border: none;
  font-family: 'Font Awesome 5 Free';
  content: '\f107';
  transition: all 0.5s;
}
.dropdown-toggle.show:after {
  transform: rotate(180deg);
}

@media all and (min-width: 1025px) {
  .dropdown-wrap {
    display: flex;
  }

  .dropdown-menu {
    background-color: #fff;
    border: none;
    border-radius: 20px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.015);
    padding: 40px;
    max-width: 860px;
  }


  .dropdown-menu p.sub-text {
    font-weight: 600;
    opacity: 0.7;
    line-height: 1.4;
  }

  .dropdown-section:first-child {
    padding-right: 40px;
    border-right: 1px solid #dee2e6;
  }
  .dropdown-section:last-child {
    padding-left: 40px;
  }
}

@media all and (max-width: 1024px) {
  .dropdown-menu {
    position: static !important;
    transform: none !important;
    background: none;
    border: none;
    padding: 0;
  }
  .dropdown-menu .btn-line {
    display: block;
    border: none;
    color: #fff;
    margin: 0.5rem 0;
  }
}

/* FOOTER */

footer {
	background-color: #2c2f33;
	position: relative;
    /* margin-top: 5rem; */
}
footer .section-container {
  padding: 6rem 0;
}
footer *:not(.green):not(h5) {
  color: #fff;
}
/* footer:before {
	content: '';
    position: absolute;
    bottom: 100%;
    left: -10px;
    right: -10px;
    z-index: 2;
    width: calc(100% + 20px);
    height: 86px;
    background: url(../images/footer-top.svg) no-repeat center top;
    background-size: cover;
} */
footer h2,
footer a {
	color: #fff;
}
footer p {
	color: #8e99a9;
}
footer a {
  text-decoration: none;
}
footer a:hover {
  color: #75b253;
}
footer ul.nav .nav-link {
  color: #fff;
  font-weight: 700;
}
footer ul.nav .nav-link.active,
footer ul.nav .nav-link:hover,
footer ul.nav .nav-link:focus {
  color: #75b253;
}
footer ul.nav .nav-link.active {
  font-weight: 900;
}

.sub-footer {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 3rem 0 6rem 0;
}
.sub-footer * {
	font-size: 14px;
}
.sub-footer .nav {
	margin: 0 -0.5rem;
}
.sub-footer .nav-link {
	padding: 0 0.5rem;
}
@media all and (max-width: 720px) {
	.sub-footer {
		display: block !important;
		text-align: center;
	}
	.sub-footer .nav {
		justify-content: center;
	}
}

/* HERO */

.hero {
	background-color: #f2f2f1;
	position: relative;
	overflow: hidden;
}
.hero:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    width: 100%;
    height: 250px;
    background: url(../images/hero-bottom.svg) no-repeat center top;
    background-size: cover;
}
.hero h2 {
	font-weight: 300;
	font-size: 24px;
	line-height: 1.4;
}
.hero-buttons {
	margin: 2rem -10px 4rem -10px;
}
.hero-buttons * {
	margin: 0 10px;
}
.hero img.center-bottom {
    display: block;
    position: relative;
    z-index: -1;
}
.hero img.right-bottom {
	display: block;
	position: absolute;
	z-index: -1;
	left: 52%;
	top: 5%;
	max-width: 60%;
}
@media all and (max-width: 991px) {
	.hero img.right-bottom {
    display: none;

		/* max-width: 120%;
		position: relative;
	    top: auto;
	    left: -5%;
	    margin-bottom: -50%; */
	}
}

/* .hero.home {
	background-image:
    	url(../images/home-hero-left.png),
		url(../images/home-hero-right.png);
	background-position:
    	left 70%,
		right 80%;
	background-repeat: no-repeat;
} */

.hero.home {
	background-image: url(../images/home-hero-left.png);
	background-position: left 70%;
	background-repeat: no-repeat;
}

.hero.home .center-bottom.behind {
    position: absolute;
    bottom: -2rem;
    z-index: -2;
    left: 40%;
}
@media all and (max-width: 1024px) {
  /* .hero.home {
  	background-image:
      	url(../images/home-hero-left.png),
  		url(../images/home-hero-right.png);
  	background-position:
      	left bottom,
  		right bottom;
  	background-repeat: no-repeat;
  } */

  .hero.home {
  	background-image:
      	url(../images/home-hero-left.png);
  	background-position: left bottom;
  	background-repeat: no-repeat;
  }

	/* .hero.home .center-bottom {
		width: 100%;
		margin: 0 auto;
		left: auto;
	}
	.hero.home .center-bottom.behind {
		display: none;
	} */
}
@media all and (max-width: 768px) {
  /* .hero.home {
  	background-image:
      	none;
  	background-position:
      	left bottom,
  		right top;
  	background-repeat: no-repeat;
  } */

  .hero.home {
  	background-image: none;
  	background-position: left bottom;
  	background-repeat: no-repeat;
  }
}

@media all and (max-width: 667px) {
	/* .hero.home {
		background-position:
    	left 100%,
		right 160%;
	} */

  .hero.home {
		background-position: left 100%;
	}
}
/*
@media all and (max-width: 480px) {
	.hero.home .center-bottom {
		display: none;
	}
}
*/

.hero.bg-img {
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: right top;
}
@media all and (max-width: 991px) {
	.hero.bg-img {
		background-image: none !important;
	}
}
.hero-form {
  background-color: #fff;
  border-radius: 50px;
  box-shadow: 0 10px 15px rgba(0,0,0,0.075);
}

@media all and (max-width: 568px) {
  .hero-form {
    background-color: transparent;
    box-shadow: none;
  }

  .hero-form .input-group {
    display: block;
  }
  .hero-form .input-group .form-control {
    width: 100%;
    border-radius: 50px !important;
    margin-bottom: 1rem;
  }
}

/* Illustrations & animations */

svg,
svg * {
	transform-origin: center;
}
@keyframes float {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-10px);
	}
	100% {
		transform: translateY(0px);
	}
}

@keyframes rotate-clockwise {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(359deg);
	}
}
@keyframes rotate-anticlockwise {
	from {
		transform: rotate(359deg);
	}
	to {
		transform: rotate(0deg);
	}
}

@keyframes pulse {
	from {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
	to {
		transform: scale(1);
	}
}

/* Home */

#home-modules-illustration .st0 {
	fill: #FFFFFF;
}
#home-modules-illustration .st1 {
	enable-background: new;
}
#home-modules-illustration .st2 {
	fill: #2C2F33;
}
#home-modules-illustration .st3 {
	fill: none;
	enable-background: new;
}
#home-modules-illustration .st4 {
	fill: none;
	stroke: #75B254;
	stroke-width: 2;
	stroke-miterlimit: 10;
}
#home-modules-illustration .st5 {
	fill: #64A52B;
}
/*
#home-modules-illustration .st6 {
	opacity: 0.43;
}
*/
#home-modules-illustration .st7 {
	opacity: 0.5;
	enable-background: new;
}
#home-modules-illustration .st8 {
	fill: none;
	stroke: #E1E1E1;
	stroke-width: 2;
}
#home-modules-illustration .st10 {
	fill: #647080;
}

.module {
	opacity: 0;
	transition: opacity 0.5s ease-in;
}
.animate .module {
	opacity: 1;
}
.animate .module.st6 {
	opacity: 0.43;
}

.module:nth-child(1) { transition-delay: 0s; }
.module:nth-child(2) { transition-delay: 0.5s; }
.module:nth-child(3) { transition-delay: 0.75s; }
.module:nth-child(4) { transition-delay: 1s; }
.module:nth-child(5) { transition-delay: 1.25s; }
.module:nth-child(6) { transition-delay: 1.5s; }
.module.st6 { transition-delay: 1.75s; }

/* Features */

#features-illustration .st2 {
	opacity: 0.42;
	fill: none;
	stroke: #D4D4D3;
	stroke-width: 2;
	stroke-dasharray: 8,4;
	enable-background: new;
}
#features-illustration .st3 {
	enable-background: new;
}
#features-illustration .st4 {
	fill: #87919E;
}
#features-illustration .st5 {
	fill: #FFFFFF;
}
#features-illustration .st6 {
	fill: #64A52B;
}
#features-illustration .st7 {
	fill: #75B254;
}

#center circle {
	animation: pulse 3s infinite linear;
}
.icon {
	animation: float 2s infinite ease-in-out;
}
.icon:nth-child(1) { animation-duration: 3s; }
.icon:nth-child(2) { animation-duration: 3.5s; }
.icon:nth-child(3) { animation-duration: 4s; }
.icon:nth-child(4) { animation-duration: 4.5s; }

#circle-3 {
	animation: rotate-clockwise 10s infinite linear;
}
#circle-2 {
	animation: rotate-anticlockwise 15s infinite linear;
}
#circle-1 {
	animation: rotate-clockwise 20s infinite linear;
}
.bubble {
	background-color: #fff;
	border-radius: 100%;
	position: absolute;
	z-index: 1;
	box-shadow: -10px 10px 15px rgba(0,0,0,0.1);
	animation-name: float;
	animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
.bubble:before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: #7db75d;
	text-align: center;
}
.bubble.lg {
	width: 110px;
	height: 110px;
	line-height: 110px;
	font-size: 36px;
	left: -30px;
	top: 7rem;
	animation-duration: 3.5s;
}
.bubble.med {
	width: 90px;
	height: 90px;
	line-height: 90px;
	font-size: 30px;
	left: 40%;
	bottom: 5rem;
	animation-duration: 2s;
}
.bubble.sm {
	bottom: 4rem;
	left: 5rem;
	width: 75px;
	height: 75px;
	line-height: 75px;
	animation-duration: 3s;
	font-size: 24px;
}
.bubble-cart:before {
	content: '\f07a';
}
.bubble-users:before {
	content: '\f0c0';
}
.bubble-reports:before {
	content: '\f080';
}
.bubble-chat:before {
	content: '\f086';
}
.bubble-phone:before {
	content: '\f095';
}
.bubble-email:before {
	content: '\f1d8';
}
.bubble-code:before {
	content: '\f121';
}
.bubble-shop:before {
	content: '\f54e';
}
.bubble-leaf:before {
	content: '\f06c';
}
@media all and (max-width: 1024px) {
	.bubble.lg {
		width: 80px;
	    height: 80px;
	    line-height: 80px;
	    font-size: 30px;
	    left: -30px;
	}
	.bubble.med {
	    left: 92%;
	    bottom: 9rem;
	}
	.bubble.sm {
		left: 70%;
		bottom: 1rem;
	}
}

/* Elements */

.green-bg,
.black-bg {
  border-radius: 10px;
  box-shadow: -10px 10px 25px rgba(0,0,0,0.1);
  padding: 3rem;
}
.green-bg {
  background-color: #75b253;
}
.black-bg {
  background-color: #2c2f33;
}
.green-bg *,
.black-bg * {
  color: #fff;
}
.green-bg .form-control,
.black-bg .form-control {
  border-color: #7db75d;
  background-color: rgba(255, 255, 255, 0.1);
}
.green-bg .form-control:focus,
.black-bg .form-control:focus {
	box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 1);
}
.green-bg .btn-primary,
.black-bg .btn-primary {
  background-color: #25272b;
  background-image: linear-gradient(to right, #25272b 0%, #373b40 100%);
  box-shadow: 0px 8px 25px rgb(44 47 51 / 30%);
}

.img-right {
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	bottom: 0;
	left: 50%;
}
svg.img-right {
	max-width: 45%;
	max-height: 90%;
	margin: auto;
	overflow: visible;
}
.img-left {
	position: absolute;
	z-index: 2;
	top: 0;
	right: 50%;
	bottom: 0;
	max-height: 100%;
}

@media all and (max-width: 991px) {
	.img-right,
	svg.img-right,
	.img-left {
	    width: 100%;
	    max-width: 100%;
	    max-height: none;
	    margin: 0 auto;
	    position: relative;
	    left: 0;
	    right: auto;
	}
}
@media all and (max-width: 667px) {
	.img-right,
	svg.img-right,
	.img-left {
	    width: 120%;
	    max-width: none;
	    left: -10%;
	}
}

.cta {
	margin: 5rem 0;
	padding-top: 5rem;
	border-top: 1px solid #e1e1e1
}
.hover-focus {
	transition: all 0.5s;
}
.fade-half {
	opacity: 0.5 !important;
}
.hover-focus.fade-half .feather {
	color: #959798;
}

.viewport-image.fixed {

}

.row-image {
  padding: 1.25rem;
}
.row-image:first-child {
  padding-left: 0;
}
.row-image:last-child {
  padding-right: 0;
}
.row-image img {
  max-height: 65px;
  max-width: 100px;
}

.card {
	border: none;
	border-radius: 10px;
	box-shadow: -10px 10px 25px rgba(0,0,0,0.1);
	transition: all 0.3s;
}
.card:hover {
	box-shadow: -10px 10px 25px rgba(0,0,0,0.2);
}
.card-body {
	padding: 3rem;
	padding-right: 25%;
	position: relative;
	z-index: 2;
}
.case-study-img {
	position: absolute;
	z-index: -1;
	bottom: 0;
	right: 0;
	max-width: 35%;
  max-height: 95%;
}

@media (min-width: 992px) {
	.row.staggered-lg,
	.row.staggered-lg [class^="col"] {
		margin-bottom: 5rem !important;
	}
	.row.staggered-lg [class^="col"]:nth-child(even) {
		transform: translateY(65%);
	}
	.row.staggered-lg .case-study-img {
		width: 45%;
	}
}
@media (min-width: 1200px) {
	.row.staggered-xl,
	.row.staggered-xl [class^="col"] {
		margin-bottom: 5rem !important;
	}
	.row.staggered-xl [class^="col"]:nth-child(even) {
		transform: translateY(65%);
	}
	.row.staggered-xl .case-study-img {
		width: 45%;
	}
}


/* Blog elements */

.article {
	margin-bottom: 5rem;
}
.article:not(:last-child) {
	padding-bottom: 5rem;
	border-bottom: 1px solid #e1e1e1;
}
.thumbnail {
	overflow: hidden;
	border-radius: 10px;
	box-shadow: -15px 15px 25px rgba(0,0,0,0.1);
	position: relative;
	margin: 5rem 0;
}
.thumbnail img {
	width: 100%;
}
.excerpt a {
	color: #2c2f33;
}
.article .thumbnail {
	flex: 0 0 30%;
	height: 0;
	padding-bottom: 28%;
	margin: 0 40px 0 0;
}
.article .thumbnail img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: auto;
	object-fit: cover;
}
.article:hover .thumbnail {
	box-shadow: -15px 15px 25px rgba(0,0,0,0.2);
}
.article .excerpt a:hover {
	color: #75b253;
	text-decoration: none;
}

.video-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	margin: 2.5rem 0 5rem 0;
}
.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

[data-video-thumb] {
  position: relative;
  display: block;
}

[data-video-thumb] img {
  max-width: 100%;
}

[data-video-thumb]:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Font Awesome 5 Free";
	content: '\f04b';
  font-size: 25px;
  font-weight: 900;
  color: #fff;
  background-color: #2c2f33;
  border-radius: 100%;
  width: 90px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
}

[data-video-thumb]:hover:before {
  background-color: #75b253;
  width: 100px;
  height: 100px;
}

@media all and (max-width: 768px) {
	.article .thumbnail {
		display: block;
		height: auto;
		margin-bottom: 3rem;
	}
}

/* Quotes */

.quote-box {
	position: relative;
	height: 100%;
	background-color: #fff;
	border-radius: 20px;
	/* box-shadow: -10px 10px 25px rgba(28,29,30,0.1); */
	padding: 3rem 2.5rem 2.5rem;
}
.quote-box img {
  border-radius: 20px;
}
.quote-box blockquote {
	margin: 0;
	padding: 0;
	border: none;
}
.quote-box blockquote p {
	font-size: 22px;
}
.quote-box blockquote cite {
	display: block;
  font-size: 18px;
}

/* Sliders */

.carousel-splide img {
  max-width: 220px;
  max-height: 120px;
  margin: 0 auto;
  display: block;
  padding: 0 2rem;
}
.splide__pagination {
  position: relative !important;
}
.splide__pagination__page {
  width: 10px !important;
  height: 10px !important;
}
.splide__pagination__page.is-active {
  background: #75b253 !important;
  transform: scale(1.2) !important;
}

#testimonials .slick-track {
	display: flex;
	align-items: center;
}
#testimonials .clean-slider {
	max-width: 70%;
	margin: 0 auto;
}

.clean-slider .slide:focus,
.clean-slider .slide *:focus {
	outline: none;
}
.clean-slider .slide a {
	display: block;
	text-align: center;
}
.clean-slider .slide img {
	max-width: 90%;
	margin: 0 auto;
}

/* FORMS */
.invalid-feedback {
	display: block;
	font-size: 12px;
	color: #F12F69;
}
.form-group {
	position: relative;
	z-index: 2;
	margin-bottom: 2rem;
}
.form-group label:not(.static) {
  position: absolute;
  z-index: 1;
  top: 1rem;
  left: 2rem;
  transition: all 0.3s;
}
.form-group.active label,
.form-group.filled label {
    top: 10px;
    font-size: 10px;
    opacity: 0.6;
}
.form-control {
	background-color: #f2f2f1;
	border-color: #f2f2f1;
	border-radius: 50px;
	padding: 1.25rem 2rem;
	height: auto;
}
.hero .form-control {
  background-color: #fff;
  border-color: #fff;
}
.form-control.error {
	border-color: #F12F69;
}
/* .form-control:focus {
	box-shadow: 0 0 0 0.2rem #64a52a;
	background-color: rgba(109, 121, 136, 0.1);
	border-color: #f0f1f3;
} */
.form-control.error:focus {
	box-shadow: 0 0 0 0.2rem rgb(241 47 105 / 45%)
}

.hero-input-group.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}
label {
	color: #2c2f33;
	font-weight: 900;
	font-size: 14px;
}
.custom-control {
	margin-bottom: 2rem;
}
.custom-control-label {
	font-weight: 600;
}
.custom-control-input:checked ~ .custom-control-label::before {
	border-color: #64a52a;
    background-color: #64a52a;
}
.custom-control-input:focus ~ .custom-control-label::before {
	box-shadow: 0 0 0 0.2rem rgba(100,166,41,0.25);
}
.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
	background-color: #c6e6aa;
    border-color: #c6e6aa;
}
footer form {
	max-width: 700px;
	margin: 5rem auto 0 auto;
}
footer .form-control {
	color: #fff;
	background-color: #33373C;
  border-color: #33373C;
}
footer .form-control:not(.error):focus {
	color: #fff;
  background-color: #33373C;
  border-color: #74b253;
  box-shadow: 0 0 0 0.25rem rgb(116 178 83 / 25%);
}
footer .form-control.error:focus {
  background-color: #33373C;
}
footer label {
	color: #fff;
}
footer .btn-primary {
	box-shadow: 0px 8px 25px rgba(0,0,0,0.3);
}

/* ACCORDIONS */

.accordion-button,
.accordion-button:focus,
.accordion-button:not(.collapsed) {
  background-color: transparent;
  box-shadow: none;
  font-size: inherit;
  font-weight: 700;
  padding: 2rem 0;
}
.accordion-button:not(.collapsed) {
  color: #2c2f33;
}
.accordion-button::after {
  font-family: 'Font Awesome 5 Free';
  content: '\f106';
  background: none;
  color: #2c2f33;
  width: auto;
  height: auto;
}
.accordion-button:not(.collapsed)::after {
  background: none;
}
.green-bg .accordion-button::after,
.black-bg .accordion-button::after {
  color: #fff;
}
.green-bg .accordion-button:not(.collapsed),
.black-bg .accordion-button:not(.collapsed) {
  color: #fff;
}
.accordion-body {
  padding: 0 0 1rem 0;
}

/**********
RESPONSIVE
*********/

@media all and (min-width: 1025px) {
	#toggle-nav,
	header .nav-item .feather,
	header h5.menu-title {
		display: none;
	}
	header nav {
		display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
	}
}

@media all and (max-width: 1150px) {
	.hide-lg {
		display: none;
	}
}

@media all and (min-width: 1025px) {
  .dt-hide {
    display: none;
  }

  .nav-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

@media all and (max-width: 1024px) {
  .mob-hide {
    display: none;
  }

	header {
		transition: all 0.3s;
	}
	#toggle-nav {
    cursor: pointer;
		position: absolute;
		z-index: 999;
		width: 30px;
		height: 23px;
		top: 3rem;
		right: 5%;
		transition: all 0.3s;
	}
  header.fixed #toggle-nav,
  #toggle-nav.active {
    position: fixed;
  }
  #toggle-nav.bg:not(.active):after {
    content: '';
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background-color: #fff;
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 5px 10px rgb(0,0,0,0.1);
  }
	.bar {
		position: relative;
		display: inline-block;
		width: 30px;
		height: 2px;
		background-color: #64a52a;
	}
	.bar:before,
	.bar:after {
		content: '';
		position: absolute;
		width: 30px;
		height: 2px;
		background-color: #64a52a;
		transition: top 0.1s, transform 0.3s;
	}
	.bar:before {
		top: -10px;
	}
	.bar:after {
		top: 10px;
		width: 20px;
	}
	#toggle-nav.active .bar:after {
		width: 30px;
	}

	#toggle-nav.active .bar {
		background-color: transparent;
	}
	#toggle-nav.active .bar:before,
	#toggle-nav.active .bar:after {
		background-color: #fff;
		top: 0;
	}
	#toggle-nav.active .bar:before {
		transform: rotate(45deg);
	}
	#toggle-nav.active .bar:after {
		transform: rotate(-45deg);
	}

	header nav {
		position: fixed;
		top: 0;
		right: -50%;
		bottom: 0;
		width: 50%;
		background-color: #2c2f33;
		padding: 40px;
	    overflow: scroll;
	    -webkit-transition: all 0.3s;
	    -moz-transition: all 0.3s;
	    -ms-transition: all 0.3s;
	    -o-transition: all 0.3s;
	    transition: all 0.3s;
	}
	header nav.active {
		right: 0;
		box-shadow: -10px 0 50px rgba(44,47,51,0.4);
	}
	header ul.nav {
		display: block;
	}
	header .nav-item {
		margin: 15px 0;
	    padding: 15px 0;
	    border-bottom: 1px solid #414346;
	    font-size: 18px;
	    color: #fff;
	}
	header .nav-link {
		padding-left: 0;
		padding-right: 0;
		font-size: 18px;
		color: #fff;
	}
	header .nav-item .feather {
		width: 16px;
		height: 16px;
		vertical-align: initial;
		margin-right: 10px;
	}
	header h5.menu-title {
		font-size: 12px;
		color: #606469;
	}

	header .section-container {
		padding: 3rem 0;
	}

	/* Sections & Hero */

	/* TEXT */

	h1 {
		font-size: 30px;
	}
	h2 {
		font-size: 24px;
	}
	h3 {
		font-size: 21px;
	}
	h4 {
		font-size: 18px;
	}
	p,
	ul {
		font-size: 14px;
	}

	hr {
		margin: 1.5rem 0;
	}
	.heading-bg span {
		padding: 0;
	}
}

@media all and (max-width: 667px) {
  header nav {
		right: -80%;
		width: 80%;
	}

	.logo {
		max-width: 50%;
		min-width: 180px;
	}
}
[v-cloak] > * {
	display: none
}