@import url(//fonts.googleapis.com/css?family=roboto);

        body {
            font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
            padding-bottom: 0;
        }

        .danger, .error {
            color: red;
        }

        .ready {
            display: block !important;
            border-bottom: #ffa100 solid 2px;
        }


        .col-bottom {
            padding-bottom: 10px;
        }

        .service-box {
            text-align: center;
            background: #f7f7f7;
            width: 23%;
            margin-right: 2%;
            padding: 2em 1em;
            border: 1px solid #ddd;
        }
        /* Float Shadow */
        .hvr-float-shadow {
            vertical-align: middle;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -moz-osx-font-smoothing: grayscale;
            position: relative;
            -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
            -webkit-transition-property: transform;
            transition-property: transform;
        }

            .hvr-float-shadow:before {
                pointer-events: none;
                position: absolute;
                z-index: -1;
                content: '';
                top: 105%;
                left: 5%;
                height: 52px;
                width: 95%;
                opacity: 0.5;
                background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 80%);
                background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 80%);
                -webkit-transition-duration: 0.3s;
                transition-duration: 0.3s;
                -webkit-transition-property: transform, opacity;
                transition-property: transform, opacity;
            }

            .hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active {
                -webkit-transform: translateY(-9px);
                transform: translateY(-9px);
                /* move the element up by 5px */
            }

                .hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before {
                    opacity: 1;
                    -webkit-transform: translateY(9px);
                    transform: translateY(9px);
                    /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
                }

        #service {
            padding: 5em 0 11em 0;
        }

        .serve-grids-top {
            margin-top: 4em;
        }

        .service-box h5 {
            font-size: 1.3em;
            font-weight: 600;
            color: #146eb4;
            margin-top: 1.3em;
            text-transform: uppercase;
        }

        .service-box p {
            color: #637B8E;
            font-size: 1em;
            line-height: 1.8em;
            margin: 0.5em 0;
        }
        /*---- responsive-design -----*/
        @media(max-width:1440px) {
            .logo a h1 {
                font-size: 4em;
                margin-bottom: 0px;
            }

            .banner {
                min-height: 550px;
            }

            .callbacks_tabs {
                top: 52%;
                z-index: 999;
                left: -12%;
            }
        }

        @media(max-width:1366px) {
            .callbacks_tabs {
                top: 52%;
                z-index: 999;
                left: -4%;
            }
        }

        @media(max-width:1280px) {
            .textbox h4 {
                font-size: 2.5em;
                margin-top: 4em;
            }

            h2.tittle {
                text-transform: uppercase;
                font-size: 2em;
            }

            .contact input[type="text"] {
                width: 31.3%;
                float: left;
                font-size: 1em;
                padding: .8em 1em;
            }
        }

        @media(max-width:1080px) {
            .banner {
                min-height: 480px;
            }

            .banner-info {
                width: 58%;
                margin: 9em auto 0;
                padding: 2em 0;
            }

                .banner-info p {
                    font-size: 33px;
                    padding: 0px 30px;
                    margin: 0.5em 0;
                }

                .banner-info h3 {
                    font-size: 2.5em;
                }

                .banner-info span {
                    font-size: 1.5em;
                }

            .callbacks_nav {
                top: 59%;
            }

            .ab-right {
                text-align: left;
                padding: 6em 0em 0 2em;
            }

            h3.tittle {
                font-size: 2.5em;
            }

            #plan h4 {
                font-size: 1.5em;
                margin: 0.5em 0 0.3em 0;
            }

            figure.effect-julia img {
                max-width: none;
                height: 327px;
            }

            .textbox h4 {
                font-size: 2.5em;
                margin-top: 3.5em;
            }

            .map iframe {
                height: 350px;
                width: 100%;
            }
        }

        @media(max-width:991px) {
            .logo a h1 {
                font-size: 3.2em;
                margin-bottom: 0px;
            }

            .callbacks_nav {
                position: absolute;
                -webkit-tap-highlight-color: rgba(0,0,0,0);
                top: 56%;
            }

            .link-effect-12 a {
                margin: 0 1px;
                padding: 10px 16px;
                font-size: 1em;
            }

            .top-menu {
                margin-top: 10px;
            }

            .banner {
                min-height: 371px;
            }

            .banner-info {
                width: 58%;
                margin: 6em auto 0;
                padding: 2em 0;
            }

            .ab-right {
                text-align: left;
                padding: 5em 0em 4em 1em;
            }

            .service-box {
                float: left;
                width: 48%;
                margin-bottom: 7em;
            }

            .news-img {
                float: left;
                width: 30%;
                margin-right: 1%;
                margin-bottom: 4%;
            }

            .news-grid:nth-child(3), .news-grid:nth-child(4) {
                margin-top: 0em;
            }

            #news, #gallery, #plan {
                padding: 4em 0;
            }

            .insurance-grid {
                padding: 0;
                width: 48%;
                margin-right: 2%;
                float: left;
            }

            figure.effect-julia img {
                max-width: none;
                height: 246px;
            }

            .gallery-grid {
                padding: 0;
                float: left;
                width: 33%;
            }

            .textbox h4 {
                font-size: 2.5em;
                margin-top: 2.5em;
            }

            .test-wrapper {
                float: left;
                width: 50%;
            }

                .test-wrapper img {
                    position: absolute;
                    left: 31%;
                    width: 30%;
                    border-top: 3px solid #146eb4;
                    border-right: 3px solid #146eb4;
                    bottom: -34%;
                }

            .test {
                padding: 4em 0 10em 0;
            }

            .contact {
                padding: 4em 0 0 0;
            }

                .contact input[type="text"] {
                    width: 30.7%;
                    float: left;
                    font-size: 1em;
                    padding: .8em 1em;
                }

            #contact {
                min-height: 580px;
            }

            .footer-grid-left input[type="submit"] {
                padding: 9px 0;
                width: 23%;
            }

            .footer-grid-left h3 {
                font-size: 2em;
                margin: 0px 0 1em;
                padding: 1em 0 0;
            }

            .callbacks_tabs {
                top: 45%;
                z-index: 999;
                left: -1%;
            }
        }

        @media(max-width:800px) {
            .service-box {
                float: left;
                width: 48%;
                margin-bottom: 7em;
            }

            #service {
                padding: 4em 0 3em 0;
            }

            .news-img {
                float: left;
                width: 30%;
                margin-right: 1%;
                margin-bottom: 4%;
            }

            .textbox h4 {
                font-size: 2.5em;
                margin-top: 2.5em;
            }
        }

        @media(max-width:736px) {
            .link-effect-12 a {
                margin: 0 1px;
                padding: 10px 14px;
                font-size: 1em;
            }

            .footer-bottom-right {
                float: none;
                text-align: center;
                margin-top: 3em;
            }
        }

        @media(max-width:670px) {
            .banner-info p {
                font-size: 27px;
                padding: 0px 30px;
                margin: 0.5em 0;
            }

            .banner-info span {
                font-size: 1.3em;
            }

            .main-nav {
                margin-top: 0;
                float: right;
                width: 100%;
            }

            .link-effect-12 a {
                margin: 0 1px;
                padding: 10px 13px;
                font-size: 1em;
            }

            .banner-info h3 {
                font-size: 2em;
            }

            .insurance-grid {
                padding: 0;
                width: 100%;
                margin-right: 2%;
                float: left;
            }

            figure.effect-julia img {
                max-width: none;
                height: 100%;
            }

            .grid figure figcaption {
                padding: 3em;
            }

            .textbox h4 {
                font-size: 2em;
                margin-top: 2.5em;
            }

            .test-wrapper {
                float: left;
                width: 100%;
                margin-bottom: 9em;
            }

                .test-wrapper img {
                    position: absolute;
                    left: 36%;
                    width: 30%;
                    border-top: 3px solid #146eb4;
                    border-right: 3px solid #146eb4;
                    bottom: -73%;
                }

            .test {
                padding: 4em 0 8em 0;
            }

            .contact input[type="text"] {
                width: 29.9%;
                float: left;
                font-size: 1em;
                padding: .8em 1em;
            }

            .serve-grids-top {
                margin-top: 2em;
            }

            .insurance-grids {
                margin-top: 1em;
            }

            .news-grids {
                margin-top: 2em;
            }

            .test {
                padding: 3em 0 1em 0;
            }
        }

        @media(max-width:640px) {

            #news, #gallery, #plan {
                padding: 3em 0;
            }

            #service {
                padding: 3em 0 1em 0;
            }

            .gallery-grid {
                padding: 0;
                float: left;
                width: 50%;
            }

            .banner {
                min-height: 306px;
            }

            .callbacks_tabs {
                top: 39%;
                z-index: 999;
                left: -2%;
            }

            .modal-dialog.about {
                width: 550px;
                margin: 20px auto;
            }

            h5.tittle {
                font-size: 1.2em;
            }

            h4.tittle {
                font-size: 1.4em;
            }

            .about-inner iframe {
                width: 100%;
                height: 300px;
            }
        }

        @media(max-width:568px) {
            .btn {
                width: 100% !important;
            }

            .service-box {
                float: left;
                width: 100%;
                margin-bottom: 7em;
            }

            p.phonenum {
                float: none;
                color: #fff;
                font-size: 1em;
                font-weight: 600;
                text-align: center;
            }

            .social-icons {
                float: none;
                text-align: center;
            }

            span.menu {
                position: absolute;
                top: -62px;
                right: 0px;
            }

            .footer-bottom-left {
                float: none;
                text-align: center;
            }

            .footer-bottom-right {
                float: none;
                text-align: center;
                margin-top: 1em;
            }

            .footer-bottom-left p {
                font-size: 1em;
                margin: 0em 0 0;
                line-height: 1.9em;
            }

            .footer-grid-left h3 {
                font-size: 1.6em;
                margin: 0px 0 0.5em;
                padding: 0.5em 0 0;
            }

            .map iframe {
                height: 250px;
                width: 100%;
            }

            .footer-grid-left input[type="submit"] {
                padding: 9px 0;
                width: 29%;
            }

            .test-grid-2 {
                margin-top: 1em;
            }

            .contact input[type="text"] {
                width: 100%;
                float: left;
                font-size: 1em;
                padding: .8em 1em;
                margin-bottom: 10px;
            }

            .contact input.email {
                margin: 0 0em;
                margin-bottom: 10px;
            }

            span.event-date {
                font-size: 1em;
            }

            .news-text {
                float: right;
                width: 69%;
            }

            .contact input[type="submit"] {
                outline: none;
                padding: 0.7em 1em;
                font-size: 1em;
                margin: 1em auto 2em;
                width: 26%;
            }

            .contact input[type="submit"] {
                outline: none;
                color: #fff;
                padding: 0.7em 1em;
                font-size: 1.1em;
                margin: 1em 0 0 0;
                -webkit-appearance: none;
                background: #ff9900;
                transition: 0.5s all;
                border: 2px solid #ff9900;
                -webkit-transition: 0.5s all;
                transition: 0.5s all;
                -moz-transition: 0.5s all;
                margin: 1em auto 2em;
                width: 26%;
            }

            .banner {
                min-height: 306px;
            }
        }

        @media(max-width:898px) {
            .col-md-4 {
                width: 100%;
                float: none;
            }

            .Image {
                height: auto !important;
            }
        }

        @media(max-width:480px) {

            .btn, .col-md-4 {
                width: 100%;
                float: none;
            }

            body {
                padding-top: 0 !important;
            }

            .header-strip {
                display: none;
            }

            #logo {
                margin: -10px;
                padding: 0;
                width: 100%;
            }

            .Image {
                height: auto !important;
            }

            .service-box {
                float: left;
                width: 100%;
                margin-bottom: 7em;
            }

            p.phonenum {
                float: none;
                color: #fff;
                font-size: 1em;
                font-weight: 600;
                text-align: center;
            }

            .social-icons {
                float: none;
                text-align: center;
            }

            span.menu {
                position: absolute;
                top: -62px;
                right: 0px;
            }

            .footer-bottom-left {
                float: none;
                text-align: center;
            }

            .footer-bottom-right {
                float: none;
                text-align: center;
                margin-top: 1em;
            }

            .footer-bottom-left p {
                font-size: 1em;
                margin: 0em 0 0;
                line-height: 1.9em;
            }

            .footer-grid-left h3 {
                font-size: 1.6em;
                margin: 0px 0 0.5em;
                padding: 0.5em 0 0;
            }

            .map iframe {
                height: 250px;
                width: 100%;
            }

            .footer-grid-left input[type="submit"] {
                padding: 9px 0;
                width: 29%;
            }

            .test-grid-2 {
                margin-top: 1em;
            }

            .test-wrapper img {
                position: absolute;
                left: 36%;
                width: 30%;
                border-top: 3px solid #146eb4;
                border-right: 3px solid #146eb4;
                bottom: -52%;
            }

            .grid figure figcaption {
                padding: 1em;
            }

            .modal-dialog.about {
                width: 450px;
                margin: 20px auto;
            }

            .about-inner iframe {
                width: 100%;
                height: 200px;
            }
        }

        @media(max-width:414px) {
            .col-md-4 {
                width: 100%;
            }

            .banner-info p {
                font-size: 19px;
                padding: 0px 10px;
                margin: 0.5em 0;
            }

            form.retire {
                padding: 1em;
            }

            h2.tittle {
                text-transform: uppercase;
                font-size: 1.5em;
                padding-left: 8px;
                border-left: 6px solid #146eb4;
            }

            .col-bottom h4 {
                font-size: 1.2em;
            }

            .news-img {
                float: none;
                width: 60%;
                padding: 0;
                margin: 0 auto;
                text-align: center;
            }

            .news-grid {
                margin: 0 auto;
                text-align: center;
            }

            .news-text {
                float: right;
                width: 100%;
                padding: 0;
                margin: 1.5em 0;
            }

            .callbacks_tabs li {
                display: block;
                text-align: center;
                padding: 4px 6px 5px 0px;
                margin-bottom: 5px;
                line-height: 15px;
            }

            .callbacks_tabs a:after {
                height: 11px;
                width: 11px;
            }

            .callbacks_nav {
                position: absolute;
                -webkit-tap-highlight-color: rgba(0,0,0,0);
                top: 63%;
                left: 8%;
                height: 30px;
                width: 30px;
                background: transparent url("http://asapproperties.co.za/images/arrow.png") no-repeat 0px -3px;
                background-size: 174%;
            }

                .callbacks_nav.next {
                    right: 9%;
                    height: 30px;
                    width: 30px;
                    background: transparent url("http://asapproperties.co.za/images/arrow.png") no-repeat -17px -3px;
                    background-size: 174%;
                }

            .banner {
                min-height: 240px;
            }

            .banner-info {
                width: 58%;
                margin: 5em auto 0;
                padding: 1em 0;
            }

            .callbacks_tabs {
                top: 49%;
                z-index: 999;
                left: -3%;
            }

            #plan h4 {
                font-size: 1.2em;
                margin: 0em 0 0.2em 0;
            }

            .grid figure p {
                font-size: 68.5%;
                margin: 0 !important;
                margin-bottom: 6px !important;
                line-height: 13px !important;
                font-size: 0.85em !important;
            }

            .gallery-grid {
                padding: 0;
                float: left;
                width: 100%;
            }

            .textbox h4 {
                font-size: 2em;
                margin-top: 4.5em;
            }

            .footer-grid-left h3 {
                font-size: 2em;
                margin: 0px 0 1em;
                padding: 0.5em 0 0;
            }

            .contact-form {
                margin-top: 2em;
            }

            .test-wrapper img {
                position: absolute;
                left: 36%;
                width: 30%;
                border-top: 3px solid #146eb4;
                border-right: 3px solid #146eb4;
                bottom: -33%;
            }

            .modal-dialog.about {
                width: 400px;
                margin: 10px auto;
            }

            .send input[type="submit"] {
                padding: 0.6em 0.6em;
                font-size: 1em;
            }

            .service-box {
                float: left;
                width: 100%;
                margin-bottom: 5em;
            }
        }

        @media(max-width:375px) {
            .col-md-4 {
                width: 100%;
            }

            p.phonenum {
                float: none;
                font-size: 0.9em;
                font-weight: 600;
                margin-bottom: 10px;
            }

            .ab-left {
                padding: 0;
            }

            span.event-date {
                font-size: 1em;
            }

            #news {
                padding: 2em 0 1em 0;
            }

            .news-img {
                float: none;
                width: 44%;
                padding: 0;
                margin: 0 auto;
                text-align: center;
            }

            #plan h4 {
                font-size: 1em;
                margin: 0em 0 1em 0;
                padding: 0;
            }

            .contact input[type="submit"] {
                padding: 0.6em 0.7em 0.5em;
                font-size: 1em;
                margin: 1em 0 0 0;
                margin: 1em auto 2em;
                width: 35%;
            }

            .test {
                padding: 2em 0 1em 0;
            }

            .modal-dialog.about {
                width: 350px;
                margin: 20px auto;
            }
        }

        @media(max-width:320px) {
            .col-md-4 {
                width: 100%;
            }

            p.top-para {
                font-size: 0.8em;
            }

            textarea {
                width: 100%;
                min-height: 2em;
            }

            input, textarea {
                padding: 0.5em 1em;
            }

                input:focus ~ label, textarea:focus ~ label, input:valid ~ label, textarea:valid ~ label {
                    font-size: 0.9em;
                }

            .ab-right {
                text-align: left;
                padding: 2em 0em 2em 1em;
            }

            span.menu {
                position: absolute;
                top: -55px;
                right: 0px;
            }

            .banner-info {
                width: 62%;
                margin: 3em auto 0;
                padding: 0.8em 0;
            }

                .banner-info h3 {
                    font-size: 1em;
                }

                .banner-info p {
                    font-size: 16px;
                    padding: 0px 10px;
                    margin: 2px 0;
                }

            .banner {
                min-height: 156px;
            }

            .callbacks_tabs {
                top: 37%;
                z-index: 999;
                left: -3%;
            }

            .callbacks_nav.next {
                right: 7%;
            }

            .grid figure p {
                margin: 0 !important;
                margin-bottom: 1px !important;
                line-height: 13px !important;
                font-size: 0.7em !important;
            }

            h3.tittle {
                font-size: 1.6em;
            }

            h5.sub-h {
                font-size: 1em;
                margin: 0.5em 0;
            }

            #plan h4 {
                font-size: 0.9em;
                margin: 0em 0 1em 0;
                padding: 0;
            }

            #plan p {
                color: #fff;
                font-size: 0.8725em;
                line-height: 1.9em;
                margin: 0.5em 0;
            }

            ul.insure li {
                display: block;
                margin: 10px 0;
                font-size: 0.875em;
            }

            .news-text p {
                font-size: 0.875em;
                line-height: 1.9em;
                margin: 0em 0;
            }

            .textbox h4 {
                font-size: 1.6em;
                margin-top: 5em;
            }

            .service-box p {
                font-size: 0.875em;
            }

            .test-grid p {
                font-size: 0.875em;
                line-height: 2em;
                padding: 1em;
            }

            .test-wrapper {
                float: left;
                width: 100%;
                margin-bottom: 7em;
            }

            .test-gr h4 {
                font-size: 1.1em;
            }

            .contact textarea {
                min-height: 7em;
            }

            #contact {
                min-height: 508px;
            }

            .banner-info span {
                font-size: 0.9em;
            }

            .footer-grid-left p {
                font-size: 0.875em;
            }

            .footer-grid-left ul li {
                background: url(../images/2.png) no-repeat 0px 0px;
                display: block;
                padding-left: 4em;
                font-size: 0.875em;
            }

            .news-text h4 {
                font-size: 1em;
            }

            .styled-input label {
                font-size: 1em;
                padding: 0;
            }

            h2.tittle {
                font-size: 1.3em;
            }

            .col-bottom h4 {
                font-size: 1.1em;
            }

            .test {
                padding: 2em 0 1em 0;
            }

            .modal-dialog.about {
                width: 300px;
                margin: 10px auto;
            }
        }
        /*--//responsive-
            /*--contact--*/
        .contact {
            padding: 4em 4em;
            background: #fff;
            margin: 3em 0;
            border-radius: 0px 0px 22px 22px;
            text-align: center;
        }

        .contact-top {
            margin-bottom: 5em;
        }

        .contact h3 {
            color: #F9C426 !important;
            font-size: 2em;
            margin: 0;
            text-transform: uppercase;
        }

        .col-md-4 p, table, .row p {
            font-size: 1em !important;
            line-height: 1.8em;
            color: #3c3930;
            margin: 1em 0;
        }

        .contact p {
            font-size: 1em;
            line-height: 1em;
            color: #3c3930;
            margin: 1em 0;
        }

        .contact p {
            width: 60%;
            margin: 1em auto;
        }

        .contact input[type="text"], .contact textarea {
            width: 100%;
            padding: 1em;
            margin: 0.5em 0;
            background: none;
            outline: none;
            border: 1px solid #A09F9F;
            font-size: 1em;
            color: #A09F9F;
            -webkit-appearance: none;
            border-radius: 6px;
        }

        .contact textarea {
            resize: none;
            min-height: 270px;
        }

        .send input[type="submit"]:hover {
            background: #3c3930;
        }

        .send input[type="submit"] {
            font-size: 1.1em;
            background: #ed4f2e;
            padding: 0.5em 2em;
            text-align: center;
            color: #fff;
            border: none;
            outline: none;
            -webkit-appearance: none;
            border-radius: 6px;
        }

        .contact-left {
            padding-left: 0;
        }

        .contact-right {
            padding-right: 0;
        }
        /*--contact--*/
        .footer-top {
            padding: 5em 0;
            background: #1f2c33;
        }

            .footer-top h3 {
                font-size: 1.3em;
                color: #F9C426 !important;
                text-transform: uppercase;
                margin-bottom: 1.5em;
            }

        .foot-left h2 {
            font-size: 2.5em;
            font-family: 'Roboto Condensed', sans-serif;
        }

            .foot-left h2 a {
                color: #ed4f2e;
                text-decoration: none;
            }

        p {
            margin: 0;
            font-size: 1.4em;
        }

        .footer-top p {
            font-size: 1em;
            color: #a3b1bf;
            margin: 1em 0;
            line-height: 1.5em;
        }

        .footer {
            background: #283645;
            padding: 1em 0;
            text-align: center;
        }

            .footer p {
                color: #fff;
                font-size: 1em;
            }

                .footer p a {
                    color: #fff;
                }

                    .footer p a:hover {
                        color: #0000FF;
                    }

        .contact-btm span {
            color: #a3b1bf;
            font-size: 1.2em;
            display: inline-block;
            vertical-align: middle;
        }

        .contact-btm p {
            display: inline-block;
            vertical-align: middle;
            color: #a3b1bf;
            margin: 0 0 0 10px;
        }

        .contact-btm {
            margin-bottom: 0.5em;
        }

            .contact-btm p a {
                color: #a3b1bf;
            }

                .contact-btm p a:hover {
                    color: #ed4f2e;
                }

        .foot-left ul {
            margin: 0;
        }

        .foot-left li {
            /*float: left;*/
            margin-left: -5%;
            list-style: none;
        }

            .foot-left li > a:after {
                content: ' for sale';
            }

        .forSale li > a:after {
            content: ' ' !important;
        }

        .foot-left li > a:before {
            content: ' » ';
            font-size: 18px;
        }

        .foot-left li > a:hover {
            text-decoration: none;
        }

        .foot-left input[type="text"] {
            width: 100%;
            color: #fff;
            background: none;
            padding: 10px 10px;
            outline: none;
            border: 1px solid #fff;
            font-size: 13px;
            margin-bottom: 1em;
            border-radius: 6px;
        }

        .foot-left form input[type=submit] {
            color: #fff;
            padding: 7px 21px;
            font-size: 15px;
            cursor: pointer;
            background: #ed4f2e;
            margin: 4px 0 0 0px;
            outline: none;
            border: none;
            border-radius: 6px;
        }

            .foot-left form input[type=submit]:hover {
                background: #3c3930;
                color: #fff;
                transition: 0.5s all ease;
                -webkit-transition: 0.5s all ease;
                -moz-transition: 0.5s all ease;
                -o-transition: 0.5s all ease;
                -ms-transition: 0.5s all ease;
            }

        nav {
            padding-top: 30px;
        }

        .ready {
            display: none;
        }
        .wrapper-header {
            background-color: #1C3E97 !important;
            margin: 0;
            padding: 0;
            display:table;
            width:100%;
        }



        .a li a::after {
            content: "" !important;
        }

        .social-icons i 
        {
            width: 20px;
            height: 20px;
            background: url('../images/img-sprite.png') no-repeat 0px 0px;
            display: inline-block;
        }

            .social-icons i:hover {
                color: yellow !important;
            }

        ul.social-icons2 {
            display: block;
            padding: 0;
        }

        .social-icons2 li {
            display: inline-block;
        }

            .social-icons2 li a {
                background: url('../images/social-icons.png') no-repeat 1px -31px #4D669C;
                display: block;
                height: 30px;
                width: 30px;
                margin-right: 1em;
                -webkit-transition: .5s all;
                transition: .5s all;
                -moz-transition: .5s all;
                margin-right: 1em;
                -webkit-transition: .5s all;
                transition: .5s all;
                -moz-transition: .5s all;
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
                -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
                -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
                -o-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
                -ms-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
            }

                .social-icons2 li a.fb {
                    background: url('../images/social-icons.png') no-repeat 2px 2px #63CEF7;
                }

                .social-icons2 li a.in {
                    background: url('../images/social-icons.png') no-repeat 3px -63px #FF6347;
                }

                .social-icons2 li a.dott {
                    background: url('../images/social-icons.png') no-repeat 1px -95px #ea4c89;
                }

                .social-icons2 li a:hover::before {
                    border-color: #00FFFF;
                }

                .social-icons2 li a:hover {
                    border-radius: 50%;
                    -webkit-border-radius: 50%;
                    -moz-border-radius: 50%;
                    -o-border-radius: 50%;
                }

        .search {
            border-bottom: 1px solid #676979;
            padding: 0;
        }

            .search .box {
                outline: none;
                padding: 8px 0px 8px 34px;
                background: none;
                width: 100%;
                border: none;
                font-size: 0.9em;
                color: #777;
            }

            .search .button {
                border: none;
                cursor: pointer;
                position: absolute;
                outline: none;
                top: 10px;
                left: 0px;
                background: url(http://asapproperties.co.za/images/search.png)no-repeat 0px 0px;
                width: 25px;
                height: 25px;
                padding: 0;
            }

        a i.facebook; {
            background-position: 5px 3px;
        }

        a i.facebook:hover {
            background-position: 5px -17px;
        }

        a i.twitter {
            background-position: -20px 3px;
        }

            a i.twitter:hover {
                background-position: -20px -17px;
            }

        a i.google-plus {
            background-position: -48px 3px;
        }

            a i.google-plus:hover {
                background-position: -48px -17px;
            }

        ul.f-icons {
            float: left;
            margin-top: 0.7em;
        }

            ul.f-icons li {
                list-style: none;
                display: inline-block;
                margin-right: 1em;
            }

                ul.f-icons li a.facebook, ul.f-icons li a.p, ul.f-icons li a.twitter, ul.f-icons li a.isto {
                    background: url(../images/3.png) no-repeat 8px 1px;
                    display: inline-block;
                    width: 22px;
                    height: 22px;
                }

                    ul.f-icons li a.facebook:hover {
                        background: url('http://asapproperties.co.za/images/social.png') no-repeat 8px -20px;
                    }

                ul.f-icons li a.p {
                    background: url('http://asapproperties.co.za/images/social.png') no-repeat -46px 1px;
                }

                    ul.f-icons li a.p:hover {
                        background: url(http://asapproperties.co.za/images/social.png) no-repeat -46px -20px;
                    }

                ul.f-icons li a.twitter {
                    background: url(http://asapproperties.co.za/images/social.png) no-repeat -18px 1px;
                }

                    ul.f-icons li a.twitter:hover {
                        background: url(http://asapproperties.co.za/images/social.png) no-repeat -18px -20px;
                    }

                ul.f-icons li a.isto {
                    background: url(http://asapproperties.co.za/images/social.png) no-repeat -130px 1px;
                }

                    ul.f-icons li a.isto:hover {
                        background: url(http://asapproperties.co.za/images/social.png) no-repeat -130px -20px;
                    }

        /*--responsive-design--*/
        @media screen and (max-width: 1280px) {
            .banner-info {
                margin: 11em 0 0;
            }

            .banner {
                min-height: 620px;
            }
        }
        /*--responsive-design--*/
        @media screen and (max-width: 1024px) {
            .banner-info h3 {
                font-size: 3em;
            }

            .banner-info h3 {
                font-size: 1.5em;
            }

            .banner {
                min-height: 530px;
            }

            .services p {
                font-size: 0.9em;
            }

            .services {
                padding: 2em 1em;
            }

            .ser-top {
                margin-bottom: 3em;
            }

            .pri-cing {
                padding: 2em 1em;
            }

                .pri-cing p {
                    font-size: 0.9em;
                }

            a.button {
                width: 50%;
            }

            .pricing-table {
                margin: 0em 0;
            }

            .portfolio p {
                font-size: 0.9em;
            }

            .proj-top {
                margin-bottom: 3em;
            }

            .prc-top {
                margin-bottom: 3em;
            }

            i.plus.second {
                margin: 2.5em 5em;
            }

            .happy p {
                font-size: 1.2em;
            }

            .happy-left {
                min-height: 450px;
                padding: 4em 0 0;
            }

            .happy-right {
                min-height: 450px;
                padding: 4em 0 0;
            }

            .contact p {
                font-size: 0.9em;
            }

            .contact-top {
                margin-bottom: 3em;
            }

            .contact {
                padding: 2em 1em;
            }

            .footer-top p {
                font-size: 0.9em;
            }

            .contact-btm p {
                margin: 0 0 0 5px;
            }

            .footer-top {
                padding: 3em 0;
            }

            .portfolio {
                padding: 2em 1em;
            }

            .navbar-nav {
                margin-left: 2em;
            }

            .banner-info {
                margin: 11em 0 0;
            }
        }
        /*--responsive-design--*/
        @media screen and (max-width: 991px) {
            .banner-info {
                margin: 7em 0 0;
            }

                .banner-info h3 {
                    font-size: 1.2em;
                }

                .banner-info h3 {
                    font-size: 2.5em;
                }

            .banner {
                min-height: 450px;
            }

            .ser-left {
                float: left;
                width: 50%;
            }

            .pricing {
                width: 48%;
                margin-bottom: 2%;
            }

            .ready {
                min-height: 283px;
                padding: 4em 0;
            }

            .gallery-left {
                float: left;
                width: 50%;
            }

            i.plus.second {
                margin: 3.5em 5em;
            }

            .happy-left {
                min-height: 400px;
            }

            .happy-right {
                min-height: 350px;
            }

            .contact-left {
                float: left;
                width: 50%;
            }

            .contact-right {
                float: left;
                width: 50%;
            }

            .foot-left {
                float: left;
                width: 50%;
                margin-bottom: 2em;
            }

            a.navbar-brand {
                font-size: 40px;
            }

            .navbar-default .navbar-nav > li > a {
                font-size: 15px;
            }

            .nav > li > a {
                padding: 10px 8px;
            }

            .navbar-nav {
                margin-left: 0em;
            }

            .social ul li {
                margin: 0 0px;
            }

            .banner-info h3 {
                font-size: 2.2em;
            }

            .ser-left {
                float: left;
                width: 33.33%;
            }

            a.button {
                width: 70%;
            }

            .gallery-left {
                float: left;
                width: 50%;
            }

            .happy-left {
                min-height: 400px;
            }

            .contact-right {
                float: right;
                width: 50%;
            }

            .contact-left {
                float: left;
                width: 50%;
            }

            .happy-right {
                min-height: 330px;
            }

            .foot-left {
                float: left;
                width: 50%;
                margin-bottom: 2em;
            }

            .social {
                padding: 0.4em 0 0;
            }
        }
        /*--responsive-design--*/
        @media screen and (max-width: 640px) {
            .banner-info {
                margin: 6em 0 0;
            }

                .banner-info h3 {
                    font-size: 2em;
                }

            .banner {
                min-height: 390px;
            }

            i.plus.second {
                margin: 2.5em 5em;
            }

            .foot-left {
                padding: 0 10px;
            }

            .services h4 {
                font-size: 1.1em;
            }

            .happy-left {
                padding: 3em 0 0;
            }

            .happy p {
                font-size: 1em;
            }

            .ready h3 {
                font-size: 1.5em;
            }

            .banner-info h3 {
                font-size: 1.7em;
            }
        }
        /*--responsive-design--*/
        @media screen and (max-width: 568px) {
            .header {
                padding: 1em 0 0;
            }

            .banner-info {
                margin: 5em 0 0;
            }

                .banner-info h3 {
                    font-size: 1em;
                }

            .banner {
                min-height: 350px;
            }

            .ser-left {
                float: none;
                width: 100%;
            }

            .prc-top p, .ser-top p, .portfolio p, .contact p {
                width: 100%;
            }

            .ready h3 {
                font-size: 1.5em;
            }

            .ready h4 {
                font-size: 1.4em;
            }

            .ready {
                min-height: 225px;
                padding: 3em 0;
            }

            i.plus.second {
                margin: 1.8em 4em;
            }

            .happy-left {
                min-height: 360px;
                padding: 3em 0 0;
            }

            .happy p {
                font-size: 1em;
                margin: 0 0 1em;
            }

            .happy-right {
                min-height: 300px;
                padding: 3em 0 0;
            }

            .contact-left {
                float: none;
                width: 100%;
                padding: 0;
            }

            .contact-right {
                float: none;
                width: 100%;
                padding: 0;
            }

            .contact textarea {
                resize: none;
                min-height: 180px;
            }

            .foot-left {
                float: none;
                width: 100%;
            }

            .footer-top {
                padding: 2em 0 0;
            }
        }
        /*--responsive-design--*/
        @media screen and (max-width: 480px) {
            .logo h1 {
                font-size: 3em;
            }

            .social {
                padding: 1.2em 0 0;
            }

            .banner-info h3 {
                font-size: 1.4em;
            }

            .banner-info h3 {
                font-size: 0.9em;
            }

            .banner {
                min-height: 330px;
            }

            .banner-info {
                margin: 4em 0 0;
            }

            .services h3, .pri-cing h3, .portfolio h3, .contact h3, .happy h4 {
                font-size: 1.5em;
            }

            .services h4 {
                font-size: 1.2em;
            }

            .pricing {
                width: 100%;
                margin-bottom: 3%;
                margin-right: 0;
            }

            .gallery-left {
                padding: 0 23px;
                width: 100%;
            }

            i.plus.second {
                margin: 4em 4em;
            }

            .happy-right form input[type=submit] {
                font-size: 16px;
                width: 32%;
            }

            .happy-right input[type="text"] {
                width: 90%;
                font-size: 16px;
            }

            .navbar-default {
                padding: 0.4em 0;
            }
        }
        /*--responsive-design--*/
        @media screen and (max-width: 414px) {
            .banner-info h3 {
                font-size: 1.5em;
            }

            .ready h3 {
                font-size: 1.2em;
            }

            .ready {
                min-height: 209px;
                padding: 3em 0;
            }

            i.plus.second {
                margin: 3em 4em;
            }
        }
        /*--responsive-design--*/
        @media screen and (max-width: 384px) {
            i.plus.second {
                margin: 2.2em 4em;
            }

            .happy-right {
                min-height: 260px;
                padding: 3em 0 0;
            }

                .happy-right form input[type=submit] {
                    width: 37%;
                }

            .banner p {
                font-size: 0.9em;
            }

            a.navbar-brand {
                font-size: 35px;
            }
        }
        /*--responsive-design--*/
        @media screen and (max-width: 320px) {
            .social ul li {
                margin: 0 0px;
            }

            .logo h1 {
                font-size: 2.3em;
            }

            .social {
                padding: 0.5em 0 0;
            }

            .header {
                padding: 0.5em 0 0;
            }

            .banner-info h3 {
                font-size: 0.85em;
            }

            .banner-info {
                margin: 5em 0 0;
            }

            .banner {
                min-height: 350px;
            }

            .ser-left {
                padding: 0;
            }

            .ser-top {
                margin-bottom: 1.5em;
            }

            .services h4 {
                font-size: 1.1em;
            }

            .gallery-left {
                padding: 0;
            }

            .happy p {
                font-size: 0.9em;
            }

            .happy-right form input[type=submit] {
                width: 43%;
            }

            .banner-info h3 {
                font-size: 1.1em;
            }

            .footer p {
                font-size: 0.9em;
            }

            a.navbar-brand {
                font-size: 32px;
            }

            .services h3, .pri-cing h3, .portfolio h3, .contact h3, .happy h4 {
                font-size: 1.4em;
            }

            .price-top h4 {
                font-size: 1.3em;
            }
        }