main
{
  overflow-x: hidden;
}

.bg-devis {
  background-color: #CF9B58;
}

.u-btn-devis {
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
}

.g-color-primary {
  color: rgb(156, 128, 115) !important;
}

.g-brd-primary {
  border-color: rgb(156, 128, 115) !important;
}

.g-bg-primary {
  background-color: rgb(156, 128, 115) !important;
}

.u-btn-primary {
  background-color: rgb(156, 128, 115) !important;
}

/* FONT RULES */
h1,
h2,
h3,
h4,
h5 {
  font-family: "Oxygen", "Open Sans", Helvetica, Arial, sans-serif;
}

.h1,
.h2,
.h3,
.h4,
.h5 {
  font-family: "Oxygen", "Open Sans", Helvetica, Arial, sans-serif;
}

p {
  font-family: "Oxygen", "Open Sans", Helvetica, Arial, sans-serif;
  color: #000;
}

.h1,
h1 {
  font-size: 1rem;
}

/* HEADER RULES */
#main-navbar li a {
  color: #000;
}

#main-navbar .nav-item {
  padding: 0 10px;
}

/* CUSTOM CONTAINER */
.custom-container {
  margin: 0% 2%;
}

.text-container {
  padding-left: 8%;
}

.text-container-right {
  padding-left: 8%;
}

.text-container-gallery {
  padding-left: 0%;
}

/* HOME PAGE */
#home-hero {
  background-image: url("../img/homepage/hero-mobile.jpg");
  height: 56vh;

  background-size: contain;
}

#home-hero h1 {
  margin-top: 20px;
}

#home-hero #text-content
{
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 10px;

  width: fit-content;
  
  text-align: center;

  padding: 20px 60px;

  position: absolute;
  left: 10%;
  top: 20%;
  transform: translate(-10%, -20%);
}

#services-hero {
  padding: 1% 0;
  height: 80vh;
}

#services-hero h1 {
  font-size: 2rem;
}

#services-hero .service-panel {
  background-color: rgba(156, 128, 115, 0.7);
  border-radius: 10px;

  width: fit-content;
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translate(-50%, -20%);

  text-align: center;

  padding: 20px 60px;
}

#services-hero .service-scd-panel {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 10px;

  width: fit-content;
  position: absolute;
  left: 50%;
  top: 90%;
  transform: translate(-50%, -90%);

  text-align: center;

  padding: 20px 60px;

  display: none;
}


#hero-logo {
  width: 20%;
}

#hero-text {
  font-size: 1.5rem;
}

/* SERVICES PAGES */
.text-devis {
  font-size: 1.5rem;
  text-align: left;
}

.portfolio-thumbnail {
  padding: 200px 0;
}

/* CONTACT FORM LOADER */
#loader {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.75) url("../img/preloaders/preloader-black.svg")
    no-repeat center center;
  z-index: 10000;
}

/* ----------- Non-Retina Screens ----------- */
@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) {
  #main-navbar li a {
    font-size: 0.87rem;
  }

  #main-navbar .nav-item {
    padding: 0 6px;
  }
}

@media screen and (max-width: 900px) {

  .portfolio-thumbnail {
    padding: 20px 0;
  }

  .text-devis {
    font-size: 1.2rem;
    text-align: left;
  }

  a,
  .btn {
    font-size: 0.9rem;
  }
}


/* Realisations Buttons */
.real-button-container .btn
{
  width: 90%;
  text-align: left;
}

/*************** 
    MEDIA QUERIES
****************/

/* Above : phone landscape & iPad portrait */
@media all and (min-width: 480px) {

}

/* Laptop and + iPads */
@media all and (min-width: 700px) {
  h1, .h1 {
    font-size: 2rem;
  }

  #home-hero 
  {
    background-image: url("../img/homepage/hero.jpg");
  }

  .text-container-gallery {
    padding-left: 8%;
  }

  .real-button-container .btn
  {
    width: auto;
    text-align: left;
  }
}

/* Mobile paysage */
@media all and (min-width: 900px) and (orientation: landscape) {
  #home-hero {
    display: block;
    padding: 1% 0;
    height: 50vh;

    background-size: contain;
  }



}

/* Laptop */
@media all and (min-width: 1181px) {
  #home-hero {
    padding: 1% 0;
    height: 80vh;

    background-size: cover;
  }
  
  #services-hero .service-scd-panel {
    display: block;
  }
}

/* Bigger screens */
@media only screen and (min-width: 1824px) {

}