@charset "UTF-8";



.src{
  width: 50vw;
  height:00vh;
}

{
  cursor: url("images/curseur.png"), pointer;
}

* {
  box-sizing: border-box;
}

/*html {
  font-size: 10px;
}*/

.defileParent {
  display: block;
  margin: 3em auto;
  overflow: hidden;
  position: relative;
  table-layout: fixed;
  width: 700px;
}

.defile {
  display:block;
  -webkit-animation:linear marqueelike 20s infinite ;
  -moz-animation:linear marqueelike 20s infinite ;
  -o-animation:linear marqueelike 20s infinite ;
  -ms-animation:linear marqueelike 20s infinite ;
  animation:linear marqueelike 20s infinite ;
  margin-left:-100%;
  padding:0 5px;
  text-align:left;
  height:50px;
}

div#colonne1 {
  float: left;
  overflow:visible;
  width: 500px;
  background: transparent;
  height: 118px;
  font-size: 6vw;
  -webkit-text-stroke: 0.7px white;
}

div#colonne2 {
 float: right;
 overflow: visible;
  width: 500px;
  background: transparent;
  height: 118px;
  font-size: 6vw;
  -webkit-text-stroke: 0.7px white;
}

div#centre {
  overflow: visible;
  background: transparent;
  height: 118px;
  font-size: 6vw;
  -webkit-text-stroke: 0.7px white;
   
  /* le contenu n'est pas rogné */
}

/*.overlay1 {
  background-color:red;
  text-shadow: red 0em 0em 0.2em;
  top: -12vw;
  width: 30vw;
  height:100vh; 
  transform: translate(-100%, 0);
  transition: transform 0.5s ease-in-out;
  position:absolute;
  z-index:50;
  padding: 2rem;
}
*/




.cross {
  z-index: 10000;
}

.vignette img {
  position:relative;
  max-width: 45vw;
  z-index: 100;
  top: 25px;
}

.vignette1 img {
  position:relative;
  max-width: 45vw;
  z-index: 100;
  top: 0px;
}


.txt__overlay {
  height:100%;
}




::-webkit-scrollbar {
  display:none;
}





.overlay {
  position: fixed;
  z-index: 10000;
  background-color:red;
  text-shadow: red 0em 0em 0.2em;
  top: 0;
  width: 50vw;
  height:102vh; 
  transform: translate(-100%, 0);
  transition: transform 0.5s ease-in-out;
  z-index:100;
  padding: 2em;
  overflow: auto;
/*  display: flex;
*/  align-items: center;
}

.bold {
  font-size: 4.5vh;
   top: 50%;
   height: 118px;
}

.overlay-title {
  display: block;
  text-align: center;
}

.overlay-right {
  right: 0;
  transform: translateX(100%);
}

.overlay p {
  /*height: 85vh;*/
 /* max-height: 96vh;*/
  font-size: 2.5vw;
  color:red;
  line-height: 2.85vw;
  text-align: left;
  text-shadow: 0px 0px 20px #FFFFFF, 1px 1px 20px #F81212, 1px 2px 10px #F81212; 
  color: white;
  /*text-indent: 1.5em;*/

  width: 45vw;
  /*border:1px blue solid;*/
}

.overlay1 p {
  height: 85vh;
  max-height: 85vh;
  font-size: 3.2vw;
  color:red;
  line-height: 3.5vw;
  text-align: left;
  text-shadow: 0px 0px 20px #FFFFFF, 1px 1px 20px #F81212, 1px 2px 10px #F81212; 
  color: white;
  /*text-indent: 1.5em;*/

  width: 44vw;
  /*border:1px blue solid;*/
}

.overlay2 p {
  /*height: 85vh;*/
  max-height: 96vh;
  font-size: 3.2vw;
  color:red;
  line-height: 3.5vw;
  text-align: left;
  text-shadow: 0px 0px 20px #FFFFFF, 1px 1px 20px #F81212, 1px 2px 10px #F81212; 
  color: white;
  /*text-indent: 1.5em;*/

  width: 44vw;
  /*border:1px blue solid;*/
}



.button__close {
  position: absolute;
  top: 2rem;
  right: 2rem;
}

.button__close span {
  color: white;
  font-size: 3.3rem;
}

.overlay-open {
  transform: translate(0%, 0);
/*   width: 900px;
  height: 900px;*/

}

.txt-overlay {
  /*position:absolute;*/
  width:35vw;
  text-align: left;
}


.wrapper {
  position: relative;
  width: 100vw;
  height: 100vw;
  display: flex;  
  flex-flow: row wrap;
  justify-content: space-around;
  font-weight: medium;
  text-align: center;
  font-size: 6vw;
  -webkit-text-stroke: 1px white;
  display: flex;
  flex-direction: column;
  padding: 20% 0;
/*    flex: 1 100%;
*/
}

.wrapper-row {
  display: flex;
  width: 100%;
}

.wrapper-row > * {
  flex: 1;
  padding: 0 10%;

}

.wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/*.header1 {
  /*height:100vh;*/
  width:100vw;
  /*border:solid blue 1px;*/*/
  
}

.footer {
}

.main {
  text-align: left;
}



.container {
  display: flex; /* or inline-flex */
}



.container {
  align-content: space-between;
}


.navglobqal li {
  display: block;
  font-size: 6rem;
}

/*.entrainementtitre{
display: flex;
vertical-align: middle;
justify-content: center;
align-items: center;}*/

@font-face {
  font-style: normal;
  font-weight: super;
  font-family: 'Basel-Bold';
  src: url("../fonts/Basel-Bold.woff") format("woff");
  src: url("../fonts/Basel-Bold.otf") format("truetype"),
}

#cercle {
    position:relative;
    width: 150vmin;
    height: 150vmin;
    border-radius: 200vmin;
/*    box-shadow: 0px 0px 200px #FF0000;
    box-shadow: inset 10px 10px 200px #FF0000; */
    box-shadow: 0 0 500px 30px #FC2A0D, 0 0 500px 10px #FC2A0D inset;
    top:-40vh;
  pointer-events: none;
}


.center {
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}


.overlay{

  cursor: url('../images/Curseur2.png'), auto;
/*  cursor: pointer;
*/}

body {
	width: 100vw;
  top:130%;

/*  padding-left:10vw;
  padding-right:10vw;*/

  line-height:1;
	color:transparent;
  text-align: center;
	font-family:'Basel-Bold';
  border: 0px solid black;
 /* text-shadow: red 0em 0em 0.8em*/
  color: transparent;
  text-shadow: 0px 0px 9px #FFFFFF, 1px 1px 10px #F81212, 1px 2px 10px #F81212;

    /*text-shadow: 1px 4px 6px #FFFFFF, 0 0 0 #FC2A0D, 1px 4px 6px #FC2A0D;*/
}


h1
  {
  position:relative;
  width:75vw;
  position:absolute;
  font-size: 12vw;
  top:380%;
  left:50%;
  transform:translate(-50%, -50%);
  -webkit-text-stroke: 0px white;
 /* text-shadow: red 0em 0em 0.15em*/
  text-shadow: 0px 0px 20px #FFFFFF, 1px 1px 20px #F81212, 1px 2px 10px #F81212;

}



.element2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:75vw;
  font-size: 14vw;
  -webkit-text-stroke: 0px white;
 /* text-shadow: red 0em 0em 0.15em*/
  text-shadow: 0px 0px 20px #FFFFFF, 1px 1px 20px #F81212, 1px 2px 10px #F81212;


}

.element2:hover {
  color:red;
  text-shadow: 5px 1px 30px #FFFFFF, 5px 1px 30px #F81212, 5px 1px 30px #F81212;


}

.element {
 white-space: nowrap;
  font-size: 6vw;
  color: transparent;
  text-shadow: 0px 0px 7px #FFFFFF, 1px 1px 10px #F81212, 1px 2px 10px #F81212;
  -webkit-text-stroke: 1px white;

}

.element:hover {
  color:red;
  text-shadow: 5px 1px 30px #FFFFFF, 5px 1px 30px #F81212, 5px 1px 30px #F81212;
   -webkit-text-stroke: 0px white;

}


.element3 {
  white-space: nowrap;
  font-size: 6vw;
  color: transparent;
  text-shadow: 0px 0px 7px #FFFFFF, 1px 1px 10px #F81212, 1px 2px 10px #F81212;
  -webkit-text-stroke: 1px white;
  line-height: 115%

}

.element3:hover {
  color:red;
  text-shadow: 5px 1px 30px #FFFFFF, 5px 1px 30px #F81212, 5px 1px 30px #F81212;
   -webkit-text-stroke: 0px white;

}


#container {
  position:absolute;
  width:90vw;
  border:solid 1px yellow;
  z-index: 1;
  margin-left:30vw;
  margin-right:2vw;
  top: 200vw;
}


.text-std {
	font-family:"Basel-Super";
}

#txt-big {
/*	font-size:10vw;
*/
}

a /* Liens par défaut (non survolés) */
{
   text-decoration: none;
   color: red;
   font-style: italic;
}

ahover /* Apparence au survol des liens */
{
   text-decoration: underline;
   color: black;
}

.video {
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;

}

.close-video {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 50px;
  z-index: 100000;
}

.show-video {
  opacity: 1;
  pointer-events: auto;
}

.video video {
  width: 100%;
}

.words {
  width: 100%;
  height: 100vh;
  display: flex;
}

.word-column {
  flex-shrink: 1;
  padding: 0rem 0;
  display: flex;
  flex-direction: column;
  width: 33.333%;
  transition: width 0.5s ease-in-out;
   top:5vw;
}

.word {
  flex: 1 1 auto;
  font-size: 6rem;
  transition: padding 0.5s ease-in-out;
  position: relative;
}

.word:hover {
  padding: 3rem 0;
}

.word-column .word h4 {
  position: absolute;
  right: 50%;
  top: 0;
  transform: translateX(50%);
  transition: transform 0.5s ease-in-out, right 0.5s ease-in-out;
}


.circle-mask {
  -webkit-mask-position: 0 0;
  background-image 
  height:100%;
  width:100%;
}
.circle-mask:hover {
  -webkit-mask-position: -300px -300px;
}

.flex-horiz {

  display: flex;
  justify-content: space-around;
}

@media screen and (max-width: 900px) {
  .words {
    height: 50vh;
  }

  .wrapper {
    justify-content: center;
  }

  .flex-horiz {
    flex-direction: column;
  }

  .element {
    margin-top: 20px;
  }
}

.li {
white-space: nowrap;
  font-size: 15vw;
  color: transparent;
  text-shadow: 0px 0px 7px #FFFFFF, 1px 1px 10px #F81212, 1px 2px 10px #F81212;
  -webkit-text-stroke: 1px white;

}

.image-container {
  position: relative;
}