/* ----------------------------------------------------------------------------- 1. Document Setup 2. Header 3. Layout 4. Sidebar 5. Widgets 6. Forms / Contact Form 7. Blog 8. Portfolio 9. Isotope 10. Carousel 11. Comments 12. Footer 13. Table 14. Fonts -------------------------------------------------------------------------------- */ /* 1. Document Setup -----------------------------------------------------------------------------*/ *, *:after, *:before{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box} html{overflow-y:scroll} body{font-size:0.938em; font-family:'Roboto','Arial',sans-serif; font-weight:300; line-height:1.667em; background:#fff; background:#f4f4f4; color:#595959} img, object, embed{max-width:100%} a{margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent} del{text-decoration:line-through} abbr[title], dfn[title]{border-bottom:1px dotted #000; cursor:help} hr{display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0} input, select{vertical-align:middle} ::selection{background:rgb(127,196,73); color:#fafafa} ::-moz-selection{background:rgb(127,196,73); color:#fafafa} img::selection{background:transparent} img::-moz-selection{background:transparent} a { -o-transition:color .12s ease-out, background .12s ease-out; -ms-transition:color .12s ease-out, background .12s ease-out; -moz-transition:color .12s ease-out, background .12s ease-out; -webkit-transition:color .12s ease-out, background .12s ease-out; transition:color .12s ease-out, background .12s ease-out } a, a:link{color:#7FC449; text-decoration:none} a:hover{color:#000; text-decoration:none} a:active{outline:none} h1, h2, h3, h4, h5, h6{color:#444; line-height:1.5} a:hover, a:active, a:focus{ outline:0} .cf:before, .cf:after{ content:""; display:table} .cf:after{ clear:both} .cf{ zoom:1} .hr{width:100%; height:1px; border-bottom:1px solid #e5e5e5; float:left; display:block} .bw{position:relative; display:block} .selectnav{display:none; visibility:hidden} .more{font-weight:bold} .video{background:url(../images/loader.gif) no-repeat center center} /* 2. Header -----------------------------------------------------------------------------*/ /* Bar */ .bar{background:#fff; float:left; width:100%; padding-top:20px; padding-bottom:5px; position:relative; border-top:10px solid #7FC449; border-bottom:1px solid #e5e5e5} /* header */ header{ padding-top:2em;} /* Top quick contact */ .connect{margin-bottom:.7em} .connect ul{margin:0; padding:0; float:right} .connect ul li{list-style:none; color:#fff; display:inline; padding-left:25px; margin-right:20px} .connect ul li a{padding-left:24px; padding-top:5px; padding-bottom:5px} .connect ul li:last-child, .connect ul li:last-child a{padding-right:0; margin-right:0} .connect ul li.s_twitter a{background:url('../images/s_twitter.png') no-repeat left .3em} .connect ul li.s_tel a{background:url('../images/s_iphone.png') no-repeat left .3em; cursor:default} .connect ul li.s_email a{background:url('../images/s_email.png') no-repeat left .3em} .connect ul li a, .connect ul li span{color:#808080; font-size:12px; font-weight:300} .connect ul li a:hover, .connect ul li span:hover{text-decoration:underline} .connect ul li span:hover{cursor:default} /* Logo */ #logo{float:left; margin-top:7px; margin-bottom:10px;} #logo h1{margin:0; padding:0; width:274px; height:50px; text-indent:-999999px} #logo h1 a{background:url('../images/logo.png') no-repeat; width:274px; height:50px; display:block} /* Dropdown */ .sf-menu{float:right; margin-bottom:1em; padding:0; margin-top:1em;} .sf-menu ul{box-shadow:0px 5px 5px rgba(0,0,0,.2)} .sf-menu a{padding:.75em 1em; text-decoration:none; color:#505050; font-size:1.067em; letter-spacing:.1em} .sf-menu li a{text-transform:uppercase} .sf-menu li:last-child a{padding-right:0} .sf-menu li >a:hover{color:#939393} .sf-menu li li a{padding:.75em 0em; color:#C6E2AA} .sf-menu li ul{padding:.2em 1em; z-index:10} .sf-menu li >ul, .sf-menu li.sfHover >ul{background-color:#7FC449} .sf-menu li li{border-bottom:1px solid #E1F2D1} .sf-menu li li:last-child{background-image:none; border-bottom:none} .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active{outline:0; color:#C6E2AA} .sf-menu li li.sfHover >a, .sf-menu li li li.sfHover >a, .sf-menu li li li li.sfHover >a{color:#C6E2AA} .sf-menu li li a{color:#C6E2AA} .sf-menu li li a:hover, .sf-menu li li li a:hover{color:#fff} /* 3. Layout -----------------------------------------------------------------------------*/ .hero-centered h2, .title, .thumb-info h3, .page-title-wrap h2{font-family:'Roboto','Arial',sans-serif; font-weight:300} .title{font-weight:700 } .boxed{max-width:80em; margin:0 auto; background:#fff} .page-shadow{box-shadow:0px 2px 8px rgba(0,0,0,.4); float:left; width:100%} .page-inner{position:relative; float:left; width:100%} .shadow-bg{clear:both; background:transparent url(../images/footer_bg_shadow.png) repeat-x top left; width:100%; height:23px; margin-bottom:-23px; position:absolute; bottom:0} #main{float:left; width:100%} #main-outer{z-index:200; height:100%; width:100%; position:relative; background:#fff; float:left; margin-bottom:560px} .wrap-center{margin:0 auto; position:relative; max-width:73.231em} #content, #sidebar{margin-top:20px} #sidebar ul, #sidebar ul li{list-style:none} .content-indenter{margin-left:20%} /* Headers Fontsize */ #content h1{font-size:30px} #content h2{font-size:26px} #content h3{font-size:22px} #content h4{font-size:18px} #content h5, #content h6{font-size:16px} /* Page Title/Headline */ .page-title-wrap-bg{background:transparent url(../images/hero_bg.jpg) center center no-repeat fixed; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/hero_bg.jpg',sizingMethod='scale'); -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/hero_bg.jpg',sizingMethod='scale')"; float:left; width:100%; height:100%; overflow:hidden} .page-title-wrap-bg .overlay-bgcolor, .page-title-wrap .overlay-bgcolor{float:left; width:100%; height:100%; background:rgba(125,125,125,.7); padding:70px 0; clear:both} .page-title-wrap-bg h3, .page-title-wrap h3{margin-top:.7em; margin-bottom:0; font-size:4em; line-height:1.2; color:#c2c2c2} .page-title-wrap h3{color:#b2b2b2!important} .page-title-wrap-bg h2, .page-title-wrap h2, .contact-heading{font-size:3.333em; font-size:2.9em; margin:0 0 0em 0; color:#fefefe; position:relative} .page-title-wrap-bg h2 span, .page-title-wrap h2 span{position:absolute; width:30px; border-top:1px solid #c2c2c2; bottom:-10px} .page-title-wrap-bg h2, .page-title-wrap-bg h3, .page-title-wrap h2, .page-title-wrap h3{font-weight:100} .page-title-wrap{background:#f0f0f0; border-bottom:1px solid #e5e5e5} .page-title-wrap .overlay-bgcolor{background:none} .page-title-wrap h3, .page-title-wrap h2{color:#333} .page-title-wrap h2 span{} .page-title-wrap hgroup{float:left} .page-title-wrap .p-nav{float:right; margin-top:20px} .page-title-wrap .p-nav .p-prev, .page-title-wrap .p-nav .p-all, .page-title-wrap .p-nav .p-next{display:inline-block; text-indent:-99999999px; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter:alpha(opacity=40); opacity:.4; float:left} .page-title-wrap .p-nav .p-prev{background:url(../images/p_prev.png) no-repeat; height:25px; width:15px; margin-right:30px} .page-title-wrap .p-nav .p-next{background:url(../images/p_next.png) no-repeat; height:25px; width:15px; margin-left:30px} .page-title-wrap .p-nav .p-all{background:url(../images/p_all.png) no-repeat; height:17px; width:27px; margin-top:4px} .page-title-wrap .p-nav a:hover{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1} .home-slider{width:100%; clear:both; position:relative; z-index:20} /* Columns */ .columns{width:100%; float:left; margin:2em 0 0 0; padding:0 0 2em 0; clear:both; position:relative} .row{clear:both; width:100%; float:left} .one-half{width:48.5%} .one-third{width:31.3%} .two-third{width:65.64%} .one-fourth{width:22.69%} .three-fourth{width:74.23%} .one-fifth{width:16.8%} .one-sixth{width:14%} .two-fifth{width:37.6%} .three-fifth{width:58. 4%} .four-fifth{width:67.2%} .five-sixth{width:82.67%} .one-half, .one-third, .two-third, .three-fourth, .one-fourth, .one-fifth, .two-fifth, .three-fifth, .four-fifth, .one-sixth, .five-sixth{position:relative; margin-right:3%; float:left; margin-bottom:2em} .last{margin-right:0!important; clear:right} /* Features */ .features, .services{/*border-bottom:1px solid #e5e5e5; */ clear:both} .services{border-bottom:none} .features h3, .services h3{font-size:1.600em; font-weight:300} .features .f-figure, .services .s-figure{float:left; width:16%; margin-top:70px; text-align:right} .services .s-figure{width:18%} .features .f-detail, .services .s-detail{float:right; width:78%} .services .s-detail{width:76%} .features .title span, .services .title span{border-top:1px solid #7FC449; display:inline-block; width:30px; position:absolute; top:0px} .features .f-figure{display:block; visibility:visible} /* Thumbnail Overlay */ .thumb{position:relative; float:left; width:100%} .thumb img{float:left} .thumb-overlay{display:none; width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; background:#7FC449} .thumb-more, .thumb-preview{z-index:4; display:none; width:100%; height:100%; position:absolute; top:0px; left:0} .thumb-more{background:transparent url(../images/cross.png) no-repeat center 54%} .thumb-preview{background:transparent url(../images/magnifier.png) no-repeat center center} .thumb-info{display:none; position:absolute; width:100%; height:100%; z-index:2; text-align:left; padding:0 20px} .thumb-info h3{font-size:1.7em; line-height:1.2; margin-bottom:0px; font-weight:100; top:50%} .thumb-info h3, .thumb-info p{color:#fefefe} .thumb-info p{font-size:12px; font-style:italic} /* Recent Project */ .recent-projects, .recent-blog{padding-top:1em} .recent-blog .blog-thumb{margin-bottom:20px} /* 4. Sidebar -----------------------------------------------------------------------------*/ #sidebar .side-box{position:relative; margin-bottom:2.5em; display:inline-block; width:100%} #sidebar .side-box h3{font-size:12px; letter-spacing:2px; text-transform:uppercase; color:#b2b2b2} /* sidebar recent work thumbnail */ .recent-work-thumbnail{position:relative} .recent-work-thumbnail a{width:25%; padding:2%; border:1px solid #e5e5e5; float:left; margin-right:10px; margin-bottom:10px} .recent-work-thumbnail a:hover{border:1px solid #7FC449} .recent-work-thumbnail a img{float:left} /* Sidebar Navigation */ .side-nav{padding:0; margin-top:0; margin-bottom:20px; float:left; width:100%} .side-nav li{list-style:none; border-bottom:1px solid #e5e5e5; float:left; width:100%} .side-nav li:last-child{border-bottom:none} .side-nav li a{padding:7px 0; padding-top:7px; padding-bottom:7px; padding-left:17px; display:inline-block; width:100%; float:left; background:url(../images/list_style_1.gif) no-repeat .3em 1.1em} /* 5. Widgets -----------------------------------------------------------------------------*/ /* Blockquote */ .side-testimony blockquote, .single-testimony blockquote{padding:0; margin:0} .single-testimony{} .side-testimony blockquote p, .single-testimony blockquote p{font-style:italic; padding:8%; border:1px solid #e5e5e5; border-radius:4px; font-size:1.3em; font-weight:100; line-height:1.7} .side-testimony blockquote cite, .single-testimony blockquote cite{margin-left:10px; margin-top:10px; float:left; font-size:1em} .side-testimony blockquote p, .single-testimony blockquote p{position:relative; background:transparent; border:1px solid #e5e5e5} .side-testimony blockquote p:after, .single-testimony blockquote p:after, .side-testimony blockquote p:before, .single-testimony blockquote p:before{top:100%; border:solid transparent; content:""; height:0; width:0; position:absolute; pointer-events:none} .side-testimony blockquote p:after, .single-testimony blockquote p:after{border-color:rgba(136,183,213,0); border-top-color:#fff; border-width:12px; left:20%; margin-left:-12px} .side-testimony blockquote p:before, .single-testimony blockquote p:before{border-color:rgba(194,225,245,0); border-top-color:#e5e5e5; border-width:13px; left:20%; margin-left:-13px} /* Pullquote */ p[data-pullquote]{display:block} p[data-pullquote]:before{content:attr(data-pullquote); float:right; width:200px; margin:0 0% 0.5em 30px; padding:0; font-size:1em; line-height:1.7; font-style:italic; font-family:Georgia,serif} p.pull-left[data-pullquote]:before{float:left; margin:0 30px 0.5em 0} /* Note */ .note{ position:relative; width:100%; padding:1em 1em!important; font-size:1.5em; line-height:1.5; color:#fff; background:#7FC449; overflow:hidden; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box} .note:before{content:""; position:absolute; bottom:0; right:0; border-width:0 0 20px 20px; border-style:solid; border-color:#fff #8ad6b8 #fff #8ad6b8; background:#8ad6b8; display:block; width:0} .note cite{font-size:15px; display:block; margin-top:10px} /* Search */ .widget_search #s{border:1px solid #e5e5e5; padding:4% 12% 4% 4%; border-radius:2px; font-size:12px; letter-spacing:1px; text-transform:uppercase; background:url(../images/blog_search_icon.png) no-repeat 95% 50%} .widget_search #s:active, .widget_search #s:focus{border:1px solid #ccc} /* Categories */ .widget_categories ul, .widget_categories ul li{padding-left:0; list-style:none} .widget_categories ul li{} .widget_tag_cloud .tagcloud a{margin-bottom:10px; display:inline-block} /* Team */ .team-member{} .team-member:hover, .team-member:active, .team-member:focus{} .team-member h3{font-size:1.0em} .team-member h3 em{display:block; font-size:.8em; font-weight:100; font-style:normal} /* Pricing Table */ .pricing_table{position:relative; margin-top:20px; margin-bottom:20px; float:left; width:100%} .pricing_table.four_columns ul{width:25%} .pricing_table.three_columns ul{width:33.3%} .pricing_table.two_columns ul{width:49.8%} .pricing_table ul{position:relative; float:left; text-align:center; border:1px solid #deefe8; margin-left:0; padding-left:0; background-color:#f6fbf9; margin-left:-2px; padding:2.04%; border-radius:4px} .pricing_table .featured_plan{box-shadow:0px 0px 8px rgba(0,0,0,.1); padding:2.667em 1.333em; z-index:10; margin-top:-6px; background-color:#fff; border:1px solid #b5dacb} .pricing_table >ul:first-child{margin-left:2px} .pricing_table .price{font-size:40px; color:#7FC449} .pricing_table .price sup{top:-15px; font-size:20px} .pricing_table s, .pricing_table strike{color:#a9c9bc} .pricing_table .price .per{font-size:14px} .pricing_table ul li{list-style:none; padding:10px 0} .pricing_table ul li:last-child{border-bottom:none} .pricing_table ul li.plan_title{font-weight:300; font-size:1.7em; padding:20px 2%; border-bottom:1px solid #deefe8; margin-bottom:20px} /* Buttons */ input[type="submit"], #submit{border:none; padding:13px 20px 10px 20px!important} .btn{border-radius:3px; text-transform:uppercase; font-weight:700; display:inline-block; margin-bottom:20px; letter-spacing:2px} .btn.small{padding:5px 10px!important; font-size:10px!important} .btn.medium{padding:7px 14px!important; font-size:12px!important} .btn.large{padding:12px 18px!important; font-size:16px!important} .btn.green{color:#fff!important; background-color:#A5E277; background-color:rgba(165,226,119,.8); box-shadow:0px 3px 0px rgba(127,196,73,.8)} .btn.green:hover{background-color:#7FC449; background-color:rgba(127,196,73,1); box-shadow:0px 3px 0px rgba(127,196,73,1)} .btn.orange{color:#fff!important; background-color:#e55921; background-color:rgba(229,89,33,.8); box-shadow:0px 3px 0px rgba(175,68,25,.8)} .btn.orange:hover{background-color:#c85223; background-color:rgba(229,89,33,1); box-shadow:0px 3px 0px rgba(175,68,25,1)} .btn.blue{color:#fff!important; background-color:#357ec9; background-color:rgba(53,125,201,.8); box-shadow:0px 3px 0px rgba(37,80,125,.8)} .btn.blue:hover{background-color:#316ead; background-color:rgba(53,125,201,1); box-shadow:0px 3px 0px rgba(37,80,125,1)} .btn.light-blue{color:#fff!important; background-color:#49afd5; background-color:rgba(73,175,213,.8); box-shadow:0px 3px 0px rgba(51,123,149,.8)} .btn.light-blue:hover{background-color:#3b92b2; background-color:rgba(73,175,213,1); box-shadow:0px 3px 0px rgba(51,123,149,1)} .btn.dark{color:#fff!important; background-color:#454545; background-color:rgba(69,69,69,.8); box-shadow:0px 3px 0px rgba(29,29,29,.8)} .btn.dark:hover{background-color:#2e2e2e; background-color:rgba(69,69,69,1); box-shadow:0px 3px 0px rgba(29,29,29,1)} .btn.red{color:#fff!important; background-color:#e2293f; background-color:rgba(226,41,63,.8); box-shadow:0px 3px 0px rgba(174,37,53,.8)} .btn.red:hover{background-color::#c72236; background-color:rgba(226,41,63,1); box-shadow:0px 3px 0px rgba(174,37,53,1)} .btn.pink{color:#fff!important; background-color:#eb1a72; background-color:rgba(235,26,114,.8); box-shadow:0px 3px 0px rgba(206,17,97,.8)} .btn.pink:hover{background-color:#dd166a:; background-color:rgba(235,26,114,1); box-shadow:0px 3px 0px rgba(206,17,97,1)} .btn.yellow{color:#fff!important; background-color:#ebc306; background-color:rgba(235,195,6,.8); box-shadow:0px 3px 0px rgba(170,146,37,.8)} .btn.yellow:hover{background-color:#ceae19:; background-color:rgba(235,195,6,1); box-shadow:0px 3px 0px rgba(170,146,37,1)} /* Tabs */ .ui-tabs .ui-tabs-nav{ display:block; margin:0; padding:0; display:table; width:100%} .bordered.ui-tabs .tabs-content-wrapper{ border:1px solid #e6e6e6; display:block; margin-top:-21px; padding:20px 30px} .ui-tabs .ui-tabs-nav li{ float:left; line-height:32px; margin:0 0 20px; padding:0; position:relative; text-align:center; width:auto; list-style:none} #sidebar .ui-tabs .ui-tabs-nav li{ width:50%; list-style:none} .ui-tabs .ui-tabs-nav li a{ border:1px solid #e6e6e6; border-left:none; color:#959595; display:block; font-weight:300; padding:5px 10px} .ui-tabs .ui-tabs-nav li:first-child a{ border-left:1px solid #e6e6e6} .ui-tabs .ui-tabs-nav li a:hover{ border-top:1px solid #7FC449; color:#7FC449} .ui-tabs .ui-tabs-nav li.ui-tabs-selected a{ border-top:1px solid #7FC449; border-bottom:1px solid #fff; color:#333} .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a{ cursor:text} .ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a{ cursor:pointer} .ui-tabs .ui-tabs-panel{ border:none; display:block; position:relative} .ui-tabs .ui-tabs-panel .posts li{ display:inline-block; margin:0 0 9px} .ui-tabs .ui-tabs-panel .posts li:last-child{ margin:0} .ui-tabs .ui-tabs-panel .posts img{ display:block; float:left; margin:0 10px 0 0} .ui-tabs .ui-tabs-panel .posts .entry{ display:block; float:left; margin:-4px 0 0; width:150px} .ui-tabs .ui-tabs-panel .posts .entry .date{ color:#959595; display:block; margin:2px 0 0} .ui-tabs .ui-tabs-hide{ display:none !important} /* Accordion */ .accordion-button{ background:url(../images/toggle-closed.png) no-repeat left .9em; border-top:1px solid #e5e5e5; cursor:pointer; display:block; margin:0; padding:7px 0 7px 25px; color:#777} .accordion-button:hover{color:#7FC449} .accordion-button.ui-state-active{background:url(../images/toggle-open.png) no-repeat left .9em; color:#7FC449} .accordion-button:first-child{ border:none} .accordion-content{ clear:both; width:100%!important; position:relative; padding:0px 7px 10px 25px} /* Alert */ .alert{padding:10px 15px; margin-bottom:20px; text-align:left; background-image:url(images/transparent_border.png); background-repeat:repeat-x; background-position-y:top; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; -webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1); -moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1); box-shadow:0px 1px 2px 0px rgba(0,0,0,.1)} .alert.green{background-color:#d8f1c6; border:1px solid #b3cda1; color:#749958} .alert.red{background-color:#f9d9d9; border:1px solid #e1a1a1; color:#b55454} .alert.yellow{background-color:#fbf4dd; border:1px solid #d1c9ae; color:#978c68} .alert.grey{background-color:#f8f8f8; border:1px solid #d1d1d1; color:#939393} /* Map */ #map{ display:block; width:95%; height:350px; margin:0 auto; -moz-box-shadow:0px 5px 20px #ccc; -webkit-box-shadow:0px 5px 20px #ccc; box-shadow:0px 5px 20px #ccc} #map.large{ height:500px} .map{display:block; width:100%; height:350px; margin:0 auto} .map img{max-width:none!important} /* Flickr */ #flickr_badge_wrapper{margin-top:7px; float:left; width:100%} .flickr_badge_image{float:left; margin-right:14px} .flickr_badge_image img{width:45px; height:45px; box-shadow:1px 1px 2px rgba(0,0,0,.4)} /* Hero / Homepage Big Image */ #hero{overflow:hidden; width:100%; height:700px; position:relative; clear:both; background:transparent url(../images/hero_bg_2.jpg) center center no-repeat fixed; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/hero_bg.jpg',sizingMethod='scale'); -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/hero_bg.jpg',sizingMethod='scale')"} .hero-centered{text-align:center; position:absolute; display:block; max-width:75.231em; height:inherit; overflow:hidden; margin-top:150px} .hero-centered h2{font-size:5.385em; line-height:1.5; text-transform:uppercase; letter-spacing:2px; color:#fafafa; font-weight:100; display:block} .hero-centered h2 strong{font-weight:700} /* Call To Action Button (Fullwidth) */ .call-to-action-wide-link{text-align:center; margin:0} .call-to-action-wide-link a{padding:1em 0; display:inline-block; font-size:3em; font-family:'Roboto','Arial',sans-serif; font-weight:100; width:100%; margin:0; border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; line-height:1.2} .call-to-action-wide-link a span{width:77%; display:inline-block; margin:0 auto} .call-to-action-wide-link a:hover{background:#7FC449; color:#fefefe} /* 6. Forms / Contact Form -----------------------------------------------------------------------------*/ /* Forms */ input, textarea, input[type="text"], input[type="url"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], textarea{color:#43474c; background:transparent; border:1px solid #e5e5e5; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; padding:10px 6px} input:focus, textarea:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="password"]:focus, textarea:focus{border-color:#777; outline:none} input[type="checkbox"]{width:auto} textarea{min-width:70%} select{background:transparent; border:1px solid #efefef; width:250px} /* Contact Form */ .contactform{position:relative; float:left} .contactform fieldset{border:none; padding:0; position:relative; float:left} .contactform fieldset ol, .contactform fieldset ol li{list-style:none; padding-left:0; display:inline-block; width:100%; position:relative} .contactform fieldset ol li{display:inline; margin-bottom:20px; float:left; width:45%} .contactform fieldset ol li label{display:block; margin-bottom:10px} .contactform fieldset ol li input[type="text"]{width:90%} .contactform fieldset ol .message-wrap{width:100%} .contactform fieldset ol, .contactform fieldset ol li{position:relative} .contactform fieldset ol li textarea{width:90%; min-width:90%} .error_messages{padding-left:20px} /* Contact List */ .contact-list{padding-left:0; list-style:none; } .contact-list li{padding-left:24px; margin-bottom:10px} .contact-list .address-icon{background:url(../images/icon-home.png) no-repeat left .2em} .contact-list .phone-icon{background:url(../images/icon-phone.png) no-repeat left .2em} .contact-list .email-icon{background:url(../images/icon-at.png) no-repeat left .2em} .contact-list .skype-icon{background:url(../images/icon-skype.png) no-repeat left .2em} /* 7. Blog -----------------------------------------------------------------------------*/ .post article h2.post-title{font-size:2.5em!important; margin:0 0 20px 0; padding-top:2px; display:block} .post article h2.post-title a{display:block; color:#777} .post article h2.post-title a:hover{color:#7FC449} .post .thumb{margin-bottom:20px} .post .post-meta{margin-bottom:30px} .post .post-meta .post-date, .post .post-meta .post-categories, .post .post-meta .post-comments{padding-left:27px; display:inline-block} .post .post-meta .post-date{background:url(../images/blog_clock_icon.png) no-repeat left 50%; color:#999} .post .post-meta .post-categories{margin-left:20px; background:url(../images/blog_tag_icon.png) no-repeat left 50%} .post .post-meta .post-comments{margin-left:20px; background:url(../images/blog_bubbles_icon.png) no-repeat left 50%} .post{margin-bottom:40px; padding-bottom:30px; border-bottom:1px solid #e5e5e5} .post .intro, #content .intro{font-size:1.33em; line-height:1.7; color:#999} .single .post .intro{border-bottom:1px solid #e5e5e5; padding-bottom:20px} /* Blog Pagination */ .blog .pagination span, .blog .pagination a{font-size:1.5em; padding:.5em .8em; display:inline-block; border-bottom:1px solid #e5e5e5; margin-right:4px} .blog .pagination a:hover{border-bottom:1px solid #7FC449} .blog .pagination span{background:#f1f1f1; border-bottom:1px solid #7FC449} /* Post List */ .post-list{padding-left:0} .post-list li{clear:both; float:left; width:100%; margin:0!important; padding:0!important} .post-list li a{display:inline-block; width:100%; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid #e5e5e5} .post-list li:last-child a{border-bottom:none} .post-list li a img{float:left; width:20%; margin-right:2%; border:2px solid #e5e5e5} .post-list li a:hover img{border:2px solid #7FC449} .post-list .post-title{width:74%; float:right} .post-list strong.post-title{display:block} .post-list strong.post-title >.post-date{font-size:12px!important; display:block; color:#b6b6b6!important; text-transform:uppercase; letter-spacing:2px; font-weight:normal!important; font-weight:400} /* Recent Blog Post Meta */ .recent-blog .post-meta{font-family:'Droid Serif',Georgia,serif; font-weight:400; font-style:italic; font-size:0.867em} .recent-blog .sep{color:#ccc; padding:0 7px} /* 8. Portfolio -----------------------------------------------------------------------------*/ .project-details{margin:0; padding:0} .project-details li{margin:0; list-style:none; display:block; border-bottom:1px solid #e5e5e5; margin-bottom:10px; padding-bottom:10px} .project-details li:last-child, .project-details li.visit-website{border-bottom:none} .project-details li.visit-website{margin-top:20px} .project-details li strong{display:block} .project-details-fullwidth ul{margin-top:10px} .project-details-fullwidth .one-third{border-top:1px solid #e5e5e5; padding-top:20px} .project-details-fullwidth .one-third:hover, .project-details-fullwidth .one-third:focus{border-top:1px solid #7FC449} /* 9. Isotope -----------------------------------------------------------------------------*/ #filters{padding:0; margin:14px 0 20px -10px; float:right} #filters li{list-style:none; display:inline; color:#999; font-weight:bold} #filters li a{padding:7px 15px; text-decoration:none; margin-bottom:20px; float:left} #filters li a:hover{} #filters li a:active{outline:none} #filters li a.selected{outline:none; color:#000; text-decoration:none; background:#f2f2f2; border-radius:2px} #works-container{margin-left:-15px; width:104%; float:left; margin-bottom:50px!important} .four-col .element, .three-col .element, .two-col .element, .two-col-with-text .element, .three-col-with-text .element, .four-col-with-text .element{ float:left; overflow:hidden; position:relative; margin:1em} .four-col .element{width:16.8em; height:15em} .three-col .element{width:22.9em; height:18em} .two-col .element{width:35.5em; height:25em} .four-col-with-text .element{width:16.8em; height:19em} .three-col-with-text .element{width:22.9em; height:21em} .two-col-with-text .element{width:35.5em; height:30em} .two-col-with-text .element img, .three-col-with-text .element img, .four-col-with-text .element img{margin-bottom:0; float:left; width:100%} .two-col-with-text .element a h3, .three-col-with-text .element a h3, .four-col-with-text .element a h3{background-color:#f0f0f0; margin-top:0; clear:both; padding:.7em; font-weight:300} .two-col-with-text .element a:hover h3, .three-col-with-text .element a:hover h3, .four-col-with-text .element a:hover h3{color:#7FC449} .isotope-item{ z-index:2} .isotope-hidden.isotope-item{ pointer-events:none; z-index:1} .isotope, .isotope .isotope-item{ -webkit-transition-duration:0.8s; -moz-transition-duration:0.8s; -o-transition-duration:0.8s; transition-duration:0.8s} .isotope{ -webkit-transition-property:height,width; -moz-transition-property:height,width; -o-transition-property:height,width; transition-property:height,width} .isotope .isotope-item{ -webkit-transition-property:-webkit-transform,opacity; -moz-transition-property: -moz-transform,opacity; -o-transition-property: top,left,opacity; transition-property: transform,opacity} .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition{ -webkit-transition-duration:0s; -moz-transition-duration:0s; -o-transition-duration:0s; transition-duration:0s} .isotope.infinite-scrolling{ -webkit-transition:none; -moz-transition:none; -o-transition:none; transition:none} /* 10. Carousel -----------------------------------------------------------------------------*/ /* Carousel */ .list_carousel, .carousel-one-item{width:48.400em; overflow:hidden; zoom:1} .list_carousel ul, .carousel-one-item ul{margin:0; padding:0; list-style:none; display:block} .list_carousel li, .carousel-one-item li{color:#999; text-align:left; width:29%; position:relative; padding:0; margin:0 15px; display:block; float:left} .carousel-one-item li{margin:0!important} .list_carousel.responsive{width:auto; margin-left:0} .carousel-next, .carousel-prev{position:relative; height:17px; width:11px; text-indent:-9999999px; display:block; float:left; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter:alpha(opacity=50); opacity:.5} .carousel-next, .carousel-prev{background-image:url('../images/carousel_arrow.png')} .carousel-prev{background-position:0 100%; margin-right:10px} .carousel-prev:hover, .carousel-next:hover{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1} .carousel-prev.disabled, .carousel-next.disabled{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"!important; filter:alpha(opacity=20)!important; opacity:.2!important} /* Related Carousel */ .related-carousel .caroufredsel_wrapper{background:#f3f3f3; padding:13px 0} .related-carousel #carousel-related{margin-top:13px!important} /* Testimony/Related Carousel */ .testimony-carousel-wrap, .client-carousel-wrap, .related-carousel-wrap{float:left; width:100%; padding-bottom:2em; clear:both} .testimony-carousel-wrap, .related-carousel-wrap, .client-carousel-wrap, .line-strike-title{text-align:center} .testimony-carousel-header, .related-carousel-header, .client-carousel-header{position:relative} .testimony-carousel-header h2, .related-carousel-header h2, .client-carousel-header h2, .line-strike-title{background:url('../images/line.gif') repeat-x left center; letter-spacing:3px; font-size:0.867em; text-transform:uppercase; margin-bottom:30px; display:block; clear:both} .testimony-carousel-header h2 span, .testimony-carousel-header .testimony-carousel-button, .related-carousel-header h2 span, .related-carousel-header .related-carousel-button, .client-carousel-header h2 span, .line-strike-title span{background:#fff; padding:4px 20px} .line-strike-title.align-left span, .testimony-carousel-header h2.align-left span, .related-carousel-header h2.align-left span, .client-carousel-header h2.align-left span{padding:4px 20px 4px 0} .testimony-carousel-header h2.align-left, .related-carousel-header h2.align-left, .client-carousel-header h2.align-left, .line-strike-title.align-left{ text-align:left!important} .testimony-carousel-header h2.align-left, .related-carousel-header h2.align-left, .client-carousel-header h2.align-left, .line-strike-title.align-left{ text-align:left!important} .testimony-carousel-header .testimony-carousel-button, .related-carousel-header .related-carousel-button{position:absolute; top:0; right:0; padding:0px 0px 0px 20px} .testimony-carousel li{background:url('../images/quote.png') no-repeat center top} .testimony-carousel blockquote{font-size:inherit; text-align:center} .testimony-carousel blockquote p{font-size:2.3em; font-family:'Roboto','Arial',sans-serif; font-weight:100; line-height:1.7; margin-bottom:20px} .testimony-carousel blockquote small{font-size:1.067em; color:#3a3a3a} /* 11. Comments -----------------------------------------------------------------------------*/ #comments-container h3{font-size:22px; clear:both; margin-top:30px; position:relative; width:100%; border-top:1px solid #e5e5e5; padding-top:40px} #comments{clear:both; position:relative} #comments-title, #reply-title{} .pings-title{font-size:16px; font-weight:bold; margin-bottom:30px; text-align:center} #comments .entry-icon{background-position:-36px -272px; top:32px} .layout-2cr #comments .entry-icon{background-position:0 -272px} #respond{margin-top:75px; position:relative; padding-bottom:30px} #comments .respond .entry-icon{background-position:-36px -307px; height:36px} .layout-2cr #comments .respond .entry-icon{background-position:0 -307px} .comment .respond{margin-top:10px} .comment #respond h3, .comment .respond .entry-icon{background:none; margin:10px 0; padding:0; text-align:left} .commentlist{margin:20px 0 40px 0; padding-left:0; list-style-type:none; float:left; width:100%} .pinglist{margin:20px 0 40px 30px; list-style-type:decimal} .comment{border-top:1px solid #e5e5e5; padding-top:20px} .comment >div{ margin-left:66px; padding-bottom:5px; position:relative; z-index:19} .children{list-style-type:none; margin-left:50px} .comment span.avatar{background:#f1f1f1; -webkit-border-radius:24px; -moz-border-radius:24px; border-radius:24px; float:left; margin:0 10px 0 0; padding:4px; position:absolute; top:0; left:-66px} .comment img.avatar{vertical-align:bottom; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px} li.bypostauthor >span.avatar{background:#74b61a} .comment-meta{color:#777; font-size:14px; line-height:21px; margin-bottom:15px} .comment-meta a{border-bottom:none; color:#777} .comment-meta a:hover{color:#000} .comment-author cite{font-weight:bold; font-style:normal} .nocomments{text-align:center; padding:20px} .comment-body ul{list-style-type:disc} .comment-body ol{list-style-type:decimal} /* Comment Form */ #commentform{margin-top:20px} #commentform input{float:left; margin-right:10px} #commentform textarea{max-width:90%; width:90%} #commentform label, #commentform span{line-height:18px; position:relative; top:6px} #commentform p{margin-bottom:15px; overflow:hidden} #commentform .comment-form-comment{margin-bottom:10px} #commentform .comment-form-comment label{padding-bottom:10px; float:left; width:100%} p.form-submit{margin-bottom:0!important} /* 12. Footer -----------------------------------------------------------------------------*/ #footer{z-index:100; position:fixed; height:570px; bottom:0; width:100%; background-color:#7FC449} .footer-overlay{float:left; width:100%; height:100%} #footer .footer-box{margin-bottom:30px; float:left; width:100%} #footer h3{text-transform:uppercase; font-size:.9em; letter-spacing:3px; font-weight:bold; color:#fefefe!important; margin-bottom:30px} #footer h3, #footer p, #footer ul li{color:#fdfdfd} #footer a{color:#fefefe} #footer a:hover{color:#fff} #footer .footer-logo{margin-top:6px; margin-bottom:27px} #footer #twitter_update_list{} #footer #twitter_update_list, #footer ul{padding:0} #footer ul li{padding:0; list-style:none} #footer .title span{border-top:1px solid #e3f8f0} #footer #twitter_update_list li{list-style:none; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #BFD8A9; font-family:'Droid Serif',Georgia,serif; font-style:italic; line-height:1.6} #footer #twitter_update_list li.lastTweet{border-bottom:none} .footer-card{padding:50px 0} #footer .footer-subcontent{border-bottom:1px solid #BFD8A9; padding-top:20px} #footer .copyright{float:left; color:#e3f8f0; padding-top:20px} #footer .copyright a{font-weight:bold} #footer .social{float:right} /* Footer Recent Posts */ .recent-posts-list li{margin-bottom:10px; padding-bottom:10px; line-height:1.6} /* Social */ .social, .social-dark{padding:0} .social li, .social-dark li{text-indent:-999999px} .social li, .social li a, .social-dark li, .social-dark li a{list-style:none; display:block; width:32px; height:32px; float:left; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter:alpha(opacity=50); opacity:.5} .social li, .social li a:hover, .social-dark li, .social-dark li a:hover{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1} .social li.social-facebook a{background:url(../images/social/facebook.png) no-repeat center center} .social li.social-twitter a{background:url(../images/social/twitter.png) no-repeat center center} .social li.social-flickr a{background:url(../images/social/flickr.png) no-repeat center center} .social li.social-instagram a{background:url(../images/social/instagram.png) no-repeat center center} .social li.social-dribbble a{background:url(../images/social/dribbble.png) no-repeat center center} .social li.social-pinterest a{background:url(../images/social/pinterest.png) no-repeat center center} .social li.social-feed a{background:url(../images/social/feed.png) no-repeat center center} .social li.social-github a{background:url(../images/social/github.png) no-repeat center center} /* Social Dark */ .social-dark li.social-facebook a{background:url(../images/social/dark/facebook.png) no-repeat center center} .social-dark li.social-twitter a{background:url(../images/social/dark/twitter.png) no-repeat center center} .social-dark li.social-flickr a{background:url(../images/social/dark/flickr.png) no-repeat center center} .social-dark li.social-instagram a{background:url(../images/social/dark/instagram.png) no-repeat center center} .social-dark li.social-dribbble a{background:url(../images/social/dark/dribbble.png) no-repeat center center} .social-dark li.social-pinterest a{background:url(../images/social/dark/pinterest.png) no-repeat center center} .social-dark li.social-feed a{background:url(../images/social/dark/feed.png) no-repeat center center} .social-dark li.social-github a{background:url(../images/social/dark/github.png) no-repeat center center} /* 13. Table -----------------------------------------------------------------------------*/ table{ width:100%; text-align:center; border-color: #BFD8A9; } td, th {height:40px;} th {font-size:1.2em;} /* 14. Fonts -----------------------------------------------------------------------------*/ .small-font{ font-size:15pt} /* Demo -----------------------------*/ .demo { position: fixed; width: 155px; background: #fff; margin-top: 40px; box-shadow:0px 0px 7px rgba(0,0,0,.3); left: -160px; } .demo h4{ text-align: center; padding: 10px; margin: 0; background: #e8e8e8; clear: both; border-bottom: 1px solid #e5e5e5; position: relative; } .demo h4 #trigger { right: -30px; position: absolute; font-size: 30px; top: 0px; } .demo ul { margin: 0; padding: 10px; } .demo ul li { list-style: none; display: inline; } .demo ul li a img { margin: 0; width: 30px; border: 1px solid #e5e5e5; } .demo ul li a.selected img { border: 2px solid red; } .chairs-members p {text-align:left; margin:10px;} .chairs-members .team-member {margin:10px; text-align:right;}