

/* ---------------------------------
7. NAVIGATION PROJECT AREA
--------------------------------- */

.navigate-pjkt-area{ padding-top: 70px; }

.navigate-project{ border-radius: 3px; box-shadow: 2px 3px 20px 8px rgba(0,0,0,.2); overflow: hidden; }

.navigate-project .nav-p-btn{ margin-bottom: 5px; transition: all .4s cubic-bezier(.77, .2, .175, 1); color: #AFA256; }

.navigate-project .left-area,
.navigate-project .right-area{ float: left; width: 50%; padding: 50px; position: relative; z-index: 1;
	background-size: cover; background-repeat: no-repeat; display: block; }

.navigate-project .left-area{ text-align: right; padding-left: 120px; }

.navigate-project .right-area{ padding-right: 120px; }

.navigate-project .title{ transition: all .4s cubic-bezier(.77, .2, .175, 1); color: #fff; }

.navigate-project .left-area:after,
.navigate-project .right-area:after{ content:''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
	z-index: -1; transition: all .4s cubic-bezier(.77, .2, .175, 1); background: #232323; }


/* NAVIGATION ICONS */

.next,
.prev{ position: absolute; height: 50px; width: 100px; top: 50%; margin-top: -25px; }

.next{ right: 50px; }
.prev{ left: 50px; }

.prev .left-arrow,
.next .right-arrow{ position: absolute; top: 50%; height: 1px; margin-top: -.5px; background: #fff; 
	transition: all .3s ease-in-out; }

.prev .left-arrow{ left: 15px; right: 10px;  }

.next .right-arrow{ left: 10px; right: 15px;  }	

.prev:before,
.prev:after,
.next:before,
.next:after{ content:''; position: absolute; top: 50%; width: 30%; height: 1px; margin-top: -.5px; 
	transition: all .2s .3s ease-in-out; background: #fff; }

.next:before,
.next:after{ right: 0px; transform-origin: center right; }

.prev:before,
.prev:after{ left: 0px; transform-origin: center left; }

.prev:before,	
.next:after{ transform: rotate(45deg); }

.prev:after,
.next:before{ transform: rotate(-45deg); }


/* HOVER EFFECTS */

.left-area:hover:after,
.right-area:hover:after{ background: rgba(0,0,0,.5); }

.left-area:hover .nav-p-btn,
.right-area:hover .nav-p-btn{ transform: translate3d(0, 10px, 0); }

.right-area:hover .title{ transform: translate3d(15px, 0, 0); }

.left-area:hover .title{ transform: translate3d(-15px, 0, 0); }

.right-area:hover .right-arrow,
.left-area:hover .left-arrow{ left: 0px; right: 0; }

.left-area:hover .prev:before,
.left-area:hover .prev:after,
.right-area:hover .next:before,
.right-area:hover .next:after{ width: 50%; }



