label.feature-header {
    font-size:30px;
    font-weight:bold;
}
.right {
    text-align:center;
    padding:50px;
}
.imageright {
    text-align:right;
}
.left {
    text-align:left;
    padding:50px;
}


.feature-nav {
    -webkit-user-select: none;
    -moz-user-select: moz-none;
    -ms-user-select: none;
    user-select: none;
    overflow:hidden;
}
.feature-nav {
    list-style:none;
    padding-left: 0;
    text-align: center;
    background-color: #ececec;
    
}

.feature-nav > li {
    display: inline-block;
    padding: 20px;
    width: 16%;
    font-size: 16px;
    font-weight: bold;
    cursor:pointer;

    min-width: 205px;
}

.feature-nav > li > span > a {
    text-decoration:none;
    color:#94a3a8;
}
.feature-nav > li > span > a:hover {
    text-decoration:none;
    color:#94a3a8;
}
.feature-nav > li.active {
    background: #fff;
}
.feature-nav > li.active > span {
    border-bottom: 3px solid #95e5b5;
}


.feature {
    background: #fff;
    border-top: 2px solid #969696;
    
}
.feature2 {
    background: #f9f8f8;
}
.feature3 {
    background: #fff;
}

.feature-image-1 {
    width: 100%;
    display: inline-block;
    position: relative;
    bottom: -20px;
    z-index: -10;
    float: left;
}
.feature-image-1.mobile {
    width:100%;
    height: 238px;
    background-position: center bottom;
    bottom: 30px;
}

.feature-image-2 {
    background: url(/images/screens/dashboard-tablet.png);
    background-size: cover;
    background-repeat: no-repeat;
    display: inline-block;
    position: absolute;
    margin-top:50px;
    left: 50%;
    width: 500px;
    height: 750px;
    z-index: -11;
    opacity:0;
    transform:translate(-50%);
    transition: all 0.8s cubic-bezier(0.640, 0.000, 0.545, 1.650);
}
.feature-image-2.in {
    transform:translate(-150%);
    opacity:1;
}
.feature-image-3 {
    background: url(/images/screens/dashboard-mobile.png);
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    position: absolute;
    margin-top: 140px;
    left: 50%;
    width: 250px;
    height: 480px;
    z-index:-11;
    opacity:0;
    transform:translate(-50%);
    transition: all 0.8s cubic-bezier(0.640, 0.000, 0.545, 1.650);
}
.feature-image-3.in {
    transform:translate(150%);
    opacity:1;
}


.features-image {
    width: 400px;
    height: 400px;
    margin: 0 auto;
    max-width: 100%;
}
.features-image-1 {
    background: url(/images/screens/widgets.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.features-image-2 {
    background: url(/images/screens/graph.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.features-image-3 {
    background: url(/images/screens/deadlines.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.features-image-4 {
    background: url(/images/screens/timeline.gif);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.features-image-5 {
    background: url(/images/screens/invoicesettings.PNG);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.features-image-6 {
    background: url(/images/screens/project.PNG);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.features-image-7 {
    background: url(/images/screens/uploads.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.features-image-8 {
    background: url(/images/screens/timer.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.features-image-9 {
    background: url(/images/screens/uploadtoproject.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.background {
    height: 375px;
    width:100%;
    background-color: #737373;
    background-image: -webkit-radial-gradient(circle farthest-side at center bottom,#8bf39a 0,#616161 100%);
    background-image: radial-gradient(circle farthest-side at center bottom,#8bf39a 0,#616161 100%);
    display:table;
}
.large {
    font-weight: 600;
    font-size: 50px;
    text-align: center;
    color: #e6e6e6;
    margin-bottom:20px;
}
.background > div {
    display: table-cell;
    height: 100%;
    width:100%;
    vertical-align: middle;
    text-align:center;

}




@media only screen and (min-width : 991px) {
	.vertical-align {
  		display: flex;
  		flex-direction: row;
	}

	.vertical-align > [class^="col-"],
	.vertical-align > [class*=" col-"] {
  		display: flex;
  		align-items: center;
  		justify-content: center; /* Optional, to align inner items 
                              		horizontally inside the column */
	}
}

@media only screen and (max-width : 360px) {
	.features-image {
		height:300px;
	}
}