.index-carousel {
	flex: 1;
	display:block;
	flex-wrap: wrap;
}

.index-carousel-card {

	
	padding: 0 1rem;
	background-color: #444;
	box-shadow: 0 1px 4px 0 rgba(0,0,0,0.2);
	overflow:hidden;

	text-align: center;
	color: #fff;
	text-shadow: 1px 3px 6px black;
}

.index-carousel-card .center {


	display: block;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.index-carousel-card h1,
.index-carousel-card h2,
.index-carousel-card h3,
.index-carousel-card h4,
.index-carousel-card h5,
.index-carousel-card h6,
.index-carousel-card a {
	color: #fff;
}

.index-carousel-card a {
	opacity: 0.8;
}

.index-carousel-card a:hover {
	opacity: 1;
}

.material-icons {
	font-size: 2rem;
}

.button-center {
	display: flex;
	flex-direction: column;
	
	align-items: center;
	justify-content: center;
	
	width: 100%;

}

.button {
	background-color:  var(--accent-b);
  cursor: pointer;
  padding: 0 1rem;
  border: none;
  text-align: left;
	outline: none;
	
	display: block;
	flex-direction: row;
	align-items: center;
	margin-bottom: 2rem;

	text-align: center;

	transition: background-color 120ms;
}

.button:hover {
	background-color:  var(--accent-b-dark);
}



.video {
	flex: 1;
	
	
	
}



.bg-img1 {
	
	flex: 1;
	/*height: 30rem;*/
	background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)), url("/images/works/wsmeteor-card-bg-grey.jpeg") center center;
	background-size: cover;
}
.bg-img2 {
	flex: 1;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)), url("/images/works/card-bg-4.jpg") center center;
	background-size: cover;
}
.bg-img3 {
	flex: 1;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8)), url("/images/works/card-bg-sd2.png") center center;
	background-size: cover;
}

/* wide */
@media (min-width: 700px) {
	.bg-img1 {
		/*height:30rem;*/
		flex: 1;
	}
	.bg-img2 {
		flex:1; 
	}
}

/* mobile */
@media (max-width: 700px) {
	.bg-img1 {
		/*height: 20rem;*/
		flex: 1 100%;
	}
	.bg-img2 {
		flex: 1 100%;
	}
	.video {
		height: 20rem;
	}

}