/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

/* Responsive */ 
@media all and (orientation:landscape) { 
	.landscape-only {
	display: none;
	}  
  }
 
 /* Rotate overlay */
 .landscape-only {
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 z-index: 999;
	 background-color: rgba(39,41,52,1);
 }
 
 .rotate-device-pt {
	 top:50%;
	 left:50%;
	 position: absolute;
	 transform:translate(-50%, -50%);
	 color: #fff;
	 text-align: center;
	 font-weight: 500;
	 font-size: 1.5em;
	 width: 85%;
 }

/* Common Styles */

/* Make body full height with no scroll */	  
	body {
		height: 100%;
		margin: 0;
		padding: 0;
		overflow: hidden;
		font-family: 'Ubuntu', sans-serif;
		font-weight: 300;
		background-color: rgba(39,41,52,1);
		line-height: 1.3;
		font-size: 2vh;
	}
	  
	html {
		height: 100%;
	}
	
	a {
		color: #fff;
		text-decoration: none;
	}
	
	a:hover {
		color:#fff;
		text-decoration: none;
	}

/* Full Screen Photo BG */
	.full-bg {
		position: absolute;
		/* The image used */
		  background-image: url("img/bg-img.webp");
		
		  /* Full height */
		  height: 100%;
		  width:100%;
		  
		  /* Postion */
		  top:0;
		  left:0;
		
		  /* Center and scale the image nicely */
		  background-position: center;
		  background-repeat: no-repeat;
		  background-size: cover;
		  
		  z-index: -5;
	}

/* Button Bar */
	.button-bar {
		position: absolute;
		bottom: 3.5em;
		right: 2em;
		z-index: 500;
		display: flex;
		font-weight: 400;
	}
	
	.button-bar-button-group {
		display: flex;
		align-items: center;
	}
	
	.button-bar-button {
		font-size: 1em;
		height: 3.5em;
		width: 3.5em;
		background-color:#fff;
		color:#2b0a3d;
		border-radius:2em;
		text-align: center;
		box-shadow: 1em 1em 1em rgba(0, 0, 0, 0.248);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 3em;
		flex-shrink: 0;
	}
	
	.button-bar-ico {
		height:2.5em;
		width:2.5em;
	}
	
	.button-bar-label {
		color: #fff;
		font-size: 1em;
		margin-left: 1em;
		margin-right: 1.5em;
	}

/* Logo Style and position */
	.logo-cgspade-holder {
		font-size: 1em;
		position: absolute;
		top:3.5em;
		right:3.5em;
	}
	
	.logo-cgspade {
		height: 2.5em;
		width:auto;
	}
	
	.logo-cgi-holder {
		font-size: 1em;
		position: absolute;
		top:3.5em;
		right:3.5em;
	}
	
	.logo-cgi {
		height: 2.5em;
		width:auto;
	}

/* Home Page styles */

/* BG Gradient Overlay  */
	.bg-overlay-grad {
	/* background: rgb(39,41,52); */
	background: linear-gradient(60deg, rgba(39,41,52,1) 25%, rgba(39,41,52,0) 100%);
	width: 100%;
	min-height: 100%;
	margin: auto;
	z-index: -1;
}
/* Title styling and position */
	.left-textholder	{
		position:absolute;
		top:40%;
		transform: translateY(-40%);
		left:3.5em;
		z-index: 100;
		color:#fff;
	}
	.title-left {
		font-size: 4em;
		font-weight: 500;
		width: 90%;
		text-transform: uppercase;
		letter-spacing: 1;
		margin-bottom: 0.381em;
	}
	
	.subtitle-left {
		font-size: 1.618em;
		color: #12aada;
		width:90%;
		letter-spacing: 1;
		margin-bottom: 1em;
	}
	
	.text-left {
		margin-top: 1em;
		width: 35%;
		font-size: 0.9em;
		color: #fff;
		letter-spacing: 1;
	}

/* Level 2 page styles */

/* BG Gradient Overlay  */
.lvl2-bg-overlay-grad {
	/* background: rgb(39,41,52); */
	background: linear-gradient(0deg, rgba(39,41,52,1) 35%, rgba(39,41,52,0.5) 100%);
	width: 100%;
	min-height: 100%;
	margin: auto;
	z-index: -5;
}

.lvl2-left-textholder	{
	position:absolute;
	top:3.5em;
	left:3.5em;
	z-index: 100;
	width:90%;
}

.lvl2-title-left {
	font-size: 4em;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1;
	margin-bottom: 0.381em;
}

.lvl2-subtitle-left {
	font-size: 1.618em;
	color: #fff;
	letter-spacing: 1;
	width: 75%;
}

.presentation-buttons-holder {
	font-size: 1em;
	z-index: 500;
	bottom: 10em;
	width: 100%;
	color: #fff;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	row-gap:5em;
	column-gap:3em;
	margin-top: 5em;
}

.presentation-group {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
}

.presentation-button {
	font-size: 1em;
	height: 6em;
	width: 6em;
	border-radius:6.5em;
	text-align:center;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0.2em solid #fff;
	box-sizing: border-box;
	flex-shrink: 0;
}

.presentation-ico {
	height:4em;
	width:4em;
}

.presentation-label {
	font-size: 1em;
	margin-left: 1em;
	font-weight: 400;
}

.presentation-featured-card {
	background-color: #fff;
	padding: 1em;
	box-shadow: 1em 1em 1em rgba(0, 0, 0, 0.248);
	transform: translateY(-1em);
	border-radius: 2em;
}

.presentation-featured-holder {
	grid-row: 1 / 3;
	grid-column: 3 / span 1;
}

.presentation-featured-color {
	color: #000;
	border-color: #000;
}

  
  /* Sustainability */
  .sus-button-holder {
	font-size: 1em;
	z-index: 500;
	bottom: 10em;
	width: 100%;
	color: #fff;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	margin-top: 5em;
  }
  
  .sus-group {
	  display: flex;
	  align-items: center;
	  margin-right: 2em;
	  margin-top: 5em;
	  flex: 1 1 auto;
  }
  
  .sus-qr-holder {
	  position: absolute;
	  bottom: 3.5em;
	  left: 3.5em;
	  color: #fff;
  }
  
  .sus-qr {
	  height:6em;
	  width:6em;
	  font-size: 1em;
  }
  
  .sus-label {
		font-size: 2em;
		margin-left: 1em;
		font-weight: 400;
	}
  
  .sus-qr-label {
	  font-size: 1em;
	  margin-left: 1em;
	  font-weight: 400;
  }

/* Diagram Positioning */
.diagram-holder {
	position: absolute;
	top: 18%;
	right: 47%;
	z-index: 500;
	font-size: 1em;
	color: #fff;
	z-index: 500;
	text-align: center;
}

.dsvg-m {
	position:absolute;
	width: 11em;
	height: 11em;
	left:3.5em;
}

.dsvg-m-1 {
	top:10em;
}

.dsvg-m-2 {
	top:15.45em;
}

.dsvg-m-b {
	left:2em;
	top:11.25em;
	width:14em;
	height:14em;
}

.dsvg {
	position:absolute;
	width: 18em;
	height: 18em;
	transition:1s ease;
}

.dsvg:hover {
	width:19em;
	height:19em;
	transition:1s ease;
	transform:translate(-0.5em, -0.5em);
}

.dsvg-1 {
}

.dsvg-2 {
	top:18em;
	left:-8em;
}

.dsvg-3 {
	top:18em;
	left:8em;
}

.dtext {
	position: absolute;
	font-weight: 500;
	font-size: 0.9em;
	text-transform: uppercase;
	left:8.5em;
	z-index: 502;
	line-height: 1.2em;
	text-decoration: none;
}

.dtext-1 {
	top:16em;
}

.dtext-2 {
	top:22em;
	left:6.2em;
}

.d-sep {
	position: absolute;
	font-size: 0.2em;
	height: 1em;
	width:18em;
	z-index: 501;
	background-color: #12aada;
	text-align: center;
	left:36em;
	top:90.5em;
}

/* Presentation Page */
#box {
	background-color: #393a3d;
	width: 100%;
	min-height: 100%;
	margin: auto;
}

.responsive-iframe {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

/* Preloader */

/*Styling preloader*/
  .preloader {
	  /*
	  Making the preloader floating over other elements.
	  The preloader is visible by default. 
	  */
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100vw;
	  height: 100vh;
	  z-index: 1000;
	  background-color: rgba(39,41,52,1);
	  transition: 2s;
  }
  
.lds-ellipsis {
	display: inline-block;
	position: absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	width: 80px;
	height: 80px;
  }
  .lds-ellipsis div {
	position: absolute;
	top: 33px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: #fff;
	animation-timing-function: cubic-bezier(0, 1, 1, 0);
  }
  .lds-ellipsis div:nth-child(1) {
	left: 8px;
	animation: lds-ellipsis1 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(2) {
	left: 8px;
	animation: lds-ellipsis2 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(3) {
	left: 32px;
	animation: lds-ellipsis2 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(4) {
	left: 56px;
	animation: lds-ellipsis3 0.6s infinite;
  }
  @keyframes lds-ellipsis1 {
	0% {
	  transform: scale(0);
	}
	100% {
	  transform: scale(1);
	}
  }
  @keyframes lds-ellipsis3 {
	0% {
	  transform: scale(1);
	}
	100% {
	  transform: scale(0);
	}
  }
  @keyframes lds-ellipsis2 {
	0% {
	  transform: translate(0, 0);
	}
	100% {
	  transform: translate(24px, 0);
	}
  }
  
  /* Level 2 Page - Heading Colors */
  
  /* Ideate Page Headings */
  
  .lvl2-nb-color {
	  color: #00D4CF !important;
  }
  
  /* Digital Experiences page*/
  .lvl2-de-color {
	  color: #00B1A1  !important;
  }
  
  /* Your Future Network page*/
  .lvl2-yfn-color {
	  color: #33B469 !important;
  }
  
  /* Sustainability page*/
	.lvl2-sus-color {
		color: #fff !important;
	}
	
/* Offscreen Nav */
.ppt-nav-close {
	position: absolute;
	height: 33%;
	width: 100%;
	bottom: -100%;
	background: linear-gradient(0deg, rgba(39,41,52,1) 10%, rgba(39,41,52,0) 100%);
	z-index: 999;
	transition: 1s;
	opacity: 0;
}

.ppt-nav-open {
	bottom: 0 !important;
	transition: 1s;
	z-index: 999;
	opacity: 1;
}

.ppt-nav-button-bar {
	display: flex;
	position: absolute;
	bottom:3.5em;
	right:3.5em;
	align-items: center;
}

.ppt-nav-menu-button {
	position: absolute;
	right:0;
	bottom:0;
	z-index: 505;
	height: 4.5em;
	width: 4.5em;
	font-size: 1em;
	border-top-left-radius: 5em;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border: none;
	background-color: white;
}

.ppt-nav-menu-button-ico {
	height:2.5em;
	width:2.5em;
	transform: rotate(90deg);
	position: absolute;
	bottom:0.5em;
	left:1.3em;
}

.ppt-nav-toggle {
	width: 2.5em;
	height: 2.5em;
	margin-left: 2.5em;
}

/* Home Logos */
.home-logo-bar {
	display: flex;
	position: absolute;
	bottom:3.5em;
	left:3.5em;
	align-items: center;
	z-index: 505;
	color: #fff;
	justify-content: space-between;
	width: 30em;
	font-size: 1em;
	font-weight: 400;
}

.home-logo-bar-item {
	height:2em;
	display: block;
}

/*Flipbook Styles */
#flipbook-wrapper {
	height: 100vh;
	width: 100vw;
}