@font-face {font-family:pnl; src:url(/g/f/pnl.eot); src:url(/g/f/pnl.eot?#iefix) format("embedded-opentype"),url(/g/f/pnl.woff) format("woff"),url(/g/f/pnl.ttf) format("truetype"),url(/g/f/pnl.svg#proxima_nova_rgregular) format("svg"); font-weight:300; font-style:normal;}@font-face {font-family:pnr; src:url(/g/f/pnr.eot); src:url(/g/f/pnr.eot?#iefix) format("embedded-opentype"),url(/g/f/pnr.woff) format("woff"),url(/g/f/pnr.ttf) format("truetype"),url(/g/f/pnr.svg#proxima_nova_rgregular) format("svg"); font-weight:400; font-style:normal;}@font-face {font-family:pnb; src:url(/g/f/pnb.eot); src:url(/g/f/pnb.eot?#iefix) format("embedded-opentype"),url(/g/f/pnb.woff) format("woff"),url(/g/f/pnb.ttf) format("truetype"),url(/g/f/pnb.svg#proxima_nova_rgregular) format("svg"); font-weight:700; font-style:normal;}body {margin:0; font-family:pnl; color:#222; font-size:14px; line-height:1;}:focus, :active {outline:none;}h1, h2, h3 {margin:0; font-weight:normal;}p {margin:10px 0 0 0; line-height:1.3;}a {text-decoration:none; color:#c8e9f2;}.bevels {position:absolute; width:100%; height:390px; top:-100px; background:#69deff; transform:skewY(-1.7deg); z-index:-2; background:linear-gradient(to right, #69deff 50%, #fff 50%); background-size:200% 100%; background-position:100% 0%; animation:fill 1s ease 1s 1 forwards;}@keyframes fill {	0% {background-position:100% 0%;}	100% {background-position:0% 100%;}}.bevels:after {position:absolute; content:' '; width:100%; height:390px; top:-400px; background:#23c6f2; z-index:-3; animation:slide .5s ease 1 forwards;}@keyframes slide {	0% {top:-400px;}	100% {top:-10px;}}ul {list-style:none; padding-top:15px;}ul li {float:left; width:47%; padding-bottom:18px;}ul.skills div {height:3px; background:#e5e5e5; border-radius:2px;}ul.skills div div {background:#23c6f2;}ul.skills p {margin:0 0 5px 0; color:#999;}ul.skills b {color:#000; font-weight:normal; font-family:pnr;}ul.featured li {background-position:0 20px; background-repeat:no-repeat; background-size:75px; margin-bottom:30px; min-height:180px; border-bottom:1px solid #eee;}ul.featured li:nth-child(2n+1) {margin-right:6%;}ul.featured li div, ul.featured li a {padding-left:100px; display:block; color:#000;}ul.featured p a {padding:0; display:initial; color:#23c6f2; font-family:pnr; text-decoration:underline;}ul.featured h3, ul.portfolio h3 {font-size:17px; margin-bottom:5px; font-family:pnr;}ul.featured h3 span {color:#999;}ul.featured span {display:inline-block; margin-left:10px; font-size:13px; font-family:pnl;}ul.portfolio li {float:left; width:29%; padding-bottom:24px;}ul.portfolio li a {color:#000;}header {max-width:980px; margin:auto; padding:50px 10px; color:#fff; animation:show .5s ease 1 forwards;}@keyframes show {	0% {opacity:0;}	50% {opacity:0;}	100% {opacity:1;}}header div {display:inline-block;}header .left {width:56%;}header .right {float:right; width:33%; padding-top:75px;}header .photo {float:left; width:64px; height:64px; background:url(/g/matija-matecic.jpg) 50% no-repeat; background-size:100%; border-radius:50%; margin:-1% 2% 0 0; border:1px solid #fff;}header h1 {font-size:36px; font-family:pnb;}header h1 span {font-family:pnl;}header h2 {font-size:17px; margin-bottom:20px;}header .right p {margin:0 0 3px 0; color:#c8e9f2; font-size:15px;}header .right b {display:inline-block; width:80px; font-family:pnr; font-weight:normal; color:#fff;}section {clear:both; max-width:980px; margin:auto; padding-top:50px; animation:show 1s ease 1s 1 forwards; opacity:0;}section h1 {font-family:pnb; font-size:26px;}section h2 {font-family:pnl; font-size:15px; color:#999; padding-bottom:10px; border-bottom:1px solid #ccc;}footer {clear:both; position:relative; height:140px; overflow:hidden;}footer:after {position:absolute; content:' '; width:100%; height:400px; top:50px; background:#23c6f2; transform:skewY(.5deg); z-index:-2;}footer p {font-size:13px; color:#c8e9f2; margin-top:90px; text-align:center;}a.bots {unicode-bidi:bidi-override; direction:rtl;}@media only screen and (max-width:979px) {	header, section {width:92%;}	header .photo {display:none;}	p, header .right p {font-size:13px;}	.bevels, .bevels:after {height:540px;}	header {padding-top:30px;}	header .left, header .right {float:none; width:100%;}	header .right {padding-top:20px;}	header h1 {font-size:34px;}	header h2 {font-size:16px;}	ul {padding:0;}	ul li, ul.portfolio li {float:none; width:100%;}}