/*logo title*/
.header-logo h1 {
    color: white;
}

/*progress bars*/
.progress-col-2 .progress {
    width: -webkit-calc(50% - 15px);
    width: -moz-calc(50% - 15px);
    width: calc(50% - 15px);
    float: left;
}

.progress-col-2 .progress:nth-child(odd) {
    margin-right: 15px;
}

.progress-col-2 .progress:nth-child(even) {
    margin-left: 15px;
}

.progress-col-2:after {
    content: '';
    display: block;
    clear: both;
}

.progress-col-3 .progress {
    width: -webkit-calc(33.3% - 20px);
    width: -moz-calc(33.3% - 20px);
    width: calc(33.3% - 20px);
    float: left;
    margin-left: 15px;
    margin-right: 15px;
}

.progress-col-3 .progress:first-child {
    margin-left: 0;
}

.progress-col-3 .progress:last-child {
    margin-right: 0;
}

.progress-col-3 .progress:nth-child(3n) {
    margin-right: 0;
}

.progress-col-3 .progress:nth-child(3n + 1) {
    margin-left: 0;
}

.progress-col-3:after {
    content: '';
    display: block;
    clear: both;
}

.progress {
    background: none;
    -webkit-box-shadow: 0 0 0 0 white;
    -moz-box-shadow: 0 0 0 0 white;
    box-shadow: 0 0 0 0 white;
    height: auto;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    margin-bottom: 30px;
}

.progress .progress-text {
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.progress .progress-text span {
    padding-left: 15px;
}

.progress .progress-item {
    height: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #eeeeee;
    overflow: hidden;
}

.progress .progress-item .progress-bar {
    height: 100%;
    background: -webkit-linear-gradient(200deg, #13e7ac, #00bf84) !important;
    background: -moz-linear-gradient(200deg, #13e7ac, #00bf84) !important;
    background: -o-linear-gradient(200deg, #13e7ac, #00bf84) !important;
    background: linear-gradient(250deg, #13e7ac, #00bf84) !important;
    -webkit-box-shadow: 0 0 0 0 white;
    -moz-box-shadow: 0 0 0 0 white;
    box-shadow: 0 0 0 0 white;
    -webkit-transition: width 1.5s;
    -o-transition: width 1.5s;
    -moz-transition: width 1.5s;
    transition: width 1.5s;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.progress.progress-vertical {
    height: 300px;
    display: inline-block;
    padding: 0 30px;
    position: relative;
}

.progress.progress-vertical .progress-text {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    position: absolute;
    bottom: 0;
    left: 30px;
    margin-bottom: 0;
    width: 100vh;
}

.progress.progress-vertical .progress-item {
    height: 100%;
    width: 5px;
    position: relative;
}

.progress.progress-vertical .progress-item .progress-bar {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 0;
    -webkit-transition: height 1.5s;
    -o-transition: height 1.5s;
    -moz-transition: height 1.5s;
    transition: height 1.5s;
}

@media (max-width: 900px) {
    /*skills list for small screen*/
    .progress-col-2 {
        display: flex;
        flex-wrap: wrap;
    }
    .progress-col-2 .progress.visible {
        width: 100%;
        margin: 15px 0;
    }
}