html {
        background: #FFF;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif !important;
        color: #f7f7f7;
    }
    /** index **/
    
    .index,
    .projects,
    .software,
    .about,
    .contact,
    .section-empty-contact {
        margin-bottom: 0;
        min-height: 50%;
        background-repeat: no-repeat;
        background-position: center;
        -webkit-background-size: cover;
        background-size: cover;
        height: 70%;
        width: 100% !important;
    }
    
    .index {
        background-image: url("../images/develop.jpg");
    }
    
    .projects {
        background-image: url("../images/hnck4005.jpg");
    }
    
    .software {
        background-image: url("../images/code-wallpaper-14.jpg");
    }
    
    .about {
        background-image: url("../images/hnck4005.jpg");
    }
    
    .contact {
        background-image: url("../images/callcenter.jpg");
    }
    
    .row {
        margin-left: 0px;
        margin-right: 0px;
    }
    
    .blur {
        padding-top: 120px;
        background: rgba(0, 0, 0, 0.33);
        height: 100%;
        width: 100%;
    }
    
    .section-empty-contact {
        background-image: url(../images/type-away.jpg);
    }
    
    .jumbotron h2 {
        margin-top: 130px;
        margin-bottom: 80px;
        font-size: 60px;
        color: cornsilk;
        text-shadow: 1px 2px #606060;
    }
    
    .jumbotron a {
        color: cornsilk;
    }
    
    .jumbotron a:visited {
        color: #C7C2B1;
    }
    
    iframe {
        width: 100%;
        height: 70%;
    }
    
    #slides img {
        width: 100%;
        height: 200px;
        margin-right: 10px;
        margin-top: 10px;
        box-shadow: 0 0 8px #124258;
        opacity: 0.8;
    }
    
    #slides img:hover {
        box-shadow: 0 0 30px #124258;
        opacity: 1
    }
    
    .about-1 {
        background: url(../images/Collaborative-team.jpg) center;
    }
    
    .about-3 img {
        width: 120px;
    }
    
    .about-4 {
        background: url("../images/team.jpg") center;
    }
    /** form **/
    
    .form-contact input,
    .form-contact label {
        width: 100%!important;
        float: left;
    }
    
    input,
    textarea {
        border: solid 1px cornsilk;
        padding: 5px;
        background: none;
        color: cornsilk;
        margin-bottom: 10px;
    }
    
    #submit {
        background: #F06363;
    }
    
    #submit:hover {
        background: rgba(216, 82, 82, 0.64);
    }
    /** nav bar **/
    
    body {
        padding-top: 50px;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif !important;
    }
    
    .navbar-inverse,
    .footer {
        background-color: #144564;
    }
    
    .navbar-inverse .navbar-nav>.active>a:hover,
    .navbar-inverse .navbar-nav>li>a:hover,
    .navbar-inverse .navbar-nav>li>a:focus {
        background-color: #226394
    }
    
    .navbar-inverse .navbar-nav>.active>a,
    .navbar-inverse .navbar-nav>.open>a,
    .navbar-inverse .navbar-nav>.open>a,
    .navbar-inverse .navbar-nav>.open>a:hover,
    .navbar-inverse .navbar-nav>.open>a,
    .navbar-inverse .navbar-nav>.open>a:hover,
    .navbar-inverse .navbar-nav>.open>a:focus {
        background-color: #114F88
    }
    
    .dropdown-menu {
        background-color: #2784C2
    }
    
    .dropdown-menu>li>a:hover,
    .dropdown-menu>li>a:focus {
        background-color: #4589CC
    }
    
    .navbar-inverse {
        background-image: none;
    }
    
    .dropdown-menu>li>a:hover,
    .dropdown-menu>li>a:focus {
        background-image: none;
    }
    
    .navbar-inverse {
        border-color: #17305C
    }
    
    .navbar-inverse .navbar-brand {
        color: #FFFFFF
    }
    
    .navbar-inverse .navbar-brand:hover {
        color: #FFFFFF
    }
    
    .navbar-inverse .navbar-nav>li>a {
        color: #FFFFFF
    }
    
    .navbar-inverse .navbar-nav>li>a:hover,
    .navbar-inverse .navbar-nav>li>a:focus {
        color: #FFFFFF
    }
    
    .navbar-inverse .navbar-nav>.active>a,
    .navbar-inverse .navbar-nav>.open>a,
    .navbar-inverse .navbar-nav>.open>a:hover,
    .navbar-inverse .navbar-nav>.open>a:focus {
        color: #FFFFFF
    }
    
    .navbar-inverse .navbar-nav>.active>a:hover,
    .navbar-inverse .navbar-nav>.active>a:focus {
        color: #FFFFFF
    }
    
    .dropdown-menu>li>a {
        color: #FFFFFF
    }
    
    .dropdown-menu>li>a:hover,
    .dropdown-menu>li>a:focus {
        color: #FFFFFF
    }
    
    .navbar-inverse .navbar-nav>.dropdown>a .caret {
        border-top-color: #999999
    }
    
    .navbar-inverse .navbar-nav>.dropdown>a:hover .caret {
        border-top-color: #FFFFFF
    }
    
    .navbar-inverse .navbar-nav>.dropdown>a .caret {
        border-bottom-color: #999999
    }
    
    .navbar-inverse .navbar-nav>.dropdown>a:hover .caret {
        border-bottom-color: #FFFFFF
    }
    
    .navbar-brand {
        padding: 0px;
    }
    
    .navbar-brand>img {
        height: 100%;
        padding: 0px;
        width: auto;
    }
    
    .corn {
        color: cornsilk !important;
    }
    
    .melon {
        color: #F06363 !important;
    }
    
    .blue {
        color: #384957
    }
    
    .back {
        height: 400px;
    }
    
    .back-blue {
        background: #132033;
    }
    
    .plugin {
        margin-top: 130px;
    }
    
    .list li {
        list-style: url(../images/checkmark_20.png);
    }
    /** thumbnail **/
    
    .th-round {
        background: #b1b1b1;
        border-radius: 80px;
        padding: 20px;
        width: 80px;
        height: 80px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 120px;
        border: solid 1px #a0a0a0;
    }
    
    .th-round>img {
        width: 60px;
    }
    /** buttons **/
    
    .btn-jumbo {
        padding: 15px;
        font-size: 20px;
        margin-right: 15px;
        min-width: 300px;
        width: 200px !important;
        color: #5f5f5f;
    }
    
    .btn-trans {
        background: none;
        border: solid 2px cornsilk;
        color: cornsilk;
    }
    
    .btn-silk {
        border: solid 2px cornsilk;
        background: #F06363;
        color: cornsilk;
    }
    
    .btn-jumbo:hover {
        background: #144564;
    }
    
    .footer {
        position: relative;
        margin-bottom: 0px;
        margin-top: 0px;
        /* negative value of footer height */
        height: 150px;
        clear: both;
        padding-top: 20px;
    }
    
    .contact-img {
        height: 50px;
    }
    
    .quotes {
        width: 100%;
        height: 350px;
        background-image: url(../images/SYDNEY-162.jpg);
        text-align: center;
        background-repeat: 0;
        background-size: cover;
    }
    
    blockquote {
        border-left: none;
        margin-top: 30px;
    }
    /** callcener **/
    
    .callcenter img {
        width: 90%;
        height: 500px;
        box-shadow: 0 0 30px #147b93;
    }
    
    code {
        background: #0f0e0e;
        white-space: pre-wrap;
    }
    /* progress bar */
    
    .progress {
        -webkit-animation: progress 1s linear infinite;
        -moz-animation: progress 1s linear infinite;
        animation: progress 1s linear infinite;
        background-repeat: repeat-x;
        background-size: 30px 30px;
        background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
        background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
        background-color: CornflowerBlue;
        box-shadow: inset 0px 0px 6px 2px rgba(255, 255, 255, .3);
        /*background-image: url(pbar-ani-m.gif)*/
    }
    
    .progress-min {
        -webkit-animation: progress 1s linear infinite;
        -moz-animation: progress 1s linear infinite;
        animation: progress 1s linear infinite;
        background-repeat: repeat-x;
        background-size: 30px 30px;
        background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
        background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
        background-color: #d43535;
        box-shadow: inset 0px 0px 6px 2px rgba(255, 255, 255, .3);
        /*background-image: url(pbar-ani-orange.gif)*/
    }
    
    .progress-mid {
        -webkit-animation: progress 1s linear infinite;
        -moz-animation: progress 1s linear infinite;
        animation: progress 1s linear infinite;
        background-repeat: repeat-x;
        background-size: 30px 30px;
        background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
        background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
        background-color: #ea8209;
        box-shadow: inset 0px 0px 6px 2px rgba(255, 255, 255, .3);
        /*background-image: url(pbar-ani.gif)*/
    }
    
    .progress-average {
        -webkit-animation: progress 1s linear infinite;
        -moz-animation: progress 1s linear infinite;
        animation: progress 1s linear infinite;
        background-repeat: repeat-x;
        background-size: 30px 30px;
        background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
        background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
        background-color: #00cb08;
        box-shadow: inset 0px 0px 6px 2px rgba(255, 255, 255, .3);
        /*background-image: url(pbar-ani-green.gif)*/
    }
    
    #progress {
        width: 100%;
        height: 30px;
        border: 1pt solid #111;
        border-radius: 4px;
        background: #404040;
        border: 1px solid #272727;
        overflow: hidden;
        box-shadow: rgb(96, 96, 96) 0 0px 20px -1px;
    }
    
    #progress div {
        height: 30px;
        color: #404040;
        text-align: right;
        line-height: 30px;
        /* same as #progressBar height if we want text middle aligned */
        width: 0;
        border-right: 1px solid #272727;
    }
    
    @-webkit-keyframes progress {
        to {
            background-position: 30px 0;
        }
    }
    
    @-moz-keyframes progress {
        to {
            background-position: 30px 0;
        }
    }
    
    @keyframes progress {
        to {
            background-position: 30px 0;
        }
    }
    
    .progress2 {
        -webkit-animation: progress 1s linear infinite;
        -moz-animation: progress 1s linear infinite;
        animation: progress 1s linear infinite;
        background-repeat: repeat-x;
        background-size: 30px 30px;
        background-color: CornflowerBlue;
        box-shadow: inset 0px 0px 6px 2px rgba(255, 255, 255, .3);
        background-image: url(pbar-ani-m.gif)
    }
    
    .progress-min2 {
        -webkit-animation: progress 1s linear infinite;
        -moz-animation: progress 1s linear infinite;
        animation: progress 1s linear infinite;
        background-repeat: repeat-x;
        background-size: 30px 30px;
        background-color: #d43535;
        box-shadow: inset 0px 0px 6px 2px rgba(255, 255, 255, .3);
        background-image: url(pbar-ani-orange.gif);
    }
    
    .progress-mid2 {
        -webkit-animation: progress 1s linear infinite;
        -moz-animation: progress 1s linear infinite;
        animation: progress 1s linear infinite;
        background-repeat: repeat-x;
        background-size: 30px 30px;
        background-color: #ea8209;
        box-shadow: inset 0px 0px 6px 2px rgba(255, 255, 255, .3);
        background-image: url(pbar-ani.gif)
    }
    
    .progress-average2 {
        -webkit-animation: progress 1s linear infinite;
        -moz-animation: progress 1s linear infinite;
        animation: progress 1s linear infinite;
        background-repeat: repeat-x;
        background-size: 30px 30px;
        background-image: url(pbar-ani-green.gif);
        background-color: #ea8209;
        box-shadow: inset 0px 0px 6px 2px rgba(255, 255, 255, .3);
    }
    
    #progress2 {
        width: 100%;
        height: 30px;
        border: 1pt solid #111;
        border-radius: 4px;
        background: #404040;
        border: 1px solid #272727;
        overflow: hidden;
        box-shadow: rgb(96, 96, 96) 0 0px 20px -1px;
    }
    
    #progress2 div {
        height: 30px;
        color: #404040;
        text-align: right;
        line-height: 30px;
        /* same as #progressBar height if we want text middle aligned */
        width: 0;
        border-right: 1px solid #272727;
    }
    /** media **/
    
    @media (max-width:991px),
    (max-width:778px),
    (max-width:440px) {
        .back {
            height: auto !important;
        }
        .back-blue {
            background: #132033;
            text-align: center;
        }
        .plugin {
            margin-top: auto;
        }
        .th-round {
            margin-top: 60px;
        }
        .blur {
            padding-top: 20px;
        }
        .jumbotron h2 {
            margin-top: 10px;
            margin-bottom: 10px;
            font-size: 30px;
            color: cornsilk;
            text-shadow: 1px 2px #606060;
        }
        .btn-jumbo {
            width: 50% !important;
            margin-bottom: 10px;
        }
        .footer {
            height: auto;
        }
        .about-1 {
            display: none;
        }
    }