@import url(https://db.onlinewebfonts.com/c/7845974d42d57b645d45f13be1ada87e?family=AidaSerifObliqueMedium+V2);

@font-face {
    font-family: "AidaSerifObliqueMedium V2";
    src: url("https://db.onlinewebfonts.com/t/7845974d42d57b645d45f13be1ada87e.eot");
    src: url("https://db.onlinewebfonts.com/t/7845974d42d57b645d45f13be1ada87e.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/7845974d42d57b645d45f13be1ada87e.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/7845974d42d57b645d45f13be1ada87e.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/7845974d42d57b645d45f13be1ada87e.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/7845974d42d57b645d45f13be1ada87e.svg#AidaSerifObliqueMedium V2")format("svg");
}

*, ::before, ::after {
    box-sizing: border-box;
    margin:0;
    padding:0;
}

*::-webkit-scrollbar {
    width:0;
  }

a{
  color:white;
}

span:hover {
    opacity: 0.8;
  }

.animate-zoom {
  animation:animatezoom 0.3s
}

audio{
    -webkit-tap-highlight-color: transparent;
    outline: none;
    color: blue;
  }

.audio-player {
      position: fixed;
      top: 73%;
      margin: 5px;
      width: 150px;
      height: auto;

      border-radius: 25px;
      text-align: center;
      background: rgba(255, 255, 255, 0.4);
      z-index: 250;
      display: none;
    }

    .article{
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        max-width: 70vw;
        padding-left: 10px;
        margin-right: 5px;
      }

      .article img {

        object-fit: cover;
        border-radius: 3px;
      }

      .article span {
        display: none;
        text-align: center;
        font-size: clamp(20px,9vw,30px);
      }


      .bigscreenclass{
          	display:none;
          	padding:10px;
          	position:fixed;
          	left:0;
          	top:0;
          	width:100vw;
          	height:120vh;
          	background-color:rgba(0,0,0,0.9);
            z-index:30;
          }

          .bigcontent{
            overflow-wrap: break-word;
          	margin:auto;
          	position:relative;
          	outline:0;
          	width:95%;
            text-align:center;
          }
          .bigcontent h2{
            margin:auto;
            width:70vw;
            line-height: 1.3;
          }
          .bigcover{
            height:clamp(0px,70vw,40vh);
              object-fit: cover;
              margin-top: 5vh;
          }

          .cover{
            width: auto;
            max-width: 50vw;
            height: 40vmax;
            max-height: 400px;
          }
          
          .cover:hover{
              opacity: 0.8;
          }

          .closebutton{
              	position:absolute;
                margin:5%;
              	right:0;
              	top:0;
                height:70px;
                width:70px;
                font-size: 35px;
                border:none;
                border-radius:50%;
                display:inline-block;
                padding:8px 16px;
                vertical-align:middle;
                overflow:hidden;
                text-decoration:none;
                color:white;
                background-color:rgba(0,0,0,0.3);
                text-align:center;
                cursor:pointer;
                white-space:nowrap;
            }

          .gifclick{
            max-width:100%;
            height:auto;
            opacity:0%;
          }

.boutoncal{
    position:fixed;
    right:5%;
    bottom: 5%;
    height:auto;
    width: 34%;
    max-width: 120px;
    color: black;
    background-color: rgb(255, 255, 255);
    #box-shadow: 0px 0px 10px 5px black;
    font-family: "AidaSerifObliqueMedium V2";
    font-size: clamp(15px,4vw,25px);
    border-radius: 5%;
  }

button{
	border: none;
	cursor: pointer;
	outline: inherit;
  font-family:"AidaSerifObliqueMedium V2";
}

body {
    position:relative;
    min-height:100vh;
    width: 100vw;
    color: black;
    animation: fadein 4s;
    font-family: "AidaSerifObliqueMedium V2";
    background-size: 100vw;
    background-position: center;
    background-position-y: 25vh;
    background-color: #050505;
}

.calendrier{
    position: fixed;
    left: 2%;
    right: 2%;
    top: 26vh;
    width:115%;
    height:42vh;
  }

.clic:active{
  opacity:50%;
}

.container-corner {
      position: fixed;
      width: 40%;
      max-width: 200px;
      right:0%;
      top: 1%;
      font-family: "AidaSerifObliqueMedium V2";
    }

    .btn-circle {
        display: block;
        border-radius: 100%;
        position: relative;
        z-index: 15;
        outline: none;
        cursor: pointer;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .circle-menu {
        background-clip: padding-box;
        width: 110vw;
        min-width: 900px;
        min-height: 900px;
        max-width: 1150px;
        max-height: 1150px;
        height: 110vw;
        border-radius: 50%;
        border: 350px solid rgba(0, 0, 0, 0) ;
        position: absolute;
        z-index: -5;
        top: 50%;
        left: 45%;
        transform: translate(-50%, -50%) scale(0);
        transition: transform 0.4s ease 0.2s;
    }

    .circle-menu.circle-anim {
    transform: translate(-50%, -50%) scale(0.5);
    }

.links-circle {
        font-size: clamp(60px,5vw,100px);
        color:white;
        position: absolute;
        top: 50%;
        left: 45%;
        transform: translate(-50%, -50%) scale(0);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .links-circle:nth-child(1){
        left: -85%;
        top: 20%;
        transition: transform 0.2s ease 0.4s;
    }
    .links-circle:nth-child(2){
        left: -65%;
        top: 75%;
        transition: transform 0.2s ease 0.4s;
    }
    .links-circle:nth-child(3){
        top: 130%;
        left: -35%;
        transition: transform 0.2s ease 0.4s;
    }
    .links-circle:nth-child(4){
      top: 180%;
      left: 5%;
        transition: transform 0.2s ease 0.4s;
    }

    .circle-menu.circle-anim .links-circle{
        transform: translate(-50%, -50%) scale(1);
        transition: transform 0.2s ease 0.7s;
    }

.container {
  display: block;
  justify-content: center;
  text-align:center;
}



.contact {
    background-image: url('../img/fond2.jpg');
  border-radius: 5px;
  width:clamp(265px,50vw,300px);
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(30px,6vw,45px);
  color:black;
  #box-shadow: 0px 0px 10px 5px white;
}

.contactext img{
    padding: 10px;
}


.icon-container{
  height: 80px;
  overflow: hidden;
  display: block;
}

.epk{
    display:flex;
    justify-content:center;
    text-align:center;
    width:100vw;
    margin-bottom: 10px;
}

.epk img{
    width:50vmax;
    padding-top: 1px;
    padding-bottom: 2px;
    object-fit: cover;
    #box-shadow: 0px 0px 10px 5px white;
    margin: 15px;
}

footer {
  position:relative;
        width:100%;
        bottom:0px;
        justify-content: center;
        text-align:center;
    }

.contactext{
    color: white;
    background-image: url('../img/fond2.jpg');
    box-shadow: 0px 0px 10px 5px black;
    font-size: clamp(15px,4vw,25px);
}
.social img{
      width:55px;
    }
a img:hover{
    opacity: 0.8;
}

.social a{
    color: black;
}

.gallery {
  border-radius: 5px;
  display:inline-block;
  padding: 5px;
  #background-color:rgba(162, 54, 255, 0.25);
  box-shadow: 0px 0px 10px 5px black;
  width:90%;
  height:610px;
  overflow-y: scroll;
    background-image: url('../img/fond2.jpg');
}


.galleryAudio{
  border: 1px solid;
  border-color: rgb(255,85,0);
}

.galleryVideo{
  border: 1px solid;
  border-color: rgb(205, 32, 31);
}

.galleryPhoto{
  border: 1px solid;
  border-color: grey;
}

.galleryPodcast{
  border: 1px solid;
  border-color: rgba(355,355,355);
}


#gallery::-webkit-scrollbar{
  width:20px;
  background-color:#0a0a0a;
}
#gallery::-webkit-scrollbar:vertical{
  height:12px;
}
#gallery::-webkit-scrollbar-thumb{
  background-color:#ffffff;
  border:1px solid #0a0a0a;
  border-radius:5px;
}
#gallery::-webkit-scrollbar-thumb:hover{
  background-color:#58406d;
  border:1px solid #686868;
}
#gallery::-webkit-scrollbar-thumb:active{
  background-color:#362e3c;
  border:1px solid #333333;
}

.gallery > *{
  padding: 3px;
  width: 35vmin;
  height: 50vh;
  object-fit: cover;
  cursor:zoom-in;
  vertical-align: middle;
  border-radius: 3px;
}

img{
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.photoview{
  display:block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  background-color:transparent;
	cursor:pointer;
	color: white;
  font-size:clamp(35px,6vw,45px);
	padding:15px;
	text-decoration:none;
}

.photoview:hover {
    opacity: 0.8;
  }

  .galleryfilter{
    display:inline-block;
    background-color:transparent;
  	cursor:pointer;
  	color: white;
    -webkit-text-stroke: 0.25px white;
  	font-size:clamp(28px,5vw,45px);
    font-weight:500;
  	padding:clamp(5px,2vw,15px);
  	text-decoration:none;
  }

  .galleryfilter:hover {
      opacity: 0.8;
    }

.hide{
  display:none;
}

header{
  width:100%;
  height:0;
  padding: 10px 16px 10px;
  z-index: 20;
  position: fixed;
  }

  h1{
      color:white;
      font-size: clamp(30px,8vw,60px);
      font-family:"AidaSerifObliqueMedium V2";
      
  }

  h2{
      color:white;
      font-size:clamp(12px,4vw,30px);
  }

  h3{
    color: rgba(255, 255, 255, 0.25);
    font-size: clamp(15px,3vw,25px);
    font-family: AidaSerifObliqueMedium;
  }

.masque{
 background-color: rgba(0, 0, 0, .8);
  width:100vw;
  height:100vh;
  z-index:15;
  position:fixed;
  display:none;
  animation: fadein 0.3s;
}

small{
  font-size: clamp(15px,3vw,20px);

}

.scrollmenu {
  #background-color:rgba(162, 54, 255, 0.25);
  display: flex;
  overflow-x:scroll;
  white-space: nowrap;
  margin: 20px;
    background-image: url('../img/fond2.jpg');
    box-shadow: 0px 0px 10px 5px black;
    height:clamp(0px,50vmax,450px);
  }

  #scrollmenu::-webkit-scrollbar{
		width:12px;
		background-color:#000000;
	}
  #scrollmenu::-webkit-scrollbar:horizontal{
		height:12px;
	}

  #scrollmenu::-webkit-scrollbar-thumb{
		background-color:#ffffff;
		border:4px solid #000000;
		border-radius:5px;
	}

  .scrollmenu .cover:hover{
    cursor:grab;
  }

  .scrollmenu .gifclick:hover{
    opacity: 100%;
    cursor:zoom-in;
  }

.topband{
    opacity: 0;
  display:flex;
  justify-content: center;
  text-align:center;
  width:100%;
    #box-shadow: 0px 0px 10px 5px white;
  }


  .topband img{
    height:25vh;
    width:100%;
    object-fit: cover;

  }

  .startup{
    display:flex;
    justify-content:center;
    text-align:center;
    width:100vw;
      
    }

    .startup img{
        height:65vh;
        width:100%;
      padding-top: 1px;
        object-fit: cover;
        
    }
    


@keyframes animatezoom{
    from{ transform:scale(0) }
    to{ transform:scale(1) }
  }

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}

#lecteur-audio {
  background-color: #f8f8f8;
    border-radius: 8px;
    #box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    width: inherit;
    display: block;
}