.color
{
	filter:none;
	-webkit-filter:grayscale(0%)
}
.cf
{
	zoom:1
}
.cf:before,.cf:after
{
	content:"";
	display:table
}
.cf:after
{
	clear:both
}
.flexbox
{
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex
}
.ib
{
	display:-moz-inline-stack;
	display:inline-block;
	zoom:1;
	*display:inline
}
	@-webkit-keyframes fadeIn
{
	0%
{
	opacity:0
}
	100%
{
	opacity:100%
}

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

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

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

}
	@-webkit-keyframes spin
{
	0%
{
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg)
}
	100%
{
	-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	transform:rotate(360deg)
}

}
	@-moz-keyframes spin
{
	0%
{
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg)
}
	100%
{
	-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	transform:rotate(360deg)
}

}
	@-o-keyframes spin
{
	0%
{
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg)
}
	100%
{
	-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	transform:rotate(360deg)
}

}
	@keyframes spin
{
	0%
{
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg)
}
	100%
{
	-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	transform:rotate(360deg)
}

}
	article,aside,details,figcaption,figure,footer,header,hgroup,nav,section
{
	display:block
}
	audio,canvas,video
{
	display:inline-block;
	*display:inline;
	*zoom:1
}
	audio:not([controls])
{
	display:none
}
	[hidden]
{
	display:none
}
	html
{
	font-size:100%;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%
}
	html,button,input,select,textarea
{
	font-family:sans-serif;
	color:#222
}
	body
{
	margin:0;
	font-size:1em;
	line-height:1.4
}
	::-moz-selection
{
	background:#999;
	color:#fff;
	text-shadow:none
}
	::selection
{
	background:#999;
	color:#fff;
	text-shadow:none
}
	*
{
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box
}
	abbr[title]
{
	border-bottom:1px dotted
}
	b,strong
{
	font-weight:700
}
	blockquote
{
	margin:1em 40px
}
	dfn
{
	font-style:italic
}
	hr
{
	display:block;
	height:1px;
	border:0;
	border-top:1px solid #ccc;
	margin:1em 0;
	padding:0
}
	ins
{
	background:#ff9;
	color:#000;
	text-decoration:none
}
	mark
{
	background:#ff0;
	color:#000;
	font-style:italic;
	font-weight:700
}
	pre,code,kbd,samp
{
	font-family:monospace,serif;
	_font-family:'courier new',monospace;
	font-size:1em
}
	pre
{
	white-space:pre;
	white-space:pre-wrap;
	word-wrap:break-word
}
	q
{
	quotes:none
}
	q:before,q:after
{
	content:"";
	content:none
}
	small
{
	font-size:85%
}
	sub,sup
{
	font-size:75%;
	line-height:0;
	position:relative;
	vertical-align:baseline
}
	sup
{
	top:-.5em
}
	sub
{
	bottom:-.25em
}
	ul,ol
{
	margin:1em 0;
	padding:0 0 0 40px
}
	dd
{
	margin:0 0 0 40px
}
	nav ul,nav ol
{
	list-style:none;
	list-style-image:none;
	margin:0;
	padding:0
}
	img
{
	border:0;
	-ms-interpolation-mode:bicubic;
	vertical-align:middle
}
	svg:not(:root)
{
	overflow:hidden
}
	figure
{
	margin:0
}
	form
{
	margin:0
}
	fieldset
{
	border:0;
	margin:0;
	padding:0
}
	label
{
	cursor:pointer
}
	legend
{
	border:0;
	*margin-left:-7px;
	padding:0;
	white-space:normal
}
	button,input,select,textarea
{
	font-size:100%;
	margin:0;
	vertical-align:baseline;
	*vertical-align:middle
}
	button,input
{
	line-height:normal
}
	button,input[type=button],input[type=reset],input[type=submit]
{
	cursor:pointer;
	-webkit-appearance:button;
	*overflow:visible
}
	button[disabled],input[disabled]
{
	cursor:default
}
	input[type=checkbox],input[type=radio]
{
	box-sizing:border-box;
	padding:0;
	*width:13px;
	*height:13px
}
	input[type=search]
{
	-webkit-appearance:textfield;
	-moz-box-sizing:content-box;
	-webkit-box-sizing:content-box;
	box-sizing:content-box
}
	input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button
{
	-webkit-appearance:none
}
	button::-moz-focus-inner,input::-moz-focus-inner
{
	border:0;
	padding:0
}
	textarea
{
	overflow:auto;
	vertical-align:top;
	resize:vertical
}
	input:invalid,textarea:invalid
{
	background-color:#f0dddd
}
	table
{
	border-collapse:collapse;
	border-spacing:0
}
	td
{
	vertical-align:top
}
.chromeframe
{
	margin:.2em 0;
	background:#ccc;
	color:#000;
	padding:.2em 0
}
	html,body
{
	height:100%
}
	body
{
	background:#eaeaea no-repeat center center fixed;
	background-size:cover;
	font-family:open sans,sans-serif;
	font-weight:400;
	font-size:16px;
	color:#7c7f88;
	line-height:1.3;
	-webkit-font-smoothing:antialiased;
	position: relative;
}
	body::before
{
	content: '';
	position: fixed;
	top: 0;
	left: 50%;
	margin-left: -750px;
	width: 300px;
	height: 100vh;
	opacity: 0.15;
	z-index: 0;
	pointer-events: none;
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	background: 
		url('../SVG-Client-logo/allianz.svg') 0 5% / 90px auto no-repeat,
		url('../SVG-Client-logo/hema.svg') 0 20% / 90px auto no-repeat,
		url('../SVG-Client-logo/ziggo.svg') 0 35% / 90px auto no-repeat,
		url('../SVG-Client-logo/Mediamarkt.svg') 0 50% / 90px auto no-repeat,
		url('../SVG-Client-logo/Unive.svg') 0 65% / 90px auto no-repeat,
		url('../SVG-Client-logo/Dpg.svg') 0 80% / 90px auto no-repeat,
		url('../SVG-Client-logo/Centraal Beheer.svg') 0 95% / 90px auto no-repeat,
		url('../SVG-Client-logo/mcdonalds.svg') 105px 5% / 90px auto no-repeat,
		url('../SVG-Client-logo/kfc.svg') 105px 20% / 90px auto no-repeat,
		url('../SVG-Client-logo/heineken.svg') 105px 35% / 90px auto no-repeat,
		url('../SVG-Client-logo/nespresso.svg') 105px 50% / 90px auto no-repeat,
		url('../SVG-Client-logo/nutella.svg') 105px 65% / 90px auto no-repeat,
		url('../SVG-Client-logo/volkswagen.svg') 105px 80% / 90px auto no-repeat,
		url('../SVG-Client-logo/renault.svg') 105px 95% / 90px auto no-repeat,
		url('../SVG-Client-logo/citroen.svg') 210px 5% / 90px auto no-repeat,
		url('../SVG-Client-logo/kia-motors.svg') 210px 20% / 90px auto no-repeat,
		url('../SVG-Client-logo/hyundai.svg') 210px 35% / 90px auto no-repeat,
		url('../SVG-Client-logo/att.svg') 210px 50% / 90px auto no-repeat,
		url('../SVG-Client-logo/loreal.svg') 210px 65% / 90px auto no-repeat,
		url('../SVG-Client-logo/lancome.svg') 210px 80% / 90px auto no-repeat;
}
	body::after
{
	content: '';
	position: fixed;
	top: 0;
	right: 50%;
	margin-right: -750px;
	width: 300px;
	height: 100vh;
	opacity: 0.15;
	z-index: 0;
	pointer-events: none;
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	background: 
		url('../SVG-Client-logo/dior.svg') 0 5% / 90px auto no-repeat,
		url('../SVG-Client-logo/yves-rocher.svg') 0 20% / 90px auto no-repeat,
		url('../SVG-Client-logo/prada.svg') 0 35% / 90px auto no-repeat,
		url('../SVG-Client-logo/hermes.svg') 0 50% / 90px auto no-repeat,
		url('../SVG-Client-logo/givenchy.svg') 0 65% / 90px auto no-repeat,
		url('../SVG-Client-logo/kenzo.svg') 0 80% / 90px auto no-repeat,
		url('../SVG-Client-logo/jean-paul-gaultier.svg') 0 95% / 90px auto no-repeat,
		url('../SVG-Client-logo/paco-rabanne.svg') 105px 5% / 90px auto no-repeat,
		url('../SVG-Client-logo/playstation.svg') 105px 20% / 90px auto no-repeat,
		url('../SVG-Client-logo/ubisoft.svg') 105px 35% / 90px auto no-repeat,
		url('../SVG-Client-logo/nikon.svg') 105px 50% / 90px auto no-repeat,
		url('../SVG-Client-logo/omega-watches.svg') 105px 65% / 90px auto no-repeat,
		url('../SVG-Client-logo/swatch.svg') 105px 80% / 90px auto no-repeat,
		url('../SVG-Client-logo/samsonite.svg') 105px 95% / 90px auto no-repeat,
		url('../SVG-Client-logo/fedex.svg') 210px 5% / 90px auto no-repeat,
		url('../SVG-Client-logo/electrolux.svg') 210px 20% / 90px auto no-repeat,
		url('../SVG-Client-logo/carrefour.svg') 210px 35% / 90px auto no-repeat,
		url('../SVG-Client-logo/diesel.svg') 210px 50% / 90px auto no-repeat,
		url('../SVG-Client-logo/erste-bank.svg') 210px 65% / 90px auto no-repeat,
		url('../SVG-Client-logo/hollands_nieuwe.svg') 210px 80% / 90px auto no-repeat;
}
	body.screen--mobile
{
	background-image:url(../images/bg-mobile.jpg)
}
	body.screen--mobile::before,
	body.screen--mobile::after
{
	display: none;
}
	body.screen--standard
{
	background-image:url(../images/bg.jpg)
}
	body.scroll-view
{
	overflow:hidden
}
.sp-canvas
{
	-webkit-transform:scale(0);
	-moz-transform:scale(0);
	-o-transform:scale(0);
	transform:scale(0)
}
.wrapper
{
	position:relative;
	width:100%;
	min-width:320px;
	overflow:hidden;
	-webkit-transform:translateX(0);
	-moz-transform:translateX(0);
	-o-transform:translateX(0);
	transform:translateX(0)
}
.scroll-view .wrapper
{
	width:auto;
	overflow:visible
}
	h1,h2,h3,h4,h5
{
	margin:0 0 .3em;
	color:#000084;
	font-weight:400;
	line-height:1
}
	h1
{
	letter-spacing:-.03em;
	font-size:3em;
	line-height:.92;
	text-transform:uppercase;
	font-family:oswald,sans-serif;
	font-weight:700
}
	h1 small
{
	position:relative;
	top:-.1em;
	font-size:.9em
}
	h2
{	font-family:Oswald,sans-serif;
	font-weight:400;
	color:#FFCC00;
	font-size:1.7em
}
	h3
{
	font-size:1.2em
}
	p
{
	margin:0 0 1em
}
	a
{
	color:#2b2b2b;
	font-weight:600;
	text-decoration:none;
	-webkit-transition:all .15s ease;
	-moz-transition:all .15s ease;
	-o-transition:all .15s ease;
	transition:all .15s ease
}
.no-touch a:hover
{
	color:#D1B37F
}
.anchor
{
	display:block;
	width:100%;
	position:relative;
	top:-2.5em
}
	hr
{
	border:none;
	border-top:1px solid #eaeaea;
	margin:1.875em auto
}
.list
{
	margin:0 0 1em;
	padding:0;
	font-size:.95em
}
.list .list__item
{
	margin:0;
	padding:0;
	list-style:none
}
.list .list__item
{
	padding-left:1em
}
.list .list__item+.list__item
{
	margin-top:.2em
}
.list .list__item__icon
{
	margin-left:-1em
}
.list__item__icon
{
	color:#000;
	margin-right:5px
}
.list__item__icon:before
{
	margin:0;
	width:.6em
}
.hint
{
	font-size:.8em;
	margin:0 0 .8em
}
.handwriting
{
	display:none;
	font-family:Oswald,sans-serif;
	font-weight:400;
	font-size:1.5em;
	color:#bfc0c5;
	margin:.7em 0 0;
}
.handwriting:hover
{
	color:#D1B37F
}
.handwriting .arrow
{
	position:relative;
	padding: 0 0.3em;
	font-size:1em;
	vertical-align:middle
}
.handwriting .arrow.icon-up-big
{
	top:0
}
.scroll-view .handwriting
{
	display:-moz-inline-stack;
	display:inline-block;
	zoom:1;
	*display:inline
}
.button
{
	display:inline-block;
	width:3.5em;
	height:3.5em;
	line-height:3.5em;
	text-align:center;
	background:#7c7f88;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	-o-border-radius:50%;
	border-radius:50%;
	color:#fff;
	-webkit-transition:all .15s ease;
	-moz-transition:all .15s ease;
	-o-transition:all .15s ease;
	transition:all .15s ease
}
.no-touch .button:hover
{
	background:#D1B37F;
	color:#2b2b2b
}
.button+.button
{
	margin-left:5px
}
.button i
{
	font-size:1.2em
}
.button .icon-linkedin
{
	position:relative;
	top:-.05em
}
.preloader
{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:999999;
	background:#000084
}
.no-js .preloader
{
	display:none
}
.preloader__icon
{
	position:absolute;
	opacity:0
}
.preloader__progress
{
	position:absolute;
	top:-5px;
	left:-5px;
	right:-5px;
	bottom:-5px;
	background:#000084;
	opacity:.95;
	-webkit-transition:all 20s linear;
	-moz-transition:all 20s linear;
	-o-transition:all 20s linear;
	transition:all 20s linear
}
.preloader__title
{
	color:#eaeaea;
	margin:0
}
.preloader--start .preloader__icon
{
	opacity:1
}
.preloader--start .preloader__progress
{
	-webkit-transform:translateX(50%);
	-moz-transform:translateX(50%);
	-o-transform:translateX(50%);
	transform:translateX(50%)
}
.preloader--complete .preloader__progress
{
	-webkit-transform:translateX(100%);
	-moz-transform:translateX(100%);
	-o-transform:translateX(100%);
	transform:translateX(100%);
	-webkit-transition:all 1.4s ease;
	-moz-transition:all 1.4s ease;
	-o-transition:all 1.4s ease;
	transition:all 1.4s ease
}
.modal
{
	display:none;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:9999999;
	background:#515151;
	background:rgba(0,0,0,.8);
	-webkit-animation:fadeIn .2s ease forwards;
	-moz-animation:fadeIn .2s ease forwards;
	-o-animation:fadeIn .2s ease forwards;
	animation:fadeIn .2s ease forwards
}
.modal--active
{
	display:block
}
.modal__content
{
	position:absolute;
	top:50%;
	left:50%;
	width:100%;
	max-width:80%;
	background:#fff;
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	-o-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	max-height:100%;
	height:80%;
	overflow:auto;
	-webkit-overflow-scrolling:touch;
	border-radius: 1em;
}
.modal__hero,.modal__body
{
	position:relative
}
.modal__hero
{
	background:#515151 no-repeat center top;
	overflow:hidden;
	min-height:200px
}
.modal__hero,.modal__hero .modal__hero__bg
{
	-webkit-box-shadow:inset 0 -30px 20px -20px rgba(0,0,0,.2);
	-moz-box-shadow:inset 0 -30px 20px -20px rgba(0,0,0,.2);
	-o-box-shadow:inset 0 -30px 20px -20px rgba(0,0,0,.2);
	box-shadow:inset 0 -30px 20px -20px rgba(0,0,0,.2);
	background-size:cover
}
.modal__hero .icon-load
{
	position:absolute;
	top:50%;
	left:50%;
	z-index:0;
	width:50px;
	height:50px;
	line-height:50px;
	text-align:center;
	margin:-25px 0 0 -25px;
	font-size:2em;
	-webkit-animation:spin 1.2s linear infinite;
	-moz-animation:spin 1.2s linear infinite;
	-o-animation:spin 1.2s linear infinite;
	animation:spin 1.2s linear infinite;
	color:#c3c3c3
}
.modal__hero .icon-load:before
{
	display:block;
	margin:0;
	width:100%;
	height:100%;
	line-height:inherit
}
.modal__hero .modal__hero__bg
{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:10;
	opacity:0;
	-webkit-transition:opacity .2s ease;
	-moz-transition:opacity .2s ease;
	-o-transition:opacity .2s ease;
	transition:opacity .2s ease
}
.modal__hero img
{
	position:absolute;
	top:-10000px;
	left:-10000px;
	width:1px;
	height:1px
}
.modal--loaded .modal__hero .modal__hero__bg
{
	opacity:1
}
.modal__body
{
	max-height:100%;
	overflow:auto;
	-webkit-overflow-scrolling:touch;
	padding:1.875em
}
.modal__body.modal__body--full
{
	width:100%!important
}
.modal__body hr
{
	margin-left:-1.875em;
	margin-right:-1.875em
}
.modal__body a {
	display: block;
    padding-bottom: 5px;
}
.modal__close
{
	position:absolute;
	top:0;
	right:0;
	width:50px;
	height:50px;
	line-height:50px;
	text-align:center;
	font-size: 1.5em;
    padding: 0.5em;
	cursor:pointer
}
.menu
{
	zoom:1;
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:999;
	padding:.625em 0;
	background:#2b2b2b;
	background:rgba(0,0,0,.8);
	color:#fff;
	-webkit-transform:translateY(0%);
	-moz-transform:translateY(0%);
	-o-transform:translateY(0%);
	transform:translateY(0%);
	-webkit-transition:all .15s ease;
	-moz-transition:all .15s ease;
	-o-transition:all .15s ease;
	transition:all .15s ease
}
.menu:before,.menu:after
{
	content:"";
	display:table
}
.menu:after
{
	clear:both
}
.no-touch .menu:hover,.touch .menu.menu--active
{
	-webkit-transform:translateY(0%);
	-moz-transform:translateY(0%);
	-o-transform:translateY(0%);
	transform:translateY(0%)
}
.menu__icon
{
	position:absolute;
	top:100%;
	display:block;
	height:50px;
	margin-left:-.625em;
	padding:0 .625em;
	text-align:center;
	cursor:pointer;
	color:#777;
	color:#FF2400;
	-webkit-tap-highlight-color:transparent
}
.menu__icon:before
{
	margin:0;
	width:auto;
	font-size:25px;
	line-height:50px
}
.menu__items
{
	zoom:1;
	margin:0 auto;
	float:none;
	text-align:center;
}
.menu__items:before,.menu__items:after
{
	content:"";
	display:table
}
.menu__items:after
{
	clear:both
}
.menu__item
{
	display:inline-block;
	float:none;
}
.menu__item+.menu__item
{
	margin-left:1.25em
}
.menu__item a
{
	display:block;
	padding:0 .625em;
	line-height:30px;
	color:inherit
}
.no-touch .menu__item a:hover
{
	color:#D1B37F
}
.menu__copyright
{
	font-size:13px;
	line-height:30px;
	float:right;
}
.media-small-medium .menu__items
{
	float:left
}
.media-small-medium .menu__item+.menu__item
{
	margin-left:1.25em
}
.media-small-medium .menu__copyright
{
	float:right
}
.container
{
	width:100%;
	max-width:100em;
	margin:0 auto;
	padding:0 1.25em;
	position: relative;
	z-index: 10;
}
.block
{
	position:relative;
	z-index:20;
	max-width:40em;
	padding-top:3em;
	padding-bottom:3em
}
.block--portfolio {
	max-width:none;
}
.block--intro
{
	padding-top:20em
}
.block--intro .anchor
{
	position:absolute;
	top:0
}
.block--about
{
	padding-top:3em
}
.block--skills
{
	padding-top:3em
}
.block--contact
{
	padding-top:3em;
	position: relative;
}
.block--contact p
{
	padding-right:4em;
	position: relative;
	z-index: 2;
}
.scroll-view .block
{
	position:absolute;
	width:500px;
	padding:0
}
.scroll-view .block--intro
{
	-webkit-transform:translate(150px,-100px);
	-moz-transform:translate(150px,-100px);
	-o-transform:translate(150px,-100px);
	transform:translate(150px,-100px)
}
.scroll-view .block--about
{
	-webkit-transform:translate(150px,650px);
	-moz-transform:translate(150px,650px);
	-o-transform:translate(150px,650px);
	transform:translate(150px,650px)
}
.scroll-view .block--skills
{
	-webkit-transform:translate(-910px,770px) rotate(-90deg);
	-moz-transform:translate(-910px,770px) rotate(-90deg);
	-o-transform:translate(-910px,770px) rotate(-90deg);
	transform:translate(-910px,770px) rotate(-90deg);
	margin-top: 6em;
}
.scroll-view .block--portfolio
{
	-webkit-transform:translate(450px,1350px);
	-moz-transform:translate(450px,1350px);
	-o-transform:translate(450px,1350px);
	transform:translate(450px,1350px);
	width: 100%;
}
.scroll-view .block--contact
{
	-webkit-transform:translate(1270px,650px) rotate(-90deg);
	-moz-transform:translate(1270px,650px) rotate(-90deg);
	-o-transform:translate(1270px,650px) rotate(-90deg);
	transform:translate(1270px,650px) rotate(-90deg)
}
.item
{
	position:absolute;
	z-index:10;
	left:50%
}
.item--ipad,.item--coffee
{
	/*display:none*/
}
.item--compas
{
	width:16em;
	margin:0;
	position: absolute;
	right: 2em;
	top: 4em;
	z-index: 10;
}
.needle  {
	animation: rotacija 20s ease-in-out infinite;
	transform-origin: 50%;
	animation-fill-mode: forwards;
	z-index: 11;
    position: absolute;
}
@keyframes rotacija {
  0% {
	-webkit-transform:rotate(-540deg);
	-moz-transform:rotate(-540deg);
	-o-transform:rotate(-540deg);
    transform: rotate(-540deg);
  }
  20% {
	-webkit-transform:rotate(-540deg);
	-moz-transform:rotate(-540deg);
	-o-transform:rotate(-540deg);
    transform: rotate(-540deg);
  }
  38% {
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
    transform: rotate(0deg);
  }
  46% {
	-webkit-transform:rotate(-185deg);
	-moz-transform:rotate(-185deg);
	-o-transform:rotate(-185deg);
    transform: rotate(-185deg);
  }
  48% {
	-webkit-transform:rotate(-175deg);
	-moz-transform:rotate(-175deg);
	-o-transform:rotate(-175deg);
    transform: rotate(-175deg);
  }
  49% {
	-webkit-transform:rotate(-183deg);
	-moz-transform:rotate(-183deg);
	-o-transform:rotate(-183deg);
    transform: rotate(-183deg);
  }
  50% {
	-webkit-transform:rotate(-180deg);
	-moz-transform:rotate(-180deg);
	-o-transform:rotate(-180deg);
    transform: rotate(-180deg);
  }
  80% {
	-webkit-transform:rotate(-180deg);
	-moz-transform:rotate(-180deg);
	-o-transform:rotate(-180deg);
    transform: rotate(-180deg);
  }
  81% {
	-webkit-transform:rotate(-183deg);
	-moz-transform:rotate(-183deg);
	-o-transform:rotate(-183deg);
    transform: rotate(-183deg);
  }
  82% {
	-webkit-transform:rotate(-178deg);
	-moz-transform:rotate(-178deg);
	-o-transform:rotate(-178deg);
    transform: rotate(-178deg);
  }
  83% {
	-webkit-transform:rotate(-180deg);
	-moz-transform:rotate(-180deg);
	-o-transform:rotate(-180deg);
    transform: rotate(-180deg);
  }
  100% {
	-webkit-transform:rotate(-180deg);
	-moz-transform:rotate(-180deg);
	-o-transform:rotate(-180deg);
    transform: rotate(-180deg);
  }
}

.item--sketches
{
	width:25em;
	margin:-4.5em 0 0 -2em
}
.item--iphone
{
	width:16em;
	left:auto;
	right:-6em;
	margin:1em 0 0
}


.scroll-view .item
{
	position:absolute;
	left:auto;
	right:auto;
	margin:0;
	width:auto
}
.item--iphone .phone-s {
      background-size: cover;
      opacity: 1;
	  left: auto;
    }

.item--iphone .phone_screen {
	transform: rotate(-105deg);
	clip-path: polygon(7% 8%, 96% 7%, 99% 11%, 99% 88%, 95% 92%, 5% 92%, 0% 85%, 0% 14%);
	-webkit-clip-path: polygon(7% 8%, 96% 7%, 99% 11%, 99% 88%, 95% 92%, 5% 92%, 0% 85%, 0% 14%);
	opacity: 1;
	display: block;
    left: -2.7em;
    top: 8.5em;
	}
.scroll-view .item--compas
{
	width:26em;
	-webkit-transform:translate(650px,-400px);
	-moz-transform:translate(650px,-400px);
	-o-transform:translate(650px,-400px);
	transform:translate(650px,-400px);
	margin-left: -6em;
}
.scroll-view .item--sketches
{
	width:43em;
	-webkit-transform:translate(-710px,200px);
	-moz-transform:translate(-710px,200px);
	-o-transform:translate(-710px,200px);
	transform:translate(-710px,200px)
}
.scroll-view .item--ipad
{
	width:47em;
	-webkit-transform:translate(-800px,1450px);
	-moz-transform:translate(-800px,1450px);
	-o-transform:translate(-800px,1450px);
	transform:translate(-800px,1450px);
	margin: -6em 0 0 -4em;
}
.scroll-view .item--iphone
{
	width:21em;
	-webkit-transform:translate(1460px,180px);
	-moz-transform:translate(1460px,180px);
	-o-transform:translate(1460px,180px);
	transform:translate(1460px,180px);
	margin-top: 6em;
}
.scroll-view .item--coffee
{
	width:21em;
	-webkit-transform:translate(1220px,0);
	-moz-transform:translate(1220px,0);
	-o-transform:translate(1220px,0);
	transform:translate(1220px,0)
}
/* Portfolio filter menu */
.portfolio-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 2em auto 1em;
	padding: 0;
}

.filter-btn {
	background: #f0f0f0;
	border: 2px solid #000084;
	color: #000084;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	border-radius: 4px;
	transition: all 0.3s ease;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.filter-btn:hover {
	background: #e0e0e0;
	transform: translateY(-2px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.filter-btn.active {
	background: #000084;
	color: #ffffff;
}

.image-grid__item.hidden {
	display: none;
}

/* Simple image grid for portfolio JPGs */
.image-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 2em auto;
	justify-content: center;
	/* 5 columns max: 5 * 150px + 4 * 10px gaps = 790px */
	width: 100%;
	max-width: 790px;
}

.image-grid__item {
	flex: 0 0 150px;
	height: 150px;
	overflow: hidden;
	background: #ffffff;
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.image-grid__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.image-grid__overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 135px;
	height: 135px;
	margin-top: -67.5px;
	margin-left: -67.5px;
	background: rgba(0, 0, 0, 0.75);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

.no-touch .image-grid__item:hover .image-grid__overlay {
	opacity: 1;
}

.image-grid__skills {
	color: #ffffff;
	font-size: 0.85em;
	text-align: center;
	padding: 0.5em;
	font-weight: 500;
	line-height: 1.3;
}

/* Centered iPhone item (no responsive overrides) */
.item--iphone {
	position: absolute;
	width: 35em;
	left: 100%;
	right: auto;
	margin-left: -17.5em;
	bottom: -8em;
	text-align: center;
	z-index: 1;
	transform: rotate(90deg);
}
.thumb--hema1
{
	background-position:75% 25%
}
.thumb--puzzelfit
{
	background-position:75% 50%
}
.thumb--mmweborama
{
	background-position:25% 0
}
.thumb--mmdco
{
	background-position:50% 0
}
.thumb--univedco
{
	background-position:75% 0
}
.thumb--puzzels
{
	background-position:100% 0
}
.thumb--cb
{
	background-position:0 25%
}
.thumb--na
{
	background-position:25% 25%
}
.thumb--hubo
{
	background-position:50% 25%
}
.thumb--ziggo
{
	background-position:75% 25%
}
.thumb--homann
{
	background-position:100% 25%
}
.thumb--kfc
{
	background-position:0 50%
}
.thumb--dpg3
{
	background-position:25% 50%
}
.thumb--interpolis
{
	background-position:50% 50%
}
.thumb--dpg2
{
	background-position:0 25%
}
.thumb--cbapto
{
	background-position:100% 50%
}
.thumb--ccv
{
	background-position:0 75%
}
.thumb--allianz
{
	background-position:25% 75%
}
.thumb--unive
{
	background-position:50% 75%
}
.thumb--ziggo
{
	background-position:75% 75%
}
.no-touch .skills {
	width: auto;
    height: auto;
    background-color: #D1B37F;
	color: #000;
    padding: 1px 6px;
    opacity: 1;
    font-size: small;
	font-family:Oswald,sans-serif;
	font-weight:400;
    margin: 5px;
    position: absolute;
    top: 0;
    left: 0;
	cursor: default;
	border-radius:3px;
}
.touch .skills {display:none}


#detach-button-host {display:none !important; opacity:0 !important}


	@media screen and (max-width:83em)
	{
			.block--intro
			{
				padding-top:16em
			}
			.item--compas
			{
				width:25em;
				margin:-11em 0 0 -14em;
			}
			.item--sketches
			{
				width:36em;
				margin: -12.5em 0 0 4em;
				-webkit-transform:rotate(110deg) scale(1);
				-moz-transform:rotate(110deg) scale(1);
				-o-transform:rotate(110deg) scale(1);
				transform: rotate(110deg) scale(1);
			}
			.item--ipad
			{
				margin: -7.5em 0 0 -41em;
				width: 27em;
				transform: rotate(70deg);
				-webkit-transform:rotate(70deg);
				-moz-transform:rotate(70deg);
				-o-transform:rotate(70deg);
			}
			
			
}	
@media screen and (max-width:66em)
	{
		.portfolio__item
		{
			width:16.66666667%
		}
		.item--sketches
	{
		width:31em;
		margin: -12.5em 0 0 4em;
		-webkit-transform:rotate(110deg) scale(1);
		-moz-transform:rotate(110deg) scale(1);
		-o-transform:rotate(110deg) scale(1);
		transform: rotate(110deg) scale(1);
	}
	
	.item--ipad
			{
				display:none;
			}
}
	@media screen and (max-width:57em)
	{
		h1
	{
		font-size:3em
	}
		h2
	{
		font-size:2em
	}
	.container
	{
		padding-left:1.875em;
		padding-right:1.875em
	}
	.block
	{
		padding-top:6em;
		padding-bottom:6em
	}
	.block--contact {
		padding-top: 11em;
	}
	.block--intro
	{
		padding-top:13em;
		padding-bottom:2em;
	}
	.block--about
	{
		padding-top:2em;
		padding-bottom:6em;
	}
	.block--skills
	{
		padding-top:6em;
		padding-bottom:2em;
	}
	.block--portfolio
	{
		padding-top:2em;
		padding-bottom:2em;
	}
	.item--compas
	{
		width:21em;
		margin:-11em 0 0 -14em;
	}
	.item--sketches
	{
		width:31em;
		margin: -18.5em 0 0 4em;
		-webkit-transform:rotate(110deg) scale(0.8);
		-moz-transform:rotate(110deg) scale(0.8);
		-o-transform:rotate(110deg) scale(0.8);
		transform: rotate(110deg) scale(0.8);
	}

	.item--coffee
	{
		display:block;
		width:17em;
		margin:-2em 0 0 19em
	}
	.portfolio__item
	{
		width:20%
	}

}
@media screen and (min-width:44em)
	{
	.modal__content
	{
		display:-ms-flexbox;
		display:-webkit-flex;
		display:flex;
		overflow:hidden
	}
	.modal__hero,.modal__body
	{
		position:relative;
		width:50%
	}
	.modal__hero,.modal__hero .modal__hero__bg
	{
		-webkit-box-shadow:inset -30px 0 20px -20px rgba(0,0,0,.2);
		-moz-box-shadow:inset -30px 0 20px -20px rgba(0,0,0,.2);
		-o-box-shadow:inset -30px 0 20px -20px rgba(0,0,0,.2);
		box-shadow:inset -30px 0 20px -20px rgba(0,0,0,.2)
	}
}	
@media screen and (max-width:44em)
	{
	.menu__items
	{
		float:left
	}
	.menu__item+.menu__item
	{
		margin-left: -0.3125em;
	}
	.menu__item a {
		padding: 0 0.625em;
	}
	
	.block--contact
	{
		padding-top:11em
	}
	.block--contact p
	{
		padding-right:2em
	}
	.item--sketches
	{
		width:31em;
		margin: -18.5em 0 0 -14em;
		-webkit-transform:rotate(110deg) scale(0.6);
		-moz-transform:rotate(110deg) scale(0.6);
		-o-transform:rotate(110deg) scale(0.6);
		transform: rotate(110deg) scale(0.6);
	}

}
@media screen and (max-width:36em)
	{
		h1
	{
		font-size:3em
	}
		h2
	{
		font-size:2em
	}
	.block--skills
	{
		padding-top:8em
	}
	.item--compas
	{
		width:16em;
		margin:-11em 0 0 -14em;
	}
	.portfolio__item
	{
		width:25%
	}

	.menu__copyright
	{
		float:left
	}
}
@media screen and (max-width:28em)
	{

	.block--contact
	{
		padding-top:17em
	}

}

.footer {
	position: fixed;
	bottom: 0;
	right: 0;
	padding: 1em 2em;
	background: transparent;
	color: #000084;
	z-index: 999;
}

.footer p {
	margin: 0;
	font-size: 13px;
}

/* YouTube Video Modal */
.video-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10000;
	align-items: center;
	justify-content: center;
}

.video-modal.active {
	display: flex;
}

.video-modal__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.9);
	cursor: pointer;
}

.video-modal__content {
	position: relative;
	width: 90%;
	max-width: 1200px;
	z-index: 10001;
}

.video-modal__close {
	position: absolute;
	top: -40px;
	right: 0;
	background: transparent;
	border: none;
	color: white;
	font-size: 40px;
	cursor: pointer;
	padding: 0;
	width: 40px;
	height: 40px;
	line-height: 1;
	transition: transform 0.2s;
}

.video-modal__close:hover {
	transform: scale(1.2);
}

.video-modal__wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
	height: 0;
	overflow: hidden;
	background: #000;
}

.video-modal__wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 740px) {
	.video-modal__content {
		width: 95%;
	}
	
	.video-modal__close {
		top: -35px;
		font-size: 35px;
	}
}