/* Custom sizes */

:root {
  --font-size-xxjumbo: 3.2rem;
  --line-height-xxjumbo: 3.6rem;
  --font-size-xjumbo: 2.2rem;
  --line-height-xjumbo: 2.5rem;
  --font-size-mini-jumbo: 1.6rem;
  --line-height-mini-jumbo: 1.8rem;
}

/* Animations */

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Containers */

body {
  background-color: white;
}

.section {
  padding: calc(var(--feather-grid-mega) * 2) 0;
}

.container {
  max-width: var(--feather-grid-page-width);
  margin: 0 auto;
}

/* Navigation wrapper */

nav {
	background-color: var(--tw-color-blue-primary);
	padding: var(--feather-grid-xsmall);
	width: 100%;
	position: fixed;
	z-index: 2;
	overflow-y: visible;
  }

/* Navigation title - web */

.nav-title {
  display: inline-block;
}

span.Icon--logo {
  color: white;
  position: absolute;
  top: calc(var(--feather-grid-xxsmall) * 1.5);
  left: var(--feather-grid-small);
}

a.home-link, a.nav-link {
  text-decoration: none;
}

a.home-link:link, a.home-link:visited, .home-text {
  color: white;
  font-weight: var(--feather-font-weight-bold);
  margin: 0;
  margin-right: var(--feather-grid-large);
  margin-left: var(--feather-grid-mega);
}

a.home-link:hover, a.home-link:active {
  color: var(--tw-color-blue-faded);
}

span.Icon--caretDown {
  color: white;
  display: none;
}

/* Navigation menu - web */

.nav-menu {
  display: inline-block;
  padding: 0;
  margin: 0;
}

.nav-list-item {
  display: inherit;
  margin-left: var(--feather-grid-large);
}

a.nav-link:link, a.nav-link:visited {
  color: white;
}

a.nav-link:hover, a.nav-link:active {
  color: var(--tw-color-blue-faded);
}

.home-link {
  display: inline-block;
}

.home-text {
  display: none;
}

#extra-mobile-link {
  display: none;
}

/* Headers */

.header, .footer {
  background-color: var(--tw-color-blue-primary);
  color: white;
}

.simple-header {
  padding-top: calc(var(--feather-grid-mega) * 3);
  padding-bottom: var(--feather-grid-mega);
}

.large-title {
  font-size: var(--font-size-xxjumbo);
  line-height: var(--line-height-xxjumbo);
}

/* Footer */

.footer {
  padding-top: var(--feather-grid-mega);
  padding-bottom: var(--feather-grid-mega);
}

.footer .Grid-cell {
  min-width: 180px;
}

a.foot-link {
  display: block;
  line-height: var(--feather-line-height-xlarge);
}

a.foot-link:link, a.foot-link:visited {
  color: white;
  text-decoration: none;
}

a.foot-link:hover, a.foot-link:active {
  color: var(--tw-color-blue-faded);
  text-decoration: none;
}

.footer-margin {
  margin-bottom: calc(var(--feather-grid-mega) * 1.25);
}

/* Margins */

.center-margin {
	margin-left: auto;
	margin-right: auto;
}

.same-mega-margin {
	margin-bottom: var(--feather-grid-mega);
}

.mega-margin {
	margin-bottom: var(--feather-grid-mega);
}

.large-margin {
	margin-bottom: var(--feather-grid-large);
}

.medium-margin {
	margin-bottom: var(--feather-grid-medium);
}

.small-margin {
	margin-bottom: var(--feather-grid-small);
}

.xsmall-margin {
	margin-bottom: var(--feather-grid-xsmall);
}

/* Text */

body {
	font-size: var(--feather-font-size-large);
	line-height: var(--feather-line-height-large);
}

.center-text {
	text-align: center;
}

.small-title {
	font-size: var(--font-size-xjumbo);
	line-height: var(--line-height-xjumbo);
}

br {
  line-height: var(--feather-line-height-xlarge);
}

/* Media queries */

/* Less than --feather-grid-page-width + (--feather-grid-mega * 2) */
@media (max-width: 1236px) {
  .container {
    margin: 0 var(--feather-grid-mega);
  }

  .large-title {
    font-size: var(--font-size-xjumbo);
    line-height: var(--line-height-xjumbo);
  }

  .small-title {
    font-size: var(--font-size-mini-jumbo);
    line-height: var(--line-height-mini-jumbo);
  }

  .mega-margin {
    margin-bottom: var(--feather-grid-large);
  }

  .large-margin {
    margin-bottom: var(--feather-grid-medium);
  }

  .medium-margin {
    margin-bottom: var(--feather-grid-small);
  }
}

@media (max-width: 800px) {
  .footer-margin {
    margin-bottom: var(--feather-grid-mega);
  }
}

/* Navigation - mobile */

@media (max-width: 650px) {

  /* Navigation menu - Unactivated */

  .home-text, a.nav-link:visited {
    margin-right: var(--feather-grid-xsmall);
  }

  span.Icon--caretDown {
    display: inline-block;
    transform: rotate(0deg);
  }

  span.Icon--caretDown:hover {
    color: var(--tw-color-blue-faded);
  }

  .nav-menu {
    display: none;
  }

  .nav-list-item {
    font-weight: var(--feather-font-weight-bold);
    font-size: var(--feather-font-size-jumbo);
    line-height: var(--feather-line-height-jumbo);
    padding: var(--feather-grid-medium) 0;
    margin: 0;
    border-bottom: 1px solid var(--tw-color-blue-faded);
  }

  .list-end {
    border-bottom: none;
  }

  /* Navigation menu - Activated */

  nav.active {
    height: 100vh;
    overflow-y: auto;
  }

  nav.active span.Icon--caretDown {
    transform: rotate(-180deg);
  }

  nav.active .nav-menu {
    display: block;
    margin-top: calc(var(--feather-grid-mega) * 2);
    margin-left: var(--feather-grid-medium);
    margin-right: var(--feather-grid-medium);
  }

  a.nav-link:link {
    -webkit-animation: fadein 1.5s;
    -moz-animation: fadein 1.5s;
    -ms-animation: fadein 1.5s;
    -o-animation: fadein 1.5s;
    animation: fadein 1.5s;
  }

  .home-link {
    display: none;
  }

  .home-text {
    display: inline-block;
  }

  #extra-mobile-link {
    display: block;
  }
}

/* Less than 600px */
@media (max-width: 600px) {
  .section {
    padding: calc(var(--feather-grid-mega) * 1.5) 0;
  }

  .container {
    margin: 0 var(--feather-grid-medium);
  }
}