#fs-container {
 height:100vh;
 background-repeat:no-repeat;
 -webkit-background-size:cover;
 -moz-background-size:cover;
 -o-background-size:cover;
 background-size:cover;
 display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-transition:all .5s ease;
 -o-transition:all .5s ease;
 -moz-transition:all .5s ease;
 transition:all .5s ease
}

@media (max-width:991px) {
 #fs-container {
  height:auto !important;
  display:block
 }
}
.title-sub {
    font-size: 12px;
    color: #999;
    text-transform: uppercase;
    font-weight: 400;letter-spacing: .3em;
}

.media-project-hover {
 width:-webkit-calc(100%);
 width:-moz-calc(100%);
 width:calc(100%);
 height:100%;
 display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-box-align:center;
 -webkit-align-items:center;
 -moz-box-align:center;
 -ms-flex-align:center;
 align-items:center;
 -webkit-box-pack:center;
 -webkit-justify-content:center;
 -moz-box-pack:center;
 -ms-flex-pack:center;
 justify-content:center;
 border-right:1px solid rgba(242,242,242,.3);
 position:relative;
 -webkit-transition:background .5s ease-in-out;
 -o-transition:background .5s ease-in-out;
 -moz-transition:background .5s ease-in-out;
 transition:background .5s ease-in-out
}
.media-project-hover .bg-overlay {
 -webkit-transition:all .3s ease;
 -o-transition:all .3s ease;
 -moz-transition:all .3s ease;
 transition:all .3s ease;
 -webkit-transform:scaleX(0);
 -moz-transform:scaleX(0);
 -ms-transform:scaleX(0);
 -o-transform:scaleX(0);
 transform:scaleX(0)
}
.media-project-hover:hover .bg-overlay {
 -webkit-transform:scaleX(1);
 -moz-transform:scaleX(1);
 -ms-transform:scaleX(1);
 -o-transform:scaleX(1);
 transform:scaleX(1)
}
.media-project-hover:hover .media__number {
 bottom:0
}
.media-project-hover .media__body {
 text-align:center;
 padding:0 50px;
 position:relative
}
.media-project-hover .media__sub-title {
 color:#fff;
 margin-bottom:15px
}
.media-project-hover .media__title {
 margin-bottom:60px
}
.media-project-hover .media__title a {
 font-size: 1.35rem;
 font-weight: bold;
 color:#fff;
 line-height:-webkit-calc(48/30);
 line-height:-moz-calc(48/30);
 line-height:calc(48/30);
 display:block;
 -webkit-transition:all .5s ease;
 -o-transition:all .5s ease;
 -moz-transition:all .5s ease;
 transition:all .5s ease
}
.media-project-hover .media__title a:hover {
 text-decoration:underline;
 -webkit-transition:all .5s ease;
 -o-transition:all .5s ease;
 -moz-transition:all .5s ease;
 transition:all .5s ease
}
.media-project-hover .media__number,.media-service .media__img {
 -webkit-transition:all .3s ease;
 -o-transition:all .3s ease;
 -moz-transition:all .3s ease
}
.media-project-hover .media__number {
 position:absolute;
 font-size:100px;
 color:#fff;
 font-weight:100;
 line-height:1;
 transition:all .3s ease;
 bottom:-50px;
 left:50%;
 -webkit-transform:translateX(-50%);
 -moz-transform:translateX(-50%);
 -ms-transform:translateX(-50%);
 -o-transform:translateX(-50%);
 transform:translateX(-50%)
}
@media (max-width:1199px) {
 .media-project-hover .media__body {
  padding:0 20px
 }
 .media-project-hover .media__title a {
  font-size:24px;
  line-height:1.25
 }
}
@media (max-width:991px) {
 .media-project-hover {
  width:100%;
  height:700px;
  border-right:none;
  border-bottom:1px solid rgba(242,242,242,.3)
 }
 .media-project-hover .media__number {
  bottom:0
 }
}
.bg-overlay,.overlay {
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0
}
.bg-overlay {
 background:rgba(0,0,0,.6);
 z-index:0
}

.butns {
    padding: 5px 20px;
    background: #fff;
    font-size: 13px;
    border: 1px solid transparent;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    position: relative;
    z-index: 3;
    margin-left: 10px;
    margin-right: 10px;
    -webkit-box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.1);
    box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.1);
    -webkit-transition: all .4s;
    transition: all .4s;
    border-radius: 30px;
    cursor: pointer;
    outline: none !important;
    overflow: hidden;
}
.butns-bg {
    background: #333;
    border-color: #333;
    color: #fff;

}

.butns::before, .butns::after {
    content: '';
    width: 0;
    height: 100%;
    background: #eee;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition: width 0.4s;
    transition: width 0.4s;
    z-index: 1;
}

.butns-bg:hover.butns::before, .butns-bg:hover.butns::after{
    width: 100%;
    height: 100%;
}

.butns {
    cursor: pointer;
}
.butns span {
    position: relative;
    z-index: 2;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}