@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;500;700&family=Roboto+Flex:wght@400;700&family=Inconsolata:wght@400&display=swap');

html {
	scroll-behavior: smooth;
	--font-title: 'Roboto Condensed';
	--font-text: 'Roboto Flex';
	--color1: #DC7402;
	--color2: #459EDB;
	--color3: #FDF047;
}
body {
	margin : 0px;
	font-family: var(--font-text);
	font-size: 18px;
	text-rendering: optimizeLegibility;
}
a {
	color: inherit;
}
.center {
	max-width: 1200px;
	margin : 0px auto;
}
@media (max-width: 767px) {
	.center {
		width : calc(100% - 40px);
	}
}
@media (min-width: 768px) {
	.center {
		width : calc(100% - 80px);
	}
}




header {
	display: flex;
	gap: 50px;
	align-items: center;
	padding: 0px 20px;
	background: var(--color3);
}
header .logo {
	padding: 32px 24px;
	color: white;
	font-family: var(--font-title);
	font-size  : 32px;
	font-weight: 700;
	text-decoration: none;
	background: var(--color1);
}

@media (max-width: 1023px) {
	.mainmenu {
		display: none;
	}
}
@media (min-width: 1024px) {
	.mainmenu {
		display: flex;
		gap: 25px;
		font-family: var(--font-title);
		font-size: 20px;
		font-weight: 500;
		text-transform: uppercase;
	}
	.mainmenu a {
		text-decoration: none;
	}
}
.langmenu {
	position: absolute;
	top   : 10px;
	right : 10px;
	margin : 0px;
	font-family: var(--font-title);
	font-size: 16px;
	font-weight: 500;
	text-decoration-thickness: 3px;
	text-underline-offset: 3px;
}



.slider {
	display: flex;
	justify-content: center;
	align-items: center;
	background: url('/images/bg-slider.jpg');
	background-size: cover;
}
@media (max-width: 1023px) {
	.slider {
		aspect-ratio: 1;
		background-position: center;
	}
}
@media (min-width: 768px) and (max-width: 1023px) {
	.slider {
		aspect-ratio: 2;
		background-position: center;
	}
}
@media (min-width: 1024px) {
	.slider {
		aspect-ratio: 3;
	}
}
.slider_text {
	width : calc(100% - 40px);
	max-width: 448px;
}
.slider .title {
	margin: 0px;
	font-family: var(--font-title);
	font-weight: 700;
}
.slider .tagline {
	margin: 12px 0px 0px 0px;
	font-family: var(--font-text);
	font-weight: 700;
}
.slider .explain {
	margin: 12px 0px 0px 0px;
	font-family: var(--font-text);
	text-wrap  : balance;
}
@media (max-width: 767px) {
	.slider_text {
	}
	.slider .title {
		font-size  : 30px;
	}
	.slider .tagline {
		font-size  : 30px;
	}
	.slider .explain {
		font-size  : 22px;
	}
}
@media (min-width: 768px) {
	.slider_text {
	}
	.slider .title {
		font-size  : 32px;
	}
	.slider .tagline {
		font-size  : 32px;
	}
	.slider .explain {
		font-size  : 24px;
	}
}



section {
	margin: 96px 0px 0px 0px;
}
section.compatibility {
	margin: 0px;
}



.compatibility {
	padding: 50px 0px;
	color: white;
	background: var(--color2);
}
.compatibility .center {
	align-items: center;
	display: grid;
	grid-gap: 0px 50px;
}
@media (max-width: 1023px) {
	.compatibility .center {
		grid-template-columns: 1fr;
	}
}
@media (min-width: 1024px) {
	.compatibility .center {
		grid-template-columns: 1fr auto;
	}
}
.compat_logos {
	display: grid;
	grid-gap: 0px 24px;
}
@media (max-width: 1023px) {
	.compat_logos {
		margin: 32px 0px 0px 0px;
		grid-template-columns: repeat(3, 80px);
	}
	.compat_logos img {
		display: block;
		width : 80px;
		height: 80px;
	}
}
@media (min-width: 1024px) {
	.compat_logos {
		grid-template-columns: repeat(3, 128px);
	}
	.compat_logos img {
		display: block;
		width : 128px;
		height: 128px;
	}
}


.doblecolumn {
	display: grid;
	grid-gap: 0px 64px;
}
@media (max-width: 1023px) {
	.doblecolumn {
		grid-template-columns: minmax(1px, 1fr);
	}
}
@media (min-width: 1024px) {
	.doblecolumn {
		grid-template-columns: minmax(1px, 1fr) minmax(1px, 1fr);
	}
}

h2 {
	margin: 0px 0px 10px 0px;
	font-family: var(--font-title);
	font-size  : 32px;
	font-weight: 700;
	font-style : normal;
}
h2 em {
	display: block;
	margin: 0px 0px 10px 0px;
	color: var(--color1);
	font-family: var(--font-title);
	font-size  : 20px;
	font-weight: 400;
	font-style : normal;
	text-transform: uppercase;
}
h2 + p {
    margin: 0px 0px 0px 0px;
    font-family: var(--font-text);
    font-size: 20px;
    line-height: 25px;
}



.compatibility h2 em {
	color: var(--color3);
}
.compatibility h2 {
	color: white;
}



.demo,
.apikey {
	display: flex;
	flex-flow: column;
}
.demo .gap,
.apikey .gap {
	flex-grow: 1;
}
@media (max-width: 767px) {
	.demo .miniforms,
	.apikey .miniforms {
		margin: 32px -20px 0px -20px;
	}
}



.apidoc_tt {
}
.apidoc_ttl {
	width: 125px;
	vertical-align: top;
}
.apidoc_ttv {
	font-family: var(--font-title);
	font-weight: 300;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.apidoc_ttt {
}
.apidoc_st {
	font-family: var(--font-title);
	font-weight: 300;
}
.apidoc_stl {
	width: 75px;
}
.apidoc_stv {
	color: #999999;
	font-style: italic;
}
@media (max-width: 767px) {
	.apidoc_tt {
		display: block;
	}
	.apidoc_tt tbody {
		display: block;
	}
	.apidoc_tt tr {
		display: block;
		margin: 0px 0px 10px 0px;
	}
	.apidoc_tt .apidoc_ttl {
		display: block;
	}
}



.miniforms {
	display: flex;
	align-items: center;
	justify-content: center;
	margin : 32px 0px 0px 0px;
	padding: 64px 32px;
	box-sizing: border-box;
	font-family: var(--font-text);
	font-size  : 18px;
	text-rendering: optimizeLegibility;
	border: 10px solid #F4F4F4;
	background: url('/images/bg-iframes.png') bottom right;
	background-size: cover;
}
.miniforms form {
	width: 302px;
	padding: 10px;
	background: rgba(245, 245, 245, 0.75);
	backdrop-filter: blur(4px);
}
.miniforms label {
	display: block;
	margin: 0px 0px 5px 0px;
	font-size: 16px;
}

.miniforms input[type=url],
.miniforms input[type=email] {
	display: block;
	width: 100%;
	margin : 0px 0px 10px 0px;
	padding: 0px 10px;
	box-sizing: border-box;
	line-height: 30px;
	border: 1px solid #DBDBDB;
}
.miniforms .cbox {
	display: flex;
	align-items: center;
	margin: 10px 0px 0px 0px;
}
.miniforms .cbox input[type=checkbox] {
	margin: 0px 5px 0px 0px;
}
.miniforms .cbox label {
	margin: 0px;
	user-select: none;
	cursor: pointer;
}
.miniforms button {
	display: block;
	margin: 10px 0px 0px 0px;
	width: 100%;
	color: white;
	font-family: var(--font-title);
	font-size: 18px;
	font-weight: 500;
	line-height: 32px;
	background: var(--color1);
	border: unset;
	cursor: pointer;
}
.miniforms button:hover {
	background: var(--color2);
}
.miniforms button:disabled {
	background: #999999;
	cursor: unset;
}

.mini_form {
	display: block;
}
.mini_form.hidden {
	display: none;
}
.mini_fback {
	display: none;
}
.mini_fback.shown {
	display: block;
}

.mini_fback {
	width : 302px;
	padding: 10px;
	background: rgba(245, 245, 245, 0.75);
	backdrop-filter: blur(4px);
}
.mini_fback p {
	margin : 10px 0px 20px 0px;
	font-size: 18px;
	text-align: center;
	text-wrap: balance;
}
.mini_fback a {
	display: block;
	width : 100%;
	margin : 10px 0px 0px 0px;
	color: white;
	font-family: var(--font-title);
	font-size  : 18px;
	font-weight: 500;
	line-height: 32px;
	text-align: center;
	text-decoration: unset;
	background: var(--color1);
	border: unset;
	cursor: pointer;
}




.codeblock {
	display: block;
	padding: 20px;
	font-family: 'Inconsolata';
	font-size  : 16px;
	line-height: 22px;
	white-space: pre;
	background: #F4F4F4;
	overflow-x: scroll;
}


.contact {
	padding: 50px 0px;
	background: #F4F4F4;
}
.contact .center {
	max-width: 768px;
}
.contactform {
	display: block;
	width: 100%;
	margin : 0px;
	padding: 0px;
	border: unset;
}




footer {
	position: relative;
	padding: 24px 0px 16px 0px;
	color: white;
	background: #333333;
}
footer:before {
	content: '';
	position: absolute;
	top   : 5px;
	left  : 15px;
	right : 15px;
	height: 2px;
	background: var(--color2);
}
.sharing {
	text-align: center;
}
.sharing_text {
	margin: 0px 0px 16px 0px;
	font-size: 16px;
}
.sharing_icons {
}
.sharing_icons .ico {
	display: inline-block;
	vertical-align: middle;
	width : 32px;
	height: 32px;
	margin: 0px 8px;
	background: url(/images/sprites.svg);
	background-size: 512px;
}
.sharing_icons .ico_fb {
	background-position: -16px -16px;
}
.sharing_icons .ico_tt {
	background-position: -80px -16px;
}
.sharing_icons .ico_ig {
	background-position: -144px -16px;
}
.sharing_icons .ico_li {
	background-position: -208px -16px;
}
.sharing_icons .ico_wh {
	background-position: -272px -16px;
}
.copy {
	margin : 32px 0px 0px 0px;
	font-size : 16px;
	text-align: center;
}