@charset "UTF-8";
/* CSS Document */

html {
  scroll-behavior: smooth; padding:0px; margin:0px;
}

#mobile {width:0; height:0; overflow:hidden;}

body {margin:0px; padding:0px;font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
       background-color: black;
	
	 }

h1 {
	text-align: center;
	text-transform: uppercase;
	opacity: 0;
	font-size:3vw; 
	letter-spacing: .19em;
	font-weight: 500; 
	color:white; 
	font-stretch: expanded;
	 animation-name: fadeinout;
	 animation-delay: .75s;
  	animation-duration: 4.5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	margin:0;
}



	#navbar {
	z-index: 1000;
	position:fixed;
	width:100vw;
	height:auto;
	min-height:60px;
	align-items: center;
    justify-items: center;
	margin:0px;
	text-align: center;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	background-color: black;
	opacity:.6;
	border-bottom: solid 2.5px #00A9FE;
}

img {transition: 0.5s;}

 img:hover {
	opacity:.5;
	background-clip: aqua;
	
	border: solid aqua .5em;
}

a {text-decoration: none;}

p {
	font-size: 1.2em;
}

#navbar a {
	font-size:1.5em;
	padding:.5em;
	width:auto;
	height: auto;
	text-decoration: none;
	opacity:1;
	color:grey;
	animation: color 5s infinite;
	transition: 0.5s;
	}

#navbar a:hover {
	font-size:1.75em;
	color:white;
	opacity:1;
	
	}
	
	a:visited {color:black;}
	


 #virtual h1 {grid-column: 2;
	grid-row: 3;
	opacity:0;
	
}

 header {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: absolute;

  right: 0;
  bottom: 0;
 opacity:.2;
 background-color: deeppink;
	 
	 
	 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1400f9+0,3059ff+50,7db9e8+100 */
background: radial-gradient(ellipse at center,  #1400f9 0%,#3059ff 50%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

	 

}

#header, #more-info {
	 display: flex;
	align-items: center;
	padding:1em 0em;
	justify-content: center;
	
	height: 100vh;	
	
}

.bg-gradient {background: radial-gradient(circle, rgba(200,200,200,1) 0%, rgba(150,150,150,1) 67%);}

.bg-blue {
	background-image: url("images/case-studies/cs-bg.jpg");
	background-position:center;
	background-repeat: no-repeat;
	background-size: cover;
	}
#header .link {
	
	padding:1.5em;
	border: solid 2px #00A9FE;
 	background-color: rgba(255, 255, 255, 0.1);
	/*animation-name: stroke;
	animation-delay: 0.5s;
  	animation-duration: 3s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;*/
}

.grey {width: 100%; height:100%; background-color: grey;}
.white {width: 100%; height:100%; background-color: white;}
.blue {width: 100%; height:100%; background-color:darkcyan;}

.textcyan {
	opacity:0;
	color: rgba(0, 0, 0, 0.1);
	font-weight: light; 
	-webkit-text-stroke: 3px darkcyan;
	animation-name: fadein;
	animation-delay: 0.5s;
  	animation-duration: .75s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

.textblack {
	opacity:0; 
	color: rgba(0, 0, 0, 0.4); 
	-webkit-text-stroke: 3px white; 
	animation-name: fadein;
	animation-delay: 1.25s;
  	animation-duration: .75s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

.textcoral {
	opacity:0;
	color: rgba(0, 0, 0, 0.1);
	font-weight: light; 
	-webkit-text-stroke: 3px lightcoral;
	animation-name: fadein;
	animation-delay: 2s;
  	animation-duration: .75s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

.textblue { -webkit-text-stroke: 3px lightcoral;}
.textgrey {-webkit-text-stroke: 3px cornflowerblue;}

.gradient {
	font-weight: bold;
  background: -webkit-linear-gradient(360deg, black, cyan, black, cyan, black);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}






section {
	display:flex; 
	text-align: center;
	
	padding:1em 0em;
	
	margin:1em 0px;
	
}

.case {
	
	display:flex; 
	height: 100vh;
	width:100vw;
	
	align-items: center;
    justify-items: center;
	background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(200,200,200,1) 67%);
}

.grid-four {
	margin:auto;
	width:95vw;
	height: auto;
  	display: grid;
	grid-gap:1em;
	grid-template-columns: repeat(4, 1fr);	
}

.grid-four .border {border: solid white .5em; }

.grid-four p {text-align:left;}

.grid-four img { width:100%; max-width: 900px; }	

.full-span {grid-column: 1 / span 4; grid-row:1; border: solid thin cornflowerblue; margin:0 auto 1em auto; padding:1em; width: 95%;}
.left {grid-column: 1 / span 2; grid-row:2}
.right {grid-column: 3 / span 2; grid-row: 2;padding: 0em 1em; }
.right-hover {grid-column: 3 / span 2; grid-row: 2; padding: 0em 1em; opacity:0; z-index:1000;}

.right-hover:hover {opacity:1; transition: 0.5s;}

.grid-four img:hover {
	opacity:1;
	background-clip: aqua;
	transition: 0.75s;
	border: solid aqua .5em;
	
}

section img { max-width: 300px; border: solid white .5em; background-color:aqua;}
#web {
	height: 100vh;
	display: flex;
	flex-wrap: wrap;
	background-color: cadetblue;
	justify-content: center;
}



#motion {
	 display: flex;
	 flex-wrap: wrap;
	 justify-content: center;
	 background: radial-gradient(circle, rgba(115,115,115,1) 0%, rgba(80,80,80,1) 67%);
}

#design {
	 display: flex;
	 flex-wrap: wrap;
	 justify-content: center;
	 background-color: darkcyan;
}



#circle {
			width:100px;
			height:auto;
			fill:rgba(255,221,0, .8);
			}
	
#circle:hover {
			fill:rgba(25,25,25, .7);
  			animation: rotate 2s 1;
		}
	


.bio {
	display: grid;
	grid-row-gap: 2em;
	grid-template-columns: repeat(4, 1fr);
}




@keyframes rotate {
		50% {transform: rotate(90deg);}
}

@keyframes opacityfull {
	0%   {opacity:0;}	
  	100% {opacity:100;}
	}

@keyframes fadeinout {
	0%   {opacity:0;}	
	20% {opacity:100;}
	80% {opacity:100;}
  	100% {opacity:10;}
	}

@keyframes stroke {
	0%   {border-width:0px;}	
	30% {border-width:1px;}
	70% {border-width:4px;}
  	100% {border-width:2px;}
	}

@keyframes fadein{
	0%   {opacity:0;}	
	/*50%  {opacity:50;}*/
  	100% {opacity:100;}
	}

@keyframes glow {
0% {text-shadow: 0px 0px 5px aqua;}
50% {text-shadow: 0px 0px 20px blue;}
100% {text-shadow: 0px 0px 5px aqua;}
}

@keyframes glow2 {
0% {text-shadow: 0px 0px 10px white;}
50% {text-shadow: 0px 0px 10px orange;}
100% {text-shadow: 0px 0px 10px white;}
}

@keyframes color {
0% {color: white;}
50% {color: cornflowerblue;}
100% {color: white;}
}

@keyframes hovercolor {
	0%   {background-color: #ffdd00;}	
  	100% {background-color: #FFFFFF;}
	}

@keyframes opacity2 {
	0%   {opacity:0.7;}
  50%  {opacity:1;}
  100% {opacity:0.7;}
}











@media only screen and (max-width: 960px) {
	
	
	

	
	#myVideo {
  width: 0;
  height: 0;
  overflow:hidden;
 
}

#header, #more-info {
	width: 100vw;
  height: 100vh;
  overflow:hidden;
}



#navbar a {
	font-size:.9em;
	padding:.2em;
	width:auto;
	height: auto;
	text-decoration: none;
	color:grey;
	
	}

#navbar a:hover {
	font-size:.95em;
	color:white;
	opacity:1;
	transition: 0.5s;
	
	
}


section img { max-width: 150px; border: solid white .5em; background-color:aqua;}



	
	
	
#web {
	
	height:auto;
	

}



#motion {
	height:auto;
}

#design {
	  
	height:auto;
}	
	


	
	h2 {
	opacity: 0;
	font-size:1.5em; 
	letter-spacing: .1em;
	font-weight: 200; 
	margin:10px;
	color:white; 
	font-stretch: expanded;
	 animation-name: fadein;
	 animation-delay: .5s;
  	animation-duration: 1.5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;}
	
	#mobile a {
		
		display: flex;
  justify-content: center;
  align-items: center;
		width: 45vw;
		height: 3em;
		padding:.25em;
		background: radial-gradient(circle, orange, darkorange);
		border-radius: 4px;
		animation-name: opacity2;
 		 animation-duration: 3s;
		animation-iteration-count: infinite;
	}
	#mobile a:hover  {
	opacity:.100;
		box-shadow: 0px 0px 9px white;
	transition: 0.5s;
		
}
	
	.case {
	height: auto;
		width:100vw;
		overflow:hidden;
	background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(200,200,200,1) 67%);
}
.grid-four {
	
	width:100%;
	height: auto;
  	display: grid;
	grid-gap:1em;
	grid-template-columns: repeat(2, 1fr);	
	
}
	
	.full-span {grid-column: 1 / span 2; grid-row:1; padding:.5em; width: 90%;}
	
	
.grid-four img { width:85vw; height:auto; max-width: 920px; }	
	
.left {grid-column: 1 / span 2;;grid-row: 3; padding:2em;}
.right {grid-column: 1 / span 2; grid-row: 2;padding: 0em 0em; text-align:center;}
.right-hover {grid-column: 1 / span 2; grid-row: 2; padding: 0em 0em; opacity:0; z-index:1000;text-align:center;}	
}

.case h1 {font-size:4vw; }