.process {
    background: transparent url('../images/backgrounds/process.png') no-repeat scroll 0px 0px;
    height: 610px;
    position: relative;
}

.process h1 {
    position: absolute;

}

.process div {
    position: absolute;
}

.process div .ico {
    background: transparent url('../images/process.png') no-repeat scroll 0px 0px;
}

.process .meet .ico {
    height: 56px;
    left: -100px;
    position: absolute;
    top: 0px;
    width: 78px;
}

.process .plan .ico {
    background-position: -78px 0px;
    height: 79px;
    position: absolute;
    right: -110px;
    top: 0px;
    width: 96px;
}

.process .dev .ico {
    background-position: -174px 0px;
    height: 90px;
    position: absolute;
    left: -110px;
    top: 0px;
    width: 98px;
}

.process .testing .ico {
    background-position: -272px 0px;
    height: 50px;
    position: absolute;
    left: -60px;
    top: 0px;
    width: 48px;
}

.process .launch .ico {
    background-position: -320px 0px;
    height: 127px;
    position: absolute;
    right: -120px;
    top: 0px;
    width: 102px;
}

.process div p {
    color: #707070;
    padding: 6px 0px 0px 0px;
    font-family: "proxima-nova","Open Sans",
        "HelveticaNeue-Regular","Helvetica Neue",
        Helvetica,Arial,sans-serif;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.4em;
}

.process .plan,
.process .launch {
    text-align: right;
}

.process span {
    background: transparent url('../images/arrows.png') no-repeat scroll 0px 0px;
    position: absolute;
}

.process .arrow1 {
    height: 56px;
    width: 78px;
}

.process .arrow2 {
    background-position: -78px 0px;
    height: 66px;
    width: 69px;
}

.process .arrow3 {
    background-position: -147px 0px;
    height: 87px;
    width: 127px;
}

.process .arrow4 {
    background-position: -274px 0px;
    height: 66px;
    width: 172px;
}

.sidebar .design {
    display: block;
    margin-top: 16px;
    width: auto;
}

.sidebar .design img {
    width: 100%;
}

@media screen and (min-width: 1280px) {
    .process h1 {
        right: 7%;
        top: 42%;
        width: 370px;
    }

    .process .meet {
        right: 16%;
        top: 5%;
        width: 198px;
    }

    .process .plan {
        right: 43%;
        top: 21.5%;
        text-align: right;
        width: 228px;
    }

    .process .dev {
        left: 25%;
        top: 43%;
        width: 223px;
    }

    .process .testing {
        left: 47%;
        bottom: 17%;
        width: 200px;
    }

    .process .launch {
        right: 18%;
        bottom: 9%;
        width: 200px;
    }

    .process .arrow1 {
        right: 40%;
        top: 10%;
    }

    .process .arrow2 {
        left: 33%;
        top: 30%;
    }

    .process .arrow3 {
        bottom: 20%;
        left: 34%;
    }

    .process .arrow4 {
        bottom: 6%;
        right: 36%;
    }
}

@media screen and (min-width: 960px) and (max-width: 1279px) {
    .process h1 {
        font-size: 2em;
        right: 5%;
        top: 42%;
        width: 300px;
    }

    .process .meet {
        right: 4%;
        top: 5%;
        width: 198px;
    }

    .process .plan {
        right: 41%;
        top: 21.5%;
        width: 228px;
    }

    .process .dev {
        left: 15%;
        top: 43%;
        width: 223px;
    }

    .process .testing {
        left: 45%;
        bottom: 17%;
        width: 200px;
    }

    .process .launch {
        right: 14%;
        bottom: 9%;
        width: 200px;
    }

    .process .arrow1 {
        right: 36%;
        top: 10%;
    }

    .process .arrow2 {
        left: 28%;
        top: 30%;
    }

    .process .arrow3 {
        bottom: 20%;
        left: 30%;
    }

    .process .arrow4 {
        bottom: 5%;
        right: 34%;
    }
}

@media screen and (min-width: 640px) and (max-width: 959px) {
    .process {
        background-position: 100% 0px;
    }

    .process h1 {
        font-size: 1.8em;
        right: 2%;
        top: 47%;
        width: 300px;
    }

    .process .ico {
        display: none;
    }

    .process .meet {
        right: 3%;
        top: 5%;
        width: 198px;
    }

    .process .plan {
        right: 40%;
        top: 21%;
        width: 228px;
    }

    .process .dev {
        left: 4%;
        top: 43%;
        width: 223px;
    }

    .process .testing {
        left: 36%;
        bottom: 17%;
        width: 200px;
    }

    .process .launch {
        right: 4%;
        bottom: 7%;
        width: 200px;
    }

    .process .arrow1 {
        right: 35%;
        top: 10%;
    }

    .process .arrow2 {
        left: 15%;
        top: 30%;
    }

    .process .arrow3 {
        bottom: 20%;
        left: 15%;
    }

    .process .arrow4 {
        bottom: 5%;
        right: 34%;
    }
}

@media screen and (max-width: 639px) {
    .header .process {
        background-image: none;
        height: auto;
        padding: 0px 10px;
    }

    .header .process h1 {
        display: block;
        font-size: 2em;
        position: relative;
        width: auto;
    }

    .header .process .ico {
        bottom: auto !important;
        left: 0px !important;
        right: auto !important;
        top: 22px !important;
    }

    .header .process .meet,
    .header .process .plan,
    .header .process .dev,
    .header .process .testing,
    .header .process .launch {
        bottom: auto;
        display: block;
        left: auto;
        padding: 20px 0px 0px 112px;
        position: relative;
        right: auto;
        text-align: left;
        top: auto;
        width: auto;
    }

    .header .process .meet .ico {
        left: 10px !important;
    }

    .header .process .testing .ico {
        left: 30px !important;
    }

    
    .header .process .launch {
        height: 150px;
    }

    .header .process .arrow1,
    .header .process .arrow2,
    .header .process .arrow3,
    .header .process .arrow4 {
        display: none;
    }
}