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

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

body{
margin:0;
}

#sci,#tec,#bra,#tom,#abo{
width:20.5%;
border:2px solid #00CC00;
background-color:white;
float:left;
color:#269926;
font-size:126%;
font-family:consolas;
padding-bottom:.3%;
margin-right:-1%;

}

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

}

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

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

#loobsci,#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:hover,#bra:hover,#tom:hover,#abo:hover{
background-color:#67E667;
color:white;
cursor:pointer;
transition: 1s;
}

#navbaba{
width:100%;
margin-top:5%;
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;
}

#body{
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:Agency Fb;
}

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

.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;  
}