/*Midsection*/
#mid-section {
	display: inline-block;
	overflow-y: hidden;
	margin: auto;
	position: relative;
	width: 700px;
	height: 100vh;
}

#overview {
	box-sizing: border-box;
}

#overviewbox {
	position:absolute;
	height: 100vh;
	width: 100vw;
	display: inline;
	box-sizing: border-box;
	margin: 0;
	left: 0;
	top: 0;
}

@keyframes mid-rollout {
	0% {
		clip-path: polygon(40% 0, 95% 0, 95% 0, 40% 0);
	  -webkit-clip-path: polygon(40% 0, 95% 0, 95% 0, 40% 0);
	}
  100% {
		clip-path: polygon(40% 0, 95% 0, 57% 100%, 5% 100%);
	  -webkit-clip-path: polygon(40% 0, 95% 0, 57% 100%, 5% 100%);
	}

  /*0% {clip-path: polygon(50% 0, 100% 0, 100% 0px, 50% 0px);}
  100% {clip-path: polygon(50% 0, 100% 0, 50% 100%, 0 100%);}*/
}

#back {
	bottom: 20px;
	right: 20px;
	/*position: fixed;*/
	width: 100px;
	height: 100px;
	background-image: url("../img/arrow2.svg");
}

.back {
	cursor: pointer;
	content: "";
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	z-index: 1000;
	transition:
		transform 0.3s;
}

.back:hover {
	transform:
		scale(1.1);
}

.back:active {
	transform:
		scale(0.9);
}

.hiddenback {
	transform:
		translateY(200px);
}

#project-heading {
	background: #101f47;
	background-image: url("../img/stripes.png");
	background-repeat: no-repeat;
	background-position: center;
	top: -5px;
	position: relative;
	margin: 0px;
	padding: 0.1px;
}

#project-heading h1 {
		z-index: 103;
		font-size: 3.35em;
		text-align: center;
		color: #55ddaa;
		transition:
			color 0.3s;
}
#mid-section-bg-wrap {
	position: absolute;
	height: 100vh;
	width: 100vh;
	margin-left: auto;
	margin-right: auto;
	display: flex;
  align-items: stretch;
	top: -100vh;
	/*background-color: red;*/
	z-index: 0;
}
#mid-section-bg {
	content: "";
	opacity: 0.6;
	margin: 0;
	width: 100%;
	height: auto;
	background-attachment: fixed;
	background-position: center;
/*

	background-size: cover;*/
	background-repeat: no-repeat;
	background-position: top;
	background-image: url("../img/me/profilepic4.png");
	background-color: #55ddaaff;
	background-size: contain;
	clip-path: polygon(40% 0, 95% 0, 57% 100%, 5% 100%);
  -webkit-clip-path: polygon(40% 0, 95% 0, 57% 100%, 5% 100%);
	animation-name: mid-rollout;
	animation-duration: 1.5s;
	z-index: 0;
	transition:
		opacity 0.3s;
}

#mid-section-bg:hover {
	opacity: 0.6;
}


/*middle*/
#sigma {
	background-image: url("../img/logo_sigma.svg");
	background-size: cover;
	position: sticky;
	width: 150px;
	height: 150px;
	margin: auto;
	margin-top: 70px;
	z-index: 3;
	transition:
		transform 0.1s;
}

#sigma:hover {
	transform:
		scale(1.3);
}

.transitionbar {
  position: relative;
  background-color: white;
  margin: 0px;
  padding: 0px;
  margin-bottom: 0px;
  top: 0px;
  width: auto;
  height: 200px;
  -webkit-clip-path: polygon(0 100px, 100% 0, 100% 100px, 0 200px);
  clip-path: polygon(0 100px, 100% 0, 100% 100px, 0 200px);
}

#overlay1 {
//height: 1200px;
//-webkit-clip-path: polygon(0 100px, 100% 0, 100% 1100px, 0 1200px);
//clip-path: polygon(0 100px, 100% 0, 100% 1100px, 0 1200px);
height: 2200px;
-webkit-clip-path: polygon(0 100px, 100% 0, 100% 2100px, 0 2200px);
clip-path: polygon(0 100px, 100% 0, 100% 2100px, 0 2200px);
}

#overlay1content {
  position: relative;
  top: 150px;
}


.slidebar {
	width:700px;
}