/*

	Template Author : pixelhint.com
	Author Email    : contact@pixelhint.com
	Template Name   : Sublime


	*****************************************


    - fonts
    - general css
    - billboard
    - header
    - services
    - video
    - testimonials
    - blog posts
	- footer

*/

/* COLOR */
/* Dark blue background: #110C35
/* Link color: color: #5079f2;
/* lighter hover color: 81a3f7;
/* faded color for lines: 2f2a84;

*/


/*  Fonts  */
@font-face {
    font-family: 'raleway-regular';
    src: url('../fonts/raleway-regular.eot');
    src: url('../fonts/raleway-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/raleway-regular.woff') format('woff'),
         url('../fonts/raleway-regular.ttf') format('truetype'),
         url('../fonts/raleway-regular.svg#raleway-regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'AlwynNew-regular';
    src: url('../fonts/AlwynNew-Rg.otf');
    src: url('../fonts/AlwynNew-Rg.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'AlwynNew-light';
    src: url('../fonts/AlwynNew-Lt.otf');
    src: url('../fonts/AlwynNew-Lt.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'AlwynNew-bold';
    src: url('../fonts/AlwynNew-Bd.otf');
    src: url('../fonts/AlwynNew-Bd.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'raleway-semibold';
    src: url('../fonts/raleway-semibold.eot');
    src: url('../fonts/raleway-semibold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/raleway-semibold.woff') format('woff'),
         url('../fonts/raleway-semibold.ttf') format('truetype'),
         url('../fonts/raleway-semibold.svg#raleway-semibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'raleway-bold';
    src: url('../fonts/raleway-bold.eot');
    src: url('../fonts/raleway-bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/raleway-bold.woff') format('woff'),
         url('../fonts/raleway-bold.ttf') format('truetype'),
         url('../fonts/raleway-bold.svg#raleway-bold') format('svg');
    font-weight: normal;
    font-style: normal;
}



/*  General CSS */

body {
  background: #221A50;
  font-family: 'AlwynNew-light', sans-serif;
  font-style: normal;
  font-weight: 100;
}

.wrapper{
  width: 100%;
  margin: 0 auto;
}

h1, h2, h3, h4, h5, h6 {
  color: #fff;
  font-family: 'AlwynNew-bold', sans-serif;
  letter-spacing: .05rem;
}

h1  { font-size: 2em; margin: .67em 0 }
h2  { font-size: 1.5em; margin: .75em 0 }
h3  { font-size: 1.17em; margin: .83em 0 }
h4  { font-size: 1em; margin: 2em 0 .83em; font-weight: 100;}
/*h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }*/
/*h1, h2, h3, h4,
h5, h6          { font-weight: bolder }*/


a {
  color: #5079f2;
  text-decoration: none;
  transition:color .2s linear;
    -webkit-transition:color .2s linear;
    -moz-transition:color .2s linear;
    -o-transition:color .2s linear;
}

a:hover {
  color: #81a3f7;
}

p {
  margin: 15px 0;
  color: #DADAEA;
  line-height: 1.4;
}
li {
  margin: 10px 0;
  line-height: 1.4;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

/* Global Style: Billboard */

.billboard {
  width: 100%;
  height: 100vh;
  position: relative;
}

.billboard {
  background: #09003A url('../img/los-ojos-skyline-02.png') no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-position: center 18%;
}

.billboard--darker {
  background: #09003A url('../img/los-ojos-skyline-02-darker.png') no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-position: center 18%;
}

.billboard .shadow {
  position: absolute;
  width: 100%;
  height: 142px;
  bottom: 0;
  left: 0;
  margin-bottom: -1px;
  background: url('../img/shadow.png') repeat-x;
}

/*.billboard .caption {
  text-align: center;
  width: 100%;
  margin: 0 auto;
  position: relative;
  color: #fff;
}

.billboard .caption h1{
  font-size: 50px;
  font-weight: bold;
  margin-bottom: 30px;
  color: #fff;
}*/


/*.billboard .caption hr{
    display: inline-block;
    height: 1px;
    width: 30px;
    border: 0!important;
    margin: 0;
    padding: 0;
    background: #fff;
}
*/


/*  Video Styling    */

/* Wrapper to make Youtube iframes responsive */
.videowrapper {
    max-width: 1920px; /* video width */
    max-height: 1080px; /* video height */
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 53%;
    padding-top: 35px;
    height: 0;
    box-shadow: 0rem 1rem 6rem #463377;
}

.videowrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*.video {
    display: block;
    width: 100%;
    text-align: center;
    background: url('../img/video-bg.png') no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    min-height: 36rem;
    box-shadow: 0rem 1rem 6rem #463377;
}*/

/*.video #play_btn{
    display: inline-block;
    width: 11rem;
    height: 11rem;
    background: url('../img/play_btn.png') no-repeat;
    margin-top: 11rem;
}*/





/* header and navigation */

header {
  width: 100%;
  align-content: center;
}

.header-logo {
  height: 220px;
  width: 360px;
  padding-top: 44px;
  margin-left: auto;
  margin-right: auto;
}

.navbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 54px;
  z-index: 99999;
}

.navbar-logo-container {
  display: flex;
    display: -webkit-box;
      display: -ms-flexbox;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 20px;
  color: white;
  text-decoration: none;
}

img.navbar-logo {
  width: 40px;
  height: 40px;
  max-width: 40px;
}

nav {
  padding-right: 20px;
}


nav ul {
  align-items: center;
  display: flex;
  justify-content: flex-end;
}

nav ul li {
  text-transform: uppercase;
  list-style: none;
  display: block;
  margin-left: 50px;
}

nav a {
  text-decoration: none;
  font-size: 14px;
  padding-bottom: 3px;
  -webkit-font-smoothing: antialiased;
}

nav a:hover {
  border-bottom: 1px solid #81a3f7;

}
nav a.current {
  color: #fff;
  border-bottom: 1px solid #81a3f7;
}

nav a.current:hover {
  color: #fff;
}

.social-icon svg {
  width: 1.65rem;
  fill: #5079f2;
}

.social-icon a:hover {
  border-bottom: none;
}

.social-icon a:hover svg {
  fill: #81a3f7;
}


/* Common components */

h3.tagline {
  font-family: 'AlwynNew-light', sans-serif;
  font-style: normal;
  font-weight: 100;
  font-size: 30px;
  color: #ffffff;
  position: relative;
  text-align: center;
  text-shadow: 0px 10px 24px #ADA9FF;
  padding: 0 14px 0;
}

/* HOMEPAGE */

.ComingSoonZone, .HomeScreenshots, .PressSection, .StoreSection, .MadeBy {
  padding: 20px 10%;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  text-align: center;
}

.ComingSoonZone {
  max-width: 60%;
  background-color: #100d56;
  margin: 132px auto 32px;
}

.ComingSoonZone .store-link {
  height: 40px;
  padding: 10px 0 20px 0;
  margin: 0 15%;
  max-width: 350px;
}

/*  Homepage section for marketing    */
.ComingSoon-Distribution {
  padding: 55px 0 15px;
}

.ComingSoon-Newsletter {
  padding: 15px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top:22px;
  padding: 12px 0 22px;
  border-top: solid 5px #2f2a74
}

.ComingSoon-Distribution svg{
  height: 3rem;
  padding: .4rem 2rem;
}

h4.sec-head {
  font-family: 'AlwynNew-light', sans-serif;
  color: #ADA9FF;
  text-transform: uppercase;
  text-shadow: 0px 7px 16px #ADA9FF;
}

.ComingSoon p {
  top: 0;
}

.byline {
  max-width: 46rem;
  margin: 0 auto;
  font-size: 18px;
  padding: 15px 15px 45px;
  text-align: center;
}


#trailer {
  max-width: 56rem;
  margin: 0 auto;
}


/* Newsletter signup input */

.NewsletterSignup, .PrListSignup {
  padding: 4px 0 12px;
}
.PrListSignup {
  width:400px;
}
input {
  background: #12085A99;
}

.InputAddOn {
  flex-direction: column;
  display: flex;
}

.InputAddOn-field, .InputAddOn-button {
  margin-top: 8px;
  min-width: 300px;
  text-align: center;
  line-height: 1.2rem;
  border-radius: 0.2rem;
}

.InputAddOn-button {
  border: none;
  min-width: 300px;
  padding: 1.0rem;

  font-family: 'AlwynNew-light';
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: .08rem;
  color: #fff;
  transition: box-shadow 300ms;

  /*background-color: #5079F2;*/
  background-image: -webkit-linear-gradient(260deg, #5061F2, #37B0E8);
  background-image: -moz-linear-gradient(260deg, #5061F2, #37B0E8);
  background-image: -ms-linear-gradient(260deg, #5061F2, #37B0E8);
  background-image: -o-linear-gradient(260deg, #5061F2, #37B0E8);
}

.InputAddOn-field {
  color: #fff;
  padding: .9rem;
  font-size: .96rem;
  font-family: 'AlwynNew-light';
  font-weight: 100;
  letter-spacing: .02rem;
  display: block;
  border: .1rem solid #5079F2;
  transition: box-shadow 300ms;
  transition: border 300ms;
}

.InputAddOn-field:-webkit-autofill {
  -webkit-box-shadow:0 0 0 300px #12085A inset;
    -webkit-text-fill-color: #ffffff;
}
.InputAddOn-field:-webkit-autofill:focus {
    -webkit-box-shadow:0 0 0 300px #12085A inset;
    -webkit-text-fill-color: #ffffff;
}
.InputAddOn-field:-webkit-autofill:hover {
    -webkit-box-shadow:0 0 0 300px #12085A inset;
    -webkit-text-fill-color: #ffffff;
}

.InputAddOn-field:hover {
  box-shadow: 0px 10px 24px #ADA9FF55;
  border: .1rem solid #ffffff;
}
.InputAddOn-button:hover {
  box-shadow: 0px 10px 24px #ADA9FF55;
}

::-webkit-input-placeholder  { color: rgba(160,184,255,1); font-weight: 200; } /* Webkit */
:-moz-placeholder { color: rgba(160,184,255,1); font-weight: 200; }  /* Firefox <= 18 */
::-moz-placeholder { color: rgba(160,184,255,1); font-weight: 200; }  /* Firefox >= 19 */
:-ms-input-placeholder {  color: rgba(160,184,255,1); font-weight: 200; } /* Internet Explorer */

.PrListSignup .InputAddOn-field {
  text-align: left;
}
.PrListSignup .InputAddOn-button {
  min-width: 110px;
  max-width: 110px;
}

/* Newsletter Confirmation */
.NewsletterConfirmation {
  
}
.social-button {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  height: 20px;
  width: 60px;
  background-color: #fff;

}

/* Rotating Testimonials */
.press-and-testimonials {
  flex-direction: column;
  display: flex;
}

#testimonials {
  padding: 14px 0 90px 0;
}

@media screen and (max-width: 736px) {
  .press-and-testimonials {
    flex-direction: column-reverse;
  }

  #testimonials {
    padding-bottom: 150px;
  }

  .videowrapper {
    padding-top: 21px;
  }
}

#testimonials img {
  height: 40px;
}

.cust-quotes blockquote p {
  font-size: 28px;
  color: #ADA9FF;
  /*text-shadow: 0px 5px 24px #ADA9FF;*/
}

/* IE < 10 fallback */
.no-csstransitions .cust-quotes blockquote,
.no-csstransforms .cust-quotes blockquote {
   position:relative;
}

.cust-quotes blockquote.fade-out {
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s linear 300ms, opacity 300ms;
}

.cust-quotes blockquote.fade-in {
  opacity: 1;
  visibility: visible;
  transition: visibility 0s linear 300ms, opacity 300ms;
}

.cust-quotes blockquote {
  position: absolute;
  width: 80%;
  text-align: center;
}

.cust-quotes blockquote p:before {
   content: '\201C';
   font-size: 30px;
   line-height: 18px;
}
.cust-quotes blockquote p:after {
   content: '\201D';
}

.cust-quotes blockquote cite {
    text-align: center;
    color: #fff;
    font-style: normal;
}

.cust-quotes blockquote cite:before {
    content: ' - ';
    color: #fff;
    font-style: normal;
}
.cust-quotes blockquote cite a {

}



/* Animated Logo on Homepage */

#homepage-animation-container {
  max-width: 660px;
  margin: 0 auto;
  height: 462px;
}

#lineDrawing, #lineDrawing2, #logo {
  position: absolute;
  top: 54px;
  opacity: 0;
  height: 480px;
  width: 660px;
  padding-top: 140px;
}

.hidden-header {
  display: none;
}

/* OTHER PAGES: Two-Column Structure */
.MainContent-Container {
  display: flex;
  justify-content: center;
}

.MainContent-PrimaryText {
  flex-basis: 60%;
  padding: 0 20px;
}

.MainContent-Sidebar {
  flex-basis: 20%;
  text-align: right;
  padding: 0 20px;
  max-width: 240px;
}

.MainContent-Sidebar h4 {
  margin: 25px 0 5px;
}

.MainContent-Sidebar p {
  margin: 3px 0;
}

.MainContent-PrimaryText ul {
  color: #DADAEA;
  margin-left: 20px;
  line-height: 1.4;
}

.MainContent-PrimaryText {
  flex-basis: 60%;
  margin: 0 20px;
  max-width: 540px;
/*  padding: 0 0 0 20px;*/
  margin: 3px 0;
}

.MainContent-section {
  border-top: 1px solid #2f2a84;
  padding: 20px 0 40px;
}

.MainContent-section:first-child {
  border-top: none;
  padding-top: 0;
}

/* PRESS-PAGE */

.PhotoAlbum {
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.press-page .PhotoAlbum-thumbnail {
  width: calc((100%/2) - 10px);
  padding-top: 10px;
}

.home-page .PhotoAlbum-thumbnail {
  width: calc((100%/3) - 10px);
  padding-top: 20px;
}

.home-page .PhotoAlbum-thumbnail.PhotoAlbum-hero {
  width: 100%;
}

.PhotoAlbum-thumbnail {
  width: 50%;
  margin-bottom: 16px;
}

.SectionHeaderAndDownload {
  padding-top: 35px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
}

/* override standard class*/
.publisher-logo h3.tagline {
  margin-top: 16px;
  font-size: 24px;
}

img.publisher-link  {
  max-width: 350px;
  padding-bottom: 18px;
}

img.ft-link {
  padding-top: 28px;
}

img.funder-link {
  padding-top: 36px;
}



/* Make sure footer is sticky */
.blog-page {
  display:flex;
  flex-direction: column;
  height: 100vh;
}

.tumblr-content, .MainContent-Container {
  flex: 1;
}

/* TUMBLR OVERRIDES */

/* get rid of tumblr iframes */

body > iframe:first-child { display: none !important; }

.iframe-controls-container {display:none !important; }

.tmblr-iframe--loaded { display:none !important;  }

/**,
*::before,
*::after {
  box-sizing: border-box;
}
*/

/*.Wrapper {
  flex: 0 0 90%;
  max-width: 90%;
}*/


/*    footer    */

.body-footer {
  display: flex;
  flex-shrink: 0;
  background-color: #12085A;
  height: 60px;
  color: #8494FF;
  letter-spacing: .05rem;
  font-weight: 200;
  font-size: .8rem;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  margin-top: 50px;
}

.body-footer a {
  color: #8494FF;
}

.body-footer a:hover {
  color: #ffffff;
}

@media screen and (min-width: 1280px) {
  .videowrapper {
    padding-top: 44px;
  }

  .ComingSoonZone {
    max-width: 500px;
  }
}

@media screen and (max-width: 1024px) and (min-width: 737px) {
  .videowrapper {
    padding-top: 21px;
  }
}

@media screen and (max-width: 320px) {
  #homepage-animation-container, #lineDrawing, #lineDrawing2, #logo, .header-logo {
    width: 290px;
    height: 234px;
  }

  .tagline p, .ComingSoon p {
    font-size: 17px;
  }

  .ComingSoon {
    padding: 80px 0 0;
  }

  nav, .navbar-logo-container {
    padding: 10px 0;
  }

  nav ul li {
    margin-left: 26px;
  }

  .videowrapper {
    padding-top: 7px;
  }
}

@media screen and (max-width: 736px) and (min-width:321px) {
  /* For mobile phones: */
  .navbar {
    justify-content: center;
  }
  nav, .navbar-logo-container {
    padding:0;
  }
  nav ul {
    justify-content: flex-start;
  }

  nav ul li {
    margin-left: 38px;
  }

  .billboard {
    max-height: 40vh;
    background: #09003A url(../img/los-ojos-skyline-mobile.png) no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-position: center -22%;
  }

  .MainContent-Container {
    flex-wrap: wrap;
  }

  .MainContent-Sidebar {
    flex-basis: 100%;
    text-align: center;
    max-width: 330px;
  }

  .MainContent-PrimaryText {
    flex-basis: 100%;
    text-align: center;
    margin: 0;
    max-width: 330px;
    padding: 0;
  }
  .MainContent-section ul {
    margin: 0;
  }
  .MainContent-section ul li {
    list-style: none;
    padding: 5px 0 10px;
    margin: 0; 
  }
  .SectionHeaderAndDownload {
    text-align: center;
    display: inherit;
  }
 /* .PhotoAlbum {
    display: inherit;
  }*/
  .PhotoAlbum-thumbnail {
    width: 48%;
    padding-top: 15px;
  }
  
  .DownloadLink {
    margin-top: 0;
  }

  .tagline p, .ComingSoon p {
    font-size: 20px;
/*    top: -3.6rem; Please use padding on the divs to position*/
  }

  .ComingSoon p {
    font-size: 24px;
/*    top: 0rem; Please use padding on the divs to position*/
  }

  .ComingSoon {
    width: auto;
    padding: 130px 0 0;
  }

  .ComingSoon-Distribution {
    text-align: center;
    padding: 15px 0;
  }

  .ComingSoon-Distribution-Logos {
    display: block;
  }

  .ComingSoon-Distribution svg {
    padding: 1rem 0rem;
    width: 100%;
  }

  .ComingSoon-Newsletter {
    padding: 24px 0px 50px;
  }

  .PrListSignup {
    width: 330px;
  }

  .InputAddOn-field, .PrListSignup .InputAddOn-field {
    text-align: center;
    padding: 14px 0;
  }

  .InputAddOn-button {
    padding: 14px 0;
    margin-top: 8px;
    border-radius: .2rem;
    align-items: center;
  }

  .PrListSignup .InputAddOn-button {
    min-width: 330px;
    max-width: 330px;
  }

  #homepage-animation-container, #lineDrawing, #lineDrawing2, #logo {
    height: 264px;
    width: 340px;
  }

  #lineDrawing, #lineDrawing2, #logo {
    padding: 100px 0px 0;
  }

  .header-logo {
    width: 340px;
  }

  .distribution  a {
      display: block;
  }
  .distribution svg {
      height: 3rem;
      margin: 1.4rem auto 2.4rem;
      padding: 0;
  }
  .social {
      margin-top: 3rem;
  }
  .newsletter {
      min-height: 14em;
      margin: 0 auto;
  }

  .NewsletterSignup {
      padding-left: 0;
  }

  .body-footer {
      padding-top: 0;
  }

  .PhotoAlbum-thumbnail {
    width: 100%;
    margin-bottom: 8px;
  }

  .home-page .PhotoAlbum-thumbnail {
    width: calc((100%/2) - 10px);    
    margin-bottom: 8px;
  }

  .home-page .PhotoAlbum-thumbnail img {
    width: inherit;
  }
  .ComingSoonZone {
    background-color: inherit;
    margin-top: 60px;
  }

  .cust-quotes blockquote p {
    font-size: 20px;
  }

  .ComingSoon-Newsletter {
    border-top: none;
  }
}

/*@media screen and (max-width: 768px) {

}*/