:root {
	--text-color: #ffffff;
	--mc-color-white: #FFFFFF;
	--mc-color-light-gray: #D7D7D7;
	--mc-color-light-blue: #28D4FF;
	--mc-color-light-yellow: #F3D82E;
	--mc-color-light-yellow-50: hsla(52,89%,57%,.5);
	--mc-color-light-yellow-70: hsla(52,89%,57%,.7);
	--mc-color-dark-yellow: #A88A0E;
	--mc-color-light-gray: #384655;
	--mc-color-dark-gray: #1E272C;
	--mc-color-almost-black: #0D1415;
	--color-background-news-bar: #0F1926;
	--border-radius-10: 10px;
	--border-radius-20: 20px;
	--color-dark-10: hsla(0,0%,0%,.1);
	--color-dark-20: hsla(0,0%,0%,.2);
	--color-background-footer: hsla(215,47%,10%,1);
	
	
--_gradient-blend-mode: normal;
	--_gradient-blur: 0px;	
	}

html summary::-webkit-details-marker {
  display: none;
  }
* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', sans-serif, 'Roboto Mono';
	font-optical-sizing: auto;
	padding: 0;
	margin: 0;
	/* text-rendering: optimizeLegibility;
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: subpixel-antialiased;
	font-smoothing: subpixel-antialiased;
	font-synthesis: none;
	-moz-font-feature-settings: 'kern';
	shape-rendering: geometricPrecision; */
	direction: ltr;
	line-height: 100%;
	font-weight: <weight>;
	/* -webkit-transition: all .5s;
	-moz-transition: all .5s;
	transition: all .5s;		 */
	color: var(--text-color);
	}
	
// <weight>: Use a value from 100 to 900
	// <uniquifier>: Use a unique and descriptive class name
	
	.roboto-<uniquifier> {
		font-family: "Roboto", sans-serif;
		font-optical-sizing: auto;
		font-weight: <weight>;
		font-style: normal;
		font-variation-settings:
		"wdth" 100;
		}
	
	
ul,ol,li {
	list-style: none;
	}
html {
	position: relative;
	}	
body,html {
	height: 100%;
	}
body {
	font-size: 13px;
	animation: bugfix infinite 1s;
	-webkit-animation: bugfix infinite 1s;
	min-width: 375px;
	overflow-x: hidden;
	overflow-y: auto;
	position: relative;
	width: 100%;
	line-height: 100%;
	-webkit-overflow-scrolling: touch;
	/* background: url("../../resources/images/bg.jpg") top center / cover no-repeat; */

	}	
svg {
	shape-rendering: geometricPrecision;
	}		
fieldset {
	outline: 0;
	border: 0;
	}	
	
	

	

	
		
.frosted-backdrop {
	backdrop-filter: blur(var(--_gradient-blur)) contrast(100%) brightness(100%);
	-webkit-backdrop-filter: blur(var(--_gradient-blur)) contrast(100%) brightness(100%);
	position: fixed;
	top: 0;
	width: calc(100vw + 500px);
	height: 1000vh;
	left: -250px;
	right: -250px;
	z-index: -1;
	background: radial-gradient(at 21% 96%, #2F5A7B 0px, transparent 50%), radial-gradient(at 70% 2%, #2F5A7B 0px, transparent 50%), radial-gradient(at 11.2% 76%, #142639 0px, transparent 50%), radial-gradient(at 49.9% 43.7%, #142639 0px, transparent 50%), radial-gradient(at 80.9% 79.5%, #142639 0px, transparent 50%), radial-gradient(at 90.5% 26.9%, #142639 0px, transparent 50%), radial-gradient(at 40% 18%, #38698F 0px, transparent 50%), radial-gradient(at 80.4% 54.4%, #38698F 0px, transparent 50%) #000000;;
	mix-blend-mode: var(--_gradient-blend-mode);	
	overflow-x: hidden;
	overflow-y: auto;		
	}	
	
	
.content {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: 60px 0 0 0;
	}	

.news-bar {
	background: var(--color-background-news-bar);
	width: 100%;
	height: 40px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	}	
.news-bar a {
	text-decoration: none;
	opacity: .5;
	}	
.news-bar a:hover {
	opacity: 1;
	}
header {
	align-items: center;
	display: flex;
	flex-direction: column;
	z-index: 99;
	width: 100%;
	position: sticky;
	top: 0;
	background: hsla(0,100%,100%,.05);
	backdrop-filter: blur(10px);
	transition: padding 0.3s ease-in-out;
	padding: 30px 10% 0 10%;
	}
.header-container {
	justify-content: space-between;
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	
	width: 100%;
	transition: padding 0.3s ease-in-out;
	max-width: 1600px;
	}	
header .logo {
	width: 100%;
	display: flex;
	justify-content: center;
	}
header .logo img {
	width: 230px;
	}	
header .nav-buttons {
	display: flex;
	width: 100%;
	justify-content: flex-end;
	}	
	
.nav-container-logo,
.nav-container-menu {
	width: 100%;
	}	
.nav-container-logo {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: center;
	}	
.navigation {
	width: 100%;
	}	
	
.p-menu {
	position: relative;
	width: 100%;
	top: -24px;
	}
	
.hamburger {
	  height: 25px;
	  margin: 0;
	  display: grid;
	  grid-template-rows: repeat(3, 1fr);
	  justify-items: left;
	  z-index: 120;
	  position: relative;
	  /* top: -20px; */
	}
	
	.hamburger div {
	  background-color: var(--mc-color-white);
	  position: relative;
	  width: 30px;
	  height: 3px;
	  margin-top: 0;
	  border-radius: 2px;
	  -webkit-transition: all 0.2s ease-in-out;
	  transition: all 0.2s ease-in-out;
	}
	
	#toggle {
	  display: none;
	}
	#toggle:checked + .hamburger {
		top: -10px;
		position: relative;
		}
	#toggle:checked + .hamburger .top {
	  -webkit-transform: rotate(-45deg);
			  transform: rotate(-45deg);
	  margin-top: 22.5px;
	}
	
	#toggle:checked + .hamburger .meat {
	  -webkit-transform: rotate(45deg);
			  transform: rotate(45deg);
	  margin-top: -3px;
	}
	
	#toggle:checked + .hamburger .bottom {
	  -webkit-transform: scale(0);
			  transform: scale(0);
	}
	
	#toggle:checked ~ .menu {
	  height: 50px;
	  margin: 15px 0 0 0;
	}
	
	
	/* Menu */
	.menu {
	  width: 100%;
	  margin: 0;
	  display: grid;
	  grid-template-columns: 1fr repeat(3, 0.5fr);
	  grid-row-gap: 25px;
	  padding: 0;
	  list-style: none;
	  clear: both;
	  text-align: center;
	  height: 0;
	  overflow: hidden;
	  transition: height .4s ease;
	  z-index: 120;
	  -webkit-transition: all 0.3s ease;
	  transition: all 0.3s ease;
	  position: sticky;
	}
	
	.menu a:first-child {
	  /* margin-top: 20px; */
	}
	
	.menu a:last-child {
	  /* margin-bottom: 20px; */
	}
	
	.link {
		width: 100%;
		margin: 0;
		padding: 10px 0 5px 0;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		text-decoration: none;
		font-size: 1.0rem;
		}
	
	.link:hover {
	  text-decoration: underline;
	  -webkit-transition: all 0.3s ease;
	  transition: all 0.3s ease;
	}	

.nav-buttons {
	display: flex;
	grid-gap: 10px;
	white-space: nowrap;
	}
.nav-buttons a {
	font-size: 1.0rem;
	}	
.nav-buttons a.client-login-button {
	background: var(--color-dark-20);
	padding: 12px 20px;
	text-decoration: none;
	border-radius: var(--border-radius-10);
	}	
.nav-buttons a.get-madconnected-button {
	font-size: 1.0rem;
	margin: 0;
	padding: 12px 20px;
	font-weight: 300;
	border-radius: var(--border-radius-10);
	}		
.nav-buttons a.get-madconnected-button::before {
	border: 3px solid transparent;
	border-radius: var(--border-radius-10);
	}	
	
	
	
	
	
	
	
h1 {
	font-weight: 230;
	text-align: center;
	font-size: 3.8rem;
	line-height: 125%;
	color: #ffffff;
	background-image: linear-gradient(45deg, var(--mc-color-white) , var(--mc-color-white) 30%, var(--mc-color-light-yellow) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
	width: 100%;
	padding: 0 10%;
	letter-spacing: -.02em;
	}
h2 {
	font-weight: 300;
	text-align: center;
	font-size: 1.3rem;
	line-height: 180%;
	width: 100%;
	padding: 15px 10%;
	}	
.bolt-container {
	width: 100%;
	display: flex;
	justify-content: center;
	height: 200px;
	position: relative;
	}	
.bolt-glowing-pulse {
	animation: pulse-glow 3s infinite alternate;
	animation-timing-function: ease-in-out;
	padding: 40px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	}
.bolt-glowing-pulse img {
	width: 90px;
	}	
@keyframes pulse-glow {
	0% {
		filter: drop-shadow(0 0 30px var(--mc-color-light-yellow-50)); /* Initial glow */
				}
	50% {
		filter: drop-shadow(0 0 30px var(--mc-color-light-yellow-70)) /* Stronger glow at peak */
				drop-shadow(0 0 100px var(--mc-color-light-yellow-50)); /* Wider, softer glow */
				transform: scale(1.1);
				}
	100% {
		filter: drop-shadow(0 0 30px var(--mc-color-light-yellow-50)); /* Return to initial glow */
				}
		}
.thin-blue-line {
	height: 1px;
	background: #28D4FF;
	background: linear-gradient(90deg,rgba(40, 212, 255, .4) 40%, rgba(40, 212, 255, 0) 50%, rgba(40, 212, 255, .4) 60%);
	width: 100%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	}
	
a.get-madconnected-button {
	display: flow-root;
	position: relative;
	width: fit-content;
	text-align: center;
	background: #ffffff10;
	border-radius: 20px;
	backdrop-filter: blur(10px);
	color: #F3D72E;
	text-decoration: none;
	font-size: 1.4rem;
	padding: 20px 35px;
	font-weight: 600;
	margin: 10px 0 0 0;
	}
a.get-madconnected-button::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 20px;
	border: 4px solid transparent;
	background: linear-gradient(140.25deg, #F3D82B, #A88A0A) border-box;
	-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: destination-out;
	mask-composite: exclude;
	}	
	
	
	
 @keyframes scroll {
	  0% {
		  transform: translateX(0);
	 }
	  100% {
		  transform: translateX(calc(-250px * 7));
	 }
 }
  .slider {
	  height: 70px;
	  margin: 0 auto 0 auto;
	  overflow: hidden;
	  position: relative;
	  width: 100vw;
	  display: block;
	  background: transparent;
	  
 }
  .slider::before, .slider::after {
	  content: "";
	  height: 100px;
	  position: absolute;
	  width: 100vw;
	  z-index: 2;
	  
 }
  .slider::after {
	  right: 0;
	  top: 0;
	  transform: rotateZ(180deg);
 }
  .slider::before {
	  left: 0;
	  top: 0;
 }
  .slider .slide-track {
	  will-change: transform;
	  animation: scroll 40s linear infinite;
	  display: flex;
	  width: 100%;
	  justify-content: center;
	  align-items: center;
	  
 }
  .slider .slide {
	  height: 70px;
	  padding: 0 50px;
	  border-right: 1px solid #ffffff10;
	  display: flex;
		justify-content: center;
		align-items: center;	  
 }
  .slider .slide img {
	  width: 100px;
	  }	
.under-slider-glow {
	width: 100%;
	height: 100px;
	background: #ffffff15;
	top: -90px;
	position: relative;
	filter: blur(70px);
	}	
.section-title {
	width: 100%;
	text-align: center;
	margin: 0;
	padding: 0 0 40px 0;
	font-size: 2.9rem;
	font-weight: 200;
	}	
.section-title.live-connectors {
	margin: 70px 0 0 0;
	font-size: 1.9rem;
	font-weight: 400;
	}	
.section-subheading {
	width: 100%;
	text-align: center;
	margin: 0;
	padding: 0 0 40px 0;
	font-size: 1.1rem;
	font-weight: 200;
	line-height: 140%;
	}		
	
.section-container {
	padding: 80px 50px;
	width: 100vw;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	position: relative;
	}
.section-container.dark {
	background: var(--color-dark-10);
	}	
.section-container.below-the-glow {
	margin: -30px 0 0 0;
	}	
.section-container.brightest {
	background: #fff;
	}
.section-container.brightest:after {
	background: hsla(0,0%,0%,.1);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	}	
.section-container.brightest .section-title,
.section-container.brightest .section-subheading {
	color: var(--mc-color-almost-black);
	z-index: 1;
	} 	
.section-container.brightest svg.static {
	  width: 100vw;
	  height: 100%;
	  background: hsla(197,100%,48%,.85);
	  position: absolute;
	  top: 0;
	  left: 0;
	  z-index: 0;
	  opacity: .4;
	}		
.image-container {
	width: 100%;
	z-index: 1;
	position: relative;
	display: flex;
	justify-content: center;
	}
.image-container img {
	width: 80vw;
	max-width: 1280px; 
	/* height: 600px; */
	}	
.video-container {
	width: 100%;
	height: 100%;
	z-index: 1;
	position: relative;
	display: flex;
	justify-content: center;
	}	
.video-container iframe {
	/* width: 840px;
	height: 473px; */
	width: 100%;
	max-width: 1280px;
	}	
	
	
.content-container.boxes {
	width: 100%;
	justify-content: center;
	align-items: center;
	display: flex;
	grid-gap: 30px;
	flex-direction: row;
	}	
.feature-box {
	background: linear-gradient(135deg, #ffffff10 50%, #00000010 85%);
	border-radius: var(--border-radius-20);
	-webkit-box-shadow: 5px 5px 0px 3px rgba(0,0,0,0.1); 
	box-shadow: 5px 5px 0px 3px rgba(0,0,0,0.1);
	width: 320px;
	display: grid;
	justify-content: center;
	align-items: center;
	grid-template-rows: min-content repeat(4, min-content);
	text-align: center;
	grid-gap: 20px;
	padding: 40px 0 20px 0;
	}	
.feature-box .box-icon img {	
	height: 55px;
	}
.feature-box .box-heading {
	font-size: 1.25rem;
	font-weight: 400;
	padding: 0 30px;
	}	
.feature-box .box-subheading {
	font-size: .9rem;
	font-weight: 200;
	line-height: 140%;
	padding: 0 30px 20px 30px;
	}	
.feature-box.web-based-app .box-subheading {
	border-bottom: 1px solid #05C397;
	}	
.feature-box.snowflake .box-subheading {	
	border-bottom: 1px solid #249EDC;
	}	
.feature-box.embedded-api .box-subheading {	
	border-bottom: 1px solid #FF6535;
	}		
.feature-box ul {
	padding: 0 45px;
	}
.feature-box ul li {
	list-style: disc;
	text-align: left;
	line-height: 150%;
	margin: 0 0 5px 0;
	}













.footer {
	position: relative;
	bottom: 0;
	margin: 0 auto;
	width: 100%;
	text-align: center;
	font-size: .7rem;
	background: var(--color-background-footer);
	display: grid;
	grid-template-rows: auto auto;
	align-items: center;
	justify-content: center;
	padding: 30px 10%;
	grid-gap: 30px;
	}
.footer .top-row-container,
.footer .bottom-row-container {
	width: 100vw;
	max-width: 1600px;
	}	
.footer .top-row-container {
	align-items: flex-start;
	display: grid;
	grid-template-columns: 10fr min-content min-content;
	align-items: center;
	grid-gap: 30px;
	}	
.footer .bottom-row-container {
	align-items: flex-end;
	display: grid;
	grid-template-columns: 10fr min-content;
	text-align: left;
	}			
.footer .links {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	width: fit-content;
	justify-content: center;
	align-items: center;
	grid-gap: 20px;
	}	
.footer .links a {
	display: flex;
	flex-direction: column;
	white-space: nowrap;
	text-decoration: none;
	font-size: .9rem;
	}	
.footer .addendum-links {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 20px;
	}	
.footer .addendum-links a,
.footer .copyright {
	white-space: nowrap;
	text-decoration: none;
	font-size: .8rem;
	opacity: .4;
	}	
.footer .addendum-links a:hover {
	opacity: 1;
	}	
.footer .nav-buttons a.get-madconnected-button {
	font-size: .9rem;
	}		
.footer .logo {
	width: fit-content;
	}
.footer .logo img {
	width: 180px;
	}	
/* .footer .menu {
	height: auto;
	}
.footer .menu a {
	color: var(--mc-color-white);
	}	 */
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

@media (max-width: 1024px) {

	.content-container.boxes {
		flex-direction: column;
		}		
	
	}