/*
* === THEME COLORS ===
*/
:root {
	--primary: #43a73b;
	--primary-lighten-90: #edf7ec;
	--primary-lighten-80: #daeed8;
	--primary-lighten-70: #c7e5c5;
	--primary-lighten-60: #b4dcb1;
	--primary-lighten-50: #a1d39d;
	--primary-lighten-40: #8fcb8a;
	--primary-lighten-30: #7cc276;
	--primary-lighten-20: #69b963;
	--primary-lighten-10: #56b04f;
	--primary-darken-10: #3d9736;
	--primary-darken-20: #368630;
	--primary-darken-30: #2f752a;
	--primary-darken-40: #296524;
	--primary-darken-50: #22541e;
	--primary-darken-60: #1b4318;
	--primary-darken-70: #153312;
	--primary-darken-80: #0e220c;
	--primary-darken-90: #071106;
	--primary-opacity-10: rgba(67,167,59,.1);
	--primary-opacity-20: rgba(67,167,59,.2);
	--primary-opacity-30: rgba(67,167,59,.3);
	--primary-opacity-40: rgba(67,167,59,.4);
	--primary-opacity-50: rgba(67,167,59,.5);
	--primary-opacity-60: rgba(67,167,59,.6);
	--primary-opacity-70: rgba(67,167,59,.7);
	--primary-opacity-80: rgba(67,167,59,.8);
	--primary-opacity-90: rgba(67,167,59,.9);
	--secondary: #43a73b;
	--secondary-lighten-90: #edf7ec;
	--secondary-lighten-80: #daeed8;
	--secondary-lighten-70: #c7e5c5;
	--secondary-lighten-60: #b4dcb1;
	--secondary-lighten-50: #a1d39d;
	--secondary-lighten-40: #8fcb8a;
	--secondary-lighten-30: #7cc276;
	--secondary-lighten-20: #69b963;
	--secondary-lighten-10: #56b04f;
	--secondary-darken-10: #3d9736;
	--secondary-darken-20: #368630;
	--secondary-darken-30: #2f752a;
	--secondary-darken-40: #296524;
	--secondary-darken-50: #22541e;
	--secondary-darken-60: #1b4318;
	--secondary-darken-70: #153312;
	--secondary-darken-80: #0e220c;
	--secondary-darken-90: #071106;
	--grey: #7e7e7e;
	--grey-lighten-99: #fefefe;
	--grey-lighten-90: #f3f3f3;
	--grey-lighten-80: #e6e6e6;
	--grey-lighten-70: #d9d9d9;
	--grey-lighten-60: #cccccc;
	--grey-lighten-50: #bfbfbf;
	--grey-lighten-40: #b2b2b2;
	--grey-lighten-30: #a5a5a5;
	--grey-lighten-20: #989898;
	--grey-lighten-10: #8b8b8b;
	--grey-darken-10: #727272;
	--grey-darken-20: #656565;
	--grey-darken-30: #595959;
	--grey-darken-40: #4c4c4c;
	--grey-darken-50: #3f3f3f;
	--grey-darken-60: #333333;
	--grey-darken-70: #262626;
	--grey-darken-80: #1a1a1a;
	--grey-darken-90: #0d0d0d;
	--grey-darken-99: #020202;
	--warm-grey: #857f72;
	--warm-grey-lighten-99: #fefefe;
	--warm-grey-lighten-90: #f3f3f1;
	--warm-grey-lighten-80: #e7e6e3;
	--warm-grey-lighten-70: #dbd9d5;
	--warm-grey-lighten-60: #cfccc7;
	--warm-grey-lighten-50: #c2bfb9;
	--warm-grey-lighten-40: #b6b3ab;
	--warm-grey-lighten-30: #aaa69d;
	--warm-grey-lighten-20: #9e998f;
	--warm-grey-lighten-10: #928c81;
	--warm-grey-darken-10: #787367;
	--warm-grey-darken-20: #6b665c;
	--warm-grey-darken-30: #5e5950;
	--warm-grey-darken-40: #504d45;
	--warm-grey-darken-50: #434039;
	--warm-grey-darken-60: #36332e;
	--warm-grey-darken-70: #282723;
	--warm-grey-darken-80: #1b1a17;
	--warm-grey-darken-90: #0e0d0c;
	--warm-grey-darken-99: #020202;
	--cool-grey: #616e7c;
	--cool-grey-lighten-99: #fefefe;
	--cool-grey-lighten-90: #f0f1f2;
	--cool-grey-lighten-80: #e0e2e5;
	--cool-grey-lighten-70: #d0d4d8;
	--cool-grey-lighten-60: #c0c5cb;
	--cool-grey-lighten-50: #b0b7be;
	--cool-grey-lighten-40: #a1a8b1;
	--cool-grey-lighten-30: #919aa4;
	--cool-grey-lighten-20: #818b97;
	--cool-grey-lighten-10: #717d8a;
	--cool-grey-darken-10: #586370;
	--cool-grey-darken-20: #4e5864;
	--cool-grey-darken-30: #444d57;
	--cool-grey-darken-40: #3b424b;
	--cool-grey-darken-50: #31373e;
	--cool-grey-darken-60: #272c32;
	--cool-grey-darken-70: #1e2126;
	--cool-grey-darken-80: #141619;
	--cool-grey-darken-90: #0a0b0d;
	--cool-grey-darken-99: #010202;
	--blue-grey: #627d98;
	--blue-grey-lighten-99: #fefefe;
	--blue-grey-lighten-90: #f0f2f5;
	--blue-grey-lighten-80: #e0e5eb;
	--blue-grey-lighten-70: #d0d8e1;
	--blue-grey-lighten-60: #c1cbd6;
	--blue-grey-lighten-50: #b1becc;
	--blue-grey-lighten-40: #a1b1c2;
	--blue-grey-lighten-30: #92a4b7;
	--blue-grey-lighten-20: #8297ad;
	--blue-grey-lighten-10: #728aa3;
	--blue-grey-darken-10: #597189;
	--blue-grey-darken-20: #4f647a;
	--blue-grey-darken-30: #45586b;
	--blue-grey-darken-40: #3b4b5c;
	--blue-grey-darken-50: #313f4c;
	--blue-grey-darken-60: #28323d;
	--blue-grey-darken-70: #1e262e;
	--blue-grey-darken-80: #14191f;
	--blue-grey-darken-90: #0a0d10;
	--blue-grey-darken-99: #010202;

}
/*
* === FLUID FONTS ===
*/
:root {
	--fluid-min-width: 480;
	--fluid-max-width: 1120;
	--fluid-min-size: 14;
	--fluid-max-size: 16;
	--fluid-min-ratio: 1.25;
	--fluid-max-ratio: 1.20;
	--fluid-screen: 100vw;
	--fluid-bp: calc((var(--fluid-screen) - ((var(--fluid-min-width) / 16) * 1rem)) / ((var(--fluid-max-width) / 16) - (var(--fluid-min-width) / 16)));
}
@media screen and (max-width: 480px) {
	:root {
		--fluid-screen: calc(var(--fluid-min-width) * 1px);
	}
}
@media screen and (min-width: 1120px) {
	:root {
		--fluid-screen: calc(var(--fluid-max-width) * 1px);
	}
}
:root {
	--fluid-max-negative: (1 / var(--fluid-max-ratio) / var(--fluid-max-ratio));
	--fluid-min-negative: (1 / var(--fluid-min-ratio) / var(--fluid-min-ratio));

	--fluid-min-scale--1: var(--fluid-min-ratio) * var(--fluid-min-negative);
	--fluid-max-scale--1: var(--fluid-max-ratio) * var(--fluid-max-negative);
	--fluid-min-size--1: (var(--fluid-min-size) * var(--fluid-min-scale--1)) / 16;
	--fluid-max-size--1: (var(--fluid-max-size) * var(--fluid-max-scale--1)) / 16;
	--step--1: calc(((var(--fluid-min-size--1) * 1rem) + (var(--fluid-max-size--1) - var(--fluid-min-size--1)) * var(--fluid-bp)));

	--fluid-min-scale-0: var(--fluid-min-ratio);
	--fluid-max-scale-0: var(--fluid-max-ratio);
	--fluid-min-size-0: (var(--fluid-min-size)) / 16;
	--fluid-max-size-0: (var(--fluid-max-size)) / 16;
	--step-0: calc(((var(--fluid-min-size-0) * 1rem) + (var(--fluid-max-size-0) - var(--fluid-min-size-0)) * var(--fluid-bp)));

	--fluid-min-scale-1: var(--fluid-min-scale-0) * var(--fluid-min-ratio);
	--fluid-max-scale-1: var(--fluid-max-scale-0) * var(--fluid-max-ratio);
	--fluid-min-size-1: (var(--fluid-min-size) * var(--fluid-min-scale-0)) / 16;
	--fluid-max-size-1: (var(--fluid-max-size) * var(--fluid-max-scale-0)) / 16;
	--step-1: calc(((var(--fluid-min-size-1) * 1rem) + (var(--fluid-max-size-1) - var(--fluid-min-size-1)) * var(--fluid-bp)));

	--fluid-min-scale-2: var(--fluid-min-scale-1) * var(--fluid-min-ratio);
	--fluid-max-scale-2: var(--fluid-max-scale-1) * var(--fluid-max-ratio);
	--fluid-min-size-2: (var(--fluid-min-size) * var(--fluid-min-scale-1)) / 16;
	--fluid-max-size-2: (var(--fluid-max-size) * var(--fluid-max-scale-1)) / 16;
	--step-2: calc(((var(--fluid-min-size-2) * 1rem) + (var(--fluid-max-size-2) - var(--fluid-min-size-2)) * var(--fluid-bp)));

	--fluid-min-scale-3: var(--fluid-min-scale-2) * var(--fluid-min-ratio);
	--fluid-max-scale-3: var(--fluid-max-scale-2) * var(--fluid-max-ratio);
	--fluid-min-size-3: (var(--fluid-min-size) * var(--fluid-min-scale-2)) / 16;
	--fluid-max-size-3: (var(--fluid-max-size) * var(--fluid-max-scale-2)) / 16;
	--step-3: calc(((var(--fluid-min-size-3) * 1rem) + (var(--fluid-max-size-3) - var(--fluid-min-size-3)) * var(--fluid-bp)));

	--fluid-min-scale-4: var(--fluid-min-scale-3) * var(--fluid-min-ratio);
	--fluid-max-scale-4: var(--fluid-max-scale-3) * var(--fluid-max-ratio);
	--fluid-min-size-4: (var(--fluid-min-size) * var(--fluid-min-scale-3)) / 16;
	--fluid-max-size-4: (var(--fluid-max-size) * var(--fluid-max-scale-3)) / 16;
	--step-4: calc(((var(--fluid-min-size-4) * 1rem) + (var(--fluid-max-size-4) - var(--fluid-min-size-4)) * var(--fluid-bp)));

	--fluid-min-scale-5: var(--fluid-min-scale-4) * var(--fluid-min-ratio);
	--fluid-max-scale-5: var(--fluid-max-scale-4) * var(--fluid-max-ratio);
	--fluid-min-size-5: (var(--fluid-min-size) * var(--fluid-min-scale-4)) / 16;
	--fluid-max-size-5: (var(--fluid-max-size) * var(--fluid-max-scale-4)) / 16;
	--step-5: calc(((var(--fluid-min-size-5) * 1rem) + (var(--fluid-max-size-5) - var(--fluid-min-size-5)) * var(--fluid-bp)));
}
/*
* === FLUID SIZES ===
*/
:root {
	--rem-val: 16;
}
/* Group 0: 480px - 1120px */
:root {
	--section-vertical-padding: 30px;
	--button-padding-vertical: 5px;
	--button-padding-horizontal: 12px;
	--input-padding-vertical: 6px;
	--input-padding-horizontal: 6px;
	--big-section-vertical-padding: 60px;
}
@media screen and (min-width: 480px) {
	:root {
		--section-vertical-padding: calc(30px + ((100vw - 480px) / (1120 - 480)) * (90 - 30) );
		--button-padding-vertical: calc(5px + ((100vw - 480px) / (1120 - 480)) * (8 - 5) );
		--button-padding-horizontal: calc(12px + ((100vw - 480px) / (1120 - 480)) * (20 - 12) );
		--input-padding-vertical: calc(6px + ((100vw - 480px) / (1120 - 480)) * (9 - 6) );
		--input-padding-horizontal: calc(6px + ((100vw - 480px) / (1120 - 480)) * (14 - 6) );
		--big-section-vertical-padding: calc(60px + ((100vw - 480px) / (1120 - 480)) * (200 - 60) );
	}
}
@media screen and (min-width: 1120px) {
	:root {
		--section-vertical-padding: 90px;
		--button-padding-vertical: 8px;
		--button-padding-horizontal: 20px;
		--input-padding-vertical: 9px;
		--input-padding-horizontal: 14px;
		--big-section-vertical-padding: 200px;
	}
}
/* Group 1: 1px - 1px */
:root {
	--border-radius-container: 8px;
	--border-radius-button: 50px;
}
@media screen and (min-width: 1px) {
	:root {
		--border-radius-container: calc(8px + ((100vw - 1px) / (1 - 1)) * (8 - 8) );
		--border-radius-button: calc(50px + ((100vw - 1px) / (1 - 1)) * (50 - 50) );
	}
}
@media screen and (min-width: 1px) {
	:root {
		--border-radius-container: 8px;
		--border-radius-button: 50px;
	}
}
/*
* === VAR MAPS ===
*/
body {
	font-size: var(--step-0);
	line-height: 1.65;
	color: var(--grey-darken-40);
}
h1 {
	font-size: var(--step-5);
	line-height: 1.35;
	color: var(--grey-darken-40);
}
h2 {
	font-size: var(--step-4);
	line-height: 1.4;
	color: var(--grey-darken-40);
}
h3 {
	font-size: var(--step-3);
	line-height: 1.4;
	color: var(--grey-darken-40);
}
h4 {
	font-size: var(--step-2);
	line-height: 1.4;
	color: var(--grey-darken-40);
}
h5 {
	font-size: var(--step-1);
	line-height: 1.4;
	color: var(--grey-darken-40);
}
.small-text {
	font-size: var(--step--1);
	line-height: 1.35;
	color: var(--grey-darken-40);
}
.ct-section .ct-section-inner-wrap {
	padding-top: var(--section-vertical-padding);
	padding-bottom: var(--section-vertical-padding);
}
.oc-button {
	border-radius: var(--border-radius-button);
	box-shadow: 0 0 6px 0 var(--grey-lighten-70);
	font-size: var(--step--1);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 500;
	white-space: normal;
	transition-duration: 0.3s;
	transition-timing-function: ease;
	padding-top: var(--button-padding-vertical);
	padding-bottom: var(--button-padding-vertical);
	padding-right: var(--button-padding-horizontal);
	padding-left: var(--button-padding-horizontal);
	line-height: 1.65;
}
.button-secondary {
	background-color: transparent;
	color: white;
	border: 1px solid white;
	box-shadow: none;
}
.button-secondary:hover {
	background-color: white;
	color: var(--grey-darken-50);
}
.button-secondary-alt {
	background-color: white;
	color: var(--primary);
	border: 1px solid white;
	box-shadow: none;
}
.button-secondary-alt:hover {
	background-color: var(--primary);
	color: white;
	border: 1px solid var(--primary);
}
.button-primary {
	background-color: transparent;
	color: var(--primary);
	border: 1px solid var(--primary);
}
.button-primary:hover {
	background-color: var(--primary);
	color: white;
}
.button-primary-alt {
	background-color: var(--primary);
	color: var(--grey-lighten-99);
	border: 1px solid var(--primary);
}
.button-primary-alt:hover {
	background-color: var(--primary-darken-20);
}
.shadow-1 {
	box-shadow: 0 4px 8px var(--grey-lighten-60);
}
.shadow-2 {
	box-shadow: 0 4px 16px var(--grey-lighten-40);
}
.shadow-3 {
	box-shadow: 0 6px 24px var(--grey-lighten-30);
}
.oc-link:hover {
	text-decoration: underline;
}
.oc-link {
	color: var(--secondary);
	text-decoration: none;
}
.ct-text-block a:hover {
	text-decoration: underline;
}
.ct-text-block a {
	color: var(--secondary);
	text-decoration: none;
}
.page-title {
	margin-bottom: 24px;
	color: var(--primary);
}
.sidebar-box {
	border-radius: var(--border-radius-container);
	box-shadow: 0 4px 8px rgba(0,0,0,0.15);
	padding: 16px;
	margin-bottom: 32px;
	width: 100%;
}
.sidebar {
	width: 100%;
}
.upper-title {
	font-size: var(--step-0);
	text-transform: uppercase;
	letter-spacing: 0.7px;
	font-weight: 600;
	margin-bottom: 12px;
	color: var(--grey-darken-20);
}
.ct-code-block {
	width: 100%;
}
.oxy-pro-menu-list .menu-item a {
	border-radius: var(--border-radius-container);
}
