@charset "utf-8";
/*---------------------REGULAR TWEAKS----------------------------*/
/*--------------------------SKIN---------------------------------*/
body {background-color: #FFF; background-image:url(../images/crossword-tile-grey.jpg); background-repeat:repeat; /*DARK*/ font-size: 1.6em; /* currently ems cause chrome bug misinterpreting rems on body element */
      line-height: 1.6; font-weight: 400;
      font-family: 'Verdana', sans-serif;
      color: #333; /* font colour DARK */  margin:0 0 0 0;}

.shadow-container {
                 box-sizing: border-box; box-shadow: 12px 0 15px -4px #333333, -12px 0 8px -4px rgba(0, 0, 0, 0.5) /* shadow size & colour */
             /*  padding: 0 20px; DARK*/;}
	  
.body-container {background-color: #FFF;/*body colour  */;position: relative; width: 100%; max-width: 1024px; /*site width*/ margin: 0 auto; /*centre*/} 				 		  
.full-row-top {padding:5px 20px 0px 20px;}
.full-row {padding:20px;}
.border {border-style: solid; border-width: 15px; border-color:#666;}
.flex-columns > section,aside {padding:20px}	

.buyborder  {border-width: 10px; 
    border-color: #037381; 
    border-radius: 20px; 
    border-style: solid;
	padding:15px} 

.banner {padding:0px !important;}
.img-float-right { float:right;}
.img-float-left { float:left;}

.logo  {flex: 1; width:100%; background-image:url(../images/header-text.jpg); background-size:100% }
.flex-header {flex: 1;min-width:: 29%;  margin: 20px 20px 0 0;}
  
.copyright { text-align: center;}
footer {color:#333; padding: 0 20px;display:block;}

.social-info img {max-width: 40px; max-height:40px;}
.tel { font-size:24px;margin-top: 13%;color:#000;/* text colour */}
/*FONTS*/			 

			 

/*p {margin-top: 0;color:#000; text colour  }*/
/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {color: #333; }
a:hover {color: #060; }

h1, h2, h3, h4, h5, h6 {
  color:#000;/* border-bottom:2px solid #999; */
  margin-top: 0;
  margin-bottom: 0rem;
  text-align:center;
 padding:5px; margin:auto;
  font-weight: 300;
  font-family: 'Verdana', sans-serif;}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */

h1 { font-size: 2.6rem; line-height: 1.2;  letter-spacing: 1px; }
h2 { font-size: 2.0rem; line-height: 1.25; letter-spacing: 0rem; }
h3 { font-size: 2.0rem; line-height: 1.1;  letter-spacing: -.1rem;text-align:left !important; }
h4 { font-size: 1.8rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.6rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 3.0rem; }
  h2 { font-size: 2.2rem; }
  h3 { font-size: 2.1rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}
/*GENERAL LINKS BEHAVIOUR
a:link, a:visited {color:#000; text-decoration:none}
a:hover, a:active{color:#000; text-decoration:underline}*/

/*SPECIFIC LINKS BEHAVIOUR
.navbar a:link {color:#FFF}
.navbar a:visited {color: #FFF}
.navbar a:hover {color: #FFF; text-decoration:underline}
.navbar a:active {color: #FFF}*/


p {padding: 0px 8px 0px 8px}




/*NOTE - html is set to 62.5% so that all the REM measurements are basically 1.5rem = 15px */
html {font-size: 62.5%; }
 

/*To secure correct behavior in older browsers, set the CSS display property for these HTML elements to block:*/
header, section, footer, aside, nav, main, article, figure {display: block;} 

/*include padding etc in size*/
* {box-sizing: border-box;}




/*MAIN FLEXBOX*/
/*how should main flex work*/
.flex-columns {display: flex; flex-wrap: wrap;flex-direction: row !important}
.logo-image {  max-width:40%; padding: 20px 20px 10px 20px}

/*how many default columns*/
.box2 {flex: 1; min-width: 48%;}
@media (max-width: 1000px) {.box2 {min-width: 99% !important; } 
.logo  {background-image:url(../images/header-blank.jpg); }
}
.box3 {flex: 1; min-width: 31%;}
.box4 {flex: 1; min-width: 24%;}

/*what order should boxes be in*/
.order-left {order:1;}
.order-mid {order:2;}
.order-mid-left {order:2;}
.order-mid-right {order:3;}
.order-right {order:4;}

/*box images*/
.box-fit {max-width:100%; max-height:auto; padding:20px 20px 0px 20px}

/*header*/
.flex-header {display: flex; flex-wrap: wrap;flex-direction:column;}
/*logo*/


/*contact info*/


.social-info {text-align: right; order:1;}
.header-contact {text-align: right;order:2}

@media (max-width: 780px) {div.floatbutton .popoutpanel {display: none; } }
@media (max-width: 780px) {.social-info {text-align: right; order:3;}
                           .header-contact {text-align: right;order:1}
						   .flex-header {flex-direction:row;margin: 0 0 0 0;}
						   .flex-header { justify-content:space-around}
						   .logo-image {max-width: 99%;}
						   .tel { font-size:24px; margin-top:0% !important}
						   .logo  {flex: 1; min-width: 99%; }
                           .flex-header {flex: 1;min-width::320px; }


}
<!--@media (max-width: 1024px) { .full-row {padding:20px;} }   for padding at edges on dark sites ---->



  
@media (max-width: 700px) {.box3 {min-width: 49%; }}
@media (max-width: 420px) {.box3 {min-width: 100%; }}

@media (max-width: 800px) {.box4 {min-width: 33.33%; }}
@media (max-width: 620px) {.box4 {min-width: 49%; }}
@media (max-width: 420px) {.box4 {min-width: 99%; }}

.clearfix:before, .clearfix:after{display: table; content: " ";}
    .clearfix:after{ clear: both;
}
/*was for ggole map embed I think?
.embed-container { position: relative; padding-bottom: 86.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }*/




  
	
/* images
––––––––––––––––––––––––––––––––––––––––––––––––– */
.fullwidth-img {width:100%;}
.halfwidth-img {width:49%;}




/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {list-style: square inside; }
ol {list-style: decimal inside; }
ol, ul {padding-left: 0; margin-top: 0; }
ul ul, ul ol, ol ol, ol ul {margin: 1.5rem 0 1.5rem 3rem; font-size: 90%; }
li { }


.button {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 7px 24px;
    border: 1px solid #31669e;
    border-radius: 8px;
    background: #4fa6ff;
    background: -webkit-gradient(linear, left top, left bottom, from(#4fa6ff), to(#31669e));
    background: -moz-linear-gradient(top, #4fa6ff, #31669e);
    background: linear-gradient(to bottom, #4fa6ff, #31669e);
    text-shadow: #1f4063 1px 1px 1px;
    font: normal normal bold 18px arial;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase
}
.button:hover {
    border: 1px solid ##3d80c5;
    background: #5fc7ff;
    background: -webkit-gradient(linear, left top, left bottom, from(#5fc7ff), to(#3b7abe));
    background: -moz-linear-gradient(top, #5fc7ff, #3b7abe);
    background: linear-gradient(to bottom, #5fc7ff, #3b7abe);
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase
}
.button:active {
    background: #31669e;
    background: -webkit-gradient(linear, left top, left bottom, from(#31669e), to(#31669e));
    background: -moz-linear-gradient(top, #31669e, #31669e);
    background: linear-gradient(to bottom, #31669e, #31669e);
    text-transform: uppercase
}
.button:focus {
    text-transform: uppercase
}