.zipline{
	width: 								100%;
    font-size: 						0.9rem;
    font-family:					'Roboto', sans-serif;
    color: 								white;
	overflow-x: hidden;
	background-color:			rgb(0, 56, 104);
	padding: 							0;
	margin: 							0;
	box-sizing: border-box;
}
.blue{
	color: 								rgb(129, 151, 188)!important ;
}


#header{
	background:           linear-gradient( rgb(0, 42, 79), rgb(0, 56, 104), rgb(0, 56, 104));
	width: 								100%;
	height: 							80vh;
	position: relative;
}

#navigation{
  position:      				absolute;
	top: 									0;
	width: 								100%;
  display: 							-webkit-flex;
  display: 							flex;
}

#navigation .navback{
	opacity: 0.7;
 	transition: opacity .6s;
}
#navigation .navback:hover{
	opacity: 1;
}
#logo{
  margin-left: 1rem;
	padding-bottom: .6rem;
}
#logo img{
	width: 37px;
	height: auto;
}

#navigation .right-bar{
	padding:  						2rem;
  margin-left: 					auto;
	animation: fadeInLeft 1s ease-in-out;
	-webkit-animation:fadeInLeft 1s ease-in-out;
}
#navigation .right-bar .list{
  list-style-type:			none;
  padding:       				0;
  font-size:      			0.8rem;
  display:         			flex;
}
#navigation .list li{
  display: 							block;
  padding: 							1rem;
}
#navigation .list a{
  color:                  inherit;
  text-transform:         uppercase;
	text-decoration: 				none;
	padding-bottom: 				2px;
	border-bottom: 					1px dashed white;
  transition: 						border-bottom 2s;
	-webkit-transition:			border-bottom 2s;
}
#navigation .list a:hover{
	border-bottom: 					1px solid white;
}

#navigation .left-bar{
	padding: 							2rem;
	display: 							-webkit-flex;
  display: 							flex;
	align-items: 					center;
	animation: fadeInRight 1s ease-in-out;
	-webkit-animation:fadeInRight 1s ease-in-out;
}

#navigation .toggle{
	display: none;
	cursor: pointer;
	margin: 2rem;
	text-decoration: none;
	color: rgba(255,255,255,.5);
	border-color: rgba(255,255,255,.1);
	padding: .5rem 1rem;
	font-size: 2rem;
	line-height: 1;
	background-color: transparent;
	border: 1px solid;
	border-radius: .25rem;
	position: absolute;
	z-index: 10;
	top: 0;
	right: 0;
	transition-property: background-color;
	transition-duration: 0.5s;
}
#navigation .toggle:hover{
	background-color: rgba(255,255,255,.5);
}
#header .stars img{
	opacity: 0;
	width: 15px;
	height: auto;
}
#header .stars .star-1{
	position: absolute;
	left: 55%;
	top: 15%;
	animation: fadein 5s 1s infinite;
 	-moz-animation: fadein 5s 1s infinite;
	-webkit-animation: fadein 5s 1s infinite;
  -o-animation: fadein 5s 1s infinite;
}
#header .stars .star-2{
	position: absolute;
	left: 20%;
	top: 20%;
	animation: fadein 4s 1.5s infinite;
 	-moz-animation: fadein 4s 1.5s infinite;
	-webkit-animation: fadein 4s 1.5s infinite;
  -o-animation: fadein 4s 1.5s infinite;
}
#header .stars .star-3{
	position: absolute;
	left: 40%;
	top: 25%;
	animation: fadein 6s 2s infinite;
 	-moz-animation: fadein 6s 2s infinite;
	-webkit-animation: fadein 6s 2s infinite;
  -o-animation: fadein 6s 2s infinite;
}
#header .stars .star-4{
	position: absolute;
	left: 65%;
	top: 40%;
	animation: fadein 4s 2.5s infinite;
 	-moz-animation: fadein 4s 2.5s infinite;
	-webkit-animation: fadein 4s 2.5s infinite;
  -o-animation: fadein 4s 2.5s infinite;
}
#header .stars .star-5{
	position: absolute;
	left: 5%;
	top: 50%;
	animation: fadein 3s 3s infinite;
 	-moz-animation: fadein 3s 3s infinite;
	-webkit-animation: fadein 3s 3s infinite;
  -o-animation: fadein 3s 3s infinite;
}
#header .stars .star-6{
	position: absolute;
	left: 90%;
	top: 35%;
	animation: fadein 5s 3.5s infinite;
 	-moz-animation: fadein 5s 3.5s infinite;
	-webkit-animation: fadein 5s 3.5s infinite;
  -o-animation: fadein 5s 3.5s infinite;
}

#header .z-container{
	width: 100%;
	height: 100%;
	display: 							flex;
  display: 							-webkit-flex;
	flex-direction: 			column;
	justify-content: 			space-between;
  align-items: 					center;
}
#header .bg{
	width: 103vw;
	height: 27vw;
	position: absolute;
	top: 4vw;
	left: 4.9vw;
	background: url(../../i/portfolio/zipline/header-bg.png) top left/contain no-repeat;
}

#header .z-container .end .about-link{
	padding: 2rem;
	display: block;
	position: relative;
	animation: arrowMove 2s 1s infinite;
 	-moz-animation: arrowMove 2s 1s infinite;
	-webkit-animation: arrowMove 2s 1s infinite;
  -o-animation: arrowMove 2s 1s infinite;
}

#header .z-container .gorilla-logo{
	min-width: 150px;
	min-height: 170px;
	margin-top: 8rem;
	background: url(../../i/portfolio/zipline/gorilla-logo.png) center center no-repeat;
	background-size: contain;
	width: 10%;
	height: 40%;
	animation: gorilla-logo 1s;
	-webkit-animation: gorilla-logo 1s;
}
#header .z-container .end h1{
	font-size: 						2.3rem;
	font-weight: 					300;
}
#header .z-container .end h3{
	font-size: 						1rem;
	font-weight: 					200;
	margin: 							0;
}
#header .z-container .end p{
	text-transform: 			uppercase;
	margin: 							0.3rem;
	font-size: 						0.7rem;
	font-weight: 					normal;
}
#header .z-container .end ul{
  list-style-type:			none;
  padding:       				0;
}
#header .z-container .end ul li{
  display: 							inline;
  padding: 							0.5rem;
}
#header .z-container .end ul li a{
  color:                  inherit;
  text-decoration-style:  dashed;
	font-weight: 						normal;
	font-size: 							0.8rem;
}
#header .z-container .end h2{
	margin-top:						2rem;
	text-align: 					center;
	font-weight: 					300;
}

#header .z-container .end{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: auto;
}


#main{
	width: 								100%;
	display: 							flex;
  display: 							-webkit-flex;
	flex-direction: 			column;
  align-items: 					center;
	justify-content:			space-between;

}
#main .gorilla{
	width: 								100%;
	padding:  						6rem 0;
	background: 					url(../../i/portfolio/zipline/gorilla.png) center center no-repeat;
	background-size: 			contain;
	display: 							flex;
	display: 							-webkit-flex;
	align-items: 					center;
  justify-content: 			center;
}
#main .gorilla p{
	width: 700px;
	margin: 							auto;
	text-align: 					center;
	line-height: 					2rem;

	max-width: 90%;
}
#main .browser{
	margin: 							auto;
	width: 								58%;
	height: 							auto;
	background-color: 		rgb(242, 246, 249);
	border-radius: 				1.5rem;
	display: 							flex;
	display: 							-webkit-flex;
	align-items: 					center;
	flex-direction: 			column;
	overflow:auto;
}
#main .browser .bar{
	position: relative;
	top: 0;
	width: 								100%;
	height: 							3vw;
	background-color: 		transparent;
	display: 							flex;
	justify-content: 			space-between;
	align-items: 					center;
}
#main .browser .bar .controls{
	width: 5%;
	height: 40%;
	background: url(../../i/portfolio/zipline/browser-controls.png) left center no-repeat;
	background-size: contain;
	margin: 0 15px;
}
#main .browser .bar .expand{
	width: 2%;
	height: 40%;
	background: url(../../i/portfolio/zipline/expand-icon.png) center center no-repeat;
	background-size: contain;
	margin: 0 15px;
}
#main .browser .bar .input{
	width: 80%;
	background-color: white;
	border-radius: 0.5rem;
	height: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}
#main .browser .animation{
	max-width: 						98%;
	margin: 							0 10px 10px;
}

#about{
	margin-top: 					5rem;
	width: 								100%;
	display: 							flex;
  display: 							-webkit-flex;
	background: 					url(../../i/portfolio/zipline/about-bg.png) center bottom no-repeat;
	background-size: 			contain;
	justify-content: 			center;
	padding: 							0 0 7rem;
}
#about .z-container{
	display: 							flex;
	display: 							-webkit-flex;
	flex-direction: 			column;
	align-items: 					center;
  justify-content: 			center;
	width: 								100%;
}

#about .z-container h3{
	margin: 0;
	font-size: 						1.3rem;
	font-weight: 					400;
}
#about .z-container p{
	width: 700px;
	text-align: 					center;
	line-height: 					2rem;
	margin-bottom: 				5rem;
	max-width: 90%;
}

#mock-up{
	width: 								100%;
	display: 							flex;
  display: 							-webkit-flex;
	position: 						relative;
	flex-direction: 			column;
  align-items: 					center;
	margin-top: 					-8rem;
}
#mock-up .layout{
	position: absolute;
	z-index: 10;
	top: 0;
	width: 50vw;
	height: auto;
	-webkit-box-shadow: 0px 0px 40px 20px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 0px 40px 20px rgba(0,0,0,0.25);
	box-shadow: 0px 0px 40px 20px rgba(0,0,0,0.25);
}
#mock-up .block-0{
	height: 48vw;
	width: 100%;
	opacity: 0;
}
#mock-up .block-1{
	background: url(../../i/portfolio/zipline/block-1-bg.png) center center no-repeat;
	background-size: cover;
	opacity: .05;
	height: 48vw;
	width: 100%;
}
#mock-up .block-2{
	position: relative;
	background: url(../../i/portfolio/zipline/block-2-bg.png) center center no-repeat;
	background-size: cover;
	height: 55vw;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

#mock-up .block-2 .img-1{
	width: 20vw;
	position: absolute;
	top: -8vw;
	left: 5vw;
	z-index: 20;
}
#mock-up .block-2 .img-2{
	width: 15vw;
	position: absolute;
	top: 5vw;
	left: 15vw;
	z-index: 20;
}
#mock-up .block-2 .img-3{
	width: 20vw;
	position: absolute;
	top: -8vw;
	right: 10vw;
	z-index: 20;
}

#mock-up .block-2 .images{
	width: 40vw;
	position: absolute;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	z-index: 15;
	display: flex;
	justify-content: space-around;

}
#mock-up .block-2 img{
	height: auto;
	object-fit: fill;

}

#mock-up .block-2 .img-4{
	width: 21vw;
	height: 11vw;

}
#mock-up .block-2 .img-5-6{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 9.2vw;
}
#mock-up .block-2 .img-5{
	width: 90%;
	height: 5vw;
}
#mock-up .block-2 .img-6{
	width: 90%;
	height: 5vw;
	margin-top: auto;
}
#mock-up .block-2 .img-7{
	width: 6.8vw;
	height: 11vw;
}






#mock-up .block-3{
	background: linear-gradient(rgb(1, 56, 104), rgb(190, 178, 189)) no-repeat;
	background-size: contain;
	height: 49vw;
	width: 100%;
}
#mock-up .block-4{
	display: flex;
	background: url(../../i/portfolio/zipline/block-4-bg.png) center bottom no-repeat, linear-gradient(rgb(190, 178, 189), white 40%, white 80%, transparent 100%);
	background-size: cover;
	height: 49vw;
	width: 100%;
}

#mock-up .block-4 a{
	opacity: 0.7;
	margin: auto auto 3rem;
	display: block;
	bottom: 0;
	color:                  inherit;
	text-decoration: 				none;
	padding-bottom: 				2px;
	border-bottom: 					1px dashed white;
	transition: 						opacity 1s;
}
#mock-up .block-4 a:hover{
	border-bottom: 					1px solid white;
	opacity: 1;
}
#mock-up .end{
	text-align: center;
 	margin-top: 						auto;
 	margin-bottom: 					5rem;
	text-align: 						center;
}
#mock-up .end h1{
	margin:   							4rem 0 1rem;
	font-weight: 						400;
}
#mock-up .end a{
	opacity: 								0.7;
	color:                  inherit;
	text-decoration: 				none;
	padding-bottom: 				2px;
	border-bottom: 					1px dashed white;
	transition: 						opacity 1s;
}
#mock-up .end a:hover{
	border-bottom: 					1px solid white;
	opacity: 1;

}
footer{
	background-color: 		black;
	color: 								rgb(253, 177, 71);
}
footer .z-container{
	display: 							flex;
	display: 							-webkit-flex;
	flex-direction: 			row;
	width: 								58%;
	padding: 							4rem 0;
	margin: 							0 auto;
	align-items: 					center;
  justify-content: 			center;
}
footer .z-container a{
	margin-left: 					auto;
}
footer .z-container h1{
	background: linear-gradient(to right, rgb(253, 177, 71), rgb(253, 141, 34));
 	-webkit-background-clip: text;
 	-webkit-text-fill-color: transparent;
	font-size:								2.5rem;
	font-weight: 							800;
}

#projects{
	background-color: 		white;
	width: 								100%;
	color: 								black;
}
#projects .z-container{
	width: 								58%;
	margin: 0 auto;
	padding: 5rem 0;
}
#projects .z-container h1{
	font-size: 						1.6rem;
	font-weight: 					500;
}
#projects .cards{
	margin-top: 3rem;
	display: 							flex;
	display: 							-webkit-flex;
	flex-direction: 			row;
	flex-wrap: 						wrap;
	justify-content: 			space-between;
}
#projects .cards .card{
	width: 25vw;
}
#projects .card .image{
	display: block;
}
#projects .card .content{
	margin-bottom: 2rem;
}
#projects .card .content h3{
	font-size: 						1.5rem;
	margin: 							1.5rem 0 0.5rem;
}
#projects .card .content a{
	color: 									rgb(255, 154, 70);
	font-size: 							1rem;
	font-weight: 						normal;
	opacity: 								0.7;
	text-decoration: 				none;
	padding-bottom: 				2px;
	border-bottom: 					1px dashed rgb(255, 154, 70);
	transition: 						opacity 1s;
}
#projects .card .content a:hover{
		border-bottom: 					1px solid rgb(253, 183, 102);
		opacity: 1;
}
#projects .card img{
	max-width: 100%;
}

/* Animation Keyframes*/
@keyframes fadein {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}
@-moz-keyframes fadein {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}
@-webkit-keyframes fadein {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}
@-o-keyframes fadein {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes arrowMove {
    0% { top:0; }
    50% { top:20px; }
    100% { top:0; }
}
@-moz-keyframes arrowMove {
    0% { top:0; }
    50% { top:20px; }
    100% { top:0; }
}
@-webkit-keyframes arrowMove {
    0% { top:0; }
    50% { top:20px; }
    100% { top:0; }
}
@-o-keyframes arrowMove {
    0% { top:0; }
    50% { top:20px; }
    100% { top:0; }
}

@keyframes gorilla-logo{
  0% {
      transform: scale(0);
			opacity: 0;
  }
	70%{
		transform: scale(1.1);
		opacity: 0.9;
	}
  100% {
      transform: scale(1.0);
			opacity: 1;
		}
}
@-moz-keyframes gorilla-logo{
	0% {
			-moz-transform: scale(0);
			opacity: 0;
	}
	100% {
			-moz-transform: scale(1.0);
			opacity: 1;
	}
}
@-webkit-keyframes gorilla-logo{
	0% {
			-webkit-transform: scale(0);
			opacity: 0;
	}
	100% {
			-webkit-transform: scale(1.0);
			opacity: 1;
	}
}
@-o-keyframes gorilla-logo{
	0% {
			-o-transform: scale(0);
			opacity: 0;
	}
	100%{
			-o-transform: scale(1.0);
			opacity: 1;
	}
}

@keyframes fadeInLeft {
	0% {
	  opacity: 0;
	  transform: translateX(100px);
	}
	80%{
		opacity: 0.8;
		-webkit-transform: translateX(-10px);
	}
	100% {
	  opacity: 1;
	  transform: translateX(0);
	}
}
@-webkit-keyframes fadeInLeft {
  0% {
     opacity: 0;
     -webkit-transform: translateX(100px);
  }
	80%{
		opacity: 0.8;
		-webkit-transform: translateX(-10px);
	}
  100% {
     opacity: 1;
     -webkit-transform: translateX(0);
  }
}
@keyframes fadeInRight {
	0% {
	  opacity: 0;
	  transform: translateX(-100px);
	}
	80%{
		opacity: 0.8;
		-webkit-transform: translateX(10px);
	}
	100% {
	  opacity: 1;
	  transform: translateX(0);
	}
}
@-webkit-keyframes fadeInRight {
  0% {
     opacity: 0;
     -webkit-transform: translateX(-100px);
  }
	80%{
		opacity: 0.8;
		-webkit-transform: translateX(10px);
	}
  100% {
     opacity: 1;
     -webkit-transform: translateX(0);
  }
}