/*
 * Theme name: Influence - One Page
 * Description: Main stylesheet for this template
 * Version: 1.3
 * Last update: 22.8. 2014
 * Author: Jiri Cermak
 * */

/*
 * ===================================
 * Basic declaration
 * ===================================
 * */

/* Selecting text */

::-moz-selection {
    background: #444;
    color: #ffffff;
    text-shadow: none;
}
::selection {
    background: #444;
    color: #ffffff;
    text-shadow: none;
}
/*
 * ===================================
 * Media Queries
 * ===================================
 * */

@media (max-width: 768px) {
    .prices,
    .last.prices,
    .middle.prices {
        margin-bottom: 30px;
    }
    .first.prices {
        margin-bottom: 60px;
    }
    .inline-btn .btn {
        margin-bottom: 15px;
        display: block;
    }
    .section {
        padding: 30px 0;
    }
}
@media (min-width: 768px) {
    .section {
        padding: 60px 0;
    }
}
@media (max-width: 992px) {
    .lg-tab-content img {
        margin-top: 50px;
    }
    .portfolio-grid .hover-content,
    .widget,
    .knobs > .row > div {
        margin-bottom: 30px;
    }
    .profile-grid .profile-circle,
    .profile {
        margin-bottom: 50px;
    }
    .footer,
    .footer .dark-icons,
    .footer .text {
        text-align: center !important;
    }
    .footer .text {
        margin-bottom: 15px;
    }
}
@media (min-width: 1200px) {
    .first.prices-v1,
    .first.prices {
        left: 80px;
    }
    .last.prices-v1,
    .last.prices {
        right: 80px;
    }
}
/*
 * ===================================
 * Typography
 *
 * includes: Headings, Body, Lists, Links, Colors
 * ===================================
 * */

/* === Headings === */

/* Large title and subtitle */

.lg-title {
    text-align: center;
    position: relative;
    letter-spacing: 2px;
    margin-bottom: 40px;
    text-transform: uppercase;
    color: #1a99aa;
    font-size: 36px;
}
.lg-title-border::after {
    content: "";
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    width: 80px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.sub-title {
    text-align: center;
    color: #999;
    font-size: 16px;
    margin-top: -20px;
    line-height: 24px;
    padding-bottom: 50px;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}
/* Big title and subtitle */

@media (min-width: 768px) {
    .big-subtitle {
        font-size: 18px;
        color: #999;
        margin: 20px 0 25px;
    }
    .big-title {
        font-size: 40px;
        color: #777;
    }
}
@media (max-width: 768px) {
    .big-subtitle {
        font-size: 15px;
        color: #777;
        margin: 10px 0 15px;
    }
    .big-title {
        font-size: 30px;
        color: #777;
    }
}
/* Medium title */

.md-title {
    color: #555;
    font-weight: 400;
    font-size: 30px;
    letter-spacing: 0.5px;
}
.bg-filter-v2 .lg-title,
.bg-filter-v2 .big-title,
.bg-filter-v1 .lg-title,
.bg-filter-v1 .big-title,
.bg-filter .lg-title,
.bg-filter .big-title {
    color: #fff;
}
/* Title with border */

.title-border {
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}
/* === Body Text === */

/* Text blocks */

.text-block {
    font-size: 16px;

    line-height: 25px;
}
.text-block-v1 {
    line-height: 1.8;
    font-size: 16px;
    color: #777;
}
.text-block-v2 {
    line-height: 22px;
    color: #777;
}
/* === Lists === */

/* Icons List */

.icons-list {
    padding-left: 0;
    list-style: none;
}
@media (min-width: 992px) and (max-width: 1200px) {
    .hover-content .icons-list li {
        padding-left: 0;
        padding-right: 0;
    }
}
.icons-list li {
    display: inline-block;
    margin-bottom: 5px;
    padding-right: 2.5px;
    margin-top: 5px;
    padding-left: 2.5px;
}
/* Features list with icons */

.features-list > li {
    margin: 10px 0;
    list-style: none;
}
.features-list i {
    margin-right: 10px;
    color: #1a99aa;
}
/* Info list - look at the portfolio item (down) */

.info-list {
    padding-left: 0;
    list-style: none;
    margin-bottom: 0;
}
.info-list.style {
    padding-left: 40px;
}
.info-list > li {
    margin-bottom: 15px;
}
.info-list.md-list li {
    margin-bottom: 10px;
}
.info-list.sm-list li {
    margin-bottom: 5px;
}
.info-list.md-list li:last-child,
.info-list.sm-list li:last-child,
.info-list > li:last-child {
    margin-bottom: 0;
}
.info-list > li > i:before {
    margin-right: 5px;
}
.info-list-border > li {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
/* Inline Buttons */

.inline-btn > .btn {
    margin-right: 15px;
}
/* Contact list with info */

.info-bar h4 {
    margin-top: 0;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-size: 15px;
    color: #777;
    font-weight: bold;
}
.info-bar > li {
    margin-bottom: 15px;
    color: #777;
}
.info-bar > li p {
    margin-bottom: 0;
}
/* === Links === */

a:hover,
a:focus {
    color: #105d68;
    text-decoration: none;
}
a:focus {
    outline: none;
}
/* === Colors === */

.primary span {
    color: #1a99aa;
}
.success span {
    color: #3c948b;
}
.info span {
    color: #1eb9c1;
}
.warning span {
    color: #ecd06f;
}
.danger span {
    color: #df6c4f;
}
ul.default span,
ul.danger span,
ul.warning span,
ul.info span,
ul.success span,
ul.primary span {
    margin-right: 5px;
}
/* Text color */

.text-white {
    color: #fff !important;
}
.text-light {
    color: #ddd;
}
/*
 * ===================================
 * Forms
 *
 * includes: Form with Icon
 * ===================================
 * */

.form-control {
    display: block;
    width: 100%;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #777;
    background-color: #fff;
    background-image: none;
    border: 1px solid #dedede;
    border-radius: 2px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: all ease-in-out .15s;
    transition: all ease-in-out .15s;
}
.form-control:focus {
    outline: 0;
    border-color: #ccc;
}
/* Icon in form field */

.control {
    overflow: hidden;
    position: relative;
}
.control i {
    position: absolute;
    font-size: 21px;
    color: #ddd;
    top: 0;
    z-index: 2;
    -webkit-transition: all 0.35s ease-out;
    transition: all 0.35s ease-out;
    width: 42px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    left: 0;
}
.icon .form-control {
    min-height: 42px;
    padding: 0 15px 0 42px;
    line-height: 42px;
}
textarea.form-control {
    line-height: normal !important;
    padding-top: 13px !important;
}
.icon .btn {
    min-height: 44px;
    /*    padding: 11px 15px;*/
}
/* Large Form without icons */

.form-lg .form-control {
    min-height: 44px;
    padding: 0 15px;
    line-height: 44px;
}
.form-lg .btn {
    min-height: 46px;
    padding: 11.5px 15px;
}
/* Normal Form (without icons) */

.no-icon .form-control {
    padding: 6px 12px;
}
.no-icon .btn-form {
    background-color: #ffffff;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    border-left: 0;
}
/*
 * ===================================
 * Buttons
 *
 * includes: transparent buttons, extra large button, total transparent btn
 * ===================================
 * */

.btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 10px 15px;
    font-size: 15px;
    line-height: 1.42857143;
    border-radius: 2px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus {
    outline: none;
}
.btn-lg,
.btn-group-lg > .btn {
    padding: 10px 16px;
    font-size: 19px;
    line-height: 1.33;
    border-radius: 2px;
}
.btn-sm,
.btn-group-sm > .btn {
    padding: 5px 10px;
    font-size: 13px;
    line-height: 1.5;
    border-radius: 2px;
}
.btn-xs,
.btn-group-xs > .btn {
    padding: 1px 5px;
    font-size: 13px;
    line-height: 1.5;
    border-radius: 2px;
}
/* Btn Default */

.btn-default {
    color: #777;
    background-color: #fff;
    border-color: #ccc !important;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    color: #777777;
    background-color: #f1f1f1;
    border-color: #adadad;
}
/* Extra large button */

@media (min-width: 768px) {
    .btn-xlg {
        padding: 15px 20px !important;
        letter-spacing: 1px;
        text-transform: uppercase;
    }
}
@media (max-width: 768px) {
    .btn-xlg {
        padding: 15px 10px !important;
        letter-spacing: 0;
        text-transform: uppercase;
    }
}
/* Transparent Buttons */

.btn-primary-trn {
    color: #1a99aa;
    background-color: transparent;
    border: 1px solid #1a99aa !important;
}
.btn-primary-trn:focus,
.btn:focus.btn-primary-trn,
.btn-primary-trn:hover,
.btn:hover.btn-primary-trn {
    color: #fff !important;
    background-color: #1a99aa;
}
.btn-default-trn {
    color: #fff;
    background-color: transparent;
    border: 1px solid #fff !important;
}
.btn-default-trn:focus,
.btn:focus.btn-default-trn,
.btn-default-trn:hover,
.btn:hover.btn-default-trn {
    color: #777;
    background-color: #fff;
}
/* default trn v2 */

.btn-default-trn-v2 {
    color: #999;
    background-color: transparent;
    border-color: #999 !important;
}
.btn-default-trn-v2:focus,
.btn:focus.btn-default-trn-v2,
.btn-default-trn-v2:hover,
.btn:hover.btn-default-trn-v2 {
    color: #444;
    background-color: transparent;
}
.btn-trn {
    background: transparent;
    border: 1px solid #fff !important;
    border-left-color: transparent !important;
}
.btn-trn:hover {
    background: rgba(255, 255, 255, 0.1);
}
.btn-trn:focus i,
.btn-trn:hover i {
    color: #eee;
}
/* Success Btn */

.btn-success-trn {
    color: #409f89;
    background-color: transparent;
    border: 1px solid #409f89 !important;
}
.btn-success-trn:focus,
.btn:focus.btn-success-trn,
.btn-success-trn:hover,
.btn:hover.btn-success-trn {
    color: #fff;
    background-color: #409f89;
}
/* Info Btn */

.btn-info-trn {
    color: #20bacf;
    background-color: transparent;
    border: 1px solid #20bacf !important;
}
.btn-info-trn:focus,
.btn:focus.btn-info-trn,
.btn-info-trn:hover,
.btn:hover.btn-info-trn {
    color: #fff;
    background-color: #20bacf;
}
/* warning Btn */

.btn-warning-trn {
    color: #e7c44b;
    background-color: transparent;
    border: 1px solid #e7c44b !important;
}
.btn-warning-trn:focus,
.btn:focus.btn-warning-trn,
.btn-warning-trn:hover,
.btn:hover.btn-warning-trn {
    color: #fff;
    background-color: #e7c44b;
}
/* danger btn */

.btn-danger-trn {
    color: #d94f2c;
    background-color: transparent;
    border: 1px solid #d94f2c !important;
}
.btn-danger-trn:focus,
.btn:focus.btn-danger-trn,
.btn-danger-trn:hover,
.btn:hover.btn-danger-trn {
    color: #fff;
    background-color: #d94f2c;
}
/* link btn */

.btn-link-trn {
    color: #fff;
    background-color: transparent;
}
.btn-link-trn:focus,
.btn:focus.btn-link-trn,
.btn-link-trn:hover,
.btn:hover.btn-link-trn {
    color: #eee;
}
/*
 * ===================================
 * Helper Classes
 *
 * includes: spaces, hr, section, filling-section, small container
 * ===================================
 * */

/* Spaces - smart tags for fast indentation */

.space,
.space-sm,
.space-md,
.space-lg {
    display: block;
    float: none;
    clear: both;
}
.space-sm {
    padding-top: 15px;
}
.space-md {
    padding-top: 20px;
}
.space {
    padding-top: 30px;
}
.space-lg {
    padding-top: 50px;
}
/* Large line - <hr class="hr"> */

.hr {
    margin-top: 40px;
    margin-bottom: 40px;
}
/* Small container */

.container-sm {
    max-width: 800px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}
/* no overflow of a hover animations */

.hover-content {
    overflow: hidden;
    position: relative;
}
/* Block center - horizontal and vertical */

.h-center,
.v-center {
    position: absolute;
    top: 50%;
}
.v-center {
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}
.h-center {
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
}
/* max width center, center block */

.img-mw450 {
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    height: auto;
    width: 100%;
}
/* max width 450px */

.w450 {
    max-width: 450px;
    width: 100%;
}
.w800,
.w450 {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
/* max height 450px */

.h450 {
    max-height: 450px;
}
/* max width 800px */

.w800 {
    max-width: 800px;
    width: 100%;
}
/* Margins */

.m-no-all {
    margin: 0;
}
.m-no-bottom {
    margin-bottom: 0;
}
.m-no-top {
    margin-top: 0;
}
.m-no-left {
    margin-left: 0;
}
.m-no-right {
    margin-right: 0;
}
.m-10-top {
    margin-top: 10px;
}
/* Paddings */

.p-no-all {
    padding: 0;
}
.p-no-bottom {
    padding-bottom: 0;
}
.p-no-top {
    padding-top: 0;
}
.p-no-left {
    padding-left: 0;
}
.p-no-right {
    padding-right: 0;
}
/*
 * ===================================
 * Background
 *
 * includes: Background Color, Background Filter, Background Images
 * ===================================
 * */

/* === Social Networks - Background Colors === */

.facebook {
    background: #3B5998;
}
.text-facebook {
    color: #3B5998;
}
.google {
    background: #D34836;
}
.text-google {
    color: #D34836;
}
.twitter {
    background: #4099FF;
}
.text-twitter {
    color: #4099FF;
}
.youtube {
    background: #bb0000;
}
.text-youtube {
    color: #bb0000;
}
.linkedin {
    background: #007bb6;
}
.text-linkedin {
    color: #007bb6;
}
.instagram {
    background: #517fa4;
}
.text-instagram {
    color: #517fa4;
}
.pinterest {
    background: #cb2027;
}
.text-pinterest {
    color: #cb2027;
}
.vine {
    background: #00bf8f;
}
.text-vine {
    color: #00bf8f;
}
.snapchat {
    background: #fffc00;
}
.text-snapchat {
    color: #fffc00;
}
.flickr {
    background: #ff0084;
}
.text-flickr {
    color: #ff0084;
}
.tumblr {
    background: #32506d;
}
.text-tumblr {
    color: #32506d;
}
.vimeo {
    background: #aad450;
}
.text-vimeo {
    color: #aad450;
}
.foursquare {
    background: #0072b1;
}
.text-foursquare {
    color: #0072b1;
}
/* === Background Color === */

.bg-grey {
    background: #F0F0F0;
}
.bg-grey-1 {
    background: #F0EEED;
}
.bg-grey-2 {
    background: #f2f5f7;
}
.bg-grey-3 {
    background: #f5f5f5;
}
.bg-dark {
    background: #444444;
}
.bg-dark-1 {
    background: #272727;
}
/* === Background Filter === */

.bg-filter-v2 {
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
}
.bg-filter {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
}
.bg-filter-v1 {
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
}
/* === Background Images === */

@media (min-width: 1920px) {
    .bg-1 {
        background: url("../img/bg/WelcomeProtist.jpg");
    }
    .bg-2 {
        background: url("../img/bg/WelcomeProtist.jpg");
    }
    .bg-3 {
        background: url("../img/bg/WelcomeProtist.jpg");
    }
    .bg-4 {
        background: url("../img/b4db71.jpg");
    }
    .bg-5 {
        background: url("../img/4010.jpg");
    }
}
@media (max-width: 1920px) {
    .bg-1 {
        background: url("../img/bg/WelcomeProtist.jpg");
    }
    .bg-2 {
        background: url("../img/bg/WelcomeProtist.jpg");
    }
    .bg-3 {
        background: url("../img/bg/WelcomeProtist.jpg");
    }
    .bg-4 {
        background: url("../img/1920w/b4db71.jpg");
    }
    .bg-5 {
        background: url("../img/1920w/4010.jpg");
    }
    .bg-6 {
        background: url("../img/1920w/0249.jpg");
    }
    .bg-7 {
        background: url("../img/1920w/0097.jpg");
    }
    .bg-8 {
        background: url("../img/1920w/6f11.jpg");
    }
    .bg-9 {
        background: url("../img/1920w/U7Fc1e.jpg");
    }
    .bg-10 {
        background: url("../img/1920w/9181.jpg");
    }
    .bg-11 {
        background: url("../img/1920w/7306.jpg");
    }
    .bg-12 {
        background: url("../img/1920w/macbook-air-all-faded-and-stuff.jpg");
    }
}
@media (min-width: 768px) {
    .bg-fixed {
        background-attachment: fixed !important;
    }
}
.bg-center {
    background-position: center center !important;
}
.bg-cover {
    background-size: cover !important;
}
.bg-norepat {
    background-repeat: no-repeat !important;
}
/*
 * ===================================
 * Jumbotron / Header
 *
 * includes: Transparent Jumbotron
 * ===================================
 * */

/* Transparent Jumbotron */

.jumbotron.trn {
    background: transparent;
    color: #fff;
}
/* Top section - header of the home page */

.sTop .jumbotron {
    margin-bottom: 0;
    padding: 0;
}
.sTop .jumbotron h1 {
    margin-top: 0;
}
/*
 * ===================================
 * Sections
 *
 * includes: section, filling-section
 * ===================================
 * */

/* Section for background image or video */

.filling-section {
    min-height: 350px;
    position: relative;
}
.section {
    margin: 0 auto;
    min-height: 600px;
    position: relative;
}
.section-option {
    padding: 100px 0;
    position: relative;
    margin: 0 auto;
}
.auto-height {
    min-height: 100%;
}
.minheight300px {
    min-height: 300px;
}
.section-option-2 {
    padding-bottom: 50px;
    min-height: 500px;
}
/*
 * ===================================
 * Icons
 *
 * includes: Circle icons, Colors for Icons
 * ===================================
 * */

/* Basic Colors of icons */

.i-primary i {
    color: #1a99aa;
}
.i-success i {
    color: #3c948b;
}
.i-danger i {
    color: #df6c4f;
}
.i-info i {
    color: #1eb9c1;
}
.i-warning i {
    color: #ecd06f;
}
/* Small Circle Icons - social, share */

.circle-icons i {
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border-radius: 50%;
    color: #1a99aa;
    font-size: 15px;
    background: #fff;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.15);
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}
.circle-icons li:hover i {
    background: #1a99aa;
    color: #fff;
}
/* Dark social icons - for footer */

.dark-icons {
    margin: 0;
    text-align: right;
}
.dark-icons li {
    margin: 0;
}
.dark-icons i {
    color: #ccc;
    height: 40px;
    width: 40px;
    font-size: 18px;
    line-height: 40px;
    text-align: center;
    background: #333;
    border-radius: 100px;
    margin: 0 3px;
}
.dark-icons i:hover {
    color: #1a99aa;
}
/* Button only with icon */

.only-i i:before {
    margin-right: 0;
}
h1 i:before,
h2 i:before,
h3 i:before,
h4 i:before,
h5 i:before,
button > i:before,
.btn > i:before {
    margin-right: 5px;
}
/* Margin for icon in button */

.btn i:before,
button i:before {
    margin-right: 5px;
}
.btn .fa-angle-double-right::before,
button .fa-angle-double-right::before {
    margin-left: 5px;
}
.only-icon i:before {
    margin-right: 0 !important;
    margin-left: 0 !important;
}
/*
 * ===================================
 * Icons Cover
 *
 * includes: blue icon, circle border icon
 * ===================================
 * */

/* using on pricing tables page */

.icon-u {
    color: #1a99aa;
    border-radius: 50%;
    height: 100px;
    width: 100px;
    line-height: 100px !Important;
    background: #fff;
    font-size: 50px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.15);
}
/* top section - slide down icon */

i.slidedown {
    font-size: 32px;
    color: #fff;
    border: 2px solid;
    border-radius: 100px;
    height: 50px;
    width: 50px;
    line-height: 50px !important;
}
/*
 * ===================================
 * Hover Content Boxes
 *
 * includes: Slide from top and from bottom
 * ===================================
 * */

/* === Portfolio Item - top animation with link to somethink and bottom animation with title of a project, work or somethink === */

.hover-content:hover .top-part,
.hover-content:hover .bottom-part {
    -webkit-transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
    transform: translate(0%, 0%);
    opacity: 1;
}
.bottom-part,
.top-part {
    position: absolute;
    right: 0;
    left: 0;
    text-align: center;
    -webkit-transition: -webkit-all 0.3s ease-out;
    transition: all 0.3s ease-out;
    opacity: 0;
    bottom: 0;
    cursor: pointer;
}
.top-part {
    top: 0;
    height: 79%;
    background: rgba(26, 153, 170, 0.6);
    color: #fff;
    -webkit-transform: translate(0%, -100%);
    -ms-transform: translate(0%, -100%);
    transform: translate(0%, -100%);
}
.top-part i {
    font-size: 40px;
    position: absolute;
    top: calc(50% - 20px);
    left: calc(50% - 20px);
}
.bottom-part {
    height: 21%;
    background: #fff;
    -webkit-transform: translate(0px, 100%);
    -ms-transform: translate(0px, 100%);
    transform: translate(0px, 100%);
}
.bottom-part h3 {
    margin: 0;
    color: #999;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
}
/* Zoom profile - using on the Our Team page */

@media (min-width: 992px) {
    .team-grid .row:not(:last-child) .profile-circle {
        margin-bottom: 75px;
    }
}
@media (max-width: 992px) {
    .team-grid .profile-circle {
        margin-bottom: 75px;
    }
}
.profile-circle {
    max-width: 450px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.profile-circle hr {
    max-width: 80px;
    border-color: #ddd;
    margin-top: 18px;
    margin-bottom: 15px;
}
.profile-circle p,
.profile-circle h3 {
    margin-bottom: 0;
}
.profile-circle p {
    color: #999;
}
.profile-circle:hover h3 {
    color: #1a99aa;
}
.profile-circle .hover-content {
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    max-width: 200px;
    max-height: 200px;
    margin: auto;
}
.content-circle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    padding: 15px 8px;
    background: #fff;
    background: rgba(255, 255, 255, 0.5);
    -webkit-transform: scale(0.2);
    -ms-transform: scale(0.2);
    transform: scale(0.2);
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
    max-width: 450px;
    border-radius: 50%;
}
.profile-circle:hover .content-circle {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
.content-center .circle-icons {
    top: 50%;
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
}
/* wrap */

/* faces */

.profile-1 {
    background: url("../img/faces/1.jpg");
}
.profile-2 {
    background: url("../img/faces/2.jpg");
}
.profile-3 {
    background: url("../img/faces/3.jpg");
}
.profile-4 {
    background: url("../img/faces/4.jpg");
}
.lg-size.profile {
    height: 200px;
    width: 200px;
}
.xs-size.profile {
    height: 100px;
    width: 100px;
}
.profile {
    background-size: cover;
    background-position: center center;
    border-radius: 50%;
    margin: auto;
    text-align: center;
}
/*
 * ===================================
 * Thumbnails
 *
 * includes: widget - about us, content-box - for testimonial
 * ===================================
 * */

/* Widget - you can to find it at about us section */

.widget .part-a {
    background: #fff;
    padding: 40px 15px 20px 15px;
    color: #999;
    text-align: center;
    -webkit-transition: background 0.3s ease-out;
    transition: background 0.3s ease-out;
}
.widget .part-a > h3 {
    font-size: 28px;
    margin-bottom: 0;
}
.widget .part-a > i {
    font-size: 70px;
    box-shadow: 0 0 0 5px rgba(26, 153, 170, 0.5);
    height: 135px;
    width: 135px;
    line-height: 135px;
    border-radius: 50%;
    background: #1a99aa;
    color: #fff;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.widget:hover i {
    color: #999 !important;
    background: #fff !important;
}
.widget .part-b {
    background: #F0F0F0;
    color: #777;
    text-align: left;
    padding: 20px 20px 10px 20px;
    line-height: 22px;
    min-height: 194px;
}
/* Simple box - for Testimonial */

.content-box {
    padding-bottom: 50px;
    overflow: hidden;
}
.content-box > .body {
    overflow: hidden;
}
.content-box p {
    font-style: italic;
    font-size: 16px;
    margin-bottom: 8px;
}
.content-box h4 {
    margin-bottom: 0px;
    margin-top: 0px;
    font-weight: 400;
    font-size: 15px;
    color: #1a99aa;
}
.content-box h4 > em {
    color: #999;
    margin-left: 5px;
    font-size: 13px;
}
.content-box > .profile,
.content-box > img {
    height: 80px;
    border-radius: 50%;
    width: 80px;
    float: left;
    margin-right: 20px;
}
/*
 * ===================================
 * Navs
 *
 * includes: Large tabs with icon, filter menu, Dots navigation
 * ===================================
 * */

/*  Large tab with icon */

.lg-tabs {
    margin: auto;
    text-align: center;
    padding: 0;
    list-style: none;
}
.lg-tabs li {
    background: #fff;
    position: relative;
    min-height: 1px;
    float: left;
}
.lg-tabs li a:hover,
.lg-tabs li.active a {
    color: #1a99aa;
}
.lg-tabs a {
    color: #777;
    background: #fff;
    display: block;
}
@media (min-width: 768px) {
    .lg-tabs li {
        width: 25%;
        padding: 25px 15px;
    }
    .lg-tabs li:not(:last-child) {
        border-right: 1px solid #eee;
    }
    .lg-tabs a {
        -webkit-transition: color .35s ease;
        transition: color .35s ease;
    }
    .lg-tabs i {
        font-size: 50px;
    }
    .lg-tabs h3 {
        margin: 15px 0 0;
    }
}
@media (max-width: 1200px) {
    .lg-tabs li {
        padding: 25px 10px;
    }
}
@media (max-width: 992px) {
    .lg-tabs li {
        width: 50%;
    }
    .lg-tabs li:not(:last-child):not(:nth-child(3)) {
        border-bottom: 1px solid #eee;
    }
}
@media (max-width: 768px) {
    .lg-tabs li {
        width: 100%;
        padding: 15px 5px;
    }
    .lg-tabs li:not(:last-child) {
        border-bottom: 1px solid #eee;
    }
    .lg-tabs i {
        font-size: 24px;
        float: left;
        line-height: 30px;
        width: 50px;
    }
    .lg-tabs h3 {
        text-align: left;
        margin: 0;
        line-height: 30px;
        font-size: 24px;
        overflow: hidden;
    }
}
/*	 Filter Inline Menu - version 2	*/

.filter-tabs {
    text-align: center;
    margin: 15px 0 30px 0;
    padding: 0;
}
.filter-tabs li {
    padding: 15px 20px;
    color: #777;
    border-radius: 2px;
    cursor: pointer;
    background: #fff;
    list-style: none;
    position: relative;
    overflow: hidden;
    letter-spacing: 1px;
    text-transform: capitalize;
}
.filter-tabs li.active:hover,
.filter-tabs li.active {
    background: #1a99aa !important;
    color: #fff;
}
@media (min-width: 768px) {
    .filter-tabs li {
        display: inline-block;
        margin: 0 5px 10px 0;
        -webkit-transition: all 0.35s ease;
        transition: all 0.35s ease;
    }
    .filter-tabs li:hover {
        color: #1a99aa;
    }
}
@media (max-width: 768px) {
    .filter-tabs li {
        display: block;
        margin: 0 5px 5px 0;
    }
    .filter-tabs li:hover {
        background: #777;
        color: #fff;
    }
}
/* Dots navigation */

.dotstyle ul {
    position: relative;
    display: inline-block;
    padding: 0;
    list-style: none;
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.dotstyle {
    text-align: center;
    margin-bottom: 15px !Important;
    margin-top: -15px;
}
.dotstyle li {
    position: relative;
    display: inline-block;
    margin: 0 3px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.dotstyle li a {
    display: block;
    position: absolute;
    box-shadow: 0 0 0 1px #ddd;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    width: 15px;
    height: 15px;
    margin-right: 5px;
}
.dotstyle li a:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    box-shadow: 0 0 0 1px #ddd;
    border-radius: 50%;
    background-color: #ddd;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}
.dotstyle li.active a:after {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    border-radius: 50%;
}
/*
 * ===================================
 * Navbar
 *
 * includes: navbar inverse
 * ===================================
 * */

/* Navbar */

.navbar {
    border: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.navbar-inverse .navbar-nav > li.active > a:hover,
.navbar-inverse .navbar-nav > li.active > a {
    color: #fff;

}
@media(min-width:768px){
    .navbar-inverse .navbar-nav>li.active>a::after{
        content:"";
        position:absolute;
        width:50%;
        border-bottom:2px solid #1a99aa;
        padding-top:5px;
        display:block;
        margin-left:calc(-50% / 2);left:50%}
}
.navbar-brand {
    float: left;
    padding: 10px 20.5px;
    font-weight: 300;
    font-size: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 20px;
    height: 70px;
}
@media (min-width: 768px) {
    .navbar-nav > li > a {
        padding-top: 25px;
        padding-bottom: 25px;
        line-height: 20px;
    }
}
/*===   Nabar Inverse   ===*/

.navbar-inverse .navbar-brand {
    color: #ddd;
}
.navbar-inverse {
    background-color: #222;
    border-color: #222;
}
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
    color: #ffffff;
    background-color: transparent;
}
@media (min-width: 992px) {
    .navbar-inverse .navbar-text,
    .navbar-inverse .navbar-nav > li > a {
        color: #ccc;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-size: 14px;
    }
}
@media (max-width: 992px) {
    .navbar-inverse .navbar-text,
    .navbar-inverse .navbar-nav > li > a {
        color: #ccc;
        text-transform: uppercase;
        font-size: 14px;
    }
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: #ffffff;
    background-color: transparent;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    color: #ffffff;
    background-color: #222;
}
.navbar-inverse .navbar-nav > .disabled > a,
.navbar-inverse .navbar-nav > .disabled > a:hover,
.navbar-inverse .navbar-nav > .disabled > a:focus {
    color: #444444;
    background-color: transparent;
}
.navbar-inverse .navbar-toggle {
    border-color: #333333;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
    background-color: #333333;
}
.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #ffffff;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
    border-color: #101010;
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
    background-color: #222;
    color: #ffffff;
}
@media (max-width: 767px) {
    .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
        border-color: #080808;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
        background-color: #080808;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
        color: #ccc;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #ffffff;
        background-color: transparent;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #ffffff;
        background-color: #080808;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
        color: #444444;
        background-color: transparent;
    }
}
.navbar-inverse .navbar-link {
    color: #ccc;
}
.navbar-inverse .navbar-link:hover {
    color: #ffffff;
}
/*
 * ===================================
 * Small Components
 *
 * includes: back to top, breakPoint, knobs, clients 
 * ===================================
 * */

/* === Clients === */

.client-logo {
    text-align: center;
    margin: 0 auto;
}
.client-logo img {
    margin-left: auto;
    margin-right: auto;
    max-height: 100px;
    padding: 20px 35px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    vertical-align: middle;
}
@media (max-width: 768px) {
    .client-logo img {
        display: block;
        max-width: 100%;
        margin-bottom: 15px;
    }
}
@media (min-width: 768px) {
    .client-logo img {
        display: inline-block;
        max-width: 25%;
    }
}
/* Back to top */

.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    z-index: 998;
    height: 45px;
    width: 45px;
    line-height: 45px;
    text-align: center;
    border-radius: 100px;
    color: #1a99aa;
    font-size: 30px;
    background: #fff;
    box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.25);
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}
.back-to-top:hover {
    color: #777;
}
.back-to-top:active {
    color: #fff;
    background: #1a99aa;
}
/* Fix for navbar - minus height of navbar (60px) */

.breakPoint {
    position: relative;
    top: -60px;
    visibility: hidden;
}
/* Portfolio Grid */

#Grid .mix {
    opacity: 0;
    display: none;
}
#Grid {
    padding: 0;
    margin: 0;
    min-height: 580px
}
#Grid > li.mix {
    padding: 10px !important;
}
/* Knobs - our skills */

.knobs h3 {
    margin-top: -35px;
    color: #999
}
.knobs {
    text-align: center;
}
@media (min-width: 768px) {
    .knobs p {
        color: #999;
    }
}
#gk,
#yk,
#rk,
#bk {
    display: none;
}
/* Fix - Scroll to the element */

#section1 {
    bottom: 60px;
    position: relative;
}
/* Google Map */

#map {
    height: 450px;
    width: 100%;
}
/* For Contact Form - Success / Error */

.success {
    padding: 1em;
    margin-bottom: 0.75rem;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    color: #468847;
    background-color: #dff0d8;
    border: 1px solid #d6e9c6;
    border-radius: 4px;
}
.error {
    padding: 1em;
    margin-bottom: 0.75rem;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    color: #b94a48;
    background-color: #f2dede;
    border: 1px solid rgba(185, 74, 72, 0.3);
    border-radius: 4px;
}
/* Style Switcher */

.switcher-active.style-switcher {
    -webkit-transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
    transform: translate(0%, 0%);
}
.style-switcher {
    position: fixed;
    top: 280px;
    left: 0;
    right: auto;
    z-index: 100;
    -webkit-transform: translate(-100%, 0%);
    -ms-transform: translate(-100%, 0%);
    transform: translate(-100%, 0%);
    -webkit-transition: -webkit-all 0.5s ease;
    transition: all 0.5s ease;
}
.style-switcher .body {
    background: #fff;
    padding: 8px;
    text-align: center;
    position: relative;
    z-index: 98;
    -webkit-transition: -webkit-all 0.5s ease;
    transition: all 0.5s ease;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
    width: 268px;
    visibility: hidden;
}
.switcher-active.style-switcher .body {
    visibility: visible;
    height: 100%;
}
@-webkit-keyframes switcher-anim {
    0% {
        color: #555;
    }
    17% {
        color: #1a99aa;
    }
    33% {
        color: #1eb9c1;
    }
    50% {
        color: #3c948b;
    }
    67% {
        color: #df6c4f;
    }
    84% {
        color: #ecd06f;
    }
    100% {
        color: #555;
    }
}
@keyframes switcher-anim {
    0% {
        color: #555;
    }
    17% {
        color: #1a99aa;
    }
    33% {
        color: #1eb9c1;
    }
    50% {
        color: #3c948b;
    }
    67% {
        color: #df6c4f;
    }
    84% {
        color: #ecd06f;
    }
    100% {
        color: #999;
    }
}
.switcher-anim {
    -webkit-animation: switcher-anim 8s ease-in-out infinite alternate;
    animation: switcher-anim 8s ease-in-out infinite alternate;
}
.switcher-icon {
    position: absolute;
    top: 0;
    left: 268px;
    text-align: center;
    height: 50px;
    width: 50px;
    font-size: 30px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    background: #FFFFFF;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
    line-height: 54px !important;
    z-index: 200;
}
.switcher-active .switcher-icon {
    line-height: 118px !important;
    height: 118px;
    background: #eee;
}
.style-switcher .body h4 {
    margin-bottom: 15px;
    font-size: 30px;
    color: #999;
    margin-top: 5px;
}
.style-switcher ul {
    margin: 0 auto;
    padding: 0;
}
.style-switcher li {
    list-style: none;
    height: 40px;
    width: 40px;
    margin: 0 4px 4px;
    display: inline-block;
    border-radius: 5px;
    cursor: pointer;
}
.blue {
    background: #1a99aa;
}
.green {
    background: #3c948b;
}
.red {
    background: #df6c4f;
}
.light-blue {
    background: #1eb9c1;
}
.yellow {
    background: #ecd06f;
}
/*
 * ===================================
 * Animations
 *
 * includes: hide navbar and loading animations of elements
 * ===================================
 * */

/* Animation of hiding navbar */

.hide-navbar {
    position: relative;
    -webkit-transform: translate(0%, -100%);
    -ms-transform: translate(0%, -100%);
    transform: translate(0%, -100%);
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}
/* Starting animations */

/* slide from pocket */

@-webkit-keyframes fromPocket {
    0% {
        opacity: 0;
        -webkit-transform: perspective(1000px) rotateY(350deg) translate3d(25%, 0%, -100px);
        -ms-transform: perspective(1000px) rotateY(350deg) translate3d(25%, 0%, -100px);
        transform: perspective(1000px) rotateY(350deg) translate3d(25%, 0%, -100px);
    }
    100% {
        opacity: 1;
        -webkit-transform: perspective(1000px) rotateY(360deg) translate3d(0%, 0%, 0px);
        -ms-transform: perspective(1000px) rotateY(360deg) translate3d(0%, 0%, 0px);
        transform: perspective(1000px) rotateY(360deg) translate3d(0%, 0%, 0px);
    }
}
@keyframes fromPocket {
    0% {
        opacity: 0;
        -webkit-transform: perspective(1000px) rotateY(350deg) translate3d(25%, 0%, -100px);
        -ms-transform: perspective(1000px) rotateY(350deg) translate3d(25%, 0%, -100px);
        transform: perspective(1000px) rotateY(350deg) translate3d(25%, 0%, -100px);
    }
    100% {
        opacity: 1;
        -webkit-transform: perspective(1000px) rotateY(360deg) translate3d(0%, 0%, 0px);
        -ms-transform: perspective(1000px) rotateY(360deg) translate3d(0%, 0%, 0px);
        transform: perspective(1000px) rotateY(360deg) translate3d(0%, 0%, 0px);
    }
}
.fromPocket {
    -webkit-animation-name: fromPocket;
    animation-name: fromPocket;
}
/* pulseIn */

@-webkit-keyframes pulseIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
    }
    50% {
        opacity: 0.25;
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes pulseIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
    }
    50% {
        opacity: 0.25;
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}
.pulseIn {
    -webkit-animation-name: pulseIn;
    animation-name: pulseIn;
}
/* easePulse */

@-webkit-keyframes easePulse {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes easePulse {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}
.easePulse {
    -webkit-animation-name: easePulse;
    animation-name: easePulse;
}
/* openIn */

@-webkit-keyframes openIn {
    0% {
        opacity: 0;
        -webkit-transform: perspective(500px) rotateY(15deg);
        -ms-transform: perspective(500px) rotateY(15deg);
        transform: perspective(500px) rotateY(15deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: perspective(500px) rotateY(0deg);
        -ms-transform: perspective(500px) rotateY(0deg);
        transform: perspective(500px) rotateY(0deg);
    }
}
@keyframes openIn {
    0% {
        opacity: 0;
        -webkit-transform: perspective(500px) rotateY(15deg);
        -ms-transform: perspective(500px) rotateY(15deg);
        transform: perspective(500px) rotateY(15deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: perspective(500px) rotateY(0deg);
        -ms-transform: perspective(500px) rotateY(0deg);
        transform: perspective(500px) rotateY(0deg);
    }
}
.openIn {
    -webkit-animation-name: openIn;
    animation-name: openIn;
}
/* easeUp */

@-webkit-keyframes easeUp {
    0% {
        opacity: 0;
        -webkit-transform: translate(0%, 35px);
        -ms-transform: translate(0%, 35px);
        transform: translate(0%, 35px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(0%, 0px);
        -ms-transform: translate(0%, 0px);
        transform: translate(0%, 0px);
    }
}
@keyframes easeUp {
    0% {
        opacity: 0;
        -webkit-transform: translate(0%, 35px);
        -ms-transform: translate(0%, 35px);
        transform: translate(0%, 35px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(0%, 0px);
        -ms-transform: translate(0%, 0px);
        transform: translate(0%, 0px);
    }
}
.easeUp {
    -webkit-animation-name: easeUp;
    animation-name: easeUp;
}
/*
 * ===================================
 *  Pricing Tables
 *
 * includes: 2 types of pricing tables
 * ===================================
 * */

.panel {
    border: none;
}
.first,
.last,
.middle {
    position: relative;
}
.last,
.first {
    z-index: 1;
}
.middle {
    z-index: 2;
}
/* Pricing tables - version 1 */

.panel.prices-v1,
.panel.prices {
    max-width: 250px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.prices-v1 .panel-body,
.prices .panel-body {
    padding: 25px;
}
.ribbon {
    background: #fff;
    color: #777;
    position: absolute;
    top: 25px;
    left: -28px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    line-height: 24px;
    height: 25px;
    z-index: 3;
    width: 130px;
}
.val {
    color: #1a99aa;
    font-size: 50px;
    margin: 20px 0;
}
.bg-primary .val small,
.bg-primary .val {
    color: #fff;
}
/* Pricing tables - version 2 */

.prices-v1 .name {
    margin: 5px 0;
    font-size: 40px;
    color: #fff;
}
.val-v1 {
    color: #1a99aa;
    font-size: 45px;
    margin: 10px 0 25px;
}
/*
 * ===================================
 *  Footer
 * ===================================
 * */

.footer {
    background: #222222;
    color: #ccc;
    padding: 20px 0;
}
.footer .text {
    line-height: 40px;
    text-align: left;
}