@charset "utf-8";
/*---------------------REGULAR TWEAKS----------------------------*/
/*--------------------------SKIN---------------------------------*/
body {background-color: #0d0d0d; /*DARK*/ font-size: 1.75em; /* currently ems cause chrome bug misinterpreting rems on body element */
      line-height: 1.5; font-weight: 400;
        font-family: EB Garamond, serif;
      color: #343434; /* font colour DARK */  margin:0 0 0 0;
	  background-image:url(../images/skin/background.png); background-repeat:repeat-x; background-position: top center;}
	  
.body-container {background-color: #f5f9e9;/*body colour  */;position: relative; width: 100%; max-width: 1024px; /*site width*/ margin: 0 auto; /*centre*/box-sizing: border-box;
box-shadow: 12px 0 15px -4px rgba(52,52,52,0.64), -12px 0 15px -4px rgba(52,52,52,0.64);} 			
/*job specific*/
.prices th, td {
    border: 2px solid #fff;
    margin: 0 0 15px 0;
    text-align: left;
    width: 100%;
    border-spacing: 0;
    color: #FFF;
    padding: 10px 10px 10px 10px !important;}
.email {width:80%  }	
.service-row {margin:20px 20px 20px 20px} 		  

.full-row {padding:0px;}
.border {border-style: solid; border-width: 15px; border-color:#8cafa9; padding:20px}
.flex-columns > section,aside {padding:20px}	

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

.logo  {flex: 1;width: 49%; background-image:url(../images/skin/logo.png);background-repeat:no-repeat;
 background-size: 60%;
padding-top: 11%;
margin-top: 1.5%;
margin-left: 1.5%;}

.flex-header {flex: 1;width: 52%;  margin: 0px 0px 0 0;}

.mailchimp-form { border-style: solid; border-width: 15px; border-color:#FFF; padding:20px;-moz-border-radius: 30px;
border-radius: 30px;background:#999; padding:10px 10px 10px 10px; text-align:center;}

.mailchimp-title { margin-bottom:15px}

.mailchimp-emailbox{ margin-bottom:15px}

.header { background-image: url(../images/skin/headerback.jpg); background-repeat:no-repeat; background-size:cover}
.header-contact {width: 99%;order:2; text-align:right; margin-left:-25px; margin-top:-5px; font-family: 'Source Sans Pro', sans-serif; color:#343434 !important  } 
.header-image {width: 49%;order:3; background-image: url(../images/skin/header.jpg); background-repeat:no-repeat; background-position:right top} 
.copyright { text-align: center;}
footer {color:#FFF; padding: 0 20px;display:block; background-color:#8cafa9}

.header-image img {max-width:241px;}
.tel { font-size:22px;margin: 8% 0 0 0;color:#4d4d4d; /*text colour */}
/*FONTS*/			 

			 

/*p {margin-top: 0;color:#000; text colour  }*/
/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {color: #343434; font-weight:bold;text-decoration:none}
a:hover { text-decoration:underline  }

h1, h2, h3, h4, h5, h6 {
 color:#8cafa9; font-family: 'Source Sans Pro', sans-serif;  
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300;

}


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

h1 { font-size: 2.6rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 2.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 2.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 1.8rem; line-height: 1.35; letter-spacing: -.08rem;margin-bottom: 0rem !important }
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: 2.6rem; }
  h2 { font-size: 2.6rem; }
  h3 { font-size: 2.0rem; }
  h4 { font-size: 2.0rem; }
  h5 { font-size: 2.0rem; }
  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}*/


/*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 {margin:15px 25px 25px 25px}

/*MAIN FLEXBOX*/
/*how should main flex work*/
.flex-columns {display: flex; flex-wrap: wrap;flex-direction:row}


/*how many default columns*/
.box2 {flex: 1; min-width: 48%;}
.box3 {flex: 1; min-width: 31%;}
.box4 {flex: 1; min-width: 24%;}

.first2thirds {flex: 1; min-width: 66%;}
.lastthird {flex: 1; min-width: 33%;}

.last2thirds {flex: 1; min-width: 66%;}
.firstthird {flex: 1; min-width: 33%;}

/*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;}

/*header*/
.flex-header {display: flex; flex-wrap: wrap;flex-direction:row;}
/*logo*/
.logo img {  max-width:60%;max-height:100%; margin: 3% 0% 3% 3% }

/*contact info*/


.social-info {text-align: right; order:1;}
.header-contact {order:2}
.contactpage {margin:-20px 0 -20px 0}

@media (max-width: 1024px) { .full-row {padding:20px;} .header-image { background-image: none;}}
@media (max-width: 840px) {.contactpage {margin:0px 0px 0px 0px}
                           .header-contact {order:1; width: 100%}
						   .logo-image {max-width: 99%;}
						   .tel { font-size:20px; margin:4% 0% 0% 0%; text-align:center}
					/*	 */   
                        .flex-header {flex: 1;min-width::320px;}
						  }

@media (max-width: 700px) {.box2 {min-width: 99%; }  .tel { font-size:16px; }
@media (max-width: 690px) {.box2 {min-width: 99%; } .logo  {flex: 1; min-width: 99%; }.tel {font-size:20px; margin:0% 0% 0% 0% !important }
@media (max-width: 690px) {.first2thirds {flex: 1; min-width: 99%;} .lastthird {flex: 1; min-width: 99%;}}
@media (max-width: 690px) {.last2thirds {flex: 1; min-width: 99%;} .firstthird {flex: 1; min-width: 99%;}
.logo  {background-image:url(../images/skin/logo-mobile.png);padding-top: 23%;
margin-top: 0%;
margin-left: 19%;}}

@media (max-width: 700px) {.header-contact { background-image:none; }}
@media (max-width: 690px) {.box2 {min-width: 99%; } }
  
@media (max-width: 700px) {.box3 {min-width: 49%; }}
@media (max-width: 690px) {.box3 {min-width: 100%; }}

@media (max-width: 800px) {.box4 {min-width: 33.33%; }}
@media (max-width: 620px) {.box4 {min-width: 49%; }}
@media (max-width: 690px) {.box4 {min-width: 99%; } .header-contact {margin: -20px 0px 5px 0px !important;} .logo img {margin: 0 20% 10px 20% !important;} .tel { color:#5e7069 !important}}

.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%; }*/




  
	





/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {list-style: circle 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%;text-indent: -1em; }
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;
	width:50%
}
.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
}