* {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
}

#main{
	position:relative;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

body {
    background: #eee;
    color: #444;
    -webkit-font-smoothing: antialiased;
    font-family: 'SansationLight'; /*"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; */
    font-weight: 400; 
    height: auto !important;
    /*height: 100%;*/
    min-height: 100%;
    text-rendering: optimizeLegibility;
}

h1{
	height: 25%;
	font-size: 1.17em;
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
    display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	text-align: center;
	padding: 12px 0;
}

h2{
	background-color: white;
	font-size: 0.83em;
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
    display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	text-align: center;
	padding-bottom: 12px;
}

#InfoPanel {
		background-color: white;
}
#InfoPanel img{
		/*width: 100%;*/
		height: 350px;
		padding: 12px 0;
		margin: 0px auto;
		display: block;
}

.FeaturesExplained {
	background-color: white;
}
/*
.FeaturesExplained  img {
	width: 100%;
	height: auto;
}
*/
.FeaturesExplained  p {
	position: relative;
	text-align: center;
	font-size: 20px;
	margin:0;
	padding: 20px;
}

.FeaturesBackColorPanel1 {
	background-color: rgba(249,249,249, 1);
	width: 100%;
}

.FeaturesBackColorPanel2 {
	background-color: white;
}

#intro {
	background: url("./img/Features/App/IOSApplicationIntro.jpg");
	background-color: rgba(249,249,249, 1); /*white;*/
	background-size: auto 60%;
	background-position: bottom;
	background-repeat: no-repeat;
	height: 650px;
}
#intro p {
	position: relative;
	width: 90%;
	top: 0;
	left: 5%;
	font-size: 5vw;
}

#effortless {
	background: url("./img/Features/App/IOSApplicationEffortless.jpg");
	background-color: white;
	background-size: auto 60%;
	background-position: bottom;
	background-repeat: no-repeat;
	height: 500px;
}
#effortless p {
	position: relative;
	width: 90%;
	top: 0;
	left: 5%;
}

#accessable {
	background: url("./img/Features/App/IOSApplicationF2H.jpg");
	background-color: rgba(249,249,249, 1);
	background-size: 730px;
	background-position: bottom;
	background-repeat: no-repeat;
	height: 930px;
}
#accessable p {
	position: relative;
	width: 90%;
	top: 10px;
	left: 5%;
}

#powerful2 {
	background: url("./img/Features/App/IOSApplicationPowerfulL.jpg"), url("./img/Features/App/IOSApplicationPowerfulR.jpg");
	background-position: 10% 90%, 90% 90%;
	background-repeat: no-repeat, no-repeat;
	background-size: 132px 400px, 132px 400px;
	background-color: white;
	height: 800px;
}
#powerful2 p {
	top: -400px;
}

#powerfulL {
	visibility: hidden;
	padding: 20px 0px 20px 20px;
	width: 132px;
	height: 400px;
}
#powerfulR {
	visibility: hidden;
	padding: 20px 20px 20px 0;
	width: 132px;
	height: 400px;
}
	
#geofencing {
	background: url("./img/Features/App/GeoFencingIcon.png");
	background-position: 50% 10%;
	background-repeat: no-repeat;
	background-size: 150px 150px;

	background-color: rgba(249,249,249, 1); /*white;*/
	height: 450px;
}
#geofencing p {
	top: 200px;
}

#spokenalerts {
	background: url("./img/Features/App/SpokenAlertIcon.png");
	background-position: 60% 10%;
	background-repeat: no-repeat;
	background-size: 150px 150px;

	background-color: white;
	height: 450px;
}
#spokenalerts p {
	top: 200px;
}

@media all and (min-width: 376px) {
	#intro {
		height: 750px;
	}
	#intro p {
		font-size: 20px; /*5vw;*/
		top: 0;
	}
	#accessable {
		height: 860px;
	}
}

/*Handle iPhone Portait*/							
@media all and (min-width: 600px) {
/*@media all and (min-width: 376px) {*/
	h1{
		font-size: 1.5em;
	}
	h2{
		font-size: 1.17em;
	}
	#InfoPanel img{
			/*width: 100%;*/
			height: 500px;
			padding: 12px;
			margin: 0px auto;
			display: block;
	}
	
	#intro {
		background-color: rgba(249,249,249, 1); /*white;*/
		background-size: contain;
		background-position: 5% 0;
		background-repeat: no-repeat;
		height: 600px;
	}
	#intro p {
		position: relative;
		width: 60%;
		top: 20%;
		left: 40%;
		font-size: 20px;
	}
	
	#effortless {
		background-color: white;
		background-size: 250px;
		background-position: 90% bottom;
		background-repeat: no-repeat;
		height: 450px;
	}
	#effortless p {
		position: relative;
		width: 55%;
		top: 25%;
		left: 0px;
	}
	
	#accessable {
		height: 800px;
	}
	#powerful2 {
		background: none;
		background-color: white;
		display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
		display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
		display: -ms-flexbox;      /* TWEENER - IE 10 */
		display: -webkit-flex;     /* NEW - Chrome */
		display: flex;
		justify-content: space-around;
		height: 500px;
	}
	#powerful2 p {
		position: relative;
		width: 70%;
		margin: 40px auto 20px auto;
		-webkit-box-flex: 2;
		-moz-box-flex:  2;
		-webkit-flex:  2;
		-ms-flex:  2;
		flex: 2;
		top: 0;
	}
	
	#powerfulL {
		height: 500px;
		max-width: 166px;
		-webkit-box-flex: 1;
		-moz-box-flex:  1;
		-webkit-flex:  1;
		-ms-flex:  1;
		flex: 1;
		padding: 20px 0px 20px 20px;
		visibility: visible;
	}
	#powerfulR {
		height: 500px;
		max-width: 166px;
		-webkit-box-flex: 1;
		-moz-box-flex:  1;
		-webkit-flex:  1;
		-ms-flex:  1;
		flex: 1;
		padding: 20px 20px 20px 0;
		visibility: visible;
	}

/* Medium screens */
@media all and (min-width: 715px) 
{
	h1{
		font-size: 2em;
	}
	h2{
	font-size: 1.5em;
	}
	#intro p {
		width: 60%;
		left: 35%;
	}
	}#spokenalerts {
		background-position: 55% 10%;
	}
}

@media(min-width: 1025px){
/*	
	#main{
		max-width:1000px;
		border-right: 12px solid white;
		border-left: 12px solid white;
	}
*/

	.FeaturesExplained {
		max-width: 1025px;
		margin: auto;
	}
}

#iosappstore {
	background-color: white;
	width: 100%;
}

#iosappstore img {
	display: block;
	margin: auto;
	float: left;
}

#androidappstore {
	background-color: white;
	width: 100%;
}

#androidappstore img {
	display: block;
}
