* {
    outline: none;
}

html {
    width: 100%;
    height: 100%;
    font-size: 100%;
    background: #fff;
}

body {
    height: 100%;
    margin: 0;
    background: transparent;
    /*font-family: 'Nunito', sans-serif;*/
    width: 100%;
}

button {
    /*font-family: 'Nunito', sans-serif;*/
}

button:focus {
    outline: 0;
}

h1, h2, h3, h4, p {
    margin: 0;
}

/* HOME-PAGE */

.home {
    background-image: url('img/bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    padding-bottom: 80px;
}

.home .logo {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin: 70px auto;
}

.home .christmas-tree {
    height: 826px;
    width: 562px;
    background-image: url('img/christmas-tree-nostar.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin: auto;
    display: block;
    flex-direction: column;

}

.home .christmas-tree .row-star,
.home .christmas-tree .row01-box,
.home .christmas-tree .row02-box,
.home .christmas-tree .row03-box,
.home .christmas-tree .row04-box {
    margin: 0 auto;
    display: block;
}

.home .christmas-tree .row-star {
    left: 10px;
    position: relative;
}

.home .christmas-tree .row01 {
    /*width: 50%;*/
    position: relative;
    top: 2%;
}

.home .christmas-tree .row02 {
    /*width: 60%;*/
    position: relative;
    top: 10%;
}

.home .christmas-tree .row03 {
    /*width: 80%;*/
    position: relative;
    top: 17%;
}

.home .christmas-tree .row04 {
    /*width: 60%;*/
    position: relative;
    top: 22%;
}

.home .christmas-tree .row-star button {
    height: 188px;
    width: 127px;
    background-image: url('img/star.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    border: none;
    background-color: transparent;
    cursor: pointer;
    padding: 0;
    display: block;
    margin: 0 auto;
}

.home .christmas-tree button {
    height: 75px;
    width: 75px;
    background-image: url('img/number01.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    border: none;
    background-color: transparent;
    cursor: pointer;
    padding: 0;
    margin: 0 15px;
    /*display: block;*/
}

.home .christmas-tree .number01 {
    background-image: url('img/number01.png');
}

.home .christmas-tree .number02 {
    background-image: url('img/number02.png');
}

.home .christmas-tree .number03 {
    background-image: url('img/number03.png');
}

.home .christmas-tree .number04 {
    background-image: url('img/number04.png');
}

.home .christmas-tree .number05 {
    background-image: url('img/number05.png');
}

.home .christmas-tree .number06 {
    background-image: url('img/number06.png');
}

.home .christmas-tree .number07 {
    background-image: url('img/number07.png');
}

.home .christmas-tree .number08 {
    background-image: url('img/number08.png');
}

.home .christmas-tree .number09 {
    background-image: url('img/number09.png');
}

.home .christmas-tree .number10 {
    background-image: url('img/number10.png');
}

.home .christmas-tree .number11 {
    background-image: url('img/number11.png');
}

.home .christmas-tree .number12 {
    background-image: url('img/number12.png');
}

.carousel-inner {
    overflow-y: visible;
}

.carousel-inner > .header {
    position: absolute;
    width: 100%;
    z-index: 10000;
}

.modal-content {
    border: none;
}

.modal-content .number {
    width: 65px;
    height: 65px;
    background-repeat: no-repeat;
    display: block;
    margin: 0 auto;
    background-size: initial;
    background-position: center center;
}

.modal-content .slide-box .number {
    padding: 0 30px;
}

.modal-content .slide-box .number {
    margin-bottom: 10px;
    margin-top: -38px;
}

.modal-content .number01 {
    background-image: url('img/number01-noshadow.png');
}

.modal-content .number02 {
    background-image: url('img/number02-noshadow.png');
}

.modal-content .number03 {
    background-image: url('img/number03-noshadow.png');
}

.modal-content .number04 {
    background-image: url('img/number04-noshadow.png');
}

.modal-content .number05 {
    background-image: url('img/number05-noshadow.png');
}

.modal-content .number06 {
    background-image: url('img/number06-noshadow.png');
}

.modal-content .number07 {
    background-image: url('img/number07-noshadow.png');
}

.modal-content .number08 {
    background-image: url('img/number08-noshadow.png');
}

.modal-content .number09 {
    background-image: url('img/number09-noshadow.png');
}

.modal-content .number10 {
    background-image: url('img/number10-noshadow.png');
}

.modal-content .number11 {
    background-image: url('img/number11-noshadow.png');
}

.modal-content .number12 {
    background-image: url('img/number12-noshadow.png');
}

.slide-box {
    padding: 30px;
}

.modal-content .header {
    display: table;
    width: 100%;
    padding: 25px 30px;
}

.modal-content .header img {
    display: inline-block;
}

.modal-content .header img {
    border-radius: 0;
}

.modal-content .header .navi .number {
    height: 65px;
    width: 65px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    border: none;
    background-color: transparent;
    cursor: pointer;
    padding: 0;
    margin: 0 30px;
}

.modal-content .content img {
    border-radius: 20px;
}

#starModal .modal-body {
    height: 600px;
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 800px;
    }
}

#starModal iframe {
    height: 100%;
    width: 100%;
    border: none;
}

#christmasTreeModal .modal-dialog {
    min-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: auto;
    width: 787px;
}

.carousel-control-prev {
    left: unset;
}

.carousel-control-prev-icon {
    background: url('img/prev.png');
    height: 46px;
    width: 23px;
}

.carousel-control-next {
    right: unset;
}

.carousel-control-next-icon {
    background: url('img/next.png');
    height: 46px;
    width: 23px;
}

.carousel-control-next, .carousel-control-prev {
    position: absolute;
    display: inline-block;
}

.carousel-control-next {
    top: 25px;
    right: 33%;
}

.carousel-control-prev {
    top: 25px;
    left: 33%;
}

button.close {
    position: absolute;
    right: 30px;
}

#christmasTreeModal button.close {
    position: absolute;
    top: 15px;
    right: 30px;
}

@media (max-width: 767px) {
    .home .christmas-tree button {
        margin: 0 5px;
    }
    button.close {
        right: 15px;
    }

    #christmasTreeModal button.close {
        position: absolute;
        top: 15px;
        right: 15px;
    }

    .carousel-control-next {
        top: 25px;
        right: 28%;
    }

    .carousel-control-prev {
        top: 25px;
        left: 28%;
    }

    .modal-dialog {
        width: auto;
    }

    .home .logo {
        height: 100px;
        width: 150px;
        margin: 40px auto;
    }

    .home .logo img {
        width: 100%;
        height: auto;
    }

    .home .christmas-tree {
        height: 526px;
        width: 100%;
        max-width: 337px;
    }

    .home .christmas-tree button {
        height: 45px;
        width: 45px;

    }

    .home .christmas-tree .row-star {
        left: 5px;
    }

    .home .christmas-tree .row-star button {
        height: 128px;
        width: 67px;
    }
}

@media (min-width: 576px) {
    #christmasTreeModal .modal-dialog {
        max-width: unset;
    }
}

.modal-content h2 {
    color: #2770a7;
    font-size: 24px;
    font-weight: 600;
    margin-top: 50px;
    margin-bottom: 30px;
}

.modal-dialog h3 {
    color: #f1611a;
    font-size: 45px;
    font-weight: 700;
    margin-bottom: 20px;
}

.modal-content hr {
    color: #dadada;
}

.modal-content p {
    color: #2770a7;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 20px;
}

.modal-content h4 {
    font-size: 19px;
    color: #646464;
    font-weight: 700;
    text-align: center;
}

.modal-content h5 {
    font-size: 13px;
    color: #646464;
    font-weight: 500;
    text-align: center;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .modal-dialog {
        min-height: calc(100vh - 20px);
    }
}

.slick-slide {
    width: 100% !important;
}

.slick-track {
    width: 100% !important;
}

#christmasTreeModal,
#starModal{
    background: rgba(123, 175, 22, .75);
}