/**
 * 0.RESET 
 */

@import "reset.css";

html  {
    font-size:62.5%; 
    font-family:Arial,sans-serif;
    color: #1c9a96;
}

body {
    font-size:20px;
    font-size:2rem;
}
.clear{clear:both;}

h1 {
    float: left;
    width: 30%;
    height: 112px;
    position: relative;
}
h1 img {
    max-width: 100%;
    position: absolute;
	bottom: -26px;
    bottom: -2.6rem;
}

#global-nav {
    padding-bottom: 5px;
    border-bottom: 3px solid #1c9a96;
}

.wrapper {
    width: 100%;
    max-width: 62em;
    margin: 0 auto;
}

.wrapper:before,
.wrapper:after {display:table;line-height:0;content:"";}
.wrapper:after {clear:both;}

.nav-section {
    margin-left: 30%;
}
.nav-section:before,
.nav-section:after {display:table;line-height:0;content:"";}
.nav-section:after {clear:both;}

.nav-profile,
.main-navigation-menu {
    float: right;
}
.main-navigation-menu li {
    float: left;
}

.main-navigation-menu:before
.main-navigation-menu:after {display:table;line-height:0;content:"";}
.main-navigation-menu:after {clear:both;}

.nav-profile {
    margin: 5px 0;
    font-size: 16px;
    font-size: 1.6rem;
}
.nav-profile:before,
.nav-profile:after {display:table;line-height:0;content:"";}
.nav-profile:after {clear:both;}

.nav-profile li {
    border-right: 1px solid #1c9a96;
    display: inline-block;
	padding: 0 5px;
    padding: 0 0.5rem;
}
.nav-profile li a {
    color: #1c9a96;
    text-decoration: none;
}

.nav-profile li:last-child {
    border-right: none;
}

.main-navigation-menu li {
    width: 18%;
	min-height:63px;
    min-height: 6.3rem;
    background-color: #ebecee;
    margin-left: 1%;
}
.main-navigation-menu li:first-child {
    margin-right: 2%;
}


.main-navigation-menu span {
    display: block;

}

.main-navigation-menu .item-title {
	padding:2% 0 1% 2%;
        text-transform: uppercase;
	font-size:20px;
	font-size:2.0rem;
}

.main-navigation-menu .item-title img {
	padding-right:2%;
}

.main-navigation-menu .item-slogan {
    font-size: 15px;
    font-size: 1.5rem;
    padding:2% 2% 2% 3%;
}
.main-navigation-menu a {
    text-decoration: none;
	color:#fff;
}



.main-navigation-menu .portal-homepage{background-color:#0b708e;}
.main-navigation-menu .shine-homepage{background-color:#f99428;}
.main-navigation-menu .flourish-homepage{background-color:#1c9a96;}
.main-navigation-menu .connect-homepage{background-color:#6e6f73;}
.main-navigation-menu .discover-homepage{background-color:#b63e5a;}


.on-living {
    padding-left: 22%;
    margin: 20px 0 5px;
    font-size: 14px;
    font-size: 1.4rem;
}
.header:before,
.header:after {display:table;line-height:0;content:"";}
.header:after {clear:both;}


.lte-ie7 .header,
.lte-ie7 .nav-profile {
	zoom:1;
}


#select-nav{display:none;}



/*** IE8 and below tweaks */

.lte-ie8 #global-nav {
    min-width: 992px;
}

.lte-ie8 .nav-profile {
	width:130px;
}

.lte-ie8 .main-navigation-menu li {
	margin-left:1%;
	width:18.2%;
}

.lte-ie8 .main-navigation-menu li:first-child {
	margin-right:1%;
}

/** Fake inline-block for ie7 */

.lte-ie7 .nav-profile li {
	zoom:1;
	display:inline;
}





/**
 * Responsive elements
 */
/* Hide navigation icons at the point when they break on to a new a line */
@media all and (max-width: 60em){
    .main-navigation-menu img{display:none;}
}
@media all and (max-width: 40em){
    .on-living{display:none;}
    .main-navigation-menu {display: none;}
    #select-nav{
        display:block;
        position: absolute;
        right: 5rem;
        top: 5rem;
    }
    h1 {
        width: 30rem;
    }
    .nav-section {
        margin-left: 30rem;
    }
}
@media all and (max-width: 27em){
    h1 {
        float: none;
        width: 100%;
    }
    .nav-section {
        margin-left: 0;
    }
    #select-nav{
        position: absolute;
        top: 0.5rem;
        right: 1rem;
    }
    .nav-profile {
        position: absolute;
        top: 0.5rem;
        left: 1rem;
    }
}







/**
 * Navigataur code
 */
 /*
body {-webkit-animation: bugfix infinite 1s;
@-webkit-keyframes bugfix { 
	from {padding:0;}
	to {padding:0;}	
}
.header{ position:relative; }
#toggle, .toggle,
#toggletwo, .toggletwo { display: none; }
@media only screen and (max-width: 40em) {
	.main-navigation-menu { 	
		display: none; 
		opacity: 0; 
		position:absolute;
		border: 1px solid black;
	}	
	.main-navigation-menu li { 
		float:none;
		min-height: 0;
		width: 12rem;
		border: none;
		text-align: left;
		margin: 0;
	}
	.main-navigation-menu li:first-child { 
	    margin-right: 0;
	}
	.main-navigation-menu span {
		padding: 0.5rem;
		display: block;
	    color: #0b708e;
		background-color: #ebecee !important;
	    padding: 0.5rem 1rem;
    }
	.main-navigation-menu li:hover span { 
	    background-color: white;
	    font-weight: bold;
	}
	.main-navigation-menu p {display:none;}
	.header {
	    float: right;
        background-color: #0b708e;
        color: white;
        width: 12rem;
        margin: 2rem 5rem;
    }
    .header label {
        padding: 0.5rem;
    }
	.toggle,
	.toggletwo { 
		z-index: 2;
		display: block; 
		position: relative; 
		cursor: pointer; 
		-webkit-touch-callout: none; 
		-webkit-user-select: none; 
		user-select: none; 
	}
	#toggle:checked ~ .main-navigation-menu,
	#toggletwo:checked ~ .main-navigation-menu { 
		display: block; 
		opacity: 1;
	}
	.toggle:after,
	.toggletwo:after {	content: "\25b6  MENU"; }
	#toggle:checked + .toggle:after,
	#toggletwo:checked + .toggletwo:after { content: "\25bc  MENU"; }
	.toggle,
	.toggletwo { z-index: 2; } 
}
.clearfix:before, .clearfix:after { display: table; content: ""; }
.clearfix:after { clear: both; }
.lte-ie7 .clearfix { zoom:1; }
*/