:root {
    --main-colour-1: #68B728;
	--main-colour-1-rgb: 104, 183, 40;
	--main-colour-1-fore: #FFF;

	--main-colour-2: #4D4D4D;
	--main-colour-2-rgb: 77, 77, 77;	
	--main-colour-2-fore: #FFF;
	

	
	--second-colour-2: #1A1A1A;
	--second-colour-2-fore: #FFF;

	--second-colour-3: #37383d;
	--second-colour-3-fore: #EBEBEB;

	--second-colour-4: #EBEBEB;
	--second-colour-4-fore: #1A1A1A;

	


	--font-display-1: 'Squada One', 'Open sans';
	--font-menu: 'Squada One', 'Open sans';
	--font-body-1: 'Open sans', sans-serif;

	--header_back: #1A1A1A;
	--header_gap: 1vw;
	--header_logo_height: 70px;
	
	--standard-padding: 2vw;
	--standard-padding-small: 0.5vw;
	--standard-padding-half: 1vw;
	--standard-transition: all .5s;
	--standard-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);

	--section-1-colour: #0196BA;
	--section-1-colour-rgb: 1, 150, 186;
	--section-2-colour: #983D77;
	--section-2-colour-rgb: 152, 61, 119;
	--section-3-colour: #3CBF4A;
	--section-3-colour-rgb: 60, 191, 74;
	--section-4-colour: #FF6600;
	--section-4-colour-rgb: 255, 102, 0;
	--section-5-colour: #E92532;
	--section-5-colour-rgb: 233, 37, 50;
	
}
* {
	box-sizing: border-box;
}
 
header, footer, aside, nav, article, section, main {   
    display: block;   
} 

html {
	background-color: #FFF;
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-family: 'Open sans', sans-serif;
	color: #000000;
	margin: 0;
	padding: 0;
	font-size: 16px;	
}

a img {
	border: none;
}
h1 {
	font-family: var(--font-display-1);
}
table th {
	text-align: left;
}
ul.reset {
	margin: 0;
	padding: 0;
	list-style-type: none;
}


@keyframes FadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}
@keyframes FadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}

@keyframes Spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes OpenVert {
    from {max-height: 0;}
    to {max-height: 100vh;}
}
@keyframes CloseVert {
    from {max-height: 100vh;}
    to {max-height: 0;}
}
@keyframes OpenHort {
    from {max-width: 0;}
    to {max-width: 100vh;}
}
@keyframes CloseHort {
    from {max-width: 100vh;}
    to {max-width: 0;}
}
.bkgcol_m1 {
	background-color: var(--main-colour-1);
	color: var(--main-colour-1-fore);
}
.bkgcol_m1 a {
    color: var(--main-colour-1-fore);
}

.bkgcol_m2 {
	background-color: var(--main-colour-2);
	color: var(--main-colour-2-fore);
}
.bkgcol_m2 a {
    color: var(--main-colour-1-fore);
}
.bkgcol_s2 {
	background-color: var(--second-colour-2);
	color: var(--second-colour-2-fore);
}
.bkgcol_s2 a {
    color: var(--main-colour-1-fore);
}
.bkgcol_s2 a:hover {
    color: var(--main-colour-1);
}

.bkgcol_s4 {
	background-color: var(--second-colour-4);
	color: var(--second-colour-4-fore);
}

form.standard {
    margin: 0;
    padding: var(--standard-padding-half);

} 
form.standard .cols {
    display: flex;
    justify-content: stretch;
} 
form.standard .col {
    flex: 1;
    padding: var(--standard-padding-half);
    
} 
.flexrow {
    display: flex;
    flex-wrap: wrap;
}
.flexrow .col {
    flex: 1;
    margin-right: 10px;
}
.flexrow .col:last-child {
    margin-right: 0;
}

form.standard .row {
    padding: 0 var(--standard-padding-half);
    margin-bottom: var(--standard-padding-small);

}
form.standard .col .row {
    padding: 0;
}
form.standard .row label {
    display: block;
    
    margin-bottom: 5px;
}


form.standard .row input, form.standard .flexrow input{
    display: block;
    padding: 5px;
	line-height: 20px;
	height: 30px;
	width: 100%;
	transition: all 0.5s;
	border: solid 1px var(--second-colour-3);
	
    transition: var(--standard-transition);
}
form.standard .row input.checkbox, form.standard .flexrow input.checkbox{
    width: 20px;
    height: 20px;
    margin: 5px;
}
form.standard .row label.checkbox {
    line-height: 20px;
    margin: 5px;
}

form.standard .row input:focus {
    border: solid 1px var(--main-colour-1);
}
form.standard .row textarea , form.standard .flexrow textarea{
    display: block;
    padding: 5px;
	line-height: 20px;
    width: 100%;
	transition: all 0.5s;
	border: solid 1px var(--second-colour-3);
	
    transition: var(--standard-transition);
}
form.standard .output, form.standard .flexrow .output{
    height: 30px;
    padding: 0 10px;
    line-height: 28px;
    border: solid 1px #E5E5E5;
    display: block;
    background-color: #F6F6F6;
    min-width: 75px;
    margin-right: 0;
    margin-bottom: 5px;

    overflow: hidden;
    transition: all 0.5s;
    max-height: 30px;
}

form.standard .flexrow {
    display: flex;
    justify-content: stretch;
    margin-top: 22px;
}
form.standard .flexrow label {
    width: 50%;
}
form.standard .flexrow input {
    width: auto;
}

form.standard .control {
    transition: all 0.5s;
    padding: var(--standard-padding-half);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
form.standard .control input.btn {
    display: block;
    margin: 0;
    padding: var(--standard-padding-small);
    border:  none;
    background-color: rgba(var(--main-colour-1-rgb),1);
    transition: var(--standard-transition);
    border-radius: 6px;
    font-weight: 600;
    color: #FFF;
    font-size: 1.2em;
    cursor: pointer;
    min-width: 150px;
    min-height: 50px;
}
form.standard .control input.btn:hover {
    background-color: rgba(var(--main-colour-1-rgb),1);
}
form.standard input[type="number"] {
    width: 80px;
}
.further_comments {
    max-height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

form.dark input::placeholder, form.dark .row textarea::placeholder {
    color: var(--second-colour-2-fore);
}

form.dark input, form.dark textarea {
    background-color: var(--second-colour-3); 
	color: var(--second-colour-2-fore);
} 


form.light label {
    color: var(--main-colour-2-fore);
}

form.light input, form.light textarea {
    background-color: #D1D1D1; 
	color: var(--main-colour-2-fore);
} 

.res {
    display: none;
}

.nores {
    display: unset;
}
.flex_cols {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: stretch;
}

.flex_cols  .to_space {
    width: 100%;
    flex: 1;
}
.flex_cols .vbottom {
    display: flex;
    align-items: flex-end;
}
.flex_cols .vcenter {
    display: flex;
    align-items: center;
}

.flex_rows {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
}
.flex_rows .to_space {
    height: 0;
    flex: 1;
}

ul.reset {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#page {
    min-height: 500px;
}
nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;

}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
  
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
  
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
  
    /* Support for IE. */
    font-feature-settings: 'liga';
  }

#head_bar {
    background: var(--header_back);
    padding: var(--header_gap);
}
#head_bar ul {
    margin: 0;
    padding: 0;
    list-style: none;
    
}
#head_bar ul li a {
    display: block;
    color: #FFF;
    text-decoration: none;
}

#head_logo h1 {
    margin: 0;
    padding: 0;
    padding-right: var(--header_gap);
    margin-right: var(--header_gap);
    border-right: solid 1px var(--main-colour-1);
}
#head_logo h1 a {
    display: block;
}
#head_logo h1 img {
    height: var(--header_logo_height);
    display: block;
}
#head_tag_line h2 {
    color: #FFF;
    margin: 0;
    padding: 0;
}
#head_tel {
    color: var(--main-colour-1);
    text-align: right;
    padding-right: var(--header_gap);
    margin-right: var(--header_gap);
    border-right: solid 1px var(--main-colour-1);
}
#head_tel p {
    display: block;
    margin: 0;
    line-height: 1em;

}
#head_tel span {
    line-height: 1.2em;
    font-size: 2em;
    display: block;

}

#head_menu ul, #head_menu_social  ul{
    display: flex;
}

#head_nav {
    font-family: var(--font-menu);
}
#head_menu {
    margin-bottom: var(--standard-padding-small);
}
#head_menu ul li a {
    font-size: 1.6em;
    padding: 0 10px;
    border-left: solid 2px #FFF;
    font-weight: 400;

}
#head_menu ul li:first-child a{
    padding-left: 0;
    border-left: none;
}
#head_menu_social ul li {
    margin-right: 10px;
}
#head_menu_social ul li a{
    padding: 5px;
    width: 40px;
    height: 40px;
    background-color: var(--main-colour-2);
    border-radius: 3px;
    transition: var(--standard-transition);

}
#head_menu_social ul li a:hover {
    background-color: var(--main-colour-1);
}
#head_menu_social li a img{
    height: 30px;
    
}

#menu_bar {
    background-color: var(--main-colour-2);
    padding: 0 var(--header_gap);
    display: flex;
    align-items: center;
}
#main_menu ul, .main_menu ul{
    font-family: var(--font-menu);
    display: flex;
    flex-direction: row;

}
#main_menu li a, .main_menu li a {
    text-decoration: none;
    color: var(--main-colour-2-fore);
    font-size: 1.4em;
    padding: 10px;
    line-height:30px;
    transition: var(--standard-transition);
    display: block;
    
}
#main_menu li a:hover, .main_menu li a:hover {
    background-color: var(--second-colour-2);
}
#main_menu li.active>a, .main_menu li.active>a{
    border-bottom: solid 5px var(--main-colour-1);
    padding-bottom: 6px;
}

#menu_bar_button {
    background-color: var(--main-colour-2);
    width: 60px;
    height: 60px;
    border-radius: 6px;
    display: none;
}
#menu_bar_button svg .fil0 {
    fill: #FFF;

}

#header.fixed #menu_bar {
    position: fixed;
    top: 0;
    width: 100%;
    padding-right: 150px;
    z-index: 99999;

}
#menu_bar_fixed_logo {
    transition: var(--standard-transition);
   
    max-width: 0;
    background-color:  rgba(0,0,0,0.5);
    border-radius: 2px;
    overflow: hidden;
    padding: 5px 0;
    margin-right: 0;
}
#menu_bar_fixed_logo  a {
    display:  block;
}
#menu_bar_fixed_logo:hover {
    background-color: #000;
}
.fixed #menu_bar_fixed_logo {
    min-width: 120px;
    max-width: 120px;
    padding: 5px 10px;
    margin-right: var(--standard-padding);
}
#fixed_head_pad {
    padding: 0;
}
.fixed #fixed_head_pad {
    padding-top: 50px;
}
.fixed #head_menu_social {
    position: fixed;
    top: 0;
    z-index: 999;
    background-color: black;
    padding: 5px 10px;
    right: 0;
    height: 50px;
}
.fixed  #head_menu_social ul li {
    margin: 5px;

}
.fixed #head_menu_social ul li a {
    height: 30px;
    width: 30px;
    padding: 5px;
}
.fixed #head_menu_social ul li a img {
    height: 20px;
    width: 20px;
}
.fixed #head_tel {
    position: fixed;
    top: 50px;
    right: 0;
    border-right: 0;
    padding: 5px 20px;
    font-size: 1.6em;
    margin: 0;
    background-color: var(--main-colour-1);
    color: #FFF;
    border-bottom-left-radius: 20px;
}
.fixed #head_tel span {
    display: inline;
    font-size: 1em;

}

#main_menu_list>li>ul, .main_menu_list>li>ul {
    position: absolute;
    display: flex;
    flex-direction: column;
    background-color: var(--second-colour-2);
    max-height: 0;
    transition: var(--standard-transition);
    overflow: hidden;
    margin: 0;
    padding: 0 var(--standard-padding-small);
    list-style-type: none;
}
#main_menu_list>li:hover>ul, .main_menu_list>li:hover>ul {
    max-height: 100vh;
    padding: var(--standard-padding-small);
}
#main_menu_list>li>ul li a, .main_menu_list>li>ul li a{
    transition: var(--standard-transition);
}
#main_menu_list>li>ul li a:hover, .main_menu_list>li>ul li a:hover{
    background-color: var(--main-colour-1);
}
#page_image {
    height: 60vh;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    
}
article section, .page_intro {
    padding: var(--standard-padding);
}
.nopad {
    padding: 0;
}
.padright {
    padding-right: var(--standard-padding);
}
article {
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}
article h1 {
    text-align: center;
    font-size: 2em;
    
}

.page_intro {
    text-align: center;
    background-color: #E5E5E5;
    
}
.page_intro.left {
    text-align: left;
}
.testimonial {
}
.testimonial blockquote{
    padding: var(--standard-padding-half);
    border-top: solid 1px var( --main-colour-1);
    border-bottom: solid 1px var( --main-colour-1);
    font-weight: 600;
    margin: var(--standard-padding-half) 0;
}
.testimonial cite{
    text-align: right;
    display: block;
}
.testimonial_list {
}
.testimonial_list .testimonial {
    padding: var(--standard-padding-half);
}

.testimonial_list .testimonial:nth-child(odd) {
    background-color: RGBA(0,0,0,0.1);
    
}
.testimonial_list .testimonial blockquote {
    border: none;
    margin: 0;
}
.icon_service_list  {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    transition: var(--standard-transition);
    max-width: 100%;
    max-height: 100vh;
    margin: 0 auto;

}
.icon_service_list  .item {
    max-width: 350px;
    margin: var(--standard-padding-half);
   
    background-color: #FFF;
    box-shadow: var(--standard-shadow);
    border-radius: 3px;
    transition: var(--standard-transition);
    display: flex;
}


.icon_service_list  .item a{
    text-decoration: none;
    color: #000;
    display: block;
    padding:  var(--standard-padding-half);
    transition: var(--standard-transition);
    
}

.icon_service_list  .item a div.icon{
    background-color: #3CBF4A;
    display: block;
    width: 60px;
    height: 60px;
    margin: 0 auto;
    padding: 10px;
    border-radius: 3px;
    
}
.icon_service_list  .item a div.icon img{
    
}
.icon_service_list  .item a h2 {

}
.icon_service_list  .item a p{
    text-align: left;
}
.icon_h_list {
    display: flex;
    justify-content: center;
    align-content: stretch;
    align-items: stretch;
    flex-wrap: wrap;
    transition: var(--standard-transition);
    max-width: 100%;
    margin: 0 auto;
}
.icon_h_list  .item {
    width: 250px;
    min-height: 150px;
    margin: var(--standard-padding-half);
    padding: var(--standard-padding-small);
    transition: var(--standard-transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;

    
}
.icon_h_list .icon.round {
    border: solid 3px #FFF;
    border-radius: 60px;
    width: 76px;
    height: 76px;
    overflow: hidden;
    padding: 10px;

}
.icon_h_list  .item .icon .material-icons {
    font-size: 50px;
    overflow: hidden;
    
    
}
.icon_h_list.light  .item .material-icons{
    color: #CCC;
}
.icon_h_list  .item h2 {
    font-size: 1em;
    font-weight: 600;
    text-align: center;
}



.page_intro .logo_list {
    padding: var(--standard-padding-half) 0;
    margin: var(--standard-padding) auto;
    border-top: dotted 1px RGBA(0,0,0,0.2);
    border-bottom: dotted 1px RGBA(0,0,0,0.2);

}
.page_intro .logo_list li {
    box-shadow: none;
    padding: var(--standard-padding-half);
    border-right: dotted 1px RGBA(0,0,0,0.2);
    margin: 0;
}
.logo_list ul.ticker {
    justify-content: flex-start;
}

.section_head_banner {
    height: 20vh;
    display: flex;
    align-items: flex-end;
    min-height: 50px;
}
.section_head_banner h1 {
    padding: var(--standard-padding-half);
    display: block;
    font-weight: 400;
    width: 30%;
    text-align: left;
}
.info_list {
    display: flex;
    justify-content: stretch;
    text-align: left;
    padding: var(--standard-padding-half) 0;
    margin: var(--standard-padding) 0;
    border-top: dotted 1px RGBA(0,0,0,0.2);
    border-bottom: dotted 1px RGBA(0,0,0,0.2);
}

.info_list .item{
    padding:  0 var(--standard-padding-half);
    border-right: dotted 1px RGBA(0,0,0,0.2);
}

.info_list .item:last-child {
    border-right: none;
}
.info_list .item h2 {
    margin: 0;
    margin-bottom: 10px;
    color: var(--main-colour-2);
    text-align: center;
    font-weight: 400;
} 

.detail_list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.detail_list .item {
    padding: var(--standard-padding-half);
    margin: var(--standard-padding-small);
    flex: 1;
    background-color: #FFF;
    text-align: left;
}
.detail_list .item h2 {
    font-size: 1em;
    margin: 0;
    padding: 0;
    padding-bottom: 10px;
    text-align: center;
    height: 3em;
}

.info_list .item p {
    margin: 0;
    text-align: justify;
}
.basic_page {
    padding:  var(--standard-padding);
}
.basic_page_centered  {
    padding:  var(--standard-padding);
    text-align: center;
}
.basic_page_maxwidth {
    padding:  var(--standard-padding);
    max-width: 75%;
    margin: 0 auto;
    text-align: left;
}
.basic_page_small_centered {
    padding:  var(--standard-padding);
    max-width: 50%;
    margin: 0 auto;
}
.basic_page .intro {
    max-width: 75%;
    text-align: left;
}
.basic_page .intro.centered {
    margin:  0 auto;
    text-align: center;
}
.overimage {
    background-size: cover;
    padding:  var(--standard-padding);
}
.overimage .contents {
    background-color: RGBA(255,255,255,0.9);
    margin:  var(--standard-padding);
}
.overimage .contents h1 {
    text-align: left;
}
.overimage .contents .main {
    width: 50%;
    padding:  var(--standard-padding);
}
.overimage.centered {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}
.overimage.centered .contents{
    padding:  var(--standard-padding);
    width: 60%;
}

.overimage.clear .contents {
    margin: 0;
    background-color: transparent;
}

.quick_quote {
    width: 50%;
    padding:  var(--standard-padding);
}


.image_block  {
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    align-content: stretch;
    background-color: #E5E5E5;

}
.clear .image_block {
    background-color: transparent;

}
.image_block.left {
    
}

.image_block  .image{
    width: 50%;
    background-size: cover;
}
.image_block  .contents {
    width: 100%;
    margin-left: -50%;

}
.image_block  .contents .banner{
    margin: 20vh 0;
    margin-left: 35%;

    padding:  var(--standard-padding);
    box-shadow: var(--standard-shadow);
    text-align: left;
    max-width: 60%;
 
    font-size: 1.2em;
    text-align: left;
}
.image_block.left .contents .banner {

}
.image_block  .contents .banner h1 {
    text-align: left;
}
.image_block.right  {
    flex-direction: row-reverse;
}
.image_block.right .contents{
    margin-left: 0;
    margin-right: -50%;
}
.image_block.right  .contents .banner  {
    margin-left: 5%;

}
.image_block  .image{
    width: 50%;
    background-size: cover;
}
.floating_block {
    background-color: #FFF;
    margin: 50px;
    margin-left: 100px;
    margin-right: -100px;
    margin-bottom: -100px;
    box-shadow: -10px 10px 0px 0px #376B0D;
    color: #335239;
    padding: 20px;
}



.scroll_list_h .list_wrapper {
    max-width: 100%;
    overflow: hidden;
    overflow-x: scroll;
    transition: var(--standard-transition);
}
.scroll_list_h .list_contents {
    display: flex;
    transition: var(--standard-transition);
}
.scroll_list_h .list_contents>div {

}
.scroll_list_main {
    display: flex;
}
.scroll_list_main .list_btn{
    display: flex;
    align-content: center;
    align-items: center;
    cursor: pointer;
    transition: var(--standard-transition);

}
.scroll_list_main .list_btn span {
    display: flex;
    font-size: 3em;
    background-color: RGBA(255,255,255,0.3);
    transition: var(--standard-transition);
    cursor: pointer;
}
.scroll_list_main .list_btn:hover span  {
    background-color: RGBA(255,255,255,0.9);
    color: var(--main-colour-1);
}
.scroll_list_dots {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
}
.scroll_list_dots li {
    background-color: RGBA(0,0,0,0.2);
    width: 10px;
    height: 10px;
    overflow:hidden;
    border-radius: 10px;
    transition: var(--standard-transition);
    margin: 0 5px;
}
.scroll_list_dots li.active {
    background-color: RGBA(0,0,0,0.9);
   
}

.main_feature_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}


.main_feature_list .item {
    display: flex;
    padding:  var(--standard-padding-small);
    box-shadow: var(--standard-shadow);
    background-color: #FFF;
    margin: var(--standard-padding-small);
    width: 400px;

}
.main_feature_list .item .icon {
    width: 40px;
    height: 40px;
    margin-right: var(--standard-padding-small);
}

.main_feature_list .item .icon .material-icons {
    font-size: 40px;
}

.main_feature_list .item .icon .material-icons.ontop  {
    font-size: 20px;
    margin-left: -10px;
}
.main_feature_list .item .detail {
    display: flex;
    align-items: flex-end;
}
.main_feature_list .item .detail p{
    margin: 0;
    padding: 0;
}
.main_feature_list .item .detail span.highlight {
    display: block;
    font-size: 1.6em;
    white-space: nowrap;
}
.txt_feature_list.item_whtback li{
    background-color: #FFF;
    color: #000;
}
.txt_feature_list ul{
    margin: 0;
    padding: 0;
    list-style: none;
    justify-content: stretch;
    flex-wrap: wrap;
}


.txt_feature_list ul li {
    display: block;
    margin: var(--standard-padding-small);
    padding:  5px;    
    border-left: solid 5px #E5E5E5;
    transition: var(--standard-transition);
    
}
.txt_feature_list ul li:hover {
    border-left-width: 80px;
}
.txt_feature_list.split_list  ul {
    display: flex;
    justify-content: stretch;
    
}

.txt_feature_list.split_list  ul li {
    width: calc(50% - var(--standard-padding-small) - var(--standard-padding-small));
}

.txt_feature_list.small ul {
    display: flex;
    justify-content: stretch;
}

.txt_feature_list.small ul li {
    margin: var(--standard-padding-small);
}

.txt_feature_list.wht li {
    background-color: RGBA(255,255,255,0.7);
    color: #000;
    

}
.feature_box .txt_feature_list{
    padding: var(--standard-padding-small);
}

.main_feature_list.tofit {
    justify-content: stretch;
}
.main_feature_list.tofit .item {
    flex: 1;
}
.main_feature_list.centered .item{
    flex-direction: column;
    align-content: center;
    align-items: center;
    width: auto;
    
    
}
.main_feature_list.centered .item .material-icons {
}
 
.feature_box {
    margin: var(--standard-padding-small);
    background-color: RGBA(0,0,0,0.1);
}
.feature_box h2{
    font-size: 1.2em;
    padding: var(--standard-padding-small);
    margin: 0;
    text-align: center;
}
.feature_box .main_feature_list  {
    justify-content: stretch;
}
.feature_box .main_feature_list .item {
    flex: 1;
    width: auto;
    color: #000;

}

.main_feature_list ul{
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8em;
    display: flex;
    flex-wrap: wrap;

}
.main_feature_list ul li {
    margin:  var(--standard-padding-small);
    justify-content: stretch;
}
.main_feature_list ul li .icon {
    display: flex;
    justify-content: center;

}
.main_feature_list ul li span.material-icons {
    margin:  0 auto;
    display: block;
    font-size: 4em;
    width: 30px;
}
.main_feature_list ul li span.material-icons.ontop {
    font-size: 20px;
    margin-left: -10px;
}
.main_feature_list ul li span.highligh {
    display: block;
    font-size: 2.6em;
}

.basic_page .main_feature_list {
    margin: 0 auto;
}

.other_feature_list {

}
.other_feature_list ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.other_feature_list ul li{
    padding: 5px;

}
.other_feature_list ul li:nth-child(even){
    background-color: RGBA(255,255,255,0.1);
}
.cta_basic_text {
    margin:  var(--standard-padding) auto;
    padding:  var(--standard-padding-small);
    text-align: center;
    font-size: 1.2em;
    font-weight: 600;
    max-width: 75%;
    margin-bottom: calc(-2 * var(--standard-padding));
    
}

.split {
    display: flex;
    justify-content: center;
}
.split.left {
    flex-direction: row-reverse;
}
.split h1 {
    margin-top: 0;
}

.split_main {
    padding:  var(--standard-padding);
}
.split_section {
    padding:  var(--standard-padding);
    min-width: 30%;
}
.split_section .other_feature_list {
    margin:  var(--standard-padding) calc(-1 * var(--standard-padding));
}
.split_section .other_feature_list li {
    padding: 5px  var(--standard-padding);
}
.split.with_image {

}
.split.with_image .split_section {
    display: flex;
    justify-content: stretch;
    align-content: stretch;
    padding: 0;
}
.split .split_section .image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.split.half>div  {
    width: 50%;

}
.divider_cta {
    max-width: 75%;
    margin:  var(--standard-padding) auto;
    padding:  var(--standard-padding-small);
    font-size: 1.4em;
    text-align: center;
    font-weight: 600;
}
.overimage.clear .divider_cta  {
    margin-bottom: 0;
}
.overimage.clear .split{
    background-color: RGBA(255,255,255,0.9);
    margin:  var(--standard-padding);
    padding:  0;
}
.overimage.clear .page_content {
    padding: var(--standard-padding);
    margin:  0 var(--standard-padding);
}
.overimage.clear .whtback {
    background-color: RGBA(255,255,255,0.9);
    
    
}

.overimage.with_divider {
    margin-bottom: 0;
    padding-bottom: 0;
}
.overimage.with_divider + .overimage .contents{
    margin-top: 0;
    padding-top: 0;
}

.insection_gallery ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    justify-content: center;
}
.insection_gallery ul li {
    background-color: #FFF;

    margin: var(--standard-padding-half);
    padding: var(--standard-padding-half);
    box-shadow: var(--standard-shadow);
    border-radius: 3px;
    transition: var(--standard-transition);
    display: flex;
    justify-content: center;
    align-items: center;
}
.insection_gallery ul li img {
    max-width: 200px;
}

.logo_list {
    max-width: 1400px;
    margin: 0 auto;
    overflow: hidden;
}

.logo_list ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    justify-content: center;
}
.logo_list ul li {
    margin: var(--standard-padding-small);
   
    box-shadow: var(--standard-shadow);
}
.logo_list.back_wht ul li {
    background-color: #FFF;
    padding: var(--standard-padding-half);
}
.logo_list ul li .image {
    display: block;
    width: 250px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.logo_list ul li img{
    flex: 0;
    max-width: 250px;
    max-height: 50px;
    display: block;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    transition: var(--standard-transition);
    
}
.logo_list ul li label {
    display: block;
    text-align: center;
    padding: var(--standard-padding-half);
}

.logo_list ul li img:hover {
    -webkit-filter: grayscale(0); /* Safari 6.0 - 9.0 */
    filter: grayscale(0);
    
}

.auto_ticker {
    overflow: hidden;
}

.contact_map {
    
    display: flex;
    align-content: stretch;
    align-items: stretch;
    justify-content: stretch;
    padding: var(--standard-padding-half);
    background-color: #FFF;
}
.contact_map iframe{
    width: 100%;
    height: 100%;
}
 #footer {
     font-size: 1.2em;
 }

 #footer_nav {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    
 }
#footer_primary_menu {
    display: flex;
    padding: var(--standard-padding-small);
    align-items: center;
    width: 100%;
    justify-content: center;
}
.footer_primary_nav {
    display: flex;
    justify-content: center;
}
.footer_primary_nav li{
    display: flex;
    align-items: stretch;
}
.footer_primary_nav a, .footer_service_menu a {
    text-decoration: none;
}
.footer_primary_nav a:hover {
    background-color: black;
}
.footer_primary_nav a{
    padding: 5px var(--standard-padding-small);
    display: block;
    white-space: nowrap;
    background-color: rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    margin:  0 var(--standard-padding-small);
    border-radius: 3px;
}
ul#footer_social {
    display: flex;
}
ul#footer_social  li {
    margin:  0 var(--standard-padding-small);
}
ul#footer_social  li:first-child {
    margin-right: 0;
}
ul#footer_social  li a{
    display: block;
    padding: 2px;
    width: 30px;
    height: 30px;
    background-color: var(--main-colour-2);
    background-color: rgba(0,0,0,0.1);
    border-radius: 3px;
    transition: var(--standard-transition);

}
ul#footer_social  li a:hover {
    background-color: var(--main-colour-1);
}
ul#footer_social li a img{
    height: 26px;
    width: 26px;
    
}
ul.footer_service_menu {
    display: flex;
    width: 100%;
    justify-content: stretch;
 }
ul.footer_service_menu>li {
    flex: 1;
    transition: var(--standard-transition);
    margin: var(--standard-padding-small);
    padding: var(--standard-padding-small);
    border-radius: 10px;
    background-color: RGBA(0,0,0,0.2);
 }

ul.footer_service_menu>li:hover {
     background-color: black;
 }
ul.footer_service_menu>li>a {
    display: block;
    padding: 5px var(--standard-padding-small);
    padding-bottom: var(--standard-padding-small);
    font-weight: 600;
    color: var(--main-colour-1);
    line-height: 1.4em;
    height: 3em;
 }
ul.footer_service_menu>li>ul a{
    display: block;
    padding: 5px var(--standard-padding-small);
 }
 ul.footer_service_menu>li>ul a:hover {
    color:  var(--main-colour-1);
 }

#footer_contact {
    /* border-top: solid 1px rgba(255,255,255,0.5); */
    margin: 0 var(--standard-padding);
    padding: var(--standard-padding) 0 ;
}
#footer_logo a{
    display: block;
}
#footer_contact .flex_cols {
    justify-content: center;
    align-content: flex-start;
}
#footer_contact .flex_cols>div {
    padding: 0 var(--standard-padding-half);
}
#footer_contact_details p{
    margin: 0;
    padding: 0;

}
#footer_contact_details p span {
    display: inline-block;
    padding-right: 20px;
}

#footer_contact  .copyright {
    font-size: 0.8em;
    text-align: center;

}


.cta_col {
    width: 33%;
    display: flex;
    flex-direction: column;
    justify-content: stretch;

}
.cta_col>div:first-child {
    height: 0;
    overflow: hidden;
    flex: 1;
    padding-bottom: 50px;
}
.cta_col .cta_btn {
    
    
    margin-top: -50px;

}
.cta_btn {
    display: flex;
    justify-content: center;
}
.cta_btn a {
    display: block;
    padding: var(--standard-padding-small) var(--standard-padding-half);
    text-decoration: none;
    background-color: rgba(var(--main-colour-1-rgb),0.9);
    border-radius: 3px;
    box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.5);
    color: #FFF;

    text-align: center;

}

.service_icons {
    display: flex;
    justify-content: center;
}
.service_icons .item{
    background-color: #FFF;
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
    padding: 10px;
    margin: 10px;
    
}

.service_icons .item .icon {
    border-radius: 6px;
    overflow: hidden;
    
}
.service_icons .item .icon a {
    display: block;
    padding: 10px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.15) 55.1%, rgba(0,0,0,0.15) 100%);
    border-radius: 6px;
}
.service_icons .item .icon a img {
    width: 100px;
    height: 100px;
    display: block;
}

.cta_office {
    background-color: #EA3C00;
    color: #FFF;
}
.cta_office .logo {
    height: 80px;
    text-align: center;
    padding: 15px;
    
}
.cta_office .logo h2 {
    padding: 0;
    margin: 0;
}
.cta_office .logo img {
    height: 50px;
    
}
.cta_office .image {
    height: 230px;
    background-image: url('/media/uploads/office_01.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat; 

}
.cta_office p.tagline {
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 30px;
    font: 1.2em;
    border-bottom: solid 1px RGBA(255,255,255,0.2);
}
.cta_office p.intro {
    font-weight: bold;

}
.cta_office .details {
    padding: var(--standard-padding-half);
}
.cta_activevault {
    background-image: url('/media/uploads/Fotolia_41897946_M.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat; 
    padding: var(--standard-padding);
    display: flex;
    align-content: center;
    align-items: center;
    
}
.cta_activevault .details {
    background-color: rgba(255,255,255,0.9);
    padding: var(--standard-padding-half);
    text-align: center;
}
.cta_activevault .details h2 {
    color: var(--main-colour-1);
    margin: 0;
    padding: 0;
    font-family: var(--font-display-1);
    font-size: 2em;
}
.cta_activevault p.tagline {
    margin: 0;
    padding: 0;
    font-weight: bold;
    font-family: var(--font-display-1);
    color: var(--second-colour-2);
    font-size: 1.2em;

}

.cta_wireless {
    background-color: var(--section-1-colour);
    color: #FFF;
}
.cta_wireless h2 {
    margin: 0;
    padding: 0;
    font-family: var(--font-display-1);
    text-align: center;
    font-size: 1.4em;
    height: 80px;
    line-height: 50px;
    text-align: center;
    padding: 15px;
}

.cta_wireless .image {
    height: 230px;
    background-image: url('/media/uploads/wireless_cta.jpg');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat; 

}
.cta_wireless .details {
    padding: var(--standard-padding);
    text-align: left;
}


.cta_contact {
    padding: var(--standard-padding);
}
.cta_contact section {
    width: 50%;
    padding-top: 0;
    padding-bottom: 0;
}
.cta_contact .flex_cols {
    margin:  0 auto;
}
.cta_contact .main {
    border-right: solid 2px var(--main-colour-1);
}
.cta_contact form {
    padding: 0;
}
.cta_contact form.standard .row {
    display: block;
    overflow: hidden;
}
.cta_contact form.standard .row label {
    margin-left: -100%;
    position: absolute;
}
.cta_contact form.standard .row textarea {
    height: 110px;
}
.cta_contact form.standard .control {
    padding-top: 0;
    padding-bottom: 0;
}

.cta_contact .main {
 
}
.cta_contact .details p {
    display: flex;
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
}
.cta_contact .details p label {
    display: block;
    width: 80px;
}
.cta_contact .details p output {
    display: block;
    font-weight: bold;
}
.contact_social ul  {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
}
 .contact_social ul li {
    margin-right: 10px;
}
 .contact_social ul li a{
    display: block;
    padding: 5px;
    width: 50px;
    height: 50px;
    background-color: var(--main-colour-2);
    border-radius: 3px;
    transition: var(--standard-transition);

}
.contact_social ul li a:hover {
    background-color: var(--main-colour-1);
}
.contact_social li a img{
    height: 40px;
    width: 40px;
}


.hlc_1 .icon_service_list .item a div.icon{
    background-color: var(--section-1-colour);
}
.hlc_1 .icon_service_list .item:hover a{
    background-color:  RGBA(var(--section-1-colour-rgb),0.2)
}
.hlc_1 .main_feature_list .highlight, .hlc_1 .main_feature_list .material-icons  {
    color: var(--section-1-colour);
}
.hlc_1 .section_block, .hlc_1_bkg {
    background-color:  RGBA(var(--section-1-colour-rgb),0.9);
    color: #FFF;
}
.hlc_1 .txt_feature_list ul li  {
    border-color:  RGBA(var(--section-1-colour-rgb),0.25);
}
.hlc_1 .txt_feature_list ul li:hover {
    border-color:  RGBA(var(--section-1-colour-rgb),1);
    color: var(--section-1-colour);
}


.hlc_2 .icon_service_list .item a div.icon{
    background-color: var(--section-2-colour);
}
.hlc_2 .icon_service_list .item:hover a{
    background-color:  RGBA(var(--section-2-colour-rgb),0.2)
}
.hlc_2 .main_feature_list .highlight, .hlc_2 .main_feature_list .material-icons  {
    color: var(--section-2-colour);
}
.hlc_2 .section_block, .hlc_2_bkg {
    background-color:  RGBA(var(--section-2-colour-rgb),0.9);
    color: #FFF;
}
.hlc_2 .txt_feature_list ul li  {
    border-color:  RGBA(var(--section-2-colour-rgb),0.25);
}
.hlc_2 .txt_feature_list ul li:hover {
    border-color:  RGBA(var(--section-2-colour-rgb),1);
    color: var(--section-2-colour);
}




.hlc_3 .icon_service_list .item a div.icon{
    background-color: var(--section-3-colour);
}
.hlc_3 .icon_service_list .item:hover a{
    background-color:  RGBA(var(--section-3-colour-rgb),0.2)
}
.hlc_3 .main_feature_list .highlight, .hlc_3 .main_feature_list .material-icons  {
    color: var(--section-3-colour);
}
.hlc_3 .section_block, .hlc_3_bkg {
    background-color:  RGBA(var(--section-3-colour-rgb),0.9);
    color: #FFF;
}

.hlc_3 .txt_feature_list ul li  {
    border-color:  RGBA(var(--section-3-colour-rgb),0.25);
}
.hlc_3 .txt_feature_list ul li:hover {
    border-color:  RGBA(var(--section-3-colour-rgb),1);
    color: var(--section-3-colour);
}


.hlc_4 .icon_service_list .item a div.icon{
    background-color: var(--section-4-colour);
}
.hlc_4 .icon_service_list .item:hover a{
    background-color:  RGBA(var(--section-4-colour-rgb),0.2)
}
.hlc_4 .main_feature_list .highlight, .hlc_4 .main_feature_list .material-icons  {
    color: var(--section-4-colour);
}
.hlc_4 .section_block, .hlc_4_bkg {
    background-color:  RGBA(var(--section-4-colour-rgb),0.9);
    color: #FFF;
}
.hlc_4 .txt_feature_list ul li  {
    border-color:  RGBA(var(--section-4-colour-rgb),0.25);
}
.hlc_4 .txt_feature_list ul li:hover {
    border-color:  RGBA(var(--section-4-colour-rgb),1);
    color: var(--section-4-colour);
}

.hlc_5 .icon_service_list .item a div.icon{
    background-color: var(--section-5-colour);
}
.hlc_5 .icon_service_list .item:hover a{
    background-color:  RGBA(var(--section-5-colour-rgb),0.2)
}
.hlc_5 .main_feature_list .highlight, .hlc_5 .main_feature_list .material-icons  {
    color: var(--section-5-colour);
}
.hlc_5 .section_block, .hlc_5_bkg {
    background-color:  RGBA(var(--section-5-colour-rgb),0.9);
    color: #FFF;
}

.hlc_5 .light_block {
    background-color: #FFF;
    color: var(--section-5-colour);
}
.hlc_5 .txt_feature_list ul li  {
    border-color:  RGBA(var(--section-5-colour-rgb),0.25);

}
.hlc_5 .txt_feature_list ul li:hover {
    border-color:  RGBA(var(--section-5-colour-rgb),1);
    color: var(--section-5-colour);
}