/*--General template start*/
* {
  box-sizing: border-box;
}

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

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

html {
  font-family: "Lucida Sans", sans-serif;
}

div.header h1 {
  color: pink;
  letter-spacing: 0.15em;
}

.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
  text-align: center;
}

.header img {
  float:left;
  margin: 0px;  
}

/*Left pics in menu styling*/
.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 0px;
  margin-bottom: 7px;
}

/*--Footer*/
.footer {
  margin: 0;
  padding: 0;
}

.footer ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

.footer li {
  display: inline-block;
}

.footer ul li a:hover {
  border-bottom: 3px solid red;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  /*If the viewport width is 768px or greater the values below apply. That is not mobiles*/
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 20%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 80%; padding-left: 50px;}
  .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%;}
}

@media only screen and (max-width: 768px){
  .col-3 {
    /*width: 100%;*/
/*If the viewport width is 767px or less the values below apply. That is for mobiles*/
    text-align: center;
  }
  
  .menu ul li{
    display: inline-block;
    margin: 0px;
    padding: 0px;
  }

  .row img {
    width: 102px;
    height: 69px;
    margin: 0px;
    padding: 0px;
  }

  .header img {
    width: 60px;
    height: 60px;
    float:left;
    margin: 0px;
  }

  div.header h1 {
  font-size: 22px;
  }

  .col-6 h1 {
  text-align: center;
  }

  /*centres map in div*/
  div.map1 {
    text-align: center;

  }

  /*sizes map in div*/
  div.map1 img {
    width: 300px;
    height: 200px;
  }

}

@media only screen and (min-width: 800px) {
  .content {
    max-width: 1367px;
    margin: 0 auto;
  }

}


/*--General template end*/


/*--Index page only start*/

.latest_news {
  border: 2px solid blue;
  padding: 5px;
}

.news_title {
  display: inline-block;
  font-weight:bold;
  color: red;
  padding-bottom: 5px;
}

/*--Index page only end*/

/*--About us page only start*/

p.about_us_box_border {
  border: 2px solid red;
  padding: 5px;
}

/*--About us page only end*/


/*--terms page only start*/

ul li .terms_cancel {
  color: red;
}

/*--terms page only end*/


/*--endorsement page only start*/

.comments {
  font-weight: bold;
  padding-left: 20px;
}

span.citation{
  display: block;
  color: red;
  margin-top: 5px;
  padding-left: 5px;

}

/*--endorsement page only end*/



/*==tariff page only start*/

  /*Table styling*/
  .table{
    display: table;
    width:100%;
    border-collapse:collapse;
  }

  .table-head{
    font-weight:bold;
  }

  .table-head.first{
    border-left: 0;
    border-top: 0;
  }
  .table-head.second{
    text-align: center;
    background-color: #f5f5f5;
  }

  .table-row{
    display: table-row;
  }

  .table-row.row1{
    background-color: #e1d6c3;
  }

  .table-row.row2{
    background-color: #e9e6dd;
  }

  .table-row.row1:hover, .table-row.row2:hover {
    background-color: #c3cbcd; 
  }

  .table-cell, .table-head{
    display: table-cell;
    padding:1em;
    border: 1px solid black;
  }

/*==tariff page only end*/