body {
    font-family: "Roboto", sans-serif;
}

/* Top Bar */
.topnav {
    top:0;
    left:0;
    right:0;
    position:fixed;
    width:100%;
    height: 43px;
    background-color: #000;
    overflow: hidden;
    display: flex;
    z-index:0;
}

.menu-container{
    width:94%;
    font-size:18px;
    display: inline-flex;
    float: left;

}

.menu-container a{
    padding: 10px 14px;
    color: white;
    text-decoration: none;
}
.km-logo{
  width:80px;
  /*background-color: gold;*/
  text-align: center;


  touch-action: manipulation;
  /*display: inline-block;*/
  outline: none;
  /*font-family: inherit;*/
  /*font-size: 1em;*/
  box-sizing: border-box;
  border: none;
  /*border-radius: .3em;*/
  height: 43px;/*2.75em;*/
  line-height: 5em;
  /*text-transform: uppercase;*/
  padding: 0 1em;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23),
                inset 0 -3px 20px 3px #b17d10,
                inset 0 -1px 7px 5px rgba(250,227,133,1);
  background-image: linear-gradient(170deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07);
  order: 1px solid rgba(165,93,7,.6);
  color: rgba(120,50,5,.8);
  text-shadow: 0 2px 2px rgba(250, 227, 133, 1);
  cursor: pointer;
  transition: all .2s ease-in-out;
  background-size: 100% 100%;
  background-position:center;

}
.km-logo:hover{
  animation: slidedown 3s;
}

@keyframes slidedown {
     0% {  line-height: 5em; }
    10% {  line-height: 8em;  }
    30% {  line-height: 8em;  }
    100% {  line-height: 5em;  }

}

.menu-container img {
    height:42px;
}



 .menu-container a:hover {
    background-color: gold;/*#fEFAE0;*/
    color: inherit;
}

.sidebar-button-container {

    font-size:18px;
    display: inline-flex;  
    float: right;

}

.sidebar-button-container a{
    padding: 10px 10px;
    color: white;

    text-decoration: none;
}
.sidebar-button-container a:hover {
    background-color: gold;/*#fEFAE0;*/
    color: inherit;
}


                          

/* left navigation  */
.sidebar-left
{    
    top: 43px;
    bottom: 0px;
    left: 0;
    height: inherit;
    width:280px;
    padding: 10px 10px;
    background-color:#CCD5AE;
    position:fixed;
    overflow: auto;
    z-index:2;
    animation: slideright .4s;
}
@keyframes slideright {
     0% {left: -20%;}
  100% {left: 0px;}

}


.accordion {
  background-color: #00000022;/*#eee;*/
  /*color: white;*/
  cursor: pointer;
  padding: 8px;
  width: 100%;
  border: none;
  text-align: left;
  text-shadow: 0 1px rgba(255, 255, 255, 0.1);
  outline: none;
  font-size: 14px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #D4A373; /*7C96AB; */
}



.panel {
  /*padding: 0 18px;*/
  font-size: 14px;
  /*display: none;*/
  background-color: #00000066;
  overflow: hidden;
}

.panel a{
    display: block;
    color: black;
    padding: 6px 15px;
    text-decoration: none;
}
.panel a:hover{
    background-color: #E9EDC9;
}

.search_box {
  width: 100%;
  box-sizing: border-box;
  border: none;
  font-size: 14px;
  background-image: url('../texture/search.svg');
  background-position: 4px 4px; 
  background-repeat: no-repeat;
  padding: 8px 10px 8px 35px;
}

.search_list{
      /* Remove default list styling */
  list-style-type: none;
  padding: 0;
  margin: 0;
}





/* container */
.container {

    top:43px;
    left:0;
    right: 0;
    bottom: 0;
    display: block;
    position: absolute;
    z-index:-1;
    overflow: auto;
}
.content-and-adbox{
  display:flex;
}



.main-content{
  /*width:75%;*/

    width: 75%;
    padding: 15px;
    box-sizing: border-box;
    overflow: auto;

  /*background-image: url(../texture/kidsmath7.png);*/
  background: linear-gradient( rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85) ), url(../texture/kidsmath7.png);
  background-position:middle-center; 
  background-size: 100%;
  background-repeat: no-repeat;



  /* disable selection */

  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.add-box-container{
  width:25%;
  background-color: #D4A373;
}

.add-box-type1{
    box-sizing: border-box;
    border: 1px solid grey;
    text-align: center;
    padding:30px;
    margin: 10px;
}
.add-box-type2{
    box-sizing: border-box;
    border: 1px solid grey;
    text-align: center;
    padding:60px;
    margin: 10px;

}


/* Footer */
.footer {
  left:0;
  right:0;
  bottom: 0;
  background-color: #333;
  display: block;
}
.footer1{
    font-size: 22px;
    padding: 10px 0px 10px 0px;
    text-align: center;
    color: white;
}
.footer2{
    background-color: #000;
    font-family: arial, sans-serif;
    font-size: 14px;
    text-decoration: none;
    text-align: center;
    padding:10px;
    color: white;
}

.menu-link-at-footer1 a{
  font-family: arial, sans-serif;
  font-size: 18px;
  text-decoration: none;
  color: white;

}


/*share container*/

.share-container {
    position: relative;
    display: inline-flex;
}

.follow-button, .share-icon {
    padding: 10px 10px;
    cursor: pointer;

}
.follow-button:hover, .share-icon:hover {
    background-color: black;
}
.share-options {
    display: none;
    background-color: #222;
}

.share-button {
    padding: 10px 10px;
    display: inline-flex;
}
.share-button:hover {

    background-color: black;
}


.fa-twitter-square, .fa-whatsapp, .fa-facebook-official{
    color: white;
}



/*customise scrollbar*/
 /*width */
::-webkit-scrollbar {
  width: 7px;
}

 /*Track */
::-webkit-scrollbar-track {
  background: #ecefe0; 
}
 
 /*Handle */
::-webkit-scrollbar-thumb {
  background: #7a7f68; 
}

 /*Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #acbb7c; 
}



/* responsive desktop settings */
@media (min-width:1025px) and (max-width:6024px){  

    .sidebar-left{ display:block!important }
    .menu_option { display:none; } 
    .main-content{ width:70%; margin-left: 300px; transition: margin-left .4s; } 
    .add-box-container{width:30%;}
    .footer{margin-left:280px;}
    .close-button{ display:none; }
}      

/*  responsive tablet settings */
@media (min-width:190px) and (max-width:1024px){  
    .home-option, .about-option, .feedback-option{ display:none; } 
    .sidebar-left{ display:none; }
    .content-and-adbox{ display:block;  }
    .main-content, .add-box-container{width: 100%;}
    .close-button{ float: right; color: #222; }
    .menu_option { color: white; }
    .footer{left:0;} 
    .overlay_effect{
        position:fixed;
        display:none;
        width:100%;
        height:100%;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background-color:rgba(0,0,0,0.5);
        z-index:1
    }
}