/* GREEN - #385755 */
/* BLUE - #385755 */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;500;700;900&display=swap');

@font-face {
    font-family: 'Skia';
    src:url('font/Skia.ttf.woff') format('woff'),
        url('font/Skia.ttf.svg#Skia') format('svg'),
        url('font/Skia.ttf.eot'),
        url('font/Skia.ttf.eot?#iefix') format('embedded-opentype'); 
    font-weight: 100;
    font-style: normal;
}

body,
html {  width: 100%;  height: 100%;  margin: 0;  padding: 0; letter-spacing:0px;font-family: 'Skia';background-position: right bottom}

h1 { text-align: left; font-size:2em; margin:0px 0 ;color:#385755;   border:0px; line-height:100%; font-weight: 800; font-style: normal;}
.center { text-align: center !important; }
h2 {  font-size:1.85em; margin:10px 0 0 0;color:#385755;;  text-align:left; line-height:100%; font-weight: 800; font-style: normal;}
.half h2, .half2 h2 {font-size:2.6em; }
/*h3 {font-size:2.3em;  margin:10px 0 0 0 ; color:#b78d75;   font-weight: 700; font-style: normal;}*/
h3 {font-size:1.75em;  margin:10px 0 0 0 ; color:#b78d75;   font-weight: 700; font-style: normal;}
h4 { font-weight:400; font-size:1.2em; margin:10px 0 0 0 ; color:#333;  }
hr {clear:both;border:0px; border-bottom:1px solid #ddd; padding-top:30px; margin:0px 0 30px 0}

/*h1,h2,h3,h4 { font-family: kewl-script, sans-serif;	 font-weight:400; }*/
h1,h2,h3,h4 {  font-weight:700; }
.spacer {padding-top:80px;}
p{ text-align:left; color:#333; font-size:1.3em; margin:8px 0 16px 0; font-weight:100; line-height:1.3em;  }
.white {color:#ffffff !important}
td{ color:#333; font-size:1em;}
strong {font-weight:600; color:#000000;}
.left {float:left}
.right {float:right; }

.fancyboxgal img {
  object-fit: cover;
  width:300px !important;
  height:300px !important;
}


.fancyboxgal2 img {
  object-fit: cover;
  width:360px !important;
  height:360px !important;
	margin:0px 0 30px 0 !important;
	display: block !important;
}



.modal {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #402e6b;
    background-color: rgba(64, 46, 107, 0.9);
    color: #000;
    z-index: 999999;
}
.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px 30px;
    border: 0 solid #888;
    width: 70%;
}
	
	
.mod-info p {
	font-size: 1em;	
}
	
	
.close,
.closevid {
    width: 100%;
    color: #aaa;
    text-align: right;
    float: right;
    font-size: 38px;
    font-weight: 700;
    position: relative;
    z-index: 999999;
}
.close:focus,
.close:hover,
.closevid:focus,
.closevid:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.modal-content .half {
    padding: 0;
    margin-top: -3%;
}
.modal-content .half img {
    width: 100%;
}
.quoteholder {clear:both; width:80%; margin:30px 10% 80px;background: #d6b4a9 ; height:auto;}
.quoteholder.lt {background: #d4c8b0;}
.quoteholder.drk {background: #b6b8a3;}
.quoteholder blockquote { width:100%;color:#575756; font-size:1.6em;font-weight:100; text-align:center;margin: 0 0;padding: 70px 70px;line-height: 1.2em;position: relative;z-index:1; box-sizing:border-box}
.quoteholder blockquote div{ width:100%;}
.quoteholder blockquote:before {text-shadow:none;display: block;padding-left: 5px;content: "\201C";font-style:normal;font-family: kewl-script, sans-serif;	 font-size: 400px;position: absolute;left: -55px;top: 200px;color:#385755;z-index:-1;}
.quoteholder blockquote:after {text-shadow:none;display: block;padding-right: 10px;content: "\201D";font-style:normal;font-family: kewl-script, sans-serif;	 font-size: 400px;position: absolute;right: -44px;bottom: -265px;color: #385755;z-index:-1;}
.quoteholder blockquote cite {font-family: kewl-script, sans-serif;	color:#575756; letter-spacing:0px; font-size: 1.5em; line-height:1.1em; display: block;margin-top: 20px; text-transform:none; font-weight:400}



.mib {width:9% !important; margin-bottom: 0 !important;}
.mib  img{width:90%!important  ; margin:26px 0% 0 24px!important;}

.flexslider .slides li {  	animation: shrink 5s infinite alternate;	}

#products {display: flex;    justify-content: center; clear:both;}
#products a{ padding:1% 2%; border-radius:10px; margin:2% 1% 0; font-size:1.4em; font-weight:700; background:#385755; color:#ffffff; transition: 0.3s; box-sizing: border-box}
#products a:hover{ background:#385755; margin:2% 1% 0;}

@keyframes shrink {  0% {    background-size: 110% 110%;  }  100% {    background-size: 100% 100%;  }   }
a.cat ,a.cat2  {  position:relative; text-decoration: none !important}
.cat h2 { color:#385755; width:auto;   padding:0px 15px 10px; font-size: 1.6em; margin-top:0px; box-sizing: border-box; text-align: center !important}
.cat h3 {  margin-top:30px; box-sizing: border-box; text-align: center !important}

.cat2 h2 {color:#385755;  width:auto; ;  padding:10px 15px;  height:48px; bottom:100px; font-size: 1.5em; box-sizing: border-box}

.cat  {text-align:center}
.cat a.btn,
.half a.btn,
.half2 a.btn { border:1px solid #ddbea9; padding:15px 20px; margin-top:15px; display:inline-block; transition:0.4s; font-size:1.6em; text-decoration:none; color: #385755;}
.cat a.btn:hover ,
.half a.btn:hover,
.half2 a.btn:hover { border:1px solid #385755; display:inline-block}

.half { float:left; width:48%; margin-right:0%; height:auto; padding:0% 0;  box-sizing: border-box	 }
.half2 { float:right; width:48%; margin-right:0%; height:auto; padding:0% 0;  box-sizing: border-box	 }
.half:nth-of-type(2n){margin-right:0%;padding:0%;}

.half img {padding: 0 5% 5% 0%;    box-sizing: border-box;}
.half2 img {padding: 0 0% 5% 0%;    box-sizing: border-box;}

.half p {padding: 0 5% 0% 0%;    box-sizing: border-box;}
.half2 p {padding: 0 0% 0% 0%;    box-sizing: border-box;}


.half2 { float:right; width:49%; margin-left:0%;}

.qhalf{clear:left;width:49%; float:left; height:auto; margin-bottom:2%; padding:3%; box-sizing: border-box}
.qhalf:nth-of-type(even){ clear:none; width:49%; float:left; height:auto; margin-left:2%}


.clear {clear:both; } 

.imgleft{float:left; width:25%; margin:0 3% 3% 0%}
.imgright{float:right; width:25%; margin:0 0% 3% 3%}
.holder {margin:0px auto; max-width:960px; }
.holder:before, .holder:after {	content: "\0020";	display: block;	height: 0;	overflow: hidden;}
.holder:after {	clear: both;}


.navholder {width:100%; background: #fbe9d3; }
.navholder .holder {margin:0px auto 0;padding:7px 0px; }


.halfholder {margin:0px auto; max-width:480px; float:left; }
.hmap {padding:0;margin:0;}

.fullholder {float:left; width:100%;}
.fullholder .holder {margin:0px auto 0;}

.orangebtn {position: relative;
    z-index: 1000;
    pointer-events: all;
    clear: both;
    display: inline-block;
    background-color: #385755;
    padding: 8px 18px;
    color: #ffffff !important;
    text-align: center;
    text-decoration: none;
    font-size: 1.4em;
    font-weight: 700;margin-top:15px;
    border:0px;
    
    transition: 0.5s;}


.evenly {
	margin:3% 0 1.5%;
  display:flex;
  justify-content:space-between;

}
.evenly img {
  white-space:nowrap;
  
}



header { width:100%; background-color:#fbe9d3; position:relative; z-index:11; text-align:center}
header .top{ position:relative; z-index:9999; pointer-events: none;} 
header .logo {   margin-left:32%;  width:20%; height:auto;margin-top:30px;margin-bottom:0px; position:relative; z-index:1000; pointer-events:all; display: inline-block;}
header .logo span {display:none}
header .logo img{ width:100%}
header .strapline {width:100%; text-align:center; height:auto;  margin:-20px 0 20px 0%;   pointer-events:all;float:left; font-size:1.6em; line-height:1em; color:#b78d75;}
header .contacts {float:right;width:20%; margin-top:10px; text-align: right}
header a.enquire-btn {position:relative; z-index:1000; pointer-events:all;clear:both;display:inline-block; background-color:#385755; padding:8px 20px; color:#ffffff; text-align:center; text-decoration:none; font-size:1.6em;font-weight:600;border: 4px solid #F7941D; transition:0.5s}
header a.enquire-btn:hover { background-color:#F7941D;  color:#ffffff; }
header .headcont { padding:85px 0 0; float:right;  color:#385755; line-height: 1.5em;  font-size:1.5em; text-align: right; width:32%; }
header .headcont a{ text-decoration: none; color:#385755 ; margin-bottom:30px;}
header .headcont i{ margin:0px 6px 0px 0; font-size:0.80em;}

.topbar {background:#385755; color:#ffffff; padding:8px 0; letter-spacing:0px;}
.topbar .phone{margin-right:2%; float:left}
.topbar .email{margin-right:2%; float:left}
.topbar .info{width:auto; float:right;}
.topbar .phone i,
.topbar .email i{margin-right:10px;}

.navycta {background:#385755; color:#ffffff; padding:35px 0 40px;  text-align: center }
.navycta p { color:#ffffff;  float:left;  font-weight: 600; font-size:2.2em; line-height: 100%; }
.navycta button { background:#3AAA35; padding:8px 30px;float:right; color:#ffffff; text-transform: uppercase; font-weight: 600; font-size:1.5em; border:0; transition: 0.3s; margin-top:20px; border-radius: 10px; }
.navycta button:hover { color:#385755; background:#ffffff;  }

.hgp{float:left;width:68% ; margin-top:2%}

#bagbuilder {box-sizing: border-box !important}

.masthead {background:#385755; padding:50px 0; }
.masthead h1 {position:absolute; right:0px; top:0px; color:#ffffff; text-align: right !important; font-size:3.7vw;}
button.hirebtn { clear:both; background:#385755; padding:8px 30px;color:#ffffff; text-transform: uppercase; font-weight: 600; font-size:1.5em; border:0; transition: 0.3s; margin:0px auto 0; display: block }
button.hirebtn:hover { background:#3AAA35; color:#ffffff;  }


#contactinfo {padding:3% 0; background :#C0BFBF !important}
#contactinfo p {text-align: left}
#contactinfo .continfo p {text-align: left; color:#385755; font-weight: 600}


.phone-contact-h {position:relative; z-index:1000; pointer-events:all;float:right; color: #444444 !important; font-size:1.4em; height:24px;font-weight:600;  line-height:0.9em; text-decoration:none !important;margin-bottom:15px;}

header .navholder {width:100%; clear:both;margin-top:-40px; background-color:#6A6A6A;}


.flexslider {clear:both;}
.flexslider .slides li {    position:relative; height:0; padding-bottom:35%; background-color:rgba(251, 233, 217, 0.5) }

.flexslider .slides img {    display: block;    width: 100%;    margin-top: -90px;}


.flex-caption {text-align:left;  position:absolute;    top:0px; left:0;right:0; bottom:0;   z-index:1; padding:8% 0 0 0; }

.flex-title { font-family: kewl-script, sans-serif;	text-align: left; color:#385755; margin-top:00px;font-size:4em; font-weight:400; line-height:100%; letter-spacing:0px;position:relative; width:100%;  z-index:1; padding:0px;-webkit-animation: slideIn2;animation: slideIn2;-webkit-animation-duration: 1s;animation-duration: 1s;}
.flex-strapline {font-family: kewl-script, sans-serif;	text-align: left;color:#b78d75; margin-top:20px;font-size:4em; font-weight:400; line-height:100%; letter-spacing:0px;position:relative; width:100%;  z-index:1; padding:0px;-webkit-animation: slideIn2;animation: slideIn2;-webkit-animation-duration: 1s;animation-duration: 1s;}
.flex-btn { border:1px solid #ddbea9; padding:15px 20px; margin-top:10px; display:inline-block; transition:0.4s; font-size:1.6em; text-decoration:none; color: #385755; cursor: pointer; -webkit-animation: slideIn2;animation: slideIn2;-webkit-animation-duration: 1s;animation-duration: 1s;}
.flex-btn:hover { color: #385755;   border:1px solid #385755; }


@-webkit-keyframes slideIn {    0% { top: -50px; opacity: 0;		}    100% { top: 0; opacity: 1;    }}
@keyframes slideIn {		    0% { top: -50px; opacity: 0; 		}    100% { top: 0; opacity: 1; 	}}
@-webkit-keyframes slideIn2 {   0% { top: 50px; opacity: 0;     	}	 100% { top: 0; opacity: 1;    }}
@keyframes slideIn2 {		    0% { top: 50px; opacity: 0; 		}    100% {top: 0; opacity: 1; 	}}
/*FLEX CAROUSEL */

.box {float:left; width:31%; margin-right:3.5%; margin-bottom:3%; height:auto; -webkit-box-sizing: border-box; 	-moz-box-sizing: border-box; 	box-sizing: border-box; 	 }
.box:nth-of-type(3n) {margin-right:0%;}



.box img{width:90%; margin:0 5%}
.box.indent {margin-left:18%}
.box.thumb {position: relative; padding-bottom:31%; background-size:cover}
.box.thumb:hover {position: relative; padding-bottom:31%; background-size:cover}
.box.thumb:after {content:''; position: absolute; background:rgba(0,0,0,0.1); top:0; right:0; bottom:0px; left:0px; transition: 0.3s}
.box.thumb:hover:after {content:''; position: absolute; background:rgba(0,0,0,0.5); top:0; right:0; bottom:0px; left:0px;}
.box.thumb a {position:absolute; z-index:999; color:#fff; top:0; bottom:0px; left:0; right:0;
    font-size: 120px; opacity: 0.5; text-align: center; text-decoration: none; }
.box.thumb a:hover {text-decoration: none}
.box.thumb a span {position:absolute;opacity: 0.0; transition: 0.3s; text-decoration: none; color:#ffffff; left:0; right:0; top:30%}
.box.thumb:hover a span {opacity: 1}


.qtr {float:left; width:23.5%; margin-right:2%; margin-bottom:3%; height:auto; -webkit-box-sizing: border-box; 	-moz-box-sizing: border-box; 	box-sizing: border-box; 	 }
.qtr:nth-of-type(4n) {margin-right:0%;}
.qtr img {width:70%; margin: 0 15%;}
.qtr p,
.hgp p,
.cat p { text-align: center}


.subboxes {float:left; width:100%; background:#fff; border-radius:10px; padding:2% 2% 2%; margin:2% 0 1%; box-sizing: border-box; box-shadow: rgba(99, 99, 99, 0.5) 0px 2px 8px 0px; }
.subboxes .sbi {width:130px; height:auto; float:left; margin-right:2%; border-radius:10px; border:2px solid #ffffff; box-sizing: border-box;}


#contactfooter {clear:both; width:100%; margin-top:0%; padding:3% 0; background:#b6b8a3; text-align:center }
#contactfooter h3{color:#385755; font-size:3em;text-align:center}
#contactfooter p{color:#3c3c3b; text-align:center}
#contactfooter a{color:#3c3c3b !important;}



#contactfooter a {text-decoration:none; transition: 0.5s }
#contactfooter a:hover{text-decoration:underline; }



.subboxes {text-decoration: none !important}


.maintextbox {clear:left;float:left; width:66%; margin:0% 0 0;height:auto;color:#333; text-align:left; background-color:#fff; padding:0 }
.maintextbox h2, .mainholder h2 {text-align:left;  }
.maintextbox p, .mainholder p{color:#333;  }
.maintextbox a, .mainholder a { text-decoration:none; color: #385755; font-weight:400;}
.maintextbox a:hover, .mainholder a:hover {/*text-decoration:underline;*/}
.mainholder {clear:left;float:left; width:100%; margin:50px 0 50px;height:auto;color:#333; text-align:left;  padding:0 0}
/*SECOND LEVEL SETUP*/

.sidebar {float:right; width:32%; margin:0% 0 0 0 ; }
.sidebar .box1, .sidebar .box2 {float:left; width:100%; margin:0 0% 10% 0%; height:auto; background-color: #fff; padding: 0 0 5% 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0;}
.sidebar img { width:100%}
.sidebar h2 {width:100%; margin:0 0 1% 0}
.sidebar .box1 .btn ,.sidebar .box2 .btn,
.sidebar .box1 p, .sidebar .box2 p { color: #333; padding:0 10%}
.mainholder h1  {text-align: left}
.mainholder ul ,.half ul  {padding:1% 0%}
.mainholder ul li, .half ul li  {list-style-type: none;
    background: 0 0;
    padding-left: 0;
    line-height: 1.3em;
    margin: 0 0 8px;
    font-size: 1.21em;
	 font-weight: 400;
	letter-spacing:-0.5px; 
   }



.mainholder ul li:before, .half ul li:before{
    content: "\02714";
    color: #385755;
    font-weight: 400;
    margin-right: 2%;
}

ul.ticks2 {width:100%; float:left}
ul.ticks2 li{color:#444444;text-align:left;padding-left:0px;font-weight:600;font-size:1.2em;margin:5px 0px 0px 0px;line-height:1.3em;letter-spacing:-0px;list-style-position:outside;margin-left:0em;}
ul.ticks2 li:before{content:"\2714\0020";color:#385755;font-weight:400;margin-left:0em;margin-right:0.5em;}
ul.ticks2.full {width:100%; float:left}

ul.ticks {width:50%; float:left}
ul.ticks li{color:#444444;text-align:center;padding-left:0px;font-weight:600;font-size:1.2em;margin:5px 0px 0px 0px;line-height:1.3em;letter-spacing:-0px;list-style-position:outside;margin-left:0em;}
ul.ticks li:before{content:"\2714\0020";color:#385755;font-weight:400;margin-left:-1.5em;margin-right:0.5em;}
ul.ticks.full {width:100%; float:left}

#cform fieldset {float:left; margin:2% 0% 2%; padding:0; border:0px; text-align: center}
#cform input {float:left; color:#333; background-color:#ffffff; width:100%; margin:0 0 8% 0%;border:0px; padding: 5% 5%; font-size:1.2em; box-sizing: border-box; border-radius: 10px; }
#cform select {float:left; color:#333; background-color:#ffffff; width:100%; margin:0 0 8% 0%;border:0px; padding: 5% 5%; font-size:1.2em; box-sizing: border-box; border-radius: 10px;   }
#cform textarea {position: absolute; left:52.5%; width:47.5%;  right:0%;top:0px; bottom:0px; float:left; color:#333; background-color:#ffffff;  margin:0 0 0px 0;border:0px;  padding:5%; font-size:1.2em;box-sizing: border-box; border-radius: 10px;  }
#cform button {position: absolute; bottom:-15px; right:15px; display: inline-block; text-transform: uppercase; white-space: nowrap;  background-color: #3AAA35; padding: 8px 18px;  color: #ffffff !important;  text-align: center; text-decoration: none; font-size: 1.4em; font-weight: 700;  border:0px;transition: 0.5s; ; border-radius: 10px;  }
#cform fieldset label {float:left;width:100%; margin:0px 0 3px;  font-size:1.4em; color:#385755;font-weight:700; }
#cform .box {margin-bottom:0%; 	 }

#cform fieldset input.error {    background: #ddd;    color: #ffffff;    font-style: italic;}

#formsent {
    display: none;
    letter-spacing: -1px;
    width: 100%;
    border: 0px;
    color: #000000;
    line-height: 1em;
    transition: 0.5s;
    font-size: 1.7em;
    text-align: center;
    margin: 20px 0;
    padding-top: 10px;
}

#c2form fieldset {margin:2% 0% 2%; padding:0; border:0px; width:100%; position:relative;}
#c2form input {float:left; color:#333; background-color:#eee; width:100%; margin:0 0 9px 0%;border:0px; padding: 1%;box-sizing:border-box; font-family: 'Source Sans Pro', sans-serif;font-size:1.2em;  }
#c2form select {float:left; color:#333; background-color:#eee; width:100%; margin:0 0 9px 0%;border:0px; padding: 1%; box-sizing:border-box;font-family: 'Source Sans Pro', sans-serif;font-size:1.2em;  }
#c2form textarea {float:left; color:#333; background-color:#eee; width:100%;height:180px; margin:0 0 9px 0;border:0px; box-sizing:border-box; padding:1%; font-family: 'Source Sans Pro', sans-serif;font-size:1.2em; }
#c2form .btn {text-align:center;  font-size:1.3em; background-color:#385755;color:#fff; display:block; width:30%; margin:1% auto 0% ; border:0px; padding: 1% ; font-family: 'Source Sans Pro', sans-serif;  }
#c2form fieldset label {float:left;width:100%; margin:0px 0 3px;  font-size:1.3em; color:#666;font-weight:600; }
#c2form .showf {display:none;}


#map {float:left; width: 98%; height: 320px; margin-top:5%;}

.halfcol {background: linear-gradient(to right, blue 50%, red 50%); }

#enqForm {    background: #eeeeee;
    padding: 3% 0%;
    box-sizing: border-box;}




/* NEWS PAGE */


ul.blog {padding:10px 0% 0}

.blogmain {float:left;width:74%; }
.blogcats {float:right;width:24%; }
.blogmain a, .blogcats a {/*color:#000000; */}

.portal {width:100%; background:#385755; padding:10%; box-sizing:border-box; margin-bottom:10%; border-radius:8px; text-align: center }
.portal h2 { font-size: 1.6em;    margin: 0% 0 2%;    color: #ffffff; text-align: left}
.portal p,
.portal li{ text-align: left; color: #ffffff;}

.portal a.btn{overflow: hidden; border:3px solid #385755; text-decoration:none!important; display: inline-block; font-size:1.5em; line-height: 1em; letter-spacing: -1px;font-weight: 600;  height:auto; padding: 8px 18px;    background: transparent;     color: #000000;    margin: 4% auto 0%;    border-radius: 5px; 	position: relative; width:auto;  transition: 0.3s	}
.portal a.btn:hover{ border:3px solid #385755; background:#385755; color:#ffffff !important; text-decoration: none!important; box-sizing: border-box;}
.portal a.btn:after{ content:none; }
.portal a.btn:hover:after{ content:none; width: 0%;}

.portal fieldset{margin:0% 0% 0%;padding:0;border:0px;width:100%;position:relative;}
.portal input{float:left;color:#000000;background-color:#ffffff;width:100%;margin:10px 0 18px 0%;border:0px solid #000000;padding:8px;box-sizing:border-box;font-weight:100; font-size:1.2em;border-radius:5px;}
.portal fieldset .btn{background: #385755; border:3px solid #385755;  display: inline-block; text-decoration: none; font-size:1.5em; letter-spacing: -1px;  padding: 6px 15px;      color: #ffffff !important;     border-radius: 5px; 	 width:auto;  transition: 0.75s	}
.portal fieldset .btn:hover{ border:3px solid #385755; background:#ffffff; color:#385755 !important; text-decoration: none; box-sizing: border-box;}



.listing {clear:both; float:left; width:100%; margin:0% 0% 5% 0%; height:auto; }
.listing div {float:left; width:72.5%; margin:0% 0 0%; height:auto; }
.listing img {float:left;  width:25%; border: 0; margin:0% 2.5% 0% 0%;}
.listing h2  {float:right; color:#385755 ; width:100%; margin:0 0 3% 0%; text-align:left;font-size:1.9em; line-height: 1em;}
.listing p{ float:right;width:100%; margin:0% 0 3% 0%; text-align:left;  }
.listing p.date{float:right;width:100%; margin:-1% 0 2% 0%; text-align:left; color:#aaa}
.listing a.button{ margin-left:0%;}

.blogbox{background:#ffffff;border:0px;box-sizing:border-box;border-radius:10px;padding:0px; margin-top:3% !important; margin-bottom:0% !important;box-shadow: rgb(99 99 99 / 50%) 0px 2px 8px 0px; }
.blogbox .padder{width:100%;float:left;padding:10%; box-sizing:border-box;}
.blogbox .bimage{float:left; width:100%; height:0; padding-bottom:100%; background-color: #ffffff; background-position:  center center; background-repeat:  no-repeat ; background-size:contain; border-radius: 10px;}
.blogbox .textbox{padding:10%;}
.blogbox .textbox h2{margin:0px 0 15px;float:left;width:100%;height:44px; letter-spacing: 0px;/*height:50px;*/ text-align:left;font-size:1.4em;/*font-size:1.5em;*/line-height:1em;overflow:hidden;}
.blogbox .textbox h2 a{ text-decoration: none; font-weight:700 !important;}
.blogbox .textbox p{clear:both;text-align:left !important;height:180px;overflow:hidden;}
.blogbox .textbox a.btn{float:right; margin:10px 0px 15px 0;     font-size: 1.2em;   padding: 2px 10px;}



/* NEWS PAGE */



/* CONTACT PAGE */

.boxt12 {float:left; width:65.82%; margin-right:0%; }
/*.boxt2{float:right; width:30%; margin-top:0px; margin-right:0%;  margin-bottom:4%;height:auto; text-align:center}*/
.boxt1 {float:left; width:31.66%;  margin:0px 2.5% 2.5% 0; height:auto; text-align:center;  }
.boxt2 {float:right; width:31.66%;  margin:0px 0 2.5% 0; height:auto; text-align:center;  }
.boxt1:nth-of-type(3n) { margin:0px 0% 2.5% 0; }


.blogmain a,
.blogcats a,
#breadcrumbs a,
#contactinfo a,
#contact a
{ font-weight:400; color:#385755; text-decoration: none; transition: 0.5s; display: inline-block; 
}
.blogmain a:after, 
.blogcats a:after,  
#breadcrumbs a:after, 
#contactinfo a:after, 
#contact a:after
{ content: ''; width: 0px; height: 2px; display: block; background: #385755; transition: 0.3s;
}
.blogmain a:hover:after, 
.blogcats a:hover:after,  
#breadcrumbs a:hover:after, 
#contactinfo a:hover:after, 
#contact a:hover:after
{ width: 100%;
}

a.bimage:after {height:0px}
a.bimage:hover:after {width:0}

#contact {text-align:left !important; padding-bottom:30px;}
#contact h2 {font-size:2.0em; color:#385755; text-align:left; margin-top:10px;}
#contact h3 { line-height:1.1em; margin-bottom:10px; color:#385755; text-align:left; height:30px; text-indent:0px}
#contact h3.address { background: url(images/address-icon.png) no-repeat left top; background-size:contain;}
#contact h3.telephone { background: url(images/phone-icon2.png) no-repeat left top; background-size:contain;}
#contact h3.email { background: url(images/email-icon2.png) no-repeat left top; background-size:contain;}
#contact p {clear:both;text-align:left; font-size:1.2em; font-weight:400; line-height:1.2em; margin-bottom:20px; }
#contact img.icon { float:left; width:30px; margin-right:20px}

#map {height:400px; width:100%;margin:0px 0 0px 0;border:0}

#hpform fieldset {margin:2% 0% 0% 0; padding:0; border:0px; width:100%; }
#hpform fieldset input {float:left; color:#333; background-color:#eee; width:96%; margin:0 0 20px 0%;border:0px;  padding:1.5% 2%; font-size:1.2em; border-radius:5px;}
#hpform fieldset input.short {float:left; color:#333; background-color:#eee; width:60%; margin:0 0 15px 0%;border:0px;  padding:1.5% 2%;font-size:1.2em; border-radius:5px;}
#hpform fieldset textarea {float:left; color:#333; background-color:#eee; width:96%;height:160px; margin:0 0 20px 0;border:0px;  padding:1.5% 2%;font-size:1.2em; border-radius:5px;}
#hpform fieldset .btn {text-align:center; font-size:1.3em; font-weight:600; text-transform:uppercase; background-color:#385755;color:#fff;  width:auto; margin: 2% 0 0 0 ; float:right; border:0px; padding: 1.5% 2%;border-radius:5px; }
#hpform fieldset .btn2 {text-align:center;  font-size:1.0em; font-weight:600;  background-color:#385755;color:#fff;  width:30%; margin:0px 0 0 0 ; float:right; border:0px; padding: 5px 0 ;border-radius:5px; }
#hpform fieldset label {text-align:left;float:left;width:100%; margin:0px 0 5px;  font-size:1.1em; font-weight:400; color:#FFF; }
#hpform fieldset label.contact {float:left; margin:2% 0 0px; color:#333;  font-size:1.2em;font-weight:400;}
#hpform fieldset input[type=checkbox] {float:left;width:20px; margin:3px 5px 17px 0px; background-color:#F9DC0D;}
#hpform fieldset.hp input,
#hpform fieldset.hp textarea{transition:0.5s;}
#hpform fieldset.hp input.error,
#hpform fieldset.hp textarea.error { background:#bbb;  font-style:italic}

::-webkit-input-placeholder {
 color: #333;
}
:-moz-placeholder { 
 color: #333;
}
::-moz-placeholder {
 color: #333; 
} 
:-ms-input-placeholder { 
 color: #333;}

#formsent{display:none; clear:both;    margin: 0 0 40px 0;    padding: 30px 30px;    position: relative;	background: #fff;	border-color: #fff;	color:#333;	border-radius:17px;	 font-family: 'Raleway'; 	font-size:1.4em; }
#formsent:before {	content:"";	position:absolute;	top: 100%;   left: 10px;	border-width:0 0 30px 50px;	border-style:solid;	border-color:transparent #fff;    /* reduce the damage in FF3.0 */ display:block;     width:0;}
#formsent:after {	content:"";	position:absolute;	top: 100%;   left: 10px;	border-width:0 0 30px 10px;	border-style:solid;	border-color:transparent #3e2b25;    /* reduce the damage in FF3.0 */ display:block;     width:0;}


a.ct-icn {clear:both; width:auto; padding-top:0px; height:48px; display:block !important; border-radius:7px; background-size: 200% 100%;
-webkit-transition: background-position 0.8s; -moz-transition: background-position 0.8s; transition: background-position 0.8s;}  
a.ct-icn:hover {background-position: -100% 0%;}
a.ct-icn img{ float:left; width:28px; height:28px;margin:10px 10px 20px 10px;}

a.fb-contact {background-image: linear-gradient(to right, transparent 50%, #3B5999 50%);  }
a.tw-contact {background-image: linear-gradient(to right, transparent 50%, #4099FF 50%);  }
a.gp-contact {background-image: linear-gradient(to right, transparent 50%, #d34836 50%);  }
a.li-contact {background-image: linear-gradient(to right, transparent 50%, #007bb6 50%);  }
a.yt-contact {background-image: linear-gradient(to right, transparent 50%, #e52d27 50%);  }
a.pn-contact {background-image: linear-gradient(to right, transparent 50%, #c8232c 50%);  }

a.ct-icn .username{display:none; float:left; text-align:left; font-weight:600; font-size:1.5em;letter-spacing:-1px;color:#fff; margin:10px 0 0 20px;}
a.ct-icn .network{display:block; float:left; text-align:left; font-weight:600; font-size:1.5em;letter-spacing:-1px;color:#fff; margin:10px 0 0 20px;}
a.ct-icn:hover .username{ display:block !important; }
a.ct-icn:hover .network{ display:none; }
#mapdisplay {float:left; width: 100%; height: 400px;}






@media (max-width: 1200px){
	body, html {  font-size: 0.94em;}
	.flex-caption {    padding: 8% 0 0 0; }
	#hero .slide .strapline .title { padding:70px 0 0 0; }
	#hero .slide .strapline .title.titleup { padding:30px 0 0 0; }
	header .headcont { font-size:1.2em;}
}


@media (min-width: 1200px){
	.enqform { padding:5% 0% 5% 5% !important}
.holder {    max-width: 1170px!important; }
.phone-contact-h {float:right; color: #444444 !important; font-size:1.75em; height:24px;font-weight:600; line-height:0.9em; text-decoration:none !important;background: transparent  url(images/phone-icon.png) no-repeat 0px 0px ; background-size:contain;padding-left:32px; margin-bottom:15px;}
.flexslider .slides li {    position:relative; height:500px; padding-bottom:0%; background-size:cover; background-position:center center}
#hero  { height:500px ;}
#hero .slide { height:500px ;}

	
	
}

.halfcol {background: linear-gradient(to left, #6A6A6A 50%, #eeeeee 50%); }
.enqform { }
@media only screen 
and (min-width : 0px) 
and (max-width : 991px){
	
	.blogmain {float:none; width:100%; }
	.blogcats {display:none;float:none; width:100%;}
	
	.enqform {background:#6A6A6A; padding:5% !important}
	.halfcol {background: #ffffff !important }

	.box.b2 {clear:both; width:100% !important; }
	
	.half{width:100%;}
	
	.holder {width:100%;  font-size:1em; box-sizing: border-box}
	header { width:100%; margin:0px; padding:0px;}
	header .logo { float:left; width:170px; margin-right:0;height:auto;margin-left:2%;margin-top:20px;position:relative; z-index:1000; pointer-events:all;}
	header .strapline { display:none; }
	header .contacts {float:right;width:65%; margin-top:20px; margin-bottom:15px; }
	.phone-contact-h {float:right; color: #000000!important;height:auto;background: transparent  url(images/phone-icon.png) no-repeat 0px 0px; background-size:contain;padding-left:28px; margin-right:4%; margin-top:2%}
	header a.enquire-btn {float:right; clear:none; display:block;  margin:0 5% 0 0;  padding:4px 8px 5px; color:#ffffff; text-align:center; text-decoration:none; font-size:1.4em;font-weight:600;box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);}


	#contactfooter .holder { width:94%; margin:0 3% 1% 3%;  }


	.fullholder {clear:both; width:100%; background-color: #fff; padding:0% 0; margin:0 0 0% 0;height:auto; }
	.fullholder .holder {margin:0; }
	
	.navholder {width:100%; background: #ffffff; ;position:absolute;top:0; pointer-events: none;}
.navholder .holder {width:100%;  } 

	.maintextbox, .sidebar {clear:left;float:left; width:100%; margin:0% 0%;height:auto;color:#333; text-align:left; background-color:#fff; padding:0 0%}
	.sidebar {margin:0% 0% 0;}
	.sidebar h2{margin:10px 0% !important;}
	.maintextbox h2, .mainholder h2 {text-align:left;  }
	.maintextbox p, .mainholder p{color:#333;  }
	.maintextbox a, .mainholder a, .sidebar a { text-decoration:none; /*color: #000; font-weight:bold;*/}
	.maintextbox a:hover, .mainholder a:hover, .sidebar a:hover {text-decoration:underline;}
	.mainholder {clear:left;float:left; width:96%; margin:5% 2% 5%;height:auto;color:#333; text-align:left; background-color:#fff; padding:0 3%; box-sizing: border-box}
	.bbinfo {    margin-top: 10%!important;    margin-bottom: 10%!important;}
	
	
	
	.bb-btn, .bbupload {    padding: 4% 8% !important;	}


#map {float:left; width: 98%; height: 360px;}	

#contactfooter .box{width:50% !important; margin:0 25% !important;}
#contactfooter .box:nth-of-type(1){ text-align:left;}
#contactfooter .box:nth-of-type(3){ width:16%; margin-right:0%;padding:0.5% 0 0;}
#contactfooter .box:nth-of-type(4){ width:15%; margin-right:0%;padding:0.5% 0 0;}
	
		#hero { height:320px !important; margin-bottom:10px;} 
#hero .slide { height:320px !important; position:relative}
#hero .slide .strapline { height:320px !important; font-size:0.85em; }
#hero .slide .strapline .title {  padding:90px 30px 0 30px;  font-size:3.0em; }
#hero .slide .strapline .intro { padding:10px 100px; font-size:2.3em;  }


	
	.evenly {	margin:3% 0 1.5%;  display:inline-block;  justify-content:space-between; text-align: center}
.evenly img {  width:16%; margin:0 7% 7% 0; height:auto;  }

}


@media only screen 
and (min-width : 679px) 
and (max-width : 991px){
	#header {  }
	


	.box:nth-of-type(3n) {margin:0%;}
	.box {float:left; width:48%; margin:0 4% 3% 0%!important; height:auto;}
	.box:nth-of-type(2n) {margin:0 0% 3% 0% !important;}
	
	
	.noxs {display:none; }
.box.thumb {position: relative; padding-bottom:48%; background-size:cover}

	
	
.flex-strapline {font-size:6vw; }
	


}





@media only screen 
and (min-width : 0px) 
and (max-width : 678px){
	
	html, body {  overflow-x: hidden;}
body {  position: relative}
	
	#basefooter {background:#3AAA35; color:#ffffff; text-align: center; padding:3%;}
	
	body,
html {  background-image:none }
	#breadcrumbs {background-color:#eeeeee; padding:2% 5%; font-size:1.25em; }
	#breadcrumbs span{display: none; }
	
	#products {display: grid;    clear:both; justify-content:normal;}
	#products a{text-align: center; margin-bottom: 3%; padding:2%}
	
	.flex-img {display: none;}
	
	
.boxt12 {float:left; width:100%; margin-right:0%; }

.boxt1 {float:left; width:100%;  margin:0px 0% 2.5% 0; height:auto; text-align:center;  }
.boxt2 {float:right; width:100%;  margin:0px 0 0% 0; height:auto; text-align:center;  }
.boxt1:nth-of-type(3n) { margin:0px 0% 3% 0; }

.subboxes {padding:3% 5%; margin-bottom:5%}
.subboxes .sbi {width:30%; height:auto; float:right; margin-left:3%; margin-bottom:3%; border-radius:10px; border:2px solid #ffffff; box-sizing: border-box;}
.blogbox .textbox h2{font-size:1.6em !important;line-height:100% !important; height:auto;}
.blogbox .textbox p {   height:auto;}
	
.box img{width:96%; margin:0 auto}
	
	.maillink {display: none;}
	.phonelink {margin-right:60px;}
	.masthead {background:#385755; padding:30px 0 30px; }
	.masthead h1 {position:absolute; left:0px; right:30px; top:-10px; color:#ffffff; text-align: right !important; font-size:7vw !important;}
	
	ul.ticks {width:100%; float:left; padding:0 !important; margin-left: 10px;}
	ul.ticks li{font-weight:400;font-size:1.2em;}

	
	.qtr {float:left; width:100%; margin-right:0%; padding:0 5% !important; margin-bottom:3%; height:auto; -webkit-box-sizing: border-box; 	-moz-box-sizing: border-box; 	box-sizing: border-box; 	 }
	.qtr:nth-of-type(4n) {margin-right:0%;}
	.qtr img {width:50%; margin: 0 25% -10%;}
	.cat h2 br{display: none}
	.cat p br{display: none}
	.cat p br.nl{display: inline-block}
	.box.indent {    margin-left: 0%;}

	.headshow {display: none}
	.headhide {display: block; display: none; text-align: center; width:100% !important; margin:-10px 0 10px !important; font-size: 2.5em;}
	
	.navycta {text-align: center; padding:5% 10% !important; box-sizing: border-box}
	.navycta br{display: none}
	.navycta button{float:none; margin:15px 0}
	.circs{background:#ffffff !important; display: none}
	.hgp{float:left;width:100% ; margin-top:0%}

	header .headcont {width:25%; margin-right:3%; font-size: 3em !important; padding: 20px 0 !important}
	header .headcont span{display:none}
	
	.mib {float:right !important; width:auto !important; display: contents;}
	.mib img { width:14% !important ; margin:18px 0px 0 30px!important;}
	
	#contactinfo {padding:5%; box-sizing: border-box; text-align: center;  background :#C0BFBF !important}
	#contactinfo h2{ text-align: center;}
	#contactinfo p{ text-align: center;}
	#contactinfo .hide{display: none}
	.continfo {text-align: center !important;}
	.continfo p{text-align: center !important; margin:0px}
	.continfo i {float:none !important;width:50px !important; height:auto !important;}
	
	#contactfooter .box:nth-of-type(2) span{display:none;}


	#cform {width:100% !important;}
	
	#cform button { right: 0; font-size:1em;}
	
	.topbar {display: none}
	
	.imgleft{float:left; width:100%; margin:0 0 3% 0%}
.imgright{float:right; width:100%; margin:0 0% 3% 0%}

	.b2 div {font-size:1.5em !important}
	
		
	.holder {width:94%;  font-size:1em; box-sizing: border-box}


header .logo { float:left; width:100px; margin-right:0;height:auto;margin-top:15px;margin-left:5%; position:relative; z-index:1000; pointer-events:all;}
	.box {float:left; width:100%; margin:0 0% 3% 0%; height:auto; text-align: center}
	
	
	.box.thumb:nth-of-type(3n) {margin:0%;}
	.box.thumb {float:left; width:48%; margin:0 4% 3% 0%!important; padding-bottom:48%;height:auto;}
	
	.box.thumb:nth-of-type(2n) {margin:0 0% 3% 0% !important;}
	

	
	
	.half, .half2 {width:100% !important; margin:3% 0% 0% 0!important; text-align: center }
	.half h2, .half2 h2,.half p, .half2 p {text-align: center !important }
	.half img , .half2 img {display:none; }
	
	.noxs {display:none; }
	.phone-contact-h {line-height: 0;
    font-size: 0;
    width: 36px;
    height: 36px;
    padding-left: 0px;
    margin-top: 12px;
    margin-bottom: -5px;
    margin-right: 85px;
    background: url(images/phone-icon.png) no-repeat 9px 1px;
    background-size: 80%;
    color: transparent !important;	}
	header a.enquire-btn {display:none; }
	header .fullholder {margin-top:0px;}

	.flexslider .slides li {    position:relative; height:auto;  background-size:cover; background-position:center center}
	.flex-title {font-size:7vw; text-align: center}
	.flex-strapline {font-size:7vw; text-align: center}



#contactfooter {clear:both; width:100%;  padding:3% 0}
#contactfooter .box{margin-bottom:0%;padding:0.5% 0 1.75%; text-align:center;}
#contactfooter .box:nth-of-type(1){ width:100%;text-align:center;}
#contactfooter .box:nth-of-type(2){ width:100%;text-align:center;}
#contactfooter .box:nth-of-type(3){ width:100%; text-align:center;margin:0%;padding:0.5% 0 0;}


#contactfooter .icon {float:left;width:16%; margin-right:4% ;height:auto; padding-bottom:19%;   box-sizing:border-box; position:relative}
#contactfooter .icon:nth-of-type(4) {margin-right:0% ;}

#contactfooter .icon img{ position:absolute; width:32px; top:15px;right:50%; margin-right:-16px; opacity:0.7; transition:0.5s}
#contactfooter .icon img:hover{ opacity:1}

		#hero { height:240px !important; margin-bottom:10px;} 
#hero .slide { height:240px !important; position:relative}
#hero .slide .strapline { height:240px !important; font-size:0.85em; }
#hero .slide .strapline .title {  padding:50px 30px 0 30px;  font-size:2.2em;line-height:100%; letter-spacing:-1px; }
#hero .slide .strapline .intro { padding:10px 30px; font-size:1.4em;  }

	
	#enqForm {    background: #eeeeee;
    padding: 5% 5%;
    box-sizing: border-box;}

	
	
}


@media only screen 
and (min-width : 0px) 
and (max-width : 481px){

h1 {  font-size:2em;padding:2% 0}
span { color:#385755;}
h2 {  font-size:1.8em;  }
h3 {font-size:2em;}
	
p {color: #333;font-size: 1.4em !important;margin: 6px 0 16px 0;font-weight: 400;line-height: 1.2em;}

.holder {width:100%;  box-sizing: border-box}

header .contacts {width:50%; }


.flexslider .slides li {    position:relative; height:200px; padding-bottom:0%; background-size:cover; background-position:center center}
.flex-title {width:80%; margin:10% 10% 0; margin-top: 0px; font-size: 2.2em !important; letter-spacing: -1px;}
.flex-caption {padding:9% 0 0 0; text-align:center;}
.flex-btn {margin-top:0 }
.flex-strapline {width:80%; margin:3% 10%;font-size:2.1em !important;letter-spacing: -1px; }
.box .orangebtn {float:right; font-size:1.2em; margin:5px 0 10px; padding:6px 15px;}
#contactfooter .box{width:80% !important; margin:0 10% !important;}
#contactfooter .box p{text-align: center}
	
.quoteholder blockquote { width:100%;color:#575756; font-size:1.4em;font-weight:100; text-align:center;margin: 0 0;padding: 30px 30px;line-height: 1.2em;position: relative;z-index:1; box-sizing:border-box}
	
	
	
	.cat a.btn, .half a.btn, .half2 a.btn {
  
    margin-bottom: 50px;
}

}

.showf {display:none; }