/*!
    
 =========================================================
 * WebEngine CMS
 * https://webenginecms.org/
 =========================================================
 
 * Author Lautaro Angelico (https://lautaroangelico.com/)
 * Copyright (c) 2013-2026 Lautaro Angelico, All Rights Reserved
 
 * Licensed under the MIT license
 * https://opensource.org/licenses/MIT
 
 =========================================================
 
*/
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    border-top: none !important;
}

a:focus, a:hover {
    color: inherit !important;
    text-decoration: none !important;
	outline: none !important;
}

.form-control {
	background: #fafafa;
	border: 1px solid #e3e3e3;
	color: #666;
}
.form-control:focus {
	border: 1px solid #ccc;
}

/* http://stackoverflow.com/questions/19562903/remove-padding-from-columns-in-bootstrap-3 */
.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

/* http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3 */
.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

.thumbnail {
    background-color: var(--webenginecolor27);
    border: 1px solid var(--webenginecolor16);
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
  border-color: var(--webenginecolor1);
}

.btn-primary {
    color: var(--webenginecolor9);
    background-color: var(--webenginecolor8);
	border-color: var(--webenginecolor10);
    transition: all .1s ease-in;
	border-radius: 3px;
}
.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
    color: var(--webenginecolor12) !important;
    background-color: var(--webenginecolor11) !important;
	border-color: var(--webenginecolor13) !important;
}

.form-horizontal .control-label {
	text-align: left !important;
}

/* MU FRESH ANIMATED BACKGROUND */
body {
    position: relative;
    isolation: isolate;
    background: #090b13 url('../img/mu-fresh-background.png')
        no-repeat center 110px !important;
    background-size: max(1040px, 100vw) auto !important;
}

#header {
    padding: 0;
    height: max(420px, 39vw);
}

#header > a {
    display: block;
    width: 100%;
    height: 100%;
}

.webengine-mu-logo {
    display: none !important;
}

body::before,
body::after {
    content: "";
    position: absolute;
    top: 110px;
    left: 0;
    width: 100%;
    height: max(585px, 56.25vw);
    pointer-events: none;
    z-index: -1;
}

body::before {
    background:
        radial-gradient(ellipse at 18% 42%,
            rgba(65, 170, 255, .22), transparent 42%),
        radial-gradient(ellipse at 82% 45%,
            rgba(255, 65, 10, .23), transparent 42%);
    animation: mu-fresh-glow 7s ease-in-out infinite alternate;
}

body::after {
    background-image:
        radial-gradient(circle, rgba(255, 158, 56, .9) 0 1px,
            transparent 2px),
        radial-gradient(circle, rgba(150, 220, 255, .85) 0 1px,
            transparent 2px),
        radial-gradient(circle, rgba(255, 215, 160, .7) 0 1px,
            transparent 2px);
    background-size: 191px 239px, 277px 313px, 389px 367px;
    background-repeat: repeat;
    -webkit-mask-image: linear-gradient(
        to right, #000, transparent 39%, transparent 61%, #000);
    mask-image: linear-gradient(
        to right, #000, transparent 39%, transparent 61%, #000);
    animation: mu-fresh-particles 24s linear infinite;
    opacity: .65;
}

@keyframes mu-fresh-glow {
    from { opacity: .35; }
    to   { opacity: .9; }
}

@keyframes mu-fresh-particles {
    from {
        background-position: 0 239px, 40px 313px, 80px 367px;
    }
    to {
        background-position: 0 0, 40px 0, 80px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after {
        animation: none;
    }
}
/* END MU FRESH ANIMATED BACKGROUND */
/* MU FRESH: visible animation */
body::before,
body::after {
    z-index: 0;
}

body::after {
    opacity: .95;
    background-image:
        radial-gradient(circle, #ffb347 0 2px,
            rgba(255, 100, 20, .5) 3px, transparent 5px),
        radial-gradient(circle, #d2f3ff 0 2px,
            rgba(80, 180, 255, .5) 3px, transparent 5px),
        radial-gradient(circle, #ffe0b0 0 1px,
            transparent 3px);
    animation-duration: 12s;
}

body > * {
    position: relative;
    z-index: 1;
}
/* MU FRESH: stronger fire and ice */
body::before {
    z-index: 0;
    background:
        radial-gradient(ellipse at 12% 45%,
            rgba(30, 160, 255, .55), transparent 38%),
        radial-gradient(ellipse at 88% 45%,
            rgba(255, 65, 5, .55), transparent 38%);
    mix-blend-mode: screen;
    animation: mu-fresh-energy 4s ease-in-out infinite alternate;
}

body::after {
    z-index: 0;
    opacity: 1;
    background-image:
        radial-gradient(ellipse,
            #fff4bb 0 1px, #ff9b25 2px,
            rgba(255, 60, 0, .45) 4px, transparent 7px),
        radial-gradient(circle,
            #ffffff 0 2px, #9be5ff 3px,
            rgba(40, 150, 255, .35) 5px, transparent 8px),
        radial-gradient(circle,
            #ffcf80 0 1px, transparent 4px);
    background-size: 137px 173px, 193px 227px, 263px 293px;
    -webkit-mask-image: linear-gradient(
        to right, #000 0%, #000 24%,
        transparent 43%, transparent 57%,
        #000 76%, #000 100%);
    mask-image: linear-gradient(
        to right, #000 0%, #000 24%,
        transparent 43%, transparent 57%,
        #000 76%, #000 100%);
    animation: mu-fresh-storm 7s linear infinite;
}

@keyframes mu-fresh-energy {
    from {
        opacity: .45;
        transform: translateY(0);
    }
    to {
        opacity: .95;
        transform: translateY(-12px);
    }
}

@keyframes mu-fresh-storm {
    from {
        background-position: 0 173px, 35px 0, 70px 293px;
    }
    to {
        background-position: 137px 0, -158px 227px, 333px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after {
        animation: none !important;
    }
}
/* MU FRESH: animated character layers */
body {
    background-image: url('../img/mu-fresh-scene.png') !important;
}

#header {
    position: relative;
}

#header::before,
#header::after {
    content: "";
    position: absolute;
    top: 14px;
    left: 50%;
    width: max(1040px, 100vw);
    height: max(585px, 56.25vw);
    background: url('../img/mu-fresh-characters.png')
        no-repeat center top;
    background-size: 100% auto;
    pointer-events: none;
    transform: translateX(-50%);
    transform-origin: center bottom;
    z-index: 0;
}

#header::before {
    clip-path: inset(0 58% 0 0);
    animation: mu-elf-breathe 5s ease-in-out infinite;
}

#header::after {
    clip-path: inset(0 0 0 65%);
    animation: mu-knight-breathe 6s ease-in-out infinite;
}

#header > a {
    position: relative;
    z-index: 1;
}

.header-info-container,
#container {
    position: relative;
    z-index: 2;
}

@keyframes mu-elf-breathe {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
        filter: drop-shadow(0 0 5px rgba(70, 175, 255, .35));
    }
    50% {
        transform: translateX(-50%) translateY(-7px) rotate(-.25deg);
        filter: drop-shadow(0 0 16px rgba(100, 210, 255, .7));
    }
}

@keyframes mu-knight-breathe {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
        filter: drop-shadow(0 0 5px rgba(255, 65, 5, .4));
    }
    50% {
        transform: translateX(-50%) translateY(-5px) rotate(.2deg);
        filter: drop-shadow(0 0 18px rgba(255, 90, 10, .8));
    }
}

@media (prefers-reduced-motion: reduce) {
    #header::before,
    #header::after {
        animation: none !important;
    }
}