/*
/*------------------------------------*\
    1. GENERAL STYLES
\*------------------------------------*/
html, body {
    height: 100%;
}

body {
    color: #737373;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
}

a {
    color: #737373;
}

a, a:link, a:visited, a:hover, a:active {
    text-decoration: none;
    outline: 0;
}

p:last-child {
    margin-bottom: 0;
}

/* 1.1. WRAPPER */
.wrapper {
    height: 100%;
}

/* 1.2. SECTION TITLE */
.section--title h2 {
    position: relative;
    margin: 20px 0 60px;
    padding-bottom: 11px;
    color: #303030;
    font-size: 34px;
    line-height: 38px;
    font-weight: 600;
    text-align: center;
}

.section--title h2:before {
    content: " ";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 60px;
    height: 2px;
    margin: 0 auto;
    background-color: #303030;
}

/* 1.3. BACKGROUND COLOR */
.bg--whitesmoke {
    background-color: #f8f8f8;
}

/* 1.4. BACKGROUND IMAGE */
.bg--img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 1.5. BACKGROUND OVERLAY */
.bg--overlay {
    position: relative;
    z-index: 0;
}

.bg--overlay:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0077b5;
    opacity: 0.6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    z-index: -1;
}

/* 1.6. BORDERS */
.bd--top-bottom {
    border-style: solid;
    border-width: 1px 0;
    border-color: #e9e9e9;
}

/* 1.7. BUTTONS */
.btn {
    padding: 10px 20px;
    border-radius: 0;
    font-size: 14px;
    line-height: 18px;
    font-weight: 700;
    -webkit-transition: color .25s ease, background-color .25s ease-in-out;
            transition: color .25s ease, background-color .25s ease-in-out;
}

.btn:hover,
.btn:focus {
    box-shadow: none;
    text-decoration: none;
}

.btn:hover,
.btn:focus,
.btn:active:focus {
    outline: 0;
}

.btn--default,
.btn--default:focus {
    color: #303030;
    border-color: #303030;
    background-color: transparent;
}

.btn--default:hover {
    color: #fff;
    background-color: #303030;
}

.btn--primary,
.btn--primary:focus {
    color: #fff;
    background-color: #303030;
    border-color: #303030;
}

.btn--primary:hover {
    color: #303030;
    background-color: transparent;
}

/*------------------------------------*\
    2. BANNER AREA
\*------------------------------------*/
.banner {
    height: 100%;
    background-position: center top;
}

/* 2.1. BANNER CONTENT */
.banner--content {
    color: #000000;
    padding-top: 80px;
    padding-bottom: 80px;
    text-align: center;
}

.banner--content h1 {
    margin: 0 0 12px;
    font-size: 60px;
    font-weight: 300;
    letter-spacing: -2px;
}

.banner--content p {
    font-size: 20px;
    line-height: 24px;
}

.banner--content .btn--default {
    margin-top: 15px;
    color: #000102;
    border-color: #000102;
}
.banner--content .btn--default:hover {
    color: #fdfdfd;
    background-color: #000102;
}

/*------------------------------------*\
    3. MENU AREA
\*------------------------------------*/
/* 3.1. NAVBAR */
.menu .navbar {
    margin-bottom: 0;
    padding: 10px 0;
    background-color: #fff;
    border: 0;
    border-radius: 0;
    -webkit-transition: box-shadow .25s ease;
            transition: box-shadow .25s ease;
}

.is-sticky .menu .navbar {
    box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}

/* 3.2. NAVBAR TOGGLE */
.menu .navbar-toggle {
    padding-top: 5px;
    padding-bottom: 5px;
}

.menu .navbar-toggle .icon-bar {
    background-color: #484848;
}

/* 3.3. LOGO */
.menu--logo {
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #303030;
    font-weight: 600;
}

.menu--logo:hover,
.menu--logo:focus {
    color: #303030;
}

/* 3.4. NAV */
.menu--nav .nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 600;
    -webkit-transition: color .25s ease, background-color .25s ease-in-out;
            transition: color .25s ease, background-color .25s ease-in-out;
}

.menu--nav .nav > li > a:hover,
.menu--nav .nav > li > a:focus,
.menu--nav .nav > li.active > a {
    color: #303030;
    background-color: #fff;
}

/*------------------------------------*\
    4. ABOUT AREA
\*------------------------------------*/
.about {
    padding: 80px 0;
}

/* 4.1. ABOUT IMAGE */
.about--img {
    max-width: 200px;
    margin: 0 auto 30px;
}

/* 4.2. ABOUT SOCIAL */
.about--social ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0;
    line-height: 0;
    text-align: center;
}

.about--social ul li {
    display: inline-block;
}

.about--social ul li a {
    display: block;
    padding: 0 15px;
    color: #303030;
    font-size: 30px;
    line-height: 16px;
}

/* 4.2. ABOUT BRAND */
.about--brand ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0;
    line-height: 0;
    text-align: center;
}

.about--brand ul li {
    display: inline-block;
}

.about--brand ul li a {
    display: block;
    padding: 0 15px;
    color: #303030;
    font-size: 30px;
    line-height: 16px;
}

/* 4.3. ABOUT CONTENT */
.about--content {
    margin-top: 24px;
    margin-bottom: 26px;
}

.about--content p {
    margin-bottom: 20px;
}

.about--content p:last-child {
    margin-bottom: 0;
}

/* 4.4. ABOUT ACTION */
.about--action {
    text-align: center;
}

.about--action .btn .fa {
    margin-right: 8px;
}

/*------------------------------------*\
    5. SERVICES AREA
\*------------------------------------*/
.services {
    padding: 80px 0 20px;
}

/* X.X. SERVICE ITEM */
.service--item {
    margin-bottom: 56px;
    color: #303030;
}

/* 5.1. SERVICE TITLE */
.service--title {
    font-size: 0;
    line-height: 0;
}

.service--title .fa {
    width: 40px;
    margin-right: 15px;
    padding: 18px 0;
    font-size: 18px;
    line-height: 0;
    cursor: default;
}

.service--title .fa-mobile {
    font-size: 22px;
}

.service--item:hover .service--title .fa {
    color: #fff;
    background-color: #303030;
}

.service--title h3 {
    display: inline-block;
    margin: 0;
    font-size: 24px;
    line-height: 28px;
    vertical-align: middle;
}

/* 5.2. SERVICE TITLE */
.service--content {
    margin-top: 11px;
}

.service--content .read-more {
    border-bottom: 1px dotted #0079c2;
    -webkit-transition: border-color .25s;
            transition: border-color .25s;
}

.service--content .read-more:hover,
.service--content .read-more:focus {
    color: #0079c2;
    border-color: #303030;
}

/*------------------------------------*\
    6. SKILLS AREA
\*------------------------------------*/
.skills {
    padding: 80px 0 20px;
}

/* 6.1. SKILL ITEM */
.skill--item {
    margin-bottom: 55px;
    text-align: center;
}

.skill--item h3 {
    margin: 0;
    color: #303030;
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
}

/* 6.2. SKILL CHART */
.skill--chart {
    position: relative;
    min-height: 150px;
    margin-bottom: 25px;
    color: #303030;
    font-size: 0;
    line-height: 0;
}

.skill--chart span {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    font-size: 45px;
    line-height: 28px;
}

/*------------------------------------*\
    7. PORTFOLIO AREA
\*------------------------------------*/
.portfolio {
    padding: 80px 0;
}

/* 7.1. PORTFOLIO FILTER MENU */
.portfolio--filter-menu {
    margin-bottom: 60px;
}

.portfolio--filter-menu ul {
    margin: -7.5px;
    padding: 0;
    list-style: none;
    font-size: 0;
    line-height: 0;
    text-align: center;
}

.portfolio--filter-menu ul li {
    margin: 7.5px;
}

.portfolio--filter-menu ul li.active {
    color: #fff;
    background-color: #303030;
    cursor: default;
}

/* 7.2. PORTFOLIO IMAGE */
.portfolio--img a {
    display: block;
    cursor: -webkit-zoom-in;
    overflow: hidden;
}

.portfolio--img img {
    -webkit-transition: transform .25s ease-in-out;
            -webkit-transition: -webkit-transform .25s ease-in-out;
            transition: -webkit-transform .25s ease-in-out;
            transition: transform .25s ease-in-out;
            transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out;
}

.portfolio--img:hover img {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
}

/* 7.3. PORTFOLIO MODAL */
.portfolio--modal .modal-dialog {
    width: auto;
    margin-top: 80px;
    margin-bottom: 80px;
}

.portfolio--modal-wrapper {
    position: relative;
    background-color: #fff;
    z-index: 0;
}

.portfolio--modal-wrapper .close {
    float: none;
    position: absolute;
    top: 0;
    right: 0;
    padding: 1px 8px 4px;
    color: #303030;
    border-style: solid;
    border-width: 0 0 1px 1px;
    border-color: #303030;
    font-size: 28px;
    line-height: 28px;
    font-weight: 100;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    outline: 0;
    -webkit-transition: color .25s ease, background-color .25s ease-in-out;
            transition: color .25s ease, background-color .25s ease-in-out;
    z-index: 1;
}

.portfolio--modal-wrapper .close:hover {
    color: #fff;
    background-color: #303030;
}

.portfolio--modal-content {
    padding-right: 30px;
    padding-bottom: 26px;
    overflow: auto;
}

.portfolio--modal-content h3 {
    margin-top: 25px;
    margin-bottom: 6px;
    color: #303030;
    font-weight: 600;
}

.portfolio--modal-content p {
    margin: 20px 0;
}

.portfolio--modal-content p:last-child {
    margin-bottom: 0;
}

.portfolio--modal-social span {
    display: block;
    margin-bottom: 11px;
}

.portfolio--modal-social ul {
    margin: 0 -7.5px;
    padding: 0;
    list-style: none;
}

.portfolio--modal-social ul:before,
.portfolio--modal-social ul:after {
    content: " ";
    display: table;
}

.portfolio--modal-social ul:before,
.portfolio--modal-social ul:after {
    clear: both;
}

.portfolio--modal-social ul li {
    float: left;
    margin: 0 7.5px;
}

.portfolio--modal-social ul li a {
    min-width: 38px;
    padding: 8px 0;
    text-align: center;
}

/*------------------------------------*\
    8. COUNTER AREA
\*------------------------------------*/
.counter {
    padding: 75px 0 15px;
}

/* X.X. COUNTER ITEM */
.counter--item {
    margin-bottom: 60px;
    color: #303030;
    text-align: center;
}

/* X.X. COUNTER NUMBER */
.counter--number {
    margin-top: -3px;
    margin-bottom: 19px;
    font-size: 34px;
    line-height: 38px;
    font-weight: 700;
}

/* X.X. COUNTER TEXT */
.counter--text {
    position: relative;
    padding-top: 18px;
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
}

.counter--text:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 60px;
    height: 1px;
    margin: 0 auto;
    background-color: #303030;
}

/*------------------------------------*\
    9. CONTACT AREA
\*------------------------------------*/
.contact {
    padding: 80px 0;
}

/* X.X. CONTACT FORM */
.contact--form-status .alert {
    margin-bottom: 15px;
    color: #303030;
    background-color: transparent;
    border-color: #303030;
    border-radius: 0;
}

.contact--form .form-control {
    height: auto;
    padding: 10px 12px;
    border-color: #e9e9e9;
    border-radius: 0;
    box-shadow: none;
    -webkit-transition: border-color .25s ease;
            transition: border-color .25s ease;
}

.contact--form .form-control:focus {
    border-color: #303030;
}

.contact--form textarea.form-control {
    min-height: 127px;
}

.contact--form label {
    display: block;
    margin: 6px 0 0;
    color: #303030;
    font-style: italic;
    font-weight: 600;
}

/* 9.1. CONTACT ADDRESS */
.contact--address p {
    margin-bottom: 26px;
}
.contact--address p:last-child {
    margin-bottom: 0;
}

.contact--address ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact--address ul li a {
    display: block;
}

.contact--address ul li a:hover,
.contact--address ul li a:focus {
    color: inherit;
}

.contact--address ul li {
    margin-bottom: 25px;
}
.contact--address ul li:last-child {
    margin-bottom: 0;
}

.contact--address ul li .fa {
    width: 40px;
    margin-right: 11px;
    padding: 6px 0 7px;
    border: 1px solid #303030;
    font-size: 18px;
    line-height: 22px;
    vertical-align: middle;
    text-align: center;
    -webkit-transition: color .25s ease, background-color .25s ease-in-out;
            transition: color .25s ease, background-color .25s ease-in-out;
}

.contact--address ul li a:hover .fa {
    color: #fff;
    background-color: #303030;
}

.contact--address ul li .fa-mobile {
    font-size: 28px;
}

.contact--address ul li .fa-map-marker {
    font-size: 22px;
}

/*------------------------------------*\
    10. FOOTER AREA
\*------------------------------------*/
/* 10.1. FOOTER COPYRIGHT */
.footer--copyright {
    padding: 19px 0 21px;
    color: #fff;
    background-color: #303030;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
}

.footer--copyright a {
    color: #fff;
    font-weight: 600;
}

/*------------------------------------*\
    11. HELPER CLASSES
\*------------------------------------*/
/* 11.1. RESET GUTTER */
.reset--gutter {
    margin-left: 0;
    margin-right: 0;
}

.reset--gutter > div {
    padding-left: 0;
    padding-right: 0;
}

/* 11.2. VERTICAL CENTER */
.vc--parent {
    display: table;
    width: 100%;
    height: 100%;
}

.vc--child {
    display: table-cell;
    vertical-align: middle;
}

/*------------------------------------*\
    12. MEDIA QUERIES
\*------------------------------------*/
/* 12.1. DESKTOP */
@media screen and (max-width: 1199px) {

}

/* 12.2. DESKTOP SMALL */
@media screen and (max-width: 991px) {
    /* BANNER AREA */
    .banner--content h1 {
        margin-bottom: 20px;
        font-size: 42px;
    }

    /* PORTFOLIO AREA */
    .portfolio--modal-content {
        max-height: none !important;
        padding-left: 30px;
    }

    /* CONTACT AREA */
    .contact--form {
        margin-top: 60px;
    }
}

/* 12.3. TABLET */
@media screen and (max-width: 767px) {

}

/* 12.4. MOBILE */
@media screen and (max-width: 480px) {
    /* SERVICES AREA */
    .service--item {
        float: none;
        width: 100%;
    }

    /* SKILLS AREA */
    .skill--item {
        float: none;
        width: 100%;
    }

    /* PORTFOLIO AREA */
    .portfolio--item {
        margin-bottom: 30px;
        float: none;
        width: 100%;
    }
    .portfolio--item:last-child {
        margin-bottom: 0;
    }

    /* COUNTER AREA */
    .counter--item {
        float: none;
        width: 100%;
    }
}