@charset "UTF-8";
/* CSS Document */
main{
	overflow-y: scroll;
	overflow-x: hidden
}

.scroll-content{
	display: flex;
	flex-direction: column;
}

.full-h{
	height: 100vh;
}

.full-w{
	width: 100vw;
}

.scroll-content>:nth-child(1).full-h,
.scroll-content>:nth-child(4).full-h
{
	height: 75vh;
}
.scroll-content>:nth-child(4).full-h>div,
.scroll-content>:nth-child(4).full-h>div>div>div{
	transform: rotateY(0deg);
}

.wide-bloc,
.small-bloc{
	width: 100vw;
}

.small-bloc{
	height: 50vh;
}

.scroll-content>:nth-child(4){
	height: 75vh;
}

.invisible-scroll,
.invisible-scroll *
{
	overflow: hidden;
}

.scroll-content>*{
	background-color: black;
}
.scroll-content>:nth-child(2n-1){
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.scroll-content>:nth-child(1){
	background-image: url("../images/cover-image.jpeg")
}
.scroll-content>:nth-child(3){
	background-image: url("../images/cover-image-2.jpeg")
}
.scroll-content>:nth-child(5){
	background-image: url("../images/cover-image-3.jpeg")
}
.scroll-content>:nth-child(7){
	background-image: url("../images/cover-image-4.jpeg")
}
.scroll-content>:nth-child(9){
	background-image: url("../images/cover-image-5.jpeg")
}

body{
	font-family: muli, sans-serif;
}


h1{
	font-size: 3.75rem;
	font-weight: 400;
}
p{
	font-size: 1.25rem;
	line-height: 2rem;
	font-weight: lighter;
}

.p-10{
	margin: 10.8%;
}

.display-1{
	font-size: 6rem;
}






/*--------------------------------------CONTACT FORM------------------------------------*/

.hidden{
	display: none;
}
.containForm {
  padding-top: 36px;
  padding-bottom: 24px;
  margin-top: 0px;
  margin-bottom: 0px;
}
.containForm .titreForm {
  font-weight: 700;
  font-style: normal;
  font-size: 20px;
  line-height: 24px;
  color: #404041;
  margin-bottom: 17px;
}
.containForm .sTitreForm {
  font-family: muli, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 16px;
  line-height: 22px;
  color: #404041;
  margin-bottom: 34px;
}
.containForm input[type="text"], .containForm input[type="email"], .containForm input[type="phone"] {
  font-family: muli, sans-serif;
  font-weight: 600;
  font-style: normal;
  border: 1px solid #000000;
  border-top-width: 2px;
  border-radius: 0px;
  font-size: 14px;
  line-height: 14px;
  padding: 10px 20px;
}
.form-group {
  margin-bottom: 17px;
}

.rowCheck {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
}

.checkCoutier {
  width: 100%;
  margin-bottom: 15px;
}

.checkNews {
  width: 100%;
  margin-bottom: 15px;
}
.form-control:focus, .form-check-input:focus {
  box-shadow: none;
}
.form-check-input, .form-check-input:checked {
  background-color: #FFFFFF;
  border-color: #000000;
  color: #414042;
  border-radius: 0px;
}
.form-check-input[type=checkbox] {
  border-radius: 0px;
  width: 20px;
  height: 20px;
  margin-left: -2.5rem;
}
.form-check-input:checked[type=checkbox] {
  background-size: 26px 26px;
}


@media (min-width: 576px) {
  .containForm {
    padding-top: 36px;
    padding-bottom: 24px;
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .containForm .titreForm {
    font-size: 21px;
    line-height: 28px;
  }
}
@media (min-width: 768px) {
  .form-check-input[type=checkbox] {
    width: 22px;
    height: 22px;
    margin-left: -2.5em;
  }
}

@media (min-width: 992px) {
  .checkCoutier {
    width: 33%;
  }
  .checkNews {
    width: 66%;
  }
  .rowCheck {
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
  }
  .form-check-input[type=checkbox] {
    width: 24px;
    height: 24px;
    margin-left: -2.5em;
  }
}
@media (min-width: 1200px) {
  .form-check-input[type=checkbox] {
    width: 26px;
    height: 26px;
    margin-left: -2.5em;
  }
}
.block-form{
	top: 0; 
	left: -100vw;
	transition: 1s ease-in-out;
}
.block-form .form-trigger{
	width: 30%;
	opacity: 0.8;
	left: 100%;
	margin-bottom: 30%;
	transition: 1s ease-in-out;
}
.block-form.toggle{
	top: 0; 
	left: 0;
}
.block-form.toggle .form-trigger{
	opacity: 0;
	left: 50%;
	display: none
}

/*-----------------------------------------   ANIMATION   --------------------------------------------*/

.animate__fadeInLeft,
.animate__fadeInUp{
	opacity: 0;
}

.animClip{
	clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

.active.animClip{
	animation: 1s clipAnimation forwards;
}

@keyframes clipAnimation {
	from{
		clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
	}
	to{
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	}
}

.swipe{
	opacity: 0;
	animation: swipeAnim 1.5s cubic-bezier(.53,0,1,.75);
	animation-iteration-count: 3;
	transform-origin: top center;
}

@keyframes swipeAnim {
	0%{
		transform: translateX(100%)
			rotateZ(10deg);
		opacity: 0;
	}
	40%{
		opacity: 1;
	}
	80%{
		transform: translateX(-100%)
			rotateZ(-10deg);
		opacity: 0;
	}
	100%{
		transform: translateX(-100%)
			rotateZ(-10deg);
		opacity: 0;
	}
}


.zoom{
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.zoom img{
	transform: scale(1.1);
	transition: 1s ease-in-out;
}

.zoom img.active{
	transform: scale(1)
}

/*----------------------------------------------------------------------------------*/


@media (max-width: 991px){
	.scroll-content>:nth-child(4).full-h {
		height: 75vh!important;
	}
	.penthouse{
		bottom: 0 !important;
		left: 0 !important;
		right: auto !important;
		top: auto !important
	}
	.penthouse>div{
		transform-origin: top left;
		transform: rotateZ(0deg);
		bottom: 0 !important;
		left: auto !important;
		right: 0 !important;
		top: auto !important
	}
	h1,
	input[type=submit]{
		font-weight: 300 !important;
	}
	
	p,
	.titreForm,.containForm input[type="text"],
	.containForm input[type="email"], 
	.containForm input[type="phone"],
	.form-trigger h2{
		font-size: 1rem!important;
		line-height: 1.7rem!important;
	}
	.txt-content-1{
		height: 70%;
	}
	.line{
		width: 50% !important;
	}
	
	.scroll-content>:nth-child(3){
		background-position: right center;
		height: 50vh;
	}
	
	.scroll-content>:nth-child(3)>:nth-last-child(1){
		top: 15vw;
	}
	.blocmove{
		left: 0;
	}
	
	.scroll-content>:nth-child(5),
	.scroll-content>:nth-child(7),
	.scroll-content>:nth-child(9)
	
	{
		height: 50vh;
	}
	.scroll-content>:nth-child(5){
		background-position: center center!important;
	}
	.scroll-content>:nth-child(8),
	.scroll-content>:nth-child(6)
	{
		height: 75vh;
	}
	.scroll-content>:nth-child(8) .reveal{
		font-size: 1.3rem!important;
		line-height: 2rem!important;
	}

	.scroll-content>:nth-child(6)>div>div{
		left: -200% !important
	}
	.quinzecent{
		bottom: 0!important;
		top: auto!important;
	}
	.quinzecent>div{
		left: -175%!important;
	}
	.quinzecent p{
		font-size: 9rem;
	}
	.fs-1 {
    	font-size: 1.6435rem !important;
	}
	.display-1{
		font-size: 4.312rem !important;
	}
	.display-2{
		font-size: 7.125rem !important;
	}
	h1{
		font-size: 2.5rem ;
	}
	h2{
		font-size: calc(2.325rem + 0.9vw);
	}
	.building{
		height: 90%!important
	}
	.scroll-content>:nth-child(8) .row>:nth-child(2)>div{
		transform-origin: top left;
		transform: rotateZ(0deg);
		left: 15%!important;
	}
	.scroll-content>:nth-child(8) .row>:nth-child(2){
		left: -75%;
	}
	.scroll-content>:nth-child(9){
		background-position: left center;
	}
	
	.block-form{
		height: 100vh;
		left: 0;
		top: -100vh
	}
	.sTitreForm{
		font-size: 0.813rem!important;
		line-height: 1rem!important;
	}
	.form-check-label,
	form>p{
		font-size: 0.625rem!important
	}
	.big-checkbox{
		width: 1.25rem!important;
		height: 1.25rem!important;
	}
	.form-trigger{
		bottom: auto;
		top: 100%;
		left: auto!important;
		right: 0px;
		width: 40%!important;
		height: 2rem;
	}
	.block-form.toggle .form-trigger{
		opacity: 0;
		top: 50%;
		display: none
	}
	.form-check-input:checked[type=checkbox]{
		background-size: 1.25rem 1.25rem;
	}
	
	footer p{
		font-size: 14px!important;
	}
}

@media (max-width: 767px) {
	
	.penthouse{
		bottom: 0 !important;
		left: 0 !important;
		right: auto !important;
		top: auto !important
	}
	.penthouse>div{
		transform-origin: top left;
		transform: rotateZ(0deg);
		bottom: 0 !important;
		left: auto !important;
		right: 0 !important;
		top: auto !important
	}
	h1,
	input[type=submit]{
		font-weight: 300 !important;
	}
	
	p,
	.titreForm,.containForm input[type="text"],
	.containForm input[type="email"], 
	.containForm input[type="phone"],
	.form-trigger h2,	
	.scroll-content>:nth-child(8) .reveal{
		font-size: 0.875rem!important;
		line-height: 1.438rem!important;
	}
	.txt-content-1{
		height: 70%;
	}
	.line{
		width: 50% !important;
	}
	
	.scroll-content>:nth-child(3){
		background-position: right center;
		height: 50vh;
	}
	
	.scroll-content>:nth-child(3)>:nth-last-child(1){
		top: 15vw;
	}
	.blocmove{
		left: 0;
	}
	
	.scroll-content>:nth-child(5),
	.scroll-content>:nth-child(4),
	.scroll-content>:nth-child(6),
	.scroll-content>:nth-child(7),
	.scroll-content>:nth-child(8),
	.scroll-content>:nth-child(9)
	
	{
		height: 100vw!important;
	}
	.scroll-content>:nth-child(6)>div>div{
		left: -200% !important
	}
	.quinzecent{
		bottom: 0!important;
		top: auto!important;
	}
	.quinzecent>div{
		left: -175%!important;
	}
	.quinzecent p{
		font-size: 9rem;
	}
	.fs-1 {
    	font-size: 1.125rem !important;
	}
	.display-1{
		font-size: 2.625rem !important;
	}
	.display-2{
		font-size: 3.125rem !important;
		line-height: 1.125rem;
	}
	h1{
		font-size: 1.25rem ;
	}
	h2{
		font-size: calc(2.325rem + 0.9vw);
	}
	.building{
		height: 90%!important
	}
	.scroll-content>:nth-child(8) .row>:nth-child(2)>div{
		transform-origin: top left;
		transform: rotateZ(0deg);
		left: 15%!important;
	}
	.scroll-content>:nth-child(8) .row>:nth-child(2){
		left: -75%;
	}
	.scroll-content>:nth-child(9){
		background-position: left center;
	}
	
	.block-form{
		height: 100vh;
		left: 0;
		top: -100vh
	}
	.sTitreForm{
		font-size: 0.813rem!important;
		line-height: 1rem!important;
	}
	.form-check-label,
	form>p{
		font-size: 0.625rem!important
	}
	.big-checkbox{
		width: 1.25rem!important;
		height: 1.25rem!important;
	}
	.form-trigger{
		bottom: auto;
		top: 100%;
		left: auto!important;
		right: 0px;
		width: auto!important;

	}
	.block-form.toggle .form-trigger{
		opacity: 0;
		top: 50%;
		display: none
	}
	.form-check-input:checked[type=checkbox]{
		background-size: 1.25rem 1.25rem;
	}
	.line span{
		height: 5px!important;
	}
	.quinzecent span{
		height: 2px!important;
	}
	.containForm input[type="submit"]{
		font-size: 18px!important;
	}
	.w-100.position-absolute.bg-black.p-4,
	.w-100.position-absolute.bg-black.p-4 h-100
	{
		height: auto!important;
	}
}


@media (min-width: 992px){
	main{
		overflow-x: scroll;
		overflow-y: hidden;
	}
	.penthouse>div{
		transform-origin: top left;
		transform: rotateZ(-90deg);
		top: 15rem!important;
	}
	.wide-bloc{
		width: calc(2555 / 1920 * 100vw);
	}
	.small-bloc{
		width: 100vh;
		height: 100vh
	}
	.scroll-content{
		display: inline-flex;
		flex-direction: row;
	}
	.scroll-content>:nth-child(1).full-h,
	.scroll-content>:nth-child(3).full-h{
		height: 100vh;
	}
	.block-form{
		top: 0; 
		left: -100vh;
		transition: 1s ease-in-out;
	}
	
	.block-form .form-trigger{
		margin-bottom: 10%;
	}
	
	.scroll-content>:nth-child(4){
		height: 100vh;
	}
	
	.scroll-content>:nth-child(4).full-h>div{
		
	}
	.scroll-content>:nth-child(4).full-h>div>div>div{
		transform: rotateY(0deg);
	}
	
	.scroll-content>:nth-child(1).full-h,
	.scroll-content>:nth-child(3).full-h,
	.scroll-content>:nth-child(4).full-h
	{
		height: 100vh;
	}
	
	.txt-content-1{
		height: 60%;
	}
	
	.scroll-content>:nth-child(3)>:nth-last-child(1){
		top:15vw;
	}
	.quinzecent{
		transform-origin: top left;
		transform: rotateZ(-90deg);
	}
	.display-2{
		font-size: 9rem !important;
	}
	
	.building{
		height: 100%!important
	}
	.scroll-content>:nth-child(8) .row>:nth-child(2)>div{
		transform-origin: top left;
		transform: rotateZ(-90deg);
		top: -10rem!important;
	}
	.form-check-label{
		font-size: 14px;
	}
	.form-trigger{
		width: 33vh;
		transform: rotateZ(-90deg);
		transform-origin: top left;
	}
	.fs-1{
		font-size: 1.9rem!important;
	}
	.display-1{
		font-size: 4.625rem!important;
	}
	
	p{
		font-size: 1.125rem!important;
		line-height: 1.8rem!important;
	}
	.titreForm,.containForm input[type="text"],
	.containForm input[type="email"], 
	.containForm input[type="phone"],
	.form-trigger h2{
		font-size: 0.8rem!important;
		line-height: 1.2rem!important;
	}
	
	.form-check-label,
	form>p{
		font-size: 0.7rem!important
	}
	.fs-3{
		font-size: 1rem!important;
	}
	h1{
		font-size: 2.75rem;
	}
	.quinzecent>div{
		bottom: auto!important;
		top: 0!important;
		left: 135%!important;
	}
	.sTitreForm{
		font-size: 0.8rem!important;
	}
	.scroll-content>:nth-child(5) {
    	width: calc(1714 / 1920 * 100vw);
		background-size: cover;
		background-position: 100% 60%
	}
}

@media (min-width: 1200px) {
	main{
		overflow: hidden;
	}
	.penthouse>div{
		transform-origin: top left;
		transform: rotateZ(-90deg);
		top: 30rem!important;
	}
	.wide-bloc{
		width: calc(2555 / 1920 * 100vw);
	}
	.small-bloc{
		width: 100vh;
		height: 100vh
	}
	.scroll-content{
		display: inline-flex;
		flex-direction: row;
	}
	.scroll-content>:nth-child(1).full-h,
	.scroll-content>:nth-child(3).full-h{
		height: 100vh;
	}
	.block-form{
		top: 0; 
		left: -100vh;
		transition: 1s ease-in-out;
	}
	
	.block-form .form-trigger{
		margin-bottom: 10%;
	}
	
	.scroll-content>:nth-child(4){
		height: 100vh;
	}
	
	.scroll-content>:nth-child(4).full-h>div{
		
	}
	.scroll-content>:nth-child(4).full-h>div>div>div{
		transform: rotateY(0deg);
	}
	
	.scroll-content>:nth-child(1).full-h,
	.scroll-content>:nth-child(3).full-h,
	.scroll-content>:nth-child(4).full-h
	{
		height: 100vh;
	}
	
	.txt-content-1{
		height: 60%;
	}
	
	.scroll-content>:nth-child(3)>:nth-last-child(1){
		top:15vw;
	}
	
	.quinzecent{
		transform-origin: top left;
		transform: rotateZ(-90deg);
	}
	.scroll-content>:nth-child(6) p{
		font-size: 15rem !important;

	}
	
	.building{
		height: 100%!important
	}
	.scroll-content>:nth-child(8) .row>:nth-child(2)>div{
		transform-origin: top left;
		transform: rotateZ(-90deg);

	}
	.form-check-label{
		font-size: 14px!important;
	}
	.form-trigger{
		width: 30vh;
		transform: rotateZ(-90deg);
		transform-origin: top left;
	}
	.form-trigger h2{
		font-size: 1.2rem!important;
	}
	.fs-1{
		font-size: 3.75rem!important;
		line-height: 4rem!important;
	}
	.display-1{
		font-size: 6rem!important;
	}
	h1{
		font-size:  3.75rem!important;
	}
	p,
	.titreForm,.containForm input[type="text"],
	.containForm input[type="email"], 
	.containForm input[type="phone"]{
		font-size: 1.25rem!important;
		line-height: 2rem!important;
	}
	.sTitreForm{
		font-size: 1rem!important;
	}
	.txt-women{
		font-size: 3rem!important;
		line-height: 3.5rem!important;
	}
}
.bg-light{background-color:#FFFFFF;}
p{color:#FFFFFF!important;}