/*
   ==============================================

   Author:     Steve Beeston
   Date:       August 2015

   Principle:  Desktop First

   Notes:      This style sheet is based on information provided by W3Schools 
               Link: http://www.w3schools.com/css/css_rwd_intro.asp

               In this style sheet, displays decribed as "large" are typically a desktop monitor.
               whilst a "medium" display might be a tablet or phablet and a "small" display a smartphone.

   ==============================================
*/


* {
    box-sizing: border-box;
}

.column,
.columns {
   float: left;
   text-align: left;
   padding: 15px;
}

.row:after {
   content: "";
   clear: both;
   display: block;
}



/* For small displays: */
.small-1 {width: 8.33%;}
.small-2 {width: 16.66%;}
.small-3 {width: 25%;}
.small-4 {width: 33.33%;}
.small-5 {width: 41.66%;}
.small-6 {width: 50%;}
.small-7 {width: 58.33%;}
.small-8 {width: 66.66%;}
.small-9 {width: 75%;}
.small-10 {width: 83.33%;}
.small-11 {width: 91.66%;}
.small-12 {width: 100%;}

/* For large displays: */
.large-0 {display: none;}
.large-1 {width: 8.33%;}
.large-2 {width: 16.66%;}
.large-3 {width: 25%;}
.large-4 {width: 33.33%;}
.large-5 {width: 41.66%;}
.large-6 {width: 50%;}
.large-7 {width: 58.33%;}
.large-8 {width: 66.66%;}
.large-9 {width: 75%;}
.large-10 {width: 83.33%;}
.large-11 {width: 91.66%;}
.large-12 {width: 100%;}




img {
    max-width: 100%;
    height: auto;
}



/*
   =======================================
   M E D I U M   S I Z E D   S C R E E N S
   =======================================
*/


@media only screen and (max-width: 899px) {

   /* For medium displays: */
   .medium-0 {width: 0; padding: 0}
   .medium-1 {width: 8.33%;}
   .medium-2 {width: 16.66%;}
   .medium-3 {width: 25%;}
   .medium-4 {width: 33.33%;}
   .medium-5 {width: 41.66%;}
   .medium-6 {width: 50%;}
   .medium-7 {width: 58.33%;}
   .medium-8 {width: 66.66%;}
   .medium-9 {width: 75%;}
   .medium-10 {width: 83.33%;}
   .medium-11 {width: 91.66%;}
   .medium-12 {width: 100%;}

   /* SRB 27/12/20 */
   .column, .columns {
      padding: 10px;
   }

}


/*
   =======================================
   S M A L L   S I Z E D   S C R E E N S
   =======================================
*/


@media only screen and (max-width: 639px) {

   /* For small displays: */
   .column,
   .columns {
      text-align: center;
   }

   .medium-1,
   .medium-2,
   .medium-3,
   .medium-4,
   .medium-5,
   .medium-6,
   .medium-7,
   .medium-8,
   .medium-9,
   .medium-10,
   .medium-11,
   .medium-12,
   .large-1,
   .large-2,
   .large-3,
   .large-4,
   .large-5,
   .large-6,
   .large-7,
   .large-8,
   .large-9,
   .large-10,
   .large-11,
   .large-12 {
      width: 100%;
   }



/* For small displays: */
.small-1 {width: 8.33%;}
.small-2 {width: 16.66%;}
.small-3 {width: 25%;}
.small-4 {width: 33.33%;}
.small-5 {width: 41.66%;}
.small-6 {width: 50%;}
.small-7 {width: 58.33%;}
.small-8 {width: 66.66%;}
.small-9 {width: 75%;}
.small-10 {width: 83.33%;}
.small-11 {width: 91.66%;}
.small-12 {width: 100%;}


}