/* Move down content because we have a fixed navbar that is 3.5rem tall */
body {
    padding-top: 0rem;
  }


.themed-grid-col {
    padding-top: 15px;
    padding-bottom: 15px;

  }




  .jumbotron {
    text-align: bottom;
    margin-top: 15px; 
  }

  .roseelf  {
    background-image: url(../images/Kitty-Girl-With-Umbrella-jumbotron.png);
    background-repeat: no-repeat;
    color: #ffffff;
    background-color: #b2cae2;
    background-size: auto;
    background-position: -50% 50%;
  }


  .card{
    margin-bottom: 10px;
    background-color: rgba(86, 61, 124, .15);
  }

  .card img{
    width: 100%;
  }


  /* Extra small devices (portrait phones, less than 576px)
  No media query for `xs` since this is the default in Bootstrap */
  
  /* Small devices (landscape phones, 576px and up) */
  @media (min-width: 576px) {   
    .roseelf  {
      background-image: url(../images/Kitty-Girl-With-Umbrella-jumbotron.png);
      background-size: auto;
    }  

  }
  
  /* Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) {
    .roseelf  {
      background-image: url(../images/Kitty-Girl-With-Umbrella-jumbotron.png);
      background-size: auto;
      background-position: 70% 50%;
    }
   }
  
  /* Large devices (desktops, 992px and up) */
  @media (min-width: 992px) { 
    .roseelf  {
      background-image: url(../images/Kitty-Girl-With-Umbrella-jumbotron.png);
      background-size: auto;
      background-position: 70% 50%;
    } 
  }
  
  /* Extra large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) {
    .roseelf  {
      background-image: url(../images/Kitty-Girl-With-Umbrella-jumbotron.png);
      background-size: auto;
      background-position: 70% 50%;
    } 
   }