/* -----------------------------------------------------------------------------
// This file contains styles that are specific to the Realisations Page .
// -----------------------------------------------------------------------------
*/

.realisations-content {
	.realisations-project {
		figure.maitrimo-effect {
			position: relative;
			.rellax {
				position: relative;
				z-index: 1;
			}			
			figcaption {
				position: absolute;
				background-color: $blue;
			}
		}
	}
}
.realisations-project {
	margin-bottom: 15px;
}

.realisations-content-grid {
	padding: 40px 30px;
	figure.maitrimo-effect {
		img {
			transition: 1s all $easeInOutCirc;
			width: 100%;
		}
		&:before {
			z-index: 9;
			content: '';
			position: absolute;
			left: 0;
			top: 0;			
			width: 100%;
			height: 100%;
			opacity: 0;
			visibility: hidden;		
			transition: 0.5s all ease;		
			@include background-opacity($blue, $opacity: 0.3);
		}
		figcaption {
			width: 30%;
			height: 100%;
			padding-right: 30px;
			position: absolute;
			z-index: 9;
			top: 0;
			left: 30%;
			opacity: 0;
			visibility: hidden;		
			transition: 0.7s all $easeInOutCirc;
			transition-delay: 200ms;
			 * {
			 	color: $white;
			 }
			 h1 {
			 	margin-top: 20px;
			 	margin-left: 20px;
			 	display: inline-block;
				opacity: 0;
				visibility: hidden;
				transition: 0.5s all $easeInOutCirc;
				transition-delay: 400ms;
				@include font-size-rem(24px);
				font-family: $brownbold-font;
			 }
			 .description {
			 	position: absolute;
			 	bottom: 10px;
			 	left: 20px;
			 	p {
			 		line-height: 24px;
			 		margin: 0;
					opacity: 0;	
					visibility: hidden;		 		
			 		transition: 0.7s all $easeInOutCirc;
			 		&:nth-child(1) {transition-delay: 450ms;}
			 		&:nth-child(2) {transition-delay: 500ms;}
			 		&:nth-child(3) {transition-delay: 550ms;}
			 		&:nth-child(4) {transition-delay: 600ms;}
			 		&:nth-child(5) {transition-delay: 650ms;}
			 		&:nth-child(6) {transition-delay: 700ms;}
			 	}
			 }
		}
		@include on-event($self: false) {

			&:before, img, h1, figcaption, .description p{
				opacity: 1;
				visibility: visible;
			}
			.description p, h1 {
				transform: translateX(0);
			}
			figcaption {
				width: 50%;
				left: 50%;
			}
		}	
	}
}

.realisations-content-list {
	.realisations-project {
		figure.maitrimo-effect {
			img {
				z-index: 2;
				position: relative;
			}
			figcaption {
				right: -40px;
				&:before {
					content: '';
					width: 100%;
					height: 100%;
					z-index: -1;
					position: absolute;
				}
				h1 {
					position: absolute;
					z-index: 2;
					@include font-size-rem(60px);
					font-family: $brownbold-font;
					color: $white;
				}
			}
		}
		&.realisations-project--style_1 {
			margin-bottom: 344px;
			figure.maitrimo-effect { 
				figcaption {
					width: 439px;
					height: 214px;
					bottom: -110px;	
					h1 {
						top: 30px;
						left: 30px;
					}
				}
			}
		}
		&.realisations-project--style_2 {
			text-align: right;
			margin-bottom: 140px;
			figure.maitrimo-effect { 
				img {
					display: inline-block;
				}
				figcaption {
					width: 439px;
					height: 284px;
					left: 0;
					top: -110px;
					h1 {
						position: absolute;
						right: 30px;
						bottom: 30px;
					}
				}
			}
		}
		&.realisations-project--style_3 {
			margin-bottom: 260px;
			figure.maitrimo-effect { 
				figcaption {
					width: 100%;
					height: 286px;
					bottom: 50px;
					h1 {
						position: absolute;
						top: 30px;
						right: 30px;
					}
				}
			}
		}
		&.realisations-project--style_4 {
			margin-bottom: 150px;
			figure.maitrimo-effect { 
				figcaption {
					width: 525px;
					height: 300px;
					top: -100px;
					h1 {
						position: absolute;
						bottom: 30px;
						left: 30px;
					}
				}
			}
		}		
	}
}
		
.change-grid {
	position: absolute;
	top: 40px;
	right: 25px;
	width: 20px;
	display: none;
	z-index: 999;
	a {
		display: block;
		margin-bottom: 17px;
		opacity: 0.4;
		&:last-child {
			margin-bottom: 0;
		}
		&.active {
			opacity: 1;
		}
		@include on-event($self: false) {
			opacity: 1;
		}
	}
}

/* Responsive */

@include breakpoint(md_up) {
	.change-grid {
		display: block;
	}
	.realisations-content-list {
		.realisations-project {
			padding-left: 40px;
			padding-right: 40px;
		}
	}
	.realisations-content-grid {
		padding: 80px;
	}
}
@include breakpoint(lg_up) {
	.realisations-content-grid {
		.realisations-project {
			figure.maitrimo-effect {
				figcaption {
					padding: 0 20px;
					left: 50%;
					h1 {
						transform: translateX(-20px);
						margin-top: 30px;
						margin-left: 0;
						@include font-size-rem(30px);
					}
					 .description {
					 	bottom: 30px;
					 	 p {
					 	 	transform: translateX(-20px);
					 	 }
					 }					
				}
				@include on-event($self: false)	{
					&:before, img, figcaption {
						transform: translateX(10px);
					}
					.description p, h1 {
						transform: translateX(0);
					}
					figcaption {
						width: 100%;
						left: 100%;
					}
				}
				 &.maitrimo-effect-reverse {
				 	figcaption {
				 		right: 0;
				 		left: auto;
				 	}
					.description p, h1 {
						transform: translateX(20px);
					}	 	
					 	@include on-event($self: false) {

							&:before, img, figcaption {
								transform: translateX(-10px);
							}
							.description p, h1 {
								transform: translateX(0);
							}				
							figcaption {
								right: 100%;
							}
					}
				 
				}
			}
		}
	}
	.realisations-content-list {
		.realisations-project {
			&.realisations-project--style_1 {
				margin-top: 100px;
			}
		}
	}		
}


@media (min-width: 1441px)  {

	.realisations-content-grid {
		.realisations-project {
			figure.maitrimo-effect {
				figcaption {
					h1 {
						@include font-size-rem(40px);
					}				
				}			
			}
		}
	}	
	.realisations-content-list {
		.realisations-project {
			padding-left: 40px;
			padding-right: 40px;
			figure.maitrimo-effect {
				figcaption {
					h1 {
						@include font-size-rem(100px);
					}
				}
			}
			&.realisations-project--style_1 {
				margin-bottom: 688px;
				// margin-top: 100px;
				figure.maitrimo-effect { 
					figcaption {
						width: 869px;
						height: 414px;
						bottom: -200px;		
					}
				}
			}

			&.realisations-project--style_2 {
				margin-bottom: 271px;
				figure.maitrimo-effect { 
					figcaption {
						width: 892px;
						height: 414px;
						top: -200px;		
					}
				}
			}
			&.realisations-project--style_3 {
				margin-bottom: 516px;
				figure.maitrimo-effect { 
					figcaption {
						width: 100%;
						height: 286px;
						bottom: 50px;		
					}
				}
			}
			&.realisations-project--style_4 {
				margin-bottom: 140px;
				figure.maitrimo-effect { 
					figcaption {
						width: 825px;
						height: 408px;
						top: -200px;
					}
				}
			}
		}
	}
}