:root {
  --the-blue: #1678d3;
  --the-green: #0fd588;
  --the-red: #e53535;
  --the-orange: #dfb31c;
}

@font-face {
    font-familiy: 'Bakso Sapi';
    src: url("BaksoSapi.otf") format("opentype"),
		 url("BaksoSapi.ttf") format('truetype')
		 url("BaksoSapi.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

nav {
	background: black;
	font-family: 'Bakso Sapi', Calibri;
}

nav a {
    color: white;
}

#nav-action {
    display: none;
}

nav > ul > li > a {
    position: relative;
}
nav .skraboutcha {
    opacity: 0;
    position: absolute;
    top: -10%;
    left: 00%;
}
nav a:hover > .skraboutcha {
    opacity: 1;
}
nav li.active .skraboutcha {
    opacity: 1;
}

input[type="checkbox"]:checked ~ ul.resp-nav {
  opacity: 1;
  visibility: visible;
  display: flex;
}

nav .resp-button {
    display: none;
}

nav .resp-flex {
    justify-content: space-between;
}

nav .i18n {
    justify-content: center;
}

nav .i18n a {
    color: rgb(65, 84, 98);
}

nav .i18n a:hover {
    color: var(--color);
}

.skra-blue {
	width: 70%;
	margin-left: 20%;
}

@media (min-width: 1200px) {
	nav .links {
    	font-size: 1.3em;
        gap: calc(var(--spacing) * 2);
	}
}

@media (max-width: 992px) {
    nav .resp-button {
        display: block;
    }

    nav ul.resp-nav {
        display: none
    }

    nav > label {
        display: visible;
    }

    nav {
        flex-direction: column;
    }

    nav .links {
        flex-direction: column;
        gap: 0;
    }
}


main {
    text-align: justify;
    background: white;
}

main h1 {
    margin-left: 2em;
    font-family: 'Bakso Sapi';
}

.compagnie .photos {
	grid-row-gap: var(--spacing);
}

.compagnie img {
    height: 100%;
}

.shows {
    display: grid;
}

.hero-block {
    height: 70vh;
    min-height: 200px;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
        margin-top: calc(var(--spacing) * -2.5);
}

.hero-block-text {
    position: absolute;
    top: 80%;
    left: 35%;
    transform: translate(-50%, -50%);
    color: white;
}

.hero-block-text h1 {
    margin-left: 0;
    font-family: 'Bakso Sapi';
    margin-bottom: 0;
    color: white;
}

@media (min-width: 992px) {
    .shows.grid {
        margin-top: -100px;
    }

    .hero-block {
        margin-top: calc(var(--spacing) * -4);
    }
}

.show {
    display: flex;
    flex-direction: column;
    gap: var(--block-spacing-vertical);
    padding: 0;
    margin-top: var(--block-spacing-vertical);
}

.pitch {
    text-align: center;
}

.summary {
	border: solid 1px;
	padding: var(--spacing);
	min-width: 200px;
}

.summary h4, .summary p, .summary ul, .summary li {
    margin-bottom: 0;
    margin-top: 0;
}

.summary h4 {
    margin-top: 0.1em;
}

.pitch {
    grid-column: span 2;
    align-self: center;
}

.vimeo {
    position: relative;
    width: 100%;
}

.vimeo::before {
    display: block;
    content: "";
    padding-top: 56.25%;
}

.vimeo iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
}

.imgs {
    display: flex;
    gap: var(--spacing);
    flex-wrap: wrap;
    justify-content: center;
}

.text-block-centered {
	text-align: center;
}

.agenda_page {
	img {
    margin-bottom: var(--spacing);
  }

  .alldates {
		margin-top: var(--spacing);
  }

  .agenda {
    display: grid;
    grid-template-columns: auto auto 1fr;
    row-gap: 0.1em;
    column-gap: var(--spacing);

    article {
      display: grid;
      grid-template-columns: subgrid;
      grid-column: span 3;
      margin: revert;
      padding: 1em;

      @media (max-width: 992px) {
				grid-template-columns: 1fr;
      }
      .show {
        font-family: 'Bakso Sapi';
        display: block;
        margin-top: 0;
      }
    }
  }
}

@media (min-width: 992px) {
    .date .lieu {
        grid-column: span 3;
    }
}

.agenda > button {
    margin-top: var(--spacing);
}

.contact {
    text-align: center;
}

.contact h1 {
    margin-left: 0;
    margin-bottom: 0;
}

.contacts.grid {
    gap: calc(var(--spacing) * 2);
}

.show h1 {
    margin-left: 0;
}