@charset "utf-8";
/* CSS Document */

:root{
/*	----------------------------------------------------------  SIZES  */	
	--full-width:100%;
	--inner-width: 600px;
	
/*	---------------------------------------------------------  COLORS  */
	--bg-color-test: rgba(255,0,0,0.1);
	--baehring-orange: rgba(255,128,0,1);

/*	----------------------------------------------------------  FONTS  */	
	--source-sans: 'Source Sans', 'Arial', sans-serif;
	
	--thin: 		100;
	--extralight: 	200;
	--light: 		300;
	--regular: 		400;
	--medium: 		500;
	--semibold: 	600;
	--bold: 		700;
	--black: 		800;
	--extrablack: 	900;
}

* {
	box-sizing:border-box;
}

html, body {
	width:100%;
	height:auto;
	min-height:100dvh;
	position:relative;
	
	padding:0;
	margin:0;
	
	font-family: var(--source-sans);
	font-weight: 200;
	font-style: normal;
	font-size:93.75%;
	color:rgba(0,0,0,1);
}

html{
	/*	force scrollbars  */
	overflow-y:scroll;
	scroll-behavior: smooth;	
}

	h1, h2, h3, h4, h5, h6, p, td, ul, li, figure, button {
		margin:0;
		padding:0;
		font-weight:normal;
		border:0;
		outline:0;
		background-color:transparent;
	}

	a { 
		font-family: 'Source Sans','Arial',sans-serif; 
		font-style: normal;
		font-weight: 300;
		text-decoration: none; 
	}

	a:link, a:visited { color: rgba(0,0,0,1); }
	a:hover, a:active { color: var(--baehring-orange); }

	strong{
		font-family:'barlow-semibold','Verdana Bold','Verdana',serif; 
		font-style:normal;
		font-weight:normal;
	}

	.yellow { color:rgba(255,204,0,1); }


.flxR{
	display:flex;
	flex-flow:row;
	flex-wrap:nowrap;
}
.flxC{
	display:flex;
	flex-flow:column;
	flex-wrap:nowrap;
}
.flxJCA	{ justify-content:space-around; }
.flxJCB	{ justify-content:space-between; }
.flxJCC	{ justify-content:center; }
.flxJCE	{ justify-content:flex-end; }
.flxJCS	{ justify-content:flex-start; }

.flxAIC	{ align-items:center; }
.flxAIE	{ align-items:flex-end; }
.flxAIS	{ align-items:flex-start; }
.flxWrp	{ flex-wrap:wrap; }

.fllW{
	width:100%;
	height:auto;
}
.fllH{
	height:100%;
	width:auto;
}
.fllWH{
	width:100%;
	height:100%;
}

.innerWidth{
	width:100%;
	max-width: var(--inner-width);
	margin:0 auto;
}


/*	-------------------------------------------------------------------------------  COMMON CLASSES  */





/*	----------------------------------------------------------------------------------  THE FIXATIV  */
	.fixativ{

	}




/*	---------------------------------------------------------------------------------------  HEADER  */
	.sbaeh_hdrWrp{
		width: var(--full-width);
		height: 180px;

		position: fixed; 
		top: 0;
		left: 0; 
		z-index: 1000;

		background-color: white;
	}
	@media screen and (min-width:666px){
		.sbaeh_hdrWrp{
			height: 200px;
		}
	}

		.sbaeh_hdr{

		}

			.sbaeh_initialDot{
				width: 60px;
				aspect-ratio: 1 / 1;

				margin: 20px 0 20px;

				font-weight: 200;
				font-size: 1.7rem;
				color: white;

				border-radius: 50%;
				background-color: rgba(255,128,0,1);
			}
			@media screen and (min-width:666px){
				.sbaeh_initialDot{
					margin: 40px 0 20px;
				}
			}

			h1{
				font-size: 1.5rem;
				font-weight: 400;
				text-align: center;
				text-transform: uppercase;
			}
			
			p, form{
				position: relative;
				padding: 0 0 20px;
				
				font-size: 1.15rem;
				font-weight: 300;
					
			}
				.sbaeh_kiBeta{
					position: absolute;
					top: 0px;
					right: -5px;
					transform: translateX(100%);
					
					font-size: 0.6rem;
					font-weight: 400;
					color: rgba(0,0,0,0.4);
					
					cursor: pointer;
				}
					.sbaeh_kiBeta:hover { color: var(--baehring-orange); }



			.sbaeh_topCorners{
				width: calc(100% - 32px);
				max-width: var(--inner-width);
				height: 15px;

				margin: 0 15px;

				position: absolute;
				bottom: -15px;
				left: 50%;
				transform: translateX(calc(-50% - 15px));

				border: 1px solid #ccc;
				border-bottom:0;
			}

			.sbaeh_topLeftCorner{ transform: translate(-1px,-1px); }
			.sbaeh_topRightCorner{ transform: translate(1px,-1px); }




/*	-----------------------------------------------------------------------------------------  MAIN  */
	.sbaeh_mainWrp{
		width: 100%;
		max-width: var(--full-width);
	}
		.sbaeh_main{
			width: calc(100% - 32px);
			max-width: var(--inner-width);
			height: auto;
			min-height: calc(100vh - 80px);

			margin: 0 0 80px;
			padding: 210px 0 110px;

			border: 1px solid #ccc;
			
			background-color: rgba(0,0,0,0.05);
		}
		@media screen and (min-width:666px){
			.sbaeh_main{
				padding: 230px 0 110px;
			}
		}

			.sbaeh_kiChat{
				width: 100%;
				margin: 0 0 100px;
				padding: 0 15px;
			}
			@media screen and (min-width:666px){
				.sbaeh_kiChat{
					padding: 0 25px;
				}
			}

				.sbaeh_bubble{
					width: fit-content;
					max-width: 80%;
					
					align-self: flex-start;
					
					padding:5px 10px 6px;
					margin: 0 0 10px 0;

					color: rgba(0,0,0,1);

					background-color: rgba(250,250,250,1);

					border: 1px solid rgba(200,200,200,1);
					border-radius: 5px;
				}

					.sbaeh_bubbleLeft{
						align-self: flex-start;
					}
					@media screen and (min-width:666px){
						.sbaeh_bubbleLeft{
							margin-right: 150px;
						}
					}

					.sbaeh_bubbleRight{
						align-self: flex-end;
						background-color: rgba(220,220,220,1);
					}
					@media screen and (min-width:666px){
						.sbaeh_bubbleRight{
							margin-left: 150px;
						}
					}

					.sbaeh_bubbleActive{
						margin-bottom: 30px;
					}

						.sbaeh_bubbleActive img.sbaeh_bubbleSpeechIndicatorLeft{
							width: 10px;
							height: 17px;

							display: block;

							position: absolute;
							left: 20px;
							bottom: -17px;
						}

						.sbaeh_speechDot{
							width: 12px;
							aspect-ratio: 1 / 1;

							position: absolute;
							left: 13px;
							bottom: -30px;

							border-radius: 50%;
							background-color: var(--baehring-orange);

							font-size:0;
						}
						@media screen and (min-width:666px){
							.sbaeh_speechDot{
								width: 15px;

								position: absolute;
								left: 11px;
								bottom: -33px;
							}
						}

				form{
					width: 100%;
				}

					.sbaeh_kiIntro{
						margin: 30px 0 10px;
						padding: 0;
					}

				input{
					width: 100%;

					margin: 10px 0 0;
					padding: 10px 14px;

					font-family: var(--source-sans);

					border: 0;
					border-radius: 10px;
					background-color: rgba(0,0,0,0.06);

					outline: none;
				}

				input[type=submit]{
					width: fit-content;
					padding: 10px 40px;

					color: white;

					background-color: rgba(255,128,0,0.9);
					border: 0;
				}





/*	---------------------------------------------------------------------------------------  FOOTER  */
	.sbaeh_ftrWrp{
		width: 100%;
		max-width: var(--full-width);
		min-height:80px;

		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1100;

		background-color: white;
	}
		.sbaeh_ftr{
			width: 100%;
			max-width: var(--inner-width);
		}


			.sbaeh_bottomCorners{
				width: calc(100% - 32px);
				max-width: var(--inner-width);
				height: 15px;

				margin: 0 15px;

				position: absolute;
				top: -15px;
				left: 50%;
				transform: translateX(calc(-50% - 15px));

				border: 1px solid #ccc;
				border-top: 0;
			}

			.sbaeh_bottomLeftCorner{ transform: translate(-1px,0px); }
			.sbaeh_bottomRightCorner{ transform: translate(1px,0px); }