.featured-book-inner{
      position: relative;
  text-align: center;
  width:300px; 
  margin: 10px auto;
      color:#fff;
    font-size:2em;
    font-weight:bold;
}



.book-cover-text{
    
    
 position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.blankbookcover{
    
  display: flex;
  justify-content: center;
  align-items: center;
    width:80% !important;
    max-width:400px !important;
    height:400px;
    background-image: linear-gradient(180deg, teal, khaki);
    color:#fff;
    font-size:3em;
    font-weight:bold;
    
    margin:10px auto;
    
}


/* menu dots */
.phonicsdot a::before, .yellowdot a::before , .whitedot a::before, .reddot a::before, .bluedot a::before, .greendot a::before{
  
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.1);

   content: "";
   height: 40px ;
   width: 40px ;
   border-radius: 50%;
   display:inline-block;
   margin: 0 10px 0 0;
   top:14px;
   position: relative;
 /* border:#333 1px solid; */
}

.phonicsdot a::before{       background-image: linear-gradient(45deg, teal, khaki);}
.whitedot a::before{    background-color:#fff;}
.yellowdot a::before{    background-color:gold;}
.bluedot a::before{    background-color:blue;}
.greendot a::before{    background-color:green;}
.reddot a::before{    background-color:red;}


ul.sub-menu{
    width: 14em;  
    
}




.yellow{
    background-color:gold;
}
.white{
    background-color:#fff;
}
.orange{
    background-color:orange;
    
}
.phonics{
       background-image: linear-gradient(45deg, teal, khaki);
    
}


span.dot{
  height: 80px ;
  width: 80px !important;
  border-radius: 50%;
  display: inline-block;
  margin: 20px 10px 10px 10px !important;
 /* border: 1px solid #777; */
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.1);

}







.childpages{
     display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width:600px;

}
.childpages li{
    background-color:#FDF5E6;
    
        list-style: none;
    list-style-type: none;
    margin-bottom:10px;
    min-height:120px;
    min-width:100px;
    max-width:100px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.1);


}

.childpages a{
        text-decoration:none;
        width:100%;
        height:100%;
        display:inline-block;
}


.childpages h4{
    
    font-size:.8em;
    font-weight:normal;
    padding:5px;
    display:block;
    margin:0;
    
 
}
.thumbnaily{
    width:100px;
    height:auto;
    
}



#book{
    
     visibility: hidden;
     margin-bottom:100px;
     height:425px;
  
}

#book div{
    
    padding:0 !important;
}


.stf__block{
    
      pointer-events: none; 

}

.stf__item{
 pointer-events: auto;
}

.my-page{
    border: 1px solid teal;
    background-color:teal; 

    
} 
.btn-prev,.btn-next{
    background-color:teal;
    border-radius:3px; 
    padding:15px;
    
}

.bookimg {
    
 
 border-bottom:1px solid teal;  
    
}

 


.audio-btn{

    background-color:teal;
    border-radius:10px;  
    position:relative;
    z-index:100; 
   

}



.audio-btn-container{
   margin: 5px;
}

#site-content .audio-btn-wrapper{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width:600px;
}


.btn-prev:hover, .btn-next:hover, .audio-btn:hover{
    
    text-decoration:none;
    background-color:#66b2b2;

}

.audio-btn .dashicons{

    position:relative;
    z-index:-1; 

}

.audio-btn-wrap{
    
    width:300px;
    margin: 0 auto;
    
}