@charset "utf-8";
/* CSS Document */
*{
	margin: 0;
	padding:0;
}
body {
	text-align:center;
	margin-top:0px;
	background-color: #006699;
	background-image: url(../images/backgroundSliceJanuary.jpg);
	background-repeat: repeat-x;
	font-family:Arial, Helvetica, sans-serif;
	font-size: calc(13px + (15 - 13) * ((100vw - 300px) / (1600 - 300)));
	*font-size: 32px;
	background-position: top;
	scrollbar-base-color: red
}
#wrapper{
	width:100%;
	height:auto;
	}	
#pannel{
	width:100%;
	height:100px;
	*background:#069;
	margin:auto;
	}
#pannel_m{
	width:100%;
	height:40px;
	background:#069;
	margin:auto;
	}
#container{
	width:100%;
	height:auto;
	background:#CCC;
	margin:auto;
	border:double #FF0000;
	}
#container2{
    width: 100%;
    height: auto;
    background:#F8F8F8;
    -webkit-border-radius: 100% / 50%;
    -moz-border-radius: 100% / 50%;
    border-radius: 5% / 5%;
}
#oval {
    width: 100%;
    height: 50%;
    background: #E8E8E8;
    -webkit-border-radius: 100% / 50%;
    -moz-border-radius: 100% / 50%;
    border-radius: 100% / 10%;
}
#comment_bubble {
    width: 100%;
    height: auto;
    background: #FFFFFF;
    position: relative;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
}
* #comment_bubble:before {
    content: "";
    width: 0;
    height: 0;
    right: 100%;
    top: 38px;
    position: absolute;
    border-top: 13px solid transparent;
    border-right: 26px solid #088cb7;
    border-bottom: 13px solid transparent;
}
.main {
	margin: 0 auto;
	text-align: left;
	width: 100%;
	height:100%;
	*width: 1010px;
	*height:1100px;
	position:relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));
}
userProfileMain {
	width:950px;
}
/* CSS code for sub-window */
		.sub-window {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.sub-window-content {
			background-color: white;
			padding: 20px;
			border-radius: 25px;
			box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			max-width: 400px;
			width: 100%;
			max-height: 80%;
			overflow-y: auto;
		}

		.sub-window-close {
			position: absolute;
			top: 10px;
			right: 10px;
			font-size: 44px;
			cursor: pointer; border-radius: 15px;
		}

		.sub-window-close:hover {
			color: red; background-color:#EEE;
		}

.sideLogo {
	float: left;
	height: 360px;
	width: 327px;
	position: absolute;
	background-repeat: no-repeat;
	background-position: 0px 60px;
	left: -10px;
	top:120px;
}
.sidelogo2 {
text-align:center;
width:98%;
background-color:transparent;
}
.userProfileSide {
	background-image:url(../images/Buy-Sell-Rent-Property.png);
	background-position:2% 80%;
	width: 80%;
	top:2%; 
	height:12%; 
	*background-size: contain;

	background-size: 65% 99%;
	left: 0px; float: left;
position: absolute;text-align:center;
background-repeat: no-repeat;
}
.topLogos {
	width: 98%;
	position: relative;
	height:100%;
	top: 50%;
	*left: -31px; float: right;     padding: 1% 0% 1%;

}
.userProfileLogos {
	height:97px;
}
.topLogos1 {
	float: right;
	height: 100%;
	position: relative;  padding: 1% 1% 1%;

}
.topLogos2 {
	float: right;
	height: 100%;
	position: relative; padding: 1%;
}
.topLogos3 {
	float: right;
	height: 100%;
	position: relative; padding: 1%;
*top: 2%;
}
.navigation {
	background-image: url(../images/searchContent--JSP Bal height492px;:--.png);

	position: relative;
	height 500px;: 
	width: 703px;
	float: right;
	top: 88px;
}
.searchContent {
	background-image: url(../images/searchContent.png);
	position: relative;
	height: 100%;
	width: 100%;
	*float: right;
	*position: relative;
	*height: 433px;
	*width: 703px;
	*float: right;
	top: -58.8px;
	left: -13px;
	z-index: -1;
}
.navButtons {
	float: left;
	width: auto;
}
.buttons {
	top: 7px;
	left: 12px;
	position: relative;
}
.searchBox {
	
	float: left;
	height: 200px;
	*width: 455px;

	width: 100%;
	position: relative;
	top: 5px;
	left: 7px;

background-image: url(../images/BackgroundSliceSearchBok.jpg);
	background-repeat: repeat-xy;
border-width: 1px;
	border-style: solid;
	border-color:#808000;

box-shadow: 10px 10px 5px #888888;
}

*searchBox make change**************
*.searchBox {
*float: left;	height: 220%;	width: 100%;
*	*position: relative;
*	top: 2px;
*	left: 3px;

*background-image: url(../images/BackgroundSliceSearchBok.jpg);
*	background-repeat: repeat-xy;
*border-width: 2px;
*	border-style: solid;
*	border-color:#808000;

*box-shadow: 10px 10px 5px #888888;
*}

.advertisement {
	float: left;
	position: relative;
	left: 8px;
	top: -65px;
}
.searchText {
	position: relative;
	left: 5px; *left: 20%;
	top: 5px;
	width: 100%; *width: 400px;
	z-index: 100000; 	

}
input,select {
	border-width: 1px;
	border-style: solid;
	border-color:#DDEBEE;
	font-size: calc(14px + (15 - 14) * ((100vw - 300px) / (1600 - 300)));
	font-family: Arial, Helvetica, sans-serif;
	padding:3px;
}
.advSpace {
	position: relative;
	width: 670px;
	float: left;
	top: 40px;
	left: 15px;
	text-align: center;
}
.ContentBlocks {
	background-color: #FFFFFF;
	position: relative;
	width: 100%;
	*top: 700px;
	*display:table;
}
img {
	border-width:0px;
}
.errorMsg {
	color:#CC3333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: calc(11px + (13 - 11) * ((100vw - 300px) / (1600 - 300)));
	text-align:left;
}
.userOptions {
	background-color: #65B2CC;
	float: left;
	width: 190px;
	position: relative;
	top: 100px;
	padding: 5px;

}
.userContent {
	background-color: #FFFFFF;
	float: left;
	width: 980px;
	position: relative;
	top: 100px;
	left: 30px;
	min-height: 600px;
	width: 780px;
}
.contentArea {
	margin: 20px;
	position: relative;
}
.infoTable {
	font-size: calc(13px + (18 - 13) * ((100vw - 300px) / (1600 - 300)));
	font-family:Arial, Helvetica, sans-serif; /*color:#FFFFFF;*/
}
.infoTable tr td, .infoTable tr th  {
	border-width:1px;
	border-style:solid;
	border-color:#DDDDFF;
}
.infoTable tr th  {
	background-color:#EEE;
}
.infoTable tr.even td  {
	background-color:#FFF;
}
.infoTable tr.even td  {
	background-color:#EEE;
}
.proceedButton {
	position:relative; 
	float:right; 
	height:30px; 
	width:100px; 
	background-color:#666666; 
	color:#FFFFFF
}
.errorMsg {
	position: relative;
	float:left; 
	padding:10px; 
	font-family:Arial, Helvetica, sans-serif; 
	color:#999; 
	font-size: calc(13px + (15 - 13) * ((100vw - 300px) / (1600 - 300)));
	font-weight:bold
}
.errorMsgWide {
	position: relative;
	padding:10px; 
	font-family:Arial, Helvetica, sans-serif; 
	color:#999; 
	font-size: calc(13px + (15 - 13) * ((100vw - 300px) / (1600 - 300)));
	font-weight:bold
}
.registerButton {
	background-color:#BCDEFA;
	border:1px solid #666666;
	clear:both;
	color:#000000;
	font-weight: bold;
	height:30px;
	width:200px;
	position: relative;
}
.topMenuIcon {
	float: left;
	position: relative;
	*padding-left: 2%;
	*margin-top: 1%; padding:1% 1% 1%;
}
.topMenuIconVer2 {
	float: left;
	*margin:11px; padding:2% 1% 1%;
	*top:-4px;  	
	position: relative;
	font-size: calc(13px + (17 - 13) * ((100vw - 300px) / (1600 - 300)));
text-align:justify;

}
.menuButtonL {
	position: relative;
	height: 70px;
	width: 70px;
	text-align:center;
	padding: 1%;
	font-size: calc(9px + (15 - 9) * ((100vw - 300px) / (1600 - 300)));
	display:block;
	text-decoration: none;
	border-style:solid;
	border-width:1px;

}
.topMenuIcon a.menuButtonL:link{
	border-color:#8AB03a;
	background-color:#c8f894;
	text-decoration:none;
	color:#000000;
}
.topMenuIcon a.menuButtonL:visited {
	border-color:#8AB03a;
	background-color:#c8f894;
	text-decoration:none;
	color:#000000;
}
.topMenuIcon a.menuButtonL:hover {
	border-color:#9fd06a;
	background-color:#9fd06a;
	color:#FFFFFF;
}
.topMenuIcon a.menuButtonL:active {
	border-color:#C0Ebae;
	background-color:#AAEEAA;
	text-decoration:none;
	color:#000000;
}
.topMenuIconVer2 a.menuButtonL:link{
	border-color:#8AB03a;
	background-color:#c8f894;
	text-decoration:none;
	color:#000000;
}
.topMenuIconVer2 a.menuButtonL:visited {
	border-color:#8AB03a;
	background-color:#c8f894;
	text-decoration:none;
	color:#000000;
}
.topMenuIconVer2 a.menuButtonL:hover {
	border-color:#9fd06a;
	background-color:#9fd06a;
	color:#FFFFFF;
}
.topMenuIconVer2 a.menuButtonL:active {
	border-color:#C0Ebae;
	background-color:#AAEEAA;
	text-decoration:none;
	color:#000000;
}
.searchField {
	font-size: calc(13px + (20 - 13) * ((100vw - 300px) / (1600 - 300)));
	font-family:Arial, Helvetica, sans-serif;
	padding:1%;
	color:#666;
	*border: 1px solid #A6C9E2;

}
.searchField option {
	margin: 3px;
	margin-top: 2px;
	padding-top: 3px;
	border-top: 1px solid #CCC;
}
.content_area {
	top: calc(9px + (12 - 9) * ((100vw - 300px) / (1600 - 300)));;
	left: calc(9px + (10 - 9) * ((100vw - 300px) / (1600 - 300)));;
	position: relative;
	width: 98%;
	display:table;
}
.menuButtonSo {
	position: relative;
	height: 15px;
	width: 95px;
	text-align:center;
	padding: 5px;
	font-size: calc(9px + (12 - 9) * ((100vw - 300px) / (1600 - 300)));
	display:block;
	text-decoration: none;
	border-style:solid;
	border-width:1px;
	font-size: calc(9px + (21 - 9) * ((100vw - 300px) / (1600 - 300)));
}
.menuButtonSg {
	position: relative;
	height: 15px;
	width: 95px;
	text-align:center;
	padding: 5px;
	font-size: calc(12px + (18 - 12) * ((100vw - 300px) / (1600 - 300)));
	display:block;
	text-decoration: none;
	border-style:solid;
	border-width:1px;
	font-size: calc(9px + (21 - 9) * ((100vw - 300px) / (1600 - 300)));
}
.menuButtonSo * {
	position:relative;
	vertical-align:middle;
}
.menuButtonSg * {
	position:relative;
	vertical-align:middle;
}

a.menuButtonSo:link{
	border-color:#cdab59;
	background-color:#ffcf5d;
	text-decoration:none;
	color:#000000;
}
a.menuButtonSo:visited {
	border-color:#cdab59;
	background-color:#ffcf5d;
	text-decoration:none;
	color:#000000;
}
a.menuButtonSo:hover {
	border-color:#9f7b24;
	background-color:#9f7b24;
	color:#FFFFFF;
}
a.menuButtonSo:active {
	border-color:#C0Ebae;
	background-color:#f8b106;
	text-decoration:none;
	color:#000000;
}
a.menuButtonSg:link{
	border-color:#b7be4e;
	background-color:#f1f87b;
	text-decoration:none;
	color:#000000;
}
a.menuButtonSg:visited {
	border-color:#b7be4e;
	background-color:#f1f87b;
	text-decoration:none;
	color:#000000;
}
a.menuButtonSg:hover {
	border-color:#b7be4e;
	background-color:#b7be4e;
	color:#FFFFFF;
}
a.menuButtonSg:active {
	border-color:#C0Ebae;
	background-color:#f0ff00;
	text-decoration:none;
	color:#000000;
}

.city {

    margin: 5px;
    padding: 15px;
    width: device-width;
    height: 100%;
    border: 1px solid black;
	font-size: calc(13px + (20 - 13) * ((100vw - 300px) / (1600 - 300)));
}

************************************************slide show*************

.fadein { 
    position:relative; height:25%; width:100%; margin:0 auto;
    background: url("") repeat-x scroll left top transparent;
    padding: 5px;
     }
    .fadein img { position:absolute; left:5px; top:5px; }*absolute
**********************************************Slide show latest  start ************
*****************************************************slide show end****************
.inner {
	  max-width: 1000px;
	  margin: 0 auto;
	  padding: 0px 20px;
	  position: relative;
}
.logo {
	  text-decoration: none;
	  color: #777; width: 40%
	  font-weight: 80%;
	  font-size: 30%;
	  line-height: 40%;
}
*.logo {
	  text-decoration: none;
	  color: #777;
	  font-weight: 800;
	  font-size: 30px;
	  line-height: 40px;
}
h1 {
	  text-align: center;
	  *width: 100%;
	  *margin-top: 3%; padding:1% 3% 1%;
	  color: #808000;
	  *font-weight: 800;
	font-size: calc(13px + (20 - 13) * ((100vw - 300px) / (1600 - 300)));
}
h3 {
	  text-align: center;
	  *width: 100%;
	  *margin-top: 1%; padding:1% 0% 1%;
	  color: blue;
	  *font-weight: 800;
	font-size: calc(10px + (20 - 10) * ((100vw - 300px) / (1600 - 300)));
}
nav {
    position: fixed;
    top: 0;
    width: 100%;
    background: #069;
    padding: 10% 1%;
    z-index: 1000;
    text-align: center;
    }
.nav-toggle {
    display: none;
}

.nav-toggle-label {
    display: none;
    font-size: 32px;
    padding: 10px;
    cursor: pointer;
    color: #fff;
    background: #069;
    text-align: right;
    width: 100%;
    box-sizing: border-box;
}


.nav-menu {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

.nav-menu li {
    margin: 10px;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    padding: 5px 10px;
}
nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    padding: 5% 10%;
}

nav ul li a:hover {
    background: #005577;
    border-radius: 5px;
}

nav > ul {
  	float: right;
}

nav > ul > li {
  	text-align: center;
	  line-height: 40px;
	  *margin-left: 70px;margin-left: 40px;
}

nav > ul li ul li {
	  width: 100%;
  	text-align: left;
}

nav ul li:hover {
	  cursor: pointer;
	  position: relative;
}
nav ul li:hover > ul {
  	display: block;
}
nav ul li:hover > a {
	   color: orange; 
}
nav > ul > li > a {
	  cursor: pointer;
	  display: block;
  	outline: none;
  	width: 100%;
	  text-decoration: underline;
}

nav > ul > li {
  	float: left;
	font-size: calc(13px + (15 - 13) * ((100vw - 300px) / (1600 - 300)));
}
nav a {
	  color: white;
}
nav > ul li ul {
  	display: none;
  	position: absolute;
  	left: 0;
	  top: 100%;
  	width: 100%;
	  z-index: 2000;
}
nav > ul li ul li > a {
	  text-decoration: none;background-color:#2953a3;
}

*[type="checkbox"], label {
*	  display: none;
*}

@media screen and (max-width: 768px) {
    .nav-toggle-label {
        display: block;
        text-align: right;
    }
    .nav-menu {
        display: none;
        flex-direction: column;
        align-items: center; width: 100%;
    }
    .nav-toggle:checked + .nav-toggle-label + nav .nav-menu {
        display: flex;
    }
	nav ul {
		  display: none;
	}

	label {
  		display: block;
  		background: #222;
		  width: 40px;
  		height: 40px;
  		cursor: pointer;
		  position: absolute;
		  right: 20px;
  		top: 0px;
	}
  
    label:after{
      content:'';
      display: block;
      width: 30px;
      height: 5px;
      background: #777;
      margin: 7px 5px;
      box-shadow: 0px 10px 0px #777, 0px 20px 0px orange
    }

	*[type="checkbox"]:checked ~ ul {
  		*display: block;
  		*z-index: 9999;
  		*position: absolute;
		  *right: 20px;
		  *left: 20px;
	*}

	nav a {
		  color: #777;
	}

    /*	nav ul li {
		  display: block;
  		float: none;
  		width: 100%;
  		text-align: left;
  		background: #222;
		  text-indent: 20px;
	}*/

	nav > ul > li {
  		margin-left: 0px;
	}

	nav > ul li ul li {
  		display: block;
		  float: none;
	}
  
	nav > ul li ul {
		  display: block;
  		position: relative;
  		width: 100%;
		  z-index: 9999;
		  float: none;
	}
    h2 {
        width: 100%;
    	 margin-top: 2%; padding:1% 2% 1%;
    	font-size: calc(12px + (17 - 12) * ((100vw - 300px) / (1600 - 300)));
    }
	nav_jsp ul {
		  display: none;
	}

	label {
  		display: block;
  		background: #222;
		  width: 40px;
  		height: 40px;
  		cursor: pointer;
		  position: absolute;
		  right: 20px;
  		top: 0px;
	}
  
    label:after{
      content:'';
      display: block;
      width: 30px;
      height: 5px;
      background: #777;
      margin: 7px 5px;
      box-shadow: 0px 10px 0px #777, 0px 20px 0px orange
    }

    *	[type="checkbox"]:checked ~ ul {
    *  		display: block;
    *  		z-index: 9999;
    *  		position: absolute;
    *		  right: 20px;
    *		  left: 20px;
    *	}

	nav_jsp a {
		  color: #777;
	}

	nav_jsp ul li {
		  display: block;
  		float: none;
  		width: 100%;
  		text-align: left;
  		background: #222;
		  text-indent: 20px;
	}

	nav_jsp > ul > li {
  		margin-left: 0px;
	}

	nav_jsp > ul li ul li {
  		display: block;
		  float: none;
	}
  
	nav_jsp > ul li ul {
		  display: block;
  		position: relative;
  		width: 100%;
		  z-index: 9999;
		  float: none;
	}
}
/******************************Main menu end ********Original****************
************************2nd Menu JSP style start*****************/

.inner_jsp {
	  max-width: 1000px;
	  margin: 0 auto;
	  padding: 0px 20px;
	  position: relative;
}

.logo {
	  text-decoration: none;
	  color: #777; width: 40%
	  font-weight: 60%;
	  font-size: 20%;
	  line-height: 30%;
}
*.logo {
	  text-decoration: none;
	  color: #777;
	  font-weight: 800;
	  font-size: 30px;
	  line-height: 40px;
}
nav_jsp > ul {
  	float: right;
}

nav_jsp > ul > li {
  	text-align: center;
	  line-height: 40px;
	  *margin-left: 70px;margin-left: 40px;
}

nav_jsp > ul li ul li {
	  width: 100%;
  	text-align: left;
}

nav_jsp ul li:hover {
	  cursor: pointer;
	  position: relative;
}
nav_jsp ul li:hover > ul {
  	display: block;
}
nav_jsp ul li:hover > a {
	   color: orange; 
}
nav_jsp > ul > li > a {
	  cursor: pointer;
	  display: block;
  	outline: none;
  	width: 100%;
	  text-decoration: underline;
}

nav_jsp > ul > li {
  	float: left;
	font-size: calc(13px + (15 - 13) * ((100vw - 300px) / (1600 - 300)));
}
nav_jsp a {
	  color: white;
}
nav_jsp > ul li ul {
  	display: none;
  	position: absolute;
  	left: 0;
	  top: 100%;
  	width: 100%;
	  z-index: 2000;
}
nav_jsp > ul li ul li > a {
	  text-decoration: none;background-color:#2953a3;
}

*[type="checkbox"], label {
*display: none;
*}

***************************2nd menu jsp bal end***************************
#header{
	width:100%;
	height:50px;
	margin:auto;
	clear:both;
			*border:double #006633;
	}					
 #header #topmenu ul {
	margin:0;
	float:right;
	margin-right:0px;
	margin-top:12px; 			*border:double #FFCCFF;

	}
 #header #topmenu ul li {
	display:inline;
	padding-right:12px;
	padding:8px;
		*border:double #999900;

	}
 #header #topmenu ul li a {
	font:bold 15px Arial, Helvetica, sans-serif;
	color:#000;
	text-decoration:none;
	}
 #header #topmenu ul li a:hover {
	color:#00CCFF;
	}
/*#footer{
	width:100%;
	height:100%;
	margin-top:-35px;
	float:right;
	background:#036; *border:double #006633;
	}*/
footer {
    position: relative;
    bottom: 0;
    width: 100%;
    background: #036;
    padding: 15px;
    text-align: center;
    color: white;
}	
footer p {
    margin: 0;
}
#footer #bottommenu ul {
	margin-top:12px;
	}
	
#footer #bottommenu ul li {
	display:inline;
	padding-right:12px;
	padding:8px;
	
	}
	
 #footer #bottommenu ul li a {
	font: 15px Arial, Helvetica, sans-serif;
	color:#FFF;
	text-decoration:none;
	}
	
 #footer #bottommenu ul li a:hover {
	color:#00CCFF;
	}
.img{
	width:100%;
	height:auto;
	margin:auto;
	padding:3px;
	}
.frames{
	float: left;
    margin: 10px;
    padding: 15px;
    width: 40%;
    height: 300px;
    }

#menuButtonSo {
	position: relative;
	height: 15px;
	width: 95px;
	text-align:center;
	padding: 5px;
	font-size: 19px;
	display:block;
	text-decoration: none;
	border-style:solid;
	border-width:1px;
	font-size:11px;
}
#menuButtonSo * {
	position:relative;
	vertical-align:middle; 
}
#menuButtonSo ui-corner-all { -moz-border-radius: 5px; -webkit-border-radius: 5px; padding:1% 2% 1% 6%; font-size: calc(13px + (20 - 13) * ((100vw - 300px) / (1600 - 300)));
}

/*---------------------------responsive div in css-------------------------*/
	/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	*float:left;
		text-align: left;
	margin: 0 auto;

	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}

/*  GRID OF THREE  */
.span_100 {
	width: 98%;	*border:double #999900;
}

.span_80 {
	width: 80%;
background-color: #E8E8E8; margin-left:10%; margin-right:10%; margin-top:0%;margin-bottom:0%;*border:double #999900;
}
.span_77{
	width: 75%; *border:double #999900;
}
.span_60 {
	width: 58%;
}
.span_50 {
	width: 49%;
}
.span_15 {
	width: 20%; float:right; border:double #999900; 
}
.span_40 {
	width: 38%;*border:double #999900;
}
.span_30 {
	width: 29%; *border:double #999900;
}
.span_70 {
	width: 67%;	padding-right:2px; border:double #999900;
}
.span_99 {
	width: 99%; *border:double #999900;
}

.span_70sb {
	width: 67%; overflow:scroll;height:150px; scrollbar-shadow-color: #2D2C4D;scrollbar-highlight-color:#7D7E94;scrollbar-face-color: #000000;scrollbar-3dlight-color:#7D7E94;
}

.span_98{
        float: left;	height: 15%;	width: 98%;	position: relative;	top: 2px;	left: 3px;
        *background-image: url(https://prabandhaonline.com/images/BackgroundSliceSearchBok.jpg);	background-repeat: repeat-xy; 
        border-width: 2px; border-style: solid;	border-color:#808000; box-shadow: 10px 10px 5px #888888;
}
.span_98P{
        float: left;	height: 15%;	width: 98%;	position: relative;	top: 2px;	left: 3px;
        *background-image: url(https://prabandhaonline.com/images/BackgroundSliceSearchBok.jpg);	background-repeat: repeat-xy; 
        *border-width: 2px; *border-style: solid;	border-color:#808000; box-shadow: 10px 10px 5px #888888;
}
.span_10 {
        width: 10%; *border:double #999900;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col { margin: 1% 0% 1% 0%;}
	.span_100, .span_80, .span_40, .span_15, .span_10, .span_60, .span_50, .span_77, .span_98,.span_98P, .span_30, .span_70, .span_70sb, .span_99 { width: 100%; }
}
html {
    scroll-behavior: smooth;
}
.collapsible {
    cursor: pointer;
    padding: 10px;
    background-color: #069;
    color: white;
    border: none;
    text-align: left;
    width: 100%;
    font-size: 18px;
}

.content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

.collapsible:focus + .content, 
.collapsible:hover + .content {
    max-height: 200px;
}
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.gallery img {
    width: 100%;
    transition: transform 0.3s ease-in-out;
}

.gallery img:hover {
    transform: scale(1.1);
}
.image-container {
    position: relative;
    width: 300px;
}

.image-container img {
    width: 100%;
    display: block;
}

.image-container .overlay {
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    width: 100%;
    text-align: center;
    padding: 10px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.image-container:hover .overlay {
    opacity: 1;
}
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.image-grid img {
    width: 100%;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
}

.image-grid img:hover {
    transform: scale(1.05);
}