body {
    font-family: Roboto, sans-serif;
    font-weight: 400;
    color: #263238
}

a:not([href]) {
    color: inherit;
    text-decoration: none;
    cursor: pointer
}

a {
    color: #3f51b5
}

a:hover {
    color: #1a237e
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: .5rem;
    font-weight: 700
}

.btn {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.125rem
}

.btn.active,
.btn.focus,
.btn:active,
.btn:focus {
    outline: 0;
    -webkit-box-shadow: none;
            box-shadow: none
}

.btn-primary {
    color: #fff;
    background-color: #f44336;
    border-color: #f44336
}

.btn-primary:hover {
    background-color: #b71c1c;
    border-color: #b71c1c
}

.advertorial {
    padding: .375rem 0;
    background-color: #cfd8dc;
    text-align: center
}

.advertorial p {
    margin-bottom: 0;
    color: #546e7a;
    font-size: .875rem;
    text-transform: uppercase;
    letter-spacing: .5px
}

.site-header {
    padding: .5rem 0 0;
    background-color: #eceff1
}

.site-logo {
    margin-bottom: .5rem
}

.site-logo__image {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    margin-right: .5rem
}

.site-logo__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0;
    color: #263238
}

.navbar-wrapper {
    background-color: #263238;
    padding: .25rem 0
}

.navbar {
    padding: 0
}

.navbar-toggler {
    border: none;
    padding: 0 .25rem
}

.navbar-toggler:active,
.navbar-toggler:focus {
    outline: 0
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%23ECEFF1' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

.nav-link {
    color: #fff !important;
    font-weight: 700;
    font-size: .875rem;
    text-transform: uppercase;
    -webkit-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out
}

.nav-link.active,
.nav-link:hover {
    color: #cfd8dc !important
}

@media (min-width:768px) {
    .site-header {
        padding: .75rem 0 0
    }

    .site-logo {
        margin-bottom: .75rem
    }

    .site-logo__image {
        width: 80px;
        height: 80px;
        min-width: 80px;
        min-height: 80px;
        margin-right: 1rem
    }

    .site-logo__title {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0;
        color: #263238;
        max-width: 120px
    }

    .navbar-wrapper {
        padding: 0
    }

    .navbar-nav {
        width: 100%
    }

    .navbar-nav .nav-item {
        width: 100%;
        text-align: center
    }

    .navbar-nav .nav-link:hover {
        background-color: #546e7a;
        color: #fff !important
    }

    .navbar-expand-md .navbar-nav .nav-link {
        padding-left: .75rem;
        padding-right: .75rem
    }
}

@media (min-width:992px) {
    .container {
        max-width: 800px
    }
}

@media (min-width:1200px) {
    .container {
        max-width: 800px
    }
}

.post {
    padding: 1rem 0 0px
}

.post__header {
    margin-bottom: 1rem
}

.post__title {
    margin-bottom: 0;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0
}

.post__author {
    background-color: #eceff1;
    padding: .5rem;
    margin-bottom: 1rem
}

.post__author img {
    display: block;
    margin: 0 auto .5rem
}

.post__author p {
    margin-bottom: 0
}

.post__author p span {
    font-style: italic
}

.post__content h3 {
    font-size: 1.25rem
}

.post__question {
    font-weight: 700
}

.post__cta {
    font-size: 1.25rem;
    font-weight: 700
}

.post__footer {
    margin-top: 1.5rem;
    text-align: right
}

.post__footer p {
    font-size: .875rem
}

.post__packshot {
    text-align: center
}

.post__packshot img {
    margin-bottom: 1.5rem
}

.breadcrumb {
    background-color: transparent;
    padding: 0;
    margin-bottom: .5rem
}

.breadcrumb-item a {
    color: #3f51b5;
    font-size: .875rem;
    font-weight: 700
}

.breadcrumb-item:hover a {
    color: #1a237e
}

.breadcrumb-item.active a {
    color: #607d8b
}

.post__comments {
    margin: 2rem 0 0
}

.post__comments h3 {
    font-size: 1.75rem
}

.comments-header h2 {
    display: none
}

.comments-meta {
    color: #607d8b;
    font-size: .875rem;
    margin-bottom: .5rem
}

.form-text {
    font-size: .875rem;
    color: #607d8b
}

.comments-header {
    border-bottom: 1px solid #cfd8dc
}

.comments-header h2 {
    font-size: 1.75rem;
    text-transform: uppercase
}

.comments .btn {
    float: right;
    font-size: 1rem
}

.comment {
    border-bottom: 1px solid #cfd8dc;
    padding: 1rem .5rem
}

.comment.waiting {
    background-color: #cfd8dc
}

.comment.waiting .comment-vote {
    display: none
}

.comment>.comment {
    margin-left: 4rem;
    border-bottom: 1px solid #cfd8dc;
    padding-bottom: 1rem
}

.comment:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none
}

.comment-header {
    margin-bottom: .25rem
}

.comment-name {
    font-size: .875rem;
    display: inline-block;
    margin-bottom: 0
}

.comment-time {
    color: #607d8b;
    margin-left: .5rem;
    font-size: .875rem
}

.comment-wait {
    color: #f44336;
    font-weight: 700;
    font-size: .875rem;
    margin-left: .5rem;
    text-decoration: underline
}

.comment-vote {
    color: #607d8b;
    font-size: .8125rem;
    display: none
}

.comment-vote strong {
    color: #4caf50
}

.comment-vote strong.red {
    color: #f44336
}

.comment-content {
    margin-bottom: 0;
    font-size: .875rem
}

.comment-vote i {
    margin-left: .5rem;
    font-size: .8125rem;
    cursor: pointer;
    -webkit-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out;
    color: #90a4ae !important
}

.comment-vote i.fa-thumbs-up:hover {
    color: #4caf50 !important
}

.comment-vote i.fa-thumbs-down:hover {
    color: #f44336 !important
}

@media (min-width:576px) {
    #new_comment .form-row {
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap
    }

    #new_comment .form-row .form-group {
        -ms-flex: 1 1 auto !important;
        -webkit-box-flex: 1 !important;
                flex: 1 1 auto !important;
        max-width: none !important;
        width: auto
    }
}

@media (min-width:1200px) {

    #new_comment .form-row>.form-group:nth-child(1),
    #new_comment .form-row>.form-group:nth-child(2) {
        width: 40%
    }
}

@media (min-width:768px) {
    .site-main {
        background-color: #eceff1
    }

    .post {
        background-color: #fff;
        padding: 2rem 15px 0px
    }

    .post__author {
        padding: 1rem
    }

    .post__author img {
        margin: 0 auto
    }
}

.site-footer {
    padding: 1rem 0;
    background-color: #eceff1
}

.site-footer__copy {
    font-size: .875rem;
    color: #607d8b;
    text-align: center;
    margin-bottom: .5rem
}

.site-footer__studies-title {
    color: #607d8b;
    font-size: .75rem;
    margin-bottom: .25rem;
    text-align: center
}

.site-footer__studies {
    list-style-type: decimal;
    list-style-position: inside;
    color: #607d8b;
    font-size: .75rem;
    padding: 0;
    margin-bottom: .5rem
}

.site-footer__studies li {
    margin-bottom: .25rem
}

.site-footer__studies a {
    color: #607d8b !important;
    text-align: left;
    margin-bottom: 0;
    text-transform: none;
    font-weight: 500;
    padding: 0;
    -webkit-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out
}

.site-footer__studies a:hover {
    color: #263238 !important
}

.site-footer__disclaimer {
    color: #607d8b;
    font-size: .75rem;
    text-align: center;
    margin-bottom: 0
}