/*!****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./apps/frontend/resources/less/Troubadour/Demo.less ***!
  \****************************************************************************************************************************************************************************************************/
.demo-start-container header h1 {
  margin: 0 !important;
}
.demo-start-container header h3 {
  font-size: 24px !important;
  line-height: 24px !important;
  margin: 30px 0 15px 0 !important;
}
.demo-start-container section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 25px;
}
.demo-start-container section p {
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  margin-bottom: 25px;
}
.demo-start-container .mobile-only {
  display: none;
}
@media screen and (max-width: 768px) {
  .demo-start-container .mobile-only {
    display: flex !important;
  }
  .demo-start-container .mobile-hide {
    display: none !important;
  }
}
.demo-end-panel {
  position: fixed;
  width: 80vw;
  height: 80vh;
  max-width: 1200px;
  max-height: 800px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  z-index: 100;
}
.demo-end-panel .demo-end-panel-inner {
  position: relative;
  display: flex;
  flex: 1;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  color: var(--demo-text-colour);
  background-color: var(--demo-bg-colour);
  border-radius: 25px;
  z-index: 101;
}
.demo-end-panel .close-button-container {
  position: absolute;
  left: 25px;
  top: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--pagination-bg);
  border-radius: 50%;
  cursor: pointer;
  width: 50px;
  height: 50px;
  z-index: 102;
}
.demo-end-panel .close-button-container img {
  width: 25px;
  height: 25px;
}
.demo-end-panel .close-button-container:hover {
  background-color: var(--pagination-hover);
}
.demo-end-panel .bg-image {
  position: absolute;
  bottom: -23px;
  pointer-events: none;
  z-index: 102;
}
.demo-end-panel .bg-image.bg-image-student-1 {
  left: -68px;
  width: 160px;
  height: 267px;
}
.demo-end-panel .bg-image.bg-image-student-2 {
  right: -38px;
  width: 125px;
  height: 284px;
}
.demo-end-panel .demo-end-panel-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-self: center;
  font-size: 21px;
  padding: 0 120px;
  overflow-y: auto;
  z-index: 101;
}
.demo-end-panel .demo-end-panel-content a:not(.troubadour-button) {
  color: var(--demo-text-colour);
  font-weight: 700;
  text-decoration: underline;
}
.demo-end-panel .demo-end-panel-content a:not(.troubadour-button):hover {
  color: var(--demo-highlight-colour);
}
.demo-end-panel .demo-end-panel-content h1 {
  font-family: FatFrank, Eagle, Lato, sans-serif;
  color: var(--demo-highlight-colour);
  font-size: 44px;
  line-height: 46px;
  letter-spacing: 0.04em;
  margin: 0;
  text-align: center;
  text-transform: none;
}
.demo-end-panel .demo-end-panel-content h3 {
  font-family: FatFrank, Eagle, Lato, sans-serif;
  color: var(--demo-text-colour);
  font-size: 30px;
  font-weight: 600;
  line-height: 34px;
  letter-spacing: 0.04em;
  margin: 0;
}
.demo-end-panel .demo-end-panel-content li {
  font-family: Sofia Pro, sans-serif;
  color: var(--demo-text-colour);
  font-size: 21px;
  line-height: 30px;
  margin-bottom: 10px;
}
.demo-end-panel .demo-end-panel-content header {
  margin-top: 40px;
  margin-bottom: 20px;
}
.demo-end-panel .demo-end-panel-content section {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
.demo-end-panel .demo-end-panel-content section .buttons-container {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 20px 0;
}
.demo-end-panel .demo-end-panel-content footer {
  margin-top: 25px;
  font-size: 10px;
}
.demo-end-panel .demo-construction-inline,
.demo-end-panel .demo-construction-flex,
.demo-end-panel .demo-correction-inline,
.demo-end-panel .demo-correction-flex {
  display: none;
}
.demo-end-panel[data-demo="construction"] .demo-construction-inline {
  display: inline;
}
.demo-end-panel[data-demo="construction"] .demo-construction-flex {
  display: flex;
}
.demo-end-panel[data-demo="correction"] .demo-correction-inline {
  display: inline;
}
.demo-end-panel[data-demo="correction"] .demo-correction-flex {
  display: flex;
}
@media screen and (min-height: 700px) {
  .demo-end-panel .bg-image {
    bottom: -30px;
  }
  .demo-end-panel .bg-image.bg-image-student-1 {
    left: -90px;
    width: 213px;
    height: 356px;
  }
  .demo-end-panel .bg-image.bg-image-student-2 {
    right: -50px;
    width: 166px;
    height: 378px;
  }
}
@media screen and (min-width: 1200px) and (min-height: 700px) {
  .demo-end-panel .demo-end-panel-content {
    font-size: 28px;
    padding: 0 160px;
  }
  .demo-end-panel .demo-end-panel-content h1 {
    font-size: 58px;
    line-height: 62.5px;
  }
  .demo-end-panel .demo-end-panel-content h3 {
    font-size: 40px;
    line-height: 45px;
    letter-spacing: 0.04em;
  }
  .demo-end-panel .demo-end-panel-content li {
    font-size: 28px;
    line-height: 40px;
    margin-bottom: 15px;
  }
  .demo-end-panel .demo-end-panel-content header {
    margin-top: 60px;
    margin-bottom: 40px;
  }
}


/*# sourceMappingURL=Demo.517802dad877c4056a67.css.map*/