/* CSS Document */

.fp-watermark {
	display: none;
}

/* Fonts */

/*
@font-face {
    font-family: 'Circular Std';
    src: url('../fonts/CircularStd-Bold.woff2') format('woff2'),
        url('../fonts/CircularStd-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
*/

@font-face {
    font-family: 'Circular Std Book';
    src: url('../fonts/CircularStd-Book.woff2') format('woff2'),
        url('../fonts/CircularStd-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Circular Std';
    src: url('../fonts/CircularStd-Medium.woff2') format('woff2'),
        url('../fonts/CircularStd-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html {
  font-family: "Circular Std", "Circular Std Book", sans-serif;
	padding: 0;
	margin: 0;
	/* genera; */
	scroll-behavior:smooth;
}

h2 {
	font-family: 'Circular Std';
	color: #88E8DE;
	line-height: 1.2em;
	font-weight: 100;
}

h2 span {
	/* background-color: #0D2144; */
	background-color: rgba(13,33,68,0.8);
	line-height: inherit;
}

h3 {
	font-family: 'Circular Std Book';
	color: #88E8DE;
	font-weight: 100;
	line-height: 1.3em;
}

h3 span {
	background-color: #0D2144;
	line-height: inherit;
}

h2.WSPh2 {
	color: #000;
	
}

h3.WSPh3 {
	color: #000;
	font-size: 1.2em;
}

h2.Sh2 {
	color: #88E8DE;
	
}

h3.Sh3 {
	color: #88E8DE;
	font-size: 1.2em;
}

h2.Company2 {
	color: #0D2144;
	
}

h3.Company3 {
	color: #0D2144;
	font-size: 1.2em;
}

h2.DB {
	color: #0D2144;
}

h3.DB {
	color: #0D2144;
	font-size: 1.2em
}

p.DB {
	color: #0D2144;
}

p.DB span{
	background-color: #0D2144;
	padding: 0 1vw;
	color: #88E8DE;
	font-size: 0.8em
}

p {
	font-family: 'Circular Std Book';
	font-weight: 100;
	line-height: 1.3em;
}

p.CompanyP {
	color: #0D2144;
	font-size: 0.9em;
}

p.CompanyP span{
	color: #88E8DE;
	background-color: #0D2144;
	font-size: 0.9em;
}

.CompanyPEnd {
	padding:0;
	margin: 0;
	line-height: 2em;
	font-size: 2em;
	
}




html {
    font-family: "Circular Std", "Circular Std Book", sans-serif;
	padding: 0;
	margin: 0;
}

body {
	padding: 0;
	margin: 0;
}


#Cybercontent {
	
	width: 100vw;
    height: 100%;
    display: flex;
    flex-direction: column;
	padding: 0;
	margin: 0;
	
}

.hline { width:50vw; height:2px; background: #0D2144 }

/*  Navigation  */


#Hamburger {
	position: fixed;
	z-index: 999;
	right: 0px;
	top: 25px;
	padding: 5px 20px 0 5px;
	background-color: #0D2144;
}

 
#Hamburger img{
	width: 30px;
}

#closehome {
	position: fixed;
	z-index: 999;
	right: 0px;
	top: 25px;
	padding: 5px 20px 0 5px;
	background-color: #0D2144;
}

 
#closehome img{
	width: 30px;
}


/* The side navigation menu */
.sidenav {
  height: 100%; /*100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Stay on top */
  top: 0; /* Stay at the top */
  right: 0;
  background-color: #0D2144;  
	/* background-color: rgba(13,33,68,0.9); */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 80px; /* Place content 60px from the top */
  padding-bottom: 60px; /* Place content 60px from the bottom */
  padding-right: 0px;
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}



.sidenav img{
	width: 40px;
}

/* The navigation menu links */
.sidenav a {
  padding: 0 0 10px 20px;
  text-decoration: none;
  font-size: 1.2em;
  color: #88E8DE;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #DEDEE2;
}

/* Position and style the close button (top right corner) */
.sidenav .Xbox{
  position: absolute;
  top: 25px;
  right: 15px;
	padding: 0;
	background-color: #0D2144;
}



/* Style page content - use this if you want to push the page content to the right when you open the side navigation 
#main {
  transition: margin-left .5s;
  padding: 20px;
}

*/






    /* Upper Nav
	* --------------------------------------- */
	
#menu {
	position: fixed;
	z-index: 500;
	right: 2vw;
	top: 10px;
}


#menu li{
	float: left;
	list-style-type: none;
	text-align: center;
	margin: 0 5px 0 5px;
	border: none;
	padding: 4px 0 6px 0;
	background-color: #88E8DE;
	border-radius: 25px;
}

#menu li a{
	text-decoration: none;
	text-align: center;
	font-size: 0.8em;
	color: #0D2144;
	padding: 20px;

}

#menu li a:hover {
	text-decoration: none;
	color: #88E8DE;

}

/* Change the link color to #111 (black) on hover */
#menu li:hover {
  background-color: #0D2144;
}





/*  Content  */



#section1 {
	background-color: #0D2144;

}

.content {
  position: relative;
  margin: auto;
  /* border: 1px solid #FF5A49; */
  padding: 0;
  z-index: 10;
}

.content4 {
  position: relative;
  margin: 0;
  /* width: 900px;
  border: 1px solid #FF5A49; */
  padding: 0;
}




.Logo {
	  position: relative;
	  top: 10px;
	  padding: 20px 0 0 20px;
	  width: 200px;
}


.ArrowGFX {
	  position: relative;
	  top: 10px;
	  left: 20px;
	  z-index: 200;
	  width: 30px;
	  padding: 0;
}

.video-wrapper {
	overflow: hidden; 
	/*width: 100%;
  	height: 100%;
  	object-fit: cover;
	overflow: hidden;*/
}

video {
	overflow: hidden;
  width: 100%;
  position: absolute;
  object-fit: cover;
  z-index: 0;
	min-height: 700px
}

.Cyberspace {
	margin-left: 5vw;
}

.blurb{
  position: relative;
  width: 500px;
  text-align: left;
  z-index: 11;
  padding-top: 100px;
  /*margin: 0 auto;*/
}

.blurb1{
  position: relative;
  width: 500px;
  text-align: left;
  padding-top: 100px;
  /*margin: 0 auto;*/
}

.space10 {
	height: 10vw;
}

.space5 {
	height: 5vw;
}

.CyberBorder1 {
	position: relative;
	bottom: 0px;
	width: 100%;
	height: 40px;
	z-index: 5;
	background: repeating-linear-gradient(
	  45deg,
	  transparent,
	  transparent 15px,
	  #01FC43 15px,
	  #01FC43 30px
	);
}

#section2 {
	position: relative;
	background-color: #01FC43;

}

#section2 .content {
  position: relative;
  margin: auto;
  /*width: 900px;*/
  /*border: 1px solid #FF5A49;*/
  padding: 0;
  z-index: 10;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #000;
  color: #01FC43;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  	font-family: 'Circular Std Book';
	font-size: 1em;
	font-weight: 100;
	line-height: 1.3em;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
#section2 .active, .collapsible:hover {
  background-color: #333;
}

#section2 .collapsible:after {
  content: '\002B';
  color: #01FC43;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

#section2 .active:after {
  content: "\2212";
}

/* Style the collapsible content. Note: hidden by default */
.WSPcontent {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}


.ExplainerStar {
	position: absolute;
	float: right;
	right: 5vw;
	top: 5vw;
	width: 150px;
}

.DownloadWSP {
	position: absolute;
	float: right;
	right: 5vw;
	bottom: 5vw;
	width: 200px;
	padding-top: 20px;
}


.WSPLogo {
	position: relative;
	padding: 20px 0 20px 0;
	width: 200px;
}

.CyberBorder2 {
	position: relative;
	bottom: 0px;
	width: 100%;
	height: 40px;
	background: repeating-linear-gradient(
	  45deg,
	  transparent,
	  transparent 15px,
	  #0F57EB 15px,
	  #0F57EB 30px
	);
}

#section3 {
	background-color: #0F57EB;
}

.CyberBorder3 {
	position: relative;
	bottom: 0px;
	width: 100%;
	height: 40px;
	background: repeating-linear-gradient(
		45deg,
		#0F57EB,
		#0F57EB 15px,
		#88E8DE 15px,
		#88E8DE 30px);
} 

#section4 {
	background-color: #88E8DE;
	display: flex; /*added*/
    flex-direction: column; /*added*/
}

.CyberBorder4 {
	position: relative;
	bottom: 0px;
	width: 100%;
	height: 40px;
	background: repeating-linear-gradient(
		45deg,
		#0D2144,
		#0D2144 10px,
		#88E8DE 10px,
		#88E8DE 20px);
}

.Staff {
	float:left;
	width: 280px;
	padding-left: 20px;
	padding-right: 20px;
}

.Staff::after {
  content: "";
  clear: both;
  display: table;
}

.StaffC {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible2 {
  background-color: #0D2144;
  color: #88E8DE;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  	font-family: 'Circular Std Book';
	font-size: 1em;
	font-weight: 100;
	line-height: 1.3em;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
#section4 .active, .collapsible2:hover {
  background-color: #333;
}

#section4 .collapsible2:after {
  content: '\002B';
  color: #88E8DE;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

#section4 .active:after {
  content: "\2212";
}

#section5 {
	background-color: #DEDEE2;
	display: flex; /*added*/
    flex-direction: column; /*added*/
}

#section6 { 
	width: 100%;
	background-color: #DEDEE2;
}

.CyberBorder5 {
	position: relative;
	bottom: 0px;
	width: 100%;
	height: 40px;
	background: repeating-linear-gradient(
		45deg,
		#DEDEE2,
		#DEDEE2 10px,
		#0D2144 10px,
		#0D2144 20px);
}



#footer {
	background-color: #0D2144;
}

.FooterLogo {
	  position: relative;
	  top: 10px;
	  padding: 20px 0 20px 0;
	  width: 200px;
}

.Cyberlinks{
	list-style-type: none;
    margin: 0;
    padding: 0;
}

.FooterLink {
	color: #88E8DE;
	font-weight: 100;
	font-size: 0.9em;
	text-decoration: none;
}

.FooterLinkDead {
	color: #88E8DE;
	font-weight: 100;
	font-size: 0.9em;
	text-decoration: line-through;
	opacity: 0.1;
}

.FooterLink:hover {
  text-decoration: underline;
}

.FooterText {
	color: #88E8DE;
	font-weight: 100;
	font-size: 0.9em;
	text-decoration: none;
}


/* R W D — Responsive direction
	* --------------------------------------- */



@media only screen and (max-width: 576px) {
  /* For phones: */
	.content { }
	.Cyberspace{margin-left: 5vw;}
	#menu li{float:none; margin-bottom: 10px;}
	.Logo {padding: 20px 0 20px 20px; top: 60px;}
	.blurb{width: 300px; padding-top: 50px; padding-left: 20px;}
	.blurb1{width: 300px; padding-top: 50px; padding-left: 0px;}
	.CyberBorder1 {height: 30px;background: repeating-linear-gradient(45deg,transparent,transparent 10px,#01FC43 10px,#01FC43 20px);}
	.ArrowGFX {top: 10px; left: 20px; width: 15px; padding-bottom: 50px;}
	/* Section 2 — WSPro */
	#section2 .content {}
	.WSPLogo {width: 200px;}
	.ExplainerStar {position: relative; float: left; padding-bottom: 40px; padding-left: 8vw; top: 5vw; width: 100px;}
	.DownloadWSP {position: relative; float: left; padding-left: 8vw; right: 0; bottom: 5vw;}
	.CyberBorder2 {height: 30px;background: repeating-linear-gradient(45deg,#01FC43,#01FC43 10px,#0F57EB 10px,#0F57EB 20px);}
	/* Section 3 — Partners */
	.CyberBorder3 {height: 30px;background: repeating-linear-gradient(45deg,#0F57EB,#0F57EB 10px,#88E8DE 10px,#88E8DE 20px);}
	/* Section 4 — Company */
	.content4 {}
	.Staff{width: 320px; padding-left: 20px;}
	.CyberBorder4 {height: 30px;background: repeating-linear-gradient(45deg,#0D2144,#0D2144 10px,#88E8DE 10px,#88E8DE 20px);}
	/* Extras */
	
	
	/* Typography */
	h2 {font-size: 1.4em}
	h3 {font-size: 1.2em}
}

@media only screen and (min-width: 577px) {
  /* For desktop: */
	/*
	.sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
	     */
	.content { }
	.Cyberspace{margin-left: 20vw;}
	#menu li{float:left; margin-bottom: 0;}
	.Logo {padding: 20px 0 0 20px; top: 10px;}
	.blurb {width: 500px; padding-top: 100px; padding-left: 0;}
	.blurb1 {width: 500px; padding-top: 100px; padding-left: 0;}
	.CyberBorder {height: 40px;background: repeating-linear-gradient(45deg,transparent,transparent 15px,#01FC43 15px,#01FC43 30px);}
	.ArrowGFX {top: 10px; left: 20px; width: 30px; padding-bottom: 0;}
	/* Section 2 — WSPro */
	#section2 .content {}
	.WSPLogo {width: 300px;}
	.ExplainerStar {position: absolute; float: right; right: 5vw; top: 5vw; width: 150px;}
	.DownloadWSP {position: absolute;float: right;right: 5vw;bottom: 5vw;}
	.CyberBorder2 {height: 40px;background: repeating-linear-gradient(45deg,#01FC43,#01FC43 15px,#0F57EB 15px,#0F57EB 30px);}
	/* Section 3 — Partners */
	.CyberBorder3 {height: 40px;background: repeating-linear-gradient(45deg,#0F57EB,#0F57EB 15px,#88E8DE 15px,#88E8DE 30px);} 
	/* Section 4 — Company */
	.content4 {}
	.Staff{width: 280px; padding-left: 0;}
	.CyberBorder4 {height: 40px;background: repeating-linear-gradient(45deg,#0D2144,#0D2144 10px,#88E8DE 10px,#88E8DE 20px);}
	/* Extras */
	.blurb1{padding-right: 20vw;width: 60vw; max-width: 800px;}

	
	/* Typography */
	h2 {font-size: 1.8em}
	h3 {font-size: 1.6em}
}






