:root {
	/*--blue: #1e90ff;*/
}

html, body {
	margin: 0;
	height: 100%;

	/*background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);*/
	/*background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/
	/*background-image: linear-gradient(to top, #6a85b6 0%, #bac8e0 100%);*/
	/*background-image: linear-gradient(to right, #434343 0%, black 100%);*/
	/*background-image: linear-gradient(to top, #09203f 0%, #537895 100%);*/

	font-family: 'Open Sans', sans-serif;
	overflow-x: hidden;
}


header {
	position: relative;
	width: 100%;
	height: calc(100% - 0px);

	/*width: 120%;*/
	/*left: -10%;*/
	/*margin: 40px auto;*/

	/*background-color: #fff;*/

	min-height: 920px;

	-webkit-box-shadow: 0px 10px 24px -8px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 0px 10px 24px -8px rgba(0, 0, 0, 0.75);
	box-shadow: 0px 10px 24px -8px rgba(0, 0, 0, 0.75);

	/*background: rgb(51,66,76);*/
	/*background: linear-gradient(194deg, rgba(51,66,76,1) 0%, rgba(8,11,28,1) 100%);*/
	background: rgb(21,36,45);
	background: linear-gradient(194deg, rgba(21,36,45,1) 0%, rgba(8,11,28,1) 100%);

	/*background-color: #080b1c;*/

	/*overflow: hidden;*/

	/*-webkit-border-radius: 0px 0px 30% 30%;
	-moz-border-radius: 0px 0px 30% 30%;
	border-radius: 0px 0px 30% 30%;*/

	padding-top: 40px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
}
	
	#bgParticles {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;

		pointer-events: none;

		opacity: .5;
	}

	#sideBubbles {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		height: 400px;
		width: 400px;
		/*background-color: lightgreen;*/
		z-index: 2;
		right: -120px;

		/*display: flex;*/
		/*justify-content: center;*/
		/*align-items: center;*/
	}
		#sideBubbles > div {
			position: absolute;
			width: 320px;
			height: 320px;

			flex-grow: 0;
			flex-shrink: 0;
		}

			#sideBubbles > .b1 {
				-webkit-border-radius: 30% 70% 70% 30% / 29% 30% 70% 71%;
				-moz-border-radius: 30% 70% 70% 30% / 29% 30% 70% 71%;
				border-radius: 30% 70% 70% 30% / 29% 30% 70% 71%;
				background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);

				left: 0;
			}

			#sideBubbles > .b2  {
				-webkit-border-radius: 79% 21% 15% 85% / 73% 75% 25% 27%;
				-moz-border-radius: 79% 21% 15% 85% / 73% 75% 25% 27%;
				border-radius: 79% 21% 15% 85% / 73% 75% 25% 27%;
				background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
				opacity: .4;
				-webkit-transform: rotate(30deg);
				   -moz-transform: rotate(30deg);
				    -ms-transform: rotate(30deg);
				     -o-transform: rotate(30deg);
				        transform: rotate(30deg);
				right: -50px;
				top: -140px;
			}

			#sideBubbles > .b3 {
				position: relative;
				background-color: #fff;
				-webkit-border-radius: 17% 83% 15% 85% / 33% 67% 33% 67%;
				-moz-border-radius: 17% 83% 15% 85% / 33% 67% 33% 67%;
				border-radius: 17% 83% 15% 85% / 33% 67% 33% 67%;
				-webkit-transform: rotate(-40deg);
				   -moz-transform: rotate(-40deg);
				    -ms-transform: rotate(-40deg);
				     -o-transform: rotate(-40deg);
				        transform: rotate(-40deg);
				bottom: -140px;
				/*top: 60px;*/
			}

			#sideBubbles > .b4 {
				-webkit-border-radius: 79% 21% 15% 85% / 73% 75% 25% 27%;
				-moz-border-radius: 79% 21% 15% 85% / 73% 75% 25% 27%;
				border-radius: 79% 21% 15% 85% / 73% 75% 25% 27%;
				background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
				opacity: .4;
				-webkit-transform: rotate(0deg);
				   -moz-transform: rotate(0deg);
				    -ms-transform: rotate(0deg);
				     -o-transform: rotate(0deg);
				        transform: rotate(0deg);

				bottom: -150px;
				right: 12px;

			}

	.bubbles {
		position: absolute;
		bottom: 20px;
		/*left: 50%;
		-webkit-transform: translateX(-50%);
		   -moz-transform: translateX(-50%);
		    -ms-transform: translateX(-50%);
		     -o-transform: translateX(-50%);
		        transform: translateX(-50%);*/
		width: 100%;

		z-index: 1000;
		/*opacity: 0.4;*/

		display: flex;
		justify-content: center;
	}
		.bubbles > span {
			height: 25px;
			width: 180px;
			background-color: #fff;

			margin: 0px 10px;

			-webkit-border-radius: 12px;
			-moz-border-radius: 12px;
			border-radius: 12px;
			/*-webkit-border-radius: 40% 89% 22% 96% / 50% 50% 50% 50% ;
			-moz-border-radius: 40% 89% 22% 96% / 50% 50% 50% 50% ;
			border-radius: 40% 89% 22% 96% / 50% 50% 50% 50% ;*/

			-webkit-box-shadow: inset 0px 5px 24px -8px rgba(0, 0, 0, 0.75);
			-moz-box-shadow: inset 0px 5px 24px -8px rgba(0, 0, 0, 0.75);
			box-shadow: inset 0px 5px 24px -8px rgba(0, 0, 0, 0.75);
		}

		.bubbles.dark {
			position: relative;
			margin-top: 40px;
		}
		.bubbles.dark > span {
			background: rgba(8,11,28,1)
		}

	#topBar {
		position: relative;
		display: flex;
		width: 92%;
		max-width: 1280px;
		margin: 0px auto;

		justify-content: space-between;
		align-items: center;
	}

		#logo {
			/*border: 2px dashed black;
			height: 40px;
			line-height: 40px;
			width: 110px;
			text-align: center;
			text-transform: uppercase;
			font-weight: bold;
			font-size: smaller;*/
		}
			#logo img {
				width: 120px;
				height: auto;
			}


		nav {
			display: flex;
			font-weight: 700;
			/*letter-spacing: 1px;*/
			color: #c0cadb;
			font-size: .9rem;
		}
			nav > span {
				margin: 0px 15px;
				padding: 8px 12px;
				cursor: pointer;
			}


			nav .cta {
				/*font-weight: bold;*/
				-webkit-border-radius: 6px;
				-moz-border-radius: 6px;
				border-radius: 6px;
				border: 1px solid #c0cadb;
				background: rgba(192, 202, 219, 0.15);
			}



	#introTitle {
		margin-top: 140px;
		color: #c0cadb;

		width: 92%;
		max-width: 1280px;

		margin: 140px auto 0 auto;
		padding-right: 25%;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
				box-sizing: border-box;
		
		position: relative;
	}
		#introTitle p {
			margin-bottom: 25px;
			margin-top: 0px;
			padding-top: 0px;
		}

		h1 {
			font-size: 3.2rem;
			font-weight: 800;

			margin-bottom: 15px;
			padding-bottom: 0px;
		}

		.primary-btn {
			font-family: 'Open Sans', sans-serif;
			color: #c0cadb;
			padding: 12px 18px;
			border: 1px solid #c0cadb;
			font-weight: 700;
			background: rgba(192, 202, 219, 0.15);

			-webkit-border-radius: 6px;
			-moz-border-radius: 6px;
			border-radius: 6px;

			font-size: 1.1rem;
			cursor: pointer;

			-webkit-transition: background .15s ease-in-out;
			   -moz-transition: background .15s ease-in-out;
			    -ms-transition: background .15s ease-in-out;
			     -o-transition: background .15s ease-in-out;
			        transition: background .15s ease-in-out;
		}
			.primary-btn:hover {
				background: rgba(192, 202, 219, 0.25);
			}



#main {
	margin-top: 100px;
	min-height: 800px;
}