!
 * Style by Datagif
 * Unminified version: ./main.css
 * 
 */

/* @group RESETS */

/* Eric Meyer reset.css v2.0 (26/01/2011) -- & -- normalize.css v5.0.0 (3/10/2016) --- resets group v1.5 */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}

*, *:before, *:after {box-sizing: border-box;}

html {font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {display: block;}
audio, canvas, progress, video {display: inline-block;}
audio:not([controls]) {display: none; height: 0;}

[hidden], template {display: none;}

a {background-color: transparent;}
a:active, a:hover {outline-width: 0;}

abbr[title] {text-decoration: underline dotted;}
strong {font-weight: bolder;}
em, dfn {font-style: italic;}
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-style: none;}
svg:not(:root) {overflow: hidden;}

ol, ul {list-style: none;}

hr {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;} /* remove color inheritance if working on white-on-bkack-background */
button {overflow: visible;}
button, select {text-transform: none;}
button, html [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button;}
button::-moz-focus-inner, input::-moz-focus-inner {border-style: none; padding: 0;}
input {line-height: normal;}
[type="checkbox"], [type="radio"] {padding: 0;}
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {height: auto;}
[type="search"] {-webkit-appearance: textfield;}
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
textarea {overflow: auto;}

table {border-collapse: collapse; border-spacing: 0;}
td, th {padding: 0;}

/* Personal, opinionated & h5bp defaults */

a[href] {cursor: pointer;}

a[role="button"] {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
        /*user-select: none;*/ /* not supported yet */
}

[role="button"], label, select, button, [type="button"], [type="checkbox"], [type="file"], [type="image"], [type="radio"], [type="reset"], [type="submit"] {cursor: pointer;} /* purely opninionated https://github.com/necolas/normalize.css/issues/371#issuecomment-60072171 - https://github.com/necolas/normalize.css/pull/563 - https://datagif.slack.com/archives/ui-ux/p1479143093000007 */
[disabled] {cursor: default;}

img, svg {display: inline-block; max-width: 100%; height: auto;}
:focus {outline: 0 none;}
textarea {resize: vertical;}
audio, canvas, img, svg, progress, video {vertical-align: middle;}

:lang(fr) {quotes: "\00ab\00a0" "\00a0\bb" "\201c" "\201d";} /* « … “…” … » */
:lang(en) {quotes: "\201c" "\201d" "\2018" "\2019";} /* “ … ‘…’ … ” */
q::before, blockquote > p::before {content: open-quote;}
q::after, blockquote > p::after {content: close-quote;}

/* @end RESETS */


@font-face {
  font-family: 'AvenirNext';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Avenir-Roman.woff') format('woff'),
       url('../fonts/Avenir-Roman.otf')  format('opentype');
}

@font-face {
  font-family: 'AvenirNext';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/Avenir-Medium.woff') format('woff'),
       url('../fonts/Avenir-Medium.otf')  format('opentype');
}


@font-face {
  font-family: 'MinionPro';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/MinionPro-Regular.woff') format('woff'),
       url('../fonts/MinionPro-Regular.otf')  format('opentype');
}
@font-face {
  font-family: 'MinionPro';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/MinionPro-Semibold.woff') format('woff'),
       url('../fonts/MinionPro-Semibold.otf')  format('opentype');
}
@font-face {
  font-family: 'MinionPro';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/MinionPro-SemiboldIt.woff') format('woff'),
       url('../fonts/MinionPro-SemiboldIt.otf')  format('opentype');
}
@font-face {
  font-family: 'MinionPro';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/MinionPro-Bold.woff') format('woff'),
       url('../fonts/MinionPro-Bold.otf')  format('opentype');
}

@font-face {
  font-family: 'MinionPro';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/MinionPro-BoldIt.woff') format('woff'),
       url('../fonts/MinionPro-BoldIt.otf')  format('opentype');
}

/* @group BASE */

html {
  height: 100%;
  color: #000;
  font: 1em/1.4 'AvenirNext', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  min-height: 100%;
  background-color: #fff;
}

::-moz-selection {color: #e5e2fa; background-color: #000}
::selection {color: #e5e2fa; background-color: #000}


img, video {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  transition: color 100ms, background-color 100ms;
}

a:hover {
  transition: color 0ms, background-color 0ms;
}

a:active {
  position: relative;
  top: 1px;
}

a:focus, a:active, a:hover {outline: 0 none;}

a svg {transition: fill 100ms ease;}
a:hover svg {transition: fill 50ms ease;}

/* @end BASE */


/* @group LAYOUTS */

.main-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-right: 2.6%;
  padding-left: 2.6%;
}

.section {
  min-height: 100vh;
}


.columns-container {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}
.columns-container > div {
  padding: 0 25px;
}
.columns-container > div:fist-child {
  padding-left: 0;
}
.columns-container > div:fist-last {
  padding-right: 0;
}

.one-eleventh {
  width: 9.09%;
}
.two-eleventh {
  width: 18.18%; 
}
.three-eleventh {
  width: 27.27%;
}
.four-eleventh {
  width: 36.36%;
}
.five-eleventh {
  width: 45.45%;
}
.six-eleventh {
  width: 54.54%;
}
.seven-eleventh {
  width: 63.63%;
}
.height-eleventh {
  width: 72.72%;
}
.nine-eleventh {
  width: 81.81%;
}
.ten-eleventh {
  width: 90.09%;
}
.eleven-eleventh {
  width: 100%;
}

/* @end LAYOUTS */

/* @group BACKGROUND-CONTAINER */

.background-container {
  position: absolute;
  height: 280vh;
  width: 100%;
  left: 0;
  background-size: cover;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: left top;
  z-index: -1;
}
  .background-container-one {
    top: -100vh;
    background-image: url('../img/background1.svg');
  }
  .background-container-two {
    top: auto;
    bottom: 0;
    background-position: right bottom;
    background-image: url('../img/background2.svg');
  }

/* @end BACKGROUND-CONTAINER */

/* @group LANDING */
.landing {
  display: flex;
  justify-content: center;
  align-items: center;
}

.landing-logo {
  max-height: 105px;
  width: auto;
  font-size: 0;
  opacity: 0;
  transform: translateY(-10px);
}

.landing-text {
  margin-top: 105px;
  font-size: 2.8vw;
  font-family: 'MinionPro', Garamong, serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.016em;
  line-height: normal;
}
  .landing-text i {
    opacity: 0;
    transform-origin: left center;
    display: inline-block;
  }

.landing-btn {
  margin-top: 40px;
  width: 100%;
  opacity: 0;
  transform: translateY(-6px);
}
  .landing-btn-image {
    max-width: 50%;
  }
/* @end LANDING */

/* @group VIDEO */
.video-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-teaser {
  max-width: 100%;
  max-height: 90vh;
  -moz-box-shadow: 0px 0px 10px 0px #cfcfcf;
  -webkit-box-shadow: 0px 0px 10px 0px #cfcfcf;
  -o-box-shadow: 0px 0px 10px 0px #cfcfcf;
  box-shadow: 0px 0px 10px 0px #cfcfcf;
  filter:progid:DXImageTransform.Microsoft.Shadow(color=#cfcfcf, Direction=NaN, Strength=10);
}
/* @end VIDEO */

/* @group FEATURES */
  .feature {
    margin: 20vh auto;
  }

  .feature:nth-child(2n) .feature-title,
  .feature:nth-child(2n) .feature-text {
    text-align: right;
    margin-left: auto;
  }
    .feature-title {
      font-size: 2.18vw;
      font-weight: 500;
      line-height: normal;
    }

    .feature-text {
      font-family: 'MinionPro', Garamond, serif;
      font-size: 1.5vw;
      line-height: 1.6;
      opacity: 0.5;
      font-weight: 400;
      width: 85%;
      max-width: 100%;
      margin-top: 5vh;
    }

    .social-links {
      padding: 0;
      margin-top: 10vh;
    }
    .social-links > li {
      display: inline-block;
      margin-right: 30px;
    }
      .social-links > li:last-child {
        margin-right: 0;
      }
    .social-link-image {
      width: 30px;
      max-height: 30px;
      height: auto;
    }

/* @end FEATURES */

/* @group WEEK-ARTIST */
.section-title {
  font-size: 1.4vw;
  font-weight: 500;
}

  .artist-title {
    font-size: 2.8vw;
    font-family: 'MinionPro', Garamond, serif;
    font-style: italic;
    font-weight: 700;
  }

  .artist-text {
    font-size: 1.2vw;
    line-height: 1.6;
    opacity: 0.5;
    font-weight: 400;
    width: 90%;
    max-width: 100%;
    margin-top: 3vh;
  }

/* @end WEEK-ARTIST */

/* @group PROGRAMMATION */

.artist-image-container {
  position: relative;
}
  .artist-name {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 2.8vw;
    color: #fff;
    font-family: 'MinionPro', Garamond, serif;
    font-style: italic;
    font-weight: 700;
    margin: 0;
  }

/* @end PROGRAMMATION */

/* @group ABOUT */

.about-category {
  font-size: 1.2vw;
  opacity: 0.5;
  margin-bottom: 3vh;
}
  .about-title {
    margin: 30vh 0 10vh;
  }

  .about-members {
    padding-left: 0;
    margin-top: 5vh;
    margin-bottom: 20vh;
  }

  .about-members li a {
    font-family: 'MinionPro', Garamond, serif;
    font-size: 2vw;
    font-weight: 700;
    text-decoration: none;
  }
  .about-members li a:active, .about-members li a:focus,
  .about-members li a:hover, .about-members li a:visited {
    outline: none;
    text-decoration: none; 
    color: #000;
  }
/* @end ABOUT */



/* @group RESPONSIVE */
.mobile-only {
  display: none;
}

@media (max-width: 1100px) {
  .landing-text {
    font-size: 26px;
  }
}

@media (max-width: 815px) {
  .landing .four-eleventh {
    width: 60%;
  }
}

@media (max-width: 667px) {
  .mobile-only {
    display: block;
  }
  .desktop-only {
    display: none;
  }

  .main-container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .section {
    min-height: auto;
  }

  .background-container {
    height: 80vh;
    background-size: cover;
  }
    .background-container-one {
      top: 0;
    }

  .landing .four-eleventh {
    width: 100%;
  }
  .landing-btn {
    display: none;
  }

  .columns-container {
    display: block;
  }
  .columns-container > div:empty {
    display: none;
  }
  .columns-container > div {
    padding: 0;
    width: 100%;
    display: block;
  }
  .landing-logo {
    width: 100px;
    margin-top: 50px;
  }
  .landing-text {
    display: inline-block;
    margin: 75px auto 100px;
    text-align: left;
  }

  .feature {
    position: relative;
  }

  .video-teaser {
    max-height: 50vh;
  }

  .feature-title {
    font-size: 21px;
  }
  .feature-text {
    font-size: 17px;
    width: 100%;
  }

  .feature:nth-child(2n) .feature-title, .feature:nth-child(2n) .feature-text {
    text-align: left;
    margin: 21px auto;
  }

  .section-title {
    font-size: 17px;
  }
    .artist-title {
      font-size: 30px;
    }
    .artist-text {
      font-size: 17px;
    }
  .social-links {
    margin-bottom: 100px;
  }

  .artist-name {
    font-size: 30px;
    white-space: normal;
  }
  .artists-container {
    width: 100%;
    overflow: visible;
    overflow-x: scroll;
    display: flex;
    padding: 0 10px 0 0;
  }
    .artists-container .three-eleventh {
      white-space: nowrap;
      display: inline-block;
      min-width: 170px;
      margin: 0px 10px;
    }
      .artists-container > div:nth-child(2) {
        margin-left: 0;
      }

  .about-container {
    padding-bottom: 100px;
  }
  .about-category {
    font-size: 17px;
  }
  .about-members {
    margin-bottom: 40px;
  }
  .about-members li a {
    font-size: 25px;
  }
  }
}
/* @end RESPONSIVE */



/* @group PRINT */
@media print {
  
  *, *:before, *:after, *:first-letter, *:first-line {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-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;}
  
}

/* @end PRINT