@import url(http://fonts.googleapis.com/css?family=Homenaje); 

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{ 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}

*{ box-sizing:border-box}

body{ line-height:1}

ol, ul{ list-style:none}

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}

a:hover{ text-decoration:none}

strong{ font-weight:700}

.clearfix:before, .clearfix:after{ content:"";  display:table}

.clearfix:after{ clear:both}

#resume section.heading:before, #resume section.expertise ul:before, #resume section.technical ul:before, #resume section.technical ul dl:before, #resume section.technical ul dt:before, #resume section.experience dt:before, #resume section.education dt:before, #resume section dl:before, #resume section dl dt:before, #resume section.heading:after, #resume section.expertise ul:after, #resume section.technical ul:after, #resume section.technical ul dl:after, #resume section.technical ul dt:after, #resume section.experience dt:after, #resume section.education dt:after, #resume section dl:after, #resume section dl dt:after{ content:"";  display:table}

#resume section.heading:after, #resume section.expertise ul:after, #resume section.technical ul:after, #resume section.technical ul dl:after, #resume section.technical ul dt:after, #resume section.experience dt:after, #resume section.education dt:after, #resume section dl:after, #resume section dl dt:after{ clear:both}

#resume section.technical ul >li:before, #resume section.experience dd:before, #resume section.education dd:before, #resume section.hobbies li:before{ content:"-";  padding-right:.15rem}

@keyframes tailwag{ 0%{ transform:rotate3d(0,1,0,40deg)}
 50%{ transform:rotate3d(0,1,0,20deg)}
 100%{ transform:rotate3d(0,1,0,40deg)}
}
@keyframes swat{ 0%{ -ms-transform:matrix(1,0,0,1,0,0) rotate(0deg);  -webkit-transform:matrix(1,0,0,1,0,0) rotate(0deg);  /*transform:matrix(1,0,0,1,0,0) rotate(0deg)*/}
 50%{ -ms-transform:matrix(1,0,-0.5,1,-4,2) rotate(-50deg) skew(-5deg);  -webkit-transform:matrix(1,0,-0.5,1,-4,2) rotate(-50deg) skew(-5deg);  /*transform:matrix(1,0,-0.5,1,-4,2) rotate(-50deg) skew(-5deg)*/}
 100%{ -ms-transform:matrix(1,0,0,1,0,0) rotate(0deg);  -webkit-transform:matrix(1,0,0,1,0,0) rotate(0deg);  /*transform:matrix(1,0,0.05,1,0,0) rotate(0deg)*/}
}

*{ transition:all .3s ease-in}

body{ padding:0;  font-size:16px}
@media screen and (min-width:620px){  body{ padding:1rem;  background-color:#9DEBE9;  background-color:rgba(167,224,223,0.87)}
}

#resume{  max-width:1000px;   margin:0 auto;   padding:0;   background-color:#fff;  border-radius: 3px; background-image:url(paper-texture.png);  box-shadow:0 0 15px rgba(0,0,0,0.2);  font-family:'Homenaje',sans-serif;  color:#333;  color:rgba(51,51,51,0.75);  text-align:center}
@media screen and (min-width:490px){  #resume{ padding:1rem}
}

#resume section{ padding:1rem; border-radius: 3px;}

#resume section a{ color:#000;  text-shadow:0 0 1px rgba(0,0,0,0.03);  transition:text-shadow .3s ease-in}

#resume section a:hover{ text-shadow:0 0 4px rgba(0,0,0,0.4);  transition:text-shadow .3s ease-in}

#resume section *:not(h3){ text-align:left}

#resume section h3+*{ padding-top:1rem}

#resume section:first-child{ text-align:left}

#resume section:nth-child(even){ background:-o-linear-gradient(top,rgba(0,0,0,0.03) 0%,rgba(0,0,0,0.05) 100%);  background:-ms-linear-gradient(top,rgba(0,0,0,0.03) 0%,rgba(0,0,0,0.05) 100%);  background:linear-gradient(to bottom,rgba(0,0,0,0.03) 0%,rgba(0,0,0,0.05) 100%);  -moz-box-shadow:0px -1px 3px rgba(190,255,255,0.5),2px 3px 3px rgba(0,0,0,0.2),inset 0 -1px 1px rgba(0,0,0,0.5),inset 0 1px 1px white;  -webkit-box-shadow:0px -1px 3px rgba(190,255,255,0.5),2px 3px 3px rgba(0,0,0,0.2),inset 0 -1px 1px rgba(0,0,0,0.5),inset 0 1px 1px white;  box-shadow:0px -1px 3px rgba(190,255,255,0.5),2px 3px 3px rgba(0,0,0,0.2),inset 0 -1px 1px rgba(0,0,0,0.5),inset 0 1px 1px white}

#resume section.heading{ position:relative}

#resume section.heading h1{ text-align:center}
@media screen and (min-width:620px){  #resume section.heading h1{ float:left}
}

#resume section.heading a{ font-size:1.1rem}

#resume section.heading a:first-of-type{ float:right}

#resume section.heading a:nth-of-type(2){ float:left}
@media screen and (min-width:620px){  #resume section.heading a:nth-of-type(2){ clear:both}
}

#resume section.heading #KITTY{ position:absolute;  display:none;  top:0;  bottom:0;  right:200px;  width:7%;  height:auto}
@media screen and (min-width:620px){  #resume section.heading #KITTY{ display:block}
}

#resume section.heading #KITTY svg{ display:block;  width:100%;  height:auto}

#resume section.heading #KITTY svg g path{ -moz-fill:#b9dae0;  -webkit-fill:#b9dae0;  fill:#b9dae0}

#resume section.heading #KITTY svg g#tail{ animation:tailwag 2s infinite}

#resume section.heading #KITTY svg g#front-right-leg{ transform-origin:top center}

#resume section.heading #KITTY:hover #front-right-leg{ animation:swat .5s ease-out}

#resume section.expertise ul li{ list-style:none;  text-align:center;  padding-top:.5rem}
@media screen and (min-width:700px){  #resume section.expertise ul li{ float:left;  width:50%}
 
 #resume section.expertise ul li:first-child, #resume section.expertise ul li:first-child+li{ padding-top:0}
}

#resume section.technical ul{ line-height:1.5rem}
@media screen and (min-width:510px){  #resume section.technical ul{ -webkit-column-count:2;  -moz-column-count:2;  column-count:2}
}
@media screen and (min-width:810px){  #resume section.technical ul{ width:70%;  margin:0 auto;  -webkit-column-gap:10rem;  -moz-column-gap:10rem;  column-gap:10rem}
}

#resume section.technical ul >li >strong{ font-size:1.4rem}

#resume section.technical ul >li >span{ white-space:nowrap}

#resume section.technical ul dl{ padding-left:.65rem}

#resume section.technical ul dt{ display:inline;  border-bottom:1px solid currentColor}

#resume section.technical ul dd{ float:left; width: 30%;}

#resume section.technical ul.tech-css3 dd{ width:50%}

#resume section.technical ul.tech-js dd{ width:33.33333%}

#resume section.experience dt, #resume section.education dt{ margin-bottom:.25rem}

#resume section.experience dt strong, #resume section.education dt strong{ display:inline;  border-bottom:1px solid currentColor;  margin-right:.15rem;  font-size:1.2rem;  line-height:1.4rem}

#resume section.experience dt strong small, #resume section.education dt strong small{ font-size:1.2rem}

#resume section.experience dt span, #resume section.education dt span{ white-space:nowrap;  padding-top:.25rem;  float:right}

#resume section.experience dd, #resume section.education dd{ line-height:1.2rem;  padding-bottom:.15rem;  padding-left:.5rem}

#resume section.hobbies li{ font-size:1.2rem}

#resume section.references li{ padding-bottom:.5rem}

#resume section.references strong{ font-size:1.2rem}

#resume section.references strong span{ display:inline}

#resume section h1{ font-size:2.2rem;  line-height:2.2rem;  margin-bottom:.5rem;  font-weight:700;  text-shadow:0px 1px 1px rgba(51,51,51,0.02)}

#resume section h3{ font-size:1.6rem;  line-height:1.6rem;  margin-bottom:.5rem;  font-weight:700;  text-align:center;  display:inline;  border-bottom:1px solid #000;  margin-left:-.5rem;  margin-right:-.5rem}

#resume section dl{ padding-bottom:.5rem}