html {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  color: #1f1f1f;
  font-family: "Roboto", sans-serif;
  height: 100%;
  font-size: 15px;
}

h1 {
  font-size: 4rem;
  font-weight: 800;
}

.grid-item {
  float: left;
  width: 300px;
  height: 300px;
  background-color: #000;
  box-shadow: inset 1px 1px rgba(255, 255, 255, 0.5);
  color: #fff;
  padding: 20px;
  transition: all 400ms cubic-bezier(0.42, 0, 0.39, 1);
  cursor: pointer;
}
.grid-item:hover {
  box-shadow: inset 0 -600px 0 0 rgba(255, 255, 255, 0);
  z-index: 10000;
}

.title {
  display: flex;
  flex-direction: row;
  text-align: left;
}
.title img {
  width: 55px;
  height: 80px;
  margin-right: 15px;
}

h2 {
  font-size: 20px;
  margin: 0;
}

.grid {
  background-color: #034697;
  margin: 0 auto;
}
@media screen and (min-width: 1200px) {
  .grid {
    width: 1200px;
  }
}
@media screen and (max-width: 1200px) {
  .grid {
    width: 900px;
  }
}
@media screen and (max-width: 900px) {
  .grid {
    width: 600px;
  }
}
@media screen and (max-width: 600px) {
  .grid {
    width: 300px;
  }
}
@media screen and (max-width: 300px) {
  .grid {
    width: 300px;
  }
}

.grid-item--width2 {
  width: 600px;
}
@media screen and (max-width: 600px) {
  .grid-item--width2 {
    width: 300px;
    height: auto;
  }
}

.grid-item--height2 {
  height: 450px;
}

.grid-item--height1 {
  height: 150px;
}

.grid-responsive .content {
  display: flex;
}
@media screen and (max-width: 600px) {
  .grid-responsive .content {
    flex-direction: column;
  }
}

#bloc1,
#bloc5,
#bloc9,
#bloc12 {
  background-color: #005DCB;
}

#bloc2,
#bloc7 {
  background-color: #343434;
}

#bloc6,
#bloc11 {
  background-color: #A7A5A5;
}

/*# sourceMappingURL=custom.css.map */