/***********************************************************************************************
 *
 *             FONTS
 *
 *		font-family: 'Roboto', sans-serif;
 *		100 thin, 
 *		300 light, 
 *		400 normal, 
 *		500 medium, 
 *		700 bold
 *
 *		font-family: 'wisdom_script_airegular';
 *
***********************************************************************************************/ 

@font-face {
    font-family: 'wisdom_script_airegular';
    src: url('/fonts/wisdom_script-webfont.eot');
    src: url('/fonts/wisdom_script-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/wisdom_script-webfont.woff') format('woff'),
         url('/fonts/wisdom_script-webfont.ttf') format('truetype'),
         url('/fonts/wisdom_script-webfont.svg#wisdom_script_airegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/***********************************************************************************************
 *
 *             Reset Styles
 *
 **********************************************************************************************/ 

html, body
{
	min-height: 100%;
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
	margin: 0;
	padding: 0;
}

body
{
	font: 18px/1.5 'Roboto', sans-serif;
	background:#FFF;
	color: #333;
	font-weight: 100;
	-webkit-text-size-adjust: none;
}

h1, h2, h3, h4, h5, h6, p, ul, ol
{
   margin-top: 0;
   margin-bottom: 0;
   padding-top: 8px;
   padding-bottom: 8px;
}

h1, h2, h3, h4, h5, h6
{
   line-height: 1;
   font-size: 100%;
   font-weight: 300;
}

h1
{
   font-size: 36px;
   text-transform: uppercase;
}

h2
{
   font-size: 30px;
   text-transform: uppercase;
}

h3
{
   font-size: 22px;
   text-transform: uppercase;
}

a
{
   color: #ff3300;
   text-decoration: none;
   -webkit-transition: all 0.15s ease-in-out;
   -moz-transition: all 0.15s ease-in-out;
   transition: all 0.15s ease-in-out;
}

a:hover 
{
    text-decoration: underline;    
}

ol ul,
ul ul
{
    list-style-type: lower-alpha;
}

ol ul ul,
ul ul ul
{
    list-style-type: lower-roman;
}

img, a img
{
   border:0 none;
   height: auto;
}

img.responsive
{
   border:0 none;
   height: auto;
   display: block;
   max-width: 100%; 
}

.wrapper
{
	width: 90%;
   	max-width: 1000px;
   	margin: 0 auto;
}

/***********************************************************************************************
 *
 *             Global
 *
***********************************************************************************************/ 

 /* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    *zoom:1;
}

.button
{
    border-radius: 5px;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    background: #ff3300;
    border: 2px solid #ff3300;
    color: #FFF;
    padding: 5px 15px;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.button:hover
{
    background: #FFF;
    color: #ff3300;
    text-decoration: none;
}

    .button-white
    {
        background: #FFF;
        color: #000;
        border-color: #FFF;
    }

        .button-white:hover
        {
            background: #000;
            color: #FFF; 
            text-decoration: none;
        }

    .button-black
    {
        background: #FFF;
        color: #000;
        border-color: #000;
    }

        .button-black:hover
        {
            background: #000;
            color: #FFF; 
            text-decoration: none;
        }

.button.large-white
{
    background: #FFF;
    color: #ff3300;
    border-color: #FFF;
    padding: 10px 25px;
}

    .button.large-white:hover
    {
        background: #ff3300;
        color: #FFF;
        text-decoration: none;
    }

.button.large-black
{
    background: #151515;
    color: #ff3300;
    border-color: #151515;
    padding: 10px 25px;
}

    .button.large-black:hover
    {
        background: #ff3300;
        color: #000;
        text-decoration: none;
    }

.white-body
{
    background: #FFF;
    padding: 100px 0 0px;
    overflow: hidden;
}

    .white-body .content 
    {
        padding-bottom: 95px;
    }

.black-body
{
    background: #151515;
    padding: 100px 0;
    text-align: center;
}

.large-font
{
    font-size: 24px;
}

.xlarge-font
{
    font-size: 30px;
}

.font-wisdom
{
    font-family: 'wisdom_script_airegular';
}

.orange-font
{
    color: #ff3300;
}
.white-font
{
    color: #fff;
}

.pink-font
{
    color: #fff;
    text-shadow: 2px 2px #fe0078, 3px 3px #00deff;
}

.font-georgia {
    font-family: georgia, serif;
    font-style: italic;
}

.float-right
{
    float: right;
}

.alert
{
    padding: 15px 15px 15px 40px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-error 
{
    color: #b94a48;
    background-color: #f2dede;
    border-color: #eed3d7;
}

.alert-success
{
    color: #468847;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.hide
{
    display: none;
}

strong
{
    font-weight: 300;
}

.large-30
{
    font-size:30px;
}

::selection {
    background: #ffdbc8; /* Safari */
    }
::-moz-selection {
    background: #ffdbc8; /* Firefox */
}

.fade
{
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

.fade:hover
{
   opacity: 0.5;
}

.hoverSwitch
{
    display: none;
    position: absolute;
    left: 0;
    top: 0;
}

.scrollIn
{
    opacity: 0;
}

/***********************************************************************************************
 *
 *             Videos
 *
***********************************************************************************************/ 

.videoWrapper 
{
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe 
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/***********************************************************************************************
 *
 *             Forms
 *
***********************************************************************************************/ 

input[type="text"],
input[type="email"],
textarea
{
    background: #fff;
    border: 0 none;
    padding: 10px 7%;
    width: 86%;
    outline: none;
    border-radius: 4px;
    font-weight: 100 !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus
{
    -moz-box-shadow:    0 0 5px #ff3300;
    -webkit-box-shadow: 0 0 5px #ff3300;
    box-shadow:         0 0 5px #ff3300;
}

textarea
{
    font-family: 'Roboto', sans-serif;
}

.expand-hidden
{
    display: none;
}

/***********************************************************************************************
 *
 *             Grid
 *
***********************************************************************************************/ 

.one-third
{
    width: 33.3333%;
    float: left;
}

.two-thirds
{
    width: 66.6666%;
    float: left;
}

.half
{
    width: 50%;
    float: left;
}


/***********************************************************************************************
 *
 *             Header
 *
***********************************************************************************************/ 

header
{
    overflow: hidden;
}

.fixed-nav
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 20px 0 10px;
    z-index: 9999;
     -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

    .nav-scroll-bg
    {
        padding: 5px 0 10px;
        background: #000;
        background: rgba(0,0,0,0.9);
        /*background: rgba(255,41,0,0.);*/
    }

.logo
{
    width: 80px;
    height: 72px;
    background-image: url('/img/logo1.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100%;
}
/*
    .logo:hover
    {

        -webkit-animation: play 0.4s forwards steps(18) 1;
           -moz-animation: play 0.4s forwards steps(18) 1;
            -ms-animation: play 0.4s forwards steps(18) 1;
             -o-animation: play 0.4s forwards steps(18) 1;
                animation: play 0.4s forwards steps(18) 1;
    }

        @-webkit-keyframes play {
           from { background-position:  0px 0; }
             to { background-position:  0px -1458px; }
        }

        @-moz-keyframes play {
           from { background-position:  0px 0; }
             to { background-position:  0px -1458px; }
        }

        @-ms-keyframes play {
           from { background-position:  0px 0; }
             to { background-position:  0px -1458px; }
        }

        @-o-keyframes play {
           from { background-position:  0px 0; }
             to { background-position:  0px -1458px; }
        }

        @keyframes play {
           from { background-position:  0px 0; }
             to { background-position:  0px -1458px; }
        }
*/

.nav-toggle
{
    color: #FFF;
    float: right;
    margin-top: 20px;
    text-transform: uppercase;
    display: none;
}

.main-nav
{
   	padding: 0;
   	margin: 25px 0 0;
    list-style: none;
    text-align: right;
}

    .main-nav .nav-close
    {   
        text-align: right;
        padding-right: 30px;
        display: none;
    }

    .main-nav li
    {
        display: inline-block;
        margin-left: 15px;
        *display: inline;
        zoom:1;
    }

        .main-nav li.no-margin
        {
            margin-left: 0;
        }

    .main-nav a
    {
        color: #FFF;
        font-size: 16px;
        font-weight: 500;
        text-transform: uppercase;
        padding: 5px 10px;
    }

        .main-nav a:hover,
        .main-nav a:focus
        {
            color: #ff3300;
            text-decoration: none;
        }

    .main-nav li .nav-icon
    {
        display: none;
        padding-top: 5px;
    }
/***********************************************************************************************
 *
 *             Banners
 *
***********************************************************************************************/ 

#canvas {
    min-height: 800px;
    background: url('/img/texture-ie.jpg');
}

.home-banner
{
    position: relative;
    width: 100%;   
    height: 820px;
    background: #000;
}

.home-banner video
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 9;
    height: auto;
    margin: 0;
    min-width: 1480px;
}

.home-banner .overlay
{
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 10;
    background: url('/img/video-overlay.png');
}

.home-banner .the-journey
{
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 11;
    margin: -130px 0 0 -258px;
    max-width: 100%;
}

.home-banner .home-buttons 
{
    position: absolute;
    z-index: 12;
    left: 50%;
    bottom: 100px;
    margin-left: -170px;
}

.home-banner .home-buttons a 
{
    margin: 0 10px;
}

.home-banner .fallback
{
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    min-width: 1000px;
    z-index: 10;
    display: none;
}

@media(max-width: 900px){
    
    .home-banner 
    {
        height: auto;
        padding: 200px 0 100px;
    }

    .home-banner video 
    {
        display: none;
    }


    .home-banner .the-journey 
    {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        top: auto;
        display: block;
        margin: 0 auto;
    }

    .home-banner .home-buttons 
    {
        position: relative;
        left: auto;
        bottom: auto;
        margin: 100px 0 0;
        text-align: center;
    }

    .home-banner .fallback
    {
        display: block;
    }
}

@media(max-width: 480px){
    .home-banner .the-journey
    {
        width: 90%;
    }
}

/***********************************************************************************************
 *
 *             Normal Banner
 *
***********************************************************************************************/ 

.banner
{
    min-height: 350px;
    text-align: center;
    color: #FFF;
}
    .banner.large
    {
        min-height: 600px;
    }

.banner .wrapper
{
    position: relative;
}

.banner.short .wrapper
{
    height: 400px;
}

.banner.tall .wrapper
{
    height: 950px;
}

.banner.case .wrapper
{
    height: 550px;
}

.banner-text
{
    padding: 0 10%;
    position: absolute;
    top: 50%;
    left: 0;
    margin: 0 auto;
    width: 80%;
}   

    .banner-text p
    {
        font-size: 30px;
        font-weight: 100;
        line-height: 1.3;
    }

/***********************************************************************************************
 *
 *             Video
 *
***********************************************************************************************/ 

video
{
    margin: 20px auto;
}

@media (max-width: 767px){

    video 
    {
        width: 100%; 
        height: auto !important; 
        display: block;
    }

}

video.career  
{
    width: 100%; 
    height: auto !important; 
    display: block;
    min-width: 800px;
    margin: 0;
}

.career-fallback-img
{
    display: none;
}

@media (max-device-width: 1024px){
    video.career  
    {
        display: none;
    }  

    .career-fallback-img
    {
        display: block;
        width: 100%;
        min-width: 600px;
    }
}

.video-play
{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -140px;
    margin-top: -140px;
}

.fallback-img
{
    display: block;
}

.mfp-bg {
    opacity: 0.9;
}
/***********************************************************************************************
 *
 *             Welcome Intro
 *
***********************************************************************************************/ 

.welcome-intro
{
    text-align: center;
    background: #fff;
    color: #151515;
    font-weight: 100;
}

    .welcome-intro .inner 
    {
         padding: 90px 65px;
    }

    .welcome-intro .inner.no-bottom-padding
    {
        padding: 90px 65px 0;
    }
    
    .welcome-intro .expand-arrow
    {
        cursor: pointer;
         -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    .welcome-intro .expand-arrow.spin
    {
        -webkit-transform: scaleY(-1);
        -moz-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        -ms-transform: scaleY(-1);
        transform: scaleY(-1);

    }

/***********************************************************************************************
 *
 *             Triple Grid (HOME)
 *
***********************************************************************************************/ 

#triple-grid 
{
    background: rgba(0, 0, 0, 1);
}

#triple-grid a
{
    display: block;
    color: #333;
    transition: 0.5s;
}

#triple-grid .square
{
    width: 33.33333%;
    float: left;
    position: relative;
    *width: 33.3%;
}

    #triple-grid .square.blur
    {
        /*text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);*/
        color: rgba(0, 0, 0, 0.7);
        opacity: 0.7;
    }

    
    #triple-grid .square.web
    {
        background: url('/img/home/web.jpg') center no-repeat;
        background-size: cover;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/home/web.jpg',sizingMethod='scale');
        -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/home/web.jpg',sizingMethod='scale')";
    }
    #triple-grid .square.identity
    {
        background: url('/img/home/identity.jpg') center no-repeat;
        background-size: cover;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/home/identity.jpg',sizingMethod='scale');
        -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/home/identity.jpg',sizingMethod='scale')";
    }
    #triple-grid .square.print
    {
        background: url('/img/home/print.jpg') center no-repeat;
        background-size: cover;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/home/print.jpg',sizingMethod='scale');
        -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/home/print.jpg',sizingMethod='scale')";
    }

    #triple-grid .square .strip
    {
        background: #FFF;
        width: 100%;
        text-align: center;
        position: absolute;
        top: 50%;
        margin-top: -71px;
        padding: 50px 0;
    }

        #triple-grid .square .strip h1
        {
            font-size: 22px;
            font-weight: 700;
            padding: 0;
        }

        #triple-grid .square .strip p
        {
            font-size: 14px;
            font-style: italic;
            font-weight: 300;
            padding: 0;
        }


/* FULL WIDTH */
.full-width {
    clear: both;
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    line-height: 0;
}
.full-width p {
    position: absolute;
    z-index: 2;
    top: 50px;
    width: 75%;
    line-height: 1.5em;
}

.full-width img {
    width: 100%;
    height: auto;
}

/* HALF WIDTH */
.half-width {
    clear: both;
    overflow: hidden;
}
.half-width .left {
    float: left;
    width: 50%;
}

.half-width .right {
    float: right;
    width: 50%;
}
.half-width img.right {
    float: right;
    width: 50%;
}
.half-width img.left {
    float: left;
    width: 50%;
}
.half-width .text-left {
    width: 35%;
    margin-left: 80px;
    margin-top: 8%;
}
.half-width .text-right {
    width: 35%;
    margin-right: 80px;
    margin-top: 8%;
}
.double {
    position: relative;
    z-index: 1;
}
.double img.middle {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -140px;
    margin-left: -140px;
    z-index: 9;
}
section.orange {
    background: #ff3300;
}
section.padding {
    margin: 100px 0;
}

/***********************************************************************************************
 *
 *             Image Content
 *
***********************************************************************************************/ 

.image-content
{
    margin-bottom: 100px;
}

.image-content.no-min-height
{
    min-height: 0;
}

.container
{
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
}

    .image-content .text
    {
        width: 45%;
        float: left;
    }
        .image-content .text.left
        {
            padding-right: 5%;
        }

        .image-content .text.right
        {
            padding-left: 5%;
            float: right;
        }
        .image-content .centre
        {
            text-align: center;
        }

    .image-content .img
    {
        width: 50%;
        float: left;
    }

    .image-content .img.right
    {
        float: right;
    }

/***********************************************************************************************
 *
 *             Split Content
 *
***********************************************************************************************/ 

.split-content
{
    padding-bottom: 65px;
}

.split-content .wrapper
{
    max-width: 850px;
}

.split-content .left 
{
    width: 65%;
    float: left;
}

.split-content .right
{
    width: 30%;
    float: right;
}

    .split-content .how-helped
    {
        color: #999;
        background: #f8f8f8;
        padding: 20px;
    }

    .split-content .how-helped h3
    {
        text-transform: none;
        font-weight: 500;
    }

/***********************************************************************************************
 *
 *             Whole Page
 *
***********************************************************************************************/ 

.whole-page
{
    margin: 40px;
}

.whole-page img
{
    margin: 0 auto;
}

.whole-page .work img
{
    margin: 20px auto;
}

/***********************************************************************************************
 *
 *             Black body
 *
***********************************************************************************************/ 

.black-body .wrapper
{
    color: #FFF;
    max-width: 800px;
}

.black-body .feature
{
    margin-bottom: 90px;
}

    .black-body .feature img 
    {
        margin-bottom: 20px;
    }

/***********************************************************************************************
 *
 *             Case Study Grid
 *
***********************************************************************************************/ 

#case-grid .wrapper
{
    max-width: 100%;
    font-size: 0;
    padding: 0;
    width: 100%;
    text-align: center;
}

    #case-grid .item
    {
        display: inline-block;
        width: 25%;
        height: auto;
        position: relative;
    }

    #case-grid .item .image
    {
        width: 100%;
        height: 250px;
        position: relative;
        overflow: hidden;
    }

    #case-grid .item .hover
    {
        position: absolute;
        background: rgba(75,75,75,0.7);
        width: 100%;
        height: 100%;
        display: none;
    }

    #case-grid .item a 
    {
        color: #151515;
        display: block;
    }

    #case-grid .item a h3
    {
        font-weight: 500;
        padding-top: 18px;
        padding-bottom: 0; 
        font-size: 16px;
    }

    #case-grid .item a p
    {
        font-size: 14px;
        padding-top: 0;
        padding-bottom: 20px;
    }

/***********************************************************************************************
 *
 *             Team Slider 
 *
***********************************************************************************************/ 

#team-grid .wrapper
{
    padding: 0;
    text-align: center;
    margin-top: 100px;
    margin-bottom: 100px;
}
    #team-grid > .wrapper > h2
    {
        margin-bottom: 20px;
    }
    #team-grid .item
    {
        position: relative;
        display: inline-block;
        height: auto;
        width: 30%;
        position: relative;
        margin: 10px 1.5%;
    }
        #team-grid .item img
        {
            width: 100%;
            max-width: 350px;
        }
        #team-grid .item h3
        {
            font-weight: bold;
            font-size: 18px;
            padding-bottom: 0px;
        }
        #team-grid .item span
        {
            font-size: 18px;
            color: #222222;
            font-style: italic;
        }


#team-slider .member
{
    height: 488px;
}

    #team-slider h1
    {
        margin-bottom: 30px;
    }

    #team-slider .member h3
    {
        background: #FFF;
        font-weight: 500;
        color: #151515;
        width: 100%;
        text-align: center;
        position: absolute;
        bottom: 50px;
        padding: 25px 0;
        
    }
        #team-slider .member h3 span
        {
            font-size: 14px;
            font-style: italic;
            font-weight: 100;
            text-transform: none;
        }
    
    #team-slider .member.chris
    {
        background: url(/img/team/chris_van_aurich.jpg) center no-repeat;
        background-size: cover;
    }
    #team-slider .member.guy
    {
        background: url(/img/team/guy.jpg) center no-repeat;
        background-size: cover;
    }
    #team-slider .member.rob
    {
        background: url(/img/team/rob_cornish.jpg) center no-repeat;
        background-size: cover;
    }
    #team-slider .member.tom
    {
        background: url(/img/team/tom_van_aurich.jpg) center no-repeat;
        background-size: cover;
    }
    #team-slider .member.dave
    {
        background: url(/img/team/dave_robinson.jpg) center no-repeat;
        background-size: cover;
    }
    #team-slider .member.polo
    {
        background: url(/img/team/polo_lam.jpg) center no-repeat;
        background-size: cover;
    }
    #team-slider .member.esther
    {
        background: url(/img/team/esther_van_aurich.jpg) center no-repeat;
        background-size: cover;
    }
    #team-slider .member.basil
    {
        background: url(/img/team/basil.jpg) center no-repeat;
        background-size: cover;
    }


/***********************************************************************************************
 *
 *             Our Culture
 *
***********************************************************************************************/ 

#our-culture
{
    background:#151515 url(/img/about/pool-ball.jpg) 100% center no-repeat;
    color: #FFF;
}

#our-culture .wrapper
{
    
    padding: 85px 0;
}

    #our-culture .text 
    {
        width: 50%;
    }

/***********************************************************************************************
 *
 *             Studio Life 
 *
***********************************************************************************************/ 

#studio-life
{
    padding: 0;
    text-align: center;
    clear: both;
}

    #studio-life .wrapper
    {
        max-width: 720px;
        padding: 0;
    }

/***********************************************************************************************
 *
 *             Pagination
 *
***********************************************************************************************/ 

#pagination 
{
    padding: 95px 0;
    position: relative;
    text-align: center;
}
   
    #pagination .prev,
    #pagination .next
    {
       width: 140px;
       display: block;
       position: absolute;
       top: 0;
       bottom: 0;
    }

    #pagination .next
    {
        right: 0;
    }

        #pagination .prev
        {
            background: url(/img/prev-arrow.png) center no-repeat;
        }

        #pagination .next
        {
            background: url(/img/next-arrow.png) center no-repeat;
        }

    #pagination .wrapper 
    {
        max-width: 800px;
    }

    #pagination h2
    {
        margin-bottom: 20px;
    }
    
    /* Colors */

    #pagination.david_kingsbury 
    {
        background: #111;
        color: #fff;
    }

    #pagination.q_management 
    {
        background: #bd1680;
        color: #fff;
    }

    #pagination.consume 
    {
        background: #EC6361;
        color: #fff;
    }
    
    #pagination.fairleyhouse 
    {
        background: #ff354f;
        color: #fff;
    }
    
    #pagination.pqa 
    {
        background: #ebd08b;
        color: #222;
    }

    #pagination.hansteen2015 
    {
        background: #013f70;
        color: #fff;
    }

    #pagination.tenmilemenu 
    {
        background: #4bc199;
        color: #fff;
    }

    #pagination.sublab 
    {
        background: #00ffcc;
        color: #333;
    }

    #pagination.thegreeklarder 
    {
        background: #86ae56;
        color: #FFF;
    }

    #pagination.eckoh 
    {
        background: #ad1d3f;
        color: #FFF;
    }

    #pagination.carolinewatson 
    {
        background: #121212;
        color: #FFF;
    }

    #pagination.checkoutsmart 
    {
        background: #eee;
        color: #333;
    }

    #pagination.berryclever 
    {
        background: #a3007d;
        color: #FFF;
    }

    #pagination.sytel 
    {
        background: #00abc9;
        color: #FFF;
    }

    #pagination.iconic 
    {
        background: #BC000C;
        color: #FFF;
    }

    #pagination.basepoint 
    {
        background: #4eba51;
        color: #FFF;
    }

    #pagination.mps
    {
        background: #005395;
        color: #FFF;
    }

    #pagination.cavendish
    {
        background: #B1B9CD;
        color: #FFF;
    }

    #pagination.impact
    {
        background: #FF6A03;
        color: #FFF;
    }

    #pagination.casa
    {
        background: #47C6CC;
        color: #FFF;
    }

    #pagination.rumseys
    {
        background: #666666;
        color: #FFF;
    }

    #pagination.i3
    {
        background: #cf541c;
        color: #FFF;
    }

    #pagination.varisys
    {
        background: #062F4F;
        color: #FFF;
    }

    #pagination.pelham
    {
        background: #203926;
        color: #FFF;
    }

    #pagination.greenroom
    {
        background: #AD9F80;
        color: #FFF;
    }

    #pagination.hansteen
    {
        background: #017be5;
        color: #FFF;
    }

    #pagination.sbh
    {
        background: #68BE2E;
        color: #FFF;
    }

    #pagination.tims
    {
        background: #BF8F5D;
        color: #FFF;
    }

    #pagination.chiltern
    {
        background: #525252;
        color: #FFF;
    }

    #pagination.qube
    {
        background: #261307;
        color: #FFF;
    }

    #pagination.corradi
    {
        background: #363332;
        color: #FFF;
    }

    #pagination.defrae
    {
        background: #362314;
        color: #FFF;
    }

    #pagination.healthy
    {
        background: #799B27;
        color: #FFF;
    }

    #pagination.hs
    {
        background: #8FA8B3;
        color: #FFF;
    }

    #pagination.judicial
    {
        background: #7B8C9E;
        color: #FFF;
    }

    #pagination.marketing
    {
        background: #5A3E3D;
        color: #FFF;
    }

    #pagination.barnados
    {
        background: #8CC643;
        color: #FFF;
    }

    #pagination.mps_magazine
    {
        background: #917641;
        color: #FFF;
    }
    #pagination.skiplex
    {
        background: #014b7c;
        color: #FFF;
    }
    #pagination.flydrive-norway
    {
        background: #5ba6e2;
        color: #FFF;
    }
    #pagination.matterhorn-chalets
    {
        background: #3d1166;
        color: #FFF;
    }
    #pagination.whistler-experience
    {
        background: #111;
        color: #FFF;
    }

/***********************************************************************************************
 *
 *             Pagination Services
 *
***********************************************************************************************/

#pagination-services a 
{
    display: block;
    float: left;
    width: 50%;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    background: #ff3300;
    text-align: center;
    color: #FFF;
    padding: 20px 0;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out; 
}

#pagination-services a:hover
{
    background: #FFF;
    color: #ff3300;
    text-decoration: none;
} 

#pagination-services a.next 
{
    float: right;
} 

/***********************************************************************************************
 *
 *             Services CTA
 *
***********************************************************************************************/ 

#services-cta
{
    background: url(/img/cream-bg.jpg) ;
    padding: 50px 0;
    text-align: center;
}

#services-cta .cta
{
    width: 280px;
    height: 280px;
    margin: 10px;
    display: inline-block;
    position: relative;
    cursor: pointer;
}

#services-cta .cta div
{
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    padding-top: 125px;
    width: 100%;
    background: rgba(0,0,0,0.7);
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
}

#services-cta .cta.reduced-padding div
{
    padding-top: 60px;
}


#services-cta .cta:hover div
{
    display: none;
}

@media(max-width: 480px){
    #services-cta .cta
    {
        margin: 10px 0;
    }
}

/***********************************************************************************************
 *
 *             Feed
 *
***********************************************************************************************/ 

#feeds 
{
    clear: both;
}

#feeds .column
{
    width: 33.33333%;
    display: block;
    float: left;
}

    #feeds .column .inner
    {
        padding-top: 80%;
        background-size: cover;
        position: relative;
    }

        #feeds .column .inner.twitter .tweet 
        {
            background: #ff3300;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }

        #feeds .column .inner.tall
        {
            padding-top: 160%;
        }

    #feeds .column footer
    {
        width: 80%;
        padding: 0 10%;
        height: 100px;
        position: absolute;
        bottom: 0;
    }
        
        #feeds .column footer a 
        {
            color: #FFF;
        }

        #feeds .column footer p 
        {
            float: left;
            margin-top: 20px;
            font-weight: 700;
        }

            #feeds .column footer p a:hover
            {
                color: #151515;
                text-decoration: none;
            }

        #feeds .column footer a.icon
        {
            display: block;
            width: 50px;
            height: 49px;
            float: right;
            margin-top: 20px;
        }

            #feeds .dribbble footer a.icon
            {
                background: url(/img/feed-icons.png) 2px 0 no-repeat;
            }

            #feeds .dribbble footer a.icon:hover
            {
                background: url(/img/feed-icons.png) 2px -48px no-repeat;
            }

            #feeds .flickr footer a.icon
            {
                background: url(/img/feed-icons.png) -129px 0 no-repeat;
            }

            #feeds .flickr footer a.icon:hover
            {
                background: url(/img/feed-icons.png) -129px -48px no-repeat;
            }

            #feeds .twitter footer a.icon
            {
                background: url(/img/feed-icons.png) -62px 1px no-repeat;
            }

            #feeds .twitter footer a.icon:hover
            {
                background: url(/img/feed-icons.png) -62px -48px no-repeat;
            }

            #feeds .insta footer a.icon
            {
                background: url(/img/feed-icons.png) -185px 0 no-repeat;
            }

            #feeds .insta footer a.icon:hover
            {
                background: url(/img/feed-icons.png) -185px -48px no-repeat;
            }


.tweet_list
{
    padding: 10%;
    list-style: none;
    font-size: 26px;
    color: #FFF;
}

    .tweet_list a
    {
        color: #551100;
    }

    .tweet_list a:hover
    {
        color: #000;
        text-decoration: underline;
        text-decoration: none;
    }

/***********************************************************************************************
 *
 *             Get in touch
 *
***********************************************************************************************/ 

.get-in-touch
{
    background: #1f1d1f;
    color: #FFF;
    text-align: center;
    padding: 100px 0;
    position: relative;
}

    .get-in-touch h2 
    {
        text-transform: none;
        margin-bottom: 40px;
    }

    .get-in-touch .button
    {
        position: relative;
        margin-top: 50px;
    }

    .get-in-touch .like
    {
        position: absolute;
        right: -30px;    
        top: -40px;
    }

/***********************************************************************************************
 *
 *             Contact
 *
***********************************************************************************************/ 

#map
{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.ie7 #map
{
    display: none;
}

#contact-boxes
{
    position: relative;
}

.ie7 #contact-boxes
{
    background: url(/img/map-bg.jpg) center center no-repeat;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/map-bg.jpg',sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/map-bg.jpg',sizingMethod='scale')";
}

    #contact-boxes .wrapper
    {
        position: relative;
        z-index: 9;
        padding: 0 0 50px;
        margin-top: 300px;
    }

    #contact-boxes .address
    {
        width: 40%;
        padding: 30px 4%;
        float: left;
        background: #FFF;
    }

    #contact-boxes .address.right
    {
        float: right;
    }

#contact-penn 
{
    padding: 100px 0 20px;
}

    #contact-penn .map 
    {
        width: 48%;
        float: left;
        background: red;
        height: 345px;
        position: relative;
        text-align: center;
    }

        #contact-penn .map:hover a 
        {
            display: block;
            opacity: 1;
            text-decoration: none;
        } 

        #contact-penn .map a 
        {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            padding-top: 140px;
            font-size: 24px;
            display: block;
            background: rgba(0,0,0,0.8);
            font-weight: 300;
            opacity: 0;
           -webkit-transition: all 0.2s ease-in-out;
           -moz-transition: all 0.2s ease-in-out;
           transition: all 0.2s ease-in-out;
        }

    #contact-penn .penn-address 
    {
        width: 48%;
        float: right;
        background: #222;
        height: 345px;
        color: #fff;
        line-height: 1.3;
    }

        #contact-penn .penn-address sup 
        {
            font-size: 20px;
        }

        #contact-penn .penn-address .inner
        {
            padding: 30px 40px;
        }

#contact-london
{
    padding: 30px 0 100px;
    font-weight: 300;
}
    
    #contact-london h3 
    {
        font-weight: 500;
        padding-top: 20px;
    }

    #contact-london .left 
    {
        width: 25%;
        float: left;
    }

    #contact-london .right 
    {
        width: 71%;
        float: right;
    }

#contact-slider .item img
{
    display: block;
    width: 100%;
    height: auto;
}

#contact-slider .owl-controls
{
    position: absolute;
    top: 50%;
    margin: -37px 0 0;
    width: 100%;
}

#contact-slider .owl-controls .owl-buttons div 
{
    width: 40px;
    height: 74px;
}

#contact-slider .owl-controls .owl-prev
{
    float: left;
    background: url(/img/slider-arrows.png) 0 0 no-repeat;
    margin: 0 0 0 10px;
}

#contact-slider .owl-controls .owl-next 
{
    float: right;
    background: url(/img/slider-arrows.png) -39px 0 no-repeat;
    margin: 0 10px 0 0;
}

/***********************************************************************************************
 *
 *             About slider
 *
***********************************************************************************************/ 

#about-slider .item img
{
    display: block;
    width: 100%;
    height: auto;
}

#about-slider .owl-controls
{
    position: absolute;
    top: 50%;
    margin: -37px 0 0;
    width: 100%;
}

#about-slider .owl-controls .owl-buttons div 
{
    width: 40px;
    height: 74px;
}

#about-slider .owl-controls .owl-prev
{
    float: left;
    background: url(/img/slider-arrows.png) 0 0 no-repeat;
    margin: 0 0 0 10px;
}

#about-slider .owl-controls .owl-next 
{
    float: right;
    background: url(/img/slider-arrows.png) -39px 0 no-repeat;
    margin: 0 10px 0 0;
}

/***********************************************************************************************
 *
 *             Contact-form
 *
***********************************************************************************************/ 

#contact-form
{
    padding: 100px 0px;
    background: #efedeb;
}

    #enquiry-form
    {
        margin: 20px 0;
    }
    
    #enquiry-form .left
    {
        width: 33.3333%;
        float: left;
    }

    #enquiry-form .right
    {
        width: 60%;
        float: right;
    }

    #enquiry-form p 
    {
        padding-top: 5px;
    }

    #enquiry-form input[type="submit"]
    {
        float: right;
    }

/***********************************************************************************************
 *
 *             404 Page
 *
***********************************************************************************************/ 

.error {
   position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -162px;
    margin-top: -120px;
}

.error h1 {
    font-size: 200px;
}


/***********************************************************************************************
 *
 *             Footer
 *
***********************************************************************************************/ 

#footer .black
{
    padding: 100px 0 60px;
    background: #151515;
    color: #FFF;
}
    #footer .black .one-third
    {
        width: 25%;
        padding-right: 8%;
    }

    #footer .black h3
    {
        font-weight: 700;
    }

    #footer .black p,
    #footer .black address
    {
        font-size: 14px;
        font-weight: 300;
    }

    #footer .black address
    {
        padding: 8px 0;
        line-height: 1.5;
        font-style: normal;
    }

    #footer .black a
    {
        color: #FFF;
        font-weight: 300;
        font-style: italic;
        padding-bottom: 4px;
        font-size: 14px;
        border-bottom: 1px solid #ff3300;
    }

        #footer .black a:hover
        {
            color: #ff3300;
            text-decoration: none;
        }

#footer .footer-links
{
    background: #151515;
    padding-bottom: 100px;
}

    #footer .footer-links,
    #footer .footer-links a
    {
        color: #666;
        font-weight: 300;
        font-size: 14px;
    }

        #footer .footer-links a:hover
        {
            color: #ff3300;
            text-decoration: none;
        }

    #footer .footer-links .social
    {
        text-align: right;
        padding: 0;
        margin: -10px 0 0;
    }

        #footer .footer-links .social li 
        {
            display: inline-block;
            *display: inline;
            *zoom: 1;
        }        

        #footer .footer-links .social a
        {
            width: 40px;
            height: 40px;
            display: block;
        }

            #footer .footer-links .social a.twitter
            {
                background: url('/img/footer-social.png') 2px 1px no-repeat;
            }
            #footer .footer-links .social a.twitter:hover
            {
                background: url('/img/footer-social.png') 2px -40px no-repeat;
            }

            #footer .footer-links .social a.facebook
            {
                background: url('/img/footer-social.png') -40px 1px no-repeat;
            }
            #footer .footer-links .social a.facebook:hover
            {
                background: url('/img/footer-social.png') -40px -40px no-repeat;
            }

            #footer .footer-links .social a.linkedin
            {
                background: url('/img/footer-social.png') -84px 1px no-repeat;
            }
            #footer .footer-links .social a.linkedin:hover
            {
                background: url('/img/footer-social.png') -84px -40px no-repeat;
            }

            #footer .footer-links .social a.dribbble
            {
                background: url('/img/footer-social.png') -130px 1px no-repeat;
            }
            #footer .footer-links .social a.dribbble:hover
            {
                background: url('/img/footer-social.png') -130px -40px no-repeat;
            }

            #footer .footer-links .social a.flickr
            {
                background: url('/img/footer-social.png') -175px 1px no-repeat;
            }
            #footer .footer-links .social a.flickr:hover
            {
                background: url('/img/footer-social.png') -175px -40px no-repeat;
            }


#footer .orange
{
    /*padding: 60px 0;*/
    background-color: #ff3300;
    /*background: url('/img/est-bg-golf.gif') center;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/est-bg-golf.gif',sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/est-bg-golf.gif',sizingMethod='scale')";
    position: relative;*/
    height: 5px;
}


#footer #home-address,
#footer #away-address
{
    font-size: 22px;
    color: #666;
    font-style: normal;
    border:none; 
    font-weight: 700;
}

    #footer #home-address:hover,
    #footer #away-address:hover,
    #footer #home-address.active,
    #footer #away-address.active
    {
        color: #FFF;
    }

/***********************************************************************************************
 *
 *             Media Query
 *             Greater than 1280px  
 *
***********************************************************************************************/ 



@media(min-width: 1280px) {
    
    .image-content
    {
        min-height: 400px;
    }

    .image-content .img img
    {
        position: absolute;
        right: 0;
    }
        .image-content .img.left img
        {
            position: absolute;
            left: 0;
        }

    #case-grid .item
    {
        width: 20%;
    }

}

@media(min-width: 1600px) {
    #case-grid .item
    {
        width: 16.6666%;
    }
}

@media(max-width: 1279px) {

    #case-grid .item a h3
    {
        font-size: 16px;
    }

    #case-grid .item a p
    {
        font-size: 14px;
    }

    .tweet_list
    {
        font-size: 18px;
    }
}

/***********************************************************************************************
 *
 *             Media Query
 *             Smaller than desktop 1024px  
 *
***********************************************************************************************/ 

@media (max-width : 1023px) {

    .main-nav li
    {
        margin-left: 15px;
    }

    .main-nav a
    {
        font-size: 14px;
        padding: 0;
    }

    .banner-text
    {
        padding: 0 50px;
        width: 90%;
    }   

        .banner-text p
        {
            font-size: 23px;
        }
    
    .image-content .text h2
    {
        font-size: 25px;
    }

    .large-font,
    .xlarge-font
    {
        font-size: 20px;
    }

    #case-grid .item a h3
    {
        font-size: 14px;
    }

    #case-grid .item
    {
        width: 33.3333%;
    }

    #case-grid .item a p
    {
        font-size: 12px;
    }

    .tweet_list
    {
        font-size: 14px;
    }

    #pagination
    {
        padding: 95px 0 150px;
    }

    #pagination .prev,
    #pagination .next
    {
        position: absolute;
        width: 50%;
        height: 90px;
        top: auto;
        bottom: 0;
        padding-bottom: 20px;
    }

    .double img.middle {
        margin-top: -90px;
        margin-left: -90px;
        width: 180px;
        height: 180px;
    }


}


/***********************************************************************************************
 *
 *             Media Query
 *             iPads (portrait) 
 *
***********************************************************************************************/ 

@media( max-width: 768px) {
    .fixed-nav
    {
        padding: 0px 0 5px;
        background: rgba(0,0,0,0.8);
    }
}

@media (max-width : 767px){

    .nav-toggle
    {
        display: block;
    }

    .main-nav
    {
        position: absolute;
        display: none;
        margin: 0;
        top:0;
        left: 0;
        height: 100%;
        padding-bottom: 50px;
        width: 100%;
        z-index: 999;
        background: #FFF;
    }

        .main-nav li.nav-close
        {
            display: block;
            background: #000;
            border-bottom: 1px solid transparent;
            padding-top: 15px;
        }

        .main-nav li
        {
            display: block;
            text-align: left;
            margin: 0;
            padding: 10px 38px 10px 30px;
            border-bottom: 1px solid #ff6640;
            background: #ff3300;
        }

        .main-nav li .nav-icon
        {
            float: right;
            display: block;
        }

        .main-nav a
        {
            font-size: 20px;
        }
        .main-nav a:hover
        {
            font-size: 20px;
            color: #111;
        }

    .banner-text
    {
        padding: 0 20px;
    }   

        .banner-text h1
        {
            font-size: 32px;
        }

        .banner-text p
        {
            font-size: 20px;
        }
    
    #triple-grid .square .strip h1
    {
        font-size: 16px;
    }

    #triple-grid .square .strip p 
    {   
        font-size: 12px;
    }

    #footer .black .one-third
    {
        width: 100%;
        margin-bottom: 40px;
        padding: 0;
        text-align: center;
    }

    .image-content .text,
    .image-content .img 
    {
        width: 100%;
        float: none;
    } 

    .image-content .img 
    {
        margin-bottom: 20px;
    }

    .image-content .text h2
    {
        font-size: 20px;
    }
    
    .large-font,
    .xlarge-font
    {
        font-size: 16px;
    }

    #contact-boxes .address,
    #contact-boxes .address.right
    {
        width: 90%;
        padding: 30px 4%;
        margin: 20px 0;
        float: none;
    }

    #enquiry-form .left,
    #enquiry-form .right
    {
        width: 100%;
        float: none;
    }

    #enquiry-form input[type="submit"]
    {
        float: right;
    }   

    #case-grid .item a h3
    {
        font-size: 14px;
    }

    #case-grid .item a p
    {
        font-size: 12px;
    }

    #our-culture
    {
        background-position: 130px center;
    }

    #our-culture .wrapper
    {
        padding: 95px 0;
    }

    #our-culture .text 
    {
        width: 60%;
    }

    #feeds .column
    {
        width: 100%;
        padding: 0;
    }

    .split-content .left,
    .split-content .right
    {
        width: 100%;
        float: none;
        margin: 20px 0;
    }

    #contact-penn .map,
    #contact-penn .penn-address
    {
        width: 100%;
        float: none;
        height: auto;
        min-height: 345px;
    }

    #contact-london .left,
    #contact-london .right
    {
        width: 100%;
        float: none;
        margin: 0 0 10px 0;
    }
    
    #team-grid .item
    {
        width: 47%;
        margin: 10px 1.5%;
    }

    .double img.middle {
        display: none;
    }

}

@media(max-width: 600px) {
    #case-grid .item
    {
        width: 100%;
    }

    #case-grid .item img 
    {
        margin: 0 auto;
    }
    
    .tweet_list
    {
        font-size: 18px;
    }
}

/***********************************************************************************************
 *
 *             Media Query
 *             Mobile  
 *
***********************************************************************************************/ 

@media (max-width : 480px) {

    .home-buttons .button.large-white,
    .home-buttons .button.large-black
    {
        margin: 0;
        font-size: 18px;
    }
    
    .welcome-intro .inner
    {
        padding: 70px 35px;
    }

    .welcome-intro .inner.no-bottom-padding
    {
        padding: 70px 35px 0;
    }
    
        .welcome-intro p 
        {
            font-size: 25px;
        }
    
    .banner-text h1
    {
        font-size: 28px;
    }
 

    #footer .footer-links .half
    {
        width: 100%;
        text-align: center;
        margin-bottom: 30px;
    }

    #footer .footer-links .social
    {
        text-align: center;
    }  
    
    .image-content .text h2
    {
        font-size: 25px;
    }
    
    .large-font,
    .xlarge-font
    {
        font-size: 20px;
    }

    #our-culture .text 
    {
        width: 100%;
    }
    
    #team-grid .item
    {
        width: auto;
        margin: 10px 0;
        padding: 0;
    }

}

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

/***********************************************************************************************
 *
 *             Internet Explorer
 *
***********************************************************************************************/ 

.ie8 .wrapper 
{
    width: 1024px;
}

.ie8 #team-slider .member h3
{
    text-align: left;
    padding-left: 50px;
}

.ie8 #contact-penn .map a
{
    display: none;
    opacity: 1;
    background: #000;
}

.ie8 #contact-penn .map:hover a 
{
    display: block;
    opacity: 1;
}