.navbar{
  box-sizing: border-box;
  width: 100vw;
  position:fixed;
  z-index:5;

}
/*--------------------------------*/
.bot{
  position:fixed;
  width: calc(100%);
  top: 0rem;
  padding-top:1.4rem;
  z-index:5;
}
.botcontainer{
  display:flex;
  flex-direction: row;
  margin-left:0px;
  margin-left:0px;
}
.bottitle{
  position:relative;
  list-style:none;
    margin-right:1.3rem;
    margin-top:1rem;
  font-family: var(--font-family);
  font-weight: 300;
  font-size: 1rem;
}


.bottitle:hover{
  text-decoration: underline;
  cursor:pointer;
}

.botimage a img{
  width:16px;
  bottom: -2px;
  position:relative;
  cursor: pointer;
}

menu, li{
  margin:0px;
}
#websitetitle{
  font-weight:500;

}

/* --------------------------------------------------------------------------- show menu*/
/* --------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------- */

#navMobile{
  position:absolute;
  width:100%;
  height:100vh;
  background-color: black;
  color:white;
  justify-content: center;
  top:0px;
  z-index:5;

}
.navMShow{
  right: 0px;
  transition: right 1.2s;
}
.navMHide{
  right: -105%;
  transition: right 1.2s;
}

.navtitleMobile{
  position:relative;
  list-style:none;
    margin-top:1rem;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1.5rem;
  margin-bottom:1rem;
}
/* --------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------- */

#closemenuMobile{
  cursor:pointer;
  position:absolute;
  top:4rem;
  right:4rem;
}
#navMobileCont{
  display:flex;
  justify-content: center;
  flex-direction:column;
  align-items: center;
  position:fixed;
  width:100%;
  height:100%;
}
.nMCicon{
  width:74px;
}
.navMobileContainer{
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
#navbarCompress{
  display:none;
  position:relative;
  width: calc(100%);
  top: 0rem;
  z-index:5;
  background-image:linear-gradient(-180deg, rgba(255,255,255,1),90%, transparent);
  height:4.4rem;
}
#navbarDecompress{

}

/* --------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------- */

@media (max-width:320px)  {
/* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
  #navbarCompress{
    display:flex;
    position:relative;
    width: calc(100%);
    top: 0rem;
    z-index:5;
    background-image:linear-gradient(-180deg, rgba(255,255,255,1),90%, transparent);
    height:4.4rem;
  }
  #navbarExtend{
    display:none;
    background-image:linear-gradient(-180deg, rgba(255,255,255,1),90%, transparent);
    height:4.4rem;
  }
}

@media (min-width:320px)  {
/* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
  #navbarCompress{
    display:flex;
    position:relative;
    width: calc(100%);
    top: 0rem;
    z-index:5;
    background-image:linear-gradient(-180deg, rgba(255,255,255,1),90%, transparent);
    height:4.4rem;
  }
  #navbarExtend{
    display:none;
    background-image:linear-gradient(-180deg, rgba(255,255,255,1),90%, transparent);
    height:4.4rem;
  }
}
@media screen and(min-width:480px)  {
/* smartphones, Android phones, landscape iPhone */
  #navbarCompress{
    display:flex;
    position:relative;;
    width: calc(100%);
    top: 0rem;
    z-index:5;
  }
  #navbarExtend{
    display:none;
    background-image:linear-gradient(-180deg, rgba(255,255,255,1),90%, transparent);
    height:4.4rem;
  }
}
@media screen and (min-width:600px)  {/* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
  #navbarCompress{
    display:flex;
    position:relative;
    width: calc(100%);
    top: 0rem;
    z-index:5;
  }
  #navbarExtend{
    display:none;
    background-image:linear-gradient(-180deg, rgba(255,255,255,1),90%, transparent);
    height:4.4rem;
  }

}
@media screen and (min-width:801px)  {
  #navbarCompress{
    display:none;
    position:relative;
    width: calc(100%);
    top: 0rem;
    z-index:5;
  }
  #navbarExtend{
    display:flex;
    background-image:linear-gradient(-180deg, rgba(255,255,255,1),90%, transparent);
    height:4.4rem;
  }
/* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media screen and (min-width:1025px) { /* big landscape tablets, laptops, and desktops */
}
@media screen and (min-width:1281px) {
 /* hi-res laptops and desktops */
 }