/** Main stuff */
body, div {
    margin: 0;
    padding: 0;
    font-family:"Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
    font-weight:200;
}

#main {
    display:flex;
    display:-webkit-flex;
    display: -ms-flexbox;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-direction: column;
    align-items: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align:stretch;
}

h1 {
    margin:.2em .2em .3em 0;
    font-weight:200;
    font-size:1.7em;
}
p {
    margin:.3em 0 .3em 0;
}

.section {
    margin-top:1em;
}

/** header stuff */
#header {
    margin:.6em .6em .3em .6em;
    display:flex;
    display:-webkit-flex;
    display:-ms-flexbox;
    flex-direction:row;
    -ms-flex-direction:row;
    -webkit-flex-direction: row;
}

#logo div {
    white-space: nowrap;
}
#logo span {
    font-size:1.9em;
}
#logo span:last-child {
    color:#81b2b3;
}

#Qualiopi-logo{
 margin: .2em .2em .3em 0;
 max-width: 100%;
 width: 450px;
}

#header #menu {
    display:flex;
    display:-webkit-flex;
    display: -ms-flexbox;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-direction: row;
    flex-grow:1;
    -ms-flex:1;
    -webkit-flex-grow:1;
    /*background-color:yellow;*/
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
    margin:.2em 0 0 0;
}

#header ul {
    display:flex;
    display:-webkit-flex;
    display: -ms-flexbox;
    -ms-flex-direction: row;
    flex-direction:row;
    -webkit-flex-direction: row;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    justify-content: flex-end;
}

#header li {
    list-style-type: none;
    padding-right:0.5em;
    flex-shrink: 0;
}
a {
    color:inherit;
}
#header a {
    text-decoration: none;
}
#header a:hover {
    opacity:.5;
}

/** content generic stuff */
.scroller {
    /*height:400px;*/
    /*max-height: 300px;*/
}

.columns {
    display:flex;
    display:-webkit-flex;
    display: -ms-flexbox;

    -ms-flex-direction: row;
    flex-direction:row;
    -webkit-flex-direction: row;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    margin-bottom:3em;
}

.column {
    /*flex-grow:1;*/
    /*-webkit-flex-grow:1;*/
    /*flex-shrink: 1;*/
    /*-webkit-flex-shrink: 1;*/
    flex:1 0 0;
    -ms-flex:1 0 0;
    -webkit-flex:1;
    margin:.5em 1em .5em 1em;
    /*margin:.2em .5em .2em .5em;*/
    padding:.2em;
}

.column p {
    /*text-wrap: none;*/
    /*-webkit-flex-wrap: wrap;*/
}

@media all and (min-width: 1150px) {
    body {
        margin-left:10%;
        margin-right:10%;
    }
    .column {
        margin:.5em 0em .5em 0em;
    }
}

@media all and (max-width: 640px) {
    .columns {
        /* On small screens, we are no longer using row direction but column */
        flex-direction: column;
        -webkit-flex-direction: column;
        -ms-flex-direction:column;
    }
}

/** specific sections stuff */
#presentation .scroller {
    background-color:#81b2b3;
}
#presentation h1 {
    color:#81b2b3;
}
#gensynd .scroller {
    background-color:#c7b66d;
}
#gensynd h1 {
    color:#c7b66d;
}

#omnicompta .scroller {
    background-color:#81b2b3;
}
#omnicompta h1 {
    color:#81b2b3;
}

#apps .scroller {
    background-color:#c66957;
}
#apps h1 {
    color:#c66957;
}

#omnikit .scroller {
    background-color:#b9b338;
}
#omnikit h1 {
    color:#b9b338;
}

#infos h1 {
    color:#81b2b3;
}
#infos {
    background-color:rgba(129,178,179,.1);
}

/** TESTS */
.scroller {
    /*display:flex;*/
    /*flex-direction: row;*/
    /*align-items: stretch;*/
    /*overflow-x:hidden;*/
}
/*.scroller-container {*/
    /*width:300%;*/
    /*height:100%;*/
    /*display:flex;*/
    /*flex-direction:row;*/
    /*flex:1;*/
    /*align-items: stretch;*/
/*}*/
.scroller-page {
    flex:1;
    /*max-height: 20px;*/
}
.scroller-previous {
     position: relative;
     cursor:pointer;
     content: "\34";
     color: white;
     width: 48px;
     height: 48px;
     z-index: 100;
     font-size: 48px;
     top: 50%;
    left:.2em;
    transform: scale(1, 2);
}
.scroller-next {
    position: relative;
    cursor:pointer;
    content: "\34";
    color: white;
    width: 48px;
    height: 48px;
    z-index: 100;
    font-size: 48px;
    right:.2em;
    top: 50%;
    transform: scale(1, 2);
}
#presentation-1 {
    background-color:darkgoldenrod;
}
#presentation-2 {
    background-color:darkkhaki;
}
#presentation-3 {
    background-color:darksalmon;
}

@media all and (max-width: 1024px) {

    #gensynd-1 {
        content: url("images/small/gensynd-1.jpg");
    }
    #gensynd-2 {
        content: url("images/small/gensynd-2.jpg");
    }
    #gensynd-3 {
        content: url("images/small/gensynd-3.jpg");
    }
}