/* FONT CLASSES */

@font-face {
  font-family: cerebriReg;
  src: url('fonts/CerebriSans-Regular.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/CerebriSans-Regular.ttf')  format('truetype'); /* Safari, Android, iOS */
}
@font-face {
  font-family: cerebriMed;
  src: url('fonts/CerebriSans-Medium.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/CerebriSans-Medium.ttf')  format('truetype'); /* Safari, Android, iOS */
}
@font-face {
  font-family: cerebriSemi;
  src: url('fonts/CerebriSans-SemiBold.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/CerebriSans-SemiBold.ttf')  format('truetype'); /* Safari, Android, iOS */
}
@font-face {
  font-family: cerebriBold;
  src: url('fonts/CerebriSans-Bold.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/CerebriSans-Bold.ttf')  format('truetype'); /* Safari, Android, iOS */
}

@font-face {
    font-family: Mercdisplay;
    src: url('fonts/Mercury-DisplayRoman.woff') format('woff'),
    url('fonts/Mercury-DisplayRoman.otf') format('otf'); /* Safari, Android, iOS */
  }
  @font-face {
    font-family: MercdisplayBold;
    src: url('fonts/Mercury-DisplayBold.woff') format('woff'),
    url('fonts/Mercury-DisplayBold.otf') format('otf'),; /* Safari, Android, iOS */
  }

  @font-face {
    font-family: gothambold;
    src: url('fonts/gotham-bold-webfont.woff') format('woff'),
         url('fonts/gotham-bold-webfont.ttf') format('truetype'),; /* Safari, Android, iOS */
  }


.mercDisplay {
      font-family: Mercdisplay;
font-style: normal;
font-weight: 400;
}

.mercDisplayIt {
      font-family: Mercdisplay;
font-style: italic;
font-weight: 400;
}

.mercSemi {
  font-family: MercdisplayBold;
font-style: normal;
font-weight: 600;
}

.mercSemiIt {
  font-family: MercdisplayBold;
font-style: italic;
font-weight: 600;
}

.mercDisplayBold {
      font-family: MercdisplayBold;
font-style: normal;
font-weight: 700;
}

.mercDisplayBoldIt {
      font-family: MercdisplayBold;
font-style: italic;
font-weight: 700;
}

.gothBold {
    font-family: gothambold;
font-style: normal;
font-weight: 700;
}

.cerebriReg {
    font-family: cerebriReg;
    font-weight: normal;
    font-style: normal;
}

.cerebriMed {
    font-family: cerebriMed;
    font-weight: normal;
    font-style: normal;
}

.cerebriSemi {
    font-family: cerebriSemi;
    font-weight: normal;
    font-style: normal;
}

.cerebriBold {
    font-family: cerebriBold;
    font-weight: normal;
    font-style: normal;
}

.Cera-Black {
    font-family: Cera-Black;
    font-weight: normal;
    font-style: normal;
}
.Cera-Bold {
    font-family: Cera-Bold;
    font-weight: normal;
    font-style: normal;
}
.Cera-Light {
    font-family: Cera-Light;
    font-weight: normal;
    font-style: normal;
}
.Cera-BlackItalic {
    font-family: Cera-BlackItalic;
    font-weight: normal;
    font-style: normal;
}
.Cera-LightItalic {
    font-family: Cera-LightItalic;
    font-weight: normal;
    font-style: normal;
}
.Cera-BoldItalic {
    font-family: Cera-BoldItalic;
    font-weight: normal;
    font-style: normal;
}
.Cera-Medium {
    font-family: Cera-Medium;
    font-weight: normal;
    font-style: normal;
}
.Cera-MediumItalic {
    font-family: Cera-MediumItalic;
    font-weight: normal;
    font-style: normal;
}
.Cera-Regular {
    font-family: Cera-Regular;
    font-weight: normal;
    font-style: normal;
}
.Cera-Thin {
    font-family: Cera-Thin;
    font-weight: normal;
    font-style: normal;
}
.Cera-RegularItalic {
    font-family: Cera-RegularItalic;
    font-weight: normal;
    font-style: normal;
}
.Cera-ThinItalic {
    font-family: Cera-ThinItalic;
    font-weight: normal;
    font-style: normal;
}

.sentBook {
font-family: "Sentinel A", "Sentinel B";
font-style: normal;
font-weight: 400;
}

.sentBookIt {
font-family: "Sentinel A", "Sentinel B";
font-style: italic;
font-weight: 400;
}

.sentMed {
font-family: "Sentinel A", "Sentinel B";
font-style: normal;
font-weight: 500;
}

.sentMedIt {
font-family: "Sentinel A", "Sentinel B";
font-style: italic;
font-weight: 500;
}

.sentBold {
  font-family: "Sentinel A", "Sentinel B";
font-style: normal;
font-weight: 700;
}

.sentBoldIt {
  font-family: "Sentinel A", "Sentinel B";
font-style: italic;
font-weight: 700;
}


/* COLORS */

.dark-blue {
    background:#222a42;
}

.deep-blue {
    background:#253560;
}

/*.leafy-green {
    background:#3EA03E;
}

.green {
    background:#89c540;
}*/

.dark-green {
    background:#009444;
}

.dark-grey {
    background:#414042;
}

.light-blue {
    background:skyblue;
}

.deep-pink {
    background:deeppink;
}

.orange {
    background:orange;
}

.red  {
    background:#EF4836;
}

/* TYPE */


p, h1, h2, h3, h4, h5, h6, li, ul {
    color:#222222;
    -webkit-font-smoothing:antialiased;
}

.fullWidth {
    width:100%;
    max-width:100%;
    height:auto;
}

::-webkit-scrollbar {
    display: none;
}

body {
/*        overflow-y:scroll;
    overflow-x:hidden;*/
    height:auto !important;
}

/* structure */
section.hero {
    padding-top: 15%;
    padding-bottom: 15%;
}


.hero-columns {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.about-block {
    padding-top: 8rem;
    padding-bottom: 8rem;
    background: #fff;
}

.header-bar {
    position:relative;
    z-index:5;
    padding-top:2.5%;
    padding-bottom:2.5%;
    background:#444;
}

.text {
    color:#444;
}

.main-container {
    position:relative;
    z-index:4;
    height:100%;
    overflow-y:scroll;
    overflow-x:hidden;
}

.hero-block {
    padding: 4% 0%;
    /* background: url(img/makehalftoned.jpg); */
    background-size: cover;
    overflow: hidden;
    position: relative;
    background: #fff;
}

.device-image-wrap {
    position: absolute;
    top: 6rem;
    right: -10rem;
    float: right;
    z-index: 0;
    width: 48rem;
}

.content--bigcallout {
    font-size: 1.7rem;
    line-height: 3.4rem;
}

.content--main {
    font-size: 1.34rem;
    line-height: 2.44rem;

}

.hands {
    width: 43%;
    position: absolute;
    z-index: 0;
    top: 0;
    right: -6rem;
}

.number-card {
    /* border: 2px solid #222; */
    height: auto;
}

.bignumber {
    border: 2px solid #222;
    margin-bottom: 0%;
    font-size: 3.8rem;
    padding: .6rem 0rem;
}

.number-heading {
     padding: 1rem 0%;
    /* height: 2rem; */
    border: 2px solid #222;
    margin-bottom: 0%;

}


/* PRELOAD BITCH */ 

.preload {
    background: url(img/minertrans.png) no-repeat -9999px -9999px;
    background: url(img/minertrans.png) no-repeat -9999px -9999px,
            url(img/minerarray.png) no-repeat -9999px -9999px,
            url(img/heatshield.png) no-repeat -9999px -9999px,
            url(img/case_cut.png) no-repeat -9999px -9999px;
            position:inline;
            height:0px;
            width:0px;
    }


.introduction-block {
    padding-top: 4rem;
    padding-bottom: 4rem;
    margin-bottom: 2rem;
}

/* SCROLLY BLOCK STYLES =====================================*/

.scroll-block {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background: #fff;
}
.scroll-img-holder.campfire-case {
    position: relative;
    min-height: 150vh;
    width: 100%;
}
.campfire-case .scroll-img {
    position: absolute;
}

.scroll-img-holder{
  transition: transform .7s ease;
}


.holder-row {
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  align-content:center;
}

/* sizing */

.heat-shield .scroll-img {
    max-width: 27.8rem;
}
.miner-array .scroll-img {
    max-width: 28rem;
}
.miner-single .scroll-img {
    max-width: 27rem;
}

.hand-case .scroll-img {
    max-width: 9.52rem;
}

/* layering */

.top-cutter {
    position: absolute;
    z-index: 5;
    bottom: 0rem;
    /* margin-bottom: 5rem; */
}

.top-shadow {
    position: absolute;
    z-index: 4;
    /* transform: translateY(-38rem); */
    bottom: 0rem;
}

.heater-shadow {
    position: absolute;
    bottom: 0rem;
    z-index: 4;
    transition:all 1s ease;
}

.bottom-cutter {
    position: absolute;
    bottom: 0rem;
    z-index: 6;
}

.bottom-shadow {
    position: absolute;
    bottom: 0rem;
    z-index: 4;
}

.case {
    position: relative;
    bottom: 0rem;
    z-index: 2;
}

.heat-shield {
    z-index: 3;
    position: relative;
        margin-bottom: 35rem;

}

.miner-array {
    z-index: 1;
        margin-bottom: 35rem;

}

.miner-single {
    z-index: 4;
        margin-bottom: 35rem;

}

.miner-single.topdown {
    z-index: 4;
        /*margin-bottom: 49rem;*/

}

.hand-case {
        z-index: 3;
    position: relative;
    margin-bottom: 35rem;
        margin-top: 0rem;
}

.hand-case.topdown {
        z-index: 3;
    position: relative;
    margin-bottom: 35rem;
        margin-top: 5rem;
}

/* text */

.scroll-content-holder {
    transform: translateX(22rem) translateY(-25.5rem);
    transition: all .4s ease;
    max-width: 25rem;
    min-height: 20rem;
    max-height: 20rem;
    /*background: red;*/
}

.left-section {
    transform: translateX(-45rem) translateY(-61.5rem);
    transition: all .4s ease;
    width: 57rem;
    /* background: red; */
    position: absolute;
}

.nudge-it {
    transform: translateX(30rem) translateY(-25.5rem);
}

/*.scroll-content-holder {
    transform: translateX(30rem) translateY(-19.5rem);
    transition: all .4s ease;
}*/


/* transitions */

.heater-shadow .scroll-img {
    transition:all 1s ease;
}

.hide-dat {
    opacity:0;
}



/* END SCROLLY REGION STYLES =====================================*/


.toggles {
    font-size: 2.2rem;
    color: #898989;
    padding-left: .2rem;
    padding-right: .2rem;
    cursor: pointer;
}

.toggles:hover {
    color: #706d6d;
    transition:all .5s ease;
}

.toggles:focus {
    color: #706d6d;
    transition:all .5s ease;
}

.toggles-holder {
    position: absolute;
    top: -3.45rem;
}

.inactive {
    opacity: .7;
    /*pointer-events: none;*/
}

.no-m {
    margin-bottom:0px;
}

.green-b {
    background:#bada55;
}

.hero-contain {
    padding-top: 5rem;
    padding-bottom: 10rem;
}

.hero-contain .content-row .content-cell {
    padding: 2rem;
}

/*.hero-contain .content-row:nth-child(2) {
  margin-top: 0px;
  padding: 6.5rem;
    padding-top: 0rem;
    padding-bottom: 7.5rem;

}
*/

.product-callout .price {
    font-size: 2.2rem;
}

.product-callout .dolla-sign {
    font-size: 1.45rem;
    transform: translateY(-.5rem);
    display: inline-block;
}

.half-holder {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
}

.left-half {
    background: #fbe7e9;
    transition:background .3s ease;
}

.right-half {
    background: #f8f8f8;
    transition:background .3s ease;
}

.left-half .button-row {
    background: #fff !important;
    position: relative;
}

.right-half .button-row {
    background: #fff !important;
    position: relative;
}



.grid-left .number-heading:nth-of-type(1) {

    /* height: 2rem; */
    border: 2px solid #222;
    border-right:none;
     border-bottom:none;
    margin-bottom: 0%;
}

.grid-left .number-heading:nth-of-type(3) {

    /* height: 2rem; */
    border: 2px solid #222;
    margin-bottom: 0%;
     border-right:none;
     border-top:none;
}

.grid-middle .number-heading:nth-of-type(1) {

    /* height: 2rem; */
    border: 2px solid #222;
    margin-bottom: 0%;
     border-bottom:none;
}

.grid-middle .number-heading:nth-of-type(3) {

    /* height: 2rem; */
    border: 2px solid #222;
    margin-bottom: 0%;
     border-top:none;
}

.grid-right .number-heading:nth-of-type(1) {

    /* height: 2rem; */
    border: 2px solid #222;
    margin-bottom: 0%;
        border-left:none;
     border-bottom:none;
}

.grid-right .number-heading:nth-of-type(3) {

    /* height: 2rem; */
    border: 2px solid #222;
    margin-bottom: 0%;
        border-left:none;
     border-top:none;
}

.grid-left .bignumber {
     border-right:1px;
}
.grid-middle .bignumber {
     /*border-right:1px;*/
}
.grid-right .bignumber {
    border-left:1px;
}


.number-card.grid-left {
    box-shadow: -13px 13px #222;
    position: relative;
    z-index: 3;
    background: #fff;
    margin-bottom: 2.8rem;
}

.number-card.grid-middle {
    box-shadow: -13px 13px #222;
    position: relative;
    z-index: 2;
    background: #fff;
    margin-bottom: 2.8rem;
}

.number-card.grid-right {
    box-shadow: -13px 13px #222;
    position: relative;
    z-index: 1;
    background: #fff;
    margin-bottom: 2.8rem;
}


.info-block {
 background-size:contain;
 background-position: 0% 50%;
 background-repeat:no-repeat;
 background-color:#fff;
        padding: 8% 0%;
        position:relative;
        overflow:hidden;
}

.board {
    position: absolute;
    z-index: 0;
    top: -4rem;
    left: -11rem;
    width: 40rem;
}


/*.glitchchip {
    position: absolute;
    z-index: 0;
    top: -4rem;
    left: -11rem;
    width: 40rem;
}*/

.about-makeathon .content--main {
    color: #222;
}

.info-card {
    background: white;
    padding-top: 4%;
    padding-left: 4%;
    padding-right: 4%;
    padding-bottom: 4%;
    border:2px solid #222;
    box-shadow: -13px 13px #222222;

}

.video-block {
    padding: 3.5% 0%;
      animation-name: dothething;
  animation-duration: 8s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
/*background: -moz-linear-gradient(left, rgba(45,45,45,.6) 0%, rgba(37,56,152,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(45,45,45,.6)), color-stop(100%, rgba(37,56,152,1)));
background: -webkit-linear-gradient(left, rgba(45,45,45,.6) 0%, rgba(37,56,152,1) 100%);
background: -o-linear-gradient(left, rgba(45,45,45,.6) 0%, rgba(37,56,152,1) 100%);
background: -ms-linear-gradient(left, rgba(45,45,45,.6) 0%, rgba(37,56,152,1) 100%);
background: linear-gradient(to right, rgba(45,45,45,.6) 0%, rgba(37,56,152,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e62646', endColorstr='#253898', GradientType=1 );*/
fill:#222;
}




@keyframes dothething {
  0% {
    background: #19DCF5;
  }

  50% {
    background: #00FF00;
  }

  100% {
    background: #FFF200;
  }
}

.hide-it {
  display:none;
}


.feature-wrap .content-wrap p, .feature-wrap .content-wrap h2 {
    color: #01B8AF;
}

.feature-wrap {
    padding:2.5rem;
}

.illustration.traffic {
    background-image:url('img/traffic_illo.svg');
}

.illustration.devices {
    background-image:url('img/devices_illo.svg');
}

.illustration.park {
    background-image:url('img/park_illo.svg');
}

.illustration {
    height: 15rem;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 2.5rem;
    background-position: center center;
}




.title--main .link-in-text {
    color:rgba(253,184,44,1);
    transition:color .4s ease, border-bottom .4s ease;
    -webkit-transition:color .4s ease, border-bottom .4s ease;
    -moz-transition:color .4s ease, border-bottom .4s ease;
    -ms-transition:color .4s ease, border-bottom .4s ease;
    border-bottom:2px solid rgba(253,184,44,1);
        padding-bottom: .25%;
}

.title--main .link-in-text:hover {
color:rgba(237,51,147,1);
    transition:color .4s ease, border-bottom .4s ease;
    -webkit-transition:color .4s ease, border-bottom .4s ease;
    -moz-transition:color .4s ease, border-bottom .4s ease;
    -ms-transition:color .4s ease, border-bottom .4s ease;
       border-bottom:2px solid rgba(237,51,147,1);
        padding-bottom: .25%;
}

.title--main .link-in-text:focus {
color:rgba(237,51,147,1);
    transition:color .4s ease, border-bottom .4s ease;
    -webkit-transition:color .4s ease, border-bottom .4s ease;
    -moz-transition:color .4s ease, border-bottom .4s ease;
    -ms-transition:color .4s ease, border-bottom .4s ease;
       border-bottom:2px solid rgba(237,51,147,1);
        padding-bottom: .25%;
}


.link-in-text {
    color:rgba(25, 25, 25, .6);
    transition:color .4s ease, border-bottom .4s ease;
    -webkit-transition:color .4s ease, border-bottom .4s ease;
    -moz-transition:color .4s ease, border-bottom .4s ease;
    -ms-transition:color .4s ease, border-bottom .4s ease;
    border-bottom:2px solid rgba(25, 25, 25, .5);
        padding-bottom: .25%;
}

.link-in-text:hover {
color:rgba(25, 25, 25, 1);
    transition:color .4s ease, border-bottom .4s ease;
    -webkit-transition:color .4s ease, border-bottom .4s ease;
    -moz-transition:color .4s ease, border-bottom .4s ease;
    -ms-transition:color .4s ease, border-bottom .4s ease;
       border-bottom:2px solid rgba(25, 25, 25, 1);
        padding-bottom: .25%;
}

.link-in-text:focus {
color:rgba(25, 25, 25, 1);
    transition:color .4s ease, border-bottom .4s ease;
    -webkit-transition:color .4s ease, border-bottom .4s ease;
    -moz-transition:color .4s ease, border-bottom .4s ease;
    -ms-transition:color .4s ease, border-bottom .4s ease;
       border-bottom:2px solid rgba(25, 25, 25, 1);
        padding-bottom: .25%;
}


.magenta-t {
color:#ED3393 !important;
}

.yellow-t {
color:#FDB82C;
}

.pad-bot--small {
 padding-bottom:2rem;
}

.pad-top--small {
 padding-top:2rem;
}

.pad-bot--medium {
 padding-bottom:4rem;
}

.pad-top--medium {
 padding-top:4rem;
}

.pad-bot--large {
 padding-bottom:6rem;
}

.pad-top--large {
 padding-top:6rem;
}

.pad-bot--xlarge {
 padding-bottom:8rem;
}

.pad-top--xlarge {
 padding-top:8rem;
}




.pad-right {
 padding-right:2rem;
}

.colab-content .link-in-text {
    color:rgba(45,45,45,.6);
    transition:color .4s ease, border-bottom .4s ease;
    -webkit-transition:color .4s ease, border-bottom .4s ease;
    -moz-transition:color .4s ease, border-bottom .4s ease;
    -ms-transition:color .4s ease, border-bottom .4s ease;
    border-bottom:2px solid rgba(45,45,45,.6);
        padding-bottom: .25%;
}

.colab-content .link-in-text:hover {
color:rgba(255,41,148,1);
    transition:color .4s ease, border-bottom .4s ease;
    -webkit-transition:color .4s ease, border-bottom .4s ease;
    -moz-transition:color .4s ease, border-bottom .4s ease;
    -ms-transition:color .4s ease, border-bottom .4s ease;
       border-bottom:2px solid rgba(255,41,148,1);
        padding-bottom: .25%;
}

.colab-content .link-in-text:focus {
color:rgba(255,41,148,1);
    transition:color .4s ease, border-bottom .4s ease;
    -webkit-transition:color .4s ease, border-bottom .4s ease;
    -moz-transition:color .4s ease, border-bottom .4s ease;
    -ms-transition:color .4s ease, border-bottom .4s ease;
       border-bottom:2px solid rgba(255,41,148,1);
        padding-bottom: .25%;
}



.content--bigcallout .link-in-text {
    color:rgba(45,45,45,.6);
    transition:color .4s ease, border-bottom .4s ease;
    -webkit-transition:color .4s ease, border-bottom .4s ease;
    -moz-transition:color .4s ease, border-bottom .4s ease;
    -ms-transition:color .4s ease, border-bottom .4s ease;
    border-bottom:2px solid rgba(45,45,45,.6);
        padding-bottom: .25%;
}

.content--bigcallout .link-in-text:hover {
color:rgba(255,41,148,1);
    transition:color .4s ease, border-bottom .4s ease;
    -webkit-transition:color .4s ease, border-bottom .4s ease;
    -moz-transition:color .4s ease, border-bottom .4s ease;
    -ms-transition:color .4s ease, border-bottom .4s ease;
       border-bottom:2px solid rgba(255,41,148,1);
        padding-bottom: .25%;
}

.content--bigcallout .link-in-text:focus {
color:rgba(255,41,148,1);
    transition:color .4s ease, border-bottom .4s ease;
    -webkit-transition:color .4s ease, border-bottom .4s ease;
    -moz-transition:color .4s ease, border-bottom .4s ease;
    -ms-transition:color .4s ease, border-bottom .4s ease;
       border-bottom:2px solid rgba(255,41,148,1);
        padding-bottom: .25%;
}


.price {
  font-size:3rem;
}

.dolla-sign {
    font-size:2rem;
    transform:translateY(-.5rem);
    display:inline-block;
}

.indicator {
    display: inline-block;
    float: right;
    position: absolute;
    left: 3.95rem;
    top: .6rem;
    width: 6rem;
        transition:all .2s ease;
    color: #b6b6b6 !important;
}

.add-miner-holder {
    position: absolute;
    top: 3rem;
    right: -5rem;
    transition:all .5s ease;
        transform-origin: left;
}

/*.add-miner-holder.open {
    transform:translateX(6rem);
    transform-origin: left;
    transition:all .5s ease;
}
*/
/*.add-miner-holder.open .add-miner {
    width: 13rem;
    transform: translateX(3rem);
    transition:all .5s ease;
    transform-origin: left;
}*/

.add-miner {
       width: 3rem;
    height: 3rem;
    background: #efefef;
    border-radius: 3rem;
    font-size: 1rem;
    display:flex;
    justify-content:center;
    align-items: center;
    align-content: center;
        transform-origin: left;
}

.button-row {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
}

/*.add-icon {
    font-size: 1.95rem;
    color: #b6b6b6;
    margin-bottom: 0px;
}*/

.add-miner-holder .add-icon {
    font-size: 1.95rem;
    color: #b6b6b6;
    margin-bottom: 0px;
    /*transform: translateX(1.58rem);*/
    transition:all .5s ease;
}

/*.add-miner-holder.open .add-icon {
    font-size: 1.95rem;
    color: #b6b6b6;
    margin-bottom: 0px;
    transform: translateX(0rem);
    transition:all .5s ease;
}*/

.buy-button {
    background: #f9f9f9;
    color:#635c55;
    padding: 1rem;
    display: block;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-radius: 5px;
    box-shadow: 0px 6px 9px 0px rgba(0,0,0,.2);
    transition:all .4s ease;
}

.buy-button h2, .buy-button p {
    color:#635c55;
    transition:all .4s ease;
}

.buy-button:hover {
    background: #635c55;
    color:#f9f9f9;
    padding: 1rem;
    display: block;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-radius: 5px;
    box-shadow: 0px 8px 22px 0px rgba(0,0,0,.2);
    transition:all .4s ease;

}

.buy-button:hover ~ h2, .buy-button:hover ~ p {
    color:#f9f9f9;
}

.buy-button h2:hover, .buy-button p:hover {
    color:#f9f9f9;
    transition:all .4s ease;
}


.buy-button-normal {
    background: #f9f9f9;
    color:#635c55 !important;
    padding: 1rem;
    display: block;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-radius: 5px;
    box-shadow: 0px 6px 9px 0px rgba(0,0,0,.2);
    transition:all .4s ease;
}


.buy-button-normal:hover {
    background: #635c55;
    color:#f9f9f9 !important;
    padding: 1rem;
    display: block;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-radius: 5px;
    box-shadow: 0px 8px 22px 0px rgba(0,0,0,.2);
    transition:all .4s ease;

}

.buy-button-normal:focus {
    background: #635c55;
    color:#f9f9f9 !important;
    padding: 1rem;
    display: block;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-radius: 5px;
    box-shadow: 0px 8px 22px 0px rgba(0,0,0,.2);
    transition:all .4s ease;

}

.apply-button {
color:#fff;
border:2px solid #02B8AF;
background:#02B8AF;
transition:color .4s ease, border .4s ease, background .4s ease;
    -webkit-transition:color .4s ease, border .4s ease, background .4s ease;
    -moz-transition:color .4s ease, border .4s ease, background .4s ease;
    -ms-transition:color .4s ease, border .4s ease, background .4s ease;
}

.apply-button:hover {
color:#02B8AF;
border:2px solid #02B8AF;
background:#fff;
transition:color .4s ease, border .4s ease, background .4s ease;
    -webkit-transition:color .4s ease, border .4s ease, background .4s ease;
    -moz-transition:color .4s ease, border .4s ease, background .4s ease;
    -ms-transition:color .4s ease, border .4s ease, background .4s ease;
}

.apply-button:focus {
color:#02B8AF;
border:2px solid #02B8AF;
background:#fff;
transition:color .4s ease, border .4s ease, background .4s ease;
    -webkit-transition:color .4s ease, border .4s ease, background .4s ease;
    -moz-transition:color .4s ease, border .4s ease, background .4s ease;
    -ms-transition:color .4s ease, border .4s ease, background .4s ease;
}


.apply-button.white {
color:#02B8AF;
border:2px solid #fff;
background:#fff;
transition:color .4s ease, border .4s ease, background .4s ease;
    -webkit-transition:color .4s ease, border .4s ease, background .4s ease;
    -moz-transition:color .4s ease, border .4s ease, background .4s ease;
    -ms-transition:color .4s ease, border .4s ease, background .4s ease;
}

.apply-button.white:hover {
color:#fff;
border:2px solid #fff;
background:transparent;
transition:color .4s ease, border .4s ease, background .4s ease;
    -webkit-transition:color .4s ease, border .4s ease, background .4s ease;
    -moz-transition:color .4s ease, border .4s ease, background .4s ease;
    -ms-transition:color .4s ease, border .4s ease, background .4s ease;
}

.apply-button.white:focus  {
color:#fff;
border:2px solid #fff;
background:transparent;
transition:color .4s ease, border .4s ease, background .4s ease;
    -webkit-transition:color .4s ease, border .4s ease, background .4s ease;
    -moz-transition:color .4s ease, border .4s ease, background .4s ease;
    -ms-transition:color .4s ease, border .4s ease, background .4s ease;
}

.apply-block {
    padding: 18% 0%;
    background: #fff;
    background-repeat: no-repeat;
    width: 100%;
    background-position: bottom center;
    position:relative;
    padding-left: 5%;
    padding-right: 5%;
        overflow: hidden;
}

.fellowship-block {
    padding: 8% 0%;
    background: #222;
    padding-left: 5%;
    padding-right: 5%;
      background:url('img/halftonedtest3.jpg');
      background-size:cover;
      position:relative;

}



.footer-block {
        padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 3rem;
    padding-right: 3rem;
    background:#444;
}

.list-wrap--social {

    list-style: none;
    padding-left: 0%;
    margin-left: 0%;
    margin-top: 0rem;

}

.copyright {
    text-align: right;
    padding-top: .1rem;
    font-size: 1.2rem;
}

.socialicon {
        height: 2rem;
    display: inline-block;
}

li.list--social {
       margin-left: 1.6rem;
    float:left;
}

.bring-it-up {
    z-index: 1;
    position:relative;
}

.hands {
    width: 43%;
    position: absolute;
    z-index: 0;
    top: 0;
    right: -6rem;
}

.social-kilt {
    float:left;
}

.content--callout {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 0%;
}

.about-makeathon {
    padding-left: 1%;
    font-size: 1.4rem;
}

.about-colab .title--info {
    padding-left: 6%;
    padding-right: 6%;
    padding-top: 5%;
}

.about-colab .content--main {
    padding-left: 6%;
    padding-right: 6%;
    padding-bottom: 5%;
    font-size: 1.235rem;
}

.about-colab {
    /* padding: 4%; */
    background: #fff;
    font-size: 1.4rem;

}

ul.list--fellowship {
    list-style: url("img/plus.svg");
    padding-top: 3%;
    padding-left: 2%;
    margin-left: 0%;
    padding-bottom: 0%;
}

.content--fellow {
    color: #fff;
    padding-bottom: 1%;
    margin-bottom: 0%;
    font-size: 1.23rem;
}

.homestead-logo {
    width: 9.5rem;
    margin-bottom: 4%;
}

.homestead-logo svg {
    width: 100%;
}

.colab-content {
    padding-top: 4%;
}

.tiny {
    font-size: .85rem !important;
}

.blue-t {
     color: #222;
}

.title--info {
    color: #222;
    line-height: 1.8rem !important;
    margin-bottom: 0%;
}

.title--small {
    font-size:1.8rem;
}

a.apply-button {
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 3%;
    padding-right: 3%;
    font-size: 1.4rem;
}

.apply-row {
    padding-left: 3%;
    padding-right: 3%;
    padding-bottom: 3%;
}

.box-row {
    padding-left: 3%;
    padding-right: 3%;
    padding-bottom: 3%;
}

.content--info {
    color: #222;
    padding-bottom: 1%;
    margin-bottom: 0%;
    font-size: 1.2rem;
}

ul.list--info {
    list-style: none;
    padding-top: 3%;
    padding-left: 0%;
    margin-left: 0%;
    padding-bottom: 0%;
}

.content--info {
    color: #222;
}

.wide {
    letter-spacing: .2rem;
}

.title--main {
    font-size: 2.14rem;
    line-height: 3.8rem;
   /* padding-right: 8%;*/
   color:#efefef;
}

.callout--small {
    font-size: 1.8rem;
    line-height: 2.9rem;
    /* padding-right: 8%; */
    color: #efefef;
    padding-top: .2rem;
}

.content--list {
    font-size: 1.6rem;
    margin-bottom: 8%;
   /* padding-left: 6%;*/
    padding-left:3%;
}

li.content--list:hover {
}


.content--list.cyan {
    color: #222;
    border-left:4px solid #19dcf5;
    border-top:0px;
    padding-top:2%;
    padding-bottom:2%;
    padding-right:2%;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
}

li.content--list.cyan:hover {
    background: #19dcf5;
    transition:all .4s ease;
    border-left:4px solid #19dcf5;
    border-top:0px;
}

.content--list.green {
    color: #222;
    border-left:4px solid #00FF00;
    padding-top:2%;
    padding-bottom:2%;
    padding-right:2%;
    transition:all .4s ease;
}

li.content--list.green:hover {
    background: #00FF00;
    transition:all .4s ease;
}

.content--list.magenta {
    color: #222;
    border-left:4px solid #FF2994;
    border-top:0px;
    padding-top:2%;
    padding-bottom:2%;
    padding-right:2%;
    transition:all .4s ease;
}

li.content--list.magenta:hover {
    background: #FF2994;
    transition:all .4s ease;
     border-left:4px solid #FF2994;
    border-top:0px;
}

.content--list.yellow {
    color: #222;
    border-left:4px solid #FFF200;
    padding-top:2%;
    padding-bottom:2%;
    padding-right:2%;
    transition:all .4s ease;
}

li.content--list.yellow:hover {
    background: #FFF200;
    transition:all .4s ease;
}

ul {
    list-style: none;
    padding-left:2%;
    margin-left:0%;
    margin-top:2rem;
}

.callout-block {
    padding: 4rem;
    padding-top: 8rem;
    padding-bottom: 8rem;
}

.magenta-bg {
  background:#FF02A3;
}


.ticket-side {
    position:relative;
    z-index:4;
    height:100vh;
    overflow-x:hidden;
    overflow-y:scroll;
    position:relative;

}

.ticket {
    height: 100vh; /* 105vh */
    background-size: cover; /* 45% */
    background-repeat: no-repeat;
    background-position: center center;
    position:relative;
}

.content-side {
    position:relative;
    z-index:4;
    height:100vh;
     background:#f9f9f9;
    overflow-y:scroll;
    overflow-x:hidden;
    padding-bottom:0%;
}

.advance-button {
    padding-top: 3.5%;
    padding-bottom: 3.5%;
    background:rgba(0,0,0,0);
    margin-bottom:0%;
    letter-spacing:.15rem;
    font-size:1.1rem;
        transition:background .4s ease;
       -webkit-transition:background .4s ease, color .4s ease;
            -moz-transition:background .4s ease, color .4s ease;
                o-transition:background .4s ease, color .4s ease;
                    ms-transition:background .4s ease, color .4s ease;
    position:absolute;
    bottom:0;
        color: #f9f9f9;
}

.advance-button:hover {
    padding-top: 3.5%;
    padding-bottom: 3.5%;
    background:rgba(0,0,0,.2);
    margin-bottom:0%;
    letter-spacing:.15rem;
    font-size:1.1rem;
    transition:background .4s ease;
       -webkit-transition:background .4s ease, color .4s ease;
            -moz-transition:background .4s ease, color .4s ease;
                o-transition:background .4s ease, color .4s ease;
                    ms-transition:background .4s ease, color .4s ease;
    color: #444;
        position:absolute;
    bottom:0;
}

.top-title svg {
    padding-top: 6.5%;
    padding-left: 10%;
    padding-right: 10%;
    width: 100%;
}

.nav-panel {
    opacity:.8;
        transition:opacity .4s ease;
       -webkit-transition:opacity .4s ease;
            -moz-transition:opacity .4s ease;
                o-transition:opacity .4s ease;
                    ms-transition:opacity .4s ease;
}

.nav-panel:hover {
    opacity:1;
        transition:opacity .4s ease;
       -webkit-transition:opacity .4s ease;
            -moz-transition:opacity .4s ease;
                o-transition:opacity .4s ease;
                    ms-transition:opacity .4s ease;

}


.shape {
    pointer-events:none;
    display:block;
}



/* padding-bottom: 5%; */

.left {
    float:left;
}

.right {
    float:right;
}


.rvr_content {
    display:block;
}

.fay_content {
    display:none;
}



.supply-chain-cont {
    padding-left: 1%;
    padding-right: 1%;
}

.copy {
    height: auto;
    padding-top: 1.5%;
    padding-bottom: 1.5%;
    padding-left: 3%;
    padding-right: 3%;
    font-size: 1.7rem;
    padding-left: 5%;
    padding-right: 5%;
    color:#444;
}

.content-section {
       padding-top: 5%;
    padding-bottom: 5%;
        padding-left: 8%;
    padding-right: 8%;
}

.callout-section {
    height: auto;
    padding-top: 1.5%;
    padding-bottom: 1.5%;
    font-size: 2.8rem;
    padding-left: 5%;
    padding-right: 5%;
    color:#444;
    line-height: 3.2rem;
}

.stats-title {
    height: auto;
    font-size: 2.3rem;
    color: #444;
    line-height: 3rem;

}

.stats-sub {
    height: auto;
    font-size: 1.85rem;
    color: #444;
    line-height: 3rem;
    margin-bottom:0;
}

.stats-tiny {
    height: auto;
    font-size: 1.2rem;
    color: #444;
    line-height: 3rem;
    margin-bottom:0;
}

.stats-copy {
    height: auto;
    font-size: 1.5rem;
    color: #444;
    margin-bottom:0;
}

.nutrition-line {
    position: absolute;
    bottom: 6%;
    width: 100%;
}

.row.stats-bottom {
    padding-top: 6%;
}

.nutrition-counter {
    float: left;
    position: absolute;
    top: 5%;
    left: 7%;
}

.relative {
    position:relative;
}

.prediction-image-wrap {
    width: 35rem;
}

.row.fatty {
    max-width: 95rem;
}

img.prediction-screen {
   width:100%;
   height:auto;
   position:relative;
   z-index:5;
   image-rendering: auto;
}

.gletter {
stroke-dasharray: 57;
  stroke-dashoffset: 57;
  animation: dash .4s ease-in-out forwards;
}

.uletter {
stroke-dasharray: 43;
  stroke-dashoffset: 43;
  animation: dash .4s ease-in-out forwards;
      -webkit-animation-delay: .4s; /* Safari 4.0 - 8.0 */
    animation-delay: .4s;
}

.iletter {
stroke-dasharray: 17;
  stroke-dashoffset: 17;
  animation: dash .4s ease-in-out forwards;
        -webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
    animation-delay: 1s;
}


.bubbles {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    width: 11rem;
    background: #efefef;
    border-radius: 11rem;
    height: 11rem;
}

.icon {
    width: 1.2rem;
    display: block;
    padding-top: .4rem;
        opacity: .5;
}

.icon.money-icon {
    width: 1.5rem;
}

.reading {
    font-size: 1.6rem;
    color:#635c55;
}

.bubble-holder {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-content: flex-start;
    align-items: flex-start;
    padding-top: 4.9rem;
}

.switches {
    background: #efefef;
    padding-left: 1.35rem;
    padding-right: 1.35rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-radius: 3rem;
}

/*.floater.hearth {
    width: 37rem;
    bottom: 8rem;
    right: -13rem;
}*/

.floater.hearth {
    width: 37rem;
    bottom: 8rem;
    right: -10rem;
}

.floater {
    position: absolute;
}

.floater.campfire {
    width: 10rem;
    bottom: 9.5rem;
    left: 1rem;
}

.income-holder {
    position: absolute;
    top: 0rem;
}

.usage-holder {
    position: absolute;
    bottom: 0rem;
}

.switchboard {
    margin-top: 11rem;
}

.bubbles.money-b {
    transform: translateX(-2rem);
}
.bubbles.heat-b {
    transform: translateY(8rem);
}
.bubbles.energy-b {
    transform: translateX(2rem);
}

.family-image-wrap {
    height: 45rem;
    overflow: hidden;
display:flex;
justify-content: center;
align-items: center;
align-content: center;
}

.van-image-wrap {
    height: 36rem;
    overflow: hidden;
display:flex;
justify-content: center;
align-items: center;
align-content: center;
padding: 6rem;
}

.hero-image-wrap {
    height: 36rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    margin-bottom: 4.5rem;
}

.filler {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.family-callout {
    position: absolute;
    top: 6rem;
    padding-left: 7.5rem;
    padding-right: 7.5rem;
}

.family-callout-bottom {
        position: absolute;
    bottom: 4rem;
}

/*
old traffic-block stuff
img.traffic-preview {
    position: absolute;
    width: 144vh;
    right: -28vh;
    z-index: 0;
    top: 3vh;
}

.traffic-content {
    padding-left: 4vh;
    width: 33.33333%;
    text-align:left;
}


.traffic-block {
  overflow:hidden;
  height:100vh;
}

.traffic-block .content-row {
    padding-top: 22vh;
    padding-bottom: 22rem;
}*/


.traffic-block {
    overflow: hidden;
    /* display: flex; */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /*height: 100vh;*/
        height: 900px;
}


.traffic-content {
    padding: 2rem;
    padding-left: 7rem;
    padding-right: 7rem;
}

img.traffic-preview {
    position: absolute;
    bottom: -32rem;
    /* width: 8rem; */
    max-width: 86%;
}

.machine-screen {
  max-width:100%;
  width: 100%;
  transform-origin:center center;
}


.content-row {
  margin-top:2rem;
      padding: 2.5rem;
}

.content-row.separator {
  margin-top:3rem;
      padding: 2.5rem;
}

.rain-text {
  text-shadow: 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 20px #fff, 0px 0px 20px #fff, 0px 0px 20px #fff, 0px 0px 20px #fff, 0px 0px 20px #fff, 0px 0px 20px #fff, 0px 0px 40px #fff, 0px 0px 40px #fff, 0px 0px 40px #fff,  0px 0px 40px #fff, 0px 0px 40px #fff, 0px 0px 40px #fff, 0px 0px 50px #fff, 0px 0px 50px #fff, 0px 0px 40px #fff, 0px 0px 50px #fff;
}

.cloud {
    position: absolute;
    top: 0px;
    left: 4rem;
}

.rain {
    position: absolute;
    top: -32px;
    width: 100%;
    z-index: 0;
    opacity:1;
}

.pattern-svg {
    width: 90%;
    z-index: 0;
    opacity:1;
}

.first-rain {
stroke-dasharray: 57;
  stroke-dashoffset: 57;
  animation: rain .9s ease-in-out alternate-reverse infinite;
}

.second-rain {
stroke-dasharray: 57;
  stroke-dashoffset: 57;
  animation: rain .9s ease-in-out alternate-reverse infinite;
  animation-delay:.8s;
}

.third-rain {
stroke-dasharray: 57;
  stroke-dashoffset: 57;
  animation: rain .9s ease-in-out alternate-reverse infinite;
  animation-delay:1s;
}

.fourth-rain {
stroke-dasharray: 57;
  stroke-dashoffset: 57;
  animation: rain .9s ease-in-out alternate-reverse infinite;
  animation-delay:.5s;
}


@keyframes rain {
0% {

stroke-dashoffset: 0;
}

50% {
stroke-dashoffset: 60;
}

51% {
stroke-dashoffset: 60;
}

100% {
stroke-dashoffset: 00;

}

}


@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}



.machine-block {
    /* padding: 2rem; */
    padding-bottom: 5rem;
}

.lites {
    position: absolute;
    transform: rotate(0deg);
    z-index: 6;
    opacity: .38;
    transform-origin: center center;
            -webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
    animation-delay: 1s;
    animation: roll 8s ease-in-out forwards infinite;
}

@keyframes roll {
  0% {
    transform: rotate(0deg);
  }
  13% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.midi-panels {
    background: #fff;
    padding: 1rem;
    border: 4px solid #02B8AF;
}

.predict-wrap {
    display:flex;
    align-items: center;
  justify-content: center;
      padding: 1.25rem;
}

.yellow-block {
    background: #FFB92B;
    width: 120vw;
    height: 50rem;
    position: absolute;
    z-index: 0;
    bottom: 0rem;
}

.teal-t {
    color:#02B8AF !important;
}

.muddy-t {
  color:#635c55 !important;
}

.subhero-row {
    padding-top:1.5rem;
    padding-bottom:3.5rem;
    padding-left:3rem;
    padding-right:3rem;
}

.grad-block {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f4f4f4+0,ffffff+100 */
background: #f4f4f4; /* Old browsers */
background: -moz-linear-gradient(top, #f4f4f4 0%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #f4f4f4 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #f4f4f4 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */   width: 120vw;
    height: 20rem;
    position: absolute;
    z-index: 0;
    top: 0rem;
}

.predict-block {
    padding-top: 8rem;
    padding-bottom: 10rem;
    background:#fff;
    overflow:hidden;
}

.smallcaps {
    font-size: 1.1rem;
    letter-spacing: 0.15rem;
        line-height: 1.4rem;
}

.supersmall {
    font-size: .95rem;
    letter-spacing: 0.2rem;
    line-height: 0rem;
    padding-top:3%;
    padding-left: 2%;
}


.bigcount {
    font-size: 6rem;
    margin-bottom: 0%;
    line-height: 8rem;
}

.row.stats-top {
    padding-top: 7%;
}

.cow  {
    background-image:url('img/babycow.jpg');
    background-color:#000 !important;
}

.cowmom  {
    background-image:url('img/cow-mom.jpg');
    background-color:#000 !important;
}

.facility  {
    background-image:url('img/facility.jpg');
    background-color:#000 !important;
    background-color: #ddd !important;
    opacity: .94;
    background-blend-mode: multiply;
}


.hanging-meat  {
    background-image:url('img/hanging-meat.jpg');
    background-color: #ddd !important;
    opacity: .95;
    background-blend-mode: multiply;
}

.distributor  {
    background-image:url('img/distributor.jpg');
    background-color: #ddd !important;
    opacity: .95;
    background-blend-mode: multiply;
}

.meat-full  {
    background-image:url('img/meat-full.jpg');
    background-color: #ddd !important;
}

.pasture  {
    background-image:url('img/pasture.jpg');
    background-color:#000 !important;
}

.review  {
    background-color:#f9f9f9 !important;
}

.man-cow  {
    background-image:url('img/man-cow.jpg');
    background-color:#000 !important;
}

.beef  {
    background-image:url('img/beef-trim.jpg');
    background-color:#999 !important;
    background-blend-mode: multiply;
}
.fish  {
    background-image:url('img/fish-trim.jpg');
    background-color:#999 !important;
    background-blend-mode: multiply;
}
.grape  {
    background-image:url('img/grape-trim.jpg');
    background-color:#999 !important;
    background-blend-mode: multiply;
}


.beef:hover  {
    background-image:url('img/beef-trim.jpg');
    background-color:#999 !important;
     background-blend-mode: initial !important;

}
.fish:hover  {
    background-image:url('img/fish-trim.jpg');
    background-color:#999 !important;
     background-blend-mode: initial !important;
}
.grape:hover  {
    background-image:url('img/grape-trim.jpg');
    background-color:#999 !important;
     background-blend-mode: initial !important;
}

.hide-on-medium {
  display:block;
}
.hide-for-small {
  display:block;
}

.tiny-copyright {
    color: rgba(255,255,255,0.8);
    width: 17rem;
    font-size: .9rem;
    line-height: 1.2rem;
}

.product-block .content-row {
    /*background:#FF02A3;*/
    background:#ff3fb9;
    margin-top: 0px;
    padding: 6.5rem;
    padding-bottom: 0rem;
    padding-top: 7.5rem;
   /* overflow:hidden;*/
}

.product-block .content-row:nth-child(2) {
  background:#ff3fb9;


/*background: #f2029a;
background: -moz-linear-gradient(0deg, #f2029a 0%, #ff3fb9 100%);
background: -webkit-linear-gradient(0deg, #f2029a 0%,#ff3fb9 100%);
background: linear-gradient(0deg, #f2029a 0%,#ff3fb9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2029a', endColorstr='#ff3fb9',GradientType=1 ); */
  margin-top: 0px;
  padding: 6.5rem;
    padding-top: 0rem;
    padding-bottom: 7.5rem;
  /*  overflow:hidden;*/
}

img.product-img {
    position: absolute;
    bottom: -4rem;
    left: -5rem;
    width: 17rem;
}

img.product-img-top {
    position: absolute;
    top: -5rem;
    right: -5rem;
    width: 17rem;
}

.product-block .content-row .content-cell {
    padding: 2rem;
}

.product-block {
    padding-top: 5rem;
    padding-bottom: 10rem;
}

.bottom-subtitle {
    position: absolute;
    bottom: 9%;
    color: #fff !important;
}

#maincover  {
    background-image:url('img/maincover.jpg');
    background-color:#F85C03 !important;
}

.fay  {
    background-image:url('img/fay.png');
    background-color:#BCCE33 !important;
}

.flo  {
    background-image:url('img/flo.png');
    background-color:#292282 !important;
}

/* .pad-left {
          padding-left:3%;
      }

      .pad-right {
          padding-right:3%;
      }*/

        .pad-bottom {
          padding-bottom:3%;
      }

body {
    background:#fff;
}

.v-center {
    padding-top: 10%;
    padding-bottom: 14%;
}

.sub-callout {
    letter-spacing:.2rem;
}

span.with {
    font-size: 1.8rem;
    /* margin-top: -3%; */
    /* float: left; */
    display: inline;
    /* top: 21px; */
    /* position: absolute; */
}
.show-thickers {
  display:none;
}

.auto-h {
    height:auto;
}

.big-title {
    font-size:6.8rem;
    line-height: 7.8rem;
}

.smaller-title {
    font-size:2.2rem;
}


.medium-title {
    font-size: 2.45rem;
}

.grid-title {
    font-size: 1.8rem;
    margin-bottom: 0%;
}

.lighter-blue {
    background-color:#aae0ff;
}


.blue-button {
    border-radius: 30px;
    margin-top: 3%;
    font-size:1.1rem;
    background:rgb(52,105,202);
}

.blue-button:hover {
    border-radius: 30px;
    margin-top: 3%;
    font-size:1.1rem;
    background:#1583cc;
}

.blue-button-small {
    border-radius: 30px;
    margin-top: 3%;
    font-size:.8rem;
    background:rgb(52,105,202);
}

.blue-button-small:hover {
    border-radius: 30px;
    margin-top: 3%;
    font-size:.8rem;
    background:#1583cc;
}


.cta-link {

    color:rgb(52,105,202);
}

.cta-link:hover {

    color:#1583cc;
}

.gradbg {
    background-image: -moz-linear-gradient( 0deg, rgb(50,175,115) 0%, rgb(78,168,252) 100%);
  background-image: -webkit-linear-gradient( 0deg, rgb(50,175,115) 0%, rgb(78,168,252) 100%);
  background-image: -ms-linear-gradient( 0deg, rgb(50,175,115) 0%, rgb(78,168,252) 100%);
}

.section-title {
    font-size: 1.9rem;
}

.kern75 {
    letter-spacing: .25rem;
}

.kern50 {
    letter-spacing: .15rem;
}

.whiteout {
    color:#fff;
}

.bluegray {
    background:rgb(45, 60, 60);
}

.blueslate {
    background:darkslategray;
}

/* darkslategray */

.whitebg {
    background:#ffffff;
}

.pink {
    background:deeppink;
}

.blue {
    background:skyblue;
}

.caps {
    text-transform:uppercase;
}


.info-block {
    padding-left: 6%;
    padding-right: 5%;
            padding: 11% 0%;
}

.video-block {
    padding-left: 6%;
    padding-right: 6%;
}


@media screen and (max-width: 2596px) {
.colab_badge {
    width: 9.6%;
    position: absolute;
    top: -7%;
    left: 58%;
    transform: rotate(-27deg);
}

.device-image-wrap {
    position: absolute;
    top: 9rem;
    right: -4rem;
    float: right;
    z-index: 0;
    width: 48rem;
}

.red_line {
    width: 3.6%;
    position: absolute;
    top: 24%;
    left: 0%;
    transform: rotate(-27deg);
}

.yellow_plus {
    width: 4.5%;
    position: absolute;
    top: 56%;
    left: 2.5%;
    transform: rotate(-9deg);
}
.blue_circle {
    width: 6%;
    position: absolute;
    top: 90%;
    left: 13%;
}

.red_squiggle {
    width: 10%;
    position: absolute;
    top: 87%;
    left: 64%;
}

.white_line {
    width: 3.5%;
    position: absolute;
    top: -3%;
    left: 79%;
}
.blue_squiggle {
    width: 7.5%;
    position: absolute;
    top: 32%;
    left: 86%;
    transform: rotate(162deg);
}

.blue_square {
    width: 6%;
    position: absolute;
    top: 83%;
    left: 88%;
}

.yellow_circle {
    width: 5%;
    position: absolute;
    top: -5%;
    left: 30%;
}

.white_square {
    width: 6.5%;
    position: absolute;
    top: -2%;
    left: 6%;
}
}

@media screen and (max-width: 2560px) {

img.traffic-preview {
    position: absolute;
    bottom: -38rem;
    /* width: 8rem; */
    max-width: 62%;
}

}


@media screen and (max-width: 2430px) {

img.traffic-preview {
    position: absolute;
    bottom: -35rem;
    /* width: 8rem; */
    max-width: 63%;
}

}


@media only screen and (max-width : 2400px) and (max-height : 1271px) {
  img.traffic-preview {
    position: absolute;
    bottom: -33rem;
    /* width: 8rem; */
    max-width: 65%;
}
}

@media only screen and (max-width : 2100px) and (max-height : 1271px) {
  img.traffic-preview {
    position: absolute;
    bottom: -30rem;
    /* width: 8rem; */
    max-width: 73%;
}
}


@media only screen and (max-width : 1670px) and (max-height : 1271px) {
  img.traffic-preview {
    position: absolute;
    bottom: -27rem;
    /* width: 8rem; */
    max-width: 86%;
}
}

@media only screen and (max-width : 1776px) and (max-height : 1271px) {
  img.traffic-preview {
    position: absolute;
    bottom: -25rem;
    /* width: 8rem; */
    max-width: 74%;
}
}

@media screen and (max-width: 1450px) {

.device-image-wrap {
    position: absolute;
    top: 6rem;
    right: -10rem;
    float: right;
    z-index: 0;
    width: 40rem;
}

img.traffic-preview {
    position: absolute;
    bottom: -240px;
    /* width: 8rem; */
    max-width: 83%;
}


.colab_badge {
    width: 11.6%;
    position: absolute;
    top: -2%;
    left: 58%;
    transform: rotate(-27deg);
}

.build_badge {
    position: absolute;
    width: 12%;
    z-index: 5;
    top: 85.5%;
    left: 2%;
}

.red_line {
    width: 5.6%;
    position: absolute;
    top: 26%;
    left: -4%;
    transform: rotate(-27deg);
}

.blue_square {
    width: 9%;
    position: absolute;
    top: 81%;
    left: 88%;
}

.white_square {
    width: 8%;
    position: absolute;
    top: -5%;
    left: 3%;
}

.yellow_plus {
    width: 6%;
    position: absolute;
    top: 54%;
    left: -1.5%;
    transform: rotate(-9deg);
}

.blue_squiggle {
    width: 11%;
    position: absolute;
    top: 21%;
    left: 89%;
    transform: rotate(168deg);
}

.blue_circle {
    width: 8%;
    position: absolute;
    top: 90%;
    left: 5%;
}

.yellow_circle {
    width: 8%;
    position: absolute;
    top: 8%;
    left: 33%;
}

.white_line {
    width: 6%;
    position: absolute;
    top: -6%;
    left: 79%;
}

.red_squiggle {
    width: 16%;
    position: absolute;
    top: 88%;
    left: 54%;
}
}



@media only screen and (max-width : 1440px) and (max-height : 1270px) {
img.traffic-preview {
    position: absolute;
    bottom: -318px;
    /* width: 8rem; */
    max-width: 95%;
}
}

@media only screen and (max-width : 1440px) and (max-height : 780px) {
 img.traffic-preview {
    position: absolute;
    bottom: -293px;
    /* width: 8rem; */
    max-width: 90%;
}

}


@media screen and (max-width: 1370px) {
.info-block {
    background-size: contain;
    background-position: -5% 50%;
    background-repeat: no-repeat;
    background-color: #fff;
            padding: 11% 0%;
    padding-left: 5%;
    padding-right: 5%;
}
.title--main {
    font-size: 1.9rem;
    line-height: 3.3rem;
    padding-right: 8%;
    padding-left: 6%;
}

.homestead-logo {
    width: 5.5rem;
    margin-bottom: 2%;
    margin-left: 6.5%;
}
}


@media screen and (max-width: 1280px) {
/*
old traffic block mobile stuff
img.traffic-preview {
    position: absolute;
    width: 144vh;
    right: 8vw;
    z-index: 0;
    top: 48vh;
    text-align: center;
}

.traffic-content {
    padding-left: 4vh;
    width: 100%;
    text-align:center;
}

.traffic-block .content-row {
    padding-top: 13vh;
    padding-bottom: 22rem;

}*/

img.traffic-preview {
    position: absolute;
    bottom: -25rem;
    /* width: 8rem; */
    max-width: 105%;
}

}

@media screen and (max-width: 1270px) {
  .tiny-copyright {
    padding-top: 1.2rem;
}
}

@media screen and (max-width: 1250px) {
.info-block {
    background-size: contain;
    background-position: -12% 50%;
    background-repeat: no-repeat;
    background-color: #fff;
           padding: 11% 0%;
    padding-left: 5%;
    padding-right: 5%;
}
.fellowship-block {
        padding: 12% 0%;
        padding-left: 6%;
        padding-right:6%;
}

}

@media only screen and (max-width : 1200px) and (max-height : 780px) {

  img.traffic-preview {
    position: absolute;
    bottom: -24rem;
    /* width: 8rem; */
    max-width: 115%;
}
}

@media screen and (max-width: 1200px) {
.product-block {
    padding-top: 5rem;
    padding-bottom: 5rem;
    padding-left:1.5rem;
    padding-right:1.5rem;
}

.rain {
    position: absolute;
    top: -32px;
    width: 95rem;
    z-index: 0;
    opacity: 1;
}

.pattern-svg {
    width: 95rem;
    z-index: 0;
    opacity: 1;
}

.apply-block {
    padding: 25rem 10rem;
    background: #fff;
    background-repeat: no-repeat;
    width: 100%;
    background-position: bottom center;
    position: relative;
    padding-left: 5%;
    padding-right: 5%;
    overflow: hidden;
}
}


@media screen and (max-width: 1188px) {
.hide-kickers {
  display:none;
}

.show-thickers {
  display:block;
}

.show-thickers:nth-child(1) {
    padding-left: 3rem;
    padding-right: 3rem;
    padding-top: 2rem;
}

.bottom-thicker.show-thickers {
    padding-left: 3rem;
    padding-right: 3rem;
    padding-bottom: 2rem;
    padding-top: .5rem;
}

.show-thickers:nth-child(1) {
    padding-left: 10rem;
    padding-right: 10rem;
    padding-top: 2rem;
}

.bottom-thicker.show-thickers {
    padding-left: 10rem;
    padding-right: 10rem;
    padding-bottom: 2rem;
    padding-top: .5rem;
}

.product-block .content-row {
    /* background: #FF02A3; */
    background: #ff3fb9;
    margin-top: 0px;
    padding: 4.5rem;
    padding-bottom: 0rem;
    padding-top: 5.5rem;
    /* overflow: hidden; */
}

.product-block .content-row:nth-child(2) {
    background: #ff3fb9;
    margin-top: 0px;
    padding: 4.5rem;
    padding-top: 0rem;
    padding-bottom: 5.5rem;
    /* overflow: hidden; */
}

}

@media screen and (max-width: 1120px) {
.info-block {
    background-size: contain;
    background-position: -20% 50%;
    background-repeat: no-repeat;
    background-color: #fff;
}



}


@media screen and (max-width: 1024px) {
.info-block {
    background-size: contain;
    background-position: -50% 50%;
    background-repeat: no-repeat;
    background-color: #fff;
}

img.traffic-preview {
    position: absolute;
    bottom: -33rem;
    /* width: 8rem; */
    max-width: 153%;
}

}

@media screen and (max-width: 950px) {
.info-block {
    background-size: contain;
    background-position: -114% 50%;
    background-repeat: no-repeat;
    background-color: #fff;
}

.show-thickers:nth-child(1) {
    padding-left: 8rem;
    padding-right: 8rem;
    padding-top: 2rem;
}

.bottom-thicker.show-thickers {
    padding-left: 8rem;
    padding-right: 8rem;
    padding-bottom: 2rem;
    padding-top: .5rem;
}

img.traffic-preview {
    position: absolute;
    bottom: -25rem;
    /* width: 8rem; */
    max-width: 153%;
}
}

@media only screen and (max-width : 922px) and (max-height : 780px) {
  img.traffic-preview {
    position: absolute;
    bottom: -22rem;
    /* width: 8rem; */
    max-width: 131%;
}
}

@media screen and (max-width: 890px) {
.info-block {
    background:none;
    background-size: contain;
    background-position: -114% 50%;
    background-repeat: no-repeat;
    background-color: #fff;
}
.content--list {
    font-size: 1.6rem;
    margin-bottom: 11%;
}

.show-thickers:nth-child(1) {
    padding-left: 6rem;
    padding-right: 6rem;
    padding-top: 2rem;
}

.bottom-thicker.show-thickers {
    padding-left: 6rem;
    padding-right: 6rem;
    padding-bottom: 2rem;
    padding-top: .5rem;
}

.ml-image-wrap {
    height: 20rem;
    overflow: hidden;
}

}


@media only screen and (max-width : 700px) and (max-height : 780px) {
  .traffic-content {
    padding: 2rem;
    padding-left: 4rem;
    padding-right: 4rem;
}

img.traffic-preview {
    position: absolute;
    bottom: -19rem;
    /* width: 8rem; */
    max-width: 156%;
}
}

@media screen and (max-width: 700px) {


.apply-block {
    padding: 25rem 10rem;
    background: #fff;
    background-repeat: no-repeat;
    width: 100%;
    background-position: bottom center;
    position: relative;
    padding-left: 5%;
    padding-right: 5%;
    overflow: hidden;
}

.rain-text {
  text-shadow: 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 20px #fff, 0px 0px 20px #fff, 0px 0px 20px #fff, 0px 0px 20px #fff, 0px 0px 20px #fff, 0px 0px 20px #fff;
}

.first-rain {
stroke-dasharray: 57;
  stroke-dashoffset: 0;
  animation: none;
}

.second-rain {
stroke-dasharray: 57;
  stroke-dashoffset: 0;
  animation: none;
  animation-delay:.8s;
}

.third-rain {
stroke-dasharray: 57;
  stroke-dashoffset: 0;
  animation: none;
  animation-delay:1s;
}

.fourth-rain {
stroke-dasharray: 57;
  stroke-dashoffset: 0;
  animation: none;
  animation-delay:.5s;
}


  .traffic-content {
    padding: 2rem;
    padding-left: 4rem;
    padding-right: 4rem;
}

.rain {
    position: absolute;
    top: -32px;
    left: -12rem;
    width: 90rem;
    z-index: 0;
    opacity: 1;
}

.pattern-svg {
    width: 62rem;
    top: -32px;
    left: -12rem;
    z-index: 0;
    opacity: 1;
}

.callout-block {
    padding: 1rem;
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.info-block {
    background-size: 100%;
    background-position: 0% -8%;
    background-repeat: no-repeat;
    background-color: #fff;
       padding: 11% 0%;
    padding-left: 5.5%;
    padding-right: 5.5%;
}

.show-thickers:nth-child(1) {
    padding-left: 3rem;
    padding-right: 3rem;
    padding-top: 2rem;
}

.bottom-thicker.show-thickers {
    padding-left: 3rem;
    padding-right: 3rem;
    padding-bottom: 2rem;
    padding-top: .5rem;
}

.tiny-copyright {
    color: rgba(255,255,255,0.8);
    width: 17rem;
    font-size: .9rem;
    line-height: 1.2rem;
    text-align:center;
    padding-bottom:1.5rem;
}


.product-block .content-row {
    /* background: #FF02A3; */
    background: #ff3fb9;
    margin-top: 0px;
    padding: 2.5rem;
    padding-bottom: 0rem;
    padding-top: 7.5rem;
    /* overflow: hidden; */
}

.product-block .content-row .content-cell {
    padding: 1rem;
}

.product-block .content-row:nth-child(2) {
   background:#ff3fb9;


/*background: #f2029a;
background: -moz-linear-gradient(0deg, #f2029a 0%, #ff3fb9 100%);
background: -webkit-linear-gradient(0deg, #f2029a 0%,#ff3fb9 100%);
background: linear-gradient(0deg, #f2029a 0%,#ff3fb9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2029a', endColorstr='#ff3fb9',GradientType=1 ); */
  margin-top: 0px;
  padding: 2.5rem;
    padding-top: 0rem;
    padding-bottom: 7.5rem;
  /*  overflow:hidden;*/
}

.product-block {
    padding-top: 5rem;
    padding-bottom: 5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    overflow: hidden;
}

.hide-on-medium {
  display:none;
}

.center-on-small {
  float:none !important;
}

.about-block {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background: #fff;
}



.device-image-wrap {
    position: absolute;
    top: 23rem;
    right: -12rem;
    float: right;
    z-index: 0;
    width: 33rem;
}

.yellow-block {
    background: #FFB92B;
    width: 120vw;
    height: 76rem;
    position: absolute;
    z-index: 0;
    bottom: 0rem;
}

.predict-block {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background: #fff;
}

.hero-block {
    padding: 4% 0%;
    /* background: url(img/makehalftoned.jpg); */
    background-size: cover;
    overflow: hidden;
    position: relative;
    background: #fff;
}


.hands {
    width: 65%;
    position: absolute;
    z-index: 0;
    top: 0;
    right: -6rem;
}

.content--list {
    font-size: 1.6rem;
    margin-bottom: 8%;
    padding-left: 6%;
    /*padding-left:3%;*/
}

.homestead-logo {
    width: 5.5rem;
    margin-bottom: 4%;
    margin-left: 6%;
}

.info-card {
    background: white;
    padding-top: 8%;
    padding-left: 8%;
    padding-right: 8%;
    padding-bottom: 8%;
}

.content--callout {
    text-align: center;
    font-size: 1.6rem;
    margin-bottom: 0%;
    padding-left: 12%;
    padding-right: 12%;
    padding-top: 8%;
    padding-bottom: 8%;
        line-height: 2.6rem;
}

.content--bigcallout {
    font-size: 1.4rem;
    line-height: 2.4rem;
    padding-left: 4%;
    padding-right: 4%;
}

.apply-block {
    padding: 40% 0%;
    background: #fff;
    background-repeat: no-repeat;
    width: 100%;
    background-position: bottom center;
    position: relative;
    padding-left: 5%;
    padding-right: 5%;
}


.button-row {
    padding-left: 10%;
    padding-right: 10%;
}

a.apply-button {
    padding-top: 6%;
    padding-bottom: 6%;
    padding-left: 8%;
    padding-right: 8%;
    font-size: 1.4rem;
    line-height: 1.7rem;
}

.title--main {
    font-size: 1.4rem;
    line-height: 2.4rem;
    padding-right: 8%;
    padding-left: 6%;
}

.homestead-logo {
    width: 5.5rem;
    margin-bottom: 4%;
    margin-left: 6%;
}

.about-colab {
    font-size: 1.2rem;
}

.yellow_circle {
    width: 8%;
    position: absolute;
    top: -2%;
    left: 31%;
}

.fellowship-block {
    padding: 12% 0%;
       background: url(img/halftonedtest3.jpg);
    background-size: cover;
    position: relative;
    padding-left: 7%;
    padding-right: 7%;
}

.build_badge {
    position: absolute;
    width: 12%;
    z-index: 5;
    top: 85.5%;
    left: 2%;
}

.colab_badge {
    width: 22.6%;
    position: absolute;
    top: -3%;
    left: 71%;
    transform: rotate(-27deg);
}

.about-makeathon .content--main {
    color: #222;
    padding-top: 11%;
}
}

@media screen and (max-width: 670px) {

.homestead-logo {
    width: 4.5rem;
    margin-bottom: 4%;
    margin-left: 6%;
}



    .board {
    width: 100%;
    position: absolute;
    z-index: 0;
    bottom: 42rem;
    left: 0rem;
        display:block;
}

.info-card {
    background: white;
    padding-top: 6%;
    padding-left: 6%;
    padding-right: 6%;
    padding-bottom: 6%;
    border: 2px solid #222;
    box-shadow: -9px 9px #222222;
}

    li.list--social:nth-of-type(1) {
        margin-left: 16vw;
    margin-bottom: 1.8rem;
}

    a.apply-button {
    padding-top: 6%;
    padding-bottom: 6%;
    padding-left: 8%;
    padding-right: 8%;
    font-size: 1.4rem;
    line-height: 1.7rem;
    margin-top: 7%;
}

.info-block {
    background-size: 100%;
    background-position: 0% -8%;
    background-repeat: no-repeat;
    background-color: #fff;
            padding: 11% 0%;

    padding-left: 5.5%;
    padding-right: 5.5%;
}

    .copyright {
    text-align: center;
    padding-top: .1rem;
    font-size: 1.2rem;
}

    .social-kilt {
    float:none;
}
}

@media screen and (max-width: 639px) {


.ml-image-wrap {
    height: 16rem;
    overflow: hidden;
}

.box-row {
    padding: 11%;
}

.grid-left .number-heading:nth-of-type(1) {

    /* height: 2rem; */
    border: 2px solid #222;
    margin-bottom: 0%;
    border-bottom:none;
}

.grid-left .number-heading:nth-of-type(3) {

    /* height: 2rem; */
    border: 2px solid #222;
    margin-bottom: 0%;
     border-top:none;
}

.grid-middle .number-heading:nth-of-type(1) {

    /* height: 2rem; */
    border: 2px solid #222;
    margin-bottom: 0%;
     border-bottom:none;
}

.grid-middle .number-heading:nth-of-type(3) {

    /* height: 2rem; */
    border: 2px solid #222;
    margin-bottom: 0%;
     border-top:none;
}

.grid-right .number-heading:nth-of-type(1) {

    /* height: 2rem; */
    border: 2px solid #222;
    margin-bottom: 0%;

     border-bottom:none;
}

.grid-right .number-heading:nth-of-type(3) {

    /* height: 2rem; */
    border: 2px solid #222;
    margin-bottom: 0%;

     border-top:none;
}

.grid-left .bignumber {
     border-right:2px solid #222;
}
.grid-middle .bignumber {
     /*border-right:1px;*/
}
.grid-right .bignumber {
    border-left:2px solid #222;
}
}

@media screen and (max-width: 400px) {
.hide-for-small {
  display:none;
}

.hide-it {
  display:block;
}

.predict-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
}

.traffic-content {
    padding: 0rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

img.traffic-preview {
    position: absolute;
    bottom: -1rem;
    /* width: 8rem; */
    max-width: 120%;
}

}