/*=====================================================
                MANGA THEME V2
        PART 1 - BACKGROUND & BODY
======================================================*/

/*------------------------------
    ROOT
------------------------------*/

:root{

    --manga-bg:#f8f8f4;

    --manga-paper:#fdfdf9;

    --manga-black:#111;

    --manga-gray:#777;

    --manga-border:#000;

}

/*------------------------------
    BODY
------------------------------*/

html{
    scroll-behavior:smooth;
}

body{

    background:var(--manga-bg)!important;

    color:var(--manga-black);

    font-family:
    "BIZ UDPGothic",
    "Noto Sans JP",
    Arial,
    sans-serif;

    overflow-x:hidden;

    position:relative;

}

/*------------------------------
      PAPER TEXTURE
------------------------------*/

body::before{

    content:"";

    position:fixed;

    inset:0;

    z-index:-30;

    pointer-events:none;

    opacity:.18;

    background:

    repeating-linear-gradient(
        0deg,
        rgba(255,255,255,.95) 0px,
        rgba(255,255,255,.95) 2px,
        rgba(245,245,245,.95) 3px
    ),

    radial-gradient(circle at 15% 20%,
    rgba(0,0,0,.03),
    transparent 35%),

    radial-gradient(circle at 80% 65%,
    rgba(0,0,0,.03),
    transparent 45%);

}

/*------------------------------
      HALFTONE
------------------------------*/

body::after{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-29;

    opacity:.13;

    background-image:

    radial-gradient(#000 0.7px,transparent 0.7px);

    background-size:14px 14px;

}

/*------------------------------
 SPEED LINES TOP LEFT
------------------------------*/

#wrapper{

    position:relative;

}

#wrapper::before{

    content:"";

    position:fixed;

    width:700px;

    height:700px;

    top:-260px;

    left:-260px;

    pointer-events:none;

    z-index:-25;

    opacity:.12;

    background:

    repeating-conic-gradient(

        from 225deg,

        rgba(0,0,0,.75) 0deg,

        rgba(0,0,0,.75) .5deg,

        transparent .7deg,

        transparent 2.6deg

    );

}

/*------------------------------
 SPEED LINES BOTTOM RIGHT
------------------------------*/

#wrapper::after{

    content:"";

    position:fixed;

    width:700px;

    height:700px;

    bottom:-260px;

    right:-260px;

    pointer-events:none;

    z-index:-25;

    opacity:.12;

    background:

    repeating-conic-gradient(

        from 40deg,

        rgba(0,0,0,.75) 0deg,

        rgba(0,0,0,.75) .5deg,

        transparent .7deg,

        transparent 2.6deg

    );

}

/*------------------------------
   VIGNETTE
------------------------------*/

#content::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-24;

    background:

    radial-gradient(circle,
    transparent 55%,
    rgba(0,0,0,.06));

}

/*------------------------------
 SCROLLBAR
------------------------------*/

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#ececec;

}

::-webkit-scrollbar-thumb{

    background:#000;

    border-radius:20px;

    border:2px solid #ececec;

}

::-webkit-scrollbar-thumb:hover{

    background:#444;

}

/*------------------------------
 SELECTION
------------------------------*/

::selection{

    background:#000;

    color:#fff;

}

/*------------------------------
 LINKS
------------------------------*/

a{

    transition:.25s;

}

a:hover{

    text-decoration:none;

}
/*=====================================================
        MANGA THEME V2
        PART 2 - HEADER & NAVIGATION
======================================================*/

/* HEADER */

#headex{

    background:#ffffff !important;

    border-bottom:4px solid #000;

    box-shadow:
        0 6px 0 #000,
        0 12px 25px rgba(0,0,0,.12);

    position:relative;

    z-index:999;

}

/* HEADER STRIPE */

#headex::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:-4px;

    height:6px;

    background:
    repeating-linear-gradient(
        90deg,
        #000 0 8px,
        #fff 8px 16px
    );

}

/* HEADER WRAP */

#header-wrap{

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f5f5f5
        ) !important;

}

/* LOGO */

#logo{

    transition:.35s;

}

#logo img{

    filter:grayscale(100%)
           contrast(1.35);

    transition:.35s;

}

#logo:hover{

    transform:rotate(-2deg)
              scale(1.05);

}

#logo:hover img{

    filter:grayscale(0%)
           contrast(1.2);

}

/* MENU */

#primary-menu{

    font-weight:700;

    letter-spacing:.8px;

    text-transform:uppercase;

}

#primary-menu ul{

    gap:8px;

}

/* MENU ITEM */

#primary-menu ul li{

    margin:0 4px;

}

/* LINK */

#primary-menu ul li a{

    position:relative;

    color:#111 !important;

    border:2px solid transparent;

    padding:10px 14px;

    transition:.25s;

}

/* HOVER */

#primary-menu ul li a:hover{

    border-color:#000;

    background:#fff;

    transform:translateY(-2px);

}

/* UNDERLINE */

#primary-menu ul li a::after{

    content:"";

    position:absolute;

    left:12px;

    right:12px;

    bottom:5px;

    height:2px;

    background:#000;

    transform:scaleX(0);

    transition:.25s;

}

#primary-menu ul li a:hover::after{

    transform:scaleX(1);

}

/* ACTIVE */

#primary-menu .current a,
#primary-menu .current-menu-item>a{

    background:#000 !important;

    color:#fff !important;

    border-color:#000;

}

/* TOP BAR */

#top-bar{

    background:#fff !important;

    border-top:2px solid #000;

    border-bottom:2px solid #000;

}

/* SEARCH */

#top-search input{

    border:2px solid #000 !important;

    border-radius:0;

    box-shadow:none;

}

#top-search input:focus{

    border-color:#000;

    box-shadow:0 0 0 3px rgba(0,0,0,.12);

}

/* BUTTON */

.button{

    border-radius:0 !important;

    border:2px solid #000 !important;

    font-weight:700;

    transition:.25s;

}

.button:hover{

    transform:translateY(-2px);

    box-shadow:4px 4px 0 #000;

}
/*=====================================================
        MANGA THEME V2
      PART 3 - PANEL / CARD / TABLE
======================================================*/

/*==============================
    PANEL
==============================*/

.well,
.product,
.payForm,
#listingdetails,
#infoPanel{

    background:#ffffff !important;

    border:3px solid #000 !important;

    border-radius:0 !important;

    box-shadow:
        8px 8px 0 #000,
        0 15px 25px rgba(0,0,0,.08);

    margin-bottom:30px;

    position:relative;

    overflow:hidden;

}

/* Manga Corner */

.well::before,
.product::before,
.payForm::before,
#listingdetails::before{

    content:"";

    position:absolute;

    right:-45px;

    top:-45px;

    width:120px;

    height:120px;

    background:
    repeating-linear-gradient(
        45deg,
        rgba(0,0,0,.12) 0px,
        rgba(0,0,0,.12) 4px,
        transparent 4px,
        transparent 8px
    );

    transform:rotate(20deg);

}

/*==============================
     TITLE
==============================*/

h1,
h2,
h3,
h4{

    color:#111;

    font-weight:900;

    letter-spacing:1px;

    text-transform:uppercase;

    position:relative;

}

h1::after,
h2::after{

    content:"";

    display:block;

    width:100px;

    height:4px;

    background:#000;

    margin-top:10px;

}

/*==============================
 PRODUCT PRICE
==============================*/

.product-price ins{

    background:#000;

    color:#fff !important;

    padding:12px 18px;

    border-radius:0;

    display:inline-block;

    font-weight:800;

    border:3px solid #000;

}

/*==============================
 BUTTON
==============================*/

.button{

    background:#fff !important;

    color:#000 !important;

    border:3px solid #000 !important;

    transition:.25s;

}

.button:hover{

    background:#000 !important;

    color:#fff !important;

    transform:translate(-3px,-3px);

    box-shadow:6px 6px 0 #000;

}

/*==============================
 TABLE
==============================*/

table{

    width:100%;

    border-collapse:collapse;

    background:#fff;

}

table th{

    background:#000;

    color:#fff;

    padding:14px;

    border:2px solid #000;

    text-transform:uppercase;

}

table td{

    padding:12px;

    border:2px solid #000;

}

table tr:nth-child(even){

    background:#f5f5f5;

}

table tr:hover{

    background:#ececec;

}

/*==============================
 INPUT
==============================*/

input,
textarea,
select{

    background:#fff;

    border:2px solid #000 !important;

    border-radius:0 !important;

    box-shadow:none !important;

}

input:focus,
textarea:focus,
select:focus{

    outline:none;

    border-color:#000 !important;

    box-shadow:0 0 0 4px rgba(0,0,0,.12)!important;

}

/*==============================
 IMAGE
==============================*/

img{

    transition:.35s;

}

img:hover{

    filter:contrast(1.1) grayscale(.15);

}

/*==============================
 CARD HOVER
==============================*/

.well:hover,
.product:hover,
.payForm:hover{

    transform:translateY(-4px);

    transition:.3s;

    box-shadow:
        10px 10px 0 #000,
        0 20px 35px rgba(0,0,0,.12);

}
/*=====================================================
        MANGA THEME V2
 PART 4 - FOOTER / FAQ / BANNER / EFFECT
======================================================*/


/*==========================
        FOOTER
==========================*/

footer,
#footer{

    background:#111 !important;

    color:#fff !important;

    border-top:5px solid #000;

    position:relative;

}

footer::before,
#footer::before{

    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:8px;

    background:
    repeating-linear-gradient(
        90deg,
        #fff 0 8px,
        #000 8px 16px
    );

}


/*==========================
      FOOTER LINK
==========================*/

footer a,
#footer a{

    color:#fff !important;

    transition:.25s;

}

footer a:hover,
#footer a:hover{

    color:#ddd !important;

}


/*==========================
        FAQ
==========================*/

.accordion,
.panel-group{

    border:3px solid #000;

    background:#fff;

}

.accordion .panel,
.panel-group .panel{

    border-radius:0;

    border:none;

    border-bottom:2px solid #000;

    box-shadow:none;

}

.accordion-heading,
.panel-heading{

    background:#000 !important;

    color:#fff !important;

    font-weight:700;

}

.panel-title{

    text-transform:uppercase;

    letter-spacing:1px;

}

.panel-body{

    background:#fff;

    color:#111;

}


/*==========================
      SOCIAL ICON
==========================*/

#socials a{

    border:2px solid #000;

    border-radius:50%;

    transition:.3s;

}

#socials a:hover{

    transform:rotate(-12deg) scale(1.1);

    background:#000;

}


/*==========================
      THREE BANNER
==========================*/

.three-banner-item{

    border:4px solid #000;

    box-shadow:
        8px 8px 0 #000;

    border-radius:0 !important;

}

.three-banner-item:hover{

    transform:translateY(-6px);

}


/*==========================
       SLIDER
==========================*/

.flexslider{

    border:4px solid #000;

    box-shadow:
        8px 8px 0 #000;

    border-radius:0;

}

.flex-direction-nav a{

    background:#000;

    color:#fff !important;

}


/*==========================
      IMAGE EFFECT
==========================*/

.flexslider img{

    transition:.35s;

}

.flexslider img:hover{

    filter:
        grayscale(.2)
        contrast(1.2);

}


/*==========================
      MANGA LABEL
==========================*/

.ribbon-cheaper{

    background:#000 !important;

    color:#fff !important;

    font-weight:800;

    letter-spacing:1px;

    border:2px solid #fff;

}


/*==========================
      FADE ANIMATION
==========================*/

@keyframes mangaFade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

.well,
.product,
.payForm,
#infoPanel{

    animation:mangaFade .6s ease;

}


/*==========================
      SPEED FLASH
==========================*/

@keyframes mangaFlash{

    0%{

        opacity:.05;

    }

    50%{

        opacity:.12;

    }

    100%{

        opacity:.05;

    }

}

#wrapper::before,
#wrapper::after{

    animation:mangaFlash 6s linear infinite;

}


/*==========================
      HOVER PANEL
==========================*/

.product:hover,
.well:hover{

    transform:
        translateY(-5px)
        rotate(-0.2deg);

}


/*==========================
     BLACK & WHITE IMAGE
==========================*/

img{

    image-rendering:auto;

}

img:hover{

    filter:
        contrast(1.15)
        grayscale(.25);

}


/*==========================
       MOBILE
==========================*/

@media(max-width:768px){

    .three-banner-item{

        box-shadow:
            5px 5px 0 #000;

    }

    .well,
    .product{

        box-shadow:
            5px 5px 0 #000;

    }

}
/*=====================================================
      MANGA THEME V2
      PART 5 - PREMIUM MANGA EFFECT
======================================================*/


/*=====================================
      PANEL SHADOW
======================================*/

.well,
.product,
.payForm,
#infoPanel{

    overflow:hidden;

    position:relative;

}

/*=====================================
      HALFTONE CORNER
======================================*/

.well::after,
.product::after,
.payForm::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    right:-70px;

    bottom:-70px;

    opacity:.12;

    pointer-events:none;

    background-image:
    radial-gradient(#000 1px, transparent 1px);

    background-size:10px 10px;

}

/*=====================================
      INK SPLASH
======================================*/

.product::before{

    content:"";

    position:absolute;

    width:130px;

    height:130px;

    left:-45px;

    top:-45px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(0,0,0,.18) 0%,
    rgba(0,0,0,.10) 35%,
    transparent 72%);

    filter:blur(2px);

}

/*=====================================
      MANGA BURST
======================================*/

.product-price{

    position:relative;

}

.product-price::before{

    content:"";

    position:absolute;

    width:150px;

    height:150px;

    left:-30px;

    top:-40px;

    z-index:-1;

    opacity:.08;

    background:

    repeating-conic-gradient(

        from 0deg,

        #000 0deg,

        #000 1deg,

        transparent 2deg,

        transparent 8deg

    );

}

/*=====================================
      TITLE PANEL
======================================*/

h1{

    display:inline-block;

    padding:10px 22px;

    border:3px solid #000;

    background:#fff;

    box-shadow:8px 8px 0 #000;

}

/*=====================================
      INFO PANEL
======================================*/

#infoPanel{

    background:

    linear-gradient(

        180deg,

        #ffffff,

        #f5f5f5

    ) !important;

}

/*=====================================
      ICON
======================================*/

.iconlist li{

    padding:8px 0;

    transition:.3s;

}

.iconlist li:hover{

    transform:translateX(8px);

}

/*=====================================
      IMAGE FRAME
======================================*/

.flexslider{

    position:relative;

}

.flexslider::before{

    content:"";

    position:absolute;

    inset:10px;

    border:2px dashed rgba(0,0,0,.35);

    pointer-events:none;

}

/*=====================================
      THUMBNAIL
======================================*/

.flex-control-thumbs img{

    border:2px solid #000;

    transition:.3s;

}

.flex-control-thumbs img:hover{

    transform:scale(1.08);

}

/*=====================================
      SPEECH BUBBLE
======================================*/

.button{

    position:relative;

}

.button:hover::after{

    content:"!!";

    position:absolute;

    right:-8px;

    top:-10px;

    width:28px;

    height:28px;

    background:#fff;

    border:2px solid #000;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:900;

    font-size:13px;

}

/*=====================================
      BLACK STRIPE
======================================*/

#listingdetails{

    background-image:

    linear-gradient(

        transparent 96%,

        rgba(0,0,0,.03) 96%

    );

    background-size:100% 34px;

}

/*=====================================
      HOVER GLOW
======================================*/

.product:hover{

    box-shadow:

        12px 12px 0 #000,

        0 25px 40px rgba(0,0,0,.18);

}

/*=====================================
      PAGE APPEAR
======================================*/

@keyframes mangaAppear{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

#listingdetails{

    animation:mangaAppear .7s ease;

}

/*=====================================
      BUTTON PRESS
======================================*/

.button:active{

    transform:

    translate(3px,3px);

    box-shadow:none;

}

/*=====================================
      BORDER ANIMATION
======================================*/

@keyframes borderPulse{

    0%{

        border-color:#000;

    }

    50%{

        border-color:#444;

    }

    100%{

        border-color:#000;

    }

}

.product{

    animation:

    borderPulse 5s linear infinite;

}
/*=====================================================
        MANGA THEME V2
        PART 6 - FINAL POLISH
======================================================*/

/*=========================
      BREADCRUMB
=========================*/

#breadcrumb,
.breadcrumb{

    background:#fff !important;

    border:3px solid #000;

    padding:12px 18px;

    box-shadow:6px 6px 0 #000;

    border-radius:0;

}

.breadcrumb a{

    color:#000 !important;

    font-weight:700;

}

.breadcrumb a:hover{

    text-decoration:underline;

}


/*=========================
        PAGE TITLE
=========================*/

#page-title{

    background:#fff !important;

    border-bottom:4px solid #000;

}

#page-title h2{

    font-weight:900;

    letter-spacing:1px;

}


/*=========================
      COUNTDOWN
=========================*/

.countdown{

    display:inline-block;

    background:#000;

    color:#fff;

    padding:8px 12px;

    border:2px solid #000;

    font-weight:700;

}


/*=========================
      BADGE
=========================*/

.ribbon-cheaper{

    transform:rotate(-6deg);

    box-shadow:4px 4px 0 #000;

}


/*=========================
      SEARCH BOX
=========================*/

input[type=text],
input[type=search],
textarea,
select{

    transition:.25s;

}

input:focus,
textarea:focus,
select:focus{

    background:#fffef7;

}


/*=========================
      PRODUCT IMAGE
=========================*/

#idpleft img{

    border:3px solid #000;

    box-shadow:6px 6px 0 rgba(0,0,0,.25);

}


/*=========================
      PRODUCT INFO
=========================*/

.iconlist li{

    border-bottom:1px dashed rgba(0,0,0,.18);

}

.iconlist li:last-child{

    border-bottom:none;

}


/*=========================
      TOP LINKS
=========================*/

.top-links ul li a{

    font-weight:700;

    letter-spacing:.5px;

}


/*=========================
      NAV DROPDOWN
=========================*/

#primary-menu ul ul{

    background:#fff;

    border:3px solid #000;

    box-shadow:8px 8px 0 #000;

}

#primary-menu ul ul li{

    border-bottom:1px solid rgba(0,0,0,.15);

}


/*=========================
      HORIZONTAL LINE
=========================*/

hr{

    border:none;

    height:3px;

    background:

    repeating-linear-gradient(

        90deg,

        #000 0 8px,

        transparent 8px 14px

    );

}


/*=========================
      TABLE ROW
=========================*/

table tbody tr{

    transition:.25s;

}

table tbody tr:hover{

    transform:scale(1.01);

}


/*=========================
      PAGINATION
=========================*/

.pagination>li>a,
.pagination>li>span{

    border:2px solid #000 !important;

    color:#000 !important;

    background:#fff !important;

}

.pagination>.active>a{

    background:#000 !important;

    color:#fff !important;

}


/*=========================
      LOADING EFFECT
=========================*/

@keyframes mangaFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-2px);

    }

    100%{

        transform:translateY(0);

    }

}

.button,
.product-price ins{

    animation:mangaFloat 4s ease-in-out infinite;

}


/*=========================
      MOBILE
=========================*/

@media(max-width:768px){

    #breadcrumb{

        font-size:13px;

    }

    h1{

        font-size:24px;

    }

    h2{

        font-size:20px;

    }

    .button{

        width:100%;

        margin-bottom:10px;

    }

}
/*=====================================================
        MANGA THEME V2
        PART 7 - ADVANCED MANGA UI
======================================================*/


/*======================================
      TORN PAPER SECTION
=======================================*/

.well,
.product,
.payForm,
#listingdetails,
#infoPanel{

    position:relative;

}

.well::after,
.product::after,
.payForm::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:-8px;

    height:16px;

    background:
    repeating-linear-gradient(
        -45deg,
        transparent 0 8px,
        #fff 8px 16px
    );

    opacity:.45;

    pointer-events:none;

}


/*======================================
      INK BRUSH BORDER
=======================================*/

.product{

    border:4px solid #000 !important;

    outline:1px solid rgba(255,255,255,.25);

    outline-offset:-6px;

}


/*======================================
      COMIC FRAME
=======================================*/

#listingdetails{

    padding:30px;

    border:5px solid #000;

    box-shadow:
        12px 12px 0 #000,
        0 25px 40px rgba(0,0,0,.12);

}


/*======================================
      PANEL ROTATION
=======================================*/

.product:nth-child(odd){

    transform:rotate(-0.35deg);

}

.product:nth-child(even){

    transform:rotate(.35deg);

}

.product:hover{

    transform:rotate(0deg) translateY(-6px);

}


/*======================================
      MANGA TITLE BAR
=======================================*/

h1,
h2,
h3{

    position:relative;

    display:inline-block;

}

h1::before,
h2::before,
h3::before{

    content:"";

    position:absolute;

    left:-14px;

    top:50%;

    width:8px;

    height:75%;

    background:#000;

    transform:translateY(-50%);

}


/*======================================
      PRODUCT IMAGE FRAME
=======================================*/

.product img,
#idpleft img{

    background:#fff;

    padding:8px;

    border:3px solid #000;

    box-shadow:
        6px 6px 0 rgba(0,0,0,.18);

}


/*======================================
      COMIC CAPTION
=======================================*/

.caption,
.product-title{

    font-weight:800;

    letter-spacing:.8px;

    text-transform:uppercase;

}


/*======================================
      PRICE TAG
=======================================*/

.product-price{

    display:inline-block;

    position:relative;

}

.product-price::after{

    content:"";

    position:absolute;

    inset:-6px;

    border:2px dashed rgba(0,0,0,.35);

    pointer-events:none;

}


/*======================================
      TABLE HEADER
=======================================*/

table th{

    position:relative;

}

table th::after{

    content:"";

    position:absolute;

    bottom:0;

    left:0;

    right:0;

    height:4px;

    background:

    repeating-linear-gradient(

        90deg,

        #fff 0 6px,

        transparent 6px 12px

    );

}


/*======================================
      SIDEBAR
=======================================*/

.sidebar,
.widget{

    border:3px solid #000;

    background:#fff;

    box-shadow:8px 8px 0 #000;

    padding:18px;

}


/*======================================
      WIDGET TITLE
=======================================*/

.widget-title{

    font-weight:900;

    border-bottom:3px solid #000;

    padding-bottom:10px;

    margin-bottom:18px;

}


/*======================================
      LIST ITEM
=======================================*/

.widget ul li{

    border-bottom:1px dashed rgba(0,0,0,.18);

    padding:10px 0;

}

.widget ul li:last-child{

    border-bottom:none;

}


/*======================================
      LINK EFFECT
=======================================*/

a{

    position:relative;

}

a:hover{

    text-decoration:none;

}

a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-2px;

    width:0;

    height:2px;

    background:#000;

    transition:.25s;

}

a:hover::after{

    width:100%;

}


/*======================================
      SECTION SPACING
=======================================*/

section{

    margin-bottom:50px;

}


/*======================================
      DIVIDER
=======================================*/

.divider{

    height:5px;

    background:

    repeating-linear-gradient(

        90deg,

        #000 0 10px,

        transparent 10px 20px

    );

    margin:40px 0;

}
/*=====================================================
        MANGA THEME V2
 PART 8 - PREMIUM ANIMATION & CINEMATIC EFFECT
======================================================*/


/*==================================
      GLOBAL TRANSITION
===================================*/

*{

    transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease,
        box-shadow .30s ease,
        transform .30s ease;

}


/*==================================
      PANEL FLOAT
===================================*/

@keyframes panelFloat{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-3px);

    }

    100%{

        transform:translateY(0px);

    }

}

.product:hover,
.well:hover,
.payForm:hover{

    animation:panelFloat 1.6s ease-in-out infinite;

}


/*==================================
      SPEED LINE MOTION
===================================*/

@keyframes speedMove{

    from{

        background-position:0 0;

    }

    to{

        background-position:0 500px;

    }

}

#wrapper::before{

    animation:
        speedMove 12s linear infinite,
        mangaFlash 6s linear infinite;

}


/*==================================
      HALFTONE PULSE
===================================*/

@keyframes dotPulse{

    0%{

        opacity:.06;

    }

    50%{

        opacity:.15;

    }

    100%{

        opacity:.06;

    }

}

body::after{

    animation:dotPulse 8s ease-in-out infinite;

}


/*==================================
      IMAGE ZOOM
===================================*/

.product img,
.flexslider img{

    transition:

        transform .45s ease,

        filter .45s ease;

}

.product:hover img{

    transform:scale(1.04);

    filter:

        contrast(1.12)

        grayscale(.12);

}


/*==================================
      BUTTON GLOW
===================================*/

.button{

    overflow:hidden;

    position:relative;

}

.button::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:

        linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

}

.button:hover::before{

    left:160%;

    transition:1s;

}


/*==================================
      COMIC FLASH
===================================*/

@keyframes comicFlash{

    0%{

        opacity:0;

    }

    40%{

        opacity:.08;

    }

    100%{

        opacity:0;

    }

}

.product:hover::before{

    animation:comicFlash .9s;

}


/*==================================
      TABLE EFFECT
===================================*/

table tbody tr{

    position:relative;

}

table tbody tr:hover{

    transform:scale(1.01);

    box-shadow:

        inset 0 0 0 9999px rgba(0,0,0,.04);

}


/*==================================
      PRICE POP
===================================*/

@keyframes pricePop{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

.product-price:hover{

    animation:pricePop .5s;

}


/*==================================
      TITLE REVEAL
===================================*/

h1,
h2,
h3{

    overflow:hidden;

}

h1::after,
h2::after{

    animation:titleReveal 1.2s ease;

}

@keyframes titleReveal{

    from{

        width:0;

    }

    to{

        width:100px;

    }

}


/*==================================
      SIDEBAR HOVER
===================================*/

.widget:hover{

    transform:translateY(-4px);

}


/*==================================
      NAVIGATION
===================================*/

#primary-menu li:hover{

    transform:translateY(-2px);

}


/*==================================
      ICON SPIN
===================================*/

.social-icon:hover,

#socials a:hover{

    transform:

        rotate(-12deg)

        scale(1.15);

}


/*==================================
      SCROLLBAR
===================================*/

::-webkit-scrollbar-thumb{

    transition:.3s;

}

::-webkit-scrollbar-thumb:hover{

    background:#000;

}


/*==================================
      PAGE LOAD
===================================*/

@keyframes pageFade{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

body{

    animation:pageFade .8s ease;

}
/*=====================================================
        MANGA THEME V2
    PART 9 - FULL COMPONENT STYLING
======================================================*/


/*====================================
        LOGIN FORM
====================================*/

.login-box,
.login-panel,
.login-wrap{

    background:#fff;

    border:4px solid #000;

    box-shadow:
        10px 10px 0 #000;

    padding:25px;

}


/*====================================
      REGISTER FORM
====================================*/

.register-box,
.register-panel{

    background:#fff;

    border:4px solid #000;

    box-shadow:
        10px 10px 0 #000;

}


/*====================================
      FORM LABEL
====================================*/

label{

    font-weight:800;

    letter-spacing:.5px;

    text-transform:uppercase;

}


/*====================================
      INPUT ICON
====================================*/

.form-control{

    border-radius:0 !important;

    border:3px solid #000 !important;

    background:#fff;

    box-shadow:none !important;

}


/*====================================
      SELECT
====================================*/

select{

    appearance:none;

    background:

        linear-gradient(

            45deg,

            transparent 50%,

            #000 50%

        ),

        linear-gradient(

            135deg,

            #000 50%,

            transparent 50%

        );

    background-position:

        calc(100% - 18px) 18px,

        calc(100% - 12px) 18px;

    background-size:6px 6px;

    background-repeat:no-repeat;

}


/*====================================
      ALERT
====================================*/

.alert{

    border-radius:0;

    border:3px solid #000;

    font-weight:700;

}


/*====================================
      SUCCESS
====================================*/

.alert-success{

    background:#fdfdfd;

    color:#111;

}


/*====================================
      WARNING
====================================*/

.alert-warning{

    background:#fff9e5;

}


/*====================================
      ERROR
====================================*/

.alert-danger{

    background:#fff0f0;

}


/*====================================
      MODAL
====================================*/

.modal-content{

    border-radius:0;

    border:4px solid #000;

    box-shadow:

        14px 14px 0 #000;

}


/*====================================
      MODAL HEADER
====================================*/

.modal-header{

    background:#000;

    color:#fff;

}


/*====================================
      TABS
====================================*/

.nav-tabs{

    border-bottom:4px solid #000;

}

.nav-tabs>li>a{

    border:3px solid #000;

    border-bottom:none;

    background:#fff;

    color:#111;

}

.nav-tabs>.active>a{

    background:#000 !important;

    color:#fff !important;

}


/*====================================
      BADGE
====================================*/

.badge{

    border-radius:0;

    border:2px solid #000;

    background:#000;

    color:#fff;

}


/*====================================
      LIST GROUP
====================================*/

.list-group-item{

    border:2px solid #000;

    margin-bottom:-2px;

}


/*====================================
      DROPDOWN
====================================*/

.dropdown-menu{

    border:3px solid #000;

    border-radius:0;

    box-shadow:

        8px 8px 0 #000;

}

.dropdown-menu>li>a:hover{

    background:#000;

    color:#fff;

}


/*====================================
      PAGER
====================================*/

.pagination>li>a{

    min-width:42px;

    text-align:center;

}


/*====================================
      CHECKBOX
====================================*/

input[type=checkbox]{

    accent-color:#000;

}


/*====================================
      RADIO
====================================*/

input[type=radio]{

    accent-color:#000;

}


/*====================================
      BLOCKQUOTE
====================================*/

blockquote{

    border-left:8px solid #000;

    background:#fff;

    padding:20px;

    font-style:italic;

}


/*====================================
      CODE
====================================*/

pre,
code{

    background:#f7f7f7;

    border:2px solid #000;

    border-radius:0;

}


/*====================================
      PRODUCT DESCRIPTION
====================================*/

.product-description{

    line-height:1.9;

}


/*====================================
      REVIEW
====================================*/

.review{

    border:3px solid #000;

    background:#fff;

    padding:20px;

    margin-bottom:20px;

}
/*=====================================================
        MANGA THEME V2
      PART 10 - AAA PREMIUM THEME
======================================================*/


/*======================================
        GLOBAL CONTAINER
=======================================*/

.container,
.container-fluid{

    position:relative;

}


/*======================================
      SECTION PANEL
=======================================*/

section{

    position:relative;

    padding:25px;

    background:#fff;

    border:3px solid #000;

    margin-bottom:35px;

    box-shadow:
        8px 8px 0 rgba(0,0,0,.12);

}


/*======================================
      PRODUCT GRID
=======================================*/

.product{

    background:#fff;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

}


/*======================================
      PRODUCT TITLE
=======================================*/

.product-title{

    min-height:54px;

    font-size:16px;

    font-weight:800;

    line-height:1.4;

}


/*======================================
      PRODUCT BUTTON
=======================================*/

.product .button{

    margin-top:auto;

}


/*======================================
      IMAGE BORDER
=======================================*/

.product img{

    border:4px solid #000;

    background:#fff;

    padding:6px;

}


/*======================================
      GALLERY
=======================================*/

.gallery img{

    border:3px solid #000;

    padding:5px;

    background:#fff;

}

.gallery img:hover{

    transform:scale(1.05);

}


/*======================================
      CATEGORY
=======================================*/

.category-box{

    border:3px solid #000;

    padding:18px;

    background:#fff;

    box-shadow:6px 6px 0 #000;

}

.category-box:hover{

    transform:translateY(-4px);

}


/*======================================
      SIDEBAR CATEGORY
=======================================*/

.sidebar ul li{

    transition:.25s;

}

.sidebar ul li:hover{

    padding-left:10px;

}


/*======================================
      USER PANEL
=======================================*/

.dashboard-box,
.user-panel{

    background:#fff;

    border:4px solid #000;

    padding:25px;

}


/*======================================
      PROFILE IMAGE
=======================================*/

.avatar img{

    border:4px solid #000;

    border-radius:0;

}


/*======================================
      ORDER TABLE
=======================================*/

.order-table tr{

    transition:.2s;

}

.order-table tr:hover{

    background:#f2f2f2;

}


/*======================================
      SEARCH RESULT
=======================================*/

.search-result{

    border-bottom:2px dashed rgba(0,0,0,.2);

    padding:18px 0;

}


/*======================================
      RATING STAR
=======================================*/

.rating{

    filter:grayscale(100%);

}

.rating:hover{

    filter:none;

}


/*======================================
      TOOLTIP
=======================================*/

.tooltip-inner{

    border-radius:0;

    border:2px solid #000;

    background:#000;

}


/*======================================
      PROGRESS BAR
=======================================*/

.progress{

    border-radius:0;

    border:2px solid #000;

    background:#fff;

}

.progress-bar{

    background:#000;

}


/*======================================
      TABLE STRIPE
=======================================*/

.table-striped tbody tr:nth-child(odd){

    background:#fafafa;

}


/*======================================
      HOVER EFFECT
=======================================*/

.product,
.widget,
.category-box,
.dashboard-box{

    transition:

        transform .25s,

        box-shadow .25s;

}

.product:hover,
.widget:hover,
.category-box:hover,
.dashboard-box:hover{

    box-shadow:

        12px 12px 0 #000;

}


/*======================================
      LOADING PLACEHOLDER
=======================================*/

@keyframes shimmer{

    from{

        background-position:-200px 0;

    }

    to{

        background-position:200px 0;

    }

}

.loading{

    background:

        linear-gradient(

            90deg,

            #eee 25%,

            #f7f7f7 50%,

            #eee 75%

        );

    background-size:400px 100%;

    animation:shimmer 1.4s infinite;

}


/*======================================
      FINAL RESPONSIVE
=======================================*/

@media(max-width:992px){

    section{

        padding:18px;

    }

    .product{

        margin-bottom:20px;

    }

}

@media(max-width:768px){

    .product{

        transform:none !important;

    }

    .widget{

        margin-bottom:20px;

    }

}