@charset "UTF-8";
section {
  background-color: white;
}
section a {
  color: #028097;
}
section em {
  color: #0bbccb;
}
section .box {
  background-color: #eaeaea;
}

section.orange {
  background-color: #fda93b;
}
section.orange p, section.orange a {
  color: black;
}
section.orange em {
  color: white;
}
section.orange .box {
  background-color: #fdd18c;
}

section.red {
  background-color: #fd5b52;
}
section.red p, section.red a, section.red em {
  color: white;
}
section.red .item > p {
  color: black;
}
section.red .box {
  background-color: #fc908d;
}
section.red .box p, section.red .box a {
  color: black;
}

section.green {
  background-color: #0ab599;
}
section.green p, section.green a {
  color: white;
}
section.green em {
  color: black;
}
section.green .box {
  background-color: #80d485;
}
section.green .box p, section.green .box a {
  color: black;
}
section.green .box em {
  color: #e7f2e7;
}

section.cyan {
  background-color: #0bbccb;
}
section.cyan p, section.cyan a {
  color: white;
}
section.cyan em {
  color: black;
}
section.cyan .box {
  background-color: #7dd3d3;
}
section.cyan .box p, section.cyan .box a {
  color: black;
}
section.cyan .box em {
  color: #eefcff;
}
section.cyan.inverse p, section.cyan.inverse a {
  color: black;
}
section.cyan.inverse em {
  color: white;
}
section.cyan.inverse tabbed-content a {
  color: #028097;
}
section.cyan.inverse tabbed-content em {
  color: #0bbccb;
}

section.grey {
  background-color: #f4f4f4;
}
section.grey .box {
  background-color: white;
}

section.dark-grey {
  background-color: #eaeaea;
}
section.dark-grey .box {
  background-color: white;
}

section.black {
  background-color: #222;
  color: white;
}
section.black em {
  color: #fd5b52;
}
section.black a {
  color: #fc908d;
}
section.black .box {
  background-color: #333;
}

.box.orange {
  background-color: #fcefe0;
}
.box.red {
  background-color: #ffeeec;
}
.box.green {
  background-color: #e7f2e7;
}
.box.cyan {
  background-color: #eefcff;
}
.box.blue {
  background-color: #eaf0f4;
}

@font-face {
  font-family: "Studio Feixen Sans Variable";
  src: url("/font/studio-feixen-sans-variable-v2.ttf") format("truetype-variations");
  font-weight: 100 800;
  font-stretch: 0% 200%;
}
@font-face {
  font-family: "Studio Feixen Sans Light";
  src: url("/font/studio-feixen-sans-light.ttf");
}
body {
  font-family: "Studio Feixen Sans Variable";
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: white;
  margin: 0;
}

h1, h2, h3, h4, label, strong {
  font-weight: 600;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.2rem;
}

h4 {
  font-size: 1rem;
}

em {
  text-transform: uppercase;
  font-style: normal;
  font-size: 0.85em;
  font-weight: 600;
  font-stretch: 120%;
}

p, li, blockquote {
  line-height: 150%;
}

p.subtitle, tabbed-content.about-you > div:not([slot]) > p:first-child {
  font-family: "Studio Feixen Sans Light", "Studio Feixen Sans Variable";
  font-size: 1.2rem;
}
p.subtitle em, tabbed-content.about-you > div:not([slot]) > p:first-child em {
  font-family: "Studio Feixen Sans Variable";
}

p.claim {
  font-size: 2rem;
  font-weight: 600;
  line-height: normal;
}

p.footnote {
  font-size: 0.75rem;
}

section.claim > .content > * {
  max-width: 600px;
}

@media screen and (max-width: 511px) {
  h1, p.claim {
    font-size: 1.7rem;
  }
  h2 {
    font-size: 1.25rem;
  }
  h3, p.subtitle, tabbed-content.about-you > div:not([slot]) > p:first-child {
    font-size: 1.1rem;
  }
}
a > .arrow {
  display: inline-block;
  margin-left: 0.3em;
}

img.badge, .badge > img {
  display: block;
}

.badge {
  width: 120px;
}

#enso-def {
  display: none;
}

.badge.custom {
  position: relative;
}
.badge.custom > img, .badge.custom > svg {
  display: block;
  width: 120px;
  height: 120px;
}
.badge.custom .label {
  text-decoration: none;
  color: inherit;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.badge.custom .label p {
  margin: 0;
  padding: 0 20px;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
}
.badge.custom .label img {
  width: 80%;
}
.badge.custom.open.scrum {
  color: #89805f;
}
.badge.custom.open.po {
  color: #80a33e;
}
.badge.custom.open.dev {
  color: #cf4827;
}
.badge.custom.open.pal {
  color: #087152;
}
.badge.custom.open.ebm {
  color: #087152;
}
.badge.custom.open.nexus {
  color: #1699b5;
}
.badge.custom.open.kanban {
  color: #660d3b;
}
.badge.custom.enso.intro {
  color: #fd5b52;
}
.badge.custom.enso.intro > svg {
  fill: #fd5b52;
}
.badge.custom.enso.sm {
  color: #405a70;
}
.badge.custom.enso.sm > svg {
  fill: #405a70;
}
.badge.custom.enso.po {
  color: #80a33e;
}
.badge.custom.enso.po > svg {
  fill: #80a33e;
}
.badge.custom.enso.dev {
  color: #cf4827;
}
.badge.custom.enso.dev > svg {
  fill: #cf4827;
}
.badge.custom.enso.pal {
  color: #087152;
}
.badge.custom.enso.pal > svg {
  fill: #087152;
}
.badge.custom.enso.less {
  color: #293682;
}
.badge.custom.enso.less > svg {
  fill: #293682;
}
.badge.custom.enso.kanban {
  color: #660d3b;
}
.badge.custom.enso.kanban > svg {
  fill: #660d3b;
}
.badge.custom.enso .label > p {
  padding-top: 0.5em;
  font-size: 0.9rem;
  line-height: 0.95;
  font-stretch: 110%;
}
.badge.custom.enso .label > p::after {
  display: block;
  content: "ō";
  text-transform: none;
  font-size: 1.3em;
  margin-top: 0.3em;
  margin-bottom: -0.4em;
  color: #b2b2b2;
}

.container > *, .container ul.items, .content > *, .content ul.items {
  margin: 30px 0;
}
.container > p, .container > ul, .container > ol, .content > p, .content > ul, .content > ol {
  margin: 1em 0;
}
.container > h1, .container > h2, .content > h1, .content > h2 {
  margin: 1.5em 0 1rem;
}
.container > h3, .content > h3 {
  margin: 1em 0 1rem;
}
.container > h4, .content > h4 {
  margin: 1em 0 0.8rem;
}
.container > *:first-child, .content > *:first-child {
  margin-top: 0 !important;
}
.container > *:last-child, .content > *:last-child {
  margin-bottom: 0 !important;
}

.flex-row, .flex-col, .flex-pane {
  display: flex;
  gap: 30px;
}

.flex-row {
  flex-flow: row wrap;
  align-items: center;
}

.flex-pane, .flex-col {
  flex-flow: column nowrap;
  align-items: flex-start;
}

@media screen and (min-width: 512px) {
  .flex-pane:not(.wide) {
    flex-direction: row;
  }
}
@media screen and (min-width: 768px) {
  .flex-pane.wide {
    flex-direction: row;
  }
}
@media screen and (min-width: 1024px) {
  .flex-pane.wide {
    flex-direction: column;
  }
}
@media screen and (min-width: 1366px) {
  .flex-pane.wide {
    flex-direction: row;
  }
}
.box {
  padding: 30px;
}

.bubble {
  position: relative;
  background-color: var(--bubble-bkg-color, white);
  padding: 30px;
}
.bubble::before {
  content: "";
  display: block;
  height: 0;
  width: 0;
}
.bubble.tail-up::before {
  position: absolute;
  inset: -30px auto auto 30px;
  border-bottom: 30px solid var(--bubble-bkg-color, white);
  border-right: 30px solid transparent;
}
.bubble.tail-down::before {
  position: absolute;
  inset: auto 30px -30px auto;
  border-top: 30px solid var(--bubble-bkg-color, white);
  border-right: 30px solid transparent;
}

.course-date-table {
  background-color: #f4f4f4;
  box-sizing: border-box;
  width: 100%;
  padding: 15px;
}
.course-date-table > * {
  margin: 0;
  padding: 0;
}
.course-date-table > *:not(:first-child) {
  padding-top: 15px;
}
.course-date-table > *:not(:last-child) {
  padding-bottom: 15px;
  border-bottom: 2px #d0d0d0 solid;
}

.course-date {
  align-items: flex-end;
  gap: 10px 15px;
}
.course-date .flex-row {
  align-items: flex-end;
  gap: 10px 15px;
}
.course-date .date, .course-date .location {
  font-weight: 600;
}
.course-date .week-days, .course-date .lang {
  font-size: 0.8em;
  margin-bottom: 0.1em;
  text-transform: uppercase;
}
.course-date .times > .text {
  font-size: 0.9em;
  margin-bottom: 0.1em;
}
.course-date .price {
  font-size: 0.9em;
}
.course-date .price .amount {
  color: #028097;
}
.course-date .price del {
  color: #999;
}
.course-date .price del .amount {
  color: #999;
  font-weight: normal;
}
.course-date .price .until, .course-date .price .vat {
  color: #999;
  margin-left: 0.4rem;
  font-weight: normal;
  font-size: 0.75rem;
}
.course-date .price .vat {
  margin-right: 5px;
}

.course-heading {
  flex-wrap: nowrap;
}
.course-heading > * {
  margin: 0;
}
@media screen and (max-width: 511px) {
  .course-heading {
    gap: 15px;
  }
  .course-heading .badge {
    width: 90px;
  }
}

p > span.highlighted {
  display: inline-block;
  background-color: #fd5b52;
  padding: 5px 10px;
  font-size: 0.9em;
  font-weight: 600;
}
p > span.highlighted a, p > span.highlighted em {
  color: #ffeeec;
}
p > span.highlighted.warning {
  background-color: #fda93b;
}
p > span.highlighted.warning a, p > span.highlighted.warning em {
  color: white;
}
p > span.highlighted.error {
  background-color: #fd5b52;
}
p > span.highlighted.error a, p > span.highlighted.error em {
  color: #ffeeec;
}

ul.check-marks, tabbed-content.about-you > div:not([slot]) > ul {
  list-style: none;
  padding-left: 0;
}
ul.check-marks li + li, tabbed-content.about-you > div:not([slot]) > ul li + li {
  margin-top: 0.5em;
}

.check, ul.check-marks li, tabbed-content.about-you > div:not([slot]) > ul li {
  position: relative;
  margin-left: 30px !important;
}
.check::before, ul.check-marks li::before, tabbed-content.about-you > div:not([slot]) > ul li::before {
  position: absolute;
  left: -20px;
  content: "";
  font-weight: 800;
  border-bottom: 0.15em solid var(--check-mark-color, #80d485);
  border-left: 0.15em solid var(--check-mark-color, #80d485);
  width: 0.75em;
  height: 0.35em;
  top: calc(0.4em - 0.7 * (1em - 1rem));
  left: calc((30px - 0.9em) / 2 - 30px);
  transform-origin: center;
  transform: rotate(-45deg);
}

ul.cross-marks {
  list-style: none;
  padding-left: 0;
}
ul.cross-marks li + li {
  margin-top: 0.5em;
}

.cross, ul.cross-marks li {
  position: relative;
  margin-left: 30px !important;
}
.cross::before, ul.cross-marks li::before {
  position: absolute;
  left: -20px;
  content: "✕";
  font-weight: 800;
  color: var(--cross-mark-color, #fd5b52);
}

ul.question-marks {
  list-style: none;
  padding-left: 0;
}
ul.question-marks li + li {
  margin-top: 0.5em;
}

.question, ul.question-marks li {
  position: relative;
  margin-left: 30px !important;
}
.question::before, ul.question-marks li::before {
  position: absolute;
  left: -20px;
  content: "?";
  font-weight: 800;
  color: var(--question-mark-color, #fda93b);
}

ul.arrow-left-marks {
  list-style: none;
  padding-left: 0;
}
ul.arrow-left-marks li + li {
  margin-top: 0.5em;
}

.arrow-left, ul.arrow-left-marks li {
  position: relative;
  margin-left: 30px !important;
}
.arrow-left::before, ul.arrow-left-marks li::before {
  position: absolute;
  left: -20px;
  content: "←";
  font-weight: 800;
  color: var(--arrow-left-mark-color, #0bbccb);
}

ul.arrow-right-marks {
  list-style: none;
  padding-left: 0;
}
ul.arrow-right-marks li + li {
  margin-top: 0.5em;
}

.arrow-right, ul.arrow-right-marks li {
  position: relative;
  margin-left: 30px !important;
}
.arrow-right::before, ul.arrow-right-marks li::before {
  position: absolute;
  left: -20px;
  content: "→";
  font-weight: 800;
  color: var(--arrow-right-mark-color, #0bbccb);
}

.price .amount {
  font-weight: 600;
}

.with-symbol img {
  position: relative;
  top: 0.2em;
  height: 1.1em;
}

.required {
  color: #fd5b52;
  font-size: 1.2em;
  font-weight: 800;
  margin-left: 2px;
}

input[type=text], input[type=email], select, textarea, .button {
  font-family: "Studio Feixen Sans Variable";
  font-size: 16px;
  box-sizing: border-box;
  min-height: 2.8rem;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  border: none;
  border-radius: 4px;
}

input[type=text], input[type=email], select, textarea {
  width: 100%;
  max-width: 400px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: white;
}
input[type=text].short, input[type=email].short, select.short, textarea.short {
  max-width: 200px !important;
}

textarea {
  height: 10em;
  font-family: Arial, Helvetica, sans-serif;
}

.radio-set {
  gap: 10px;
}

.radio {
  gap: 10px;
  flex-wrap: nowrap;
  width: 100%;
}
.radio label {
  margin: 0;
}

form.container > label, form .container > label {
  display: block;
  margin: 15px 0 5px;
}
form.container > p.help, form.container > p.error, form .container > p.help, form .container > p.error {
  font-size: 0.75rem;
  margin: 5px 0;
}
form.container p.error, form .container p.error {
  color: #fd5b52;
}
form.container input:not([type=radio]), form.container select, form.container textarea, form .container input:not([type=radio]), form .container select, form .container textarea {
  margin: 0;
}

.button {
  cursor: pointer;
  display: inline-block;
  padding-left: 30px;
  padding-right: 30px;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: black;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
}
.button.conversion {
  color: black;
  background-color: #ffcc00;
}
.button.conversion:hover {
  background-color: #f5dd7b;
}
.button.navigation {
  color: white;
  background-color: #0ab599;
}
.button.navigation:hover {
  background-color: #0de5c2;
}
.button.action {
  color: white;
  background-color: #fda93b;
}
.button.action:hover {
  background-color: #febf6d;
}
.button > a {
  color: inherit;
  text-decoration: inherit;
}
.button[disabled] {
  color: #f4f4f4;
  background-color: #d0d0d0;
}

input:focus, textarea:focus, .button:focus, select:focus {
  outline-color: #0bbccb;
}

img.icon {
  width: 70px;
  display: block;
}

.item {
  display: flex;
  align-items: center;
  gap: 20px;
}
.item img {
  width: 40px;
}
.item p {
  margin: 0;
}

.items {
  font-weight: 600;
}
.items > * {
  margin: 0;
  padding: 0;
}
.items > *:not(:first-child) {
  padding-top: 10px;
}
.items > *:not(:last-child) {
  padding-bottom: 10px;
  border-bottom: 1px #d0d0d0 solid;
}

ul.items {
  list-style: none;
  padding-inline-start: 0;
}

img.photo {
  display: block;
  width: 100%;
}

.tags {
  display: flex;
  gap: 1em;
  margin: 0;
}

.tag {
  border-radius: 3px;
  text-transform: uppercase;
  padding: 3px 5px 2px;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 300;
}
.tag.intro {
  background-color: #80d485;
}
.tag.advanced {
  background-color: #0bbccb;
}
.tag.expert {
  background-color: #fd5b52;
}
.tag.popular {
  background-color: #fda93b;
}
.tag.new {
  background-color: #ffcc00;
}
.tag.coming-soon {
  background-color: #fd5b52;
}

.course-box > * {
  margin: 0;
  padding: 0;
}
.course-box > *:not(:first-child) {
  padding-top: 30px;
}
.course-box > *:not(:last-child) {
  padding-bottom: 30px;
  border-bottom: 2px #d0d0d0 solid;
}
.course-box h2 {
  margin: 0;
}

.course {
  scroll-margin-top: 70px;
}

.detail {
  width: 100%;
}
.detail h3 a {
  text-decoration: none;
  color: black;
}

.toggle-button {
  cursor: pointer;
  text-decoration: underline;
}
.toggle-button::after {
  content: "↑";
  display: inline-block;
  color: #028097;
  font-size: 0.8em;
  margin-left: 5px;
  transition: transform 0.2s ease-out;
}
.toggle-button.collapsed::after {
  transform: rotate(180deg);
}

.book-cover {
  display: block;
}

.books *:not(:last-child) {
  margin-right: 30px;
}
.books .book-cover {
  height: 200px;
}

.card {
  flex: 1;
  display: flex;
  flex-flow: column nowrap;
  gap: 30px;
}
.card > * {
  margin: 0;
}
.card img.photo {
  width: 100%;
  max-width: 300px;
  display: block;
  box-shadow: -10px -10px 0 0 #0bbccb;
}
.card img.icon {
  width: 100px;
}

.cards {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  gap: 60px;
}
.cards > .card {
  margin: 0;
}
@media screen and (min-width: 512px) {
  .cards > .card {
    flex-direction: row;
  }
  .cards > .card img.photo {
    max-width: 50%;
  }
}
@media screen and (min-width: 768px) {
  .cards {
    flex-flow: row nowrap;
  }
  .cards > .card {
    flex-direction: column;
    max-width: 300px;
  }
  .cards > .card img.photo {
    max-width: 300px;
  }
}
@media screen and (min-width: 1366px) {
  .cards {
    gap: 90px;
  }
}

figure.customer-review blockquote {
  margin-left: 0;
  margin-right: 0;
}
figure.customer-review figcaption {
  font-size: 0.75rem;
  font-weight: 600;
  margin: 0.5em 0;
}
figure.customer-review.trusted .trust-score, figure.customer-review.trusted figcaption {
  margin: 0;
}

.reviewer {
  margin-top: 0.5em;
}
.reviewer::before {
  content: "– ";
}

.trust-score {
  gap: 1rem;
}
.trust-score img {
  height: 1.5rem;
}

.video-review-card {
  background-color: white;
}
.video-review-card .caption * {
  margin: 0.5em 0;
}
.video-review-card .caption blockquote::before {
  content: open-quote;
}
.video-review-card .caption blockquote::after {
  content: close-quote;
}

.video-review-thumbnail .badge, .video-review-thumbnail .student-name, .video-review-thumbnail .thumbnail {
  position: absolute;
}
.video-review-thumbnail.left {
  --badge-position: 25% ;
}
.video-review-thumbnail.right {
  --badge-position: 75% ;
}
.video-review-thumbnail .badge {
  width: 25%;
  top: 22.5%;
  left: calc(var(--badge-position) - 12.5%);
  border-radius: 50%;
  box-shadow: 0 0 50px white;
  z-index: 1;
}
.video-review-thumbnail.inverse .badge {
  box-shadow: 0 0 50px #333;
}
.video-review-thumbnail .student-name {
  width: 35%;
  top: 67.5%;
  left: calc(var(--badge-position) - 17.5%);
  z-index: 2;
  font-size: 3vw;
  line-height: 1.2em;
  text-transform: uppercase;
  text-align: center;
  font-weight: 600;
  color: white;
}
@media screen and (min-width: 1024px) {
  .video-review-thumbnail .student-name {
    font-size: 1em;
  }
}
@media screen and (min-width: 1366px) {
  .video-review-thumbnail .student-name {
    font-size: 1.2em;
  }
}
.video-review-thumbnail.inverse .student-name {
  color: #333;
}
.video-review-thumbnail .thumbnail {
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.psmpo-eq {
  gap: 15px;
  font-size: 1.4em;
  font-weight: 600;
}
.psmpo-eq img {
  display: block;
  width: 100%;
}
.psmpo-eq a {
  width: 23%;
}

@media screen and (min-width: 512px) {
  .psmpo-eq {
    font-size: 3em;
    font-weight: 600;
  }
  .psmpo-eq a {
    width: 100px;
  }
}
section.quote .quote-box {
  padding-top: 0;
  padding-bottom: 0;
  font-size: 1.2rem;
  background-color: transparent;
}

.quote-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  padding: 1em 2em;
  box-sizing: border-box;
  max-width: 415px;
  margin-left: auto;
  margin-right: auto;
  background-color: #eefcff;
}
.quote-box blockquote {
  margin: 0;
}
.quote-box p {
  margin: 0;
  text-align: center;
}
.quote-box p.author {
  font-size: 0.75rem;
  font-weight: 600;
}
.quote-box p.author::after {
  content: "ō";
  font-size: 1.5em;
  display: block;
  margin-top: 1em;
}
.quote-box.cyan {
  border-color: #0bbccb;
}
.quote-box.cyan em, .quote-box.cyan p.author::after {
  color: #0bbccb;
}
.quote-box.red {
  border-color: #fd5b52;
}
.quote-box.red em, .quote-box.red p.author::after {
  color: #fd5b52;
}
.quote-box.green {
  border-color: #0ab599;
}
.quote-box.green em, .quote-box.green p.author::after {
  color: #0ab599;
}
.quote-box.orange {
  border-color: #fda93b;
}
.quote-box.orange em, .quote-box.orange p.author::after {
  color: #fda93b;
}

.box.about-scrumdojo {
  background-color: #fcefe0;
}
.box.about-scrumdojo .items, .box.about-scrumdojo .customers {
  margin-top: 0;
}
.box.about-scrumdojo .customers {
  display: flex;
  gap: 20px;
  height: 60px;
  overflow-x: hidden;
  padding: 5px 10px;
  background-color: #fef9f3;
}
.box.about-scrumdojo .customers img {
  height: 100%;
}

#customers > .content {
  padding: 0;
}

.customers {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 30px 0;
}
.customers div:nth-child(n+16) {
  display: none;
}
@media screen and (max-width: 1023px) {
  .customers {
    grid-template-columns: repeat(4, 1fr);
  }
  .customers div:nth-child(n+13) {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .customers {
    grid-template-columns: repeat(3, 1fr);
  }
  .customers div:nth-child(n+10) {
    display: none;
  }
}
.customers div {
  position: relative;
  width: 100%;
  aspect-ratio: 12/7;
  margin: 0;
}
.customers div img {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
}
.customers div img.four-finance {
  width: 65%;
}
.customers div img.accenture {
  width: 62%;
}
.customers div img.alza {
  width: 62%;
}
.customers div img.batelco {
  width: 60%;
}
.customers div img.bisim {
  width: 60%;
}
.customers div img.btl {
  width: 62%;
}
.customers div img.certicon {
  width: 68%;
}
.customers div img.cetin {
  width: 60%;
}
.customers div img.cez {
  width: 47%;
}
.customers div img.cgi {
  width: 42%;
}
.customers div img.cngroup {
  width: 65%;
}
.customers div img.compacer {
  width: 65%;
}
.customers div img.conrad {
  width: 62%;
}
.customers div img.cs {
  width: 57%;
}
.customers div img.csob {
  width: 40%;
}
.customers div img.ct {
  width: 37%;
}
.customers div img.dbag {
  width: 77%;
}
.customers div img.direct {
  width: 46%;
}
.customers div img.easysw {
  width: 77%;
}
.customers div img.eset {
  width: 57%;
}
.customers div img.foxconn {
  width: 65%;
}
.customers div img.generali {
  width: 43%;
}
.customers div img.heineken {
  width: 65%;
}
.customers div img.hp {
  width: 32%;
}
.customers div img.invia {
  width: 50%;
}
.customers div img.kb {
  width: 57%;
}
.customers div img.kosik {
  width: 65%;
}
.customers div img.msd {
  width: 60%;
}
.customers div img.nato {
  width: 62%;
}
.customers div img.outreach {
  width: 71%;
}
.customers div img.rb {
  width: 62%;
}
.customers div img.rohlik {
  width: 50%;
}
.customers div img.seznam {
  width: 68%;
}
.customers div img.siemens {
  width: 62%;
}
.customers div img.skoda {
  width: 47%;
}
.customers div img.tfs {
  width: 62%;
}
.customers div img.tieto {
  width: 71%;
}
.customers div img.t-mobile {
  width: 29%;
}
.customers div img.webnode {
  width: 65%;
}
.customers div img:nth-child(2) {
  opacity: 0;
  transition: opacity 0.25s ease-in;
}
.customers div img:nth-child(2):hover {
  opacity: 1;
}

#signup-form #submit-signup-form {
  width: 100%;
  max-width: 400px;
}

#photos {
  overflow: hidden;
}
#photos .content {
  width: 100vw;
  max-width: 100%;
  padding: 0;
  margin-bottom: -1px;
}
#photos img {
  display: block;
  width: auto;
  height: 65vw;
  padding: 0;
}
@media screen and (min-width: 768px) {
  #photos img {
    height: 500px;
  }
}

.trainer-tile {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 60px;
}
.trainer-tile > img {
  min-width: 100px;
  border-radius: 50%;
}
.trainer-tile .trainer-profiles {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.trainer-tile .trainer-links {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  font-weight: 600;
}
.trainer-tile .trainer-links a {
  color: black;
}
.trainer-tile .trainer-badges {
  display: flex;
}
.trainer-tile .trainer-badges .badge {
  width: 120px;
}
.trainer-tile .trainer-badges .badge:nth-child(2) {
  margin-left: -20px;
  z-index: 1;
}
.trainer-tile .trainer-badges .badge.cst, .trainer-tile .trainer-badges .badge.cec {
  transform: scale(1.14);
  transform-origin: center center;
}

@media screen and (min-width: 512px) {
  .trainer-tile {
    flex-wrap: nowrap;
  }
}
#cookies-bar {
  position: fixed;
  box-sizing: border-box;
  width: 100%;
  left: 0;
  bottom: 0;
  transform: translateY(0%);
  transition: transform 0.5s ease-in-out;
  transition-delay: 0.1s;
  border: 10px solid black;
  background-color: #222;
  opacity: 95%;
  color: white;
}
#cookies-bar.hidden {
  transform: translateY(100%);
}
#cookies-bar .content {
  padding-top: 30px;
  padding-bottom: 30px;
}
#cookies-bar .content a {
  color: white;
}
#cookies-bar .content > * {
  margin: 0;
}
#cookies-bar .content .button {
  font-size: 16px;
}
#cookies-bar .content .reject {
  color: #fc908d;
  background-color: #222;
  border: 2px solid #fc908d;
}

@media screen and (min-width: 1024px) {
  #cookies-bar > .content {
    flex-wrap: nowrap;
  }
}
#registration-page .course-date-table {
  gap: 0;
  width: auto;
  padding: 15px;
}
#registration-page .course-date-table .radio {
  gap: 10px;
}
#registration-page #registration-form .form-section {
  margin-top: 30px;
  margin-bottom: 30px;
}
#registration-page #registration-form .form-section > * {
  margin: 0;
  padding: 0;
}
#registration-page #registration-form .form-section > *:not(:first-child) {
  padding-top: 20px;
}
#registration-page #registration-form .form-section > *:not(:last-child) {
  padding-bottom: 20px;
  border-bottom: 2px #d0d0d0 solid;
}
#registration-page #registration-form .course-date-table {
  margin-top: 10px;
  margin-bottom: 30px;
}
#registration-page #registration-form .group-discounts collapsible-content > .container {
  margin-top: 15px;
}
#registration-page #registration-form .group-discounts h3 {
  margin: 0;
}
#registration-page #registration-form .attendee-box label {
  display: block;
  margin: 15px 0 5px;
}
#registration-page #registration-form .summary .course-date-table {
  margin: 1rem 0;
}
#registration-page #registration-form .radio-set > .radio:has(> input[type=radio]:first-child:checked) > .course-date {
  border-radius: 2px;
  background-color: white;
  box-shadow: -2.5px 2.5px 0 2.5px white, -2.5px -2.5px 0 2.5px white;
}
#registration-page #company-no-row {
  margin: 0;
  max-width: 400px;
}
#registration-page #company-no-row .button {
  padding: 0;
  flex: 1;
}
#registration-page #company-no-row .loading {
  background-color: #d0d0d0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
#registration-page #company-no-row .loading > div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 32px;
  height: 32px;
  margin: 2px;
  border: 5px solid #fff;
  border-radius: 50%;
  animation: ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
#registration-page #company-no-row .loading > div:nth-child(1) {
  animation-delay: -0.45s;
}
#registration-page #company-no-row .loading > div:nth-child(2) {
  animation-delay: -0.3s;
}
#registration-page #company-no-row .loading > div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
#registration-page #price-box .box {
  background-color: #e7f2e7;
}
@media screen and (max-width: 1023px) {
  #registration-page #price-box {
    position: fixed;
    inset: 100px 0 auto auto;
    transition: top 0.2s linear;
    margin: 0;
    width: 100%;
  }
  #registration-page #price-box > .box.no-price {
    display: none;
  }
  #registration-page #price-box.shrink {
    top: 70px;
  }
  #registration-page #price-box .box {
    opacity: 0.95;
    padding: 15px 30px;
    border-bottom: 10px solid #80d485;
  }
  #registration-page #price-box .box h2, #registration-page #price-box .box p.help {
    display: none;
  }
  #registration-page #price-box .box p.price-row {
    margin: 0;
    font-size: 0.9em;
  }
  #registration-page #price-box .box p.price-row.final-price {
    padding-top: 0;
  }
}
@media screen and (max-width: 511px) {
  #registration-page #price-box {
    top: 70px;
  }
}
#registration-page #price-box p.price-row, #registration-page .summary p.price-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15em 1em;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 0;
}
#registration-page #price-box p.price-row > span, #registration-page .summary p.price-row > span {
  display: block;
}
#registration-page #price-box p.price-row > span.price, #registration-page .summary p.price-row > span.price {
  margin-left: auto;
}
#registration-page #price-box p.price-row .vat, #registration-page .summary p.price-row .vat {
  font-size: 0.75rem;
  color: #333;
}
#registration-page #price-box p.price-row.final-price, #registration-page .summary p.price-row.final-price {
  border-top: 2px solid #d0d0d0;
  padding-top: 1em;
}
#registration-page #price-box p.help, #registration-page .summary p.help {
  font-size: 0.75rem;
  color: #333;
  margin-top: 0;
}

section {
  display: flex;
  justify-content: center;
  border-top: 5px solid black;
  border-bottom: 5px solid black;
}
section > .content {
  box-sizing: border-box;
  width: 100%;
  padding: 60px 30px;
}

@media screen and (min-width: 512px) {
  section > .content {
    padding-top: 90px;
    padding-bottom: 90px;
  }
  section > .content {
    width: 90%;
    padding-left: 0;
    padding-right: 0;
  }
  section.sticky > .content, section.compact > .content {
    padding: 30px;
  }
}
@media screen and (min-width: 1024px) {
  section.full > .content {
    width: 960px;
  }
  section:not(.full) > .content {
    padding-left: 30px;
    padding-right: 30px;
  }
  section.compact > .content, section.compacth > .content, section.narrow > .content {
    padding-left: 30px;
    padding-right: 30px;
  }
  section.half > .content {
    width: 475px;
  }
  section.wide > .content {
    width: 575px;
  }
  section.narrow > .content {
    width: 375px;
  }
  section.left > .content {
    padding-left: 0;
  }
  section.right > .content {
    padding-right: 0;
  }
  section.left {
    border-right: 5px solid black;
    justify-content: flex-end;
  }
  section.right {
    border-left: 5px solid black;
    justify-content: flex-start;
  }
  section.sticky > .content > *:first-child {
    position: -webkit-sticky;
    position: sticky;
  }
}
@media screen and (min-width: 1366px) {
  section.full > .content {
    width: 1200px;
  }
  section:not(.full) > .content {
    padding-left: 90px;
    padding-right: 90px;
  }
  section.compact > .content, section.compacth > .content, section.narrow > .content {
    padding-left: 30px;
    padding-right: 30px;
  }
  section.half > .content {
    width: 595px;
  }
  section.wide > .content {
    width: 745px;
  }
  section.narrow > .content {
    width: 445px;
  }
  section.left > .content {
    padding-left: 0;
  }
  section.right > .content {
    padding-right: 0;
  }
}
section.no-tatami, section.no-tatami-top {
  border-top: none;
}

section.no-tatami, section.no-tatami-bottom {
  border-bottom: none;
}

section.single > .content,
section.double > .content, div.double {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
section.single > .content > *,
section.double > .content > *, div.double > * {
  min-width: 0;
  max-width: 100%;
}
@media screen and (min-width: 1024px) {
  section.single > .content,
  section.double > .content, div.double {
    align-items: center;
  }
  section.single > .content > h1, section.single > .content > p.subtitle,
  section.double > .content > h1,
  section.double > .content > p.subtitle, div.double > h1, div.double > p.subtitle, tabbed-content.about-you > div.double:not([slot]) > p:first-child {
    text-align: center;
  }
  section.single > .content > *,
  section.double > .content > *, div.double > * {
    box-sizing: border-box;
  }
}

section.double > .content, div.double {
  gap: 60px 90px;
}
section.double > .content > *, div.double > * {
  margin: 0;
}
@media screen and (min-width: 1024px) {
  section.double > .content, div.double {
    flex-flow: row nowrap;
    align-items: flex-start;
    gap: 60px;
  }
  section.double > .content > *, div.double > * {
    flex: 1 1 50%;
  }
}

section.photo {
  background-position: center;
  background-size: cover;
  min-height: 450px;
}
section.photo > .content > .badge {
  margin: auto;
  width: 100%;
  max-width: 300px;
}
@media screen and (min-width: 1024px) {
  section.photo > .content {
    display: flex;
    align-items: flex-end;
    padding: 60px;
  }
  section.photo > .content > .badge {
    margin: 0;
  }
}

@media screen and (max-width: 511px) {
  section > .content > .box, section > .content > tabbed-content, section > .content > .container > .box, section > .content > .double > .box {
    margin: 60px -30px;
  }
  section > .content > tabbed-content {
    max-width: none !important;
  }
  section > .content > .box:first-child, section > .content > .container > .box:first-child {
    margin-top: -60px !important;
    padding-top: 60px;
  }
  section > .content > .box:last-child, section > .content > .container > .box:last-child, section > .content > .double > .box:last-child {
    margin-bottom: -60px !important;
    padding-bottom: 60px;
  }
}
#navbar-hamburger {
  box-sizing: border-box;
  width: 30px;
  height: 26px;
  cursor: pointer;
  position: relative;
  z-index: 99999;
}
#navbar-hamburger span, #navbar-hamburger::before, #navbar-hamburger::after {
  content: "";
  display: block;
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background-color: white;
  transition: all 0.2s ease-out;
}
#navbar-hamburger::before {
  top: 0;
}
#navbar-hamburger span {
  top: 11.5px;
}
#navbar-hamburger::after {
  bottom: 0;
}
#navbar-hamburger.open::before {
  transform: translateY(11.5px) rotate(45deg);
  background-color: #333;
}
#navbar-hamburger.open span {
  opacity: 0;
}
#navbar-hamburger.open::after {
  transform: translateY(-11.5px) rotate(-45deg);
  background-color: #333;
}

@keyframes slideIn {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slideOut {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
header {
  position: fixed;
  inset: 0 0 auto auto;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  z-index: 99999;
  display: flex;
  padding: 0 30px;
}
header + * {
  border-top: 5px solid black;
}
header #navbar-brand {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  justify-content: space-between;
}
header #navbar-menu {
  display: none;
  position: fixed;
  inset: 0 0 auto auto;
  box-sizing: border-box;
  width: 400px;
  height: 100dvh;
  z-index: 20000;
  padding: 60px 30px;
}
header #navbar-menu.open {
  display: block;
  animation: slideIn 0.2s ease-out;
  overflow-y: scroll;
}
header #navbar-menu.open.closing {
  animation: slideOut 0.2s ease-out;
}
header #navbar-menu > ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
header #navbar-menu > ul > li {
  font-size: 1.1rem;
  margin: 1em 0;
}
@media screen and (max-width: 450px) {
  header #logo {
    font-size: 3vw;
  }
  header #navbar-menu.open {
    width: 90%;
  }
}
@media screen and (min-width: 768px) {
  header {
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
  }
  header #navbar-brand {
    width: auto;
  }
  header #navbar-hamburger {
    display: none;
  }
  header #navbar-menu {
    display: block;
    position: static;
    padding: 0;
    box-sizing: border-box;
    width: auto;
    height: auto;
  }
  header #navbar-menu > ul {
    display: flex;
    gap: 30px;
    align-items: center;
  }
}
header .dropdown-label {
  display: block;
  font-size: 1.1rem;
  margin: 0;
}
header .dropdown-button {
  cursor: pointer;
}
header .dropdown-button::after {
  content: "↓";
  display: inline-block;
  color: #0bbccb;
  font-size: 0.8em;
  margin-left: 5px;
  transition: transform 0.2s ease-out;
}
@media screen and (min-width: 768px) {
  header .dropdown-button::after {
    color: #d0d0d0;
  }
}
header .dropdown-button.open {
  text-decoration: underline;
}
header .dropdown-button.open::after {
  transform: rotate(-180deg);
}
header .dropdown-menu {
  display: none;
}
header .dropdown-menu.open {
  display: block;
  animation: slideIn 0.2s ease-out;
  overflow-y: scroll;
}
header .dropdown-menu.open.closing {
  animation: slideOut 0.2s ease-out;
}
header .dropdown-menu {
  background-color: #eaeaea;
}
header .dropdown-menu .submenu-group {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  header .dropdown-menu {
    padding: 30px 0;
  }
  header .dropdown-menu .submenu-group {
    display: flex;
    flex-wrap: wrap;
    column-gap: 30px;
    max-width: 90%;
  }
  header .dropdown-menu .submenu-group:first-child > .submenu > .submenu-title {
    margin-top: 0;
  }
}
@media screen and (min-width: 1024px) {
  header .dropdown-menu .submenu-group {
    max-width: 960px;
    column-gap: 0;
  }
  header .dropdown-menu .submenu-group > *:not(:first-child) {
    margin-left: -15px;
  }
}
@media screen and (min-width: 1366px) {
  header .dropdown-menu .submenu-group {
    max-width: 1200px;
    column-gap: 30px;
  }
  header .dropdown-menu .submenu-group > * {
    margin-left: 0;
  }
}
header .dropdown-menu .submenu-group > .submenu > .submenu-title {
  color: black;
  font-size: 1rem;
  margin: 15px 0 5px 0;
}
header .dropdown-menu .submenu-group > .submenu > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  width: auto;
  box-sizing: border-box;
  background-color: white;
  list-style: none;
}
header .dropdown-menu .submenu-group > .submenu > ul > li.submenu-item {
  box-sizing: border-box;
  width: 100%;
  height: 60px;
  background-color: #f4f4f4;
  border-radius: 4px;
}
header .dropdown-menu .submenu-group > .submenu > ul > li.submenu-item:hover {
  background-color: #eaeaea;
}
header .dropdown-menu .submenu-group > .submenu > ul > li.submenu-item > a, header .dropdown-menu .submenu-group > .submenu > ul > li.submenu-item > span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: black;
}
header .dropdown-menu .submenu-group > .submenu > ul > li.submenu-item > a .badge, header .dropdown-menu .submenu-group > .submenu > ul > li.submenu-item > span .badge {
  flex-shrink: 0;
  width: 50px;
}
header .dropdown-menu .submenu-group > .submenu > ul > li.submenu-item > a p, header .dropdown-menu .submenu-group > .submenu > ul > li.submenu-item > span p {
  font-size: 0.8rem;
  margin: 0;
}
header .dropdown-menu .submenu-group > .submenu > ul > li.submenu-item > a .tag, header .dropdown-menu .submenu-group > .submenu > ul > li.submenu-item > span .tag {
  display: inline-block;
  line-height: normal;
  font-size: 0.6em;
}
header .dropdown-menu .submenu-group > .submenu > ul > li.submenu-item.smdojo {
  background-color: #333;
}
header .dropdown-menu .submenu-group > .submenu > ul > li.submenu-item.smdojo:hover {
  background-color: #222;
}
header .dropdown-menu .submenu-group > .submenu > ul > li.submenu-item.smdojo a {
  color: white;
}
@media screen and (min-width: 768px) {
  header .dropdown-menu .submenu-group > .submenu > ul {
    gap: 15px;
    padding: 15px;
  }
  header .dropdown-menu .submenu-group > .submenu > ul > li.submenu-item {
    box-sizing: border-box;
    width: 210px;
    height: 105px;
  }
}
@media screen and (min-width: 1024px) {
  header .dropdown-menu .submenu-group > .submenu > ul > li.submenu-item {
    width: 220px;
  }
}
@media screen and (min-width: 768px) {
  header .dropdown-menu {
    overflow-y: scroll;
    max-height: 85dvh;
    display: none;
    position: absolute;
    inset: auto 0 auto auto;
    box-sizing: border-box;
    width: 100%;
    height: auto;
  }
  header .dropdown-menu.open {
    display: block;
    animation: fadeIn 0.2s ease-out;
    overflow-y: scroll;
  }
  header .dropdown-menu.open.closing {
    animation: fadeOut 0.2s ease-out;
  }
}

header {
  height: 70px;
}
@media screen and (min-width: 512px) {
  header {
    height: 100px;
    transition: height 0.2s linear;
  }
  header.shrink {
    height: 70px;
  }
}
header #logo {
  font-size: 0.7rem;
}
@media screen and (min-width: 512px) {
  header #logo {
    font-size: 1rem;
    transition: font-size 0.2s linear;
  }
  header.shrink #logo {
    font-size: 0.7rem;
  }
}
header + * {
  margin-top: 60px;
}
@media screen and (min-width: 512px) {
  header + * {
    margin-top: 90px;
    transition: margin-top 0.2s linear;
  }
  header.shrink + * {
    margin-top: 60px;
  }
}
@media screen and (min-width: 768px) {
  header .dropdown-menu {
    top: 60px;
  }
}
@media screen and (min-width: 768px) and (min-width: 512px) {
  header .dropdown-menu {
    top: 90px;
    transition: top 0.2s linear;
  }
  header.shrink .dropdown-menu {
    top: 60px;
  }
}

header {
  background-color: #222;
  border-bottom: 10px solid black;
}
header, header a {
  color: white;
  text-decoration: none;
}
header #navbar-menu {
  background-color: #eaeaea;
}
header #navbar-menu.open {
  border-left: 10px solid #fd5b52;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.4);
}
header .dropdown-label {
  text-decoration: none;
}
header .dropdown-label:hover {
  text-decoration: underline;
}
header .dropdown-label, header .dropdown-label a {
  color: black;
}
@media screen and (min-width: 768px) {
  header .dropdown-label, header .dropdown-label a {
    color: white;
  }
}

@media screen and (min-width: 768px) {
  header #navbar-menu {
    background-color: transparent;
  }
  header .dropdown-menu {
    border-top: 10px solid #fd5b52;
    border-bottom: 10px solid #fd5b52;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.4);
  }
}
#logo {
  font-size: 1rem;
}
#logo * {
  margin: 0;
}
#logo h1 {
  font-size: 2em;
}
#logo .dojo {
  color: #fd5b52;
}
#logo p {
  font-weight: 600;
  font-size: 1em;
}
#logo .tagline {
  color: #0bbccb;
}

section.full.tatami::before, section.full.tatami::after {
  display: block;
  content: "";
}
@media screen and (max-width: 1199px) {
  section.full.tatami {
    flex-direction: column;
    align-items: center;
  }
  section.full.tatami::before, section.full.tatami::after {
    width: 100%;
    min-height: 60px;
    display: none;
  }
  section.full.tatami::before {
    border-bottom: 10px solid black;
  }
  section.full.tatami::after {
    border-top: 10px solid black;
  }
}
@media screen and (min-width: 1200px) {
  section.full.tatami {
    overflow-x: hidden;
  }
  section.full.tatami::before, section.full.tatami::after {
    flex: 1;
  }
  section.full.tatami::before {
    border-right: 10px solid black;
  }
  section.full.tatami::after {
    border-left: 10px solid black;
  }
  section.full.tatami > .content {
    padding-left: 60px;
    padding-right: 60px;
    box-sizing: content-box;
    position: relative;
  }
  section.full.tatami > .content::before {
    display: block;
    content: "";
    position: absolute;
    left: -80px;
    margin-top: -90px;
    height: 100%;
    width: 60px;
    border-left: 10px solid black;
  }
}
section.full.tatami.orange-cyan::before {
  background-color: #fda93b;
}
section.full.tatami.orange-cyan::after, section.full.tatami.orange-cyan > .content::before {
  background-color: #0bbccb;
}
section.full.tatami.orange-cyan > .content > *:nth-child(2) {
  box-shadow: -15px -15px 0px 0px #0bbccb;
}
section.full.tatami.cyan-red::before {
  background-color: #0bbccb;
}
section.full.tatami.cyan-red::after, section.full.tatami.cyan-red > .content::before {
  background-color: #fd5b52;
}
section.full.tatami.cyan-red > .content > *:nth-child(2) {
  box-shadow: -15px -15px 0px 0px #fd5b52;
}
section.full.tatami.red-green::before {
  background-color: #fd5b52;
}
section.full.tatami.red-green::after, section.full.tatami.red-green > .content::before {
  background-color: #0ab599;
}
section.full.tatami.red-green > .content > *:nth-child(2) {
  box-shadow: -15px -15px 0px 0px #0ab599;
}
section.full.tatami.green-orange::before {
  background-color: #0ab599;
}
section.full.tatami.green-orange::after, section.full.tatami.green-orange > .content::before {
  background-color: #fda93b;
}
section.full.tatami.green-orange > .content > *:nth-child(2) {
  box-shadow: -15px -15px 0px 0px #fda93b;
}

#page-navigation {
  overflow-x: scroll;
  scrollbar-width: none;
  background-color: black;
  position: sticky;
  top: 65px;
  z-index: 10000;
  border-bottom: 10px solid black;
  margin-bottom: -5px;
}
#page-navigation::-webkit-scrollbar {
  display: none;
}
#page-navigation > nav.content {
  padding-top: 0;
  padding-bottom: 0;
  flex-shrink: 0;
}
#page-navigation > nav > ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  gap: 20px;
  flex-flow: row nowrap;
  align-items: center;
}
#page-navigation > nav > ul > li {
  flex-shrink: 0;
}
#page-navigation > nav > ul > li:last-child {
  padding-right: 30px;
}
#page-navigation > nav > ul > li .badge {
  width: 40px;
}
#page-navigation > nav > ul > li .button {
  font-size: 0.9rem;
  padding-top: 0.47em;
  padding-bottom: 0.47em;
  padding-left: 20px;
  padding-right: 20px;
  min-height: 40px;
  color: #d0d0d0;
  border-color: #d0d0d0;
  background-color: black;
  border: 1px solid #333;
}
#page-navigation > nav > ul > li .button:hover {
  color: #eaeaea;
  border-color: #eaeaea;
}
#page-navigation > nav > ul > li .button.conversion {
  color: #ffcc00;
  border-color: #ffcc00;
}
#page-navigation > nav > ul > li .button.conversion:hover {
  color: #f5dd7b;
  border-color: #f5dd7b;
}
#page-navigation > nav > ul > li .button.blue {
  color: #028097;
  border-color: #028097;
}
#page-navigation > nav > ul > li .button.blue:hover {
  color: #2dacb5;
  border-color: #2dacb5;
}
#page-navigation > nav > ul > li .button:hover {
  background-color: #222;
}

body {
  scroll-margin-top: 100px;
}

body > div:not(.has-page-navigation) section[id] {
  scroll-margin-top: 65px;
}
body > div:not(.has-page-navigation) h2[id], body > div:not(.has-page-navigation) div[id] {
  scroll-margin-top: 100px;
}
body > div:not(.has-page-navigation) section.sticky > .content > *:first-child {
  top: 100px;
}

body > div.has-page-navigation section[id] {
  scroll-margin-top: 115px;
}
body > div.has-page-navigation h2[id], body > div.has-page-navigation div[id] {
  scroll-margin-top: 150px;
}
body > div.has-page-navigation section.sticky > .content > *:first-child {
  top: 150px;
}

footer {
  display: grid;
  grid-template: "contacts" "ptn" "copyright"/auto;
}
footer #contacts {
  grid-area: contacts;
}
footer #ptn {
  grid-area: ptn;
}
footer #copyright {
  grid-area: copyright;
}
footer > * {
  min-width: 0;
}
@media screen and (min-width: 1024px) {
  footer {
    grid-template: "contacts  contacts  contacts  ptn" "copyright copyright copyright copyright"/auto 100px 100px auto;
  }
}
@media screen and (min-width: 1366px) {
  footer {
    grid-template: "contacts  contacts  contacts  ptn" "copyright copyright copyright copyright"/auto 150px 150px auto;
  }
}
footer #ptn .content {
  display: flex;
  justify-content: center;
}
footer #ptn .content .flex-pane {
  align-items: center !important;
}
footer #ptn .content .badge {
  width: 150px;
}
footer #ptn .content p {
  margin: 0;
}
footer #copyright {
  border-bottom: none;
}
footer #copyright > .content {
  padding-top: 1em;
  padding-bottom: 1em;
}
footer #copyright > .content p {
  text-align: center;
}

#beer-page {
  display: grid;
  grid-template: "logo" "about" "newsletter" "photos"/auto;
}
#beer-page #beer-logo {
  grid-area: logo;
}
#beer-page #beer-about {
  grid-area: about;
}
#beer-page #beer-newsletter {
  grid-area: newsletter;
}
#beer-page #photos {
  grid-area: photos;
}
#beer-page > * {
  min-width: 0;
}
@media screen and (min-width: 1024px) {
  #beer-page {
    grid-template: "logo       logo   logo   logo" "newsletter about  about  about" "photos     photos photos photos"/auto 100px 100px auto;
  }
}
@media screen and (min-width: 1366px) {
  #beer-page {
    grid-template: "logo       logo   logo   logo" "newsletter about  about  about" "photos     photos photos photos"/auto 150px 150px auto;
  }
}
#beer-page #beer-logo {
  background-image: url("/img/beer/hero.jpg");
}
#beer-page #beer-logo .content {
  padding: 180px 0;
}

#how-to-prepare-page {
  display: grid;
  grid-template: "hero" "navigation" "how-to" "useful-tips" "write-us" "what-is" "beer" "beer-photo" "customers"/auto;
}
#how-to-prepare-page #hero {
  grid-area: hero;
}
#how-to-prepare-page #sidebar {
  grid-area: sidebar;
}
#how-to-prepare-page #navigation {
  grid-area: navigation;
}
#how-to-prepare-page #how-to {
  grid-area: how-to;
}
#how-to-prepare-page #useful-tips {
  grid-area: useful-tips;
}
#how-to-prepare-page #write-us {
  grid-area: write-us;
}
#how-to-prepare-page #what-is {
  grid-area: what-is;
}
#how-to-prepare-page #beer {
  grid-area: beer;
}
#how-to-prepare-page #beer-photo {
  grid-area: beer-photo;
}
#how-to-prepare-page #customers {
  grid-area: customers;
}
#how-to-prepare-page #sidebar {
  display: none;
}
@media screen and (min-width: 1024px) {
  #how-to-prepare-page #navigation, #how-to-prepare-page #useful-tips {
    display: none;
  }
  #how-to-prepare-page #sidebar {
    display: flex;
  }
}
#how-to-prepare-page > * {
  min-width: 0;
}
@media screen and (min-width: 1024px) {
  #how-to-prepare-page {
    grid-template: "hero      hero      hero       hero" "sidebar   how-to    how-to     how-to" "write-us  write-us  write-us   write-us" "what-is   what-is   beer       beer" "what-is   what-is   beer       beer" "customers customers customers  customers"/auto 100px 100px auto;
  }
}
@media screen and (min-width: 1366px) {
  #how-to-prepare-page {
    grid-template: "hero      hero      hero       hero" "sidebar   how-to    how-to     how-to" "write-us  write-us  write-us   write-us" "what-is   what-is   beer       beer" "what-is   what-is   beer       beer" "customers customers customers  customers"/auto 150px 150px auto;
  }
}
#how-to-prepare-page .box.tips ul {
  padding-left: 10px;
}
#how-to-prepare-page .box.tips ul li {
  margin: 10px;
}
#how-to-prepare-page #how-to .book-cover {
  display: block;
  width: 120px;
}
#how-to-prepare-page #beer {
  display: flex;
  flex-direction: column;
}
#how-to-prepare-page #beer #beer-invite img {
  max-height: 2.5rem;
}
#how-to-prepare-page #beer #beer-photo {
  flex-grow: 1;
}

tabbed-content.about-you div[slot] {
  display: flex;
  align-items: center;
  gap: 20px;
}
tabbed-content.about-you div[slot] > * {
  margin: 0;
}
tabbed-content.about-you div[slot] h3 {
  font-size: 1rem;
  font-weight: normal;
}
tabbed-content.about-you div[slot] h3 span {
  font-weight: 600;
}
@media screen and (max-width: 767px) {
  tabbed-content.about-you div[slot] {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media screen and (max-width: 511px) {
  tabbed-content.about-you div[slot] {
    gap: 10px;
  }
  tabbed-content.about-you div[slot] h3 {
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 389px) {
  tabbed-content.about-you div[slot] {
    gap: 10px;
  }
  tabbed-content.about-you div[slot] h3 {
    font-size: 0.85rem;
  }
}
tabbed-content.about-you div[slot] .icon {
  width: 40px;
  min-width: 40px;
  flex-shrink: 0;
}
tabbed-content.about-you > div:not([slot]) > * {
  margin: 30px auto;
}
tabbed-content.about-you > div:not([slot]) > p:first-child {
  padding: 0.5em;
  text-align: center;
  color: #555 !important;
}
tabbed-content.about-you > div:not([slot]) > ul li h4 {
  margin: 0;
}
tabbed-content.about-you > div:not([slot]) > ul li p {
  margin-top: 0.2em;
}
tabbed-content.about-you > div:not([slot]) > ul li + li {
  margin-top: 1.5em;
}
tabbed-content.about-you > div:not([slot]) > .course-recommendation {
  background-color: #eefcff;
}

.course-recommendation {
  margin-top: 60px;
  flex-wrap: nowrap;
  max-width: 400px;
}
.course-recommendation .badge {
  width: 80px;
}
@media screen and (max-width: 511px) {
  .course-recommendation {
    max-width: none;
    margin-left: -30px;
    margin-right: -30px;
    margin-bottom: -30px !important;
  }
}

.certification-box .badge {
  width: 200px;
}

table.comparison {
  width: calc(100% + 10px);
  max-width: calc(100% + 10px);
  border-spacing: 5px;
  margin: -5px;
  --check-mark-color: #0ab599;
  --cross-mark-color: #fd5b52;
}
table.comparison th > div {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: center;
}
table.comparison th > div .icon {
  width: 40px;
  flex-shrink: 0;
}
table.comparison th {
  padding: 5px 15px;
  text-align: left;
}
table.comparison td {
  width: 50%;
  padding: 15px 10px 15px 5px;
  vertical-align: top;
}
table.comparison td p {
  margin: 0;
}
@media screen and (max-width: 511px) {
  table.comparison th, table.comparison td {
    padding: 5px 5px 5px 0;
    font-size: 0.9em;
  }
}
table.comparison td:nth-child(1) {
  background-color: #ffeeec;
}
table.comparison td:nth-child(2) {
  background-color: #e7f2e7;
}
table.comparison tr:hover td:nth-child(1) {
  background-color: #fff7f6;
}
table.comparison tr:hover td:nth-child(2) {
  background-color: #f4f9f4;
}
table.comparison em {
  color: #0ab599;
}

#course-dates {
  background-color: #eaeaea;
}

#course-details .content > img {
  width: 100%;
}

@media screen and (max-width: 1023px) {
  section.course.photo .badge {
    display: none;
  }
}
@media screen and (min-width: 1024px) {
  section.course.hero .course-heading .badge {
    display: none;
  }
}
#course-hero .subtitle > em, #course-hero tabbed-content.about-you > div:not([slot]) > p:first-child > em, .hero .subtitle > em, .hero tabbed-content.about-you > div:not([slot]) > p:first-child > em {
  color: black;
  font-stretch: normal;
  text-transform: none;
  font-weight: normal;
  font-size: 1em;
}
@media screen and (min-width: 512px) {
  #course-hero .box, .hero .box {
    max-width: 350px;
  }
}
#course-hero carousel-pane.photos, .hero carousel-pane.photos {
  --carousel-pane-item-width: 100%;
  --youtube-video-height: 100%;
}
@media screen and (min-width: 768px) {
  #course-hero carousel-pane.photos, .hero carousel-pane.photos {
    max-width: 570px;
  }
}
@media screen and (max-width: 1023px) {
  #course-hero .content > carousel-pane, .hero .content > carousel-pane {
    width: 111.1111%;
    max-width: 111.1111%;
    margin-left: -5.55555%;
    margin-right: -5.55555%;
    --carousel-pane-item-width: 90%;
    margin-bottom: -90px !important;
    box-shadow: none;
    border-top: 10px solid black;
  }
}
@media screen and (max-width: 1023px) and (max-width: 511px) {
  #course-hero .content > carousel-pane, .hero .content > carousel-pane {
    width: calc(100% + 60px);
    max-width: calc(100% + 60px);
    margin-left: -30px;
    margin-right: -30px;
  }
}
@media screen and (max-width: 1023px) {
  #course-hero .content > carousel-pane > *, .hero .content > carousel-pane > * {
    max-width: 570px;
  }
}
@media screen and (max-width: 511px) {
  #course-hero .content > carousel-pane, .hero .content > carousel-pane {
    margin-bottom: -60px !important;
  }
}

#course-title .dates-title {
  margin: 3rem 0 1rem;
}
#course-title > .content > *:first-child {
  margin-bottom: 1rem;
}

.video-reviews, .text-reviews {
  padding: 0;
  --carousel-pane-item-width: 100%;
  --carousel-pane-pagitem-bgcolor: #d0d0d0;
}
@media screen and (max-width: 511px) {
  .video-reviews, .text-reviews {
    width: calc(100% + 60px);
    max-width: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}
.video-reviews::part(pagination), .text-reviews::part(pagination) {
  background-color: white;
  padding: 15px 30px;
  margin-bottom: 0;
  overflow-x: hidden;
}

.text-reviews > * {
  box-sizing: border-box;
  padding-top: 0;
}
@media screen and (min-width: 768px) {
  .text-reviews {
    box-sizing: border-box;
    --carousel-pane-item-width: 50%;
  }
}
@media screen and (min-width: 1024px) {
  .text-reviews {
    --carousel-pane-item-width: 100%;
  }
}

.datasheet-box {
  flex-wrap: nowrap;
}
.datasheet-box img {
  width: 50px;
}
.datasheet-box img, .datasheet-box p {
  margin: 0;
}

.right-place {
  --check-mark-color: #0bbccb;
}

.trainer-intro {
  --carousel-pane-item-width: 100%;
}
@media screen and (min-width: 512px) {
  .trainer-intro {
    box-sizing: border-box;
  }
}
.trainer-intro .trainer-card img {
  max-width: 350px;
  min-width: 0;
  height: auto;
  flex: 0 1 auto;
}
@media screen and (max-width: 767px) {
  .trainer-intro .trainer-card img {
    flex-basis: 30%;
    min-height: 0;
  }
}
.trainer-intro .trainer-card .container {
  flex: 1;
}
.trainer-intro .trainer-card .container h2, .trainer-intro .trainer-card .container .subtitle, .trainer-intro .trainer-card .container tabbed-content.about-you > div:not([slot]) > p:first-child {
  margin: 0;
}
.trainer-intro .trainer-card .container .bubble {
  margin-top: 45px;
}

.schedule-call {
  align-items: flex-start;
}
.schedule-call .avatar {
  align-items: flex-end;
  flex: 1 1 200px;
}
.schedule-call .avatar img {
  display: block;
  max-width: 200px;
  flex: 1 1 100px;
}
.schedule-call .avatar .avatar-name {
  flex: 1;
  min-width: 150px;
}
.schedule-call .need-help {
  flex: 1 1 calc(100% - 200px - 30px);
  min-width: 300px;
}
.schedule-call .need-help .bubble .quote {
  flex: 1;
  min-width: 240px;
}
.schedule-call .need-help .bubble .icon {
  flex: 0 0 40px;
}

#why-scrum-org .content > img {
  width: 90%;
  max-width: 350px;
}
#why-scrum-org .tiles {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 60px;
  gap: 60px;
}
#why-scrum-org .tiles .item {
  border: none;
  margin: 0;
  padding: 0;
}
#why-scrum-org .tiles .item p {
  font-weight: normal;
}
@media screen and (min-width: 768px) {
  #why-scrum-org .tiles .item {
    width: 45%;
  }
}

#course-page {
  display: grid;
  grid-template: "hero" "navigation" "differentiators" "dates" "sidebar" "details" "schedule-call" "photos" "why-scrum-org" "left-box" "right-box" "customers"/auto;
}
#course-page #course-hero {
  grid-area: hero;
}
#course-page #page-navigation {
  grid-area: navigation;
}
#course-page #differentiators {
  grid-area: differentiators;
}
#course-page #course-dates {
  grid-area: dates;
}
#course-page #course-details {
  grid-area: details;
}
#course-page #sidebar {
  grid-area: sidebar;
}
#course-page #schedule-call {
  grid-area: schedule-call;
}
#course-page #photos {
  grid-area: photos;
}
#course-page #why-scrum-org {
  grid-area: why-scrum-org;
}
#course-page .left-box {
  grid-area: left-box;
}
#course-page .right-box {
  grid-area: right-box;
}
#course-page #customers {
  grid-area: customers;
}
#course-page > * {
  min-width: 0;
}
@media screen and (min-width: 1024px) {
  #course-page {
    grid-template: "hero            hero            hero            hero" "navigation      navigation      navigation      navigation" "differentiators differentiators differentiators differentiators" "dates           dates           dates           sidebar" "details         details         details         sidebar" "schedule-call   schedule-call   schedule-call   schedule-call" "photos          photos          photos          photos" "why-scrum-org   why-scrum-org   why-scrum-org   why-scrum-org" "left-box        left-box        right-box       right-box" "customers       customers       customers       customers"/auto 100px 100px auto;
  }
}
@media screen and (min-width: 1366px) {
  #course-page {
    grid-template: "hero            hero            hero            hero" "navigation      navigation      navigation      navigation" "differentiators differentiators differentiators differentiators" "dates           dates           dates           sidebar" "details         details         details         sidebar" "schedule-call   schedule-call   schedule-call   schedule-call" "photos          photos          photos          photos" "why-scrum-org   why-scrum-org   why-scrum-org   why-scrum-org" "left-box        left-box        right-box       right-box" "customers       customers       customers       customers"/auto 150px 150px auto;
  }
}

#course-details #aps-sd-tech-stacks {
  justify-content: center;
}
#course-details #aps-sd-tech-stacks img {
  width: 80px;
}
#course-details #aps-sd-tech-stacks .java {
  width: 48px;
}
#course-details #aps-sd-tech-stacks .net, #course-details #aps-sd-tech-stacks .cpp {
  width: 56px;
}
#course-details #aps-sd-tech-stacks .nodejs {
  margin-bottom: -16px;
}
#course-details #aps-sd-tech-stacks .python {
  width: 120px;
  margin-right: -8px;
}

#psm-a-page {
  display: grid;
  grid-template: "hero" "navigation" "about-you" "differentiators" "customers" "facilitation" "reviews" "dates" "in-house" "topics" "photos" "certification" "why-scrum-org" "left-box" "right-box"/auto;
}
#psm-a-page #course-hero {
  grid-area: hero;
}
#psm-a-page #page-navigation {
  grid-area: navigation;
}
#psm-a-page #inspiration-photo {
  grid-area: inspiration-photo;
}
#psm-a-page #inspiration-review {
  grid-area: inspiration-review;
}
#psm-a-page #inspiration {
  grid-area: inspiration;
}
#psm-a-page #customers {
  grid-area: customers;
}
#psm-a-page #about-you {
  grid-area: about-you;
}
#psm-a-page #differentiators {
  grid-area: differentiators;
}
#psm-a-page #facilitation {
  grid-area: facilitation;
}
#psm-a-page #book {
  grid-area: book;
}
#psm-a-page #schedule-call {
  grid-area: schedule-call;
}
#psm-a-page #comparison {
  grid-area: comparison;
}
#psm-a-page #meet-trainers {
  grid-area: meet-trainers;
}
#psm-a-page #reviews {
  grid-area: reviews;
}
#psm-a-page #course-dates {
  grid-area: dates;
}
#psm-a-page #in-house {
  grid-area: in-house;
}
#psm-a-page #topics {
  grid-area: topics;
}
#psm-a-page #photos {
  grid-area: photos;
}
#psm-a-page #certification {
  grid-area: certification;
}
#psm-a-page #why-scrum-org {
  grid-area: why-scrum-org;
}
#psm-a-page .left-box {
  grid-area: left-box;
}
#psm-a-page .right-box {
  grid-area: right-box;
}
#psm-a-page > * {
  min-width: 0;
}
@media screen and (min-width: 1024px) {
  #psm-a-page {
    grid-template: "hero            hero            hero            hero" "navigation      navigation      navigation      navigation" "about-you       about-you       about-you       about-you" "differentiators differentiators differentiators differentiators" "facilitation    facilitation    facilitation    facilitation" "reviews         reviews         reviews         reviews" "dates           dates           dates           in-house" "topics          topics          topics          topics" "photos          photos          photos          photos" "certification   certification   certification   certification" "why-scrum-org   why-scrum-org   why-scrum-org   why-scrum-org" "left-box        left-box        right-box       right-box"/auto 100px 100px auto;
  }
}
@media screen and (min-width: 1366px) {
  #psm-a-page {
    grid-template: "hero            hero            hero            hero" "navigation      navigation      navigation      navigation" "about-you       about-you       about-you       about-you" "differentiators differentiators differentiators differentiators" "facilitation    facilitation    facilitation    facilitation" "reviews         reviews         reviews         reviews" "dates           dates           dates           in-house" "topics          topics          topics          topics" "photos          photos          photos          photos" "certification   certification   certification   certification" "why-scrum-org   why-scrum-org   why-scrum-org   why-scrum-org" "left-box        left-box        right-box       right-box"/auto 150px 150px auto;
  }
}
#psm-a-page #about-you .content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#psm-a-page #about-you .box {
  background-color: white;
}
#psm-a-page #about-you h1, #psm-a-page #about-you .subtitle, #psm-a-page #about-you tabbed-content.about-you > div:not([slot]) > p:first-child {
  text-align: center;
  color: black;
}
#psm-a-page #customers .content {
  padding-top: 60px;
}
#psm-a-page #customers .content * {
  margin: 0;
}
#psm-a-page #customers .content p.subtitle, #psm-a-page #customers .content tabbed-content.about-you > div:not([slot]) > p:first-child {
  text-align: center;
  padding-left: 30px;
  padding-right: 30px;
}
#psm-a-page #customers .content .customers {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
#psm-a-page #customers .content .customers div:nth-child(n+7) {
  display: none;
}
@media screen and (max-width: 1023px) {
  #psm-a-page #customers .content .customers {
    grid-template-columns: repeat(5, 1fr);
  }
  #psm-a-page #customers .content .customers div:nth-child(n+6) {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  #psm-a-page #customers .content .customers {
    grid-template-columns: repeat(4, 1fr);
  }
  #psm-a-page #customers .content .customers div:nth-child(n+5) {
    display: none;
  }
}
@media screen and (max-width: 511px) {
  #psm-a-page #customers .content .customers {
    grid-template-columns: repeat(3, 1fr);
  }
  #psm-a-page #customers .content .customers div:nth-child(n+7) {
    display: none;
  }
  #psm-a-page #customers .content .customers div:nth-child(5) {
    display: block;
  }
  #psm-a-page #customers .content .customers div:nth-child(6) {
    display: block;
  }
}
@media screen and (min-width: 1024px) {
  #psm-a-page #about-you tabbed-content, #psm-a-page .content > h1 {
    width: 80%;
  }
  #psm-a-page .content > p.subtitle, #psm-a-page tabbed-content.about-you > div.content:not([slot]) > p:first-child {
    width: 70%;
  }
}
@media screen and (min-width: 1366px) {
  #psm-a-page #about-you tabbed-content, #psm-a-page .content > h1 {
    width: 70%;
  }
  #psm-a-page .content > p.subtitle, #psm-a-page tabbed-content.about-you > div.content:not([slot]) > p:first-child {
    width: 60%;
  }
}
#psm-a-page #in-house {
  background-color: #eaeaea;
}
#psm-a-page #reviews {
  background-color: #f4f4f4;
}
#psm-a-page #reviews .double {
  align-items: flex-start;
}
#psm-a-page #reviews .text-reviews {
  margin-top: 0;
}
#psm-a-page #topics img {
  max-width: 100%;
}

#smdojo-page {
  display: grid;
  grid-template: "hero"/auto;
}
#smdojo-page #course-hero {
  grid-area: hero;
}
#smdojo-page > * {
  min-width: 0;
}
@media screen and (min-width: 1024px) {
  #smdojo-page {
    grid-template: "hero            hero            hero            hero"/auto 100px 100px auto;
  }
}
@media screen and (min-width: 1366px) {
  #smdojo-page {
    grid-template: "hero            hero            hero            hero"/auto 150px 150px auto;
  }
}

#course-page-new {
  display: grid;
  grid-template: "hero" "navigation" "customers" "about-you" "schedule-call" "reviews" "comparison" "meet-trainers" "dates" "in-house" "topics" "photos" "certification" "why-scrum-org" "left-box" "right-box"/auto;
}
#course-page-new #course-hero {
  grid-area: hero;
}
#course-page-new #page-navigation {
  grid-area: navigation;
}
#course-page-new #customers {
  grid-area: customers;
}
#course-page-new #about-you {
  grid-area: about-you;
}
#course-page-new #schedule-call {
  grid-area: schedule-call;
}
#course-page-new #comparison {
  grid-area: comparison;
}
#course-page-new #meet-trainers {
  grid-area: meet-trainers;
}
#course-page-new #reviews {
  grid-area: reviews;
}
#course-page-new #course-dates {
  grid-area: dates;
}
#course-page-new #in-house {
  grid-area: in-house;
}
#course-page-new #topics {
  grid-area: topics;
}
#course-page-new #photos {
  grid-area: photos;
}
#course-page-new #certification {
  grid-area: certification;
}
#course-page-new #why-scrum-org {
  grid-area: why-scrum-org;
}
#course-page-new .left-box {
  grid-area: left-box;
}
#course-page-new .right-box {
  grid-area: right-box;
}
#course-page-new > * {
  min-width: 0;
}
@media screen and (min-width: 1024px) {
  #course-page-new {
    grid-template: "hero            hero            hero            hero" "navigation      navigation      navigation      navigation" "customers       customers       customers       customers" "about-you       about-you       about-you       about-you" "schedule-call   schedule-call   schedule-call   schedule-call" "reviews         reviews         reviews         reviews" "comparison      comparison      comparison      comparison" "meet-trainers   meet-trainers   meet-trainers   meet-trainers" "dates           dates           dates           in-house" "topics          topics          topics          topics" "photos          photos          photos          photos" "certification   certification   certification   certification" "why-scrum-org   why-scrum-org   why-scrum-org   why-scrum-org" "left-box        left-box        right-box       right-box"/auto 100px 100px auto;
  }
}
@media screen and (min-width: 1366px) {
  #course-page-new {
    grid-template: "hero            hero            hero            hero" "navigation      navigation      navigation      navigation" "customers       customers       customers       customers" "about-you       about-you       about-you       about-you" "schedule-call   schedule-call   schedule-call   schedule-call" "reviews         reviews         reviews         reviews" "comparison      comparison      comparison      comparison" "meet-trainers   meet-trainers   meet-trainers   meet-trainers" "dates           dates           dates           in-house" "topics          topics          topics          topics" "photos          photos          photos          photos" "certification   certification   certification   certification" "why-scrum-org   why-scrum-org   why-scrum-org   why-scrum-org" "left-box        left-box        right-box       right-box"/auto 150px 150px auto;
  }
}
#course-page-new #customers .content {
  padding-top: 60px;
}
#course-page-new #customers .content * {
  margin: 0;
}
#course-page-new #customers .content p.subtitle, #course-page-new #customers .content tabbed-content.about-you > div:not([slot]) > p:first-child {
  text-align: center;
  padding-left: 30px;
  padding-right: 30px;
}
#course-page-new #customers .content .customers {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
#course-page-new #customers .content .customers div:nth-child(n+13) {
  display: none;
}
@media screen and (max-width: 1023px) {
  #course-page-new #customers .content .customers {
    grid-template-columns: repeat(5, 1fr);
  }
  #course-page-new #customers .content .customers div:nth-child(n+11) {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  #course-page-new #customers .content .customers {
    grid-template-columns: repeat(4, 1fr);
  }
  #course-page-new #customers .content .customers div:nth-child(n+9) {
    display: none;
  }
}
@media screen and (max-width: 511px) {
  #course-page-new #customers .content .customers {
    grid-template-columns: repeat(3, 1fr);
  }
  #course-page-new #customers .content .customers div:nth-child(n+10) {
    display: none;
  }
  #course-page-new #customers .content .customers div:nth-child(9) {
    display: block;
  }
}
@media screen and (min-width: 1024px) {
  #course-page-new #about-you tabbed-content,
  #course-page-new #comparison table.comparison,
  #course-page-new #meet-trainers .trainer-intro {
    width: 80%;
  }
  #course-page-new .content > p.subtitle, #course-page-new tabbed-content.about-you > div.content:not([slot]) > p:first-child {
    width: 70%;
  }
}
@media screen and (min-width: 1366px) {
  #course-page-new #about-you tabbed-content,
  #course-page-new #comparison table.comparison,
  #course-page-new #meet-trainers .trainer-intro {
    width: 70%;
  }
  #course-page-new .content > p.subtitle, #course-page-new tabbed-content.about-you > div.content:not([slot]) > p:first-child {
    width: 60%;
  }
}
#course-page-new #about-you.cyan {
  --tabbed-content-bkg-color: white;
  --tabbed-content-inactive-bkg-color: #d0d0d0;
}
#course-page-new #about-you.cyan em {
  color: #0bbccb;
}
#course-page-new #in-house {
  background-color: #eaeaea;
}
#course-page-new #meet-trainers .trainer-intro {
  background-color: #eaeaea;
}
#course-page-new #reviews {
  background-color: #f4f4f4;
}
#course-page-new #reviews .double {
  align-items: flex-start;
}
#course-page-new #reviews .text-reviews {
  margin-top: 0;
}
#course-page-new #topics img {
  max-width: 100%;
}

#clp-with-craig-page {
  display: grid;
  grid-template: "title" "logo" "top-reviews" "details" "photo-1" "further-reviews" "photo-2" "venue" "certification" "trainer" "scrumdojo-beer-photo" "scrumdojo-beer" "photos"/auto;
}
#clp-with-craig-page #course-title {
  grid-area: title;
}
#clp-with-craig-page #course-logo {
  grid-area: logo;
}
#clp-with-craig-page #course-details {
  grid-area: details;
}
#clp-with-craig-page #top-reviews {
  grid-area: top-reviews;
}
#clp-with-craig-page #photo-1 {
  grid-area: photo-1;
}
#clp-with-craig-page #venue {
  grid-area: venue;
}
#clp-with-craig-page #photo-2 {
  grid-area: photo-2;
}
#clp-with-craig-page #further-reviews {
  grid-area: further-reviews;
}
#clp-with-craig-page #certification {
  grid-area: certification;
}
#clp-with-craig-page #trainer-craig {
  grid-area: trainer;
}
#clp-with-craig-page #scrumdojo-beer {
  grid-area: scrumdojo-beer;
}
#clp-with-craig-page #scrumdojo-beer-photo {
  grid-area: scrumdojo-beer-photo;
}
#clp-with-craig-page #photos {
  grid-area: photos;
}
#clp-with-craig-page > * {
  min-width: 0;
}
@media screen and (min-width: 1024px) {
  #clp-with-craig-page {
    grid-template: "title         title         logo                 logo" "details       details       details              top-reviews" "details       details       details              photo-1" "details       details       details              venue" "details       details       details              photo-2" "details       details       details              further-reviews" 1fr "certification certification certification        certification" "trainer       trainer       scrumdojo-beer-photo scrumdojo-beer-photo" "trainer       trainer       scrumdojo-beer       scrumdojo-beer" "photos        photos        photos               photos"/auto 100px 100px auto;
  }
}
@media screen and (min-width: 1366px) {
  #clp-with-craig-page {
    grid-template: "title         title         logo                 logo" "details       details       details              top-reviews" "details       details       details              photo-1" "details       details       details              venue" "details       details       details              photo-2" "details       details       details              further-reviews" 1fr "certification certification certification        certification" "trainer       trainer       scrumdojo-beer-photo scrumdojo-beer-photo" "trainer       trainer       scrumdojo-beer       scrumdojo-beer" "photos        photos        photos               photos"/auto 150px 150px auto;
  }
}
#clp-with-craig-page #venue img {
  display: block;
  width: 100%;
  max-width: 250px;
  margin: 0;
}

#home-page #hero-claim .content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3em;
  padding-top: 120px;
  padding-bottom: 120px;
}

#less-banner {
  background-color: #eaeaea;
}
#less-banner .box {
  background-color: white;
}
#less-banner .content {
  align-items: stretch;
}
#less-banner .tags {
  margin: 0;
  align-items: flex-end;
}
#less-banner .button.conversion {
  margin: 0;
}

#home-page {
  display: grid;
  grid-template: "claim" "dojo" "smdojo" "what-is" "courses" "trainers" "newsletter" "customers" "atmosphere" "photos" "contacts"/auto;
}
#home-page #hero-claim {
  grid-area: claim;
}
#home-page #hero-dojo {
  grid-area: dojo;
}
#home-page #newsletter {
  grid-area: newsletter;
}
#home-page #smdojo {
  grid-area: smdojo;
}
#home-page #what-is {
  grid-area: what-is;
}
#home-page #courses {
  grid-area: courses;
}
#home-page #trainers {
  grid-area: trainers;
}
#home-page #customers {
  grid-area: customers;
}
#home-page #atmosphere {
  grid-area: atmosphere;
}
#home-page #photos {
  grid-area: photos;
}
#home-page #contacts {
  grid-area: contacts;
}
#home-page > * {
  min-width: 0;
}
@media screen and (min-width: 1024px) {
  #home-page {
    grid-template: "claim      claim      dojo       dojo" "smdojo     smdojo     smdojo     newsletter" "what-is    what-is    what-is    newsletter" "courses    courses    courses    newsletter" "trainers   trainers   trainers   newsletter" "customers  customers  customers  customers" "atmosphere atmosphere atmosphere atmosphere" "photos     photos     photos     photos" "contacts   contacts   contacts   contacts"/auto 100px 100px auto;
  }
}
@media screen and (min-width: 1366px) {
  #home-page {
    grid-template: "claim      claim      dojo       dojo" "smdojo     smdojo     smdojo     newsletter" "what-is    what-is    what-is    newsletter" "courses    courses    courses    newsletter" "trainers   trainers   trainers   newsletter" "customers  customers  customers  customers" "atmosphere atmosphere atmosphere atmosphere" "photos     photos     photos     photos" "contacts   contacts   contacts   contacts"/auto 150px 150px auto;
  }
}
#home-page #smdojo .badge {
  width: 240px;
}

#in-house-page #contact-us .content {
  padding-top: 120px;
  padding-bottom: 120px;
}
#in-house-page #contact-us .content .flex-row {
  justify-content: center;
}
#in-house-page #contact-us .content img.icon {
  width: 70px;
}
#in-house-page #contact-us .content p {
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
}
#in-house-page #contact-us .content a {
  color: black;
}

@media screen and (min-width: 1024px) {
  #in-house-page #contact-us p {
    padding-left: 10%;
    padding-right: 10%;
  }
}
#in-house-page #hero p em {
  color: black;
}
#in-house-page .img {
  position: relative;
}
#in-house-page .img #patch {
  width: 100%;
}
#in-house-page .img #torii {
  position: absolute;
  height: 84%;
  top: 8%;
  left: 18%;
}

#psmpo {
  background-color: #eaf0f4;
}

#in-house-page {
  display: grid;
  grid-template: "claim" "right" "left" "image-1" "customized" "image-2" "price" "image-3" "certification" "image-4" "venue" "contact-us" "customers"/auto;
}
#in-house-page #hero {
  grid-area: claim;
}
#in-house-page #left {
  grid-area: left;
}
#in-house-page #right {
  grid-area: right;
}
#in-house-page #customized {
  grid-area: customized;
}
#in-house-page #price {
  grid-area: price;
}
#in-house-page #certification {
  grid-area: certification;
}
#in-house-page #venue {
  grid-area: venue;
}
#in-house-page #image-1 {
  grid-area: image-1;
}
#in-house-page #image-2 {
  grid-area: image-2;
}
#in-house-page #image-3 {
  grid-area: image-3;
}
#in-house-page #image-4 {
  grid-area: image-4;
}
#in-house-page #contact-us {
  grid-area: contact-us;
}
#in-house-page #customers {
  grid-area: customers;
}
#in-house-page > * {
  min-width: 0;
}
@media screen and (min-width: 1024px) {
  #in-house-page {
    grid-template: "claim         claim         claim         claim" "left          right         right         right" "customized    customized    image-1       image-1" "image-2       image-2       image-2       price" "certification certification image-3       image-3" "image-4       venue         venue         venue" "contact-us    contact-us    contact-us    contact-us" "customers     customers     customers     customers"/auto 100px 100px auto;
  }
}
@media screen and (min-width: 1366px) {
  #in-house-page {
    grid-template: "claim         claim         claim         claim" "left          right         right         right" "customized    customized    image-1       image-1" "image-2       image-2       image-2       price" "certification certification image-3       image-3" "image-4       venue         venue         venue" "contact-us    contact-us    contact-us    contact-us" "customers     customers     customers     customers"/auto 150px 150px auto;
  }
}

#left, #right {
  display: flex;
  flex-direction: column;
}
#left > *:last-child, #right > *:last-child {
  flex-grow: 1;
}

#prosecco-page {
  display: grid;
  grid-template: "logo" "party" "hero" "invitation" "agenda" "what-is" "trainer" "customers"/auto;
}
#prosecco-page #prosecco-logo {
  grid-area: logo;
}
#prosecco-page #prosecco-party {
  grid-area: party;
}
#prosecco-page #prosecco-hero {
  grid-area: hero;
}
#prosecco-page #prosecco-invitation {
  grid-area: invitation;
}
#prosecco-page #prosecco-agenda {
  grid-area: agenda;
}
#prosecco-page #what-is {
  grid-area: what-is;
}
#prosecco-page #trainer-karel {
  grid-area: trainer;
}
#prosecco-page #customers {
  grid-area: customers;
}
#prosecco-page #prosecco-party {
  background-size: cover;
}
#prosecco-page p.claim {
  margin: 45px 0;
}
#prosecco-page #prosecco-hero p:not(.claim) {
  font-size: 1.5rem;
}
#prosecco-page #prosecco-invitation p.claim {
  font-size: 2rem;
}
#prosecco-page #prosecco-agenda img {
  width: 150px;
}

@media screen and (min-width: 1024px) {
  #prosecco-page {
    display: grid;
    grid-template: "logo       logo       logo" "hero       hero       party" "invitation invitation party" "agenda     agenda     party" "what-is    trainer    trainer" "customers  customers  customers"/50% 100px auto;
  }
}
@media screen and (min-width: 1366px) {
  #prosecco-page {
    display: grid;
    grid-template: "logo       logo       logo" "hero       hero       party" "invitation invitation party" "agenda     agenda     party" "what-is    trainer    trainer" "customers  customers  customers"/50% 150px auto;
  }
}
#contact-box img {
  width: 150px;
  display: block;
}
#contact-box a {
  color: black;
}
#contact-box .phone-no {
  font-size: 1.2rem;
  font-weight: 600;
  color: #fd5b52;
}

#registration-page {
  display: grid;
  grid-template: "registration" "contact-us" "looking-forward" "contacts"/auto;
}
#registration-page #registration-form {
  grid-area: registration;
}
#registration-page #contact-us {
  grid-area: contact-us;
}
#registration-page #looking-forward {
  grid-area: looking-forward;
}
#registration-page #contacts {
  grid-area: contacts;
}
#registration-page > * {
  min-width: 0;
}
@media screen and (min-width: 1024px) {
  #registration-page {
    grid-template: "registration    registration    registration    contact-us" "looking-forward looking-forward looking-forward looking-forward" "contacts        contacts        contacts        contacts"/auto 100px 100px auto;
  }
}
@media screen and (min-width: 1366px) {
  #registration-page {
    grid-template: "registration    registration    registration    contact-us" "looking-forward looking-forward looking-forward looking-forward" "contacts        contacts        contacts        contacts"/auto 150px 150px auto;
  }
}
#registration-page .attendee-box {
  background-color: #d0d0d0;
  max-width: 440px;
  padding: 10px 20px 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
}
#registration-page .attendee-box > div {
  width: 100%;
}
#registration-page .attendee-box button {
  margin-left: 20px;
  padding: 0;
  font-size: 2.5rem;
  color: #fd5b52;
  border: none;
  background: none;
}

#talks-page {
  display: grid;
  grid-template: "hero" "multilearning" "pmpod" "inagile" "newsletter-1" "productivity" "czechagile" "fwless" "tdd" "newsletter-2" "pattern"/auto;
}
#talks-page #hero {
  grid-area: hero;
}
#talks-page #multilearning {
  grid-area: multilearning;
}
#talks-page #pmpod {
  grid-area: pmpod;
}
#talks-page #inagile {
  grid-area: inagile;
}
#talks-page #newsletter-1 {
  grid-area: newsletter-1;
}
#talks-page #productivity {
  grid-area: productivity;
}
#talks-page #czechagile {
  grid-area: czechagile;
}
#talks-page #fwless {
  grid-area: fwless;
}
#talks-page #newsletter-2 {
  grid-area: newsletter-2;
}
#talks-page #tdd {
  grid-area: tdd;
}
#talks-page #pattern {
  grid-area: pattern;
}
#talks-page > * {
  min-width: 0;
}
@media screen and (min-width: 1024px) {
  #talks-page {
    grid-template: "hero          hero          hero          hero" "multilearning multilearning multilearning multilearning" "pmpod         pmpod         pmpod         pmpod" "inagile       inagile       inagile       inagile" "newsletter-1  newsletter-1  newsletter-1  newsletter-1" "productivity  productivity  czechagile    czechagile" "fwless        fwless        fwless        fwless" "tdd           tdd           pattern       pattern" "newsletter-2  newsletter-2  newsletter-2  newsletter-2"/auto 100px 100px auto;
  }
}
@media screen and (min-width: 1366px) {
  #talks-page {
    grid-template: "hero          hero          hero          hero" "multilearning multilearning multilearning multilearning" "pmpod         pmpod         pmpod         pmpod" "inagile       inagile       inagile       inagile" "newsletter-1  newsletter-1  newsletter-1  newsletter-1" "productivity  productivity  czechagile    czechagile" "fwless        fwless        fwless        fwless" "tdd           tdd           pattern       pattern" "newsletter-2  newsletter-2  newsletter-2  newsletter-2"/auto 150px 150px auto;
  }
}
#talks-page .details {
  display: flex;
  gap: 1em;
  color: #555;
}
#talks-page .details img {
  height: 1em;
  position: relative;
  top: 0.1em;
}
#talks-page .podcast-icons a.podcast-icon {
  display: flex;
  gap: 10px;
  align-items: center;
  background-color: #333;
  border-radius: 7px;
  padding: 5px 10px 5px 5px;
  color: white;
  font-weight: 600;
  text-decoration: none;
}
#talks-page .podcast-icons a.podcast-icon p {
  margin: 0;
  font-size: 0.9em;
}
#talks-page .podcast-icons img {
  height: 2.8em;
}
#talks-page youtube-video > img[slot] {
  width: 100%;
}
#talks-page #hero {
  background-color: #f4f4f4;
}
#talks-page #multilearning {
  background-color: #0bbccb;
}
#talks-page #multilearning .box {
  background-color: white;
}
#talks-page #multilearning .box .box {
  background-color: #e7f2e7;
}
#talks-page #multilearning .box .box img, #talks-page #multilearning .box .box p {
  margin: 0;
}
#talks-page #multilearning .box .box p {
  flex: 1;
}
#talks-page #inagile {
  background-color: #eefcff;
}
#talks-page #tdd {
  background-color: #e7f2e7;
}
#talks-page #pattern {
  background-color: #ffeeec;
}
#talks-page #newsletter-1, #talks-page #newsletter-2 {
  background-color: #fda93b;
}
#talks-page #newsletter-1 .content, #talks-page #newsletter-2 .content {
  padding-top: 45px;
  padding-bottom: 45px;
}
#talks-page #newsletter-1 .content h1, #talks-page #newsletter-2 .content h1 {
  font-size: 1.5rem;
}
#talks-page #newsletter-1 .content ul.items, #talks-page #newsletter-2 .content ul.items {
  margin: 0;
}
#talks-page #newsletter-1 .content ul.items li.item, #talks-page #newsletter-2 .content ul.items li.item {
  border-color: #fdd18c;
}
#talks-page #newsletter-1 .content form, #talks-page #newsletter-2 .content form {
  row-gap: 15px;
  margin-bottom: 0;
}
#talks-page #newsletter-1 .content form input[type=email], #talks-page #newsletter-2 .content form input[type=email] {
  flex: 1;
  min-width: 200px;
}
#talks-page #newsletter-1 .content form input[type=submit], #talks-page #newsletter-2 .content form input[type=submit] {
  flex: 0;
  background-color: #fdd18c;
}
#talks-page #newsletter-1 .content p.footnote, #talks-page #newsletter-2 .content p.footnote {
  margin: 1em 0 0 0;
}
#talks-page #newsletter-1 .content p.footnote a, #talks-page #newsletter-2 .content p.footnote a {
  color: black;
}

#design-system-page {
  display: grid;
  grid-template: "dimensions-full-double" "dimensions-full-single" "dimensions-wide" "dimensions-narrow" "hero-tatami" "hero-full" "hero-half" "hero-photo" "course-title" "course-logo" "fonts" "colors"/auto;
}
#design-system-page #dimensions-full-double {
  grid-area: dimensions-full-double;
}
#design-system-page #dimensions-full-single {
  grid-area: dimensions-full-single;
}
#design-system-page #dimensions-wide {
  grid-area: dimensions-wide;
}
#design-system-page #dimensions-narrow {
  grid-area: dimensions-narrow;
}
#design-system-page #hero-tatami {
  grid-area: hero-tatami;
}
#design-system-page #hero-full {
  grid-area: hero-full;
}
#design-system-page #hero-half {
  grid-area: hero-half;
}
#design-system-page #hero-photo {
  grid-area: hero-photo;
}
#design-system-page #course-title {
  grid-area: course-title;
}
#design-system-page #course-logo {
  grid-area: course-logo;
}
#design-system-page #fonts {
  grid-area: fonts;
}
#design-system-page #colors {
  grid-area: colors;
}
#design-system-page > * {
  min-width: 0;
}
@media screen and (min-width: 1024px) {
  #design-system-page {
    grid-template: "dimensions-full-double dimensions-full-double dimensions-full-double dimensions-full-double" "dimensions-full-single dimensions-full-single dimensions-full-single dimensions-full-single" "dimensions-wide        dimensions-wide        dimensions-wide        dimensions-narrow" "hero-tatami            hero-tatami            hero-tatami            hero-tatami" "hero-full              hero-full              hero-full              hero-full" "hero-half              hero-half              hero-photo             hero-photo" "course-title           course-title           course-logo            course-logo" "fonts                  fonts                  fonts                  colors"/auto 100px 100px auto;
  }
}
@media screen and (min-width: 1366px) {
  #design-system-page {
    grid-template: "dimensions-full-double dimensions-full-double dimensions-full-double dimensions-full-double" "dimensions-full-single dimensions-full-single dimensions-full-single dimensions-full-single" "dimensions-wide        dimensions-wide        dimensions-wide        dimensions-narrow" "hero-tatami            hero-tatami            hero-tatami            hero-tatami" "hero-full              hero-full              hero-full              hero-full" "hero-half              hero-half              hero-photo             hero-photo" "course-title           course-title           course-logo            course-logo" "fonts                  fonts                  fonts                  colors"/auto 150px 150px auto;
  }
}
#design-system-page #colors .color > span {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid #000;
  margin: 2px 5px -2px 0;
}
#design-system-page table th, #design-system-page table td {
  background-color: #eaeaea;
  padding: 5px;
}

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