#gf-main>section#gf-projects{
	overflow-y:hidden;
}
#gf-projects{
	transform-style: preserve-3d;
	perspective: 1200px;
	overflow:hidden;
	&.gf-showall{
		#gf-projects-drag{
			// transform: translate3d(0,0,-100em);
			// transform: translate3d(-50%,-50%,0);
			width:50%;
			height:50%;
			// top:25%;
			// left:25%;
		}
		#gf-projects-wraper{
			// transform: translate3d(0,0,-100em);
			box-shadow:  0 0 50px rgba(0,0,0,0.2);
		}
		.gf-project-holder:not(.active){
			opacity:0.4;

		}
		.gf-project-holder{
			.gf-project-info{ 
				opacity:0;
				transition: opacity 0.3s ease;
			}
		}
		.gf-project-holder.active{
			.gf-project-title{
				opacity:1;
				transform: translateY(0);
			}
		}
		
	}// end of gf-showall
	// &.gf-showall.gf-leave{
	// 	#gf-projects-drag{

	// 	}
	// }
	&.gf-leave, &.gf-showall.gf-leave{
		#gf-projects-drag-wrap{
			transition: transform 0.5s ease-in,
				visibility 0s 0.9s;

			transform: translate3d(0,-105%,0);
			visibility: hidden;
		}
		#gf-projects-switch{
			display:none;
		}
	}

}

#guide-overlay{
	.info {
		text-align: center;
		position: absolute;
		top: 50%;
		left: 0;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		text-transform: uppercase;
		font-weight: 700;
		letter-spacing: 1px;
		font-size: 80%;
		width: 100%;
		span {
				display: inline-block;
				width: 180px;
				height: 180px;
				padding: 10px;
				margin: 4px;
				text-align: center;
				vertical-align: top;
				background-size: 75%;
				background-color: rgba(52,73,94,0.7);
				background-repeat: no-repeat;
				background-position: 50% 85%;
			}
	}

	.info span.info-drag {
		background-image: url(../img/page/drag.svg);
	}

	.info span.info-keys {
		background-image: url(../img/page/keys.svg);
	}

	.info span.info-switch {
		background-image: url(../img/page/switchmin.svg);
		background-size: 65%;
	}
	.btn{
		margin-top: 1em;
		font-size: 2.5em;
	}
}

#gf-projects-drag-wrap{
	height: 100%;
	width:100%;
	position:relative;
	transition: transform 0.5s cubic-bezier(0,0,0.01,1.32),
				visibility 0s 0s;

}
#gf-projects-drag{
	height: 100%;
	width:100%;
	position:absolute;
	top: 50%;
	left:50%;
	transform: translate3d(-50%,-50%,0);
	transform-origin: 0 0;
	cursor: grab;
	user-select:none;
	// transition: all 0.3s ease-out;
	transition: transform 0.3s ease-out,
				width 0.3s ease-out,
				height 0.3s ease-out;
}
#gf-projects-wraper{
	position:absolute;
	top: 0;
	left: 0;
	height: 100%;
	// transition: transform 0.3s ease-out;
}
#gf-projects-switch{
	// font-size: 20px;
	display:block;
	position:absolute;
	top: 2em;
  	right: 10em;
  	z-index: 10;
  	width: 100px;
  	height: 100px;
  	cursor: pointer;
  	background: url('../img/page/switchmin.svg') center center no-repeat;
  	.gf-showall  & {
  		background: url('../img/page/switchmax.svg') center center no-repeat;
  	}
}
.gf-project-holder{
	position:relative;
	float: left;
	height: 100%;
	background-image: url('../images/1.jpg');
	background-size: cover;
	transition: opacity 0.3s;
	&:not(.active){
		
	}
	&::before{
		content:'';
		position:absolute;
		display: block;
		width: 100%;
		height: 100px;
		top:0;
		left:0;
		background-image: linear-gradient(to top,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.09),rgba(0, 0, 0, 0.2) );

	}
	.gf-project-title{
		text-align: center;
		position:absolute;
		bottom:-130px;
		width:100%;
		opacity: 0;
		transform: translateY(80px);
		transition: opacity 0.3s ease-out, transform 0.3s ease-out;
		// h1{margin: 0;}
		&>a{
			display:block;
			margin:0px auto;
			width: 60px;
			height: 60px;
			background: url('../img/icons/arrow-down.svg') center center no-repeat;
			animation:sway-up-down 1s ease-in-out infinite alternate;
			transform: rotate(-90deg);
		}
	}
}
.gf-project-info{
	position:absolute;
	width: 100%;
	min-height: 100px;
	bottom: 0;
	padding: 1em 3em;
	background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.6) );
	transition: opacity 0.3s 0.3s ease;
	// font-style: italic;
	h1{
		font-size: 60px;
		margin-bottom: 10px;
		a{
			color: map-get($color-cyan,'200');
			&:hover{
				color: map-get($color-indigo,'400');
			}
		}
	}
	p{
		font-size: 20px;
	}
	// text-align: center;
}