.skillsection {
     margin-top: 150px;
    /*----------------------------------------*/
    /*----- Backgrounds -----*/
    /*----------------------------------------*/
}

.porttmobildetal{
     color: #fff;
    font-size: 20px;
    margin: 0 0 10px;
    padding: 0 20px;
    opacity: 0;
    transform: translateY(30px);
    transition: all cubic-bezier(.075,.82,.165,1) 1s;
    position: absolute;
    top: 100px;
}
.skillsection  .dtr-section  {
     padding: 0px 50px;
     padding-top: 40px;
}
 .skillsection .dtr-progress {
     position: relative;
     margin: 0 0 35px 0;
     height: 10px;
     -webkit-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.10);
     -moz-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.10);
     box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.10);
}
 .skillsection .progress-bar {
     border-radius: 10px;
}
 .skillsection .dtr-progress-title i {
     margin-right: 5px;
     font-size: 34px;
     line-height: 34px;
     vertical-align: bottom;
}
 .skillsection .bg-dark {
     background-color: #11204d !important;
}
 .skillsection ::-webkit-input-placeholder {
     color: rgba(17, 32, 77, 0.25) !important;
     opacity: 1;
     font-size: 95%;
}
 .skillsection :-moz-placeholder {
     color: rgba(17, 32, 77, 0.25) !important;
     opacity: 1;
     font-size: 95%;
}
 .skillsection ::-moz-placeholder {
     color: rgba(17, 32, 77, 0.25) !important;
     opacity: 1;
     font-size: 95%;
}
 .skillsection :-ms-input-placeholder {
     color: rgba(17, 32, 77, 0.25) !important;
     opacity: 1;
     font-size: 95%;
}
 .skillsection .progress {
     background-color: #fff;
}
 .skillsection .dtr-progress-title, .skillsection .dtr-progress-value {
     color: #11204d;
}
 .skillsection .dtr-progress-title i {
     color: #6138bd;
}


@charset "utf-8";

.error404page {
    height: 800px;
}

.body404,
.head404,
.eyes404,
.leftarm404,
.rightarm404,
.chair404,
.leftshoe404,
.rightshoe404,
.legs404,
.laptop404 {
    background: url(animated-boy.png) 0 0 no-repeat;
    width: 200px;
    height: 200px;
}

.newcharacter404,
.torso404,
.body404,
.head404,
.eyes404,
.leftarm404,
.rightarm404,
.chair404,
.leftshoe404,
.rightshoe404,
.legs404,
.laptop404 {
    background-size: 750px;
    position: absolute;
    display: block;
}

.newcharacter404 {
    width: 400px;
    height: 800px;
    left: 0;
    top: -25px;
    margin-left: 0;
}

.torso404 {
    position: absolute;
    display: block;
    top: 138px;
    left: 0px;
    width: 389px;
    height: 252px;
    animation: sway 20s ease infinite;
    transform-origin: 50% 100%;
}

.body404 {
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    width: 389px;
    height: 253px;
}

.head404 {
    position: absolute;
    top: -148px;
    left: 106px;
    width: 145px;
    height: 194px;
    background-position: 0px -265px;
    transform-origin: 50% 85%;
    animation: headTilt 20s ease infinite;
}

.eyes404 {
    position: absolute;
    top: 95px;
    left: 28px;
    width: 100px;
    height: 18px;
    background-position: -158px -350px;
    animation: blink404 10s steps(1) infinite, pan 10s ease-in-out infinite;
}

.leftarm404 {
    position: absolute;
    top: 159px;
    left: 0;
    width: 165px;
    height: 73px;
    background-position: -265px -341px;
    transform-origin: 9% 35%;
    transform: rotateZ(0deg);
    animation: typeLeft 0.4s linear infinite;
}

.rightarm404 {
    position: absolute;
    top: 148px;
    left: 231px;
    width: 157px;
    height: 91px;
    background-position: -442px -323px;
    transform-origin: 90% 25%;
    animation: typeLeft 0.4s linear infinite;
}

.chair404 {
    position: absolute;
    top: 430px;
    left: 55px;
    width: 280px;
    height: 365px;
    background-position: -12px -697px;
}

.legs404 {
    position: absolute;
    top: 378px;
    left: 4px;
    width: 370px;
    height: 247px;
    background-position: -381px -443px;
}

.leftshoe404 {
    position: absolute;
    top: 591px;
    left: 54px;
    width: 130px;
    height: 92px;
    background-position: -315px -749px;
}

.rightshoe404 {
    position: absolute;
    top: 594px;
    left: 187px;
    width: 135px;
    height: 81px;
    background-position: -453px -749px;
    transform-origin: 35% 12%;
    animation: tapRight 1s linear infinite;
}

.laptop404 {
    position: absolute;
    top: 186px;
    left: 9px;
    width: 365px;
    height: 216px;
    background-position: -2px -466px;
    transform-origin: 50% 100%;
    animation: tapWobble 2s linear infinite;
}

@keyframes sway {
    0% {
        transform: rotateZ(0deg);
    }
    20% {
        transform: rotateZ(0deg);
    }
    25% {
        transform: rotateZ(4deg);
    }
    45% {
        transform: rotateZ(4deg);
    }
    50% {
        transform: rotateZ(0deg);
    }
    70% {
        transform: rotateZ(0deg);
    }
    75% {
        transform: rotateZ(-4deg);
    }
    90% {
        transform: rotateZ(-4deg);
    }
    100% {
        transform: rotateZ(0deg);
    }
}

@keyframes headTilt {
    0% {
        transform: rotateZ(0deg);
    }
    20% {
        transform: rotateZ(0deg);
    }
    25% {
        transform: rotateZ(-4deg);
    }
    35% {
        transform: rotateZ(-4deg);
    }
    38% {
        transform: rotateZ(2deg);
    }
    42% {
        transform: rotateZ(2deg);
    }
    45% {
        transform: rotateZ(-4deg);
    }
    50% {
        transform: rotateZ(0deg);
    }
    70% {
        transform: rotateZ(0deg);
    }
    82% {
        transform: rotateZ(0deg);
    }
    85% {
        transform: rotateZ(4deg);
    }
    90% {
        transform: rotateZ(4deg);
    }
    100% {
        transform: rotateZ(0deg);
    }
}

@keyframes typeLeft {
    0% {
        transform: rotateZ(0deg);
    }
    25% {
        transform: rotateZ(7deg);
    }
    75% {
        transform: rotateZ(-6deg);
    }
    100% {
        transform: rotateZ(0deg);
    }
}

@keyframes tapWobble {
    0% {
        transform: rotateZ(-0.2deg);
    }
    50% {
        transform: rotateZ(20deg);
    }
   60% {
        transform: rotateZ(40deg);
    }
     75% {
        transform: rotateZ(60deg);
    }
      85% {
        transform: rotateZ(80deg);
    }
      90% {
        transform: rotateZ(100deg);
    }
    100% {
        transform: rotateZ(0deg);
    }
}

@keyframes tapRight {
    0% {
        transform: rotateZ(0deg);
    }
    90% {
        transform: rotateZ(-6deg);
    }
    100% {
        transform: rotateZ(0deg);
    }
}

@keyframes blink404 {
    0% {
        background-position: -162px -350px;
    }
    94% {
        background-position: -162px -350px;
    }
    98% {
        background-position: -162px -368px;
    }
    100% {
        background-position: -162px -350px;
    }
}

@keyframes pan {
    0% {
        transform: translateX(-2px);
    }
    49% {
        transform: translateX(-2px);
    }
    50% {
        transform: translateX(2px);
    }
    99% {
        transform: translateX(2px);
    }
    100% {
        transform: translateX(-2px);
    }
}