html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%
}

body {
    margin: 0;
    overflow-y: scroll;
    font-family: Roboto, sans-serif;
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: normal;
    line-height: 1.75;
    color: rgba(0, 0, 0, .87);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased
}

main {
    max-width: 600px;
    margin: 6em auto;
    padding-left: 1em;
    padding-right: 1em
}

.subtitle,
h1,
h2 {
    margin: 2em 0 .3em -.07em;
    font-weight: 400;
    letter-spacing: .02em;
    line-height: 1
}

h1 {
    font-size: 3.5rem
}

.subtitle {
    font-size: 1.5rem;
    line-height: 1.2
}

.subtitle,
ol,
p,
ul {

}



.bottom-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
    border-top: 1px solid #e0e0e0;
    background-color: #283583;
    z-index: 1;
    -webkit-tap-highlight-color: transparent;
    height: 60px;
}


.bottom-nav__action {
    /*padding: 2px 12px;*/
    min-width: 56px;
    max-width: 144px;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    color: #d0d0d0;
    text-decoration: none
}
.bottom-nav__action::before{
  display: inline-block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 63px;
height: 100%;
position: absolute;
content: "";
cursor: pointer;
top: 0;
left: 0;
border: none;
color: rgba(0,0,0,0.9);
-o-text-overflow: clip;
text-overflow: clip;

background-repeat: no-repeat;
background-position: 50% 50%;
-webkit-background-size: 48px auto;
background-size: 48px auto;
transition: all 0.2s;
}
.bottom-nav__action i,.bottom-nav__action i{

  /* font-size: 32px !IMPORTANT; */
  /* margin: 2px; */
  z-index: 9999;
  /* position: absolute; */
  /* left: 10%; */
  top: 2px;
  /* margin-left: 3.5%; */
}
@media only screen and (max-width: 600px) {

  .bottom-nav__action i {
      /* font-size: 32px !IMPORTANT; */
      margin: 2px;
      z-index: 9999;
      /*position: absolute;*/
      /* left: 10%; */
      top: 2px;
      margin-left: 5.5%;
  }
}

.leftIcont{

  font-size: 32px;
  margin: 0;
  z-index: 9999;
  position: absolute;
  left: 81%;
  top: 5px;

}

.CenterIcont{

  font-size: 32px;
  margin: 0;
  z-index: 9999;
  position: absolute;
  left: 46%;
  top: 5px;

}

.bottom-nav__action:not(:last-child) {
    /*margin-right: 12px*/
}

.bottom-nav__action--active {
    /*padding-top: 6px;*/
    color: #ffffff;
}

.bottom-nav__icon {
    display: block;
    width: 1em;
    height: 1em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4px;
    font-size: 24px
}

.bottom-nav__icon path,
.bottom-nav__icon polygon,
.bottom-nav__icon rect {
    fill: currentColor
}

.bottom-nav__icon circle {
    stroke: currentColor;
    stroke-width: 1
}

.bottom-nav__label {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Droid Sans, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    display: block;
    font-size: 12px
}

.bottom-nav__action--active .bottom-nav__label {
    font-size: 14px
}

.no-labels-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
    border-top: 1px solid #e0e0e0;
    background-color: #009688;
    z-index: 1;
    -webkit-tap-highlight-color: transparent
}

.no-labels-nav__action {
    padding: 16px 12px;
    min-width: 32px;
    max-width: 72px;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    color: #e0e0e0;
    text-decoration: none
}

.no-labels-nav__action:not(:last-child) {
    margin-right: 12px
}

.no-labels-nav__action--active {
    padding-top: 6px;
    color: #fff;
    padding-bottom: 8px;
    min-width: 56px;
    max-width: 144px
}

.no-labels-nav__icon {
    display: block;
    width: 1em;
    height: 1em;
    margin-left: auto;
    margin-right: auto;
    font-size: 24px
}

.no-labels-nav__icon path,
.no-labels-nav__icon polygon,
.no-labels-nav__icon rect {
    fill: currentColor
}

.no-labels-nav__icon circle {
    stroke: currentColor;
    stroke-width: 1
}

.no-labels-nav__action--active .no-labels-nav__icon {
    margin-bottom: 4px
}

.no-labels-nav__label {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Droid Sans, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    display: none
}

.no-labels-nav__action--active .no-labels-nav__label {
    font-size: 14px;
    display: block
}