/* new */

.homepage {
background-image: linear-gradient(110deg, #FF751D, #F4428F, #AD5AF9, #14CEC8, #DB3C3C);
	background-size: 500% 500%;
	animation: gradient 30s ease infinite;
	background-attachment: fixed;
}

.deliveroo {
   background: linear-gradient(270deg, #440063 35.6%, #6D2162 100%);
}

.barclays {
    background: #00AFEA;
}

.debenhams {
    background: linear-gradient(270deg, #0E0E0E 35.6%, #000000 100%);
}


@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.header_banner_new {
    background: url(images/background_image_new.png) no-repeat;
    background-size: cover;
    text-align: center;
    height: calc(100vh);
    position: relative;
    width: 100%;
}

.header_bar_new {
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255,0.1);
    height: 82px;
    margin: 0 40px;
}

.header_bar_new .logo {
    float: left;
    margin-top: 22px;
}

.header_bar_new .logo a {
        text-decoration: none;
}

.header_bar_new .logo .name {
    font-family: 'freight-sans-pro';
    font-size: 24px;
    color: #FFFFFF;
    font-weight: 500;
    line-height: 1.6;
    vertical-align: bottom;
}

.header_bar_new .logo .material-icons {
    color: #ffffff;
    margin-top: 5px;
}

.material-icons.large {
    color: #ffffff;
    margin-top: 5px;
    font-size: 12px;
    text-align: bottom;
}

.material-icons.medium {
    color: #ffffff;
    margin-top: 5px;
    font-size: 8px;
    text-align: bottom;
}

.material-icons.small {
    color: #ffffff;
    margin-top: 5px;
    font-size: 6px;
    text-align: bottom;
}

.header_bar_new .navigation {
    float: right;
    padding: 13px 0px;
}

.header_bar_new .navigation li{
    float: left;
    list-style-type: none;
    margin-left: 24px;
}

.header_bar_new .navigation li a{
    font-family: "freight-sans-pro";
    letter-spacing: 0.89px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.6;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
}

.header_banner_new .fadein1 {
    position:absolute;
    top:53%;
    left:50%;
    width:1000px;
    -webkit-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
}

.header_banner_new h1 {
    -webkit-margin-before:0px;
    -webkit-margin-after:0px;text-align:center;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.84px;
    font-weight: 300;
    font-size: 20px;
    line-height: 1.6;
    color: #fff;
    text-decoration: none;
}

.header_banner_new h1 .fancy {
    background-size: contain;
    width: 539px;
    height: 250px;
    margin-top: 40px;
}

.header_banner_new .button {
    border: 2px solid #ffff;
    border-radius: 100;
    font-family: "freight-sans-pro";
    letter-spacing: 0.89px;
    font-weight: 400;
    font-size: 16px;
    color: #fff;
    border-radius: 50px;
    padding: 12px 40px;
    display: inline-block;
    text-transform: uppercase;
    margin-top: 50px;
}

.findoutmore_new{
    font-size: 32px;
    color: #fff;
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    -moz-animation: bounce 4s infinite;-webkit-animation:bounce 4s infinite;animation:bounce 4s infinite;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);
}

/* homepage brand boxes */

section.portfolio_item {
    width: 48%;
    margin-bottom: 2%;
    height: auto;
    background: #FFFFFF;
    display: inline-block;
    margin-right: 0px;
    padding: 0px;
}

section.portfolio_item img {
    width: 100%;
    height: auto;
}

.portfolio_item:nth-child(2n+2) {
    margin-right: 3.4%;
    clear: right;
}

/* brand page - banner */

.project_banner p {
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 500;
    margin-top: 5%;
}

/* brand page - new portfolio project boxes */

section.portfolio_item_new {
    width: 48%;
    margin-bottom: 2%;
    height: auto;
    background: #FFFFFF;
    display: inline-block;
    margin-right: 0px;
    padding: 0px;
    position: relative;
}

section.portfolio_item_new h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 40px;
    color: #FFFFFF;
    font-weight: 500;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 204, 188, .8);
    text-align: center;
    margin: 0 auto;
    line-height: 421px;
    opacity: 0;
}

section.portfolio_item_new:hover h1 {
    opacity: 1;
}

section.portfolio_item_new a {
    display: flex;
}

section.portfolio_item_new img {
    width: 100%;
    height: auto;
}

/* new generic styles */

section {
    padding: 100px 80px;
    font-family: "freight-sans-pro";
    font-size: 22px;
    overflow: hidden;
    margin: 0 auto;
}

section.text {
    padding: 32px 20%;
}

section.white {
    background: #FFFFFF !important;
}

section.grey {
    background: #EEEEEE;
}

section.full-width {
    background: #EEEEEE;
    padding: 28px;
}

.card {
    background: #FFFFFF;
    box-shadow: 0 1px 6px 0 rgba(0,0,0,0.10);
    border-radius: 10px;
    margin: 60px;
}

.centre {
    margin: 0 auto;
    width: 45%;
}


/* old */

body{padding:0px;margin:0px;-webkit-font-smoothing:antialiased;overflow-x: hidden;}
a{color:#000;}
.button.green{font-family:"freight-sans-pro";letter-spacing:0.89px;font-weight:400;font-size:16px;color:#fff;background:#949C6E;border-radius:50px;padding:12px 40px;display:inline-block;text-transform:uppercase;margin-top:30px;}
.header_bar{height:82px;max-width:1160px;margin:0 auto;background:#fff;    padding: 0 20px;}
.header_bar .logo{float:left;margin-top:22px;}
.header_bar .logo .name{font-family:"lato",sans-serif;font-size:24px;color:#4F3750;font-weight:400;}
.header_bar .logo .title{font-family:"freight-sans-pro";letter-spacing:0.89px;font-weight:400;font-size:14px;text-transform:uppercase;display:block;width:255px;margin-top:-5px;}
.header_bar .navigation{float:right;padding:13px 0px;}
.header_bar .navigation li{float:left;list-style-type:none;margin-left:20px;}
.header_bar .navigation li a{font-family:"freight-sans-pro";letter-spacing:0.89px;font-weight:400;font-size:18px;color:#382739;}
.header_banner{background:url('images/banner_background.png') no-repeat #372638;background-size:cover;padding:0px 40px;text-align:center;height:calc(100vh - 82px);position:relative; width: 100%;}
.header_banner .fadein1{position:absolute;top:50%;left:50%;width:1000px;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);}
.header_banner h1{-webkit-margin-before:0px;-webkit-margin-after:0px;text-align:center;font-family:"lato", sans-serif;font-weight:100;font-size:58px;color:#fff;}
.header_banner h1 .fancy{font-family:"memoriam-headline-pro";font-size:64px;}
.header_banner .findoutmore{font-family:'freight-sans-pro';font-size:16px;color:#fff;position:absolute;bottom:20px;left:0;width:100%;-moz-animation:bounce 4s infinite;-webkit-animation:bounce 4s infinite;animation:bounce 4s infinite;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);}
h2{-webkit-margin-before:0;-webkit-margin-after:0;font-family:"lato", sans-serif;font-weight:300;font-size:36px;margin-bottom:30px;}
.fadein, .fadein1{opacity:0;}
section#who_am_i .left{float:left;width:71%;padding-right:6%;opacity:1;}
section#who_am_i img{float:right;max-width:23%;padding-top:4%;}
section#portfolio, .work-white{background:#FFFFFF;padding:60px 80px;}
section#portfolio, .work.debs{padding:60px 80px}
section#portfolio{background:#F9F9F9;}
section.portfolio_item article{width:100%;height:auto;;position:absolute;}
.twogrid{width:48% !important;display:inline-block;}
img.workimg{width:140%;margin-top:-20%;height:auto;float:left;opacity:0.3;-webkit-transform:rotate(-10deg);transform:rotate(-10deg);}
.project_banner {
    background-size: cover;
    text-align: center;
    height: calc(100vh - 82px);
    position: relative;
    width: 100%;
}

.brand_title {
    margin: 0 auto;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
}

.project_banner.white {
    color: #FFFFFF;
}
.project_banner.black {
    color: #000000;
}

c
.project_banner h2{margin-bottom:10px !important;}
.work .work-details{text-align:left;width:40%;float:left;padding:0 4% 0 0;}
.work img{width:56%;height:auto;float:left;}
.work img.fullwidth { width: 100% !important;}
@-moz-keyframes bounce{0%, 20%, 50%, 80%, 100%{-moz-transform:translateY(0);transform:translateY(0);}
40%{-moz-transform:translateY(-10px);transform:translateY(-10px);}
60%{-moz-transform:translateY(-8px);transform:translateY(-8px);}
}
@-webkit-keyframes bounce{0%, 20%, 50%, 80%, 100%{-webkit-transform:translateY(0);transform:translateY(0);}
40%{-webkit-transform:translateY(-10px);transform:translateY(-10px);}
60%{-webkit-transform:translateY(-8px);transform:translateY(-8px);}
}
@keyframes bounce{0%, 20%, 50%, 80%, 100%{-moz-transform:translateY(0);-ms-transform:translateY(0);-webkit-transform:translateY(0);transform:translateY(0);}
40%{-moz-transform:translateY(-10px);-ms-transform:translateY(-10px);-webkit-transform:translateY(-10px);transform:translateY(-10px);}
60%{-moz-transform:translateY(-8px);-ms-transform:translateY(-8px);-webkit-transform:translateY(-8px);transform:translateY(-8px);}
}