.open-sans-font{
    font-family: 'Open Sans', sans-serif;
  }

  #sidePanel{
    display:flex;justify-content: center;align-items:start;
    flex-direction: column;
    position: absolute;
    z-index: 6;
    left: 0;
    width: 27%;
    height: 100%;
    background: linear-gradient(
90deg
, rgba(23, 23, 23, 0.83) 0%, rgba(0, 0, 0, 0) 137.84%);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }
  .font{
    font-family: Proxima Nova A;
    font-style: normal;
    font-weight: normal;
  }
#posterGradient{
  position: absolute;
  top:-4rem;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity:0;
  /* background-image: linear-gradient(to right,#000000 -10%,#00000017 30%, transparent 35%, #00000000 65%, #00000017 70%,#000000 110%); */
  transition: 500ms;
}
.activePosterGradient{
  opacity: 1 !important;
  transition: 1500ms !important;
}
  .screen{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 5;
    opacity: 1;
  }
 
  #bgImg{
    background-color: black;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 5;
  }

  .intro{
    z-index: 4 !important;
    background: rgba(0, 0, 0, 0.17);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    transition: 1000ms;
  }
  .myBtn{
    cursor: pointer;
    transform: scale(1);
    transition: 150ms;
  }
  
  .myBtn:hover{
    transform: scale(1.04) !important;
    opacity: 0.9 !important;
    transition: 150ms;
  }
  .myBtn:disabled{
    opacity: 0.5;
    cursor: not-allowed;
  }
  .exitScreen400{
    transition: 400ms;
    /* opacity: 0 !important; */
    pointer-events:none !important;
  }
  .exitScreen{
    transition: 1000ms;
    opacity: 0 !important;
    pointer-events:none !important;
  }

  .exitScreen400 #sidePanel{
    left: -40% !important;
    transition: 500ms;
    opacity: 0 !important;
  }
  .exitScreen400 #bgImg{
    opacity: 0 !important;
    transition: 500ms;
  }
  .exitScreen400 #myBtn{
    transform: scale(0.8) !important;
    opacity: 0 !important;
  }
  .exitScreen #myBtn{
    transform: scale(0.8) !important;
    opacity: 0 !important;
  }

  .dfccc{
    justify-content:center;
    display:flex;
    align-items:center;
    flex-direction:column;
  }

  #particles-js{
    width: 100%;
    height: 100%;
  }

  #map{
    width: 100%;
    height: 100%;
    z-index: -3;
    position: absolute;
    background: rgb(0 0 0 / 35%);
    display: flex;
    justify-content: center;
    align-items: center;  
    opacity: 0;
    background-image: url("../textures/map/mapTile.png");
    background-size: cover;
    /* transform: scale(0.7);  */
    pointer-events: none;
    webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    transition: 400ms;
  }

  .blur{
    z-index: -1 !important;
    background: rgba(0, 0, 0, 0.17);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    position: absolute;
    width: 110%;
    height: 110%;
  }
  .vignette {
    pointer-events:none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 200px rgba(0,0,0,0.9) inset;
  }

  .vignetteDark {
    pointer-events:none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 300px rgba(0,0,0,0.98) inset;
  }
  .circleMap{
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    opacity: 0.5;
    transform: scale(1);
    transition: 350ms;
  }
  .subMapMenu{
    pointer-events:all;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top:0.5rem;
    padding-bottom:0.5rem;
    transform: scale(1);
    transition: 350ms;
  }

  .activeSubMenu .mapText{
    font-weight: bold !important;
    font-size: 1rem !important;
    opacity:1 !important;
    transition: 350ms;
  }
  .activeSubMenu .circleMap{
    opacity:1 !important;
    transform: scale(1.2) !important;
    transition: 350ms;
  }

  .subMapMenu:hover .mapText{
    font-weight: bold !important;
    opacity:1 !important;
    transition: 350ms;
  }
  .subMapMenu:hover .circleMap{
    opacity:1 !important;
    transform: scale(1.5) !important;
    transition: 350ms;
  }

  .mapText{
    padding-left: 0.5rem;
    text-align: initial;
    width: auto;
    height: auto;
    font-family: Proxima Nova A;
    font-style: normal;
    font-weight: normal;
    font-size: 1rem;
    line-height: 122.9%;
    opacity:0.5;
    color: #FFFFFF;
    transform: scale(1);
    transition: 350ms;
  }

  #enterSubMapMenu{
    pointer-events:all;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 1rem;
    opacity:0.85;
  }

  #enterSubMapMenu:hover{
    opacity:1 !important;
    transition: 350ms;
  }