@charset "utf-8";
/*** Fonts 
.jost-<uniquifier> {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.ubuntu-mono-regular {
  font-family: "Ubuntu Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

***/

body, html {
  margin: 0;
  box-sizing: border-box;
  font: 300 18px/1.8 "Jost", sans-serif;
  color: #777;
  background: rgb(25,25,25);
}

*, *:before, *:after {
  box-sizing: inherit;
}

a span {
	opacity: 0;
	transition: opacity 0.6s ease;
}

a:hover span {
	opacity: 1;
}

a div {
  opacity: 0;
  transition: opacity 0.6s ease;
}

a div:hover {
	opacity:1;
}

aside {
	display: flex;
	flex: 2 1 20%;
	align-items: center;
	justify-content: center;
	transform: rotate(-90deg);
}

aside ul {
	list-style-type: none;
	transform: rotate(90deg);
	text-align: center;
}

aside ul li {
	align-items: center;
	margin: 5px 0px 5px 0px;
}

aside ul li a {
	text-decoration: none;
}

aside ul li a.nav-text div {
	color: rgba(180,180,180,1);
	text-shadow: 0px 0px 2px #000, 1px 1px 22px white;
	font-size: 2.3vw;
	font-family: "Jost";
	line-height: 2.8vw;
	width: 30vw;
	margin-left: 20px;
	text-align: center;
}

aside ul li #fifth-nav div,
aside ul li #zero-nav div,
aside ul li #first-nav div{
	margin-left: -30px;
}

/*
aside ul li a span {
	color: rgba(130,130,130,1);
	text-shadow: 0px 0px 2px #000, 1px 1px 22px white;
	font-size: 2.5vw;
	font-family: "Jost";
	line-height: 2.8vw;
	width: 50vw;
	margin-left: 60px;
	text-align: left;
}
*/

.block-text {
	display: grid;
	grid-template-columns: 1fr 2fr;
}

canvas  {
	border-radius: 5px;
}

#p5-canvas-1 {
	margin-right:100px;
}

.dashboard-title {
	text-align: center;
	font-family: 'Ubuntu Sans';
	font-weight: 200;
	font-size: 4rem;
}


.dots {
	height: 3vw;
  	width: 3vw;
/*	background-color: aqua;*/
	border-radius: 50%;
}

footer {
	min-height: 170px;
	color: rgba(236,213,134,1);
	text-transform: uppercase;
	text-align: center;
	padding-top: 30px;
}

.header-circle {
  position: absolute;
  top: 10%;
  right: 5%;
  width: 7vw;
  height: 7vw;
  border-radius: 50%;
  background-color: transparent; /* Example background color for the circle */
  border: 5px solid rgba(236,213,134,1);
  text-align: center;
}

.header-circle:hover {
  border: 1px solid rgba(255,243,23,0.4);
  background-color: rgb(0,0,0);
  box-shadow: 0px 0px 142px yellow, -80px 40px 200px rgba(252, 169, 43, 1);
  transition: 500ms;
}

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
/*	height: 500px;*/
	margin-top: 9vw;
}


.header-circle span {
	color: rgba(220,220,220,1);
	text-shadow: 0px 0px 2px #000, 1px 1px 22px white;
	font-size: 2.8vw;
	font-family:'Jost';
	line-height: 2.8vw;
}

.header-circle a {
	text-decoration: none;
}


#information-page #title-information-page {
	opacity: 0.1;
	color:rgba(136,170, 150,1);
}


#nav-title {
	font-weight: 200;
	font-size: 5rem;
	padding-left: 60px;
	font-family: "Ubuntu Sans";
	position: absolute;
}



/*** target all circle classes ***/

.zero {
	background-color: rgba(148,122, 153, 1);
	height: 1.5vw;
  	width: 1.5vw;
}

.first {
	background-color: rgba(236,213, 134, 1);	
	height: 6vw;
  	width: 6vw;
}

.second {
	background-color: rgba(136,170, 150, 1);
	height: 2vw;
  	width: 2vw;
}

.third {
	background-color: rgba(148,122, 153, 1);
	height: 4vw;
  	width: 4vw;
}

.fourth {
	background-color: rgba(224,120,116,1);
	height: 8vw;
	width: 8vw;
}

.fifth {
	background-color: rgba(136,170, 150, 1);
	height: 2.5vw;
	width: 2.5vw;
}
/******************/



.scroll-newsreel {
	animation: fadeIn ease 6s;
}

.scroll-newsreel.fade-out {
	opacity: 0;
/*	animation: fadeOut ease 6s;*/
	transition: opacity 6s ease;
}

.text-box {
	color: rgba(190,190,190,1.00);
	padding-top:20px;
	margin-left: 30px;
}

.title {
	color: rgba(236,213, 134, 0.8);
	padding-top:50px;
	margin-left:80px;
	height: 200px;
	margin-bottom:-30px;
}

.title-nav {
/*	display: flex;*/
	display: grid;
	grid-template-columns: 1fr 55%;
	gap: 20px;
	transform: translateX(-10%);
	padding-top: 100px;
	margin-bottom:250px;
}

.trans {
	color: rgba(0,0,0,0);
}

/**** Services Dashboard ****/
 #services {
        display: flex;
        flex-wrap: wrap;
}

#services .service {
	flex: 31%;
	max-width: 75%;
	border: 1px solid rgba(150, 150, 150, 1);
	margin: 40px 10px 60px 10px;
	position: relative;
	border-radius: 2px;
	box-shadow: 0px 0px 6px darkgray;
	background: rgb(247,255,253);
	background: radial-gradient(circle, rgba(247,255,253,1) 39%, rgba(249,252,221,0.66) 100%);
}

#services .service::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(255, 255, 255, 0);
	/* Initially transparent */
	transition: background-color 0.3s ease;
	/* Add a smooth transition effect */
	pointer-events: none;
	/* Allow interactions with elements beneath the overlay */
}



#services .service:hover::before {
	background-color: rgba(192, 230, 240, 0.15);
	transition: background-color 0.3s ease;
}


#services .service .image {
	width: 100%;
}

#services .service .image img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

#services .service .image .description span {
	display: inline-block;
	text-align: center;
	width: 100%;
	font-weight: bold;
}

#services .service .image .description .product-description {
	min-height: 10px;
	text-align: center;
}

#services .service .description {
	margin: 25px 0;
	min-height: 65px;
}


.entry-content ul#services-page-dash.alignfull {
	padding-left: 14vw;
	padding-right: 14vw;
}

#services-page-dash {
	padding-left: 14vw;
	padding-right: 14vw;
}

#tiles {
	margin-bottom: 100px;
}

@media screen and (max-width: 950px) {
	ul#services-page-dash {
		padding-left: 4vw;
		padding-right: 4vw;
	}
}

@media screen and (max-width: 780px) {
	.text-box {
		margin-left: 60px;
	}
	
}

/*************/
@media screen and (max-width: 700px) {
	
	.dashboard-title {
		font-size: 15vw;
	}
	
	.text-box {
		width: 100%;
	}
	
	.title {
		height: 125px;
		margin-bottom: 0;
	}
	
	.title-nav {
		display: initial;
	}
	
	.title-nav aside {
		transform: initial;
		height: 175px;
	}
	
	aside ul {
		transform: initial;
	}
	
	
	aside ul li a.nav-text div {
		font-size: 6vw;
		line-height: 6vw;
		padding-top: 50px
	}
	
	aside ul li #fifth-nav div, 
	aside ul li #zero-nav div, 
	aside ul li #first-nav div {
		margin-left: 0;
	}
	
}

@media screen and (max-width: 550px) {
	.header-circle {
		top: 20%;
	}
}

@media screen and (max-width: 500px) {
	
	.homepage-cta {
  margin: 75px 5% 100px 5%;
	}
	
	#nav-title {
		font-size: 15vw;
		margin-bottom: 20px;
		margin-top: 20px;
	}
	
	#services .service {
		flex: 99%;
		max-width: 100%;
	}
	
	.title-nav {
		margin-bottom: 60px;
	}
}