.hero-content {
  padding:40px;
  background-attachment:fixed;
  margin-top: 0;
  position: relative;
  .hero-container {
	  padding: 0;
  }
  .h-content{
    h1.title{
      margin:0;
    }
    .excerpt {
      margin: 20px 0;
      font-size: 17.5px;
    }
    .button {
      display:inline-block;
      .more-button{
        color:@onaccent;
        padding:13px 20px;
        font-size:16px;
        background:@accent;
        border:2px solid @accent;
        position:relative;
        z-index:999;
        display: inline-block;
        &:hover {
          padding:13px 20px;
          font-size:16px;
          color:@accent;
          border:2px solid @accent;
          background:@onaccent;
        }
      }
    }
    .razep-bar {
      h3 {
        display: inline-block;
        font-size: 16px;
      }
      h3.title {
        font-weight: 600;
      }
      h3.percentage {
        float: right;
      }
      .progress {
        margin-bottom: 0;
        .progress-bar {
          background: @accent;
        }
      }
    }
  }
  .f-image{
	  
  	img {
	  	outline: solid 7px fade(white, 20%);
	  	border: solid 2px fade(@accent,20%);
	  	@media screen and (max-width: 767px) {
			  margin-top: 20px;
		  }
  	}
  }
}
#hero1 {
  margin-bottom: 20px;
}
@media screen and (max-width:767px){
  .h-content{
    margin-bottom:30px;
    .more-button{

      &:hover {
        padding:13px 20px;
        font-size:16px;
        color:@onaccent;
        background:@content;
      }
    }

  }
}