@media (min-width: 1025px) {.dropdown-menu, .modal-content, .panel, .list-group-item {  background-color: rgba(250, 250, 250, 0.9); } }html, body {background: #264A66;background-attachment: inherit;}.nav-pills>li>a {color: #2f84c0 }body a {color: #1c4f73 } .nav-pills>li {background: rgba(235,243,249,0.9) } body .navbar-inverse .navbar-nav>li>a:hover, body .nav-pills .active a:hover, body .btn-info:hover, body a.list-group-item.active:hover {background-color: #13354d } body .smallertop {background-color: #266a9a } body .btn-info, body a.list-group-item.active, body .nav-pills .active a { background-color: #2F84C0 } body .panel, body .btn-info, body .btn-info:hover, body a.list-group-item.active, body .navbar-orange { border-color: #266a9a; } .dropdown-menu a { color: #333; } .panel-default>.panel-heading { background-color: #599dcd; } .blogTitle, a.list-group-item.active, body .navbar-orange .navbar-nav>li>a, .navbar-inverse .col-sm-12:not(.smallertop) .navbar-nav>li>a, .panel-default>.panel-heading, body .nav-pills .active a, .btn-info { color:#ffffff; } body a.navbar-brand .rezregular { color:#ffffff !important; } 
        
        /* =========================================================
   JUMALOLENTO V2
   Synkattu puna/musta hengitys + hoverissa teeman värikääntö
   ========================================================= */

/* =========================================================
   1. PÄÄSÄÄDÖT
   ========================================================= */

:root {
    --breath-speed: 4.6s;
    --breath-ease: ease-in-out;

    /* normaali tila */
    --bg-a: #000000;
    --bg-b: #160000;

    --panel-a: rgba(0, 0, 0, 0.90);
    --panel-b: rgba(24, 0, 0, 0.98);

    --edge-a: #420000;
    --edge-b: #ff0000;

    --text-a: #6a0000;
    --text-b: #ff1111;

    --title-a: #8a0000;
    --title-b: #ff0000;

    --glow-a:
        0 0 8px rgba(255, 0, 0, 0.18),
        0 0 18px rgba(255, 0, 0, 0.06);

    --glow-b:
        0 0 18px rgba(255, 0, 0, 0.42),
        0 0 42px rgba(255, 0, 0, 0.14);

    --text-glow-a:
        0 0 2px rgba(255, 0, 0, 0.14),
        0 0 6px rgba(255, 0, 0, 0.04);

    --text-glow-b:
        0 0 6px rgba(255, 0, 0, 0.62),
        0 0 16px rgba(255, 0, 0, 0.16);

    --img-glow-a:
        0 0 8px rgba(255, 0, 0, 0.20),
        0 0 18px rgba(255, 0, 0, 0.06);

    --img-glow-b:
        0 0 14px rgba(255, 0, 0, 0.36),
        0 0 30px rgba(255, 0, 0, 0.10);
}

/* =========================================================
   2. HOVERISSA KOKO TEEMA KÄÄNTYY
   musta -> punainen
   punainen -> musta
   ========================================================= */

body:has(
    a:hover,
    .btn:hover,
    button:hover,
    input[type=”submit”]:hover,
    input[type=”button”]:hover,
    .dropdown-toggle:hover,
    .list-group-item:hover,
    .thumbnail:hover,
    .navbar-brand:hover,
    .nav > li > a:hover,
    .nav-pills > li > a:hover,
    .profilemenu > li > a:hover
) {
    --bg-a: #ff0000;
    --bg-b: #940000;

    --panel-a: rgba(255, 0, 0, 0.92);
    --panel-b: rgba(180, 0, 0, 0.98);

    --edge-a: #000000;
    --edge-b: #000000;

    --text-a: #000000;
    --text-b: #000000;

    --title-a: #000000;
    --title-b: #000000;

    --glow-a:
        0 0 8px rgba(0, 0, 0, 0.22),
        0 0 18px rgba(0, 0, 0, 0.08);

    --glow-b:
        0 0 18px rgba(0, 0, 0, 0.48),
        0 0 42px rgba(0, 0, 0, 0.18);

    --text-glow-a:
        0 0 2px rgba(0, 0, 0, 0.20),
        0 0 6px rgba(0, 0, 0, 0.08);

    --text-glow-b:
        0 0 6px rgba(0, 0, 0, 0.55),
        0 0 16px rgba(0, 0, 0, 0.18);

    --img-glow-a:
        0 0 8px rgba(0, 0, 0, 0.24),
        0 0 18px rgba(0, 0, 0, 0.08);

    --img-glow-b:
        0 0 14px rgba(0, 0, 0, 0.44),
        0 0 30px rgba(0, 0, 0, 0.16);
}

/* hoveroitu klikattava asia pysyy alkuperäisenä punamustana */
a:hover,
.btn:hover,
button:hover,
input[type=”submit”]:hover,
input[type=”button”]:hover,
.dropdown-toggle:hover,
.list-group-item:hover,
.thumbnail:hover,
.navbar-brand:hover,
.nav > li > a:hover,
.nav-pills > li > a:hover,
.profilemenu > li > a:hover {
    --panel-a: rgba(0, 0, 0, 0.94);
    --panel-b: rgba(24, 0, 0, 0.98);

    --edge-a: #660000;
    --edge-b: #ff0000;

    --text-a: #b00000;
    --text-b: #ff1111;

    --title-a: #c00000;
    --title-b: #ff0000;

    --glow-a:
        0 0 10px rgba(255, 0, 0, 0.24),
        0 0 22px rgba(255, 0, 0, 0.08);

    --glow-b:
        0 0 22px rgba(255, 0, 0, 0.56),
        0 0 48px rgba(255, 0, 0, 0.18);

    --text-glow-a:
        0 0 3px rgba(255, 0, 0, 0.22),
        0 0 8px rgba(255, 0, 0, 0.08);

    --text-glow-b:
        0 0 8px rgba(255, 0, 0, 0.76),
        0 0 20px rgba(255, 0, 0, 0.22);
}

/* =========================================================
   3. ANIMAATIOT
   ========================================================= */

@-webkit-keyframes bloodBg {
    0%, 100% {
        background-color: var(--bg-a);
    }
    50% {
        background-color: var(--bg-b);
    }
}
@keyframes bloodBg {
    0%, 100% {
        background-color: var(--bg-a);
    }
    50% {
        background-color: var(--bg-b);
    }
}

@-webkit-keyframes bloodPanel {
    0%, 100% {
        background-color: var(--panel-a);
        border-color: var(--edge-a);
        box-shadow: var(--glow-a);
    }
    50% {
        background-color: var(--panel-b);
        border-color: var(--edge-b);
        box-shadow: var(--glow-b);
    }
}
@keyframes bloodPanel {
    0%, 100% {
        background-color: var(--panel-a);
        border-color: var(--edge-a);
        box-shadow: var(--glow-a);
    }
    50% {
        background-color: var(--panel-b);
        border-color: var(--edge-b);
        box-shadow: var(--glow-b);
    }
}

@-webkit-keyframes bloodText {
    0%, 100% {
        color: var(--text-a);
        text-shadow: var(--text-glow-a);
    }
    50% {
        color: var(--text-b);
        text-shadow: var(--text-glow-b);
    }
}
@keyframes bloodText {
    0%, 100% {
        color: var(--text-a);
        text-shadow: var(--text-glow-a);
    }
    50% {
        color: var(--text-b);
        text-shadow: var(--text-glow-b);
    }
}

@-webkit-keyframes bloodTitle {
    0%, 100% {
        color: var(--title-a);
        text-shadow: var(--text-glow-a);
    }
    50% {
        color: var(--title-b);
        text-shadow: var(--text-glow-b);
    }
}
@keyframes bloodTitle {
    0%, 100% {
        color: var(--title-a);
        text-shadow: var(--text-glow-a);
    }
    50% {
        color: var(--title-b);
        text-shadow: var(--text-glow-b);
    }
}

@-webkit-keyframes bloodImage {
    0%, 100% {
        border-color: var(--edge-a);
        box-shadow: var(--img-glow-a);
    }
    50% {
        border-color: var(--edge-b);
        box-shadow: var(--img-glow-b);
    }
}
@keyframes bloodImage {
    0%, 100% {
        border-color: var(--edge-a);
        box-shadow: var(--img-glow-a);
    }
    50% {
        border-color: var(--edge-b);
        box-shadow: var(--img-glow-b);
    }
}

@-webkit-keyframes bloodFog {
    0%, 100% {
        opacity: 0.07;
        -webkit-transform: scale(1);
                transform: scale(1);
    }
    50% {
        opacity: 0.19;
        -webkit-transform: scale(1.025);
                transform: scale(1.025);
    }
}
@keyframes bloodFog {
    0%, 100% {
        opacity: 0.07;
        -webkit-transform: scale(1);
                transform: scale(1);
    }
    50% {
        opacity: 0.19;
        -webkit-transform: scale(1.025);
                transform: scale(1.025);
    }
}

/* =========================================================
   4. TAUSTA
   ========================================================= */

html,
body {
    background:
        linear-gradient(rgba(0,0,0,0.90), rgba(22,0,0,0.98)),
        url('https://i.imgur.com/6UiVVpo.jpg') center center / cover fixed no-repeat !important;
    color: #ff0000 !important;
    min-height: 100%;
    width: 100%;
    -webkit-animation: bloodBg var(--breath-speed) var(--breath-ease) infinite !important;
            animation: bloodBg var(--breath-speed) var(--breath-ease) infinite !important;
}

body {
    position: relative !important;
    overflow-x: hidden !important;
}

body::before {
    content: ””;
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 50% 14%, rgba(255,0,0,0.14), transparent 28%),
        radial-gradient(circle at 50% 84%, rgba(200,0,0,0.10), transparent 34%),
        radial-gradient(circle at 18% 50%, rgba(120,0,0,0.06), transparent 22%),
        radial-gradient(circle at 82% 50%, rgba(120,0,0,0.06), transparent 22%);
    -webkit-animation: bloodFog var(--breath-speed) var(--breath-ease) infinite !important;
            animation: bloodFog var(--breath-speed) var(--breath-ease) infinite !important;
}

.navbar,
#body,
.main,
.panel,
.dropdown-menu,
.notifi,
.profilemenu,
#footer {
    position: relative !important;
    z-index: 1 !important;
}

/* =========================================================
   5. ÄLÄ RIKO NAVBARIA
   ========================================================= */

.navbar .container,
.navbar .row,
.navbar .col-sm-12,
.navbar-header,
.collapse2,
.navbar-collapse2,
.smallertop .collapse,
.smallertop .navbar-collapse,
.navbar-nav,
.navbar-nav > li,
.nav,
.nav > li,
.container,
.row,
.col-sm-12,
.col-sm-9,
.col-sm-8,
.col-sm-4,
.col-sm-3,
.col-sm-2,
.col-md-10,
.col-md-2,
.col-xs-12,
.col-xs-6,
.col-xs-4,
.col-xs-3 {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-animation: none !important;
            animation: none !important;
}

/* =========================================================
   6. NAVBAR JA NAVINAPIT
   ========================================================= */

.navbar,
.navbar-inverse,
.navbar-orange,
.navbar-fixed-top,
.smallertop {
    background: var(--panel-a) !important;
    border-top: 1px solid var(--edge-a) !important;
    border-bottom: 1px solid var(--edge-b) !important;
    box-shadow: var(--glow-a) !important;
    -webkit-animation: bloodPanel var(--breath-speed) var(--breath-ease) infinite !important;
            animation: bloodPanel var(--breath-speed) var(--breath-ease) infinite !important;
}

.navbar-nav > li > a,
.nav > li > a,
.nav-pills > li > a,
.profilemenu > li > a,
.navbar .dropdown-toggle,
.navbar .navbar-brand,
.btn,
.btn-default,
.btn-info,
.btn-success,
.btn-danger,
.btn-warning,
.btn-xs,
.btn-sm,
.btn-full {
    background: var(--panel-a) !important;
    background-image: none !important;
    border: 1px solid var(--edge-a) !important;
    color: var(--text-b) !important;
    box-shadow: var(--glow-a) !important;
    -webkit-animation:
        bloodPanel var(--breath-speed) var(--breath-ease) infinite,
        bloodText var(--breath-speed) var(--breath-ease) infinite !important;
            animation:
        bloodPanel var(--breath-speed) var(--breath-ease) infinite,
        bloodText var(--breath-speed) var(--breath-ease) infinite !important;
}

.nav > li.active > a,
.nav > li.active > a:hover,
.nav > li.active > a:focus,
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus,
.profilemenu li.active > a,
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus,
.nav > li > a:hover,
.nav > li > a:focus,
.btn:hover,
.btn:focus {
    background: var(--panel-b) !important;
    border-color: var(--edge-b) !important;
    color: var(--text-b) !important;
    box-shadow: var(--glow-b) !important;
}

/* hakukenttä */
.navbar input,
.navbar .form-control,
#search_box,
#search_box2 {
    background: #000000 !important;
    border: 1px solid #7a0000 !important;
    color: #ff0000 !important;
    box-shadow:
        0 0 8px rgba(255,0,0,0.18),
        inset 0 0 8px rgba(255,0,0,0.05) !important;
    -webkit-animation: none !important;
            animation: none !important;
}

/* =========================================================
   7. PANEELIT JA LAATIKOT
   ========================================================= */

.panel,
.panel-default,
.panel-body,
.panel-heading,
.box,
.dropdown-menu,
.modal-content,
.notifi,
.list-group-item,
.thumbnail,
.outline,
#body,
#left,
#center,
#options,
#footer .panel,
#footer .panel-body {
    background: var(--panel-a) !important;
    background-image: none !important;
    border: 2px solid var(--edge-a) !important;
    box-shadow: var(--glow-a) !important;
    -webkit-animation: bloodPanel var(--breath-speed) var(--breath-ease) infinite !important;
            animation: bloodPanel var(--breath-speed) var(--breath-ease) infinite !important;
}

.panel-default > .panel-heading,
.panel-heading,
.header,
.ovari {
    background: var(--panel-b) !important;
    border-color: var(--edge-b) !important;
}

/* =========================================================
   8. TEKSTIT
   ========================================================= */

body,
body a,
body p,
body li,
body span,
body small,
body strong,
body b,
body i,
body em,
body h1,
body h2,
body h3,
body h4,
body h5,
body td,
body th,
body dd,
body dt,
body label,
.panel-body,
.panel-body *,
.panel-heading,
.panel-heading *,
.list-group-item,
.list-group-item *,
.dropdown-menu a,
.friendinfo,
.friendinfo *,
.blogTitle,
.imagetitle,
.imagetitle *,
.infolist,
.infolist *,
.comment,
.comment *,
#footer,
#footer * {
    color: var(--text-b) !important;
    -webkit-animation: bloodText var(--breath-speed) var(--breath-ease) infinite !important;
            animation: bloodText var(--breath-speed) var(--breath-ease) infinite !important;
}

.usertitle,
.usertitle *,
.blogTitle,
.panel-heading h3,
.panel-heading h4,
.panel-heading h5 {
    -webkit-animation: bloodTitle var(--breath-speed) var(--breath-ease) infinite !important;
            animation: bloodTitle var(--breath-speed) var(--breath-ease) infinite !important;
}

.usertitle span,
.usertitle span[style] {
    background: transparent !important;
    color: var(--title-b) !important;
    text-decoration: none !important;
}

/* linkit */
a:link {
    color: var(--text-b) !important;
}
a:visited {
    color: var(--text-a) !important;
}
a:hover {
    color: var(--text-b) !important;
}
a:active {
    color: var(--text-b) !important;
}

/* =========================================================
   9. KUVAT
   ========================================================= */

img {
    border: 3px ridge var(--edge-a) !important;
    -webkit-animation: bloodImage var(--breath-speed) var(--breath-ease) infinite !important;
            animation: bloodImage var(--breath-speed) var(--breath-ease) infinite !important;
}

img:hover {
    transform: none !important;
}

/* =========================================================
   10. INPUTIT
   ========================================================= */

input,
textarea,
select,
.form-control,
input.form-control,
textarea.form-control,
select.form-control,
input[type=”text”],
input[type=”search”],
input[type=”password”],
input[type=”submit”],
input[type=”button”],
button {
    background: #000000 !important;
    color: #ff0000 !important;
    border: 1px solid #7a0000 !important;
    box-shadow:
        0 0 6px rgba(255,0,0,0.16),
        inset 0 0 8px rgba(255,0,0,0.04) !important;
    text-shadow: none !important;
    -webkit-animation: none !important;
            animation: none !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    outline: none !important;
    background: #0b0000 !important;
    border-color: #ff0000 !important;
    color: #ff0000 !important;
    box-shadow:
        0 0 12px rgba(255,0,0,0.30),
        0 0 24px rgba(255,0,0,0.08) !important;
}

input::placeholder,
textarea::placeholder {
    color: #980000 !important;
    opacity: 1 !important;
}

input[type=”checkbox”],
input[type=”radio”] {
    accent-color: #ff0000 !important;
}

/* =========================================================
   11. MEDIA / CHARTIT / IKONIT
   ========================================================= */

video,
canvas,
svg,
#chart,
#chart *,
.glyphicon,
.glyphicon *,
.thumb,
.thumb * {
    text-shadow: none !important;
}

#chart,
#chart * {
    -webkit-animation: none !important;
            animation: none !important;
}

/* =========================================================
   12. MUUT PIENET
   ========================================================= */

.oldline:nth-child(even) {
    background: rgba(0,0,0,0.76) !important;
}

body .dropdown-menu.notifi a {
    color: var(--text-b) !important;
}

.green,
.status,
.badge,
.label,
.paikalla,
.verified,
.admin,
.admin a {
    color: var(--text-b) !important;
    background: transparent !important;
    border-color: var(--edge-a) !important;
    box-shadow: none !important;
}

table,
tr,
td,
th,
dl,
dt,
dd {
    background: transparent !important;
    border-color: var(--edge-a) !important;
    color: var(--text-b) !important;
}

.panel-body table tr td {
    border-top: 1px solid var(--edge-a) !important;
}

* {
    cursor: auto !important;
}

::selection {
    color: #ff0000 !important;
    background: #ffffff !important;
}

@media (max-width: 767px) {
    .navbar-offcanvas {
        left: -250px;
    }
} @media (max-width: 767px) {
.navbar-offcanvas {
  left: -250px;}
}