@media (orientation:landscape) and (min-width: 50em){
	.project h3{
		margin:0 1vh 5vh 1vh;
		font-size:1vw;
	}

	.prjright{
		float:right;
	}

	.prjleft{
		clear:right;
		float:left;
		margin-right:5vw;
	}

	.project{
		border-radius: 0 5vw 0 5vw;
		width: 80vh;
		max-width: 45vw;
		height: 45vh;
		max-height: 30vw;
		margin-left: 5vw;
		margin-top:12vh;

	}

	/*
	/* Fixed 9:16 aspect ratio
	width: 80vh;
	max-width: 45vw;
	height: 45vh;
	max-height: 30vw;

	/*for after
	width: 83.55vh;
	max-width: 47vw;
	height: 47vh;
	max-height: 26.43vw;
	*/

	.project_wrapper{
		margin-top: -1vh;
		width:57vw;
		height:80vh;
	}

	.prjleft{
		border-radius: 7vw 0 0 7vw;
	}

	.prjright{
		border-radius: 0 7vw 7vw 0;
	}

	#timeline_top{
		border-radius: 0 0 0 7vw;
	}

	#timeline_bottom_left{
		border-radius: 7vw 0 0 0;
		border-bottom: 0;
		margin-bottom: -15vh;
	}

	#timeline_bottom_right{
		border-radius: 0 7vw 0 0;
		border-bottom: 0;
		margin-bottom: -15vh;
	}

	#timeline_top_spacer{
		height:10vh;
		margin-left:15vw;
		border-radius: 0 0 7vw 0;
		border-right: 1vh solid #D9CEB1;
		border-bottom: 1vh solid #D9CEB1;
	}



	.project:after{
		border-radius: 0 7vw 0 7vw;
		border: 2vw solid #C9E4ED;

		width: 82vh;
		max-width: 47vw;
		height: 48vh;
		max-height: 34vw;

	}

	.project:hover{
		transform:scale(1.05);
	}

	.proj_title{
		margin-top:5vh;
		margin-bottom:1vh;
	}

	.work_ex h3, .work_ex h4{
		display:inline-block;
	}

	.timeline_date_left, .timeline_date_right{
		/* margin-top: -6.5vh; */
		margin-top: -18.5vh;
		font-size:48pt;
	}


	.splash_anim {
		background: #E8E8E8;
		border-radius: 1vw;
		display: inline;
		text-align: center;
		position: absolute;
		width:15vw;
		height:20vw;
		border:1px solid grey;
		opacity: 0;
		z-index:5;
		transition: 1s;
	}

	.splash_anim img{
		height:13vw;
		width:13vw;
		position: absolute;
		top:1vw;
		left:1vw;
		border:2px solid black;
		object-fit: cover;
	}

	.project:hover .splash_anim, .splash_anim:hover{
		opacity: 1;
	}


	.prjleft .a1{
		transform: rotate(10deg);
		top:0;
		right:-22%;
	}
	.prjleft .a2{
		transform: rotate(35deg);
		top:15%;
		right:-27.5%;
	}
	.prjleft .a3{
		transform: rotate(60deg);
		top:32%;
		right:-28.5%;
	}

	.prjright .a1{
		transform: rotate(-10deg);
		top:0;
		left:-27%;
	}
	.prjright .a2{
		transform: rotate(-35deg);
		top:15%;
		left:-32.5%;
	}
	.prjright .a3{
		transform: rotate(-60deg);
		top:32%;
		left:-33.5%;
	}

	.project ul{
		grid-area:content;
		margin-left:4vw;
		margin-right:2vw;
		margin-top:2vh;
		line-height: 1;
		font-size: 1.35vmax;
		text-align:justify;
		display:flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.a1{
		transition-delay: 0;
	}

	.a2{
		transition-delay: 0.2s;
	}

	.a3{
		transition-delay: 0.4s;
	}


}

@media (orientation:portrait), (max-width: 50em) {

	.proj_title, h4, .work_ex_list, .work_ex_list li, .project h3{
		text-align:center;
	}

	.work_ex_listf, .work_ex_list li{
		list-style:none;
	}

	.proj_title{
		font-size:4vw;
	}

	.project h3{
		margin:0;
		padding-top: 0.5vh;
		padding-bottom: 0.5vh;
		font-size:2.5vw;
		display:block;
	}

	.project{
		width:80vw;
		border-radius: 0 10vw 0 10vw;
		height:30vh;
		margin-left: 2vw;
		margin-top:8.5vh;
	}

	.project:after{
		width:80vw;
		border-radius: 0 12vw 0 12vw;
		height:30vh;
		border: 4vw solid #C9E4ED;
	}

	.work_ex{
		background-color:#A2C5D8;
		margin-top:5vh;
		padding: 2vh 0 4vh 0;
		border-radius: 0 5vh 0 5vh;
	}

	.proj_title{
		margin:0;
		padding:0;
	}

	.project_wrapper{
		margin-top: -1vh;
		width:57vw;
		height:48vh;
	}

	.prjleft{
		border-radius: 12vw 0 0 12vw;
	}

	.prjright{
		border-radius: 0 12vw 12vw 0;
		margin-left:30vw;
	}
	.prjright .project{
		margin-left:-30vw;
	}

	.project ul{
		grid-area:content;
		margin-left:8vw;
		margin-right:2vw;
		margin-top:1vh;
		display:flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.project ul li{
		margin:0;
		padding-left:0;
		font-size: 3.2vmin;
		line-height: 1.5;
	}

	.prjright .project ul{
		margin-left:0;
		margin-right:1vw;
	}

	#timeline_top{
		border-radius: 0 0 0 10vw;
	}

	#timeline_bottom_left{
		border-radius: 10vw 0 0 0;
		border-bottom: 0;
		margin-bottom: -5vh;
	}

	#timeline_bottom_right{
		border-radius: 0 10vw 0 0;
		border-bottom: 0;
		margin-bottom: -5vh;
	}

	#timeline_top_spacer{
		height:10vh;
		margin-left:15vw;
		border-radius: 0 0 7vw 0;
		border-right: 1vh solid #D9CEB1;
		border-bottom: 1vh solid #D9CEB1;
	}

	.timeline_date_left, .timeline_date_right{
		margin-top: -5vh;
		font-size:36pt;
	}

	.splash_anim{
		display: none;
	}


}

.project{
	background-color:#A2C5D8;
	border: 5px solid #C9E4ED;
	padding:1vw;
	margin-right: 1vw;
	position:relative;
	transition: 0.8s;

	display:grid;
	grid-template-areas:	"head"
							"content"
							"tech";
	grid-template-rows: 2fr 10fr 2fr;
}

.project:after{
	content:"";
	position:absolute;
	top:-2vw;
	left:-2vw;
	margin:0;
	z-index:0;
}

.project_wrapper{
	border-top: 1vh solid #D9CEB1;
	border-bottom: 1vh solid #D9CEB1;
	z-index: 5;
	position: relative;
}

.prjleft{
	border-left: 1vh solid #D9CEB1;
}

.prjright{
	border-right: 1vh solid #D9CEB1;
}

.prjright .project ul{
	list-style-position: inside;
	/*text-align: right;*/
}

.project p{
	grid-area:content;
	margin-left:2vw;
	margin-right:2vw;
	margin-top:4vh;
	font-size: 2.2vmin;
	line-height:2;
	text-align:justify;
}

.project .fig{
	float:right;
	width:30%;
	margin:2vh 2vw;
	max-height:100%;
	border-radius: 0 3vw 0 3vw;
}


.project h2, .project h3{
	text-align:center;
	margin-top:2vh;
	background-color:#D9CEB1;
	color:#45515C;
	font-weight:lighter;
}

.project h2{
	grid-area:head;
	font-size:2.5vw;
	margin:2vh -1vw 1vh -1vw;
}

.project h3{
	grid-area:tech;
	color:#45515C;
	font-family:'Inconsolata',monospace;
	line-height: 2.5vw;
	margin:1vh -1vw 2vh -1vw;
	padding-left:2.5vw;
	padding-right:2.5vw;
}

.project ul li{
	display:list-item;
	overflow: visible;
}
.projects ul{
	list-style: circle;
}

#projects_main{
	margin-top:-5vh;
}


.timeline_date_left, .timeline_date_right{
	position: absolute;
	border-radius: 1vh;
	padding:2vh;
	color:#45515C;
	background-color: #D9CEB1;
	text-transform:uppercase;
	font-family: 'Muli',sans-serif;
	text-decoration:none;
	z-index:5;
}

.timeline_date_right{
	right:10vw;
	text-align:right;
}

.timeline_date_left{
	left:10vw;
	text-align:left;
}

.prjleft:after, .prjright:after{
	position:absolute;
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-bottom: 25px solid transparent;
	content:"";
}

.prjleft:after{
	left:0;
	top:45%;
	border-left: 40px solid #D9CEB1;
}

.prjright:after{
	right:0;
	top:45%;
	border-right: 40px solid #D9CEB1;
}

@keyframes scroll{
	0%{
		background-position: 0
	}
	100%{
		background-position: 412px;
	}
}