/*
Theme Name: Kamion
Author: Ryan Michael Reyes
Version: 1.27
*/

html {
	font-size: 18px;
}
h1, h2 {
	font-family: "Bebas Neue", sans-serif;
}
.inner {
	max-width: 1500px;
	padding: 0 36px;
}
.bg-primary {
	background-color: #32CD32;
	color: #fff;
}
.bg-secondary {
	background-color: #87CEEB;
	color: #fff;
}
.border-primary {
	border-color: #32CD32;
}
.text-primary {
	color: #32CD32;
}
.bg-primary.bg-opacity-10 {
	background-color: rgba(50,205,50,0.1)
}
.bg-white.bg-opacity-10 {
	background-color: rgba(255,255,255,0.1);
}
.hero-gradient {
	background: linear-gradient(135deg, #5038ED 0%, #6EE7B7 100%);
}
.feature-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.pricing-card:hover {
	transform: scale(1.03);
}
footer {
	border-top: 1px solid rgba(255,255,255,0.2);
}
@media screen and (max-width:1500px) {
	.inner {
		padding: 0 2.4vw;
	}
}
@media screen and (max-width:1023px) {
	.inner {
		padding: 2rem;
	}
}
@media screen and (max-width:768px) {
	html {
		font-size: 14px;
	}
	.inner {
		padding: 1.2rem;
	}
}

/* SITE NAVIGATION */
nav {
	z-index: 500;
	background-color: #000;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}
nav.hero-section {
	background-color: #000;
}
nav.features-section {
	background-color: #6cc088;
}
nav.driverapp {
	background-color: #4A6EB7;
}
nav.built-for-enterprise-section {
	background-color: #00BCFF;
}
nav.feature-last-section {
	background-color: #7CCF00;
}
nav.testimonials-section {
	background-color: #5F92D1;
}
nav.pricing-section {
	background-color: #00786F;
}
div.site-nav {
	position: relative;
	display: initial !important;
	padding: 0 2rem;
	background-color: rgba(0,0,0,0.2);
	clip-path: polygon(
		3% 0,
		100% 0,
		97% 100%,
		0 100%
	);
}
.site-nav ul {
	display: flex !important;
}
.site-nav ul li a {
	position: relative;
	display: block;
    color: #fff;
    font-weight: 600;
    padding: 1.75rem 1rem;
	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	-ms-transition: all 0.25s ease;
	transition: all 0.25s ease;
}
.site-nav ul li a:hover,
.site-nav ul li a.active {
	color: rgba(50,205,50,1) !important;
}
.site-nav ul li a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 4px;
	background-color: rgba(50,205,50,1);
	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	-ms-transition: all 0.25s ease;
	transition: all 0.25s ease;
}
.site-nav ul li a.active::after {
	width: 100%;
}

.nav-icon {
	display: none;
	position: absolute;
	width: 40px;
	height: 30px;
	top: 50%;
	right: 1rem;
	cursor: pointer;
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.nav-icon.open .burger {
	background: none;
}
.nav-icon.open .burger:before, .nav-icon.open .burger:after {
	top: 0;
}
.nav-icon.open .burger:before {
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.nav-icon.open .burger:after {
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.nav-icon:hover:not(.open) .burger:before {
	top: -15px;
}
.nav-icon:hover:not(.open) .burger:after {
	top: 15px;
}
.burger, .burger:before, .burger:after {
	width: 40px;
	height: 5px;
	background: #fff;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
.burger {
	position: relative;
	margin: 12px auto 0;
}
.burger:before, .burger:after {
	content: "";
	position: absolute;
}
.burger:before {
	top: -10px;
}
.burger:after {
	top: 10px;
}
@media screen and (max-width:1400px) {
	div.site-nav {
		padding-right: 1rem;
	}
	.site-nav ul li a {
		padding: 1.9rem 0.6rem;
		font-size: 80%;
	}
	div.site-nav {
		clip-path: polygon(
			4% 0,
			100% 0,
			96% 100%,
			0 100%
		);
	}
}
@media screen and (max-width:1024px) {
	.nav-icon {
		display: block;
	}
	div.site-nav {
		position: fixed;
		top: 90px;
		right: -100%;
		left: 100%;
		bottom: 0;
		padding: 0;
		background: #000;
		border-top: 1px solid #fff;
		clip-path: none;
		-webkit-transition: all 0.25s ease;
		-moz-transition: all 0.25s ease;
		-o-transition: all 0.25s ease;
		-ms-transition: all 0.25s ease;
		transition: all 0.25s ease;
	}
	div.site-nav.open.hero-section {
		background-color: #000;
	}
	div.site-nav.open.features-section {
		background-color: #6cc088;
	}
	div.site-nav.open.driverapp {
		background-color: #4A6EB7;
	}
	div.site-nav.open.built-for-enterprise-section {
		background-color: #00BCFF;
	}
	div.site-nav.open.feature-last-section {
		background-color: #7CCF00;
	}
	div.site-nav.open.testimonials-section {
		background-color: #5F92D1;
	}
	div.site-nav.open.pricing-section {
		background-color: #00786F;
	}
	.site-nav.open {
		display: block !important;
		right: 0;
		left: 0;
	}
	.site-nav ul,
	.site-nav ul li {
		display: block !important;
		text-align: center;
	}
	.site-nav ul li {
		border-bottom: 1px solid #222;
		text-transform: uppercase;
	}
	.site-nav ul li a {
		background-color: rgba(0,0,0,0.2);
	}
}
@media screen and (max-width:768px) {
	.nav-icon {
		right: 0;
	}
	div.site-nav {
		top: 71px;
	}
	.site-nav ul li a {
		font-size: 1.4rem;
	}
}

/* GALLERY */
.gallery {
	--g: 8px;
	display: grid;
	clip-path: inset(1px);
	margin: 0 auto;
	width: 40rem;
}
.gallery > img {
	--_p: calc(-1*var(--g));
	grid-area: 1/1;
	width: 40rem;
	aspect-ratio: 1;
	cursor: pointer;
	transition: .4s .1s;
}
.gallery > img:first-child {
	clip-path: polygon(0 0, calc(100% + var(--_p)) 0 , 0 calc(100% + var(--_p)))
}
.gallery > img:last-child {
	clip-path: polygon(100% 100%, 100% calc(0% - var(--_p)), calc(0% - var(--_p)) 100%)
}
.gallery:hover > img:last-child,
.gallery:hover > img:first-child:hover{
	--_p: calc(50% - var(--g));
}
.gallery:hover > img:first-child,
.gallery:hover > img:first-child:hover + img{
	--_p: calc(-50% - var(--g));
}

/* HERO */
#hero-section {
	position: relative;
	z-index: 20;
	background-image: url('/wp-content/themes/kamion/assets/hero-bg.jpg');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: top -400px center;
}
#hero-section > div::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 85%, rgba(255, 255, 255, 0.3) 100%);;
}
#partners-section::before,
#pricing-section::before,
#feature-last-section::before,
#hero-section::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: -59px;
	z-index: 10;
	width: 50%;
	height: 60px;
	background-color: #fff;
	clip-path: polygon(
		0 0,
		100% 100%,
		100% 0
	);
}
#partners-section::after,
#pricing-section::after,
#feature-last-section::after,
#hero-section::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: -59px;
	z-index: 10;
	width: calc(50% + 1px);
	height: 60px;
	background-color: #fff;
	clip-path: polygon(
		0 0,
		0 100%,
		100% 0
	);
}
#hero-section h1 {
	padding-top: 5rem;
	padding-bottom: 1.2rem;
	font-size: 6rem;
	line-height: 1;
}
#hero-section h1 span {
	display: inline-block;
}
#hero-section .text-header-1 {
	font-size: 8rem;
	color: #32CD32;
	letter-spacing: -2px;
}
#hero-section .text-header-2 {
	color: #4A5565;
}
@media screen and (max-width:1500px) {
	#hero-section {
		background-size: 150%;
		background-position: top -200px center;
	}
}
@media screen and (max-width:1024px) {
/* @media screen and (max-width:768px) { */
	#hero-section {
		background-size: 200%;
		background-position: top -100px center;
	}
	#hero-section h1 {
		padding-top: 3rem;
	}
}
@media screen and (max-width:425px) {
	#hero-section {
		background-size: 200%;
		background-position: top center;
	}
	#hero-section h1 {
		line-height: 0.85;
	}
	#hero-section h2 br {
		display: none;
	}
}

/* FEATURES */
#features-section {
	position: relative;
	z-index: 10;
	background: #8cbed1;
	background: linear-gradient(135deg, rgb(188, 215, 226) 0%, rgb(162, 224, 188) 50%, rgb(245, 237, 169) 100%);
	clip-path: polygon(
		0 0,
		100% 0,
		100% 95%,
		50% 100%,
		0 95%
	);
}
#schedule-section::before,
#testimonials-section::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: -1px;
	z-index: 10;
	width: 50%;
	height: 60px;
	background-color: #fff;
	clip-path: polygon(
		0 0,
		0 100%,
		100% 100%
	);
}
#schedule-section::after,
#testimonials-section::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: -1px;
	z-index: 10;
	width: calc(50% + 1px);
	height: 60px;
	background-color: #fff;
	clip-path: polygon(
		0 100%,
		100% 100%,
		100% 0
	);
}

/* FEATURE CARDS */
.feature-card {
	cursor: pointer;
	height: 17rem;
}
.feature-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.4s;
	transform-style: preserve-3d;
}
.feature-card-front,
.feature-card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
}
.feature-card-back {
	transform: rotateY(180deg);
	line-height: 1.25;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-color: #666;
}
.feature-card:hover .feature-card-inner {
	transform: rotateY(180deg);
}
@media screen and (min-width:1280px) {
	.feature-card {
		height: 20rem;
	}
}
@media screen and (max-width:640px) {
	.feature-card-front .bg-primary {
		margin: 0 auto;
	}
}

/* DRIVER APP */
#driverapp {
	padding-bottom: 6rem;
	background-image: url('assets/bg-driver-app.jpg');
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
}
#driverapp::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255,255,255,0.8);
}
#driverapp > * {
	position: relative;
	z-index: 10;
}
#driverapp .items-start > div:last-child {
	width: 100%;
}
.driver-app-left {
	background: linear-gradient(180deg, #0ABAB5 0%, #4b6cb7 100%);
}
.driver-app-image-container {
	position: relative;
	overflow: hidden;
}
.map-holder {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #CAE5F4;
}
.map-holder .map-stage {
	position: absolute;
	top: -944.812px;
    left: -1982.8px;
	width: 3000px;
	height: 2436px;
	max-width: initial;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}
#map-svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 3000px;
	height: 2436px;
}
.map-holder .map-stage {
	top: calc((3000px * 0.50) * -0.5);
    left: calc((2436px * 0.50) * -0.5);
	width: calc(3000px * 0.50);
	height: calc(2436px * 0.50);
}
#map-svg {
	width: calc(3000px * 0.50);
	height: calc(2436px * 0.50);
}
.map-holder .map-stage > img {
	width: 100%;
	height: 100%;
}
.map-holder .map-labels {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.map-holder .pointer {
	position: absolute;
	z-index: 10;
	width: 1px;
	height: 1px;
}
.map-holder .pointer .ico-map-marker {
	position: absolute;
	top: -60px;
	left: -20px;
	width: 40px;
	z-index: 2;
	max-width: initial;
	height: auto;
	opacity: 0;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.map-holder .pointer.active .ico-map-marker {
	top: -40px;
	opacity: 1;
}
.map-holder .pointer .ico-ping {
	position: absolute;
	top: -50px;
	left: -50px;
	width: 100px;
	max-width: initial;
	height: auto;
	opacity: 0;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.map-holder .pointer.active .ico-ping {
	opacity: 1;
}
.map-holder .brisbane-pointer {
	top: 51.07%;
    left: 81.96%;
}
.map-holder .sydney-pointer {
	top: 68.3%;
    left: 78.15%;
}
.map-holder .canberra-pointer {
	top: 72.2%;
    left: 75.45%;
}
.map-holder .melbourne-pointer {
	top: 77.9%;
    left: 67.75%;
}
.map-holder .hobart-pointer {
	top: 92.4%;
    left: 71.95%;
}
.map-holder .adelaide-pointer {
	top: 70.85%;
    left: 56.55%;
}
.map-holder .perth-pointer {
	top: 62.24%;
    left: 15.7%;
}
.map-holder .darwin-pointer {
	top: 16.55%;
    left: 42.96%;
}
#map-svg .main-line {
	stroke: #00bcff;
	stroke-width: 4;
	stroke-opacity: 0;
}
#map-svg .sub-line {
	stroke: #1fc3ff;
	stroke-width: 1;
	stroke-opacity: 0;
}
@media screen and (max-width:1024px) {
	.driver-app-image-container {
		height: 30rem;
	}
}

/* CARDS */
.card {
	width: 17rem;
	width: 100%;
	height: 6rem;
	cursor: pointer;
}
.card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.6s;
	transform-style: preserve-3d;
}
.card:hover .card-inner {
	transform: rotateY(180deg);
}
.card-front,
.card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 0.5rem;
	backface-visibility: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.5rem;
	border: 1px solid rgba(255,255,255,0.2);
}
.card-back {
	color: white;
	transform: rotateY(180deg);
	line-height: 1.25;
}

/* FEATURE DASHBOARD */
#feature-last-section .grid {
	padding: 45px;
}
#feature-last-section .grid > div:nth-child(1) {
	padding-right: 2.4vw;
}
@media screen and (max-width:1500px) {
	#feature-last-section .grid {
		padding: 3vw;
	}
}

/* VIS */
.preview-pain-wrapper {
	position: relative;
	height: 30rem;
}
.preview-pane {
	position: absolute;
	top: 0;
	left: 2.4vw;
	opacity: 0;
}
.preview-pane.active {
	opacity: 1;
}
.preview-control {
	position: relative;
}
#preview-selection-hover {
	border-radius: 4px;
	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	-ms-transition: all 0.25s ease;
	transition: all 0.25s ease;
}
.preview-selector,
#preview-selection-hover {
	position: absolute;
	z-index: 2;
}
.vis-1-selector,
#preview-selection-hover.vis-1 {
	top: 64px;
	left: 311px;
    width: 312px;
    height: 222px;
}
.vis-2-selector,
#preview-selection-hover.vis-2 {
	top: 321px;
    left: 208px;
    width: 206px;
    height: 165px;
}
.vis-3-selector,
#preview-selection-hover.vis-3 {
	top: 64px;
    left: 0;
    width: 311px;
    height: 221px;
}
.vis-4-selector,
#preview-selection-hover.vis-4 {
	top: 321px;
    left: 3px;
    width: 208px;
    height: 167px;
}
.vis-5-selector,
#preview-selection-hover.vis-5 {
	top: 321px;
    left: 412px;
    width: 207px;
    height: 165px;
}
#preview-selection-hover.vis-1 {
	background: rgba(220,237,193,0.6);
}
#preview-selection-hover.vis-2 {
	background: rgba(201,201,255,0.6);
}
#preview-selection-hover.vis-3 {
	background: rgba(242,221,208,0.6);
}
#preview-selection-hover.vis-4 {
	background: rgba(153,162,161,0.6);
}
#preview-selection-hover.vis-5 {
	background: rgba(104, 199, 112, 0.6);
}
@media screen and (max-width:1500px) {
	.preview-pain-wrapper {
		height: 36vw;
	}
	.vis-1-selector,
	#preview-selection-hover.vis-1 {
		top: 4.267vw;
		left: 21vw;
		width: 21.2vw;
		height: 15.133vw;
	}
	.vis-2-selector,
	#preview-selection-hover.vis-2 {
		top: 22vw;
		left: 14.133vw;
		width: 13.933vw;
		height: 11vw;
	}
	.vis-3-selector,
	#preview-selection-hover.vis-3 {
		top: 4.267vw;
		left: 0;
		width: 21.2vw;
		height: 15.133vw;
	}
	.vis-4-selector,
	#preview-selection-hover.vis-4 {
		top: 22vw;
		left: 3px;
		width: 14vw;
		height: 11vw;
	}
	.vis-5-selector,
	#preview-selection-hover.vis-5 {
		top: 22vw;
		left: 28vw;
		width: 14vw;
		height: 11vw;
	}
}
@media screen and (max-width:1023px) {
	.preview-control {
		display: none;
	}
	.preview-pain-wrapper {
		margin-top: 2rem;
		height: 66.862vw;
	}
	.preview-pane {
		position: relative;
		opacity: 1;
	}
}

.btn {
	position: relative;
	display: inline-block;
	width: 14rem;
	height: 3rem;
	border: 1px solid #ccc;
	overflow: hidden;
}
.btn span {
	position: absolute;
	width: 100%;
	text-align: center;
	left: 50%;
	transform: translate(-50%,-50%);
  	transition: top 0.5s;
}
.btn-text-one {
	top: 50%;
}
.btn-text-two {
	top: 150%;
}
.btn:hover .btn-text-one {
  top: -100%;
}
.btn:hover .btn-text-two {
  top: 50%;
}

#vis-2-chart,
#vis-4-chart,
#vis-5-chart {
	position: absolute;
	top: 124px;
    left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	height: 340px !important;
    width: 500px !important;
	background-color: #fff;
}
#vis-5-chart {
	width: 420px !important;
}
@media screen and (max-width:1500px) {
	#vis-2-chart,
	#vis-4-chart,
	#vis-5-chart {
		top: 8.267vw;
		height: 22.667vw !important;
		width: 33.333vw !important;
	}
	#vis-5-chart {
		width: 28vw !important;
	}
}
@media screen and (max-width:1023px) {
	.preview-pane {
		left: 0;
		text-align: center;
	}
	.preview-pane img,
	.slick-slide img {
		display: inline-block !important;
	}
	#vis-2-chart,
	#vis-4-chart,
	#vis-5-chart {
		top: 145px;
        height: 303px !important;
        width: 500px !important;
	}
	#vis-5-chart {
		width: 460px !important;
	}
}
@media screen and (max-width:635px) {
	#vis-2-chart,
	#vis-4-chart,
	#vis-5-chart {
		top: 21.835vw;
        height: 47.717vw !important;
        width: 78.74vw !important;
	}
	#vis-5-chart {
		width: 57.354vw !important;
	}
}

/* PRICING */
.pricing-card {
	position: relative;
	overflow: hidden;
}
.pricing-card:hover {
	transform: scale(1.05);
}
.pricing-card-content {
	padding: 2rem 2rem 6rem;
}
.btn-get-started {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1rem 1.5rem;
}
.btn-get-started a {
	display: block;
	width: 100%;
}

.template-slider {
	position: relative;
}
.tablet-slider-container {
	position: absolute;
	z-index: 1;
 	top: 52px;
    left: 76px;
	width: 428px;
    height: 590px;
	overflow: hidden;
}
.phone-slider-container {
	position: absolute;
	z-index: 1;
	top: 332px;
    left: 404px;
	width: 190px;
    height: 374px;
	overflow: hidden;
}
@media screen and (max-width:1470px) {
	.tablet-slider-container {
		top: 3.537vw;
		left: 5.17vw;
		width: 29.116vw;
		height: 40.136vw;
	}
	.phone-slider-container {
		top: 22.585vw;
		left: 27.483vw;
		width: 12.925vw;
		height: 25.442vw;
	}
}
@media screen and (max-width:1024px) {
	.tablet-slider-container {
		top: 3.711vw;
		left: 4.883vw;
		width: 29.297vw;
		height: 40.039vw;
	}
	.phone-slider-container {
		top: 22.656vw;
		left: 27.344vw;
		width: 12.891vw;
		height: 25.391vw;
	}
}

#loader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	background-color: #000;
}
#loader .loading-message {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 50%;
	color: #fff;
	text-align: center;
	font-size: 2rem;
}
#loader img {
	display: inline-block;
	margin-top: 1rem;
	width: 10rem;
}

.text-header-1,
.text-header-2,
.text-link-1,
.text-link-2,
.text-paragraph-1,
.text-paragraph-2,
.template-slider {
	opacity: 0;
}

/* INITIAL LOADER */
#container{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00adef', endColorstr='#0076e5',GradientType=1 );
    position: relative;
    height: 700px;
    width: 100%;
    margin: 0px auto;
    padding: 0px auto;
}
#container-inside {
    position: relative;
    min-width: 960px;
    max-width: 1280px;
    height: auto;
    min-height: 100%;
    margin: 0px auto;
    padding: 0px auto;
    overflow: visible;
}
#circle-small {
    -webkit-animation: circle-small-scale 3s ease-in-out infinite alternate;
    animation: circle-small-scale 3s ease-in-out infinite alternate;
	animation-timing-function: cubic-bezier(.6, 0, .4, 1);
	animation-delay: 0s;
	position: absolute;
	top: 200px;
	left: -150px;
    background: #fff;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    opacity: 0.1;
}
#circle-medium {
    -webkit-animation: circle-small-scale 3s ease-in-out infinite alternate;
    animation: circle-small-scale 3s ease-in-out infinite alternate;
	animation-timing-function: cubic-bezier(.6, 0, .4, 1);
	animation-delay: 0.3s;
	position: absolute;
	top: 50px;
	left: -300px;
    background: #fff;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    opacity: 0.08;
}
#circle-large {
    -webkit-animation: circle-small-scale 3s ease-in-out infinite alternate;
    animation: circle-small-scale 3s ease-in-out infinite alternate;
	animation-timing-function: cubic-bezier(.6, 0, .4, 1);
	animation-delay: 0.6s;
	position: absolute;
	top: -100px;
	left: -450px;
    background: #fff;
    width: 900px;
    height: 900px;
    border-radius: 50%;
    opacity: 0.06;
}
#circle-xlarge {
    -webkit-animation: circle-small-scale 3s ease-in-out infinite alternate;
    animation: circle-small-scale 3s ease-in-out infinite alternate;
	animation-timing-function: cubic-bezier(.6, 0, .4, 1);
	animation-delay: 0.9s;
	position: absolute;
	top: -250px;
	left: -600px;
    background: #fff;
    width: 1200px;
    height: 1200px;
    border-radius: 50%;
    opacity: 0.04;
}
#circle-xxlarge {
    -webkit-animation: circle-small-scale 3s ease-in-out infinite alternate;
    animation: circle-small-scale 3s ease-in-out infinite alternate;
	animation-timing-function: cubic-bezier(.6, 0, .4, 1);
	animation-delay: 1.2s;
	position: absolute;
	top: -400px;
	left: -750px;
    background: #fff;
    width: 1500px;
    height: 1500px;
    border-radius: 50%;
    opacity: 0.02;
}
@-webkit-keyframes circle-small-scale {
    0% {
        -webkit-transform: scale(1.0);
    }
    100% {
        -webkit-transform: scale(1.1);
    }
}
@keyframes circle-small-scale {
    0% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(1.1);
    }
}

/* CONTACT */
#contact {
	background: #1E2939;
	background: linear-gradient(0deg, rgba(30, 41, 57, 1) 0%, rgba(73, 89, 115, 1) 100%);
}
#contact label {
	text-transform: uppercase;
}
#contact .has-error label {
	color: #f99;
}
#contact .has-error input,
#contact .has-error textarea {
	border-color: #f00;
    background-color: #ffc;
}

/* KAMION LOGO */
.logo-kamion {
	position: absolute;
	top: -15px;
	left: 0;
	width: 288px;
	height: 30px;
	perspective: 1000px;
}
.logo-kamion::before {
	content: '';
	position: absolute;
	top: -30px;
	right: -50px;
	left: -1550px;
	bottom: -30px;
	display: block;
	background-color: rgba(0,0,0,0.2);
	clip-path: polygon(
		0 0,
		100% 0,
		98.45% 100%,
		0 100%
	);
}
.logo-kamion::after {
	content: '';
	position: absolute;
	top: -30px;
	left: 320px;
	bottom: -30px;
	display: block;
	width: 60px;
	background-color: rgba(0,0,0,0.2);
	clip-path: polygon(
		50% 0,
		100% 0,
		50% 100%,
		0 100%
	);
}
.logo-kamion div {
	position: absolute;
}
.logo-kamion > div {
	top: 0;
	height: 30px;
	transition: transform 0.4s;
  	transform-style: preserve-3d;
}
.logo-kamion > div.spin {
	transition: transform 0.4s;
	transform: rotateY(180deg);
}
.kamion-k {
	top: 0;
	left: 0;
	width: 48px;
}
.kamion-k > div {
	background-color: rgba(255,255,255,1);
}
.kamion-k > div:nth-child(1) {
	top: 0;
	left: 0;
	bottom: 0;
	width: 8px;
}
.kamion-k > div:nth-child(2) {
	top: 0;
	left: 8px;
	width: 40px;
	height: 15px;
	clip-path: polygon(
		-5px 100%,
		24% 100%,
		100% 0,
		70% 0
	);
}
.kamion-k > div:nth-child(3) {
	top: 14px;
	left: 8px;
	width: 40px;
	height: 16px;
	clip-path: polygon(
		-5px 0,
		65% 100%,
		100% 100%,
		25% 0
	);
}
.kamion-a {
	left: 51px;
	width: 58px;
}
.kamion-a > div {
	background-color: rgba(255,255,255,1);
}
.kamion-a > div:nth-child(1) {
	top: 0;
	left: 0;
	bottom: 0;
	width: 34px;
	clip-path: polygon(
		0 100%,
		28% 100%,
		100% 0,
		72% 0
	);
}
.kamion-a > div:nth-child(2) {
	top: 0;
	left: 25px;
	bottom: 0;
	width: 34px;
	clip-path: polygon(
		0 0,
		70% 100%,
		100% 100%,
		26% 0
	);
}
.kamion-a > div:nth-child(3) {
	top: 18px;
    left: 10px;
	width: 38px;
	height: 16px;
	clip-path: polygon(
		0 0,
		0 38%,
		100% 38%,
		100% 0
	);
}
.kamion-m {
	left: 115px;
	width: 50px;
}
.kamion-m > div {
	background-color:#32cd32;
}
.kamion-color1 .kamion-m > div { background-color:#32cd32; }
.kamion-color2 .kamion-m > div { background-color:#d1f6f6; }
.kamion-color3 .kamion-m > div { background-color:#DAA520; }
.kamion-color4 .kamion-m > div { background-color:#87CEEB; }
.kamion-color5 .kamion-m > div { background-color:#F88379; }
.kamion-m > div:nth-child(1) {
	top: 0;
	left: 0;
	bottom: 0;
	width: 8px;
}
.kamion-m > div:nth-child(2) {
	top: 0;
	left: 22px;
	height: 22px;
	width: 8px;
}
.kamion-m > div:nth-child(3) {
	top: 0;
	left: 42px;
	bottom: 0;
	width: 8px;
}
.kamion-i {
	left: 172px;
	width: 8px;
}
.kamion-i > div {
	background-color: rgba(255,255,255,1);
}
.kamion-i > div:nth-child(1) {
	top: 0;
	left: 0;
	bottom: 0;
	width: 8px;
}
.kamion-o {
	left: 187px;
	width: 46px;
}
.kamion-o > div {
	background-color: rgba(255,255,255,1);
}
.kamion-o > div:nth-child(1) {
	top: 0;
	left: 0;
	bottom: 7px;
	width: 8px;
	border-top-left-radius: 8px;
}
.kamion-o > div:nth-child(2) {
	left: 0;
	bottom: 0;
	height: 7px;
	width: calc(100% - 8px);
	border-bottom-left-radius: 8px;
}
.kamion-o > div:nth-child(3) {
	top: 7px;
	right: 0;
	bottom: 0;
	width: 8px;
	border-bottom-right-radius: 8px;
}
.kamion-o > div:nth-child(4) {
	top: 0;
	left: 8px;
	right: 0;
	height: 7px;
	border-top-right-radius: 8px;
}
.kamion-n {
	left: 238px;
	width: 48px;
}
.kamion-n > div {
	background-color: rgba(255,255,255,1);
}
.kamion-n > div:nth-child(1) {
	top: 0;
	left: 0;
	bottom: 0;
	width: 8px;
}
.kamion-n > div:nth-child(2) {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	clip-path: polygon(
		0 0,
		75% 100%,
		100% 100%,
		25% 0
	);
}
.kamion-n > div:nth-child(3) {
	top: 0;
	right: 0;
	bottom: 0;
	width: 8px;
}
@media screen and (min-width:1025px) {
	.logo-kamion > div:hover {
		transform: rotateY(180deg);
	}
}
@media screen and (max-width:768px) {
	.logo-kamion {
		left: -2rem;
		transform: scale(0.8);
	}
	.nav-icon {
		top: 28%;
		right: 1rem;
		transform: scale(0.8);
	}
}

.partners-list .partner {
	padding: 1rem;
}

#gs_logo_area_49,
#gs_logo_area_50 {
	opacity: 1 !important;
	visibility: visible !important;
}

.gs_logo_container {
	text-align: center;
}
.gs_logo_single {
	padding: 1rem
}
.gs_logo_container img {
	width: 100%;
	filter: grayscale(100%);
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
.gs_logo_container img:hover {
	filter: grayscale(0%);
	transform: scale(1.15);
}
.gs_logo_container .slick-track {
	display: flex;
	align-items: center;
}

/* MODAL */
.modal {
	position: fixed;
	top: 0;
	left: 100%;
	right: -100%;
	bottom: 0;
	z-index: 1000;
	background: #fff;
	border: 1px solid #666;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
.modal.open {
	left: 0;
	right: 0;
}
.modal-header {
	padding: 2rem;
	background: #000;
	font-size: 3rem;
	color: #fff;
}
.modal-header h2 {
	line-height: 1;
}
.btn-close-modal {
	float: right;
}
.modal-content {
	position: absolute;
	top: 126px;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 2rem;
	background: #fff;
	overflow-y: auto;
}
.modal-content h3 {
	margin: 2rem 0 1rem;
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.2;
}

/* TESTIMONIALS */
.sp-testimonial-free-wrapper {
	clear: both;
	margin-top: 2rem;
}
.sp-testimonial-item {
	padding: 0.5rem;
}
.sp-testimonial-free {
	padding: 2rem;
    background-color: rgba(255, 255, 255, 0.1);
	border-radius: 1rem;
}
.sp-testimonial-client-image {
	position: relative;
	float: left;
	width: 3rem;
	height: 3rem;
	margin-right: 1rem;
	background-color: rgba(255,255,255,0.5);
	border-radius: 1.5rem;
	overflow: hidden;
}
.sp-testimonial-client-image img {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	transform: translateY(-50%);
}
.sp-testimonial-post-title {
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1;
}
.sp-testimonial-client-designation {
	margin-top: 0.5rem;
}
.sp-testimonial-client-testimonial {
	margin-top: 1.5rem;
	font-size: 1.2rem;
}

/* ACCORDION */
.accordion-feature {
	position: relative;
	width: 100%;
	height: 40rem;
	padding-top: 4rem;
	background-color: #fff;
}
.accordion-feature > div {
	position: absolute;
	top: 4rem;
	left: 0;
	bottom: 0;
	padding: 2rem;
	width: 10%;
	border-right: 1px solid #ccc;
	overflow: hidden;
	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	-ms-transition: all 0.25s ease;
	transition: all 0.25s ease;
}
.accordion-feature > div h3 {
	display: none;
	margin-bottom: 1rem;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.2;
	width: 100%;
}
.accordion-feature > div p {
	display: none;
}
.accordion-feature > div:nth-child(1) {
	left: 0;
}
.accordion-feature > div:nth-child(2) {
	left: 10%;
}
.accordion-feature > div:nth-child(3) {
	left: 20%;
}
.accordion-feature > div:nth-child(4) {
	left: 30%;
}
.accordion-feature > div:nth-child(5) {
	left: 40%;
	border-right: 0;
}
.accordion-feature > div.active {
	width: 60%;
}
.accordion-feature > div.active h3,
.accordion-feature > div.active p {
	display: block;
}

.accordion-feature.active-1 > div:nth-child(2) { left: 60%; }
.accordion-feature.active-1 > div:nth-child(3) { left: 70%; }
.accordion-feature.active-1 > div:nth-child(4) { left: 80%; }
.accordion-feature.active-1 > div:nth-child(5) { left: 90%; }

.accordion-feature.active-2 > div:nth-child(1) { left: 0; }
.accordion-feature.active-2 > div:nth-child(3) { left: 70%; }
.accordion-feature.active-2 > div:nth-child(4) { left: 80%; }
.accordion-feature.active-2 > div:nth-child(5) { left: 90%; }

.accordion-feature.active-3 > div:nth-child(1) { left: 0; }
.accordion-feature.active-3 > div:nth-child(2) { left: 10%; }
.accordion-feature.active-3 > div:nth-child(4) { left: 80%; }
.accordion-feature.active-3 > div:nth-child(5) { left: 90%; }

.accordion-feature.active-4 > div:nth-child(1) { left: 0; }
.accordion-feature.active-4 > div:nth-child(2) { left: 10%; }
.accordion-feature.active-4 > div:nth-child(3) { left: 20%; }
.accordion-feature.active-4 > div:nth-child(5) { left: 90%; }

.accordion-feature.active-5 > div:nth-child(1) { left: 0; }
.accordion-feature.active-5 > div:nth-child(2) { left: 10%; }
.accordion-feature.active-5 > div:nth-child(3) { left: 20%; }
.accordion-feature.active-5 > div:nth-child(4) { left: 30%; }

.accordion-feature > div .panel-no {
	position: absolute;
	top: 1rem;
	left: 2rem;
	width: 4rem;
	height: 4rem;
	background-color: #333;
	border-radius: 2rem;
	color: #fff;
	line-height: 1;
	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	-ms-transition: all 0.25s ease;
	transition: all 0.25s ease;
}
.accordion-feature > div .panel-no span {
	position: absolute;
	top: calc(50% - 2px);
	left: 50%;
	transform: translate(-50%,-50%);
	font-weight: 600;
	font-size: 2rem;
	color: #fff;
}
.accordion-feature > div.active .panel-no {
	background-color: #32CD32;
}
.accordion-feature > div .panel-thumbnail {
	position: absolute;
	top: 5rem;
	left: 0;
	bottom: 0;
	width: 142px;
	overflow: hidden;
	clip-path: polygon(
		0 0,
		100% 2rem,
		100% 100%,
		0 100%
	);
}
.accordion-feature > div .panel-thumbnail img {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	height: 558px;
	filter: grayscale(100%);
	object-fit: cover;
	opacity: 0.5;
	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	-ms-transition: all 0.25s ease;
	transition: all 0.25s ease;
}
.accordion-feature > div:hover .panel-thumbnail img {
	filter: grayscale(0%);
	opacity: 1;
}
.accordion-feature > div.active .panel-thumbnail img {
	opacity: 0;
}
.accordion-content {
	margin-left: 5rem;
}
.accordion-content p {
	margin-bottom: 1rem;
}
.accordion-content img {
	background: #ccc;
	width: 100%;
}
.accordion-feature-controller {
	display: none;
}
@media screen and (max-width:1500px) {
	.accordion-feature {
		height: 48vw;
		padding-top: 4.8vw;
	}
	.accordion-feature > div {
		top: 4.8vw;
		padding: 2.4vw;
		width: 9.467vw;
	}
	.accordion-feature > div h3 {
		margin-bottom: 1.2vw;
		font-size: 1.4rem;
	}
	.accordion-feature > div:nth-child(2) {
		left: 9.467vw;
	}
	.accordion-feature > div:nth-child(3) {
		left: 19vw;
	}
	.accordion-feature > div:nth-child(4) {
		left: 28.533vw;
	}
	.accordion-feature > div:nth-child(5) {
		left: 38.067vw;
	}
	.accordion-feature > div.active {
		width: 57.067vw;
	}

	.accordion-feature.active-1 > div:nth-child(2) { left: 57.067vw; }
	.accordion-feature.active-1 > div:nth-child(3) { left: 66.6vw; }
	.accordion-feature.active-1 > div:nth-child(4) { left: 76.133vw; }
	.accordion-feature.active-1 > div:nth-child(5) { left: 85.667vw; }

	.accordion-feature.active-2 > div:nth-child(3) { left: 66.6vw; }
	.accordion-feature.active-2 > div:nth-child(4) { left: 76.133vw; }
	.accordion-feature.active-2 > div:nth-child(5) { left: 85.667vw; }

	.accordion-feature.active-3 > div:nth-child(2) { left: 9.467vw; }
	.accordion-feature.active-3 > div:nth-child(4) { left: 76.133vw; }
	.accordion-feature.active-3 > div:nth-child(5) { left: 85.667vw; }

	.accordion-feature.active-4 > div:nth-child(2) { left: 9.467vw; }
	.accordion-feature.active-4 > div:nth-child(3) { left: 19vw; }
	.accordion-feature.active-4 > div:nth-child(5) { left: 85.667vw; }

	.accordion-feature.active-5 > div:nth-child(2) { left: 9.467vw; }
	.accordion-feature.active-5 > div:nth-child(3) { left: 19vw; }
	.accordion-feature.active-5 > div:nth-child(4) { left: 28.533vw; }

	.accordion-feature > div .panel-no {
		top: 1.2vw;
		left: 2.4vw;
		width: 4.8vw;
		height: 4.8vw;
		border-radius: 2.4vw;
	}
	.accordion-feature > div .panel-no span {
		top: calc(50% - 2px);
		left: 50%;
		font-size: 2.4vw;
	}
	.accordion-feature > div .panel-text {
		top: 6vw;
		height: 36vw;
		font-size: 1.2vw;
	}
	.accordion-feature > div .panel-text span {
		left: -2.4vw;
		width: 21.6vw;
		height: 3.6vw;
	}
	.accordion-feature > div.active .panel-text span {
		left: -60vw;
	}
	.accordion-content {
		margin-left: 6vw;
	}
	.accordion-content p {
		margin-bottom: 1.2vw;
	}
}
@media screen and (max-width:1024px) {
	.accordion-feature {
		height: 80vw;
	}
	.accordion-feature-controller {
		display: block;
		position: relative;
		z-index: 10;
		margin: 2rem 0 -2rem;
	}
	.accordion-feature-controller::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 10%;
		right: 10%;
		margin-top: -2px;
		height: 4px;
		background-color: #333;
	}
	.accordion-feature-controller::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 10%;
		width: 20%;
		margin-top: -2px;
		height: 4px;
		background-color: #32CD32;
		-webkit-transition: all 0.25s ease;
		-moz-transition: all 0.25s ease;
		-o-transition: all 0.25s ease;
		-ms-transition: all 0.25s ease;
		transition: all 0.25s ease;
	}
	.accordion-feature-controller.active-1::after {
		left: 10%;
		width: 20%;
	}
	.accordion-feature-controller.active-2::after {
		left: 10%;
		width: 40%;
	}
	.accordion-feature-controller.active-3::after {
		left: 30%;
		width: 40%;
	}
	.accordion-feature-controller.active-4::after {
		left: 50%;
		width: 40%;
	}
	.accordion-feature-controller.active-5::after {
		left: 70%;
		width: 20%;
	}
	.accordion-feature-controller ul {
		position: relative;
		z-index: 10;
		overflow: hidden;
	}
	.accordion-feature-controller ul li {
		float: left;
		width: 20%;
	}
	.accordion-feature-controller ul li button {
		display: block;
		margin: 0 auto;
		position: relative;
		width: 4rem;
		height: 4rem;
		background-color: #333;
		border: 0;
		border-radius: 50%;
		font-size: 1.6rem;
		color: #fff;
		line-height: 1;
	}
	.accordion-feature-controller ul li button.active {
		background-color: #32CD32;
	}
	.accordion-feature-controller ul li button span {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.accordion-feature {
		padding-top: 0;
	}
	.accordion-feature > div {
		left: 0 !important;
		border-right: 0;
		width: 0;
	}
	.accordion-feature .panel-no {
		display: none;
	}
	.accordion-feature > div .panel-thumbnail {
		display: none;
	}
	.accordion-feature > div.active {
		width: 100%;
	}
	.accordion-content {
		margin-left: 0;
	}
}
@media screen and (max-width:768px) {
	.accordion-feature {
		height: 100vw;
	}
}
@media screen and (max-width:425px) {
	.accordion-feature-controller {
		margin-bottom: -1rem;
	}
	.accordion-feature-controller ul li button {
		transform: scale(0.8);
	}
}

/* PRODUCT TOUR */
.btn-product-tour {
	transform: scale(1.5) !important;
}
#product-tour .modal-content {
	position: absolute;
	top: 126px;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0;
}
.product-tour-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
}
.product-tour-wrapper > div {
	position: absolute;
	top: 0;
	bottom: 0;
}
.product-tour-steps {
	left: 0;
	width: 420px;
	border-right: 1px solid #ccc;
	z-index: 2;
}
.product-tour-steps ul li a {
	position: relative;
	display: block;
	padding: 1rem 2rem;
}
.product-tour-steps ul li a.active {
	background-color: #32CD32;
	color: #fff;
	font-weight: 600;
}
.product-tour-steps ul li a.active::before {
	content: '';
	position: absolute;
	top: 0;
	right: -31px;
	width: 0px;
    height: 0px;
    border-top: 31px solid transparent;
    border-bottom: 31px solid transparent;
    border-left: 31px solid #32CD32;
}
.product-tour-stage {
	right: 0;
	width: calc(100% - 420px);
}
.product-tour-stage > div {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 2rem 2rem 2rem 4rem;
	background: #fff;
	overflow-y: auto;
}
.product-tour-stage > div.active {
	display: block;
}

/* INTEGRATIONS */
#integrations .modal-content {
	position: absolute;
	top: 126px;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0;
	overflow-y: auto;
}
.integration-item {
	overflow: hidden;
}
.integration-item > div {
	float: left;
}
.integration-item-image {
	width: 30%;
	min-height: 10rem;
}
.integration-item-content {
	width: 70%;
	padding: 2rem;
}
.integration-item.content-right .integration-item-image {
	float: right;
}
.integration-item.content-right .integration-item-content {
	text-align: right;
}

/* API LIST */
.kamion-api-list li {
	position: relative;
	margin-top: -1px;
	padding: 1rem 15rem 1rem 1rem;
	border: 1px solid #ccc;
	line-height: 1;
	overflow: hidden;
}
.kamion-api-list li:nth-child(odd) {
	background-color: #f7f7f7;
}
.kamion-api-list li a {
	position: absolute;
	top: 50%;
	right: 1rem;
	transform: translateY(-50%);
	display: block;
	padding: 0.25rem 0.75rem;
	font-size: 0.8rem;
	border: 1px solid #ccc;
	border-radius: 0.25rem;
	line-height: 1.6;
	background-color: #32CD3233;
}
.kamion-api-list li a svg {
	display: block;
	float: left;
	margin-right: 0.5rem;
	width: 1rem;
}
.kamion-api-list li small {
	display: block;
	margin-top: 0.5rem;
}
@media screen and (max-width:1024px) {
	.kamion-api-list li {
		position: relative;
		margin-top: -1px;
		padding: 1rem 15rem 1rem 1rem;
		border: 1px solid #ccc;
		line-height: 1;
		overflow: hidden;
	}
	.kamion-api-list li a {
		clear: both;
		float: left;
		margin: 1rem 0 0;
		padding: 0.25rem 0.75rem 0.1rem;
	}
	.kamion-api-list li a svg {
		margin-top: -0.2rem;
		width: 0.75rem;
	}
}

/* CAPTCHA */
.g-recaptcha > div {
	margin: 0 auto;
}