/* ##################################################################################################### */
/* ########################################  H O M E  ################################################## */
/* ##################################################################################################### */


/* ---------- SC1 ---------- */
.sc1 { width: 100%;height: 100vh;padding: 0px;overflow: hidden;background: #6d0197;position: relative;z-index: 1; }
.gradient { width: 200%;height: 120%;position: absolute;top: -50%;left: -50%;transform: rotate(30deg);
background: -moz-linear-gradient(top, rgba(31,0,103,1) 0%, rgba(31,0,103,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(31,0,103,1) 0%,rgba(31,0,103,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(31,0,103,1) 0%,rgba(31,0,103,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f0067', endColorstr='#001f0067',GradientType=0 ); /* IE6-9 */ }
.gradient.fixed { position: fixed; }

.sc1 .main-zone { width: 100%;height: calc(80vh - 10vh);position: absolute;bottom: 20vh;left: 0;overflow: hidden;z-index: 1;-webkit-transition: all 0.2s ease-in-out 0s;transition: all 0.2s ease-in-out 0s; }
.sc1 .main-zone .positionnement { width: 50vw;height: 100%;float: left; }
.sc1 .main-zone .content { position: relative;top: 50%;-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-ms-transform: translateY(-50%); transform: translateY(-50%);padding-left: calc(5vw + 30px); }
.sc1 .main-zone .content .switch { width: 80%;margin: 0 0 20px 0;background: #fff;border-radius: 40px;height: 50px;border: 2px solid #fff;position: relative; }
.sc1 .main-zone .content .switch .on { width: 49%;height: 46px;border-radius: 40px;background: #5e018e;position: absolute;top: 0px;z-index: 1;-webkit-transition: left 0.2s ease-in-out 0s;transition: left 0.2s ease-in-out 0s; }
.sc1 .main-zone .content .switch .on.left { left: 0px;right: inherit; }
.sc1 .main-zone .content .switch .on.right { right: 0px;left: inherit; }
.sc1 .main-zone .content .switch a { width: 49%;text-align: center;line-height: 46px;height: 46px;display: inline-block;position: relative;z-index: 2;color: #5e018e;font-weight: 700; }
.sc1 .main-zone .content .switch a.selected { color: #fff; }
.sc1 .main-zone .content .switch a.left { float: left; }
.sc1 .main-zone .content .switch a.right { float: right; }

.sc1 .main-zone .content h1 { color: #fff;font-weight: 800;font-size: 40px;margin: 0;-webkit-transition: all 0.2s ease-in-out 0s;transition: all 0.2s ease-in-out 0s; }
.sc1 .main-zone .content h1 span { display: block;font-weight: 300;margin: 3px 0 0 0;font-size: 40px; }
.sc1 .main-zone .content h1.part { font-size: 30px; }
.sc1 .main-zone .content h1.part span { font-size: 30px; }
.sc1 .main-zone .content .desc { color: #fff;margin: 30px 0 0 0;font-size: 16px; }
.sc1 .main-zone .content .cta-container { margin: 30px 0 0 0;text-align: left; }
.sc1 .main-zone .content .cta-container .cta { padding: 12px 30px; }

.sc1 .main-zone .city { width: 47vw;height: 100%;float: right;padding: 0 5vw 5vh 5vw; }
.sc1 .main-zone .city .illus  { /*background: url('../images/city/base.png');background-repeat: no-repeat;background-position: center;background-size: contain;*/height: 100%;width: 100%;position: relative; }
.sc1 .main-zone .city .illus .objet { -webkit-transition: all 0.1s ease-in-out 0s;transition: all 0.1s ease-in-out 0s; }
.sc1 .main-zone .city .illus .b1 { position: absolute;top: 243px;left: 349px;width: 83px;z-index: 6; }  
.sc1 .main-zone .city .illus .b2 { position: absolute;top: 363px;left: 236px;width: 104px;z-index: 6; }  
.sc1 .main-zone .city .illus .b3 { position: absolute;top: 338px;left: 439px;width: 98px;z-index: 6; }
.sc1 .main-zone .city .illus .b4 { position: absolute;top: 319px;left: 538px;width: 90px;z-index: 6; }
.sc1 .main-zone .city .illus .b5 { position: absolute;top: 193px;left: 438px;width: 87px;z-index: 5; }
.sc1 .main-zone .city .illus .b6 { position: absolute;top: 202px;left: 503px;width: 92px;z-index: 4; }
.sc1 .main-zone .city .illus .b7 { position: absolute;top: 123px;left: 411px;width: 89px;z-index: 3; }
.sc1 .main-zone .city .illus .b8 { position: absolute;top: 72px;left: 318px;width: 86px;z-index: 3; }
.sc1 .main-zone .city .illus .b9 { position: absolute;top: 168px;left: 233px;width: 86px;z-index: 3; }
.sc1 .main-zone .city .illus .b10 { position: absolute;top: 113px;left: 218px;width: 89px;z-index: 2; }
.sc1 .main-zone .city .illus .b11 { position: absolute;top: 198px;left: 147px;width: 86px;z-index: 2; }
.sc1 .main-zone .city .illus .b12 { position: absolute;top: 266px;left: 134px;width: 86px;z-index: 2; }
.sc1 .main-zone .city .illus .b13 { position: absolute;top: 280px;left: 64px;width: 85px;z-index: 1; }
.sc1 .main-zone .city .illus .road { position: absolute;top: 324px;left: 0px;width: 650px;z-index: 0; }
.sc1 .main-zone .city .illus .road.off { opacity: 0; }
.sc1 .main-zone .city .illus .road.on { opacity: 1; }
.sc1 .main-zone .city .illus .v1 { position: absolute;width: 77px;top: 331px;left: 634px;z-index: 4;opacity: 0; }
.sc1 .main-zone .city .illus .v2 { position: absolute;top: 404px;left: 374px;width: 50px;z-index: 4;opacity: 0; }
.sc1 .main-zone .city .illus .v3 { position: absolute;top: 279px;left: -35px;width: 53px;z-index: 0;opacity: 0; }
.sc1 .main-zone .city .illus .rail { position: absolute;top: 275px;left: 50px;width: 450px;z-index: 3; }
.sc1 .main-zone .city .illus .rail.off { opacity: 0; }
.sc1 .main-zone .city .illus .rail.on { opacity: 1; }
.sc1 .main-zone .city .illus .train { position: absolute;top: 91px;left: 611px;width: 177px;z-index: 3;opacity: 0; }
.sc1 .main-zone .city .illus .off { transform: scale(0); }
.sc1 .main-zone .city .illus .on { transform: scale(1); }
.sc1 .main-zone .city .illus .v1.move { animation: moveCamion 4s linear infinite forwards;animation-delay: 0.30s; }
.sc1 .main-zone .city .illus .v2.move { animation: moveTaxi 3s linear infinite forwards;animation-delay: 0.30s; }
.sc1 .main-zone .city .illus .v3.move { animation: moveCamionnette 4s linear infinite forwards;animation-delay: 1.3s; }
.sc1 .main-zone .city .illus .train.move { animation: moveTrain 7s linear infinite forwards;animation-delay: 0.30s; }

@keyframes moveCamion {
	0% { top: 331px;left: 634px;opacity: 0; }
	5% { opacity: 1; }
	90% { opacity: 1; }
	100% { top: 567px;left: 241px;opacity: 0; }
}
@keyframes moveTaxi {
	0% { top: 404px;left: 374px;opacity: 0; }
	5% { opacity: 1; }
	90% { opacity: 1; }
	100% { top: 587px;left: 680px;opacity: 0; }
}
@keyframes moveCamionnette {
	0% { top: 279px;left: -35px;opacity: 0; }
	5% { opacity: 1; }
	90% { opacity: 1; }
	100% { top: 624px;left: 547px;opacity: 0; }
}
@keyframes moveTrain {
	0% { top: 91px;left: 611px;opacity: 0; }
	5% { opacity: 0; }
	10% { opacity: 0.5; }
	15% { opacity: 1; }
	35% { opacity: 1; }
	40% { opacity: 0; }
	45% { opacity: 0;top: 549px;left: -191px; }
	100% { opacity: 0;top: 549px;left: -191px; }
}


.sc1 .main-zone .illus-zone { width: 47vw;height: 100%;float: right;padding: 0;position: relative;display: none; }
.sc1 .main-zone .illus-zone .illus-main { position: relative;height: 100%;text-align: center; }
.sc1 .main-zone .illus-zone .illus-main img { height: 100%;-webkit-transition: all 0.2s ease-in-out 0s;transition: all 0.2s ease-in-out 0s;position: absolute;right: -5vw;bottom: -10vh; }


.sc1 .foot { width: 100%;height: 20vh;border-top: 1px solid rgba(255,255,255,0.3);position: absolute;bottom: 0;left: 0; }
.sc1 .foot .metier { width: 25%;border-right: 1px solid rgba(255,255,255,0.3);height: 100%;float: left;cursor: pointer;-webkit-transition: all 0.2s ease-in-out 0s;transition: all 0.2s ease-in-out 0s;padding: 4vh 3vw; }
.sc1 .foot .metier.on { padding: 2vh 2vw; }
.sc1 .foot .metier .titre { color: #fff;font-weight: 600;font-size: 19px;margin: 0 0 3px 0; }
.sc1 .foot .metier .titre i { float: right;line-height: 27px;opacity: 0.3; }
.sc1 .foot .metier .desc { color: rgb(255 255 255 / 0.5);font-weight: 400; }
.sc1 .foot .metier .actions { width: 100%;opacity: 0;-webkit-transition: all 0.3s ease-in-out 0s;transition: all 0.3s ease-in-out 0s;margin: 14px 0 0 0; }
.sc1 .foot .metier .actions a { display: inline-block;color: #f2c122;font-weight: 600;margin: 0 30px 0 0; }
.sc1 .foot .metier.on > .actions { opacity: 1; }
.sc1 .foot .metier.on > .titre i { opacity: 1; }


/* ##################################################################################################### */
/* ##################################  R E S P O N S I V E  ############################################ */
/* ##################################################################################################### */
@media (max-width: 1199px) {
	.sc1 .main-zone .content .switch { width: 90%; }
	.sc1 .main-zone .illus-zone .illus-main img { width: 110%; }
}
@media (max-width: 991px) {
	.sc1 { height: auto; }
	.sc1 .main-zone .content .switch { width: 60%; }
	.sc1 .foot { height: auto;float: left;position: relative; }
	.sc1 .foot .metier { width: 100% !important; }
	.sc1 .foot .metier, .sc1 .foot .metier.on { padding: 3vh 5vw; }
	.sc1 .main-zone { position: relative;bottom: inherit;float: left;height: auto; }
	.sc1 .main-zone .positionnement { width: 100%;height: auto; }
	.sc1 .main-zone .content { top: 100px;transform: none;padding: 8vw 5vw; }
	.sc1 .main-zone .city { width: 100%;height: 700px;margin: 40px 0 0 0; }
	.sc1 .main-zone .city .illus { margin: 40px 0 0 0; }
	.sc1 .main-zone .illus-zone { height: 500px;width: 100vw; }
	.sc1 .main-zone .illus-zone .illus-main { height: 100%;width: 100%; }
	.sc1 .main-zone .illus-zone .illus-main img { right: 0;width: inherit;height: 100%; }
}
@media (max-width: 850px) {
	.sc1 .main-zone .content .switch { width: 70%; }
}
@media (max-width: 768px) {
	.sc1 .main-zone .content .switch { width: 100%;background: rgba(255,255,255,0.4);border: 2px solid rgba(255,255,255,0); }
	.sc1 .main-zone .city { transform: scale(0.5);height: 400px;margin: 0; }
	.sc1 .main-zone .content .switch a { font-size: 18px;padding: 7px 0 0 0;line-height: 14px; }
	.sc1 .main-zone .content .switch a span { display: block;font-size: 10px;font-weight: 400; }
}
@media (max-width: 540px) {
	.sc1 .main-zone .content h1 { font-size: 35px; }
	.sc1 .main-zone .content h1 span { font-size: 30px; }
	.sc1 .foot .metier .desc { font-size: 16px; }
}