@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');


/*===========================
MA Lepine - App
===========================*/
/*! normalize.css v3.0.0 | MIT License | git.io/normalize */
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }
  body {
    margin: 0;
  }
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  main,
  nav,
  section,
  summary {
    display: block;
  }
  audio,
  canvas,
  progress,
  video {
    display: inline-block;
    vertical-align: baseline;
  }
  audio:not([controls]) {
    display: none;
    height: 0;
  }
  [hidden],
  template {
    display: none;
  }
  a {
    background: transparent;
  }
  a:active,
  a:hover {
    outline: 0;
  }
  abbr[title] {
    border-bottom: 1px dotted;
  }
  b,
  strong {
    font-weight: bold;
  }
  dfn {
    font-style: italic;
  }
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
  mark {
    background: #ff0;
    color: #000;
  }
  small {
    font-size: 80%;
  }
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sup {
    top: -0.5em;
  }
  sub {
    bottom: -0.25em;
  }
  img {
    border: 0;
  }
  svg:not(:root) {
    overflow: hidden;
  }
  figure {
    margin: 1em 40px;
  }
  hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
  }
  pre {
    overflow: auto;
  }
  code,
  kbd,
  pre,
  samp {
    font-family: monospace, monospace;
    font-size: 1em;
  }
  button,
  input,
  optgroup,
  select,
  textarea {
    color: inherit;
    font: inherit;
    margin: 0;
  }
  button {
    overflow: visible;
  }
  button,
  select {
    text-transform: none;
  }
  button,
  html input[type="button"],
  input[type="reset"],
  input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
  }
  button[disabled],
  html input[disabled] {
    cursor: default;
  }
  button::-moz-focus-inner,
  input::-moz-focus-inner {
    border: 0;
    padding: 0;
  }
  input {
    line-height: normal;
  }
  input[type="checkbox"],
  input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
  }
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    height: auto;
  }
  input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
  }
  input[type="search"]::-webkit-search-cancel-button,
  input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
  }
  legend {
    border: 0;
    padding: 0;
  }
  textarea {
    overflow: auto;
  }
  optgroup {
    font-weight: bold;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  td,
  th {
    padding: 0;
  }
  @media print {
    * {
      text-shadow: none !important;
      color: #000 !important;
      background: transparent !important;
      box-shadow: none !important;
    }
    a,
    a:visited {
      text-decoration: underline;
    }
    a[href]:after {
      content: " (" attr(href) ")";
    }
    abbr[title]:after {
      content: " (" attr(title) ")";
    }
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
      content: "";
    }
    pre,
    blockquote {
      border: 1px solid #999;
      page-break-inside: avoid;
    }
    thead {
      display: table-header-group;
    }
    tr,
    img {
      page-break-inside: avoid;
    }
    img {
      max-width: 100% !important;
    }
    p,
    h2,
    h3 {
      orphans: 3;
      widows: 3;
    }
    h2,
    h3 {
      page-break-after: avoid;
    }
    select {
      background: #fff !important;
    }
    .navbar {
      display: none;
    }
    .table td,
    .table th {
      background-color: #fff !important;
    }
    .btn > .caret,
    .dropup > .btn > .caret {
      border-top-color: #000 !important;
    }
    .label {
      border: 1px solid #000;
    }
    .table {
      border-collapse: collapse !important;
    }
    .table-bordered th,
    .table-bordered td {
      border: 1px solid #ddd !important;
    }
  }
  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  *:before,
  *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  html {
    font-size: 62.5%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  body {
    background: #f0e4d8 url(bg.jpg) repeat;
    background-size: 50%;
  }

  body, html {
  }

  #site-main {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }

  #image {
    position: relative;
    height: 0;
    background: url(bg-desktop.jpg?v2) no-repeat center center;
    background-size: cover;
    width: 100%;
    padding-top: 50.4934%;
    opacity: 0;
    transition: opacity 1s ease-in;
    -webkit-transition: opacity 1s ease-in;
  }

  #image.in {
    opacity: 1;
  }

  #image > * {
    display: block;
    position: absolute;
  }
  #image a {
    display: block;
    position: absolute;
    width: 100%;
    height: 0;
    background: #f0e4d8 url(bg.jpg);
    background-size: 50%;
    opacity: 0;
    transition: opacity .2s ease-in-out;
    -webkit-transition: opacity .2s ease-in-out;
  }
  #image a:hover {
    opacity: 0.4;
  }
  #cover {     left: 15.75%;
    top: 14%;
    width: 36.5%; }
  #cover a { padding-top: 100%; }
  #cover a:hover { opacity: 0.2; }

  #boutique {      left: 54%;
    top: 47.5%;
    width: 10.5%; }
  #boutique a { padding-top: 32%; }

  #apple {     left: 64.5%;
    top: 47.5%;
    width: 8.5%; }
  #apple a { padding-top: 40%; }

  #spotify { left: 72.8%;
    top: 47.5%;
    width: 4.25%; }
  #spotify a { padding-top: 79%; }

  #amazon { left: 77.5%;
    top: 47.5%;
    width: 4.5%; }
  #amazon a { padding-top: 75%; }

  #deezer {     left: 82.35%;
    top: 47.5%;
    width: 6.75%;
  }
  #deezer a { padding-top: 50%; }

  #facebook { left: 88.5%;
    top: 47.5%;
    width: 5.25%; }
  #facebook a { padding-top: 64%; }

  @media (orientation: portrait) {

      #image {
        width: 100%;
        padding-top: 136.25%;
        background-image: url(bg-portrait.jpg);
        margin-top: -5%;
      }

      #cover {       left: 15.75%;
        top: 18.15%;
        width: 68.5%; }
    
      #boutique { 
        left: 13%;
        top: 79%;
        width: 19.5%; }
    
      #apple {     left: 32.5%;
        top: 79%;
        width: 15.5%; }
    
      #spotify {     left: 48%;
        top: 79%;
        width: 8.3%; }
    
      #amazon {     left: 56.25%;
        top: 79%;
        width: 9.1%; }
    
      #deezer {     left: 65.3%;
        top: 79%;
        width: 12.8%;}
    
      #facebook {     left: 78.2%;
        top: 79%;
        width: 10.25%; }

      
  }

  @media (orientation: landscape) and (min-aspect-ratio: 184 / 100 ) {

    #image {
      margin-top: -5%;
    }
    
}




html,
body {
    font-family: "Inter",Arial,sans-serif;
    font-weight: 400;
    line-height: 1.6;

    color: #3f231b;
  font-size: 18px;
  line-height: 1.6;
}

#shows {

  background: #fefaf1;

  padding: 50px 0 150px;

}

a,
em {
  font-weight: 600;
  font-style: normal;
  color: #b4553a;
  transition: all .15s;
  -webkit-transition: all .15s;
}

a:hover {
  color: #80321c;
}

td {
  vertical-align: top;
  padding: 15px 10px;
}

table {
  width: 90%;
  margin: 0 auto;
  padding-bottom: 200px;
  display: table;
}


table.mobile {
  font-size: 14px;
}

table.desktop {
  display: none;
  width: 70%;;
}

table.mobile td {
  padding: 20px 10px;
}

h1 {
  text-align: center;
  margin-bottom: 50px;
}
h1 img {
  height: 100px;
}

@media (min-width: 768px) {

  table.mobile {
   display: none !important;
  }

  table.desktop {
    display: table !important;
  }

}

@media (max-width: 767px) {
  
  h1 img {
    height: 50px;
  }

}

@media (min-width: 1024px) {

  html,
  body {
    font-size: 20px;
  }

}


@media (min-width: 1200px) {

  table.desktop {
    width: 70%;
  }
  

}

td:last-child {
  text-align: right;
}

.corner {
  pointer-events: none;
  display: block;
  position: fixed;
  width: 10vw;
  height: 10vw;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity .5s ease-in;
  -webkit-transition: opacity .5s ease-in;
}

@media (orientation: portrait) and (max-width: 1024px) {

  .corner {
    width: 14vw;
    height: 14vw;
  }

}

@media (orientation: portrait) and (max-width: 767px) {

  .corner {
    width: 18vw;
    height: 18vw;
  }

}

.corner.in {
  opacity: 1;
}

.tl { top: 0; left: 0; background-image: url(tl.png); transition-delay: .1s; }
.tr { top: 0; right: 0; background-image: url(tr.png); transition-delay: .15s; }
.bl { bottom: 0; left: 0; background-image: url(bl.png); transition-delay: .2s; }
.br { bottom: 0; right: 0; background-image: url(br.png); transition-delay: .25s; }


.logos {
  pointer-events: none;
  display: block;
  position: fixed;
  width: 100%;
  height: 10vw;

  background: url(logos.png) center center no-repeat;
  background-size: auto 100%;
  transition: opacity .5s ease-in;
  -webkit-transition: opacity .5s ease-in;
  transition-delay: .3s;
  bottom: 0;
  left: 0;
}

.logos.in {
  opacity: 1;
}

@media (orientation: landscape) {

  .logos {
    display: none;
  }

}

@media (orientation: portrait) and (max-width: 1024px) {

  .logos {
    height: 14vw;
  }

}

@media (orientation: portrait) and (max-width: 767px) {

  .logos {
    height: 18vw;
  }

}