@font-face {
  font-family: "KalamBold";
  src: url("/static/Kalam-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Aurora";
  src: url("/static/aurorabc_0.ttf") format("truetype");
}
@media (max-width: 900px) {
  html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: none;
  }
}
body {
  margin: 0;
  padding: 0;
  font-family: Calibri, sans-serif;
  font-style: normal;
  font-weight: 300;
}
@media (max-width: 900px) {
  body {
    font-size: 0.8rem;
  }
}

a {
  color: white;
  text-decoration: none;
}

h1 {
  font-family: Aurora, sans-serif;
  text-transform: uppercase;
  color: white;
}

p {
  margin: 0;
  font-size: 22px;
}
@media (max-width: 900px) {
  p {
    font-size: 0.8rem;
  }
}

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.container .subcontainer {
  flex-grow: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #ff9a31;
}
.container .subcontainer.gamewindow-active {
  justify-content: center;
  align-items: center;
  background-color: black;
}

video {
  width: 100%;
}

button {
  margin-bottom: 15px;
}

#splash img {
  max-height: 100%;
}

.sitewindow {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.sitewindow .header {
  background-color: #ff9a31;
}
.sitewindow .header .header-ucl {
  display: flex;
  justify-content: end;
  flex-direction: row;
  color: #dd7100;
  background-color: #ffcf9e;
  line-height: 40px;
  padding: 3px 80px;
  font-size: 24px;
  font-weight: 500;
}
.sitewindow .header .header-ucl a {
  margin: 0 10px;
}
.sitewindow .header .header-ucl a:last-child {
  margin-right: 20px;
}
.sitewindow .header .header-ucl img {
  margin-top: 6px;
  max-height: 32px;
}
.sitewindow .header .header-title {
  display: flex;
  align-items: center;
  padding: 4px 80px 10px 80px;
  color: white;
}
.sitewindow .header .header-title h1 {
  font-family: Aurora, sans-serif;
  font-size: 70px;
  margin-top: 13px;
  margin-bottom: 0;
  color: white;
}
.sitewindow .header .header-title p {
  line-height: 15px;
  font-size: 26px;
  margin-left: 3px;
}
.sitewindow .header .header-title .logo {
  margin: 8px 55px 0 0;
}
@media screen and (max-width: 900px) {
  .sitewindow .header .header-ucl {
    font-size: 16px;
    line-height: 25px;
    padding: 3px 40px;
  }
  .sitewindow .header .header-ucl img {
    max-height: 24px;
  }
  .sitewindow .header .header-title {
    padding: 4px 40px 10px 40px;
  }
  .sitewindow .header .header-title h1 {
    font-size: 40px;
  }
  .sitewindow .header .header-title p {
    font-size: 18px;
  }
  .sitewindow .header .header-title .logo {
    max-height: 60px;
  }
}
.sitewindow .site-content {
  flex-grow: 1;
  position: relative;
  display: flex;
  flex-direction: row;
  background: url("/static/img/Fond.png") center bottom;
  background-size: cover;
  justify-content: flex-end;
}
.sitewindow .site-content .intro {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 100px;
  width: 35%;
  text-align: center;
  color: white;
}
.sitewindow .site-content .intro p {
  font-size: 30px;
}
@media screen and (max-width: 900px) {
  .sitewindow .site-content .intro p {
    font-size: 18px;
  }
}
.sitewindow .site-content .login {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 100px;
  width: 35%;
  text-align: center;
  color: white;
}
.sitewindow .site-content ul.errorlist, .sitewindow .site-content .errorField {
  list-style: none;
  font-weight: bold;
  color: red;
  background-color: white;
  padding: 1rem;
  border: 1px solid gray;
  border-radius: 5px;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
.sitewindow .site-content ul.errorlist p, .sitewindow .site-content .errorField p {
  font-size: 1.2rem;
}
.sitewindow .site-content ul.errorlist a, .sitewindow .site-content .errorField a {
  color: #ff9a31;
  text-decoration: underline;
}

a.btn, button.btn {
  display: inline-block;
  margin: 45px 15px 0 15px;
  padding: 5px 100px 7px 100px;
  height: 40px;
  color: white;
  background-color: #ff9a31;
  font-family: Aurora, sans-serif;
  text-transform: uppercase;
  font-size: 24px;
  line-height: 40px;
  border-radius: 40px;
}
@media screen and (max-width: 900px) {
  a.btn, button.btn {
    margin-top: 15px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    border-radius: 20px;
  }
}

button.btn {
  border: none;
  line-height: inherit;
}

.navbar {
  height: 46px;
  background-color: #ff9a31;
  padding: 5px 45px;
  line-height: 46px;
  text-transform: uppercase;
  color: white;
  font-size: 24px;
  font-weight: 500;
}
.navbar.navbar-black {
  background-color: #1f1f1f;
}
.navbar.navbar-black a {
  color: white;
  font-weight: 300;
}
.navbar.navbar-black .right-elem {
  display: block;
}
.navbar.navbar-black .right-elem.manual-mode .manualmode {
  display: block;
}
.navbar.navbar-black .right-elem.manual-mode .automode {
  display: none;
}
.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.navbar ul li {
  display: inline-block;
  margin: 0 12px;
}
@media screen and (max-width: 900px) {
  .navbar ul li {
    margin: 0 5px;
  }
}
.navbar .right-elem {
  display: none;
  float: right;
}
.navbar .right-elem img {
  vertical-align: top;
  margin-left: 10px;
}
.navbar .right-elem .manualmode {
  display: none;
}
.navbar .left-elem {
  float: left;
}
@media screen and (max-width: 900px) {
  .navbar {
    height: 25px;
    line-height: 25px;
    font-size: 16px;
    padding: 5px 20px;
  }
  .navbar .right-elem img {
    margin-left: 5px;
    max-height: 25px;
  }
}

.message {
  margin: 1rem;
  padding: 1rem 2rem;
  font-weight: bold;
  background-color: white;
}
.message.success {
  color: green;
}

.gamewindow {
  display: none;
  position: relative;
  width: 100%;
  height: 56.25vw;
  max-height: calc(100vh - 56px);
  background-color: #000000;
  overflow: hidden;
}

.panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.panel.game {
  display: none;
}

#newsflash-workaround {
  background: url("/static/img/fond-premier-clic-FR.jpg");
  background-size: cover;
  display: none;
}
#newsflash-workaround #newsflash-workaround-indicator {
  position: absolute;
  top: 75%;
  right: 5%;
  width: 12.375%;
  height: 22%;
  background: url("/static/img/ui/button-base.png");
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
}

.score-display {
  position: absolute;
  top: 5%;
  right: 0;
}
.score-display .score-container {
  position: absolute;
  right: 0;
  width: 20vmin;
  height: 7vmin;
  background-color: #ff9a31;
  border-top-left-radius: 51px;
  border-bottom-left-radius: 51px;
  padding: 15px 0 15px 4vmin;
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: 5;
}
.score-display .score-container img {
  max-width: 30%;
}
.score-display .score-container p {
  display: inline-block;
  color: white;
  font-family: Aurora, sans-serif;
  font-size: 7vmin;
  margin-left: 10px;
}
.score-display .progress-container {
  position: absolute;
  right: 0;
  top: 9.5vmin;
  width: 8vmin;
  height: 4vmin;
  background-color: white;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  padding: 7px 18px 7px 0;
  align-items: center;
  z-index: 6;
}
.score-display .progress-container p {
  color: black;
  font-family: Aurora, sans-serif;
  font-size: 3.5vmin;
  margin-left: 10px;
  text-align: right;
}
.valdisplay {
  background-color: #4ec642;
  padding: 1px 5px;
  color: white;
  margin: 0 10px;
  font-weight: bold;
}

.valdisplay.false {
  background-color: #ff6152;
}

.qcm-container {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-direction: column;
  color: black;
  height: 100%;
}

.qcm-button-container .qcm-choice {
  background-image: url("/static/img/ui/button-choice.png");
  padding: 60px 30px 60px 80px;
  background-size: 700px;
  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: left;
  font-size: 38px;
  margin: 35px 0;
  cursor: pointer;
  font-family: KalamBold, Abel, sans-serif;
  text-align: center;
}
@media screen and (max-width: 900px) {
  .qcm-button-container .qcm-choice {
    padding: 25px 70px 25px 50px;
    background-size: 300px;
    font-size: 26px;
    margin: 15px 0;
  }
}
@media screen and (max-width: 600px) {
  .qcm-button-container .qcm-choice {
    padding: 15px 50px 15px 30px;
    background-size: 300px;
    font-size: 18px;
    margin: 15px 0;
  }
}

@keyframes changewidth {
  30% {
    background-image: url("/static/img/ui/button-next.png");
  }
  50% {
    background-image: url("/static/img/ui/button-next-anim.png");
  }
  70% {
    background-image: url("/static/img/ui/button-next.png");
  }
}
.video-controls #prev, .video-controls #next {
  position: absolute;
  top: 45%;
  width: 7%;
  height: 20%;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
  z-index: 2;
}
.video-controls #prev {
  left: 0;
  background-image: url("/static/img/ui/button-prev.png");
}
.video-controls #next {
  right: 0;
  background-image: url("/static/img/ui/button-next.png");
}
.video-controls #next.continue {
  animation-duration: 2s;
  animation-name: changewidth;
  animation-iteration-count: infinite;
}
.video-controls #indicator {
  position: absolute;
  top: 75%;
  right: 5%;
  width: 12.375%;
  height: 22%;
  background: url("/static/img/ui/button-base.png");
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
}
.video-controls #indicator.indicator-bad {
  background-image: url("/static/img/ui/button-hacker.png");
}
.video-controls #indicator.indicator-good {
  background-image: url("/static/img/ui/button-desk.png");
}
.video-controls #indicator.indicator-secondary {
  background-image: url("/static/img/ui/button-love.png");
}

.introspect-container {
  display: flex;
  flex-wrap: nowrap;
}
.introspect-container div {
  margin-top: 1%;
  padding: 10px;
  flex-shrink: 1;
}
.introspect-container div:first-child {
  margin-top: 6%;
  margin-left: 3%;
}
.introspect-container div:last-child {
  margin-top: 7%;
  margin-right: 3%;
}
.introspect-container img {
  max-width: 100%;
  height: auto;
}

#pause-screen {
  display: none;
  background-color: #00000099;
  font-size: 15vh;
  color: white;
  text-align: center;
  z-index: 5;
}
#pause-screen i {
  padding-top: 25%;
}
#pause-screen.paused {
  display: block;
}

.timecode-editor {
  text-align: center;
  font-size: 22px;
  display: flex;
  flex-direction: column;
}
.timecode-editor > div {
  flex: 1 1;
  margin: 10px 10px;
}
.timecode-editor output {
  margin-top: 15px;
  margin-bottom: 15px;
}

.admin-content {
  width: 100%;
  max-width: 910px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 3rem;
  flex-grow: 1;
  background-color: #fff;
}
.admin-content a {
  color: #fd9932;
  font-weight: bold;
}
.admin-content p {
  font-size: 1rem;
}
.admin-content .session-participant {
  margin: 2rem 0;
  padding: 1rem 1rem;
  border: 1px solid #ff9a31;
  background-color: #fff7f3;
}
.admin-content .session-participant span {
  font-weight: bold;
}
.admin-content .btn {
  height: auto;
  font-size: 1rem;
  line-height: 1.2rem;
  padding: 0.2rem 1rem;
  margin: 1rem 0;
}

#game-password {
  background: url("/static/img/games/password/bg.jpg");
  background-size: cover;
}

#password-input {
  border: 0;
  margin-left: 27.5%;
  margin-top: 31%;
  width: 32%;
  font-size: 2vw;
  padding: 2px 10px;
  color: gray;
}
#password-input:focus, #password-input:active {
  outline: none;
}

#password-submit {
  cursor: pointer;
  position: absolute;
  left: 27.5%;
  top: 67%;
  max-width: 35%;
  text-align: center;
}

#game-facebook {
  background: url("/static/img/games/facebook/bg.jpg");
  background-size: cover;
}

.facebook-dot {
  position: absolute;
  cursor: pointer;
  opacity: 0;
}

#dot1 {
  top: 45%;
  right: 43%;
}

#dot2 {
  top: 54.5%;
  right: 41.5%;
}

#dot3 {
  top: 63.7%;
  right: 40%;
}

.facebook-controls #prev, .facebook-controls #facebook-validate {
  position: absolute;
  top: 45%;
  width: 84px;
  height: 100px;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
}
.facebook-controls #prev {
  left: 0;
  background-image: url("/static/img/ui/button-prev.png");
}
.facebook-controls #facebook-validate {
  right: 0;
  background-image: url("/static/img/ui/button-next.png");
}

#game-phishing {
  background: url("/static/img/games/phishing/bg.jpg");
  background-size: cover;
}

.phishing-button {
  position: absolute;
  width: 90px;
  height: 90px;
  top: 19%;
  cursor: pointer;
  background-position-x: center;
  background-position-y: 5px;
  background-size: 63px;
  background-repeat: no-repeat;
}

#phishing-button1 {
  left: 25.8%;
  background-image: url("/static/img/games/phishing/client_03.png");
}
#phishing-button1:hover {
  background-image: url("/static/img/games/phishing/client-hover_03.png");
}

#phishing-button2 {
  left: 33.3%;
  background-image: url("/static/img/games/phishing/client_05.png");
}
#phishing-button2:hover {
  background-image: url("/static/img/games/phishing/client-hover_05.png");
}

#phishing-button3 {
  left: 41.3%;
  background-image: url("/static/img/games/phishing/client_07.png");
}
#phishing-button3:hover {
  background-image: url("/static/img/games/phishing/client-hover_07.png");
}

#phishing-button4 {
  left: 71%;
  background-image: url("/static/img/games/phishing/client_09.png");
}
#phishing-button4:hover {
  background-image: url("/static/img/games/phishing/client-hover_09.png");
}

#phishing-link {
  width: 160px;
  height: 50px;
  top: 52%;
  left: 27%;
  background-position-x: center;
  background-position-y: 5px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("/static/img/games/phishing/link_15.png");
}
#phishing-link:hover {
  background-image: url("/static/img/games/phishing/link-hover_15.png");
}

#invoice-workaround {
  background: url("/static/img/games/invoice/bg.jpg");
  background-size: cover;
  display: none;
}

#game-wifi {
  background: url("/static/img/games/wifi/bg.jpg");
  background-size: cover;
}

.wifi-button {
  position: absolute;
  width: 300px;
  height: 40px;
  background-color: #ff615200;
  cursor: pointer;
}

#wifi-button1 {
  top: 24%;
  left: 38%;
  transform: rotate(-7deg);
}

#wifi-button2 {
  transform: rotate(-7deg);
  top: 39%;
  left: 40%;
}

#wifi-button3 {
  transform: rotate(-7deg);
  top: 45.3%;
  left: 40.5%;
}

#game-laptop {
  background: url("/static/img/games/laptop/bg.png");
  background-size: cover;
}

.laptop-button {
  position: absolute;
  background-color: #ff615200;
  cursor: pointer;
}

#laptop-button1 {
  background-image: url("/static/img/games/laptop/Ordinateur-on.png");
  background-size: contain;
  width: 200px;
  height: 176px;
  top: 30%;
  left: 34%;
}
#laptop-button1:hover {
  background-image: url("/static/img/games/laptop/Ordinateur-off.png");
}

#laptop-button2 {
  background: url("/static/img/games/laptop/Public-on.png");
  background-size: contain;
  width: 400px;
  height: 550px;
  bottom: 0;
  right: 0;
}
#laptop-button2:hover {
  background-image: url("/static/img/games/laptop/Public-off.png");
}

#laptop-button3 {
  background: url("/static/img/games/laptop/Organisatrice-on.png");
  background-size: contain;
  width: 252px;
  height: 440px;
  bottom: 0;
  left: 0;
}
#laptop-button3:hover {
  background-image: url("/static/img/games/laptop/Organisatrice-off.png");
}

#game-textgame, #game-textgame2 {
  background-image: url("/static/img/games/textgame/bg.jpg");
  background-size: cover;
}
#game-textgame .game-help, #game-textgame2 .game-help {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 12%;
  background-color: white;
  padding: 8px 5px;
  border-radius: 4px;
  border: 1px solid gray;
  z-index: 5;
  font-size: 0.8em;
}
#game-textgame .game-help .icon-center, #game-textgame2 .game-help .icon-center {
  text-align: center;
}
#game-textgame .game-help p, #game-textgame2 .game-help p {
  font-size: 1.1em;
  line-height: 1em;
  margin-top: 8px;
}
#game-textgame .stand, #game-textgame2 .stand {
  position: absolute;
  bottom: -30px;
  left: 0;
  right: 0;
  margin: auto;
  width: 158px;
}
#game-textgame .textgame-middle-content, #game-textgame2 .textgame-middle-content {
  position: relative;
  border-image-source: url("/static/img/games/textgame/screen9slice.png");
  border-image-slice: 40 40 65 40;
  border-image-width: 40px 40px 65px 40px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: repeat repeat;
  border-style: solid;
  padding: 30px 30px 55px 30px;
  margin: 40px 10% 65px 10%;
  height: 80%;
}
#game-textgame .textgame-middle-content .text-content, #game-textgame2 .textgame-middle-content .text-content {
  background-color: #ec0972;
  height: 100%;
  max-height: 100%;
  overflow-y: hidden;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  flex: 1;
}
#game-textgame .textgame-middle-content .text-content > img, #game-textgame2 .textgame-middle-content .text-content > img {
  display: block;
  width: 100%;
  margin: 0;
}
#game-textgame .textgame-middle-content .text-content .text-column, #game-textgame2 .textgame-middle-content .text-content .text-column {
  position: relative;
  display: flex;
  min-height: 0;
}
#game-textgame .textgame-middle-content .text-content .text-column .l-margin, #game-textgame .textgame-middle-content .text-content .text-column .r-margin, #game-textgame2 .textgame-middle-content .text-content .text-column .l-margin, #game-textgame2 .textgame-middle-content .text-content .text-column .r-margin {
  width: 50%;
}
#game-textgame .textgame-middle-content .text-content .text-column-content, #game-textgame2 .textgame-middle-content .text-content .text-column-content {
  background-color: white;
  height: 100%;
  overflow-y: scroll;
}
#game-textgame .textgame-middle-content .text-content .text-column-content > div, #game-textgame2 .textgame-middle-content .text-content .text-column-content > div {
  padding: 15px;
}
#game-textgame .textgame-middle-content .text-content .text-column-content h2, #game-textgame2 .textgame-middle-content .text-content .text-column-content h2 {
  color: #ec0972;
}
#game-textgame .textgame-middle-content .text-content .text-column-content p, #game-textgame2 .textgame-middle-content .text-content .text-column-content p {
  margin-bottom: 15px;
}
#game-textgame .textgame-middle-content .text-content .text-column-content ul, #game-textgame2 .textgame-middle-content .text-content .text-column-content ul {
  font-size: 22px;
}
#game-textgame .textgame-middle-content .text-content .text-column-content .textgame-item:hover, #game-textgame .textgame-middle-content .text-content .text-column-content .textgame2-item:hover, #game-textgame2 .textgame-middle-content .text-content .text-column-content .textgame-item:hover, #game-textgame2 .textgame-middle-content .text-content .text-column-content .textgame2-item:hover {
  color: #0fa2ff;
  cursor: pointer;
}
#game-textgame .textgame-middle-content .text-content .text-column-content .textgame-item.strike, #game-textgame .textgame-middle-content .text-content .text-column-content .textgame2-item.strike, #game-textgame2 .textgame-middle-content .text-content .text-column-content .textgame-item.strike, #game-textgame2 .textgame-middle-content .text-content .text-column-content .textgame2-item.strike {
  text-decoration: line-through;
}

#textgame-old .screen-layout {
  display: flex;
  width: 100%;
  height: 100%;
}
#textgame-old .screen-layout .textgame-left {
  display: flex;
  flex-direction: column;
  width: 5%;
}
#textgame-old .screen-layout .textgame-left .left-top {
  background-image: url("/static/img/games/textgame/left-top.jpg");
  background-position: top right;
  flex-grow: 1;
}
#textgame-old .screen-layout .textgame-left .left-bottom {
  background-image: url("/static/img/games/textgame/left-bottom.jpg");
  background-position: top right;
  height: 175px;
}
#textgame-old .screen-layout .textgame-middle {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
#textgame-old .screen-layout .textgame-middle-top {
  background-image: url("/static/img/games/textgame/top.jpg");
  height: 40px;
  flex-shrink: 0;
}
#textgame-old .screen-layout .textgame-middle-content {
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
}
#textgame-old .screen-layout .textgame-middle-content div {
  margin: 0;
}
#textgame-old .screen-layout .textgame-middle-content .text-content {
  position: relative;
  background-color: #ec0972;
}
#textgame-old .screen-layout .textgame-middle-content .text-content > img {
  max-width: 100%;
  margin: 0;
}
#textgame-old .screen-layout .textgame-middle-content .text-content .text-column {
  background-color: white;
  max-height: 93%;
  padding: 15px;
  overflow-y: scroll;
}
#textgame-old .screen-layout .textgame-middle-content .text-content .text-column h2 {
  color: #ec0972;
}
#textgame-old .screen-layout .textgame-middle-content .text-content .text-column p {
  margin-bottom: 15px;
}
#textgame-old .screen-layout .textgame-middle-content .text-content .text-column ul {
  font-size: 22px;
}
#textgame-old .screen-layout .textgame-middle-content .text-content .text-column .textgame-item:hover, #textgame-old .screen-layout .textgame-middle-content .text-content .text-column .textgame2-item:hover {
  color: #0fa2ff;
  cursor: pointer;
}
#textgame-old .screen-layout .textgame-middle-content .text-content .text-column .textgame-item.strike, #textgame-old .screen-layout .textgame-middle-content .text-content .text-column .textgame2-item.strike {
  text-decoration: line-through;
}
#textgame-old .screen-layout .textgame-middle-bottom {
  background-image: url("/static/img/games/textgame/bottom.jpg");
  height: 108px;
  background-position: top center;
  flex-shrink: 0;
  position: relative;
}
#textgame-old .screen-layout .textgame-right {
  display: flex;
  flex-direction: column;
  width: 5%;
}
#textgame-old .screen-layout .textgame-right .right-top {
  background-image: url("/static/img/games/textgame/right-top.jpg");
  background-position: top left;
  flex-grow: 1;
}
#textgame-old .screen-layout .textgame-right .right-bottom {
  background-image: url("/static/img/games/textgame/right-bottom.jpg");
  background-position: top left;
  height: 175px;
}

.textgame-popup-container,
.textgame2-popup-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.5);
}
.textgame-popup-container.popup-hidden,
.textgame2-popup-container.popup-hidden {
  display: none;
}
.textgame-popup-container .textgame-popup,
.textgame2-popup-container .textgame-popup {
  width: 500px;
  height: 250px;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.textgame-popup-container .textgame-popup-header,
.textgame2-popup-container .textgame-popup-header {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-color: #51657c;
  color: white;
}
.textgame-popup-container .textgame-popup-content,
.textgame2-popup-container .textgame-popup-content {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  background-color: #e3e3e3;
  padding: 15px;
}
.textgame-popup-container .textgame-popup-content .btn-container,
.textgame2-popup-container .textgame-popup-content .btn-container {
  display: flex;
  justify-content: space-around;
  margin: 30px;
}
.textgame-popup-container .textgame-popup-content .btn-container .textgame-btn,
.textgame2-popup-container .textgame-popup-content .btn-container .textgame-btn {
  background-color: #51657c;
  border-radius: 15px;
  text-transform: uppercase;
  padding: 15px 30px;
  color: white;
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
}

#feedback, #chapter-end, #instructions {
  background-color: #23a7cf;
}

#chapter-end-bad {
  background-color: #9a143e;
}

#feedback, #chapter-end, #chapter-end-bad, #instructions {
  color: white;
  font-family: KalamBold, Verdana, Arial, sans-serif;
  font-size: 36px;
  text-align: center;
  padding: 10vh 10vw 0 10vw;
  overflow-y: auto;
}
#feedback h1, #chapter-end h1, #chapter-end-bad h1, #instructions h1 {
  margin: 0.2vh;
  font-size: 18vh;
}
#feedback .feedback-line, #chapter-end .feedback-line, #chapter-end-bad .feedback-line, #instructions .feedback-line {
  max-width: 100%;
}
#feedback p, #chapter-end p, #chapter-end-bad p, #instructions p {
  margin: 4vh;
  font-size: 4vh;
  text-transform: uppercase;
  line-height: 1.2;
}
#feedback p#feedback-text p, #chapter-end p#feedback-text p, #chapter-end-bad p#feedback-text p, #instructions p#feedback-text p {
  margin: 3.5vh;
  font-size: 3.5vh;
  line-height: 1.1;
}
#feedback #feedback-next img, #chapter-end #feedback-next img, #chapter-end-bad #feedback-next img, #instructions #feedback-next img {
  max-width: 150px;
}
@media screen and (max-width: 1024px) {
  #feedback #feedback-next img, #chapter-end #feedback-next img, #chapter-end-bad #feedback-next img, #instructions #feedback-next img {
    max-width: 100px;
  }
}
#feedback #feedback-next img, #feedback #feedback-more img, #chapter-end #feedback-next img, #chapter-end #feedback-more img, #chapter-end-bad #feedback-next img, #chapter-end-bad #feedback-more img, #instructions #feedback-next img, #instructions #feedback-more img {
  max-width: 16vh;
}
#feedback .chapter-end-restart, #feedback .chapter-end-continue, #feedback #instructions-next, #chapter-end .chapter-end-restart, #chapter-end .chapter-end-continue, #chapter-end #instructions-next, #chapter-end-bad .chapter-end-restart, #chapter-end-bad .chapter-end-continue, #chapter-end-bad #instructions-next, #instructions .chapter-end-restart, #instructions .chapter-end-continue, #instructions #instructions-next {
  display: block;
  margin: 15px auto;
  padding: 5px;
  width: 500px;
  background-color: #ff9a31;
  color: white;
  border-radius: 15px;
  font-family: Aurora, sans-serif;
  font-size: 42px;
  text-decoration: none;
  cursor: pointer;
}
@media screen and (max-width: 1024px) {
  #feedback .chapter-end-restart, #feedback .chapter-end-continue, #feedback #instructions-next, #chapter-end .chapter-end-restart, #chapter-end .chapter-end-continue, #chapter-end #instructions-next, #chapter-end-bad .chapter-end-restart, #chapter-end-bad .chapter-end-continue, #chapter-end-bad #instructions-next, #instructions .chapter-end-restart, #instructions .chapter-end-continue, #instructions #instructions-next {
    width: 300px;
    font-size: 28px;
  }
}

#instructions {
  padding-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#instructions .inst-title {
  font-family: Aurora, sans-serif;
  font-size: 6vh;
}
#instructions h1 {
  font-size: 14vh;
}

.modal, .age-modal, .rotate-modal {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
  text-align: center;
  flex-direction: column;
}
.modal.open, .age-modal.open, .rotate-modal.open {
  display: flex;
}
.modal .header, .age-modal .header, .rotate-modal .header {
  padding: 15px;
  background-color: #ff9a31;
  color: white;
}
.modal .header h1, .age-modal .header h1, .rotate-modal .header h1 {
  color: white;
  font-family: KalamBold, Abel, sans-serif;
  font-size: 42px;
  margin: 12px 0 0 0;
}
.modal .header p, .age-modal .header p, .rotate-modal .header p {
  font-size: 18px;
}
.modal .content-wrapper, .age-modal .content-wrapper, .rotate-modal .content-wrapper {
  flex-grow: 1;
  overflow-y: auto;
  padding: 30px;
  background-image: url("/static/img/fond-selection.jpg");
  background-size: cover;
}
.modal .content-wrapper.help-wrapper, .age-modal .content-wrapper.help-wrapper, .rotate-modal .content-wrapper.help-wrapper {
  background-image: url("/static/img/fond-aide.jpg");
}
.modal .content-wrapper#fiches-wrapper h1, .modal .content-wrapper#fiches-wrapper h2, .modal .content-wrapper#fiches-wrapper h3, .age-modal .content-wrapper#fiches-wrapper h1, .age-modal .content-wrapper#fiches-wrapper h2, .age-modal .content-wrapper#fiches-wrapper h3, .rotate-modal .content-wrapper#fiches-wrapper h1, .rotate-modal .content-wrapper#fiches-wrapper h2, .rotate-modal .content-wrapper#fiches-wrapper h3 {
  text-align: left;
}
.modal .content-wrapper#fiches-wrapper a, .age-modal .content-wrapper#fiches-wrapper a, .rotate-modal .content-wrapper#fiches-wrapper a {
  color: dodgerblue;
  font-family: Calibri, sans-serif;
  text-transform: unset;
}
.modal .content-wrapper#fiches-wrapper .frame-box, .age-modal .content-wrapper#fiches-wrapper .frame-box, .rotate-modal .content-wrapper#fiches-wrapper .frame-box {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}
.modal .content-wrapper#fiches-wrapper .frame-box .frame-box__title, .age-modal .content-wrapper#fiches-wrapper .frame-box .frame-box__title, .rotate-modal .content-wrapper#fiches-wrapper .frame-box .frame-box__title {
  padding: 8px 15px;
  font-family: Aurora, Abel, sans-serif;
  color: white;
  background-color: #ff9a31;
  font-weight: bold;
  font-size: 1.6rem;
}
.modal .content-wrapper#fiches-wrapper .frame-box .frame-box__content, .age-modal .content-wrapper#fiches-wrapper .frame-box .frame-box__content, .rotate-modal .content-wrapper#fiches-wrapper .frame-box .frame-box__content {
  padding: 50px 50px;
  background-color: #fff;
}
.modal .content-wrapper#fiches-wrapper .frame-box .frame-box__content p, .age-modal .content-wrapper#fiches-wrapper .frame-box .frame-box__content p, .rotate-modal .content-wrapper#fiches-wrapper .frame-box .frame-box__content p {
  margin-bottom: 1rem;
}
.modal .content-wrapper .content, .age-modal .content-wrapper .content, .rotate-modal .content-wrapper .content {
  max-width: 930px;
  margin: auto;
}
.modal .content-wrapper .content ol, .modal .content-wrapper .content ul, .age-modal .content-wrapper .content ol, .age-modal .content-wrapper .content ul, .rotate-modal .content-wrapper .content ol, .rotate-modal .content-wrapper .content ul {
  text-align: left;
  list-style-position: inside;
  margin-left: 0;
  padding-left: 0;
}
.modal .content-wrapper .content p, .age-modal .content-wrapper .content p, .rotate-modal .content-wrapper .content p {
  font-size: 1em;
  text-align: left;
}
.modal .content-wrapper .content p.center, .age-modal .content-wrapper .content p.center, .rotate-modal .content-wrapper .content p.center {
  text-align: center;
}
.modal .content-wrapper .content p.center a, .age-modal .content-wrapper .content p.center a, .rotate-modal .content-wrapper .content p.center a {
  font-family: KalamBold, Abel, sans-serif;
  text-transform: uppercase;
  color: #ff9a31;
}
.modal .content-wrapper .content a, .age-modal .content-wrapper .content a, .rotate-modal .content-wrapper .content a {
  font-family: KalamBold, Abel, sans-serif;
  text-transform: uppercase;
  color: #ff9a31;
}
.modal .content-wrapper .content p.error, .age-modal .content-wrapper .content p.error, .rotate-modal .content-wrapper .content p.error {
  display: none;
  color: red;
  font-size: 18px;
}
.modal .content-wrapper .content p.p-margin, .age-modal .content-wrapper .content p.p-margin, .rotate-modal .content-wrapper .content p.p-margin {
  margin: 30px 0 40px 0;
}
.modal .content-wrapper .content .sequence-title, .age-modal .content-wrapper .content .sequence-title, .rotate-modal .content-wrapper .content .sequence-title {
  margin: 0 15px;
  color: white;
  background-color: #ff9a31;
  text-align: center;
  font-size: 1.8em;
  font-family: Aurora, sans-serif;
  padding: 4px;
}
.modal .content-wrapper .content .sequences-grid, .age-modal .content-wrapper .content .sequences-grid, .rotate-modal .content-wrapper .content .sequences-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  overflow: auto;
}
.modal .content-wrapper .content .sequences-grid .grid-item, .age-modal .content-wrapper .content .sequences-grid .grid-item, .rotate-modal .content-wrapper .content .sequences-grid .grid-item {
  background-color: white;
  cursor: pointer;
  margin: 10px 15px 30px 15px;
}
.modal .content-wrapper .content .sequences-grid .grid-item img, .age-modal .content-wrapper .content .sequences-grid .grid-item img, .rotate-modal .content-wrapper .content .sequences-grid .grid-item img {
  max-width: 280px;
}
.modal .content-wrapper .content .sequences-grid .grid-item h1, .age-modal .content-wrapper .content .sequences-grid .grid-item h1, .rotate-modal .content-wrapper .content .sequences-grid .grid-item h1 {
  margin: 4px 0 0 0;
  color: #ff9a31;
  text-transform: uppercase;
  font-family: Aurora, sans-serif;
  font-size: 1.4em;
}
.modal .content-wrapper .content .sequences-grid .grid-item p, .age-modal .content-wrapper .content .sequences-grid .grid-item p, .rotate-modal .content-wrapper .content .sequences-grid .grid-item p {
  margin: 10px 20px 20px 20px;
  line-height: 16px;
  color: black;
  font-size: 16px;
  text-align: center;
}
.modal .content-wrapper a, .age-modal .content-wrapper a, .rotate-modal .content-wrapper a {
  color: white;
}
.modal .content-wrapper a.big-link, .age-modal .content-wrapper a.big-link, .rotate-modal .content-wrapper a.big-link {
  color: white;
  font-size: 28px;
}
.modal .footer, .age-modal .footer, .rotate-modal .footer {
  background: #ff9a31;
  height: 60px;
  text-transform: uppercase;
  font-weight: bold;
  color: white;
  font-family: KalamBold, Abel, sans-serif;
  line-height: 38px;
  cursor: pointer;
}
.modal .footer p, .age-modal .footer p, .rotate-modal .footer p {
  margin-top: 15px;
}
.modal .footer p.lang span, .age-modal .footer p.lang span, .rotate-modal .footer p.lang span {
  margin: 0 10px;
}
@media screen and (max-width: 900px) {
  .modal .footer p.lang span, .age-modal .footer p.lang span, .rotate-modal .footer p.lang span {
    margin: 0 5px;
  }
}
@media screen and (max-width: 900px) {
  .modal .footer, .age-modal .footer, .rotate-modal .footer {
    height: 60px;
    background-size: contain;
  }
  .modal .footer p, .age-modal .footer p, .rotate-modal .footer p {
    margin-top: 30px;
  }
}

.rotate-modal {
  display: none;
}
@media screen and (orientation: portrait) {
  .rotate-modal {
    display: flex;
  }
}

.fts-logo {
  max-width: 190px;
}
@media screen and (max-width: 900px) {
  .fts-logo {
    max-width: 110px;
  }
}

.fab {
  padding: 5px;
  font-size: 20px;
  width: 25px;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
}

.fab:hover {
  opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-linkedin {
  background: #0073a4;
  color: white;
}

body.english-override #feedback {
  background-image: url("/static/img/feedback/bg-en.jpg");
}
body.english-override #game-facebook {
  background-image: url("/static/img/games/C2.jpg");
}
body.english-override #invoice-workaround {
  background-image: url("/static/img/games/C4.jpg");
}
body.english-override #game-password {
  background-image: url("/static/img/games/C1.jpg");
}
body.english-override #game-phishing {
  background-image: url("/static/img/games/C3.jpg");
}
body.english-override #game-wifi {
  background-image: url("/static/img/games/C6.jpg");
}
body.english-override #newsflash-workaround {
  background-image: url("/static/img/Clique-en.jpg");
}

/*# sourceMappingURL=screen.css.map */