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,dl,dt,dd,ol,nav ul,nav 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 { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; }
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section   { display: block; }
ol,ul { list-style:none; margin:0; padding:0; }
blockquote,q  { quotes:none; }
blockquote:before,blockquote:after,q:before,q:after  { content:''; content:none; }
table { border-collapse:collapse; border-spacing:0; }
a { text-decoration:none; }
.txt-rt { text-align:right; }
.txt-lt { text-align:left; }
.txt-center { text-align:center; }
.float-rt { float:right; }
.float-lt { float:left; }
.clear { clear:both; }
.pos-relative { position:relative; }
.pos-absolute { position:absolute; }
.vertical-base { vertical-align:baseline; }
.vertical-top { vertical-align:top; }
nav.vertical ul li { display:block; }
nav.horizontal ul li { display: inline-block; }
img { max-width:100%; width:100%; height:auto; display:block; }
body { padding:0; margin:0; font-family: 'Lato', sans-serif !important; background: #19345b; }
h1,h2,h3,h4,h5,h6 { margin:0; }	
p { margin:0; }
ul { margin:0; padding:0; }
label { margin:0; }
.main { padding:70px 0; }
.content { width:480px; margin:0 auto; }
p.footer { color: #fff; text-align: center; font-size: 16px; margin-top: 30px; }
p.footer a { color:#ef717a; }
p.footer a:hover { color: #fff; }
.profile-img { background:url(../images/mateskracic.jpg) no-repeat 0 0; background-size:cover; -webkit-background-size: cover; -o-background-size: cover; -ms-background-size: cover; -moz-background-size: cover; min-height: 350px; position:relative; }
.pro-details { background:rgba(255, 255, 255, 0.7); padding: 18px 15px; position:relative; bottom:0; width:480px; }
.pro-details h3 { color: #19345b; font-size: 28px; }
.pro-details p { font-size: 13px; margin-top: 10px; color: #19345b; }
.skills { background: #dedede; width: 350px; margin: 9px 0; height: 22px; border-radius: 2px; float: right; }
.skill { background: #ef717a; height: 71%; display: block; border-radius: 2px; margin: 3px 3px; }
.skill-grid { background: #ecf0f1; padding: 25px 40px; }
.skill-grid h3 { font-size: 28px; color: #373737; margin-bottom: 20px; font-weight: 300; font-family: 'Lato', cursive; }
.bar { float:left; width:100%; }
.bar p   { font-size: 15px; color: #373737; font-weight: 600; margin: 7px 0; }

@media (max-width: 460px){ 
.content { width: 319px; }
.profile-img { min-height: 275px; }	
.skills { width: 290px; }
.skill-grid { padding: 14px 14px; }
.skill-grid h3 { font-size: 22px; }
.pro-details {  padding: 18px 15px 18px 15px ; position:relative; bottom:0; width:auto; }
.pro-details h3 { font-size: 30px; }
p.footer { font-size: 14px; }
}