s*, *:before, *:after {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

html
{
    font-size:100%;
}

body
{
    -webkit-font-smoothing:antialiased;
    color:#242424;
    font-family:"Libre Franklin", serif;
    font-size:18px;
    font-weight:400;
    line-height:1.4;
    text-rendering:optimizeLegibility;
}

.skill-set li:hover
{
    background:#3498db;
}

h1
{
    color:rgba(0,0,0,.75);
}

.wrapper
{
    height:100%;
}

.left
{
    background-color:rgba(0,0,0,.025);
    border-right:1px solid rgba(0,0,0,.05);
    float:right;
    height:100%;
    margin-left:-1px;
    min-width:256px;
    position:fixed;
    width:33.33%;
}

.right
{
    float:right;
    height:100%;
    position:relative;
    width:66.66%;
}


.name-hero
{
    background:rgba(0,0,0,.001);
    bottom:0;
    height:290px;
    left:0;
    margin:auto;
    position:absolute;
    right:0;
    top:0;
    width:85%;
}

.me-img
{
    background:url('assets/img/camcecil.png') no-repeat center center ;
    background-size:125%;
    background-position:0px;
    border-radius:100%;
    height:300px;
    margin:0 auto;
    position:relative;
    width:300px;
}

.name-hero h1
{
font-family:"Libre Franklin", sans-serif;
font-size:2.5em;
text-align:center;
letter-spacing: -0.05em;
}

.name-hero h1 em
{
color:rgba(0,0,0,.3);
font-style:normal;
font-weight:700;
}

.name-hero p
{
color:rgba(0,0,0,.75);
font-size:1em;
line-height:1.5;
margin:0 8px 0 0;
text-align:center;
}

.name-hero .name-text
{
margin:0 auto;
width:85%;
}

.name-hero .name-text a
{
    color:rgba(0,0,0,.75);
    text-decoration: none;
}

a:hover
{
    color: #3498db;
    text-decoration: underline;
    cursor: pointer;
}

.inner
{
margin:0 auto;
max-width:975px;
padding:3em;
}

.inner h1
{
font-size:1.75em;
}

.inner .hi
{
    font-size: 4em;
    font-weight: 900;
    color: #2986cc;
    line-height: 0.05em;
}

.inner p
{
    color:rgba(0,0,0,.75);
}

.inner p em
{
    color:rgba(0,0,0,1);
    font-style:normal;
}

.inner section
{
    margin:30px auto;
}

ul
{
    list-style-type:none;
    margin-top:-10px;

    padding:0;
}

ul.bullet-list
{
    list-style-type: disc;
    padding-left:20px;
}

.skill-set li
{
    background:rgba(0,0,0,.75);
    border-radius:5px;
    color:#FFF;
    display:inline-block;
    list-style:none;
    margin:15px 15px 0 0;
    padding:10px;
    text-align:justify;
}

@media screen and (max-width: 48em) {
.right,.left
{
    float:none;
    position:relative !important;
    width:100%;
    min-height:500px;
}
.handmade {
    text-align:center !important;
    margin-top:0px !important;
}

@media screen and (max-width: 75em) {
body
{ font-size:16px;}
}

@media screen and (max-width: 60em) {
body
{ font-size:14px;}
}
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.handmade {
text-align:right;
margin-top:100px;
}
.handmade em {
font-family: 'Shadows Into Light', cursive;
font-size: 1.25em;
margin-left:5px;
}