/*
* {
    color: #e1e1e1;
}
*/

body {
    margin: 0;
    width: 100vw;
    min-width: 100vw;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: 'Open Sans','Segoe UI', 'Helvetica Neue', Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;
    background-color: #151618 !important;
    color: #e1e1e1;
    overflow-x: hidden;
}

::selection {
    background: #dc5e38; /* WebKit/Blink Browsers */
}

::-moz-selection {
    background: #dc5e38; /* Gecko Browsers */
}


html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: 'Open Sans','Segoe UI', 'Helvetica Neue', Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;
    background-image: url("https://pstale.io/pristontale/cdn-websites/download/img/background-chars.jpg");
}

.yellow-text
{
    color: #ffa216 !important;
}

.error-msg
{
    padding: 10px;
}

.form_input2
{
    width: 300px !important;
    margin: 0 auto !important;
    text-align: left !important;
    padding-bottom: 15px;
}

.radio
{
    width: 100px !important;
    margin: 0 auto !important;
}

.radio-button
{
    text-align: left !important;
}

.radio-button i
{
    position: relative !important;
    left: 3px !important;
    margin-right: 5px !important;
    text-align: center !important;
}

.radio-info
{
    font-family: 'Open Sans','Segoe UI', 'Helvetica Neue', Helvetica, Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;
    font-size: 0.8rem !important;
    color: #2ecc71 !important;
}

.response
{
    min-width: 450px;
    padding: 10px;
    border-radius: 3px;
    text-align: center;
    font-size: 0.9rem;
}
.select-input
{
    width: 350px;
    margin: 0 auto;
    background: black;
    border: none;
    padding: 5px;
    border-radius: 5px;
    color: #EEE;
}

.select-input option
{
    font-size: 0.9rem;
}

.textarea-input
{
    width: 350px;
    height: 200px;
    margin: 0 auto;
    background: black;
    border: none;
    padding: 5px;
    border-radius: 5px;
    color: #EEE;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.form_input2
{

}

.form_container
{
    margin: 15px 0 !important;
}

/* Colors */

.bg-red {
    background-color: #c0392b;
}

.bg-green {
    background-color: #5ca21f;
}

.green-text
{
    color: #5ca21f;
}

.red-text
{
    color: #c0392b;
}


.fade-in {
    -webkit-animation: fade-in .5s cubic-bezier(.39, .575, .565, 1.000) both;
    animation: fade-in .5s cubic-bezier(.39, .575, .565, 1.000) both
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes fade-in {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

.fade-in-right {
    -webkit-animation: fade-in-right .8s cubic-bezier(.39, .575, .565, 1.000) both;
    animation: fade-in-right .8s cubic-bezier(.39, .575, .565, 1.000) both
}

@-webkit-keyframes fade-in-right {
    0% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes fade-in-right {
    0% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

.fade-in-left {
    -webkit-animation: fade-in-left .8s cubic-bezier(.39, .575, .565, 1.000) both;
    animation: fade-in-left .8s cubic-bezier(.39, .575, .565, 1.000) both
}

@-webkit-keyframes fade-in-left {
    0% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes fade-in-left {
    0% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
        opacity: 0
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

.separator {
    background-image: url("https://pstale.io/pristontale/cdn-websites/download/img/separator2.png");
    width: 100%;
    height: 26px;
    position: relative;
    left: 0px;
    top: -5px;
    background-size: 512px 26px;
    flex: 1 1 auto;
    background-repeat: repeat-x;
    z-index: 7;
}

.knight-footer {
    position: absolute;
    z-index: 8;
    height: 450px;
    top: -200px;
    right: 2px;
    pointer-events: none;
    filter: drop-shadow(0 0 0.75rem black);
}

.priestess-footer {
    position: absolute;
    z-index: 8;
    height: 450px;
    top: -200px;
    left: 2px;
    pointer-events: none;
    filter: drop-shadow(0 0 0.75rem black);
}


@media only screen and (max-width: 1050px) {
    .knight-footer {
        display: none;
    }
    .priestess-footer {
        display: none;
    }
}

.pagination
{
    clear: both !important;
    padding: 0 !important;
}

.pagination li
{
	display:inline;
}

.pagination a
{
    color: #EEE !important;
    font-size: 0.8rem !important;
    font-weight: bold;
    height: 25px !important;
    padding: 4px 8px;
    text-decoration: none;
    margin: 0px 2px 0px 2px !important;
}

.pagination a:hover, .pagination a:active
{
    background: #ff9800;
    text-decoration: none;
}

.pagination span.current
{
    background-color: #ff9800;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: bold;
    height: 25px;
    padding: 4px 8px;
    text-decoration: none;
    margin: 2px;
}

.pagination span.disabled
{
    color: #AAA;
    font-size: 0.8rem;
    margin: 2px;
    padding: 2px 5px;
}

.discount-status
{
    width: 430px;
    margin: 0 auto;
}

.confetti-container {
    position: fixed;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    pointer-events: none;
}
.confetti {
    width: 15px;
    height: 15px;
    background-color: #f2d74e;
    position: absolute;
    left: 50%;
    animation: confetti 5s ease-in-out -2s infinite;
    transform-origin: left top;
}
.confetti:nth-child(1) {
    background-color: #fffffc; left: 10%; animation-delay: 0;
}
.confetti:nth-child(2) {
    background-color: #95c3de; left: 20%; animation-delay: -5s;
}
.confetti:nth-child(3) {
    background-color: #ff9a91; left: 30%; animation-delay: -3s;
}
.confetti:nth-child(4) {
    background-color: #f2d74e; left: 40%; animation-delay: -2.5s;
}
.confetti:nth-child(5) {
    background-color: #95c3de; left: 50%; animation-delay: -4s;
}
.confetti:nth-child(6) {
    background-color: #98ff91; left: 60%; animation-delay: -6s;
}
.confetti:nth-child(7) {
    background-color: #f2d74e; left: 70%; animation-delay: -1.5s;
}
.confetti:nth-child(8) {
    background-color: #95c3de; left: 80%; animation-delay: -2s;
}
.confetti:nth-child(9) {
    background-color: #ff9a91; left: 90%; animation-delay: -3.5s;
}
.confetti:nth-child(10) {
    background-color: #f2d74e; left: 100%; animation-delay: -2.5s;
}
.confetti:nth-child(11) {
    background-color: #fffffc; left: 15%; animation-delay: -1s;
}
.confetti:nth-child(12) {
    background-color: #95c3de; left: 25%; animation-delay: -5.5s;
}
.confetti:nth-child(13) {
    background-color: #ff9a91; left: 35%; animation-delay: -4s;
}
.confetti:nth-child(14) {
    background-color: #f2d74e; left: 45%; animation-delay: -4.5s;
}
.confetti:nth-child(15) {
    background-color: #95c3de; left: 55%; animation-delay: -1.2s;
}
.confetti:nth-child(16) {
    background-color: #98ff91; left: 65%; animation-delay: -6.7s;
}
.confetti:nth-child(17) {
    background-color: #f2d74e; left: 75%; animation-delay: -0.8s;
}
.confetti:nth-child(18) {
    background-color: #95c3de; left: 85%; animation-delay: -2.9s;
}
.confetti:nth-child(19) {
    background-color: #ff9a91; left: 95%; animation-delay: -2.5s;
}
.confetti:nth-child(20) {
    background-color: #f2d74e; left: 105%; animation-delay: -5.5s;
}

@keyframes confetti {
    0% { transform: rotateZ(15deg) rotateY(0deg) translate(0,0); }
    25% { transform: rotateZ(5deg) rotateY(360deg) translate(-5vw,20vh); }
    50% { transform: rotateZ(15deg) rotateY(720deg) translate(5vw,60vh); }
    75% { transform: rotateZ(5deg) rotateY(1080deg) translate(-10vw,80vh); }
    100% { transform: rotateZ(15deg) rotateY(1440deg) translate(10vw,110vh); }
}