.radius5 { -webkit-border-radius:5px; -moz-border-radius:5px; -khtml-border-radius:5px; border-radius:5px; }
.radius10 { -webkit-border-radius:10px; -moz-border-radius:10px; -khtml-border-radius:10px; border-radius:10px; }
.radius20 { -webkit-border-radius:20px; -moz-border-radius:20px; -khtml-border-radius:20px; border-radius:20px; }

.capInitials { text-transform:capitalize; }
.lowercase { text-transform:lowercase; }

.mainNavigationLogo { content:url(https://www.happometer.com/images/logo-lighter.png); }

.pageTitle { font-size:16px; font-weight:normal; padding-left:5px; margin-top:50px; color:#000; border-bottom:1px solid #999; width:100%; box-shadow:0 1px 0px 0 rgba(255, 255, 255, 0.7); }

.introStatement { text-align:left; }
.introSubtitle { text-transform:capitalize; color:#e2e2e2; font-family:Oswald; }
.introTitle { color:#a2a2a2; text-transform:uppercase; font-family:Oswald; }
.introDesc { font-size:1.9rem; color:#e2e2e2; }

.lineSepartor { clear:both; margin:40px 0 40px 0; border-top:2px solid #fff; width:100%; box-shadow:0 -1px 0px 0 rgba(0, 0, 0, 0.15); }
.containerShadow { box-shadow:0 -1px 0px 0 rgba(0, 0, 0, 0.15); }

.colorHighlight { color:#d54527; }

.styledTitle { text-align:left; text-transform:uppercase; font-size:22px; font-family:Oswald; color:#666; }
.styledTitle span { font-weight:bold; color:#d54527; }

.organizedList { margin-left:-35px; }
.organizedList li { margin-left:35px; margin-top:10px; }

.keySection { width:auto; max-width:800px; margin:100px auto 0 auto; font-size:18px; line-height:26px; }
.keySectionLeft { margin-top:0px; }
.keySectionImg { -webkit-border-radius:5px; -moz-border-radius:5px; -khtml-border-radius:5px; border-radius:5px; }
.keySectionDesc { margin-top:10px; }

.videoContainer { margin:10px auto 10px auto; cursor:pointer; width:auto; }
.videoContainer video { max-width:100%; width:auto; margin:0 auto; border:1px solid #e2e2e2; padding:5px; box-sizing:border-box; }

#footerLinks { display:table; width:350px; margin:0 auto; color:#2c97ca; font-size:16px; text-decoration: underline; }
#footerLinks, #headerLinks { font-family:Oswald; text-transform:uppercase; text-align:center; }
#headerLinks { color:#000; }
#headerLinks li span { cursor:pointer; }
#footerLinks div { display:table-cell; margin-left:40px; }
#footerLinks div span { cursor:pointer; }


.actionButton
{
	-webkit-border-radius:5px; -moz-border-radius:5px; -khtml-border-radius:5px; border-radius:5px;
	box-shadow:1px 1px 0px 0 rgba(0, 0, 0, 0.15);
	margin:10px auto 0 auto; color:#2c97ca; width:100px; background:rgba(255,255,255,1); 
	padding:5px 10px 5px 10px; text-align:center; cursor:pointer; font-weight:bold;
}

.actionButton span { display:inline-block; vertical-align:middle; font-size:1.2rem; font-family:Oswald; }
.actionButton div { display:inline-block; vertical-align:middle; font-size:0.9rem; font-weight:normal; font-family:Rubik; padding-left:4px; }


/*================================================================*/

#icon3Bars { cursor:pointer; z-index:500; position:fixed; right:10px; }
#icon3Bars .icon3Bars1, #icon3Bars .icon3Bars2, #icon3Bars .icon3Bars3 { background-color: #333; transition: 0.4s; }
.changeIcon3Bars .icon3Bars1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-9px, 6px); }
.changeIcon3Bars .icon3Bars2 { opacity: 0;}
.changeIcon3Bars .icon3Bars3 { -webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px); }


@media screen and (max-width:400px)
{
	#logo { width:150px; margin-left:10px; }	
	.keySection { padding-left:10px; padding-right:10px; }
	.keySectionLeft { float:none; max-width:300px; width:auto; margin:0 auto; }
	.keySectionImg { max-width:300px; }
	.keySectionRight { float:none; max-width:300px; width:auto; margin:0 auto; }
	
	#icon3Bars { display:block; top:10px; }
	#icon3Bars .icon3Bars1, #icon3Bars .icon3Bars2, #icon3Bars .icon3Bars3 { width:20px; height:3px; margin:3px 0; }
	#mainNavigation { height:35px; }
	#headerLinks { position:absolute; display:none; top:40px; left:0; margin:0; padding:10px 10px 30px 10px; width:40%; font-size:20px; text-align:left; text-decoration:none;
					background:rgba(255,255,255,1); border:2px solid #d7d7d7; z-index:99999; border-bottom-left-radius:20px; border-bottom-right-radius:20px; }
	#headerLinks li { display:block; padding-bottom:15px; padding-left:0px; border-bottom:1px solid #e2e2e2; }
	#demoButton { width:100%; margin-right:10px; box-sizing:border-box; color:#fff; background:rgba(243,172,43,1); }
	#loginButton { margin-top:20px; width:100%; margin-right:10px; box-sizing:border-box; color:#fff; background:rgba(213,69,39,1); }

	#introContainer { height:100vh; }
	.introStatement { margin-top:50px; margin-left:10px; max-width:350px; }
	.introSubtitle { font-size:1.4rem; }
	.introTitle { font-size:1.7rem; }
	.introDesc { font-size:1.2rem; margin-top:1.9rem; line-height:1.7rem; }
	.introArrows { margin-top:50px; }
}

@media screen and (min-width:401px)
{
	#logo { width:150px; margin-left:10px; }	
	.keySection { padding-left:10px; padding-right:10px; }
	.keySectionLeft { float:none; max-width:300px; width:auto; margin:0 auto; }
	.keySectionImg { max-width:300px; }
	.keySectionRight { float:none; max-width:300px; width:auto; margin:0 auto; }
	
	#icon3Bars { display:block; top:10px; }
	#icon3Bars .icon3Bars1, #icon3Bars .icon3Bars2, #icon3Bars .icon3Bars3 { width:20px; height:3px; margin:3px 0; }
	#mainNavigation { height:35px; }
	#headerLinks { position:absolute; display:none; top:40px; left:0; margin:0; padding:10px 10px 30px 10px; width:40%; font-size:20px; text-align:left; text-decoration:none;
					background:rgba(255,255,255,1); border:2px solid #d7d7d7; z-index:99999; border-bottom-left-radius:20px; border-bottom-right-radius:20px; }
	#headerLinks li { display:block; padding-bottom:15px; padding-left:0px; border-bottom:1px solid #e2e2e2; }
	#demoButton { width:100%; margin-right:10px; box-sizing:border-box; color:#fff; background:rgba(243,172,43,1); }
	#loginButton { margin-top:20px; width:100%; margin-right:10px; box-sizing:border-box; color:#fff; background:rgba(213,69,39,1); }

	#introContainer { height:100vh; }
	.introStatement { margin-top:70px; margin-left:10px; max-width:350px; }
	.introSubtitle { font-size:1.7rem; }
	.introTitle { font-size:2rem; }
	.introDesc { font-size:1.5rem; margin-top:2.1rem; line-height:2.1rem; }
	.introArrows { margin-top:50px; }
}

@media screen and (min-width:767px)
{
	#logo { width:200px; margin-left:10px; }	
	.keySection { padding-left:10px; padding-right:10px; }
	.keySectionLeft { float:none; max-width:430px; width:auto; margin:0 auto; }
	.keySectionImg { max-width:430px; }
	.keySectionRight { float:none; max-width:430px; width:auto; margin:0 auto; }

	#icon3Bars { display:block; top:10px; }	
	#icon3Bars .icon3Bars1, #icon3Bars .icon3Bars2, #icon3Bars .icon3Bars3 { width:35px; height:5px; margin:6px 0; }
	#mainNavigation { height:55px; }
	#headerLinks { position:absolute; display:none; top:60px; left:0; margin:0; padding:10px 10px 30px 10px; width:40%; font-size:20px; text-align:left; text-decoration:none;
					background:rgba(255,255,255,1); border:2px solid #d7d7d7; z-index:99999; border-bottom-left-radius:20px; border-bottom-right-radius:20px; }
	#headerLinks li { display:block; padding-bottom:15px; padding-left:0px; border-bottom:1px solid #e2e2e2; }
	#demoButton { width:100%; margin-right:10px; box-sizing:border-box; color:#fff; background:rgba(243,172,43,1); }
	#loginButton { margin-top:20px; width:100%; margin-right:10px; box-sizing:border-box; color:#fff; background:rgba(213,69,39,1); }

	#introContainer { height:100vh; }
	.introStatement { margin-top:120px; margin-left:50px; max-width:650px; }
	.introSubtitle { font-size:2.2rem; }
	.introTitle { font-size:2.6rem; }
	.introDesc { font-size:2.2rem; margin-top:2.2rem; line-height:2.9rem; }
	.introArrows { margin-top:100px; }
}

@media screen and (min-width:833px)
{
	#logo { width:200px; margin-left:10px; }	
	.keySection { padding-left:10px; padding-right:10px; }
	.keySectionLeft { float:left; max-width:370px; }
	.keySectionImg { max-width:370px; }
	.keySectionRight { float:left; max-width:370px; margin-left:30px; }

	#icon3Bars { display:none; }
	#mainNavigation { height:65px; }
	#headerLinks { position:initial; display:inline-block; margin:30px 0 0 20px; padding:0px; width:auto; max-width:1000px; font-size:16px; text-align:left; text-decoration:none; 
					background-color:transparent; border:0; }
	#headerLinks li { display:inline-block; margin-left:40px; border-bottom:0px; }
	#demoButton { width:75px; margin-right:0px; color:#000; background:rgba(255,255,255,1); }
	#loginButton { margin-top:0px; width:75px; margin-right:0px; color:#2c97ca; background:rgba(255,255,255,1); }

	#introContainer { height:100vh; }
	.introStatement { margin-top:140px; margin-left:50px; max-width:700px; }
	.introSubtitle { font-size:2.4rem; }
	.introTitle { font-size:2.8rem; }
	.introDesc { font-size:2.4rem; margin-top:2.7rem; line-height:3.4rem; }
	.introArrows { margin-top:50px; }
}

@media screen and (min-width:1023px)
{
	#logo { width:250px; margin:0; }
	.keySection { padding-left:0px; padding-right:0px; }
	.keySectionLeft { float:left; max-width:380px; }
	.keySectionImg { max-width:380px; }
	.keySectionRight { float:left; max-width:380px; margin-left:30px; }

	#icon3Bars { display:none; }
	#mainNavigation { height:65px; }
	#headerLinks { position:initial; display:inline-block; margin:30px 0 0 30px; padding:0px; width:auto; max-width:1000px; font-size:16px; text-align:left; text-decoration:none; 
					background-color:transparent; border:0; }
	#headerLinks li { display:inline-block; margin-left:40px; border-bottom:0px; }
	#demoButton { width:75px; margin-right:0px; color:#000; background:rgba(255,255,255,1); }
	#loginButton { margin-top:0px; width:75px; margin-right:0px; color:#2c97ca; background:rgba(255,255,255,1); }

	#introContainer { height:100vh; }
	.introStatement { margin-top:140px; margin-left:50px; max-width:850px; }
	.introSubtitle { font-size:2.7rem; }
	.introTitle { font-size:3.2rem; }
	.introDesc { font-size:2.9rem; margin-top:3.2rem; line-height:3.8rem; }
	.introArrows { margin-top:50px; }
}

@media screen and (min-width:1365px)
{
	#logo { width:250px; margin:0; }
	.keySection { padding-left:0px; padding-right:0px; }
	.keySectionLeft { float:left; max-width:380px; }
	.keySectionImg { max-width:380px; }
	.keySectionRight { float:left; max-width:380px; margin-left:30px; }

	#icon3Bars { display:none; }
	#mainNavigation { height:65px; }
	#headerLinks { position:initial; display:inline-block; margin:30px 0 0 30px; padding:0px; width:auto; max-width:1000px; font-size:16px; text-align:left; text-decoration:none; 
					background-color:transparent; border:0; }
	#headerLinks li { display:inline-block; margin-left:40px; border-bottom:0px; }
	#demoButton { width:75px; margin-right:0px; color:#000; background:rgba(255,255,255,1); }
	#loginButton { margin-top:0px; width:75px; margin-right:0px; color:#2c97ca; background:rgba(255,255,255,1); }

	#introContainer { height:100vh; }
	.introStatement { margin-top:120px; margin-left:50px; max-width:800px; }
	.introSubtitle { font-size:2.5rem; }
	.introTitle { font-size:3.1rem; }
	.introDesc { font-size:2.7rem; margin-top:3rem; line-height:3.6rem; }
	.introArrows { margin-top:50px; }
}

@media screen and (min-width:1919px)
{
	#logo { width:250px; margin:0; }
	.keySection { padding-left:0px; padding-right:0px; }
	.keySectionLeft { float:left; max-width:380px; }
	.keySectionImg { max-width:380px; }
	.keySectionRight { float:left; max-width:380px; margin-left:30px; }

	#icon3Bars { display:none; }
	#mainNavigation { height:65px; }
	#headerLinks { position:initial; display:inline-block; margin:30px 0 0 30px; padding:0px; width:auto; max-width:1000px; font-size:16px; text-align:left; text-decoration:none; 
					background-color:transparent; border:0; }
	#headerLinks li { display:inline-block; margin-left:40px; border-bottom:0px; }
	#demoButton { width:75px; margin-right:0px; color:#000; background:rgba(255,255,255,1); }
	#loginButton { margin-top:0px; width:75px; margin-right:0px; color:#2c97ca; background:rgba(255,255,255,1); }

	#introContainer { height:100vh; }	/* 1080 */
	.introStatement { margin-top:160px; margin-left:50px; max-width:900px; }
	.introSubtitle { font-size:3.1rem; }
	.introTitle { font-size:3.5rem; }
	.introDesc { font-size:3rem; margin-top:2.3rem; line-height:4rem; }
	.introArrows { margin-top:50px; }
}