@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');

body {
    margin: 0;
    padding: 0;
    background-position: center 20px;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 26px;
}

.blockquote {
    font-size: 17px;
}

a {
    -webkit-transition: all 0.25s linear 0s;
    -moz-transition: all 0.25s linear 0s;
    -o-transition: all 0.25s linear 0s;
    transition: all 0.25s linear 0s;
}

    a:hover,
    a:focus {
        text-decoration: none;
    }

.btn-primary {
    border: 0;
    border-bottom: 0;
    border-left: 0;
    box-shadow: inset 0 -3.2px rgba(0, 0, 0, 0.12), inset 2px 0 rgba(0, 0, 0, 0.1);
    outline: none;
    -webkit-outline: none;
    -moz-outline: none;
    -o-outline: none;
    outline: none;
    margin-right: 5px;
}

    .btn-primary:hover {
        color: #ffffff;
        outline: none;
    }

    .btn-primary:focus {
        box-shadow: none;
        color: #ffffff;
        outline: none;
    }

.form-control,
textarea {
    border-left: 0;
    border-radius: 0;
    border-right: 0;
    border-top: 0;
    background-color: transparent;
    font-size: 14px;
    border-bottom: 2px solid #E6E6E6;
    font-family: 'Open Sans', sans-serif;
}

    .form-control:focus,
    textarea:focus {
        background-color: transparent;
    }

.navbar-light .navbar-toggler,
.navbar-light .navbar-toggler:focus,
.navbar-light .navbar-toggler:hover {
    outline: 0;
    cursor: pointer;
}

.navbar-light .navbar-toggler-icon {
    background-image: none;
}

    .navbar-light .navbar-toggler-icon i {
        font-size: 33px;
    }

.progress-bar {
    font-size: 14px;
    position: relative;
    text-align: left;
    padding: 5px 5px 5px 9px;
}

h3.heading {
    font-weight: 600;
    letter-spacing: -2px;
    text-align: center;
    margin-bottom: 28px;
    position: relative;
}

    h3.heading:after {
        position: absolute;
        text-align: center;
        content: '';
        top: 38px;
        z-index: 99;
        left: 47.4%;
        width: 59px;
    }

.box {
    margin-top: 80px;
    padding: 20px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
}

    .box:last-child {
        margin-bottom: 20px;
    }

.header {
    width: 100%;
    margin-top: -95px;
}

    .header .photo img {
        height: auto;
        width: 150px;
        border: 6px solid;
        border-color: #E6E6E6;
    }

    .header h1 {
        font-size: 35px;
        font-weight: 600;
        letter-spacing: -2px;
    }

    .header h2 {
        font-size: 24px;
    }

.social a {
    font-size: 20px;
    height: 40px;
    width: 40px;
    display: block;
    line-height: 26px;
    padding: 7px;
    text-align: center;
    -webkit-transition: all 0.25s linear 0s;
    -moz-transition: all 0.25s linear 0s;
    -o-transition: all 0.25s linear 0s;
    transition: all 0.25s linear 0s;
}

    .social a:hover,
    .social a:focus {
        border-bottom: 0px;
    }

.social li.twitter a:hover,
.social li.twitter a:focus {
    background-color: #55acee;
    color: #ffffff;
}

.social li.facebook a:hover,
.social li.facebook a:focus {
    background-color: #3b5999;
    color: #ffffff;
}

.social li.dribbble a:hover,
.social li.dribbble a:focus {
    background-color: #ea4c89;
    color: #ffffff;
}

.social li.linkedin a:hover,
.social li.linkedin a:focus {
    background-color: #0077B5;
    color: #ffffff;
}

.social li.instagram a:hover,
.social li.instagram a:focus {
    background-color: #e4405f;
    color: #ffffff;
}

.social li.google-plus a:hover,
.social li.google-plus a:focus {
    background-color: #dd4b39;
    color: #ffffff;
}

.social li.github a:hover,
.social li.github a:focus {
    background-color: #333333;
    color: #ffffff;
}

.social .list-inline-item:not(:last-child) {
    margin: 0;
}

.info a {
    font-size: 18px;
}

    .info a:hover,
    .info a:focus {
        text-decoration: none;
        border: 0;
    }

.experience {
    position: relative;
}

    .experience::before {
        top: 10px;
        left: 0;
        bottom: 0;
        width: 1px;
        content: '';
        opacity: .5;
        position: absolute;
    }

.experience-box {
    position: relative;
    padding-left: 20px;
    margin-bottom: 25px;
}

    .experience-box:last-child {
        margin-bottom: 0px;
    }

    .experience-box::before {
        content: "";
        top: 9px;
        left: -3px;
        position: absolute;
        width: 7px;
        height: 7px;
        border-radius: 50%;
    }



    .experience-box h4 {
        letter-spacing: 0;
        font-size: 21px;
        margin-top: 15px;
        margin-bottom: 12px;
        font-weight: 400;
    }

.experience-date {
    left: -20px;
    width: 117px;
    letter-spacing: 0;
    line-height: 1.1;
    padding: 6px;
    margin-left: 15px;
    font-size: .625em;
    position: relative;
    display: inline-block;
    color: #ffffff;
}



    .experience-date strong {
        margin: 0;
        padding: 0;
    }

.experience-logo {
    margin-bottom: 10px;
}

    .experience-logo img {
        height: 30px;
    }

.experience-company {
    font-size: 16px;
    margin-bottom: 8px;
    line-height: 1.1;
    letter-spacing: 0;
    display: inline-block;
    font-weight: 600;
}

.experience-box p {
    font-size: .875em;
}

.references img {
    width: 80px;
    height: auto;
}

.references h4 {
    font-size: 22px;
}

.references .designation {
    font-size: 13px;
    display: block;
}

.skills {
    font-size: 13px;
}

    .skills img {
        padding: 4px;
        margin-right: 1px;
        height: 30px;
        position: relative;
        top: -4px;
    }

.interest-box {
    height: 80px;
    text-align: center;
}

    .interest-box i {
        font-size: 30px;
        margin-top: 14px;
    }

    .interest-box span {
        display: block;
    }

.blog-section .card-title {
    text-align: center;
}

    .blog-section .card-title a {
        -webkit-transition: all 0.25s linear 0s;
        -moz-transition: all 0.25s linear 0s;
        -o-transition: all 0.25s linear 0s;
        transition: all 0.25s linear 0s;
    }

        .blog-section .card-title a:hover,
        .blog-section .card-title a:focus {
            border-bottom: 0;
        }

.copyright p {
    font-size: 12px;
}

.blog h1 {
    font-size: 32px;
    line-height: 36px;
    font-weight: 600;
}

.blog .profile img {
    border-radius: 50%;
    width: 50px;
}

.blog .detail {
    min-height: 55px;
    width: 100%;
}

    .blog .detail .ad-info .author {
        border-bottom: 1px solid #ddd;
        height: 30px;
        width: 100%;
    }

        .blog .detail .ad-info .author a:hover,
        .blog .detail .ad-info .author a:focus {
            border: 0;
        }

    .blog .detail .ad-info .datetime {
        height: 25px;
        width: 100%;
        font-size: 13px;
    }

    .blog .detail .share ul li {
        margin-right: 0px;
    }

        .blog .detail .share ul li a {
            color: #ffffff;
            text-align: center;
        }

            .blog .detail .share ul li a span {
                font-family: 'Open Sans', sans-serif;
                font-size: 15px;
                font-weight: 600;
            }

        .blog .detail .share ul li i {
            font-size: 16px;
            height: 30px;
            min-width: 55px;
            padding: 7px 5px;
        }

        .blog .detail .share ul li .fa-facebook {
            background-color: #3b5998
        }

        .blog .detail .share ul li .fa-twitter {
            background-color: #00aced
        }

        .blog .detail .share ul li .fa-google-plus {
            background-color: #dd4b39
        }

        .blog .detail .share ul li .fa-pinterest {
            background-color: #cb2027
        }

        .blog .detail .share ul li .fa-linkedin {
            background-color: #007bb6
        }

.blog .tags a {
    background-color: transparent;
    padding: 4px 10px;
    font-size: 15px;
    border-radius: 5px;
    -webkit-transition: all 0.25s linear 0s;
    -moz-transition: all 0.25s linear 0s;
    -o-transition: all 0.25s linear 0s;
    transition: all 0.25s linear 0s;
}

    .blog .tags a:hover,
    .blog .tags a:focus {
        color: #ffffff;
    }

.comments .media img {
    height: 70px;
}

.comments .media .datetime {
    line-height: 0;
    font-size: 13px;
}

.comments .media .reply {
    font-size: 15px;
    margin-left: 10px;
}

.comments .media h5 small {
    color: #ffffff;
    font-size: 13px;
    padding: 1px 3px;
}

.previous-next .title a {
    line-height: 27px;
    font-size: 17px;
}

    .previous-next .title a:hover,
    .previous-next .title a:focus,
    .navbar-brand:hover,
    .navbar-brand:focus {
        border: 0;
    }

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
    border: 0;
}

.navbar-nav ul {
    display: none !important;
}

    .navbar-nav ul.hover {
        display: block !important;
    }

.navbar-nav ul {
    z-index: 1;
    box-shadow: 0 0 17px 1px rgba(0, 0, 0, .19);
    background-color: #ffffff;
}

.navbar-nav a {
    font-size: 20px;
}

.navbar-nav ul a {
    padding: 8px 28px;
    display: block;
    line-height: 25px;
    font-size: 17px;
}

    .navbar-nav ul a:hover,
    .navbar-nav ul a:focus {
        border: 0;
    }

.error-page {
    margin-top: 10%;
}

    .error-page h1 {
        font-size: 180px;
        font-weight: bold;
        text-shadow: 0px 1px 1px #ddd, 0px 2px 1px #d6d6d6, 0px 3px 1px #ccc, 0px 4px 1px #c5c5c5, 0px 5px 1px #c1c1c1, 0px 6px 1px #bbb, 0px 7px 1px #777, 0px 8px 3px rgba(100, 100, 100, 0.4), 0px 9px 5px rgba(100, 100, 100, 0.1), 0px 10px 7px rgba(100, 100, 100, 0.15), 0px 11px 9px rgba(100, 100, 100, 0.2), 0px 12px 11px rgba(100, 100, 100, 0.25), 0px 13px 15px rgba(100, 100, 100, 0.3);
    }

    .error-page p {
        text-transform: uppercase;
        font-size: 20px;
        line-height: 30px;
        font-weight: bold;
    }

pre {
    background-color: #f7f7f9;
    padding: 5px;
    margin: 20px 0;
    line-height: 22px;
}

.paint {
    position: fixed;
    top: 110px;
    right: 0px;
    z-index: 999;
}

    .paint p {
        font-size: 12px;
        margin: 0;
        line-height: 20px;
        text-align: center;
    }

.switches {
    position: absolute;
    top: 0;
    right: -222px;
    width: 222px;
    border: 1px solid #eee;
    padding: 10px;
    z-index: 9;
    font-size: 0;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

    .switches.open {
        right: 0;
    }

.paint .paint-button {
    position: absolute;
    right: 0;
    border: 0;
    z-index: 9;
    border: 0;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
    padding: 4px 13px;
    cursor: pointer;
    outline: none;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

    .paint .paint-button.open {
        right: 222px;
        box-shadow: none;
        border-left: 1px solid #eee;
        border-right: 0px solid #eee;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }

    .paint .paint-button:hover,
    .paint .paint-button:focus {
        outline: none;
    }

.paint .color-box a {
    position: relative;
    margin: 4px;
    float: left;
}

    .paint .color-box a.active:before {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 28px;
        height: 28px;
        border: 2px solid #fff;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
    }

    .paint .color-box a:hover, .paint .color-box a:focus {
        border: 0;
    }

    .paint .color-box a span {
        width: 32px;
        height: 32px;
        display: block;
        margin: 0 auto;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
    }

.paint .theme-box a {
    position: relative;
    margin: 5px 27px 10px 27px;
    float: left;
}

    .paint .theme-box a.active:before {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 41px;
        height: 41px;
        border: 2px solid #fff;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
    }

    .paint .theme-box a:hover, .paint .theme-box a:focus {
        border: 0;
    }

    .paint .theme-box a span {
        width: 45px;
        height: 45px;
        display: block;
        margin: 0 auto;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
    }

#elastic_grid_demo .buttons-list,
#elastic_grid_demo .infosep,
#elastic_grid_demo .elastislide-horizontal {
    display: none;
}

@media (min-width: 320px) {
    .navbar-brand img {
        height: 70px;
        width: auto;
        max-width: inherit;
    }

    .navbar-toggler-right {
        top: 21px;
        font-size: 27px;
    }

    .navbar-light .navbar-toggler-icon i {
        font-size: 42px;
    }

    .navbar-nav ul {
        width: 100%;
        position: relative;
    }

    h3.heading:after {
        left: 40.4%;
    }
}

@media (min-width: 576px) {
    .navbar-brand img {
        height: 70px;
        width: auto;
        max-width: inherit;
    }

    .navbar-toggler-right {
        top: 21px;
        font-size: 27px;
    }

    .navbar-light .navbar-toggler-icon i {
        font-size: 42px;
    }

    .navbar-nav ul {
        width: 100%;
        position: relative;
    }

    h3.heading:after {
        left: 47.4%;
    }
}

@media (min-width: 768px) {
    .navbar-brand img {
        height: 70px;
        width: auto;
        max-width: inherit;
    }

    .navbar-toggler-right {
        top: 21px;
        font-size: 27px;
    }

    .navbar-light .navbar-toggler-icon i {
        font-size: 42px;
    }

    .navbar-nav ul {
        width: 100%;
        position: relative;
    }

    .experience {
        margin-left: 210px;
    }

        .experience-box::before,
        .experience::before {
            top: 10px;
        }

    .experience-box {
        padding-right: 90px;
    }

        .experience-box h4 {
            font-size: 20px;
            margin-bottom: 12px;
            margin-top: 0;
        }

    .experience-date {
        margin-left: 0;
        margin-right: 22px;
        padding: 9px 6px;
        font-size: .875em;
        text-align: center;
        position: absolute;
        width: 160px;
        right: 100%;
        left: auto;
        top: -4px;
    }

        .experience-date::after {
            content: "";
            top: 0;
            left: 100%;
            width: 0;
            height: 0;
            position: absolute;
            border-top: 16px solid transparent !important;
            border-bottom: 16px solid transparent !important;
            border-right: 10px solid transparent !important;
            border-left: 10px solid transparent;
        }

    h3.heading:after {
        left: 47.4%;
    }
}

@media (min-width: 992px) {
    .navbar-toggleable-md .navbar-nav .nav-link {
        padding: 12px 15px 12px 15px;
    }

    .navbar-brand img {
        height: 80px;
        width: auto;
        max-width: inherit;
    }

    .navbar-nav ul {
        position: absolute;
        width: auto;
    }

    h3.heading:after {
        left: 47.4%;
    }
}
