@import url("https://fonts.googleapis.com/css?family=Open+Sans:700");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* by default include the background of the option for the home navigation */

/* display the anchor link side by side  */
nav#bottom_bar {
	height: 65px;
    background:var(--white_bg);
    padding: 0px 5px;
    box-shadow: 0 1px 15px rgba(0, 0, 0, 0.1);
    width: 100%;
    bottom: 0;
    right: 0px;
    position: fixed;
    text-align: center;
    direction: rtl;
    z-index: 4;
    border-top: solid 1px #ddd;
}

.main_slide_section{
padding:0px 30px 0px 30px !important;
position:relative;
width:100vw;
height:calc(100vh - 50px ) ;
overflow: hidden;  
-ms-overflow-style: none;
scrollbar-width: none;
}


/* remove default style and slightly separate the anchor links from one another */
#bottom_bar a {
	border-bottom: solid 3px #fff;
    color:#222;
    text-decoration: none;
    margin: 0 0.2rem;
    width: 75px;
    align-items: center;
    padding: 5px 5px;
    position: relative;
    display: inline-block !important;
    height: 61px !important;
    --hover-bg: #5b37b720;
    --hover-c: #5b37b7;
    margin: 0 5px;

	
}

/* include considerable negative margin to have the svg icon overlapping with the span element */
#bottom_bar a svg {
    width: 24px;
    height: 24px;
    pointer-events: none;
    transition: margin 0.2s ease-out;
    margin-bottom: 5px;
	margin-top: 2px;
}
/* by default hide the span element */
#bottom_bar a span {
	font-weight:bold;
  font-size: 15px;
  display: block;
  
}
/* include with a pseudo element relative to the anchor link a circle, with a fixed with and height */
#bottom_bar a:before {
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  /* positioned to the left of the anchor link and scaled to 0 */
  transform: translate(0%, -50%) scale(0);
  visibility: visible;
  opacity: 1;
}
/* when active */
/* specify the colors dictated by the custom properties */
#bottom_bar a.active {
  background:var(--hover-bg);
  color:var(--hover-c);
  border-bottom: 3px solid #003E3D;
}
/* using the color specified by the then updated custom property show the circle of the pseudo element increasing its size and highlighting it momentarily */
#bottom_bar a.active:before {
  background:var(--hover-c);
  opacity: 0;
  visibility: hidden;
  transform: translate(0%, -50%) scale(2);
  /* transition only when the class is applied */
  transition: all 0.4s ease-out;
}
/* remove the margin applied to the svg to make it overlay atop the anchor link */
#bottom_bar a.active svg {
  margin-right: 0;
}
/* show the span element */
#bottom_bar a.active span {
	visibility: visible;
    opacity: 1;
    transition: all 0.2s ease-out;
    height: 25px;
    display: block;
    line-height: 20px;
}

/* on smaller viewports show the navigation bar on the side, attached to the left of the screen */


