@charset "utf-8";
/* CSS Document */

p, h1, h2, h3, h4, h5, a, figure, body {
	font-family: 'Muli', sans-serif ;
	      -webkit-font-smoothing: antialiased;
}

h3 {
	letter-spacing:0px;
}


html {
      height: 100%;
}

body {
      padding: 0;
      position: relative;
      margin: 0;
      height: 100%;
      -webkit-font-smoothing: antialiased;
	  background-color:#000;
}


::selection {color:#ffe00f;background:black;}
::-moz-selection {color:#ffe00f;background:black;}


a {text-decoration:none;}

a {outline : 0;}

a:active {outline : 0;}

a img {outline : none;}

.project a {
	color: #fff;
	text-decoration: none;
	font-size: 22px;
	margin-top: 61px !important;
	display: block;
	text-align: center;
}

.project:hover {
}

.project a:hover {
	text-decoration: underline;
}

img {border : 0;}

button {outline:none;}


p {
	font-size:15px;
}


.clearer {
	clear:both;
}

.wrapper {
    	height: 100% !important;
    	height: 100%;
    	margin: 0 auto; 
    	overflow: hidden;
		position:relative;
}


.id {
	position:fixed;
	height:60px;
	background:white;
	width:100%;
	-webkit-box-shadow: 0px 1px 3px 0px rgba(50, 50, 50, 0.25);
	-moz-box-shadow:    0px 1px 3px 0px rgba(50, 50, 50, 0.25);
	box-shadow:         0px 1px 3px 0px rgba(50, 50, 50, 0.25);
	z-index:20;
	margin-top: 0px;
}


.header-wrapper {
	width:1000px;
	margin:auto;
}


.logo {
	float:left;
	background:url(images/logo@2x.gif);
	width:102px;
	height:31px;
	margin-top:15px;
	background-size:102px 31px;
}

.logo:hover {
	float:left;
	background:url(images/logohover@2x.gif);
	width:102px;
	height:31px;
	margin-top:15px;
	background-size:102px 31px;
}

nav {
	float:right;
	margin-top: 18px;
}


nav ul {
	margin-top: 4px;
}


nav li {
	display:inline;
}


nav a{
	display:inline;
	text-decoration:none;
	text-transform:uppercase;
	margin-right:30px;
	color:#333;
	font-size:15px;
	font-weight: bold;

	
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
/* Safari */

-webkit-transition-duration:0.3s;
-webkit-transition-timing-function:ease;
-webkit-transition-delay:0;
}


nav a:hover {
	color: black;
	border-bottom: black 6px solid;
	padding-bottom:13px;
}

.last {
	margin-right:0px !important;
}

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
 
    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
    -webkit-animation-duration:0.5s;
    -moz-animation-duration:0.5s;
    animation-duration:0.5s;
}
 
.fade-in.one {
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
	animation-delay: 0.5s;
}


.section-wrap {
	width:1000px;
	margin:auto;
}


.visual-left {
	float:left;
	margin:-50px 30px 50px 0;
}


.visual-right {
	float:right;
	margin-top: -90px;
}

.small-impact {
    text-align: center;
    font-size: 90px;
    color: #fff;
    font-weight: 400;
    margin-top: 0px;
    line-height: 1.3;
    margin-bottom: -20px;
    padding: 0 10px 0 10px;
    font-family: 'Muli', 'Georgia', serif;
}

.impact {
	text-align:center;
	font-size:140px;
	color:#fff;
	font-weight:300;
	margin-top:0px;
	line-height:0.9;
}


.sub-impact {
	text-align:center;
	font-size:13px;
	color:#fff;
	font-weight:300;
	margin:0 auto 30px auto !important;
	padding:10px 17px 9px 19px;
	border: 5px solid #fff;
	display: table;
	letter-spacing:5px;
	background:#313131;
	text-transform:uppercase;
}

.black-impact {
	font-size:60px;
	margin-bottom:20px;
	font-family: 'Muli', 'Georgia', serif;
	font-weight:700;
}

.yellow-impact {
	font-size:50px;
	margin-top:80px;
	margin-bottom:20px;
	color:#ffe00f;
	font-family: 'Muli', 'Georgia', serif;
	font-weight:700;
}


.yellow-impact-small {
    font-size: 40px;
    color: #ffe00f;
    font-family: 'Muli', 'Georgia', serif;
    font-weight: 700;
    text-align: center;
    width: 80%;
    margin: 0 auto 0 auto;
}

.section0 {
	min-height:650px;
	width:100%;
	padding-top: 230px;
	position:relative;
	background-color:#ffe00f !important;
	background-image:url(images/bg.png) !important;
	background-size: cover;
	background-position:center;
	background-repeat:no-repeat;
}

/*.section0 {
	min-height:650px;
	width:100%;
	padding-top: 200px;
	position:relative;
	background-color:#ffe00f !important;
	background-image:url(images/fikjo.png) !important;
	background-size: cover;
	background-position:center -140px;
	background-repeat:no-repeat;
}*/

/*.section0 {
	min-height:650px;
	width:100%;
	padding-top: 200px;
	position:relative;
	background-color:#ffe00f !important;
	background-image:url(images/zk.png) !important;
	background-size: cover;
	background-position:center;
	background-repeat:no-repeat;
}*/




.page-container-1 {
	width:1000px;
	margin:auto;
}


.section1 {
    min-height: 490px;
    width: 100%;
    position: relative;
    padding-top: 150px;
	background-color: #111;
}

#slider1 {
	list-style-type:none;
}


.page-container-2 {
	width:1000px;
	margin:auto;
	margin-top:50px;
	border-left: 1px solid #ffe00f;
}


.section2 {
	min-height: 490px;
	width:100%;
	position:relative;
	padding-top: 100px;
	padding-bottom:50px;
	background-color: #fff;
}

.page-container-3 {
	width:1000px;
	margin:auto;
}


.section3 {
	min-height:600px;
	width:100%;
	position:relative;
	background:url(images/ja.png) no-repeat right bottom;
	background-size: contain, auto;
	padding-top: 120px;
	margin-top:-4px;
	background-color: #F5F5F5;
}

.page-container-4 {
	width:1000px;
	margin:auto;
	padding-bottom: 30px;
}

.left {
	width:65%;
}


.section4 {
	min-height:550px;
	width:100%;
	position:relative;
	padding-top: 80px;
	padding-bottom:40px;
	background-color: #111;
}

.page-container-5 {
	width:1000px;
	margin:auto;
}




.bx-wrapper {
overflow: hidden;
margin:auto !important;
}


.project {
	width:24%;
	width: calc(25% - 5px);
	float:left;
	height:155px;
	border-right: 1px solid #ffe00f;
	background-color: none;
}


.project img {
	width:100%;
	display:inline;

}


figcaption {
	  font-size:15px;
	  margin:auto;
	  text-align:center;
	  font-weight:600;
	  color:#fff;
	  margin-top: -42%;
	  text-transform:uppercase;
	  letter-spacing:1px;
}


figure {
	background-color:#000;
}


.bio {
	line-height:1.6;
	color:#2a2a2a;
}

.bio a{
	color:#2a2a2a;
	text-decoration:underline;
}

.link {
	float:left;
	width:120px;
	height:120px;
	background:#000;
	margin-right:30px;
}


.link-mail {
	background:url('images/ico-mail.png') #000 no-repeat;
}

.link-behance {
	background:url('images/ico-behance.png') #000 no-repeat;
}

.link-linkedin {
	background:url('images/ico-linkedin.png') #000 no-repeat;
}

.link-pinterest {
	background:url('images/ico-pinterest.png') #000 no-repeat;
}

.link-twitter {
	background:url('images/ico-twitter.png') #000 no-repeat;
}

.link-flickr {
	background:url('images/ico-flickr.png') #000 no-repeat;
}


.link-mail, .link-behance, .link-linkedin, .link-pinterest, .link-twitter, .link-flickr {
	background-position: center;
	width: 140px;
	height: 140px;
	float: left;
	margin: 30px 20px 0px 0px;
	text-align: center;
	
	
transition-duration: 0.6s;
transition-timing-function: ease;
transition-delay: 0;
/* Safari */

-webkit-transition-duration:0.6s;
-webkit-transition-timing-function:ease;
-webkit-transition-delay:0;

}

.link-mail:hover, .link-behance:hover, .link-linkedin:hover, .link-pinterest:hover, .link-twitter:hover, .link-flickr:hover {
	background-color: #ffe00f;
}


.link img {
	vertical-align:middle;
}


#contact {
	display:none;
}


#menu-icon {
	display: none;
	width: 43px;
	height: 42px;
}

#trigger-overlay {
	display: none;
}


.slide {
	background:none;
	margin:auto;
	text-align: center;
}


.service {
	width:1000px !important;
	margin:auto;
	text-align:center;
}

.service-head {
	margin:auto;
}


.slide p {
	color:#333;
	size:26px;
}


.service-title {
	font-size: 50px;
	height: auto;
	width: auto;
	color: #000;
	margin: 20px auto 10px auto;
	font-family: 'Muli', 'Georgia', serif;
	letter-spacing:1px;
	font-weight:700;
}


.ico-service-branding, .ico-service-web, .ico-service-consult, .ico-service-ad {
 width:60px;
 padding: 15px;
 display:block;
 height:60px;
 margin:auto;
 margin-top:30px;
 border-radius:60px;
}

.ico-service-branding {
	background:url(images/ico-branding.png) center no-repeat;
	background-color:#ffe00f;
	background-size: 50px 50px;
}

.ico-service-ad {
	background:url(images/ico-ad.png) center no-repeat;
	background-color:#ffe00f;
	background-size: 50px 50px;
}

.ico-service-consult {
	background:url(images/ico-consult.png) center no-repeat;
	background-color:#ffe00f;
	background-size: 50px 50px;
}

.ico-service-web {
	background:url(images/ico-web.png) center no-repeat;
	background-color:#ffe00f;
	background-size: 50px 50px;
}


strong {
	font-weight:600;
}


.slide li {
	list-style-type:none;
	margin-bottom:10px;
	margin-left:-20px;
	font-size:15px;
	color: #666;
}

.slide ul {
display: inline-block;
-webkit-padding-start: 20px;
}


.case-study {
	margin-top:30px;
	padding:10px;	
	background:#FC0;
}

.case-study a {
	color:#000 !important;
}



.contact-links {
	width:250px;
	margin:30px auto 20px auto;
}

.contact-links li {
	display:block;
	float:left;
	font-size:11px;
	margin-right:20px;
	color:#333;
}

.contact-links li a {
	color:#666;	
}

.contact-links li a:hover{
	color:#ffe00f;	
}

.contact-text {
	text-align:center;
	color:#ffe00f;
}


.mobile-profile {
	display:none;
}



.bx-viewport {
	overflow:visible !important;
	height:120px !important;
}


.project-fly-01 {
	height:auto;
	width:100%;
/*	background: url(images/logoz.png);
	background-size:contain;
	opacity:0.05;*/
}


.project-fly-02 {
	height:300px;
	width:100%;
	background: url(images/zk-01.jpg) no-repeat;
	background-size:cover;
	background-position: left -150px;
	opacity:0.05;
}


.page-container-2 figure:nth-child(5) {
clear: both;
}


.top a {
width: 18px;
height: 13px;
display: block;
margin: 80px auto 10px auto;
background: url(images/to-top.png) no-repeat;
}

.button {
	margin-top:25px;
	padding:10px 0px 10px 0px;
	color:#ffe00f !important;
	background:#ffe00f;
	cursor:pointer;
	border: 3px solid #ffe00f;
	
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0;
transition-property:background;
/* Safari */

-webkit-transition-duration:0.3s;
-webkit-transition-timing-function:ease;
-webkit-transition-delay:0;
transition-property:background;

text-transform: uppercase;
font-weight: bold;
}

.button a {
	color: #000;
}

.button:hover {
	background:#ffe00f;
	color:#000 !important;
	padding:10px 0px 10px 0px;
	border: 3px solid #000;
}


.opl {
position:fixed;
top:100px;
left:0px;
z-index:99999;
}
.opl a {
width:73px;
height:56px;
text-indent:-9999px;
display:block;
background:url('https://s3.amazonaws.com/onepagelove/one-page-love-award-left.png') no-repeat;
}



/*--  form  --*/


label {
	font-size:14px;
	display:block;
	margin-bottom:3px;
}

input {
	height:30px;
	border-radius:3px;
	box-shadow:none;
	border: 1px solid #666;
	margin-bottom:10px !important;
	display:block;
	width:100%;
	padding:0px 10px 0px 10px;
}

textarea {
	border-radius:3px;
	border: 1px solid #666;
	padding:10px;
	width:100%;
}

form {
	margin:auto;
	width:100%;
	display:block;
}

#contact {
	display:block;
}

input[type=submit] {
	background-color: #000;
	color: #fff;
	text-align: center;
	font-size: 12px;
	padding: 4px 10px 4px 10px;
	width: 60px;
	text-align: center;
	text-decoration: none;
	margin: 20px auto 0px auto;
	border-radius: 0px;
	height: 33px;
	-webkit-appearance: none;
	width:100%;
}

input[type=submit]:hover {
	background-color:#ffe00f;
	color: #000;
}

fieldset {
	border:none !important;
}

.fieldset1 {
	width:88%;
	float:left;
}

.fieldset2 {
	width:88%;
	float:left;
}

.fieldset3 {
	width:94%;
	display:block;
	height:auto;
	margin-bottom:0px;
	float:left;
}


textarea:focus, input:focus, textarea:focus { 
	border: 2px solid #ed1c24; 
	background-color: # CCC; 
	outline:none;
	margin-top:-1px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/*--  form  --*/




/*FF  fancybox hacks  FF*/

.fancybox-skin {
	background:none !important;
}

.fancybox-inner {
border:none !important;	
margin-top:0 !important;
margin-left:0 !important;
}

.fancybox-close {
background-image: url(js/fancyBox/fancybox_sprite.png) !important;
}

a.fancybox-close {
width: 22px !important;
height: 22px !important;
top: 11px !important;
right: -63px !important;
background:url(images/close-lightbox.png) no-repeat !important;
}


a.fancybox-prev span {
background-position: 0 0 !important;
background:url(images/prev-lightbox.png) no-repeat !important;
}

a.fancybox-next span {
background-position: 0 0 !important;
background:url(images/next-lightbox.png) no-repeat !important;
}

a.fancybox-nav span {
height: 32px !important;
width: 17px !important;
}

#fancybox-lock {
background-image:url(js/fancyBox/fancybox_overlay.png) !important;
background-repeat: repeat !important;
background-color: none !important;
}

a.fancybox-prev {
left: -75px !important;
}

a.fancybox-next {
right: -75px !important;
}

.fancybox-default-skin-open {
box-shadow: 10px 10px 0px rgba(255, 224, 15, 1) ;
}

/*FF  fancybox hacks  FF*/





/*   ^^   MEDIA QUERIES   ^^   */



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

.section0 {
	min-height:80%;
	padding-top: 20%;
}

}



@media only screen and (max-width : 1024px) {
	
.id {
position: relative;
}



.page-container-1, .page-container-2, .page-container-3, .page-container-4, .page-container-5, .header-wrapper {
	width:100%;
}


.logo {
	margin-left:20px;
}

#menu-icon {
	display:inline-block;
}

nav {
display: none !important;

}

#trigger-overlay {
display: inline-block;	
background: url(images/ico-menu@2x.png) no-repeat;
border: none;
background-size:43px 42px;
padding:0 !important;
}


nav ul { 
		display: none;
}


nav li {
		text-align: center;
		width: 100%;
		padding: 10px 0;
		margin: 0;
		display:block;
}
	
	
.project {
	width:100%;
	height:auto;
	border: none;
}


.small-impact {
font-size: 75px;
}

.section0 {
min-height:550px;
width: 100%;
position: relative;
background-color: #ffe00f !important;
background-image: url(images/bg.png) !important;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}


.section1 {
min-height:550px;
width: 100%;
position: relative;
background-position: left top;
background-size:auto;
padding-top: 80px;
}
	
	.project a {
    color: #fff;
    text-decoration: none;
    font-size: 24px;
    margin-left: 20px;
    margin-top: 24px !important;
    display: block;
    text-align: center;
}
	
	

.left {
width: 90%;
margin: auto;
}

.black-impact {
text-align:center;
font-size: 35px;
margin-bottom: 20px;
margin-top: 20px;
}

.section3 {
padding-top: 20px;
padding-bottom: 40px;
margin-top:-4px;
background-image:none;
background-color: #F5F5F5;


}

.mobile-profile {
	display:block;
	background:url('images/ja-mobile.png');
	width:120px;
	height:120px;
	margin:auto;
	margin-top: 10px;
}

.page-container-5 {
	width:90%;
}



.link-mail, .link-behance, .link-linkedin, .link-pinterest, .link-twitter, .link-flickr {
width: 38%;
margin: 30px 5.5% 0px 5.5%;
text-align: center;
}

.service-title {
font-size: 35px;
margin-top:30px;
text-align:center;
}


.controlArrow.next { 
display:none;
}
.controlArrow.prev {
display:none;
}


.fullPage-slidesNav {
	display:block;
}

.left {
margin-top: 40px;

}

.project-fly-01, .project-fly-02  {
display:none;
}

.section2, .section4 {
	padding-top: 20px;
	padding-bottom:0px;
}

.section2 {
min-height: 490px;
}

.yellow-impact {
font-size: 35px;
margin-top: 80px;
margin-bottom: 20px;
color: #ffe00f;
text-align:center;
}



.page-container-2 figure:nth-child(2n+1) {
clear: both;
}


.bx-wrapper .bx-controls-direction a {
margin-top: -175px !important;
margin-left: 10px !important;
margin-right: 10px !important;
}

.slide {
padding-left: 20px;
padding-right: 20px;
}

nav a{
	display:inline;
	text-decoration:none;
	text-transform:uppercase;
	margin-right:0px;
	border:none !important;
}

nav button a{
	margin-right:20px;
	border:none !important;
}

.bio {
text-align: justify;
}


a.fancybox-prev {
left: -35px !important;
}

a.fancybox-next {
right: -35px !important;
}


a.fancybox-close {
right: -20px !important;
}

.page-container-2 {
;
}

.id {
	display: none;
}
	
.page-container-2 {
    border-left: none;
	border-right: none;
}	
	
	
}





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



.section0 {
min-height:350px;
width: 100%;
position: relative;
background-color: #ffe00f !important;
background-image: url(images/bg.png) !important;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
padding-top: 60px;
padding-bottom: 120px;
background-size: 360%;
}

.small-impact {
font-size: 60px;
margin-bottom: -16px;
}



a.fancybox-close {
right: -23px !important;
}

a.fancybox-prev span {
	background:none !important;
}


a.fancybox-next span {
	background:none !important;
}

	.page-container-2 {
    margin-top: 40px;
}

	
	
	.page-container-1 {
    margin-top: 53px;
	}
	
	
}



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

.section0 {
min-height:300px;
padding-bottom: 50px;
}

.section1 {
min-height: 570px;

}

.bx-wrapper .bx-next {
	right: 0px !important;
}

.bx-wrapper .bx-prev {
	left: 0px !important;
}

.bx-wrapper .bx-controls-direction a {
	50% !important
}

.small-impact {
font-size: 50px;
}

.link-mail, .link-behance, .link-linkedin, .link-pinterest, .link-twitter, .link-flickr {
	height:100px;
}


figcaption {
font-size: 13px;
}


.page-container-2 {
    margin-top: 40px;
}
	
	
.page-container-1 {
    margin-top: 33px;
	
}
	
	
.yellow-impact-small {

    width: 90%;
}

	
}