/*  ============= WEB BROWSER RESETS ============ */
* { margin: 0; padding: 0; border: 0; box-sizing: border-box }
html { height: 100% }
body {
    min-height: 100%;
    max-width: 1900px;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.94em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
}  
img { width: 100%; height: auto; display: block }

/* ========== MAIN CONTENT CONTAINERS ========= */
/* Desktops */
@media (min-width:768px) { .container-block { padding: 1% 8% } }

/* Mobiles */
@media (max-width:767px) { .container-block { padding: 1% 8% } }


/* ========== FLEXBOX PARENT AND CHILD COLUMN ELEMENTS ========= */

/* Flexbox parent container */
.container-flexbox {
   display: flex; 
   justify-content: space-between; 
   flex-wrap: wrap;
   border-color: red;
   border-width: 10px;
}

/* Desktops: flexbox child columns */
@media (min-width:768px) {
    .item-col-1 { width: 100% ; height: 2vh;}
    .item-col-2 { width: 49% ; height: 33vh;}
    .item-col-3 { width: 32% ; height: 2vh;}
    .item-col-5 { width: 19% ; height: 15vh;}
}

/* Mobiles: flexbox child columns */
@media (max-width: 767px) {
    .item-col-1 { width: 100% }
    .item-col-2 { width: 100% }
    .item-col-3 { width: 100% }
    .item-col-5 { width: 100% }
 /* Vertical spacing under child columns */
    .item-col-1 {margin-bottom: 0px }
    .item-col-1 {height: 4vh}
    .item-col-2 {margin-bottom: 18px }
    .item-col-2 {height: 20vh}
    .item-col-5 {margin-bottom: 18px }
    .item-col-5 {height: 20vh}

 /* No vertical spacing under last child column */
    .item-col-1:last-child  { margin-bottom: 0 }
    .item-col-2:last-child  { margin-bottom: 0 } 
    .item-col-5:last-child  { margin-bottom: 0 } 
}

/* Desktops: inner padding for child columns */
@media (min-width: 768px) {
    .item-col-5.item-col-padding { padding: 1.8% 2% 2.2% 2% }
}


/* Mobiles: inner padding for child columns  */
@media (max-width: 767px) {
    .item-col-5.item-col-padding { padding: 6.5% 7% 7% 7% }
}


/* =========== SUB-HEADINGS AND PARAGRAPHS ============*/

/* Sub-headings inside flexbox child columns */
.item-col-1 h1 {
    font-family: 'Roboto', sans-serif;
    font-size: calc(26px + (28 - 24) * ((100vw - 320px) / (1600 - 320)));
    background-color: #ffffff;
    color: #f26222;
    text-align:center;
    margin-bottom: 20px;
    margin-top: 5px;
}

.item-col-1 h2 {
    font-family: 'Roboto', sans-serif;
    font-size: calc(20px + (28 - 24) * ((100vw - 320px) / (1600 - 320)));
    background-color: #ffffff;
    color: #f26222;
    margin-bottom: 8px;
    margin-top: 4px;
}
.item-col-1 h4 { 
    font-family: 'Roboto Condensed', sans-serif;
    font-size: calc(12px + (28 - 24) * ((100vw - 320px) / (1600 - 320)));
    color: #44ab51;
    background-color: #ffffff;	
    margin-bottom: 0px;
    text-align: center;
}
.item-col-1 p {
    font-family: 'Roboto', sans-serif;
    font-size: calc(16px + (19 - 16) * ((100vw - 320px) / (1600 - 320)));
    color: #000000;
    margin-bottom: 15px;
    text-align: left;
    line-height: 1.3;
}

.item-col-2 h2 {
    font-family: 'Roboto', sans-serif;
    font-size: calc(20px + (28 - 24) * ((100vw - 320px) / (1600 - 320)));
    background-color: #ffffff;
    color: #f26222;
    margin-bottom: 8px;
    margin-top: 4px;
}
.item-col-2 p {
    font-family: 'Roboto', sans-serif;
    font-size: calc(16px + (19 - 16) * ((100vw - 320px) / (1600 - 320)));
    color: #000000;
    margin-bottom: 15px;
    text-align: left;
    line-height: 1.3;
}

.item-col-5 h3 { 
    font-family: 'Roboto Condensed', sans-serif;
    font-size: calc(14px + (28 - 24) * ((100vw - 320px) / (1600 - 320)));
    background-color: #ffffff;	
    margin-bottom: 4px;

}

/* Paragraphs inside flexbox child columns */
.item-col-5 p { 
    font-family: 'Roboto', sans-serif;
    font-size: calc(16px + (19 - 16) * ((100vw - 320px) / (1600 - 320)));
}

/* Desktops: paragraph line-spacing and bottom margin */
@media (min-width: 768px) {
    .item-col-5 p { line-height: 1.6; margin-bottom: 20px }
}

/* Mobiles: paragraph line-spacing and bottom margin */
@media (max-width: 767px) {
    .item-col-5 p { line-height:1.4; margin-bottom: 10px }
}

/* No vertical spacing under final item inside child columns */
.item-col-2 *:last-child { margin-bottom: 10px }
.item-col-5 *:last-child { margin-bottom: 10px }


/*hORIZONTAL RULE ORANGE */
hr { 
width:100%; 
height:3px; 
background: #44ab51;
margin-top: 20px;
}



/* ========= COLOURED BACKGROUNDS =========== */
.bg-light { background-color: #f5f5f5 }
.bg-dark  { background-color: #0e2439 }


/* Colours for sub-headings and paragraphs */


/* Visual layout guides - remove when finished */
/*container-flexbox { border: red 10px solid }*/
/*.container-flexbox .item-col-2 { border: black 2px solid }*/

.imgshed {
  display: block;
  max-width:99%;
  max-height:99%;
  width: auto;
  height: auto;
  margin:auto;
  border: 5px solid #40ae49;
  border-radius: 20px;
  padding: 1px;

}