#wrapper{
		position:relative;
		width:100%;
		height:100vh;
		overflow:hidden;
		}
#wrapper.flash{
		-webkit-animation:bend 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1 forwards;
		animation:bend 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1 forwards;
		}
@-webkit-keyframes bend{
	0%{
		transform:rotateY(0deg);
		}
	20%{
		transform:rotateY(2.5deg);
		}
	50%{
		transform:rotateY(0deg);
		}
	100%{
		transform:rotateY(0deg);
		}
}
@keyframes bend{
	0%{
		transform:rotateY(0deg);
		}
	20%{
		transform:rotateY(2.5deg);
		}
	50%{
		transform:rotateY(0deg);
		}
	100%{
		transform:rotateY(0deg);
		}
}

#wrapper #trigger{
		position:absolute;
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:center;
		align-content:center;
		align-items:center;
		top:50%;
		left:12%;
		width:80px;
		height:80px;
		z-index:999;
		border-radius:150%;
		cursor:pointer;
		background:#5AA345;
		transition:background 0.2s ease-in-out, opacity 0.2s ease-in-out;
		}
#wrapper #trigger:hover{
		background:#3e7639;
		}
#wrapper #trigger:hover:before{
		color:#FFF;
		}
#wrapper #trigger.flash{
		transition-delay:0s, 0.2s;
		opacity:0;
		pointer-events:none;
		}
#wrapper #trigger:before{
		content:'\203A';
		position:relative;
		display:block;
		color:#FFF;
		font-size:40px;
		height:40px;
		line-height:1;
		font-weight:bold;
		}
#wrapper.fade{
		opacity:0.25;
		}
#wrapper .card{
		width:100%;
		height:100%;
		position:absolute;
		top:0;
		pointer-events:none;
		z-index:0;
		transition:transform 0.4s ease-in-out;
		}
#wrapper .card .content{
		width:100%;
		height:100%;
		position:absolute;
		left:0;
		top:0;
		overflow:hidden;
		background:linear-gradient(to bottom, transparent calc(50% - 1px), rgba(255, 255, 255, 0.05) calc(50% - 1px), 
		rgba(255, 255, 255, 0.05) 50%, transparent 50%), linear-gradient(to right, transparent calc(56% - 1px), 
		rgba(255, 255, 255, 0.05) calc(56% - 1px), rgba(255, 255, 255, 0.05) 56%, transparent 56%), #FFF;
		background-size:100%, 100% 50%, 100%;
		background-repeat:no-repeat;
		background-position:50%, 50% 100%, 50%;
		}
#wrapper .card .content .word{
		opacity:1;
		position:absolute;
		display:block;
		left:calc(25% + 80px);
		top:15%;
		font-size:22px;
		line-height:1.1;
		margin:0;
		color:#2C2C2C;
		text-transform:uppercase;
		}
.portfolio-box-card .card .content .word{
		top:30% !important;
		}
#wrapper .card .content p{
		position:absolute;
		width:22.5%;
		height:40%;
		display:inline-block;
		bottom:6%;
		left:calc(25% + 80px);
		line-height:1.5;
		font-size:19px;
		color:#2C2C2C;
		padding:0;
		box-sizing:border-box;
		transition:0.3s ease-in-out;
		-webkit-clip-path:polygon(0 0, 0 0, 0 100%, 0% 100%);
		clip-path:polygon(0 0, 0 0, 0 100%, 0% 100%);
		}
#wrapper .card .content .ord{
		position:absolute;
		display:none;
		right:-200px;
		top:20px;
		font-size:80px;
		margin:0;
		color:transparent;
		overflow:hidden;
		border-bottom:1px solid rgba(0, 0, 0, 0.5);
		transform:scaleX(0);
		transform-origin:left;
		transition:transform 0s ease-in-out, right 0.4s ease-in-out;
		transition-delay:0.6s, 0s;
		padding:0 10px;
		}
#wrapper .card .content .ord:before{
		content:attr(data-text);
		color:transparent;
		-webkit-text-stroke:0.25px rgba(0, 0, 0, 0.5);
		position:absolute;
		transform:translateY(125%) skewY(45deg);
		transition:0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		transition-delay:0.4s;
		left:10px;
		top:0;
		}
#wrapper .card .content:before{
		opacity:0;
		z-index:2;
		transition:0.2s ease-in-out;
		}
#wrapper .card .content:before,
#wrapper .card .content:after,
#wrapper .card .content .inner{
		content:"";
		position:absolute;
		width:112.5%;
		height:100%;
		left:12.5%;
		top:0;
		background-size:cover !important;
		background-position:center center !important;
		background-repeat:no-repeat !important;
		transition:0.5s ease-in-out;
		}
#wrapper .card .content:after{
		background:transparent;
		transition:0.5s ease-in-out;
		}
#wrapper .card .content .inner{
		width:40%;
		height:45%;
		left:auto;
		right:0%;
		z-index:999;
		top:auto;
		bottom:0;
		transform-origin:left;
		transform:scaleX(0);
		overflow:hidden;
		}
#wrapper .card .content .inner:before,
#wrapper .card .content .inner:after{
		content:"";
		position:absolute;
		width:100%;
		height:100%;
		background:#2C2C2C;
		left:0;
		top:0;
		z-index:2;
		transform:scaleX(1);
		transform-origin:right;
		}
#wrapper .card .content .inner:after{
		background-size:100% auto !important;
		background-position:center center !important;
		background-repeat:no-repeat !important;
		z-index:1;
		transform-origin:50% 50%;
		transform:scale(1.5);
		}
	
#wrapper .card:first-of-type{
		pointer-events:all;
		left:0;
		-webkit-animation:scaleIn 1s ease-in-out 1 forwards;
		animation:scaleIn 1s ease-in-out 1 forwards;
		-webkit-animation-delay:0s;
		animation-delay:0s;
		transform:translateX(-100%);
		z-index:11;
		}
@-webkit-keyframes scaleIn{
	from{
		transform:translateX(-100%);
		}
	to{
		transform:translateX(-75%);
		}
}
@keyframes scaleIn{
	from{
		transform:translateX(-100%);
		}
	to{
		transform:translateX(-75%);
		}
}

#wrapper .card:first-of-type .content:before{
		opacity:0.9;
		-webkit-animation-delay:0.25s;
		animation-delay:0.25s;
		transform:translateX(6.75%);
		}
@-webkit-keyframes scaleDown{
	to{
		transform:translateX(0);
		}
}
@keyframes scaleDown{
	to{
		transform:translateX(0);
		}
}
#wrapper .card:first-of-type .content:after{
		background:#2C2C2C;
		}
#wrapper .card:nth-of-type(2){
		z-index:10;
		-webkit-animation:scaleIn2 1s ease-in-out 1 forwards;
		animation:scaleIn2 1s ease-in-out 1 forwards;
		will-change:transform;
		}
@-webkit-keyframes scaleIn2{
	from{
		transform:translateX(-75%);
		}
	to{
		transform:translateX(0%);
		}
}
@keyframes scaleIn2{
	from{
		transform:translateX(-75%);
		}
	to{
		transform:translateX(0%);
		}
}
#wrapper .card:nth-of-type(2) .content p{
		transition-delay:1.85s;
		-webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%);
		clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%);
		}
#wrapper .card:nth-of-type(2) .content:after{
		transition-delay:0.5s;
		}
#wrapper .card:nth-of-type(2) .content .ord{
		transition:transform 0.2s ease-in-out;
		right:20px;
		transform:scaleX(1);
		transition-delay:2s;
		}
#wrapper .card:nth-of-type(2) .content .ord:before{
		transform:translateY(0%);
		transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		transition-delay:2.25s;
		}
#wrapper .card:nth-of-type(2) .content .word{
		right:100px;
		}
#wrapper .card:nth-of-type(2) .content .inner{
		-webkit-animation:scaleIn4 0.5s ease-in-out 1 forwards;
		animation:scaleIn4 0.5s ease-in-out 1 forwards;
		-webkit-animation-delay:1.35s;
		animation-delay:1.35s;
		will-change:transform;
		-webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%);
		clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%);
		}
@-webkit-keyframes scaleIn4{
	to{
		transform:scaleX(1);
		}
}
@keyframes scaleIn4{
	to{
		transform:scaleX(1);
		}
}
#wrapper .card:nth-of-type(2) .content .inner:after{
		-webkit-animation:scaleUp 1s ease-in-out 1 forwards;
		animation:scaleUp 1s ease-in-out 1 forwards;
		-webkit-animation-delay:1.9s;
		animation-delay:1.9s;
		will-change:transform;
		}
@-webkit-keyframes scaleUp{
	to{
		transform:scale(1);
		}
	}
@keyframes scaleUp{
	to{
		transform:scale(1);
		}
}
#wrapper .card:nth-of-type(2) .content .inner:before{
		-webkit-animation:scaleIn5 0.35s ease-in-out 1 forwards;
		animation:scaleIn5 0.35s ease-in-out 1 forwards;
		-webkit-animation-delay:1.75s;
		animation-delay:1.75s;
		will-change:transform;
		}
@-webkit-keyframes scaleIn5{
	to{
		transform:scaleX(0);
		}
}
@keyframes scaleIn5{
	to{
		transform:scaleX(0);
		}
}
#wrapper .card:nth-of-type(2) .content:before{
		-webkit-animation:scaleIn3 1.5s ease-in-out 1 forwards;
		animation:scaleIn3 1.5s ease-in-out 1 forwards;
		-webkit-animation-delay:0.15s;
		animation-delay:0.15s;
		opacity:1;
		will-change:transform;
		}
@-webkit-keyframes scaleIn3{
	0%{
		transform:translateX(0%);
		-webkit-clip-path:polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
		clip-path:polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
		}
	50%{
		transform:translateX(-12.5%);
		-webkit-clip-path:polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
		clip-path:polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
		}
	100%{
		transform:translateX(-12.5%);
		-webkit-clip-path:polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
		clip-path:polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
		}
}
@keyframes scaleIn3{
	0%{
		transform:translateX(0%);
		-webkit-clip-path:polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
		clip-path:polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
		}
	50%{
		transform:translateX(-12.5%);
		-webkit-clip-path:polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
		clip-path:polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
		}
	100%{
		transform:translateX(-12.5%);
		-webkit-clip-path:polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
		clip-path:polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
		}
}
#wrapper .card:nth-of-type(3){
		z-index:3;
		}
#wrapper .card:nth-of-type(3) .content:before, #wrapper .card:nth-of-type(3) .content:after{
		opacity:0;
		transition:0s;
		transition-delay:0s;
		}
#wrapper .card:nth-of-type(3) .content .inner{
		transform:scaleX(1);
		transition:0.5s ease-in-out;
		-webkit-clip-path:polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
		clip-path:polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
		}
#wrapper .card:nth-of-type(3) .content .inner:before{
		display:none;
		}
#wrapper .card:nth-of-type(3) .content .inner:after{
		transform:scale(1);
		}
		
		
		
@media only screen and (max-width:1824px){
}
@media only screen and (max-width:1024px){
}
@media only screen and (max-width:960px){	
}		
@media only screen and (max-width:768px){
#wrapper{
		height:80vh;
		}
#wrapper .card{
		position:absolute;
		top:0;
		left:10%;
		right:10%;
		width:80%;
		height:100%;
		}
#wrapper .card .content{
		position:relative;
		display:flex;
		flex-direction:column;
		flex-wrap:wrap;
		justify-content:flex-start;
		align-content:flex-start;
		align-items:flex-start;
		top:auto;
		left:auto;
		right:auto;
		width:100%;
		height:100%;
		}
#wrapper .card .content .inner{
		position:relative;
		display:block;
		top:auto;
		left:auto;
		right:auto;
		bottom:auto;
		width:100%;
		height:35vh;
		order:3;
		}
#wrapper .card .content .inner:before,
#wrapper .card .content .inner:after{
		background:none;
		}
#wrapper .card .content .inner:after{
		background-size:auto 100% !important;
		}
#wrapper .card .content:before,
#wrapper .card .content:after{
		display:none;
		}
#wrapper .card .content .word{
		position:relative;
		display:block;
		top:auto !important;
		left:auto !important;
		right:auto !important;
		width:80%;
		font-size:25px;
		text-align:center;
		margin:0 auto 20px auto;
		order:1;
		}
#wrapper .card .content .ord,
#wrapper .card .content .ord:before{
		display:none;
		}
#wrapper .card .content p{
		position:relative;
		display:block;
		top:auto;
		left:auto;
		right:auto;
		bottom:auto;
		width:100%;
		height:auto;
		font-size:16px;
		padding:0;
		margin:0 0 35px 0;
		text-align:center;
		order:2;
		}
#wrapper .card:first-of-type{
		left:-50%;
		}
#wrapper #trigger{
		top:auto;
		bottom:10%;
		left:15%;
		width:40px;
		height:40px;
		background:rgb(255,238,0,0.9);
		}
#wrapper #trigger:before{
		font-size:30px;
		height:30px;
		margin:-7% 0 0 3%;
		}
.portfolio-box-card .card{
		left:0 !important;
		right:0 !important;
		width:100% !important;
		}
#wrapper .card:first-of-type{
		left:-50% !important;
		}	
		
			
.portfolio-box-card .card .content .inner{
		height:44vh !important;
		order:1 !important;
		}
.portfolio-box-card .card .content .inner:after{
		background-size:cover !important;
		}
.portfolio-box-card .card .content .word{
		order:2 !important;
		margin:30px auto 20px auto !important;
		}
.portfolio-box-card .card .content p{
		order:3 !important;
		line-height:1.1 !important;
		}
		
#wrapper #trigger{
		top:43% !important;
		bottom:auto !important;
		left:auto !important;
		right:10% !important;
		}
}
@media only screen and (max-width:680px){
}
@media only screen and (max-width:600px){	
}
@media only screen and (max-width:480px){
}