:before,:after,html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,input,textarea,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;font:inherit;vertical-align:baseline;background:transparent;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
a{text-decoration:none;outline:none}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
::-moz-selection{background-color:#9a51b1;color:#fff}
::selection{background-color:#9a51b1;color:#fff}

html {
    position: relative;
    min-height: 100%;
    overflow-x: hidden
}

body {
    background: #F5F3FF;
    font-family: "Rubik";
    font-weight: 300;
    overflow-x: hidden;
    line-height: 1
}

.loading-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 200;
    background: #ddecff;
    width: 100%;
    height: 100%;
    -webkit-transition: -webkit-transform .4s;
    transition: -webkit-transform .4s;
    -o-transition: -o-transform .4s;
    -moz-transition: transform .4s, -moz-transform .4s;
    transition: transform .4s;
    transition: transform .4s, -webkit-transform .4s, -moz-transform .4s, -o-transform .4s
}

.loading-wrapper.hide {
    -webkit-transform: skew(0deg, 7deg) translateY(-200px);
    -moz-transform: skew(0deg, 7deg) translateY(-200px);
    -ms-transform: skew(0deg, 7deg) translateY(-200px);
    -o-transform: skew(0deg, 7deg) translateY(-200px);
    transform: skew(0deg, 7deg) translateY(-200px)
}

.loading-wrapper svg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 350px
}

.loading-path>path {
    stroke-dasharray: 406.033;
    fill: transparent;
    stroke-width: 5
}

.loading-path>path:nth-child(1) {
    stroke: #2a71f5;
    -webkit-animation: setdash 3s linear infinite;
    -moz-animation: setdash 3s linear infinite;
    -o-animation: setdash 3s linear infinite;
    animation: setdash 3s linear infinite
}

.loading-path>path:nth-child(2) {
    -webkit-animation: setdash 3s linear infinite;
    -moz-animation: setdash 3s linear infinite;
    -o-animation: setdash 3s linear infinite;
    animation: setdash 3s linear infinite;
    stroke: #562af5
}

@-webkit-keyframes setdash {
    0% {
        stroke-dashoffset: 812.033
    }
    50% {
        stroke-dashoffset: 0
    }
    100% {
        stroke-dashoffset: -812.033
    }
}

@-moz-keyframes setdash {
    0% {
        stroke-dashoffset: 812.033
    }
    50% {
        stroke-dashoffset: 0
    }
    100% {
        stroke-dashoffset: -812.033
    }
}

@-o-keyframes setdash {
    0% {
        stroke-dashoffset: 812.033
    }
    50% {
        stroke-dashoffset: 0
    }
    100% {
        stroke-dashoffset: -812.033
    }
}

@keyframes setdash {
    0% {
        stroke-dashoffset: 812.033
    }
    50% {
        stroke-dashoffset: 0
    }
    100% {
        stroke-dashoffset: -812.033
    }
}


.container {
    width: 85%;
    margin: auto
}

.container::after,
.container::before,
.container-min::after,
.container-min::before {
    display: table;
    content: " ";
    clear: both
}

.container-min {
    width: 60%;
    margin: auto
}

.bg-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1
}

.col-left {
    float: left;
    position: relative;
    z-index: 2
}

.col-right {
    float: right;
    position: relative;
    z-index: 2
}

.text-bold {
    font-weight: 600
}

.header-title {
    height: 120px;
    background-image: url(../img/ic-title.svg);
    -webkit-background-size: 50px 50px;
    -moz-background-size: 50px;
    -o-background-size: 50px;
    background-size: 50px;
    background-repeat: no-repeat;
    background-position: center;
    padding: 1px;
    position: relative;
    z-index: 2
}

.header-title.light {
    background-image: url(../img/ic-title-light.svg)
}

.header-title h3 {
    margin-top: 75px;
    font-weight: 800;
    color: #9A50E3;
    font-size: 30px;
    text-align: center;
    letter-spacing: 20px;
    -webkit-transition: 1s .3s;
    -o-transition: 1s .3s;
    -moz-transition: 1s .3s;
    transition: 1s .3s;
    opacity: 0;
    -webkit-transform: skew(5deg) scale(1.2);
    -moz-transform: skew(5deg) scale(1.2);
    -ms-transform: skew(5deg) scale(1.2);
    -o-transform: skew(5deg) scale(1.2);
    transform: skew(5deg) scale(1.2)
}

.header-title.light h3 {
    color: #FFE6C2
}

.aos-animate > .header-title h3 {
    letter-spacing: 0;
    opacity: 1;
    -webkit-transform: skew(0deg) scale(1);
    -moz-transform: skew(0deg) scale(1);
    -ms-transform: skew(0deg) scale(1);
    -o-transform: skew(0deg) scale(1);
    transform: skew(0deg) scale(1)
}

.nav-icon {
    width: 30px;
    height: 30px;
    position: absolute;
    right: 35px;
    top: 53px;
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    transform: rotate(2deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    border: none;
    background: none;
    display: none;
    z-index: 100;
    outline: none
}

.nav-icon.open {
    display: block!important;
    position: fixed
}

.nav-icon.show {
    display: block!important;
    position: fixed;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    right: 15px;
    top: 15px
}

.nav-icon span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: #9ab7c4;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out
}

.nav-icon.open span {
    background: #2C62F7;
    -webkit-box-shadow: 0 -3px 13px 0 rgba(4, 81, 197, 0.5);
    -moz-box-shadow: 0 -3px 13px 0 rgba(4, 81, 197, 0.5);
    box-shadow: 0 -3px 13px 0 rgba(4, 81, 197, 0.5)
}

.nav-icon span:nth-child(1) {
    top: 0
}

.nav-icon span:nth-child(2) {
    top: 8px
}

.nav-icon span:nth-child(3) {
    top: 16px
}

.nav-icon.open span:nth-child(1) {
    top: 6px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg)
}

.nav-icon.open span:nth-child(2) {
    opacity: 0;
    left: -30px
}

.nav-icon.open span:nth-child(3) {
    top: 6px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg)
}

.intro-wrapper {
    padding-top: 20px;
    position: relative
}

.header {
    -webkit-transform: rotate(1deg);
    -moz-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
    -o-transform: rotate(1deg);
    transform: rotate(1deg);
    position: relative;
    z-index: 2;
    -webkit-transform-origin: left bottom;
    -moz-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    -o-transform-origin: left bottom;
    transform-origin: left bottom;
    margin-bottom: -7px
}

.header-logo {
    float: left;
    margin-left: 10px
}

.header-logo > a h1 {
    color: #785cf4;
    font-weight: 600;
    font-size: 19px;
    padding: 5px 10px;
    -webkit-transition: .3s;
    -o-transition: .3s;
    -moz-transition: .3s;
    transition: .3s
}

.header-logo > a h1:hover {
    color: #6330ec;
    text-shadow: 0 2px 8px #a3c3ff
}

.header-menu {
    float: right
}

.menu {
    overflow: hidden
}

.menu > li {
    float: left
}

.menu > li a {
    display: block;
    padding: 5px 10px;
    margin-right: 5px;
    color: #444;
    -webkit-transition: .3s;
    -o-transition: .3s;
    -moz-transition: .3s;
    transition: .3s
}

.menu > li a:hover {
    color: #1f6fb1;
    text-shadow: 0 3px 6px #8fc4f0
}

.intro-section {
    position: relative
}

.intro-section .intro-content {
    margin: 150px auto 50px;
    width: 60%;
    -webkit-transition: opacity .5s, -webkit-transform .5s;
    transition: opacity .5s, -webkit-transform .5s;
    -o-transition: opacity .5s, -o-transform .5s;
    -moz-transition: transform .5s, opacity .5s, -moz-transform .5s;
    transition: transform .5s, opacity .5s;
    transition: transform .5s, opacity .5s, -webkit-transform .5s, -moz-transform .5s, -o-transform .5s
}

.intro-section .intro-content.hide {
    -webkit-transform: translateX(-200px);
    -moz-transform: translateX(-200px);
    -ms-transform: translateX(-200px);
    -o-transform: translateX(-200px);
    transform: translateX(-200px);
    opacity: 0
}

.intro-content h2 {
    font-size: 44px;
    color: #fff;
    margin-bottom: 30px;
    line-height: 1.2;
    font-weight: 800;
    text-align: center;
    padding: 0 5%
}

.intro-content p {
    font-size: 19px;
    color: #e9d5ff;
    line-height: 1.3;
    padding-left: 80px;
    padding-right: 180px;
    text-align: center;
    padding: 0 15%
}

.intro-content a {
    font-size: 22px;
    display: block;
    width: 220px;
    margin: 50px auto 10px;
    padding: 22px 0;
    text-align: center;
    font-weight: 600;
    color: #7A29C8;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #E7FAFF;
    -webkit-box-shadow: 0 7px 15px -4px rgba(107, 9, 122, 0.67);
    -moz-box-shadow: 0 7px 15px -4px rgba(107, 9, 122, 0.67);
    box-shadow: 0 7px 15px -4px rgba(107, 9, 122, 0.67);
}

.intro-section .intro-img {
    margin: 100px auto;
    width: 40%;
    text-align: right;
    -webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s;
    transition: opacity .5s .5s, -webkit-transform .5s .5s;
    -o-transition: opacity .5s .5s, -o-transform .5s .5s;
    -moz-transition: transform .5s .5s, opacity .5s .5s, -moz-transform .5s .5s;
    transition: transform .5s .5s, opacity .5s .5s;
    transition: transform .5s .5s, opacity .5s .5s, -webkit-transform .5s .5s, -moz-transform .5s .5s, -o-transform .5s .5s
}

.intro-section .intro-img.hide {
    -webkit-transform: translateX(200px);
    -moz-transform: translateX(200px);
    -ms-transform: translateX(200px);
    -o-transform: translateX(200px);
    transform: translateX(200px);
    opacity: 0
}

.intro-section .intro-img img {
    width: 80%;
}

.company-wrapper {
    position: relative
}

.company-section {
    margin-top: 50px;
    position: relative;
    padding-bottom: 100px;
    padding-top: 50px;
    z-index: 2
}

.company-section.career {
    margin-top: 50px
}

.company-section .header-title {
    margin-top: -20px
}

.company-section .company-content {
    margin: 0 auto;
    text-align: center;
    width: 65%
}

.company-section .company-img {
    margin: 0 auto;
    width: 35%;
    padding-top: 40px
}

.company-section .company-img img {
    width: 90%;
    margin-right: -50px
}

.company-section .company-img.col-right img {
    margin-right: 10px
}

.company-section .company-img.col-left {
    text-align: left
}

.company-section .company-img.col-right {
    text-align: right
}

.company-content p {
    margin-top: 25px;
    line-height: 1.3;
    color: #444
}

.company-content.col-left {
    padding-right: 150px;
    padding-left: 50px
}

.company-content.col-right {
    padding-right: 50px;
    padding-left: 150px
}

.tech-wrapper {
    margin-top: 70px;
    position: relative
}

.tech-section {
    position: relative;
    z-index: 3
}

.tech-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../img/pat-back.png) no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    z-index: 2
}

.tech-section > p {
    margin-top: 5px;
    line-height: 1.3;
    padding: 10px 0;
    text-align: center;
    color: #111
}

.tech-list {
    margin: 70px auto
}

.tech-list > li {
    padding: 0 30px;
    position: relative;
    padding-bottom: 155px;
}

.tech-list > li:last-child {
    padding-bottom: 30px
}

.tech-list > li::after,
.tech-list > li::before {
    display: table;
    content: " ";
    clear: both
}

.tech-list > li> .tech-list-img {
    width: 30%;
    position: relative;
    text-align: right;
    padding-right: 20px
}

.tech-list > li> .tech-list-img.col-left {
    text-align: left;
    padding-right: 0;
    padding-left: 20px
}

.tech-list > li> .tech-list-img img:nth-child(1) {
    height: 100px;
    width: 156px
}

.tech-list > li> .tech-list-img img:nth-child(2) {
    height: 80px;
    position: absolute;
    right: 0;
    top: 10px
}

.tech-list > li> .tech-list-img.col-left img:nth-child(2) {
    right: unset;
    left: 0
}

.tech-list > li .tech-line {
    width: 2px;
    position: absolute;
    background: -webkit-gradient(linear, left top, left bottom, from(#2C62F7), to(rgba(44, 98, 247, 0.17)));
    background: -webkit-linear-gradient(#2C62F7 0%, rgba(44, 98, 247, 0.17) 100%);
    background: -moz-linear-gradient(#2C62F7 0%, rgba(44, 98, 247, 0.17) 100%);
    background: -o-linear-gradient(#2C62F7 0%, rgba(44, 98, 247, 0.17) 100%);
    background: linear-gradient(#2C62F7 0%, rgba(44, 98, 247, 0.17) 100%);
    top: 95px;
    height: -webkit-calc(100% - 100px);
    height: -moz-calc(100% - 100px);
    height: calc(100% - 100px);
    right: 104px
}

.tech-list > li .col-left + .tech-line {
    background: #5C29E7;
    background: -webkit-gradient(linear, left top, left bottom, from(#5C29E7), to(rgba(92, 41, 231, 0.17)));
    background: -webkit-linear-gradient(#5C29E7 0%, rgba(92, 41, 231, 0.17) 100%);
    background: -moz-linear-gradient(#5C29E7 0%, rgba(92, 41, 231, 0.17) 100%);
    background: -o-linear-gradient(#5C29E7 0%, rgba(92, 41, 231, 0.17) 100%);
    background: linear-gradient(#5C29E7 0%, rgba(92, 41, 231, 0.17) 100%);
    right: unset;
    left: 104px
}
/* 
.tech-list > li:last-child .tech-line {
    display: none
} */

.tech-list > li> .tech-list-info {
    width: 70%
}

.tech-list > li> .tech-list-info h4 {
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.3;
    font-size: 20px;
    padding-top: 40px;
    color: #2C62F7
}

.tech-list > li> .tech-list-info.col-left h4 {
    color: #5C29E7
}

.tech-list > li> .tech-list-info p {
    text-align: left;
    line-height: 1.3;
    color: #333;
    padding-left: 10px
}

.service-advantage{
    padding: 10px;
    margin: 50px auto 100px;
}
.service-advantage > h4{
    color: #5C29E7;
    font-size:26px;
    font-weight:800;
    text-align: center;
}
.service-advantage-list{
    padding-top:10px;
    overflow: hidden;
}
.service-advantage-list > li{
    margin-top: 35px;
    text-align: center;
    line-height: 1.3;
    width:33.3334%;
    position: relative;
    padding: 25px;
}
.service-advantage-list > li::before{
    content:"";
    position: absolute;
    width:90%;
    height: 100%;
    background: #e6e0ff;
    left:0;
    top:0;
    margin:0 5%;
    z-index: -1;
}
.service-advantage-list > li:nth-child(1):before{
    transform: skew(2deg,-1deg);
}
.service-advantage-list > li:nth-child(2):before{
    transform: skew(-1deg,1deg);
}
.service-advantage-list > li:nth-child(3):before{
    transform: skew(1deg,2deg);
}
.service-advantage-list > li > h5{
    color: #2C62F7;
    font-weight: 600;
    font-size:20px;
}
.service-advantage-list > li > p{
    font-size:17px;
    color: #5d7296;
    padding: 10px;
}


.work-wrapper {
    position: relative;
    margin-top: 50px
}

.work-section {
    position: relative;
    z-index: 3;
    padding-bottom: 150px;
    padding-top: 10px
}

.work-section .work-img {
    width: 40%
}

.work-section .work-content {
    width: 60%;
    padding-right: 20%;
    text-align: center
}

.work-content .header-title.light {
    margin-top: 40px
}

.work-section .work-content h4 {
    color: #fff;
    font-size: 25px;
    font-weight: 800;
    margin-top: 40px;
    margin-bottom: 15px
}

.work-section .work-content p {
    color: #eedbff;
    line-height: 1.3
}

.work-section .work-img img {
    width: 90%;
    margin-left: -20px
}

.work-details {
    position: relative;
    z-index: 3;
    clear: both
}

.work-details > div {
    margin-top: 20px;
    padding: 20px 10%
}

.work-details > div > h4 {
    font-size: 23px;
    color: #fff;
    font-weight: 800;
    margin-bottom: 15px
}

.work-details > div > p {
    color: #eedbff;
    margin-bottom: 14px;
    padding-left: 22px;
    line-height: 1.4;
    font-size: 17px;
    position: relative
}

.work-details > div.list > p::before {
    content: "-";
    position: absolute;
    left: 12px
}

.work-details > div > a {
    font-size: 23px;
    color: #ffb9bf;
    font-weight: 800;
    text-decoration: underline;
    -webkit-transition: .3s;
    -o-transition: .3s;
    -moz-transition: .3s;
    transition: .3s;
    margin-bottom: 50px
}

.work-details > div > a:hover {
    color: #ffa76c;
    text-shadow: 0 2px 8px #833126
}

.work-slider {
    padding-left: 15px
}

.work-slider img {
    width: 100%
}

.clients-list{
    overflow: hidden;
    margin-top: 50px;
}
.clients-list > li{
    width:50%;  
    margin-bottom:30px;
}
.clients-list > li > div{
    width:90%;  
    margin: auto;
    overflow: hidden;
    background: #fff;
}
.clients-list > li > div img{
    width:100%;  
}
.clients-list > li > h5{
    padding: 5px;
    line-height: 1.3;
    font-weight: 600;
    font-size: 22px;
    color:#fff;
}

.contact-wrapper {
    position: relative;
    margin-top: 10px
}

.contact-section {
    position: relative
}

.contact-section > section {
    margin-bottom: 60px;
    position: relative;
    z-index: 2
}

.contact-section > section > p {
    margin-top: 5px;
    line-height: 1.3;
    padding: 5px 10%;
    text-align: center;
    color: #111
}

.contact-info {
    width: 50%
}

.contact-info > div {
    margin-bottom: 15px
}

.contact-info > div > span {
    display: block;
    font-size: 17px;
    font-weight: 600;
    color: #2C62F7;
    margin-bottom: 5px
}

.contact-info >div> p {
    color: #444;
    line-height: 1.3;
    padding-left: 5px;
    padding-right: 10px
}

.contact-form {
    width: 50%;
    margin: auto;
    z-index: 3;
    position: relative;
}
.contact-form.career-form{
    margin:50px auto;
}
.input-file > label{
    display: inline-block;
    width: 120px;
    height: 45px;
    background: #d0ddff;
    margin-right: 10px;
    cursor: pointer;
    transition: .4s;
    -webkit-transform: skew(2deg) rotate(.5deg);
    -moz-transform: skew(2deg) rotate(.5deg);
    -ms-transform: skew(2deg) rotate(.5deg);
    -o-transform: skew(2deg) rotate(.5deg);
    transform: skew(2deg) rotate(.5deg)
}

.input-file > label:hover{
    background: #fafafa;
    box-shadow: -1px 1px 7px -1px rgba(0,0,0,0.2) inset;
}
.input-file > label:hover > span , .input-file > label:hover > i{
    color:#6c7ead;
}

.input-file > label > input[type=file]{
    display: none;
}

.input-file > label > img{
    width: 30px;
    display: inline-block;
    color: #fff;
    margin-right: 10px;
    margin-left: 15px;
    vertical-align: middle;
    line-height: 45px;
    transition: .4s;
}
.input-file > label > span{

    line-height: 45px;
    display: inline-block;
    color: #206bc0;
    vertical-align: middle;
    transition: .4s;
}
.contact-form > form > div {
    margin-bottom: 26px
}

.contact-form > form > div > label , .contact-form > form > div > .label {
    margin-bottom: 8px;
    display: block;
    color: #444
}
.intro-content .contact-form > form > div > label, .contact-form > form > div > .label{
    color: #eee
}
.contact-form > form > div > input[type=text],
.contact-form > form > div > input[type=email] {
    padding: 16px 10px;
    background: #fefefe;
    -webkit-box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.2);
    width: 100%;
    font-size: 17px;
    -webkit-transition: .3s;
    -o-transition: .3s;
    -moz-transition: .3s;
    transition: .3s;
    border-bottom: 3px solid #ccc;
    -webkit-transform: skew(2deg) rotate(.5deg);
    -moz-transform: skew(2deg) rotate(.5deg);
    -ms-transform: skew(2deg) rotate(.5deg);
    -o-transform: skew(2deg) rotate(.5deg);
    transform: skew(2deg) rotate(.5deg)
}

.contact-form > form > div > input[type=text]:focus,
.contact-form > form > div > input[type=email]:focus {
    background: #FFF;
    -webkit-box-shadow: 0 5px 15px -3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 15px -3px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 15px -3px rgba(0, 0, 0, 0.2);
    border-bottom: 3px solid #5acaed
}

.contact-form > form > div > textarea {
    padding: 17px 10px;
    background: #fefefe;
    -webkit-box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.1);
    box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.1);
    width: 100%;
    font-size: 17px;
    height: 170px;
    resize: none;
    -webkit-transition: .3s;
    -o-transition: .3s;
    -moz-transition: .3s;
    transition: .3s;
    border-bottom: 3px solid #ccc;
    -webkit-transform: skew(2deg) rotate(.5deg);
    -moz-transform: skew(2deg) rotate(.5deg);
    -ms-transform: skew(2deg) rotate(.5deg);
    -o-transform: skew(2deg) rotate(.5deg);
    transform: skew(2deg) rotate(.5deg)
}

.contact-form > form > div > textarea:focus {
    background: #FFF;
    -webkit-box-shadow: 0 5px 15px -3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 15px -3px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 15px -3px rgba(0, 0, 0, 0.2);
    border-bottom: 3px solid #a992e9
}

.contact-form > form > div > button {
    width: 120px;
    height: 45px;
    line-height: 45px;
    background: #888bff;
    -webkit-background-size: 200% 200%;
    -moz-background-size: 200%;
    -o-background-size: 200%;
    background-size: 200%;
    background-position: 0;
    -webkit-box-shadow: 0 5px 10px -5px rgba(90, 25, 128, 0.4);
    -moz-box-shadow: 0 5px 10px -5px rgba(90, 25, 128, 0.4);
    box-shadow: 0 5px 10px -5px rgba(90, 25, 128, 0.4);
    font-size: 17px;
    cursor: pointer;
    text-align: center;
    border: none;
    color: #fff;
    margin: auto;
    display: block;
    -webkit-transition: .3s;
    -o-transition: .3s;
    -moz-transition: .3s;
    transition: .3s;
    font-weight: 600
}

.contact-form > form  > div > button:hover {
    background-position: 75%;
    -webkit-box-shadow: 0 8px 16px -2px rgba(90, 25, 128, 0.5);
    -moz-box-shadow: 0 8px 16px -2px rgba(90, 25, 128, 0.5);
    box-shadow: 0 8px 16px -2px rgba(90, 25, 128, 0.5);
    letter-spacing: 2px
}

.noti-popup{
    position: fixed;
    bottom: -200px;
    left: 0;
    right:0;
    margin: auto;
    z-index: 1000;
    width:500px;
    padding: 20px;
    line-height: 1.4;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    transition: .3s;
    box-shadow: 0 4px 15px -6px rgba(0, 0, 0, 0.2);
}
.noti-popup.show{
    bottom: 20px;
}
.noti-popup.alert-success{
    background: rgb(171, 243, 209);
    color:rgb(27, 179, 108);
}
.noti-popup.alert-failed{
    background: rgb(243, 171, 171);
    color:rgb(209, 39, 39);
}
.noti-popup > img{
    height: 30px;
    vertical-align: middle;
    margin-right: 10px;
}
.noti-popup.alert-success > img:nth-of-type(2){
    display: none;
}
.noti-popup.alert-failed >img:nth-of-type(1){
    display: none;
}

.site-footer {
    padding: 50px 70px;
    margin-top: 60px;
    margin-bottom: 5px;
    min-height: 100px;
    position: relative
}

.site-footer > div a {
    color: #785cf4
}

.site-footer p {
    color: #555;
    font-size: 14px;
    line-height: 1.3
}

.menu-overlay {
    position: fixed;
    right: -200%;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 99;
    -webkit-transition: .5s;
    -o-transition: .5s;
    -moz-transition: .5s;
    transition: .5s;
    -webkit-transform: skew(-10deg);
    -moz-transform: skew(-10deg);
    -ms-transform: skew(-10deg);
    -o-transform: skew(-10deg);
    transform: skew(-10deg);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px)
}

.menu-overlay.open {
    right: 0;
    -webkit-transform: skew(0deg);
    -moz-transform: skew(0deg);
    -ms-transform: skew(0deg);
    -o-transform: skew(0deg);
    transform: skew(0deg)
}

.menu-overlay > .menu-back {
    width: 200px;
    background: #e4edff;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transform: translateX(100px);
    -moz-transform: translateX(100px);
    -ms-transform: translateX(100px);
    -o-transform: translateX(100px);
    transform: translateX(100px);
    -webkit-transition: .3s .2s;
    -o-transition: .3s .2s;
    -moz-transition: .3s .2s;
    transition: .3s .2s
}

.menu-overlay.open > .menu-back {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px)
}

.menu-overlay > .menu-back::After {
    content: "";
    position: absolute;
    height: 100%;
    width: 200px;
    background: #e4edff;
    top: 0;
    right: 120px;
    -webkit-transform: skew(-7deg);
    -moz-transform: skew(-7deg);
    -ms-transform: skew(-7deg);
    -o-transform: skew(-7deg);
    transform: skew(-7deg)
}

.menu-overlay > .menu-popup {
    width: 300px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0
}

.menu-popup > a {
    float: left;
    padding: 10px;
    margin-top: 30px;
    margin-left: 40px;
    font-weight: 800;
    color: #999
}

.menu-popup > ul {
    margin: 120px auto 0
}

.menu-popup > ul > li {
    text-align: center;
    margin-bottom: 10px
}

.menu-popup > ul > li >a {
    padding: 5px;
    font-weight: 600;
    display: inline-block;
    font-size: 25px;
    color: #333;
    -webkit-transition: .3s;
    -o-transition: .3s;
    -moz-transition: .3s;
    transition: .3s;
    position: relative
}

.menu-popup > ul > li >a:hover {
    color: #1b83d8;
    text-shadow: 0 2px 4px #40b8f07a
}

.menu-popup > ul > li >a::before,
.menu-popup > ul > li >a::after {
    content: "";
    position: absolute;
    top: 18px;
    width: 30px;
    height: 3px;
    background: #40b8f07a;
    -webkit-transition: .3s;
    -o-transition: .3s;
    -moz-transition: .3s;
    transition: .3s;
    opacity: 0
}

.menu-popup > ul > li >a::before {
    left: -100px
}

.menu-popup > ul > li >a::after {
    right: -100px
}

.menu-popup > ul > li >a:hover:before {
    left: -40px;
    opacity: 1
}

.menu-popup > ul > li >a:hover:after {
    right: -40px;
    opacity: 1
}

.svg-path-intro {
    fill: url(#linear-gradient)
}

.svg-path-white {
    fill: #fff
}

.svg-path-about {
    fill: url(#linear-gradient2)
}

.svg-path-tech {
    fill: url(#linear-gradient4)
}

.svg-career {
    position: absolute;
    left: -30px;
    top: -30px;
    -webkit-animation: careerAnim linear 57s infinite;
    -moz-animation: careerAnim linear 57s infinite;
    -o-animation: careerAnim linear 57s infinite;
    animation: careerAnim linear 57s infinite;
    width: 550px
}

.intro-svg-anim {
    -webkit-animation: introAnim 7s infinite alternate;
    -moz-animation: introAnim 7s infinite alternate;
    -o-animation: introAnim 7s infinite alternate;
    animation: introAnim 7s infinite alternate;
    -webkit-transition: 1s;
    -o-transition: 1s;
    -moz-transition: 1s;
    transition: 1s
}

.intro-svg-anim.hide {
    opacity: 0
}

.intro2-svg-anim {
    -webkit-animation: introAnim2 15s infinite alternate;
    -moz-animation: introAnim2 15s infinite alternate;
    -o-animation: introAnim2 15s infinite alternate;
    animation: introAnim2 15s infinite alternate;
    -webkit-transition: 1s .8s;
    -o-transition: 1s .8s;
    -moz-transition: 1s .8s;
    transition: 1s .8s
}

.intro2-svg-anim.hide {
    opacity: 0
}

.about-svg-anim {
    -webkit-animation: aboutAnim 8s ease-in-out infinite alternate;
    -moz-animation: aboutAnim 8s ease-in-out infinite alternate;
    -o-animation: aboutAnim 8s ease-in-out infinite alternate;
    animation: aboutAnim 8s ease-in-out infinite alternate
}

.about-svg-anim2 {
    -webkit-animation: aboutAnim2 12s ease-in-out infinite alternate;
    -moz-animation: aboutAnim2 12s ease-in-out infinite alternate;
    -o-animation: aboutAnim2 12s ease-in-out infinite alternate;
    animation: aboutAnim2 12s ease-in-out infinite alternate
}

.career-svg-anim {
    -webkit-animation: careerAnim 10s ease-in-out infinite alternate;
    -moz-animation: careerAnim 10s ease-in-out infinite alternate;
    -o-animation: careerAnim 10s ease-in-out infinite alternate;
    animation: careerAnim 10s ease-in-out infinite alternate
}

.career-svg-anim2 {
    -webkit-animation: careerAnim2 8s ease-in-out infinite alternate;
    -moz-animation: careerAnim2 8s ease-in-out infinite alternate;
    -o-animation: careerAnim2 8s ease-in-out infinite alternate;
    animation: careerAnim2 8s ease-in-out infinite alternate
}

.tech-svg-anim {
    -webkit-animation: techAnim 10s ease-in-out infinite alternate;
    -moz-animation: techAnim 10s ease-in-out infinite alternate;
    -o-animation: techAnim 10s ease-in-out infinite alternate;
    animation: techAnim 10s ease-in-out infinite alternate
}

.tech-svg-anim2 {
    -webkit-animation: techAnim2 8s ease-in-out infinite alternate;
    -moz-animation: techAnim2 8s ease-in-out infinite alternate;
    -o-animation: techAnim2 8s ease-in-out infinite alternate;
    animation: techAnim2 8s ease-in-out infinite alternate
}

@-webkit-keyframes aboutAnim {
    0% {
        -webkit-transform: skew(0deg) rotate(1deg);
        transform: skew(0deg) rotate(1deg)
    }
    50% {
        -webkit-transform: skew(2deg) rotate(0deg);
        transform: skew(2deg) rotate(0deg)
    }
    100% {
        -webkit-transform: skew(0deg) rotate(0.5deg);
        transform: skew(0deg) rotate(0.5deg)
    }
}

@-moz-keyframes aboutAnim {
    0% {
        -moz-transform: skew(0deg) rotate(1deg);
        transform: skew(0deg) rotate(1deg)
    }
    50% {
        -moz-transform: skew(2deg) rotate(0deg);
        transform: skew(2deg) rotate(0deg)
    }
    100% {
        -moz-transform: skew(0deg) rotate(0.5deg);
        transform: skew(0deg) rotate(0.5deg)
    }
}

@-o-keyframes aboutAnim {
    0% {
        -o-transform: skew(0deg) rotate(1deg);
        transform: skew(0deg) rotate(1deg)
    }
    50% {
        -o-transform: skew(2deg) rotate(0deg);
        transform: skew(2deg) rotate(0deg)
    }
    100% {
        -o-transform: skew(0deg) rotate(0.5deg);
        transform: skew(0deg) rotate(0.5deg)
    }
}

@keyframes aboutAnim {
    0% {
        -webkit-transform: skew(0deg) rotate(1deg);
        -moz-transform: skew(0deg) rotate(1deg);
        -o-transform: skew(0deg) rotate(1deg);
        transform: skew(0deg) rotate(1deg)
    }
    50% {
        -webkit-transform: skew(2deg) rotate(0deg);
        -moz-transform: skew(2deg) rotate(0deg);
        -o-transform: skew(2deg) rotate(0deg);
        transform: skew(2deg) rotate(0deg)
    }
    100% {
        -webkit-transform: skew(0deg) rotate(0.5deg);
        -moz-transform: skew(0deg) rotate(0.5deg);
        -o-transform: skew(0deg) rotate(0.5deg);
        transform: skew(0deg) rotate(0.5deg)
    }
}

@-webkit-keyframes aboutAnim2 {
    0% {
        -webkit-transform: skew(2deg) rotate(0deg);
        transform: skew(2deg) rotate(0deg)
    }
    50% {
        -webkit-transform: skew(0deg) rotate(1deg);
        transform: skew(0deg) rotate(1deg)
    }
    100% {
        -webkit-transform: skew(2deg) rotate(-0.5deg);
        transform: skew(2deg) rotate(-0.5deg)
    }
}

@-moz-keyframes aboutAnim2 {
    0% {
        -moz-transform: skew(2deg) rotate(0deg);
        transform: skew(2deg) rotate(0deg)
    }
    50% {
        -moz-transform: skew(0deg) rotate(1deg);
        transform: skew(0deg) rotate(1deg)
    }
    100% {
        -moz-transform: skew(2deg) rotate(-0.5deg);
        transform: skew(2deg) rotate(-0.5deg)
    }
}

@-o-keyframes aboutAnim2 {
    0% {
        -o-transform: skew(2deg) rotate(0deg);
        transform: skew(2deg) rotate(0deg)
    }
    50% {
        -o-transform: skew(0deg) rotate(1deg);
        transform: skew(0deg) rotate(1deg)
    }
    100% {
        -o-transform: skew(2deg) rotate(-0.5deg);
        transform: skew(2deg) rotate(-0.5deg)
    }
}

@keyframes aboutAnim2 {
    0% {
        -webkit-transform: skew(2deg) rotate(0deg);
        -moz-transform: skew(2deg) rotate(0deg);
        -o-transform: skew(2deg) rotate(0deg);
        transform: skew(2deg) rotate(0deg)
    }
    50% {
        -webkit-transform: skew(0deg) rotate(1deg);
        -moz-transform: skew(0deg) rotate(1deg);
        -o-transform: skew(0deg) rotate(1deg);
        transform: skew(0deg) rotate(1deg)
    }
    100% {
        -webkit-transform: skew(2deg) rotate(-0.5deg);
        -moz-transform: skew(2deg) rotate(-0.5deg);
        -o-transform: skew(2deg) rotate(-0.5deg);
        transform: skew(2deg) rotate(-0.5deg)
    }
}

@-webkit-keyframes careerAnim2 {
    0% {
        -webkit-transform: skew(2deg, 0deg) rotate(0deg);
        transform: skew(2deg, 0deg) rotate(0deg)
    }
    50% {
        -webkit-transform: skew(-2deg, -2deg) rotate(2deg);
        transform: skew(-2deg, -2deg) rotate(2deg)
    }
    100% {
        -webkit-transform: skew(1deg, 0deg) rotate(0deg);
        transform: skew(1deg, 0deg) rotate(0deg)
    }
}

@-moz-keyframes careerAnim2 {
    0% {
        -moz-transform: skew(2deg, 0deg) rotate(0deg);
        transform: skew(2deg, 0deg) rotate(0deg)
    }
    50% {
        -moz-transform: skew(-2deg, -2deg) rotate(2deg);
        transform: skew(-2deg, -2deg) rotate(2deg)
    }
    100% {
        -moz-transform: skew(1deg, 0deg) rotate(0deg);
        transform: skew(1deg, 0deg) rotate(0deg)
    }
}

@-o-keyframes careerAnim2 {
    0% {
        -o-transform: skew(2deg, 0deg) rotate(0deg);
        transform: skew(2deg, 0deg) rotate(0deg)
    }
    50% {
        -o-transform: skew(-2deg, -2deg) rotate(2deg);
        transform: skew(-2deg, -2deg) rotate(2deg)
    }
    100% {
        -o-transform: skew(1deg, 0deg) rotate(0deg);
        transform: skew(1deg, 0deg) rotate(0deg)
    }
}

@keyframes careerAnim2 {
    0% {
        -webkit-transform: skew(2deg, 0deg) rotate(0deg);
        -moz-transform: skew(2deg, 0deg) rotate(0deg);
        -o-transform: skew(2deg, 0deg) rotate(0deg);
        transform: skew(2deg, 0deg) rotate(0deg)
    }
    50% {
        -webkit-transform: skew(-2deg, -2deg) rotate(2deg);
        -moz-transform: skew(-2deg, -2deg) rotate(2deg);
        -o-transform: skew(-2deg, -2deg) rotate(2deg);
        transform: skew(-2deg, -2deg) rotate(2deg)
    }
    100% {
        -webkit-transform: skew(1deg, 0deg) rotate(0deg);
        -moz-transform: skew(1deg, 0deg) rotate(0deg);
        -o-transform: skew(1deg, 0deg) rotate(0deg);
        transform: skew(1deg, 0deg) rotate(0deg)
    }
}

@-webkit-keyframes careerAnim {
    0% {
        -webkit-transform: skew(-2deg) rotate(1deg);
        transform: skew(-2deg) rotate(1deg)
    }
    50% {
        -webkit-transform: skew(3deg) rotate(0deg);
        transform: skew(3deg) rotate(0deg)
    }
    100% {
        -webkit-transform: skew(0deg) rotate(1deg);
        transform: skew(0deg) rotate(1deg)
    }
}

@-moz-keyframes careerAnim {
    0% {
        -moz-transform: skew(-2deg) rotate(1deg);
        transform: skew(-2deg) rotate(1deg)
    }
    50% {
        -moz-transform: skew(3deg) rotate(0deg);
        transform: skew(3deg) rotate(0deg)
    }
    100% {
        -moz-transform: skew(0deg) rotate(1deg);
        transform: skew(0deg) rotate(1deg)
    }
}

@-o-keyframes careerAnim {
    0% {
        -o-transform: skew(-2deg) rotate(1deg);
        transform: skew(-2deg) rotate(1deg)
    }
    50% {
        -o-transform: skew(3deg) rotate(0deg);
        transform: skew(3deg) rotate(0deg)
    }
    100% {
        -o-transform: skew(0deg) rotate(1deg);
        transform: skew(0deg) rotate(1deg)
    }
}

@keyframes careerAnim {
    0% {
        -webkit-transform: skew(-2deg) rotate(1deg);
        -moz-transform: skew(-2deg) rotate(1deg);
        -o-transform: skew(-2deg) rotate(1deg);
        transform: skew(-2deg) rotate(1deg)
    }
    50% {
        -webkit-transform: skew(3deg) rotate(0deg);
        -moz-transform: skew(3deg) rotate(0deg);
        -o-transform: skew(3deg) rotate(0deg);
        transform: skew(3deg) rotate(0deg)
    }
    100% {
        -webkit-transform: skew(0deg) rotate(1deg);
        -moz-transform: skew(0deg) rotate(1deg);
        -o-transform: skew(0deg) rotate(1deg);
        transform: skew(0deg) rotate(1deg)
    }
}

@-webkit-keyframes introAnim {
    0% {
        -webkit-transform: skew(2deg);
        transform: skew(2deg)
    }
    50% {
        -webkit-transform: skew(0deg);
        transform: skew(0deg)
    }
    100% {
        -webkit-transform: skew(3deg);
        transform: skew(3deg)
    }
}

@-moz-keyframes introAnim {
    0% {
        -moz-transform: skew(2deg);
        transform: skew(2deg)
    }
    50% {
        -moz-transform: skew(0deg);
        transform: skew(0deg)
    }
    100% {
        -moz-transform: skew(3deg);
        transform: skew(3deg)
    }
}

@-o-keyframes introAnim {
    0% {
        -o-transform: skew(2deg);
        transform: skew(2deg)
    }
    50% {
        -o-transform: skew(0deg);
        transform: skew(0deg)
    }
    100% {
        -o-transform: skew(3deg);
        transform: skew(3deg)
    }
}

@keyframes introAnim {
    0% {
        -webkit-transform: skew(2deg);
        -moz-transform: skew(2deg);
        -o-transform: skew(2deg);
        transform: skew(2deg)
    }
    50% {
        -webkit-transform: skew(0deg);
        -moz-transform: skew(0deg);
        -o-transform: skew(0deg);
        transform: skew(0deg)
    }
    100% {
        -webkit-transform: skew(3deg);
        -moz-transform: skew(3deg);
        -o-transform: skew(3deg);
        transform: skew(3deg)
    }
}

@-webkit-keyframes introAnim2 {
    0% {
        -webkit-transform: translate(-959px, -640.437px) skew(6deg);
        transform: translate(-959px, -640.437px) skew(6deg)
    }
    50% {
        -webkit-transform: translate(-959px, -640.437px) skew(0deg);
        transform: translate(-959px, -640.437px) skew(0deg)
    }
    100% {
        -webkit-transform: translate(-959px, -640.437px) skew(4deg);
        transform: translate(-959px, -640.437px) skew(4deg)
    }
}

@-moz-keyframes introAnim2 {
    0% {
        -moz-transform: translate(-959px, -640.437px) skew(6deg);
        transform: translate(-959px, -640.437px) skew(6deg)
    }
    50% {
        -moz-transform: translate(-959px, -640.437px) skew(0deg);
        transform: translate(-959px, -640.437px) skew(0deg)
    }
    100% {
        -moz-transform: translate(-959px, -640.437px) skew(4deg);
        transform: translate(-959px, -640.437px) skew(4deg)
    }
}

@-o-keyframes introAnim2 {
    0% {
        -o-transform: translate(-959px, -640.437px) skew(6deg);
        transform: translate(-959px, -640.437px) skew(6deg)
    }
    50% {
        -o-transform: translate(-959px, -640.437px) skew(0deg);
        transform: translate(-959px, -640.437px) skew(0deg)
    }
    100% {
        -o-transform: translate(-959px, -640.437px) skew(4deg);
        transform: translate(-959px, -640.437px) skew(4deg)
    }
}

@keyframes introAnim2 {
    0% {
        -webkit-transform: translate(-959px, -640.437px) skew(6deg);
        -moz-transform: translate(-959px, -640.437px) skew(6deg);
        -o-transform: translate(-959px, -640.437px) skew(6deg);
        transform: translate(-959px, -640.437px) skew(6deg)
    }
    50% {
        -webkit-transform: translate(-959px, -640.437px) skew(0deg);
        -moz-transform: translate(-959px, -640.437px) skew(0deg);
        -o-transform: translate(-959px, -640.437px) skew(0deg);
        transform: translate(-959px, -640.437px) skew(0deg)
    }
    100% {
        -webkit-transform: translate(-959px, -640.437px) skew(4deg);
        -moz-transform: translate(-959px, -640.437px) skew(4deg);
        -o-transform: translate(-959px, -640.437px) skew(4deg);
        transform: translate(-959px, -640.437px) skew(4deg)
    }
}

@-webkit-keyframes techAnim {
    0% {
        -webkit-transform: skew(1deg, 0deg) rotate(0deg);
        transform: skew(1deg, 0deg) rotate(0deg)
    }
    50% {
        -webkit-transform: skew(-2deg, -2deg) rotate(-1deg);
        transform: skew(-2deg, -2deg) rotate(-1deg)
    }
    100% {
        -webkit-transform: skew(1deg, 0deg) rotate(0deg);
        transform: skew(1deg, 0deg) rotate(0deg)
    }
}

@-moz-keyframes techAnim {
    0% {
        -moz-transform: skew(1deg, 0deg) rotate(0deg);
        transform: skew(1deg, 0deg) rotate(0deg)
    }
    50% {
        -moz-transform: skew(-2deg, -2deg) rotate(-1deg);
        transform: skew(-2deg, -2deg) rotate(-1deg)
    }
    100% {
        -moz-transform: skew(1deg, 0deg) rotate(0deg);
        transform: skew(1deg, 0deg) rotate(0deg)
    }
}

@-o-keyframes techAnim {
    0% {
        -o-transform: skew(1deg, 0deg) rotate(0deg);
        transform: skew(1deg, 0deg) rotate(0deg)
    }
    50% {
        -o-transform: skew(-2deg, -2deg) rotate(-1deg);
        transform: skew(-2deg, -2deg) rotate(-1deg)
    }
    100% {
        -o-transform: skew(1deg, 0deg) rotate(0deg);
        transform: skew(1deg, 0deg) rotate(0deg)
    }
}

@keyframes techAnim {
    0% {
        -webkit-transform: skew(1deg, 0deg) rotate(0deg);
        -moz-transform: skew(1deg, 0deg) rotate(0deg);
        -o-transform: skew(1deg, 0deg) rotate(0deg);
        transform: skew(1deg, 0deg) rotate(0deg)
    }
    50% {
        -webkit-transform: skew(-2deg, -2deg) rotate(-1deg);
        -moz-transform: skew(-2deg, -2deg) rotate(-1deg);
        -o-transform: skew(-2deg, -2deg) rotate(-1deg);
        transform: skew(-2deg, -2deg) rotate(-1deg)
    }
    100% {
        -webkit-transform: skew(1deg, 0deg) rotate(0deg);
        -moz-transform: skew(1deg, 0deg) rotate(0deg);
        -o-transform: skew(1deg, 0deg) rotate(0deg);
        transform: skew(1deg, 0deg) rotate(0deg)
    }
}

@-webkit-keyframes techAnim2 {
    0% {
        -webkit-transform: skew(1deg, 1deg);
        transform: skew(1deg, 1deg)
    }
    50% {
        -webkit-transform: skew(0deg, 1deg);
        transform: skew(0deg, 1deg)
    }
    100% {
        -webkit-transform: skew(1deg, 0deg);
        transform: skew(1deg, 0deg)
    }
}

@-moz-keyframes techAnim2 {
    0% {
        -moz-transform: skew(1deg, 1deg);
        transform: skew(1deg, 1deg)
    }
    50% {
        -moz-transform: skew(0deg, 1deg);
        transform: skew(0deg, 1deg)
    }
    100% {
        -moz-transform: skew(1deg, 0deg);
        transform: skew(1deg, 0deg)
    }
}

@-o-keyframes techAnim2 {
    0% {
        -o-transform: skew(1deg, 1deg);
        transform: skew(1deg, 1deg)
    }
    50% {
        -o-transform: skew(0deg, 1deg);
        transform: skew(0deg, 1deg)
    }
    100% {
        -o-transform: skew(1deg, 0deg);
        transform: skew(1deg, 0deg)
    }
}

@keyframes techAnim2 {
    0% {
        -webkit-transform: skew(1deg, 1deg);
        -moz-transform: skew(1deg, 1deg);
        -o-transform: skew(1deg, 1deg);
        transform: skew(1deg, 1deg)
    }
    50% {
        -webkit-transform: skew(0deg, 1deg);
        -moz-transform: skew(0deg, 1deg);
        -o-transform: skew(0deg, 1deg);
        transform: skew(0deg, 1deg)
    }
    100% {
        -webkit-transform: skew(1deg, 0deg);
        -moz-transform: skew(1deg, 0deg);
        -o-transform: skew(1deg, 0deg);
        transform: skew(1deg, 0deg)
    }
}