html,
body,
div,
span,
applet,
object,
iframe,
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,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
}

/* Reset and preset - start */
html, body, p, table, tbody, td, tr, section, aside, figure, iframe, figcaption, hgroup, header, footer, nav, article, div, span, form, ul, ol, li, blockquote, img {
    border: none;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

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

body {
    -webkit-font-smoothing: antialiased;
    color: #666;
    /* font-family: "Open Sans", sans-serif; */
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

a {
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
    color: #000;
    text-decoration: none !important;
}

    a:hover, a:focus, a:active {
        color: #000;
        outline: 0;
    }

.container {
    max-width: 1000px;
    padding-top: 0px;
}

.slider > .container {
    margin-top: 15px;
}

.containerOuter {
    overflow: hidden;
    width: 100%;
}

#main-content {
    background-color: #fff;
}


.containerInner {
    margin: 0 auto;
    overflow: auto;
    width: 1000px;
}

/* Reset and preset - end */

/* Top-bar start */

.dummy-text {
    display: inline;
}

#top-bar {
    color: #fff;
    width: 100%;
}

.top-bar-left {
    background-color: #1570a6;
    float: left;
    width: 70%;
}

.top-bar-right {
    background-color: rgba(239, 239, 239, 0.78);
    text-align: center;
}

.contact-details a {
    color: #000;
    font-size: 100%;
}

    .contact-details a:hover {
        -moz-opacity: .7;
        -webkit-opacity: .7;
        opacity: .7;
    }

.bottom-bar {
    /*background-color: rgba(239, 239, 239, 0.78);*/
    width: 100%;
}

/* Top-bar end */


/* Header start */

header {
    margin-bottom: 0;
    background-color: #fff;
}

.hack-left {
    margin: 0;
    padding: 0;
    width: 270px;
}

.hack-right {
    margin: 0;
    padding: 0;
}

header .logo {
    margin-top: 10px;
}

    header .logo .logo-image {
        float: left;
        margin-top: 10px;
        width: 50px;
    }

    header .logo .logo-text {
        font-weight: bold;
        text-transform: uppercase;
    }

    header .logo h1 {
        color: #000;
        font-size: 35px;
        font-weight: bold;
        margin: 0px;
        padding: 0px;
    }

        header .logo h1 a {
            color: #000;
            font-weight: bold;
            margin: 0px;
            padding: 0px;
        }

header .logo-meta {
    font-size: 16px;
    font-weight: bold;
    line-height: 35px;
    margin-top: -15px;
    padding-left: 180px;
}

    header .logo-meta a {
        color: #666;
    }

/* Header end */


/* Menu start */

.menu {
    margin-bottom: 15px;
    margin-top: 15px;
}

#menu-buttons ul {
    background: transparent;
    font: bold 13px Verdana;
    list-style-type: none;
}

#menu-buttons li {
    display: inline;
}

    #menu-buttons li > a {
        background-color: #1171a3;
        color: #fff;
        display: block;
        float: left;
        font-size: 100%;
        font-weight: normal;
        height: 89.5px;
        margin: 0px 2px;
        overflow: hidden;
        padding: 5px;
        position: relative;
        text-decoration: none;
        width: 89.5px;
    }

        #menu-buttons li > a #menu-button-slide {
            bottom: -45px;
        }


        #menu-buttons li > a:hover {
            background: #000;
        }


        #menu-buttons li > a > i {
            display: block;
            font-size: 30px;
            margin: 0 auto;
            margin-bottom: 10px;
            margin-top: 10px;
            width: 30px;
        }

    #menu-buttons li a:visited {
        color: #fff;
    }

#menu-buttons a.selected {
    background: #000; /*background of tab with "selected" class assigned to its LI */
}

#menu-button-slide {
    background-color: #1a1a1a;
    bottom: -89.5px;
    color: #fff;
    height: 79px;
    left: 0;
    padding-top: 8px;
    position: absolute;
    text-align: center;
    width: 89.5px;
}

/* Menu end */

/* Slider and intro start */

.slider {
    -color: #d2d2d2;
    background-color: #000;
    border-bottom: 10px solid #1570a6;
    border-top: 5px solid #1570a6;
    color: #fff;
}

#slider-intro {
    background: #000 url('../Images/photo.png') no-repeat center bottom;
    color: #fff;
    height: 280px;
    position: relative;
}


#slider-about, #slider-contact {
    background-color: #1a1a1a;
    height: 110px;
}


.hIntro {
    font-size: 400%;
    font-weight: bold;
    margin-top: 2.8em;
    text-align: center;
}
/* Slider and intro end */


/* Introduce start */

#introduce {
    /*background-color: rgba(239, 239, 239, 0.78);*/
    padding: 20px 0px;
}

    #introduce #introduce-title {
        font-size: 24px;
    }

    #introduce .containerInner {
        padding-left: 45px;
        padding-top: 0px;
    }

    #introduce p {
        font-size: 140%;
        line-height: 1.7;
    }

/* Introduce end */


/* Footer start */

footer {
    /*background-color: rgba(239, 239, 239, 0.78);*/
    border-top: 10px solid #1570a6;
}

    footer a {
        -moz-transition: .5s;
        -ms-transition: .5s;
        -o-transition: .5s;
        -webkit-transition: .5s;
        transition: .5s;
        /*  color: #287fac; */
    }

    footer h3 {
        color: #666;
        margin-bottom: 8px;
        padding-bottom: 8px;
    }

.fcolumn {
    float: left;
    padding-bottom: 30px;
    padding-left: 30px;
    width: 219px;
}

    .fcolumn li {
        list-style: none;
    }

.copyright {
    font-size: 95%;
    margin: 2em auto;
    text-align: center;
    font-weight: bold;

}
/* Footer end */








/* Text colors start */

.lightblue {
    color: #52b9e9 !important;
}

.white {
    color: #fff !important;
}


.black {
    color: #000 !important;
}

.msblue {
    color: #1570a6 !important;
}

.customblue {
    color: #287fac !important;
}

.blue {
    color: #1171a3 !important;
}

.green {
    color: #43c83c !important;
}

.orange {
    color: #f88529 !important;
}

.red {
    color: #fa3031 !important;
}

.violet {
    color: #932ab6 !important;
}

/* Text colors end */


/* Background colors start */

.bFacebook {
    background: #3B5998 !important;
    border: 0px !important;
    color: #fff !important;
}

.bTwitter {
    background: #1AB2E8 !important;
    border: 0px !important;
    color: #fff !important;
}

.bLinkedIn {
    background: #0274B3 !important;
    border: 0px !important;
    color: #fff !important;
}

.bInstagram {
    background: #125688 !important;
    border: 0px !important;
    color: #fff !important;
}

.bblack {
    background: #222 !important;
    border: 0px !important;
    color: #fff !important;
}

.blightblue {
    background: #52b9e9 !important;
    border: 0px !important;
    color: #fff !important;
}

.bblue {
    background: #1171a3 !important;
    border: 0px !important;
    color: #fff !important;
}

.bgreen {
    background: #43c83c !important;
    border: 0px !important;
    color: #fff !important;
}

.borange {
    background: #f88529 !important;
    border: 0px !important;
    color: #fff !important;
}

.bred {
    background: #fa3031 !important;
    border: 0px !important;
    color: #fff !important;
}

.bviolet {
    background: #932ab6 !important;
    border: 0px !important;
    color: #fff !important;
}

/* Background colors end */


/* Content Page Start */

#content .container {
    padding-left: 0px;
}

/* Content Page End */

/* About Page Start */

#about {
    font-size: 100%;
    overflow: visible !important;
    padding-bottom: 2.5em;
    padding-top: 2.5em;
    position: relative;
}

.blogBody {
    border-left: 2px solid rgba(239, 239, 239, 0.78);
    border-right: 2px solid rgba(239, 239, 239, 0.78);
    font-size: 100%;
    padding-bottom: 1.5em;
    padding-top: 1.5em;
    position: relative;
}

.blogBody-content {
    padding-left: 50px;
    padding-right: 50px;
}

img {
    margin-right: 30px;
}

.blogBody-content > img {
    float: left;
    margin-right: 30px;
}

.blog-image {
    float: left;
}

.blog-introduce p {
    width: 300px;
}


/* Social Starts */

.social a {
    display: inline-block;
    height: 24px;
    line-height: 24px;
    margin-bottom: 10px;
    margin-right: 5px;
    text-align: center;
    width: 24px;
}

/* Social Ends */

footer li:hover {
    -moz-opacity: .7;
    -webkit-opacity: .7;
    color: #000;
    opacity: .7;
}

footer .containerInner {
    color: #fff;
    padding: 30px 0 30px 0;
}

.footer-container {
    border-right: 1px solid #c8c8c8;
    float: left;
    padding-bottom: 30px;
    padding-left: 15px;
    width: 180px;
}

    .footer-container:last-child {
        border-right: 1px solid transparent;
    }

    .footer-container li {
        list-style: none;
    }


i.title-icon {
    font-size: 17px;
    border: 2px solid #1570a6;
    border-radius: 100px !important;
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 30px;
    position: relative;
    top: -3px;
    text-align: center;
    margin-right: 7px;
}

.title {
    margin-bottom: 15px;
    padding-bottom: 10px;
}

.rinfo {
    padding-bottom: 25px;
}

.rblock {
    padding-bottom: 25px;
}


#search {
    float: right;
    overflow: hidden;
}

.searchBar {
    color: #c6c6c6;
    font-size: 80%;
    padding: 0.43em 0 0.57em;
}

    .searchBar .containerInner .searchBarNav {
        float: right;
        width: 875px;
    }

.blogHeader .blogTitle {
    font-size: 250%;
    font-weight: bold;
    color: #fff;
}

.article-header .article-title {
    display: block;
    margin-bottom: 14px;
}

.containerInnerNarrow {
    width: 750px;
    margin: 0 auto;
    overflow: auto;
    padding-left: 125px;
    padding-right: 125px;
    overflow: hidden;
}

.article-title {
    font-weight: bold;
    font-size: 1.6em;
    color: #565a5f;
    text-decoration: none;
    line-height: 1.3em;
}

.head-big {
    font-weight: bold;
}

.article-inner {
}

.article-header {
    padding: 0px 0px 0;
}

.article-meta {
    line-height: 1.6em;
    text-decoration: none;
    text-transform: uppercase;
}

    .article-meta > div {
        float: left;
        margin-right: 10px;
    }

    .article-meta:before,
    .article-meta:after {
        content: "";
        display: table;
    }

    .article-meta:after {
        clear: both;
    }

.article-date {
}

.fa-calendar:before {
    content: "\f073";
}

.article-category {
}

.fa-folder:before {
    content: "\f07b";
}

.article-category-link {
}

.article-tags {
}

.fa-tags:before {
    content: "\f02c";
}

.article-tags-link {
}

.article-entry {
    color: #565a5f;
    padding: 0 0px;
    line-height: 1.6em;
}

    .article-entry p, .article-entry table {
        line-height: 1.6em;
        margin: 1.6em 0;
    }

.article-footer {
    font-size: 0.85em;
    line-height: 1.6em;
    border-top: 1px solid #eceff2;
    padding-top: 1.6em;
    margin: 0 20px 20px;
}

.blogMetaInfo {
    font-size: 14px;
    color: #fff;
    background-color: #1570a6;
    padding-bottom: 10px;
}

p {
    margin-bottom: 1.5em;
}

pre {
    margin-bottom: 1.5em;
}

h1, h2, h3, h4 {
    /*margin-bottom: 1em;*/
}

.blogBody div.syntaxhighlighter {
    width: 750px !important;
    margin: 1em auto !important;
    position: relative !important;
    overflow: auto !important;
    border: 1px dashed #e0e0e0 !important;
    padding: 1em !important;
    font-size: 85% !important;
}

/* Model Stuf */

#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}


.buttercms-footer {
    background-image: url(https://cdn.buttercms.com/PGJPyIwaQ2KnOA8UyKfH);
    height: 280px;
    width: 100px;
    position: relative;
}

.article-more-link {
    margin: 1.6em 0;

}

    .article-more-link a {
        display: inline-block;
        line-height: 1em;
        padding: 6px 15px;
        border-radius: 15px;
        background: #1570a6;
        color: #fff;
        text-shadow: 0 1px #1570a6;
        text-decoration: none;
    }


.background-page {
    background: rgba(239, 239, 239, 0.78) repeat center top;
}






@media only screen and (max-width: 1000px) {
    #menu-buttons ul {
        background: transparent;
        font: bold 13px Verdana;
        list-style-type: none;
    }

    #menu-buttons li {
        display: inline;
    }

        #menu-buttons li > a {
            background-color: transparent;
            color: black;
            display: inline;
            float: none;
            font-weight: normal;
            height: auto;
            margin: 0px 2px;
            overflow: hidden;
            padding: 5px;
            position: relative;
            text-align: center;
            text-decoration: none;
            width: auto;
        }

    .icon-info-sign:before {
        content: none;
    }

    .icon-desktop:before {
        content: none;
    }

    .icon-comments:before {
        content: none;
    }

    .icon-pencil:before {
        content: none;
    }

    .icon-cloud:before {
        content: none;
    }

    .icon-camera:before {
        content: none;
    }

    .icon-envelope:before {
        content: none;
    }

    #menu-buttons li > a #menu-button-slide {
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
        -webkit-transition: none;
        bottom: 0;
        transition: none;
    }

    #menu-button-slide {
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
        -webkit-transition: none;
        background-color: transparent;
        bottom: 0;
        color: #000;
        height: auto;
        left: 0;
        position: relative;
        text-align: center;
        transition: none;
        width: auto;
    }

    #menu-buttons li > a:hover {
        background: none;
    }


        #menu-buttons li > a:hover #menu-button-slide {
            text-decoration: underline;
        }

    #menu-buttons li > a > i {
        display: inline;
        font-size: 30px;
        margin: 0 auto;
        margin-bottom: 10px;
        margin-top: 18px;
        width: 30px;
    }


    #menu-buttons li a.selected {
        background: transparent; /*background of tab with "selected" class assigned to its LI */
    }

    #menu-buttons a.selected #menu-button-slide {
        text-decoration: underline;
    }


    .containerInner {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0 auto;
        overflow: auto;
        width: 100% !important;
    }


    #slider-intro {
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        height: 250px;
        width: auto;
    }

    .hIntro {
        font-size: 300%;
        margin: 1.5em 0;
        margin-bottom: 0;
        margin-top: 150px;
        text-align: center;
    }

    nav {
        float: none;
        text-align: center;
        width: 100%;
    }

    header .logo-text {
        background: transparent;
        float: none !important;
        font-size: 10%;
        text-align: center;
    }

    header .logo h1 {
        font-size: 26px;
        margin: 0px;
        padding: 0px;
    }

    .pull-left {
        float: none !important;
    }

    header .logo-meta {
        color: #525252;
        font-size: 14px;
        font-weight: bold;
        line-height: 35px;
        padding-left: 118px;
        padding-top: -150px;
    }

        header .logo-meta a {
            color: #666;
        }

    .mobile-header {
        float: none !important;
        min-height: 1px;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
        width: 100%;
    }

    .mobile-menu {
        display: block;
        margin-bottom: 10px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        min-height: 1px;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
        width: 100%;
    }

    /* Introduce starts */
    #introduce #introduce-title {
        font-size: 20px;
    }


    #introduce p {
        font-size: 120%;
        line-height: 1.7;
    }

    /* Introduce end */

    .mobile-menu li {
        display: inline;
        list-style-type: none;
    }

        .mobile-menu li #menu-button-slide {
            display: inline;
        }

    .top-bar-left {
        width: 100%;
    }

    .top-bar-right, .contact-details, .bottom-bar {
        display: none;
        visibility: hidden;
    }

    .footer-container {
        border-width: 0;
        display: block;
        font-size: 90%;
        padding-left: 30px;
    }

        .footer-container.social {
            width: 150px;
        }

    .article-title {
        font-size: 1.6em;
    }

    .blogBody-content {
        padding-left: 0px;
        padding-right: 0px;
    }

    .blog-info {
        padding-left: 0px;
        padding-right: 0px;
        font-size: .8em;
    }

    .containerInner {
        padding-left: 10px;
        padding-right: 10px;
    }

    .article-header {
        padding: 0;
    }

    .article-entry {
        padding: 0;
    }

    img {
        max-width: 100%;
        height: auto;
        width: auto\9; /* ie8 */
    }

    .form-horizontal {
        padding-left: 10px;
    }

    .dummy {
        font-size: 0px;
        margin: 0px;
        padding: 0px;
    }

    .modal-content {
        width: 200%;
    }
}