html{
	scroll-behavior: smooth;
}

body {
	font: 400 15px Lato, sans-serif;
	line-height: 1.8;
	color: #303030;
	margin: 0;
  	padding: 0;
}

canvas {
	display: block;
}

.overlay{
	position: absolute;
	z-index: 1;
}

#hostingHeading {
	width: inherit; 
	height: fit-content; 
	text-align: center; 
	color:rgb(255 229 180 / 25500%); 
	margin-top: 25px;
	font-weight: bolder;
	font-size: 50px;
}

#hostingLogo img{
	position: absolute;
	height: 80px;
	top: 25px;
}

h2 {
	font-size: 24px;
	text-transform: uppercase;
	color: #303030;
	font-weight: 600;
	margin-bottom: 30px;
}

h4 {
	font-size: 19px;
	line-height: 1.375em;
	color: #303030;
	font-weight: 400;
	margin-bottom: 30px;
}

html, .jumbotron {
	width: 100%;
	height:100%;
}



.container-fluid {
	padding: 60px 50px;
	
}

.container-fluid-hex {
	/* padding: 60px 50px; */
	width: 100%;
	height: 150px;
	/* background-color: #f4511e;  */
	background-color: transparent; 
	/* border-bottom: 2px solid gray; */
}


.logo {
	color: #f4511e;
	font-size: 200px;
}

footer .glyphicon {
	font-size: 20px;
	margin-bottom: 20px;
	color: teal;
	transform: translateX(calc(-50% + 14px));
	font-size: 25px;
	/* #f4511e; */
}

.downArrow{
	position: absolute; 
	left: 50%; 
	transform: translateX(calc(-50% + 1px));
	top: 100%; 
	margin-top: -35px; 
	font-size: 25px;
	color: teal;
}

footer{
	display: flex;
	justify-content: space-around;
}

footer img{
	width:50px;
}

footer div {
	display: inline-block;
	width: 30%;
	text-align: center;
}

.circle-Container {
	display: flex;
	flex-wrap: wrap;

	/* background-color: blue; */
	justify-content: space-between;

	/* align-items: center; */
}

@media screen and (width <= 768px) {
	.col-sm-4 {
		text-align: center;
		margin: 25px 0;
	}

	.btn-lg {
		width: 100%;
		margin-bottom: 35px;
	}
}

@media screen and (width <= 480px) {
	.logo {
		font-size: 150px;
	}
}

.full-window {
	/* background-color: #f4511e; */
	background-color: transparent; 
	min-height: 100vh; 
	overflow: hidden;
	position: relative;
}

.leftSplit, .rightSplit{
	float: left;
	border: solid white 0;
	width: 50%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: white;
}

@media (width <= 600px) {
#hostingLogo img{
	display: none;
}

.full-window{
	/* background-color: #f4511e; */
	background-color: transparent;
	overflow: hidden;
}

.leftSplit, .rightSplit{
	float: left;
	border: solid white 0;
	width: 100%;
	height: 50vh;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: white;
	border-top: 1px solid black;
}

}

.leftSplit img {
	max-width: 80%;
	max-height: 50%;
}

.rightSplit img {
	max-width: 80%;
	max-height: 50%;
}

.leftSplit {
	/* background-color: #f4511e; */
	background-color: transparent; 
	/* border-right: 1px solid black; */
	color: rgb(255 229 180 / 25500%);
}

.rightSplit{
	/* background-color: rgba(255, 127, 80, 255); */

	/* background-color: rgba(250, 128, 114, 255); */

	/* background-color: rgba(183, 65, 14, 255); */
	/* background-color: rgb(255 229 180 / 25500%); */
	background-color: rgba(255, 229, 180, 0.8);

	/* background-color: rgba(204, 85, 0, 255); */
	color: #f4511e;

	/* border-left: 1px solid black; */
}

.centerCol{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.centerCol h1{
	font-weight: bolder;
}

@media (width <= 600px) {
	.reverse{
		display: flex;
		flex-direction: column-reverse;
		justify-content: flex-start;
	}

    .leftSplit, .rightSplit{
        float: left;
        border: solid white 0;
        width: 100%;
        height: 50vh;
		min-height: fit-content;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: white;
    }
	
	.overriddenHeight{
		height: 100vh;
	}
    
	.leftSplit h1{
		font-size: calc(50vw * 0.1)
	}

	.rightSplit h1{
		font-size: calc(50vw * 0.1)
	}

	.leftSplit img {
		max-width: 80%;
		max-height: 30vh;
	}
	
	.rightSplit img {
		max-width: 80%;
		max-height: 30vh;
	}

}

.hex-bg {
	position: relative;
	height: 100%;
	width: 100%;
	background-image:
	  repeating-linear-gradient(
		60deg, 
		transparent, 
		transparent 10px, 
		var(--line-color) 10px, 
		var(--line-color) 12px
	  ),
	  repeating-linear-gradient(
		-60deg, 
		transparent, 
		transparent 10px, 
		var(--line-color) 10px, 
		var(--line-color) 12px
	  ),
	  repeating-linear-gradient(
		90deg, 
		transparent, 
		transparent 10px, 
		var(--line-color) 10px, 
		var(--line-color) 12px
	  );
	background-size: 100px 100px;
	background-position: 0 0, 50px 0, 0 50px;
  }
  
  .hex-bg::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1000px;
	height: 1000px;
	background: radial-gradient(
	  circle, 
	  var(--light-color), 
	  transparent 70%
	);
	filter: blur(50px);
	animation: light-flow 15s linear infinite;
  }
  
  @keyframes light-flow {
	0% { transform: translate(-1000px, -1000px) scale(0.5) rotate(0deg); opacity: 0.8; }
	25% { transform: translate(100px, 100px) scale(0.6) rotate(90deg); opacity: 0.9; }
	50% { transform: translate(500px, -500px) scale(0.7) rotate(180deg); opacity: 0.8; }
	75% { transform: translate(-200px, 200px) scale(0.6) rotate(270deg); opacity: 0.9; }
	100% { transform: translate(-1000px, -1000px) scale(0.5) rotate(360deg); opacity: 0.8; }
  }