html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
section#section_stage {background:floralwhite}
section#section_contact {background:floralwhite}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:transparent}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857;color:#333;background-color:#fff}input,button,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#337ab7;text-decoration:none}a:hover,a:focus{color:#23527c;text-decoration:underline}a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}figure{margin:0}img{vertical-align:middle}.img-responsive{display:block;max-width:100%;height:auto}.img-rounded{border-radius:6px}.img-thumbnail{padding:4px;line-height:1.42857;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;display:inline-block;max-width:100%;height:auto}.img-circle{border-radius:50%}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}[role="button"]{cursor:pointer}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}h1 small,h1 .small,h2 small,h2 .small,h3 small,h3 .small,h4 small,h4 .small,h5 small,h5 .small,h6 small,h6 .small,.h1 small,.h1 .small,.h2 small,.h2 .small,.h3 small,.h3 .small,.h4 small,.h4 .small,.h5 small,.h5 .small,.h6 small,.h6 .small{font-weight:normal;line-height:1;color:#777}h1,.h1,h2,.h2,h3,.h3{margin-top:20px;margin-bottom:10px}h1 small,h1 .small,.h1 small,.h1 .small,h2 small,h2 .small,.h2 small,.h2 .small,h3 small,h3 .small,.h3 small,.h3 .small{font-size:65%}h4,.h4,h5,.h5,h6,.h6{margin-top:10px;margin-bottom:10px}h4 small,h4 .small,.h4 small,.h4 .small,h5 small,h5 .small,.h5 small,.h5 .small,h6 small,h6 .small,.h6 small,.h6 .small{font-size:75%}h1,.h1{font-size:36px}h2,.h2{font-size:30px}h3,.h3{font-size:24px}h4,.h4{font-size:18px}h5,.h5{font-size:14px}h6,.h6{font-size:12px}p{margin:0 0 10px}.lead{margin-bottom:20px;font-size:16px;font-weight:300;line-height:1.4}
header{position:relative;
}
header .header-top{width:100%;
top:0;padding:0;position:fixed;min-height:0;background:#F7F7F7;box-shadow:0 1px 0 0 rgba(0,0,0,0.1);z-index:200}
.logo-osmodev {
margin-top: 47px;
}
ul, ol {
list-style: none;
margin: 0;
padding: 0;
}
.line_tricolor>*{height:4px;width:33.33333333%;float:left}
.line_tricolor .bgBlue{background-color:#00A3E4}
.line_tricolor .bgOrange{background-color:white}
.line_tricolor .bgRed{background-color:#EC1656}
.logoTop{display:block}.logoTop:hover{text-decoration:none !important}
.logoTop span{position:absolute;left:10px;top:50%;-webkit-transform:translate(0, -50%);-moz-transform:translate(0, -50%);-ms-transform:translate(0, -50%);-o-transform:translate(0, -50%);transform:translate(0, -50%)}
.icon-logo-osmodev{background-position:0 0;width: 124px;height:38px;}
@media (max-width: 580px){.icon-logo-osmodev {}}
@media (min-width: 581px){.icon-logo-osmodev {background-image: url("OSMODEV_sprite.png");-webkit-background-size:418px 407px;-moz-background-size:418px 407px;background-size:418px 407px;}}
@media (max-width: 480px){.logo-osmodev img {width:200px}}
@media (min-width: 481px){.logo-osmodev img {width:300px}}
@media (min-width: 767px){.logo-osmodev img {width:450px}}
@media (min-width: 992px){.logo-osmodev img {width:700px}}
.sloganOsmodev{padding:0;font-size:13px;margin-left:150px;color:#00A3E4;position:absolute;top:50%;-webkit-transform:translate(0, -50%);-moz-transform:translate(0, -50%);-ms-transform:translate(0, -50%);-o-transform:translate(0, -50%);transform:translate(0, -50%)}
.sloganOsmodev .text_orange{color:#F89827;font-size:13px}
.header-list{float:right}
.header-list li{border-left:1px solid #ddd;float:left;height:45px;min-width:45px}
@media (max-width: 767px){.hidden-xs{display:none !important}}
.header-list li .number_eu{color:#F89827;display:block;padding:15px 12px;font-size:13px;font-weight:500}
.header-list li .label_number_eu{display:block;padding:15px 12px;font-size:13px;font-weight:500}
.label_number_eu {color:#333;}
@media (max-width: 480px){.header-list li.label_number{position:relative;display:none;margin:0}}
@media (min-width: 481px){.header-list li.label_number{position:relative;margin:0}}
@media (min-width: 992px){.header-list li.label_number{display:block}}
@media (max-width: 480px){.header-list li.green_number{position:relative;display:none;margin:0}}
@media (min-width: 481px){.header-list li.green_number{position:relative;margin:0}}
@media (min-width: 992px){.header-list li.green_number{display:block}}
button {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: inherit; /* 1 */
color: inherit; /* 1 */
margin: 0; /* 2 */
padding: 0; /* 3 */
cursor: pointer;
-webkit-appearance: button;
background-color: transparent;
background-image: none;
border: 0 solid;
}
.text-48px {
font-size: 48px;
}
.w-12 {
width: 48px;
}
.h-12 {
height: 48px;
}
.section_banner{position:relative}
.section_banner.section_banner_comp_fr{background: url("./IMAGES_SITE/water_1920.jpg");background-repeat:no-repeat;background-size:cover;background-position:50% 50%;min-height: calc(70vw / 1.92);}
.section_water{ box-sizing: border-box;}
.title{position:relative;width:auto;margin:0 auto;padding:20px 0 10px 0;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,0.2)}
@media (min-width: 768px){.title{padding:40px 0 10px 0}}
@media (min-width: 992px){.title{padding:60px 0 10px 0}}
.title .h1{position:relative;border-bottom:none;color:#FFF;text-transform:uppercase;font-weight:400;font-size:25px;margin:0}
@media (min-width: 768px){.title .h1{font-size:31px}}
@media (min-width: 992px){.title .h1{font-size:45px}}.title .h1 span{font-weight:500;font-size:25px}
@media (min-width: 768px){.title .h1 span{font-size:31px}}
@media (min-width: 992px){.title .h1 span{font-size:45px}}
.title p{color:#24a3dc;font-size:22px;font-weight:300;padding:0;margin:17px 0 0}
@media (min-width: 992px){.title p{font-size:31px}}
.section_stage {background: floralwhite;text-align: center;padding: 20px 0}
@media (max-width: 480px){.section_stage .how-it-works{text-align:center}}
.section_stage .three_steps{text-align:center;margin:5px 0 5px}
.section_stage .three_steps p{font-weight:300;margin:15px 0;font-size:17px}
.section_stage .three_steps {display:inline-block}
.section_stage .three_steps {position:relative;left:0}
.col-sm-4,.col-sm-12{position:relative;min-height:1px;padding-left:7px;padding-right:7px}
.col-sm-4{padding-top:7px}
.col-sm-12{float:left;width:100%}
@media (min-width: 820px){.col-sm-4{float:left;width:33.33333%;padding-top:3px}}
.bold300{font-weight:300}.bold400{font-weight:400}.bold500{font-weight:500}
.row{margin-left:0px;margin-right:-15px}.row:before,.row:after{content:" ";display:table}.row:after{clear:both}
@media (max-width: 767px){.title p{font-size:18px}}
@media (min-width: 768px){.container{width:750px}.title p{font-size:22px}}
@media (min-width: 992px){.container{width:970px}.title p{font-size:28px}}
@media (min-width: 1200px){.container{width:1170px}.title p{font-size:31px}}
.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.section_process {padding: 15px 0;}
.title_border{position:relative;display:inline-block;margin:18px 0 15px;padding:0 0 10px;font-size:20px;text-align:center;font-weight:300;text-transform:uppercase}
.section_process .title_border {
margin-bottom: 4px;
display: block;
}
.section_process .inform .illu img, .section_process .save-time .illu img, .section_process .compare .illu img {
margin: 0 auto;
position: relative;
width: 40%;
max-width: 500px;
}
.section_process .inform, .section_process .save-time, .section_process .compare {margin: 0 0 1px;}
@media (min-width: 992px){.col-md-push-6 {left: 50%;}.col-md-pull-6 { right: 50%;}.col-md-6 {width: 80%;float:left}}
.section_process .bloc-inform h2, .section_process .bloc-save-time h2, .section_process .bloc-compare h2 {
color: #00A3E4;
text-transform: uppercase;
font-size: 24px;
font-weight: 300;
margin: 0 0 18px;
}
.section_process .bloc-inform p, .section_process .bloc-save-time p, .section_process .bloc-compare p { margin: 10px 0;}
.section_process .bloc-inform, .section_process .bloc-save-time, .section_process .bloc-compare {
padding: 20px 30px;
}
h1, h2, h3 {line-height: 1.2;}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
.line_separator .bgSeparator {
background-color: rgba(0,0,0,0.1);
}
.line_separator > *{
height: 2px;
width: 100%;
float: left;
}
.col-contact{position:relative;min-height:1px;padding-left:35px;padding-right:35px}
@media (min-width: 704px){.col-contact{float:left;width:50%}.info-contact{padding-top:5px;padding-bottom:35px;font-size:15px}.number_eu{font-size:16px}}
@media (max-width: 703px){.col-contact .img-responsive{width:65%;padding-top:10px;}}
@media (min-width: 992px){.info-contact{font-size:20px;left:10%}.number_eu{font-size:20px}}
@media (min-width: 1200px){.info-contact{top:5px}}
.address{padding-top:6px}
.address p {padding:0; margin:0}
footer{position:relative;background:#F2F2F2;color:#787878;text-align:center}
footer .line_tricolor{padding:0 0 15px}
footer .container{padding:5px 15px 10px}
footer .bloc_footer{margin:15px 0 30px}
.slide-in-blurred-right {
-webkit-animation: slide-in-blurred-right 1s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
animation: slide-in-blurred-right 1s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
.slide-out-left {
-webkit-animation: slide-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: slide-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
/* ----------------------------------------------
* Generated by Animista on 2018-3-13 15:19:4
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-in-blurred-right
* ----------------------------------------
*/
@-webkit-keyframes slide-in-blurred-right {
0% {
-webkit-transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
display:none;
}
100% {
-webkit-transform: translateX(0) scaleY(1) scaleX(1);
transform: translateX(0) scaleY(1) scaleX(1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
display:block;
}
}
@keyframes slide-in-blurred-right {
0% {
-webkit-transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
display:none;
}
100% {
-webkit-transform: translateX(0) scaleY(1) scaleX(1);
transform: translateX(0) scaleY(1) scaleX(1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
display:block;
}
}
/* ----------------------------------------------
* Generated by Animista on 2018-3-13 17:12:31
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-out-left
* ----------------------------------------
*/
@-webkit-keyframes slide-out-left {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
display:block;
}
100% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
display:none;
}
}
@keyframes slide-out-left {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
display:block;
}
100% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
display:none;
}
}
button:focus {
outline: none;
}
.bouton-presentation:hover{
box-shadow: 3px 6px #888888;
}
.bouton-presentation {
border: none;
padding: 16px 14px 16px 14px;
border-radius: 8px;
background: #31a3dd;
font: bold 18px Roboto;
color: #fff;
}
.bouton-presentation.inactif{
background: #bdbdbc;
}
@keyframes animBloc2 {
0% {
transform: translateX(-2000px);
}
1% {
transform: translateX(1400px);
}
100% {
transform: translateX(0px);
}
}
@keyframes animDepart {
from {
display:block;
}
0% {
transform: translateX(0px);
}
100% {
transform: translateX(0px);
}
to {
display:none;
}
}
#container {
position: relative;
}
//#container > * {
// position: relative;
//}
#section_process_assist
{
opacity:1;
display:block;
background-color: #ddeaf0;
}
#section_process_dev
{
}
#section_contact {
//position:relative;
}
#section_process_dev .animBloc2
{
-webkit-animation: animDepart 2s; /* Safari, Opera, Chrome */
animation: animDepart 2s ; /* Tous les autres navigateurs */
animation-fill-mode: forwards;
}
#section_process_assist2 .animBloc2
{
-webkit-animation: animBloc2 2s; /* Safari, Opera, Chrome */
animation: animBloc2 2s ; /* Tous les autres navigateurs */
animation-fill-mode: forwards;
}
.container-row {
display: flex;
align-items: center;
}
.image {
width: 400px;
margin-right: 20px;
}
.texte-section {
flex-grow: 1;
}
/* Styles pour les écrans plus petits */
@media (max-width: 600px) {
.container-row {
flex-direction: column;
}
.texte-section {
display: none; /* Cache le texte par défaut */
}
.image {
display: none; /* Cache l'image par défaut */
}
.title-section {
background-color: #e4e4e4; /* Couleur de fond pour le bandeau */
padding: 10px;
cursor: pointer; /* Indique que le titre est cliquable */
}
}
/* Bannière */
.banniere {
background-color: #eaf6ff;
padding: 0 1em;
text-align: center;
}
.banniere-img {
max-width: 100%;
height: auto;
margin: 0 auto;
}