* {
    margin: 0;
    padding: 0;
}

body{
	background: url(img/fond-gris.jpg);
	background-attachment: fixed;
	background-size: cover;
	height: 100vw;


   
}


@font-face{
	font-family: fahkwang;
	src:url(fonts/Fahkwang-Light.ttf);
	}
.page-wrapper{
	padding: 20px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
 
}
div{
	display:block;
}
.intro{
  margin-bottom: 0px;
}
.intro:before {
    content: "en tournée toute l'année";
    display: block;
    width: 250px;
    height: 30px;
    position: sticky;
   
    left: 3%;
     color:rgba(250,250,250,0.5);
    letter-spacing: 0.5em;
    font-size: 1.4rem;
    font-weight: normal;
    margin: 0.5em 0 3em;
    font-family: fahkwang;
    
    background: transparent url(s/czg.svg) no-repeat -184px -99px;
}

header img{

	width: 300px;
	height: auto;
	float: right;
	padding-right:80px;
  animation: move 0.8s 1;
  -ms-animation: move 0.8s 1;
  -webkit-animation: move 0.8s 1;
  -0-animation: move 0.8s 1;
  -moz-animation: move 0.8s 1;
  animation-delay:2s; 
 animation-timing-function: (0,jump-end);
 -ms-animation-timing-function:ease-out;
 -moz-animation-timing-function:ease-out;
 -webkit-animation-timing-function:ease-out;
  position: relative;
}

@-webkit-keyframes move {
  0% {
     /*-webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    -o-transform-origin: bottom left;
    transform-origin: bottom left;*/
     transform: scale3d(0.1,0.1,0.1 );

          -ms-transform: scale3d(0.1,0.1,0.1 );
    /* IE 9 */
    
    -webkit-transform: scale3d(0.1,0.1,0.1 );
    /* Safari and Chrome */
    
    -o-transform: scale3d(0.1,0.1,0.1 );
    /* Opera */
    
    -moz-transform: scale3d(0.1,0.1,0.1 );
    /* Firefox */
  }

  


 100% {
    transform: scale3d(1,1,1);
      
    -ms-transform: scale3d(1,1,1);
    /* IE 9 */
    
    -webkit-transform: scale3d(1,1,1);
    /* Safari and Chrome */
    
    -o-transform: scale3d(1,1,1);
    /* Opera */
    
    -moz-transform: scale3d(1,1,1);
    /* Firefox */
  }
}



h1, h2{
	font-family: fahkwang;
}
.play h2{
  display: flex;
  align-items: center;
  justify-content: center;
    letter-spacing: 0.2em;
    font-size: 1.4rem;
    line-height: 1.6;
    font-weight: 269;
    padding-top: 15px;
    padding-bottom: 20px;
}

ul{
  padding-top: 20px;
}
ul a{
  display:flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  font-family: fahkwang;
   text-align: center;
   letter-spacing: 0.1em;
    font-size: 1.4rem;
    line-height: 2.6;
    font-weight: 269;
    
}


.summary p {
   
    letter-spacing: 0.1em;
    font-size: 1.8rem;
    line-height: 1.6;
    font-weight: 300;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-family: fahkwang;
}
.play2 p{
  letter-spacing: 0.1em;
    font-size: 1.1rem;
    line-height: 1.6;
    font-weight: 300;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-family: fahkwang
}


.sec6 p{
letter-spacing: 0.1em;
    font-size: 1.2rem;
    line-height: 1.6;
    font-weight: 300;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;

    font-family: fahkwang;

}


/*[role="banner"] h1:before {
    content: ;
    background-color: #FC2A17;
    height: 169px;
    border-radius: 50%;
    color: white;
    width:55vw;
    visibility: visible;
    display: block;
    margin-top: 40px;
     font-size: 2.4rem;
    font-weight: bolder;
    display: flex;
    align-items: center;
    justify-content: center;
}*/
[role="banner"] h1:after {
    content: "stoned ..................kids"; 
    visibility: visible;
    display: block;
    margin-top: 90px;
    color: rgba(250,250,250,0.5);
    letter-spacing: 0.5em;
    font-size: 1.4rem;
    font-weight: normal;
   
    
}

nav{
	display:flex;
	justify-content: space-between;
  align-items: flex-start;
	width: 35%;
  
}
.container {
  position: relative;
  width: auto;
  padding: 25px;
}

.image {
  display: block;
  width: 89px;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .1s ease;

 
}

.container:hover .overlay {
  opacity: 1;
}
.container:hover .image {
  opacity: 0;
}


.text {
  color: rgb(252 36 23);
  font-size: 1.1rem;
  font-weight: 300;
  font-family: fahkwang;
  position: absolute;
  top: 50%;
  margin-left: 60px;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
 
}
.text a{
color: black;
 font-size: 1.1rem;
  font-weight: 300;
  font-family: fahkwang;
  text-decoration: none;
   text-align: center;
}

.slider {
  width: 400px;
  height: 650px;
  position: absolute;
  
  padding-left: 100px;

}

.slide1,.slide2,.slide3,.slide4,.slide5,.slide6,.slide7 {
  position: absolute;
  width: 400px;
  height: 650px;
  padding-right: 60px;
  padding-bottom: 20px;
  border-style: solid;
  border-color: white;
 /* border-color: rgb(252 36 23);*/
  border-width: 1px;
  border-radius: 1%;
 
}

.slide2 {
  background: url(img/Alex.jpg)no-repeat center;
      background-size: cover;
    animation:fade2 15s infinite;
-webkit-animation:fade2 15s infinite;
}
.slide3 {
    background: url(img/Benoit.png)no-repeat center;
      background-size: cover;
    animation:fade3 15s infinite;
-webkit-animation:fade3 15s infinite;
}
.slide4 {
    background: url(img/Laurent.png)no-repeat center;
      background-size: cover;
    animation:fade4 15s infinite;
-webkit-animation:fade4 15s infinite;
}
.slide5 {
    background: url(img/Marianne.png)no-repeat center;
      background-size: cover;
    animation:fade5 15s infinite;
-webkit-animation:fade5 15s infinite;
}
.slide6 {
    background: url(img/Seb.png)no-repeat center;
      background-size: cover;
    animation:fade6 15s infinite;
-webkit-animation:fade6 15s infinite;
}
.slide7 {
    background: url(img/Philippe.png)no-repeat center;
      background-size: cover;
    animation:fade7 15s infinite;
-webkit-animation:fade7 15s infinite;
}



@keyframes fade2
{
  0%   {opacity:1}
  16% { opacity: 0}
  33% { opacity: 0 }
  49% { opacity: 0 }
  66% { opacity: 0 }
  83% { opacity: 0 }
  100% { opacity: 1}
}
@keyframes fade3
{
  0%   {opacity:0}
  16% { opacity: 1}
  33% { opacity: 0 }
  49% { opacity: 0 }
  66% { opacity: 0 }
  83% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade4
{
  0%   {opacity:0}
  16% { opacity: 0}
  33% { opacity: 1 }
  49% { opacity: 0 }
  66% { opacity: 0 }
  83% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade5
{
  0%   {opacity:0}
 16% { opacity: 0}
  33% { opacity: 0 }
  49% { opacity: 1 }
  66% { opacity: 0 }
  83% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade6
{
  0%   {opacity:0}
 16% { opacity: 0}
  33% { opacity: 0 }
  49% { opacity: 0 }
  66% { opacity: 1 }
  83% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade7
{
  0%   {opacity:0}
  16% { opacity: 0}
  33% { opacity: 0 }
  49% { opacity: 0 }
  66% { opacity: 0 }
  83% { opacity: 1 }
  100% { opacity: 0}
}

.sec2{
padding-top: 30px;
  display: flex;
  justify-content: space-between;

}

.play {
  width: 500px;
  height: auto;
  position: relative;
  top: 69px;
  left: 700px;
   border-style: solid;
  border-color: white;
 /* border-color: rgb(252 36 23);*/
  border-width: 1px;
  border-radius: 1%;
  background-color:rgba(250,250,250,0.5);
  animation:transform 5s 1;
  
 
  
}
.play2 {
  
  height: auto;
  position: relative;
  top: 69px;
   border-style: solid;
  border-color: white;
 /* border-color: rgb(252 36 23);*/
  border-width: 1px;
  border-radius: 1%;
  background-color:rgba(239,192,17,0.5);
  animation:transform 0.5s 1;
  margin-bottom: 150px;
  padding: 10px;
 
  
}

.tech1{

 border-style: solid;
  border-color: white;
 /* border-color: rgb(252 36 23);*/
  border-width: 1px;
  border-radius: 1%;
  background-color:rgba(250,250,250,0.5);
  width: 60vw;
  padding-left: 5px;
  display: flex;
  align-items: center;
  justify-content: center;



}
.tech2{
 border-style: solid;
  border-color: white;
 /* border-color: rgb(252 36 23);*/
  border-width: 1px;
  border-radius: 1%;
  background-color:rgba(250,250,250,0.5);
  padding-left: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.play p{
  font-size: 18px;
}
@-webkit-keyframes transform {
  0% {
     -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    -o-transform-origin: bottom left;
    transform-origin: bottom left;
    transform: translate(15000px, 0)

    
    
    /* Firefox */
  }

  

 100% {
    transform: translate(0, 0)

   
  }
}

.sec7{
  padding-top: 50px;
  padding-left: 20px;
  display: flex;
  align-items: top;
  justify-content: center;
}
.sec8{
  padding: 30px;
  
  
}

.sec8 a{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: fahkwang;
    text-decoration: none;
    text-align: center;
    color: white;
    letter-spacing: 0.1em;
    font-size: 1.2rem;
    font-weight: 269;
    padding-bottom: 8px;

}
.sec3{
  padding-top: 250px;
  padding-left: 20px;
  display: flex;
  align-items: top;
  justify-content: center;
}
.prose{
  width: 65%;
  height: auto;
}
.prose p{
   color: #303030;
    letter-spacing: 0.1em;
    font-size: 1.4rem;
    font-weight: normal;
    margin: 0.3em 0 2em;
    text-align: justify;
}

.titres{
  display:block;
  margin-right: 50px;
}

.titres h2{
 text-align: center;
  font-size: 1.8rem;
}
.titres .container{
  padding-top: 30px;
 
}
.titres .container img{
  width: 80px;
  height: auto;
}
.titres .container a{
  color: white;
    letter-spacing: 0.1em;
    font-size: 1.6rem;
    font-weight: 269;
}

.musiciens{
  display: flex;
  align-items: top;
  justify-content: center;
}

.portrait{
display: flex;
flex-direction: column;
text-align: center;
}

.portrait img{
  width: 169px;
}
 .portrait p{
  font-family: fahkwang;
  font-size: 25px;
  color:white;
}


    .carousel {
    width: 500px;
    height: 332px;
    overflow: hidden;
    border:0px solid #591949;
    border-style: solid;
  border-color: white;
 /* border-color: rgb(252 36 23);*/
  border-width: 1px;
  border-radius: 1%;
    
  }
  .photos {
    width: calc(500px * 13);
    animation: slidein 30s linear infinite ;
    animation-direction: alternate; 

  }
  .photo {
    float: left;
    width: 500px;
    height: 332px;
  }

  @keyframes slidein {
    0% {
      transform: translateX(0);
    }
    7.2% {
      transform: translateX(0);
    }
    14.4% {
      transform: translateX(-500px);
    }
    21.6% {
      transform: translateX(-1000px);
    }
    28.8% {
      transform: translateX(-1500px);
    }
    36% {
      transform: translateX(-2000px);
    }
    43.2% {
      transform: translateX(-2500px);
    }
    50.4% {
      transform: translateX(-3000px);
    }
    57.6% {
      transform: translateX(-3500px);
    }
    64.8% {
      transform: translateX(-4000px);
    }
    72% {
      transform: translateX(-4500px);
    }
    79.2% {
      transform: translateX(-5000px);
    }
    86.4% {
      transform: translateX(-5500px);
    }
    93.6% {
      transform: translateX(-5500px);
    }
    100% {
      transform: translateX(-5500px);
    }
    
  }


 .sec4{
  display: flex;
  justify-content: center;
  margin-top: 50px;
  margin-bottom: 30px;
 }
 .sec4 img{
  width: 169px;
  height: 169px;
 }
.sec5{
  margin-top: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
 }
  .carousel2 {
    height: 500px;
    width: 332px;
    overflow: hidden;
    border:0px solid #591949;
    border-style: solid;
  border-color: white;
 /* border-color: rgb(252 36 23);*/
  border-width: 1px;
  border-radius: 1%;
    
  }
  .photos2 {
    width: calc(332px * 14);
    animation: glisse 30s linear infinite ;
    animation-direction: alternate; 

  }
  .photo2 {
    float: left;
    height: 500px;
    width: 332px;
  }


  @keyframes glisse {
    0% {
      transform: translateX(0);
    }
    6.7% {
      transform: translateX(0);
    }
    13.4% {
      transform: translateX(-332px);
    }
    20.1% {
      transform: translateX(-664px);
    }
    26.8% {
      transform: translateX(-986px);
    }
    33.5% {
      transform: translateX(-1318px);
    }
    40.2% {
      transform: translateX(-1650px);
    }
    46.9% {
      transform: translateX(-1982px);
    }
    53.6% {
      transform: translateX(-2314px);
    }
    60.3% {
      transform: translateX(-2646px);
    }
    67% {
      transform: translateX(-2978px);
    }
    73.7% {
      transform: translateX(-3310px);
    }
    80.4% {
      transform: translateX(-3642px);
    }
    87.1% {
      transform: translateX(-3972px);
       }
    93.8% {
      transform: translateX(-3972px);
    }
    100% {
      transform: translateX(-3972px);
    }
    
  }
  .tech{
    font-size: 40px; 
    background-color: #EFC012;
    color: white; 
    width: 55vw; 
    height: 169px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;"
  } 


@media screen and (min-width: 700px)
{
[role="banner"] h1:after {
    position: absolute;
    top: 15.7em;
    right: 30%;
}
}
@media(max-width:  1050px){

body{background: none;
	background-color: #303036;
}

h1 {color:white;
}
h2 {color:white;
}
.prose p {color:white;
padding: 10px;}

p{color:white;
}
.page-wrapper{
  padding: 30px;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
 
}
.intro:before {
    content: "en tournée toute l'année";
    display: block;
    width: 90vw;
    height: 30px;
    position: sticky;
   
    left: 3%;
    top:1%;
     color:rgba(250,250,250,0.5);
    letter-spacing: 0.5em;
    font-size: 0.8rem;
    font-weight: normal;
    
    font-family: fahkwang;
    
    background: transparent url(s/czg.svg) no-repeat -184px -99px;
}
[role="banner"] h1:before {
    content: "Bienvenue sur notre planète Gamma GT ";
    background-color: #FC2A17;
    height: 105px;
    border-radius: 50%;
    color: white;
    width:85vw;
    visibility: visible;
    display: block;
    margin-top: 0;
    font-size: 1.4rem;
    font-weight: bolder;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.tech{
    font-size: 20px; 
    background-color: #EFC012;
    color: white; 
    width: 85vw; 
    height: 105px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  } 

header img{
  width: 220px;
  height: auto;
  float: right;
  padding-top:100px;
}

.header img{
 width: 220px;
  height: auto;
  float: right;
  margin-top: 150px;
}
h1{
  margin-bottom: -150px;
  margin-left: 30px;
  margin-right: auto;
}
.intro{
  display;flex;
  align-items: center;
  justify-content: center;
}
nav{
  display:flex;
  justify-content: space-between;
  align-items: center;
  width: 90vw;
  padding-left: 30px;
  padding-right: 0;
  padding-bottom: 30px;
  
}
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -20px;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .1s ease;

 
}
.text {
  
  position: absolute;
  top: 50%;
 
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
 
}
.text a{
  color: white;
  font-size: 1.1rem;
  font-weight: 300;
  font-family: fahkwang;
  text-decoration: none;
  text-align: center;
  

}
.container {
  position: relative;
  width: auto;
  padding: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image {
  display: block;
  width: 80px;
  height: auto;
  align-items: center;
  justify-content: center;
}
.summary p {
   
    letter-spacing: 0.1em;
    font-size: 1.1rem;
    line-height: 1.6;
    font-weight: 200;
    display: block;
  
   margin-block-start:-3em;
   
    font-family: fahkwang;
    text-align: justify;
    padding: 10px;
}
.sec2{

  display: block;
  margin-bottom: 10px;
  align-items: center;
  justify-content: center;
  padding: 10px;
 
}
.slider {
  width: 350px;
  height: 560px;
  position: absolute;
  top: 960px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 250px;
 
}

.slide1,.slide2,.slide3,.slide4,.slide5,.slide6,.slide7 {
  position: absolute;
 width: 350px;
  height: 560px;
  border-style: solid;
  border-color: white;
 /* border-color: rgb(252 36 23);*/
  border-width: 1px;
  border-radius: 1%;
  padding: 0;
 
}
.play {
  width: 350px;
  height: auto;
  position: relative;
  top: 629px;
  left:90px;
   border-style: solid;
  border-color: white;
 /* border-color: rgb(252 36 23);*/
  border-width: 1px;
  border-radius: 1%;
  background-color:rgba(250,250,250,0.5);
  animation:transform 5s 1;
  z-index: 100000; 
  
}
.play video{
  width: 230px;
 padding-left: 8.1%;

}
.play img{
  width: 12px;
}
.play h2{
  display: flex;
  align-items: center;
  justify-content: center;
    letter-spacing: 0.2em;
    font-size: 1.1rem;
    line-height: 1.6;
    font-weight: 269;
    padding-top: 15px;
}

ul a{
  display:flex;
  text-decoration: none;
  font-family: fahkwang;
   text-align: center;
   letter-spacing: 0.1em;
    font-size: .9rem;
    line-height: 2.6;
    font-weight: 269;
   
}
.sec3{
  
  display: block;
  align-items: center;
  justify-content: center;
  padding-top: 630px ;
}
.musiciens{
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}
.titres{
 margin-left: 9%;

}
.prose{
  width: 95%;
  height: auto;
}
.prose p{
   /*color: #303030;
*/    letter-spacing: 0.1em;
    font-size: 1.2rem;
    font-weight: normal;
    margin: 0.3em 0 2em;
    text-align: justify;
}
.portrait img{
  width: 139px;
}
 .portrait p{
  font-family: fahkwang;
  font-size: 15px;
  color:white;
}
.sec4 img{
  width: 99px;
  height: 99px;
 }
.sec5{
  margin-top: 0px;
  display: flex;
  align-items: center;
 }
 .tech1{

 border-style: solid;
  border-color: white;
 /* border-color: rgb(252 36 23);*/
  border-width: 1px;
  border-radius: 1%;
  background-color:rgba(250,250,250,0.5);
  width: 90vw;

}
.tech2{
  width: 90vw;
}

.sec6{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
}
.sec7{
 
  padding-left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
}
.sec8 a{
  padding-bottom: 12px;
}
.tech2{
 border-style: solid;
  border-color: white;
 /* border-color: rgb(252 36 23);*/
  border-width: 1px;
  border-radius: 1%;
  background-color:rgba(250,250,250,0.5);
  

  
}

  .carousel {
    max-width: 80%;
    max-height: 80%;
    overflow: hidden;
    border:0px solid #591949;
    border-style: solid;
  border-color: white;
 /* border-color: rgb(252 36 23);*/
  border-width: 1px;
  border-radius: 1%;
    
  }
  .photo {
    max-width:80% ;
   max-height:80%;
   
   float: left;
    
  }
   .photos {
    width: calc(500px * 13);
    animation: slidein 30s linear infinite ;
    animation-direction: alternate; 

  }
  @keyframes slidein {
    0% {
      transform: translateX(0);
    }
    7.2% {
      transform: translateX(0);
    }
    14.4% {
      transform: translateX(-500px);
    }
    21.6% {
      transform: translateX(-1000px);
    }
    28.8% {
      transform: translateX(-1500px);
    }
    36% {
      transform: translateX(-2000px);
    }
    43.2% {
      transform: translateX(-2500px);
    }
    50.4% {
      transform: translateX(-3000px);
    }
    57.6% {
      transform: translateX(-3500px);
    }
    64.8% {
      transform: translateX(-4000px);
    }
    72% {
      transform: translateX(-4500px);
    }
    79.2% {
      transform: translateX(-5000px);
    }
    86.4% {
      transform: translateX(-5500px);
    }
    93.6% {
      transform: translateX(-5700px);
    }
    100% {
      transform: translateX(-5700px);
    }
     .carousel2 {
    max-width: 80%;
    max-height: 80%;
    overflow: hidden;
    border:0px solid #591949;
    border-style: solid;
  border-color: white;
 /* border-color: rgb(252 36 23);*/
  border-width: 1px;
  border-radius: 1%;
    
  }
  .photo2 {
    max-width:80% ;
   max-height:80%;
   float: left;
    
  }
  
}





@media(max-width:  450px){


.page-wrapper{
  padding: 0;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
 
}
.intro:before {
    content: "en tournée toute l'année";
    display: block;
    width: 90vw;
    height: 30px;
    position: sticky;
   
    left: 3%;
    top:1%;
     color:rgba(250,250,250,0.5);
    letter-spacing: 0.5em;
    font-size: 0.8rem;
    font-weight: normal;
    
    font-family: fahkwang;
    
    background: transparent url(s/czg.svg) no-repeat -184px -99px;
}
[role="banner"] h1:before {
    content: "Bienvenue sur notre planète Gamma GT ";
    background-color: #FC2A17;
    height: 105px;
    border-radius: 50%;
    color: white;
    width:85vw;
    visibility: visible;
    display: block;
    margin-top: 0;
    font-size: 1.4rem;
    font-weight: bolder;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.tech{
    font-size: 20px; 
    background-color: #EFC012;
    color: white; 
    width: 85vw; 
    height: 105px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  } 

header img{
  width: 220px;
  height: auto;
  float: right;
  padding-top:30px;
}

.header img{
 width: 220px;
  height: auto;
  float: right;
  margin-top: 150px;
}
h1{
  margin-bottom: -150px;
  margin-left: 30px;
  margin-right: auto;
}
.intro{
  display;flex;
  align-items: center;
  justify-content: center;
}
nav{
  display:flex;
  justify-content: space-between;
  align-items: center;
  width: 100vw;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 30px;
  
}
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -20px;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .1s ease;

 
}
.text {
  
  position: absolute;
  top: 50%;
 
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
 
}
.text a{
  color: white;
  font-size: 1rem;
  font-weight: 300;
  font-family: fahkwang;
  text-decoration: none;
  text-align: center;
  

}
.container {
  position: relative;
  width: auto;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image {
  display: block;
  width: 65px;
  height: auto;
  align-items: center;
  justify-content: center;
}
.summary p {
   
    letter-spacing: 0.1em;
    font-size: 1.1rem;
    line-height: 1.6;
    font-weight: 200;
    display: block;
  
   margin-block-start:-3em;
   
    font-family: fahkwang;
    text-align: justify;
    padding: 10px;

}
.sec2{

  display: block;
  margin-bottom: 10px;
  align-items: center;
  justify-content: center;
  padding: 10px;
 
}
.slider {
  width: 350px;
  height: 560px;
  position: absolute;
  top: 980px;
  padding-left: 0px;
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
 
}

.slide1,.slide2,.slide3,.slide4,.slide5,.slide6,.slide7 {
  position: absolute;
 width: 350px;
  height: 560px;
  border-style: solid;
  border-color: white;
 /* border-color: rgb(252 36 23);*/
  border-width: 1px;
  border-radius: 1%;
  padding: 0;
 
}
.play {
  width: 350px;
  height: auto;
  position: relative;
  top: 629px;
  left:0;
   border-style: solid;
  border-color: white;
 /* border-color: rgb(252 36 23);*/
  border-width: 1px;
  border-radius: 1%;
  background-color:rgba(250,250,250,0.5);
  animation:transform 5s 1;
  z-index: 100000; 
}
.play video{
  width: 230px;
 padding-left: 8.1%;

}
.play img{
  width: 12px;
}
.play h2{
  display: flex;
  align-items: center;
  justify-content: center;
    letter-spacing: 0.2em;
    font-size: 1.1rem;
    line-height: 1.6;
    font-weight: 269;
    padding-top: 15px;
}

ul a{
  display:flex;
  text-decoration: none;
  font-family: fahkwang;
   text-align: center;
   letter-spacing: 0.1em;
    font-size: .9rem;
    line-height: 2.6;
    font-weight: 269;
   
}
.sec3{
  
  display: block;
  align-items: center;
  justify-content: center;
  padding-top: 630px ;
}
.musiciens{
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}
.titres{
 margin-left: 17%;

}
.prose{
  width: 95%;
  height: auto;
}
.prose p{
   
    letter-spacing: 0.1em;
    font-size: 1.2rem;
    font-weight: normal;
    margin: 0.3em 0 2em;
    text-align: justify;
}
.portrait img{
  width: 119px;
}
 .portrait p{
  font-family: fahkwang;
  font-size: 15px;
  color:white;
}
.sec4 img{
  width: 99px;
  height: 99px;
 }
.sec5{
  margin-top: 0px;
  display: flex;
  align-items: center;
 }
 .tech1{

 border-style: solid;
  border-color: white;
 /* border-color: rgb(252 36 23);*/
  border-width: 1px;
  border-radius: 1%;
  background-color:rgba(250,250,250,0.5);
  width: 90vw;

}
.tech2{
  width: 90vw;
}

.sec6{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
}
.sec7{
 
  padding-left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
}
.sec8 a{
  padding-bottom: 12px;
}
.tech2{
 border-style: solid;
  border-color: white;
 /* border-color: rgb(252 36 23);*/
  border-width: 1px;
  border-radius: 1%;
  background-color:rgba(250,250,250,0.5);
  

  
}

  .carousel {
    max-width: 80%;
    max-height: 80%;
    overflow: hidden;
    border:0px solid #591949;
    border-style: solid;
  border-color: white;
 /* border-color: rgb(252 36 23);*/
  border-width: 1px;
  border-radius: 1%;
    
  }
  .photo {
    max-width:80% ;
   max-height:80%;
   
   float: left;
    
  }
   .photos {
    width: calc(500px * 13);
    animation: slidein 30s linear infinite ;
    animation-direction: alternate; 

  }
  @keyframes slidein {
    0% {
      transform: translateX(0);
    }
    7.2% {
      transform: translateX(0);
    }
    14.4% {
      transform: translateX(-500px);
    }
    21.6% {
      transform: translateX(-1000px);
    }
    28.8% {
      transform: translateX(-1500px);
    }
    36% {
      transform: translateX(-2000px);
    }
    43.2% {
      transform: translateX(-2500px);
    }
    50.4% {
      transform: translateX(-3000px);
    }
    57.6% {
      transform: translateX(-3500px);
    }
    64.8% {
      transform: translateX(-4000px);
    }
    72% {
      transform: translateX(-4500px);
    }
    79.2% {
      transform: translateX(-5000px);
    }
    86.4% {
      transform: translateX(-5500px);
    }
    93.6% {
      transform: translateX(-5700px);
    }
    100% {
      transform: translateX(-5700px);
    }
     .carousel2 {
    max-width: 80%;
    max-height: 80%;
    overflow: hidden;
    border:0px solid #591949;
    border-style: solid;
  border-color: white;
 /* border-color: rgb(252 36 23);*/
  border-width: 1px;
  border-radius: 1%;
    
  }
  .photo2 {
    max-width:80% ;
   max-height:80%;
   float: left;
    
  }
  
}

@media(max-width:  350px){


header{

display: flex;
flex-wrap: wrap;
align-items: center;

}

header img{
padding-right: 0;
padding-left: 60px;  
}
.slider {
  width: 300px;
  height: 480px;
  position: absolute;
  top: 1080px;
  padding-left: 10px;
  padding-top: 20px;
  left:0;
  display: flex;
  align-items: center;
  justify-content: center;
 
}

.slide1,.slide2,.slide3,.slide4,.slide5,.slide6,.slide7 {
  position: absolute;
 width: 300px;
  height: 480px;
  border-style: solid;
  border-color: white;
 /* border-color: rgb(252 36 23);*/
  border-width: 1px;
  border-radius: 1%;
  padding: 0;
 
}
.play {
  width: 300px;
  height: auto;
  position: relative;
  top: 549px;
  left: 0;
   border-style: solid;
  border-color: white;
 /* border-color: rgb(252 36 23);*/
  border-width: 1px;
  border-radius: 1%;
  background-color:rgba(250,250,250,0.5);
  animation:transform 5s 1;
  z-index: 100000; 
}
.portrait img{

  width: 99px;
}
[role="banner"] h1:after {
    content: "stoned .............kids"; 
    visibility: visible;
    display: block;
    margin-top: 90px;
    color: rgba(250,250,250,0.5);
    letter-spacing: 0.5em;
    font-size: 1.4rem;
    font-weight: normal;
   
    
}

[role="banner"] h1:before {
    content: "Bienvenue sur notre planète Gamma GT ";
    background-color: #FC2A17;
    height: 105px;
    border-radius: 50%;
    color: white;
    width:85vw;
    visibility: visible;
    display: block;
    margin-top: 0;
    font-size: 1.1rem;
    font-weight: bolder;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
nav{
  display:flex;
  justify-content: space-between;
  align-items: center;
  width: 80vw;
  padding-left: 17px;

  
}
.container {
  position: relative;
  width: auto;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
 .carousel2 {
    height: 500px;
    width: 332px;
    overflow: hidden;
    border:0px solid #591949;
    border-style: solid;
  border-color: white;
 /* border-color: rgb(252 36 23);*/
  border-width: 1px;
  border-radius: 1%;
    
  }
  .photos2 {
    width: calc(332px * 13);
    animation: glisse 30s linear infinite ;
    animation-direction: alternate; 

  }
  .photo2 {
    float: left;
    height: 500px;
    width: 332px;
  }

.sec3{
  
  display: block;
  align-items: center;
  justify-content: center;
  padding-top: 580px ;
}








}