/* --- Header --- */
header  { 
  width: 100%;
  z-index: 10000;
  position: fixed; 
  padding: 1em;
  -webkit-transition: all .25s ease-in-out;
  -moz-transition:    all .25s ease-in-out;
  -o-transition:      all .25s ease-in-out;
  -ms-transition:     all .25s ease-in-out;
  transition:         all .25s ease-in-out;   
}

header.fixed { 
  background: rgba(6,25,51,.85);
  padding: .5em;
}

header .max  { 
  max-width: 1400px;
  text-align: center;
  position: relative;
}

.logo {
	width: 200px;
  display: inline-block; 
  vertical-align: middle;
  -webkit-transition: all .25s ease-in-out;
  -moz-transition:    all .25s ease-in-out;
  -o-transition:      all .25s ease-in-out;
  -ms-transition:     all .25s ease-in-out;
  transition:         all .25s ease-in-out; 
}

.fixed .logo {
	width: 160px;
}

.logo svg { width: 100%; }

.logo svg path	{ 
  -webkit-transition: all .25s ease-in-out;
  -moz-transition:    all .25s ease-in-out;
  -o-transition:      all .25s ease-in-out;
  -ms-transition:     all .25s ease-in-out;
  transition:         all .25s ease-in-out;   
	}

.logo svg path.logo-orange 	{ fill: #d76930; }
.logo svg path.logo-other 	{ fill: white; }

.logo:hover svg path.logo-orange 	{ fill: #ff7e3c; }
.logo:hover svg path.logo-other 	{ fill: #54c5f6; }


@media only screen and (min-width: 1200px) and (min-device-width: 480px) {  
  header { 
    text-align: left;    
    padding: 2em;
  }
	header.fixed { 
	  padding: .75em;
	}
	.logo {
		width: 240px;
	  display: inline-block; 
	  vertical-align: middle;
	  -webkit-transition: all .25s ease-in-out;
	  -moz-transition:    all .25s ease-in-out;
	  -o-transition:      all .25s ease-in-out;
	  -ms-transition:     all .25s ease-in-out;
	  transition:         all .25s ease-in-out; 
	}
	.fixed .logo {
		width: 280px;
	}
}

@media only screen and (min-width: 1340px) and (min-device-width: 480px) {  
	.logo {
		width: 320px;
	}
	.fixed .logo {
		width: 240px;
	}
}



/* --- Mobile Button --- */

.mobile-menu { 
  background: transparent;
  width: 2em;
  height: 2em;  
  color: white;
  padding: 0 1.85em 0 0;
  border: 0; 
  display: inline-block;
  cursor: pointer; 
  position: absolute;
  right: .5em;
  top: .25em;
  z-index: 100000; 
}

.mobile-menu:active { color: #cdd4ec; }

.mobile-menu .label { 
  text-transform: uppercase;
  display: inline-block;
  font-size: 1.3em;
  font-weight: 400;
  font-family: bebas-neue, sans-serif;  
  -moz-transition:    all 0.25s ease-in-out;
  -o-transition:      all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
  transition:         all 0.25s ease-in-out;  
}

.expanded-menu .mobile-menu .label,
.fixed .mobile-menu .label {
  opacity: 0;
}

.mobile-menu .hamburger,
.mobile-menu .hamburger:after,
.mobile-menu .hamburger:before {
  background: #fff;  
  width: 1.5em;
  height: 3px;
  display: inline-block;
}

.mobile-menu:hover .hamburger,
.mobile-menu:hover .hamburger:after,
.mobile-menu:hover .hamburger:before {
    background: #53c5f5;
}

.mobile-menu .hamburger {
  background: rgba(255,255,255,1);
  display: block;
  position: absolute;
  right: 0;
  top: 46%;
  -moz-transition:    all 0.25s ease-in-out;
  -o-transition:      all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
  transition:         all 0.25s ease-in-out;		
}

.expanded-menu .mobile-menu .hamburger {
	background: rgba(255,255,255, 0); 
}

.mobile-menu .hamburger:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 8px;
  -moz-transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.mobile-menu .hamburger:after {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  -moz-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.expanded-menu .mobile-menu .hamburger:after {
  top: 0;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -moz-transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.expanded-menu .mobile-menu .hamburger:before {
  bottom: 0;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -moz-transition:    bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition:      bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition:         bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
  
.expanded-menu .mobile-menu .hamburger:after,  
.expanded-menu .mobile-menu .hamburger:before {
  background: #53c5f5;
}
  
@media only screen and (min-width: 1200px) {
  .mobile-menu { 
    display: none;
  }
}
  
  
/* ------ Primary ------ */

@media only screen and (max-width: 1200px)  {  
	.primary { 
	  background: rgba(6,25,51,.95);  
	  width: 100%;
	  height: 100vh;  
	  position: fixed;
	  right: 0;
	  top: 0;  
	  z-index: 100000;
	  visibility: hidden;
	  opacity: 0;
	  -webkit-transition: all .25s ease-in-out;
	  -moz-transition:    all .25s ease-in-out;
	  -o-transition:      all .25s ease-in-out;
	  -ms-transition:     all .25s ease-in-out;
	  transition:         all .25s ease-in-out;   
	}
	.expanded-menu .primary  { 
	  visibility: visible;
	  opacity: 1;  
	}
	nav.contact  { 
	  display: none;
	}
}

/* -- left -- */
  
header nav ul { 
  width: 80%;
  list-style: none;  
  margin: 0;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  -moz-transform:    translateX(-50%) translateY(-50%);
  -ms-transform:     translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform:         translateX(-50%) translateY(-50%);   
}

header nav li {
  display: block; 
  position: relative; 
}

header nav li a {
  display: block; 
  font-size: 200%;
  font-weight: 700;
  color: #53c5f5;
  padding: .9em .7em;
  position: relative; 
  text-transform: uppercase;
}

header nav.contact li:first-child {
  font-weight: 700;
  color: #53c5f5;
  padding: .9em .7em;
  position: relative; 
  text-transform: uppercase;
}

header nav li:hover a {
  color: #fff;
}

/* -- Navigation -- */

@media only screen and (min-width: 1200px) and (min-device-width: 480px) {  
  header nav  { 
    background: transparent;
    width: auto;
    max-width: 530px;
    height: auto;
    display: inline-block;
    position: absolute;
    top: 50%;
  	-moz-transform:    translateY(-50%);
  	-ms-transform:     translateY(-50%);
  	-webkit-transform: translateY(-50%);
  	transform:         translateY(-50%);   
    vertical-align: middle;
    padding: 0;
    visibility: visible;
    opacity: 1;      
    -webkit-transition: all .15s ease-in-out;
    -moz-transition:    all .15s ease-in-out;
    -o-transition:      all .15s ease-in-out;
    -ms-transition:     all .15s ease-in-out;
    transition:         all .15s ease-in-out; 
  }
  header.fixed nav { 
  }
  header .primary { 
  	right: auto;
    left: 0;
  }
  header .contact { 
    right: 0;
  }
  header nav ul { 
    width: auto;
    display: inline-block;
    vertical-align: middle;
    margin: auto;
    position: relative;
    left: auto;
    top: auto;
    -moz-transform:    none;
    -ms-transform:     none;
    -webkit-transform: none;
    transform:         none;     
  }
  header nav ul > li {
    display: inline-block;
    position: relative;
    padding: 0 .25em; 
  }  
  header nav li a {
    font-size: 100%;   
    letter-spacing: 1.5px;
    display: block;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition:    all .25s ease-in-out;
    -o-transition:      all .25s ease-in-out;
    -ms-transition:     all .25s ease-in-out;
    transition:         all .25s ease-in-out;    
  }
  header nav li:hover a {
    display: block;
  }    
}