@import 
url("https://fonts.googleapis.com/css?family=Raleway");
@import 
url("https://fonts.googleapis.com/css?family=Montserrat");
@import 
url("https://fonts.googleapis.com/css?family=Sofia");
url("https://fonts.googleapis.com/css?family=Condiment");

body{
  margin:0px;
  padding:0px;
     }
 
.SITENAME{
     position:absolute;
     top:0.5%;
     left:5%;
     font-family: sofia;    
}

.site-logo{
   width:50px;
   height:50px;
   background-color: #000000;
   border-radius: 50%;
   border:2px solid white;
}

     #page-loader{
     position: absolute;
     display:block;
     z-index: -1;
     top:50%;
     left:50%;
     width: 50px;
     height:50px;
     border-radius: 50%;
     border:6px dotted grey;
     border-top: 6px solid skyblue;
     border-bottom: 6px solid skyblue;
     -webkit-animation: spin 0.6s linear infinite;
     animation: spin 0.6s linear infinite;

     }
     @-webkit-keyframes spin{
      0%{-webkit-transform: rotate(0deg);
          transform: rotate(0deg);}
      100%{-webkit-transform: rotate(360deg);
           transform: rotate(360deg);}
          }
         
     @keyframes spin{
     0%{-webkit-transform: rotate(0deg);
         transform: rotate(0deg);}
     100%{-webkit-transform: rotate(360deg);
          transform: rotate(360deg);}
                }
      

     div.Fcontainer{
      width: 100%;
      height:100%;
      position:fixed;
      margin: 0%;
      display:flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      font-size: 16px;
      font-family: Montserrat;
      font-weight: bold; 
      background-image:url("frontpagePix/fBackground.png");
      background-size: 100px; 
      background-attachment: fixed;
      background-repeat:repeat;
      box-sizing: border-box;
      padding: ;

            
   } 


   #container-content{ 
      width:90%;  
      height:90%; 
      position:relative;
      margin:auto;
      border: 1px solid white;
      border-radius: 7px;
      box-sizing: border-box;
      display: flex;
      flex-flow: row wrap;
      justify-content:space-between;
      align-items: center;
      background-image:conic-gradient(at 26.7% 66%, white 0deg, white 300deg, #0066ff 300deg) ; 
      padding: 0px 20px 0px 0px;

           }

   h1.frontpage-name{
      font-weight: bolder;
      font-family:sofia;
      background-color: rgba(0,0,0,0.9);
      font-size:16px;

   }

      
    #frontend-button{
      position:absolute;
      bottom:0px;
      left:43%;
      margin: auto;
      font-size: 16px;
      padding:2px 20px;
      width:;
      text-align: center;
      border:2px solid goldenrod;
      border-radius: 5px;
      border-bottom: 3px solid grey;
      background-color:white;
      color: red;
   }

   #frontend-button:hover{
      color:white;
      background-color: greenyellow;
      cursor: pointer;
      font-weight: bold;
   }

  
   div.Fmenu-bar{   
      display:grid;
      grid-template-columns: auto auto auto ;
      grid-gap:80px;
      justify-content:center;
      justify-items: center;
      margin-top: 0%;
      position: relative;
      
   }

   #frontpix-container{
      width:27%;
      height: 85%;
      position: relative;
   }

  
   div.Fmenu-bar>div{
      align-items:justify; 
      text-align: center;
      padding:0px;
      border-radius: 4px;
      font-size:12px;
      font-weight:bold;
      color:white;
      background-color: black;
      color:white;
      
               }

   
         #blackboard{
            width: 70%;
            height: 78%;
            background-color:black;
            color:#ffffff;
            position:relative;
            border:4px solid white;
            border-radius: 8px;
            box-shadow: 6px 8px 3px 0 rgba(0, 0, 0,0.4),
                        8px 8px 3px 0 rgba(0, 0, 0,0.4);
            padding: 5px 10px 0px;
            font-size: 16px;
            font-family: montserrat;
            overflow: hidden;
              }

      #greeting{
      color:white;
      font-family:montserrat;
      word-spacing: 3px;
      text-align: center;
      font-size: 14px;

      }

      p.sample-question{
         
         text-align: left;
         font-family: courier;
         font-weight: bold;
         border-left: 2px solid white;
         padding: 0px 0px 0px 5px;
         text-align: left;
         font-family: courier;
         font-weight: bold;
         border-left: 2px solid white;
         padding: 0px 0px 0px 5px;


      
      }
  

      form.sample-answers{
         text-align: left;
         font-family: courier;
         font-weight: bold;
         border-left: 2px solid white;
         padding: 0px 0px 0px 5px;
      
      }

     
      #ebu-intro{
         text-align: justify;
         transform:translate(0% ,0%);
         line-height: 17px;
         font-size: 16px;
         font-family: courier;
         font-weight: lighter;
         color:white;
         border-left: 2px solid white;
         padding: 0px 0px 0px 5px;
         
      }

      div.Ffooter{   
                  display:grid;
                  grid-template-columns: auto auto auto ;
                  grid-gap:50px;
                  justify-content: center;
                  margin-bottom:0%;
                  position:relative;
                  
               }
               div.Ffooter>div{
                  align-items:justify; 
                  text-align: center;
                  padding:0px;
                  border-radius: 4px;
                  font-family:montserrat;
                  font-size:14px;
                  font-weight:lighter;
                  color:white;
                  background-color: black;
                  color:white;
                  
                           }
              
   
                    
/* THE CODE FOR HOME PAGE */
   .quizWrapper{
      width: 100%;
      height:100%;
      position:fixed;
      margin: 0%;
      overflow-y:auto;
      box-sizing: border-box;
   } 

  footer{
   width:;
   margin :0%;
   background-color:#000000;
   text-align:center ;
   line-height:20px;
   padding :3px 0px 1px 0px ;
   border-radius:0px;
   position: relative;
   
     }
    
  

#quizBox{
  width:100%;
  height: ;
  margin: auto;
  position :relative;
  box-sizing:border-box;
  -webkit-animation-name: animatedHomepage;
  -webkit-animation-duration: 4s;
  animation-name: animatedHomepage;
  animation-duration: 4s;
               }
   @-webkit-keyframes animatedHomepage{
      from{opacity:0}
      to{opacity:1}
   }

   @keyframes animatedHomepage{
      from{opacity:0}
      to{opacity:1}
   }


  #header{
                width :;
                position : relative;
                margin :0 ;
                background-color:rgba(0,0,0, 0.9);
                text-align:center ;
                line-height:13px;
                box-sizing:border-box;
                padding: 0px 0px 1px;
         
                
  }


   .header-bar{
               width:;
               position:relative;
               background-color: black;
               text-align:center;
               padding:2px 0px;
               margin:0;
                       
               }
   
   #nav-icon{width: 100px;
             position:relative;
             float: right;
             font-size:30px;
             color:white;
             right:5px;
               
            }

    #nav-icon:hover{
             cursor:pointer;
             opacity:0.7;
                     
                      }

    #nav-modal{
               width:200px;
               height:100px;
               display:none;
               z-index:1;
               position :absolute;
               text-align: left;
               right : 0px;
               top:30px;
               bottom: -89px;
               padding:5px 10px 2px;
               background-color: white;
               color:green;
               font-size:14px;
               border:1px solid grey;              
               animation:navfadeIn 0.2s linear;
               -webkit-animation:navfadeIn 0.2s linear; 
                         }
               @-webkit-keyframes navfadeIn{
               from{transform:scale(0);}
               to{transform:scale(1);}
                                                    } 

              #nav-modal >p:hover{
                     color: red;
                   

                                 } 
                                 
              .menu-bar{margin: auto;
                        display:grid;
                        grid-template-columns: auto auto auto ;
                        grid-gap:0px;
                        justify-content: space-evenly;
                        padding:5px 5px 2px 5px;
                       }
                                   
              .menu-bar >div,button{
                              align-items:justify;
                              color:white;
                              background-color:black;
                              font-size:12px;
                              font-family:Georgia, 'Times New Roman', Times, serif;
                              text-align: center;
                              padding:3px;
                              border:0px solid grey;
                              border-radius: 4px;
                                 }
                           
               .menu-bar >div,button:hover{
                             opacity:0.6;
                                     }

              .menu-bar >div, button>a.menu-anchor{
                             text-decoration: none;
                             color:white;
                           
                              
                                 }
                                 

 #questionContainer{
                width :;
                position :relative;
                margin:0;
                overflow-y: auto;
                background-color:#ffffff;  
                font-family:Montserrat;
                font-weight:lighter;
                font-stretch: extra-expanded;
                font-size: 16px;
                color:#000000;
                text-align : justify;
                word-wrap: normal;
                box-sizing : border-box;
                padding :3px 7px 2px;
                border : ;
                line-height:32px;
                
         }


 #lectureVideo{
    width : 99%;
    height : 400px;
    position: relative;
    margin : auto;
              }
  
#testBtn{
     position:relative;
     font-size : 14px;
     box-sizing : border-box;
     margin : auto;
     border: 1px solid grey;
     border-radius : 5px;
     }


.table-modal{
width:100%;
text-align :center;
position:relative;
display:none;
margin:auto;
top:0px;
box-sizing: border-box;
padding: 1px 5px;
scroll-y: auto;
background-color:white;
border:2px solid grey;
box-shadow:0px 0px 3px 3px rgba(50, 50,50,0.4);
animation:fadeIn 0.5s;
-webkit-animation:fadeIn 0.5s; 
}
@-webkit-keyframes fadeIn{
from{transform:scale(0);}
to{transform:scale(1);}
}  	            

#mytable{width: 100%;}



.close{
       float:right;
       font-size:14px;
       margin-right:8px;
       font-weight:bold;
       background-color:white;
       }


.close:hover{
           color:red;
           font-weight: bolder;
           

            }

  
  
             
           
#nextButton{
    margin: auto ;
    border : 1px solid grey ;
    border-radius:5px;
    font-size:14px;
    position : relative;
    background-color : rgba(0,250,0,0.8) ;
    color : white ;
    box-sizing:border-box;
         }
  
  

   input[type="radio"]{
   width: 15px;
   height: 15px;
   font-family:verdana;
   
   border:5px solid gold;
   
   display:inline-block;
   float : left;
      } 


 input[type="button"]{
   color:white;
   font-family:verdana;
   background-color:red; 
   font-weight: normal; 
   font-size:16px;
   text-align:center;     
   postion:relative;
   border:1px solid white;
   border-radius:;
      }

  input[type="button"]:hover{
   cursor:pointer;
   opacity:0.7;
      } 


  .advert-container{
  width: 98%;
  height :400px;
  margin :auto;
  box-sizing : border-box;
  justify-content:center;
  background-color:white;
  position:relative;
  border-radius: 3px;
  display: none;
   } 


   .affiliateProductImage{
              width: 96%;
              height :398px; 
              box-sizing: border-box;
              padding: 1px;
                    }

   #affiliate-imageDiv{width:94%;
                      height:396px;
                     position:absolute;
                     animation-name:jumia;
                     animation-duration:0.2s;
                     animation-direction:linear;
                     animation-iteration-count:1;
                     animation-timing:ease-in-out;
                    -webkit-animation-name:jumia;
                    -webkit-animation-duration:0.2s;
                    -webkit-animation-direction:linear;
                    -webkit-animation-iteration-count:1;
                    -webkit-animation-timing:ease-in-out;
                       }
               
                    @keyframes jumia{
                        from{transform:scale(0); 
                        opacity:1;}
                        to{transform:scale(1); 
                        opacity:1;}
                      }
                      @webkit-keyframes jumia{
                        from{transform:scale(0);  
                        opacity:1;}
                        to{transform:scale(1); 
                        opacity:1;}
                    }
               


   #buyNowBtn{
             box-sizing :border-box;
             position:absolute;
             bottom:0px;
             right:0px;
             font-size:14px;
             border:1px solid grey;
             border-top-left-radius :3px;
             float:right;
             padding:1px;
             color:white;
             background-color:red;
             }
               
   #buyNowBtn:hover{
                    cursor:pointer;
                    opacity:0.6;
                  }

   #goodsname{
              position :absolute;
              box-sizing:border-box;
              float:left;
              bottom:0px;
              background-color: rgba(255,255,255,0.6);
              color:red;
              font-size:14px;
              font-weight: bold;
              padding-left: 5px;
              padding-right: 5px;
              border-top-right-radius: 3px;
         
            }

 #animals-container{
              width: 150px;
              height : 150px;
              position : absolute;
              box-sizing : border-box;
              bottom : 1px;
              right : 1px;
              padding:1px;
              }


 #animals-images{
            width: 148px;
            height:148px;
             }

p::first-letter{
    font-size:110%;
         }


div.text-3d1{

 font-size:20px;
 color: steelblue;
 font-family:New Times Roman;
 font-weight: bold;
 text-shadow: 0px 0px 0 rgb(251,251,251),
              1px -1px 0 rgb(247,247,247),
              2px -2px 0 rgb(243,243,243),
              3px -3px 0 rgb(239,239,239),
              4px -4px 0 rgb(235,235,235),
              5px -5px 0 rgb(231,231,231),
              6px -6px 0 rgb(227,227,227),
              7px -7px 0 rgb(224,224,224),
              8px -8px 0 rgb(220,220,220);
              
           }

div.text-3d2{
     font-size:11px;
     height:50px;
     position:relative;
     color:white;
     background-color:;
     font-family:Helvetica;
     font-weight: bold;
     text-shadow: ;  


  -webkit-animation:advertH 1s alternate ease-in-out 0s infinite;
   animation:advertH 1s alternate ease-in-out 0s infinite;
       }
   @-webkit-keyframes advertH{
  from{transform:scale(1); opacity:0;} 
  to{transform:scale(1); opacity:1;}
   }
  @keyframes advertH{
  from{transform:scale(1); opacity:0;} 
  to{transform:scale(1); opacity:1;}
  }


span.greenyellow{
   color:greenyellow;
   font-weight : bold;
}

span.gold{
color:gold;
font-weight : bold;
}

span.skyblue{
   color:skyblue;
   font-weight : bold;
      }

 a{
   color: steelblue;
   font-weight:bold;
   text-decoration:none;
   }

 a:hover{
   cursor:pointer;
   text-decoration:none;
   }


marquee{
width:100%;
height:15px;
color:red;
font-size:12px;
font-weight: lighter;
padding : px;
direction:right;
loop:infinite;
background-color:#ffffff;
scrollamount:100000;
scrolldelay:20000;
behavior:scroll;
margin-top:0%;
}


span.green{
color:green;
}

span.red{
color:red;
background-color:white;
font-family:helvetica;
}

span.steelblue{
color:steelblue;
font-family:helvetica;
}


hr{
 border:1px solid grey;
 

  }

span.red{
color:red;
background-color:rgba(255,255,255,0.1);
font-family:helvetica;


 }



h{
text-shadow:1px 1px rgba(0,0,0, 0.5),
            2px 2px rgba(0,0,0, 0.5),
            3px 3px rgba(0,0,0, 0.5),
            4px 4px rgba(0,0,0, 0.5),
            5px 5px rgba(0,0,0, 0.5);
color:gold;
font-family:san serif;
font-size:30px;
text-align:center;

 }



#directTotest{
text-align:center;
border:1px solid white;
top:2px;
right:20%;
position:absolute;
padding:5px;
font-size:18px;
color:white;
background-color:red;
animation-name:mytest;
animation-duration:2s;
animation-direction:linear;
animation-iteration-count:infinite;
animation-delay:0s;
animation-timing:ease-in-out;
-webkit-animation-name:mytest;
-webkit-animation-duration:2s;
-webkit-animation-direction:linear;
-webkit-animation-iteration-count:infinite;
-webkit-animation-delay:0s;
-webkit-animation-timing:ease-in-out;
 }

 @keyframes mytest{
 from{background-color:red;
      color:white;
      opacity:1;
      
    }
 to{background-color:red;
    color:red;
    opacity:1;
    
    }
  }

 @webkit-keyframes mytest{
 from{background-color:red;
      color:white;
      opacity:1;
      
    }
 to{background-color:red;
    color:red;
    opacity:1;
     
    }

 } 



table{
width:100%;
background-color:rgb(250,250,250);
color:black;
font-family:verdana;
font-size:16px;
text-align:justify;
padding:20px;
border:1px grey;
border-radius:2px;
margin:auto;
}

table,th{
border:0px solid black;
border-collapse:collapse;
font-family:Montserrat;
font-size:18px;
}

 th > td{
    height:18px;
    font-size:15px;
    background-color:rgba(240,0,0,0.8);
    color:black;
    vertical-align:top;
    text-align:center;
     }

 td{
    padding:5px;
     }

tr,td{
    text-align:left;
    color:black;
    box-shadow:1px 1px 1px rgba(0, 0,0,0.2),
               2px 2px 1px rgba(0, 0,0,0.2),
               3px 3px 1px rgba(0, 0,0,0.2),
               
     }
tr{border-bottom:1px solid grey ;}



input[type="text"]{
   color:red;
   font-family:verdana;
   background-color:white; 
   font-weight:normal; 
   font-size:16px;
   text-align:center;
   border:2px solid white;
   border-radius:5px;
   padding:3px;
      } 


iframe{
       width:100%;
       height:400px;
       border:0px solid white;
       border-radius:2px;
       box-shadow: ;
       position:relative;
        margin : auto ;
                   
        }

    

   ul li{

   float: ;
   height: ;
   text-align:justify;
   text-decoration:none;
   list-style-type:disc;
   font-size:15px;
   font-weight:bold;
   color:black;
   padding: 0px 5px 2px 0px;
   top:0px;
   border:0px solid white;
   border-radius:px;
   cursor:;
   
   }

 ul li:hover{
   cursor:pointer;
   background-color:white;
   color:red;
   border-radius:5px;
   opacity:0.6;
   }

ul#sitefooter li{
   display:inline;
   float:center;
   line-height:30px;
   text-align:center;
   text-decoration:none;
   font-size:15px;
   font-weight:lighter;
   color:black;
   padding: 5px 5px 5px 5px;
   top:0px;
   border:1px solid white;
   border-radius:px;
   background-color :black;
   color:white;
}

.answerSheet-parameters{
   display:grid;
   grid-template-columns: auto auto;
   grid-gap:3px;
   justify-content:space-evenly;
   padding:1px 2px;

}

.answerSheet-parameters>div{
    text-align: left;
}
.footerinfo{
   display:grid;
   grid-template-columns: auto auto auto;
   grid-gap:3px;
   justify-content:space-evenly;
   padding:1px 2px;
}
  
.footerinfo >div{
   align-items:justify;
   color:white;
   background-color:black;
   font-size:12px;
   font-weight: lighter;
   font-family:Montserrat;
   text-align: center;
   padding:1px;
}

.footerinfo >div>a.footanchor{
   text-decoration: none;
   color:white;
   font-weight: lighter;
    
}

.footerinfo >div>a.footanchor:hover{
   
   border-radius:3px;
   color:green;
}


@media only screen and (min-width :768px){  /* LANDSCAPE TABLETS, LAPTOPS, DESKTOPS*/
   h1.frontpage-name{font-size: 30px;}
   div.Fcontainer{ font-size:18px;}
   div.Fmenu-bar{ grid-template-columns: auto auto auto auto auto;}                                         
   div.Ffooter{grid-template-columns: auto auto auto auto auto;}    
   body{padding:0px 120px;}
   #quizBox{ border:1px solid grey; }
   #questionContainer{padding:2px 10px 5px; font-size:18px;}
   footer{padding:2px 20px 2px; }
   .advert-container{ width : 500px; height: 500px;}
  .affiliateProductImage{ width : 498px; height: 498px;}
   #animals-container{ width : 400px; height: 350px;}
   #animals-images{width : 390px; height: 340px; }
   #affiliate-imageDiv{ width : 498px; height: 498px;}
   #lectureVideo{width : 500px; height: 500px;}
   iframe{ width : 500px; height: 500px;}
   .footerinfo{
      grid-template-columns: auto auto auto auto auto;
     
       }
                    }

   @media only screen and (min-width :600px){  /* FOR LARGE PHONES AND TABLETS */
      h1.frontpage-name{font-size: 30px;}
      div.Fcontainer{ font-size:18px;}
      div.Fmenu-bar{ grid-template-columns: auto auto auto auto auto;}                                        
      div.Ffooter{grid-template-columns: auto auto auto auto auto;}  
   body{padding:0px 120px;}
   #quizBox{ border:1px solid grey; }
   #questionContainer{padding:2px 10px 5px; font-size:18px;}
   footer{padding:2px 20px 2px; }
  .advert-container{ width : 500px; height: 500px;}
  .affiliateProductImage{ width : 498px; height: 498px;}
   #animals-container{ width : 400px; height: 350px;}
   #animals-images{width : 390px; height: 340px; }
   #affiliate-imageDiv{ width : 498px; height: 498px;}
   #lectureVideo{width : 500px; height: 500px;}
   iframe{ width : 500px; height: 500px;}
   .footerinfo{
      grid-template-columns: auto auto auto auto auto;
     
       }
                    }

   @media only screen and (max-width :600px){  /*FOR SMALL SCREEN PHONES */
        .footerinfo{grid-template-columns: auto auto auto; }
                   }

   @media only screen and (orientation:portrait){  /*PORTRAIT ORIENTATION */
                     div.Fcontainer{padding: 0px 0px 0px 0px; 
                                    display:block;
                                    background-image:conic-gradient(at 50% 50%, #0066ff 0deg, #0066ff 360deg) ; 
                                     }
                   
                   #container-content{ display:block; 
                                      width:100%; 
                                      height:100%; 
                                      border:0px solid goldenrod; 
                                      padding:0px;
                                      box-sizing: border-box;
                                      background-image:conic-gradient(at 50% 45%, #0066ff 0deg, #0066ff 90deg, white 90deg, white 270deg, #0066ff 270deg) ; 
                                    }

                       
                  #frontpix-container{
                                      width: 100%;
                                      height: 100%;
                                      position:relative;
                                      margin:auto;
                                      z-index: 1;
                                          }                           
                
                                 #blackboard{
                                    width:100%; 
                                    height:100%;
                                    position:absolute; 
                                    margin:auto;
                                    z-index:4;
                                    bottom:0px;
                                    border:0px solid white;
                                    margin:auto;
                                    color:goldenrod;
                                    background-color:rgba(255,255,255,0);
                                    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0,0);
                                    padding:15% 2% 0%;}   

                     #greeting{font-size:14px; color:white; font-family: montserrat;} 
                    
                     hr.topic-underline{
                        border:0px solid white;
                     }
                     form.sample-answers{color:black;}
                     #ebu-intro{ color: black;font-weight:bold; line-height: 21px;  }                                 
                     #frontend-button{
                        bottom:4px;                       
                        font-size: 14px;
                        padding:4px 25px;                      
                        border:1px solid goldenrod;
                        border-radius: 5px;
                        border-bottom: 1px solid grey;
                        background-color:black;
                        color: white;
                                  }
                                            } 
                                            
   @media only screen and (orientation:landscape){  /*LANSCAPE ORIENTATION 
                   
                   */                                                 }