@font-face {
		    font-family: 'metropolisthin';
		    src: url('metropolis-thin-webfont.woff2') format('woff2'),
		         url('metropolis-thin-webfont.woff') format('woff');
		    font-weight: normal;
		    font-style: normal;

		}




		@font-face {
		    font-family: 'metropolisthin_italic';
		    src: url('metropolis-thinitalic-webfont.woff2') format('woff2'),
		         url('metropolis-thinitalic-webfont.woff') format('woff');
		    font-weight: normal;
		    font-style: normal;

		}
 		
 		
 		@font-face {
	    font-family: 'metropolislight';
	    src: url('metropolis-light-webfont.woff2') format('woff2'),
	         url('metropolis-light-webfont.woff') format('woff');
	    font-weight: normal;
	    font-style: normal;
		}


		@font-face {
		    font-family: 'metropolislight_italic';
		    src: url('metropolis-lightitalic-webfont.woff2') format('woff2'),
		         url('metropolis-lightitalic-webfont.woff') format('woff');
		    font-weight: normal;
		    font-style: normal;

		}


		@font-face {
		    font-family: 'metropolismedium';
		    src: url('metropolis-medium-webfont.woff2') format('woff2'),
		         url('metropolis-medium-webfont.woff') format('woff');
		    font-weight: normal;
		    font-style: normal;

		}


		@font-face {
		    font-family: 'metropolismedium_italic';
		    src: url('metropolis-mediumitalic-webfont.woff2') format('woff2'),
		         url('metropolis-mediumitalic-webfont.woff') format('woff');
		    font-weight: normal;
		    font-style: normal;

		}


		@font-face {
		    font-family: 'metropolisregular';
		    src: url('metropolis-regular-webfont.woff2') format('woff2'),
		         url('metropolis-regular-webfont.woff') format('woff');
		    font-weight: normal;
		    font-style: normal;

		}


		@font-face {
		    font-family: 'metropolisitalic';
		    src: url('metropolis-regularitalic-webfont.woff2') format('woff2'),
		         url('metropolis-regularitalic-webfont.woff') format('woff');
		    font-weight: normal;
		    font-style: normal;

		}


		@font-face {
		    font-family: 'metropolissemi_bold';
		    src: url('metropolis-semibold-webfont.woff2') format('woff2'),
		         url('metropolis-semibold-webfont.woff') format('woff');
		    font-weight: normal;
		    font-style: normal;

		}




		@font-face {
		    font-family: 'metropolissemi_bold_italic';
		    src: url('metropolis-semibolditalic-webfont.woff2') format('woff2'),
		         url('metropolis-semibolditalic-webfont.woff') format('woff');
		    font-weight: normal;
		    font-style: normal;
		}
		
		@font-face {
		    font-family: 'metropolisbold';
		    src: url('metropolis-bold-webfont.woff2') format('woff2'),
		         url('metropolis-bold-webfont.woff') format('woff');
		    font-weight: normal;
		    font-style: normal;

		}
		
		
			@font-face {
			    font-family: 'metropolisextra_bold';
			    src: url('metropolis-extrabold-webfont.woff2') format('woff2'),
			         url('metropolis-extrabold-webfont.woff') format('woff');
			    font-weight: normal;
			    font-style: normal;

			}


		@font-face {
		    font-family: 'metropolisblack';
		    src: url('metropolis-black-webfont.woff2') format('woff2'),
		         url('metropolis-black-webfont.woff') format('woff');
		    font-weight: normal;
		    font-style: normal;
		}
		
			
		html, body {
        width: 100%; 
        min-height:100%;
        padding:0; 
        margin:0; 
    }
		
		
		body {
			font:1em/1.5em metropolisthin;
			background:#dfdfdf none;
			min-width:320px;
			min-height:100%;
		}
		
		body.main {
			background:#ffffff none;
		}
		
		body.main p {
			line-height: 1.3em;
			font-size: 0.95em;
		}
		
		
		i, em {
			font-style:normal;
			font-family:metropolisthin_italic;
		}
		
		b, strong {
			font-weight:normal;
			font-family:metropolismedium;
		}
		
		b i, b em, strong i, strong em {
			font-weight:normal;
			font-style:normal;
			font-family:metropolismedium_italic
		}
		
	
		
		a {
			color:#000000;
		}
		
		h1, h2, h3, h4, h5 {
			font-weight:normal;
			font-family:metropolisblack;
			/*color:rgb(182,166,120);*/
			text-transform:uppercase;
			color:rgb(112,111,111);
			line-height:1.25em;
		}
		
		h2 {
			font-size:2.1em;
		}
		
		.white {
			color:#ffffff !important;
		}
		
		.gold {
			color:#d2d4ad !Important;
		}
		
		.cent {
			text-align:center;
		}
		
		.right {
			text-align:right;
		}
		
		ul, ol {
			margin:1.5em 0;
			padding:0 0 0 1.1em;
		}
		
		ul li, ol li {
			margin:0.6em 0;
		}
		
		h1 {
			font-family:metropolisblack;
			font-size:2.55em;
			margin:0 0 0.7em;
			line-height:1.15em;
			padding-top:0.1em;
			hyphens: auto;
		}
		
		h1.small {
			font-size:2.4em;
		}
		
		h1.smaller {
			font-size:2.2em;
		}
		
		
		.infotxt {
			font-size:0.85em;
			line-height:1.3em;
		}
		
		
		
		div.imgholder {
			overflow:auto; 
			text-align:center
		}
		
		div.imgholder img {
			max-width:100%; 
			min-width:700px; 
			width:auto;
		}
		
		h3 {
			font-size: 1.4em;
			line-height: 1.3em;
			letter-spacing: 0.2pt;
			margin:0.6em 0;
		}
		
		div.ingress {
			width:62%;
			font-size:1.3em;
			line-height:1.3em;
			margin:3vh auto;
		}
		

		div#container {
			width:100%;
			max-width:1250px;
			min-height:95vh;
			margin:10px auto;
			overflow:hidden;
			position:relative;
			background:rgb(255,255,255);
		}
		
		div.fifty {
			width:48%;
			float:left;
			overflow:hidden;
			position:relative;
		}
		
		div.fifty:nth-of-type(even) {
			margin-left:4%;
		}
		
		div.forty {
			width:40%;
			min-width:280px;
		}
		
		div.thirty_five {
			width: 35%;
			float: left;
		}
		
		div.seventy_thirty {
			width:60%;
			float:left;
			margin-left:3%;
		}
		
		div.thirty_seventy {
			width:27%;
			float:right;
			margin-right:3%;
		}
		
		div.sixty_forty {
			width:53%;
			float:left;
			margin-left:3%;
		}
		
		div.forty_sixty {
			width:35%;
			float:right;
			margin-right:3%;
		}
		
		div.forty_sixtyb {
			width:38%;
			float:left;
			overflow:hidden;
			position:relative;
		}
		
		div.sixty_fortyb {
			width:58%;
			float:right;
			overflow:hidden;
			position:relative;
		}
		
		div.twentyfive_75 {
			float:left;
			width:25%;
		}
		
		div.seventyfive_25 {
			float:left;
			width:70%;
			margin-left:4%;
		}
		
		div.timeline_container {
			width:90%;
			margin-left:15px;
			padding:0 0 8px 15px;
		}
		
		div.timeline_container h4 {
			color:#d2d4ad;
			margin:2em 0 0 -2px;
		}
		
		div.lft {
			float:left;
		}
		
		div.rgt {
			float:right;
		}
		
		img.rgt {
			margin:8px 0 0 10px;
			float:right;
		}
		
		.clearfix {
		    content: "";
	    clear: both;
	    display: table;
		}
		
		.arrow-down {
		  width: 0; 
		  height: 0; 
		  border-left: 16px solid transparent;
		  border-right: 16px solid transparent;
		  border-top: 16px solid #d2d4ad;
		}
		
		div.khaki {
			background:rgb(188,190,133) none !important;
			color:rgb(255,255,255) !important;
		}
		
		div.khaki h1, div.khaki  h2, div.khaki  h3, div.khaki  h4 {
			color:#ffffff;
		}

		div#content {
			position:relative;
			width:86%;
			margin:11% auto 2%;
			overflow:hidden;
			font-size:1.1em;
			min-height:450px;
		}
		
		div#content.high {
			margin-top:6%;
		}
		
		div#content img {
			max-width:100%;
		}
		
		.transp {
			opacity:0;
		}
		
		div#navFooter {
			position:relative;
			width:86%;
			margin:1vh auto 0;
			border-bottom:5px solid rgba(188,190,133,0.6); 
			overflow:hidden;
		}
		
		div#nav{
			position:relative;
			width:62%;
			margin:-16px auto 3vh;
			overflow:hidden;
		}
		
		div.bubble {
			width:28px; 
			height:28px; 
			background: #cccccc none; 
			float:left; 
			border-radius:50%;
			margin:0 7px 3px;
			text-align:center;
			font:1em/1.8em metropolisblack;
			color:#ffffff;
		}
		
		div.bubble.done {
			background:#034d3c none;
		}
		
		div.bubble.current {
			background:#034d3c none;
			color:yellow;
		}
		
		
		img#vima {
			outline: none;
		}
		
		div.khaki div#navFooter {
			border-bottom:5px solid rgba(255,255,255,0.4); 
		}
		
	.pop, .tip, .tip2 {
		cursor:pointer;
	}
		
	.qtip {
		font-size: 0.9em;
		font-family:metropolislight;
		line-height: 135%;
		max-width:80vw;
		width:700px;
		border-radius:6px;
		max-height: 90vh;
		overflow: hidden;
		overflow-y: auto;
	}
	
	.qtip-content img {
		max-width:100%;
	}
	
	.qtip-close {
		right:-3px;
		top:-3px;
		width: 30px;
		height: 30px;
	}
	
	.ui-icon-close {
		margin:7px 5px;
		font-size:16px !important;
		line-height:16px !important;
	}
		
		
	div.mob_break {
		position:absolute;
		left:0;
		top:0; 
	}
	
	div.dialayer {
		padding-right: 10px;
		display:none;
	}
	
	
	

	
	a.nxt {
		color:#000000;
		text-decoration:none;
		font:3em metropolisblack;
	}
	
	div#goals {
		width:100%;
		max-width:375px;
		clear:both;
		margin-top:1.5em;
	}
	
	div#global_goals {
		width:100%;
		margin-top:1.5em;
	}
	
	img.goal {
		max-width:100%;
		float:left;
		margin:0 4% 4% 0;
	}
	
	img.goal.focus {
		outline:2px solid blue;
	}
	
	
	div#global_goals img.goal {
		margin:0 2% 2% 0;
	}
	
	area {
    background:#fff;
    display:block;
    height:475px;
    opacity:0;
    position:absolute;
    width:320px;
    z-index:121212;
}


div#menu {
	position:relative;
	width:31.6%;
	float:left;
	height:auto;
}

div#menu a {
	color:#ffffff;
	text-decoration:none;
	font-family:metropolissemi_bold;
}



div#men2 {
	margin:3em 0;
	opacity:0.6;
}

div#men2:hover {
	opacity:1;
}

div.menupadding {
	padding: 7% 8%;
	width: 84%;	
}

div#logoarea {
	transition: all 0.5s ease;
	width:100%;
	height:auto;
	background:#ffffff none;
}

div#maincontent {
	width:52.4%;
	float:left;
	margin-left:10%;
	color:rgb(109,111,113);
}

div#payoff {
	font-family: metropolismedium;
	letter-spacing: 0.2em;
	margin-top:1em;
	color:#919738 !important;
}

p.ingress {
	font-style:italic;
	font-size:1.25em !important
}

div#footer {
	float:left;
	margin-top:16px;
	border-top: 11px #8a9180 solid;
	width: 92%;
	padding:4% 4% 4% 0;
	clear: both;
}


div#mobilemenu {
    position: absolute;
    right: 9px;
		top: 11px;
    font-size: 1.4em;
    line-height: 0;
    padding-bottom: 15px;
    display: none;
    cursor: pointer;
}

div#lessonmenu {
	cursor: pointer;
}

div#lessonnav {
	display:none;
	background:rgba(188,190,133, 0.9) none;
}

div#lessonnav.on {
	display: block;
	position: absolute;
	top: 100%;
	right: 0;
	width: 235px;
	box-shadow: -6px 6px 6px rgba(150,150,150,0.9);
	padding: 10px 5px 20px 15px;
	border-radius: 0 0 0 10px;
	border-right: 1px dotted #ccc;
}

div#lessonnav a {
	display: block;
	text-align: right;
	padding: 0.2em 0;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	font-family:metropolismedium;
}

div#lessonmenu {
	position:absolute; 
	top:3%; 
	right:3%;
	z-index:12;
}

div#menunav a {
	text-transform:uppercase;
}

div#menunav a.extra {
    text-transform: unset;
    padding-left: 3%;
}

table.tbl {
	width:100%;
	color:rgb(109,111,113);
	border:1px dotted #ccc;
}



table.tbl.tiny td {
	font-size:0.9em;
	padding:2px;
}

table.tbl th {
	text-align:left;
	font-size:0.9em;
	padding:2px 4px;
	border-bottom:1px solid #ccc;
}


table.tbl tr.odd td {
	background-color:rgba(188,190,133, 0.3);
}

table.tbl tr.next td {
	border-top:1px dotted #ddd;
}

table.tbl tr.next td:first-of-type {
	border:0;
}

table.tbl td {
	vertical-align:top;
	padding:3px 4px;
}

table.tbl tr.head td {
	border-bottom:1px solid #999999;
}

table.tbl input[type=text], table.tbl input[type=password] {
		width:180px;
		border-radius: 9px;
		padding: 0.2em 0.3em;
		font:0.95em/1.3em metropolisregular;
}

table.tbl textarea {
	width:100%;
	max-width:450px;
	height:300px;
	border-radius: 9px;
	padding: 0.2em 0.3em;
	font:0.95em/1.3em metropolisregular;
}

table.tbl.static input[type=text] {
	border:0;
}

table.tbl.static input[type=button], table.tbl tr.pass {
	display:none;
}

a.button.sup {

    border: 1px solid #cccccc;
    display: inline-block;
    float: right;
    font-size: 0.8em;
    line-height: 1em;
    margin: -23px 30px 2px 0;
    overflow: auto;
    padding: 2px 4px;
    text-decoration: none;

}

div#mess {
	font-family: metropolismedium;
	font-size: 0.8em;
	font-weight:bold;
}

div#mess.ok {
	color:green;
}

div#mess.nope {
	color:red;
}

button.btn {
	border-radius:9px;
	height:25px;
}

button.btn.edit {
	background:url(/img/edit.png) no-repeat right top;
	padding-right:26px;
}

button.btn.adduser {
	background:url(/img/adduser.png) no-repeat right top;
	padding-right:26px;
}

button.btn.dl {
	background:url(/img/icon_download.png) no-repeat right top;
	padding-right:26px;
	background-size: 18px 18px;
}

button.btn.save {
	background:url(/img/save.png) no-repeat right top;
	padding-right:32px;
}

button.btn.hyper {
	background:url(/img/link.png) no-repeat 96% top;
	padding-right:32px;
}

hr {
	border:0;
	border-bottom:1px solid rgb(109,111,113);
}


.put{
      border-radius: 10px;
      background-color:white;
      width:100%;
      max-width:600px;
      height:auto;
      padding:5px;
     -webkit-box-shadow: 0px 0px 39px 12px rgba(0,0,0,0.75);
			-moz-box-shadow: 0px 0px 39px 12px rgba(0,0,0,0.75);
			box-shadow: 0px 0px 39px 12px rgba(0,0,0,0.75);
		}
		
		.myclose {
			position: absolute;
			background: #F1F1F1;
			color: #777;
			right: -11px;
			top: -11px;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			cursor: pointer;
			padding: 3px;
			text-align: center;
		}
		
		.myicon {
			display: block;
			width: 18px;
			height: 14px;
			line-height: 14px;
			text-align: center;
			text-indent: 0;
			font: normal 700 19px/16px Tahoma,sans-serif;
			text-align: center;
			color: inherit;
			background: -100em -100em no-repeat;
		}
		
		span.result {
			background-color:#fafcc7;
		}
		
		img#usrlogo {
			display:block;
			max-width:180px;
		}
		
		input:disabled {
			background-color:#ffffff !important;
		}