#section3{
	position:relative;
height:1340px;
width:100%;


}
#section4{
	position:relative;
height:1278px;
width:100%;

}

#responsive{
	position:absolute;
	
	top:-63px;
	right:0px;
	
	width:500px;
	height:500px;
	background: url(icons/responsive.svg);
  background-size: 100%;
  background-repeat: no-repeat;
/*
  filter: alpha(opacity=40);
  -webkit-filter: alpha(opacity=40);
*/

}

#responsiveblank{
	position:absolute;
	
	top:-63px;
	right:0px;
	
	width:500px;
	height:500px;
	background: url(icons/responsiveblank.svg);
  background-size: 100%;
  background-repeat: no-repeat;
/*
  filter: alpha(opacity=40);
  -webkit-filter: alpha(opacity=40);

*/
}

.responsive{
	margin-top:300px;
}

#front{

}

#frontend{

	position:relative;
	
	left:0px;
	right:0px;
	width:1200px;
	height:1200px;

margin-top:758px;
margin-right: auto;
margin-left: auto;
 opacity:0;

}

#interanim{
	position:relative;
	
	left:0px;
	right:0px;
	width:100%;
	height:250px;
	margin-left:auto;
	margin-right:auto;
margin-bottom: 70px;
margin-top: 150px;

}

#interactive{
	position:absolute;
	left:0px;
	width:500px;
	height:500px;
	
border-radius: 500px;
overflow: hidden;
background-color: transparent;
border:solid 3px white;
opacity:1;

}



#animation{

	position:absolute;
	right:0px;
	width:500px;
	height:500px;

border-radius: 500px;


}

#finished{

	position:absolute;
	
	
	right:0px;
	width:48%;
	height:100%;

	padding-right:-20%;
margin-top:275px;
background: url(icons/finished.svg);

  background-size: 100%;
  background-repeat: no-repeat;


   
}

#finishedblank{

	position:absolute;
	
	
	right:0px;
	width:48%;
	height:100%;

	padding-right:-20%;
margin-top:275px;
background: url(icons/finishedblank.svg);

  background-size: 100%;
  background-repeat: no-repeat;


   
}

.finished{
		position:absolute;
	left:0px;
	margin-top:441px;
	width:460px;
	
}

#tailored{

	position:absolute;
	top:-49px;
	
	right:0px;
	width:550px;
	height:550px;
	

background: url(icons/tailor.svg);

  background-size: 100%;
  background-repeat: no-repeat;
   margin-bottom: 150px;

}

#tailoredblank{

	position:absolute;
	top:-49px;
	
	right:0px;
	width:550px;
	height:550px;
	

background: url(icons/tailorblank.svg);

  background-size: 100%;
  background-repeat: no-repeat;
   margin-bottom: 150px;

}

.tailored{
	margin-top:300px;
}

.communicate{
margin-top:825px;
}

#communicate{

	position:absolute;
	top:-110px;
	left:0px;
	
	width:500px;
	height:500px;
	

background: url(icons/communicate.svg);

  background-size: 100%;
  background-repeat: no-repeat;
   margin-bottom: 150px;
  

 
}

#communicateblank{

	position:absolute;
	top:-110px;
	left:0px;
	
	width:500px;
	height:500px;
	

background: url(icons/communicateblank.svg);

  background-size: 100%;
  background-repeat: no-repeat;
   margin-bottom: 150px;
  

 
}

.professional{
color:white;
}


#professional{

	position:absolute;
	top:-102px;
	
	right:0px;
	width:350px;
	height:350px;
	

background: url(icons/professional.svg);

  background-size: 100%;
  background-repeat: no-repeat;
   margin-bottom: 150px;


}

#professionalblank{

	position:absolute;
	top:-102px;
	
	right:0px;
	width:350px;
	height:350px;
	

background: url(icons/professionalblank.svg);

  background-size: 100%;
  background-repeat: no-repeat;
   margin-bottom: 150px;


}

.ui{
position:absolute;
margin-top:735px;
display: inline-table !important;
}


#ui{

	position:absolute;
	top:-105px;
	left:0px;
	
	width:500px;
	height:500px;
	
	background: white;
	border-radius:500px;

  font: 10px  sans-serif;


  text-anchor: middle;
 margin-bottom: 150px;
  
}

#uimask{

	position:absolute;
	top:-105px;
	left:0px;
	
	width:500px;
	height:500px;
	
	background: white;
	border-radius:500px;


}

@-webkit-keyframes InDown {
	0% {
	
		-webkit-transform: translateY(-20px);
	}

	100% {
	
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes InDown {
	0% {
	
		-moz-transform: translateY(-20px);
	}

	100% {

		-moz-transform: translateY(0);
	}
}

@-o-keyframes InDown {
	0% {
	
		-o-transform: translateY(-20px);
	}

	100% {
		
		-o-transform: translateY(0);
	}
}

@keyframes InDown {
	0% {
	
		transform: translateY(-20px);
	}

	100% {
		
		transform: translateY(0);
	}
}

@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes fadeInDown {
	0% {
		opacity: 0;
		-moz-transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes fadeInDown {
	0% {
		opacity: 0;
		-o-transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeindown{
-webkit-animation-name: fadeInDown;
-moz-animation-name: fadeInDown;
-o-animation-name: fadeInDown;
animation-name: fadeInDown;

-webkit-animation-duration: 1.5s;
-moz-animation-duration: 1.5s;
-o-animation-duration: 1.5s;
animation-duration: 1.5s;
}

.indown{
-webkit-animation-name: InDown;
-moz-animation-name: InDown;
-o-animation-name: InDown;
animation-name: InDown;

-webkit-animation-duration: 1.5s;
-moz-animation-duration: 1.5s;
-o-animation-duration: 1.5s;
animation-duration: 1.5s;
}

.fadein{
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-o-animation-name: fadeIn;
animation-name: fadeIn;

-webkit-animation-duration: 1.5s;
-moz-animation-duration: 1.5s;
-o-animation-duration: 1.5s;
animation-duration: 1.5s;
}

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
		
	}

	100% {
		opacity: .9;
		
	}
}

@-moz-keyframes fadeIn {
	0% {
		opacity: 0;
		
	}

	100% {
		opacity: .9;
		
	}
}

@-o-keyframes fadeIn {
	0% {
		opacity: 0;
		
	}

	100% {
		opacity: .9;
	}
}

@keyframes fadeIn{
	0% {
		opacity: 0;
		
	}

	100% {
		opacity: .9;
	}
}

.fadeOut{
-webkit-animation-name: fadeOut;
-moz-animation-name: fadeOut;
-o-animation-name: fadeOut;
animation-name: fadeOut;

-webkit-animation-duration: 1.5s;
-moz-animation-duration: 1.5s;
-o-animation-duration: 1.5s;
animation-duration: 1.5s;

-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;

}

@-webkit-keyframes fadeOut {
	0% {

		opacity: .9;
		
	}

	100% {
		
		
		opacity: 0;
		z-index:-1;
		
		
	}
}

@-moz-keyframes fadeOut {
	0% {
		opacity: .9;
		
	}

	100% {
		
		
		opacity: 0;
		z-index:-1;
		
	}
}

@-o-keyframes fadeOut {
	0% {
		opacity: .9;
		
	}

	100% {
		
		
		opacity: 0;
	z-index:-1;
	
	}
}

@keyframes fadeOut{
	0% {
		opacity: .9;
		
	}

	100% {
		
		opacity: 0;
	z-index:-1;
	
	}
}


.hidden{
	display:none;
}

.wow{
	display:block;
}

.elements{
	margin-top:350px;
}

.blurb{
	position:absolute;
/*font-size: 20pt;*/

font:40px "AvenirLTStd-Light"; color:black; line-height:98px;

}

.floatleft{
	right:0px;
	
}

.floatright{
	left:0px;
	
}
.kink{
font-family: "AvenirLTStd-LightOblique";
display:inline-block;
display: -moz-grid-group;
padding: 23px;


 background-color: rgba(255,255,255,1);
  vertical-align: top;
}

.line1{

}

.line2{
	
}

.color1{
color:#deff00;
}
.color2{
color:#14C8FF;
}
.color3{
color:#FF4b14;
}
.color4{
color:#FF7BF5;
}
.color5{
color:#f14d4f;
}
.color6{
/*color:#0038fe;*/
color:#3060ad;
}

h1{
	position:absolute;
	
	/*font:40px "AvenirLTStd-Light"; */
	font-family:"AkzidenzGrotesk-ExtraBoldCond";
	 
	font-size:7em;
	
	
	left:0px;
	margin-top:100px;
	
	line-height:98px;
	text-transform: uppercase;
z-index:10;
}

.design{
margin-top:300px;
display:inline-table;
}





.effectivecolour{
	color:#FFF;
}

.effective{
color:#FFF;
}

.unique{
color:#FFF;
}

section{
	
min-width: 1205px;

}

.mask{
	position:absolute;

	width:100%;
	height:inherit;

	margin-bottom: 150px;
	z-index: 0;

	opacity: .8;

}

#mask1{

background-color: transparent;

}
#mask2{

background-color: #ea4b36;


  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;

  border: none;
  color: rgba(255,255,255,1);
  -o-text-overflow: clip;
  text-overflow: clip;

}


#mask3{

background-color: #ff1414;

}

#mask4{

background-color:#30aaad;

}

.whitebox{

display: inline-block;
background-color: white;
padding-left:30px;
	padding-right: 30px;
}


.whitetext{

  display: inline;


}


#section2{
	
	position:relative;

height:3300px;
width:100%;

}

.mass{
	max-width:1150px;
	min-width:1115px;
	width:1150px;
	height:100%;
	position:absolute;
	left:0px;
	right:0px;
	margin:auto;
}

.wait{
	visibility:hidden;
}

.screen{
	color:white !important;

}