/*!
 * Start Bootstrap - Creative v3.3.7+1 (http://startbootstrap.com/template-overviews/creative)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */

/* POP-UP CARD */
.card-trip {
	overflow: hidden;
	background: white;
	box-shadow: 0 0 15px rgba(0,0,0,0.2);
	position: relative; // NEEDED FOR THE LINK
	
	<!-- MM Custom Addition -->
	padding-top: 2%;
}
.card-trip > img {
	height: 200px;
	width: 100%;
	object-fit: cover;
}
.card-trip h2 {
	font-size: 16px;
	font-weight: bold;
	margin: 0;
}
.card-trip p {
	font-size: 12px;
	opacity: .7;
	margin: 0;
}
.card-trip .card-trip-infos {
	padding: 16px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	position: relative;
}
.card-trip-infos .card-trip-user {
	position: absolute;
	right: 16px;
	top: -20px;
	width: 40px;
}
// To stretch the link on top of the card div
.card-link {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
}




/* //GENERIC CARD */
.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 40%;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.container {
  padding: 2px 16px;
}



/* FLIP CARD */
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

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

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}