@charset "utf-8";
/* CSS Document */

@media all {
	#mbox1 .fill {background-image:url(images/tengboo1.jpg)}
	#mbox2 .fill{background-image:url(images/bamboo1.jpg)}
	#mbox3 .fill {background-image:url(images/3i1.jpg)}
	#mbox4 .fill {background-image:url(images/interview2c.jpg)}

	/*main-pc*/
	#main {color:white}

	.slide, .slidecontainer, .thumb, .sliderail {height:100%;}
    .slide h3{
    	color:#000;
    }
	#main > div {
		float:left;
		padding-right:10px;
		overflow:hidden;
	}

	#main .blurb {display:block;position:absolute; top:25px; padding:10px 20px 10px 40px; text-shadow:0px 0px 25px black; width:60%;}

	#main .floater p {position:absolute; bottom:0px; font-size:15px; padding-top:10px;}
	#main .floater p a{color:white; }

	#main .floater .invday_link {font-weight: bold;}

	#subject #pov {display:none;}
	/*#subject #pov .fill {background-color:black; top:0px; opacity:0.7;}
	#subject #pov li:hover .fill {opacity:1;}
	#subject #pov h3 {position:absolute; top:15px;  text-align:center; width:100%;}
	#subject #pov li {width:33%;   height:60px; padding: 0px 2px 0px 0px; float:left;  cursor:pointer;}*/

	#subject .slide .fill {background-image:url(images/chess.jpg);}
	#subject .floater {padding:0px;}
	#subject .floater li{float:left; cursor:pointer; height:160px; }
	#subject .floater .fill{background-color:red; color:white; padding:10px; }
    #slide1 .fill {background-image:url('/images/RM99RM49.jpg');background-repeat: no-repeat;
    position: relative;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto}
	#slide2 .fill {background-image:url('');background-repeat: no-repeat;
    position: relative;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto}
	#slide3 .fill {background-image:url('/images/invday2016_highlights.jpg');background-repeat: no-repeat;
    position: relative;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto}



/*
	#slide1 .fill {background-image:url(images/2014invday.jpg); background-position:middle; background-size:100% auto; background-repeat:no-repeat;}
	#slide2 .fill {background-image:url(images/icivf.jpg);}
	#slide3 .fill {background-image:url(images/offer.jpg); background-position:top;}
    #slide4 .fill {background-image:url(images/agm.jpg);}
	#slide5 .fill {background-image:url(images/theedge.jpg);}
	#slide6 .fill {background-image:url(images/theedge2.jpg);}
    #slide7 .fill {background-image:url('https://webfiles.icapital.biz/banners/invday_funds_Banner.jpg');}
    #slide8 .fill {background-image:url('https://webfiles.icapital.biz/banners/20150824_bloomberg_small_funds.icapital.biz.jpg');}
	#slide9 .fill {background-image:url(images/article.jpg);}
	#slide10 .fill {background-image:url(/images/funds-banner-new-sg-add-2.jpg);}
	#slide11 .fill {background-image:url(/images/Channel-News-Asia.jpg);}
*/
	#sidebar .sliderail .slide{float:left;}
	#sidebar .floater{position:absolute; background-color:black;  background-color:rgba(0,0,0,0.8)}
	#sidebar h3 {width:100%;}
	#sidebar h2 {
		font-size:20px; margin-top:4px;}
	#sidebar h1 {
		font-size:36px;
	}

	.fill > a { text-decoration: none; color: white; }
	.fill > a:link { text-decoration: none; color: white; }
	.fill > a:hover { text-decoration: none; color: white; }
	.fill > a:active { text-decoration: none; color: white; }

	.floater a { text-decoration: none; }
	.floater a:link { text-decoration: none; }
	.floater a:link { text-decoration: none; }
	.floater a:hover { text-decoration: none; }
	.floater a:active { text-decoration: none; }

	/*overlay*/
	div#overlay {
		position: absolute;
		background-color: rgb(0, 0, 0);
		background-color: rgba(0, 0, 0, 0.4);
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	div#central-content {
		top: 20%;
		left: 50%;
		margin-left: -350px;
		width: 700px;
		height: 380px;
		position: fixed;
		background-color: #ffffff;
		z-index: 2;
		padding: 10px;
	}

	div#central-content div#overlay_banner {
		width: 100%;
		height: 340px;
	}

	div#central-content div#overlay_banner div#banner_img {
		width: inherit;
		height: inherit;
		background-image: url('https://webfiles.icapital.biz/static/images/promotion25/icap25_final_1.jpg');
		background-size: contain;
		background-repeat: no-repeat;
		position: relative;
	}

	div#central-content div#overlay_banner #promo_subscribe {
		display: inline-block;
		text-decoration: none;
		background-color: #000000;
		color: #ffffff;
		padding: 10px;
		margin-top: 42%;
		margin-left: 58%;
		font-size: 13px;
	}

	div#central-content div#continue_button {
		text-align: center;
		cursor: pointer;
	}

	div#central-content div#continue_button:hover {
		text-decoration: underline;
	}

	div#central-content div#close_button {
		text-align: right;
		margin-top: -385px;
		margin-right: -25px;
		z-index: 3;
		position: relative;
	}

	div#central-content div#close_button img {
		width: 5%;
		height: 5%;
	}
    /* ===== Home Popup Styles ===== */

.home-popup {
    /* Hidden by default - managed by JS */
    display: none; /* Start hidden, JS will show it */

    /* Overlay styles */
    position: fixed; /* Stay in place */
    z-index: 1000;   /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;     /* Full width */
    height: 100%;    /* Full height */
    overflow: auto;  /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.7); /* Darker overlay */

    /* Use Flexbox to center the content */
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-popup-content {
    background-color: #fefefe; /* Fallback if image fails, or for border */
    margin: auto;
    padding: 0; /* Remove padding to let image fill */
    border: 1px solid #888; /* Optional border */
    width: auto; /* Let image determine width up to max-width */
    max-width: 90%; /* Max width relative to viewport */
    max-height: 90vh; /* Max height relative to viewport height */
    border-radius: 5px; /* Optional rounded corners */
    position: relative; /* Needed for absolute positioning of the close button */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    animation: fadeIn 0.5s;
    overflow: hidden; /* Ensure image corners conform to border-radius */
}

/* Style for the image inside the popup */
.home-popup-content img {
    display: block; /* Remove extra space below image */
    width: 100%;    /* Make image fill the container width */
    max-width: 80vw; /* Example: Limit max image width */
    height: auto;   /* Maintain aspect ratio */
    max-height: 80vh; /* Limit max image height */
    object-fit: contain; /* Ensure image fits nicely if aspect ratios differ */
    border-radius: 5px; /* Match container's rounded corners if padding is 0 */
}

/* Close Button Styles */
.close-button {
    position: absolute;
    top: 5px;
    right: 10px;
    color: #333; /* Darker color for better visibility on potentially light images */
    font-size: 35px;
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent white background */
    border: none;
    border-radius: 50%; /* Make it circular */
    width: 35px;
    height: 35px;
    line-height: 30px; /* Adjust to vertically center 'x' */
    text-align: center;
    cursor: pointer;
    padding: 0;
    z-index: 10; /* Ensure button is above the image */
}

.close-button:hover,
.close-button:focus {
    color: #000;
    background-color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}

/* Simple fade-in animation */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Class to hide the popup (controlled by JS) */
.home-popup-hidden {
    display: none !important;
}
}

@media (min-height: 600px) {
	html, body, #container, #main {
		height:100%;
	}
}

@media (max-height: 600px) {
	html, body, #container, #main {
		/* height: 1050px; */
	}
}

@media (max-width: 850px ) {
	html, body, #container, #main {
		height:auto;
	}

	h3 { text-align:center; color:black; width:100%;}
	/*main-pc*/
	#main {height:auto;display: inline-block;}
	#main #subject {padding-right:0px;}
	#subject .slide {height:300px; padding-right:10px;}
	#subject .floater li{width:50%; padding: 10px 10px 0px 0px;}

	/*#subject #pov {position:absolute; top:10px; z-index:90; text-align:center;}
	#subject #pov li {width:50%; text-align:center;   height:60px; padding:10px 10px 0px 0px; clear:both; }	*/

	#sidebar {height:200px;}
	#sidebar h3 {position:absolute; top:10px;}

	#sidebar .slidecontainer {height:160px; top:30px;}
	#sidebar .floater {bottom:0px;}
	#sidebar .floater p {display:none;}
}


@media (max-width: 1350px ) {

	#sidebar h2 {
		font-size:20px; margin-top:4px;}
	#sidebar h1 {
		font-size:30px;
	}
	#sidebar .floater a{color: white;}
	#sidebar .floater a:hover{color: red;}


}

@media (min-width: 850px) {
	/*main-pc*/
	#main #subject, #main #sidebar, #main .slidecontainer, #main .slide {height:100%; min-height:270px; overflow:hidden;}

	#main .slide .fill {min-height:270px;}

	/*main-pc*/
	#main {
		top:-70px;
		padding: 41px 0px 156px 0px;
		overflow:hidden;
		/* padding: 70px 0 2px 0; */
		margin-bottom: -224px;
		margin-top: 40px;
	}

	#main #subject {width:75%;}
	#main #sidebar {width:25%;}

	#subject .floater {top:-80px; }
	#subject .floater li{width:20%;  padding-right:2px; height: 180px}
	#subject .floater li:hover{top:-100px;}
	#subject #pov {position:absolute; top:0px; z-index:90; text-align:center;}

	#sidebar .slidecontainer {}
	#sidebar h3 {
		position:absolute;
		box-sizing:border-box;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
		padding:10px;
		z-index:11;
	}
	#sidebar h3 img {display:block; float:right; padding-right:5px; z-index:15; vertical-align:central; opacity:0.8;}
	#sidebar h3 img:hover {opacity:1;}
	#sidebar .floater{height:150px; bottom:-120px; cursor:default;}
	#sidebar .floater a{color: white;}
	#sidebar .floater a:hover{color: red;}
	#sidebar .thumb{height:100%; min-height:270px; cursor:default;}
	#sidebar .thumb/*:hover*/ {top:-120px;}


	/*media-pc*/
	#media {/* top:-280px; *//* background: red;width: 100%;height: auto; */}
	#media1{width: 100%;height: auto; }
	#mbox1:hover .fill{background-image:url(images/tengboo1c.jpg);}
	#mbox2:hover .fill {background-image:url(images/bamboo1c.jpg);}
	#mbox3:hover .fill {background-image:url(images/3i1c.jpg);}
	#mbox4:hover .fill {background-image:url(images/interview2.jpg);}

	/*footer-pc*/
	#footer {
		/* top: 16px; */
		/* width: 100%; */
		/* height: auto; */
	}
}