/* -------------------------------- 

Primary style

-------------------------------- */

@font-face {
  font-family: "Century Gothic";
  src: 
    url("GOTHIC.TTF"),
    url("GOTHICB.TTF"),
    url("GOTHICBI.TTF"),
    url("GOTHICI.TTF");
}



*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-size: 1.6rem;
  font-family: "Open Sans", sans-serif;
  color: #331d35;
  background-color: #f0f0f0;
}

a {
  color: #656565;
  text-decoration: none;
}







.Timeline00,
.Timeline21,
.Timelinesoon {
  display: flex;
  width: 18000px;
}

.Timeline00 {
  height: 100px;
}
.Timeline21 {
  align-items: center;
  height: 110px;
}

.Timelinesoon {
  align-items: center;
  height: 250px;
}

.timestart {
  border-top: 2px dashed;
  border-top-color: rgba(0,0,0,0.6);
}

.timeevent {
  background-image: url(img/charalinefont.jpg) ;
  background-color: rgba(255, 255, 255, 1) ;
  background-repeat:no-repeat,repeat  ;
  background-attachment: fixed;
  background-size: cover;
  
}


.timeiron {  background-image: url(img/ironnow.jpg) ;  background-color: rgba(255, 255, 255, 1) ;  background-repeat:no-repeat,repeat  ;  background-attachment: fixed;  background-size: cover}
.timecap {  background-image: url(img/capnow.jpg) ;  background-color: rgba(255, 255, 255, 1) ;  background-repeat:no-repeat,repeat  ;  background-attachment: fixed;  background-size: cover}
.timethor {  background-image: url(img/thornow.jpg) ;  background-color: rgba(255, 255, 255, 1) ;  background-repeat:no-repeat,repeat  ;  background-attachment: fixed;  background-size: cover}
.timehulk {  background-image: url(img/hulknow.jpg) ;  background-color: rgba(255, 255, 255, 1) ;  background-repeat:no-repeat,repeat  ;  background-attachment: fixed;  background-size: cover}
.timespidy {  background-image: url(img/spidynow.jpg) ;  background-color: rgba(255, 255, 255, 1) ;  background-repeat:no-repeat,repeat  ;  background-attachment: fixed;  background-size: cover}
.timerestav {  background-image: url(img/restavnow.jpg) ;  background-color: rgba(255, 255, 255, 1) ;  background-repeat:no-repeat,repeat  ;  background-attachment: fixed;  background-size: cover}
.timeshield {  background-image: url(img/shieldnow.jpg) ;  background-color: rgba(255, 255, 255, 1) ;  background-repeat:no-repeat,repeat  ;  background-attachment: fixed;  background-size: cover}
.timeaveng {  background-image: url(img/avengnow.jpg) ;  background-color: rgba(255, 255, 255, 1) ;  background-repeat:no-repeat,repeat  ;  background-attachment: fixed;  background-size: cover}
.timewolv {  background-image: url(img/wolvnow.jpg) ;  background-color: rgba(255, 255, 255, 1) ;  background-repeat:no-repeat,repeat  ;  background-attachment: fixed;  background-size: cover}
.timex {  background-image: url(img/xnow.jpg) ;  background-color: rgba(255, 255, 255, 1) ;  background-repeat:no-repeat,repeat  ;  background-attachment: fixed;  background-size: cover}
.timeff {  background-image: url(img/ffnow.jpg) ;  background-color: rgba(255, 255, 255, 1) ;  background-repeat:no-repeat,repeat  ;  background-attachment: fixed;  background-size: cover}
.timegg {  background-image: url(img/ggnow.jpg) ;  background-color: rgba(255, 255, 255, 1) ;  background-repeat:no-repeat,repeat  ;  background-attachment: fixed;  background-size: cover}
.timenova {  background-image: url(img/novanow.jpg) ;  background-color: rgba(255, 255, 255, 1) ;  background-repeat:no-repeat,repeat  ;  background-attachment: fixed;  background-size: cover}
.timecapmarv {  background-image: url(img/capmarvnow.jpg) ;  background-color: rgba(255, 255, 255, 1) ;  background-repeat:no-repeat,repeat  ;  background-attachment: fixed;  background-size: cover}
.timemsmarv {  background-image: url(img/msmarvnow.jpg) ;  background-color: rgba(255, 255, 255, 1) ;  background-repeat:no-repeat,repeat  ;  background-attachment: fixed;  background-size: cover}
.timeinhum {  background-image: url(img/inhumnow.jpg) ;  background-color: rgba(255, 255, 255, 1) ;  background-repeat:no-repeat,repeat  ;  background-attachment: fixed;  background-size: cover}
.timedefend {  background-image: url(img/defendnow.jpg) ;  background-color: rgba(255, 255, 255, 1) ;  background-repeat:no-repeat,repeat  ;  background-attachment: fixed;  background-size: cover}
.timemns {  background-image: url(img/mnsnow.jpg) ;  background-color: rgba(255, 255, 255, 1) ;  background-repeat:no-repeat,repeat  ;  background-attachment: fixed;  background-size: cover}
.timedrstrang {  background-image: url(img/drstrangnow.jpg) ;  background-color: rgba(255, 255, 255, 1) ;  background-repeat:no-repeat,repeat  ;  background-attachment: fixed;  background-size: cover}
.timeotr {  background-image: url(img/otrnow.jpg) ;  background-color: rgba(255, 255, 255, 1) ;  background-repeat:no-repeat,repeat  ;  background-attachment: fixed;  background-size: cover}
.timedead {  background-image: url(img/deadnow.jpg) ;  background-color: rgba(255, 255, 255, 1) ;  background-repeat:no-repeat,repeat  ;  background-attachment: fixed;  background-size: cover}
.timeultimate {  background-image: url(img/ultimatenow.jpg) ;  background-color: rgba(255, 255, 255, 1) ;  background-repeat:no-repeat,repeat  ;  background-attachment: fixed;  background-size: cover}



.Bubble00,
.Bubble01,
.Bubble02,
.Bubble03,
.Bubble10,
.Bubble11,
.Bubble12,
.Bubble13,
.Bubble20,
.Bubble21,
.Bubble22,
.Bubble23,
.Bubble30,
.Bubble31,
.Bubble32,
.Bubble33,
.Bubblepp,
.Bubblexx {
  background-color: rgba(255, 255, 255, 1);
  background-repeat:no-repeat,repeat ;
  border-style: solid;
  border-color: rgb(100, 100, 100);
  border-radius: 0px;
  
  border-width: 02px;
  border-bottom-width: 2px;
  
  width:200px;
  height: 82px;
  position: relative;
  left:0px;
  top:0px; 
  cursor: zoom-in; 
  overflow: clip;
  overflow-clip-margin: 50px;
  transition: all 0.5s ease-in-out; /* Transition uniquement pour la transformation et le z-index */
  z-index: 0; /* Toutes les boîtes sont au même niveau par défaut */
}

.Bubble00 {
  border-left-width: 0px;
  
  border-right-width: 0px; 
}

.Bubble01 {
  border-left-width: 0px;
  
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  }

.Bubble02 {
  border-left-width: 0px;
}

.Bubble03 {
  border-left-width: 0px;
  
  border-right-style: dashed; 
}

.Bubble10 {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  
 border-right-width: 0px;
 }

.Bubble11 {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
     
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}

.Bubble12 {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  
}

.Bubble13 {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  
  border-right-style: dashed;
}

.Bubble20 {
 
  border-right-width: 0px; 
}

.Bubble21 {
   
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}

.Bubble23 {
  
  border-right-style: dashed;
}

.Bubble30 {
  border-left-style: dashed;
  
  border-right-width: 0px; 
}

.Bubble31 {
   border-left-style: dashed;
    
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px; 
}

.Bubble32 {
   border-left-style: dashed;
   
}

.Bubble33 {
  border-left-style: dashed;
  
  border-right-style: dashed;
}

.Bubblexx {
  border-top-width: 0px;
  min-height: 84px;
  max-height: 100px;
}


.Bubblepp {
  border-style: dashed;
}


.Bubble0 {
  height: 82px;
}


.eventsoon {
  
  width:1000px;
  height: 82px;
  position: relative;
left:0px;
top:0px; 
  z-index: 0; /* Toutes les boîtes sont au même niveau par défaut */
}



.transform-active {
  height: 500px; /* Augmentation de la hauteur de 300% */
  width: 400px; /* Augmentation de la largeur de 200% */
  left:-100px;
  top:207px;
  border-radius: 10px;
  border-bottom-width: 2px;
  border-style: solid;
  cursor: auto;
  box-shadow: 0px 0px 1000000px 500000px rgba(0,0,0,0.5);
  overflow-clip-margin: 150px; 
  z-index: 18; /* Augmenter le z-index pour mettre la boîte au-dessus des autres */
  background-position: 0% 33%;
}



/* LE GRAND TITRE */


.titrea {
  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content: center;
  height: 82px;
  width:100%;
  position:absolute;
}
.titrea img {
	max-height:60px; max-width:95%;transition: all 0.5s ease-in-out; 
}
.transform-active .titrea img {
	max-height:220px; max-width:175%; padding-bottom:0px
}




.titreb {
  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content: center;
  height: 82px;
  width:100%;
  position:absolute;
}
.titreb img {
	max-height:60px; max-width:95%;transition: all 0.5s ease-in-out; 
}
.transform-active .titreb img {
	max-height:120px; max-width:150%; padding-bottom:27px
}




.titrec{
  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content: center;
  height: 82px;
  width:100%;
  position:absolute;

  text-align:center;
  font-family: "Century Gothic", cursive, sans-serif;
  color: #000000;
  font-weight: bold;
  line-height: 100%;
  text-transform: uppercase;
  height:78px;
  width:100%;
  
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
     
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  transition: all 0.5s ease-in-out; 
}
.event1 .titrec div{
 width:100%;
  font-size:100%;
  transition: all 0.5s ease-in-out; 
}
.transform-active .titrec div {
	font-size:250%;
	text-shadow: 2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, -2px 0 0 #fff, 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff,
 2px 0 2px #fff, 0 2px 2px #fff, 0 -2px 2px #fff, -2px 0 2px #fff, 2px 2px 2px #fff, -2px -2px 2px #fff, 2px -2px 2px #fff, -2px 2px 2px #fff;
 width:125%;
 padding-bottom:27px;
  transition: all 0.5s ease-in-out; 
 line-height:70%;
}






/* AUTRES DETAILS */


.star {
  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content: space-between;
  position:absolute;
  bottom: -12px;
  width:100%;
  
  font-size:18px;
  text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff, 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 0 1px #fff, 0 1px 1px #fff, 0 -1px 1px #fff, -1px 0 1px #fff, 1px 1px 1px #fff, -1px -1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff;
  line-height: 120%;
  color: #000000;
  
  transition: all 0.5s ease-in-out;
}
.transform-active .star {
	opacity:0%
}


.persos {
  display: flex;
  flex-direction: row;
  align-items:center;
  justify-content: center;
  position:absolute;
  top: -14.5px;
  left:0px;
  width:100%;
  color: #000;
  font-size:11px;
  font-family: "Century Gothic", Gadget, sans-serif;
  font-weight: bold;
  transition: all 0.5s ease-in-out;
  opacity:1
}
.transform-active .persos {
	  opacity:0
}


.name {
  background-color: rgba(255, 255, 255, 1) ;
  border-color: rgb(100, 100, 100);
  border-radius: 13px;
  border-style: solid;
  border-width: 02px;
  min-width:25px;
  min-height:25px;
  text-align:center;
  padding-top:4px;
  margin:1px 2px 1px 2px;
  z-index:4;
  position:relative
}
div[full]:hover::after {
  content: attr(full);
  position: absolute;
  bottom: 26px;
  left: -60px;
  background-color: rgba(255, 255, 255, 1) ;
  border-color: rgb(240, 180, 40);
  border-radius: 13px;
  border-style: solid;
  border-width: 02px;
  width:150px;
  min-height:20px;
  text-transform: uppercase;
  
}
.name:hover {
  border-color: rgb(240, 180, 40);
  border-radius: 23px;
  min-width:29px;
  min-height:29px;
  text-align:center;
  padding-top:4px;
  margin:1px 0px 1px 0px;
  z-index:4;
  top:-2px;
  position:relative
}


.booklogo {
	padding-top: 80px;
  display: flex;
  flex-direction: column;
  align-items:center;
  position:absolute;
  border-width: 00px;
  height: 100%;
  width:100%;
  opacity:0;
  transition: all 0.5s ease-in-out;
}
.booklogo img {
	max-height:60px; max-width:95%;transition: all 0.5s ease-in-out; 
}
.transform-active .booklogo {
	opacity:1
}



.detail {
	padding-top: 150px;
  display: flex;
  flex-direction: column;
  align-items:center;
  position:absolute;
  border-width: 00px;
  height: 100%;
  width:100%;
  opacity:0;
  transition: all 0.5s ease-in-out; 
}
.transform-active .detail {
	opacity:1
}



.texte {
  overflow-clip-margin: 0px; 
  height: 200px; 
  width:375px;
  overflow: auto;
  font-family: "Century Gothic", Gadget, sans-serif;
  font-size:12px;
  text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff, 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff,
 1px 0 1px #fff, 0 1px 1px #fff, 0 -1px 1px #fff, -1px 0 1px #fff, 1px 1px 1px #fff, -1px -1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff;
  line-height: 120%;
  color: #000000;
  text-align:center; 
  display: flex;
  flex-direction: column;
  justify-content: safe center;
}


.lesliens {
  overflow-clip-margin: 0px; 
  height: 200px; 
  width:375px;
  overflow: auto;
  font-family: "Century Gothic", Gadget, sans-serif;
  font-size:12px;
  text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff, 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff,
 1px 0 1px #fff, 0 1px 1px #fff, 0 -1px 1px #fff, -1px 0 1px #fff, 1px 1px 1px #fff, -1px -1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff;
  line-height: 120%;
  display: flex;
  flex-direction: column;
}

.tresum {
  font-size: 14px;
  text-align: center;
  font-family:  "Century Gothic", cursive, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
}

.writlogo {
  font-size: 16px;
  text-align: center;
  font-family:  "Century Gothic", cursive, sans-serif;
  color: #000000;
  font-weight: bold;
  margin-left:15px;
  margin-right:15px;
  text-transform: uppercase;
}

.book {
  font-size: 10px;
  text-align: center;
  font-family:  "Century Gothic", cursive, sans-serif;
  color: #000000;
  text-transform: uppercase;
}

.liens {
  font-size: 13px;
  font-family:  "Century Gothic", cursive, sans-serif;
  color: #000000;
  font-weight: bold;
  margin:5px;
  margin-left:15px;
}










.lienstitre {
  font-size: 13px;
  font-family:  "Century Gothic", cursive, sans-serif;
  color: #f0ba29;
  font-weight: bold;
  margin:5px;
  margin-top:15px;
}




.eventsoon toptop{
  text-align:center;
  font-family: "Century Gothic", cursive, sans-serif;
  color: #000000;
  font-weight: bold;
  line-height: 100%;
  text-transform: uppercase;
  height:78px;
  width:100%;
  
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
     
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  transition: all 0.5s ease-in-out; 
}







/* LA BARRE */

.labarre {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  box-shadow: rgb(127, 127, 127) 0px 20px 30px -10px;
  z-index: 1;
}

.leboutton {
    margin:0px;
	border: 0px solid;
	border-color: #f0ba29;
	border-bottom: 0px;
	border-left: 0px;
	border-right: 0px;
	background-color: rgba(255, 255, 255, 0);
	height:70px; 
	width:70px;
	transform-origin: 50% 20% ;
}

.ledebut {
	margin-left:40px;
}

.lafin {
	margin-right:40px;
}

.imgvi {
	margin-top:0px;
	max-height:100%; 
	max-width:100%;
}

@media only screen and (max-width: 800px) {
  .labarre {
    display: none;
  }
}






/* LA TABLE */

.tabs {
  overflow: hidden;
  display:flex;
  width:375px
}

.tablinks {
  background-color: #ffffff;
  float: left;
  border-style: solid;
  border-color: rgba(10, 10, 10, .5);
  border-width: 00px;
  border-bottom-width: 03px;
  outline: none;
  cursor: pointer;
  width: 125px;
  height: 40px;
  color: #999;
  transition: all 0.5s ease-in-out; /* Transition uniquement pour la transformation et le z-index */
}

.tablinks:hover {
  background-color: #f8f8f8;
}

.tabcontent {
  display: none;
  padding: 10px;
}

.active {
    font-size: 18px;
	width: 180px;
	color: #000;
    border-color: rgba(240, 180, 40, 1);

}