/* --- Header --- */
  
header  { 
   width: 100%;
   text-align: center;
   z-index: 1000;
   padding: 1em; 
   background: white;
   position: fixed; 
   -webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,.2);
   box-shadow: 0 0 20px 0 rgba(0,0,0,.2); }
  
header .wrap { 
	max-width: 1600px; 
	position: relative;
}

header .main-logo {
   width: 200px; 
   display: block; 
   margin: 0;
}
  
header .svg, header .main-logo img { width: 100%; }
 
@media only screen and (min-width: 740px)  {
   header .main-logo {
      margin: auto;
   }
}

@media only screen and (min-width: 1100px)  {
   #home header { 
      padding: 2.5em;
      -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; 
   }
   #home header .logo { 
      max-width: 250px;
      width: 250px;
      -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; 
   }
   #home header.fixed, header { 
      padding: .75em;
      background: white;
   }
   #home header.fixed .logo,
      header .logo { 
      max-width: 200px;
   }
}
  



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

.mobile-menu { 
  background: #263e74;
  color: white;
  width: 2.4em;
  height: 2.4em;
  padding: 0;
  border: 0; 
  display: block;
  position: absolute;
  right: .425em;
  top: .425em;
  cursor: pointer; 
  }
  
.mobile-menu:active { color: #60d4ff; }

.mobile-menu .menu { 
  background: white;
  width: 70%;
  height: 2px;
  display: block;
  position: relative; 
  }
  
.mobile-menu .menu:before,
.mobile-menu .menu:after { 
  background: white;
  width: 100%;
  height: 2px;  
  content: " ";
  position: absolute;
  left: 0; 
  -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; 
  }
  
.mobile-menu .menu:before { top: -8px; }
.mobile-menu .menu:after  { top: 8px; }
  
.mobile-menu:hover .menu:before { top: -10px; }
.mobile-menu:hover .menu:after  { top: 10px; }
    
.expanded .mobile-menu .menu:before { 
  top: -8px;
  -webkit-transform: translate3d(0px, 8px, 0px) rotate(-45deg) scale(1); 
  -moz-transform:    translate3d(0px, 8px, 0px) rotate(-45deg) scale(1); 
  -o-transform:      translate3d(0px, 8px, 0px) rotate(-45deg) scale(1); 
  -ms-transform:     translate3d(0px, 8px, 0px) rotate(-45deg) scale(1); 
  transform:         translate3d(0px, 8px, 0px) rotate(-45deg) scale(1); 
  }
  
.expanded .mobile-menu .menu:after { 
  top: 8px;
  -webkit-transform: translate3d(0px, -8px, 0px) rotate(45deg) scale(1); 
  -moz-transform:    translate3d(0px, -8px, 0px) rotate(45deg) scale(1); 
  -o-transform:      translate3d(0px, -8px, 0px) rotate(45deg) scale(1); 
  -ms-transform:     translate3d(0px, -8px, 0px) rotate(45deg) scale(1); 
  transform:         translate3d(0px, -8px, 0px) rotate(45deg) scale(1); 
  }
    
.expanded .mobile-menu .menu { background: transparent; } 
  
@media only screen and (min-width: 1100px) {
  .mobile-menu { display: none; }
  }
  


/* ------ Primary ------ */

header nav { 
  -webkit-transition: none;
  -moz-transition:    none;
  -o-transition:      none;
  -ms-transition:     none;
  transition:         none; 
  display: none; 
  }
  
nav.primary {  
  margin-top: 1em;
  }
  
/* -- left -- */
  
nav ul { 
  list-style: none;  
  width: 100%; 
  }
  
nav li.nav-facebook,
nav li.nav-twitter,
nav li.nav-instagram {
  display: inline-block;
  }

nav li a {
   display: block;
   text-transform: uppercase;  
   font-family: 'Barlow Condensed', sans-serif;
   font-size: 1.5em;
   font-weight: 800;
   color: #263e74;
   padding: .5em .65em;
   -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; 
}

nav li:hover a {
   background: #263e74;
   color: white;
}
  
nav li a:active { 
   background: #e93d33;
   color: white;
}  
  
nav li.nav-contribute a {   
   background: #AF190E; 
   color: white; 
   -webkit-border-radius: 100px;
   border-radius: 100px;
   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; 
}
   
nav li.nav-contribute a:hover {
   background: #2054A2;
}
  
nav li.icons a {   
   font-family: 'Trilogy-Icons';
   text-transform: none;
   padding-left: .25em;
   padding-right: .25em;
   -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; 
  }
  
  nav li.icons a:hover {
     background: none;
     color: #AF190E;
  }
 
  
/* -- Navigation -- */

@media only screen and (min-width: 1200px) {
  header nav,
  #home header nav { 
      background: transparent;
      display: block;
      position: absolute; 
      top: 17.5%;
   }
    
	nav.primary {  
	  margin-top: auto;
	  }
  
  nav,
  #home header.fixed nav { 
  	top: 17.5%;
    }
    
  nav.primary { 
    left: 0;
    }   
    
  nav.secondary { 
    right: 0;
    }   
    
   nav ul { 
    display: table;
    vertical-align: middle;
    text-align: right;
    }
    
  .fixed  header nav ul { 
    margin: 1.25em 0;  
    }
  
   nav ul > li {
    display: table-cell;
    position: relative;
    padding: 0 .1em; 
    }
    
   nav ul > li.nav-home {
    display: none; 
    }
    
   nav ul > li.nav-contribute {
    padding-left: 1.2em; 
    }
  
   nav li a {
    display: block;
    float: left; 
    padding: .4em 1em .4em; 
    }
  }

@media only screen and (min-width: 1300px) { 
   nav li a { 
      padding: .45em .9em; 
   } 
}

@media only screen and (min-width: 1400px) { 
  nav li a { 
     padding: .45em 1.2em .5em; 
  } 
}


/* Submenu
------------------------------------ */

.primary li ol { display: none; }

@media (min-width : 1100px ) {
  .primary ol { 
    background: #0070ac;
    list-style: none;
    width: 290px;
    margin: auto;
    padding: .5em;
    display: none;
    position: absolute; 
    left: -8px;
    top: 100%;
    z-index: 1;
    line-height: 1; 
    }
  .primary li:hover ol,
  .primary li.over ol { display: block; }
  .primary ol li {
    /*padding: 0 .25em;*/
    text-align: left; 
    /*float: none;*/
    display: block; 
    }
  .primary ol li a {
    
    width: 100%;
    /*height: auto;*/
    padding: .5em;
    display: block;
    font-size: 1.2em;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    /*float: none;   
    text-indent: 0;*/
    color: white;
    text-transform: capitalize;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition:    all .2s ease-in-out;
    -o-transition:      all .2s ease-in-out;
    -ms-transition:     all .2s ease-in-out;
    transition:         all .2s ease-in-out; 
    }
  .primary ol li a:hover { 
    padding-left: .75em;
    background-color: #007dbf !important;
    }
  .primary ol li a:active { 
    background-color: #5cc8de !important; 
    }
 }