#cv-process{
    text-align: center;
    font-weight: normal;
}
#cv-process h2{
    margin: 75px auto;
    font-size: 3em;
    font-weight: 100;
}
#cv-process h3{
    font-weight: 300;
}
#cv-process div{
    display: inline-block;
    width: 15%;
    vertical-align: top;
    margin: 0px 5% 75px 5%;
}
#cv-process .image{
    border: 3px solid rgb(18, 122, 189);
    border-radius: 100px;
    padding: 10px;
    width: 50px;
    height: 50px;
    position: relative;
}
#cv-process img{
    width: 100%;
    height: 100%;
}
#cv-process .double_a, #cv-process .double_b{
    width: 18px;
    height: initial;
    top: 20px;
    position: absolute;
}
#cv-process .double_a{
    left: 15px;
}
#cv-process .double_b{
    right: 15px;
}

/* animations */
#cv-process div:hover > div > img{
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

#cv-process div:nth-of-type(1):hover > div > img{
    -webkit-animation-name: firstStep;
    animation-name: firstStep;
}
@keyframes firstStep {
    0%   {margin-right: rotate(0deg);}
    25%   {transform: rotate(9deg);}
    50% {transform: rotate(0deg);} /*fake delay*/
    100% {transform: rotate(0deg);}
}
@-webkit-keyframes firstStep {
    0%   {transform: rotate(0deg);}
    25%   {transform: rotate(9deg);}
    50% {transform: rotate(0deg);} /*fake delay*/
    100% {transform: rotate(0deg);}
}

#cv-process div:nth-of-type(2):hover > div > .double_a{
     -webkit-animation-name: secondStepA;
     animation-name: secondStepA;
 }
@keyframes secondStepA {
    0%      {left: 15px;}
    25%     {left: 8px;}
    50%     {left: 15px;} /*fake delay*/
    100%    {left: 15px;}
}
@-webkit-keyframes secondStepA {
    0%      {left: 15px;}
    25%     {left: 8px;}
    50%     {left: 15px;} /*fake delay*/
    100%    {left: 15px;}
}
#cv-process div:nth-of-type(2):hover > div > .double_b{
    -webkit-animation-name: secondStepB;
    animation-name: secondStepB;
}
@keyframes secondStepB {
    0%      {right: 15px;}
    25%     {right: 8px;}
    50%     {right: 15px;} /*fake delay*/
    100%    {right: 15px;}
}
@-webkit-keyframes secondStepB {
    0%      {right: 15px;}
    25%     {right: 8px;}
    50%     {right: 15px;} /*fake delay*/
    100%    {right: 15px;}
}

#cv-process div:nth-of-type(3):hover > div > img{
    -webkit-animation-name: thirdStep;
    animation-name: thirdStep;
}
@keyframes thirdStep {
    0%   {margin-right: rotate(0deg);}
    25%   {transform: rotate(360deg);}
    50% {transform: rotate(0deg);} /*fake delay*/
    100% {transform: rotate(0deg);}
}
@-webkit-keyframes thirdStep {
    0%   {transform: rotate(0deg);}
    25%   {transform: rotate(360deg);}
    50% {transform: rotate(0deg);} /*fake delay*/
    100% {transform: rotate(0deg);}
}



/*MobileFriendly*/

/* applies only if the screen is narrower than 500px */
@media screen and (max-width: 650px) {
    #cv-process div{
        width: 50%;
        margin: 0px 5% 50px 5%;
    }
    #cv-process .image{
        margin-bottom: 10px;
        width: 50px;
    }
}