/* import fonts */


/* ------------------------ RESET LAYOUT ------------------------ */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ------------------------ STYLE DEFAULTS ------------------------ */

html {
 	font-size: 16px;
}

/* Body default font size */
body {
	color:#4f9be2;
	background-color:#f4f4f1;
	font-size: 62.5%;
	font-family: 'PT Sans';
	text-align:center;

}

/* Heading 1 */
h1 {
	
	color:#010005;
	font-size: 4.8em;
	font-family: 'PT Sans';
	font-weight: bold; 
	margin-top: 10px;

}

/* Heading 4 */
h4{
	line-height: 2;
	color:#000000;
	font-family:'PT Sans';
	font-size:1.8em;
	font-weight:bold;
}



/* ------------------------ TITLE ------------------------ */


/* content width container */

.titles {
	width:900px;
	height:115px;
	margin: 0 auto;
	position:relative;
	padding-top:35px;
	overflow:visible;
	
}


/* Pre Tile text */
.pretitle{
	float:none;
	font-family: 'PT Serif';
	font-size: 1.8em;
}




/* Subheading Text */
.subheading{
	
	float:none;
	font-family: 'PT Serif';
	font-size: 1.4em;
	color:#999999;
	margin-top:8px;
	
}

/* ------------------------ MAIN IMAGE ------------------------ */

/* Holder for the main image */
.imageholder{
	width:900px;
	margin: 0 auto;
	position:relative;
	height:500px;
}

/* Ipad Image */
.ipad{

	position:absolute;
	bottom:-120px;
	left:281px;
	width:500px;
	height:620px;
	background-image:url('./images/ipad.png');
	background-repeat:no-repeat;
	z-index:1;
}

/* Iphone Image */
.iphone{
	position:absolute;
	bottom:-117px;
	left:642px;
	width:240px;
	height:460px;
	background-image:url('./images/iphone.png');
	background-repeat:no-repeat;
	z-index:2;
}

/* left-stripe */
.stripe-left{
	position:absolute;
	bottom:142px;
	left:0px;
	width:310px;
	height:180px;
	background-image:url('./images/stripe-left.png');
	background-repeat:no-repeat;
	padding:70px 0 0 115px;
	z-index:3;
}


/* Text holder with icon inside left stripe */
.icon-stripe{
	height:36px;
	color:#ffffff;
	font-family:'PT Sans';
	font-weight:bold;
	font-size:2em;
	text-align:left;
	padding:12px 0 0 40px;
	background-image:url('./images/icon-stripe.png');
	background-repeat:no-repeat;
	
}

/* Right Stripe */
.stripe-right{
	position:absolute;
	bottom:16px;
	left:804px;
	width:90px;
	height:120px;
	background-image:url('./images/stripe-right.png');
	background-repeat:no-repeat;
	z-index:4;
}

/* ------------------------ MAIN IMAGE BUTTONS ------------------------ */

/* Ready for text - Postion and font */
.ready-for-pos
{
	position:absolute;
	bottom:40px;
	left:0px;
	font-family:'PT Sans';
	font-weight:bold;
}

/* Blue Arrow within main image */
.arrow-blue{
	position:absolute;
	bottom:13px;
	left:6px;
	background-image:url('./images/arrow-blue.png');
	background-repeat:no-repeat;
	width:27px;
	height:21px;
	
}

/* Circle button border */
.circle-button{
	width:56px;
	height:56px;
	border-radius:50%;
	border:1px solid #4f9be2;
}

/* Hover class for circle buttons within main image*/
.hover-circle{	
	background-color:#ffffff;
	background-repeat:no-repeat;
	background-position:15px 11px;
}

/* Hover class for circle buttons within main image Hover Action */
.hover-circle:hover{
	background-color:#4f9be2;
	background-position:15px -21px;	
}

/* Change cloud visibility on button hover */
.hover-circle:hover .cloud-device{
	visibility:visible;
}

/* Ipad button icon and position within main image */
.ipad-button{
	position:absolute;
	bottom:-29px;
	left:40px;
	background-image:url('./images/icon-ipad.png');
}

/* Iphone button icon and position within main image */
.iphone-button{
	position:absolute;
	bottom:-29px;
	left:140px;
	background-image:url('./images/icon-iphone.png');
}

/* Device Cloud for displaying info */
.cloud-device{
	visibility:hidden;
	position:absolute;
	left:2px;
	top:-19px;
	background-image:url('./images/cloud-device.png');
	background-repeat:no-repeat;
	width:52px;
	height:21px;
	color:#ffffff;
	font-family:'PT Sans';
	font-size:0.8em;
	line-height:17px;
	z-index:1;
}


/* And symbol between device icons */
.and-symbol{
	width:25px;
	height:25px;
	position:absolute;
	bottom:-13px;
	left:108px;
	border-radius:50%;
	background-color: #4f9be2;
	color:#ffffff;
	font-size:1.2em;
	font-weight:bold;
	line-height:25px;
}

/* ------------------------ INSTRUCTIONS ------------------------ */

/* Light Body Background */
.instructions-body{
	background-color:#ffffff;
	width:100%;
	height:430px;
	text-align:left;
	padding-top:78px;
	
}
/* Instructions container */
.instructions{
	width:900px;
	height:430px;
	margin: 0 auto;
	position:relative;
}

/* Instructions Pre Title Text */
.instructions-pretitle{
	font-size:1.4em;
}

/* Instruction Image Container */
.instruction{
	position:absolute;
	width:170px;
	height:170px;
	border-radius:50%;
	border: 10px solid #4f9be2;
	
}

/* Instruction Image */
.instruction .img{
	position:absolute;
	border-radius:50%;
	overflow:hidden;
	width:100%;
	height:100%;
	z-index:0;
}

/* Instruction Image Plus Icon */
.instruction .plus-icon{
	visibility:hidden;
	position:absolute;
	top:55px;
	left:55px;
	width:60px;
	height:60px;
	z-index:3;
	background-image:url('./images/icon-plus.png');
	background-repeat:no-repeat;
}


/* Instruction Image Hover */
.instruction:hover .img-hover{
	position:absolute;
	border-radius:50%;
	background-color:#4f9be2;
	opacity:0.3;
	width:100%;
	height:100%;
	z-index:0;
}

/* RESET NUMBER SAFARI BUG */
.instruction:hover .number{
	width:42px;
	height:42px;
	border-radius:50%;
	background-color:#000000;
	z-index:5;
	text-align:center;
	color:#ffffff;
	font-family:'PT Sans';
	font-size:1.8em;
	font-weight:bold;
	line-height:42px;
}

/* Instruction Image Plus Icon Hover*/
.instruction:hover .plus-icon{
	visibility:visible;

}


/* Instruction Number Circle */
.instruction .number{
	visibility:visible;
	position:absolute;
	width:42px;
	height:42px;
	border-radius:50%;
	background-color:#000000;
	z-index:6;
	text-align:center;
	color:#ffffff;
	font-family:'PT Sans';
	font-size:1.8em;
	font-weight:bold;
	line-height:42px;
}

/* Instruction Number Circle - Left Position LEFT CANNOT BE ZERO SAFARI BUG */
.instruction .left-num{
	top:-4px;
	left:-1px;
}

/* Instruction Number Circle - Right Position RIGHT CANNOT BE ZERO SAFARI BUG */
.instruction .right-num{
	top:-4px;
	right:-1px;
}

/* Instruction Text */
.instruction .text{
	position:absolute;
	width:250px;
	left:-40px;
	color:#666666;
	font-family:'PT Sans';
	font-size:1.2em;
	text-align:center;

}

/* Instruction Text Hover */
.instruction:hover .text{
	color:#4f9be2;
}

/* Instruction Text - Bottom Text Position */
.instruction .bottom-text{
	bottom:-35px;
}

/* Instruction Text - Top Text Position */
.instruction .top-text{
	top:-35px;
}

/* Instruction 1 Position */
.ipos1{
	top:90px;
	left:40px;
}

/* Instruction 2 Position */
.ipos2{
	top:175px;
	left:265px;
}

/* Instruction 3 Position */
.ipos3{
	top:30px;
	left:455px;
}

/* Instruction 4 Position */
.ipos4{
	top:145px;
	left:665px;
}

/* First Arrow */
.arrow1{
	position:absolute;
	top:210px;
	left:228px;
	width:40px;
	height:30px;
	background-image:url('./images/arrow1.png');
	background-repeat:no-repeat;
}

/* Second Arrow */
.arrow2{
	position:absolute;
	top:200px;
	left:448px;
	width:40px;
	height:30px;
	background-image:url('./images/arrow2.png');
	background-repeat:no-repeat;
}

/* Third Arrow */
.arrow3{
	position:absolute;
	top:155px;
	left:643px;
	width:30px;
	height:40px;
	background-image:url('./images/arrow3.png');
	background-repeat:no-repeat;
}



/* ------------------------ DOWNLOAD THIS APP ------------------------ */

/* Download Container */
.download{
	width:900px;
	height:250px;
	margin: 0 auto;
	padding-top:12px;
	position:relative;
}


/* Buttons Container */
.buttons-conatiner{
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width:100%;
	height:75px;
	margin-top:50px;
	padding:0 35px 0 35px;
	background-image:url('./images/icon-or.png');
	background-repeat:no-repeat;
	background-position: center center;
}

/* Download Button */
.btn-lite, .btn-pro{
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position:relative;
	border-radius:8px;
	padding:14px 30px;
	width:360px;
	height:75px;
	background-color:#4f9be2;
	background-repeat:no-repeat;
	background-position: right 20px center;
	color:#ffffff;
	text-align:left;
	font-size:3.6em;
	font-weight:bold;
}

/* Download Button Hover */
.btn-lite:hover, .btn-pro:hover{
	box-shadow: 0 0 12px #4f9be2;
	-webkit-box-shadow: 0 0 12px #4f9be2;
	cursor:pointer;
}

/* Download Button - Lite Version*/
.btn-lite{
	float:left;
	background-image:url('./images/icon-lite.png');
}

/* Download Button - Pro Version*/
.btn-pro{
	float:right;
	background-image:url('./images/icon-pro.png');
}
	
/* Button Subtitle */
.btn-lite span, .btn-pro span{
	display:block;
	font-size:0.33em;
	font-family:'PT Sans';
	font-weight:normal;
	clear:both;
}

/* Appstore Icon Hover */
.btn-lite .appstore-icon, .btn-pro .appstore-icon {
	position:absolute;
	left:20px;
	bottom:-72px;
	width:220px;
	height:75px;
	background-image:url('./images/appstore.png');
	background-repeat:no-repeat;
}

/* Appstore Icon Hover */
.btn-lite:hover .appstore-icon, .btn-pro:hover .appstore-icon{
	background-position:0px -71px;
	cursor:pointer;
}

/* ------------------------ FEATURES ------------------------ */


/* Features Container */
.features{
	position:relative;
	width:900px;%;
	height:320px;
	margin:95px auto 0 auto;
	border-top:1px solid #4f9be2;
}

/* Features Title */
.features .title{
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display:block;
	position:absolute;
	padding:9px 0;
	top:-16px;
	left:393px;
	font-size:14px;
	width:115px;
	height:30px;
	background-color:#4f9be2;
	color:#ffffff;
	border-radius:4px;
	
}

/* Features Table Container */
.features table {
	margin-top:24px;
	width:100%;
}

/* Features Table Column */
.features table td{
	width:50%;
}

/* Features Table Last Column */
.features table td:last-child{
	padding-left:40px;
}

/* List Containers */
.video-downloads, .other-features{
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding:24px 0 0 72px;
	font-family:'PT Serif';
	font-size:1.8em;
	font-weight:bold;
	text-align:left;
	background-repeat:no-repeat;
	
}

/* Video Downloads Icon */
.video-downloads{
	background-image:url('./images/icon-video-downloads.png');
}

/* Other Features Icon */
.other-features{
	background-image:url('./images/icon-other-features.png');
}

/* Lists */
.video-downloads ul, .other-features ul{
	margin-top:32px;
	font-family:'PT Sans';
	font-size:0.66em;
	font-weight:normal;
	
}

/* List Elements */
.video-downloads ul li, .other-features ul li{
	padding:6px 0;
	
}

/* ------------------------ COPYRIGHT ------------------------ */
.copyright{
	width:100%;
	font-family:'PT Sans';
	font-size:1.2em;
	color:#666666;
	margin:45px 0;
}

.fancybox-title span{
	font-family:'PT Sans';
	font-weight: normal !important;
}