:root {
    --bg-header: #111;
    --bg-left: #e9e9e9;
    --bg-right: #aaa;
    --title-color: #666;
}

.title_flex{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 8px 0 12px
}
.title_flex img	{
    width: 80px;
    height: 80px;
    box-shadow: 0 0 0 4px var(--bg-header);
    margin-right: 20px;
}

.text-center{
    text-align: center;
}

.header{
    position: relative;
}

.header h4{
    margin-top: 6px;
    margin-bottom: 1px;
}

.header .work-position{
    display: block;
    font-size: 1.25em;
}

.header-div{
    margin-top: -100px;
    padding-top: 100px;
    position: relative;
    background-color: var(--bg-header);
    color: #fff;
    padding-bottom: 6px;
}

.header-div i.radial{
    --bg-radius: 56%;
    background-image: radial-gradient(#fff 0, #fff var(--bg-radius), var(--bg-header) var(--bg-radius), var(--bg-header) 100%)
}

.header-div i.square{
    border: none;
    background-color: #fff !important;
    --bg-porcentaje: 14%;
    --bg-porcentaje-2: 5%;
    background:
    linear-gradient(0deg, var(--bg-header) var(--bg-porcentaje), transparent var(--bg-porcentaje)),
    linear-gradient(90deg, var(--bg-header) var(--bg-porcentaje-2), transparent var(--bg-porcentaje-2)),
    linear-gradient(180deg, var(--bg-header) var(--bg-porcentaje), transparent var(--bg-porcentaje)),
    linear-gradient(270deg, var(--bg-header) var(--bg-porcentaje-2), transparent var(--bg-porcentaje-2));
}

.header-div a,
.header-div a:hover,
.header-div a:visited,
.header-div a:active,
.header-div a:link{
    color: #fff;
    text-decoration: none;
}


.bg-left{
    background-color: var(--bg-left);
}


.title{
    color: var(--title-color);
    font-weight: bold;
    font-size: 1.4em;
    letter-spacing: 3px;
    padding-bottom: 8px;
    margin: 8px 16px;
    margin-top: 20px;
    background:
    linear-gradient(90deg, transparent 60px, #fff 60px),
    linear-gradient(0deg, var(--title-color) 4px, transparent 4px);
}
.title:not(:first-child){
    margin-top: 30px;
}


.explain{
    margin: 8px 8px;
    text-align: justify;
    font-size: 0.8em;
}

.bg-left .title{
    background:
    linear-gradient(90deg, transparent 60px, var(--bg-left) 60px),
    linear-gradient(0deg, var(--title-color) 4px, transparent 4px);
}


.row_all_page{
    min-height: 100vh;
}

.row{
    margin:0!important;
}

.experience_container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.experience_container{
    margin-bottom: 30px;
}

.experience_container .banner_container img{
    width: 240px;
}

.experience_container>div:not(:first-child){
    flex-grow: 1;
}

.text-center{
    text-align: center;
}

.git{
    position: relative;
}
.git i{
    position: absolute;
    left: -18.8px;
    top: 3.8px;
}
.git a{
    color: #000;
    font-weight: 600;
    text-decoration: none;
}

@media screen and (max-width:1190px){
    .experience_container{
        flex-direction: column;
        flex-flow: column-reverse;
    }

    .experience_container .banner_container{
        max-width: 80%;
    }

    .experience_container .banner_container img{
        width: 400px;
        max-width: 100%;
    }
}