body{
    margin:0;
    padding:0;
    width: 100%;
    font-size: 10vh;
    font-family: 'resonanz_bbook';
    color: #f04b53;
    text-align: center;
    margin-top: -1em;
}
i{ font-family: 'Arial'; font-style: normal; font-weight: normal; -webkit-font-smoothing: antialiased;}
h1{ font-size: 1.4em; font-weight: normal; line-height: 0.9em; }
a{text-decoration: none; color: #f04b53;}
.titre{
    display: inline;
    /* border-bottom: none; */
    /* line-height: 0.79em; */
    height: 0.7em;
    box-sizing: content-box;
    border-top: 0;
    /* padding-bottom: 0.1em; */
}
a.titre:hover{
    box-shadow: inset 0 -0.1em 0 rgba(240,75,83,1);
    -webkit-box-shadow: inset 0 -0.1em 0 rgba(240,75,83,1);
    /* border-bottom: solid red 0.1em; */
}

.date{vertical-align: super; display: inline-block; font-size: 0.5em; letter-spacing: normal; padding-right: 0.2em; }
.lieu{display: inline-block; font-size: 0.9em; letter-spacing: normal; }
sup{font-size: 0.6em;}
.centerContainerProjets i{ line-height: 0.5em; height: 1em; display: block; font-size: 0.8em; }
.container{ }
.gradContainer{
    width: 100%;
    position: -webkit-sticky; position: sticky;
    top: 0;
    height: 100vh;
    z-index: 1;
}
.screenContainer{ height: 100vh; position: relative; z-index: 2;  transform: translate3d(0,0,0);}
.screenContainer.first{ margin-top: -100vh; }
.centerContainer{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin: auto;
    max-width: 130vh;
    padding: 0 1.3em;
    z-index: 2;
}
.centerContainerProjets{
    position: relative;
    margin: auto;
    max-width: 130vh;
    padding: 10vh 1.3em;
 position: relative; z-index: 2;
 transform: translate3d(0,0,0);
}
.left{ text-align: left; }
.right{ text-align: right; }
.point{ font-family: 'Arial';  position: -webkit-sticky; position: sticky; padding:0em; font-size: 0.8em; line-height: 0.4em; z-index: 3}
.topleft, .topright      { top: 0em; margin-bottom:89vh; padding-top:0.5em;}
.bottomleft, .bottomright{ top: 91vh; margin-top:-2em; padding-bottom:0.5em;}
.topleft, .bottomleft   { float: left; padding-left:0.5em;}
.topright, .bottomright { float: right; padding-right:0.5em;}

a.portfolio:hover span{
    box-shadow: inset 0 -0.09em 0 rgba(240,75,83,1);
    -webkit-box-shadow: inset 0 -0.09em 0 rgba(240,75,83,1);
  }
a.portfolio{  border-bottom: 0; padding-bottom:  0.1em; height: 0.97em; display: inline; font-size: 1.4em; }
.footer a:hover{text-decoration: underline; }
.footer{
    position: relative;
    font-size: 0.17em;
    bottom: -48vh;
    vertical-align: bottom;
    display: inline;
}

.grad0{     background: linear-gradient(  #fff 0%, #c0e5e4 30%, #fff 70%, #e8c7d3 100% );}
.grad1{     background: linear-gradient(  #e8c7d3 0%, #ffebbb 30%, #fff 70%, #c7bbe9 100% ); }
.grad2{     background: linear-gradient(  #c7bbe9 0%, #fff 30%, #fbffe8 70%, #9fd3c7 100% ); }
.grad3{     background: linear-gradient(  #9fd3c7 0%, #ececec 30%, #eef3b7 70%, #eaf6f6 100% ); }
.grad4{     background: linear-gradient(  #eaf6f6 0%, #fff 30%, #f6e4ad 70%, #f5f4e8 100% ); }
.grad5{     background: linear-gradient(  #f5f4e8 0%, #cadefc 30%, #fff 70%, #ffcccc 100% ); }
.grad6{     background: linear-gradient(  #ffcccc 0%, #c0e5e4 30%, #fff 70%, #e8c7d3 100% );}
.grad7{     background: linear-gradient(  #e8c7d3 0%, #ffebbb 30%, #fff 70%, #bbe4e9 100% ); }
.grad8{     background: linear-gradient(  #bbe4e9 0%, #fff 30%, #dde0ab 70%, #9fd3c7 100% ); }
.grad9{     background: linear-gradient(  #9fd3c7 0%, #ececec 30%, #eef3b7 70%, #eaf6f6 100% ); }
.grad10{     background: linear-gradient(  #eaf6f6 0%, #fff 30%, #f6e4ad 70%, #fff 100% ); }
.grad11{     background: linear-gradient(  #fff 0%, #e8c7d3 30% ); }