/*---
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
---*/
/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, nav ul, nav li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

ol, ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after, q:before, q:after {
        content: '';
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* start editing from here */
a {
    text-decoration: none;
}

.txt-rt {
    text-align: right;
}
/* text align right */
.txt-lt {
    text-align: left;
}
/* text align left */
.txt-center {
    text-align: center;
}
/* text align center */
.float-rt {
    float: right;
}
/* float right */
.float-lt {
    float: left;
}
/* float left */
.clear {
    clear: both;
}
/* clear float */
.pos-relative {
    position: relative;
}
/* Position Relative */
.pos-absolute {
    position: absolute;
}
/* Position Absolute */
.vertical-base {
    vertical-align: baseline;
}
/* vertical align baseline */
.vertical-top {
    vertical-align: top;
}
/* vertical align top */
nav.vertical ul li {
    display: block;
}
/* vertical menu */
nav.horizontal ul li {
    display: inline-block;
}
/* horizontal menu */
img {
    max-width: 100%;
}
/*end reset*/
body {
    background: url(../images/bg.png);
}

.wrap {
    width: 80%;
    margin: 0 auto;
    padding: 0px 1em;
}

.content .wrap p, .content .wrap ul li, .content .wrap ol li {
    text-align: center;
    color: #8b6d49;
    margin: 1% 5% 1% 5%;
}

.images3 p img {
    width: 30%;
    margin-left: 5px;
    margin-right: 5px;
}

.content .wrap p, .content .wrap ul li {
    text-align: center;
    color: #8b6d49;
    margin: 1% 5% 1% 5%;
}

    .content .wrap p span, .content .wrap ul li span, .content .wrap ol li span {
        font-size: 22.0pt;
        font-family: 'High Tower Text',serif;
    }

.image-slider {
    padding: 2em 0;
    background: #613854;
}

.header {
    background: #fff;
}

.logo {
    float: left;
    padding: 30px 24px 24px 24px;
}

.top-nav {
    float: right;
}

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

        .top-nav ul li a {
            font-family: 'Karla', sans-serif;
            color: #613854;
            text-transform: uppercase;
            padding: 40px 25px;
            display: block;
            font-weight: normal;
            transition: 0.5s ease;
            -o-transition: 0.5s ease;
            -webkit-transition: 0.5s ease;
        }

    .top-nav li.active > a, .top-nav li > a:hover {
        background: #613854;
        color: #fff;
    }
/*---content----*/
/*  GRID OF THREE   ============================================================================= */
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}

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

.group:after {
    clear: both;
}

.group {
    zoom: 1;
}

.grid_1_of_3 {
    display: block;
    float: left;
    margin: 1% 0 1% 1.6%;
    border: 1px solid #eee;
}

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

.images_1_of_3 {
    width: 29.1%;
    padding: 1.5%;
    background: #FFF;
}

    .images_1_of_3 img {
        max-width: 100%;
        display: block;
        -webkit-filter: grayscale(100%);
        opacity: 0.99;
        transition: all 300ms !important;
        -webkit-transition: all 300ms !important;
        -moz-transition: all 300ms !important;
    }

        .images_1_of_3 img:hover {
            opacity: 1;
            -webkit-filter: grayscale(0%);
            cursor: pointer;
        }

    .images_1_of_3:hover img {
        opacity: 1;
        -webkit-filter: grayscale(0%);
        cursor: pointer;
    }

    .images_1_of_3 h3 {
        font-family: 'Karla', sans-serif;
        color: #613854;
        text-transform: uppercase;
        letter-spacing: -1px;
        font-size: 1.6em;
        padding: 0px 0px 10px 0px;
    }

    .images_1_of_3 p {
        font-size: 0.8125em;
        padding: 14px 0;
        color: #777;
        line-height: 1.6em;
        font-family: verdana, arial, helvetica, helve, sans-serif;
    }

    .images_1_of_3 .button {
        margin-top: .3em;
        line-height: 1.9em;
    }

        .images_1_of_3 .button a {
            padding: 10px 12px;
            font-size: 0.875em;
            background: #3C3A3B;
            text-transform: uppercase;
            color: #fff;
            font-family: 'Karla', sans-serif;
            transition: 0.5s ease;
            -o-transition: 0.5s ease;
            -webkit-transition: 0.5s ease;
        }

            .images_1_of_3 .button a:hover {
                background: #613854;
                color: #FFF;
                text-decoration: none;
            }

/* hamburger menu */
.navbar-toggle .icon-bar:nth-of-type(2) {
    top: 1px;
}

.navbar-toggle .icon-bar:nth-of-type(3) {
    top: 2px;
}

.navbar-toggle .icon-bar {
    position: relative;
    transition: all 500ms ease-in-out;
}

.navbar-toggle.active .icon-bar:nth-of-type(1) {
    top: 6px;
    transform: rotate(45deg);
}

.navbar-toggle.active .icon-bar:nth-of-type(2) {
    background-color: transparent;
}

.navbar-toggle.active .icon-bar:nth-of-type(3) {
    top: -6px;
    transform: rotate(-45deg);
}

/*end hambruger menu*/

/***** Media Quries *****/
@media only screen and (max-width: 1024px) {
    .wrap {
        width: 95%;
    }
}
/*  GO FULL WIDTH AT LESS THAN 640 PIXELS */
@media only screen and (max-width: 640px) {

    .wrap {
        width: 95%;
    }

    .grid_1_of_3 {
        margin: 2% 0 2% 0%;
    }

    .images_1_of_3 {
        width: 94%;
        padding: 3%;
    }
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {

    .wrap {
        width: 95%;
    }

    .grid_1_of_3 {
        margin: 2% 0 2% 0%;
    }

    .images_1_of_3 {
        width: 92% !important;
        padding: 4%;
    }
}

.last p {
    padding: 0px 0px 10px 0px;
}

.last ul li {
    display: block;
}

    .last ul li a {
        font-size: 0.8125em;
        padding: 14px 0;
        line-height: 1.5em;
        font-family: verdana, arial, helvetica, helve, sans-serif;
        color: #613854;
    }

.last ul li {
    background: url(../images/marker.png) 0 10px no-repeat;
    padding-left: 18px;
    padding: 5px 21px;
    border-bottom: 1px solid #EEE;
}

    .last ul li a:hover {
        color: #6A6B6A;
    }

    .last ul li:hover {
        background: url(../images/marker1.png) 0 10px no-repeat;
    }

.last ul {
    padding: 0px 0px 16px 0px;
}
/*---box----*/
.left-box h3 {
    font-family: 'Karla', sans-serif;
    color: #613854;
    text-transform: uppercase;
    font-size: 1.6em;
}

.left-box {
    width: 61.4%;
    float: left;
    padding: 30px;
    border: 1px solid #eee;
    background: #FFF;
}

.left-box1 {
    float: left;
    width: 41%;
    padding: 0 34px;
}

    .left-box1 p {
        font-size: 0.8125em;
        padding: 14px 0;
        color: #777;
        line-height: 1.6em;
        font-family: verdana, arial, helvetica, helve, sans-serif;
    }

    .left-box1 h5, .left-box1 span {
        color: #613854;
        font-size: 0.8125em;
        line-height: 1.6em;
        font-family: verdana, arial, helvetica, helve, sans-serif;
    }

    .left-box1 h5 {
        font-weight: bold;
    }

    .left-box1 span {
        padding: 0px;
    }

.frist-box {
    border-right: 1px solid #EEE;
}

.left-box a {
    font-size: 0.8125em;
    padding: 14px 22px;
    color: #613854;
    line-height: 1.6em;
    font-family: verdana, arial, helvetica, helve, sans-serif;
    display: block;
    background: url(../images/marker1.png) 0 16px no-repeat;
}

    .left-box a:hover {
        color: #613854;
        background: url(../images/marker.png) 0 16px no-repeat;
    }
/*----right-box----*/
.right-box {
    float: right;
    width: 27.36%;
    padding: 30px;
    border: 1px solid #EEE;
    background: #FFF;
}

    .right-box h3 {
        font-family: 'Karla', sans-serif;
        color: #613854;
        text-transform: uppercase;
        font-size: 1.6em;
    }

.right-box-grid-img {
    float: left;
    width: 25%;
}

.right-box-grid-info {
    float: right;
    width: 73%;
}

.shadow {
    text-align: center;
}

.right-box-grid-info span {
    color: #613854;
    font-size: 0.8125em;
    line-height: 1.6em;
    font-family: verdana, arial, helvetica, helve, sans-serif;
}

.right-box-grid-info p {
    font-size: 0.8125em;
    color: #777;
    line-height: 1.6em;
    font-family: verdana, arial, helvetica, helve, sans-serif;
}

.right-box-grid-img img {
    background: #3C3A3B;
    padding: 5px;
    transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
}

    .right-box-grid-img img:hover {
        background: #613854;
    }

.right-box-grid {
    padding: 10px 0px;
    border-bottom: 1px solid #EEE;
    transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
}

    .right-box-grid:hover img {
        background: #613854;
    }

.seeall a {
    font-size: 0.8125em;
    padding: 11px 22px;
    color: #613854;
    line-height: 1.6em;
    font-family: verdana, arial, helvetica, helve, sans-serif;
    display: block;
    background: url(../images/marker1.png) 0 16px no-repeat;
}

    .seeall a:hover {
        color: #613854;
        background: url(../images/marker.png) 0 16px no-repeat;
    }

.box {
    margin: 5px 0px;
}
/*---footer----*/
.footer-left {
    float: left;
}

.footer-right {
    float: right;
    margin-top: 14px;
}

    .footer-right p {
        font-family: 'Karla', sans-serif;
        color: #3C3A3B;
        text-transform: uppercase;
        display: block;
        font-weight: normal;
        transition: 0.5s ease;
        -o-transition: 0.5s ease;
        -webkit-transition: 0.5s ease;
    }

.footer {
    padding: 10px 0px 10px 0px;
    margin-top: 3em;
    background: #FFF;
    position: absolute;
    width: 100%;
    text-align: center;
}

.footer-right p a {
    color: #613854;
    transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
}

    .footer-right p a:hover {
        color: #3C3A3B;
    }
/*---about----*/
.see {
    float: right;
}
/*---services----*/
.services {
    margin-top: 12px;
}

.service-content h3 {
    font-size: 1.5em;
    color: #613854;
    border-bottom: 1px solid #EEE;
    font-family: 'Karla', sans-serif;
    padding: 15px 0px 10px 0px;
    margin-bottom: 10px;
}

.service-content ul li {
    display: block;
}

    .service-content ul li span {
        width: 5%;
        float: left;
        font-size: 3em;
        color: #613854;
        font-family: 'Karla', sans-serif;
    }

    .service-content ul li p {
        float: right;
        width: 94.5%;
        display: block;
        font-size: 0.8125em;
        color: #777;
        font-family: verdana, arial, helvetica, helve, sans-serif;
        padding: 2px 0px 5px 0px;
        line-height: 1.7em;
    }

        .service-content ul li p a {
            font-size: 1.2em;
            color: #613854;
            font-family: 'Karla', sans-serif;
            display: block;
        }

.service-content {
    width: 45%;
    padding: 10px 10px 10px 10px;
    background: #fff;
    border: 1px solid #eee;
}

    .service-content ul {
        padding-bottom: 5px;
    }

.services-sidebar {
    float: right;
    width: 20%;
    padding: 30px;
    background: #fff;
    border: 1px solid #eee;
}

    .services-sidebar h3 {
        font-size: 1.5em;
        color: #613854;
        border-bottom: 1px solid #eee;
        font-family: 'Karla', sans-serif;
        padding: 15px 0px 10px 0px;
        margin-bottom: 10px;
    }

    .services-sidebar ul li a {
        display: block;
        font-size: 0.8125em;
        color: #613854;
        font-family: verdana, arial, helvetica, helve, sans-serif;
        padding: 2px 0px 5px 0px;
        transition: 0.5s ease;
        -o-transition: 0.5s ease;
        -webkit-transition: 0.5s ease;
    }

        .services-sidebar ul li a:hover {
            color: #777;
        }

    .services-sidebar ul li {
        border-bottom: 1px solid #EEE;
        background: url(../images/marker.png) 0 14px no-repeat;
        padding: 9px 15px 8px 22px;
    }

        .services-sidebar ul li:hover {
            background: url(../images/marker1.png) 0 14px no-repeat;
        }
/*---projects----*/
.projects-bottom-paination ul li {
    display: inline-block;
}

.projects-bottom-paination {
    text-align: center;
    padding-top: 25px;
}

    .projects-bottom-paination li a {
        font: 400 12px/1.2em Arial;
        color: #FFF;
        padding: 11px 18px;
        background: #3C3A3B;
        text-decoration: none;
        text-shadow: none;
        margin: 16px 0;
    }

    .projects-bottom-paination li.active > a, .projects-bottom-paination li > a:hover {
        background: #3C3A3B;
        color: #fff;
    }

.content h4 {
    font-size: 1.5em;
    color: #613854;
    border-bottom: 1px solid #EEE;
    font-family: 'Karla', sans-serif;
    padding: 10px;
    margin-bottom: 10px;
    text-transform: uppercase;
    background: #fff;
}

.gallery {
    background: #fff;
    padding: 0px 1em;
    padding-bottom: 3em;
}
/*---contact----*/
.contact {
    padding: 0em 1em;
    margin-top: 0.5em;
}

.contact1 {
    background: #fff;
}
/*  Contact Form  ============================================================================= */
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}

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

.group:after {
    clear: both;
}

.group {
    zoom: 1;
}

.col {
    display: block;
    float: left;
    margin: 0% 0 1% 1.6%;
}

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

.span_2_of_3 {
    width: 63.1%;
    padding: 1.5%;
}

.span_1_of_3 {
    width: 29.2%;
    padding: 1.5%;
}

    .span_2_of_3 h3,
    .span_1_of_3 h3 {
        font-size: 1.5em;
        color: #613854;
        font-family: 'Karla', sans-serif;
        padding: 5px 0px 5px 0px;
        margin-bottom: 10px;
        text-transform: uppercase;
    }

.contact-form {
    position: relative;
    padding-bottom: 30px;
}

    .contact-form div {
        padding: 5px 0;
    }

    .contact-form span {
        display: block;
        font-size: 0.8125em;
        color: #613854;
        padding-bottom: 5px;
        font-family: verdana, arial, helvetica, helve, sans-serif;
    }

    .contact-form input[type="text"], .contact-form textarea {
        padding: 8px;
        display: block;
        width: 98%;
        background: #fcfcfc;
        border: none;
        outline: none;
        color: #464646;
        font-size: 1em;
        font-family: Arial, Helvetica, sans-serif;
        box-shadow: inset 0px 0px 3px #999;
        -webkit-box-shadow: inset 0px 0px 3px #999;
        -moz-box-shadow: inset 0px 0px 3px #999;
        -o-box-shadow: inset 0px 0px 3px #999;
        -webkit-appearance: none;
    }

    .contact-form textarea {
        resize: none;
        height: 120px;
    }

    .contact-form input[type="submit"] {
        padding: 10px 12px;
        font-size: 1em;
        background: #3C3A3B;
        text-transform: uppercase;
        color: #fff;
        font-family: 'Karla', sans-serif;
        transition: 0.5s ease;
        -o-transition: 0.5s ease;
        -webkit-transition: 0.5s ease;
        cursor: pointer;
        border: none;
    }

        .contact-form input[type="submit"]:hover {
            background: #613854;
            color: #FFF;
        }

        .contact-form input[type="submit"]:active {
            background: #613854;
            color: #FFF;
        }

.company_address p {
    font-size: 0.8125em;
    padding: 4px 0;
    color: #777;
    line-height: 1.6em;
    font-family: verdana, arial, helvetica, helve, sans-serif;
}

    .company_address p span {
        text-decoration: underline;
        color: #333;
        cursor: pointer;
    }

.map {
    border: 1px solid #C7C7C7;
    margin-bottom: 15px;
}

/***** Media Quries *****/
@media only screen and (max-width: 1024px) {
    .wrap {
        width: 95%;
    }
}
/*  GO FULL WIDTH AT LESS THAN 800 PIXELS */

@media only screen and (max-width: 800px) {
    .wrap {
        width: 95%;
    }

    .span_2_of_3 {
        width: 94%;
        padding: 3%;
    }

    .col {
        margin: 1% 0 1% 0%;
    }

    .span_1_of_3 {
        width: 94%;
        padding: 3%;
    }
}

/*  GO FULL WIDTH AT LESS THAN 640 PIXELS */

@media only screen and (max-width: 640px) and (min-width: 480px) {
    .wrap {
        width: 95%;
    }

    .span_2_of_3 {
        width: 94%;
        padding: 3%;
    }

    .col {
        margin: 1% 0 1% 0%;
    }

    .span_1_of_3 {
        width: 94%;
        padding: 3%;
    }

    .contact-form input[type="text"], .contact-form textarea {
        width: 97%;
    }
}
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .wrap {
        width: 95%;
    }

    .span_2_of_3 {
        width: 90%;
        padding: 5%;
    }

    .col {
        margin: 1% 0 1% 0%;
    }

    .span_1_of_3 {
        width: 90%;
        padding: 5%;
    }

    .contact-form input[type="text"], .contact-form textarea {
        width: 92%;
    }
}
/*----responsive design----*/
@media only screen and (max-width: 1366px) and (min-width: 1280px) {
    .wrap {
        width: 95%;
    }

    .left-box1 {
        padding: 0 33px;
    }

    .last p {
        padding: 0px 0px 0px 0px;
    }

    .grid_1_of_3 {
        border: none;
    }
}

@media only screen and (max-width: 1280px) and (min-width: 1024px) {
    .wrap {
        width: 95%;
    }

    .images_1_of_3 {
        width: 29%;
    }

    .last ul li:nth-child(1) {
        display: none;
    }

    .last p {
        padding: 0px 0px 19px 0px;
    }

    .left-box1 {
        padding: 0 30px;
    }

    .left-box {
        width: 60.4%;
    }

    .right-box-grid-info {
        width: 71%;
    }

    .service-content {
        width: 45%;
        padding: 5px 5px 5px 5px;
        float: left;
    }
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .wrap {
        width: 95%;
    }

    .video-container iframe, .video-container video  {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .images_1_of_3 {
        width: 29%;
    }

    .last ul li:nth-child(1), .last ul li:nth-child(2) {
        display: none;
    }

    .last p {
        padding: 0px 0px 17px 0px;
    }

    .left-box {
        width: 59.4%;
    }

    .left-box1 {
        padding: 0 23px;
    }

    .right-box {
        width: 25.36%;
    }

    .right-box-grid-info {
        width: 66%;
    }

    .service-content {
        width: 40.00%;
    }

        .service-content ul li p {
            width: 92.5%;
        }
}

@media only screen and (max-width: 768px) {
    .wrap {
        width: 95%;
    }

    .video-container iframe, .video-container video  {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .content .wrap p span, .content .wrap ul li span {
        font-size: 16.0pt;
        font-family: 'High Tower Text',serif;
    }

    .top-nav ul li a {
        padding: 50px 15px;
    }

    .logo {
        padding: 24px 4px;
    }

    .images_1_of_3 {
        width: 28.91%;
    }

    .last ul li:nth-child(1), .last ul li:nth-child(2), .last ul li:nth-child(3), .last ul li:nth-child(4) {
        display: none;
    }

    .left-box {
        width: 56.6%;
    }

    .left-box1 {
        padding: 0 16px;
    }

    .right-box {
        width: 27.36%;
        padding: 15px;
    }

    .right-box-grid-info {
        width: 64%;
    }

    .service-content {
        width: 40%;
    }

        .service-content ul li p {
            width: 89.5%;
        }
}