.container-fluid .container{padding: 60px 0;}
.centered{text-align: center;}
.orange{ color: #F47321;}
.upper{ text-transform: uppercase;}
.capitalize{ text-transform: capitalize;}
h1{ text-transform: uppercase; font-weight: normal;}
hr{ background: none; border:none; border-bottom:#999 solid 1px; margin: 40px 0;}
p{ font-size: 1.5em; margin: 40px 0; }
.pad-20{padding:20px}
.pad-40{padding:40px}
body{ font-family: GibsonLight, Helvetica, Verdana, Sans-Serif; }
a{ color: #F47321; font-size: 1.5em; font-family: GibsonRegular, Helvetica, Verdana, Sans-Serif; font-weight: bold; }
.semibold{ font-family: GibsonRegular, Helvetica, Verdana, Sans-Serif; font-weight: bold; }
b, strong{ font-family: GibsonBold, Helvetica, Verdana, Sans-Serif; font-weight: bold;}

@media (min-width: 992px){
  .container{ width: 950px; }
}

/* Fonts */

@font-face{
  font-family: "GibsonBold";
  src: url("../fonts/Gibson-Bold.otf") format("opentype");
}
@font-face{
  font-family: "GibsonBoldItalic";
  src: url("../fonts/Gibson-BoldItalic.otf") format("opentype");
}
@font-face{
  font-family: "GibsonItalic";
  src: url("../fonts/Gibson-Italic.otf") format("opentype");
}
@font-face{
  font-family: "GibsonLight";
  src: url("../fonts/Gibson-Light.otf") format("opentype");
}
@font-face{
  font-family: "GibsonLightItalic";
  src: url("../fonts/Gibson-LightItalic.otf") format("opentype");
}
@font-face{
  font-family: "GibsonRegular";
  src: url("../fonts/Gibson-Regular.otf") format("opentype");
}
@font-face{
  font-family: "GibsonSemiBold";
  src: url("../fonts/Gibson-SemiBold.otf") format("opentype");
}
@font-face{
  font-family: "GibsonSemiBoldItalic";
  src: url("../fonts/Gibson-SemiBoldItalic.otf") format("opentype");
}

/* Header */
#header{
  background: url(../assets/bg-hero.jpg);
  background-size: cover;
}
#header .container{
  color: #fff;
}
#header h1{
  font-family: GibsonBold, Helvetica, Verdana, Sans-Serif;
  font-weight: bold;
  font-size: 4em;
  line-height: 1em;
  margin: 0;
  margin-top: 20px;
}
#header p{
  font-family: GibsonRegular, Helvetica, Verdana, Sans-Serif;
  text-transform: uppercase;
  margin-top: 10px;
}
a.button, input[type=submit]{
  font-family: GibsonBold, Helvetica, Verdana, Sans-Serif;
  width:300px;
  text-align: center;
  display: block;
  border: solid 2px #F47321;
  padding: 20px;
  font-weight: bold;
  font-size: 1.25em;
  color: #fff;
  text-transform: uppercase;
  background: rgba(0,0,0,.25);
}
input[type=text]{
  text-transform: uppercase;
  background: none;
  border: none;
  border-bottom: solid 1px #333;
  color: #999;
  font-size: 1.3em;
  padding: 10px 0;
  width: 95%;
  margin-bottom: 10px;
}
a.button:hover, input[type=submit]:hover{
  text-decoration: none;
  border-color: #fff;
  background: rgba(0,0,0,.5);
}
#header .title{
  width: 400px;
}
#header .phone{
  margin-bottom:-180px;
}

.device{
  diaplay: inline-block;
  margin-left: -90px;
  width: 500px;
  height: 750px;
  background: url(../assets/google-pixel-1x.png) center center no-repeat;
  background-size: 500px;
  text-align: center;
}
.device img{
  width: 292px;
  margin-top: 70px;
}

/* Subheader */
#subheader .box{
  text-align: center;
  border: solid 1px #eee;
  min-height: 300px;
  padding: 40px;
}
#subheader .box:hover{
  border-color: #F47321;
}
#subheader .box h1{
  font-family: GibsonBold, Helvetica, Verdana, Sans-Serif;
}
#subheader h1.icon{
  display:inline-block;
  padding-left: 40px;
}
#subheader h1.icon.icon-reach{
  background: url(../assets/icon-reach-2x.png) no-repeat top left;
  background-size: 35px;
  padding-left: 45px;
}
#subheader h1.icon.icon-engage{
  background: url(../assets/icon-engage-2x.png) no-repeat top left;
  background-size: 25px;
}
#subheader h1.icon.icon-reward{
  background: url(../assets/icon-reward-2x.png) no-repeat top left;
  background-size: 35px;
  padding-left: 45px;
}

#reward .container{
  padding-bottom: 0;
}

/* How it works */
#how-it-works{
  background: #000 url(../assets/bg-stadium.jpg) top center no-repeat;
  background-size: cover;
  color: #fff;
}
#how-it-works h1{
  font-family: GibsonBold, Helvetica, Verdana, Sans-Serif;
}
.icon-left{
  /*width:300px;*/
  margin:0;
  width:300px;
  display: inline-block;
}
.icon-left div{
  /*border: solid 1px red;*/
}
.icon-left img{
  width: 90px;
  float:left;
  margin-top: 40px;
  margin-bottom: 60px;
  margin-right:20px;
}
.icon-left h1{
  font-size: 5em;
  margin-bottom:-40px;
}
.icon-left p{
  text-transform: uppercase;
}

/* Engage */
#engage{
  background: #eee url(../assets/gray-pattern.png);
  background-size: 100%;
}

/* Installs */
#installs{
  background: #000 url(../assets/bg-options.jpg) bottom center no-repeat;
  background-size: cover;
  color: #fff;
}
#installs h1{
  font-family: GibsonBold, Helvetica, Verdana, Sans-Serif; font-weight: bold;
}
#installs .small h1{
  font-size: 2.5em;
}
#installs .small p{
  font-size: 1.3em;
  margin: 15px 0;
}

.im-badge{
  width: 350px;
  height: 50px;
  border: solid 1px #fff;
  text-align: center;
  margin-top:-50px;
  border-bottom: none;
}
.im-badge img{
  margin-top: -20px;
}

/* Get Started */
#get-started{
  background: #191919;
  color: #fff;
}


/* Social */
#social{
  background: #3E3E3E;
  color:#fff;
}


/* Mobile */

@media (max-width: 900px) {
  #header .title{
    width: auto;
    margin-bottom: 40px;
  }
}