.service-box .color-1 {
    background-color: #299476;
}
.service-box .color-3 {
    background-color: #2C5A8F;
}
.service-box .color-2 {
    background-color: #EFC94C;
}
.service-box .color-4 {
    background-color: #DF4949;
}
.service-box i {
    color: #FEFEFE;
    font-size: 40px;
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    margin-top: -30px;
    position: relative;
    display: inline-block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.2);
    -moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.2);
    -ms-box-shadow: 2px 2px 3px rgba(0,0,0,0.2);
    box-shadow: 2px 2px 3px rgba(0,0,0,0.2);
    border-radius: 50%;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.service-box {
    background-color: #F2F7F3;
    border: 1px solid #322f33;
    text-align: center;
    padding: 0px;
    padding-bottom: 20px;
   
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -webkit-transition: all .3s;
    transition: all .3s;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 3px 5px rgba(0,0,0,0.2);
    -ms-box-shadow: 0 3px 5px rgba(0,0,0,0.2);
    box-shadow: 0 3px 5px rgba(0,0,0,0.2);
    margin: 10px;
}
.nav-tabs-dropdown {
  display: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.nav-tabs-dropdown:before {
  content: "\e114"" Article Menu";
  font-family: 'Glyphicons Halflings';
  left: 0px;
  background-color: #000;
  padding: 8px;
  border: 1px solid transparent;
  margin-right: 10px;
}

@media screen and (min-width: 769px) {
  #nav-tabs-wrapper {
    display: block!important;
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
    .nav-tabs-dropdown {
        display: block;
    }
    #nav-tabs-wrapper {
        display: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        text-align: center;
           position: absolute;
    z-index: 2;
    background-color: #eee;
    width: 50%;
    border: solid 1px #bbb;
} 
    }
   .nav-tabs-horizontal {
        min-height: 20px;
        padding: 19px;
        margin-bottom: 20px;
        background-color: #f5f5f5;
        border: 1px solid #e3e3e3;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
   }
    .nav-tabs-horizontal  > li {
        float: none;
    }
    .nav-tabs-horizontal  > li + li {
        margin-left: 2px;
    }
    .nav-tabs-horizontal > li,
    .nav-tabs-horizontal > li > a {
        background: transparent;
        width: 100%;
    } 
    .nav-tabs-horizontal  > li > a {
        border-radius: 4px;
    }
    .nav-tabs-horizontal  > li.active > a,
    .nav-tabs-horizontal  > li.active > a:hover,
    .nav-tabs-horizontal  > li.active > a:focus {
        color: #ffffff;
        background-color: #428bca;
    }
}