* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: auto;
  background: #101010;
  background-image: url(images/fabric-bg-black.jpg);
  background-size: cover;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  overflow: hidden;
  z-index: 75;
}


* {
  font-family: itc-avant-garde-gothic-pro, sans-serif;
  font-weight: 400;
  color: #505050;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* Table of content */

.tdm h2{
  text-align: left;
  margin-left: 0vw;
  font-size: 0.9vw;
  margin-bottom: 0vw;
  padding-bottom: 0vw;
  letter-spacing: 0.2vw;
  text-transform: uppercase;
}

.int h2{
  text-align: right;
  margin-left: 0vw;
  font-size: 0.9vw;
  margin-bottom: 1vw;
  padding-bottom: 0vw;
  letter-spacing: 0.2vw;
  text-transform: uppercase;
}

.txt.int p {
  font-size: 0.8vw;
  line-height: 1.2vw;
  letter-spacing: 0.04vw;
  text-align: right;
}

.but-int{
  float: none;
  height: 0.8vw;
  width: 0.8vw;
  margin-right: 0.2vw;
}

.editeurs{
  text-align: center;
  color:#c5c5c5;
  font-size: 0.8vw;
  letter-spacing: 0.4vw;
  padding-top: 28vw;
}
.logos-editeurs{
  text-align: center;
  color:#c5c5c5;
  font-size: 1vw;
  letter-spacing: 0.4vw;
}

.logo-editeurs-1{
   height: 2.5vw;
   margin-right: 1vw;
   vertical-align: middle;
}
.logo-editeurs-2{
  height: 4vw;
  margin-right: 1vw;
  vertical-align: middle;
}

.tdm a{
  line-height: 1.3vw;
  padding-left: 0vw;
  font-weight: 200;
}

.hoverTable{
  width:30vw;
  margin-left: 2vw;
  margin-top: 0vw;
  border-collapse:collapse;
  letter-spacing: 0.04vw;
}

.hoverTable td{ 
  background: rgba(0, 0, 0, 0);
  border:rgba(0, 0, 0, 0) 1px solid;
}

.hoverTable td a{
  text-decoration: none;
}
.hoverTable .tdmc a{ 
  font-size: 1vw;
}
.hoverTable .tdms a{ 
  font-size: 0.9vw;
}

.hoverTable .tdmp a{ 
  font-size: 0.7vw;
  font-style: italic;
}

.hoverTable td a:hover{ 
  text-decoration: underline;
}

.hoverTable tr{
  height: 2.2vw;
  background: rgba(0, 0, 0, 0);
  border-bottom: rgba(0, 0, 0, 0) 1px solid;
}

/* TEXTES */
p {
  color: #505050;
  text-align: left;
  font-size: 1vw;
  line-height: 1.6vw;
  font-weight: 200;
  letter-spacing: 0.07vw;
  padding-bottom: 1vw;
}

h1 {
  font-size: 2.8vw;
  line-height: 3.5vw;
  font-weight: 200;
  font-style: normal;
  letter-spacing: 0.07vw;
  padding-bottom: 1vw;
}

h2 {
  font-size: 1.3vw;
  line-height: 1.8vw;
  font-weight: 200;
  letter-spacing: 0.07vw;
  padding-bottom: 1vw;
}

h3 {
  font-size: 1vw;
  line-height: 1.4vw;
  font-weight: 200;
  font-style: normal;
  letter-spacing: 0.07vw;
  padding-top: 1vw;
  padding-bottom: 0.5vw;
}

.eqp {
  padding-top: 0.5vw;
  padding-left: 0.5vw;
}

.eqp h1 {
  color: #fff;
  padding-bottom: 2vw;
  font-size: 2vw;
}

.eqp p {
  font-size: 0.8vw;
  font-weight: 200;
  line-height: 1.6vw;
  padding-top: 0vw;
  color: #fff;
}

.eqp span {
  font-size: 0.7vw;
  line-height: 1vw;
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.2vw;
  color: rgb(155, 155, 155);
}

p.smalline {
  font-size: 0.6vw;
  line-height: 1vw;
  color: rgb(255, 255, 255);
}

p.smalline-ttl {
  font-size: 0.7vw;
  line-height: 1vw;
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.2vw;
  color: rgb(155, 155, 155);
  padding-bottom: 0.5vw;
}


.ttl {
  padding-top: 15vw;
}
.ttl h2 {
  font-size: 1.7vw;
  line-height: 2.5vw;
}

.note {
  font-size: 1vw;
  font-weight: 200;
  font-style: italic;
}

.txt {
  margin: 3vw;
  width: 34vw;
  height: 34vw;
  margin-top: 3vw;
  text-align: left;
}

.book-title {
  color: #fff;
  text-align: center;
  margin-top: 27vw;
  opacity: 0;
}

.txt.sml p {
  font-size: 0.9vw;
  line-height: 1.5vw;
  letter-spacing: 0.04vw;
}
.txt.sml h3{
  font-size: 1vw;
}

.txt-low p {
  font-size: 0.7vw;
  line-height: 1vw;
  padding-top: 28vw;
  margin: 3vw;
}

.txt-low a {
  font-size: 0.6vw;
  line-height: 1vw;
  margin-top: 3vw;
}

.txt-01 {
  margin: 3vw;
  width: 39vw;
  height: 19vw;
  margin-top: 23vw;
  text-align: left;
}

.folio-d {
  height: auto;
  margin-top: -2vw;
  margin-right: 2vw;
  margin-bottom: 0;
  padding-bottom: 0;
  font-size: 0.55vw;
  letter-spacing: 0.07vw;
  text-align: right;
}

.book .info {
  float: none;
  clear: none;
  width: 40.2vw;
  height: 40.2vw;
  margin-left: 50vw;
  margin-right: 5vw;
  margin-top: calc(50vh - 20vw);
  z-index: 0;
}

.infos-txt{
  text-align: left;
  width: 40vw;
  height: 40vw;
  padding: 3vw;
  color: rgb(189, 188, 188);
  user-select: none;
}
.infos-txt p{
  color: rgb(177, 177, 177);
}
.infos-txt h2{
  color: #fff;
}
.infos-txt h3{
  color: #fff;
}
.infos-txt strong{
  color: #fff;
}

.LiensOiseau {
  position: absolute;
  bottom: 15px;
  left: 15px;
  font-style: normal;
  font-weight: 200;
  font-size: 0.6vw;
  line-height: 12px;
  color: #b3b3b3;
  text-decoration: none;
  transition: opacity .5s;
  opacity: 0.5;
  z-index: 1000000;
  letter-spacing: .02em;
}
.LiensOiseau:hover {
  opacity: 1;
}

.LiensOiseau span{
  color: #ffffff;
}

.rightLinks {
  opacity: 1;
  position: absolute;
  bottom: 15px;
  right: 15px;
  font-style: normal;
  font-weight: 400;
  font-size: 0.6vw;
  line-height: 12px;
  color: #979797;
  display: flex;
  flex-flow: row;
  letter-spacing: .02em;
  transition: opacity .5s;
  z-index: 1000000;
}

.rightLinks a{
  color: #ffffff;
  text-decoration: none;
  margin-right: 5px;
}
.rightLinks span{
  color: #979797;
  margin-right: 5px;
}
.rightLinks div:first-child a {
  margin-left: 5px;
}
.rightLinks div:first-child span {
  margin-right: 5px;
}
.rightLinks div:first-child {
  margin-right: 10px;
}

/* BOOK PAGES */

.book .pages .page.closed {
  width: 40.2vw;
  height: 40.2vw;
  margin-left: 9.9vw;
  margin-right: 9.9vw;
  margin-top: calc(50vh - 20.1vw);
  border-radius: 0 1.2vw 1.2vw 0;
  border: 1px solid rgba(0, 0, 0, 1);
}


.book .pages .page.closed-2 {
  width: 40.2vw;
  height: 40.2vw;
  margin-left: calc(10vw + 1px);
  margin-right: calc(10vw + 1px);
  margin-top: calc(50vh - 20.1vw);
  border-radius: 1.2vw 0vw 0vw 1.2vw;
  border: 1px solid rgba(0, 0, 0, 1);
}

.book .pages .page.opened {
  width: 40vw;
  height: 40vw;
  border-radius: 1.2vw 0vw 0vw 1.2vw;
  border: 1px solid rgba(0, 0, 0, 0.01);
}
.book .pages .page.opened-2 {
  width: 40vw;
  height: 40vw;
  border-radius: 0vw 1.2vw 1.2vw 0vw;
  border: 1px solid rgba(0, 0, 0, 0.01);
}


.book {
  -webkit-transition: opacity 0.4s 0.2s;
  transition: opacity 0.4s 0.2s;
  margin-left: -40vw;
  width: 100vw;
  height: 100vh;
}

.pages {
  overflow: hidden;
}

.book .pages {
  width: 100vw;
  height: 100vh;
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-radius: 1vw;
  -webkit-perspective: 400vh;
          perspective: 400vh;
}

.page {
  width: 40vw;
  height: 40vw;
  float: left;
  background: left top no-repeat;
  background-size: cover;
  background-image: url(images/blankpage_right.jpg);
}

.book .page {
  float: none;
  clear: none;
  margin-left: calc(10vw + 1px);
  margin-right: calc(10vw + 1px);
  margin-top: calc(50vh - 20vw);
  position: absolute;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transition: -webkit-transform 1.4s;
  transition: -webkit-transform 1.4s;
  transition: transform 1.4s;
  transition: transform 1.4s, -webkit-transform 1.4s;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  cursor: grab;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -o-object-fit: cover;
     object-fit: cover;
     border: 1px solid #fbfbfb;
  
}

.book .page {
  -webkit-box-shadow: 1.5vw 0px 1vw 0vw  #0000001f;
          box-shadow: 1.5vw 0px 1vw 0vw  #0000001f;
}

.book .page.flipped:nth-child(even)  {
  -webkit-box-shadow: -1.5vw 0px 1vw 0vw  #0000001f;
          box-shadow: -1.5vw 0px 1vw 0vw  #0000001f;
}


/*.book .page:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0);
  -webkit-transition: background 1.4s;
  transition: background 1.4s;
}*/

.page:nth-child(even) {
  clear: both;
}

.book .page:nth-child(odd) {
  pointer-events: all;
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  right: 0;
  border-radius: 0 1.5vw 1.5vw 0;
}

.book .page:nth-child(odd):hover {
  -webkit-transform: rotateY(-15deg);
          transform: rotateY(-15deg);
}

.book .page:nth-child(odd):hover:before {
  background: rgba(0, 0, 0, 0);
}

.book .page:nth-child(odd):before {
  background: rgba(0, 0, 0, 0);
}

.book .page:nth-child(even) {
  pointer-events: none;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  left: 0;
  border-radius: 1.5vw 0vw 0vw 1.5vw;
}

.book .page:nth-child(even):before {
  background: rgba(0, 0, 0, 0);
}

.book .page .grabbing {
  -webkit-transition: none;
  transition: none;
}

.book .page.flipped:nth-child(odd) {
  pointer-events: none;
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.book .page.flipped:nth-child(odd):before {
  background: rgba(0, 0, 0, 0);
}

.book .page.flipped:nth-child(even) {
  pointer-events: all;
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}

.book .page.flipped:nth-child(even):hover {
  -webkit-transform: rotateY(15deg);
          transform: rotateY(15deg);
}

.book .page.flipped:nth-child(even):hover:before {
  background: rgba(0, 0, 0, 0);
}

.book .page.flipped:nth-child(even):before {
  background: rgba(0, 0, 0, 0);
}

.page:nth-child(odd) {
  background-position: right top;
}