.star, footer, header, nav {
    display: block
}

.warning, p {
    letter-spacing: .01em
}

.btn-download, .download, .footer, .warning, h5 {
    text-align: center
}

.fl, body {
    overflow-x: hidden
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none
}

html {
    box-sizing: border-box
}

*, :after, :before {
    box-sizing: inherit
}

body {
    font-size: 16px;
    background: url(../img/FL_bg_base.png) repeat-y #0a0919;
    background-size: 100% auto;
    background-size: cover;
    -webkit-transform: scale(.95);
    -ms-transform: scale(.95);
    transform: scale(.95);
}

.no-js .resize, .resize {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.anim {
    -webkit-transition: all 1850ms cubic-bezier(.165, .84, .44, 1);
    transition: all 1850ms cubic-bezier(.165, .84, .44, 1)
}

::-moz-selection {
    color: #0a0919;
    background: #c5c7e5
}

::selection {
    color: #0a0919;
    background: #c5c7e5
}

img {
  max-width: 100%;
}

a, a:visited {
    color: #c5c7e5;
    text-decoration: underline
}

a:active {
    opacity: .65
}

a.link {
    text-decoration: none;
    color: #f5684e;
    padding-bottom: 4px
}

a.link:hover {
    border-bottom: 1px solid #8f3c2e
}

.fb_iframe_widget {
    top: -4px;
    margin-right: 14px
}

.delay {
    -webkit-animation-delay: 4s;
    animation-delay: 4s
}

.star {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -1px;
    margin-left: 50%;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    opacity: 1;
    box-shadow: 0 0 11px 6px rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .35);
    -webkit-animation: star 8s infinite ease-in-out;
    animation: star 8s infinite ease-in-out
}

.brand, .brand-logo-faf, .brand-logo-pax, .btn-con {
    float: left;
    display: block;
    position: relative
}

#st-1 {
    margin-top: -50px;
    margin-left: -340px
}

#st-2 {
    margin-top: 90px;
    margin-left: 420px
}

#st-3 {
    margin-top: 580px;
    margin-left: -500px
}

#st-4 {
    margin-top: 640px;
    margin-left: 100px
}

#st-5 {
    margin-top: 950px;
    margin-left: 300px
}

#st-6 {
    margin-top: 1190px;
    margin-left: 400px
}

#st-7 {
    margin-top: 1390px;
    margin-left: -500px
}

#st-8 {
    margin-top: 1520px;
    margin-left: -400px
}

#st-9 {
    margin-top: 1650px;
    margin-left: 500px
}

#st-10 {
    margin-top: 1820px;
    margin-left: 400px
}

#st-11, #st-12 {
    margin-left: -300px
}

#st-11 {
    margin-top: 1850px
}

#st-12 {
    margin-top: 1740px
}

.brand {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 40px;
}

.brand-logo-pax {

}

.brand-logo-faf {
    width: 225px;
    margin-left: 0;
    height: 100%;
    background: url(../img/logo-faffinabout.png) no-repeat;
    background-size: 225px 56.25px
}

.bg-end, .bg-top, .btn-con, .btn-download, .download, .fl, .logo {
    width: 100%
}

.btn-con {
    height: 60px;
    margin: 50px 0 100px
}

.btn-download,
.btn-submit {
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: 320px;
    height: 100%;
    border-radius: 3px;
    border: 1px solid RGB(169, 0, 150);
    background: RGB(169, 0, 150);
    background:  -webkit-linear-gradient(RGB(222, 0, 220) 0, RGB(169, 0, 155) 80%);
    background: linear-gradient(RGB(222, 0, 220) 0, RGB(169, 0, 155) 80%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f56d56', endColorstr='#e63c63', GradientType=0);

    transition: all 500ms;
}

.btn-download.inactive {
  border: 0;
  opacity: 0.6;

  pointer-events: none;
}

.btn-download.inactive span {
  height: 100%;
  margin-top: 0;
  padding-top: 15px;

  background: rgba(0,0,0,0.5);
}

.bg-end, .bg-transition, .logo, .warning {
    display: block;
    position: relative
}

.btn-download:hover,
.btn-submit:hover {
    background: RGB(169, 0, 150);
    background:  -webkit-linear-gradient(RGB(222, 0, 220) 0, RGB(169, 0, 155) 80%);
    background: linear-gradient(rgb(217, 62, 215) 0, RGB(222, 0, 220) 80%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff9787', endColorstr='#e63c63', GradientType=0)
}

.btn-download:active,
.btn-submit:active {
    background: RGB(169, 0, 150);
    background:  -webkit-linear-gradient(RGB(222, 0, 220) 0, RGB(169, 0, 155) 80%);
    background: linear-gradient(rgb(217, 62, 215) 0, RGB(222, 0, 220) 80%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f56d56', endColorstr='#e63c63', GradientType=0)
}

p {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-weight: 400;
    font-size: 1em;
    line-height: 2;
    color: #c5c7e5;
    max-width: 640px;
    margin: 0 auto 1.25em
}

p:first-of-type {
    /*text-indent: 2em*/
}

p.no-indent {
    text-indent: 0
}

p.social {
    margin-top: 1em
}

.date, .download, .footer, .warning, h1, h2, h3, h4, h5, h6, a.navlink, li {
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    color: #e7e8ff
}

.warning {
    font-size: .95em;
    font-weight: 300;
    color: #a3a5c7;
    margin-top: 75px
}

.date, .download {
    font-weight: 700
}

.download {
    font-size: 1em;
    line-height: 1.75;
    text-transform: uppercase;
    letter-spacing: .085em;
    color: #f7f8ff;
    margin: 15px auto 0;
    display: block;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .25)
}

.navlink {
  font-weight: 900;
  font-size: 1em;
  text-transform: uppercase;
  color: #f7f8ff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .25);
}

h5, h6 {
    margin-bottom: 1.25em
}

.date {
    padding-right: 10px;
    font-size: .8em
}

h1 {
    font-weight: 100;
    font-size: 1.8em;
    line-height: 1.55;
    letter-spacing: -.01em
}

.title {
    font-weight: 700
}

.title-alt {
    font-style: italic
}

h5 {
    font-weight: 700;
    font-size: 1.05em;
    line-height: 1.75;
    text-transform: uppercase;
    letter-spacing: .2em;
    margin-top: 3em
}

.footer, h6 {
    font-weight: 700;
    line-height: 1.75;
    text-transform: uppercase;
    letter-spacing: .25em
}

h6 {
    font-size: .95em
}

.footer {
    font-size: .65em;
    display: block;
    margin-top: 240px
}

.bg-end {
    height: 100%;
    background: url(../img/FL_bg_end.png) bottom no-repeat;
    background-size: 100%;
    z-index: 0;
    position: absolute;
    bottom: 0;
}

.bg-transition {
    position: absolute;
    bottom: 0;
    height: 140vw;
    width: 100%;

    background: rgba(11, 12, 33, 0);
    background: -webkit-linear-gradient(RGBA(18, 20, 33,0), RGBA(18, 20, 33, 1));
    background: linear-gradient(RGBA(18, 20, 33,0), RGBA(18, 20, 33, 1));
    background: linear-gradient(to bottom)
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#0b0c21', endColorstr='#0a0919', GradientType=0);
    z-index: 0;

    /* 1.53 */
}

.logo {
    margin: 15px auto 0;
    height: auto
}

.logo img {
  width: 100%;
  margin-left: -15px;
}

.bg-top {
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    height: 100%;
    background: #292666;
    -webkit-animation: fadeBG 12s infinite ease-in-out;
    animation: fadeBG 12s infinite ease-in-out;
    z-index: 2
}

.fl, .fl-full, .fl-half, .fl-third, .trailer-con {
    position: relative;
    display: block
}

.fl {
    float: left;
    max-width: 100%;
    height: auto;
    padding: 30px 60px;
    z-index: 3
}

header.fl {
    padding-bottom: 0
}

.fl-half {
    float: left;
    width: 50%
}

.fl-third {
  float: left;
  width: 33%;
}

.credits.fl-third:nth-of-type(3n + 1) {
  clear: both;
}

.fl-full {
    margin: 0 auto;
    width: 100%;
    max-width: 740px;
    height: auto
}

.fl-intro {
    max-width: 740px
}

.trailer-con {
    width: 100%;
    float: left;
    padding-bottom: 56.25%;
    overflow: hidden;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, .25)
}

.trailer-con embed, .trailer-con iframe, .trailer-con object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.bg-color, .figure-hero, .figure-shadow {
    position: relative;
    display: block;
    float: left
}

.figure-hero {
    width: 500px;
    left: 50%;
    margin-left: -250px;
    margin-top: -500px;
    height: 300px;
    background: url(../img/figure.png) 50% 50% no-repeat;
    background-size: 50% auto;
    z-index: 2;
    -webkit-animation: hero 4s infinite ease-in-out;
    animation: hero 4s infinite ease-in-out
}

.figure-shadow {
    width: 100px;
    height: 30px;
    border-radius: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -130px;
    border: 1px solid red;
    background: #0d0c1c;
    z-index: 1;
    opacity: .25;
    -webkit-filter: blur(8px);
    filter: blur(8px);
    -webkit-animation: shadow 4s infinite ease-in-out;
    animation: shadow 4s infinite ease-in-out
}

.bg-color {
    width: 100%;
    height: 600px;
    margin-top: -600px;
    background: rgba(149, 9, 111, 0);
    background: -webkit-linear-gradient(top, rgba(149, 9, 111, 0) 0, rgba(0, 11, 172, 1) 100%);
    background: linear-gradient(to bottom, rgba(149, 9, 111, 0) 0, rgba(0, 11, 172, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#95096f', endColorstr='#000bac', GradientType=0);
    z-index: 2;
    -webkit-animation: fadeBG 8s infinite ease-in-out;
    animation: fadeBG 8s infinite ease-in-out
}

@media (max-device-width:720px) {
    .star {
        display: none
    }
}

@media (max-width:720px) {
    .fl-half {
        width: 100%
    }
    .fl-third {
      width: 50%;
    }
    .fl-third:nth-child(3n + 1) {
      clear: none;
    }
    .fl-third:nth-child(2n + 1) {
      clear: both;
    }
    .brand {
        margin-bottom: 25px;
        margin-top: 35px
    }
    .brand-logo-faf {
        margin-right: 20px
    }
    .btn-con {
        margin: 40px 0 80px
    }
    .brand-logo-pax {
        margin-top: -40px
    }
}

@media (max-width:520px) {
    .brand-logo-pax {
        margin-top: -60px
    }
    .figure-hero {
        width: 320px;
        margin-left: -160px;
        overflow: hidden
    }
    .fl {
        padding: 20px 30px
    }
    p {
        font-size: .9em;
        text-indent: 1em
    }
    h1 {
        font-size: 1.25em;
        letter-spacing: .01em
    }
    .download, h5 {
        font-size: .9em
    }
    .warning, h6 {
        font-size: .75em
    }
    .download {
        margin: 12px 0 0
    }
    .btn-con {
        height: 50px
    }
    .warning {
        margin-top: 60px
    }
    h6 {
        margin-bottom: .5em
    }
    .logo {
        margin-top: 10px;
        width: 220px
    }
}

@-webkit-keyframes star {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 11px 6px rgba(255, 255, 255, .25);
        background: rgba(255, 255, 255, .35)
    }
    50% {
        opacity: .65;
        box-shadow: 0 0 11px 3px rgba(255, 255, 255, .55);
        background: rgba(255, 255, 255, .45)
    }
}

@keyframes star {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 11px 6px rgba(255, 255, 255, .25);
        background: rgba(255, 255, 255, .35)
    }
    50% {
        opacity: .65;
        box-shadow: 0 0 11px 3px rgba(255, 255, 255, .55);
        background: rgba(255, 255, 255, .45)
    }
}

@-webkit-keyframes fadeBG {
    0%, 100% {
        opacity: 0
    }
    50% {
        opacity: .35
    }
}

@keyframes fadeBG {
    0%, 100% {
        opacity: 0
    }
    50% {
        opacity: .35
    }
}

@-webkit-keyframes hero {
    0%, 100% {
        margin-top: -400px
    }
    50% {
        margin-top: -370px
    }
}

@keyframes hero {
    0%, 100% {
        margin-top: -400px
    }
    50% {
        margin-top: -370px
    }
}

@-webkit-keyframes shadow {
    0% {
        margin-top: -130px;
        height: 30px;
        opacity: .25
    }
    50% {
        margin-top: -135px;
        width: 80px;
        margin-left: -40px;
        height: 10px;
        opacity: .65
    }
    100% {
        width: 100px;
        margin-left: -50px;
        height: 30px;
        opacity: .25
    }
}

@keyframes shadow {
    0% {
        margin-top: -130px;
        height: 30px;
        opacity: .25
    }
    50% {
        margin-top: -135px;
        width: 80px;
        margin-left: -40px;
        height: 10px;
        opacity: .65
    }
    100% {
        width: 100px;
        margin-left: -50px;
        height: 30px;
        opacity: .25;
    }
}


/* MailChimp form styles */

#mc_embed_signup {
  margin: 45px 0px;
  padding-bottom: 10px;
  background: rgba(0,0,0,0);
  clear: left;
  font: 16px 'Open Sans',Arial,sans-serif;
  color: #fff;

  border: 2px solid #fff;
  border-radius: 5px;
}

.submit {
  text-align: center;
  margin-top: 10px;
}

.btn-submit {
  position: static;
}

/* Nav bar */

nav {
  position: fixed;
  z-index: 100;

  left: 6vw;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
  padding-top: 10px;
  color: white;
  margin-right: 10px;
}

nav ul li a {
  text-decoration: none;
  padding: 10px 20px 10px 20px;

  border-radius: 0px 0px 3px 3px;
  border: 1px solid RGB(169, 0, 150);
  background: RGB(169, 0, 150);
  background:  -webkit-linear-gradient(RGB(222, 0, 220) 0, RGB(169, 0, 155) 80%);
  background: linear-gradient(RGB(222, 0, 220) 0, RGB(169, 0, 155) 80%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f56d56', endColorstr='#e63c63', GradientType=0);
}

nav ul li a:hover {
  background: RGB(169, 0, 150);
  background:  -webkit-linear-gradient(RGB(222, 0, 220) 0, RGB(169, 0, 155) 80%);
  background: linear-gradient(rgb(217, 62, 215) 0, RGB(222, 0, 220) 80%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff9787', endColorstr='#e63c63', GradientType=0)
}

/* Team */

.team-header {
  margin-top: 80px;
  margin-bottom: 20px;
}

header.team-header h1 {
  text-align: center;
}

.credits {
  color: white;
  text-align: center;
  padding: 15px;
  margin-bottom: 15px;
}

.special-thanks {
  margin-top: 15px;
  margin-bottom: 50px;
}

.credits h3 {
  margin: 0px 10px 15px 10px;
  padding-bottom: 5px;
  border-bottom: 2px solid #e7e8ff;
}

.credits ul {
  list-style: none;
}

.credits ul li {
  font-size: 1.25em;
  line-height: 1.15em;
  margin-bottom: 12px;
}