html {
	font-size: 62.5%;
}

:focus, :active { outline: 0; border: 0; }


.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(../images/Preloader_2.gif) center no-repeat;
	background-size: 125px;


}



@font-face {
  font-family: AudiTypeExtended;
  font-style: normal;
  font-weight: 700;
  src: url(https://assets.audi.com/audi-fonts/1/AudiType-ExtendedBold.woff2) format("woff2"), url(https://assets.audi.com/audi-fonts/1/AudiType-ExtendedBold.woff) format("woff");
}
@font-face {
  font-family: AudiTypeExtended;
  font-style: normal;
  font-weight: 400;
  src: url(https://assets.audi.com/audi-fonts/1/AudiType-ExtendedNormal.woff2) format("woff2"), url(https://assets.audi.com/audi-fonts/1/AudiType-ExtendedNormal.woff) format("woff");
}
@font-face {
  font-family: AudiTypeWide;
  font-style: normal;
  font-weight: 700;
  src: url(https://assets.audi.com/audi-fonts/1/AudiType-WideBold.woff2) format("woff2"), url(https://assets.audi.com/audi-fonts/1/AudiType-WideBold.woff) format("woff");
}
@font-face {
  font-family: AudiTypeWide;
  font-style: normal;
  font-weight: 400;
  src: url(https://assets.audi.com/audi-fonts/1/AudiType-WideNormal.woff2) format("woff2"), url(https://assets.audi.com/audi-fonts/1/AudiType-WideNormal.woff) format("woff");
}
@font-face {
  font-family: AudiTypeWide;
  font-style: normal;
  font-weight: 200;
  src: url(https://assets.audi.com/audi-fonts/1/AudiType-WideLight.woff2) format("woff2"), url(https://assets.audi.com/audi-fonts/1/AudiType-WideLight.woff) format("woff");
}


body {background:#000; margin: 0; padding:0;}
body, p, h1, h2 {color:#fff}

h1, h2 {font-family: AudiTypeExtended,sans-serif;font-size: 4.2rem;line-height: 6.6rem; text-align: center;}
p {text-align: center; font-family: AudiTypeWide,sans-serif;   font-size: 1.6rem;    line-height: 2.4rem;margin: 0 auto;}
#content {max-width: 1920px;min-height: 100vh;margin:0 auto; }
span.rtLigne {display:none}
ul,li {list-style: none;}
h1, h2 {
  font-size: 2.1rem;
  line-height: 3rem;
}
p {
  font-size: 1.6rem;
  line-height: 2.4rem;
  width: 92%;
}

.ml p {
  text-align:left;
  widows: 100%;
  margin-bottom: 20px;
  width:100%;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.8rem;
  color: #999;
}

.ml p span {
  font-weight: 700;
}


header {
 /* position:fixed;*/
  background:#1a1a1a;
  width: 72%;
  z-index: 900;
  display: flex;
  padding:0 14%;
  height:74px
}

.header__logo {
  float: left; 
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Calque_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 91.1 39.8' style='enable-background:new 0 0 91.1 39.8;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cg%3E%3Cg id='Symbols'%3E%3C/g%3E%3Cg id='Rings_wh-RGB' transform='translate(0.000000, 0.000000)'%3E%3Cg id='Audi'%3E%3Cpath id='Shape' class='st0' d='M63.1,7c-3.1,0-6,1.1-8.3,2.9C52.5,8.1,49.7,7,46.5,7c-3.1,0-6,1.1-8.3,2.9 C35.9,8.1,33.1,7,29.9,7c-3.1,0-6,1.1-8.3,2.9C19.3,8.1,16.5,7,13.3,7C6.1,7,0.2,12.8,0.2,19.9s5.9,12.9,13.1,12.9 c3.1,0,6-1.1,8.3-2.9c2.3,1.8,5.1,2.9,8.3,2.9c3.1,0,6-1.1,8.3-2.9c2.3,1.8,5.1,2.9,8.3,2.9s6-1.1,8.3-2.9 c2.3,1.8,5.1,2.9,8.3,2.9c7.2,0,13.1-5.8,13.1-12.9S70.3,7,63.1,7z M54.8,25.8c-1.2-1.7-2-3.7-2-5.9s0.7-4.3,2-5.9 c1.2,1.7,2,3.7,2,5.9S56.1,24.2,54.8,25.8z M38.3,25.8c-1.2-1.7-2-3.7-2-5.9s0.7-4.3,2-5.9c1.2,1.7,2,3.7,2,5.9 C40.2,22.1,39.5,24.2,38.3,25.8z M21.7,25.8c-1.2-1.7-2-3.7-2-5.9s0.7-4.3,2-5.9c1.2,1.7,2,3.7,2,5.9S23,24.2,21.7,25.8z M3.2,19.9c0-5.5,4.6-10,10.2-10c2.3,0,4.5,0.8,6.2,2.1c-1.8,2.2-2.8,5-2.8,8s1.1,5.8,2.8,8c-1.7,1.3-3.9,2.1-6.2,2.1 C7.8,29.9,3.2,25.4,3.2,19.9z M23.8,27.9c1.8-2.2,2.8-5,2.8-8s-1.1-5.8-2.8-8c1.7-1.3,3.9-2.1,6.2-2.1c2.3,0,4.5,0.8,6.2,2.1 c-1.8,2.2-2.8,5-2.8,8s1.1,5.8,2.8,8C34.5,29.2,32.3,30,30,30C27.7,29.9,25.5,29.2,23.8,27.9z M40.3,27.9c1.8-2.2,2.8-5,2.8-8 s-1.1-5.8-2.8-8c1.7-1.3,3.9-2.1,6.2-2.1s4.5,0.8,6.2,2.1c-1.8,2.2-2.8,5-2.8,8s1.1,5.8,2.8,8C51,29.2,48.8,30,46.5,30 C44.2,29.9,42.1,29.2,40.3,27.9z M63.1,29.9c-2.3,0-4.5-0.8-6.2-2.1c1.8-2.2,2.8-5,2.8-8s-1.1-5.8-2.8-8c1.7-1.3,3.9-2.1,6.2-2.1 c5.7,0,10.2,4.5,10.2,10S68.7,29.9,63.1,29.9z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
  background-position: 0 50%;
  background-repeat: no-repeat;
  display: block;
  height: 74px;
  width: 125px;
  margin-top: 0;
}

.menu {
  margin: auto 0 auto auto;
  text-align:right;
  /*margin-top: 16px;*/
}

.menu ul a {
  font-family: AudiTypeExtended,sans-serif;
  font-size: 1.4rem;
  line-height: 2.4rem;
  font-weight: 200;
  color:white;
  padding: 0; 
  text-decoration: none;
}


.menu a:hover {
  text-decoration: underline; 
}

.menu ul {
  display: block;
  float: left
}
.menu ul li {
  width:auto;
  float: left
}

.side-scrolling-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  padding: 0 0px 0 0px;
  overflow: hidden;
  display: block;
}

.side-scrolling-title {
  background: #ccc;
}

.container {
  width: 500%;
  height: 100vh;
  display: -webkit-box;
  display: flex;
  flex-wrap: nowrap;
  padding: 0px;
  overflow: hidden;
}

.panel {
  width: 100%;
  text-align: left;
  color: white;
  position: relative;
  overflow: hidden;
}
.panel img {
  max-width: 100%;
  height: auto;
  display: block;
}
.panel p {
  font-weight: 300;
}
.section-1 {
  position: relative;
 width: 100%;
  min-height: 100vh;
}

.section-1 .box {
  position: absolute;
  top: 50%;
  left: 0;
  max-width: 100%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

.section-1 .box img {
  max-width: 100%;
}

.iframe-video-one .play-btn:hover {
  cursor:pointer;
}
.iframe-video-one .play-btn:focus {
  outline:0;
}
.youtube-player {
position: relative;
width: 100%;  
height: 100%;
margin: auto;
cursor: pointer;
}

.youtube-player img {
width: 100%;
}

.youtube-player.fixe:before {
content: '';
position: absolute;
background: url('../images/play.svg') no-repeat;
transition: opacity .2s ease;
top: 50%;
left: 50%;
width: 8%;
height: 15%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.youtube-player.fixe:hover:before {
opacity: .7;
}

.bloc-texte { 
position:relative;
padding: 80px 12%;
width: 76%;
text-align: center;
}

.videoBackground {
position: relative;
background-color: black;
min-height: 25rem;
width: 100%;
overflow: hidden;
}
.videoBackground .blcIframe {
position: relative;
margin-bottom: 40px;
}
.project-trigger {
display: flex;
flex-direction: column;
}

.videoBackground video {
  position: absolute;
  top: 50%;
  left: 17%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;z-index: 0;
  -ms-transform: translateX(-81%) translateY(-50%);
  -moz-transform: translateX(-81%) translateY(-50%);  
  -webkit-transform: translateX(-81%) translateY(-50%); 
  transform: translateX(-81%) translateY(-50%);
  width:100%;
  overflow: hidden;
}

.videoBackground.podlink .bloc-texte h2 {
margin-top:46%
}

.videoBackground.podlink .bloc-texte {
  margin-top: 210px;
  margin-bottom: 50px;
}
.videoBackground .bloc-texte h2, .videoBackground .bloc-texte p {
  text-align: left;
  width:100%
}
.videoBackground .bloc-texte p{
  width:70%;
  margin-left:0;
}




.videoBackground.podlink .bloc-texte p{
  width: 100%;

}

.videoBackground iframe {
  width: 80%; 
  margin: 0 auto;  
  padding: 0 0%;
}

.videoBackground.spotify iframe {
  width: 90%;
  margin: 0 5% 0 5%;
}

.videoBackground.podlink iframe {
  width: 100%;
}

.videoBackground .blcIframe.spotify iframe {

  padding:0;
}


.blcEnd {
  position:relative; 
  background: rgb(0,0,0);	
  background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(23,23,23,1) 78%);
 /* height: 75vh; */
}

.blcEnd .pImage {
  position: relative;
  width: 100%;
}

.blcEnd h2, .blcEnd p {
  text-align: left;
}

.blcEnd p {
  width:100%;
  margin-bottom: 40px;
}

.blcEnd a {
  max-width: 100%;
  background-color: #000;
  border: 1px solid white;
  position: relative;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  font-family: AudiTypeWide,sans-serif;
  font-weight: 400;
  justify-content: center;
  overflow: hidden;
  align-items: center;
  padding:calc(12px + 3px) 30px;
  font-size: 1.6rem;
  line-height: 2.4rem;
  width:100%;
}

.blcEnd a span {color: #fff;
  display: block;
  text-align: center;
  cursor: pointer;
  max-width: 100%;
}

.blcEnd .pImage .img1 {
  position:absolute; 
  left: 0; 
  top:200px; 
  width:60%;
}
.blcEnd .pImage .img2 {
  position:absolute; 
  right: 0; 
  top:70px; 
  width:70%;
}

.degrade {
  background: linear-gradient(0deg,#000,transparent 40%,transparent 60%,#000);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100000;
  width: 100%;
  height: 100%;
}
.degrade2 {
  background: linear-gradient(0deg,#000,transparent 30%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100000;
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  h1, h2 {
    font-size: 2.4rem;
    line-height: 3.6rem;
  }

  .videoBackground.spotify iframe {
    margin: 0 0 10% 30%;
    width:60%
  }

  .videoBackground {
    width: 100%;
    display: flex;
  }
  .videoBackground video {
    position: absolute;
    top: 5%;
    left: 50%;
    min-width: 100%;
    min-height: 23%;
    width: auto;
    height: auto;
    z-index: 0; 
    -ms-transform: translateX(-50%) translateY(11%);  
    -moz-transform: translateX(-50%) translateY(11%);  
    -webkit-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%);
    opacity: 60%;
  }

  .videoBackground.spotify video  {
    top: 50%;
    opacity:1
  }
  .videoBackground .blcIframe {
    position: relative;
    z-index: 2;
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 1;
    order: 1;
    text-align: center;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    width: 50%;
    padding: 0;
    margin-top: 120px;
  }
  .videoBackground.podlink .blcIframe {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 2;
    order: 2;
    width: 50%;
    padding-left:0;
    margin: 200px 0 0;
    padding-bottom: 20px;
  }

  .videoBackground .bloc-texte, .videoBackground.podlink .bloc-texte {
    position: relative;z-index: 2;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 2;
    order: 2;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    width: 45%;
    padding: 0px;
    margin-bottom: 50px;
    margin-top: 200px;
    margin-left: 5%;
  }

  .videoBackground.podlink .bloc-texte {
    width: 40%;
    margin-left: 10%;
  }

  .blcEnd { 
    display: flex; 
    width: 100%;
  }
  .blcEnd .pContent {
    position: relative;
    z-index: 2;
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 1;
    order: 1;
    width: 30%;
    padding-top: 6%;
    padding-left: 12%;
    padding-right: 8%;
    margin-bottom: 50px;
  }

  .blcEnd .pImage {
    width: 70%;  
    position: relative; 
    z-index: 2; 
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 2;
    order: 2;
    width: 50%;
    text-align: center;
    padding-top: 6%;
  }
}



@media (max-width: 480px) {
  .versionMob {
    display: block;
  }
  .versionDesk {
    display: none;
  }
}
@media (max-width: 480px) {
  .videoBackground.podlink iframe {
    height: 1030px;
  }
}

@media (min-width: 481px) {
  .versionMob {
    display: none;
  }
  .versionDesk {
    display: block;
    position:relative
  }
}

@media (max-width: 449px) {

  .videoBackground.podlink iframe {
    height: 990px;
  }
  /*.menu ul a {
    padding: 0 12px;
  }*/

  .menu ul a {

    font-size: 1.22rem;
  }
}

@media (min-width: 450px) and (max-width: 481px) {
  .videoBackground.podlink iframe {
    height: 1000px;
  }
}

@media (min-width: 482px) and (max-width: 594px) {
  .videoBackground.podlink iframe {
    height: 1030px;
  }
}

@media (min-width: 595px) and (max-width: 629px) {
  .videoBackground.podlink iframe {
    height: 1090px;
  }
}
  @media (min-width: 630px) and (max-width: 767px) {
  .videoBackground.podlink iframe {
    height: 1090px;
  }
}

@media (max-width: 779px) {
  header {
    width: 90%;
    padding: 0 5%;
  }
 /*.menu {
  margin-top: 11px;
  text-align:right
  }*/
  .header__logo {
    width: 114px;
    height:74px;
  }
}

@media (max-width: 767px) {
/* header {
    width: 80%;
    padding: 0 10%;
  }
  .menu ul a {
    font-size: 1.8rem;
  }
  .header__logo {
    width: 120px;
  }*/
  .spotSection {
    margin-top:50px
  }
  .spotSection .bloc-texte {
    padding-top: 23%;
  }
  .blcEnd .pContent {
    margin: 10% 10% 5%;
  }
  .artSilence video {
  width:100%
  }

  .videoBackground .bloc-texte p {
    width: 100%;
  }

  .videoBackground.podlink h2 span.rtLigne {
    display:inline;  
  }

  .blcEnd .pImage .img1,   .blcEnd .pImage .img2 {
    margin-top:40px;
    padding-bottom: 40px;
    width:45%;
  }
  .blcEnd .pImage .img1 {
    left:10%
  }
  .blcEnd .pImage .img2 {
    right:10%
  }

  .blcEnd .pImage {
    /* height: 60vh;*/
    height:440px;
  }
  .bloc-texte.ml {
    padding: 4% 5%;
    width: 90%;
}

}

@media (min-width: 768px) {
  .blcEnd a {
    max-width: 60%;
  }
  /*h1 {
  font-size: 3.6rem;
  line-height: 4.8rem;
  margin-top:0;
    }
*/
   /* p.intro {
      font-size: 1.8rem;
      line-height: 2.6rem;
    }*/

  h1, h2 {
  font-size: 2.4rem;
  line-height: 3.6rem;
  margin-top:0;
  }
  span.rtLigne {display:inline  }

  .blcEnd .pImage {
    height: 50vh;
}
}

@media (min-width: 1024px) {
 /* h1 {
  font-size: 4.2rem;
  line-height: 6rem;
  }*/
 /* p.intro {
    font-size: 2rem;
    line-height: 2.7rem;
  }*/

  h1, h2 {
    font-size: 3rem;
    line-height: 4.2rem;
  }

  .videoBackground.podlink .bloc-texte h2 {
    margin-top: 45.5%;
  }
  .blcIframe.spotify {
    margin-top: 120px; 
   }
   .blcEnd .pImage .img1,   .blcEnd .pImage .img2 {
    padding-bottom: 200px;
  };
}

@media (min-width: 1440px) {
  h1, h2 {
    font-size: 3.6rem;
    line-height: 5.4rem;
  }	
  .videoBackground.podlink .bloc-texte h2 {
    margin-top: 29.5%;
  }
}

@media (min-width: 1509px) {

  .videoBackground.podlink .bloc-texte h2 {
    margin-top: 26.5%;
  }
}

@media (min-width: 1920px) {
  /*h2 { 
  font-size: 4.2rem;
  line-height: 5.6rem;
}*/
  p {width: 75%}
}

@media (max-width: 767px) {
  .videoBackground.podlink iframe {
    padding: 0 0;
  }

  .videoBackground video {
    width: 340%;
    height: 110%;
    top: 36%;
    left: 25%;
    -ms-transform: translateX(-25%) translateY(-75%);
    -moz-transform: translateX(-25%) translateY(-75%);
    -webkit-transform: translateX(-25%) translateY(-75%);
    transform: translateX(-25%) translateY(-75%);
    opacity:60%;
  }

  .videoBackground.spotify video {
    opacity: 100;
}

  .videoBackground.podlink iframe {
    margin-top: 0;
  }

  .videoBackground.podlink .bloc-texte {
    padding: 0 12% 10%;
  }

}

@media (min-width: 768px) and (max-width: 1023px) {
  .blcEnd .pImage .img2 {
    right: 80px;
    top: 116px;
    width: 60%;
  }
  .blcEnd .pImage .img1 {
      width: 45%;
      top: 250px;
  }
 
  .videoBackground.podlink iframe {
   height:990px;
    width:80%;
  }
  .videoBackground .bloc-texte p {
    width: 100%;
  }
  .videoBackground.podlink .bloc-texte {
    margin-bottom: 50px;
  }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .blcEnd .pImage .img1 {
    left: 0; 
    top:300px; 
    width:45%;
  }
  .blcEnd .pImage .img2 {
    right: 100px; 
    top:120px; 
    width:55%;
  }
  .videoBackground.podlink iframe {
    width:80%;
    height: 990px;
  }
  .videoBackground .bloc-texte p {
    width: 100%;
  }
}
@media (min-width: 1130px) and (max-width: 1508px) {
  .videoBackground.podlink iframe {
     width:55%;
     height: 990px;
   }
}

@media (min-width: 1509px) {
  .videoBackground.podlink iframe {
     width:50%;
     height: 990px;
   }
}

@media (min-width: 1440px) {
  .blcEnd .pImage .img1 {
    left: 0;
    top: 350px;
    width: 40%;
  }
  .blcEnd .pImage .img2 {
    right: 190px;
    top: 150px;
    width: 50%;
  }
  .videoBackground.podlink .bloc-texte p {
    width: 100%;
  }  
}