/***Flex containers ***/
.spare-parts
    {display:flex;
    flex-direction:row;
    text-align:left;
    justify-content:left;  /**don't think there is a justify-content:left; so presumably this isn't doing anything, check **/
    width:100%;
    margin:0 auto 8px; 
    padding:0;
    border111111:1px solid #000;
    }

 /****images centered horiz by default***/
.spare-parts img {display:block; margin: 0 auto;}


    .c33-1 {width:33%; padding:0 2%;}
    .c33-2 {width:33%; padding:0 2%;}
    .c33-3 {width:33%; padding:0 2%;}
    .c33-1 img, .c33-2 img, .c33-img  {display:block; margin: 0 auto 0 0;}

    
/*** MOBILE VIEW:  MEDIA QUERY 3 cols to 1 column ***/
    
 @media only screen and (max-width:740px) {
    .spare-parts
        {flex-direction:column;
        text-align: left;
        justify-content:left;
        align-items:center; /*centres vert when dir=row ****/     /**********NOT SURE IF THIS IS DOING ANYTHING - CHECK ********/
        width:84%;
        padding: 0 8%;
        margin: 0 auto 20px 0;}
    .c33-1, .c33-2, .c33-3 {width:100%; padding:0 4% 0 15%;}
     .c33-2, .c33-3 {margin-top:-27px;}
     @media only screen and (max-width:500px) {.c33-2, .c33-3 {margin-top:-22px;}}
      @media only screen and (max-width:400px) {.c33-2, .c33-3 {margin-top:-17px;}}
 }    /*********media query closing bracket DON'T DELETE THIS BRACKET *********/

.hero-panel-text {margin-top:28vw;}
@media only screen and (max-width:1100px) {.hero-panel-text {margin-top:40vw;}}
@media only screen and (max-width:700px) {.hero-panel-text {margin-top:55vw;}}    
.hero-panel-text p {line-height:26px;}
.div-under-faded-hero-image {margin-top:0;}