* {
  font-family: arial;
}

a {
  text-decoration: none;
  color: black;
}

/******************** TITLE HEADER **************/
header {
  text-align: center;
  background-color: #e2e2e2;
  font-family: arial;
  font-size: 1.3em;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  margin: auto;
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

#subBanner {
  text-align: center;
  font-family: arial;
  font-size: 1.0em; 
  margin-top: 180px;
}

/******************* FLIP CARDS *******************/

/* create a flex box to hold the flip cards - see https://www.w3schools.com/css/css3_flexbox_container.asp */
.flexContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}

#whoDiv {
  order: 1;
}

#bailiDiv {
  order: 2;
}

#gaCalcDiv {
  order: 3;
}

#fentonDiv {
  order: 4; 
}

.flipCard {
  background-color: transparent;
  width: 250px;
  height: 167px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  padding: 20px;
  margin: auto;
  order: 2;	/* assigns the order in the flexbox */
}

.flipCard2 {
  background-color: transparent;
  width: 250px;
  height: 167px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  padding: 20px;
  margin: auto;
}

.flipCard h2 {
  padding: 15px;
  font-size: 1.2em;
}

.flipCard2 h2 {
  padding: 20px;
  font-size: 0.8em;
}

/* This container is needed to position the front and back side */
.flipCardInner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.7s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flipCard:hover .flipCardInner, .flipCard2:hover .flipCardInner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flipCardFront, .flipCardBack {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* describe the look of the front of the flip card*/
.flipCardFront {
  text-align: center;
  font-family: arial; 
  font-size: 1.6em;
  background-color: #f1f1f1;
  outline: none;
  border: none;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* hor offset, ver offset, blur, spread, colour */
  border-radius: 25px;
  cursor: pointer;
}

/* style the back side of the flip card */
.flipCardBack {
  background-color: #f1f1f1;
  outline: none;
  border: none;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* hor offset, ver offset, blur, spread, colour */
  border-radius: 25px;
  cursor: pointer;
  transform: rotateY(180deg);
}

.info {
  margin: auto;
  padding: 40px 25px;
  text-align: center;
  font-size: 1.2em;
}

/************************************* FOOTER ***************************************/
footer {
  position: fixed; 
  bottom: 0;
  width: 95%;
  text-align: right;
  font-size: 0.75em;
  padding-bottom: 10px;
}

/*************************************** CSS RESPONSIVE ***************************************/
/* need to adjust css based on screen size
note: can target 5 groups but I chose 3 as a start and can adjust later if needed 
reference: https://www.w3schools.com/css/css_rwd_mediaqueries.asp*/

/* desktop and larger screens use css above */

/* for tablets and medium sized screens */
@media screen and (max-width: 992px) {
    .flipCard, .flipCard2 {
	width: 200px;
    }
    .flipCard2 h2 {
	padding: 20px;
    }
    .info {
	font-size: 1.1em;
    }
}

/* for mobile phones */
@media screen and (max-width: 768px) {
    .flexContainer {
	flex-direction: column;
    }
    #bailiDiv {
	order: 1;
    }
    #whoDiv {
	order: 2;
    }
    #gaCalcDiv {
	order: 3;
    }
    #subBanner {
	margin-top: 170px;
    }
    h3, p {
	font-size: 0.9em;
    }
    .flipCard, .flipCard2 {
	width: 180px;
	height: 140px;
	padding: 10px;
	font-size: 0.8em;
    }
    .flipCard h2 {
	font-size: 1.0em;
    }
    .flipCard2 h2 {
	padding: 20px;
	font-size: 0.8em;
    }
    .info {
	font-size: 1.1em;
	padding-top: 30px;
    }
}