@import url('https://fonts.googleapis.com/css?family=Montserrat');

body {
  margin: 0;
  padding: 0;
	overflow: hidden;
}

.menu {
  position: fixed;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  width: 10%;
  padding: 0;
  text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
 }

a {
  text-decoration: none;
}


.menu i {
  font-size: 32px;
}

.menu a {
  margin: 30px 0;
}

.page {
  position: absolute;
  height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

#p1 {
	width: 100%;
	background: darkslateblue;
	left: 0;
}

#p2 {
	background: tomato;
}

#p3 {
	background: deeppink;
}

#p4 {
	background: rebeccapurple;
}

#p2, #p3, #p4 {
	width: 90%;
  left: 10%;
	transform: translateX(190%);
}

.menu a {
  transition: all .5s ease-out;
	color: #fff;
}

.menu a:hover {
  opacity: 0.5;
}

.page {
	font-family: 'Montserrat', sans-serif;
	color: #fff;
}

.page i {
	font-size: 80px;
}

.page h2 {
	font-size: 36px;
	line-height: 2;
}

.page span {
	font-size: 17px;
}

.page {
	transition: all .6s cubic-bezier(.5, .2, .2, 1.1); 
}

#t2:target #p2,
#t3:target #p3,
#t4:target #p4 {
  transform: translateX(0%);
  transition-delay: .4s !important;
}

#t2:target #p1, 
#t3:target #p1,
#t4:target #p1 {
  background: black;
	filter: blur(3px)
}

#t2:target .menu a,
#t3:target .menu a,
#t4:target .menu a {
  transform: scale(.6);
  transition-delay: .25s;
}

#t2:target .menu .two,
#t3:target .menu .three,
#t4:target .menu .four {
  transform: scale(1.2);
}

.page span a {
  color: yellow;
  transition: all 250ms ease-out;
}

.page span a:hover {
  color: #FFF;
}

.page .wrap {
	width: 50%;
  transform: translateX(200%);
  transition: all .5s cubic-bezier(.25, 1, .5, 1.25);
}

.page#p1 .wrap {
  transform: translateX(0%);
}

#t2:target .page#p2 .wrap,
#t3:target .page#p3 .wrap,
#t4:target .page#p4 .wrap {
  transform: translateX(0);
  transition-delay: 1s;
}