body {
  margin: 0;
}
#logo {
  text-align: center;
  display: block;
  clear: bottom;
  margin: 25em auto;
  width: 100%;
}
#logo-howitworks {
  text-align: center;
  display: block;
  clear: bottom;
  margin: 4em auto;
  width: 100%;
}
/* SPECIAL EVENT MESSAGE STYLES */
.special-event-message {
	font-family: Impact;
	display: block;
	margin-top: 1rem;
	font-size: 7rem;
	color: white;
	background-color: rgba(255,0,0,0.7);
}
/* NAVIGATION STYLES */
#menu {
  text-align: center;
  display: block;
  margin: 0 auto;
  padding: 1em;
  width: 100%;
}
#menu ul li a {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  background:rgba(255,0,0,0.7);
  padding: 1em;
  margin: 1em 2em;
  transition: .6s background; 
}
#menu ul li a:hover{
  background:rgba(209,209,209,0.9);
}
#menu li {
  display: inline;
  list-style-type: none;
  padding: 0 auto;
  text-transform: uppercase;
}

img {
  max-width: 100%;
}

/* CONTAINER FOR TEMPORARY GIF BACKGROUND ON HOME PAGE */
	#background { 
		position: fixed;
		top: 50%;
		left: 50%;
		min-width: 100%;
		min-height: 100%;
		width: auto;
		height: auto;
		z-index: -100;
		transform: translateX(-50%) translateY(-50%);
		background: url('../images/phonestars-img-sequence.gif') no-repeat;
		background-size: cover;
		/*  background-size:contain; */
		background-position:center;
	}

video { 
  	position: fixed;
  	top: 0;
  	left: 0;
  	min-width: 100%;
  	min-height: 100%;
 	width: 100%;
 	height: 100%;
  	z-index: -100; 
  	transition: 1s opacity;
  	object-fit: cover;
}
video#bgvid {
    transition: 1s opacity;
}
.stopfade { opacity: .5;
}
#how-it-works {
  font-weight:300;
  padding: 0 3em;
  margin: 0 3em;
  width: 90%;
  font-size: 1em;
  display: inline-block;
}
/* STYLES TO OVERRIDE BOOTSTRAP CSS */
.jumbotron {
    padding-top: 48px;
    padding-bottom: 18px;
}
.jumbotron h1 {
    font-size: 50px;
}
.jumbotron p {
    margin-bottom: 15px;
    font-size: 22px;
    font-weight: 200;
}
/* REWARDS CATEGORIES */
.rewards-box {
  width: 22%;
  float: left;
  margin: 1em;
  padding: 1em;
  text-align: center;
}
.rewards-header {
  text-align: center;
  margin: 0 0 0 0.25em;
}
.brand-logos {
  width: 10%;
  float: left;
  margin: 0.25em;
  padding: 0.25em;
  text-align: center;
}
/* MEDIA QUERIES */
@media only screen 
and (min-device-width : 1024px) 
and (max-device-width : 1280px)  {
  #logo {
  margin: 6em auto;
  }
}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) {
  #logo {
  margin: 6em auto 0 auto;
  } 
  li {
  display: inline-block;
  margin: 0.5em auto;
  }
  .rewards-box {
  width: 100%;
  margin: 0.25em;
  text-align: center;
  }
}
@media only screen and (max-width: 768px), only screen and (max-device-width: 768px) {
    #logo {
  margin: 6em auto 0 auto;
  width: 80%;
  }
  li {
  margin: 1em auto;
  }
  .rewards-box {
  width: 100%;
  margin: 0.25em;
  text-align: center;
  }
  .brand-logos {
  width: 100%;
  } 
}
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
  #logo {
  margin: 8em auto;
  width: 80%;
  }
  #logo-howitworks {
  margin: 5em auto 1em auto;
  }
  #menu {
  margin: 0.5em auto;
  padding: 1em auto;
  width: 90%;
  } 
  li {
  margin: 1em auto;
  }
  #how-it-works {
  padding: 0 auto;
  margin: 0 auto;
  width: 100%;
  } 
}
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {
  #logo {
  margin: 7em auto;
  width: 80%;
  }
  #menu {
  margin: 0.5em 0;
  padding: 1em auto;
  width: 100%;
  }
  ul li a {
  display: block;
  padding: 1em;
  margin: 1em 0;
  } 
  li {
  margin: 1em auto;
  }
  .rewards-box {
  width: 100%;
  margin: 0.25em;
  text-align: center;
  } 
}
@media screen and (min-width: 320px) and (max-width: 480px) {
  #logo {
  margin: 5em auto 0 auto;
  width: 80%;
  }
  #logo-howitworks {
  margin: 5em auto 1em auto;
  }
  #menu {
  margin: 0.5em 0;
  padding: 1em auto;
  width: 100%;
  }
  ul {
  -webkit-padding-start: 0px;
  padding-left: 0px;
  }
  ul li a {
  display: block;
  padding: 1em;
  margin: 1em 0;
  } 
  li {
  margin: 1em auto;
  }
  #how-it-works {
  padding: 0 auto;
  margin: 0 auto;
  width: 100%;
	}
  .rewards-box {
  width: 100%;
  margin: 0.25em;
  text-align: center;
  } 
}
@media only screen 
and (min-device-width : 414px) {
    #menu {
    width: 100%;
  }
    li {
    margin: 1em auto;
  }
}