@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');


@font-face {
    font-family: 'altehaasgrotesk_regular';
    src: url('/font/AlteHaasGroteskRegular.woff2') format('woff2'),
         url('/font/altehaasgrotesk-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'altehaasgrotesk_bold';
    src: url('/font/AlteHaasGroteskBold.woff2') format('woff2'),
         url('/font/altehaasgrotesk-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.containerA {
    position: relative;
    background: none;
    padding: 0px 0px 0px 0px;
    margin-left: auto;
    margin-right: auto;
    width: 1100px;
    height: 100%;
   }


.captionintdiapo{font-size:4.5vw;line-height:4.5vw;color:white;text-align:right; background-color:transparent;padding: 65vh 10vw 2vh 5vw;font-family:'altehaasgrotesk_regular';text-transform:uppercase;}

.animTdiapo {
	animation-duration: 5s;
	/*animation-delay: 0.2s;*/
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
/*
@keyframes fadeInFirst,@keyframes fadeInSecond,@keyframes FadeInFromLeft,@keyframes FadeInFromRight,@keyframes FadeInFromUp,@keyframes FadeInFromUp{
		80%{
		opacity:1;
		}
		100%{
		opacity:0;
		}
	}*/

@keyframes fadeInTitle {
	0% {
	opacity: 0;
	}
	5% {/*15*/
	opacity: 0;
		transform: translateY(-150px);
	}	
	10% {/*16*/
		opacity: 1;
	}
	15%{
		transform: translateY(0px);		
	}
	95%{
	opacity: 1;
	}
	100%{
	opacity: 0;
	}
}
.animTdiapo.fadeInTitle {
	animation-name: fadeInTitle;
}


@keyframes fadeInFirst {
	0% {
	opacity: 0;
	}
	25% {
	opacity: 0;
	}
	30% {
	opacity: 1;
	}
	95%{
	opacity: 1;
	}
	100%{
	opacity: 0;
	}
}
.animTdiapo.fadeInFirst {
	animation-name: fadeInFirst;
}

@keyframes fadeInSecond {
	0% {
	opacity: 0;
	}
	55% {
	opacity: 0;
	}
	60% {
	opacity: 1;
	}
	95%{
	opacity: 1;
	}
	100%{
	opacity: 0;
	}
}
.animTdiapo.fadeInSecond {
	animation-name: fadeInSecond;
}
/*
@keyframes FadeInFromLeft {
	0% {
	opacity: 0;
	}
	25% {
	opacity: 0;
	transform: translateX(200px);

	}
	35% {
	opacity: 1;
	transform: translateX(0px);
	}
}
.animTdiapo.FadeInFromLeft {
	animation-name: FadeInFromLeft;
}

@keyframes FadeInFromdown {
	0% {
	opacity: 0;
	}
	55% {
	opacity: 0;
	transform: translateY(200px);

	}
	65% {
	opacity: 1;
 	transform: translateY(0px);
	}
}
.animTdiapo.FadeInFromdown {
	animation-name: FadeInFromdown;
}

*/
@keyframes FadeInFromRight {
	0% {
	opacity: 0;
	}
	55% {
	opacity: 0;
	transform: translateX(200px);

	}
	65% {
	opacity: 1;
	transform: translateX(0px);
	}
}
.animTdiapo.FadeInFromRight {
	animation-name: FadeInFromRight;
}
/*
@keyframes FadeInFromUp {
	0% {
	opacity: 0;
	}
	25% {
	opacity: 0;
	transform: translateY(-200px);

	}
	35% {
	opacity: 1;
 	transform: translateY(0px);
	}
}
.animTdiapo.FadeInFromUp {
	animation-name: FadeInFromUp;
}
*/

.pic{background-size:cover;background-position:center;width:100vw;height:100vh}


* {
  margin: 0;
  padding: 0;
}

.pic-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  /*animation créé selon le nombre de diapos*/

}
figurecaption {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #fff;
}

.pic-0 {
  opacity: 1;
}

/* keyframes*/

@keyframes 
slideShow {  0% {
 opacity: 0;
 transform:scale(1);
 /*-ms-transform:scale(1);*/
}
 5% {
 opacity: 1
}
 25% {
 opacity: 1;
}
 30% {
 opacity: 0;
 transform:scale(1.1);
}
 100% {
 opacity: 0;
 transform:scale(1);
}
}
}

@media only screen and (max-width: 767px) {

.captionintdiapo{font-size:5vh;line-height:5vh;color:white;display:inline-block; vertical-align:middle;text-align:right; background-color:transparent;padding: 10vh 5vw 2vh 5vw;text-transform:uppercase;font-family:'altehaasgrotesk_regular'}

		
}