html {
  font-size: 1rem;
}

body{
  font-family: 'Montserrat', sans-serif;
}

header{
  margin-top: 2rem;
}
footer{
  margin-bottom:1rem;
}

.hero{    
  margin-top: 5rem;
}

.hero h1{
  font-size: 3.5rem;
  font-weight:600;
  padding:4.5rem;
}

.hero--header{
  background-color: black;
  color: white;
  position: relative;
  z-index:0;
}

main, .contact, footer{
  margin-top:4rem;
}

main .display-4{
  font-weight:100;
  line-break: unset;
}

main .display-5{
  font-weight:900;
}


.owl-theme img{
  filter: grayscale(80%);
}
.owl-theme img:hover{    
  cursor: pointer;
  filter: grayscale(0%);
}

.active:first-child{
  cursor: pointer;
  filter: grayscale(0%);
}
.icons img{
  margin-right:10px;
}

.icon{
  width:30px;
}

.contact{
  padding:2rem 0 0 0;
}

footer ul{
  margin:0;
  padding:0;
}

footer li{
  color:grey;
  list-style: none;
  padding:0;
  font-size: 0.5rem;   
  float:left;
  margin:0;
  text-transform: uppercase;
}

footer li:after{
  content:'|';
  padding:0 10px;
  color:grey;
}
footer li:last-child:after{
  content:'';
}
footer li a{
  color:grey;
}

footer .collapse{
  font-size:0.8rem;
  margin-top:10px;
}


/* sm */
@media (max-width: 576px) { 
  html {
      font-size: 1.1rem;
  }
  .hero h1{
      font-size: 1.6rem;
      font-weight:600;
      padding:1.9rem;
  }
}

@media(max-width:768px){
  .owl-theme img{
      filter: grayscale(0%);
  }
  .hero h1{
      font-size: 1.6rem;
      font-weight:600;
      padding:1.9rem;
  }
}

/* md */
@media (min-width: 768px) { 
  .owl-stage{
      margin-top:4rem;
  }
  .hero h1{
     font-size: 2.5rem;
     font-weight:600;
     padding:3.8rem;
 }
 html {
  font-size: 1.2rem;
}
}
@media (min-width: 992px) { 
  html {
      font-size: 1.3rem;
    }
  .contact figure{
      float: right;
  }
}

.hero .box{
  background:rgb(212, 212, 212);
  width: 100%;
  height: 50%;
  position: relative;
  z-index: -1;
  margin-left:-50px;
  margin-top:20%;    
}

.hero .image img{
  position: absolute; 
  z-index:12;
  margin-left:50px;
  margin-top:-15%;
}