body
{
  position: relative;
}
.sideBar > .bg_white{
	overflow-y: scroll;
	height:100%;
}


.sideBar > .bg_white img{
	max-width: 100%;
	height: auto;
}


.sideBar
{
  position: fixed;
  right:0;
  width:25vw;
  transform:translateX(100%);
  transition:0.5s ease all;
  top:0;
  z-index: 51;
  height:100vh;
}
.sideBar > div
{
  position: relative;
  z-index: 5;
  padding:120px 0px 20px 20px;
  background:white;
}
.sideBar > div > .h3,
.sideBar > div > .h2
{
  padding-right:20px;
}
.sideBar .sideBarOpener
{
  position: absolute;
  left:10px;
  transform:translateX(-100%);
  z-index:4;
  width:80px;
  height:80px;
  display:block;
  border-bottom-left-radius: 30px;
  border-top-left-radius: 30px;
  background:#6ca824;
  border:1px solid #6ca824;

  text-align: center;
  top:30%;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
  font-size:40px !important;
  padding: 28px 0;
  transition:0.5s linear all;
  cursor:pointer;
}
.sideBar .sideBarOpener::before
{
  color:white;
  content:"\f059";
  font-family: Font Awesome\ 5 Pro;
  transition:0.5s linear all;
}
.sideBar.open .sideBarOpener
{
  background-color:#ececee;
  border-color:#d7d7d7;
}
.sideBar.open .sideBarOpener::before
{
  color:black;
}
.scrollablecontent
{
  height:calc(100vw);
  padding-right:20px;
}
/* Medium Devices, Desktops */
@media only screen and (max-width: 992px) {
  .sideBar
  {
    width:40vw
  }
}

/* Small Devices, Tablets */
@media only screen and (max-width: 768px) {
  .sideBar
  {
    width:50vw
  }
}

/* Extra Small Devices, Phones */
@media only screen and (max-width: 544px) {
  .sideBar
  {
    width:70vw
  }
}
.sideBar.open
{
  transform:translateX(0);
}