* {
}
.grid-horizontal {
	display : grid;
	grid-column-gap : 10px;
	grid-row-gap : 10px;
	grid-auto-rows : 1fr;
	padding : 10px
}
@media only screen and (min-width : 480px) {
	.grid-horizontal {	grid-template-columns : 50% 50%;	}
}
@media only screen and (min-width : 768px) {
	.grid-horizontal {	grid-template-columns : 33.33% 33.33% 33.33%;	}
}
@media only screen and (min-width : 1024px) {
	.grid-horizontal {	grid-template-columns : 25% 25% 25% 25%;	}
}

.grid-vertical {
	display : grid;
	grid-column-gap : 10px;
	grid-row-gap : 10px;
}

.features {
}
.box {
	x-margin-right : 5vw;
	padding-bottom : 5vh;
	display : block;
	xbackground : white;
	opacity : .95;
	margin-bottom : 3px;
}
@media only screen and (min-width: 768px) {
	.box {
		width : calc(100% - 150px);
		x-box-shadow : 0px 5px 7px 0px lightgrey;
		padding : 6px;
		display : grid;
		grid-column-gap : 10px;
		grid-row-gap : 10px;
		grid-auto-rows : 1fr;
		grid-template-columns : 100px auto;
		align-items: center;
		x-color : #05B7FF;
		grid-template-areas: "icon title" "icon body";
		xmin-width : calc(130px - 105vw);
	}
}

.box-title {
	grid-area : title;
	font-weight : bold;
	font-size : 1.2em;
	margin-bottom : 12px;
	align-self : end;
}
@media only screen and (min-width: 768px) {
	.box-icon {
		grid-area : icon;
		width : 100%;
	}
}
.box-text {
	grid-area : body;	
	align-self : start;
}
.box-icon svg { fill : #05B7FF	 }
.box-icon svg { width : 80px; }

.slide p {
	max-width : 900px;
}
.slide .box-text {
	max-width : 800px;
}

body {
	background-attachment: fixed;
	margin: 0;
	font-family: "Roboto", "Noto", sans-serif;
	line-height: 1.5;
	min-height: 100vh;
	background-color : black;
	/* background-image : url(./media/images/honeycomb.dark.blue.png); */
	background-position : fixed;
	font-size : 13pt;
}
@media only screen and (min-width : 768px) {
	body {	font-size : 14pt }
}
.slide {
	margin : 36px 0;
	border-radius : 3px;
	x-box-shadow : 300px 3px 50px grey;
	padding-bottom : 3vh;
	background-color: #ffffffaa;  
	backdrop-filter: blur(3px);
	margin-right: calc(10vw);
	margin-left: calc(10vw);
	border-radius: 10px;
	overflow: hidden;
	/* background-repeat : no-repeat;
	background-size : cover;
	background: white; */
	/* background: #FFFFFF; */
	/* background-image: linear-gradient(to top left, #64D3FF, white); 64D3FF 05B7FF Standard syntax (must be last) */
	/* padding-right : 5vw; */
}

.slide .slide-body { 
	margin-left : 6vw;
	margin-right : 6vw;
}
/* .slide:before {
    box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
}
.slide:before {
    box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
    filter: blur(10px);
}
.slide {
    background: inherit;
}
.slide:before {
    background: inherit;
}

.slide .slide-body {
	margin-left : 30px;
	xmargin-right : 5vw;
	font-size : 1.1em;
} */
	
@media only screen and (min-width : 768px) {
	.slide .slide-body {
		margin-left : 4vw;
	}
	.box {
		xmargin-left : -150px;
	}
}
.contact-us {
	width : 100%;
	max-width : 600px;
}
.contact-us input, .contact-us textarea { 
	font-size : 1.2em;
	padding : 10px;
	width : 100%;
}
.contact-us textarea {
	height : 200px;
	width : 100%;
}
.contact-us .label {
	padding : 24px 0 6px 0;
}
.contact-us select { padding : 6px; }

.contact-us fieldset {
	border : 0;
	padding : 0;
}
.contact-us {
	xborder : 1px solid grey;
}

.contact-us .contact-us-send {
	border: 1px solid grey;
    display: flex;
    flex-direction: row;
    background: white;
	width : 110px;
	padding: 12px;
	cursor : pointer;
	margin-top : 10px;
	margin-left : auto;
}
.contact-us .contact-us-send .button-text {
	padding : 0 12px;
}
.contact-us .contact-us-send-icon {
	cursor : pointer;
    border: none;
	font-size: 18px;
}

.text-align-right { text-align : right }

textarea {
	height : 300px;
}

#logo img {
	max-width : 70vw;
	margin-left : 18px;
	margin-bottom : 75px;
}

@media only screen and (min-width : 768px) {
	#logo img { 
		max-width : 400px;
	}
}
h1 { font-size : 2em; }
#hero {
	padding-top : 30vh;
}
#hero h1 { margin-bottom : 0; margin-top : 100px }
#hero h1, .like-hero { 
	/* border-top-left-radius: 10px;
	border-top-right-radius: 10px; */
	background : #FFFFFF55/* #005b89;  /* #21333c */;
	/* #05B7FF; 21396e */
	padding : 30px; 
	color : #005b89; /*white*/;	 
	x-margin-right : 5%;
	padding-left : 4vw;
	margin-top  : 0;
}
.action-result {
	font-size : 2em;
}
@media only screen and (min-width : 768px) {
	#hero h1, .like-hero { 
		padding-left : 4vw;
	}
}

.slides
{
	min-height : 70vh;
}
.slide:first-child{
	margin-top  : 0;
}
.slide.top {
	padding-top: 10vh;
	background: #00000055;
	/* background : url('/media/images/hero.jpg') no-repeat; */
	background-size : cover;
	margin-top : 0;
	/* height : 300px; */
}
.slide.slide-hero {
	background : black;
	color : white;
	background : url('/media/images/hero.jpg') no-repeat;
	background-size : cover;
	margin-top : 0;
	height : 95vh;
}

.slide.no-padding-bottom {
	padding-bottom: 0;
}

.nav {
	text-align : right;
	width : 100%;
	background : white;
	margin-right : 5vw;
}
.nav a:link, .nav a:visited, .nav a:active {
	text-decoration : none;
	padding : 6px 12px 6px 12px;
	border-left : 1px solid white;
	border-right : 1px solid white;
	background : white;
	color : #05B7FF;
	font-size : 1em;
	display : inline-block;
}
.nav a:hover {
	color : white;
	background : #05B7FF;
}

footer {
	color : white;
	margin-right : 12vw;
	text-align : right
}

#startChat {
	position : fixed;
	right : 30px;
	bottom : 30px;
}

/* html, body {
	overflow: hidden;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
} */

#renderCanvas {
	width: 100%;
	height: 100%;
	touch-action: none;
}