/* --- Header --- */
header  { 
  width: 100%;
   display: block;
  z-index: 1000;
  position: fixed;    
  padding: 2em 2em;
  text-align: center;
  -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;   
}

.interior header {
   background-color: #10142B;
}
.simple header {
   position: relative; }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .interior header{position: relative;}
}

@media only screen and (min-width: 740px) and (min-device-width: 480px) {  
   header  {   
	  padding: 2em 3em; 
	}
}

@media only screen and (min-width: 1000px) and (min-device-width: 480px) {  
   header  {   
     padding: 3em 3em; 
	}
}

@media only screen and (min-width: 1400px) and (min-device-width: 480px) {  
	header  {   
	  padding: 4em 4em; 
      /* display: grid;
		grid-template-columns: repeat(2, 1fr); */
	}
   
   .interior header {
      display: block;
   }
}

@media only screen and (min-width: 1600px) and (min-device-width: 480px) {  
   header  {   
	  padding: 4em 5em;  }
}

@media only screen and (min-width: 1800px) and (min-device-width: 480px) {  
   header  {   
     padding: 4em 8em;  }
}


header.fixed {
   background-color: #10142B;
  background-color: var(--blue);
}

@media only screen and (min-width: 740px) and (min-device-width: 480px) {  
   header.fixed  {   
	   
	}
}

@media only screen and (min-width: 1400px) and (min-device-width: 480px) {  
	header.fixed  {   
	   
	}
}

@media only screen and (min-width: 1600px) and (min-device-width: 480px) {  
   header.fixed  {   
	   
	}
}

@media only screen and (min-width: 1800px) and (min-device-width: 480px) {  
   header.fixed  {   
      
	}
}

@media only screen and (min-device-width: 1400px) {  
   .home header {
  }  
}


.logo {
   line-height: 1.0;
   text-transform: uppercase;
   max-width: 600px;
   display: block;
   text-align: center;
   margin: 0 auto;
   float: none; }

.interior .logo { margin: 0 auto; text-align: center; }

.logo strong {
   font-size: 1.0rem;
   color: var(--white);
   font-weight: 300;
   letter-spacing: .25rem;
   background: none;
   border: 1px var(--white) solid;
   vertical-align: middle;
   padding: .15em .5em;	
   display: inline-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; 
}

.logo span {
   font-size: 1.65rem;
   display: inline-block;
   color: var(--white);
   text-shadow: 0 0 10px rgba(var(--blue-rgb), .5);
   letter-spacing: .25rem;
   font-weight: 700;
   padding-left: .5rem;
   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; 
}

.logo svg { width: 340px; }

@media only screen and (min-width: 640px) and (min-device-width: 480px) {  
   .logo strong {
      font-size: 1.5rem;
    }
	.logo span {
		font-size: 2.55rem;
	} 
   .logo svg { width: 480px; }

}

@media only screen and (min-width: 800px) and (min-device-width: 480px) {  
	.logo strong {
      font-size: 2.0rem;
      border: 2px var(--white) solid;
      vertical-align: middle;
    }
	.logo span {
		font-size: 3.25rem;
      padding-left: 1rem;
      letter-spacing: .35rem;
      vertical-align: middle;
	}
   .logo svg { width: 600px; }

}

header.fixed .logo strong {
   font-size: 1.0rem;
}

header.fixed .logo span {
    font-size: 1.65rem;
}

@media only screen and (min-width: 800px) and (min-device-width: 480px) {  
	header.fixed .logo strong {
		font-size: 1.5rem;
	}
	header.fixed .logo span {
		font-size: 2.55rem;
	}
}

@media only screen and (min-width: 1100px) and (min-device-width: 480px) {  
   .logo {
      display: inline-block;
      margin: 0;
      text-align: left;
      float: left;}
   .simple .logo { float:  none; }
}