@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Nixie+One");

@font-face {
  font-family: "San Francisco";
  font-weight: 400;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}

#main-container {
  margin-top: 25px;
}

#copywrite {
  /*color: #D3D3D3;*/
}

#main-screenshot {
  box-shadow: 10px 10px 50px 5px  #888888;
}

#sign-up {
  background-color: #EEE84C;
  padding-left: 70px;
  padding-right: 70px;
  /*margin-bottom: 75px;*/
  height: 50px;
  border-radius: 5px;
  font-size: 16px !important;
  text-transform: uppercase;
  color: black;
  font-weight: bold;
  border: none;
  box-shadow: 0 10px 30px 10px rgba(0,0,0,0.24) ;
  box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
}

body {
  color: #000;
  font-family: 'Titillium Web', sans-serif;
}
p, ul {
  color: #000;
}
 h1, h2, h3, h5, h4 {
  color: #000;

}

a {
  color: #38DAFF;
}

.hero-text {
  margin-top: 50px;
  font-weight: 800 ;
}

.logo-text {
  font-weight: 800 !important;
}

.card {

  border-radius: 4px;
  border:none;
  box-shadow: 0 10px 30px 10px rgba(0,0,0,0.24) ;
  box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
  transition-property: color,background-color,box-shadow,transform;
  transition-duration: .15s;
  padding: 60px;
}

.card-sm {

  border-radius: 4px;
  border:none;
  box-shadow: 0 10px 30px 10px rgba(0,0,0,0.24) ;
  box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
  transition-property: color,background-color,box-shadow,transform;
  transition-duration: .15s;
  padding: 30px;
  margin:10px;
  background-color: white;
}

button:hover {
  background-color: #f4b43d !important;
  border: 1px solid #f4b43d !important;
  transform: scale(1.03) !important;
  /*box-shadow: 0 10px 30px 10px rgba(0,0,0,0.24) ;*/
  box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
  cursor: pointer;
  border: none !important;
}

#navbar-title {
  margin-left: 20px;
}

.serif {
  font-family: 'Bitter', serif;
}


.xtra-padding {
  margin-top: 120px !important;
  margin-bottom: 120px !important;
}

.navbar {
  background-color: transparent;

}

.ctarow {
  background-color: black;
}

/*    .gradient-blue { /* Our base
  width:200px;
  height:200px;
  background: linear-gradient(to left, #B3FEFF 0%,#38DAFF 100%);
  margin:0 auto;
  margin-top:50px;
}
*/
.gradient-blue { /* Our base */
  width:200px;
  height:200px;
  background: linear-gradient(to left, #EB3349 0%,#F45C43 100%);
  margin:0 auto;

}

.bg-blue-gradient {
  background: linear-gradient(to left,#38DAFF 0%,#B3FEFF 100%);
}

.skew-bar {
  transform: skewY(-12deg);
}



.bg-grey {
  background-color: #F0F0F0;
}

.bg-darkgrey {
  background-color: #10111C;
}

.text-grey {
  color: #A7A7A7;
}

.quote h1 {
  color: #A7A7A7 !important;
}

.img-shw {
  /*box-shadow: 0 10px 30px 10px rgba(0,0,0,0.24) ;*/
  box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
}

.gradient-yellow { /* Our base */
  width:200px;
  height:200px;
  background: linear-gradient(to bottom, #FEE882 0%,#FEEC80 100%);
  margin:0 auto;
  margin-top:50px;
}

.full-width-img {
  width: 100%;
}

#footer {
  color: #fff
}

.gridhour-anim {
  width: 100%;
  margin-top: 2em;
  margin-bottom: 2em;
}

.badge-soon {
  background-color: #38DAFF;
}

.rectangle1 {
  width: 100%;
  height: 110%;
  position: absolute;
  border-radius: 0px;
  top:-50px;
  left:0px;
  z-index: -1000;
  /*transform: skewY(-12deg);
  /*transform:rotate(-90deg);*/
  opacity:1;
}
.rectangle2 {
  width: 100%;
  height: 60%;
  position: absolute;
  /*border-radius: 40px;*/
  /*bottom:0px;*/
  left:-0px;
  margin-top: -20px;

  z-index: -1000;
  transform: skewY(6deg);
  /*transform:rotate(60deg);*/
  opacity:0.8;
}
.rectangle3 {
  width: 700px;
  height: 1500px;
  position: absolute;
  border-radius: 40px;
  top:-500px;
  right:0%;
  z-index: -1000;
  transform:rotate(-60deg);
  opacity:0.8;
}
.rectangle4 {
  width: 1000px;
  height: 1000px;
  position: absolute;
  border-radius: 40px;
  top:0px;
  right:-10%;
  z-index: -1100;
  transform:rotate(80deg);
  opacity:0.8;
}

.faq {
  background-color: #FEE882;
}

.navbar-brand {
  padding: 10px;
}

@media (max-width: 575px) {
    /*.xtra-padding {
      margin-top: 150px !important;
      margin-bottom: 50px !important;
    }*/

    .p-5 {
      padding: 5rem 5rem!important;
    }
    .notifications {
      margin-top: 50px;s
    }

    .hero-text {
      margin-top: 130px;
      font-size: 2em;
    }
    .rectangle2 {
      height: 80%;
    }
    .py-5 {
    padding-top: 1rem!important;
    padding-bottom: 1rem!important;
    }

 }

 .blue-stripes {
  content: '';
  position: relative;
  z-index: -1;
  left: 0;
  top: 126px;
  right: 0;
  bottom: -20px;
  transform: skewY(-12deg);
  background: #323a5a linear-gradient(192deg,#51557d,#222d49);
 }



 .notifications {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1000;
  padding: 30px;
  pointer-events: none;
  display: none; }
  .notifications.ready {
    display: block;
    height: 100vh;
    overflow: hidden; }
  .notifications .notification {
    display: block;
    position: relative;
    height: 0;
    transform: translateX(calc(100% + 40px));
    transition: height 550ms cubic-bezier(0.23, 1, 0.32, 1), transform 550ms cubic-bezier(0.23, 1, 0.32, 1) 250ms, opacity 750ms cubic-bezier(0.23, 1, 0.32, 1);
    transition-property: height, transform, opacity;
    transition-duration: 550ms, 550ms, 750ms;
    transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1), cubic-bezier(0.23, 1, 0.32, 1), cubic-bezier(0.23, 1, 0.32, 1);
    transition-delay: initial, 250ms, initial; }
    .notifications .notification.loaded {
      height: 80px;
      transform: translateX(0); }
    .notifications .notification:nth-child(n+5) {
      transition: opacity 550ms cubic-bezier(0.23, 1, 0.32, 1) 150ms; }
      .notifications .notification:nth-child(4) {
        opacity: .75; }
    .notifications .notification:nth-child(5) {
      opacity: .5; }
    .notifications .notification:nth-child(6) {
      opacity: .4; 
     }
    .notifications .notification:nth-child(7) {
      opacity: 0;
      transition: transform 550ms cubic-bezier(0.23, 1, 0.32, 1), opacity 750ms cubic-bezier(0.23, 1, 0.32, 1);
      transform: scale(0.5); }
    .notifications .notification:nth-child(8) {
      opacity: .3; }
    .notifications .notification:nth-child(9) {
      opacity: .15; }
    .notifications .notification:nth-child(n+10) {
      opacity: 0; }
    .notifications .notification.closed {
      transform: translateX(calc(100% + 40px));
      transition: height 550ms cubic-bezier(0.23, 1, 0.32, 1) 250ms, transform 550ms cubic-bezier(0.23, 1, 0.32, 1);

      height: 0; }

    .notifications .notification-inner {
      height: 70px;
      overflow: hidden;
      width: 370px;
      position: relative;
      box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
      border: 2px solid rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      position: relative;
      margin-bottom: 20px;
      overflow: hidden; }
      .notifications .notification-inner:before, .notifications .notification-inner:after {
        display: block;
        content: "";
        background: rgba(255, 255, 255, 0.2);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; }
      .notifications .notification-inner:after {
        background: rgba(255, 255, 255, 0.64); }
      .notifications .notification-inner > * {
        position: relative;
        z-index: 1; }
    .notifications .notification.has-image .notification-body, .notifications .notification.has-actions .notification-body {
      padding-right: 100px; }
    .notifications .notification-icon {
      width: 33px;
      height: 33px;
      border-radius: 100%;
      position: absolute;
      top: 50%;
      left: 17px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      transform: translate(0, -50%); }
      .notifications .notification-icon + .notification-body {
        padding-left: 60px; }
    .notifications .notification-body {
      height: 100%;
      color: #3D4B50;
      padding-right: 25px; }
      .notifications .notification-body-header {
        font: 600 13.5px/1em "San Francisco";
        letter-spacing: .45px;
        padding-top: 19px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden; }
      .notifications .notification-body-content {
        font: 400 11.25px/1em "San Francisco";
        letter-spacing: .38px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        padding-top: 6px; }
    .notifications .notification-actions {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      font: 600 13.25px/35px "San Francisco";
      letter-spacing: .23px;
      border-left: 1px solid rgba(0, 0, 0, 0.1);
      z-index: 2;
      min-width: 80px; }
      .notifications .notification-actions > * {
        pointer-events: all;
        height: 50%;
        text-align: center;
        padding: 0 10px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        -webkit-transition: all 250ms cubic-bezier(0.23, 1, 0.32, 1);
        -moz-transition: all 250ms cubic-bezier(0.23, 1, 0.32, 1);
        -o-transition: all 250ms cubic-bezier(0.23, 1, 0.32, 1);
        transition: all 250ms cubic-bezier(0.23, 1, 0.32, 1);
        cursor: pointer; }
        .notifications .notification-actions > *:hover {
          background: rgba(0, 0, 0, 0.05); }
    .notifications .notification-image {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 70px;
      z-index: 3;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat; }
  @media (max-width: 991px) {
    .notifications {
      width: 430px;
      left: 50%;
      transform: translateX(-50%) scale(0.9);
      top: -10px;
      transform-origin: top center; }
      .notifications .notification:not(.closed):nth-child(n+3) {
        opacity: 0;
        transition: transform 550ms cubic-bezier(0.23, 1, 0.32, 1), opacity 750ms cubic-bezier(0.23, 1, 0.32, 1);
        transform: scale(0.5); }
      .notifications .notification.closed:not(.just-closed):nth-child(2) + .notification:not(.closed) {
        opacity: 1 !important;
        transform: scale(1) !important; }
      .notifications .notification.closed + .notification:not(.closed) {
        transform: scale(1);
        opacity: 1; }
        .notifications .notification.closed + .notification:not(.closed):nth-child(3) {
          opacity: 0;
          transform: scale(0.5); }
      .notifications .notification:nth-child(n+4) {
        opacity: 0 !important;
        transform: scale(0.5) !important; } }
  @media (max-width: 374px) {
    .notifications {
      transform: translateX(-50%) scale(0.8); } }