/** LANDING SECTION **/
section {
  padding: 80px 20px; }

#landing {
  height: 100vh;
  background: url(../../img/header.svg); }
  #landing h1 {
    color: white;
    font-weight: bold;
    font-size: 100px;
    text-align: center; }
  #landing button {
    width: 300px;
    padding: 20px 10px;
    border: none;
    color: white;
    background-color: #D90000;
    transition: background-color ease 0.2s; }
    #landing button:hover {
      background-color: #a60000; }
  @media (max-width: 900px) {
    #landing h1 {
      font-size: 5vw;
      padding-bottom: 40px; } }
  @media (max-width: 600px) {
    #landing {
      font-size: 16px; } }

#working {
  background-color: #F4F4F4; }
  #working #title span {
    font-size: 25px; }
    #working #title span b {
      color: #D90000;
      font-weight: bold; }
  #working #process {
    margin-top: 100px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    text-align: center; }
    #working #process div.step {
      width: 50%;
      min-height: 350px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 40px 10px;
      border-color: #D90000;
      border-style: solid; }
      #working #process div.step span:first-of-type {
        font-size: 23px;
        font-weight: 500; }
      #working #process div.step span:nth-of-type(2) {
        color: #5A5A5A;
        font-weight: 400;
        font-size: 14px;
        text-transform: uppercase; }
      #working #process div.step .icon {
        width: 128px;
        height: 128px; }
      #working #process div.step:nth-child(1) {
        border-width: 0px 2px 2px 0px; }
      #working #process div.step:nth-child(2) {
        border-width: 0px 0px 2px 2px; }
      #working #process div.step:nth-child(3) {
        border-width: 2px 2px 0px 0px; }
      #working #process div.step:nth-child(4) {
        border-width: 2px 0px 0px 2px; }
    @media (max-width: 600px) {
      #working #process {
        margin-top: 10px;
        flex-wrap: nowrap;
        flex-direction: column; }
        #working #process div.step {
          border: 0;
          padding: 20px 10px; }
          #working #process div.step:not(:last-child) {
            border-bottom: 2px solid #D90000; } }

.transition-banner {
  padding: 50px 20px;
  text-transform: uppercase;
  letter-spacing: 2px; }
  .transition-banner h3 {
    font-weight: 200; }

#why {
  background: url(../../img/hand-printed.svg);
  position: relative;
  height: 100%; }
  #why > div {
    z-index: 1;
    max-width: 600px;
    width: 100%;
    text-align: justify; }
  #why .overlay {
    z-index: 0;
    background-color: rgba(0, 0, 0, 0.577);
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 100%; }

#clients-transition-banner {
  background-color: #F4F4F4;
  color: #404040; }

#products-transition-banner, #contact-transition-banner, #why-transition-banner {
  background-color: #404040;
  color: white; }

section#contact {
  padding: 0px 0px;
  flex-direction: row; }
  section#contact #form-container {
    padding: 0px 20px 20px 20px;
    width: 45%;
    background-color: #404040; }
    section#contact #form-container label, section#contact #form-container input {
      color: white; }
    section#contact #form-container label {
      margin: 20px 0px 10px 10px;
      font-weight: 300;
      letter-spacing: 1px;
      text-transform: uppercase; }
    section#contact #form-container input {
      border-radius: 0;
      color: black; }
  section#contact #map-container {
    width: 55%; }
    section#contact #map-container #map {
      width: 100%;
      height: 100%; }
  @media (max-width: 900px) {
    section#contact {
      flex-direction: column; }
      section#contact #map-container, section#contact #form-container {
        width: 100%; }
      section#contact #map-container {
        height: 400px; } }

section#clients {
  display: flex;
  justify-content: center;
  align-items: center; }
  section#clients .carousel {
    max-width: 800px;
    width: 100%; }
    section#clients .carousel button span {
      color: #404040; }
    section#clients .carousel #carousel-inner .carousel-caption {
      color: #404040 !important; }
    section#clients .carousel #carousel-inner h5 {
      text-transform: uppercase;
      font-weight: 400;
      font-size: 20px;
      letter-spacing: 3px; }
    section#clients .carousel img {
      height: 300px; }
      @media (max-width: 600px) {
        section#clients .carousel img {
          height: 200px; } }

section#realisations #portfolio {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; }
  section#realisations #portfolio .folio {
    position: relative;
    margin: 20px 20px; }
    section#realisations #portfolio .folio:hover .image {
      opacity: 0.3; }
    section#realisations #portfolio .folio:hover .middle {
      opacity: 1; }
    section#realisations #portfolio .folio .text {
      color: black;
      font-size: 16px;
      font-weight: 400;
      text-transform: uppercase;
      padding: 16px 32px; }
    section#realisations #portfolio .folio .image {
      opacity: 1;
      display: block;
      width: auto;
      height: 300px;
      transition: .5s ease;
      backface-visibility: hidden; }
      @media (max-width: 600px) {
        section#realisations #portfolio .folio .image {
          height: 200px; } }
    section#realisations #portfolio .folio .middle {
      transition: .5s ease;
      opacity: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      text-align: center; }

section#realisations button {
  width: 300px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400; }

#liveAlertPlaceholder {
  position: fixed;
  padding: 0px 20px;
  bottom: 20px;
  width: 100%; }
  #liveAlertPlaceholder div {
    transition: all ease 0.3s; }