@charset "UTF-8";

  .bgr {background-color: red;}
  .bgb {background-color: blue;}
  .bga {background-color: aqua;}
  .bgbr {background-color: brown;}
  .bgor {background-color: orange;}
  .bggr {background-color: grey;}

  /*back to top styles*/

  #back-to-top {
    /*height: 50px;*/
    /*width: 50px;*/
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9990;
    color: rgba(0,0,0, 0.2);
    cursor: pointer;
  }

  #back-to-top:hover{
    color: #fff;
  }

  .svg-inline--fa.fa-stack-2x {
    width: inherit;
  }

  
  /* General style */

  * {

    /*padding: 0;
    margin: 0;*/
    box-sizing: border-box;
  }

  html{
    scroll-behavior: smooth;
  }

  body {
    background: linear-gradient(55deg, #4E75B9 30%, #5CBF98 90%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column wrap;
    min-height: 100vh;
/*    width: 100vw;*/
    margin: 0;
    padding: 12vh 100px;
    font-family: "Source Sans Pro", arial, sans-serif;
    font-weight: 300;
    color: #333;
    box-sizing: border-box;
  }

  a {
    text-decoration: none;
    color: #fff;
  }

  .timeline {
    width: 100%;
    max-width: 800px;
    background: #fff;
    padding: 100px 50px;
    position: relative;
    box-shadow: 0.5rem 0.5rem 2rem 0 rgba(0, 0, 0, 0.2);
  }

  .timeline:before {
    content: "";
    position: absolute;
    top: 0px;
    left: calc(33% + 15px);
    bottom: 0px;
    width: 4px;
    background: #ddd;
  }

  .timeline:after {
    content: "";
    display: table;
    clear: both;
  }

  .entry {
    clear: both;
    text-align: left;
    position: relative;
  }

  .entry .title {
    margin-bottom: 0.5em;
    float: left;
    width: 33%;
    padding-right: 30px;
    text-align: right;
    position: relative;
  }

  .entry .title:before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border: 4px solid salmon;
    background-color: #fff;
    border-radius: 100%;
    top: 15%;
    right: -8px;
    z-index: 99;
  }

  .entry .title h3 {
    margin: 0;
    font-size: 120%;
  }

  .entry .title p {
    margin: 0;
    font-size: 100%;
  }

  .entry .body {
    margin: 0 0 3em;
    float: right;
    width: 66%;
    padding-left: 30px;
  }

  .entry .body p {
    line-height: 1.4em;
  }

  .entry .body p {
    margin-top: 0;
    font-weight: 400;
  }

  .entry .body ul {
/*    color: #515A5A;*/
    color: #17A589;
    padding-left: 0;
    list-style-type: none;
    font-weight: 400;
  }

  .entry .body ul li:before {
    content: "–";
    margin-right: 0.5em;
  }

  

  .presentacion_head {

    background: #fff;
    color: #fff;

    background-image: url("../../img/fondos/fondo_01.jpg");
    background-position: 40% 0 ;
    width: 100%;
    max-width: 800px;
    min-height: 150px;

    
    position: relative;
    box-shadow: 0.5rem 0.5rem 2rem 0 rgba(0, 0, 0, 0.2);
    margin-bottom: 0px;

    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-flow: wrap;
  }

  .presentacion_head img{
    width: 200px;
    border-radius: 50%;
    border: solid 3px #fff;

    margin: 20px 50px;
  }

  .presentacion_head .datos p {
    font-size: 24pt;
    font-weight: 400;
    
    margin: 20px 0px;
  }

  .datos_contacto{
    font-size: 32pt;
    font-weight: 200;
  }

  .datos_contacto .info {
    font-size: 10pt;
    font-weight: 300;

    margin: 0px 15px;
    text-decoration: none;
   
    padding: 0px;
    margin: 0px;
  }

  .datos_contacto .icon {
    margin-right: 10px;
  }

  .datos_cont {
    display: flex;
    flex-direction: column;
  }

  .presentacion_head nav {
    width: 100%;
    font-size: 10pt;
    font-weight: 400;

    padding-top: 35px;
  }

  .presentacion_head nav ul {
    
    text-decoration: none;
    list-style: none;

    display: flex;
    justify-content: space-around;
    align-content: center;

    padding: 0;
  }

  .presentacion {
    width: 100%;
    max-width: 800px;
    min-height: 450px;
    background: #fff;
    position: relative;
    box-shadow: 0.5rem 0.5rem 2rem 0 rgba(0, 0, 0, 0.2);
    margin-bottom: 0px;

    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-flow: column wrap;
  }

  

  .presentacion .body .datos_left .icon {
    margin-right: 10px;
    color: #2874A6;
  }

  .presentacion .body {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
    margin: 20px 0px;
  }

  .presentacion .body .datos_left {
    width: 30%;
    padding: 0px 20px;

    font-weight: 400;
  }

  .presentacion .body .datos_left a {
    color: #333;
  }

  .presentacion .body .datos_right {
    width: 70%;
    padding: 0px 20px;
  }

  .icon_social img {
    height: 20px;
    width: auto;
    margin: 0px 10px;
    border-radius: 0px;
  }

  .datos_right h2,
  .habilidades_cont h2 {
    margin: 10px 0px;
    color: #2874A6;
  }

  .datos_right hr,
  .habilidades_cont hr {
    border: solid 1px #e2e2e2;
  }

  .competencias,
  .idiomas,
  .habilidades_cont {
    font-weight: 400;
/*    margin-bottom: 25px;*/
    margin: 15px;
  }

  .competencias .row,
  .idiomas .row,
  .habilidades_cont .row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;

    margin-bottom: 15px;
  }

  .competencias .rangedot,
  .idiomas .rangedot,
  .habilidades_cont .rangedot {
    display: flex;
  }

  .competencias .rangedot span,
  .idiomas .rangedot span,
  .habilidades_cont .rangedot span {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background-color: #AED6F1;

    margin: 0px 2px;
  }

  .competencias .rangedot span.select,
  .idiomas .rangedot span.select,
  .habilidades_cont .rangedot span.select {
    background-color: #404C84;
  }

  .habilidades_cont {
    width: 100%;
    max-width: 800px;
    min-height: 450px;
    background: #fff;
    padding: 20px 50px;
    position: relative;
    box-shadow: 0.5rem 0.5rem 2rem 0 rgba(0, 0, 0, 0.2);
    margin: 0;

    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
  }

  .habilidades .row ul {
    list-style-type: square;
    margin: 0;
  }

  .habilidades .row ul li::marker {
    color: #404C84;
    font-size: 1.5rem;
  }