/*

 /\_/\
( o.o )
 > ^ <
		Mrrow.
'Let's style us some morerewards.com!'



*/

button.gmodal-close {
		padding: 0!important;
		font-size: 1em!important;
		border: none!important;
}

.wufoo {
	font-family: 'open sans', arial, helvetica, sans-serif !important;
	font-size: 1.1em;
	line-height: 2em;
}
.wufoo header {
	min-height: 0 !important;		
}

a.active{
	color: #FFAC2a !important;	
}
.embed form, .embed body {
	background-color: #fff !important;
	padding-right: 15px;
	padding-top: 0 ;	
}

/* homepage animation */

/* LAST MINUTE SLIDER, because whynot */

	#crossfade img {
    -webkit-animation-name: cf;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 30s;
    animation-name: cf;
    animation-iteration-count: infinite;
    animation-duration: 30s;
	position:absolute;
	display:block;
	

}
@-webkit-keyframes cf {
    0% {opacity: 0;}
    6% {opacity: 1;}
    17% {opacity: 1;}
    23% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes cf {
    0% {opacity: 0;}
    6% {opacity: 1;}
    17% {opacity: 1;}
    23% {opacity: 0;}
    100% {opacity: 0;}
}

.f1 {
    -webkit-animation-delay: 0s;
	animation-delay: 0s;
}
.f2 {
	animation-delay: 5s;
    -webkit-animation-delay: 5s;
	opacity: 0;
		  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
	
}
.f3 {
	animation-delay: 10s;
    -webkit-animation-delay: 10s;
		opacity: 0;
		  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
.f4 {
	animation-delay: 15s;
    -webkit-animation-delay: 15s;
		opacity: 0;
		  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
.f5 {
	animation-delay: 20s;
    -webkit-animation-delay: 20s;
		opacity: 0;
		  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
.f6 {
	animation-delay: 25s;
    -webkit-animation-delay: 25s;
		opacity: 0;
		  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

/* make keyframes that tell the start state and the end state of our object */
 
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-webkit-keyframes grow {
    0% { Opacity: 0; left: -15em; margin: 0 auto;}
    100% { Opacity: 1; left: 0; margin: 0 auto;}
}
@-moz-keyframes grow {
    0% { Opacity: 0; left: -15em; margin: 0 auto;}
    100% { Opacity: 1; left: 0; margin: 0 auto;}
}
@-ms-keyframes grow {
    0% { Opacity: 0; left: -15em; margin: 0 auto;}
    100% { Opacity: 1; left: 0; margin: 0 auto;}
}
@-o-keyframes grow {
    0% { Opacity: 0; left: -15em; margin: 0 auto;}
    100% { Opacity: 1; left: 0; margin: 0 auto;}
}
@-webkit-keyframes turn {
    0% { transform: rotate(-80deg); -webkit-transform: rotate(90deg);}
    100% { transform: rotate(0deg); -webkit-transform: rotate(0deg);}
}
@-moz-keyframes turn {
    0% { transform: rotate(-80deg); -webkit-transform: rotate(90deg);}
    100% { transform: rotate(0deg); -webkit-transform: rotate(0deg);}
}
@-ms-keyframes turn {
    0% { transform: rotate(-80deg); -webkit-transform: rotate(90deg);}
    100% { transform: rotate(0deg); -webkit-transform: rotate(0deg);}
}
@-o-keyframes turn {
    0% { transform: rotate(-80deg); -webkit-transform: rotate(90deg);}
    100% { transform: rotate(0deg); -webkit-transform: rotate(0deg);}
}

.howtonum {
	opacity:0;  
	-webkit-animation:turn ease 1;  
	-moz-animation:turn ease 1;
	animation:turn ease 1;
 
	-webkit-animation-fill-mode:forwards; 
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration:.9s;
	-moz-animation-duration:.9s;
	animation-duration:.9s;
}

.grow {
-webkit-animation: grow 1s ease;
-moz-animation: grow 1s ease;
-ms-animation: grow 1s ease;
-o-animation: grow 1s ease;
animation: grow 1s ease;
position: relative;
}

.fade-in {
	opacity:0;  
	-webkit-animation:fadeIn ease-in 1;  
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;
 
	-webkit-animation-fill-mode:forwards; 
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}

.howtonum.one {
-webkit-animation-delay: .5s;
-moz-animation-delay: .5s;
animation-delay: .5s;
}
 
.howtonum.two {
-webkit-animation-delay: 1s;
-moz-animation-delay:1s;
animation-delay: 1s;
}
 
.howtonum.three {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
animation-delay: 1.5s;
}


 
.fade-in.one {
-webkit-animation-delay: .5s;
-moz-animation-delay: .5s;
animation-delay: .5s;
}
 
.fade-in.two {
-webkit-animation-delay: 1s;
-moz-animation-delay:1s;
animation-delay: 1s;
}
 
.fade-in.three {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
animation-delay: 1.5s;
}

.fade-in.four {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
animation-delay: 2s;
padding-top: 0;
}

/* end animations */


html, body {
	height: 100%;	
}

body {
  padding-top:70px;
  background: #eee;
  color: #555;
  font-family: 'Open Sans', sans-serif;

}
	.row.copyright {
		background-color:#eee;	
	}
.sidemenu {
	width: 90%;
	margin-left:auto;
	margin-right:auto;
	float: none;	
}

/* pills */

.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
	background-color: #FFAC2A;	
}
.nav-pills > li > a:focus, .nav-pills > li > a:hover {
	color: #FFAC2A;
	background-color: transparent;
}

.nav-pills > li > a {
    border-radius: 1px;
	font-weight:normal;
}

.navbar-collapse {
	padding-left: 0;
	padding-right: 0;	
}

.app {
	padding: 0 !important;	
}
.navbar.sub {
	min-height: 0;	
}

button.submenu {
	float: left;
	border: none;
	width: 100%;
	position: absolute;
	font-weight:bold;
}

.navbar-toggle.submenu:hover {
	background-color: transparent;	
}

a {
	text-decoration: none;
	transition: all .5s ease;
	font-weight: bold;
	color: #555;	
}

.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a {
	font-weight: normal;	
}

.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
	color:#ffac2a;	
}

a:hover {
	text-decoration: none;
	color: #FFAC2a;	
}

.navbar {
	min-height: 75px;	
}

.navbar-brand {
	padding: 6px;
	margin-right: 10px;	
}

.navbar-nav > li {
	margin-left: 15px;	
}

p.copyright {
	text-align: center;	
}

.container {
	margin-top: .8em;	
}

span.line {
	display: inline-block;	
}

.applogo {
	opacity: .5;
	transition: all .5s ease;	
}

.applogo:hover {
	opacity: 1;	
}

section {
  float:left;
  width:100%;
  background:#fff;
  position:relative;
}

header {
  float:left;
  width:100%;
  padding:0 4em;
  min-height: 410px;
}
.content {
  width:98%;
  margin:0 1%;
  padding:3em 0;
  max-width: 1140px;
  margin-left:auto;
  margin-right:auto;
}
.videocontainer {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
	box-shadow: 0px 0px 15px rgba(0,0,0,.1);
	margin-top: 50px;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.row {
	max-width: 1200px;
    margin-left: auto;
    margin-right: auto;	
}
h1 {
	text-align:center;
	color:#444;
}


.counterwrap {
	width: 100%;
	text-align:center;
	font-size: 3em;
}

.navbar-default .navbar-nav > li > a.btn {
	border-radius: 1px;
	background-color: #bfd955;
	color: #fff;
	font-size: 1em;
	transition: all .5s ease;
	padding: .4em 1.5em;
	margin-top: .6em;
}

.navbar-default .navbar-nav > li > a.btn:hover {
	background-color: #ffac2a;
	color: #fff;
}


.btn {
	border-radius: 1px;
	background-color: #bfd955;
	color: #fff;
	font-size:1.5em;
	transition: all .5s ease;
	padding: .8em;
	cursor: pointer !important;
}

.btn.btn-xs {
	font-size: 1em;
	padding: .5em 1em;	
}

btn.btn-default.gmodal-close.pull-right {
	font-size: 1em;
	padding: .4em 1em;
	position: relative;
	top: -15px;	
}

.btn:hover {
	background-color: #ffac2a;
	color: #fff;
}

.howto {
	padding: 10px;
	font-size: 1.5em;
	margin-top: 1em;
}
.howtonum {
	font-weight: bold;
	font-size: 3em;
	position: absolute;
	margin-top: -.75em;
	opacity: .5;
	color: #FFAC2A;	
}

table {
	border: 0;	
}
td {
	padding:0px 5px;
	height: 3em;
	min-width: 60px;	
}
.buttons {
	margin-top: 2.5em;
    position: relative;
    left: -5px;

}

/*

/)/)
(^.^)
(")(")
I want a cool arrow pointing to content below the fold!

*/

.arrow-wrap {
  position:absolute;
  z-index:1;
  left:50%;
  top:-5em;
  margin-left:-5em;
  background:#111;
  width:10em;
  height:10em;
  padding:4em 2em;
  border-radius:50%;
  font-size:0.5em;
  display:block;
}

.arrow {
  float:left;
  position:relative;
  width: 0px;
height: 0px;
border-style: solid;
border-width: 3em 3em 0 3em;
border-color: #ffffff transparent transparent transparent;
  -webkit-transform:rotate(360deg)
}

.arrow:after {
  content:'';
  position:absolute;
  top:-3.2em;
  left:-3em;
  width: 0px;
height: 0px;
border-style: solid;
border-width: 3em 3em 0 3em;
border-color: #111 transparent transparent transparent;
  -webkit-transform:rotate(360deg)
}


.hint {
  position:absolute;
  top:0.6em;
  width:100%;
  left:0;
  font-size:2em;
  font-style:italic;
  text-align:center;
  color:#fff;
  opacity:0;
}


.arrow-wrap:hover .hint {
  opacity:1;
}


  @-webkit-keyframes arrows {
    0% { top:0; }
    10% { top:12%; }
    20% { top:0; }
    30% { top:12%; }
    40% { top:-12%; }
    50% { top:12%; }
    60% { top:0; }
    70% { top:12%; }
    80% { top:-12%; }
    90% { top:12%; }
    100% { top:0; }
  }
  
  .arrow-wrap .arrow {
    -webkit-animation: arrows 2.8s 0.4s;
    -webkit-animation-delay: 3s;
  }
 


/* Mobile Responsiveness */

@media (max-width:767px) {
	header {
		padding: 1em .4em 0;
		min-height: 0px;
	}
	.buttons {
		margin-top: 0;	
	}
	.btn-block {
		margin-top: 10px;	
		font-size: 1em;
	}
	.howto {
		font-size: 1.4em;
		padding: 15px 0 0 15px;	
	}
	.table-responsive {
		border: 0;	
	}
	.navbar-right {
		margin-left:auto;
		margin-right:auto;
		max-width:320px;
		padding-left: 2.4em;	
	}
	.content {
		padding: 1.5em 0;	
	}
	h1 {
		font-size: 2.1em;	
	}
	.counterwrap {
		font-size: 2.1em;	
	}
	.arrow-wrap {
		font-size: 0.4em;	
	}
	.videocontainer {
		margin-bottom: 0px;	
		margin-left: auto;
		margin-right: auto;
		width: 94%;
		box-shadow: 0px 0px 8px rgba(0,0,0,.05);
	}
	ul.nav li a.btn {
		max-width: 205px;
		margin-left: auto;
		margin-right: auto;
		position: relative;
		right: 5px;	
	}
	.rewards-panel {
		box-shadow:none;	
	}
	.content {
		width: 100%;	
	}
	.footerlogo {
		padding-top: 15px;
		border-top: 1px solid #bbb;	
	}
	.footerredeem {
			font-size: .9em;
			float:none !important;
			margin-left: auto;
			margin-right:auto;
			position: relative;
			top: 15px;
	}
	.row.copyright {
		padding-top: 25px;
		font-size: .8em;
		background-color:#eee;	
	}
	.footerlogo.img-responsive	{
		margin-left: auto;
		margin-right: auto;	
	}
	h1.countera {
			font-size: 1.5em;
			text-align:left;
			margin-left:10px;
			color: #999;
	}
	h1.counterb {
			font-size: 1.5em;
			text-align:right;
			margin-right: 10px;
			line-height: 0;
			color: #999;
	}
	p.copyright {
		font-size: 1.09em;
		right: 0px !important;
	}
}

@media (min-width:768px) and (max-width:1199px) {
	.rewards-panel {
		box-shadow:none;	
	}
	.content {
		width: 100%;	
	}
	.counterwrap {
		font-size: 3em;	
	}
	.footerlogo {
		padding-top: 15px;	
	}
	.footerredeem {
			font-size: .9em;
			float:none !important;
			margin-left: auto;
			margin-right:auto;
			position: relative;
			top: 15px;
			max-width: 460px !important;
	}
	.row.copyright {
		font-size: .8em;	
	}
	.footerlogo .img-responsive	{
		margin-left: auto;
		margin-right: auto;	
	}
	.footerredeem a {
		position: relative;
		top: 13px;	
	}
	
}
@media (max-width:1000px) {
	.footerredeem {
		display:none !important;	
	}
}
@media (min-width:1300px) {
	row.buttons {
		margin-top: 0;
	}
}
@media (min-width:768px) {
	.footerlogo {
		margin-top: 15px;	
	}
	h1.countera {
			font-size: 1.5em;
			text-align:left;
			margin-left: 2em;
			color: #999;
	}
	h1.counterb {
			font-size: 1.5em;
			text-align:right;
			margin-right: 2em;
			line-height: 0;
			color: #999;
	}
	.row.copyright {
			padding-top: 25px;	
	}
	.navbar-right {
		margin-right: -20px !important;
	}
}