@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Oswald&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-feature-settings: 'ss04' on;
	font-family: 'Inter', sans-serif;
	-webkit-font-smoothing: antialiased;
	background-color: #F6F8F9;
}

section {	
	padding: 4em 0;
}

section:first-child {
	padding: 0;
	min-height: 100vh;
}

section:nth-child(odd) {
	background-color: #fff;	
}

section div.content {
	margin: 0 auto;
	width: 100%;
	max-width: 1200px;
}

section div.flex {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	align-content: center;
	gap: 2em;
}

section div.halve {
	padding: 0em 1em;
	max-width: calc(50% - 1em);
}

section .center {
	text-align: center;
}

h2, h3 {
	margin-bottom: 1em;
	font-size: 3.5em;
	font-weight: 600;
	letter-spacing: -0.021em;
	line-height: 1.25;
	color: #131117;	
}

h3 {
	font-size: 1.5em;
}

p {
	margin-bottom: 1em;
	font-size: 1.4em;
    letter-spacing: -0.014em;
	vertical-align: baseline;
	line-height: 1.5;
	opacity: 0.7
}

p:last-child {
	margin-bottom: 0em;
}

a {
	text-decoration: none;
	color: darkblue;
}

a:hover {
	text-decoration: underline;
}

a.button {
	margin: 0.5em 0.5em 0 0.5em;
	padding: 0.7em 2em;
	display: inline-block;
	font-size: 1.2em;
	font-weight: 600;
	letter-spacing: -0.021em;
	line-height: 1.25;
	border-radius: 0.4em;
	border: none;
	background-color: #0069B5;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
}

a.button:hover {
	transition: background-color 0.5s ease;
	background-color: #004A7F;
}

a.button.green {	
	background-color: #1CAF11;
}

a.button.gray {	
	background-color: lightgray;
}

a.button.darkgray {	
	background-color: gray;
}

a.button.gray:hover {	
	transition: background-color 0.5s ease;
	background-color: gray;	
}

img.shadow {
	box-shadow: 0 10px 30px rgb(25 34 29 / 10%), 0 1px 0 1px rgb(25 34 29 / 4%);
}

.hidden {
	display: none !important;
}

.welcome {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	align-content: center;	
}

.welcome div.content.menu {
	margin-bottom: 1em;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	gap: 1em;
}

.welcome .menu a.logo {	
	display: flex;
	align-items: center;
	text-decoration: none;
	color: #000;
}

.welcome .menu span.blank {	
	flex-grow: 1;
}

.welcome .menu a.logo img {
	vertical-align: middle;
	width: 92px;
}

.welcome .menu a.logo h1 {
	display: inline;
	font-size: 2em;
	letter-spacing: 0.1em;
}

.welcome .menu span.login,
.welcome .menu span.logout {	
	display: inline-block;
	flex-grow: 0;
}

.welcome .menu span.login a.button,
.welcome .menu span.blog a.button,
.welcome .menu span.tour a.button,
.welcome .menu span.home a.button,
.welcome .menu span.logout a.button,
.welcome .menu span.dashboard a.button,
.welcome .menu span.try a.button {
	margin: 0;
}

.welcome .menu span.menu {	
	position: relative;	
	display: inline-block;
	flex-grow: 0;
}

.welcome .menu span.menu > a {
	color: white;
	font-weight: 600;
	background-color: lightgray;
	border-radius: 10px;
	font-size: 2em;	
	text-align: center;
	line-height: 1.2;
	padding: 0.2em 0.5em;
}

.welcome .menu span.menu > a:hover {
	transition: background-color 0.5s ease;
	background-color: gray;	
}

.welcome .menu span.menu:hover > ul.submenu {
	visibility: visible;
	opacity: 1;
}

.welcome .submenu {
	transition: visibility 0s, opacity 0.3s linear;
	visibility: hidden;
	display: block;
	opacity: 0; 
	background-color: white;
	border-radius: 15px;
	list-style: none;
	position: absolute;
	left: 0;
	top: 2.5em;
	border: 1px solid lightgray;
	box-shadow: 0 30px 30px rgb(25 34 29 / 10%), 0 1px 0 1px rgb(25 34 29 / 4%);
	z-index: 2;
	white-space: nowrap;
}

.welcome .submenu > li {
	padding: 0.5em 1em;
	margin-bottom: 1px;
	border-radius: 0;
	font-size: 1em;
	line-height: 1.5;
}

.welcome .submenu > li:hover {	
	background-color: aliceblue;
	border-radius: 0;
}

.welcome .submenu > li:first-child:hover {
	border-radius: 10px 10px 0 0;
}

.welcome .submenu > li:last-child:hover {	
	border-radius: 0 0 10px 10px;
}

.welcome .submenu > li > a {
	display: block;
	text-decoration: none;
	color: black;
}

.welcome .banner {
	z-index: 1;
	flex-grow: 1;
}

.welcome .banner a {
	margin-left: 1em;
	width: 175px;
}

.welcome .banner img.controlpanel {
	max-width: 800px;
	box-shadow: 0 30px 30px rgb(25 34 29 / 10%), 0 1px 0 1px rgb(25 34 29 / 4%);
	overflow-clip-margin: content-box;
    overflow: clip;	
	transition: transform 3.00s ease-in-out;
	transform: skewX(-5deg) skewY(-2deg);
}

.welcome .banner img.controlpanel.effect {
	transition: transform 3.00s ease-in-out;
	transform: skewX(-4deg) skewY(-1.5deg);
}

.welcome .footer {
	padding-bottom: 2em;
}

.welcome .footer a {
	color: #000;
}

.welcome .footer img {
	width: 92px;
}

.features .grid {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	align-items: stretch;
	align-content: stretch;
	gap: 2em;
}

.features .box {
	width: 300px;
	background-color: #fff;
	border-radius: 5px;
	padding: 1em;
	box-shadow: 0 30px 30px rgb(25 34 29 / 10%), 0 1px 0 1px rgb(25 34 29 / 4%);
	transition: all 0.75s ease-in;
}

.features .box:hover {
	transform: scale(1.1);
}

.features .box i {
	margin-right: 0.5em;	
	color: lightgray;
}

.features .box p {
	font-size: 0.6em;	
	text-align: center;
}

.pricing table {
	width: 100%;
	border: 1px solid lightgray;
	border-collapse: collapse;
	box-shadow: 0 30px 30px rgb(25 34 29 / 10%), 0 1px 0 1px rgb(25 34 29 / 4%);
}

.carousel div.content {
	position: relative;
	z-index: 3;
	overflow: clip;
}

.carousel div.content:before {
	content: "";
	position: absolute;
	z-index: 4;
	bottom: 0;
	left: 0%;
	width: 15%;
	height: 100%;
	pointer-events: none;
	background-image: linear-gradient(to left, 
		rgba(255,255,255, 0) 50%, 
		rgba(255,255,255, 1) 100%);	
}

.carousel div.content:after {
	content: "";
	position: absolute;
	z-index: 4;
	bottom: 0;
	left: 85%;
	width: 15%;
	height: 100%;
	pointer-events: none;
	background-image: linear-gradient(to right, 
		rgba(255,255,255, 0) 50%, 
		rgba(255,255,255, 1) 100%);	
}

.carousel div.slide {
	user-select: none;
	position: relative;
	left: -50%;
	top: 0;
	text-align: center;
	z-index: 2;
	white-space: nowrap;
	transition: all 0.50s linear;
}

.carousel span.img {
	margin: 0 2em;
	display: inline-block;	
}

.carousel span.img:first-child {
	margin-left: 0;
}

.carousel span.img:last-child {
	margin-right: 0;
}

.carousel span.img img {
	display: block;
	max-height: 400px;
	box-shadow: 0 15px 30px rgb(25 34 29 / 10%), 0 1px 0 1px rgb(25 34 29 / 4%);
}

.carousel span.img div {
	margin-top: 1em;
	display: block;
	opacity: 0;
}

.carousel span.img.selected div {
	opacity: 1;
	transition: all 0.75s linear;
}

.carousel img:hover {
	transform: scale(1.03);
	transition: transform 0.75s ease-in-out
}

.carousel img.selected {
	
}

.pricing th, .pricing td {
	padding: 0.7em 1em;	
}

.pricing tr {
	border-bottom: 1px dotted lightgray;	
}

.pricing th {
	font-weight: 600;	
	border-right: 1px dotted gray;	
	text-align: left;
	font-size: 1.2em;
}

.pricing thead th,
.pricing tfoot th {
	/*border-bottom: 1px solid gray;*/
	border-right: none;
	background-color: #D8E1E6;
}

.pricing tfoot th {
	background-color: #ffffff;
}

.pricing td {
	text-align: center;	
	font-size: 1.2em;
}

.pricing p.notes {
	margin-top: 1em;
	font-size: 1em;
}

.pricing .hosted {
	background-color: #FFFCF2;
}

.faq ul.faq-items {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	align-content: stretch;
	gap: 1em;
}

.faq ul.faq-items li.faq-item {
	flex-grow: 0;
	flex-shrink: 1;
	background-color: #fff;
	min-width: min-content;
	position: relative;
	flex-grow: 1;
	width: calc(50% - 0.5em);
	border: 1px solid lightgray;
	padding: 0.6em 1em;
	border-radius: 5px;
	box-shadow: 0 0px 30px rgb(25 34 29 / 10%), 0 1px 0 1px rgb(25 34 29 / 4%);
}

.faq ul.faq-items h3 {
	display: block;
	margin: 0.2em 0.4em;
	padding: 0;
	font-weight: 600;
	font-size: 1em;
	color: #333;
	cursor: pointer;
}

.faq ul.faq-items div.faq-card {
	display: block;
	opacity: 0;
	height: 0;
	margin: 0;
	padding: 0;
	font-size: 1em;
	transition: all .75s ease;
}

.faq ul.faq-items div.faq-card.visible {
	opacity: 1;
	height: auto;
	padding: 0.5em;
}

.faq ul {
	list-style: disc;
	list-style-position: inside;
}

.testimonies {	
	width: 100%;	
}

.testimonies .flex {
	width: 100%;
	max-width: 100%;
	flex-wrap: wrap;
	align-items: stretch;
}

.testimonies .card {	
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	align-content: stretch;	
	width: 350px;
	padding: 2em;
	background-color: white;	
}

.testimonies .quote {
	flex-grow: 1;
	margin-bottom: 1em;	
	color: #000;
}

.testimonies .logo {
	flex-grow: 0;
	margin-bottom: 1em;
	height: 100px;
}

.testimonies .name {
	flex-grow: 0;
	font-size: 1.3em;
	color: #19221D;
	letter-spacing: 0.05em;
	font-weight: 600;
}

.tryforfree {
	padding: 8em 0;
	text-align: center;
}

.tryforfree a.button {
	width: 250px;
	text-align: center;
}

.footer {
	background-color: #fff;
	padding: 2em 0;
	text-align: center;
	letter-spacing: -0.006em;
	color: #19221D;
}

.footer ul {
	display: inline-block;
	list-style: none;	
}

.footer li {
	margin: 0 0.5em;
	display: inline-block;
}

.footer span.copyright {
	
}

.footer a {
	transition: 0.35s;
	cursor: pointer;
}

.mailinglist_panel {
	background-color: #FFEACE;
	text-align: center;
	padding: 4em;
	border-radius: 2em;
}

.mailinglist_panel input {	
	box-sizing: border-box;
	border-radius: 5px;
	padding: 0.5em 0.5em;
	border: 1px solid lightgray;
	font-size: 1.2em;
	line-height: 1;
	width: auto;
	width: 300px;
	max-width: 95%;
}

.mailinglist_panel button {	
	box-sizing: border-box;
	border-radius: 5px;
	padding: 0.5em 0.5em;
	border: 1px solid lightgray;
	font-size: 1.2em;
	line-height: 1;
	background-color: #fff;
}

ol.roadmap {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	align-content: flex-start;
	gap: 2em;
}

ol.roadmap li {
	position: relative;
	margin-left: 1.5em;
	margin-right: 1.5em;
	display: inline-block;
	border: 1px solid #efefef;
	vertical-align: top;
	width: 300px;
	height: 200px;
	background-color: #F4F7FC;
	opacity: 1;
	padding: 1em;
	border-radius: 0.5em;
}

ol.roadmap h1.title {	
	margin: 0 0 0.2em 0; 
}

ol.roadmap p.category {	
	margin: 0; 
	font-size: 0.8em;
	color: #333;
	opacity: 1;
}

ol.roadmap p.description {	
	margin: 0 0 0.5em 0; 
	font-size: 1em;
	color: #000;
	white-space: wrap;
	line-height: 1.3;
}

ol.roadmap div.progressbar {
	margin: 0 0 0.5em 0;
	position: absolute;
	border: 1px solid black;
	width: 150px;
	height: 15px;
	left: 1em;
	bottom: 1em;
	border-radius: 5px;
	background-color: beige;
}

ol.roadmap div.progressbar .progress {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	background-color: lime;
}

ol.roadmap div.progressbar .text {
	line-height: 15px;
	position: absolute;
	text-align: center;
	font-size: 0.6em;
	font-family: monospace;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
}

ol.roadmap p.date {	
	font-size: 0.8em;
	color: #000;
	opacity: 1;
}

@media only screen and (max-width: 820px) {
		
	section {
		padding: 2em 1em !important;
	}
	
	section div.halve {
		margin-bottom: 2em;
		max-width: none !important;
	}
	
	h2 {
		font-size: 2.5em !important;
	}
	
	h3 {
		font-size: 1em !important;
	}
	
	p {
		font-size: 1.2em !important;
	}	
	
	.welcome img.controlpanel {
		display: block;
		margin: 0 auto;
		max-width: 80% !important;
	}
	
	.carousel div.content:before, 
	.carousel div.content:after {		
		background-image: none;	
	}
	
	.carousel span.img {
		margin: 0;
		margin-bottom: 1em;
		display: block;
		text-align: center;
	}
	
	.carousel span.img div {
		opacity: 1;
	}	
	
	.carousel img {
		margin: 0 auto;
		max-width: 100%;
	}
	
	.cloud img {
		max-width: 100%;
	}
	
	.blsmanager div.content.flex {
		display: block;
	}
	
	.blsmanager img {
		max-width: 100%;
	}
	
	.faq ul.faq-items li.faq-item {
		width: auto;
	}
	
	.faq ul.faq-items div.faq-card {
		opacity: 1;
		height: auto;
		padding: 0.5em;
	}
		
	.footer ul {
		display: block;
	}
	
	.footer li {
		display: block;
		line-height: 2;
	}
}

@media only screen and (max-width: 767px) { 
	
	.welcome div.content.menu {
		justify-content: center;
	}
	
	.welcome .menu span.blank {
		display: none;
	}
		
	.welcome .menu a.logo {
		order: 1;
		margin-bottom: 1em;
	}
	
	.welcome .menu span.login {
		order: 0;
	}
	
	.welcome .menu span.login a.button {
		display: block;
		line-height: 1;
	}
	
	.welcome .menu span.menu {
		display: none !important;
	}
	
	.welcome a.button {
		margin-left: 0em;
	}
	
	.pricing table, .pricing thead, .pricing tbody, .pricing tfoot, .pricing tr, .pricing th, .pricing td {
		display: block;
	}
	
	.pricing thead tr,
	.pricing tfoot tr {
		background-color: #D8E1E6;
	}
	
	.pricing thead th {
		display: inline-block;
		width: 33.333% !important;
		height: 50px;
	}
	
	.pricing thead th:first-child {
		display: none;
	}
	
	.pricing th, .pricing td {
		display: inline-block;
		font-size: 0.9em;		
	}
	
	.pricing td {
		width: 33.333%;
	}
	
	.pricing th.separator {
		display: none;
	}
	
	.pricing thead th {
		height: auto;
	}
	
	.pricing tr {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		align-content: stretch;
		align-items: stretch;
	}
	
	.pricing tr td,
	.pricing tr th {
		flex-grow: 1;
		word-break: break-word;
	}
	
	.pricing tr:first-child th {
		background-color: #E3EDF2;		
	}
	
	.pricing th {
		background-color: #E3EDF2;
	}
	
	.pricing th:first-child {
		/*display: block;
		width: 100% !important;*/
		min-width: 100%;
		flex-shrink: 0;
	}
}

@media only screen and (max-width: 300px) {
	
	
}