/* ############################################################################################## */
/* #######################################  H O M E  ############################################ */
/* ############################################################################################## */
.wrapper-home { width: 100%;height: 100%;position: absolute;top: 0;left: 0;transform-style: preserve-3d;overflow: hidden; }
.pt-page { width: 100%;height: 100%;position: absolute;top: 0;left: 0;overflow: hidden; }

.phone .num-small { position: absolute;width: 180px;text-align: center;font-weight: 800;padding: 10px 20px;font-size: 20px;border: 1px solid #fff;bottom: -42px;left: 42px;border-radius: 10px;display: none; }
.phone .num-small a { color: #fff;text-decoration: none; }


/* ##################################### screen 1 ##################################### */
.screen1 { background: #33b499;opacity: 1;z-index: 2; }
.screen1 .form-deco { height: 150%;width: 40%;position: absolute;right: -100px;top: -100px;background: #2cc1a2;-ms-transform: rotate(15deg);-webkit-transform: rotate(15deg);transform: rotate(15deg);z-index: 1; }
.screen1 .accroche { position: absolute;margin: 5vmax 0 0 5vmax;top: 0px;left: 0px;z-index: 50;text-align: center; }
.screen1 .accroche .baseline { color: #fff;font-family: 'Raleway';text-transform: uppercase;float: left;margin: 0 0 60px 0; }
.screen1 .accroche .baseline .discover { font-size: 63px;font-weight: 300;line-height: 63px; }
.screen1 .accroche .baseline .appli { font-size: 19.5px;font-weight: 300;line-height: 25px;margin: 15px 0 0 0;text-align: left; }
.screen1 .accroche .baseline .appli .bold { font-weight: 600; }
.screen1 .accroche .logo { float: left;width: 100%;text-align: center;margin: 0 0 30px 0;display: inline-block; }
.screen1 .accroche .logo img { -webkit-transition: all 500s ease-in;-moz-transition: all 500ms ease-in;
	-ms-transition: all 500ms ease-in;-o-transition: all 500ms ease-in;transition: all 500ms ease-in;display: inline-block; }
.screen1 .accroche .explain-responsive { width: 100%;text-align: center;float: left; }
.screen1 .accroche .explain-responsive a { display: inline-block;width: 80px;height: 80px;text-align: center;border-radius: 50%;line-height: 80px;border: 1px solid #fff;position: relative;margin: 0 10px; }
.screen1 .accroche .explain-responsive .resp { background-image: url('../images/ic/ic_responsive.png');background-repeat: no-repeat;background-position: center;background-size: 50px auto; }
.screen1 .accroche .explain-responsive .temoignages { background-repeat: no-repeat;background-position: center;background-size: 101%; }
.screen1 .accroche .explain-responsive .temoignages .mini-stars { width: 100%;display: block;position: absolute;bottom: -48px;left: 0px; }
.screen1 .accroche .explain-responsive .temoignages .mini-stars img { width: 100%; }
.screen1 .accroche .explain-responsive a i { display: block;color: #fff;position: absolute;top: -8px;right: -6px;font-size: 30px; }
.screen1 .accroche .explain-responsive a:hover { border-color: #4fd8bb; }
.screen1 .brands { position: absolute;margin: 5vmax 5vmax 0 0;top: 0px;right: 0px;text-align: right;width: 270px;z-index: 50; }
.screen1 .brands img { display: block;float: right;margin: 0 0 10px 0; }
.screen1 .brands .logo-immo-one { width: 55%; }
.screen1 .brands .logo-by-alveen { width: 55%; }
.skin-menu-1 { width: 100%;position: absolute;bottom: 0;height: 70px;z-index: 101;background: #139b7e; }


/* -----> slide horizontal */
#bgElements { height: 100%; }
/* .swiper-container { width: 10000px; } */
.swiper-slide { padding: 0 !important;float: left; }
.swiper-slide .nav { position: absolute;z-index: 200; }
.swiper-slide .nav .step { color: #066f52;font-size: 30px;font-weight: 800;display: block; }
.swiper-slide .nav .overview { color: #fff;text-transform: uppercase;font-weight: 400;font-size: 12px;line-height: 13px;display: block; }
.swiper-slide .nav.right { text-align: right;right: 5vmax; }
.swiper-slide .nav.right:before { font-family: FontAwesome;content: "\f105";display: block;position: absolute;height: 75px;line-height: 75px;font-size: 35px;color: #fff !important;right: -35px; }
.swiper-slide .nav.right .step { text-align: right; }
.swiper-slide .nav.right .overview { text-align: right; }
.swiper-slide .nav.left { text-align: left;left: 5vmax; }
.swiper-slide .nav.left:before { font-family: FontAwesome;content: "\f104";display: block;position: absolute;height: 75px;line-height: 75px;font-size: 35px;color: #fff !important;left: -35px; }
.swiper-slide .nav.left .step { text-align: left; }
.swiper-slide .nav.left .overview { text-align: left; }

/* ----- PART 1 */
#part1-1 { display: block;height: 100%; }
/* listing e2 screen1 */
.e2-view { 
	position: absolute;transform-style: preserve-3d;height: 1400px;bottom: -300px;left: 0;transform-origin: 50% 100%;z-index: 10;transform: translateX(0) rotateX(45deg) rotateZ(45deg);opacity: 0;
	-webkit-transition: all 500s ease-in;
	-moz-transition: all 500ms ease-in;
	-ms-transition: all 500ms ease-in;
	-o-transition: all 500ms ease-in;
	transition: all 500ms ease-in;
}
.e2-view img { width: 100%; }
.e2-view .point-marker { position: absolute;width: 1px;height: 1px;background: #000;top: 0px;right: 0px;display: inline-block; }

/* ----- PART 2 */
#part1-2 { display: block;height: 600px; }
.smartphone { height: 100%;float: left;padding-top: 5vw;position: relative;display: none;margin-left: 5vw;width: 43vw; }
.smartphone img { width: 100%;max-width: 600px; }
.smartphone .accroche-2 { position: absolute;display: block;width: 480px;left: 400px;display: none;-webkit-transition: all 200s ease-in;
	-moz-transition: all 200ms ease-in;-ms-transition: all 200ms ease-in;-o-transition: all 200ms ease-in;transition: all 200ms ease-in; }
.smartphone .accroche-2 h2 { font-size: 35px;font-weight: 400;line-height: 38px;text-align: left;display: inline-block;margin: 0 0 30px 0;text-transform: uppercase; }
.smartphone .accroche-2 h2 sup { font-size: 21px; }
.smartphone .accroche-2 p { width: 100%;font-size: 23px;text-align: left;line-height: 30px; }
.key-points { height: 100%;float: right;padding-top: 5vw;position: relative;margin: 0 5vw 0 0px;width: 40vw; }
.key-points .key { position: relative;display: block;height: 80px;width: 250px;opacity: 0; }
.key-points .key .bulle { background: #fff;width: 80px;height: 80px;line-height: 80px;border-radius: 50%;text-align: center;position: absolute;top: 0px;left: 0px; }
.key-points .key .bulle img { height: 40px; }
.key-points .key .link { display: inline-block;position: absolute;top: 0px;left: 95px;color: #fff;text-transform: uppercase;width: 260px;text-align: left;font-size: 14px;line-height: 17px;font-weight: 300;padding-top: 20px; }
.key-points .key.complet { margin-left: 0px; }
.key-points .key.simple { margin-left: 115px;margin-top: 15px; }
.key-points .key.notif { margin-left: 192px;margin-top: 38px; }
.key-points .key.experience { margin-left: 219px;margin-top: 50px; }
.key-points .key.international { margin-left: 207px;margin-top: 55px; }

/* ----- PART 3 */
#part1-3 { display: block;height: 100%; }
.smiley { width: 100%;text-align: center;position: relative;margin-top: -40px;opacity: 0; }
.smiley .emo { width: auto;height: 340px;display: inline-block;position: relative;overflow: hidden; }
.smiley .emo img { height: 100%; }
.smiley .emo .mask { width: 100%;height: 180px;position: absolute;bottom: 0px;left: 0px;background: #33b499; }
.besoin { width: 100%;text-align: center;position: relative;text-transform: uppercase; }
.besoin h2 { font-size: 35px;font-weight: 400;line-height: 38px;margin: 30px 0 30px 0;width: 100%; }
.besoin .items { width: 100%;font-size: 20px;color: #000;font-weight: 700;padding: 0;list-style: none;margin: 0 0 40px 0; }
.besoin .items li { width: 100%;line-height: 27px; }
.besoin .action { width: 100%;text-align: center; }
.besoin .action .but { display: inline-block;position: relative;font-size: 16px;color: #fff !important;text-transform: uppercase;line-height: 20px;padding: 20px 40px;border: 1px solid #fff;font-weight: 700; }
.besoin .action .but span { display: inline-block;position: relative; }
.besoin .action .but span .notre { position: absolute;top: 5px;left: 5px; }
.besoin .action .but span .notre img { width: 270px; }
.besoin .action .but:hover { background: #fff;color: #000 !important; }

/* ----- PART 4 */
#part1-4 { display: block;height: 100%;overflow: hidden; }
.resume-title { width: 100%;text-align: center;position: relative;z-index: 7; }
.resume-title h2 { font-size: 42px;font-weight: 300;line-height: 46px;margin: 80px 0 30px 0;width: 100%;text-transform: uppercase; }
.resume-title h2 span { text-transform: none; }
.plane-anim { width: 100%;height: 800px;position: absolute;z-index: 0;left: 0;top: 120px;opacity: 0; }
.plane-anim .cloud1 { width: 100%;height: 400px;position: absolute;background: url('../images/cloud1.png') no-repeat 0px 150px;    -webkit-animation: mcloud1 1500ms infinite linear;-moz-animation: mcloud1 1500ms infinite linear;animation: mcloud1 1500ms infinite linear; }
@-webkit-keyframes mcloud1 {
    from {left: 2000px;top: 0px;}
    to {left: -550px;top: 150px;}
}
@keyframes mcloud1 {
    from {left: 2000px;top: 0px;}
    to {left: -550px;top: 150px;}
}
.plane-anim .cloud2 { width: 100%;height: 400px;position: absolute;background: url('../images/cloud2.png') no-repeat 0px 0px;    -webkit-animation: mcloud2 1100ms infinite linear;-moz-animation: mcloud2 1100ms infinite linear;animation: mcloud2 1100ms infinite linear; }
@-webkit-keyframes mcloud2 {
    from {left: 2000px;top: 0px;}
    to {left: -550px;top: 80px;}
}
@keyframes mcloud2 {
    from {left: 2000px;top: 0px;}
    to {left: -550px;top: 80px;}
}
.plane-anim .cloud3 { width: 100%;height: 400px;position: absolute;background: url('../images/cloud3.png') no-repeat 0px 200px;    -webkit-animation: mcloud3 1700ms infinite linear;-moz-animation: mcloud3 1700ms infinite linear;animation: mcloud3 1700ms infinite linear; }
@-webkit-keyframes mcloud3 {
    from {left: 2000px;top: 100px;}
    to {left: -550px;top: 150px;}
}
@keyframes mcloud3 {
    from {left: 2000px;top: 100px;}
    to {left: -550px;top: 150px;}
}
.plane-anim .cloud4 { width: 100%;height: 400px;position: absolute;background: url('../images/cloud4.png') no-repeat 0px 200px;-webkit-animation: mcloud4 1800ms infinite linear;-moz-animation: mcloud4 1800ms infinite linear;animation: mcloud4 1800ms infinite linear; }
@-webkit-keyframes mcloud4 {
    from {left: 1500px;top: 100px;}
    to {left: -550px;top: 150px;}
}
@keyframes mcloud4 {
    from {left: 1500px;top: 100px;}
    to {left: -550px;top: 150px;}
}
.plane-anim .plane-wrapper { width: 450px;height: 201px;position: absolute;left: -800px;top: 25%;-webkit-animation: plane 1700ms infinite linear;-moz-animation: plane 1700ms infinite linear;animation: plane 1700ms infinite linear; }
.plane-anim .plane-wrapper .plane { width: 100%;height: 100%;position: absolute;background: url('../images/plane.png') no-repeat center top;background-size: 100%;z-index: 2; }
@keyframes plane {
    0% { margin-top: 0px; }
	50% { margin-top: 20px; }
	100% { margin-top: 0px; }
}
.plane-anim .plane-wrapper .poussee { position: absolute;width: 165px;height: 57px;background: url('../images/poussee.png') no-repeat center top;background-size: cover;top: 51%;left: -135px;z-index: 1;-webkit-animation: poussee 100ms infinite linear;-moz-animation: poussee 100ms infinite linear;animation: poussee 100ms infinite linear;opacity: 0; }
#part1-4 .mask { height: 150%;width: 40%;position: absolute;right: -100px;top: -100px;background: #2cc1a2;-ms-transform: rotate(15deg);-webkit-transform: rotate(15deg);transform: rotate(15deg);z-index: 1; }
@keyframes poussee {
    0% { opacity: 0; }
	50% { opacity: 0.3; }
	100% { opacity: 0; }
}
.resume { width: 100%;position: absolute;z-index: 7;bottom: 7vw; }
.resume p { width: 100%;margin: 0 auto;max-width: 800px;font-size: 18px;text-align: justify;line-height: 23px; }
.resume p .action { width: 100%;text-align: center;display: block; }
.resume p .action a { display: inline-block;position: relative;font-size: 16px;color: #fff !important;text-transform: uppercase;line-height: 20px;padding: 30px 50px;background: #2c3e50;font-weight: 700;margin-top: 30px; }
.resume p .action a:hover { background: #252d4e; }



/* ##################################### screen 2 ##################################### */
.screen2 { background: #ff9933;opacity: 1;z-index: 1;overflow: hidden; }
.screen2 .wrapper-vertical { width: 100%;position: absolute;top: 0px;left: 0px; }
.screen2 .design { width: 100%;position: relative;padding: 0 5vw;overflow: hidden; }
.screen2 .form-deco { height: 150%;width: 60%;position: absolute;right: -200px;top: -200px;background: #ffa64d;-ms-transform: rotate(-15deg);-webkit-transform: rotate(-15deg);transform: rotate(-15deg); }
.screen2 .illus { position: absolute;right: 110px; }
.screen2 .illus.batslap { bottom: 50px;left: 100px;width: 850px; }
.screen2 .illus.chess { top: 40px;right: 0px; }
.screen2 .illus.echiquier { bottom: 69px;left: 0px; }
.screen2 .illus.vitrine1 { height: 100%; }
.screen2 .illus.vitrine2{ width: 100px; }
.screen2 .accroche { position: absolute;margin: 5vmax 0 0 5vmax;top: 0px;left: 0px;z-index: 50; }
.screen2 .accroche h1, .screen2 .accroche h2 { color: #fde1c4;font-family: 'Raleway';text-transform: uppercase;float: left;margin: 0 0 60px 0;font-size: 55px;font-weight: 300;line-height: 51px;letter-spacing: -0.03em; }
.screen2 .accroche h1 span, .screen2 .accroche h2 span { font-weight: 600;color: #fff; }
.screen2 .accroche.part { position: relative;float: left;top: inherit;left: inherit;margin: 5vmax 0 0 0;width: 100%; }
.screen2 .accroche h2 { font-size: 45px;line-height: 41px; }
.screen2 .word-block { width: 503px;height: 600px;position: absolute;opacity: 0; }
.screen2 .word-block .trame { position: absolute;top: 0px;left: 0px; }
.screen2 .word-block .identite { position: absolute;top: 161px;left: 0px;z-index: 3;opacity: 0; }
.screen2 .word-block .web { position: absolute;top: 93px;left: 211px;z-index: 2;opacity: 0; }
.screen2 .word-block .d { position: absolute;top: 1px;left: 212px;z-index: 3;opacity: 0; }
.screen2 .word-block .logo { position: absolute;top: 349px;left: 159px;z-index: 2;opacity: 0; }
.screen2 .word-block .n { position: absolute;top: 469px;left: 212px;z-index: 1;opacity: 0; }
.screen2 .word-block .s { position: absolute;top: 219px;left: 269px;z-index: 4;opacity: 0; }
.screen2 .word-block-entire { display: none; }
.screen2 .word-block-entire img { width: 60%;height: auto; }
.screen2 .metiers { position: absolute;padding: 0 25px 120px 0;bottom: 0px;right: 0px; }
.screen2 .metiers a { display: block;margin: 17px 0 0 0;color: #000;text-transform: uppercase;font-size: 15px;font-weight: 600;line-height: 17px;text-decoration: none; }
.screen2 .metiers a:hover { color: #fff; }
.screen2 .metiers .selected { color: #fff; }
.screen2 .metiers .menu-metiers { position: absolute;top: -45px;right: 40px;display: inline-block;font-size: 0px;color: #000;cursor: pointer;-webkit-transition: all 200s ease-in;-moz-transition: all 200ms ease-in;-ms-transition: all 200ms ease-in;-o-transition: all 200ms ease-in;transition: all 200ms ease-in;cursor: pointer; }
.screen2 .reduce a { margin: 8px 0 0 0;font-size: 12px;line-height: 13px; }	
.screen2 .metiers .nav-metier { display: block; }
.screen2 .metiers .nav-metier-home { display: none; }
.screen2 .intro-memo { width: 40%;float: left; }
.screen2 .content-right { width: 35%;float: right;position: relative; }
.screen2 .intro-memo p, .screen2 .content-right p { color: #fff;font-size: 18px;text-align: left;line-height: 30px;margin: 0 0 40px 0;padding-right: 40px; }
.screen2 .intro-memo p .action, .screen2 .content-right p .action { display: block;width: 100%;text-align: left; }
.screen2 .intro-memo p .action a, .screen2 .content-right p .action a { display: inline-block;position: relative;font-size: 15px;color: #fff !important;text-transform: uppercase;line-height: 20px;padding: 20px 30px;background: #333;font-weight: 700;margin-top: 60px; }
.screen2 .intro-memo p .action a:hover, .screen2 .content-right p .action a:hover { background: #fff;color: #333 !important; }
.screen2 .quote-bruce-lee p { color: #222;font-family: 'Oswald', sans-serif;font-weight: 500;text-transform: uppercase;font-size: 25px;letter-spacing: -0.03em;margin: 0;line-height: 32px; }
.screen2 .quote-bruce-lee p.signature { margin: 30px 0 60px 0;font-size: 20px; }
.screen2 .quote-bruce-lee .fa-quote-left { position: absolute;color: #222;font-size: 40px;top: -13px;left: -20px; }
.screen2 .quote-bruce-lee .fa-quote-right { color: #222;font-size: 20px; }
.skin-menu-2 { width: 100%;position: absolute;bottom: 0;height: 70px;z-index: 101;background: #ff9933;box-shadow: -10px -10px 200px rgba(0,0,0,0.5); }
.illus-sm { display: none;width: 100%;text-align: center;padding: 20px 0;float: left; }
.illus-sm .sm { width: 20%; }
.illus-sm .md { width: 50%; }
.illus-sm .lg { width: 100%; }



	
/* ##################################### screen 3 ##################################### */
.screen3 { background: #98c953;opacity: 1;z-index: 1; }
#embed-panono { width: 100%;height: 100%;opacity: 0; }
.content-panono { width: 100%;height: 100%;position: absolute;top: 0px;left: 0px;z-index: 2; }
.content-panono .header { text-align: center;z-index: 3;width: 100%;top: 0px;left: 0px;position: absolute;height: calc(100% - 5vw);padding: 5vw 0 0 0; }
.content-panono .content-header { width: 100%;float: left; }
.content-panono .header h1 { width: 100%;font-weight: 300;font-size: 24px;letter-spacing: -0.03em;color: #fff;text-transform: uppercase;margin: 0 0 20px 0; }
.content-panono .header h1 span { font-weight: 600; }
.content-panono .header .logo-produit { position: relative;width: 700px;opacity: 1; }
.content-panono .header h2 { width: 100%;font-weight: 300;font-size: 36px;letter-spacing: -0.03em;color: #fff;text-transform: uppercase;margin: 20px 0 0 0;float: left; }
.content-panono .header h2 span { font-weight: 700;color: #75e605; }
.content-panono .header .action { float: left;width: 100%;text-align: center;margin: 40px 0 0 0;position: relative;z-index: 5; }
.content-panono .header .action a { display: inline-block;font-size: 16px;color: #fff !important;text-transform: uppercase;line-height: 20px;padding: 20px 40px;border: 1px solid #fff;font-weight: 700; }
.content-panono .header .action a:hover { background: #fff;color: #000 !important; }
.content-panono .footer { width: 100%;position: absolute;overflow: hidden;height: 100%;bottom: 0px;left: 0px; }
.content-panono .footer .white-bg { width: 130%;position: absolute;height: 300px;background: #fff;left: -15%;bottom: -120px;-ms-transform: rotate(-6deg);-webkit-transform: rotate(-6deg);transform: rotate(-6deg);z-index: 5; }
.content-panono .footer ._panono { position: absolute;right: 100px;bottom: 100px;z-index: 7;cursor: pointer; }
.content-panono .footer ._camera { position: absolute;right: 330px;bottom: 125px;z-index: 6;cursor: pointer; }
.content-panono .footer ._camera img { width: 230px; }
.content-panono #lineProduit { width: 100%;height: 100%;position: absolute;top: 0px;left: 0px; }
.content-panono #lineProduit line { fill: none;stroke: white;stroke-width: 2px; }
.content-panono #lineProduit circle { fill: white; }
.content-panono .footer ._camera .name { position: absolute;bottom: -15px;left: -34px;text-align: right;color: #000;font-weight: 400;font-size: 18px;line-height: 20px; }
.content-panono .footer ._camera .name span { display: block;font-weight: 800;font-size: 23px; }
.content-panono .footer ._panono .name { position: absolute;bottom: 10px;left: 185px;text-align: left;color: #000;font-weight: 400;font-size: 18px;line-height: 20px; }
.content-panono .footer ._panono .name span { display: block;font-weight: 800;font-size: 23px; }
.skin-menu-3 { width: 100%;position: absolute;bottom: 0;height: 70px;z-index: 101;background: #78b02a;box-shadow: -10px -10px 200px #505050; }



/* common wrapper */
.wrapper-content { position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;z-index: 1; }
.always-visible-first-screen { position: absolute;top: 0px;left: 0px;height: 100%; }

/* MENU */
.menu { width: 100%;position: absolute;bottom: 0;height: 70px;z-index: 102;text-align: center; }
.menu a { color: #fff !important;font-size: 16px;text-transform: uppercase;display: inline-block;padding: 25px 30px;text-decoration: none !important;font-weight: 600;cursor: pointer; }
.menu a:hover { text-decoration: none !important; }
.menu .intercom { position: absolute;bottom: 16px /*55px*/;background: #333;width: 40px;line-height: 40px;border-radius: 50%;height: 40px;font-size: 20px;right: 19px;padding: 0; }
.menu .intercom .circle { position: absolute;top: 0; left: 0;width: 40px;height: 40px;border-radius: 50%;border: 2px solid #333;display: block;-webkit-animation: movingcircle 6s infinite linear;-moz-animation: movingcircle 6s infinite linear;animation: movingcircle 6s infinite linear;background: transparent; }
@keyframes movingcircle {
    0% { left: 0px;top: 0px;width: 40px;height: 40px;opacity: 1;background: transparent; }
    8% { left: -30px;top: -30px;width: 100px;height: 100px;opacity: 0;background: #fff; }
	100% { left: 0px;top: 0px;width: 40px;height: 40px;opacity: 0;background: transparent; }
}

.menu .support { position: absolute;top: 0px;right: 139px;padding: 25px 10px 23px 10px; }
.menu .support i { font-size: 20px; }
.menu .tel { position: absolute;top: 0px;right: 103px;padding: 25px 10px 23px 10px; }
.menu .tel i { font-size: 20px; }
.menu .tel .num-small { position: absolute;width: 180px;text-align: center;font-weight: 800;background: #333;padding: 10px 20px;    font-size: 20px;top: -36px;right: 14px;border-radius: 10px;display: none; }

.menu .alveen { position: absolute;top: 0px;right: 65px;padding: 21px 10px 23px 10px; }
.menu .whatelse { position: relative;display: inline-block; }
.menu .whatelse a { position: relative;z-index: 5; }
.menu .whatelse .submenu { position: absolute;width: 150px;height: 150px;text-align: center;bottom: -230px;border-radius: 50%;line-height: 131px;background: #139b7e; }
.menu .whatelse .submenu img { width: 60px; }
.menu .whatelse .submenu .picto { position: absolute;background: none;height: 40px;width: 40px;line-height: 40px;padding: 0; }
.menu .whatelse .submenu .picto img { width: 100%; }
.menu .whatelse .submenu .picto.fb { top: -60px;left: 55px; }
.menu .whatelse .submenu .picto.tw { top: -45px;left: -4px; }
.menu .whatelse .submenu .picto.gg { top: -45px;left: 113px; }
.menu .whatelse .submenu.turquoise { background: #139b7e; }
.menu .whatelse .submenu.orange { background: #ff9933; }
.menu .whatelse .submenu.green { background: #78b02a; }
.menu .whatelse .submenu .lk-blog { padding: 0; }
.menu-sm { position: absolute;width: 100%;top: 0px;left: 0px;display: none;padding: 50px 40px 40px 40px;z-index: 10;background: rgba(0,0,0,0.9);height: 100%; }
.menu-sm a { width: 100%;display: block;float: left;text-transform: uppercase;padding: 4px 0 4px 0;font-size: 18px;color: #fff;text-align: center;border: 1px solid #fff;margin: 10px 0 0 0; }
.menu-sm a:hover { background: #fff;color: #000; }
.tog-menu-sm { position: absolute;top: 0px;right: 20px;z-index: 11;display: none;color: #fff;font-size: 21px;width: 50%;text-align: right;padding: 10px 0px; }
.tog-menu-sm:hover, .tog-menu-sm:visited, .tog-menu-sm:focus { color: #fff; }
.menu-sm .sub { font-size: 14px;border: none;padding: 5px 0 0 0;margin: 5px 0; }
.menu-sm .what-box { width: 100%;display: block;float: left;margin: 10px 0 0 0;text-align: center;padding: 10px; }
.menu-sm .what-box a { width: 40px;border: 0px;display: inline-block;margin: 0 10px;float: none; }
.menu-sm .what-box a img { width: 40px; }


#debug { position: absolute;top: 0px;right: 0px;background: #fff;color: #000;display: none;padding: 10px; }

/* ############################################################################################## */
/* ##################################  R E S P O N S I V E  ##################################### */
/* ############################################################################################## */
/* CONDITIONS SUR LA LARGEUR */
@media (max-width: 1700px) {
	.content-panono .header .logo-produit { width: 500px; }
	.content-panono .header h2 { font-size: 30px; }
}
@media (max-width: 1650px) {
	.screen2 .illus.chess { top: 190px;width: 500px; }
	.screen2 .illus.echiquier { width: 600px; }
}
@media (max-width: 1650px) {
	.screen2 .quote-bruce-lee p { font-size: 18px;line-height: 23px; }
	.screen2 .quote-bruce-lee p.signature { margin: 20px 0 20px 0;font-size: 18px; }
	.screen2 .bruce { width: 250px; }
	.screen2 .water { width: 300px; }
	.screen2 .quote-bruce-lee .fa-quote-left { font-size: 25px;top: -7px;left: -13px; }
	.screen2 .quote-bruce-lee .fa-quote-right { font-size: 15px; }
	.screen2 .intro-memo p { line-height: 27px; }
	.screen2 .content-right { width: 32%; }
	.screen2 .content-right p { padding: 0px;line-height: 27px; }
}
@media (max-width: 1500px) {
	.screen1 .accroche { margin: 4vmax 0 0 4vmax; }
	.screen1 .accroche .logo img { width: 130px; }
	.screen1 .brands { margin: 4vmax 4vmax 0 0; }
	.e2-view { left: -250px; }
	#menu ul li { font-size: 12px; }
	.smartphone { width: 35vw;margin-left: 7vw;padding-top: 15vw; }
	.smartphone .accroche-2 { width: 380px; }
	.smartphone .accroche-2 h2 { font-size: 25px;line-height: 28px;margin: 0 0 15px 0; }
	.smartphone .accroche-2 h2 sup { font-size: 15px; }
	.smartphone .accroche-2 p { font-size: 17px;line-height: 23px; }
	.key-points { width: 45vw; }
	.key-points .key .bulle { width: 70px;height: 70px;line-height: 70px; }
	.key-points .key .bulle img { height: 35px; }
	.key-points .key .link { left: 84px;padding-top: 17px; }
	.resume-title h2 { font-size: 32px;line-height: 36px; }
	.plane-anim { top: 80px; }
	.plane-anim .plane-wrapper { width: 300px;height: 134px; }
	.plane-anim .plane-wrapper .poussee { width: 110px;height: 38px;left: -88px; }
	.resume { bottom: 9vw; }
	.resume p { font-size: 16px;line-height: 20px; }
	.screen2 .accroche h1 { font-size: 45px;line-height: 42px; }
	.screen2 .word-block { width: 335px;height: 400px; }
	.screen2 .word-block .trame { width: 335px; }
	.screen2 .word-block .identite { width: 335px;top: 107px; }
	.screen2 .word-block .logo { width: 193px;top: 232px;left: 106px; }
	.screen2 .word-block .web { width: 159px;top: 62px;left: 141px; }
	.screen2 .word-block .d { width: 99px;top: 0px;left: 142px; }
	.screen2 .word-block .s { width: 62px;top: 146px;left: 179px; }
	.screen2 .word-block .n { width: 99px;top: 312px;left: 141px; }
	.screen2 .illus.logo { width: 60%; }
	.screen2 .illus.batslap { width: 60%;left: 50px; }
	.screen2 .illus.charte { width: 55%;padding: 40px 0 0 0; }
	.screen2 .intro-memo p .action a, .screen2 .content-right p .action a { margin-top: 40px; }
	.screen2 .intro-memo p, .screen2 .content-right p { margin: 0 0 20px 0; }
}
@media (max-width: 1300px) {
	.screen2 .content-right p { line-height: 24px; }
}
@media (max-width: 1199px) {
	.e2-view { bottom: -400px;min-width: 600px; }
	.skin-menu-1, .skin-menu-2, .skin-menu-3 { height: 50px; }
	.menu { height: 50px; }
	.menu a { padding: 15px 10px;font-size: 14px; }
	.menu .alveen { padding: 13px 6px 15px 6px;right: 50px; }
	.menu .support { padding: 15px 20px 15px 6px; }
	.menu .support { right: 118px;padding: 15px 6px 15px 6px; }
	.menu .tel { padding: 17px 10px 16px 10px;right: 82px; }
	.menu .intercom { bottom: 10px;right: 8px; }
	.besoin .action .but span .notre img { width: 200px; }
	.key-points { width: 40vw; }
	.key-points .key { margin-left: 0px !important;margin-top: 20px !important; }
	.key-points .key .link { font-size: 13px;left: 72px;padding-top: 13px; }
	.key-points .key .bulle { width: 60px;height: 60px;line-height: 60px; }
	.key-points .key .bulle img { height: 30px; }
	.smartphone { margin-left: 15vw;padding-top: 6vw; }
	.smartphone .accroche-2 { width: 360px; }
	.besoin h2 { font-size: 32px;line-height: 36px;font-weight: 300; }
	.resume p .action a { padding: 20px 40px; }
	.screen2 .metiers a { text-align: right; }
	.screen2 .metiers .menu-metiers { font-size: 25px; }
	.screen2 .metiers .nav-metier { display: none; }
	.screen2 .metiers { padding: 0 40px 100px 0; }
	.screen2 .intro-memo p .action a, .screen2 .content-right p .action a { padding: 15px 20px; }
	.screen2 .metiers a { font-size: 14px;line-height: 13px; }
	.screen2 .reduce a { margin: 9px 0 0 0; }
	.screen2 .illus.chess { width: 400px; }
	.screen2 .illus.echiquier { width: 500px;bottom: 50px; }
	.content-panono .footer .white-bg { bottom: -150px; }
	.content-panono .footer ._panono { bottom: 98px;right: 72px; }
	.content-panono .footer ._panono img { width: 250px; }
	.content-panono .footer ._panono .name { width: 200px;left: 124px;bottom: -9px; }
	.content-panono .footer ._camera { right: 231px;bottom: 106px; }
	.content-panono .footer ._camera img { width: 165px; }
	.content-panono .footer ._camera .name { bottom: -18px;left: -63px; }
	.content-panono #lineProduit { display: none; }
}
@media (max-width: 1130px) {
	.e2-view { left: -450px; }
}
@media (max-width: 1050px) {
	.screen2 .design-3 .intro-memo { width: 70%; }
	.screen2 .bruce { left: inherit !important;right: 50px;width: 200px; }
	.screen2 .design-3 .content-right { width: 70%;float: left; }
	.screen2 .water { display: none; }
	.screen2 .intro-memo p, .screen2 .content-right { margin: 20px 0 0 0; }
	.screen2 .intro-memo p, .screen2 .content-right p { margin: 0 0 10px 0;font-size: 16px;line-height: 20px; }
	.screen2 .intro-memo p .action a, .screen2 .content-right p .action a { margin-top: 20px; }
	.screen2 .content-right p { font-size: 15px;line-height: 22px; }
}
@media (max-width: 991px) {
	.smartphone { width: 100%;text-align: center;margin: 0;padding: 6vw 20vw 0 20vw;height: auto; }
	.smartphone img { width: 280px; }
	.smartphone .accroche-2 { width: calc(100% - 30vw);top: inherit !important;left: inherit !important;margin: 40px 0 0 0;position: relative;width: 100%; }
	.smartphone .accroche-2 h2 { font-size: 20px;text-align: left;width: 100%; }
	.key-points { width: 100%;position: relative;float: left;height: 250px;padding: 0 20vw 0 20vw;margin: 40px 0 0 0; }
	.key-points .key { float: left;width: 100%;width: 50%;height: 60px; }
	.key-points .key .bulle { width: 50px;height: 50px;line-height: 50px; }
	.key-points .key .bulle img { height: 23px; }
	.key-points .key .link { width: 140px; }
}
@media (max-width: 910px) {
	.menu { text-align: left; }
	.menu .intercom { text-align: center; }
}
@media (max-width: 860px) {
	.e2-view { left: -550px; }
}
@media (max-width: 800px) {
	.key-points { padding: 0 20vw 0 20vw;margin: 0; }
	.key-points .key { width: 100%;margin-top: 10px !important; }
	.key-points .key .link { width: 80%; }
}
@media (max-width: 767px) {
	.tog-menu-sm { display: block; }
	.menu .content { display: none; }
	
	.screen1 { overflow-y: scroll;overflow-x: hidden; }
	#bgElements { width: 100% !important;height: auto !important; }
	.swiper-container { /*overflow-y: scroll !important;*/height: auto; }
	.swiper-slide { width: 100% !important; }
	.swiper-slide .nav { display: none; }
	.screen1 .accroche { position: relative;float: left;text-align: left;margin: 4vmax 0 40px 0;padding: 0 4vmax;width: 100% !important; }
	.screen1 .accroche .explain-responsive { float: left; }
	.screen1 .accroche .explain-responsive a { width: 70px;height: 70px;line-height: 65px; }
	.screen1 .accroche .explain-responsive .temoignages .mini-stars { bottom: -38px;left: 1px; }
	.screen1 .accroche .logo { text-align: center;margin: 0 0 40px 0; }
	.screen1 .accroche .logo img { width: 150px; }
	.screen1 .brands { width: 130px !important; }
	.screen1 .brands .logo-immo-one { margin-bottom: 12px !important; }
	.screen1 .accroche .baseline { padding-top: 20px;padding-top: 90px;width: 100%; }
	.screen1 .accroche .baseline .discover { width: 100%;display: block;font-size: 40px;text-align: center; }
	.screen1 .accroche .baseline .appli { text-align: center; }
	.screen1 .brands { padding-top: 20px; }
	#part1-1 { height: auto !important; }
	#part1-2 { height: auto !important;margin: 0 0 40px 0; }
	#part1-3 { height: auto !important;padding: 0 0 100px 0 !important; }
	#part1-4 { height: auto !important; }
	.smartphone { display: block;margin: 0;padding: 0vw 10vw 0 10vw; }
	.smartphone img { margin: 0; }
	.smartphone .accroche-2 { display: block; }
	.key-points .key { margin-top: 10px !important;opacity: 1; }
	.key-points { height: auto;padding: 0 10vw 0 10vw; }
	.e2-view { display: none; }
	.besoin h2 { font-weight: 400;font-size: 23px;line-height: 24px;padding: 0 10vw; }
	.besoin .items { padding: 0 10vw; }
	.smiley { opacity: 1;margin-top: 0px;margin-bottom: 80px;padding: 0 20vw; }
	.smiley .emo { width: 70%;height: auto !important; }
	.smiley .emo .mask { display: none; }
	.smiley .emo img { height: auto;width: 100%; }
	.resume-title h2 { padding: 0 10vw;font-size: 23px;line-height: 24px;font-weight: 400; }
	.plane-anim { opacity: 1;top: inherit;position: relative;height: 500px; }
	.resume { padding: 0 10vw 140px 10vw;position: relative;bottom: inherit;float: left; }	
	.resume p { text-align: center; }
	.resume p .action { margin-top: 50px; }
	.skin-menu-1 { position: fixed; }
	
	.screen2 { height: 100%;overflow-y: scroll;overflow-x: hidden; }
	.screen2 .accroche { margin: 8vmax 0 0 0;width: 100%;position: relative;top: inherit;left: inherit;float: left; }
	.screen2 .accroche h1 { font-size: 35px;line-height: 32px;width: 100%;text-align: center; }
	.screen2 .accroche h2 { font-size: 25px;line-height: 27px;margin: 0 0 20px 0;width: 100%;text-align: center; }
	.screen2 .illus, .screen2 .word-block { display: none; }
	.screen2 .word-block-entire { display: block;text-align: center; }
	.screen2 .intro-memo { width: 100%; }
	.screen2 .intro-memo p, .screen2 .content-right { margin: 20px 0; }
	.screen2 .intro-memo p, .screen2 .content-right p { padding: 0px; }
	.screen2 .intro-memo p .action, .screen2 .content-right p .action { text-align: center; }
	.screen2 .intro-memo p .action a, .screen2 .content-right p .action a { font-size: 13px; }
	.screen2 .design { margin-top: 30px;padding: 0 10vw; }
	.screen2 .design-3 .intro-memo { width: 100%; }
	.screen2 .design-3 .content-right { width: 100%; }
	.screen2 .content-right { width: 100%; }
	.screen2 .design-7 { padding-bottom: 100px; }
	.skin-menu-2 { position: fixed; }
	.illus-sm { display: block; }	
	.metiers { display: none; }
	
	.screen3 { background: #6fa02a;height: 100%;overflow-y: scroll;overflow-x: hidden; }
	.screen3 .wrapper-content { top: -40px;position: relative;left: inherit; }
	.content-panono { position: relative; }
	.content-panono .header { padding: 0 0 40px 0;position: relative;top: inherit;left: inherit;float: left;height: auto; }
	.content-panono .header h1 { padding: 0 40px; }
	.content-panono .header h2 { font-size: 20px;padding: 0 40px;font-weight: 600; }
	.content-panono .header .logo-produit { width: 300px; }
	.content-panono .header .action { margin: 30px 0 0 0; }
	.content-panono .header .action a { padding: 10px 20px; }
	.content-panono .footer { position: relative;bottom: inherit;left: inherit;float: left;text-align: center;height: auto;padding-bottom: 70px; }
	.content-panono .footer ._panono { width: 100%;position: relative;right: inherit;bottom: inherit;float: left; }
	.content-panono .footer ._panono img { width: 150px; }
	.content-panono .footer ._panono .name { float: left;width: 100%;left: inherit;bottom: inherit;text-align: center;margin: 0px 0 30px 0;position: relative;color: #fff; }
	.content-panono .footer ._camera { width: 100%;position: relative;right: inherit;bottom: inherit;float: left; }
	.content-panono .footer ._camera img { width: 150px; }
	.skin-menu-3 { position: fixed; }
	.content-panono .footer ._camera .name { float: left;width: 100%;left: inherit;bottom: inherit;text-align: center;margin: 0px 0 30px 0;position: relative;color: #fff; }
	.content-panono .footer .white-bg { display: none; }

}
@media (max-width: 600px) {
	.screen1 .accroche .baseline { margin: 0 0 30px 0; }
	.screen1 .accroche .baseline .discover { line-height: 40px; }
	.screen1 .accroche .logo img { width: 100px; }
}
@media (max-width: 470px) {
	.besoin .action .but { font-size: 14px;padding: 10px 20px; }
	.besoin .items { font-size: 17px;line-height: 23px; }
	.besoin h2 { font-size: 20px; }
	.resume-title h2 { font-size: 20px; }
}

/* CONDITIONS SUR LA HAUTEUR */
@media (max-height: 900px) {
	.smiley .emo { height: 200px; }
	.smiley .emo .mask { height: 120px; }
	.besoin .items { font-size: 18px; }
	.besoin .items li { line-height: 24px; }
}
@media (max-height: 770px) {
	.resume { bottom: 7vw; }
}