@charset "UTF-8";
/* CSS Document */

@media only screen and (max-width: 360px){
#nav_wrapper {
    float: left;
    margin: 0 auto;
    width: 220px;
    height: 53px;
    padding: 2px 70px 0 70px;
    text-align: center;
    position: fixed;
    background-color: #7E9F98;
    z-index: 1;
}
    
#nav_wrapper_work {
    float: left;
    margin: 0 auto;
    width: 360px;
    height: 53px;
    padding: 2px 70px 0 70px;
    text-align: center;
    position: fixed;
    background-color: #7E9F98;
    z-index: 1;
}    

ul#navBar {
    float: left;
    width: 360px;
    height: auto;
    margin: 0;
	padding: 0;
    display: block;
    
	}
	
ul#navBar li {
    margin: 0;
	padding: 0;
	list-style:none;
	float:left;
	width: 55px;
	height: 48px;
    border: none;
    cursor: pointer;
	}


ul#navBar li:hover {
    opacity: 0.3;
}
}

/*MEDIA QUERIES*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* Small devices (361px to 480px) */

@media only screen and (min-width: 361px) and (max-width: 480px)
{
#nav_wrapper {
    float: left;
    margin: 0 auto;
    width: 220px;
    height: 53px;
    padding: 2px 70px 0 70px;
    text-align: center;
    position: fixed;
    background-color: #7E9F98;
    z-index: 1;
}
    
#nav_wrapper_work {
    float: left;
    margin: 0 auto;
    width: 361px;
    height: 53px;
    padding: 2px 70px 0 70px;
    text-align: center;
    position: fixed;
    background-color: #7E9F98;
    z-index: 1;
}    

ul#navBar {
    float: left;
    width: 361px;
    height: auto;
    margin: 0;
	padding: 0;
    display: block;
    
	}
	
ul#navBar li {
    margin: 0;
	padding: 0;
	list-style:none;
	float:left;
	width: 55px;
	height: 48px;
    border: none;
    cursor: pointer;
	}


ul#navBar li:hover {
    opacity: 0.3;
}
}


@media only screen and (min-width: 481px) and (max-width: 575px)
{
#nav_wrapper {
    float: left;
    margin: 0 auto;
    width: 221px;
    height: 53px;
    padding: 2px 130px 0 130px;
    text-align: center;
    position: fixed;
    background-color: #7E9F98;
    z-index: 1;
}
    
#nav_wrapper_work {
    float: left;
    margin: 0 auto;
    width: 481px;
    height: 53px;
    padding: 2px 130px 0 130px;
    text-align: center;
    position: fixed;
    background-color: #7E9F98;
    z-index: 1;
}    

ul#navBar {
    float: left;
    width: 481px;
    height: auto;
    margin: 0;
	padding: 0;
    display: block;
    
	}
	
ul#navBar li {
    margin: 0;
	padding: 0;
	list-style:none;
	float:left;
	width: 55px;
	height: 48px;
    border: none;
    cursor: pointer;
	}


ul#navBar li:hover {
    opacity: 0.3;
}
} 

/* Small devices (portrait tablets and large phones, 576px and up) 57%*/ 

@media only screen and (min-width: 576px) and (max-width: 767px) {
    
#nav_wrapper {
    float: left;
    margin: 0 auto;
    width: 220px;
    height: 53px;
    padding: 2px 178px 0 178px;
    text-align: center;
    position: fixed;
    background-color: #7E9F98;
    z-index: 1;
}
    
#nav_wrapper_work {
    float: left;
    margin: 0 auto;
    width: 576px;
    height: 53px;
    padding: 2px 178px 0 178px;
    text-align: center;
    position: fixed;
    background-color: #7E9F98;
    z-index: 1;
}    

ul#navBar {
    float: left;
    width: 576px;
    height: auto;
    margin: 0;
	padding: 0;
    display: block;
    
	}
	
ul#navBar li {
    margin: 0;
	padding: 0;
	list-style:none;
	float:left;
	width: 55px;
	height: 48px;
    border: none;
    cursor: pointer;
	}


ul#navBar li:hover {
    opacity: 0.3;
}
} 

/* Medium devices (landscape tablets, 768px and up) 75%*/

@media only screen and (min-width: 768px) and (max-width: 991px)
{
       
#nav_wrapper {
    float: left;
    margin: 0 auto;
    width: 220px;
    height: 53px;
    padding: 2px 274px 0 274px;
    text-align: center;
    position: fixed;
    background-color: #7E9F98;
    z-index: 1;
}
    
#nav_wrapper_work {
    float: left;
    margin: 0 auto;
    width: 768px;
    height: 53px;
    padding: 2px 274px 0 274px;
    text-align: center;
    position: fixed;
    background-color: #7E9F98;
    z-index: 1;
}    

ul#navBar {
    float: left;
    width: 768px;
    height: auto;
    margin: 0;
	padding: 0;
    display: block;
    
	}
	
ul#navBar li {
    margin: 0;
	padding: 0;
	list-style:none;
	float:left;
	width: 55px;
	height: 48px;
    border: none;
    cursor: pointer;
	}


ul#navBar li:hover {
    opacity: 0.3;
}
} 


/* Large devices (laptops/desktops, 992px and up) 97%*/

@media only screen and (min-width: 992px) and (max-width: 1024px)
{
       
#nav_wrapper {
    float: left;
    margin: 0 auto;
    width: 220px;
    height: 53px;
    padding: 2px 386px 0 386px;
    text-align: center;
    position: fixed;
    background-color: #7E9F98;
    z-index: 1;
}
    
#nav_wrapper_work {
    float: left;
    margin: 0 auto;
    width: 992px;
    height: 53px;
    padding: 2px 386px 0 386px;
    text-align: center;
    position: fixed;
    background-color: #7E9F98;
    z-index: 1;
}    

ul#navBar {
    float: left;
    width: 992px;
    height: auto;
    margin: 0;
	padding: 0;
    display: block;
    
	}
	
ul#navBar li {
    margin: 0;
	padding: 0;
	list-style:none;
	float:left;
	width: 55px;
	height: 48px;
    border: none;
    cursor: pointer;
	}


ul#navBar li:hover {
    opacity: 0.3;
}
} 

@media only screen and (min-width: 1024px){
          
#nav_wrapper {
    float: left;
    margin: 0 auto;
    width: 220px;
    height: 53px;
    padding: 2px 402px 0 402px;
    text-align: center;
    position: fixed;
    background-color: #7E9F98;
    z-index: 1;
}
    
#nav_wrapper_work {
    float: left;
    margin: 0 auto;
    width: 1024px;
    height: 53px;
    padding: 2px 402px 0 402px;
    text-align: center;
    position: fixed;
    background-color: #7E9F98;
    z-index: 1;
}    

ul#navBar {
    float: left;
    width: 1024px;
    height: auto;
    margin: 0;
	padding: 0;
    display: block;
    
	}
	
ul#navBar li {
    margin: 0;
	padding: 0;
	list-style:none;
	float:left;
	width: 55px;
	height: 48px;
    border: none;
    cursor: pointer;
	}


ul#navBar li:hover {
    opacity: 0.3;
}
}