@charset "utf-8";
/* CSS Document */


/*CARD FLIP*/
.section {
	margin-bottom: 40px;
	width: 100%;
}
/**
 * The cards
 *
 * Each card plays home to a front and back. I've set them up as squares here
 * by using the padding technique, but you may set them up in any dimensions
 * you like based on your site design.
 */  

 
li.card {
	/* position: relative; */
	float: left;
	text-align: center;
	min-height: 50px;
	/*min-width:100px;*/
	position:relative;
	float:left;
	display: block;
	margin: 35px 10px;
	padding:15px;
	background-color: rgba(0, 0, 0, 0.1);
}
 .card.col_2 {width: calc(100% / 2 - 20px);}
 .card.col_3 {width: calc(100% / 3 - 20px);}
 .card.col_4 {width: calc(100% / 4 - 20px);}
 .card.col_5 {width: calc(100% / 5 - 20px);}
 .card.col_6 {width: calc(100% / 6 - 20px);}

}
/* card fronts and backs */
.card__front, .card__back {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* text-transform:uppercase; */
	text-align:center;
	vertical-align:middle;
	font-weight:bold;
	padding:15px;
}

.card__front, .card__back {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}
.card__front {
}
.card__front img {
	width:100%;
}



/*TILES ARE CARDS THAT DO NOT FLIP---*/

ul.tiles {
	padding: 0 0;
	margin: 0 0;
	width: 100%;
}

.tiles .card{text-align:center;}
.tiles .card .inner{position:absolute;top:0;left:0;right:0;bottom:0}
.tiles .card .inner span{width:100%;height:auto }
.tiles img{width:100%;height:auto; margin-bottom:10px }
.tiles a {text-decoration:none; font-size:1.2em;}

@media only screen and (max-width:740px) {
  .card.col_2, .card.col_3, .card.col_4, .card.col_5, .card.col_6{width: calc(100% / 2 - 16px);}
}
@media only screen and (max-width:480px) {
  .card.col_2, .card.col_3, .card.col_4, .card.col_5, .card.col_6{width: calc(90% - 16px);}
}