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

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%;
}

.jumbotron {
	/* background: linear-gradient(-45deg, #ff3300, #ee7752, #e73c7e);, #23a6d5, #23d5ab); */
	background-color: #f4511e;
	background-size: 400% 400%;
	animation: gradient 30s ease infinite;
	min-height: 90vh;
}

footer img{
	width:50px;
}

.jumbotron img {
	height: 50%;
	max-width: 80%;
	margin-top: 20px;
}

.jumbotron > h1, h2 {
	text-transform: capitalize;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}

}

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

.bg-grey {
	background-color: #f6f6f6;
}

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

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

.navbar-brand img{
	margin-top: -10px;
	width: 30px;
	float: right;
}

#navLogo {
	position: absolute;
	top: 2px;
	right: 2px;
}

.thumbnail {
	padding: 0 0 15px;
	border: none;
	border-radius: 0;
}

.thumbnail img {
	width: 100%;
	height: 100%;
	margin-bottom: 10px;
}

.carousel-control.right, .carousel-control.left {
	background-image: none;
	color: #f4511e;
}

.carousel-indicators li {
	border-color: #f4511e;
}

.carousel-indicators li.active {
	background-color: #f4511e;
}

.item h4 {
	font-size: 19px;
	line-height: 1.375em;
	font-weight: 400;
	font-style: italic;
	margin: 70px 0;
}

.item span {
	font-style: normal;
}

.panel {
	border: 1px solid #f4511e; 
	border-radius:0 !important;
	transition: box-shadow 0.5s;
}

.panel:hover {
	box-shadow: 5px 0 40px rgb(0 0 0 / 20%);
}

.panel-footer .btn {
	margin: 15px 0;
	background-color: #f4511e;
	color: #fff;
}

.panel-footer .btn:hover {
	border: 1px solid #f4511e;
	background-color: #fff !important;
	color: #f4511e;
}

.panel-heading {
	color: #fff !important;
	background-color: #f4511e !important;
	padding: 25px;
	border-bottom: 1px solid transparent;
	border-radius: 0;
}

.panel-footer {
	background-color: white !important;
}

.panel-footer h3 {
	font-size: 32px;
}

.panel-footer h4 {
color: #aaa;
	font-size: 14px;
}

.navbar {
	margin-bottom: 0;
	background-color: #f4511e;
	z-index: 9999;
	border: 0;
	font-size: 12px !important;
	line-height: 1.4286 !important;
	letter-spacing: 4px;
	border-radius: 0;
	font-family: Montserrat, sans-serif;
	text-transform: capitalize;
}

.navbar li a, .navbar .navbar-brand {
	color: #fff !important;
}

.navbar-nav li a:hover, .navbar-nav li.active a {
	color: #f4511e !important;
	background-color: #fff !important;
}

.navbar-default .navbar-toggle {
	border-color: transparent;
	color: #f4511e !important;
}

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
	background-color: #f4511e;/* #ddd; */
  }

footer .glyphicon {
	font-size: 20px;
	margin-bottom: 20px;
	color: #f4511e;
}

.navbar .dropdown-menu{
	background-color: #f4511e;
	width: 20em;
	border-radius: 0 0 10px 10px;
}

.navbar form{
	background-color: #f4511e;
}

.navbar form input, button{
	width: 90%;
	margin: 5px 5%;
	text-align: center;
	border-radius: 5px;;
}

#whyUs {
	background-image: url("../IMG/hex.png");
}

.imgMatrix {
	width: 40%;

	/* height:150px; */
	aspect-ratio: 1 / 1;
	margin: 2px;

	/* border: 1px solid red; */
}

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

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

#CMS img{
	width: 80%;
}

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

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

.slideanim { visibility:hidden; }

.slide {
	animation-name: slide;
	animation-duration: 1s;
	visibility: visible;
}

#HowWeWork {
	background-image: url("../IMG/hex.png");
}

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

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

	/* align-items: center; */
}

.circle-Container > div {
	width: 200px;
	height: 200px;
	margin: 10px auto;
	padding: 20px;
	border-radius: 100%;
	background-color: #f4511e;
	color:white;
	text-align: center;
	vertical-align: middle;
	display: flex;
	justify-content: center;
	align-items: center;
}

.circle-Container > h1 {
	display: inline-block;
}

.circle-Container > .spaces {
	background-color: rgb(0 0 0 / 0%);
}

@keyframes slide {
0% {
	opacity: 0;
	transform: translateY(70%);
} 

100% {
	opacity: 1;
	transform: translateY(0%);
}
}

@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;
}
}

/******************************************************************************
***** index.html
*******************************************************************************/

.full-window {
	background-color: #f4511e;
	height: 100vh; /* Ensure it takes at least the full viewport height */
	min-width: 360px;
	min-height: 600px;
	overflow: hidden;
}


.full-window h1{
	margin: 0;
}

@font-face {
	font-family: 'My Custom Font'; /* Same family name */
	src: url('/IMG/Bold.ttf') format('ttf');
	font-weight: bold; /* Or 700 for bold */
	font-style: normal;
	font-display: swap;
}

#octopod{
	position: absolute; 
	width: 100%; 
	text-align: center; 
	font-size: 80px; 
	font-weight: 900; 
	font-family: sans-serif; 
	top:50px;
	background-image: linear-gradient(90deg, rgba(255, 229, 180, 255) 0%, rgba(255, 229, 180, 255) 50%, #f4511e  50%, #f4511e  100%);
	background-clip: text; /* Standard property */
	-webkit-text-fill-color: transparent; /* For WebKit browsers */
	color: transparent; 
}

#website{
	position: absolute; 
	width: 100%; 
	text-align: center; 
	font-size: 50px; 
	font-weight: 900; 
	font-family: sans-serif; 
	top:150px;
	background-image: linear-gradient(90deg, rgba(255, 229, 180, 255) 0%, rgba(255, 229, 180, 255) 50%, #f4511e  50%, #f4511e  100%);
	background-clip: text; /* Standard property */
	-webkit-text-fill-color: transparent; /* For WebKit browsers */
	color: transparent; 
}


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

/* TODO: sort out text size for responsive */

@media (width <= 600px) {
	.leftSplit h1{
		font-size: calc(50vw * 0.1)
	}

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

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

}

.leftSplit {
	background-color: #f4511e;

	/* 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(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;
}