*{margin:0;padding:0;font-family:'Open sans',sans-serif;font-weight:400;} img{border:0;} body{text-align:center; font-size:15px;} .main{width:1180px;text-align:left;margin:0 auto;} .clear{float:none;clear:both;} .mobile {display: none;} .btn{display:inline-block;background:#f76b55;border-radius:3px;color:#fff;text-decoration:none;cursor:pointer;font-size:16px;padding:14px 16px;transition:all ease 0.2s;text-align:center;} .btn:hover{background:#fd9787;} .btn.orange{background:#f77941;} .btn.orange:hover{background:#f86729;} .nowrap{ white-space: nowrap; } .white-circle{width: 10px; height: 10px; border-radius: 10px; background-color: white; display: inline-block; margin: 10px 0;} .bg-blue { background-color: #0097d2; color: white; } .bg-blue h1 { color: white; } .display-flex { display: flex; } .flex-bot { display: flex; flex-direction: column; justify-content: flex-end; } .display-flex .header-text h1 { padding: 150px 0 40px 0; } .relative { position: relative; } .pt-80 { padding-top: 80px; } .h-80 { height: 80px; } .h-100 { height: 100px; } .h-50 { height: 50px; } .w-50p { width: 50%; } .w-70p { width: 70%; } .w-90p { width: 90%; } .w-100p { width: 100%; } .order1 { order: 1; } .order2 { order: 2; } table.bordertab { border-spacing: 0; color: #546881; } table.bordertab th, table.bordertab td { border: 1px solid #546881; padding: 5px; } table.bordertab th { font-weight: bold; } h1{color:#546881;font-size:40px;font-weight:bold;text-align:center;padding:80px 0 60px 0; font-family: 'Raleway', sans-serif;} h2{padding-top: 5px; font-size: 34px; font-weight: 600;} h2 span{display: block; font-size:24px;} h2.pleinepage{color:#546881;font-size:30px;font-weight:500;text-align:center;padding:65px 0 65px 0;} #ressources h2, .bandeau_faq h2, .bandeau_faq_news h2{ font-size: 25px; color: #555; } /* Header */ #blank_header{height:60px;} #header{height:80px;position:fixed;width: calc(100% - 40px);z-index:5; padding: 0 20px; transition: background-color 0.5s ease; border-bottom: 1px solid #0092C1; background-color: #0298d3;} #header.scroll {background-color:#0097d2;} #header #logo{display:block;width:240px;height:0;padding-top:80px;overflow:hidden;position:absolute;background:url(../images/logo.png) no-repeat;background-size:240px 160px;} #header #logo.gb{background-image:url(../images/logo_gb.png);} #header a.btn{position:relative;float:right;margin-top:16px;} #header a.btn strong{display:block;text-transform:none;font-weight:400;} #header a.btn.l2{line-height:22px;padding-top:5px;height:53px;} #header a.btn.l2 span{display:block;text-transform:none;font-weight:400;} #header a.btn.orange{margin-left: 11px;font-weight: bold;} #header #menu{list-style-type:none;float:right;} #header #menu > li{float:left;height:80px;} #header #menu > li.onlyresponsive{display:none;} #header #menu > li > a{float:left;display:block;line-height:48px;height:48px;color:#fff;text-decoration:none;margin:16px 0 0 0;border-radius:3px;padding: 0 15px;} #header #menu > .onlydesktop > a:hover{background:#0085b5;} #header #menu > li.lead > a{border:1px solid #0085b5;line-height:46px;height:46px;padding:0 14px 0 14px;} #header .contact{float:right;margin-right:20px;font-size:20px;color:#fff;line-height:80px;} #header #menu > li:hover > .menusecondaire{pointer-events:auto;opacity:1;margin-top:70px;} .menusecondaire{position:absolute;background:#fff;list-style-type:none;margin-top:60px;padding:10px 0 10px 0;border-radius:5px;box-shadow:0px 5px 5px rgba(0,0,0,0.2);margin-left:-30px;opacity:0;pointer-events:none;transition:all ease 0.2s;} .menusecondaire:before{content:"";position:absolute;margin:-20px 0 0 60px;z-index:10;width:0;height:0;border-style:solid;border-width:0 10px 10px 10px;border-color:transparent transparent #fff transparent;} .menusecondaire > li{} .menusecondaire > li > a{text-decoration:none;color:#666;display:block;line-height:30px;padding:0 40px 0 40px;} .menusecondaire > li > a:hover{color:#0097d2 ;background:rgba(0,162,213,0.2);} #menu .onlyresponsive > a { position: relative; } .onlyresponsive span.arrow-down { position: absolute; right: 40px; top: 15px; display:inline-block; width: 11px; height: 10px; background: url('../images/icon-arrow-dropdown.svg') no-repeat center; } .ul-nav-solutions { height: 0; padding: 0; margin-left: -20px; margin-right: -20px; border-top: 1px solid #CADAEC; border-bottom: 1px solid #CADAEC; background: #F5FAFF; opacity: 0; transition: .2s; overflow: hidden;} .ul-nav-solutions a { padding: 0 15px; text-decoration: none; color: black; } .sous-nav-open { height: auto; padding: 10px 20px; opacity: 1; transition: .2s;} #language{position:absolute;margin:25px 0 0 260px;font-size:13px;color:#fff;cursor:pointer;} #language span{display:block;background:url(../images/flag/FR.png) no-repeat 8px 3px;border:1px solid #0085b5;padding:0 10px 0 40px;border-radius:15px;line-height:30px;} #language span.BE{background-image:url(../images/flag/BE.png);} #language span.GB{background-image:url(../images/flag/GB.png);} #language span.EU{background-image:url(../images/flag/EU.png);} #language span:after{content:"\25BE";padding-left:5px;} #language img{vertical-align:bottom;} #language .menusecondaire{margin-top:-10px;color:#666;width:240px;} #language .menusecondaire:before{margin-left:42px;} #language .menusecondaire li{background:url(../images/flag/FR.png) no-repeat 12px 3px;} #language .menusecondaire li.BE{background-image:url(../images/flag/BE.png);} #language .menusecondaire li.GB{background-image:url(../images/flag/GB.png);} #language .menusecondaire li.EU{background-image:url(../images/flag/EU.png);} #language:hover span{border-color:#006084;} #language:hover .menusecondaire{pointer-events:auto;opacity:1;margin-top:0px;} hr.bar { height: 1px; margin: 0 auto; padding: 0; color: #f76b55; background-color: #f76b55; border: 0; height: 4px; width: 50px;margin:30px auto;} /* Ancienne Page d'accueil avec slide #accueil { position: relative; padding: 100px 0 80px; } #accueil h1 { font-size: 44px; font-weight: 600; max-width: 750px; margin: 0 auto; width: 100%; color: white; text-shadow: 1px 1px 10px rgba(0,0,0,0.5);} #accueil h1 span { font-size: 0.5em; display: block; font-weight: bold; } #accueil .content{ position: relative; z-index: 2; } #accueil p.parrainage{font-size:15px;margin:0 0 0 40px;} #accueil p.parrainage strong{font-weight:700;} #accueil .gradient { position: absolute; width: 100%; height: 100%; top:0; background: -moz-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d000000', endColorstr='#00000000',GradientType=0 ); } #slider { width: 100%; height: 100%; position: absolute; z-index: 1; top: 0; } #slider div{ position: absolute; left: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; } #slider div:nth-child(1){ background-image: url('/images/accueil/slider01-tiny.png'); animation:fade1 16s infinite; -webkit-animation:fade1 16s infinite; } #slider div:nth-child(2){ background-image: url('/images/accueil/slider02-tiny.png'); animation:fade2 16s infinite; -webkit-animation:fade2 16s infinite; } #slider div:nth-child(3){ background-image: url('/images/accueil/slider03-tiny.png'); animation:fade3 16s infinite; -webkit-animation:fade3 16s infinite; }*/ /* Page d'accueil */ @media all and (min-width: 768px){ #accueil:before{content:"";display:block;position:absolute;width:100%;left:0;top:0;bottom:0;background:url(../images/frise_home.svg) no-repeat center bottom;pointer-events:none;} } #accueil{background:url(../images/home_wave.jpg) no-repeat center top #0298d3;padding-top:200px;height:545px;position:relative;overflow:hidden;} #accueil .home_women1{display:block;position:absolute;top:463px;left:50%;margin-left:275px;width:367px;height:358px;background:url(../images/home_women1.png) no-repeat;} #accueil .home_women1bis{background:url(../images/agences/header-agence.png) no-repeat;width:420px;} #accueil .home_men{display:block;position:absolute;top:565px;left:50%;margin-left:-410px;width:129px;height:229px;background:url(../images/home_men.png) no-repeat;} #accueil .home_women2{display:block;position:absolute;top:555px;left:50%;margin-left:-535px;width:108px;height:227px;background:url(../images/home_women2.png) no-repeat;} #accueil .home_women3{display:block;position:absolute;top:565px;left:50%;margin-left:-710px;width:139px;height:249px;background:url(../images/home_women3.png) no-repeat;} #accueil .home_car1{display:block;position:absolute;top:400px;left:50%;width:100%;height:358px;background:url(../images/vtc/vtc.png) no-repeat;pointer-events:none;transform:scale(0.6);} #accueil h1{font-weight:700;color:#fff;padding:0;font-size:48px;width:1180px;margin:0 auto;} #accueil h1 em {font-family:Caveat,cursive;font-style:normal} #accueil p{display:inline-block;font-size:20px;color:#fff;margin:45px 0 45px 0;width:500px;} #accueil p.parrainage{font-size:15px;margin:0 0 0 40px;} #accueil p.parrainage strong{font-weight:700;} #accueil a.btn_accueil{width:240px;font-weight:bold;} @keyframes fade1 { 0% {opacity:1} 33.333% { opacity: 0} 66.666% { opacity: 0} 100% { opacity: 1} } @keyframes fade2 { 0% {opacity:0} 33.333% { opacity: 1} 66.666% { opacity: 0 } 100% { opacity: 0} } @keyframes fade3 { 0% {opacity:0} 33.333% { opacity: 0} 66.666% { opacity: 1} 100% { opacity: 0} } .text-center { text-align: center; } .down-arrow { display: block; margin: 0 auto; width: 20px; margin-top: 20px; } #customizable { padding: 80px 0;background-image: url('/images/accueil/background-waves.svg'); background-size: 100%; background-repeat: no-repeat; background-position-y: 0px; } #customizable .container{ margin: 0 auto; max-width: 1000px; width: 100%; text-align: left; } #customizable .container .top { display: flex; font-size: 20px; padding-top: 40px; } #customizable .container .top > div{ margin: 0 auto; } #customizable .container .top > div > img{ width: 100%; } .btn-blue{ font-size: 14px; display: inline-block; margin-top: 80px; text-decoration: none; padding: 18px; border-radius: 8px; color: white; background: #0097d2; font-weight: bold; } .btn-blue:hover{ background-color: #0080b3; } #customizable .container .top > div:nth-of-type(2){ margin-top: 20px; margin-left: 30px; } #customizable .container .bottom { display: flex; padding-top: 40px; } #page_vtc #mockups .container .bottom { display: flex; padding: 70px 0 100px 0; text-align: left; } #customizable .container .bottom > div, #page_vtc #mockups .container .bottom > div { width: 33%; margin: 0 30px; } #customizable .container .bottom > div > .icon, #page_vtc #mockups .container .bottom > div > .icon { width: 50px; height: 50px; border-bottom: 4px solid #73cdc8; display: flex; align-items: center; justify-content: center; } #customizable .container .bottom > div:nth-of-type(2) > .icon, #page_vtc #mockups .container .bottom > div:nth-of-type(2) > .icon { border-color:#eac248; } #customizable .container .bottom > div:nth-of-type(3) > .icon, #page_vtc #mockups .container .bottom > div:nth-of-type(3) > .icon { border-color:#f76b55; } #customizable .container .bottom > div > .icon > img, #page_vtc #mockups .container .bottom > div > .icon > img { width: 60%; } #customizable .container .bottom h3, #page_vtc #mockups .container .bottom h3 { font-size: 20px; font-weight: bold; padding: 10px 0 5px; } #customizable .container .bottom p, #page_vtc #mockups .container .bottom p { font-size: 18px; line-height: 32px;} #temoignages { padding: 80px 0; } #temoignages h3 { color: #22ace2; font-size: 23px; text-transform: uppercase; font-weight: bold; padding: 40px 0 25px; } #temoignages .metiers .mobile{ max-width: 320px; margin: 0 auto; } #temoignages .metiers { padding-top: 20px; margin: 0 auto; max-width: 1000px; width: 100%; } #temoignages .metiers img { width: 100%; } #temoignages .message { display: flex; align-items: center; max-width: 600px; margin: 0 auto; padding-bottom: 20px; } #temoignages .message .message-content p { margin: 0 auto; max-width: 570px; width: 90%; font-size: 18px;} #temoignages .locasuccess {display: block; width: 80px; margin: 0 auto;} #cont_fonctionnalite_accueil{background:#f9f9f9;margin-bottom:-85px;padding-bottom:40px;} #fonctionnalite_accueil{list-style-type:none;} #fonctionnalite_accueil li{width:350px;height:100px;padding-right:30px;float:left;margin:0 20px 50px 0;color:#546881;} #fonctionnalite_accueil li:before{content:"";float:left;display:block;width:100px;height:100px;background:url(../images/picto/numero-accueil.svg) no-repeat;} #fonctionnalite_accueil li:nth-child(3n+3){margin-right:0;} #fonctionnalite_accueil li a{font-size:20px;text-decoration:none;color:#546881;display:inline-block;padding:10px 0 10px 0;} #fonctionnalite_accueil li a:before{content:"\279d";opacity:0;transition:all ease 0.2s;margin-left:-20px;} #fonctionnalite_accueil li a:hover{color:#232c36} #fonctionnalite_accueil li a:hover:before{opacity:1;padding-left:10px;} /* #fonctionnalite_accueil li.numero:before{background-position:0 0;} #fonctionnalite_accueil li.annonce:before{background-position:0 -100px;} #fonctionnalite_accueil li.menuvocal:before{background-position:0 -400px;} #fonctionnalite_accueil li.transfert:before{background-position:0 -2000px;} #fonctionnalite_accueil li.journal:before{background-position:0 -1100px;} #fonctionnalite_accueil li.configuration:before{background-position:0 -2100px;} */ /*#fonctionnalite_accueil li.numero:before{background:url(../images/picto/numero-accueil.svg);}*/ #fonctionnalite_accueil li.annonce:before{background:url(../images/picto/annonce-accueil.svg) no-repeat;} #fonctionnalite_accueil li.menuvocal:before{background:url(../images/picto/menu-vocal.svg) no-repeat;} #fonctionnalite_accueil li.transfert:before{background:url(../images/picto/transfert-appel.svg) no-repeat;} #fonctionnalite_accueil li.enregistrement:before{background:url(../images/picto/enregistrer-conversation.svg) no-repeat ;} #fonctionnalite_accueil li.journal:before{background:url(../images/picto/journal-appel.svg) no-repeat;} #fonctionnalite_accueil li.configuration:before{background:url(../images/picto/configuration-simple.svg) no-repeat;} .cont_btn{text-align:center;margin:30px 0 90px 0} #temoignages_logos{background:#fff;padding-bottom:65px;} #temoignages_logos .patchwork_temoignage{margin-top:15px;} #temoignages_logos .title{text-align:center;margin:30px auto;} #temoignages_logos p.sub_h2{font-size:25px;padding-top:65px;color:#999;} #temoignages_logos h2{padding:10px 0 10px 0;} #temoignages_logos p.link{margin-bottom:40px;} #temoignages_logos p.link a{display:inline-block;color:#999;border:1px solid #ccc;border-radius:3px;text-decoration:none;padding:10px 10px 10px 10px;} #temoignages_logos p.link a:hover{color:#666;border-color:#999;} #temoignages_citation{text-align:center;width:560px;height:200px;overflow:hidden;position:relative;} #temoignages_citation #content_t_c{width:5000px;height:200px;position:absolute;transition:all ease 0.3s;} #temoignages_citation p{width:560px;height:160px;float:left;font-size:20px;line-height:30px;font-style:italic;color:#546881;font-weight:300;margin:auto;} #temoignages_citation p em{display:block;font-size:13px;font-style:normal;} .fleche_t_c{position:absolute;z-index:2;font-size:80px;color:#ccc;cursor:pointer;margin:25px 0 0 210px;font-weight:300;} .fleche_t_c:hover{color:#999;} .fleche_t_c.right{margin-left:970px;} #temoignages_citation.p1 #content_t_c{margin:0;} #temoignages_citation.p2 #content_t_c{margin-left:-560px;} #temoignages_citation.p3 #content_t_c{margin-left:-1120px;} #temoignages_citation.p4 #content_t_c{margin-left:-1680px;} #temoignages_citation.p5 #content_t_c{margin-left:-2240px;} #temoignages_citation.p6 #content_t_c{margin-left:-2800px;} #widget-container { margin: 25px auto; width: 335px; height: 120px; } #widget-container #ekw46 { width: 350px; height: auto; display: flex; align-items: flex-start; flex-direction: column; } #widget-container #ekw46 .widget-right { order: 1; width: auto; display: flex; align-items: center; } #widget-container #ekw46 .widget-right .total_reviews { margin-left: 5px; height: 32px; line-height: 42px; color: #999; } #widget-container #ekw46 .widget-right .rating-obtained { font-size: 26px; color: #737373; font-weight: 300; } #widget-container #ekw46 .widget-right .rating-obtained .shoutoff { font-size: 26px; color: #737373; } #widget-container #ekw46 .widget-right .rating-obtained span { margin: 0 5px 0 0; color: #000; } #widget-container #ekw46 .shleft { order: 2; margin-top: 20px; float: none; display: block; width: 100%; margin-right: 0; } #widget-container #ekw46 .stars-yellow { background: url(../images/star_yellow.png) no-repeat; height: 40px; width: 179px !important; } #widget-container #ekw46 .stars-grey { background: url(../images/star_grey.png) no-repeat; height: 40px; width: 200px; } #widget-container2 { margin-top: 10px; } #widget-container2 #ekw46 .sseal-logo { width: 60px; height: 60px; } #widget-container2 #ekw46 .rating-obtained, #widget-container2 #ekw46 .shoutoff, #widget-container2 #ekw46 .total_reviews { color: #fff; font-size: 17px; display: inline-block; margin-top: 5px; } #widget-container2 #ekw46 .total_reviews { font-size: 13px; } /* Se sedomicilier */ #accueil.sedomicilier{height:auto;padding-top:150px;} #accueil.sedomicilier h1{width:100%;max-width:720px;padding-bottom:371px;} #temoignages_logos.sedomicilier{padding:80px 0;} .sedomicilier.packs{padding:50px 0 80px 0;max-width:750px;margin:0 auto;} .sedomicilier.packs h3{font-size:35px;font-family:Caveat,cursive;font-style:normal;padding-bottom:15px;height:60px;line-height:60px;} .sedomicilier.packs h4{font-size:26px;color:white;font-family:Lato,sans-serif;font-style:bold;padding:15px 0 10px;} .sedomicilier .flex-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;} .sedomicilier.packs .pack{text-align:center;padding:25px;-ms-flex:1 0 0px;flex:1 0 0px;min-width:320px;} .sedomicilier.packs .pack .box{background:#ffffff;box-shadow:0 10px 15px 0 rgba(81,111,144,0.07);border-radius:11px;} .sedomicilier.packs .pack .box .header{background:#14C176;border-radius:11px 11px 0 0;padding-bottom:10px;} .sedomicilier.packs .pack .box .header em{color:rgba(0,0,0,0.7);font-style:normal;} .sedomicilier.packs .pack .box .content{padding-top:25px;font-size:43px;color:#14C176;} .sedomicilier.packs .pack .box .content sup{font-size:25px;} .sedomicilier.packs .pack .box .content span{font-size:24px;} .sedomicilier.packs .pack .box .content em{color:#333;font-size:14px;display:block;font-style:normal;} .sedomicilier.packs .btn-orange{display:inline-block;padding:15px 25px;margin:30px 0 50px;background:#f8854a;border-radius:5px;font-size:16px;font-weight:700;color:white;text-decoration:none;} .sedomicilier .header-container{position:absolute;width:100%;height:301px;bottom:0;} .sedomicilier .description{display:flex;justify-content:center;flex-wrap:wrap-reverse;} .sedomicilier .description .content{margin-left:50px;} .sedomicilier .description{margin:0 auto;width:100%;max-width:1024px;font-size:20px;color:white;} .sedomicilier .description ul{width:90%;max-width:500px;float:right;text-align:left;list-style-image:url(/images/sedomicilier/checkbox.svg);} .sedomicilier .description ul li{float:left;padding-bottom:25px;} .sedomicilier .header-drawing{width:235px;height:301px;background-image:url(/images/sedomicilier/header_drawing.svg);} /* Comment �a marche */ .comment_elem{position:relative;margin:30px 0 100px 0;} .comment_elem h2{width:44%;color:#0097d2 ;margin:0 3% 0 3%;padding-top:20px;font-weight:300;font-size:28px;font-family:'Roleway', sans-serif;} .comment_elem p{width:44%;color:#546881;margin:25px 3% 0 3%;font-size:20px;} .comment_elem a{color:#0097d2 ;text-decoration:none;border-bottom:1px dotted #0097d2 ;} .comment_elem .img{width:44%;margin:20px 3% 0 3%;position:absolute;left:50%;text-align:center;top:0;} .comment_elem.right h2{margin-left:53%;} .comment_elem.right p{margin-left:53%;} .comment_elem.right .img{left:0;} .comment_elem.imgtop{margin-top:100px;} .comment_elem.imgtop .img{margin-top:0;} .comment_elem.up{padding:0 25%;} .comment_elem.up h2{width:100%;} .comment_elem.up p{width:100%;} .comment_elem.up .img{position:static;width:100%;} #bandeau_video{text-align:center;background:#f9f9f9;margin-top:200px;padding-bottom:50px;} #bandeau_video iframe{width:800px;height:500px;margin-top:-30px;} #interface{background:url(../images/laptop.png) no-repeat;width:630px;height:407px;padding:32px 105px 43px 104px;margin:0 0 0 170px;position:relative;} #interface ul{position:absolute;z-index:1;padding-left:135px;width:495px;height:45px;list-style-type:none;text-align:center;background:rgba(0,0,0,0.6);margin-top:362px;} #interface ul li{display:block;float:left;width:45px;height:45px;background:url(../images/picto_interface.png) no-repeat 0 0;background-size:45px 360px;cursor:pointer;} #interface ul li:hover{background-color:rgba(0,0,0,0.4);} #interface ul li.open{background-color:rgba(0,0,0,0.4);} #interface ul li:nth-child(2){background-position:0 -45px;} #interface ul li:nth-child(3){background-position:0 -90px;} #interface ul li:nth-child(4){background-position:0 -135px;} #interface ul li:nth-child(5){background-position:0 -180px;} #interface ul li:nth-child(6){background-position:0 -225px;} #interface ul li:nth-child(7){background-position:0 -270px;} #interface ul li:nth-child(8){background-position:0 -315px;} #interface ul li span{position:absolute;top:-362px;left:0;width:220px;height:200px;padding:33px 27px 38px 55px;pointer-events:none;opacity:0;font-size:15px;color:#0097d2 ;transition:all ease 0.2s;} #interface ul li span:before{content:"";position:absolute;top:0;left:0;width:302px;height:271px;background:url(../images/bulle.png) no-repeat;pointer-events:none;z-index:-1} #interface ul li span.gauche{padding:33px 55px 38px 27px;} #interface ul li span.gauche:before{transform:scaleX(-1);} #interface ul li:nth-child(1) span {top:-420px;left:450px;} #interface ul li:nth-child(2) span {top:-300px;left:-100px;} #interface ul li:nth-child(3) span {top:-300px;left:400px;} #interface ul li:nth-child(4) span {top:-362px;left:-100px;} #interface ul li:nth-child(5) span {top:-350px;left:430px;} #interface ul li:nth-child(6) span {top:-280px;left:430px;} #interface ul li:nth-child(7) span {top:-330px;left:-100px;} #interface ul li:nth-child(8) span {top:-420px;left:-140px;} #interface ul li strong{font-weight:700;font-size:30px;display:block;padding:15px 25px 20px 25px;} #interface ul li.open span{opacity:1;} #cont_interface{width:630px;height:407px;overflow:hidden;background:#0097d2 ;} #cont_interface img{position:absolute;opacity:0;transition:all ease 0.5s;transform:scale(0.9);} #cont_interface img.open{opacity:1;transform:scale(1);} #interface span.navinterface{position:absolute;font-size:100px;top:150px;left:-50px;color:#ccc;cursor:pointer;} #interface span.navinterface:hover{color:#999;} #interface span.navinterface.next{left:850px;} .jesaispaswuoimettre { color:inherit; } /* Fonctionnalités */ .h2_fonctionnalite{width:300px;margin:65px 30px 0 0;color:#0097d2 ;font-size:35px;font-weight:300;text-align:right;float:left;} .h2_fonctionnalite.green{color:#289e7a;} .liste_fonctionnalite{list-style-type:none;float:left;padding:0 0 0 30px;width:800px;margin-top:65px;border-left:1px solid #d1d3d7;} .liste_fonctionnalite li{display:inline-block;width:220px;padding:0 0 80px 100px;margin-right:70px;color:#546881;vertical-align:top;} .liste_fonctionnalite li:before{content:"";width:100px;height:100px;background:url(../images/picto_fonctionnalites.png) no-repeat;position:absolute;margin:0 0 0 -100px;} .liste_fonctionnalite li a{color:#0097d2 ;font-size:20px;font-weight:700;text-decoration:none;display:block;margin-bottom:10px;} .liste_fonctionnalite li a:before{content:"\279d";opacity:0;transition:all ease 0.2s;margin-left:-20px;} .liste_fonctionnalite li a:hover:before{opacity:1;padding-left:10px;} .liste_fonctionnalite.green li a{color:#289e7a;} .liste_fonctionnalite li.numero:before{background-position:0 0;} .liste_fonctionnalite li.musique:before{background-position:0 -100px;} .liste_fonctionnalite li.horaire:before{background-position:0 -200px;} .liste_fonctionnalite li.annonce:before{background-position:0 -300px;} .liste_fonctionnalite li.menuvocal:before{background-position:0 -400px;} .liste_fonctionnalite li.transfert:before{background-position:0 -500px;} .liste_fonctionnalite li.attente:before{background-position:0 -600px;} .liste_fonctionnalite li.simultanes:before{background-position:0 -700px;} .liste_fonctionnalite li.tempsattente:before{background-position:0 -800px;} .liste_fonctionnalite li.fileattente:before{background-position:0 -900px;} .liste_fonctionnalite li.cascade:before{background-position:0 -1000px;} .liste_fonctionnalite li.journal:before{background-position:0 -1100px;} .liste_fonctionnalite li.enregistrement:before{background-position:0 -1200px;} .liste_fonctionnalite li.export:before{background-position:0 -1300px;} .liste_fonctionnalite li.messages:before{background-position:0 -1400px;} .liste_fonctionnalite li.appli:before{background-position:0 -1500px;} .liste_fonctionnalite li.fax:before{background-position:0 -1600px;} .liste_fonctionnalite li.sms:before{background-position:0 -1700px;} .liste_fonctionnalite li.confcall:before{background-position:0 -1800px;} .liste_fonctionnalite li.transcription:before{background-position:0 -1900px;} #menu_fonctionnalites{width:300px;float:right;margin-right:80px;padding-top:35px;} #menu_fonctionnalites p.t{color:#0097d2 ;font-size:20px;font-weight:700;padding:15px 0 15px 0;} #menu_fonctionnalites ul{list-style-type:none;} #menu_fonctionnalites ul li{} #menu_fonctionnalites ul li a{display:block;color:#546881;text-decoration:none;height:24px;line-height:24px;position:relative;} #menu_fonctionnalites ul li.lead a{color:#0097d2 ;} #menu_fonctionnalites ul li a:before{content:"\279d";opacity:0;transition:all ease 0.2s;margin-left:-5px;} #menu_fonctionnalites ul li a:after{content:"\203a";position:absolute;top:0;left:0;line-height:22px;transition:all ease 0.2s;} #menu_fonctionnalites ul li a:hover:before{opacity:1;padding-left:8px;} #menu_fonctionnalites ul li a:hover:after{opacity:0;} #page_fonctionnalites{width:800px;float:right;font-size:17px;line-height:25px;color:#546881;text-align:center;} #page_fonctionnalites h1{font-weight:bold;font-size:40px;color:#0097d2 ;padding:60px 0 60px 25px;text-align:left;position:relative;line-height:40px;} #page_fonctionnalites h1:before{content:"\203a";position:absolute;top:55px;left:0;font-size:60px;} #page_fonctionnalites p{padding:8px 100px 8px 0;text-align:left;} #page_fonctionnalites .vert{color:#289e7a;} #page_fonctionnalites strong{font-weight:700;color:#000;} #page_fonctionnalites h2{text-align:left;font-size:22px;color:#0097d2 ;margin:25px 0 15px 0;} .detail_numero{border-top:1px solid #d1d3d7;margin-top:20px;padding-top:20px;margin-right:100px;} #page_fonctionnalites .detail_numero p{padding-right:0;} span.grosnumero{display:block;float:left;width:120px;padding-left:60px;height:67px;line-height:67px;font-size:24px;color:#fff;border-radius:10px;background:url(../images/phone.svg) no-repeat 25px center;background-size:20px 20px;margin:10px 20px 0 0;} span.grosnumero.n0826{background-color:#8c0065;} span.grosnumero.n0811{background-color:#69004c;} span.grosnumero.n0102{background-color:#009ef9;} span.grosnumero.n0805{background-color:#71bf44;} #page_fonctionnalites .avantage0826{color:#8c0065} #page_fonctionnalites .avantage0811{color:#69004c} #page_fonctionnalites .avantage0102{color:#009ef9} #page_fonctionnalites .avantage0805{color:#71bf44} #pictoSource{color:#0097d2;font-size:1.4em;} .store{display:inline-block;width:140px;height:53px;padding:17px 0 0 90px;background:url(../images/store.png) no-repeat 10px 0 #0085b5;background-size:70px 140px;color:rgba(255,255,255,0.6);text-decoration:none;border-radius:3px;text-transform:uppercase;text-align:left;font-size:13px;line-height:18px;transition:all ease 0.2s;margin:0 15px 0 15px;} .store.android{background-position:10px -70px;} .store:hover{background-color:#00739d;} #page_fonctionnalites .store strong{font-weight:700;color:#fff;display:block;font-size:16px;} /* Pages d'accueil alternatives */ #accueil.virtuel{margin-bottom:100px;} #accueil.virtuel p{width:660px;} .comment_elem.virtuel{padding-bottom:80px;margin-bottom:40px;} .comment_elem.virtuel:last-child{background:0;} .comment_elem.virtuel p{margin-top:20px;font-size:20px} .comment_elem.virtuel .img{margin-top:0;} #accueil.numerovert{margin-bottom:100px;} #accueil.numerovert .btn{width:auto} .comment_elem.numerovert{padding-top:60px;} .cont_comment_autre{background:#f9f9f9;margin:150px 0 -80px 0;padding-bottom:130px;} .cont_comment_autre.nomargin{margin-top:0;padding-top:50px;} .comment_autre{width:510px;float:left;height:120px;padding:50px 40px 0 40px;} .comment_autre h2{font-size:20px;color:#0097d2 ;margin-bottom:10px;} .comment_autre p{line-height:20px;} /*#accueil.numero0800{z-index:-2!important;}*/ #accueil.numero0800 .main{background:none;text-align:center;} #accueil.numero0800 h1{width:auto;text-align:center;} #accueil.numero0800 p{width:auto;padding:0 200px 0 200px;} .box0800{height:317px;padding:25px 0 0 0;width:300px;border:1px solid rgb(41, 132, 199);border-radius:5px;display:inline-block;margin:0 20px 0 20px;background-color:rgba(20, 163, 219, 0.8);position: relative;} .box0800 span.grosnumero{float:none;display:inline-block;text-align:left;margin:0;} .box0800 span.prix{display:block;font-size:22px;font-weight:300;color:#fff;margin-top:15px;} .box0800 span.prix strong{font-weight:700;font-size:30px;} .box0800 span.detail_prix{color:#fff;display:block;margin-bottom:15px;} /* PAGE VTC */ #page_vtc .bg-vtc { background-image: url('../images/vtc/vtc-chauffeur-standard.jpg'); background-size: cover; padding-bottom: 200px; } #page_vtc #header { background-color: rgba(0,0,0,0); background-image: none; border-bottom: none; } #page_vtc #header.scroll { background-color: #0097d2; } #page_vtc #header #menu > li > a:hover { background-color: rgba(0,0,0,0) !important; text-decoration: underline; } #page_vtc #header-text { margin-top: 100px; color: white; text-align: left; } #page_vtc #header-text h1 { color: white; text-align: left; width: 630px; padding-bottom: 5px; margin-bottom: 40px; } #page_vtc #header-text h1 small { font-size: 20px; } #page_vtc #header-text ul { margin-bottom: 70px; } #page_vtc #header-text li { font-weight: 600; list-style: none; margin: 20px 0; font-size: 18px; } #page_vtc #header-text li img { width: 24px; margin-right: 20px; } #page_vtc #header-text .btn, #page_vtc #mockups .btn { width: 200px; margin: 0 20px; } #page_vtc #header-text .btn.orange { border: 2px solid #f77941; } #page_vtc #header-text .btn.orange:hover { border: 2px solid #f86729; } #page_vtc .container { max-width: 1360px; padding: 0 20px; margin: 0 auto; } #page_vtc .btn.skeleton { background-color: rgba(0,0,0,0); border: 2px solid white; color: white; } #page_vtc .btn.skeleton:hover { background-color: white; color: black; } #page_vtc .white-triangle { background-image: linear-gradient(to bottom left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, #fff 50.5%, #fff 100%); position: absolute; left: 0; bottom: -1px; width: 100%; height: 150px; } #page_vtc .bg-vtc .white-triangle img { width: 32px; margin-top: 100px; } #page_vtc #mockups { background-image: linear-gradient(#fff 0%, #fff 40%, #f8f8f8 40%, #f8f8f8 100%); padding: 70px 0 100px 0; } #page_vtc #mockups img { width: 1000px; } #page_vtc .bandeau_promo.price .container { padding-top: 70px; } #page_vtc .bandeau_faq .container { padding: 30px 0 0 0; } #page_vtc .bandeau_faq_news .container { padding: 30px 0 0 0; } @media all and (max-width: 1500px) and (min-width: 1200px){ #page_vtc #header-text h1 { margin-bottom: 20px; } #page_vtc #header-text li { margin: 10px 0; } #page_vtc #header-text ul { margin-bottom: 50px; } } @media all and (max-width: 1500px) and (min-width: 961px){ #page_vtc #header-text { margin-left: 100px; } } /* PAGES SPECIFIQUES */ .page_spe .bg-blue .display-flex .header-text a { margin: 60px 0 200px 0; } .page_spe .container { max-width: 1140px; padding: 0 20px; margin: 0 auto; } .page_spe .header-text, .page_spe .header-text h1 { text-align: left; line-height: 42px; } .page_spe .header-text h1 small { font-size: 24px; } .page_spe .flex-bot img { max-width: 100%; } .page_spe .white-triangle { background-image: linear-gradient(to bottom left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, #fff 50.5%, #fff 100%); position: absolute; left: 0; bottom: -1px; width: 100%; height: 200px; } .page_spe h2 { font-size: 32px; margin-bottom: 25px; } .page_spe p { font-size: 16px; } .page_spe .header-text p { font-size: 21px; } .page-spe-flex { display: flex; justify-content: space-between; margin-bottom: 150px; } .page-spe-flex-text { width: 50%; text-align: left; } .page-spe-flex-text p { text-align: justify; } .page-spe-flex-img img { max-height: 300px; max-width: 90%; } .page-spe-flex-img2 { width: 110%; } .page-spe-flex-img2 img { max-width: 90%; } .page-spe-flex .order1 { margin-right: 20px; text-align: left; } .page-spe-flex .order2 { margin-left: 20px; text-align: right; } .page-spe-flex-text.order2 { text-align: left; } .page-spe-flex:last-child { margin-bottom: 75px; } @media all and (max-width: 1200px){ .page_spe .bg-blue .display-flex { display: block; text-align: center; } .page_spe .header-text, .page_spe .header-text h1 { text-align: center; margin: 0 auto; } .page_spe .bg-blue .flex-bot { display: block; } .page_spe .bg-blue .display-flex .header-text a { margin: 60px 0; } .page_spe .bg-blue .h-100 { height: 150px; } } @media all and (min-width: 700px) and (max-width: 1200px){ .page_spe .flex-bot img { max-width: 50%; } } @media all and (max-width: 1000px){ .page_spe .page-spe-flex-img2 { width: 100%; } } @media all and (max-width: 960px){ .page_spe .page-spe-flex { display: block; text-align: center; } .page_spe .page-spe-flex { margin-bottom: 100px; } .page_spe .page-spe-flex .order1 { margin: 0 auto 0 auto; text-align: center; } .page_spe .page-spe-flex .order2 { margin: 0 auto 0 auto; text-align: center; } .page_spe .page-spe-flex div:first-child { margin-bottom: 50px; } .page_spe .w-50p { width: inherit; } .page_spe .page-spe-flex-text { width: inherit; } .display-flex .header-text h1 { padding: 100px 0 40px 0; } } @media all and (max-width: 1100px){ #page_vtc #mockups img { max-width: 100%; } } @media all and (max-width: 1000px){ #page_vtc .bg-vtc { background-position: -250px; } } @media all and (max-width: 767px){ #page_vtc h1 { font-size: 34px; } #page_vtc h2 { font-size: 26px; } #page_vtc .comment_elem h2 { padding: 20px 0; text-align: center; } #page_vtc .comment_elem.right p { text-align: justify; } } @media all and (max-width: 700px){ #page_vtc #header-text { margin-top: 50px; } #page_vtc #header-text h1 { max-width: 100%; } #page_vtc #mockups .container .bottom { display: block; } #page_vtc #mockups .container .bottom > div { width: 300px; margin: 50px auto; } #page_vtc #mockups { background-image: linear-gradient(#fff 0%, #fff 20%, #f8f8f8 20%, #f8f8f8 100%); } #page_vtc #mockups .container .bottom { padding: 70px 0; } } @media all and (max-width: 650px){ #page_vtc .bg-vtc { background-position: -450px; } } @media all and (max-width: 475px){ #page_vtc .bg-vtc { background-position: -550px; } #page_vtc #header-text h1 small { font-size: 18px; } #page_vtc .bg-vtc { background-position: -650px; } } /* FAQ & CGV & Pages de textes */ h2.faq_question{width:300px;margin:65px 30px 0 100px;color:#0097d2 ;font-size:26px;font-weight:400;text-align:right;float:left;} h2.faq_question:first-child{margin-top:0;} .faq_reponse{float:left;padding:0 0 0 30px;width:600px;margin-top:65px;border-left:1px solid #d1d3d7;} .faq_reponse p{font-size:15px;line-height:26px;margin-bottom:10px;color:#546881;} .faq_reponse h3{margin-bottom:10px;font-size:20px;color:#000;font-weight:400;} h2.faq_question.cgv{margin-left:0;} .faq_reponse.cgv{width:800px;} .faq_reponse a{color:#0097d2 ;text-decoration:none;border-bottom:1px dotted #0097d2 ;} .faq_reponse strong{color:#000;font-weight:700;} h1.portabilite{background:url(../images/portabilite.png) no-repeat;text-align:left;padding:80px 0 0 280px;height:235px;margin:30px 150px 0 175px;} .warning{background:#f2dedf;margin:50px 150px 0 150px;padding:30px;border-radius:5px;border:1px solid #dca7aa;margin-bottom:30px;} .warning p{margin-bottom:10px;} .warning p.t{font-size:20px;color:#ce0005;background:url(../images/warning.png) no-repeat;background-size:30px 28px;line-height:28px;padding-left:40px;} .contact_col{width:465px;margin:0 0 0 50px;float:left;background:#f8f8f8;padding:30px 50px 30px 50px;} .contact_col.left{text-align:right;margin:0;} .contact_col h2{font-size:26px;font-weight:400;color:#0097d2 ;margin:50px 0 15px 0;} .contact_col h2:first-child{margin-top:0;} .contact_col label{display:block;text-align:left;} .contact_col input,.contact_col textarea{line-height:48px;border:1px solid #ccc;border-radius:3px;outline:none;display:block;padding:0 30px 0 30px;width:238px;margin-bottom:30px;resize:none;} .contact_col textarea{width:400px;height:120px;padding-top:15px;line-height:22px;} .contact_col p.error{color:#ce0005;background:url(../images/warning.png) no-repeat 0 11px;background-size:30px 28px;line-height:50px;padding-left:35px;font-weight:700;display:none;} .contact_col p.good{color:#84c31e;background:url(../images/good.png) no-repeat 0 11px;background-size:28px 28px;line-height:50px;padding-left:35px;font-weight:700;display:none;} .contact_col p.wait{color:#f80;line-height:50px;font-weight:700;display:none;} .contact_col p.error.open,.contact_col p.good.open,.contact_col p.wait.open{display:block;} .undeuxtrois{list-style-type:none;margin-top:50px;counter-reset:index;} .undeuxtrois li{float:left;width:200px;margin-right:100px;padding-top:50px;position:relative;} .undeuxtrois li:before{content:"\203a";position:absolute;font-size:100px;font-weight:300;top:50px;left:240px;color:#ccc;} .undeuxtrois li:after{content:counter(index);position:absolute;top:0;left:50%;margin-left:-21px;font-size:30px;width:40px;line-height:40px;text-align:center;height:40px;border:1px solid #0097d2 ;border-radius:20px;color:#0097d2 ;counter-increment:index;} .undeuxtrois li:last-child{margin-right:0px;} .undeuxtrois li:last-child:before{display:none;} #page_fonctionnalites .undeuxtrois li strong{color:#0097d2 ;font-size:20px;font-weight:700;display:block;padding-bottom:5px;} .quisommesnous_img{float:left;width:140px;margin:50px 20px 0 30px;} #page_fonctionnalites.center .quisommesnous_img{margin-top:70px;} #page_fonctionnalites p.quisommesnous_titre{float:left;width:600px;font-size:20px;padding:90px 0 0 0;} #page_fonctionnalites p.quisommesnous_titre a{font-size:30px;display:block;color:#0097d2 ;text-decoration:none;} #page_fonctionnalites p.quisommesnous_titre a:before{content:"\279d";opacity:0;transition:all ease 0.2s;margin-left:-30px;} #page_fonctionnalites p.quisommesnous_titre a:hover:before{opacity:1;margin-left:0;} #page_fonctionnalites p.quisommesnous_texte{padding-left:190px;margin-top:-40px;} #page_fonctionnalites p.quisommesnous_texte a{display:inline-block;margin-top:10px;text-decoration:none;color:#0097d2 ;} #page_fonctionnalites p.quisommesnous_texte a:before{content:"\279d";opacity:0;transition:all ease 0.2s;margin-left:-15px;} #page_fonctionnalites p.quisommesnous_texte a:hover:before{opacity:1;margin-left:0;} /* T�moignage */ .temoignage_conteneur{} .temoignage_conteneur a{display:block;width:190px;height:100px;padding:22px;border-right:1px solid #e8e8e8;border-bottom:1px solid #e8e8e8;float:left;} .temoignage_conteneur a:nth-child(n+11) {border-bottom:0;} .temoignage_conteneur a:nth-child(5n+5) {border-right:0} .temoignage_citation{width:600px;border-top:1px solid #e8e8e8;border-bottom:1px solid #e8e8e8;padding:30px 0 30px 0;margin:100px 0 100px 290px;text-align:center;} .temoignage_citation blockquote{font-size:24px;font-style:italic;color:#546881;margin-bottom:10px;font-family:'Roboto Slab', serif;font-weight:300;} .temoignage_citation blockquote:before{content:"\00ab";padding-right:10px;} .temoignage_citation blockquote:after{content:"\00bb";padding-left:10px;} .temoignage_citation cite{font-style:normal;} .temoignage_conteneur a span.expand {display:block;position:absolute;background:#fff;margin:0 0 0 180px;border:1px solid #ccc;width:240px;padding:0 20px 20px 20px;border-radius:3px;text-align:left;color:#333;box-shadow:5px 5px 1px rgba(0, 0, 0, 0.2);pointer-events:none;} .temoignage_conteneur a span.expand span.contentexpand {display:block;width:240px;line-height:20px;font-style:italic;} .temoignage_conteneur a span.expand span.contentexpand strong {color:#0097d2 ;font-style:normal;display:block;margin:10px 0 5px 0;font-weight:700;} .temoignage_conteneur a span.expand:before {content:"";display:block;position:absolute;top:15px;left:-16px;width:0;height:0;border-style:solid;border-width:10px 15px 10px 0;border-color:transparent #999 transparent transparent;} .temoignage_conteneur a span.expand:after {content:"";display:block;position:absolute;top:15px;left:-15px;width:0;height:0;border-style:solid;border-width:10px 15px 10px 0;border-color:transparent #fff transparent transparent;} .temoignage_conteneur a span.expand.left {margin-left:-280px;box-shadow:-5px 5px 1px rgba(0, 0, 0, 0.2);} .temoignage_conteneur a span.expand.left:before {left:281px;border-width:10px 0 10px 15px;border-color:transparent transparent transparent #999;} .temoignage_conteneur a span.expand.left:after {left:280px;border-width:10px 0 10px 15px;border-color:transparent transparent transparent #fff;} .citation_grande{font-size:26px;font-weight:300;line-height:35px;text-align:center;padding:0 200px 0 200px;font-style:italic;font-family:'Roboto Slab', serif;} .citation_grande:before{content:"\00ab";font-size:40px;position:absolute;margin:-4px 0 0 -25px;} .citation_grande:after{content:"\00bb";font-size:40px;position:absolute;margin:-4px 0 0 5px;} .temoignage_texte{text-align:center;margin:40px 200px 0 200px;} .temoignage_texte h2{display:inline-block;line-height:100px;padding-left:190px;background-repeat:no-repeat;color:#0097d2 ;font-size:20px;} .temoignage_texte p{display:inline-block;line-height:30px;padding:30px 100px 30px 100px;background:#f8f8f8;} .temoignage_texte p a{color:#0097d2 ;} .elem_presse{text-align:center;} .elem_presse a img{padding:5px;border:1px solid #e2e2e2;border-radius:3px;margin:0 20px;} .elem_presse a{color:#666;text-decoration:none;} .elem_presse a:hover img{border-color:#ccc;} /* Tarifs */ .soush1{text-align:center;margin:-50px 0 30px 0;font-size:20px;} .tarif{width:280px;margin:50px 40px 30px 0;border-radius:3px;text-align:center;float:left;background:url(../images/soleil.png) no-repeat center top #8c0065} .tarif:first-child{margin-left:130px;} .tarif:nth-child(3){margin-right:0;} .tarif p.avantage{color:rgba(255,255,255,0.5);text-transform:uppercase;font-size:13px;font-weight:700;padding:40px 0 15px 0;} .tarif strong{display:block;position:relative;padding-bottom:100px;background:url(../images/nuages.png) no-repeat center bottom;background-size:280px 85px;color:#fff;font-size:40px;font-weight:700;} .tarif strong span.n_plus{display:block;position:absolute;font-size:13px;text-transform:uppercase;width:100%;text-align:center;margin-top:45px;} .tarif span.help_numero, .plan2 span.help_numero{position:absolute;font-size:13px;background:#fff;color:#8c0065;width:15px;height:15px;line-height:15px;border-radius:8px;text-align:center;font-weight:700;cursor:pointer;margin:8px 0 0 5px;} .plan2:nth-child(1) span.help_numero{background:#b30080;color:#fff;font-size:13px !important;} .plan2:nth-child(2) span.help_numero{background:#8c0065;color:#fff;font-size:13px !important;} .plan2 span.help_numero{margin-top: 25px}; .tarif div.desc{background:rgba(255,255,255,0.95);padding-top:25px} .tarif div.desc p{font-size:17px;font-weight:700;padding:0 35px 0 35px;color:#37474f;} .tarif div.desc p.small{font-size:13px;font-weight:400;} .tarif div.desc span.plus{display:block;font-size:17px;color:#7f868e;margin:15px;} .tarif div.desc span.plus.lessmargin{margin-top:5px;} .tarif div.desc span.link{display:block;font-size:13px;color:#95a2a9;text-decoration:underline;cursor:pointer;margin-top:5px;} .tarif div.desc p.prix{color:#8c0065;font-size:40px;font-weight:700;} .tarif div.desc p.prix sup{font-size:20px;} .tarif div.desc p.sousprix{font-size:13px;color:#95a2a9;} .tarif div.desc p.promo{color:#8c0065;} .tarif div.desc .btn{margin:25px 0 25px 0;text-transform:uppercase;font-size:14px;font-weight:700;} .tarif ul{list-style-type:none;margin-top:-12px;} .tarif ul li{display:inline-block;background:#009ef9;border-radius:5px;line-height:34px;margin:4px 3px 4px 3px;color:#fff;font-weight:700;cursor:pointer;opacity:0.4;width:55px;} .tarif ul li:hover{opacity:0.8;} .tarif ul li.lead{opacity:1;} .tarif.n0811{background-color:#69004c;} .tarif.n0811 div.desc p.prix,.tarif.n0811 div.desc p.promo,.tarif.n0811 span.help_numero{color:#69004c;} .tarif.n0102{background-color:#009ef9;} .tarif.n0102 div.desc p.prix,.tarif.n0102 div.desc p.promo,.tarif.n0102 span.help_numero{color:#009ef9;} .tarif.n0805{background-color:#71bf44;} .tarif.n0805 div.desc p.prix,.tarif.n0805 div.desc p.promo,.tarif.n0805 span.help_numero{color:#71bf44;} .tarif.n0805 ul li{background:#71bf44;} .tarif.be{background:url(../images/soleil.png) no-repeat center top #9ccedc;} .tarif.be div.desc p.prix,.tarif.be div.desc p.promo,.tarif.be span.help_numero{color:#9ccedc;} .tarif.be.lead div.desc p.prix,.tarif.be.lead div.desc p.promo,.tarif.be.lead span.help_numero{color:#0097d2 ;} .tarif.be.lead{background-color:#0097d2 ;} .tarif.be strong{font-size:60px;padding-bottom:80px;} .autres_forfait{text-align: center; display: flex; flex-direction: column; align-items: flex-start; max-width: 460px; margin: 0 auto; padding-bottom: 50px;} .autres_forfait p {display: flex; align-items: center; padding: 20px 0;} .autres_forfait a{font-size:19px; font-weight: bold; text-align: left;} .autres_forfait img {width: 140px; padding-right: 24px;} .autres_forfait p:nth-of-type(1) a{ color:#5fb24a; } .autres_forfait p:nth-of-type(2) a{ color:#961b74; } .autres_forfait .title { font-weight: bold; text-align: center; font-size: 20px; width: 100%; margin-bottom: 20px; } @media all and (min-width: 550px){ .autres_forfait .nowrap{ white-space: nowrap; } } .tarif_question {margin-top:20px;height:70px;overflow:hidden;transition:all ease 0.2s;border-radius:5px;} .tarif_question h2{text-align:center;background:#edf5f6;;line-height:70px;height:70px;padding:0 20px 0 20px;cursor:pointer;color:#546881;font-size:20px;transition:all ease 0.2s;} .tarif_question h2:after{content:"+";line-height:70px;float:right;font-size:30px;margin-right:20px;} .tarif_question h2:hover{background:#0097d2;color:#fff;} .tarif_question div{background:#f8f8f8;padding:20px;font-size:15px;line-height:26px;color:#546881;} .tarif_question div span.link{cursor:pointer;border-bottom:1px dotted #0097d2 ;color:#0097d2 ;} .tarif_question div strong{color:#0097d2 ;font-weight:700;} .tarif_question.open h2{background:#0097d2 ;color:#fff;} .tarif_question.open h2:after{content:"-";} #packages_have { font-size: 20px; text-align: center; margin-bottom: 70px; } #packages_have strong{ font-weight: bold; } #packages_have .link{ cursor: pointer; text-decoration: underline; } #popup_background{position:fixed;z-index:10;top:100%;left:0;bottom:0;right:0;background:rgba(0,0,0,0.5);opacity:0;cursor:url(../images/close.png),pointer;transition:opacity ease 0.2s;} #popup_background.open{opacity:1;top:0;} .popup{position:fixed;z-index:11;width:500px;height:540px;top:48%;left:50%;margin:-250px 0 0 -250px;border-radius:15px;background:#fff;box-shadow:0 0 30px rgba(0,0,0,0.4);opacity:0;pointer-events:none;transition:all ease 0.2s;} .popup .flex { display: flex; } .popup .flex ul { width: inherit; } .popup .flex ul:nth-of-type(2) { padding: 0 13px; } .popup.open{opacity:1;pointer-events:auto;top:50%;} .popup p.titre{padding: 10px 0;line-height:35px;color:#fff;font-size:20px;font-weight:700;background:#0097d2 ;border-top-left-radius:15px;border-top-right-radius:15px;} .popup .content{height:420px;overflow:auto;padding:25px;text-align:left;} .popup .content p{font-size:16px;margin-bottom:20px;} .popup .content strong{font-weight:700;display:inline-block;padding:5px 10px 5px 10px;border-radius:3px;color:#fff;background:#84c31e;} .popup ul{width:33%;float:left;list-style-type:none;} .popup li{line-height:30px;} .popup li.t{color:#0097d2 ;font-weight:700;font-size:20px;} .popup li span{float:left;margin:3px 5px 0 0;} .popup#popup_pays,.popup#popup_fonctionnalites{width:900px;height:540px;margin:-250px 0 0 -450px;} .popup .close_popup{display:block;float:right;width:26px;height:26px;background:url(../images/close.png) no-repeat;cursor:pointer;margin: 5px 12px 0 0;} .popup .modedemploi{background:#f2f2f2;border:1px solid #e2e2e2;padding:10px;border-radius:3px;} .popup .modedemploi.small{font-size:13px;} #content_redirections{width:100%;border-collapse:collapse;} #content_redirections td{border-bottom:1px solid #e2e2e2;line-height:30px;} #content_redirections td.t{color:#0097d2 ;font-weight:700;} #content_redirections td.vert{color:#84c31e;font-weight:700;} #content_redirections tr:hover{color:#0097d2 ;background:rgba(0,162,213,0.2);} .calculette{text-align:center;} .calculette span{display:block;margin:15px 0 5px 0;font-weight:700;} .calculette strong{font-size:30px;margin:15px 0 15px 0;} .calculette select{line-height:48px;height:48px;border:1px solid #ccc;border-radius:3px;outline:none;padding:0;text-indent:30px;width:70%;resize:none;} /* CROIX ROUGE */ #croixrouge header { background-color: #0098cd; padding: 90px 20px 50px 20px; margin-bottom: 100px; color: #fff; font-size: 22px; } #croixrouge header h4 { padding-right: 300px; font-size: 20px; } #croixrouge header h1 { color: white; padding: 0; margin-bottom: 30px; padding-right: 300px; font-size: 48px; } #croixrouge header .price .small { font-size: 28px; } #croixrouge header .price { font-weight: 600; font-size: 40px; padding-right: 300px; margin-bottom: 20px; } #croixrouge header .main { position: relative; padding-right: 300px; width: 880px; display: flex; justify-content: space-between; } #croixrouge header .main > div { width: 50%; } #croixrouge header .main > div > div { font-size: 17px; margin: 20px; } #croixrouge header img { position: absolute; bottom: -25px; right: -200px; width: 500px; } @media (max-width: 1500px){ #croixrouge header img{ bottom: -360px; right: 50%; transform: translateX(50%); } #croixrouge header{ padding: 50px 20px 200px 20px; } #croixrouge header h1, #croixrouge header h4, #croixrouge header .main, #croixrouge header .price{ padding-right: 0; } } @media (max-width: 1180px){ #croixrouge header .main{ margin: 0 auto; } } @media (max-width: 920px){ #croixrouge header .main{ flex-direction: column; align-items: center; width: 100%; } #croixrouge header .main > div{ width: auto; display: inline-block; max-width: 430px; } } @media (max-width: 768px){ #croixrouge header img{ width: 420px; bottom: -270px; max-width: 100%; } } @media (max-width: 450px){ #croixrouge header img{ display: none; } #croixrouge header{ padding: 50px 20px; } } /* Pricing */ #pricing { position: relative; } #pricing header { background-color: #0098cd; padding: 35px 0 90px; } #pricing h1 { font-size: 40px; font-weight: bold; color: white; padding-bottom: 35px; } #pricing h1 span { display: block; font-size: 25px; } #pricing .plans { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; position: relative; top: -80px; } #pricing .plan { z-index: 1; margin: 0 -7px; padding: 30px 20px; width: calc(100% - 60px); max-width: 300px; background: white; box-shadow: 0px 13px 18px rgba(0, 0, 0, 0.1); border-radius: 4px; } #pricing .plan2 { max-width: 316px; } #pricing .plan hr.bar{ margin: 30px auto; } #pricing .plan:nth-of-type(2) { padding: 30px 20px 40px; } #pricing .plan:nth-of-type(2) hr.bar { margin-top: 35px; } #pricing .plan:nth-of-type(2) .cta { margin-top: 15px; } @media all and (min-width: 768px){ #pricing .plans .plan2:nth-of-type(1) { margin-right: 50px; } } #pricing .plans .plan2:nth-of-type(2) { padding: 30px 20px; } #pricing .plans .plan2:nth-of-type(2) hr.bar { margin-top: 15px; } #pricing .plans .plan2:nth-of-type(2) .cta { margin-top: 0px; } #pricing .plans .plan2 .cartouche { width: 80%; margin-top: 25px; } #pricing .plans .plan:nth-last-of-type(2) { z-index: 2; } #pricing .plans .plan .colored strong { font-size: 20px; font-weight: bold; } #pricing .plans .plan strong { font-size: 43px; font-family: 'Lato', sans-serif; font-weight: bold; } #pricing .plans .plan strong span { font-family: 'Raleway', sans-serif; font-size: 29px; line-height: 16px; } #pricing .plans .plan p{ font-size: 18px; } #pricing .plans .plan .link { text-decoration: underline; cursor: pointer; padding-top: 0px !important; } #pricing .plans .plan p:nth-of-type(n+2){ padding: 15px 0; } #pricing .plans .plan p b { font-weight: bold; display: block; } #pricing .plans .plan p a { display: block; font-size: 14px; color: black; padding-top: 5px; } #pricing .plan .cta { color: white; text-decoration: none; padding: 15px 20px; border-radius: 4px; display: inline-block; } #pricing .plans .plan:nth-of-type(1){max-width:400px;} #pricing .plans .plan:nth-of-type(1) hr.bar, #pricing .plans .plan:nth-of-type(1) .cta { background: #0097d2; } #pricing .plans .plan:nth-of-type(1) .cta:hover { background: #0080b3; } #pricing .plans .plan hr:nth-of-type(1).bar, #pricing .plans .plan:nth-of-type(1) p a { color: #0097d2; } #pricing .plans .plan:nth-of-type(2) hr.bar, #pricing .plans .plan:nth-of-type(2) .cta { background: #0097d2; } #pricing .plans .plan:nth-of-type(2) .cta:hover { background: #0080b3; } #pricing .plans .plan:nth-of-type(2) .colored, #pricing .plans .plan hr:nth-of-type(2).bar, #pricing .plans .plan:nth-of-type(2) p a { color: #0097d2; } #pricing .plans .plan:nth-of-type(3) hr.bar, #pricing .plans .plan:nth-of-type(3) .cta { background: #EDAE47; } #pricing .plans .plan:nth-of-type(3) .cta:hover { background: #e89817; } #pricing .plans .plan:nth-of-type(3) .colored, #pricing .plans .plan hr:nth-of-type(3).bar, #pricing .plans .plan:nth-of-type(3) p a { color: #EDAE47; } #pricing .plans .plan2:nth-of-type(1) hr.bar, #pricing .plans .plan2:nth-of-type(1) .cta { background: #b30080; } #pricing .plans .plan2:nth-of-type(1) .cta:hover { background: #8c0065; } #pricing .plans .plan2:nth-of-type(1) .colored, #pricing .plans .plan2 hr:nth-of-type(1).bar, #pricing .plans .plan2:nth-of-type(1) p a { color: #b30080; } #pricing .plans .plan2:nth-of-type(2) hr.bar, #pricing .plans .plan2:nth-of-type(2) .cta { background: #8c0065; } #pricing .plans .plan2:nth-of-type(2) .cta:hover { background: #660049; } #pricing .plans .plan2:nth-of-type(2) .colored, #pricing .plans .plan2 hr:nth-of-type(2).bar, #pricing .plans .plan2:nth-of-type(2) p a { color: #8c0065; } #pricing .plans .plan .dot{ font-size: 36px; line-height: 13px; } #pricing .plans .plan .dot:before{ content: '\2022'; } .paddingtop-5 { padding-top: 5px !important; } #pricing .plan.quicktalk{margin: 0 auto 30px auto;position:relative;overflow:hidden;max-width:400px;box-shadow: 0 0 80px rgb(0 0 0 / 20%);} #pricing .plan.quicktalk span.new{background:gold;color:#000;position:absolute;transform:rotate(-33deg);width:200px;text-align:center;line-height:30px;top:15px;left:-55px;box-shadow: inset 0 -8px 8px rgb(255 255 255 / 28%);text-shadow: 0 0 9px rgb(0 0 0 / 30%);} #pricing .plan.quicktalk strong.title{display:block;font-size:18px;color:#2081E2;font-family: 'Lato', sans-serif;font-weight:700;} #pricing .plan.quicktalk img{width:160px;margin:15px 0 5px 0} #pricing .plan.quicktalk .cta{background:#2081E2cc;cursor:pointer;margin:15px 0} #pricing .plan.quicktalk .cta:hover{background:#2081E2;} #pricing .plan.quicktalk span.price{display:block;font-size:43px;font-style:normal;font-family: 'Lato', sans-serif;font-weight: bold;} #pricing .plan.quicktalk span.price span{font-family: 'Raleway', sans-serif;font-size: 29px;line-height: 16px;} /* Inscription */ #conteneur_numero{height:397px;} #conteneur_choix_numero{margin-left:122px;height:367px;position:absolute;opacity:0;transition:all ease 0.3s;} .cont_numero{width:310px;border:1px solid #e2e2e2;text-align:center;padding:25px 0 0 0;height:340px;float:left;margin-right:-1px;background:#fff;} .cont_numero:nth-child(1){border-top-left-radius:15px;border-bottom-left-radius:15px;} .cont_numero:nth-child(3){border-top-right-radius:15px;border-bottom-right-radius:15px;} .cont_numero h2{font-weight:700;font-size:25px;color:#0097d2 ;} .cont_numero p.tarifnum{} .cont_numero ul{list-style-type:none;height:200px;margin:20px 0 20px 0;} .cont_numero ul li{font-size:20px;color:#0097d2 ;cursor:pointer;line-height:40px;position:relative;} .cont_numero ul li span.cachenum{display:block;position:absolute;background:transparent;width:100%;height:100%;top:0;} .cont_numero ul li:before{content:"";display:inline-block;width:13px;height:13px;border-radius:13px;border:1px solid #999;margin-right:20px;background:#fff;} .cont_numero ul li.lead:before{background:#999;} .cont_numero ul li:hover{background:#f8f8f8;} .cont_numero p.generer{color:#546881;font-size:13px;cursor:pointer;} .cont_numero p.generer:before{content:"";display:inline-block;width:20px;height:16px;background:url(../images/generate.gif) no-repeat;background-size:20px 32px;vertical-align:bottom;padding-right:5px;} .cont_numero p.generer:hover{color:#000;} .cont_numero p.generer.turn:before{background-position:0 -16px;} .cont_numero.premium h2{color:#6b9b2b;} .cont_numero.premium ul li{color:#6b9b2b;} .cont_numero.gold h2{color:#c59d00;} .cont_numero.gold ul li{color:#c59d00;} #conteneur_choix_numero.z2{margin-left:279px;} #conteneur_choix_numero.z2 .cont_numero:nth-child(2){border-top-right-radius:15px;border-bottom-right-radius:15px;border-left:0;} #conteneur_choix_numero.z2 .cont_numero:nth-child(2):before{content:"";display:block;position:absolute;width:1px;height:310px;background:#e2e2e2;} #conteneur_choix_zone{height:397px;position:relative;opacity:0;transition:all ease 0.3s;margin-top:0;} #choix_dom{list-style-type:none;text-align:left;margin:0;display:block;padding-top:30px;} #choix_dom li{height:45px;line-height:50px;background:url(../images/picto_dom.png) no-repeat;padding-left:50px;color:#546881;background-size:45px 540px;cursor:pointer;position:absolute;left:50%;} #choix_dom li:hover{color:#0097d2 ;background-position:0 -45px;} #choix_dom li:nth-child(1){margin:0 0 0 -300px;} #choix_dom li:nth-child(2){background-position:0 -90px;margin:80px 0 0 -350px;} #choix_dom li:nth-child(2):hover{background-position:0 -135px;} #choix_dom li:nth-child(3){background-position:0 -180px;margin:160px 0 0 -300px;} #choix_dom li:nth-child(3):hover{background-position:0 -225px;} #choix_dom li:nth-child(4){background-position:0 -270px;margin:0 0 0 180px;} #choix_dom li:nth-child(4):hover{background-position:0 -315px;} #choix_dom li:nth-child(5){background-position:0 -360px;margin:80px 0 0 230px;} #choix_dom li:nth-child(5):hover{background-position:0 -405px;} #choix_dom li:nth-child(6){background-position:0 -450px;margin:160px 0 0 180px;} #choix_dom li:nth-child(6):hover{background-position:0 -495px;} #france{display:block;width:375px;height:375px;position:absolute;background:url(../images/france.png) no-repeat;background-size:2250px 375px;margin:0 0 0 -188px;top:0;left:50%;} #france.zone01{background-position:-375px 0;} #france.zone02{background-position:-750px 0;} #france.zone03{background-position:-1125px 0;} #france.zone04{background-position:-1500px 0;} #france.zone05{background-position:-1875px 0;} #france img{width:375px;height:375px;} #france area{cursor:pointer;} .indicporta{position:absolute;text-align:center;top:390px;font-size:15px;width:100%;} .indicporta span{cursor:pointer;border:1px solid #ccc;padding:8px 15px 8px 15px;border-radius:3px;color:#546881;} .indicporta span:hover{color:#0097d2 ;border-color:#0097d2 ;} #choix_zone_belgique{list-style-type:none;text-align:center;position:absolute;width:1180px;z-index:2;margin-top:-36px;} #choix_zone_belgique li{display:inline-block;font-size:15px;line-height:35px;background:#f2f2f2;border:1px solid #e2e2e2;border-top-left-radius:8px;border-top-right-radius:8px;cursor:pointer;padding:0 15px 0 15px;color:#999;margin:0 5px;} #choix_zone_belgique li:hover{background:#e2e2e2;color:#546881;} #choix_zone_belgique li.lead{background:#fff;border-bottom:1px solid #fff;color:#0097d2 ;} #conteneur_choix_porta{position:absolute;opacity:0;transition:all ease 0.3s;margin-left:122px;} .cont_porta{width:907px;height:315px;padding:25px;border:1px solid #e2e2e2;border-radius:15px;text-align:center;} #conteneur_choix_porta h2{font-weight:700;font-size:25px;color:#0097d2 ;} #conteneur_choix_porta input{line-height:48px;height:48px;border:1px solid #ccc;border-radius:3px;outline:none;padding:0 30px 0 50px;width:218px;margin:30px 0 30px 0;resize:none;font-size:18px;text-align:center;} #conteneur_choix_porta input.error{border-color:#ce0005;border-width:2px;height:46px;line-height:46px;background:url(../images/warning.png) no-repeat 10px 11px;background-size:30px 28px;} .infoporta{background:#f8f8f8;margin:0 200px 0 200px;border-radius:5px;padding:20px 20px 10px 20px;border:1px solid #e2e2e2;} .infoporta p{margin-bottom:10px;} .infoporta a{color:#0097d2 ;text-decoration:none;border-bottom:1px dotted #0097d2 ;} #conteneur_choix_porta.be{margin-left:279px;} #conteneur_choix_porta.be .cont_porta{width:570px;} #conteneur_choix_porta.be .infoporta{margin:0 30px 0 30px;} #conteneur_numero.numero #conteneur_choix_numero{opacity:1;display:block;} #conteneur_numero.numero #conteneur_choix_zone,#conteneur_numero.numero #conteneur_choix_porta{pointer-events:none;} #conteneur_numero.zone #conteneur_choix_zone{opacity:1;display:block;} #conteneur_numero.zone #conteneur_choix_numero,#conteneur_numero.zone #conteneur_choix_porta{pointer-events:none;} #conteneur_numero.porta #conteneur_choix_porta{opacity:1;display:block;} #conteneur_numero.porta #conteneur_choix_numero,#conteneur_numero.porta #conteneur_choix_zone{pointer-events:none;} #conteneur_numero .retour{margin-top:20px;text-align:left;} #conteneur_numero .retour span{cursor:pointer;text-decoration:underline;color:#546881;font-size:13px;margin-left:25px;} #conteneur_numero .retour span:before{content:"\1438";position:absolute;margin:2px 10px 0 -15px;} #conteneur_coordonnees{margin-left:122px;} .col_coordonnees{width:415px;height:420px;padding:50px 25px 0 25px;float:left;margin-right:-1px;} .col_coordonnees:nth-child(1){border-top-left-radius:15px;border-bottom-left-radius:15px;} .col_coordonnees:nth-child(2){border-top-right-radius:15px;border-bottom-right-radius:15px;} .col_coordonnees label{display:inline-block;font-size:11px;text-transform:uppercase;width:90px;padding-right:10px;position:relative;line-height:50px;text-align:right;} .col_coordonnees label:after{content:" :";} .col_coordonnees input,.col_coordonnees select{line-height:48px;height:48px;border:1px solid #ccc;border-radius:3px;outline:none;padding:0 30px 0 50px;width:218px;margin-bottom:30px;resize:none;} .col_coordonnees select{padding-left:0;text-indent:50px;} .col_coordonnees input:-webkit-autofill,.col_coordonnees select:-webkit-autofill {-webkit-box-shadow:0 0 0px 1000px white inset;} .col_coordonnees label:before{content:"";display:block;position:absolute;width:50px;height:48px;background:url(../images/picto_input.png) no-repeat;background-size:50px 350px;position:absolute;top:-1px;left:100px;} .col_coordonnees label.society:before{background-position:0 -50px;} .col_coordonnees label.email:before{background-position:0 -100px;} .col_coordonnees label.pass:before{background-position:0 -150px;} .col_coordonnees label.phone:before{background-position:0 -200px;} .col_coordonnees label.address:before{background-position:0 -250px;} .col_coordonnees label.country:before{background-position:0 -300px;} .col_coordonnees select{width:298px;} .inscription_valid{text-align:center;margin:50px 0 150px 0;position:relative;} .error_inscription{display:block;color:#ce0005;font-weight:700;position:absolute;width:100%;margin-top:-30px;opacity:0;transition:all ease 0.2s;} .error_inscription.show{opacity:1;} .col_coordonnees p.error input,.col_coordonnees p.error select{border-color:#ce0005;border-width:2px;height:46px;line-height:46px;} .col_coordonnees p.error label{color:#ce0005;} .col_coordonnees p.error label:before{background-image:url(../images/warning.png);background-position:10px 11px;background-size:30px 28px;} #wait_inscription{display:none;height:64px;background:url(../images/wait2.gif) no-repeat center top;} /* Recapitulatif */ .recap_info{width:400px;background:#f8f8f8;border-radius:5px;padding:25px;float:left;} .recap_info p{margin-bottom:15px;} .recap_info span.titre{display:block;font-size:16px;font-weight:700;color:#0097d2 ;} .recap_facture{width:580px;float:left;margin-left:100px;text-align:right;} .recap_facture p{border-bottom:1px dashed #ccc;font-size:20px;height:18px;margin:15px 0 40px 0;text-align:left;} .recap_facture p span{background:#fff;color:#546881;display:inline-block;} .recap_facture p span.label{padding-right:10px;} .recap_facture p span.prix{float:right;padding-left:10px;} .recap_facture p.total span.label{text-align:right;width:450px;} .recap_facture p.total span{font-weight:700;color:#0097d2 ;} .recap_facture p.promo span{text-transform:uppercase;color:#84c31e;} .recap_facture p.tva{margin:-20px 0 0 0;border:0;} .recap_facture p.tva span{font-size:13px;} .choix_paiement{list-style-type:none;margin:40px 0 40px 0;} .choix_paiement li{width:320px;padding:17px 80px 0 0;height:63px;background:url(../images/picto_paiement.png) no-repeat -25px 0 #ccc;background-size:80px 160px;position:relative;margin:0 0 20px 180px;border-radius:3px;font-size:14px;cursor:pointer;transition:all ease 0.2s;} .choix_paiement li:nth-child(2){background-position:-25px -80px;} .choix_paiement li:hover{background-color:#c7d6ad;background-position:-20px 0;} .choix_paiement li:nth-child(2):hover{background-position:-20px -80px;} .choix_paiement li.lead{background-color:#84c31e;background-position:0 0;} .choix_paiement li.lead:nth-child(2){background-position:0 -80px;} .choix_paiement li strong{display:block;color:#fff;font-weight:700;font-size:19px;} .choix_paiement li span.check{position:absolute;width:30px;height:30px;border-radius:5px;background:#fff;top:25px;right:25px;box-shadow:2px 2px 3px rgba(0,0,0,0.05);} .choix_paiement li span.check:before{content:"";position:absolute;width:12px;height:3px;background:transparent;top:17px;left:0;transform:rotate(90deg);transition:all ease 0.2s;} .choix_paiement li span.check:after{content:"";position:absolute;width:16px;height:3px;background:transparent;top:15px;left:21px;transform:rotate(90deg);transition:all ease 0.2s;} .choix_paiement li.lead span.check:before{background:#84c31e;left:4px;transform:rotate(40deg);} .choix_paiement li.lead span.check:after{background:#84c31e;left:11px;transform:rotate(130deg)} .empreinte{border:1px solid #e8e8e8;border-radius:5px;padding:20px;margin:40px 0 100px 0;text-align:right;} .empreinte p{border:0;height:auto;font-size:15px;margin:0;} .empreinte p.t{color:#0097d2 ;font-weight:700;margin-bottom:8px;} #cgv{border:0;text-align:right;position:relative;color:#546881;padding-right:65px} #cgv span.checkcgv{position:absolute;width:28px;height:28px;border-radius:5px;background:#fff;top:-2px;right:25px;border:1px solid #ccc;cursor:pointer;transition:all ease 0.4s;} #cgv span.checkcgv:before{content:"";position:absolute;width:12px;height:3px;background:transparent;top:16px;left:0;transform:rotate(90deg);transition:all ease 0.2s;} #cgv span.checkcgv:after{content:"";position:absolute;width:16px;height:3px;background:transparent;top:14px;left:21px;transform:rotate(90deg);transition:all ease 0.2s;} #cgv.lead span.checkcgv:before{background:#84c31e;left:3px;transform:rotate(40deg);} #cgv.lead span.checkcgv:after{background:#84c31e;left:10px;transform:rotate(130deg)} #cgv.error span.checkcgv{width:32px;height:32px;top:-7px;right:20px;border:4px solid #ce0005;transition:all ease 0.2s;} #cgv a.linkcgv{border-bottom:1px dotted #0097d2 ;cursor:pointer;color:#0097d2 ;text-decoration:none;} .confirmation{background:#f8f8f8;border-radius:5px;padding:25px;margin:0 300px 50px 300px;text-align:center;} .confirmation p{margin-bottom:15px;} .confirmation p.t{font-weight:700;color:#0097d2 ;padding:10px 0 20px 0;font-size:18px;} .confirmation_contact{text-align:center;margin-bottom:80px;} .input_iban{text-align:center;position:relative;margin:30px 0 60px 0;} .input_iban label{display:block;position:absolute;width:100%;text-align:center;line-height:50px;color:#ccc;font-weight:700;pointer-events:none;transition:all ease 0.2s;} .input_iban input{font-size:20px;line-height:48px;height:48px;border:1px solid #ccc;border-radius:3px;outline:none;padding:0 30px 0 30px;resize:none;width:600px;} .input_iban.on label{margin-top:-48px;color:#0097d2 ;} .info_iban{background:#f8f8f8;border:1px solid #e8e8e8;border-radius:5px;padding:30px 30px 15px 30px;margin:30px 260px 150px 260px;} .info_iban p{margin-bottom:15px;} .info_iban p:before{content:"> ";} .recap_iban{font-size:20px;} .recap_iban p{margin-bottom:15px;} .recap_iban p.t{font-size:15px;text-align:center;} .recap_iban p.t a{color:#0097d2 ;} .recap_iban label{display:inline-block;width:47%;margin-right:2%;text-align:right;font-weight:700;color:#0097d2 ;} /* Footer */ footer .container #widget-container { transform: scale(0.7); -webkit-transform-origin-x: 0; height: 100px; display: inline-block; } #ek-shadow-wid .sh-rating-obtained, #ek-shadow-wid .shoutoff, #ek-shadow-wid .shsec-text { color: white !important; } .bandeau_promo{background: linear-gradient(to right, #0588c0, #63b6d9); no-repeat top center;margin-top:40px;color:#fff;font-size:20px;padding: 60px;} .bandeau_promo strong{font-size:30px;font-weight:400;display:inline-block;margin-bottom:10px;} .bandeau_promo .btn{margin-top:30px;position:relative;font-weight: bold;} .bandeau_promo .btn.twolines{line-height:24px;height:auto;padding:10px 40px 10px 30px;} .bandeau_promo .btn.twolines span{display:block;text-transform:uppercase;font-size:16px;opacity:0.7;} .bandeau_promo .btn.twolines:before{top:calc(50% - 12px);} .bandeau_promo.price { margin-top: 0; font-size: 15px; } .bandeau_promo.price strong { font-size: 25px; font-weight: bold; } .bandeau_promo.price strong .numbers { font-size: 50px; font-weight: 600; } .bandeau_promo.price strong .month { font-weight: 400; } .bandeau_promo.price strong .commitment { display: block; font-size: 18px; font-weight: bold; } .bandeau_promo.price .container { display: flex; flex-wrap: wrap; justify-content: center; max-width: 1000px; margin: 0 auto; padding-top: 70px; } .bandeau_promo.price .container > div { padding-bottom: 25px; margin: 0 20px; width: calc(33% - 40px); } .bandeau_promo.price .container img{ width: 20px; } .bandeau_promo.price h3 { font-size: 20px; font-weight: bold; padding: 10px 0 5px; } .bandeau_promo.price p { font-size: 18px;} .bandeau_faq, .bandeau_faq_news{background:url(../images/questions.png) no-repeat top center fixed #f9f9f9;padding:80px 0 80px 0;color:#555;} .bandeau_faq .main, .bandeau_faq_news .main{position:relative;text-align:center; max-width: 1000px; width: 100%; margin: 0 auto;} .bandeau_faq p.t{text-align:center;font-size:30px;margin-bottom:20px;} .bandeau_faq .container, .bandeau_faq_news .container { display: flex; flex-wrap: wrap; padding: 35px 0 0 0; } @media all and (max-width: 999px){ .bandeau_faq .container, .bandeau_faq_news, .container { justify-content: center; } } .bandeau_faq .container > div, .bandeau_faq_news .container > div { width: calc(100% - 30px - 16px); max-width: calc(500px - 30px - 16px); margin: 8px; } .bandeau_faq .container > a, .bandeau_faq_news .container > a { width: calc(100% - 30px); max-width: calc(500px - 30px); } .bandeau_faq div.faqelem, .bandeau_faq_news div.faqelem{padding:15px;background:#fff;cursor:pointer;box-shadow:0px 2px 10px rgba(0,51,68,0.12);color:#0097d2 ;transition:all ease 0.2s;display: flex;justify-content: space-between;} .bandeau_faq div.faqelem:after{ content: "+"; } .bandeau_faq div.faqelem:hover{background:#0298d3;box-shadow:0;color:#fdfdfd;} .bandeau_faq_news div.faqelem:after{ content: "+"; } .bandeau_faq_news div.faqelem:hover{background:#0298d3;box-shadow:0;color:#fdfdfd;} #faqReponseFooter{position:absolute;width:100%;z-index:1;height:100%;font-size:20px;color:#333;line-height:40px;pointer-events:none;transition:all ease 0.3s;} #faqReponseFooter .content{width:550px;margin:-50px auto;padding:17px;background:rgba(249,249,249,0);transition:all ease 0.3s;} #faqReponseFooter p{display:none;} #faqReponseFooter.open{pointer-events:auto;transition:all ease 0.8s;} #faqReponseFooter.open .content:before { content: '\2715'; display: block; text-align: right; cursor: pointer; } #faqReponseFooter.open .content{background:rgba(249,249,249,0.9);transition:all ease 0.3s; box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.1);} #faqReponseFooter p.open{display:block;} #footer{padding:50px 0 50px 0;} #footer.withborder{border-top:1px solid #e8e8e8;} #footer .main{text-align:center;} #footer .pres{padding:0 300px 0 300px;color:#666;} #footer .pres img{margin:20px;} #footer .pres a{color:#333;} #footer .liens{margin-bottom:30px;} #footer .liens a{color:#666;text-decoration:none;} #footer .liens a:hover{color:#333;text-decoration:underline;} #footer p.legal{font-size:12px;} #social_links{position:fixed;list-style-type:none;top:50%;left:0;z-index:9;margin-top:-120px;} #social_links li{margin-left:-180px;width:180px;padding-left:60px;height:60px;line-height:60px;background:url(../images/picto_social.png) no-repeat right 0 #3b5998;background-size:60px 240px;color:#fff;text-decoration:none;text-align:left;transition:all cubic-bezier(.17,.86,.08,.76) 0.4s;cursor:pointer;} #social_links li.twitter{background-position:right -60px;background-color:#4099ff} #social_links li.google{background-position:right -120px;background-color:#d34836} #social_links li.linkedin{background-position:right -180px;background-color:#007bb5} #social_links li:hover{margin-left:-40px;} /*#contact_box{position:fixed;z-index:99;bottom:-170px;right:20px;transition:all ease 0.2s;}*/ /*#contact_box p.head{position:absolute;background:#84c31e;width:320px;height:48px;line-height:48px;border-radius:24px;color:#fff;text-align:left;font-size:17px;font-weight:700;cursor:default;box-shadow:0 0 8px rgba(0,0,0,0.2);}*/ /*#contact_box p.head:before{content:"";display:block;width:48px;height:48px;background:url(../images/logo.png) no-repeat 0 -2px;background-size:150px 102px;float:right;margin-right:1px;}*/ /*#contact_box div.body{width:290px;padding:55px 20px 30px 10px;text-align:left;background:#fff;margin:24px 0 0 0;box-shadow:0 0 8px rgba(0,0,0,0.2);opacity:0;}*/ /*#contact_box div.body p{color:#84c31e;font-size:17px;font-weight:700;background:url(../images/picto_contact.png) no-repeat 0 0;background-size:50px 100px;height:50px;margin-bottom:10px;padding:3px 0 0 50px;}*/ /*#contact_box div.body p:last-child{background-position:0 -50px;}*/ /*#contact_box:hover{bottom:0;}*/ /*#contact_box:hover div.body{opacity:1;}*/ /******************** * MODAL DE CONTACT * ********************/ .modal-box{position:fixed;bottom:500px;right:60px;z-index:4;height:0;width:0;} .modal-container {position:relative;z-index:-2;} .modal-button { position:absolute; top:0; right:0; padding:0 15px; height:40px; width:325px; border:none; border-radius:20px; font-size:1.05em; font-weight:bold; background-color:#84c31e; color:#fefefe; outline:none; cursor:pointer; -webkit-transform:translate3d(0, 1040%, 0); transform:translate3d(0, 1040%, 0); } .modal-button:after { content:""; display:block; float:right; width:32px; height:32px; margin:-3px -2px -6px 16px; background:url(../images/logo.png) no-repeat -15px -11px; background-size:150px 102px; } .modal-content { position:relative; top:20px; left:20px; padding:35px 5px 5px; border-radius:5px; box-shadow:0 0 16px 0 rgba(128,128,128,0.4); background-color:#ffffff; overflow:hidden; z-index:-1; opacity:0; -webkit-transform:translate3d(0, 100%, 0); transform:translate3d(0, 100%, 0); } .modal-input { margin:10px 0 10px 20px; padding:10px; width:270px; border-radius:4px; background-color:#e9e9e9; font-weight:400; border:none; outline:none; } .modal-input[placeholder] { color:#8f9baa; } .modal-submit { width:156px; height:40px; text-align:center; margin:10px 0 10px 20px; border:none; border-radius:4px; font-size:1.25em; font-weight:bold; background-color:#f77941; color:#fefefe; outline:none; cursor:pointer; } .left-column, .right-column { display:inline-flex; flex-direction:column; align-content:center; } .modal-content .left-column { justify-content:flex-start; } .modal-content .right-column { text-align:left; margin-left:40px; margin-right:20px; } .modal-content .modal-img { position:absolute; bottom:-42px; right:15%; } .info-icon, .info-without-icon { font-family:"Roboto Slab", sans-serif; } .fadeInUp, .fadeOutDown, .fadeInUpWithoutOpacity, .fadeOutDownWithoutOpacity { animation-duration:500ms; animation-fill-mode:both; } .fadeInLeft, .fadeInRight, .fadeOutLeft, .fadeOutRight { animation-duration:600ms; animation-fill-mode:both; } .fadeInUp {animation-name:fadeInUp;} .fadeOutDown {animation-name:fadeOutDown;} .fadeInLeft {animation-name:fadeInLeft;} .fadeInRight {animation-name:fadeInRight;} .fadeOutLeft {animation-name:fadeOutLeft;} .fadeOutRight {animation-name:fadeOutRight;} .fadeInUpWithoutOpacity {animation-name:fadeInUpWithoutOpacity;} .fadeOutDownWithoutOpacity {animation-name:fadeOutDownWithoutOpacity;} .open-box {bottom:60px;height:inherit;width:inherit;} .close-box {bottom:500px;height:0;width:0;} @keyframes fadeInUp { from {opacity:0;transform:translate3d(0, 100%, 0);} to {opacity:1;transform:none;} } @keyframes fadeOutDown { from {opacity:1;transform:none;} to {opacity:0;transform:translate3d(0, 100%, 0);} } @keyframes fadeInUpWithoutOpacity { from {transform:translate3d(0, 1040%, 0);} to {transform:none;} } @keyframes fadeOutDownWithoutOpacity { from {transform:none;} to {transform:translate3d(0, 1040%, 0);} } @keyframes fadeInLeft { from {opacity:0;transform:translate3d(-100%, 0, 0);} to {opacity:1;transform:none;} } @keyframes fadeInRight { from {opacity:0;transform:translate3d(100%, 0, 0);} to {opacity:1;transform:none;} } @keyframes fadeOutLeft { from {opacity:1;transform:none;} to {opacity:0;transform:translate3d(-100%, 0, 0);} } @keyframes fadeOutRight { from {opacity:1;transform:none;} to {opacity:0;transform:translate3d(100%, 0, 0);} } .info-icon {color:#92ca33;padding-top:16px;line-height:30px;} .info-icon img {margin-right:8px;width:16px;height:auto;} .info-without-icon {color:#a5afbb;margin-left:27px;} /*************** * TEMOIGNAGES * ***************/ .testimony { display:flex; width:100%; } .testimony .column { display:flex; align-items:center; flex:1; margin:10px; } .column .column-content { display:flex; flex-direction:column; width:100%; position:relative; } .testimony .type-companies { position:relative; width:100%; height:476px; } .testimony .all-companies { display:none; } .type-companies .type-company { position:absolute; left:0; top:0; } .type-companies .type-company p { position:absolute; color:#ffffff; font-weight:bold; } .mpc-image { align-self:flex-start; margin-bottom:20px; position:absolute; top:-100px; } .column-content .message { display:flex; align-items:center; width:100%; height:180px; } .message .message-arrow { margin-top:-17px; color:#ccc; font-size:80px; font-weight:300; cursor:pointer; z-index:2; } .message .message-content { flex:1; font-size:22px; font-style:italic; font-weight:lighter; text-align:center; } /* Blog */ #blog .main .article{width: 700px; vertical-align: top; margin: 0 auto; font-size: 17px;} #blog .main .article:first-child{border-top:0;} #blog .main .article img{box-shadow: 0px 0px 8px rgba(0,0,0,0.3); width: 100%; display: block; margin-bottom: 20px;} #blog .main .article.big img { width: inherit; max-height: 300px; } #blog .main .article.big { font-size: 15px; } #blog .main img.gauche{width:250px;float:left;margin-right:20px;} #blog .main h1{line-height:40px;text-align:left;color:#0097d2 ;padding-top:45px;} #blog .main a{color:#0097d2 ;} #blog .main h2{margin: 10px 0 20px; padding: 0; font-size: 30px;} #blog .main h2 a{color: black; text-decoration: none; font-weight: 600;} #blog .main h2 a:hover{text-decoration:underline;} #blog .main p.suite{color:#0097d2 ;margin-top:20px;} #blog .main b{font-size:17px;font-weight:700;} #blog .main strong{font-weight:700;} #blog .main .big{display: flex; width: 100%;} #blog .main .big .content{margin-left:77px;} #blog .main .big h2{margin-top:0;} #blog .main .banner{position: relative;display: block;width: 100%; height: 150px; background-size: cover; background-position: center; margin: 80px 0;} #blog .main .banner .content{position: absolute; width: 80%; top: 20px; left: 20px;} #blog .main .banner a, #blog .main .banner a:hover{color: white; text-decoration: none;} #blog .main .banner .orange{position: absolute; bottom: 20px; right: 20px;} #blog .main .banner .blog_texte, #blog .main .banner .suite, #blog .main .banner img{display: none;} #blog .main .hr{height:3px;background-color:#e5e5e5;margin: 20px 0 40px 0;} #blog .main .space{width: 70px;display: inline-block;} .navigation{padding:30px 0 30px 0;} .navigation a{color:#546881;text-decoration:none;} .navigation a:hover{color:#0097d2 ;text-decoration:underline;} .navigation a.prev{float:left;} .navigation a.next{float:right;} .navigation a.prev:before{content:"<";padding-right:5px;} .navigation a.next:after{content:">";padding-left:5px;} .navigation a.next span.title{color:#0097d2 ;} .colonne_all_articles{width:275px;float:left;} .colonne_all_articles p.t{font-size:20px;font-weight:700;color:#0097d2 ;padding:70px 0 30px 0;} .colonne_all_articles ul{list-style-type:none;} .colonne_all_articles ul li{} .colonne_all_articles ul li a{display:block;color:#546881;text-decoration:none;background:#f8f8f8;border-radius:2px;margin-bottom:5px;padding:10px;transition:all ease 0.2s;} .colonne_all_articles ul li a:hover{color:#0097d2 ;background:rgba(0,162,213,0.2);} #blog header { background-color: #0098cd; padding: 60px 50px 80px 50px; margin-bottom: 80px; } #blog h1 { font-size: 40px; font-weight: bold; color: white; padding-bottom: 35px; } @media all and (max-width: 1180px){ #blog .main .article{display: block;} #blog .main .article img{display: block;} #blog .main .banner .blog_texte, #blog .main .banner .suite, #blog .main .banner img{display: none;} #blog .main .article .content{margin-left:0px;} } /* RESSOURCES */ #ressources { padding: 80px 0; font-size: 16px; } #ressources .container { display: flex; justify-content: center; align-items: center; padding-top: 20px; max-width: 1110px; margin: 0 auto;} #ressources .container article { max-width: 320px; width:33%; padding: 25px; text-align: left; line-height: 26px; min-height: 500px; } #ressources .container article:hover { cursor: pointer; background-color: #fbfbfb; border-radius: 5px; box-shadow: 0px 0px 2px #e5e5e5; } #ressources .container article header { width: 100%; } #ressources .container article header img { width: 100%; } #ressources .container article header a { text-decoration: none; } #ressources .container article header h1 { font-size: 19px; color: black; font-weight: bold; padding: 10px 0; text-align: left; } #ressources .container article footer a { display: inline-block; margin-top: 8px; font-size: 14px; color: #22ace2; } /* BESOIN D'AIDE */ #help { padding: 65px 10px 80px 10px; background: #57bfc5; color: white; } #help img { width: 200px; } #help strong { display: inline-block; padding: 8px 0 0; font-size: 25px; font-weight: bold; } #help strong span { display: block; font-size: 16px; font-weight: bold; } /* NEW FOOTER */ body > footer { background-color: #00a1d5; color: white; } body > footer .logo{ width: 200px; } body > footer .container { margin: 0 auto; max-width: 1110px; display: flex; flex-wrap: wrap; text-align: left; } body > footer .container > div { width: calc(25% - 20px); padding: 0 10px; } body > footer .container .mini-bar{ width: 14px; height: 3px; margin: 0; } body > footer h5 { font-size: 18px; font-weight: bold; padding: 4px 0 8px; } body > footer .container > div ul { list-style: none; padding-top: 12px; font-size: 16px; line-height: 1.4em; } body > footer .container > div ul li a { text-decoration: none; color: white; line-height: 30px; } body > footer .container > div ul li a:hover { text-decoration: underline; } body > footer p { font-size: 12px; text-align: center; padding: 0 10px 20px;} body > footer .social {padding: 4px 0; flex-basis: 100%;} body > footer .social ul {padding: 20px 0; display: flex; justify-content: center; align-items: center; margin: 0 auto; list-style: none;} body > footer .social ul li {flex-basis: 0;} body > footer .social ul li a img {height: 30px; padding: 30px 20px;} /*============================================================================ */ @media screen and (max-width:1330px) { #accueil .home_women1{margin-left:200px;} #accueil .home_men{margin-left:-300px;} #accueil .home_women2{margin-left:-480px;} #accueil .home_women3{margin-left:-680px;} #accueil.virtuel h1{padding:0 50px 0 50px;width:calc(100% - 100px);margin:0 auto;} } @media screen and (max-width:1240px) { #accueil .home_car1{left:45%;top:400px;} } @media screen and (max-width:1180px) { .jesaispaswuoimettre { color:inherit; align-self:center; } #accueil .home_car1{top:415px;left:46%;width:68%;} .main{width:90%;margin:0 5% 0 5%;} .mpc-image { display:none; } .testimony { flex-direction:column; } .testimony .type-companies { width:50%; margin:0 auto; } #ekomi_note, #ekomi_sceaux { align-self:center; } /* Header */ #header .main{width:100%;margin:0;} #header #logo{top:0;left:70px;} #header #logo.left{left:0px;} #header #logo:hover{background-position:0 0;background-color:#0085b5;} #header #burger{display:block;position:absolute;top:0;left:0;height:80px;width:80px;cursor:pointer;} #header #burger:hover{background:#0085b5;} #header #burger span{display:block;width:32px;height:4px;background:#fff;margin:38px 0 0 24px;border-radius:2px;} #header #burger span:before{content:"";position:absolute;display:block;width:32px;height:4px;background:#fff;margin-top:-11px;border-radius:2px;transition:all ease 0.2s;} #header #burger span:after{content:"";position:absolute;display:block;width:32px;height:4px;background:#fff;margin-top:11px;border-radius:2px;transition:all ease 0.2s;} #header #menu{float:none;position:fixed;top:81px;bottom:0;background:#fff;left:-350px;width:340px;box-shadow:0 10px 10px rgba(0,0,0,0.2);transition:all ease 0.2s;} #header #menu.open{left:0;} #header #burger.open span:before{width:15px;transform:rotate(-45deg);margin-top:-5px;margin-left:-1px;} #header #burger.open span:after{width:15px;transform:rotate(45deg);margin-top:5px;margin-left:-1px;} #header #menu li{float:none;margin:0;height:auto;} #header #menu > li > a,#header #menu > li.lead > a{float:none;line-height:60px;height:60px;color:#000;margin:0;border-radius:0;border:0;border-bottom:1px dotted #ccc;} #header #menu .onlydesktop a:hover{background:#e8e8e8;} #header #menu > li.onlydesktop{display:none;} #header #menu > li.onlyresponsive{display:block;} #header #menu > li.bouton{display:none;} /* Footer */ #footer{padding:25px 0 100px 0;} #footer .pres{width:80%;padding:0 10% 20px 10%;float:none;margin-right:0;border:0;height:auto;text-align:center;} #footer ul{float:left;width:27%;margin:25px 3% 0 3%;height:auto;border:0;text-align:center;} #footer img.img_cb{width:100%;} #social_links{top:auto;left:20px;margin-top:0;width:240px;bottom:0;} #social_links li{float:left;margin-left:0;width:0;padding-left:60px;height:60px;overflow:hidden;} #social_links li:hover{margin-left:0;} #fonctionnalite_accueil{text-align:center;} #fonctionnalite_accueil li{width:320px;padding:0 30px 0 0;float:none;display:inline-block;margin:0 0 50px 0;text-align:left;vertical-align:top;} #temoignages_logos .title img{width:100%;} #temoignages_citation{margin:0 auto;} .fleche_t_c{margin:110px 0 0 0;} .fleche_t_c.left{left:10%;} .fleche_t_c.right{right:10%;} /* Pages d'accueil alternatives */ #accueil.virtuel{height:650px;} #accueil.virtuel .home_women1{top:402px;} #accueil.virtuel .home_men{top:510px;} #accueil.virtuel .home_women2{top:515px;} #accueil.virtuel .home_women3{top:475px;} .comment_autre{width:90%;height:auto;float:none;padding:50px 5% 0 5%;} #accueil.numero0800{height:600px;} #accueil.numero0800 p{padding:0 50px 0 50px;} .box0800{height:auto;padding:25px 0 25px 0;width:33%;border-radius:0;display:inline-block;margin:0 -1px 0 0;float:left;} .box0800 .btn{padding:0 15px 0 15px;font-size:18px;} /* Comment �a marche */ #bandeau_video{padding:0 5% 50px 5%;} #bandeau_video iframe{width:700px;height:437px;} .main.interf{height:700px;} #interface{background-image:url(../images/laptop_mini.png);padding:32px 65px 43px 64px;margin:0;position:absolute;left:50%;margin-left:-380px;} #interface ul li span{display:none;} #interface .navinterface{display:none;} /* Contact */ .contact_col{width:90%;padding-left:5%;padding-right:5%;margin:0;float:none;text-align:center;} .contact_col.left{text-align:center;} .contact_col label{text-align:center;} .contact_col input,.contact_col textarea{display:inline-block;width:calc(100% - 62px);} .contact_col textarea{width:calc(100% - 62px);} /* Fonctionnalit� */ .h2_fonctionnalite{width:90%;margin:40px 5% 0 5%;text-align:center;float:none;} .liste_fonctionnalite{float:none;padding:0;width:100%;margin:65px 0 0 0;border-left:0;text-align:center;} .liste_fonctionnalite li{text-align:left;width:200px;} .liste_fonctionnalite li:nth-child(even){margin-right:0;} #menu_fonctionnalites{margin-right:0px;} #page_fonctionnalites{width:calc(100% - 300px);} #page_fonctionnalites p{padding:8px 0 8px 0;} #page_fonctionnalites img.responsive{max-width:100%;height:auto;} .temoignage_conteneur{display:flex;flex-wrap:wrap;justify-content:center} .temoignage_conteneur a{display:inline-block;float:none;padding:0;border:1px solid #e8e8e8;margin:0 -1px -1px 0;} .temoignage_conteneur a:nth-child(n+11) {border-bottom:1px solid #e8e8e8;} .temoignage_conteneur a:nth-child(5n+5) {border-right:1px solid #e8e8e8} .temoignage_citation{width:90%;border:0;margin:70px 5% 70px 5%;} .citation_grande{font-size:24px;line-height:30px;padding:0;} .temoignage_texte{margin:40px 5% 0 5%;} .temoignage_texte p{display:block;padding:30px 20px 30px 20px;} .quisommesnous_img{float:left;width:140px;margin:0px 20px 0 30px;} #page_fonctionnalites.center .quisommesnous_img{margin-top:10px;} #page_fonctionnalites p.quisommesnous_titre{width:auto;padding:10px 0 0 0;} #page_fonctionnalites p.quisommesnous_texte{padding-left:0;margin-top:0;} h2.faq_question{width:100%;margin:30px 0 0 0;text-align:left;float:none;} .faq_reponse{float:none;padding:0;width:100%;margin-top:30px;border-left:0;} /* Tarifs et Inscription */ .soush1{margin:-30px 0 10px 0;} .tarif{width:31%;margin:50px 1% 30px 1%;} .tarif p.avantage{height:20px;} .tarif strong{background-size:cover;height:80px;text-shadow:0 0 2px rgba(0,0,0,0.4)} .tarif:first-child{margin-left:1%;} .tarif .btn{line-height:normal;padding:10px;height:auto;} #conteneur_numero{height:auto;padding:0;} #conteneur_choix_numero{margin-left:0;height:auto;width:90%;} .cont_numero{width:33%;} #conteneur_choix_zone{height:auto;} #conteneur_choix_porta{margin-left:0;height:auto;} .cont_porta{width:95%;height:auto;padding:25px 0 25px 0;} .infoporta{margin:0 10% 0 10%;} #conteneur_coordonnees{margin-left:0;} .col_coordonnees{width:50%;height:auto;padding:50px 0 0 0;text-align:center;} .col_coordonnees input,.col_coordonnees select{width:calc(100% - 182px);} .col_coordonnees select{width:calc(100% - 102px);} /* Recapitulatif */ .recap_info{width:calc(45% - 50px);} .recap_facture{width:50%;margin-left:5%;} .recap_facture p{font-size:17px;height:16px} .recap_facture p.total span.label{text-align:left;width:auto;} .choix_paiement li{display:inline-block;width:250px;margin:0 0 20px 0;background-image:none;} .empreinte p{height:auto;font-size:15px;} .confirmation{margin:0 50px 50px 50px;} .info_iban{margin-left:30px;margin-right:30px;} /* blog */ .colonne_blog{width:100%;float:none;margin:0;} .colonne_all_articles{display:none;} .faq_reponse.cgv{width:100%;} h1.portabilite{min-height:235px;margin:30px 0 0 0;} } @media screen and (max-width:981px) { #accueil h1{padding:0 10%;} #accueil.sedomicilier{padding:15px 15px 371px;} #accueil.sedomicilier h1{padding:0;} #accueil .home_women1{top:450px;margin-left:120px;} #accueil .home_men{display:none;} #accueil .home_women2{top:565px;margin-left:-280px;} #accueil .home_women3{top:565px;margin-left:-460px;} #accueil .home_car1{left:35%;width:82%;top:415px;} #accueil.sedomicilier{height:auto;} #pricing .plans { flex-direction: column;} #pricing .plans .plan{ margin: 10px auto;} #pricing header .mostused { display: none;} } @media screen and (max-width:784px) { #accueil.sedomicilier{padding:15px 15px 571px;} #accueil.sedomicilier .header-container{height:520px;} } @media screen and (min-width:767px) { #accueil.sedomicilier h1{font-size:45px;} } @media screen and (max-width:767px) { .desktop { display: none; } .mobile { display: block; } h2{font-size: 20px; } h2 span{font-size:18px;} #header{ height: 60px;} #accueil { position: relative; padding: 50px 0 0 0; height: calc(100vh - 130px); display: block; } #customizable {padding: 20px 0 80px; background-position-y: bottom; } #customizable .container .top{ flex-direction: column; } #customizable .container .top { padding: 0; } #customizable .container .top > div { padding-top: 40px; width: calc(100% - 40px); padding: 20px; } #customizable .container .bottom { flex-wrap: wrap; text-align: center; padding-top: 20px; } #customizable .container .bottom > div { width: 100%; padding-bottom: 20px; } #customizable .container .bottom > div > .icon { margin: 0 auto; } #ressources .container {flex-direction: column;} .bandeau_promo.price .container > div {width: 100%;} body > footer .container {padding-bottom: 20px; text-align: center;} body > footer .container > div { width: calc(50% - 20px);} body > footer .container > div:nth-of-type(1) { display: block; align-items: center;} body > footer .container > div ul { padding-bottom: 20px; justify-content: flex-start; } body > footer .social.mobile { display: inline-block; } body > footer .social.mobile img { padding: 0px; margin: 0 25px 20px 0; } body > footer .social.mobile .linkedin img { margin-right: 0px; } body > footer .social.mobile ul { padding: 0; } body > footer .social.mobile .social { padding: 0; } body > footer .container > div{ flex-basis: calc(100% - 40px); } footer .container #widget-container { margin-left: 13%; } body > footer .container .mini-bar { margin: 0 auto; } .modal-box {display:none;} h1{font-size:26px;font-weight:700;padding:50px 0 40px 0;} .btn{line-height:normal;height:auto;padding:15px 30px 15px 30px;} h2.pleinepage { font-size:1.6em; } .testimony .column:first-child { display:none; } .testimony .all-companies { display:block; } .testimony .type-companies { display:none; } .mpc-image { position:inherit; top:inherit; display:block; align-self:center; } .message-content { font-size:0.9em; } #header #logo{left:50%;width:180px;padding-top:60px;background-size:180px 120px;margin-left:-90px;} #header #logo.left{left:50%;} #header #logo:hover{background-color:transparent;} #header #burger{height:60px;width:60px;} #header #burger span{width:26px;height:4px;margin:28px 0 0 17px;border-radius:0;} #header #burger span:before{width:26px;height:4px;margin-top:-7px;border-radius:0;} #header #burger span:after{width:26px;height:4px;margin-top:7px;border-radius:0;} #header #burger:hover{background:transparent;} #header #burger.open span{border-radius:2px;} #header #burger.open span:before{border-radius:2px;} #header #burger.open span:after{border-radius:2px;} #header .btn{display:none;} #header #menu{padding:20px 0 65px 0;overflow:scroll;top:61px;} #header #menu li.onlyresponsive{display:block;} #header #menu li a{height:40px;line-height:40px;border:0;} #header #menu > li.lead > a{line-height:40px;height:40px;border-bottom:0;} #header #menu li.bouton a{background:#f80;margin:5px;border-radius:5px;color:#fff;font-weight:700;border-bottom:0;} #header .contact{display:none;} #social_links{display:none;} #contact_box{bottom:0;right:0;background:rgba(132,195,30,0.8);width:100%;} #contact_box p.head{position:static;background:transparent;border-radius:0;width:100%;} #contact_box p.head:before{} #contact_box div.body{display:none;} .dessins_promo{padding:60px 5% 60px 5%;} .bandeau_promo .btn:before{display:none;} .bandeau_promo .dessins_promo{padding:0px;} .bandeau_promo.price .container > div { padding-bottom: 0px; } #accueil h1{text-align:center;width:auto;margin:0;font-size:34px;} #accueil p{text-align:center;width:auto;margin:30px;} #accueil a.btn{margin-left:0;} #fonctionnalite_accueil li{width:calc(100% - 30px);padding:0 30px 0 0;float:none;display:inline-block;margin:0 0 50px 0;text-align:left;vertical-align:top;} #fonctionnalite_accueil li a{font-size:18px;padding-top:0;max-width:157px;} #accueil.virtuel{height:auto;padding-bottom:220px} #accueil.virtuel .home_women1{top:auto;bottom:0px;} #accueil.virtuel p{width:auto;} #accueil.numerovert .main{background:none;margin-bottom:0;} #accueil.numerovert h1{padding:0;} #accueil.numerovert p{padding:20px 0 20px 0;} .comment_elem.numerovert{padding-top:0px;margin-top:0} #accueil.numero0800{height:auto;padding-bottom:50px;background-position:left bottom;} #accueil.numero0800 p{padding:20px 0 20px 0;} #accueil .home_women2, #accueil .home_women3{ display: none; } #accueil .home_women1{ bottom: -65px; top: auto; margin-left: 0px; transform: translateX(-40%); } .box0800{height:auto;padding:25px 10px 25px 10px;width:calc(100% - 20px);display:block;margin:0;float:none;margin-top:-1px;} .box0800 .btn{padding:15px;font-size:18px;} #temoignages_logos p.sub_h2{font-size:16px} #temoignages_citation{width:100%;height:auto;overflow:visible;margin-left:0;} #temoignages_citation #content_t_c{width:auto;height:auto;position:static;} #temoignages_citation p{width:100%;height:auto;float:none;margin-bottom:20px;} .fleche_t_c{display:none;} .h2_fonctionnalite{font-size:26px;font-weight:400;margin-top:20px;} .liste_fonctionnalite li{margin-right:0;} .bandeau_faq span.faqelem{display:block;} .bandeau_faq span.faqelem:before{display:none;} #faqReponseFooter .content{width:90%;} #faqReponseFooter.open .content:after{content:"fermer";text-decoration:underline;font-size:13px;width:95%;} .main.interf{display:none;} #bandeau_video{margin-top:0;} #bandeau_video iframe{width:100%;height:200px;} #menu_fonctionnalites{width:90%;float:none;background:#f8f8f8;padding:0 5% 20px 5%;margin-top:50px;} #page_fonctionnalites{width:100%;float:none;} #page_fonctionnalites h1{font-size:26px;padding:50px 0 30px 25px;} #page_fonctionnalites h1:before{top:43px} .detail_numero{margin-right:0px;} .comment_elem{position:relative;margin-bottom:80px;} .comment_elem h2{width:100%;margin:0;font-size:26px;} .comment_elem p{width:100%;margin:40px 0 0 0;font-size:18px;} .comment_elem .img{width:100%;position:static;} .comment_elem.right h2{margin-left:0;} .comment_elem.right p{margin-left:0;} .comment_elem.imgtop{margin-top:0;} .comment_elem.imgtop .img{margin-top:20px;} .comment_elem.up{padding:0;} .temoignage_texte{margin:40px 5% 0 5%;} .temoignage_texte h2{display:block;line-height:normal;padding:90px 0 0 0;background-position:center top} .tarif{width:80%;margin:40px 10% 10px 10%;} .tarif:first-child{margin-left:10%;} .tarif p.avantage{padding:15px 0 0 0;} .tarif strong{padding-bottom:80px;background-size:cover;} .tarif div.desc p{padding:0 15px 0 15px;} .tarif div.desc span.plus{margin:5px;} .tarif_question.open h2{background:#0097d2;color:#fff ;} .tarif_question h2:hover{background:#fff;color:#0097d2 ;} .autres_forfait p{padding:35px 0 0 0;font-size:15px;background-position:center top;} #popup_background{cursor:pointer;} .popup{width:90%;height:auto;top:5%;left:5%;bottom:5%;margin:0;} .popup.open{top:5%;} .popup#popup_pays{width:90%;height:auto;margin:0;} .popup ul{width:100%;float:none;margin-bottom:20px;} .popup .content{position:absolute;top:50px;height:auto;left:0;bottom:0;right:0;} #conteneur_choix_zone{width:100%;overflow:hidden;height:auto;} #choix_dom{padding-top:375px;text-align:center;} #choix_dom li{display:inline;height:20px;line-height:20px;background:0;padding-left:0;position:static;} #choix_dom li:after{content:"-";padding:0 5px 0 5px;} #choix_dom li:nth-child(1){margin:0;} #choix_dom li:nth-child(2){margin:0;} #choix_dom li:nth-child(3){margin:0;} #choix_dom li:nth-child(4){margin:0;} #choix_dom li:nth-child(5){margin:0;} #choix_dom li:nth-child(6){margin:0;} #choix_dom li:nth-child(6):before{content:"09 :"} .indicporta{margin-top:0;border-top:1px dotted #ccc;border-bottom:1px dotted #ccc;margin-top:10px;padding:10px;} .indicporta span{border:0;padding:0;} #conteneur_coordonnees{} .col_coordonnees{width:100%;height:auto;padding:0;float:none;margin:0;} .col_coordonnees label{display:inline-block;position:absolute;width:90px;padding:0 0 0 50px;text-align:left;color:#0097d2 ;} .col_coordonnees input{padding:0 0 0 90px;width:calc(100% - 92px);} .col_coordonnees input#input_prenom{padding:0 0 0 110px;width:calc(100% - 112px);} .col_coordonnees input#input_societe{padding:0 0 0 110px;width:calc(100% - 112px);} .col_coordonnees input#input_email{padding:0 0 0 100px;width:calc(100% - 102px);} .col_coordonnees input#input_pass{padding:0 0 0 140px;width:calc(100% - 142px);} .col_coordonnees input#input_telephone{padding:0 0 0 130px;width:calc(100% - 132px);} .col_coordonnees input#input_adresse{padding:0 0 0 110px;width:calc(100% - 112px);} .col_coordonnees input#input_postal{padding:0 0 0 80px;width:calc(100% - 82px);} .col_coordonnees input#input_ville{padding:0 0 0 90px;width:calc(100% - 92px);} .col_coordonnees select{padding:0;text-indent:90px;width:calc(100% - 2px);} .col_coordonnees label:before{left:0;} #conteneur_numero{} #conteneur_numero.numero{height:1050px;} #conteneur_choix_numero{height:auto;width:calc(90% - 2px);} .cont_numero{width:100%;margin-bottom:-1px;height:300px;background:transparent;} .cont_numero:nth-child(1){border-top-left-radius:15px;border-bottom-left-radius:0;border-top-right-radius:15px;} .cont_numero:nth-child(3){border-top-right-radius:0;border-bottom-right-radius:15px;border-bottom-left-radius:15px;} .cont_numero ul{height:175px;margin:15px 0 15px 0;} .cont_numero ul li{line-height:35px;} .recap_info{width:calc(100% - 50px);} .recap_facture{width:100%;margin-left:0;} .choix_paiement li{width:245px;padding:17px 50px 0 0;} .choix_paiement li strong{font-size:18px;} .choix_paiement li span.check{right:10px;} .input_iban input{padding:0 30px 0 30px;width:calc(100% - 62px);} .confirmation{margin:0 0 50px 0;} .colonne_blog img{width:100%;} .colonne_blog img.gauche{width:100%;float:none;margin-right:0;} .elem_presse a img{width:calc(70% - 12px);margin:0;} h1.portabilite{background-position:center top;text-align:center;padding:265px 0 0 0;margin-bottom:0;} .warning{margin:50px 0 0 0;padding:20px;} #help strong { font-size: 20px; } #help strong span { font-size: 14px; padding-top: 10px; } } @media all and (max-width: 780px){ #blog .banner h2{font-size: 21px;} .comment_elem .img img{max-width: 100%;} #blog .main .banner .content {width: 60%;} @media screen and (max-width:585px) { #accueil .home_car1{left:-10%;} #blog .main .article, #blog .main .article img{max-width: 100%;} #blog .main .banner .content {top:5px;left:5px;} #blog .main .banner .orange{bottom:5px;right:5px;padding: 5px 10px;} } @media all and (max-width: 520px){ #accueil{ height: 650px; } } @media screen and (max-width:500px) { #accueil .home_car1{left:-20%;} } @media screen and (max-width:470px) { #accueil .home_car1{top:327px;} } @media screen and (max-width:458px) { #accueil .home_car1{top:373px;} } @media screen and (max-width:445px) { #accueil .home_car1{left:-30%;} } @media screen and (max-width:427px) { #accueil .home_car1{top:417px;} } @media screen and (max-width:395px) { #accueil .home_car1{left:-40%;} } @media all and (max-width: 380px){ #accueil{ height: 700px; } } @media screen and (max-width:351px) { #accueil .home_car1{top:462px;} } } p.accordion {background-color: #eee;color: #444;cursor: pointer;padding: 18px;width: 100%;text-align: left;border: none;outline: none;transition: 0.4s;margin-bottom:10px;} p.accordion.active, p.accordion:hover {background-color: #ddd;} p.accordion:after {content: '\2795'; font-size: 13px;color: #777;float: right;margin-left: 5px;} p.accordion.active:after {content: "\2796";} div.panel {padding: 0 18px;background-color: white;max-height: 0;overflow: hidden;transition: 0.4s ease-in-out;opacity: 0;margin-bottom:10px;} div.panel.show {opacity: 1;max-height: 500px;} /************************************************************************ PAGE TEL BELGIQUE ******************************************************/ .page_tel .bg-blue .display-flex .header-text a { margin: 60px 0 150px 0; } .page_tel .container { max-width: 1160px; padding: 0 20px; margin: 0 auto; } .page_tel .header-text, .page_tel .header-text h1 { text-align: left; line-height:48px;font-size:48px;} .page_tel .display-flex .header-text h1 { padding: 100px 0 30px 0; } .page_tel .header-text h1 small { font-size: 18px; } .page_tel .flex-bot img { max-width: 95%; margin-top:-100px} .page_tel .flex-bot { display: flex;flex-direction: column;justify-content: center;align-items: flex-end; } .page_tel .white-triangle { background-image: linear-gradient(to bottom left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, #fff 50.5%, #fff 100%); position: absolute; left: 0; bottom: -1px; width: 100%; height: 200px; } .page_tel h2 { font-size:34px; margin-bottom: 25px;font-weight: 600; } .page_tel p { font-size:16px; } .page_tel .mrg-p{margin-top: 20px;} .page_tel .mrg-30{margin-top:30px;} .page_tel .mrg-100{margin-top:100px;} .page_tel .header-text p { font-size: 20px;line-height:30px } .page-tel-flex { display: flex; justify-content: space-between; margin-bottom: 150px; } .page-tel-flex-text { width: 50%; text-align: left; } .page-tel-flex-text p { text-align: justify; } .page-tel-flex-text .size14 { font-size:16px; } .page-tel-flex-img img { max-height:400px; max-width:100%; } .page-tel-flex-img2 { width: 110%; } .page-tel-flex-img2 img { max-width: 90%; } .page-tel-flex .order1 { margin-right: 20px; text-align: left; } .page-tel-flex .order2 { margin-left: 20px; text-align: right; } .page-tel-flex-text.order2 { text-align: left; } .page-tel-flex:last-child { margin-bottom:100px; } .bandeau-info{background:#F9F9F9; color: #000; font-size: 20px; padding: 60px 20px 150px 20px; } .bandeau-info div .info{padding:50px 30px; background: #fff; box-shadow: 0px 2px 10px rgb(0 51 68 / 12%); text-align:justify; min-height: 315px; } .info h2{ font-size:23px; font-weight: 600; text-align:left; color:#0097d2; } .bandeau-info .container{display: flex; flex-wrap: wrap; padding: 35px 0 0 0;} .bandeau-info .container > div{ width: calc(100% - 30px - 16px); max-width: calc(550px - 30px - 16px); margin: 8px; } .size14{font-size:16px !important;} .bandeau-info .title{font-size:34px;font-weight: 600} .span-tem{font-weight:bold;margin-top:20px;display: block;} .w-30p{width:30%;} .bandeau-faq-tel{ background:#F9F9F9; padding: 80px; color: #000; text-align:center; } .bandeau-faq-tel h3{ background-color: transparent; border-bottom: 1px solid #ddd; font-size:23px; color: #0097d2; cursor: pointer;font-weight:600; padding: 18px; width: 100%; text-align: left; outline: none; transition: 0.4s; margin-bottom: 10px; } .bandeau-faq-tel h3::after{content: '+'; font-size:23px; color: #0097d2; float: right; margin-left: 5px;} .bandeau-faq-tel .container > div{ margin: 0; padding:10px 20px; text-align: justify; } .bandeau-faq-tel div.faqelem { padding: 20px; background: transparent; cursor: pointer; border-bottom: 1px solid #000; font-weight: bold; font-size: 18px; color: #000; transition: all ease 0.2s; display: flex; justify-content: space-between; } .bandeau-faq-tel h2{text-align: center; font-size: 34px; font-weight: 600; margin-bottom: 100px;} /*********************************RESPONSIVE PAGE TEL BELGIQUE *************************/ @media (max-width: 1200px){ .page_tel .bg-blue .display-flex { display: block; text-align: center; } .page_tel .header-text h1 { text-align: center; margin: 0 auto; width: auto; font-size: 34px; } .bandeau-faq-tel h3{ font-size:16px; padding:18px 0px; } .page_tel h2{ font-size:20px; } .page_tel p{font-size: 18px; line-height: 32px; } .page_tel .header-text{ text-align: center; } .page_tel .bg-blue .h-100 { height: 190px; } .page_tel .bg-blue .flex-bot { display: block; } .page-tel-flex-text { width: 100%; text-align: left; } .bandeau-faq-tel { padding:20px 0px !important; } .bandeau-faq-tel .main{width:100% !important;margin:0;} } @media all and (min-width: 700px) and (max-width: 1200px){ .page_tel .flex-bot img { max-width: 50%; } } @media all and (max-width: 1000px){ .page_tel .page-tel-flex-img2 { width: 100%; } } @media all and (max-width: 960px){ .page_tel .page-tel-flex { display: block; text-align: center; } .page_tel .page-tel-flex { margin-bottom: 100px; } .page_tel .page-tel-flex .order1 { margin: 0 auto 0 auto; text-align: center; } .page_tel .page-tel-flex .order2 { margin: 0 auto 0 auto; text-align: center; } .page_tel .page-tel-flex div:first-child { margin-bottom: 50px; } .page_tel .w-70p,.page_tel .w-50p { width: inherit; } .page_tel .page-spe-flex-text { width: inherit; } .display-flex .header-text h1 { padding: 100px 0 40px 0; } }