@font-face {
  font-family: 'ARALJO';
  src:  url('ARALJO.eot?g7g9ox');
  src:  url('ARALJO.eot?g7g9ox#iefix') format('embedded-opentype'),
    url('ARALJO.ttf?g7g9ox') format('truetype'),
    url('ARALJO.woff?g7g9ox') format('woff'),
    url('ARALJO.svg?g7g9ox#ARALJO') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="fab-fa-"], [class*=" fab-fa-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'ARALJO' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fab-fa-vue-dot-js:before {
  content: "\e902";
  color: #4fc08d;
}
.fab-fa-javascript:before {
  content: "\e908";
  color: #f7df1e;
}
.fab-fa-gmail:before {
  content: "\e90b";
  color: #d14836;
}
.fab-fa-android:before {
  content: "\e90c";
  color: #a4c639;
}
.fab-fa-java:before {
  content: "\e910";
  color: #007396;
}
.fab-fa-github:before {
  content: "\e911";
  color: #1fae8c;
}
.fab-fa-microsoftonedrive:before {
  content: "\e913";
  color: #094ab2;
}
.fab-fa-npm:before {
  content: "\e914";
  color: #cb3837;
}
.fab-fa-angular:before {
  content: "\e915";
  color: #dd0031;
}
.fab-fa-instagram:before {
  content: "\e917";
  color: #e4405f;
}
.fab-fa-html5:before {
  content: "\e91c";
  color: #e34f26;
}
.fab-fa-facebook:before {
  content: "\e921";
  color: #3b5998;
}
.fab-fa-whatsapp:before {
  content: "\e924";
  color: #25d366;
}
.fab-fa-php:before {
  content: "\e927";
  color: #777bb4;
}
.fab-fa-microsoftoutlook:before {
  content: "\e92a";
  color: #0072c6;
}
.fab-fa-youtube:before {
  content: "\e92c";
  color: #f00;
}
.fab-fa-linkedin:before {
  content: "\e930";
  color: #0077b5;
}
.fab-fa-react:before {
  content: "\e931";
  color: #61dafb;
}
.fab-fa-twitter:before {
  content: "\e932";
  color: #1da1f2;
}
.fab-fa-swift:before {
  content: "\e933";
  color: #fa7343;
}
.fab-fa-css3:before {
  content: "\e934";
  color: #1572b6;
}
.fab-fa-soundcloud:before {
  content: "\e935";
  color: #f30;
}
.fab-fa-messenger:before {
  content: "\e936";
  color: #0084ff;
}
.fab-fa-skype:before {
  content: "\e938";
  color: #00aff0;
}
.fab-fa-sublimetext:before {
  content: "\e93e";
}
.fab-fa-nginx:before {
  content: "\e93f";
  color: #269539;
}
.fab-fa-apple:before {
  content: "\e940";
  color: #999;
}
.fab-fa-arrow-outline-down:before {
  content: "\e943";
}
.fab-fa-close:before {
  content: "\e901";
}
.fab-fa-menu:before {
  content: "\e900";
}














.loader_bg {
    position: fixed;
    z-index: 9999999;
    background: #ffffff;
    width: 100%;
    height: 100%;
}

.loader {
    border: 0 solid transparent;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    position: absolute;
    top: calc(50vh - 75px);
    left: calc(50vw - 75px);
}

.loader:before, .loader:after {
    content: '';
    border: 1em solid #F24259;
    border-radius: 50%;
    width: inherit;
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    animation: loader 2s linear infinite;
    opacity: 0;
}

.loader:before {
    animation-delay: .5s;
}


@keyframes loader {
    0% {
        transform: scale(0);
        opacity: 0; }
    50% {
        opacity: 1; }
    100% {
        transform: scale(1);
        opacity: 0; }
}







/* -------------------------------------------- MENU NAV --------------------------------------- */



.menu-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  background-color: #E63946;
  font-family: 'Capriola', sans-serif;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  align-items: center;
  border-bottom:  2px solid #1b2127;
  height: 60px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  z-index: 4;
  position: fixed;
}


.imagen-nav {
  display: flex;
  width: 45px;
  height: auto;
  border:1px solid white;
  border-radius: 50%;
}



.logocontainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  align-items: center;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0px 60px;
    box-sizing: border-box;
}


.divli {
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  height: auto;
  width: auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  box-sizing: border-box;
}


.divlia {
  display: block;
  height: auto;
  width: auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0 30px;
}


.menu-enlaces {
  display: inline;
  color: white;
  text-decoration: none;
  padding: 0;
  z-index: 3;
}


.menu-enlaces:hover {
  color: #1b2127;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}


.menu-hamburguesa {
  display: none;
  color: white;
  text-decoration: none;
  padding: 0px 40px;
  z-index: 3;
}

.menu-hamburguesa:hover {
  color: #1b2127;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.divlogonavhamburguesa{
  display: none;
}

/* -------------------------------------------- FIN MENU NAV --------------------------------------- */




/* ---------------------------------- CSS PRINCIPAL ------------------------------ */


body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* ---------------------------------- ESTILOS DEL TITULO DE ANIMACION ------------------------------ */
  .cd-intro {
    margin: 0 auto;
    font-size: 15px;
  }

.cd-headline {
  font-size: 25px;
  line-height: 1.2;
}

.cd-words-wrapper b {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
  left: 0;
  top: 0;
}

.cd-words-wrapper b.is-visible {
  position: relative;
}

.cd-headline.clip .cd-words-wrapper {
  overflow: hidden;
  vertical-align: top;
}

.cd-headline.clip b {
  opacity: 0;
}
.cd-headline.clip b.is-visible {
  opacity: 1;
}

/* ----------------------------------  FIN ESTILOS DEL TITULO DE ANIMACION ------------------------------ */


/* -------------------------------------------- MENU PRINCIPAL --------------------------------------- */

.contmenu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  background-image: url('../images/fondo.jpg');
  background-position: center;
  background-attachment: fixed;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 100vh;
  width: 100vw;
}



.menu-principal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  text-align: center;
  background-color:rgba(27,33,39,0.9);
  height: 100vh;
  width: 100vw;
  font-family: Capriola, sans-serif;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}



.menu-div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 40%;
  height: auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  z-index: 1;
  -webkit-filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.9));
  filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.9));
  margin-top: 60px;
}



.menu-figure{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: auto;
  height: auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto;
  z-index: 1;
  padding: 25px;
}



.menu-img {
  display: block;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
  width: 200px;
  height: 200px;
  -webkit-box-shadow: 2px 6px 90px 6px #e67d72;
          box-shadow: 2px 6px 90px 6px #e67d72;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 50%;
  border: 2px solid #e67d72;
  z-index: 1;
}



.menu-titulo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  height: auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #cb3234;
  font-family: 'Righteous', sans-serif;
  text-align: center;
  font-size: 45px;
  letter-spacing: 3px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0 auto;
  z-index: 1;
  padding: 10px;
}

.menu-description {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 400px;
  height: auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #f8beb6;
  font-family: 'Poppins' ,serif;
  text-align: center;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  z-index: 1;
  padding: 10px;
}



.menu-frase {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  height: auto;
  margin: 0 auto;
  color: #e67d72;
  font-family: 'Lobster Two' ,serif;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px;
  z-index: 1;
}




.menu-autor {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  height: auto;
  color: #fddeda;
  font-family:'Fredoka One' ,serif;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 15px;
  margin: 0 auto;
  padding: 10px;
  z-index: 1;
}

.ancla-sobremi {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: auto;
  height: auto;
  margin: 0 auto;
  color: #e67d72;
  font-family: 'Lobster Two' ,serif;
  text-align: center;
  font-size: 25px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 1;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  text-decoration: none;
  padding:40px;
}

.ancla-sobremi i:hover {
  color: white;
}


/* -------------------------------------------- FIN MENU PRINCIPAL --------------------------------------- */




/* -------------------------------------------- SOBRE MÍ --------------------------------------- */


#sobremi {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: auto;
  height: 100%;
  margin: 0 auto;
  height: auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;

}

.sobremijuntos{
  height: auto;
  width: 60%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto;
  padding: 10px 0px;
  margin-bottom: 80px;
}

.sobre-mi-div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  height: auto;
  margin: 0 auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px 0px;

}


.titulo-sobre-mi {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  font-family: 'Capriola', sans-serif;
  font-size: 40px;
  border-bottom: 8px solid #d8d8d8;
  font-weight: bold;
  margin: 0 auto;
  margin-top: 100px;
}


.sobremi-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: auto;
  height: auto;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 30px;

}

.parrafo-sobre-mi {
  font-family: 'Poppins',sans-serif;
  font-weight: normal;
  line-height: 35px;
  text-align: justify;
  width: auto;
  height: auto;
  font-weight: normal;
}

.aqui {
  text-decoration: none;
  color: blue;
}

.aqui:hover {
  color: red;
}

.boton-cv {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: auto;
  height: auto;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 50px;
}


.enlace-sobre-mi{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  color: white;
  text-decoration: none;
  padding: 15px 10px;
  font-family: 'Capriola',sans-serif;
  font-weight: normal;
  background-color: #cb3234;
  border-radius: 10px;
  font-size: 15px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;

}

.enlace-sobre-mi:hover {
  background-color: #1b2124;
}



.skill-bar-principal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: auto;
  height: auto;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  margin: 50px 0px;

}

.skillbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  height: auto;
	width: 300px;
	background:#eee;
	border-radius:3px;
  border: 1px solid #1b2124;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 25px 15px;
	-webkit-transition: 0.1s linear;
	-o-transition: 0.1s linear;
	transition: 0.1s linear;
	-webkit-transition-property: width, background-color;
	-o-transition-property: width, background-color;
	transition-property: width, background-color;

}


.encabezado-barra{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  height: auto;

}


.skillbar-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
	width: 48%;
  height: auto;
	font-weight:bold;
	font-size:16px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
	color:#ffffff;
	background:#cb3234;

}

.skill-bar-percent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
	font-size:16px;
  font-weight: bold;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto;
  width: 48%;
	height:auto;
	line-height:35px;
	color:#ffffff;
	color:rgba(0, 0, 0, 0.9);

}


.spanname {
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
	background:rgba(0, 0, 0, 0.1);
	height:auto;
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
	line-height:35px;
}



.skillbar-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
	width: auto;
  height: 20px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
	background: #2ecc71;
  border-radius: 2px;

}



/* -------------------------------------------- FÍN SOBRE MÍ --------------------------------------- */





/* -------------------------------------------- SERVICIOS --------------------------------------- */
.servicios {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  background-image: url("../images/fondo.jpg");
  color: white;
  height: auto;
  width: 100%;
  margin: 0 auto;
  background-position: center;
  background-attachment: fixed;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;

}

.servicios-div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  height: auto;
  width: 100%;
  background-color:rgba(27,33,39,0.9);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto;
}


.container-juntos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 98%;
  height: auto;
  margin: 0 30px;
  padding: 30px;
  margin-bottom: 100px;
}



.servicios-list{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 80%;
  height: auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0 auto;
  margin-top: 100px;
  margin-bottom: 100px;
  line-height: 25px;

}




.servicios-title-div{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  height: auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto;

}

.servicios-title{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  font-family: 'Capriola', sans-serif;
  font-size: 40px;
  border-bottom: 8px solid #d8d8d8;
  font-weight: bold;
  padding: 10px 0px;
}

.servicios-item-juntos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  height: auto;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto;
  margin-top: 50px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;

}

.servicios-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 280px;
  height: 250px;
  margin: 0 auto;
  margin: 5px 12px;
  padding: 10px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.servicios-item:hover {
  background: #cb3234;
  border-radius: 8px;

}

#servicios-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  text-align: center;
  width: 100%;
  height: auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 65px;
  margin: 0 auto;

}

.servicios-description {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  height: auto;
  margin: 0 auto;
  text-align: justify;
}

.h2-description {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  height: auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto;
}





/* -------------------------------------------- CERTIFICACIONES --------------------------------------- */

.certificaciones {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: auto;
  margin: 0 auto;
  height: auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.titulo-certificaciones-div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  text-align: center;
  width: auto;
  height: auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-top: 100px;
}

.titulo-certificaciones {
  font-family: 'Capriola', sans-serif;
  font-size: 40px;
  border-bottom: 8px solid #d8d8d8;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-weight: bold;

}


.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: auto;
  height: auto;
  margin: 0 auto;
  padding: 40px 0px;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;

}

.box {
  display: inline-block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 420px;
  height: 300px;

}

.box:hover {
  background: #1b2124;
}

.certificados {
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: 1px solid #1b2124;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.certificados:hover {
  opacity: 0.8;
  border: 1px double #1b2124;
}

/* -------------------------------------------- FIN CERTIFICACIONES --------------------------------------- */



/* -------------------------------------------- CONTACTO --------------------------------------- */

.contacto {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  background-image: url("../images/fondo.jpg");
  color: #fafafa;
  height: auto;
  width: auto;
  background-position: center;
  background-attachment: fixed;
  text-align: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}


.contacto-div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  height: 100%;
  background-color:rgba(27,33,39,0.9);
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}


.container-juntos-contacto {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 98%;
  height: auto;
  margin: 0 30px;
  padding: 30px;
  margin-bottom: 0px;
  margin-top: 80px;
}



.contacto-title-div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  height: auto;
  margin: 0 auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px 0px;

}

.contacto-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  font-family: 'Capriola', sans-serif;
  font-size: 40px;
  border-bottom: 8px solid #d8d8d8;
  font-weight: bold;
  margin: 0 auto;


}


.datosjuntos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  text-align: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 70%;
  height: auto;
  padding: 40px 0px;
  margin: 0 auto;
}




.secciondatos{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  margin: 0px 10px;
}

.secciontexto {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0px 10px;
}


.divnombre {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 5px;
}


.divemail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 5px;
}


.nombre {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  flex-wrap: wrap;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
}



.email{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  flex-wrap: wrap;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
}




.mensaje-div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  margin: 5px;

}

.mensaje{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  width: 100%;
  height: 250px;

}


.enviarcontacto {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: #cb2127;
  color: white;
  font-weight: bold;
  font-size: 15px;
  padding: 10px;
  border: none;
  margin: 5px;
}


.enviarcontacto:hover {
  background: #2ecc71;
  color: #1b2124;
}


.info-personal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  padding: 10px;
  margin: 5px;
  margin-top: 20px;
}

.iconosjuntos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  height: auto;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}


#socialLinkF {
  text-decoration: none;
  color: #fafafa;
  content: "";
  font-size: 45px;
  padding: 0px 5px;
  width: auto;
  height: auto;
  margin: 10px 5px;
}


#socialLinkF:hover {
  -webkit-filter:drop-shadow(4px 2px 8px #fafafa) opacity(.8);
          filter:drop-shadow(4px 2px 8px #fafafa) opacity(.8);
}


/* -------------------------------------------- FIN CONTACTO --------------------------------------- */


/* -------------------------------------------- FOOTER --------------------------------------- */


.footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  color: white;
  height: 60px;
  width: auto;

  background-color: #E63946;
  text-align: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}


.footer-div-title{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: auto;
  height: auto;
  font-size: 18px;
  font-weight: normal;
}



/* -------------------------------------------- FIN FOOTER --------------------------------------- */



/* ---------------------------------- ESTILOS DE PARTICULAS ------------------------------ */


#particles-js{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* ---------------------------------- FIN ESTILOS DE PARTICULAS ------------------------------ */


.burger-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(0,0,0,.5);
  display: none;
  line-height: 40px;
  text-align: center;
  position: fixed;
  z-index: 14;
  left: 5px;
  top: 5px;
  color: white;
}




/* ---------------------------------- RESPONSIVE DESIGN ------------------------------ */

@media screen and (min-width: 1025px) {


  .logo {
    margin: 0px 10px;
  }

  .divlia {
    margin: 0 20px;
  }


}


 @media screen and (max-width: 1024px) {


     .logo {
       margin: 0px 5px;
     }

     .divlia {
       margin: 0 15px;
       font-size: 12px;
     }


     .cd-headline {
       font-size: 18px;
     }

     .menu-img {
       width: 150px;
       height: 150px;

     }

     .menu-titulo {
       font-size: 35px;
       letter-spacing: 1px;
     }



     .menu-frase {
       font-size: 18px;
     }




     .menu-autor {
       font-size: 7px;
     }

     .ancla-sobremi {
       font-size: 18px;
     }


     #socialLinkF {
       font-size: 35px;
       padding: 0px 2px;
       margin: 10px 2px;
     }





}





@media screen and (max-width: 768px) {


.container {
  width: 100%;
}


.logocontainer {
  padding: 0px 40px;
}



  .menu-hamburguesa {
    display: block;
    position: absolute;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    font-size: 22px;
    z-index: 3;
    height: auto;
    margin: 0 auto;
    padding: 0px;
    right: 40px;
  }

  .logo{
    display: block;
    position: absolute;
    z-index: 3;
    left: 40px;
    margin: 0 auto;
  }


.menu-nav {
  display: flex;
  z-index: 300;
  width: 100%;
  height: 60px;
  position: relative;
  box-sizing: border-box;
  position: fixed;
}


.divli {
  position: fixed;
  background-color: #5B686D;
  top: 60px;
  bottom: 0px;
  height: 100% - 60px;
  opacity: .97;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  z-index: 300;
  right: -100vw;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .4s;
  visibility: visible;

}

.divli.is-active{
  right: 0;

}

.divlogonavhamburguesa {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align:  center;
        -ms-flex-align:  center;
            align-items:  center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: relative;
    z-index: 3;
    margin-top: 20px;
}



.logonavmenu {
    display: block;
    position: relative;
    height: 150px;
    width: 150px;
    padding: 10px;
}


.divlia{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  height: 40px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0px auto;


}

.menu-enlaces {
  color: white;
  display: inline;
  padding: 0;
  font-size: 18px;
  -webkit-filter: drop-shadow(10px 10px 4px rgba(0,0,0,0.9));
  filter: drop-shadow(10px 10px 4px rgba(0,0,0,0.9));
}


.menu-enlaces:hover {
  color: #E63946;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}



.parrafo-sobre-mi {
  font-size: 15px;
}

.parrafo-sobre-mi a {
  font-size: 15px;
}


.skill-bar-principal {
  margin: 10px 0px;

}

.skillbar {

	width: 210px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 25px 5px;
}


.boton-cv {
  margin-top: 20px;
  margin-bottom: 30px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}



#socialLinkF {
  font-size: 22px;
  padding:1px 0px 1px 0px;
  margin: 0 auto;
}


.datosjuntos {
  width: 90%;
  padding: 10px 0px;
}





     .cd-headline {
       font-size: 16px;
     }

     .menu-img {
       width: 120px;
       height: 120px;

     }

     .menu-titulo {
       font-size: 30px;
       letter-spacing: 0px;
     }



     .menu-frase {
       font-size: 16px;
     }


     .menu-autor {
       font-size: 10px;
     }

     .ancla-sobremi {
       font-size: 16px;
     }

     .footer {
       height: 50px;

     }


     .footer-div-title{
       font-size: 12px;
     }

}




@media screen and (max-width: 480px) {


  .menu-div {
    width: 95%;
  }



  .logocontainer {
    padding: 0;
  }



    .menu-hamburguesa {
      right: 20px;
    }

    .logo{
      left: 20px;
    }



  .logonavmenu {
      display: block;
      position: relative;
      height: 120px;
      width: 120px;
      padding: 10px;
  }


  .divlia{
    height: 20px;
  }

  .menu-enlaces {
    padding-bottom: 30px;
    font-size: 14px;
  }


       .cd-headline {
         font-size: 12px;
       }

       .menu-img {
         width: 100px;
         height: 100px;

       }

       .menu-titulo {
         font-size: 25px;
         letter-spacing: 0px;
       }

       .menu-frase {
         font-size: 14px;
       }


       .menu-autor {
         font-size: 8px;
       }

       .ancla-sobremi {
         font-size: 14px;
         padding: 10px;
       }

       .footer {
         height: 40px;

       }


       .footer-div-title{
         font-size: 10px;
       }


.sobremijuntos{
  width: 75%;
}


.titulo-sobre-mi {
  border-bottom: 4px solid #d8d8d8;
  font-size: 28px;
  padding: 8px 0;
  margin-top: 0;
}



.parrafo-sobre-mi {
  line-height: 30px;
}


.boton-cv {
  margin-top: 20px;
  margin-bottom: 30px;
}


.enlace-sobre-mi{
  padding: 10px 10px;
  font-size: 12px;

}


.servicios {
  height: auto;
  width: 100%;
  margin: 0 auto;
}

.servicios-div {
  height: auto;
  width: 100%;
}


.container-juntos {
  margin: 10px 0px;
  padding: 0;
  margin-bottom: 10px;
}

.servicios-list{
  margin-top: 100px;
  margin-bottom: 100px;

}

.servicios-title-div{
  width: auto;
  height: auto;

}

#servicios-icon{
  font-size: 45px;
}

.servicios-title{
  border-bottom: 4px solid #d8d8d8;
  font-size: 28px;
  padding: 8px 0;
}

.contacto-title{
  border-bottom: 4px solid #d8d8d8;
  font-size: 28px;
  padding: 8px 0;
}


.titulo-certificaciones-div {
  margin-top: 80px;
}

.titulo-certificaciones {
  font-size: 28px;
  border-bottom: 4px solid #d8d8d8;

}


.container {
  padding: 20px 0px;
  width: 100%;
}

.box {
  width: 280px;
  height: 190px;
}


.iconosjuntos {
  padding: 0px;
}



#socialLinkF {
  font-size: 18px;
  padding: 2px;
  margin: 0 auto;
}


.mensaje{
  height: 150px;

}

.container-juntos-contacto {
  width: 98%;
  padding: 10px;
  margin-top: 2px;
}

}

/* ---------------------------------- FIN RESPONSIVE DESIGN ------------------------------ */
/* ---------------------------------- FIN CSS PRINCIPAL ------------------------------ */