.blue {
  background-color: blue;
}

.yellow {
  background-color:yellow;
}

.red {
  background-color:red;
}

body {
  background-color:#ECECEC;
}

.map {
  height:667.66px;
}

.align-center {
  display:flex;
  align-items: center;
}

  .scrolling-wrapper {
overflow-y: hidden;
  }

  .brand-green {
    background-color:#5cb85c;
  }

  .border-green {
    border: solid 2px #5cb85c;
  }

  .color-green {
    color:#1DB954;
  }
  .carousel-container {
    height:285.06px;
  }

  .carousel-card {
    height:285.06px;
  }

 .card {
    flex: 0 0 auto;
    height:300px;
  }

  .header-direction {
    justify-content: center;
    flex-wrap: wrap;
  }

  .main-content-container {
    flex-direction: column;
  }

  .icon-padding {
padding:0;
  }

  .modal-container{
  display:flex;
  justify-content: center;
  align-items: center;
  position:fixed;
  height:100vh;
  width:100vw;
  z-index:2;
  background-color: rgba(0, 0, 0, .4);
}

/* Modal Header */
.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

/* Modal Body */
.modal-body {padding: 2px 16px;}

/* Modal Footer */
.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

/* Modal Content */
.modal-content {
  position: fixed;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 90%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: animatetop;
  animation-duration: 0.4s;
  z-index:2;
}

/* Add Animation */
/* @keyframes animatetop {
  from {top: -50%; opacity: 0}
  to {top: 0; opacity: 1}
} */

.text-red {
  color:red;
}

  @media screen and (min-width: 375px) {
  .card-img-top {
  height:30%;
  object-fit: contain;
  }
  .carousel-inner {
    height:300px;
  }
  .map {
    height:35vh;
  }
    .intro-image {
    object-fit: contain;
    height:45%
  }
  .icon-padding {
  padding:.5rem;
  }

}

  @media screen and (min-width: 667px) {
 .main-content-container {
   flex-direction:row;
  }
  .map {
    height:300px;
  }
  .modal-content {
    width:50%;
  }
}

  @media screen and (min-width: 768px) {
 .main-content-container {
   flex-direction:column;
  }
  .map {
    height:45vh;
  }
    .header-direction {
    justify-content: space-between;
  }
    .card-img-top {
  height:60%;
  object-fit: contain;
  }
  .intro-image {
    object-fit: contain;
    height:60%
  }
   .icon-padding {
  padding:1rem;
  }
  .modal-content {
    width:50%
  }
}

  @media screen and (min-width: 1024px) {
 .main-content-container {
   flex-direction:column;
  }
  .map {
    height:40vh;
  }
      .card-img-top {
  height:55%;
  object-fit: contain;
  }
}

  @media screen and (min-width: 1025px) {
 .main-content-container {
   flex-direction:column;
 }
  .map {
    height:45vh;
  }
      .card-img-top {
  height:65%;
  object-fit: contain;
  }
}

.background-white {
  background-color:white;
}

  .cursor-pointer{
  cursor: pointer;
}

.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
  border:#5cb85c 5px solid;
}

.display-none {
  display:none;
}

.display-content {
  display:block;
}