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

/*------------------------------------------------------------------
[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%  }
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; }
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 { background-color: #809552; border-radius:3px; display:inline-block; margin:20px 5px 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);}
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: #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); }
p.button a:hover {color:#fff; text-decoration:none }
/* End Typography
--------------------------------------------------------------------------------------------------------*/


/* =4. Headings
--------------------------------------------------------------------------------------------------------*/
h1#logo { position:relative; margin:0 auto; width:280px; z-index:401; margin-bottom:43px; text-align:center }
h1#logo a { display:inline-block; background:url(../images/bg-logo.png) no-repeat; background-size:220px 116px; width:220px; height:116px; text-indent:-9999px; }
.hentry h1, h2, h3, h4, h5 { line-height:1.2; font-family:'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size:36px; font-weight:700; color:#212121; margin:0px 0px 5px 0px; padding-bottom:17px; padding-top:26px; text-transform:uppercase; 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, 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, 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:53px; 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:63px; padding-bottom:43px; background:#fff; }
#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 auto; padding-bottom:65px; padding-top:40px; }
.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; }
.col2-3.post, .col2-3.auto, .col1-3.auto, .col1-1.auto {height:auto; padding-bottom:30px; }
.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 */
.start { background:url(../images/bg-home.png) center no-repeat; background-size:24px 24px; }
.portfolio { background:url(../images/bg-portfolio.png) center no-repeat; background-size:24px 24px; }
.services { background:url(../images/bg-services.png) center no-repeat; background-size:24px 24px; }
.team { background:url(../images/bg-team.png) center no-repeat; background-size:24px 24px; }
.blog { background:url(../images/bg-blog.png) center no-repeat; background-size:24px 24px; }
.contact { background:url(../images/bg-contact.png) center no-repeat; background-size:24px 24px; }
/* 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/bg-twitter.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; }
/* 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:24px 24px; }
.zoom {background:url(../images/bg-zoom.png) center no-repeat; background-size:24px 24px; }
.map {background:url(../images/bg-map.png) center no-repeat; background-size:24px 24px; }
.slideshow {background:url(../images/bg-slideshow.png) center no-repeat; background-size:24px 24px; }
.camera {background:url(../images/bg-camera.png) center no-repeat; background-size:24px 24px; }
.award {background:url(../images/bg-award.png) center no-repeat; background-size:24px 24px; }
.comment {background:url(../images/bg-comment.png) center no-repeat; background-size:24px 24px; }
.audio {background:url(../images/bg-audio.png) center no-repeat; background-size:24px 24px; }
/* 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 35px; }
/* 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
--------------------------------------------------------------------------------------------------------*/