@charset "UTF-8";
.italic {
  font-style: italic;
}

.centered {
  text-align: center;
}

.hidden {
  opacity: 0;
  visibility: hidden;
}

.player {
  width: 100%;
  height: 59px;
  margin-bottom: 10px; /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 30px, rgba(255, 255, 255, 0) 30px, rgba(255, 255, 255, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.playerTimeline {
  width: calc(100% - 40px);
  height: 50px;
  border: 5px solid #285c4d;
  border-end-end-radius: 15px;
  border-top-right-radius: 15px;
  margin-left: 30px;
}

.audio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.time {
  width: calc(100% - 30px);
  height: 55px;
  background-color: #b78b20;
  position: relative;
  top: -57px;
  right: calc(100% - 60px);
  z-index: -10;
  border-end-end-radius: 15px;
  border-top-right-radius: 15px;
  transition: right 400ms;
}

.reload {
  width: 20px;
  height: 20px;
  background-color: #285c4d;
  border-radius: 100%;
  padding: 5px;
  position: relative;
  right: -88%;
  bottom: 158%;
}
.reload img {
  width: 100%;
  height: 100%;
  transition-duration: 200ms;
}

.containerPlayer {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px solid #285c4d;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  left: -30px;
  top: -5px;
  background-color: #285c4d;
  overflow: hidden;
  z-index: 20;
}

.app {
  width: 40px;
  height: 40px;
  position: relative;
  border-radius: 50%;
}

.pause, .play {
  width: 100%;
  height: 100%;
  cursor: pointer;
  position: absolute;
  overflow: hidden;
}

.line {
  position: absolute;
  width: 4px;
  height: 50%;
  background: #fff;
  border-radius: 10px;
  transition: all 400ms cubic-bezier(0.8, 0, 0.33, 1);
}

.pause .line_1 {
  margin: 25% 0;
  left: 28%;
}
.pause .line_2 {
  margin: 100% -16%;
  right: 45%;
  transition-delay: 200ms;
}
.pause.active .line {
  opacity: 1;
}
.pause.active .line_1 {
  margin: 25% 0;
  left: 28%;
}
.pause.active .line_2 {
  margin: 25% 0;
  right: 28%;
}

.play .line {
  margin: 25% 0;
}
.play .line_1 {
  left: 28%;
}
.play .line_2 {
  height: 56%;
  left: 60%;
  transform: rotate(-55deg) translateY(-128px) translateX(16px);
  transition-delay: 100ms;
}
.play .line_3 {
  height: 56%;
  left: 60%;
  transform: rotate(55deg) translateY(-128px) translateX(16px);
  transition-delay: 200ms;
}
.play.active .line {
  opacity: 1;
  height: 62%;
  margin: 20% 0;
}
.play.active .line_1 {
  left: 28%;
  transform: translateY(-2px);
}
.play.active .line_2 {
  height: 56%;
  left: 63%;
  transform: rotate(-55deg) translateY(-8px) translateX(1px);
}
.play.active .line_3 {
  height: 56%;
  left: 63%;
  transform: rotate(55deg) translateY(8px) translateX(1px);
}

.qrscan {
  position: absolute;
  width: 100vw;
  height: 100vh;
  z-index: 9999999;
}
.qrscan--hidden {
  z-index: -9999;
  opacity: 0;
  top: -99999px;
}
.qrscan__cross {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 9999999;
}
.qrscan__cross--hidden {
  z-index: -9999;
  opacity: 0;
  top: -99999px;
}

.blur {
  -webkit-backdrop-filter: blur(15px); /* assure la compatibilité avec safari */
  backdrop-filter: blur(15px);
  background-color: rgba(182, 182, 182, 0.2);
  width: 100vw;
  height: 99999px;
  z-index: 999999;
  position: absolute;
}
.blur--hidden {
  opacity: 0;
  z-index: -9999;
  top: -99999px;
}

.dropdown__container {
  display: flex !important;
  align-items: center;
}
.dropdown__img {
  width: 20px;
  margin-right: 10px;
  border-radius: 2px;
}
.dropdown__text {
  font-size: 1rem;
  text-transform: capitalize;
}

.country {
  height: 40px;
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.country__flag {
  height: 40px;
  margin-right: 20px;
  border-radius: 5px;
}
.country__name {
  font-size: 1.3rem;
}

.languageText {
  font-size: 0.8rem;
  font-weight: 300;
  margin-top: 60px;
  margin-bottom: 30px;
  text-align: center;
}

.roomTitle {
  font-size: 1.3rem;
  text-align: center;
  margin: 50px 0;
}

.article {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 50px;
}
.article__title {
  margin-bottom: 15px;
}
.article__img {
  margin-bottom: 15px;
  width: 100%;
}

.navigationRoom {
  width: 100%;
  display: flex;
  height: 50px;
  justify-content: space-between;
  align-items: center;
}
.navigationRoom__arrow {
  width: 30px;
  height: 30px;
}
.navigationRoom__next {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

.arrow--left {
  transform: rotate(180deg);
}

@font-face {
  font-family: Lato;
  src: url(../Font/Lato/Lato-Regular.ttf);
}
body {
  font-family: Lato;
  padding: 0;
  margin: 0;
}

.body--locked {
  width: 100vw !important;
  overflow: hidden !important;
}

.bodyContent {
  margin: 0 10%;
  min-height: calc(100% - 220px);
  overflow: hidden;
}

header {
  height: 100px;
  width: 100%;
  background-color: #285c4d;
  display: flex;
  color: white;
  justify-content: space-around;
  align-items: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  margin-bottom: 60px;
  z-index: 99999;
}
header div {
  font-size: 0.8rem;
}

footer {
  background-color: #285c4d;
  height: 50px;
  width: 100%;
  position: static;
  bottom: 0;
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 99999;
}
footer a {
  text-decoration: none;
  color: white;
  font-size: 0.5rem;
}

h1 {
  color: #285c4d;
  font-size: 1.4rem;
}

a {
  text-decoration: none;
  color: unset;
}/*# sourceMappingURL=main.css.map */