:root {
    --blue: #0B9BD8;
    --blueselected:#347BBB;
    --lightgrey: #F3F3F3;
    --grey: #CCC;
    --realisationl:rgba(128, 161, 216,.6);
    --realisationh:rgba(128, 161, 216,.9);
    --maintenancel:rgba(224,141,24,.6);
    --maintenanceh:rgba(224,141,24,.9);
    --hebergementl:rgba(137,86,74,.6);
    --hebergementh:rgba(137,86,74,.9);
    --servicel:rgba(88,158,114,.6);
    --serviceh:rgba(88,158,114,.9);
    --referencementl:rgba(37,70,91,.6);
    --referencementh:rgba(37,70,91,.9);
    --developpementl:rgba(202,186,35,.6);
    --developpementh:rgba(202,186,35,.9);
}


/* Global */
body {
    font-family: 'Open Sans', sans-serif;
    background-color:#fff;
    position:relative;
    margin:0;
    color:#222;
}

body>header {
      position:fixed;
        z-index:500;
        top:0;
        left:0;
        width:100%;
}

h1, h2, h3, h4, h5, h6 {
    margin:16px 0;
    color: var(--blue);
}

h3 {
    display:inline-block;
}


a {
    color:var(--blue);
}

q {
    display:inline-block;
    font-size:13px;
    line-height:normal;
    font-weight:600;
    font-style: italic;
    color:var(--blueselected);
    padding:12px 32px;
}

ul{
    margin:0;
  padding:0;
}

.high {
    font-weight: 600;
    font-size:105%;
}

.com-content-article__body p{
    text-indent:16px;
}

.com-content-article__body ul{
        list-style-type: none;
}

/* scroll to top */
#scrolltop {
    position:fixed;
    right:4px;
    bottom:56px;
    transition: opacity .4s;
    opacity:.75;
}

#scrolltop:hover {
    opacity:1;
}

/* header */
header {
    background-color:var(--lightgrey);
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}


/* Logo */
.toplogo>img {
    width:256px;
    max-width:100%;
    height:auto;
    user-select: none;
}

/* Intro */
div.headermodule>.mod-custom.custom {
    height:100%;
}
div.slogan {
    position:relative;
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding-top:0;
}
div.slogan>p {
    font-size:16px;
    color:var(--blue);
    margin:0;
}

/* menu main */

.mainmenu {
    height:42px;
    margin:0 0 16px 0;
    position:relative;
    z-index:50;
    padding:0;
}

.mainmenu ul {
    display:none;
    flex-flow:row nowrap;
    align-items:center;
    justify-content:center;
    position:relative;
}

.mainmenu li, .mainmenu li a {
    transition: all .25s;

}

.mainmenu.resp_enabled ul {
    flex-flow:column nowrap;
    align-items:center;
    justify-content:space-between;
    left:0;
}

.mainmenu.resp_enabled>ul {
    margin-top:42px;
}

.mainmenu.resp_enabled.resp_displayed ul {
    display:flex;
}

.mainmenu li>ul {
    padding-top:6px;
    left:-35px;
    top:100%;
    width:183px;
    flex-flow:column nowrap;
    align-items:flex-start;
    position:absolute;
    background-color:transparent;
}

.mainmenu.resp_enabled li>ul {
  display:flex;
  flex-flow:column nowrap;
 position:relative;
 width:100%;
 box-shadow: rgba(77,122,161, 0.1) 0px 10px 15px -3px, rgba(100,134,162, 1) 0px 4px 6px -2px;
}

.mainmenu li:hover>ul {
display:flex;
}

.mainmenu ul li{
    display:flex;
    flex-flow:row nowrap;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:60;
    width:100%;
    margin:0;
    background-color:var(--blue);
    box-shadow: rgba(77,122,161, 0.1) 0px 1px 3px 0px, rgba(100,134,162, 1) 0px 1px 2px 0px;
}

.mainmenu>ul>li{
    width:auto;
    margin:0 3px;
}

.mainmenu.resp_enabled ul>li{
  width:100%;
  flex-flow:column nowrap;
  align-items:flex-start;
   justify-content:flex-start;
}

.mainmenu ul li>a, .mainmenu ul li>.separator{
    color:#fff;
    font-weight:700;
    font-size:15px;
    text-transform:uppercase;
    text-decoration:none;
    padding:12px 15px;
    display: flex;
    height:40px;
    align-items:center;
    justify-content:center;
    width:100%;
}

.mainmenu>ul>li>a, .mainmenu>ul>li>.separator{
    font-size:16px;
    padding:12px 16px;
    height:42px;
    width:auto;
}

.mainmenu.resp_enabled ul>li>a,.mainmenu.resp_enabled >ul>li>.separator{
    width:100%;
}

.mainmenu .separator {
    cursor:pointer;
}

.mainmenu ul>li.active, .mainmenu ul>li:hover{
  background-color:var(--blueselected);  

}

.mainmenu ul>li.active>a, .mainmenu ul>li:hover>a, .mainmenu ul>li.active>.separator, .mainmenu ul>li:hover>.separator{
  color:var(--white);
}

.mainmenurespicon {
    float:right;
    cursor:pointer;
    z-index:15;
    padding:4px;
    background-color:var(--blue);
}


.mainmenu.resp_enabled {
  background-color:var(--blue);
}

.mainmenu.resp_enabled .mainmenurespicon.close {
  display:none;
}

.mainmenu.resp_enabled .mainmenurespicon.open {
    display:block;
}

.resp_enabled.resp_displayed .mainmenurespicon.open {
    display:none;
}

.resp_enabled.resp_displayed .mainmenurespicon.close {
    display:block;
}


/* breadcrumb */
ol.mod-breadcrumbs{
    margin:0;
}

ol.mod-breadcrumbs span{
    font-size:14px;
}

/* presentation */
.presentation h3 {
    display:inline-block;
    padding:4px 6px;
    margin-right:16px;
    
}

/* tip */
aside.tip {
    width:100%;
    display:flex;
    flex-flow:row wrap;
    justify-content:center;
    align-items:center;
    padding:16px;
}
aside.tip>div {
    font-family: 'Manrope', sans-serif;
    background-color:var(--blue);
    color:#fff;
    border:solid 1px var(--blueselected);
    border-radius:5px;
    width:500px;
    max-width:100%;
    text-indent: 24px;
    padding:24px;
    box-shadow: rgba(77,122,161, 0.1) 0px 4px 16px, rgba(100,134,162, 1) 0px 8px 32px;
}
aside.tip.full>div {
    width:100%;
    max-width:1300px;
}

aside.tip>div ul {
    list-style-type: none;
    display:flex;
    flex-flow: column nowrap;
    align-items:flex-start;
    justify-content: center;
    margin-left:32px;
}

/* box */
div.anim {
    width:100%;
    display:flex;
        flex-flow:row wrap;
    justify-content:center;
    align-items:center;
}

figure.box{
    position:relative;
    display:inline-block;
    margin:8px;
    padding:0;
    overflow:hidden;
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,.16);
    border-radius:4px;
    max-width:calc(100% - 16px);
    width:400px;
}

figure.box>img {
    width:100%;
    height:auto;
    opacity:.75;
    transition: opacity .4s;
}

figure.box.realisation>img {
    background-image: linear-gradient(var(--realisationl), var(--realisationh));
}
figure.box.maintenance>img {
    background-image: linear-gradient(var(--maintenancel), var(--maintenanceh));
}
figure.box.hebergement>img {
    background-image: linear-gradient(var(--hebergementl), var(--hebergementh));
}
figure.box.service>img {
    background-image: linear-gradient(var(--servicel), var(--serviceh));
}
figure.box.referencement>img {
    background-image: linear-gradient(var(--referencementl), var(--referencementh));
}
figure.box.developpement>img {
    background-image: linear-gradient(var(--developpementl), var(--developpementh));
}

figure.box:hover {
    >img{
        opacity:.9;
    }
}


figure.box>figcaption {
    position:absolute;
    left:0;
    top:0;
    display:block;
    padding:8px 16px;
    width:100%;
    height:100%;
    z-index:10;
}

figure.box>figcaption>h2 {
    font-family: 'Rubik', sans-serif;
    padding:8px 0;
    text-align:center;
    margin:0;
    color:#181818;
}

figure.box>figcaption>a {
    position:absolute;
    right:8px;
    bottom:0;
    text-decoration:none;
    color:#FFF;
    font-size:14px;
}

figure.box>figcaption>.content  {
    position:absolute;
    top:15%;
    left:16px;
    width:calc(100% - 32px);
    display:flex;
    flex-flow:column nowrap;
    align-items:center;

}

figure.box>figcaption>.content>q {
    color:#FFF;
    padding:0;
    line-height:1;
}

figure.box>figcaption>.content>p  {
    font-size:14px;

}

figure.box>figcaption>.content>p.space {
    margin:0;
    padding:0;
    user-select: none;
}

figure.box>figcaption>.content>span.separator  {
    display:block;
    width:250px;
    border-top:1px solid #fff;
    line-height:1px;
    margin:16px 0;

}

/* slider */
.contentbottomdown>h3{
    text-transform: uppercase;
    text-align:center;
}



/* infos légales */
.legalinfos {
    padding:32px 0;
}

.veryimportant {
    background-color:#8a394c;
    color:#eee;
    border-radius:5px;
    padding:8px;
    margin:24px 0;
}

/* politique de confidentialité */
.ppheader {
    position: relative;
    width:100%;
    display:flex;
    flex-flow:row wrap;
    justify-content:center;
    align-items:flex-start;
    padding:32px 16px;
}
.ppheader>div {
    position: relative;
    min-width:400px;
    width:46%;
    display:flex;
    flex-flow:column nowrap;
    justify-content:flex-start;
    align-items:flex-start;
    background-color:var(--lightgrey);
    margin:8px 1%;
    padding:4px;
    
}

/* contact */
.smartform {
    position: relative;
    width:100%;
    display:flex;
    flex-flow:row wrap;
    justify-content:center;
    align-items:center;
    padding:32px 16px;
}
#smartform1 {
    position: relative;
    max-width:100%;
    width:450px;
}

.smartform div[data-type='group']>.desc{
    color:var(--blueselected);
}


/* footer */
footer {
    background-color:var(--blue);
    color:var(--lightgrey);
    font-size:14px;
    margin-top:32px;
}


/* footer */
footer ul.mod-menu {
    position:relative;
    width:100%;
    justify-content: flex-end;
    align-items: center;
    display:flex;
    flex-flow: row nowrap;
    padding:3px 16px;
}

footer ul.mod-menu li:not(:first-child)::before {
  content: '-';
  margin:0 3px;
}

footer ul.mod-menu li>a {
  font-size:12px;
  text-decoration:none;
  color:var(--lightgrey);
  transition: all .4s;
}

footer ul.mod-menu li>a:hover {
  text-decoration:underline;
}

/* Media queries */


@media (min-width: 416px) {
    q {
        font-size:14px;
    }
    figure.box>figcaption>.content>p  {
        font-size:16px;
    }
    figure.box>figcaption>a {
        font-size:16px;
    }
    footer ul.mod-menu li>a {
        font-size: 14px;
    }
}


@media (min-width: 992px) {
    .toplogo>img {
        width:256px;
    }

    div.slogan>p {
        font-size:22px;
    }
        .mainmenurespicon {
        display:none;
    }
    .mainmenu>ul {
        display:flex;
    }
}