body {
  font-family: 'Raleway', sans-serif; }
  body h1 {
    font-family: 'Baloo Da 2', cursive; }
  body h2 {
    font-family: 'Baloo Da 2', cursive; }

.jumbotron {
  background-image: url("https://cdn1.vectorstock.com/i/1000x1000/75/55/bookshelve-with-books-background-library-vector-20657555.jpg");
  height: 300px; }
  .jumbotron .jumbocont {
    background-color: rgba(128, 0, 0, 0.6);
    border-radius: 25px;
    height: 180px; }
  .jumbotron h1 {
    color: yellow !important; }
  .jumbotron p {
    color: white !important; }

.leftcol1 {
  margin-top: 20px;
  margin-right: 95px;
  background-color: white;
  border-radius: 25px;
  height: 300px;
  color: black;
  transition: height 0.5s, background-color 0.5s, margin-top 0.5s; }
  .leftcol1 img {
    width: 220px;
    height: 220px;
    margin-left: 110px;
    margin-bottom: 15px;
    transition: height 0.5s, width 0.5s; }
  .leftcol1 h2 {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px; }

.leftcol1:hover {
  height: 325px;
  background-color: black;
  margin-top: 3px;
  color: white; }
  .leftcol1:hover img {
    height: 245px;
    width: 225px; }

.rightcol1 {
  margin-top: 20px;
  margin-left: 70px;
  background-color: white;
  border-radius: 25px;
  height: 300px;
  color: black;
  transition: height 0.5s, background-color 0.5s, margin-top 0.5s; }
  .rightcol1 img {
    width: 220px;
    height: 220px;
    margin-left: 110px;
    margin-bottom: 15px;
    transition: height 0.5s, width 0.5s; }
  .rightcol1 h2 {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px; }

.rightcol1:hover {
  height: 325px;
  background-color: black;
  margin-top: 3px;
  color: white; }
  .rightcol1:hover img {
    height: 245px;
    width: 225px; }

.leftcol2 {
  margin-top: 20px;
  margin-right: 95px;
  background-color: white;
  margin-bottom: 40px;
  border-radius: 25px;
  height: 300px;
  color: black;
  transition: height 0.5s, background-color 0.5s, margin-top 0.5s; }
  .leftcol2 img {
    width: 220px;
    height: 220px;
    margin-left: 110px;
    margin-bottom: 15px;
    transition: height 0.5s, width 0.5s; }
  .leftcol2 h2 {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px; }

.leftcol2:hover {
  height: 325px;
  background-color: black;
  margin-top: 5px;
  color: white; }
  .leftcol2:hover img {
    height: 245px;
    width: 225px; }

.rightcol2 {
  margin-top: 20px;
  margin-left: 70px;
  margin-bottom: 40px;
  background-color: white;
  border-radius: 25px;
  height: 300px;
  color: black;
  transition: height 0.5s, width 0.5s, background-color 0.5s, margin-top 0.5s; }
  .rightcol2 img {
    width: 220px;
    height: 220px;
    margin-left: 110px;
    margin-bottom: 15px;
    transition: height 0.5s, width 0.5s; }
  .rightcol2 h2 {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px; }

.rightcol2:hover {
  height: 325px;
  background-color: black;
  margin-top: 5px;
  color: white; }
  .rightcol2:hover img {
    height: 245px;
    width: 230px; }

footer {
  background-image: url("https://www.rarewoodsusa.com/wp-content/uploads/2018/08/mahogany-brazil-1000x500.jpg");
  color: white;
  padding: 10px; }
  footer a {
    margin: 20px;
    text-decoration: none !important; }
    footer a .gh {
      color: black; }
    footer a .fb {
      color: darkblue; }
    footer a .gh:hover {
      color: #4339bf; }
    footer a .fb:hover {
      color: white; }

@media only screen and (max-width: 550px) {
  body {
    background-size: cover !important; }
  .leftcol1 {
    margin-right: 0px;
    margin-left: 0px; }
    .leftcol1 img {
      width: 200px;
      height: 190px;
      margin-left: 90px; }
  .leftcol1:hover img {
    height: 210px;
    width: 200px; }
  .rightcol1 {
    margin-left: 0px; }
    .rightcol1 img {
      width: 200px;
      height: 220px;
      margin-left: 88px; }
  .rightcol1:hover img {
    height: 240px;
    width: 210px; }
  .leftcol2 {
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 20px; }
    .leftcol2 img {
      width: 240px;
      height: 230px;
      margin-left: 60px; }
  .leftcol2:hover img {
    height: 240px;
    width: 240px; }
  .rightcol2 {
    margin-top: 0px;
    margin-left: 0px; }
    .rightcol2 img {
      width: 230px;
      height: 240px;
      margin-left: 75px;
      margin-bottom: 10px; }
  .rightcol2:hover img {
    height: 250px;
    width: 230px; }
  .jumbotron .jumbocont {
    height: 200px; } }