@import url("https://use.typekit.net/rlz6srx.css");
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans&display=swap');

@font-face {
	font-family: Gishella;
	src: url(/fonts/Gishella_Morely.woff);
  }

/*Main Stuff*/
body {
	background-image: linear-gradient(#000000, #17002e, #110022, #0d001a, #1a0133);
	border: 0.5px solid #99b9f5;
	margin:2%;
}

.shape{
	margin-top:10%;
	background-image:url(/images/black_shape.png);
	background-size:cover;
}

html {
	scroll-behavior: smooth;
}

.main-column {
	padding: 5% 18% 5% 18%;
}

.figma-column {
	padding: 0% 12% 8% 12%;
}

.small-section {
	padding: 3% 18% 5.5% 18%;
}

.footer {
	padding: 0% 18% 5% 18%;
}

.full-width-image {
	width: 100%;
	display: block;
}

.full-height {
	height: 100vh;
}

.footer-width-75 {
	width: 75%;
	float: left;
}

.footer-avatar {
	float: right;
}

button:focus {
	outline-style: none;
}

@media only screen and (max-width: 1200px) {
	.footer-width-75 {
		width: 100%;
	}

	.footer-avatar {
		/*float: left;*/
		display: none;
	}

	.footer-avatar img {
		width: 50%;
	}
}

/*Navbar 2*/
#navbar {
  overflow: hidden;
}

#navbar ul {
	list-style-type: none;
	margin: 0;
	padding: 0.6%;
	overflow: hidden;
	/*  background-color: #161616;*/
	background: rgba(16, 0, 27, 0.7);
	backdrop-filter: blur(20px);
	position: sticky;
	top: 5%;
	width: 99.5%;
	border: 0.5px solid #99b9f5;
	z-index: 9999;
}

#navbar li {
	float: left;
	color: #bdbdbd;
	font-family: 'Work Sans', sans-serif;;
	font-style: normal;
	font-weight: 300;
	font-size: 14px;
	line-height: 14px;
	letter-spacing: 0px;
}

#navbar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#navbar li a:hover:not(.active) {
  color: #99b9f5;
}

.active {
	color: #efefef;
	font-weight: 500;
	text-decoration: underline;
}

.above {
	padding:0;
}

.below {
	padding: 0;
}

.sticky {
	position: fixed;
	top: 0%;
	width: 95.9%;
	z-index: 9999;
}

/*Headers*/
h1 {
	color: #efefef;
	font-family: Gishella;
	font-style: normal;
	font-weight: 300;
	font-size: 54px;
	line-height: 64px;
	margin: 40px 0px 0px 0px;
}

.h1-home {
	color: #DEBCFF;
	font-family: Gishella;
	font-style: normal;
	font-weight: 300;
	font-size: 80px;
	line-height: 70px;
	margin: 20px 0px 0px 0px;
}

.h6-home a {
	-moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
	-webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
	-ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
	border-bottom: dotted 1px;
	text-decoration: none;
	color: #efefef;
}

.h6-home a:hover {
	border-bottom-color: transparent;
}

h2 {
	color: #efefef;
	font-family: Gishella;
	font-style: normal;
	font-weight: 300;
	font-size: 36px;
	line-height: 44px;
	margin: 18px 0px 0px 0px;
}

h2 a {
	-moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
	-webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
	-ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
	border-bottom: dotted 1px;
	text-decoration: none;
	color: #efefef;
}

h2 a:hover {
	border-bottom-color: transparent;
}

p a {
	-moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
	-webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
	-ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
	border-bottom: dotted 1px;
	text-decoration: none;
	color: #efefef;
}

p a:hover {
	border-bottom-color: transparent;
}

h4 {
	font-family: Gishella;
	font-style: normal;
	font-weight: 500;
	font-size: 24px;
	line-height: 28px;
	margin: 14px 0px 24px 0px;
	color:#7DACF9;
}

h4 a {
	-moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
	-webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
	-ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
	text-decoration: none;
	color:#7DACF9;
}

h4 a:hover {
	border-bottom-color: transparent;
}

.regular {
	font-weight: 300;
}

/*Sub-headers*/
h5 {
	color: #bdbdbd;
	font-family: 'Work Sans', sans-serif;;
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	line-height: 24px;
	letter-spacing: 1px;
	margin: 0;
}

.h5-dark-text {
	color: #626262;
	font-family: 'Work Sans', sans-serif;;
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 2px;
	margin: 0;
}

.h6-dark-text {
	color: #161616;
	font-family: Gishella;
	font-style: normal;
	font-weight: 300;
	font-size: 20px;
	line-height: 32px;
	margin: 30px 0px 0px 0px;
}

.h6-home {
	color: #efefef;
	font-family: 'Work Sans', sans-serif;;
	font-style: normal;
	font-weight: 300;
	font-size: 18px;
	line-height: 32px;
	margin: 40px 0px 0px 0px;

}

.h6-project {
	color: #efefef;
	font-family: 'Work Sans', sans-serif;
	font-style: normal;
	font-weight: 80;
	font-size: 14px;
	line-height: 24px;
	margin: 40px 0px 0px 0px;

}

.h6-home strong {
	font-weight: 500;
}

/*Body Text*/
p {
	color: #bdbdbd;
	font-family: 'Work Sans', sans-serif;
	font-style: normal;
	font-weight: 300;
	font-size: 16px;
	line-height: 24px;
}

p strong {
	color: #efefef;
	font-weight: 500;
	font-size: 17px;
	line-height: 30px;
}

p b {
	color: #CACACA;
	font-weight: 500;
}

.small {
	font-size: 14px;
	line-height: 22px;
	margin-top: 0px;
}

/*Project Intro Inline Blocks*/
.inline-block {
  white-space: normal;
  font-size: 0;
}
.inline-block:after {
  content: '';
  width: 100%;
  display: inline-block;
}
.inline-block div {
  display: inline-block;
  padding-right: 40px;
}

.inline-content {
	white-space: normal;
	font-size: 0;
}

.inline-content:after {
	content: '';
	width: 100%;
	display: inline-block;
}

.inline-content div {
	display: inline-block;
	padding-right: 10px;
}

/*Split Text Section*/
.split-text-header {
	float: left;
	width: calc(100%*(1/4));
}

.split-text-content {
	float: right;
	width: calc(100%*(3/4));
	padding-top: 10px;
}

.split-text-content p {
	margin-top: 7px;
}

.split-text-content-section {
	float: right;
	width: calc(100%*(3/4));
}

.split-about-left {
	float: left;
	width: calc(100%*(7.5/12));
}

.split-about-right {
	float: right;
	width: calc(100%*(1.2/4));
}

@media only screen and (max-width: 800px) {
    .split-text-content {
        float: none;
        padding-top: 0;
        width: 100%;
    }

    .split-text-content-section {
    	float: none;
    	width: 100%;
    }

    .split-text-header {
    	float: none;
    	width: 100%;
    }
}

@media only screen and (max-width: 1200px) {
	.split-about-left {
    	float:none;
    	width: 100%;
    }

    .split-about-right {
    	float: none;
    	width: 100%;
    	padding-top: 80px;
    }
}

/*Key Takeaways - 2 Equal Columns*/
.column {
  float: left;
  width: calc(100%*(0.95/2));
  padding-right: 10px;
}

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

@media only screen and (max-width: 1200px) {
	.column {
		float: none;
		width: 100%;
	}

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

/*Three Columns Text Image*/
.column-three {
	float: left;
	width: calc(100%*(0.95/3)) !important;
	padding-right: 10px;
}

.column-three img {
	width: 100%;
}

.row-three:after {
	content:"";
	display: table;
	clear: both;
}

@media only screen and (max-width: 1200px) {
	.column-three {
		width: calc(100%*(0.95/2));
		padding-bottom: 20px;
	}
}

@media only screen and (max-width: 800px) {
	.column-three {
		width: 100%;
		padding-bottom: 20px;
	}
}

/*Case Study*/
.case-study {
	padding-top: 9%;
}

@media only screen and (max-width: 1200px) {
	.case-study {
		padding-top: 0;
	}
}

/*Works*/
.works-column-left {
	float: none;
	width: 100%;
}


.works-column-right {
	float: none;
	width: 100%;
	
}

#works {
	padding: 0;
	margin-bottom:5%;
	display:flex;
	border: 0.5px solid #99b9f5;
}

.image-container {
	position: relative;
	width:50%;
}

.information {
	position: relative;
	width:40%;
}



@media only screen and (max-width: 1000px) {
	.works-column-left {
		float: none;
		width: 100%;
	}

	.works-column-right {
		float: none;
		width: 100%;
		padding: 0;
	}
}

/*Two Columns Text Image*/
.split-text-left {
	float: left;
	width: calc(100%*(5/12));
}

.split-text-right {
	float: right;
	width: calc(100%*(5/12));
}

.split-text-case-study {
	float: left;
	width: calc(100%*(7/12));
	padding-right: 4px;
}

.split-image-right {
	float: right;
	width: calc(100%*(1/2));
}

.split-image-left {
	float: left;
	width: calc(100%*(1/2));
}

.split-image-case-study {
	float: right;
	width: calc(100%*(4.5/12));
}

.split-text-footer {
	float: left;
	width: calc(100%*(3/4));
}

@media only screen and (max-width: 1200px) {
	.split-text-left {
		float: none;
		width: 100%;
		padding: 0 !important;
	}

	.split-text-right {
		float: none;
		width: 100%;
		padding: 0 !important;
	}

	.split-image-right {
		float: none;
		width: 100%;
		padding-bottom: 30px;
		padding-top: 0 !important;
	}

	.split-image-left {
		float: none;
		width: 100%;
		padding-bottom: 30px;
		padding-top: 0 !important;
	}

	.split-text-case-study {
		float: none;
		width: 100%;
	}

	.split-image-case-study {
		float: none;
		width: 100%;
	}

	.split-image-case-study img {
		width: 65%;
	}
}

/*Button*/
.button-primary {
	background-color: #C6DFFF;
	border: solid;
	border-width: 2px;
	padding: 10px 32px;
	text-align: center;
	font-family: 'Work Sans', sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 1px;
	color: #070035;
	cursor: pointer;
}

.button-primary:hover {
	background-color: #87bafc;
	border: solid;
	border-width: 2px;
	border-color: #efefef;
	color: #161616;
	transition: 0.2s;
}

.button-works {
	background-color: #ffffff;
	border: solid;
	border-width: 2px;
	border-color: #ffffff;
	border-radius: 32px;
	padding: 8px 32px;
	text-align: center;
	font-family: IBM Plex Sans;
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 2px;
	color: #161616;
	cursor: pointer;
}

/*Back To Top*/
#backToTop {
  position: fixed;
  width: 44px;
  height: 44px;
  opacity: 0;
  bottom: 8%;
  right: 5%;
  z-index: 99;
  border: none;
  background-color: rgba(50, 50, 50, 0.8);
  cursor: pointer;
  padding: 12px;
  border-radius: 50%;
  transition: 0.2s;
}

#backToTop:hover {
	background-color: #325BEC;
	box-shadow: 0px 0px 20px rgba(0, 120, 207, 0.5);
	bottom: 8%;
	width: 54px;
	height: 54px;
	right: 4.7%;
}

#backToTop:active {
	background-color: #1D3279;
}

.social-links {
	float: left;
}

@media only screen and (max-width: 800px) {
	.social-links {
		padding-top: 20px;
	}
}

.button-icon {
	width: 48px;
	height: 48px;
	border: solid;
	border-color: #efefef;
	background-color: #efefef;
	cursor: pointer;
	padding: 10px;
	border-radius: 50%;
	transition: 0.2s;
}

/*Line Element*/
hr.main {
	border: 0;
	height: 0.25px;
	background: #BDBDBD;
}

.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
}

.embed-container iframe, .embed-container object, .embed-container embed {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
}

.google-slides-container{
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 60%;
    overflow: hidden;
}

.google-slides-container iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}