.flex-container {
  display: flex !important;
  flex-direction: row !important;
  justify-content:flex-start !important;
  flex-wrap:nowrap !important;
  z-index:-1 !important;
  overflow-x:scroll !important;
  padding:0 0 0 0 !important;
}

.flip-card {
  background-color: transparent !important;
  width: 300px !important;
  height: 300px !important;
  z-index:1 !important;
}

.flip-card-inner {
  position: relative !important;
  width: 300px !important;
  height: 300px !important;
  text-align: center !important;
  transition: transform 0.8s !important;
  transform-style: preserve-3d !important;
  z-index:-1 !important;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg) !important;
}


.flip-card-front {
  background-color: #bbb !important;
  color: black !important;
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  -webkit-backface-visibility: hidden !important; /* Safari */
  backface-visibility: hidden !important;
  z-index:-1 !important;
}

.flip-card-back {
  background-color: white !important;
  color: white !important;
  transform: rotateY(180deg) !important;
  display:flex !important;
  align-items:center !important;
  position: absolute !important;
  width: 300px !important;
  height: 300px !important;
  border-style: solid !important;
  border-width: 10px !important;
  border-color:white !important;
  -webkit-backface-visibility: hidden !important; /* Safari */
  backface-visibility: hidden !important;
  z-index:-1 !important;
}


.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2) !important;
  width:300px !important;
  text-align:center !important;
  z-index:1 !important;
  margin: 2px  10px 2px 10px !important;
}

.title {
  color: grey !important;
  font-size: 24px !important;
  z-index:-1 !important;
  margin: 0 !important;
}

.scroller a {
  text-decoration: none !important;
  font-size: 22px !important;
  color: black !important;
}

.bio {
  color:black !important;
  line-height:1 !important;
  font-family:times !important;
  font-size:12px !important;
}

.name {
  font-size:25px !important;
  top:5px !important;
  margin-bottom: -5px !important;
}

.nameLarge {
  font-size:23px !important;
  top:5px !important;
  margin-bottom: -5px !important;
  margin-top:2px !important;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
.scroller {
  transition: margin-right .5s;
  overflow-x: hidden;
  width: 100%;
  border-right-width: 0;
}


/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.card_bottom {
  height: 10px !important;
  background-color: #0e9cd7 !important;
  bottom:0 !important;
  vertical-align:bottom !important;
}

.bottomIcons {
  bottom:15px !important;
}

.bottomIconsHide {
  bottom:15px !important;
  height:36px !important;
  visibility:hidden !important;
}

.image-card {
  background-color: transparent !important;
  width: 300px !important;
  height: 300px !important;
  z-index:1 !important;
}