/* ################## 2025 OCT IDC CODE ################## */


/* COMMON CSS */
*, ::before, ::after{font-family: Montserrat;margin: 0;padding: 0;box-sizing: border-box;}
#content p a { color: #fff; }
.holiday{padding:0; color: #fff; position:relative;overflow: hidden;z-index: 0;}
div#holiday-content {padding: 0 0 7rem 0;}
.backside-card-img img {object-fit: cover;aspect-ratio: 16 / 9;width: 100%;}
/* CONTAINER */
.holiday .container {max-width: 940px;}

.holiday{
	background: linear-gradient(to right, #004677 0%, #0E3963 0%, #009ddb 100%);
}

/* FORGROUND TEXT */
.foreground-text {padding-top: 196px;}

/* HEADINGS */
#content .container .foreground-text > h1{font-size: 2.8rem;margin-bottom: 16px;letter-spacing: 2px;padding-bottom: 3rem;}
#content .container h2{letter-spacing: 3px}
#content h1{color: #fff;font-weight: 600;font-family: 'Montserrat', serif;text-transform: uppercase;line-height: 1.25;}
#content h2{color: #fff;font-weight: 500;font-family: 'Montserrat', serif;text-transform: uppercase;line-height: 1.25;font-size:2rem;}

.foreground-text h1 > span {font-weight: 400;}

/* STAR GARDLAND */
.star-garland{position: absolute;height: 50%;width: 140px;background-repeat: no-repeat;background-size: contain;background-position: center top;pointer-events: none;will-change: background-position;}
.garland-left{bottom: 990px;width: clamp(80px, calc(((100vw - 1010px) / 2) + 30px), 380px);left: 0;background-image: url('../img/holiday2025/Stars_Left_Side.png');}
.garland-right{width: clamp(80px, calc(((100vw - 1010px) / 2) + 150px), 600px);top: 110px; right: 0;background-image: url('../img/holiday2025/Stars_Upper_Right_Corner.png');}
.garland-right-lower{width: clamp(80px, calc(((100vw - 1010px) / 2) + 150px), 600px);bottom: 150px; right: 0;background-image: url('../img/holiday2025/Stars_Lower_Right_Side.png');}

/* FLIP CARDS */
.flip-card-back {background: linear-gradient(to right, rgba(255, 255, 255, 0.3) 31%, rgba(105, 203, 208, 0.3) 79%, rgba(0, 250, 250, 0.3) 100%);}
.flip-card-back {background-color: #fff;transform: rotateY(180deg);text-align:left;min-height:260px; padding: 1.5rem;


box-shadow: 0px 0px 32px rgb(215, 194, 168, 0.99), 0px 0px 8px rgb(253, 220, 92,.5);
}



#content p span.arrow {color: #002449;text-decoration: none;font-family: Montserrat;font-weight: 600;text-transform: uppercase;line-height: 24px;font-size: 1.188rem;position: relative;margin-bottom: 0;display: inline;}
#content .flip-card-back a > p:nth-child(2){color: #002449;height: 100px;max-height: 100px;}
#content .flip-card-back a > p:nth-child(3), #content .flip-card-back a > p:nth-child(4){margin-bottom: 0;}
.flip-card-back a p > span {color: #002449;font-size: 1rem;font-weight: 400;text-transform: capitalize;}

#content p span.arrow:after{font-size: 24px;line-height: 24px;display: inline-block;position: relative;top: 2px;width: 22px;margin-right: -32px;padding-left: 4px;transition: all .25s ease-in-out; content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path style="fill:%23002449;" d="M7.3,14.9c-0.1,0-0.3-0.1-0.4-0.2l-0.8-0.8C6,13.8,6,13.7,6,13.5s0.1-0.3,0.2-0.4L10,9.3H2.5C2.2,9.3,2,9,2,8.7V7.6c0-0.3,0.2-0.5,0.5-0.5H10L6.1,3.2C6,3.1,6,2.9,6,2.8S6,2.5,6.1,2.4l0.8-0.8C7,1.5,7.2,1.5,7.3,1.5s0.3,0.1,0.4,0.2l6.2,6.2C13.9,7.9,14,8,14,8.2s-0.1,0.3-0.2,0.4l-6.2,6.2C7.6,14.8,7.4,14.9,7.3,14.9z"/></svg>');}
#content p span.arrow:hover:before{transform: scaleX(1.05);}
#content p span.arrow:before{content: '';display: block;width: 100%;background-color: #002449;transition: all .25s ease-in-out;position: absolute;bottom: -3px;height: 2px;left: 0px;transform: scaleX(0);transform-origin: left center; }
#content p span.arrow:hover:after{transform: scale(1.25);}
.grid{margin-top:64px}
.grid:after{display:block;content:'';clear:both;}
.flip-card {border: 0px Solid #1f2b4a; background: transparent; perspective: 1000px;perspective: 1000px;} 
.flip-card:nth-child(3n){margin-right:0px;}
.flip-card-inner {position: relative;width: 100%;height: 100%;text-align: center;transition: transform 0.8s, box-shadow 0.6s;transform-style: preserve-3d;}
.flip-card:hover .flip-card-inner {transform: rotateY(180deg);}
.flip-card-front, .flip-card-back {position: absolute;width: 100%;height: 100%;-webkit-backface-visibility: hidden;backface-visibility: hidden;}
.flip-card-front {background-color: transparent; }
.flip-card-front div.rotate{height:32px;width:32px;border:2px Solid #fff;border-top:none;border-right:none;position:absolute;top:0;right:0;padding:3px;z-index: 1;display: none;}
.flip-card-front div.rotate svg{fill:#fff;width:100%;}
/* .flip-card-front span{display:block;position:relative;top: 100%;transform: translateY(-50%);pointer-events:none;} */
.flip-card.active .flip-card-inner {transform: rotateY(180deg);}
.flip-card {min-height: 350px;}
#content .flip-card-back a.flipcheck{text-decoration:none;display:flex; row-gap: .3rem;flex-direction: column;height: 100%;justify-content: space-between;}
#content .flip-card-front span img {min-height: 350px;position: absolute;bottom: 0;}

/* flip card grid */

.grid{display: grid; grid-template-columns: 1fr 1fr 1fr;gap: 2rem;}


/* 20251030 - IDC CODE */
#content .cheers h2 {font-size:2.8rem;margin-bottom:0px}
#content .cheers h3 {font-size:2rem; font-weight:500;text-transform:uppercase;color: #fff;letter-spacing:3px;}

/* Front Card */
.front-image{width: 100%;height: 100%;position: relative;overflow: hidden;} 
.front-image::after{content: "";position: absolute;right: -20px;bottom: -20px;width: 120px;height: 120px;background-image: url("data:image/svg+xml;base64, PHN2ZyANCiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciDQogeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiDQogd2lkdGg9IjExMXB4IiBoZWlnaHQ9IjEwNnB4Ij4NCjxpbWFnZSAgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIxMTFweCIgaGVpZ2h0PSIxMDZweCIgIHhsaW5rOmhyZWY9ImRhdGE6aW1nL3BuZztiYXNlNjQsaVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0FBQUc4QUFBQnFDQU1BQUFDRjF2L2hBQUFBQkdkQlRVRUFBTEdQQy94aEJRQUFBQ0JqU0ZKTkFBQjZKZ0FBZ0lRQUFQb0FBQUNBNkFBQWRUQUFBT3BnQUFBNm1BQUFGM0NjdWxFOEFBQUJTbEJNVkVYLy8vOEFBQUFBQUFBQUFBQUFBQUI3SUM4QUFBQjdJQzhBQUFCN0lDOTdJQy9wUFZoN0lDL3BQVmpwUFZqcFBWanBQVmpwUFZqcFBWanBQVmpwUFZqcFBWanBQVmpwUFZqcFBWanBQVmpwUFZqcFBWanBQVmpwUFZqcFBWanBQVmpwUFZqcFBWanBQVmpwUFZqcFBWanBQVmpwUFZqcFBWanBQVmpwUFZqcFBWanBQVmpwUFZqcFBWanBQVmpwUFZqcFBWanBQVmpwUFZqcFBWanBQVmpwUFZqcFBWanBQVmpwUFZqcFBWanBQVmpwUFZqcFBWanBQVmpwUFZqcFBWanBQVmpwUFZqcFBWanBQVmpwUFZqcFBWanBQVmpwUFZqcFBWanBQVmpwUFZqcFBWanBQVmpwUFZqcFBWanBQVmpwUFZqcFBWanBQVmpwUFZqcFBWanBQVmpwUFZqcFBWanBQVmpwUFZqcFBWanBQVmpwUFZqcFBWanBQVmpwUFZqcFBWanBQVmpwUFZqcFBWanBQVmpwUFZqcFBWanBQVmpwUFZoN0lDL3BQVmg4SVM5Q0VSbi8vLzlHRjNBdEFBQUFhWFJTVGxNQUF3NGpRd0p0RjRkQ2hRZmlKbDhDdFJwUkFhaFZBN0lqYVFyWE81Y2ZheERrVHdpK1BnVTJCSjQxb0RtdFJoUEhoMVQzRkxSME45V1pZZnpGTFBZSm9sMHhGWUF6SE1nTW1GZEFNTzhrejdtbUVwcVNqaUdkVWlWYytYOFBGMEtGNGh0K3poWmk2M3lLUHRyTkFBQUFBV0pMUjBRQWlBVWRTQUFBQUFkMFNVMUZCK2tMQmcwaE1BMjZPRHNBQUFJTFNVUkJWR2pldmRWblUxTmhFSWJoVUtURkVGTG9MWkJ3T0FsRkNCSVZVQWlCRUZyb3Zha29aZVgvZithTE00N2pqT2R0dWZjSDdEV3o4K3h1S0lSV0hjdUY2bUd2QWZZYVdlNU5FK3MxdDdCZUsreTFzVjc0TGV0Rm5sbXZuZldpSGF3WEU5YUxzMTRpeVhveFliMU8xdXZxWnIwZVliMWUxdXZyWjcwQlFiM0VJT3NOQ2VzTnMxNXFoUFZHQmZYU0dkWWJFOVR6a3F3M0xxam5aMWt2SjZqblQ3RGVwS0JlZW9yMXBnWDEzczJ3M3F5Z1huNE85ZDdQQytvVkJQVStmR1M5VDRKNkM0dW9GMWtTMUpzVjFQdjhCZldXVndUMWlvSjZxNEo2cFF6cWVXdUNlbmxCdlhWQnZmSUc2bFUyaGZUOGdxRGVscURldHFEZXppN3FWZmVFOU1yN1FucWxBeUc5d3lNaHZkU3hrRjdxSkloejZpbHdMcjNEd0dFNjlVcEJVWEhybFE5VU9HZGVkVitKYytYdDdLbHhqcnp0WFVYT2llZHZxV3BPdkVwQm5YUGduVzVxY1BiZStvWU9aK3Q1ZVMzTjFpdXRhWEoyM21wR2w3UHhsb3ZhbW8xWFBUUGdqTDN3dWZKSmNlRmRhQzJkclZlNXZETGtUTHhvcnR0VU0vSEsxK2Fhdm5kVE5NdUptWmVlWHJMUzlEeC9jc3BTMC9IODNJUzFwdTU1NDFsN1RObExqeVh0S1dVdk5hci9CNHk5eE5Ed2lETXQwT3NiR0hTSUJYaGRQYjM5YnJYL2VJbFlwOFdaMVBTaXNiaXJRQVo3NFVoN1IyMndmNzNvN2QzWGJ6WEQvdmE4NzNmM1AycHAvZkc4bjdtSDdHT3RyZDllL0dsK3pyNlJ1dmVMckplV1Y0Q2NmSE5ud0psZ0FBQUFBRWxGVGtTdVFtQ0MiIC8+DQo8L3N2Zz4=");}
.present-1{background:url('../img/holiday2025/present-1.png') no-repeat;background-size: cover;background-position: center;aspect-ratio: 16 / 9;}
.present-2{background:url('../img/holiday2025/present-2.png') no-repeat;background-size: cover;background-position: center;aspect-ratio: 16 / 9;}
.present-3{background:url('../img/holiday2025/present-3.png') no-repeat;background-size: cover;background-position: center;aspect-ratio: 16 / 9;}
.present-4{background:url('../img/holiday2025/present-4.png') no-repeat;background-size: cover;background-position: center;aspect-ratio: 16 / 9;}
.present-5{background:url('../img/holiday2025/present-5.png') no-repeat;background-size: cover;background-position: center;aspect-ratio: 16 / 9;}
.present-6{background:url('../img/holiday2025/present-6.png') no-repeat;background-size: cover;background-position: center;aspect-ratio: 16 / 9;}
.present-7{background:url('../img/holiday2025/present-7.png') no-repeat;background-size: cover;background-position: center;aspect-ratio: 16 / 9;}
.present-8{background:url('../img/holiday2025/present-8.png') no-repeat;background-size: cover;background-position: center;aspect-ratio: 16 / 9;}
.present-9{background:url('../img/holiday2025/present-9.png') no-repeat;background-size: cover;background-position: center;aspect-ratio: 16 / 9;}



/* MEDIA QUERY */


@media (max-width: 1024px){
	#content main .container{padding:0 64px;}
	.garland-right{top: 0;width: 150px;}
	.foreground-text{padding-top:66px;}
	.garland-left, .garland-right-lower{display: none;}
	#content .container .foreground-text > h1 {letter-spacing:0;}
	#content .flip-card-back a > p:nth-child(3){font-size: .98rem;}
}

@media (max-width: 900px) {
	
	.flip-card-front span{overflow: hidden;height: 350px;top: 50%;}
	.grid{grid-template-columns: 1fr 1fr;padding:32px;}
	#content .container .foreground-text > h1  {font-size:2.5rem}
	span.cheers{font-size: 2.3rem;}
	.flip-card{min-height: 350px;}
	#content .flip-card-front span img{min-height: 350px;}
}

@media (max-width: 820px){
	#content .container .foreground-text > h1{display:block;max-width:calc(100% - 100px);}	
}


@media (max-width: 768px){
	/*
	.garland-right{width: 110px;}
	#content .container .foreground-text > h1, #content .cheers h2{font-size:2.3rem}
    #content .cheers h3 {font-size:1.75rem;}	
	*/
}

@media(max-width: 600px){
	.grid{grid-template-columns: 1fr;}
	.flip-card{min-height: 420px;}
	#content p span.arrow{font-size: 1.175rem;}
	#content .flip-card-back a > p:nth-child(2){font-size: 1.188rem;}
}

@media(max-width: 500px){
	.flip-card{min-height: 370px;}
}