@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/"myriad-pro".ttf');
    src: local('myriad-pro'), url('../fonts/myriad-pro.woff') format('woff'), url('../fonts/myriad-pro.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/RobotoCondensed-Regular.ttf');
    src: local('RobotoCondensed-Regular'), url('../fonts/RobotoCondensed-Regular.woff') format('woff'), url('../fonts/RobotoCondensed-Regular.ttf') format('truetype');
}


h4, h5, h6,
h1, h2, h3 {
    margin-top: 0;
}

ul, ol {
    margin: 0;
}

p {
    margin: 0;
}

html, body {
    font-family: Myriad Pro;
    font-size: 100%;
    background: #fff;
}

a:hover {
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
}
/*--header start here--*/
.header {
    background: rgba(37, 46, 56, 0.7) none repeat scroll 0 0;
    width: 100%;
    position: absolute;
    z-index: 99999;
}

.top-div-sty {
    background: #0e9bb6;
    padding: 2px 0;
}

    .top-div-sty ul {
        margin: 0;
        padding: 0;
    }


        .top-div-sty ul li {
            list-style: none;
            font-size: 14px;
            color: #fff;
        }

            .top-div-sty ul li a {
                list-style: none;
                font-size: 16px;
                color: #fff;
            }

.logo {
    float: left;
    width: 36%;
    margin: 0.3em 0em 0em 0em;
}

.head-right {
    float: right;
}

.top-nav {
    float: left;
}

    .top-nav ul {
        padding: 0px;
        list-style: none;
    }

        .top-nav ul li {
            display: inline-block;
            float: left;
            margin-left: 1px;
        }

            .top-nav ul li a {
                font-size: 1.1em;
                font-weight: 400;
                color: #fff;
                text-decoration: none;
                padding: 1.6em 0.6em 1.6em 0.6em;
                font-family: Roboto;
                display: block;
                position: relative;
            }

                .top-nav ul li a:hover, .top-nav ul li a.active {
                    background: #0ab2d2;
                    color: #fff;
                }

span.menu {
    display: none;
}

.social {
    float: left;
}

    .social ul {
        margin: 2em 0em 0em 0em;
        list-style: none;
        padding: 0;
    }

        .social ul li {
            display: inline-block;
            margin: 0px 10px 0px 0px;
        }

            .social ul li a {
                background: url(../images/social-sprit.png)no-repeat;
                width: 20px;
                height: 20px;
                display: inline-block;
            }

                .social ul li a.fa {
                    background-position: 5px 0px;
                }

                .social ul li a.tw {
                    background-position: -18px 0px;
                }

                .social ul li a.p {
                    background-position: -39px 0px;
                }

                .social ul li a.fa:hover {
                    background-position: 5px -25px;
                }

                .social ul li a.tw:hover {
                    background-position: -18px -25px;
                }

                .social ul li a.p:hover {
                    background-position: -39px -25px;
                }
/*--search--*/
.search-box {
    position: relative;
    margin-top: 1.8em;
}

.sb-search {
    position: absolute;
    right: 0%;
    top: 0%;
    width: 0%;
    min-width: 42px;
    height: 40px;
    float: right;
    overflow: hidden;
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    transition: width 0.3s;
    -webkit-backface-visibility: hidden;
    z-index: 999;
}

.sb-search-input {
    position: absolute;
    top: 2.5px;
    right: 6px;
    border: none;
    outline: none;
    background: #0ab2d2;
    width: 85%;
    height: 35px;
    margin: 0;
    z-index: 10;
    padding: 5px 15px;
    font-size: 13px;
    color: #ffffff;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -o-border-radius: 50px;
}

    .sb-search-input::-webkit-input-placeholder {
        color: #ffffff;
    }

    .sb-search-input:-moz-placeholder {
        color: #ffffff;
    }

    .sb-search-input::-moz-placeholder {
        color: #efb480;
    }

    .sb-search-input:-ms-input-placeholder {
        color: #ffffff;
    }

.sb-icon-search, .sb-search-submit {
    width: 30px;
    height: 40px;
    display: block;
    position: absolute;
    right: 5px;
    top: -22%;
    padding: 0;
    margin: 0;
    line-height: 71px;
    text-align: center;
    cursor: pointer;
}

.sb-search-submit {
    background: url('../images/search.png') no-repeat -7px 10px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
    filter: alpha(opacity=0); /* IE 5-7 */
    color: transparent;
    border: none;
    outline: none;
    z-index: -1;
    -webkit-appearance: none;
}

.sb-icon-search {
    background: url('../images/search.png') no-repeat 3px 10px;
    z-index: 90;
    width: 40px;
    height: 51px;
    border-radius: 50px;
}
/* Open state */
.sb-search.sb-search-open, .no-js .sb-search {
    width: 35%;
}

    .sb-search.sb-search-open .sb-icon-search, .no-js .sb-search .sb-icon-search {
        background: url('../images/search.png') no-repeat 3px 10px;
        color: #fff;
        z-index: 11;
    }

    .sb-search.sb-search-open .sb-search-submit, .no-js .sb-search .sb-search-submit {
        z-index: 90;
    }
/*--search--*/
/*--header end here--*/
/*--banner start here--*/
.banner {
    background: url(../images/ban.jpg)no-repeat;
    min-height: 560px;
    background-size: cover;
}

.banner-main {
    padding: 0em;
    text-align: center;
    position: relative;
}

    .banner-main h3 {
        font-size: 4em;
        font-weight: 500;
        color: #fff;
        font-family: 'Lora', serif;
    }

    .banner-main p {
        font-size: 1.8em;
        font-weight: 600;
        color: #0ab2d2;
        font-family: 'Lora', serif;
        font-style: italic;
    }

.bann-btn {
    float: center;
    margin: 2em 0em 0em 0em;
}

    .bann-btn a {
        background: #0ab2d2;
        font-size: 1em;
        color: #fff;
        padding: 0.5em 1.5em;
        border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -o-border-radius: 6px;
        text-decoration: none;
        font-family: 'Lora', serif;
    }

        .bann-btn a:hover {
            background: #ffffff;
            color: #000;
        }

.banner-strip {
    background: #0ea0bc;
    padding: 1.5em 0em 1.5em 0em;
    text-align: center;
}

    .banner-strip h3 {
        font-size: 1.8em;
        font-weight: 400;
        color: #fff;
        display: inline-block;
        text-align: center;
        font-family: Roboto;
        margin: 0.2em 0em 0em 0em;
    }

    .banner-strip p {
        font-size: 1em;
        font-weight: 400;
        color: #fff;
        font-family: 'Myriad Pro';
    }

.bann-strip-btn {
    float: right;
}

    .bann-strip-btn a {
        background: #252e38;
        font-size: 1em;
        color: #fff;
        padding: 0.5em 1.5em;
        border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -o-border-radius: 6px;
        text-decoration: none;
        font-family: 'Lora', serif;
    }

        .bann-strip-btn a:hover {
            background: #ffffff;
            color: #000;
        }
/*--- slider-css --*/
.slider {
    position: relative;
}

.rslides {
    position: relative;
    list-style: none;
    width: 100%;
    padding: 0;
    margin: 0;
    max-height: 560px;
}

    .rslides li {
        -webkit-backface-visibility: hidden;
        position: absolute;
        display: none;
        width: 100%;
        left: 0;
        top: 0;
    }

        .rslides li:first-child {
            position: relative;
            display: block;
            float: left;
        }

    .rslides img {
        display: block;
        height: auto;
        float: left;
        width: 100%;
        border: 0;
        max-height: 560px;
    }


span.bg-small {
    background: rgba(0, 0, 0, 0.39);
    display: block;
    width: 40%;
    height: 48px;
    position: absolute;
    top: 83px;
    left: -40px;
}

span.bg-large {
    background: rgba(0, 0, 0, 0.39);
    display: block;
    width: 60%;
    height: 70px;
    position: absolute;
    top: 194px;
    left: -40px;
}

a.morebtn {
    background: #3D3D3D;
    padding: 0.8em 0;
    display: block;
    font-size: 0.875em;
    text-transform: uppercase;
    color: #FFF;
    width: 20%;
    margin: 0 auto;
    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;
}

    a.morebtn:hover {
        background: #585686;
    }

.callbacks_nav {
    position: absolute;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    top: 85.5%;
    left: -15%;
    opacity: 0.7;
    z-index: 3;
    text-indent: -9999px;
    overflow: hidden;
    text-decoration: none;
    height: 48px;
    width: 45px;
    background: url("../images/4.png") no-repeat left top;
    margin-top: 22%;
    border-radius: 100%;
    margin-right: 20px;
}

    .callbacks_nav.next {
        left: auto;
        background: url("../images/3.png") no-repeat left top;
        right: -15%;
    }
/*--banner end here--*/
/*--banner strip start here--*/
/* Shutter Out Horizontal */
.hvr-shutter-out-horizontal {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

    .hvr-shutter-out-horizontal:before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-radius: 5px;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: 50%;
        transform-origin: 50%;
        -webkit-transition-property: transform;
        transition-property: transform;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }

    .hvr-shutter-out-horizontal:hover, .hvr-shutter-out-horizontal:focus, .hvr-shutter-out-horizontal:active {
        color: white;
    }

        .hvr-shutter-out-horizontal:hover:before, .hvr-shutter-out-horizontal:focus:before, .hvr-shutter-out-horizontal:active:before {
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
        }
/*--banner strip end here--*/
/*--services start here--*/


.icon-box {
    background-color: #f5f5f5;
    text-align: center;
    padding: 30px 0;
    border: 1px solid #f1f1f1;
}

    .icon-box h3 {
        color: rgb(52, 52, 52);
    }

    .icon-box p {
        font-size: 14px;
    }

    .icon-box .icon-box-icon i {
        position: relative;
        z-index: 10;
        color: #0ab2d2;
    }

    .icon-box .icon-box-icon {
        background: #fff;
    }

    .icon-box .read-more-link-container {
        bottom: -12px;
        left: 0;
        position: absolute;
        width: 100%;
    }

.read-more-link {
    background-color: rgb(255, 255, 255);
}

.read-more-link {
    background-color: rgb(81, 187, 229);
    border-color: rgb(81, 187, 229);
    color: rgb(255, 255, 255);
    font-family: "Montserrat",sans-serif;
    font-size: 14px;
    font-weight: bold;
    padding: 12px 18px;
    text-transform: uppercase;
}

    .read-more-link:hover {
        color: #fff;
        text-decoration: none;
    }

.services-bottom {
    margin-bottom: 27px;
}


*::after, *::before {
    box-sizing: border-box;
}

.icon-box .icon-box-icon::after {
    border: 2px solid rgb(150, 150, 150);
    border-radius: 50%;
    content: "";
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transition: all 0.6s ease-out 0s;
    width: 100%;
}

*::after, *::before {
    box-sizing: border-box;
}

.icon-box .icon-box-icon {
    border-radius: 50%;
    color: rgb(150, 150, 150);
    font-size: 50px;
    height: 150px;
    line-height: 150px;
    margin: 0 auto 26px;
    position: relative;
    transition: all 0.3s ease-out 0s;
    width: 150px;
}

    .icon-box .icon-box-icon::after {
        border: 2px solid rgb(150, 150, 150);
        border-radius: 50%;
        content: "";
        height: 100%;
        left: 0;
        pointer-events: none;
        position: absolute;
        top: 0;
        transition: all 0.6s ease-out 0s;
        width: 100%;
    }


.icon-box:hover .icon-box-icon {
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moj-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    background: #0fc1e3;
}

    .icon-box:hover .icon-box-icon i {
        color: #fff;
    }


.services-top {
    text-align: center;
    padding: 2em 0em 0em 0em;
}

.row {
    padding: 2em 0em 2em 0em;
}

.thumbnail {
    border: none;
    padding: 0px;
}

    .thumbnail .caption {
        padding: 0px;
        color: #333;
    }

.caption p {
    margin: 0em 0 0.5em 0;
    color: #95928d;
    font-size: 16px;
}

.caption a h3 {
    color: #000;
    margin: 0.4em 0em 0.25em 0em;
    font-size: 20px;
    font-weight: 700;
    line-height: 1em;
    font-family: 'Lora', serif;
    text-decoration: none;
}

.caption a {
    text-decoration: none;
}

.caption h3:hover {
    color: #0ab2d2;
}

.services-top h3 {
    font-size: 2em;
    font-weight: 600;
    color: #484848;
    margin: 0px 0px 0px 0px;
    font-family: 'Lora', serif;
}

.services-top p {
    font-size: 1.2em;
    font-weight: 400;
    color: #95928d;
    font-family: 'Lora', serif;
    font-style: italic;
}
/*--services end here--*/
/*--features start here--*/
.features {
    padding: 2.5em 0em 3em 0em;
}

.features-top {
    text-align: center;
    padding: 0em 0em 3em 0em;
}

    .features-top h3 {
        font-size: 2em;
        font-weight: 600;
        color: #484848;
        margin: 0px 0px 0px 0px;
        font-family: 'Lora', serif;
    }

    .features-top p {
        font-size: 1.2em;
        font-weight: 400;
        color: #95928d;
        font-family: 'Lora', serif;
        font-style: italic;
    }

.featu-right {
    padding: 1.5em 0em 0em 0em;
}

    .featu-right h3 {
        font-size: 1.5em;
        font-weight: 500;
        color: #000;
        margin: 0px 0px 7px 0px;
        font-family: 'Lora', serif;
    }

    .featu-right p {
        font-size: 1em;
        font-weight: 400;
        color: #95928d;
        line-height: 1.6em;
    }

.featu-btn {
    margin: 1em 0em 0em 0em;
}

    .featu-btn a {
        font-size: 1.1em;
        font-weight: 400;
        color: #0ab2d2;
        text-decoration: underline;
    }

        .featu-btn a:hover {
            color: #777;
            text-decoration: none;
        }
/*--features end here--*/
/*--effect start here--*/
.effet-main {
    padding: 2em 0em 2em 0em;
    border-bottom: 1px solid #e1e1e1;
    border-top: 1px solid #e1e1e1;
}

.effec-top {
    text-align: center;
    padding: 0em 0em 3em 0em;
}

    .effec-top h3 {
        font-size: 2em;
        font-weight: 600;
        color: #484848;
        margin: 0px 0px 0px 0px;
        font-family: 'Lora', serif;
    }

    .effec-top p {
        font-size: 1.2em;
        font-weight: 400;
        color: #95928d;
        font-family: 'Lora', serif;
        font-style: italic;
    }

.effec-left {
    padding: 1.5em 0em 0em 0em;
}

    .effec-left h3 {
        font-size: 1.5em;
        font-weight: 500;
        color: #000;
        margin: 0px 0px 7px 0px;
        font-family: 'Lora', serif;
    }

    .effec-left p {
        font-size: 1em;
        font-weight: 400;
        color: #95928d;
        line-height: 1.6em;
    }

.effec-btn a {
    font-size: 1.1em;
    font-weight: 400;
    color: #0ab2d2;
    text-decoration: underline;
}

    .effec-btn a:hover {
        color: #777;
        text-decoration: none;
    }

.effec-btn {
    margin: 1em 0em 0em 0em;
}
/*--effect end here--*/
/*--project start here--*/
.project-top {
    text-align: center;
    padding: 0em 0em 3em 0em;
}

    .project-top h3 {
        font-size: 2em;
        font-weight: 600;
        color: #484848;
        margin: 0px 0px 0px 0px;
        font-family: 'Lora', serif;
    }

    .project-top p {
        font-size: 1.2em;
        font-weight: 400;
        color: #95928d;
        font-family: 'Lora', serif;
        font-style: italic;
    }

.project-main {
    padding: 2em 0em 2em 0em;
    border-bottom: 1px solid #e1e1e1;
    border-top: 1px solid #e1e1e1;
    margin-top: 10px;
}

.project-details {
    text-align: center;
}

    .project-details h4 {
        font-size: 1.2em;
        font-weight: 400;
        color: #000;
        margin: 6px 0px 5px 0px;
    }

    .project-details p {
        font-size: 1em;
        font-weight: 400;
        color: #95928d;
    }
/*--light-box--*/
.project-eff:hover span.rollover1 {
    background: url(../images/plus.png) center no-repeat rgba(11, 10, 9, 0.66);
    cursor: pointer;
    height: 250px;
    width: 255px;
    display: block;
    position: absolute;
    z-index: -9999px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.project-eff {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    position: relative;
}

/*--project end here--*/
/*--clients start here--*/
.clients-main {
    padding: 2em 0em 4em 0em;
}

.clients-top {
    text-align: center;
    padding: 0em 0em 3em 0em;
}

    .clients-top h3 {
        font-size: 2em;
        font-weight: 600;
        color: #484848;
        margin: 0px 0px 0px 0px;
        font-family: 'Lora', serif;
    }

    .clients-top p {
        font-size: 1.2em;
        font-weight: 400;
        color: #95928d;
        font-family: 'Lora', serif;
        font-style: italic;
    }

span.clien-hding {
    font-weight: 400;
    font-size: 1em;
}

span.heart-beet {
    background: #95928d;
    width: 370px;
    height: 1px;
    display: inline-block;
    margin: 15px 0px 5px 0px;
}

.clients-bottom {
    text-align: center;
}

    .clients-bottom p {
        font-size: 1em;
        font-weight: 400;
        color: #95928d;
        line-height: 1.6em;
        width: 80%;
        margin: 0 auto;
    }

    .clients-bottom h4 {
        font-size: 1.2em;
        font-weight: 600;
        color: #000;
        margin: 0px;
        font-family: 'Lora', serif;
    }
/**--**/
.slider1 {
    position: relative;
}

.rslides1 {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
}

    .rslides1 li {
        -webkit-backface-visibility: hidden;
        position: absolute;
        display: none;
        width: 100%;
        left: 0;
        top: 0;
    }

        .rslides1 li:first-child {
            position: relative;
            display: block;
            float: left;
        }

    .rslides1 img {
        display: block;
        height: auto;
        float: left;
        width: 100%;
        border: 0;
    }

.callbacks_tabs a:after {
    content: "\f111";
    font-size: 0;
    font-family: FontAwesome;
    visibility: visible;
    display: block;
    height: 18px;
    width: 18px;
    display: inline-block;
    border: 2px solid #fff;
    border-radius: 19px;
}

.callbacks_tabs a:before {
    content: "\f111";
    font-size: 0;
    font-family: FontAwesome;
    visibility: visible;
    display: block;
    height: 17px;
    width: 1.5px;
    background: #FFF;
    position: absolute;
    left: 57px;
}

.callbacks_here a:after {
    background: #A67C52;
}

.callbacks_tabs li:nth-child(1) a:before {
    content: none;
}

.callbacks_tabs a {
    visibility: hidden;
}

.callbacks_tabs li {
    display: block;
}

ul.callbacks_tabs.callbacks1_tabs {
    position: absolute;
    bottom: 14px;
    z-index: 999;
    right: 19px;
    top: 300px;
}
/*--clients end here--*/
/*--purchase start here--*/
.purchase-left h3 {
    font-size: 1.5em;
    font-weight: 600;
    color: #fff;
    margin: 0px 0px 5px 0px;
}

.purchase {
    background: #0ab2d2;
    padding: 2em 0em 2em 0em;
}

.purchase-left a {
    font-size: 1.2em;
    font-weight: 400;
    color: #fff;
    font-style: italic;
    font-family: 'Lora', serif;
    text-decoration: underline;
}

    .purchase-left a:hover {
        text-decoration: none;
    }

.purchase-left {
    float: left;
}

.purchase-right a {
    background: #252e38;
    font-size: 1em;
    color: #fff;
    padding: 0.5em 1.5em;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    text-decoration: none;
    font-family: 'Lora', serif;
}

    .purchase-right a:hover {
        background: #fff;
        color: #000;
        text-decoration: none;
    }

.purchase-right {
    float: right;
    margin: 1em 0em 0em 0em;
}
/*--purchase end here--*/
/*--footer start here--*/
.footer {
    background: #252e38;
}

.footer-banner {
    background: url(../images/banner-footer-img.png) no-repeat center;
    height: 65px;
}

.footer-main {
    padding: 2em 0em 2em 0em;
}

.footer-grid h3 {
    font-size: 1.3em;
    font-weight: 400;
    color: #fff;
    margin: 0px 0px 15px 0px;
}

.footer-grid p {
    font-size: 0.9em;
    font-weight: 400;
    color: #fff;
    line-height: 1.6em;
    padding: 0 25px 0 0px;
}

.footer-grid a p {
    font-size: 0.8em;
    font-weight: 400;
    color: #b6bdc0;
    line-height: 1.6em;
    text-decoration: none;
}

    .footer-grid a p:hover {
        color: #fff;
    }

.ftr-sub-gd {
    padding: 0.5em 0em 0.5em 0em;
    border-bottom: 1px solid #32484f;
}

.ftr-gd2-img {
    padding: 0px;
}

.ftr-gd2-text h4 {
    font-size: 0.9em;
    font-weight: 400;
    color: #fff;
    margin: 0px 0px 3px 0px;
}

.ftr-gd2-text a:hover {
    text-decoration: none;
}

.ftr-gd2-text h4:hover {
    color: #0ab2d2;
}

.ftr-gd2-text {
    padding: 0px;
}

.footer-grid ul {
    padding: 0px;
    list-style: none;
}

    .footer-grid ul li {
        display: block;
        padding: 0em 0em 0.1em 0em;
    }

        .footer-grid ul li a {
            font-size: 0.9em;
            font-weight: 400;
            color: #fff;
            margin: 0px;
        }

            .footer-grid ul li a:hover {
                text-decoration: none;
                color: #0ab2d2;
            }

.ftr-gd4-1 {
    padding: 0px;
}

.ftr-gd4-img {
    margin: 0px 0px 7px 0px;
}
/*--footer end here--*/
/*--copy right start here--*/
.copy-left {
    float: left;
}

.copy-right {
    float: right;
}

    .copy-right ul {
        padding: 0px;
        list-style: none;
    }

        .copy-right ul li {
            display: inline-block;
            margin: 0px 5px 0px 5px;
        }

            .copy-right ul li a {
                font-size: 1em;
                font-weight: 400;
                color: #fff;
                text-decoration: none;
            }

                .copy-right ul li a:hover {
                    color: #000;
                    text-decoration: none;
                }

.copyright {
    background: #2e3741;
    padding: 0.60em 0em 0.80em 0em;
    border-top: 1px solid #565656;
}

.copy-left p {
    font-size: 0.90em;
    font-weight: 400;
    color: #fff;
}

    .copy-left p a {
        font-size: 1em;
        font-weight: 400;
        color: #000;
    }

        .copy-left p a:hover {
            color: #fff;
            text-decoration: none;
        }
/*--copy right end here--*/
/*--start-about--*/
.about {
    padding: 3em 0px 2em 0px;
}

.about-top {
    padding: 0px 0px 0px 15px;
}

    .about-top h3 {
        font-size: 2em;
        color: #0ab2d2;
        font-weight: 600;
        margin: 0px 0px 0px 0px;
        text-align: left;
        font-family: 'Lora', serif;
    }

    .about-top h5 {
        font-size: 18px;
        font-weight: 400;
        line-height: 1.4em;
        margin: 7px 0px 10px 0px;
        color: #010101;
        font-family: 'Lora', serif;
    }

    .about-top p {
        font-size: 16px;
        line-height: 1.6em;
        color: #959191;
        margin: 4px 0px 0px 0px;
    }

.about-text-left a h5 {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4em;
    margin: 7px 0px 0px 0px;
    color: #010101;
    font-family: 'Lora', serif;
    text-decoration: none;
}

.about-text-left a:hover {
    text-decoration: none;
}

.about-text-left h5:hover {
    color: #0ab2d2;
}

.about-text-left p {
    font-size: 16px;
    line-height: 1.6em;
    color: #959191;
    margin: 4px 0px 0px 0px;
}

.about-text-left img {
    width: 100%;
}

.about-text {
    margin-top: 2.5em;
}
/*--end-about--*/
/*--start-team--*/
.team-main h3 {
    font-size: 1.8em;
    color: #777;
    font-weight: 600;
    margin: 0px 0px 0px 15px;
    text-align: left;
    font-family: 'Lora', serif;
}

.team-main {
    text-align: center;
}

.team {
    padding: 1em 0px 4em 0px;
}

.team-top {
    margin-top: 3em;
}

.team-details h4 {
    font-size: 1.15em;
    font-weight: 700;
    color: #000;
    margin: 0;
    font-family: 'Lora', serif;
}

.team-details p {
    color: #95928d;
    font-size: 16px;
    font-weight: 500;
    margin-top: 8px;
    width: 100% !important;
}

.team-details {
    margin-top: 15px;
}
/*--end-team--*/
/*--blog start here--*/
.blog {
    padding: 3em 0em 2em 0em;
}

.blog-top {
    text-align: center;
    padding: 0em 0em 2em 0em;
}

    .blog-top h3 {
        font-size: 2em;
        font-weight: 600;
        color: #0ab2d2;
        font-family: 'Lora', serif;
    }

    .blog-top p {
        font-size: 1em;
        font-weight: 400;
        color: #979191;
        line-height: 1.6em;
        width: 70%;
        margin: 0 auto;
    }

.blog-detail a h3 {
    font-size: 1.4em;
    font-weight: 700;
    color: #000;
    padding: 6px 0px 9px 0px;
    font-family: 'Lora', serif;
    text-decoration: none;
}

.blog-detail a:hover {
    text-decoration: none;
}

.blog-detail a h3:hover {
    color: #0ab2d2;
    text-decoration: none;
}

.blog-detail h4 {
    font-size: 1em;
    font-weight: 400;
    color: #999;
}

    .blog-detail h4 a {
        font-size: 1em;
        font-weight: 400;
        color: #999;
    }

        .blog-detail h4 a:hover {
            color: #000;
            text-decoration: none;
        }

span.blog-clr {
    color: #0ab2d2;
    font-weight: 700;
}

.blog-detail p {
    font-size: 1em;
    font-weight: 400;
    color: #95928d;
    line-height: 1.6em;
    width: 90%;
}

.blog-btn {
    margin: 1em 0em 0em 0em;
}

    .blog-btn a {
        color: #0ab2d2;
        text-decoration: underline;
        font-size: 1em;
        font-weight: 400;
    }

        .blog-btn a:hover, a.blog-clr:hover {
            color: #000;
            text-decoration: none;
        }

.blog-cate ul {
    padding: 0px;
    list-style: none;
}

    .blog-cate ul li {
        display: block;
        margin: 10px 0px 10px 0px;
        padding: 0px 0px 10px 0px;
        border-bottom: 1px dashed #999;
    }

        .blog-cate ul li a {
            font-size: 0.9em;
            font-weight: 400;
            color: #000;
            text-decoration: none;
        }

            .blog-cate ul li a:hover {
                text-decoration: none;
                color: #0ab2d2;
            }

.blog-cate h3 {
    font-size: 1.5em;
    font-weight: 600;
    color: #000;
    margin: 0px 0px 16px 0px;
}

.blog-post h3 {
    font-size: 1.5em;
    font-weight: 600;
    color: #000;
    margin: 0px 0px 16px 0px;
}

.blog-cate {
    margin: 0em 0em 2em 0em;
}

.blog-grids {
    margin: 0em 0em 3em 0em;
}

.blog-detail {
    padding: 15px;
    background: #fff;
    box-shadow: 0 2px 7px 1px rgba(144, 133, 133, 0.56);
    border-radius: 0px 0px 3px 3px;
    -webkit-border-radius: 0px 0px 3px 3px;
    -moz-border-radius: 0px 0px 3px 3px;
    -o-border-radius: 0px 0px 3px 3px;
}

.blog-para p {
    font-size: 1em;
    font-weight: 400;
    color: #999;
    line-height: 1.6em;
    margin: 12px 0px 0px 0px;
}

a.blog-clr {
    color: #0ab2d2 !important;
    font-weight: 700 !important;
    text-decoration: none;
}

/*--blog end here--*/
/*--single page start here--*/
h3.cum {
    font-size: 1.4em;
    font-weight: 700;
    color: #000;
    padding: 6px 0px 9px 0px;
    font-family: 'Lora', serif;
    text-decoration: none;
}

.mag-single h3 {
    font-size: 25px;
    font-weight: 500;
    color: #000;
    margin: 0px 0px 10px 0px;
}

.mag-single p {
    font-size: 15px;
    font-weight: 400;
    color: #000;
    line-height: 1.8em;
    margin: 10px 0px;
}

.single-commemts {
    background: #fff;
    padding: 14px;
    box-shadow: 0 2px 7px 1px rgba(144, 133, 133, 0.56);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    margin: 2em 0 0;
}

.user-comment a h4 {
    font-size: 20px;
    font-weight: 500;
    color: #000;
    margin: 0px 0px 10px 0px;
}

.user-comment a {
    text-decoration: none;
}

    .user-comment a h4:hover {
        text-decoration: none;
        color: #0ab2d2;
    }

.user-comment p {
    font-size: 16px;
    font-weight: 500;
    color: #979191;
    line-height: 1.4em;
    margin: 10px 0px 0px 0px;
}

a.comme {
    font-size: 13px;
    font-weight: 400;
    color: #000;
    text-decoration: none;
}

    a.comme:hover {
        color: #23573F;
        text-decoration: none;
        transition: 0.5s all;
        -webkit-transition: 0.5s all;
        -moz-transition: 0.5s all;
        -o-transition: 0.5s all;
    }

.user-bwn {
    margin: 4px 0px;
    text-align: right;
}

    .user-bwn a {
        font-size: 15px;
        font-weight: 400;
        color: #fff;
        background: #0ab2d2;
        padding: 7px 11px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -o-border-radius: 5px;
    }

        .user-bwn a:hover {
            text-decoration: none;
            background: #999;
            transition: 0.5s all;
            -webkit-transition: 0.5s all;
            -moz-transition: 0.5s all;
            -o-transition: 0.5s all;
        }

.magsingle-contact {
    margin: 3em 0em 0em 0em;
}

    .magsingle-contact h3 {
        font-size: 25px;
        font-weight: 500;
        color: #0ab2d2;
        margin: 0px 0px 20px 0px;
    }

    .magsingle-contact input[type="text"] {
        font-size: 14px;
        font-weight: 400;
        color: #000;
        padding: 6px 7px;
        background: none;
        width: 48.5%;
        outline: none;
        border: 1px solid #999;
        margin: 0px 20px 15px 0px;
        -webkit-appearance: none;
    }

    .magsingle-contact input.no-mar {
        margin: 0px;
    }

    .magsingle-contact textarea {
        font-size: 14px;
        font-weight: 400;
        color: #000;
        padding: 5px 6px;
        background: none;
        width: 100%;
        height: 9em;
        border: 1px solid #999;
        outline: none;
        resize: none;
        -webkit-appearance: none;
    }

    .magsingle-contact input[type="submit"] {
        font-size: 15px;
        font-weight: 400;
        color: #fff;
        padding: 8px 20px;
        background: #0ab2d2;
        border: none;
        outline: none;
        -webkit-appearance: none;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -o-border-radius: 5px;
        margin: 10px 0px 0px 0px;
    }

        .magsingle-contact input[type="submit"]:hover {
            background: #252e38;
            transition: 0.5s all;
            -webkit-transition: 0.5s all;
            -moz-transition: 0.5s all;
            -o-transition: 0.5s all;
        }

.mag-single img {
    width: 100%;
}
/*--single page end here--*/
/*--contact start here--*/
.contact {
    padding: 3em 0px;
}

.contact-top {
    padding: 0px 0px 3em 0px;
    text-align: center;
}

    .contact-top h3 {
        font-size: 1.9em;
        font-weight: 600;
        color: #0ab2d2;
        margin: 0px 0px 10px 0px;
        font-family: Roboto;
    }

    .contact-top p {
        font-size: 1em;
        font-weight: 400;
        color: #979191;
        line-height: 1.6em;
        width: 80%;
        margin: 0 auto;
    }

.contact-left p {
    font-size: 15px;
    font-weight: 500;
    color: #000;
    margin-bottom: 5px;
}

.contact-left input[type="text"] {
    outline: none;
    width: 100%;
    padding: 7px;
    margin: 0px 0px 10px 0px;
    border: 1px solid #95928d;
    font-size: 15px;
    font-weight: 400;
    color: #252e38;
    -webkit-appearance: none;
}

.contact-right p {
    font-size: 15px;
    font-weight: 400;
    color: #000;
    margin-bottom: 5px;
}

.contact-right textarea {
    width: 100%;
    font-size: 15px;
    font-weight: 400;
    color: #000;
    padding: 7px;
    border: 1px solid #95928d;
    height: 14em;
    outline: none;
    resize: none;
    -webkit-appearance: none;
}

.contact-right input[type="submit"] {
    font-size: 15px;
    font-weight: 400;
    color: #fff;
    padding: 8px 2.4em;
    background: #0ab2d2;
    border: none;
    outline: none;
    -webkit-appearance: none;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    margin: 9px 0px 0px 0px;
}

    .contact-right input[type="submit"]:hover {
        color: #fff;
        background: #777;
        transition: 0.5s all;
        -webkit-transition: 0.5s all;
        -moz-transition: 0.5s all;
        -o-transition: 0.5s all;
    }

.map {
    padding: 1em 0px 3em 0px;
}

.map-left h3 {
    font-size: 1.5em;
    font-weight: 500;
    color: #000;
    font-family: Roboto;
    margin: 0px 0px 3px 0px;
}

.map-left p {
    font-size: 1em;
    font-weight: 400;
    color: #979191;
    line-height: 1.6em;
}

.addre h4 {
    font-size: 1.2em;
    font-weight: 500;
    color: #0ab2d2;
    margin: 10px 0px 4px 0px;
    font-family: 'Lora', serif;
}

.addre p {
    font-size: 1em;
    font-weight: 400;
    color: #000;
    line-height: 1.8em;
}

.map-right iframe {
    width: 100%;
    height: 226px;
    border: none;
}
/*--contact end here--*/


.inner-banner {
    height: 300px;
    border-bottom: 1px solid #ccc;
}

    .inner-banner h3 {
        text-align: center;
        font-size: 2.9em;
        font-family: Roboto;
        color: #fff;
        margin-top: 15%;
        text-shadow: 1px 1px 1px #000;
    }

.login-form h2 {
    font-family: 'PT Sans', sans-serif;
    color: #ffffff;
    font-weight: 100;
    font-size: 1.5em;
    padding: 0;
    float: left;
    margin: 0;
}

.login-form {
    width: 28%;
    margin: 2% auto 6% auto;
}

.bottom-form {
    background: #ffffff;
    min-height: 298px;
    border: 1px solid#CFCFCF;
    border-bottom-left-radius: 5px;
    -moz-border-bottom-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-border-bottom-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
}

.top-form {
    background: #1298b1;
    height: auto;
    border-top-left-radius: 5px;
    -moz-border-top-left-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-top-right-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    padding: 12px 16px 38px;
}

.form-top {
    padding: 2em;
    text-align: center;
}

ul.form {
    width: 91%;
    margin: 0 auto;
}

    ul.form li {
        list-style: none;
        margin-bottom: 25px;
    }

.login-form input[type="text"] {
    font-family: 'PT Sans', sans-serif;
    width: 100%;
    padding: 0.5em 3em 0.5em 1em;
    color: #727f90;
    font-size: 14px;
    outline: none;
    background: url("../images/msg.png") no-repeat scroll 220px 9px;
    height: 35px;
    font-weight: 100;
    margin: 18px 0 0 0;
    border-radius: 4px;
    border: 1px solid#CFCFCF;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

.login-form input[type="password"] {
    font-family: 'PT Sans', sans-serif;
    width: 100%;
    padding: 0.5em 3em 0.5em 1em;
    color: #727f90;
    font-size: 14px;
    outline: none;
    background: #f9f9f9 url(../images/key.png)no-repeat 222px 5px;
    height: 35px;
    border: none;
    font-weight: 100;
    margin: 18px 0 35px 0;
    border: 1px solid#CFCFCF;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

.login-form input[type="submit"] {
    font-family: 'PT Sans', sans-serif;
    background: #f36c12;
    outline: none;
    border: none;
    color: #ffffff;
    padding: 4px 20px;
    font-size: 1.2em;
    font-weight: 100;
    width: 65%;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

    .login-form input[type="submit"]:hover {
        background: #eb7527;
        color: #fff;
        transition: 0.5s all;
        -webkit-transition: 0.5s all;
        -moz-transition: 0.5s all;
        -o-transition: 0.5s all;
    }

ul.top-sc-icons li {
    display: inline-block;
    border-left: 1px solid#436091;
    cursor: pointer;
    float: left;
}

    ul.top-sc-icons li a {
        padding: 26px 30px 22px 30px;
        display: block;
    }

.sign-up {
    background: #f3f3f3;
    padding: 15px 0;
    border-bottom-left-radius: 5px;
    -moz-border-bottom-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-border-bottom-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    font-weight: 400;
    text-align: center;
    border-top: 1px solid #e1e1e1;
}

    .sign-up p {
        color: #7F7C7C;
        font-size: 18px;
    }

        .sign-up p a {
            color: #ce6521;
            margin-left: 6px;
        }

.copyrights {
    text-align: center;
    color: #fff;
    padding-bottom: 8em;
}

    .copyrights p {
        color: #cfcfcf;
    }

        .copyrights p a {
            color: #f35a60;
        }


.about-top {
    text-align: left;
}

.about-top-right h4 {
    color: rgb(230, 88, 42);
    font-size: 1.5em;
    font-weight: normal;
    line-height: 0.5em;
    margin: 0;
}

.about-top p {
    color: rgb(120, 120, 120);
    font-family: Arial;
    font-size: 1em;
    font-weight: normal;
    line-height: 1.4em;
    margin-left: 0 !important;
    margin-top: 1em;
    padding-left: 20px;
}

.about-top p {
    color: rgb(120, 120, 120);
    font-family: Arial;
    font-size: 1em;
    font-weight: normal;
    line-height: 1.4em;
    margin-left: 0 !important;
    margin-top: 1em;
    padding-left: 14px;
}

.about-top-right p {
    color: rgb(120, 120, 120);
    font-family: Arial;
    font-size: 1em;
    font-weight: normal;
    line-height: 1.4em;
    margin-top: 1em;
    padding-left: 0 !important;
}

.who_are {
    margin-top: 20px;
}

    .who_are .left-div-vision {
        width: 67%;
        margin-left: 12px;
    }

    .who_are h4 {
        color: rgb(230, 88, 42);
        font-size: 1.5em;
        font-weight: normal;
        margin: 0 0 5px;
    }

    .who_are p {
        color: rgb(107, 107, 107);
        font-family: Arial;
        font-size: 1em;
        margin-bottom: 1em;
    }

    .who_are .right-div-vision figure {
        border: 1px solid rgb(204, 204, 204);
        margin-left: 20px;
        margin-top: 0px;
        padding: 1px;
    }

        .who_are .right-div-vision figure img {
            width: 100%;
        }

.about-list ul {
    margin: 0;
    padding: 0 14px;
}




.submenu ul {
    width: 200px;
    height: auto;
    position: absolute;
    z-index: 99999;
    border-radius: 5px;
    border-bottom: 2px solid #fff;
    border-top: 1px solid #0da0bc;
    display: none;
    background: #0ab2d2;
}


    .submenu ul li {
        border-bottom: 1px solid #129db7;
        float: none;
        width: 100%;
    }

        .submenu ul li a {
            color: #fff;
            text-decoration: none;
            font-size: 16px;
            padding: 10px 8px;
            opacity: 0.95;
        }

            .submenu ul li a:hover {
                background: #0da0bc;
            }

.submenu li:hover ul {
    display: block;
}






.management-sty {
    margin-top: 10px;
}


    .management-sty h2 {
        font-size: 24px;
        font-family: Roboto;
        color: #f75016;
        margin-bottom: 5px;
    }

    .management-sty p {
        font-size: 16px;
        font-family: Arial;
        color: #454545;
        margin: 0 0 13px;
        padding: 0;
    }

.project-sty h2 {
    font-size: 24px;
    margin-bottom: 5px;
}

.project-sty dt {
    width: 45%;
    height: 1px;
    background: #ff4621;
    margin: 0;
}

.project-sty dl {
    width: 43%;
    height: 1px;
    background: #ff4621;
    margin: 0;
    margin-top: 3px;
}

.project-sty .project-left-sty {
    border: 1px solid #ccc;
    width: 50%;
    height: auto;
    float: left;
    margin-bottom:30px;
}

    .project-sty .project-left-sty img {
        width: 100%;
    }


.project-heading-sty {
    margin-bottom: 20px;
}


.project-right-sty {
    width: 45%;
    height: auto;
    margin-left: 35px;
    float: left;
}


    .project-right-sty p 
    {
        
        font-size:18px;
        font-family:Roboto;
    }

    .project-right-sty .amont-sty-div {
        border-radius: 50%;
        height: 150px;
        width: 150px;
        margin-right: 20px;
        float: left;
        margin-top:20px;
    }

        .project-right-sty .amont-sty-div p {
            color: rgb(255, 255, 255);
            font-size: 24px;
            position: relative;
            text-align: center;
            top: 36px;
        }

    .project-right-sty .amont-sty-div1 {
        background: #14b3d1;
        border:1px solid #16a6c1;
    }

    .project-right-sty .amont-sty-div2 {
        background: #ff4040;
        border:1px solid #ff4040;
    }

    .project-right-sty .amont-sty-div3 {
        background: #13b66f;
        border:1px solid #11a967;
    }

.location-div-sty 
{
    margin-top:30px;
}

.location-div-sty h3
{
    font-size:22px;
    margin-bottom:4px;
    color:#d17d12;
}

.location-div-sty ul
{
   margin:0 0 0 13px;
   padding:0;
}

.location-div-sty ul li
{
  list-style:circle;
  font-size:16px;
  color:#484848;

      
}


/*--meadia quries start here--*/
@media (max-width:1440px) {
    .callbacks_nav {
        top: 79.5%;
        left: 17px;
    }

        .callbacks_nav.next {
            right: 0;
        }
}

@media (max-width:1366px) {
}

@media (max-width:1280px) {
    .callbacks_nav {
        left: 0%;
    }

        .callbacks_nav.next {
            right: 0%;
        }
}

@media (max-width:1024px) {
    .logo {
        float: left;
        width: 44%;
    }

    .sb-search.sb-search-open, .no-js .sb-search {
        width: 40%;
    }

    .head-right {
        width: 65%;
    }

    .effec-right img {
        width: 100%;
    }

    .banner {
        min-height: 570px;
    }

    .banner-main {
        padding: 12em 0em 0em 0em;
    }

        .banner-main h3 {
            font-size: 3em;
        }

        .banner-main p {
            font-size: 1.3em;
        }

    .banner-strip {
        padding: 1em 0em 1em 0em;
    }

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

    .bann-strip-btn a {
        font-size: 0.95em;
        padding: 0.3em 1.5em;
    }

    .services-top h3 {
        font-size: 1.7em;
    }

    .features-top h3 {
        font-size: 1.7em;
    }

    .featu-left img {
        width: 100%;
    }

    .featu-right h3 {
        font-size: 1.3em;
    }

    .featu-right {
        padding: 0.5em 0em 0em 0em;
    }

    .effec-top h3 {
        font-size: 1.7em;
    }

    .effec-left h3 {
        font-size: 1.3em;
    }

    .effec-left {
        padding: 0.5em 0em 0em 0em;
    }

    .project-top h3 {
        font-size: 1.7em;
    }

    .project-eff:hover span.rollover1 {
        background: url(../images/plus.png) center no-repeat rgba(11, 10, 9, 0.66);
        cursor: pointer;
        height: 201px;
        width: 205px;
    }

    .clients-top h3 {
        font-size: 1.7em;
    }

    .team-top-left img {
        width: 100%;
    }

    .about-main h3 {
        font-size: 1.8em;
    }

    .about {
        padding: 2em 0px 0em 0px;
    }

    .team {
        padding: 3em 0px 4em 0px;
    }

    .blog-grids img {
        width: 100%;
    }

    .magsingle-contact input[type="text"] {
        width: 48.2%;
        border: 1px solid #999;
        margin: 0px 21px 15px 0px;
    }

    .magsingle-contact input.no-mar {
        margin: 0px;
    }

    .contact-left input[type="text"] {
        padding: 8px;
        font-size: 11px;
    }

    .data-line ul li {
        margin: 0px 20px 0px 0px;
    }
}

@media (max-width:768px) {
    span.menu {
        display: block;
        text-align: center;
        padding: 1px 0px 0px 0px;
        cursor: pointer;
        color: #E74C3C;
        font-size: 16px;
        font-weight: 700;
        position: relative;
    }

    .top-nav ul.res {
        display: none;
        padding: 0px;
    }

    .top-nav ul.res {
        padding: 0;
        margin: 1.15em 0em 0em 0em;
        z-index: 999;
        position: absolute;
        width: 100%;
        left: 0;
    }

        .top-nav ul.res li {
            display: block;
            text-align: center;
            background: #000;
            margin: 0;
        }

            .top-nav ul.res li a {
                font-size: 16px;
                padding: 1em 0;
                color: #fff;
                display: block;
            }


    ul.res li a:hover, ul.res li a.active {
        color: #000;
    }




    .logo {
        margin: 0.4em 0em 0em 0em;
    }

    .top-nav ul li {
        float: none;
    }

    .logo img {
        width: 55%;
    }

    .header-main {
        padding: 1em 0em 1em 0em;
    }

    .social ul {
        margin: 0.6em 0em 0em 0em;
    }

    .head-right {
        width: 35%;
    }

    .search-box {
        margin-top: 0em;
    }

    .sb-search.sb-search-open, .no-js .sb-search {
        width: 80%;
    }

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

    .banner {
        min-height: 390px;
    }

    span.menu img {
        width: 87%;
    }

    .banner-main {
        padding: 8em 0em 0em 0em;
    }

    .callbacks_nav {
        height: 34px;
        width: 30px;
        background-size: 100%;
    }

        .callbacks_nav.next {
            background-size: 100%;
        }

    .banner-strip h3 {
        font-size: 1em;
        margin: 0.3em 0em 0em 0em;
    }

    .ser {
        float: left;
        width: 33%;
    }

    .caption a h3 {
        font-size: 17px;
    }

    .caption a p {
        font-size: 13px;
    }

    .featu-left {
        float: left;
        width: 53%;
    }

    .featu-right {
        padding: 0em 0em 0em 0em;
        float: right;
        width: 46%;
    }

        .featu-right h3 {
            font-size: 1.2em;
        }

        .featu-right p {
            font-size: 0.85em;
        }

    .featu-btn {
        margin: 0.51em 0em 0em 0em;
    }

        .featu-btn a {
            font-size: 1em;
        }

    .features-top {
        padding: 0em 0em 2em 0em;
    }

    .features {
        padding: 2em 0em 2.5em 0em;
    }

    .effec-top {
        padding: 0em 0em 2em 0em;
    }

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

    .effec-right {
        float: right;
        width: 50%;
        padding: 0em 0em 0em 0em;
    }

    .effec-left h3 {
        font-size: 1.2em;
    }

    .effec-left p {
        font-size: 0.85em;
    }

    .effec-btn a {
        font-size: 1em;
    }

    .effec-btn {
        margin: 0.5em 0em 0em 0em;
    }

    .project-grid {
        width: 50%;
        float: left;
        margin: 0em 0em 2em 0em;
    }

        .project-grid img {
            width: 100%;
        }

    .project-eff:hover span.rollover1 {
        background: url(../images/plus.png) center no-repeat rgba(11, 10, 9, 0.66);
        cursor: pointer;
        height: 325px;
        width: 330px;
    }

    .project-main {
        padding: 2em 0em 1em 0em;
    }

    .clients-bottom p {
        font-size: 0.95em;
        width: 100%;
    }

    .purchase-left h3 {
        font-size: 1.1em;
    }

    .purchase-left p {
        font-size: 0.85em;
    }

    .purchase-right {
        margin: 0.25em 0em 0em 0em;
    }

        .purchase-right a {
            padding: 0.5em 1.5em;
        }

    .footer-grid {
        float: left;
        width: 50%;
        margin: 0em 0em 2em 0em;
    }

    .ftr-gd4-1 {
        float: left;
        width: 20%;
        margin: 0px 4px 0px 0px;
    }

    .ftr-gd2-img {
        float: left;
        width: 19%;
    }

    .ftr-gd2-text {
        float: right;
        width: 77%;
    }

    .footer-main {
        padding: 2em 0em 1em 0em;
    }

    .footer-grid h3 {
        font-size: 1.3em;
        margin: 0px 0px 10px 0px;
    }

    .about-main h3 {
        font-size: 1.7em;
    }

    .about-main h5 {
        font-size: 16px;
    }

    .about-text {
        margin-top: 1.5em;
    }

    .about-text-left {
        float: left;
        width: 33%;
    }

        .about-text-left h5 {
            font-size: 1.3em;
            margin: 7px 0px 0px 0px;
        }

    .about-main p {
        font-size: 14px;
    }

    .team {
        padding: 1.5em 0px 2em 0px;
    }

    .team-main h3 {
        font-size: 1.6em;
    }

    .team-top-left {
        float: left;
        width: 33%;
    }

    .team-top {
        margin-top: 1.5em;
    }

    .team-details p {
        font-size: 14px;
        margin-top: 5px;
    }

    .blog-left {
        float: left;
        width: 73%;
        padding: 0px;
    }

    .blog-right {
        float: none;
        width: 100%;
        padding: 0px;
        margin: 1.5em 0em 0em 0em;
    }

    .blog-detail h3 {
        font-size: 1.2em;
        padding: 0px 0px 0px 0px;
    }

    .blog-detail h4 {
        font-size: 0.9em;
    }

    .blog-detail p {
        font-size: 0.85em;
        width: 100%;
    }

    .blog-btn {
        margin: 0.5em 0em 0em 0em;
    }

        .blog-btn a {
            font-size: 0.9em;
        }

    .blog-cate h3 {
        font-size: 1.3em;
    }

    .blog-post h3 {
        font-size: 1.3em;
    }

    .blog-top p {
        font-size: 0.91em;
        width: 100%;
    }

    .data-line ul li {
        margin: 0px 0px 0px 0px;
    }

    span.calen {
        font-size: 12px;
    }

    .ftr-gd4-1 img {
        width: 100%;
    }

    .user {
        float: left;
        width: 20%;
    }

    .user-comment {
        float: right;
        width: 80%;
    }

        .user-comment h4 {
            font-size: 16px;
        }

        .user-comment p {
            font-size: 13.5px;
        }

    .magsingle-contact input[type="text"] {
        width: 47.5%;
    }

    .data-line {
        margin: 2em 0em 2em 0em;
    }

    .magsingle-contact {
        margin: 2em 0em 0em 0em;
    }

    .blog-grids {
        margin: 0em 0em 1em 0em;
    }

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

    .contact-top p {
        font-size: 0.95em;
        width: 100%;
    }

    .contact-left input[type="text"] {
        width: 100%;
        margin: 0px 0px 5px 0px;
    }

    .contact-right textarea {
        height: 11em;
    }

    .contact-right input[type="submit"] {
        margin: 5px 0px 0px 0px;
    }

    .contact {
        padding: 2em 0px;
    }

    .map-left h3 {
        font-size: 1.1em;
    }

    .map-left p {
        font-size: 0.9em;
    }

    .addre h4 {
        font-size: 1em;
    }

    .map-right {
        padding: 15px 0px 0px 0px;
    }
}

@media (max-width:640px) {

    .icon-box {
        margin-bottom: 40px;
    }

    .head-right {
        width: 45%;
    }

    .sb-search {
        top: 2%;
    }

    .sb-search-input {
        width: 68%;
    }

    .sb-search.sb-search-open, .no-js .sb-search {
        width: 100%;
    }

    .top-nav ul.res li a {
        padding: 0.51em 0;
    }

    .banner {
        min-height: 350px;
    }

    .footer-grid {
        width: 60%;
    }

    .bann-btn a {
        font-size: 0.9em;
    }

    .bann-strip-btn a {
        font-size: 0.9em;
        padding: 0.3em 1em;
    }

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

    .contact-top h3 {
        font-size: 1.5em;
    }

    .contact-top {
        padding: 0px 0px 1em 0px;
    }

    .contact-right input[type="submit"] {
        font-size: 12.5px;
    }

    .map-right iframe {
        height: 200px;
    }

    .map {
        padding: 1em 0px 2em 0px;
    }

    .blog-post h3 {
        font-size: 1.1em;
    }

    .user-bwn a {
        font-size: 13px;
        padding: 5px 11px;
    }

    .magsingle-contact h3 {
        font-size: 21px;
        margin: 0px 0px 17px 0px;
    }

    .magsingle-contact input[type="text"] {
        width: 46.8%;
        font-size: 12.5px;
    }

    .magsingle-contact textarea {
        font-size: 12.5px;
    }

    .magsingle-contact input[type="submit"] {
        font-size: 12px;
        padding: 8px 11px;
    }

    .caption a h3 {
        font-size: 14px;
    }

    .caption p {
        font-size: 13.5px;
    }

    .services-top h3 {
        font-size: 1.5em;
    }

    .services-top p {
        font-size: 1em;
    }

    .features-top h3 {
        font-size: 1.5em;
    }

    .features-top p {
        font-size: 1em;
    }

    .featu-right p {
        font-size: 0.8em;
    }

    .effec-top h3 {
        font-size: 1.5em;
    }

    .effec-top p {
        font-size: 1em;
    }

    .effec-left p {
        font-size: 0.8em;
        width: 95%;
    }

    .featu-right h3 {
        font-size: 1.1em;
    }

    .effec-left h3 {
        font-size: 1.1em;
    }

    .project-top h3 {
        font-size: 1.5em;
    }

    .project-top p {
        font-size: 1em;
    }

    .project-eff:hover span.rollover1 {
        height: 260px;
        width: 265px;
    }

    .clients-top h3 {
        font-size: 1.5em;
    }

    .clients-top {
        text-align: center;
        padding: 0em 0em 1.5em 0em;
    }

    .clients-bottom h4 {
        font-size: 1em;
    }

    .clients-main {
        padding: 2em 0em 3em 0em;
    }

    .purchase-left h3 {
        font-size: 1em;
    }

    .purchase-left p {
        font-size: 0.75em;
    }

    .purchase-right a {
        padding: 0.5em 1em;
        font-size: 0.85em;
    }

    .about-top h3 {
        font-size: 1.5em;
    }

    .about-top h5 {
        font-size: 14.5px;
    }

    .about-text-left a h5 {
        font-size: 1.1em;
    }

    .about-main p {
        font-size: 12.5px;
    }

    .team-main h3 {
        font-size: 1.5em;
    }
}

@media (max-width:480px) {
    .head-right {
        width: 49%;
    }

    .sb-search-input {
        width: 73%;
    }

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

    .banner-main p {
        font-size: 1em;
    }

    .footer-grid {
        width: 100%;
    }

    .bann-btn a {
        font-size: 0.8em;
        padding: 0.5em 1em;
    }

    .banner-main {
        padding: 5em 0em 0em 0em;
    }

    .banner {
        min-height: 250px;
    }

    .banner-strip h3 {
        float: none;
    }

    .bann-strip-btn {
        float: none;
        text-align: center;
        margin: 10px 0px 0px 0px;
    }

    .services-top h3 {
        font-size: 1.3em;
    }

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

    .ser {
        float: none;
        width: 65%;
        margin: 0 auto;
    }

        .ser img {
            width: 100%;
        }

    .caption h3 {
        color: #000;
        margin: 0.4em 0em 0.25em 0em;
        font-size: 18px;
    }

    .features-top h3 {
        font-size: 1.3em;
    }

    .services-top {
        padding: 1.3em 0em 0em 0em;
    }

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

    .features {
        padding: 1em 0em 1.5em 0em;
    }

    .featu-left {
        float: none;
        width: 70%;
        padding: 0px;
        margin: 0em auto 1em;
    }

    .featu-right {
        float: none;
        width: 100%;
    }

    .features-top {
        padding: 0em 0em 1.5em 0em;
    }

    .effec-top h3 {
        font-size: 1.3em;
    }

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

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

    .effec-right {
        float: none;
        width: 65%;
        margin: 1.5em auto 0em;
    }

    .effet-main {
        padding: 1em 0em 1.5em 0em;
    }

    .project-top h3 {
        font-size: 1.3em;
    }

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

    .project-top {
        padding: 0em 0em 1.5em 0em;
    }

    .project-eff:hover span.rollover1 {
        height: 183px;
        width: 188px;
    }

    .project-details p {
        font-size: 0.9em;
    }

    .project-main {
        padding: 1em 0em 0em 0em;
    }

    .clients-top h3 {
        font-size: 1.3em;
    }

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

    .clients-bottom p {
        font-size: 0.8em;
    }

    .purchase-left {
        float: none;
    }

    .purchase-right {
        margin: 1em 0em 0em 0em;
        text-align: center;
        float: none;
    }

    .footer-grid {
        float: none;
        width: 100%;
        margin: 0em 0em 1em 0em;
    }

        .footer-grid h3 {
            font-size: 1.1em;
            margin: 0px 0px 5px 0px;
        }

    .copy-left p {
        font-size: 0.9em;
    }

    .copy-right ul li a {
        font-size: 0.9em;
    }

    .about-main h3 {
        font-size: 1.3em;
    }

    .about-main h5 {
        font-size: 15px;
    }

    .about-text-left {
        float: none;
        width: 65%;
        margin: 0em auto 1.5em;
        padding: 0px;
    }

    .team-main h3 {
        font-size: 1.3em;
    }

    .team-top-left {
        float: none;
        width: 65%;
        margin: 0em auto 1.5em;
        padding: 0px;
    }

    .team {
        padding: 0em 0px 0em 0px;
    }

    .data-line ul li a small {
        width: 25px;
        height: 25px;
        vertical-align: text-bottom;
    }

    span.calen {
        font-size: 13px;
    }

    .blog-cate h3 {
        font-size: 1.1em;
    }

    .blog-top h3 {
        font-size: 1.5em;
    }

    .contact-top h3 {
        font-size: 1.3em;
    }

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

    .contact {
        padding: 1.2em 0px;
    }

    .contact-left p {
        font-size: 14px;
    }

    .contact-right p {
        font-size: 13px;
    }

    .logo img {
        width: 75%;
    }

    .social ul {
        padding: 0px 0px 0px 10px;
    }

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

    .blog-detail a h3 {
        font-size: 1.1em;
        padding: 6px 0px 0px 0px;
    }

    .magsingle-contact input[type="text"] {
        width: 100%;
        margin: 0px 0px 10px 0px;
    }

    .magsingle-contact input.no-mar {
        margin: 0px 0px 10px 0px;
    }
}

@media (max-width:320px) {
    .head-right {
        width: 55%;
    }

    .sb-search.sb-search-open, .no-js .sb-search {
        width: 100%;
    }

    .sb-search-input {
        width: 70%;
    }

    .sb-search {
        right: -3%;
    }

    .logo {
        float: left;
        width: 40%;
        margin: 0.2em 0em 0em 0em;
    }

    span.menu img {
        width: 67%;
    }

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

    .banner-main p {
        font-size: 0.7em;
    }

    .banner {
        min-height: 167px;
    }

    .banner-main {
        padding: 2.3em 0em 0em 0em;
    }

    .callbacks_nav {
        top: 82.5%;
        left: -5%;
    }

        .callbacks_nav.next {
            right: -5%;
        }

    .bann-btn {
        margin: 1em 0em 0em 0em;
    }

    span.menu {
        padding: 5px 0px 0px 0px;
    }

    .ser {
        width: 100%;
    }

    .featu-left {
        width: 80%;
    }

    .effec-right {
        width: 80%;
    }

    .project-grid {
        width: 100%;
        float: none;
    }

    .project-eff:hover span.rollover1 {
        height: 237px;
        width: 243px;
        margin: 0em 0em 1em 0em;
    }

    .clients-main {
        padding: 1em 0em 2.5em 0em;
    }

    .purchase-left a p {
        font-size: 0.75em;
    }

    .ftr-gd2-text {
        width: 70%;
    }

    .copy-left {
        float: none;
        text-align: center;
        margin: 0px 0px 4px 0px;
    }

    .copy-right {
        float: none;
        text-align: center;
    }

    .about-main h5 {
        font-size: 12.5px;
    }

    .about-text-left {
        width: 100%;
        margin: 0em auto 1em;
    }

    .team-top-left {
        width: 80%;
    }

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

    .about {
        padding: 1em 0px 0em 0px;
    }

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

    .blog {
        padding: 1em 0em 1em 0em;
    }

    .blog-detail a h3 {
        font-size: 0.95em;
    }

    span.calen {
        font-size: 10px;
    }

    .single-commemts {
        padding: 6px 6px;
    }

    .user {
        padding: 0px;
    }

    .user-comment p {
        font-size: 12.5px;
    }

    a.comme {
        font-size: 11.3px;
    }

    .blog-left {
        padding: 0px;
    }

    .blog-right {
        padding: 0px;
    }

    .blog-detail p {
        font-size: 0.8em;
    }

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

    .contact-left {
        padding: 0px;
    }

    .contact-right {
        padding: 0px;
    }

        .contact-right textarea {
            height: 6em;
        }

    .contact-left input[type="text"] {
        padding: 5px;
    }

    .contact-right input[type="submit"] {
        padding: 5px 1.5em;
    }

    .map-left {
        padding: 0px;
    }

    .map {
        padding: 0em 0px 1em 0px;
    }

    .map-left h3 {
        font-size: 1em;
    }

    .map-right iframe {
        height: 125px;
    }

    .purchase {
        padding: 1em 0em 1em 0em;
    }

    .search-box {
        display: none;
    }

    .logo img {
        width: 90%;
    }

    .social {
        float: right;
    }

        .social ul {
            margin: 0.5em 0em 0em 0em;
        }

    .header-main {
        padding: 0.9em 0em 0.9em 0em;
    }

    .top-nav ul.res li a {
        font-size: 14px;
    }

    .row {
        padding: 1em 0em 0em 0em;
    }

    .features-top {
        padding: 0em 0em 1em 0em;
    }

    .effec-top {
        padding: 0em 0em 0.51em 0em;
    }

    .clients-bottom h4 {
        font-size: 0.7em;
    }

    .clients-top {
        padding: 0em 0em 1em 0em;
    }

    .project-grid {
        margin: 0em 0em 1em 0em;
    }

    .about-top {
        padding: 0px 0px 0px 0px;
    }

    .team-main h3 {
        margin: 0px 0px 0px 0px;
    }

    .team-details {
        margin-top: 6px;
    }

    .user-comment a h4 {
        font-size: 16px;
    }

    .magsingle-contact h3 {
        font-size: 17px;
        margin: 0px 0px 10px 0px;
    }

    .blog-cate {
        margin: 0em 0em 1em 0em;
    }

    .footer-main {
        padding: 1em 0em 1em 0em;
    }

    .footer-grid {
        padding: 0px;
    }

    h3.cum {
        font-size: 0.95em;
    }
}
/*--mesia quries end here--*/
ul.social-network li {
	display:inline;
	margin: 0 18px;	
	font-size:25px;	
}

ul.social-network li a {	
	color:#d0d0d0;
	text-align:center;
}
.social-network li:hover .fa-twitter {
  color: #00abf0;
}
.social-network li:hover .fa-facebook {
  color: #39579a;
}
.social-network li:hover .fa-google-plus {
  color: #eb8984;
}
.social-network li:hover .fa-pinterest {
  color: #c9171e; 
}
.social-network li:hover .fa-linkedin {
  color: #0077b5; 
}
.social-network li:hover .fa-youtube-play {
  color: #C84941; 
}
.social-network li:hover .fa-dribbble {
  color: #EA4C89 ; 
}
.social-network li:hover .fa-pinterest-square {
  color: #EA4B49; 
}