/* 
Theme Name:		 OniGirl
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
*/


/* Write here your own personal stylesheet */
/*--------------------------------------------------------------
# Fonts 
--------------------------------------------------------------*/
@font-face {
    font-family: 'frunch';
    src: url('fonts/frunch/frunch-webfont.woff2') format('woff2'),
         url('fonts/frunch/frunch-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




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

}
/*--------------------------------------------------------------
# Global 
--------------------------------------------------------------*/
html,
body {
    max-width: 100%;
    overflow-x: hidden;
    z-index: 0;
    margin: 0;
    background-color: transparent;

}


html {
    line-height: 1.15;
    scroll-behavior: smooth;
    overscroll-behavior-y: cover;
    -webkit-text-size-adjust: 100%;
    max-width: 100%;
    margin: 0;


}

body {
    /*background-image: url('dist/img/oni_bg_tile.jpg');*/
    background-position: center center;
    background-repeat: repeat;
    background-size: 25em;
    text-rendering: optimizeLegibility;
    text-size-adjust: 100%;
    margin-bottom: 0px;
    color: #fff;


}
body#tinymce {
    background: #fff !important;
}
body,
input,
textarea,
select,
button,
table {
    font: 1em / 1.35em 'Rubik';
    font-family: 'Rubik', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'frunch', Tahoma, Verdana, sans-serif;
}

h4 {
    color: #229bff;
}

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

main {
    margin: 0px;
}

#oni-page-container{
    position: relative;

}

 #oni-page-content-wrapper {
    margin: 0 auto;
    text-align: center;

}

#oni-page-content-wrapper {
    padding: 30px;
}

#oni-below-comic-container {
    background-color: #000;
    max-width: 100%;
    padding: 0px;
}


#navbar-wrapper {
    width: 100%;
    height: 60px;
}

#navbar-wrapper, #oni-comic-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;

    text-align: center;

}

#oni-comic-nav {
    height: 60px;
    margin: 20px auto;
}

#navbar-wrapper, #oni-comic-nav {
    gap: 30px;
}

#navbar-wrapper a, #oni-comic-nav a {
    display: inline-block;
}

#navbar-wrapper a img, #oni-comic-nav a img {
    height: 60px;
    width: auto;
}
.single-comic-navigation img{
    max-height: 60px;
}
#navbar-wrapper a:hover img, #oni-comic-nav a:hover img {
    opacity: .85;
}

#oni-comic-nav {
    gap: 15px;
}

#left-content {
    color: #000;
}

#oni-page-content-wrapper {
    text-align: left;
    background-color: #000;
    padding: 30px;
    color: #fff;
    margin: 0 auto;
    padding-bottom: 0px;
  
}
#oni-page-text{
    background-color: #fff;
    color: #000;
    padding: 15px;
}
.comment-respond {
    background-color: #229bff;
    color: #fff;
}
a.disabled {
    /* Make the disabled links grayish*/
    color: gray;
    /* And disable the pointer events */
    pointer-events: none;
  }
  a.disabled img{
    opacity: 0.5;
  }

.oni-footer {
  width: 100%;
  height: 45px;

  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: #fff;
  font-size: 0.75rem;
  line-height: 0.75rem;
}
.text-alt {
    color: #ff1d73;
}

.background-alt {
    background-color: #ff1d73;
}
#comic, .single-comic-navigation{
    background-color: transparent;
}
.single-comic-navigation{
    padding: 0px;
    margin: 0;
}
#comic{
    padding: 0px;
}
#switch-language{
    display: none;
}
.page, .page main{
    padding: 0px;
    margin: 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: initial !important;
    line-height: initial !important;
  }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form input[type="url"], .contact-form textarea {
    height: initial !important;
  line-height: initial !important;
    border: 1px solid #8c8f94 !important;
      border-top-color: rgb(140, 143, 148) !important;
      border-right-color: rgb(140, 143, 148) !important;
      border-bottom-color: rgb(140, 143, 148) !important;
      border-left-color: rgb(140, 143, 148) !important;
    border-radius: 0;
    box-sizing: border-box;
    font: inherit;
    font-size: 16px;
    padding: 16px !important;
      padding-right: 16px !important;
      padding-left: 16px !important;
    width: 100%;
  }
.contact-form .grunion-field {
    padding-left: max(var(--jetpack--contact-form--input-padding-left,16px),var(--jetpack--contact-form--border-radius));
    padding-right: max(var(--jetpack--contact-form--input-padding-left,16px),var(--jetpack--contact-form--border-radius));
  }

  #chapter-navigation{
    padding: 0px;
  }
/* Media Query */

@media (min-width: 1280px) {
    #navbar-wrapper {
        height: 100px;
    }
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1280px;
    }

    #oni-page-container {

        padding: 0px;
        background-image: url('dist/img/OniGirl_Controller.png');
        background-position: center top;
        background-size: 1280px 699px;
        background-repeat: no-repeat;
        padding-top: 120px;
min-height: calc(100vh - 100px);

    }
main{
    min-height: calc(100vh - 100px);
    padding: 0px;
}


    #oni-page-content-wrapper {

        padding-left: 30px;
        padding-right: 30px;
        width: 880px;
        border-left: 5px solid #fff;
        min-height: 80vh;

    }
    #oni-page-content{
margin-top: -50px;

    }

 
}
@media (min-width: 1366px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1366px;
    }
    #oni-page-container {

        background-size: 1366px 746px;
    }
    #oni-page-content-wrapper {
       width: 939px;
    }
}
@media (min-width: 1440px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1440px;
    }
    #oni-page-container {

        background-size: 1440px 786px;
    }
    #oni-page-content-wrapper {
       width: 990px;
       border-left: 6px solid #fff;
    }
}
@media (min-width: 1536px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1536px;
    }
    #oni-page-container {

        background-size: 1536px 839px;
    }
    #oni-page-content-wrapper {
       width: 1055px;

    }
}
@media (min-width: 1600px) {

}
@media (min-width: 1920px) {
}
@media (max-width: 1279px) {
    body {
        background: #35168B !important;
    
    
    }
    #navbar-wrapper {
        gap: 15px;
        padding: 0px 15px;
        margin-top: 0px;
        height: 90px;
    }

    #oni-page-container {
        background: none;
        background-color: #000;
        max-width: 100%;
    }

    #oni-page-content-wrapper {
        padding: 0px;
        padding-top: 15px;
    }

    #oni-below-comic-container {
        padding: 0px;
    }

   

    #oni-below-comic-container .col-lg-8, #oni-below-comic-container .col-lg-4{
        padding-left: 0px;
        padding-right: 0px;
    }

    #left-content, #side-bar section {
        padding: 15px;
    }

}

@media (max-width: 767px) {
    #oni-comic-nav {
        height: 40px;
        gap: 15px;
    }

    #navbar-wrapper a img, #oni-comic-nav a img {
        height: 40px;
        width: auto;
    }

    #navbar-wrapper {
        display: block;
        height: auto;
        text-align: center;
        margin-bottom: 7px;
    }

    #navbar-wrapper a {
        margin-right: 7px;
        margin-top: 7px;
    }

 
  
}