.naviwrapper {
width:100%;
background-image: url(../images/navi-bg.png);
background-repeat:repeat-x;
background-position:bottom center;
height:150px;
}

.navi {

width:1200px;		
margin:0px auto;
padding:20px 0px 0px 0px;
font-family: 'Oleo Script Swash Caps', cursive, verdana;
font-weight:400;
font-size:28px;
line-height:30px;	
color:#ffffff;
letter-spacing:0px;
text-align:center;

text-shadow:#000000 1px 2px 0px;				
}


.navi li a{
margin:0px;

color:#ffffff;
text-decoration:none;
padding:20px 40px 0px 40px; 

-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;         
}



.navi li a:hover{
margin:0px 0px 0px 0px;

padding:20px 40px 0px 40px;
color:#78b422
;
text-decoration:none;            
}



.navi ul {
list-style-type: none;
padding:0px;
margin:0px; 
width:100%;

}
.navi li {
width:25%;
height:80px;
list-style-type: none;
padding:10px 0px 0px 0px;
margin:0px 0px 0px 0px;
display:inline;
text-align:center;
}


.navi a#current{
color:#78b422;

}






/* DIV navi for 1200px */

@media screen and (max-width:1200px) {

.naviwrapper {
width:100%;
background-image: url(../images/navi-bg.png);
background-repeat:repeat-x;
background-position:bottom center;
height:150px;
}

.navi {

width:1000px;		
margin:0px auto;
padding:20px 0px 0px 0px;
font-family: 'Oleo Script Swash Caps', cursive, verdana;
font-weight:400;
font-size:28px;
line-height:30px;	
color:#ffffff;
letter-spacing:0px;
text-align:center;

text-shadow:#000000 1px 2px 0px;				
}


.navi li a{
margin:0px;

color:#ffffff;
text-decoration:none;
padding:20px 30px 0px 30px; 

-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;         
}



.navi li a:hover{
margin:0px 0px 0px 0px;

padding:20px 30px 0px 30px;
color:#78b422
;
text-decoration:none;            
}



.navi ul {
list-style-type: none;
padding:0px;
margin:0px; 
width:100%;

}
.navi li {
width:25%;
height:80px;
list-style-type: none;
padding:10px 0px 0px 0px;
margin:0px 0px 0px 0px;
display:inline;
text-align:center;
}


.navi a#current{
color:#78b422;

}


}

/* END DIV transparent for 1200px */







/* DIV navi for 1000px */

@media screen and (max-width:1000px) {

.naviwrapper {
width:100%;
background-image: url(../images/navi-bg.png);
background-repeat:repeat-x;
background-position:bottom center;
height:150px;
}

.navi {

width:800px;		
margin:0px auto;
padding:20px 0px 0px 0px;
font-family: 'Oleo Script Swash Caps', cursive, verdana;
font-weight:400;
font-size:28px;
line-height:30px;	
color:#ffffff;
letter-spacing:0px;
text-align:center;

text-shadow:#000000 1px 2px 0px;				
}


.navi li a{
margin:0px;

color:#ffffff;
text-decoration:none;
padding:20px 20px 0px 20px; 

-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;         
}



.navi li a:hover{
margin:0px 0px 0px 0px;

padding:20px 20px 0px 20px;
color:#78b422
;
text-decoration:none;            
}



.navi ul {
list-style-type: none;
padding:0px;
margin:0px; 
width:100%;

}
.navi li {
width:25%;
height:80px;
list-style-type: none;
padding:10px 0px 0px 0px;
margin:0px 0px 0px 0px;
display:inline;
text-align:center;
}


.navi a#current{
color:#78b422;

}


}

/* END DIV transparent for 1000px */











/* DIV navi for 800px */

@media screen and (max-width:800px) {

.naviwrapper {
width:100%;
background-image: url(../images/navi-bg.png);
background-repeat:repeat-x;
background-position:bottom center;
height:150px;
}

.navi {

width:100%;		
margin:0px auto;
padding:20px 0px 0px 0px;
font-family: 'Oleo Script Swash Caps', cursive, verdana;
font-weight:400;
font-size:22px;
line-height:30px;	
color:#ffffff;
letter-spacing:0px;
text-align:center;

text-shadow:#000000 1px 2px 0px;				
}


.navi li a{
margin:0px;

color:#ffffff;
text-decoration:none;
padding:20px 20px 0px 20px; 

-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;         
}



.navi li a:hover{
margin:0px 0px 0px 0px;

padding:20px 20px 0px 20px;
color:#78b422
;
text-decoration:none;            
}



.navi ul {
list-style-type: none;
padding:0px;
margin:0px; 
width:100%;

}
.navi li {
width:25%;
height:80px;
list-style-type: none;
padding:10px 0px 0px 0px;
margin:0px 0px 0px 0px;
display:inline;
text-align:center;
}


.navi a#current{
color:#78b422;

}


}

/* END DIV transparent for 800px */