/* xxl */
@media (min-width: 1600px) {

    /* Shop */
    .ml-shop {
        margin-left: 300px !important;
    }

    .fox-shop {
        bottom: 4%;
        left: 0;
        width: 25%;
        z-index: 99;
    }

    .qt {
        width: 60px !important;
    }

    .ft {
        font-size: 1.2rem !important;
        width: 100% !important;
    }

    .ft-detail {
        font-size: 1.2rem !important;
    }

    .fox-au1 {
        width: 160px !important;
        bottom: 0%;
        left: 40px;
    }

    .fox-au2 {
        width: 190px !important;
        bottom: 0%;
        right: 40px;
    }

    /* {{-- Red Sorbet --}} */
    .box1 {
        width: 60%;
        margin-right: -100px;
    }

    .box2 {
        margin-left: -80px;
        width: 60%;
    }

    .box1-ume {
        margin-left: -250px;
        width: 60% !important;
    }

    .box2-ume {
        margin-left: 0;
        width: 78%;
    }

    .wip-ume {
        top: 8%;
        left: 49.5%;
        width: 120px;
    }

    .fox-red {
        bottom: 24%;
        right: 17%;
        width: 100px !important;
    }

    .fox-ume {
        bottom: 21%;
        left: 18%;
        width: 100px;
    }

    .fox-melon {
        bottom: 30%;
        right: 17%;
        width: 100px !important;
    }

    .wip {
        top: 7%;
        left: 44%;
        width: 120px !important;
    }

    /* Show */
    .bg-item {
        z-index: 2;
        margin-top: 80px;
        width: 100%;
    }

    .item1 {
        z-index: 20;
        left: 32.5%;
        margin-top: -230px;
        width: 11%;
    }

    .sitem1 {
        z-index: 20;
        left: 30%;
        margin-top: -1000px;
        width: 8%;
    }

    .item2 {
        z-index: 20;
        left: 43.5%;
        margin-top: 250px;
        width: 11%;
    }

    .sitem2 {
        z-index: 20;
        left: 42.5%;
        margin-top: -550px;
        width: 6%;
    }

    .item3 {
        z-index: 20;
        right: 34.4%;
        margin-top: 0px;
        width: 11%;
    }

    .sitem3 {
        z-index: 20;
        right: 30.4%;
        margin-top: -1000px;
        width: 10%;
    }
}

/* xl */
@media (min-width: 1200px) and (max-width:1599px) {

    /* Shop */
    .ml-shop {
        margin-left: 300px !important;
    }

    .fox-shop {
        bottom: 4%;
        left: 0;
        width: 25%;
        z-index: 99;
    }

    .qt {
        width: 60px !important;
    }

    .ft {
        font-size: 1.2rem !important;
        width: 100% !important;
    }

    .ft-detail {
        font-size: 1.2rem !important;
    }

    .fox-au1 {
        width: 170px !important;
        bottom: 0%;
        left: 40px;
    }

    .fox-au2 {
        width: 190px !important;
        bottom: 0%;
        right: 40px;
    }

    /* {{-- Red Sorbet --}} */
    .box1 {
        margin-right: -100px;
        width: 60%;
    }

    .box2 {
        margin-left: -80px;
        width: 60%;
    }

    .box1-ume {
        margin-left: -250px;
        width: 60% !important;
    }

    .box2-ume {
        margin-left: 0;
        width: 78%;
    }

    .wip-ume {
        top: 3%;
        left: 49.5%;
        width: 120px;
    }

    .fox-red {
        bottom: 21%;
        right: 15%;
        width: 100px !important;
    }

    .fox-ume {
        bottom: 21%;
        left: 18%;
        width: 100px;
    }

    .fox-melon {
        bottom: 21%;
        right: 19%;
        width: 100px !important;
    }

    .wip {
        top: 5%;
        right: 44%;
        width: 120px !important;
    }

    .wip2 {
        top: 7% !important;
        right: 49% !important;
        width: 120px !important;
    }

    /* Show */
    .bg-item {
        z-index: 2;
        margin-top: 80px;
        width: 100%;
    }

    .item1 {
        z-index: 20;
        left: 32.5%;
        margin-top: -230px;
        width: 11%;
    }

    .sitem1 {
        z-index: 20;
        left: 30%;
        margin-top: -1120px;
        width: 8%;
    }

    .item2 {
        z-index: 20;
        left: 43.5%;
        margin-top: 250px;
        width: 11%;
    }

    .sitem2 {
        z-index: 20;
        left: 42.5%;
        margin-top: -560px;
        width: 6%;
    }

    .item3 {
        z-index: 20;
        right: 34.4%;
        margin-top: 0px;
        width: 11%;
    }

    .sitem3 {
        z-index: 20;
        right: 30.4%;
        margin-top: -1020px;
        width: 10%;
    }
}

/* lg */
@media (min-width: 992px) and (max-width:1199px) {

    /* Shop */
    .ml-shop {
        margin-left: 260px !important;
    }

    .fox-shop {
        bottom: 4%;
        left: 0;
        width: 25%;
        z-index: 99;
    }

    .qt {
        width: 60px !important;
    }

    .ft {
        font-size: 1.2rem !important;
        width: 80% !important;
    }

    .ft-detail {
        font-size: 0.8rem !important;
    }

    .fox-au1 {
        width: 140px !important;
        bottom: 0%;
        left: 40px;
    }

    .fox-au2 {
        width: 160px !important;
        bottom: 0%;
        right: 40px;
    }

    /* {{-- Red Sorbet --}} */
    .box1 {
        margin-right: -70px;
        width: 50%;
    }

    .box2 {
        margin-left: -80px;
        width: 60%;
    }

    .box1-ume {
        margin-left: -210px;
        width: 60% !important;
    }

    .box2-ume {
        margin-left: 0px;
        width: 78%;
    }

    .wip-ume {
        top: 2%;
        left: 50%;
        width: 80px;
    }

    .fox-red {
        bottom: 22%;
        right: 12%;
        width: 80px !important;
    }

    .fox-ume {
        bottom: 18%;
        left: 12%;
        width: 80px;
    }

    .fox-melon {
        bottom: 26%;
        right: 12%;
        width: 80px !important;
    }

    .wip {
        top: 4%;
        right: 50%;
        width: 80px !important;
    }

    .bg-show {
        background-repeat: no-repeat !important;
        background-size: contain !important;
        width: 100% !important;
    }

    /* Show */
    .bg-item {
        z-index: 2;
        margin-top: 80px;
        margin-bottom: 40px;
        width: 100%;
    }

    .item1 {
        z-index: 20;
        left: 31%;
        margin-top: -290px;
        width: 11%;
    }

    .sitem1 {
        z-index: 20;
        left: 28%;
        margin-top: -850px;
        width: 8%;
    }

    .item2 {
        z-index: 20;
        left: 43.5%;
        margin-top: 52px;
        width: 11%;
    }

    .sitem2 {
        z-index: 20;
        left: 42.5%;
        margin-top: -450px;
        width: 7%;
    }

    .item3 {
        z-index: 20;
        right: 32.8%;
        margin-top: -130px;
        width: 11%;
    }

    .sitem3 {
        z-index: 20;
        right: 28.4%;
        margin-top: -780px;
        width: 12%;
    }
}

/* md */
@media (min-width: 768px) and (max-width:991px) {

    /* Shop */
    .ml-shop {
        margin-left: 180px !important;
    }

    .fox-shop {
        bottom: 6%;
        left: 0;
        width: 28%;
        z-index: 99;
    }

    .qt {
        width: 60px !important;
    }

    .ft {
        font-size: 1.2rem !important;
        width: 100% !important;
    }

    .ft-detail {
        font-size: 1rem !important;
        width: 80%;
    }

    .fox-au1 {
        width: 140px !important;
        bottom: 0%;
        left: 40px;
    }

    .fox-au2 {
        width: 160px !important;
        bottom: 0%;
        right: 40px;
    }

    /* {{-- Red Sorbet --}} */
    .box1 {
        margin-right: -80px;
        width: 60%;
    }

    .box2 {
        margin-left: -60px;
        width: 80%;
    }

    .box1-ume {
        margin-left: -210px;
        width: 60% !important;
    }

    .box2-ume {
        margin-left: 0px;
        width: 100%;
    }

    .wip-ume {
        top: 2%;
        left: 50%;
        width: 80px;
    }

    .fox-red {
        bottom: 22%;
        right: 12%;
        width: 80px !important;
    }

    .fox-ume {
        bottom: 18%;
        left: 12%;
        width: 80px;
    }

    .fox-melon {
        bottom: 26%;
        right: 12%;
        width: 80px !important;
    }

    .wip {
        top: 4%;
        right: 50%;
        width: 80px !important;
    }

    .bg-show {
        background-repeat: no-repeat !important;
        background-size: contain !important;
        width: 100% !important;
    }

    /* Show */
    .bg-item {
        z-index: 2;
        margin-top: 80px;
        margin-bottom: 0px;
        width: 100%;
    }

    .item1 {
        z-index: 20;
        left: 31%;
        margin-top: -290px;
        width: 11%;
    }

    .sitem1 {
        z-index: 20;
        left: 28%;
        margin-top: -600px;
        width: 12%;
    }

    .item2 {
        z-index: 20;
        left: 43.5%;
        margin-top: 52px;
        width: 11%;
    }

    .sitem2 {
        z-index: 20;
        left: 40.5%;
        margin-top: -260px;
        width: 9%;
    }

    .item3 {
        z-index: 20;
        right: 32.8%;
        margin-top: -130px;
        width: 11%;
    }

    .sitem3 {
        z-index: 20;
        right: 24.4%;
        margin-top: -520px;
        width: 15%;
    }
}

/* sm */
@media (min-width: 576px) and (max-width:767.98px) {

    /* Shop */
    .ml-shop {
        margin-left: 200px !important;
    }

    .fox-shop {
        bottom: 4%;
        left: 0;
        width: 35%;
        z-index: 99;
    }

    .qt {
        width: 20px !important;
    }

    .ft {
        font-size: 1.2rem !important;
        width: 50% !important;
    }

    /* {{-- Red Sorbet --}} */
    .box1 {
        margin-right: -100px;
        width: 60%;
    }

    .box2 {
        margin-left: -80px;
        width: 60%;
    }

    .fox-red {
        bottom: 21%;
        right: 19%;
        width: 100px !important;
    }

    .fox-melon {
        bottom: 21%;
        right: 19%;
        width: 100px !important;
    }

    .wip {
        top: 5%;
        right: 19%;
        width: 60px !important;
    }

    /* Show */
    .bg-item {
        z-index: 2;
        margin-top: 640px;
        width: 100%;
    }

    .item1 {
        z-index: 20;
        left: 32.5%;
        margin-top: -230px;
        width: 11%;
    }

    .sitem1 {
        z-index: 20;
        left: 30%;
        margin-top: -1000px;
        width: 8%;
    }

    .item2 {
        z-index: 20;
        left: 43.5%;
        margin-top: 250px;
        width: 11%;
    }

    .sitem2 {
        z-index: 20;
        left: 42.5%;
        margin-top: -450px;
        width: 6%;
    }

    .item3 {
        z-index: 20;
        right: 34.4%;
        margin-top: 0px;
        width: 11%;
    }

    .sitem3 {
        z-index: 20;
        right: 30.4%;
        margin-top: -920px;
        width: 10%;
    }
}

/* xs */
@media (max-width:575.98px) {

    /* Header */
    .navbar-expand-lg .navbar-brand {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    /* Shop */
    .ml-shop {
        margin-left: 00px !important;
    }

    .fox-shop {
        top: -280%;
        left: 0;
        width: 50%;
        z-index: 99;
    }


    /* AboutUs */
    .qt {
        width: 20px !important;
    }

    .ft {
        font-size: 0.8rem !important;
        width: 100% !important;
        text-align: center !important;
    }

    .fox-au1 {
        width: 50px !important;
        bottom: 0%;
        left: 20px;
    }

    .fox-au2 {
        width: 65px !important;
        bottom: 0%;
        right: 20px;
    }

    /* {{-- Red Sorbet --}} */
    .box1 {
        margin-right: 0;
        width: 40%;
    }

    .box2 {
        margin-left: -20px;
        width: 50%;

    }

    .fox-red {
        bottom: 5%;
        right: 2%;
        width: 60px !important;
    }

    .fox-melon {
        bottom: 5%;
        right: 2%;
        width: 60px !important;
    }

    .wip {
        top: 5%;
        right: 19%;
        width: 60px !important;
    }

    /* Show */
    .bg-item {
        z-index: 2;
        margin-top: 640px;
        width: 100%;
    }

    .item1 {
        z-index: 20;
        left: 32.5%;
        margin-top: -230px;
        width: 11%;
    }

    .sitem1 {
        z-index: 20;
        left: 30%;
        margin-top: -1000px;
        width: 8%;
    }

    .item2 {
        z-index: 20;
        left: 43.5%;
        margin-top: 250px;
        width: 11%;
    }

    .sitem2 {
        z-index: 20;
        left: 42.5%;
        margin-top: -450px;
        width: 6%;
    }

    .item3 {
        z-index: 20;
        right: 34.4%;
        margin-top: 0px;
        width: 11%;
    }

    .sitem3 {
        z-index: 20;
        right: 30.4%;
        margin-top: -920px;
        width: 10%;
    }
}

/* Font-weight */
.w400 {
    font-weight: 400 !important;
}

.w500 {
    font-weight: 500 !important;
}

.w600 {
    font-weight: 600 !important;
}

.w700 {
    font-weight: 700 !important;
}

.background-fix {
    width: 100%;
    height: 1200;
    background-position: start;
    background-size: contain;
    background-color: #FFE0BC;
    background-attachment: fixed;

    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.background-fix2 {
    width: 100%;
    height: 1200;
    background-position: start;
    background-size: contain;
    background-color: #FFEFDD;
    background-attachment: fixed;

    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Image BG */
.box {
    position: relative;
    text-align: center;
    color: #000000;
}

.centered {
    position: absolute;
    top: 14%;
    left: 23%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.rotate-fox {
    animation: rotate-foxAnimation 1.5s infinite linear;
    -webkit-animation: rotate-foxAnimation 1.5s infinite linear;
    transition: transform 0.1s ease;
    -webkit-transition: transform 0.1s ease;
    -moz-transition: transform 0.1s ease;
    -ms-transition: transform 0.1s ease;
    -o-transition: transform 0.1s ease;
}

@keyframes rotate-foxAnimation {

    0%,
    100% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }

    50% {
        transform: rotate(-3deg);
        -webkit-transform: rotate(-3deg);
        -moz-transform: rotate(-3deg);
        -ms-transform: rotate(-3deg);
        -o-transform: rotate(-3deg);
    }

    75% {
        transform: rotate(3deg);
        -webkit-transform: rotate(3deg);
        -moz-transform: rotate(3deg);
        -ms-transform: rotate(3deg);
        -o-transform: rotate(3deg);
    }
}

.rotate {
    animation: rotateAnimation 1.5s infinite linear;
    -webkit-animation: rotateAnimation 1.5s infinite linear;
    transition: transform 0.1s ease;
    -webkit-transition: transform 0.1s ease;
    -moz-transition: transform 0.1s ease;
    -ms-transition: transform 0.1s ease;
    -o-transition: transform 0.1s ease;
}

@keyframes rotateAnimation {

    0%,
    100% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(-10deg);
        -webkit-transform: rotate(-10deg);
        -moz-transform: rotate(-10deg);
        -ms-transform: rotate(-10deg);
        -o-transform: rotate(-10deg);
    }

    75% {
        transform: rotate(5deg);
        -webkit-transform: rotate(5deg);
        -moz-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        -o-transform: rotate(5deg);
    }
}

.gelatine {
    animation: gelatine 1s 0.5s forwards;
}

@keyframes gelatine {

    from,
    to {
        transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
    }

    25% {
        transform: scale(0.9, 1.1);
    }

    50% {
        transform: scale(1.1, 0.9);
    }

    75% {
        transform: scale(0.95, 1.05);
    }
}

@keyframes slideInDown {
    from {
        transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        opacity: 1;
    }

    to {
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        opacity: 1;
    }
}

.gelatine-banner {
    animation: slideInDown 1s forwards, gelatine 1s 0.5s infinite;
    -webkit-animation: slideInDown 1s forwards, gelatine 1s 0.5s infinite;
}

@keyframes gelatine {

    from,
    to {
        transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
    }

    25% {
        transform: scale(0.9, 1.1);
    }

    50% {
        transform: scale(1.1, 0.9);
    }

    75% {
        transform: scale(0.95, 1.05);
    }
}

@keyframes slideInDown {
    from {
        transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        opacity: 1;
    }

    to {
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        opacity: 1;
    }
}



.gelatine1 {
    animation: gelatine 1s infinite;
    -webkit-animation: gelatine 1s infinite;
}

@keyframes gelatine {

    from,
    to {
        transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
    }

    25% {
        transform: scale(0.9, 1.1);
    }

    50% {
        transform: scale(1.1, 0.9);
    }

    75% {
        transform: scale(0.95, 1.05);
    }
}