/* Custom Styles for card layout */
.title {
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
  margin: 20px auto;
  text-align: center;
  padding-top: 37px;
  background: rgba(135, 206, 235, 0.75); /*set background color to Tar Heel blue */
}

.info .section:first-of-type {
  padding-bottom: 0;
}
.info .section:nth-of-type(2) {
  padding-top: 0;
}

.info .section h3 {
	color: rgb(0,102,153); /*set font color to dark blue */
	font-weight: bold;
	font-size: 2rem;
	font-weight: normal;
	font-style: normal;
	padding-top: 10px;
	text-align: justify;
	font-weight: bold;
}

.info .section:first-of-type {
  padding-bottom: 0;
}
.info .section:nth-of-type(2) {
  padding-top: 0;
}

.info {
	background-image: linear-gradient(to right, #fff, #C9E4FF); /*set background transition from white to sky blue*/
	padding-bottom: 30px;
}

.info .section h3 {
	color: rgb(0,102,153); /*set font color to dark blue */
	font-weight: bold;
	font-size: 2rem;
	font-weight: normal;
	font-style: normal;
	padding-top: 10px;
	text-align: justify;
	font-weight: bold;
}

.descriptions, .getfitDescriptions, .bewellDescriptions {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
}

/* Card styling */

.section {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
}

.descriptions .imageFrame, .bewellDescriptions .imageFrame, .getfitDescriptions .imageFrame  {
	max-width: 100%;
	border: 6px solid rgb(0,102,153,.9); /*set border color to dark company blue, darker shade */
	border-radius: 5px;
	background-size: cover;
}

.imageFrame8  {
	max-width: 100%;
	border-radius: 5px;
	background-size: cover;
}

/* Card rotate effect */

div#container {
	perspective: 1200px;
	transform-style: preserve-3d;
}

div#container div.card {
	transform-style: preserve-3d;
    border: none;
    padding: 0px;
    background: none;
}

.descriptions p {
	margin-top: 10px;
    margin-bottom: 10px;
}

div#container div.card img.back {
    transform: translateY(-191px);
    backface-visibility: hidden;
}

div#card1 {
	transform: translateZ(0px) rotateZ(0deg) rotateY(0deg);
	transition: transform 1s;
	height: 0px;    
}

div#container div.adjust {
	transform-style: preserve-3d;
    border: none;
    padding: 0px;
    background: none;
	margin-top: -3px;
    margin-bottom: -125px;
}

div#card1:hover {
	transform: translateZ(200px) rotateZ(0deg) rotateY(-180deg);
}

/* Small Mobile Layout */
@media (max-width: 314px) {
.descriptions div, .getfitDescriptions div, .bewellDescriptions div {
	-webkit-flex: 1 1 250px;
	flex: 1 1 250px;
	margin: none;
	border-radius: none;
	padding: none;
	background: none;
	border: none;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: column;
	flex-flow: column;
}

div#container div.adjust {
	margin-top: -50px;
	margin-bottom: -175px;
}

.section {
	margin-bottom: -17.5px;
}
}

/* Larger than small mobile */
/* applies to all widths 315px and greater */
@media (min-width: 315px) {

.descriptions div {
	-webkit-flex: 1 1 200px;
	flex: 1 1 200px;
	margin: 10px;
	border-radius: 5px;
	padding: 10px 10px 0 10px;
	background: rgba(255,255,255,.5);
	border: 5px solid rgb(0,102,153,.9); /*set border color to dark company blue, darker shade */
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: column;
	flex-flow: column;
}

.getfitDescriptions div, .bewellDescriptions div {
	-webkit-flex: 1 1 250px;
	flex: 1 1 250px;
	margin: 10px;
	border-radius: 5px;
	padding: 10px 10px 0 10px;
	background: rgba(255,255,255,.5);
	border: 5px solid rgb(0,102,153,.9); /* set border color to dark company blue, darker shade */
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: column;
	flex-flow: column;
}
}

/* All Mobile Layout */
@media (max-width: 535px) {
.info h2 {
	font-size: 3rem;
}
    
/* Disable Card rotate effect */

div#container {
	transform-style: none;
}
    
div#container div.card img.front {
    display: none;
}

div#container div.card {
	transform-style: none;
}

div#container div.card img.back {
    transform: none;
}

div#card1 {
	transform: none;
	transition: none;
    margin-bottom: none;
}

div#container div.adjust {
	transform-style: none;
    border: none;
    background: none;
    margin-bottom: none;
}

div#card1:hover {
	transform: none;
}
    
}

/* Larger than Mobile */
/* applies to all widths 550px and greater */
@media (min-width: 501px) {
}

/* Larger than tablet */
/* applies to all widths 750px and greater */
@media (min-width: 724px) and (max-width: 800px) {
.descriptions div {
	-webkit-flex: 1 1 235px;
	flex: 1 1 235px;
}
}

@media (min-width: 807px) and (min-width: 887){
/* --------Problem with footer padding---------- */
}

/* Larger than desktop */
/* applies to all widths 100px and greater */
@media (min-width: 888px) {
}

/* Larger than Desktop HD */
/* applies to 1200px and greater */
@media (min-width: 1200px) {
.title {
   max-width: 500px;
   margin: 0 auto;
   padding: 20px;
   margin: 20px auto;
   text-align: center;
   padding-top: 37px;
   background: rgba(135, 206, 235, 0.75); /*set background color to Tar Heel blue */
}

h1 {
	font-size: 6em;
}
}