@font-face {
    font-family: 'OpenSans-ExtraBold';
	src: url("../fonts/OpenSans/OpenSans-ExtraBold.ttf") format("truetype");
	font-weight: normal;
}
@font-face {
    font-family: 'OpenSans-Bold';
	src: url("../fonts/OpenSans/OpenSans-Bold.ttf") format("truetype");
	font-weight: normal;
}
@font-face {
    font-family: 'OpenSans-Medium';
	src: url("../fonts/OpenSans/OpenSans-Medium.ttf") format("truetype");
	font-weight: normal;
}
@font-face {
    font-family: 'OpenSans-Light';
	src: url("../fonts/OpenSans/OpenSans-Light.ttf") format("truetype");
	font-weight: normal;
}
@font-face {
    font-family: 'OpenSans-SemiBold';
	src: url("../fonts/OpenSans/OpenSans-SemiBold.ttf") format("truetype");
	font-weight: normal;
}
@font-face {
    font-family: 'OpenSans-Regular';
	src: url("../fonts/OpenSans/OpenSans-Regular.ttf") format("truetype");
	font-weight: normal;
}

*, body, p, ul li, ol li, strong, b {
    font-family: 'OpenSans-Medium', sans-serif;
}
a, a:before, a:after{
    transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
}
section{padding: 60px 0;}
h2{
    font-family: "OpenSans-Bold", sans-serif;
    color: #444;
    font-weight: normal;
    font-size: 30px;
}
h2 > span{
    color: #e78b3c !important;
    font-family: inherit;
    font-weight: normal;
    font-size: inherit;
}
p.big{font-size: 25px;}
.whitespace_nowrap{white-space: nowrap;}

#titlebanner{
    padding-bottom: 0;
    background-color: #fff9ed;
}
#titlebanner .bread_contact_banner{
    min-height: auto;
    margin-bottom: 60px;
}
#titlebanner .visible-xs{
    background-image: url('../images/smcpkc/mobile-title-banner-bg.webp');
    background-size: 100% auto;
    background-position: right bottom;
    background-repeat: no-repeat;
    padding: 0 30px 40px;
}

#intro{
    padding-bottom: 0;
    position: relative;
}
#intro:before{
    content: '';
    width: 100%;
    height: 45%;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    background-image: url('../images/smcpkc/intro-elfy-ele-02.webp');
    background-size: contain;
    background-repeat: repeat-x;
    background-position: center bottom;
    z-index: 1;
}
#intro .container-fluid{
    position: relative;
    z-index: 2;
}
#intro h2{
    font-family: "OpenSans-Medium", sans-serif;
    font-size: 30px;
}
#intro h2 span{
    font-family: "OpenSans-Bold", sans-serif;
}
#intro .introelfy{max-width: 1100px; margin-right: auto; margin-left: auto;}
#chatbubble{
    filter: drop-shadow(0px 0px 25px rgba(175,175,175,0.3));
}
#intro .ele{position: absolute;}
#intro .ele-1{width: 18vw; left: 0; top: 50%; transform: translateY(-100%);}
#intro .ele-2{width: 13vw; right: 0; top: 30%; transform: translateY(-50%);}
#intro .ele-3{width: 130px; width: 9vw; left: 18%; top: 28%;}
#intro .ele-4{width: 70px; width: 4.5vw; left: 40%; top: 40%;}
#intro .ele-5{width: 85px; width: 5vw; right: 200px; bottom: 25%; z-index: 2;}

#exclusive_discounts_previleges{
    background-image: url('../images/smcpkc/bgdiscount.webp');
    background-position: center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-color: #fff9ed;
}
#exclusive_discounts_previleges .container > h2{
    font-size: 55px;
}
#exclusive_discounts_previleges .container > h2 + p{
    font-size: 25px;
}
#exclusive_discounts_previleges .row{
    justify-content: center;
}
#exclusive_discounts_previleges .col-12{padding-top: 15px; padding-bottom: 15px;}
#exclusive_discounts_previleges .box{
    background-image: url('../images/smcpkc/edp-bg.webp');
    background-position: center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    aspect-ratio: 3747 / 4304;
    text-align: center;
    padding: 35px;
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: space-between;
}
#exclusive_discounts_previleges .box .toppart{height: 70%; width: 100%;}
#exclusive_discounts_previleges .box .bottompart{height: 30%; width: 100%;}
#exclusive_discounts_previleges .box h3.percentage{
    color: #f61022;
    font-size: 80px;
    font-family: 'OpenSans-Bold', sans-serif;
    font-weight: normal;
    -webkit-text-stroke: 8px white;
    -webkit-text-fill-color: #f61022;
    paint-order: stroke fill;
    filter: drop-shadow(2px 10px 10px rgba(100,100,100,0.4));
    margin-top: 15px;
    margin-bottom: 5px;
}
#exclusive_discounts_previleges .box .desc{
    color: #f61022;
    font-size: 30px;
    font-family: 'OpenSans-Bold', sans-serif;
    line-height: 1.2;
    min-height: 108px;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    margin-bottom: 20px;
}
#exclusive_discounts_previleges .box .desc span{
    font-family: inherit;
    font-weight: inherit;
}
#exclusive_discounts_previleges .box .smalldesc{
    color: #555555;
    margin-bottom: 10px;
    width: 100%;
    max-width: 230px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

#exclusive_discounts_previleges .button{
    background-color: #ac8c5e;
    padding: 15px 40px;
    height: auto;
    line-height: 1.2;
    text-shadow: none;
    font-weight: normal;
    letter-spacing: 0;
    font-family: 'OpenSans-Medium';
    font-size: 18px;
    margin-top: 50px;
}
.filterdropshadow{
    filter: drop-shadow(2px 10px 10px rgba(100,100,100,0.4));
}

#safe_cheerful_space{position: relative; overflow-x: clip;}
#safe_cheerful_space .sandy{
    position: absolute;
    top: -120px;
    right: 30px;
    width: 24vw;
}
#safe_cheerful_space .rocky{
    position: absolute;
    left: 60px;
    top: 10px;
    width: 11vw;
}
#safe_cheerful_space .box{
    background-image: url('../images/smcpkc/safe_cheerful_space_bg.webp');
    background-size: 80% 100%;
    background-repeat: no-repeat;
    /*background-position: left center;*/
    /*padding: 100px 100px 40px 70px;*/
    background-position: 95px center;
    padding: 100px 40px 40px 190px;
    margin-top: 40px;
}
#safe_cheerful_space .box .row .col-12:last-child{
    align-content: center;
}
#safe_cheerful_space .box h3{margin-bottom: 24px; color: #444;}
#safe_cheerful_space p{color: #444;}
#safe_cheerful_space .box table{}
#safe_cheerful_space .box table td{
    padding: 10px 0;
    color: #444;
}
#safe_cheerful_space .box table td:last-child{padding-left: 24px;}
#safe_cheerful_space .box table td img{width: 30px;}

#roomtype{padding-top: 0;}
#roomtype .container-fluid{max-width: 1240px;}
#roomtype .imagecol{position: relative;}
#roomtype .imagecol p {
    background-color: white;
    color: #333;
    text-align: center;
    font-size: 20px;
    border-radius: 10px;
    padding: 15px 20px;
    width: calc(100% - 30px);
    margin: 0 auto;
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    border: 2px solid #fff;
    font-family: 'OpenSans-Bold', sans-serif;
}
#roomtype p.big:has( + .container){
    margin-bottom: 60px;
}

#signupform{
    background-color: #fef6a8;
    position: relative;
    overflow: hidden;
}
#signupform input, #signupform select, #signupform input:focus, #signupform select:focus{
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #b2ac76;
    padding-left: 0;
    padding-right: 0;
}
#signupform input[type="radio"], #signupform input[type="checkbox"]{
    margin-top: 2px;
    margin-right: 5px;
}
#signupform .checkboxdiv{
    display: flex;
    align-items: flex-start;
}
#signupform .button{
    background-color: #ac8c5e;
    padding: 15px 40px;
    height: auto;
    line-height: 1.2;
    text-shadow: none;
    font-weight: normal;
    letter-spacing: 0;
    font-family: 'OpenSans-Medium';
    font-size: 18px;
    margin-top: 20px;
}
#signupform .container{position: relative;}
.shooting_stars{
    position: absolute;
    top: -15px;
    left: -135px;
    width: 200px;
    height: auto;
}
.star_1{
    position: absolute;
    bottom: 30px;
    left: -120px;
    width: 120px;
    height: auto;
}
.star_2{
    position: absolute;
    top: 120px;
    right: -135px;
    width: 135px;
    height: auto;
}

#event-highlights{
    position: relative;
    overflow-x: clip;
}
.elfy2{
    position: absolute;
    top: -150px;
    right: 15px;
    width: 15vw;
}
#event-highlights .button{
    background-color: #ac8c5e;
    padding: 15px 40px;
    height: auto;
    line-height: 1.2;
    text-shadow: none;
    font-weight: normal;
    letter-spacing: 0;
    font-family: 'OpenSans-Medium';
    font-size: 18px;
    margin-top: 40px;
    width: 100%;
    max-width: 200px;
    margin-right: auto;
    margin-left: auto;
}
.ehbox{
    display: grid;
    grid-column-gap: 12px;
    grid-row-gap: 12px;
}
.div1 { grid-area: 1 / 1 / 3 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 2 / 2 / 3 / 3; }
.div4 { grid-area: 1 / 3 / 2 / 4; }
.div5 { grid-area: 2 / 3 / 3 / 4; }

.moreeventhighlights{display: none;}
.moreeventhighlights .ehbox{
    grid-template-columns: calc(33.3333% - 8px) calc(33.3333% - 8px) calc(33.3333% - 8px);
    margin-top: 14px;
}
.ehbox > div {
    min-width: 0;
    overflow-wrap: break-word;
}
#event-highlights .imagecol img{
    width: 100%;
    height: auto;
    object-fit: cover;
    cursor: pointer;
    max-width: 100%;
}
#event-highlights .moreeventhighlights .imagecol img{
    aspect-ratio: 2000 / 1335;
}
.pdf a{
    position: relative;
    display: block;
}
.pdf a:before{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(32,32,32,0.4);
    opacity: 1;
}
.pdf a:after{
    content: 'VIEW PDF';
    display: inline-block;
    background-color: white;
    padding: 10px 30px;
    color: #1b1b1b;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
}
.pdf a:hover:before, .pdf a:hover:after{
    opacity: 1;
}

.modal.fade .modal-dialog{transform: translate(0,0);}
.display_img {
	background-color: #FFFFFF;
}
img.display{cursor: pointer;}
#btnNext, #btnPrev{
    background-color: #ac8c5e;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 15px;
    color: white;
    line-height: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
#btnPrev{
	position: absolute;
	top: 50%;
	left: 30px;
	cursor: pointer;
	transform: translateY(-50%);
}
#btnNext{
	position: absolute;
	top: 50%;
	right: 30px;
	cursor: pointer;
	transform: translateY(-50%);
}
#mimg {
	max-width:100%; 
    max-height:100%;
    margin:auto;
    display:block;
}

@media(max-width: 1199.9px){
    #exclusive_discounts_previleges .box h3.percentage{margin-top: 0;}
    #exclusive_discounts_previleges .box .desc{font-size: 20px; min-height: auto;}
}
@media(max-width: 991.9px){
    #intro .ele-5{right: 80px;}
    #exclusive_discounts_previleges .container > h2{font-size: 36px;}
    #exclusive_discounts_previleges .container > h2 + p{font-size: 18px;}
    #exclusive_discounts_previleges .row .col-6{margin-bottom: 15px;}
    #exclusive_discounts_previleges .box h3.percentage{font-size: 8.5vw; margin-top: 1.5vw;}
    #exclusive_discounts_previleges .box .desc{font-size: 3vw; margin-top: 1.5vw;}
    #exclusive_discounts_previleges .button{margin-top: 35px;}
    #exclusive_discounts_previleges .box .bottompart{align-content: center;}

    p.big{font-size: 18px;}
    #roomtype{padding-bottom: 30px;}
    #roomtype p.big:has( + .container){margin-bottom: 40px;}
    #roomtype .row{justify-content: center;}
    #roomtype .imagecol{padding-bottom: 30px;}
    #roomtype .imagecol p{bottom: 45px;}
    
    #safe_cheerful_space .box{
        background-size: 100% 90%;
        background-position: center top;
        padding: 80px 100px 0px 70px;
    }
    #safe_cheerful_space .box h3{margin-bottom: 20px;}
    #safe_cheerful_space p{margin-bottom: 20px;}
    #safe_cheerful_space .box table{margin-bottom: 5px;}
    #safe_cheerful_space .box table td{padding: 7px 0;}
    #safe_cheerful_space .box table td:last-child{padding-left: 15px;}
    #safe_cheerful_space .box .row .col-12:last-child{text-align: center;}
    #safe_cheerful_space .rocky{left: 0; top: -40px;}
    .elfy2{top: -100px; width: 18vw;}
}
@media(max-width: 767.9px){
    h2, #intro h2{font-size: x-large !important;}
    .box .content table{font-size: 13px;}
    #roomtype .imagecol img{width: 100%;}
    #roomtype .imagecol p{font-size: 16px; padding: 10px 15px;}
    
    #safe_cheerful_space .rocky{width: 15vw;}
    #safe_cheerful_space .sandy{width: 33vw; top: -90px;}
    #safe_cheerful_space .box{padding: 80px 50px 0;}
    #safe_cheerful_space .box table td:last-child{padding-left: 10px;}
    #safe_cheerful_space .box table td img{width: 25px;}
    
    #exclusive_discounts_previleges .button, #signupform .button, #event-highlights .button{font-size: 16px; padding: 10px 30px;}
    #exclusive_discounts_previleges .box .toppart{height: 60%;}
    #exclusive_discounts_previleges .box .bottompart{height: 40%;}
    
    .moreeventhighlights .ehbox{grid-template-columns: calc(50% - 8px) calc(50% - 8px); margin-top: 14px;}
}
@media(max-width: 575.9px){
    /*h2, #intro h2{font-size: large !important;}*/
    .col-xs-12{width: 100%;}
    #exclusive_discounts_previleges .row .col-6{width: 100%; max-width: 370px; flex: auto;}
    #exclusive_discounts_previleges .box{aspect-ratio: auto; background-size: 100% 100%;}
    #exclusive_discounts_previleges .box h3.percentage{font-size: 70px;}
    #exclusive_discounts_previleges .box .desc{font-size: 25px;}
    .pdf a:after{font-size: 12px;}
    
    #intro .ele-3{top: 45%;}
}
@media(max-width: 467.9px){
    /*h2, #intro h2{font-size: medium !important;}*/
    h2, #intro h2{font-size: 22px !important;}
    #safe_cheerful_space .rocky{width: 18vw;}
    #safe_cheerful_space .sandy{width: 45vw; top: -70px;}
}
@media(max-width: 399.9px){
    #exclusive_discounts_previleges .box{padding: 50px 35px;}
    #exclusive_discounts_previleges .box .toppart, #exclusive_discounts_previleges .box .bottompart{height: auto;}
}
@media(max-width: 349.9px){
    #exclusive_discounts_previleges .box h3.percentage{font-size: 55px;}
    #exclusive_discounts_previleges .box .desc{font-size: 20px;}
}

/* animation */
.animated{opacity: 1 !important;}