/* @override http://site3.boxclever.ca.webguidecms.ca/public/css/main.css */ body,html,div,span,table,li,tr,td,th,h1,h2,h3 { margin:0px; padding:0px; } a,img { outline:0; } img { border:0; } a { text-decoration:none; } label { display:block; } .clear { clear:both; } body, html { width: 100%; background: #fff; font-size: 14px; font-family: "pt-sans", Helvetica, Arial, sans-serif; line-height: 1.5; color: #001f22; } .clear { clear: both; } .nofloat { float: none !important; } .container { position: relative; margin: 0 auto; width: 940px; overflow: visible; } a { color: #0087ce; text-decoration: none; outline: none; -webkit-transition: all 0.3s ease-out, font-size 0; -moz-transition: all 0.3s ease-out, font-size 0; -ms-transition: all 0.3s ease-out, font-size 0; -o-transition: all 0.3s ease-out, font-size 0; transition: all 0.3s ease-out, font-size 0; } a:hover { color: #333; } ul li { list-style-type: disc; list-style-position: outside; margin: 0 0 0 24px; } ol li { list-style-type: decimal; list-style-position: outside; margin: 0 0 0 24px; } h3 { font-size: 30px; color: #333; margin-bottom: 10px; } h4 { font-size: 22px; font-weight: bold; color: #333; margin-bottom: 10px; } code { font: normal 14px "Courier New",Courier,mono; background-color: #E4E8E9; padding: 5px; } p, ol, ul { margin: 0 0 20px 0; font-size: 18px; line-height: 30px; } table { margin-bottom: 20px; margin: 40px auto 20px auto; max-width: 600px; border-collapse: collapse; table-layout: fixed; } th { font-weight: bold; } th,td { padding: 4px 30px 4px; vertical-align: top; } td p { line-height: 1.5 !important; font-size: 14px !important; } blockquote { margin: 0 0 20px; color: #888; } blockquote p { font-family: "pt-serif", Georgia, serif; font-style: italic; font-size: 24px !important; line-height: 36px !important; } blockquote p strong { font-family: "pt-serif", Georgia, serif; font-style: normal; font-weight: normal; color: #9a9d9e; font-size: 18px !important; line-height: 36px !important; } form .row { margin-bottom: 20px; position: relative; } form .row label { color: #999; font-family: "pt-sans", Helvetica, Arial, sans-serif; font-size: 18px; position: absolute; padding: 10px 20px; margin: 1px 0 0 2px; line-height: 28px; } form .row label.error { color: #ff0000; } form .row.textarea label { padding: 20px; } form input.text { width: 558px; padding: 10px 20px; background-color: #fff; border: 1px solid #d9dcdc; line-height: 24px; color: #555; font-family: "pt-sans", Helvetica, Arial, sans-serif; font-size: 18px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } form textarea { width: 558px; padding: 20px; background-color: #fff; border: 1px solid #d9dcdc; line-height: 24px; height: 140px; color: #555; font-family: "pt-sans", Helvetica, Arial, sans-serif; font-size: 18px; -webkit-border-radius: 4px; resize: none; -moz-border-radius: 4px; border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } /*form input.text.error, form textarea.error { border-color: #ff0000; }*/ form input.text:focus, form textarea:focus { border-color: #999; outline: none; } form input.submit { margin: 40px 0 20px; border: 1px solid #008dd1; border-bottom-width: 2px; border-bottom-color: #006c9e; background-color: #0087cd; width: 300px; display: block; height: 71px; line-height: 71px; font-family: "pt-sans-caption", Helvetica, Arial, sans-serif; font-size: 24px; font-weight: bold; text-shadow: -1px 0 0 #333; text-align: center; cursor: pointer; color: #fff; padding: 0 50px; position: relative; z-index: 1; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMzNhOCIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); background-image: -moz-linear-gradient(bottom, rgba(0,51,168,.25) 0%, rgba(255,255,255,.25) 100%); background-image: -o-linear-gradient(bottom, rgba(0,51,168,.25) 0%, rgba(255,255,255,.25) 100%); background-image: -webkit-linear-gradient(bottom, rgba(0,51,168,.25) 0%, rgba(255,255,255,.25) 100%); background-image: linear-gradient(bottom, rgba(0,51,168,.25) 0%, rgba(255,255,255,.25) 100%); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } form input.submit:hover { background-color: #00a0f4; } form input.submit:active { background-color: #0087cd; } form #message { clear: both; margin: 0 0 20px 0; padding: 0 ; font-size: 20px; line-height: 24px; font-weight: bold; color: #222; } form #message.error { color: #ff0000; font-size: 20px; line-height: 24px; } form .file { display: inline-block; width:100%; position: relative; background: #fff; border: solid 1px #0087ce; margin-bottom: 10px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } form .file.error { background: #ffcbcb; border-bottom: solid 1px #f00; } form .file .button { background: url(../img/ico_clip.png) no-repeat 94% 50%; text-indent: 21px; font-family: Arial, sans-serif; font-size: 12px; color: #999; height: 44px; line-height: 44px; display: block; font-family: "pt-sans", Helvetica, Arial, sans-serif; font-size: 18px; } form .file input { cursor: pointer; height: 100%; position: absolute; right: 0; top: 0; filter: alpha(opacity=1); -moz-opacity: 0.01; opacity: 0.01; font-size: 100px; } form span.or { position: relative; display: block; width: 300px; height: 33px; background: url(../img/main_or.jpg) center center no-repeat; text-indent: -10000px; overflow: hidden; line-height: 40px; margin: 30px 0; } form fieldset { border: none; } form legend { color: #999999; margin: 0 0 11px; background: #ddd; display: block; width: 92%; border-radius: 6px 6px 0 0; padding: 10px 4%; } .select_toggle { width: 600px; height: 42px; overflow: hidden; background-color: #0087cd; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMzNhOCIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); background-image: -moz-linear-gradient(bottom, rgba(0,51,168,.25) 0%, rgba(255,255,255,.25) 100%); background-image: -o-linear-gradient(bottom, rgba(0,51,168,.25) 0%, rgba(255,255,255,.25) 100%); background-image: -webkit-linear-gradient(bottom, rgba(0,51,168,.25) 0%, rgba(255,255,255,.25) 100%); background-image: linear-gradient(bottom, rgba(0,51,168,.25) 0%, rgba(255,255,255,.25) 100%); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .select_toggle:hover { background-color: #00a0f4; } .select_toggle:focus { border-color: #00669c; outline: none; -webkit-box-shadow: 0 0 4px 2px #00669c; -moz-box-shadow: 0 0 4px 2px #00669c; box-shadow: 0 0 4px 2px #00669c; } .select_toggle a { display: block; width: 578px; height: 40px; line-height: 40px; padding: 0 0px 0px 20px; background: url(../img/select_icon.png) right center no-repeat; color: #f5f5f5; font-size: 18px; cursor: pointer; border: 1px solid #008dd1; border-bottom-width: 2px; border-bottom-color: #006c9e; text-shadow: -1px 0 0 #333; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .select_toggle a sup { line-height: 0; } .select_toggle.error { border-color: #fe866c; -webkit-box-shadow: 0 0 4px 2px #fe866c; -moz-box-shadow: 0 0 4px 2px #fe866c; box-shadow: 0 0 4px 2px #fe866c; } .select_toggle a:hover { color: #fff; } ul.select { display: none; list-style-type: none; width: 578px; position: absolute; top: 39px; left: 0px; padding: 5px 10px; border: 1px solid #006c9e; z-index: 20; background-color: #0376C5; } ul.select li { cursor: pointer; padding: 0 10px; color: #f5f5f5; text-shadow: -1px 0 0 #333; list-style: none; margin: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } ul.select li:hover { color: #222; text-shadow: -1px 0 0 #47A4D9; } .header { background: #F1F5F6 url(../img/white_bg.jpg) left top repeat; width: 100%; position: fixed; left: 0; top: 0; height: 160px; z-index: 2; } body.home .header { background: #0087ce; height: auto; } #header.has_feature { background: transparent; background: rgba(255,255,255,0.2); /*-webkit-box-shadow: 0 0 3px 0 rgba(0,0,0,0.3); -moz-box-shadow: 0 0 3px 0 rgba(0,0,0,0.3); box-shadow: 0 0 6px 0 rgba(0,0,0,0.3);*/ } body.home #header { height: 480px; z-index: 1; background: url(../img/office4.jpg) center center no-repeat #fff; background-size: cover; -ms-behavior: url(/backgroundsize.min.htc); } .lte9 body.home #header { background-position: top center;} body.home #header #header_overlay { background: rgba(0,135,206,0.8); width: 100%; height: 100%; position: absolute; } .lte9 body.home #header #header_overlay { z-index: 0;background:url("../img/blue_transparency.png") repeat; } #fixed_header { height: 82px; z-index: 5; opacity: 1; margin-top: -125px; -webkit-box-shadow: 0 0 3px 0 rgba(0,0,0,0.3); -moz-box-shadow: 0 0 3px 0 rgba(0,0,0,0.3); box-shadow: 0 0 3px 0 rgba(0,0,0,0.3); -webkit-transition: margin 0.4s ease-out; -moz-transition: margin 0.4s ease-out; -ms-transition: margin 0.4s ease-out; -o-transition: margin 0.4s ease-out; transition: margin 0.4s ease-out; } #fixed_header.show { margin-top: 0; } .header #logo { position: relative; float: left; margin: 36px 0 43px 0; width: 133px; height: 78px; z-index: 1; background: url(../img/logo_vertical.png) left top no-repeat; text-indent: -10000px; overflow: hidden; } body.home #header #logo { background: url(../img/logo_white.png); margin: 26px 0 0 0; width: 126px; height: 74px; } #header.has_feature #logo { background: url(../img/logo_white.png); width: 126px; height: 74px; } #fixed_header #logo { margin: 0 10px; width: 240px; height: 82px; z-index: 5; background: url(../img/logo-stickynavblue2.png) 20px 20px no-repeat; } body.home #fixed_header #logo { background: url(../img/logo-stickynav2.png) 20px 20px no-repeat; } .header #logo a { display: block; width: 100%; height: 100%; } .header #main_nav { float: right; position: relative; z-index: 1; margin-left: -20px; } #fixed_header #main_nav { z-index: 5; } #header #main_nav ul { margin: 55px 0 0 0; padding: 0; } body.home #header #main_nav ul { margin: 38px 0 0 0; } #fixed_header #main_nav ul { margin: 20px 0 0 0 !important; } .header #main_nav ul li { list-style: none; float: left; padding: 0 0 55px 0; margin: 0; } #header #main_nav ul li.last { background: none; } .header #main_nav ul li a { color: #0087ce; font-family: "futura-pt", Helvetica, Arial, sans-serif; font-size: 16px; text-shadow: 0 1px 0 rgba(255,255,255,1); text-transform: uppercase; display: block; letter-spacing: 1px; padding: 5px 12px; } body.home .header #main_nav ul li a, #header.has_feature #main_nav ul li a { color: #fff; text-shadow: none; } .header #main_nav ul li a:hover { color: #333 !important; } /*#header.has_feature #main_nav ul li a:hover { color: #aaa !important; }*/ .header #main_nav ul li a b { font-weight: 700; } .header #main_nav ul li.children { /*position: relative;*/ } .header #main_nav ul li.children.hover { background: url(../img/dropdown_arrow.png) center bottom no-repeat !important; } .header #main_nav ul li.children.hover a { color: #0087ce !important; text-shadow: 0 1px 0 rgba(0,0,0,.18); } body.home .header #main_nav ul li.children.hover a { color: #fff !important; } .header #main_nav ul li.children ul { position: fixed; background-color: #002b42; padding: 130px 10px; top: 133px; left: 0; margin: 0 !important; display: none; width: 100%; z-index: 100; text-align: center; } .header#fixed_header #main_nav ul li.children ul { top: 115px; margin: 0 !important; } .header #main_nav ul li.children.hover ul { /*display: block !important;*/ } .header #main_nav ul li.children ul li { float: none; position: relative; display: inline-block; margin: 0 30px; padding: 0; } .header #main_nav ul li.children ul li.first { margin-top: 10px; } .header #main_nav ul li.children ul li.last { margin-bottom: 10px; } .header #main_nav ul li.children ul li a { border: none; position: relative; display: block; font-weight: bold; font-size: 18px; text-transform: lowercase; padding: 0; width: 108px; } .header #main_nav ul li.children ul li.first a { border-top: 0px; } .header #main_nav ul li.children ul li a:hover { } .header #main_nav ul li.children ul li a b { color: #0087ce; font-weight: 500; border: none; padding: 0; display: block; padding-top: 94px; height: 30px; width: 108px; opacity: 0.5; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .header #main_nav ul li.children ul li a b#websites { background: url(../img/icon_website_white.png) center top no-repeat; background-size: auto 69px; } .header #main_nav ul li.children ul li a b#consulting { background: url(../img/icon-client-consulting-dropdown.png) center top no-repeat; background-size: auto 69px; } .header #main_nav ul li.children ul li a b#online_marketing { background: url(../img/icon_online_marketing_white.png) center top no-repeat; background-size: auto 69px; } .header #main_nav ul li.children ul li a b#mobile { background: url(../img/icon_mobile_white.png) center top no-repeat; background-size: auto 69px; } .header #main_nav ul li.children ul li a b#branding { background: url(../img/icon_branding_white.png) center top no-repeat; background-size: auto 69px; } .header #main_nav ul li.children ul li a b#ecommerce { background: url(../img/icon_ecommerce_white.png) center top no-repeat; background-size: auto 69px; } .header #main_nav ul li.children ul li a b#government { background: url(../img/icon-client-government-dropdown.png) center top no-repeat; background-size: auto 69px; } .header #main_nav ul li.children ul li a b#education { background: url(../img/icon-client-education-dropdown.png) center top no-repeat; background-size: auto 69px; } .header #main_nav ul li.children ul li a b#business { background: url(../img/icon-client-business-dropdown.png) center top no-repeat; background-size: auto 69px; } .header #main_nav ul li.children ul li a b#nonprofit { background: url(../img/icon-client-nonprofit-dropdown.png) center top no-repeat; background-size: auto 69px; } .header #main_nav ul li.children ul li a:hover b { opacity: 1; background-size: auto 83px !important; } #header #tagline { display: none; } body.home #header #tagline { clear: both; position: relative; display: block; color: #fff; font-family: "futura-pt", Helvetica, Arial, sans-serif; font-weight: 700; text-align: center; width: 75%; margin: 50px auto 0; top: 0; left: 0; } #header #tagline h1 { margin: 0; font-size: 36px; line-height: 1.5; } #header .ten_year_banner_badge { display: none; } body.home #header .ten_year_banner_badge { background: url(../img/website_banner_10yr_thumb.png) 0 0 no-repeat; display: block; background-size: 55px; width: 55px; height: 64px; margin: 10px auto;} .dropdowns { position: fixed; left: 0; margin: 0 !important; display: none; width: 100%; z-index: 100; text-align: center; } .dropdowns#work_dropdowns { top: 117px; } .dropdowns#work_dropdowns_fixed { top: 71px; } body.home .dropdowns#work_dropdowns { top: 89px; } .dropdowns#clients_dropdowns { top: 117px; } .dropdowns#clients_dropdowns_fixed { top: 71px; } body.home .dropdowns#clients_dropdowns { top: 89px; } .dropdowns ul { padding: 130px 10px; margin: 11px 0px 0px 0px/* 44px 0 0 0 */; background-color: #002b42; } .dropdowns#work_dropdowns ul { margin: 44px 0px 0px 0px; } .dropdowns#work_dropdowns ul li.current_state { margin: 33px 0px 0px 0px; } .dropdowns#clients_dropdowns ul { margin: 44px 0px 0px 0px; } .dropdowns#clients_dropdowns ul li.current_state { margin: 33px 0px 0px 0px; } .dropdowns ul li { float: none; position: relative; display: inline-block; margin: 0 18px; padding: 0; } .dropdowns ul li.current_state { width: 89px; height: 44px; position: absolute; top: 0; background: url(../img/dropdown_arrow.png) center bottom no-repeat; margin: 0; } .dropdowns ul li a { position: relative; display: block; height: 30px; width: 117px; padding-top: 94px; font-weight: 500; font-size: 16px; } .dropdowns ul li a:hover { color: #0087ce; } .dropdowns ul li a span { display: block; width: 100%; height: 69px; position: absolute; top: 0; left: 0; opacity: 0.5; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .dropdowns ul li a:hover span { opacity: 1; height: 83px;} .dropdowns ul li a.active:hover span { opacity: 1; height: 69px; } .dropdowns ul li.websites a span { background: url(../img/icon_website_white.png) center center no-repeat; background-size: contain; } .dropdowns ul li.consulting a span { background: url(../img/icon-client-consulting-dropdown.png) center center no-repeat; background-size: contain; } .dropdowns ul li.online_marketing a span { background: url(../img/icon_online_marketing_white.png) center center no-repeat; background-size: contain; } .dropdowns ul li.mobile a span { background: url(../img/icon_mobile_white.png) center center no-repeat; background-size: contain; } .dropdowns ul li.branding a span { background: url(../img/icon_branding_white.png) center center no-repeat; background-size: contain; } .dropdowns ul li.ecommerce a span { background: url(../img/icon_ecommerce_white.png) center center no-repeat; background-size: contain; } .dropdowns ul li.government a span { background: url(../img/icon-client-government-dropdown.png) center center no-repeat; background-size: contain; } .dropdowns ul li.education a span { background: url(../img/icon-client-education-dropdown.png) center center no-repeat; background-size: contain; } .dropdowns ul li.business a span { background: url(../img/icon-client-business-dropdown.png) center center no-repeat; background-size: contain; } .dropdowns ul li.nonprofit a span { background: url(../img/icon-client-nonprofit-dropdown.png) center center no-repeat; background-size: contain; } #we_build { width: 100%; position: relative; z-index: 1; height: auto; background: #F1F5F6 url(../img/grey_bg.jpg) left top repeat; margin: 0 0 50px 0; text-align: center; } #we_build_bottom { width: 100%; position: relative; z-index: 1; height: auto; background: #F1F5F6 url(../img/grey_bg.jpg) left top repeat; margin: 0 0 0px 0; } #we_build.clients li.first { /* margin: 0px 0px 0px 170px; */ } body.home #we_build { margin: 480px 0 0 0; padding: 90px 0; text-align: center; } body.home #we_build_bottom { margin: 0px 0 0 0; padding: 90px 0; text-align: center; } #we_build h3, #we_build_bottom h3 { color: #131313; font-size: 30px; font-weight: normal; letter-spacing: 1px; margin: 0; } #we_build ul { margin: 60px 0 0 0; padding: 0; } #we_build ul li { display: inline-block; list-style: none; position: relative; float: none/*left*/; margin: 0px 30px/* 0 0 0 60px */; text-align: center; } #we_build ul li.first { /* margin: 0 0 0 80px; */ } #we_build ul li a { position: relative; display: block; height: 30px; width: 117px; padding-top: 94px; font-weight: bold; font-size: 16px; /*-webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; transition: all 0.15s linear;*/ } #we_build ul li a:hover { /*-webkit-transform-origin: center center; -moz-transform-origin: center center; transform-origin: center center; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); transform: scale(1.2);*/ } #we_build ul li.others a { -webkit-transform-origin: center center; -moz-transform-origin: center center; transform-origin: center center; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); } #we_build ul li a.active, #we_build ul li a:hover { color: #6e7375; } #we_build ul li a span { display: block; width: 100%; height: 69px; position: absolute; top: 0; left: 0; opacity: 0.5; -webkit-transition: all 0.17s ease-out; -moz-transition: all 0.17s ease-out; -ms-transition: all 0.17s ease-out; -o-transition: all 0.17s ease-out; transition: all 0.17s ease-out; } #we_build ul li a:hover span { opacity: 1; height: 83px;} #we_build ul li a.active:hover span { opacity: 1; height: 69px; } #we_build ul li a.active span { opacity: 0.8; } #we_build ul li a.active span b { display: block; position: absolute; top: -15px; right: 6px; width: 32px; height: 32px; background: url(../img/work_icons_close.png) center center no-repeat; } #we_build ul li a.active:hover span b { } #we_build ul li.websites a span { background: url(../img/icon_website.png) center center no-repeat; background-size: contain;-ms-behavior: url(/backgroundsize.min.htc); } #we_build ul li.consulting a span { background: url(../img/icon-client-consulting.png) center center no-repeat; background-size: contain;-ms-behavior: url(/backgroundsize.min.htc); } #we_build ul li.online_marketing a span { background: url(../img/icon_online_marketing.png) center center no-repeat; background-size: contain;-ms-behavior: url(/backgroundsize.min.htc); } #we_build ul li.mobile a span { background: url(../img/icon_mobile.png) center center no-repeat; background-size: contain;-ms-behavior: url(/backgroundsize.min.htc); } #we_build ul li.branding a span { background: url(../img/icon_branding.png) center center no-repeat; background-size: contain;-ms-behavior: url(/backgroundsize.min.htc); } #we_build ul li.ecommerce a span { background: url(../img/icon_ecommerce.png) center center no-repeat; background-size: contain;-ms-behavior: url(/backgroundsize.min.htc); } #we_build ul li.government a span { background: url(../img/icon-client-government.png) center center no-repeat; background-size: contain;-ms-behavior: url(/backgroundsize.min.htc); } #we_build ul li.education a span { background: url(../img/icon-client-education.png) center center no-repeat; background-size: contain;-ms-behavior: url(/backgroundsize.min.htc); } #we_build ul li.business a span { background: url(../img/icon-client-business.png) center center no-repeat; background-size: contain;-ms-behavior: url(/backgroundsize.min.htc); } #we_build ul li.nonprofit a span { background: url(../img/icon-client-nonprofit.png) center center no-repeat; background-size: contain;-ms-behavior: url(/backgroundsize.min.htc); } #enticers { position: relative; z-index: 1; background: url(../img/logo_pattern.jpg) left top repeat; padding: 70px 0; } #enticers .enticer { float: left; width: 300px; height: 186px; margin: 0 0 20px 20px; } #enticers .enticer.first { width: 620px; height: 390px; margin: 0; } #enticers .enticer a { width: 100%; height: 100%; color: #fff; display: block; position: relative; cursor: pointer; -webkit-perspective: 1500px; -moz-perspective: 1500px; perspective: 1500px; } #enticers .enticer a .content_holder { pointer-events: none; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; transition: all .3s ease-out; -webkit-transform: translatez(-93px); -moz-transform: translatez(-93px); transform: translatez(-93px); } #enticers .enticer.first a .content_holder { -webkit-transform: translatez(-195px); -moz-transform: translatez(-195px); transform: translatez(-195px); } #enticers .enticer a:hover .content_holder { z-index: 100; -webkit-transform: translatez(-93px) rotatex(90deg); -moz-transform: translatez(-93px) rotatex(90deg); transform: translatez(-93px) rotatex(90deg); } #enticers .enticer.first a:hover .content_holder { -webkit-transform: translatez(-195px) rotatex(90deg); -moz-transform: translatez(-195px) rotatex(90deg); transform: translatez(-195px) rotatex(90deg); } #enticers .enticer a .content_holder .enticer_image, #enticers .enticer a .content_holder .text { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } #enticers .enticer a .content_holder .enticer_image { z-index: 10; -webkit-transform: rotatex(0deg) translatez(93px); -moz-transform: rotatex(0deg) translatez(93px); transform: rotatex(0deg) translatez(93px); } #enticers .enticer.first a .content_holder .enticer_image { -webkit-transform: rotatex(0deg) translatez(195px); -moz-transform: rotatex(0deg) translatez(195px); transform: rotatex(0deg) translatez(195px); } #enticers .enticer a .content_holder .text { background: #001f22; color: #fff; width: 260px; height: 146px; padding: 20px; -webkit-transform: rotatex(-90deg) translatez(93px); -moz-transform: rotatex(-90deg) translatez(93px); transform: rotatex(-90deg) translatez(93px); } #enticers .enticer.first a .content_holder .text { padding: 30px 50px; width: 520px; height: 330px; -webkit-transform: rotatex(-90deg) translatez(195px); -moz-transform: rotatex(-90deg) translatez(195px); transform: rotatex(-90deg) translatez(195px); } #enticers .enticer.first a .content_holder .text p { font-size: 18px; } #enticers .enticer a .content_holder .text p { line-height: 1.5; font-size: 16px; } #blog_quote { width: 100%; position: relative; z-index: 1; background: #001f22; padding: 60px 0; } #blog_quote h2 { font-size: 36px; font-weight: normal; line-height: 36px; margin: -8px 0 30px 0; color: #0087ce; } #blog_quote #latest_posts { float: left; width: 400px; padding: 0 80px 0 30px; border-left: 1px solid #004866; } #blog_quote #latest_posts h2 a:hover { color: #fff; } #blog_quote #latest_posts .post { clear: both; margin: 0 0 20px 0; background: transparent; } #blog_quote #latest_posts .post a { display: block; padding: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } #blog_quote #latest_posts .post a:hover { background: #0087ce; } #blog_quote #latest_posts .post a .date { float: left; margin: 0 24px 0 0; width: 40px; text-align: center; color: #b3b3b3; font-weight: bold; text-transform: uppercase; } #blog_quote #latest_posts .post a:hover .date { color: #fff; } #blog_quote #latest_posts .post a .date .month { font-size: 18px; } #blog_quote #latest_posts .post a .date .day { font-size: 30px; line-height: 30px; margin: -6px 0 0 0; } #blog_quote #latest_posts .post a h3 { width: 316px; float: left; color: #fff; font-size: 18px; margin: 0; } #blog_quote #testimonial { float: left; width: 368px; padding: 0 30px; color: #b3b3b3; border-left: 1px solid #004866; } #blog_quote #testimonial .text { margin: 33px 0 0 0; font-size: 24px; line-height: 40px; font-family: "pt-serif", Georgia, serif; font-style: italic; } #blog_quote #testimonial .author { font-size: 16px; line-height: 28px; font-weight: bold; text-align: right; margin-top: 10px; } #blog_quote #testimonial .company { font-size: 16px; line-height: 18px; font-weight: normal; text-align: right; font-style: italic; } #content { width: 100%; padding: 20px 0 60px 0; position: relative; z-index: 2; background: url(../img/grey_bg.jpg); margin: 160px 0 0 0; overflow: visible; } #content.has_feature { margin: 746px 0 0 0; } #content #main_content { position: relative; overflow: visible; } #content #main_content .article { position: relative; /*margin: 0 auto;*/ clear: both; } #content #main_content .article.first { margin: 60px 0 0; } #content #main_content .article.small { /*width: 600px;*/ } #content #main_content .article.full { width: 100%; } #content #main_content .article h2 { position: relative; font-size: 48px; font-weight: bold; margin: 40px auto 20px auto; max-width: 600px; } #content #main_content .article h3 { margin: 40px auto 20px auto; max-width: 600px; } #content #main_content .article h4 { margin: 40px auto 20px auto; max-width: 600px; } #we_build h2 { color: #131313; font-size: 30px; font-weight: normal; letter-spacing: 1px; text-align: center; margin: 0; } #content #main_content .article h3 { max-width: 600px; margin: 0 auto 10px;} #content #main_content .article p { max-width: 600px; margin: 0 auto 20px; font-size: 18px; line-height: 30px; } #content #main_content .article ul, #content #main_content .article ol { max-width: 600px; margin: 0 auto 20px; font-size: 18px; line-height: 30px; padding: 0; } #content #main_content .article p em { text-transform: uppercase; font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: 1px;} #content #main_content .article hr { border: none; border-bottom: 1px solid #d6dcdf; margin: 60px 0; } #content #main_content .article .articleimg { position: relative; } #content #main_content .article .articleimg.left { float: left; width: auto; max-width: 330px; margin: 5px 30px 20px 0; } #content #main_content .article .articleimg.right { float: right; width: auto; max-width: 433px; margin: 5px 0 20px 30px; } #content #main_content .article .articleimg.centered { width: 100%; margin: 0 0 20px 0; /*margin: 0 0 20px -170px;*/ } #content #main_content .article .articleimg.centered img { display: block; margin: 40px auto 20px; position: relative; } #content #main_content .article .articleimg img { max-width: 100%; } #content #main_content .article .articleimg p.caption { font-size: 16px; line-height: 30px; color: #555; border-bottom: 1px solid #ccc; margin: 0 auto; padding: 10px 0 20px 0px; } #content #main_content .article .articleimg a.enlarge { position: relative; display: block; line-height: 0; } #content #main_content .article .articleimg a.enlarge b { display: block; background: url(../img/zoom.png); width: 25px; height: 26px; position: absolute; right: 5px; top: 5px; opacity: 0.5; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } #content #main_content .article .articleimg a.enlarge:hover b { opacity: 1; } #content #main_content .post .articleimg { position: relative; } #content #main_content .post .articleimg.left { float: left; width: auto; max-width: 160px; margin: 5px 30px 20px 0; } #content #main_content .post .articleimg.right { float: right; width: auto; max-width: 330px; margin: 5px 0 20px 30px; } #content #main_content .post .articleimg.centered { width: 100%; margin: 0 0 20px 0; /*margin: 0 0 20px -170px;*/ } #content #main_content .post .articleimg.centered img { float: none !important; display: block; margin: 40px auto 20px auto !important; position: relative; } #content #main_content .post .articleimg img { max-width: 100%; } #content #main_content .post .articleimg p.caption { font-size: 14px; line-height: 20px; color: #555; border-bottom: 1px solid #ccc; margin: 0 auto; padding: 10px 0 15px 0px; } #content #main_content .post .articleimg.centered p.caption { font-size: 16px; line-height: 30px; text-align: center; padding-bottom: 20px; } #content #main_content .post .articleimg a.enlarge { position: relative; display: block; line-height: 0; } #content #main_content .post .articleimg a.enlarge b { display: block; background: url(../img/zoom.png); width: 25px; height: 26px; position: absolute; right: 5px; top: 5px; opacity: 0.5; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } #content #main_content .post .articleimg a.enlarge:hover b { opacity: 1; } #content #main_content .about { float: left; width: 280px; margin: 0px 10px 60px 10px; } #content #main_content .about1 { margin-left: 30px; } #content #main_content .about1, #content #main_content .about2 { margin: 0 2.5%; width: 45%; } #content #main_content .about3 { margin: 0 2.5% 40px; width: 95%; } #content #main_content .about3 .about-block { text-align:left;float:left;overflow:hidden;width:49%; margin:30px 0 0;border-right:1px solid #d6dcdf; } #content #main_content .about3 .case_services, #content #main_content .about3 .case_industry { margin: 0 5% 0 0; width: 45%; float:left;} #content #main_content .about3 .case_study_button { width:49%; float:left;} #content #main_content .article .case_services { } #main_content .article .case_services span { display: block; } #main_content .article .case_industry { } #main_content .article .case_industry span { display: block; } #content #main_content .case_study_button { text-align:center;position: relative; z-index: 3; width: auto; float: right; margin: 0 0 40px 0; } #content #main_content .case_study_button a { background-color: #838383; color: #fff; font-family: "Helvetica"; font-size: 24px; font-weight: bold; display: inline-block; *display: inline;zoom: 1;margin: 75px auto 0; padding: 25px 40px; text-align: center;width: 50%; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; /*-webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-box-shadow: 0 2px 0 rgba(179,179,179,.75); -moz-box-shadow: 0 2px 0 rgba(179,179,179,.75); box-shadow: 0 20px 30px rgba(179,179,179,.75); background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNmJjMSIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYTVkOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); background-image: -moz-linear-gradient(bottom, #006bc1 0%, #00a5d9 100%); background-image: -o-linear-gradient(bottom, #006bc1 0%, #00a5d9 100%); background-image: -webkit-linear-gradient(bottom, #006bc1 0%, #00a5d9 100%); background-image: linear-gradient(bottom, #006bc1 0%, #00a5d9 100%); */} #content #main_content .case_study_button a:hover { background:#404040; } #content #main_content .article a:hover { opacity: 0.8; } #content #main_content .article #contact_form { margin: 40px auto 20px; max-width: 600px; } #content #main_content .article .form_builder_form { margin: 40px auto 20px; max-width: 600px; } #content #main_content .article .form_builder_form .checkbox { display: block; } #content #main_content .article .form_builder_form .checkbox_contain label.description { position: relative; } #content #main_content .article .form_builder_form .checkbox_row { display: block; clear: both; margin: 0px 0px 6px 0px; padding: 0 18px; float: left; } #content #main_content .article .form_builder_form .checkbox_row input.checkbox { margin: 10px 0 0; display: inline-block; } #content #main_content .article .form_builder_form .checkbox_row .checkbox_label { padding: 0px; display: inline-block; position: relative; vertical-align: top; } #content #main_content .article .form_builder_form .notes { padding: 10px 5%; } #content #main_content .article .form_builder_form .notes p span { font-size: 14px; color: #c3c3c3; } #content #main_content .article .form_builder_form textarea { padding-top: 14px; } #content #main_content #portfolio { position: relative; width: 1060px; margin: 0 0 0 -60px; overflow: visible; } #content #main_content #portfolio h2 { position: relative; font-size: 30px; font-weight: bold; margin: 20px 60px; } #content #main_content #portfolio #items { position: relative; width: 960px; padding: 0 50px; } #content #main_content #mobile_portfolio { display: none; } #content #main_content #mobile_portfolio #mobile_items { display: none; } #content #main_content #mobile_portfolio #mobile_items .mobile_item { width: 100%; margin: 5px 0px; } #content #main_content #mobile_portfolio #mobile_items .mobile_item .image_holder img { width: 100%; } #content #main_content #portfolio .item { margin: 10px; line-height: 0; position: relative; overflow: visible; float: left; } #content #main_content #portfolio .item.lrg { width: 940px; height: 564px; } #content #main_content #portfolio .item.med { width: 460px; height: 564px; } #content #main_content #portfolio .item.sml { width: 460px; height: 272px; } #content #main_content #portfolio .item a { width: 100%; height: 100%; color: #fff; display: block; position: relative; cursor: pointer; -webkit-perspective: 0px; -webkit-perspective: 1500px; -moz-perspective: 1500px; perspective: 1500px; } #content #main_content #portfolio .item a .content_holder { pointer-events: none; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; -webkit-transform-style: flat; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; transition: all .3s ease-out; -webkit-transform: translatez(-282px); -moz-transform: translatez(-282px); transform: translatez(-282px); } #content #main_content #portfolio .item.med a .content_holder { -webkit-transform: translatez(-230px); -moz-transform: translatez(-230px); transform: translatez(-230px); } #content #main_content #portfolio .item.sml a .content_holder { -webkit-transform: translatez(-136px); -moz-transform: translatez(-136px); transform: translatez(-136px); } #content #main_content #portfolio .item a:hover .content_holder { z-index: 100; -webkit-transform: translatez(-282px) rotatex(90deg); -moz-transform: translatez(-282px) rotatex(90deg); transform: translatez(-282px) rotatex(90deg); } #content #main_content #portfolio .item.med a:hover .content_holder { -webkit-transform: translatez(-230px) rotatey(-90deg); -moz-transform: translatez(-230px) rotatey(-90deg); transform: translatez(-230px) rotatey(-90deg); } #content #main_content #portfolio .item.sml a:hover .content_holder { -webkit-transform: translatez(-136px) rotatex(90deg); -moz-transform: translatez(-136px) rotatex(90deg); transform: translatez(-136px) rotatex(90deg); } #content #main_content #portfolio .item a .content_holder .image_holder, #content #main_content #portfolio .item a .content_holder .text { display: block; height: 100%; width: 100%; position: absolute; top: 0; left: 0; overflow: hidden; } #content #main_content #portfolio .item a .content_holder .image_holder .porfolio_image { width: 100%; } #content #main_content #portfolio .item a .content_holder .image_holder { z-index: 10; -webkit-transform: rotatex(0deg) translatez(282px); -moz-transform: rotatex(0deg) translatez(282px); transform: rotatex(0deg) translatez(282px); } #content #main_content #portfolio .item.med a .content_holder .image_holder .porfolio_image { width: auto; } #content #main_content #portfolio .item.med a .content_holder .image_holder { -webkit-transform: rotatex(0deg) translatez(230px); -moz-transform: rotatex(0deg) translatez(230px); transform: rotatex(0deg) translatez(230px); } #content #main_content #portfolio .item.sml a .content_holder .image_holder { -webkit-transform: rotatex(0deg) translatez(136px); -moz-transform: rotatex(0deg) translatez(136px); transform: rotatex(0deg) translatez(136px); } #content #main_content #portfolio .item.sml a .content_holder .image_holder .porfolio_image { width: 100%; } #content #main_content #portfolio .item a .text { height: 0; position: absolute; bottom: 0; line-height: 1.5; background: #001f22; text-align: left; color: #fff; font-size: 18px; } #content #main_content #portfolio .item a .text .text_inside { margin: 40px 0 0 60px; /*overflow: hidden;*/ } #content #main_content #portfolio .item a .content_holder .text { -webkit-transform: rotatex(-90deg) translatez(282px); -moz-transform: rotatex(-90deg) translatez(282px); transform: rotatex(-90deg) translatez(282px); } #content #main_content #portfolio .item a .content_holder .text .text_inside { width: 340px; height: 526px; } #content #main_content #portfolio .item.med a .content_holder .text { -webkit-transform: rotatey(90deg) translatez(230px); -moz-transform: rotatey(90deg) translatez(230px); transform: rotatey(90deg) translatez(230px); } #content #main_content #portfolio .item.med a .content_holder .text .text_inside { width: 340px; height: 526px; } #content #main_content #portfolio .item.sml a .content_holder .text { -webkit-transform: rotatex(-90deg) translatez(136px); -moz-transform: rotatex(-90deg) translatez(136px); transform: rotatex(-90deg) translatez(136px); } #content #main_content #portfolio .item.sml a .content_holder .text .text_inside { width: 340px; height: 227px; } html.ie #content #main_content #portfolio .item a .content_holder .text { height: auto; z-index: 0; } html.ie #content #main_content #portfolio .item a:hover .content_holder .text { z-index: 100; } #content #main_content #portfolio .item a .content_holder .text h3 { font-size: 18px; color: #fff; } #content #main_content #portfolio .item a .content_holder .text .services, #content #main_content #portfolio .item a .content_holder .text .industry { margin: 10px 0 0; width: 50%; float: left; font-size: 14px; } #content #main_content #portfolio .item a .content_holder .text .services span, #content #main_content #portfolio .item a .content_holder .text .industry span { display: block; } #content #main_content #portfolio .item a .content_holder .text h4 { color: #fff; margin: 0; font-size: 14px; text-decoration: underline; text-transform: uppercase; letter-spacing: 1px; } #content #main_content #portfolio .item a .content_holder .text .body { } #content #main_content #portfolio .item a .content_holder .text .body p { line-height: 24px; } #content #main_content #portfolio .item.sml a .content_holder .text .body p { font-size: 16px; line-height: 20px; } .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; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-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; -ms-transition-property: -ms-transform, opacity; -o-transition-property: -o-transform, 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; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; } .feature { background: #F1F5F6 url(../img/dark_grey_bg.jpg) left top repeat; width: 100%; height: 746px; /*height: 586px;*/ position: fixed; top: 0; left: 0; z-index: 1; /*margin: 160px 0 -160px 0;*/ text-align: center; } .feature .feature_inside { position: absolute; width: 100%; height: 100%; } .feature .feature_inside .feature_text p { color: #fff; font-family: "futura-pt", Helvetica, Arial, sans-serif; font-size: 34px; line-height: 40px; font-weight: bold; text-shadow: 2px 3px 0 rgba(7,7,7,.25); margin: 250px 0 0 0; } .feature .feature_inside .feature_image { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center bottom; } .feature .feature_inside .feature_image.full_width { background-size: cover;-ms-behavior: url(/backgroundsize.min.htc); } contain #content #main_content #blog { position: relative; margin: 40px 0 0 0; } #content #main_content #blog .left_column { float: left; width: 193px; font-size: 12px; color: #414042; text-align: center; } #content #main_content #blog .right_column { float: right; width: 747px; } #content #main_content #blog .right_column #all_tags { float: right; margin: 0 0 20px 0; } #content #main_content #blog .right_column #all_tags select { background: url(../img/browse_arrow.png) 93% center no-repeat #037ebe; -webkit-appearance: none; -moz-appearance: none; border: none; display: block; height: 50px; line-height: 50px; padding: 0 50px 0 20px; background-color: #0087ce; color: #fff; font-size: 18px; font-weight: bold; width: 100%; } #content #main_content #blog .right_column #all_tags a.browse_tags span { float: left; } #content #main_content #blog .right_column #all_tags a.browse_tags b { display: block; width: 22px; height: 14px; background: url(../img/browse_arrow.png) 0px 0px no-repeat; float: right; margin: 17px 0 0 50px; padding: 0; } #content #main_content #blog .right_column #all_tags a:hover { background-color: #009bed; } #content #main_content #blog .right_column #all_tags a.active { } #content #main_content #blog .right_column #all_tags a.active:hover { background-color: #009bed; } #content #main_content #blog .right_column #all_tags a b { display: block; padding: 0px 10px 0px 10px; } #content #main_content #blog .right_column #all_tags ul.tags { position: absolute; top: 0; clear: both; width: auto; min-width: 180px; float: left; margin: 50px 0 0 0; background: #0087ce; padding: 0; z-index: 40; display: none; } #content #main_content #blog .right_column #all_tags ul.tags li { list-style: none; margin: 0; } #content #main_content #blog .right_column #all_tags ul.tags li a { float: none; display: block; background: none; border: none; font-size: 16px; font-weight: bold; height: 30px; padding: 10px 20px; line-height: 30px; margin: 0; text-decoration: none; color: #fff; } #content #main_content #blog .right_column #all_tags ul.tags li a:hover { background-color: #009bed; } #content #main_content #blog .right_column .blogtag_info { clear: both; overflow: hidden; -webkit-box-shadow: 0px 0px 0px 1px rgba(204,204,204,1); -moz-box-shadow: 0px 0px 0px 1px rgba(204,204,204,1); box-shadow: 0px 0px 0px 1px rgba(204,204,204,1);; margin: 0 0 40px; padding: 20px; } #content #main_content #blog .right_column .blogtag_left { float: left; width: 90px; margin: 0 10px 0 0; height: 90px; } #content #main_content #blog .right_column .blogtag_right { float: right; width: 600px; } #content #main_content #blog .right_column .showing { float: left; line-height: 50px; font-size: 18px; font-weight: bold; margin: 0 0 0 20px; } #content #main_content #blog .right_column .pagination { float: right; line-height: 50px; font-size: 18px; font-weight: bold; margin: 0 20px; } #content #main_content #blog .right_column .pagination span { margin: 0 10px; } #content #main_content #blog .post { position: relative; margin: 0 0 60px 0; } #content #main_content #blog .post .left_column .avatar { position: relative; margin: 0 auto 20px auto; width: 100px; height: 100px; } #content #main_content #blog .post .left_column .avatar a { position: relative; display: block; width: 100px; height: 100px; overflow: hidden; } #content #main_content #blog .post .left_column .avatar img { position: absolute; line-height: 0; left: 0; top: 0; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } #content #main_content #blog .post.single .left_column .avatar .date { cursor: default; } #content #main_content #blog .post .left_column .avatar .date { position: relative; top: 0; left: 0; width: 100px; height: 88px; padding: 6px 0; background: rgba(0,121,194,0.8); color: #fff; font-weight: bold; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } #content #main_content #blog .post .left_column .avatar .date .month { position: relative; text-align: center; display: block; font-size: 18px; line-height: 18px; text-transform: uppercase; margin: 20px 0 0 0; } #content #main_content #blog .post .left_column .avatar .date .day_year { text-align: center; display: block; font-size: 24px; line-height: 28px; } #content #main_content #blog .post .left_column .avatar .date .year { font-size: 16px; line-height: 18px; } #content #main_content #blog .post .left_column a.backto_blog { display: block; position: relative; top: 0; left: 0; width: 100px; height: 40px; padding: 30px 0; background: rgba(0,0,0,0.8); color: #fff; font-weight: bold; font-size: 14px; line-height: 40px; margin: 40px auto; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } #content #main_content #blog .post .left_column a.backto_blog:hover { background: rgba(0,121,194,1); } #content #main_content #blog .post .left_column #tags { } #content #main_content #blog .post .left_column #tags .tag { margin: 0 0 3px 0; } #content #main_content #blog .post .left_column #tags .tag a { color: #999; padding: 3px; display: block; font-weight: bold; font-style: italic; } #content #main_content #blog .post .left_column #tags .tag a:hover { background-color: #0087ce; } #content #main_content #blog .post .right_column { background-color: #fff; -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 2px 2px rgba(0,0,0,.2); box-shadow: 0 2px 2px rgba(0,0,0,.2); } #content #main_content #blog .post .right_column .post_content { padding: 40px; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } #content #main_content #blog .post .right_column .post_content h3 { font-family: "futura-pt", Helvetica, Arial, sans-serif; font-size: 24px; font-weight: bold; } #content #main_content #blog .post .right_column .post_content h3 a { color: #001f21; } #content #main_content #blog .post .right_column .post_content h3 a:hover { color: #0087ce; } #content #main_content #blog .post .right_column .post_content img { float: right; margin: 0 0 10px 20px; } #content #main_content #blog .post .right_column .post_content p { } #content #main_content #blog .post .right_column .post_content p.read_more { margin: 0; } #content #main_content #blog .post .right_column .post_content p.read_more a { color: #001f21; font-weight: bold; } #content #main_content #blog .post .right_column .post_content p.read_more a:hover { color: #0087ce; } #content #main_content #blog .post .right_column #comments { padding: 40px; } #content #main_content #blog .post .right_column #user_comments { padding: 40px; } .post_nav { position: fixed; z-index: 300; top: 55%; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .post_nav a { top: 0; margin-top: 0px; width: 220px; font-size: 14px; display: block; color: #fff; } .post_nav.next { left: -180px; } .post_nav.prev { right: -180px; } .post_nav.next a { left: 0px; padding-left: 10px; } .post_nav.prev a { right: 0px; padding-right: 10px; } .post_nav a .button { border: 1px solid #ededed; font-weight: bold; letter-spacing: 2px; padding: 16px 15px 14px 15px; background-color: #0087ce; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .post_nav.next a .button { text-align: right; padding-right: 55px;background-color: #0087ce; } .post_nav.prev a .button { padding-left: 55px; } .post_nav a .button b { display: block; width: 23px; height: 22px; position: absolute; top: 17px; z-index:200; } .post_nav.next a .button b { background: url(../img/next_arrow.png) center center no-repeat; right: 15px; } .post_nav.prev a .button b { background: url(../img/prev_arrow.png) center center no-repeat; left: 15px; } .post_nav a .title { margin: 10px; color: #1d1d1d; } .post_nav.next a .title { text-align: right; margin-right: 60px; margin-left: 20px; } .post_nav.prev a .title { margin-left: 60px; margin-right: 20px; } .post_nav.next:hover { left: 0px; } .post_nav.prev:hover { right: 0px; } #content #main_content #contact_form .more_questions { } #content #main_content #contact_form .more_questions a { display: block; font-weight: bold; font-size: 30px; } #content #main_content #contact_form #more_info { } #content #main_content #contact_form #more_info #looking_for { margin: 30px 0 60px 0; } #content #main_content #contact_form #more_info #looking_for a.looking_for { display: block; float: left; width: 100%; text-align: center; margin: 30px 0; font-weight: bold; } #content #main_content #contact_form #more_info #looking_for a.looking_for.active, #content #main_content #contact_form #more_info #looking_for a.looking_for:hover { color: #6F7275; } #content #main_content #contact_form #more_info #looking_for a.looking_for span { display: block; margin: 0 0 20px 0; width: 100%; height: 60px; opacity: 0.65; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; transition: all .3s ease-out; } #content #main_content #contact_form #more_info #looking_for a.looking_for.active span, #content #main_content #contact_form #more_info #looking_for a.looking_for:hover span { opacity: 1; } #content #main_content #contact_form #more_info #looking_for a.looking_for#website span { background: url(../img/icon_website.png) center top no-repeat; background-size: contain; } #content #main_content #contact_form #more_info #looking_for a.looking_for#mobile span { background: url(../img/icon_mobile.png) center top no-repeat; background-size: contain; } #content #main_content #contact_form #more_info #looking_for a.looking_for#corp_id span { background: url(../img/icon_branding.png) center top no-repeat; background-size: contain; } #content #main_content #contact_form #more_info #looking_for .looking_for_info { width: 32%; margin: 0 2% 0 0; float: left; } #content #main_content #contact_form #more_info #looking_for .looking_for_info#website { } #content #main_content #contact_form #more_info #looking_for .looking_for_info#mobile { } #content #main_content #contact_form #more_info #looking_for .looking_for_info#corp_id { margin: 0; } #content #main_content #contact_form #more_info #looking_for .looking_for_info .inner { clear: both; } #content #main_content #contact_form #more_info #looking_for .looking_for_info input.text { width: 90%; padding: 10px 5%; margin: 0; } #content #main_content #contact_form #more_info #looking_for .looking_for_info textarea { width: 90%; padding: 10px 5%; margin: 0; } #content #main_content #contact_form #more_info #looking_for .looking_for_info .row label { width: 90%; padding: 10px 5%; margin: 0; } #content #main_content #contact_form #more_info #looking_for .looking_for_info .select_toggle { width: 100%; margin: 0; } #content #main_content #contact_form #more_info #looking_for .looking_for_info .select_toggle a { width: 90%; padding: 0 5%; } #content #main_content #contact_form #more_info #looking_for .looking_for_info ul.select { width: 90%; padding: 0 5%; border-left: none; border-right: none; margin: 0; } #top_footer { position: relative; width: 100%; padding: 60px 0; background: #F1F5F6 url(../img/dark_grey_bg.jpg) left top repeat; z-index: 2; text-align: center; } body.home #top_footer { display: none; } #top_footer p { font-family: Helvetica, Arial, sans-serif; font-size: 30px; color: #494949; margin-bottom: 50px; font-weight: bold; line-height: 1.4; } #top_footer a.button { display: inline-block; background-color: #2d2d2d; color: #fff; font-family: Helvetica, Arial, sans-serif; font-size: 24px; font-weight: bold; text-shadow: 1px 0 0 #8a8a8a; padding: 20px 40px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-box-shadow: 2px 0 0 rgba(179,179,179,.75); -moz-box-shadow: 2px 0 0 rgba(179,179,179,.75); box-shadow: 2px 0 0 rgba(179,179,179,.75); background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmVmZiIgc3RvcC1vcGFjaXR5PSIwLjE0Ii8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); background-image: -moz-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 100%); background-image: -o-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 100%); background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 100%); background-image: linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 100%); } #top_footer a.button:hover { background-color: #444; } #top_footer .or { position: relative; display: inline-block; width: 46px; height: 33px; background: url(../img/footer_or.jpg); text-indent: -10000px; overflow: hidden; line-height: 40px; margin: 0 30px; } #footer { background: #001f22; position: relative; z-index: 1; padding: 40px 0; color: #b5bec1; font-family: "brandon-grotesque", sans-serif; margin-bottom: 400px; text-align: center; line-height: 24px; font-size: 14px; -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.5); -moz-box-shadow: 0 0 5px 0 rgba(0,0,0,0.5); box-shadow: 0 0 5px 0 rgba(0,0,0,0.5); } body.home #footer { background: #F1F5F6 url(../img/grey_bg.jpg) left top repeat; color: #7C8083; } #footer .container { width: 650px; } #footer #footer_left { float: left; width: 200px; text-transform: uppercase; } #footer #footer_left a { color: #7C8083; } #footer #footer_middle { float: left; width: 250px; font-family: Helvetica, Arial, sans-serif; } #footer #footer_middle h3 { width: 100%; height: 37px; background: url(../img/bc_footer.png) center bottom no-repeat; text-indent: -10000px; overflow: hidden; margin: 5px 0 30px 0; } body.home #footer #footer_middle h3 { background-position: center top; } #footer #footer_middle a { display: inline-block; margin: 0 5px; width: 28px; height: 24px; background: url(../img/social_icons.png) left bottom; text-indent: -10000px; overflow: hidden; opacity: 1; } body.home #footer #footer_middle a { background-position: left top; } #footer #footer_middle a.googleplus { background-position: 30px bottom; } body.home #footer #footer_middle a.googleplus { background-position: 30px top; } #footer #footer_middle a.facebook { background-position: 65px bottom; } body.home #footer #footer_middle a.facebook { background-position: 65px top; } #footer #footer_middle a:hover { opacity: 0.8; } #footer #footer_right { float: right; width: 200px; } #map_holder { width: 100%; height: 400px; position: fixed; bottom: 0; left: 0; z-index: 0; overflow: hidden; } #map_holder #map { width: 100%; height: 400px; z-index: 0; } #content #main_content .article .stack { width: 80%; margin: 50px auto 0; overflow:hidden; padding:0; } #content #main_content .article .stack li { width: 40%; margin: 0 5% 40px; display:block; float:left; text-align:center; } #content #main_content .article .stack li p { font-size: 0.9em; line-height: 1.5em; } .gallery { } .gallery .photo_row { width: 740px; height: 240px; margin-left: -20px; } .gallery .photo_row .photo { position: relative; width: 246px; height: 246px; float: left; margin: 0; } .gallery .photo_row .photo.first { margin-left: 0; } .gallery .photo_row .photo a.enlarge { position: absolute; text-decoration: none; display: block; line-height: 0; padding: 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; opacity: 1.0 !important; } .gallery .photo_row .photo a.enlarge:hover { background: #0065a4; display: block; line-height: 0; z-index: 20; -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); -moz-box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); opacity: 1.0 !important;} .gallery .photo_row .photo a.enlarge img { position: relative; z-index: 1; } .gallery .photo_row .photo a.enlarge p.caption { font-family: parisplus-std, Helvetica, Arial, sans-serif; position: relative; display: none; line-height: 20px; color: #fff; z-index: 99; margin: 20px 0 0 0; } .gallery .photo_row .photo a.enlarge:hover p.caption { display: block; } #content #main_content .article .gallery .photo_row .photo a:hover { opacity: 1.0 !important; } .gallery_count { display: block; float: left; width: 100px; /*margin: -49px 0px 0px 528px;*/ /*margin: 2px 0px 0px -807px;*/ margin: 0px; text-align: right; color: #0065a4; font-size: 18px; font-family: parisplus-std, Helvetica, Arial, sans-serif; position: relative; top: -199px; left: -107px; } .gallery_slide { width: 642px; display: block; background-color: #f4f4f4; border: 1px solid #e9e9e9; position: relative; margin: 10px auto 0px auto; padding: 11px 11px 7px 11px; } .gallery_slide .gallery_row { width: 642px; margin: 0 auto; float: left; height: 216px; } .gallery_slide .gallery_row .photo { float: left; margin: 0px 6px 6px 6px; position: relative; display: block; width: 210px; height: auto; } .gallery_slide .gallery_row .photo .caption { display: none; color: #0065a4; } .gallery_slide .gallery_row .photo .enlarge { top: 0; left: 0; display: block; width: 200px; height: 200px; border: 5px solid #fff; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; background: #E9E9E9; opacity: 1.0 !important; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .gallery_slide .gallery_row .photo .enlarge:hover { position: absolute; height: auto; z-index:999; border-color: #0065a4; opacity: 1.0 !important; } .gallery_slide .gallery_row .photo .enlarge:hover .caption { display: block; padding: 0px 10px; margin: 15px 0px 10px; line-height: 18px; } .gallery_slide .gallery_row .photo.first, .gallery_slide .gallery_row .photo.last { margin: 0px 0px 6px 0px; } .gallery_slide .gallery_row .photo img { display: block; } /*Staff*/ /* Staff Rows of 5 */ /* Use this CSS for rows of 5, otherwise comment out and use the "Staff Rows of 3 or 4" css that is commmented out further below.*/ /* INSTRUCTIONS: Within articles_loop.php change the row count from 3 or 4 to 5. Log into WG and refresh the backend page to clear the cache for the change to take effect.*/ body.about-us .container { width: 100%; } body.about-us #header .container { width: 940px; } body.about-us #fixed_header .container { max-width: 940px; } .staff .row{ width:98%; padding:60px 0 0 2%; text-align:center; background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e7e6ec), color-stop(100%, #cbccd0)); background-image:-webkit-linear-gradient(#e7e6ec,#cbccd0); background-image:-moz-linear-gradient(#e7e6ec,#cbccd0); background-image:-o-linear-gradient(#e7e6ec,#cbccd0); background-image:linear-gradient(#e7e6ec,#cbccd0) } @media screen and (max-width: 960px){ .staff { margin-left: -6%; } .staff .row{ padding:30px 0 0 7% } } @media screen and (max-width: 770px){ body.about-us { overflow-x: hidden; } .staff { width: 112% } .staff .row{ width: 100%; padding:0 } } .staff .row figure.member{ width:297px; margin:0 -54px 0 -58px; display:inline-block; position:relative } @media screen and (max-width: 960px){ body.about-us #header .container { width: 90%; } .staff .row figure.member{ width:236px } } @media screen and (max-width: 840px){ body.about-us #header .container { width: 100%; } } @media screen and (max-width: 770px){ .staff .row figure.member{ width:100%; margin:0; padding:60px 0 0; display:block; background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e7e6ec), color-stop(100%, #cbccd0)); background-image:-webkit-linear-gradient(#e7e6ec,#cbccd0); background-image:-moz-linear-gradient(#e7e6ec,#cbccd0); background-image:-o-linear-gradient(#e7e6ec,#cbccd0); background-image:linear-gradient(#e7e6ec,#cbccd0) } } .staff .row figure.member figcaption{ width:277px; height:61px; padding:121px 0 0 38px; text-align:left;background:url(../img/info-bg.png) no-repeat 0 0; position:absolute; left:0; bottom:0; opacity:0; -webkit-transform:translate(15px, 15px); -moz-transform:translate(15px, 15px); -ms-transform:translate(15px, 15px); transform:translate(15px, 15px); -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; backface-visibility:hidden; -webkit-transition:-webkit-transform 0.3s, opacity 0.3s; -moz-transition:-moz-transform 0.3s, opacity 0.3s; transition:transform 0.3s, opacity 0.3s} @media screen and (min-width: 770px) and (max-width: 960px){ .staff .row figure.member figcaption{ height:49px; width:261px; padding:109px 0 0 14px } } .staff .row figure.member figcaption p.name{ font-weight:700 } .staff .row figure.member figcaption p{ font-size:16px; line-height:20px; margin: 0; color:#021823 } .row{filter:none} .staff .row figure.member:hover figcaption,.staff .row figure.member:hover figure.cs-hover figcaption{ opacity:1; bottom:0; -webkit-transform:translate(0px, 0px); -moz-transform:translate(0px, 0px); -ms-transform:translate(0px, 0px); transform:translate(0px, 0px) } @media screen and (max-width: 770px){ .staff .row figure.member figcaption,.staff .row figure.member figure.cs-hover figcaption{ opacity:1; bottom:0; -webkit-transform:translate(0px, 0px); -moz-transform:translate(0px, 0px); -ms-transform:translate(0px, 0px); transform:translate(0px, 0px) } } .staff .row figure.member img{ display:inline-block; vertical-align: bottom;position:relative } @media screen and (max-width: 960px){ .staff .row figure.member img{ max-height:232px } } @media screen and (max-width: 770px){ .staff .row figure.member img{ max-height:none;max-width:100% } } /* Staff Rows of 4 */ /* Use this CSS for rows of 4, otherwise comment out and use the "Staff Rows of 3" css that is commmented out further below.*/ /* INSTRUCTIONS: Within articles_loop.php change the row count from 3 to 4, "". Log into WG and refresh the backend page to clear the cache for the change to take effect.*/ /* body.about-us .container { width: 100%; } body.about-us #header .container { width: 940px; } .staff .row{ width:98%; padding:60px 0 0 2%; text-align:center; background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e7e6ec), color-stop(100%, #cbccd0)); background-image:-webkit-linear-gradient(#e7e6ec,#cbccd0); background-image:-moz-linear-gradient(#e7e6ec,#cbccd0); background-image:-o-linear-gradient(#e7e6ec,#cbccd0); background-image:linear-gradient(#e7e6ec,#cbccd0) } @media screen and (max-width: 960px){ .staff { margin-left: -6%; } .staff .row{ padding:30px 0 0 7% } } @media screen and (max-width: 770px){ body.about-us { overflow-x: hidden; } .staff { width: 112% } .staff .row{ width: 100%; padding:0 } } .staff .row figure.member{width:315px; margin:0 -54px 0 -58px; display:inline-block; position:relative } @media screen and (max-width: 960px){ body.about-us #header .container { width: 90%; } .staff .row figure.member{ width:236px } } @media screen and (max-width: 840px){ body.about-us #header .container { width: 100%; } } @media screen and (max-width: 770px){ .staff .row figure.member{ width:100%; margin:0; padding:60px 0 0; display:block; background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e7e6ec), color-stop(100%, #cbccd0)); background-image:-webkit-linear-gradient(#e7e6ec,#cbccd0); background-image:-moz-linear-gradient(#e7e6ec,#cbccd0); background-image:-o-linear-gradient(#e7e6ec,#cbccd0); background-image:linear-gradient(#e7e6ec,#cbccd0)} } .staff .row figure.member:hover figcaption,.staff .row figure.member:hover figure.cs-hover figcaption{ opacity:1; bottom:0; -webkit-transform:translate(0px, 0px); -moz-transform:translate(0px, 0px); -ms-transform:translate(0px, 0px); transform:translate(0px, 0px) } .staff .row figure.member img{ display:inline-block; vertical-align: bottom;position:relative } @media screen and (max-width: 960px){ .staff .row figure.member img{ max-height:232px } } @media screen and (max-width: 770px){ .staff .row figure.member img{ max-height:none;max-width:100% } } .staff .row figure.member figcaption{ width:277px; height:61px; padding:121px 0 0 38px; text-align:left;background:url(../img/info-bg.png) no-repeat 0 0; position:absolute; left:0; bottom:0; opacity:0; -webkit-transform:translate(15px, 15px); -moz-transform:translate(15px, 15px); -ms-transform:translate(15px, 15px); transform:translate(15px, 15px); -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; backface-visibility:hidden; -webkit-transition:-webkit-transform 0.3s, opacity 0.3s; -moz-transition:-moz-transform 0.3s, opacity 0.3s; transition:transform 0.3s, opacity 0.3s} @media screen and (min-width: 770px) and (max-width: 960px){ .staff .row figure.member figcaption{ height:49px; width:261px; padding:109px 0 0 14px } } .staff .row figure.member figcaption p.name{ font-weight:700 } .staff .row figure.member figcaption p{ font-size:16px; line-height:20px; margin: 0; color:#021823 } .row{filter:none} */ /*Staff Rows of 3*/ /* Use this CSS for rows of 3, otherwise comment out and use the "Staff Rows of 4" css that is commmented out above.*/ /* INSTRUCTIONS: Within articles_loop.php change the row count from 4 to 3 "". Log into WG and refresh the backend page to clear the cache for the change to take effect.*/ /* body.about-us .container { width: 100%; } body.about-us #header .container { width: 940px; } .staff .row{ width:98%; padding:60px 0 0 2%; text-align:center; background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e7e6ec), color-stop(100%, #cbccd0)); background-image:-webkit-linear-gradient(#e7e6ec,#cbccd0); background-image:-moz-linear-gradient(#e7e6ec,#cbccd0); background-image:-o-linear-gradient(#e7e6ec,#cbccd0); background-image:linear-gradient(#e7e6ec,#cbccd0) } @media screen and (max-width: 960px){ .staff { margin-left: -6%; } .staff .row{ padding:30px 0 0 7% } } @media screen and (max-width: 670px){ body.about-us { overflow-x: hidden; } .staff { width: 112% } .staff .row{ width: 100%; padding:0 } } .staff .row figure.member{width:315px; margin:0 0 0 -40px; display:inline-block; position:relative } @media screen and (max-width: 960px){ body.about-us #header .container { width: 90%; } .staff .row figure.member{ width:248px } } @media screen and (max-width: 840px){ body.about-us #header .container { width: 100%; } } @media screen and (max-width: 670px){ .staff .row figure.member{ width:100%; margin:0; padding:60px 0 0; display:block; background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e7e6ec), color-stop(100%, #cbccd0)); background-image:-webkit-linear-gradient(#e7e6ec,#cbccd0); background-image:-moz-linear-gradient(#e7e6ec,#cbccd0); background-image:-o-linear-gradient(#e7e6ec,#cbccd0); background-image:linear-gradient(#e7e6ec,#cbccd0)} } .staff .row figure.member:hover figcaption,.staff .row figure.member:hover figure.cs-hover figcaption{ opacity:1; bottom:0; -webkit-transform:translate(0px, 0px); -moz-transform:translate(0px, 0px); -ms-transform:translate(0px, 0px); transform:translate(0px, 0px) } .staff .row figure.member img{ display:inline-block; vertical-align: bottom;position:relative } @media screen and (max-width: 960px){ .staff .row figure.member img{ max-height:232px } } @media screen and (max-width: 670px){ .staff .row figure.member img{ max-height:none;max-width:100% } } .staff .row figure.member figcaption{ width:277px; height:61px; padding:121px 0 0 38px; text-align:left;background:url(../img/info-bg.png) no-repeat 0 0; position:absolute; left:0; bottom:0; opacity:0; -webkit-transform:translate(15px, 15px); -moz-transform:translate(15px, 15px); -ms-transform:translate(15px, 15px); transform:translate(15px, 15px); -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; backface-visibility:hidden; -webkit-transition:-webkit-transform 0.3s, opacity 0.3s; -moz-transition:-moz-transform 0.3s, opacity 0.3s; transition:transform 0.3s, opacity 0.3s} @media screen and (min-width: 670px) and (max-width: 960px){ .staff .row figure.member figcaption{ height:49px; width:261px; padding:109px 0 0 14px } } .staff .row figure.member figcaption p.name{ font-weight:700 } .staff .row figure.member figcaption p{ font-size:16px; line-height:20px; margin: 0; color:#021823 } .row{filter:none} */