/* 
Theme Name:		 Contemplating Reiko
Theme URI:		 https://www.toocheke.com/
Description:	 This is a child theme of Toocheke
Author:			 LeeToo
Author URI:		 https://leetoo.net/
Template:		 toocheke
Version:		 1.0.20
Text Domain:	 toocheke-child
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

@font-face {
    font-family: 'Last Ninja';
    src: url('dist/fonts/LastNinja.woff2') format('woff2'), url('dist/fonts/LastNinja.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'opticopperplateregular';
    src: url('dist/fonts/opticopperplate-webfont.woff2') format('woff2'), url('dist/fonts/opticopperplate-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'opticopperplateheavy';
    src: url('dist/fonts/opticopperplate-heavy-webfont.woff2') format('woff2'), url('dist/fonts/opticopperplate-heavy-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'opticopperplate-lightregular';
    src: url('dist/fonts/opticopperplate-light-webfont.woff2') format('woff2'), url('dist/fonts/opticopperplate-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Write here your own personal stylesheet */

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    background-attachment: initial;
    background-attachment: fixed !important;
}

#page {
    background-color: #fff;
    padding: 0px;
}

#before-footer {
    min-height: 100vh;
}

.site-content, #main, .site-header, .post, .page {
    padding: 0;
    margin: 0;
}

#main {
    margin-top: 0px;
}

.page .site-content, .archive .site-content {
    padding-left: 15px;
    padding-right: 15px;
}

a, a:focus, a:active, a:visited {
    color: #a31414;
}

a:hover {
    color: #000;
}

img {
    height: auto;
    max-width: 100%;
}

#comic {
    display: block;
}

#header-image-wrapper img {
    max-width: 100%;
    height: auto;
}

.navbar {
    background-color: #fff !important;
    font-weight: 600;
    text-transform: uppercase;
}

.navbar-toggler .icon-bar {
    background-color: #a31414;
}

.navbar-nav>.menu-item::before {
    background: transparent;
}

.navbar {
    box-shadow: none;
}

header h1 {
    font-size: 24px !important;
    font-family: 'Last Ninja', 'Hind', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, sans-serif;
    text-align: center;
    margin-bottom: 15px;
}

@media (min-width: 600px) {
    #page {
        border-right: 30px solid #000;
        border-left: 30px solid #000;
    }
}

@media (min-width: 1140px) {
    #page {
        max-width: 1080px;
    }
}

#comic {
    padding: 0px;
}

#comic p {
    margin: 0;
    padding: 0px;
}

.single-comic-navigation {
    margin-top: 25px;
    padding-bottom: 0px;
}

@media (max-width: 991px) {
    #comic {
        padding: 0 15px;
    }
    .single-comic #comic {
        padding: 0 30px;
    }
    .single-comic-navigation {
        margin-top: 17px;
    }
}

#comic footer {
    display: none;
}

#latest-comic {
    display: block !important;
}

#comic-grid img {
    box-shadow: none;
    border: 5px solid #000;
}

#comic-grid img:hover {
    opacity: 0.7;
}

#archive-navigation {
    font-size: 36px !important;
    padding: 30px 0px;
}

.comic-thumbnail-wrapper {
    line-height: 1em;
}

.comic-thumbnail-wrapper img {
    margin-bottom: 5px;
}

.archive .nav-page-number {
    padding-bottom: 15px;
}

@media (max-width: 768px) {
    .comic-thumbnail-wrapper {
        font-size: 13px;
    }
}

#comments {
    margin-top: 15px;
}

input[type="submit"], input[type="button"], input[type="reset"], button {
    background-color: #a31414;
    border: 1px solid #a31414;
    padding: 2px 5px;
}

input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover, button:hover {
    background-color: #a31414;
    border: 1px solid #a31414;
    opacity: 0.85;
}

.comments-title {
    margin-bottom: 0px !important;
    margin-left: -1px;
}

.comment-reply-title, .must-log-in, .form-submit {
    text-align: center;
}

.posts-navigation, .nav-page-number {
    text-align: center;
}

.comment-form-cookies-consent label {
    position: relative;
    margin: 0;
    margin-left: -7px;
    top: -2px;
    display: inline;
    padding: 0px !important;
}

@media (max-width: 991px) {
    .comments-title {
        margin-left: 15px;
    }
    .comments-title, #comments .mb-md-5, #comments .my-md-5 {
        padding: 0 15px !important;
    }
}

@media (min-width: 599px) and (max-width: 991px) {
    .comments-title {
        margin-left: 0px;
    }
}

@media (max-width: 480px) {
    .comments-title {
        margin-left: 0px;
    }
}

.comments-title, .comment-reply-title {
    font-size: 22px !important;
    letter-spacing: 0px;
    font-family: 'Last Ninja', 'Hind', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, sans-serif;
}

#comments h4 {
    font-size: 15px !important;
    letter-spacing: 0px;
    font-family: 'opticopperplateregular', 'Hind', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, sans-serif;
    margin: 0;
}

#comments p, #commentform label, #commentform p {
    font-size: 14px !important;
}

#comments .form-control {
    font-size: 12px !important;
}

#email-notes {
    display: none;
}

@media (min-width: 768px) {
    .archive-title {
        padding: 30px 0px;
    }
    #characters-title {
        padding: 45px 0;
    }
    .navbar-nav .nav-link {
        font-size: 0.85em !important;
    }
    .comments-title, .comment-reply-title {
        font-size: 16px !important;
    }
    #comments h4 {
        font-size: 13px !important;
    }
    #comments p, #commentform label, #commentform p {
        font-size: 14px !important;
    }
    #comments .form-control {
        font-size: 10px !important;
    }
    .comment-reply-title {
        padding: 15px 0px !important;
    }
}

@media (min-width: 768px) {
    .page-template-about .archive-title {
        word-spacing: -9px;
    }
}

@media (max-width: 767px) {
    .archive-title {
        font-size: 16px !important;
        word-spacing: -7px;
    }
    #comic-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }
    #comments h4 {
        margin-bottom: 10px;
    }
}

@media (min-width: 480px) and (max-width: 1024px) {
    #comments p, #commentform label, #commentform p {
        font-size: 15px !important;
    }
}

@media (max-width: 1024px) {
    .comments-title, .comment-reply-title {
        font-size: 16px !important;
    }
    .comment-content.card-text {
        padding: 0px 10px;
        padding-top: 5px !important;
    }
}

@media (max-width: 375px) {
    .comments-title, .comment-reply-title {
        font-size: 12px !important;
    }
    #comments h4 {
        font-size: 11px !important;
    }
}

.comment-form-cookies-consent, #commentform p.comment-form-cookies-consent>label {
    font-size: 13px !important;
    line-height: 13px;
}

#comments .mb-md-5, #comments .my-md-5 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-top: 0 !important;
    margin-bottom: 30px !important;
}

#comments .comment:first-child .mt-3, #comments .comment:first-child .my-3 {
    margin-top: 5px !important;
}

.comment:not(:first-child) .mt-3, .comment:not(:first-child) .my-3 {
    margin-top: 15px !important;
}

#comments-wrapper {
    margin-top: 15px;
}

#comments-wrapper:before {
    content: "";
    /* This is necessary for the pseudo element to work. */
    display: block;
    /* This will put the pseudo element on its own line. */
    margin: 0 auto;
    /* This will center the border. */
    width: 50%;
    /* Change this to whatever width you want. */
    padding-top: 0px;
    /* This creates some space between the element and the border. */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    /* This creates the border. Replace black with whatever color you want. */
}

@media (min-width: 768px) {
    #comments-wrapper:before {
        width: 35% !important;
        /* Change this to whatever width you want. */
    }
}

.comment-metadata {
    display: none;
}

.comment-respond {
    background-color: #fff;
    color: #000;
    border: none;
}

.comments-area {
    text-align: left;
}

#comments img {
    margin-right: 10px !important;
    height: 35px;
    width: auto;
}

.comment-content {
    line-height: 1.05em;
}

#commentform {
    max-width: 500px;
    margin: 0 auto;
}

.comments-title, .comment-reply-title {
    max-width: 500px;
}

.comment-reply-title {
    margin: 0 auto;
}

.comment-content.card-text {
    padding: 0px 10px;
}

#comments .card .card-header {
    padding: 7px;
    padding-bottom: 0px;
}

#comments .avatar {
    width: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
}

#comments .avatar span {
    font-size: 22px !important;
    line-height: 22px !important;
}

@media (max-width: 375px) {
    #commentform {
        max-width: 250px;
    }
    .comment-content, #commentform {
        line-height: 1em;
    }
    #comments .avatar {
        width: 22px !important;
        height: 22px !important;
    }
}

#commentform .text-danger {
    margin-bottom: 5px;
}

#commentform label {
    margin-bottom: 0px;
}

#comments .form-group {
    margin-bottom: 0px;
}

#comments .children .media .card-block {
    background: #fff !important;
    padding: 0px;
}

input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], .form-control, .checkout-input, select.form-control {
    height: 24px;
    line-height: 24px;
}

.chip {
    background-color: #a31414;
}

.hoverable:hover {
    box-shadow: none;
}

#left-of-comic, #left-of-comic, #below-comic {
    text-align: center;
}

#infinite-footer {
    display: none;
}

#footer-logo {
    text-align: center;
}

.footer {
    position: relative;
    color: #000;
}

.page-template-about .site-content {
    max-width: 700px !important;
}

audio {
    width: 200px;
}

.character-line::before {
    content: "";
    display: block;
    margin: 0 auto;
    padding-top: 0px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

#characters-header::before, .character-line::before {
    content: "";
    display: block;
    margin: 0 auto;
    padding-top: 0px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-top: 30px;
}

#characters-header::before {
    width: 30%;
    padding-top: 0px;
    padding-bottom: 10px;
}

.character-line::before {
    width: 30%;
}

#about-wrapper img {
    border: solid 10px #000;
}

@media (min-width: 768px) {
    #about-wrapper img {
        border: solid 15px #000;
    }
}

@media (max-width: 767px) {
    .character-name {
        text-align: center;
    }
    #characters-header h1 {
        margin: 20px auto;
    }
    #about-wrapper .col-lg-7, #about-wrapper .col-lg-5 {
        padding-left: 30px;
        padding-right: 30px;
    }
    #about-reiko-main-text p {
        margin-bottom: 0px;
    }
}

.character-image {
    text-align: center;
}

@media (min-width: 992px) {
    .character-image {
        text-align: right;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #about-reiko {
        padding: 20px 0px;
    }
    #about-reiko-main-image {
        margin-right: 135px;
    }
    #characters-header h1 {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

.sgi-letter-avatar>span {
    color: var(--sgi-ltrav-color) !important;
    display: block !important;
    text-transform: var(--sgi-ltrav-text-transform) !important;
    font-family: var(--sgi-ltrav-font-family) !important;
    font-weight: var(--sgi-ltrav-font-weight) !important;
    font-style: var(--sgi-ltrav-font-style) !important;
    font-size: var(--sgi-ltrav-font-size)!important;
}