/*
 * Global
 */

:root {
    --color-blue: #002F40;
    --color-light-blue4: #5A99B0;
    --color-classvoting:#7E0022;
}

.z-100{
    z-index: 100;
}

.bg-yellow {
    background-color: var(--color-yellow);
}

.bg-classvoting{
    background-color: var(--color-classvoting);
}

.border-dark-blue {
    border-color: var(--color-dark-blue);
}

.border-light-blue2 {
    border-color: var(--color-light-blue2);
}

.border-light-blue4 {
    border-color: var(--color-light-blue4);
}

.border-gold {
    border-color: var(--color-gold-mid);
}

.gap-1 {
    gap: .25rem;
}

.gap-8 {
    gap: 2rem;
}

.gap-12 {
    gap: 3rem;
}

.gap-16 {
    gap: 4rem;
}

.gap-24 {
    gap: 6rem;
}

.py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.px-16 {
    padding-left: 4rem;
    padding-right: 4rem;
}

.px-24 {
    padding-left: 6rem;
    padding-right: 6rem;
}

.rounded-br-xl {
    border-bottom-right-radius: 1.5rem;
}

.right-4 {
    right: 1rem;
}

.translate-x-1\/2 {
    --tw-translate-x: 50%;
}

.translate-y-1\/2 {
    --tw-translate-y: 50%;
}

.position-center {
    left: 50%;
    top: 50%;
    --tw-translate-x: -50%;
    --tw-translate-y: -50%;
}

.shadow-spread-lg {
    box-shadow: 0 0 24px rgba(0, 0, 0, .35);
}

.btn {
    display: inline-flex;
    justify-content: center;
}

.btn-link {
    color: var(--color-yellow);
    text-decoration: underline !important;
}

.btn-circle, .btn-circle:hover {
    border-radius: 999px;
    aspect-ratio: 1/1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.btn-lg {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.btn-xl {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.-mb-2{
    margin-bottom: -0.5rem !important;
}
.-mb-3{
    margin-bottom: -0.75rem !important;
}
.-mb-4{
    margin-bottom: -1rem !important;
}

.bottom-4{
    bottom: 1rem;
}

.mb-12{
    margin-bottom: 48px;
}

/*
 * Scoped
 */

 .page h2 {
	line-height: 1.1;
}

 .cv-dot{
    border-radius: 32px;
    border: 2px solid var(--blue_light, #5A99B0);
    background: var(--cta-gradient_blue, linear-gradient(180deg, #115777 0.14%, #002F40 99.86%));

    /* image / shadow */
    box-shadow: 0px 2px 4px 0px rgba(7, 23, 33, 0.30);
    color: var(--blue_light, #5A99B0);

 }

 .cv-dot-active{
    border-radius: 32px;
    border: 2px solid #EFBB49;
    background: var(--cta-gradient, linear-gradient(180deg, #FDD504 0.14%, #F90 99.86%));
    
    /* image / shadow */
    box-shadow: 0px 2px 4px 0px rgba(7, 23, 33, 0.30);
    color: var(--blue_dark, #002F40);

 }

 .ua-safari .cv-dot span, .ua-desktop-macintosh.ua-chrome .cv-dot span {
	height: 24px;
	line-height: 26px;
}
 .cv-editchar{
    aspect-ratio: 1.333;
 }

 .cv-teaser #card-content{
    background: #9A1464;
    background: linear-gradient(180deg, #9A1464 0.14%, #7E0022 99.86%);
 }

 .cv-teaser .card-subtitle {
	background: linear-gradient(270deg, rgba(126, 0, 34, 0.00) -0.16%, rgba(169, 75, 106, 0.75) 19.66%, rgba(169, 75, 106, 0.75) 79.97%, rgba(126, 0, 34, 0.00) 100%, rgba(126, 0, 34, 0.00) 100%);
    color: #fff !important;
}

.cv-teaser .text-dark-brown {
	color: #fff !important;
	text-shadow: none !important;
}

.cv-teaser span.orange.orange {
	color: var(--color-gold-mid) !important;
	text-shadow: none !important;
}

.class-voting .btn-primary {
    text-transform: uppercase;
}

.class-voting .btn-primary.cv-btn-edit{
    border-radius: 4px !important;
    font-size: 16px;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.class-voting .bg-blue-gradient:nth-child(2n) {
	background: #0E6483;
	background: linear-gradient(180deg, #004057 0%, #066F95 100.0%);
}

.class-voting .h1 {
	font-size: 1.5rem;
	line-height: 1.1;
	font-family: 'TobiBlack';
	font-weight: normal !important;
	color: var(--color-yellow);
}

.class-voting h2 {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 0;
}

.class-voting h2 span {
	display: block;
	max-width: 20em;
}

.class-voting .-page {
}

/* Mobile */
@media (max-width: 767px) {
    h2 span, .class-voting h2 span {
        max-width: 9em;
        line-height: 1.1;
    }
    .class-voting .-page {
        display: flex;
        flex-direction: column-reverse;
        gap: 1rem;
    }

    .class-voting .-page .-page-copy {
        padding: .5rem 1rem 1rem;
        position: relative;
    }

    .class-voting .-page .-page-copy:before {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        content: '';
        display: block;
        opacity: 50%;
        z-index: -1;

        background: linear-gradient(to bottom, transparent, #146280) padding-box,
            linear-gradient(to top, var(--color-light-blue), transparent) border-box;
        border: 2px solid transparent;
        border-radius: .75rem;
    }

    .class-voting .-page .-check {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

/* Tablet / desktop */
@media (min-width: 768px) {
    .class-voting .-page {
        box-shadow: 0 0 32px rgba(0, 0, 0, .5);
        border: 2px solid var(--color-dark-blue);
        border-radius: .75rem;
        background: linear-gradient(90deg, rgba(20, 98, 128, 0.25) 0%, rgba(20, 98, 128, 0.50) 51.5%, rgba(20, 98, 128, 0.25) 100%);
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6rem;
        padding: 4rem 6rem;
    }

    .class-voting .-page .-page-image {
        position: absolute;
        height: 100%;
        object-fit: cover;
        box-shadow: 0px 2px 48px 0px #071721, 0px 2px 4px 0px rgba(7, 23, 33, 0.3);;
    }

    .class-voting .-start.-page,.class-voting .-final.-page {
        grid-template-columns: 1.3fr 2fr;
         gap: 3rem;
    }

    .class-voting .-start.-page .-page-image,.class-voting .-final.-page .-page-image {
        height: auto;
       
        box-shadow: 0px 2px 48px 0px #071721, 0px 2px 4px 0px rgba(7, 23, 33, 0.3);;
    }
}

.class-voting .divider-left,
.class-voting .divider-right {
    flex: 1;
    height: 2px;
}

.class-voting .divider-left {
    background-image: linear-gradient(to left, var(--color-light-blue), transparent);
    margin-right: .5rem;
}

.class-voting .divider-right {
    background-image: linear-gradient(to right, var(--color-light-blue), transparent);
    margin-left: .5rem;
}

/* Mobile */
@media (max-width: 767px) {
    .class-voting .-check {
        width: 120px;
    }
}

/*
 * Main
 */

/* Mobile */
@media (max-width: 767px) {
    .class-voting .-main {
        margin-top: 2rem !important;
        padding: 1rem 1rem 1rem;
        border: 1px solid var(--color-light-blue2);
        border-radius: .75rem;
        background:linear-gradient(90deg, rgba(20, 98, 128, 0.25) 0%, rgba(20, 98, 128, 0.50) 50%, rgba(20, 98, 128, 0.25) 100%);
    }
}

/*
 * Progress
 */

.class-voting .-progress {
    margin-bottom: 3rem;
}

.class-voting .-progress-bullet {
    width: 2rem;
    aspect-ratio: 1/1;
    border-radius: 999px;
    border: 2px solid var(--color-light-blue);
    background-color: #004057FF;
    color: var(--color-light-blue);
    font-size: 0.875rem;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.class-voting .-progress-bullet.active {
    border-color: var(--color-gold-mid);
    background: var(--color-orange);
    background: linear-gradient(179.84deg, #FDD504 0%, #FF9900 100%);
    color: var(--color-dark-blue);
}

.class-voting .-progress-bullet span {
    margin-bottom: -.15em;
}

.class-voting .-progress-bullet svg {
    width: 1.125em;
}


.cv-textshadow{
    text-shadow:  0px 4px 12px rgb(0, 0, 0), 0px 4px 12px rgba(0, 0, 0, 1)
}

.cv-vs{
    color: #9BCEE0;
}



/* Mobile */
@media (max-width: 767px) {

    .cv-editchar {
        aspect-ratio: inherit;
        min-height: 220px;
    }
   
    .class-voting .-progress-bullets {
        background: url('../images/progress_bg.jpg') repeat-x;
        background-size: contain;
        height: 48px;
    }

    .class-voting .-progress:before,
    .class-voting .-progress:after {
        content: '';
        display: block;
        aspect-ratio: 61/96;
        height: 48px;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .class-voting .-progress:before {
        background-image: url('../images/progress_bg_left.png');
    }

    .class-voting .-progress:after {
        background-image: url('../images/progress_bg_right.png');
    }
}

/*
 * Characters
 */

.class-voting .-chars {
     filter: drop-shadow(0px 2px 48px #071721); 
     /* box-shadow:  0px 2px 48px 0px #071721;  */
}

.class-voting .-chars-main {
    aspect-ratio: 1024/450;
}

.class-voting .-chars .-char {
    opacity: 0;
    visibility: hidden;
}

.class-voting .-chars .-char-copy {
    background: linear-gradient(180deg, rgba(2, 55, 0, 0.64) 0%, rgba(2, 55, 0, 0.00) 50%, rgba(2, 55, 0, 0.64) 100%);


    width: 35%;
    left: 25%;
    transition: opacity .5s;
}

.class-voting .-chars .-char-copy.copy-ninja,
.class-voting .-chars .-char-copy.copy-trickster,
.class-voting .-chars .-char-copy.copy-cleric
{
    background: linear-gradient(180deg, rgba(0, 46, 86, 0.64) 0%, rgba(0, 46, 86, 0.00) 50%, rgba(0, 46, 86, 0.64) 100%);
}

.class-voting .-chars .-char-copy.copy-beastmaster,
.class-voting .-chars .-char-copy.copy-bomber,
.class-voting .-chars .-char-copy.copy-bloodmage
{
    background: linear-gradient(180deg, rgba(47, 0, 0, 0.64) 0%, rgba(47, 0, 0, 0.00) 50%, rgba(47, 0, 0, 0.64) 100%);
}

.class-voting .-chars .-char-description-copy {
    background: linear-gradient(180deg, rgba(2, 55, 0, 0.64) 0%, rgba(2, 55, 0, 0.00) 50%, rgba(2, 55, 0, 0.64) 100%);
    max-height: 90%;
    transition: opacity .5s;
    scrollbar-color: var(--color-yellow) rgba(255,255,255,0.1);
    scrollbar-width: thin;
}



.class-voting .-chars .-char-description-copy.copy-ninja,
.class-voting .-chars .-char-description-copy.copy-trickster,
.class-voting .-chars .-char-description-copy.copy-cleric
{
    background: linear-gradient(180deg, rgba(0, 46, 86, 0.64) 0%, rgba(0, 46, 86, 0.00) 50%, rgba(0, 46, 86, 0.64) 100%);
}

.class-voting .-chars .-char-description-copy.copy-beastmaster,
.class-voting .-chars .-char-description-copy.copy-bomber,
.class-voting .-chars .-char-description-copy.copy-bloodmage
{
    background: linear-gradient(180deg, rgba(47, 0, 0, 0.64) 0%, rgba(47, 0, 0, 0.00) 50%, rgba(47, 0, 0, 0.64) 100%);
}

.class-voting .-chars .-char-image {
    --tw-blur: 4px;
    --tw-scale-x: 0.8;
    --tw-scale-y: 0.8;
    filter: blur(var(--tw-blur)) brightness(var(--tw-brightness));
    transition: filter .75s, transform .75s;
}

.class-voting .-chars .-char-bg {
    filter: brightness(var(--tw-brightness));
    transition: filter .5s;
}

.class-voting .-chars .-check {
    opacity: 0;
    visibility: hidden;
    --tw-scale-x: .5;
    --tw-scale-y: .5;
    --tw-rotate: -90deg;
    transition: all .3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.class-voting .-char-description .text-xs {
    line-height: 1.2 !important;
    display: block;
}


.-char-description p{
    margin-bottom: 0.5em;
}

/* Mobile */
@media (max-width: 767px) {
    .class-voting .-chars-main {
        aspect-ratio: 1.777;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .class-voting .-chars .-char-image {
        height: 150%;
        left: 50%;
    }
    .class-voting .-chars .-char-image.image-pestdoktor {
        height: 150%;
        top: 52%;
    }
    .class-voting .-chars .-char-image.image-monk{
        height: 150%;
        top: 41%;
    }
    .class-voting .-chars video.-char-image.image-monk {
        height: 136%;
        top: 50%;
    }
    .class-voting .-chars .-char-image.image-ninja {
        top: 45%;
    }
    .class-voting .-chars .-char-image.image-beastmaster {
        top: 45%;
    }
    .class-voting .-chars .-char-image.image-trickster {
        height: 149%;
        top: 49%;
    }
    .class-voting .-chars .-char-image.image-bomber {
        height: 160%;
    }
    .class-voting .-chars .-char-image.image-cleric {
        height: 174%;
    }
    .class-voting .-chars video.-char-image.image-cleric {
        height: 162%;
    }
    .class-voting .-chars .-char-image.image-bloodmage {
        height: 136%;
    }
    .class-voting .-chars video.-char-image.image-bloodmage {
        height: 154%;
        top: 53%;
    }
}

@supports (-webkit-touch-callout: none) {
    .class-voting .-chars .-char-image {
      will-change: transform;
      backface-visibility: hidden;
      aspect-ratio: 1;
    }
  }

/* Tablet / desktop */
@media (min-width: 768px) {
    .class-voting .-chars {
        margin-bottom: 4rem;
    }

    .class-voting .-chars .-char-image {
        height: 120%;
        left: 72.5%;
    }

    .class-voting .-chars .-char-image.image-beastmaster {
        height: 123%;
        left: 74.5%;
        top: 45%;
    }

    .class-voting .-chars .-char-image.image-pestdoktor {
        height: 127%;
    }

    .class-voting .-chars .-char-image.image-monk {
        height: 140%;
        top: 43%;
    }
    .class-voting .-chars video.-char-image.image-monk {
        height: 124%;
        top: 52%;
    }
    .class-voting .-chars video.-char-image.image-bloodmage {
	height: 140%;
	top: 53%;
}
    .class-voting .-chars .-char-image.image-ninja {
        height: 122%;
    }
    .class-voting .-chars .-char-image.image-trickster {
        height: 123%;
        top: 49%;
    }
    .class-voting .-chars .-char-image.image-bomber {
        height: 130%;
        left: 76%;
    }
    .class-voting .-chars .-char-image.image-cleric {
        height: 148%;
        left: 72%;
    }
    .class-voting .-chars video.-char-image.image-cleric {
        height: 144%;
        left: 72%;
    }


}

/*
 * Active character
 */

.class-voting .-chars .-char.active {
    opacity: 1;
    visibility: visible;
}

.class-voting .-chars .-char.active .-char-image {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-blur: 0px;
}

/*
 * Voted character
 */

.class-voting .-chars .-char.voted .-char-image {
    --tw-brightness: .5;
    transition: opacity .5s;
}

.class-voting .-chars .-char.voted .-char-bg {
    --tw-brightness: .5;
}

.class-voting .-chars .-char.voted .-check {
    opacity: 1;
    visibility: visible;
    --tw-rotate: 0deg;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
}

/*
 * Leaving character
 */

.class-voting .-chars .-char.leaving .-char-copy,
.class-voting .-chars .-char.leaving .-char-image {
    opacity: 0;
}

.class-voting .-chars .-char.leaving .-char-bg,
.class-voting .-chars .-char.leaving .-char-image {
    --tw-brightness: 1;
}

.class-voting .-chars .-char.leaving .-check {
    opacity: 0;
    visibility: hidden;
    --tw-scale-x: .5;
    --tw-scale-y: .5;
    --tw-rotate: -90deg;
}

/*
 * Character nav
 */

.class-voting .-nav {
    position: absolute;
    top: 50%;
    transform: translate(var(--translate-x), -50%);
    aspect-ratio: 1/1;
    border-radius: 999px;
}

.class-voting .-nav .-arrow {

}

.class-voting .-nav-prev {
    left: 0;
}

.class-voting .-nav-next {
    right: 0;
}

.class-voting .-nav-next .-arrow {
    transform: scaleX(-1);
}

/* Mobile */
@media (max-width: 767px) {
    .class-voting .-nav {
        padding: .5rem;
    }

    .class-voting .-nav .-arrow {
        font-size: 1.25rem;
    }

    .class-voting .-nav-prev {
        --translate-x: -.5rem;
    }

    .class-voting .-nav-next {
        --translate-x: .5rem;
    }
}

/* Tablet / desktop */
@media (min-width: 768px) {
    .class-voting .-nav {
        padding: .75rem;
    }

    .class-voting .-nav .-arrow {
        font-size: 2rem;
    }

    .class-voting .-nav-prev {
        --translate-x: -50%;
    }

    .class-voting .-nav-next {
        --translate-x: 50%;
    }
}

/*
 * Voting form / vs
 */

.class-voting .-voting-form {
    padding-top: 3rem;
    box-shadow: 0px 4px 54px 0px rgba(0, 0, 0, 0.5);
}

.class-voting .-char-thumb {
    background-image: linear-gradient(to top, var(--color-light-blue2) 62%, var(--color-light-blue));
    border-color: var(--color-light-blue);
    cursor: pointer;
}

.class-voting .-char-thumb img {
    aspect-ratio: 1/1;
}

.class-voting .-char-thumb.active,
.class-voting .-char-thumb:hover {
    background-image: linear-gradient(to top, var(--color-yellow) 62%, #FFF397);
    border-color: var(--color-yellow);
}

/* Mobile */
@media (max-width: 767px) {
    .class-voting .-voting-form {
        position: relative;
        margin-top: 5rem;
    }

    .class-voting .-voting-form:before {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        content: '';
        display: block;
        opacity: 50%;
        z-index: -1;

        background: linear-gradient(to bottom, transparent, #146280) padding-box,
        linear-gradient(to top, var(--color-light-blue), transparent) border-box;
        border: 2px solid transparent;
        border-radius: .75rem;
        box-shadow: 0 10px 15px rgb(0 0 0 / 0.5);
    }
}

/* Tablet / desktop */
@media (min-width: 768px) {
    .class-voting .-voting-form {
        width: 344px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 50%);
        background: linear-gradient(to bottom, #002F40, #146280) padding-box,
        linear-gradient(to top, #002F40, #146280) border-box;
        border: 2px solid transparent;
    }
}

/*
 * Submit
 */

 .class-voting .-submit .-char-image {
	height: 130%;
	left: 50%;
}
.class-voting .-submit .-char-image.image-monk{
    height: 140%;
    left: 50%;
    top: 40%;
  }
.class-voting .-submit .-char-image.image-trickster{
  height: 152%;
  left: 50%;
  top: 40%;
}

/*
 * Final
 */

@keyframes check {
    from {
        opacity: 0;
        transform: rotate(-90deg) scale(.25);
    }
    to {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

.class-voting .-final .-check img {
    animation: check .5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Mobile */
@media (max-width: 767px) {
    .class-voting .-final {
       /*  padding-top: 1rem; */
    }
}


#cvDefaultModal p, .-char-description-copy p {
	margin: 0.55em 0;
}


@media (max-width: 359px) {
    .class-voting .-char-thumb img{
        max-width: 3rem;
    }
}