/* Big tablets to 1200px (widths smaller than pixel row) */
@media only screen and (max-width: 1200px) {

    .header-text-box {
        width: 100%;
        padding: 0 10%;
    }

    .row {
        padding: 0 2%;
    }

    .card {}

}


/* Small tablets to big tablets 768px to 1023px*/
@media only screen and (max-width: 1023px) {

    .header-text-box {
        width: 100%;
        padding: 0 10%;
    }

    body {
        font-size: 18px;
    }

    section {
        padding: 60px 0;
    }

    .long-copy {
        width: 80%;
        margin-left: 10%;
    }

    .app-screen {
        width: 50%;
    }

    .webapp {
        padding: 5% 0;
    }

    .product-summary {
        width: 100%;
        max-width: 1024px;
        margin-bottom: 10px;
        margin-top: 0px;
        padding-right: 0%;
    }

    .product-copy {
        float: left;
        width: 100%;
        max-width: 1024px;
        margin-bottom: 20px;
        padding-left: 0%;
    }

    .project-copy-text {
        width: 100%;
        height: auto;
        display: table-cell;
        vertical-align: top;
    }

    .box img {
        width: 100%;
        height: auto;
        margin-bottom: 15px;
        align-content: center;
    }

    .product-image-right {
        width: 100%;
    }

    .product-image-left {
        width: 100%;
        margin-bottom: 20px;
    }

    .popup {
        width: 50%;
    }

    .span-2-of-2 {
        width: 100%;
    }

    .span-1-of-2 {
        width: 100%;
    }





}




/* Small phones to small tablets 481px to 767px*/
@media only screen and (max-width: 767px) {

    .webapp {
        padding: 5% 0;
    }

    .popup {
        width: 60%;
    }

    .product-summary .btn-full {
        margin-bottom: 10px;
    }

    .product-summary {
        width: 100%;
    }

    .social-links {
        margin-top: 20px;
    }

    .span-4-of-4 {
        width: 100%;
    }

    .span-3-of-4 {
        width: 100%;
    }

    .span-2-of-4 {
        width: 100%;
    }

    .span-1-of-4 {
        width: 100%;
    }

    .main-image {
        margin-top: 0px;
    }


    .project {
        height: auto;
        width: 90%;
        margin: 0% 5%;
        margin-bottom: 6%;
    }

    .project-copy {
        width: 100%;
        height: auto;
        padding: 5% 5%;
        text-align: center;
        display: inline-block;
        float: left;
    }

    .project img {
        display: inline-block;
        margin: 0% 5%;
        width: 90%;
        height: auto;
    }

    .feature-copy {
        font-size: 16px;
        line-height: 1.4;
        text-align: center;
        margin-bottom: 10%;
        margin: 0% 0%;
        text-align: center !important;
        float: none;
    }
    
    .card {
            width: 90%;
            height: auto;
            margin: 3% 0.5%;
            padding: 30px 20px 30px 24px;
        }

        .feature-copy {
            font-size: 16px;
            line-height: 1.4;
            text-align: center;
            margin-bottom: 10%;
            margin: 0% 0%;
            text-align: center !important;
            float: none;
        }

        .feature-icon {
            margin-bottom: 20px;
            margin-left: 40%;
            margin-right: 40%;
            width: 20%;
        }

        .feature-heading {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 10px;
            text-align: center;
            float: none;
        }
    


/* Small phones 0px to 480px*/
@media only screen and (max-width: 480px) {
        

        
    .logo {
            width:100px;
            height: auto;
            margin-top: 2px;
    }
        
    .hero-image {margin-top: 49px;}

        .arrow {
            margin-bottom: 50px;
        }

        .hero-text-box .btn-full {
            margin-top: 10px;
            margin-bottom: 5px;
            line-height: 150%;
        }

        .margin {
            margin-left: 10px
        }

        .hero-text-box .width {
            width: 140px;
        }

        .card {
            width: 90%;
            height: auto;
            margin: 3% 0.5%;
            padding: 30px 20px 30px 24px;
        }

        .feature-copy {
            font-size: 16px;
            line-height: 1.4;
            text-align: center;
            margin-bottom: 10%;
            margin: 0% 0%;
            text-align: center !important;
            float: none;
        }

        .feature-icon {
            margin-bottom: 20px;
            margin-left: 40%;
            margin-right: 40%;
            width: 20%;
        }

        .feature-heading {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 10px;
            text-align: center;
            float: none;
        }


        .span-2-of-2 {
            width: 100%;
        }

        .span-1-of-2 {
            width: 100%;
        }

        h1 {
            font-size: 150%;
        }


        .title {
            padding-top: 2%
        }

        .project {
            height: auto;
            width: 90%;
            margin: 0% 5%;
            margin-bottom: 6%;
        }

        .project-copy {
            width: 100%;
            height: auto;
            padding: 5% 5%;
            text-align: center;
            display: inline-block;
            float: left;
        }

        .project img {
            display: inline-block;
            margin: 0% 5%;
            width: 90%;
            height: auto;
        }
    }