#myVideo {

	position: absolute;

	right: 0;

	bottom: 0;

	top: 0;

	right: 0;

	width: 100%;

	height: 100%;

	background-size: 100% 100%;

	background-color: black; /* in case the video doesn't fit the whole page*/

 background-image: /* our video */;

	background-position: center center;

	background-size: contain;

	object-fit: cover; /*cover video background */

	z-index: 3;

}

#section1 {

	position: relative;

}

#section1:after {

	background: rgba(0,0,0,0.31);

	position: absolute;

	left: 0;

	right: 0;

	top: 0;

	bottom: 0;

	z-index: 3;

	height: 100%;

	width: 100%;

	content: "";

}

.layer-txt {

	left: 0;

	position: absolute;

	top: 50%;

	width: 100%;

	text-align: center;

	z-index: 4;

	transform: translateY(-50%);

    padding:0 20px;

}

.layer-txt h1 {

	color: #ffffff;

	font-size: 5.6em;

	line-height: 1.3;

	text-shadow: 0px 10px 30px rgba(0, 0, 0, 0.79);

	font-weight: 900;

	margin: 0;

	padding: 0;

}

.layer-txt h1 span {

	color: #fff;

	font-size: 0.25em;

	display: block;

}

.demo {

	z-index: 10;

	position: absolute;

	bottom: 100px;

	left: 50%;

	margin-left: -40px;

}

.demo a {

	display: block;

	position: relative;

}

.demo a span {

	position: absolute;

	top: 0;

	left: 50%;

	background: #454545;

	width: 80px;

	height: 80px;

	border-radius: 50%;

}

.demo a span:after {

	position: absolute;

	top: 50%;

	left: 50%;

	content: '';

	width: 20px;

	height: 20px;

	margin: -15px 0 0 -10px;

	border-left: 2px solid #fff;

	border-bottom: 2px solid #fff;

	-webkit-transform: rotate(-45deg);

	transform: rotate(-45deg);

	box-sizing: border-box;

}

.demo a span:before {

	position: absolute;

	top: 0;

	left: 0;

	z-index: -1;

	content: '';

	width: 80px;

	height: 80px;

	box-shadow: 0 0 0 0 rgba(255,255,255,.1);

	border-radius: 100%;

	opacity: 0;

	-webkit-animation: sdb03 3s infinite;

	animation: sdb03 3s infinite;

	box-sizing: border-box;

}

@-webkit-keyframes sdb03 {

 0% {

 opacity: 0;

}

 30% {

 opacity: 1;

}

 60% {

 box-shadow: 0 0 0 60px rgba(255,255,255,.1);

 opacity: 0;

}

 100% {

 opacity: 0;

}

}

@keyframes sdb03 {

 0% {

 opacity: 0;

}

 30% {

 opacity: 1;

}

 60% {

 box-shadow: 0 0 0 60px rgba(255,255,255,.1);

 opacity: 0;

}

 100% {

 opacity: 0;

}

}

.second-content {

	display: table;

	width: 100%;

	table-layout: fixed;

}

.graphic-side {

	text-align: right;

	display: table-cell;

	vertical-align: middle;

	padding: 0 5%;

}

.graphic-side img {

	display: inline-block;

}

.text-side {

	display: table-cell;

	vertical-align: middle;

}

.text-side h2 {

	color: #ef2b55;

	max-width: 603px;

	display: block;

	font-size: 3.75em;

	font-weight: 900;

	line-height: 1;

	margin-bottom: 30px;

	text-transform: uppercase;

}

.text-side p {

	max-width: 444px;

	display: block;

	font-size: 1.5em;

	font-weight: 300;

	line-height: 1.5;

	margin-bottom: 50px;

	color: #5f6060;

}

.section3 {

	background-image: url(../images/port-bg.jpg);

}

.section4 {

	background-image: url(../images/creative.jpg);

}

/*.section4:after {

	position: absolute;

	left: 0;

	top: 0;

	right: 0;

	bottom: 0;

	width: 100%;

	height: 100%;

	content: "";

	background: rgba(255,255,255,0.5);

	z-index: 0;

}*/

.section5 {

	background-image: url(../images/bg-5.jpg);

}

.section6 {

	background-image: url(../images/bg-6.jpg);

}

.tiles {

	height: 450px;

	left: 0;

	margin-left: -169px;

	overflow: hidden;

	position: absolute;

	top: 50%;

	transform: translate(0%, -50%);

	width: 350px;

}

.tile {

	background: #2cbfd3;

	height: 320px;

	left: 0;

	position: absolute;

	transform: rotate(-45deg);

	width: 264px;

	z-index: 3;

}

.tile:nth-child(2) {

	background: #ef2b55;

	z-index: 2;

	top: 50px;

}

.tile:nth-child(3) {

	background: #ffdd1e;

	z-index: 1;

	top: 100px;

}

.home-portfolio {

}

/*



.home-portfolio .slick-arrow {

	margin: 0;

	position: absolute;

	left: 50%;

	transform: translate(-50%, -50%);

	top: 50%;

	z-index: 1;

	width: 60px;

	height: 60px;

	text-align: center;

	background-size: 30px;

	background-repeat: no-repeat;

	background-position: center center;

	text-indent: -9999px;

	border: none;

	background-color: #ef2b55;

	border-radius: 50%;

	margin-left: -119px;

}

.home-portfolio .slick-arrow:hover {

}

.home-portfolio .slick-arrow.slick-prev {

	background-image: url(../images/retina/back-white.svg);

	margin-top: 137px;

}

.home-portfolio .slick-arrow.slick-next {

	background-image: url(../images/retina/next-white.svg);

	margin-top: -167px;

}*/





.home-portfolio .slick-arrow {

	position: absolute;

	width: 100px;

	top:50%;

	height:62px;

	border: none;

	outline: none;

	background-color: rgba(239, 43, 85, 0);

	text-indent: -9999px;

	z-index: 10; margin-top:-31px;

	cursor: pointer;

}

.home-portfolio .slick-arrow:before {

	content: "";

	position: absolute;

	display: block;

	width: 42px;

	height: 42px;

	top: 50%;

	margin-top: -21px;

	-webkit-transition: all, 0.3s, cubic-bezier(0.55, 0, 0.1, 1) 1s ease-in-out;

	-khtml-transition: all, 0.3s, cubic-bezier(0.55, 0, 0.1, 1) 1s ease-in-out;

	-moz-transition: all, 0.3s, cubic-bezier(0.55, 0, 0.1, 1) 1s ease-in-out;

	-ms-transition: all, 0.3s, cubic-bezier(0.55, 0, 0.1, 1) 1s ease-in-out;

	-o-transition: all, 0.3s, cubic-bezier(0.55, 0, 0.1, 1) 1s ease-in-out;

	transition: all, 0.3s, cubic-bezier(0.55, 0, 0.1, 1) 1s ease-in-out;

}

.home-portfolio .slick-arrow:after {

	content: "";

	position: absolute;

	display: block;

	height: 2px;

	width: 160px;

	top: 50%;

	background-color:rgba(239, 43, 85, 1);

	-webkit-transition: all, 0.4s 0.1s, cubic-bezier(0.55, 0, 0.1, 1) 1s ease-in-out;

	-khtml-transition: all, 0.4s 0.1s, cubic-bezier(0.55, 0, 0.1, 1) 1s ease-in-out;

	-moz-transition: all, 0.4s 0.1s, cubic-bezier(0.55, 0, 0.1, 1) 1s ease-in-out;

	-ms-transition: all, 0.4s 0.1s, cubic-bezier(0.55, 0, 0.1, 1) 1s ease-in-out;

	-o-transition: all, 0.4s 0.1s, cubic-bezier(0.55, 0, 0.1, 1) 1s ease-in-out;

	transition: all, 0.4s 0.1s, cubic-bezier(0.55, 0, 0.1, 1) 1s ease-in-out;

	opacity: 0;

}

.home-portfolio .slick-arrow.slick-prev {

	left: 0;

}

.home-portfolio .slick-arrow.slick-prev:before {

	border-top: 2px solid rgba(239, 43, 85, 1);

	border-left: 2px solid rgba(239, 43, 85, 1);

	left: 20px;

	-webkit-transform: rotate(-45deg);

	-khtml-transform: rotate(-45deg);

	-moz-transform: rotate(-45deg);

	-ms-transform: rotate(-45deg);

	-o-transform: rotate(-45deg);

	transform: rotate(-45deg);

}

.home-portfolio .slick-arrow.slick-prev:after {

	left: 120px;

}

.home-portfolio .slick-arrow.slick-prev:hover:before {

	left: 60px;

}

.home-portfolio .slick-arrow.slick-prev:hover:after {

	left: 54px;

	opacity: 1;

	width: 80px;

}

.home-portfolio .slick-arrow.slick-next {

	right: 0;

}

.home-portfolio .slick-arrow.slick-next:before {

	border-bottom: 2px solid rgba(239, 43, 85, 1);

	border-right: 2px solid rgba(239, 43, 85, 1);

	right: 20px;

	-webkit-transform: rotate(-45deg);

	-khtml-transform: rotate(-45deg);

	-moz-transform: rotate(-45deg);

	-ms-transform: rotate(-45deg);

	-o-transform: rotate(-45deg);

	transform: rotate(-45deg);

}

.home-portfolio .slick-arrow.slick-next:after {

	right:120px;

}

.home-portfolio .slick-arrow.slick-next:hover:before {

	right: 60px;

}

.home-portfolio .slick-arrow.slick-next:hover:after {

	right: 54px;

	opacity: 1;

	width: 80px;

}

.home-portfolio .item {

	display: table;

	width: 100%;

	table-layout: fixed;

	margin: 0 auto;

	position: relative;

}

.text {

	display: table-cell;

	vertical-align: middle;

	max-width: 450px;

	padding: 8%;

}

.text h2 {

	color: #00153b;

	font-size: 3.75em;

	line-height: 1.3;

	font-weight: 900;

	text-transform: uppercase;

	display: block;

}

.text span {

	display: block;

	text-transform: none;

	color: #49494a;

	line-height: 1;

	font-size: 0.25em;

	font-weight: 400;

}

.text p {

	color: #3f4040;

	font-size: 1.25em;

	font-weight: 300;

	line-height: 1.5;

	margin-bottom: 50px;

	display: block;

}

.graphic {

	display: table-cell;

	vertical-align: middle;

 width:calc( 100px + (1202 - 100) * (100vw - 320px) / (1920 - 320) );

}

.culture {

	background: #fff;

	width: 1000px;

	height: 333px;

	margin: 0 auto;

	margin-top: 55px;

}

.wow:first-child {

	visibility: hidden;

}

.culture {

	z-index: 1;

	overflow: hidden;

	position: relative;

}

.action {

	background: #ffffff;

	padding: 6px;

	position: absolute;

	left: 50%;

	top: 50%;

	margin-left: 315px;

	transform: translate(-47%, -51%);

}

.culture .txt {

	margin: 30px;

}

.culture .txt h2 {

	color: #000;

	font-size: 4.5em;

	font-weight: 900;

	text-transform: uppercase;

	line-height: 1.3;

	padding: 0;

	margin: 0;

}

.tiles.culture-tiles {

	top: 0;

	margin-left: 0;

	left: auto;

	right: 0;

	width: 550px;

	height: 550px;

	overflow: visible;

	right: -56px;

}

.tiles.culture-tiles .tile {

	width: 450px;

	height: 450px;

}

.tiles.culture-tiles .tile:nth-child(2) {

	left: -50px;

	top: auto;

}

.tiles.culture-tiles .tile:nth-child(3) {

	left: -100px;

	top: auto;

}

#hero {

	position: relative;

	height: 100%;

}

.layer {

	background-position: top left;

	background-size: auto;

	background-repeat: no-repeat;

	width: 100%;

	position: absolute;

	z-index: 0;

	transition: 1s ease 1s;

}

.section5 .layer-1 {

	transform: rotate(-20deg);

	left: 0%;

	top: -50%;

 max-width:calc( 80px + (459 - 80) * (100vw - 320px) / (1920 - 320) );

 max-height:calc( 80px + (182 - 80) * (100vh - 320px) / (920 - 320) );

}

.section5.active .layer-1 {

	transform: rotate(0deg);

	transition: 1s ease 1s;

	left: 0;

	top: -23%;

}

.section5 .layer-2 {

	transform: rotate(-180deg);

	left: -50%;

	top: 0%;

 max-width:calc( 80px + (669 - 80) * (100vw - 320px) / (1920 - 320) );

 max-height:calc( 80px + (402 - 80) * (100vh - 320px) / (920 - 320) );

}

.section5.active .layer-2 {

	transform: rotate(0deg);

	transition: 2s ease 1.5s;

	left: -12%;

	top: 18%;

}

.section5 .layer-3 {

	transform: rotate(-180deg);

	left: -50%;

	top: 47%;

 max-width:calc( 80px + (336 - 80) * (100vw - 320px) / (1920 - 320) );

 max-height:calc( 80px + (248 - 80) * (100vh - 320px) / (920 - 320) );

}

.section5.active .layer-3 {

	transform: rotate(0deg);

	transition: 2s ease 1.5s;

	left: -3%;

	top: 40%;

}

.section5 .layer-4 {

	transform: rotate(-20deg);

	bottom: -150%;

	left: -6%;

 max-width:calc( 80px + (961 - 80) * (100vw - 320px) / (1920 - 320) );

 max-height:calc( 80px + (1156 - 80) * (100vh - 320px) / (920 - 320) );

}

.section5.active .layer-4 {

	transform: rotate(0deg);

	transition: 2s ease 3.5s;

	bottom: -86%;

	left: -6%;

}

.section5 .layer-5 {

	transform: rotate(-360deg);

	bottom: -50%;

	right: 14%;

 max-width:calc( 80px + (285 - 80) * (100vw - 320px) / (1920 - 320) );

 max-height:calc( 80px + (304 - 80) * (100vh - 320px) / (920 - 320) );

}

.section5.active .layer-5 {

	transform: rotate(0deg);

	transition: 2s ease 0.5s;

	bottom: 23%;

	right: 14%;

}

.section5 .layer-6 {

	transform: rotate(-45deg);

	bottom: -50%;

	right: -50%;

 max-width:calc( 80px + (576 - 80) * (100vw - 320px) / (1920 - 320) );

 max-height:calc( 80px + (748 - 80) * (100vh - 320px) / (920 - 320) );

}

.section5.active .layer-6 {

	transform: rotate(0deg);

	transition: 2s ease 2.5s;

	bottom: -29%;

	right: -4%;

}

.section5 .layer-7 {

	transform: rotate(-90deg);

	right: -50%;

	top: -50%;

 max-width:calc( 80px + (568 - 80) * (100vw - 320px) / (1920 - 320) );

 max-height:calc( 80px + (653 - 80) * (100vh - 320px) / (920 - 320) );

}

.section5.active .layer-7 {

	transform: rotate(0deg);

	transition: 2s ease 0.5s;

	right: -12%;

	top: -24%;

}

.section5 .layer-8 {

	transform: rotate(-180deg);

	right: 0;

	top: -100%;

 max-width:calc( 80px + (728 - 80) * (100vw - 320px) / (1920 - 320) );

 max-height:calc( 80px + (965 - 80) * (100vh - 320px) / (920 - 320) );

}

.section5.active .layer-8 {

	transform: rotate(0deg);

	transition: 2s ease 1.5s;

	right: 0;

	top: -61%;

}

.digital {

	background: #ffdd1e;

	width: 40rem;

	height: 40rem;

	border-radius: 50%;

	position: absolute;

	z-index: 1;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

	text-align: center;

	vertical-align: middle;

}

.digital:after, .digital:before {

	border: 1px solid #ffffff;

	border-radius: 50%;

	content: "";

	height: 103%;

	left: 50%;

	position: absolute;

	top: 50%;

	transform: translate(-50%, -50%);

	width: 103%;

}

.digital:before {

	height: 106%;

	width: 106%;

}

.circle {

	position: relative;

	z-index: 1;

	height: 100%;

}

.circle h2 {

	letter-spacing: -2px;

	color: #000;

	font-size: 3.75em;

	font-weight: 900;

	text-transform: uppercase;

	line-height: 1.1;

	padding: 0px 62px;

	margin: 0;

	position: relative;

	top: 47%;

	transform: translateY(-50%);

}

.circle h2 span {

	display: block;

	color: #000;

	position: relative;

	margin-bottom: 35px;

	font-weight: 900;

}

.circle h2 span:after {

	height: 3px;

	background: #000;

	width: 80px;

	margin: 0 auto;

	left: 0;

	right: 0;

	position: absolute;

	bottom: 0;

	content: "";

}

.btn-location {

	position: relative;

	top: 40%;

	transform: translateY(-50%);

}

.brand-txt {

}

.brand-txt h4 {

	color: #000;

	font-size: 2.5em;

	font-weight: 300;

}

.brand-txt .year {

	position: relative;

}

.brand-txt .year span {

	color: #000;

	font-size: 14em;

	font-weight: 900;

	letter-spacing: -20px;

	line-height: 1;

}

.brand-txt .est {

	line-height: 1;

	color: #fff;

	font-size: 1.3em;

	font-weight: 600;

	position: absolute;

	left: 30px;

	top: 23px;

	letter-spacing: normal;

}

.strip-txt {

	background: rgba(255,255,255,0.3);

	padding: 30px 0;

}

.strip-txt h3 {

	color: #000;

	font-weight: 300;

	font-size: 3.25em;

	max-width: 540px;

	line-height: 1.2;

}

.pro-flyers {

	position: absolute;

	width: 100%;

	height: 100%;

	top: 0;

}

.pro-flyers .flyers {

	position: absolute;

	top: 50%;

	left: 50%;

}

.pro-flyers img {

	width: 100%;

	height: auto;

}

.pro-flyers .shapes {

	width: 1090px;

	top: 50%;

	transform: translateY(-50%);

}

.pro-flyers .fatbit {

	width: 270px;

	margin-left: 120px;

	margin-top: -297px;

}

.pro-flyers .bizixx {

	width: 338px;

	margin-left: 404px;

	margin-top: -368px;

}

.pro-flyers .yokart {

	width: 536px;

	margin-left: 148px;

	margin-top: -142px;

}

.pro-flyers .square {

	width: 185px;

	margin-left: 599px;

	margin-top: -102px;

}

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

html {

	font-size: 14px;

}

}

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

	

.layer-txt h1 {

	font-size: 3.0em;

}

.graphic-side, .text-side {

	display: block;

	padding: 10%;

}

.text-side h2 {

	font-size: 1.75em;

	margin-bottom: 5px;

}



.text-side p {

	font-size: 1em;

	margin-bottom: 5px;

}

.home-portfolio .item {

	display: block;

	width: auto;

}

.text, .graphic {

	display: block;

	padding: 10%;

	text-align: center;

}.text h2{ font-size:2.75em;}

.graphic {

	display: none;

}

.action {

	display: inline-block;

	margin: 0 auto;

	white-space: nowrap;

}

.digital {

	width: 13em;

	height: 13em;

}

.circle h2 {

	font-size: 1.5em;

	padding: 0;

	letter-spacing: 0;

}

.circle h2 span {

	margin-bottom: 7px;

}

.btn-location {

	display: none;

}

.brand-txt h4 {

	font-size: 1.5em;

}

.brand-txt .est {

	position: static;

	vertical-align: top;

}

.brand-txt .year span {

	font-size: 8em;

}

.strip-txt h3 {

	font-size: 2.25em;

}

.pro-flyers {

	display: none;

}

.meetteam{ display:none !important;}

}





/** 31 July **/

.page--contact-us .logo-contact{

    margin:20px;

    width:100px;

}