﻿/*-------------- Service----------------*/

.SrvAKSvg {
    color: #9b9b9b;
    text-align: justify;
}

    .SrvAKSvg .nimg {
        text-align: center;
        transition: all 0.4s ease 0s;
        width: 110px;
        height: 110px;
        display: block;
        border: 1px solid #dfdedb;
        border-radius: 50%;
        text-align: center;
        margin: 0 auto;
        line-height: 100px;
        overflow: hidden;
    }

        .SrvAKSvg .nimg svg {
     
            fill: #f73e5a;
            width: 70px;
            margin-top: 20px;
            transition: all 0.4s ease 0s;
        }

            .SrvAKSvg .nimg svg, .SrvAKSvg .nimg svg g,
            .SrvAKSvg .nimg svg path, .SrvAKSvg .nimg svg polygon {
                transition: all 0.4s ease 0s;
            }

    .SrvAKSvg #design #brush {
        visibility: hidden;
        transform: translate(33px, -40px);
    }

    .SrvAKSvg:hover svg#design #brush {
        visibility: visible;
        transform: translate(0, 0);
    }

    .SrvAKSvg #basket #winds {
        visibility: hidden;
    }

    .SrvAKSvg:hover svg#basket #winds {
        visibility: visible;
    }
    /*.SrvAKSvg:hover svg#basket {transform: translate(100px);}*/
    .SrvAKSvg:hover svg#basket {
        -webkit-animation: toRightFromLeft 0.3s forwards;
        -moz-animation: toRightFromLeft 0.3s forwards;
        animation: toRightFromLeft 0.3s forwards;
    }

    .SrvAKSvg #credit #pos {
        visibility: hidden;
        transform: translate(-80px);
    }

    .SrvAKSvg:hover svg#credit #pos {
        visibility: visible;
        transform: translate(-10px);
    }

    .SrvAKSvg:hover svg#credit #hand {
        -webkit-animation: creditCard 0.6s;
        -moz-animation: creditCard 0.6s;
        animation: creditCard 0.6s;
    }

    .SrvAKSvg #monitor #cursor {
        visibility: hidden;
        transform: translate(50px,37px);
    }

        .SrvAKSvg #monitor #cursor path:nth-child(2), .SrvAKSvg #monitor #cursor path:nth-child(3) {
            opacity: 0;
        }

    .SrvAKSvg:hover svg#monitor #cursor {
        visibility: visible;
        transform: translate(0);
    }

        .SrvAKSvg:hover svg#monitor #cursor path:nth-child(3) {
            opacity: 1;
            transition: all 1s ease 0s;
        }

        .SrvAKSvg:hover svg#monitor #cursor path:nth-child(2) {
            opacity: 1;
            transition: all 2s ease 0s;
        }

    .SrvAKSvg #sound {
        width: 80px !important;
        margin-top: 15px !important;
        padding: 5px;
    }

        .SrvAKSvg #sound #snds polygon:nth-child(1) {
            transform: translate(-2px,10px);
        }

        .SrvAKSvg #sound #snds polygon:nth-child(2) {
            transform: translate(-2px,-10px);
        }

    .SrvAKSvg:hover svg#sound #snds polygon:nth-child(1) {
        transform: translate(30px,-15px);
    }

    .SrvAKSvg:hover svg#sound #snds polygon:nth-child(2) {
        transform: translate(30px,15px);
    }

    .SrvAKSvg:hover svg#sound #snds polygon:nth-child(3) {
        transform: translate(30px);
    }

    .SrvAKSvg:hover svg#sound #boland {
        transform: translate(15px);
    }

    .SrvAKSvg #search #mag {
        visibility: hidden;
        transform: translate(-47px,20px);
    }

    .SrvAKSvg:hover svg#search #mag {
        visibility: visible;
        -webkit-animation: goLeftRight infinite 1s backwards;
        -moz-animation: goLeftRight infinite 1s backwards;
        animation: goLeftRight infinite 1s backwards;
    }

    .SrvAKSvg #mobile #apps {
        visibility: hidden;
        fill: none;
        stroke: #f73e5a;
    }

        .SrvAKSvg #mobile #apps path:nth-child(1) {
            transform: translate(11px);
        }

        .SrvAKSvg #mobile #apps path:nth-child(2) {
            transform: translate(-11px);
        }

        .SrvAKSvg #mobile #apps path:nth-child(3) {
            transform: translateY(-30px);
        }

        .SrvAKSvg #mobile #apps path:nth-child(4) {
            transform: translateY(30px);
        }

    .SrvAKSvg:hover svg#mobile #apps {
        visibility: visible;
    }

        .SrvAKSvg:hover svg#mobile #apps path:nth-child(1) {
            transform: translate(-5px);
        }

        .SrvAKSvg:hover svg#mobile #apps path:nth-child(2) {
            transform: translate(5px);
        }

        .SrvAKSvg:hover svg#mobile #apps path {
            transform: translate(0);
        }

    .SrvAKSvg #bulb {
        width: 85px !important;
        margin-top: 13px !important;
        padding: 6px;
    }

        .SrvAKSvg #bulb polygon {
            opacity: 0;
        }

            .SrvAKSvg #bulb polygon#light1 {
                transform: translate(-25px, 15px);
            }

            .SrvAKSvg #bulb polygon#light2 {
                transform: translate(-20px);
            }

            .SrvAKSvg #bulb polygon#light3 {
                transform: translate(-20px, -20px);
            }

            .SrvAKSvg #bulb polygon#light4 {
                transform: translate(20px, -20px);
            }

            .SrvAKSvg #bulb polygon#light5 {
                transform: translate(25px);
            }

            .SrvAKSvg #bulb polygon#light6 {
                transform: translate(25px, 20px);
            }

    .SrvAKSvg:hover #bulb polygon {
        opacity: 1;
        transform: translate(0,0) !important;
    }

 .SrvAKSvg:hover #bulb polygon {
    -webkit-animation: lightBulb infinite 0.8s;
     -moz-animation: lightBulb infinite 0.8s;
     animation: lightBulb infinite 0.8s;
    
}

.SrvAKSvg #support {
    width: 85px !important;
    margin-top: 13px !important;
    padding: 6px;
}

    .SrvAKSvg #support path:nth-child(1) {
        visibility: hidden;
        transform: translateY(40px);
    }

.SrvAKSvg:hover svg#support path:nth-child(1) {
    visibility: visible;
    transform: translateY(0);
}

.SrvAKSvg #people #man {
    visibility: hidden;
    transform: translate(-25px);
}

.SrvAKSvg #people #man1 {
    visibility: hidden;
    transform: translate(80px);
}

.SrvAKSvg:hover svg#people #man {
    visibility: visible;
    transform: translate(0);
}

.SrvAKSvg:hover svg#people #man1 {
    visibility: visible;
    transform: translate(0);
}

.SrvAKSvg svg#software {
    padding: 5px;
}

.SrvAKSvg:hover svg#software {
    -webkit-animation: toRightRotate .5s forwards;
    -moz-animation: toRightRotate .5s forwards;
    animation: toRightRotate .5s forwards;
}

.SrvAKSvg #graphic {
    transform: scale(.8);
    transform-origin: 50% 50%;
}

.SrvAKSvg:hover #graphic {
    -webkit-animation: brushBounce .5s infinite;
    -moz-animation: brushBounce .5s infinite;
    animation: brushBounce .5s infinite;
}

/* basket animate */
@-webkit-keyframes toRightFromLeft {
    49% {
        -webkit-transform: translate(90px);
    }

    50% {
        opacity: 0;
        -webkit-transform: translate(-90px);
    }

    51% {
        opacity: 1;
    }
}

@-moz-keyframes toRightFromLeft {
    49% {
        -moz-transform: translate(90px);
    }

    50% {
        opacity: 0;
        -moz-transform: translate(-90px);
    }

    51% {
        opacity: 1;
    }
}

@keyframes toRightFromLeft {
    49% {
        transform: translate(90px);
    }

    50% {
        opacity: 0;
        transform: translate(-90px);
    }

    51% {
        opacity: 1;
    }
}

/* software animate */
@-webkit-keyframes toRightRotate {
    49% {
        -webkit-transform: translate(90px);
    }

    50% {
        opacity: 0;
        -webkit-transform: translate(-90px) rotate(-180deg);
    }

    51% {
        opacity: 1;
    }
}

@-moz-keyframes toRightRotate {
    49% {
        -moz-transform: translate(90px);
    }

    50% {
        opacity: 0;
        -moz-transform: translate(-90px) rotate(-180deg);
    }

    51% {
        opacity: 1;
    }
}

@keyframes toRightRotate {
    49% {
        transform: translate(90px);
    }

    50% {
        opacity: 0;
        transform: translate(-90px) rotate(-180deg);
    }

    51% {
        opacity: 1;
    }
}

/* search animate */
@-webkit-keyframes goLeftRight {
    0% {
        -webkit-transform: translate(-10px);
    }

    50% {
        -webkit-transform: translate(0px);
        opacity: 0.5;
    }

    100% {
        -webkit-transform: translate(10px);
    }
}

@-moz-keyframes goLeftRight {
    0% {
        -moz-transform: translate(-10px);
    }

    50% {
        -moz-transform: translate(0px);
        opacity: 0.5;
    }

    100% {
        -moz-transform: translate(10px);
    }
}

@keyframes goLeftRight {
    0% {
        transform: translate(-10px);
    }

    50% {
        transform: translate(0px);
        opacity: 0.5;
    }

    100% {
        transform: translate(10px);
    }
}

/* search animate */
@-webkit-keyframes creditCard {
    0% {
        -webkit-transform: translate(5px);
    }

    50% {
        -webkit-transform: translate(10px);
    }

    100% {
        -webkit-transform: translate(-5px);
    }
}

@-moz-keyframes creditCard {
    0% {
        -moz-transform: translate(5px);
    }

    50% {
        -moz-transform: translate(10px);
    }

    100% {
        -moz-transform: translate(-5px);
    }
}

@keyframes creditCard {
    0% {
        transform: translate(5px);
    }

    50% {
        transform: translate(10px);
    }

    100% {
        transform: translate(-5px);
    }
}

/* search animate */
@-webkit-keyframes lightBulb {
    0% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes lightBulb {
    0% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}

@keyframes lightBulb {
    0% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}

/* brush animate */
 @-webkit-keyframes brushBounce {
  0%
{
    opacity: 0.3;
}
 100% {
    opacity: 1;
}

}

@-moz-keyframes brushBounce {
   0%

{
    opacity: 0.3;
}

 100% {
    opacity: 1;
}

}

@keyframes brushBounce {
    0%, 100% {
        transform: scale(.8) rotate(10deg);
    }

    50% {
        transform: scale(.8) rotate(-10deg);
    }
}

.SrvAKSvg h3.nti {
    text-align: center;
    font-size: 15px;
    transition: all 0.4s ease 0s;
    color: #9b9b9b;
    font-weight: normal;
}

.SrvAKSvg .ndesc {
    line-height: 22px;
    margin-bottom: 15px;
    min-height: 150px;
    color: #bebebe;
}

.SrvAKSvg:hover h3.nti {
    color: #ed1c24;
}

.SrvAKSvg:hover .ndesc {
    color: #9b9b9b;
}

tr.even {
    background: #F1F1F1;
    color: #313131;
    line-height: 32px;
    padding: 0 10px;
}

tr.odd {
    background: #FFFFFF;
    line-height: 32px;
}
