.card-grid {
	list-style:none;
	padding:0;
	margin:0;
	display:inline-block;
	width:100%;
	text-align:center;
}

.card-sleeve, .card-sleeve-lg {
	padding-top:22px;
	box-sizing:border-box;
	display:block;
	float:left;
	text-align:left; /*required to prevent text-align:center on .card-grid from cascading*/
}

.card {
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
}

.card-block {
	padding:22px;
}

.card-img-top img {
	border-top-right-radius: 6px;
    border-top-left-radius: 6px;
	/*height:200px;*/
	display:block;
	width:100%;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.card h3, .card h4 {
	margin:0px 0px 11px 0px
}

.card p {
	margin-bottom:0px;
}

.card .btn a {
	color:#fff;
}

@media screen and (min-width:980px) {
.card-sleeve {
	width:33.33333333333333%;
}

li.card-sleeve:nth-child(3n-2) {
	padding-left:0;
	padding-right:2%;
}


li.card-sleeve:nth-child(3n-1) {
	padding-left:1%;
	padding-right:1%;
}

li.card-sleeve:nth-child(3n+0) {
	padding-left:2%;
	padding-right:0;
}
}

@media screen and (min-width:480px) and (max-width:979px) {

.card-sleeve {
	width:50%;
}

li.card-sleeve:nth-child(2n-1) {
	padding-left:0;
	padding-right:1%;
}

li.card-sleeve:nth-child(2n) {
	padding-left:1%;
	padding-right:0;
}
}

@media screen and (max-width:479px) {
li.card-sleeve, li.card-sleeve-lg {
width:100%;
padding:22px 0 0 0;
}
}

/*===
Large Cards
===*/


@media screen and (min-width:480px) {
.card-sleeve-lg {
	width:50%;
}

li.card-sleeve-lg:nth-child(2n-1) {
	padding-left:0;
	padding-right:1%;
}

li.card-sleeve-lg:nth-child(2n) {
	padding-left:1%;
	padding-right:0;
}
}

/*hacky code to get the last (7th) research program to display in the center. This code only works because there are 7 programs and does not apply to generic cases!
It also only works because of text-align center on the parent ul element, in this case class card-grid */
.view-degree-programs .card-grid > .views-row-last.card-sleeve {
	text-align: center;
    float: none;
    display: inline-block;
}
	
@media screen and (min-width:980px) {
.view-degree-programs .card-grid > .views-row-last.card-sleeve {
	padding-left:1%;
	padding-right:1%;
}
}

@media screen and (min-width:480px) and (max-width:979px) {
	.view-degree-programs .card-grid > .views-row-last.card-sleeve {
	padding-left:0.5%;
	padding-right:0.5%;
}
}