/*  SECTIONS  */
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*  COLUMN SETUP  */
.col {
    display: block;
    float: left;
    margin: 1% 0 1% 1.6%;
}

.col:first-child {
    margin-left: 0;
}

body {
    background-color: #fafbfc;
}

/*  GROUPING  */
.group:before,
.group:after {
    content: "";
    display: table;
}

.group:after {
    clear: both;
}

.group {
    zoom: 1;
    /* For IE 6/7 */
}

/*  GRID OF THREE  */
.span_3_of_3 {
    width: 100%;
    cursor: pointer;
}

.span_2_of_3 {
    width: 66.1%;
}

.span_1_of_3 {
    width: 32.2%;
}

.span_1_of_4 {
    width: 23%;
}

.span_2_of_4 {
    width: 50%;
}

.span_3_of_4 {
    width: 75%;
}

.span_4_of_4 {
    width: 100%;
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {
    .col {
        margin: 0% 0 0% 0%;
    }

    .span_3_of_3,
    .span_2_of_3,
    .span_1_of_3 {
        width: 100% !important;
    }
    p {
        font-size: 17px !important;
        line-height: 23px !important;
    }

    .heading_D1 {
        height: unset !important;
        width: 100% !important;
        top: 0px !important;
    }

    .heading,
    .bodycopy {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px 20px !important;
        margin: unset !important;
    }
    .bodycopy{
        font-size: 17px;
    }

    .heading_Banner {
        font-size: 24px;
        position: relative;
        padding: 0px 10px 0px 10px;
        text-align: left;
        margin: 15px;
    }

    .thumbs {
        margin: 100px auto !important;
    }
    .thumbs-lp {
        margin: 100px auto !important;
    }
    .about_m{
        width: 100% !important;
    }
    .info_about_m{
        bottom: 00px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 17px !important;
        line-height: 23px !important;
    }
    .swipeDown {
        bottom: -10px !important;
    }
    .floating-mockup {
        padding: unset !important;
    }
    .info_thumbs_lp {
        margin: 0 0 10px 0 !important;
    }
    .mockup_img{
        width: 100% !important;
        margin: 0 0 0 0 !important;
    }


    #home {
        background-position: 400px 0px !important;
    }

    #code {
        background-position: 0 -100px !important;
    }

    #design {
        background-position: 0px 100px !important;
    }

    #surf_01 {
        background-position: -100px 0px !important;
    }

    #dj_01 {
        background-position: -300px -110px !important;
    }

    #el_01 {
        background-position: -300px 0px !important;
    }

    #family {
        background-position: -500px 0px !important;
    }

    #sevb {
        background-position: -300px 120px !important;
    }

    #blank {
        background-position: left !important;
    }

    .sevblogo {
        max-width: 40% !important;
        float: left;
        margin: 5% !important;

    }
}

@media only screen and (min-width: 1200px) {
    #home {
        background-position: 0 -400px !important;
    }
}