

.resume .resume-block {
    position   : relative;
    width: 1024px;
    border-top : 0px dotted #d7d7d7;
    margin     : 0px Auto;
    padding-top: 35px;
}

.resume .resume-block:before,
.resume .resume-block:after {
    content: " ";
    display: table;
}

.resume .resume-block:after {
    clear: both;
}

@media (max-width: 767px) {
    .resume .resume-block {
        padding-top: 20px;
        margin     : 5px 0 10px 0;
    }
}

.resume .resume-block .resume-education--desktop,
.resume .resume-block .resume-jobs--desktop {
    display   : block;
    margin-top: 30px;
}

@media (max-width: 767px) {

    .resume .resume-block .resume-education--desktop,
    .resume .resume-block .resume-jobs--desktop {
        display: none;
    }
}

.resume .resume-block .resume-education--mobile,
.resume .resume-block .resume-jobs--mobile {
    display: none;
}

@media (max-width: 767px) {

    .resume .resume-block .resume-education--mobile,
    .resume .resume-block .resume-jobs--mobile {
        display: block;
        margin : 30px 0;
    }
}

.resume .resume-block .resume-skills {
    display: block;
    float     : left;
    text-align: left;
    margin-right: -100px;
}

.resume .resume-block .resume-skills ul {
    padding: 0px;
    margin : 27px 0 0 0;
}

.resume .resume-block .resume-skills ul li {
    list-style-type: none;
    text-align     : right;
    height         : 17px;
    margin         : 0 10px 0 0;
    padding-right  : 10px;
    font-style     : italic;
    font-family    : Georgia;
    font-weight    : bold;
    font-size      : 11px;
    background     : url("/images/about/dash.jpg") no-repeat 100% 50%;
}

@media (max-width: 991px) {
    .resume .resume-block .resume-skills ul li {
        font-size: 2em;
    }
}

.resume .resume-block .resume-jobs-window {
    background-color: #FFFFFF;
    position        : relative;
    z-index         : 0;
}

.resume .resume-block .resume-jobs-window .resume-jobs-wrapper {
    overflow : hidden;
    position : relative;
    max-width: 1040px;
    height   : 470px;
}

.resume .resume-block .resume-jobs-window .resume-jobs-wrapper .next_container,
.resume .resume-block .resume-jobs-window .resume-jobs-wrapper .prev_container {
    z-index         : 200;
    width           : 100px;
    height          : 480px;
    background-color: rgba(255, 255, 255, 0.8);
    position        : absolute;
    top             : 0px;
    right           : 0px;
}

.resume .resume-block .resume-jobs-window .resume-jobs-wrapper .next_container .next,
.resume .resume-block .resume-jobs-window .resume-jobs-wrapper .prev_container .next,
.resume .resume-block .resume-jobs-window .resume-jobs-wrapper .prev_container .previous {
    z-index: 400;
    padding: 228px 20px 0 0px;
    float  : right;
}

.resume .resume-block .resume-jobs-window .resume-jobs-wrapper .next_container .next i,
.resume .resume-block .resume-jobs-window .resume-jobs-wrapper .prev_container .next i,
.resume .resume-block .resume-jobs-window .resume-jobs-wrapper .prev_container .previous i {
    cursor   : pointer;
    font-size: 40px;
}

.resume .resume-block .resume-jobs-window .resume-jobs-wrapper .prev_container {
    background-color: rgba(255, 255, 255, 0.8);
    display         : none;
    left            : 0px;
}

.resume .resume-block .resume-jobs-window .resume-jobs-wrapper .prev_container .previous {
    padding: 228px 0px 0 20px;
    float  : left;
}

.resume .resume-block .resume-jobs-window .resume-jobs-wrapper .resume-jobs-container {
    left    : 0;
    position: absolute;
    top     : 0;
    z-index : 100;
}

.resume .resume-block .resume-jobs-window .resume-jobs-wrapper .resume-jobs-container .resume-jobs-slide {
    width: 1200px;
}

.resume .resume-block .resume-jobs-window .resume-jobs-wrapper .resume-jobs-container .resume-jobs-slide .table-row {
    width: auto;
}

.resume .resume-block .resume-jobs-window .resume-jobs-wrapper .resume-jobs-container .resume-jobs-slide .table-row .table-header,
.resume .resume-block .resume-jobs-window .resume-jobs-wrapper .resume-jobs-container .resume-jobs-slide .table-row .table-data {
    width: 16%;
}

figure {
    margin         : 0px auto;
    display        : flex;
    flex-direction : row;
    justify-content: center;
    flex-wrap      : nowrap;
    align-content  : center;
    align-items    : flex-start;
}

@media (max-width: 767px) {
    figure {
        flex-direction: column;
    }
}

figure p {
    position   : absolute;
    top        : 75px;
    left       : 0px;
    width      : 100%;
    text-align : center;
    font-family: "Archer-Book", Georgia, Serif;
    color      : #000;
    font-size  : 10px;
    z-index    : 100;
    padding    : 0px;
    margin     : 0px;
}

figure .bar {
    display       : table-cell;
    vertical-align: top;
    padding       : 0px;
    font-style    : italic;
    font-size     : 11px;
    text-align    : center;
    z-index       : 300;
}

figure .bar .graph-header {
    position: absolute;
    top     : 73px;
    height  : 18px;
    left    : 0px;
    right   : 0px;
}

figure>div {
    margin-top: 25px;
    font-size : 12px;
    position  : relative;
}

@media (max-width: 767px) {
    figure>div {
        height: auto;
        width: 69%;
        margin-left: 106px;
    }
}

figure>div.frontend .bar {
    width: 14%;
}

figure>div.frontend .bar .graph-header {
    background-color: #f77c7f;
}

figure>div.frontend .bar .graph-header.dark {
    border-right: 15px solid #ff3f18;
}

figure>div.programming .bar {
    width: 25%;
}

figure>div.programming .bar .graph-header {
    background-color: #fd835e;
}

figure>div.programming .bar .graph-header.dark {
    border-right: 15px solid #ffb317;
}

figure>div.design .bar {
    width: 25%;
}

figure>div.design .bar .graph-header {
    background-color: #ffdd4d;
}

figure>div.design .bar .graph-header.dark {
    border-right: 15px solid #c1e31a;
}
figure>div.tecnologia .bar {
    width: 25%;
}

figure>div.tecnologia .bar .graph-header {
    background-color: #89fc98;
}

figure>div.tecnologia .bar .graph-header.dark {
    border-right: 15px solid #c9e24b;
}

figure>div.additional .bar {
    width: 50%;
}

figure>div.additional .bar .graph-header {
    background-color: #26c6d6;
}

figure>div.additional .bar .graph-header.dark {
    border-right: 15px solid #4fabec;
}

figure>div .beginner {
    height          : 98px;
    width           : 8px;
    margin          : 0 auto;
    border          : 0px;
    text-align      : center;
    position        : relative;
    background-color: #26c6d6;
    background      : url("http://jorgeasarria.com/images/graph_sprite.png") -75px 0px no-repeat;
}

figure>div .beginner.alt {
    height: 115px;
}

figure>div .beginner.alt div {
    position: absolute;
    bottom  : 0px;
    left    : 3px;
}

figure>div .intermediate {
    height    : 98px;
    width     : 8px;
    margin    : 0 auto;
    border    : 0px;
    text-align: center;
    position  : relative;
    background: url("http://jorgeasarria.com/images/graph_sprite.png") -50px 0px no-repeat;
}

figure>div .intermediate.alt {
    height: 115px;
}

figure>div .intermediate.alt div {
    position: absolute;
    bottom  : 0px;
    left    : 3px;
}

figure>div .advanced {
    height    : 98px;
    width     : 8px;
    margin    : 0 auto;
    border    : 0px;
    text-align: center;
    position  : relative;
    background: url("http://jorgeasarria.com/images/graph_sprite.png") -25px 0px no-repeat;
}

figure>div .advanced.alt {
    height          : 115px;
}

figure>div .advanced.alt div {
    position: absolute;
    bottom  : 0px;
    left    : 3px;  

}

figure>div .expert {
    height    : 98px;
    width     : 8px;
    margin    : 0 auto;
    border    : 0px;
    text-align: center;
    position  : relative;
    background: url("http://jorgeasarria.com/images/graph_sprite.png") 0px 0px no-repeat;
}

figure>div .expert.alt {
    height          : 115px;
}

figure>div .expert.alt div {
    position: absolute;
    bottom  : 0px;
    left    : 3px;
}

.social {
    display        : flex;
    flex-direction : row;
    justify-content: center;
    flex-wrap      : nowrap;
    align-content  : center;
    align-items    : stretch;
    width          : 100%;
}

.social .social-item {
    margin-top   : 10px;
    flex-grow    : 0;
    padding      : 5px;
    text-align   : center;
    padding      : 15px;
    border-radius: 100%;
    font-size    : 18px;
    line-height  : 25px;
    width        : 25px;
    margin       : 10px;
}

.social .social-item:hover {
    transition      : .4s;
    background-color: #f9d0d0;
}
