/* CSS Document */
*{
	margin:0;
	padding:0;
	font-family: 'Dosis', sans-serif;
}

body{
	background-color:white;
	margin:0 auto;
	padding:0;
	width:960px;
	height:620px;
}
/* Header Section */
#header{
	background-color:#fff;
	height:100px;
	width:inherit;
	position:fixed;
	z-index:100;
}

#logo{
	height:inherit;
	float:left;
	width:218px;
}

#navigation{
	float:right;
	width:300px;
	height:100px;
	padding-top: 10px;
	
}
.btns{
position: relative;
float: right;
height: 75px;
margin-top: 8px;

}
.btnsback{
position:relative;
float:right;
width:200px;
height:25px;
margin-top: 17px;
margin-right: 32px;
background-color:#ECECEC;
border-radius:20px;
}
.btnsback img{
position: relative;
float: right;
height: 20px;
margin-top: 2px;
z-index:100;
cursor:pointer;

}
.hoverclass{
position:absolute;
width:69px;
height:25px;
background-color:#ccc;
border-radius:20px;
}
#contactwhite{
position: absolute;
left: 183px;
cursor:pointer;
}
/* End of Header section */
/* Content Section */
#mainContent{
	width:inherit;
	height:450px;
	padding-top:120px;
	background-color:#fff;
}
/* Home Page */
#homepage{
	display:block;
}
.contentPanel{
	width:80%;/*786px*/
	height:140px;/*467/3*/
	background-color:#fff;
	float:left;
	padding-left:60px;
}

.slider{
	position:relative;
	width:230px;/*314px*/
	float:left;
	height:inherit;
	background:#fff;
}

.slidewhow{
	width:90%;/*283px*/
	height:inherit;
}

.slider-item{
	width:inherit;
	height:inherit;
	padding-top:30px;
	padding-left:20px;
}

.slider-item>img{
	width:180px;
	height:100px;
}

.leftarrow{
	position:absolute;
	height: 23px;
	width: 22px;
	top: 68px;
	left: 4px;
    z-index:200;
}
.leftarrow img{
	height: 15px;
	width: 10px;
	position: absolute;
	cursor:pointer;
	opacity:0.1;
}
.leftarrow img:hover{
	opacity:0.6;
}

.rightarrow{
	position:absolute;
	height: 23px;
	width: 22px;
	left: 214px;
	top: 68px;
    z-index:200;
}
.rightarrow img{
	height: 15px;
	width: 10px;
	position: absolute;
	cursor:pointer;
	opacity: 0.1;
}

.rightarrow img:hover{
	opacity: 0.6;
}

.textblock{
    padding-top:37px;        	
	position:relative;
	float:left;
	width:496px;/*472*/
	height:inherit;
	margin-left: 40px;
	background-color:#fff;
	color:#4d4d4d;
}

.textblock label{
	font-size:20px;
	color:#4f4f4f;
}
.textblock p{
	font-size:14px;
	color:#484848;
}
/* ----------------------------------------------End of home page----------------------- */
/* ------------------------About us Page--------------------------------- */
#aboutuspage{
	display:none;
	width:960px;
	height:545px;
	z-index:10;
	left:3050px;
	font-size:14px;
	color:#484848;
}
#aboutPanel{
	width:960px;
	height:540px;
	display:inline;
}
#aboutBox{
	width:550px;
	height:220px;
	float:left;
	border-radius:20px;
	border:3px solid #ececec;
	padding:20px;
}

.listBox{
	width:250px;
	height:100px;
	margin-left:10px;
	float:left;
	border-radius:20px;
	border:3px solid #ececec;
	padding:20px;
}

.listBox ul{
	list-style:none;
}
/*---------------------------- End of About us page ------------------------------------------------*/
/* --------------------------------------Products Page --------------------------------------------------*/
#productpage{
	display: none;
	background:#fff;
	width: 960px;
	height: 545px;
	z-index: 20;
	left: 6100px;
}
#productPanel{
	height:550px;
	width:960px;
	display:inline;
}
#productNav{
	width:175px;
	height:540px;	
	float:left;
	position:relative;
}
.productNavButton{
	position:absolute;
	width:110px;
	height:110px;
	background:#FFF;
	border-radius:59px;
	left:30px;
	top:0px;
	z-index:10;
	border:4px solid #ececec;
	text-align:center;
	cursor:pointer;
}

.productNavButton:hover{
	border:6px solid #FFCC33;
	z-index:25;
	width:130px;
	height:130px;
	border-radius:75px;
	left: 15px;
	text-align:center;
}

.productNavButton:hover p{
	text-align:center;
	padding-left:15px;
	padding-top:55px;
	cursor:pointer;
}

.hoverPNB{
	border:6px solid #FFCC33;
	z-index:20;
	width:130px;
	height:130px;
	border-radius:75px;
	left: 15px;
	text-align:center;
}

.buttonName{
	padding-top:40px;
	padding-left:5px;
	width:100px;
	height:12px;
	text-align:center;
}

.hoverBN{
	text-align:center;
	padding-left:15px;
	padding-top:55px;
	cursor:pointer;
}

.pm{
	width:680px;
	height:400px;
	float:left;
	display:none;
	padding-top:30px;
}

.chemDesc{
	width:670px; 
	height:100px;
	position:relative;
	float:left;
	margin:3px;
	color:#4f4f4f;
	border:1px solid #ccc;
	border-radius:10px;
	webkit-border-radius:10px;
	moz-border-radius:10px;
	overflow:hidden;
}

.chemBoxContnr{
	height: 290px;
	width: 680px;
	position: relative;
	float: left;
}
/* --------------tiny scroll bar2-----------------------*/
#scrollbar2, #scrollbar3 {
	width: 678px;
	margin: 20px 0;
}
#scrollbar2 .viewport, #scrollbar3 .viewport {
	width: 675px;
	height: 265px;
	overflow: hidden;
	position: relative;
}
#scrollbar2 .overview, #scrollbar3 .overview {
	list-style: none outside none;
	width: 1416px;
	position: absolute;
	left: 0;
	top: 0;
	padding: 0;
	margin: 0;
}
#scrollbar2 .scrollbar, #scrollbar3 .scrollbar {
	background: transparent url(../images/bg-scrollbar-track-x1.png) repeat-x 0 0;
	position: relative;
	margin: 0 0 5px;
	clear: both;
	height: 15px;
}
#scrollbar2 .track, #scrollbar3 .track {
	background: transparent url(../images/bg-scrollbar-trackend-x1.png) no-repeat scroll 100% 0px;
	width: 100%;
	height: 15px;
	position: relative;
}
#scrollbar2 .thumb, #scrollbar3 .thumb {
	background: transparent url(../images/bg-scrollbar-thumb-x1.png) no-repeat scroll 100% 50%;
	height: 25px;
	cursor: pointer;
	overflow: hidden;
	position: absolute;
	left: 0;
	top: -9px;
}
#scrollbar2 .thumb .end, #scrollbar3 .thumb .end {
	background: transparent url(../images/bg-scrollbar-thumb-x1.png) no-repeat scroll 0px 50%;
	overflow: hidden;
	height: 25px;
	width: 5px;
}
#scrollbar2 .disable, #scrollbar3 .disable {
	display: none;
}


/* tiny scroll bar2 ends--------------*/
.chemBox{
	position:relative;
	float:left;
	width:217px;
	height:250px;
	margin:3px;
	color:#4f4f4f;
	border:1px solid #ccc;
	border-radius:10px;
	webkit-border-radius:10px;
	moz-border-radius:10px;
	overflow:hidden;
}

.chemBox img{
	margin-left:3px;
}

.chemBox p{
	text-align:center;  
	width:inherit; 
	font-size:12px; 
	font-weight:400;
}

.productBox{
	position:relative;
	float:left;
	width:170px;
	height:170px;
	background-color:#ffffff;
	margin:5px;
	border:1px solid #ccc;
	border-radius:10px;
	webkit-border-radius:10px;
	moz-border-radius:10px;
	font-family: 'Dosis', sans-serif;
	text-align:center;
	cursor:pointer;
}

.productBox span{
	position: absolute;
	top: 45px;
	left: 0;
	text-align: center;
	width: 150px;
}

.productBox:hover{
	border:1px solid #FC3;
}

.shutter{
	position:relative;
	float:left;
	display:none;
	width:170px;
	height:0px;
	background:#fc0;
	border-radius:10px;
	webkit-border-radius:10px;
	moz-border-radius:10px;
	font-family:'Dosis', sans-serif;
	z-index:30px;	
}

.shutter img{
	position:relative;
	float:left;
	width:0px;
	height:150px;
	border-radius:10px 10px 0px 0px;
	webkit-border-radius:10px 10px 0px 0px;
	moz-border-radius:10px 10px 0px 0px;
	font-family:'Dosis', sans-serif;
	z-index:35px;
	display:none;
}
.shutter p{
     position:relative;
	 float:left;
	 width:170px;
	 text-align:center;
	 line-height:16px;	
	 font-size:14px;
	 cursor:pointer;
	 display:none;
	 bottom:0;
}

.desc{
	position:relative;
	float:left;
	width:170px;
	height:150px;
	border-radius:10px 10px 0px 0px;
	webkit-border-radius:10px 10px 0px 0px;
	moz-border-radius:10px 10px 0px 0px;
}

.desc ul{
	list-style: none;
}

/*-------------------------------Scroll Bar Custom-------------------------------*/
/* Tiny Scrollbar */

#scrollbar1,#scrollbar4 {
	width: 675px;
	margin: 20px 0 10px;
}
#scrollbar1 .viewport,#scrollbar4 .viewport {
	width: 655px;
	height: 380px;
	overflow: hidden;
	position: relative;
}
#scrollbar1 .overview,#scrollbar4 .overview {
	list-style: none;
	position: absolute;
	left: 0;
	top: 0;
	padding: 0 0 0 40px;
	margin: 0;
}
#scrollbar1 .scrollbar,#scrollbar4 .scrollbar {
	background: transparent url(../images/bg-scrollbar-track-y1.png) no-repeat 0 0;
	position: relative;
	background-position: 0 0;
	float: right;
	width: 15px;
}
#scrollbar1 .track,#scrollbar4 .track {
	background: transparent url(../images/bg-scrollbar-trackend-y1.png) no-repeat 0 100%;
	height: 100%;
	width: 5px;
	position: relative;
	padding: 0 1px;
}
#scrollbar1 .thumb,#scrollbar4 .thumb {
	background: transparent url(../images/bg-scrollbar-thumb-y1.png) no-repeat 50% 100%;
	height: 20px;
	width: 17px;
	cursor: pointer;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: -5px;
}
#scrollbar1 .thumb .end,#scrollbar4 .thumb .end {
	background: transparent url(../images/bg-scrollbar-thumb-y1.png) no-repeat 50% 0;
	overflow: hidden;
	height: 5px;
	width: 17px;
}
#scrollbar1 .disable {
	display: none;
}

/*-----------------------------------end of scroll bar custom---------------------------*/

/* -----------------------------------------End of Products page------------------------------------------------*/
/* ----------------------------------------Contact us Page-------------------------------------------------------*/

#transBackground {
	display: none;
	position: absolute;
	z-index: 500000;
	top: 0px;
	left: 0px;
	opacity: .5;
	filter: alpha(opacity=20);
	background-color: #000000;
	width: 100%;
	height: 100%;
}

#contactContent {
	width: 945px;
	height: 440px;
	position: absolute;
	top: 18%;
	left: 15%;
	text-align: left;
	z-index: 6000000;
	background: #222222;
	border-radius:20px;
	padding: 5px 3px 20px 12px;
	color:#CCCCCC;
	display: none;
}

.close {
	position:absolute;
	top:10px;
	right:10px;
 	background:#999999;
	width:20px;
	height:20px;
	text-align:center;
	border-radius:10px;
	color: white;
	cursor: pointer;
	cursor: hand;
	float: right;
}

.close:hover{
	background:#000000;
}

#messageBox{
	position:relative;
	float:left;
	height: 400px;
	width: 450px;
	margin: 5px;
	margin-top: 20px;
	padding-top: 10px;
	line-height:1.7em;
}

#message{
	height:200px;
}

input, textarea{
	border-style:none;
	border-color:#333333;
	border-radius:10px;
	width:300px;
	height:20px;
	padding-bottom:5px;
	padding-left:5px;
}

button{
	border-style:none;
	border-color:#333333;
	border-radius:10px;
	width:75px;
	margin:10px;
}


#map{
	position:relative;
	float:left;
	height: 400px;
	width: 450px;
	margin: 5px;
	margin-top:40px;
	padding: 7px;
	border:medium;
	border-color:#000000;
}
/* ----------------------------------------End of Contact us Page-------------------------------------------------*/

/* ----------------------------------------footer section------------------------------------------ */
#footer{
	background-color:#FFFF00;
	height:100px;
	width:100%;
	position:absolute;
	bottom:0px;
	left:0px;
	z-index:1000;

}

#adress{
	position:absolute;
	bottom:0px;
	left:0px;
	height: 20px;
	width: 100%;
	z-index: 2000;
}
	
#stiker{
	position:absolute;
	bottom:80px;
	right:200px;
	z-index:10001;
}