#head-container-hearingtest{
	position:relative;
	width:100vw;
	height:70vh;
	min-height:700px;
	background: -webkit-linear-gradient(45deg, rgb(26, 5, 109), rgb(168, 44, 243));
	background:linear-gradient(45deg, rgb(26, 5, 109), rgb(168, 44, 243));
	background-size: cover;
	background-repeat:no-repeat;
	box-sizing:border-box;
	background-attachment:fixed;
	overflow:hidden;
}

#head-container-hearingtest-splash{
	position:absolute;
	bottom:-100px;
	left:700px;
	width: calc(649px / 2);
	height:calc(1296px / 2);
	background:url(../assets/images/ios-splash.png);
	background-size:cover;
	
}

#head-container-golfsim{
	position:relative;
	width:100vw;
	height:70vh;
	min-height:700px;
	background:-webkit-linear-gradient(45deg, rgb(2, 86, 145), rgb(57, 255, 238));
	background:linear-gradient(45deg, rgb(2, 86, 145), rgb(57, 255, 238));
	background-size: cover;
	background-repeat:no-repeat;
	box-sizing:border-box;
	background-attachment:fixed;
	overflow:hidden;
}

#head-container-golfsim-splash{
	position:absolute;
	bottom:-50px;
	left:700px;
	width: calc(923px / 1.25);
	height:calc(670px / 1.25);
	background:url(../assets/images/golf_splash.png);
	background-size:cover;
}

#head-container-moti{
	position:relative;
	width:100vw;
	height:70vh;
	min-height:700px;
	background: -webkit-linear-gradient(45deg, rgb(145, 22, 22), rgb(255, 192, 73));
	background: linear-gradient(45deg, rgb(145, 22, 22), rgb(255, 192, 73));
	background-size: cover;
	box-sizing:border-box;
	background-attachment:fixed;
	overflow:hidden;
}

#head-container-moti-splash{
	position:absolute;
	bottom:-80px;
	left:700px;
	width: calc(994px / 1.25);
	height:calc(807px / 1.25);
	background:url(../assets/images/moti_splash.png);
	background-size:cover;
}

#head-container-posti{
	position:relative;
	width:100vw;
	height:70vh;
	min-height:700px;
	background: -webkit-linear-gradient(45deg, rgb(215, 50, 50), rgb(242, 243, 193));
	background: linear-gradient(45deg, rgb(215, 50, 50), rgb(242, 243, 193));
	background-size: cover;
	background-repeat:no-repeat;
	background-position: 0% 70%;
	box-sizing:border-box;
	background-attachment:fixed;
	overflow:hidden;
}

#head-container-posti-splash{
	position:absolute;
	bottom:-80px;
	left:550px;
	width: calc(994px / 1.25);
	height:calc(807px / 1.25);
	background:url(../assets/images/posti_splash.png);
	background-size:cover;
}

#head-container-other{
	position:relative;
	width:100vw;
	height:70vh;
	min-height:700px;
	background:-webkit-linear-gradient(155deg, rgb(235, 189, 121), rgb(231, 157, 103) 50%, rgb(235, 189, 121) 50%, rgb(231, 157, 103) 100%);
	background:linear-gradient(155deg, rgb(235, 189, 121), rgb(231, 157, 103) 50%, rgb(235, 189, 121) 50%, rgb(231, 157, 103) 100%);
	background-size: cover;
	background-repeat:no-repeat;
	box-sizing:border-box;
	overflow:hidden;
/* 	background-attachment:fixed; */
}

#head-container-other-splash{
	position:absolute;
	bottom:-80px;
	left:550px;
	width: calc(1005px / 1.35);
	height:calc(977px / 1.35);
	background:url(../assets/images/other_splash.png);
	background-size:cover;
}

#cardsort{
	position:relative;
	display:inline-block;
	width:90%;
	max-width:600px;
	height:300px;
	background:url('../assets/images/cardsorting.jpg');
	background-size:contain;
	background-repeat:no-repeat;
	rotate: 3deg;
}
#profile-description-tape {
	position:absolute;
	top:-25px;
	left:50%;
	transform:translate(-50%,0);
	width:300px;
	height:50px;
	background: url('../assets/images/tape.png');
	background-size:contain;
	background-repeat:no-repeat;
}
#other-flappy{
	background:url('../assets/images/flappy.png');
	background-size:contain;
	background-repeat:no-repeat;
    background-position: 50% 50%;
}

#other-tetris{
	background:url('../assets/images/tetris.png');
	background-size:contain;
	background-repeat:no-repeat;
    background-position: 50% 50%;
}

#other-1{
	background: rgb(33 33 33);
	padding: 25px;
	position: relative;
	top: -10px;
	left: -10px;
	color: white;
	text-align:center;
}
#other-2{
	background: rgb(10 71 101);
	padding: 25px;
	position: relative;
	top: -10px;
	left: 10px;
	color: white;
	text-align:center;
	margin-top:50px;
}

.project-name{
	position:absolute;
	top:300px;
	left:100px;
	font-family:alexandria;
	font-size:50px;
	padding:10px;
	color:white;
}

.content-wrapper-fixed{
	max-width:1100px;
	margin-left:auto;
	margin-right:auto;
	padding-top:50px;
	padding-bottom:50px;
	padding-left:15px;
	padding-right:15px;
	font-size:18px;
	font-family:ubuntu light;
 
}

.project-image{
	border-radius:10px;
	border:solid 3px white;
}

#window{
	border-radius:10px;
	border: solid 5px orange;
}
#controls{
	max-width:400px;

}

#ios-splash{
	background: url('../assets/images/ios-splash.png');
	background-size: 100% auto;
	width:350px;
	height:450px;
	display:inline-block;
	vertical-align:bottom;
}
#golfsim-splash{
	background: url('../assets/images/golfsim-splash.png');
	background-size: 100% auto;
	width:650px;
	height:350px;
	display:inline-block;
	vertical-align:top;
	background-repeat:no-repeat;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-10%);

}

#golfsim-header-text{
	text-align:left;
	position:absolute;
	top:0;
	left:0;

	font-size:50px;
	z-index:3;

}

#iframe-window{
	display:none;
}
#project-iframe{
}


.project-icon-container{
	position:relative;
	width:75px;
	height:75px;
	border: 3px solid gray;
	border-radius: 10px;
	padding:5px;
	margin-left:auto;
	margin-right:auto;
}

.project-icon{
	width:100%;
	height:100%;
	filter: invert(100%);
}

.project-selector{
	display:inline-block;
	vertical-align:top;
	max-width:100px;
	cursor: pointer;
	text-align:center;
	line-height:1em;
	border: 2px solid rgba(0,0,0,0);
	
}

.project-selector:hover{
	border: 2px solid lightgray;
	border-radius:5px;
}

.project-title-1{
	text-align:center;
	font-size:50px;
}

.project-title-2{
	text-align:center;
	font-size:55px;
}

.project-title-3{
	text-align:center;
	font-size:40px;
}

.overview-description{
	margin-left:auto;
	margin-right:auto;
	max-width:700px;
	font-size:22px;
}

.overview-stack{
	text-align:center;
	font-size:20px;
	font-family:alexandria;
}

.overview-stack-item{
	padding:3px;
	border-radius:5px;
	color:black;
	margin-right:5px;
}

.swift, .xcode, .xctest{
	color:white;
	border-radius:5px;
	font-size:18px;
	padding:2px;
}


.swift{
	background:rgb(0,220,200);

}

.xcode{
	background:rgb(0,180,200);
}

.xctest{
	background:rgb(0,180,140);
}

.javascript{
	background:orange;
}

.cplusplus{
	background: rgb(255,144,44);
}

.sfml{
	background: rgb(255,94,44);
}

.vs{
	background: rgb(252,194,0);
}

.cplustest{
	background: rgb(235,215,124);
}

.figma{
	background: rgb(10,186,181);
}
.balsamiq{
	background: rgb(120,126,181);
}

.drawio{
	background: rgb(0,183,235);
}


/* -------------------------- target users -----------------------*/

.target-user{
	width:100%;
	max-width:400px;
	text-align:left;
	display:inline-block;
	padding:10px;
	box-sizing:border-box;
	vertical-align:top;
	margin-top:20px;
	margin-left:20px;
	border-radius:35px;
	background:rgb(231, 231, 231);
}

.user-description{
	text-align:left;
}

.user-title{
	font-size:35px;
	line-height:.9em;
	color: rgb(255,50,140);
}
.user-icon{
	width:50px;
	height:50px;
}


#ios-persona{
	filter: invert(100%) contrast(150%);
}

#golf-persona{
	background:rgb(50,100,150);
}




/* ------------ requirements ----------------*/
.requirement-title{
	font-size:25px;
	color: #22AED1;

}

.requirement{
	margin-left:20px;
}

.requirement-num{
	color:#AFA98D;
}



.summary-title{
	font-size:30px;
	color:rgb(255,50,140);
}

.summary-title-2{
	font-size:30px;
	color:rgb(255,50,140);
	color:rgb(80,230,180);
}



/* -------------- ios slideshow -------------*/

.wireframe-container{
	position:relative;
	display:inline-block;
	text-align:center;
	width:100%;
	max-width:350px;
	vertical-align:top;
}

#ios-slideshow-container{
	position:relative;
	top:-70px;
	left:-50px;
	width: 436px;
	height: 867px;
	overflow:hidden;
	scale:.75;
	border:5px solid white;
	border-radius:50px;
}

#ios-slideshow{
	overflow:hidden;
	position:absolute;
	left:0;
	top:0;
	width:500%;
	height:100%;
	animation: ios-slideshow 10s ease-in-out infinite;
}
#ios-slideshow-overlay{
	position:absolute;
	left:0;
	top:0;
	z-index:5;
}

#ios-slide-1, #ios-slide-2, #ios-slide-3, #ios-slide-4, #ios-slide-5{
	position:absolute;
	top:0;
}

#ios-slide-1{
	left:0;
}
#ios-slide-2{
	left:436px;
}
#ios-slide-3{
	left:872px;
}
#ios-slide-4{
	left:1308px;
}
#ios-slide-5{
	left:1744px;
}

@keyframes ios-slideshow{
	0%{left:0;}
	10%{left:-100%;}
	20%{left:-100%;}
	30%{left:-200%;}
	40%{left:-200%;}
	50%{left:-300%;}
	60%{left:-300%;}
	70%{left:-400%;}
	80%{left:-400%;}
	90%{left:0;}
	100%{left:0;}
}

#ios-highfid-container{
	display:inline-block;
	vertical-align:top;
	scale: .7;
	width: 436px;
	height: 867px;
}

#ios-lowfid{
	position:absolute;
	top:-90px;
	left:-60px;
	border: 3px solid darkgray;
}
#ios-highfid{
	position:absolute;
	left:-30px;
	top:-80px;
	border: 3px solid darkgray;
	scale: 1.03;
	opacity: 1;
}

#ios-end{
 float:left;
}

/* ___________________________  3D axis demo  __________________________________ */

	.axiz-wrapper {
		position:relative;
		float:right;
		width:250px;
		justify-content: center;
		align-items: center;
		height: 100vh;
		margin: 0;
		perspective: 1000px;
		background:black;
		border:5px solid white;
    }

    .axis-container {
		width: 250px;
		height: 250px;
		position: relative;
		transform-style: preserve-3d;
		transition: transform 0.5s ease;
		animation: rotateY 10s linear infinite;
    }

    .axis {
      position: absolute;
      width: 5px;
      background-color: #3498db;
      transform-origin: bottom;
    }

    .axis-label {
		left:50%;
		top:50%;
		font-family:raleway;
		font-weight:bold;
		position: absolute;
		color: white;
		font-size: 24px;
		transform-origin: 100% 100%;
    }

    .x-axis {
		height: 150px;
		left:50%;
		top:50%;
		transform:  translate3d(calc(-50% - 75px), calc(-50% - 75px), 0) rotateZ(90deg) ;
		background-color: #e74c3c;
    }

    .y-axis {
		left:50%;
		top:50%;
		transform: translate3d(-50%, -50%, 0);
		height: 150px;
		background-color: #2ecc71;
    }

    .z-axis {
		left:50%;
		top:50%;
		height: 150px;
		transform: translate3d(-50%, calc(-50% - 75px), 75px) rotateX(90deg) ;
		background-color: rgb(50,150,180);
    }

    .axis-container:hover {
      transform: rotateX(30deg) rotateY(30deg);
    }
	
	@keyframes rotateY {
      0% {
        transform:  rotateY(0deg) rotateX(-0deg);
      }
	  50% {
        transform:  rotateY(180deg) rotateX(-25deg) ;
      }
      100% {
        transform:  rotateY(360deg) rotateX(-0deg);
      }
    }


@media screen and (max-width: 720px){
	
	#head-container-hearingtest-splash{
		width: calc(649px / 2.5);
		height:calc(1296px / 2.5);
		bottom:-120px;
		left:50%;
		transform: translate(-50%,0);
	}
	
	#head-container-golfsim-splash{
		bottom:-50px;
		left:50%;
		transform: translate(-50%,0);
		width: calc(923px / 1.95);
		height:calc(670px / 1.95);
	}
	
	#head-container-moti-splash{
		bottom:-60px;
		left:50%;
		transform: translate(-50%,0);
		width: calc(994px / 1.65);
		height:calc(807px / 1.65);
	}
	
	#head-container-posti-splash{
		bottom:-80px;
		left:50%;
		transform: translate(-50%,0);
		width: calc(994px / 1.65);
		height:calc(807px / 1.65);
	}

	#head-container-other-splash{
		position:absolute;
		bottom:-80px;
		left:50%;
		transform: translate(-50%,0);
		width: calc(1005px / 1.85);
		height:calc(977px / 1.85);
	}
	
	#ios-end{
		float:initial;
	}
	
	.project-name{
		position:absolute;
		top:150px;
		left:20px;
		font-family:alexandria;
		font-size:40px;
		padding:10px;
	}
	
	.target-user{
		margin-left:0;
	}
	
	#other-1, #other-2{
		padding: 5px;
		position: relative;
		top: 0px;
		left: 0px;
		margin-top:0;
	}
}