/* core */
* {
  box-sizing: border-box;
}

/* fonts */
@font-face {
  font-family: Cispeo;
  src: url("../fonts/Cispeo-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: Cispeo;
  src: url("../fonts/Cispeo-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: AlegreyaSans;
  src: url("../fonts/AlegreyaSans-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: AlegreyaSans;
  src: url("../fonts/AlegreyaSans-Italic.woff") format("woff");
  font-weight: 900;
  font-style: italic;
}

@font-face {
  font-family: zcispeo;
  src: url("../fonts/zcispeo-proportionnel-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: zcispeo;
  src: url("../fonts/zcispeo-italique-webfont.woff") format("woff");
  font-weight: 400;
  font-style: italic;
}

/* html native tags */
body {
  font-family: zcispeo;
  font-size: 1.2vw;
  line-height: 1.8;
  color: black;
  height: 100vh;
  padding: 2.5em 3em;
  margin: 0;
  overflow-y: scroll;
}

h1,
h2,
h3,
h4,
h5 {
  color: black;
  font-family: AlegreyaSans;
  line-height: normal;
}

del {
  color:white;
  text-decoration: none;
}

h1 {
  font-size: 3em;
}

h2 {
  font-family: AlegreyaSans;
  font-weight: 900;
  font-size: 3em ;
  margin: 0;
}

h3 {
  margin-top: 3em;
  margin-bottom: .6em;
  font-size: 1.5em;
}

h4 {
  margin-top: 0;
  margin-bottom: .6em;
  font-size: 1.5em;
}

a {
  color: inherit;
  text-decoration: none;
}

p a {
  color:inherit;
  border-bottom: solid white 1px;
}

a:hover {
  color: white;
}

b,
strong {
  font-weight: 700;
}

pre {
  background: #F0F0F0;
  margin: 1rem 0;
  border-radius: 2px;
  width: 100%;
}

blockquote {
  border-left: 2px solid white;
  margin: 0;
  padding: 0 2rem;
  font-family: zcispeo;
  font-style: italic;
}

code {
  width: 100%;
}

footer {
  text-align: center;
  margin-top: 2em;
  font-style: oblique;
}

iframe {
  max-width: 100%;
}

/* Utility Classes */
.logojdll {
  width:100%;
  margin-top: -12%;
}

.logojdlltypo {
  margin-top:-15%;
}

.reseaux {
  margin-top:1em;
}

.reseaux>a>img {
  width:2em;
  margin-right:0.5em;
}

.bck {
  width:100vw;
  height: 100vh;
  background-size: 100% 100%;
  position: fixed;
  z-index: -1000;
  margin: -2.5em -3em;
}

.wrapper {
  grid-column: 1 / 4;
  width: auto;
  height: auto;
}

.inter-title, h6 {
  margin: 2rem 0 2rem -1.8rem !important;
  font-family: AlegreyaSans;
  font-weight: 900;
  font-size: 1.8em ;
}

.inter-title::before, h6::before {
  content:"\2015\2015\2015\2015\2015";
  display: inline-block;
  width: auto;
  color: white;
  font-family: AlegreyaSans;
  font-weight: 900;
  margin-right: 1rem;
}

.top-nav-logo-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.white {
  color: white;
}

.full {
  width: 100%;
}

.min {
  width: 70%;
}

.hide {
  display: none !important;
}

.active a {
  color: white !important;
}

@keyframes blink {
  0% {background-color: #BE0BFF;}
  25% {background-color: #0B5BFF;}
  50% {background-color: #FFE842;}
  100% {background-color: #BE0BFF;}
}

.ha-anim {
  animation-name: blink;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  padding: 0 1em;
  border: none;
}

#haWidget {
  width:100%;
  height:400px;
  border:none;
}

/* popup */
#helloasso-popup {
  width: 300px;
  position: absolute;
  z-index: 19;
  background-color: #f1f1f1;
  border: 1px solid #d3d3d3;
  text-align: center;
  top: 30%;
  left: 40%;
}

.topbar {
  position: relative;
  padding: 10px;
  cursor: move;
  background: linear-gradient(45deg, #c2e1ad, #54ffe1);
  color: black;
}

.close {
  position: absolute;
  right: 0.5em;
  top: 0.5em;
  width: 32px;
  height: 32px;
  opacity: 1;
  cursor: pointer;
}

.close::before, .close::after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 33px;
  width: 2px;
  background-color: black;
}

.close::before {
  transform: rotate(45deg);
}

.close::after {
  transform: rotate(-45deg);
}

/* header */
.header {
  color: black;
}

.top-wrap {
  place-items: end right;
}

#introduction {
  grid-column: 1 / span 8;
  font-family: zcispeo;
}

.home-w {
  margin-top: 5%;
}

.box {
  padding: .06em .6em;
  border-radius: 2px;
  border: 2px solid white;
}

.header a {
  color: #fff;
}

/* Grid System */
.main_container {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: auto 30px;
  grid-auto-rows: minmax(100px, auto);
}

header {
  grid-row: 1 / 3;
  grid-column: 2;
}

main {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

footer{
  grid-row: 2 / 3;
  grid-column: 1 / 3;
}

/* Menu Settings */
.main-nav {
  place-items: center center;
  width: 28%;
  position: fixed;
  top: 1.5em;
  right: 0;
  z-index: 10;
}

/* fallback nav */
.main-nav > div {
  flex: 1;
  float: left;
  width: auto;
}

.navbar {
  grid-column: 1 / span 2;
  grid-row: 1 / span 3;
}

.logo {
  text-align: center;
  grid-column: 3 / span 2;
  grid-row: 2 / span 1;
  font-size: 4.5em;
  font-weight: 900;
  font-family: AlegreyaSans;
  line-height: 1em;
}

.main-nav ul {
  text-align: right;
  letter-spacing: -1em;
  margin:0;
  padding: 0;
  list-style-type: none;
}

.main-nav ul li {
  letter-spacing: normal;
  margin: 1em 0 0.8em;
}

.navbar ul li:nth-child(6) {
  transform: rotate(-15deg);
  margin-right: -2em;
}

.navbar ul li:nth-child(5) {
  transform: rotate(-10deg);
  margin-right: -1em;
}

.navbar ul li:nth-child(4) {
  transform: rotate(-3deg);
}

.navbar ul li:nth-child(3) {
  transform: rotate(5deg);
}

.navbar ul li:nth-child(2) {
  transform: rotate(9deg);
}

.navbar ul li:nth-child(1) {
  transform: rotate(15deg);
  margin-right: -1em;
}

.main-nav ul li a {
  position: relative;
  display: block;
  line-height: 1.8em;
  color: black;
  padding: 0 20px;
  white-space: nowrap;
}

li a span {
  border-bottom: 0.15em solid white;
  padding: 0 0.1em 0.15em;
}

.main-nav>ul>li>a {
  border-radius: 2px;
}

/* Active item */
.main-nav ul li:hover>a {
  color: white;
}

.phone-nav, .phone-nav-button {
  display: none;
}

/* sidebar */
.sidebar-container .home {
  grid-column: 6 / span end;
  margin: 1em 0 0;
  padding: 0;
}

.home li {
  list-style: none;
  float: left;
  grid-column: span 4 / auto;

}

.sidebar li {
  margin-right: 3em;
  z-index: 4;
}

.common li {
  list-style: none;
  float: right;
  clear: both;
  margin-bottom: .3em;
}

/* home */
.home-content {
  grid-column: 1 / span 8;
}

.header-info {
}

.header-info p {
  margin-top:.35em;
  margin-bottom:.35em;
}

.theme {
  display: grid;
  grid-template-columns: 80% 20%;
  grid-template-rows: auto 1fr;
  align-items: end;
}

.theme-header {
  grid-row: 1;
  grid-column: 1 / span end;
}

.theme-header p:first-child {
  float: left;
  display: inline-block;
  border-bottom:0.15em solid white;
  padding-bottom: .06em;
}

.theme-header p:last-child {
  display: inline-block;
  margin-left: 10em;
}

.theme h2 {
  width: 100%;
  margin-top: 0.5em;
  margin-bottom: 1em;
  grid-row: 2;
  grid-column: 1 / span end;
  line-height: 1.3em;
  text-align: left;
}

.theme-title {
  color: white;
}

.annonce {
  grid-column: 1 / span end;
  margin-top: 1rem;
  margin-bottom: 4rem;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.annonce .ann-item {
  grid-column: 2 / span 10;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  background: rgb(255 255 255 / 40%);
  border-radius: 1em;
  margin-top: 2rem;
}

.annonce .ann-title {
  grid-column: 1 / span 3;
  padding: 2rem 1.8rem;
  overflow-wrap: break-word;
}

.annonce .ann-content {
  grid-column: 4 / span end;
  padding: 2rem 1.8rem;
  display: inline-block;
  width: 100%;
}

.annonce .ann-content img {
  width: 100%;
  height:  auto;
}

.a
.annonce p {
  margin: 0 0 0.7em;
}

/* content */
.content {
  grid-column: 1 / span 8;
  margin-bottom: 30%;
}

.content img {
  width: 100%;
}

.content>p:nth-child(1) {
  margin-top: 0;
}

#histoire>p:nth-child(1) {
  margin-top: 0;
}

#histoire img {
  width: 100%;
}

.pretalx-container {
  overflow: scroll;
}

h3+p {
  margin-top: .3em;
}

.participer {
  margin:4em 0;
}

.participer a:hover {
  background: white;
  color:black;
}

.participer a {
  border: 2px solid white;
  padding: .7em;
}

/* presse */
.pr img {
  width: auto !important;
}

/* sponsors */
.sponsor {
  position: relative;
  height: auto;
  display: inline-block;
}

.sponsor ul {
  column-count: 3;
  list-style: none;
}

.sponsor ul li::before {
  content: "\2022";
  color: white;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

.sponsor h3 {
  position: relative;
  margin-top: 1.5em;
  margin-bottom: 1em;
}

.sp-logos {
  margin-top: 1.5em;
  clear: both;
  height: auto;
  display: block;
}

.sp-logo {
  width: 150px;
  height: 150px;
  float: left;
  margin: 0 1em 1em 0;
  background: white;
  border-radius: 50%;
  overflow: hidden;

}

.sp-logo img {
  width: 80%;
  grid-column: 1 / span end;
  align-self: center;
  margin: 0 auto;
}

.tableau .cell {
  grid-column: span 4;
  background: white;
  margin: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  font-size: 0.8rem !important;
}

.tableau .cell h3 {
  margin: 1rem 0 0.3rem;
}

.st-inf h2 {
  font-size:1.8rem;
  text-align: center;
}

.tableau .cell h3::before {
  content: "\2022";
  color: orange;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-right: 0.1em;
}

.grey {
  color: grey !important;
  opacity: 0.3 !important;
}

.gal {
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  position: relative;
  height: auto;
}

.gal div {
  background-color: transparent;
  width: 100%;
  height: 100%;
  display: inline-block;
  overflow: hidden;
}

.gal img {
  width: 100%;
  max-width:100%;
  height: auto;
}

button {
  position: absolute;
  height: 100%;
  border: none;
  width: 1em;
  background: transparent;
  margin: 0;
  color: white;
  font-size: 3em !important;
  transition: all 200ms;
}

button:hover {
  cursor: pointer;
  color: black;
  background: transparent;
  transition: all 200ms;
  opacity: 0.2;
}

.next {
  right: 0;
  text-align: right;
}

.prev {
  left: 0;
  text-align: left;
}

.grid-media {
  width: 100%;
  border-top: 1px solid white;
  border-left: 1px solid white;
  border-right: 1px solid white;
  display: grid;
  grid-template-columns: 80% 20%;
  margin-top:2em;
  height: auto;
}

.grid-media div {
  border-bottom: 1px solid  white;
  height: 4em;
  align-self: end;
}

.grid-media a:hover {
  color:white;
}

.grid-media img {
  max-height: 100%;
  width: auto;
}

.item-description {
  padding: 0 0 2% 2em;
}

.item-type {
  border-left: 1px solid white;
  padding: 0.3em 0 0 1em;
  overflow: hidden;
}

/* programme */
.wait {
  position: relative;
  width: 100% ;
}

.wait svg {
  width: 100%;
  stroke-width: 4;
  stroke: white;
}

#programme {
  box-sizing: border-box;
}

#programme ul {
  list-style-type: none;
}

#programme>p:nth-child(1) {
  margin-top:0;
}

#cal {
  position: relative;
}

#cal, #cal ul {
  padding: 0;
  list-style: none;
}

#cal h1, #cal h4 {
  margin:0;
}

#cal h3 {
  margin: 0.20em 0;
}

#cal .type {
  text-align: center;
  border: 2px solid white;
  padding: 0.5em 0;
  cursor: pointer;
}

#cal .type:hover {
  background: white;
}

#cal .type .white {
  display: inline-block;
  transition: all 150ms;
}

#cal .type:hover .white {
  color:black !important;
}

span.type {
  display:inline-block;
  width:90%;
}

#cal .timebox {
  border:2px solid white;
  border-top: none;
  display: none;
}

#cal .event {
  width: 100%;
  display: inline-block;
}

#cal .row-1 {
  display: flex;
  width: 100%;
  border-top: solid 2px white;
}

.border {
  border-bottom: solid 2px white;
}

#cal .hour {
  background: white;
  padding: 0 1.5em 0 1em;
  border-bottom:2px solid white;
  border-top:2px solid white;
}

#cal .arrow {
  position: relative;
  padding: 1em 0 0;
  font-size: 1.4em;
  float: left;
  width: 10%;
  text-align: center;
  border-right: solid 2px white;
  cursor: pointer;
}

.rotate {
  transform: rotate(180deg);
}

#cal .arrow:hover {
  background: white;
  color: black !important;
}

#cal .arrow span {
  display: block;
  transition: all 250ms;
}

#cal .arrow span:hover {
  color: black !important;
}

#cal .info {
  position: relative;
  float: left;
  width: 90%;
  padding: 1em 1.5em;
}

#cal .abstract {
  display: none;
  width: 90%;
  position: relative;
  float:right;
  padding: 0 1.5em;
}

.tableau .annex {
  display: none;
}

/* pretalx embed unit */
.pretalx-schedule-wrapper {
  max-height: fit-content !important;
  height: auto !important;
}

.pretalx-schedule-day-wrapper {
  max-height: none !important;
  height: auto !important;
}

#fahrplan.proportional .pretalx-schedule-day, .pretalx-schedule-wrapper .pretalx-schedule-day {
  background: none !important;
}

#fahrplan.proportional .pretalx-schedule-day .pretalx-schedule-rooms .pretalx-schedule-room, .pretalx-schedule-wrapper .pretalx-schedule-day .pretalx-schedule-rooms .pretalx-schedule-room {
  background : repeating-linear-gradient(to bottom, #6d1add, #aaa8ac 2px, #fff0 2px, #fff0 30px, #584fc4 30px, #6c2ac4 31px, #fff0 31px, #fff0 60px) !important;
}

/* media query smartphone */
@media (width <= 700px) {
  #helloasso-popup {
    display: none;
  }

  .logo svg {
    width: 2.5em;
  }

  .lock {
    overflow: hidden;
    scroll-behavior: smooth;
  }

  /* menu */
  .navbar {
    display:none;
  }

  .navbar ul li:nth-child(n) {
    transform: none;
    margin-right: 0;
  }

  form .search-submit {
    display:block;
    height: 1em;
    line-height: 1em;
    position: relative;
    float: left;
    clear: both;
    margin: 0;
    margin: 0 50%;
    transform: translate(-50%);
    border: none;
    background: transparent;

  }

  .main-nav {
    padding: 0 20px 0 0 !important;
    z-index: 100;
  }

  .phone-nav {
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 105%;
    text-align: center;
    margin: -2.5em -3em;
    display: none;
    z-index: 99;
  }

  .phone-nav .navbar {
    display:block;
  }

  .phone-nav .navbar ul {
    margin: 1rem 0 0;
    line-height: 2em;
    padding: 0;
    list-style: none;
    font-size: 5.2vw;
    color:black;
  }

  .phone-nav .navbar:first-of-type {
    margin: 4rem 0 0;
  }

  .phone-nav .navbar a {
    color:black;
  }

  .phone-nav li.search .search-input {
    float: left;
    margin: 1em 50% 0;
    transform: translate(-50%);
    position: relative;
    width : 80% !important;
    font-size: 5.2vw;
  }

  .phone-nav-button {
    display: inline-block;
    margin: 1em 0 0;
  }

  .phone-nav-button:hover > div {
    background-color: black;
    cursor:pointer;
  }

  .phone-nav-button #bar2, .phone-nav-button #bar1, .phone-nav-button #bar3 {
    width: 35px;
    height: 2px;
    background-color: white;
    margin: 6px 0;
    border-radius: 1em;
    transition: 0.4s;
  }

  .change #bar1 {
    transform: rotate(-45deg) translate(-4px, 6px);
  }

  .change #bar2 {
    opacity: 0;
  }

  .change #bar3 {
    transform: rotate(45deg) translate(-6px, -8px);
  }

  .common {
    display: none;
  }

  /* content */
  .content {
    grid-column: 1 / span 10;
    font-size: 3.2vw;
  }

  /* home page */
  #introduction {
    font-size: 3.2vw;
  }

  .homewrap {
    font-size: 3.2vw;
  }

  .home-content p {
    font-size: 2.8vw;
  }

  .box {
    padding: .06em .6em;
    border-radius: 2px;
    border: 0.5px solid white;
  }

  .theme-header p:last-child {
    display: inline-block;
    margin-left: 0;
  }

  .theme h2 p {
    font-size: 7vw !important;
    grid-row: 2;
    grid-column: 1 / span end;
    line-height: 1.3em;
    text-align: left;
  }

  .header-info {
    margin-bottom: 3rem;
  }

  .home-w .inter-title {
    font-size: 4vw;
  }

  .tableau .cell {
    grid-column: span 1 / end;
  }

  .tableau .cell h2 {
    display: inline-block;
  }

  .st-inf {
    display: none;
  }

  .reseaux>a>img {
    width:1.8em;
  }
 
  .annonce {
    grid-column: 1 / span end;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }

  .annonce .ann-item {
    grid-column: 1/span end;
    margin-top: 0;
  }

  .annonce .ann-content {
    grid-column: 4 / span end;
    padding: 1.5em 0.3rem;
    display: inline-block;
    width: 100%;
  }

  .annonce .ann-content img {
    width: 100%;
    height:  auto;
  }

  .annonce .ann-title {
    font-size: 2vw;
    grid-column: 1 / span 3;
    padding: 2em 0.3rem;
  }

  /* media */
  .item-description {
    padding: 0 0 0.8em 2em;
  }

  .item-type {
    border-left: 1px solid white;
    padding: 0;
    overflow: hidden;
  }

  .grid-media {
    width: 80%;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
    display: grid;
    grid-template-columns: 80% 20%;
    margin-top:2em;
    height: auto;
  }

  .grid-media img {
    width: auto;
    max-height: 2em;
  }

  .show {
    display: block;
  }
}