body, html {
    height: 100%;
    background-color: #000;
    color:#FFF;
    padding-top:28px;
}

.modal{
    background-color: rgba(0,0,0,0.9);
}

.modal-content{
    background-color: rgba(46,46,46,0.9);
}

.btn-primary{
    background-color: rgba(15,15,15,0.9);
    border-color: rgba(15,15,15,0.9);
}

.btn-primary:hover{
    background-color: rgba(90,90,90,0.9);
    border-color: rgba(0,0,0,1);
}

.parallax { 
    /* Set a specific height */
    height: 100%; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.parallax1 {
    /* The image used */
    background-image: url("/images/hero/index/2017-05-01-hero-lg.jpg");
}

.parallax2 {
    /* The image used */
    background-image: url("/images/hero/index/2017-05-01-hero2.jpg");
}

.ep-top-20{
    padding-top: 20px;
}

.ep-left-20 {
    padding-left:20px;
}

.ep-right-20 {
    padding-right:20px;
}

.ep-top-100{
    padding-top:100px;
}

.ep-40{
    padding:40px;
}

.ep-20{
    padding:20px;
}

.ep-10{
    padding:10px;
}

.btn-tasks {
    width:38px !important;
    height:38px !important;
}

.ep-top-40{
    padding-top:40px;
}

.ep-left-20 {
    padding-left:20px;
}
/* The actual popup */
.popup {
    visibility: hidden;
    width: 100%;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
}

/* Toggle this class - hide and show the popup */
.show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

.hide{
    visibility: hidden;
    -webkit-animation: fadeOut 5s;
    animation: fadeOut 5s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

@-webkit-keyframes fadeOut{
    from{opacity: 1;}
    to {opacity: 0;}
}

@keyframes fadeOut{
    from {opacity: 1;}
    to {opacity: 0;}
}

.date-picker{
    color:#000;
}

.bg-white{
    background-color:#fff;
}

.text-black{
    color:#000;
}

.nav-tabs .nav-link{
    border: 1px solid #000;
}

.nav-tabs .nav-link.active{
    background-color:#999;
    border:none;
}

.nav-tabs .nav-item{
    margin-bottom: -4px;
    background-color:#000;
}

.note {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* The actual popup */
.note .notetext {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
}

/* Popup arrow */
.note .notetext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.note .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

@media (max-width: 991px) {
        .nav-item {
            text-align:center;
            display: inline-block;
            float: none;
            font-size: 25px;
            padding:5px;
        }
    }