@font-family: 'Open Sans', sans-serif;
@font-header: 'Sanchez', serif;

@border-radius: 0.3rem;

/* Colors */
@color-mine-shaft: #222;
@color-tom-thumb: #385134;
@color-outer-space: #273D3B;
@color-quicksand: #BFA38F;

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

html {
  font-size: 62.5%;
}

html,
body {
  height: 100%;
}

body {
  background-color: #fff;
  color: #222;
  font-size: 14px;
  font: 400 1.5rem/160% 'Open Sans', sans-serif;
  margin: 0;
}

a {
  transition: all 250ms;
}

#outer-container {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

h1 {
  font-family: 'Sanchez', serif;
  font-weight: 100;
  letter-spacing: 0.1rem;
  line-height: 120%;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.form-control {
  background-color: #fff;
  border: solid 1px #CCC;
  border-radius: 3px;
  color: #222;
  font: 400 1.6rem 'Open Sans', serif;
  line-height: normal;
  height: 4.2rem;
  padding: 0.8rem 1.5rem;
  width: 100%;
}

.btn {
  background: #273d3b;
  border: none;
  border-radius: 3px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: 'Sanchez', serif;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.1rem;
  padding: 0.7rem 2.2rem;
  text-decoration: none;
  transition: all 200ms;
  text-transform: uppercase;
}

.btn--large {
    font-size: 1.8rem;
    padding: 1rem 2.8rem;
}

.header {
  background: #fff;
  height: 7rem;
  padding: 1.5rem 0;
  text-align: center;
  position: relative;
  z-index: 100;
}

.header__logo {
  color: #333;
  display: inline-block;
}

.header__logo svg,
.header__logo span {
  display: inline-block;
  vertical-align: middle;
}

.header__logo svg {
  height: 4rem;
  margin-right: 1rem;
  width: 5rem;
}

.header__logo span {
  font-family: 'Sanchez', serif;
  font-size: 2rem;
  font-weight: 600;
}

.banner {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#092d6c+0,10659c+40,7babbf+68,e9c39f+85,ff9a4a+100 */
  background: linear-gradient(to bottom, #092d6c 0%,#10659c 40%,#7babbf 68%,#e9c39f 85%,#ff9a4a 100%);
  height: calc(100vh - 7rem);
  position: relative;
  overflow: hidden;
  min-height: 600px;
}

.banner__stars {
  background: transparent;
}

.banner__stars--1 {
  box-shadow: 1605px 940px #FFF, 74px 1502px #FFF, 833px 734px #FFF, 1986px 830px #FFF, 1387px 123px #FFF, 1936px 1853px #FFF, 1400px 169px #FFF, 244px 1888px #FFF, 635px 1867px #FFF, 251px 686px #FFF, 1391px 411px #FFF, 508px 1945px #FFF, 658px 416px #FFF, 1590px 363px #FFF, 208px 205px #FFF, 1189px 805px #FFF, 775px 392px #FFF, 1165px 688px #FFF, 1991px 259px #FFF, 37px 645px #FFF, 134px 1039px #FFF, 959px 1136px #FFF, 632px 1743px #FFF, 615px 1748px #FFF, 1626px 381px #FFF, 1494px 1702px #FFF, 566px 481px #FFF, 234px 440px #FFF, 655px 1191px #FFF, 85px 1560px #FFF, 1646px 242px #FFF, 776px 627px #FFF, 1966px 20px #FFF, 726px 1960px #FFF, 1596px 80px #FFF, 1623px 1353px #FFF, 6px 552px #FFF, 1267px 1249px #FFF, 1499px 1404px #FFF, 864px 1978px #FFF, 1608px 698px #FFF, 410px 1740px #FFF, 237px 485px #FFF, 371px 199px #FFF, 1030px 1423px #FFF, 922px 1809px #FFF, 688px 941px #FFF, 1709px 722px #FFF, 1801px 1767px #FFF, 329px 1775px #FFF, 1706px 1950px #FFF, 1943px 1227px #FFF, 1016px 633px #FFF, 1932px 340px #FFF, 63px 68px #FFF, 820px 1549px #FFF, 555px 1648px #FFF, 1883px 503px #FFF, 642px 1843px #FFF, 1153px 125px #FFF, 1546px 417px #FFF, 1125px 113px #FFF, 1372px 1315px #FFF, 1197px 381px #FFF, 1184px 665px #FFF, 1763px 599px #FFF, 764px 594px #FFF, 1652px 1423px #FFF, 44px 714px #FFF, 1786px 821px #FFF, 1764px 663px #FFF, 679px 544px #FFF, 1194px 630px #FFF, 1970px 168px #FFF, 431px 1663px #FFF, 1528px 424px #FFF, 599px 501px #FFF, 14px 815px #FFF, 1123px 1327px #FFF, 469px 1370px #FFF, 1708px 1120px #FFF, 1795px 387px #FFF, 518px 970px #FFF, 699px 86px #FFF, 215px 1858px #FFF, 1845px 858px #FFF, 1749px 1851px #FFF, 172px 1769px #FFF, 565px 1699px #FFF, 681px 382px #FFF, 604px 1871px #FFF, 628px 256px #FFF, 964px 292px #FFF, 1433px 1567px #FFF, 503px 1608px #FFF, 559px 192px #FFF, 1544px 1729px #FFF, 848px 478px #FFF, 285px 861px #FFF, 1797px 583px #FFF, 66px 1417px #FFF, 275px 1453px #FFF, 1989px 790px #FFF, 1205px 1610px #FFF, 1379px 406px #FFF, 1876px 510px #FFF, 1111px 1274px #FFF, 108px 1876px #FFF, 1490px 1666px #FFF, 1449px 842px #FFF, 1231px 245px #FFF, 225px 1329px #FFF, 656px 998px #FFF, 1246px 1382px #FFF, 1658px 588px #FFF, 760px 1196px #FFF, 1145px 1397px #FFF, 1603px 409px #FFF, 1424px 1306px #FFF, 947px 1101px #FFF, 957px 1720px #FFF, 1512px 1688px #FFF, 1752px 1888px #FFF, 1694px 325px #FFF, 398px 545px #FFF, 1838px 918px #FFF, 60px 1784px #FFF, 1050px 1517px #FFF, 586px 878px #FFF, 1485px 1505px #FFF, 1752px 720px #FFF, 829px 1702px #FFF, 459px 1457px #FFF, 326px 1971px #FFF, 1282px 224px #FFF, 1223px 155px #FFF, 1070px 719px #FFF, 684px 1259px #FFF, 801px 1111px #FFF, 1930px 1596px #FFF, 187px 1917px #FFF, 1932px 1489px #FFF, 795px 60px #FFF, 1572px 1201px #FFF, 757px 1738px #FFF, 1959px 513px #FFF, 460px 1885px #FFF, 1023px 1472px #FFF, 703px 389px #FFF, 744px 808px #FFF, 661px 1512px #FFF, 1681px 287px #FFF, 984px 1975px #FFF, 1530px 783px #FFF, 102px 576px #FFF, 1734px 1369px #FFF, 511px 72px #FFF, 561px 262px #FFF, 1973px 1044px #FFF, 858px 1676px #FFF, 918px 889px #FFF, 1033px 802px #FFF, 1544px 1491px #FFF, 1222px 1188px #FFF, 192px 1188px #FFF, 46px 835px #FFF, 1432px 1986px #FFF, 1519px 169px #FFF, 74px 1168px #FFF, 701px 1057px #FFF, 891px 1468px #FFF, 1503px 1943px #FFF, 1842px 1770px #FFF, 1690px 1108px #FFF, 1868px 670px #FFF, 1590px 1053px #FFF, 270px 1112px #FFF, 1618px 1411px #FFF, 30px 1602px #FFF, 1110px 431px #FFF, 1290px 1545px #FFF, 1059px 354px #FFF, 190px 1892px #FFF, 293px 971px #FFF, 572px 1368px #FFF, 833px 371px #FFF, 1071px 606px #FFF, 228px 264px #FFF, 274px 1460px #FFF, 1420px 740px #FFF, 437px 1144px #FFF, 855px 1778px #FFF, 959px 179px #FFF, 1153px 701px #FFF, 1287px 80px #FFF, 1533px 1530px #FFF, 289px 498px #FFF, 1028px 1817px #FFF, 1005px 1066px #FFF, 1098px 1356px #FFF;
  height: 1px;
  width: 1px;
}

.banner__stars--2 {
  box-shadow: 1811px 1571px #FFF , 927px 720px #FFF , 982px 1767px #FFF , 919px 1482px #FFF , 1358px 1063px #FFF , 1937px 1681px #FFF , 1024px 1421px #FFF , 308px 1893px #FFF , 1356px 239px #FFF , 1569px 410px #FFF , 608px 418px #FFF , 1933px 398px #FFF , 667px 1410px #FFF , 1528px 1714px #FFF , 4px 1846px #FFF , 1182px 1206px #FFF , 51px 1267px #FFF , 1477px 979px #FFF , 1750px 1035px #FFF , 84px 380px #FFF , 571px 509px #FFF , 1112px 241px #FFF , 385px 1349px #FFF , 1516px 1577px #FFF , 1226px 125px #FFF , 1752px 1944px #FFF , 1734px 361px #FFF , 1915px 1070px #FFF , 884px 432px #FFF , 1077px 4px #FFF , 82px 776px #FFF , 1917px 1567px #FFF , 1380px 548px #FFF , 349px 179px #FFF , 568px 1758px #FFF , 1505px 303px #FFF , 1729px 1871px #FFF , 9px 758px #FFF , 910px 277px #FFF , 432px 1214px #FFF , 485px 134px #FFF , 1582px 22px #FFF , 98px 778px #FFF , 1698px 373px #FFF , 1698px 1991px #FFF , 1488px 268px #FFF , 1447px 1385px #FFF , 1607px 1078px #FFF , 1919px 861px #FFF , 167px 898px #FFF;
  height: 2px;
  width: 2px;
}

.banner__stars--3 {
  box-shadow: 526px 314px #FFF , 156px 774px #FFF , 1963px 1471px #FFF , 1447px 1741px #FFF , 666px 1852px #FFF , 748px 1747px #FFF , 277px 464px #FFF , 1984px 834px #FFF , 1395px 1682px #FFF , 80px 1933px #FFF , 254px 1341px #FFF , 1675px 1065px #FFF , 1246px 981px #FFF , 885px 929px #FFF , 1440px 985px #FFF , 1020px 1769px #FFF , 251px 1989px #FFF , 930px 1354px #FFF , 497px 1459px #FFF , 184px 33px #FFF;
  height: 3px;
  width: 3px;
}

/* https://codepen.io/echoghi/pen/dMzaPb?js-preprocessor=babel */
@keyframes shootingStar
{
    0% {
        top: -100px;
    }
    35% {
        top: calc( 100% + 100px );
    }
    100% {
        top: calc( 100% + 100px );
    }
}

.shooting-star {
  position: absolute;
  left: 45%;
  height: 100%;
  top: 0;
  transform: rotate(20deg);
}

.shooting-star__star {
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: -100px;
  width: 3px;
  height: 3px;
  background-color: fade(#fff, 95%);
  animation-duration: 20s;
  animation-name: shootingStar;
  animation-delay: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform: rotate(180deg);
  
  &:before {
    position: absolute;
    display: block;
    content: "";
    height: 85px;
    right: 1px;
    top: 0;
    width: 1px;
    background: linear-gradient(to top, rgba(0,0,0,0) 0%,rgba(255,255,255,0.4) 100%); 
  }
}

.banner__ground {
  background: linear-gradient(to bottom, #282d27 0%, #333b32 100%);
  bottom: 0;
  height: 90px;
  left: 0;
  position: absolute;
  width: 100%;
  
  &--middle {
    box-shadow: 0 -4px 3px rgba(80, 42, 0, 0.4);
  }
}

.banner__tent,
.banner__campfire {
  bottom: 100%;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}

.banner__tent {
  filter: drop-shadow(0 0 2px #473726);
  margin-bottom: -1px;
  margin-left: 105px;
  width: 200px;
}

.tnt-cls-1,
.tnt-cls-3,
.cf-cls-1 {fill:#282d27;}
.tnt-cls-2 {fill:#181c18;}
.tnt-cls-3 {stroke:#181c18;stroke-miterlimit:10;stroke-width:6px;}

.banner__campfire {
  margin-bottom: -22px;
  margin-left: -92px;
}

.banner__campfire svg {
  width: 122px;
  position: relative;
}

/* https://codepen.io/BrianBravo/pen/JaFfz */
@orange: #f76b21;
@red: #f73d22;
@yellow: #f6c220;
@blue: rgb(0, 55, 255);

.banner__campfire-fire {
  height: 70px;
  left: 50%;
  position: absolute;
  margin-left: 2px;
  top: 25px;
  transform: translateX(-50%);
  width: 70px;
}

.banner__campfire-flame {
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: .9;
  width: 100%;
  height: 100%;
  border-bottom-right-radius: 70%;
  border-bottom-left-radius: 70%;
  border-top-left-radius: 70%;
  transform: rotate(-45deg) skew(-10deg, -10deg);
  background-color: @red;
  background: linear-gradient(top right, @red, @orange);
  z-index: 1;
  
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  animation-name: burn-left;
  animation-duration: 300ms;
  
  &:nth-of-type(2n){
    animation-name: burn-right;
    animation-duration: 400ms;
  }
  
  &:nth-of-type(2) {
    height: 80%;
    width: 80%;
    left: 10%;
    background-color: @orange;
    background-image: linear-gradient(top right, fade(@orange, 90%) 0%, fade(@yellow, 90%) 100%);
    z-index: 2;
  }
  
  &:nth-of-type(3) {
    height: 50%;
    width: 50%;
    left: 25%;
    background-image: linear-gradient(top right, @yellow, white);
    z-index: 3;
  }
  
  &:nth-of-type(4) {
    height: 30%;
    width: 30%;
    left: 35%;
    background-color: white;
    background-image: linear-gradient(top right, fade(white, 70%) 0%, fade(@blue, 40%) 100%);
    opacity: 1;
    z-index: 4;
  }
}

.banner__campfire-spark {
  position: absolute;
  bottom: 50%;
  left: 25%;
  width: 4px;
  height: 4px;
  background: rgba(255, 106, 0, 0.4);
  opacity: 0;
  
  animation-name: fly-up-burnout-1;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: .4s;
  
  &:nth-of-type(2n) {
    animation-name: fly-up-burnout-2;
    animation-duration: 8.4s;
    animation-delay: 1s;
  }
  &:nth-of-type(3n) {
    animation-delay: 1.9s;
    animation-duration: 8s;
    left: 52%;
  }
  &:nth-of-type(4n) {
    animation-delay: 2.6s;
    animation-duration: 7s;
    left: 72%;
  }
  &:nth-of-type(5n) {
    animation-delay: 1.4s;
    animation-duration: 7s;
    left: 24%;
  }
  &:nth-of-type(6n) {
    animation-delay: 3.2s;
    left: 59%;
  }
  &:nth-of-type(7n) {
    animation-delay: .8s;
    animation-duration: 5s;
    left: 62%;
  }
  &:nth-of-type(8n) {
    animation-delay: 5s;
    left: 22%;
  }
  &:nth-of-type(9n) {
    animation-delay: 4s;
    animation-duration: 6.8s;
    left: 25%;
  }
  &:nth-of-type(10n) {
    animation-delay: 5.2s;
    left: 58%;
  }
  &:nth-of-type(11n) {
    animation-delay: 3.5s;
    animation-duration: 8s;
    left: 69%;
  }
  &:nth-of-type(12n) {
    animation-delay: 2s;
    left: 70%;
  }
}

@keyframes burn-left {
  0%, 100%{transform: rotate(-45deg)  skew(-10deg, -10deg) scale(1);}
  30%, 60%{transform: rotate(-44deg)  skew(-12deg, -12deg) scale(1.01);}
}

@keyframes burn-right {
  0%, 100%{transform: rotate(-45deg)  skew(-10deg, -10deg) scale(1);}
  30%, 60%{transform: rotate(-46deg)  skew(-6deg, -6deg) scale(1.01);}
}

@keyframes fly-up-burnout-1 {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  
  33%{
    transform: translate(12px, -70px);
  }
  
  66% {
    transform: translate(0, -140px);
    opacity: .6;
  }
  
  100% {
    transform: translate(6px, -200px);
    opacity: 0;
  }
}

@keyframes fly-up-burnout-2 {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  
  50%{
    transform: translate(-10px, -80px);
  }
  
  80% {
    transform: translate(-4px, -140px);
    opacity: .6;
  }
  
  100% {
    transform: translate(-6px, -160px);
    opacity: 0;
  }
}

.cf-cls-2{fill:url(#linear-gradient);}

.banner__tree-holder {
  position: absolute;
  bottom: 0;
  left: 50%;
  height: 100%;
  transform: translateX(-50%);
  width: 1px;
}

.banner__tree {
  fill: #282d27;
  position: absolute;
  bottom: 100%;
  height: 288px;
  filter: drop-shadow(0 0 3px #473726);
  width: 200px;
  margin-bottom: -10px;
}
.banner__tree--1 {
  right: 0;
  transform: translateX(-65%);
}
.banner__tree--2,
.banner__tree--4,
.banner__tree--5 {
  display: none;
}
.banner__tree--3 {
  height: 338px;
  left: 0;
  transform: translateX(50%);
  width: 235px;
}

.built-by {
  bottom: 0;
  font-size: 15px;
  left: 50%;
  margin-top: 18px;
  position: absolute;
  text-align: center;
  transform: translateX(-50%);
}

.built-by__link {
  background: fade(#fff, 70%);
  border-radius: @border-radius;
  color: @color-outer-space;
  display: inline-block;
  line-height: 26px;
  padding: 5px 8px;
  padding-right: 46px;
  position: relative;
  text-decoration: none;

  &:hover,
  &:focus {
    background: #fff;
    color: lighten(@color-outer-space, 10%);
  }
}

.built-by__link svg {
  position: absolute;
  right: 8px;
  top: 5px;
}

.gs-1 {
  fill: #fbad50;
}

.gs-2 {
  fill: #b86d29;
}

.gs-3 {
  fill: #fff;
}

.banner__sun {
  background: #fff;
  box-shadow: 0 0 5px 10px #FFEDDD, 0 0 5px 20px rgba(255, 237, 221, 0.7), 0 0 5px 30px rgba(255, 237, 221, 0.4), 0 0 5px 40px rgba(255, 237, 221, 0.22);
  border-radius: 50%;
  left: 0;
  height: 30vh;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 0;
  width: 30vh;
}

.banner__content {
  color: #fff;
  left: 50%;
  max-width: 850px;
  padding: 0 15px;
  position: absolute;
  top: 6vh;
  transform: translateX(-50%);
  text-align: center;
  width: 100%;
}

.banner__title {
  font-size: 28px;
}

.banner__text {
  font-size: 18px;
}

.signup-form {
  display: table;
  margin: 30px auto 0;
  max-width: 450px;
  width: 100%;
}

.addon-cell {
  display: table-cell;
  vertical-align: top;
}

.signup-form .form-control {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.signup-form .btn {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  display: table-cell;
  height: 42px;
  line-height: 42px;
  min-width: 40px;
  padding: 0 10px;
  width: 100%;
}

@media (min-width: 552px) {
  .banner__ground {
    height: 130px;
  }
  .banner__tree {
    transform: none;
  }
  .banner__tree--1 {
    left: auto;
    right: 15vw;
  }
  .banner__tree--3 {
    left: 20vw;
  }
  .banner__content {
    top: 9vh;
  }
  .banner__title {
    font-size: 42px;
  }
}

@media (min-width: 768px) {
  .banner__tree {
    display: block;
  }
  .banner__tree--2 {
    height: 324px;
    right: 27vw;
    width: 225px;
  }
  .banner__tree--4 {
    left: 30vw;
  }
  .banner__tree--5 {
    left: 40vw;
    height: 324px;
    width: 225px;
  }
}

@media (min-width: 992px) {
  .banner__title {
    font-size: 50px;
  }
  .banner__text {
    font-size: 22px;
  }
}