@charset "UTF-8";

body, input, select, textarea {
	font-family: 'Rubik', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* html, body {margin: 0; height: 100%; overflow: hidden;} */

html,body,body>div {
	height: 100%;
}


@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}

.noselect {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}


ul.reset,
ul.reset li,
ul.reset ul li {
	margin:0;
	padding: 0;
	text-indent: 0;
	list-style-type: none;
}

/* add zero-width space to return the list semantics for VoiceOver users */
ul.reset ul li::before {
	content: "\200B";
}


h1:focus-visible {
	outline: none;
}

a,a:visited {
	/* EgyptianBlue  */
	color: #003595;
}


/*
Animations
*/

.icon-spin {
  -webkit-animation: icon-spin 2s infinite linear;
  animation: icon-spin 2s infinite linear;
}
.icon-pulse {
  -webkit-animation: icon-spin 1s infinite steps(8);
  animation: icon-spin 1s infinite steps(8);
}
@-webkit-keyframes icon-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-359deg);
    transform: rotate(-359deg);
  }
}
@keyframes icon-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-359deg);
    transform: rotate(-359deg);
  }
}
.icon-spin-clockwise {
  -webkit-animation: icon-spin 2s infinite linear;
  animation: icon-spin-clockwise 2s infinite linear;
}
.icon-pulse-clockwise {
  -webkit-animation: icon-spin-clockwise 1s infinite steps(8);
  animation: icon-spin-clockwise 1s infinite steps(8);
}
@-webkit-keyframes icon-spin-clockwise {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes icon-spin-clockwise {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}







.center-column {
  transition:left .25s ease-in-out;
	background: #f4f4f4;
	position: absolute;
	left: 220px;
	right: 220px; /* HIDE ADS */
  top:0;
	height: 100%;
	overflow: hidden;
}
.center-column.no-right {
	right:0px;
}


@media (min-width: 900px) and (max-width: 1200px) {
	.center-column {
		right:0px;
	}
}

@media (min-width: 0px) and (max-width: 900px) {
	.center-column {
		left:0px;
		right:0px;
	}
	.nav.hide {
    left:-250px;
	}
	#LatentBackdrop {
	  position: absolute;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  visibility: visible;
	  background-color: rgba(0,0,0,.25);
	  z-index: 1500;
	}
	#LatentBackdrop.hide {
    visibility: hidden;
	}
}


.post-header {
	background: #D8D8D8;
	position: fixed;
	left: 0;
	top:0;
	height: 76px;
	width:100%;
	box-sizing: border-box;
	padding: 12px;
}
.post-page-title {
	text-align: center;
}
.post-page-back {
	position: absolute;
	top:0;
	left:0;
	z-index: 1;
}
.post-header .header-right {
	position: absolute;
	top:10px;
	right: 10px;
}
.post-page-title > span {
	height:40px;
	display:inline-block;
}
.post-page-title img{
	padding:5px;
	height:30px;
	vertical-align: middle;
}
.post-page-title .name{
	vertical-align: middle;
	padding-left: 5px;
	font-size: 25px;
	font-weight: bold;
}
.back {
	padding: 10px; 
}
.post-page-back .back {
	padding: 17px; 
}
.logo {
	height:40px;
	display:inline-block;
}
.logo img{
	height:30px;
	vertical-align: middle;
}
.logo .name{
	font-size:25px;
	vertical-align: middle;
	padding-left: 5px;
}
.content {
	display: block;
	position:absolute;
	height:auto;
	width:100%;
	top: 0;
	bottom:0;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}
.post-page .content {
	margin-top:64px;	
	border-style: solid;
	border-width: 3px;
	border-color: #D8D8D8;
	background: white;
	box-sizing:border-box;
}

.content > .content-body {
	padding: 4px 40px 20px 40px;
}

@media (min-width: 0px) and (max-width: 900px) {
	.content > .content-body {
		padding: 8px;
	}
}


.content > .content-body.no-padding {
	padding: 0px;
}
.home .content > .content-body, .Library .content > div {
	max-width: 700px;
	/* min-width: 600px; */
	margin: 0 auto;
}
.content .back {
	position: absolute;
}
.content-title {
	font-size: 14px;
	color: #808080;
	padding-top: 20px;
	padding-bottom: 3px;
	text-transform: uppercase;
	font-weight: 300;
	font-family: Roboto;
	letter-spacing: 1.25px;
}
.content-solution-title{
	text-align: center;
	font-size: 20px;
}
.header-right {
	float:right;
}
.header-row span{
	vertical-align: middle;
}
.header-link {
	padding-left:10px;
}
.badge{
	vertical-align: top;
	line-height:20px;
	height:20px;
	display:inline-block;
	width:20px;
	border-radius:10px;
	font-size:12px;
	color:white;
	text-align:center;
	background:#D0021B;
}
#solutions{
	overflow-x:hidden;
	white-space: nowrap;
}
.completed .solution-circle{
	border-color:black;
}
.green .solution-num{
	color:#89D422;
}
.green .solution-circle{
	border-color:#89D422;
}
.available .solution-circle{
	border-color:#D8D8D8;
	background: white;
}
.active .solution-circle{
	border-color:#D8D8D8;
	background: red;
}
.available .solution-num{
	color:#B0B0B0;
}
.empty .solution-circle{
	border-color:#D8D8D8;
	background: repeating-linear-gradient(
	  45deg,
	  #D8D8D8,
	  #D8D8D8 2px,
	  #E6E6E6 2px,
	  #E6E6E6 6px
	);
}
.in-progress .solution-circle{
	border-color:#9B9B9B;
}
.in-progress .solution-num{
	color:#B4B4B4
}
.solution-circle{
	line-height:40px;
	height:40px;
	display:inline-block;
	width:40px;
	border-radius:22px;  
	border:2px;
	border-style:solid;
	font-size:12px;
	text-align:center;
}
.solution-num{
	font-size: 12px;
	text-align: center;
	width:40px;
}
.post .solution-circle{
	display:block;
}
.solution-circle img{
	max-height: 30px;
	max-width: 30px;
	padding: 4px;
}
.solution-circle path{
	fill:#FFFFFF;
}
.solution-circle .coffee, .solution-circle .coffee-black{
	width: 25px;
	padding: 8px;
}
.solution-title{
    font-weight: bold;
}
.solution-icon{
	width:40px;
	display: inline-block;
	padding-right:10px;
}
.solution-horizontal span{
	vertical-align: middle;
	font-size: 30px;
}
.solution-horizontal .solution-num{
	vertical-align: middle;
	font-size: 15px;
	font-weight: bold;
	padding:10px;
}

.post-solution{
	width:40px;
	display: table-cell;
	padding-right:5px;
}

.post.no-body .title{
	margin-top:10px;
}

.post-img img{
    padding: 0 10px 0 10px;
    max-width: 50px;
    max-height: 50px;
    vertical-align: center;
}

.post-img{
	width:60px;
}

.button{
	border-radius: 5px;
	border-style: solid;
	border-width:1px;
	text-align: center;
	padding:5px;
	margin-top:5px;
}
.button.blue{
	color:#4F93E3;
	border-color: #4F93E3;
}
.btn-submit{
	text-align: center;
	padding:5px;
	background: #4A90E2;
	color: white;
}

.flip {
    transform: scaleX(-1);
}
.placeholder{
	margin-top:10px;
	width:100%;
	height:500px;
	background: #BFBFBF;
}
.hrule {
	width: 100%;
	height: 1px;
	background-color: #918980;
	margin: 19px 0;
}
.hidden {
	display: none;
}
.header .search input{
	border-style: solid;
	border-width: 1px;
	border-color: white;
	padding: 5px 120px 5px 5px;
	position: relative;
	left: 30px;
	background-color: #F2A200;
	color: white;
	height: 28px;
	box-sizing:border-box;
	font-family: arial;
	font-size: 13px;
	font-weight: 100;
	opacity: .5;
	outline: none;
}
.header .search input::-webkit-input-placeholder {
   color: white;
}
.header .search input:-moz-placeholder { /* Firefox 18- */
   color: white;
}
.header .search input::-moz-placeholder {   /* Firefox 19+ */
   color: white;
}
.header .search input:-ms-input-placeholder {  
   color: white;
}
.header .search i {
	position: relative;
	left: 20px;
	top: 6px;
	opacity: .5;
	font-size: 20px;
}
.header .search input:focus {
	background-color: white;
	color: #9B9B9B;
	opacity: 1;
	background-color: #F5F1E6;
	font-weight:400;
}
.header .search input:focus ~ i {
	color: #9B9B9B;
	opacity: 1;
}
.header .search input:focus::-webkit-input-placeholder {
   color: #BBBBBB;
}
.header .search input:focus:-moz-placeholder { /* Firefox 18- */
   color: #BBBBBB;
}
.header .search input:focus::-moz-placeholder {  /* Firefox 19+ */
   color: #BBBBBB;
}
.header .search input:focus:-ms-input-placeholder {  
   color: #BBBBBB;
}

.dot {
	position: absolute;
	left: -20px;
	top: 10px;
	border-radius: 5px;
	width: 10px;
	height: 10px;
	background: #F2A60F;
}

@media (min-width: 0px) and (max-width: 900px) {
	.dot {
		left: 4px;
		top: 4px;
	}
}

/* for popup posts */
h4 {
	margin-bottom: 0px;
}


section#overlay div.mask {
	position:absolute;
	top:0;
	left:0;
	background-color: rgba(0,0,0,0);
	transition:background-color .25s ease-in-out;
	z-index:100000;
}
section#overlay div.mask.show {
	background-color: rgba(0,0,0,1);
}

section#overlay.show div.mask {
	top:0;
	left:0;
	right:0;
	bottom:0;
}

section#overlay div.mask div.message {
	display:none;
}

section#overlay.show div.mask div.message.show {
	display:block;
	margin:auto;
  color: rgba(242, 166, 15, 1);
  font-size: 100px;
  text-align: center;
  margin-top: 10%;
  font-family: Roboto;
  background-color: white;
  padding: 20px 0 40px 0;
}

button.demo {
	border: 1px solid rgba(0,0,0,.15);
	border-radius:4px;
	background-color:transparent;
	color:rgba(0,0,0,.15);
	margin-right:20px;
	outline:none;
}


.graphLabel {
	font-family:times;
	font-size:10px;
}


a.btn {
	text-align: center;
	padding:.25em .5em;
	border-radius: .25em;
	font-size: 16px;
	cursor: pointer;
}
a.btn.btn-big {
	font-size: 24px;
}
a.btn.btn-orange {
	color:white;
	background-color: #F2A60F;
}
a.btn-right {
	float:right;
}


div.solutionRegistration div.action{
	text-align: center;
}

div.solutionHeader {
	position:relative;
	background-color: white;
  box-shadow: 1px 1px 2px rgba(0,0,0, .25);
  margin-top: 20px;
  padding: 10px;
}
div.solutionHeader h1 {
	padding:0;
	margin:0;
	font-size:24px;
	margin-left:40px;
}
div.solutionHeader a {
	margin-top: 2px;
}
div.solutionHeader h1 i::before {
	font-size:30px;
	position: absolute;
  color: #F2A60F;
  top: 10px;
  left: 10px;
}


div.notification {
	position:relative;
	overflow:hidden;
	max-height:0px;
	transition:max-height .25s;
}
div.notification table {
	max-height:0px;
	overflow:hidden;
	top:-50px;
	transition: top .25s;
	background-color: white;
	padding-top:10px;
}
div.notification td.icon {
	position:relative;
	width:45px;	
}


div.notification td.icon div.icon-circ {
	position:absolute;
	top:0px;
	left:10px;
}
div.notification td.x {
	position:relative;
}
div.notification td.x a {
	position:absolute;
	top:5px;
	right:10px;
} 
div.notification a.go_button {
	margin:0px 0px 17px 0px;
	color:white;
	font-size:14px;
	line-height:30px;
	height:30px;
}



div.accountPanel {
	position: absolute;
  top: 31px;
  background-color: white;
  right: 230px;
  width: 300px;
  padding: 10px;
  z-index: 100000;
  box-shadow: 1px 1px 2px rgba(0,0,0, .25);
}
div.accountPanel .logout {
  display: inline-block;
  margin-top: 10px;
  color: #F2A200;
  cursor: pointer;
}
div.accountPanel .logout a i,
div.accountPanel .logout a span {
	font-size:16px; 
}

@media (min-width: 0px) and (max-width: 1200px) {
	div.accountPanel {
  	right: 10px;		
	}
}

.pointsTableWrapper .bigCenteredLogo {
	width:300px;
	margin:auto;	
}
.pointsTableWrapper	.bigCenteredLogo img {
	width:100%;
}
table.pointsTable {
	border-spacing: 0; 
	font-size: 16px;
	font-family: 'Open Sans';
	width:100%;
}
table.pointsTable tr:nth-child(even) { background: #f2f2f2; }
table.pointsTable tr:nth-child(odd) { background: #fff; }
table.pointsTable th {
	text-transform: uppercase;
	padding:10px 20px;
}
table.pointsTable th {  
	text-align:left;
}
table.pointsTable td {
	padding:10px 20px;
}
table.pointsTable th:nth-child(1), 
table.pointsTable td:nth-child(1) {
	padding-left:10px;
}
table.pointsTable td:nth-child(2) {
	text-align:center;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
}




/*
	Used on the Registration page
*/
div.background-atf-image {
	position: absolute;
	z-index: -1;   
	background-image: url('/res_sys/Apple_Header.jpg');
	background-size: cover;
	/*opacity: 0.15;*/
	top: 0;
	left: 0;
	right: 0;
	/*height: 1200px;*/
	height: 800px;
	background-position: bottom;
}



/*
############################################################################################################

:'#######::'##::::'##:'####:'########:
'##.... ##: ##:::: ##:. ##::..... ##::
 ##:::: ##: ##:::: ##:: ##:::::: ##:::
 ##:::: ##: ##:::: ##:: ##::::: ##::::
 ##:'## ##: ##:::: ##:: ##:::: ##:::::
 ##:.. ##:: ##:::: ##:: ##::: ##::::::
: ##### ##:. #######::'####: ########:
:.....:..:::.......:::....::........::
                                      
############################################################################################################
*/

.quiz {
	white-space: nowrap;
	overflow: hidden;
	width:100%;
	height:100%;
	position: relative;
	box-sizing:border-box;
	padding: 0 10%;
}
.quiz > div {
	position: absolute;
	top:15px;
	-webkit-transition: left 1s; 
    transition: left 1s;
}
.quiz .pane {
	position: absolute;
	top: 50px;
	padding: 50px 100px;
	box-sizing: border-box;
	background: white;
	width: 80%;
	height: 500px;
	white-space: normal;
    box-shadow: 0px 2px 5px #888888;
    color: #4A4A56;
}
.quiz .pane p{
	margin: 35px 0;
}
.quiz .pane table, .quiz .pane tr{
	height:100%;
	width: 100%;
}
.quiz .pane td{
	vertical-align: top;
}


.pane .fill{
	width: auto;
	height: auto;
	max-height: 100%;
	max-width: 100%;
	margin: 0 auto;
	text-align: center;
}

.quiz h2 {
	margin-top: 0;
	margin-bottom: 10px;
}
.quiz .wrong-answer{
	background: #E0243C;
	color: white;
	position: absolute;
	width: 100%;
	height:70px;
	top: 0;
	left: 0;
	padding:25px;
	text-align: center; 
	box-sizing: border-box;
	font-size: 110%;
	opacity: .7;
	font-weight: bold;
}
.quiz .button-green {
	margin-top: 10px;
	background: #7ED321;
	color: white;
	padding: 10px 30px;
	text-align: center;
	font-size: 125%;
	font-weight: bolder;
	border-radius: 5px;
	width: 80px;
}
.quiz .button-next {
	padding: 10px;
	margin: 0 auto;
	margin-top: 20px;
	width: 160px;
}
.quiz .try-again {
	color: #4A90E2;
	text-decoration: underline;
}
.quiz .bottom {
	position: absolute;
	bottom: 30px;
}

.center {
	text-align: center;
}

.quiz .circle {
	width:20px;
	height:20px;
	background:white;
	border-radius:13px;
	border-width:3px;
	border-style:solid;
	border-color:#4A90E2;
	margin: 5px;
}


.quiz .circle.selected{
	background:#4A90E2;
}
.quiz .option{
	padding: 10px 0;
}
.quiz .option > div{
	display: table-cell;
}
.quiz .option .text {
	vertical-align: middle;
}
.quiz .option p{
	font-size: 125%;
	margin: 5px;
}
.quiz .pane .correct-text p{
	font-size: 125%;
	color: #555555;
	margin: 10px 0;
}
.quiz .completed-message{
	color:#417505;
	text-align: center;
	font-weight: bolder;
	font-size: 125%;
}
.quiz-enter.pane{
	left: 120%;
}
.reverse .quiz-enter.pane{
	left: -100%;
}
.quiz-enter.quiz-enter-active.pane{
	transition: left .8s ease;
	left: 10%;
}
.quiz-leave.pane{
	left: 10%;
	transition: left .8s ease;
}
.reverse .quiz-leave.quiz-leave-active.pane{
	left: 120%;
}
.quiz-leave.quiz-leave-active.pane{
	left: -100%;
}


.quiz-enter.wrong-answer{
	top: -70px;
	transition: top .5s ease;
}
.quiz-enter.quiz-enter-active.wrong-answer{
	top: 0;
}
.quiz-leave.wrong-answer{
	top: 0;
	transition: top .5s ease;
}
.quiz-leave.quiz-leave-active.wrong-answer{
	top: -70px;
}



.inlineChart .body {
  border: 1px solid #f1f1f1;
  border-radius: 5px;
  background-color: #fafafa;
  margin-bottom: 12px;
  padding: 14px;
  margin-top: 11px;
}


.quizChart ::-webkit-scrollbar {
	display:block;
	border:1px solid #eee;
	padding:1px;
	border-radius: 4px;
}
.quizChart ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.25);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

div.slider {
padding-top: 10px;
    position: relative;
    padding-bottom: 47px;
    padding-bottom: 47px;
}

div.slider div.rangeslider-horizontal div.rangeslider__fill {
	background-color:#7ED321;
}

div.slider div.rangeslider-horizontal div.rangeslider__handle:after {
	display:none;
}

div.slider div.readout {
	text-align: center;
	font-size: 19px;
	padding: 16px;
}

div.slider div.labels {
    position: absolute;
    top: 54px;
    left: 0px;
    right: 0;
}
div.slider div.labels div.min {
	float:left;
	padding-left: 12px;
}
div.slider div.labels div.max {
	float:right;
	padding-right: 12px;
}

div.slider div.get-points {
	  background: #719932;
    display: inline-block;
    margin-top: 15px;
    position: absolute;
    right: -68px;
}

.content .post
div.tableChart table {
    width: auto;
    font-size: 16px;
}
div.tableChart table td {
	padding:5px 0px;
}
div.tableChart table td.answer {
	color: #4f4f4f;
  padding-left: 10px;
}

div.tableChart div.dateLine {
	margin-bottom:10px;
	margin-left: 2px;
	font-size: 13px;
	font-family: 'Open Sans';
}

div.inlineChart div.view-graph {
	position: relative;
}

div.inlineChart div.view-graph a {
	margin-top: 15px;
	cursor: pointer;
	text-transform: uppercase;
	font-family: 'Open Sans';
	font-size: 14px;
	font-weight: 600;
	font-style: normal;
	font-stretch: normal;
	line-height: normal;
	letter-spacing: normal;
	text-align: left;
	color: #293ccc;
	padding: 8px 16px;
	display: inline-block;
	border-radius:2px;
}
div.inlineChart div.view-graph a:hover {
	background: #F2F3FA;
}




/*
############################################################################################################

'####::'######:::'#######::'##::: ##::'######::
. ##::'##... ##:'##.... ##: ###:: ##:'##... ##:
: ##:: ##:::..:: ##:::: ##: ####: ##: ##:::..::
: ##:: ##::::::: ##:::: ##: ## ## ##:. ######::
: ##:: ##::::::: ##:::: ##: ##. ####::..... ##:
: ##:: ##::: ##: ##:::: ##: ##:. ###:'##::: ##:
'####:. ######::. #######:: ##::. ##:. ######::
....:::......::::.......:::..::::..:::......:::
                                      
############################################################################################################
*/





.header .solution{
	width: 60px;
	height: 60px;
	position: relative;
	display: inline-block;
}
.header .solution .hexagon-svg{
	width: 60px;
	height: 60px;
}
.header .solution svg.icon-svg{
	width: 26px;
	height: 26px;
	position: absolute;
	left: 17px;
	top: 11px;
}
.header .solution svg.icon-svg path{
	fill: #263692;
	stroke: #263692;
}
.header .solution span{
	width:100%;
	text-align: center;
	position: absolute;
	left: 0;
	top: 37px;
	color: #263692;
	font-weight: bold;
}
.header .solution #hexagon{
	fill: #FFFFFF;
}
.header .solution.active #hexagon{
	fill: #F5F5F5;
}
.header .solution.empty #hexagon{
	fill: #BABABA;
}
.header .solution .icon{
	fill: #263692;
}
.header .solution.active .icon{
	fill: #7ED321;
	stroke: #7ED321;
}
.header .solution.active span{
	color: #7ED321;
}

.content .solution{
	width: 40px;
	height: 40px;
	padding: 3px;	
	position: relative;
	display: inline-block;
}

.content .solution svg.icon-svg{
	width: 22px;
	height: 22px;
	position: absolute;
	left: 12px;
	top: 11px;
	stroke-width: 2px;
}
.content .solution svg.icon-svg path{
	fill: #263692;
	stroke: #263692;
}
.content .solution .hexagon-svg path{
	fill: #FFFFFF;
	stroke: #263692;
	stroke-width:4px;
}
.content .solution .icon{
	fill: #263692;
}
.content .completed .solution .icon-svg path{
	fill: #7ED321;
	stroke: #7ED321;
}
.content .completed .solution .hexagon-svg path{
	stroke: #7ED321;
}
.content .solution .text{
	width:100%;
	text-align: center;
	position: absolute;
	left: 0;
	top: 35px;
	font-size: 12px;
	color: #9B9B9B;
}
.content .face{
	display:inline-block;
}
.content .face img{
	border-style: solid;
	border-width: 2px;
	border-color:#F2A60F;
	border-radius:25px;
	width:35px;
	height: 35px;
}
.content .unread .face img{
	border-width: 4px;	
}
.content .post .vid{
	width:35px;
	height:35px;
}
.content .post .vid path, .content .post .vid circle{
	stroke: #F2A60F;
}
.content .post .vid path{
	stroke-width:2px;
}
.content .post .vid circle{
	stroke-width:3px;
}
.big svg{
	width: 65px;
	height: 65px;
	stroke-width:1px;
}



/*
############################################################################################################

:'######:::'#######::'##::: ##:'########:'########:'##::: ##:'########:
'##... ##:'##.... ##: ###:: ##:... ##..:: ##.....:: ###:: ##:... ##..::
 ##:::..:: ##:::: ##: ####: ##:::: ##:::: ##::::::: ####: ##:::: ##::::
 ##::::::: ##:::: ##: ## ## ##:::: ##:::: ######::: ## ## ##:::: ##::::
 ##::::::: ##:::: ##: ##. ####:::: ##:::: ##...:::: ##. ####:::: ##::::
 ##::: ##: ##:::: ##: ##:. ###:::: ##:::: ##::::::: ##:. ###:::: ##::::
. ######::. #######:: ##::. ##:::: ##:::: ########: ##::. ##:::: ##::::
:......::::.......:::..::::..:::::..:::::........::..::::..:::::..:::::
                                      
############################################################################################################
*/

.content h2 {
	margin: 0;
}
.content .post{
	width:100%;
	background: white;
	padding: 6px 15px 6px 15px;
	display: table;
	box-shadow: 1px 1px 2px rgba(0,0,0, .25);
	box-sizing: border-box;

	font-family: Roboto;
	color: #4A4A4A;
	font-weight: 400;
	font-size: 13px;

	border-style: solid;
	border-color: #D9D9D9;
	border-width: 0px;
	border-bottom-width: 1px;
}


.content .post table{
	width:100%;

}
.content .post .vid-frame{
	width: 100%;
}
.content .post table td.icon{
	vertical-align: top;
	width: 50px;
	padding-top: 5px;
	color: #f9b34f;
	font-size: 30px;
	text-align: center;
	padding-right: 20px;

}
@media (min-width: 0px) and (max-width: 900px) {
	.content .post table td.icon{
		padding-right: 10px;
	}
}
	

.icon.clickable {
    cursor: pointer;
}


.content .post table td.body{
	width:100%;
}


.content .post table td.right{
	vertical-align: top;
	width:1%;
	position: relative;
}
.content .post table td.right div.icon{
	width: 20px;
}
.content .post table td.right i{
	position: absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	font-size:24px;
	color:#FDA500;
}
.content .post .points {
	font-family: arial;
	font-size:18px;
	color: #243294;
	font-weight: bold;
}

@media (min-width: 0px) and (max-width: 900px) {
	.content .post .points {
		position: absolute;
    left: -18px;
		top: -16px;
	}
}

.content .post .points .circ div{
	font-family: Roboto;
	font-size: 14px;
	line-height:28px;
  font-weight: bold;
  font-stretch: condensed;
  text-align: center;
  color: #ffffff;
}
.content .post .points .circ{
	border-radius: 50%;
	background: #243294;
	width: 28px;
	height: 28px;
}
.content .post .points > div{
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
.content .post .body > span {
	display: table-cell;
	padding-top: 0px;
}
.content .get-points {
	font-weight: bold;
	white-space:nowrap;
	position: relative;
	cursor:pointer;

	font-size: 16px;
	cursor: pointer;
	height: 26px;
	line-height: 26px;
	border-radius: 4px;
	color: white;
	background-color: #293ccc;
	display: block;
	padding: 3px 10px;
	font-family: "Open Sans";
}
.content .get-points > span{
	position: relative;
	top: 8px;
}

.videoWrapperWrapper {
	text-align: center;
	width:100%;
	max-width: 560px; 
	margin-bottom: 10px; 
}
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.stack > .post:first-child{
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
}
.stack > .post:last-child{
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	border-bottom-width: 0px;
}

.feedStatusBar,
.content .post .actions {
	margin-top:11px;
	margin-bottom:6px;
}

.feedStatusBar a.action,
.content .post .actions a.action {
	 text-decoration:none;
	 margin-right:30px;
	 cursor: pointer;
	 font-family: 'Open Sans';
	 font-size: 14px;
	 font-weight: 600;
	 color: #293ccc;
}

.feedStatusBar a.action {
	text-transform:uppercase;
}

/* @media (min-width: 0px) and (max-width: 900px) {
	.feedStatusBar {
		margin-top: 90px;
	}
} */


/* Program overview post styles */
div.pointsOverview {
	width:90%;
}
div.pointsOverview h2 {
	margin-bottom:10px;
}
div.pointsOverview sup.pts {
	vertical-align: baseline;
  position: relative;
  top: -0.4em;   
	background-color: rgba(114,152,57,0.1); 
	color: black; 
	padding: 0 5px; 
	font-weight: 800; 	
}
div.pointsOverview div.raffle {
	background-color: #f5f1e5;
	border-left: 4px solid #f3e7cc;
	padding: 4px 8px;	
	margin-bottom: 16px;
}
div.pointsOverview p.grandPrize {
	font-style: italic;
	border-bottom: 1px solid #f5e7cc;
	padding-bottom: 11px;
}





div.modalContent {
	max-width:740px;
	box-sizing:border-box;
	margin:auto;
	padding: 16px;
}

div.modalContent img {
	max-width:100%;
}
.header div.author-header {
	display:flex;	
}
.header div.author-header div.avatar {
	margin-right:12px;
  width: 48px;
}	
.header div.author-header div.avatar img {
  border-radius: 50%;
  width: 48px;
  height: 48px;	
}
.header div.author-header div.avatar span.initials {
  width: 48px;
  height: 48px;	
	line-height: 48px;	
	top:0;
}
.header div.author-header .author-name {
	font-family: 'Open Sans';
  font-size: 18px;
  color: #243294;
	line-height:normal;
	font-weight: normal;
}
.header div.author-header .posted-date {
	font-family: 'Open Sans';
  font-size: 14px;
	color: #3f3f3f;
	line-height:normal;
	font-weight: normal;
}



div.modalContent.feedItem h1 {
	font-family: 'Open Sans';
  font-size: 36px;
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #3f3f3f;	
}

div.modalContent.feedItem div.fullPost li,
div.modalContent.feedItem div.fullPost p {
	font-family: Georgia;
  font-size: 21px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.67;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
}

div.modalContent.feedItem div.fullPost h1 {
	font-family: 'Open Sans';
  font-size: 26px;	
}





.content .body .text h2 {
	font-size: 18px;
  margin-top: 15px;
}

.content .body .text li,
.content .body .text p,
.content .body .text td 
{
	font-family: 'Open Sans';
  font-size: 14px;
  line-height: 1.5;
  color: #3f3f3f;
}


/*
############################################################################################################

'##::::'##:'########::::'###::::'########::'########:'########::
 ##:::: ##: ##.....::::'## ##::: ##.... ##: ##.....:: ##.... ##:
 ##:::: ##: ##::::::::'##:. ##:: ##:::: ##: ##::::::: ##:::: ##:
 #########: ######:::'##:::. ##: ##:::: ##: ######::: ########::
 ##.... ##: ##...:::: #########: ##:::: ##: ##...:::: ##.. ##:::
 ##:::: ##: ##::::::: ##.... ##: ##:::: ##: ##::::::: ##::. ##::
 ##:::: ##: ########: ##:::: ##: ########:: ########: ##:::. ##:
..:::::..::........::..:::::..::........:::........::..:::::..::
                                      
############################################################################################################
*/

.home .content {
	margin-top:59px;
}

.home.milestones .content {
	margin-top:101px;
}

.header {
	position: absolute;
	z-index: 1000;
	left: 0;
	top:0;
	right:15px;
  box-sizing: border-box;
}

@media (min-width: 0px) and (max-width: 900px) {
	.header {
		right:0px;
	}
}

.header .points{
  font-size: 10px;
  position: absolute;
  right: 15px;
  top: 7px;
  height: 45px;
  width: 45px;
  color: #9B9B9B;
  text-align: center;
  text-transform: uppercase;
  background: white;
  border-radius: 5px;
	padding: 3px;
  box-sizing: border-box;  
}
.header .points > div {
	position: relative;
	top: -4px;
}
.header .points .num{
	top: -1px;
  font-size: 24px;
  font-family: arial;
  font-weight: bold;
  color: #729839;
}
/* .header .title {
	font-family: Lato;
	font-size: 21px;
} */
.header .solution-text{
	background: #F2A200;
 	color:white;
 	font-size:24px;
  padding:7px 40px 20px 40px;
	box-shadow: 0px 2px 2px rgba(0,0,0,.20);
  position: relative;
  height: 32px;
	z-index: 1500;
}



.header .solutions {
	background-color:#fff;	
  box-sizing: border-box;  
  position: relative;
	box-shadow: 0px 2px 2px rgba(0,0,0,.20);
	z-index: 3000;
}

.header .solutions button.overview {
	position: absolute;
	top: 0;
	right: 0;
	background-color: white;
	border: 1px solid #2a2a2a;
	border-radius: 4px;
	height: 32px;
	margin: 10px;
	padding: 0 10px;
	font-family: 'Open Sans';
	font-size: 14px;
	font-weight: 600;
	color: #2a2a2a;
	cursor: pointer;
}

.home.milestones .header .solutions {
	height:100px;
}

.home.milestones .header .solutions .status {
	font-family:Roboto;
	font-size: 16px;
	position: absolute;
	bottom: -13px;
	left: 24px;
}

.home.singlesolution .header .solutions {
	height:100px;
}

.home.singlesolution .header .solutions .status {
	font-family:Roboto;
	font-size: 16px;
	position: absolute;
	bottom: -13px;
	left: 24px;
}



.header div.miniProgressBar {
	cursor:pointer;
	position:absolute;
	bottom:30px; 
	padding:10px 40px 10px 50px;
}
.header .circle {
	position: absolute;
	left: 20px;
	top: 21px;
	height: 8px;
	width: 8px;
	border-radius: 10px;
	border-style: solid;
	border-width: 5px;
	border-color: #729839;
}
.header .progress-bar {
	position: absolute;
	top: 27px;
	left: 36px;
	height: 5px;
	width: 117px;
	background: #729839;
}
.header .empty-progress-bar {
	position: absolute;
	top: 27px;
	left: 36px;
	height: 5px;
	right: 50px;
	background: #F5F1E6;
}

@media (min-width: 0px) and (max-width: 900px) {
	.header .solution-text{
		height: 41px;
	}
	.content {
		/* margin-top: 68px; */
		margin-top: 60px;
	}
	.home .content {
		margin-top: 128px;		
	}

	.home.milestones .content {
		margin-top:170px;
	}

	.home.milestones .header .solutions {
		height:110px;
		margin-top: 60px;
	}

	.home.milestones .header .solutions .status {
		bottom:-19px;
	}

	.home.singlesolution .content {
		margin-top:170px;
	}

	.home.singlesolution .header .solutions {
		height:110px;
		margin-top: 60px;
	}

	.home.singlesolution .header .solutions .status {
		bottom:-19px;
	}
	
	.header div.miniProgressBar {
		padding:0 0 0 16px;
	}
	.header .circle {
		display:none;
	}
	.header .progress-bar {
		display:none;
	}
	.header .empty-progress-bar {
		display:none;
	}

}



/*
############################################################################################################

'########:::::'###:::::'######:::'########:
 ##.... ##:::'## ##:::'##... ##:: ##.....::
 ##:::: ##::'##:. ##:: ##:::..::: ##:::::::
 ########::'##:::. ##: ##::'####: ######:::
 ##.....::: #########: ##::: ##:: ##...::::
 ##:::::::: ##.... ##: ##::: ##:: ##:::::::
 ##:::::::: ##:::: ##:. ######::: ########:
..:::::::::..:::::..:::......::::........::
                                      
############################################################################################################
*/



.page {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;

	/*position: relative;*/
	/*height: 100%;*/
	/*width: 100%;*/
	z-index: 100001;
}
.page .header {
	font-weight: bold;
}
.page .header>div{
	height: 37px;
	color: #3f3f3f;
	padding: 15px 40px 20px 40px;
	background-image: linear-gradient(to bottom, #fafafa, #f4f4f4);
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);	
	position: relative;
}
.page .header .left {
	float: left;
	position: relative;
	top: 3px;
	z-index: 1000;
}
.page .header .middle {
	text-align: left;
	width: 100%;
	font-size: 110%;
	position: absolute;
	top: 15px;
	left: 15px;
}

div.page div.header div.middle.title {
	font-family: 'Open Sans';
	font-size: 18px;
	color: #243294;
	line-height: 40px;

	right:120px;
	width:unset;
}

div.page div.header div.middle.title.textonly {
	text-overflow: ellipsis;	
	white-space: nowrap;
	overflow: hidden;
}


.page .body {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding-top: 60px;
	background: white;
	position: relative;
}
.page .body.scroll {
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

.page .done-btn {
	position: absolute;
	top: 0px;
	right:-24px;
	width:80px;
	height: 36px;
	font-size: 14px;
	line-height: 36px;
	font-family: 'Open Sans';
	text-align:center;
	background-color: #ffffff;
	color: #243294;
	border: 1px solid rgba(0,0,0,.15);
	border-radius: 5px;
	cursor:pointer;
}
.page .done-btn i {
	margin-right: 4px;
}


.page-enter .page {
	/*opacity: 0;*/
	transform: translateX(-100%);
}
.page-enter-active .page {
	animation: slide-in 0.25s forwards;
	/*opacity: 1;*/
	/*transition: opacity 1000ms ease-in-out;*/
}
.page-exit .page {
	/*opacity: 1;*/
}
.page-exit-active .page  {
	animation: slide-out 0.25s forwards;
	/*opacity: 0;*/
	/*transition: opacity 1000ms ease-in-out;*/
}
@keyframes slide-in {
	100% { transform: translateX(0%); }
}
@keyframes slide-out {
	0% { transform: translateX(0%); }
	100% { transform: translateX(-100%); }
}




.Library .content .post {
	margin-bottom: 12px;
}

.Library .content .post.top {
	text-align: center;
	background-color: #F2F2F2;
	padding: 25px; 
	margin-top: 20px; 
}



.searching {
	width: 100%;
	position: relative;
	left: -40px;
	padding: 10px 40px;
	color: #4A4A4A;
	text-align: center;
}
.searching img{
	width: 30px;
	padding: 6px;
}
.searching > div {
  left: 50%;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 20px;
  }

.content-body div.search {
	position:relative;
}
.content-body div.search input {
  line-height: 40px;
  border-radius: 1px;
  font-size: 20px;
  border: none;
  margin-top: 12px;
  width: 100%;
  text-indent: 50px;
  box-shadow: 1px 1px 2px rgba(0,0,0, .25);
  color: #333;
  font-weight: normal;
  font-family: Roboto;
  height:40px;
}

.content-body div.search i.icon-magnifying-glass {
	font-family: wellness-concepts;
	position: absolute;
	top: 19px;
	left: 12px;
	line-height: 30px;
	font-size: 17px;
	color: #555;
}

.content-body div.search i.icon-close-x {
	background-color: white;
	height: 42px;
	width: 42px;
	line-height: 42px;
	text-align: center;
	font-family: wellness-concepts;
	position: absolute;
	top: 12px;
	right: -2px;
	color: #555;
	cursor: pointer;
}

.content-body div.search input::placeholder { 
  color: #ccc;
  font-weight: 300;
	font-family: Roboto;
}
.content-body div.search input::-webkit-input-placeholder{ 
  color: #ccc;
  font-weight: 300;
	font-family: Roboto;
}
.content-body div.search input::-moz-placeholder{ 
  color: #ccc;
  font-weight: 300;
	font-family: Roboto;
}
.content-body div.search input:-ms-input-placeholder{ 
  color: #ccc;
  font-weight: 300;
	font-family: Roboto;
}
.content-body div.search input:-moz-placeholder { 
  color: #ccc;
  font-weight: 300;
	font-family: Roboto;
}
.content-body div.search input:focus {
    outline: none;
}




/*
############################################################################################################

'##::::'##::::'###:::::'######::'##:::'##::'######::
 ##:::: ##:::'## ##:::'##... ##: ##::'##::'##... ##:
 ##:::: ##::'##:. ##:: ##:::..:: ##:'##::: ##:::..::
 #########:'##:::. ##: ##::::::: #####::::. ######::
 ##.... ##: #########: ##::::::: ##. ##::::..... ##:
 ##:::: ##: ##.... ##: ##::: ##: ##:. ##::'##::: ##:
 ##:::: ##: ##:::: ##:. ######:: ##::. ##:. ######::
..:::::..::..:::::..:::......:::..::::..:::......:::
                                      
############################################################################################################
*/

.content .solution.tall {
	text-align:center;
}
.content .solution.tall i {
	color:#F5A623;
	font-size:30px;
}

iframe {
	border:none;
}

.videoWrapper {
	border:1px solid #999;
}

.Library .content .post.top .text h2 {
    margin: 15px;
}

.Library .content .post.top p {
    line-height: 20px;
}


/* Static page styles */

.content.static h1 {
	font-weight: normal;
  color: #263692;
  font-size: 32px;
}

.content.static h2 {
	font-weight: bold;
  color: #000;
  font-size: 13px;
}
.content.static h3 {
	font-weight: normal;
  color: #263692;
	font-size: 14px;
  margin-bottom: 0px;
}
.content.static p {
	font-weight: normal;
  color: #4A4A4A;
  font-size: 13px;
  margin-top: 0px;
}

a.go_button {
		display:block;
		text-decoration: none;
    background: #719932;
    height: 40px;
    font-size: 20px;
    color: white;
    border-radius: 5px;
    text-align: center;
    line-height: 40px;
    width: 154px;
    margin:auto;
    margin-bottom:20px;
    cursor: pointer;
}
a.go_button img {
	    height: 20px;
    padding-left: 6px;
}
a.go_button.top {

		background: none;
    height: 30px;
    font-size: 16px;
    line-height: 25px;
    width: 119px;
    border: 1px solid white;
    font-weight: normal;
    margin-right: 9px;
}
a.go_button.top img {
	height: 14px;
}





/*
############################################################################################################

:::'###::::'##:::::::'########:'########::'########::'######::
::'## ##::: ##::::::: ##.....:: ##.... ##:... ##..::'##... ##:
:'##:. ##:: ##::::::: ##::::::: ##:::: ##:::: ##:::: ##:::..::
'##:::. ##: ##::::::: ######::: ########::::: ##::::. ######::
 #########: ##::::::: ##...:::: ##.. ##:::::: ##:::::..... ##:
 ##.... ##: ##::::::: ##::::::: ##::. ##::::: ##::::'##::: ##:
 ##:::: ##: ########: ########: ##:::. ##:::: ##::::. ######::
..:::::..::........::........::..:::::..:::::..::::::......:::
                                      
############################################################################################################
*/




.home .content > .alerts {
	padding: 0;
}
.alerts .alert {
	min-height: 50px;
	position: relative;
	border-bottom: 1px solid #BFBC84; 
}
.alerts .alert a {
	text-decoration: initial;
	color: initial;
}
.alerts .text {
	font-size: 16px;
	font-style: italic;
	font-weight: bold;
	color: black;
}
.alerts .alert.link .text > a > span {
	text-decoration: underline;
}
.alerts .icon-circ {
	background-color: #F8E71C;
	height: 36px;
	width: 36px;
	border-radius: 18px;
	color: black;
	font-size: 24px;
	position: relative;
}
.alerts .icon-circ i::before {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
}
.alerts .x {
	color: #999A9A;
	font-size: 12px;
	cursor:pointer;
}
.alerts .text {
	width: 98%;
}
.alerts .icon, .alerts .x {
	padding: 0 10px;
	width: 1%;
}
.alerts .button {
	background: #729839;
	color: white;
	display: inline;
	font-size: 80%;
	margin-left: 15px;
	font-style: normal;
	padding: 6px;
	text-decoration: none;
}

div.alertBody p:first-child {
	margin-top:0px;
}

/*
############################################################################################################

:'######:::::'###::::'##:::::::'########:'##::: ##:'########:::::'###::::'########::
'##... ##:::'## ##::: ##::::::: ##.....:: ###:: ##: ##.... ##:::'## ##::: ##.... ##:
 ##:::..:::'##:. ##:: ##::::::: ##::::::: ####: ##: ##:::: ##::'##:. ##:: ##:::: ##:
 ##:::::::'##:::. ##: ##::::::: ######::: ## ## ##: ##:::: ##:'##:::. ##: ########::
 ##::::::: #########: ##::::::: ##...:::: ##. ####: ##:::: ##: #########: ##.. ##:::
 ##::: ##: ##.... ##: ##::::::: ##::::::: ##:. ###: ##:::: ##: ##.... ##: ##::. ##::
. ######:: ##:::: ##: ########: ########: ##::. ##: ########:: ##:::: ##: ##:::. ##:
:......:::..:::::..::........::........::..::::..::........:::..:::::..::..:::::..::
                                      
############################################################################################################
*/


.eventDetail {
	position:absolute;
	top:0;
	left:0;
	width: 250px;
  min-height: 50px;
	background-color: white;
	border-radius:10px;
	box-shadow: 2px 2px 10px 2px rgba(0,0,0,.25);
  z-index: 100;
  padding:10px;
}

.eventDetail p {
	color:#5C5A5A;
	margin-bottom: 0px;
}

.eventDetail p.desc {
	font-style: italic;
	margin:2px 0 2px 0;
}

.eventDetail a {
	cursor:pointer;
	color: #F2A200;
}

.eventDetail a.close {
	border-radius: 5px;
	padding: 5px 10px;
	position: absolute;
	top: -3px;
	right: -3px;
}


.event-calendar.center-column {
	background-color:white;
}

.event-calendar.center-column .content > div {
	padding: 20px 50px;
  background: white;
}
@media (min-width: 0px) and (max-width: 900px) {
	.event-calendar.center-column .content > div {
			padding: 8px 0 0 0;
		}
}

.event-calendar.center-column .content > div > div {
	width: 100%;
	background: white;
	padding: 6px 30px 6px 30px;
	display: table;
	box-shadow: 1px 1px 2px rgba(0,0,0, .75);
	box-sizing: border-box;
	font-family: Roboto;
	color: #4A4A4A;
	font-weight: 400;
	font-size: 13px;
	border-style: solid;
	border-color: #D9D9D9;
	border-width: 0px;
	border-bottom-width: 1px;
}

.event-calendar.center-column.no-box-shadow .content > div > div {
    box-shadow: none;
    border:none;
}