/* Theme Name: UrbanRiver Theme URI: Author: Robert Cummings @ Urban River Author URI: http://www.robertcummings.co.uk/ Description: This theme was built for UrbanRiver by Robert Cummings @ Urban River Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: Bespoke, Text Domain: */ /************************************************************************************************************************ * CSS RESET STYLES ************************************************************************************************************************/ body, div, dl, dt, dd, li, pre, form, fieldset, input, textarea, p, blockquote, th, td, button { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-size: 100%; font-weight: normal; } address, caption, cite, code, dfn, em, strong, var { font-style: normal; font-weight: normal; } ol, ul { list-style: none; margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } caption, th { text-align: left; font-weight: normal; font-style: normal; } acronym, abbr, fieldset, img { border: 0;} :focus { outline: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } /************************************************************************************************************************ * GENERAL STYLES ************************************************************************************************************************/ .youtubeContainer { position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; margin-bottom: 1em; } .youtubeContainer iframe { position:absolute; top:0; left:0; width:100%; height:100%; } ::-webkit-selection { text-shadow: none; color: white; background: #726296; } ::-moz-selection { text-shadow: none; color: white; background: #726296; } ::-o-selection { text-shadow: none; color: white; background: #726296; } ::selection { text-shadow: none; color: white; background: #726296; } body { font-family: 'Lato', sans-serif; font-weight: 400; color: #3f3f3f; font-size: 0.875em; background-color: #ffffff; -webkit-font-smoothing: antialiased; } h1 { font-size: 2.8em; color: #4c3d70; } h2 { font-size: 2.5em; color: #4c3d70; margin-bottom: 0.3em; } h3 { font-size: 2.1em; color: #4c3d70; } h4 { font-size: 1.8em; color: #4c3d70; } h5 { font-size: 1.5em; color: #4c3d70; } h6 { font-size: 1.2em; color: #4c3d70; } p { margin-bottom: 1.563em; line-height: 1.563em; color: #3f3f3f; } p.read-more { margin-bottom: 0; text-align: right; } p.button-wrapper-overlay { text-align: center; margin-bottom: 0; } p.button-wrapper-overlay a { color: #4c3d70; font-size: 1.6em; font-weight: 400; padding: 1.2em 1.4em; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; border: 1px solid #4c3d70; display: inline-block; text-transform: uppercase; } p.button-wrapper-overlay a:hover { background-color: #4c3d70; color: #ffffff; } img { max-width: 100%; height: auto; } img.alignright { width: auto; max-width: 50%; float: right; margin: 1em 0 1em 1em; } img.alignleft { width: auto; max-width: 50%; float: left; margin: 1em 1em 1em 0; } img.aligncenter { display: block; width: auto; margin: 1em auto; } img.alignnone { display: block; margin: 1em 1em 1em 0; } img.p-img { display: inline-block; margin: 0; } .hide { display: none; } .clear { clear: both; } .text-center { text-align: center; } .text-right { text-align: right; } .bold, strong { font-weight: bold; } .italics, em { font-style: italic; } a { color: #4c3d70; text-decoration: none; } a:hover { color: #000000; text-decoration: none; } .mb0 { margin-bottom: 0 !important; } #mobile-navigation { position: fixed; } #mobile-navigation a { color: #FFFFFF; } .mm-page { /*background-color: #ffffff!important;*/ text-align: left; } .container { padding: 0; max-width: 1200px; width: 100%; margin: 0 auto; } .single-thought .container { max-width: 700px; } .wrapper { width: 100%; padding: 3em 0; overflow: hidden; } .wrapper.white { background-color: #ffffff; } .wrapper.grey { background-color: #e8e9ea; } .wrapper.pale { background-color: #fbfbfb; } .top-categories { z-index: 10; } .sticky-wrapper, .top-categories, .transition, .button-wrapper-overlay a, .service-portfolio-button a, .home ul#home-port li a .port-logo, ul#work-port li a .port-logo, input, .work-nav-links li a, #site-header #site-navigation ul li a, #site-footer .quick-links ul li a { -webkit-transition: all ease .2s; -moz-transition: all ease .2s; -ms-transition: all ease .2s; -o-transition: all ease .2s; transition: all ease .2s; } #content article { display: inline-block; } #content.left.with-sidebar { width: 73%; float: left; border-right: 1px solid #cccccc; padding-right: 3%; margin-bottom: 3em; } #content.right.with-sidebar { width: 73%; float: right; border-left: 1px solid #cccccc; padding-left: 3%; margin-bottom: 3em; } #content.without-sidebar { width: 100%; display: block; } #content ol, #content ul { margin-bottom: 1.3em; } .parent-pageid-10 #content ul li:before { content: "\f111 "; font-family: 'FontAwesome'; color: #4c3d70; font-size: 0.6em; margin-bottom: 1em; display: inline-block; vertical-align: top; margin-right: 1.8em; position: absolute; top: 4px; left: 0; } .parent-pageid-10 #content ul li { position: relative; font-size: 16.8px; padding-left: 1.3em; } @media all and (max-width: 767px) { .parent-pageid-10 #content ul li { width: 100%; margin: 0; } .parent-pageid-10 #content .service-left ul { margin-bottom: 0; } } #content ol li, #content ul li { padding: 0.2em 0; font-size: 1.2em; line-height: 1.6em; } #content ol { margin-left: 1.7em; } #content ul { margin-left: 1.3em; } .parent-pageid-10 #content ul { margin-left: 0; font-size: 0px; margin-bottom: 20px; } #content ol li { list-style-type: decimal; } #content ul li { list-style-type: none; } #content h1 { margin-bottom: 0.4em; } #content h2 { margin-bottom: 0.4em; } #content h3 { margin-bottom: 0.4em; } #content h4 { margin-bottom: 0.4em; } #content h5 { margin-bottom: 0.4em; } #content h6 { margin-bottom: 0.4em; } #content p { font-size: 1.2em; line-height: 1.75em; } .sidebar.left { width: 27%; float: left; padding-right: 3%; } .sidebar.right { width: 27%; float: right; padding-left: 3%; } .sidebar { font-size: 1.2em; line-height: 2em; } #breadcrumb { margin: 1em 0 1.5em; font-size: 1.2em; } #breadcrumb a { color: #4c3d70; } #breadcrumb a:hover { color: #3f3f3f; } .navigation ol.tw-pagination { text-align: center; } .navigation ol.tw-pagination li { list-style-type: none; color: #3f3f3f; line-height: 2.1; } .navigation ol.tw-pagination li a { font-size: 1.2em; font-weight: 400; margin-right: 20px; padding: 0; width: 35px; height: 35px; display: inline-block; -webkit-border-radius: 35px; -moz-border-radius: 35px; border-radius: 35px; border: none; color: #595959; background: white; -webkit-transition: all ease .2s; -moz-transition: all ease .2s; -ms-transition: all ease .2s; -o-transition: all ease .2s; transition: all ease .2s; margin-top: 10px; } .navigation ol.tw-pagination li a:hover { color: #ffffff; background-color: #acacac; } .navigation ol.tw-pagination li .current { font-size: 1.2em; font-weight: 400; padding: 0; width: 35px; height: 35px; -webkit-border-radius: 35px; -moz-border-radius: 35px; border-radius: 35px; border: none; color: #ffffff; background-color: #acacac; margin-right: 20px; display: inline-block; margin-top: 10px; } .navigation ol.tw-pagination li .title { display: none; } .navigation ol.tw-pagination li:last-child a { margin-right: 0; } @media all and (max-width: 700px) { .navigation ol.tw-pagination li:first-child { display: block; float: none; } } .post { margin-bottom: 2.5em; background-color: #4c3d70; background-color: rgba(77, 61, 112, 0.65); } .post a { display: inline-block; vertical-align: bottom; } .post:hover { background-color: rgba(77, 61, 112, 0.9) } .post.last-post { margin-bottom: 0; } .post .post-image { float: left; width: 27%; } .post .post-image img { display: block; } .post .post-content { float: left; width: 73%; padding: 2% 2.5%; } .post .post-content-full { width: 100%; padding: 2% 2.5%; } .post h3, .post p { color: #fff; } #content .post h3 { margin: 0; } .post p { margin-bottom: 0.8em; } .post .post-date { margin: 0 0 0.6em; padding: 0; } #content .post .post-date p { margin-bottom: 0; font-size: 1em; } .post p.read-more { margin-bottom: 0; } .column-wrapper.percent-1 { margin-left: -1%; } .column-wrapper.percent-2 { margin-left: -2%; } .column-wrapper.percent-3 { margin-left: -3%; } .column-wrapper.percent-4 { margin-left: -4%; } .column-wrapper.percent-5 { margin-left: -5%; } .column-wrapper .column { float: left; margin-bottom: 3em; } .column-wrapper.columns-5 .column { width: 17%; padding: 0 20px; margin-top: 1em; } .column-wrapper.columns-4 .column { width: 25%; } .column-wrapper.columns-3 .column { width: 33.333%; } .column-wrapper.columns-2 .column { width: 50%; } .column-wrapper.columns-4.percent-1 .column, .column-wrapper.columns-3.percent-1 .column, .column-wrapper.columns-2.percent-1 .column { padding-left: 1%; } .column-wrapper.columns-4.percent-2 .column, .column-wrapper.columns-3.percent-2 .column, .column-wrapper.columns-2.percent-2 .column { padding-left: 2%; } .column-wrapper.columns-4.percent-3 .column, .column-wrapper.columns-3.percent-3 .column, .column-wrapper.columns-2.percent-3 .column { padding-left: 3%; } .column-wrapper.columns-4.percent-4 .column, .column-wrapper.columns-3.percent-4 .column, .column-wrapper.columns-2.percent-4 .column { padding-left: 4%; } .column-wrapper.columns-4.percent-5 .column, .column-wrapper.columns-3.percent-5 .column, .column-wrapper.columns-2.percent-5 .column { padding-left: 5%; } .column-wrapper.columns-1 .column { width: 100%; float: none; display: block; } .column-wrapper .column.column-1 { clear: left; } /*#thoughts .column-wrapper, .touch #home-thoughts.column-wrapper { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; overflow: hidden; } .touch #thoughts .column-wrapper article, .touch #home-thoughts.column-wrapper article { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 33%; float: left; } .touch #thoughts .column-wrapper article a, .touch #home-thoughts.column-wrapper article a { background: white; }*/ p.service-portfolio-button { margin: 2em 0 1em; } p.service-portfolio-button a { color: #4c3d70; font-size: 1.2em; line-height: 1.563em; font-weight: 400; padding: 1em 0.8em; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; border: 1px solid #4c3d70; display: inline-block; text-align: center; text-transform: uppercase; } p.service-portfolio-button a:hover { background-color: #4c3d70; color: #ffffff; } .purple { color: #4c3d70; } input[type=search], input[type=text], select, textarea { -webkit-appearance: none; } .mobile { display: none; } #ur-gmap img { max-width: none; } .mt1 { margin-top: 1em !important; } .mt2 { margin-top: 2em !important; } .mb1 { margin-bottom: 1em !important; } .mb2 { margin-bottom: 2em !important; } .blogHide { display: none; } .home ul#home-port li.port-4, ul#work-port li.port-4 { display: none; } @media only screen and (max-width: 1230px) { .container { width: 94%; margin: 0 auto; } /* Three Column Display */ .column-wrapper.columns-4 .column { width: 33.333%; } .column-wrapper.columns-4 .column.column-1 { clear: none; } .column-wrapper.columns-4 .column.first { clear: left; } #breadcrumb { margin-top: 0; } } @media only screen and (max-width: 1150px) { .home ul#home-port li { width: 50% !important; } } @media only screen and (max-width: 1150px) and (min-width: 706px) { .home ul#home-port li.port-4, ul#work-port li.port-4 { display: list-item; } } @media only screen and (max-width: 705px) { html { -webkit-text-size-adjust: none; /*-webkit-appearance: none;*/ } .container { width: 92%; } .container.mt1 { margin-top: 0 !important; } #content.with-sidebar.left { width: 100%; float: none; display: block; clear: both; border-right: none; padding-right: 0; border-bottom: 1px solid #ccc; margin-bottom: 1em; } #content.with-sidebar.left .content-border { padding: 0; margin: 0; border-right: none; } #content.with-sidebar.right { width: 100%; float: none; display: block; clear: both; border-left: none; padding-left: 0; border-bottom: 1px solid #ccc; margin-bottom: 1em; } #content.with-sidebar.right .content-border { padding: 0; margin: 0; border-left: none; } .sidebar.right { width: 100%; float: none; display: block; clear: both; padding-left: 0; } .sidebar.right .sidebar-padder { padding: 1em 0 0; } .sidebar.left { width: 100%; float: none; display: block; clear: both; } .sidebar.left .sidebar-padder { padding-right: 0; } .alignleft { float: none!important; margin: 0 auto 1em; display: block; max-width: 49%; } .alignright { float: none!important; margin: 0 auto 1em; display: block; max-width: 49%; } .aligncenter { margin: 0 auto 1em; display: block; } img.alignleft, img.alignright { max-width: 100%; } img.alignright { margin-left: 0 !important; } /* Two Column Display */ .column-wrapper.columns-4 .column.first, .column-wrapper.columns-3 .column.column-1 { clear: none; } .column-wrapper.columns-4 .column.odd, .column-wrapper.columns-3 .column.odd { clear: left; } .column-wrapper.columns-4 .column, .column-wrapper.columns-3 .column/*, .touch #thoughts .column-wrapper article, .touch #home-thoughts.column-wrapper article*/ { width: 50%; } .home ul#home-port li { width: 100% !important; } .wrapper { padding: 2em 0; } p.button-wrapper-overlay a { font-size: 1.2em; } p.service-portfolio-button a { font-size: 1em !important; padding: 0.7em !important; } } @media only screen and (max-width: 450px) { .alignleft { max-width: 90%; } .alignright { max-width: 90%; } .column-wrapper.columns-4.override .column, .column-wrapper.columns-3.override .column, .column-wrapper.columns-2.override .column/*, .touch #thoughts .column-wrapper article, .touch #home-thoughts.column-wrapper article*/ { width: 100%; display: block; float: none; clear: left; } .home .wrapper.home-thoughts .home-post .post-image img, .wrapper.all-thoughts .thoughts-post .post-image img { width: 100%; } .blogHide { display: block; } } /************************************************************************************************************************ * HEADER STYLES ************************************************************************************************************************/ #site-header { position: fixed; left: 0; top: 0; width: 100%; z-index: 10; } #site-header.transparent-header { background-color: #4c3d70; background-color: rgba(76, 61, 112, 0.9); } #site-header.solid-header { background-color: #4c3d70; background-color: rgba(76, 61, 112, 1); } #site-header #company-logo { width: 50px; float: left; } #site-header #company-logo img { padding: 13px 0 12px; display: block; } #site-header #site-navigation { float: right; text-align: right; padding-top: 6px; } #site-header #site-navigation ul { text-align: right; } #site-header #site-navigation ul li { display: inline-block; padding: 14px 1.3em 0; } #site-header #site-navigation ul li a:link, #site-navigation ul li a:visited { padding-bottom: 1px; font-weight: 400; color: #ffffff; font-size: 1.2em; text-transform: uppercase; position: relative;display: inline-block;outline: none;text-decoration: none;} #site-header #site-navigation ul li a:hover, #site-navigation ul li a:active, #site-navigation ul li a:focus, #site-navigation ul li a#current { color: #ffffff; } #site-header #site-navigation ul li.last { padding-right: 0; } #site-header #site-navigation ul li a::after { position: absolute; top: 100%; left: 0; width: 100%; height: 1px; background: #9585BA; content: ''; opacity: 0; -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s; -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s; transition: height 0.3s, opacity 0.3s, transform 0.3s; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); transform: translateY(-10px); } #site-header #site-navigation ul li a:hover::after, #site-header #site-navigation ul li a:focus::after, #site-header #site-navigation ul li a#current::after{ height: 2px; opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); } @media only screen and (max-width: 1230px) { #site-header .container, .sticky-wrapper .container { padding: 0; } } /************************************************************************************************************************ * MOBILE HEADER STYLES ************************************************************************************************************************/ @media only screen and (max-width: 705px) { .mobile { display: block; } .non-mobile { display: none; } #close-menu { cursor: pointer; } #mobile-header { background-color: #4c3d70; width: 100%; padding-top: 0.7em; } #mobile-company-logo { float: left; max-width: 64%; display: block; margin-left: 4%; margin-top: 6px; } #mobile-company-logo img { max-width: 38px; } #menu-btn { float: right; margin: 8px 4% 0 0; color: #ffffff; font-size: 1.2em; } #menu-btn:hover { color: #9585BA; } #mobile-shortcuts { clear: both; width: 100%; background-color: #e1e2e3; margin-top: 3.2em; font-weight: 400; text-transform: uppercase; } #mobile-shortcuts p { width: 33.333%; float: left; text-align: center; margin-bottom: 0; font-size: 1.2em; } #mobile-shortcuts p a { display: block; padding: 0.4em 0; color: #4c3d70; background-color: #e1e2e3; } #mobile-shortcuts p a:hover { background-color: #d4d5d7; } #mobile-shortcuts p.first a { border-right: 1px solid #4c3d70; } #mobile-shortcuts p.last a { border-left: 1px solid #4c3d70; } #mobile-search { width: 100%; padding: 0.8em 4%; background: white; border-top: 1px solid #4c3d70; } #mobile-search #mobile-search-form .text-input { float: left; margin: 0 3% 0 0; padding: 8px 10px; width: 67%; font-size: 1.2em; color: #666666; border: 1px solid #4c3d70; background-color: #f8f8f8; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } #mobile-search #mobile-search-form .search-button { float: right; padding: 0.45em 0.9em; width: 28%; font-size: 1.2em; color: #4c3d70; background: #333333; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; border: 1px solid #4c3d70; background-color: transparent; } #mobile-search #mobile-search-form .search-button:hover { cursor: pointer; background-color: #4c3d70; color: #ffffff; } #mobile-navigation { background-color: #2F2D35; } .mm-menu > .mm-list { padding: 0 !important; } #mobile-navigation ul li:after { border-bottom: none; } .mm-list > li:not(.mm-subtitle):not(.mm-label):not(.mm-noresults)::after { border: none; } #mobile-navigation ul li.heading { padding: 13px 5% 12px; text-align: center; font-weight: normal; font-size: 1.3em; color: #fff; } #mobile-navigation ul li.heading i.ur-icon-hamburger { font-size: 15px; } #mobile-navigation ul li a { padding: 1.2em 1em; font-size: 1.1em; text-shadow: none; color: #ffffff; border-top: 1px solid #433A59; border-bottom: none; text-transform: uppercase; } #mobile-navigation ul li a i { margin-right: 7px; } #mobile-navigation ul li a#active, #mobile-navigation ul li a:hover, #mobile-navigation ul li a#sub-active { background: #403C4A; } html.mm-opened .mm-page { box-shadow: none !important; } .mm-list a.mm-subopen { width: 55px !important; } .mm-list a.mm-subopen:after { right: 25px !important; } .mm-list a.mm-subopen + a, .mm-list a.mm-subopen + span { margin-right: 55px !important; } } .mm-list a.mm-subclose { margin-top: 0!important; } .mm-list a.mm-subclose:before { bottom: 70%!important; } /************************************************************************************************************************ * HEADER BANNER STYLES ************************************************************************************************************************/ #header-banner { width: 100%; position: relative; z-index: 5; overflow: hidden; } #header-banner #header-banner-image { height: 700px; } #header-banner #banner-text-wrap { display: table; width: 100%; height: 100%; text-align: center; background-color: rgba(50, 50, 50, 0.32); } @media only screen and (max-width: 620px) { #header-banner #banner-text-wrap { background-color: rgba(50, 50, 50, 0.45); } } .postid-1744 #header-banner #banner-text-wrap, .error404 #header-banner #banner-text-wrap { background-color: transparent; } .error404 #header-banner #header-banner-image { background-image: url('images/404-header.jpg') !important; } #header-banner #banner-text-wrap #banner-text { display: table-cell; vertical-align: middle; padding: 0 1em; } #header-banner #banner-text-wrap #banner-text h1 { font-size: 6.8em; color: #ffffff; font-weight: 700; text-transform: uppercase; } .home #header-banner #banner-text-wrap #banner-text h1 { font-size: 9em; font-weight: 900; } #header-banner #banner-text-wrap #banner-text p { margin-bottom: 0; font-size: 2.7em; color: #ffffff; font-weight: 400; padding: 0 15px; margin-top: 10px; } @media only screen and (min-width: 1401px) { .postid-1744 #header-banner #header-banner-image { background-size: initial !important; background-repeat: no-repeat; background-color: #e1e2e3; } } @media only screen and (max-width: 1400px) { #header-banner #header-banner-image { height: 600px; } } @media only screen and (max-width: 1300px) { #header-banner #header-banner-image { height: 500px; } #header-banner #banner-text-wrap #banner-text h1 { font-size: 5.5em; } .home #header-banner #banner-text-wrap #banner-text h1 { font-size: 7em; } } @media only screen and (max-width: 1000px) { #header-banner #header-banner-image { height: 400px; } #header-banner #banner-text-wrap #banner-text p { font-size: 1.8em; } } @media only screen and (max-width: 800px) { #header-banner #header-banner-image { height: 300px; } .home #header-banner #banner-text-wrap #banner-text h1, #header-banner #banner-text-wrap #banner-text h1 { font-size: 3.5em; } } @media only screen and (max-width: 705px) { #header-banner #banner-text-wrap #banner-text p { font-size: 1.6em; } .single-staff #header-banner #banner-text-wrap #banner-text { vertical-align: bottom; } .single-staff #header-banner #banner-text-wrap #banner-text p { margin: 0 0 10px; font-size: 1.8em; } } @media only screen and (max-width: 650px) { #header-banner #banner-text-wrap #banner-text h1 { font-size: 2.5em; } .home #header-banner #banner-text-wrap #banner-text h1 { font-size: 2.8em; } } @media only screen and (max-width: 620px) { .home #header-banner #header-banner-image { height: 475px; } } @media only screen and (max-width: 340px) { .home #header-banner #header-banner-image { /*height: 290px;*/ } } @media only screen and (max-width: 320px) { .home #header-banner #banner-text-wrap #banner-text h1, #header-banner #banner-text-wrap #banner-text h1 { font-size: 2em; } } @media only screen and (max-width: 300px) { #header-banner #banner-text-wrap #banner-text h1 { font-size: 1.5em; } #header-banner #banner-text-wrap #banner-text p { font-size: 1.2em; } } @media only screen and (max-width: 600px) { .error404 #header-banner #header-banner-image { height: 225px; } } @media only screen and (max-width: 430px) { .error404 #header-banner #header-banner-image { height: 200px; } } @media only screen and (max-width:375px) { .home #header-banner #banner-text-wrap { background-color: none; } } /************************************************************************************************************************ * FOOTER STYLES ************************************************************************************************************************/ #site-footer { background-color: #4c3d70; background-color: rgba(76, 61, 112, 1); } #site-footer .footer-info p { margin-bottom: 1em; font-size: 1em; } #site-footer .footer-info p:last-child { margin-bottom: 0; } #site-footer .footer-info p, #site-footer .footer-info p a, #site-footer .footer-info .fa-ul li, #site-footer .footer-info .fa-ul li a, #site-footer .quick-links ul li a, .footer-info-full-width > a { color: #ffffff; } #site-footer .footer-info p a:hover, #site-footer .footer-info .fa-ul li a:hover, #site-footer .footer-info .social-icons li a:hover, #site-footer .quick-links ul li a:hover, .footer-info-full-width > a:hover { color: #9585BA; } #site-footer .footer-info.column-1 .fa-ul { margin-left: 2.5em; } #site-footer .footer-info.column-2 .fa-ul { margin-left: 2.2em; } #site-footer .footer-info .fa-ul li { margin-bottom: 0.4em; font-size: 1.2em; } #site-footer .footer-info .fa-ul#address li { font-size: 1.2em; line-height: 1.55; } #site-footer .footer-info .fa-ul#address li .fa-li { left: -1.7em; top: 2px; font-size: 1.5em; } #site-footer .footer-info p.enewsletter { margin: 0.7em 0 0.6em; font-size: 1.3em; } #site-footer .footer-info .social-icons { margin-bottom: 0.5em; } #site-footer .footer-info .social-icons li { display: inline-block; margin-right: 0.7em; } #site-footer .footer-info .social-icons li a { font-size: 2.3em; color: #ffffff; } #site-footer .footer-info .social-icons li:last-child { margin-right: 0; } #site-footer .footer-info .social-icons li i.fa-google-plus, #site-footer .footer-info .social-icons li i.fa-facebook { font-size: 0.9em; } #site-footer .footer-info p { margin-bottom: 0.5em; } #site-footer .footer-info p:last-child { margin-bottom: 0; } .footer-info-styling { color: #8980a0; } .footer-info-full-width p { margin-top: 20px; margin-bottom: 10px; } .text-wrap-span { display: block; } .footer-info .fa-ul i { color: #6F5E96; } .footer-info .fa-ul .fa { font-size: 1.3em; } .footer-info-full-width { text-align: center; color: white; } .footer-info-full-width, .footer-info-full-width a { color: #8980a0; } .footer-info-full-width a:hover { color: #746a90; } .footer-duck-section { text-align: center; } .footer-strapline { font-size: 3.571em; font-weight: 300; color: #ffffff; margin-bottom: 0.25em; } .footer-info-large p { display: inline-block; font-size: 1.571em; color: #ffffff; margin: 0 1em; } .mail-link { color: #ffffff; } .mail-link:hover { color: #9585BA; } .footer-green-text { color: #d2de26; font-weight: 400; padding-right: 0.5em; } .column-wrapper.columns-5.percent-5.override.clearfix { margin-left: 0; } .footer-info.column.column-4.even.first.clearfix { width: 25%; } .footer-info.columns-5 .column-4.even.first.clearfix { width: 32%; } .column-5 { text-align: center; } .column-wrapper.columns-5 .column { margin-bottom: 0.5em !important; margin-top: 5px !important; } @media only screen and (min-width: 1111px) { article.footer-info.column.column-1.odd.first.clearfix { width: 18% !important; } article.footer-info.column.column-2.even.second.clearfix { width: 19% !important; } article.footer-info.column.column-4.even.first.clearfix { width: 29% !important; } #site-footer > section > div > section.column-wrapper.columns-5.percent-5.override.clearfix > article.footer-info.column.column-5.odd.second.clearfix { padding-left: 0 !important; } } @media only screen and (max-width: 1111px) and (min-width: 966px) { .column-wrapper.columns-5 .column { padding: 0 20px 0 40px; } } @media only screen and (min-width: 706px) { #site-footer .wrapper { padding: 4em 0 3.2em; } } @media only screen and (max-width: 767px) { #site-footer .footer-info .fa-ul li { margin-bottom: 0.6em; } #site-footer .footer-info .social-icons { margin-bottom: 0.7em; } } /*#site-footer .quick-links ul li { float: left; border-right: 1px solid white; padding-right: 5px; margin-right: 5px; line-height: 1; margin-bottom: 5px; } #site-footer .quick-links ul li a { display: inline-block; } #site-footer .quick-links ul li:last-child { border-right: 0; margin-right: 0; padding-right: 0; } */ @media only screen and (max-width: 1230px) { #site-footer .column-wrapper.columns-4 .column { width: 25%; } #site-footer .column-wrapper.columns-4 .column.first { clear: none; } } @media only screen and (max-width: 1110px) { .footer-strapline { font-size: 3.25em; } .urban-river-duck { width: 160px; } .text-wrap-span { display: inline-block; } #site-footer .column-wrapper.columns-5 .column { width: 33%; } #site-footer .column-wrapper.columns-5 .column.column-4 { width: 40%; margin-left: 80px; } } @media only screen and (max-width: 975px) and (min-width: 901px) { .footer-strapline { font-size: 3em; } .urban-river-duck { width: 150px; } #site-footer .footer-info .social-icons li a { font-size: 2em; } } @media only screen and (max-width: 900px) { .footer-strapline { font-size: 2.75em; } .urban-river-duck { width: 140px; } #site-footer .column-wrapper.columns-4 .column { width: 50%; } #site-footer .column-wrapper.columns-5 .column { width: 33%; } #site-footer .column-wrapper.columns-5 .column.column-4 { width: 40%; } #site-footer .column-wrapper.columns-4 .column-3 { clear: both; } #site-footer .column-wrapper.columns-4.override .column-3, #site-footer .column-wrapper.columns-4.override .column-4 { margin-bottom: 0; } } @media only screen and (max-width: 875px) { .footer-strapline { font-size: 2.5em; } .urban-river-duck { width: 130px; } .column-wrapper.columns-5 .column-2, .column-wrapper.columns-5 .column-4 { padding: 0 20px; } #site-footer .column-wrapper.columns-5 .column { width: 50%; } #site-footer .column-wrapper.columns-5 .column.column-4 { width: 50% !important; margin-left: 0; } #site-footer .column-wrapper.columns-5 .column.column-5 { width: 100%; margin-left: 0; } article.footer-info.column.column-1.odd.first.clearfix > ul > li > a { margin-left: -5px !important; } article.footer-info.column.column-1.odd.first.clearfix > ul > li > a > i { margin-left: -4px !important; } } @media only screen and (max-width: 590px) { .footer-strapline { font-size: 2.25em; } .urban-river-duck { width: 120px; } .column-wrapper.columns-5 .column { padding: 0 20px; } #site-footer .column-wrapper.columns-5 .column { width: 100% !important; } #site-footer .column-wrapper.columns-5 .column.column-4 { width: 100% !important; } #site-footer .column-wrapper.columns-5 .column.column-5 { width: 100%; text-align: center; } #address > li > a > i { left: -50px !important; } article.footer-info.column.column-2.even.second.clearfix > ul > li > a > i { margin-left: -6px !important; } } @media only screen and (max-width: 450px) { .footer-strapline { font-size: 2em; } .urban-river-duck { width: 110px; } #site-footer .column-wrapper.columns-4.override .column { width: 100%; } #site-footer .column-wrapper.columns-5 .column { width: 100% !important; } #site-footer .column-wrapper.columns-4.override .column-3 { margin-bottom: 3em; } #site-footer .column-wrapper.columns-4.override .column-4 { margin-bottom: 0; } #site-footer .column-wrapper.columns-4.override .column-1, #site-footer .column-wrapper.columns-4.override .column-2 { width: 50%; display: inline-block; float: left; clear: none; } } @media only screen and (max-width: 327px) { #address .text-wrap-span, #address .mobile-text-wrap { display: block; } } /************************************************************************************************************************ * HOMEPAGE STYLES ************************************************************************************************************************/ .home .wrapper.home-intro p { font-size: 1.75em; line-height: 1.8em; font-weight: 400; padding: 0 3em; text-align: center; } .home .wrapper.home-intro p.button-wrapper-overlay { margin-bottom: 0.5em; line-height: 1; margin-top: 2.1em; font-size: 1em; } .home .wrapper.home-services h2 { font-size: 2.1em; line-height: 1.4; text-align: center; margin-bottom: 1.4em; } .home .wrapper.home-services h2 .new-line { display: block; } @media all and (max-width: 500px) { .home .wrapper.home-services h2 .new-line { display: inline; } } .home .wrapper.home-services #service-wrapper { width: 100%; margin-bottom: 4.1em; font-size: 0; } .home .wrapper.home-services #service-wrapper .service { width: 20%; padding: 0 1%; text-align: center; display: inline-block; font-size: 14px; vertical-align: top; } /*.home .wrapper.home-services #service-wrapper .service a.purple-bg { background-color: rgba(76, 61, 112, 0.35); display: inline-block; padding: 2em; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 8px solid rgba(76, 61, 112, 0.4); } .home .wrapper.home-services #service-wrapper .service a.purple-bg:hover { background-color: rgba(76, 61, 112, 0.9); border: 8px solid rgba(255, 255, 255, 0.3); }*/ .home .wrapper.home-services #service-wrapper .service a img { display: block; margin: 0 auto; } .home .wrapper.home-services #service-wrapper .service h3 { padding: 0.8em 0 0.4em; font-size: 1.8em; } .home .wrapper.home-services #service-wrapper .service h3 span.hide-title { display: none; } .home .wrapper.home-services #service-wrapper .service p { margin-bottom: 0; font-size: 1.2em; line-height: 1.4em; padding: 0 1.5em; } .home .wrapper.home-services #service-wrapper .service .service-image { margin: 0 auto; width: 79px; height: 75px; background-position: center top; background-size: 79px 150px; } .home .wrapper.home-services #service-wrapper .service .service-image:hover { background-position: center bottom; } .home .wrapper.home-services p.button-wrapper-overlay { margin-top: 4em; } .home .wrapper.home-work h2 { font-size: 2.8em; text-align: center; margin: 0; } .home ul#home-port { width: 100%; } .home ul#home-port li { float:left; width: 33.333%; } .home ul#home-port li a.port-link { display: block; position: relative; } .home ul#home-port li .port-image { height: 400px; } .home ul#home-port li .port-logo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(142, 142, 142, 0.5); } .home ul#home-port li a:hover .port-logo { background-color: rgba(76, 61, 112, 0.85); } .home ul#home-port li .port-logo img { width: 250px; padding: 150px 0; display: block; margin: 0 auto; } .home .wrapper.home-thoughts h2 { font-size: 2.8em; text-align: center; margin: 0 0 1.5em; } .home .wrapper.home-thoughts .home-post .post-image { position: relative; overflow: hidden; } .home .wrapper.home-thoughts .home-post .post-image img { display: block; } .home .wrapper.home-thoughts .home-post .post-image .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat;background-position: center center; } .home .wrapper.home-thoughts .home-post a:hover .post-image .overlay { background-color: rgba(76, 61, 112, 0.75); background-image: url('https://www.urbanriver.com/wp-content/themes/urbanriver/images/blog-icon.png'); } .home .wrapper.home-thoughts .home-post .post-content { padding: 0.2em 1.5em 1em; /*background-color: #ffffff; */ } /*.home .wrapper.home-thoughts .home-post a:hover .post-content { background-color: #fafafa; }*/ .home .wrapper.home-thoughts .home-post h3 { font-size: 1.8em; padding: 0.2em 0 0.3em; line-height: 1.55em; color: #4c3d70; } .wrapper.home-thoughts .home-post a:hover h3 { color: #3f3f3f; } .home .wrapper.home-thoughts .home-post p.date { color: #595959; } .home .home-thoughts .button-wrapper-overlay { margin-top: 1.7em; } p.intro-header { font-size: 3.214em !important; font-weight: 700 !important; color: #151453; line-height: 1.4em !important; margin-bottom: 0; } .hr-green-accent { width: 65px; margin: 40px auto; border-top: 2px solid #d2de26; } .purple-banner { background-color: #4c3d70; } .purple-banner p { text-align: center; color: #dad70f; font-size: 3.214em !important; font-weight: 300; margin-bottom: 0; line-height: 1.2em !important; } .home-services-intro { text-align: center; max-width: 1050px; margin: 0 auto; } .home-services-intro strong { font-size: 1.714em; line-height: 1.8em !important; } .home-services-intro > p:nth-child(2) { font-size: 1.5em; margin-bottom: 2.2em !important; line-height: 1.8em !important; } .services p { color: #4c3d70 !important; } @media only screen and (max-width: 1000px) and (min-width: 776px) { .home .wrapper.home-services #service-wrapper .service h3 .second-line, .home .wrapper.home-services #service-wrapper .service h3 span.hide-title { display: block; } } @media only screen and (max-width: 775px) { .home .wrapper.home-services #service-wrapper { margin-bottom: 1em; } .home .wrapper.home-services #service-wrapper .service { margin-bottom: 1.4em; width: 33.333%; } .home .wrapper.home-services #service-wrapper .service:last-child { margin-bottom: 0.3em; } .home .wrapper.home-intro p { padding: 0; font-size: 1.5em; } } @media only screen and (max-width: 705px) { .home .wrapper.home-services h2 { font-size: 1.7em; margin-bottom: 1em !important; } .home .wrapper.home-services h2, .home .wrapper.home-thoughts h2 { margin: 0 0 0.5em; } .home .wrapper.home-work h2, .home .wrapper.home-thoughts p.button-wrapper-overlay { margin: 0; } .home .wrapper.home-services p.button-wrapper-overlay { margin-top: 2em; } } @media only screen and (max-width: 500px) { .home .wrapper.home-services #service-wrapper .service { width: 50%; } .home .wrapper.home-intro p { font-size: 1.3em; line-height: 1.75; } } @media only screen and (max-width: 400px) { .home .wrapper.home-services #service-wrapper .service h3 { padding-top: 0.4em; } .home .wrapper.home-services #service-wrapper .service { width: 100%; padding-bottom: 25px; } .home .wrapper.home-services #service-wrapper .service:last-child { padding-bottom: 0; } } /************************************************************************************************************************ * TWITTER STYLES ************************************************************************************************************************/ #slider-panel { position: relative; } .twitter-bird { float: left; margin: 0.1em 0.5em 0.1em 0.3em; } .twitter-slides li { font-size: 1.5em; display: none; max-width: 70%; } .twitter-slides li a { border-bottom: 1px solid #8B7EAB; } .twitter-slides li a:hover { border-bottom-color: #4c3d70; } .flex-control-nav { display: none; } .twitter-flexslider .flex-direction-nav { margin-top: 1.2em; display: inline-block; float: right; } .twitter-flexslider .flex-direction-nav li { display: inline-block; float: left; margin-left: 15px; } .twitter-bird, .twitter-slides li, .twitter-slides li a, .flex-prev, .flex-next { color: #4c3d70; -webkit-transition: color ease .2s; -moz-transition: color ease .2s; -ms-transition: color ease .2s; -o-transition: color ease .2s; transition: color ease .2s; } .twitter-bird:hover, .twitter-slides li a:hover, .flex-prev:hover, .flex-next:hover { color: #2E1F52; } .twitter-bird, .flex-prev, .flex-next { color: #e1e2e3; } .twitter-bird:hover, .flex-prev:hover, .flex-next:hover { color: #d4d5d7; } @media only screen and (max-width: 780px) { .twitter-bird { margin: 0; text-align: center; width: 100%; } .twitter-slides { display: inline-block; width: 100%; } .twitter-slides li { max-width: none; text-align: center; } .twitter-flexslider .flex-direction-nav { margin: 0 auto; width: 100%; text-align: center; } .twitter-flexslider .flex-direction-nav li { float: none; } .twitter-flexslider .flex-direction-nav li:first-child { margin-left: 0; } } /************************************************************************************************************************ * SIDEBAR STYLES ************************************************************************************************************************/ .sidebar .sidebar-padder { padding: 0.5em 0 2.5em; } .sidebar h3 { padding-bottom: 0.5em; } .sidebar .sidebar-post { padding: 0 0 1.8em 0; } .sidebar .sidebar-post p { margin-bottom: 0; } .sidebar .sidebar-post p.title { font-size: 1.25em; margin-bottom: 0.15em; } .sidebar p.heading { font-weight: 700; margin-bottom: 0.2em; } .sidebar p.company-name { font-weight: 700; font-size: 1.25em; margin-bottom: 0.75em; } /************************************************************************************************************************ * CONTACT PAGE STYLES ************************************************************************************************************************/ .wrapper.gmap { padding: 0; } .wrapper.gmap #ur-gmap { width: 100%; height: 450px; } .directions-wrap { padding-top: 1.5em; margin-top: 2.2em; border-top: 1px solid #cccccc; } @media only screen and (max-width: 705px) { .directions-wrap { margin-bottom: 3em; } } /************************************************************************************************************************ * NEWSLETTER PAGE STYLES ************************************************************************************************************************/ .campaigns-list { margin-top: 2em; } #content .campaigns-list ul { margin-bottom: 0; } .campaigns-list ul li a { color: #452C84; border-bottom: 1px dotted #A99BB8; } .campaigns-list ul li a:hover { color: #4c3d70; border-color: #452C84; } @media only screen and (max-width: 705px) { #content .campaigns-list ul { margin-bottom: 2em; } } /************************************************************************************************************************ * ABOUT PAGE STYLES ************************************************************************************************************************/ .small-container { max-width: 1000px; margin: 0 auto; } .small-container h2 { text-align: center; } .small-container p { font-size: 1.8em; line-height: 1.6; text-align: center; } .small-container p:last-child{ margin-bottom: 0.3em; } .wrapper.about-staff { padding: 0; } .wrapper.about-staff ul { width: 100%; } .wrapper.about-staff ul li { cursor: pointer; float: left; position: relative; overflow: hidden; width: 33.333%; z-index: 1; } .wrapper.about-staff ul li.staff-1 { left: 33.333%; } .wrapper.about-staff ul li.staff-2 { right: 33.333%; } .wrapper.about-staff ul li .staff-image, .wrapper.about-staff ul li .caption-wrap { height: 400px; } .wrapper.about-staff ul li .caption-wrap { background-color: rgba(76, 61, 112, 0.6); position: absolute; color: #ffffff; z-index: 100; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; top: 0; left: 0; opacity: 0; filter: alpha(opacity=0); width: 100%; display: table; } .wrapper.about-staff ul li:hover .caption-wrap, .touch .wrapper.about-staff ul li .caption-wrap { opacity: 1; filter: alpha(opacity=100); } .wrapper.about-staff ul li .caption-wrap .caption-content { display: table-cell; vertical-align: middle; text-align: center; } .touch .wrapper.about-staff ul li .caption-wrap { background-color: transparent; } .touch .wrapper.about-staff ul li .caption-wrap .caption-content { vertical-align: bottom; } .wrapper.about-staff ul li .caption-wrap .caption-content * { color: white; } .touch .wrapper.about-staff ul li .caption-wrap .caption-content * { background-color: rgba(76, 61, 112, 0.6); } .touch .wrapper.about-staff ul li .caption-wrap .caption-content h2 { padding-top: 3px; margin: 0; display: block; } .touch .wrapper.about-staff ul li .caption-wrap .caption-content h4 { padding-bottom: 10px; margin: 0; display: block; } .wrapper.about-testimonials .small-container .testimonials-wrap { position: relative; } .wrapper.about-testimonials .small-container h2 { margin-bottom: 25px; line-height: 1; } .wrapper.about-testimonials .small-container .quotes { display: none; padding-right: 120px; } .wrapper.about-testimonials .small-container .quotes .the_quote p { margin-bottom: 8px; font-size: 1.8em; line-height: 1.5; text-align: left; quotes: '"' '"'; } /*.wrapper.about-testimonials .small-container .quotes .the_quote p:before, .wrapper.about-testimonials .small-container .quotes .the_quote p:after { font-family: "Century"; font-size: 3em; line-height: 0.1em; vertical-align: -0.4em; color: #9a9a9a; font-weight: 700; } .wrapper.about-testimonials .small-container .quotes .the_quote p:before { margin-right: 0.1em; content: open-quote; } .wrapper.about-testimonials .small-container .quotes .the_quote p:after { margin-left: 0.1em; content: close-quote; }*/ .wrapper.about-testimonials .small-container .quotes .the_quote p:before { margin-right: 0.3em; content: "\e60f"; font-family: 'icomoon'; color: #9a9a9a; font-size: 0.7em; } .wrapper.about-testimonials .small-container .quotes .the_quote p:after { margin-left: 0.3em; content: "\e610"; font-family: 'icomoon'; color: #9a9a9a; font-size: 0.7em; } .wrapper.about-testimonials .small-container .quotes h4 { margin-bottom: 0; font-size: 1.6em; } .wrapper.about-testimonials .small-container .testimonial-nav { position: absolute; top: 5px; right: 0; } .wrapper.about-testimonials .small-container .testimonial-nav i { margin: 0 5px; cursor: pointer; color: #e1e2e3; -webkit-transition: color ease .2s; -moz-transition: color ease .2s; -ms-transition: color ease .2s; -o-transition: color ease .2s; transition: color ease .2s; } .wrapper.about-testimonials .small-container .testimonial-nav i:hover { color: #d4d5d7; } @media only screen and (max-width: 720px) { .wrapper.about-testimonials .small-container .quotes .the_quote p { font-size: 1.6em; } .wrapper.about-testimonials .small-container .quotes h4 { font-size: 1.4em; } } @media only screen and (max-width: 670px) { .wrapper.about-testimonials .small-container .quotes { padding-right: 0; } .wrapper.about-testimonials .small-container .testimonial-nav { position: relative; top: auto; right: auto; text-align: center; margin-top: 10px; } } .wrapper.about-office h2 { font-size: 2.8em; text-align: center; } .wrapper.image-grid ul { width: 100%; } .wrapper.image-grid ul li { float: left; position: relative; overflow: hidden; } .wrapper.image-grid ul li.one-third { width: 33.333%; } .wrapper.image-grid ul li.one-half { width: 50%; } .wrapper.image-grid ul li.two-thirds { width: 66.666%; } .wrapper.image-grid ul li .office-image { height: 400px; } .awards-logos { text-align: center; margin: 40px auto 0; } .awards-logos li { display: inline-block; margin: 0 30px 30px 30px; } .awards-logos li.Sagepay a { position: relative; bottom: -8px; } .awards-logos li.PayPal a { position: relative; bottom: -5px; } .awards-logos li a { display: block; } .awards-logos li img:hover { -webkit-filter: brightness(75%); } .wrapper.get-in-touch h2 { font-size: 2.8em; text-align: center; margin-bottom: 0.8em; } .wrapper.get-in-touch .fa-ul { text-align: center; margin-top: 1em; } .wrapper.get-in-touch .fa-ul li { display: inline-block; margin-right: 4em; font-size: 1.8em; color: #4c3d70; } .wrapper.get-in-touch .fa-ul li:last-child { margin-right: 0; } @media only screen and (max-width: 1350px) { .wrapper.image-grid ul li .office-image { height: 350px; } } @media only screen and (max-width: 1200px) { .wrapper.image-grid ul li .office-image { height: 280px; } } @media only screen and (max-width: 800px) { .wrapper.image-grid ul li .office-image { height: 200px; } } @media all and (max-width: 610px) { .wrapper.get-in-touch .fa-ul li { margin-right: 3em; font-size: 1.5em; } } @media all and (max-width: 510px) { .wrapper.get-in-touch .fa-ul { margin: 0; } .wrapper.get-in-touch .fa-ul li { display: block; margin: 10px 0; } .wrapper.get-in-touch .fa-ul li .fa-li { position: relative; left: 0; width: 1.5em; top: -0.05em; } } @media all and (max-width: 500px) { .awards-logos { margin: 20px auto 0; padding: 0 10%; } .awards-logos li { display: inline-block; margin: 0 0 17px !important; width: 42%; padding: 0 20px; } .small-container p { font-size: 1.3em; line-height: 1.75; } .wrapper.about-testimonials .container .quotes .the_quote p { font-size: 1.4em; } .wrapper.about-testimonials .small-container .quotes .the_quote p:after, .wrapper.about-testimonials .small-container .quotes .the_quote p:before { font-size: 0.7em; } .wrapper.about-testimonials .small-container .quotes h4 { font-size: 1.2em; } .awards-logos li.CampaignMonitor { width: auto; margin-bottom: 0!important; } } @media all and (max-width: 375px) { .awards-logos { padding: 0 16%; } .awards-logos li { margin: 0 0 13px !important; padding: 0 14px; width: 49%; } .awards-logos li.CampaignMonitor { max-width: 230px; } } @media only screen and (max-width: 705px) { #content .small-container p, #content2 .small-container p { font-size: 1.5em; } .wrapper.about-staff ul li, .wrapper.image-grid ul li.one-third, .wrapper.image-grid ul li.one-half, .wrapper.image-grid ul li.two-thirds { width: 100%; } .wrapper.image-grid ul li.one-half { display: none; } .wrapper.image-grid ul li.one-third .office-image { height: 280px; } .wrapper.about-staff ul li.staff-1 { left: 0; } .wrapper.about-staff ul li.staff-2 { right: 0; } p.service-portfolio-button { margin: 0 0 1em; } } /************************************************************************************************************************ * OUR WORK PAGE STYLES ************************************************************************************************************************/ .wrapper.work-portfolio { padding: 0; } .wrapper.work-categories { padding: 2em 0; } .wrapper.work-categories h2 { font-size: 2.8em; text-align: center; margin: 0.5em 0 1.5em; } .wrapper.work-categories #service-wrapper { width: 100%; } .wrapper.work-categories #service-wrapper .service { width: 20%; padding: 0 1%; float: left; text-align: center; } .wrapper.work-categories #service-wrapper .service h3 { padding: 0.75em 0; font-size: 2em; } .wrapper.work-categories #service-wrapper .service h3 a span.hide-title { display: none; } .wrapper.work-categories #service-wrapper .service h3 a { color: #000; position: relative;display: inline-block;outline: none;text-decoration: none; } .wrapper.work-categories #service-wrapper .service:hover h3 a, .wrapper.work-categories #service-wrapper .service:focus h3 a, .wrapper.work-categories #service-wrapper .service.active h3 a { color: #4c3d70;} .wrapper.work-categories #service-wrapper .service h3 a::after { position: absolute; top: 100%; left: 0; width: 100%; height: 1px; background: #9585BA; content: ''; opacity: 0; -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s; -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s; transition: height 0.3s, opacity 0.3s, transform 0.3s; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); transform: translateY(-10px); } .wrapper.work-categories #service-wrapper .service h3 a:hover::after, .wrapper.work-categories #service-wrapper .service h3 a:focus::after, .wrapper.work-categories #service-wrapper .service.active h3 a::after{ height: 2px; opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); } .wrapper.work-categories #service-wrapper .service p { margin-bottom: 0; font-size: 1.15em; line-height: 2em; padding: 0 1.5em; } ul#work-port { width: 100%; } ul#work-port li { float:left; width: 33.333%; } ul#work-port li a.port-link { display: block; position: relative; } ul#work-port li .port-image { height: 400px; } ul#work-port li .port-logo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(142, 142, 142, 0.5); } ul#work-port li a:hover .port-logo { background-color: rgba(76, 61, 112, 0.85); } ul#work-port li .port-logo img { width: 250px; padding: 150px 0; display: block; margin: 0 auto; } @media only screen and (max-width: 1150px) { ul#work-port li { width: 50%; } } @media only screen and (max-width: 985px) and (min-width: 706px) { .second-line, .wrapper.work-categories #service-wrapper .service h3 a span.hide-title { display: block; } .wrapper.work-categories #service-wrapper .service h3 a { font-size: 0.85em; } .is_stuck.wrapper.work-categories #service-wrapper .service h3 { padding: 0.45em 0; } } @media only screen and (max-width: 705px) { ul#work-port li { width: 100%; } p.button-wrapper-overlay#awesomeSauce a:hover { background-color: #ffffff; color: #4c3d70; } } /************************************************************************************************************************ * THOUGHTS LISTING STYLES ************************************************************************************************************************/ .wrapper.all-thoughts { padding: 3em 0; } .wrapper.thoughts-categories { padding: 2em 0; } .wrapper.thoughts-categories h2 { font-size: 2.8em; text-align: center; margin: 0.5em 0 1.5em; } .wrapper.thoughts-categories #service-wrapper { width: 100%; padding: 0 10%; } .wrapper.thoughts-categories #service-wrapper .service { width: 33.33%; padding: 0 1%; float: left; text-align: center; } .wrapper.thoughts-categories #service-wrapper .service h3 { padding: 0.75em 0; font-size: 2.2em; } .wrapper.thoughts-categories #service-wrapper .service h3 a { color: #000; position: relative;display: inline-block;outline: none;text-decoration: none; } .wrapper.thoughts-categories #service-wrapper .service:hover h3 a, .wrapper.thoughts-categories #service-wrapper .service:focus h3 a, .wrapper.thoughts-categories #service-wrapper .service.active h3 a { color: #4c3d70; } .wrapper.thoughts-categories #service-wrapper .service h3 a::after { position: absolute; top: 100%; left: 0; width: 100%; height: 1px; background: #9585BA; content: ''; opacity: 0; -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s; -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s; transition: height 0.3s, opacity 0.3s, transform 0.3s; -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); transform: translateY(-10px); } .wrapper.thoughts-categories #service-wrapper .service h3 a:hover::after, .wrapper.thoughts-categories #service-wrapper .service h3 a:focus::after, .wrapper.thoughts-categories #service-wrapper .service.active h3 a::after{ height: 2px; opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); } .wrapper.thoughts-categories #service-wrapper .service p { margin-bottom: 0; font-size: 1.15em; line-height: 2em; padding: 0 1.5em; } .wrapper.all-thoughts .thoughts-post .post-image { position: relative; overflow: hidden; } .wrapper.all-thoughts .thoughts-post .post-image img { display: block; } .wrapper.all-thoughts .thoughts-post .post-image .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat;background-position: center center; } .wrapper.all-thoughts .thoughts-post a:hover .post-image .overlay { background-color: rgba(76, 61, 112, 0.75); background-image: url('https://www.urbanriver.com/wp-content/themes/urbanriver/images/blog-icon.png'); } .wrapper.all-thoughts .thoughts-post .post-content { padding: 0.2em 1.5em 1em; /*background-color: #ffffff;*/ } /*.wrapper.all-thoughts .thoughts-post a:hover .post-content { background-color: #fafafa; }*/ .wrapper.all-thoughts .thoughts-post h3 { font-size: 1.8em; padding: 0.2em 0 0.3em; line-height: 1.55em; color: #4c3d70; } .wrapper.all-thoughts .thoughts-post a:hover h3 { color: #3f3f3f; } .wrapper.all-thoughts .thoughts-post p.date { border-bottom: 1px dotted #595959; margin-bottom: 1em; padding-bottom: 1em; color: #595959; } .wrapper.all-thoughts .thoughts-post .post-content p.excerpt { margin-bottom: 0; line-height: 2em; font-size: 1.2em; color: #595959; } .wrapper.all-thoughts .thoughts-post a, #home-thoughts .home-post a { display: block; background-color: white; } .wrapper.all-thoughts .thoughts-post a:hover, #home-thoughts .home-post a { background-color: #fafafa; } /************************************************************************************************************************ * SERVICES PAGE STYLES ************************************************************************************************************************/ .page-template-template-services-php .wrapper { display: inline-block; } .service-left { width: 50%; float: left; padding-right: 3.5%; } .service-right { width: 50%; float: left; padding-left: 3.5%; } .service-left h1, .service-right h1 { margin-bottom: 0.4em; font-size: 2.3em; } .service-left p, .service-right p { font-size: 1.2em; line-height: 2em; } .service-top p { font-size: 1.5em; line-height: 1.5em; } .service-top p:last-child { margin-bottom: 0; } .service-left.show-me, .service-right.show-me { text-align: center; } .service-left.show-me img, .service-right.show-me img { max-width: 350px; } .service-left p.service-portfolio-button, .service-right p.service-portfolio-button { margin: 2em 0 1em; } .service-left p.service-portfolio-button a, .service-right p.service-portfolio-button a { color: #4c3d70; font-size: 1.2em; line-height: 1.563em; font-weight: 400; padding: 1em 1.2em; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; border: 1px solid #4c3d70; display: inline-block; text-transform: uppercase; } .service-left p.service-portfolio-button a:hover, .service-right p.service-portfolio-button a:hover { background-color: #4c3d70; color: #ffffff; } .single-service .container { max-width: 700px; } .hide-me { display: none; } .container.inner-services { max-width: 900px; } /*p.services-button { text-align: left; }*/ p.services-button a { font-size: 1.2em; padding: 0.8em 1.4em; } @media only screen and (max-width: 800px) { .service-left p.service-portfolio-button, .service-right p.service-portfolio-button { margin-bottom: 0; } .service-left { width: 100%; padding-right: 0; } .service-right { width: 100%; padding-left: 0; } .show-me { display: none; } .hide-me { display: block; text-align: center; max-width: 350px; margin: 0 auto; } .service-left h1, .service-right h1, .service-left p.service-portfolio-button, .service-right p.service-portfolio-button { text-align: center; } .service-left h1, .service-right h1 { margin-top: 0.4em; } } @media only screen and (max-width: 550px) { .hide-me { max-width: 70%; } } /************************************************************************************************************************ * ARCHIVE STYLES ************************************************************************************************************************/ .archive {} /************************************************************************************************************************ * SEARCH RESULTS STYLES ************************************************************************************************************************/ .search {} /************************************************************************************************************************ * SINGLE POST STYLES ************************************************************************************************************************/ .single-post #content p.more-thoughts-button { margin: 2em 0 3em; text-align: center; } .single-post #content p.more-thoughts-button a { color: #4c3d70; font-size: 1.4em; font-weight: 300; padding: 0.45em 0.9em; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; border: 1px solid #4c3d70; display: inline-block; } .single-post #content p.more-thoughts-button a:hover { background-color: #4c3d70; color: #ffffff; } .single-post #content h1 { margin-bottom: 0.1em; } .single-post #content p.published-date { font-size: 1.15em; } .share { /*border-top: 1px solid #d4d5d7;*/ padding-top: 10px; } .share #tweet-this, .share #linked-in-share { float: left; } .share #tweet-this { margin-right: 20px; } /************************************************************************************************************************ * STAFF PAGE STYLES ************************************************************************************************************************/ .column { width: 50%; float: left; } .column.column-left { padding-right: 2em; } .column.column-right { padding-left: 2em; } .wrapper.about-staff.staff-page ul li { width: 50%; } @media only screen and (max-width: 800px) { .column { width: 100%; } .column.column-left { padding-right: 0; } .column.column-right { padding-left: 0; } } @media only screen and (max-width: 705px) { .wrapper.about-staff.staff-page ul li { width: 100%; } } /************************************************************************************************************************ * SINGLE WORK STYLES ************************************************************************************************************************/ .individual-work .container { max-width: 900px; } .individual-work #content h1 { font-weight: bold; line-height: 1; margin-bottom: 0.2em; } .individual-work .selected-services { margin-bottom: 1em; font-size: 1.1em; } /*.individual-work .selected-services a { text-decoration: underline; }*/ .individual-work #content h3 { font-size: 1.2em; line-height: 2em;margin-bottom: 0; font-weight: bold; color: #3f3f3f; } .individual-work #content h3 + p { margin-bottom: 0; } .individual-work .container.top-image { max-width: none; text-align: center; } .individual-work .service-left p:last-child, .individual-work .service-right p:last-child { margin-bottom: 0; } .full-width-work-image { height: 300px; background-attachment: scroll; background-position: center center; background-size: cover; } .individual-work.work-image, .full-width-work-image { margin: 0; } .individual-work.work-grey-bg, .individual-work.work-visit-website { background-color: #e1e2e3; padding: 2em 0; } .work-additional { padding: 6em 0; margin-top: 0; background-attachment: scroll; background-position: center center; background-size: cover; } .work-additional p { color: #ffffff; font-size: 1.8em; margin-bottom: 0.5em; } .work-additional p:last-of-type { margin-bottom: 0; } #show-all-work { margin: 3em 0; } .work-nav-links { margin: 0; width: 100%; text-align: center; height: 120px; background: #e1e2e3; } .work-nav-links, .work-nav-links li a { color: #4c4c4c; font-size: 1.2em; } .work-nav-links li a:hover { background: #d4d5d7; } .work-nav-links li { display: inline-block; min-width: 212px; } .work-nav-links li.all-work { border-left: 1px solid #d4d5d7; border-right: 1px solid #d4d5d7; } .work-nav-links li a { display: inline-block; } .work-nav-links .btn { font-family: 'Lato', sans-serif; cursor: pointer; padding: 50px 80px; display: inline-block; text-transform: uppercase; letter-spacing: 1px; position: relative; overflow: hidden; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .work-nav-links .btn:after { content: ''; position: absolute; z-index: -1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .work-nav-links .btn:before { font-family: 'FontAwesome'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; position: relative; -webkit-font-smoothing: antialiased; position: absolute; height: 100%; font-size: 125%; line-height: 4.8; color: #ffffff; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .work-nav-links .btn:hover { background: #d4d5d7; } .work-nav-links .btn:active:before { color: #4c4c4c; } .work-nav-links .next:before { left: 130%; top: 0; } .work-nav-links .next:hover:before { left: 80%; } .work-nav-links .prev:before { left: -50%; top: 0; } .work-nav-links .prev:hover:before { left: 10%; } .small-nav-links { margin: 0; background: #e1e2e3; text-align: center; width: 100%; padding: 0 1em; } .small-nav-links li { display: inline-block; font-size: 1.2em; text-transform: uppercase; border-left: 1px solid #d4d5d7; } .small-nav-links li:first-child { border-left: none; } .small-nav-links li a { color: #4c4c4c; padding: 2.2em; display: block; } .small-nav-links li a:hover { color: #272727; } @media only screen and (max-width: 730px) { .work-nav-links li { min-width: 153px; } .work-nav-links .btn { padding: 50px; } } @media only screen and (max-width: 560px) { .work-nav-links.large-nav { display: none; } .small-nav-links { display: block; } } @media only screen and (max-width: 430px) { .small-nav-links li a { padding: 2.2em 1em; } } @media only screen and (max-width: 350px) { .small-nav-links li a { padding: 2.2em 0.7em; } } .work-visit-website p { margin-bottom: 0; } .full-width .container { max-width: none; width: 100%; } .full-width .container .left-col, .full-width .container .right-col { float: left; width: 50%; } .full-width .container .left-col .inner, .full-width .container .right-col .inner { max-width: 450px; width: 100%; } .full-width .container .left-col .inner { float: right; } .full-width .container .left-col .inner img, .full-width .container .right-col .inner img { display: block; position: relative; margin: 0 auto; } .individual-work.company-logo, .individual-work.work-image-padding { padding: 30px 0; } .individual-work.company-logo p, .individual-work.work-image-padding p { margin-bottom: 0; } .full-width.key-wealth-arrows-top .container .left-col { background: #ec008c; } .full-width.key-wealth-arrows-top .container .right-col { background: #b0d136; } .full-width.key-wealth-arrows-bottom .container .left-col { background: #efc018; } .full-width.key-wealth-arrows-bottom .container .right-col { background: #007e79; } .individual-work.key-wealth-four-arrows { padding: 50px 0; margin: 0; clear: both; } .individual-work.key-wealth-four-arrows p { margin-bottom: 0; } .individual-work.key-wealth-slides { margin: 0; padding: 0; } .individual-work.key-wealth-slides .container div { width: 50%; height: 251px; background-attachment: scroll; background-position: center center; background-size: cover; float: left; } .key-wealth-slides .key-wealth-slide-1 { background-image: url('images/key-wealth-pensions.gif'); } .key-wealth-slides .key-wealth-slide-2 { background-image: url('images/key-wealth-investments.gif'); } .key-wealth-slides .key-wealth-slide-3 { background-image: url('images/key-wealth-life-cover.gif'); } .key-wealth-slides .key-wealth-slide-4 { background-image: url('images/key-wealth-mortgages.gif'); } .key-wealth-business-cards { background-color: #e1e2e3; } @media only screen and (max-width: 600px) { .individual-work.key-wealth-slides .container div { width: 100%; } } .postid-1212 .work-additional p { Font-size: 1.4em; margin-bottom: 1em; } .postid-1212 .work-additional p:last-of-type { margin-bottom: 0; } .overcoming-theatre-bg { background-image: url('images/overcoming-theatre-background.gif'); } .postid-1085 .work-additional { background-attachment: initial; background-position: initial; background-size: initial; } .postid-1085 .work-additional p { color: #3f3f3f; } .full-width.icogp-2-logos .container .left-col { background: #c2d6ee; } .full-width.icogp-2-logos .container .right-col { background: #E8E8E8; } .full-width.icogp-2-logos .container img { padding: 30px; } .icogp-bg { background-color: #c2d6ee; } .postid-1061 .work-additional p { color: #002D4C; } .trip-fiction-website-features { padding: 30px 0 0; } .trip-fiction-website-features .column, .trip-fiction-website-features .column p { margin-bottom: 0; } .full-width.trip-fiction-2-logos .container .left-col { background: #93AE8D; } .full-width.trip-fiction-2-logos .container .right-col { background: #3D3D3F; } .full-width.trip-fiction-2-logos .container img { padding: 30px; } .full-width:before, .full-width:after { content: ""; display: table; } .individual-work.trip-fiction-bookshelf { margin: 0; padding: 0; } .individual-work.trip-fiction-bookshelf .container div { width: 50%; height: 250px; background-attachment: scroll; background-position: center center; background-size: cover; float: left; } .trip-fiction-bookshelf .container div.trip-fiction-book1 { background-color: #3d3d3f; background-attachment: initial; background-position: center center; background-size: contain; background-repeat: no-repeat;background-image: url('images/trip-fiction-bookshelf-logo.gif'); } .trip-fiction-bookshelf .container div.trip-fiction-book2 { background-image: url('images/trip-fiction-bookshelf.jpg'); } .individual-work.digital-content.trip-fiction-icons { background-color: #93AE8D; } .trip-fiction-website-features p { font-family: 'The Girl Next Door', cursive; color: #276309; font-size: 1.75em; } .postid-1119 .work-additional { background: #266208; background: -moz-linear-gradient(top, #266208 0%, #8ba57e 82%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#266208), color-stop(82%,#8ba57e)); background: -webkit-linear-gradient(top, #266208 0%,#8ba57e 82%); background: -o-linear-gradient(top, #266208 0%,#8ba57e 82%); background: -ms-linear-gradient(top, #266208 0%,#8ba57e 82%); background: linear-gradient(to bottom, #266208 0%,#8ba57e 82%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#266208', endColorstr='#8ba57e',GradientType=0 ); } .greenzone-illustrations { background-color: #1D6E3E; } .postid-1041 .work-additional p { font-size: 1.5em; } .ttr-barnes-symbol { background-color: #00529e; } .ttr-barnes-compliment { background-color: #f0f0f0; } .postid-1120 .work-additional .container { background: rgba(0, 0, 0, 0.21); padding: 10px; } .dotty-house-website-features { padding: 30px 0 0; } .dotty-house-website-features .column, .dotty-house-website-features .column p { margin-bottom: 0; } .dotty-house-website-features .column p { font-size: 1.5em; color: #9E9B96; } .individual-work.dotty-house-web-products { background-image: url('images/dotty-house-products.png'); height: 250px; background-attachment: scroll; background-position: center center; background-size: cover; } .individual-work.dotty-house-icons { background-image: url('images/dotty-house-icons.png'); background-color: #3d3d3f; background-attachment: initial; background-position: center center; background-repeat-y: no-repeat; height: 160px; background-repeat: repeat-x; } .full-width.dotty-house-2-logos .container .left-col { background: #005782; } .full-width.dotty-house-2-logos .container .right-col { background: #c7c1b8; } .full-width.dotty-house-2-logos .container img { padding: 30px; } .groundsix-yellow, .postid-1045 .work-additional { background: #fff055; background: -moz-radial-gradient(center, ellipse cover, #fff055 0%, #f4d600 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#fff055), color-stop(100%,#f4d600));background: -webkit-radial-gradient(center, ellipse cover, #fff055 0%,#f4d600 100%); background: -o-radial-gradient(center, ellipse cover, #fff055 0%,#f4d600 100%); background: -ms-radial-gradient(center, ellipse cover, #fff055 0%,#f4d600 100%); background: radial-gradient(ellipse at center, #fff055 0%,#f4d600 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff055', endColorstr='#f4d600',GradientType=1 );} .groundsix-grey { background-color: #f0f0f0; } .postid-1045 .work-additional p { color: black; text-align: center; font-size: 3em; text-transform: uppercase; } .postid-1049 .work-additional { background-size: initial; } .postid-1049 .work-additional p { color: #6E6D6D; } .individual-work.happy-little-box-cycle { background-image: url('images/happy-little-box-cycle.png'); height: 370px; background-position: center center; background-repeat-y: no-repeat; margin-top: 50px; } .individual-work.happy-little-box-scenery { background-image: url('images/happy-little-box-scenery.png'); height: 370px; background-position: center center; background-repeat-y: no-repeat; margin-bottom: 30px; } .hmc-digital-screenshots { background-image: url('images/helen-mcardle-care-digital-images.png'); height: 250px; background-position: center center; } .hmc-identity-icons { background-image: url('images/helen-mcardle-care-identity-icons.png'); height: 180px; background-position: center center; } .hmc-background-colour { background-color: #f3f9fb; } .hmc-background-colour2 { background-color: #d5ebf3; } .postid-1057 .work-additional p { color: #004183; } .draeger-website-images { background-image: url('images/draeger-digital-images.png'); height: 250px; background-position: center center; } .draeger-invite { background-image: url('images/draeger-invite.png'); background-attachment: scroll; background-position: center bottom; background-size: cover; height: 500px; } .snowshock-background-colour {background-color: #CDE3F0; } .snowshock-background-colour2 {background-color: #86c5ec; } .postid-1114 .work-additional p { color: #151D34; } /************************************************************************************************************************ * SINGLE BLOG STYLES ************************************************************************************************************************/ .wp-caption { margin-bottom: 1em; width: auto !important; position: relative; display: inline-block; } .wp-caption img { display: block; } .wp-caption .wp-caption-text { padding: 2px 12px; margin-bottom: 0; width: 100%; position: absolute; bottom: 0; color: white; background: rgba(76, 61, 112, 0.9); } .wp-caption.animal-logos { margin-right: 1em; } .wp-caption.animal-logos:nth-child(odd) { margin-right: 0; } .wp-caption.olympic-logos { margin-right: 1em; width: 48% !important; } .wp-caption.olympic-logos:nth-child(odd) { margin-right: 0; } @media only screen and (max-width: 720px) { .wp-caption.animal-logos { margin-right: 0; } } @media only screen and (max-width: 560px) { .wp-caption.olympic-logos { margin-right: 0; width: 100% !important; } } /************************************************************************************************************************ * LEGAL PAGES STYLES ************************************************************************************************************************/ .privacy-table { margin-bottom: 1.563em; } .privacy-table td { padding: 1em; } .privacy-table h5 { margin-bottom: 0; } a { color: #4c3d70; } a:hover { color: #3f3f3f; } /************************************************************************************************************************ * CLIENT LOGIN PAGE STYLES ************************************************************************************************************************/ .client-login { margin-bottom: 3em; } .login-left { width: 50%; float: left; padding-right: 2.5%; } .login-right { width: 50%; float: left; padding-left: 2.5%; } @media only screen and (max-width: 800px) { .login-left { width: 100%; padding-right: 0; margin-bottom: 2em; } .login-right { width: 100%; padding-left: 0; } } /************************************************************************************************************************ * FORM STYLES ************************************************************************************************************************/ #content form ul { margin-left: 0; } #content form ul li { font-size: 1em; } #site-search-form { width: 50%; display: block; } #header-search-form { width: 15em; display: block; } #sidebar-search-form { width: 100%; display: block; } #site-search-form .text-input, #header-search-form .text-input, #sidebar-search-form .text-input { font-size: 1.1em; padding: 4px 2%; margin-bottom: 1em; width: 100%; } #site-search-form .search-button, #header-search-form .search-button, #sidebar-search-form .search-button { font-size: 1.1em; padding: 4px 0.8em; border: none; color: #ffffff; background: #333333; } #site-search-form .search-button:hover, #header-search-form .search-button:hover, #sidebar-search-form .search-button:hover { cursor: pointer; background: #000000; } #content .gfield { list-style: outside none none; position: relative; clear: both; width: 100%; margin: 0 0 10px; } #content .gfield.gf_left_half { width: 50%; padding: 0 5px 0 0; float: left; clear: left; } #content .gfield.gf_right_half { width: 50%; padding: 0 0 0 5px; float: left; clear: right; } .gfield input[type="text"], .gfield input[type="password"], .gfield select, .gfield textarea { border: 1px solid #e5e5e5; background-color: #f8f8f8; color: #666666; font-size: 1.2em; padding: 8px 10px; width: 100%; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .gfield select option { padding-right: 10px; } .gfield_label { font-size: 1.2em; color: #666666; display: block; position: absolute; top: 10px; left: 10px; } .gf_right_half .gfield_label { left: 15px; } .gfield_required { color: #DE4343; margin-left: 5px; } .gform_validation_container { display: none; } .gfield_description { font-size: 1em; color: #666666; display: block; } .gform_button { font-size: 16.8px; font-weight: 400; padding: 0.55em 0.9em 0.45em; border: none; color: #4c3d70; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; border: 1px solid #4c3d70; background-color: transparent; text-transform: uppercase; } .gform_button:hover { cursor: pointer; background-color: #4c3d70; color: #ffffff; } .gfield_error input[type="text"], .gfield_error textarea, .gfield_error input[type="password"] { border: 1px solid #dc0000; } .validation_message { display: none; } .gform_confirmation_message { padding: 1em 0; margin: 0.5em 0; color: #01c80a; } .validation_error { padding: 1em 0; margin: 0.5em 0; color: #DB0000; } #content .gfield.checkbox > label { display: none; } #content .gfield_checkbox { margin-bottom: 0; } #content .gfield_checkbox li { list-style: outside none none; } #content .gfield_checkbox li input, .gfield_checkbox li label { vertical-align: middle; cursor: pointer; } #content .gfield_checkbox li input { margin: 0.1em 0.8em 0 0; } #content .gfield_checkbox li label { font-size: 1.2em; color: #666666; } #content form .reminder { display: inline-block; font-size: 1.1em; margin-bottom: 1em; } @media only screen and (max-width: 630px) { #content .gfield.gf_left_half, #content .gfield.gf_right_half { width: 100%; padding: 0; } } /************************************************************************************************************************ * TOP CATEGORIES STYLES ************************************************************************************************************************/ .is_stuck.wrapper, .is_thought.wrapper { height: 85px !important; } .is_stuck.wrapper, .is_stuck.wrapper .container, .is_thought.wrapper, .is_thought.wrapper .container { padding: 0; } @media only screen and (max-width: 705px) { .wrapper.work-categories, .wrapper.thoughts-categories { padding: 0 !important; } .wrapper.work-categories #service-wrapper .service h3, .wrapper.thoughts-categories #service-wrapper .service h3 { font-size: 1.6em; } .wrapper.work-categories #service-wrapper .service { width: 50%; } .wrapper.work-categories #service-wrapper .service.hide { display: block; } .wrapper.work-categories #service-wrapper { margin: 12px 0; } } @media only screen and (max-width: 360px) { .wrapper.work-categories #service-wrapper .service, .wrapper.thoughts-categories #service-wrapper .service { width: 50%; } .wrapper.thoughts-categories #service-wrapper .service:last-child { width: 100%; } } @media only screen and (max-width: 320px) { .wrapper.work-categories #service-wrapper .service, .wrapper.thoughts-categories #service-wrapper .service { width: 100%; } } @media only screen and (max-width: 800px) { .wrapper.thoughts-categories #service-wrapper { padding: 0; } } /************************************************************************************************************************ * ICON SET ************************************************************************************************************************/ @font-face { font-family: 'icomoon'; src:url('../fonts/icomoon.eot?15vhtz'); src:url('../fonts/icomoon.eot?#iefix15vhtz') format('embedded-opentype'), url('../fonts/icomoon.ttf?15vhtz') format('truetype'), url('../fonts/icomoon.woff?15vhtz') format('woff'), url('../fonts/icomoon.svg?15vhtz#icomoon') format('svg'); font-weight: normal; font-style: normal; } [class^="ur-icon-"], [class*=" ur-icon-"] { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .ur-icon-left-quote:before { content: "\e60f"; } .ur-icon-right-quote:before { content: "\e610"; } .ur-icon-hamburger:before { content: "\e600"; } .ur-icon-about-icon:before { content: "\e601"; } .ur-icon-blog-icon:before { content: "\e602"; } .ur-icon-contact-icon:before { content: "\e603"; } .ur-icon-email-icon:before { content: "\e604"; } .ur-icon-newsletter-icon:before { content: "\e605"; } .ur-icon-phone-icon:before { content: "\e606"; } .ur-icon-work-icon:before { content: "\e607"; } .ur-icon-home:before { content: "\e608"; } .ur-icon-pencil:before { content: "\e609"; } .ur-icon-pushpin:before { content: "\e60a"; } .ur-icon-location2:before { content: "\e60b"; } .ur-icon-display:before { content: "\e60c"; } .ur-icon-laptop:before { content: "\e60d"; } .ur-icon-mail3:before { content: "\e60e"; } .home .wrapper.home-services #service-wrapper .service .service-image { margin: 0 auto; width: 64px; height: 61px; background-position: center top; background-size: 64px 122px; } .home .wrapper.home-services #service-wrapper .service h3 { padding-top: 1.8em; } .home .wrapper.home-services h2 { font-size: 2.4em; line-height: 1.5; text-align: center; margin-bottom: 2em; } @media all and (min-width: 706px) { .wrapper { padding: 4em 0; } } .home .wrapper.home-services #service-wrapper { width: 100%; margin-bottom: 4.7em; } @media all and (max-width: 705px) { .home .wrapper.home-services h2 { font-size: 1.8em; line-height: 1.4; margin-bottom: 40px !important; } .home .wrapper.home-services #service-wrapper { margin-bottom: 2em; } .column-wrapper .column { margin-bottom: 2em; } .home-services .button-wrapper-overlay { margin-bottom: 5px; } .home-work-bottom .button-wrapper-overlay, home-thoughts .button-wrapper-overlay, .get-in-touch .button-wrapper-overlay { margin: 5px 0; } } @media only screen and (max-width: 775px) { .home .wrapper.home-services #service-wrapper .service h3 { padding-top: 0.7em; } } .navigation ol.tw-pagination li .current, .navigation ol.tw-pagination li a { margin-right: 10px !important; margin-left: 10px !important; } .touch .wrapper.about-staff ul li .caption-wrap .caption-content h2 { padding-top: 14px; } .touch .wrapper.about-staff ul li .caption-wrap .caption-content h4 { padding-bottom: 20px; }