@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400;500;600;700;800;900&display=swap');

/* CSS Document */

:root {
    --grid-width:           clamp(983px,96.000vw,1344px); /* Base Width is Set Here */
    --grid-gutter:          clamp(10px,1.000vw,14px); /* Gutter Width is set here.  Just put half the gutter width here. */
    --header-height:        clamp(424px,41.429vw,580px);

    --menu-height:          clamp(35px,3.429vw,48px);
    --footer-height:        clamp(95px,9.286vw,130px);
    --footer-height:        clamp(95px,9.286vw,130px);
    --legal-height:         0px;
    --logo-width:           clamp(439px,42.857vw,600px);
    --logo-height:          clamp(51px,5.000vw,70px);
    --watermark-width:      clamp(307px,30.000vw,420px); 
    --watermark-height:     clamp(161px,15.714vw,220px);
    --background-color:     #000814;
    --menu-color:           #ffc300;
    --menu-link:            #000814;
    --comic-bg:             #19295e;
    
    --primary-color:        #000814;
    --secondary-color:      #d1c79e;
    --tertiary-color:       #FFFFFF;
    --dark-yellow:          #ffc300;
    --primary-font:         'Gabarito', sans-serif;
    --secondary-font:       'Gabarito', sans-serif;
    --standard-font-size:   clamp(18px,1.429vw,20px);
    --line-height:          1.5;
}
html                                            { max-width: 100vw; overflow-x: clip; }
/* Base Template Settings */
font[size="1"] { display: none!important; } 
body											{ font-family: var(--primary-font); width: 100vw; background: var(--background-color); color: var(--primary-color);  max-width: 100vw; overflow-x: clip }
body::-webkit-scrollbar                         { display: none;}
#page-head container, #page-foot container, div container, 
section container					            { max-width: var(--grid-width); } 
.halves > .half > container                       { max-width: calc( var(--grid-width) / 2 ); } 
.halves > .half > container, .listed li,
[class^="box-"], [class*=" box-"]               { padding: var(--grid-gutter); } 
.cta                                            { display: inline-flex;flex-direction: row;flex-wrap: nowrap;justify-content: center;align-items: center; align-content: normal; background: var(--primary-color) }
.cta span, .cta a, .cta button                  { height: clamp(27px,2.625vw,42px); min-width: clamp(77px,7.500vw,120px); padding-left: clamp(10px,0.938vw,15px); padding-right: clamp(10px,0.938vw,15px); text-decoration: none; color: var(--primary-color); background: var(--dark-yellow); border: none; font-size: var(--standard-font-size); }

div[style="font-size: 0px;"] {
    & p { margin: 0px; display: none; }
}

time,
p, .p                                   { font-family: var(--primary-font); font-size: var(--standard-font-size); margin-bottom: var(--standard-font-size); line-height: var(--line-height); }
h1, .h1                                 { font-family: var(--secondary-font); line-height: var(--line-height); margin-bottom: var(--standard-font-size); font-size: clamp(24px,2.000vw,32px); font-weight: 600; }
h2, .h2                                 { font-family: var(--secondary-font); line-height: var(--line-height); margin-bottom: var(--standard-font-size); font-size: clamp(20px,1.563vw,25px); font-weight: 600; }
h3, .h3                                 { font-family: var(--secondary-font); line-height: var(--line-height); margin-bottom: var(--standard-font-size); font-size: clamp(18px,1.500vw,24px); font-weight: 600; }
.content-wrapper ul li,
article ul li                           { font-family: var(--primary-font); font-size: var(--standard-font-size); margin-bottom: var(--standard-font-size); line-height: var(--line-height); }
h4, .h4                                 { font-family: var(--secondary-font); line-height: var(--line-height); margin-bottom: var(--standard-font-size); font-size: clamp(14px,1.375vw,22px); font-weight: 600; display: block; }
h5, .h5                                 { font-family: var(--secondary-font); line-height: var(--line-height); margin-bottom: var(--standard-font-size); }
h6, .h6                                 { font-family: var(--secondary-font); line-height: var(--line-height); margin-bottom: var(--standard-font-size); }
blockquote, .blockquote                 { font-family: var(--secondary-font); l.tagsine-height: var(--line-height); margin-bottom: var(--standard-font-size); }
blockquote cite, .blockquote cite       { font-family: var(--primary-font); line-height: var(--line-height) }
ul, ol                                  { padding-left: var(--standard-font-size); }
hr                                      { border: none; border-bottom: 1px solid var(--primary-color); margin-bottom: var(--standard-font-size); }
ul                                      { list-style-type: disc; }
ol                                      { list-style-type: decimal; }
details                                         { font-family: var(--primary-font); font-size: var(--standard-font-size); margin-bottom: var(--standard-font-size); line-height: var(--line-height); }
details summary                                 { font-family: var(--primary-font); font-size: var(--standard-font-size); margin-bottom: var(--standard-font-size); line-height: var(--line-height); }
 
/* Header Settings */

body                                            { padding-top: calc( clamp(96px,9.375vw,150px) + calc(  var(--grid-gutter) * 4 ) ); } 
body.home                                            { padding-top: var(--header-height); transition: padding .125s; }

#page-head										{ background: var(--background-color); height: var(--header-height); position: absolute; left: 0px; top: -25px; z-index: 999; width: 100vw; margin-bottom: clamp(58px,5.625vw,90px); transition: all .5s;  display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-end; align-content: stretch;  align-items: center; }
#page-head .topbanner-holder                    { position: relative; }
#page-head .topbanner-holder figure,
#page-head .topbanner-swiper                    { height: calc( var(--header-height) - var(--menu-height) ); transition: all .5s; width: 100vw; } 
#page-head .topbanner-holder:after,
#page-head .topbanner-swiper:after              { position: absolute; width: clamp(300px,29.286vw,410px); height: clamp(161px,15.714vw,220px); background: url(../images/ICSLogo.svg) center no-repeat; background-size: contain; content: ''; z-index: 5; left: 50%; transform: translateX(-50%); bottom: clamp(73px,7.143vw,100px); transition: all .25s; margin-bottom: 20px; filter: drop-shadow(3px 5px 5px rgb(0 0 0 / 0.4)); }
#page-head container                            { background-color: transparent; position: relative; clip-path: polygon(0 -200%, calc( 100% - 3px ) -200%, 100% 100%, 3px 100%); }
#page-head container:before { width: 120%; height: 200%; position: absolute; content: ''; top: 0px; left: 0px; background: var(--menu-color); transform: rotate(-2deg) translateY(-0%); z-index: -2; background: linear-gradient(0deg,rgba(224, 152, 21, 1) 0%, rgba(255, 195, 0, 1) 100%); transform-origin: top left;  }
body:not(.home) #page-head,
body.single-comics #page-head,
body.single-comics #page-head .topbanner-holder figure,
body.single-comics #page-head .topbanner-holder, 
body.single-comics #page-head .topbanner-swiper          { height: calc( clamp(96px,9.375vw,150px) + calc(  var(--grid-gutter) * 4 ) ) }
#page-head .topbanner-swiper .swiper-slide      { padding: 0px; width: 100vw; height: 100%; }
#page-head .topbanner-swiper figure             { background-color: #FFF; width: 100vw; height: 100%; z-index: 1; margin: auto; }
#page-head .topbanner-holder figure:after,
#page-head .topbanner-swiper figure:after       { content: ''; bottom: 0px; left: 0px; width: 100%; height: 125px; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.99) 100%); position :absolute; } 

#page-head .topbanner-holder figure p,
#page-head .topbanner-swiper figure p           { width: 100vw; position: relative; padding: calc( var(--grid-gutter) / 2 ) calc( var(--grid-gutter) * 2 ); color: #FFF; font-size: calc( var(--standard-font-size) * 1.5 ); font-weight: bold; text-shadow: 2px 2px 9px rgba(0,0,0,0.87); }

#page-head container                            { height: var(--menu-height); position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; align-content: normal; margin-top: -25px; z-index: 2; }
#page-head container .logo                      { position: absolute; z-index: 3; top: 4px; margin-bottom: auto; transform: translateY(-114%) rotate(-2deg);  }
#page-head container .logo,
#page-head container .logo svg                  { width: var(--logo-width); height: var(--logo-height); display: block;  font-size: 0px; }
#page-head container .logo svg *                { fill: var(--menu-color); }
#page-head container .logo svg + svg            { display: none; }
#page-head container .logo svg                  { }
 
#page-head container .logo:hover                      { opacity: 1; }
#page-head container #nav                       { height: var(--menu-height); position: relative; z-index: 2; width: 100%; }
#page-head container #nav #main					{ font-size: 0px; height: var(--menu-height); display: flex;  flex-direction: row; flex-wrap: nowrap;  justify-content: space-between; align-content: stretch; align-items: center; }
#page-head container #nav #main li              { margin: 0px; height: var(--menu-height); display: inline-flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: normal; }
#page-head container #nav #main a			    { height: auto; margin: 0px var(--grid-gutter); font-size: clamp(26px,2.571vw,36px); color: var(--menu-link); text-transform: lowercase; font-weight: 600; }
#page-head container #nav #main a svg,
#page-head container #nav #main a svg *         { fill: #FFF; width: clamp(13px,1.250vw,20px); margin-left: clamp(6px,0.625vw,10px); }
#page-head container #nav #main a:hover svg *   { fill: var(--secondary-color); }
#page-head container #nav #main .current-menu-item a, #page-head container #nav #main .active a,
#page-head container #nav #main a:hover           { color: #FFF; opacity: 1; } /* This is the Hover/Active state for the menu item */
#page-head.toggle-menu container > .toggle:before, #page-head.toggle-menu container > .toggle:after, #page-head.toggle-menu container > .toggle i:before, #page-head.toggle-menu container > .toggle i:after    { background: #FFF; }
#nav.addtoggle #main .menu-item-has-children span.toggler { position: absolute; top: 0%; right: 0px; transform: translateY(50%); }
#page-head container #nav #main .menu-item-has-children ul               { left: 50%; transform: translateX(-50%); min-width: clamp(205px,20.000vw,320px); }
#page-head container #nav #main .menu-item-has-children ul li a          { font-size: var(--standard-font-size); }
#page-head container #nav #main li:nth-child(2)  { 
    @media (min-width: 1024px){
        margin-right: clamp(366px,35.714vw,500px);
    }
}
.cb_p6_patreon_button,
.patreon-valid-patron-message,
#mytraining-widget                                  { display: none; }

/* Admin Bar */


/* Banner */

figure.banner                                   { width: 100%; height: clamp(192px,18.750vw,300px); margin: 0px; }
.swiper-button-next:after, .swiper-button-prev:after    { color: var(--primary-color); } 


/* Comic Container */
.single-comic-page                              { overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } 
.single-comic-page container                    { padding-top: 0px; }
.single-comic-page.landscape container          { max-width: 1650px; }
.single-comic-page .nav                         { font-family: var(--icon-font); width: 100%;  display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-content: stretch; align-items: center; max-width: var(--grid-width); top: 50px; position: sticky; transition: all .25s; }
.single-comic-page .nav a                       { color: var(--menu-color); font-weight: 700; font-size: clamp(26px,2.571vw,36px); text-decoration: none; transform: scaleY(3); transform-origin: top;  }
 
.dark-bg                                        { background: var(--comic-bg) }

.dark-bg  article

figure.comic-post                               { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: normal; margin-bottom: clamp(31px,3.000vw,48px); position: relative; }
figure.comic-post  a.prev, figure.comicpost a.next { position: absolute; top: 0px; width: 100%; height: 100%; display: block; font-size: 0px; z-index: 5; }
figure.comic-post  a.prev                       { left: 0px; }
figure.comic-post  a.next                       { right: 0px; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
.comic-nav                                      { height: 60px; margin-bottom: 15px; max-width: var(--grid-width); margin-inline: auto; }
.comic-nav .prevnext                            {  display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: space-between; align-content: normal; width: 100%; font-family: var(--icon-font); margin: auto; background: var(--background-color); z-index: 2; height: 50px; }
body.home .comic-nav .prevnext a:nth-child(4),
body.home .comic-nav .prevnext a:nth-child(5)   { opacity: 0; pointer-events: none; }
.comic-nav .prevnext.stuck:before               { bottom: 99%; content: ''; left: 0px; width: 100%; height: 200px; background: var(--background-color); display: block; position: absolute; }
.comic-nav a                                    { font-size: clamp(34px,3.333vw,40px); color: var(--menu-color); font-weight: 700; text-decoration: none; }4
.comic-nav a:not(.disable):hover                { color: #FFF } 

.tags                                           { text-align: right; padding-top: var(--grid-gutter); display: block; width: 100%; margin-bottom: 0px; padding: calc( var(--grid-gutter) * 2 ) calc( var(--grid-gutter) * 2 ) 0px 0px;  font-size: var(--standard-font-size) }
.tags a                                         { color: #FFF; margin-bottom: 0px; font-size: var(--standard-font-size) }
section.tags                 { padding-inline: 0px; }

.showcase-item                                  { margin: var(--grid-gutter) 0px; }

/* Header Image Settings */
 
.page-header, .page-header container            { height: 400px; }
.patreon-campaign-banner						{ text-align: center; width: 100%; max-width: var(--grid-width); margin: auto; }
.patreon-campaign-banner a						{ color: var(--primary-color); font-weight: 600; }
.patreon-campaign-banner + section,
.patreon-campaign-banner + section + section
.patreon-campaign-banner ~ section              { display: none; }

/* Single Post */

.content {
    color: #FFF;
    & figure.avatar {
        width: 125px;
        margin-right: 15px;
        border-radius: 50%;
        height: 125px;
    }
    & .single {
        width: calc( 100% - 140px );
        & header {
            position: relative;
            clip-path: polygon(0 0, 100% 0, 100% 90%, 0 125%);
            padding-inline: 15px;
            padding-block: 15px;
            z-index: -1;
            &:before {
                content: '';
                position: absolute;
                top: 0px;
                left: 0px;
                width: 125%;
                height: 150%;
                transform-origin: top right;
                transform: translateY(-40%) translateX(-10%) rotate(-2deg);
                background: linear-gradient(0deg,rgba(42, 43, 72, 1) 0%, rgba(97, 133, 221, 1) 100%);
                z-index: -1;
            }
            & * {
                position: relative;
                z-index: 2;
            }
            & h3 {
                color: var(--dark-yellow);
            }
            & time {
                font-size: 
            }
        }
        article {
            padding-inline: 50px;
        }
    }
    
}
 
/* Comic Area */

.main-comic-area                                { width: 100%; max-width: calc( 100% - calc( var(--grid-gutter) * 8 ) ); margin: auto; background: var(--comic-bg); min-width: 400px; animation: fadeinhere .5s 1 linear; transition: all .5s; };
@keyframes fadeinhere{
    0%  { opacity: 0; }
    100%%{ opacity: 1; }
}
.main-comic-area .mag-glass                     { font-family: var(--icon-font); font-weight: 900; }
.main-comic-area div.dark-bg                    { padding: calc( var(--grid-gutter) * 2 );  }
.main-comic-area div.dark-bg p a.mag-glass              { color: #FFF; text-decoration: none; }
.main-comic-area   .content-wrapper             { padding: calc( var(--grid-gutter) * 2 ) 0px; }
.main-comic-area   .content-wrapper p a         { color: #FFF; }
.dark-bg                                        {  background: var(--comic-bg); color: #FFF; padding: calc( var(--grid-gutter) * 2 );  }
.main-comic-area figure                         {  text-align: center; font-size: 0px; position: relative; }
.dark-bg h1                             { text-align: left; font-size: clamp(18px,1.714vw,24px); color: var(--primary-color); font-weight: 400; margin: 0px; padding: 3px calc( var(--grid-gutter) * 1); background: #668de8; position: relative; top: calc( calc( var(--grid-gutter) * 2 ) * -1 ); left: calc( calc( var(--grid-gutter) * 2 ) * -1 ); width: calc( 100% + var(--grid-gutter) + var(--grid-gutter) + var(--grid-gutter) + var(--grid-gutter) ) }
.dark-bg h1 a                               { color: var(--primary-color); text-decoration: none; }

section.comments        { color: #FFF; }
section.comments  container details {  padding-inline: calc( var(--grid-gutter) * 2 ) 0px; }
section.comments summary:before { display: none; }
#reactions__container {display: none;}

#player             { min-height: 1800px; }



/* Tag Boxes */

.archiveboxes                                       { padding: 0px; list-style-type: none; width: calc( 100% + var(--grid-gutter) + var(--grid-gutter) ); margin-left: calc( -1 * var(--grid-gutter) ); padding-bottom: calc( var(--grid-gutter) * 2 ); }
.archiveboxes figure                                { width: 100%; padding-bottom: 60%; z-index: 2; }
.archiveboxes .project figure                       { padding-bottom: 150%; }
.archiveboxes .project a                            { text-decoration: none; }
.archiveboxes .project h3                           { padding: 5px 15px; background: #668de8; color: #FFF; text-decoration: none; }
.archiveboxes .project:has(p) h3                    { margin-bottom: 0px; }
.archiveboxes .project p                            { background: #ae9d8f; padding: 15px; color: var(--primary-color); font-size: 14px; }
.archiveboxes .project p:empty                      {display: none;}
.archiveboxes  li                                   { position: relative; }
.archiveboxes  li .detail-title {
    position: absolute;
    top: -15px;
    left: 8px;
    font-family: 'Modica Ultra';
    color: #000;
    font-size: clamp(69px,6.714vw,94px);
    text-shadow: 
    3px 3px 0 #FFF,
    -3px 3px 0 #FFF,
    -3px -3px 0 #FFF,
    3px -3px 0 #FFF;
    z-index: 5;
    
}

.masonry                                            { list-style-type: none; width: calc( 100% + var(--grid-gutter) + var(--grid-gutter) ); margin-left: calc( -1 * var(--grid-gutter) ); padding-bottom: calc( var(--grid-gutter) * 2 ); padding: 0px; }

ul.grid { padding: 0px!important; }

ul.chapters  { list-style-type: none; }
ul.chapters li.chapter figure { width: 100%; height: 0px; padding-bottom: 165%; z-index: 2; }

/* Gallery Page */

section#gallery-top {
    figure{ 
        a {
            max-height: 510px;
            overflow: hidden;
            display: block;
        }
        padding: 5px;
        background: var(--dark-yellow);
        font-size: 0px;
        img {
            width: 100%;
            min-width: 100%;
            max-width: 150%;
        }
    }
    .gallery-tile {
        background: #ffd60a;
        padding: 15px;
        position: relative;
        top: 15px;
        h1 {
           width: calc( 100% + 30px );
            padding: 15px;
            padding-top: 30px;
            margin-left: -15px;
            position: relative;
            clip-path: polygon(0 15px, 100% 0, 100% 100%, 0% 100%);
            background: var(--dark-yellow);
            text-align: right;
            margin-top: -30px;
        }
        .rando {
            font-family: var(--icon-font);
            text-decoration: none;
            font-weight: 900;
            color: var(--primary-color);
            font-size: calc( var(--standard-font-size) * 2 );
        }
    }
}


/* Content Settings */

figure.chapter                                  { display: block; width: 100%; height: 0px; padding-bottom: 150%; z-index: 2; }
figure.chapter.tag                                      { display: block; width: 100%; height: 0px; z-index; 2; padding-bottom: 62%; }
.swiper-slide figure.chapter                    { margin: auto; }
figure.thumbnail                                { width: 100%; max-width: clamp(56px,5.500vw,88px); height: clamp(83px,8.125vw,130px); }
.swiper                                         { min-width: calc( calc( var(--grid-gutter) * 2 ) + 100% ); margin-left: calc( -1 * var(--grid-gutter) ); }
.swiper  h3                                     { margin: 0px!important; padding: calc( var(--grid-gutter) / 2 )!important; width: 100%!important; }
.swiper-button-prev                             { left: 0px; }
.swiper-button-next                             { right: 0px; }
.swiper-slide                                   { padding: var(--grid-gutter); }
.lock:after                                     { content: ''; position: absolute; bottom: 0px; right: 0px; width: clamp(32px,3.125vw,50px);; height: clamp(32px,3.125vw,50px); background: url(../images/lock.svg) bottom right no-repeat; }

main                                            { min-height: calc( 100vh - var(--footer-height) ); padding-bottom: 50px; }
main *:not('.cta') a                            { color: var(--primary-color); text-decoration: underline; } /* Main Link Style */
main .content .boxcontainer div div             { background: var(--secondary-color); color: #FFF; padding: 10px; min-height: 40px; font-size: 10px; }
main .content p a                               { color: var(--dark-yellow) }
main section container                          { padding-top: clamp(29px,2.813vw,45px); padding-bottom: clamp(29px,2.813vw,45px); }
main section.page-title container,
main section:last-child container               { padding-bottom: 0px; }
main section.page-title article                 { width: 100%; }
#html5                                          { margin: auto; border: none; overflow: hidden; }
h3 a                                            { font-weight: 600; text-decoration: none; color: var(--primary-color); }

.endings .cta a                                 { font-size: 18px; }

/* Fixed Scroll */


/* Archive */
section.all container { padding-bottom: 40px!important; }
section.all .grid-item { 
    height: auto!important;
    padding: 0px!important;
    figure {
        padding: 15px!important;
        max-height: 350px;
        overflow: hidden;
        img {
            min-width: 100%;
        }
    }
}

.archive-list                                   { list-style-type: none; padding: 0px; }

.archive-list li                                { margin-bottom: calc( 2 * var(--standard-font-size) ); padding-top: calc( 2 * var(--standard-font-size) ); }
nav.paginate                                    { margin-top: var(--standard-font-size); display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: normal; }
.archive-list li h2                             { margin-bottom: 0px; }
.archive-list li h2 a                           { font-weight: 600; color: var(--primary-color); text-decoration: none; }
nav.paginate *                                  { font-size: var(--standard-font-size); color: var(--primary-color); text-decoration: none; margin: 0px var(--standard-font-size);  }

time                                            { margin-bottom: calc( 2 * var(--standard-font-size) ); display: block; }

/* Search */

.search-bar {
    h1 {
        color: #FFF!important;
    }
    form {
        padding: 15px;
        background: #668de8;
        width: 100%;
        position: relative;
        input {
            width: 100%;
            border: none;
            padding-inline: 15px;
            padding-block: 5px;
            font-size: var(--standard-font-size);
        }
        button {
            font-family: var(--icon-font);
            font-weight: 900;
            color: var(--primary-color);
            position: absolute;
            top: 50%;
            right: 30px;
            font-size: var(--standard-font-size);
            border: none;
            background: transparent;
            transform: translateY(-50%);
            cursor: pointer;
        }
    }
}


/* Form Settings */

.frm12                                                  { width :100%; margin-bottom: var(--grid-gutter); }
.frm_form_fields label,
.frm_form_fields legend                                 { display: none; }
.frm_form_fields fieldset                               { border: none; } 
.frm_form_field input::-webkit-input-placeholder        { color: var(--primary-color); }
.frm_form_field input:-moz-placeholder                  { color: var(--primary-color); } 
.frm_form_field input::-moz-placeholder                 { color: var(--primary-color); } 
.frm_form_field input:-ms-input-placeholder             { color: var(--primary-color); } 

.frm_form_field input,
.frm_form_field select,
.frm_form_field textarea                                { width: 100%; font-family: var(--standard-font); font-size: var(--standard-font-size); }

.frm_form_field textarea::-webkit-input-placeholder     { color: var(--primary-color); }
.frm_form_field textarea:-moz-placeholder               { color: var(--primary-color); } 
.frm_form_field textarea::-moz-placeholder              { color: var(--primary-color); } 
.frm_form_field textarea:-ms-input-placeholder          { color: var(--primary-color); }
.frm_form_field input[type=checkbox]                {  }
.frm_form_field input[type=checkbox]:checked:before {  }
.frm_form_field input[type=radio]                   {  }
.frm_form_field input[type=radio]:checked:before    {  }
.frm_form_field input[type=text], .frm_form_field input[type=email], .frm_form_field input[type=tel], .frm_form_field input[type=phone],
.frm_form_field textarea                            { height: 40px; }  
.frm_form_field textarea                            { resize: none; height: 180px; }    
.frm_form_field select                              { background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNy4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjUgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTIwMS40IDM3NC42YzEyLjUgMTIuNSAzMi44IDEyLjUgNDUuMyAwbDE2MC0xNjBjMTIuNS0xMi41IDEyLjUtMzIuOCAwLTQ1LjNzLTMyLjgtMTIuNS00NS4zIDBMMjI0IDMwNi43IDg2LjYgMTY5LjRjLTEyLjUtMTIuNS0zMi44LTEyLjUtNDUuMyAwcy0xMi41IDMyLjggMCA0NS4zbDE2MCAxNjB6Ii8+PC9zdmc+") center right no-repeat #FFF; }
.select2-container                                  { min-width: 100%; }
.select2-container--default .select2-selection--single  { border-radius: 0px; height: 40px; border: 1px solid #000; width: 100%; }

.disable,
a:hover, .cta:hover                             { opacity: .5; }
.disable                                        { pointer-events: none; }

/* Footer Settings */
#page-foot										{ background: var(--primary-color); height: var(--footer-height); color: var(--menu-color); }
#page-foot container                            { height: calc( var(--footer-height) - var(--legal-height) ); }
#page-foot container div.vr                     { width: .5px; height: var(--footer-height); background: var(--menu-color); margin-left: calc( var(--grid-gutter) * 3 ); margin-right: calc( var(--grid-gutter) * 3 ) }
#page-foot container > a                        { color: var(--menu-color); text-decoration: none; font-size: clamp(26px,2.571vw,36px); text-transform: lowercase; font-weight: 600; }
#page-foot ul#legal                             { height: var(--legal-height); padding: 0px; list-style-type: none; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-content: stretch; align-items: center; }
#page-foot ul#legal li                          { display: inline-block; }
#page-foot .social li                           { margin: 0px 15px; }
#page-foot .social li a                         { color: var(--menu-color); }
#page-foot .social li.bs a                      { filter: invert(75%) sepia(18%) saturate(5223%) hue-rotate(2deg) brightness(108%) contrast(102%); }
#page-foot .social li.bs a:before               { width: 20px; height: 20px; display: inline-block; }

@media handheld, only screen and (max-width: 1259px) and (min-width: 1024px) { /* Under the grid width to iPad Landscape */
    :root{
        --grid-width:           calc( 100vw - 60px );
    }
}

@media handheld, only screen and (max-width: 1023px) { /* Mobile - All Mobile */
    
    :root {
        --grid-gutter   : clamp(22px,6.944vw,30px);
        --standard-font-size: clamp(15px,4.630vw,18px);
    }
	
	/* Mobile Menu styles */
    #page-head container { clip-path: none; }
    #page-head container:before { background: linear-gradient(0deg,rgba(224, 152, 21, 1) 0%, rgba(255, 195, 0, 1) 100%); top: auto; bottom: 0px; clip-path: polygon(0 clamp(11px,3.421vw,35px), 100% 0, 100% 100%, 0% 100%); transform: none; width: 100%; height: clamp(55px,6.843vw,70px); }
    #page-head container .logo                     { max-height: 300%; margin-left: var(--grid-gutter); position: relative; z-index: 3; top: 10px; }
    #page-head container .logo svg                  { max-width: 320px; }
    #page-head container #nav					  { background: var(--primary-color); position: absolute; background: linear-gradient(0deg,rgba(224, 152, 21, 1) 0%, rgba(255, 195, 0, 1) 100%) }
    #page-head container .toggle                  { right: var(--grid-gutter); height: 20px; top: 0px; }
    #page-head container .toggle:before, #page-head container .toggle:after, #page-head container .toggle em:before, #page-head container .toggle em:after {
        background: var(--primary-color);
    }
    #page-head container #nav                     { height: 0px; background: rgba(224, 152, 21, 1) } 

    #page-head container #nav #main li            {  }
	#page-head container #nav #main li a		  { padding-left: var(--grid-gutter); padding-right: var(--grid-gutter); font-size: var(--standard-font-size); }	
    #page-head container #nav #main .menu-item-has-children ul  { transform: none!important; min-width: 100%; max-width: 100%; left: 0px!important; }
	#page-head container #nav #main li ul	      {  }
    #page-head container #nav #main li ul li a    {  }
    

    .box-1-4.gallery-tile { order: -1; }
    
    .cta *                                          { height: clamp(31px,9.722vw,99px); }
    .dark-bg                                        { padding: calc(var(--grid-gutter) * 1); }
    .dark-bg h1                                     { top: calc( calc( var(--grid-gutter) * 1 ) * -1 ); left: calc( calc( var(--grid-gutter) * 1 ) * -1 );  width: calc(100% + var(--grid-gutter) + var(--grid-gutter)); }
    .comic-nav                                      { margin-bottom: 30px; }
    
    .main-comic-area                                { max-width: 100%!important; padding: 15px; }
    .main-comic-area div.dark-bg                    { padding: 15px;  }
    
    #page-head .topbanner-holder figure p, #page-head .topbanner-swiper figure p { padding: calc( var(--grid-gutter) / 2 ) var(--grid-gutter); }
    
    container                          { padding-left: var(--grid-gutter); padding-right: var(--grid-gutter); }
    
    article.single-post h1, article.single-post h2, article.single-post h3 { padding: calc( var(--grid-gutter) / 2 ) var(--grid-gutter); }
    
    .comic-nav .prevnext                { max-width: calc( 100vw - var(--grid-gutter) - var(--grid-gutter) - var(--grid-gutter) - var(--grid-gutter) ); }
    
    .other-titles                       {  display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: stretch; align-items: flex-start; gap: var(--grid-gutter); }
    .other-titles .showcase-item        { display: inline; }
    
    .main-comic-area figure             { padding: 10px; } 
    
    
    #page-foot container div.vr         { width: 100%; height: 1px; }


}

@media handheld, only screen and (max-width: 767px) {
    li.m-third { width: 50%!important; }   
    
    .content {
        & .single {
            time {
                display: none;
            }
            article {
                padding-inline: 10px;           
            }
        }
    }
}