/* bg yellow #fac230 */
/* bg orange #f19554 */
/* bg blue #079dd1 */
/* bg blue #0085be */
/* light blue #2fa8b9 */
/* less light blue #0073aa */
@font-face {
  font-family: Sassoon;
  src: url('../fonts/sassoon/SassoonInfantCom-Regular.woff');
}
@font-face {
  font-family: Sassoon-Bold;
  src: url('../fonts/sassoon/SassoonInfantCom-Bold.woff');
}
@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,700,900&display=swap');

html, body{
    height: 100% !important;
    width: 100% !important;
    margin: 0;
    overflow: hidden;
    min-height: 660px;
    min-width: 1024px;
    position: relative;
}

* {
    font-family: 'Nunito', sans-serif;
}
#fullpage{
    width: 100%;
    height: 100%;      
}
.bookLink, .unit-group, .revision-link, .letter-box, .topic-link, .upButton, .homeButton, .opening-revision-link {
    cursor: pointer;
}

h1 {
    font-size: 5em;
    font-family: arial, helvetica;
    color: #fff;
    margin: 0;
    padding: 0;
}

.homeButton, .upButton{
    opacity: 0.8;
    transition: transform 200ms ease-in;
}
.homeButton:hover, .upButton:hover{
    opacity: 1;
    transform: scale(1.2);
}
.homeButton{
    margin-right: 20px;
}

.row {
    display:flex;
    flex-direction:row;
    /*margin-bottom: 0px;*/
}

.row-100{
    width: 100%;
    margin-bottom: 0px;
}

.row .col-md-3 {
    width:25%;
    padding: 16px;
}

.bookLink img {
    max-width:90%;
    height:auto;
    object-fit: contain;
    box-shadow:1px 1px 10px 5px rgba(255,255,255,0.5);
    transition: 300ms max-width ease-in-out;
}

.book{
    width: 100%;
    height: 100%;
    padding-top: 50px;
}

/* Centered texts in each section
* --------------------------------------- */

.section {
    text-align: center;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;     
}

/* Fixed header and footer.
* --------------------------------------- */

#header,
#footer {
    position: fixed;
    /* height: 50px; */
    display: flex;
    width: 100%;
    background: #333;
    z-index: 9;
    text-align: center;
    color: #fff;
    padding: 10px 0;
    justify-content: center;
    align-items: center;
}

#header {
    top: 0px;
}

#footer {
    bottom: 0px;
}

#moveUp {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    z-index: 5000;
    display: flex;
    justify-content: center;
    align-items: center;
}

#moveUp img {
    max-width:100%;
    height:auto;
}

#header {
    background: linear-gradient( #fac230 50% , #f19554 90%) !important;
    height: 50px;
    font-size: 25px !important;
    font-weight: bold;
    font-family: sans-serif;
    min-width: 1024px;
}
#header .logoContainer{
    position: absolute;
    top: 0;
    right: 10px;
    width: 100px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
img.navbar-brand {
    height: 40px;
    width: auto;
    padding: 0;
    margin: 0;
    /* top: 10px; */
}

#slide1 .intro .container{
    margin-bottom: 45px;
}

#header p {
    margin-block-start: 0;
    margin:0;
}

.intro .slp-text {
    font-size:22px;
    line-height:25px;
    color: #fff;
}

.mt-5 {
    margin-top:100px;
}

.slp-logo img {
    height:200px;
    margin-top:20px;
    width:auto;
    object-fit:contain;
}

.display-none {
    display: none !important;
}

.display-block {
    display: block;
}

.display-flex {
    display:flex !important;
    justify-content:center;
    align-items:center;
}

div#section0 {
    /*display:flex;
    flex-flow:column;
    padding-top: 75px;
    justify-content: center;*/
    background: linear-gradient(#079dd1, #0085be);
}
.container{
    min-width: 970px;
}
#section0 .fp-tableCell {
    /*padding-bottom: 30px;*/
}

/*div#section0 .bookLink.book3,
div#section0 .bookLink.book4{
    opacity: 0.3;
    pointer-events: none;    
}*/

.slp-logo {
    margin-bottom: 20px;
}

#section0 .col-md-3.bookLink:hover img {
    max-width: 100%;
}

#section1 .unit-group, .revision-link{
    transition:200ms transform ease-in-out;

}

#section1 .unit-group:hover, .revision-link:hover{
    transform:scale(1.1);
}

#section0 .row {
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    height: 250px;
}

#section0 .intro {
    height: 100%;
    display: flex;
    flex-flow: column;
    padding-top: 50px;
}

#section0 .intro .slp-text {
    display:flex;
    align-items: center;
    justify-content:center;
    max-height: 60px;
}

#section0 .intro .slp-text, #section0 .intro .slp-logo {
    flex:1 1 0px;
}

#section0 .intro .container {
    flex: 3 1 0px;
    display: flex;
    flex-flow: row;
    justify-content: center;
    /*margin-bottom: 50px;*/
    align-items: center;
}

div#section1 {
    background:linear-gradient(to bottom right, #2fa8b9, #0073aa);
}

.unit-link {
    padding: 4px;
    font-weight: 900;
    /*margin-top: 2em;*/
    border:3px solid white;
    border-radius:10px;
    font-size:18px;
    color:#fff;
    font-family: Sassoon;
}

.letter-links{
    font-family: Sassoon;
}



.revision-link {
    /*margin-top:2em;*/
    background-color:#d68935;
    /*border-top:2px solid #fff;
    border-bottom:2px solid #fff;*/
    border:3px solid white;
    border-radius:10px;
    /*padding:0.5em;*/
    font-size:50px;
    color:#fff;
    font-weight:bold;
    font-family: Sassoon;
    width: 470px;
}

.unit-link h4 {
    font-weight:bold;
}

.unit-1 .unit-link {
    background-color:#856597;
}

.unit-2 .unit-link {
    background-color:#cc6439;
}

.unit-3 .unit-link {
    background-color:#50a981;
}

.unit-4 .unit-link {
    background-color:#b1315c;
}

.unit-header {
    display: flex;
    flex-flow: row;
    max-width: 100%;
    height: 90px;
    align-items: center;
    color: #fff !important;
    font-family: Sassoon;
    padding-top: 15px;
    /*padding-left: 25px;
    padding-top: 25px;*/
}

.unit-header h2 {
    font-weight:bold;
    padding-left: 10px;
    font-size: 50px;
}
.unit-header > img {
    width: 105px;
    height:auto;
    /*margin-right:15px;*/
}

.justify-content-center {
    justify-content: center;
    align-items: center;
}

.unit, .topic {
    /*display: flex;
    flex-flow: column;*/
    /* background:linear-gradient(to bottom right, #5b9ad4, #569585); */
    /*min-width: 100%;
    min-height: 100%;*/
    padding-top: 50px;
    height: 100%;    
    width: 100%; 
}

.topic.revision {
    flex-flow: column;
    display: flex;
    background: #d68935 !important;
    height: 100%;     
}

.unit.main .unit-letters {
    /*flex: 1;*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /*padding-bottom: 40px;*/
    max-width: 100%;
    height: calc(100% - 90px);
    background-repeat: no-repeat;
    background-position: center;
}

.topic.revision .unit-letters {
    background-color:white !important;
    border-radius: 10px;
    /*width: calc(100% - 200px);*/
    width: 100%;
    padding: 5px 0;
    background-image: none !important;
    /*margin: 0 100px;*/
    /*height:100%;*/
}

.unit1.unit, .topic.unit1 {
    background:linear-gradient(to bottom right, #5b9ad4, #569585);
}

.unit2.unit, .topic.unit2 {
    background:linear-gradient(to bottom right, #569585 50%, #fac230);
}

.unit3.unit, .topic.unit3 {
    background:linear-gradient(to bottom right, #fac230 10%, #569585);
}

.unit4.unit, .topic.unit4 {
    background:linear-gradient(to bottom right, #fac230, #f19554);
}

.letter-box, .topic-link {
    background-color: #856597;
    color: white;
    height: 100px;
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: 10px;
    border: 3px solid #fff;
}

.topic-link {
    /* width: 30% !important; */
    margin: 15px 1%;
}

.letter-box {
    transition: 300ms transform ease-in-out;
    font-size: 140px;
    width: 130px;
    height: 130px;
    margin: 20px;
    font-family: 'Sassoon';
}

.letter-box.padding{
    padding-bottom: 70px;     
}

.unit1 .unit-letters, .unit1 .topic-activities{
    background-image: url("../images/unit1_bg.png");
    background-size: 100% auto;
}
.unit2 .unit-letters, .unit2 .topic-activities{
    background-image: url("../images/unit2_bg.png");
    background-size: auto 100%;
}
.unit3 .unit-letters, .unit3 .topic-activities{
    background-image: url("../images/unit3_bg.png");
    background-size: auto 100%;
}
.unit4 .unit-letters, .unit4 .topic-activities{
    background-image: url("../images/unit4_bg.png");
    background-size: auto 100%;
}
.unit1 .letter-box, .unit1 .topic-link {
    background-color:#856597;
}

.unit2 .letter-box, .unit2 .topic-link {
    background-color:#cc6439;
}

.unit3 .letter-box, .unit3 .topic-link {
    background-color:#50a981;
}

.unit4 .letter-box, .unit4 .topic-link {
    background-color:#b1315c;
}

.topic-title, .topic-link {
    /* width: 33%; */
    display: inline;
    order: 3;
    /* height: 100px; */
}

.topic-activities {
    padding-top: 0;
    display: flex;
    flex-wrap: nowrap;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    /*margin-bottom: 36px;*/
    height: calc(100% - 90px);
    background-repeat: no-repeat;
    background-position: center;
}

.topic-title {
    font-size: 300px;
    color: #fff;
    height: 312px;
    order: 2;
    /*line-height: 0.5em;*/
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 70px;
    font-family: Sassoon;
    text-shadow: 0 0 10px rgba(0,0,0,0.6);
}

.unit1.revision .topic-title{
    color: rgba(133,101,151,1);
}
.unit2.revision .topic-title{
    color: rgba(204, 100, 57, 1);
}
.unit3.revision .topic-title{
    color: rgba(80, 169, 129, 1);
}
.unit4.revision .topic-title{
    color: rgba(177, 49, 92, 1);
}
.unit1 .topic-title{
    text-shadow: -1px -1px 0px 3px rgba(133,101,151,1), 1px -1px 0px 3px rgba(133,101,151,1), -1px 1px 0px 3px rgba(133,101,151,1), 1px 1px 0px 3px rgba(133,101,151,1), 0px 0px 10px rgba(0,0,0,0.6);
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: rgba(133,101,151,1);
}
.unit2 .topic-title{
    text-shadow: -1px -1px 0px 3px rgba(204, 100, 57, 1), 1px -1px 0px 3px rgba(204, 100, 57, 1), -1px 1px 0px 3px rgba(204, 100, 57, 1), 1px 1px 0px 3px rgba(204, 100, 57, 1), 0px 0px 10px rgba(0,0,0,0.6);
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: rgba(204, 100, 57, 1);
}
.unit3 .topic-title{
    text-shadow: -1px -1px 0px 3px rgba(80, 169, 129, 1), 1px -1px 0px 3px rgba(80, 169, 129, 1), -1px 1px 0px 3px rgba(80, 169, 129, 1), 1px 1px 0px 3px rgba(80, 169, 129, 1), 0px 0px 10px rgba(0,0,0,0.6);
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: rgba(80, 169, 129, 1);
}
.unit4 .topic-title{
    text-shadow: -1px -1px 0px 3px rgba(177, 49, 92, 1), 1px -1px 0px 3px rgba(177, 49, 92, 1), -1px 1px 0px 3px rgba(177, 49, 92, 1), 1px 1px 0px 3px rgba(177, 49, 92, 1), 0px 0px 10px rgba(0,0,0,0.6);
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: rgba(177, 49, 92, 1);
}

.topic-title.no-padding {
    padding-bottom: 0px;
}
.topic-link:first-of-type {
    order: 1;
}

.topic-link {
    height: 140px;
    transition: 300ms transform ease-in-out;
    order: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    padding: 0 5px; 
}

.revision .topic-activities {
    /*background-color: #fff;
    width: auto;
    margin: 5px 15px;
    padding: 25px;*/
}

.revision .activities-wrapper{
    background-color: #fff;
    border-radius: 10px;
    padding: 10px 0;
    width: 100%;
}

.revision .topic-title, .revision .topic-link {
    /*height: 150px;
    margin: 15px auto;
    border-radius: 0;
    border: none;*/
}

.revision .topic-title {
    min-height: unset !important;
    height: 210px !important;
    margin: 15px 1%;
    color: #000;
    text-shadow: none;
    webkit-text-stroke-width: 0px !important;
    -webkit-text-stroke-color: transparent !important;
    font-size: 65px;
    padding-bottom: 0;
    letter-spacing: -4px;     
}

.revision .unit-letters .col-md-4:nth-child(2){
    /*margin-top: 130px;*/
}

.revision .topic-link{
    height: 210px;
    /*font-size: 30px;*/
}

.topic img {
    /*height: 100px;*/
}

#overlay {
	position: absolute;
	background: rgba(0,0,0,0.5);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	text-align: center;
	z-index: 9999;
	display: none;
}

.revision-group {
    /*flex: 1;*/
    display: flex;
    justify-content: center;
    align-items: center;
    /*padding-left: 25px;*/
    height: calc(100% - 90px);
}

.letter-box:hover {
    transform: scale(1.2);
}

.unit.book3.unit1 .letter-box:hover {
    transform: scale(1.1);
}

.unit.book3.unit3 .revision-link,
.unit.book3.unit3 .letter-box{
    width: 200px;
    margin: 0 20px;
    font-size: 40px;
    height: 100px;
}


.topic-link:hover {
    transform: scale(1.1);
}

div#x-button {
    cursor: pointer;
    position: absolute;
    left: 14px;
    top: 2px;
    color: #fff;    
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 300ms ease-in;
}



div#x-button:hover{
    transform: scale(1.1);
}

div#x-button img{
    width: 29px;
    margin-right: 5px;
}

div#x-button span{
    font-size: 23px;
}
.menuBar {
    color: white;
    font-size: 32px;
    display: flex;
    flex-flow: row;
    justify-content: flex-end;
    max-width: 100%;
    height: 90px;
    align-items: center;
    color: #fff !important;
    font-family: Sassoon;
}

.unitMenuBar {
    display: flex;
    flex: 1;
    align-self: center;
    flex-flow: row;
    justify-content: flex-end;
    /* margin-right: 100px; */
    font-size: 32px;
}

.unitMenuBar i, .menuBar .upButton i{
    margin-right: 0.5em;
}

div#overlay-group {
    transform: scale(0.9);
    transform-origin: center;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /*padding-right: 50px;*/
}

#overlay-group iframe{
    width: 100%;
    height: 100%;
    max-width: 1366px;
    max-height: 768px;
    box-shadow: 0 0 14px 3px rgba(0,0,0,0.9);
    border-radius: 15px;
    border: 3px solid #FFF;
}

.intro{
    height: calc(100% - 90px);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.book.book2 .unit-1 .unit-link {
    background-color:#7B6AA6;
}

.book.book2 .unit-2 .unit-link {
    background-color:#E5BA1F;
}

.book.book2 .unit-3 .unit-link {
    background-color:#90C23B;
}


.book.book3 .unit-1 .unit-link {
    background-color:#a65a8c;
}

.book.book3 .unit-2 .unit-link {
    background-color:#8bb6e3;
}

.book.book3 .unit-3 .unit-link {
    background-color:#7dc2cb;
}

.book.book3 .unit-4 .unit-link {
    background-color:#c94e57;
}


.book.book4 .unit-1 .unit-link {
    background-color:#06b699;
}

.book.book4 .unit-2 .unit-link {
    background-color:#ffc20e;
}

.book.book4 .unit-3 .unit-link {
    background-color:#b263a8;
}

.book.book4 .unit-4 .unit-link {
    background-color:#009591;
}


.book2.unit1 .letter-box, .book2.unit1 .topic-link {
    background-color:#7B6AA6;
}

.book2.unit2 .letter-box, .book2.unit2 .topic-link {
    background-color:#E5BA1F;
}

.book2.unit3 .letter-box, .book2.unit3 .topic-link {
    background-color:#90C23B;
}

.book2 .letter-box, .book2 .topic-link,
.book3 .letter-box, .book3 .topic-link {
    color: white;
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: 10px;
    border: 3px solid #fff;
}

.book2 .letter-box{
    transition: 300ms transform ease-in-out;
    font-size: 70px;
    width: 110px;
    height: 110px;
    margin: 0 20px;
    font-family: 'Sassoon';
}

.book3 .letter-box {
    transition: 300ms transform ease-in-out;
    font-size: 32px;
    width: 150px;
    height: 60px;
    margin: 0 20px;
    font-family: 'Sassoon';
}

.book2.unit2 .letter-box{
    width: 150px;
    height: 150px;
    font-size: 60px;
}

.book2.unit3 .letter-box{
    width: 220px;
    height: 100px;
    font-size: 60px;
}

.book2 .letter-title-container,
.book3 .letter-title-container{
    width: 100%;
    height: auto;
    min-height: auto;
    display: flex;
    margin-bottom: 10px;
}

.book2 .letter-title{
    font-size: 40px;
    font-family: 'Sassoon-Bold';
    color: #fff;
    /*border-radius: 10px;
    border: 3px solid #fff;*/
    padding: 0 10px;
    text-align: center;
}


.book3 .letter-title,
.book4 .letter-title{
    font-size: 40px;
    font-family: 'Sassoon-Bold';
    color: #fff;
    /*border-radius: 10px;
    border: 3px solid #fff;*/
    padding: 0 10px;
    text-align: center;
}

.book3.unit2 .letter-box{
    width: 250px;
    height: 120px;
}

.book3.unit2 .revision-link{
    width: 420px;
}


.book2.unit1 .letter-title{
   /* background-color: #9FC938;*/
}
.book2.unit2 .letter-title{
 /*   background-color: #81167B;*/
}
.book2.unit3 .letter-title{
 /*   background-color: #36A7E9;*/
}

.book2.unit2 .row,
.book2.unit3 .row{
    margin-bottom: 0px;
}

.book2.unit1.unit, .book2.unit1.topic {
    background:linear-gradient(to bottom right, #4538E8, #9FC938);
}

.book2.unit2.unit, .book2.unit2.topic {
    background:linear-gradient(to bottom right, #E5BA1F, #81167B);
}

.book2.unit3.unit, .book2.unit3.topic {
    background:linear-gradient(to bottom right, #81167B, #36A7E9);
}

.opening-revision-link {
    /*margin-bottom:1em;*/
    background-color:#d68935;
    /*border-top:2px solid #fff;
    border-bottom:2px solid #fff;*/
    border:3px solid white;
    border-radius:10px;
    /*padding:0.5em;*/
    font-size:40px;
    color:#fff;
    font-weight:bold;
    font-family: Sassoon;
    min-height: 49px;
    padding: 0 20px;
    transition: 300ms transform ease-in-out;
}

.book2 .unit-2 .opening-revision-link,
.book2 .unit-3 .opening-revision-link{
    visibility: hidden; 
    pointer-events: none;     
}

.book2.unit1 .unit-letters, 
.book2.unit1 .topic-activities{
    background-image: url("../images/book_b_unit1_bg.png");
    background-size: 100% auto;
}
.book2.unit2 .unit-letters, 
.book2.unit2 .topic-activities{
    background-image: url("../images/book_b_unit2_bg.png");
    background-size: auto 100%;
}
.book2.unit3 .unit-letters, 
.book2.unit3 .topic-activities{
    background-image: url("../images/book_b_unit3_bg.png");
    background-size: auto 100%;
}

.book3.unit1 .unit-letters, 
.book3.unit1 .topic-activities{
    background-image: url("../images/book_c_unit1_bg.png");
    background-size: contain;
}
.book3.unit2 .unit-letters, 
.book3.unit2 .topic-activities{
    background-image: url("../images/book_c_unit2_bg.png");
    background-size: contain;
    flex-direction: column;
}
.book3.unit3 .unit-letters, 
.book3.unit3 .topic-activities{
    background-image: url("../images/book_c_unit3_bg.png");
    background-size: contain;
}
.book3.unit4 .unit-letters, 
.book3.unit4 .topic-activities{
    background-image: url("../images/book_c_unit4_bg.png");
    background-size: contain;
    flex-direction: column;
}

.book4.unit1 .unit-letters, 
.book4.unit1 .topic-activities{
    background-image: url("../images/book_d_unit1_bg.png");
    background-size: contain;
}
.book4.unit2 .unit-letters, 
.book4.unit2 .topic-activities{
    background-image: url("../images/book_d_unit2_bg.png");
    background-size: contain;
    /*flex-direction: column;*/
}
.book4.unit3 .unit-letters, 
.book4.unit3 .topic-activities{
    background-image: url("../images/book_d_unit3_bg.png");
    background-size: contain;
}
.book4.unit4 .unit-letters, 
.book4.unit4 .topic-activities{
    background-image: url("../images/book_d_unit4_bg.png");
    background-size: contain;
    flex-direction: column;
}

.book2.revision .topic-title{
    font-size: 55px; 
}
.book2.unit.revision .unit-letters{
    background-image: none;   
}
.book2.unit1.revision .topic-title{
    color: #7B6AA6;  
    font-size: 130px;
}
.book2.unit2.revision .topic-title{
    font-size: 43px; 
    color: #E5BA1F;  
    height: 140px !important;
}
.book2.unit3.revision .topic-title{
    font-size: 55px; 
    color: #90C23B;  
}
.book2.unit1.main .topic-title{
    text-shadow: -1px -1px 0px 3px #7B6AA6, 1px -1px 0px 3px #7B6AA6, -1px 1px 0px 3px #7B6AA6, 1px 1px 0px 3px #7B6AA6, 0px 0px 10px rgba(0,0,0,0.6);
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: #7B6AA6;
    font-size: 250px;
}
.book2.unit2.main .topic-title{
    text-shadow: -1px -1px 0px 3px #E5BA1F, 1px -1px 0px 3px #E5BA1F, -1px 1px 0px 3px #E5BA1F, 1px 1px 0px 3px #E5BA1F, 0px 0px 10px rgba(0,0,0,0.6);
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: #E5BA1F;
    font-size: 135px;
    height: 155px;
}
.book2.unit3.main .topic-title{
    text-shadow: -1px -1px 0px 2px #90C23B, 1px -1px 0px 2px #90C23B, -1px 1px 0px 2px #90C23B, 1px 1px 0px 2px #90C23B, 0px 0px 10px rgba(0,0,0,0.6);
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #90C23B;
    font-size: 95px;
}

.book.book2 .unit-link{
    /*min-height: 130px;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    /*justify-content: center;*/
}

.book2 .unit-letters .row{
    margin-bottom: 0px;
}
.book2.unit1 .unit-letters div.row:nth-child(3){
     margin-bottom: 30px;
}
.book2 .revision-link{
    margin-top: 0px;
    background-color:#d68935;
    /*border-top:2px solid #fff;
    border-bottom:2px solid #fff;*/
    border:3px solid white;
    border-radius:10px;
    font-size:50px;
    color:#fff;
    font-weight:bold;
    font-family: Sassoon;
    padding: 0 20px;
    transition: 300ms transform ease-in-out;
    width: auto;
}

.book3 .revision-link,
.book4 .revision-link{
    margin-top: 0px;
    background-color:#d68935;
    /*border-top:2px solid #fff;
    border-bottom:2px solid #fff;*/
    border:3px solid white;
    border-radius:10px;
    font-size:40px;
    color:#fff;
    font-weight:bold;
    font-family: Sassoon;
    padding: 0 20px;
    transition: 300ms transform ease-in-out;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.book2 .revision-link:hover, .book2 .opening-revision-link:hover{
    transform: scale(1.1);
}
.book3 .revision-link:hover, .book3 .opening-revision-link:hover{
    transform: scale(1.2);
}

.book3.unit4 .revision-link,
.book3.unit4 .letter-box{
    height: 150px;
    margin: 0 20px;
    width: 200px;
}

.book2 .revision-title-container{
    width: 100%;
    height: auto;
    min-height: auto;
    display: flex;
    margin-bottom: 30px;
}

.book3 .revision-title-container,
.book4 .revision-title-container{
    width: 100%;
    height: auto;
    min-height: auto;
    display: flex;
    margin-bottom: 20px;
}

.book2.unit2 .unit-letters div.row:nth-child(2){
    margin-bottom: 30px;
}

.book2.unit2 .unit-letters .revision-link{
    width: 340px;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    margin: 0 20px;
}

.book2.unit3 .unit-letters .revision-link{
    width: 480px;
}

.book2.unit3 .unit-letters .row{
    margin-bottom: 30px;
}

.book2.unit3 .unit-letters div.row:nth-child(4){
    margin-bottom: 0px;
}

.book2.revision.topic .unit-letters{
    background-color: #FFF !important;
    background-image: none;
    border-radius: 10px;
    width: 100%;
    padding: 5px 0;
}

.book2.revision.topic {
    flex-flow: column;
    display: flex;
    background: #d68935 !important;
    height: 100%;
}

.book2.revision.topic .unit-letters .row{
    margin: 0px;
}

.book2.unit1.revision.topic .unit-letters .topic-link{
    flex: 1 1 0px;
    font-size: 30px;
}

.book2.revision.topic .unit-letters .topic-link{
    border: none;
}

.book2.unit1.topic6 .topic-link,
.book2.unit1.topic7 .topic-link,
.book2.unit1.topic8 .topic-link{
    height: 100px;
}

.book2.unit1.topic6 .topic-title{
    height: 215px;   
}

.book2.unit1.topic7 .topic-title,
.book2.unit1.topic8 .topic-title{
    height: 345px;   
}

.book2.unit2 .topic-link{
    height: 140px;
}

.book2.main.unit3.topic3 .topic-activities,
.book2.main.unit3.topic4 .topic-activities{
    flex-direction: column;
}
.book2.main.unit3.topic3 .topic-activities .topic-link,
.book2.main.unit3.topic4 .topic-activities .topic-link,
.book2.revision.unit3.topic1 .revision-group .topic-link{
    height: 140px;
    flex: 1 1 0px; 
}
.book2.main.unit3.topic3 .topic-activities .topic-title,
.book2.main.unit3.topic4 .topic-activities .topic-title,
.book2.revision.unit3.topic1 .revision-group .topic-title{
    height: auto;
    font-size: 150px;
    padding-bottom: 50px;
}

.book2.revision.unit1.topic1 .topic-link{
    margin: 15px 3%;
}

.no-padding{
    padding-bottom: 0px !important;
}

.disabled{
    pointer-events: none;
    opacity: 0.5;
}
.topic-hidden{
    visibility: hidden;
}

.topic.revision.book3.unit1.topic1 .row{
    margin-bottom: 10px;
}

.topic.revision.book3.unit1.topic1 .topic-link{
    height: 90px;
    margin: 5px 1%;
    min-width: 280px;
}

.topic.main.book3.unit1 .topic-title{
    font-size: 110px;
    padding-bottom: 25px !important;
    height: 100px;
}

.topic.main.book3.unit1 .topic-link{
    height: 80px;
    font-size: 25px;
}

.topic.revision.book3.unit1.topic2 .row,
.topic.revision.book3.unit1.topic4 .row{
    margin-bottom: 0;
}

.topic.revision.book3.unit1.topic2 .topic-link,
.topic.revision.book3.unit1.topic4 .topic-link{
    flex: 1 1 0px;
    font-size: 30px;
    margin: 15px 3%;
}

.topic.main.book3.unit1.topic6 .topic-title{
    height: 215px;
}
.topic.main.book3.unit1.topic6 .topic-link{
    height: 200px;
}

.topic.revision.book3.unit1.topic3 .topic-title,
.topic.revision.book3.unit1.topic3 .topic-link{
    height: 200px !important;
}

.topic.main.book3.unit1.topic7 .topic-title{
    font-size: 65px;
    line-height: 100px;   
    padding-bottom: 0 !important;
    height: 80px;
}

.topic.main.book3.unit2 .topic-title{
    font-size: 90px;
    line-height: 100px;
    padding-bottom: 0px !important;
    height: 120px;
}

.topic.revision.book3.unit1.topic2 .topic-title,
.topic.revision.book3.unit1.topic4 .topic-title{
    height: 90px !important;
    letter-spacing: normal;
}

.topic.revision.book3.unit1.topic2 .topic-link{
    height: 140px;
}

.topic.revision.book3.unit2.topic1 .topic-title{
    font-size: 62px;
    height: 275px !important;
}
.topic.revision.book3.unit2.topic1 .topic-link{
    height: 130px !important;
}

.topic.main.book3.unit3 .topic-link{
    height: 130px !important;
}

.topic.main.book3.unit3 .topic-title{
    height: 215px;
    font-size: 110px;
    padding: 0px;
}
.topic.main.book3.unit3 .topic-link{
    height: 200px !important;
}
.topic.revision.book3.unit3.topic1 .row{
    margin-bottom: 0px;
}
.topic.revision.book3.unit3.topic1 .topic-title{
    height: 90px !important;
    letter-spacing: normal;
    font-size: 80px;
}
.topic.revision.book3.unit3.topic1 .topic-link{
    height: 140px;
    flex: 1 1 0px;
    font-size: 30px;
    margin: 15px 3%;
}

.topic.main.book3.unit4 .topic-title{
    font-size: 90px;
    line-height: 100px;
    padding-bottom: 0px !important;
    height: 120px;
}

/*.topic.main.book3.unit4.topic4 .topic-title,
.topic.main.book3.unit4.topic5 .topic-title,
.topic.main.book3.unit4.topic6 .topic-title{
    height: 215px;
    line-height: 95px;
    font-size: 90px;
    padding-bottom: 0px;
}*/
.topic.main.book3.unit4.topic7 .topic-title{
    font-size: 70px;
}
/*.topic.main.book3.unit4.topic4 .topic-link,
.topic.main.book3.unit4.topic5 .topic-link,
.topic.main.book3.unit4.topic6 .topic-link,
.topic.main.book3.unit4.topic7 .topic-link{
    height: 200px;
}*/

.topic.revision.book3.unit4.topic1 .topic-title{
    height: 90px !important;
    letter-spacing: normal;
}
.topic.revision.book3.unit4.topic1 .row{
    margin-bottom: 0;
}
.topic.revision.book3.unit4.topic1 .topic-link {
    height: 140px;
    flex: 1 1 0px;
    font-size: 30px;
    margin: 15px 3%;
}
.book3.unit1 .letter-box,
.book3.unit1 .topic-link{
    background-color: #a65a8c;
}
.book3.unit2 .letter-box,
.book3.unit2 .topic-link{
    background-color: #8bb6e3;
}
.book3.unit2 .topic-link{
    height: 120px;
    flex: 1 1 0px;
}
.book3.unit3 .letter-box,
.book3.unit3 .topic-link{
    background-color: #7dc2cb;
}
.book3.unit4 .letter-box,
.book3.unit4 .topic-link{
    background-color: #c94e57;
}
.book3.unit4 .topic-link{
    height: 120px;
    flex: 1 1 0px;
}
.book3.main.unit1 .topic-title{
    text-shadow: -1px -1px 0px 2px rgba(166,90,140,1), 1px -1px 0px 2px rgba(166,90,140,1), -1px 1px 0px 2px rgba(166,90,140,1), 1px 1px 0px 2px rgba(166,90,140,1), 0px 0px 10px rgba(0,0,0,0.6);
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: rgba(166,90,140,1);
}
.book3.main.unit2 .topic-title{
    text-shadow: -1px -1px 0px 2px rgba(139,182,227,1), 1px -1px 0px 2px rgba(139,182,227,1), -1px 1px 0px 2px rgba(139,182,227,1), 1px 1px 0px 2px rgba(139,182,227,1), 0px 0px 10px rgba(0,0,0,0.6);
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: rgba(139,182,227,1);
}
.book3.main.unit3 .topic-title{
    text-shadow: -1px -1px 0px 2px rgba(125,194,203,1), 1px -1px 0px 2px rgba(125,194,203,1), -1px 1px 0px 2px rgba(125,194,203,1), 1px 1px 0px 2px rgba(125,194,203,1), 0px 0px 10px rgba(0,0,0,0.6);
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: rgba(125,194,203,1);
}
.book3.main.unit4 .topic-title{
    text-shadow: -1px -1px 0px 2px rgba(201,78,87,1), 1px -1px 0px 2px rgba(201,78,87,1), -1px 1px 0px 2px rgba(201,78,87,1), 1px 1px 0px 2px rgba(201,78,87,1), 0px 0px 10px rgba(0,0,0,0.6);
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: rgba(201,78,87,1);
}
.book3.revision.unit1 .topic-title{
    color: #a65a8c;
}
.book3.revision.unit2 .topic-title{
    color: #8bb6e3;
}
.book3.revision.unit3 .topic-title{
    color: #7dc2cb;
}
.book3.revision.unit4 .topic-title{
    color: #c94e57;
}
.book3.revision .topic-link{
    border: none;
}

.book3.unit1.unit, .book3.topic.unit1 {
    background: linear-gradient(to bottom right, #3180d4 30%, #7dc2cb);
}
.book3.unit2.unit, .book3.topic.unit2 {
    background: linear-gradient(to bottom right, #c94e57 50%, #a65a8c);
}
.book3.unit3.unit, .book3.topic.unit3 {
    background: linear-gradient(to bottom right, #3180d4 50%, #c94e57);
}
.book3.unit4.unit, .book3.topic.unit4 {
    background: linear-gradient(to bottom right, #8bb6e3 50%, #c94e57);
}


.book4.unit1 .letter-box,
.book4.unit1 .topic-link{
    background-color: #06b699;
}
.book4.unit1 .letter-box{
    flex: 1 1 0px; 
}
.book4.unit2 .letter-box,
.book4.unit2 .topic-link{
    background-color: #ffc20e;
}
.book4.unit2 .letter-box{
    flex: 1 1 0px; 
    font-size: 70px;
}
.book4.unit2 .topic-link{
    height: 100px;
    flex: 1 1 0px;
}
.book4.unit3 .letter-box,
.book4.unit3 .topic-link{
    background-color: #b263a8;
}
.book4.unit3 .letter-box{
    flex: 1 1 0px; 
    font-size: 33px;
}
.book4.unit4 .letter-box,
.book4.unit4 .topic-link{
    background-color: #009591;
}
.book4.unit4 .topic-link{
   /* height: 120px;*/
    flex: 1 1 0px;
}
.book4.unit4 .letter-box{
    flex: 1 1 0px; 
    font-size: 40px;
}
.book4.main.unit1 .topic-title{
    text-shadow: -1px -1px 0px 2px rgba(6,182,153,1), 1px -1px 0px 2px rgba(6,182,153,1), -1px 1px 0px 2px rgba(6,182,153,1), 1px 1px 0px 2px rgba(6,182,153,1), 0px 0px 10px rgba(0,0,0,0.6);
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: rgba(6,182,153,1);
}
.book4.main.unit2 .topic-title{
    text-shadow: -1px -1px 0px 2px rgba(255,194,14,1), 1px -1px 0px 2px rgba(255,194,14,1), -1px 1px 0px 2px rgba(255,194,14,1), 1px 1px 0px 2px rgba(255,194,14,1), 0px 0px 10px rgba(0,0,0,0.6);
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: rgba(255,194,14,1);
}
.book4.main.unit3 .topic-title{
    text-shadow: -1px -1px 0px 2px rgba(178,99,168,1), 1px -1px 0px 2px rgba(178,99,168,1), -1px 1px 0px 2px rgba(178,99,168,1), 1px 1px 0px 2px rgba(178,99,168,1), 0px 0px 10px rgba(0,0,0,0.6);
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: rgba(178,99,168,1);
}
.book4.main.unit4 .topic-title{
    text-shadow: -1px -1px 0px 2px rgba(0,149,145,1), 1px -1px 0px 2px rgba(0,149,145,1), -1px 1px 0px 2px rgba(0,149,145,1), 1px 1px 0px 2px rgba(0,149,145,1), 0px 0px 10px rgba(0,0,0,0.6);
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: rgba(0,149,145,1);
}
.book4.revision.unit1 .topic-title{
    color: #06b699;
}
.book4.revision.unit2 .topic-title{
    color: #ffc20e;
}
.book4.revision.unit3 .topic-title{
    color: #b263a8;
}
.book4.revision.unit4 .topic-title{
    color: #009591;
}
.book4.revision .topic-link{
    border: none;
    flex: 1 1 0px;
    font-size: 32px;
}

.book4.main.unit1 .letter-box{
    font-size: 100px;
}

.book4.revision.unit1.topic .row{
    margin: 0;
}
.book4.main.topic .topic-revision{
    height: 140px;
    font-size: 22px;
    padding: 0 5px;
    margin: 15px 1%;
    background-color: #d68935;
}
.book4.main.unit2.topic .topic-revision{
    height: 100px;
}

.book4.main.unit2.topic2 .topic-link,
.book4.main.unit2.topic4 .topic-link{
    height: 220px;
}
.book4.main.unit1.topic3 .topic-activities,
.book4.main.unit1.topic4 .topic-activities,
.book4.main.unit3 .topic-activities{
    flex-direction: column;
}
.book4.main.unit1.topic3 .topic-link,
.book4.main.unit1.topic4 .topic-link,
.book4.main.unit3 .topic-link,
.book4.main.unit4 .topic-link{
     flex: 1 1 0px;
}
.book4.main.unit1.topic3 .topic-title,
.book4.main.unit1.topic4 .topic-title{
    font-size: 200px;
    height: 210px;
}
.book4.main.unit2 .topic-title{
    font-size: 220px;
    height: 345px;
}
.book4.main.unit2.topic2 .topic-title{
    font-size: 180px;
    height: 235px;
} 
.book4.main.unit2.topic3 .topic-title{
    font-size: 120px;
    height: 230px;
}
.book4.main.unit2.topic4 .topic-title{
    font-size: 70px;
    height: 235px;
}
.book4.main.unit3 .topic-title,
.book4.main.unit4 .topic-title{
    font-size: 115px;
    height: 85px;
}