#lahat{
width:100%;
background-color:black;
}

#nav{
width:100%;
background-color:white;
float:left;
margin-left:0%;
margin-right:-1%;
position:absolute;
}

body{
margin:0;
}

#sci,#tec,#bra,#tom,#abo{
width:24.8%;
border:1px solid #00CC00;
background-color:white;
float:left;
color:#269926;
font-size:126%;
font-family:consolas;
height:65px;
transition:2s;
}

#sci p,#tec p,#bra p,#tom p,#abo p{
margin-left:10%;
margin-top:6%;
}


#loobsci{
width:10%;
padding-bottom:2%;
margin-top:-6%;
margin-left:11%;
background-color:#00CC00;
margin-bottom:4%;
}

#loobtec,#loobbra,#loobtom,#loobabo{
width:10%;
padding-bottom:2%;
margin-top:-6%;
margin-left:11%;
background-color:#ffffff;
border:1px solid #00CC00;
margin-bottom:3.5%;
}


#sci{
border-bottom:2px solid white;
}

#tec:hover,#bra:hover,#tom:hover,#abo:hover{
background-color:#67E667;
color:white;
cursor:pointer;
transition: 1s;
}

#body{
width:100%;
position:absolute;
height:89.5%;
margin-top:68px;
}

#background{
overflow:hidden;
width:100%;
height:100%;
}

#background img{
width:100%;
float:right;
height:100%;
}

/* http://www.menucool.com */

#sliderFrame 
{
	margin-top:-550px;
	margin-left:25.5%;
    position:absolute;
    width:700px;
}

#slider, #slider div.sliderInner {
    width:700px;height:300px;/* Must be the same size as the slider images */
    border-radius: 12px;
}

#slider {
	background:#fff url(loading.gif) no-repeat 50% 50%;
	position:relative;
    transform: translate3d(0,0,0);
    box-shadow: 0px 1px 5px #999999;
}

/* the link style (if an image is wrapped in a link) */
#slider a.imgLink, #slider .video {
	z-index:2;
	position:absolute;
	top:0px;left:0px;border:0;padding:0;margin:0;
	width:100%;height:100%;
}
#slider .video {
	background:transparent url(video.png) no-repeat 50% 50%;
}

/* Caption styles */
#slider div.mc-caption-bg, #slider div.mc-caption-bg2 {
	position:absolute;
	width:440px;
	height:auto;
	padding:10px 0;/* 10px will increase the height.*/
	left:120px; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/
	bottom:10px;/*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:150px;*/
	z-index:3;
	overflow:hidden;
	font-size: 0;
}
#slider div.mc-caption-bg {
    /* NOTE: Its opacity is to be set through the sliderOptions.captionOpacity setting in the js-image-slider.js file.*/
	background:black;/* or any other colors such as White, or: background:none; */
	border:1px solid #9CEF6C;
	border-radius: 5px;

}
#slider div.mc-caption-bg2 {
    background:none;
}
#slider div.mc-caption {
	font:bold 15px Arial;
	color:white;
	z-index:4;
	text-align:center;
    background:none;
}
#slider div.mc-caption a {
	color:#FB0;
}
#slider div.mc-caption a:hover {
	color:#DA0;
}

#logo img{
position:absolute;
width:7%;
margin-top:-340px;
margin-left:30%;
z-index:1;
}


/* ------ built-in navigation bullets wrapper ------*/
/* Note: check themes\2\js-image-slider.css to see how to hide nav bullets */
#slider div.navBulletsWrapper  {
	top:320px;/* Its position is relative to the #slider */
	text-align:center;
	background:none;
	position:relative;
	z-index:5;
}

/* each bullet */
#slider div.navBulletsWrapper div 
{
    width:11px; height:11px;
    border:1px solid #AAA;
    background:#EEE;
    color:#AAA;
    font:normal 9px Arial;
    text-align:center;
    display:inline-block; *display:inline; zoom:1;
    overflow:hidden;cursor:pointer;
    margin:0 6px;/* set distance between each bullet*/
    border-radius:50%;
    box-shadow:inset 0 0 4px #AAA;
}

#slider div.navBulletsWrapper div.active {
    border-color:#53DF00;
    background:#9CEF6C;
    color:White;
}


/* --------- Others ------- */

#slider div.loading 
{
    width:100%; height:100%;
    background:transparent url(loading.gif) no-repeat 50% 50%;
    filter: alpha(opacity=60);
    opacity:0.6;
    position:absolute;
    left:0;
    top:0; 
    z-index:9;
}

#slider img, #slider>b, #slider a>b {
	position:absolute; border:none; display:none;
}

#slider div.sliderInner {
	overflow:hidden; 
	-webkit-transform: rotate(0.000001deg);/* fixed the Chrome not crop border-radius bug*/
	position:absolute; top:0; left:0;
}

#title img{
position:absolute;
margin-left:26%;
margin-top:-220px;
}

#slider>a, #slider video, #slider audio {display:none;}

#des{
position:absolute;
width:51%;
height:20%;
margin-top:-155px;
margin-left:26%;
text-align:center;
font-family:Trebuchet MS;
color:#58A72A
}



/* --------- 2nd page ------- */



#lahat{
width:100%;
background-color:black;
}

#nav1{
width:100%;
background-color:white;
float:left;
position:relative;
margin-left:0%;
margin-right:-1%;
position:fixed;
z-index:1;
}


#sci1,#tec1,#bra1,#tom1,#abo1{
width:25.7%;
border:2px solid #00CC00;
background-color:white;
float:left;
color:#269926;
font-size:126%;
font-family:consolas;
padding-bottom:.3%;
margin-right:-1%;
transition:2s;
}

#tec1{
border-bottom:3px solid white;

}

#sci1 p,#tec1 p,#bra1 p,#tom1 p,#abo1 p{
margin-left:10%;
margin-top:6%;
}

#loobtec1{
width:10%;
padding-bottom:2%;
margin-top:-6%;
margin-left:11%;
background-color:#00CC00;
margin-bottom:4%;
}

#loobsci1,#loobbra1,#loobtom1,#loobabo1{
width:10%;
padding-bottom:2%;
margin-top:-6%;
margin-left:11%;
background-color:#ffffff;
border:1px solid #00CC00;
margin-bottom:3.5%;
}

#sci1:hover,#bra1:hover,#tom1:hover,#abo1:hover{
background-color:#67E667;
color:white;
cursor:pointer;
transition: 1s;
}

#navbaba{
width:100%;
margin-top:80px;
background-color:white;
padding-bottom:2px;
font-size:126%;
font-family:consolas;
border-bottom:2px solid #00CC00;
float:left;
position:fixed;
z-index:1;
}

.q{
color:#078600;
}

#navbaba p{
text-align:center;
color:#00CC00;
}

#body1{
position:absolute;
margin-top:10%;
width:110%;
background-color:white;
margin-right:-1%;
}

.cont,.cont1{ width:20%; height:512px; float:left;}

.mask1 {
    position:relative;
    height:100%;
    width:100%;
    overflow:hidden;
    float:left;
}
.mask1 img {
    position:absolute;
    height:100%;
    left:-30%;
    margin-top:0%;
    margin-left:12%;
	opacity:0.8;
}

.caption1 {  
    background-color:#6EE768;  
    position: absolute;  
    color:#fff;  
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 4px 20px 4px 15px; 
    opacity: 0;
    -webkit-transition: all 500ms ease-out;  
    -moz-transition: all 500ms ease-out;  
    -o-transition: all 500ms ease-out;  
    -ms-transition: all 500ms ease-out;  
    transition: all 500ms ease-out;   
}  

.mask1:hover .caption1 {  
    opacity: 0.8;  
} 


.caption1 h3, .caption2 h3, .caption3 h3, .caption4 h3, .caption5 h3{
color:#fff;
font-size:350%;
font-family:Trebuchet MS;
}

.caption1 p, .caption2 p, .caption3 p,.caption5 p,.caption6 p{
color:#078600;
font-size:150%;
font-family:Trebuchet MS;
}

.mask2 {
    position:relative;
    height:100%;
    width:100%;
	padding-left:0;
    overflow:hidden;
    float:left;
	opacity:0.8;
}
.mask2 img {
    position:absolute;
    height:100%;
    left:-50%;
    margin-top:0%;
    margin-left:12%;
}

.caption2 {  
    position: absolute;  
    color:#1240ab;  
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 4px 20px 4px 15px;
    opacity: 0;
    -webkit-transition: all 500ms ease-out;  
    -moz-transition: all 500ms ease-out;  
    -o-transition: all 500ms ease-out;  
    -ms-transition: all 500ms ease-out;  
    transition: all 500ms ease-out;     
	background-color:#6EE768;  
}  

.mask2:hover .caption2 {  
    opacity: 0.8;  } 
	
.mask3 {
    position:relative;
	height:100%;
    width:100%;
    overflow:hidden;
    float:left;
	opacity:0.8;
}
.mask3 img {
    position:absolute;
    height:100%;
    left:-30%;
    margin-top:0%;
    margin-left:13%;
}

.caption3 {  
    position: absolute;  
    color:#1240ab;  
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 4px 20px 4px 15px;
    opacity: 0;
    -webkit-transition: all 500ms ease-out;  
    -moz-transition: all 500ms ease-out;  
    -o-transition: all 500ms ease-out;  
    -ms-transition: all 500ms ease-out;  
    transition: all 500ms ease-out;   
	background-color:#6EE768; 
}  

.mask3:hover .caption3 {  
    opacity: 0.8;  } 
.mask4 {
    position:relative;
	height:100%;
    width:100%;
    overflow:hidden;
    float:left;
	

.mask2 {
    position:relative;
    height:180px;
    width:240px;
    overflow:hidden;
    float:left;
    margin:15px;
}
.mask2 img {
    position:absolute;
    height:300px;
    width:400px;
    top:50%;
    left:50%;
    margin-top:-150px; /* half the height */
    margin-left:-200px; /*half the width */
}

.caption2 {  
    position: absolute;  
    color: #fff;  
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 4px 20px 4px 15px; 
    font-size:0.8em;
    opacity: 0;
    -webkit-transition: all 2s ease-out;  
    -moz-transition: all 2s ease-out;  
    -o-transition: all 2s ease-out;  
    -ms-transition: all 2s ease-out;  
    transition: all 2s ease-out;   
	background-color:#6EE768;  
}  

.mask2:hover .caption2 {  
    opacity: 1;  
}  
.mask3 {
    position:relative;
    height:180px;
    width:240px;
    overflow:hidden;
    float:left;
    margin:15px;
}
.mask3 img {
    position:absolute;
    height:300px;
    width:400px;
    top:50%;
    left:50%;
    margin-top:-150px;
    margin-left:-200px;
}

.caption3 {   
    position: absolute;  
    color: #fff;  
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 4px 20px 4px 15px; 
    font-size:0.8em;
    opacity: 0;
    -webkit-transition: all 2s ease-out;  
    -moz-transition: all 2s ease-out;  
    -o-transition: all 2s ease-out;  
    -ms-transition: all 2s ease-out;  
    transition: all 2s ease-out;   
	background-color:#6EE768; 
}  

.mask3:hover .caption3 { opacity: 1;  }



.mask5 {
    position:relative;
    height:100%;
    width:100%;
    overflow:hidden;
    float:left;
}
.mask5 img {
    position:absolute;
    height:100%;
    left:-30%;
    margin-top:0%;
    margin-left:-50%;
	opacity:0.1;
}

.caption5 {  
    position: absolute;  
    color:#fff;  
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 4px 20px 4px 15px; 
    opacity: 0;
    -webkit-transition: all 2s ease-out;  
    -moz-transition: all 2s ease-out;  
    -o-transition: all 2s ease-out;  
    -ms-transition: all 2s ease-out;  
    transition: all 2s ease-out;   
	background-color:#6EE768; 
}  

.mask5:hover .caption {  
    opacity: 0.8;  
} 

/* --------- 3rd page ------- */


/* --------- 4th page ------- */


/*-----5th-----*/



/*----- 6th ------*/