/* Class applied to the DIV parent of the Image
____________________________________________________*/

.side-image {
    width: 250px;
    border: thin black solid;
    box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin: 10px 10px 5px;
}


/* Responsive for small screens */

@media screen and (max-width: 500px) {
    .side-image {
        width: 100%;
        margin: 5px 0 20px;
        max-width: 100% !important;

    }
}


/* Responsive for larger screens (deprecated) */


/* @media screen and (min-width: 500px) {
  .side-image {
    margin: 10px 10px 5px;
  }
  } */


/* -----------end----------- */


/* Class applied to the image inside the DIV parent of image
____________________________________________________*/

.side-image img {
    width: 100%;
    height: auto;
}


/* Responsive for small screens */

@media screen and (max-width: 500px) {
    .side-image img {
        height: 200px !important;
        overflow: hidden;
        object-fit: cover;
    }
}


/* -----------end----------- */


/* fix for float-left next to ul - DON'T apply to to everything 
    because it disallows the text to wrap around the image
____________________________________________________*/

.float-left+p+ul {
    overflow: hidden;
}

.float-left+ul {
    overflow: hidden;
}


/* -----------end----------- */