/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html, button, input, select, textarea { color: #222; }
body { font-size: 1em; line-height: 1.4; }

::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection { background: #b3d4fc; text-shadow: none; }
.chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0;}
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
img { vertical-align: middle; }
a{ text-decoration: none; }
body { font: 16px/26px Helvetica, Helvetica Neue, Arial;  -webkit-font-smoothing: antialiased; font-smooth: always; text-shadow: 1px 1px 1px rgba(0,0,0,0.004);}
.wrapper { width: 100%; margin: 0 2%; }



/* ==========================================================================
   Main Theme Styles
   ========================================================================== */


.header-container {
	background: url(../img/background.jpg); /* Change Your Logo Name */
	-webkit-background-size: cover; /*for webKit*/
	-moz-background-size: cover; /*Mozilla*/
    -o-background-size: cover; /*opera*/
	background-size: cover; /*generic*/
    color: #525b60;  /* Adjust colour of header text */
	text-shadow: 1px 1px 0 #ffffff;
	padding-top: 50px;
}

.playbox {
	background: fffff; /* Change Your Logo Name */
	-webkit-background-size: cover; /*for webKit*/
	-moz-background-size: cover; /*Mozilla*/
    -o-background-size: cover; /*opera*/
	background-size: cover; /*generic*/
	text-shadow: 1px 1px 0 #ffffff;
	padding-top: 50px;
}

/* ==========================================================================
   LOGO
   ========================================================================== */
.header-container h1{
	text-indent: -10000em;
	position: relative;
	left:-88px;
	width: 400px; /* Adjust Width for Logo if needed */
	height: 70px; /* Adjust Height for Logo if needed */
	background: url(../img/logo.png) no-repeat center 0;
	background-size: 100%;
	margin: 0 0;
}
@media (min--moz-device-pixel-ratio: 1.5),
	(-o-min-device-pixel-ratio: 3/2),
	(-webkit-min-device-pixel-ratio: 1.5),
	(min-device-pixel-ratio: 1.5),
	(min-resolution: 1.5dppx) {
	/* on retina, use image that's scaled by 2 */
.header-container h1{
	background: url(../img/logo@2x.png) no-repeat 0 0; /* Change Retina Logo */
}
}

.header-container h3{
	color: #FB2F26;
	text-shadow: 0 2px 2px black;
	font-weight: 600;
	font-size: 36px;
	line-height: 42px;
}
.header-container h4{
	font-weight: 700;
	color: #0ca2d9;
	margin-bottom: 5px;
	margin-top: 40px;
}

.header-container h5{
	color: white;
	text-shadow: 0 1px 1px black;
	font-weight: 800;
	font-size: 16px;
	line-height: 18px;
	padding-bottom:0px;
}
.ctaColumn ul{
	margin: 0;
	padding-left:5px;
	padding-bottom:120px;
}
.header-container li{
	list-style-type: none;
}
.ctaColumn li{
	display: inline-block;
	text-align: center;
	vertical-align:top;
	margin: 5px;
}
.ctaColumn li a{
	opacity: .999;
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
	width: 200px;
	display: block;
}
.ctaColumn li a:hover{
	opacity: .7;
}
.ctaColumn li a img{
	width: 100%;
}
.ctaColumn{
	text-align: center;
	margin-bottom: 200px;
	float:left;
}
.playbutton { *zoom: 1; float: right;  margin-top:25%; margin-right: 10%;}

.available{
	font-size: .9em;
}
.available, .available a {
	font-weight: 700;
	color: #c1d0dc; /* Change colour of alt app store links */
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}
.available a:hover{
	color: #6b7d84; /* Change colour of alt app store links on hover */
}
.ctaColumn input[type="text"]{
	border-radius: 4px;
	padding: 0.8em;
	width: 85%;
	border: 1px solid #e1e8ed;
	color: #657884;
	text-align: center;
	outline: none;
	box-shadow: none;
	-webkit-appearance:none;
}
.signup{
	position: relative;	
}
.signup:after{
	content: "";
	position: absolute;
	right: 10%;
	top: 15px;
	background: url(../img/mailIcon.png) no-repeat center 0; /*Image of iphone 5 in hand */
	width: 28px;
	height: 14px;
	background-size: 100%;
	display: none;
}
@media (min--moz-device-pixel-ratio: 1.5),
	(-o-min-device-pixel-ratio: 3/2),
	(-webkit-min-device-pixel-ratio: 1.5),
	(min-device-pixel-ratio: 1.5),
	(min-resolution: 1.5dppx) {
	/* on retina, use image that's scaled by 2 */
.signup:after{
	background: url(../img/iphone_nohand@2x.png) no-repeat center 0; /*Image of iphone 5 in hand */
}
}
.fader{
	position: relative;
	padding-bottom: 268px;
	width: 286px;
	margin-right: auto;
	margin-left: auto;
	background: url(../img/iphone_nohand.png) no-repeat center 0; /*Image of iphone 5 in hand */
	background-size: 100%;
}
@media (min--moz-device-pixel-ratio: 1.5),
	(-o-min-device-pixel-ratio: 3/2),
	(-webkit-min-device-pixel-ratio: 1.5),
	(min-device-pixel-ratio: 1.5),
	(min-resolution: 1.5dppx) {
	/* on retina, use image that's scaled by 2 */
.fader{
	background: url(../img/iphone_nohand@2x.png) no-repeat center 0; /*Image of iphone 5 in hand */
}
}
.fader .flexslider1{
	width: 244px;
	height: 434px;
	position: relative;
	top: 87px;
	margin-bottom: 0;
	margin-right: auto;
	margin-left: auto;
}
.fader .flex-control-nav{
	bottom: -60px;
}
.fader:before{
	content: "";
	position: absolute;
	left: 0px;
	top: 2px;
	width: 286px;
	height: 605px;
}
.fader .flex-control-paging li a {
	width: 11px; 
	height: 11px; 
	display: block; 
	background: #485762; /* Change colour of iphone nav dots */
	cursor: pointer; 
	text-indent: -9999px; 
	border-radius: 20px;
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out; 
}
.fader .flex-control-paging li a:hover { 
	background: #5a6c79; /* Change colour of iphone nav dots on hover */
}
.fader .flex-control-paging li a.flex-active { 
	background: #0ca2d9; /* Change colour of iphone nav dots when active */
	cursor: default;
}
.fader .slides li img{
	width: 100%;
}
.main-container{
	background: white; /* Adjust Background colour of Main Area */
	color: black; /* Adjust colour of Main Text */
}
.main { 
	padding: 80px 0 100px; 
}
.main-container h2{
	color: black;
}
.main-container h6{
	color: #3c444a;
	font-size: 6em;
	margin: 0.5em 0;
}
.main-container section{
	border-top: 1px solid #586168;
	padding-top: 1em;
	margin-top: 40px;
}
.flexslider2 {
	margin-bottom: 90px;
}
.quote .slides li{
	font-size: 1.8em;
	line-height: 1.4;
	font-weight: 100;
	text-align: center;
	padding-bottom: .5em;
	width: 244px;
}
.quote .flex-control-paging li a {
	width: 11px; 
	height: 11px; 
	display: block; 
	background: #485762; /* Change colour of iphone nav dots */
	cursor: pointer; 
	text-indent: -9999px;
	border-radius: 20px; 
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}
.quote .flex-control-paging li a:hover { 
	background: #5a6c79; /* Change colour of iphone nav dots on hover */
}
.quote .flex-control-paging li a.flex-active { 
	background: #f3f8fc;  /* Change colour of iphone nav dots when active */
	cursor: default;
	}
.footer-container {
    background: #363d42;  /* Adjust Background colour of Footer Area */
    font-size: .8em;
    padding-bottom: 20px;
    padding-top: 20px;
}

.screenshot {
	float:left;
	width:263px;
	margin-right:30px;
}

.piece {

}

.screenshots {
	margin:20px auto;
	padding:0;
	overflow:hidden;
	width:250px;
}

.screenshots li {
	padding: 0;
	width:250px;
	list-style-type: none;
}
.screenshots li img
{
	width:250px;
	border:0;
}

/* ==========================================================================
   FOOTER LOGO
   ========================================================================== */ 
.footer-container h1{
	text-indent: -10000em;
	position: relative;
	width: 60px; /* Adjust Width for Logo if needed */
	height: 40px; /* Adjust Height for Logo if needed */
	background: url(../img/logo_foot.png) no-repeat center 0; /* Change Logo */
	background-size: 100%;
	margin: 0 auto 40px;
}
@media (min--moz-device-pixel-ratio: 1.5),
	(-o-min-device-pixel-ratio: 3/2),
	(-webkit-min-device-pixel-ratio: 1.5),
	(min-device-pixel-ratio: 1.5),
	(min-resolution: 1.5dppx) {
	/* on retina, use image that's scaled by 2 */
.footer-container h1{
	background: url(../img/logo_foot@2x.png) no-repeat 0 0; /*Change Retina Logo */
}
}



.footer-container ul{
	padding: 0;
	margin: 0;
	text-align: center;
}
.footer-container li{
	display: inline-block;
	text-align: center;
	list-style-type: none;
	margin-left: 30px;
}
.footer-container li:first-child{
	margin-left: 0;
}
.footer-container li a{
	color: #aabdcd; /* Change colour of footer links */
	font-weight: 700;
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}
.footer-container li a:hover{
	color: #fbfdff; /* Change colour of footer links on hover */
}
.footer-container footer {
	color: #fff; 
}


/* ==========================================================================
   Insert Author's custom styles
   ========================================================================== */












/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 480px) { }
@media only screen and (min-width: 680px) {
	.wrapper { width: 90%; margin: 0 5%; }
	.ctaColumn input[type="text"]{ text-align: left; }
	.signup:after{ display: block; }
	.fader .flexslider1{ left: 209px; margin-right: 0; margin-left: 0; }
	.fader{ padding-bottom: 348px;  margin: 0; background: none;}
	.fader:before {
		background: url(../img/iphone.png) 0 0; /*Image of iphone 5 in hand */ 
		background-size: 100%;
		left: -40px; 
		width: 593px;
		height: 782px;
		top: 0px;
	}
	@media (min--moz-device-pixel-ratio: 1.5),
		(-o-min-device-pixel-ratio: 3/2),
		(-webkit-min-device-pixel-ratio: 1.5),
		(min-device-pixel-ratio: 1.5),
		(min-resolution: 1.5dppx) {
		/* on retina, use image that's scaled by 2 */
	.fader:before {
		background: url(../img/iphone@2x.png) 0 0; /*Image of iphone 5 in hand */ 
	}
	}
		
}
@media only screen and (min-width: 768px) {
    .main-container section{ width: 25%; float: left; margin-right: 12%; }
    .main-container section.last{ margin-right: 0px; }
    .footer-container h1{ float: left; }
    .footer-container ul{ float: right; }
    .fader .flexslider1{ left: 225px; }
    .fader:before{ left: -24px; }
    .flexslider2 { margin-bottom: 60px; }
}
@media only screen and (min-width: 870px) {
	.header-container h1{
		background: url(../img/logo.png) no-repeat 0 0; /* Logo */
	  	margin-right: 5px;
	}
	.ctaColumn { float: left; width: 35%; padding-bottom: 100px; text-align: left; padding-top: 0px; }
	.ctaColumnplay { float: left; width: 65%; padding-bottom: 40px; text-align: center; padding-top: 0px; }
	.ctaColumnplays { float: left; width: 100%; padding-bottom: 40px; text-align: center; padding-top: 0px; }
	.signup:after{ right: 15%; }
	.fader { float: left; width: 35%; }
	.header-container { padding-top: 50px; }
	.fader .flexslider1{ left: 9px; }
	.fader:before{ content: ""; position: absolute; background-position: 0 0; width: 593px; height: 782px; left: -240px;top: 0px; }
	
}
@media only screen and (min-width: 1140px) {
    .wrapper { width: 1150px; /* 1140px - 10% for margins */ margin: 0 auto; }
}




/* ==========================================================================
   Helper classes
   ========================================================================== */

.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }


/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
* { background: transparent !important; color: #000 !important; box-shadow:none !important; text-shadow: none !important;}
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")";}
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
img { max-width: 100% !important; page-break-inside: avoid; }

@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}


/* SMART BANNER */

#smartbanner { position:absolute; left:0; top:-82px; border-bottom:1px solid #e8e8e8; width:100%; height:78px; font-family:'Helvetica Neue',sans-serif; background:-webkit-linear-gradient(top, #f4f4f4 0%,#cdcdcd 100%); background-image: -ms-linear-gradient(top, #F4F4F4 0%, #CDCDCD 100%); background-image: -moz-linear-gradient(top, #F4F4F4 0%, #CDCDCD 100%); box-shadow:0 1px 2px rgba(0,0,0,0.5); z-index:9998; -webkit-font-smoothing:antialiased; overflow:hidden; -webkit-text-size-adjust:none; }
#smartbanner, html.sb-animation {-webkit-transition: all .3s ease;}
#smartbanner .sb-container { margin: 0 auto; }
#smartbanner .sb-close { position:absolute; left:5px; top:5px; display:block; border:2px solid #fff; width:14px; height:14px; font-family:'ArialRoundedMTBold',Arial; font-size:15px; line-height:15px; text-align:center; color:#fff; background:#070707; text-decoration:none; text-shadow:none; border-radius:14px; box-shadow:0 2px 3px rgba(0,0,0,0.4); -webkit-font-smoothing:subpixel-antialiased; }
#smartbanner .sb-close:active { font-size:13px; color:#aaa; }
#smartbanner .sb-icon { position:absolute; left:30px; top:10px; display:block; width:57px; height:57px; background:rgba(0,0,0,0.6); background-size:cover; border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0,0.3); }
#smartbanner.no-icon .sb-icon { display:none; }
#smartbanner .sb-info { position:absolute; left:98px; top:18px; width:44%; font-size:11px; line-height:1.2em; font-weight:bold; color:#6a6a6a; text-shadow:0 1px 0 rgba(255,255,255,0.8); }
#smartbanner #smartbanner.no-icon .sb-info { left:34px; }
#smartbanner .sb-info strong { display:block; font-size:13px; color:#4d4d4d; line-height: 18px; }
#smartbanner .sb-info > span { display:block; }
#smartbanner .sb-info em { font-style:normal; text-transform:uppercase; }
#smartbanner .sb-button { position:absolute; right:20px; top:24px; border:1px solid #bfbfbf; padding: 0 10px; min-width: 10%; height:24px; font-size:14px; line-height:24px; text-align:center; font-weight:bold; color:#6a6a6a; background:-webkit-linear-gradient(top, #efefef 0%,#dcdcdc 100%); text-transform:uppercase; text-decoration:none; text-shadow:0 1px 0 rgba(255,255,255,0.8); border-radius:3px; box-shadow:0 1px 0 rgba(255,255,255,0.6),0 1px 0 rgba(255,255,255,0.7) inset; }
#smartbanner .sb-button:active, #smartbanner .sb-button:hover { background:-webkit-linear-gradient(top, #dcdcdc 0%,#efefef 100%); }

#smartbanner .sb-icon.gloss:after { content:''; position:absolute; left:0; top:-1px; border-top:1px solid rgba(255,255,255,0.8); width:100%; height:50%; background:-webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); border-radius:10px 10px 12px 12px; }

#smartbanner.android { border-color:#212228; background: #3d3d3d url('dark_background_stripes.gif'); border-top: 5px solid #88B131; box-shadow: none; }
#smartbanner.android .sb-close { border:0; width:17px; height:17px; line-height:17px; color:#b1b1b3; background:#1c1e21; text-shadow:0 1px 1px #000; box-shadow:0 1px 2px rgba(0,0,0,0.8) inset,0 1px 1px rgba(255,255,255,0.3); }
#smartbanner.android .sb-close:active { color:#eee; }
#smartbanner.android .sb-info { color:#ccc; text-shadow:0 1px 2px #000; }
#smartbanner.android .sb-info strong { color:#fff; }
#smartbanner.android .sb-button { min-width: 12%; border:1px solid #DDDCDC; padding:1px; color:#d1d1d1; background: none; border-radius: 0; box-shadow: none; }
#smartbanner.android .sb-button span { text-align: center; display: block; padding: 0 10px; background-color: #42B6C9; background-image: -webkit-gradient(linear,0 0,0 100%,from(#42B6C9),to(#39A9BB)); background-image: -moz-linear-gradient(top,#42B6C9,#39A9BB); text-transform:none; text-shadow:none; box-shadow:none; }
#smartbanner.android .sb-button:active, #smartbanner.android .sb-button:hover { background: none; }
#smartbanner.android .sb-button:active span, #smartbanner.android .sb-button:hover span { background:#2AC7E1; }

#smartbanner.windows .sb-icon { border-radius: 0px; }

a.fp-upload{
  position: absolute;
  top: calc(100% - 60px);
  background-image: url('../img/upload.png');
  background-size: contain;
  width: 40px;
  height: 40px;
  left: 15px;
}
a.fp-upload:after {
	content: "Upload a Charity Miles Video";
	margin-left: 40px;
	white-space: nowrap;
	display: inline-block;
	margin-top: 10px;
	color: white;
	text-decoration: none;
	font-weight: 600;
	text-transform: uppercase;
	text-shadow: none;
};

a.fp-uploads{
  position: absolute;
  background-image: url('../img/upload.png');
  background-size: contain;
  width: 40px;
  height: 40px;
  left: 15px;
}
a.fp-uploads:after {
	content: "Upload a Video";
	color: white;
	text-shadow: 0 1px 1px black;
	font-weight: 800;
	font-size: 16px;
	line-height: 18px;
	padding-bottom:0px;
	white-space: nowrap;
	display: inline-block;
	margin-top: 10px;
	text-decoration: none;
	text-transform: uppercase;
	border: 2px solid;
	border-color:purple;
	padding:5px;
	
};