@charset "utf-8";
/* CSS Document */
/* Developed and copyright by Supawee "Bom" Ippoodom */

/* Reset - Start */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, 
caption, tbody, tfoot, thead, tr, th, td 
                  {margin: 0;padding: 0;border: 0;outline: 0;
                  font-size: 100%;vertical-align: baseline;
                  background: transparent;}
body              {line-height: 1;}
ol, ul            {list-style: none;}
blockquote, q     {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';	content: none;}
:focus            {outline: 0;}
ins               {text-decoration: none;}
del               {text-decoration: line-through;}
table             {border-collapse: collapse;border-spacing: 0;}
/* Reset - End */

*{ margin:0 0; padding:0 0; }
a, a:hover, a:active, a:visited{ text-decoration:none; cursor:pointer; }
a img{ border:none; }
.noinnertext{ font-size:0; line-height:0; overflow:hidden; text-indent:-999em; text-decoration:none; }
.al-l{ text-align:left; }
.al-c{ text-align:center; }
.al-r{ text-align:right; }
.italic{ font-style:italic; }
.underline{ text-decoration:underline; }
.img-fullwidth{ max-width:100%; }
.img-maxwidth{ width:100%; }
.nopadding{ padding:0; }

h1,h2,h3,h4,h5,b,strong{ font-weight:normal; }

/* Fonts - Start */
.thin{ font-weight:100; }
.extra-light{ font-weight:200; }
.light{ font-weight:300; }
.regular{ font-weight:400; }
.medium{ font-weight:500; }
.semi-bold{ font-weight:600; }
.bold{ font-weight:700; }
.extra-bold{ font-weight:800; }
.extra-black{ font-weight:900; }
h1{
    font-size:36px;
    line-height:36px;
    letter-spacing:2px;
}
h2{
    font-size:24px;
    line-height:24px;
    letter-spacing:2px;
}
h3{
    font-size:20px;
    line-height:20px;
    letter-spacing:2px;
}
h4{
    font-size:18px;
    line-height:18px;
    letter-spacing:2px;
}
p{
    font-size:16px;
    line-height:26px;
    letter-spacing:2px;
}
/* Fonts - End */

/* Color Identity - Start */
.white{ color:#FFF; }
.black{ color:#000; }
.red{ color:#ED1F24; }
.grey{ color:#676767; }
.green{ color:#009000; }
.dark{ color:#144394; }
.ivory{ color:#E9E8D9; }
.coffee{ color:#703833; }
/* Color Identity - End */

/* Background - Start */
.bg-black{ background-color:#000; }
.bg-white{ background-color:#FFF; }
.bg-ivory{ background-color:#E9E8D9; }
.bg-red{ background-color:#ED1F24; }
.bg-lightgrey{ background-color:#F0F0F0; }
/* Background - End */

/* Border - Start */
.noborder{ border:none !important; }
.border{ border:1px solid; }
.border-top{ border-top:1px solid; }
.border-right{ border-right:1px solid; }
.border-bottom{ border-bottom:1px solid; }
.border-left{ border-left:1px solid; }

	/* Border Size - Start */
	.border-2px{ border-width:2px; }
	.border-3px{ border-width:3px; }
	.border-4px{ border-width:4px; }
	.border-5px{ border-width:5px; }
	.border-6px{ border-width:6px; }
	.border-7px{ border-width:7px; }
	.border-8px{ border-width:8px; }
	.border-9px{ border-width:9px; }
	.border-10px{ border-width:10px; }
	/* Border Size - End */
	
	/* Border Color - Start */
	.border-black{ border-color:#000 !important; }
	.border-white{ border-color:#FFF !important; }
    .border-dark{ border-color:#144394 !important; }
    .border-grey{ border-color:#C4C4C4 !important; }
    .border-ivory{ border-color:#E9E8D9 !important; }
	/* Border Color - End */

    /* Border Radius - Start */
    .border-radius{
        border-radius:20px;
        -webkit-border-radius:20px;
        -moz-border-radius:20px;
        -o-border-radius:20px;
    }
    /* Border Radius - End */
	
/* Border - End */

/* Buttons - Start */
.btn-text{
    transition:.2s color linear;
    -webkit-transition:.2s color linear;
    -moz-transition:.2s color linear;
    -o-transition:.2s color linear;
}
.share-button{
	font-size:22px;
}
.btn{
    padding:0.45rem 1rem 0.25rem 1rem;

    font-size:14px;
    line-height:14px;
    font-weight:400;
    letter-spacing:2px;

    border-radius:18px;
    -webkit-border-radius:18px;
    -moz-border-radius:18px;
    -o-border-radius:18px;

    box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
	-webkit-box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
	-moz-box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
	-o-box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);

    transition:.2s color linear, .2s background-color linear, .2s border-color linear;
    -webkit-transtion:.2s color linear, .2s background-color linear, .2s border-color linear;
    -moz-transition:.2s color linear, .2s background-color linear, .2s border-color linear;
    -o-transition:.2s color linear, .2s background-color linear, .2s border-color linear;
}
.btn i{
    font-size:10px;
}
.btn-social{
    width:29px;
    height:29px;
    padding:0.25rem 0.5rem;

    font-size:18px;
    line-height:18px;

    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -o-border-radius:50%;

    transition:.2s color linear, .2s background-color linear, .2s border-color linear;
    -webkit-transtion:.2s color linear, .2s background-color linear, .2s border-color linear;
    -moz-transition:.2s color linear, .2s background-color linear, .2s border-color linear;
    -o-transition:.2s color linear, .2s background-color linear, .2s border-color linear;
}
    /* Colors - Start */
    .btn.btn-red{
        background-color:#ED1F24;
        color:#fff;
    }
    .btn.btn-red-transparent{
        background-color:transparent;
        color:#fff;
        border-color:#fff;
    }
    .btn.btn-white-transparent{
        background-color:transparent;
        border:1px solid #000;
    }
    .btn.btn-black{
        background-color:#000;
        color:#fff;
    }
    .btn-social.btn-messenger{
		color:#fff;
		background-color:#4785FF;
	}
	.btn-social.btn-whatsapp{
		color:#fff;
		background-color:#3FD366;
	}
	.btn-social.btn-line{
		color:#fff;
		background-color:#35C300;
	}
	.btn-social.btn-twitter{
		color:#fff;
		background-color:#55ABEE;
	}
	.btn-social.btn-facebook{
		color:#fff;
		background-color:#3B5A9A;
	}
    .btn.btn-ivory{
        background-color:#E9E8D9;
        color:#808F84;
        border-color:transparent;
    }
    .btn.btn-coffee{
        background-color:#703833;
        color:#E9E8D9;
    }
    .btn.btn-cream{
        background-color:#F6DEBE;
        color:#808F84;
    }
    .btn.btn-grey{
        background-color:#808285;
        color:#E9E8D9;
    }
    /* Colors - End */

    /* Hover - Start */
    .btn.btn-red:hover{
        background-color:#fff;
        color:#ED1F24;
    }
    .btn.btn-red-transparent:hover{
        background-color:#fff;
        color:#ED1F24;
        border-color:#ED1F24;
    }
    .btn.btn-white-transparent:hover{
        background-color:#000;
        color:#fff;
    }
    .btn.btn-black:hover{
        background-color:#fff;
        color:#000;
    }
    .btn.btn-ivory:hover{
        background-color:transparent;
        color:#E9E8D9;
        border-color:#E9E8D9;
    }
    .btn.btn-coffee:hover{
        background-color:#E9E8D9;;
        color:#703833
    }
    .btn.btn-cream:hover{
        background-color:#9C8C76;
        color:#F6DEBE;
    }
    .btn.btn-grey:hover{
        background-color:#E9E8D9;;
        color:#808285
    }
    /* Hover - End */

    /* .btn-text:hover - Start */
    .btn-text.white:hover{
        color:#fff;
    }
    .btn-text.grey:hover{
        color:#ED1F24;
    }
    /* .btn-text:hover - End */

/* Buttons - End */

/* Animation - Start */
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.6s; }
.delay-3 { animation-delay: 0.8s; }
.delay-4 { animation-delay: 0.9s; }
.delay-5 { animation-delay: 1s; }
.delay-6 { animation-delay: 1.1s; }
.delay-7 { animation-delay: 1.2s; }
.delay-8 { animation-delay: 1.3s; }
.delay-9 { animation-delay: 1.4s; }
.delay-10 { animation-delay: 1.5s; }
.delay-11 { animation-delay: 1.6s; }
.delay-12 { animation-delay: 1.7s; }
.delay-13 { animation-delay: 1.8s; }
.delay-14 { animation-delay: 1.9s; }
.delay-15 { animation-delay: 2s; }
.delay-16 { animation-delay: 2.1s; }
.delay-17 { animation-delay: 2.2s; }
.delay-18 { animation-delay: 2.3s; }
.delay-19 { animation-delay: 2.4s; }
.delay-20 { animation-delay: 2.5s; }
.delay-21 { animation-delay: 2.6s; }
.delay-22 { animation-delay: 2.7s; }
.delay-23 { animation-delay: 2.8s; }
.delay-24 { animation-delay: 2.9s; }
.delay-25 { animation-delay: 3s; }
.delay-26 { animation-delay: 3.1s; }
.delay-27 { animation-delay: 3.2s; }
.delay-28 { animation-delay: 3.3s; }
.delay-29 { animation-delay: 3.4s; }
.delay-30 { animation-delay: 3.5s; }

.slow-1 { animation-duration: 2s; }
.slow-2 { animation-duration: 2.1s; }
.slow-3 { animation-duration: 2.2s; }
.slow-4 { animation-duration: 2.3s; }
.slow-5 { animation-duration: 2.4s; }
.slow-6 { animation-duration: 2.5s; }
.slow-7 { animation-duration: 2.6s; }
.slow-8 { animation-duration: 2.7s; }
.slow-9 { animation-duration: 2.8s; }
.slow-10 { animation-duration: 2.9s; }
.slow-11 { animation-duration: 3s; }
.slow-12 { animation-duration: 3.1s; }
.slow-13 { animation-duration: 3.2s; }
.slow-14 { animation-duration: 3.3s; }
.slow-15 { animation-duration: 3.4s; }
.slow-16 { animation-duration: 3.5s; }
.slow-17 { animation-duration: 3.6s; }
.slow-18 { animation-duration: 3.7s; }
.slow-19 { animation-duration: 3.8s; }
.slow-20 { animation-duration: 3.9s; }
.slow-21 { animation-duration: 4s; }
/* Animation - End */

/* #loading - Start */
@keyframes ldio-elq6fehsehk {
    0% { transform: rotate(0) }
    100% { transform: rotate(360deg) }
}
#loading{
    width:100%;
    height:100vh;
    position:fixed;
    top:0;
    left:0;

    background-color:rgba(0,0,0, 0.6);

    display:none;
    z-index:999;
}
.ldio-elq6fehsehk div { box-sizing: border-box!important }
.ldio-elq6fehsehk > div {
    position: absolute;
    width: 160px;
    height: 160px;
    top: 20px;
    left: 20px;
    border-radius: 50%;
    border: 4px solid #E9E8D9;
    border-color: #808F84 transparent #808F84 transparent;
    animation: ldio-elq6fehsehk 2.564102564102564s linear infinite;
}

.ldio-elq6fehsehk > div:nth-child(2), .ldio-elq6fehsehk > div:nth-child(4) {
    width: 148px;
    height: 148px;
    top: 26px;
    left: 26px;
    animation: ldio-elq6fehsehk 2.564102564102564s linear infinite reverse;
}
.ldio-elq6fehsehk > div:nth-child(2) {
    border-color: transparent #E9E8D9 transparent #E9E8D9;
}
.ldio-elq6fehsehk > div:nth-child(3) { border-color: transparent }
.ldio-elq6fehsehk > div:nth-child(3) div {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(45deg);
}
.ldio-elq6fehsehk > div:nth-child(3) div:before, .ldio-elq6fehsehk > div:nth-child(3) div:after { 
    content: "";
    display: block;
    position: absolute;
    width: 4px;
    height: 4px;
    top: -4px;
    left: 74px;
    background: #808F84;
    border-radius: 50%;
    box-shadow: 0 156px 0 0 #808F84;
}
.ldio-elq6fehsehk > div:nth-child(3) div:after {
    left: -4px;
    top: 74px;
    box-shadow: 156px 0 0 0 #808F84;
}

.ldio-elq6fehsehk > div:nth-child(4) { border-color: transparent; }
.ldio-elq6fehsehk > div:nth-child(4) div {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(45deg);
}
.ldio-elq6fehsehk > div:nth-child(4) div:before, .ldio-elq6fehsehk > div:nth-child(4) div:after {
    content: "";
    display: block;
    position: absolute;
    width: 4px;
    height: 4px;
    top: -4px;
    left: 68px;
    background: #E9E8D9;
    border-radius: 50%;
    box-shadow: 0 144px 0 0 #E9E8D9;
}
.ldio-elq6fehsehk > div:nth-child(4) div:after {
    left: -4px;
    top: 68px;
    box-shadow: 144px 0 0 0 #E9E8D9;
}
.loadingio-spinner-double-ring-qvomtcu446i {
    width: 200px;
    height: 200px;
    display: inline-block;
    overflow: hidden;
    background: none;

    position:absolute;
    top:calc( 50% - 100px );
    left:calc( 50% - 100px );
}
.ldio-elq6fehsehk {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    transform-origin: 0 0; /* see note above */
}
.ldio-elq6fehsehk div { box-sizing: content-box; }
/* #loading - End */

/* .modal - Start */
.modal ul{
    list-style:disc;
}
.modal ul li{
    margin-left:1rem;
}
.modal .modal-content{
    border-radius:20px;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    -o-border-radius:20px;
}
.modal .modal-content .modal-body p{
    margin-bottom:1rem;
}
.modal .modal-content .modal-body p.text-shadow{
    text-shadow: 2px 2px 3px rgba(150, 150, 150, 1);
    -webkit-text-shadow: 2px 2px 3px rgba(150, 150, 150, 1);
    -moz-text-shadow: 2px 2px 3px rgba(150, 150, 150, 1);
    -o-text-shadow: 2px 2px 3px rgba(150, 150, 150, 1);
}
.modal .modal-content .modal-footer{
    border:none;
}
    /* #grocercoinModal - Start */
    #grocercoinModal .icon_coin{
        font-size:82px;
    }
    /* #grocercoinModal - End */

    /* #islandModal - Start */
    #islandModal .reward-list{
        font-size:14px;
    }
    #islandModal .icon_coin{
        font-size:41px;
    }
    #islandModal .icon-wrapper{
        width:40px;
        height:40px;

        border-radius:50%;
        -webkit-border-radius:50%;
        -moz-border-radius:50%;
        -o-border-radius:50%;

        background-color:#FA000A;
    }
    #islandModal .icon-ticket{
        color:#fff;
    }
    /* #islandModal - End */

    /* #conditionModal - Start */
    #conditionDayModal .modal-content,
    #conditionNightModal .modal-content{
        padding:2rem 1rem;
    }
    #conditionDayModal .modal-body,
    #conditionNightModal .modal-body{
        max-height:320px;
        overflow-y:auto;
    }
    #conditionDayModal .modal-body p,
    #conditionNightModal .modal-body p,
    #conditionDayModal .modal-body li,
    #conditionNightModal .modal-body li{
        font-size:14px;
        line-height:24px;
    }
    /* #conditionModal - End */

.modal .modal-content h1#countdown span{
    font-size:52px;
    line-height:52px;
}

/* .modal - End */

/* .slick - Start */
.slick-slide{
    margin:0 10px;
}
.slick-slider .slick-custom-arrow{
    width:48px;
    height:48px;
}
.slick-slider .slick-custom-arrow::before{
    display:none;
}
.slick-slider .slick-custom-arrow{
    background-color:#AE1400;
    color:#fff;
    font-size:36px;

    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -o-border-radius:50%;

    transition:.2s opacity linear;
    -webkit-transition:.2s -webkit-opacity linear;
    -moz-transition:.2s -moz-opacity linear;
    -o-transition:.2s -o-opacity linear;
}
.slick-slider .slick-custom-arrow.slick-disabled{
    opacity:0.5;
    -webkit-opacity:0.5;
    -moz-opacity:0.5;
    -o-opacity:0.5;
}
.slick-slider .slick-custom-arrow.slick-prev{
    left:-48px;
}
.slick-slider .slick-custom-arrow.slick-next{
    right:-48px;
}
/* .slick - End */

/* .swal2 - Start */
.swal2-popup{
    font-family: 'Elkwood','Prompt', sans-serif;
}
.swal2-title{
    line-height:2rem;
}
/* .swal2 - End */

/* header - Start */
header,
footer{
    background-color:#CA2029;
}
/* header - End */

/* .box-shadow - Start */
.box-shadow{
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.45);
    -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.45);
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.45);
}
/* .box-shadow - End */

/* .form - Start */
.form .control-group{
    margin-bottom:1rem;
}
.form .control-group .controls input{
    width:100%;
    font-size:16px;
    line-height:26px;
    padding:0.5rem;
    
    border:none;

}
/* .form - End */

/* TinyMCE Upload Dialog - Start */
.tox .tox-dialog-wrap__backdrop--opaque{
    background-color:rgba(255,255,255,.75) !important;
}
.tox-dialog{
    min-height:360px;
    margin-top:auto !important;
    margin-bottom:auto !important;
}
/* TinyMCE Upload Dialog - End */

/* #languages - Start */
#languages{
    position:absolute;
    top:1rem;
    right:1rem;
}
/* #languages - End */

/* Default stylesheet - Start */
body{
    max-width:480px;
    margin:0 auto;
    font-family: 'Elkwood','Prompt', sans-serif;
    background-color:#E8E5D7;
}
#container{
    margin:2rem auto;
    background-color:#808F83;
    min-height:100vh;
}
body.compensate-for-scrollbar{
    margin:0 auto !important;
}
body #btnBack i.icon_back{
    font-size:36px;
}
.revealOnScroll, img.not-loaded{ opacity:0; -webkit-opacity:0; -moz-opacity:0; -o-opacity:0; }
section{
    padding:2rem 1rem;
}
section h2{
    margin-bottom:2rem;
    padding:1rem;
}
#btnBack{
    position:absolute;
    top:1rem;
    left:1rem;
}
/* Default stylesheet - End */

/* #greeting-options - Start */
#greeting-options .option-item{
    width:200px;
    height:200px;

    margin:2rem auto;

}
#greeting-options .option-item i:not(.fa-arrow-right){
    font-size:48px;
}
#greeting-options .option-item i.fa-arrow-right{
    position:absolute;
    bottom:1rem;
    right:1rem;

    font-size:24px;
}
/* #greeting-options - End */

/* #writing-wrapper - Start */
#writing-wrapper{
    width:100%;
    max-width:480px;
    height:100vh;
}
/* #writing-wrapper - End */