@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700");

var-service {
    padding: 0;
    margin: 0;
    text-align: center;
    font-family: "Lato", sans-serif;
}

var-service {
    background: #F7E8F2;
    box-sizing: border-box;
}

.wrapper {
    padding: 60px auto;
}

.page-title {
    margin: 20px auto;
}

.page-title h1 {
    text-transform: lowercase;
    letter-spacing: 10px;
    font-size: 4em;
    font-weight: 300;
}

.contact-title {
    font-size: 4em;
}

.page-title p {
    text-transform: uppercase;
    letter-spacing: 5px;
}

@media (max-width:315px) {

    .page-title h1,
    .contact-title {
        font-size: 3em;
    }

    .page-title p {
        letter-spacing: 14px;
    }
}

.card {
    /* width: 200px; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    align-items: space-between;
    align-self: stretch;
    justify-self: stretch;
    margin-bottom: 30px;
    padding: 10px 0;
    background: white;
    overflow: hidden;
    box-shadow: 5px 5px 15px rgba(96, 37, 102, 0.5);
    border-radius: 15px;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

.card svg {
    width: 100%;
    padding: 10px;
}

.card h2 {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1.2em;
}

.card:hover {
    box-shadow: 5px 5px 15px 0 rgba(255, 255, 255, 0.30);
    transform: translateY(-10px);
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

.icon-wrap {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0px;
}

.icon-design {
    animation-play-state: running;
}

.icon-design .anchor-part {
    animation: move 2s linear infinite;
}

.icon-design .anchor-part--2 {
    animation: move2 2s linear infinite;
}

.icon-design .pen-part {
    transform-origin: 140px 180px;
    animation: bounce2 2s ease-in-out infinite;
}

.icon-design .ruler-part {
    transform-origin: 140px 180px;
    animation: bounce 1s ease-in-out infinite;
}

.icon-design .circle-part {
    transform-origin: 139.8px 167.8px;
    animation: rotate 4s linear infinite;
}

.icon-design .cursor-part {
    animation: bounceBFt2 2s ease-in-out infinite;
}

@keyframes move {

    0%,
    100% {
        transform: translate(1px, 1px);
    }

    50% {
        transform: translate(-1px, -1px);
    }
}

@keyframes move2 {

    0%,
    100% {
        transform: translate(-1px, -1px);
    }

    50% {
        transform: translate(1px, 1px);
    }
}

.icon-develop {
    animation-play-state: running;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.icon-develop .gear-b {
    animation: rotate-reverse 6s;
}

.icon-develop .gear-s {
    animation: rotate 12s linear infinite;
}

.icon-develop #XMLID_87_,
.icon-develop #XMLID_85_,
.icon-develop #XMLID_83_ {
    animation: twinkle 3s ease-in-out infinite;
}

.icon-develop #XMLID_85_ {
    animation-delay: 0.4s;
}

.icon-develop #XMLID_83_ {
    animation-delay: 0.6s;
}

.icon-develop .line-t,
.icon-develop .line-m,
.icon-develop .line-b {
    animation: shrink 1.8s ease-in-out infinite;
}

.icon-develop .line-m {
    animation-delay: 0.3s;
}

.icon-develop .line-b {
    animation-delay: 0.6s;
}

.icon-develop .code-letter_o {
    animation: typingO 3s linear infinite;
}

.icon-develop .code-letter_d {
    animation: typingD 3s linear infinite;
}

.icon-develop .code-letter_e {
    animation: typingE 3s linear infinite;
}

@keyframes typingE {

    20.1%,
    80% {
        fill: transparent;
    }

    20%,
    80.1% {
        fill: #fff;
    }
}

@keyframes typingD {

    30.1%,
    70% {
        fill: transparent;
    }

    30%,
    70.1% {
        fill: #fff;
    }
}

@keyframes typingO {

    40.1%,
    60% {
        fill: transparent;
    }

    40%,
    60.1% {
        fill: #fff;
    }
}

.icon-support {
    animation-play-state: running;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.icon-support .gear-s,
.icon-support .gear-m {
    animation: rotate;
    animation-duration: 6s;
}

.icon-support .gear-b {
    animation: rotate-reverse 6s;
}

.icon-support .clock {
    transform-origin: 223.6px 132.8px;
    animation: rotate 12s linear infinite;
}

.icon-eComm {
    animation-play-state: running;
}

.icon-eComm .overlay {
    transform: translate(82px, -214px);
}

.icon-eComm .bubble-b {
    animation: bubble-b 3.4s linear infinite;
}

.icon-eComm .bubble-m {
    animation: bubble-m 3.4s linear infinite;
}

.icon-eComm .bubble-t {
    animation: bubble-t 3.4s linear infinite;
}

.icon-eComm .hand,
.icon-eComm .bag-f,
.icon-eComm .bag-b,
.icon-eComm .bag-f--tag {
    transform-origin: 320px 200px;
    animation: bounce2 1.6s ease-in-out infinite;
}

.icon-eComm .bag-bb {
    animation-delay: 0.4s;
}

.icon-eComm .bag-f--tag,
.icon-eComm .bag-bb {
    transform-origin: 200px 190px;
    animation: bounce 1.6s ease-in-out infinite;
}

.icon-eComm .bag-b {
    transform-origin: 160px 160px;
    animation: bounce 1.6s ease-in-out infinite;
}

.icon-eComm .credit-card circle:nth-of-type(1) {
    animation: shift 6s ease-in-out infinite;
}

.icon-eComm .credit-card circle:nth-of-type(2) {
    animation: shift2 6s ease-in-out infinite;
}

@keyframes shift {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0.7;
    }

    50% {
        transform: translateX(10px);
        opacity: 1;
    }
}

@keyframes shift2 {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0.7;
    }

    50% {
        transform: translateX(-10px);
        opacity: 1;
    }
}

.icon-mobApps {
    animation-play-state: running;
}

.icon-mobApps .gear {
    animation: rotate 30s linear infinite;
}

.icon-mobApps .line-t,
.icon-mobApps .line-m,
.icon-mobApps .line-b {
    animation: shrink 2.2s ease-in-out infinite;
}

.icon-mobApps .play-btn polygon {
    animation: twinkle 3s linear infinite;
}

.icon-mobApps .line-m {
    animation-delay: 0.3s;
}

.icon-mobApps .line-b {
    animation-delay: 0.6s;
}

.icon-mobApps .ruler {
    transform-origin: 300px 200px;
    animation: bounceBFt2 2s ease-in-out infinite;
}

.icon-mobApps .hook {
    transform-origin: 148px 24px;
    animation: bounce3 1.6s ease-in-out infinite;
}

.icon-mobApps .play-bar--play {
    opacity: 0;
}

.icon-mobApps .play-bar--pause {
    opacity: 1;
}

.icon-wordpress {
    animation-play-state: running;
    width: 80%;
}

.icon-wordpress .graph {
    animation: bounce 1.4s ease-in-out infinite;
}

.icon-wordpress .mouse {
    animation: bounceBFt2 1.6s ease-in-out infinite;
}

.icon-wordpress .wp-logo {
    animation: twinkle2 4s ease-in-out infinite;
}

.icon-wordpress .keyboard [class*=key] {
    animation-play-state: running;
    animation: typing 2.75s linear infinite;
}

.icon-wordpress .keyboard .key-1 {
    animation-delay: 0.2291666667s;
}

.icon-wordpress .keyboard .key-2 {
    animation-delay: 0.4583333333s;
}

.icon-wordpress .keyboard .key-3 {
    animation-delay: 0.6875s;
}

.icon-wordpress .keyboard .key-4 {
    animation-delay: 0.9166666667s;
}

.icon-wordpress .keyboard .key-5 {
    animation-delay: 1.1458333333s;
}

.icon-wordpress .keyboard .key-6 {
    animation-delay: 1.375s;
}

.icon-wordpress .keyboard .key-7 {
    animation-delay: 1.6041666667s;
}

.icon-wordpress .keyboard .key-8 {
    animation-delay: 1.8333333333s;
}

.icon-wordpress .keyboard .key-9 {
    animation-delay: 2.0625s;
}

.icon-wordpress .keyboard .key-10 {
    animation-delay: 2.2916666667s;
}

.icon-wordpress .keyboard .key-11 {
    animation-delay: 2.5208333333s;
}

.icon-wordpress .keyboard .key-12 {
    animation-delay: 2.75s;
}

@keyframes typing {

    0%,
    2% {
        opacity: 0.6;
    }

    4% {
        opacity: 1;
    }
}

.icon-wordpress .code-line {
    animation: shrink 1s ease-in-out infinite;
}

.icon-wordpress .code-line1 {
    animation-delay: 0.3s;
}

.icon-wordpress .code-line2 {
    animation-delay: 0.9s;
}

.icon-wordpress .code-line3 {
    animation-delay: 0.2s;
}

.icon-wordpress .code-line5 {
    animation-delay: 0.5s;
}

.icon-wordpress .code-line6 {
    animation-delay: 0.8s;
}

.icon-wordpress .code-line8 {
    animation-delay: 0.4s;
}

.icon-webApps {
    animation-play-state: running;
}

.icon-webApps .ruler {
    animation: bounceBF 1.8s ease-in-out infinite;
}

.icon-webApps .panel {
    animation: twinkle3 3s ease-in-out infinite;
}

.icon-webApps .panel2 {
    animation-delay: 0.5s;
}

.icon-webApps .panel3 {
    animation-delay: 1s;
}

.icon-webApps .panel4 {
    animation-delay: 1.5s;
}

.icon-webApps .panel5 {
    animation-delay: 2s;
}

.icon-webApps .line-1 {
    transform-origin: 162px;
    animation: shrink 2s ease-in-out infinite;
}

.icon-webApps .line-2,
.icon-webApps .line-3 {
    transform-origin: 144.3px 0;
    animation: shrink 2s ease-in-out infinite;
}

.icon-webApps .line-2 {
    animation-delay: -0.4s;
}

.icon-webApps .blink1,
.icon-webApps .blink2,
.icon-webApps .blink3 {
    animation: 6s linear infinite;
}

.icon-webApps .blink1 {
    animation-name: bubble-b;
}

.icon-webApps .blink2 {
    animation-name: bubble-m;
}

.icon-webApps .blink3 {
    animation-name: bubble-t;
}

.icon-webApps .play-btn {
    opacity: 1;
}

.icon-webApps .pause-btn {
    opacity: 0;
}

.icon-webApps:hover .play-btn {
    opacity: 0;
}

.icon-webApps:hover .pause-btn {
    opacity: 1;
}

.star {
    animation: twinkle 4s ease-in-out infinite;
}

.star-2 {
    animation-delay: 1s;
}

@keyframes twinkle {

    0%,
    50%,
    100% {
        transform: scale(1);
    }

    25%,
    75% {
        transform: scale(1.6);
    }
}

@keyframes twinkle2 {

    0%,
    50%,
    100% {
        transform: scale(1);
    }

    25%,
    75% {
        transform: scale(1.07);
    }
}

@keyframes twinkle3 {

    0%,
    50%,
    100% {
        transform: scale(1);
    }

    25%,
    75% {
        transform: scale(1.14);
    }
}

@keyframes bubble-t {

    26%,
    80% {
        transform: scale(0);
    }

    20%,
    86% {
        transform: scale(1);
    }
}

@keyframes bubble-m {

    36%,
    70% {
        transform: scale(0);
    }

    30%,
    76% {
        transform: scale(1);
    }
}

@keyframes bubble-b {

    46%,
    60% {
        transform: scale(0);
    }

    40%,
    66% {
        transform: scale(1);
    }
}

@keyframes bounce {
    50% {
        transform: rotate(-6deg);
    }
}

@keyframes bounce2 {
    50% {
        transform: rotate(6deg);
    }
}

@keyframes bounce3 {
    50% {
        transform: rotate(3deg);
    }
}

@keyframes bounceBF {

    0%,
    100% {
        transform: rotate(1.6deg);
    }

    50% {
        transform: rotate(-1.6deg);
    }
}

@keyframes bounceBFt2 {

    0%,
    100% {
        transform: rotate(4.6deg);
    }

    50% {
        transform: rotate(-4.6deg);
    }
}

@keyframes shrink {
    50% {
        transform: scaleX(0.3);
    }
}

@keyframes rotate {
    to {
        transform: rotate(1turn);
    }
}

@keyframes rotate-reverse {
    to {
        transform: rotate(-1turn);
    }
}