/*---------------------------------------------- Skills Section ----------------------------------------------*/



.technical-left {

  padding-right:3vh!important;

}



.technical-list {

  margin:1.5vh 0px 0px 0px;

  padding:0px;

  list-style: none;

  font-size: calc(6px + 0.6vh);

  text-align: left;

}


h5.job-organization {
    text-transform: uppercase;
    font-size: 1.5vh;
    font-weight: 500;
    letter-spacing: 0.1em;
}


.technical-list li {

  font-size: calc(6px + 0.6vh);

  margin-bottom:0.3vh;

  margin-left:20px;

  padding-right:10px;

}



.technical-list li:before {

  content: '\f00c';

  font-family: 'FontAwesome';

  color: #80c1d6;

  margin: 0 10px 0 -20px;

}



.list-group {

  padding-left: 0px;

  margin-bottom: 0px;

  width: 50%;

  float: left;

}



.tooltip {

  position: relative;

  float: right;

}



.tooltip > .tooltip-inner {

  background-color: #eebf3f;

  padding: 5px 15px;

  color: rgb(23, 44, 66);

  font-weight: bold;

  font-size: 13px;

}



.popOver + .tooltip > .tooltip-arrow {

  border-left: 5px solid transparent;

  border-right: 5px solid transparent;

  border-top: 5px solid #eebf3f;

}



.progressText {

  width: 130px;

  float: left;

  display: inline-block;

}



.technical-group {

  margin-top:1.5vh; 

}



.barWrapper {

  width: 100%;

  clear: both;

  display: inline-block;

  margin-bottom: 0.8vh;

}



.progress {

  height: 1.5vh;

  margin-bottom: 0px;

  margin-top: 0px;

  overflow: hidden;

  background-color: rgba(0,0,0,0.3);

  border-radius: 50px;

  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);

  box-shadow: inset 0 1px 2px rgba(0,0,0,.1);

  padding: 0.3vh;

  width: calc(100% - 130px);

  float: right;

  display: inline-block;

}



.progress-bar {

  background: #ffffff;

  background: -webkit-linear-gradient(to right, #80c1d6, #80c1d6);

  background: -o-linear-gradient(to right, #80c1d6, #80c1d6);

  background: -moz-linear-gradient(to right, #80c1d6, #80c1d6);

  background: -ms-linear-gradient(to right, #80c1d6, #80c1d6);

  background: linear-gradient(to right, #80c1d6, #80c1d6);

  -webkit-transition: width 1.5s ease-in-out;

  transition: width 1.5s ease-in-out;

  border-radius: 10px;

}



.skill-logo {

    width: 17vh;

    transform: translate(0, 4);

    margin-top: -36vh;

    display: inline-block;

}



.skills-row {

    background-color: rgba(0,0,0,0.3);

    padding: 10px;

    border-radius: 5px;

    margin: 2vh 0px 3vh 0px;

    text-align: center;

}



.skill-list {

    list-style: none;

    margin: 20px 0px 0px 0px;

    padding: 0px;

}



.skill-group {

    display: flex;

}



.skill-item {

    width: calc(25% - 2px);

    display: inline-block;

    float: left;

    background-color: rgba(0,0,0,0.2);

    margin-left: 1px;

    margin-right: 1px;

    text-align: left;

    padding: 10px 10px 30px 10px;

    border-top: 5px solid #fff;

    overflow: hidden;

    text-overflow: ellipsis;

}

.skill-proficiency {

    padding: 10px 3vh;

    display: block;

    font-family: 'Rajdhani', sans-serif!important;

    border: none!important;

    color: #FFF!important;

    font-weight: 300!important;

    line-height: 1.0em!important;

    text-shadow: none!important;

    font-size:2.4vh!important;

    letter-spacing: 1px;

}



.skill-details {

    padding: 0px 3vh;

    display: block;

}



ul.skill-list li:first-child {

  width: calc(25% - 1px);

  margin-left:0px;

  border-bottom-left-radius: 5px;

}



ul.skill-list li:last-child {

  width: calc(25% - 1px);

  margin-right:0px;

  border-bottom-right-radius: 5px;

}



canvas {

  -moz-user-select: none;

  -webkit-user-select: none;

  -ms-user-select: none;

}



#canvas-holder {

  max-width:40vh;

  display:inline-block;

  margin:0px auto;

  text-align: center;

}



.graph-row {

  background-color: rgba(204, 204, 204, 0.2);

  margin: 0px;

  width: 100%;

  border-right: 0px solid rgba(255,255,255,0);

  border-top: 0px solid rgba(255,255,255,0);

  border-radius:5px;

}



.graph-label {

  text-align: center;

  padding:0px!important;

}



.graph-donut {

  text-align: center;

  margin: 0px auto;

  width: 100%;

  float: left;

  padding:0px!important;

}



.skillset-grid {

    padding: 3vh;

    height: calc(100vh - 40px);

    display: inline-block;

    top: 0px;

    position: absolute;

    width: 100%;

    left: 0px;

}



.grid-skill {

    float: left;

    display: flex;

    min-height: calc((100% - 40px) / 3);

    margin: 5px;

    background-color: #111111;

    box-shadow: 0 0 40px 0px rgba(78, 226, 2, 35%);

    width: calc(33.333% - 10px);

    border: 2px solid #4ee202;

    border-radius: 5px;

    /* border-image: linear-gradient(to bottom, #ff4038 0%, #ff1935 100%); */

    /* border-image-slice: 1; */

}



.skill-col {

    display: inline-flex;

    flex-direction: column;

    justify-content: center;

    text-align: center;

    width:100%;

    height: 100%;

    padding:0px;

}



img.skill-icon {

    width: 30%;

    height: auto;

    margin: 0px auto 2vh auto;

}



.application-title {

  font-family: 'Rajdhani', sans-serif!important;

  border: none;

  color: inherit;

  line-height: 1.0em;

  text-transform: none;

  font-size: 2.5vh;

  margin: 0px;

  display: inline-block;

  font-weight: 300!important;

}

.skill-wrapper {

    overflow: hidden;

    position: relative !important;

    cursor: pointer;

    margin-bottom: 0px;

    display: flex;

    width: 100%;

    border-radius: 3px;

    min-height: calc(((100vh - 6vh) / 3) - 30px);

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center center;

    box-shadow: inset 0 0 10px 3px rgba(78, 226, 2, 17%);

}

.skill-wrapper:hover .skill-box {

    bottom: 0px;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.skill-wrapper .skill-box {

    text-align: center;

    display: flex;

    flex-direction: column;

    justify-content: center;

    position: absolute;

    width: 100%;

    height: 50px;

    bottom: -100%;

    box-shadow: inset 0 0 30px #4ee202;

    background: linear-gradient(180deg, #205b01 0%, #246801 100%);

    -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);

    transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);

}

.chart-wrapper {

    display: block;

    position: relative;

    height: 120px;

    width: 120px;

    margin: 0px auto;

}

.chart {

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  width: 100px;

  height: 100px;

  margin: auto;

  font-size: 24px;

  font-family: "Lato", sans-serif;

  border-radius: 50%;

  box-shadow: inset 0 0 0px 10px rgba(255,255,255,0.3);

  overflow: hidden;

}

.chart:before {

  content: attr(data-percentage) "%";

  display: block;

  width: 100px;

  height: 100px;

  line-height: 100px;

  text-align: center;

  border-radius: 50%;

}

.training-video {

  height:20vh;

  background-color:rgba(77, 77, 77, 0.19);

  border-radius: 5px;

  margin-top: 2vh;

}

.training-video:first-child {

  margin-top: 0vh!important;

}

/* 

.percentage {

  position: relative;

  top: 16px;

  height: 13px;

  overflow: hidden;

  

  &:before,

  &:after {

    position: absolute;

    white-space: pre;

  }

  

  &::before {

    content: "0 \a 1 \a 2 \a 3 \a 4 \a 5 \a 6 \a 7 \a 8 \a 9";

    left: 16px;

    animation: tens $time 1 steps(10, end);

  }



  &::after {

    content: "0 \a 1 \a 2 \a 3 \a 4 \a 5 \a 6 \a 7 \a 8 \a 9";

    right: 16px;

    animation: ones $time/10 6 steps(10, end);

  }

}

*/

@-webkit-keyframes tens {

  0% {

    -webkit-transform: translateY(0px);

            transform: translateY(0px);

  }

  100% {

    -webkit-transform: translateY(-160px);

            transform: translateY(-160px);

  }

}

@keyframes tens {

  0% {

    -webkit-transform: translateY(0px);

            transform: translateY(0px);

  }

  100% {

    -webkit-transform: translateY(-160px);

            transform: translateY(-160px);

  }

}

@-webkit-keyframes ones {

  0% {

    -webkit-transform: translateY(0px);

            transform: translateY(0px);

  }

  100% {

    -webkit-transform: translateY(-160px);

            transform: translateY(-160px);

  }

}

@keyframes ones {

  0% {

    -webkit-transform: translateY(0px);

            transform: translateY(0px);

  }

  100% {

    -webkit-transform: translateY(-160px);

            transform: translateY(-160px);

  }

}

.completed {

  position: absolute;

  top: 0;

  left: 0;

}

.completed:before, .completed:after {

  content: '';

  position: absolute;

  width: 100px;

  height: 100px;

  box-shadow: inset 0 0 0px 10px rgba(255,255,255,1.0);

  border-radius: 50%;

}

.completed:before {

  clip: rect(0 100px 100px 50px);

}

.completed:after {

  clip: rect(0 50px 100px 0);

}



[data-percentage="0"] .completed {

  clip: rect(0 100px 100px 50px);

}

[data-percentage="0"] .completed.active:before {

  -webkit-transform: rotate(-180deg);

          transform: rotate(-180deg);

  -webkit-animation: first-0 2s 1 ease-out;

          animation: first-0 2s 1 ease-out;

}



@-webkit-keyframes mask-0 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}



@keyframes mask-0 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}

@-webkit-keyframes first-0 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

}

@keyframes first-0 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

}

[data-percentage="5"] .completed {

  clip: rect(0 100px 100px 50px);

}

[data-percentage="5"] .completed.active:before {

  -webkit-transform: rotate(-162deg);

          transform: rotate(-162deg);

  -webkit-animation: first-5 2s 1 ease-out;

          animation: first-5 2s 1 ease-out;

}



@-webkit-keyframes mask-5 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}



@keyframes mask-5 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}

@-webkit-keyframes first-5 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(-162deg);

            transform: rotate(-162deg);

  }

}

@keyframes first-5 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(-162deg);

            transform: rotate(-162deg);

  }

}

[data-percentage="10"] .completed {

  clip: rect(0 100px 100px 50px);

}

[data-percentage="10"] .completed.active:before {

  -webkit-transform: rotate(-144deg);

          transform: rotate(-144deg);

  -webkit-animation: first-10 2s 1 ease-out;

          animation: first-10 2s 1 ease-out;

}



@-webkit-keyframes mask-10 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}



@keyframes mask-10 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}

@-webkit-keyframes first-10 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(-144deg);

            transform: rotate(-144deg);

  }

}

@keyframes first-10 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(-144deg);

            transform: rotate(-144deg);

  }

}

[data-percentage="15"] .completed {

  clip: rect(0 100px 100px 50px);

}

[data-percentage="15"] .completed.active:before {

  -webkit-transform: rotate(-126deg);

          transform: rotate(-126deg);

  -webkit-animation: first-15 2s 1 ease-out;

          animation: first-15 2s 1 ease-out;

}



@-webkit-keyframes mask-15 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}



@keyframes mask-15 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}

@-webkit-keyframes first-15 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(-126deg);

            transform: rotate(-126deg);

  }

}

@keyframes first-15 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(-126deg);

            transform: rotate(-126deg);

  }

}

[data-percentage="20"] .completed {

  clip: rect(0 100px 100px 50px);

}

[data-percentage="20"] .completed.active:before {

  -webkit-transform: rotate(-108deg);

          transform: rotate(-108deg);

  -webkit-animation: first-20 2s 1 ease-out;

          animation: first-20 2s 1 ease-out;

}



@-webkit-keyframes mask-20 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}



@keyframes mask-20 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}

@-webkit-keyframes first-20 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(-108deg);

            transform: rotate(-108deg);

  }

}

@keyframes first-20 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(-108deg);

            transform: rotate(-108deg);

  }

}

[data-percentage="25"] .completed {

  clip: rect(0 100px 100px 50px);

}

[data-percentage="25"] .completed.active:before {

  -webkit-transform: rotate(-90deg);

          transform: rotate(-90deg);

  -webkit-animation: first-25 2s 1 ease-out;

          animation: first-25 2s 1 ease-out;

}



@-webkit-keyframes mask-25 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}



@keyframes mask-25 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}

@-webkit-keyframes first-25 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(-90deg);

            transform: rotate(-90deg);

  }

}

@keyframes first-25 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(-90deg);

            transform: rotate(-90deg);

  }

}

[data-percentage="30"] .completed {

  clip: rect(0 100px 100px 50px);

}

[data-percentage="30"] .completed.active:before {

  -webkit-transform: rotate(-72deg);

          transform: rotate(-72deg);

  -webkit-animation: first-30 2s 1 ease-out;

          animation: first-30 2s 1 ease-out;

}



@-webkit-keyframes mask-30 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}



@keyframes mask-30 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}

@-webkit-keyframes first-30 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(-72deg);

            transform: rotate(-72deg);

  }

}

@keyframes first-30 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(-72deg);

            transform: rotate(-72deg);

  }

}

[data-percentage="35"] .completed {

  clip: rect(0 100px 100px 50px);

}

[data-percentage="35"] .completed.active:before {

  -webkit-transform: rotate(-54deg);

          transform: rotate(-54deg);

  -webkit-animation: first-35 2s 1 ease-out;

          animation: first-35 2s 1 ease-out;

}



@-webkit-keyframes mask-35 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}



@keyframes mask-35 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}

@-webkit-keyframes first-35 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(-54deg);

            transform: rotate(-54deg);

  }

}

@keyframes first-35 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(-54deg);

            transform: rotate(-54deg);

  }

}

[data-percentage="40"] .completed {

  clip: rect(0 100px 100px 50px);

}

[data-percentage="40"] .completed.active:before {

  -webkit-transform: rotate(-36deg);

          transform: rotate(-36deg);

  -webkit-animation: first-40 2s 1 ease-out;

          animation: first-40 2s 1 ease-out;

}



@-webkit-keyframes mask-40 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}



@keyframes mask-40 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}

@-webkit-keyframes first-40 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(-36deg);

            transform: rotate(-36deg);

  }

}

@keyframes first-40 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(-36deg);

            transform: rotate(-36deg);

  }

}

[data-percentage="45"] .completed {

  clip: rect(0 100px 100px 50px);

}

[data-percentage="45"] .completed.active:before {

  -webkit-transform: rotate(-18deg);

          transform: rotate(-18deg);

  -webkit-animation: first-45 2s 1 ease-out;

          animation: first-45 2s 1 ease-out;

}



@-webkit-keyframes mask-45 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}



@keyframes mask-45 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}

@-webkit-keyframes first-45 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(-18deg);

            transform: rotate(-18deg);

  }

}

@keyframes first-45 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(-18deg);

            transform: rotate(-18deg);

  }

}

[data-percentage="50"] .completed {

  clip: rect(0 100px 100px 50px);

}

[data-percentage="50"] .completed.active:before {

  -webkit-transform: rotate(0deg);

          transform: rotate(0deg);

  -webkit-animation: first-50 2s 1 ease-out;

          animation: first-50 2s 1 ease-out;

}



@-webkit-keyframes mask-50 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}



@keyframes mask-50 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}

@-webkit-keyframes first-50 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

}

@keyframes first-50 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

}

[data-percentage="55"] .completed {

  clip: rect(0 100px 100px 0px);

}

[data-percentage="55"] .completed.active {

  -webkit-animation: mask-55 2s linear;

          animation: mask-55 2s linear;

}

[data-percentage="55"] .completed.active:before {

  -webkit-transform: rotate(0deg);

          transform: rotate(0deg);

  -webkit-animation: first-55 2s 1 linear;

          animation: first-55 2s 1 linear;

}

[data-percentage="55"] .completed.active:after {

  -webkit-transform: rotate(-162deg);

          transform: rotate(-162deg);

  -webkit-animation: second-55 2s 1 ease-out;

          animation: second-55 2s 1 ease-out;

}



@-webkit-keyframes mask-55 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}



@keyframes mask-55 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}

@-webkit-keyframes first-55 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

}

@keyframes first-55 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

}

@-webkit-keyframes second-55 {

  0%, 50% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

  50.01% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  100% {

    -webkit-transform: rotate(-162deg);

            transform: rotate(-162deg);

  }

}

@keyframes second-55 {

  0%, 50% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

  50.01% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  100% {

    -webkit-transform: rotate(-162deg);

            transform: rotate(-162deg);

  }

}

[data-percentage="60"] .completed {

  clip: rect(0 100px 100px 0px);

}

[data-percentage="60"] .completed.active {

  -webkit-animation: mask-60 2s linear;

          animation: mask-60 2s linear;

}

[data-percentage="60"] .completed.active:before {

  -webkit-transform: rotate(0deg);

          transform: rotate(0deg);

  -webkit-animation: first-60 2s 1 linear;

          animation: first-60 2s 1 linear;

}

[data-percentage="60"] .completed.active:after {

  -webkit-transform: rotate(-144deg);

          transform: rotate(-144deg);

  -webkit-animation: second-60 2s 1 ease-out;

          animation: second-60 2s 1 ease-out;

}



@-webkit-keyframes mask-60 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}



@keyframes mask-60 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}

@-webkit-keyframes first-60 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

}

@keyframes first-60 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

}

@-webkit-keyframes second-60 {

  0%, 50% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

  50.01% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  100% {

    -webkit-transform: rotate(-144deg);

            transform: rotate(-144deg);

  }

}

@keyframes second-60 {

  0%, 50% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

  50.01% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  100% {

    -webkit-transform: rotate(-144deg);

            transform: rotate(-144deg);

  }

}

[data-percentage="65"] .completed {

  clip: rect(0 100px 100px 0px);

}

[data-percentage="65"] .completed.active {

  -webkit-animation: mask-65 2s linear;

          animation: mask-65 2s linear;

}

[data-percentage="65"] .completed.active:before {

  -webkit-transform: rotate(0deg);

          transform: rotate(0deg);

  -webkit-animation: first-65 2s 1 linear;

          animation: first-65 2s 1 linear;

}

[data-percentage="65"] .completed.active:after {

  -webkit-transform: rotate(-126deg);

          transform: rotate(-126deg);

  -webkit-animation: second-65 2s 1 ease-out;

          animation: second-65 2s 1 ease-out;

}



@-webkit-keyframes mask-65 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}



@keyframes mask-65 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}

@-webkit-keyframes first-65 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

}

@keyframes first-65 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

}

@-webkit-keyframes second-65 {

  0%, 50% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

  50.01% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  100% {

    -webkit-transform: rotate(-126deg);

            transform: rotate(-126deg);

  }

}

@keyframes second-65 {

  0%, 50% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

  50.01% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  100% {

    -webkit-transform: rotate(-126deg);

            transform: rotate(-126deg);

  }

}

[data-percentage="70"] .completed {

  clip: rect(0 100px 100px 0px);

}

[data-percentage="70"] .completed.active {

  -webkit-animation: mask-70 2s linear;

          animation: mask-70 2s linear;

}

[data-percentage="70"] .completed.active:before {

  -webkit-transform: rotate(0deg);

          transform: rotate(0deg);

  -webkit-animation: first-70 2s 1 linear;

          animation: first-70 2s 1 linear;

}

[data-percentage="70"] .completed.active:after {

  -webkit-transform: rotate(-108deg);

          transform: rotate(-108deg);

  -webkit-animation: second-70 2s 1 ease-out;

          animation: second-70 2s 1 ease-out;

}



@-webkit-keyframes mask-70 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}



@keyframes mask-70 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}

@-webkit-keyframes first-70 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

}

@keyframes first-70 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

}

@-webkit-keyframes second-70 {

  0%, 50% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

  50.01% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  100% {

    -webkit-transform: rotate(-108deg);

            transform: rotate(-108deg);

  }

}

@keyframes second-70 {

  0%, 50% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

  50.01% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  100% {

    -webkit-transform: rotate(-108deg);

            transform: rotate(-108deg);

  }

}

[data-percentage="75"] .completed {

  clip: rect(0 100px 100px 0px);

}

[data-percentage="75"] .completed.active {

  -webkit-animation: mask-75 2s linear;

          animation: mask-75 2s linear;

}

[data-percentage="75"] .completed.active:before {

  -webkit-transform: rotate(0deg);

          transform: rotate(0deg);

  -webkit-animation: first-75 2s 1 linear;

          animation: first-75 2s 1 linear;

}

[data-percentage="75"] .completed.active:after {

  -webkit-transform: rotate(-90deg);

          transform: rotate(-90deg);

  -webkit-animation: second-75 2s 1 ease-out;

          animation: second-75 2s 1 ease-out;

}



@-webkit-keyframes mask-75 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}



@keyframes mask-75 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}

@-webkit-keyframes first-75 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

}

@keyframes first-75 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

}

@-webkit-keyframes second-75 {

  0%, 50% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

  50.01% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  100% {

    -webkit-transform: rotate(-90deg);

            transform: rotate(-90deg);

  }

}

@keyframes second-75 {

  0%, 50% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

  50.01% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  100% {

    -webkit-transform: rotate(-90deg);

            transform: rotate(-90deg);

  }

}

[data-percentage="80"] .completed {

  clip: rect(0 100px 100px 0px);

}

[data-percentage="80"] .completed.active {

  -webkit-animation: mask-80 2s linear;

          animation: mask-80 2s linear;

}

[data-percentage="80"] .completed.active:before {

  -webkit-transform: rotate(0deg);

          transform: rotate(0deg);

  -webkit-animation: first-80 2s 1 linear;

          animation: first-80 2s 1 linear;

}

[data-percentage="80"] .completed.active:after {

  -webkit-transform: rotate(-72deg);

          transform: rotate(-72deg);

  -webkit-animation: second-80 2s 1 ease-out;

          animation: second-80 2s 1 ease-out;

}



@-webkit-keyframes mask-80 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}



@keyframes mask-80 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}

@-webkit-keyframes first-80 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

}

@keyframes first-80 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

}

@-webkit-keyframes second-80 {

  0%, 50% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

  50.01% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  100% {

    -webkit-transform: rotate(-72deg);

            transform: rotate(-72deg);

  }

}

@keyframes second-80 {

  0%, 50% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

  50.01% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  100% {

    -webkit-transform: rotate(-72deg);

            transform: rotate(-72deg);

  }

}

[data-percentage="85"] .completed {

  clip: rect(0 100px 100px 0px);

}

[data-percentage="85"] .completed.active {

  -webkit-animation: mask-85 2s linear;

          animation: mask-85 2s linear;

}

[data-percentage="85"] .completed.active:before {

  -webkit-transform: rotate(0deg);

          transform: rotate(0deg);

  -webkit-animation: first-85 2s 1 linear;

          animation: first-85 2s 1 linear;

}

[data-percentage="85"] .completed.active:after {

  -webkit-transform: rotate(-54deg);

          transform: rotate(-54deg);

  -webkit-animation: second-85 2s 1 ease-out;

          animation: second-85 2s 1 ease-out;

}



@-webkit-keyframes mask-85 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}



@keyframes mask-85 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}

@-webkit-keyframes first-85 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

}

@keyframes first-85 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

}

@-webkit-keyframes second-85 {

  0%, 50% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

  50.01% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  100% {

    -webkit-transform: rotate(-54deg);

            transform: rotate(-54deg);

  }

}

@keyframes second-85 {

  0%, 50% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

  50.01% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  100% {

    -webkit-transform: rotate(-54deg);

            transform: rotate(-54deg);

  }

}

[data-percentage="90"] .completed {

  clip: rect(0 100px 100px 0px);

}

[data-percentage="90"] .completed.active {

  -webkit-animation: mask-90 2s linear;

          animation: mask-90 2s linear;

}

[data-percentage="90"] .completed.active:before {

  -webkit-transform: rotate(0deg);

          transform: rotate(0deg);

  -webkit-animation: first-90 2s 1 linear;

          animation: first-90 2s 1 linear;

}

[data-percentage="90"] .completed.active:after {

  -webkit-transform: rotate(-36deg);

          transform: rotate(-36deg);

  -webkit-animation: second-90 2s 1 ease-out;

          animation: second-90 2s 1 ease-out;

}



@-webkit-keyframes mask-90 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}



@keyframes mask-90 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}

@-webkit-keyframes first-90 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

}

@keyframes first-90 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

}

@-webkit-keyframes second-90 {

  0%, 50% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

  50.01% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  100% {

    -webkit-transform: rotate(-36deg);

            transform: rotate(-36deg);

  }

}

@keyframes second-90 {

  0%, 50% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

  50.01% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  100% {

    -webkit-transform: rotate(-36deg);

            transform: rotate(-36deg);

  }

}

[data-percentage="95"] .completed {

  clip: rect(0 100px 100px 0px);

}

[data-percentage="95"] .completed.active {

  -webkit-animation: mask-95 2s linear;

          animation: mask-95 2s linear;

}

[data-percentage="95"] .completed.active:before {

  -webkit-transform: rotate(0deg);

          transform: rotate(0deg);

  -webkit-animation: first-95 2s 1 linear;

          animation: first-95 2s 1 linear;

}

[data-percentage="95"] .completed.active:after {

  -webkit-transform: rotate(-18deg);

          transform: rotate(-18deg);

  -webkit-animation: second-95 2s 1 ease-out;

          animation: second-95 2s 1 ease-out;

}



@-webkit-keyframes mask-95 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}



@keyframes mask-95 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}

@-webkit-keyframes first-95 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

}

@keyframes first-95 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

}

@-webkit-keyframes second-95 {

  0%, 50% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

  50.01% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  100% {

    -webkit-transform: rotate(-18deg);

            transform: rotate(-18deg);

  }

}

@keyframes second-95 {

  0%, 50% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

  50.01% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  100% {

    -webkit-transform: rotate(-18deg);

            transform: rotate(-18deg);

  }

}

[data-percentage="100"] .completed {

  clip: rect(0 100px 100px 0px);

}

[data-percentage="100"] .completed.active {

  -webkit-animation: mask-100 2s linear;

          animation: mask-100 2s linear;

}

[data-percentage="100"] .completed.active:before {

  -webkit-transform: rotate(0deg);

          transform: rotate(0deg);

  -webkit-animation: first-100 2s 1 linear;

          animation: first-100 2s 1 linear;

}

[data-percentage="100"] .completed.active:after {

  -webkit-transform: rotate(0deg);

          transform: rotate(0deg);

  -webkit-animation: second-100 2s 1 ease-out;

          animation: second-100 2s 1 ease-out;

}



@-webkit-keyframes mask-100 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}



@keyframes mask-100 {

  0%, 50% {

    clip: rect(0 100px 100px 50px);

  }

  50.01%, 100% {

    clip: rect(0 100px 100px 0px);

  }

}

@-webkit-keyframes first-100 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

}

@keyframes first-100 {

  0% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  50%, 100% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

}

@-webkit-keyframes second-100 {

  0%, 50% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

  50.01% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  100% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

}

@keyframes second-100 {

  0%, 50% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

  50.01% {

    -webkit-transform: rotate(-180deg);

            transform: rotate(-180deg);

  }

  100% {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg);

  }

}





/*---------------------------------------------- Section Responsive ----------------------------------------------*/



@media screen and (min-width: 1501px) {

/*---------- Insert Style -----------*/

}



@media screen and (max-width: 1500px) {

  .technical-left, .technical-right {

    padding-right: 0vh!important;

    width: 100%;

  }

  .technical-col {

    display: inline-block;

    padding-bottom:3vh;

  }

}



@media screen and (max-width: 1450px) and (min-width: 769px){

/*---------- Insert Style -----------*/

}



@media screen and (max-width: 1200px) {

/*---------- Insert Style -----------*/

}



@media screen and (max-width: 1120px) and (min-width: 769px){

/*---------- Insert Style -----------*/

}



@media screen and (min-width: 1170px) {

/*---------- Insert Style -----------*/

}



@media screen and (min-width: 769px) {

/*---------- Insert Style -----------*/

}



@media screen and (max-width: 768px) {

  .technical-list li {

    margin-bottom:0.5vh!important;

  }

  .barWrapper {

      margin-bottom: 0.1vh!important;

  }

  svg.donut {

      height: 180px!important;

  }

  .skill-group {

    display: block;

  }

  .skill-item {

    padding: 5px;

    width: 100%!important;

    border-top: 0px;

    border-left: 4px solid #fff;

    margin: 1px 0px 0px 0px;

  }

  ul.skill-list li:first-child {

    border-bottom-left-radius: 0px;

  }

  ul.skill-list li:last-child {

    border-bottom-left-radius: 5px;

  }

  .skill-logo {

    width: 10vh!important;

    margin-top: -190px!important;

  }

  .skillset-grid {

    height: calc(100vh - 120px);

  }

  .grid-skill {

    min-height: calc(25% + 5px)!important;

    width: calc(48.00% - 4px)!important;

  }

  .skill-wrapper {

    min-height: 25vh!important;

  }

  .middle-blockquotes .swiper-container-reviews .swiper-slide.slide-inner, .middle-skills .swiper-container-skills .swiper-slide.slide-inner {

    min-height: 72vh!important;

  }

  .swipe-employment .billboard-container {

    max-height: 60vh!important;

    overflow-y: hidden;

  }

}



@media screen and (max-width: 540px) {

/*---------- Insert Style -----------*/

}



@media screen and (max-width: 498px) {

/*---------- Insert Style -----------*/

}