#homework-thumbs-title, #homework-thumbs-img {
	display: none;
}

.list-inline {
	margin-top: 23px;

	li {
		display: inline-block;
		vertical-align: top;
		text-align: center;
		margin-left: 2%;
		width: 10%;
		height: 100px;

		a {
			width: 6.5em;
			height: 100px;
			display: block;
			cursor: pointer;
			position: relative;
			border-bottom: 0px;
			color: @body-text-color;

			/** Thumb states **/
			&.inactive {
				opacity: 0.6;
			}

			&.selected {
				.tile {
					background: #ccc;
				}

				&:before, &:after {
					content: "";
				    position: absolute;
				    width: 0;
				    height: 0;
				    border-style: solid;
				    border-color: transparent;
				    border-bottom: 0;
				    -webkit-transition:all 1.0s ease;
					-moz-transition:all 1.0s ease;
					-o-transition:all 1.0s ease;
					transition:all 1.0s ease;
				}

				&:before {
					bottom: -21px;
					left: 30px;
					border-top-color: #ccc;
					border-width: 21px;
				}

				&:after {
					bottom: -17px;
					left: 34px;
					border-top-color: #ccc;
					border-width: 17px;
				}
			}


		}
	}
}

.tile {
	width: 100%;
	height: 100%;
	background: #fff;
	.body-border;

	h2 {
		font-family: @body-font;
		font-weight: 500;
		padding: 15px 0 10px 0;
		font-size: 25px;
	}

	#smaller-header {
		font-size: 14px;
	}

	p {
		font-family: @body-font;
		font-weight: 300;
		font-size: 10pt;
		line-height: 14pt;
		letter-spacing: 0px;
	}
}

.homework {
	width: auto;
	height: auto;
}

/*** Carousel CSS ***/

.carousel {
	position: relative;

	.carousel-inner {
		position: relative;
		overflow: hidden;
		width: 100%;

		&>.item {
			display: none;
			position: relative;
		}

		&>.active {
			left: 0;
			display: block;
		}
	}
}

@media screen and (max-width: 868px) {
	#homework-thumbs {
		height: 50px;
		width: 97%;
		margin-left: 1.5%;
		background: #fff;
		cursor: pointer;
	}

	#homework-thumbs-title {
		display: block;
		position: absolute;
		padding-left: 18px;
		padding-top: 18px;
		font-family: @body-font;
		font-weight: 700;
		font-size: 14px;
		letter-spacing: 0.5px;
	}

	#homework-thumbs-img {
		display: block;
		position: absolute;
		right: 2em;
		margin-top: 16px;
		width: 20px;
		height: 20px;
	}

	.list-inline {
		border-bottom: solid 1px;
		color: #eaeaea;

		&.shadow {
			-webkit-box-shadow: 0px 3px 0px 2px #888;
			-moz-box-shadow: 0px 3px 0px 2px #888;
			box-shadow: 0px 3px 0px 2px #888;	
		}

		li {
			width: 100%;
			height: 50px;
			display: none;
			margin-left: 0px;
			text-align: left;
			position: relative;
			z-index: 100;
			border-bottom: 1px solid #ccc;

			&:last-child {
				border-bottom: none;
				box-shadow: 0px 4px 0px 2px #888;
			}

			a {
				width: 100%;
				height: 100%;

				&.inactive {
					opacity: 1;
				}

				&.selected {

					&:before, &:after {
						display: none;
					}
				}
			}
		}

	}

	.tile {

		h2 {
			padding-left: 3.5%;
			padding-right: 1.5%;
			display: inline-block;
			padding-top: 14px;
			font-size: 20px;
		}

		p {
			display: inline-block;
			vertical-align: top;
			padding-top: 16px;
		}

		#smaller-header {
			padding-top: 17px;
		}
	}
	
}