Optimize CSS for http://think.eu/assets/css/site.css

Improve your CSS performance by reducing complexity

Validate CSS for parsing errors and warnings

Check and Cleanup CSS Offenders

  • Complex Selectors196

    Selectors with uneccessary depth and traversal

    Consider simplifying for speed and readability

    .header .valign .logo.align--vertical a {}.ie9 .header .valign .logo.align--vertical a {}nav .list--inline li a {}footer .list--inline a svg {}.section--clients .container .carousel__container .slick-list {}.section--clients .container ul li {}.section--clients .container ul li .img {}.section--clients .container ul li {}.section--news .container ul li {}.section--news .grid .card a {}.section--contact .container ul.list--grid li span {}.section--contact .container ul.list--grid li {}.section--contact .container ul.list--grid li.address {}.section--contact .container ul.list--grid li.address:last-of-type {}.section--contact .container ul.list--grid li.jobs__work {}.section--contact .container ul.list--grid li.jobs__work.work__at {}.section--contact .container ul.list--grid li.address {}#contact.section--contact .container ul.list--grid li .link--plus-minus {}#contact.section--contact .container ul.list--grid li span.icon--plus-minus {}.section--contact .container ul.list--grid li.address {}.section--contact .container ul.list--grid li.address:last-of-type {}.section--contact .container ul.list--grid li {}.section--contact .container ul.list--grid li.jobs__work {}.section--contact .container ul.list--grid li.jobs__work.work__at {}.section--contact .container ul.list--grid li:first-child {}.section--contact .container ul.list--grid li.address {}.section--contact .container ul.list--grid li.address.ncl {}.vue .section--proposition .section__content .intro {}.vue .section__logo svg path {}.vue .nextpage svg path {}.atom .section--proposition .section__content .intro {}.atom .section__logo svg path {}.atom .nextpage svg path {}.britvic .section--proposition .section__content .intro {}.britvic .section__logo svg path {}.britvic .nextpage svg path {}.newlook .section--proposition .section__content .intro {}.newlook .section__logo svg path {}.newlook .nextpage svg path {}.newlook .carousel__panel:not(.slick-center) svg path {}.nandos .section--proposition .section__content .intro {}.nandos .section__logo svg path {}.nandos .nextpage svg path {}.warner .section--proposition .section__content .intro {}.warner .section__logo svg path {}.warner .nextpage svg path {}.pottermore .section--proposition .section__content .intro {}.pottermore .section__logo svg path {}.pottermore .nextpage svg path {}.bupa .section--proposition .section__content .intro {}.bupa .section__logo svg path {}.bupa .nextpage svg path {}.great .section--proposition .section__content .intro {}.great .section__logo svg path {}.great .nextpage svg path {}.fletcher .section--proposition .section__content .intro {}.fletcher .section__logo svg path {}.fletcher .nextpage svg path {}.asos .section--proposition .section__content .intro {}.asos .section__logo svg path {}.asos .nextpage svg path {}.butlins .section--proposition .section__content .intro {}.butlins .section__logo svg path {}.butlins .nextpage svg path {}.toyota .section--proposition .section__content .intro {}.toyota .section__logo svg path {}.toyota .nextpage svg path {}.shopdirect .section--proposition .section__content .intro {}.shopdirect .section__logo svg path {}.shopdirect .nextpage svg path {}.ie9 .carousel__heading .carousel__image .align--vertical {}.ie9 .carousel__heading .carousel__image .align--vertical img {}.mob_anim .active--clients #home .section--proposition {}.mob_anim .active--home #home .section--proposition {}.mob_anim .active--clients #img--shadow img {}.mob_anim .active--home #img--shadow img {}.skrollr .active--clients .section--clients .carousel__panel:not(.slick-center) {}.skrollr .active--news .section--clients .carousel__panel:not(.slick-center) {}.mob_anim .active--why #why_1 h2 {}.mob_anim .active--news #why_1 h2 {}.mob_anim .active--blend #why_1 h2 {}.mob_anim .active--method #why_1 h2 {}.mob_anim .active--how #why_1 h2 {}.mob_anim .active--think #why_1 h2 {}.mob_anim .active--contact #why_1 h2 {}.cssanimations .active--why #why_1 .container .valign {}.cssanimations .active--blend #why_1 .container .valign {}.cssanimations .active--method #why_1 .container .valign {}.cssanimations .active--how #why_1 .container .valign {}.cssanimations .active--think #why_1 .container .valign {}.cssanimations .active--contact #why_1 .container .valign {}.mob_anim .active--contact #why_1 .container .valign {}.mob_anim .active--why #why_1 .container .valign {}.mob_anim .active--blend #why_1 .container .valign {}.mob_anim .active--method #why_1 .container .valign {}.mob_anim .active--how #why_1 .container .valign {}.mob_anim .active--think #why_1 .container .valign {}.mob_anim .active--contact #why_1 .container .valign {}.mob_anim .active--news #why_1 .container .valign {}.mob_anim .active--why #why_1 .container .valign:nth-child(2) {}.mob_anim .active--why #why_1 .container .valign:nth-child(3) {}.skrollr .active--blend #why_2 .circle--wrap {}.skrollr .active--blend #why_2 .circle {}.skrollr .active--method #why_2 .circle {}.skrollr .active--how #why_2 .circle {}.skrollr .active--think #why_2 .circle {}.skrollr .active--contact #why_2 .circle {}.skrollr .active--blend #why_2 .circle.circle--sols {}.skrollr .active--method #why_2 .circle.circle--sols {}.skrollr .active--how #why_2 .circle.circle--sols {}.skrollr .active--think #why_2 .circle.circle--sols {}.skrollr .active--contact #why_2 .circle.circle--sols {}.skrollr .active--blend #why_2 .circle.circle--cons {}.skrollr .active--method #why_2 .circle.circle--cons {}.skrollr .active--how #why_2 .circle.circle--cons {}.skrollr .active--think #why_2 .circle.circle--cons {}.skrollr .active--contact #why_2 .circle.circle--cons {}.skrollr .active--blend #why_2 .circle.circle--agns {}.skrollr .active--method #why_2 .circle.circle--agns {}.skrollr .active--how #why_2 .circle.circle--agns {}.skrollr .active--think #why_2 .circle.circle--agns {}.skrollr .active--contact #why_2 .circle.circle--agns {}.skrollr .active--blend #why_2 .circle.circle--agns {}.skrollr .active--method #why_2 .circle.circle--agns {}.skrollr .active--how #why_2 .circle.circle--agns {}.skrollr .active--think #why_2 .circle.circle--agns {}.skrollr .active--contact #why_2 .circle.circle--agns {}.skrollr .active--blend #why_2 .circle--inner {}.skrollr .active--blended #why_2 .circle--inner {}.skrollr .active--method #why_2 .circle--inner {}.skrollr .active--how #why_2 .circle--inner {}.skrollr .active--think #why_2 .circle--inner {}.skrollr .active--contact #why_2 .circle--inner {}.skrollr #why_2 .circle p {}.skrollr .active--blend #why_2 .circle p {}.skrollr .active--blended #why_2 .circle p {}.skrollr .active--method #why_2 .circle p {}.skrollr .active--how #why_2 .circle p {}.skrollr .active--think #why_2 .circle p {}.skrollr .active--contact #why_2 .circle p {}.skrollr .active--blend #why_2 h2 {}.skrollr .active--blended #why_2 h2 {}.skrollr .active--method #why_2 h2 {}.skrollr .active--how #why_2 h2 {}.skrollr .active--think #why_2 h2 {}.skrollr .active--contact #why_2 h2 {}.ie9.skrollr .active--blend #why_2 h2 {}.ie9.skrollr .active--method #why_2 h2 {}.skrollr .active--blend #why_2 h3 {}.skrollr .active--method #why_2 h3 {}.skrollr .active--how #why_2 h3 {}.skrollr .active--think #why_2 h3 {}.skrollr .active--contact #why_2 h3 {}.mob_anim .active--why #why_2 .circle {}.mob_anim .active--why #why_2 .circle * {}.mob_anim .active--why #why_2 .circle--inner {}.cssanimations .active--how #why_2_1 h2 {}.cssanimations .active--think #why_2_1 h2 {}.cssanimations .active--contact #why_2_1 h2 {}.cssanimations .active--method #why_2_1 h2 {}.mob_anim .active--how #why_2_1 h2 {}.mob_anim .active--think #why_2_1 h2 {}.mob_anim .active--contact #why_2_1 h2 {}.mob_anim .active--method #why_2_1 h2 {}.mob_anim .active--blended #why_2_1 h2 {}.mob_anim .active--method #why_2_1 h2:nth-child(2) {}.mob_anim .active--blend #why_2_1 h2 {}.skrollr #why_3 .wave__content div {}.skrollr .active--how #why_3 .wave__content div {}.skrollr .active--think #why_3 .wave__content div {}.skrollr .active--contact #why_3 .wave__content div {}.skrollr .active--how #why_3 .wave__content div.wave_text_2 {}.skrollr .active--how #why_3 .wave__content div.wave_text_3 {}.skrollr .active--how #why_3 .wave__content div.wave_text_4 {}.mob_anim .active--method #why_3 .wave__content div {}.skrollr .section--contact .list--grid li {}.skrollr .active--contact .section--contact .list--grid li {}.skrollr .active--contact .section--contact .list--grid li.jobs__work.work__at {}.skrollr .active--contact .section--contact .list--grid li.address {}.skrollr .active--contact .section--contact .list--grid li.address.ncl {}.skrollr header nav li {}.skrollr header nav li:nth-child(0) {}.skrollr header nav li:nth-child(1) {}.skrollr header nav li:nth-child(2) {}.skrollr header nav li:nth-child(3) {}.skrollr header nav li:nth-child(4) {}.skrollr header nav li:nth-child(5) {}.skrollr header.skrollable-after nav li {}.active--clients header nav li {}.active--news header nav li {}.active--why header nav li {}.active--blend header nav li {}.active--method header nav li {}.active--how header nav li {}.active--contact header nav li {}.active--joinus header nav li {}
  • Complex Selectors By Attribute2

    Selectors whose attribute value contains a specified value

    Attribute selectors have a slower lookup time

    .ie9 img[src*=".svg"] {}img[src*=".svg"] {}
  • Duplicated Properties38

    Duplicate properties detected for your selector

    Remove or combine duplicate properties to clean up your css

    body {font-size: 2.235vw} #client_items.valign .align--vertical, #why_3.valign .align--vertical {display: flex} footer {background: transparent} footer .list--inline {clear: both} footer .grid {display: flex} .icon--thinklogo {height: 100%} .section--image {position: absolute} .section--image img, .carousel__image img, .section--wave img {width: 100%} .section__logo svg {width: 100%} .section__logo svg {margin: 0} .section--clients .container ul li {margin-right: 0} .section--clients .container ul li {margin-right: 0} .section--news .grid .item:nth-child(2n + 1) {margin-left: 0} .section--news .grid .item__column:nth-child(2n + 1) {margin-left: 0} .section--news .grid .item__column:nth-child(2n + 1) {margin-left: 0} .wave__content {bottom: 1em} .wave #wave--bg {max-width: 1440px} #wave--bg .wave--bg {background-image: url(../images/wave/wave/sml-3.png)} #wave--bg .wave--bg {background-image: url(../images/wave/wave/sml-4.png)} #wave--bg .wave--bg {background-image: url(../images/wave/wave/sml-5.png)} #wave--bg .wave--bg {background-image: url(../images/wave/wave/sml-6.png)} #wave--bg .wave--bg {background-image: url(../images/wave/wave/sml-7.png)} #wave--bg .wave--bg {background-image: url(../images/wave/wave/sml-8.png)} #wave--bg .wave--bg {background-image: url(../images/wave/wave/sml-9.png)} #wave--bg .wave--bg {background-image: url(../images/wave/wave/sml-10.png)} #wave--bg .wave--bg {background-image: url(../images/wave/wave/sml-11.png)} #wave--bg .wave--bg {background-image: url(../images/wave/wave/sml-12.png)} #wave--bg .wave--bg {background-image: url(../images/wave/wave/sml-1.png)} .section--contact .container ul.list--grid li {padding: 0 0 1.5em} .section--join_jobs .container {margin-right: 3.5971223022%} .section--join_jobs .container {margin-left: 4.3165467626%} .section--join_jobs .container {margin-right: 3.5971223022%} .section--join_jobs .container {margin-left: 21.5827338129%} .pppage .section--static .container {margin-right: 3.5971223022%} .pppage .section--static .container {margin-left: 21.5827338129%} .carousel__panel {height: auto} .carousel__heading .carousel__image.first {display: flex} .carousel__heading .carousel__image.first {display: flex} 
  • Duplicated Selectors57
    body {} /* (5 times) */.carousel__panel svg {} /* (4 times) */html {} /* (3 times) */#why {} /* (3 times) */.section__content {} /* (3 times) */.carousel__content {} /* (3 times) */pre {} /* (2 times) */code, kbd, pre, samp {} /* (2 times) */input {} /* (2 times) */input[type="search"] {} /* (2 times) */input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {} /* (2 times) */fieldset {} /* (2 times) */legend {} /* (2 times) */textarea {} /* (2 times) */table {} /* (2 times) */a:hover, a:focus {} /* (2 times) */dl {} /* (2 times) */.icon {} /* (2 times) */.icon svg {} /* (2 times) */.align--left {} /* (2 times) */.valign {} /* (2 times) */.valign .align--vertical {} /* (2 times) */h1, .h1 {} /* (2 times) */#why_1_fixed, #why_3_fixed {} /* (2 times) */.skrollr header {} /* (2 times) */.section--proposition {} /* (2 times) */a {} /* (2 times) */.section--news {} /* (2 times) */small {} /* (2 times) */.section__logo svg {} /* (2 times) */.section--header {} /* (2 times) */.section--carousel .align--vertical {} /* (2 times) */* {} /* (2 times) */.section--think {} /* (2 times) */.section--think svg {} /* (2 times) */#why_1 h2, #why_1_fixed h2 {} /* (2 times) */.wave #wave--bg {} /* (2 times) */.wave__content {} /* (2 times) */img {} /* (2 times) */#wave--bg {} /* (2 times) */.section--contact .container ul.list--grid {} /* (2 times) */.section--join {} /* (2 times) */figure {} /* (2 times) */.slick-slider {} /* (2 times) */.carousel__heading .carousel__image.first {} /* (2 times) */.carousel__container {} /* (2 times) */hr {} /* (2 times) */.mob_anim .active--clients .client--anim {} /* (2 times) */.mob_anim #why_1 {} /* (2 times) */.section--clients {} /* (2 times) */
  • Empty Rules9

    Deteced empty rules

    Reduce the size of your CSS file by removing empty rules

    body {}body {}body {}.carousel__panel svg {}.carousel__panel.slick-current ~ .carousel__panel svg {}.carousel__panel.slick-current svg {}.carousel__panel svg {}.carousel__panel svg {}.carousel__panel.slick-current ~ .carousel__panel svg {}
  • Importants115

    Provides a way for a stylesheet author to give a CSS value more weight than it naturally has

    Avoid usage if at all possible. When you use !important, you’re disrupting the natural flow of your rules, giving more weight to rules that are undeserving of such weight

    .left {float: left !important} .right {float: right !important} .hide {display: none !important} .hide--small {display: none !important} .hide--small-med {display: none !important} .hide--med-large {display: none !important} .hide--med {display: none !important} .hide--large {display: none !important} .show--large {display: initial !important} .show--med {display: initial !important} .show--small {display: initial !important} .show--med-large {display: initial !important} .show--small-med {display: initial !important} .align--left {text-align: left !important} header.static {-webkit-transform: translate(0, 0em) !important} header.static {-ms-transform: translate(0, 0em) !important} header.static {transform: translate(0, 0em) !important} .skrollr-mobile header {-webkit-transform: translate(0, -5em) !important} .skrollr-mobile header {-ms-transform: translate(0, -5em) !important} .skrollr-mobile header {transform: translate(0, -5em) !important} footer {font-size: 27px !important} .section--behind {z-index: 0 !important} .section__logo .container, .section--image .container, .carousel__image .container, .section--wave .container {padding: 0 !important} .section--logo .container {padding: 0 !important} .section--logo, .section--header {margin-top: -3em !important} .section--logo, .section--header {margin-top: -2em !important} .section--logo, .section--header {margin-top: -2em !important} .section--logo, .section--header {margin-top: -2em !important} .section--logo .container {padding: 0 !important} .section--logo, .section--header {margin-top: -3em !important} .section--logo .container {padding: 0 !important} .section--logo, .section--header {margin-top: -2em !important} .section--logo, .section--header {margin-top: -3em !important} .section--news .card.hide--small.visible {display: block !important} .section--news .card.hide--small.visible.animate {-webkit-transform: none !important} .section--news .card.hide--small.visible.animate {-ms-transform: none !important} .section--news .card.hide--small.visible.animate {transform: none !important} .section--think .align--vertical {height: auto !important} .section--think svg path {fill: #3c96a0 !important} .circle--agns p {padding-top: 20% !important} .circle--cons {margin-left: 0 !important} .circle--sols {margin-right: 0 !important} .circle--agns {top: 7.75em !important} .active--blended .circle--agns {top: 6.75em !important} .wave #wave--bg {margin: 0 !important} .wave__content {bottom: 0 !important} .arrow-down {display: none !important} .wave__content {-webkit-transform: none !important} .wave__content {-ms-transform: none !important} .wave__content {transform: none !important} .wave__content {-webkit-transform: none !important} .wave__content {-ms-transform: none !important} .wave__content {transform: none !important} .ie9 .wave #wave--bg {width: 100% !important} .ie9 .wave #wave--bg {max-width: 100% !important} .ie9 .wave #wave--bg {margin: 2% 0 -8% !important} #wave--bg img {margin: 0 auto !important} #wave--bg .wave--bg_1 {background-image: url(../images/wave/wave/sml-1.png) !important} #wave--bg .wave--bg_2 {background-image: url(../images/wave/wave/sml-2.png) !important} #wave--bg .wave--bg_3 {background-image: url(../images/wave/wave/sml-3.png) !important} #wave--bg .wave--bg_4 {background-image: url(../images/wave/wave/sml-4.png) !important} #wave--bg .wave--bg_5 {background-image: url(../images/wave/wave/sml-5.png) !important} #wave--bg .wave--bg_6 {background-image: url(../images/wave/wave/sml-6.png) !important} #wave--bg .wave--bg_7 {background-image: url(../images/wave/wave/sml-7.png) !important} #wave--bg .wave--bg_8 {background-image: url(../images/wave/wave/sml-8.png) !important} #wave--bg .wave--bg_9 {background-image: url(../images/wave/wave/sml-9.png) !important} #wave--bg .wave--bg_10 {background-image: url(../images/wave/wave/sml-10.png) !important} #wave--bg .wave--bg_11 {background-image: url(../images/wave/wave/sml-11.png) !important} #wave--bg .wave--bg_12 {background-image: url(../images/wave/wave/sml-12.png) !important} .wave--bg {background-color: transparent !important} .section--join svg path {fill: #4C3A69 !important} span.pin svg path {fill: #242424 !important} .job {border-bottom: 0 !important} .newlook .carousel__panel:not(.slick-center) svg path, .carousel__panel:not(.slick-center) #path2996, .carousel__panel:not(.slick-center) #path3768, .carousel__panel:not(.slick-center) #path3772, .carousel__panel:not(.slick-center) #path3776, .carousel__panel:not(.slick-center) #path3787, .carousel__panel:not(.slick-center) #path3770, .carousel__panel:not(.slick-center) #path3789, .carousel__panel:not(.slick-center) #path3791, .carousel__panel:not(.slick-center) #path3782, .carousel__panel:not(.slick-center) #path3785, .carousel__panel:not(.slick-center) svg circle {stroke: #9B9C9C !important} .carousel__panel:not(.slick-center) svg circle {fill: #9B9C9C !important} .carousel__panel svg {height: 4em !important} .ie9 .carousel__heading .carousel__image .align--vertical {max-width: 1440px !important} .carousel__container {margin-left: 10% !important} .carousel__container {margin-right: 10% !important} .skrollr #client_highlight {z-index: 2 !important} .skrollr .active--clients #client_highlight {z-index: 0 !important} .mob_anim #why {overflow: hidden !important} .mob_anim #why_1 {transition: none !important} .mob_anim #why_1 {opacity: 1 !important} .cssanimations .active--why #why_1 .container .valign, .cssanimations .active--blend #why_1 .container .valign, .cssanimations .active--method #why_1 .container .valign, .cssanimations .active--how #why_1 .container .valign, .cssanimations .active--think #why_1 .container .valign, .cssanimations .active--contact #why_1 .container .valign {-webkit-transform: translate(0, 0em) !important} .cssanimations .active--why #why_1 .container .valign, .cssanimations .active--blend #why_1 .container .valign, .cssanimations .active--method #why_1 .container .valign, .cssanimations .active--how #why_1 .container .valign, .cssanimations .active--think #why_1 .container .valign, .cssanimations .active--contact #why_1 .container .valign {-ms-transform: translate(0, 0em) !important} .cssanimations .active--why #why_1 .container .valign, .cssanimations .active--blend #why_1 .container .valign, .cssanimations .active--method #why_1 .container .valign, .cssanimations .active--how #why_1 .container .valign, .cssanimations .active--think #why_1 .container .valign, .cssanimations .active--contact #why_1 .container .valign {transform: translate(0, 0em) !important} .mob_anim .active--contact #why_1 .container .valign {-webkit-transform: translate(0, 0em) !important} .mob_anim .active--contact #why_1 .container .valign {-ms-transform: translate(0, 0em) !important} .mob_anim .active--contact #why_1 .container .valign {transform: translate(0, 0em) !important} #why_1_fixed, #why_3_fixed {display: none !important} #why {opacity: 1 !important} .cssanimations .active--blend #why_1_fixed, .cssanimations .active--contact #why_3_fixed {display: block !important} .cssanimations .active--blend #why, .cssanimations .active--contact #how {opacity: 0 !important} .cssanimations.mob_anim .active--blend #why_1_fixed, .cssanimations.mob_anim .active--contact #why_3_fixed {display: none !important} .cssanimations.mob_anim .active--blend #why, .cssanimations.mob_anim .active--contact #how {opacity: 1 !important} .ie9 #why_1_fixed, .ie9 #why_3_fixed, .skrollr-mobile #why_1_fixed, .skrollr-mobile #why_3_fixed {-webkit-transform: none !important} .ie9 #why_1_fixed, .ie9 #why_3_fixed, .skrollr-mobile #why_1_fixed, .skrollr-mobile #why_3_fixed {-ms-transform: none !important} .ie9 #why_1_fixed, .ie9 #why_3_fixed, .skrollr-mobile #why_1_fixed, .skrollr-mobile #why_3_fixed {transform: none !important} .skrollr .active--blend #why_2 .circle.circle--agns, .skrollr .active--method #why_2 .circle.circle--agns, .skrollr .active--how #why_2 .circle.circle--agns, .skrollr .active--think #why_2 .circle.circle--agns, .skrollr .active--contact #why_2 .circle.circle--agns {top: 6.8em !important} .ie9.skrollr #why_2 h2, .ie9.skrollr .active--blend #why_2 h2, .ie9.skrollr .active--method #why_2 h2 {-webkit-transform: translate(0, 0em) !important} .ie9.skrollr #why_2 h2, .ie9.skrollr .active--blend #why_2 h2, .ie9.skrollr .active--method #why_2 h2 {-ms-transform: translate(0, 0em) !important} .ie9.skrollr #why_2 h2, .ie9.skrollr .active--blend #why_2 h2, .ie9.skrollr .active--method #why_2 h2 {transform: translate(0, 0em) !important} .ie9.skrollr #why_2 h2, .ie9.skrollr .active--blend #why_2 h2, .ie9.skrollr .active--method #why_2 h2 {transition: -webkit-transform 0s !important} .ie9.skrollr #why_2 h2, .ie9.skrollr .active--blend #why_2 h2, .ie9.skrollr .active--method #why_2 h2 {transition: transform 0s !important} .ie9.skrollr #why_2 h2, .ie9.skrollr .active--blend #why_2 h2, .ie9.skrollr .active--method #why_2 h2 {transition-delay: 0 !important} .notrans * {transition: none !important} .notrans * {transition-delay: 0 !important} .mob_anim .active--why #why_2 .circle, .mob_anim .active--why #why_2 .circle *, .mob_anim .active--why #why_2 .circle--inner {transition: all 2s !important} .cssanimations .active--how #why_2_1 h2, .cssanimations .active--think #why_2_1 h2, .cssanimations .active--contact #why_2_1 h2, .cssanimations .active--method #why_2_1 h2 {-webkit-transform: translate(0, 0em) !important} .cssanimations .active--how #why_2_1 h2, .cssanimations .active--think #why_2_1 h2, .cssanimations .active--contact #why_2_1 h2, .cssanimations .active--method #why_2_1 h2 {-ms-transform: translate(0, 0em) !important} .cssanimations .active--how #why_2_1 h2, .cssanimations .active--think #why_2_1 h2, .cssanimations .active--contact #why_2_1 h2, .cssanimations .active--method #why_2_1 h2 {transform: translate(0, 0em) !important} .skrollr-desktop #bg--middle {display: none !important} .mob_anim #bg--bottom, .mob_anim #bg--middle {display: none !important} .active--joinus #bg--bottom {background: #fcf18e !important} 
  • Multi Classes Selectors116

    Selectors with multiple classes

    Unnecessary specificity, consider reducing to single class or id instead

    .formfield__error.formfield__error--warning {}.formfield__error.formfield__error--success {}.formfield__error.formfield__error--error {}.formfield__error.formfield__error--info {}.clavo.italic {}.clavo.thin {}.clavo.italic.thin {}.clavo.ultra-light {}.clavo.italic.ultra-light {}.clavo.extra-light {}.clavo.extra-light.italic {}.clavo.light {}.clavo.italic.light {}.clavo.medium {}.clavo.italic.medium {}.bold.clavo {}.bold.clavo.italic {}.clavo.extra-bold {}.clavo.extra-bold.italic {}.black.clavo {}.black.clavo.italic {}.book.clavo {}.book.clavo.italic {}.averta.extra-thin {}.averta.thin {}.averta.light {}.averta.medium {}.averta.bold {}.averta.extra-bold {}.averta.black {}.averta.italic {}.link.yellow {}.link.yellow {}.green.link {}.green.link {}.blue.link {}.blue.link {}.empty.link {}.empty.link {}.align--vertical.logo {}.align--vertical.logo {}.align--vertical.logo {}.clavo.ultra-light {}.clavo.ultra-light {}.lock.scrollenabled {}.lock.scrollenabled {}.card.hide--small.visible {}.animate.card.hide--small.visible {}.arrow-down.arrow-down__0 {}.arrow-down.arrow-down__1 {}.arrow-down.arrow-down__2 {}.secondary.wave--bg {}.active.wave--bg {}.link--plus-minus.open {}.jobs__work.work__at {}.link--plus-minus.open {}.jobs__work.work__at {}.address.ncl {}.careers.main {}.careers.main {}.careers.main {}.careers.main {}.careers.main {}.careers.main {}.careers.main {}.careers.main {}.careers.main {}.careers.main {}.careers.main {}.careers.main {}.careers.main {}.carousel__panel.slick-center {}.carousel__panel.slick-current {}.carousel__panel.slick-current {}.carousel__image.first {}.carousel__image.first {}.carousel__image.first {}.carousel__image.first {}.carousel__image.first {}.carousel__image.first {}.carousel__panel.slick-current {}.cssanimations.mob_anim {}.cssanimations.mob_anim {}.cssanimations.mob_anim {}.cssanimations.mob_anim {}.cssanimations.skrollr-desktop {}.cssanimations.skrollr-desktop {}.cssanimations.skrollr-desktop {}.cssanimations.skrollr-desktop {}.circle.circle--sols {}.circle.circle--sols {}.circle.circle--sols {}.circle.circle--sols {}.circle.circle--sols {}.circle.circle--cons {}.circle.circle--cons {}.circle.circle--cons {}.circle.circle--cons {}.circle.circle--cons {}.circle.circle--agns {}.circle.circle--agns {}.circle.circle--agns {}.circle.circle--agns {}.circle.circle--agns {}.circle.circle--agns {}.circle.circle--agns {}.circle.circle--agns {}.circle.circle--agns {}.circle.circle--agns {}.circle.circle--agns {}.ie9.skrollr {}.ie9.skrollr {}.ie9.skrollr {}.jobs__work.work__at {}.address.ncl {}.link--plus-minus.open {}
  • Old Property Prefixes42

    Properties with a no longer needed vendor prefix

    These have since been integrated or removed from mentioned browsers and can safely be removed from CSS

    .header .link:after { -ms-transform: scaleX(0.0001) } // was required by IE 9 and earlier .header .link:hover:after { -ms-transform: scaleX(1) } // was required by IE 9 and earlier header.static { -ms-transform: translate(0, 0em) !important } // was required by IE 9 and earlier .skrollr-mobile header { -ms-transform: translate(0, -5em) !important } // was required by IE 9 and earlier header { -ms-transform: translate(0, -5em) } // was required by IE 9 and earlier .icon rect, .icon path, .icon__spin-target { -ms-transform-origin: 50% 50% } // was required by IE 9 and earlier .card__drop { -ms-transform-origin: 50% 50% } // was required by IE 9 and earlier .section--header { -ms-transform-origin: 50% 5% } // was required by IE 9 and earlier .section--news .card.hide--small.visible.animate { -ms-transform: none !important } // was required by IE 9 and earlier .circle p { -ms-transform-origin: 50% 80% } // was required by IE 9 and earlier .wave__content { -ms-transform: none !important } // was required by IE 9 and earlier .wave__content { -ms-transform: none !important } // was required by IE 9 and earlier .carousel__panel svg { -ms-transform: scale(1) } // was required by IE 9 and earlier .carousel__panel.slick-center svg { -ms-transform: scale(1) } // was required by IE 9 and earlier .carousel__panel svg { -ms-transform: scale(0.7) } // was required by IE 9 and earlier .mob_anim .client--anim { -ms-transform: scale(1) } // was required by IE 9 and earlier .mob_anim .active--clients .client--anim { -ms-transform: scale(0.75) translate(0, 2.5em) } // was required by IE 9 and earlier .mob_anim .active--home .client--anim { -ms-transform: scale(1) } // was required by IE 9 and earlier .skrollr header { -ms-transform: translate(0, -5em) } // was required by IE 9 and earlier .skrollr .active--clients header, .skrollr .active--news header, .skrollr .active--why header, .skrollr .active--blend header, .skrollr .active--blended header, .skrollr .active--method header, .skrollr .active--how header, .skrollr .active--think header, .skrollr .active--contact header, .skrollr .active--joinus header { -ms-transform: translate(0, 0em) } // was required by IE 9 and earlier .mob_anim #why_1 h2 { -ms-transform: translate(0, 10em) } // was required by IE 9 and earlier .mob_anim .active--why #why_1 h2, .mob_anim .active--news #why_1 h2, .mob_anim .active--blend #why_1 h2, .mob_anim .active--method #why_1 h2, .mob_anim .active--how #why_1 h2, .mob_anim .active--think #why_1 h2, .mob_anim .active--contact #why_1 h2 { -ms-transform: translate(0, 0em) } // was required by IE 9 and earlier .cssanimations .active--why #why_1 .container .valign, .cssanimations .active--blend #why_1 .container .valign, .cssanimations .active--method #why_1 .container .valign, .cssanimations .active--how #why_1 .container .valign, .cssanimations .active--think #why_1 .container .valign, .cssanimations .active--contact #why_1 .container .valign { -ms-transform: translate(0, 0em) !important } // was required by IE 9 and earlier .mob_anim .active--contact #why_1 .container .valign { -ms-transform: translate(0, 0em) !important } // was required by IE 9 and earlier .ie9 #why_1_fixed, .ie9 #why_3_fixed, .skrollr-mobile #why_1_fixed, .skrollr-mobile #why_3_fixed { -ms-transform: none !important } // was required by IE 9 and earlier .mob_anim #why_1 .valign { -ms-transform: translate(0, 40em) } // was required by IE 9 and earlier .mob_anim .active--why #why_1 .container .valign, .mob_anim .active--blend #why_1 .container .valign, .mob_anim .active--method #why_1 .container .valign, .mob_anim .active--how #why_1 .container .valign, .mob_anim .active--think #why_1 .container .valign, .mob_anim .active--contact #why_1 .container .valign { -ms-transform: translate(0, 0em) } // was required by IE 9 and earlier .skrollr .active--blend #why_2 .circle--wrap { -ms-transform: translate(0, 0em) } // was required by IE 9 and earlier .skrollr .active--blend #why_2 .circle, .skrollr .active--method #why_2 .circle, .skrollr .active--how #why_2 .circle, .skrollr .active--think #why_2 .circle, .skrollr .active--contact #why_2 .circle { -ms-transform: translate(0, -3em) } // was required by IE 9 and earlier .skrollr #why_2 h2 { -ms-transform: translate(0, 0em) } // was required by IE 9 and earlier .skrollr .active--blend #why_2 h2, .skrollr .active--blended #why_2 h2, .skrollr .active--method #why_2 h2, .skrollr .active--how #why_2 h2, .skrollr .active--think #why_2 h2, .skrollr .active--contact #why_2 h2 { -ms-transform: translate(0, -20em) } // was required by IE 9 and earlier .ie9.skrollr #why_2 h2, .ie9.skrollr .active--blend #why_2 h2, .ie9.skrollr .active--method #why_2 h2 { -ms-transform: translate(0, 0em) !important } // was required by IE 9 and earlier .cssanimations .active--how #why_2_1 h2, .cssanimations .active--think #why_2_1 h2, .cssanimations .active--contact #why_2_1 h2, .cssanimations .active--method #why_2_1 h2 { -ms-transform: translate(0, 0em) !important } // was required by IE 9 and earlier .mob_anim #why_2_1 h2 { -ms-transform: translate(0, 40em) } // was required by IE 9 and earlier .mob_anim .active--how #why_2_1 h2, .mob_anim .active--think #why_2_1 h2, .mob_anim .active--contact #why_2_1 h2 { -ms-transform: translate(0, 0em) } // was required by IE 9 and earlier .mob_anim .active--method #why_2_1 h2 { -ms-transform: translate(0, 0em) } // was required by IE 9 and earlier .skrollr #why_3 .wave__content div { -ms-transform: translate(0, 40em) } // was required by IE 9 and earlier .skrollr .active--how #why_3 .wave__content div, .skrollr .active--think #why_3 .wave__content div, .skrollr .active--contact #why_3 .wave__content div { -ms-transform: translate(0, 0em) } // was required by IE 9 and earlier .client--anim { -ms-transform-origin: 50% 20% } // was required by IE 9 and earlier .skrollr .section--contact .list--grid li { -ms-transform: translate(0, 1em) } // was required by IE 9 and earlier .skrollr .active--contact .section--contact .list--grid li { -ms-transform: translate(0, -2em) } // was required by IE 9 and earlier .client--anim { -ms-transform-origin: 50% 35% } // was required by IE 9 and earlier 
  • Property Resets8
    .mob_anim .active--news .client--anim: "transition" resets "transition-timing-function" property set earlier .mob_anim .active--why .client--anim: "transition" resets "transition-timing-function" property set earlier .mob_anim .active--blend .client--anim: "transition" resets "transition-timing-function" property set earlier .mob_anim .active--blended .client--anim: "transition" resets "transition-timing-function" property set earlier .mob_anim .active--method .client--anim: "transition" resets "transition-timing-function" property set earlier .mob_anim .active--how .client--anim: "transition" resets "transition-timing-function" property set earlier .mob_anim .active--think .client--anim: "transition" resets "transition-timing-function" property set earlier .mob_anim .active--contact .client--anim: "transition" resets "transition-timing-function" property set earlier 
  • Qualified Selectors117

    Since IDs are unique and classes are more unique than tags, adding a tag name would slow down the matching process needlessly

    Don’t qualify class or ID rules with tag names, as they are more unique than the tag. Strip tag names where possible

    #client_items.valign .align--vertical {}#why_3.valign .align--vertical {}.flexbox #client_items.valign .align--vertical {}.flexbox #why_3.valign .align--vertical {}header .valign nav.align--vertical {}header.static {}body.active--clients .nav-menu__clients {}body.active--clients .nav-menu__clients {}body.active--why .nav-menu__why {}body.active--blend .nav-menu__why {}body.active--blended .nav-menu__why {}body.active--method .nav-menu__why {}body.active--how .nav-menu__why {}body.active--think .nav-menu__why {}body.active--why .nav-menu__why {}body.active--blend .nav-menu__why {}body.active--blended .nav-menu__why {}body.active--method .nav-menu__why {}body.active--how .nav-menu__why {}body.active--think .nav-menu__why {}body.active--news .nav-menu__news {}body.active--news .nav-menu__news {}body.active--contact .nav-menu__contact {}body.active--contact .nav-menu__contact {}body.active--contact .nav-menu__contact {}body.careers_page .nav-menu__joinus {}body.careers_page .image--content .intro {}body.careers_page .nav-menu__joinus {}footer a.link {}footer a.link {}footer ul.list--inline {}.section--think p.intro {}.section--think p.intro {}.section--think p.intro {}.section--think p.intro {}.section--think p.intro {}.section--think p.intro {}.circle h3.h5 {}.circle h3.h5 {}.circle h3.h5 {}.wave img.feature_image {}.wave img.feature_image {}.wave img.feature_image {}.ie9 .wave img.feature_image {}.wave img.feature_image {}.section--contact .container ul.list--grid {}.section--contact .container ul.list--grid li span {}.section--contact .container ul.list--grid {}.section--contact .container ul.list--grid:after {}.section--contact .container ul.list--grid li {}.section--contact .container ul.list--grid li.address {}.section--contact .container ul.list--grid li.address {}.section--contact .container ul.list--grid li.address:last-of-type {}.section--contact .container ul.list--grid li.address:last-of-type {}#contact h3 span.icon-icon_Plus {}.section--contact .container ul.list--grid li.jobs__work {}.section--contact .container ul.list--grid li.jobs__work {}.section--contact .container ul.list--grid li.jobs__work.work__at {}.section--contact .container ul.list--grid li.jobs__work.work__at {}.section--contact .container ul.list--grid li.address {}.section--contact .container ul.list--grid li.address {}#contact.section--contact .container ul.list--grid li .link--plus-minus {}#contact.section--contact .container ul.list--grid li .link--plus-minus {}#contact.section--contact .container ul.list--grid li span.icon--plus-minus {}#contact.section--contact .container ul.list--grid li span.icon--plus-minus {}#contact.section--contact .container ul.list--grid li span.icon--plus-minus {}.section--contact .container ul.list--grid li.address {}.section--contact .container ul.list--grid li.address {}.section--contact .container ul.list--grid li.address:last-of-type {}.section--contact .container ul.list--grid li.address:last-of-type {}.section--contact .container ul.list--grid li {}.section--contact .container ul.list--grid li.jobs__work {}.section--contact .container ul.list--grid li.jobs__work {}.section--contact .container ul.list--grid li.jobs__work.work__at {}.section--contact .container ul.list--grid li.jobs__work.work__at {}.section--contact .container ul.list--grid li:first-child {}.section--contact .container ul.list--grid li.address {}.section--contact .container ul.list--grid li.address {}.section--contact .container ul.list--grid li.address.ncl {}.section--contact .container ul.list--grid li.address.ncl {}.job a.text {}span.location {}span.pin {}span.previous {}span.pin svg {}span.previous svg {}span.pin svg path {}.main.careers span.location {}.main.careers .section--join span.location {}.main.careers span.location {}.main.careers .section--join span.location {}.main.careers section.section--join_jobs {}.job a.h4 {}.section--join p.intro {}.section--join p.intro {}.section--join p.intro {}.section--join p.intro {}.section--join p.intro {}.section--join p.intro {}.carousel__panel:not(.slick-center) svg path.great2 {}.carousel__panel:not(.slick-center) svg path.bupa1 {}.carousel__panel:not(.slick-center) svg path.st1 {}.carousel__panel:not(.slick-center) svg polygon.great2 {}.carousel__panel:not(.slick-center):hover svg path.great2 {}.carousel__panel:not(.slick-center):hover svg path.bupa1 {}.carousel__panel:not(.slick-center):hover svg path.st1 {}.carousel__panel:not(.slick-center):hover svg polygon.great2 {}.mob_anim .active--clients a.nextpage {}.mob_anim .active--home a.nextpage {}.mob_anim .active--news a.nextpage {}.skrollr .active--how #why_3 .wave__content div.wave_text_2 {}.skrollr .active--how #why_3 .wave__content div.wave_text_3 {}.skrollr .active--how #why_3 .wave__content div.wave_text_4 {}.skrollr .active--contact .section--contact .list--grid li.jobs__work.work__at {}.skrollr .active--contact .section--contact .list--grid li.address {}.skrollr .active--contact .section--contact .list--grid li.address.ncl {}.skrollr header.skrollable-after nav li {}
  • Redundant Body Selectors1
    body * 
  • Redundant Child Nodes Selectors23

    Deteced redundancies for child node selectors

    Dry up duplication by nesting rules under a set of similar selectors

    select option {}footer ul li {}.section--clients .container ul li {}.section--clients .container ul li .img {}.section--clients .container ul li {}.section--news .container ul li {}.section--contact .container ul.list--grid li span {}.section--contact .container ul.list--grid li {}.section--contact .container ul.list--grid li.address {}.section--contact .container ul.list--grid li.address:last-of-type {}.section--contact .container ul.list--grid li.jobs__work {}.section--contact .container ul.list--grid li.jobs__work.work__at {}.section--contact .container ul.list--grid li.address {}#contact.section--contact .container ul.list--grid li .link--plus-minus {}#contact.section--contact .container ul.list--grid li span.icon--plus-minus {}.section--contact .container ul.list--grid li.address {}.section--contact .container ul.list--grid li.address:last-of-type {}.section--contact .container ul.list--grid li {}.section--contact .container ul.list--grid li.jobs__work {}.section--contact .container ul.list--grid li.jobs__work.work__at {}.section--contact .container ul.list--grid li:first-child {}.section--contact .container ul.list--grid li.address {}.section--contact .container ul.list--grid li.address.ncl {}
  • Universal Selectors15

    The universal selector matches any element type

    Universal selectors can be implied (and therefore omitted) if it isn’t the only component of the simple selector, avoid whenever possible

    * {}[hidden] {}* {}* {}*:after {}* {}[colspan] {}[colspan="1"] {}[rowspan] {}[rowspan="1"] {}[role="button"] {}body * {}.section--why * {}.notrans * {}.mob_anim .active--why #why_2 .circle * {}

CSS Stats

CSS Metrics

Base64 Length0
Colors88
Comments222
Comments Length53307
Expressions0
Old IE Fixes0
Imports0
Media Queries93
Not Minified1
Parsing Errors0
Specificity Id Avg0.2
Specificity Id Total286
Specificity Class Avg1.47
Specificity Class Total2080
Specificity Tag Avg0.66
Specificity Tag Total934
Selectors1412
Selector Length Avg2.001416430594901
Selectors By Attribute65
Selectors By Class1781
Selectors By Id286
Selectors By Pseudo160
Selectors By Tag861
Length149653
Rules1027
Declarations2250