:root {
  --itl-blue: #55a5cc;
  --itl-dark-blue: #0097df;
  --itl-light-blue: #a9d2e6;
  --itl-slate: #2f383d;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: Open Sans,Arial,sans-serif;
	font-weight: 500;
	}

body {
	background: #f5f5f5;
}

h1 {
	font-size: 40px;
	padding-bottom: 24px;
	color: #222;
}

h2 {
	font-size: 32px;
	padding-bottom: 16px;
	color: #333;
}

h3 {
	font-size: 24px;
	padding-bottom: 12px;
	color: #444;
}

h4 {
	font-size: 16px;
	padding-bottom: 12px;
	color: #555;
}

.row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
}

.true-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
}

.menu-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
}

.column {
	display: flex;
	flex-direction: column;
	flex-basis: 100%;
	flex: 1;
}

.itl-error {
	color: #e00;
	padding: 15px;
}

.itl-main-container {
	padding-top: 154px;
}

.menu {
	margin-top: 10px;
}

.menu a {
	margin-left: 0;
	margin-right: 15px;
}

.top-menu {
	margin-top: 4px;
}

.top-menu a {
	color: #fff;
	text-decoration: none;
	margin-left: 30px;
	font-weight: bold;
}

.top-bar {
	width: 100%;
	background: #333;
	color: white;
	padding: 8px 0px 10px 0px;
	z-index: 1000;
	position: fixed;
  	top: 0px;
}

.top-bar .container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.top-bar-contact {
	display: inline;
	text-align: left;
	padding-right: 20px;
}

.nav-bar {
	width: 100%;
	border-bottom: 1px solid #ddd;
	background: #fff;
	color: white;
	padding: 15px 0;
	z-index: 1000;
	position: fixed;
	top: 46px;
}

.nav-bar .container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.nav-menu {
	width: 100%;
}

.nav-menu a {
	color: #666;
	margin-right: 25px;
	font-weight: bold;
	padding: 0px;
	position: relative;
	text-decoration: none;
	display: inline-block;
	padding-bottom: 5px;
}

.nav-menu a::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background-color: var(--itl-blue);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.nav-menu a:hover::before {
	transform: scaleX(1);
}

.nav-menu-col {
	flex: 1;
	justify-content: center;
	text-align: right;
}

.header-logo {
	text-align: left;
}

.header-logo img {
	width: 150px;
	cursor: pointer;
}

.hamburger-menu-col {
	flex: 0;
	justify-content: center;
	text-align: right;
	align-items: end;
}

.hamburger-menu {
	display: none;
	align-items: center;
	justify-content: flex-end;
}

.hamburger-menu div {
	cursor: pointer;
	width: 24px;
	margin-right: 8px;
}

.home-page-notice {
	max-width: 1280px;
	margin: 0 auto;
	padding: 20px;
	color: #ff3000;
	font-weight: bold;
	text-align: center;
}

.itl-shrink-container {
	padding-top: 108px !important;
}

.itl-shrink-nav {
	height: 30px;
}

.itl-shrink-logo {
	width: 100px !important;
}

.container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 20px;
}

.itl_page_element {
	padding: 20px;
	height: 100%;
}

.product-row {
	background: white;
	padding: 20px;
	margin-bottom: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.product-title {
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 10px;
}

.product-description {
	color: #555;
}

.email_link {
	color: #ffffff;
	text-decoration: none;
	font-weight: bold;
}

.mini-login-button {
	background-color: var(--itl-dark-blue);
	border-radius: 6px;
	border: 2px solid black;
	border-width: 0;
	color: #fff;
	cursor: pointer;
	text-align: center;
	padding: 8px 10px 10px 14px;
	display: inline;
	margin-left: 30px;
}

.mini-login-button input {
	appearance: button;
	border-width: 0;
	background-color: var(--itl-dark-blue);
	cursor: pointer;
	color: #fff;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
	padding-right: 6px;
}

.login-button {
	appearance: button;
	background-color: #fff;
	border-radius: 4px;
	border: 2px solid var(--itl-blue);
	color: var(--itl-blue);
	cursor: pointer;
	font-size: 24px;
	line-height: 1.15;
	text-align: center;
	padding: 8px 32px !important;
}

.login-button:hover {
	background-color: rgba(85, 165, 204, 0.1);
}

.product_features_link {
	color: #ffffff;
	text-decoration: none;
}

.itl-link-button {
	color: var(--itl-blue);
	font-size: 24px;
	cursor: pointer;
	display: inline-block;
	text-decoration: none;
	font-weight: 500;
	padding: 12px 16px;
	background-color: transparent;
	border: 2px solid;
	border-radius: 3px;
	transition: background-color 0.3s ease;
	background-color: transparent;
	width: 100%;
	max-width: 250px;
}

.itl-link-button::after {
	content: " >";
	opacity: 0;
	margin-left: 0;
	transition: opacity 0.3s ease, margin-left 0.3s ease;
}

.itl-link-button:hover {
	background-color: rgba(0,0,0,0.065);
}

.itl-link-button:hover::after {
	opacity: 1;
	margin-left: 5px;
}

.on-dark {
	color: #fff !important;
}

.on-dark:hover {
	background-color: rgba(255,255,255,0.065) !important;
}

.itl_current_page {
	color: #2ea3f2 !important;
}

.icon {
	vertical-align: middle;
	stroke-width: 2;
}

.icon-wrapper {
	display: flex;
	gap: 1rem;
	align-items: center;
	padding: 1rem;
}

.itl-header-and-text {
	line-height: 32px;
}

.itl-padding {
	text-align: left;
	padding: 20px;
}

.itl-text {
	padding: 20px;
	text-align: justify;
	line-height: 1.7em;
	color: #666;
}

.itl-text div {
	padding-top: 10px;
}

.itl-text span {
	color:#666;
	font-weight: bold;
	padding-right: 16px;
}

.itl-text a {
	color:var(--itl-blue);
	text-decoration: none;
}

.itl-testimonial {
	color: #fff;
	background: var(--itl-blue);
	padding: 32px;
	font-size: 14px;
	height: 100%;
}

.itl-left-pad {
	padding-left: 20px;
	padding-top: 12px;
}

.itl-header {
	text-align: center;
	color: #fff;
	background-color: var(--itl-blue);
	padding: 100px 64px 32px 64px;
	height: 100%;
}

.itl-pricing-card {
	background-color: #fff;
	cursor: pointer;
	padding: 20px;
	margin: 8px;
	transform: scale(1);
	transform-origin: center;
	transition: transform 0.3s ease;
}

.itl-pricing-card:hover {
	transform: scale(1.01);
}

.itl-pricing-header {
	text-align: center;
	color: #fff;
	background-color: var(--itl-blue);
	padding: 32px;
	width: 100%;
}

.itl-pricing-header h2 {
	color: #fff;
}

.itl-price-box {
	text-align: center;
	color: #666;
	width: 100%;
}

.itl-price-box-ex-vat {
	font-size: 26px;
}

.itl-price-box span {
	color: var(--itl-blue);
	font-size: 96px;
	display: inline;
}

.itl-tray-icon {
	color: var(--itl-blue);
	background: #fff;
	width: 144px;
	border-radius: 72px;
	border: 3px solid var(--itl-blue);
	height: 144px;
	padding-top: 20px;
	margin: auto;
}

.itl-faq {
	background-color: #fff;
	padding: 16px;
	border: 1px solid #ddd;
	margin-bottom: 32px;
}

.itl-faq div {
	padding-bottom: 16px;
	font-weight: bold;
	color: #444;
}

.itl-faq span {
	color: #666;
}

.itl-faq a {
	color:var(--itl-blue);
	text-decoration: none;
}

.itl-privacy-policy {
	background-color: #fff !important;
	padding: 64px 200px;
}

.itl-privacy-policy a {
	color:var(--itl-blue);
	text-decoration: none;
}

.itl-privacy-policy h1 {
	color:#333;
	text-align: center;
}

.itl-privacy-policy h2 {
	color: #444;
	padding-bottom: 8px;
	text-align: left;
	font-size: 24px;
	font-weight: bold;
	padding-top: 32px;
}

.itl-privacy-policy p {
	color: #666;
	padding-bottom: 16px;
	text-align: left;
	padding-top: 16px;
}

.itl-privacy-policy ul {
	color: #666;
	padding-bottom: 16px;
	text-align: left;
	padding-top: 16px;
}

.itl-privacy-policy ul li {
	padding-bottom: 16px;
	padding-left: 8px;
	margin-left: 32px;
}

.itl-privacy-policy span {
	font-size: 11px;
	float: right;
	color: #777;
	font-style: italic;
}

.itl-login {
	background-color: #fff !important;
	color: #666;
	padding: 32px;
	border-radius: 10px;
}

.itl-login div {
	padding: 16px;
}

.itl-login-input {
	padding: 12px;
	border-radius: 4px;
	border: 1px solid #666;
	width: 333px;
}

.itl-demo-request {
	background-color: #fff !important;
	color: #666;
	padding: 32px;
	text-align: left;
}

.itl-demo-request span {
	padding-top: 16px;
}

.itl-online-quotation {
	background-color: #fff !important;
	color: #666;
	padding: 32px;
	text-align: left;
}

.itl-online-quotation span {
	padding-top: 16px;
}

.itl-online-quotation a {
	color:var(--itl-blue);
	text-decoration: none;
}

.itl-sales-person {
	font-size: 12px;
	padding-top: 0px !important;
}

.itl-ga-form {
	margin: 12px;
	padding: 12px;
	background-color: var(--itl-light-blue);
	border: 1px solid black;
	border-radius: 8px;
	text-align: center;
}

.ga-card {
	margin: auto;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 425px;
	background-color: #FFF;
	border-radius: 10px;
	padding: .75rem;
}

.ga-card-image {
	border-radius: 8px;
	overflow: hidden;
	padding-bottom: 45%;
	background-image: url('/public/img/blue_blur.webp');
	background-repeat: no-repeat;
	background-size: 150%;
	background-position: 0 5%;
	position: relative;
}

.ga-card-heading {
	position: absolute;
	left: 10%;
	top: 15%;
	right: 10%;
	font-size: 1.75rem;
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
	small {
		display: block;
		font-size: .60em;
		font-weight: 400;
		margin-top: 1.5em;
	}
}

.ga-card-form {
	padding: 1rem 1rem 0;
}

.ga-input {
	display: flex;
	flex-direction: column-reverse;
	position: relative;
	padding-top: 1.5rem;
	&+.ga-input {
		margin-top: 1.5rem;
	}
}

.ga-input-label {
	color: #8597a3;
	position: absolute;
	top: 1.5rem;
	transition: .25s ease;
}

.ga-input-field {
	border: 0;
	z-index: 1;
	background-color: transparent;
	border-bottom: 2px solid #eee;
	font: inherit;
	font-size: 1.125rem;
	padding: .25rem 0;
	&:focus, &:valid {
		outline: 0;
		color:#444;
		border-bottom-color: var(--itl-blue);
		&+.ga-input-label {
			color: var(--itl-blue);
			transform: translateY(-1.5rem);
		}
	}
}

.ga-action {
	margin-top: 2rem;
}

.ga-action-button {
	font: inherit;
	font-size: 1.25rem;
	padding: 1em;
	width: 100%;
	font-weight: 500;
	background-color: var(--itl-blue);
	border-radius: 6px;
	color: #FFF;
	border: 0;
	transition: background-color 0.3s ease;

	&:focus {
		outline: 0;
	}

	&:hover {
		background-color: var(--itl-light-blue);
	}
}

.ga-card-info {
	padding: 1rem 1rem;
	margin-bottom: 20px;
	text-align: center;
	font-size: .875rem;
	color: #999;
	a {
		display: block;
		color: var(--itl-blue);
		text-decoration: none;
	}
}

.header-and-buttons h1 {
	color: #fff;
	padding: 32px 12px;
}

.header-and-buttons h2 {
	color: #fff;
	padding: 32px 12px;
}

.header-and-buttons div {
	line-height: 1.7em;
	color: #fff;
  	padding-bottom: 32px;
}

.header-and-buttons h1 {
	color: #fff;
	padding: 32px 12px;
}

.headers-and-buttons h2 {
	text-align: left;
	color: #fff;
	padding: 24px 0px;
	font-size: 26px;
}

.headers-and-buttons div {
	text-align: justify;
	line-height: 1.7em;
	color: #fff;
  	padding-bottom: 24px;
}

.itl-circle-progress {
	--size: 250px;
	--half-size: calc(var(--size) / 2);
	--stroke-width: 20px;
	--radius: calc((var(--size) - var(--stroke-width)) / 2);
	--circumference: calc(var(--radius) * pi * 2);
	--dash: calc((var(--progress) * var(--circumference)) / 100);
	/*animation: progress-animation 5s linear 0s 1 forwards;*/
}

.itl-circle-progress.animate {
	animation: progress-animation 5s linear forwards;
}

.itl-circle-progress circle {
	cx: var(--half-size);
	cy: var(--half-size);
	r: var(--radius);
	stroke-width: var(--stroke-width);
	fill: none;
	stroke-linecap: round;
}

.itl-circle-progress circle.bg {
	stroke: #ddd;
}

.itl-circle-progress circle.fg {
	transform: rotate(-90deg);
	transform-origin: var(--half-size) var(--half-size);
	stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
	transition: stroke-dasharray 0.3s linear 0s;
	stroke: var(--itl-dark-blue);
}

.itl-circle-progress text {
	font-size: 30px;
}

.itl-footer {
	background-color: #333;
	color: #fff;
	padding: 12px;
	font-size: 12px;
}

.itl-footer h3 {
	color: #fff;
}

.itl-footer a {
	color: #fff;
	text-decoration: none;
	padding: 10px;
	font-size: 14px;
}

.itl-copyright {
	text-align: center;
	padding-top: 32px;
	padding-bottom: 8px;
}

@property --progress {
	syntax: "<number>";
	inherits: false;
	initial-value: 0;
}

/*@media (max-width: 600px) {*/
@media only screen and (orientation : landscape) {
	.top-bar .container {
		flex-direction: row;
		align-items: flex-start;
	}
}

@media only screen and (orientation : portrait) {
	.itl-main-container {
		padding-top: 0px;
	}

	.top-bar {
	  	position: relative;
		top: 0px;
	}

	.top-bar .container {
		flex-direction: column;
		align-items: flex-start;
	}

	.top-bar-contact {
		display: block;
		text-align: center;
		padding-right: 0px;
		padding-bottom: 12px;
	}

	.top-bar-across {
		width: 100%;
	}

	.top-menu {
		text-align: center;
		width: 100%;
		padding-bottom: 4px;
	}

	.header-logo img {
		width: 100px;
		vertical-align: top;
		margin: 0;
		padding: 0;
	}

	.row {
		flex-direction: column;
	}

	.nav-bar {
	  	position: relative;
		top: 0px;
	}

	.nav-bar .container {
		padding: 0 12px;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.nav-menu-col {
		flex: 0;
	}

	.nav-menu {
		display: none;
		width: 100%;
	}

	.nav-menu a {
		display: block;
		padding: 10px;
		text-align: right;
	}

	.hamburger-menu-col {
		flex: 1;
	}

	.hamburger-menu {
		display: inline;
		padding-top: 0;
	}

	.itl-left-pad {
		text-align: center;
	}

	.column-left {
		order: 2;
	}

	.column-right {
		order: 1;
	}

	.itl-footer {
		text-align: center;
	}

	.itl-shrink-container {
		padding-top: 0px !important;
	}

	.itl-shrink-nav {
		height: 48px;
	}

	.itl-shrink-logo {
		width: 100px !important;
	}

	.itl-privacy-policy {
		background-color: #fff !important;
		padding: 64px 20px;
	}
}

@keyframes progress-animation {
	from {
		--progress: 0;
	}
	to {
		--progress: 200;
	}
}