body {
    color: #848484;
    font-family: "Open Sans",sans-serif;
    font-size: 16px;
    font-weight: 300;
    background-color: #f9f9f9;
}

.mainmenu .navbar-default {
    background-color: #ffffff;
    border-radius: 0;
    color: #333333;
    padding: 0;
    padding:10px 0px;
    border:0px;
}
.mainmenu .navbar{
    margin-bottom:0px;
}

.mainmenu .navbar-default .navbar-brand{
    color: #08c2e8;
    font-size: 22px;
    font-weight: bold;
}

.hero-unit{
    background-color: #f9f9f9;
    padding:50px 0px;
}

.hero-unit .icon {
    background-color: #f4f4f4;
    border-radius: 115px;
    color: #08c2e8;;
    font-size: 40px;
    height: 115px;
    line-height: 115px;
    margin: 0 auto 35px;
    text-align: center;
    transition: all 0.3s ease-in-out 0s;
    width: 115px;
}

 .hero-unit h3 span {
    color: #08c2e8;
 }

@-webkit-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }

 .hero-unit .fade-in {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}

 .hero-unit .fade-in.one {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
animation-delay: 0.3s;
}

 .hero-unit .fade-in.two {
-webkit-animation-delay: 0.6s;
-moz-animation-delay:0.6s;
animation-delay: 0.6s;
}

 .hero-unit .fade-in.three {
-webkit-animation-delay: 0.9s;
-moz-animation-delay: 0.9s;
animation-delay: 0.9s;
}

.anim-left, .anim-right, .anim-down { visibility: hidden; }
.fadeInLeft, .fadeInRight, .fadeInDown { visibility: visible; }

.navbar-fshare {
    border-radius: 0;
}


/*PROGRESS BAR*/
.debug {
    background-color: #FFFFFF;
    border: 1px solid #898989;
    width: 700px;
    height: 100px;
    overflow: auto;
}
.bar1 {
    background-image: url("/templates/images/progress_bar_white.gif");
    border: 1px solid #505050;
    height: 20px;
    position: relative;
    text-align: left;
}
.bar2 {
    background-image: url("/templates/images/progress_bar_blue.gif");
    position: relative;
    text-align: left;
    height: 20px;
    width: 0%;
}

.home-content{
    background-color: #fff
}

.file-browse .nav-tabs > li > a {
    color: #08c2e8;
}

.file-browse .form-control[disabled]{
    background-color: #fff;
}

.file-browse-input {
    position: relative;
    overflow: hidden;
}
.file-browse-input input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}
.file-browse-input-title {
    margin-left:2px;
}

.btn-blue{
    background-color: #08c2e8;
    border-color: #08c2e8;
    color: #fff;
}

.advt{
    margin:20px 0px;
}

.up-down-limit .fa{
    border-radius: 45px;
    color: #08c2e8;
    font-size: 15px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    transition: all 0.3s ease-in-out 0s;
    width: 30px;
    border:1px solid #08c2e8;
}

.regsiter label{
    font-weight: normal
}

footer {
    margin-top: 2em;
    background-color: #fff;
    padding:10px 0px;
    font-size: 14px
}

.footer h5 {
    color: #7dd1f3;
    font-weight: bold;
    text-transform: uppercase;
}

.footer ul li a {
    color: #aeaeae;
    text-decoration: none;
}