/* RESPONSIVE WEBSITE CSS by Daniel Tiller */
/* http://www.mynameisdan.co.uk */
/* ==========================================================================
   RESPONSIVE MENU  STYLES
   ========================================================================== */

/* MOBILE MAGIC */
   
.MMenu a{
	color: #22a2d1;
	text-decoration: none;
	font-family: 'Open Sans', sans-serif;
	font-weight:bold;
	text-transform: uppercase;
}

nav{
	max-width: 1000px;
	margin: 0 auto;
}

a.menu-link {
    display: block;
    padding: 15px 0;
    text-align: center;
    width: 100%;
}
	
nav[role=navigation] {
	clear: both;
	-webkit-transition: all 0.3s ease-out;  
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

.js nav[role=navigation] {
	overflow: hidden;
	max-height: 0;
}

nav[role=navigation].active {
	max-height: 40em;
}

nav[role=navigation] ul {
	margin: 0;
	padding: 0;
	border-top: 1px solid #808080;
}

nav[role=navigation] li a {
	display: block;
	padding: 0.8em;
	border-bottom: 1px solid #808080;
}
		
.MMenu {
    background-color: #deebf1;
    display: block;
}
		
header {
	display: none;
}

/* DESKTOP MAGIC */

@media screen and (min-width: 50em) {
	
header{
	background-color: none;
	float: left;
	width: 100%;
	position: fixed;
	z-index: 10;
}

header, a, img, li{
	transition: all 1s;
	-moz-transition: all 1s; /* Firefox 4 */
	-webkit-transition: all 1s; /* Safari and Chrome */
	-o-transition: all 1s; /* Opera */
}   

img.logo{
	float: left;
}

header a {
    color: #ffffff;
    font-family: 'Open Sans',sans-serif;
    font-weight: lighter;
    text-decoration: none;
}

header a.active, header a:hover{
	color: #00cc66;
}

header li{
	display: inline;
	margin-right: 20px;
}

header ul {
    display: inline;
    float: right;
    list-style: none outside none;
    padding-top: 9px;
    width: 430px;
}	
	
a.menu-link {
	display: none;
}

.js nav[role=navigation] {
	max-height: none;
}

nav[role=navigation] ul {
	margin: 0 0 0 -0.25em;
	border: 0;
}

nav[role=navigation]  li {
	display: inline-block;
	margin: 0 0.25em;
}

nav[role=navigation] li a {
	border: 0;
}
			
.MMenu {
	display: none;
}
			
header {
	display: block;
}

/* Sizes for the bigger menu */
header.large {
    background-color: #000000;
    height: 80px;
    padding-top: 15px;
}

header.large img{
	width: 217px;
	height: 65px;
}

header.large li{
	margin-top: 26px;
}

/* Sizes for the smaller menu */
header.small{ 
	background-color: #000000;
	height: 62px; 
}

header.small img{ 
	width: 147px; 
	height: 44px; 
	margin-top: 10px; 
}

header.small li{ 
	margin-top: 0px; 
}  

}