*{line-height: 150%;margin: 0;padding: 0;}
img{display: block;width: 100%;}
body{background-color: #fff;/*background-image: url("../img/texture.jpg");background-size: 300px;*/}
a{text-decoration: none;}
:root {
  --theme_color1: #f4f4f4;
  --theme_color2: #f2f2f2;
  --theme_color3: #37a854;
  --theme_color3hover: #c7c7c7;
}

/*
light blue #def1f2 #f5ffff
*/

#topbar{position: sticky;top: 0;background-color: #fff;box-shadow: 0px 0px 5px #f2f2f2;padding: 10px;text-align: center;z-index: 2;}

#brand img{width: 53px;float: left;padding:17px 10px;}

#top_nav{float: right;margin:17px 2%;color: #000;}
#top_nav a{color: #333;padding: 5px;}



#lt_nav{color: #333;
height: 100%;
  width: 0;
  position: fixed;
  z-index: 0;
  top: 44px;
  left: 0;
  background-color: #fff;
  /*overflow-x: hidden;*/
  transition: .5s;
padding-top: 20px;
/*box-shadow: 5px 10px 10px #f2f2f2;*/
border-right: 1px solid #c7c7c7;}


#menu_but{position: absolute;
  top:0;
  right: -44px;
  background-color: #333;
  color: #fff;
  padding:10px;border-radius: 0px 0px 5px 0px;}
.bar1, .bar2, .bar3 {width: 25px;height: 2px;background-color: #c7c7c7;margin: 6px 0;transition: 0.4s;}
.change .bar1 {-webkit-transform: rotate(-45deg) translate(-9px, 6px);transform: rotate(-45deg) translate(-4px, 6px);}
.change .bar2 {opacity: 0;}
.change .bar3 {-webkit-transform: rotate(45deg) translate(-8px, -8px);transform: rotate(45deg) translate(-6px, -8px);}

#lt_nav_list_wrap{overflow-y: scroll;height: 100%;}
#lt_nav ul{}
#menu_list{display: none;overflow-x: hidden;}
#lt_nav #menu_holder{overflow-x: hidden}
#lt_nav  a{color: #333;display:block;padding:10px 8%; font-size: 12px;min-width: 158px;}
#lt_nav a:hover, .dropdown-btn:hover{background-color:var(--theme_color3hover);}



/* Hide scrollbar for Chrome, Safari and Opera */
#lt_nav_list_wrap::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#lt_nav_list_wrap {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}


#intro{padding:20px;text-align: center;max-width: 600px;margin: auto;}
#intro h1{font-size: 23px;}
#intro p{margin: 30px 0;}
#intro img{border-radius: 20px;}

/*#rtcolTopbar{text-align:center}*/
#story{padding:20px;text-align: center;max-width: 600px;margin: auto;overflow: auto;margin-bottom: 80px;}
#story h2{text-align: center;margin: 30px auto;}
#story div{float:right;width:90%;display:none;margin:auto;text-align:left;border-radius:20px 20px 0px 20px;margin-bottom:30px;overflow:auto;max-width:500px;background-color:#e8f2f9;font-family:sans-serif;color:#474747;}
#story div p{padding:20px;}
#story div:nth-child(even){float:left;border-radius:0px 20px 20px 20px;background-color:#edffd2}
.but1{font-size:12px;padding:8px 18px;color: #fff;border-radius:20px;background-color:#333;display:inline-block;margin-top:10px}
.but1:active,.but1:hover{background-color:#474747;cursor:pointer}

#story div.show_diag{display: block;}



.animation1{animation-name: animate_dialog;animation-duration: 2s;animation-iteration-count: 2;animation-direction: alternate;}
@keyframes animate_dialog {
  from {box-shadow:none;transform: scale(1.0);}
  to {box-shadow: 0px 0px 15px #c7c7c7;transform: scale(1.05);}
}