/*--------------------------------------------------------*/
/* FONTS
/*--------------------------------------------------------*/

/* palanquin-regular - latin */
@font-face {
  font-family: 'Palanquin';
  font-style: normal;
  font-weight: 400;
  src: local('Palanquin Regular'), local('Palanquin-Regular'),
     url('../fonts/palanquin-v4-latin-regular.woff2') format('woff2'),
     url('../fonts/palanquin-v4-latin-regular.woff') format('woff');
  }
  
  /* palanquin-600 - latin */
  @font-face {
  font-family: 'Palanquin';
  font-style: normal;
  font-weight: 600;
  src: local('Palanquin SemiBold'), local('Palanquin-SemiBold'),
     url('../fonts/palanquin-v4-latin-600.woff2') format('woff2'),
     url('../fonts/palanquin-v4-latin-600.woff') format('woff');
  }
  

/* oleo-script-regular - latin */
@font-face {
  font-family: 'Oleo Script';
  font-style: normal;
  font-weight: 400;
  src: local('Oleo Script'), local('OleoScript-Regular'),
     url('../fonts/oleo-script-v7-latin-regular.woff2') format('woff2'),
     url('../fonts/oleo-script-v7-latin-regular.woff') format('woff');
  }





/*--------------------------------------------------------*/
/* GENERAL RULES
/*--------------------------------------------------------*/

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

html, body {
  font-family: "Palanquin", sans-serif;
  font-weight: 400;
  color: #000000;
  font-size: 18px;
}

body {
  background-color: #FFFFFF;
}

a,
a:hover,
a:active,
a:visited {
  text-decoration: none;
}


/*--------------------------------------------------------*/


@media only screen and (max-width: 480px) {
  html {
    font-size: 16px;
  }
}





/*--------------------------------------------------------*/
/* HEADER
/*--------------------------------------------------------*/

#main-header {
  height: 460px;

  position: relative;

  background: #FFFFFF;
}

#main-header-background {
  height: 100%;
  width: 100%;

  background-image: url("../img/header/background-1080.jpg");
  background-size: cover;
  background-repeat: no-repeat;

  z-index: 500;
}

#main-header-title {
  height: 80%;
  width: 80%;

  position: absolute;
  top: 30px;
  left: 10%;

  z-index: 1000;
}

/*--------------------------------------------------------*/

@media only screen and (max-width: 800px) {
  #main-header {
    background-image: url("../img/header/background-800.jpg");
  }
}

@media only screen and (max-width: 480px) {
  #main-header {
    background-image: url("../img/header/background-480.jpg");
  }
}

/*--------------------------------------------------------*/
/* CONTENT
/*--------------------------------------------------------*/

section {
  max-width: 960px;

  margin: 0 0 100px calc(50% - 480px);
  padding: 0 60px;

  text-align: justify;
  line-height: 180%;
}

section h2 {
  margin: 0 0 25px 0;
  padding: 20px 0;

  border-bottom-width: 5px;
  border-bottom-style: solid;

  color: #FFFFFF;
  font-family: "Oleo script", sans-serif;
  font-size: 4rem;
  font-weight: 400;
  text-align: center;
  word-wrap: break-word;
  hyphens: none;
}

section p {
  padding: 0 0 20px 0;
  font-size: 1rem;
}

section strong {
  font-weight: 600;
}

section p.stand-out {
  font-style: italic;
  text-align: center;
}

section .underline-links a:hover,
section .underline-links a:active {
  text-decoration: underline;
}


/* Colors */

section.red h2 {
  color: #EA6C61;
  border-bottom-color: #f7cbc0;
}

section.orange h2 {
  color: #e6a04f;
  border-bottom-color: #f8dfc2;
}

section.green h2 {
  color: #5fb574;
  border-bottom-color: #cae2cb;
}

section.blue h2 {
  color: #2896ce;
  border-bottom-color: #bcd4ec;
}

section.purple h2 {
  color: #9e60ce;
  border-bottom-color: #d8bfeb;
}

section.pink h2 {
  color: #e4678c;
  border-bottom-color: #f3cad2;
}

section.red a,
section.red a:hover,
section.red a:active,
section.red a:visited {
  color: #EA6C61;
}

section.orange a,
section.orange a:hover,
section.orange a:active,
section.orange a:visited {
  color: #e6a04f;
}

section.green a,
section.green a:hover,
section.green a:active,
section.green a:visited {
  color: #5fb574;
}

section.blue a,
section.blue a:hover,
section.blue a:active,
section.blue a:visited {
  color: #2896ce;
}

section.purple a,
section.purple a:hover,
section.purple a:active,
section.purple a:visited {
  color: #9e60ce;
}

section.pink a,
section.pink a:hover,
section.pink a:active,
section.pink a:visited {
  color: #e4678c;
}


/*--------------------------------------------------------*/


@media only screen and (max-width: 880px) {
  section {
    width: 100%;

    margin: 0 auto 100px auto;
    padding: 0 60px;
  }

  section h2 {
    padding: 15px 0;

    border-bottom-width: 4px;  

    font-size: 3rem;
  }
}

@media only screen and (max-width: 480px) {
  section {
    padding: 0 30px;

    line-height: 150%;
  }
}

@media only screen and (max-width: 360px) {
  section h2 {
    padding: 5px 0;

    font-size: 2.2rem;
  }
}


/*--------------------------------------------------------*/
/* BUTTONS
/*--------------------------------------------------------*/

.button {
  display: block;
  width: 80%;

  margin: 20px auto 0 auto;
  padding: 15px 0;

  border-width: 2px;
  border-style: solid;

  font-size: 1.4rem;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;

  line-height: 32px;
}

section.red .button {
  background-color: #fbe5df;
  border-color: #EA6C61;
  color: #EA6C61;
}

section.orange .button {
  background-color: #fbefe0;
  border-color: #d78d38;
  color: #d78d38;
}

section.red .button:hover {
  background-color: #f7cbc0;
}

section.orange .button:hover {
  background-color: #f8dfc2;
}

.button img {
  height: 32px;
  width: 32px;

  margin: 0 5px;
}

.button > * {
  vertical-align: middle;
}


/*--------------------------------------------------------*/


@media only screen and (max-width: 480px) {
  .button {
    width: 100%;

    padding: 10px 15px;

    font-size: 1.1rem;

    line-height: 24px;
  }

  .button img {
    height: 24px;
    width: 24px;
  }
}





/*--------------------------------------------------------*/
/* LOCATION
/*--------------------------------------------------------*/

#mailing-address {
  font-size: 1.5rem;

  text-align: center;
  line-height: 32px;
  vertical-align: middle;
}

#mailing-address img {
  width: 32px;
  height: 32px;

  vertical-align: middle;
}


#interactive-map {
  width: 100%;

  margin: 20px 0;

  border: none;
  border-radius: 10px;
}


#public-transport-info {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;

  margin: 0 0 0 -100px;
  
  font-size: 1.5rem;
  font-weight: 400;

  line-height: 48px;
  vertical-align: middle;
  white-space: nowrap;
}

#public-transport-info > * {
  margin: 5px;

  justify-self: left;
}

#public-transport-info img {
  width: 48px;
  height: 48px;

  margin: 0 5px 0 0;

  vertical-align: bottom;
}

#transport-metro-icon,
#transport-metro-stop,
#transport-bus-1-icon,
#transport-bus-1-stop {
  grid-row: 1;
}

#transport-rer-icon,
#transport-rer-stop,
#transport-bus-2-icon,
#transport-bus-2-stop {
  grid-row: 2;
}

#transport-noctilien-icon,
#transport-noctilien-stop {
  grid-row: 3;
}

#transport-metro-icon,
#transport-rer-icon {
  grid-column: 1;
  justify-self: end;

}

#transport-metro-stop,
#transport-rer-stop {
  grid-column: 2;
}

#transport-bus-1-icon,
#transport-bus-2-icon,
#transport-noctilien-icon {
  grid-column: 3;
  justify-self: end;

}

#transport-bus-1-stop,
#transport-bus-2-stop,
#transport-noctilien-stop {
  grid-column: 4;
}


/*--------------------------------------------------------*/


@media only screen and (max-width: 880px) {
  #public-transport-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    align-items: center;

    margin: 0;

    line-height: 48px;
  }

  #transport-metro-icon,
  #transport-metro-stop {
    grid-row: 1;
  }

  #transport-rer-icon,
  #transport-rer-stop {
    grid-row: 2;
  }

  #transport-bus-1-icon,
  #transport-bus-1-stop {
    grid-row: 3;
  }

  #transport-bus-2-icon,
  #transport-bus-2-stop {
    grid-row: 4;
  }

  #transport-noctilien-icon,
  #transport-noctilien-stop {
    grid-row: 5;
  }

  #transport-metro-icon,
  #transport-rer-icon,
  #transport-bus-1-icon,
  #transport-bus-2-icon,
  #transport-noctilien-icon  {
    grid-column: 1;
    justify-self: end;

  }

  #transport-metro-stop,
  #transport-rer-stop,
  #transport-bus-1-stop,
  #transport-bus-2-stop,
  #transport-noctilien-stop  {
    grid-column: 2;
  }
}

@media only screen and (max-width: 580px) {
  #mailing-address {
    font-size: 1.1rem;
  }

  #public-transport-info {
    grid-template-columns: 4fr 6fr;

    line-height: 32px;
    font-size: 1.1rem;
  }

  #public-transport-info img {
    width: 32px;
    height: 32px;
  }
}

@media only screen and (max-width: 380px) {
  #public-transport-info img {
    display: block;
  }
}





/*--------------------------------------------------------*/
/* SPONSORS
/*--------------------------------------------------------*/

.sponsor-logo-container {
  text-align: center;
}

.sponsor-logo-container img {
  height: 100px;
  object-fit: cover;

  margin: 20px;
}

/*--------------------------------------------------------*/

@media only screen and (max-width: 880px) {
  .sponsor-logo-container img {
    display: block;
    
    margin: 10px auto;
  }
}

@media only screen and (max-width: 480px) {
  .sponsor-logo-container img {
    height: 80px;
  }
}





/*--------------------------------------------------------*/
/* CONTACT
/*--------------------------------------------------------*/

#contact-email {
  font-family: monospace;
  font-size: 1.5rem;
  text-align: center;
  word-wrap: break-word;
}

#contact-email img {
  width: 32px;
  height: 32px;

  vertical-align: bottom;
}


/*--------------------------------------------------------*/

@media only screen and (max-width: 880px) {
  #contact-email {
    font-size: 1.2rem;
  }
}


@media only screen and (max-width: 480px) {
  #contact-email {
    font-size: 1rem;
  }

  #contact-email img {
    display: none;
  }
}






/*--------------------------------------------------------*/
/* REMERCIEMENTS
/*--------------------------------------------------------*/

#acknowledgements {
  text-align: center;
  line-height: 1.1rem;
}

#acknowledgements > span {
  display: block;
}

#acknowledgements .name {
  font-weight: 700;
}

#acknowledgements .role {
  margin: 0 0 20px 0;

  color: #6B6666;
}






/*--------------------------------------------------------*/
/* DESCRIPTION DES EVENEMENTS
/*--------------------------------------------------------*/

#events-toc {
  margin: 0;
  padding: 0;

  list-style-type: none;
}

.event {
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-template-rows: 1.5rem 1rem 1fr;
}

.event-title {
  grid-row: 1;
  grid-column: 2;

  font-size: 1.3rem;
}

.event-time {
  grid-row: 1;
  grid-column: 1;
  justify-self: end;

  margin: 0 20px 0 0;

  font-size: 1.3rem;
}

.event-time .start,
.event-time .end {
  float: left;
}

.event-time .start::after {
  content: "–";
}

.event-location {
  grid-row: 2;
  grid-column: 2;

  font-style: italic;
}

.event-description {
  grid-row: 3;
  grid-column: 2;

  margin: 0 0 10px 0;
  padding: 20px 0;
  line-height: 150%;
}

/*--------------------------------------------------------*/

@media only screen and (max-width: 750px) {
  .event {
    grid-template-columns: 1fr 3fr;
  }
}

@media only screen and (max-width: 650px) {
  .event {
    grid-template-columns: 2fr 5fr;
  }

  #events-toc {
    line-height: 250%;
  }
}

@media only screen and (max-width: 550px) {
  .event {
    grid-template-columns: 1fr 2fr;
  }
}

@media only screen and (max-width: 480px) {
  .event {
    grid-template-rows: 2rem auto auto 1fr;
    grid-template-columns: 1fr;
  }

  .event-time {
    grid-row: 1;
    justify-self: start;
  }

  .event-title {
    grid-row: 2;
    grid-column: 1;
  }

  .event-location {
    grid-row: 3;
    grid-column: 1;
  }

  .event-description {
    grid-row: 4;
    grid-column: 1;
  }
}