@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;
	margin: 10px;
	display: block;
	margin-bottom: 20px;
}
 .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:before {
	content:"";
	display:block;
	margin-top:90%
}
/* 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{padding: 0 0;background-color: rgba(0, 0, 0, 0.5);}
.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%;
}
.card__back {
	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}
/* hover effect */
.card.effect__hover:hover .card__front {
	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}
.card.effect__hover:hover .card__back {
	-webkit-transform: rotateY(0);
	transform: rotateY(0);
}
/* click effect */
.card.effect__click.flipped .card__front {
	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}
.card.effect__click.flipped .card__back {
	-webkit-transform: rotateY(0);
	transform: rotateY(0);
}
.hilight{border:4px solid #ddd}
/* random effect */
.card.effect__random.flipped .card__front {
	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg); 
}
.card.effect__random.flipped .card__back {
	-webkit-transform: rotateY(0);
	transform: rotateY(0);
}
/*-- END ALT CARD FLIP--*/

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

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

.tiles .card{text-align:center; background-color:#fff}
.tiles .card .inner{position:absolute;top:0;left:0;right:0;bottom:0}
.tiles .card .inner span{width:100%;height:auto }
.tiles .card .inner img{width:inherit;height:auto }

@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(100% - 16px);}
}