body 
  {
    background-image: url("../BeeBkgrd.jpg");
    background-color: rgb(0, 255, 255);
    background-attachment: fixed;
    background-size: cover;
  }


.main {
  width: 10px;
  height: 10px;
  position: relative;
  animation-name: flying-bee;
  animation-duration: 5s;
  animation-iteration-count: 3;
  animation-delay: 0s;
}


@keyframes flying-bee{
  0%   {left:0px; right:0px;}

  25%  {left:800px; right:0px;}

  50%  {left:800px; right:0px;}

  75%  {left:800px; right:0px;}

  100% {left:800px; right:0px;}
}



/* Style The Dropdown Button */
.dropbtn {
  background-color: #fffeec;
  color: black;
/*
  background-color: rgba(132,181,180,1);
  color: white;
  border: none;
*/
  padding: 16px;
  font-size: 16px;
  border: 5px solid #FF9900;
  border-radius: 16px;
  
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  
   border: 5px solid #FF9900;
 border-radius: 16px;
  
/*
background-color: rgba(231,231,231,1);
*/
  background-color: #fffeec;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 16px 2px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #FF9900

/*
.dropdown-content a:hover {background-color: #f1f1f1}
*/
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #FF9900;
  
/*
background-color: #33ffff;
*/
}

/* #################### THIS STYLES IPHONE 7, 8, ETC BOTH PORTRAIT AND LANDSCAPE ##################### */

.welcome-head{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 text-align: center;
 text-transform: none;
 top:150px;
 margin-left: 5px;
 margin-right: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.welcome-paragh{
 position: relative;
 background-color: #fffeec;
/*  background-color: red;  */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 top:150px; 
 margin-left: 5px;
 margin-right: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.head-paragh{
 position: absolute;
 background-color: #fffeec;
/* background-color: blue;  */
 font-size: 24px;
 text-align: center;
 text-transform: none;
 top:50px;
 margin-left: 150px;
/* margin-right: 5px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}


.sect1-paragh{
 position: absolute;
 background-color: #fffeec;
/*  background-color: blue; */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 margin-left: 5px;
 margin-right: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.sect2-paragh{
 position: absolute;
 background-color: #fffeec;
/*  background-color: yellow; */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 margin-left: 5px;
 margin-right: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}


.sect3-paragh{
 position: relative;
 background-color: #fffeec;
 font-size: 20px;
 text-align: left;
 text-transform: none;
 top: 40px;
 width:550px;
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.sect4-paragh{
 position: relative; 
 top: 50px;
 background-color: #fffeec;
 font-size: 16px;
 text-align: left;
 text-transform: none;
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
} 

.lbs-divide{
 position: absolute; 
 top: 1200px;
 width:500px;
 background-color: #fffeec;
 font-size: 16px;
 text-align: left;
 text-transform: none;
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
} 


.sect5-paragh{
 position: absolute;
 background-color: #fffeec;
 font-size: 16px;
 text-align: left;
/* text-transform: none;  */
 top: 380px;
 width:800px; 
 margin-left: 5px;
 margin-right: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.logoutbtn {
 position: relative;
 border:5px solid #FF9900; 
 border-radius:16px; 
 color:black;    
 background-color: #fffeec;
 font-size: 16px;
 font-weight:bold;
 text-align: center;
 text-transform: none;
 top:5px;
 margin-left: 150px;
 margin-right: 5px;
}

.lettershd-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 16px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:60px;
 margin-left: 50px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}

.letters-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 16px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:110px;
 margin-left: 50px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}



.mustcontainhd-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 16px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:60px;
 margin-left: 200px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}

.mustcontain-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 16px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:110px;
 margin-left: 220px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}

/*
.bee-entr-gm-wrd-vkb {
 position: absolute;
 background-color: #fffeec;
 font-size: 16px;
 text-align: left;
 text-transform: none;
 margin-left: 150px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
 color: black;
 top: 10px;
}
*/

.bgcreatd {
 position: absolute;
 background-color: #fffeec;
/*  background-color: yellow; */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 top: 320px;
 margin-left: 5px;
 margin-right: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.bgblvl {
 position: absolute;
 background-color: #fffeec; 
/*  background-color: yellow; */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 top: 450px;
 margin-left: 5px;
 margin-right: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.bgpercwrds {
 position: absolute;
 background-color: #fffeec;
/*  background-color: yellow; */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 top: 670px;
 margin-left: 5px;
 margin-right: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.bgpercpts {
 position: absolute;
 background-color: #fffeec;
/*  background-color: yellow; */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 top: 950px;
 margin-left: 5px;
 margin-right: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.select-stud-head{
 position: absolute;
 background-color: #fffeec;
 font-size: 32px;
 text-align: center;
 text-transform: none;
 top:50px;
 margin-left: 100px;
/*  margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}

.submbtn{
 border:5px solid #FF9900; 
 border-radius:16px; 
 background-color: #fffeec;
 font-size: 16px;
 font-weight:bold;
 text-align: center;
 text-transform: none;
 margin-left: 50px;
 margin-right: 50px;
 color: rgba(132,181,180,1);
}


.bee-entr-gm-wrd-vkb {
 position: absolute;
 background-color: #fffeec;
 font-size: 16px;
 text-align: center;
 text-transform: none;
 width: 250px;
 margin-left: 200px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
/* color: black; */
 top: 10px;
}


.display {
 position: absolute;
 top: 710px;
 color: #84b5b4;
 font-size: 32px;
 margin-left: 200px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;  
}


.entr-gm-wrd {
  position: absolute;
 top: 210px;
 background-color: #fffeec;
 font-size: 24px;
 text-align: left;
 text-transform: none;
 margin-left: 150px;
 margin-right: 150px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);  
}

.bee-entr-gm-wrd-vkb {
 position: absolute;
 background-color: #fffeec;
 font-size: 16px;
 text-align: center;
 text-transform: none;
 width: 250px;
 margin-left: 200px;
 border: 5px solid #FF9900;
 border-radius: 16px;
/* color: rgba(132,181,180,1); */
 color: black; 
 top: 10px;
}

.gm-reslts-vkb {
 position: absolute;
 top: 800px;
 background-color: #fffeec;
 font-size: 16px;
 text-align: left;
 text-transform: none;
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1); 
} 


.vkb-btn {
 color: #84b5b4;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-clr {
 position: fixed;
 top: 190px;
 color: #84b5b4;
 margin-left: 256px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}


.vkb-btn-rtn {
   position: fixed;
 top: 650px;
 color: #84b5b4;
 margin-left: 154px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px; 
}


.vkb-btn-1 {
  position: fixed;
 top: 256px; 
 font-size: 20px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 246px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-2 {
  position: fixed;
 top: 322px;
 font-size: 20px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 295px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-3 {
  position: fixed;
 top: 390px;
 font-size: 20px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 350px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-4 {
  position: fixed;
 top: 450px;
 font-size: 20px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 340px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-5 {
 position: fixed;
 top: 517px;
 font-size: 20px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 278px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-6 {
  position: fixed;
 top: 580px;
 font-size: 20px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 210px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-7 {
  position: fixed;
 top: 520px;
 font-size: 20px;
 font-weight: bold;
 color: #84b5b4; 
 margin-left: 147px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-8 {
  position: fixed;
 top: 450px;
 font-size: 20px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 107px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-9 {
  position: fixed;
 top: 390px;
 font-size: 20px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 96px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-10 {
  position: fixed;
 top: 322px;
 font-size: 20px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 115px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}
.vkb-btno {
 position: absolute;
 top: 1000px;
 color: transparent;
visibility: hidden;
 background-color: transparent;
}

.word-result-msg-original {
 position: absolute;
 top: 400px;
 background-color: #fffeec;
 font-size: 24px;
 text-align: left;
 text-transform: none;
 margin-left: 50px;
/* margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}


.word-result-msg {
 position: absolute;
 top: 750px;
 background-color: #fffeec;
 font-size: 16px;
 width: 450px;
 text-align: center;
 text-transform: none;
 margin-left: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}


.gm-reslts-vkb {
 position: absolute;
 top: 825px;
 background-color: #fffeec;
 font-size: 16px;
 text-align: left;
 text-transform: none;
 margin-left: 5px;
/* margin-right: 10px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1); 
} 

.chg-pswd-hdr {
 position: absolute;
 top: 10px;
 background-color: #fffeec;
 font-size: 24px;
 text-align: left;
 text-transform: none;
 margin-left: 200px;
/* margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);   
}


.chg-pswd-new {
 position: absolute;
 top: 100px; 
 background-color: #fffeec;
 font-size: 20px;
 text-align: left;
 text-transform: none;
 margin-left: 200px;
/* margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);   
}

.chg-pswd-rpt {
 position: absolute;
 top: 150px; 
 background-color: #fffeec;
 font-size: 20px;
 text-align: left;
 text-transform: none;
 margin-left: 200px;
/* margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);   
}


.cp-submbtn{
 position: absolute;
 top: 200px; 
 border:5px solid #FF9900; 
 border-radius:16px; 
 background-color: #fffeec;
 font-size: 20px;
 font-weight:bold;
 text-align: center;
 text-transform: none;
 margin-left: 200px;
/* margin-right: 150px; */
 color: rgba(132,181,180,1);
}


/* ############################  FOR ????????????  - MIN 568PX ######################### */
@media only screen and (min-width: 568px) {
    
.main {
  width: 10px;
  height: 10px;
  position: relative;
  animation-name: flying-bee;
  animation-duration: 5s;
  animation-iteration-count: 3;
  animation-delay: 0s;
}





.head-paragh{
 position: relative;
 background-color: #fffeec; 
/* background-color: green; */
 font-size: 24px;
 text-align: center;
 text-transform: none;
 top:50px;
 margin-left: 5px;
 margin-right: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.sect1-paragh{
 position: absolute;
 background-color: #fffeec;
/* background-color: green; */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 margin-left: 5px;
 margin-right: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.sect2-paragh{
 position: absolute;
 background-color: #fffeec;
/*  background-color: yellow; */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 margin-left: 5px;
 margin-right: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}


.sect3-paragh{
 position: relative;
 background-color: #fffeec;
 font-size: 20px;
 text-align: left;
 text-transform: none;
 top: 40px;
 width:550px;
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.sect4-paragh{
 position: relative; 
 top: 50px;
 background-color: #fffeec;
 font-size: 16px;
 text-align: left;
 text-transform: none;
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
} 


.lettershd-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 16px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:100px;
 margin-left: 50px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}

.letters-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 16px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:160px;
 margin-left: 50px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}



.mustcontainhd-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 16px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:100px;
 margin-left: 200px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}

.mustcontain-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 16px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:160px;
 margin-left: 220px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}


.bgcreatd {
 position: absolute;
 background-color: #fffeec;
/*  background-color: yellow; */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 top: 320px;
 margin-left: 5px;
 margin-right: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}

.bgblvl {
 position: absolute;
 background-color: #fffeec; 
/*  background-color: yellow; */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 top: 450px;
 margin-left: 5px;
 margin-right: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}

.bgpercwrds {
 position: absolute;
 background-color: #fffeec;
/*  background-color: yellow; */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 top: 650px;
 margin-left: 5px;
 margin-right: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}

.bgpercpts {
 position: absolute;
 background-color: #fffeec;
/*  background-color: yellow; */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 top: 850px;
 margin-left: 5px;
 margin-right: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}

.entr-gm-wrd {
  position: absolute;
 top: 210px;
 background-color: #fffeec;
 font-size: 24px;
 text-align: left;
 text-transform: none;
 margin-left: 150px;
 margin-right: 150px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);  
}


.bee-entr-gm-wrd-vkb {
 position: absolute;
 background-color: #fffeec;
 font-size: 16px;
 text-align: center;
 text-transform: none;
 width: 250px;
 margin-left: 200px;
 border: 5px solid #FF9900;
 border-radius: 16px;
/* color: rgba(132,181,180,1); */
 color: black; 
 top: 10px;
}


.display {
 position: absolute;
 top: 650px;
 color: #84b5b4;
 font-size: 32px;
 margin-left: 200px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;  
}

.gm-reslts-vkb {
 position: absolute;
 top: 950px;
 background-color: #fffeec;
 font-size: 16px;
 text-align: left;
 text-transform: none;
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1); 
} 


.vkb-btn {
 color: #84b5b4;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-clr {
 position: fixed;
 top: 20px;
 color: #84b5b4;
 margin-left: 700px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}


.vkb-btn-rtn {
   position: fixed;
 top: 475px;
 color: #84b5b4;
 margin-left: 600px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px; 
}


.vkb-btn-1 {
  position: fixed;
 top: 88px; 
 font-size: 20px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 690px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-2 {
  position: fixed;
 top: 150px;
 font-size: 20px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 750px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-3 {
  position: fixed;
 top: 210px;
 font-size: 20px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 800px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-4 {
  position: fixed;
 top: 275px;
 font-size: 20px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 800px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-5 {
 position: fixed;
 top: 335px;
 font-size: 20px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 750px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-6 {
  position: fixed;
 top: 405px;
 font-size: 20px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 650px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-7 {
  position: fixed;
 top: 335px;
 font-size: 20px;
 font-weight: bold;
 color: #84b5b4; 
 margin-left: 550px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-8 {
  position: fixed;
 top: 275px;
 font-size: 20px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 510px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-9 {
  position: fixed;
 top: 208px;
 font-size: 20px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 500px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-10 {
  position: fixed;
 top: 150px;
 font-size: 20px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 540px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}
.vkb-btno {
 position: absolute;
 top: 1000px;
 color: transparent;
visibility: hidden;
 background-color: transparent;
}

.word-result-msg-original {
 position: absolute;
 top: 400px;
 background-color: #fffeec;
 font-size: 24px;
 text-align: left;
 text-transform: none;
 margin-left: 50px;
/* margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}


.word-result-msg {
 position: absolute;
 top: 750px;
 background-color: #fffeec;
 font-size: 16px;
 width: 450px;
 text-align: center;
 text-transform: none;
 margin-left: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}


.gm-reslts-vkb {
 position: absolute;
 top: 825px;
 background-color: #fffeec;
 font-size: 16px;
 text-align: left;
 text-transform: none;
 margin-left: 5px;
/* margin-right: 10px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1); 
 z-index: 1;
} 

.chg-pswd-hdr {
 position: absolute;
 top: 10px;
 background-color: #fffeec;
 font-size: 24px;
 text-align: left;
 text-transform: none;
 margin-left: 200px;
/* margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);   
}


.chg-pswd-new {
 position: absolute;
 top: 100px; 
 background-color: #fffeec;
 font-size: 20px;
 text-align: left;
 text-transform: none;
 margin-left: 200px;
/* margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);   
}

.chg-pswd-rpt {
 position: absolute;
 top: 150px; 
 background-color: #fffeec;
 font-size: 20px;
 text-align: left;
 text-transform: none;
 margin-left: 200px;
/* margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);   
}


.cp-submbtn{
 position: absolute;
 top: 200px; 
 border:5px solid #FF9900; 
 border-radius:16px; 
 background-color: #fffeec;
 font-size: 20px;
 font-weight:bold;
 text-align: center;
 text-transform: none;
 margin-left: 200px;
/* margin-right: 150px; */
 color: rgba(132,181,180,1);
}


}

/* ############################  FOR iPAD PORTRAIT - MIN 768PX ######################### */
@media only screen and (min-width: 768px) {

.main {
  width: 10px;
  height: 10px;
  position: relative;
  animation-name: flying-bee;
  animation-duration: 5s;
  animation-iteration-count: 3;
  animation-delay: 0s;
}

.head-paragh{
 position: fixed;
 background-color: #fffeec;
 font-size: 20px;
 text-align: center;
 text-transform: none;
 top: 100px;
 margin-left: 250px;
 /* margin-right: 5px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}


.sect1-paragh{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 text-align: left;
 text-transform: none;
 margin-left: 10px;
 margin-right: 50px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.sect2-paragh{
 position: absolute;
 background-color: #fffeec;
/* background-color: blue; */
 font-size: 20px;
 text-align: left;
/* text-transform: none; */
 margin-left: 75px;
 margin-right: 75px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.sect3-paragh{
 position: absolute;
 background-color: #fffeec;
 font-size: 20px;
 text-align: center;
 text-transform: none;
 top: 250px;
 width:400px; 
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.sect4-paragh{
 background-color: #fffeec;
 font-size: 16px;
 text-align: left;
 text-transform: none;
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.sect5-paragh{
 position: absolute;
 background-color: #fffeec;
 font-size: 16px;
 text-align: center;
/* text-transform: none; */
 top: 380px;
 width:100%; 
 margin-left: 5px;
 margin-right: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.submbtn{
 border:5px solid #FF9900; 
 border-radius:16px; 
 color:black;    
 background-color: #fffeec;
 font-size: 16px;
 font-weight:bold;
 text-align: center;
 text-transform: none;
 margin-left: 150px;
 margin-right: 150px;
}

.logoutbtn {
 border:5px solid #FF9900; 
 border-radius:16px; 
 color:black;    
 background-color: #fffeec;
 font-size: 16px;
 font-weight:bold;
 text-align: center;
 text-transform: none;
 /*
 margin-left: 150px;
 margin-right: 150px;
 */
}


.select-stud-head{
 position: absolute;
 background-color: #fffeec;
 font-size: 32px;
 text-align: center;
 text-transform: none;
 top:50px;
 margin-left: 100px;
/*  margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}

.select-stud-paragh{
 position: absolute;
 background-color: #fffeec;
 font-size: 23px;
 text-align: left;
 text-transform: none;
 top:110px;
 margin-left: 250px;
 margin-right: 250px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.bee-select-stud-form {
 position: absolute; 
 background-color: #fffeec;
 font-size: 32px;
 text-align: center;
 text-transform: none;
 top:150px;
 margin-left: 500px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.lettershd-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 20px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:100px;
 margin-left: 50px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}

.letters-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 20px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:160px;
 margin-left: 50px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}



.mustcontainhd-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 20px;
 font-weight:bold;
/* padding:5px; */
 text-align: left;
 text-transform: none;
 top:100px;
 margin-left: 200px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}

.mustcontain-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 20px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:160px;
 margin-left: 220px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}


.entr-gm-wrd {
  position: absolute;
 top: 210px;
 background-color: #fffeec;
 font-size: 24px;
 text-align: left;
 text-transform: none;
 margin-left: 150px;
 margin-right: 150px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);  
}



.bee-entr-gm-wrd-vkb {
 position: absolute;
 background-color: #fffeec;
 font-size: 20px;
 text-align: left;
 text-transform: none;
 margin-left: 100px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1); 
/* color: black; */
 top: 20px;
}


.display {
 position: absolute;
 top: 500px;
 color: #84b5b4;
 font-size: 32px;
 margin-left: 1000px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;  
}

.gm-reslts-vkb {
 position: absolute;
 top: 590px;
 background-color: #fffeec;
 font-size: 16px;
 text-align: left;
 text-transform: none;
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1); 
} 


.word-result-msg-original {
 position: absolute;
 top: 400px;
 background-color: #fffeec;
 font-size: 24px;
 text-align: left;
 text-transform: none;
 margin-left: 50px;
/* margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}




.word-result-msg {
 position: absolute;
 top: 250px;
 background-color: #fffeec;
 font-size: 24px;
 text-align: center;
 text-transform: none;
 width: 700px;
 margin-left: 50px;
/* margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}





.vkb-btn {
 color: #84b5b4;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-clr {
 position: fixed;
 top: 50px;
 color: #84b5b4;
 margin-left: 800px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}


.vkb-btn-rtn {
   position: fixed;
 top: 424px;
 color: #84b5b4;
 margin-left: 800px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px; 
}

.vkb-btn-a {
  position: fixed;
 top: 120px;
 color: #84b5b4;
 margin-left: 1000px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}


.vkb-btn-1 {
  position: fixed;
 top: 120px; 
 font-size: 42px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 800px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-2 {
  position: fixed;
 top: 150px;
 font-size: 42px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 962px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-3 {
  position: fixed;
 top: 190px;
 font-size: 42px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 1035px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-4 {
  position: fixed;
 top: 265px;
 font-size: 42px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 1036px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-5 {
 position: fixed;
 top: 340px;
 font-size: 42px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 960px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-6 {
  position: fixed;
 top: 350px;
 font-size: 42px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 800px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-7 {
  position: fixed;
 top: 340px;
 font-size: 42px;
 font-weight: bold;
 color: #84b5b4; 
 margin-left: 765px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-8 {
  position: fixed;
 top: 275px;
 font-size: 42px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 690px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-9 {
  position: fixed;
 top: 200px;
 font-size: 42px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 684px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-10 {
  position: fixed;
 top: 150px;
 font-size: 42px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 500px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}
.vkb-btno {
 position: absolute;
 top: 1000px;
 color: transparent;
visibility: hidden;
 background-color: transparent;
}

.chg-pswd-hdr {
 position: absolute;
 top: 10px;
 background-color: #fffeec;
 font-size: 24px;
 text-align: left;
 text-transform: none;
 margin-left: 200px;
/* margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);   
}


.chg-pswd-new {
 position: absolute;
 top: 100px; 
 background-color: #fffeec;
 font-size: 20px;
 text-align: left;
 text-transform: none;
 margin-left: 200px;
/* margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);   
}

.chg-pswd-rpt {
 position: absolute;
 top: 150px; 
 background-color: #fffeec;
 font-size: 20px;
 text-align: left;
 text-transform: none;
 margin-left: 200px;
/* margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);   
}


.cp-submbtn{
 position: absolute;
 top: 200px; 
 border:5px solid #FF9900; 
 border-radius:16px; 
 background-color: #fffeec;
 font-size: 20px;
 font-weight:bold;
 text-align: center;
 text-transform: none;
 margin-left: 200px;
/* margin-right: 150px; */
 color: rgba(132,181,180,1);
}



}

/* ############################  FOR TABLETS, iPAD'S LANDSCAPE - MIN 992PX ######################### */
@media only screen and (min-width: 900px) {


.main {
  width: 100px;
  height: 100px;
  position: relative;
  animation-name: flying-bee;
  animation-duration: 10s;
  animation-iteration-count: 3;
  animation-delay: 0s;
}



.welcome-head{
 position: absolute;
 background-color: #fffeec;
 font-size: 32px;
 text-align: center;
 text-transform: none;
 top:150px;
 margin-left: 300px;
/*  margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.welcome-paragh{
 position: relative;
 background-color: #fffeec;
/*  background-color: red; */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 top:120px;
 margin-left: 150px;
 margin-right: 150px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}


.head-paragh{
 position: fixed;
 background-color: #fffeec;
 font-size: 32px;
 text-align: center;
 text-transform: none;
 top:50px;
 margin-left: 300px;
/*  margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}

.sect1-paragh{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 text-align: left;
 text-transform: none;
 margin-left: 150px;
 margin-right: 50px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}

.sect2-paragh{
 position: absolute;
 background-color: #fffeec;
/*  background-color: green; */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 margin-left: 150px;
 margin-right: 150px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}

.sect3-paragh{
 position: relative;
 background-color: #fffeec;
 font-size: 20px;
 text-align: left;
 text-transform: none;
 top: 40px;
 width:500px; 
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}

.sect4-paragh{
 position: relative; 
 top: 50px;
 background-color: #fffeec;
 font-size: 16px;
 text-align: left;
 text-transform: none;
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
} 

/*
.sect3-paragh{
 position: absolute;
 background-color: #fffeec;
 font-size: 20px;
 text-align: center;
 text-transform: none;
 top: 290px;
 width:800px;
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.sect4-paragh{
 background-color: #fffeec;
 font-size: 16px;
 text-align: left;
 text-transform: none;
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

*/
.sect5-paragh{
 position: absolute;
 background-color: #fffeec;
 font-size: 16px;
 text-align: center;
/* text-transform: none; */
 top: 380px;
 width:100%; 
 margin-left: 5px;
 margin-right: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}


.submbtn{
 border:5px solid #FF9900; 
 border-radius:16px; 
 background-color: #fffeec;
 font-size: 16px;
 font-weight:bold;
 text-align: center;
 text-transform: none;
 margin-left: 150px;
 margin-right: 150px;
 color: rgba(132,181,180,1);
}


.submbtngmdtl{

 border:5px solid #FF9900; 
 border-radius:16px; 
 background-color: #fffeec;
 font-size: 16px;
 font-weight:bold;
 text-align: center;
 text-transform: none;
 margin-left: 150px;
 margin-right: 150px;
/* color: rgba(132,181,180,1); */
 top: 200px;
}



.logoutbtn {
border:5px solid #FF9900; 
 border-radius:16px; 
 color:black;    
 background-color: #fffeec;
 font-size: 16px;
 font-weight:bold;
 text-align: center;
 text-transform: none;
 /*
 margin-left: 150px;
 margin-right: 150px;
 */
}

.lettershd-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:100px;
 margin-left: 50px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}

.letters-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:160px;
 margin-left: 50px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}



.mustcontainhd-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:100px;
 margin-left: 200px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}

.mustcontain-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:160px;
 margin-left: 220px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}


.entr-gm-wrd {
  position: absolute;
 top: 210px;
 background-color: #fffeec;
 font-size: 24px;
 text-align: left;
 text-transform: none;
 margin-left: 150px;
 margin-right: 150px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);  
}



.bee-entr-gm-wrd-vkb {
 position: absolute;
 background-color: #fffeec;
 font-size: 28px;
 text-align: center;
 text-transform: none;
 margin-left: 250px;
/* margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
/* color: black; */
 top: 10px;
 width: 400px;
}


.display {
 position: absolute;
 top: 555px;
 color: #84b5b4;
 font-size: 32px;
 margin-left: 875px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;  
}

.gm-reslts-vkb {
 position: absolute;
 top: 620px;
 background-color: #fffeec;
 font-size: 16px;
 text-align: left;
 text-transform: none;
 margin-left: 10px;
/* margin-right: 10px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1); 
} 

.word-result-msg-original {
 position: absolute;
 top: 400px;
 background-color: #fffeec;
 font-size: 24px;
 text-align: left;
 text-transform: none;
 margin-left: 50px;
/* margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}




.word-result-msg {
 position: absolute;
 top: 250px;
 background-color: #fffeec;
 font-size: 24px;
 text-align: center;
 text-transform: none;
 width: 700px;
 margin-left: 50px;
/* margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}


.keyboard {
 position: fixed;
 top: 10px;
 margin-left: 500px;
}



.vkb-btn {
 color: #84b5b4;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-clr {
 position: fixed;
 top: 20px;
 color: #84b5b4;
 margin-left: 925px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}


.vkb-btn-rtn {
   position: fixed;
 top: 480px;
 color: #84b5b4;
 margin-left: 815px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px; 
}

.vkb-btn-1 {
  position: fixed;
 top: 80px; 
 font-size: 32px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 900px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 25px;
}

.vkb-btn-2 {
  position: fixed;
 top: 150px;
 font-size: 32px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 962px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 25px;
}

.vkb-btn-3 {
  position: fixed;
 top: 215px;
 font-size: 32px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 1035px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 25px;
}

.vkb-btn-4 {
  position: fixed;
 top: 280px;
 font-size: 32px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 1036px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 25px;
}

.vkb-btn-5 {
 position: fixed;
 top: 350px;
 font-size: 32px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 960px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 25px;
}

.vkb-btn-6 {
  position: fixed;
 top: 410px;
 font-size: 32px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 850px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 25px;
}

.vkb-btn-7 {
  position: fixed;
 top: 340px;
 font-size: 32px;
 font-weight: bold;
 color: #84b5b4; 
 margin-left: 765px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 25px;
}

.vkb-btn-8 {
  position: fixed;
 top: 275px;
 font-size: 32px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 690px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 25px;
}

.vkb-btn-9 {
  position: fixed;
 top: 210px;
 font-size: 32px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 670px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 25px;
}

.vkb-btn-10 {
  position: fixed;
 top: 150px;
 font-size: 32px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 750px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 25px;
}
.vkb-btno {
 position: absolute;
 top: 1000px;
 color: transparent;
visibility: hidden;
 background-color: transparent;
}


.chg-pswd-hdr {
 position: absolute;
 top: 10px;
 background-color: #fffeec;
 font-size: 24px;
 text-align: left;
 text-transform: none;
 margin-left: 200px;
/* margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);   
}


.chg-pswd-new {
 position: absolute;
 top: 100px; 
 background-color: #fffeec;
 font-size: 20px;
 text-align: left;
 text-transform: none;
 margin-left: 200px;
/* margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);   
}

.chg-pswd-rpt {
 position: absolute;
 top: 150px; 
 background-color: #fffeec;
 font-size: 20px;
 text-align: left;
 text-transform: none;
 margin-left: 200px;
/* margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);   
}


.cp-submbtn{
 position: absolute;
 top: 200px; 
 border:5px solid #FF9900; 
 border-radius:16px; 
 background-color: #fffeec;
 font-size: 20px;
 font-weight:bold;
 text-align: center;
 text-transform: none;
 margin-left: 200px;
/* margin-right: 150px; */
 color: rgba(132,181,180,1);
}



}


/* ############################  FOR TABLETS, iPAD'S PORTRAIT & LANDSCAPE - MIN 992PX ######################### */
@media only screen and (min-width: 1300px) {

.main {
  top: 10px;
  margin-left: 100px;
  width: 100px;
  height: 100px;
  position: absolute;
  animation-name: flying-bee;
  animation-duration: 5s;
  animation-iteration-count: 3;
  animation-delay: 0s;
}

.head-paragh{
 position: fixed;
 background-color: #fffeec;
 font-size: 32px;
 text-align: center;
 text-transform: none;
 top:50px;
 margin-left: 500px;
/*  margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}

.welcome-head{
 position: absolute;
 background-color: #fffeec;
 font-size: 32px;
 text-align: center;
 text-transform: none;
 top:150px;
 margin-left: 500px;
/*  margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.welcome-paragh{
 position: relative;
 background-color: #fffeec;
/*  background-color: red; */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 top:120px;
 margin-left: 150px;
 margin-right: 150px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}


.select-stud-head{
 position: absolute;
 background-color: #fffeec;
 font-size: 32px;
 text-align: center;
 text-transform: none;
 top:50px;
 margin-left: 500px;
/*  margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}

.select-stud-paragh{
 position: absolute;
 background-color: #fffeec;
 font-size: 23px;
 text-align: left;
 text-transform: none;
 top:110px;
 margin-left: 250px;
 margin-right: 250px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.bee-select-stud-form {
 position: absolute; 
 background-color: #fffeec;
 font-size: 32px;
 text-align: center;
 text-transform: none;
 top:150px;
 margin-left: 500px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}




.sect1-paragh{
 position: absolute;
 top: 270;
 background-color: #fffeec;
 font-size: 24px;
 text-align: left;
 text-transform: none;
 margin-left: 150px;
 margin-right: 150px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}




.word-result-msg {
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 text-align: left;
 text-transform: none;
 margin-left: 100px;
/* margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}

.word-result-msg-original {
 position: absolute;
 top: 400px;
 background-color: #fffeec;
 font-size: 24px;
 text-align: left;
 text-transform: none;
 margin-left: 50px;
/* margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}


.entr-gm-wrd {
  position: absolute;
 top: 210px;
 background-color: #fffeec;
 font-size: 24px;
 text-align: left;
 text-transform: none;
 margin-left: 150px;
 margin-right: 150px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);  
}


.bee-entr-gm-wrd-vkb {
 position: absolute;
 background-color: #fffeec;
 font-size: 28px;
 text-align: center;
 text-transform: none;
 margin-left: 250px;
/* margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
/* color: black; */
 top: 5px;
 width: 400px;
}



.sect2-paragh{
 position: absolute;
 background-color: #fffeec;
/*  background-color: red; */
 font-size: 20px;
 text-align: left;
 text-transform: none;
 margin-left: 150px;
 margin-right: 150px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}

.sect3-paragh{
 position: relative;
 background-color: #fffeec;
 font-size: 20px;
 text-align: left;
 text-transform: none;
 top: 30px;
 width:600px; 
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}

.sect4-paragh{
 position: relative; 
 top: 10px;
 background-color: #fffeec;
 font-size: 16px;
 text-align: left;
 text-transform: none;
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1); 
} 

.game-results-ori {
 position: absolute; 
 top: 500px;
 background-color: #fffeec;
 font-size: 16px;
 text-align: left;
 text-transform: none;
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1); 
}




.sect4-paraghgmdtl{
 position: relative; 
 top: 20px;
 background-color: #fffeec;
 font-size: 16px;
 text-align: left;
 text-transform: none;
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
/* color: rgba(132,181,180,1); */
} 



.sect5-paragh{
 position: absolute;
 background-color: #fffeec;
 font-size: 16px;
 text-align: center;
/* text-transform: none; */
 top: 100px;
 width:100%; 
 margin-left: 5px;
 margin-right: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}


.submbtngmdtl{
 border:5px solid #FF9900; 
 border-radius:16px; 
 background-color: #fffeec;
 font-size: 16px;
 font-weight:bold;
 text-align: center;
 text-transform: none;
 margin-left: 150px;
 margin-right: 150px;
/* color: rgba(132,181,180,1); */
 top:20px;
}




.select-beegrp {
 position: fixed;
 top: 110px;
 background-color: #fffeec;
 font-size: 20px;
 text-align: left;
 text-transform: none;
 margin-left: 10px;
/* margin-right: 10px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 column-width: inherit;
}

.select-bgrp-state {
 position: fixed;
 top: 110px;
/* background-color: #fffeec; */
background-color: blue;
 font-size: 20px;
 text-align: left;
 text-transform: none;
 margin-left: 50px;
/* margin-right: 10px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 width: 20px;
}





.tblgrp-hd {
 position: relative; 
 top: 10px;
 background-color: #fffeec;
 font-size: 16px;
 text-align: left;
 text-transform: none;
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 border-spacing: 20px;
 border-collapse: collapse;
 width: 100%;
} 

.tbl-state-hd {
 position: fixed; 
 top: 110px;
 background-color: #fffeec;
 font-size: 16px;
 text-align: center;
 text-transform: none;
 margin-left: 95px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 border-spacing: 20px;
 width: 70px;
 height: 20px;
 
}

.tblgrp-state {
 position: fixed; 
 top: 110px;
 background-color: #fffeec;
 font-size: 16px;
 text-align: left;
 text-transform: none;
 margin-left: 200px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 border-spacing: 20px;
 width: 90px;
}


.tbl-cnty-hd {
 position: fixed; 
 top: 150px;
 background-color: #fffeec;
 font-size: 16px;
 text-align: center;
 text-transform: none;
 margin-left: 85px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 border-spacing: 20px;
 width: 80px;
  height: 20px;
}

.tblgrp-cnty {
 position: fixed; 
 top: 150px;
 background-color: #fffeec;
 font-size: 16px;
 text-align: left;
 text-transform: none;
 margin-left: 200px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 border-spacing: 20px;
 width: 245px;
}


.tbl-city-hd {
 position: fixed; 
 top: 200px;
 background-color: #fffeec;
 font-size: 16px;
 text-align: center;
 text-transform: none;
 margin-left: 100px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 border-spacing: 20px;
 width: 60px;
  height: 20px;
}

.tblgrp-city {
 position: fixed; 
 top: 200px;
 background-color: #fffeec;
 font-size: 16px;
 text-align: left;
 text-transform: none;
 margin-left: 200px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 border-spacing: 20px;
 width: 180px;
}

.tbl-schdist-hd {
 position: fixed; 
 top: 250px;
 background-color: #fffeec;
 font-size: 16px;
 text-align: center;
 text-transform: none;
 margin-left: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 border-spacing: 20px;
 width: 160px;
  height: 20px;
}

.tblgrp-schdist {
 position: fixed; 
 top: 250px;
 background-color: #fffeec;
 font-size: 16px;
 text-align: left;
 text-transform: none;
 margin-left: 200px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 border-spacing: 20px;
 width: 520px;
}

.tbl-school-hd {
 position: fixed; 
 top: 300px;
 background-color: #fffeec;
 font-size: 16px;
 text-align: center;
 text-transform: none;
 margin-left: 85px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 border-spacing: 20px;
 width: 80px;
  height: 20px;
}

.tblgrp-school {
 position: fixed; 
 top: 300px;
 background-color: #fffeec;
 font-size: 16px;
 text-align: left;
 text-transform: none;
 margin-left: 200px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 border-spacing: 20px;
 width: 180px;
}


.tblgrp-select {
 position: fixed; 
 top: 350px;
 background-color: #fffeec;
 font-size: 28px;
 font-weight: bold;
 text-align: left;
 text-transform: none;
 margin-left: 20px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 border-spacing: 20px;
 width: 190px;
}

.submbtngmdetl {
 top: 10px;
 position: absolute;
 background-color: #fffeec;
 font-size: 10px;
 text-align: left;
 text-transform: none;
 margin-left: 50px;
/* margin-right: 200px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}

.lettershd-enterwrd {
 top: 100px;
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 text-align: left;
 text-transform: none;
 margin-left: 50px;
/* margin-right: 200px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}

.letters-enterwrd {
 top: 160px;
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 text-align: left;
 text-transform: none;
 margin-left: 50px;
/* margin-right: 200px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}

.mustcontainhd-enterwrd {
 top: 100px;
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 text-align: left;
 text-transform: none;
 margin-left: 250px;
/* margin-right: 200px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);    
}

.mustcontain-enterwrd {
 top: 160px;
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 text-align: left;
 text-transform: none;
 margin-left: 300px;
/* margin-right: 200px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);
}


.display {
 position: absolute;
 top: 500px;
 color: #84b5b4;
 font-size: 32px;
 margin-left: 1000px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;  
}

.gm-reslts-vkb {
 position: absolute;
 top: 560px;
 background-color: #fffeec;
 font-size: 16px;
 text-align: left;
 text-transform: none;
 margin-left: 10px;
 margin-right: 10px;
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1); 
} 


.vkb-btn {
 color: #84b5b4;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}


.keyboard {
 position: fixed;
 top: 10px;
}


.vkb-btn-clr {
 position: fixed;
 top: 10px;
 color: #84b5b4;
 margin-left: 1000px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}


.vkb-btn-rtn {
   position: fixed;
 top: 424px;
 color: #84b5b4;
 margin-left: 900px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px; 
}

.vkb-btn-a {
  position: fixed;
 top: 120px;
 color: #84b5b4;
 margin-left: 1000px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}


.vkb-btn-1 {
  position: fixed;
 top: 80px; 
 font-size: 38px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 1000px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-2 {
  position: fixed;
 top: 150px;
 font-size: 42px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 1062px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-3 {
  position: fixed;
 top: 190px;
 font-size: 42px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 1135px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-4 {
  position: fixed;
 top: 265px;
 font-size: 42px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 1136px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-5 {
 position: fixed;
 top: 340px;
 font-size: 42px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 1060px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-6 {
  position: fixed;
 top: 350px;
 font-size: 42px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 960px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-7 {
  position: fixed;
 top: 340px;
 font-size: 42px;
 font-weight: bold;
 color: #84b5b4; 
 margin-left: 865px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-8 {
  position: fixed;
 top: 275px;
 font-size: 42px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 800px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-9 {
  position: fixed;
 top: 200px;
 font-size: 42px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 785px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.vkb-btn-10 {
  position: fixed;
 top: 150px;
 font-size: 42px;
 font-weight: bold;
 color: #84b5b4;
 margin-left: 850px;
 background-color: #fffeec;
 border: 5px solid #FF9900;
 border-radius: 16px;
}
.vkb-btno {
 position: absolute;
 top: 1000px;
 color: transparent;
visibility: hidden;
 background-color: transparent;
}

.chg-pswd-hdr {
 position: absolute;
 top: 10px;
 background-color: #fffeec;
 font-size: 24px;
 text-align: left;
 text-transform: none;
 margin-left: 200px;
/* margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);   
}


.chg-pswd-new {
 position: absolute;
 top: 100px; 
 background-color: #fffeec;
 font-size: 20px;
 text-align: left;
 text-transform: none;
 margin-left: 200px;
/* margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);   
}

.chg-pswd-rpt {
 position: absolute;
 top: 150px; 
 background-color: #fffeec;
 font-size: 20px;
 text-align: left;
 text-transform: none;
 margin-left: 200px;
/* margin-right: 150px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
 color: rgba(132,181,180,1);   
}


.cp-submbtn{
 position: absolute;
 top: 200px; 
 border:5px solid #FF9900; 
 border-radius:16px; 
 background-color: #fffeec;
 font-size: 20px;
 font-weight:bold;
 text-align: center;
 text-transform: none;
 margin-left: 200px;
/* margin-right: 150px; */
 color: rgba(132,181,180,1);
}



}