@charset "UTF-8";
@import url(reset.css);
@import url(fonts.css);
@import url(chapitres.css);
@import url(navigation.css);
@import url(teaser.css);
/* HEADER*/
body {
  background: #000;
}

.container {
  position: relative;
  width: 100%;
  min-width: 900px;
  height: 100%;
  overflow: hidden;
  margin: 0 auto;
}

header {
  position: relative;
  width: 100%;
  height: 80px;
  background: url(../images/ui/background-header.jpg) no-repeat;
  background-size: cover;
}

header h1 {
  font-family: "latribunecpmedium", sans-serif;
  font-size: 90px;
  font-weight: normal;
  color: #FFF;
  position: absolute;
  top: 10px;
  line-height: 80%;
  bottom: 0px;
  left: 10px;
}

header h2 {
  font-family: "proxima_nova_alt_rgregular",sans-serif;
  font-size: 24px;
  font-weight: normal;
  color: #FFF;
  position: absolute;
  right: 80px;
  bottom: 5px;
  line-height: 100%;
}

header .logo {
  position: absolute;
  right: 10px;
  bottom: 20px;
}

header .red {
  color: #e30613;
}

footer {
  position: relative;
  width: 100%;
  height: 20%;
  min-height: 100px;
  background: url(../images/ui/background-footer.jpg) no-repeat bottom;
  background-size: cover;
  background-position: bottom center;
  padding-top: 10px;
  z-index: 5;
}

footer .barre {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 25px;
  background: url(../images/ui/filet-rouge.png) no-repeat;
  background-size: 100% 5px, cover;
  background-position: top center;
}

footer .mc-btns {
  width: 101%;
  height: 90%;
  margin: 0;
  opacity: 0;
}

footer .mc-btns .bonus-btn {
  /*	position:relative;
	display:inline-block;
	vertical-align:top;*/
  float: left;
  height: 100%;
  width: 13.75%;
  margin-left: .5%;
  background: #000;
  overflow: hidden;
  cursor: pointer;
}

footer .mc-btns .bonus-btn:first-child {
  margin-left: 0;
}

footer .mc-btns .bonus-btn .background-btn {
  position: relative;
  background: no-repeat center center;
  background-size: cover;
  -webkit-transform-origin: bottom center;
  -moz-transform-origin: bottom center;
  -o-transform-origin: bottom center;
  transform-origin: bottom center;
  -webkit-transition: transform .5s ease-in-out;
  -moz-transition: transform .5s ease-in-out;
  -o-transition: transform .5s ease-in-out;
  transition: transform .5s ease-in-out;
  width: 100%;
}

footer .mc-btns .bonus-btn .background-btn-scale {
  -webkit-transform: scale(1.05, 1.05);
  -moz-transform: scale(1.05, 1.05);
  -o-transform: scale(1.05, 1.05);
}

#btn-bonus-chrono .background-btn {
  background-image: url(../images/ui/btn-bonus/chrono.jpg);
}

#btn-bonus-caobang .background-btn {
  background-image: url(../images/ui/btn-bonus/cao-bang.jpg);
}

#btn-bonus-video .background-btn {
  background-image: url(../images/ui/btn-bonus/videos.jpg);
}

#btn-bonus-temoins .background-btn {
  background-image: url(../images/ui/btn-bonus/temoins.jpg);
}

#btn-bonus-archives .background-btn {
  background-image: url(../images/ui/btn-bonus/archives.jpg);
}

#btn-bonus-filmo .background-btn {
  background-image: url(../images/ui/btn-bonus/filmo.jpg);
}

#btn-bonus-lexique .background-btn {
  background-image: url(../images/ui/btn-bonus/lexique.jpg);
}

footer .mc-btns .bonus-btn p {
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  font-family: proxima_nova_alt_rgregular, sans-serif;
  font-size: 16px;
  line-height: 100%;
  color: #FFF;
  text-align: center;
}

footer .mc-btns .background-btn-bas {
  position: absolute;
  bottom: 10px;
  width: 100%;
}

footer .mc-btns .background-btn-bas img {
  width: 100%;
  height: auto;
}

footer .mc-pied {
  bottom: 0;
  height: 14px;
  left: 0;
  position: absolute;
  width: 100%;
}

footer .mc-pied .pied-btn {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 33%;
}

footer .mc-pied .pied-btn p {
  position: relative;
  margin: 0 auto;
  font-family: proxima_nova_alt_rgregular, sans-serif;
  font-size: 12px;
  line-height: 100%;
  color: #FFF;
  text-align: center;
  cursor: pointer;
}

footer .mc-pied .pied-btn p:hover {
  text-decoration: underline;
}

footer .mc-pied .pied-btn:nth-child(1) p {
  width: 40px;
}

footer .mc-pied .pied-btn:nth-child(2) p {
  width: 40px;
}

footer .mc-pied .pied-btn:nth-child(3) p {
  width: 40px;
}

.colonne {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

/*-------------------lightbox--------------------------------*/
.container-lightbox {
  display: none;
  position: absolute;
  top: 80px;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.container-lightbox .font-lightbox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}

.container-lightbox .fermer-lightbox {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
  background: #e30613;
  font-family: "proxima_nova_alt_rgbold", sans-serif;
  font-weight: normal;
  font-size: 30px;
  line-height: 28px;
  color: #FFF;
  text-align: center;
  cursor: pointer;
}

.container-lightbox .box {
  position: relative;
  width: 500px;
  margin: 60px auto;
  background: url(../images/ui/fond-pop-up.jpg) no-repeat center center;
  background-size: cover;
  padding: 40px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}

.container-lightbox .box .wrapper-box {
  position: relative;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

/*-------------------bio--------------------------------*/
.container-bios .bio .wrapper-bio {
  display: none;
}

.container-bios .bio h2 {
  font-family: "proxima_nova_altsemibold", sans-serif;
  font-weight: normal;
  font-size: 30px;
  line-height: 130%;
  color: rgba(0, 0, 0, 0.8);
  margin: 15px 0;
}

.container-bios .bio h3 {
  font-family: "proxima_nova_altsemibold", sans-serif;
  font-weight: normal;
  font-size: 24px;
  line-height: 130%;
  color: rgba(0, 0, 0, 0.8);
  margin: 20px 0 0 0;
}

.container-bios .bio p {
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 16px;
  line-height: 130%;
  color: rgba(0, 0, 0, 0.8);
  margin: 5px 20px;
}

/*-------------------textes--------------------------------*/
.container-textes .textes .wrapper-texte {
  display: none;
}

.container-textes .textes h2 {
  font-family: "proxima_nova_altsemibold", sans-serif;
  font-weight: normal;
  font-size: 30px;
  line-height: 130%;
  color: rgba(0, 0, 0, 0.8);
  margin: 15px 0;
}

.container-textes .textes h3 {
  font-family: "proxima_nova_altsemibold", sans-serif;
  font-weight: normal;
  font-size: 24px;
  line-height: 130%;
  color: rgba(0, 0, 0, 0.8);
  margin: 20px 0 0 0;
}

.container-textes .textes p {
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 16px;
  line-height: 130%;
  color: rgba(0, 0, 0, 0.8);
  margin: 5px 20px;
}

/*-------------------diapos--------------------------------*/
.container-diapos .diapos {
  position: relative;
  width: 80%;
  height: 70%;
  background: black;
  margin: 0 auto;
  padding: 40px 40px 20px 40px;
  top: 60px;
}

.container-diapos .diapos.archives {
  top: 0px;
  margin: 0 auto;
  padding: 40px 40px 30px 40px;
  height: 80%;
}

.container-diapos .diapos.archives h2 {
  font-family: "proxima_nova_altsemibold", sans-serif;
  font-weight: normal;
  font-size: 36px;
  line-height: 100%;
  color: white;
  margin: -30px 0 5px 0;
}

.container-diapos .diapos .wrapper-diapos {
  display: none;
  position: relative;
}

.container-diapos .diapos .wrapper-diapos .compteur {
  position: absolute;
  right: 0px;
  bottom: 0px;
  font-family: "proxima_nova_altsemibold", sans-serif;
  font-size: 20px;
  color: #FFF;
  text-align: center;
  line-height: 100%;
  width: 50px;
}

.container-diapos .diapos .wrapper-diapos .btn {
  position: absolute;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 90px;
  color: #FFF;
  text-align: center;
  line-height: 100%;
  cursor: pointer;
  width: 50px;
}

.container-diapos .diapos .wrapper-diapos .btn:hover {
  color: #999;
}

.container-diapos .diapos .wrapper-diapos .btn-suivant {
  right: 0px;
}

.container-diapos .diapos .wrapper-diapos .btn-precedant {
  left: 0px;
}

.container-diapos .diapos .mc-diapo {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

.container-diapos .mc-diapo .mc-diapo-wrapper {
  position: relative;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  overflow: hidden;
}

.container-diapos .mc-diapo .mc-diapo-wrapper.trans {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}

.container-diapos .mc-diapo .mc-diapo-wrapper .diapo {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.container-diapos .mc-diapo .mc-diapo-wrapper .diapo .wrapper-img {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}

.container-diapos .mc-diapo .mc-diapo-wrapper .diapo .wrapper-img img {
  position: relative;
  display: block;
  height: 100%;
  width: auto;
  margin: 0 auto;
}

.container-diapos .mc-diapo .mc-diapo-wrapper .diapo .wrapper-img h2 {
  font-family: "proxima_nova_altsemibold", sans-serif;
  font-weight: normal;
  font-size: 16px;
  line-height: 130%;
  color: rgba(255, 255, 255, 0.8);
  margin: 15px 5px 5px 5px;
}

.container-diapos .mc-diapo .mc-diapo-wrapper .diapo .wrapper-img p {
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 14px;
  line-height: 130%;
  color: rgba(255, 255, 255, 0.8);
  margin: 5px;
}

/*-------------------caobang90s--------------------------------*/
.container-caobang .caobang90s .wrapper-caobang90s {
  display: none;
}

.container-caobang .caobang90s {
  position: relative;
  width: 80%;
  max-width: 1000px;
  height: 85%;
  margin: 60px auto;
  background: black;
  padding: 20px;
}

.container-caobang .caobang90s h2 {
  font-family: "proxima_nova_altsemibold", sans-serif;
  font-weight: normal;
  font-size: 30px;
  line-height: 100%;
  color: white;
  margin: 15px 0;
}

.container-caobang .caobang90s p {
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 16px;
  line-height: 130%;
  color: rgba(0, 0, 0, 0.8);
  margin: 5px 20px;
}

/*-------------------videoBonus--------------------------------*/
.container-videoBonus .videoBonus .wrapper-videoBonus {
  display: none;
}

.container-videoBonus .videoBonus {
  position: relative;
  width: 90%;
  max-width: 1000px;
  height: 65%;
  margin: 60px auto;
  background: black;
  padding: 20px;
}

.container-videoBonus .videoBonus h2 {
  font-family: "proxima_nova_altsemibold", sans-serif;
  font-weight: normal;
  font-size: 30px;
  line-height: 100%;
  color: white;
  margin: 15px 0;
}

.container-videoBonus .videoBonus .col1 {
  width: 70%;
}

.container-videoBonus .videoBonus .col2 {
  width: 29%;
}

.container-videoBonus .videoBonus .col2 .btn_vid_bonus {
  width: 70%;
  margin: 0 auto 10px auto;
}

.container-videoBonus .videoBonus .col2 .btn_vid_bonus img {
  width: 100%;
  height: auto;
}

.container-videoBonus .videoBonus .col2 .btn_vid_bonus .btn-vid {
  padding-left: 0px;
  cursor: pointer;
}

.container-videoBonus .videoBonus .col2 .btn_vid_bonus .btn-vid::before {
  content: url(../images/ui/picto-blc-video.png);
  margin-right: 5px;
}

.container-videoBonus .videoBonus .col2 .btn_vid_bonus .btn-bio {
  padding-left: 0px;
  cursor: pointer;
  margin-left: 5px;
}

.container-videoBonus .videoBonus .col2 .btn_vid_bonus .btn-bio::before {
  content: url(../images/ui/picto-blc-bio.png);
  margin-right: 0px;
}

.container-videoBonus .videoBonus .col2 .btn_vid_bonus p {
  font-family: "proxima_nova_altsemibold", sans-serif;
  font-weight: normal;
  font-size: 14px;
  line-height: 130%;
  color: white;
  margin: 2px 0px;
}

.container-videoBonus .wrapper-textes {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.container-videoBonus .wrapper-textes .inner-videoBonus {
  height: 65%;
  margin: 0 auto;
  max-width: 500px;
  overflow: hidden;
  padding: 0 20px 50px 20px;
  position: relative;
  top: 30px;
  background: url(../images/ui/fond-pop-up.jpg) no-repeat center center;
  background-size: cover;
  overflow: hidden;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}

.container-videoBonus .wrapper-textes .close-lightbox {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
  background: #e30613;
  font-family: "proxima_nova_alt_rgbold", sans-serif;
  font-weight: normal;
  font-size: 30px;
  line-height: 28px;
  color: #FFF;
  text-align: center;
  cursor: pointer;
}

.container-videoBonus .wrapper-textes .inner-videoBonus .textes {
  position: relative;
  margin: 40px 20px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.container-videoBonus .wrapper-textes .inner-videoBonus .textes .wrapper-bio {
  display: none;
}

.container-videoBonus .wrapper-textes .inner-videoBonus .textes h2 {
  font-family: "proxima_nova_altsemibold", sans-serif;
  font-weight: normal;
  font-size: 24px;
  line-height: 130%;
  color: black;
  margin: 20px 0 0 0;
}

.container-videoBonus .wrapper-textes .inner-videoBonus .textes h3 {
  color: rgba(0, 0, 0, 0.8);
  font-family: "proxima_nova_altsemibold",sans-serif;
  font-size: 24px;
  font-weight: normal;
  line-height: 130%;
  margin: 20px 0 0;
}

.container-videoBonus .wrapper-textes .inner-videoBonus .textes p {
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 16px;
  line-height: 150%;
  color: rgba(0, 0, 0, 0.9);
  margin: 10px 20px;
}

/*-------------------TEMOINS--------------------------------*/
.container-temoins .temoins {
  position: relative;
  width: 80%;
  height: 80%;
  margin: 20px auto;
  background: url(../images/temoins/Fond-matiere-temoins.jpg) no-repeat;
  background-size: cover;
  padding: 10px  40px;
  overflow: hidden;
}

.container-temoins .temoins h2 {
  font-family: "proxima_nova_altsemibold", sans-serif;
  font-weight: normal;
  font-size: 36px;
  line-height: 100%;
  color: black;
  margin: 10px 0 5px 0;
}

.container-temoins .temoins .btn {
  position: absolute;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 90px;
  color: #000;
  text-align: center;
  line-height: 100%;
  cursor: pointer;
  width: 50px;
}

.container-temoins .temoins .btn:hover {
  color: #333;
}

.container-temoins .temoins .btn-suivant {
  right: 10px;
}

.container-temoins .temoins .btn-precedant {
  left: 10px;
}

.container-temoins .temoins .zone {
  position: relative;
  width: 100%;
  height: 90%;
  overflow: hidden;
}

.container-temoins .temoins .zone .mask-zone {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  padding-bottom: 20px;
}

.container-temoins .temoins .zone .mask-zone .wrapper-zone {
  position: relative;
  left: 0;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.container-temoins .temoins .zone .mask-zone .wrapper-zone .temoin {
  float: left;
  font-size: 0;
  line-height: 0;
  margin: 0 20px;
  width: 255px;
  overflow: hidden;
}

.container-temoins .temoins .zone .mask-zone .wrapper-zone .temoin .wrapper-temoin .background-temoin {
  position: relative;
}

.container-temoins .temoins .zone .mask-zone .wrapper-zone .temoin .wrapper-temoin .background-temoin img {
  width: 100%;
  height: auto;
}

.container-temoins .temoins .zone .mask-zone .wrapper-zone .temoin .wrapper-temoin .effet-temoin {
  position: absolute;
  bottom: 0;
  overflow: hidden;
}

.container-temoins .temoins .zone .mask-zone .wrapper-zone .temoin .nom-temoin {
  position: relative;
  background: #000;
  padding: 5px;
}

.container-temoins .temoins .zone .mask-zone .wrapper-zone .temoin .nom-temoin p {
  font-family: "proxima_nova_altsemibold", sans-serif;
  font-weight: normal;
  font-size: 14px;
  line-height: 100%;
  color: white;
}

.container-temoins .temoins .zone .mask-zone .wrapper-zone .temoin .btn-temoin .btn-temoin-bio {
  background: url(../images/ui/picto-bio.png) no-repeat left top 10px;
  width: 30px;
  padding-left: 13px;
  padding-top: 12px;
}

.container-temoins .temoins .zone .mask-zone .wrapper-zone .temoin .btn-temoin .btn-temoin-bio p {
  font-family: "proxima_nova_altsemibold", sans-serif;
  font-weight: normal;
  font-size: 13px;
  line-height: 100%;
  color: rgba(0, 0, 0, 0.8);
  cursor: pointer;
}

.container-temoins .temoins .zone .mask-zone .wrapper-zone .temoin .btn-temoin .btn-temoin-bio p:hover {
  text-decoration: underline;
}

.container-temoins .temoins .zone .mask-zone .wrapper-zone .temoin .btn-temoin .btn-temoin-vids {
  background: url(../images/ui/picto-video.png) no-repeat left top 10px;
  padding-left: 30px;
  width: 175px;
  padding-top: 12px;
  padding-bottom: 25px;
}

.container-temoins .temoins .zone .mask-zone .wrapper-zone .temoin .btn-temoin .btn-temoin-vids p {
  font-family: "proxima_nova_altsemibold", sans-serif;
  font-weight: normal;
  font-size: 13px;
  line-height: 90%;
  color: rgba(0, 0, 0, 0.8);
  cursor: pointer;
  margin: 0 0 5px 0;
}

.container-temoins .temoins .zone .mask-zone .wrapper-zone .temoin .btn-temoin .btn-temoin-vids p:hover {
  text-decoration: underline;
}

.container-temoins .temoins .wrapper-textes {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.container-temoins .temoins .wrapper-textes .inner-chrono {
  height: 65%;
  margin: 0 auto;
  max-width: 500px;
  overflow: hidden;
  padding: 0 20px 50px 20px;
  position: relative;
  top: 30px;
  background: url(../images/ui/fond-pop-up.jpg) no-repeat center center;
  background-size: cover;
  overflow: hidden;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}

.container-temoins .temoins .wrapper-textes .close-lightbox {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
  background: #e30613;
  font-family: "proxima_nova_alt_rgbold", sans-serif;
  font-weight: normal;
  font-size: 30px;
  line-height: 28px;
  color: #FFF;
  text-align: center;
  cursor: pointer;
}

.container-temoins .temoins .wrapper-textes .inner-chrono .textes {
  position: relative;
  margin: 40px 20px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.container-temoins .temoins .wrapper-textes .inner-chrono .textes .bio-temoin {
  display: none;
}

.container-temoins .temoins .wrapper-textes .inner-chrono .textes h2 {
  font-family: "proxima_nova_altsemibold", sans-serif;
  font-weight: normal;
  font-size: 24px;
  line-height: 130%;
  color: black;
  margin: 20px 0 0 0;
}

.container-temoins .temoins .wrapper-textes .inner-chrono .textes h3 {
  color: rgba(0, 0, 0, 0.8);
  font-family: "proxima_nova_altsemibold",sans-serif;
  font-size: 24px;
  font-weight: normal;
  line-height: 130%;
  margin: 20px 0 0;
}

.container-temoins .temoins .wrapper-textes .inner-chrono .textes p {
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 16px;
  line-height: 150%;
  color: rgba(0, 0, 0, 0.9);
  margin: 10px 20px;
}

/*-------------------biblio--------------------------------*/
.container-biblio .biblio h2 {
  font-family: "proxima_nova_altsemibold", sans-serif;
  font-weight: normal;
  font-size: 30px;
  line-height: 130%;
  color: rgba(0, 0, 0, 0.8);
  margin: 15px 0;
}

.container-biblio .biblio .item {
  position: relative;
  width: 90%;
  padding-bottom: 25px;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.7);
}

.container-biblio .biblio .item:last-child {
  border-bottom: none;
}

.container-biblio .biblio .item img {
  float: left;
  width: 100px;
  height: auto;
  margin-right: 15px;
  margin-bottom: 5px;
}

.container-biblio .biblio .item h3 {
  font-family: "proxima_nova_altsemibold",sans-serif;
  font-weight: normal;
  font-size: 20px;
  line-height: 115%;
  color: rgba(0, 0, 0, 0.8);
  margin: 20px 0 10px 0;
}

.container-biblio .biblio .item p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 130%;
  color: rgba(0, 0, 0, 0.8);
  margin: 5px 20px;
}

.container-biblio .biblio .item .info {
  font-family: "proxima_nova_altsemibold", sans-serif;
  font-weight: normal;
  font-size: 14px;
  line-height: 130%;
  color: black;
  margin: 5px 20px;
}

/*-------------------lexique--------------------------------*/
.container-lexique .lexique h2 {
  font-family: "proxima_nova_altsemibold", sans-serif;
  font-weight: normal;
  font-size: 30px;
  line-height: 130%;
  color: rgba(0, 0, 0, 0.8);
  margin: 15px 0;
}

.container-lexique .lexique .item {
  position: relative;
  width: 90%;
  padding-bottom: 25px;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.7);
}

.container-lexique .lexique .item:last-child {
  border-bottom: none;
}

.container-lexique .lexique .item h3 {
  font-family: "proxima_nova_altsemibold",sans-serif;
  font-weight: normal;
  font-size: 20px;
  line-height: 115%;
  color: rgba(0, 0, 0, 0.8);
  margin: 20px 0 10px 0;
}

.container-lexique .lexique .item p {
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 16px;
  line-height: 130%;
  color: rgba(0, 0, 0, 0.8);
  margin: 5px 20px;
}

/*-------------------TEMOINS--------------------------------*/
.container-chrono .chrono {
  position: relative;
  width: 80%;
  height: 80%;
  margin: 0px auto;
  background: #333;
  background-size: cover;
  padding: 0px;
  overflow: hidden;
}

.container-chrono .chrono h2 {
  font-family: "proxima_nova_altsemibold", sans-serif;
  font-weight: normal;
  font-size: 36px;
  line-height: 100%;
  color: black;
  margin: 10px 0 5px 0;
  z-index: 20;
}

.container-chrono .chrono .wrapper-chrono {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.container-chrono .chrono .wrapper-chrono .wrapper-frise {
  position: relative;
  height: 100%;
  left: 0px;
  -webkit-transition: all .2s linear;
  -moz-transition: all .2s linear;
  -o-transition: all .2s linear;
  transition: all .2s linear;
}

.container-chrono .chrono .wrapper-chrono .frise-chrono {
  position: relative;
  height: 100%;
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  -o-transform-origin: top left;
  transform-origin: top left;
}

.container-chrono .chrono .wrapper-chrono .frise-chrono .point-frise {
  position: absolute;
  cursor: pointer;
}

.container-chrono .chrono .wrapper-chrono .frise-chrono .date-frise {
  position: absolute;
  cursor: pointer;
  font-family: "proxima_nova_altsemibold", sans-serif;
  font-weight: normal;
  font-size: 16px;
  color: #000;
  min-width: 80px;
}

.container-chrono .chrono .wrapper-textes {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.container-chrono .chrono .wrapper-textes .inner-chrono {
  height: 65%;
  margin: 0 auto;
  max-width: 500px;
  overflow: hidden;
  padding: 0 20px 50px 20px;
  position: relative;
  top: 30px;
  background: url(../images/ui/fond-pop-up.jpg) no-repeat center center;
  background-size: cover;
  overflow: hidden;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}

.container-chrono .chrono .wrapper-textes .close-lightbox {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
  background: #e30613;
  font-family: "proxima_nova_alt_rgbold", sans-serif;
  font-weight: normal;
  font-size: 30px;
  line-height: 28px;
  color: #FFF;
  text-align: center;
  cursor: pointer;
}

.container-chrono .chrono .wrapper-textes .inner-chrono .textes {
  position: relative;
  margin: 40px 20px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.container-chrono .chrono .wrapper-textes .inner-chrono .textes .chronologie {
  display: none;
}

.container-chrono .chrono .wrapper-textes .inner-chrono .textes h2 {
  font-family: "proxima_nova_altsemibold", sans-serif;
  font-weight: normal;
  font-size: 24px;
  line-height: 130%;
  color: black;
  margin: 20px 0 0 0;
}

.container-chrono .chrono .wrapper-textes .inner-chrono .textes h3 {
  font-family: "proxima_nova_altsemibold", sans-serif;
  font-weight: normal;
  font-size: 18px;
  line-height: 130%;
  color: black;
  margin: 20px 20px;
}

.container-chrono .chrono .wrapper-textes .inner-chrono .textes p {
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 16px;
  line-height: 150%;
  color: rgba(0, 0, 0, 0.9);
  margin: 10px 20px;
}

.container-chrono .chrono .wrapper-textes .inner-chrono .textes sup {
  font-size: 10px;
  vertical-align: super;
}

.container-chrono .chrono .wrapper-textes .inner-chrono .textes ul {
  list-style-type: disc;
  padding-left: 40px;
}

.container-chrono .chrono .wrapper-textes .inner-chrono .textes li {
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 16px;
  line-height: 150%;
  color: rgba(0, 0, 0, 0.9);
  margin: 5px 20px;
}

.container-chrono .chrono .btn {
  position: absolute;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 90px;
  color: #000;
  text-align: center;
  line-height: 100%;
  cursor: pointer;
  width: 50px;
  top: 55%;
}

.container-chrono .chrono .btn:hover {
  color: #333;
}

.container-chrono .chrono .btn-suivant {
  right: 0px;
}

.container-chrono .chrono .btn-precedant {
  left: 0px;
}

.btn-carte {
  position: absolute;
  top: 10px;
  right: 80px;
  background: url(../images/ui/picto-carte.png) no-repeat center left;
  height: 40px;
  cursor: pointer;
  padding-left: 20px;
}

.btn-carte p {
  font-family: "proxima_nova_altsemibold", sans-serif;
  font-weight: normal;
  font-size: 20px;
  line-height: 150%;
  color: rgba(0, 0, 0, 0.9);
  margin: 10px 20px;
  line-height: 20px;
}

.btn-info {
  position: absolute;
  top: 10px;
  right: 20px;
  background: url(../images/ui/picto-info.png) no-repeat center left;
  height: 40px;
  width: 40px;
  cursor: pointer;
}

/*-------------------carte--------------------------------*/
.container-carte .mc-carte {
  position: relative;
  width: 90%;
  height: 90%;
  margin: 0px auto;
  background: #333;
  padding: 0px;
  overflow: hidden;
}

.container-carte .mc-carte .wrapper-carte {
  position: relative;
  width: 100% !important;
  height: 100%  !important;
}

.container-carte .mc-carte .wrapper-carte .btns-carte {
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgba(0, 0, 0, 0.7);
  cursor: pointer;
}

.container-carte .mc-carte .wrapper-carte .btns-carte:hover {
  opacity: .5;
}

.container-carte .mc-carte .wrapper-carte .btns-carte.btn-moins {
  top: 30px;
  left: 30px;
}

.container-carte .mc-carte .wrapper-carte .btns-carte.btn-plus {
  top: 60px;
  left: 30px;
}

.container-carte .mc-carte .wrapper-carte .btns-carte.btn-haut {
  top: 100px;
  left: 30px;
}

.container-carte .mc-carte .wrapper-carte .btns-carte.btn-bas {
  top: 130px;
  left: 30px;
}

.container-carte .mc-carte .wrapper-carte .btns-carte.btn-gauche {
  left: 6px;
  top: 113px;
}

.container-carte .mc-carte .wrapper-carte .btns-carte.btn-droit {
  left: 54px;
  top: 113px;
}

.container-carte .mc-carte .wrapper-carte .btns-carte p {
  font-family: "proxima_nova_altsemibold", sans-serif;
  font-weight: normal;
  font-size: 15px;
  line-height: 17px;
  color: #FFF;
  text-align: center;
  pointer-events: none;
}

.container-carte .mc-carte .wrapper-carte .btn-plus p {
  line-height: 19px;
}

.container-carte .mc-carte .wrapper-carte .fond-carte {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-transition: width .2s  linear, height .2s linear;
  -moz-transition: width .2s linear, height .2s linear;
  -o-transition: width .2s linear, height .2s linear;
  transition: width .2s linear, height .2s linear;
}

.container-carte .mc-carte .wrapper-carte .fond-carte.all {
  -webkit-transition: all .2s linear;
  -moz-transition: all  .2s linear;
  -o-transition: all  .2s linear;
  transition: all  .2s linear;
}

.container-carte .mc-carte .wrapper-carte .fond-carte img {
  height: 100%;
  width: auto;
}

/*-------------------infos--------------------------------*/
.container-infos .infos h2 {
  font-family: "proxima_nova_altsemibold", sans-serif;
  font-weight: normal;
  font-size: 30px;
  line-height: 130%;
  color: rgba(0, 0, 0, 0.8);
  margin: 15px 0;
}

.container-infos .infos .item {
  position: relative;
  width: 90%;
  padding-bottom: 25px;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.7);
}

.container-infos .infos .item:last-child {
  border-bottom: none;
}

.container-infos .infos .item h3 {
  font-family: "proxima_nova_altsemibold",sans-serif;
  font-weight: normal;
  font-size: 20px;
  line-height: 115%;
  color: rgba(0, 0, 0, 0.8);
  margin: 20px 0 10px 0;
}

.container-infos .infos .item p {
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 16px;
  line-height: 130%;
  color: rgba(0, 0, 0, 0.8);
  margin: 5px 20px;
}

/*-------------------Crédits --------------------------------*/
.container-credits .credits h2 {
  font-family: "proxima_nova_altsemibold", sans-serif;
  font-weight: normal;
  font-size: 30px;
  line-height: 130%;
  color: rgba(0, 0, 0, 0.8);
  margin: 15px 0;
}

.container-credits .credits .item {
  position: relative;
  width: 90%;
  padding-bottom: 25px;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.7);
}

.container-credits .credits .item:last-child {
  border-bottom: none;
}

.container-credits .credits .item h3 {
  font-family: "proxima_nova_altsemibold",sans-serif;
  font-weight: normal;
  font-size: 20px;
  line-height: 115%;
  color: rgba(0, 0, 0, 0.8);
  margin: 20px 0 10px 0;
}

.container-credits .credits .item p {
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 16px;
  line-height: 130%;
  color: rgba(0, 0, 0, 0.8);
  margin: 5px 20px;
}

/*-------------------Liens --------------------------------*/
.container-liens .liens h2 {
  font-family: "proxima_nova_altsemibold", sans-serif;
  font-weight: normal;
  font-size: 30px;
  line-height: 130%;
  color: rgba(0, 0, 0, 0.8);
  margin: 15px 0;
}

.container-liens .liens .item {
  position: relative;
  width: 90%;
  padding-bottom: 25px;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.7);
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 16px;
  line-height: 130%;
  color: rgba(0, 0, 0, 0.8);
  margin: 0px 20px;
}

.container-liens .liens .item:last-child {
  border-bottom: none;
}

.container-liens .liens .item h3 {
  font-family: "proxima_nova_altsemibold",sans-serif;
  font-weight: normal;
  font-size: 20px;
  line-height: 115%;
  color: rgba(0, 0, 0, 0.8);
  margin: 20px 0 10px -20px;
}

.container-liens .liens .item p {
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 16px;
  line-height: 130%;
  color: rgba(0, 0, 0, 0.8);
  margin: 5px 0px;
}

.container-liens .liens .item ul {
  list-style-type: disc;
  padding-left: 40px;
  margin-top: 20px;
}

.container-liens .liens .item li {
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-size: 16px;
  line-height: 150%;
  color: rgba(0, 0, 0, 0.9);
  margin: 5px 20px;
}

/*-------------------contact --------------------------------*/
.container-contact .contact h2 {
  font-family: "proxima_nova_altsemibold", sans-serif;
  font-weight: normal;
  font-size: 30px;
  line-height: 130%;
  color: rgba(0, 0, 0, 0.8);
  margin: 15px 0;
}

.container-contact .contact label {
  vertical-align: middle;
  font-family: "proxima_nova_altsemibold", sans-serif;
  font-size: 13px;
  padding-left: 26px;
  width: 125px;
  text-transform: uppercase;
  display: inline-block;
}

.container-contact .contact input {
  width: 50%;
  margin-bottom: 20px;
}

.container-contact .contact textarea {
  width: 50%;
  min-height: 200px;
  margin-bottom: 20px;
}

#label_message {
  margin-top: 10px;
  vertical-align: top;
}