body{
    width:80%;
    margin:auto;
 }
 
/* entire container, keeps perspective */
.tile {
    border:3px solid #006983;
    float:left;
    width:350px;
    height:300px;
    padding:10px;
    margin:5px;
    border-radius:15px;
    perspective: 1000;
    transform-style: preserve-3d;
    display: inline-block;
}
.tileTitle{
    width:330px;
}


/*  UPDATED! flip the pane when hovered */
.tile:hover .back {
    transform: rotateY(0deg);
}
.tile:hover .front {
    transform: rotateY(180deg);
}

.tile, .front {
    width: 350px;
    height: 300px;
}

.tile, .back {
    width: 350px;
}


/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: absolute;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden; 
    position: absolute; 
    top: 0;
    left: 0;
}
.back{
    margin-top: 24px;
}

/*  UPDATED! front pane, placed above back */
.front {
    z-index: 2;
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(-180deg);
}
#searchBar{
	width:100%;
	height:95px;
	background-color:#006983;
	clear:both;
	margin-top:20px;
}
#header{
	float:left;
	width:100%; 
	margin-bottom:10px;
}
#searchField{
	width:65%;
	min-width:100px;
	font-size:18px;
	height:55px;
	float:left;
}
.searchBtn{
	-webkit-appearance: button;
    cursor: pointer;
    min-width: 54px;
    width: 12%;
    background-color: #72C7E7;
    color: #006983;
    font-size: 18px;
    font-weight: 500;
    height: 55px;
    padding: 0 8px;
    margin-left: 10px;
    margin-right: 10px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    float: left;
    border: none;
}