/*----------------------------------------------------------------------------------
[fiafo.com] FiaFo™ // Copyright (c) 2010 - 2015 Fi a Fo Ltd. All rights reserved.

name:      global.css
version:   1.0.1 
date:      Feb 2015 (last update)
author:    Fi a Fo Ltd
email:     info@fiafo.com
website:   http://www.hellotether.com
@media:    Screen (Mobile First)

-----------------------------------------------------------------------------*/

html { -webkit-text-size-adjust: none; }	/* Stop text scaling when iOS device switched to landscape orientation */

*, *:after, *:before { 
	/* I'll include this star selector reset just as a general fallback to my reset.css */
  	margin: 0;	
  	padding: 0;
	/* Tweak the box-model so padding+border are included within any specified width/height */  	
	-webkit-box-sizing: border-box;	
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	font-size: 100%; 						/* Set BASE Font-Size at browser default 16px */
	line-height: 1.5em;						/* Baseline line-Height 24px / 16px */
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; 
	background-color:#3f048a;
	color: #fff;
}

/* Typesetting
----------------------------------*/
h1, h2, h3, h4, h5, h6 { font-style: normal; font-weight: normal; }
p {
	font-style: normal;
	font-weight: normal;
 	margin-bottom: 1.5em;			/* 24px (baseline) / 16px */
}
b { font-weight: bold; }
em { font-style: normal; }
strong {}
small { font-size:100%; }

h1, h2 {
	font-size: 1.5em;				/* 24px / 16px */
	line-height: 1.5em;				/* 36px (baseline x1.5) / 24px */
	font-weight: lighter;
	margin-bottom: 1em;				/* 24px (baseline) / 24px */
	text-align: center;
}

h3 {
	font-size: 1.25em;				/* 20px / 16px */
	line-height: 1.2em;				/* 24px (baseline) / 20px */
	margin-bottom: 1.2em;
}

/* Hyperlinks
----------------------------------*/
a, a:link, a:visited {
 	color: #44b7f2;
 	text-decoration: none;
}
a:hover, a:focus {
 	text-decoration: underline;
}
a:active  {
 	text-decoration: underline;
 	color: #6750f8;
}


/*--------------------------------------------------------------
	Layout Structure
--------------------------------------------------------------*/

/* Guarantee HTML5 structural tags are rendered as block-level elements */  
header, footer, nav, section, article, aside, figure, figcaption {  
	display:block;	
}

header {
	margin:0;
	padding:0;
		min-height: 100vh;			/* 100% percent of the browser viewport’s height */
}

section {
	margin:0;
	padding:0;
}

footer {
	margin:0;
	padding:0;
	text-align: center;
}

.content {
	position: relative;
	max-width: 800px; 
	margin:0 auto;
	padding: 0;
		overflow: hidden;			/* Make sure .content clears/wraps any floated elements */
		width: 100%;
		padding: 6em 0;				/* 48px (baseline x2) / 16px */
}

/*	Vertical Grid
--------------------------------------------------------------*/
/* Columns:12 / Gutter:50% / MaxWidth:800px */

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_full {
	position: relative;
	display: block;
	float: left;
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
		clear: both;	/* Force single colum content layout */
}

.grid_full { width: 100%; margin: 0; } /* Use with parent elements that nest multiple child elemnts on the grid */


/*--------------------------------------------------------------
	Styling
--------------------------------------------------------------*/

/* Fluid Images
----------------------------------*/
img, object {
	max-width: 100%;
}

/* Section backgrounds
--------------------------------------------*/
header 		{
	background: url("../imgs/bkg_tether.jpg") transparent no-repeat 50% 50% scroll;
	-webkit-background-size: auto 100%; -moz-background-size: auto 100%; -o-background-size: auto 100%; background-size: auto 100%;
}
.benefits	{ background-color: #3f048a; }
.downloads	{ background-color: #6639b7; }
.about		{ background-color: #6750f8; }
.support	{
	background: url("../imgs/bkg_tether2.jpg") transparent no-repeat 50% 50% scroll;
	-webkit-background-size: auto 120%; -moz-background-size: auto 120%; -o-background-size: auto 120%; background-size: auto 120%;
}
.faq 		{ 
	background: url("../imgs/bkg_pattern.png") #3f048a repeat fixed; 
	-webkit-background-size:500px 250px; -moz-background-size:500px 250px; -o-background-size:500px 250px; background-size:500px 250px
}


/* Header
--------------------------------------------*/
.header-wrap {
	position: relative;
	display: block;
	float: left;
	padding:0;
	margin:0;
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
		clear: both;	/* Force single colum content layout */
	text-align: center;
}
.header-wrap figure {
	position: relative;
	display: block;
	float: left;
	padding:0;
	margin:0;
	width: 30%;
	margin-left: 35%;
	margin-right: 35%;
		clear: both;	/* Force single colum content layout */
		
		margin-bottom: 8%;
}
.header-wrap figure img {
	display: block;
	margin:0;
	padding:0;
	width: 100%;
}
.header-wrap h1	{ text-shadow: 0px 2px 0 rgba(0, 0, 0, 0.1); }
.header-wrap p	{ color: rgba(255, 255, 255, 0.65); }

a.scroll-down { display: none; }	/* Override @media and display for desktop only */

/* Benefits
--------------------------------------------*/
.badges { margin-bottom: 3em; }	/* 48px (baseline) / 16px */
.badges figure {
	display: block;
	padding:0;
	margin:0 auto;
	width: 60%;
	margin-bottom: 1.5em;		/* 24px (baseline) / 16px */
}
.badges figure img {
	display: block;
	margin:0;
	padding:0;
	width: 100%;
}

.badges > h3 	{ text-align: center; }
.badges > p 	{ color: rgba(255, 255, 255, 0.65); }
.badges > p > em { color: rgba(255, 255, 255, 1); }


/* About
--------------------------------------------*/
.text-colum {
	position: relative;
	display: block;
	float: left;
	padding:0;
	margin:0;
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
		clear: both;	/* Force single colum content layout */
	text-align: center;
}

.text-colum p {
	font-size: 1.25em;				/* 20px / 16px */
	line-height: 1.2em;				/* 24px (baseline) / 20px */
	margin-bottom: 1.2em;
	text-align: center;
	font-weight: lighter;
	color: rgba(255, 255, 255, 0.75);
}


/* Intro text
--------------------------------------------*/
.text-intro {
	color: rgba(255, 255, 255, 0.65);
	text-align: center;
	margin-bottom: 3em;			/* 48px (baselinex2) / 16px */
}

/*	Download buttons
------------------------------------------------------------------*/
ul.apps { 
	list-style: none;
	text-align: center;
}
ul.apps li {
	display: inline-block;
	margin:0 4%;
	padding:0;
}

/* Version number under buttons */
ul.apps li span {
	position: relative;
	display: block;
	margin-top: 1.5em;			/* 24px (baseline) / 16px */
	color: rgba(255, 255, 255, 0.4);
}
ul.apps li:hover span {
	color: rgba(255, 255, 255, 1);
	cursor: default;
}

a.btn_apps {
	position: relative;
	display: block;
	cursor: pointer;
	padding:0;
	margin:0 10px;
	width: 120px;
	height: 120px;	
	border: none;
	background-color: #3f048a;
	-webkit-border-radius: 60px;
	-moz-border-radius: 60px;
	border-radius: 60px;
	/* Lock to standard graphic dimension */
	-webkit-background-size:66px 66px;
	-moz-background-size:66px 66px;
	-o-background-size:66px 66px;
	background-size:66px 66px;
		/*! Hide text and replace with an image (Based on Scott Kellum method) */
		background-position: 50% 50%;
		background-repeat: no-repeat;
		text-indent: -100%;				/*! Indent out of frame of button shape and size */
		color: rgba(255, 255, 255, 0); 	/* Make sure indent text is not visible */
		white-space: nowrap;
		overflow: hidden;
	/* Transition FX */	
	transition-property: background-color, background-size;
	transition-duration: .2s, .15s;
	transition-timing-function: ease-in, ease-out;	
}
a.btn_apps.macapp {
	/* Image fallback if no SVG support - Invisible gradient technique. */
	background-image: url("../imgs/icn_macapp_66@2x.png");
	background-image: linear-gradient(transparent, transparent), url("../svg/icn_macapp_66.svg");
}
a.btn_apps.iphoneapp {
	/* Image fallback if no SVG support - Invisible gradient technique. */
	background-image: url("../imgs/icn_iphoneapp_66@2x.png");
	background-image: linear-gradient(transparent, transparent), url("../svg/icn_iphoneapp_66.svg");
}

a.btn_apps.macapp:hover, a.btn_apps.macapp:focus, a.btn_apps.macapp:active,
a.btn_apps.iphoneapp:hover, a.btn_apps.iphoneapp:focus, a.btn_apps.iphoneapp:active {
	background-color: #44b7f2;
	-webkit-background-size:60px 60px;
	-moz-background-size:60px 60px;
	-o-background-size:60px 60px;
	background-size:60px 60px;
}

/*	FAQs
------------------------------------------------------------------*/
.faqs > ul > li { margin-bottom: 48px; }
.faqs > ul > li > h3 { border-bottom: 1px solid; #fff; padding-bottom: 0.6em; margin-bottom: 0.6em; } /* 12px (baseline x0.5) / 20px */
.faqs > ul > li > p { color: rgba(255, 255, 255, 0.65); }
.faqs > ul > li > p > b { color: rgba(255, 255, 255, 1); }
.faqs > ul > li > ul { list-style: disc outside;  overflow: auto; }
.faqs > ul > li > ol { list-style: decimal outside;  overflow: auto; }

/* Use :target pseudo selector to highlight when linking directly to an FAQ item */
.grid_4 > h3:target {
    -webkit-animation: highlight 1.5s 1;
    -moz-animation: highlight 1.5s 1;
    animation: highlight 1.5s 1; 
}

@-webkit-keyframes highlight {
    0% { background-color: rgba(103,80,248,1); }
    100% { background-color: rgba(103,80,248,0); }
}
@-moz-keyframes highlight {
	0% { background-color: rgba(103,80,248,1); }
	100% { background-color: rgba(103,80,248,0); }
}
@keyframes highlight {
    0% { background-color: rgba(103,80,248,1); }
    100% { background-color: rgba(103,80,248,0); }
}


/*	Social buttons
------------------------------------------------------------------*/
ul.social { 
	list-style: none;
	text-align: center;
}
ul.social li {
	display: inline-block;
	margin:0;
	padding:0;
}
a.btn_share {
	position: relative;
	display: block;
	cursor: pointer;
	padding:0px;
	margin:0 10px;
	width: 120px;
	height: 120px;	
	border: none;
	-webkit-border-radius: 60px;
	-moz-border-radius: 60px;
	border-radius: 60px;
	/* Lock to standard graphic dimension */
	-webkit-background-size:56px 56px;
	-moz-background-size:56px 56px;
	-o-background-size:56px 56px;
	background-size:56px 56px;
		/*! Hide text and replace with an image (Based on Scott Kellum method) */
		background-position: 50% 50%;
		background-repeat: no-repeat;
		text-indent: -100%;				/*! Indent out of frame of button shape and size */
		color: rgba(255, 255, 255, 0); 	/* Make sure indent text is not visible */
		white-space: nowrap;
		overflow: hidden;
	/* Transition FX */	
	transition-property: background-color, background-size;
	transition-duration: .3s, .15s;
	transition-timing-function: ease-in;	
}

a.btn_share.tt { 
	background-color: #5183d6;
	/* Image fallback if no SVG support - Invisible gradient technique. */
	background-image: url("../imgs/icn_tt_60@2x.png");
	background-image: linear-gradient(transparent, transparent), url("../svg/icn_tt_60.svg");
}
a.btn_share.fb { 
	background-color: #3649a4;
	/* Image fallback if no SVG support - Invisible gradient technique. */
	background-image: url("../imgs/icn_fb_60@2x.png");
	background-image: linear-gradient(transparent, transparent), url("../svg/icn_fb_60.svg");
}

a.btn_share.tt:hover, a.btn_share.tt:focus, a.btn_share.tt:active,
a.btn_share.fb:hover, a.btn_share.fb:focus, a.btn_share.fb:active { 
	-webkit-background-size:66px 66px;	
	-moz-background-size:66px 66px;	
	-o-background-size:66px 66px;	
	background-size:66px 66px;	
}
a.btn_share.tt:hover, a.btn_share.tt:focus, a.btn_share.tt:active { background-color: #55acee; }
a.btn_share.fb:hover, a.btn_share.fb:focus, a.btn_share.fb:active { background-color: #335bab; }


/*	Native share buttons and counters
------------------------------------------------------------------*/
.share-buttons { text-align: center; }
.twitter-share-button, .fb-share-button {
	display: inline-block;
	margin: 0 10px;
	padding: 0;
	vertical-align: middle;
	margin-bottom: 1.5em;			/* 24px (baseline) / 16px */
}

/*	Footer
------------------------------------------------------------------*/
footer > .content > img {
	display: block;
	padding: 0;
	margin: 0 auto 3em auto;		/* 48px (baseline x2) / 16px */
}


/*	Text selection highlight
------------------------------------------------------------------*/
::selection { background:#44b7f2; color:#ffffff; }
::-moz-selection { background:#44b7f2; color:#ffffff; }
::-webkit-selection { background:#44b7f2; color:#ffffff; }


/*----------------------------------------------------------------------------------------------------------------------------
	
	Media Queries - Desktop up from 800px
	
----------------------------------------------------------------------------------------------------------------------------*/

@media screen and (min-width: 800px) {

	/* Typesetting
	----------------------------------*/
	h1 {
		font-size: 1.875em;				/* 30px / 16px */
		line-height: 1.2em;				/* 36px (baseline x1.5) / 30px */
		font-weight: lighter;
		margin-bottom: 0.8em;			/* 24px (baseline) / 30px */
	}

	/*--------------------------------------------------------------
		Layout Structure
	--------------------------------------------------------------*/
	header, .support {
		-webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;
		background-attachment: fixed;
	}		
	.content {
		position: relative;
		min-width: 780px;				/* Minimum 800px width minimum screen (20px allowance for browser's vertical scroll column) */
		max-width: 1080px; 
		margin:0 auto;
			overflow: hidden;			/* Make sure .content clears/wraps any floated elements */
			width: 100%;	
	}
	
	/* Vertical Grid
	--------------------------------------------------------------*/
	/* Columns:12 / Gutter:50% / MinWidth:780px / MaxWidth:1080px */
	 
	.grid_1 	{ width: 4.1666666666667%; }
	.grid_2 	{ width: 12.5%; }
	.grid_3 	{ width: 20.833333333333%; }
	.grid_4 	{ width: 29.166666666667%; }
	.grid_5 	{ width: 37.5%; }
	.grid_6 	{ width: 45.833333333333%; }
	.grid_7 	{ width: 54.166666666667%; }
	.grid_8 	{ width: 62.5%; }
	.grid_9 	{ width: 70.833333333333%; }
	.grid_10 	{ width: 79.166666666667%; }
	.grid_11 	{ width: 87.5%; }
	.grid_12 	{ width: 95.833333333333%; }
	.grid_full 	{ width: 100%; }
	
	.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_full  {
		position: relative;
		display: block;
		float: left;
		margin-left: 2.0833333333333%;
		margin-right: 2.0833333333333%;
			clear: none;	/* Override clear:both; that forces single colum content layout */
	}
	.grid_full { margin: 0; } /* Use with parent elements that nest multiple child elemnts on the grid */
	

	/*--------------------------------------------------------------
		Styling
	--------------------------------------------------------------*/
	
	/* Section backgrounds
	--------------------------------------------*/
	header, .support {
		-webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;
		background-attachment: fixed;
	}
	.faq { 
		-webkit-background-size:1000px 500px; -moz-background-size:1000px 500px; -o-background-size:1000px 500px; background-size:1000px 500px;
	}
	
	/* Header
	--------------------------------------------*/
	.header-wrap {
		width: 70%;
		margin-left: 15%;
		margin-right: 15%;
		margin-bottom: 1.5em;			/* 24px / 16px */
	}
	.header-wrap figure {
		width: 20%;
		margin-left: 40%;
		margin-right: 40%;
	}

	/* Scroll down prompt */
	a.scroll-down {
		display: block;
		overflow: auto;
		margin:0 auto;
		padding:1.5em 0;				/* 24px / 16px */
		width: 20%;
		bottom: 0;
		left: 0;
	    text-align: center;
	    background-color: transparent;
	    opacity: 0.5;
	    /* Lock to standard graphic dimension */
	    -webkit-background-size:38px 20px;
	    -moz-background-size:38px 20px;
	    -o-background-size:38px 20px;
	    background-size:38px 20px;
	    /*! Hide text and replace with an image (Based on Scott Kellum method) */
	    background-position: 50% 50%;
	    background-repeat: no-repeat;
	    text-indent: -100%;				/*! Indent out of frame of button shape and size */
	    color: rgba(255, 255, 255, 0); 	/* Make sure indent text is not visible */
	    white-space: nowrap;
	    overflow: hidden;
	    /* Image fallback if no SVG support - Invisible gradient technique. */
	    background-image: url("../imgs/icn_arrow_38x20@2x.png");
	    background-image: linear-gradient(transparent, transparent), url("../svg/icn_arrow_38x20.svg");
	    /* Transition FX */	
	    transition-property: background-position, opacity;
	    transition-duration: .15s;
	    transition-timing-function: ease-out;	
	}
	a.scroll-down:hover, a.scroll-down:focus, a.scroll-down:active {
		background-position: 50% 65%;
		opacity: 1;
	}
	
	/* Benefits
	--------------------------------------------*/
	.badges figure { width: 80%; }
	
	/* About
	--------------------------------------------*/
	.text-colum {
		width: 70%;
		margin-left: 15%;
		margin-right: 15%;
	}
	
	
	/*	FAQs
	------------------------------------------------------------------*/
	ul.grid_full li:nth-child(3n+1) { clear: left; }	/* Applies every 3rd <li> items from and including the 1st */


} /* /@media Desktop */


/*----------------------------------------------------------------------------------------------------------------------------
	
	Media Queries - iPad (all models and generations) in landscape
	
----------------------------------------------------------------------------------------------------------------------------*/

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	
	/* Section backgrounds
	--------------------------------------------*/
	header, .support { 
		-webkit-background-size: 120%;
		-moz-background-size: 120%;
		-o-background-size: 120%;
		background-size: 120%;
		background-attachment: scroll;
	 }

} /* /@media iPad landscape */