@font-face {
  font-family: 'fontello';
  src: url('fonts/fontello.eot?70950449');
  src: url('fonts/fontello.eot?70950449#iefix') format('embedded-opentype'),
       url('fonts/fontello.svg?70950449#fontello') format('svg'),
       url('fonts/fontello.woff?70950449') format('woff'),
       url('fonts/fontello.ttf?70950449') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
	font-family: 'Raleway';
	src: url('fonts/raleway-light-webfont.eot');
	src: url('fonts/raleway-light-webfont.svg') format('svg'),
		url('fonts/raleway-light-webfont.woff') format('woff'),
		url('fonts/raleway-light-webfont.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Raleway';
	src: url('fonts/raleway-medium-webfont.eot');
	src: url('fonts/raleway-medium-webfont.svg') format('svg'),
		url('fonts/raleway-medium-webfont.woff') format('woff'),
		url('fonts/raleway-medium-webfont.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'custom';
	src: url('fonts/Pangolin-Regular.ttf');
	font-weight: normal;
	font-style: normal;
}


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure,
figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, input, textarea, tr, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

html {
	margin: 0;
	padding: 0;
	height: auto;
	min-height: 100%;
	background-color: #0C1670;
}
body {
	/*color: #313563;*/
	color: #0C1670;
	font-family: "adelle",serif;
	font-size: 1.3em;
	font-weight: 100;
	line-height: 1.5em;
	height: 95%;
	margin: 0;
	padding: 0;
	/*background-color: #313563;*/
	background-color: #0C1670;
}
.wf-loading h1,
.wf-loading h2,
.wf-loading h3,
.wf-loading h4,
.wf-loading p,
.wf-loading a,
.wf-loading span,
.wf-loading div {
	font-family: "adelle",serif;
	visibility: hidden;
}
.wf-active h1,
.wf-active h2,
.wf-active h3,
.wf-active h4,
.wf-active p,
.wf-active a,
.wf-active span,
.wf-active div {
	visibility: visible;
}
.pagination-arrow {
	margin-bottom: 40px;
	display: inline-block;
}
.pagination .fl,
.pagination .fr {
	width: 40%;
}
.pagination .fr {
	text-align: right;
}

h1, h2, h3 {
	font-weight: 300;
}
h1 {
	font-size: 1.4em;
	margin-bottom: 30px;
}
h2 {
	font-size: 1.2em;
	margin-top: 50px;
	margin-bottom: 30px;
}
h3 {
	font-size: 1.1em;
	margin-top: 40px;
	margin-bottom: 20px;
}
h4 {
	font-weight: 100;
	margin-bottom: 20px;
	font-weight: 100;
}
p {
	margin-bottom: 20px;
}
a {
	cursor: pointer;
}
a:not(.portfolio-item):not(.social) {
	text-decoration: none;
	color: #EB485D;
	font-weight: 400;
	letter-spacing: .2px;
	overflow-wrap: break-word;
	word-wrap: break-word;
	transition: all cubic-bezier(0, 0.55, 0.45, 1) 0.2s;
}
a:not(.portfolio-item):not(.social):hover,
a:not(.portfolio-item):not(.social):focus {
	text-decoration: none;
	color: #0C1670;
	box-shadow: inset 0 -.6em 0 0 #EB485D;
}

.works a {
	color: #0C1670 !important;
}

.works a:hover,
.works a:focus {
	box-shadow: 0px 0px 0px transparent !important;
}

.works .overlay {
	transition: transform cubic-bezier(0, 0.55, 0.45, 1) 0.6s, border-radius ease-in-out 0.2s;
	transform: translate3d(0px, 0px, 0px);
	margin-bottom: 0.75em;
	max-height: 600px;
	overflow: hidden;
}

.works .overlay:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(12, 22, 112, 0.1);
	z-index: 1;
	transition: all ease-in-out 0.4s;
}

.works .overlay.transparent {
	opacity: 0.6;
	filter: grayscale(40%);
}

.works a:hover .overlay,
.works a:focus .overlay {
	border-radius: 30px;
	overflow: hidden;
}

.works a:hover .overlay:before,
.works a:focus .overlay:before {
	background-color: rgba(235, 72, 93, 0.6);
}

/* .content .works a:hover img,
.content .works a:focus img {
	border-radius: 24px;
} */

.works a:hover .overlay,
.works a:focus .overlay {
	transform: translate3d(0px, 2px, 0px);
}

.content .works img {
	max-width: 100%;
	height: auto;
	width: 100%;
	margin-bottom: 0;
}

.works a:hover .captions,
.works a:focus .captions {
	transform: translate3d(0px, -5px, 0px);
}

.works a:hover .captions svg,
.works a:focus .captions svg {
	transform: translate3d(6px, 0px, 0px);
}

.works a:hover .captions > *,
.works a:hover .captions svg path,
.works a:focus .captions > *,
.works a:focus .captions svg path {
	color: #EB485D;
	fill: #EB485D;
}

.works .captions,
.works .captions svg {
	transition: transform cubic-bezier(0, 0.55, 0.45, 1) 0.2s;
}

.works .captions svg path {
	transition: color cubic-bezier(0, 0.55, 0.45, 1) 0.2s;
}

.works .captions,
.works .captions svg {
	transform: translate3d(0px, 0px, 0px);
}

.works .captions > * {
	color: #0C1670;
	text-decoration: none;
	transition: color cubic-bezier(0, 0.55, 0.45, 1) 0.2s;
}

.works h2 {
	display: flex;
	align-items: center;
	grid-gap: 0.25em;
}

.works a h2 {
	font-weight: 400;
}

.works a p {
	font-weight: 200;
	margin-bottom: 0;
}

/* a:hover:before,
a:focus:before,
a:active:before {
    right: 0 !important;
}
a:not(.portfolio-item):not(.social):before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 100%;
    bottom: 0;
    background: #EB485D;
    height: 2px;
    transition: right 0.2s cubic-bezier(0.86, 0, 0.07, 1);
} */

/* @keyframes chameleon {
  0% {
	color: #DD1831;
  }
  25% {
	color: #D5139E;
  }
  50% {
	color: #eee420;
  }
  75% {
	color: #10c685;
  } 
  100% {
	color: #DD1831;
  } 
} */
form {
	max-width: 680px;
}
form button {
	background: #0C1670;
	border: 0;
	color: #FFFFFF;
	padding: .9rem 1rem;
	line-height: 1.5;
}
form input {
	border: 2px solid #0C1670;
	line-height: 1;
	padding: .75rem 1rem;
}
form p.error {
	background: #EB485D;
	color: #FFFFFF;
	padding: 0.25rem .75rem;
}

em {
	font-style: italic;
}
blockquote {
	font-style: italic;
	font-size: 1.1em;
}
blockquote p {
	padding-left: 60px;
	position: relative;
	margin-bottom: 30px;
}
blockquote p:before {
	content: '\e804';
	font-family: 'fontello';
	display: inline-block;
	font-size: 1.4em;
	line-height: 1em;
	position: absolute;
	top: -5px;
	left: 15px;
	color: #C3C3C3;
}
hr {
	overflow: visible;
	padding: 0;
	border: none;
	border-top: 1px dotted #0C1670;
	color: #0C1670;
	text-align: center;
	margin: 50px auto;
	width: 25%;
}
hr:after {
	content: "❦";
	display: inline-block;
	position: relative;
	top: -0.85em;
	font-size: 1em;
	padding: 0 0.5em;
	background: #FFFFFF;
}
.typekit-badge {
	display:none !important;
}
::selection {
	background-color: #EB485D;
	color: #FFFFFF;
}
.inline {
	display: inline-block !important;
}
.center {
	text-align: center;
}
.underline-separator {
	display: inline-block;
	padding-right: 100px;
	border-bottom: 2px solid #4c4248;
	line-height: 1.8em;
}
.preloader {
	background: url('images/ajax-loader.gif') no-repeat center;
	display:inline-block;
	border: 1px dotted #EB485D;
	margin-bottom: 4px;
	width: 100%;
	height: auto;
	max-width: 800px;
	max-height: 600px;
}
.logo a {
	display: inline-block;
}

@keyframes height {
  0% {
  	opacity: 1;
  	transform: scale(1, 0);
  }
  20% {
  	transform: scale(1, 1);
  }
  70% {
  	transform: scale(1, 1);
  }
  100% {
  	transform: translateY(250px);
  	opacity: 1;
  }
}

#left,
#right {
	animation: height 1s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
	animation-delay: 1s;
	opacity: 0;
}


#window-wrapper {
	background-color: #FFFFFF;
    min-height: 600px;
}
.main {
	margin-right: auto;
	margin-left: auto;
}
nav {
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.85px;
	text-transform: uppercase;
	text-align: center;
	margin-left: -2px;
}
nav a {
	color: #EB485D;
}
nav a,
nav span {
	font-weight: 600 !important;
	display: inline-block;
	margin-right: 1em;
	padding: 4px 4px 0px;
	transition: all 0.2s cubic-bezier(0, 0.55, 0.45, 1);
	text-decoration: none;
}
nav > *:last-child {
	margin-right: 0;
}
.text-block {
	flex-grow: 1;
}
.text-block h1 {
	font-size: 1.5em;
	font-weight: 400;
}
.text-block h2 {
	font-size: 1em;
}
.cat {
	font-family: "Raleway";
	font-weight: 300;
}
.badge {
	font-family: "Raleway";
	font-weight: 300;
	border-radius: 999px;
	padding: 4px 8px 2px;
	border: 1px solid #0C1670;
	vertical-align: middle;
	white-space: nowrap;
	line-height: 1;
}
#works-grid {
	margin-left: -1rem;
	margin-right: -1rem;
}
.content h1 {
	font-size: 1.5em;
	line-height: 1.2em;
}
.content .legend p {
	margin-bottom: 0px;
}
.content .legend {
	font-size: 0.85em;
}
.content.images {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.content.images.gifs {
	position: relative;
}
.content.images.gifs img.gif {
	position: absolute;
	width: 30.55%;
	height: auto;
    top: 17.7%;
    left: 34.8%;
}
.content img {
	display: block;
	height: auto;
	margin-bottom: 14px;
	margin-left: auto;
	margin-right: auto;
	/* max-height: 600px; */
	max-width: 800px;
	vertical-align: top;
	width: 100%;
}

/* .content a,
.blog a {
	text-decoration: none;
	color: #EB485D;
	font-weight: 400;
	letter-spacing: .2px;
	overflow-wrap: break-word;
	word-wrap: break-word;
	background-image: linear-gradient(to right, #ffe104, #FA715F 12%, #fa715f 60%, #db1174 65%, #9b4ca7);
	background-position: 0% 100%;
	background-repeat: no-repeat;
	background-size: 0% 3px;
	transition: all cubic-bezier(0,.5,0,1) 0.2s;
}
.content a:hover,
.content a:focus,
.blog a:hover,
.blog a:focus {
	text-decoration: none;
  	background-size: 100% 3px;
} */
.content ul {
	list-style: none;
	margin: auto;
	padding: 0;
}
.content ul li.work-item a {
	text-decoration: none !important;
    word-break: keep-all;
}
.thumbnail-bubble {
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	display: block;
}
#social-links a:hover:before {
	color: #EB485D;
}
#social-links {
	text-align: center;
}
#social-links a {
	display: inline-block;
}
#social-links a {
	display: inline-block;
	font-size: 25px;
	line-height: 40px;
	text-align: center;
	text-decoration: none;
	width: 40px;
}
#social-links .socialBubbles:first-child {
	margin-left: 0px;
}
.socials svg {
	width: 24px;
	height: 24px;
	fill: #0C1670;
}
.socials a:hover svg {
	fill: #EB485D;
}

.works-preview,
.tilter__image {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	display: block;
	height: 190px;
	position: relative;
	text-align: center;
	box-shadow: 0 0 0 0px rgba(12,22,112,0.2);
	transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.works-preview:hover,
.works-preview:focus {
	box-shadow: 0 0 0 10px rgba(12,22,112,0.2);
}
.works-preview a {
	text-decoration: none;
}
.hiddenOverlay {
	background-color: rgba(12,22,112,0.9);
	display: block;
	color: #FFFFFF;
	text-align: center;
	overflow: hidden;
	transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
}
.works-preview:hover .hiddenOverlay,
.works-preview:focus .hiddenOverlay {
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}
.hiddenOverlay h2 {
	font-size: 1.4em;
	text-transform: none;
    padding: .5em 0 0;
	line-height: 1.1em;
	margin: 0;
	transform: translateY(-20px);
	transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.works-preview:hover .hiddenOverlay h2,
.works-preview:focus .hiddenOverlay h2 {
	transform: translateY(0px);
}
.hiddenOverlay p {
	font-size: 0.9em;
	transform: translateY(20px);
	transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.works-preview:hover .hiddenOverlay p,
.works-preview:focus .hiddenOverlay p {
	transform: translateY(10px);
}
#bubble-content-wrapper {
	position: relative;
}
.loadable {
	opacity: 0;
	transition: opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.visible {
	opacity: 1;
}
.post .post-content img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-height: none;
	max-width: 600px;
	/*width: 100%;*/
}
.date {
	font-size: 16px;
}
.post .social {
	text-align: center;
}
#amplify {
	background-image: url(images/gallery/amplify_p.jpg);
}
#stormchaser {
	background-image: url(images/gallery/stormchaser_p.jpg);
}
#worklife {
	background-image: url(images/gallery/worklife_p.jpg);
}
#ff {
	background-image: url(images/gallery/ff_p.jpg);
}
#deadgood {
	background-image: url(images/gallery/deadgood_p.jpg);
}
#prh-careers {
	background-image: url(images/gallery/prh-careers_p.jpg);
}
#your-fry {
	background-image: url(images/gallery/your-fry_p.jpg);
}
#vintage-ladybird {
	background-image: url(images/gallery/vintage-ladybird_p.jpg);
}
#caitlin-moran {
	background-image: url(images/gallery/caitlin-moran_p.jpg);
}
#young-bond {
	background-image: url(images/gallery/young-bond_p.jpg);
}
#londopolia {
	background-image: url(images/gallery/londopolia_p.jpg);
}
#gwt-cropper {
	background-image: url(images/gallery/gwt-cropper_p.jpg);
}
#minisite-cms {
	background-image: url(images/gallery/minisite-cms_p.jpg);;
}
#those-guys {
	background-image: url(images/gallery/those-guys_p.jpg);;
}
#autokoolkose {
	background-image: url(images/gallery/kose-autokool_p.jpg);;
}
#coinmotion {
	background-image: url(images/gallery/coinmotion_p.jpg);;
}
#interbridge {
	background-image: url(images/gallery/interbridge_p.jpg);;
}
#timetables {
	background-image: url(images/gallery/hsl_p.jpg);;
}
#virshich {
	background-image: url(images/gallery/virshich_p.jpg);
}
#se {
	background-image: url(images/gallery/se_web_p.jpg);
}
#chr {
	background-image: url(images/gallery/chr_room_p.jpg);
}
#fazer {
	background-image: url(images/gallery/FinLight_Fazer_p.jpg);
}
#lamps {
	background-image: url(images/gallery/Design_Lamps_p.jpg);
}
#illustrator {
	background-image: url(images/gallery/not-fail_p.jpg);
}
#helsinki {
	background-image: url(images/gallery/Helsinki_p.jpg);
}

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

@media (min-width: 1600px) {
	/* #window-wrapper {
		margin-left: auto;
		margin-right: auto;
	} */
	.works-preview {
		height: 250px;
	}
}

@media (min-width: 1200px) {
	.main {
		width: 940px;
	}
	.content.images {
		width: 800px;
	}
	.content.images .two-images img {
		width: 49%;
		max-width: 397px;
		float: left;
	}
	.content.images .two-images:after {
		content: '';
		clear: both;
		display: table;
	}
	.content.images .two-images img:first-child {
		margin-right: 1%;
	}
}

@media (min-width: 980px) and (max-width: 1199px) {
	.main {
		width: 940px;
	}
	.content.images .two-images img {
		width: 49%;
		max-width: 397px;
		float: left;
	}
	.content.images .two-images img:first-child {
		margin-right: 1%;
	}
}

@media (min-width: 768px) and (max-width: 979px) {
	.content.images .two-images img {
		width: 49%;
	}
	.content.images.gifs img.gif {
	    top: 19.7%;
	}
}

@media (max-width: 767px) {
	body {
	    font-size: 1.025em;
		font-weight: 300;
	}
	.main {
		width: 100%;
		max-width: none;
	}
	nav,
	nav a,
	nav span {
		font-size: 1rem;
	}

	#works-grid {
		margin-left: auto;
		margin-right: auto;
	}
	.post .post-content img {
		width: 100%;
	}
	.content.images.gifs img.gif {
	    top: 22.7%;
	}
}

@media screen and (max-width: 60em) {
	.tilter__image:after {
	  padding-top: 42%;
	  display: block;
	  content: '';
	}
}
@media screen and (min-width: 60em) {
	.tilter__image:after {
	  padding-top: 65%;
	  display: block;
	  content: '';
	}
}

/* Tilter */
a.tilter {
	display: block;
	position: relative;
	flex: none;
	perspective: 1000px;
	box-sizing: border-box;
	color: #FFFFFF;
}
.tilter * {
	pointer-events: none;
}
.tilter:hover,
.tilter:focus {
	color: #fff;
	outline: none;
}
.tilter__figure,
.tilter__image {
	margin: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.tilter__figure > * {
	transform: translateZ(0px); /* Force correct stacking order */
}

.smooth .tilter,
.smooth .tilter__figure,
.smooth .tilter__deco--overlay,
.smooth .tilter__deco--lines,
.smooth .tilter__deco--shine div,
.smooth .tilter__caption {
	transition: all 0.2s ease-out;
}

.tilter__figure {
	position: relative;
}

.tilter__figure::before {
	content: '';
	position: absolute;
	width: 90%;
	height: 90%;
	top: 5%;
	left: 5%;
	box-shadow: 0 30px 20px rgba(35,32,39,0.5);
}

.tilter__deco {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.tilter__deco--overlay {
	background: rgba(12, 22, 112, 0.6);
}
.tilter:hover .tilter__deco--overlay,
.tilter:focus .tilter__deco--overlay {
	background: rgba(12, 22, 112, 0.9);
}

.tilter__deco--shine div {
	position: absolute;
	width: 200%;
	height: 200%;
	top: -50%;
	left: -50%;
	background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);
}
.tilter__deco--lines {
	fill: none;
	stroke: #fff;
	stroke-width: 1.5px;
}
.tilter__caption {
	position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    height: 100%;
    align-items: stretch;
    justify-content: center;
    flex-direction: column;
}
.tilter__title {
	margin: 0;
	font-weight: normal;
	font-size: 1.4em;
	line-height: 1.2em;
}
.tilter__description {
	margin: 1em 0 0 0;
	font-size: 0.85em;
	letter-spacing: 0.15em;
}
.tilter .tilter__deco--lines path {
	stroke-dasharray: 1119;
	stroke-dashoffset: 1119;
	transition: stroke-dashoffset 0.5s;
}
.tilter:hover .tilter__deco--lines path,
.tilter:focus .tilter__deco--lines path {
	stroke-dashoffset: 0;
}
.tilter .tilter__figure::before {
	box-shadow: none;
}
.design-system .tilter__image {
	background-image: url(images/gallery/design-system_p.jpg);
}
.amplify .tilter__image {
	background-image: url(images/gallery/amplify_p.jpg);
}
.stormchaser .tilter__image {
	background-image: url(images/gallery/stormchaser_p.jpg);
}
.worklife .tilter__image {
	background-image: url(images/gallery/worklife_p.jpg);
}
.flower-fairies .tilter__image {
	background-image: url(images/gallery/ff_p.jpg);
}
.deadgood .tilter__image {
	background-image: url(images/gallery/deadgood_p.jpg);
}
.prh-careers .tilter__image {
	background-image: url(images/gallery/prh-careers_p.jpg);
}
.caitlin-moran .tilter__image {
	background-image: url(images/gallery/caitlin-moran_p.jpg);
}
.your-fry .tilter__image {
	background-image: url(images/gallery/your-fry_p.jpg);
}
.vintage-ladybird .tilter__image {
	background-image: url(images/gallery/vintage-ladybird_p.jpg);
}
.young-bond .tilter__image {
	background-image: url(images/gallery/young-bond_p.jpg);
}
.londopolia .tilter__image {
	background-image: url(images/gallery/londopolia_p.jpg);
}
.gwt-cropper .tilter__image {
	background-image: url(images/gallery/gwt-cropper_p.jpg);
}
.minisite-cms .tilter__image {
	background-image: url(images/gallery/minisite-cms_p.jpg);
}
.those-guys .tilter__image {
	background-image: url(images/gallery/those-guys_p.jpg);
}
.autokoolkose .tilter__image {
	background-image: url(images/gallery/kose-autokool_p.jpg);
}
.coinmotion .tilter__image {
	background-image: url(images/gallery/coinmotion_p.jpg);
}
.saku-electric .tilter__image {
	background-image: url(images/gallery/se_web_p.jpg);
}
.illustrator .tilter__image {
	background-image: url(images/gallery/not-fail_p.jpg);
}