*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.clearfix:before, .clearfix:after { content: ''; display: table; }

.clearfix:after { clear: both; }



body{

  font-family: 'Outfit';

  font-style: normal;

  color: #181818;

  background: #FAF2DB;

  line-height: 1.3em;

 



}



h1 {

  font-family: 'Jersey 10';

  font-style: normal;

  font-weight: 400;

  line-height: 0.8em;

}





a{

    text-decoration: none;

     color: #22181C;

}



img{

    width: 100%;

}



/* NAVIGATION */



.dbs-nav{

    position: fixed;

    z-index: 100;

    width: 100%;

    min-height: 40px;

    padding:24px;

    margin: 0 auto;   

}



.dbs-nav a{

    color: #FAF2DB;

}



.dbs-logo{

    font-weight: 700;





}



.dbs-nav-thumb{

    float: right;

}



.dbs-nav-thumb span{

    padding-right: 12px;

}



.dbs-thumb-nav span {

    color:#181818;



}



.dbs-overlay{

  height: 100%;

  width: 0;

  position: fixed;

  z-index: 100;

  top: 0;

  left: 0;

  background-color: #ff597b;

  background-color: rgba(255,89,123, 0.9);

  overflow-x: hidden;

  transition: 0.5s;

}



.dbs-overlay a{

     color:#FAF2DB;

}



.dbs-overlay .closebtn {

  position: absolute;

  top: 20px;

  right: 24px;

  font-size: 40px;

}



.dbs-profile {

  position: relative;

  top: 8%;

  width: 100%;

  max-width: 768px;

  padding: 0 24px;

  margin-top: 30px;

  transition: 0.3s;

  color:#FAF2DB;

}



.dbs-profile ul{

    list-style: none;

    margin:0;

    padding: 0;

    color: #FAF2DB;



}



.dbs-profile li{

    display: inline-block;

    padding-right: 12px;

}



.dbs-profile li a{

     color: #FAF2DB;

}



/* HOME */



.home-slide{

    top: 0;

    width: 100%;

    height: 100vh;

    background-color: #FF597B;

}



.main-title{

    margin: 16% 0;

    width: 68%;

    padding: 0 24px;

      color: #FF597B;

}



.main-title h1{

    font-size: 4.5rem;

    margin-bottom: 16px;

    line-height: 3.3rem

  

}



.main-title p{

    font-weight: 500;

}



.home-thumb{

    width: 60px;

    height: 60px;

    display: inline-block;

    margin-right: 24px;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

}



.home-thumb.drag{

    background-image: url("../img/drag.svg");

}



.home-thumb.keys{

    background-image: url("../img/keys.svg");

}





.home-img{

    width: 60%;

    height: 100vh;

    background-color: #c3c3c3;

    float: right;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

}



.home-img.cnbc {

    background-image: url('../img/cnbc/cnbc-bg.jpeg');

}



.home-img.tax-system {

    background-image: url('../img/tax-systems/tax-systems-banner.jpg');

}



.home-img.goalgiving {

    background-image: url('../img/goalgiving/goalgiving-header.jpg');

}





.home-img.adidas {

    background-image: url('../img/adidas/adidas-banner.jpg');

}



.home-img.iqos {

    background-image: url('../img/iqos/iqos-banner.jpg');

}



.home-img.stella {

    background-image: url('../img/stella-artois/stella-artois-banner.jpg');

}



.home-img.three {

    background-image: url('../img/three/three-uk-header.jpg');

}



.home-img.architas {

    background-image: url('../img/architas/architas-main-header.jpg');

}



.home-img.currys {

    background-image: url('../img/currys/curry-banner.jpg');

}



.home-img.josephjoseph {

    background-image: url('../img/josephjoseph/josephjoseph-header.jpg');



}



.home-img.avast {

    background-image: url('../img/avast/avast-main-header.jpg');



}



.home-img.ocado {

    background-image: url('../img/ocado/ocado-main-header.jpg');



}



.home-img.abel {

    background-image: url('../img/a&c/abel-cole-header.jpg');



}



.home-img.holiday-club {

    background-image: url('../img/holiday-club/holiday-club-main-header.jpg');



}



.home-img.inspire {

    background-image: url('../img/inspire/inspire-thumb.jpg');



}



.home-img.hertz {

    background-image: url('../img/hertz/hertz-banner.jpg');



}



.home-img.upper {

    background-image: url('../img/futurecity/futurecity-banner.jpg');

}



.home-img.iamddb {

    background-image: url('../img/iamddb/iamddb-banner.jpg');

}



.home-img.s_ply {

    background-image: url('../img/s-ply/s-ply-banner.jpg');



}



.home-img.mysteryvibe {

    background-image: url('../img/mysteryvibe/mysteryvibe-main-header.jpg');



}



.home-img.casio {

    background-image: url('../img/casio/casio-banner.jpg');

}



.home-img.gamesys {

    background-image: url('../img/gamesys/gamesys-banner.jpg');

}



.home-img.head {

    background-image: url('../img/head-uk/head-web-banner.jpg');

}



.home-img.cercle {

    background-image: url('../img/cercle/cercle-banner.jpg');

}



.home-img.golin {

    background-image: url('../img/golin/golin-banner.jpg');

}



.home-img.lord-willin {

    background-image: url('../img/lord-willin/lord-willin-banner.jpg');

}



.dbs-port-type{

    width: 100%;

    position: absolute;

    margin: 13% 0;

    padding-left: 24px;

    color: #FAF2DB;

}



.dbs-port-type h1 span{

    display: block;

    font-size: 42px;

    line-height: 6rem;



}



.dbs-port-type h1{

    font-size: 90px;

    margin-bottom: 42px;



}



.port-type{

   background: none;

   border: 1px solid #FAF2DB;

   color: #FAF2DB;

   margin-right: 20px;

   padding: 12px;

}



@media only screen and (max-width: 600px) {



}





/* WORK */





.dbs-work-gallery{

	position:absolute;

	width: 100%;

	max-width: 1320px;

	top: 120;

	left: 0;

	right: 0;

	margin: 0 auto;

	

	

	

}



.dbs-image-gallery{

	width: 100%;

	max-width: 1440px;

	padding: 0 40px;

	margin: 80px auto;

	position: absolute;

}



.filterButtons{

	padding-bottom: 24px;

}



.btn{

	background: none;

	border: 0px;

	font-size: 32px;

	font-family: "Outfit", sans-serif;

	padding-right: 12px;

	color: #FAF2DB;

	cursor: pointer;

}



.btn:hover {

  transition: .5s ease;

  color: #FF476C;

}



.btn.active{

 color: #FF476C;

}



#mybtnContainer{

	padding-left: 42px;

}



.work-container{

	margin-top: 32px;

}



.dbs-thumb{

	position: relative;

	margin: 24px 0;

	display: none;

	

}



.show{

	transition: .5s ease;

	display: block;

}





.dbs-thumb-long{

	width: 90%;

	height: 450px;

	margin-left:10%;

	background-position: center;

  	background-repeat: no-repeat;

  	background-size: cover;

}



.dbs-thumb-mid{

	width: 90%;

	height: 350px;

	margin-left:10%;

	background-position: center;

 	background-repeat: no-repeat;

  	background-size: cover;

}



.dbs-thumb-short{

	width: 90%;

	height: 250px;

	margin-left:10%;

	background-color: #181818;

	background-position: center;

  	background-repeat: no-repeat;

  	background-size: cover;

}



.dbs-thumb-overlay {

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  opacity: 0;

  transition: .5s ease;

}



.dbs-thumb:hover .dbs-thumb-overlay{

	 opacity: 1;

}



.thumb-type {

	padding: 3px 16px;

	opacity: 0;

    transition: .5s ease;

}



.dbs-thumb:hover .thumb-type{

	 opacity: 1;

}



.t-type{

	margin-top: 13px;

	font-size: 14px;

	font-family: "Outfit", sans-serif;

	border-radius: 24px;

	background: none;

	margin-left: 16px;

	padding: 4px 8px;

	color: #FAF2DB;

	border: 1px solid #FAF2DB;

}



.dbs-img-thumb h2 {

	display: inline-block;

	padding-left:10%;

	padding-top: 8px;

}



.dbs-thumb-des{

	cursor: pointer;

	padding: 8px 16px;

	font-size: 16px;

	font-family: "Outfit", sans-serif;

	border-radius: 24px;

	background-color: #FF597B;

	border: 1px solid #181818;

	margin: 25% 0;



}



.dbs-thumb-long.holiday{

background-image: url('../img/holiday-club/holiday-club-header.jpg');

}



.dbs-thumb-long.upper{

background-image: url('../img/futurecity/futurecity-banner.jpg');

}



.dbs-thumb-long.iamddb{

background-image: url('../img/iamddb/iamddb-banner.jpg');

}



.dbs-thumb-long.cercle{

background-image: url('../img/cercle/cercle-banner.jpg');

}



.dbs-thumb-long.lord-willin{

background-image: url('../img/lord-willin/lord-willin-banner.jpg');

}





.dbs-thumb-mid.cnbc{

background-image: url('../img/cnbc/cnbc-bg.jpeg');

}



.dbs-thumb-mid.tax-systems{

background-image: url('../img/tax-systems/tax-systems-banner.jpg');

}



.dbs-thumb-mid.hertz{

background-image: url('../img/hertz/hertz-banner.jpg');

}



.dbs-thumb-mid.s-ply{

background-image: url('../img/s-ply/s-ply-banner.jpg');

}



.dbs-thumb-mid.adidas{

background-image: url('../img/adidas/adidas-banner.jpg');

}



.dbs-thumb-mid.three{

background-image: url('../img/three/three-header.jpg');

}



.dbs-thumb-mid.mysteryvibe{

background-image: url('../img/mysteryvibe/mysteryvibe-banner.jpg');

}



.dbs-thumb-short.goalgiving{

background-image: url('../img/goalgiving/goalgiving-header.jpg');

}



.dbs-thumb-short.josephjoseph{

background-image: url('../img/josephjoseph/josephjoseph-header.jpg');

}



.dbs-thumb-short.architas{

background-image: url('../img/architas/architas-main-header.jpg');

}



.dbs-thumb-short.abel{

background-image: url('../img/a&c/abel-cole-banner.jpg');

}



.dbs-thumb-short.gamesys{

background-image: url('../img/gamesys/gamesys-banner.jpg');

}



.dbs-thumb-short.head{

background-image: url('../img/head-uk/head-web-banner.jpg');

}



.dbs-thumb-short.currys{

background-image: url('../img/currys/curry-banner.jpg');

}



.dbs-thumb-short.avast{

background-image: url('../img/avast/avast-banner.jpg');

}



.dbs-thumb-short.iqos{

background-image: url('../img/iqos/iqos-main-header.jpg');

}



.dbs-thumb-short.stella{

background-image: url('../img/stella-artois/stella-artois-banner.jpg');

}



.dbs-thumb-short.ocado{

background-image: url('../img/ocado/ocado-main-header.jpg');

}



.dbs-thumb-short.inspire{

background-image: url('../img/inspire/inspire-thumb.jpg');

}



.dbs-thumb-short.casio{

background-image: url('../img/casio/casio-banner.jpg');

}



.dbs-thumb-short.golin{

background-image: url('../img/golin/golin-banner.jpg');

}



/* PORT */



.dbs-port-header{

    width: 100%;

    min-height: 600px;

    color:#FF476C;

    padding: 15% 0;



}



.dbs-port-header h1{

    padding: 0 24px;

    font-size: 10vw;

}



.port-banner{

    width: 100%;

    height: 80vh;

    background: #cdcdcd;

    background-position: center;

  	background-repeat: no-repeat;

  	background-size: cover;

}



.port-banner.cnbc{

background-image: url('../img/cnbc/cnbc-bg.jpeg');

}



.dbs-port-container{

    width: 100%;

    padding: 24px;

}



.dbs-port-container h1{

    color:#FF597B;

}



.dbs-port-container img{

    padding: 16px 0;

}



.p-type{

    background: none;

    padding: 4px 8px;

    border: 1px solid #FF597B;

    color:#FF597B;

    font-size: 14px;

    border-radius: 24px;

}



.p-type.year{

    float: right;

}



.project-type{

    padding-bottom: 24px;

}



.dbs-project-overview{

    font-weight: 400;

    line-height: 1.4em;

    padding: 32% 0;

    color:#FF597B;



}



.port-banner.cnbc {

    background-image: url('../img/cnbc/cnbc-bg.jpeg');

}



.port-banner.tax-system {

    background-image: url('../img/tax-systems/tax-systems-banner.jpg');

}



.port-banner.goalgiving {

    background-image: url('../img/goalgiving/goalgiving-header.jpg');

}





.port-banner.adidas {

    background-image: url('../img/adidas/adidas-banner.jpg');

}



.port-banner.iqos {

    background-image: url('../img/iqos/iqos-banner.jpg');

}



.port-banner.stella {

    background-image: url('../img/stella-artois/stella-artois-banner.jpg');

}

.port-banner.three {

    background-image: url('../img/three/three-uk-header.jpg');

}



.port-banner.architas {

    background-image: url('../img/architas/architas-main-header.jpg');

}



.port-banner.currys {

    background-image: url('../img/currys/curry-banner.jpg');

}



.port-banner.josephjoseph {

    background-image: url('../img/josephjoseph/josephjoseph-header.jpg');



}



.port-banner.avast {

    background-image: url('../img/avast/avast-main-header.jpg');



}



.port-banner.ocado {

    background-image: url('../img/ocado/ocado-main-header.jpg');



}



.port-banner.abel {

    background-image: url('../img/a&c/abel-cole-header.jpg');



}



.port-banner.holiday-club {

    background-image: url('../img/holiday-club/holiday-club-main-header.jpg');



}



.port-banner.inspire {

    background-image: url('../img/inspire/inspire-thumb.jpg');



}



.port-banner.hertz {

    background-image: url('../img/hertz/hertz-banner.jpg');



}



.port-banner.upper {

    background-image: url('../img/futurecity/futurecity-banner.jpg');

}



.port-banner.iamddb {

    background-image: url('../img/iamddb/iamddb-banner.jpg');

}



.port-banner.s_ply {

    background-image: url('../img/s-ply/s-ply-banner.jpg');



}



.port-banner.mysteryvibe {

    background-image: url('../img/mysteryvibe/mysteryvibe-main-header.jpg');



}



.port-banner.casio {

    background-image: url('../img/casio/casio-banner.jpg');

}



.port-banner.gamesys {

    background-image: url('../img/gamesys/gamesys-banner.jpg');

}



.port-banner.head {

    background-image: url('../img/head-uk/head-web-banner.jpg');

}



.port-banner.cercle {

    background-image: url('../img/cercle/cercle-banner.jpg');

}



.port-banner.golin {

    background-image: url('../img/golin/golin-banner.jpg');

}



.port-banner.lord-willin {

    background-image: url('../img/lord-willin/lord-willin-banner.jpg');

}



@media only screen and (min-width: 600px) {



    .dbs-port-header h1{

        width: 60%;

        position: absolute;

        font-size: 10vw;

    }



    .port-banner{

        width: 80%;

        float: right;

    }



    .dbs-port-container{

    width: 90%;

    margin: 120px 5%;

    padding: 24px;

}



.project-type{

    padding-top: 24%;



}



.dbs-project-overview{

    padding: 12% 0;





}



}