/* Theme Name: Theme URI: Description: Bespoke Theme developed by Adrian @ AlphaWebServices.net Author: Adrian Jones Version: 1.0 License: License URI: Tags: */ @font-face {font-family: bitterreg; src: url(Bitter-Regular.otf);} @font-face {font-family: montserratxbold; src: url(Montserrat-ExtraBold.otf);} @font-face {font-family: montserratsbold; src: url(Montserrat-SemiBold.otf);} * {margin: 0; border: 0; padding: 0; outline: 0;} p, a, small, li, textarea, input, td, tr, .gform_confirmation_message {font-family: bitterreg;} h1, h2, h3, h4, h5 {font-family: montserratxbold;} .clear {clear: both;} a {text-decoration: none;} html {overflow-y: scroll; background-color: #fff;} ul {list-style-type: none;} img.alignright {float:right; margin:0 0 1em 1em} img.alignleft {float:left; margin:0 1em 1em 0} img.aligncenter {display: block; margin-left: auto; margin-right: auto} .alignright {float:right; } .alignleft {float:left; } .aligncenter {display: block; margin-left: auto; margin-right: auto} .wrapper {width: 1100px; margin: 0 auto;} #header {height: 115px; padding: 10px; background: url(images/headbg.gif) no-repeat center; background-size: cover; border-bottom: 4px solid #52A3DA;} #header .logo {} #header p.number {float: right; color: #fff; font-size: 24px; font-weight: 700; padding-bottom: 40px;} #header p.number span {color: #52A3DA;} #header a.login {font-family: 'Roboto', sans-serif; color: #fff; background: #6d6f71; padding: 5px 10px; border-radius: 3px; float: right; clear: right;} #header a.login:hover {background: #49a2da;} .menu-menu-1-container {float: left;} #header .menu {clear: both; padding-top: 10px;} #header .menu li {display: inline-block; position: relative; margin-right: 40px; vertical-align: top;} #header .menu li.menu-item-has-children {padding-right: 15px; background: url(images/dropdown.png) no-repeat right 12px;} #header .menu li ul {display: none; position: absolute; top: 100%; background: #404041; z-index: 999; padding: 10px; border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px;} #header .menu li:hover ul {display: block;} #header .menu li ul li {display: block; padding: 6px 0;} #header .menu li a {font-family: 'Roboto', sans-serif; font-weight: 100; color: #fff; font-size: 18px; padding-bottom: 3px;} #header .menu li ul li a {white-space: nowrap;} #header .menu li ul li a::before {content: "- ";} #header .menu li.current-menu-item > a, #header .menu li:hover > a {border-bottom: 2px solid #52A3DA;} #home #intro {height: 570px; background: url('images/introbg.gif') no-repeat center; background-size: cover; position: relative; text-align: center; padding-top: 30px;} #home #intro h2 {font-size: 34px; color: #fff; text-transform: uppercase;} #home #intro h2 span {display: inline-block; padding: 10px 0;} #home #intro p {font-size: 20px; color: #fff;} #home #intro ul {position: absolute; width: 100%; bottom: 30px; text-align: center;} #home #intro ul li {display: inline-block; margin: 0 75px; color: #fff;} #home #intro ul li img {display: block; margin: 0 auto 20px;} #home .icons {position: relative; padding: 60px 0;} #home .icons ul {text-align: center;} #home .icons ul li {display: inline-block; vertical-align: top; margin: 0 1%; width: 22%;} #home .icons ul li img {height: 70px; width: auto; max-width: 100%; -webkit-filter: grayscale(1); filter: grayscale(1);} #home .icons ul li img:hover {-webkit-filter: grayscale(0); filter: grayscale(0);} #home .cta {background: #F7F7F7 url(images/downarrow.png) no-repeat center top; padding: 60px 0;} #home .cta h2 {font-family: montserratsbold; color: #52A3DA; font-size: 30px; margin: 15px 0;} #home .cta p {color: #9D9C9C; padding-bottom: 10px;} #home .cta .featuredon {margin: 40px 0; text-align: center;} #home .cta .featuredon h5 {font-family: montserratsbold; color: #52A3DA; font-size: 28px; margin: 15px 0;} #home .cta .featuredon ul {width: 60%; margin: 0 auto;} #home .cta .featuredon ul li {display: inline-block; margin: 15px 30px; height: 60px;} #home .cta .featuredon ul li:before {content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em;} #home .cta .featuredon ul li img {display: inline-block; vertical-align: middle; max-height: 50px;} #home .cta .featuredon ul li img.hover {display: none;} #home .cta .featuredon ul li:hover img.unhover {display: none;} #home .cta .featuredon ul li:hover img.hover {display: inline-block;} #home .services {background: url(images/services.png) no-repeat left -14px; padding: 60px 0; text-align: center;} #home .services .wrapper {overflow: hidden; margin-bottom: 20px;} #home .services h1 {text-transform: uppercase; color: #52A3DA; font-weight: normal; margin-bottom: 10px;} #home .services h5 {font-size: 24px; text-transform: uppercase; color: #52A3DA; font-weight: normal; margin-bottom: 40px;} #home .services .servcont {width: 600px; float: right;} #home .services .servcont .service {padding-left: 120px; padding-bottom: 25px; text-align: left;} #home .services .servcont .service.seo {background: url(images/servseo.png) no-repeat left top; background-size: 70px auto; margin-bottom: 20px;} #home .services .servcont .service.digital {background: url(images/servdig.png) no-repeat left top; background-size: 90px auto; margin-bottom: 20px;} #home .services .servcont .service.ppc {background: url(images/servppc.png) no-repeat left top; background-size: 60px auto; margin-bottom: 20px;} #home .services .servcont .service.social {background: url(images/servsm.png) no-repeat 10px top; background-size: 45px auto;} #home .services .servcont .service p {font-size: 12px; color: #9D9C9C;} #home .services .servcont .service p.servname {font-size: 18px; font-family: montserratxbold; color: #000; font-weight: normal; text-transform: uppercase;} #home .services .servcont .service p.servsubname {font-size: 16px; font-family: montserratsbold; color: #52A3DA;} #home .services a.button {font-family: montserratsbold; background: #52A3DA; color: #fff; padding: 15px 0; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; text-transform: uppercase; display: block; width: 220px; margin: 0 auto;} #home .seoprocess {background: #F7F7F7 url(images/downarrow.png) no-repeat center top; padding: 60px 0;} #home .seoprocess .wrapper {overflow: hidden; margin-bottom: 20px;} #home .seoprocess h5 {font-size: 24px; text-transform: uppercase; color: #52A3DA; font-weight: normal; margin-bottom: 40px; text-align: center;} #home .videowrap {margin: 20px auto 50px; width: 752px; height: 421px; position: relative;} #home .videowrap iframe {height: 100%!important; width: 100%!important;} #home .seoprocess .buttons {text-align: center;} #home .seoprocess .buttons li {display: inline-block; margin: 0 100px;} #home .seoprocess .buttons li a {font-family: montserratsbold; display: block; width: 220px; padding: 15px 0; background: #52A3DA; color: #fff; text-transform: uppercase; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;} #home .whyus {padding: 60px 0; text-align: center;} #home .whyus .wrapper {overflow: hidden; margin-bottom: 20px;} #home .whyus h5 {font-size: 24px; text-transform: uppercase; color: #52A3DA; font-weight: normal; margin-bottom: 40px;} #home .whyus .column {display: inline-block; vertical-align: top; width: 250px; margin: 30px 50px;} #home .whyus .column img {display: block; margin: 0 auto 20px;} #home .whyus .column p {font-size: 12px; color: #9D9C9C;} #home .whyus .column p.whytitle {font-family: montserratxbold; font-size: 18px; font-weight: normal; text-transform: uppercase; margin-bottom: 15px; color: #52A3DA;} #home .whyus a.button {font-family: montserratsbold; background: #52A3DA; color: #fff; padding: 15px 0; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; text-transform: uppercase; display: block; width: 220px; margin: 0 auto;} #home .whoweare {background: #F7F7F7 url(images/downarrow.png) no-repeat center top; padding: 60px 0;} #home .whoweare .wrapper {overflow: hidden; margin-bottom: 20px;} #home .whoweare h5 {font-size: 24px; text-transform: uppercase; color: #52A3DA; font-weight: normal; margin-bottom: 40px; text-align: center;} #home .whowearecontent {width: 945px; height: 307px; margin: 0 auto; overflow-y: auto; padding-right: 15px;} #home .whoweare p {color: #9D9C9C; font-size: 14px; text-align: justify; padding-bottom: 10px;} #home .whoweare .buttons {text-align: center; margin-top: 20px;} #home .whoweare .buttons li {display: inline-block; margin: 0 100px;} #home .whoweare .buttons li a {font-family: montserratsbold; display: block; width: 220px; padding: 15px 0; background: #52A3DA; color: #fff; text-transform: uppercase; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;} #home .whowearecontent .jspVerticalBar {display: none;} #home .whowearecontent:hover .jspVerticalBar {display: block;} #home .clients {position: relative; padding: 60px 0; text-align: center;} #home .clients .wrapper {overflow: hidden;} #home .clients h5 {font-size: 24px; text-transform: uppercase; color: #52A3DA; font-weight: normal; margin-bottom: 40px;} #home .clients ul {text-align: center; margin-bottom: 40px;} #home .clients ul li {display: inline-block; vertical-align: middle; margin: 0 1%; width: 22%;} #home .clients ul li img {height: auto; max-width: 100%; -webkit-filter: grayscale(1); filter: grayscale(1);} #home .clients ul li img:hover {-webkit-filter: grayscale(0); filter: grayscale(0);} #home .clients .review {display: inline-block; vertical-align: top; width: 350px; margin: 0 50px;} #home .clients .review .image {height: 100px; margin-bottom: 20px;} #home .clients .review .image .helper {display: inline-block; height: 100%; vertical-align: middle;} #home .clients .review img {max-width: 100%; vertical-align: middle; max-height: 100px;} #home .clients .review p {color: #9D9C9C;} #home .clients .review h2, #home .clients .review h3 {color: #52A3DA; margin: 0; padding: 10px 0 0;} #home .clients a.button {font-family: montserratsbold; background: #52A3DA; color: #fff; padding: 15px 0; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; text-transform: uppercase; display: block; width: 220px; margin: 0 auto;} #landing .intro {padding: 60px 0;} #landing .cta {background: #4C4C4E; padding: 60px 0;} #landing .cta .left {width: 500px; float: left;} #landing .cta .left .clientcols {text-align: center;} #landing .cta .left .clientcols .clientcol {display: inline-block; vertical-align: top; width: 180px; margin: 0 15px 20px; text-align: center;} #landing .cta .left .clientcols .clientcol .image {height: 85px; margin-bottom: 20px;} #landing .cta .left .clientcols .clientcol .image .helper {display: inline-block; height: 100%; vertical-align: middle;} #landing .cta .left .clientcols .clientcol img {max-width: 100%; vertical-align: middle; max-height: 85px;} #landing .cta .left .clientcols .clientcol h3 {color: #52A3DA; margin-bottom: 10px;} #landing .cta .left .clientcols .clientcol p {color: #fff;} #landing .cta .form {width: 400px; float: right; margin-right: 50px; background: #fff; padding: 20px;} #landing .cta .form .gform_wrapper {margin-top: 10px!important;} #landing .cta .form .gform_wrapper .gform_body li.gfield {margin-bottom: 10px!important;} #landing .cta .form .gform_wrapper .gform_body input[type="text"] {width: 90%; border: 1px solid #52A3DA;} #landing .cta .form .gform_wrapper .gform_footer {text-align: left;} #landing .cta .form .gform_wrapper .gform_footer .button {margin: 0; background: #48A1D9; border: 0;} #landing .icons {padding: 60px 0;} #landing .icons ul {text-align: center;} #landing .icons ul li {display: inline-block; vertical-align: top; margin: 0 1%; width: 22%;} #landing .icons ul li img {height: 70px; width: auto; max-width: 100%; -webkit-filter: grayscale(1); filter: grayscale(1);} #landing .icons ul li img:hover {-webkit-filter: grayscale(0); filter: grayscale(0);} #landing .whycontent {padding: 60px 0; background: #F1F1F2;} #landing .whycontent ul {margin: 30px 0 0; text-align: center;} #landing .whycontent ul li {display: inline-block; width: 400px; padding: 10px 0 10px 40px; background: url(images/landinglibg.png) no-repeat left center; text-align: left; margin: 0 25px;} #landing .seoprocess {padding: 60px 0; text-align: center;} #landing .seoprocess h2 {text-transform: uppercase; color: #52A3DA; font-weight: normal; margin-bottom: 40px; text-align: center;} #landing .videowrap {margin: 20px auto 50px; width: 752px; height: 421px; position: relative;} #landing .videowrap iframe {height: 100%!important; width: 100%!important;} #landing .seoprocess a.button {display: block; width: 250px; padding: 15px 0; background: #52A3DA; color: #fff; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; margin: 10px auto;} #landing .roi {padding: 60px 0; background: #F1F1F2;} #landing .roi h2 {margin-bottom: 30px;} #landing .roi img {max-width: 100%;} #landing .reviews {padding: 60px 0; text-align: center;} #landing .reviews h2 {margin-bottom: 30px; color: #48A1D9;} #landing .reviews .wrapper > div {text-align: center; margin: 20px 0;} #landing .reviews .review {display: inline-block; vertical-align: top; width: 350px; margin: 0 50px;} #landing .reviews .review .image {height: 100px; margin-bottom: 20px;} #landing .reviews .review .image .helper {display: inline-block; height: 100%; vertical-align: middle;} #landing .reviews .review img {max-width: 100%; vertical-align: middle; max-height: 100px;} #landing .quote {padding: 60px 0; background: #F1F1F2;} #landing .quote .gform_wrapper .gform_footer {text-align: left;} #landing .quote .gform_wrapper .gform_footer .button {margin: 0; background: #48A1D9; border: 0;} #landing .aboutus {padding: 60px 0;} #landing .aboutus h3, #landing .aboutus p {padding-bottom: 20px;} .landingfootimg {height: 350px; margin: 50px 0;} .app {height: 420px; background: url(images/downarrow.png), url(images/appbg.gif); background-position: center top, center; background-size: auto, cover; background-repeat: no-repeat; padding-top: 30px;} .app h5 {font-size: 24px; color: #fff; text-transform: uppercase; margin-bottom: 20px;} .app p {color: #fff; font-size: 14px; padding-bottom: 20px;} .app a.button {font-family: montserratsbold; background: #F0D43F; color: #fff; padding: 15px 0; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-right: 1px solid #D5BC39; border-bottom: 2px solid #D5BC39; text-transform: uppercase; display: block; width: 220px; text-align: center;} .blogsection {background: #434342; padding: 40px 0;} .blogsection .left {width: 350px; float: left;} .blogsection h2 {text-transform: uppercase; color: #6EBAE9; margin-bottom: 15px;} .blogsection .left .homepost {margin-bottom: 15px;} .blogsection .left .homepost .date {float: left; width: 72px; height: 51px; background: url(images/datebg.png) no-repeat center; text-align: center; padding-top: 30px; margin-right: 15px;} .blogsection .left .homepost .date p {font-size: 14px;} .blogsection .left .homepost .date p span {font-size: 18px;} .blogsection .left .homepost a {color: #fff; font-size: 14px; display: block; padding-top: 12px;} .blogsection .right {width: 600px; float: right; text-align: center;} .blogsection .right .testimonials .image {height: 100px; text-align: center; margin-bottom: 20px;} .blogsection .right .testimonials .image .helper {display: inline-block; height: 100%; vertical-align: middle;} .blogsection .right .testimonials img {display: inline-block; vertical-align: middle; max-height: 100px; max-width: 180px;} .blogsection .right .testimonials p {color: #fff; padding-bottom: 15px; text-align: center;} .imagetitle {text-align: center; width: 1100px; margin: 0 auto 50px; overflow: hidden; padding-top: 20px;} .imagetitle h2.image {text-transform: uppercase; color: #fff; font-weight: normal; padding-top: 10px; height: 212px;} .imagetitle h2.image span {display: inline-block; position: relative; width: 350px;} .imagetitle h2.image span:before, .imagetitle h2.image span:after {content: ""; position: absolute; height: 5px; border-top: 3px solid #000; top: 80px; width: 600px;} .imagetitle h2.image span:before {right: 100%; margin-right: 15px;} .imagetitle h2.image span:after {left: 100%; margin-left: 15px;} .imagetitle h2.title {font-size: 44px;} .imagetitle p {padding: 0 100px; font-size: 20px;} .teamtitle h2.image {background: url(images/teamtitle.png) no-repeat center;} .officetitle h2.image {background: url(images/office.png) no-repeat center;} .presstitle h2.image {background: url(images/press.png) no-repeat center;} .accredtitle h2.image {background: url(images/accredtitle.png) no-repeat center;} .achievetitle h2.image {background: url(images/achievetitle.png) no-repeat center;} .blogtitle h2.image {background: url(images/blog.png) no-repeat center; background-size: 130px auto;} .contacttitle h2.image {background: url(images/contacttitle.png) no-repeat center;} .servicestitle h2.image {background: url(images/servtitle.png) no-repeat center;} .storytitle h2.image {background: url(images/storytitle.png) no-repeat center;} .studiestitle h2.image {background: url(images/casetitle.png) no-repeat center;} .maincontent a {color: #6499CD;} #blog .singlehead {padding: 20px 0; text-align: center;} #blog .left, .singlehead .left {width: 750px; float: left;} #blog .left p {color: #9D9C9C;} #blog .singlehead h2 {color: #6499CD; font-size: 36px; border-bottom: 1px solid #CCCCCC;} #blog .right {width: 250px; float: right;} #blog .right .widget {list-style-type: none; margin-bottom: 30px;} #blog .right .widgettitle {color: #6499CD; margin-bottom: 15px;} #blog .right .widget p {font-size: 14px; color: #9D9C9C;} #blog .right .widget a {font-size: 14px; color: #6499CD;} #blog .postwrap {margin-bottom: 100px;} #blog .author {padding: 50px 0 30px 0; border-bottom: 1px solid #CCCCCC; margin-bottom: 20px;} #blog .postwrap .details {padding-left: 100px; margin-bottom: 20px;} #blog .postwrap .details img {width: auto; height: 75px; float: left; margin-right: 30px;} #blog .author img {width: auto; height: 125px; float: left; margin-right: 50px;} #blog .postwrap .details .meta, #blog .author .meta {float: left;} #blog .postwrap .details h3, #blog .author h3 {color: #6499CD; padding-top: 20px;} #blog .postwrap .details .post-categories {float: right; text-align: right; padding-top: 20px;} #blog .postwrap .details .post-categories li {} #blog .postwrap .details .post-categories a {color: #6499CD;} #blog .postwrap .date {float: left; width: 72px; height: 51px; background: url(images/datebg.png) no-repeat center; text-align: center; padding-top: 30px; margin-right: 15px;} #blog .postwrap .date p {font-size: 14px; color: #9D9C9C;} #blog .postwrap .date p span {font-size: 18px;} #blog .postwrap .post {width: 650px; float: right;} #blog .postwrap .post .postimg, #blog .postwrap .singlepost .postimg {width: 100%; height: 250px; margin-bottom: 15px;} #blog .postwrap .post a h2 {color: #6499CD; margin-bottom: 15px;} #blog .postwrap .post a.readmore {font-weight: bold; color: #6499CD; font-size: 13px;} #blog .postwrap .singlepost h1, #blog .postwrap .singlepost h2, #blog .postwrap .singlepost h3, #blog .postwrap .singlepost h4, #blog .postwrap .singlepost h5 {color: #6499CD;} #blog .postwrap .singlepost p {padding-bottom: 20px; color: #4D4D4D;} #blog .postwrap .singlepost a {color: #6499CD;} #blog .postwrap .singlepost ul, #blog .postwrap .singlepost ol {margin: 20px 0 20px 30px;} #blog .postwrap .singlepost ul li {list-style-type: disc; color: #4D4D4D; padding: 6px 0;} #blog .postwrap .singlepost ol li {color: #4D4D4D; padding: 6px 0;} #contact .contact {padding: 40px 0;} #contact .contact .left {width: 700px; float: left;} #contact .contact .right {width: 300px; float: right;} #contact .contact .right h2 {font-family: montserratsbold; color: #6EBAE9; text-transform: uppercase; margin: 25px 0 5px;} #contact .contact .right p, #contact .contact .right a {color: #000; font-size: 12px; line-height: 14px;} #contact .contact .right ul {margin-bottom: 20px;} #contact .contact .right li {display: inline-block; margin-right: 20px; vertical-align: bottom;} #about .imagetitle {margin: 0 auto;} #about h2, #about h3 {padding-bottom: 15px;} #about p {padding-bottom: 10px;} #about a.button {font-family: montserratsbold; background: #91C6EA; color: #fff; padding: 15px 0; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-right: 1px solid #9ABDD8; border-bottom: 2px solid #9ABDD8; text-transform: uppercase; display: block; width: 220px; text-align: center; margin: 30px auto 0;} #about .team {float: left; width: 50%; height: 650px;} #about .team .image {width: 100%; height: 500px; position: relative;} #about .team .details {height: 130px; text-align: center; padding: 10px;} #about .team .details h3 {padding-bottom: 15px;} #about .team .details a {display: inline-block; margin: 0 20px; text-indent: -9999px; width: 40px;} #about .team .details a.teamemail {height: 46px; background: url(images/teamemail.png) no-repeat center bottom;} #about .team .details a.teamtwitter {height: 46px; background: url(images/teamtwit.png) no-repeat center bottom;} #about .team .details a.teamemail:hover {background: url(images/teamemailhover.png) no-repeat center bottom;} #about .team .image .overlay {display: none; position: absolute; top: 0; left: 100%; width: 100%; height: 100%; background: #414142; z-index: 999;} #about .team.right .image .overlay {left: auto; right: 100%;} #about .team .image:hover .overlay {display: block;} #about .team .image .overlay:hover {display: none;} #about .team .image .overlay .arrowright {position: absolute; right: -76px; top: 300px;} #about .team .image .overlay .arrowleft {position: absolute; left: -76px; top: 300px;} #about .team .image .overlay .overlayinner {padding: 30px;} #about .team .image .overlay .overlayinner p {padding: 0; color: #fff;} #about .team .image .overlay .overlayinner .service {margin: 20px 0 0;} #about .team .image .overlay .overlayinner .service.twoservs {margin: 60px 0;} #about .team .image .overlay .overlayinner .service .icon {width: 100px; float: left; margin-right: 20px;} #about .team .image .overlay .overlayinner .service .icon img {display: block; margin: 0 auto; max-width: 100%; height: auto;} #about .team .image .overlay .overlayinner .service h3 {font-family: montserratsbold; color: #52A3DA; padding: 0;} #about .team .image .overlay .overlayinner .service p {color: #fff; padding: 0;} #about .press img {display: block; margin: 40px auto;} #about .accreditations img {display: block; margin: 40px auto;} #about .achievements {width: 1100px; margin: 0 auto; text-align: center;} #about .achievements img {display: inline-block; margin: 40px 75px; max-width: 450px; height: auto; vertical-align: middle;} #services ul.links {text-align: center; margin-bottom: 30px;} #services ul.links li {display: inline-block; margin: 0 75px; color: #a7a9ac; position: relative;} #services ul.links li img.icon {display: block; margin: 0 auto 20px;} #services .content1 {padding: 25px 0; background: #52A3DA; text-align: center; position: relative;} #services .content1 h2 {font-family: montserratsbold; margin-bottom: 15px; color: #fff;} #services .content1 p {padding-bottom: 10px; color: #fff;} #services .maincontent {padding: 25px 0; background: #F7F7F7; text-align: center;} #services .maincontent h3 {font-family: montserratsbold; color: #52A3DA; margin-bottom: 15px;} #services .maincontent p {color: #9D9C9C; padding-bottom: 10px;} #services .content2 {margin-bottom: 30px;} #services .maincontent .column, #services .mainfeature .column {width: 230px; display: inline-block; vertical-align: top; margin: 0 20px; text-align: center;} #services .maincontent .column.social {width: 280px; margin: 0 30px 40px;} #services .maincontent .column h3 {font-family: montserratsbold; min-height: 50px;} #services .maincontent .column .image, #services .mainfeature .column .image {height: 90px;} #services .maincontent .column img, #services .mainfeature .column img {display: block; margin: 0 auto; max-height: 70px;} #services .mainfeature .column h3 {font-family: montserratsbold; color: #52A3DA; margin-bottom: 15px;} #services .mainfeature .column p {padding-bottom: 10px;} #services .separator {padding: 50px 0;} #services .separator.seo {background: #f7f7f7;} #services .separator p {color: #9D9C9C;} #services .separator.seo p {color: #9D9C9C;} #services .separator .wrapper {position: relative;} #services .separator a.button {font-family: montserratsbold; display: block; position: absolute; right: 0; top: 50%; margin-top: -25px; height: 50px; line-height: 50px; width: 200px; background: #90C3E7; color: #fff; text-align: center; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;} #services .mainfeature {padding: 70px 0; background: #F7F7F7; position: relative;} #services .mainfeature img.arrow {position: absolute; width: 36px; height: 28px; left: 50%; margin-left: -19px; top: 0;} #services .mainfeature .wrapper {overflow: hidden;} #services .mainfeature h2 {text-transform: uppercase; color: #52A3DA; font-weight: normal; margin-bottom: 40px; text-align: center;} #services .servinfos {text-align: center;} #services .servinfos .servinfo {width: 317px; height: 317px; display: inline-block; margin: 0 -5px -6px 0; position: relative; overflow: hidden;} #services .servinfos .servinfo .overlay {position: absolute; width: 317px; height: 317px; opacity: 0; text-align: center;} #services .servinfos .servinfo:hover .overlay {opacity: 1;} #services .servinfos .servinfo .overlay .icon {display: block; margin: 0 auto 30px; width: 200px; height: 200px;} #services .servinfos .servinfo .overlay h2 {text-transform: uppercase; font-size: 18px; margin-bottom: 10px;} #services .servinfos .servinfo .overlay h3 {text-transform: uppercase; font-size: 14px;} #services .servtile {padding: 40px 0;} #services .servtile:nth-child(odd) {background: #F1F1F2;} #services .servtile .icon {float: left; width: 200px; margin-right: 50px;} #services .servtile .icon img {display: block; margin: 0 auto;} #services .servtile .content {float: left; width: 850px; position: relative;} #services .servtile h2 {color: #52A3DA; margin-bottom: 20px;} #services .servtile p {color: #9D9C9C; width: 600px;} #services .servtile a.tilebutton {position: absolute; right: 0; bottom: 0; display: block; width: 150px; height: 40px; line-height: 40px; background: #52A3DA; color: #fff; text-align: center; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px;} #services .servtile ul.ppclogos {position: absolute; right: 0; top: 0;} #services .servtile ul.ppclogos li {padding-bottom: 5px;} #infographicsingle {background: #f1f1f2;} #infographicsingle .infomainimage {width: 700px; float: left; overflow-y: auto; height: 700px;} #infographicsingle .infomainimage img {width: 100%; height: auto;} #infographicsingle .infotext {width: 400px; float: right; height: 700px;} #infographicsingle .infotext .inner {padding: 25px; position: relative; height: 650px;} /* #infographicsingle .infotext .inner .leftarrow {position: absolute; left: -50px; top: 80px;} */ #infographicsingle .infotext .inner h2 {font-size: 18px; margin-bottom: 10px;} #infographicsingle .infotext .inner p {padding-bottom: 15px; font-size: 14px;} #infographicsingle .infotext .inner ul {position: absolute; right: 0; bottom: 10px;} #infographicsingle .infotext .inner ul li {display: inline-block; margin: 0 2px;} #infographicsingle .infotext .inner ul li:hover {opacity: 0.7;} #casestudysingle {} #casestudysingle .left {width: 700px; float: left; overflow-y: auto; height: 1108px; padding: 50px 25px;} #casestudysingle .left img.cslogo {display: block; margin: 0 auto 30px; max-width: 250px; height: auto;} #casestudysingle .left h2.cstitle {color: #52A3DA; font-weight: normal; text-transform: uppercase; text-align: center;} #casestudysingle .left h3.cssubtitle {color: #52A3DA; font-weight: normal; text-transform: uppercase; text-align: center; margin-bottom: 60px;} #casestudysingle .left .cssection {margin: 25px 0;} #casestudysingle .left .cssection h2 {color: #52A3DA; margin-bottom: 15px;} #casestudysingle .left .cssection p {padding-bottom: 10px; color: #9D9C9C;} #casestudysingle .left .cssection ul {margin: 20px 0 20px 30px;} #casestudysingle .left .cssection li {list-style-type: disc; color: #9D9C9C; padding: 8px 0;} #casestudysingle .left .cssection.cwc img {max-width: 700px; display: block; margin: 20px auto 0; height: auto;} #casestudysingle .left ul.stats {margin-left: 0px;} #casestudysingle .left ul.stats li {height: 40px; line-height: 40px; padding: 5px 0 5px 50px; color: #9D9C9C;} #casestudysingle .right {width: 320px; float: right; padding: 50px 15px; background: #F3F3F4; height: 1008px;} #casestudysingle .right .inner {position: relative; padding-bottom: 50px;} #casestudysingle .right .inner a.backtocs {display: inline-block; text-align: center; background: url(images/prevpost.png) no-repeat left center; color: #000; font-size: 13px; height: 30px; line-height: 30px; padding-left: 30px; margin-top: 30px;} #casestudysingle .right .inner a.backtocs:hover {opacity: 0.7;} #casestudysingle .right h2.company {color: #52A3DA; font-weight: normal; text-transform: uppercase;} #casestudysingle .right h3 {font-weight: normal; text-transform: uppercase; margin-bottom: 30px;} #casestudysingle .right img.photo {display: block; margin: 30px auto; border-radius: 200px;} #casestudysingle .right h2 {color: #52A3DA; font-weight: normal; text-transform: uppercase; text-align: center; font-size: 20px;} #casestudies .casestudygrid {text-align: center; margin: 0 0 50px;} #casestudies .casestudygrid .csinfo {width: 317px; height: 317px; display: inline-block; margin: 0 -5px -6px 0; position: relative; overflow: hidden;} #casestudies .casestudygrid .csinfo .overlay {position: absolute; width: 317px; height: 317px; opacity: 0; text-align: center;} #casestudies .casestudygrid .csinfo:hover .overlay {opacity: 1;} #casestudies .casestudygrid .csinfo .overlay .icon {display: block; margin: 0 auto 30px; padding: 35px; width: 130px; height: 130px;} #casestudies .casestudygrid .csinfo .overlay .icon .iconinner {height: 130px;} #casestudies .casestudygrid .csinfo .overlay h2 {text-transform: uppercase; font-size: 18px; margin-bottom: 10px;} #casestudies .casestudygrid .csinfo .overlay h3 {text-transform: uppercase; font-size: 14px;} #casestudies .separator {padding: 50px 0; background: #90C3E7;} #casestudies .separator p {color: #fff;} #casestudies .separator .wrapper {position: relative;} #casestudies .separator a.button {font-family: montserratsbold; display: block; position: absolute; right: 0; top: 50%; margin-top: -25px; height: 50px; line-height: 50px; width: 200px; background: #fff; color: #90C3E7; text-align: center; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;} #plainpage {padding: 60px 0;} .footer {padding: 60px 0; background: #373736 url(images/footarrow.png) no-repeat center top; text-align: center;} .footer .wrapper {position: relative;} .footer .totop {position: absolute; right: 0; bottom: 0; background: #fff url(images/totop.png) no-repeat center; background-size: 30px 30px; height: 30px; width: 30px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; text-indent: -9999px;} .footer .totop:hover {opacity: 0.7;} .footer .widget {width: 22%; margin: 0 1%; display: inline-block; vertical-align: top; text-align: left;} .footer .widgettitle {text-transform: uppercase; color: #6EBAE9; margin-bottom: 15px; font-weight: normal; margin-bottom: 20px;} .footer .widget p {color: #fff; padding-bottom: 15px; font-size: 14px;} .footer .widget a {color: #fff; padding-bottom: 15px; font-size: 14px;} .footer .widget img {max-width: 100%; height: auto; padding: 5px 0;} .footer .widget a.login {font-family: 'Roboto', sans-serif; color: #fff; background: #6d6f71; padding: 5px 10px; border-radius: 3px;} .footer .widget a.login:hover {background: #49a2da;} .widget ul.social li {display: inline-block; margin-right: 10px;} #blog .right .widget ul.social li {margin-right: 20px;} .widget ul.social li a {display: block; height: 20px; text-indent: -9999px;} .widget ul.social li a.fb {width: 10px; background: url(images/footfb.png) no-repeat center;} .widget ul.social li a.twit {width: 23px; background: url(images/foottwit.png) no-repeat center;} .widget ul.social li a.link {width: 21px; background: url(images/footlink.png) no-repeat center;} .widget ul.social li a.goo {width: 31px; background: url(images/footgoo.png) no-repeat center;} .widget ul.social li a.fb:hover {background: url(images/footfba.png) no-repeat center;} .widget ul.social li a.twit:hover {background: url(images/foottwita.png) no-repeat center;} .widget ul.social li a.link:hover {background: url(images/footlinka.png) no-repeat center;} .widget ul.social li a.goo:hover {background: url(images/footgooa.png) no-repeat center;} .footertext {text-align: left; padding: 20px 0 0 30px;} .footertext a, .footertext p {color: #8C8E91; font-size: 13px;} .error404wrap {height: 100vh; background: rgba(0,0,0,0.7);} .error404 {padding: 50px 0;} .errorwrap {width: 900px; margin: 0 auto;} .errorimg {float: left; margin-right: 50px;} .errorcontent {float: left; max-width: 680px;} .errorcontent h5 {font-family: montserratsbold; font-size: 26px; color: #fff; font-weight: normal; margin-bottom: 20px;} .errorcontent p {font-family: bitterreg; color: #fff; padding-bottom: 10px; font-size: 16px;} .errorcontent a {color: #fff; text-decoration: underline;} .errorcontent ul {margin: 30px 0;} .errorcontent ul li {display: inline-block; margin: 0 50px; color: #fff; text-align: center;} .errorcontent ul li img {display: block; margin: 0 auto 20px;} @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { .widget ul.social li a.fb {width: 10px; background: url(images/footfb@2x.png) no-repeat center; background-size: 10px 20px;} .widget ul.social li a.twit {width: 23px; background: url(images/foottwit@2x.png) no-repeat center; background-size: 23px 18px;} .widget ul.social li a.link {width: 21px; background: url(images/footlink@2x.png) no-repeat center; background-size: 21px 20px;} .widget ul.social li a.goo {width: 31px; background: url(images/footgoo@2x.png) no-repeat center; background-size: 31px 20px;} .widget ul.social li a.fb:hover {background: url(images/footfba@2x.png) no-repeat center; background-size: 10px 20px;} .widget ul.social li a.twit:hover {background: url(images/foottwita@2x.png) no-repeat center; background-size: 23px 18px;} .widget ul.social li a.link:hover {background: url(images/footlinka@2x.png) no-repeat center; background-size: 21px 20px;} .widget ul.social li a.goo:hover {background: url(images/footgooa@2x.png) no-repeat center; background-size: 31px 20px;} } #comments {width: 500px;} .comments-title {margin-bottom: 20px;} .commentlist {margin-bottom: 30px;} .commentlist li {list-style-type: none; margin: 15px 0; padding: 15px 0;} .commentlist .depth-1 {border-bottom: 1px solid #000;} .commentlist .children {margin-left: 40px;} .comment-form-author, .comment-form-email, .comment-form-url, .comment-form-comment {width: 200px;} #comments input, #comments textarea {padding: 3px; border: 1px solid #000;} .form-allowed-tags {display: none;} .navigation li a, .navigation li a:hover, .navigation li.active a, .navigation li.disabled {color: #fff; text-decoration:none;} .navigation li {display: inline;} .navigation li a, .navigation li a:hover, .navigation li.active a, .navigation li.disabled {background-color: #6FB7E9; border-radius: 3px; cursor: pointer; padding: 12px; padding: 0.75rem;} .navigation li a:hover, .navigation li.active a {background-color: #3C8DC5;} .gform_wrapper {margin-top: 50px!important; max-width: 100%!important;} #contact .gform_wrapper {margin-top: 0!important;} #casestudysingle .right .gform_wrapper {max-width: 320px!important;} .gform_wrapper label {display: none!important;} .gfield_required, .gform_confirmation_message {color: #1572b8;} .gform_wrapper .gform_body li.gfield {margin-bottom: 25px!important;} .gform_wrapper input, .gform_wrapper textarea {padding: 10px 5%!important; border-radius: 20px;} #contact .gform_wrapper input[type="text"], #contact .gform_wrapper textarea {background: #EDEDED; width: 89%!important;} #casestudysingle .right .gform_wrapper input[type="text"] {width: 90%!important;} .gform_wrapper .gform_footer {margin: 0!important;} .gform_footer .button {font-family: montserratxbold; background: #F0D43F; color: #fff; padding: 15px 0!important; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; display: block!important; margin: 0 auto; border-right: 1px solid #D5BC39; border-bottom: 2px solid #D5BC39; width: 220px; text-align: center; cursor: pointer;} .gform_wrapper div.validation_error, .gform_wrapper .ginput_container + .gfield_description.validation_message {display: none;} .gform_wrapper li.gfield.gfield_error.gfield_contains_required, .gform_wrapper li.gfield.gfield_error, .gform_wrapper li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning {margin: 0!important; padding: 0!important;} .gform_wrapper li.gfield.gfield_error, .gform_wrapper li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning {border: 0!important; background-color: transparent!important;} .gform_wrapper li.gfield.gfield_error.gfield_contains_required {padding-left: 0!important;} .gform_wrapper .top_label li.gfield.gf_left_half input.large, .gform_wrapper .top_label li.gfield.gf_left_half input.medium, .gform_wrapper .top_label li.gfield.gf_left_half select.large, .gform_wrapper .top_label li.gfield.gf_left_half select.medium, .gform_wrapper .top_label li.gfield.gf_right_half input.large, .gform_wrapper .top_label li.gfield.gf_right_half input.medium, .gform_wrapper .top_label li.gfield.gf_right_half select.large, .gform_wrapper .top_label li.gfield.gf_right_half select.medium {width: 91%!important;} .gform_wrapper .gform_body input#input_1_1, .gform_wrapper .gform_body input#input_4_1 {background: #fff url(images/inputname.png) no-repeat 95% center;} .gform_wrapper .gform_body input#input_1_2, .gform_wrapper .gform_body input#input_4_3 {background: #fff url(images/inputnumber.png) no-repeat 95% center;} .gform_wrapper .gform_body input#input_1_3, .gform_wrapper .gform_body input#input_4_2 {background: #fff url(images/inputemail.png) no-repeat 95% center;} .gform_wrapper .gform_body input#input_1_4, .gform_wrapper .gform_body input#input_4_4 {background: #fff url(images/inputurl.png) no-repeat 95% center;} #contact .gform_wrapper .gform_body li#field_3_1 {padding-left: 40px; background: url(images/contname.png) no-repeat left center;} #contact .gform_wrapper .gform_body li#field_3_2 {padding-left: 40px; background: url(images/contemail.png) no-repeat left center;} #contact .gform_wrapper .gform_body li#field_3_3 {padding-left: 40px; background: url(images/contphone.png) no-repeat left center;} #contact .gform_wrapper .gform_body li#field_3_4 {padding-left: 40px; background: url(images/conturl.png) no-repeat left center;} #contact .gform_wrapper .gform_body li#field_3_5 {padding-left: 40px; background: url(images/contcom.png) no-repeat left 5px;} #contact .gform_wrapper .gform_footer input {float: left; margin-left: 40px;} @media all and (max-width : 1100px) { #header {padding: 10px 0;} .wrapper {width: 98%;} .imagetitle {width: auto;} .imagetitle h2.image span:before, .imagetitle h2.image span:after {width: 90%;} img {max-width: 100%;} #about .achievements {width: auto;} #infographicsingle .infotext {float: none; width: auto; height: auto;} #infographicsingle .infomainimage {float: none; margin: 20px auto 0;} #infographicsingle .infotext .inner img {height: auto;} #infographicsingle .infotext .inner {text-align: center; height: auto;} #casestudysingle .right {float: none; width: auto; height: auto;} #casestudysingle .right .gform_wrapper {max-width: 100%!important;} #casestudysingle .left {float: none; margin: 20px auto 0;} #blog .left, .singlehead .left {width: 70%;} #blog .right {width: 25%;} #blog .postwrap .details {padding-left: 10%;} #blog .postwrap .date {width: 10%; margin-right: 2%; background-size: contain;} #blog .postwrap .post {width: 87%;} .contactfwimg {height: 300px!important; background-size: 100% auto!important;} #contact .contact .left {width: 70%;} #contact .contact .right {width: 25%;} #header p.number a {color: #52A3DA;} .landingfootimg {height: 300px;} } @media all and (max-width : 1000px) { #home .icons ul li img {height: auto; max-height: 70px;} #home .services .servcont {width: 55%;} #home .services {background-position: left top; background-size: 45% 100%;} .app {height: 350px;} .blogsection .left {width: 50%; float: none; margin: 0 auto;} .blogsection .left h2 {text-align: center;} .blogsection .right {float: none; margin: 20px auto 0;} .footer .widget {width: 47%; margin: 20px 1%;} #home .whowearecontent {width: 90%;} #home .clients .review {width: 45%; margin: 0 2%;} .imagetitle h2.image span:before, .imagetitle h2.image span:after {width: 75%;} #about .team .image .overlay .overlayinner p {font-size: 13px;} #landing .cta .left {width: 50%;} #landing .cta .form {width: 40%; margin: 0;} .landingfootimg {height: 250px;} } @media all and (max-width : 900px) { #home #intro ul li {margin: 0 45px;} #home .icons ul li, #home .clients ul li {width: 40%; margin: 20px;} #home .clients .review {width: 90%; margin: 20px 0;} .imagetitle h2.image span:before, .imagetitle h2.image span:after {width: 65%;} .imagetitle p {padding: 0;} #services ul.links li {margin: 0 40px;} .contactfwimg {height: 200px!important;} #landing .cta .left {width: auto; float: none;} #landing .cta .form {width: auto; float: none;} #landing .reviews .review {margin: 20px 50px;} #landing .cta .left .clientcols .clientcol {width: 30%; margin: 0 30px 20px;} } @media all and (max-width : 800px) { #home .videowrap {width: 100%;} #home .seoprocess .buttons li, #home .whoweare .buttons li {margin: 0 40px;} #header .menu li {margin-right: 25px;} #home .cta {height: auto;} #home .services {background-size: 50% 100%;} #about .team {float: none; margin: 0 auto; width: 70%;} #about .team .image .overlay {left: 0;} #about .team.right .image .overlay {right: 0;} #about .team .image .overlay .arrowleft, #about .team .image .overlay .arrowright {display: none;} #infographicsingle .infotext .inner ul {display: none;} .imagetitle h2.image span:before, .imagetitle h2.image span:after {display: none;} #casestudysingle .left {width: 90%;} #blog .right {display: none;} #blog .left, .singlehead .left {width: auto;} #landing .roi img {height: auto;} .landingfootimg {height: 200px;} #landing .videowrap {width: auto;} } @media all and (max-width : 720px) { #infographicsingle .infomainimage {width: auto;} } @media all and (max-width : 700px) { #home .services {background-image: none;} #home .services .servcont {float: none; width: 65%; margin: 0 auto;} #home .whyus .column {width: auto; margin: 30px 0;} #header p.number {padding-bottom: 10px;} .menu-menu-1-container {margin-top: 15px;} #about .team {height: auto; margin-bottom: 20px;} #about .achievements img {max-width: 100%; margin: 25px 0;} #blog .postwrap .singlepost img {height: auto;} .contactfwimg {height: 160px!important;} #contact .contact .left, #contact .contact .right {float: none; width: 90%; margin: 0 auto;} #contact .contact .right {text-align: center;} #contact .gform_wrapper .gform_footer input {float: none;} #landing .icons ul li {width: 40%; margin: 20px 2%;} } @media all and (max-width : 650px) { #home #intro ul li {margin: 0 20px;} #home #intro {height: 450px;} #home .videowrap {height: 350px;} .blogsection .right {display: none;} .footer .widget {width: 90%; text-align: center;} #home .seoprocess .buttons li, #home .whoweare .buttons li {display: block; margin: 10px auto; width: 220px;} #about .team {width: 90%;} #about .team .image:hover > .overlay, #about .team .image:focus > .overlay {display: block;} #services .servinfos .servinfo:hover .overlay, #services .servinfos .servinfo:focus .overlay {display: block;} #about .press img, #about .accreditations img, #about .achievements img {max-width: 90%;} #services .maincontent .column, #services .mainfeature .column {width: auto; margin: 20px 0;} #services ul.links li {margin: 0 20px;} #services .separator p {text-align: center; padding-bottom: 15px;} #services .separator a.button {position: static; margin: 0 auto;} #landing .videowrap {height: 360px;} } @media all and (max-width : 600px) { #home .intro {height: 350px;} #home #intro h2 {font-size: 24px;} #home #intro p {font-size: 16px;} .gform_wrapper .top_label li.gfield.gf_left_half, .gform_wrapper .top_label li.gfield.gf_right_half {margin: 15px 0!important; width: 96%!important;} #casestudysingle .left {width: 85%;} #casestudysingle .left .cssection p {font-size: 13px;} #blog .postwrap .details {padding-left: 0;} #blog .postwrap .date {float: none; margin: 0 auto 10px; width: 15%;} #blog .postwrap .post {float: none; width: auto;} #landing .videowrap {height: 330px;} #landing .cta .left .clientcols .clientcol .image .helper {height: auto;} #landing .whycontent ul li {display: block; width: auto;} .landingfootimg {display: none;} } @media all and (max-width : 550px) { #home .videowrap {height: 300px;} .app {height: 275px;} .blogsection .left {width: 90%;} #about .team .image .overlay .overlayinner {padding: 10px;} #about .team .image .overlay .overlayinner p {font-size: 12px;} #landing .videowrap {height: 300px;} } @media all and (max-width : 500px) { #header {height: auto; text-align: center;} #home #intro ul {display: none;} #home #intro {height: 300px;} #header .logo {display: block; margin: 0 auto 20px;} #header p.number, #header a.login {float: none; text-align: center;} #services ul.links li {display: block; margin: 20px 0;} #landing .videowrap {height: 270px;} #landing .reviews .review {width: auto;} }