.scrollToPrestations {
	cursor: pointer;
	display: none;
	height: 22px;
	left: 0;
	margin: 0 auto;
	position: fixed;
	right: 0;
	top: 10px;
	width: 22px;
	z-index: 9;
	img {
		transform: rotateX(180deg);
		height: 22px;
	}
}

@media (max-width: $tablet) {
	.scrollToPrestations {
		top: 50px;
	}
}

.prestations__main {
	position: fixed;
	.slides__navigation {
		height: 40px;
		.scroll {
			top: 10px;
		}
	}
}

section.prestations {
	padding: 40px 0px;
	position: relative;
	height: 100vh;
	margin-top: calc(100vh - 140px);
	color: $main-dark-color;
	.prestations__navigation {
		background: #fff;
		position: relative;
		.pages {
			display: -ms-flexbox;
			display: flex;
			width: 100%;
			&__navigation {
				margin: auto;
				display: -ms-flexbox;
				display: flex;
				-ms-flex-align: center;
					align-items: center;
				height: 60px;
				font-family: $AkzidenzGroteskStd-Regular;
				text-align: center;
				-ms-flex: 1;
				    flex: 1;
				a {
					-ms-flex: 1;
					    flex: 1;
					padding: 10px 0px;
					cursor: pointer;
					color: $main-dark-color;
					border-right: 1px solid $main-dark-color;
					text-decoration: none;
					&:last-child {
						border: none;
					}
				}
				.wrapper {
					display: -ms-flexbox;
					display: flex;
				}
			}
			img {
				display: none;
			}
		}
		.progressbar {
			background: lighten($main-dark-color, 50%);
			display: block;
			height: 3px;
			position: relative;
			transition: all 0.3s ease;
			width: 100%;
			opacity: 0;
			.line {
				background: $main-dark-color;
				display: block;
				height: 3px;
				position: absolute;
				top: 0;
				width: 0%;
			}
		}
		> a {
			background: #f6f6f6;
			display: block;
			height: 30px;
			padding-top: 5px;
			.scroll {
				display: block;
				height: 22px;
				margin: 0 auto;
			}
		}
	}
	.wrapper {
		background: #f6f6f6;
		width: 100%;
		height: calc(100vh - 140px);
		pointer-events: all;
		.prestations__item {
			display: -ms-flexbox;
			display: flex;
			position: relative;
			width: 100%;
			color: $main-dark-color;
			.image {
				padding: 20px;
				width: 50%;
			}
			.description__wrapper {
				width: 50%;
				padding: 20px;
				transition: transform 1s ease;
				.description {
					overflow: auto;
					.title {
						text-transform: uppercase;
						font-size: 24px;
						text-decoration: underline;
					}
					.title--secondary {
						text-decoration: none;
						font-size: 18px;
						margin: 15px 0px 10px 0px;
						text-transform: uppercase;
					}
					.content {
						font-family: $AkzidenzGroteskStd-Regular;
						margin-top: 20px;
						span {
									font-family: $AksidenzGroteskStd-Bold;
								}
						ul {
							padding: 0px;
							list-style-position: inside;
							li {
								font-family: $AkzidenzGroteskStd-Regular;
							}
						}
					}
					a {
						color: inherit;
					}
				}
			}
		}
	}
}

@media all and (max-width: $desktop-sm) {
	section.prestations {
		.prestations__item {
			margin-top: 20px;
			-ms-flex-direction: column;
			    flex-direction: column;
			.image {
				width: 100% !important;
			}
			.description__wrapper {
				width: 100% !important;
				&__content {
					width: 100%;
					.title {
						width: 100%;
					}
				}
			}
		}
	}
}

@media all and (max-width: $tablet) {
	section.prestations {
		margin-top: calc(100vh - 100px);
		.prestations__navigation {
			.pages {
				display: inline-block;
				&__navigation {
					margin-top: 30px;
					height: 130px;
					-ms-flex-direction: column;
					    flex-direction: column;
					-ms-flex-align: end;
					    -ms-grid-row-align: flex-end;
					    align-items: flex-end;
					padding: 0 3%;
					transition: height 0.3s;
					text-align: right;
					position: relative;
					a {
						padding: 5px 0;
						font-size: 20px;
						font-family: $AksidenzGroteskStd-BoldCn;
						border-right: none;
						text-decoration: underline;
						text-transform: uppercase;
					}
				}
				img {
					display: block;
				}
				.overlay {
					pointer-events: none;
					position: absolute;
					height: 60px;
					width: 100%; 
				}
				.overlay.top {
					top: 29px;
				}
				.overlay.bottom {
					bottom: 30px;
				}
				.leftNav {
				    right: 60px;
				    transform: rotate(90deg);
				}
				.rightNav {
				    right: 12px;
				    transform: rotate(-90deg);
				}
				.buttons {
					height: 22px;
				    position: absolute;
				    top: 8px;
				    cursor: pointer;
				    display: none;
				}
			}
		}
		.wrapper {
			height: calc(100vh - 240px);
		}
	}
}