main.scss

@charset "utf-8";
@import "./bulma-0.8.0/bulma";

// Set your brand colors
$color-1: #fe7e00ff;  /*rgba(255, 127, 0, 1)  */
$color-2: #ffd400; /* rgba(255, 212, 0, 1) */
$color-3: #ededed; /* rgba(237, 237, 237, 1) */
$color-4: #383838; /*  rgba(56, 56, 56, 1) */

.orange {
  background-color: $color-1;  /*rgba(255, 127, 0, 1)  */
}

.yellow {
  background-color: $color-2; /* rgba(255, 212, 0, 1) */
}

.light-grey {
  background-color: $color-3; /* rgba(237, 237, 237, 1) */
}

.dark-grey {
  background-color: $color-4; /*  rgba(56, 56, 56, 1) */
}

.text-light-grey {
  color: #ededed;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1rem;
}

h1, h2 {
	padding-bottom: 1rem;
	padding-top: 1rem;
}

.has-display-none {
    display: none;
    visibility: hidden;
}

.right {
  position: relative;
  right: -10rem;
}

.hero h1 {
  font-size: 2rem;
  color: white;
}

.hero h2 {
  font-size: 1.5rem;
  color: white;
}

.is-color-1{
      background-color: $color-1!important;
}

.is-color-2{
    background-color: $color-2!important;
}

.is-color-3{
    background-color: $color-3!important;
}

.is-color-4{
    background-color: $color-4!important;
}

.is-equal-height {
  height: 100%;
}


.home-menu img {
  width: 230px;
  height: 200px;
}

.hero-nav {
  img {
    margin-top: -20px;
    width: 500px;
    height: auto;
  }
  a {
    color: $color-4;
  }
}

.btn-date {
  color: #fff;
  position: absolute;
  z-index: 1;
  left: 75%;
  top: 10%;
  width: 60px;
  height: 60px;
  line-height: 40px;
  padding: 0;
  background-color: $color-1;
  border-radius: 50%;
  transition: .3s;
  vertical-align: middle;
}

.btn-date .jour {
  position: relative;
  top: -15%;
  text-align: center;
  font-size: 1.2em;
}

.btn-date .mois {
  position: relative;
  top: -50%;
  text-align: center;
}

.btn-date .year {
  position: relative;
  top: -90%;
  text-align: center;
  font-size: 0.8rem;
}

.horaire {
  position: relative;
  float: right;
  right: -1rem;
  top: -3rem;
  font-size: 1em;
}

.kind {
  position: relative;
  top: -3rem;
  left: -1rem;
  font-weight: 500;
  text-transform: uppercase;
  float: left;
}

.kind-title {
  margin-left: 15px;
}

.card-image {
//  width: 240px;
 // height: 160px;
}
.picto-home {
  margin-top: -2rem;
  margin-bottom: 2rem;
}

.is-narrow {
  padding-top: 0rem;
  padding-bottom: 3rem;
}

@media screen and (min-width: 768px) {
  .is-narrow {
    padding-left: 8rem;
    padding-right: 8rem;
  }
}

@media screen and (max-width: 768px) {
  .is-narrow {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.card-agenda-title {
  margin-top: 10px;
  margin-bottom: 10px;
  position: relative;
  font-size: 1.2em;
}

/* FOOTER */

.footer-copyright {
  background-color: #383838;
  font-size: 1.7rem;
  color: $color-3;
}

a {
  color: $color-4;
}

ul.menu_horizontal {
  li {
    display : inline;
    padding : 0 0.5em; /* Pour espacer les boutons entre eux */
  }
  i {
    font-size: 2em;
  }
  list-style-type : none; /* Car sinon les puces se placent n'importe où */
}

 /* external css: flickity.css */

 .carousel-cell {
  width: 28%;
  margin-right: 1.5rem;
}

.fullscreen {
  width: 100%;
  margin-right: 1.5rem;
}

@media screen and ( max-width: 768px ) {
  /* half-width cells for larger devices */
  .carousel-cell { width: 90%; }
}

.main-carousel {
 margin-bottom: 3rem;
}

.has-image-centered {
  margin-left: auto;
  margin-right: auto;
}