body, #jpreOverlay {
background:white;
min-width:1000px;
font-family:"Droid-sans", sans-serif;
}
body, html {
height: 100%;
width: 100%;
}
a {
    text-decoration:none;
    color:#29ABE2;
}
.table {
    display:table;
    width:100%;
}
.light-text-color {
    color: #808284;
}
.larger-text {
    font-size:1.3em;
}


div.mainContainer {
width:100%;
margin:0 auto;
position:relative;
}

.mmBgrColor {
background-color:#999999;
}
.mmTxtColor {
color:rgb(46,188,188);
}
.mmTxtOrange {
color:rgb(255,147,30);
}

.header {
width:100%;
height:50px;
}

::selection {background:transparent;}
::-moz-selection {background:transparent;}

div.mainContainer {
    overflow: visible;
    height: 100%;
    width: 100%;
}
div.innerContainer {
    overflow: visible !important;
    height: 100%;
    text-align: center;
    width: 100%;
}
.mymaxApp div.exerciseContainer {
    height: 100%;
}
div.headerFolds {
display:none;
}
.topLinks a {
font-weight: normal !important;
font-family: 'Droid sans', sans-serif;
top: 0;
float:left;
}
header {
    z-index: 999999;
    position: relative;
    width: 100%;
}
.exerciseContainer {
width:100% !important;
box-shadow:none;
}
.exerciseContainer, .innerContainer{
background:transparent;
}

.maxscholarHeader {
color: white;
font-family: "litera-regularregular", sans-serif;
font-size: 1.2em;
letter-spacing: 2px;
font-weight: normal !important;
display: block;
position: relative;
float: left;
text-decoration: none;
top: 5px;
left: 40px;
text-transform:uppercase;
}
.maxscholarLogo {
    width: 40px;
    float: left;
    margin-right: 10px;
}
.dashboardLink {
float: left;
background: url(/static/mymax/img/link-dashboard.png);
width: 130px;
height: 36px;
background-repeat: no-repeat;
margin-left: 100px;
margin-top: 22px;
}
.maxscholarHeader span {
position: relative;
top: 9px;
left: 9px;
}
.topLinks {
display: inline-block;
position: relative;
right: 0;
float: right;
top: 8px;
}
.topLinks a, .myMaxLink {
  font-weight: bold;
  color: white;
  text-decoration: none;
  font-size: 1.4em;
  margin-right: 2em;
  position: relative;
  top: 2px;
}
.mymaxApp .header .uiIcon {
width: 30px;
height: 30px;
background-image: url(/static/mymax/img/help-settings-icons.png);
background-repeat:no-repeat;
}
.mymaxApp .settingsIcon {
  background-position: -30px 0;
}
.mymaxApp .uiIcon.helpIcon {
  background-position: 0 0 !important;
}
.myMaxLink {
    padding-right: 0;
    float: left;
    display: block;
    margin-top: 8px;
    margin-left: 25px;
}
.innerContainer {
margin:0 auto;
left:0 !important;

}

.help span {
display:none;
}
.help {
font-size: 0 !important;
color: transparent !important;
background: url(/static/base/images/help-button.png) no-repeat scroll 0 0;
width: 84px;
height: 33px;
margin-top: -5px;
margin-right: 30px !important;
}


/* PROGRESS */

.mymax_item_progress{
border-bottom: 1px solid #dcf2e3;
padding-bottom: 1em;
padding-top: 1em;
width: 93%;
margin: 0 auto;
color:#6c6c6c;
}
.mymax_average{
}
.mymax_score{
display:inline-block;
}
.progress_header, .progress_items {
background: white;
margin-bottom: 2em;
border-radius:2em;
}
.progress_header {
height:48px;
padding-top:10px;
padding-bottom:10px;
}
.progress_bar_score {
width:80%;
}
.progress_bar_score span span {
  color: #29ABE2; 
}
.progress_bar {
background:#f0f0f0;
height:10px;
width:100%;
position:relative;
margin-top:5px;
}
.progress_bar div {
height: 100%;
background-color:#29ABE2;
position: relative;
}

.progress_bar_score, .mymax_score{
display: inline-block;
}
.mymax_score {
margin-left: 3%;
vertical-align:bottom;
}
.progress_header {
background:#29ABE2;
margin-bottom:0.2em;
text-align:center;
color:white;
font-size:1.5em;
}
.progress_header span {
}

.settings a {
color: white;
font-size: 1.3em;
padding: 1em;
margin-bottom: 0.5em;
width:17em;
}

.settingsApp {
    background-color:#f0f0f0;
}


.form {
padding-left: 2em;
padding-top: 2em;
color:white;
}
.form label, .form input {
display: inline-block;
height: 2em;
color:#333;
}
.form label {
font-size: 1.2em;
width: 9em;
text-align: left;
}
.form input {
border: 0;
width: 20em;
}
.formSubmit {
display:block;
margin:0 auto;
margin-top:1em;
margin-bottom:1em;
}

.exerciseContainer {
margin:0 auto;
position:relative;
}

.schoolLogoContainer {
    height:119px;
    float:left;
position:relative;z-index:9999;
}
.schoolLogo {
    max-height:100%;
}
.welcomePage.hasLogo .welcomeOption {
    margin-top:15px;
}


/* NEW MYMAX STYLES */

.mymaxBoxGradient {
}

.mymaxMenu {
padding-top: 2em;
color: #333;
padding-bottom: 1em;
}
.mymaxMenu, .mymaxContent {
display: inline-block;
vertical-align: top;
text-align: center;
width: 100%;
position: relative;
}
.mymaxUser {
font-weight:normal;
}
.mymaxNavigation {
    margin-top: 1em;
    display: flex;
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
}
.mymaxUk .mymaxNavigation {
    width:40%;
}
.mymaxNavigation a {
  display: inline-block;
  color: #333;
  padding-top: 0.5em;
  font-size: 0.9em;
  padding-bottom: 0.5em;
text-align:center;
}
.mymaxNavigation a span {
}
.linkTitle {
margin-top:10px;
display:block;
}
a.maxreadingLink:hover,  a.maxreadingLink.active, .demoPage .maxreadingInfo h1 {
  color: rgb(158,93,178) !important;
}
a.maxplacesLink:hover, a.maxplacesLink.active, .demoPage .maxplacesInfo h1 {
  color: rgb(234,200,76) !important;
}
a.maxvocabLink:hover, a.maxvocabLink.active, .demoPage .maxvocabInfo h1 {
  color: rgb(100,83,163) !important;
}
a.maxmusicLink:hover, a.maxmusicLink.active, .demoPage .maxmusicInfo h1{
  color: rgb(239,101,95) !important;
}
a.maxwordsLink:hover, a.maxwordsLink.active, .demoPage .maxwordsInfo h1 {
  color: rgb(20,136,201) !important;
}
a.maxbiosLink:hover, a.maxbiosLink.active, .demoPage .maxbiosInfo h1 {
  color: #25A89A;
}

.demoPage #demo-initial-page {
    background-color: white;
    width: 1024px;
    margin: 0 auto;
    margin-top: 2em;
	padding-bottom:1.5em;
}

.continue-link a {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: white;
    justify-content: center;
    padding: 4px;
    border-radius: 0.3em;
    margin-top: 10px;
}
.maxphonics-continue a {
    background: #68CBCC;
}
.maxreading-continue a {
    background: #9B5BB8;
}
.maxwords-continue a {
    background: #29ABE2;
}
.maxmusic-continue a {
    background: #EF655F;
}
.maxplaces-continue a {
    background: #EAC84C;
}
.maxbios-continue a {
    background: #25A89A;
}
.maxvocab-continue a {
    background: #6C59A5;
}
.continue-link svg {
    width: 19px;
    margin-right: 10px;
}
.continue-link use {
	fill:#FFFFFF;
}


a.navbarProgress {
background-color:#7758a1;
margin-top:1em;
}
.avatarContainer {
width: 108px;
  margin: 0 auto;
  display: block !important;
  height: 94px;
  background: lightgray;
  margin-bottom: 14px;
  overflow: hidden;
}
.avatarContainer img {
width:100%;
}
.avatarContainer, .mymaxUser h1 {
display:inline-block;
vertical-align:middle;
}
.mymaxHomeActions {
width:100%;
}
.mymaxUser, .innerHomeActions {
text-align: left;
display:inline-block;
vertical-align:top;
} 

.mymaxUser h1, .mymaxUser h2 {
font-weight: bold;
font-size: 2em;
text-align: left;
padding-left: 2em;
margin-bottom: 0em !important;
}
.mymaxUser h2 {
font-size: 1.2em;
font-weight: normal;
color: #999;
padding-left: 3.4em;
margin-top: 0.5em;
}
.demoPage .mymaxUser h1 {
font-size: 0.8em;
margin-left: 0em;
}
.gotoMaxreports {
  position: absolute;
  margin-top: -43px;
  z-index: 9999999;
  right: 180px;
}
.mymaxApp .uiIcon {
background-image:url(/static/mymax/img/icons-mymax.png);
background-color: #b6378d;
}
.maxwordsApp .selection .uiIcon {
background-color:rgb(11,172,221)
}
.mymaxApp .controls-center .uiIcon {
background-image: url(/static/base/images/ui-icons.png);
}
.mymaxMenu .uiIcon {
background-color: transparent;
width: 100px;
height: 100px;
border-radius: 0;
margin: 0;
display: inline-block;
background-image: url(/static/mymax/img/mm-main-icons.png);
background-repeat: no-repeat;
background-size:cover;
}
.select-book .uiIcon {
background-color:transparent;
}
.mymaxApp .iconBack {
background-position: -262px -83px;
}
.mymaxApp .homeIcon {
background-position: -42px -77px;
}
.mymaxApp .maxphonicsIcon {
background-position:0 0; 
}
.mymaxApp .maxreadingIcon {
background-position: -121px 0;
}
.select-book .maxreadingIcon {
background-position: -121px 0;
}
.mymaxApp .maxwordsIcon {
background-position: -242px 0;
}
.mymaxApp .maxmusicIcon {
background-position: -413px 0;
}
.mymaxApp .maxvocabIcon {
background-position: -551px 0;
}
.mymaxApp .maxplacesIcon {
background-position: -686px 0;
}
.mymaxApp .maxbiosIcon {
background-position: -825px 0;
}
.mymaxBox {
text-align:center;
padding-bottom:2em;
}
.leftmymaxBox {
text-align:left;
margin-bottom:1.5em;
padding-bottom:0;
}
.leftmymaxBox * {
display: inline-block;
vertical-align:middle;
}
.leftmymaxBox div {
width: 58%;
text-align:center;
}
.leftmymaxBox p {
color:#a1a5a5;
font-size:0.9em;
margin-bottom:1.5em;
}
.leftmymaxBox a {
}
.mymaxBox h2 {
color: #8b9191;
font-weight: normal;
font-size: 1.1em;
margin-bottom:2em;
line-height:1.5em;
}
.largeMymaxBox {
padding: 2em;
margin-top: 1em;
}
.headingBox {
padding:1em;
text-align:center;
}

.purpleBox {
background:#8166a8;
color:#dbc6f8;
}
.greenBox {
background:#2db017;
color:#fdfefe;
}
.redBox {
background:#ed672c;
color:white;
}
.redBox a {
color:white;
text-decoration:underline;
font-weight:bold;
}

.headingBox span {
display:inline-block;
vertical-align:middle;
}
.headingBox span.boxText {
width: 72%;
font-size: 1.1em;
}
.maxwordsLightIcon {
background-position:-120px -190px;
}
.gamesLightIcon {
background-position:-200px -135px;
}

.oldLicense .mymaxContent {
	padding-top:2em;
}
.oldLicense .mymaxUser {
	width:420px;
	padding-left:0;
	text-align:left;
}
.innerApp .mymaxContent {
    padding-top: 0;
    height: 100%;
}
.mymaxBios .mymaxContent {
    padding-top:1em;
}
.mymaxContent.stickTop {
    padding-top:0;
}
.mymaxProgress .mymaxContent {
width: 90%;
max-width: 1020px;
}
.mymaxContent h1 {
    margin-bottom:30px;
}
.mymaxContinue {
}
.mymaxContinue a {
font-size:0.9em;
}
.mymaxContinue .continueInfo {
color: #565e6e;
display: inline-block;
font-size: 1.2em;
vertical-align: middle;
}
.mymaxContinue .continueInfo span {
font-size: 1.5em;
color:white;
}
.roundedButton, .introjs-button {
display: inline-block;
min-width: 5em !important;
font-size: 1.2em !important;
text-transform: uppercase;
font-weight: normal;
padding: 0.1em !important;
padding-right: 1em !important;
padding-left: 1em !important;
}

/* INTRO JS OVERIDE */

.introjs-tooltip {
width: 500px !important;
max-width:500px !important;
padding:23px !important;
}
.introjs-tooltipbuttons {
text-align: center !important;
}
.introjs-button {
    background-image: none !important;
    text-shadow: none !important;
    color: white !important;
    border: none !important;
}
.introjs-nextbutton, .lastTooltip .introjs-skipbutton{
background-color: #ff9f00 !important;
position: relative !important;
left: 10px;
}
.introjs-skipbutton {
    margin-right: 55px !important;
}
.introjs-skipbutton, .introjs-prevbutton {
    background-color: #d8d8d8 !important;
}
.introjs-disabled {
background-color:#f4f4f4 !important;
}
.introjs-helperNumberLayer {
display:none !important;
}


.mymaxHomeItem {
}
.mymaxContinue {
padding-top:2em;
}
.buttonContainer {
width: 37%;
text-align: right;
display: inline-block;
padding-right: 3%;
}

.mymaxHomeProgress {
}
.mymaxHomeProgress div {
color: white;
font-size: 2.5em;
}
.mymaxHomeProgress a {
font-size: 1.2em !important;
}
.gamesHome {
color: #59b9f8;
font-size: 1.2em;
}
.gamesHome a {
color:white;
}

/* MAXREADING */
.select-level {
width: 90%;
height: 100%;
margin: 0 auto;
max-width: 850px;
}
.select-level a, .select-reading-level a {
  display: inline-block;
  padding-bottom: 0.4em;
  text-align: center;
  background: url(/static/mymax/img/reading-level-locks.png) no-repeat scroll 0 0 transparent;
  font-size: 1.5em;
  text-align: center;
  color:white;
  padding-top: 36px;
  width: 56px;
  margin-bottom: 1em;
  margin-right:2em;
  font-weight: bold;
}
a.levelLocked {
background-position: -91px 0;
}

.mymaxReading .mymaxContent h2 {
color: white;
font-weight: normal;
font-size: 1.3em;
margin-bottom: 2em;
}

.select-book {
position: absolute;
width: 42%;
right: 3%;
overflow-y:auto;
height:100%;
}
.select-book h3 {
background-color: #ff9900;
color: white;
font-weight: normal;
letter-spacing: 1px;
padding-left: 4%;
cursor:pointer;
border-bottom:1px solid #e38800;
}

.ui-accordion-header span.close, .ui-accordion-header span.open{
display:none;
}
.ui-accordion span.close {
display:inline;
}
.ui-state-active span.open {
display:inline;
}
.ui-state-active span.close {
display:none;
}
#accordion {
margin-bottom:3em;
}
ul.chapters {
  width: 100%;
  margin: 0 auto;
  margin-top: 1em;
  max-width: 750px;
}
.chapters li {
background-color:white;
border-bottom:1px solid #c9cbcb;
}
.chapters li a {
  color: #252525;
  display: block;
  height: 2.5em;
  line-height: 2.5em;
  padding-left: 1em;
  text-align: left;
  padding-top: 0.4em;
}
.chapters li a span {
  float: right;
  margin-right: 2%;
  font-size: 1em;
  padding-left: 30px;
  width: 98px;
  font-weight: bold;
  text-align: center;
}
.chapters li a:hover {
background:#e6e8e8;
}
.chapters .pin {
  float: left;
  width: 33px;
  height: 36px;
  background: url(/static/mymax/img/chapter-status.png) no-repeat scroll 0 0;
  margin-right: 14px;
}
.incomplete-chapter .pin {
  background-position: 0 -44px;
}
.bookHeader {
width: 90px;
  height: 90px;
  display: inline-block;
  background-color: rgb(195,196,226);
  border-radius: 50%;
  margin-top: 12px;
  text-align: center;
  line-height: 110px;
}
.bookHeader span {
  display: inline-block;
  background: url(/static/mymax/img/reading-level-locks.png);
  width: 46px;
  height: 60px;
  background-size: auto 100%;
  line-height: 81px;
  font-size: 1.3em;
  font-weight: bold;
  color: white;
}

span.new-chapter {
color:#1aaa02;
}
span.incomplete-chapter {
color:#d01919;
}
span.score-chapter {
  color: #959595;
  font-size: 1.4em !important;
}


/* DEMO PAGE */
.demoPage, .demoPage .topLinks a {
font-family:"Droid Sans" !important;
}
.demoPage .mymaxContent h1 {
  color: #333;
  font-size: 2em;
  margin-top:1em;
}
.demoPage h2 {
  font-size: 1.5em;
  font-weight: normal;
  color: #666;
}
.demoPage .spacer {
height:30px;
}
.demoPage .appInfo {
padding-top: 0.5em;
}
.demoPage .roundedButton {
font-size:1em !important;
}
.demoPage .chartIcon {
background-position: 701px -556px;
}
.greenButton {
background-color:#00ae3b;
}
.bottomInfo {
margin-top:0.4em;
}

.demoPage .appInfo div, .demoPage .bottomInfo div {
width:94%;
display:inline-block;
text-align:center;
vertical-align:middle;
}
.demoPage .bottomInfo div {
width:46%;
}
.demoPage .appInfo a {
margin-top:0.4em;
}
.demoPage .appInfo a.blueButton {
margin-top:2em;
}
.demoPage .bottomInfo {
padding-top:1.5em;
padding-bottom:1.5em;
}
#video-over-pp {
  position: absolute;
  left: 0;
  z-index: 9999;
  top: 0;
  pointer-events: none;
  text-align: center;
  width: 100%;
  margin-top: 25%;
}
#video-over-pp .uiIcon {
background-image: url(/static/base/images/ui-icons.png);
  background-color: #333;
  width: 60px;
  height: 60px;
  display: inline-block;
  opacity: 0.8;
}
#jq-player3, #video-over-pp {
cursor:pointer;
}
#video-over-pp .iconPlay {
background-position: -275px -38px;
}
#video-over-pp .iconPause {
background-position: -221px -38px;
}
.demoPage .mymaxUser {
font-size:1.5em;
}
.appInfo .info {
padding:1em;
}
.demoGames div {
margin-top: 0.4em;
font-size: 1.2em;
}
.demoGames .roundedButton {
float:right;
margin-top:-26px;
}
h2 small {
text-shadow: 1px 1px 0px #333;
color: white !important;
}
.demoPage .topLinks {
float:right;
}

.demoPage .maxphonicsInfo h1 {
color:rgb(46,188,188);
}

.leftInfo, .appInfo {
display:inline-block;
vertical-align:middle;
position:relative;
}
.leftInfo {
width: 350px;
margin-right: 1em;
font-size: 1.1em;
color: #666;
}
.leftInfo h1 {
  font-family: "litera-regularregular";
}
.leftInfo p {
margin-top:1em;
margin-bottom:1em;
}


/* MAXPHONICS */
.chooseBgr  a {
color:#5d5d5d;
}
.chooseBgr a span {
  display: inline-block;
  width: 22px;
  height: 22px;
  position: relative;
  top: 4px;
  border-radius: 50%;
}
.readingApp .chooseBgr a span, .readingApp .chooseExercise .uiIcon, .mymaxReading .chooseBgr a span, .mymaxReading .chooseExercise .uiIcon {
background-color:rgb(158, 93, 178);
}

.selection .goBack {
color:#656d7b !important;
}
.mymaxPhonics h2 {
color: #656d7b;
}
.selection {
  display: table;
  width: 100%;
  text-align: left;
}
.flex-selection {
  display: flex;
}

.world {
width: 147px;
text-align: center;
margin-top:30px;
margin-left:1em;
opacity:.9;
}
.world.lowLevel {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}
.world:hover {
opacity:1;
}
.world h3 span {
font-size: 0.9em;
border-bottom: 1px solid #e2e2e2;
margin-bottom: -13px;
display: block;
padding-top: 5px;
padding-bottom: 7px;
}
.world div, .worldImage {
  width: 147px;
  height: 147px;
  display: inline-block;
  background: url('/static/mymax/img/maxphonics-big-icons.png') no-repeat scroll -7px 0px transparent;
  position: relative;
  z-index: 99;
  margin-top: 12px;
  background-size: auto 100%;
}
.chooseExercise .worldImage { 
  width: 100px;
  height: 100px;
}
.worldImage.digraphs {
    background-position:-390px 0;
}
.worldImage.blends {
    background-position:-262px 0;
}
.worldImage.teen {
    background-position: -129px;
}
.maxwordsApp .worldImage {
  background-image: url(/static/mymax/img/icons-mymax.png);
  background-size: initial;
background-repeat:repeat;
width:119px;
height:119px;
}
.world div {
margin-bottom:0;
}
.future div, .futureChooseExercise .worldImage {
      background-position: -196px 0;
}
.futureChooseExercise .worldImage {
  background-position: -136px 0;
}
.city div, .cityChooseExercise .worldImage {
background-position: -381px 0;
}
.cityChooseExercise .worldImage {
background-position: -253px 0;
}
.city2 div, .city2ChooseExercise .worldImage {
background-position: -568px 0;
}
.city2ChooseExercise .worldImage {
background-position: -382px 0;
}

.wordsWorld div {
background: url('/static/mymax/img/words-in-phonics-icons.png') no-repeat scroll 1px 0px transparent;
}
.spellingInPhonics div {
background-position: -121px 0;
}

.phonicsSongs a.selectExercise {
    display: flex;
    flex-direction:column;
    align-items: center;
    color: #6D6E70;
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 3em;
}

.phonicsSongs a svg {
    width: 100px;
    height: 100px;
}
.phonicsSongs .cs1 use {
	fill:#EC297B;
}
.phonicsSongs .cs2 use {
	fill:#00A551;
}
.phonicsSongs .cs3 use {
	fill:#F6921E;
}
.phonicsSongs .cs4 use {
	fill:#26A9E0;
}
.phonicsSongs .cs5 use {
	fill:#652D90;
}

.selectExercise .mmBgrColor {
    background-color:rgb(46,188,188);
}
.cs1 {
background-position: -276px 0 !important;
}
.cs2 {
background-position: -427px 0 !important;
}
.cs3 {
background-position: -586px 0 !important;
}
.cs4 {
background-position: -726px 0 !important;
}
.cs5 {
background-position: -862px 0 !important;
}
.world h3, .world h4, .mymaxContent h3, .mymaxContent h4 {
font-weight: normal;
font-size: 1.3em;
text-align: center;
}
.world h3 {
letter-spacing: 1px;
font-size: 1.2em;
}
.world h4 {
font-weight:normal;
font-size:1em;
}
.future h4 {
}
.city h4 {
}
.city2 h4 {
}
.chooseExercise .goBack {
margin-top: 15px;
display: block;
margin-bottom: 20px;
position: absolute;
}

.chooseExercise {
text-align:center;
background:#FDFEFE
}
.chooseBgr {
  padding-top: 30px;
  position: relative;
  margin: 0 auto;
  display: inline-block;
width:73%;
}
.chooseExercise a {
  font-size: 1.1em;
  display: block;
  text-align: left;
  line-height: 20px;
  margin-bottom: 12px;
  display: block;
  vertical-align: middle;
}
.readingApp .chooseExercise a.selected, .mymaxReading .chooseExercise a.selected, .pre-kApp .chooseExercise .activeChapter, .prekApp .activeChapter{
  background: rgb(195,196,226);
  border-radius: 1em;
  padding: 0.2em;
  padding-left: 0.5em;
  position: relative;
  left: -9px;
  color: white;
}
.pre-kApp .chooseExercise .activeChapter, .prekApp .activeChapter{
  background-color: rgb(186,240,237);
  color:#333;
}
.exerciseChoose a {
display:none;
}
.selectorPlaceholder {
  background-color: rgb(250,241,214);
  padding-top: 0.5em;
  border-radius: 1em;
  margin-bottom: 1em;
display:none;
}
.selectorPlaceholder a {
  background-color: rgb(255,204,86);
  display: inline-block;
  width: 39px;
  vertical-align: middle;
  padding-top: 9px;
  height: 31px;
  margin-right: 10px;
  text-align: center;
  border-radius: 50%;
}

a.selectPractice {
background: url('/static/mymax/img/practice-games.png') no-repeat scroll 0 0 transparent;
border-radius: 0px;
}
.futureChooseExercise a, .cityChooseExercise a, .city2ChooseExercise a {
}

a.phonicsSongsLink {
  border-radius: 0px;
  font-size: 1em;
  color: #999;
  background: url('/static/mymax/img/racoon-icon.png') no-repeat scroll 0 0 transparent;
  padding-top: 7em;
  width: 86px;
  height: 56px;
  padding-top: 10px;
  padding-left: 67px;
  margin-top: 50px;
}


@media (max-width: 950px) {
	.world {
	width:130px;
	}
}


/* VIDEO TUTORIAL */
.video-tutorial {
position: fixed;
top: 0;
left: 0;
z-index: 999999;
background: rgba(255,255,255,0.9);
height: 100%;
width: 100%;
text-align: center;
display: none;
}
#jq-player2 {
margin: 0 auto;
position: relative;
height: 437px !important;
overflow: hidden;
width: 779px !important;
border: 20px solid #d990c1;
margin-top: 1em;
background:url(/static/mymax/images/loading.jpg) scroll center center no-repeat white
}
#jq-player2 video, #jq-player2 embed, #jq-player2 object, #jq-player2 iframe {
width: 100% !important;
height: 100% !important;
}
.closeTutorial {
margin-top:30px;
margin-bottom:20px;
}

.noLicense {
}
.noLicense h2 {
color:white;
font-size:20px;
}
.noLicense p {
color: white;
font-weight: bold;
line-height: 40px;
}
.noLicense p a {
color:white;
text-decoration:underline;
}


.direction {
color: #828888;
font-size: 1.1em;
width: 59%;
display: inline-block;
}
.uiMymaxIcon {
width: 60px;
height: 56px;
display: inline-block;
background-image: url(/static/mymax/img/icons-mymax.png);
}
.mymaxHomeItem .uiMymaxIcon {
position: relative;
top: 22px;
margin-left: 1em;
margin-right: 1em;
}

.progressIcon {
background-position: -287px -195px;
}
.dictionaryIcon {
background-position: -361px -190px;
}
.gamesIcon {
background-position: -204px -200px;
}

.maxwordsLinks, .gamesLinks, .maxbiosLinks{
text-align: center;
display: inline-block;
width:100%;
}

.maxwordsLinks a, .gamesLinks a, .maxmusicgamesLink a, .maxbiosLinks a {
    display: inline-block;
    color: #828888;
    margin-right: 2em;
    margin-top: 2em;
    margin-bottom: 1em;
    position:relative;
}
.gamesLinks a {
    margin-right:0;
    display:block;
    text-align:center;
    margin-top:30px;
}

.gamesLinks a.active .gameName {
background: #C2C1E1;
color: white;
border-radius: 0.5em;
padding: 1em;
padding-top: 0.3em;
display: inline-block;
padding-bottom: 0.3em;
}

.maxwordsLinks a:hover, .gamesLinks a:hover, .maxbiosLinks a:hover {
color:black;
}
.maxwordsLinks .uiIcon, .gamesLinks .uiIcon, .maxmusicgamesLink .uiIcon, .maxbiosLinks .uiIcon{
width:90px;
height:90px;
background-color:transparent !important;
}
.maxwordsLinks .uiIcon {
  width: 126px;
  height: 126px;
  border-radius: 0;
  margin-bottom:15px;
}

.cyanIcon {
background-color:#8fe6dd !important;
}

.maxmusicgameIcon {
background-repeat: no-repeat;
background-image: url("/static/mymax/img/maxmusic-game-icons.png") !important;
width: 107px !important;
height: 107px !important;
border-radius: 50% !important;
margin-bottom: 0;
display: block !important;
}
.maxbiosLinks .uiIcon {
width:97px;
height:97px;
background-repeat:no-repeat;
background-image:url("/static/mymax/img/1015/maxbios-icons.png") !important;
background-position: -2px 0px;
margin-bottom:1em;
}
.maxbiosLinks a span {
position:relative;
top:10px;
}
.maxbiosLinks a span.uiIcon {
position:static;
}
.latinrootsLink {
  background-position: -600px -15px;
}
.spellingIcon {
  background-position: 271px -15px;
}
.prefixesIcon {
  background-position: 302px -155px;
}
.cloverIcon {
  background-position: 400px -15px;
}
.maxguitarIcon {
      background-position: -172px 0px;
}
.pairsoundIcon {
background-position: -9px;
}
.gamesLinks .uiIcon {
border-radius:50%;
margin-bottom:5px;
display:inline-block !important;
}
.greekrootsLink {
  background-position: -580px -155px;
}
.gamesLinks span.definitionsLink {
  background-position: -1360px -468px;
background-color: #e41790 !important;
}
.gamesLinks span.hangmanLink {
  background-position: -1222px -468px;
background-color:#4472cf !important;
}

.gamesLinks span.wordsearchLink {
background-position: -1100px -594px;
background-color: #00ffcc !important;
}
.gamesLinks span.memoryGameLink {
background-position: -1106px -342px;;
background-color: #54d55f !important;
}
.gamesLinks span.wordBuilderLink {
      background-position: -966px -465px;
background-color: #87f8e7 !important;
}
.gamesLinks span.spaceRhymingLink {
      background-position: -1236px -348px;
background-color: #fe8c29 !important;
}
.gamesLinks span.wordsWithinWords {
      background-position: -1091px -462px;
background-color: #FDFF29 !important;
}
.gamesLinks span.maxPair {
background-position: -1218px -584px; 
background-color: #D672CF !important;
}
.coming-soon {
color: gray;
margin-top: 3em;
text-transform: uppercase;
letter-spacing: 8px;
}

@media (max-width:960px) {
	body {
	font-size:0.9em !important;
	}
}


/* HELP VIDEO */
.tutorial-controls {
background:transparent;
width: auto;
display: inline-block;
}
.video-tutorial table {
width: 100%;
  margin-top: 1em;
  max-width: 819px;
  display: inline-block;
}
.video-tutorial td {
width: 50%;
}
.video-tutorial .roundedButton {
margin:0 !important;
}
.controls-center {
width:auto;
}
.controls-center .roundedButton {
margin: 0 !important;
color: #333;
padding-top: 0 !important;
text-shadow:none;
}


/* MAXBIOS */
.mymaxContent h1.biosHeader {
	background:#37bfb0;
}
.maxbiosLinks a {
font-size:0.9em !important;
width:140px !important;
}
.entertainmentLink {
background-position: -160px 0px !important;
}
.peopleLink, .fascinating_peopleLink {
  background-position: -2px -284px !important;
}
.athletesLink, .star_athletesLink {
  background-position: -320px 0px !important;
}
.hiphopLink, .hip_hop_artistsLink {
background-position: 0px -150px !important;
}
.musiciansLink, .old_school_musiciansLink {
background-position: -160px -150px  !important;
}
.womenLink, .amazing_womenLink {
  background-position: -320px -148px !important;
}
.businessLink {
    background-position:-2px 0 !important;
}

/* PREFIXES SUFFIXES */

.choose-category {
    justify-content: center;
}
.choose-category div {
    display: flex;
    flex-wrap: wrap;
    width: 14em;
    align-items: center;
    justify-content: center;
    margin-right: 6em;
}
.choose-category span.category-description {
    text-align: left;
    margin-top: 1em;
    line-height: 1.5em;
}


.suffixesBtn svg {
transform:scale(-1, 1)
}

.prefixes-header.element-w-audio {
    padding-left: 10%;
    margin-top: -2em;
}
.prefixes-header .description {
  color: #8b9191;
  font-weight: normal;
  font-size: 1.1em;
  margin-bottom: 2em;
  text-align: left;
  margin-top: 2em;
  display: inline-block;
  max-width: 600px;
  font-size: 1em;
}


/* CLOVER & MAXWORDS & GENERAL */

/* NEW CLOVER STYLES */
.clover-menu-item polygon {
    transition:fill 1s ease;
}
.clover-menu-item {
    cursor:pointer;
}
.clover-menu-hover[data-menu-item='clover-c'] polygon, .clover-menu-item-selected[data-menu-item='clover-c'] polygon, .start-button-placeholder .clover-c use {
fill:#FFA900;
}
.clover-menu-hover[data-menu-item='clover-l'] polygon, .clover-menu-item-selected[data-menu-item='clover-l'] polygon, .start-button-placeholder .clover-l use {
fill:#FFDF5C;
}
.clover-menu-hover[data-menu-item='clover-o'] polygon, .clover-menu-item-selected[data-menu-item='clover-o'] polygon, .start-button-placeholder .clover-o use{
fill:#48CD32;
}
.clover-menu-hover[data-menu-item='clover-v'] polygon, .clover-menu-item-selected[data-menu-item='clover-v'] polygon, .start-button-placeholder .clover-v use, #double-vowels .clover-subgroup-items use {
fill:#ED7070;
}
#double-vowels a:hover use {
fill:#DD474F;
}
.clover-menu-hover[data-menu-item='clover-e'] polygon, .clover-menu-item-selected[data-menu-item='clover-e'] polygon, .start-button-placeholder .clover-e use {
fill:#0093D3;
}
.clover-menu-hover[data-menu-item='clover-r'] polygon, .clover-menu-item-selected[data-menu-item='clover-r'] polygon, .start-button-placeholder .clover-r use, #r-controlled-syllables .clover-subgroup-items use {
fill:#BD99EF;
}
#r-controlled-syllables a:hover use {
fill:#9b74d2;
}

.info-clover-actions {
min-height:14em;
}

.clover-menu {
display: flex;
padding-top: 2em;
flex-direction:row;
justify-content:center;
align-items:flex-start;
}
.clover-menu svg {
}
.clover-menu .info-clover {
    width: 25em;
    text-align: left;
    margin-left: 4em;
}
.clover-menu .info-clover h3 {
    text-align: left;
    font-weight: bold;
    text-transform: capitalize;
    padding-bottom: 1em;
    color: #604883;
    display: flex;
    align-items: center;
}
.clover-menu .clover-desc {
    min-height:5em;
}
.clover-menu .start-button-placeholder {
	margin-top:1em;
}
.clover-subgroup {
}

.clover-subgroup-items {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	margin-top: 2em;
	padding-left:3em;
}

.clover-score {
    display: flex;
    align-items: center;
    justify-content: space-between;
	margin-top:2em;
}

.clover-score-title {
	font-weight: bold;
	text-align: center;
	margin-bottom: 0.2em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
    background: #dbdbdb;
    width: 100%;
}
.clover-score-items {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	text-align: center;
    width: 100%;
}
.clover-score-item {
    display: flex;
    background: #e6e7e8;
    width: 51px;
    height: 79px;
}
.clover-score-redo .uiIcon {
margin:0;
}

.closed-syllables-score {
color:rgb(96,70,131);
}
.consonant-le-score {
color:rgb(106,78,145);
}
.open-syllables-score {
color:rgb(118,88,161);
}   
.double-vowels-score {
color:rgb(131,96,177);
}
.vowel-consonant-e-score {
color:rgb(141,104,191);
}
.r-controlled-syllables-score {
color:rgb(151,112,203);
}   
.clover-score-item {
    padding-left: 0.4em;
    padding-right: 0.4em;
}
.clover-score-letter {
    font-size: 1.5em;
    text-transform: capitalize;
    padding-top: 0.3em;
}
.clover-score-number {
    color: #009344;
    font-weight: bold;
    font-size: 1.2em;
    margin-top: 0.2em;
}
.clover-score-redo {
    margin-top:0.3em;
}
.review-actions {
    display: flex;
    margin-top: 2em;
    margin-bottom: 2em;
    justify-content: center;
}
.review-actions div {
    display: flex;
    flex-direction: column;
}
.review-actions span {
    color: rgb(96, 72, 131);
    font-weight: bold;
    font-size: 1.5em;
    padding-top: 0.5em;
}
.review-actions a {
	margin-right:1em;
}

/* END NEW CLOVER STYLES */

.exercise-indent {
padding-left:3em;
max-width:850px;
}
.exercises-header {
    display: flex;
    align-items: flex-start;
}
.exercises-header h2 {
flex:1;
}
.exercises-selector {
    font-size: 0.9em;
    display: flex;
    align-items: flex-start;
}
.exercises-selector a {
    margin-right: 2em;
}
.flexbox-outer .group-title {
    font-weight: normal;
    text-align: left;
    margin-bottom: 1em;
    padding-left: 2em;
}
h3.group-title {
    font-size:1.4em;
}
.group-title span {
    font-weight: bold;
    margin-right: 10px;
	text-transform:capitalize;
}
.chapter-info .group-title {
	margin-bottom:0;
    font-weight:bold;
}
.chapter-info-lower {
    margin-top:2em;
}

.group-description {
    margin-bottom: 1em;
    text-align: left;
    max-width: 710px;
}
.group-description p {
    padding-left: 2.5rem;
}
.group-instruction {
    padding-left: 2.5em;
    font-size: 1.1em;
    font-weight: bold;
}
.exercises-selector a {
    color:#656d7b;
}
.exercises-selector  a.active {
	color:#2EBCBC;
}
.only-rule-title p {
    font-size: 1.4em;
    padding-left: 2em;
}
p.instruction {
color:#B6388B;
text-align:left;
margin-bottom:1em;
}
.element-w-audio p.instruction, .element-w-audio p.group-description {
margin-bottom:0;
font-size:1.5em;
}
.element-w-audio p.group-description {
    font-size:1.2em;
}

.timer-container {
    display: flex;
    background: #F3E3D3;
    color: #58585B;
    margin-bottom: 1em;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-top: 1em;
    padding-bottom: 1em;
}
.timer-container .timer {
    margin-right: 1.5em;
    text-align: center;
	width:6.8em;
}
.timer-container .timerStart {
	min-width:0 !important;
}



.time-is-up {
    color: #B6388B;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 1.5em;
    font-size: 1.5em;
    margin-right: 1em;
}


/* END MAXWORDS STYLES */

.purpleButton {
background-color:#B6388B;
text-transform:none;
}
.pinkButton {
background-color:#ED7070;
text-transform:none;
}
/* NEW STYLES */
.innerHomeActions a {
display: inline-block;
  text-align: left;
  vertical-align: middle;
  margin-bottom: 10px;
}
.continueText {
  padding-left: 60px;
  color: #999;
}
.smallIcon {
  width: 36px;
  vertical-align: middle;
  height: 32px;
  display: inline-block;
  background: url(/static/mymax/img/mm-small-icons.png) scroll 0 0 no-repeat;
margin-right:5px;
}

.gamesSmall {
background-position: 0 -90px;
height: 25px;
}

.progressSmall {
  background-position: 0 -44px;
}

.mymaxPhonics {
    background-color:rgb(227,243,242);
}
.mymaxReading {
  background-color: rgb(195,196,226);
}
.mymaxBios {
  background-color: rgb(210, 238, 235);
}
.mymaxVocab {
  background-color: rgb(225,225,238);
}
.mymaxMusic {
  background-color: rgb(253,224,223);
}
.mymaxWords {
  background-color: rgb(207,231,243);
}



/* Wobble Vertical */
@-webkit-keyframes hvr-wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }

  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }

  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }

  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }

  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes hvr-wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }

  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }

  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }

  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }

  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.hvr-wobble-vertical {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.hvr-ipad-replace {
  display: inline-block;
  vertical-align: middle;
}
.hvr-wobble-vertical:hover, .hvr-wobble-vertical:focus, .hvr-wobble-vertical:active {
  -webkit-animation-name: hvr-wobble-vertical;
  animation-name: hvr-wobble-vertical;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Wobble Horizontal */
@-webkit-keyframes hvr-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }

  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }

  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }

  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }

  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes hvr-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }

  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }

  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }

  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }

  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.hvr-wobble-horizontal {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.hvr-wobble-horizontal:hover, .hvr-wobble-horizontal:focus, .hvr-wobble-horizontal:active {
  -webkit-animation-name: hvr-wobble-horizontal;
  animation-name: hvr-wobble-horizontal;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
/* Rotate */
.hvr-rotate {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-rotate:hover, .hvr-rotate:focus, .hvr-rotate:active {
  -webkit-transform: rotate(4deg);
  transform: rotate(4deg);
}



.arrow-up {
width: 0; 
height: 0; 
border-left: 15px solid transparent;
border-right: 15px solid transparent;
position:absolute;
bottom:0;
left:-10px;
}
.mymaxPhonics .arrow-up {
border-bottom: 15px solid rgb(227,243,242);
}
.mymaxReading .arrow-up {
border-bottom: 15px solid rgb(195,196,226);
}
.mymaxPlaces .arrow-up {
border-bottom: 15px solid rgb(250,241,213);
}
.mymaxBios .arrow-up {
border-bottom: 15px solid rgb(210, 238, 235);
}
.mymaxVocab .arrow-up {
border-bottom: 15px solid rgb(225,225,238); 
}
.mymaxMusic .arrow-up {
border-bottom: 15px solid rgb(253,224,223); 
}
.mymaxWords .arrow-up {
border-bottom:15px solid rgb(207,231,243);
}

/* SIDE NAVIGATION BAR */
body.whiteBody {
background:white;
}
.sideNavbar, .chooseExercise {
  display: table-cell;
  width: 265px;
  border-right: 1px solid #999999;
  vertical-align: top;
}
.flex-selection .chooseExercise {
display:block;
height: 100%;
position: absolute;
overflow-y: scroll;
}
.flex-selection .appContent {
    display: block;
    flex: 1;
    padding-left: 265px;
}

.mymaxInstructions {
top: 2em;
position: relative;
}

.mymaxInstructions, .appContent {
  display: table-cell;
  vertical-align: middle;
  text-align:center;
}

.appContent {
vertical-align:top;
}
.arrow {
background: url(/static/mymax/img/mymax-instruction-arrow.png) no-repeat scroll 0 0;
width: 56px;
height: 30px;
display: inline-block;
margin-right: 10px;
position: relative;
top: 10px;
}
.arrow.right {
background: url(/static/mymax/img/mymax-instruction-arrow-right.png) no-repeat scroll 0 0;
margin-left:10px;
}
.arrow.right.white {
background: url(/static/mymax/img/mymax-instruction-arrow-right-white.png) no-repeat scroll 0 0;
}
.arrow.left.white {
background: url(/static/mymax/img/mymax-instruction-arrow-white.png) no-repeat scroll 0 0;
}
.mymaxInstructions h4 {
  color: #999;
  font-weight: normal;
  text-align: left;
  font-size: 1.2em;
  padding-left: 1em;
  position: relative;
}


/* MAXVOCAB & MAXMUSIC */


.maxvocabButton, .maxButton {
color: #666;
display: inline-block;
font-size: 1.2em;
width: 185px;
text-align: center;
vertical-align: top;
}
.maxvocabButton span, .maxButton span{
display: inline-block;
width: 147px;
height: 146px;
margin-bottom:10px;
background-repeat:no-repeat;
}
.maxvocabButton span {
background: url(/static/mymax/img/maxvocab-icons.png);
}
.maxmusicButton span {
background: url(/static/mymax/img/maxmusic-icons.png);
}
.maxbvocabButton span {
background: url(/static/mymax/img/maxvocab-icons.png);
}
.maxmusicGamesButtons .maxvocabButton span {
    background: url("/static/mymax/img/1015/maxvocab-games-icons.png");
    background-size: cover;
}
.definitionsButton span {
    background-position: -200px 0 !important;
}
.wordsearchButton span {
    background-position: -395px 0 !important;
}
.maxmusicGamesButtons .maxguitarIcon span {
    background-position: -253px 0;
}

.vocabgamesButton span {
      background-position: -251px 0;
}
.musicgamesButton span {
      background-position: -253px 0;
}
.maxvocabButton div, .maxButton div{
font-size: 0.8em;
line-height:1.4em;
margin-top: 0.5em;
}
.gamesHeader {
width: 90px;
height: 90px;
display: inline-block;
margin-top: 12px;
text-align: center;
line-height: 110px;
background: url(/static/mymax/img/maxvocab-icons.png);
background-size:auto 100%;
background-position: -150px 0;
}
.mymaxMusic .gamesHeader {
background-image: url(/static/mymax/img/maxmusic-icons.png);
background-position: -155px 0;
}
.mymaxVocab .iconBack {
    background-color:rgb(100,83,163);
}
.mymaxMusic .iconBack {
    background-color:rgb(239,101,95);
}

/* LOADING */

#loading {
  text-align: center;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  vertical-align: middle;
  background: rgba(255,255,255,0.4);
  z-index: 999999;
}
#loading img {
position: relative;
top: 50%;
background-color: white;
border-radius: 50%;
padding: 1em;
}



/* INNER APPS */

.innerApp .mymaxMenu {
    display:none;
}


/* max alert */
.maxAlertObscure {
position: fixed;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.6);
width: 100%;
height: 100%;
z-index: 999999;
text-align:center;
display:table;
}
.maxAlertCenter {
display:table-cell;
vertical-align:middle;
}
.maxAlert {
  display: inline-block;
  background: white;
/*  min-width: 40%;*/
  padding: 2%;
  text-align: center;
}

.maxAlert a {
    margin-top:1em;
}

.action-button, .introjs-tooltipbuttons .introjs-button {
    min-width: 3em;
    display: inline-block;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    margin: 0 auto;
    text-align: center;
    color: white;
    border-radius: 1em;
    text-transform: uppercase;
    padding-left: 0.5em;
    font-size: 1.4em;
    padding-right: 0.5em;
}
.introjs-tooltipbuttons .introjs-button {
    margin-top:20px;
    padding-top: 0.5em !important;
        padding-bottom: 0.5em !important;

}

.maxAlert h1, .maxAlert h2, .introjs-tooltiptext h1 {
color: rgb(255,155,67);
text-align: left;
font-size: 1.2em;
}
.introjs-tooltiptext h1 {
margin-bottom: 1em;
font-size: 1em;
}
.maxAlert h3, .maxAlert h4 {
color: #808080;
text-align: left;
font-size: 1.2em;
font-weight:normal;
}
.maxAlert h4 {
margin-bottom:20px;
}

h1.word_title {
  text-transform: uppercase;
  font-size: 1.9em;
  font-weight: normal;
}
.maxAlert h2 {
      font-size: 1em;
}
.maxAlert p {
  text-align: left;
  font-size: 1.1em;
  margin-top: 10px;
}



.exerciseList {
    display: inline-block;
    vertical-align: top;
    padding:1em;
}
.exerciseList a {
    display: inline-block;
    text-align: center;
    font-size: 0.9em;
    width: 6em;
    vertical-align: top;
    color:#B3B3B3;
}
.exerciseList a.active {
    color:#2EBCBC;
}
.exerciseHeader .icon {
    background-image: url("/static/mymax/img/prefixes-icons.png");
    width: 50px;
    height: 50px;
    background-size: auto 100%;
    display: inline-block;
}
.breakIcon {
background-position: -238px 0;
}
.fillIcon {
background-position: -154px 0;
}
.matchIcon {
background-position: -78px 0;
}
.fill2Icon {
background-position: -541px 0;
}
.ultimateIcon {
background-position: -605px 0;
}
.inspiredIcon {
background-position: -472px 0;
}
.finalIcon {
background-position: -316px 0;
}
.quizIcon {
background-position: -1061px 0;
}

.breadcrumbsLevel {
    margin-left:1em;
}


.gamesApp {
    background:#f0f0f0;
}
.gamesApp .gamesLinks a {
      display: inline-block !important;
        margin-right: 1.5em;
        margin-left: 1.5em;
}
.gamesApp .gamesLinks .uiIcon {
      margin: 0;
        margin-bottom: 10px;
    }
.gamesApp .maxmusicgamesLink a {
margin-top:0;
}
.gamesApp .mymaxBox h2 {
  color: white;
  background: rgb(66,208,208);
  padding: 0.5em;
}
.gamesApp .mymaxInstructions {
display: block;
  position: static;
  margin-bottom: 27px;
  color: #333;
  font-size: 1.1em;
}

.green {
    color:green !important;
}
.red {
    color:red !important;
}
.passwordSuccess {
    padding:0.5em;
}


/* PROGRESS CHARTS */

.scoreBox {
display:inline-block;
margin-right:30px;
}
.scoreBoxFull {
margin-top:3em;
}
.scoreBox h2 {
text-align:left;
  background-color: lightgray;
  padding: 6px;
  color: white;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.mymaxProgress .iconBack {
  float: left;
  position: relative;
  top: -13px;
}


/* DEMO ES */

.esDemoPage .leftInfo {
width: 840px;
margin-right: 0;
}
.esDemoPage .mymaxNavigation a {
	display:inline-block;
	margin-right:4em;
}


/* NEW MYMAX 0117 */

.mymaxUser {
width:100%;
text-align:center;
padding-bottom:30px;
}
.welcomePage .mymaxUser, .demoPage .mymaxContent {
background: url(/static/mymax/img/0117/mymax-background.png) no-repeat scroll 0 0;
background-position: center 0;
background-size: initial;
min-height: 500px;
}
.demoPage {
background-color: rgba(213,222,226,0.5);
}
.welcomePage #inner_content {
background-color: rgba(213,222,226,0.5);
}
.innerBlock {
display:inline-block;
width:990px;
}

.earlyStart .mymaxMain, .programScreen .mymaxMain {
background-repeat:no-repeat;
background:url(/static/mymax/img/1015/early-start-bgr.jpg);
background-size:100% auto;
width:100%;
}

.readingScreen .mymaxMain {
background: url(/static/mymax/img/1015/k2-bgr.jpg);
background-size: 100% auto;
background-repeat:no-repeat;
color: white;
padding-bottom: 4em;
text-align: left;
}
.welcomePage .mymaxMain .innerBlock, .demoPage .mymaxMain .innerBlock {
background:none;
text-align: left;
padding-top: 2em;
}
.maxwordsScreen .mymaxMain {
background-image: url(/static/mymax/img/1015/maxwords-bgr.jpg);
}
.maxmusicScreen .mymaxMain {
background-image: url(/static/mymax/img/1015/maxmusic-bgr.jpg);
}
.maxvocabScreen .mymaxMain {
background-image: url(/static/mymax/img/1015/maxvocab-bgr.jpg);
}
.maxplacesScreen .mymaxMain {
background-image: url(/static/mymax/img/1015/maxplaces-bgr.jpg);
}
.maxbiosScreen .mymaxMain {
background-image: url(/static/mymax/img/1015/maxbios-bgr.jpg);
height:370px;
}
.maxbiosScreen {
padding-bottom:270px;
}
.readingScreen .mymaxMain {
text-align:center;
}
.k2 .mymaxMain h1, .guru .mymaxMain h1 {
    margin-left: 0;
    padding-left: 0;
    font-size: 2em;
    font-weight: normal;
    color: #4D4D4D;
    display: inline-block;
}
.demoPages .welcome-titles h1 {
font-size:1.3em;
}
.demoPages .welcome-titles h2 {
    font-size: 0.8em;
    margin-top: 8px;
}
.k2 .mymaxMain h1, .k2 .mymaxMain h2, .guru .mymaxMain h1, .guru .mymaxMain h2{
    margin-left: 0;
    padding-left: 0;
    display: flex;
    align-items: center;
}
.mymaxUser .welcome-titles {
    display: inline-block;
    vertical-align: top;
    padding-top: 1.5em;
    margin-left: -0.5em;
}
.k2 .mymaxMain h2, .guru .mymaxMain h2{
}

.programScreen .mymaxMain h1 {
color: white;
    text-shadow: 0 0 10px rgba(0,0,0,0.6);
    padding-left: 0;
    text-align: center;
    margin-top: 2em;
    width: 84%;
    margin-bottom: -80px !important;
}

.programTag {
    width: 180px;
    background-color: white;
    color: #5D5D5D;
    font-weight: bold;
    font-size: 0.9em;
    float: right;
    padding-top: 40px;
    padding-bottom: 20px;
}
.maxphonicsLogo {
background: url(/static/mymax/img/1015/maxphonics-logo-big.png);
}
.maxreadingLogo {
background: url(/static/mymax/img/1015/maxreading-logo-big.png);
}
.maxwordsLogo {
background: url(/static/mymax/img/1015/maxwords-logo-big.png);
}
.maxmusicLogo {
background: url(/static/mymax/img/1015/maxmusic-logo-big.png);
}
.maxvocabLogo {
background: url(/static/mymax/img/1015/maxvocab-logo-big.png);
}
.maxplacesLogo {
background: url(/static/mymax/img/1015/maxplaces-logo-big.png);
}
.maxbiosLogo {
background: url(/static/mymax/img/1015/maxbios-logo-big.png);
}
.mediumLogo, .largeLogo {
background-size:contain;
background-repeat:no-repeat;
}
.mediumLogo {
    width: 130px;
    height: 130px;
    display: inline-block;
    padding-bottom: 10px;
}
.largeLogo {
    width: 155px;
    height: 155px;
    display: inline-block;
    padding-bottom: 10px;
}
.programName {
    font-family: "litera-regularregular";
    font-size: 1.4em;
}
.programSubtitle {
display:block;
padding-top:5px;
}

.maxphonicsHost {
background: url(/static/mymax/img/1015/early-start-hostess.png) scroll 0 0 no-repeat;
width: 724px;
height: 390px;
margin-left: 130px;
margin-top: 200px;
margin-bottom: -4px;
}
.hostText {
    float: right;
    margin-top: 90px;
    width: 350px;
    height: 120px;
}
.hostText p  {
    color: #2EBCBC;
    font-size: 1.5em;
    margin-bottom: 25px;
}
.hostText a {
    font-size: 35px !important;
    font-weight: bold;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.earlyStart .world div {
    width: 100px;
    height: 100PX;
}
.earlyStart .future div {
    background-position: -135px 0;
}
.earlyStart .city div {
    background-position: -262px 0;
}
.earlyStart .city2 div {
    background-position: -386px 0;
}

.earlyStart .world h3 {
    font-size: 1em;
    color: #5D5D5D;
font-weight:bold;
}
.earlyStart .world h4 {
    font-size: 0.8em;
    margin-top: 5px;
    color:#999;
}
.earlyStart .world {
width: 115px;
margin-top: 0;
vertical-align: top;
}

.instructionsActions {
    display: table;
    margin: 0 auto;
    margin-bottom: 30px;
padding-top:40px;
padding-bottom:40px;
}
.instructionsActions .left, .instructionsActions .right {
    display: table-cell;
    vertical-align: middle;
}
.instructionsActions .left {
color:#808080;
text-align:left;
width:300px;
font-size:1.1em;
line-height:1.5em;
padding-top:20px;
padding-bottom:20px;
}
.instructionsActions p {
margin-left:30px;
}
.instructionsActions .right {
width:550px;
}
.lightBgr {
background-color:rgba(206,234,232,0.3);
}

.earlyGames a {
display: inline-block;
color: #808080;
width: 102px;
margin-right: 50px;
float:left;
margin-left:25px;
}
.iconGames, .iconChallenge {
width: 90px;
height: 90px;
background: url(/static/mymax/img/1015/games-challenge-icons.png);
display: inline-block;
background-position: -2px 0;
margin-bottom: 7px;
}
.iconChallenge {
background-position: -184px 0;
}

.k2 h3, .guru h3 {
font-weight:bold;
margin-top:2em;
}

.bigIcons {
margin-top:-2em;
}
.main-program-link {
    display: inline-block;
    width: 200px;
    margin-left: 20px;
    margin-right: 20px;
    vertical-align: top;
}
.secondary-program-link {
    width: 150px;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    margin-right: 2em;
    margin-left: 2em;
}
.worldData {
	text-transform:capitalize;
}
.bigIcons a.icon-link span {
font-family: "litera-regularregular";
color: #5d5d5d;
font-size: 1.5em;
}
.demoPage .bigIcons a.icon-link span {
font-size:1em;
}
.demoPage .demo-program {
    width: 1024px;
    background: #E2F3F2;
    margin: 0 auto;
    margin-top: 4em;
    padding-bottom: 2em;
}
.demoPage .closeProgram {
    display: block;
    float: right;
    color: darkgray;
    font-size: 1.8em;
    font-family: 'litera-regularregular', sans-serif;
    padding-right: 18px;
    padding-top: 5px;
}

.down-arrow {
float:left;
margin-top:20px;
}
.down-left-arrow {
    margin-left: 250px;
}
.down-right-arrow {
margin-left:370px;
}
.maxphonicsProgress {
border:4px solid #69CBCC;
    border-radius: 50%;
    overflow: hidden;
}
.maxreadingProgress {
    border: 4px solid #9B5BB8;
    border-radius: 50%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
.progressCircles a span {
    color: #5d5d5d;
    position: relative;
    font-size: 1.5em;
    top: 10px;
}

.pre-kProgress, .teenProgress, .blendsProgress, .digraphsProgress {
background:#43D1CD;
background-image:url(/static/mymax/img/1015/maxphonics-levels-big.png);
}
.pre-kProgress {
background-position: 32px 20px;
}
.teenProgress {
background-position: -270px 20px;
}
.blendsProgress {
background-position: -565px 20px;
}
.digraphsProgress {
background-position: -868px 20px;
}

.progressCircles h4 {
margin-top:20px;
color:#2EBCBC;
font-size:1.8em;
font-weight:bold;
}
.whiteButton {
    background-color: white;
    color: #999999 !important;
    padding-top: 10px !important;
    vertical-align: middle !important;
    display: inline-block !important;
    line-height: 31px !important;
    margin-top: 120px;
float:left;
}
.grayButton {
    background-color: #999;
    text-transform: none;
}
.whiteButton img {
float:left;
margin-right:15px;
}

.recommendedReading {
text-align:left;
}
.recommendedReading h1 {
padding-left:0;
font-size:2.2em;
}

.recommendedItem {
margin-top: 30px;
    display: inline-block;
    margin-right: 50px;
    text-align: center;
    color: white;
    font-size: 1.1em;
    width:190px;
}
.recommendedItem div {
margin-bottom:10px;
border: 5px solid white;
border-radius: 50%;
width: 181px;
height: 181px;
background-size: cover;
background-position: center center;
background-color: rgba(255,255,255,0.4);
}
.select-reading-level {
}

.chapterItem {
    color: #9B5BB8;
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
}
.chapterItem .roundedButton {
text-transform:none;
    background-color: #9B5BB8;
    margin-bottom: 7px;
}
.earlyStart .chapterItem {
color:#47c1cb;
font-weight:bold;
}
a.chapterItem.incompletePhonicsChapter.disable {
opacity: 0.6;
}
.earlyStart .chapterItem .roundedButton {
background:#47C1C8;
}

.guruMenu {
padding-bottom:30px;
}
.guruMenu h5 {
color:#5D5D5D;
font-size:1.3em;
margin-bottom:20px;
}
.linkTitle {
font-family:"litera-regularregular";
}

.readingScreenguru .levelButton, .readingScreenguru .levelLocked {
display: inline-block;
    padding-bottom: 0.4em;
    text-align: center;
    background: url(/static/mymax/img/reading-level-locks.png) no-repeat scroll 0 0 transparent;
    font-size: 1em;
    text-align: center;
    color: white;
    padding-top: 28px;
    width: 45px;
    margin-bottom: 1em;
    margin-right: 1.8em;
    font-weight: bold;
    background-size: cover;
    height: 23px;
}
.readingScreenguru .levelLocked {
    background-position: -68px 0;
}

.maxwordsLinks, .maxmusic a, .maxphonicsGames a {
    position: relative;
    top: 70px;
}

.maxmusic a {
top:100px;
}

.worldMap {
    position: absolute;
    margin: -150px auto;
    margin-left: 140px;
}
#mapBgr {
    background: url(/static/maxplaces/img/world-map.png);
    width: 700px;
    height: 500px;
    background-repeat: no-repeat;
}
.maxbiosLinks {
    position: relative;
    width: 80%;
}


.settingsApp h1 {
margin-top: 20px;
font-size: 2em;
}

.loading-progress {
background: url(/static/mymax/img/1015/ajax-loader.gif) no-repeat scroll center center transparent;
}

.maxphonicsGamesButtons .maxmusicButton span {
background: url(/static/mymax/img/1015/maxphonics-games-icons.png) no-repeat scroll 0 0 transparent;
    background-size: cover;
}
.maxphonicsGamesButtons .builderButton span {
background-position: -160px 0;;
}
.maxphonicsGamesButtons .spaceButton span {
    background-position: -325px 0;
}
.maxphonicsGamesButtons .withinButton span {
    background-position: -492px 0;
}
.gamesButton, .challengeButton {
	float:left;
}
.gamesButton {
	margin-left:0;
}

.gamesCont .maxmusic .maxmusicButton span {
background: url(/static/mymax/img/1015/maxmusic-games-icons.png);
background-repeat: no-repeat;
background-size:cover;
}
.gamesCont .maxmusic .maxguitarIcon span {
background-position: -204px 0;
}

.progressContainer {
color: #808080;
text-align: left;
font-size: 1.1em;
line-height: 1.5em;
padding-bottom: 20px;
width: 100%;
padding-left: 70px;
}
.progressContainer .scoreBox {
margin-left: 30px;
width: 660px;
}
.progressContainer p {
	margin-bottom:15px;
}
.progressContainer h2 {
	font-size:1em;
}


.readingTier {
    margin-bottom: 20px;
    box-shadow: 0 4px 20px #f0f0f0;
}
.readingTier .title {
font-weight: bold;
color: #909090;
margin-bottom: 15px;
padding-top: 10px;
}
.principiante {
}
.intermediate {
}
.advanced {
}
.readingTier .levelButton {
}

.phonicsLevelCont {
	display:none;
}
h3.phonicsLevel {
cursor: pointer;
box-shadow: 0 4px 20px #f0f0f0;
border-bottom: 1px solid;
padding: 10px;
margin-bottom: 14px;
width: 510px;
}
h3.phonicsLevel span {
font-size:0.7em;
}

/* PHONICS LEVEL COMPLETED */

.selectExercise.completed {
font-style: italic;
}
.selectExercise.completed .mmBgrColor {
background-image: url(/static/mymax/img/small-tick.png);
background-repeat: no-repeat;
background-position: 2px;
background-color: rgb(46,218,188);
}


/**/
.menuNoitems .chooseBgr {
    display:none !important;
}
.menuNoitems .chooseExercise {
width:145px !important;
}
.menuNoitems .worldImage {
margin-top:60px !important;
}


.maxwordsLinks .levelInactive .uiIcon {
-webkit-filter: grayscale(100%);
-moz-filter:    grayscale(100%);
-ms-filter:     grayscale(100%);
-o-filter:      grayscale(100%);
filter: gray; 
}




.ellTitle {
    display:none;
}
.ELL .ellTitle {
    display: inline-block;
    position: absolute;
    top: 0;
    text-align: center;
    width: 100%;
    padding-top: 0.5em;
    font-weight: bold;
    font-size: 1.1em;
    color: #285d86;
}
.ELL .ellDivision {
    display: inline-block;
    background: rgba(255,255,255,0.7);
    float: left;
    margin-left: 2em;
    border-radius: 1em;
    text-align: center;
    position: relative;
padding-top:1.5em;
margin-top:2em;
}

.maxwordsArrow {
width: 28px;
height: 72px;
position: absolute;
top: -47px;
background: url(/static/mymax/img/arrow-straight-down.png) no-repeat scroll -7px 0;
}

.fromPretest {
    margin-bottom: -30px;
    float: left;
    margin-top: -23px;
    text-align: center;
    width: 100%;
}
.fromPretest img, .fromPretest h1 {
    display: inline-block;
}
.programScreen .mymaxMain .fromPretest h1 {
    width: 64%;
    text-align: left;
    line-height: 1.6em;
    font-size: 2.1em;
    padding-top: 14px;
    padding-left: 0.5em;
    vertical-align: top;
}

/* FLEXBOX GENERAL STYLES */

.flexbox-outer {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;

	color:#808080;
}
.flexbox-inner {
	width:100%;
	max-width:990px;
	display:flex;
	padding:20px;
    min-width: 990px;
}
.flexbox-vertical {
	flex-direction:column;
}
.flexbox-horizontal {
	flex-direction:row;
}
.aligned-left {
	text-align:left;
}
.flexbox-inner h2 {
    color: #808080;
    display: flex;
    align-items: center;
    font-size: 1.3em;
    padding-bottom: 1em;
	padding-top:0;
}
.flexbox-inner .text {
	flex:1;
    padding-right: 3em;
    text-align: left;
    padding-left: 1em;
}


/* HEAR INSTRUCTIONS COMPONENT */

.hearInstructions {
padding:0.5em; 
color: #666;
margin-bottom:0.5em;
display:block;
position:relative;
}
.hearInstructions span.hinstC {
background: #b6378d; 
padding: 6px;
border-radius: 50%;
display: inline-block;
width: 21px;
height: 20px;
position:relative;
}
.hearInstructions span img {
position: absolute;
top: 9px;
left: 7px;
}
.hearInstructions span.hinstT {
position: absolute;
top: 15px;
margin-left: 10px;
}
.maxwordsApp .hearInstructions.inlineInstruction {
position: relative;
padding:0;
flex: 1;
margin-right: 9px;
}


/* FIXED ACTIONS (feedback, print, etc. buttons) */

.fixedAction {
position: fixed;
right: 0;
cursor: pointer;
z-index: 9999999;
width: 31px;
height: 30px;
text-align: center;
background-color: #b6378d;
font-weight: bold;
font-size: 19px;
border-radius: 8px 0 0 7px;
color: white;
}
.openFeedback {
top: 100px;
background-image: url(/static/base/images/chat.png);
background-position: -3px -5px;
}
.printPage {
top: 140px;
background-image: url(/static/base/images/print.png);
background-position: -4px -4px;
}

/* PRINT STYLES */

@media print {
    #top-bar-new-mymax, .fixedAction, .navigationMenu {
    display: none;
    }
}

/* SVG ICONS */

/* CODE THAT ENABLES CSS STYLING WITHIN USE TAGS */
svg .color-fill {
    fill: inherit;
}
use {
    transition:fill 1s ease;
}

.dont-render {
	position:absolute;
	height:0;
	width:0;
}
.icon-a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 1.1em;
}
.icon {
	fill:#000000;
	width:30px;
	height:30px;
	margin-right:10px;

	transition: all 0.5s ease;
}
.small-icon {
	width:20px;
	height:20px;
	margin-right:6px;
}
.icon-text {
}
.fixed-button {
    display:inline-block;
    position:relative;
}
.sm-fixed-button {
    width:145px;
}
.fixed-button span {
    color: white;
    font-weight: bold;
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    text-shadow: 0px 1px 4px rgba(0,0,0,0.5);
}
.sm-fixed-button span {
    top: 22%;
    font-size: 1.2em;
}
.l-fixed-button {
	width:165px;
}
.l-fixed-button span {
    top: 13%;
    font-size: 2em;
}
a.fixed-button.sm-fixed-button.chapterbutton {
margin-right: 2em;
width: 10em;
}

.bubble-button {
	display:inline-block;
	width:65px;
	height:65px;
	position:relative;
	margin:0;
	margin-right:10px;
	padding:0;
}

.bubble-button .bubble-icon {
    position: absolute;
    top: 10px;
	left: 0;
    height: 44px;
    width: 100%;
}
.bubble-button-small {
	width:35px;
	height:35px;
}
.bubble-button-smaller {
	width:25px;
	height:25px;
}
.bubble-button-small .bubble-icon {
	height:100%;
	top:0;
    left: 7px;
    width: 20px;
}
.bubble-button-smaller .bubble-icon {
height: 100%;
top:4px;
left: 5px;
width: 16px;
}
.bubble-button-big {
	width:90px;
	height:90px;
}
.bubble-button-big .bubble-icon {
    top: 26px;
    height: 39px;
}
.bubble-button use {
fill:#CD2F89
}
.bubble-button-blue use, .fixed-button-blue use {
	fill:#478ac9;
}
.bubble-button-blue:hover use, .bubble-button-blue.active use, .fixed-button-blue:hover use, .fixed-button-blue.active use {
	fill:#007ce2;
}
.bubble-button-green use, .fixed-button-green use {
	fill:#85a83d;
}
.bubble-button-green:hover use, .bubble-button-green.active use, .fixed-button-green:hover use, .fixed-button-green.active use {
	fill:#8bbc11;
}
.bubble-button-orange use, .fixed-button-orange use {
	fill:#f79a1f;
}
.bubble-button-orange:hover use, .bubble-button-orange.active use, .fixed-button-orange:hover use, .fixed-button-orange.active use {
	fill:#ff8500;
}
.bubble-button-brown use, .fixed-button-brown use {
	fill:#C2996B;
}
.bubble-button-brown:hover use, .bubble-button-brown.active use, .fixed-button-brown:hover use, .fixed-button-brown.active use {
	fill:#BC8146;
}
.bubble-button-purple use, .fixed-button-purple use, .purple-color {
	fill:#B15DA4;
	color:#B15DA4;
}
.bubble-button-purple:hover use, .bubble-button-purple.active use, .fixed-button-purple:hover use, .fixed-button-purple.active use {
	fill:#A53F99;
}
.bubble-button-red use, .fixed-button-red use {
	fill:#F3797A;
}
.bubble-button-red:hover use, .bubble-button-red.active use, .fixed-button-red:hover use, .fixed-button-red.active use {
	fill:#E05C63;
}
.disabled.bubble-button use {
  fill:#A7A9AB !important;
}

.big-round-button {
    width: 170px;
    display: inline-block;
    position: relative;
}
.big-round-button-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 70%;
    height: 170px;
    margin-left: 15%;
	transition:all 1s linear;
}
.big-round-button span {
	display:inline-block;
    margin-top: 0.5em;
	font-size:1.2em;
	font-weight:bold;
}

.big-round-button-purple, .big-round-button-purple use {
	color:#6858A5;
	fill:#6858A5;
}
.big-round-button-purple:hover use {
	fill:#4E40A0;
}
.big-round-buttonblue, .big-round-button-blue use {
	color:#1071B9;
	fill:#1071B9;
}
.big-round-button-blue:hover use {
	fill:#025F99;
}

/* MISC STYLES */

.element-w-audio {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 0.5rem;
    align-items: center;
    margin-bottom: 1em;
}
.element-w-audio .text-instruction{
    flex:1;
	padding-left:1rem;
	margin-bottom:0;
}

.box-title, .examples-container {
    width: 100%;
    max-width: 710px;

	border:1px solid #a4a1ca;
	padding: 0.4rem;
}
.box-title {
background: #a4a1ca;
color: white;
text-align: left;
font-size: 1.2em;
}
.examples-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 1rem;
	text-align:center;
}
.examples-container .eg {
    background: #a4a1ca;
    color: white;
    font-size: 1.6em;
    width: 9rem;
    margin-right: 1rem;
    display: flex;
    align-items: center;
	justify-content:center;
    margin-bottom: 0.8rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
}
.smaller-examples .eg {
    font-size:1em;
}

/* LIST SELECTION COMPONENT */
.list-selection-component {
    display:inline-block;
    max-width:990px;
    width:100%;
}
.list-selection-component h4 {
    padding-top:0.5em;
    margin-bottom: 0.5em;
    margin-top: 1em; 
    border-radius: 13px;
    display: flex;
    align-items: center;
    align-content: center;

    color: #808080;
    font-weight: bold;
}
.list-selection-component h4 .title-text {
    padding-left:2em;
}
.list-selection-component p.description {
    margin-top:1em;
}
.inline-title {
    font-size:1.2em;
    text-transform:uppercase;
    padding-bottom: 0.5em;
    display: inline-block;
}
.list-container {
    width: 90%;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    padding-left: 10%;
}
.list-container .list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #c9cbcb;
    margin-bottom: 0.3em;
    padding-top: 0.5em;
    padding-bottom: 0.2em;
}
.list-pin, .list-pin svg {
    width: 35px;
    height: 35px;
}

.list-item-main-link {
	width:70%;

    text-align: left;
    padding-left: 0.5em;
    font-weight: bold;
    color: #333;
    font-size: 1.2em;
    padding-bottom: 0.3em;
    padding-top: 0.3em;
    display: flex;
    align-items: center;

    transition: background-color 0.5s ease;
}
.list-item-new .list-item-main-link, .list-item-accordion-top .list-item-main-link {
	width:100%;
}

.list-item-main-link-disable, .list-item-main-link-disable a.list-item-main-link {
	cursor:default;
	color:#999;
}
.list-container .list-item-main-link:hover, .list-item-accordion-top:hover, .list-item-accordion-top.open {
    background-color: #e6e8e8;
    cursor:pointer;
}
.list-container .list-item-main-link-disable:hover, .list-item-main-link-disable a.list-item-main-link:hover, .list-item-accordion-top a.list-item-main-link:hover {
	background-color:transparent;
}

.list-element-name {
    padding-left:1em;
	padding-right: 1em;
}
.list-element-name.roundedButton {
    margin-left:0.7em;
}

.list-score {
	color: #959595;
	font-weight:bold;
	font-size:1em;
	width:15%;
}
.list-item-completed .list-score {
    font-size: 1.3em;
}
.list-item-new .list-score, .list-item-new .list-pin use {
	fill:#b6378d;
	color:#b6378d;
}

.completed-a-grade .list-score, .completed-a-grade .list-pin use {
	fill:#1aaa02;
	color:#1aaa02;
}

.completed-not-approved .list-score, .completed-not-approved .list-pin use  {
    fill:#d01919;
    color:#d01919;
}
.completed-approved .list-score, .completed-approved .list-pin use  {
    fill:#F49F2F;
    color:#F49F2F;
}
.list-item-incomplete, .list-item-incomplete .list-pin use {
    fill:#d01919;
    color:#d01919;
}
.list-item-incomplete .list-score {
    fill:#d01919;
    color:#d01919;
}


.list-item-actions {
    padding-left: 1.5em;
    padding-right: 1.5em;
	width:15%;
}
.list-item-actions a {
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    border-radius: 0.3em;

    transition: all 0.5s ease;
}
.list-item-actions a:hover {
background-color:#3fb4e5;
color:white;
}
.list-item-actions a:hover .icon use {
fill:#FFFFFF;
}

/* MAXPHONICS LIST SELECTION COMPONENT */

svg.locked-world, svg.approved-world{
display:none;
}
.locked-world svg.locked-world, .approved-world svg.approved-world {
	display:block;
    width: 40px;
    height: 40px;
    position: absolute;
    z-index: 999;
    margin-top: 70px;
    margin-left: 65px;
}
.approved-world svg.approved-world {
    margin-top: 16px;
    margin-left: 65px;
}

.list-item-accordion-top {
  transition:all 0.5s linear;
}
.list-selection-component .worldImage {
  width: 100px;
  height: 100px;
  margin-left: 1.1em;
  margin-right: 0.5em;
}
.list-selection-accordion h4 {
  font-weight: normal;
}
.list-selection-accordion h4 strong {
  font-size: 1.2em;
  padding-bottom: 0.1em;
  padding-left: 0.5em;
}
.list-selection-accordion h5 {
  display: flex;
  padding-left: 5.5em;
  align-items: center;
  color: #808080;
  font-weight: normal;
  margin-top: 1em;
  margin-bottom: 1em;
  font-size: 1.2em;
}
.list-component-subelement {
  max-height: 0;
  margin-top: -0.3em;
  overflow: hidden;
  transition: all 1s linear;
}
.list-component-subelement.open {
  max-height:100em;
}
.list-component-subelement .subelement-content {
  background-color: #e6e8e8;
  border-bottom: 1px solid #c9cbcb;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  padding: 1em;
}

.subelement-content a.exercise {
  display: flex;
  align-items: flex-end;
  color: #5D5D5D;
  font-size: 1.8em;
  border-bottom: 1px solid #989898;
  padding-bottom: 0.2em;
  margin-bottom: 0.3em;
  justify-content: flex-start;
  width: 10em;
  padding-left: 0.1em;
  padding-top: 0.2em;
  transition:all 0.5s linear;
}
.subelement-content a.exercise:hover {
  background-color: #D6D6D6;
}
.subelement-content a.exercise span {
  width: 4em;
  text-align: left;
}
.subelement-content a.exercise .list-pin {
  margin-right:0.8em;
}
.subelement-content .exercise-actions {
  font-size: 0.6em;
  color: #44B4E2;
  display: flex;
}
.subelement-content .exercise-actions use {
  fill: #44B4E2;
}
.subelement-actions {
margin-left: 3em;
}
.master-quiz-button {
  align-items: center;
  display: flex !important;
  margin-bottom: 0.5em;
}
.review-button {
    opacity:0.8;
    justify-content:center;
}
.master-quiz-button.disabled, .review-button.disabled {
  background:#D1D2D4 !important;
  color:#A7A9AB;
}
.master-quiz-button.disabled svg {
  opacity:0.3;
}


.list-item-locked a.exercise .lock-icon, .list-item-locked .list-item-main-link .lock-icon {
  display:inline-block;
}
.list-item-subelement a.exercise .lock-icon, .list-item-main-link .lock-icon{
  display:none;
}
.list-item-locked a.exercise .pin-icon, .list-item-locked .list-item-main-link .pin-icon {
display:none;
}
.list-item-locked .exercise-actions {
  display:none;
}

.list-item-locked a.exercise .lock-icon {
display:inline-block;
}
.list-item-locked .list-score {
    opacity:0;
}
.list-item-accordion-top.list-item-completed .list-score {
font-size:1em !important;
}

/* SVG ICONS PER APP STYLYING */

.maxwordsApp .icon use {
    fill: #3fb4e5;
}


@media (max-width:1030px) {
    .recommendedItem div {
        width: 111px;
        height: 111px;
        margin: 0 auto;
        margin-bottom: 10px;
    }
    .recommendedItem {
        font-size: 1em;
    }
	.recommendedReading h1 {
		font-size: 1em;
	}
	.readingScreen .whiteButton {
		margin-top: 50px;
	}
	.readingScreen .mediumLogo {
		width: 60px;
		height: 60px;
	}
	.readingScreen .mymaxMain {
		padding-bottom: 1em;
	}
}