@charset "UTF-8";
/****** ESTILOS GENERALES *******/
/*el main maqueta está al ultimo*/
@font-face {
  font-family: 'OpenSans-Light';
  font-style: normal;
  font-weight: 300;
  src: url("fonts/open-sans-v15-latin-300.eot");
  /* IE9 Compat Modes */
  src: local("Open Sans Light"), local("OpenSans-Light"), url("fonts/open-sans-v15-latin-300.eot?#iefix") format("embedded-opentype"), url("fonts/open-sans-v15-latin-300.woff2") format("woff2"), url("fonts/open-sans-v15-latin-300.woff") format("woff"), url("fonts/open-sans-v15-latin-300.ttf") format("truetype"), url("fonts/open-sans-v15-latin-300.svg#OpenSans") format("svg");
  /* Legacy iOS */ }

@font-face {
  font-family: 'OpenSans-Regular';
  font-style: normal;
  font-weight: 300;
  src: url("fonts/open-sans-v15-latin-regular.eot");
  src: url("fonts/open-sans-v15-latin-regular?#iefix") format("embedded-opentype"), url("fonts/open-sans-v15-latin-regular.woff2") format("woff2"), url("fonts/open-sans-v15-latin-regular.woff") format("woff"), url("fonts/open-sans-v15-latin-regular.ttf") format("truetype"), url("fonts/open-sans-v15-latin-regular.svg#OpenSans-Regular") format("svg"); }

@font-face {
  font-family: 'OpenSans-Bold';
  font-style: normal;
  font-weight: 700;
  src: url("fonts/open-sans-v15-latin-700.eot");
  src: url("fonts/open-sans-v15-latin-700.eot?#iefix") format("embedded-opentype"), url("fonts/open-sans-v15-latin-700.woff2") format("woff2"), url("fonts/open-sans-v15-latin-700.woff") format("woff"), url("fonts/open-sans-v15-latin-700.ttf") format("truetype"), url("fonts/open-sans-v15-latin-700.svg#NotoSans-Regular") format("svg"); }

/*$main: #B330FE; //skin morado*/
/*$main: #FF0052; //skin rosa*/
/********BG*********/
body {
  font-family: "OpenSans-Light"; }

h1 {
  color: white;
  font-size: 28px;
  font-family: "OpenSans-Bold"; }
  @media (min-width: 992px) {
    h1 {
      font-size: 54px; } }

h2 {
  color: #43485c;
  border-bottom: 1px solid #e5ebf2;
  font-size: 24px;
  font-family: "OpenSans-Bold";
  padding-bottom: 30px;
  padding-top: 30px;
  text-align: center;
  text-transform: uppercase; }

h3 {
  color: #3c4258;
  font-size: 18px;
  font-family: "OpenSans-Bold"; }

h4 {
  font-size: 16px;
  font-family: "OpenSans-Bold"; }

h5 {
  font-family: "OpenSans-Bold";
  color: #3c4258; }

.wrapper-info {
  overflow-x: hidden; }

section:not(:first-child) {
  padding: 0 15px;
  margin: 10px auto; }
  @media (min-width: 992px) {
    section:not(:first-child) {
      margin: 30px 0 50px; } }

.color-main {
  color: #00FCFF; }

.content-title {
  margin-bottom: 50px; }

.wrap-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 1px;
  border-radius: 3px;
  background: #00FCFF;
  max-width: 180px;
  min-width: 180px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  transition: .5s;
  background-color: #00FCFF;
  color: #000;
  font-family: "OpenSans-Regular"; }
  .wrap-btn a {
    color: #000;
    font-family: "OpenSans-Regular";
    border: 0;
    width: 100%;
    position: relative;
    z-index: 1;
    background-color: transparent;
    transition: .5s; }
    .wrap-btn a:hover {
      text-decoration: none;
      color: #fff; }
  .wrap-btn:after {
    position: absolute;
    transition: .5s;
    content: '';
    width: 0;
    bottom: 0;
    background: #000;
    height: 120%;
    transform: skewX(15deg);
    z-index: 0; }
  .wrap-btn:hover a {
    color: #fff; }

.button:hover:after {
  left: -10%;
  width: 120%; }

i {
  color: black; }

.bg-gray {
  background-color: #f9fbfd; }

footer {
  height: 100px; }
  footer p {
    padding: 40px 0;
    color: #00FCFF;
    font-family: "OpenSans-Bold";
    text-align: center;
    background-color: #000;
    margin-bottom: 0; }

/**********Estilos tema************/
header {
  position: fixed;
  width: 100%;
  height: 55px;
  top: 0;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
  background-color: #000;
  z-index: 1; }
  header nav a.link-menu {
    font-family: "OpenSans-Bold";
    color: #6f6f6f !important;
    font-size: 15px; }
  header nav .logo-name a.name {
    color: #00FCFF;
    font-family: "OpenSans-Bold";
    font-size: 18px; }
  @media (min-width: 992px) {
    header nav .logo-name {
      flex: 1; } }
  header nav .menu-items {
    position: absolute;
    top: 54px;
    width: 100%;
    left: 0;
    padding-left: 15px; }
  header nav .menu-mobile {
    display: block;
    position: relative;
    background-color: transparent;
    border: 1px solid;
    border-color: #00FCFF;
    border-radius: 4px;
    color: #00FCFF;
    padding: 10px;
    top: 0;
    display: inline-block;
    margin-right: 0; }
    header nav .menu-mobile i {
      color: #00FCFF; }
  header .menu {
    background-color: #000;
    color: #fff; }
  @media (min-width: 768px) {
    header nav.navbar {
      position: inherit; }
      header nav.navbar ul {
        margin: 0 30px; } }
  @media (min-width: 992px) {
    header {
      height: 80px; }
      header nav {
        position: relative; }
        header nav .menu-mobile {
          display: none; }
        header nav .menu-items,
        header nav .logo-name {
          flex: 1; }
        header nav .menu-items {
          position: relative;
          top: 0; } }

section.hero {
  position: relative;
  height: 300px; }
  section.hero:before {
    position: absolute;
    content: " ";
    top: 0;
    left: 0;
    /*background: rgba(31, 44, 108, .65);*/
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%; }
  section.hero .absolute-center {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%); }
  section.hero p {
    color: #fff; }
  section.hero .profesion {
    font-size: 16px;
    font-family: "OpenSans-Regular";
    margin: 20px auto; }
    @media (min-width: 992px) {
      section.hero .profesion {
        font-size: 20px; } }
  section.hero .button {
    font-family: "OpenSans-Light";
    cursor: pointer; }
  section.hero .wrap-btn:hover:after {
    left: -10%;
    width: 120%; }
  @media (min-width: 992px) {
    section.hero.hero {
      height: 520px; }
    section.hero .absolute-center {
      width: 60%; } }

section.about-me .photo {
  position: relative; }
  section.about-me .photo:before {
    position: absolute;
    content: " ";
    top: 0;
    width: 100%;
    height: 100%;
    /* background: rgba(31, 44, 108, .3);*/
    background: rgba(0, 0, 0, 0.5); }

section.about-me .description p {
  font-family: "OpenSans-Regular";
  font-size: 16px; }

section.formacion {
  background-color: #f9fbfd;
  padding: 15px; }
  section.formacion .line-time-education {
    margin-bottom: 30px; }
    section.formacion .line-time-education .wrap-education {
      padding: 15px 0; }
      section.formacion .line-time-education .wrap-education p.city {
        margin-bottom: 0;
        font-size: 12px; }
    section.formacion .line-time-education .time-line .circle {
      color: #00FCFF; }
    section.formacion .line-time-education .time-line .single-time {
      display: inline-block;
      background: #b2c1ce;
      height: 1px;
      width: 95%;
      margin-left: 5%; }

section.skills .skills-p {
  height: 8px;
  margin: 15px 0; }
  section.skills .skills-p .progress-bar {
    background-color: #00FCFF; }

section.experience .timeline {
  position: relative; }
  section.experience .timeline:before {
    content: "";
    width: 2px;
    height: 81%;
    background-color: #b2c1ce;
    position: absolute;
    left: 7px; }
  section.experience .timeline i {
    position: absolute;
    left: 0;
    color: #00FCFF; }

section.experience .single-timeline {
  margin-left: 30px;
  margin-bottom: 35px; }
  section.experience .single-timeline p.date {
    color: #3c4258;
    font-size: 16px;
    font-family: "OpenSans-Bold";
    letter-spacing: 1px; }
  section.experience .single-timeline p.cargo {
    color: #6f6f6f;
    font-size: 18px;
    font-family: "OpenSans-Regular";
    margin-bottom: 0; }
  section.experience .single-timeline p.city {
    font-size: 12px; }
  section.experience .single-timeline p.empresa {
    color: #3c4258;
    font-family: "OpenSans-Regular";
    margin-bottom: 0; }
  section.experience .single-timeline p.desc {
    color: #999fb3;
    font-family: "OpenSans-Regular";
    font-size: 17px; }

section.contact-me form {
  padding: 20px 0; }
  section.contact-me form input,
  section.contact-me form textarea {
    padding: 25px;
    font-size: 14px;
    color: #999fb3;
    font-family: "OpenSans-Regular";
    border: 1px solid #fff; }
  section.contact-me form button {
    background-color: #00FCFF;
    width: 100%;
    font-family: "OpenSans-Bold";
    padding: 15px 0;
    font-size: 16px;
    letter-spacing: 1px; }
    section.contact-me form button:hover {
      color: #fff; }

section.contact-me .datos {
  padding: 20px 0; }
  section.contact-me .datos p {
    margin-bottom: 0; }
    section.contact-me .datos p.name {
      font-family: 18px;
      letter-spacing: 1px;
      font-family: "OpenSans-Bold";
      color: #999fb3; }
  section.contact-me .datos .info {
    font-family: "OpenSans-Bold";
    color: #999fb3; }
  section.contact-me .datos .info2 {
    font-family: "OpenSans-Regular";
    color: #6f6f6f;
    margin-bottom: 10px; }

section.contact-me .rrss ul {
  list-style: none;
  padding-left: 0; }
  section.contact-me .rrss ul li,
  section.contact-me .rrss ul a {
    color: #00FCFF; }
    section.contact-me .rrss ul li:hover,
    section.contact-me .rrss ul a:hover {
      color: #6f6f6f; }
    section.contact-me .rrss ul li i,
    section.contact-me .rrss ul a i {
      font-size: 32px; }

@media (min-width: 768px) {
  section.contact-me form {
    text-align: center; }
    section.contact-me form button {
      width: 300px;
      max-width: 300px;
      font-size: 18px;
      margin: auto; }
  section.contact-me .datos {
    text-align: center; }
    section.contact-me .datos .info2 {
      margin-bottom: 16px; }
  section.contact-me .rrss ul li {
    margin: 0 5px; } }