/* feuilles de style */

body {
    color: #00405a;
}

/* Startscreen */

.project-name-21e {
    width: auto;
    font-size: 3.6rem;
    color: #fff;
}

.project-name-21e {
    display: inline-block;
    font-weight: bold;
    line-height: 1;
}

.project-name-21e {
    text-transform: uppercase;
}

sup{
    text-transform: none;
}

.project-title {
	color: #fff;
	font-size: 9rem;
}

.bg-black-24 {
     background-color: rgba(0,0,0,0.57);
}

.project-summary {
    color: #fff;
}

.bg-red {
    background-color: #d81e05;
}

.text-red {
    color: #c90c06;
}

.size-30 {
    font-size: 3rem;
}

#start .arrow {
    color: #f1f1f1;
}

/* Intro */

#section1 {
    background-image: url(../../images/bg-intro.jpg);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
}

.blue-title {
    color:  #00405a;
    text-transform: uppercase;
    font-size: 9rem;
    font-weight: 900;
    background: url(../../images/damier.gif) repeat-x left bottom;
    line-height: 1;
    padding-bottom: 28px;
    margin-bottom: 40px;
    display: inline-block;
}

.size-h2 {
    font-size: 6rem;
    line-height: 1.2;
}

#pilote {
    background-image: url(../../images/pilote.png);
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: 625px;
    overflow: hidden;
}

/* Page éditions précédentes */

.block-li {
  width: 273px;
  height: 158px;
  float: left;
  display: block;
  list-style-type: none;
  overflow: hidden;
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

.block-li img {
  position: absolute;
  width: 100%;
  height: 100%;
}

.block-li:hover .block {
  top: 0;
}

.block {
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 10%, #000 30%);
  background: -moz-linear-gradient(top, rgba(0,0,0,0) 10%, #000 30%);
  background: -o-linear-gradient(top, rgba(0,0,0,0) 10%, #000 30%);
  background: -ms-linear-gradient(top, rgba(0,0,0,0) 10%, #000 30%);
  background: linear-gradient(to bottom, rgba(0,0,0,0) 10%, #000 30%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 108px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.block-h1 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: #fff;
  padding-top: 20px;
  position: relative;
  left: 10px;
}

.block-p {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.2;
  color: #fff;
  position: absolute;
  left: 10px;
  right: 10px;
}

.block-credits {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  position: absolute;
  bottom: 0;
  left: 10px;
}

/* Chapitre 1-1 History */

.history {
  width: 100%;
}

.h-date {
  font-weight: 900;
  font-size: 60px;
  text-align: center;
}

.history-date img {
  margin: 0 auto;
}

.history-2, .history-3 {
  display: block;
}

/* Chapitre 2 */

.h-large {
  padding-bottom: 100px;
}

.text-blue {
  color: #a2d1e3;
}

.carousel-indicators{
  bottom: -5rem;
  transform: translateX(-50%);
}

.carousel-indicators .active {
    background-color: #cc4543;
    border-color: #002a40;
}

.carousel-indicators li {
  border-color: #ecf6f9;
}

/* Chapitre 3 */

.sous-titre {
    font-style: italic;
    font-weight: bold;
    font-size: 3.6rem;
}
.italic {
    font-style: italic;
}

/* Galerie */

.color-title {
  color: #f1f1f1;
}

.bg-blue {
  background-color: #002a40;
  height: auto;
}

.movie-list {
  margin: 0 auto;
      display: none;
}

.movie-trigger {
    opacity: 0.25;
    filter: alpha(opacity=25);
    cursor: pointer;
    transition: all 0.2s;
}

.movie-trigger.hover, .movie-trigger.active {
    opacity: 1;
    filter: alpha(opacity=100);
}

.movie-desc .h3 {
    line-height: 1;
}

.movie-title {
    font-family: 'Open Sans';
    font-size: 3.6rem;
    font-weight: 900;
    line-height: 1;
    color: #a2d1e3;
}

.movie-preview {
    -moz-box-shadow: 6px 6px 10px 0px #001a27;
    -webkit-box-shadow: 6px 6px 10px 0px #001a27;
    -o-box-shadow: 6px 6px 10px 0px #001a27;
    box-shadow: 6px 6px 10px 0px #001a27;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#001a27, Direction=135, Strength=10);
}

.movie-block {
  color: #a2d1e3;
}

/* Conclusion*/

.bloc-blanc, .bloc-blanc2 {
  background-color: #fff;
  width: 100%;
  max-width: 860px;
  border: 1px solid #2a5b6f;
  padding: 30px;
  box-shadow: 4px 4px 12px -5px #000000;
}

.img1, .img2{
  padding-bottom: 15px;
}

.img3, .img4{
  padding-top: 15px;
}

.colone1 {
  padding-right: 15px;
}

.colone2 {
  padding-left: 15px;
}

.bloc-blanc2 {
  min-height: 640px;
}

.bg-gris {
  background-color: #e7e7e7;
  min-height: 68px;
  width: 100%;
}

.text-date {
  font-weight: bold;
  color: #00405a;
  line-height: 68px;
  padding-left: 15px;
  font-size: 30px;
}

.text-bleu-uc {
  text-transform: uppercase;
  color: #1b7ab8;
  font-weight: bold;
  font-size: 20px;
  padding-left: 15px;
}

.mb18 {
  margin-bottom: 18px;
}

.lh1 {
  line-height: 68px;
}

.lh2 {
  line-height: 1,5;
}

/* Background bleu */

#bg-pilote {
  background: url(../../images/bg-bleu/bg-bleu1.gif) no-repeat center;
  background-size: auto 100%;
}

#section1-2 {
  background: url(../../images/bg-bleu/bg-bleu2.gif) no-repeat center;
  background-size: auto 100%;
}

#bg-accident {
  background: url(../../images/bg-bleu/bg-bleu3.gif) no-repeat center;
  background-size: auto 100%;
}

#section4 {
  background: url(../../images/bg-bleu/bg-bleu4.gif) no-repeat center right;
  background-size: auto 100%;
}

/* Responsive */

@media screen and (max-width: 768px) {
  .blue-title {
        font-size: 4rem;
    }

  .size-h2 {
        font-size: 4rem;
    }

  .img3 {
      padding-bottom: 15px;
    }

  .colone1 {
      padding-right: 0;
      margin-bottom: 15px;
    }

  .colone2 {
      padding-left: 0;
    }

  .bloc-blanc p {
      max-width: 540px;
    }
}

@media screen and (max-width: 960px) {
    #pilote {
      background-position: 390px bottom;
    }

    .red-mt {
      margin-top: 80px;
    }

    .item-media {
      margin-bottom: 50px;
    }

    .size-30, .movie-title, .img-caption {
      padding-left: 3rem;
    } 

    .pb-tb {
      padding-bottom: 20px;
    }
}

@media screen and (max-width: 1145px) {
  .movies-container {
    padding-top: 0;
  }
}

@media screen and (min-width: 1280px) {
  .movie-title {
    font-size: 6rem;
  }
}

@media screen and (min-width: 960px) {
    .movies-container {
        position: relative;
        width: 100%;
        padding-top: 28%;
    }
    .movie-list {
        display: block;
    }
    .movie-title {
        font-size: 4.2rem;
    }
    .movie-block {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        display: none;
    }
    .movie-desc {
        padding-left: 2.4rem;
        float: right;
    }
    .carousel.full-width .item-media {
        position: relative;
        padding-bottom: 32%;
    }
    .carousel iframe, .carousel img {
        absolute: top 0 left 0;
        width: 100%;
        height: 100%;
    }
}

/* Responsive History */

@media screen and (min-width: 960px) {

  .history-date {
    position: relative;
    height: 350px;
    padding-bottom: 72px;
  }

  .history-date img {
    margin: -30px auto 0 auto;
  }

  .h-date {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 40px;
    font-weight: bold;
  }

  .history {
    background-image: url(../../images/dates/bandeau-history.png);
    background-repeat: repeat-x;
    background-position: 0 75%;
  }

  .history-2, .history-3 {
    display: none;
  }

  .size-h2b {
    font-size: 6rem;
    line-height: 1;
  }

}

@media screen and (max-width: 960px) {
  .project-title {
    font-size: 6rem;
  }

  .history a {
    display: none;
  }

}