/*
////////////////
      BASE
////////////////
*/

html {
	width: 100%;
    height: auto;
}

body {
    margin: 0;
}

* {
    font-size: 14px;
    font-family: sans-serif;
    box-sizing: border-box;
}

h1 {
    margin: 0;
}

h2 {
    margin: 0;
}

h3 {
    margin: 0;
}

p {
    margin: 0;
}

a {
    text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
}

li {
    display: block;
    list-style: none;
}

video {
	position: fixed;   
    z-index: -100;
    max-width: 960px;   
	width:100%;
    height: auto;
}

/*
////////////////
    STRUCTURE
////////////////
*/

/*//// base ////*/

.flex {
    display: flex;
}

.flex-container {
    display: flex;
    width: 100%;
    height: auto;
    padding-left: calc( (100% - 960px)/ 2 );
    padding-right: calc( (100% - 960px)/ 2 );
    flex-flow: row wrap;
}

/* //// Parent //// */

/* ligne qui se wrap*/

.flow-row {
    flex-flow: row wrap;
}

/* colonne qui se wrap*/

.flow-col {
    flex-flow: column wrap;
}

/* alignement horizontal */

.justify-center {
    justify-content: center;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-around {
    justify-content: space-around;
}

.justify-between {
    justify-content: space-between;
}

/* alignement vertical */

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.items-stretch {
    align-items: stretch;
}

.items-baseline {
    align-items: baseline;
}

/* alignement ligne d'items */

.content-center {
  align-content: center;
}

.content-start {
  align-content: flex-start;
}

.content-end {
  align-content: flex-end;
}

.content-around {
  align-content: space-around;
}

.content-between {
  align-content: space-between;
}

.content-stretch {
  align-content: stretch;
}

/* //// Child //// */

.child-start {
    align-self: flex-start;
}

.child-end {
    align-self: flex-end;
}

.child-center {
    align-self: center;
}

.child-stretch {
    align-self: stretch;
}

.child-baseline {
    align-self: baseline;
}

/*
////////////////
     GRILLE
////////////////
*/


.flexcol-1 {
    height: auto;
    flex: 0 0 8.33%;
}

.flexcol-2 {
    height: auto;
    flex: 0 0 16.66%;
}

.flexcol-3 {
    height: auto;
    flex: 0 0 25%;
}

.flexcol-4 {
    height: auto;
    flex: 0 0 33.33%;
}

.flexcol-5 {
    height: auto;
    flex: 0 0 41.66%;
}

.flexcol-6 {
    height: auto;
    flex: 0 0 50%;
}
.flexcol-7 {
    height: auto;
    flex: 0 0 58.33%;
}

.flexcol-8 {
    height: auto;
    flex: 0 0 66.66%;
}

.flexcol-9 {
    height: auto;
    flex: 0 0 75%;
}

.flexcol-10 {
    height: auto;
    flex: 0 0 83.33%;
}

.flexcol-11 {
    height: auto;
    flex: 0 0 91.66%;
}

.flexcol-12 {
    height: auto;
    flex: 0 0 100%;
}


.leftset-1 {
    margin-left: 8.33%;
}

.leftset-2 {
    margin-left: 16.66%;
}

.leftset-3 {
    margin-left: 25%;
}
.leftset-4 {
    margin-left: 33.33%;
}

.leftset-5 {
    margin-left: 41.66%;
}

.leftset-6 {
    margin-left: 50%;
}

.leftset-7 {
    margin-left: 58.33%;
}

.leftset-8 {
    margin-left: 66.66%;
}

.leftset-9 {
    margin-left: 75%;
}

.leftset-10 {
    margin-left: 83.33%;
}

.leftset-11 {
    margin-left: 91.66%;
}


.rightset-1 {
    margin-right: 8.33%;
}

.rightset-2 {
    margin-right: 16.66%;
}

.rightset-3 {
    margin-right: 25%;
}
.rightset-4 {
    margin-right: 33.33%;
}

.rightset-5 {
    margin-right: 41.66%;
}

.rightset-6 {
    margin-right: 50%;
}

.rightset-7 {
    margin-right: 58.33%;
}

.rightset-8 {
    margin-right: 66.66%;
}

.rightset-9 {
    margin-right: 75%;
}

.rightset-10 {
    margin-right: 83.33%;
}

.rightset-11 {
    margin-right: 91.66%;
}

/*
////////////////
   RESPONSIVE
////////////////
*/

@media only screen and (max-width: 960px) {
    
    .flex-container {
        padding-left: 0;
        padding-right: 0;
    }

    [class*="flexcol-"] {
        flex: 0 0 100%;
        flex-flow: wrap;
    }

    [class*="leftset-"] {
        margin-left: 0;
    }

    [class*="rightset-"] {
        margin-right: 0;
    }

}