#story .story-catherine{ padding-top: 107px; }
#story .story-catherine main{ overflow: visible; }
#story .story-catherine .story-head{ position: relative; }
#story .story-catherine .story-head h1{ font-family: 'Playfair Display', serif; font-size: 130px; line-height: 140px; color: #FFF; text-transform: uppercase; font-weight: 400; width: 1100px; display: block; margin: 0 auto; position: relative; top: -200px; }
#story .story-catherine .story-head h3{ font-family: 'Playfair Display', serif; font-size: 490px; line-height: 470px; position: absolute; top: 210px; left: calc(-20% - 18vw); color: rgba(255,255,255,0.1) !important; transform: rotate(-90deg); text-transform: none; font-weight: 400; text-align: left; word-break: keep-all; z-index: 0; }
#story .story-catherine .story-head .img-wrapper{ max-width: 54%; text-align: right; display: block; margin: 0 auto; }
#story .story-catherine .story-head .img-wrapper img{ filter: grayscale(100%); }
#story .story-catherine .story-content{ max-width: 1500px; margin: 0 auto; position: relative; z-index: 1; padding-top: 120px; }
#story .story-catherine .story-content .single-story{ margin-bottom: 160px; }
#story .story-catherine .story-content .single-story h4{ text-align: center; font-family: 'Nunito', serif; font-size: 28px; line-height: 38px; margin-top: -100px; padding-bottom: 34px; opacity: 0; transition: all ease-in-out 0.3s; position: relative; left: -30px; }
#story .story-catherine .story-content .single-story.active h4{ opacity: 1; left: 0; }
#story .story-catherine .story-content .single-story h4 span{ padding-left: 36px; }
#story .story-catherine .story-content .single-story .text{ padding: 15px 140px 15px 60px;  }
#story .story-catherine .story-content .single-story p{ font-family: 'Nunito', serif; font-size: 20px; line-height: 30px; color: #cbb5b5; padding: 0; transition: color ease-in-out 0.3s; cursor: pointer; }
#story .story-catherine .story-content .single-story p span{ color: #cbb5b5; transition: color 0.5s linear; }
#story .story-catherine .story-content .single-story p span.read{ color: #FFF; }
#story .story-catherine .story-content .single-story .left,
#story .story-catherine .story-content .single-story .right{ display: inline-block; width: 50%; float: left; box-sizing: border-box; }
#story .story-catherine .story-content .single-story .right{ float: right; padding-right: 160px; }
#story .story-catherine .story-content .single-story .left .text{ padding-left: 140px; position: relative; }
#story .story-catherine .story-content .single-story .right .text{ padding: 15px 60px 15px 60px; position: relative; }
#story .story-catherine .story-content .single-story .story-img-wrapper{ display: inline-block; background-color: #FFF; padding: 22px 20px; }
#story .story-catherine .story-content .single-story .text .numero{ position: absolute; top: -50px; left: auto; right: auto; font-weight: 400; font-family: 'Nunito', serif; font-size: 18px; line-height: 26px; color: #cbb5b5; transition: color ease-in-out 0.3s; cursor: pointer; }
#story .story-catherine .story-content .single-story.active .text .numero{ color: #FFF; }
/*#story .story-catherine .story-content .single-story.active .text .numero:before{ content: ''; width: 120px; height: 120px; border: 1px solid #cbb5b5; position: absolute; top: -45px; left: -55px; border-radius: 50%; }*/
#story .story-catherine .story-content .single-story .left .story-img-wrapper{ max-width: 680px; }
#story .story-catherine .story-content .single-story .right .story-img-wrapper{ max-width: 600px; }
#story .story-catherine .story-content .single-story .right.dessin{ }
#story .story-catherine .story-content .single-story .right.dessin .text{ padding: 45px 60px 15px 60px; }
#story .story-catherine .story-content .single-story .right.dessin img{ filter: opacity(45%); display: block; width: auto; margin: 0 auto; }
#story .story-catherine .story-content .single-story .right.dessin .grand-texte{ font-family: 'Playfair Display', serif; font-style: italic; font-size: 48px; line-height: 52px; color: #FFF; font-weight: 400; cursor: text; max-width: 450px; padding: 50px 0 30px; }
#story .story-catherine .story-content .single-story .right.dessin .credit{ font-family: 'Nunito', serif; font-weight: 400; font-size: 16px; line-height: 24px; color: #FFF; text-align: right; max-width: 70%; }


/*AUDIO*/
#discours-catherine{ display: none; visibility: hidden; opacity: 0; }

.point-stick-button{ width: 20px; height: 20px; border-radius: 50%; position: absolute; display: inline-block; left: 0; top: 55px; z-index: 0; opacity: 0; font-family: 'Nunito', serif; font-style: normal; font-weight: 400; color: #FFF; font-size: 16px; line-height: 16px; text-align: center; }
/*.point-stick-button:before{ content: ''; position: absolute; top: 30px; left: -27px; font-family: 'Nunito', serif; font-style: normal; font-weight: 400; color: #FFF; font-size: 26px; line-height: 26px; width: 78px; text-align: center; height: auto; opacity: 1;}*/
/*#hold-event:after{ content: ''; position: absolute; top: 30px; left: -27px; font-family: 'Nunito', serif; font-style: normal; font-weight: 400; color: #FFF; font-size: 26px; line-height: 26px; width: 78px; text-align: center; height: auto; opacity: 1;}*/
/*.point-stick-button.pausebutton:before{ content: 'Pause'; }*/
/*#hold-event::after{ content: 'Play'; }*/
#hold-event::before {
	content: "Play";
	font-size: 11px;
	font-weight: 500;
	width: 60px;
	height: 10px;
	box-sizing: border-box;
	line-height: 10px;
	padding-top: 10px;
	text-align: center;
	position: absolute;
	right: -18px;
	top: 45px;
	color: #FFF;
	opacity: 0;
	overflow: visible;
	transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
#hold-event::after{ color: #FFF; content: 'Pause'; overflow: visible; }
#hold-event.play::before{ opacity: 1; }
#hold-event.pause::after{ opacity: 1; }
/*.point-stick-button.playbutton:before{ content: 'Play'; }*/

#story .story-catherine .story-content .single-story #container{ display: none; }

#story .story-catherine .story-content .single-story.active #container {
	display: block;
	position: absolute;
	top: -45px;
	left: -55px;
	width: 122px;
	height: 122px;
	border: none;
}


#story .story-catherine .story-content .single-story.active #halfclip {
	width: 50%;
	height: 100%;
	right: 0px;
	position: absolute;
	overflow: hidden;
	transform-origin: left center;
	animation: cliprotate 1.5s 1;
	transform: rotate(180deg);
}

#story .story-catherine .story-content .single-story.active .halfcircle {
	box-sizing: border-box;
	height: 100%;
	right: 0px;
	position: absolute;
	border: solid 1px transparent;
	border-top-color: white;
	border-left-color: white;
	border-radius: 50%;
}
#story .story-catherine .story-content .single-story.active #clipped {
	width: 200%;
	transform: rotate(-45deg);
	transform: rotate(135deg);
	animation: rotate 0.75s linear 2;
}
#story .story-catherine .story-content .single-story.active #fixed {
	width: 100%;
	transform: rotate(135deg);
	opacity: 1;
	animation: showfixed 1.5s 1;
}


@keyframes cliprotate {
	0% {transform: rotate(0deg);}
	50% {transform: rotate(0deg);}
	50.01% {transform: rotate(180deg);}
	100% {transform: rotate(180deg);}
}

.halfcircle {
	box-sizing: border-box;
	height: 100%;
	right: 0px;
	position: absolute;
	border: solid 25px transparent;
	border-top-color: blue;
	border-left-color: blue;
	border-radius: 50%;
}


@keyframes rotate {
	0% {transform: rotate(-45deg);}
	100% {transform: rotate(135deg);}
}


#fixed {
	width: 100%;
	transform: rotate(135deg);  
	opacity: 0;
}

#container:hover #fixed {
	opacity: 1;
	animation: showfixed 1.5s 1;
}



@keyframes showfixed {
	0% {opacity: 0;}
	49.99% {opacity: 0;}
	50% {opacity: 1;}
	100% {opacity: 1;}
}


/*RESPONSIVE*/

@media screen and (max-width:1840px){
	#story .story-catherine .story-head .img-wrapper img{ max-width: 520px; }
	#story .story-catherine .story-head h3{ left: calc(-20% - 24vw); }
}
@media screen and (max-width:1660px){
	#story .story-catherine .story-content{ max-width: 1280px; }
	#story .story-catherine .story-head .img-wrapper img{ max-width: 440px; }
	#story .story-catherine .story-head h3{ font-size: 390px; line-height: 370px; top: 150px; left: calc(-20% - 16vw); }
	#story .story-catherine .story-content .single-story h4{ margin-top: -70px; }
	#story .story-catherine .story-content .single-story h4{ font-size: 26px; line-height: 38px; }
	#story .story-catherine .story-content .single-story p{ font-size: 16px; line-height: 25px; }
}
@media screen and (max-width:1365px){
	#story .story-catherine .story-content{ max-width: 1165px; }
	#story .story-catherine .story-head .img-wrapper img { max-width: 400px; }
	#story .story-catherine .story-head h1{ font-size: 90px; line-height: 95px; width: 780px; }
	#story .story-catherine .story-head h3 { font-size: 350px; line-height: 330px; top: 125px; left: calc(-20% - 21vw); }
	#story .story-catherine .story-content{ padding-top: 40px; }
	#story .story-catherine .story-content .single-story .right .story-img-wrapper{ max-width: 360px; }
	#story .story-catherine .story-content .single-story p{ font-size: 15px; line-height: 23px; }
	#story .story-catherine .story-content .single-story .text .numero{ top: -30px; }
	#story .story-catherine .story-content .single-story .left .text{ padding: 15px 125px 15px 100px; }
	#story .story-catherine .story-content .single-story .left .story-img-wrapper{ max-width: 450px; }
	#story .story-catherine .story-content .single-story .right{ padding-right: 140px; }
	#story .story-catherine .story-content .single-story .right .text{ padding: 15px 30px 15px 30px; }
	#story .story-catherine .story-content .single-story .right.dessin{ margin-top: -20px; }
	#story .story-catherine .story-content .single-story .right.dessin img{ max-width: 125px; }
	#story .story-catherine .story-content .single-story .right.dessin .grand-texte{ font-size: 42px; line-height: 50px; max-width: 400px; }
}
@media screen and (max-width:1280px){

}
@media screen and (max-width:1200px){
	#story .story-catherine .story-head h1 { font-size: 70px; line-height: 74px; width: 590px; }
	#story .story-catherine .story-head h3{ font-size: 300px; line-height: 290px; top: 85px; left: calc(-20% - 24vw); }
	#story .story-catherine .story-head .img-wrapper{ max-width: 75%; }
	#story .story-catherine .story-content .single-story{ margin-bottom: 150px; }
	#story .story-catherine .story-content .single-story .left .text{ padding: 15px 90px 15px 100px; }
	#story .story-catherine .story-content .single-story .left .story-img-wrapper{ max-width: 400px; }
	#story .story-catherine .story-content .single-story:nth-child(2) .left{ text-align: right; padding-right: 10px; }
}
@media screen and (max-width:1100px){

}
@media screen and (max-width:1023px){
	#story .story-catherine .story-content .single-story{ margin-bottom: 80px; }
	#story .story-catherine .story-content .single-story .left .text{ padding: 15px 50px 15px 70px; }
	#story .story-catherine .story-content .single-story .right{ padding-right: 90px; }
	#story .story-catherine .story-content .single-story:nth-child(2) .left{ padding: 30px 10px 0 70px; }
	#story .story-catherine .story-content .single-story .right .text{ padding: 15px 0 15px 50px; }
	#story .story-catherine .story-content .single-story .text .numero{ top: -50px; }
	#story .story-catherine .story-content .single-story.active #container{ top: -35px; left: -35px; width: 90px; height: 90px; }
	#story .story-catherine .story-content .single-story h4{ left: 30px; font-size: 22px; }
	#story .story-catherine .story-head .img-wrapper img{ max-width: 300px; }
	#story .story-catherine .story-head h1{ font-size: 60px; line-height: 64px; }
	#story .story-catherine .story-head h3{ font-size: 210px; line-height: 210px; left: calc(-20% - 18vw); }
}
@media screen and (max-width:767px){
	.header-visible #header-container{ background-color: transparent; }
	#story .story-catherine .story-head .img-wrapper{ padding-top: 20px; }
	#story .story-catherine .story-head .img-wrapper img{ max-width: 240px; }
	#story .story-catherine .story-head h1{ font-size: 40px; line-height: 48px; width: 100%; padding: 0 25px; }
	#story .story-catherine .story-head h3{ font-size: 160px; line-height: 180px; left: calc(-20% - 36vw); }
	#story .story-catherine .story-content .single-story .left,
	#story .story-catherine .story-content .single-story .right{ width: 100%; float: none; }
	#story .story-catherine .story-content .single-story .left .text{ padding: 15px 45px 15px 45px; }
	#story .story-catherine .story-content .single-story .right{ padding: 0; }
	#story .story-catherine .story-content .single-story .right .story-img-wrapper{ padding: 0 25px; background-color: transparent; }
	#story .story-catherine .story-content .single-story:nth-child(2) .left{ padding: 0; }
	#story .story-catherine .story-content .single-story .right .text{ padding: 15px 25px 15px 25px; }
	#story .story-catherine .story-content .single-story h4{ margin-top: 30px; }
	#story .story-catherine .story-content .single-story .right.dessin{ margin-top: 0; }
	#story .story-catherine .story-content .single-story .right.dessin .grand-texte{ font-size: 26px; line-height: 44px; max-width: 100%; padding: 50px 25px 20px; }
	#story .story-catherine .story-content .single-story .right.dessin .credit{ max-width: 90%; }
}
@media screen and (max-width:375px){

}