*,*:before,*:after {
		    	box-sizing: border-box;
		    	margin: 0;
		    	padding: 0
		    }
		    
		    html,body {
		    	height: 100%
		    }
		    
			a {
				text-decoration: none;
			}
			
			img {
				position: absolute;
				left: 5%;
				box-shadow: 0 10px 15px rgba(0,0,0,.2);
			}
			
		    .nav {
		    	overflow: hidden;
		    	position: absolute;
		    	right: 6rem;
		    	top: 2rem;
		    	width: auto;
		    	height: 6.2rem;
		    	background: #fff;
		    	border-radius: 5px;
		    	box-shadow: 0 10px 35px rgba(0,0,0,.2)
		    }
		    
		    .nav__cb {
		    	z-index: -1000;
		    	position: absolute;
		    	left: 0;
		    	top: 0;
		    	opacity: 0;
		    	pointer-events: none
		    }
		    
		    .nav__content {
		    	position: relative;
		    	width: 90px;
		    	height: 100%;
		    	-webkit-transition: width 1s cubic-bezier(.49,-.3,.68,1.23);
		    	transition: width 1s cubic-bezier(.49,-.3,.68,1.23)
		    }
		    
		    .nav__cb:checked~.nav__content {
		    	-webkit-transition: width 1s cubic-bezier(.48,.43,.29,1.3);
		    	transition: width 1s cubic-bezier(.48,.43,.29,1.3);
		    	width: 410px
		    }
		    
		    .nav__items {
		    	position: relative;
		    	width: 410px;
		    	height: 100%;
		    	padding-left: 20px;
		    	padding-right: 110px;
		    	list-style-type: none;
		    	font-size: 0
		    }
		    
		    .nav__item {
		    	display: inline-block;
		    	vertical-align: top;
		    	width: 70px;
		    	text-align: center;
		    	color: #6c7784;
		    	font-size: 14px;
		    	line-height: 80px;
		    	font-family: Helvetica,Arial,sans-serif;
		    	font-weight: 700;
		    	-webkit-perspective: 1000px;
		    	perspective: 1000px;
		    	-webkit-transition: color .3s;
		    	transition: color .3s;
		    	cursor: pointer
		    }
		    
		    .nav__item:hover {
		    	color: #00bdea
		    }
		    
		    .nav__item-text {
		    	display: block;
		    	height: 100%;
		    	-webkit-transform: rotateY(-70deg);
		    	transform: rotateY(-70deg);
		    	opacity: 0;
		    	-webkit-transition: opacity .7s,-webkit-transform .7s cubic-bezier(.48,.43,.7,2.5);
		    	transition: opacity .7s,-webkit-transform .7s cubic-bezier(.48,.43,.7,2.5);
		    	transition: transform .7s cubic-bezier(.48,.43,.7,2.5),opacity .7s;
		    	transition: transform .7s cubic-bezier(.48,.43,.7,2.5),opacity .7s,-webkit-transform .7s cubic-bezier(.48,.43,.7,2.5)
		    }
		    
		    .nav__cb:checked~.nav__content .nav__item-text {
		    	-webkit-transform: rotateY(0);
		    	transform: rotateY(0);
		    	opacity: 1;
		    	-webkit-transition: opacity .2s,-webkit-transform .7s cubic-bezier(.48,.43,.7,2.5);
		    	transition: opacity .2s,-webkit-transform .7s cubic-bezier(.48,.43,.7,2.5);
		    	transition: transform .7s cubic-bezier(.48,.43,.7,2.5),opacity .2s;
		    	transition: transform .7s cubic-bezier(.48,.43,.7,2.5),opacity .2s,-webkit-transform .7s cubic-bezier(.48,.43,.7,2.5)
		    }
		    
		    .nav__item:nth-child(1) .nav__item-text {
		    	-webkit-transition-delay: .3s;
		    	transition-delay: .3s
		    }
		    
		    .nav__cb:checked~.nav__content .nav__item:nth-child(1) .nav__item-text {
		    	-webkit-transition-delay: 0s;
		    	transition-delay: 0s
		    }
		    
		    .nav__item:nth-child(2) .nav__item-text {
		    	-webkit-transition-delay: .2s;
		    	transition-delay: .2s
		    }
		    
		    .nav__cb:checked~.nav__content .nav__item:nth-child(2) .nav__item-text {
		    	-webkit-transition-delay: .1s;
		    	transition-delay: .1s
		    }
		    
		    .nav__item:nth-child(3) .nav__item-text {
		    	-webkit-transition-delay: .1s;
		    	transition-delay: .1s
		    }
		    
		    .nav__cb:checked~.nav__content .nav__item:nth-child(3) .nav__item-text {
		    	-webkit-transition-delay: .2s;
		    	transition-delay: .2s
		    }
		    
		    .nav__item:nth-child(4) .nav__item-text {
		    	-webkit-transition-delay: 0s;
		    	transition-delay: 0s
		    }
		    
		    .nav__cb:checked~.nav__content .nav__item:nth-child(4) .nav__item-text {
		    	-webkit-transition-delay: .3s;
		    	transition-delay: .3s
		    }
		    
		    .nav__btn {
		    	position: absolute;
		    	right: 0;
		    	top: 0;
		    	width: 90px;
		    	height: 90px;
		    	padding: 36px 31px;
		    	cursor: pointer
		    }
		    
		    .nav__btn:before,.nav__btn:after {
		    	content: "";
		    	display: block;
		    	width: 28px;
		    	height: 4px;
		    	border-radius: 2px;
		    	background: #096dd3;
		    	-webkit-transform-origin: 50% 50%;
		    	transform-origin: 50% 50%;
		    	-webkit-transition: background-color .3s,-webkit-transform 1s cubic-bezier(.48,.43,.29,1.3);
		    	transition: background-color .3s,-webkit-transform 1s cubic-bezier(.48,.43,.29,1.3);
		    	transition: transform 1s cubic-bezier(.48,.43,.29,1.3),background-color .3s;
		    	transition: transform 1s cubic-bezier(.48,.43,.29,1.3),background-color .3s,-webkit-transform 1s cubic-bezier(.48,.43,.29,1.3)
		    }
		    
		    .nav__btn:before {
		    	margin-bottom: 10px
		    }
		    
		    .nav__btn:hover:before,.nav__btn:hover:after {
		    	background: #00bdea
		    }
		    
		    .nav__cb:checked~.nav__btn:before {
		    	-webkit-transform: translateY(7px) rotate(-225deg);
		    	transform: translateY(7px) rotate(-225deg)
		    }
		    
		    .nav__cb:checked~.nav__btn:after {
		    	-webkit-transform: translateY(-7px) rotate(225deg);
		    	transform: translateY(-7px) rotate(225deg)
		    }
			
			body {
			  background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #1b2947);
			  background: radial-gradient(220% 105% at top center, #1b2947 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
			  background-attachment: fixed;
			  overflow: hidden;
			}
			
			@keyframes rotate {
			  0% {
			    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
			  }
			  100% {
			    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
			  }
			}
			.stars {
			  transform: perspective(500px);
			  transform-style: preserve-3d;
			  position: absolute;
			  bottom: 0;
			  perspective-origin: 50% 100%;
			  left: 50%;
			  animation: rotate 90s infinite linear;
			}
			
			.star {
			  width: 2px;
			  height: 2px;
			  background: #F7F7B6;
			  position: absolute;
			  top: 0;
			  left: 0;
			  transform-origin: 0 0 -300px;
			  transform: translate3d(0, 0, -300px);
			  backface-visibility: hidden;
			}