/*add a little space to right of ibreve to accomodate the slash*/
.iPhonemeBump {
    padding-left:.1em;
}
.letterTile .handWritten {
    font-family:"HandText";
}

.fullScreen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 4em;
}
.hiddenBlock {
    display:none;
}
.continueBlock {
    position: absolute;
    bottom: 1em;
    left: 1em;
    right: 1em;
    text-align: center;
}
.continueButton {
    display: inline-block;
    clear: both;
}
.breakBlock {
    height:1em;
    clear:both;
}
.flexBlock {
    position: relative;
    width:100%;
    padding: 0;
    margin: 0;
    display: inline-block;
    float: left;
}
.flexBlockInline {
    position: relative;
    width: auto;
    padding: 0;
    margin: 0;
    margin-right:.5em;
    margin-left:.5em;
    display: inline-block;
    float:none;
}
.sortColumnBlock {
    border-left: dotted .5em #00a8b7;
    margin-left: -.75em;
    display: inline-block;
}
.sortColumnBlock:first-child {
    border-left: none;
    margin-left: 0;
}

.halfWidthCol {
    width:50%;
    height:30em;
    text-align:center;
    display:block;
    float:left;
}
.dotBulletNum {
	border-radius: 50%;
	background-color: #2eacbe;
	color: #fff;
	font-family: 'BodyText';
	font-size: 1.9em;
	width: 1em;
	height: 1em;
	padding: .1em;
	margin-top: .5em;
}
.letterTable {
	display:inline-block;
}
.circleWord {
    height:3em;
    width:3em;
    margin:.2em;
    display:inline-block;
    border-radius:50%;
    border:solid .15em #2eacbe;
    background-color:#fff;
    text-align:center;
    font-size:3em;
    line-height:3em;
    font-family:"DisplayText";
}

.circleWordBlock {
    display:block;
    text-align:center;
}

.circleWordInline {
    display:inline-block;
}


.checkBox {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding-bottom: 2em;
}
.checkMark {
    height: 12em;
    width: 12em;
    display: inline-block;
}
.checkTrue {
    background-image: url('../img/checkTrue.svg');
    background-size: 100% 100%;
    background-position: center center;
}
.checkFalse {
    background-image: url('../img/checkFalse.svg');
    background-size: 100% 100%;
    background-position: center center;
}
#titlePage #partTitle {
    font-family: 'DisplayText';
    font-size: 3em;
}


.letter {
    border-bottom:solid .08em rgba(0,0,0,1);
    /*padding-left:.05em;
    padding-right:.05em;*/
    width:100%;
    display:block;
}

.vowel {
    color:rgba(200,0,0,1);
    border-bottom:solid .08em rgba(200,0,0,1);
   /* padding-left:.25em;
    padding-right:.25em;*/
    display:block;
    width:100%;
}


.letterTileBack {
	display:inline-block;
    position:relative;
    margin:0;
    padding:0;
	margin-left: .25em;
    margin-right: .25em;
	cursor: pointer;
}

.blankLetter .letterTile{
    color:rgba(0,0,0,0);
    border: solid .05em rgba(0,0,0,0);
    background-color:rgba(0,0,0,0);
       /* box-shadow: .05em .05em .25em rgba(0,0,0,0);*/
}

.blankLetter .tileContent {
    border-bottom: solid .15em #c00;
}

.letterTile {
	display: block;
    position:relative;
	font-size:2em;
	height: 2em;
	width:1.5em;
	background-color: #fff;
	border: solid .02em rgba(0,0,0,.8);
	border-radius: .05em;
	/*box-shadow: .05em .05em .25em rgba(0,0,0,.5);*/
	cursor: pointer;
	text-align:center;
	line-height:1.8em;
	font-family:'DisplayText';
    z-index:2000;
}
.letterTileBackHead {
    display:inline-block;
    position:relative;
    top:-2.7em;
}

.letterTileBackUnderline {
    padding-bottom:.5em;
    border-bottom:solid .25em #c00;
}
.letterTileBackUnderlineHidden {
    border-bottom:solid .25em rgba(200,0,0,0);
}
.letterTileHead {
   	height: 2.75em;
	width:2em; 
    display:inline-block;
}
.letterTileHead span{
    position:relative;
    top:.15em;
   	font-size:1.75em;
}

.letterTileGreen {
	background-color:#0c0;
}
.letterTileBlue {
	background-color:#00c;
}
.letterTileRed {
	background-color:#f00;
}
.letterTileYellow {
	background-color:#ff0;
}
.letterTilePurple {
	background-color:#90c;
}
.letterTileOrange {
	background-color:#fa0;
}
.letterTileTeal {
    background-color:#0cc;
}
.letterTileCyan {
    background-color:#0ff;
}
.letterTileMagenta {
   background-color:#f0f; 
}
.letterTileChartruese {
   background-color:#cf0; 
}
.letterTileGray {
   background-color:#ccc; 
}

.letterTileLarge {
    font-size:3em;
}
.letterTileExtraLarge {
    font-size:5em;
}
.letterTileHidden {
    background-color:rgba(0,0,0,0);
}

/*Arrow stuff*/
.arrowBlock {
    width:auto;
    padding-bottom:6em;
    text-align:center;
    position:relative;
    display:inline-block;
}

.underArrow {
    width:3em;
    height:6em;
    position:absolute;
    left:0;
    bottom:0;
    background-image: url(../img/arrowUp.png);
    background-position:center 1em;
    background-size: 100% auto;
    background-repeat:no-repeat;
    display:none;
}
/*Image Styling*/
.imageLargeBox {
    position:absolute;
    top:4em;
    bottom:2em;
    left:2em;
    right:2em;
}

.imageLarge {
    height:90%;
    width:auto;
}
/* Heartword Styling*/
.heartWord {
	font-size:6em;
    /*font-family:'BoldText';*/
}

.heartWordBlock {
	position:relative;
	width:6em;
	height:2.5em;
	font-size:3em;
	text-align:center;
}
.heartWordBlockText {
	position:absolute;
	width:100%;
	text-align:center;
	font-size:1.5em;
}
.heartWordBlockTextMultiple {
	position:absolute;
	width:100%;
	text-align:center;
	font-size:1em;
}
.heartWordPop {
    display:inline-block;
    font-size: .75em;
    width:30%;
    
}
.heartWordPopText {
    display:none;
}

.heartWordHeart {
    color:#c00;
    background-image:url('../img/redHeart.svg');
    background-size:auto 18%;
    background-position:center 1.5em;
    background-repeat:no-repeat;
}

.heartWordHeartText {
 padding-top:2em;  
    padding-right:.5em;
    padding-left:.5em;
}
.heartWordInline {
    display:inline-block;
    font-size: .75em;
    padding-left:0em;
    padding-right:0em;
    margin-top:3em;
}
.heartWordHidden {
    color:rgba(0,0,0,0);
    background-image:none;
}
.stoplightGroup {
	/*border:solid 1px #000;*/
	border-radius:1em;
	padding:1em;
	margin-top:3em;
	width:auto;
	display:inline-block;
	clear:both;
}
.stoplight {
	display:inline-block;
	width:1.5em;
	height:1.5em;
	border:solid 1px #999;
	border-radius:50%;
	background-color:#fff;
	box-shadow:inset .25em .25em .25em rgba(0,0,0,.5);
	transition:all 1s 0s;
	background-repeat:no-repeat;
	background-size:90% auto;
	background-position:center center;
	margin-left:.5em;
	margin-right:.5em;
}
.stopRedOff {
	/*background-image:url(../img/ltsLookOff.png);*/
}
.stopYellowOff {
	/*background-image:url(../img/ltsThinkOff.png);*/
}
.stopGreenOff {
	/*background-image:url(../img/ltsSayOff.png);*/
}
.stopRed {
	background-color:#c00;	
	/*background-image:url(../img/ltsLookOn.png);
	border:solid 1px #000;*/
}
.stopYellow {
	background-color:#cc0;	
	/*background-image:url(../img/ltsThinkOn.png);
	border:solid 1px #000;*/
}
.stopGreen {
	background-color:#0c0;	
	/*background-image:url(../img/ltsSayOn.png);
	border:solid 1px #000;*/
}

/*Color block styling*/
.colorBlockPanel {
    position:absolute;
    top:4em;
    bottom:0;
    left:0;
    right:0;
    text-align:center;
    padding-top:8em;
}

.colorBlock {
    height:12em;
    display:inline-block;
    margin:1em;
    border-radius:1em;
    background-size: auto 90%;
    background-position: center center;
    background-repeat:no-repeat;
}

.smallBlock {
    width:12em;
}

.largeBlock {
    width:20em;
}

.blockGreen {
	background-color:#0c0;
}
.blockBlue {
	background-color:#00c;
}
.blockRed {
	background-color:#f00;
}
.blockYellow {
	background-color:#ff0;
}
.blockPurple {
	background-color:#90c;
}
.blockOrange {
	background-color:#fa0;
}


#CD005 .sortColumnBlock {
    font-size:.8em;
    padding-bottom:1em;
}

#CD005 .letter, #CD005 .vowel {
    padding-bottom:.20em;
}


#CD008 .letter, #CD008 .vowel {
    padding-bottom:.2em;
    padding-top:.5em;
    line-height: 1em;
}
#CD009 .letterTileBlock {
    font-size:2.75em;
    position:relative;
    left:-.25em;
    padding-bottom:1em;
}

#CD009 .hiddenIcon {
    opacity:0;
}

#CD009 .standardIcon {
    margin-left:.5em;
    margin-right:.5em;
}

/* for use in CD027*/
.iconTileContainer {
    display:inline-block;
    position:relative;
    margin:.75em;
    margin-top:1em;
    font-size:1.75em;
}
#CD027, #CD029, #CD040 {
    padding-top:4em;
}
#CD027 .standardIcon, #CD029 .standardIcon, #CD040 .standardIcon {
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    font-size:1.86em;
}

#CD027 .letterTileBack, #CD029 .letterTileBack, #CD040 .letterTileBack {
    position:relative;
    font-size:1.25em;
    margin:0;
}

#CD027 .letterTile, #CD029 .letterTile, #CD040 .letterTile {
    margin:.75em;
    margin-top:.5em;
    position:relative;
    z-index:0;
}

#CD033 .colLeft, #CD033 .colRight {
    padding:4em;
    text-align:center;
}

#CD038 .hiddenIcon {
    opacity:0;
}
#CD044 {
    text-align:center;
    font-size:1.2em; 
    padding-top:2em;
}

#CD044 .vertLine.hidden {
    border-left: solid .05em rgba(255,0,0,0);
}

#CD044 .circleText, #CD044 .underlineText {
    display:inline-block;
}
#CD044 .underlineText {
    margin-right:.05em;
    margin-left:.05em;
}
#CD044 .circleText.circleHidden {
    border:solid .05em rgba(255,0,0,0);
}

#CD044 .underlineText.underlineHidden {
    border-bottom:solid .05em rgba(255,0,0,0);
}

#CD044 .vertLine{
    height:1em;
    width:0em;
    border-left: solid .05em #7aad37;
    display:inline-block;
    position:relative;
    top:.3em;
    margin-right:.02em;
    margin-left:.02em;
}

#CD044 .charBlock {
    padding:0em;
    border:solid .05em rgba(255,255,255,0);
    display:inline-block;
    height:.9em;
    width:.9em;
    padding-bottom:0em;
    line-height: .75em;
}
#CD044 .circleText {
    border-radius:1em;
    border:solid .05em #c00;
}
#CD044 .underlineText {
    border-bottom:solid .05em 
}
#CD044 table {
    display:inline-block;
}
#CD044 table td {
    vertical-align: middle;
    padding:.5em;
    padding-right:0.75em;
    padding-left:0;
}
#CD044 table tr {
    border-bottom:solid .1em #2eacbe;
}
#CD044 table tr:last-child {
    border-bottom:none;
}
#CD044 table td:nth-child(2) {
    font-size:2em;
}
#CD044 table td:nth-child(n+2) {
    padding-right:1em;
}
#CD044 .standardIcon {
    border:solid .25em rgba(204,0,0,1);
    background-size: 112% 112%;
}
#CD044 .standardIcon.hiddenCircle {
    border:solid .25em rgba(204,0,0,0);
}

/*#CD044 .dotBulletNum {
	border-radius: 50%;
	background-color: #2eacbe;
	color: #fff;
	font-family: 'BodyText';
	font-size: 1.9em;
	width: 1em;
	height: 1em;
	padding: 0;
    margin-top:0;
}*/
#CD044 .dotBulletNum {
    font-size:1.4em;
    padding:.45em;
    text-align:center;
    display:inline-block;
    line-height:1.2em;
    width:1.2em;
    height:1.2em;
}

#CD045 table {
    margin-top:2em;
}
#CD045 td {
    vertical-align: middle;
    color:rgba(0,0,0,0);
}
#CD045 .radioLetterTile {
    transition: all .5s;
}
#CD045 .standardIcon {
    font-size:4em;
    margin-right:1em;
}

#CD045 .dotBulletNum {
    font-size:1.4em;
    padding:.45em;
    text-align:center;
    display:inline-block;
    line-height:1.2em;
    width:1.2em;
    height:1.2em;
}
/*Video Controls----------*/
.videoCopyright {
   padding-top:1em;
    color:#999;
}

.video {
     width:70%; 
    z-index:100000;
    position:relative;
}

video::-internal-media-controls-download-button {
    display:none;
}

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
}

.audio {
    position:absolute;
    bottom:.5em;
    left:25%;
    right:25%;
    width:50%;
}

.playButton {
    font-size:1.5em;
    background-color:#adcc3f;
    color:#fff;
    font-family:"DisplayText";
    padding:.5em;
    padding-right:1em;
    padding-left:1em;
    position:absolute;
    bottom:1em;
    right:4em;
    border-radius:.5em;
    cursor:pointer;
}

.nextButton {
    font-size:1.3em;
    background-color:#adcc3f;
    color:#fff;
    font-family:"BoldText";
    padding:.5em;
    padding-right:1em;
    padding-left:1em;
    position:absolute;
    bottom:.2em;
    right:1.5em;
    border-radius:.5em;
    cursor:pointer;
}

#nextButton {
    font-size:1.5em;
    background-color:#adcc3f;
    color:#fff;
    font-family:"DisplayText";
    padding:.5em;
    padding-right:1em;
    padding-left:1em;
    position:absolute;
    bottom:3em;
    right:1.5em;
    border-radius:.5em;
    cursor:pointer;
    z-index:3;
    display:none;
}