#offering {

  border-right:solid 1px #000;
  border-left:solid 1px #000;
  border-color: #fff;
}

.navigation {
background-color: #584446;
padding-top: 15px;
padding-bottom: 15px;

}

a {
  color: #fff;
  font-weight: lighter;
  font-family: 'Fira Sans Thin', sans-serif;
  font-stretch: expanded;
  font-size: 10px;
  letter-spacing: 5px;

}

a:hover {
  font-weight: bold;
  color: #fff;
}

a:active {
  font-weight: bold;
  color: #fff;
}

#header-image {
  width: 100%;
  position: relative;
  z-index: 0;
}

.icons {
  text-align: center;
  /* display: inline-block; */
  position: relative;
  z-index: 1;
  bottom: 60px;
  
}

#icons{
  width: 100%;
}

.icons-offering {
  text-align: center;
  
}

#icon {
width: 165px;
height: auto;
padding: 10px;
margin-left: 10px;
}

.cleaning {
  float:left;
}

.grading {
  float:left;
}

.blanching {
  float:left;
}

.roasting {
  float:left;
}

.trading {
  float:left;
}

label {
font-family: 'Fira Sans Thin', sans-serif;
  color: #584446;
  font-stretch: expanded;
  font-weight: bold;
  text-align: center;
  padding-left: 5%;
}

.counter {
 background-color: #584446;
 text-align: center;
 
}

h1 {
  color: #fff;
  font-family: 'Fira Sans Thin', sans-serif;
  text-align: center;
  font-weight: bold;
}

#counter-p{
  color: #fff;
  text-align: center;
  font-weight: lighter;
  font-family: 'Fira Sans Thin', sans-serif;
  font-stretch: expanded;

  font-size: 15px;

}

h2 {
color: #AB2328;
font-family: 'Fira Sans Thin', sans-serif;
font-size: 25px;
font-stretch: expanded;
text-align: left;
font-weight: bold;
}

#factory_1{
  width: auto;
  height: 350px;
  

}

#factory_2{
  width: auto;
  height: 250px;

}

#factory_3{
  width: auto;
  height: 200px;

}

#factory_4{
  width: auto;
  height: 200px;
  


}



p {
  color: #bcbab8;
  font-weight: lighter;
  font-size: 16px;

}

hr {
  background-color: #AB2328;
  height: 30px;
  margin: 0;
}

.different {
  
  background-color: #584446;
  
}

h3 {
  color: #D6A461;
  font-family: 'Fira Sans Thin', sans-serif;
  font-size: 27px;
  font-stretch: expanded;
  text-align: left;
  font-weight: bold;
}

.advantages {
  text-align: center;
  

}

#advantages{
  font-size: 20px;
  font-weight: normal;
}

#advicons {
  width: 50px;
  padding-top: 5%;
  padding-bottom: 5%;

}

iframe {
  width: 100%;
  height: 300px;
  margin:0;
}

.directions{
  background-color: #5d5d5d;
  text-align: left;
}

#dir{
  margin: 0;
  font-size: 12px;
  color: #fff;
  font-family: 'Fira Sans Thin', sans-serif;
  font-weight: lighter;
  letter-spacing: normal;
  text-align: center;
}

footer {
  background-color: #414141;
  padding-top: 20px;
  padding-bottom: 20px;
}

.container {
  padding: 2% 8%;
}

.container-fluid{
  padding: 0 0 ;
  
}

.logo {
  background-color: #f6f6f6;
  vertical-align: middle;
  text-align: center;
  height: 10%;
}

.logo_img {
  height: 220px;
  width: auto;
  
}

.sendbtn {
  background-color: #AB2328;
  color: #fff;
}

form {
  text-align: left;
}

.offering-intro{

  padding-bottom: 30px;
  text-align: left;
  padding-left: 150px;
  padding-right: 130px;
  padding-top: 20px;
}

.offering-cleaning {
  background-color: #414141;
  width: 100%;
}

.form-control:focus {
  border-color: #AB2328;
  background-color: #e5e5e5;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px #AB2328;
}

.form-control {
  background-color: #e5e5e5;
  border-color: #e5e5e5;
}

#cleaning_1 {
  height: 220px;
}

#offering_1{
  color: #fff;
}

#offering_2 {
  color: #AB2328;
}

#grading_1 {
  height: 220px;
}

#blanching_1 {
  height: 220px;
}

.roasting_trading {
  
  background-color: #584446;
}

#offering_3 {
  color: #D6A461;
}

#roasting_1{
  height:230px;
  width: auto;
}

#trading_1{
  height:230px;
  width: auto;
}




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

  #trading_1{
    width: 100%;
  }
  #roasting_1{
    width: 100%;
  }

  .navigation {
    background-color: #584446;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left:0;
    }

    a {
      color: #fff;
      font-weight: lighter;
      font-family: 'Fira Sans Thin', sans-serif;
      font-stretch: expanded;
      font-size: 10px;
      letter-spacing: 2px;
    
    }

    .icons {
      bottom: 20px;
    }

    .logo {
      background-color: #f6f6f6;
      vertical-align: middle;
      text-align: center;
      height: 10%;
    }
    
    .logo_img {
      height: 120px;
      width: auto;
      text-align: center;
    }

    #factory_2{
      width: 100%;
    }

    #cleaning_1 {
      width:  100%;   
    }

    #blanching_1 {
      width:  100%;   
    }

    
    
}