/* Reading School 2018, CSS */
.carousel-inner {
	height: 250px;
	border-radius: 4px;
    overflow: hidden auto;
    margin-bottom: 15px;
    background: rgba(10,10,10,0.2);
}

/* place carousel indicators between the two buttons (next & previous) */
.presentation-flexbox {
  	display: -webkit-box;
  	display: -moz-box;
  	display: -ms-flexbox;
  	display: -webkit-flex;
  	display: flex;
  	margin-bottom: 15px;

  	-webkit-flex-flow: row wrap;
  	flex-flow: row wrap;
	justify-content: space-between;
}
.carousel-indicators {
	order: 1;
}
.presentation-button-left {
	order: 0;
}
.presentation-button-right {
	order: 2;
}

.carousel-inner .item {
	height: 100%;
	width: 100%;
	border: none;
	padding: 15px;
	overflow: auto;
}

.carousel-indicators li {
	border: 1px solid var(--mdc-theme-secondary);
	margin-top: 12px;
}
.carousel-indicators .active {
	background-color: var(--mdc-theme-secondary);
}

/* revert changes made by Bootstrap */
.carousel-indicators {
	margin: 0;
	position: initial;
	width: auto;
	z-index: inherit;
}

/* add side margins depending on screen size */
#main-content {
	text-align: left;
	margin: 20px 15%;
}
@media screen and (max-width: 1000px) {
	#main-content {
		margin: 20px 10%;
	}
}
@media screen and (max-width: 800px) {
	#main-content {
		margin: 20px 5%;
	}
}
@media screen and (max-width: 600px) {
	#main-content {
		margin: 20px;
	}
}