.card {
	background-color: $white;
	border-radius: 2px;
	display: block;
	display: -webkit-box;
	display:    -moz-box;
	display:     -ms-flexbox;
	display: -webkit-flex;
	display:         flex;
	margin-bottom: $line-height;
	position: relative;
	@include box-shadow(0 1px 6px rgba(0, 0, 0, 0.3));
	@include transition(box-shadow 0.3s $timing);
	&[class*="-bg"] {
		color: $white;
	}
	// no boxshadow
		.no-boxshadow & {
			border: 1px solid $black-bg;
		}
}

// colour
	.card-offwhite {
		background-color: $white-bg;
	}

	@each $color in $palette-list {
		$i: index($palette-list, $color);

		.card-#{$color} {
			@include box-shadow(0 0 2px rgba(0, 0, 0, 0.3), 0 1px 6px rgba(red(nth($palette-color, $i)), green(nth($palette-color, $i)), blue(nth($palette-color, $i)), 0.3));
			// no boxshadow
				.no-boxshadow & {
					border-color: nth($palette-color-light, $i);
				}
		}

		.card-#{$color}-bg {
			@extend .card-#{$color};
			background-color: nth($palette-color, $i);
		}
	}

.card-action {
	border-top: 1px solid $black-bg;
	position: relative;
	@include clearfix();
	&:first-child {
		border-top: 0;
	}
	.nav {
		margin-top: 0;
		margin-bottom: 0;
		> li {
			> a,
			> .a {
				color: $black-sec;
				&:focus,
				&:hover {
					color: $link-color;
				}
				.card[class*="-bg"] & {
					color: $white;
				}
			}
			&.active > {
				a,
				.a {
					color: $link-color;
				}
			}
			&.open > {
				a,
				.a {
					color: $black-text;
				}
			}
		}
	}
}

// colour
	@each $color in $palette-list {
		$i: index($palette-list, $color);

		.card-#{$color} .card-action {
			border-top-color: nth($palette-color-light, $i);
		}

		.card-#{$color}-bg .card-action {
			border-top-color: nth($palette-color-dark-m, $i);
		}
	}

.card-header {
	padding-top: ($line-height / 4);
	padding-bottom: ($line-height / 4);
	position: relative;
	@include clearfix();
	&:before {
		border-bottom: 1px solid $black-bg;
		content: "";
		display: block;
		position: absolute;
			bottom: 0;
			left: 0;
		width: 100%;
	}
}

.card-heading {
	display: block;
	font-size: $font-size-h4;
	line-height: $line-height-h4;
	margin-top: $line-height;
	margin-bottom: $line-height;
	.card-header & {
		margin-top: 0;
		margin-bottom: 0;
	}
}

.card-img {
	overflow: hidden;
	position: relative;
	&:first-child {
		border-radius: 2px 2px 0 0;
	}
	&:last-child {
		border-radius: 0 0 2px 2px;
	}
	img {
		display: block;
		height: auto;
		width: 100%;
	}
}

.card-img-heading {
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
	color: $white;
	font-size: $font-size-h4;
	line-height: $line-height-h4;
	margin: 0;
	padding: ($line-height / 2) $grid-gutter;
	position: absolute;
		bottom: 0;
		left: 0;
	width: 100%;
}

.card-inner {
	padding-right: $grid-gutter;
	padding-left: $grid-gutter;
	position: relative;
	z-index: 1;
	.card-header & {
		padding-top: ($line-height / 2);
		padding-bottom: ($line-height / 2);
	}
	.card-inner-side ~ & {
		overflow: hidden;
	}
}

.card-inner-side {
	padding-top: ($line-height / 2);
	padding-bottom: ($line-height / 2);
	&.pull-left {
		padding-left: $grid-gutter;
	}
	&.pull-right {
		padding-right: $grid-gutter;
	}
}

.card-main {
	-webkit-box-flex: 1;
	   -moz-box-flex: 1;
	    -webkit-flex: 1;
	        -ms-flex: 1;
	            flex: 1;
}

// colour
	@each $color in $palette-list {
		$i: index($palette-list, $color);

		.card-#{$color}-bg .card-main a {
			color: nth($palette-color-light, $i);
		}
	}

.card-side {
	background-color: $white-bg;
	border-radius: 2px 0 0 2px;
	max-width: 33.33333%;
	padding-right: $grid-gutter;
	padding-left: $grid-gutter;
	&[href] {
		color: $black-text;
		&:focus,
		&:hover {
			background-color: $white-bg-dark;
			text-decoration: none;
		}
	}
	&.card-side-img {
		overflow: hidden;
		padding-right: 0;
		padding-left: 0;
	}
	&.card-side-right {
		border-radius: 0 2px 2px 0;
		-webkit-box-ordinal-group: 2;
		   -moz-box-ordinal-group: 2;
		           -ms-flex-order: 2;
		            -webkit-order: 2;
		                    order: 2;
	}
}

// colour
	.card-offwhite .card-side {
		background-color: $white-bg-dark;
	}

	@each $color in $palette-list {
		$i: index($palette-list, $color);

		.card-side {
			.card-#{$color} & {
				background-color: nth($palette-color, $i);
				color: $white;
				&[href] {
					&:focus,
					&:hover {
						background-color: nth($palette-color-dark-m, $i);
					}
				}
			}
			.card-#{$color}-bg & {
				background-color: nth($palette-color-dark-m, $i);
				&[href] {
					&:focus,
					&:hover {
						background-color: nth($palette-color-dark, $i);
					}
				}
			}
		}
	}

.card-wrap {
	margin-top: $line-height;
}



@import "conferencia/_cards-stuff.scss"