/* Style for cursor movement
		* --------------------------------------- */
		@media (min-width: 992px) {

			body.block-misc-cursor,
			html.block-misc-cursor,
			.block-misc-cursor a { 
				cursor: none;
			 }

			.block-misc-cursor {
				--cursor-bg: #ffcc00;
			}

			/* Cursor Styling */
			.block-misc-cursor .cursor {
				position: absolute;
				width: 8px;
				height: 8px;
				border-radius: 100%;
				z-index: 999;
				transition: transform .5s ease, opacity .2s ease;
				user-select: none;
				pointer-events: none;
				transform: scale(0.8);
				background-color: var(--cursor-bg);
			}

			.block-misc-cursor a:hover
				{ 
					/*cursor: none;*/
					--cursor-bg: #fff;
			 }

			.intro {
				    	margin-left: -10em;
				    }

			.block-misc-cursor .cursor::before {
				/*content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: block;*/
/*				background-image: url('/images/cursor.svg');*/
/*				background-position: center center;*/
/*				background-size: cover;*/
/*				background-repeat: no-repeat;*/
/*				border-radius: 100%;*/
				opacity: 0;
/*				image-rendering: -webkit-im;*/
			}

			.block-misc-cursor .cursor.active {
				opacity: 1;
				transform: scale(2);
			}

			.block-misc-cursor .cursor.active::before {
				opacity: 1;
			}

			.block-misc-cursor .cursor-follower {
				position: absolute;
				width: 20px;
				height: 20px;
				background-color: var(--cursor-bg);
				opacity: .2;
				border-radius: 100%;
				z-index: 998;
				transition: transform .6s ease, opacity .4s ease;
				user-select: none;
				pointer-events: none;
				transform: translate(14px, 14px);
			}

			.block-misc-cursor .cursor-follower.active {
				opacity: 0.3;
				transform: scale(0);
			}

			.block-misc-cursor .dark .cursor,
			.block-misc-cursor .dark .cursor-follower { --cursor-bg: #FFF; }

			#subs {
/*				text-align: right;*/
/*				padding-left:6px;*/
			}

			#feature {
				text-align: left;position: relative;top: 50px;
			}

			#section4 {
				padding-top:150px;
			}
		}

		html {
			scroll-behavior: smooth;
			top:0;
			left:0;
		}

		body { 
			overscroll-behavior-y: none;
			overscroll-behavior-x: none;
			overflow-x: hidden;
			scroll-behavior: smooth;
			margin: 0;
		}
		/* Style for our header texts
		* --------------------------------------- */
		
		h1{
	        color: #fff;
	        font-size:  3.5em;
	        font-family: 'Poppins' !important;
	        top: 0;
/*	        font-style: italic;*/
	        font-weight: 500;
	        padding-bottom: 10px;
	    }

		h2 {
			font-size: 2.0em;
			margin-bottom: 1em;
			font-family: 'Avenir' !important;
			font-weight: 300;
			color: #e0e0e0;
			line-height: 1.1;
		}

		h3{
			font-size: 2em;
			font-family: 'Poppins' !important;
			color: #c5c5c5;
			margin:0;
			padding-left:20px;
			line-height: 1.2;
		}

		.title
	    {
	    	font-size: 32px;
				font-family: 'Avenir' !important;
				font-weight: 500;
				color: #fff;
				margin:0;
				padding:3px;
				line-height: 1.5;
	    }

	    .subtitle {
	    	font-size: 1.5rem;
  			font-weight: 300;
	    	font-family: 'Avenir' !important;
/*			color: #e0;*/
			color:#737373;
			margin:0;
			padding-top:10px;
			line-height: 1.3;
/*			padding-left:60px;*/
	    }

	    

		.intro p{
			color: #fff;
		}

		.underline {
			text-decoration-line: underline;
			text-decoration-thickness: 0.3rem;
			text-underline-offset: 1rem;
		}

		.underline.small {
			text-decoration-thickness: 0.2rem;
		}
		
		a {
			color:  #fc0;
		}

		/* Fixed header and footer.
		* --------------------------------------- */
		#header, #footer{
			position:fixed;
			height: 40px;
			/*display:block;*/
			width: 100%;
			/*background: #000;*/
			z-index:9;
			/*text-align:center;*/
			color: #aaa;
			left: 0px;
/*			display: none;*/
			/*opacity: 1;*/
			/*transition: 400ms ease;*/
		}

		#downloadCTA {
			display: none;
		}

		#header{
			top:0px;
			padding: 0px 0 0 20px;
			backdrop-filter: blur(4px);
		}

		#footer{
			bottom:0px;
			backdrop-filter: blur(4px);
		}

		#menu li {
			display:inline-block;

			margin: 5px;
			color: #333;
			/*background:#333;*/
			/*background: rgba(255,255,255, 0.5);
			-webkit-border-radius: 10px;
		            border-radius: 10px;*/
		}

		#menu li.active{
			/*background:#666;*/
			/*background: rgba(0,0,0, 0.5);*/
			color: #fff;
		}
		#menu li a{
			text-decoration: none !important;
			font-family: 'Avenir' !important;
			color: #777;
		}
		#menu li.active a:hover{
			color: #fff;
		}
		#menu li:hover{
			/*background: rgba(255,255,255, 0.8);*/
		}
		
		#menu li.active a{
			color: #fff;
		}
		#menu{
			position:fixed;
			bottom:5px;
			left: 10px;
			height: 40px;
			z-index: 70;
			width: 300px;
			padding: 0;
			margin:0;
			font-size: 1.3em;
		}

		#inlineqrcode {
			filter: invert(1);
		}

		.floatingqr {
		  position: fixed;
		  right: 1em; top: 1em;
		  /*width: 200px;
		  height:40px;*/
		  background-color:black;
		  z-index: 99;
/*		  padding: 5px;*/
		  border-radius: 1rem !important;
		}

		body {
			/*background-color: black;*/
			color: white;
			display: block;
			font-family: 'Avenir';
		}

		::selection {
			background: #FFCC00;
			color: black;
		}

		.features.right {
			/*padding-right: 40px;*/
			text-align: right;
		}

		.features.left {
			padding-right: 40px;
		}
		
		.split-screen {
		    display: flex;
		    border-radius: 2rem !important;
		    /*width:80%; margin:0 auto;*/
		    /*background-color: #000;*/
		}

		.split-screen__half 
		{
			width: 50%;
		}

		#empty {
			width:500px;
		}

		.screenshot {
		    flex: 1;
  			margin: auto;
			/*position: absolute;*/
			padding-top: 40px;
			/*-ms-transform: translateY(-20%);
			transform: translateY(-20%);*/

		}

		.same-height-columns {
    		display: flex;
		}

		.same-height-columns__column {
		    flex: 1;
		    /* Space between columns */
		    margin: 0 8px;

		    /* Layout each column */
		    display: flex;
		    flex-direction: column;
		}

		.same-height-columns__content {
		    /* Take available height */
		    flex: 1;
		    padding-top: 20px;
		    max-width:90%
		}

		#tagline {
/*			margin-left: 50px;*/
		}

		.screenshot img{
		    width: 50%;
		}

		#slider-subscribe-form { width: 70% !important; }

		.spaceman {
		    	margin-left: 5em;
		 }
	
		.rounded-6 {
 			border-radius: 1rem !important;
   		}

		
		[data-aos=slide-up] { // or another animation type you have
		  -webkit-transform: translate3d(0,-300px,0); // or another value you need
		  transform: translate3d(0,-300px,0); // or another value you need
		}

		.dot {
		  height: 25px;
		  width: 25px;
		  background-color: #fff;
		  border-radius: 50%;
		  display: inline-block;
		  
		}

		.date {

			color: #fff;
			/*font-size:42px;*/
			margin-bottom:2em;
			font: 4ch open sans mono, consolas, monospace;
	  		letter-spacing: .5ch;
		}
		.grey {
	  		background-color: grey;
	  	}
	  	.white {
	  		background-color: white;
	  	}

		.monthview {
			max-width:300px;
			margin:4em;
			margin-top:200px;
		}


		.section { 
			padding-bottom: 150px;
			padding: 100px 15% 0px 15%;
			background-color: #000;
		}


		#section0 {
		  background-image: url("/images/_hero2.png");
		  background-repeat: no-repeat;
		  background-attachment: scroll;
		  background-position: center;
		  background-size: cover;
		  /* dimensions are important, ensure it is tall enough to scroll */ 
		  min-height: 100vh;

		  /* you are free to lay out the container items with flexbox or whatever means you wish */
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  justify-content: center;
		}

		#section5 {
			background-image: linear-gradient(#000, #333);
			padding: 100px 15% 100px 15%;
		}
		#section6 {
			background-color: #fff;
			height:500px;
			padding: 100px 15% 200px 15%;
		}

		img {
			max-width: 100%;
		}

		.video {
/*		  border: 1px solid black;*/
		  border-radius: 16px;
		  overflow: hidden;
		  -webkit-transform: translateZ(0);
		  /*height: 80vh;*/
		  width: 300px;
		  opacity: 1;
		}

		.wrapper {
		  display: table;
		  width: auto;
		  position: relative;
		  width: 100%;
		}

		.playpause {
		  background-image: url(/images/playhover.png);
		  background-repeat: no-repeat;
		  width: 100px;
		  height: 80px;
		  position: absolute;
		  left: 0%;
		  right: 0%;
/*		  top: 0%;*/
		  bottom: 0%;
		  margin: auto;
		  background-size: contain;
		  background-position: left;
		}

		.playpause {
		  opacity: 1;
		  transition: opacity 400ms;
		}

		.playpause[hidden] {
		  opacity: 0;
		  display: block;
		}
		
		#slider-subscribe-form .input-group {
			background-color: #FFF;
			border: 1px solid #EEE;
			border-radius: 3px;
			box-shadow: 0 0 30px 4px rgba(0,0,0,0.15);
			/*border-left: 3px solid black;*/
		}

		#slider-subscribe-form input {
			box-shadow: none;
			border: 0;
			height: 64px;
			padding-left: 1.25rem;
		}

		#slider-subscribe-form .input-group { align-items: center; }

		#slider-subscribe-form .form-control.error { background-color: #ffe6e6; }

		.form-control {
		  display: block;
		  width: 100%;
		  padding: 0.375rem 0.75rem;
		  font-size: 1rem;
		  font-weight: 400;
		  line-height: 1.5;
		  color: #212529;
		  background-color: #fff;
		  background-clip: padding-box;
		  border: 1px solid #ced4da;
		  -webkit-appearance: none;
		  -moz-appearance: none;
		  appearance: none;
		  border-radius: 0.25rem;
		  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
		}
		.form-control::placeholder {
		  color: #6c757d;
		  opacity: 1;
		}

		.input-group {
		  position: relative;
		  display: flex;
		  flex-wrap: wrap;
		  align-items: stretch;
		  width: 100%;
		}
		.input-group > .form-control,
		.input-group > .form-select {
		  position: relative;
		  flex: 1 1 auto;
		  width: 1%;
		  min-width: 0;
		}
		.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
		.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3) {
		  border-top-right-radius: 0;
		  border-bottom-right-radius: 0;
		}
		.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
		  margin-left: -1px;
		  border-top-left-radius: 0;
		  border-bottom-left-radius: 0;
		}

		.accordion {
		  background-color: #fff;
		  color: #000;
		  padding: 10px;
		  width: 100%;
		  border: none;
		  text-align: left;
		  outline: none;
		  font-size: 1.2em;
		  transition: 0.4s;
		}

		.reactive, .accordion:hover {
		  background-color: #fc0;
		  cursor: none;
		}

		.accordion:after {
		  content: '\002B';
		  color: #fc0;
		  font-weight: bold;
		  float: right;
		  margin-left: 0px;
		}

		.reactive:after {
		  content: "\2212";
		}

		.panel {
		  padding: 0 0em;
		  padding-top: 1em;
		  padding-left: 0.5em;
		  background-color: #fff;
		  color: #000;
		  font-style: italic;
		  max-height: 0;
		  overflow: hidden;
		  transition: max-height 0.2s ease-out;
		}
		
		
		.hover_help {
			font-size:1em;color:#aaa;
		}

		.progress-container {
		    position: fixed;
		    width: 100%;
		    height: 4px;
		    left: 0;
		    top: 0;
		    z-index: 1000;
		    background: transparent;
		    transition: all ease-out 0.2s;
		}

		.progress-bar {
		    display: block;
		    width: 0;
		    height: 3px;
		    background: #FC0;
		}

		@media (max-width: 992px) {
			.split-screen {
			    display: block;
			}

			.same-height-columns__column
			{
				padding-top: 40px;
			}

			.same-height-columns {
	    		display: block;
			}

			.split-screen__half 
			{
				padding-top:  40px;
				width: 100%;
			}

			#empty {
				width:0px;
			}

			.split-screen__half .screenshot {
		    	flex: 1;
  				margin: auto;
				top: 0%;
				-ms-transform: translateY(0%);
				transform: translateY(0%);
			}

			.same-height-columns__content {
				max-width:100%
			}

			h1{
		        font-size:  2.8em;
		    }

		  	#subs{
		  		padding-top:10px;
				font-size: 1.8em;
			}

			#feature {
				text-align: left;position: relative;top: 0px;
			}

		    .screenshot img{
			    width: 90%;
			}

			.secondary {
				display: none;
			}

		    img {
		    	max-width: 90%;
		    	z-index: 2;
		    }

		    #section0 {
		    	background-color: #000;
		    	padding-top:0px;
		    	padding-bottom:0px;
		    	position: relative;
		    	background-image: none;
		    }

		    video {
		    	max-width: 100%;
		    }

		    .spaceman {
		    	margin-left: 0;
		    }

		    #header {
		    	/*background: #000;*/
			}

		    #inlineqrcode, .floatingqr, #footer #menu {
		    	display: none;
		    }

		    #downloadCTA {
		    	display: block;
		    	background-color: #fc0;
		    	border-radius: 16px;
		    	text-align: center;
		    	padding: 8px;
		    	margin:0 40px 40px 40px;
		    }

		    #tagline {
				margin-left: 0px;
			}

			#slider-subscribe-form { width: 100% !important; }

			.playpause {
		 		 background-image: url(/images/playtap.png);
			}
		}