main {
    padding-top: calc(35px + 3rem)
}

.section {
    padding: 2rem 0
}

.page-title {
    background-color: var(--background-light-color)
}

.page-title h2 {
    font-size: 2rem
}

h3 {
    font-size: 1.5rem
}

h4 {
    font-size: 1.25rem
}

h3+p {
    margin-top: 1.5rem
}

.skills h4 {
    font-weight: 400
}

.skills i {
    font-size: 1.25rem;
    margin-right: .25rem
}

.align-center {
    align-items: center
}

.about img {
    box-shadow: 0 8px 15px rgba(0,0,0,.1);
    max-height: 500px;
    margin-right: 1.5rem;
    max-width: 600px
}

.section-pt-0 {
    padding-top: 0
}

.schools,.skills {
    margin-top: 1.5rem
}

.schools>div>.row,.works>div>.row {
    padding: .5rem 1rem;
    margin: 0 -1rem;
    height: 100%
}

.schools,.works {
    margin: 1.5rem -1rem 0 -1rem
}

.works {
    text-align: center
}

.works img {
    max-width: 100%;
    height: 70px;
    margin-bottom: 1.5rem
}

.schools>div>.row>div,.works>div>.row>div {
    padding: 1rem 1.5rem;
    border-radius: .5rem;
    border: 1px solid #f0f0f0;
    width: 100%;
    box-shadow: 0 8px 15px rgba(0,0,0,.03)
}

.schools .icon {
    width: 75px;
    height: 75px;
    background: #f9f9f9;
    border-radius: 50%;
    padding: 22.5px;
    margin-right: 1rem
}

.schools .icon i {
    font-size: 30px
}

.schools p,.works p {
    margin-top: 1.5rem
}

.skills>div {
    padding: .75rem
}

.skills p {
    margin-top: .5rem
}

.projects .categories span {
    padding: .5rem 1rem;
    border-radius: .5rem;
    background: #fff;
    box-shadow: 0 8px 15px rgba(0,0,0,.1);
    transition: all .5s;
    cursor: pointer;
    display: inline-block
}

.projects .categories span.active {
    background: var(--primary-color);
    color: #fff
}

.projects .categories span:hover {
    box-shadow: 0 8px 15px rgba(0,0,0,.2)
}

.projects .categories span {
    margin-right: 1rem;
    margin-bottom: 1rem
}

.projects .categories {
    margin-bottom: -1rem
}

.projects>.row {
    width: 100%;
    margin-top: 2rem;
    overflow: hidden
}

.projects>.row>div {
    margin-bottom: 1rem
}

.page-layout .card,.projects .card {
    background: #fff;
    border-radius: .75rem;
    box-shadow: 0 0 10px #0000000d;
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
    transition: all .5s
}

.contact .card,.error-message,.success-message,.warning-message {
    box-shadow: 0 0 10px #0000000d;
    border: 1px solid #f0f0f0;
    background: #fff;
    border-radius: .75rem;
    padding: 1rem;
    height: 100%;
    word-break: break-word;
    width: 100%
}

.error-message,.success-message,.warning-message {
    display: flex;
    align-items: center;
    color: #fff
}

.error-message {
    background: var(--danger-color)
}

.success-message {
    background: var(--success-color)
}

.warning-message {
    background: var(--warning-color)
}

.error-message p,.success-message p,.warning-message p {
    flex: 1
}

.error-message i,.success-message i,.warning-message i {
    font-size: 1.25rem
}

.contact {
    margin: 0 -1rem
}

.contact .card h3 {
    font-size: 1.25rem;
    font-weight: 400
}

.contact .card h3:first-of-type {
    font-size: 1.5rem;
    font-weight: 700
}

.contact .card i {
    font-size: 3rem
}

.projects .card:hover {
    box-shadow: 0 0 15px #0000000d
}

.page-layout .card>img,.projects .card img {
    width: 100%;
    border-top-left-radius: .75rem;
    border-top-right-radius: .75rem;
    height: 175px
}

.projects .card img {
    width: 100%
}

.page-layout .card>img {
    height: unset;
}

.blog-posts .card>img {
    height: 200px
}

.categories-box {
    margin-bottom: 1rem;
    padding: 1rem
}

.categories-box b {
    font-size: 1.15rem
}

.categories-box a {
    display: flex;
    align-items: center;
    color: var(--primary-dark-color);
    margin-top: .75rem;
    transition: all .5s
}

body.dark .categories-box a {
    color: var(--primary-light-color)
}

.categories-box a.active,.categories-box a:hover {
    color: var(--primary-color)!important
}

.categories-box a i {
    margin-right: .5rem
}

.content pre {
    font-family: monospace!important;
    font-size: 1.1rem;
    line-height: 1.1rem
}

.page-layout .card .content,.projects .card .content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1
}

.projects .card h4 {
    font-size: 1.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.page-layout .card h3 {
    font-size: 2rem;
    margin-bottom: 1rem
}

.projects .card p {
    margin: 1rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f0f0f0;
    flex-grow: 1
}

.projects .card small {
    display: flex;
    align-items: center;
    font-size: .7rem
}

.projects .card small i {
    margin-right: .25rem
}

.page-layout {
    margin: 0 -1rem
}

.h-unset {
    height: auto!important
}

.border-bottom {
    padding-bottom: 1rem;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 1rem
}

.card.h-unset .content h4 {
    margin-bottom: 1rem
}

.card.price {
    margin-top: 1rem
}

.card.price i {
    font-size: 3rem
}

.card.price .row {
    align-items: center
}

.card.price .content h4 {
    margin-bottom: .5rem
}

.card.price h3 {
    margin-bottom: 0;
    font-weight: 400
}

.feature {
    display: flex;
    align-items: center
}

.feature+.feature {
    margin-top: .75rem
}

.feature i {
    font-size: 1.25rem;
    margin-right: .5rem
}

.page-layout .card .content div {
    word-break: break-word
}

.bg-facebook {
    background: #3b5998
}

.btn.bg-facebook:hover {
    background: #2c4272
}

.bg-twitter {
    background: #00aced
}

.btn.bg-twitter:hover {
    background: #0081b1
}

.bg-linkedin {
    background: #0072b1
}

.btn.bg-linkedin:hover {
    background: #005584
}

.btn-social {
    width: 100%;
    margin-top: 1rem
}

.btn-social i {
    margin-right: .5rem
}

.order-form .row {
    margin: 1rem -1rem
}

.order-form .row>div {
    width: 100%;
    margin-top: 1.5rem
}

.order-form .row>div.order {
    margin-top: 0
}

.order-form {
    margin: -1rem 0
}

.icon-lg {
    font-size: 6rem
}

.order.result {
    text-align: center
}

.order.result h2 {
    font-size: 1.5rem;
    line-height: 1.5rem;
    margin: 1.5rem 0
}

.order.result .btn {
    margin-top: 1.5rem
}

.order.result .btn i {
    margin-right: .5rem
}

.banks .row,.blogs .row {
    border-radius: .75rem;
    box-shadow: 0 0 10px #0000000d;
    height: 200px
}

.banks .row {
    height: inherit;
    min-height: 200px
}

.banks .col-md-3 {
    border-top-right-radius: .75rem;
    border-bottom-right-radius: .75rem
}

.banks,.blogs {
    width: 100%;
    margin: 0 .5rem
}

.blogs .row img {
    width: 100%;
    height: 200px;
    border-top-left-radius: .75rem;
    border-top-right-radius: .75rem
}

.blogs .row {
    height: inherit
}

.blogs .row>div {
    max-width: 100%!important;
    flex-basis: 100%!important;
    width: 100%!important
}

.blogs>div {
    margin-bottom: 1rem
}

.blogs .row .col-md-9 {
    margin-bottom: .5rem
}

.banks .row img {
    height: 50px;
    max-width: 100%
}

.banks .row .col-md-3 {
    background-color: var(--background-light-color);
    display: flex;
    align-items: center;
    justify-content: center
}

.banks .row .col-md-9,.blogs .row .col-md-9 {
    padding: 1rem
}

.banks .row h2,.blogs .row h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.projects.mt-0>.row {
    margin: 0!important
}

.blog-page .pagination {
    margin-left: 0!important;
    margin-right: 0!important
}

.search-box {
    position: relative;
    margin-bottom: 1rem
}

.search-box i {
    cursor: pointer;
    position: absolute;
    font-size: 20px;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%)
}

.soft-shadow {
    box-shadow: 0 0 10px #0000000d!important;
    border: none!important
}

.banks .row,.blogs .row,.blogs .row>div {
    padding: 0
}

.blogs .row .col-md-9 p {
    word-break: break-word
}

.blogs .row span {
    display: flex;
    align-items: center;
    margin-top: 1rem
}

.banks .row p+p {
    margin-top: .5rem
}

.banks .row i {
    cursor: pointer;
    margin-left: .25rem
}

.blogs .row span i {
    font-size: 1.25rem;
    margin-right: .25rem
}

.blogs a+a {
    margin: 1rem;
    display: inline
}

.banks>.row+.row {
    margin-top: 1rem
}

.pagination {
    margin: 0 -.5rem;
    margin-top: 1rem
}

.pagination li {
    display: inline-flex;
    align-items: center;
    padding: .5rem 1rem;
    border-radius: .5rem;
    cursor: pointer;
    transition: all .5s;
    box-shadow: 0 8px 15px rgba(0,0,0,.1);
    border: 1px solid var(--primary-color)
}

.pagination li.active {
    background-color: var(--primary-color)
}

.pagination a {
    color: var(--primary-color)
}

.pagination li.active a {
    color: #fff
}

.page-layout .col-md-8 {
    width: 100%
}

#disqus_thread {
    margin-top: 1.5rem
}

.tab {
    margin-top: 1.5rem;
    transition: all .5s
}

.tab#notification {
    display: none
}

#accounts>div>div,#accounts>div>div>div,.tab#notification>.row,.tab#notification>div>div:nth-child(1) {
    margin-top: 0!important
}

@media (max-width: 992px) {
    .about {
        width:100%
    }

    .about img {
        margin-right: 0;
        margin-bottom: 1.5rem;
        max-width: unset;
        max-height: unset;
        width: 100%
    }

    main .row {
        margin: 0
    }

    .schools,.skills,.works {
        margin-top: 1.5rem!important
    }

    .skills>div {
        padding: .75rem 0
    }

    .section .container {
        overflow-x: hidden
    }

    .schools .icon {
        margin-bottom: 1.5rem
    }

    .projects .categories {
        display: flex;
        align-items: center;
        overflow: scroll;
        white-space: nowrap;
        padding: 1rem 0;
        margin: -1rem 0
    }

    .projects {
        overflow: auto
    }

    .projects .categories span {
        box-shadow: 0 8px 15px rgba(0,0,0,.05)
    }

    .col-md-8+.col-md-4 {
        margin-top: 1rem;
        width: 100%
    }

    .projects .card h4 {
        white-space: inherit
    }

    .order-form .row {
        margin: 1rem 0
    }

    .blogs {
        margin: inherit
    }

    .blogs .row {
        height: inherit
    }

    .banks .row .col-md-3,.blogs .row img {
        border-radius: 0;
        border-top-left-radius: .75rem;
        border-top-right-radius: .75rem
    }

    .blogs .row>div {
        width: 100%
    }

    .blogs .row .col-md-9 {
        margin-bottom: .5rem
    }

    .contact .col-xs-12+div {
        margin-top: 1rem
    }

    .contact {
        margin: 0 -.5rem!important;
        text-align: center
    }

    .banks>.row {
        flex-direction: column-reverse
    }

    .banks .row .col-md-3 {
        padding: 3rem 0
    }
}

body.dark .banks .row,body.dark .blogs .row,body.dark .categories span:not(.active),body.dark .schools .icon {
    background-color: var(--background-darken-color);
    color: #fff
}

body.dark .contact .card,body.dark .schools>div>.row>div,body.dark .works>div>.row>div {
    border-color: #131313
}

body.dark .contact .card {
    background-color: var(--background-darken-color)
}