:root{
	--gradient-color: linear-gradient(to right bottom, rgba(0,40,85,.5), rgba(0,98,155,.5), rgba(0,181,226,.5), rgba(255,255,255,0.5));
}
.chapters{
	background: 100%;
	background-color: #fff;
	padding: 50px 0;
  	text-align: center;
}
.chapters #chaps{
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
}
.chapters #chaps h1{
  text-transform: uppercase;	
  background: var(--gradient-color);
  -webkit-background-clip: text;
  color: transparent;
  font-size: 25px;
  font-family: Open Sans Bold;
}
.chapters #chaps .buttons{
	padding: 40px 0;
}
.chapters #chaps .buttons img{
	margin: 10px 20px;
	height: 75px;
	width: 75px;
	-webkit-appearance: none;
	box-shadow: 
	-10px -10px 15px rgba(255,255,255,0.5),
	10px 10px 15px rgba(70,70,70,0.12);
	border-radius: 50%;
	border: 4px solid #fff;
	outline: none;
	justify-content: center;
	text-align: center;
	cursor: pointer;
}
.chapters #chaps .buttons img:hover{
	box-shadow: 
	-10px -10px 15px rgba(255,255,255,0.5),
	10px 10px 15px rgba(70,70,70,.12),
	inset -10px -10px 15px rgba(255,255,255,0.5),
	inset 10px 10px 15px rgba(70,70,70,0.12);
}
@media(min-width: 992px){
	.chapters #chaps .buttons img{
		height: 165px;
		width: 165px;
		border: 8px solid #fff;
	}
	.chapters #chaps h1{
		font-size: 40px;
	}
}

#buttons{
	background-color: #FF952A; 
	border: 1px solid #FF952A;
}
#buttons:hover{
	background-color: #FFF; 
	border: 1px solid #FF952A;
	color: #FF952A;
}
