:root {
  --homeAnimMove: 50%;
  --homeAnimMove2: -55%;
}





body{
    color:black;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    overflow-x: hidden;
    margin: 0px;
    margin-top: 50px;
    padding: 0px;

}




table, th, td  {
  border-collapse: collapse;
  border: 1px solid;
}


.plus-jakarta sans-jakartaFont, body {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
  }

  .fredoka-Fredoka, #home-header-one {
    font-family: "Fredoka", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
  }



.forceNewLineAfter{
    width:100%;
    text-align: center;
}


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

.hide{
  display: none !important;
  color:green;
}

/*----------------------HOME PAGE STYLING------------------------*/

/*NAV BAR STYLING*/
#main-nav-bar{
position: fixed;
top: 0px;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    width: 80%;
    padding-left:10%;
    padding-right:10%;

    background-color:white;
    border-bottom: solid rgb(210, 210, 210) 1px;
    z-index: 10;
}


#nav-bar-left{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 33%;
    
    font-family: "Fredoka", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;

      font-size: 35px;
      transition: transform 0.1s ease-in-out;

}

#nav-bar-left:hover {
    color: rgb(255, 153, 0);
    transform: scale(1.02);

}

#logoContainer{
    background-color: rgb(255, 153, 0);
    border-radius: 100px;
    width: 40px;
    height: 40px;

    display: flex;
    justify-content: center;
    align-items: center;

    margin-right: 10px;
    transition: 0.2s ease-in-out;
}

#luathLogo{
    color:black;
    transform: rotate(-15deg);
}

#nav-bar-left:hover > :first-child{
    transform: scale(1.1) rotate(20deg);
}


#nav-bar-mid{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 33%;

}

.socialLogos{
    margin: 5px;
    transition: 0.1s ease-in-out;
}



.socialLogos:hover{
    filter: invert(75%) sepia(71%) saturate(4386%) hue-rotate(0deg) brightness(103%) contrast(107%);
    transform: scale(1.1);
}

.btnPointer{
    
    cursor: pointer;
}

#nav-bar-right{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 33%;
}









@media (max-width:480px)  {
  
  #nav-bar-left{
    font-size: 20px;
  }

  
#logoContainer{
  background-color: rgb(255, 153, 0);
  border-radius: 100px;
  width: 30px;
  height: 30px;

  display: flex;
  justify-content: center;
  align-items: center;

  margin-right: 10px;
  transition: 0.2s ease-in-out;
    }
  
    .socialLogos{
      width: 25%;
        transition: 0.1s ease-in-out;
    }
  
  
#nav-bar-right{
  display: none;
}
  
  }
  





/*HEADER STYLING*/


.text-bold{
    font-weight: 500;
}

.text-red{
    color: red;
}

.text-pink{
    color: rgb(255, 149, 220);
}


.text-blue{
  color: rgb(125, 147, 255);
}


.text-green{
  color: rgb(105, 246, 100);
}

.text-bold{
  font-weight: 500;
}


.text-larger{
    font-size: larger;
    margin-bottom: -10px;
}


#home-header-container{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;

}


#home-header-one{
    font-weight:600;
    font-size: 70px;

    margin:0px;
    margin-top:20px;
}

#home-header-two{
    font-weight:200;
    font-size: 20px;
}

#home-header-buttons{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
    font-size: 20px;
}


.largeBtn{
    cursor: pointer;
    border-radius: 100px;
    width: 250px;
    height: 80px;

    background-color: rgb(255, 153, 0);
    color: white;
    border:solid rgba(255, 153, 0, 0) 1px;

    margin: 10px;
    transition: 0.1s;

    font-size: 15px;

    font-family: "Fredoka", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;

      display: flex;
      flex-direction: column;
      align-items:center;
      justify-content: center;
}

.largeBtn:hover{


    color: rgb(255, 153, 0);
    background-color: white;
    border:solid rgba(255, 153, 0, 1) 2px;

    margin: 10px;  animation: wobble 1s ease;
}

@keyframes wobble {
    0%, 100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% -50%;
    }

    15% {
        -webkit-transform: translateX(-32px) rotate(-5deg);
        transform: translateX(-32px) rotate(-5deg);
    }

    30% {
        -webkit-transform: translateX(calc(32px / 2)) rotate(5deg);
        transform: translateX(calc(32px / 2)) rotate(5deg);
    }

    45% {
        -webkit-transform: translateX(calc(-32px / 2)) rotate(calc(-5deg / 1.8));
        transform: translateX(calc(-32px / 2)) rotate(calc(-5deg / 1.8));
    }

    60% {
        -webkit-transform: translateX(calc(32px / 3.3)) rotate(calc(5deg / 3));
        transform: translateX(calc(32px / 3.3)) rotate(calc(5deg / 3));
    }

    75% {
        -webkit-transform: translateX(calc(-32px / 5.5)) rotate(calc(-5deg / 5));
        transform: translateX(calc(-32px / 5.5)) rotate(calc(-5deg / 5));
    }
}
@keyframes hithereless {
  10% { transform: scale(1.1); }
  20%, 40% { transform: rotate(-1deg) scale(1.1); }
  30% { transform: rotate(1deg) scale(1.1); }
  50% { transform: rotate(0deg) scale(1.1); }
  80% { transform: scale(1); }
}
@keyframes hitheremed {
  10% { transform: scale(1.1); }
  20%, 40% { transform: rotate(-5deg) scale(1.1); }
  30% { transform: rotate(5deg) scale(1.1); }
  50% { transform: rotate(0deg) scale(1.1); }
  80% { transform: scale(1); }
}
@keyframes hithere {
  10% { transform: scale(1.1); }
  20%, 40% { transform: rotate(-10deg) scale(1.1); }
  30% { transform: rotate(10deg) scale(1.1); }
  50% { transform: rotate(0deg) scale(1.1); }
  80% { transform: scale(1); }
}

@keyframes pulse {
  from { transform: scale(0.95); }
  to { transform: scale(1.05); }
}


@keyframes bounce2 {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}





.generalBtn{
    cursor: pointer;
    border-radius: 100px;
    width: 90px;
    height: 40px;

    background-color: rgb(255, 153, 0);
    color: white;
    border:solid rgba(255, 153, 0, 0) 1px;

    margin: 5px;
    transition: 0.1s;
}

.generalBtn:hover{


    color: rgb(255, 153, 0);
    background-color: white;
    border:solid rgba(255, 153, 0, 1) 2px;
    transform: scale(1.01);

    margin: 5px;
}

.generalBtnLarger{
  cursor: pointer;
  border-radius: 100px;
  width: 150px;
  height: 60px;

  display: flex;
  justify-content: center;
  align-items: center;

  background-color: rgb(255, 153, 0);
  color: white;
  padding: 4px;
  border:solid white 2px;
  outline: 1px solid rgb(255, 153, 0);

  margin: 20px;
  transition: 0.1s;

  text-align: center;
  font-size: 18px;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
}

.generalBtnLarger:hover{


  color: rgb(255, 153, 0);
  background-color: white;
  padding: 3px;
  border:solid rgba(255, 153, 0, 1) 2px;
  transform: scale(1.01);

}
.homebtn{
    font-family: "Fredoka", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
}

/*-------BANNER STYLES*/
#home-banner-container{
    display: flex;
    width: 90vw;
    padding: 2px;
   /* background-image:linear-gradient(90deg, #d4dff7, #dcc8ff);*/
    background-image:linear-gradient(90deg, #ffca95, #ff9e4e );
    border-radius: 40px;
    margin-bottom: 200px;
    overflow: hidden;
}

.home-banner-slide{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    flex: 0 0 100%;  


    position: relative;
    animation-name: banner-slide-movement;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-delay: -3.0s;
    z-index: 1;
}

@keyframes banner-slide-movement {
    0%   {left:0%}

    29%   {left:0%}/*start move left*/
    36%  {left:-100%}/*end move left*/

    62%  {left:-100%}
    69% {left:-200%}

    92%  {left:-200%}
    99% {left:-0%}
  }

  @keyframes banner-phone-movement {
    0%   {transform:translateY(0%)}

    30%   {transform:translateY(0%)}/*move down and back up*/
    32%  {transform:translateY(100%)}
    36%  {transform:translateY(100%)}
    38%  {transform:translateY(0%)}

    63%   {transform:translateY(0%)}/*move down and back up*/
    65%  {transform:translateY(100%)}
    71%  {transform:translateY(100%)}
    72%  {transform:translateY(0%)}

    90%   {transform:translateY(0%)}/*move down and back up*/
    92%  {transform:translateY(100%)}
    99%  {transform:translateY(100%)}
    100%  {transform:translateY(0%)}

  }

  @keyframes banner-laptop-movement {
    0%   {transform:translateY(0%)}

    30%   {transform:translateY(0%)}/*move down and back up*/
    32%  {transform:translateY(-200%)}
    36%  {transform:translateY(-200%)}
    38%  {transform:translateY(0%)}

    60%   {transform:translateY(0%)}/*move down and back up*/
    62%  {transform:translateY(-200%)}
    71%  {transform:translateY(-200%)}
    72%  {transform:translateY(0%)}

    90%   {transform:translateY(0%)}/*move down and back up*/
    92%  {transform:translateY(-200%)}
    99%  {transform:translateY(-200%)}
    100%  {transform:translateY(0%)}

  }


  @keyframes banner-text-movement {
    0%   {transform:translateY(0%);color:rgba(214, 93, 0, 1)}

    30%   {transform:translateY(0%);color:rgba(214, 93, 0, 1)}/*move down and back up*/
    32%  {transform:translateY(-210%);color:rgba(214, 93, 0, 0)}
    36%  {transform:translateY(-210%);color:rgba(214, 93, 0, 0)}
    38%  {transform:translateY(0%);color:rgba(214, 93, 0, 1)}

    63%  {transform:translateY(0%);color:rgba(214, 93, 0, 1)}/*move down and back up*/
    65%  {transform:translateY(-210%);color:rgba(214, 93, 0, 0)}
    69%  {transform:translateY(-210%);color:rgba(214, 93, 0, 0)}
    70% {transform:translateY(0%);color:rgba(214, 93, 0, 1)}

    93%  {transform:translateY(0%);color:rgba(214, 93, 0, 1)}/*move down and back up*/
    95%  {transform:translateY(-210%);color:rgba(214, 93, 0, 0)}
    99%  {transform:translateY(-210%);color:rgba(214, 93, 0, 0)}
    100% {transform:translateY(0%);color:rgba(214, 93, 0, 1)}
  }


  @keyframes banner-text-movement-two {
    0%   {transform:translateY(0%);color:rgba(214, 93, 0, 1)}

    30%   {transform:translateY(0%);color:rgba(214, 93, 0, 1)}/*move down and back up*/
    32%  {transform:translateY(110%);color:rgba(214, 93, 0, 0)}
    36%  {transform:translateY(110%);color:rgba(214, 93, 0, 0)}
    38%  {transform:translateY(0%);color:rgba(214, 93, 0, 1)}

    63%  {transform:translateY(0%);color:rgba(214, 93, 0, 1)}/*move down and back up*/
    65%  {transform:translateY(110%);color:rgba(214, 93, 0, 0)}
    69%  {transform:translateY(110%);color:rgba(214, 93, 0, 0)}
    70% {transform:translateY(0%);color:rgba(214, 93, 0, 1)}

    93%  {transform:translateY(0%);color:rgba(214, 93, 0, 1)}/*move down and back up*/
    95%  {transform:translateY(110%);color:rgba(214, 93, 0, 0)}
    99%  {transform:translateY(110%);color:rgba(214, 93, 0, 0)}
    100% {transform:translateY(0%);color:rgba(214, 93, 0, 1)}
  }



.home-banner-imgContainer{
    display: flex;
    width: 100%;
    z-index: 2;
}


.home-banner-img-noanim{
    color: black;
    width: 90%;
    margin-left: -90%;
    padding: 0px;
}
.home-banner-img-left{
    color: black;
    width: 90%;
    margin-left: -90%;
    padding: 0px;
    animation-name:  banner-phone-movement;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-delay: -3.0s;
}
.home-banner-img-right{
    color: black;
    width: 90%;
    margin-left: -86%;
    padding: 0px;
    animation-name:  banner-laptop-movement;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-delay: -3.0s;
}

.home-banner-img-background{
    color: black;
    width: 90%;
    margin: 0px;
    padding: 0px;
}

.home-banner-text-left{
    color:rgb(214, 93, 0) ;
    position: absolute;
    top: 5%;
    left: 15%;
    width: 30%;
    min-height: 100px;
    animation-name:  banner-text-movement;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-delay: -3.0s;
    z-index: 4;
    }

    .home-banner-text-right{
        color:rgb(214, 93, 0) ;
        position: absolute;
        top: 18%;
        left: 52%;
        width: 30%;
        min-height: 100px;
        animation-name:  banner-text-movement-two;
        animation-duration: 20s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        animation-delay: -3.0s;
        z-index: 4;
        }
    
    #banner-title{
        font-family: "Fredoka", sans-serif;
        font-weight:600;
        font-size: 50px;
    }
    
    #banner-main{
        font-weight:300;
        font-size: 30px;
    }







    :root {
      --color-darkblue: rgb(14, 14, 89);
      --color-blue: #83af9b;
      --color-green: #c8c8a9;
      --color-brown: #774f38;
      --color-beige: #ece5ce;
      --color-yellow: #f9cdad;
      --color-pink: #fe4365;

      --circleDistance:min(200px,30vw);
      --circleDia:min(100px,20vw);
      --circleAnimDelay:1s;
 
  --time: 0.8s;
  --delay:0.1s;
  --time2: 2.3s;
  --delay2:0.1s;
}










    /*SQUIRREL*/
    
    

#squirrel_container{
  width: 400px;
  height: 400px;
  max-width: 100vw;
  zoom: 0.7;
  position: relative;
  top:30%;
  margin-left: -30%;
  justify-self: center;
  z-index: 5;
}











#book1{
  width: 80px;
  position: absolute;
  top:-100px;
  left: 200px;
  /* Animation added */
  animation-name: bookRotate1Ani;
  animation-duration: 8.2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: -30px 300px;
  display: inline-block;
  /* <--- */
}

#book2{
  width: 80px;
  position: absolute;
  top:-70px;
  left: 0px;
  /* Animation added */
  animation-name: bookRotate1Ani;
  animation-duration: 7.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: 200px 270px;
  display: inline-block;
  /* <--- */
}
#book3{
  width: 80px;
  position: absolute;
  top:-70px;
  left: 250px;
  /* Animation added */
  animation-name: bookRotate1Ani;
  animation-duration: 8.4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: -50px 270px;
  display: inline-block;
  /* <--- */
}
#book4{
  width: 80px;
  position: absolute;
  top:0px;
  left: 400px;
  /* Animation added */
  animation-name: bookRotate1Ani;
  animation-duration: 9s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: -190px 220px;
  display: inline-block;
  /* <--- */
}

#pencil{
  width: 80px;
  position: absolute;
  top:-70px;
  left: 250px;
  /* Animation added */
  animation-name: bookRotate2Ani;
  animation-duration: 8.7s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: -60px 300px;
  display: inline-block;
  /* <--- */
}

@keyframes bookRotate1Ani {
  0% {
      rotate: 0deg;
  }
  50% {
    rotate: 180deg;
}
100% {
  rotate: 360deg;
}
}

@keyframes bookRotate2Ani {
  0% {
      rotate: 0deg;
  }
  50% {
    rotate: 190deg;
}
100% {
  rotate: 360deg;
}
}






#shadow{
  position: absolute;
  left: 50px;
  top: 400px;
  color:#58585800;
  background-color: #58585877;
  border-radius: 100%;
  width: 300px;
  box-shadow: 0 0 15px 20px #58585877;
  z-index: -3;
}









#tail{
  width: 130px;
  position: absolute;
  top:60px;
  left: 200px;
  /* Animation added */
  animation-name: tailAni;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  transform-origin: 10% 90%;
  display: inline-block;
  /* <--- */
}
#body{
  width: 200px;
  position: absolute;
  top:100px;
  left: 100px;
  /* Animation added */
  animation-name: bodyAni;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: 50% 95%;
  display: inline-block;
  /* <--- */
}


#arm_r{
  width: 100px;
  position: absolute;
  top:80px;
  left: 200px;
  /* Animation added */
  animation-name: armAniR;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  transform-origin: 5% 70%;
  display: inline-block;
  /* <--- */
}
#arm_l{
  width: 100px;
  position: absolute;
  top:80px;
  left: 60px;
  /* Animation added */
  animation-name: armAniL;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  transform-origin: 95% 70%;
  display: inline-block;
  /* <--- */
}
#leg_r{
  width: 50px;
  position: absolute;
  top:310px;
  left: 210px;
}
#leg_l{
  width: 50px;
  position: absolute;
  top:320px;
  left: 110px;
}

#mouth{
  width: 35px;
  position: absolute;
  top:115px;
  left: 150px;
  /* Animation added */
  animation-name: mouthAni;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: 50% 0%;
  display: inline-block;
  /* <--- */
}

@keyframes mouthAni {
  0% {
      translate: -4px 0px;
      rotate: -4deg;
  }

  0%,10%,60%,70% {
    scale: 100% 100%;
}  
5%,65% {
  scale: 100% 40%;
}


  25% {
    translate: 3px -3px;
    rotate: 0deg;
  }
  35% {
    rotate: 4deg;
  }
  50% {
    translate: 12px -3px;
    rotate: 0deg;
  }
  65% {
    rotate: 4deg;
    translate: 12px 0px;
  }
  75% {
    translate: 10px 0px;
    rotate: 0deg;
  }
  100% {
    translate: -4px 0px;
    rotate: -4deg;
  }
}








#nose{
  width: 100px;
  position: absolute;
  top:-14px;
  left: 120px;
  /* Animation added */
  animation-name: headAni;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: 50% 100%;
  display: inline-block;
  /* <--- */
}
#head{
  width: 100px;
  position: absolute;
  top:-14px;
  left: 120px;
  /* Animation added */
  animation-name: headAni;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: 50% 100%;
  display: inline-block;
  /* <--- */
}

@keyframes headAni {
  0% {
      translate: -5px 0px;
      rotate: -3deg;
      scale: 100%;
  }
  25% {
    translate: 0px -3px;
    rotate: 0deg;
    scale: 96%;
  }
  35% {
    rotate: 2deg;
  }
  50% {
    translate: 8px -3px;
    rotate: 4deg;
    scale: 90%;
  }
  65% {
    rotate: 2deg;
    translate: 8px 0px;
  }
  75% {
    translate: 6px 0px;
    rotate: 0deg;
    scale: 95%;
  }
  100% {
    translate: -5px 0px;
    rotate: -3deg;
    scale: 100%;
  }
}


#eyelids{
  width: 86px;
  position: absolute;
  top:76px;
  left: 125px;
  /* Animation added */
  animation-name: eyelidsAni;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: 50% 0%;
  display: inline-block;
  /* <--- */
}


@keyframes eyelidsAni {
  0% {
      translate: -8px 0px;
      rotate: -4deg;
      scale: 90% 0%;
  }

  20% {
    scale: 90% 0%;
  }
  24% {
    scale: 90% 80%;
  }
  28% {
    scale: 90% 0%;
  }
  32% {
    scale: 90% 80%;
  }
  36% {
    scale: 90% 0%;
  }


  70% {
    scale: 90% 0%;
  }
  74% {
    scale: 90% 80%;
  }
  78% {
    scale: 90% 0%;
  }
  82% {
    scale: 90% 80%;
  }
  86% {
    scale: 90% 0%;
  }


  25% {
    translate: 0px -3px;
    rotate: 0deg;
  }
  35% {
    translate: 8px -3px;
    rotate: 4deg;
  }
  50% {
    translate: 8px -3px;
    rotate: 0deg;
    scale: 100% 0%;
  }
  65% {
    translate: 12px 2px;
    rotate: 4deg;
  }
  75% {
    translate: 8px 0px;
    rotate: 0deg;
    scale: 100% 0%;
  }
  100% {
    translate: -8px 0px;
    rotate: -4deg;
    scale: 100% 0%;
  }
}

@keyframes tailAni {
  0% {
      translate: 0px 0px;
      rotate: -5deg;
      scale: 100%;
  }
  25% {
    translate: 0px -3px;
  }
  35% {
    rotate: 10deg;
    scale: 101%;
  }
  45% {
    translate: 3px -3px;
    rotate: 7deg;
    scale: 103%;
  }
  55% {
    rotate: 12deg;
    scale: 101%;
  }
  75% {
    translate: 3px 0px;
  }
  100% {
    translate: 0px 0px;
    rotate: -5deg;
    scale: 100%;
  }
}


@keyframes bodyAni {
  0% {
      translate: 0px 0px;
      rotate: -2deg;
      scale: 102%;
  }
  25% {
    translate: 0px -3px;
    rotate: 0deg;
    scale: 101%;
  }
  50% {
    translate: 3px -3px;
    rotate: 2deg;
    scale: 98%;
  }
  75% {
    translate: 3px 0px;
    rotate: 0deg;
    scale: 101%;
  }
  100% {
    translate: 0px 0px;
    rotate: -2deg;
    scale: 102%;
  }
}


@keyframes armAniR {
  0% {
      translate: 0px 0px;
      rotate: -2deg;
      scale: 105%;
  }
  25% {
    translate: 0px -3px;
    rotate: 0deg;
    scale: 102%;
  }
  35% {
    rotate: 3deg;
  }
  50% {
    translate: 8px -3px;
    rotate: 1deg;
    scale: 98%;
  }
  60% {
    rotate: 3deg;
  }
  75% {
    translate: 8px 0px;
    rotate: 0deg;
    scale: 103%;
  }
  80% {
    rotate: 3deg;
  }
  100% {
    translate: 0px 0px;
    rotate: -2deg;
    scale: 105%;
  }
}

@keyframes armAniL {
  0% {
      translate: -20px 0px;
      rotate: -2deg;
      scale: 105%;
  }
  25% {
    translate: -10px -3px;
    rotate: -6deg;
    scale: 103%;
  }
  40% {
    rotate: -10deg;
  }
  50% {
    translate: 5px -3px;
    rotate: -6deg;
    scale: 98%;
  }
  65% {
    rotate: -10deg;
  }
  75% {
    translate: -5px 0px;
    rotate: -3deg;
    scale: 102%;
  }
  85% {
    rotate: -10deg;
  }
  100% {
    translate: -20px 0px;
    rotate: -2deg;
    scale: 105%;
  }
}








/*-----------------COURSES TEACHER PICK STYLING-----------------------------------------------*/



#course-pick-container{
  width: 100vw;
  height: 90vh;
  overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: left;
    align-items: center;
    background-image:linear-gradient(90deg, #ffd3a7, #ffb274 );

    padding-bottom: 200px;
    margin-bottom: -200px;
    overflow: hidden;

}




#course-pick-centre{
    color: black;
    position: absolute;
    top: 60%;
    left: 50%;
}
#course-pick-centre-div{
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  width: 150px;
  height: 50px;

  background-color: white;
  border:solid rgba(255, 153, 0) 1px;
  color:rgba(255, 153, 0);

  font-family: "Plus Jakarta Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: 15px;
  text-align: center;
  margin-left: -50%;
  margin-top: -25px;
  animation: wobble2 1.5s linear 0s infinite normal both;
}

@keyframes wobble2 {
  0%, 100% {
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% -50%;
  }

  15% {
      -webkit-transform: translateX(-32px) rotate(-5deg);
      transform: translateX(-15px) rotate(-5deg);
  }

  30% {
      -webkit-transform: translateX(calc(32px / 2)) rotate(5deg);
      transform: translateX(calc(15px / 2)) rotate(5deg);
  }

  45% {
      -webkit-transform: translateX(calc(-32px / 2)) rotate(calc(-5deg / 1.8));
      transform: translateX(calc(-15px / 2)) rotate(calc(-5deg / 1.8));
  }

  60% {
      -webkit-transform: translateX(calc(32px / 3.3)) rotate(calc(5deg / 3));
      transform: translateX(calc(15px / 3.3)) rotate(calc(5deg / 3));
  }

  75% {
      -webkit-transform: translateX(calc(-32px / 5.5)) rotate(calc(-5deg / 5));
      transform: translateX(calc(-15px / 5.5)) rotate(calc(-5deg / 5));
  }
}

.circle-course-btn{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    border-radius: 100px;
    width: var(--circleDia);
    height: var(--circleDia);
    position: absolute;
    top: -50px;
    left: -50px;

    background-color: bisque;
    color: white;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 15px;
    text-align: center;

    opacity: 0;
    animation: 0.5s ease-in-out circleMenuAnim normal forwards;
    transition: all 0.3s;

    cursor: pointer;
    -webkit-user-select: none; /* Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
-webkit-tap-highlight-color: transparent;
}

.circle-course-btn:hover{
    scale: 1.09;
}

.circle-course-btn:hover{
  scale: 1.09;
}


.comingSoon{
  position: absolute;
  margin-top: 50px;
  width: 50px;
  border-radius: 7px;
  background-color: rgba(241, 53, 53, 0.59);
  z-index: 5;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}



@keyframes circleMenuAnim {
    0% {
        transform:translateX(0);
    }
    100% {
        transform:translateX(calc(var(--circleDistance)*-1));
        opacity: 1;
    }
  }

  .circle-course-btn > span{
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    border-radius: 100px;
    width: var(--circleDia);
    height: var(--circleDia);
    background-color: #ff9e4e;
}


.circle-course-btn img{
    width: 100%;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
}


.circle-course-btn:nth-child(1) {
    rotate: 0deg;
    animation-delay: 0.05s;
  }
.circle-course-btn:nth-child(1) >span{
    rotate: 0deg;
  }
  

.circle-course-btn:nth-child(2) {
    rotate: 45deg;
    animation-delay: 0.1s;
  }
.circle-course-btn:nth-child(2) >span{
    rotate: -45deg;
  }


.circle-course-btn:nth-child(3) {
    rotate: 90deg;
    animation-delay: 0.15s;
  }
.circle-course-btn:nth-child(3) >span{
    rotate: -90deg;
  }


.circle-course-btn:nth-child(4) {
    rotate: 135deg;
    animation-delay: 0.2s;
  }
  .circle-course-btn:nth-child(4) > span{
      rotate: -135deg;
    }


.circle-course-btn:nth-child(5) {
    rotate: 180deg;
    animation-delay: 0.25s;
  }
.circle-course-btn:nth-child(5) >span{
    rotate: -180deg;
  }

.circle-course-btn:nth-child(6) {
    rotate: 225deg;
    animation-delay: 0.3s;
  }
.circle-course-btn:nth-child(6) >span{
    rotate: -225deg;
  }

.circle-course-btn:nth-child(7) {
    rotate: 270deg;
    animation-delay: 0.35s;
  }
.circle-course-btn:nth-child(7) >span{
    rotate: -270deg;
  }
.circle-course-btn:nth-child(8) {
    rotate: 315deg;
    animation-delay: 0.4s;
  }
  .circle-course-btn:nth-child(8) >span{
      rotate: -315deg;
    }

    .circle-course-btn > :last-child{
      transform:translateX(calc(var(--circleDistance)*-0.05));
      animation: circleMenuImgAnim2 0.5s ease  1 normal forwards;
  }

    .circle-course-btn:hover > :last-child{
        rotate: 0deg;
        animation: circleMenuImgAnim 0.5s ease  1 normal forwards;
      /*  animation: name duration timing-function delay iteration-count direction fill-mode;*/
    }

    
@keyframes circleMenuImgAnim {
    0% {
      transform:translateX(calc(var(--circleDistance)*-0.05));
    }
    100% {
        transform:translateX(calc(var(--circleDistance)*-0.45));
    }
  }
  @keyframes circleMenuImgAnim2 {
    0% {
        transform:translateX(calc(var(--circleDistance)*-0.45));
    }
    100% {
      transform:translateX(calc(var(--circleDistance)*-0.05));
    }
  }
  @keyframes circleMenuImgAnim3 {
    0% {
        transform:translateX(calc(var(--circleDistance)*-0.40));
    }
    100% {
      transform:translateX(calc(var(--circleDistance)*-0.35));
    }
  }
  @media (max-width:480px) {

  #course-pick-centre-div{
    width: 100px;
    height: 50px;
    margin-left: -45%;
    margin-top: -15px;}

    #course-pick-centre{
      top: 50%;
      left: 47%;
      
    }

    .circle-course-btn{
      font-size: 12px;
      top: -25px;
      left: -25px;}

      .comingSoon{
        position: absolute;
        margin-top: 40px;
        width: 40px;
        border-radius: 7px;
        background-color: rgba(241, 53, 53, 0.59);
        z-index: 5;
        font-size: 9px;
        font-weight: 500;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
      }

      
      #course-pick-centre :nth-child(1)> img{
        transform:translateX(calc(var(--circleDistance)*-0.4));
        animation: circleMenuImgAnim3 1.75s 0s  ease  infinite alternate;
    }
      #course-pick-centre :nth-child(2)> img{
        transform:translateX(calc(var(--circleDistance)*-0.4));
        animation: circleMenuImgAnim3 1.75s 0.5s ease  infinite alternate;
    }
    #course-pick-centre :nth-child(3)> img{
      transform:translateX(calc(var(--circleDistance)*-0.4));
      animation: circleMenuImgAnim3 1.75s 1s  ease  infinite alternate;
  }
  #course-pick-centre :nth-child(4)> img{
    transform:translateX(calc(var(--circleDistance)*-0.4));
    animation: circleMenuImgAnim3 1.75s 0s  ease  infinite alternate;
}
#course-pick-centre :nth-child(5)> img{
  transform:translateX(calc(var(--circleDistance)*-0.4));
  animation: circleMenuImgAnim3 1.75s 0.5s  ease  infinite alternate;
}
#course-pick-centre :nth-child(6)>img{
  transform:translateX(calc(var(--circleDistance)*-0.4));
  animation: circleMenuImgAnim3 1.75s 1s  ease  infinite alternate;
}
#course-pick-centre :nth-child(7)> img{
  transform:translateX(calc(var(--circleDistance)*-0.4));
  animation: circleMenuImgAnim3 1.75s 0s  ease  infinite alternate;
}
#course-pick-centre :nth-child(8)>img{
  transform:translateX(calc(var(--circleDistance)*-0.4));
  animation: circleMenuImgAnim3 1.75s 0.5s  ease  infinite alternate;
}
#course-pick-centre :nth-child(9)> :last-child{
  transform:translateX(calc(var(--circleDistance)*-0.4));
  animation: circleMenuImgAnim3 2.1s 4s  ease  infinite alternate;
}
  
      .circle-course-btn:hover > :last-child{
          rotate: 0deg;
          animation: none;
        /*  animation: name duration timing-function delay iteration-count direction fill-mode;*/
      }

      
    }

.circleMenuActive {
  z-index: 9;
}

.circleMenuActive ::after{
  content: " ";
  position: absolute;
  border-radius: 100px;
  width: var(--circleDia);
  height: var(--circleDia);
  background-color: #ff9e4e;
  animation: screenOut 2s ease 0s 1 normal forwards;
  }

  @keyframes screenOut {
    0% {
        transform:scale(100%);
    }
    100% {
      transform:scale(10000%);
    }
  }

  
  @keyframes screenIn {
    0% {
      transform: scale(1000%);
    }
    100% {
      transform:scale(0%);
    }
  }

/*-------------------COURSE TABS---------------------------------*/


#tab-container::before{
  position: absolute;
  content: " ";
  width: 1000px;
  height: 1000px;
  background-color:  #ff9e4e;
  border-radius: 50%;
  z-index: 9;
  animation: screenIn 1.5s -0.5s 1 normal forwards;
}


#tab-container{
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: center;
  margin-top: 100px;
  min-height: 50px;
}

.tab{
  width: 90vw;
  height: auto;
  background-color:  rgb(238,238,238);
  border: solid 1px rgb(219, 218, 218);
border-radius: 20px;
  
  position:absolute;
  transition: all 0.5s ease;
}

#tab0{color: #000;
}
#tab1{color: #000;
}
#tab2{color: #000;
}
#tab3{color: #000;
}
#tab4{color: #000;
}

.tabActive{
  z-index: 6;
  }



.tabLabelContainer{
  position:absolute;
  top: -75px;
  width:10%;
  height:100px;

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;


  cursor: pointer;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 15px;


  transition: all 1s;
}
.tabL0{left: 25%;
}
.tabL1{left: 35%;
}
.tabL2{left: 45%;
}
.tabL3{left: 55%;
}
.tabL4{left: 65%;
}


.tabLabelContainer span{
  z-index:5;
  color: rgb(0, 0, 0);

}

.divLabelTxtActive{
  color: var(--color-darkblue) !important;
  font-weight: 700;
  font-size: larger;
}




.divLabel{
  content: " ";
  z-index: 1;
  position:absolute;
  width:100%;
  height:100%;
  border-radius:20px 20px 0 0;
  border-width: 1px 1px 0px 1px;
  background-color:  rgb(238, 238, 238);
  transform: translateY(100%);
  transition: all .25s ease-in;
}




.divLabelActive{
  transform: translateY(0%);
  }

  
  .tabLabelContainer:not(.divLabelActive) .divLabel::before{
    content: " ";
    position:absolute;
    left: 0;
    top: -35px;
    width:100%;
    height:100%;
    border-radius:20px 20px 0 0;
    border-width: 1px 1px 0px 1px;
    background-color:  rgb(245, 245, 245);
    animation: tabUp2 .25s 0s ease-in-out normal forwards;
    z-index: -1;
  }

  .tabLabelContainer:has(.divLabelActive) .divLabel::before{
    content: " ";
    position:absolute;
    left: 0;
    top: -35px;
    width:100%;
    height:100%;
    border-radius:20px 20px 0 0;
    border-width: 1px 1px 0px 1px;
    background-color:  #00ff0d00;
    animation: tabUp2 .25s 0s ease-in-out normal forwards;
  }

  .tabLabelContainer:not(.divLabelActive):hover .divLabel::before{
    content: " ";
    position:absolute;
    left: 0;
    top: -35px;
    width:100%;
    height:100%;
    border-radius:20px 20px 0 0;
    border-width: 1px 1px 0px 1px;
    animation: tabUp .25s 0s ease-in-out normal forwards;
    background-color:  #7da1e2;
  }

  .tabLabelContainer:has(.divLabelActive):hover .divLabel::before{
    content: " ";
    position:absolute;
    left: 0;
    top: 0;
    width:100%;
    height:100%;
    border-radius:20px 20px 0 0;
    border-width: 1px 1px 0px 1px;
    animation: tabStay .15s 0s normal forwards;
    background-color:  rgb(238, 238, 238);
  }

  

  @keyframes tabUp {
    0% {
        transform:translateY(0%);
    }
    100% {
      transform:translateY(-35px);
    }
  }

  @keyframes tabUp2 {
    0% {
      transform:translateY(-35px);
    }
    100% {
      transform:translateY(0%);
    }
  }

  @keyframes tabStay {
    0% {
        transform:translateY(0%);
    }
    100% {
      transform:translateY(0%);
    }
  }


  @media (max-width:480px)  {


    .tabLabelContainer{
      position:absolute;
      top: -75px;
      width:20%;
      height:100px;
      font-size: 12px;
    }
  
    .tabL0{left: 5%;
    }
    .tabL1{left: 25%;
    }
    .tabL2{left: 45%;
    }
    .tabL3{left: 65%;
    }
    .tabL4{left: 85%;
    }

    
.divLabel{font-size: 10px;}
  }
  





.courseContainer{
  position: relative;
  z-index: 9;

  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;

  margin: 15px;
  background-color:  #f7f8fa;
  border-radius: 15px;
  color: rgb(14, 14, 89);
  font-family: "Lato", sans-serif;
  opacity: 0;
  transition: all 0.5s;

  margin-top: 20px;
  animation: courseDown 0.5s 0s normal forwards;
  pointer-events: none;
}

.courseVisible{
  display:flex;
  opacity: 1;
  animation: courseUp 1s 0s normal forwards;
  pointer-events:all;
}

@keyframes courseUp {
  0% {
      display: flex;
      transform:translateY(200%);
  }
  100% {
    transform:translateY(0%);
  }
}


@keyframes courseDown {
  0% {
      display: flex;
      transform:translateY(0%);
  }
  90% {
    transform:translateY(100%);
  }
  91%{
    display: none;
  }
}

.courseTitle{
  font-size: 35px;
  font-weight: 600;
  width: 90%;
  text-align: left;
  margin-left: 20px;

  border-bottom: 5px solid var(--color-darkblue);
}

.unitContainer{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  background-color: rgb(238, 238, 238);
  border: rgb(218,218,218) 1px solid;
  border-radius: 10px;
  margin: 5px;
  width: 30%;
  min-width: 300px;
}
.unitContainerSkill{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items:baseline;

  background-color: rgb(238, 238, 238);
  border: rgb(218,218,218) 1px solid;
  border-radius: 10px;
  margin: 5px;
  width: 100%;
  min-width: 300px;
}
.unitTitle{
  font-size: 20px;
  font-weight: 600;
  margin: 10px;
  width: 100%;
  text-align: center;
}
.keyAreaContainer{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  background-color:#f7f8fa;
  border: rgb(218,218,218) 1px solid;
  border-radius: 10px;

  margin: 10px;
  width: 100%;
}

.keyAreaContainerSkill{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  background-color:#f7f8fa;
  border: rgb(218,218,218) 1px solid;
  border-radius: 10px;

  margin: 10px;
  width: 25%;
  min-width: 200px;
}




.keyAreaTitle{
  font-size: 18px;
  width: 100%;
  text-align: left;
}

.keyAreaTitleCentre{
  font-size: 18px;
  width: 100%;
  text-align: center;
}


.keyAreaButtonContainer{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: baseline;
  align-items: baseline;
}


.pupilSeniorCell{
  text-align: center;
  font-size: 18px;
  color: var(--color-darkblue);
  background-color: rgb(245, 245, 245);
  border:  rgba(33, 36, 44, 0.50) solid 1px;
  border-radius: 4px;

  width:50%;
  margin:4px;
  cursor: pointer;
}

.pupilSeniorCell:hover{
  border:  #1865f2 solid 2px;
  margin:3px;
}


.keyAreaButton{
  position: relative;

display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;

  text-align: center;
  color: var(--color-darkblue);
  background-color: rgb(245, 245, 245);
  border:  rgba(33, 36, 44, 0.50) solid 1px;
  border-radius: 4px;
  cursor: pointer;

  width:125px;
  height: 35px;
  margin:4px;
  padding: 2px;
  
  font-family: "Lato", sans-serif;
  font-weight: 500;
  font-size: 13px;
}

.keyAreaButtonImg{
  width: 30px;
  height: 30px;
  margin: 0px;
  filter: brightness(0) saturate(100%) invert(5%) sepia(97%) saturate(3923%) hue-rotate(234deg) brightness(99%) contrast(96%);
}

.keyAreaButton:hover{
  border:  #1865f2 solid 2px;
  padding: 1px;
  color:#1865f2 ;
}
.keyAreaButton:hover .keyAreaButtonImg{
  filter: brightness(0) saturate(100%) invert(31%) sepia(60%) saturate(2368%) hue-rotate(207deg) brightness(93%) contrast(104%);
}

.keyAreaBtnInfo{
  position: absolute;
  transform:translateY(-100%) translateX(60%);
  transform-origin: 70% 30%;
  width: 180px;
  height: 60px;
  font-size: 12px;

  color: rgb(255, 255, 255);
  outline: white solid 1px;
  background-color:#1865f2;
  padding: 3px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
  z-index: 10;
}

.keyAreaBtnInfo::before{
  content: ' ';
  position: absolute;
  top: 100%;
  left: 8%;
  top: 98%;
  height: 30%;
  aspect-ratio: 1/1;
  color: rgb(255, 255, 255);
  background-color:#1865f2;
  clip-path: polygon(25% 0, 100% 0, 0% 100%);
}

.keyAreaButton:hover .keyAreaBtnInfo{
  display: flex;
  animation: popUpKA .5s ease 0s 1 normal forwards;
}

@keyframes popUpKA {
  0% {
    
      scale: 00%;
  }
  100% {
    scale: 100%;
  }
}

.keyAreaSectionSkill{
  width: 25%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;
  margin-top: 7px;
  padding-bottom: 7px;
  border-bottom: rgb(218,218,218) 1px solid;
}

.keyAreaSection{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;
  margin-top: 7px;
  padding-bottom: 7px;
  border-bottom: rgb(218,218,218) 1px solid;
}

.keyAreaSubTitle{
  width: 100%;
    color: #7da1e2;
    font-size: smaller;
    text-align: left;
    margin-left: 5px;
  }

/*--------------------------------COURSE TABS FOR PUPILS-----------------------------------------------------------*/
/*--------------------------------COURSE TABS FOR PUPILS-----------------------------------------------------------*/
/*--------------------------------COURSE TABS FOR PUPILS-----------------------------------------------------------*/
/*--------------------------------COURSE TABS FOR PUPILS-----------------------------------------------------------*/

.minimiseBtn{display: none;
}
.minimiseBtn2{display: none;
}

.minimiseBtnSkill{
  cursor: pointer;
  margin-top: -35px;
  margin-left: 100px;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: solid 1px #b8b8b8;
  background-color: #eeeeee;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.minimisedContentSkill{display: none;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;}

@media (max-width:480px) {


.pupilSeniorCellCheckBox{
  display: none;
}




  
.minimisedContent{display: none;}
.minimiseBtn{
  margin-top: -45px;
  margin-bottom: 25px;
  margin-left: 90%;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: solid 1px #b8b8b8;
  background-color: #eeeeee;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.minimiseBtn2{
  margin-top: -22px;
  margin-bottom: 20px;
  margin-left: 90%;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: solid 1px #b8b8b8;
  background-color: #eeeeee;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 15;
}

}

/*BGE*/

#courses-pupil-container{
  color: #000;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  background-color:#ffa760;
}

#courses-pupil-header{
  color:white;
  background-color:#ffa760;
  width: 90%;
  font-family: "Fredoka", sans-serif;
  font-size: 50px;
  font-weight: 800;
}
.courses-pupil-unit{
  width: 30%;
  min-width: 260px;
  color:white;
  margin: 5px;

  display: flex;
  justify-content: baseline;
  align-items: center;
  flex-direction: column;
  border-radius: 20px;
}
.courses-pupil-unit-header{
  font-family: "Fredoka", sans-serif;
  font-size: 50px;
  font-weight: 800;
}

.courses-pupil-key-area-container{
  color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.pupilKeyArea{
  margin: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 90%;
  border-radius: 20px;
  border: solid 2px white;
}

.pupilKeyAreaShareContainer{
  width: 100%;
  display: flex;
  justify-content: right;
  position: relative;
}



.shareBtn{
  width: 25%;
  max-width: 80px;
  margin-right: 10px;
  margin-top: 5px;
  
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}


.shareBtn:hover .shareBtnFront{
  transform: rotateX(-90deg);
  background-color: white;

}



.shareBtnFront{
  width: 25%;
  max-width: 80px;
  height: 20px;
  position: absolute;
  cursor: pointer;
  z-index: 4;

  font-family: 'Roboto', sans-serif;
  background-color: white;
  color:#b6b6b6;
  border-radius: 20px;
  border: solid 2px white;

  transform-origin: center top;
    -webkit-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.shareBtnFront span{
  margin-left: -5px;
    padding-right: 4px;
  font-size: 15px;

  font-family: 'Roboto', sans-serif;
}

.shareImgLogo{
  width: 17px;
  height: 17px;
  position: absolute;
}

.shareBtnLinks{
  width: 25%;
  max-width: 80px;
  height: 20px;
  position: absolute;
  display: flex;
  justify-content: center;

  font-family: 'Roboto', sans-serif;
  background-color: rgba(0, 0, 0, 0.2);
  color:#b6b6b6;
  border-radius: 20px;
  border: solid 2px rgba(0, 0, 0, 0);
  z-index: 3;
  clip-path: rect(-100px 300px 25px 0px);
  transition: opacity 0.5s;

}
.shareBtn:hover .shareBtnLinks .shareImg .shareImgInfo{
  opacity: 1;
}
.shareBtn:hover .shareBtnLinks .shareImg{
  transform: translateY(0px);
  
}

.shareBtn:hover .shareBtnLinks .shareImg:nth-of-type(1){
  transition-delay:0.1s;
}

.shareBtn:hover .shareBtnLinks .shareImg:nth-of-type(2){
  transition-delay:0.2s;
}

.shareBtn:hover .shareBtnLinks .shareImg:nth-of-type(3){
  transition-delay:0.3s;
}
.shareImg{
  position: relative;
  cursor: pointer;
  width: 20px;
  height: 20px;
  transform: translateY(50px);
  transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.shareImgImg{
  width: 20px;
  height: 20px;
}


.shareImgInfo{
  opacity: 0;
  position: absolute;
  transform:translateY(-200%) translateX(10%);
  transform-origin: 20% -80%;
  width: 80px;
  height: 30px;
  font-size: 10px;

  color: gray;
  background-color: white;
  padding: 3px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
  z-index: 10;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5), 0 0 5px rgb(255, 255, 255);
}

.shareImgInfo::before{
  content: ' ';
  position: absolute;
  top: 100%;
  left: 8%;
  top: 98%;
  height: 30%;
  aspect-ratio: 1/1;
  color: rgb(255, 255, 255);
  background-color: white;
  clip-path: polygon(25% 0, 100% 0, 0% 100%);
}

.shareImg:hover .shareImgInfo{
  display: flex;
  animation: popUpKA .5s ease 0s 1 normal forwards;
  z-index: 10;
}













.pupilKeyAreaPrintContainer{
  width: 100%;
  display: flex;
  flex-direction:row;
  justify-content: right;  
  margin-right: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.printBtnLinks{
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  overflow-x: hidden;
  overflow-y: visible;
clip-path: polygon(0 0, 95% 0, 95% 100%, 0% 100%);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.printBtnLinks:hover{
padding-bottom: 100px;
margin-bottom: -100px;
clip-path:none;
}


.printBtn{
  width: 20%;
  max-width: 80px;
  height: 20px;
  margin-right: 15px;
  margin-top: 5px;
  margin-bottom: 5px;
}


.pupilKeyAreaPrintContainer:hover .printBtnFront{
  transform: rotateX(-90deg);
}



.printBtnFront{
  width: 16%;
  max-width: 80px;
  height: 20px;
  position: absolute;
  cursor: pointer;
  z-index: 4;

  font-family: 'Roboto', sans-serif;
  background-color: white;
  color:#b6b6b6;
  border-radius: 20px;
  border: solid 2px white;

  transform-origin: center top;
    -webkit-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.printBtnFront span{
  margin-left: -5px;
    padding-right: 4px;
  font-size: 15px;

  font-family: 'Roboto', sans-serif;
}

.printFrntCont{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.printImgLogo{
  width: 17px;
  height: 17px;
}

.pupilKeyAreaPrintContainer .printBtnLinks .printImg{
  transform: translateX(400%);
  
  transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
}

.pupilKeyAreaPrintContainer:hover .printBtnLinks .printImg .printImgInfo{
  opacity: 1;
}
.pupilKeyAreaPrintContainer:hover .printBtnLinks .printImg{
  transform: translateX(0%);
  
}

.pupilKeyAreaPrintContainer:hover .printBtnLinks .printImg:nth-of-type(1){
  transition-delay:0.1s;
}

.pupilKeyAreaPrintContainer:hover .printBtnLinks .printImg:nth-of-type(2){
  transition-delay:0.2s;
}

.pupilKeyAreaPrintContainer:hover .printBtnLinks .printImg:nth-of-type(3){
  transition-delay:0.3s;
}

.pupilKeyAreaPrintContainer:hover .printBtnLinks .printImg:nth-of-type(4){
  transition-delay:0.4s;
}
.printImg{
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 75px;
  height: 20px;
  margin-right: 5px;
  margin-left: 5px;
  margin-bottom: 5px;

  color: white;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);


}


.printImgTxt{
  font-size: 10px;
  font-weight: 300;
  width: 60px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.printImgImg{
  width: 18px;
  height: 18px;
  margin: 1px;
}


.printImgInfo{
  opacity: 0;
  position: absolute;
  transform:translateY(90%) translateX(8%);
  transform-origin: 20% 40%;
  width: 80px;
  height: 30px;
  font-size: 10px;

  color: gray;
  background-color: white;
  padding: 3px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
  z-index: 10;
  
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5), 0 0 5px rgb(255, 255, 255);
}

.printImgInfo::before{
  content: ' ';
  position: absolute;
  top: 100%;
  left: 8%;
  top: 98%;
  height: 30%;
  aspect-ratio: 1/1;
  color: rgb(255, 255, 255);
  background-color: white;
  transform:translateX(-3px)translateY(-43px);
  clip-path: polygon(100% 100%, 0 0, 15% 100%);
}

.printImg:hover .printImgInfo{
  display: flex;
  animation: popUpKA .5s ease 0s 1 normal forwards;
}

.printImg:nth-of-type(4) > .printImgInfo {
  transform:translateY(90%) translateX(8%);
}

.printImg:nth-of-type(4) > .printImgInfo::before {
  transform:translateX(-3px)translateY(-43px);
  clip-path: polygon(100% 100%, 0 0, 15% 100%);
}




.pupilKeyAreaTitle{
  width: 100%;
  margin: 0px;
  font-size: 20px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.keyAreaPrintables{
   width: 100%;
    text-align: left;
    margin-left: 35px;
    font-size: smaller;
    font-weight: 400;
}

.outlineArea{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 97%;
  margin: 2px;
  border-radius: 20px;
  border: solid 2px white;
  transition: border 0.5s;
}
.outlineArea:has(.pupilKeyAreaShareContainer > .shareBtn:hover)  {
  animation: pulseOutline 1s infinite linear forwards;
}

.outlineArea:has(.pupilKeyAreaPrintContainer:hover)  {
  animation: pulseOutline 1s infinite linear forwards;
}
@keyframes pulseOutline {
  0% {
              box-shadow: 0 0 5px rgba(0, 0, 0, 0.5), 0 0 25px rgb(255, 255, 255), 0 0 25px rgb(255, 255, 255);
  }
  50% {
        box-shadow: 0 0 4px rgb(0, 0, 0, 0.5), 0 0 10px rgb(255, 255, 255), 0 0 10px rgb(255, 255, 255);
  }
  100% {
             box-shadow: 0 0 5px rgb(0, 0, 0, 0.5), 0 0 25px rgb(255, 255, 255), 0 0 25px rgb(255, 255, 255);
  }
}


.pupilKABox{
  width: 90%;
  text-align: left;
  font-size: 13px;
}

.pupilTitleBox{
  margin-left: 1px;
  
}

.pupilActivityBtn{
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9;
  content: " ";  
  
  cursor: pointer;
  -webkit-user-select: none; /* Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
-webkit-tap-highlight-color: transparent;
}
.pupilActivityText{
  position: relative;
  width: 100px;
  height: 35px;
  color: white;
  border: rgba(255, 255, 255, 1) 3px solid;
  background-color: greenyellow;
  border-radius: 20px;
  
  font-family: "Fredoka", sans-serif;
  font-size: 15px;
  font-weight: 500;

  display: flex;
  padding-left: 5px;
  padding-right: 5px;
  justify-content: left;
  text-align: left;
  align-items: center;
  --webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: all .5s;
}
.infoPosL{
  width: 100px;
  justify-content: left;
  text-align: left;
  transform: translateX(-65px);
}

.infoPosR{
  width: 100px;
  justify-content: right;
  text-align: right;
  transform: translateX(55px);
}


.pupilActivityInfo{
  position: absolute;
  color: rgb(255, 255, 255);
  border: rgb(255, 255, 255) 2px solid;
  z-index: -1;
  transition: margin-top .5s;
  transform: translateZ(-1em);
  border-radius: 10px;
  font-size: 15px;
  padding: 2px;
}

.infoPosLBox{transform: translateX(20px) translateZ(-1em);
}
.infoPosRBox{transform: translateX(-20px) translateZ(-1em);
}

.singleLine{
  font-size:20px;
}
.singleLine{
  font-size:20px;
}

.pupilActivityImg{
  z-index: 3;
  position: absolute;
  width: 100px;

  height: 100px;
  animation: growImgRev 0.1s linear forwards;
}

.pupilActivityBtn:hover>.pupilActivityImg{
  animation: growImg 0.15s linear forwards;
}

@keyframes growImg {
  0%{transform: scale(1)}
  100%{transform: scale(1.1)}
}
@keyframes growImgRev {
  0%{transform: scale(1.1)}
  100%{transform: scale(1)}
}



.pupilActivityBtn:has(.infoPosL) >.pupilActivityText{
  position: relative;
  width: 100px;
}

.pupilActivityBtn:has(.infoPosL):hover>.pupilActivityText{
  transform-style: preserve-3d;
  transform: translateX(-85px);
  -webkit-transform: translateX(-85px); /* Safari and Chrome */
  position: relative;
}

.pupilActivityBtn:has(.infoPosL):hover>.pupilActivityText>.pupilActivityInfo{
  position: absolute;
  z-index: -1;
  transform: translateX(20px) translateZ(-1em);
  -webkit-transform: translateX(20px) translateZ(-1em); /* Safari and Chrome */
  margin-top: 50px;
}


.pupilActivityBtn:has(.infoPosR) >.pupilActivityText{
  position: relative;
  width: 100px;
}

.pupilActivityBtn:has(.infoPosR):hover>.pupilActivityText{
  transform-style: preserve-3d;
  transform: translateX(75px);
  -webkit-transform: translateX(75px); /* Safari and Chrome */
  position: relative;
}

.pupilActivityBtn:has(.infoPosR):hover>.pupilActivityText>.pupilActivityInfo{
  position: absolute;
  z-index: -1;
  transform: translateX(-20px) translateZ(-1em);
  -webkit-transform: translateX(-20px) translateZ(-1em); /* Safari and Chrome */
  margin-top: 50px;
}
/*
.pupilActivityBtn:hover .pupilActivityInfo{
  border: solid rgb(182, 255, 145) 2px;
  border-radius: 10px;
  margin-top: 50px;
  color: white;
}*/




.pupilActivityStarImgL{
  z-index: 1;
  position: absolute;
  margin-left: -33px;
  margin-top: -30px;
}

.pupilActivityStarImgR{
  z-index: 1;
  position: absolute;
  margin-right: -33px;
  margin-top: -30px;
}

.backgroundBlue{
  background-color: #1865f2;
}

.backgroundBlack{
  background-color: #000000;
}

.backgroundGrey{
  
  background-color: #f7f8fa;
}


.backgroundStarSky{
  
 background-image: url("../img/ui/courses_planetsky.png");
}
.backgroundStarSky2{
  
 background-image: url("../img/ui/courses_planetsky2.png");
}
.backgroundPastelBlue{
  
  background-color: #81d9ff;
}
.backgroundPastelBlueLighter{
  
  background-color: #e3eaee;
}
.backgroundPastelRedLighter{
  
  background-color: #f5e9e9;
}

.backgroundPastelGreenLighter{
  
  background-color: #e8f3ea;
}
.backgroundPastelCyan{
  
  background-color: rgb(61, 232, 232)
}
.backgroundPastelGreen{
  
  background-color: #a4efb4;
}

.backgroundPastelGreenDark{
  
  background-color: #5ee087;
}
.backgroundPastelGreenDarker{
  
  background-color: #3ac165;
}
.backgroundPastelRed{
  
  background-color: #ff8b94
}
.backgroundPastelOrange{
  
  background-color: #f6b183
}

.backgroundPastelOrangeDarker{
  
  background-color: rgb(237, 184, 49)
}

.backgroundPastelPurple{
  
  background-color: #c9c9ff
}

.backgroundPastelYellow{
  
  background-color: #f1f478
}



.appButton{
  width: 50px;
  height: 50px;

  background-color: #fe4365;
  border-width: 0px 0px 5px 0px;
  border-color: #783743;
  border-style: solid;
  border-radius: 50%;

}

.appButtonPos0{
  margin-left: 0px;
}
.appButtonPos1{
  margin-left: 75px;
}
.appButtonPos2{
  margin-left: 150px;
}
.appButtonPos-1{
  margin-left: -75px;
}
.appButtonPos-2{
  margin-left: -150px;
}





.courses-pupil-key-area{
  color: #000;
  width: 90%;
}
.courses-pupil-key-area-header{
  margin-top: 20px;
  color: #000;
}

/*--------------------------------------HOME COURSE---------------------------*/
/*--------------------------------------HOME COURSE---------------------------*/
/*--------------------------------------HOME COURSE---------------------------*/




#home-background{
  font-size: 16px;
  padding-top: 20px;
  width: 100vw;
  min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: left;
    align-items: center;

    background-image:linear-gradient(90deg, #ffd3a728, #ffb3742c );
    overflow: hidden;
}

#home-container-top{
  color: black;
  width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content:center;
    align-items: flex-start;
}


.home-container-top-box{
  width:30%;
  margin: 2px;
  aspect-ratio: 1/1;
  height: auto;
    display: flex;
    justify-content:flex-start;
    align-items: flex-start;
    position: relative;
}



#home-container-top-left{
  background-image:linear-gradient(90deg, #fac080, #f5b878);  
  border-radius: 25px; 
  width: 75%;
  height: 75%;

  justify-self: flex-end;
  align-self: flex-end;


  font-size: 3em;
  font-weight: bold;
  color: white;
  z-index: 2;

  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 5%;

}

#home-container-top-left span{
  font-size: 0.8em;
  margin: 0px;
  padding: 0px;
}

#home-container-top-left-small{
  color: black;
  background-image:linear-gradient(90deg, #ffecda, #ffd4b1 );  
  border-radius: 25px;
  height: 30%; 
  width: 30%;
  position: absolute;
  transform: translateX(230%) translateY(15%);



  display: flex;
  flex-direction: column;
}

#home-container-top-middle{
  background-image:linear-gradient(90deg, #ffd3a7, #ffb274 );
  border-radius: 25px;  
  height: 100%; 
  width: 100%;
  
  color: black;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;
  position: relative;


  z-index: 3;
}




#home-container-top-right{
  color: black;
  background-image:linear-gradient(90deg, #ffd6ad, #ffcfa0 );
  border-radius: 25px;  
  height: 70%; 
  width: 70%;

  transform: translateX(-10%) translateY(3%);

  font-size: 50px;
  font-weight: bold;


  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  position: relative;

}

#home-container-top-right-small{
  background-image:linear-gradient(90deg, #fac080, #f5b878);  
  border-radius: 25px;
  height: 55%; 
  width: 55%;
  padding: 2.5%;
  position: absolute;
  transform: translateX(60%) translateY(60%);

  display: flex;
  flex-direction: row;
  flex-wrap:wrap ;
  align-items: center;
  justify-content: center;
  text-align: center;

  font-size: 1.15em;
  font-weight: 300;
  color: white;

}

#exampleClassroom{
  margin-top: 20px;
  padding: 0;
  width: 40%;
  height: auto;
border-radius: 10px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
}
#logoClassroom{
  padding: 0;
  width: 35%;
  height: auto;
border-radius: 10px;
margin-left: -10px;
margin-top: 0px;
}


#home-container-top-right-small span{
  margin: 0px;
  padding: 0px;
  margin-top: -40px;
  font-weight: 500;
}



.phonePlayer{
  color: black;
  position: absolute;
  display: flex;
  align-items: flex-end;
  justify-content: end;
  scale: 1.2;
}

.phonePlayer img{
  z-index: 4;
  width: 180px;
  height: 320px;
  position: absolute;
}

#phoneTemp{
  z-index: 2;
}

.phonePlayer video{
  z-index: 3;
  clip-path: polygon(9% 0, 94% 0, 100% 3%, 100% 95%, 88% 100%, 13% 100%, 0 96%, 0 3%);
}




#home-bubble-2{
  z-index: 5;
  width: 45%;
  align-self: flex-start;
}


#home-bubble-1{
  z-index: 5;
  width: 45%;
  align-self: flex-end;
}



.bubbleHeading{
  letter-spacing: 2px;
  font-weight: bold;
}


    .speechBubble1 {
      transform: translatey(0px) translateX(var(--homeAnimMove));
      animation: float 5s ease-in-out 1s infinite;
    
      text-align: center;
      font-size: 1.2em;
      color: var(color-brown);
      background-color: #ece5ce;
      padding: 10px;
      border-radius: 11px;
      position: relative;
      box-shadow: 10px 10px #83af9bdb;
      font-family: "Baloo 2", cursive;
    }
    .speechBubble1:after {
      transform: translatey(0px);
      animation: float2 5s ease-in-out infinite;
      content: ".";
      font-weight: bold;
      -webkit-text-fill-color: #ece5ce;
      text-shadow: 22px 22px #83af9be5;
      text-align: left;
      font-size: 1.2em;
      width: 55px;
      height: 11px;
      line-height: 30px;
      border-radius: 11px;
      background-color: #ece5ce;
      position: absolute;
      display: block;
      bottom: -30px;
      left: 0;
      box-shadow: 12px 12px #83af9bc2;
      z-index: -2;
    }
    
    @keyframes float {
      0% {
        transform: translatey(0px) translateX(var(--homeAnimMove));
      }
      50% {
        transform: translatey(-20px) translateX(var(--homeAnimMove));
      }
      100% {
        transform: translatey(0px) translateX(var(--homeAnimMove));
      }
    }
    
    @keyframes float2 {
      0% {
        line-height: 30px;
        transform: translatey(0px) translateX(0);
      }
      55% {
        transform: translatey(-20px) translateX(0);
      }
      60% {
        line-height: 10px;
      }
      100% {
        line-height: 30px;
        transform: translatey(0px) translateX(0);
      }
    }
    


    .speechBubble2 {
      transform: translatey(0px);
      animation: float21 5s ease-in-out infinite;
    
      text-align: center;
      font-size: 1.2em;
      color: var(color-brown);
      background-color: #ece5ce;
      padding: 10px;
      border-radius: 11px;
      position: relative;
      box-shadow: 10px 10px #83af9be1;
      font-family: "Baloo 2", cursive;
    }
    .speechBubble2:after {
      transform: translatey(0px);
      animation: float22 5s ease-in-out infinite;
      content: ".";
      font-weight: bold;
      -webkit-text-fill-color: #ece5ce;
      text-shadow: 12px 12px #83af9be0;
      text-align: left;
      font-size: 1.2em;
      width: 55px;
      height: 11px;
      line-height: 30px;
      border-radius: 11px;
      background-color: #ece5ce;
      position: absolute;
      display: block;
      bottom: -30px;
      left: 0;
      box-shadow: 22px 22px #83af9b;
      z-index: -2;
    }
    
    @keyframes float21 {
      0% {
        transform: translatey(0px) translateX(var(--homeAnimMove2));
      }
      50% {
        transform: translatey(-20px) translateX(var(--homeAnimMove2));
      }
      100% {
        transform: translatey(0px) translateX(var(--homeAnimMove2));
      }
    }
    
    @keyframes float22 {
      0% {
        line-height: 30px;
        transform: translatey(0px) translateX(0);
      }
      55% {
        transform: translatey(-20px) translateX(0);
      }
      60% {
        line-height: 10px;
      }
      100% {
        line-height: 30px;
        transform: translatey(0px) translateX(0);
      }
    }
    





#select-container{
      font-size: 2.2em;
      margin: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 95%;
  background-color: white;
  border-radius: 50px;
	animation: expand 500ms cubic-bezier(.47,1.64,.41,.8)  0s forwards;

}


@keyframes expand {
	0%{
  scale: 0;}
  100%{
  scale: 1;}
}


#select-container-buttons{
      font-size: .5em;
  font-weight: bold;
  display: flex;
  flex-direction: row;
}

.home-button{
  cursor: pointer;
  -webkit-user-select: none; /* Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
-webkit-tap-highlight-color: transparent;

  background-color: #ff883e;
  background-image: linear-gradient(to bottom, hsl(25, 94%, 65%), hsl(25, 81%, 65%));
	box-shadow: inset 0 0 0 2px white, -32px 4px 16px -4px hsla(240deg 40% 25% / 5%), 32px 4px 16px -4px hsla(240deg 40% 25% / 5%), 0 8px 12px hsla(240deg 40% 25% / 6%), 0 12px 32px hsla(240deg 40% 25% / 6%);

  border: rgb(255, 255, 255) solid 1px;
  color: white;
  border-radius: 60px;
  padding: 20px;
  width: 100px;
  height: 20px;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 5px;
  margin-left: 20px;
  margin-right: 20px;
}

.home-button1{
  color:white;
	animation: jitteryRev 4s linear  0s infinite;
  animation-delay: 1s;
}

.home-button2{
  color:white;
	animation: jitteryRev 4s linear  0s infinite;
  animation-delay: 2s;}


.home-button:hover{
	animation: jittery 2s linear  0s forwards;
}

@keyframes jittery {

	10% {
		transform: scale(0.9);
    background-color: white;
    background-image: linear-gradient(to bottom, hsl(240deg 15% 99%), hsl(240deg 10% 95%));

    border: #ff883e solid 1px;
    color: #ff883e;
	}
	15% {
		transform: scale(1.05); 
	}
	20% {
		transform: scale(1.05) rotate(-5deg);
	}
	25% {
		transform: scale(1.05) rotate(5deg);
	}
	30% {
		transform: scale(1.05) rotate(-3deg);
	}
	35% {
		transform: scale(1.05) rotate(2deg);
	}
	40% {
		transform: scale(1.05) rotate(0);
	}
  100%{
		transform: scale(1.05) rotate(0);
    background-color: white;
    background-image: linear-gradient(to bottom, hsl(240deg 15% 99%), hsl(240deg 10% 95%));

    border: #ff883e solid 1px;
    color: #ff883e;
  }
}



@keyframes jitteryRev2 {

	0% {
		transform: scale(1.0);
	}

	40% {
		transform: scale(1.0) rotate(0);
	}
  100%{
		transform: scale(1.0) rotate(0);
  }
}


@keyframes jitteryRev {


	10% {
		transform: scale(1);
	}
	15% {
		transform: scale(1.05); 
	}
	20% {
		transform: scale(1.05) rotate(-5deg);
	}
	25% {
		transform: scale(1.05) rotate(5deg);
	}
	30% {
		transform: scale(1.05) rotate(-3deg);
	}
	35% {
		transform: scale(1.05) rotate(2deg);
	}
	40% {
		transform: scale(1) rotate(0);
	}
  100%{
		transform: scale(1) rotate(0);
  }
}




@media (max-width:600px) {
  :root {
  --homeAnimMove: 10%;
  --homeAnimMove2: -10%;
}



#home-background{
  font-size: 10px;
  width: 100vw;
overflow: hidden;
margin: 0px;
padding: 0px;
}



#home-container-top{
  color: black;
  width: 100%;
}


.home-container-top-box{
  width:90%;
  margin: 2px;
}

#box1{
  height: auto;
  aspect-ratio: auto;  
}

#home-container-top-left{
  background-image:linear-gradient(90deg, #fac080, #f5b878);
  height: auto;
  aspect-ratio: auto;  
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 2.7em;
  margin-left: 0px;
  margin-right: 40%;
  padding:  10px;
  padding-right:  0px;

  margin-top: 10px;
  margin-bottom: 30px;
}
#home-container-top-left-small{  
  height: 100%;
  width: 50%;
  transform: translateX(100%) translateY(40%);

}
#home-container-top-middle{
  background-image: none;

}
#home-container-top-right{
  width: 25%;
  height: 25%;
  transform: translateX(20%) translateY(10%);
  background-image:linear-gradient(90deg, #ffe8d0, #ffd8ae);

}
#home-container-top-right-small{
  width: 70%;
  transform:  translateX(20%) translateY(20%);
  font-size: 1.5em;

}

#home-container-top > :nth-child(3){
  order: 4;
}

#home-container-top > :nth-child(4){
  order: 3;
}


#select-container{
z-index: 5;
}
}






.fullWidth{width: 100vw;}
#Acourses-picker-bar-container-disable{
  background-color: #f7f8fa;
  width: 100%;
  height: 50px;
  margin-top: 5px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  border-bottom: solid 1px #e6e6e6;
}
#Acourses-picker-bar-container-disable2{
  background-color: #f7f8fa00;
  width: 100%;
  height: 50px;
  margin-top: 5px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  border-bottom: solid 1px #e6e6e600;
}
#home-courses-picker-bar-links{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  margin-top: 0px;
  z-index: 6;
}

.home-course-bar-link{
  position: relative;
  margin: 20px;
  width: 280px;
  height: 140px;
  background-color:  white;
  border: solid 4px var(--color-darkblue);
  border-radius: 30px;

  color:  var(--color-darkblue);
  font-weight: 700;
  font-size: 40px;


  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;  

  cursor: pointer;
  -webkit-user-select: none; /* Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
-webkit-tap-highlight-color: transparent;
}
.home-course-bar-link:hover >:nth-child(1){
  animation: courseLinkhomeSlide .4s cubic-bezier(0.65,0,.076,1)  0s forwards;
}
.home-course-bar-link:hover >:nth-child(2){
  animation: courseLinkhomeSlideArrow .4s cubic-bezier(0.65,0,.076,1)  .2s forwards;
}
.home-course-bar-link:hover >:nth-child(3){
  animation: courseLinkhomeSlideText .4s cubic-bezier(0.65,0,.076,1)  0s forwards;
}




.homeslide{
  position: absolute;
  height: 100%;
  width: 100%;
  transform: skew(20deg);
  margin-left: -250px;
  background:  var(--color-darkblue);
  animation: courseLinkhomeSliderev .4s cubic-bezier(0.65,0,.076,1)  0s forwards;}

  .homeslideArrow{
    position: absolute;
    display: flex;
    align-items:center;
    justify-content: center;
    height: 35px;
    width: 100px;
    margin-left:-250px;
    margin-top:-5px;
    font-size: 40px;
    color: white;
    animation: courseLinkhomeSlideArrowrev .4s cubic-bezier(0.65,0,.076,1)  0s forwards;
  }
  .homeslideText{
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    align-items:center;
    justify-content: left;
    height: 50%;
    width: 100%;
    font-size: 35px;
    color:  var(--color-darkblue);
    margin-left: -10px;
    animation: courseLinkhomeSlideTextrev .4s cubic-bezier(0.65,0,.076,1)  0s forwards;

  }
  
  @keyframes courseLinkhomeSlideText {
    0% {
      margin-left: 10%;
    }
    100% {
      margin-left: 70%;
    }
  }
  @keyframes courseLinkhomeSlide {
    0% {
      margin-left: -250%;
    }
    100% {
      margin-left: -150%;
    }
  }

  @keyframes courseLinkhomeSlideArrow {
    0% {color: transparent;
      margin-left: -250%;
    }
    100% {
      margin-left:-80%;
    }
  }
  @keyframes courseLinkhomeSlideTextrev {
    100% {
      margin-left: 10%;
    }
    0% {
      margin-left: 70%;
    }
  }
  @keyframes courseLinkhomeSliderev {
    100% {
      margin-left: -250%;
    }
    0% {
      margin-left: -150%;
    }
  }

  @keyframes courseLinkhomeSlideArrowrev {
    100% {color: transparent;
      margin-left: -250%;
    }
    0% {
      margin-left:-80%;
    }
  }

  

/*--------------------------Course bar A-------------------------------------*/
/*--------------------------Course bar A-------------------------------------*/
/*--------------------------Course bar A-------------------------------------*/
#Acourses-picker-bar-container{
  background-color: #f7f8fa;
  width: 100%;
  height: 50px;
  margin-top: 5px;

  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: baseline;
  
  animation: AcourseBarexpandrev 0.45s cubic-bezier(0.65,0,.076,1)  forwards;
  overflow: hidden;
  border-bottom: solid 1px #e6e6e6;
}
  

#Acourses-picker-bar{
  height: 40px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items:baseline;
}
#Acourse-picker-circle{
  position: absolute;
  width: 40px;
  height: 40px;

  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;

  background-color:  var(--color-darkblue);
  border-radius: 25px;
}

#Acourse-picker-circleA1{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 0px;
  margin-left: 8px;
  font-size: 25px;
  display: block;
  color: white;
  transition: color 0.2s;

}
#Acourse-picker-circleA2{
  position: absolute;
  margin-top: -5px;
  margin-left: 10px;
  font-size: 25px;
  display: block;
  color: transparent;
  transition: color 0.2s;
}
#Acourse-picker-text{
  font-family: "Lato", sans-serif;
  font-size: 20px;
  height: 40px;
  font-weight: 700;
  margin-top: 0px;
  
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-left: 60px;
  color:  var(--color-darkblue);
  pointer-events: none;
  z-index: 6;
}
.forceNewLine{
  width:100%;
}

/*expand main height*/
#Acourses-picker-bar-container:hover {
  animation: AcourseBarexpand 0.45s cubic-bezier(0.65,0,.076,1)  forwards;
}
/*expand blue bar*/
#Acourses-picker-bar-container:hover >:nth-child(1)>:nth-child(1){
  animation: AcoursePickerexpand 0.45s cubic-bezier(0.65,0,.076,1)  forwards;
}
/*circle arrow bits*/
#Acourses-picker-bar-container:hover >:nth-child(1)>:nth-child(1)>:nth-child(1){
  color: transparent;
}
#Acourses-picker-bar-container:hover >:nth-child(1)>:nth-child(1)>:nth-child(2){
  color: white;
}
/*text*/
#Acourses-picker-bar-container:hover >:nth-child(1)>:nth-child(2){
  color: white;
}
/*links*/
#Acourses-picker-bar-container:hover >:nth-child(2)>:nth-child(1){
  animation: bounce-in-down 1s ease forwards;
}
#Acourses-picker-bar-container:hover >:nth-child(2)>:nth-child(2){
  animation: bounce-in-down 1s ease .05s forwards;
}

#Acourses-picker-bar-container:hover >:nth-child(2)>:nth-child(3){
  animation: bounce-in-down 1s ease .1s forwards;
}

#Acourses-picker-bar-container:hover >:nth-child(2)>:nth-child(4){
  animation: bounce-in-down 1s ease .15s forwards;
}



.forceNewLine{
  margin: 0px;
  height: 0%;
  width: 100%;
}

.Acourse-bar-link:hover >:nth-child(1){
  animation: courseLinkSlide .2s cubic-bezier(0.65,0,.076,1)  0s forwards;
}
.Acourse-bar-link:hover >:nth-child(2){
  animation: courseLinkSlideArrow .2s cubic-bezier(0.65,0,.076,1)  .1s forwards;
}
.Acourse-bar-link:hover >:nth-child(3){
  animation: courseLinkSlideText .2s cubic-bezier(0.65,0,.076,1)  0s forwards;
}


#Acourses-picker-bar-links{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  margin-top: 0px;
  z-index: 6;
}


@keyframes AcourseBarexpand {
  0% {
    height: 40px;
  }
  100% {
    height: 120px;
  }
}
@keyframes AcourseBarexpandrev {
  0% {
    height: 120px;
  }
  100% {
    height: 40px;
  }
}

@keyframes AcoursePickerexpand {
    0% {
      width: 40px;
    }
    100% {
      width: 200px;
    }
  }@keyframes AcoursePickerexpandrev {
    0% {
      width: 200px;
    }
    100% {
      width: 40px;
    }
  }

  
  .bounce-in {
    animation: bounce-in 2s ease infinite;
  }
  @keyframes bounce-in {
    0% {
      opacity: 0;
      transform: scale(.3);
    }
    50% {
      opacity: 1;
      transform: scale(1.05);
    }
    70% { transform: scale(.9); }
    100% { transform: scale(1); }
  }
  
  .bounce-in-down {
    animation: bounce-in-down 2s ease infinite;
  }
  @keyframes bounce-in-down {
    0% {
      opacity: 0;
      transform: translateY(-2000px);
    }
    60% {
      opacity: 1;
      transform: translateY(30px);
    }
    80% { transform: translateY(-10px); }
    100% { transform: translateX(0); }
  }
  

.Acourse-bar-link{
  position: relative;
  margin: 20px;
  width: 100px;
  height: 35px;
  background-color:  var(--color-darkblue);
  border: solid 2px var(--color-darkblue);
  border-radius: 30px;

  color: white;
  font-weight: 700;
  font-size: 20px;

  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;  
}
.Acourse-bar-link:hover >:nth-child(1){
  animation: courseLinkSlide .2s cubic-bezier(0.65,0,.076,1)  0s forwards;
}
.Acourse-bar-link:hover >:nth-child(2){
  animation: courseLinkSlideArrow .2s cubic-bezier(0.65,0,.076,1)  .1s forwards;
}
.Acourse-bar-link:hover >:nth-child(3){
  animation: courseLinkSlideText .2s cubic-bezier(0.65,0,.076,1)  0s forwards;
}
.slide{
  position: absolute;
  height: 40px;
  width: 100px;
  transform: skew(20deg);
  margin-top: -1px;
  margin-left: -250px;
  background: white;
  animation: courseLinkSliderev .2s cubic-bezier(0.65,0,.076,1)  0s forwards;}

  .slideArrow{
    position: absolute;
    display: flex;
    align-items:center;
    justify-content: center;
    height: 35px;
    width: 100px;
    margin-left:-250px;
    margin-top:-5px;
    font-size: 20px;
    color:  var(--color-darkblue);
    animation: courseLinkSlideArrowrev .2s cubic-bezier(0.65,0,.076,1)  0s forwards;
  }
  .slideText{
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    align-items:center;
    justify-content: center;
    height: 35px;
    width: 100px;
    font-size: 13px;
    color: white;
    margin-left: -10px;
    animation: courseLinkSlideTextrev .2s cubic-bezier(0.65,0,.076,1)  0s forwards;

  }
  
  @keyframes courseLinkSlideText {
    0% {
      margin-left: -10px;
    }
    100% {
      margin-left: 20px;
    }
  }
  @keyframes courseLinkSlide {
    0% {
      margin-left: -250px;
    }
    100% {
      margin-left: -150px;
    }
  }

  @keyframes courseLinkSlideArrow {
    0% {color: transparent;
      margin-left: -250px;
    }
    100% {
      margin-left:-80px;
    }
  }
  @keyframes courseLinkSlideTextrev {
    100% {
      margin-left: -10px;
    }
    0% {
      margin-left: 20px;
    }
  }
  @keyframes courseLinkSliderev {
    100% {
      margin-left: -250px;
    }
    0% {
      margin-left: -150px;
    }
  }

  @keyframes courseLinkSlideArrowrev {
    100% {color: transparent;
      margin-left: -250px;
    }
    0% {
      margin-left:-80px;
    }
  }


.Acourse-bar-linkactive{
  color: #4a89ff;
  font-weight: 900;
  cursor:default;

}
.Acourse-bar-link:hover{
  color: #4a89ff;
  font-weight: 900;
}




@media (max-width:480px) {
  #Acourses-picker-bar-container-disable{
    background-color: #f7f8fa;
    width: 100%;
    height: 50px;
    margin-top: 50px;
  
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    overflow: hidden;
    border-bottom: solid 0px #e6e6e6;
  }
  #Acourses-picker-bar{
    height: 40px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
    padding-left: 5px;
  }


  #home-courses-picker-bar-links{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100vw;
    margin-top: 20px;
  }

  .home-course-bar-link{
    position: relative;
    margin: 5px;
    width: 40%;
    height: 100px;
  padding: 0px;}



  .home-course-bar-link >:nth-child(1){
    animation: none;
  }
  .home-course-bar-link >:nth-child(2){
    animation: none;
  }
  .home-course-bar-link >:nth-child(3){
    animation: none;
  }

  .homeslide{
    position: absolute;
    height: 100%;
    width: 100%;
    transform: skew(20deg);
    margin-left: -150%;
    background:  var(--color-darkblue);
  }
  
    .homeslideArrow{
      position: absolute;
      display: flex;
      align-items:center;
      justify-content: center;
      height: 35px;
      width: 100px;
      margin-left:-145px;
      margin-top:-5px;
      font-size: 40px;
      color: white;
      z-index: 5;
    }
    .homeslideText{
      position: absolute;
      display: flex;
      flex-wrap: wrap;
      align-items:center;
      justify-content: center;
      height: 50%;
      padding-left: 15%;
      width: 100%;
      font-size: 15px;
      color:  var(--color-darkblue);
  
    }


}









/*--------------------------Course bar b- NOT IN USE------------------------------------*/
/*--------------------------Course bar b- NOT IN USE------------------------------------*/
/*--------------------------Course bar b- NOT IN USE------------------------------------*/
/*--------------------------Course bar b- NOT IN USE------------------------------------*/
#courses-picker-bar-container{
  background-color: #f7f8fa;
  width: 100%;
  height: 50px;
  margin-top: 5px;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}
  

#courses-picker-bar{
  width: 70%;
  height: 40px;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
#course-picker-circle{
  position: absolute;
  width: 40px;
  height: 40px;

  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;

  background-color: var(--color-darkblue);
  border-radius: 25px;
  color: white;
  animation: coursePickerexpandrev 0.45s cubic-bezier(0.65,0,.076,1) forwards;
}

#course-picker-circleA1{
  position: absolute;
  margin-top: -5px;
  margin-left: 10px;
  font-size: 25px;
  display: block;
  color: white;
  transition: color 0.2s;

}
#course-picker-circleA2{
  position: absolute;
  margin-top: -5px;
  margin-left: 10px;
  font-size: 25px;
  display: block;
  color: transparent;
  transition: color 0.2s;
}
#course-picker-text{
  font-family: "Lato", sans-serif;
  font-size: 20px;
  font-weight: 700;
  height: 100%;
  margin-top: 0px;
  
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-left: 60px;
  color: var(--color-darkblue);
  pointer-events: none;
}


#courses-picker-bar:hover > div:first-child{
  animation: coursePickerexpand 0.45s cubic-bezier(0.65,0,.076,1)  forwards;
}
#course-picker-circle:hover :first-child{
  color: transparent;
}
#course-picker-circle:hover :last-child{
  color: white;
}


#courses-picker-bar:hover > p{
  color: white;
  z-index: 5;
}
#courses-picker-bar:hover > div:last-child{
  display: flex;
}

#courses-picker-bar-links{
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  height: 100%;
  margin-top: -20px;
  margin-left: 30px;
  display: none;
  z-index: 6;
}



@keyframes coursePickerexpand {
    0% {
      width: 40px;
    }
    100% {
      width: 350px;
    }
  }@keyframes coursePickerexpandrev {
    0% {
      width: 350px;
    }
    100% {
      width: 40px;
    }
  }

  
.course-bar-link{
  color: #1865f2;
  font-weight: 700;
  cursor: pointer;
  margin: 5px;
  text-decoration: underline;
  font-size: 20px;
}
.course-bar-linkactive{
  color: #4a89ff;
  font-weight: 900;
  cursor:default;

}
.course-bar-link:hover{
  color: #4a89ff;
  font-weight: 900;
}












/*------------------------- SENIOR COURSE PAGE FOR PUPILS-----------------------------------------+*/
/*------------------------- SENIOR COURSE PAGE FOR PUPILS-----------------------------------------+*/
/*------------------------- SENIOR COURSE PAGE FOR PUPILS-----------------------------------------+*/
/*------------------------- SENIOR COURSE PAGE FOR PUPILS-----------------------------------------+*/
#courses-pupil-container-senior{
  color:white;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  background-color: #f7f8fa;
  font-size: 18px;
}

#courses-pupil-header-senior{
  color: var(--color-darkblue);
  font-weight: 800;
  font-size: 35px;
  font-family: "Lato", sans-serif;
  width: 80%;

  text-align: left;
  border-bottom: 5px solid var(--color-darkblue);
}



.courses-pupil-unit-header-progressBar{
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.progressDot{
  width: 15px;
  height: 15px;
  background-color: rgb(238, 238, 238);
  border: #b1b1b1 1px solid;
  border-radius: 50%;
  margin: 3px;
}


.progressDotInfo{
  position: absolute;
  transform:translateY(-120%) translateX(1%);
  transform-origin: 10px 0px;
  width: 100px;
  height: 50px;
  font-size: 12px;

  color: rgb(255, 255, 255);
  outline: rgb(182, 182, 182) solid 1px;
  background-color:var(--color-darkblue);
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
  z-index: 10;
}


.progressDotInfo::before{
  content: ' ';
  position: absolute;
  top: 100%;
  left: 8%;
  top: 98%;
  height: 30%;
  aspect-ratio: 1/1;
  color: rgb(255, 255, 255);
  background-color:var(--color-darkblue);
  clip-path: polygon(25% 0, 100% 0, 0% 100%);
}
.backgroundGold{
  background:gold;
  color: black;
  outline: none;
}
.backgroundGold::before{
  background:gold;
}


.progressDot:hover .progressDotInfo{
  display: flex;
  animation: popUpInfo .5s ease 0s 1 normal forwards;
}

@keyframes popUpInfo {
  0% {
    
      scale: 00%;
  }
  100% {
    scale: 100%;
  }
}






.bounce-in {
  animation: bounce-in var(--time) ease calc(var( --delay ) *1) forwards;
}

.bounce-in-delay0 {
  animation: bounce-in var(--time) ease calc(var( --delay ) *0) forwards;
}
.bounce-in-delay1 {
  animation: bounce-in var(--time) ease calc(var( --delay ) *1) forwards;
}
.bounce-in-delay2 {
  animation: bounce-in var(--time) ease calc(var( --delay ) *2) forwards;
}
.bounce-in-delay3 {
  animation: bounce-in var(--time) ease calc(var( --delay ) *3) forwards;
}
.bounce-in-delay4 {
  animation: bounce-in var(--time) ease calc(var( --delay ) *4) forwards;
}
.bounce-in-delay5 {
  animation: bounce-in var(--time) ease calc(var( --delay ) *5) forwards;
}
.bounce-in-delay6 {
  animation: bounce-in var(--time) ease calc(var( --delay ) *6) forwards;
}
.bounce-in-delay7 {
  animation: bounce-in var(--time) ease calc(var( --delay ) *7) forwards;
}
.bounce-in-delay8 {
  animation: bounce-in var(--time) ease calc(var( --delay ) *8) forwards;
}
.animHideStart{
  transform: scale(.0);
}



@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(.1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% { transform: scale(.9); }
  100% { transform: scale(1); }
}




.gelatine-delay0 {
  animation: bounce2 var(--time2) ease calc(var( --delay2 ) * 0)infinite;
}
.gelatine-delay1 {
  animation: bounce2 var(--time2) ease calc(var( --delay2 ) * 1)infinite;
}
.gelatine-delay2 {
  animation: bounce2 var(--time2) ease calc(var( --delay2 ) * 2)infinite;
}
.gelatine-delay3 {
  animation: bounce2 var(--time2) ease calc(var( --delay2 ) * 3)infinite;
}
.gelatine-delay4 {
  animation: bounce2 var(--time2) ease calc(var( --delay2 ) * 4)infinite;
}
.gelatine-delay5 {
  animation: bounce2 var(--time2) ease calc(var( --delay2 ) * 5)infinite;
}
.gelatine-delay6 {
  animation: bounce2 var(--time2) ease calc(var( --delay2 ) * 6)infinite;
}
.gelatine-delay7 {
  animation: bounce2 var(--time2) ease calc(var( --delay2 ) * 7)infinite;
}
.gelatine-delay8 {
  animation: bounce2 var(--time2) ease calc(var( --delay2 ) * 8)infinite;
}


@keyframes gelatine {
  from, to { transform: scale(1, 1); }
  75% { transform: scale(0.9, 1.1); }
  85% { transform: scale(1.1, 0.9); }
  95% { transform: scale(0.99, 1.05); }
}

@keyframes bounce2 {
	0%, 40%, 50%, 60%, 100% {transform: translateY(0);}
	45% {transform: translateY(-3px);}
	55% {transform: translateY(-1.5px);}
}

.courses-pupil-unit-senior{
  color:var(--color-darkblue);
  width: 30%;
  min-width: 300px;
  background-color: rgb(238, 238, 238);
  border: solid 1px rgb(219, 218, 218);
  border-radius: 10px;
  margin: 5px;
  
}
.courses-pupil-unit-header-senior{
  color:var(--color-darkblue);
  font-weight: 600;
  font-size: larger;
  font-family: "Lato", sans-serif;
}


.ahKeyAreaSeparator{
  color: #1865f2;
  font-weight: 600;
  font-size: 20px;
  font-family: "Lato", sans-serif;
  margin-top: 20px;
  border-bottom: 4px  #1865f2 solid;
  width: 100%;
  text-align: center;
}


.courses-pupil-key-area-senior{
  margin: 5%;
  margin-top: 5px;
  background-color: #f7f8fa;
  border: solid 1px rgb(219, 218, 218);
  border-radius: 10px;
}
.courses-pupil-key-area-header-senior{
  color: var(--color-darkblue);
  text-align: left;
  font-family: "Lato", sans-serif;
  font-weight: 500;
  font-size: 20px;
}


.courses-pupil-key-area-container-senior{
  color:var(--color-darkblue);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
}

.pupilKeyAreaTitle-senior{
  font-size: 20px;
  color: rgb(0, 0, 0);
  margin: 0px;
}
.pupilKeyAreaTitle-seniorTem{
  font-size: 20px;
  color: rgb(0, 0, 0);
  margin: 0px;
  text-align: center;
  display: flex;
  justify-content: center;
  width: 100%;
}
.pupilKeyArea-senior{
  width: 70%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;
  font-family: "Lato", sans-serif;
  font-weight: 500;
  font-size: 18px;
}


.pupilSeniorCell{
  text-align: center;
  font-size: 18px;
  color: var(--color-darkblue);
  background-color: rgb(245, 245, 245);
  border:  rgba(33, 36, 44, 0.50) solid 1px;
  border-radius: 4px;

  width:50%;
  margin:4px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.pupilSeniorCell:hover{
  border:  #1865f2 solid 2px;
  margin:3px;
}



.pupilSeniorCellCheckBox{
  content: " ";
  text-align: center;
  font-size: 18px;

  background-color: rgb(245, 245, 245);
 border:  rgba(33, 36, 44, 0.233) solid 1px;
  border-radius: 4px;
  width:25px;
  height: 25px;
  margin:3px;
  padding: 0px;
}
.pupilSeniorCellCheckBox img{
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
}



.pupilSeniorCellScoreBox{
  content: " ";
  text-align: center;
  display: flex;
  justify-content: center;
  align-items:baseline;
  font-size: 16px;

  color: var(--color-darkblue);
  font-weight: 350;
  background-color: rgb(245, 245, 245);
  border:  rgba(33, 36, 44, 0.184) solid 1px;
  border-radius: 4px;
  width:35px;
  height: 25px;
  margin:3px;
}

#hwShareButtons{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items:center;
}


#copyClipboardButton2{
  width: 30px;
  height: 30px;
  padding: 5px;
  margin: 10px;
  
  border-radius: 15px;
  border: solid grey 1px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
  
    cursor: pointer;

    font-size: 10px;
    margin-right: 10%;
  }

#sharetoGoogleCont{
  width: 200px;
  height: 50px;
  border-radius: 15px;
  border: solid grey 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  margin: 10px;
}
#sharetoGoogleCont:hover :last-child{
  animation: hithere 2s ease 0s 1;
}
.pulseThree {
  animation: pulse-animation 2s cubic-bezier(.42,.97,.52,1.49) 3;
}

.pulse {
  animation: pulse-animation 3s 1s cubic-bezier(.42,.97,.52,1.49) infinite;
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.103);
    transform: scale(1);
  } 50% {
    transform: scale(1.03);
  }
  100% {
    box-shadow: 0 0 0 13px rgba(0, 0, 0, 0);
    transform: scale(1);
  }
}


#revActInstructions{
  width: 100%;
  margin: 20px;
  color: var(--color-darkblue);
}