/* colors */
	:root{	
	--nav-color: rgba(10,50,127,1.0);
	--nav-fade: rgba(10,50,127,0.7);
	--nav-hover: rgba(27,117,188,0.5);
	--footer-color: rgba(10,50,127,1.0);
	--footer-hover: rgba(27,117,188,0.5);
	--subnav-color: rgba(27,117,188,1.0);
	--back-color: linear-gradient(-60deg ,#ddd,#eee,#ddd,#eee,#ddd,#eee,#ddd,#eee,#ddd,#eee,#ddd,#eee,#ddd,#eee,#ddd,#eee);
	}
/* Banner */
body {width:100%; text-align: center; background: var(--subnav-color);}
#page-header {
	text-align: center;
	background: #fff;
	margin:0;padding:0;
}
#page-header #logo {
	margin-top: 1em;
	width:50%; height:auto; max-width:300px;
}
#banner { height:22em;
		background-image: url(../images/habits-header.jpg);
		background-size: cover;
		background-position: right;
	}
#page-header h1 {
	font-family: 'helvetica', serif;
	font-size: 1.5em; 
	line-height: 1.2;
	padding: 0 1em 1em 1em ;
	color: var(--subnav-color);
}
h2 {
	font-family: 'helvetica', serif;
	font-weight: 100; color:#fff;
	font-size: .9em; letter-spacing: 1px; text-transform: uppercase;
	line-height: 1.2em;
	padding: 1.2em 1em ;
}
h3 {
	color: var(--subnav-color);
	font-family: 'helvetica', serif;
	font-weight: 100;
	font-size: 1em; letter-spacing: 1px; text-transform: uppercase;
	line-height: 1.2em;
	margin:0;
}
#page-header h2:hover {
	background:var(--nav-hover);
}
/* All Navs */
nav {	
/*	background: rgba(0,0,0,.1);*/
	margin: 0 auto; 
	padding:0px 0px 30px 0px;
}
nav ul {
	max-width:900px;
	margin: 0 auto; 
}
nav ul li {
	display:inline;
}
nav ul li a {
	text-decoration: none;
	display:inline-block;
	color:var(--subnav-color);
}
.ham {
	display:none;
}

/* Main Nav */
#page-header nav {	
	color: #FFF;
	background: var(--nav-color);
	margin:0 auto; 
	padding:0px;
}
#page-header nav ul li a {
	color: #FFF;
	text-decoration: none;
	font-size: 1em;
}
#page-header nav ul li a span {
	padding: 0 1em;
}
#page-header nav ul li a:hover {
	color:var(--subnav-color);
}
/* footer Nav */
#page-footer {
	text-align: center;
	background: #fff;
	margin: 0;padding:0;
}
#page-footer nav {	
	color: #FFF;
	background: var(--footer-color);
	margin-left:auto; margin-right: auto;
	padding:0px;
}
#page-footer nav ul li a {
	color: #FFF;
	text-decoration: none;
	font-size: 1em;
}
#page-footer nav ul li a span {
	padding: 0 1em;
}
#page-footer nav ul li a:hover {
	background:var(--footer-hover);
}
/* abut me style*/
/*#slide-about, #about-top, #about-list, #about-bottom, #slide-about ul, #slide-about li,#slide-about h3,#slide-about p {border: 1px solid red;}*/
#slide-about { 
	width:100%;
	padding: 0; 
	display: none;
	overflow: hidden;
	text-align: center;
	margin: 0 auto; 
	background:var(--back-color);
}
#about-list li{ 
	width:80%;
	padding:0;margin: 0 auto 2em auto; 
	text-align: left;
	display:inline-block;
	vertical-align: middle;
	max-width: 900px;
}
.about-intro, .about-execution{ 
	background: none; border: 2px solid var(--nav-color);
	border-top-right-radius: 2em;
	border-bottom-left-radius: 2em;
	color:var(--nav-color);
}
.about-read{ 
	background-image: url(../images/read_wall.jpg);
	background-size: cover;background-position: right;
}
.about-brush{ 
	background-image: url(../images/smile20.jpg);
	background-size: cover;background-position: center;
}
.about-move{ 
	background-image: url(../images/moving1.jpg);
	background-size: cover;background-position: center;
}
#slide-about h3 {
	color: #fff;
	font-family: 'helvetica', serif;
	font-weight: 100;
	font-size: 1.1em; letter-spacing: 1px; text-transform: uppercase;
	line-height: 1;
	margin:0;
	padding: 2em 2em 1em 2em;
	text-align: left;
	background: var(--nav-color);
	width:11em;
	border-bottom-right-radius: 1em;
}
#about-list img{ 
	display:inline-block;
	width:10em;height:auto; 
	margin: 2em;
 	border-radius: 1em;
}
#about-list p {
	color: #fff;
	font-family: 'helvetica', serif;
	font-weight: 100;
	font-size: 1.1em; letter-spacing: 1px; 
	line-height: 1.3em;
	margin:0;
	padding: 2em ;
	text-align: left;
	display:inline-block;
}
 #intro, #execute{ 
	color: var(--nav-color) !important;
}
#read, #brush, #move {
	background: var(--nav-fade);
	width:100%;	margin:0 auto;
	display:inline-block;

}
#about-point .point {
	border: 20px solid transparent;
	margin: 0 0 0 0; width: 0;
	border-top-color: var(--nav-color);
	display:inline-block;
}

/* icons Nav */
#level2-nav img {
	padding: 0;margin: .5em 1em 0 1em;
	width:200px;height:auto;
    overflow: hidden;
    border-radius: 10%;
	text-align: left;
}

/* Slide Down general*/
#slide-down-1 , #slide-time, #slide-move, #slide-start {
	display: none;
	overflow: hidden;
	text-align: center;
	margin: 0 auto; 
	background:var(--back-color);
}
#slide-down-1 .timer , #slide-time .time, #slide-move .movex, #slide-start .start {
	background:var(--subnav-color);
	}
#slide-time a , #slide-start a {
	margin:.8em 1em ;
}
.drop {
	padding: 20px;
}
.showit {
	display:block;
}
.hideit {
	display:none !important;
}
/* Slide Down Move section*/
#slide-move ul:before{
    content:attr(data-header);
	color:var(--subnav-color);
	font-family: 'helvetica', serif;
	font-weight: 100;
	font-size: .9em; letter-spacing: 0px; text-transform: uppercase;
	line-height: 1em;
	margin:0;
}
#slide-move ul li {
	display:block;
}
#slide-move ul li a {
	display:block;
}
#slide-move img {
	margin: .2em .6em .2em .2em;
	width:40px;height:auto;
}
#move-nav-from {
	display:inline;
	width:50%;float:left;
}
#move-nav-to {
	display:inline;
	width:50%;float:left;
}
.move-box {
	display: block;
	border: 2px solid var(--subnav-color); 
	border-radius:0.5em;
	width:90%; max-width:400px;
	margin: 1em auto;
	padding: .5em;
	color:var(--subnav-color);
	text-align: left;
}
.move-to-box {
	display: block;
	border: 2px solid var(--subnav-color); 
	border-radius:0.5em;
	width:90%; max-width:400px;
	margin: 1em auto;
	padding: .5em;
	background:var(--subnav-color);
	text-align: left;
}
.move-box img, .move-to-box img, .move-box h3, .move-to-box h3 {
	display: inline-block;
	vertical-align:middle;
}
.move-to-box h3 {
	color:#fff;
}

/* Styling */
.go {
	border: 2px solid #fff; 
	border-radius:0.5em;
	width:200px;
	margin: 1em;
	padding:.5em 2em;
	color:#fff;
	text-decoration: none;
}
.button {
	border: 2px solid var(--subnav-color); 
	background: none; 
	border-radius:0.5em;
	width:200px;
	margin:0;
	padding:.8em 1em;
	color: var(--subnav-color);

}
.button-active {
	border: 2px solid var(--subnav-color); 
	background: var(--subnav-color); 
	border-radius:0.5em;
	width:200px;
	margin:0;
	padding:.8em 1em;
	color:#fff;
}
.point {
	border: 20px solid transparent;
	margin: 0 0 0 0; width: 0;
	border-top-color: var(--subnav-color);
	display:inline-block;
}
.point-tight {
	border: 20px solid transparent;
	margin: 0 0 -1em 0; width: 0;
	border-top-color: var(--subnav-color); 
	display:inline-block;
}
.point-left {
	border: 20px solid transparent;
	margin: 0 22% -1em 0; width: 0;
	border-top-color: var(--subnav-color);
	display:inline-block;
}
.point-right {
	border: 20px solid transparent;
	margin: 0 0 -1em 22%; width: 0;
	border-top-color: var(--subnav-color);
	display:inline-block;
}
.ham {
	display:none;
}
.ham img {
	width:1em;height:auto;
		margin:0 ;
}


@media (min-width:1200px){
	#banner {height:25em;}
}
@media only screen and (max-width:600px){
	body {
		font-size:16px;
	}
	h2 {
	font-family: 'helvetica', serif;
	font-weight: 100; color:#fff;
	font-size: .9em; letter-spacing: 0px; text-transform: uppercase;
	line-height: 1.2em;
	padding: 1.2em .7em ;
}
	
	#banner {height:10em;
		background-image: url(../images/habits-header.jpg);
		background-size: cover;
		background-position: right;
	}

	#level2-nav img {
	padding: 0;margin: .5em .5em 0 .5em;
	width:100px;height:auto;
    overflow: hidden;
    border-radius: 10%;
}

	.button {
	border: 2px solid var(--subnav-color); 
	border-radius:0.5em;
	background:none;
	width:150px;
	padding:.6em 1em;
	color:rgba(27,117,188,1.0);
}
	.button-active {
	border: 2px solid var(--subnav-color); 
	background: var(--subnav-color); 
	border-radius:0.5em;
	width:150px;
	margin:0;
	padding:.6em 1em;
	color:#fff;
}
	.move-box {
	display: block;
	border: 2px solid var(--subnav-color);
	border-radius:0.5em;
	width:90%; max-width:400px;
	margin: .8em auto;
	padding: .5em;
	color:var(--subnav-color);
	text-align: left;
}
	.move-to-box {
	display: block;
	border: 2px solid var(--subnav-color); 
	border-radius:0.5em;
	width:90%; max-width:400px;
	margin: .8em auto;
	padding: .5em;
	background:var(--subnav-color);
	text-align: left;
	color:#fff;
}

	#slide-move img {
	margin: .1em .6em .1em .1em;
	width:30px;height:auto;
		
}
}