@charset "utf-8";
.primary-content{padding-bottom:0}
.tween {-webkit-transition: -webkit-all .2s ease-in-out; -moz-transition: -moz-all .2s ease-in-out; -ms-transition: -ms-all .2s ease-in-out; transition: all .2s ease-in-out}
.clr:after {content:''; display: block; clear: both}

/* COMMON LINES */
.MyContent .line {padding: 0 0 60px}
.MyContent .line h2 {margin: 60px 0 40px; padding: 0; font-family: ClarinsRegular; font-weight: 400; font-size: 35px; line-height: 35px; text-align: center; color: #000}
.MyContent .line h2 em {font-style: normal}
.MyContent .line .myTitleImg img {margin: 0 15px 0 0}
.MyContent .line p {font-size: 14px; font-style: normal; font-weight: 400; color: #8b8b8b; line-height: 22px}
.MyContent .line a.text-link {display: inline-block; margin: 0; font-family: "Gotham SSm medium A","Gotham SSm medium B",Helvetica,Arial,sans-serif; font-size: 11px; color: #000; letter-spacing: .25px; text-transform: uppercase; text-decoration: none; line-height: 11px; border-bottom: 1px solid #d4d4d4}
.MyContent .line a.text-link:hover {color: #be0f34; border-bottom:#be0f34 1px solid}
.MyContent .line02 .img1, .MyContent .line03 .img3 {position: relative; float: right}
.MyContent .line02 .img1 img, .MyContent .line03 .img3 img, .MyContent .line06 .img4 img, .MyContent .line07 .img5 img, .MyContent .line09 .img6 img {display: block; width: 100%}
.MyContent .line02 .img1 p, .MyContent .line07 .img5 p, .MyContent .line06 .img4 p, .MyContent .line09 .img6 p {background: #f1f1f1; margin:0; padding:5px 10px; font-size:11px; line-height:14px; color:#000; font-weight:400; font-style:italic}
.myNoMargin {margin-top: 0}

/* LINE01 */
.MyContent .line01 {padding: 0}
.MyContent .line01 .MyVisual {position: relative; overflow: hidden}
.MyContent .line01 .MyVisual a {display: block; width: 100%; height: 100%; z-index: 1}
.MyContent .line01 .MyVisual img {display: block; margin: 0 auto; z-index: 0}
.MyContent .line01 .MyVisual .myPlayBtn {display: block; position: absolute; bottom: 15px; left: 15px; width: 60px; height: 60px; z-index: 0}
.MyContent .line01 .MyTextTop {position:relative; height:130px; margin:-365px 0 0; padding: 0; text-align: center; background:rgba(255,255,255,.85)}
.MyContent .line01 .MyTextTop h1 {font-family:ClarinsRegular;font-size:50px;font-weight:400;margin:14px 0 0;padding:0;color:#be0f34}
.MyContent .line01 .MyTextTop p {font-style:normal;font-weight:400;font-size:16px;margin:0;padding:0;color:#000}

/* LINE02 */
.MyContent .line02 .img2 {position: relative; float: left; text-align: center}

/* LINE03 */
.MyContent .line03 {width: 1600px; margin-left: -175px; background: #fff url(../img/parcours-bg.jpg) center top no-repeat; background-size: cover}
	.MyContent .line03 h2, .MyContent .line03 .parcours-excerpt {color: #fff}
	.MyContent .line03 .parcours-excerpt {margin: 0 0 70px}
	.MyContent .line03 .parcours-map {position: relative; margin: 0 0 70px; text-align: center}
		.MyContent .line03 .parcours-map img {display: inline-block}
	.MyContent .line03 .img3 p {background: rgba(0,0,0,.2); margin:0; padding:5px 10px; font-size:11px; line-height:14px; color: #fff; font-weight:400; font-style:italic}
	.MyContent .line03 .solar-impulse-logo {padding: 30px 0 0; text-align: center}
	.MyContent .line03 p em {display: block; font-style: normal}

/* LINE04 */
.myPlaneArea {display: inline-block; position: relative; width: auto; margin: 0 auto}
.MyImgPlane {margin: 50px 0; text-align: center; z-index: 0}
	.myNfo {display: none; position: absolute; padding: 5px 10px; color: #be0f34; font-style: normal; background: rgba(255,255,255,.8); border: 1px solid #be0f34; z-index: 1}
	.myNfo:before {display: block; content: ''; position: absolute; width: 1px; height: 20px; background: #be0f34}
	.myNfo1 {bottom: -20px; left: 20px}
	.myNfo1:before {top: -20px; left: 50%}
	.myNfo2 {top: -5px; left: 50%; margin: 0 0 0 -74px}
	.myNfo2:before {bottom: -20px; left: 50%}
	.myNfo3 {bottom: 25px; left: 50%; margin: 0 0 0 26px}
	.myNfo3:before {top: -20px; left: 50%}
	.myNfo4 {top: 18px; left: 50%; margin: 0 0 0 31px}
	.myNfo4:before {bottom: -20px; left: 50%}
	.myNfo5 {bottom: 70px; right: -10px}
	.myNfo5:before {top: -20px; left: 50%}

/* LINE05 & 08 - PARALLAX */
#feed-parallax-01 {background-image: url(../img/paralax1.jpg)}
#feed-parallax-02 {background-image: url(../img/paralax2.jpg)}

.MyContent .parallax {position:relative; display:block; height:300px; overflow:visible; margin-bottom: 0; padding-bottom: 0}

@media screen and (max-width: 761px) {
.MyContent .parallax {height:200px}
}

.MyContent .parallax .background {position:absolute; left:50%; margin-left:-1250px; width:2500px; top:0; height:300px; background-repeat:no-repeat; background-color:#e1e1e1; z-index:1; background-attachment:fixed; background-size: contain}
@media screen and (max-width: 1024px) {
.MyContent .parallax .background {background-size: inherit}
}
@media screen and (max-width: 761px) {
.MyContent .parallax .background {height:200px}
}

.MyContent .withe-caption.parallax {position:relative; display:block; height:300px; overflow:visible; margin-bottom:60px}
@media screen and (max-width: 761px) {
.MyContent .withe-caption.parallax {height:200px}
}

.MyContent .white-caption-parallax {bottom:10px; left:50%; line-height:11px; max-width:452px; position:absolute; text-align:center; font-size:11px; width:50%; z-index:2}
@media screen and (max-width: 761px) {
.MyContent .white-caption-parallax {bottom:-34px; font-size:14px; width:100%; left:0; max-width:762px}
}

.MyContent .white-caption-parallax .col-gutter {position:relative; text-align:right}
@media screen and (max-width: 761px) {
.MyContent .white-caption-parallax .col-gutter {text-align:center}
}

.MyContent .white-caption-parallax .wrapper {color:#fff; display:inline-block; line-height:1em}
.MyContent .shadow-border {box-shadow:inset 0 0 20px rgba(0,0,0,.25); position:absolute; left:50%; width:2600px; margin-left:-1300px; top:0; height:100%; z-index:3}

/* LINE06 */
.MyContent .line06 {padding: 0}
.MyContent .line06 .col-gutter {margin: 0}

/* LINE07 */
.MyContent .line07 {padding: 0; margin: 0 0 -3px}
.MyContent .line07 .img5 {z-index: 1}
.MyContent .line07 .line-cite {background: #fff; margin: 4% 0 0; padding: 0; z-index: 2}
	.MyContent .line07 .line-cite .line-cite-text {position: relative; margin: 25px; padding: 30px; border: 2px solid #e5e5e5}
		.MyContent .line07 .line-cite .line-cite-text h3 {margin: 0; padding: 0; font-family: ClarinsRegular; font-size: 22px; font-weight: 400; line-height: 24px; text-align: right; color: #000}
		.MyContent .line07 .line-cite .line-cite-text p {margin: 25px 0 0; padding: 0; font-size: 11px; color: #8b8b8b; font-weight: 400; font-style: normal; text-align: right}
		.MyContent .line07 .line-cite .line-cite-text .Cit-Pic {position: absolute; width: auto; left: -10px}
		.about-bertrand {margin: 40px 0 0}
		.myFieldset {margin: 70px 0 40px; text-align: center; border: 2px solid #e5e5e5; z-index: 1}
			.myFieldset img {display: inline-block; position: relative; top: -22px; padding: 0 10px; background: #fff; z-index: 2}
			.myFieldset p {padding: 0 30px; position: relative; top: -15px}
				.myFieldset p span {color: #004e8f}
				.myFieldset p em {display: block; font-style: normal}
		.MyContent .line07 .prod {text-align: center}
		.MyContent .line07 .prod-text {padding: 65px 0 0}

/* LINE09 */
.MyContent .line09 {padding-top: 30px}
	.MyContent .line09 h3.myGothamH3 {font-family: "Gotham SSm medium A","Gotham SSm medium B",Helvetica,Arial,sans-serif; font-size: 22px; color: #000; line-height: 28px}
	.myPicto {text-align: center}
.about-solar-project {margin: 0 0 45px}
.MyContent .line09 .line-cite {background: #fff; margin: 4% 0 0; padding: 0; z-index: 2}
	.MyContent .line09 .line-cite .line-cite-text {position: relative; margin: 25px; padding: 30px 10px 30px 50px; border: 2px solid #e5e5e5}
		.MyContent .line09 .line-cite .line-cite-text h3 {margin: 0; padding: 0; font-family: ClarinsRegular; font-size: 22px; font-weight: 400; line-height: 24px; text-align: left; color: #000}
		.MyContent .line09 .line-cite .line-cite-text p {margin: 25px 0 0; padding: 0; font-size: 11px; color: #8b8b8b; font-weight: 400; font-style: normal; text-align: left}
		.MyContent .line09 .line-cite .line-cite-text .Cit-Pic {position: absolute; width: auto; left: -10px}


/* LARGE SCREENS */
@media screen and (max-width: 1249px) {
.MyContent .line03 {width: 100%; margin-left: 0; background-size: inherit}
}

/* TABLETS */
@media only screen and (max-width:768px) {
.MyContent .line h2 em {display: block}
.MyContent .line01 .MyVisual img {position: relative; left: 50%; margin: 0 0 0 -605px}
.MyContent .line06 .col-gutter {margin-left: 20px; margin-right: 20px}
.MyContent .line07 .line-cite, .MyContent .line09 .line-cite {margin: -10% 0 0}
.MyContent .line07 .img5 p, .MyContent .line09 .img6 p {display: none}
.about-bertrand {margin: 0}
.myFieldset p em {display: inline}
.myPicto img {display: block; width: 100%; position: relative; top: 50px}
}

/* SMARTPHONES/PHABLETS */
@media only screen and (max-width:761px) {
.MyContent .line01 .MyVisual img {width: 100%; left: auto; margin: 0 auto}
.MyContent .line01 .MyTextTop {margin: 0; height: auto}
.MyContent .line01 .MyTextTop h1 {font-size: 40px; line-height: 40px}
.MyContent .line01 .MyTextTop p {margin-top: 10px}
.MyContent .line02 .img1, .MyContent .line02 .img2, .MyContent .line03 .img3, .MyContent .line06 .img4 {float: none}
.myNoMargin {margin-top: 1em}
.MyContent .line02 .myTitleImg img {display: block; margin: 0 auto 10px}
.MyContent .line03 {background-size: cover}
.MyContent .line03 .parcours-excerpt {padding: 0 20px}
.MyContent .line03 .parcours-map img {display: block; width: 100%}
.MyContent .line03 p em {display: inline}
.MyImgPlane img {display: block; width: 100%}
.MyContent .line07 .line-cite, .MyContent .line09 .line-cite {margin: 0}
.MyContent .line07 .img5 p, .MyContent .line09 .img6 p {display: block}
.MyContent .line07 .line-cite .line-cite-text h3, .MyContent .line07 .line-cite .line-cite-text p,
.MyContent .line09 .line-cite .line-cite-text h3, .MyContent .line09 .line-cite .line-cite-text p {text-align: center}
.MyContent .line09 .line-cite .line-cite-text {padding: 30px}
.about-bertrand, .myFieldset p {padding: 0 20px}
.MyContent .line07 .prod-text {padding: 0 0 40px}
.MyContent .line09 .myPicto img {top: 0}
}