@charset "utf-8";
/* CSS Document */

@import url(../revolution/css/settings.css);

/*------------------------------------------------------------------
[Table of contents]
1. Clearfix
2. Preloader
3. Typography
4. Headings
5. Main Nav
6. Main Content
7. Column Grid
8. Google Maps
9. Icons
10. Image Hover
11. Lists
12. Footer
13. Social
14. Backtotop Button
-------------------------------------------------------------------*/


/* =1. Clearfix
--------------------------------------------------------------------------------------------------------*/
.clear { clear: both; }
.clearfix:after { content: "."; display:block; height:0; clear:both; visibility:hidden; }/* ----- clear fix for floats ----- */
.clearfix { display:inline-block; }
* html .clearfix { height:1%; }/* hides clearfix from IE-mac */
.clearfix { display:block; }/* end hide from IE-mac */
.alignleft { float:left; }
.alignright { float:right; }
.aligncenter { margin:auto; display:block; }
.alignnone { clear:both; font-size:0; line-height:0; margin:0; padding:0; border:0; height:0; width:0; }
.centered { text-align:center; }
/* End Clearfix
--------------------------------------------------------------------------------------------------------*/


/* =2. Preloader
--------------------------------------------------------------------------------------------------------*/
#preloader { position:absolute; top:0; left:0; right:0; bottom:0; background:#f5f5f5; z-index:9999; }
#status { width:300px; height:402px; position:absolute; left:50%; top:50%; margin:-201px 0 0 -150px; color:#212121 }
/* horizontal centering */
.parent {width:300px; margin:0px auto; position:absolute; height:402px; z-index:11}
.col1-3.half .parent {height:191px; }
.col1-3.half .parent.text { top:-1px; left:2px; }
.col2-3 .parent { width:620px; }
.child {text-align:center;}
/* vertical centering */
.parent {display: table}
.child {display: table-cell; vertical-align: middle; padding:0 50px; }
.child span { text-transform:uppercase; }
/* End Preloader
--------------------------------------------------------------------------------------------------------*/


/* =3. Typography
--------------------------------------------------------------------------------------------------------*/
html {overflow: -moz-scrollbars-vertical; overflow-y: scroll; -webkit-font-smoothing: antialiased; height:100% }
body { font: 13px 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; color:#212121; background:#f5f5f5; height:100% ;margin:0px; padding:0px }
strong { font-weight:600; }
a, a > * {-webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; }
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; }
p { line-height:21px; padding:13px 0px 0 0px; font-size:15px; }
p.small {font-size:12px; line-height:21px;}
p.big, article p, article ul.unordered-list, article .hentry ul, article ul.list, article ol {font-size:15px; line-height:24px;}
blockquote { line-height:1.5; padding:14px 35px 25px; margin-top:25px; border:1px solid #dedede; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic }
blockquote span {font-size:12px; display:block; margin-top:15px;}
.uppercase {text-transform:uppercase }
p.small.uppercase {font-size:11px; }
a { color:#212121; text-decoration:none; }
a:hover { text-decoration:none; color:#212121; }
p a, p a:hover { text-decoration:underline; color:#8cab4a; }
#filters .selected {font-weight:600; }
em {font-family:'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-style:normal; font-weight:600 }
code {font:13px 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-style:normal; line-height:1.5; display:block; }
pre { padding:13px 40px 0 40px; }
p.button {float:right; background-color: #509CBA; /* Removed #809552 */
 border-radius:3px; display:inline-block; margin:20px 0px 0px 0; padding:0; padding-bottom:3px; 
-o-box-shadow:0 1px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow:0 1px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow:0 1px 0 rgba(0, 0, 0, 0.1); box-shadow:0 1px 1px rgba(0, 0, 0, 0.1);}
.button-group .button {float:right; 
/*background-color: #509CBA;*/ /* Removed #809552 */ background-color:#fff;
border-radius:3px; display:inline-block; margin:20px 0px 0px 0; padding:0; 
-o-box-shadow:0 1px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow:0 1px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow:0 1px 0 rgba(0, 0, 0, 0.1); box-shadow:0 1px 1px rgba(0, 0, 0, 0.1);}
p.button a {font-size:15px; font-weight:600; display:inline-block; padding:7px 21px 8px 20px; color:#fff; font-weight:600; font-family:'Open Sans', Arial, Helvetica, sans-serif; line-height:21px; text-decoration:none; border-radius:3px; /*border: 1px solid #94ad5f; */
/*background-image: linear-gradient(bottom, #8da65a 0%, #9bb564 100%); background-image: -o-linear-gradient(bottom, #8da65a 0%, #9bb564 100%); background-image: -moz-linear-gradient(bottom, #8da65a 0%, #9bb564 100%); background-image: -webkit-linear-gradient(bottom, #8da65a 0%, #9bb564 100%); background-image: -ms-linear-gradient(bottom, #8da65a 0%, #9bb564 100%); */
background-color: #509CBA; /* removed #8da65a */ 
-o-text-shadow:-1px -1px 0px rgba(0, 0, 0, 0.25); -moz-text-shadow:-1px -1px 0px rgba(0, 0, 0, 0.25); -webkit-text-shadow:-1px -1px 0px rgba(0, 0, 0, 0.25);/* text-shadow:-1px -1px 0px rgba(0, 0, 0, 0.25);*/ }
.button-group p.button a {text-transform:uppercase;font-size:14px; font-weight:600; display:inline-block; padding:7px 21px 8px 20px; color:#fff; font-weight:600; font-family:'Open Sans', Arial, Helvetica, sans-serif; line-height:21px; text-decoration:none; border-radius:3px; 
border: 1px solid #000; /* Removed #94ad5f */ background-color:#f5f5f5;color:#000;
/*-o-text-shadow:-1px -1px 0px rgba(0, 0, 0, 0.25); -moz-text-shadow:-1px -1px 0px rgba(0, 0, 0, 0.25); -webkit-text-shadow:-1px -1px 0px rgba(0, 0, 0, 0.25); text-shadow:-1px -1px 0px rgba(0, 0, 0, 0.25); */}

p.button a:hover , .button-group p.button a:hover {color:#fff; text-decoration:none ;background-color:#509CBA}
.button-group .button {float:none;cursor:pointer}

.button-group .button:hover {
  background-color: #8CF;
  text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
  color: #222;
}

.button-group .button:active,
.button-group .button.is-checked {
  background-color: #509CBA;
}

.button-group .button:active a,
.button-group .button.is-checked a {
  background-color: #509CBA;
  color:#fff
}
/* End Typography
--------------------------------------------------------------------------------------------------------*/


/* =4. Headings
--------------------------------------------------------------------------------------------------------*/
div#logo { position:relative; margin:0 auto; width:280px; z-index:401; margin-bottom:43px; text-align:center }
div#logo a { display:inline-block;  width:220px; height:116px;  }
.hentry h1, h1, h2, h3, h4, h5 { line-height:1.2; font-family:'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size:36px; font-weight:400; color:#212121; margin:0px 0px 5px 0px; padding-bottom:17px; padding-top:26px;  border-bottom:1px solid #dedede; display:block; position:relative }
h3 {font-size:18px; padding-bottom:20px; padding-top:29px; line-height:24px; }
.align-top {padding-top:0 }
h4 {font-size:18px; padding-bottom:20px; padding-top:29px; line-height:24px; }
h5 {font-size:14px; padding-bottom:19px; padding-top:29px; line-height:24px; }
.hentry h1:before, h1:before, h2:before, h3:before, h4:before, h5:before { background:none repeat scroll 0 0 rgba(222, 222, 222, 1); bottom:-5px; content:""; height:8px; left:35px; position:absolute; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); width:8px;}
.hentry h1:after, h1:after, h2:after, h3:after, h4:after, h5:after {background:#f5f5f5; bottom:-3px; content:""; height:10px; left:35px; margin-left:-1px; position:absolute; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); width:10px; }
/* End Headings
--------------------------------------------------------------------------------------------------------*/


/* =5. Main Nav
--------------------------------------------------------------------------------------------------------*/
#options ul { margin:0; margin-bottom:23px; list-style: none; display:block; text-align:left; width:100%; -webkit-transform: translateZ(0); border-top:1px solid #ededed; }
#options li { }
#options li a { color:#212121; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size:14px; font-weight:600; text-decoration:none; text-transform:uppercase; padding:19px 35px;  margin:0px; position:relative; border-bottom:1px solid #ededed; display:block; height:59px; }
#options li a:hover { color:#212121; }
#options li a.selected { font-weight:700}
#options ul li ul {border:0; margin:0; display:none }
#options ul li ul li a { font-size:14px; font-weight:400; text-decoration:none; text-transform:none; padding:19px 70px; }
#options ul li ul li a.selected { font-weight:600}
#nav li ul.opened {display:block}
/* End Main Nav
--------------------------------------------------------------------------------------------------------*/


/* =6. Main Content
--------------------------------------------------------------------------------------------------------*/
header { width:280px; position:absolute; z-index:29; padding-top:43px; padding-bottom:43px; background:#fff; top:0px;}
#right-background { background:#fff; width:52px; right:0; top:0; position:fixed; z-index:30; height:100%; }
#content {width:100%; position:relative; border-left:280px solid #fff; border-right:52px solid #fff; min-height:100%; height:auto}
.container { padding:0px; width:100%; max-width:870px; position:relative; margin:0 50px; padding-bottom:65px; padding-top:0px; }
.masonry .container {max-width:1160px; }
.two-columns {width:580px; }
#container.two-columns { float:left }
/* =End Main Content
--------------------------------------------------------------------------------------------------------*/


/* =7. Column Grid
--------------------------------------------------------------------------------------------------------*/
.col1-1 { width:860px; height:280px; margin:5px; /*position:relative */}
.col1-3 { width:280px; height:280px; margin:5px; float:left; position:relative }
.col2-3 { width:570px; height:570px; margin:5px; float:left; position:relative }
.col2-3.wide {height:280px; }
.col2-3.tall {width:280px; height:570px; }
.col2-3.tall img {height:570px; }
.col1-3.tall { height:570px;}

/* Added by David - 18th Jan 2017 */
.col1-2 { width:425px; height:425px; margin:5px; float:left; position:relative }

.col2-3.post, .col2-3.auto, .col1-3.auto, .col1-1.auto {height:auto; padding-bottom:10px; }
.auto.no-padding {padding:0; }
.col1-3.margin-left {margin-left:35px; width:250px; }
.col1-3.margin-right {margin-right:35px; width:250px; }
.column-count2 {-webkit-column-count:2; -moz-column-count:2; column-count:2; -webkit-column-gap:20px; -moz-column-gap:20px; column-gap:20px; }
.bottom {position:absolute; bottom:0px; padding-bottom:36px; }
.break { height:20px; position:relative; display:block }
p .break {height:13px; }
.overflow, .element {overflow:hidden; }
.borderline {border-top:1px dotted #d3d3d3; height:1px; position:relative; display:block; margin:19px 0px 5px 0px; width:auto; }
/* =End Main Content
--------------------------------------------------------------------------------------------------------*/


/* =8. Google Maps
--------------------------------------------------------------------------------------------------------*/
#map {width:860px; height:400px; margin:0; border:0}
#map:before, #map:after {background:none; content: ''; left:0; position:absolute; top: 0; width: 100%; }
#map:after {bottom:0; top:auto; }
/* End Google Maps
--------------------------------------------------------------------------------------------------------*/


/* =9. Icons
--------------------------------------------------------------------------------------------------------*/
.icons { display:inline-block; height:24px; width:24px; z-index:100; }
nav .icons {float:right; margin-top:-2px; }
.images .icons {width:52px; height:52px; position:absolute; right:35px; top:35px; background-color:#fff; }
/* Main Nav Icons */
.home { background:url(../images/icons/8.png) center no-repeat; background-size:36px 36px; }
.portfolio { background:url(../images/icons/7.png) center no-repeat; background-size:36px 36px; }
.services { background:url(../images/icons/2.png) center no-repeat; background-size:36px 36px; }
.case-studies { background:url(../images/icons/1.png) center no-repeat; background-size:36px 36px; }
.our-work { background:url(../images/icons/1.png) center no-repeat; background-size:36px 36px; }
.blog { background:url(../images/bg-blog.png) center no-repeat; background-size:36px 36px; }
.contact { background:url(../images/icons/5.png) center no-repeat; background-size:36px 36px; }
.covid { background:url(../images/icons/2-black.png) center no-repeat; background-size:36px 36px;  }
/* Social Icons */
.linkedin {background:url(../images/bg-linkedin.png) center no-repeat; background-size:50px 50px; }
.dribbble {background:url(../images/bg-dribbble.png) center no-repeat; background-size:50px 51px; }
.googleplus {background:url(../images/bg-googleplus.png) center no-repeat; background-size:50px 50px; }
.twitter {background:url(../images/icons/social1.png) center no-repeat; background-size:50px 51px; } 
.facebook {background:url(../images/bg-facebook.png) center no-repeat; background-size:50px 51px; }
.behance {background:url(../images/bg-behance.png) center no-repeat; background-size:50px 50px; }
.skype {background:url(../images/bg-skype.png) center no-repeat; background-size:50px 51px; }
.vimeo {background:url(../images/bg-vimeo.png) center no-repeat; background-size:50px 50px; }
.instagram {background:url(../images/bg-instagram.png) center no-repeat; background-size:50px 50px; }
.pinterest {background:url(../images/icons/social2.png) center no-repeat; background-size:50px 50px; }
.youtube {background:url(../images/icons/social3.png) center no-repeat; background-size:50px 50px; }
/* Teaser Icons */
.link {background:url(../images/bg-link.png) center no-repeat; background-size:48px 48px; }
.video {background:url(../images/bg-video.png) center no-repeat; background-size:36px 36px; }
.zoom {background:url(../images/bg-zoom.png) center no-repeat; background-size:36px 36px; }
.map {background:url(../images/bg-map.png) center no-repeat; background-size:36px 36px; }
.environment {background:url(../images/icons/4.png) center no-repeat; background-size:36px 36px; }
.camera {background:url(../images/bg-camera.png) center no-repeat; background-size:36px 36px; }
.award {background:url(../images/bg-award.png) center no-repeat; background-size:36px 36px; }
.blog {background:url(../images/icons/3.png) center no-repeat; background-size:36px 36px; }
.audio {background:url(../images/bg-audio.png) center no-repeat; background-size:36px 36px; }
.upload {background:url(../images/icons/6.png) center no-repeat; background-size:36px 36px; }
.mailing-list {background:url(../images/icons/11.png) center no-repeat; background-size:24px 24px; vertical-align:middle}
.quote {background:url(../images/icons/12.png) center no-repeat; background-size:24px 24px; vertical-align:middle}
.telephone { background:url(../images/icons/telephone.png) center no-repeat; background-size:16px 16px; vertical-align:middle}

ul.logos {margin-top:20px;}
ul.logos li {float:left;padding:0px 5px;}
ul.logos li img {width:60px;}
/* End Icons
--------------------------------------------------------------------------------------------------------*/


/* =10. Image Hover
--------------------------------------------------------------------------------------------------------*/
.images { display:block; position:relative; }
.multiple-images .images {margin-bottom:10px; }
.images img {width:100%; display: block; max-width: 100% !important; z-index:9 }
img{box-shadow: #000 0 0 0}
.title, .subtitle { z-index:1001; position:absolute; top:35px; left:35px; width:auto; cursor:pointer; pointer-events: none; background:#fff; }
.subtitle { top:68px !important; left:35px !important; }
.title-wrap, .subtitle-wrap { overflow: hidden; position: relative; display:block }
.title-wrap h3, .subtitle-wrap p { overflow: hidden; white-space: nowrap; color:#212121; text-transform:uppercase; padding:5px 10px 6px 10px !important; }
.title-wrap h3 {font-size:14px; font-weight:600; margin:0px; border-bottom:0; padding:3px 10px 5px 10px !important;}
.title-wrap h3:before, .title-wrap h3:after {background:rgba(222, 222, 222, 0); }
.subtitle-wrap p {font-size:12px; font-weight:400; line-height:18px; }
/* Internet Explorer */
.ie .title-wrap h3, .ie .subtitle-wrap p { padding:5px 10px 5px 10px; }
/* Teaser */
.teaser {position:absolute; bottom:0px; left:0px; background:#fff; padding:18px 25px; margin:35px; width:210px; }
.teaser.only-h4 { padding:15px 25px 18px 25px; }
.teaser:before {content:''; height:0; width:0; border-width:8px 8px 8px 8px; border-style:solid; border-color:rgba(251,251,251,0) rgba(255,255,255,0) rgba(255,255,255,1) rgba(255,255,255,0); position:absolute; top:-16px; margin-left:0px; border-top-style:inset; }
.teaser h4, .teaser p.small {padding:0; }
.teaser h4 {padding-top:3px; padding-bottom:1px; margin:0; border:0 }
.teaser h4:before { background:none repeat scroll 0 0 rgba(222, 222, 222, 0); bottom:-5px; content:""; height:8px; left:35px; position:absolute; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); width:8px;  }
.teaser h4:after {background:none; bottom:-3px; content:""; height:10px; left:35px; margin-left:-1px; position:absolute; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); width:10px; }
.hidden {display:none }
/* End Image Hover
--------------------------------------------------------------------------------------------------------*/


/* =11. Lists
--------------------------------------------------------------------------------------------------------*/
ul.unordered-list, .hentry ul { list-style: disc; line-height:21px; padding:13px 0px 0 0px; margin-left:18px; text-align:left !important; }
ul.list {line-height:21px; padding-top:13px; }
ol { list-style: decimal; line-height:21px; padding:13px 0px 0 0px; margin-left:28px; text-align:left !important; }
/* =End Lists
--------------------------------------------------------------------------------------------------------*/


/* =12. Footer
--------------------------------------------------------------------------------------------------------*/
#bottom { height:auto; position:relative; padding:0 5px; }
/* End Footer
--------------------------------------------------------------------------------------------------------*/


/* =13. Social
--------------------------------------------------------------------------------------------------------*/
ul.social { letter-spacing:0; }
.social li { display:inline-block; margin:0px 3px;}
.social li a { display:block; }
ul.social a {text-indent:-9000px; text-decoration:none; height:52px; width:52px;}
/* End Social
--------------------------------------------------------------------------------------------------------*/


/* =14. Backtotop Button
--------------------------------------------------------------------------------------------------------*/
#backtotop { height:auto; position:fixed; right:0px; bottom:63px; display:none; z-index:30; }
#backtotop ul { padding:15px 0px; }
#backtotop ul li a { background:url(../images/bg-up.png) center top no-repeat; background-size:24px 24px; display:block; width:52px; height:52px; float:right; right:10px; text-indent:-9000px; }
#backtotop ul li a:hover { height:62px; }
/* End Backtotop Button
--------------------------------------------------------------------------------------------------------*/

.header-buttons {flaot:right}
.header-buttons ul li {float:right}
.header-buttons ul li a  { color:#212121; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size:14px; font-weight:600; text-decoration:none; text-transform:uppercase; padding:19px 35px 0px 0px;  margin:0px; position:relative;  display:block; height:59px; }

.container h1 {clear:both}

div.title, div.subtitle {display:none}

.mobile-only {display:none}
.no-mobile {display:block}

.button-group .button.mobile-only {display:none}
.button-group .button.no-mobile {display:inline-block}

iframe {width:100% !important;}

.hide-on-mobile {display:block}
.responsive-only {display:none}

#filters p.button {width:23%;margin-right:1%}
#filters p.button a {width:100%}


@media only screen and (max-width: 767px) {
	#filters p.button {width:48%;margin-right:1%}
	.button-group .button {margin-top:10px}
	
}

.jJrWMi {margin:0px !important}