/*
SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

FONT SIZE SYSTEM (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
*/

/* 
MAIN COLOR: #f45f40 
GREY COLOR: #000402
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 10px;
}

/* GENERAL STYLES */
body {
  font-family: "Aleo", serif;
  color: #000402;
  margin: 0 auto;
}

.heading-primary,
.heading-secondary {
  font-family: "Lato", sans-serif;
  color: #c00000;
}

.heading-tertiary,
.heading-quaternary {
  font-family: "Aleo", serif;
  color: #c00000;
}

.heading-primary {
  font-size: 4.4rem;
  letter-spacing: -1.5px;
  margin-bottom: 4.8rem;
}

.heading-secondary {
  font-size: 3rem;
  margin-bottom: 2.4rem;
}

.heading-tertiary {
  font-size: 2.4rem;
  margin-bottom: 1.2rem;
}

.heading-quaternary {
  font-size: 2rem;
  margin-bottom: 1.2rem;
  text-decoration: underline;
}

p {
  font-size: 2rem;
  line-height: 1.6;
  margin-bottom: 1.2rem;
}

p a:link,
p a:visited {
  color: #f45f40;
  transition: all 0.3s;
}

p a:hover,
p a:active {
  color: #c00000;
}

.underline {
  text-decoration: underline;
}

.list {
  margin-left: 3.6rem;
  margin-bottom: 1.2rem;
}

.list-item {
  font-size: 2rem;
  line-height: 1.6;
  margin-bottom: 0.4rem;
}

.list-nested {
  margin-left: 1.6rem;
}

.list-nested-item {
  font-size: 1.6rem;
  line-height: 1.6;
  margin-bottom: 0.8rem;
}

.btn:link,
.btn:visited {
  background-color: #f45f40;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  border-radius: 100px;
}

.btn:hover,
.btn:active {
  background-color: #c00000;
  transition: all 0.3s;
}

.btn--big {
  font-size: 1.8rem;
  text-transform: uppercase;
  padding: 1.6rem 3.2rem;
}

.btn--small {
  font-size: 1.6rem;
  padding: 1.2rem 2.4rem;
}

.center {
  display: flex;
  justify-content: center;
}

/* NAVIGATION */
.header {
}

.main-banner {
  max-width: 1200px;
  display: flex;
  gap: 4.8rem;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}

.conference-banner {
  width: 100%;
}

.conference-logo {
  height: 12.8rem;
}

.association-logo {
  height: 12.8rem;
  filter: brightness(0) saturate(100%) invert(26%) sepia(12%) saturate(4302%)
    hue-rotate(184deg) brightness(95%) contrast(92%);
}

.heading-primary {
  font-family: "Lato", sans-serif;
  color: #f45f40;
  font-size: 4.4rem;
  letter-spacing: -1.5px;
  line-height: 1;
  margin-bottom: 0;
}

.navigation {
  max-width: 1200px;
  margin: 0 auto;
  margin-bottom: 4.8rem;
}

.navigation-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  list-style: none;
}

.navigation-link:link,
.navigation-link:visited {
  font-weight: bold;
  display: inline-block;
  font-family: "Lato", sans-serif;
  text-transform: uppercase;
  font-size: 2rem;
  text-decoration: none;
  color: #f45f40;
  transition: all 0.3s;
}

.navigation-link:hover,
.navigation-link:active {
  color: #c00000;
}

.navigation-cta:link,
.navigation-cta:visited {
  background-color: #f45f40;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  border-radius: 100px;
  padding: 1.6rem 3.2rem;
}

.navigation-cta:hover,
.navigation-cta:active {
  background-color: #c00000;
  transition: all 0.3s;
}

/* PHOTO SECTION  */
.photo-section {
  width: 100%;
  margin-bottom: 4.8rem;
}

.photo-box {
  max-width: 120rem;
  margin: 0 auto;
}

.photo-img {
  width: 40rem;
}

.marquee {
  --gap: 1rem;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
  margin-bottom: 1.2rem;
}

.marquee-content {
  list-style: none;
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  min-width: 100%;
  gap: var(--gap);
  animation: scroll 20s linear infinite;
}

.marquee:hover .marquee-content {
  animation-play-state: paused;
}

.marquee-content li {
  overflow: hidden;
}

.marquee-content img:hover {
  overflow: hidden;
  transform: scale(1.1);
  transition: 0.3s all;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

/* INFO SECTION */
.info-section {
  max-width: 120rem;
  margin: 0 auto;
  margin-bottom: 4.8rem;
}

/* .info-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.2rem 0.8rem;
  align-items: center;
  margin-bottom: 4.8rem;
} */

.info-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem 0.8rem;
  align-items: center;
  margin-bottom: 1.2rem;
}

.info-icon {
  width: 2.4rem;
  height: 2.4rem;
  stroke: #f45f40;
}

.info-text {
  font-size: 2.4rem;
  font-weight: 700;
  color: #f45f40;
  line-height: 1;
  margin-bottom: 0;
}

/* MAIN SECTION  */
.main-section {
  max-width: 120rem;
  margin: 0 auto;
}

.main-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 4.8rem;
  margin-bottom: 4.8rem;
  /* align-items: center; */
}

.main-grid p:last-child {
  margin-bottom: 0;
}

.chair-title {
  text-align: center;
  font-size: 1.2rem;
  color: #fff;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.chair-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  background-color: #f45f40;
  padding: 2.4rem;
}

.chair-img {
  width: 12.8rem;
  border: 4px solid #fff;
  border-radius: 50%;
}

.chair-name {
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 0;
}

.chair-text {
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 0;
}

.chair-contact {
  font-size: 1.6rem;
  line-height: 1;
  margin: 0;
}

.chair-contact a:link,
.chair-contact a:visited {
  display: inline-block;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 2.4rem;
  transition: all 0.3s;
}

.chair-contact a:hover,
.chair-contact a:active {
  color: #c00000;
}

.main-text {
}

/* PROGRAMME SECTION */
.programme-section {
  max-width: 120rem;
  margin: 0 auto;
}

.speakers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 1.6rem;
  margin-bottom: 2.4rem;
}

.speakers-block {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 1.6rem;
  align-items: center;
}

.speakers-img {
  width: 100%;
  border-radius: 50%;
  border: 4px solid #f45f40;
}

.speakers-text {
  font-size: 1.6rem;
  margin-bottom: 0;
}

.speakers-text strong {
  font-size: 2rem;
}

.speakers-bio {
  grid-row: 3;
  grid-column: 1 / -1;
  border: none;
  padding: 0;
  border-radius: 11px;
  height: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: all 0.3s;
}

.speaker--1:hover ~ .speaker-bio--1 {
  border: 1px solid #f45f40;
  padding: 1.2rem;
  height: auto;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.speaker--2:hover ~ .speaker-bio--2 {
  border: 1px solid #f45f40;
  padding: 1.2rem;
  height: auto;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.speaker--3:hover ~ .speaker-bio--3 {
  border: 1px solid #f45f40;
  padding: 1.2rem;
  height: auto;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.speaker--4:hover ~ .speaker-bio--4 {
  border: 1px solid #f45f40;
  padding: 1.2rem;
  height: auto;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.speaker--5:hover ~ .speaker-bio--5 {
  border: 1px solid #f45f40;
  padding: 1.2rem;
  height: auto;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.programme-info {
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: 3.6rem;
  margin-bottom: 4.8rem;
}

.programme-days {
  display: flex;
  flex-direction: column;
  gap: 4.8rem;
}

.day-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  font-size: 2.4rem;
  color: #f45f40;
  background-color: #fff;
  border: 1px solid #f45f40;
  padding: 6.4rem 3.2rem;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s;
}

.day-btn:hover,
.day-btn.active {
  background-color: #f45f40;
  color: #fff;
}

.programme-schedule {
  display: grid;
}

.schedule-day {
  height: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: all 0.5s;
}

.schedule-day.active {
  grid-row: 2;
  height: auto;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.schedule-block {
  border: 1px solid #f45f40;
  padding: 1.2rem;
  margin-bottom: 1.2rem;
  border-radius: 10px;
  position: relative;
  /* cursor: pointer; */
}

.hour-title {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: space-between;
}

.schedule-toggle {
  line-height: 1;
  margin-bottom: 0;
  color: #f45f40;
  font-size: 2rem;
  font-weight: bold;
  /* height: 3rem;
  width: 3rem;
  border: 2px solid #f45f40;
  border-radius: 50%; */
  align-items: center;
  justify-content: center;
}

.arrow {
  display: flex;
  transition: all 0.3s;
}

.schedule-block.active .arrow {
  transform: rotate(180deg);
  transform-origin: 50% 40%;
}

.plus {
  display: flex;
}

.schedule-block.active .plus {
  display: none;
}

.minus {
  display: none;
}

.schedule-block.active .minus {
  display: flex;
}

.schedule-hour {
  font-size: 1.6rem;
  margin-bottom: 0;
}

.schedule-title {
  text-transform: uppercase;
  color: #f45f40;
  margin-bottom: 0;
}

.schedule-text {
  padding: 0;
  margin-bottom: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: all 0.5s;
}

.schedule-list {
  margin-left: 0rem;
  list-style: none;
}

.schedule-list-item {
  font-size: 1.6rem;
  line-height: 1.6;
}

.schedule-list-item:before {
  content: "::";
  padding-right: 0.2rem;
}

.schedule-name {
  font-style: italic;
  font-weight: 700;
}

.schedule-text-secondary {
  /* font-size: 1.4rem; */
}

.schedule-text-title {
  color: #f45f40;
  font-style: italic;
}

/* 
.schedule-text::before {
  content: "+";
  color: #099268;
  position: absolute;
  top: 12.5%;
  right: 1rem;
  font-size: 3rem;
  transform: translate(0, -50%);
} */

.schedule-block.active .schedule-text {
  padding: 1.2rem;
  height: auto;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

/* VENUE SECTION */
.venue-section {
  max-width: 120rem;
  margin: 0 auto;
  margin-bottom: 4.8rem;
}

.getting-to {
  display: flex;
  justify-content: center;
}

/* ORGANISERS SECTION */
.organisers-section {
  max-width: 120rem;
  margin: 0 auto;
  margin-bottom: 4.8rem;
}

.organisers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* PARTNERS SECTION */
.partners-section {
  max-width: 120rem;
  margin: 0 auto;
  margin-bottom: 4.8rem;
}

.partner-logos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem;
}

.partner-logo-column {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  justify-content: space-between;
}

.partner-boxes {
  display: grid;
  align-items: center;
  gap: 0.4rem;
  padding-bottom: 1.2rem;
}

.partner-box--2-cols {
  grid-template-columns: repeat(2, 1fr);
}

.partner-box--3-cols {
  grid-template-columns: repeat(3, 1fr);
}

.partner-box--5-cols {
  grid-template-columns: repeat(5, 1fr);
}

.partner-box--6-cols {
  grid-template-columns: repeat(6, 1fr);
}

.partner-box--14-cols {
  grid-template-columns: repeat(14, 1fr);
}

.partner-box--15-cols {
  grid-template-columns: repeat(15, 1fr);
}

.partner-box--20-cols {
  grid-template-columns: repeat(20, 1fr);
}

.partner-title {
  margin: 0;
  line-height: 1;
  padding: 1.2rem;
  font-size: 2.4rem;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  grid-column: 1 / -1;
}

.box-industrial {
  border: 7.5px solid #c99903;
}

.title-industrial {
  color: #fff;
  background-color: #c99903;
}

.box-pilot {
  border: 7.5px solid #f45f40;
}

.title-pilot {
  color: #fff;
  background-color: #f45f40;
}

.column-lab-petri {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem;
}

.box-lab {
  border: 7.5px solid #6c9fcd;
}

.title-lab {
  color: #fff;
  background-color: #6c9fcd;
  align-self: flex-start;
}

.box-petri {
  border: 7.5px solid #838c9d;
}

.title-petri {
  color: #fff;
  background-color: #838c9d;
  align-self: flex-start;
}

.box-partners {
  border: 7.5px solid #000;
}

.title-partners {
  color: #fff;
  background-color: #000;
}

.partner-logo {
  width: 100%;
  padding: 0.4rem;
}

.logo-xs {
  grid-column: auto / span 1;
}

.logo-sm {
  grid-column: auto / span 2;
}

.logo-md {
  grid-column: auto / span 3;
}

.logo-l {
  grid-column: auto / span 4;
}

.logo-xl {
  grid-column: auto / span 5;
}

.logo--3-cols-center {
  grid-column: 2 / 3;
}

.logo--6-cols-center {
  grid-column: 3 / 5;
}

.logo--6-cols-center-l {
  grid-column: 2 / 6;
}

.logo--14-cols-center {
  grid-column: 6 / 10;
}

.logo-img {
  width: 100%;
}

/* ABSTRACT SECTION */
.abstract-section {
  max-width: 120rem;
  margin: 0 auto;
  margin-bottom: 4.8rem;
}

/* REGISTRATION SECTION */
.registration-section {
  max-width: 120rem;
  margin: 0 auto;
  margin-bottom: 4.8rem;
}

.prices {
  margin: 0 auto;
  margin-bottom: 1.2rem;
  font-size: 2rem;
  border-collapse: collapse;
}

.prices thead {
  background-color: #f45f40;
  color: #fff;
}

.prices th:first-child {
  text-transform: uppercase;
  background-color: #c00000;
}

.prices tr:nth-child(even) {
  /* background-color: #d4dbe8; */
}

.prices th,
.prices td {
  padding: 1.2rem 1.2rem;
  text-align: center;
}

.prices tr td {
  border-bottom: 1px solid #f45f40;
}

.prices th:nth-child(even),
.prices td:nth-child(even) {
  background-color: #fff;
  padding: 1.2rem 2.4rem;
  border-bottom: 1px solid #fff;
}

.prices tr:nth-last-child(2) td {
  border-bottom: 1px solid #fff;
}

.prices tr:last-child td {
  padding: 0;
  text-align: left;
  border-bottom: 1px solid #fff;
  font-size: 1.2rem;
}

/* CONTACT SECTION */
.contact {
  background-color: #f45f40;
  padding: 4.8rem 0;
}

.contact-container {
  max-width: 120rem;
  margin: 0 auto;
}

.contact-title {
  font-size: 3rem;
  color: #fff;
  text-align: center;
}

.contact p {
  color: #fff;
}

.contact-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}

.contact a:link,
.contact a:visited {
  color: #fff;
  transition: all 0.3s;
}

.contact a:hover,
.contact a:active {
  color: #000402;
}

.contact-icon {
  width: 24px;
  height: 24px;
  fill: #fff;
  margin-bottom: 8px;
}

.back {
  text-align: center;
}

.copyright {
  text-align: center;
}

/* MOBILE */
@media screen and (max-width: 1200px) {
  .main-banner {
    margin-left: 1rem;
    margin-right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
  }

  .navigation-list {
    flex-direction: column;
  }

  .photo-box {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .main-section {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .main-grid {
    display: flex;
    flex-direction: column;
  }

  .info-map {
    width: 100%;
    margin: 0 auto;
  }

  .chair-info {
    flex-direction: column;
  }

  .programme-section {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .speakers {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .speaker-img {
    width: 75%;
  }

  .speakers-bio {
    grid-row: 6;
  }

  .programme-info {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
  }

  .venue-section {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .partners-section {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .partner-logos {
    grid-template-columns: 1fr;
  }

  .partner-logo-column {
    gap: 0.4rem;
  }

  .partner-title {
    font-size: 2rem;
  }

  .organisers-section {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .organisers-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .getting-to {
    display: flex;
    flex-direction: column;
  }

  .abstract-section {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .registration-section {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .prices {
    font-size: 1.4rem;
  }

  .prices th:nth-child(even),
  .prices td:nth-child(even) {
    padding: 1.2rem 0.8rem;
  }

  .programme-days {
    gap: 2.4rem;
  }

  .contact-container {
    padding: 1rem;
  }

  .contact-list {
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 1200px) {
  html {
    font-size: 56.25%;
  }
}

@media (max-width: 896px) {
  html {
    font-size: 50%;
  }
}