* {
    box-sizing: border-box;
    font-family: sans-serif
}

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

[class*="col-"] {
    float: left;
    padding: 10px;
    border: 0px;
}

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

img {
    max-width: 100%;
    height: auto;
    padding: 20px;
    text-align: center;
}

.docs {
    max-width: 75%;
}

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

h1 {
    padding-top: 20px;
    margin-top: 0px;
    font: 32px/40px sans-serif;
}

h2 {
    color: #444444;
    font: bold 24px/36px sans-serif;
    margin-top: 0px;
    margin-bottom: 0px;
}

h3 {
    color:  #444444;
}

.header {
    background-color: #734FA9;
    color: white;
    Text-align: center;
    padding:0px;
    margin:0px;
    border:0px;
    font: 18px/27px sans-serif;
}

.contact {
    color: #99CCFF;
    margin: 0;
    text-align: center;
    font-size: medium;
}

.contact a  {
    color: #99CCFF;
}

p, li {
    padding:0px;
    margin:0px;
    border:0px;
    font: 18px/27px sans-serif;
    color: #444444;
    text-align: left;
}
 
.topnav {
    background-color: #734FA9;
    overflow: hidden;
    text-align: center;
    z-index: 6;
}

.topnav a {
    display: inline-block;
    margin-right: -4px;  /* inline-block gap fix */
    padding: 8px 32px;
    color: white;
    text-decoration: none;
    z-index: 9;
}
.topnav a:hover {
    background-color: #c1cefe;
    color: #734fa9;
}

.nav2 {
    background-color: #734FA9;
    overflow: hidden;
    text-align: center;
    z-index: 6;
}

.nav2 a {
    display: inline-block;
    margin-right: -4px;  /* inline-block gap fix */
    padding: 8px 32px;
    color: white;
    text-decoration: none;
    z-index: 9;
}
.nav2 a:hover {
    background-color: #c1cefe;
    color: #734fa9;
}

.topnav .icon {
    display: none;
}

@media screen and (max-width: 900px) {
  .topnav a {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 900px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

.white {
    background-color: #f9f8f8;
}

.left {
    text-align: left;
}

.portrait {
    border-radius:  50%;
    vertical-align: middle;
    }
    
.centre  {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 75%;
}    

.about  {
    text-align: center;
}

.HCPC {
    max-width: 225px; 
    vertical-align: middle;
    padding-top: 0px;
}

.flat {
    padding: 1px;
}

a:link   {
    text-decoration: none;
}

i      {
    vertical-align: middle
}

.google-maps {
        position: relative;
        padding-bottom: 60%;
        height: 0;
        overflow: hidden;
      }
.google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
}