body 
  {
/*    background-image: url("../BeeBkgrd.jpg"); */
    background-color: white;
/*    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: 4s;
  animation-iteration-count: 2;
  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;}
}

.upld-form {
    font-size: 28px;
    font-weight: bold;
    color: purple;
}


/* Style The Dropdown Button */
.dropbtn {
   background-color: gold;
/*  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;
   border-color: purple;
}

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

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  
   border: 5px solid #FF9900;
    border-color: purple;
 border-radius: 16px;
  
/*
background-color: rgba(231,231,231,1);
*/
   background-color: gold;
/*  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;
   border-color: purple;
}

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

.dropdown-content a:hover {background-color: #F4A10F;

/*
.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;
   border-color: purple;
  
/*
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:20px;
 margin-left: 5px;
 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: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:250px;
 margin-left: 350px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.letters-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:320px;
 margin-left: 350px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.mustcontainhd-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:250px;
 margin-left: 500px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.mustcontain-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:330px;
 margin-left: 500px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}


.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;
}

/* ############################  FOR ????????????  - MIN 568PX ######################### */
@media only screen and (min-width: 568px) {
    
.main {
  width: 10px;
  height: 10px;
  position: relative;
  animation-name: flying-bee;
  animation-duration: 4s;
  animation-iteration-count: 2;
  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: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:250px;
 margin-left: 400px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.letters-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:310px;
 margin-left: 400px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.mustcontainhd-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:250px;
 margin-left: 600px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.mustcontain-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:330px;
 margin-left: 600px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.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: 650px;
 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: 850px;
 margin-left: 5px;
 margin-right: 5px;
 border: 5px solid #FF9900;
 border-radius: 16px;
}

}

/* ############################  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: 4s;
  animation-iteration-count: 2;
  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;
 */
}

.lettershd-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:260px;
 margin-left: 400px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.letters-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:310px;
 margin-left: 400px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.mustcontainhd-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:260px;
 margin-left: 600px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.mustcontain-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:310px;
 margin-left: 600px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}



}

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


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



.welcome-head{
 position: absolute;
 background-color: #fffeec;
 font-size: 32px;
 text-align: center;
 text-transform: none;
 top: 10px;
 margin-left: 300px;
 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;
}

.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;
}

.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;
}

.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;
}

.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;
} 

/*
.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; 
 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;
 */
}

.lettershd-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:280px;
 margin-left: 550px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.letters-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:330px;
 margin-left: 550px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}



.mustcontainhd-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:280px;
 margin-left: 750px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}

.mustcontain-enterwrd{
 position: absolute;
 background-color: #fffeec;
 font-size: 24px;
 font-weight:bold;
 padding:5px;
 text-align: left;
 text-transform: none;
 top:330px;
 margin-left: 750px;
/* margin-right: 50px; */
 border: 5px solid #FF9900;
 border-radius: 16px;
}



}


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

.main {
  width: 100px;
  height: 100px;
  position: relative;
  animation-name: flying-bee;
  animation-duration: 4s;
  animation-iteration-count: 2;
  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;
}

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

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

.sect1-paragh{
 position: absolute;
/*background-color: #fffeec; */
background-color: purple;
 color: gold;
 font-size: 24px;
 text-align: left;
 text-transform: none;
 top: 10px;
 margin-left: 500px;
 margin-right: 150px;
 border-color: gold;
 border: 5px solid;
/* border: 5px solid #FF9900; */
 border-radius: 16px;
 width: 500px;
 height: 50px;
}

.sect2-paragh{
 position: absolute;
/* background-color: #fffeec; */
 background-color: purple;
/*  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;
}

.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;
}

.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;
} 

.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;
}


}