html {
    overflow: auto
}
body {
    padding: 0;
    font - family: 'Open Sans',
    sans - serif;
    color:  # 25272b;
    overflow: hidden;
    -webkit - backface - visibility: hidden
}
::selection {
    background:  # 4d90fe;
    color:  # fff
}
::-moz - selection {
    background:  # 4d90fe;
    color:  # fff
}
.margin25 {
    margin - top: 25 %
}
.divide {
    margin - top: 5 % ;
    margin - bottom: 5 %
}
.divider {
    border - bottom: 1px dashed # dfe1e3
}
h1 {
    font - size: 56px;
	font-family: Helvetica;
    text - align: center;
    margin - bottom: 35px;
    line - height: 1;
    letter - spacing: -3px
}
 @ media(max - width: 767px) {
    h1 {
        font - size: 32px
    }
}
p {
    margin - bottom: 25px;
    text - align: left
}
h4 {
    font - size: 13px;
	font - weight: 100;
    color:  # bbbdc0;
    text - transform: minimalize;
    text - align: center;
    letter - spacing: 1px;
    margin: 35px 0
}
 # footer h5 {
    border - bottom: 1px solid # dfe1e3;
    padding - bottom: 15px;
    margin - top: 15px
}
a {
    font - size: 14px;
    color:  # 25272b;
    transition: .2s;
    -moz - transition: .2s;
    -webkit - transition: .2s;
    -o - transition: .2s
}
a: hover {
    color:  # 949598;
    text - decoration: none;
    transition: .2s;
    -moz - transition: .2s;
    -webkit - transition: .2s;
    -o - transition: .2s
}
 # services i {
    font - size: 170px;
    color:  # bbbdc0;
    line - height: 1.2!important
}
textarea: focus, input: focus, a: focus,  * : focus {
    outline: 0
}
.navbar.nav.active a, .navbar.nav.active a: hover, .navbar.nav.active a: focus {
    background - color: transparent!important;
    box - shadow: none;
    -webkit - box - shadow: none;
    -moz - box - shadow: none;
    -ms - box - shadow: none;
    -o - box - shadow: none
}
 # intro {
    background:  # fff;
    padding - right: 20px;
    padding - left: 20px;
    min - height: 460px;
    background: url(data: image / svg + xml; base64, PD94bWwgdmVyc2lvbj0iMS4wIiA / Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI + CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8 + CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzVlNWY2MCIgc3RvcC1vcGFjaXR5PSIwIi8 + CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiYmJkYzAiIHN0b3Atb3BhY2l0eT0iMC4xIi8 + CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4 = );
    background: -moz - linear - gradient(top, rgba(0, 0, 0, 0)0, rgba(94, 95, 96, 0)50 % , rgba(187, 189, 192, 0.1)100 % );
    background: -webkit - gradient(linear, left top, left bottom, color - stop(0 % , rgba(0, 0, 0, 0)), color - stop(50 % , rgba(94, 95, 96, 0)), color - stop(100 % , rgba(187, 189, 192, 0.1)));
    background: -webkit - linear - gradient(top, rgba(0, 0, 0, 0)0, rgba(94, 95, 96, 0)50 % , rgba(187, 189, 192, 0.1)100 % );
    background: -o - linear - gradient(top, rgba(0, 0, 0, 0)0, rgba(94, 95, 96, 0)50 % , rgba(187, 189, 192, 0.1)100 % );
    background: -ms - linear - gradient(top, rgba(0, 0, 0, 0)0, rgba(94, 95, 96, 0)50 % , rgba(187, 189, 192, 0.1)100 % );
    background: linear - gradient(to bottom, rgba(0, 0, 0, 0)0, rgba(94, 95, 96, 0)50 % , rgba(187, 189, 192, 0.1)100 % );
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#00000000', endColorstr = '#1abbbdc0', GradientType = 0)
}
 # intro h2 {
    font - size: 56px;
    text - align: center;
    font - weight: 700;
    color:  # bbbdc0;
    letter - spacing: -3px;
    line - height: 1
}
 @ media(max - width: 570px) {
     # intro h2 {
        font - size: 42px;
        color:  # bbbdc0;
        letter - spacing: -1px;
        padding - top: 25 %
    }
}
h1 {
    font - size: 30px;
    color:  #fff;
    font - weight: 700;
    text - shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    text - align: center;
    line - height: 1;
    margin - bottom: 15px;
    letter - spacing: -2px
}
 @ media(max - width: 767px) {
    h1.header {
        font - size: 42px
    }
}
p.header {
    font - size: 26px;
    color:  # fff;
    font - weight: 100;
    text - align: center;
    line - height: 1;
    text - shadow: 0 1px 1px rgba(0, 0, 0, 0.5)
}
 @ media(max - width: 767px) {
    p.header {
        font - size: 18px
    }
}
 # services - top - desktop {
    background:  # fff url(.. / img / services_bg.jpg)fixed no - repeat center;
    background - size: cover
}
 # services - top - mobile {
    background:  # fff url(.. / img / services_bg.jpg)no - repeat center
}
 # services - top - desktop,  # services - top - mobile, padding: 75px 0
}
 @ media(max - width: 1024px) {
     # services - top - desktop,
     # works - top - desktop,
     # gallery - top - desktop,
     # team - top - desktop,
     # contact - top - desktop {
        background - size: auto
    }
}
 # services, {
    padding - right: 20px;
    padding - left: 20px;
    background:  # fff
}
 # hint1 {
    padding - right: 20px;
    padding - left: 20px;
    background:  # 4d90fe;
    padding: 15px;
    text - align: center
}
 # hint2 {
    padding - right: 20px;
    padding - left: 20px;
    background:  # 4d90fe;
    padding: 15px;
    text - align: center
}
 # hint3 {
    padding - right: 20px;
    padding - left: 20px;
    background:  # 4d90fe;
    padding: 15px;
    text - align: center
}
 # hint1 a,  # hint2 a,  # hint3 a {
    color:  # fff
}
input[type = "text"], select, textarea {
    border: 1px solid # EEE;
    background:  # f4f5f6;
    border - radius: 0;
    -webkit - border - radius: 0;
    -moz - border - radius: 0;
    box - shadow: none;
    -webkit - box - shadow: none;
    -moz - box - shadow: none;
    -ms - box - shadow: none;
    -o - box - shadow: none
}
 # address {
    text - align: center
}
.honeypot {
    display: none
}
.message {
    display: none
}
.alert {
    padding: 5px 15px 5px 15px;
    margin: 8px 0 0 0
}
 # footer {
    padding - right: 20px;
    padding - left: 20px;
    background - color:  # eeeff2;
    border - top: 1px solid # e9ebed;
    text - shadow: 1px 1px 0 rgba(255, 255, 255, 1)
}
 # footer.span2 {
    border - bottom: 1px solid # dfe1e3;
    padding - bottom: 15px
}
 # footer ul {
    list - style: none;
    margin: 0
}
 # footer li {
    padding - bottom: 5px;
    text - align: right
}
 @ media(max - width: 767px) {
     # footer li {
        padding - bottom: 5px;
        text - align: center
    }
}
 # navigation {
    padding - right: 20px;
    padding - left: 20px;
    background:  # fff;
    box - shadow: none!important;
    -webkit - box - shadow: none!important;
    -moz - box - shadow: none!important;
    -ms - box - shadow: none!important;
    -o - box - shadow: none!important
}
 @ media(max - width: 240px) {
    .navbar.brand {
        margin - left: -12px
    }
}
.navbar - fixed - top {
    position: fixed
}
.nav a {
    color:  # 25272B!important
}
.nav a: hover {
    color:  # bbbdc0!important
}
.nav.active a {
    color:  # bbbdc0!important
}
.navbar.nav.active a, .navbar.nav.active a: hover {
    background: transparent;
    box - shadow: none;
    -webkit - box - shadow: none;
    -moz - box - shadow: none;
    -ms - box - shadow: none;
    -o - box - shadow: none
}
.navbar.nav li a {
    text - shadow: none;
    text - align: center;
    padding: 20px 15px 20px 15px
}
.navbar - inner {
    background:  # fff;
    border: 0;
    box - shadow: none!important;
    -webkit - box - shadow: none!important;
    -moz - box - shadow: none!important;
    -ms - box - shadow: none!important;
    -o - box - shadow: none!important;
    filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)"
}
.navbar - fixed - top.navbar - inner {
    padding: 0
}
.navbar - fixed - top {
    margin: auto
}
.navbar.btn - navbar {
    float: right;
    padding: 12px 12px;
    margin: 12px 0
}
.nav - collapse.nav li a: hover, .nav - collapse.dropdown - menu a: hover {
    background - color: transparent
}
.nav - collapse.nav li a {
    font - weight: 400;
    text - transform: minimalize;
    font - size: 13px
}
 @ media(max - width: 979px) {
    .navbar {
        padding: 0 20px;
        margin - bottom: 0
    }
}
 @ media(max - width: 979px) {
    .nav - collapse.nav li a,
    .nav - collapse.dropdown - menu a {
        padding: 9px 15px
    }
}
.thumbnail {
    border: 0;
    padding: 0;
    text - align: center;
    box - shadow: none;
    -webkit - box - shadow: none;
    -moz - box - shadow: none;
    -ms - box - shadow: none;
    -o - box - shadow: none
}
.thumbnail h4 {
    color:  # 4d90fe;
    padding: 20px;
    margin: 0;
    font - size: 20px;
    font - weight: 700;
    text - transform: none;
    letter - spacing: -1px
}
.thumbnail span {
    font - size: 13px;
    color:  # bbbdc0;
    text - transform: minimalize;
    letter - spacing: 1px;
    font - weight: 100
}
.thumbnail p {
    padding: 20px;
    margin: 0
}
 # more {
    text - align: center;
    position: absolute;
    right: 0;
    left: 0;
    bottom: -5px
}
.delay {
    animation - delay: 2s;
    -moz - animation - delay: 2s;
    -webkit - animation - delay: 2s;
    -o - animation - delay: 2s
}
.animated {
    -webkit - animation - duration: 2s;
    -moz - animation - duration: 2s;
    -o - animation - duration: 2s;
    animation - duration: 2s;
    -webkit - animation - fill - mode: both;
    -moz - animation - fill - mode: both;
    -o - animation - fill - mode: both;
    animation - fill - mode: both
}
 @ -webkit - keyframes fadeInUp {
    0 % {
        opacity: 0;
        -webkit - transform: translateY(20px)
    }
    100 % {
        opacity: 1;
        -webkit - transform: translateY(0)
    }
}
 @ -moz - keyframes fadeInUp {
    0 % {
        opacity: 0;
        -moz - transform: translateY(20px)
    }
    100 % {
        opacity: 1;
        -moz - transform: translateY(0)
    }
}
 @ -o - keyframes fadeInUp {
    0 % {
        opacity: 0;
        -o - transform: translateY(20px)
    }
    100 % {
        opacity: 1;
        -o - transform: translateY(0)
    }
}
 @ keyframes fadeInUp {
    0 % {
        opacity: 0;
        transform: translateY(20px)
    }
    100 % {
        opacity: 1;
        transform: translateY(0)
    }
}
.fadeInUp {
    -webkit - animation - name: fadeInUp;
    -moz - animation - name: fadeInUp;
    -o - animation - name: fadeInUp;
    animation - name: fadeInUp
}