/* Riddle
 *
 * /sass/styles.scss - Main stylesheet
 *
 * coded by Anne
 * started at 29/10/2018
 */
/* Riddle
 *
 * /steegins/colors
 *
 * coded by Anne
 * started at 29/10/2018
 */
/* Riddle
 *
 * /steegins/fonts
 *
 * coded by Anne
 * started at 29/10/2018
 */
@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,600,800,900");
/* Riddle
   *
   * /sass/generic/meyer-reset.scss - Meyer reset
   *
   *
   * started at 18/10/2017
   */
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, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Riddle
   *
   * /sass/generic/box-sizing.scss - box sizing definition
   *
   * coded by Anne
   * started at 18/10/2017
   */
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

/* Riddle
 *
 * /sass/base/root.scss - Base styles
 *
 * coded by Anne
 * started at 10/11/2018
 */
.sro {
  display: none;
}

html {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  line-height: 1.5;
}

body {
  position: relative;
}

p {
  line-height: 1.5;
}

.center {
  text-align: center;
}

.back-to-top {
  background: #68B3C3;
  padding: .5em;
  color: white;
  position: fixed;
  display: none;
  border-radius: 2px;
  right: 15px;
  bottom: 15px;
  font-size: 1em;
  transition: background 0.5s;
  z-index: 1000;
}

.back-to-top:hover {
  background: #00c1c1;
}

.fixed-to-top {
  top: 0;
}

.invisible {
  visibility: hidden;
}

.link {
  text-decoration: none;
  color: #68B3C3;
  transition: .3s ease;
}

.link:hover, .link:focus {
  color: #362F27;
}

/**
 * ----------------------------------------
 * animation scale-in-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

.scale-in-center {
  -webkit-animation: scale-in-center 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: scale-in-center 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/**
 * ----------------------------------------
 * animation fade-in-right
 * ----------------------------------------
 */
@-webkit-keyframes fade-in-right {
  0% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-in-right {
  0% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

.fade-in-right {
  -webkit-animation: fade-in-right 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in-right 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

/**
 * ----------------------------------------
 * animation fade-in-left
 * ----------------------------------------
 */
@-webkit-keyframes fade-in-left {
  0% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-in-left {
  0% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

.fade-in-left {
  -webkit-animation: fade-in-left 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in-left 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fade-in {
  -webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@keyframes grain {
  0%, 100% {
    transform: translate(0, 0, 0);
  }
  10% {
    transform: translate(-1%, -1%);
  }
  20% {
    transform: translate(1%, 1%);
  }
  30% {
    transform: translate(-2%, -2%);
  }
  40% {
    transform: translate(3%, 3%);
  }
  50% {
    transform: translate(-3%, -3%);
  }
  60% {
    transform: translate(4%, 4%);
  }
  70% {
    transform: translate(-4%, -4%);
  }
  80% {
    transform: translate(2%, 2%);
  }
  90% {
    transform: translate(-3%, -3%);
  }
}

@keyframes scratch {
  0%, 100% {
    transform: translateX(0);
    opacity: 0.2;
  }
  10% {
    transform: translateX(-1%);
  }
  20% {
    transform: translateX(1%);
  }
  30% {
    transform: translateX(-2%);
    opacity: 0.1;
  }
  40% {
    transform: translateX(3%);
  }
  50% {
    transform: translateX(-3%);
    opacity: 0.05;
  }
  60% {
    transform: translateX(8%);
  }
  70% {
    transform: translateX(-3%);
  }
  80% {
    transform: translateX(10%);
    opacity: 0.2;
  }
  90% {
    transform: translateX(-2%);
  }
}

@keyframes inner-scratch {
  0% {
    transform: translateX(0);
    opacity: 0.1;
  }
  10% {
    transform: translateX(-1%);
  }
  20% {
    transform: translateX(1%);
  }
  30% {
    transform: translateX(-2%);
  }
  40% {
    transform: translateX(3%);
  }
  50% {
    transform: translateX(-3%);
    opacity: 0.15;
  }
  60% {
    transform: translateX(8%);
  }
  70% {
    transform: translateX(-3%);
  }
  80% {
    transform: translateX(10%);
    opacity: 0.08;
  }
  90% {
    transform: translateX(20%);
  }
  100% {
    transform: translateX(30%);
  }
}

/* Riddle
 *
 * /sass/components/carousel.scss - question carousel styles
 *
 * coded by Anne
 * started at 10/11/2018
 */
.carousel {
  margin: 2em 0;
}

.carousel-container {
  position: relative;
}

.carousel-item {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex-direction: column;
}

.carousel-text {
  margin-bottom: 1.5em;
}

.carousel-text__title {
  font-size: 1.618em;
  font-weight: 600;
  color: #3A3A3A;
  margin-bottom: .6em;
}

.carousel-img {
  width: 100%;
}

.carousel-img img {
  width: 100%;
}

.carousel-buttons {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex-direction: row;
  width: 80%;
  margin: 1em auto;
  position: relative;
  bottom: 0;
}

.carousel-buttons__single {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  width: 23%;
  height: .3em;
  margin: 0 1%;
  justify-content: space-between;
  background: #ddd;
  text-indent: -9999999px;
  cursor: pointer;
}

.carousel-buttons__single:hover, .carousel-buttons__single:active {
  background: #68B3C3;
  transition: background-color .3s ease;
}

.carousel-buttons__single.active {
  background: #68B3C3;
  transition: background-color .3s ease;
}

@media screen and (min-width: 981px) {
  .carousel-item {
    flex-direction: row;
    justify-content: space-between;
  }
  .carousel-img {
    width: 45%;
  }
  .carousel-text {
    width: 50%;
  }
  .carousel-buttons {
    width: 40%;
  }
}

/* Riddle
 *
 * /sass/components/club.scss - club section styles
 *
 * coded by Anne
 * started at 10/11/2018
 */
.clubs-container {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex-direction: column;
}

.clubs-item {
  background: #fff;
  padding: 2em 1em;
  margin-bottom: 1.5em;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.card {
  width: 100%;
  margin-bottom: 2em;
}

.card .wrapper {
  background-color: white;
  background-size: contain;
  min-height: 300px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.2);
}

.card .wrapper:hover .data {
  transform: translateY(0);
}

.card .data {
  position: absolute;
  bottom: 0;
  width: 100%;
  transform: translateY(calc(100px + 1em));
  transition: transform 0.3s;
}

.card .data .content {
  padding: 1em;
  position: relative;
  z-index: 1;
  background-color: white;
  box-shadow: 0 5px 30px 10px rgba(0, 0, 0, 0.3);
}

.card .title {
  font-size: 1.618em;
  color: #68B3C3;
  font-weight: 600;
  text-align: center;
  margin-bottom: .4em;
}

.card .intro {
  text-align: center;
}

.card .text {
  height: 100px;
  margin: 0;
}

.card .text p strong {
  font-weight: bold;
  color: #362F27;
}

.card .text p {
  margin-bottom: .1em;
  font-size: .9em;
}

.wrapper.bruxelles {
  background: url("../assets/images/clubs/bruxelles.jpg") no-repeat;
  background-size: contain;
}

.wrapper.liege {
  background: url("../assets/images/clubs/liege.jpg") no-repeat;
  background-size: contain;
}

.wrapper.charleroi {
  background: url("../assets/images/clubs/charleroi.jpg") no-repeat;
  background-size: contain;
}

.wrapper.namur {
  background: url("../assets/images/clubs/namur.jpg") no-repeat;
  background-size: contain;
}

.wrapper.nivelles {
  background: url("../assets/images/clubs/nivelles.jpg") no-repeat;
  background-size: contain;
}

.wrapper.meerhout {
  background: url("../assets/images/clubs/banner.jpg") no-repeat;
  background-size: contain;
}

.wrapper.canada {
  background: url("../assets/images/clubs/banner.jpg") no-repeat;
  background-size: contain;
}

.wrapper.lure {
  background: url("../assets/images/clubs/lure.jpg") no-repeat;
  background-size: contain;
}

.wrapper.strasbourg {
  background: url("../assets/images/clubs/banner.jpg") no-repeat;
  background-size: contain;
}

.wrapper.metz {
  background: url("../assets/images/clubs/banner.jpg") no-repeat;
  background-size: contain;
}

@media screen and (min-width: 768px) {
  .clubs-container {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .card {
    width: 48%;
  }
}

@media screen and (min-width: 1024px) {
  .card {
    width: 31%;
  }
}

/* Riddle
 *
 * /sass/components/content.scss - section content styles
 *
 * coded by Anne
 * started at 10/11/2018
 */
.content {
  line-height: 1.5;
}

.content p {
  margin-bottom: .7em;
}

.content-title {
  font-size: 1.272em;
  font-weight: 600;
  margin-bottom: .6em;
}

.content-subtitle {
  font-size: 1.1em;
  font-weight: 600;
  margin-top: 1em;
}

.content-list {
  list-style-type: disc;
}

.content-list__item {
  margin-left: 3%;
  margin-bottom: .3em;
}

/* Riddle
 *
 * /sass/components/footer.scss - Footer styles
 *
 * coded by Anne
 * started at 10/11/2018
 */
.footer {
  background: #68B3C3;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.footer-content {
  padding: 2em 0;
  color: #362F27;
  font-size: .9em;
}

/* Riddle
 *
 * /sass/components/form.scss - Contact form
 *
 * coded by Anne
 * started at 28/01/2019
 */
.form {
  width: 50%;
  margin: 1em auto;
  max-width: 900px;
}

.form-group {
  width: 100%;
  margin-bottom: 1em;
}

.form-control {
  width: 100%;
  font-size: 1em;
  padding: .5em;
  border: 1px solid lightgrey;
  border-radius: 2px;
  transition: .3s ease;
}

.form-control:focus {
  outline: none;
  border: 1px solid #68B3C3;
}

.form button {
  border: 1px solid #68B3C3;
  background: #68B3C3;
  color: white;
  font-size: 1.2em;
  padding: .3em 1em;
  border-radius: 2px;
  transition: .3s ease;
  cursor: pointer;
}

.form button:hover {
  color: #68B3C3;
  background: white;
}

.form .message {
  margin-bottom: 1em;
}

.form .error {
  color: red;
}

.form .success {
  color: green;
}

.form .validation {
  margin-top: .3em;
}

.form .validation p {
  color: red;
  font-size: .9em;
}

@media screen and (min-width: 300px) and (max-width: 525px) {
  .form {
    width: 100%;
  }
}

@media screen and (min-width: 526px) and (max-width: 767px) {
  .form {
    width: 80%;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .form {
    width: 70%;
  }
}

/* Riddle
 *
 * /sass/components/navigation.scss - navigation styles
 *
 * coded by Anne
 * started at 10/11/2018
 */
.navigation {
  position: fixed;
  width: 100%;
  background: #54493c;
  padding: .5em 3%;
  top: -10em;
  z-index: 3;
  transition: top .3s ease;
}

.navigation-button {
  position: absolute;
  color: white;
  background: rgba(86, 170, 188, 0.65);
  display: block;
  text-decoration: none;
  padding: .5em 1em;
  top: 1em;
  right: 6.25%;
  z-index: 3;
  cursor: pointer;
}

.navigation-button:hover, .navigation-button:focus {
  background: rgba(122, 188, 202, 0.65);
  transition: background .3s ease;
}

.navigation-button__close {
  visibility: hidden;
}

.navigation-menu {
  margin: 1.5em 0;
  display: none;
  height: 100vh;
}

.navigation-menu__item {
  width: 59.37%;
  margin: 0 auto .6em;
  font-size: 1.272em;
  display: block;
  text-align: center;
  background: rgba(86, 170, 188, 0.65);
  padding: .7em 0;
}

.navigation-menu__item a {
  text-decoration: none;
  color: white;
}

.navigation-menu__item:hover, .navigation-menu__item:focus {
  background: rgba(122, 188, 202, 0.65);
  transition: .3s ease;
}

.navigation-logo {
  display: block;
  width: 40%;
}

.navigation-logo img {
  width: 100%;
}

.menu-lang {
  position: absolute;
  top: 1em;
  right: 1em;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex-direction: row;
}

.menu-lang__link {
  text-decoration: none;
  color: #68B3C3;
  text-transform: uppercase;
  margin: 0 5px;
}

.menu-lang__link.active {
  font-weight: bold;
}

@media screen and (min-width: 525px) {
  .navigation-logo {
    width: 30%;
  }
}

@media screen and (min-width: 700px) {
  .navigation-logo {
    width: 28%;
  }
  .navigation-menu__item {
    width: 35%;
    font-size: 1.618em;
  }
  .navigation-button {
    font-size: 1.3em;
  }
}

@media screen and (min-width: 800px) {
  .navigation-logo {
    width: 24%;
  }
}

@media screen and (min-width: 900px) {
  .navigation-logo {
    width: 22%;
  }
  .navigation-button {
    font-size: 1.4em;
  }
}

@media screen and (min-width: 1024px) {
  .navigation-logo {
    max-width: 12%;
  }
  .navigation-button {
    display: none;
  }
  .navigation-menu {
    height: auto;
    background: transparent;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 75%;
    align-items: center;
    position: absolute;
    top: 1.3em;
    right: 3%;
    margin: 0;
  }
  .navigation-menu__item {
    width: 15%;
    background: transparent;
    font-size: 1.1em;
    padding: .9em 0;
    position: relative;
    text-transform: uppercase;
    font-weight: bold;
  }
  .navigation-menu__item:hover, .navigation-menu__item:focus {
    background: transparent;
  }
  .navigation-menu__item:hover a, .navigation-menu__item:focus a {
    color: #00c1c1;
  }
  .navigation-menu__item a {
    color: #68B3C3;
    transition: color .3s ease;
  }
}

@media screen and (min-width: 1224px) {
  .navigation-menu {
    width: 60%;
    right: 10%;
  }
}

@media screen and (min-width: 1440px) {
  .navigation-menu {
    width: 70%;
    top: 2em;
  }
}

@media screen and (min-width: 1640px) {
  .navigation-menu {
    top: 3em;
  }
}

@media screen and (min-width: 1840px) {
  .navigation-menu {
    max-width: 65%;
    top: 3.5em;
  }
}

@media screen and (min-width: 2000px) {
  .navigation-menu__item {
    font-size: 1.3em;
  }
}

@media screen and (min-width: 2200px) {
  .navigation-menu {
    top: 4em;
  }
}

@media screen and (min-width: 2400px) {
  .navigation-menu {
    max-width: 60%;
    right: 15%;
    top: 4.5em;
  }
}

@media screen and (min-width: 2560px) {
  .navigation-menu {
    max-width: 55%;
    right: 20%;
    top: 5em;
  }
}

/* Riddle
 *
 * /sass/components/section.scss - section styles
 *
 * coded by Anne
 * started at 10/11/2018
 */
.section {
  width: 90%;
  margin: 5em auto;
}

.section-title {
  font-size: 2.058em;
  font-weight: 800;
  text-align: center;
  color: #3A3A3A;
  text-transform: uppercase;
  margin-bottom: 1.5em;
  position: relative;
}

.section-title:after {
  content: "";
  width: 20%;
  height: 1px;
  background: #3A3A3A;
  position: absolute;
  bottom: -.8em;
  left: 40%;
}

.section-content {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex-direction: column;
}

.section-content__img {
  margin-bottom: 1.5em;
  width: 100%;
}

.section-content__img img {
  width: 100%;
}

.section-img__figure {
  width: 100%;
}

.section-img__figure img {
  width: 100%;
}

.section-img__texte {
  font-size: 1.618em;
  color: white;
  width: 100%;
  text-align: center;
  text-shadow: 2px 2px 2px #362F27;
  padding-top: 3.5em;
}

.section-img__logos {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-height: 17em;
  background: rgba(255, 255, 255, 0.5);
}

.section-img__logos--link {
  text-decoration: none;
  margin: 0 5%;
}

.section-img__logos--link figure {
  max-width: 200px;
}

.section-img__logos--link figure img {
  width: 100%;
}

.section-img.first {
  background: url("../assets/images/combat.jpg");
  min-height: 17em;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.section-img.second {
  background: url("../assets/images/scenique.jpg");
  min-height: 17em;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.section-bg {
  background: #F8F8F8;
  padding: 5em 0;
}

@media screen and (min-width: 768px) {
  .section {
    width: 80%;
  }
}

@media screen and (min-width: 981px) {
  .section-content {
    flex-direction: row;
    justify-content: space-between;
  }
  .section-content__img {
    width: 45%;
  }
  .section-content__text {
    width: 50%;
  }
}

@media screen and (min-width: 2560px) {
  .section {
    max-width: 60%;
  }
}

/* Riddle
 *
 * /sass/components/navigation.scss - navigation styles
 *
 * coded by Anne
 * started at 10/11/2018
 */
.slider {
  position: relative;
  width: 100%;
  margin-bottom: 2em;
}

.slider-image {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.slider-image img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(-50%);
}

.slider-title {
  position: absolute;
  font-size: 1.618em;
  color: white;
  z-index: 2;
  width: 100%;
  top: 3em;
  left: 0;
  text-align: center;
  text-shadow: 3px 3px 3px #362F27;
}

.slider-subtitle {
  display: block;
  font-size: .7em;
  font-weight: 400;
  margin-top: .5em;
}

@media screen and (min-width: 768px) {
  .slider-title {
    font-size: 2.058em;
    top: 6em;
  }
}

@media screen and (min-width: 981px) {
  .slider-title {
    font-size: 2.618em;
    top: 7em;
  }
}

@media screen and (min-width: 1440px) {
  .slider-title {
    font-size: 4.236em;
  }
}

@media screen and (min-width: 2560px) {
  .slider-title {
    font-size: 6em;
  }
}

/* Riddle
 *
 * /sass/components/socials.scss - socials
 *
 * coded by Anne
 * started at 28/01/2019
 */
.socials-container {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 60%;
  margin: 0 auto;
}

.socials-single {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #282828;
}

.socials-single:hover .socials-single__icon, .socials-single:focus .socials-single__icon {
  color: #362F27;
}

.socials-single__icon {
  color: #68B3C3;
  transition: .3s ease;
  margin-bottom: .4em;
}

.socials-single__title {
  font-weight: bold;
  font-size: 1.2em;
}

@media screen and (min-width: 300px) and (max-width: 425px) {
  .socials-container {
    flex-direction: column;
  }
  .socials-single {
    margin-bottom: 2em;
  }
}

@media screen and (min-width: 426px) and (max-width: 680px) {
  .socials-container {
    width: 80%;
  }
}