body,html{width:100%;height:100%;}

body{border:10px solid #fff;border-bottom:0;border-left:0;color:#000;font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:18px;font-weight:300;position:relative;overflow-x:hidden;}
.ipad .main-nav{-webkit-transform:translate3d(0, 0, 0)}
@media only screen and (min-width:768px){.main-nav{background:#fff;border-top:10px solid #fff;font-size:14px;width:338px;z-index:99;position:fixed;top:-10px;left:-258px;bottom:0;-webkit-transition:left .4s;transition:left .4s}.main-nav ul{list-style-type:none;padding:0;margin:30px 20px 30px 40px}.main-nav ul li{margin-bottom:6px} .main-nav.on{left:0} .main-nav .vertical-nav{background:#000;float:left;width:258px}.main-nav .vertical-nav a{color:#666} .main-nav .top-nav{font-weight:400;margin-top:30px;text-transform:uppercase}.main-nav .top-nav .active a{color:#fff} .main-nav .branding{background:#fff;float:left;position:relative;width:80px}.main-nav .branding .logo{background:url(../images/logo.png) no-repeat;display:block;height:95px;margin:26px auto;text-indent:-999em;width:26px;position:absolute;bottom:0;left:26px;}}.page-nav{position:fixed;right:40px;top:50%;z-index:100}.page-nav .active a{color:#f00}
.button{border:4px solid #000;display:inline-block;padding:7px 55px;font-size:13px;text-decoration:none;transition:all .3s}.button:hover{background-color:#000;color:#fff}.button.white{color:#fff;border:4px solid #fff;display:inline-block;padding:0px 55px;font-size:13px;text-decoration:none;transition:all .3s}.button:hover{background-color:#fff;color:#000}
.page-nav ul{background:none;padding:0}.page-nav ul li{border:2px solid #f8f8f8;background:#f8f8f8;-webkit-border-radius:7px;border-radius:7px;height:14px;line-height:1;margin-bottom:10px;padding:0;width:14px}.page-nav ul li:hover,.page-nav ul li:focus{background:#e0e0e0;border-color:#e0e0e0}
.page-nav ul li.active{background:none;border-color:#fff;}
.page-nav ul li a{display:block;padding:0;text-indent:-9999px}.page-nav ul li a:hover,.page-nav ul li a:focus{background:transparent;padding:0;overflow:hidden}
.content{overflow:hidden;margin-left:80px;-webkit-transition:left .4s;transition:left .4s;position:relative;left:0;top:0;height: 100%;	}.content.on{left:258px}
.content section{background:#f8f8f8;background-size:100% 100%;position:relative; width:100%;height: 100%;}
.content section p{margin-bottom:33px;}
.data-platform .content{margin-left:80px;-webkit-transition:left .4s;transition:left .4s;position:relative;left:0;top:0;z-index:10}.data-platform .content section{position:relative;z-index:10}
.data-platform .content section#section-3 .center{text-align:center;border-bottom:none;}.data-platform .content section#section-3 .row .center p{max-width:540px;margin:0 auto 50px auto;}



.data-platform .content .js-fade{opacity:0;-ms-transition:all .4s;-webkit-transition:all .4s;transition:all .4s}
.data-platform .content .inView .js-fade,.data-platform .content .prevView .js-fade,.data-platform .content .nextView .js-fade{opacity:1}
.shop .content .main-content{padding-top:7%}
.shop header{-ms-transition:all .2s;-webkit-transition:all .2s;transition:all .2s}
.shop .case-study{margin:0}.shop .case-study .row>div{text-align:center}
.shop .case-study img{max-width:100%}
.shop section#section-1{background:#f8f8f8 url(../images/bg-home.png) no-repeat right center;background-size:80% 80%}.shop section#section-1 .arrow:hover{background-position:0 -55px}.shop section#section-1 .gif{width:80%;height:80%;overflow:hidden;position:absolute;top:10%;right:0;z-index: 0;text-align:center;}.shop section#section-1 .gif img{display:none; min-width: 1000px;margin: 0 auto;}.shop section#section-1 .gif img.over{display:block;min-width:1000px;}
.shop section#section-2{background:#f8f8f8 url(../images/shop/heineken-duo.jpg) no-repeat right center;background-size:80% auto}
.shop section#section-3{background:#f2f2f2 url(../images/shop/newsroom-duo.jpg) no-repeat right center;background-size:80% auto}
.shop section#section-4{background:#f8f8f8 url(../images/shop/idci-duo.jpg) no-repeat right center;background-size:80% auto}
.shop section#section-5{background:#f2f2f2 url(../images/shop/fix-duo.jpg) no-repeat right center;background-size:80% auto}
.lets-talk .content section{background:#6fc;padding-top:7%}.lets-talk .content section h2{font-size:inherit}
.lets-talk .content section a.cta{border:4px solid #000;display:inline-block;padding:7px 55px;text-transform:uppercase;font-weight:bold;font-size:13px;text-decoration:none;transition:all .3s}.lets-talk .content section a.cta:hover{background-color:#000;color:#fff}
.privacy .content{ height: auto; overflow: auto; }
.privacy .content .main-content{padding-top:7%}.privacy .content .main-content h3{margin-bottom:30px}
.clients .content .main-content{padding-top:7%}.clients .content .main-content h3{margin-bottom:30px}
.clients .content .main-content img{max-width:100%;margin-top:-17%}
.arrow{background:url(../images/arrow.png) no-repeat;display:inline-block;height:57px;width:28px}.arrow:hover{background-position:0 -55px}
footer{background:#fff;clear:both;font-size:14px;overflow:hidden;padding:40px 40px 40px 9%;z-index:999;position:relative}footer>div{float:left;margin-right:3.3%;width:25%}
footer .email-block{border-top:1px solid #f8f8f8;padding-top:40px;margin-top:40px;width:68%}
.navbar-toggle{background:#fff;-webkit-border-radius:0;border-radius:0;cursor:pointer;display:block;float:none;margin:0 auto;padding:29px}.navbar-toggle .icon-bar{background:#000;height:4px;-webkit-transition:all .6s;transition:all .6s;opacity:1}
.navbar-toggle .icon-bar+.icon-bar{margin-top:3px;outline:1px solid transparent}
.navbar-toggle.on .icon-bar:nth-child(2){-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);margin-top:8px}
.navbar-toggle.on .icon-bar:nth-child(3){-ms-transform:rotate(135deg);-moz-transform:rotate(135deg);-webkit-transform:rotate(135deg);margin-top:-4px}
.navbar-toggle.on .icon-bar:nth-child(4){opacity:0}
.navbar-toggle:hover .icon-bar{background:#6fc}
section a,.cookies a,footer a,section a:visited,.cookies a:visited,footer a:visited,footer a:visited{color:#000;text-decoration:underline}
section a:hover,.cookies a:hover,footer a:hover{color:#000;text-decoration:none}
footer a:hover{color:#6fc;text-decoration:underline}
.cookies{background:#fff;font-size:13px;line-height:20px;padding:5px 15px;text-align:center;position: relative;z-index:9999;}.cookies .close-button{background:url(../images/close.png) no-repeat;display:block;float:right;text-indent:-999em;height:20px;width:20px}.cookies .close-button:hover{background-position:0 -20px}
@media (max-width:1048px){.content section header h1{font-size:52px}}@media only screen and (max-width:767px){.navbar-toggle{display:none} .page-nav{display:none} body{font-size:16px;line-height:1.3;border:0}  .row{margin:0 5%} body .content{margin:0 !important}body .content section{min-height:480px}body .content section .col-xs-12{margin-bottom:5%;padding:0}body .content section .col-xs-12 header h1{font-size:30px} .clients .content section .col-xs-12 img{margin-top:0} .home section#section-3{background:none}.home section#section-3 .row{position:relative} .home section#section-3 .platform,.home section#section-3 .shop{width:100%;font-size:16px}.home section#section-3 .platform a,.home section#section-3 .shop a{border:4px solid #000;display:inline-block;padding:7px 55px;margin-top:30px;font-size:13px;text-decoration:none;transition:none}.home section#section-3 .platform a:hover,.home section#section-3 .shop a:hover{background-color:#000;color:#fff} .home section#section-3 .platform{position:static;top:auto;left:auto;margin-bottom:10%} .home section#section-3 .shop{position:static;top:auto;left:auto;margin-bottom:10%} footer{background:#fff;clear:both;font-size:14px;overflow:hidden;padding:40px 40px 40px 9%;z-index:999;position:relative}footer>div{float:none;width:auto;padding-top:5%;border-top:1px solid #e0e0e0} .data-platform .content{-webkit-transition:none;transition:none;position:static;z-index:10}.data-platform .content section{position:relative;min-height:480px;padding:5% 0;z-index:10}  .data-platform .content .main-content{font-size:16px}.data-platform .content .main-content .screen{width:70%;position:relative;top:auto;right:auto;z-index:20;clip:rect(auto, auto, auto, auto);float:right;margin-right:-9%}.data-platform .content .main-content .screen.landing{width:100%;position:relative;top:auto;right:auto;z-index:20;clip:rect(auto, auto, auto, auto);float:right} .data-platform .content .js-fade{opacity:1;-ms-transition:none;-webkit-transition:none;transition:none} .data-platform .content .inView .js-fade,.data-platform .content .prevView .js-fade,.data-platform .content .nextView .js-fade{opacity:1} .data-platform .content .inView .js-fade,.data-platform .content .nextView .js-fade{position:static} .shop section header span{display:none}
.data-platform .content section#section-3 .row{ padding: 0 0 0px 0;border-bottom: 1px #dbdbdb solid;margin:0 30px 50px 30px; }.data-platform .content section#section-3 .row .js-fade{position: relative;}.data-platform .content section#section-3 .row.last{margin:0;border-bottom:0;}
.data-platform .content section#section-3 .center{text-align:left;}}

/*JOHN CSS*/

.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

.cf {
    zoom:1;
}

.left{
  float: left!important
  }

.right{
  float: right!important
  }

.row{
	margin:0 auto;
	position:relative;
	}

section.even{
	background: #f2f2f2;
	}

section.dark{
	background: #333;
	color:#fff;
	font-size:60px;
	text-align:center;font-weight: 100;
	}

	section header{
		text-align: left;
		}

	section.center header{
		text-align: center;
		}

		section header.half{
			margin: 0 2%;
			width: 46%;
			}

		section header h1{
			font-size: 60px;
			font-weight: 300;
			}

			section#section-1 h1{
				font-size: 90px;
				font-weight: bold;
				} 

			section header h1 span{
				font-weight: 600;
				}

		section header h2{
			font-size:32px;
			font-weight:300;
			line-height:45px;
			margin:30px auto 0 auto;
			max-width:850px;
			text-align:center;
			}

		section header img{
			margin: 0 0 -7% 0;
			}

	section p{
		font-size:18px;
		font-weight:300;
		line-height:30px;
		margin:30px 0 0 0;
		max-width:690px;
		text-align:left;
		}

	section.center p{
		text-align: center;
		margin:30px auto 0 auto;
		}

	section .outerContainer{
			display: table;
			height: 100%;
			overflow: hidden;
			position: relative;
			width: 100%;
			z-index: 1;
			}

			section .outerContainer .innerContainer{
				display: table-cell;
				margin: 0 auto;
				text-align: left;
				vertical-align: middle;
				width: 100%;
				}

				section .outerContainer .innerContainer .element{
					margin: 0 auto;
					max-width: 1245px;
					width: 90%;
					}

				section .outerContainer .innerContainer .element{
					position: relative;
					}

					section .outerContainer .innerContainer .element .third{
						margin: 0 1.5%;
						width: 30%;
						}

						section .outerContainer .innerContainer .element .third h1{
							font-size: 38px;
							}

.data-platform #section-2 .row,
.data-platform #section-3 .row,
.data-platform #section-4 .row{
	max-width:960px;
	position:relative;
	width:90%;
	}

	.data-platform #section-2 .row,
	.data-platform #section-4 .row{
		padding: 10% 0;
		}

.home section .arrow{
	margin: 40px 0 0 0;
	position: relative;
	}

.home section{
	padding: 0 0 0 10%;
	}

	.home section#section-1{
		background:#f8f8f8 url(../images/bg-home.png) no-repeat right center;
		background-size:80% 80%
		}

		.home section#section-1 .main-content{
			padding-top:15%
			}

		.home section#section-1 .main-content h1{
			font-weight: bold;
			margin-bottom: 70px;
			text-align: left;
			}

		.home section#section-1 .main-content h2{
			font-weight:normal;
			margin: 0;
			text-align:left;
			}

	.home section#section-3{
		background:url(../images/bg-diagonal.png) no-repeat;
		background-size:100% 100%
		}

		.home section#section-3 .platform,
		.home section#section-3 .shop{
			font-size:27px;
			width:30%;
			}

		.home section#section-3 .platform{
				left:10%;
				position:absolute;
				top:10%;
				}

		.home section#section-3 .shop{
				bottom:8%;
				position:absolute;
				right:8%;
				}

			.home section#section-3 .platform a,
			.home section#section-3 .shop a{
				font-size:13px;
				font-weight: bold;
				margin-top:40px;
				}

				.home section#section-3 .platform a:hover,
				.home section#section-3 .shop a:hover{
					background: #000;
					color: #fff;
					}

.shop section h1{
	font-size: 38px;
	font-weight: bold;
	}

	.shop section .row{
		max-width: 500px;
		margin: 0 0 0 14%;
		}





/* MOBILE VERSION */

@media (max-width:768px){


	.branding{
		display: none!important;
		}

	.cookies{
		padding: 0;
		margin: 5%;
		}

		.cookies p{
			position: relative;
			text-align: left;
			width: 90%;
			}

			.cookies p .close-button{
				float: none;
				position: absolute;
				right: -5%;
				top: 9%;
				}

	.content{
		height: auto;
		}

		.content section{

			padding: 0 10%;
			width: 100%;
			}

			.content section#section-3{
				background: none;
				}

				.content section#section-3 .platform,
				.content section#section-3 .shop{
					position: relative;
					top: 0;
					left: 0;
					width: 100%;
					}

	.main-nav ul{
		list-style-type:none;
		margin:0;
		padding:0;
		}

		.main-nav ul li{
			background:#333;
			}

			.main-nav ul li a{
				color:#fff;
				display:block;
				padding: 10px 5%;
				text-align:left;
				}

		.main-nav .logo{
			margin:5%;
			} 

		.main-nav .vertical-nav{
			display:none;
			}

	.mobile-navbar-toggle{
		background:#fff;
		border:0;
		-webkit-border-radius:4px;
		border-radius:4px;
		cursor:pointer;
		display:block;
		margin:0 auto;
		position: absolute;
		right: 5%;
		top: 0; 
		padding:4px 4px 0 4px;
		width:35px;
		}

		.mobile-navbar-toggle .icon-bar{
			background:#000;
			-webkit-border-radius:2px;
			border-radius:2px;
			display:block;
			height:4px;
			margin-bottom:5px;
			width:100%;
			-webkit-transition:none;
			transition:none;opacity:1
			} 

	section#section-1 h1{
		font-size: 45px;
		font-weight: bold;
		} 

		section .outerContainer .innerContainer .element .third{
			width: 100%
			}

		.home section#section-1{
			background: #f8f8f8;

			}

		.home section#section-3{
			background: #f2f2f2;
			min-height: 750px;
			} 

			.home section#section-3 p{
				line-height: 44px;
				margin: 0;
				padding: 30px 0;

				}

}





/* ipad */

.ipad .branding{
		display: none!important;
		}

	.ipad .cookies{
		padding: 0;
		margin: 5%;
		}

		.ipad .cookies p{
			position: relative;
			text-align: left;
			width: 90%;
			}

			.ipad .cookies p .close-button{
				float: none;
				position: absolute;
				right: -5%;
				top: 9%;
				}

	.ipad .content{
		height: auto;
		overflow: normal;
		}

		.ipad .content section{
			padding: 0 10%;
			width: 100%;
			}

			.ipad .content section#section-3{
				background: none;
				}

				.ipad .content section#section-3 .platform,
				.ipad .content section#section-3 .shop{
					position: relative;
					top: 0;
					left: 0;
					width: 100%;
					}

	.ipad .main-nav ul{
		list-style-type:none;
		margin:0;
		padding:0;
		}

		.ipad .main-nav ul li{
			background:#333;
			}

			.main-nav ul li a{
				color:#fff;
				display:block;
				padding: 10px 5%;
				text-align:left;
				}

		.ipad .main-nav .logo{
			margin:5%;
			} 

		.ipad .main-nav .vertical-nav{
			display:none;
			}

	.ipad .mobile-navbar-toggle{
		background:#fff;
		border:0;
		-webkit-border-radius:4px;
		border-radius:4px;
		cursor:pointer;
		display:block;
		margin:0 auto;
		position: absolute;
		right: 5%;
		top: 0; 
		padding:4px 4px 0 4px;
		width:35px;
		}

		.ipad .mobile-navbar-toggle .icon-bar{
			background:#000;
			-webkit-border-radius:2px;
			border-radius:2px;
			display:block;
			height:4px;
			margin-bottom:5px;
			width:100%;
			-webkit-transition:none;
			transition:none;opacity:1
			} 

	.ipad section#section-1 h1{
		font-size: 45px;
		font-weight: bold;
		} 

		.ipad section .outerContainer .innerContainer .element .third{
			width: 100%
			}

		.ipad.home section#section-1{
			background: #f8f8f8;

			}

		.ipad.home section#section-3{
			background: #f2f2f2;
			min-height: 750px;
			} 

			.ipad.home section#section-3 p{
				line-height: 44px;
				margin: 0;
				padding: 30px 0;

				}