/* color other ------------------------------------------------------------------*/
/* color principal  -------------------------------------------------------------*/
/* blue marine */
/* green light */
/* orange 700 */
/* blue */
/* white */
/* color image data: e.g: <object>  -----------------------------------------------*/
/* Extra color -------------------------------------------------------------*/
/* Fonts ------------------------------------------------------------------*/
/* shadown ----------------------------------------------------------------*/
/* size  -------------------------------------------------------------------------*/
/* 24.014px */
/* 16.007px */
/* 14.007px */
/* 11.993px */
/*  1.993px */
/* Media --------------------------------------------------------------------------*/
/* Import the Google Font 'Open Sans' */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4gaVc.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVc.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1x4gaVc.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4gaVc.ttf) format('truetype');
}
/* Colors */
/* Chechear HTML para definir valores */
/************************************************************************************************/
@keyframes bgpHueColor {
  25% {
    background-position: 0 100%;
  }
  50% {
    background-position: 100% 100%;
  }
  75% {
    background-position: 100% 0;
  }
  100% {
    filter: hue-rotate(360deg);
  }
}
.container {
  margin-top: 60px;
}
.align .center {
  text-align: center;
}
/* Container styles */
body {
  background-color: #212121 !important;
  color: #333;
  font-family: 'Open Sans', sans-serif;
  overflow-y: auto;
  overflow-x: hidden;
}
/* conteniendo: Perfil Datos + contenido */
.todo {
  background: #212121;
  display: block;
}
.todo .content-data {
  display: grid;
  grid-template-columns: 30% 69%;
  margin-left: 8px;
  margin-right: 8px;
  /* Perfil Datos */
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .todo .content-data {
    grid-template-columns: 100%;
  }
}
.todo .content-data .one {
  margin-top: -1rem;
  margin-right: 8px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .todo .content-data .one {
    margin-right: 0px;
  }
}
/* mi perfil e información */
.portafolio-user {
  margin-top: 2rem;
  margin-bottom: 0;
  padding: 16px;
  background: #FFFFFF;
  height: 93.5%;
  border-radius: 3px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.14), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.portafolio-user .perfil {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  position: relative;
  align-items: center;
  /* Fred Pizarro
					*  Web Design/ Front-End Web Development
					*/
}
.portafolio-user .perfil .foto {
  top: 0px;
  margin-left: 16px;
  border-radius: 50%;
  height: 110px;
  width: 110px;
  margin-top: -1px;
}
.portafolio-user .perfil .user-detail {
  padding: 5px;
  padding-top: 30px;
  text-align: center;
  margin-top: -8px;
}
.portafolio-user .perfil .user-detail .name {
  font-size: 24px;
  font-family: "Roboto Regular";
  white-space: normal;
  color: #424242;
  opacity: 0.8;
  line-height: 80%;
}
.portafolio-user .perfil .user-detail p {
  /* en lo que me desempeño: UX & UI Designer/ Front-end ... */
  line-height: 16px;
  color: #9e9e9e;
}
@media screen and (min-width: 601px) and (max-width: 800px) {
  .portafolio-user .perfil .user-detail {
    padding-top: 0.5rem;
  }
  .portafolio-user .perfil .user-detail p {
    line-height: 14px !important;
  }
}
.portafolio-user .perfil .anim-photo {
  position: relative;
}
.portafolio-user .perfil .anim-photo:after {
  content: '';
  position: absolute;
  background: #FFEA00;
  border-radius: 50%;
  width: 110px;
  height: 110px;
  top: 0px;
  left: 0;
  margin-left: 17px;
  opacity: 0.1;
}
.portafolio-user .perfil .anim-photo:before {
  content: '';
  position: absolute;
  border-radius: 50%;
  width: 110px;
  height: 110px;
  margin-left: 16px;
  border: 0.01em solid black;
  background: radial-gradient(circle, #E91E63, transparent);
  background-size: 400%;
  animation: bgpHueColor 30s linear infinite;
  opacity: 0.2;
}
@media screen and (min-width: 601px) and (max-width: 800px) {
  .portafolio-user .perfil {
    flex-direction: column;
  }
  .portafolio-user .perfil .anim-photo:after {
    left: 0;
  }
}
.portafolio-user h6 {
  margin: -1px;
  padding-left: 8px;
  color: #9e9e9e;
}
.portafolio-user .about-me h3 {
  margin: 7px;
}
.portafolio-user .about-me h3 i {
  margin-right: 5px;
}
.portafolio-user .about-me ul li {
  display: inline-block;
  margin-right: 5px;
}
.portafolio-user .list_justify {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  margin-top: 16px;
}
.portafolio-user .space_justify {
  padding-left: 32px;
  line-height: 1.4;
  color: #424242;
  position: relative;
}
@media screen and (min-width: 601px) and (max-width: 800px) {
  .portafolio-user .space_justify {
    padding-left: 0px;
  }
}
.portafolio-user #about-me {
  margin-bottom: 16px;
}
.portafolio-user #about-me #about_me_c svg {
  position: absolute;
  margin-left: -16px;
}
@media only screen and (min-width: 0px) and (max-width: 959px) {
  .portafolio-user #contact-me .list_justify {
    display: none;
  }
}
.portafolio-user .images-devices {
  margin-left: 26px;
  margin-top: 16px;
  display: flex;
}
.portafolio-user .images-devices img {
  margin: 5px;
}
.portafolio-user .images-devices #pucp {
  height: 50px;
  opacity: 0.8;
}
.portafolio-user .images-devices #pucp:hover {
  opacity: 1;
  cursor: pointer;
}
.portafolio-user .images-devices #pucp:hover .st0 {
  fill: #042354;
}
.portafolio-user .images-devices #pucp:hover .st1 {
  fill: #FFFFFF;
}
.portafolio-user .images-devices #pucp:hover .st2 {
  fill: #042354;
}
.portafolio-user .images-devices #unmsm,
.portafolio-user .images-devices #udemy,
.portafolio-user .images-devices #unas,
.portafolio-user .images-devices #udemy {
  height: 45px;
  opacity: 0.8;
  cursor: pointer;
}
.portafolio-user .images-devices #unmsm:hover,
.portafolio-user .images-devices #udemy:hover,
.portafolio-user .images-devices #unas:hover,
.portafolio-user .images-devices #udemy:hover {
  opacity: 1;
}
.portafolio-user .images-devices #unmsm:hover {
  filter: invert(24%) sepia(64%) saturate(1850%) hue-rotate(341deg) brightness(100%) contrast(105%);
}
.portafolio-user .images-devices #unas {
  height: 48px;
}
.portafolio-user .images-devices #unas:hover {
  filter: invert(20%) sepia(76%) saturate(915%) hue-rotate(112deg) brightness(92%) contrast(101%);
}
.portafolio-user .images-devices #udemy:hover {
  filter: invert(24%) sepia(72%) saturate(3150%) hue-rotate(266deg) brightness(96%) contrast(96%);
}
@media screen and (min-width: 601px) and (max-width: 800px) {
  .portafolio-user .images-devices {
    display: none;
  }
}
/* adjuntando imagenes de mis projectos */
.portafolio-content {
  width: 100%;
  margin-top: 1rem;
  margin-bottom: 0;
}
.portafolio-content .bloque2 {
  padding-top: 16px;
  background: #FFFFFF;
  border-radius: 3px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.14), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
@media only screen and (min-width: 0px) and (max-width: 959px) {
  .portafolio-content .bloque2 {
    height: 97.6%;
  }
  .portafolio-content .bloque2 .title_content.block-2x2 {
    height: 9%;
  }
}
.linea {
  margin-top: 16px;
  border-radius: 2px;
  height: 3px;
  background: #e0e0e0;
}
.barra {
  width: 96%;
  height: 18px;
  position: relative;
  background: transparent;
}
/* Web design select */
.select-data {
  cursor: pointer;
  opacity: 0.9;
}
.select-data:hover {
  opacity: 1;
}
.code-txt {
  float: left;
  margin-top: 1px;
  margin-left: 5px;
  color: #fff;
  font-family: "Roboto Medium";
  font-size: 12px;
  text-shadow: none;
  z-index: 1;
}
#s-JS .code-txt {
  color: #424242;
  text-shadow: 0 2px 5px 0 rgba(255, 255, 255, 0.16);
}
#s-Firebase .code-txt {
  color: #00273F;
  text-shadow: 0 2px 5px 0 rgba(255, 255, 255, 0.16);
}
/* Oculto */
.Percent-txt {
  position: relative;
  padding-right: 5px;
  margin-top: -1px;
  float: right;
  color: #fafafa;
  opacity: 0.6;
  font-family: "Roboto Black";
  font-size: 12px;
  visibility: hidden;
}
.fadeIn {
  /* CSS needed for animation */
  opacity: 0;
  animation: fadeIn ease-in 1;
  animation-fill-mode: forwards;
}
/* Animation Times - Time to fade in */
.fadeIn-3s {
  animation-duration: 3s;
}
/* Animation Delay - Time to be delayed  */
.fadeIn-Delay-3s {
  animation-delay: 3s;
}
@keyframes Animate-WebDesign {
  from {
    width: 10px;
  }
  to {
    width: 90%;
  }
}
#s-WebDesign {
  width: 90%;
  height: 18px;
  background-color: #3f51b5;
  animation: Animate-WebDesign 4s;
  -webkit-animation: Animate-WebDesign 4s;
  -moz-animation: Animate-WebDesign 4s;
  -o-animation: Animate-WebDesign 4s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/*************************************************************************/
@keyframes Animate-HTML {
  from {
    width: 10px;
  }
  to {
    width: 95%;
  }
}
#s-HTML {
  width: 95%;
  height: 18px;
  position: absolute;
  background-color: #ff5722;
  animation: Animate-HTML 4s;
  -webkit-animation: Animate-HTML 4s;
  -moz-animation: Animate-HTML 4s;
  -o-animation: Animate-HTML 4s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/*************************************************************************/
@keyframes Animate-CSS {
  from {
    width: 10px;
  }
  to {
    width: 92%;
  }
}
#s-CSS {
  width: 92%;
  height: 18px;
  position: absolute;
  background-color: #03a9f4;
  animation: Animate-CSS 5s;
  -webkit-animation: Animate-CSS 5s;
  -moz-animation: Animate-CSS 5s;
  -o-animation: Animate-CSS 5s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/*************************************************************************/
@keyframes Animate-JS {
  from {
    width: 10px;
  }
  to {
    width: 52%;
  }
}
#s-JS {
  width: 52%;
  height: 18px;
  position: absolute;
  background-color: #ffeb3b;
  animation: Animate-JS 4s;
  -webkit-animation: Animate-JS 4s;
  -moz-animation: Animate-JS 4s;
  -o-animation: Animate-JS 4s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/*************************************************************************/
@keyframes Animate-NodeJS {
  from {
    width: 10px;
  }
  to {
    width: 65%;
  }
}
#s-NodeJS {
  width: 65%;
  height: 18px;
  position: absolute;
  background-color: #66BB6A;
  animation: Animate-NodeJS 5s;
  -webkit-animation: Animate-NodeJS 5s;
  -moz-animation: Animate-NodeJS 5s;
  -o-animation: Animate-NodeJS 5s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/*************************************************************************/
@keyframes Animate-TypeScript {
  from {
    width: 10px;
  }
  to {
    width: 73%;
  }
}
#s-TypeScript {
  width: 73%;
  height: 18px;
  position: absolute;
  background-color: #00273F;
  animation: Animate-TypeScript 4s;
  -webkit-animation: Animate-TypeScript 4s;
  -moz-animation: Animate-TypeScript 4s;
  -o-animation: Animate-TypeScript 4s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/*************************************************************************/
@keyframes Animate-Angular {
  from {
    width: 10px;
  }
  to {
    width: 85%;
  }
}
#s-Angular {
  width: 85%;
  height: 18px;
  position: absolute;
  background-color: #F44336;
  animation: Animate-Angular 4s;
  -webkit-animation: Animate-Angular 4s;
  -moz-animation: Animate-Angular 4s;
  -o-animation: Animate-Angular 4s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/*************************************************************************/
@keyframes Animate-Firebase {
  from {
    width: 10px;
  }
  to {
    width: 45%;
  }
}
#s-Firebase {
  width: 45%;
  height: 18px;
  position: absolute;
  background-color: #FFCB2C;
  color: #00273F;
  animation: Animate-Firebase 4s;
  -webkit-animation: Animate-Firebase 4s;
  -moz-animation: Animate-Firebase 4s;
  -o-animation: Animate-Firebase 4s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/*************************************************************************/
@keyframes Animate-Ionic {
  from {
    width: 10px;
  }
  to {
    width: 73%;
  }
}
#s-Ionic {
  width: 73%;
  height: 18px;
  position: absolute;
  background-color: #3880FF;
  animation: Animate-Ionic 4s;
  -webkit-animation: Animate-Ionic 4s;
  -moz-animation: Animate-Ionic 4s;
  -o-animation: Animate-Ionic 4s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/*************************************************************************/
@keyframes Animate-Java {
  from {
    width: 10px;
  }
  to {
    width: 55%;
  }
}
#s-Java {
  width: 55%;
  height: 18px;
  position: absolute;
  background-color: #ffc107;
  animation: Animate-Java 4s;
  -webkit-animation: Animate-Java 4s;
  -moz-animation: Animate-Java 4s;
  -o-animation: Animate-Java 4s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.seleccion .work-list {
  display: flex;
  justify-content: center;
}
.seleccion .work-list li {
  display: inline-block;
  margin-left: 5px;
  margin-right: 15px;
  /* button tap */
}
.seleccion .work-list li a {
  color: #212121;
  font-family: "Roboto Bold";
  opacity: 0.8;
  border-bottom: 3px solid transparent;
  margin: 1px;
}
.seleccion .work-list li a.active,
.seleccion .work-list li a:hover {
  color: #03a9f4;
  border-bottom-color: #03a9f4;
  transition: 0.25s;
  text-shadow: 0.54px 0px 0px #03a9f4;
}
/**
 * ------------------------------------------------------------------------------------------------------
*/
.block-2x2 {
  grid-area: dosXdos;
  /*grid x6*/
  background: #9e9e9e;
  padding: 16px;
}
.block-3x1_a {
  grid-area: tresXunoA;
  background: #9e9e9e;
  padding: 16px;
}
.block-3x1_b {
  grid-area: tresXunoB;
  background: #9e9e9e;
  padding: 16px;
}
.block-4x1_a {
  grid-area: cuatroXunoA;
  background: #9e9e9e;
  padding: 16px;
}
.block-4x1_b {
  grid-area: cuatroXunoB;
  background: #9e9e9e;
  padding: 16px;
}
.block-6x1 {
  grid-area: seisXuno;
  background: #9e9e9e;
  padding: 16px;
}
.block-6x1_a {
  grid-area: seisXunoA;
  background: #9e9e9e;
  padding: 16px;
}
.block-6x1_b {
  grid-area: seisXunoB;
  background: #9e9e9e;
  padding: 16px;
}
@keyframes fade-in-out_one {
  from {
    background: #3f51b5;
  }
  to {
    background: #3d5afe;
  }
}
@keyframes spin {
  0% {
    transform: scale(0.8) perspective(1px);
    zoom: 110%;
    backface-visibility: hidden;
    /*Para quitar blurry text cuando se hace zoom*/
  }
  5% {
    transform: scale(0.83) perspective(1px);
    zoom: 110%;
    backface-visibility: hidden;
    /*Para quitar blurry text cuando se hace zoom*/
  }
  10% {
    transform: scale(0.86) perspective(1px);
    zoom: 110%;
    backface-visibility: hidden;
    /*Para quitar blurry text cuando se hace zoom*/
  }
  15% {
    transform: scale(0.9) perspective(1px);
    zoom: 110%;
    backface-visibility: hidden;
    /*Para quitar blurry text cuando se hace zoom*/
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  }
  20% {
    transform: scale(0.93) perspective(1px);
    zoom: 110%;
    backface-visibility: hidden;
    /*Para quitar blurry text cuando se hace zoom*/
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  }
  25% {
    transform: scale(0.96) perspective(1px);
    zoom: 110%;
    backface-visibility: hidden;
    /*Para quitar blurry text cuando se hace zoom*/
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  }
  30% {
    transform: scale(1) perspective(1px);
    zoom: 110%;
    backface-visibility: hidden;
    /*Para quitar blurry text cuando se hace zoom*/
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  }
  45% {
    transform: scale(1) perspective(1px);
    zoom: 110%;
    backface-visibility: hidden;
    /*Para quitar blurry text cuando se hace zoom*/
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  }
  60% {
    transform: scale(1) perspective(1px);
    zoom: 110%;
    backface-visibility: hidden;
    /*Para quitar blurry text cuando se hace zoom*/
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  }
  75% {
    transform: scale(0.9) perspective(1px);
    zoom: 110%;
    backface-visibility: hidden;
    /*Para quitar blurry text cuando se hace zoom*/
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  }
  100% {
    transform: scale(0.8) perspective(1px);
    zoom: 110%;
    backface-visibility: hidden;
    /*Para quitar blurry text cuando se hace zoom*/
  }
}
/* Cajita de titulos de las imagenes  */
.title_content a {
  position: relative;
}
.title_content a span {
  display: none;
}
.title_content a:hover {
  /* Titulo que se da aa cada imagen */
}
.title_content a:hover span {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  padding: 4px;
  padding-bottom: 6px;
  line-height: 0.85;
  position: absolute;
  display: block;
  z-index: 100;
  background: #FFCB2C;
  color: #00273F;
  left: 0px;
  margin-left: -25px;
  top: 0;
  text-decoration: none;
  font-family: "Roboto Regular", monospace;
  font-size: 11px;
  font-style: oblique;
  /* animación */
  animation-name: spin;
  animation-duration: 2800ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.title_content a:hover span:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  margin-top: -10px;
  border-bottom: 10px solid #FFCB2C;
  border-left: 10px solid transparent;
}
#ux_ui {
  display: grid;
  grid-template-areas: 'dosXdos dosXdos cuatroXunoA cuatroXunoA cuatroXunoA cuatroXunoA' 'dosXdos dosXdos cuatroXunoB cuatroXunoB cuatroXunoB cuatroXunoB' 'seisXuno seisXuno seisXuno seisXuno seisXuno seisXuno';
  grid-gap: 10px;
  background: transparent;
  padding: 10px;
}
#ux_ui div {
  text-align: center;
  padding: 20px 0;
  height: 100%;
}
#ux_ui .block-2x2 {
  border-top-left-radius: 5px;
}
#ux_ui .block-2x2:hover {
  background: #3d5afe;
  animation: fade-in-out_one 3s;
}
#ux_ui .block-4x1_a {
  border-top-right-radius: 5px;
}
#ux_ui .block-4x1_a:hover {
  background: #3d5afe;
  animation: fade-in-out_one 3s;
}
#ux_ui .block-4x1_b:hover {
  background: #3d5afe;
  animation: fade-in-out_one 3s;
}
#ux_ui .block-6x1 {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
#ux_ui .block-6x1:hover {
  background: #3d5afe;
  animation: fade-in-out_one 3s;
}
@keyframes fade-in-out_deep-orange {
  from {
    background: #ff5722;
  }
  to {
    background: #f4511e;
  }
}
@keyframes fade-in-out_yellow {
  from {
    background: #ffeb3b;
  }
  to {
    background: #ffea00;
  }
}
@keyframes fade-in-out_light-blue {
  from {
    background: #0277bd;
  }
  to {
    background: #01579b;
  }
}
@keyframes fade-in-out_light-blue2 {
  from {
    background: #03a9f4;
  }
  to {
    background: #039be5;
  }
}
#web-dev {
  display: grid;
  grid-template-areas: 'seisXunoA seisXunoA seisXunoA seisXunoA seisXunoA seisXunoA' 'tresXunoA tresXunoA tresXunoA tresXunoB tresXunoB tresXunoB' 'seisXunoB seisXunoB seisXunoB seisXunoB seisXunoB seisXunoB';
  grid-gap: 8px;
  background: transparent;
  padding: 10px;
}
#web-dev div {
  text-align: center;
  padding: 20px 0;
  height: 100%;
}
#web-dev .block-6x1_a {
  height: 100% !important;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
#web-dev .block-6x1_a:hover {
  background: #ff5722;
  animation: fade-in-out_deep-orange 3s;
}
#web-dev .block-3x1_a:hover {
  background: #ffeb3b;
  animation: fade-in-out_yellow 3s;
}
#web-dev .block-3x1_b:hover {
  background: #0277bd;
  animation: fade-in-out_light-blue 3s;
}
#web-dev .block-6x1_b {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
#web-dev .block-6x1_b:hover {
  background: #03a9f4;
  animation: fade-in-out_light-blue2 3s;
}
/* border image mobil */
.brdr-mobile {
  border: 1px solid #DDDDDD;
}
@keyframes fade-in-out_blue {
  from {
    background: #2196F3;
  }
  to {
    background: #1E88E5;
  }
}
@keyframes fade-in-out_red {
  from {
    background: #F44336;
  }
  to {
    background: #E53935;
  }
}
#web-mobil_app {
  display: grid;
  grid-template-areas: 'tresXunoA tresXunoA tresXunoA tresXunoB tresXunoB tresXunoB' 'tresXunoA tresXunoA tresXunoA tresXunoB tresXunoB tresXunoB' 'tresXunoA tresXunoA tresXunoA tresXunoB tresXunoB tresXunoB';
  grid-gap: 10px;
  background: transparent;
  padding: 10px;
}
#web-mobil_app div {
  text-align: center;
  padding: 20px 0;
  height: 100%;
}
#web-mobil_app .block-3x1_a {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
#web-mobil_app .block-3x1_a:hover {
  background: #2196F3;
  animation: fade-in-out_blue 3s;
}
#web-mobil_app .block-3x1_b {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
#web-mobil_app .block-3x1_b:hover {
  background: #F44336;
  animation: fade-in-out_red 3s;
}
@keyframes fade-in-out_amber {
  from {
    background: #ffc107;
  }
  to {
    background: #ffb300;
  }
}
#desktop-mobil_app {
  height: 100%;
  padding: 16px;
}
#desktop-mobil_app .title_content {
  background: #9e9e9e;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(2, 16rem);
  grid-column: auto;
  grid-gap: 8px;
  justify-content: center;
  border-radius: 5px;
}
#desktop-mobil_app .title_content a {
  border: 1px solid #212121;
  position: relative;
  width: 220px;
  display: flex;
  justify-content: center;
}
#desktop-mobil_app .title_content a img {
  width: 100%;
  height: 100%;
}
#desktop-mobil_app .title_content a span {
  top: 0;
  margin-top: 110px;
}
#desktop-mobil_app .title_content:hover {
  background: #ffc107;
  animation: fade-in-out_amber 3s;
}
.wd_text {
  margin: 0px;
  margin-left: -3px;
  padding: 5px;
  background: #3F51B5;
  color: #F5F5F5;
  border-radius: 5px;
  text-align: center;
  font-family: "Roboto Black", sans-serif;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
/* The Modal (background) */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: #000000;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  /* Could be more or less, depending on screen size */
}
.modal-content h2 {
  text-align: center;
}
a {
  cursor: pointer;
}
/* The Close Button */
/* Modal Header */
.modal-header {
  padding: 2px 16px;
  background-color: rgba(33, 150, 243, 0.85);
  border: none;
  font-family: "Roboto Medium", monospace;
}
.modal-header h2 {
  color: #FFFFFF;
}
.modal-header ::selection {
  /*Selección de textos*/
  background: #29b6f6;
  color: #424242;
  opacity: 1 !important;
}
/* button close in the modals */
span[class^="close"] {
  color: #212121;
  background: #FFFF00;
  float: right;
  font-size: 28px;
  font-weight: bold;
  margin-top: 5px;
  padding: 6px 20px;
  border-radius: 50%;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  position: fixed;
  right: 10%;
}
span[class^="close"]:hover,
span[class^="close"]:focus {
  background: #FF1744;
  color: #FAFAFA;
  text-decoration: none;
  cursor: pointer;
}
/* Modal Body */
.modal-body {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
}
.modal-body img {
  margin-bottom: 10px;
}
/* ajustar en bloques */
/* Modal Footer */
.modal-footer {
  margin-top: 10px;
  padding: 2px 16px;
  color: white;
  background: #212121;
}
.modal-footer h5 {
  margin-left: 25px;
  font-size: 12px;
  font-family: 'Roboto Light';
  font-style: italic;
}
/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fafafa;
  margin: auto;
  padding: 0;
  width: 78.4%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
}
/* Add Animation */
@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}
/* Select data skills  **************************************************************/
/* posicionamiento relativo para que cuadre bien */
a[class^="select_"] {
  position: relative;
}
/* mobil */
@media only screen and (max-width: 40em) {
  .content-data {
    flex-direction: column;
  }
  .perfil {
    display: flex;
    justify-content: space-between;
  }
  .perfil .foto {
    margin-top: 40px;
    width: 30%;
    height: 30%;
  }
  .responsive-percent {
    margin-right: -45px !important;
  }
  .modal-content {
    width: 100%;
    margin-bottom: 5px;
  }
  .modal-content .modal-header h2 {
    font-size: 24px;
  }
  span[class^="close"] {
    bottom: 42px;
    right: 16px;
  }
  #desktop-mobil_app .title_content {
    grid-template-columns: repeat(1, 15rem);
  }
  #desktop-mobil_app .title_content a {
    float: right;
  }
}
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
  .foto {
    width: 80px;
    height: 80px;
    margin-top: 25px;
  }
  .responsive-percent {
    margin-right: -45px !important;
  }
  .Cx1,
  .Cx2-2 .twoC {
    margin: 0px;
    margin-bottom: 10px;
    width: 100%;
  }
  .one .perfil {
    /* foto de perfil */
    /* text perfil */
  }
  .one .perfil .anim-photo::after,
  .one .perfil .anim-photo::before {
    width: 60px;
    height: 60px;
    margin-left: -2px;
  }
  .one .perfil .anim-photo img {
    background: red;
    width: 60px;
    height: 60px;
    margin-left: -2px;
  }
  .one .perfil .user-detail {
    /* Fred Pizarro */
  }
  .one .perfil .user-detail .name {
    font-size: 16px;
  }
  .one .perfil .user-detail p {
    line-height: 2;
  }
  #ux_ui {
    height: 100%;
    width: 100%;
    height: 94% !important;
  }
  #ux_ui .block-2x2 {
    padding-top: 8px;
    padding-left: 8px;
    padding-right: 8px;
    display: grid;
    grid-template-columns: repeat(5, 4rem);
    grid-gap: 15px;
  }
  #ux_ui .block-2x2 a {
    width: 100%;
    height: 84px;
    display: flex;
  }
  #ux_ui .block-2x2 a img {
    width: 100%;
    object-fit: cover;
  }
  #ux_ui .block-4x1_a {
    padding: 8px;
    height: 100%;
    display: block;
    display: grid;
    grid-template-columns: repeat(2, 4rem);
    grid-gap: 15px;
  }
  #ux_ui .block-4x1_a a {
    width: 100%;
    height: 95px;
  }
  #ux_ui .block-4x1_a a img {
    width: 100%;
  }
  #ux_ui .block-4x1_a a span {
    width: 65px;
  }
  #ux_ui .block-4x1_b a {
    height: 85px;
  }
  #ux_ui .block-6x1 {
    grid-template-columns: repeat(7, 4rem);
    grid-column-gap: 16.5px;
  }
  #ux_ui .block-6x1 a {
    height: 45px;
  }
  #web-dev {
    height: 100% !important;
  }
  #web-dev .block-6x1_a {
    width: 100%;
    padding: 6px;
    height: 140px;
    display: grid;
    grid-template-columns: repeat(8, 4rem);
    grid-gap: 6px;
    padding-top: 16px;
  }
  #web-dev .block-6x1_a a {
    width: 100%;
    height: 120px;
    display: flex;
    justify-content: center;
  }
  #web-dev .block-6x1_a a img {
    width: 100%;
    object-fit: cover;
    object-position: center;
  }
  #web-dev .block-3x1_a {
    display: grid;
    grid-template-columns: repeat(5, 4rem);
    grid-gap: 8px;
    padding-left: 0px;
  }
  #web-dev .block-3x1_a div.min-c1x2 {
    margin-left: 6px;
  }
  #web-dev .block-3x1_a a img {
    width: 100%;
  }
  #web-dev .block-3x1_b {
    padding-left: 4px;
    display: grid;
    grid-template-columns: repeat(3, 4rem);
    grid-gap: 8px;
  }
  #web-dev .block-6x1_b {
    height: 79%;
  }
  #web-mobil_app {
    height: 94% !important;
  }
  #web-mobil_app .block-3x1_a {
    padding-left: 0px;
  }
  #web-mobil_app .block-3x1_a .title_content {
    display: grid;
    grid-template-columns: repeat(3, 4.2rem);
    grid-gap: 8px;
    padding: 6px;
    padding-left: 9px;
    padding-right: 9px;
  }
  #web-mobil_app .block-3x1_a .title_content a {
    height: 100px;
    display: flex;
    justify-content: center;
  }
  #web-mobil_app .block-3x1_a .title_content a img {
    width: 100%;
    object-fit: cover;
    object-position: center;
  }
  #web-mobil_app .block-3x1_b .title_content {
    display: grid;
    grid-template-columns: repeat(4, 4.4rem);
    grid-gap: 8px;
    padding: 8px;
    justify-content: center;
  }
  #web-mobil_app .block-3x1_b .title_content a {
    height: 100px;
  }
  #web-mobil_app .block-3x1_b .title_content a img {
    width: 100%;
  }
  #desktop-mobil_app {
    height: 100% !important;
  }
  #desktop-mobil_app .title_content {
    margin-top: -6px;
    grid-template-columns: repeat(3, 10.65rem);
    height: 95%;
  }
  #desktop-mobil_app .title_content a {
    width: 100%;
    height: 160px;
  }
}
@media only screen and (min-width: 64em) {
  body {
    overflow-y: hidden;
    background: #212121;
  }
  #desktop-mobil_app .title_content {
    grid-template-columns: repeat(4, 12rem);
  }
  #desktop-mobil_app .title_content a {
    width: 100%;
    height: 70%;
  }
}
@media only screen and (max-width: 704px) {
  #about-me .list_justify {
    display: none;
  }
  #my-skills .list_justify {
    display: none;
  }
  /* UX/ UI */
  .ux_ui {
    height: 100%;
  }
}
/* pequeña frase nueva*/
.quotes {
  margin: -4px 8px 0 8px;
  padding: 0.8rem 4rem 0.8rem 4rem;
  text-align: center;
}
@media only screen and (min-width: 0px) and (max-width: 959px) {
  .quotes {
    margin-top: 2px;
    padding: 0.8rem 8rem 0.8rem 8rem;
  }
}
.quotes p {
  font-size: 13px;
  color: #616161;
  line-height: 12px;
}
.quotes p i {
  font-size: 24px;
}
/* mobil */
@media only screen and (max-width: 640px) {
  #about-me .list_justify {
    display: flex;
  }
  #my-skills .list_justify {
    display: flex;
  }
  .quotes {
    padding: 0.8rem 1rem 0.8rem 1rem;
  }
}