@import url(https://fonts.googleapis.com/css?family=Open+Sans);
.fa-2x {
  font-size: 32px;
}

#map {
  height: 580px;
}

/* Extra-small */
@media screen and (device-width: 360px) {
      .menu-container {
        width: 360px;
      }
}

/* Extra-small */
@media screen and (device-width: 375px) {
      .menu-container {
        width: 375px;
      }
}

/* Extra-small */
@media screen and (device-width: 384px) {
      .menu-container {
        width: 384px;
      }
}

/* Extra-small */
@media screen and (device-width: 412px) {
      .menu-container {
        width: 412px;
      }
}


/*iPhone 13 mini*/
/* 2340x1080 pixels at 476ppi */
@media only screen 
    and (device-width: 375px) 
    and (device-height: 812px) 
    and (-webkit-device-pixel-ratio: 3) { 
      .menu-container {
        width: 375px;
      }
      #map {
        height: 730px;
      }      
    }

/*iPhone 13 and iPhone 13 Pro*/
/* 2532x1170 pixels at 460ppi */
@media only screen 
    and (device-width: 390px) 
    and (device-height: 844px) 
    and (-webkit-device-pixel-ratio: 3) {
      .menu-container {
        width: 390px;
      }
      #map {
        height: 754px;
      }      
     }

/* iPhone 13 Pro Max */   
/* 2778x1284 pixels at 458ppi */
    @media only screen 
        and (device-width: 428px) 
        and (device-height: 926px) 
        and (-webkit-device-pixel-ratio: 3) {
      .menu-container {
        width: 428px;
      }
      #map {
        height: 836px;
      }      

         }

/*iPhone 11*/
/* 1792x828px at 326ppi */
@media only screen 
    and (device-width: 414px) 
    and (device-height: 896px) 
    and (-webkit-device-pixel-ratio: 2) {
      .menu-container {
        width: 414px;
      }
      #map {
        height: 806px;
      }      
     }

/*iPhone 11 Pro*/
/* 2436x1125px at 458ppi */
@media only screen 
    and (device-width: 375px) 
    and (device-height: 812px) 
    and (-webkit-device-pixel-ratio: 3) {
      .menu-container {
        width: 375px;
      }
      #map {
        height: 712px;
      }      
     }

/*iPhone 11 Pro Max*/
/* 2688x1242px at 458ppi */
@media only screen 
    and (device-width: 414px) 
    and (device-height: 896px) 
    and (-webkit-device-pixel-ratio: 3) { 
      .menu-container {
        width: 414px;
      }
      #map {
        height: 806px;
      }      
    }

@media screen and (min-width: 800px) {
      .menu-container {
        width: 484px;
      }
}

.stickyBottomNav {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   z-index: 5;
   background-color: red;
   color: white;
   text-align: center;
}

.menu-container {
  height: 75px;
  padding: 4px 0px 0px 0px;
  background: #571f1c;
  border-radius: 30px 30px 0px 0px;
  position: absolute;
  z-index: 0;
  top: 0px;
  bottom: -10px;
  left: 0;
  background-image:url("nealesnarrow.png");
  background-repeat:no-repeat;  
}

.menu {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  position: relative;
}

.undermenu {
  border: 1px solid white;
  min-height: 20px;
}

.canvasBody {
  height: 400px;
  border: 1px solid white;
  position: relative;
  margin: 0;
}

input[type=radio] {
  display: none;
}

label {
  color: #537ec5;
  cursor: pointer;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20%;
  transition: 0.25s ease-in;
}

.item {
  text-align: center;
}

.item-title {
  margin-top: 14px;
  margin-bottom: -6px;
  tcolor: #010038;
  color: #ffffff;
  font-weight: 600;
  font-size: 11px;
}

.blob-container {
  position: absolute;
  z-index: 0;
  width: 20%;
  transition: transform 0.15s ease-out;
}

.blob {
  background: #010038;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  margin: 2px auto;
}

input[type=radio]:checked + label {
  color: #fff;
}

input[id=radio-0]:checked ~ .blob-container {
  transform: translateX(0%);
}
input[id=radio-0]:checked ~ .blob-container .blob {
  animation: scaleY-0 0.2s linear;
}

input[id=radio-1]:checked ~ .blob-container {
  transform: translateX(100%);
}
input[id=radio-1]:checked ~ .blob-container .blob {
  animation: scaleY-1 0.2s linear;
}

input[id=radio-2]:checked ~ .blob-container {
  transform: translateX(200%);
}
input[id=radio-2]:checked ~ .blob-container .blob {
  animation: scaleY-2 0.2s linear;
}

input[id=radio-3]:checked ~ .blob-container {
  transform: translateX(300%);
}
input[id=radio-3]:checked ~ .blob-container .blob {
  animation: scaleY-3 0.2s linear;
}

input[id=radio-4]:checked ~ .blob-container {
  transform: translateX(400%);
}
input[id=radio-4]:checked ~ .blob-container .blob {
  animation: scaleY-3 0.2s linear;
}

@keyframes scaleY-0 {
  0% {
    transform: scale(0);
  }
  60% {
    transform: scaleY(0.5) translateY(30px);
  }
  100% {
    transform: scaleY(1);
  }
}
@keyframes scaleY-1 {
  0% {
    transform: scale(0);
  }
  60% {
    transform: scaleY(0.5) translateY(-30px);
  }
  100% {
    transform: scaleY(1);
  }
}
@keyframes scaleY-2 {
  0% {
    transform: scale(0);
  }
  60% {
    transform: scaleY(0.5) translateY(30px);
  }
  100% {
    transform: scaleY(1);
  }
}
@keyframes scaleY-3 {
  0% {
    transform: scale(0);
  }
  60% {
    transform: scaleY(0.5) translateY(-30px);
  }
  100% {
    transform: scaleY(1);
  }
}
@keyframes scaleY-4 {
  0% {
    transform: scale(0);
  }
  60% {
    transform: scaleY(0.5) translateY(-30px);
  }
  100% {
    transform: scaleY(1);
  }
}
body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #c95d58;
  z-background: #537ec5;
  font-family: "Open Sans";
}

@media screen and (min-width: 800px) {
  .menu-container {
    width: 100%;
  }
  #map {
        height: 100vh;
      }  
}


@keyframes pulsate {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}

.pulsating-circle {
  animation: pulsate 2s infinite;
}