@font-face {
    font-family: "button";
    src: url(https://www.nttgame.com/knight/assets/event/anniversary_16/buton.TTF);
}

@font-face {
    font-family: "content";
    src: url(https://www.nttgame.com/knight/assets/event/anniversary_16/content.ttf);
}

@font-face {
    font-family: "baslik";
    src: url(https://www.nttgame.com/knight/assets/event/anniversary_16/heading.ttf);
}

body {
    margin: 0 auto;
    background: url(https://www.nttgame.com/knight/assets/event/anniversary_16/images/bg2.jpg) no-repeat center 0;
    background-color: #000000;
}

.container {
    margin: 0 auto;
}

.wrap {
    margin: 0 auto;
    position: relative;
    width: 100%;
}

.go-btn {
    display: inline-block;
}

#event2 {
    background-color: #529394;
}

#event3 {
    background-color: #7675a0;
}

canvas {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

p,
li {

    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
}

p,
th,
td,
li {
    font-family: "content";
}

h1,
h2,
h3 {
    font-family: "baslik";
    font-weight: 200;
    color: #742020;
    text-transform: uppercase;
}

h1 {

    font-size: 3em;
}

h2 {
    font-size: 2em;
}

h3 {
    font-size: 1.5em;
}

p {
    font-size: 1.5em;
}

table {
    width: 100%;
    font-size: 0.7em;
}

th {
    color: #FBE2BC;
    background-color: #487A55;
}

td {
    color: #355237;
}

th,
td {
    font-size: 2em;
    text-align: center;
    border: 1px solid #F3EBDD;
    padding: 10px;
    -moz-box-shadow: inset 0 0 10px #000000;
    -webkit-box-shadow: inset 0 0 10px #000000;
    box-shadow: inset 0 0 10px #000000;
}

tr:nth-child(odd) {
    background-color: #F99F5F;
}

tr:nth-child(even) {
    background-color: #F7BE77;
}

.inline {
    display: inline-block;
}

.nav {
    padding-top: 25px;
}

.today {
    position: absolute;
    right: 0;
}



header {
    text-align: center;
    margin-top: 20px;
}

.tabs-res {
    list-style-type: none;
    padding: 30px 0 0 0;
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

.tabs-res li {
    display: inline-block;
    width: 33%;
}

.content {
    margin: 0 auto;
    width: 100%;
}

.button-icon {
    display: none;
    font-family: 'button';
    font-size: 1.2em;
    line-height: 20px;
}

.fa-home,
.fa-times-circle {
    font-size: 2em;
    display: block;
}

.button {
    text-transform: uppercase;
    width: 100%;
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 22px 5px;
    font-family: 'button';
    font-size: 1.0em;
    line-height: 26px;
    text-decoration: none;
    text-align: center;
    color: #FFF;
    background: #5e0d0c;
    outline: none;
    border-radius: 15px;
    border: 1px solid #4c0300;
    box-shadow:
        inset 1px 1px 0px rgba(255, 255, 255, 0.25),
        /* highlight */
        inset 0 0 6px #a23227,
        /* inner glow */
        inset 0 80px 80px -40px #ac3223,
        /* gradient */
        1px 1px 3px rgba(0, 0, 0, 0.75);
    /* shadow */

    position: relative;
    overflow: visible;
    /* IE9 & 10 */
    -webkit-transition: 500ms linear;
    -moz-transition: 500ms linear;
    -o-transition: 500ms linear;
    transition: 500ms linear;
}

.button::before {
    content: '';
    display: block;
    position: absolute;
    top: -7px;
    left: -3px;
    right: 0;
    height: 23px;

}

.button:hover {
    background: #a61715;
    box-shadow:
        inset 1px 1px 0px rgba(255, 255, 255, 0.25),
        /* highlight */
        inset 0 0 6px #da3b2c,
        /* inner glow */
        inset 0 80px 80px -40px #dd4330,
        /* gradient */
        1px 1px 3px rgba(0, 0, 0, 0.75);
    /* shadow */

}

.button:focus {
    outline: none;
    /*FF*/
}

.button:active {
    box-shadow:
        inset 1px 1px 0px rgba(255, 255, 255, 0.25),
        /* highlight */
        inset 0 0 6px #da3b2c,
        /* inner glow */
        inset 0 80px 80px -40px #dd4330,
        /* gradient */
        0px 1px 0px rgba(255, 255, 255, 0.25);
    /* shadow */

    -webkit-transition: 50ms linear;
    -moz-transition: 50ms linear;
    -o-transition: 50ms linear;
    transition: 50ms linear;
}

.buttongrn {
    width: 150px;
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 12px 23px;
    text-decoration: none;
    text-align: center;
    color: #FFF;
    background: #004812;
    outline: none;
    border-radius: 15px;
    border: 1px solid #004812;
    box-shadow:
        inset 1px 1px 0px rgba(255, 255, 255, 0.25),
        /* highlight */
        inset 0 0 6px #006B1A,
        /* inner glow */
        inset 0 80px 80px -40px #00B32C,
        /* gradient */
        1px 1px 3px rgba(0, 0, 0, 0.75);
    /* shadow */

    position: relative;
    overflow: visible;
    /* IE9 & 10 */
    -webkit-transition: 500ms linear;
    -moz-transition: 500ms linear;
    -o-transition: 500ms linear;
    transition: 500ms linear;
    text-transform: uppercase;
}

.buttongrn::before {
    content: '';
    display: block;
    position: absolute;
    top: -7px;
    left: -3px;
    right: 0;
    height: 23px;
}

.buttongrn:hover {
    background: #004D13;
    box-shadow:
        inset 1px 1px 0px rgba(255, 255, 255, 0.25),
        /* highlight */
        inset 0 0 6px #00FF3E,
        /* inner glow */
        inset 0 80px 80px -40px #00E638,
        /* gradient */
        1px 1px 3px rgba(0, 0, 0, 0.75);
    /* shadow */

}

.buttongrn:focus {
    outline: none;
    /*FF*/
}

.buttongrn:active {
    box-shadow:
        inset 1px 1px 0px rgba(255, 255, 255, 0.25),
        /* highlight */
        inset 0 0 6px #00E638,
        /* inner glow */
        inset 0 80px 80px -40px #00E638,
        /* gradient */
        0px 1px 0px rgba(255, 255, 255, 0.25);
    /* shadow */

    -webkit-transition: 50ms linear;
    -moz-transition: 50ms linear;
    -o-transition: 50ms linear;
    transition: 50ms linear;
}

.event::before {}

.event {
    background-color: #A68456;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    margin-top: 10px;
    padding: 50px 10px;
    border: 5px ridge #a38577;
    border-radius: 10px;
    -moz-box-shadow: inset 0 0 10px #000000;
    -webkit-box-shadow: inset 0 0 10px #000000;
    box-shadow: inset 0 0 10px #000000;
}

.note {
    font-family: 'Lobster', cursive;
    color: darkred;
    font-size: 1.1em;
}

.lightrope {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    margin: -65px 0 0 -34;
    padding: 0;
    pointer-events: none;
    width: 100%;
}

.lightrope li {
    position: relative;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    width: 12px;
    height: 28px;
    border-radius: 50%;
    margin: 20px;
    display: inline-block;
    background: #00f7a5;
    box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
    -webkit-animation-name: flash-1;
    animation-name: flash-1;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

.lightrope li:nth-child(2n+1) {
    background: cyan;
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.5);
    -webkit-animation-name: flash-2;
    animation-name: flash-2;
    -webkit-animation-duration: 0.4s;
    animation-duration: 0.4s;
}

.lightrope li:nth-child(4n+2) {
    background: #f70094;
    box-shadow: 0px 4.6666666667px 24px 3px #f70094;
    -webkit-animation-name: flash-3;
    animation-name: flash-3;
    -webkit-animation-duration: 1.1s;
    animation-duration: 1.1s;
}

.lightrope li:nth-child(odd) {
    -webkit-animation-duration: 1.8s;
    animation-duration: 1.8s;
}

.lightrope li:nth-child(3n+1) {
    -webkit-animation-duration: 1.4s;
    animation-duration: 1.4s;
}

.lightrope li:before {
    content: "";
    position: absolute;
    background: #222;
    width: 10px;
    height: 9.3333333333px;
    border-radius: 3px;
    top: -4.6666666667px;
    left: 1px;
}

.lightrope li:after {
    content: "";
    top: -14px;
    left: 9px;
    position: absolute;
    width: 52px;
    height: 18.6666666667px;
    border-bottom: solid #222 2px;
    border-radius: 50%;
}

.lightrope li:last-child:after {
    content: none;
}

.lightrope li:first-child {
    margin-left: -40px;
}

.pelerin {
    display: inline-block;
    width: 49%;
    text-align: center;
}

.soul {
    width: 100%;
}

.npoints {
    font-size: 1.5em;
}

.snowman {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 0 5px #000000;
    border: 2px ridge #a38577;
}

.snowman2 {
    width: 50%;
    border-radius: 10px;
    box-shadow: 0 0 5px #000000;
    border: 2px ridge #a38577;
}

.footer {
    text-align: center;
}

.footer-text {
    color: #742020;
    font-size: 1em;
}

.footer-logo {
    padding-bottom: 20px;
}

@-webkit-keyframes flash-1 {

    0%,
    100% {
        background: #00f7a5;
        box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
    }

    50% {
        background: rgba(0, 247, 165, 0.4);
        box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
    }
}

@keyframes flash-1 {

    0%,
    100% {
        background: #00f7a5;
        box-shadow: 0px 4.6666666667px 24px 3px #00f7a5;
    }

    50% {
        background: rgba(0, 247, 165, 0.4);
        box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
    }
}

@-webkit-keyframes flash-2 {

    0%,
    100% {
        background: cyan;
        box-shadow: 0px 4.6666666667px 24px 3px cyan;
    }

    50% {
        background: rgba(0, 255, 255, 0.4);
        box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2);
    }
}

@keyframes flash-2 {

    0%,
    100% {
        background: cyan;
        box-shadow: 0px 4.6666666667px 24px 3px cyan;
    }

    50% {
        background: rgba(0, 255, 255, 0.4);
        box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2);
    }
}

@-webkit-keyframes flash-3 {

    0%,
    100% {
        background: #f70094;
        box-shadow: 0px 4.6666666667px 24px 3px #f70094;
    }

    50% {
        background: rgba(247, 0, 148, 0.4);
        box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 0.2);
    }
}

@keyframes flash-3 {

    0%,
    100% {
        background: #f70094;
        box-shadow: 0px 4.6666666667px 24px 3px #f70094;
    }

    50% {
        background: rgba(247, 0, 148, 0.4);
        box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 0.2);
    }
}


@media only screen and (min-width: 200px) and (max-width: 399px) {
    
    .npoints {
        font-size: 1em;
    }
    
    h1 {
        font-size: 1.5em;
    }
    
    h2 {
        font-size: 1em;
    }
    
    .button {
        font-size: 0.6em;
        padding: 10px 10px;
        line-height: 16px;
    }
    
    .tabs-res li {
        width: 32%;
    }
    
    .buttongrn {
        width: 70px;
        font-size: 0.7em;
    } 
    
    th,
    td {
        font-size: 0.7em;
        padding: 3px;
    }
    
    .pelerin-img {
        height: 140px;
    }
    
    .lightrope {
        margin: -65px 0 0 -12px;
    }
}

@media only screen and (min-width: 400px) and (max-width: 459px) {
    .button {
        font-size: 0.8em;
        padding: 10px 10px;
        line-height: 16px;
    }
    
    .tabs-res li {
        width: 32%;
    }
    
    .buttongrn {
        width: 100px;
    } 
    
    th,
    td {
        font-size: 0.8em;
        padding: 5px;
    }
    
    .pelerin-img {
        height: 160px;
    }
    
    .lightrope {
        margin: -65px 0 0 -12px;
    }
}

@media only screen and (min-width: 460px) and (max-width: 619px) {
    .button {
        font-size: 1em;
        padding: 15px 39px;
        line-height: 26px;
    }
    
    .tabs-res li {
        width: 32%;
    }
    
    th,
    td {
        font-size: 1.1em;
    }
    
     .pelerin-img {
        height: 200px;
    }
    
    .lightrope {
        margin: -65px 0 0 -12px;
    }
    
    .buttongrn {
        width: 100px;
    }
    
}


@media only screen and (min-width: 620px) and (max-width: 922px) {
    
    .button {
        font-size: 1.2em;
        padding: 15px 55px;
        line-height: 26px;
    }
    
    .tabs-res li {
        width: 32%;
    }
    
    .buttongrn {
        width: 100px;
    } 
    
    .pelerin-img {
        height: 200px;
    }
    
    th,
    td {
        font-size: 1.5em;
    }
    
    .lightrope {
        margin: -65px 0 0 -12px;
    }
}
    

/* For tablets: */
@media only screen and (min-width: 923px) and (max-width: 1023px) {
    .buttongrn {
        width: 100px;
    } 
    
    .button {
        font-size: 1.2em;
        padding: 18px 50px;
        line-height: 36px;
    }
    
    .tabs-res li {
        width: 32%;
    }
    
    th,
    td {
        font-size: 1.5em;
    }
    
    .lightrope {
        margin: -65px 0 0 -12px;
    }
}


@media only screen and (min-width: 1024px) {

    p {
        font-size: 1.5em;
    }

    .button {
        font-size: 1.7em;
        padding: 22px 0px;

    }

    th,
    td {
        font-size: 1.5em;
    }

    .event {
        width: 1024px;
        padding: 10px 33px;
    }

    .content {
        width: 1024px;
    }

    body {
        min-width: 1024px;
        max-width: 2560px;
        background: url(bg7.jpg) no-repeat center 0;
        background-color: #000000;
    }

    .wrap {
        width: 1024px;
    }

    .tabs-res {
        width: 1024px;
        padding: 100px 0 0 0;
    }

    .button-icon {
        display: inline-block;
        font-family: "button";
        font-size: 1.1em;
        line-height: 0px;
    }

    .fa-home,
    .fa-times-circle {
        font-size: 1.5em;
        display: none !important;
    }

    .pelerin-wrap {}

    .pelerin {
        display: inline-block;
        text-align: center;
    }

    .pelerin-img {
        height: 250px;
    }

    .buttongrn {
        padding: 2px 20px;
        width: 165px;
        font-weight: 900;
    }

    .go-btn {
        display: inline-block;
    }

    .button {
        width: 338px;
        padding: 15px 5px;
        line-height: 38px;
    }

}