.slick-dots {
	bottom: 25px;
}

.contact-bg .left-contact p {
	font-family: OpenSansSemibold, "Helvetica", Helvetica, Arial, sans-serif;
}

.slick-dots li button, .slick-dots li button:before {
	color: #ccd243;
	opacity: 0.7;
}

.slick-active button, .slick-dots li.slick-active button:before {
	color: #48546a;
	opacity: 0.7;
}

.margin-center {
	margin: 0 auto;
}

.feature-slider .slick-list {
	overflow: visible;
}

.feature-slider .image {
	margin: 0 auto;
	width: 200px;
}

.slider-item {
	position: relative;
}

.brand-slider .slick-slide img {
	padding: 0 1rem;
}

.slider-item > .text {
	padding: 75px 10px 0 10px;
}

.slick-prev:before, .slick-next:before {
	content: none;
}

.slick-dotted.slick-slider {
	margin: 0;
}

.brand-slider .slick-slide {
	width: 200px;
}

.trust-slider .slick-slide, .brand-slider .slick-slide {
	opacity: 0.4;
}

.trust-slider .slick-slide.slick-active, .brand-slider .slick-slide.slick-active {
	opacity: 1;
}

.step a:hover h3 {
	color: #008CBA;
}

.steps {
	background: rgb(255, 255, 255);
	border-radius: 4px 4px 0 0;
	box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.25);
	padding: 1rem;
}

.steps.one {
	background: url("../img/icons/homepage_v2/steps/one.svg") no-repeat;
	background-origin: content-box;
	background-position-y: center;
}

.steps.two {
	background: url("../img/icons/homepage_v2/steps/two.svg") no-repeat;
	background-origin: content-box;
	background-position-y: center;
}

.steps.three {
	background: url("../img/icons/homepage_v2/steps/three.svg") no-repeat;
	background-origin: content-box;
	background-position-y: center;
}

.steps > .text {
	margin-left: 35%;
}

.contact-bg {
	background: url("../img/backgrounds/homepage/green-bg-mobile.png") no-repeat;
	background-size: cover;
	text-align: center;
	padding: 2rem 0;
}

.contact-bg p {
	text-align: center;
	color: white;
}

.button.green-button {
	background: #ccd243;
	border-radius: 4px;
	text-transform: uppercase;
	padding-left: 64px;
	padding-right: 64px;
}

.trust-slider {
	padding: 40px 0 40px 0;
	display: flex;
	justify-content: space-evenly;
}

.trust-slider img {
	padding: 0 10px;
	height: auto;
}

.trust-slider div {
	display: flex;
	align-items: center;
}

.payments-easy {
	text-align: center;
}

.white-bg {
	background: white;
	margin: 10px 16px;
}


.pricing-plans {
	background: white;
	text-align: center;
	padding: 1rem;
	position: relative;
	z-index: 2;
}

.pricing-plan-box {
	border-radius: 3px;
	box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.25);
	margin: 1.5rem 0;
}

.pricing-plan-box.popular {
	box-shadow: 0 0 15px 0 rgba(204, 210, 67, 0.75);
}

.pricing-plan-popular {
	position: absolute;
	display: none;
	clip-path: polygon(-5% 0%, 100% 0%, 90% 100%, -5% 100%);
	text-transform: uppercase;
	font-size: 12px;
	font-weight: bold;
	padding: 0 1rem;
	color: #424c60;
	background: #ccd243;
	margin: 1rem 0 0;
}

.pricing-plan-popular-glow {
	float: left;
	width: 1px;
	height: 1px;
	top: -1px;
	box-shadow: 1rem 0 80rem 6rem #ccd24344;
}

.pricing-plan-box.popular .pricing-plan-popular {
	display: block;
}

.pricing-plan-head {
	border-radius: 4px 4px 0 0;
	text-transform: uppercase;
	background: radial-gradient(at top left, rgb(72, 84, 106) 0%, rgba(0, 0, 0, 0.5) 100%) #424c60;
	color: #fff;
	padding: 1rem;
	overflow: hidden;
}

.pricing-plan-price {
	font-size: 64px;
	line-height: 4rem;
}

.pricing-plan-per {
	margin: 0.5rem 0.5rem 0;
	font-size: 0.9rem;
}

.pricing-plan-name {
	font-size: 1.25rem;
	margin: 0.5rem 0;
}

.pricing-plan-details {
	padding: 1rem 0.5rem 0.5rem;
}

.pricing-plan-details div {
	margin: 0.5rem 0;
}

.pricing-plan-button-container-1 {
	position: relative;
	height: 2rem;
}

.pricing-plan-button-container-2 {
	position: absolute;
	bottom: -25%;
	min-width: 8rem;
	width: 50%;
	height: 100%;
	left: 50%;
}

a.pricing-plan-button {
	font-weight: normal;
	text-transform: uppercase;
	background: #ccd243;
	color: #fff;
	border-radius: 4px;
	padding: 0.75rem 0;
	width: 100%;
	left: -50%;
}

.pricing-plans sup {
	font-size: 0.5em;
}

.main-section {
	background: white;
}

.plan > p {
	color: rgb(72, 84, 106);
	margin: 0 auto;
	width: 378px;
}

.plan {
	z-index: 1;
}

.plan a:hover h3 {
	color: #008CBA;
}

#ecommerce-plan {
	padding-top: 40%;
	background: url("../img/icons/homepage_v2/ecommerce-plan.svg") center / 25% no-repeat;
	text-align: center;
}

#online-payments-plan {
	padding-top: 40%;
	background: url("../img/icons/homepage_v2/online-payments-plan.svg") center / 25% no-repeat;
	text-align: center;
}

#customised-plan {
	padding-top: 40%;
	background: url("../img/icons/homepage_v2/customised-plan.svg") center / 20% no-repeat;
	text-align: center;
}

.plan-block a {
	color: #48546a;
}

.plan-block h3 a:hover {
	color: #008CBA;
}

.plan-block p {
	text-align: center;
}

.plan-block {
	padding-bottom: 50px;
}

.plan-underline {
	height: 2px;
	margin: 20px 0;
	background: linear-gradient(#ccd234, #ccd234) bottom/30% no-repeat;
}

.underline-left {
	height: 2px;
	background: linear-gradient(#ccd234, #ccd234) left bottom/30% no-repeat;
}

.underline {
	height: 2px;
	background: linear-gradient(#ccd234, #ccd234) bottom/4% no-repeat;
}

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

.skew-bg:before {
	background: white;
	content: '';
	height: 40%;
	left: 0;
	position: absolute;
	right: 0;
	transform: skewY(5deg);
	transform-origin: 100%;
}

.home-pic {
	background: #ffffff url(../img/headers/hero-image-2-compressed.jpg) no-repeat;
	min-height: 730px;
	background-size: cover;
}

.hero {
	width: 100%;
}

.hero h1 {
	color: #fff;
	font-size: 56px;
	font-family: OpenSansBold, "Helvetica", Helvetica, Arial, sans-serif;
	font-weight: bold;
	letter-spacing: -0.5px;
}

.hero p {
	color: #fff;
	font-size: 20px;
	font-family: OpenSansSemibold, "Helvetica", Helvetica, Arial, sans-serif;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 32px;
}

.homepage-content .columns {
	background: #ffffff
}

.sign-up-row {
	position: absolute;
	z-index: 100;
}

.sign-up-row a.s-button {
	padding: 1.1rem 4.8rem;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-family: OpenSansSemibold, "Helvetica", Helvetica, Arial, sans-serif;
	font-size: 16px;
}

.integrations {
	text-align: center;
	margin-top: 2rem
}

.loved-by {
	position: relative;
}

.loved-by h4 {
	text-align: center;
	font-family: OpenSansSemibold, "Helvetica", Helvetica, Arial, sans-serif;
	font-size: 20px;
}

.txt-gst {
	text-align: right;
	margin: 1.5rem 1.5rem 0 0
}

.right-arrow {
	height: 14px;
	width: 21px;
	background: url("../img/icons/homepage_v2/arrow-blue.svg") no-repeat 98% 65%;
	padding-right: 31px;
}

.learn-more {
	padding: 24px 0;
}

.slick-prev {
	height: 40px;
	width: 40px;
	left: 0;
	background: url("../img/icons/homepage_v2/arrow-left.svg") no-repeat;
	z-index: 3;
	top: 55%;
}

.slick-next {
	height: 40px;
	width: 40px;
	right: 0;
	background: url("../img/icons/homepage_v2/arrow-right.svg") no-repeat;
	z-index: 3;
	top: 55%;
}

.slick-prev:focus, .slick-prev:hover {
	background: url("../img/icons/homepage_v2/arrow-left-green.svg") no-repeat !important;
}

.slick-next:focus, .slick-next:hover {
	background: url("../img/icons/homepage_v2/arrow-right-green.svg") no-repeat !important;
}

.steps .text h3 {
	font-size: 20px;
	font-family: OpenSansRegular, "Helvetica", Helvetica, Arial, sans-serif;
}

.steps .text h4 {
	font-size: 14px;
	font-family: OpenSansBold, "Helvetica", Helvetica, Arial, sans-serif;
}

.steps .text p {
	font-family: OpenSansRegular, "Helvetica", Helvetica, Arial, sans-serif;
}

.green-button {
	font-family: OpenSansSemibold, "Helvetica", Helvetica, Arial, sans-serif;
}

.hero-inner h1 {
	font-family: OpenSansRegular, "Helvetica", Helvetica, Arial, sans-serif;
	font-weight: normal;
}

.hero-inner p {
	font-family: OpenSansRegular, "Helvetica", Helvetica, Arial, sans-serif;
	font-weight: normal;
}

.pricing-plan-details div {
	font-family: OpenSansRegular, "Helvetica", Helvetica, Arial, sans-serif;
}

.pricing-plan-per {
	font-family: OpenSansSemibold, "Helvetica", Helvetica, Arial, sans-serif;
}

.pricing-plan-name {
	font-family: OpenSansSemibold, "Helvetica", Helvetica, Arial, sans-serif;
}

.step-block {
	text-align: left;
	max-width: 600px;
}

.sign-up-block {
	max-width: 1250px;
	width: 70%;
	margin: 0 auto;
}

/* max-width 640px, mobile-only styles */
@media only screen and (max-width: 39.9375em) {

	.sign-up-block {
		border-bottom: none;
		width: 100%;
	}

	.button.green-button {
		background: #ccd243;
		border-radius: 4px;
		text-transform: uppercase;
		padding-left: 30px;
		padding-right: 30px;
	}

	.steps .text h4 {
		font-size: 14px;
		font-family: OpenSansBold, "Helvetica", Helvetica, Arial, sans-serif;
	}

	.steps .text {
		padding-left: 15px;
	}

	.trust-slider img {
		max-height: 55px;
	}

	.slider-trusted {
		padding: 24px 0;
	}

	.slider-trusted img {
		max-height: 42px;
	}

	.steps .text p {
		font-size: 20px;
		font-family: OpenSansRegular, "Helvetica", Helvetica, Arial, sans-serif;
	}

	.hero-inner {
		padding: 60px 0;
	}

	.sign-up-block {
		padding-bottom: 40px;
	}

	.pricing-plans {
		padding-bottom: 0;
	}

	.pricing-plans .underline,
	.payments-easy .underline,
	.integrations .underline {
		background: linear-gradient(#ccd234, #ccd234) bottom/72px no-repeat;
		margin: 20px 0 20px 0;
	}

	.integrations {
		background: #fafafa;
		margin: 0;
		padding-top: 24px;
	}

	.trust {
		background: #fafafa;
		padding-bottom: 60px;
	}

	.integrations p {
		padding: 0 20px;
	}

	.trust-slider {
		padding: 0;
	}

	.contact-bg {
		padding: 24px 0 12px 0;
	}

	.contact-bg .row {
		width: 230px;
	}

	.green-button {
		letter-spacing: 2px;
		font-size: 16px;
		font-family: OpenSansSemibold, "Helvetica", Helvetica, Arial, sans-serif;
		font-weight: 600;
	}

	.contact-bg p {
		font-size: 16px;
	}

	p {
		font-size: 14px;
	}

	.loved-by {
		padding-top: 42px;
	}

	.hero-inner h1 {
		color: #fff;
		font-size: 32px;
		font-family: OpenSansRegular, "Helvetica", Helvetica, Arial, sans-serif;
		font-weight: normal;
		letter-spacing: 0;
		line-height: 40px;
	}

	.hero-inner p {
		color: #fff;
		font-size: 16px;
		font-family: OpenSansRegular, "Helvetica", Helvetica, Arial, sans-serif;
		font-weight: normal;
		line-height: 26px;
	}

	.home-pic {
		background-position: 65% 90%;
		min-height: 436px
	}

	.sign-up-row {
		position: absolute;
		bottom: 12px;
		left: 0;
		text-align: center;
	}

	.home-image-container {
		position: relative;
		min-height: 436px;
	}

	.slick-dots {
		bottom: 0;
	}

	.feature-slider {
		padding: 20px 0 60px 0;
		margin-bottom: 42px !important;
	}

	.feature-slider {
		padding: 0;
	}

	.slider-item > .text {
		padding: 0;
	}

	.slick-prev {
		left: 10px;
	}

	.slick-arrow {
		display: none !important;
	}

	.slider-item > .image {
		top: -55% !important
	}

	.feature-slider .slider-item > .image {
		margin: 0 auto;
		width: 170px;
	}

	.feature-slider .slider-item > .text {
		padding: 0 10px;
	}

	.plan > p {
		font-size: 14px;
		width: 85%;
	}

	.pricing-plan-details div {
		float: left;
		width: 60px;
		font-size: 12px;
		margin: 0 15px;
		font-family: OpenSansRegular, "Helvetica", Helvetica, Arial, sans-serif;
	}

	.pricing-plans .dev-col {
		padding: 0;
		width: 100%;
		max-width: 400px;
		display: inline-block;
	}

	.pricing-plan-details {
		display: inline-block;
	}

	.pricing-plan-details div b {
		float: left;
		width: 60px;
		font-size: 18px;
	}

	a.pricing-plan-button {
		font-size: 16px;
		letter-spacing: 2px;
	}

	.pricing-plan-block {
		margin: 0 auto;
		display: inline-block;
	}

	.pricing-plan-price {
		float: left;
		font-size: 34px;
	}

	.pricing-plan-per {
		font-size: 12px;
		font-family: OpenSansSemibold, "Helvetica", Helvetica, Arial, sans-serif;
		top: 40px;
		position: absolute;
		text-align: left;
		margin: 0;
	}

	.pricing-plan-name {
		font-size: 16px;
		font-family: OpenSansSemibold, "Helvetica", Helvetica, Arial, sans-serif;
		top: 10px;
		position: absolute;
		text-align: left;
	}

	.pricing-name-block {
		float: left;
		width: 172px;
		position: relative;
		margin-left: 10px;
	}

	.pricing-plan-head {
		padding: 0;
	}

	.popular .pricing-plan-block {
		padding-top: 20px;
	}

	.step-block {
		margin-top: 24px;
	}

	.step {
		width: 289px;
		margin-left: auto;
		margin-right: auto;
	}

	.brand-slider {
		padding: 15px 0 30px 0;
	}

	.mobile-txt-gst {
		font-style: italic;
	}

	.feature-slider ul.slick-dots {
		bottom: -10px;
	}
}

/* from 640px, medium up */
@media only screen and (min-width: 40em) {

	.feature-block .text h3 {
		font-size: 37px;
		line-height: 45px;
		margin-bottom: 10px;
	}

	.payments-easy {
		text-align: left;
	}

	.payments-easy .underline {
		background: linear-gradient(#ccd234, #ccd234) left bottom/40% no-repeat;
	}

	.brand-slider img, .slider-trusted img {
		height: 40px;
	}

	.feature-slider {
		padding: 0;
	}

	.payments-easy a, .learn-more a {
		font-size: 16px;
		font-family: OpenSansSemibold, "Helvetica", Helvetica, Arial, sans-serif;
	}

	.pricing-plans .underline,
	.payments-easy .underline,
	.integrations .underline {
		background: linear-gradient(#ccd234, #ccd234) bottom/82px no-repeat;
		margin: 20px 0 20px 0;
	}

	.integrations {
		background: #fafafa;
		margin: 0;
		padding-top: 35px;
	}

	.trust {
		background: #fafafa;
	}

	.trust-block {
		background: #fafafa;
		padding-bottom: 40px;
	}

	.pricing-plans {
		width: 90%;
		margin: 0 auto;
		padding-top: 45px;
	}

	.sign-up-body {
		width: 90%;
		margin: 0 auto;
	}

	.contact-bg .row {
		width: 90%;
		max-width: 1024px;
		margin: 0 auto;
		padding: 0 40px;
	}

	.contact-bg .green-button {
		width: 303px;
	}

	.contact-bg .right-contact p {
		font-size: 24px;
		text-align: center;
	}

	.contact-bg .right-contact {
		padding: 0 !important;
		float: right;
	}

	.contact-bg .left-contact {
		padding-top: 10px;
		width: 50%;
		float: left;
	}

	.contact-bg .left-contact p {
		font-size: 30px;
		text-align: left;
		line-height: 50px;
		font-family: OpenSansSemibold, "Helvetica", Helvetica, Arial, sans-serif;
	}

	.feature-slider .slider-item > .image {
		float: left;
	}

	.feature-block {
		margin: 0 auto;
		width: 750px;
		overflow: hidden;
	}

	.feature-slider .slider-item > .text {
		text-align: left;
		width: 500px;
		margin: 20px 0 0 50px;
		float: left;
	}

	.feature-slider .slick-dots {
		margin-left: -55px;
	}

	.loved-by, .trust-block, .slider-trusted {
		width: 85%;
		overflow: hidden;
		margin: 0 auto;
	}

	.brand-slider .slick-slide img {
		padding: 0;
	}

	.payments-easy {
		padding-top: 70px;
	}

	.step {
		width: 90%;
	}

	.steps > .text {
		margin-left: 100px;
	}

	.payments-easy {
		width: 400px;
		margin-left: auto;
		margin-right: auto;
	}

	.feature-slider .slick-dots {
		margin-left: 0;
		bottom: 40px;
	}

	.feature-slider .slider-item > .text {
		text-align: left;
		width: 60%;
		margin: 0 0 10px 40px;
		float: left;
	}

	.feature-slider .slider-item > .image {
		width: 23%;
		margin-left: 50px;
	}
}

/* min-width 641-1023px, medium screens only */
@media only screen and (min-width: 40em) and (max-width: 63.9375em) {
	.sign-up-block {
		border-bottom: none;
	}

	.contact-bg .row {
		width: 100%;
	}

	.contact-bg .left-contact {
		width: 40%;
	}

	.payments-easy .underline {
		background: linear-gradient(#ccd234, #ccd234) left bottom/40% no-repeat;
	}

	.home-pic {
		background-position: 60% 0;
		min-height: 536px
	}

	.hero-inner {
		padding: 60px 0 0 0
	}

	.hero-inner h1 {
		width: 480px;
	}

	.hero-inner p {
		width: 480px
	}

	.sign-up-row {
		padding: 0;
		margin: 50px 0 0 60px
	}

	.plan > p {
		width: 200px !important;
	}

	.plan h3 {
		font-size: 20px;
		margin-top: 20px;
	}

	.feature-block {
		width: 750px;
	}

	.contact-bg .left-contact p {
		font-size: 20px;
		line-height: 40px;
	}

	.slider-item > .image {
		width: 200px;
	}

	.feature-slider {
		padding: 50px 0 !important
	}

	.slick-dots {
		margin-top: 20px;
		bottom: 60px;
	}

	.sign-up-block {
		padding: 0 !important;
		display: inherit !important;
		width: 100%;
	}

	.sign-up-block .payments-easy {
		margin: 0 auto;
		padding: 60px 0 30px 0;
	}

	.contact-bg {
		padding: 30px 0 10px 0 !important;
	}

	.contact-bg {
		background: url("../img/backgrounds/homepage/green-bg.png") no-repeat;
		background-size: cover;
		padding: 30px 300px 10px 300px;
	}

	.sign-up-block {
		display: flex;
		padding: 0 300px;
	}

	.sign-up-block > div:first-child {
		display: flex;
		align-items: center;
	}

	.payments-easy {
		text-align: left;
	}

	.steps {
		padding: 2rem;
	}

	.step {
		min-width: 350px;
	}

	.steps > .text {
		margin-left: 30%;
	}

	.payments-easy {
		width: 200px;
	}

	.steps.one {
		background-size: 50px;
	}

	.steps.two {
		background-size: 50px;
	}

	.steps.three {
		background-size: 50px;
	}

	.brand-slider {
		padding: 2rem 50px;
	}

	.slider-item > .text {
		margin-left: 41%;
		text-align: left;
		padding: 0px 10px 0 10px;
	}

	.home-pic {
		background-position: 60% 0;
		min-height: 536px
	}

	.plan > p {
		width: auto;
	}

	.loved-by, .trust-block, .slider-trusted {
		width: 95%;
	}

	.hero-inner {
		padding: 60px 0 0 0
	}

	.hero-inner h1 {
		width: 500px;
		font-size: 3em;
	}

	.hero-inner p {
		width: 490px
	}

	.pricing-plans .dev-col {
		min-width: 380px;
	}
}

/* large only 1024-1199px*/
@media only screen and (min-width: 64em) and (max-width: 74.9375em) {
	.pricing-plans .dev-col {
		min-width: 380px;
	}

	.steps {
		min-height: 138px;
	}

	.contact-bg .left-contact p {
		font-size: 24px;
		line-height: 40px;
	}

	.contact-bg .right-contact {
		padding-top: 20px;
	}

	.contact-bg .row {
		width: 100%;
	}

	.feature-block {
		width: 750px;
	}

	.home-pic {
		background-position: 60% 0;
		min-height: 536px
	}

	.hero-inner h1 {
		width: 500px;
		font-family: OpenSansRegular, "Helvetica", Helvetica, Arial, sans-serif;
	}

	.hero-inner p {
		width: 490px;
		font-family: OpenSansRegular, "Helvetica", Helvetica, Arial, sans-serif;
	}

	.hero-inner h1 {
		color: #fff;
		font-size: 52px;
		font-family: OpenSansRegular, "Helvetica", Helvetica, Arial, sans-serif;
		font-weight: normal;
		letter-spacing: 0;
		line-height: 50px;
	}

	.hero-inner p {
		color: #fff;
		font-size: 16px;
		font-family: OpenSansRegular, "Helvetica", Helvetica, Arial, sans-serif;
		font-weight: normal;
		line-height: 26px;
	}

	.plan > p {
		width: auto;
	}
}

/* min-width 1025px, large and up */
@media only screen and (min-width: 64em) {
	.sign-up-block {
		width: 90%;
	}

	.steps.one, .steps.two, .steps.three {
		background-position-x: 30px;
	}

	.steps .text {
		padding-left: 50px;
	}

	.payments-easy .underline {
		background: linear-gradient(#ccd234, #ccd234) left bottom/40% no-repeat;
	}

	.loved-by, .trust-block, .slider-trusted {
		width: 95%;
	}

	.hero-inner {
		padding: 150px 0 0 0
	}

	.hero-inner h1 {
		width: 520px
	}

	.hero-inner p {
		width: 520px
	}

	.sign-up-row {
		padding: 0;
		margin: 40px 0 0 0
	}

	.feature-slider .slick-dots {
		position: relative;
		margin-bottom: 50px;
	}

	.brand-slider {
		padding: 24px 0;
	}

	.feature-slider .slick-dots {
		margin-left: 0;
		bottom: 40px;
	}

	.feature-slider .slider-item > .text {
		text-align: left;
		width: 55%;
		margin: 0 0 10px 40px;
		float: left;
		padding: 0 0 15px 0;
	}

	.feature-slider .slider-item > .image {
		width: auto;
		margin-left: 50px;
	}

	.feature-block {
		width: 750px;
	}

	.feature-slider .slider-item img {
		height: 219px;
		padding-bottom: 30px;
	}
}