/* .containeruno {
    padding: 0 1.5rem;
  }*/




  .heading {
    font-size: 2.5rem;
   
  }

  header .left h2 {
    font-size: 4rem;
    letter-spacing: 4px;
  }

  header .right {
    width: 55%;
    z-index: -1;
  }

  header .left .about {
    width: 95%;
  }

  header .right .profile_img img {
    object-fit: cover;
    width: 100%;
    transform: translateY(-15%);
  }

  .skills {
    color: var(--white);
    width: 100%;
    position: relative;
    overflow: hidden;
  }

  .ring_skills {
    position: absolute;
    right: -25%;
    top: 70%;
  }

  .overlayes_content {
    position: absolute;
    top: 15%;
    left: 25%;
  }


@media (max-width: 768px) {
  .containeruno {
    /*padding: 0 1rem;*/
    padding: 0rem;
  }

  .heading {
    font-size: 2rem;
  }

  nav {
    width: 100%;
    row-gap: 1rem;
  }


  

  /*==================header============================= */

  /*responsiva de CELULAR*/
  body {
  
    background: url(../images/technoville_inicio_fondo.png) no-repeat center center/cover ;
   
  }

  header {   
    height: 7vh;
   
  }  

  header .left h2 {
    font-size: 3rem;
    letter-spacing: 3px;
    color: var(--white);
  }

  header .left .about {
    font-size: 1rem;
  }

  header .right {
    width: 65%;
  }

  header .right {
    overflow-x: hidden;
  }

  header .right > img {
    width: 50%;
    transform: translate(150%, -80%);
  }

  header .right .profile_img img {
    content: url("assets/images/image-profile-tablet.webp");
  }

  /*==================skills============================= */
  .skills {
    width: 100%;
  }

  .skills .sk_content {
    grid-template-columns: repeat(2, 1fr);
  }

  .ring_skills {
    right: -50%;
    top: 70%;
  }

  /*==================projects============================= */

  .pro .overlayes {
    height: 80.5%;
    
  }

  .overlayes_content {
    position: relative;
    top: 5%;
    left: 20%;
    transform: translate(50%, 50%);
    text-align: center;
  }

  /*.tarjeta {     
    
    
    margin: auto;
   
   
  }*/

  /*==================contact============================= */
  .contact_section {
    width: 100%;
  }

  .contact_fields {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}








@media ((max-width: 767px) and (min-width: 320px)) {   /*CONTROL DEL RESPONSIVA DE CELULAR*/
  /*nav {
    flex-direction: column;
    width: 95%;
    row-gap: 1rem;
  }*/

  nav {
 
    flex-direction: row;
    align-items: center;
    margin-top: 1rem;
    margin-block: 0.5rem;
   
  
  }


  header {
    flex-direction: column-reverse;
   
  }

  header .left h2 {
    font-size: 2rem;
    letter-spacing: 3px;
    color: var(--white);
    text-align: center;
  }

  header .left .about {
    font-size: 2rem;
    text-align: center;
    width: 100%;


   
  
      /*text-align: justify ;
      color: var(--grey);
      font-size: 1.2rem;
      width: 97%;
      color: var(--white);
    
      
      padding: 25px;
      
      margin-bottom: 1.5rem;
      line-height: 1.7;*/
      
   
  }

  header .right > img {
    width: 50%;
    transform: translate(100%, -50%);
  }

  header .right .profile_img img {
   /* content: url("assets/images/image-profile-mobile.webp");*/
    width: 100%;
    height: fit-content;
    object-fit: cover;
  }

 /* .containeress {
  
    flex-direction: column;
 
 
   }*/


/*.containeress {
    
  flex-direction: column;
    width: 100%;
    height: fit-content;
    object-fit: cover;
 
   }*/

  
   #contenedor {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
   
  }
  
  
    #principalx {
    
      max-width: 100%; 
         }
     
      #principalx img{
     
      width: 100%; 
     height: auto;
          
      }
  

  #principal 
  {
    width: 100%;
    height: 100%;
  }

  #principal img 
  {
    max-width: 100%;
    height: 85%; 
  }

  #principalc 
  {
    width: 100%;
    height: 100%;   

  }

  #principalc img 
  {
   /* width: 100%;
    object-fit: cover;
    object-position: bottom;
    background: url(../images/cursos/technoville_robotica_competitiva_fondo_s.png) no-repeat center center/cover ;
    height: 500px;
   
    
   justify-content: center;
   object-fit: cover;
object-position: bottom;*/

  max-width: 100%;
  height: 85%;    
  }


  #principalv {

    width: 100%;
    height: 100%;   
    
  }

  #principalv img 
  {
  max-width: 100%;
  height: 85%;    
  }



  #principalp {
    width: 100%;
    height: 100%;   
    
  }

  #principalp img 
  {
  max-width: 100%;
  height: 85%;    
  }



  #principal4 { 
    width: 100%;
    height: 60%;  
    margin: auto;
    position: relative;
    overflow: hidden;
    

  }
  

  #principal4 img{
    width: 100%;
    object-fit: cover;
  
   margin-top: 7%;
   
    
  }



  #sidebar {
    
    width: 100%;
    margin-top: 4%;
    height: 100%;
  }
  
    #sidebarcarr {
    
    width: 100%;
    margin-top: 4%;
    height: 100%;
  }

  #sidebar2 {
    width: 100%;
    margin-top: 4%;
    height: 100%;
    /*width: 62%;  
   margin-top: 4%;  
   position: relative;
   margin: auto;*/
  }
  
  
  /*#sidebar2 img{
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover; 
  
   }*/

 /* #sidebar2 {
    width: 100%;
    margin-top: 4%;
  
   height: 100%;
   
  }

  
#sidebar2 p{
  text-align: justify;
  padding: 1px 15px;
  margin-bottom: 0rem; 

  font-size: 1.8rem;
  letter-spacing: 1px;
  color: var(--black);
 
}*/

  .cabeza{
  
  width: 100%;
 /* height: 350px;*/

 /* width: 100%;
 
  height: auto;*/
  
  

/* justify-content: center;
   object-fit: cover;
object-position: bottom;*/

  }


  .cabeza .left .about {
  
  /*  text-align: justify ;
    color: var(--grey);
    font-size: 2.1rem;
    width: 100%;
    
    color: var(--white);
  
  

  padding: 3.15rem;
  padding-top: 50px;
  padding-bottom: 80px;
    margin-bottom: -3rem;*/

    text-align: justify;
    font-size: 1.9rem; 
    padding: 3.15rem;
    padding-top: 25px;
    padding-bottom: 66px;
    margin-bottom: 3.5rem;
    line-height: 1.5;
    
  }

  
  .containertxt {
    line-height: 1.2;
  }

  .containeress
  {
    
  height: 400px;
  display: flex;
  justify-content: center;
   object-fit: cover;
object-position: bottom;
  }




  .contact {
    text-align: center;
  }

  .skills {
    width: 100%;
    text-align: center;
  }

  .skills .sk_content {
    grid-template-columns: 1fr;
  }

  .ring_skills {
    right: -50%;
    top: 70%;
  }

  .pro .overlayes {
    height: 80.5%;
  }

  .overlayes_content {
    position: absolute;
    top: 5%;
    left: 20%;
    transform: translate(50%, 50%);
    text-align: center;
  }

  .contact_section {
    width: 100%;
  }

  .contact_details {
    color: var(--grey);
    text-align: justify;
    width: 100%;
  }

  .contact_details p {
    margin: 1rem 0;
    font-size: 1.1rem;
    line-height: 1.5;
  }

  .contact_fields {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .img_content {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 2rem;
    color: var(--white);
    text-transform: uppercase;
  }




 /*--------------------BOTON 2DA TARJETA----------------*/

 /*.box{
  position:absolute;
  top:41%;
  left:50%;
  transform : translate(-50% ,85%); 
  font-size: 13px;
}*/

 .card .box{
  position:absolute;
  /*top:50%;
  left:50%;*/
  padding: 55px 20px 20px 50px;
  transform : translate(-50% ,130%);  /*CAMBIA POSICION BOTON*/
  font-size: 6.5px;
}

.btn:link,
.btn:visited{
  text-decoration: none;
  text-transform:uppercase;
  position:relative;
  top:0;
  left:0;
/*  padding:8px 28px;*/
/*padding: 2.6px 45px; CAMBIA TAMAÑO BOTON*/ 
padding: .8px 35px;
  border-radius:70px;
  display:inline-block;
  transition: all .5s;
}

.btn-white{
  background:#ffffff;
  color:#000;
}

.btn:hover{
   box-shadow:0px 10px 10px rgba(2, 2, 2, 0.2);
   transform : translateY(-3px);
   color: #fff;
}

.btn:active{
  box-shadow:0px 5px 10px rgba(2, 2, 2, 0.2)
  transform:translateY(-1px);
}

.btn-bottom-animation-1{
  animation:comeFromBottom 1s ease-out .8s;
}

.btn::after{
  content:"";
  text-decoration: none;
  text-transform:uppercase;
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  border-radius:100px;
  display:inline-block;
  z-index:-1;
  transition: all .5s;
}

.btn-white::after {
    background: #fff;
}

.btn-animation-1:hover::after {
    transform: scaleX(1.4) scaleY(1.6);
    opacity: 0;
}

@keyframes comeFromBottom{
  0%{
    opacity:0;
    transform:translateY(40px);
  } 
  100%{
    opacity:1;
    transform:translateY(0);
  }
}




  /*===============2da tarjeta=================================*/
  
  .card7 {
    border-radius: 10px;
    filter: drop-shadow(0 5px 10px 0 #ffffff);
    /*width: 400px;
    height: 180px;*/
    width: 95vmin;  /**CAMBIAR TAMAÑO DE TARJETA*/
  height: 35vmin;
  /*    width: 65vmin;
  height: 35vmin;*/
    background-color: #ffffff;
    background: url(../images/portfolio/programacion2.png) no-repeat center center/cover;  
    /*background: url(../images/portfolio/programacion2.png) no-repeat center center/cover;  */
    padding: 5px;
    position: relative;
    z-index: 0;
    overflow: hidden;
    transition: 0.6s ease-in;
  }
  
  
  
  .card7::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -15px;
    right: -15px;
   /* background: #e08383;*/
   background: #ff00003c;
    height:2600px;
    width: 25px;
    border-radius: 32px;
    transform: scale(0);
    transform-origin: 75% 75%;    transition: transform 0.25s ease-out;
  }
  
  .card7:hover::before{
      transition-delay:0.2s ;
  
    transform: scale(46);
  }
  
  .card7:hover{
      color: #ffffff;
  
  }
  
  .card7 p{
 

    text-align: center;
    font-size: 8;
       padding: 3.15rem;
  padding-top: 15px;
  padding-bottom: 66px;
    margin-bottom: 3.5rem;

   
  }
  
  
  
  
  
  .card2 {
    border-radius: 10px;
    filter: drop-shadow(0 5px 10px 0 #ffffff);
    /*width: 400px;
    height: 180px;*/
    width: 95vmin;  /**CAMBIAR TAMAÑO DE TARJETA*/
  height: 35vmin;
  /*    width: 65vmin;
  height: 35vmin;*/
    background-color: #ffffff;
    background: url(../images/portfolio/technoville-ROBOTICA-COMPETITIVA_txt.png) no-repeat center center/cover;  
    /*background: url(../images/portfolio/programacion2.png) no-repeat center center/cover;  */
    padding: 5px;
    position: relative;
    z-index: 0;
    overflow: hidden;
    transition: 0.6s ease-in;
  }
  
  
  
  .card2::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -15px;
    right: -15px;
   /* background: #e08383;*/
   background: #ff00003c;
    height:2600px;
    width: 25px;
    border-radius: 32px;
    transform: scale(0);
    transform-origin: 75% 75%;    transition: transform 0.25s ease-out;
  }
  
  .card2:hover::before{
      transition-delay:0.2s ;
  
    transform: scale(46);
  }
  
  .card2:hover{
      color: #ffffff;
  
  }
  
  .card2 p{
 

    text-align: center;
    font-size: 8;
       padding: 3.15rem;
  padding-top: 15px;
  padding-bottom: 66px;
    margin-bottom: 3.5rem;

   
  }
  
  
  .card3 {
    border-radius: 10px;
    filter: drop-shadow(0 5px 10px 0 #ffffff);
    /*width: 400px;
    height: 180px;*/
    width: 95vmin;  /**CAMBIAR TAMAÑO DE TARJETA*/
  height: 35vmin;
  /*    width: 65vmin;
  height: 35vmin;*/
    background-color: #ffffff;
    background: url(../images/portfolio/technoville-CREACION-Y-DISENO-DE-VIDEO-JUEGOS-INICIO.png) no-repeat center center/cover;  
    /*/background: url(../images/portfolio/programacion2.png) no-repeat center center/cover;  */
    padding: 5px;
    position: relative;
    z-index: 0;
    overflow: hidden;
    transition: 0.6s ease-in;
  }
  
  
  
  .card3::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -15px;
    right: -15px;
   /* background: #e08383;*/
   background: #c800ff3c;
    height:2600px;
    width: 25px;
    border-radius: 32px;
    transform: scale(0);
    transform-origin: 75% 75%;    transition: transform 0.25s ease-out;
  }
  
  .card3:hover::before{
      transition-delay:0.2s ;
  
    transform: scale(46);
  }
  
  .card3:hover{
      color: #ffffff;
  
  }
  
  .card3 p{
   /* position: block;
    color: rgb(255, 255, 255);
    left:35%;
    top: 30%;
    transform: translate(2%, 5%);  
    background-color: rgba(255, 255, 255, 0.13);
    padding: 0.5rem;
    text-align: center;
    font-size: 11.5px;*/


    text-align: center;
    font-size: 8;
       padding: 3.15rem;
  padding-top: 15px;
  padding-bottom: 66px;
    margin-bottom: 3.5rem;
   
   
  }
  
  
  .card4 {
    border-radius: 10px;
    filter: drop-shadow(0 5px 10px 0 #ffffff);
    /*width: 400px;
    height: 180px;*/
    width: 95vmin;  /**CAMBIAR TAMAÑO DE TARJETA*/
  height: 35vmin;
  /*    width: 65vmin;
  height: 35vmin;*/
    background-color: #ffffff;
    background: url(../images/portfolio/technoville-programacion_inteligencia_artificial_txt.png) no-repeat center center/cover;  
    /*/background: url(../images/portfolio/programacion2.png) no-repeat center center/cover;  */
    padding: 5px;
    position: relative;
    z-index: 0;
    overflow: hidden;
    transition: 0.6s ease-in;
  }
  
  
  
  .card4::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -15px;
    right: -15px;
   /* background: #e08383;*/
   background: #ff00003c;
    height:2600px;
    width: 25px;
    border-radius: 32px;
    transform: scale(0);
    transform-origin: 75% 75%;    transition: transform 0.25s ease-out;
  }
  
  .card4:hover::before{
      transition-delay:0.2s ;
  
    transform: scale(46);
  }
  
  .card4:hover{
      color: #ffffff;
  
  }
  
  .card4 p{
      
   /*color: rgb(255, 255, 255);   
    left:40%;
    top: 30%;
    transform: translate(2%, 5%);    
    background-color: rgba(255, 255, 255, 0.13);
    padding: 0.5rem;
    text-align: center;
    font-size: 11.5px;*/

    text-align: center;
    font-size: 8;
       padding: 3.15rem;
  padding-top: 15px;
  padding-bottom: 66px;
    margin-bottom: 3.5rem;

  }
  
  
  
  .card5 {
    border-radius: 10px;
    filter: drop-shadow(0 5px 10px 0 #ffffff);
    /*width: 400px;
    height: 180px;*/
    width: 95vmin;  /**CAMBIAR TAMAÑO DE TARJETA*/
  height: 35vmin;
  /*    width: 65vmin;
  height: 35vmin;*/
    background-color: #ffffff;
    background: url(../images/portfolio/technoville_diseno_impresion-3D-txt.png) no-repeat center center/cover;  
    /*/background: url(../images/portfolio/programacion2.png) no-repeat center center/cover;  */
    padding: 5px;
    position: relative;
    z-index: 0;
    overflow: hidden;
    transition: 0.6s ease-in;
  }
  
  
  
  .card5::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -15px;
    right: -15px;
   /* background: #e08383;*/
   background: #0000003c;
    height:2600px;
    width: 25px;
    border-radius: 32px;
    transform: scale(0);
    transform-origin: 75% 75%;    transition: transform 0.25s ease-out;
  }
  
  .card5:hover::before{
      transition-delay:0.2s ;
  
    transform: scale(46);
  }
  
  .card5:hover{
      color: #ffffff;
  
  }
  
  .card5 p{
      
   /* position: block;
    color: rgb(255, 255, 255);   
    left:35%;
    top: 30%;
    transform: translate(2%, 5%);   
    background-color: rgba(255, 255, 255, 0.13);
    padding: 0.5rem;
    text-align: center;
    font-size: 11.5px;*/

  text-align: center;
  font-size: 8;
  padding: 3.15rem;
  padding-top: 15px;
  padding-bottom: 66px;
  margin-bottom: 3.5rem;

  }
    
  
  
  .card6 {
    border-radius: 10px;
    filter: drop-shadow(0 5px 10px 0 #ffffff);
    /*width: 400px;
    height: 180px;*/
    width: 95vmin;  /**CAMBIAR TAMAÑO DE TARJETA*/
  height: 35vmin;
  /*    width: 65vmin;
  height: 35vmin;*/
    background-color: #ffffff;
    background: url(../images/portfolio/technoville_creacion_drones-01.png) no-repeat center center/cover;  
    /*/background: url(../images/portfolio/programacion2.png) no-repeat center center/cover;  */
    padding: 5px;
    position: relative;
    z-index: 0;
    overflow: hidden;
    transition: 0.6s ease-in;
  }
  
  
  
  .card6::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -15px;
    right: -15px;
   /* background: #e08383;*/
   background: #ffb7003c;
    height:2600px;
    width: 25px;
    border-radius: 32px;
    transform: scale(0);
    transform-origin: 75% 75%;    transition: transform 0.25s ease-out;
  }
  
  .card6:hover::before{
      transition-delay:0.2s ;
  
    transform: scale(46);
  }
  
  .card6:hover{
      color: #ffffff;
  
  }
  
  .card6 p{
      
 /*   position: block;
    color: rgb(255, 255, 255);    
    left:35%;
    top: 30%;
    transform: translate(2%, 5%);   
    background-color: rgba(255, 255, 255, 0.13);
    padding: 0.5rem;
    text-align: center;
    font-size: 11.5px;*/

    text-align: center;
    font-size: 8;
       padding: 3.15rem;
  padding-top: 15px;
  padding-bottom: 66px;
    margin-bottom: 3.5rem;

  }


/*  background-color: rgba(41, 41, 41, 0.13);*/
/*
      
    text-align: center;
    font-size: 6.5;
    padding: 2px 6px;
    margin-bottom: .5rem;*/

}

@media (max-width: 375px) {
  header {
    /*height: 85vh;*/
    position: fixed;
  }

  header .right {
    overflow: hidden;
  }


  nav {
 
    flex-direction: row;
    align-items: center;
    margin-top: 1rem;
    margin-block: 0.5rem;
   
  
  }


  .containertxt {
    line-height: 1.2;
  }




}




@media only screen and  (width: 360px) and (-webkit-min-device-pixel-ratio:3) {
  .card7 {
     width: 100%;
    }
    
    .card2 {
     width: 100%;
    }
 
 
 .card3 {
     width: 100%;
    }
 
 .card4 {
    width: 100%;
    }
    
    .card5 {
      width: 100%;
    }
    
    
    .card6 {
    width: 100%;
    }

    .containertxt {
      line-height: 1.2;
    }
  

  }
  
  
   @media only screen and  (width: 480px) and (-webkit-min-device-pixel-ratio:3) {
  .card7 {
     width: 100%;
    }
    
    .card2 {
     width: 100%;
    }
 
 
 .card3 {
     width: 100%;
    }
 
 .card4 {
    width: 100%;
    }
    
    .card5 {
      width: 100%;
    }
    
    
    .card6 {
    width: 100%;
    }
  
    .containertxt {
      line-height: 1.2;
    }
       #principalx {
    
      max-width: 100%; 
         }
     
      #principalx img{
     
      width: 100%; 
     height: auto;
          
      }
  
    
  }
  
   @media only screen and  (width: 480px) and (-webkit-min-device-pixel-ratio:3) {
  .card7 {
     width: 100%;
    }
    
    .card2 {
     width: 100%;
    }
 
 
 .card3 {
     width: 100%;
    }
 
 .card4 {
    width: 100%;
    }
    
    .card5 {
      width: 100%;
    }
    
    
    .card6 {
    width: 100%;
    }

    .containertxt {
      line-height: 1.2;
    }
     #principalx {
    
      max-width: 100%; 
         }
     
      #principalx img{
     
      width: 100%; 
     height: auto;
          
      }
  

  }


 @media only screen and (-webkit-min-device-pixel-ratio:3) {
  .card7 {
     width: 100%;
    }
    
    .card2 {
     width: 100%;
    }
 
 
 .card3 {
     width: 100%;
    }
 
 .card4 {
    width: 100%;
    }
    
    .card5 {
      width: 100%;
    }
    
    
    .card6 {
    width: 100%;
    }

    .containertxt {
      line-height: 1.2;
    }
     #principalx {
    
      max-width: 100%; 
         }
     
      #principalx img{
     
      width: 100%; 
     height: auto;
          
      }
  

  }
  
 @media only screen and (min-width:360px) {
  .card7 {
     width: 100%;
    }
    
    .card2 {
     width: 100%;
    }
 
 
 .card3 {
     width: 100%;
    }
 
 .card4 {
    width: 100%;
    }
    
    .card5 {
      width: 100%;
    }
    
    
    .card6 {
    width: 100%;
    }

    .containertxt {
      line-height: 1.2;
    }


 #principal 
  {
    width: 100%;
    height: 100%;
  }

  #principal img 
  {
    max-width: 100%;
    height: 85%; 
  }
  
     #principalx {
    
      max-width: 100%; 
         }
     
      #principalx img{
     
      width: 100%; 
     height: auto;
          
      }
  


    /*--------------------BOTON 2DA TARJETA----------------*/


.card .box{
  position:absolute;
  /*top:50%;
  left:50%;*/
  padding: 55px 20px 20px 50px;
  transform : translate(-50% ,130%);  /*CAMBIA POSICION BOTON*/
  /*font-size: 16.5px;*/
  font-size: 6.5px;
}

/*.card .box{
  position:absolute; 
  padding: 55px 20px 20px 40px;
  transform : translate(-50% ,160%);  
  font-size: 16.5px;
}*/


.btn:link,
.btn:visited{
  text-decoration: none;
  text-transform:uppercase;
  position:relative;
  top:0;
  left:0;
/*  padding:8px 28px;*/
/*padding: 2.6px 45px; CAMBIA TAMAÑO BOTON 
padding: 1px 38px*/
padding: .8px 35px;
  border-radius:70px;
  display:inline-block;
  transition: all .5s;
}

.btn-white{
  background:#ffffff;
  color:#000;
}

.btn:hover{
   box-shadow:0px 10px 10px rgba(2, 2, 2, 0.2);
   transform : translateY(-3px);
   color: #fff;
}

.btn:active{
  box-shadow:0px 5px 10px rgba(2, 2, 2, 0.2)
  transform:translateY(-1px);
}

.btn-bottom-animation-1{
  animation:comeFromBottom 1s ease-out .8s;
}

.btn::after{
  content:"";
  text-decoration: none;
  text-transform:uppercase;
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  border-radius:100px;
  display:inline-block;
  z-index:-1;
  transition: all .5s;
}

.btn-white::after {
    background: #fff;
}

.btn-animation-1:hover::after {
    transform: scaleX(1.4) scaleY(1.6);
    opacity: 0;
}

@keyframes comeFromBottom{
  0%{
    opacity:0;
    transform:translateY(40px);
  } 
  100%{
    opacity:1;
    transform:translateY(0);
  }
}


  }
  
  
  
 @media only screen and (min-width:480px) {
  .card7 {
     width: 100%;
    }
    
    .card2 {
    width: 100%;
    }
 
 
 .card3 {
      width: 100%;
    }
 
 .card4 {
     width: 100%;
    }
    
    .card5 {
   width: 100%;
    }
    
    
    .card6 {
     width: 100%;
    }

    .containertxt {
      line-height: 1.2;
    }
    
       #principalx {
    
      max-width: 100%; 
         }
     
      #principalx img{
     
      width: 100%; 
     height: auto;
          
      }
  
  

  
  }






@media (max-width: 390px) {
  header {
    /*height: 85vh;*/
    position: fixed;
  }

  header .right {
    overflow: hidden;
  }


  nav {
 
    flex-direction: row;
    align-items: center;
    margin-top: 1rem;
    margin-block: 0.5rem;
   
  
  }

  .containertxt {
    line-height: 1.2;
  }

}



@media only screen and (max-width:480px) {
  /*nav {
    flex-direction: column;
    width: 95%;
    row-gap: 1rem;
  }*/

  nav {
 
    flex-direction: row;
    align-items: center;
    margin-top: 1rem;
    margin-block: 0.5rem;
   
  
  }


  header {
    flex-direction: column-reverse;
   
  }

  header .left h2 {
    font-size: 2rem;
    letter-spacing: 3px;
    color: var(--white);
    text-align: center;
  }

  header .left .about {
   /* font-size: 1rem;*/
    text-align: center;
    width: 100%;


   
  
      /*text-align: justify ;
      color: var(--grey);
      font-size: 1.2rem;
      width: 97%;
      color: var(--white);
    
      
      padding: 25px;
      
      margin-bottom: 1.5rem;
      line-height: 1.7;*/
      
   
  }

  header .right > img {
    width: 50%;
    transform: translate(100%, -50%);
  }

  header .right .profile_img img {
   /* content: url("assets/images/image-profile-mobile.webp");*/
    width: 100%;
    height: fit-content;
    object-fit: cover;
  }

 /* .containeress {
  
    flex-direction: column;
 
 
   }*/


/*.containeress {
    
  flex-direction: column;
    width: 100%;
    height: fit-content;
    object-fit: cover;
 
   }*/

  
   #contenedor {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
   
  }
  
  
   #principal 
  {
    width: 100%;
    height: 100%;
  }

  #principal img 
  {
    max-width: 100%;
    height: 85%; 
  }

  
     #principalx {
    
      max-width: 100%; 
         }
     
      #principalx img{
     
      width: 100%; 
     height: auto;
          
      }
  
  /*#principal {
    width: 100%;
    object-fit: cover;
    object-position: bottom;
    background: url(../images/cursos/technoville_robotica_academica_fondo_small.png) no-repeat center center/cover ;
    height: 500px;
   
    
   justify-content: center;
   object-fit: cover;
object-position: bottom;*
    
  }

  #principalc {
    width: 100%;
    object-fit: cover;
    object-position: bottom;
    background: url(../images/cursos/technoville_robotica_competitiva_fondo_s.png) no-repeat center center/cover ;
    height: 500px;
   
    
   justify-content: center;
   object-fit: cover;
object-position: bottom;*
    
  }


  #principalv {
    width: 100%;
    object-fit: cover;
    object-position: bottom;
    background: url(../images/cursos/technoville_creacion_diseno_videojuegos_fondo_s.png) no-repeat center center/cover ;
    height: 500px;
   
    
   justify-content: center;
   object-fit: cover;
object-position: bottom;*
    
  }



  #principalp {
    width: 100%;
    object-fit: cover;
    object-position: bottom;
    background: url(../images/cursos/programacion_inteligencia_artificial_fondo_s.png) no-repeat center center/cover ;
    height: 500px;
   
    
   justify-content: center;
   object-fit: cover;
object-position: bottom;
    
  }*/

  .containertxt {
    line-height: 1.2;
  }


  /*#principal3 { PARA IMAGEN
    width: 100%;
    height: 60%;  
    margin: auto;
    position: relative;
    overflow: hidden;
    

  }
  

  #principal3 img{
    width: 100%;
    object-fit: cover;
  
   margin-top: 7%;
   
    
  }*/


  /*--------------------BOTON 2DA TARJETA----------------*/

 /*.box{
  position:absolute;
  top:41%;
  left:50%;
  transform : translate(-50% ,85%); 
  font-size: 14.5px;
}*/

.card .box{
  position:absolute;
  /*top:50%;
  left:50%;*/
  padding: 55px 20px 20px 50px;
  transform : translate(-50% ,130%);  /*CAMBIA POSICION BOTON*/
  font-size: 6.5px;
}

.btn:link,
.btn:visited{
  text-decoration: none;
  text-transform:uppercase;
  position:relative;
  top:0;
  left:0;
/*  padding:8px 28px;*/
/*padding: 2.6px 45px; CAMBIA TAMAÑO BOTON*/ 
padding: .8px 35px;
  border-radius:70px;
  display:inline-block;
  transition: all .5s;
}

.btn-white{
  background:#ffffff;
  color:#000;
}

.btn:hover{
   box-shadow:0px 10px 10px rgba(2, 2, 2, 0.2);
   transform : translateY(-3px);
   color: #fff;
}

.btn:active{
  box-shadow:0px 5px 10px rgba(2, 2, 2, 0.2)
  transform:translateY(-1px);
}

.btn-bottom-animation-1{
  animation:comeFromBottom 1s ease-out .8s;
}

.btn::after{
  content:"";
  text-decoration: none;
  text-transform:uppercase;
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  border-radius:100px;
  display:inline-block;
  z-index:-1;
  transition: all .5s;
}

.btn-white::after {
    background: #fff;
}

.btn-animation-1:hover::after {
    transform: scaleX(1.4) scaleY(1.6);
    opacity: 0;
}

@keyframes comeFromBottom{
  0%{
    opacity:0;
    transform:translateY(40px);
  } 
  100%{
    opacity:1;
    transform:translateY(0);
  }
}
  



  #sidebar {
    
    width: 100%;
    margin-top: 4%;
    height: 100%;
  }
  
   #sidebarcarr {
    
    width: 100%;
    margin-top: 4%;
    height: 100%;
  }



  #sidebar2 {
    width: 100%;
    margin-top: 4%;
    height: 100%;
  
  }


  #principaly {
    
    /*  padding: 0rem;*/
     /*background: #000000;*/
  
     
    
  
    max-width: 100%; 
   /*  height: 100%;
     object-fit: cover;
     margin: auto;
     overflow: hidden;  
     position: relative;*/
  
     
   }
   
   /* #principaly img{
   
    width: 100%; 
   height: auto;
    object-fit: cover;
    margin: auto;
     overflow: hidden;  
        
    }*/



 /* #sidebar2 {
    width: 100%;
    margin-top: 4%;   
   height: 100%;
   
  }


  

  
#sidebar2 p{
  text-align: justify;
  padding: 1px 15px;
  margin-bottom: 0rem; 

  font-size: 1.8rem;
  letter-spacing: 1px;
  color: var(--black);
 
}*/

  .cabeza{
  
  width: 100%;
 /* height: 350px;*/

 /* width: 100%;
 
  height: auto;*/
  
  

/* justify-content: center;
   object-fit: cover;
object-position: bottom;*/

  }


  .cabeza .left .about {
  
    /*text-align: justify ;
    color: var(--grey);
    font-size: 1.6rem;
    width: 100%;    
    color: var(--white); 
    padding: 80px;    
    margin-bottom: 1rem;
    line-height: .9;*/
    text-align: justify;
    font-size: 1.8rem; 
    padding: 2.15rem;
    padding-top: 25px;
    padding-bottom: 66px;
    margin-bottom: 3.5rem;
    line-height: 1;
    
  }


  .containeress
  {
    
  height: 400px;
  display: flex;
  justify-content: center;
   object-fit: cover;
object-position: bottom;
  }




  .contact {
    text-align: center;
  }

  .skills {
    width: 100%;
    text-align: center;
  }

  .skills .sk_content {
    grid-template-columns: 1fr;
  }

  .ring_skills {
    right: -50%;
    top: 70%;
  }

  .pro .overlayes {
    height: 80.5%;
  }

  .overlayes_content {
    position: absolute;
    top: 5%;
    left: 20%;
    transform: translate(50%, 50%);
    text-align: center;
  }

  .contact_section {
    width: 100%;
  }

  .contact_details {
    color: var(--grey);
    text-align: justify;
    width: 100%;
  }

  .contact_details p {
    margin: 1rem 0;
    font-size: 1.1rem;
    line-height: 1.5;
  }

  .contact_fields {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .img_content {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 2rem;
    color: var(--white);
    text-transform: uppercase;
  }

 .card7 {
    border-radius: 10px;
    filter: drop-shadow(0 5px 10px 0 #ffffff);
    
    width: 95vmin;  
  height: 36vmin;

    background-color: #ffffff;
    background: url(../images/portfolio/programacion2.png) no-repeat center center/cover;  
    
    padding: 5px;
    position: relative;
    z-index: 0;
    overflow: hidden;
    transition: 0.6s ease-in;
  }
  
  

  
  .card7::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -15px;
    right: -15px;
   
    background: #003cff3c;
    height:2600px;
    width: 35px;
    border-radius: 32px;
    transform: scale(0);
    transform-origin: 75% 75%;    transition: transform 0.25s ease-out;
  }
  
  .card7:hover::before{
    transition-delay:0.2s ;
  
    transform: scale(46);
  }
  
  .card7:hover{
      color: #ffffff;
  
  }
  
  .card7 p{

  /*  position: block;
    color: rgb(255, 255, 255);
    
    left:35%;
    top: 20%;
    transform: translate(2%, -1%);
   
    background-color: rgba(255, 255, 255, 0.13);
   
    text-align: center;
    font-size: 11.5px;
    



    text-align: left;
    font-size: 5;
       padding: 3.15rem;
  padding-top: 10px;
  padding-bottom: 66px;
    margin-bottom: 3.5rem;*/
    
    position: block;
    color: rgb(255, 255, 255);
    left:35%;
    top: 30%;
    transform: translate(2%, 5%);   
    background-color: rgba(255, 255, 255, 0.13);
    padding: 0.5rem;
    text-align: center;
    font-size: 11.5px;
  
  }
 


  .card2 {
    border-radius: 10px;
    filter: drop-shadow(0 5px 10px 0 #ffffff);
    
    width: 95vmin;  
  height: 36vmin;

    background-color: #ffffff;
    background: url(../images/portfolio/technoville-ROBOTICA-COMPETITIVA_txt.png) no-repeat center center/cover;  
    
    padding: 5px;
    position: relative;
    z-index: 0;
    overflow: hidden;
    transition: 0.6s ease-in;
  }
  
  

  
  .card2::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -15px;
    right: -15px;
   
    background: #ff00003c;
    height:2600px;
    width: 35px;
    border-radius: 32px;
    transform: scale(0);
    transform-origin: 75% 75%;    transition: transform 0.25s ease-out;
  }
  
  .card2:hover::before{
    transition-delay:0.2s ;
  
    transform: scale(46);
  }
  
  .card2:hover{
      color: #ffffff;
  
  }
  
  .card2 p{

    /*position: block;
    color: rgb(255, 255, 255);    
    left:35%;
    top: 30%;
    transform: translate(2%, 5%);   
    background-color: rgba(255, 255, 255, 0.13);
    padding: 0.5rem;
    text-align: center;
    font-size: 11.5px;*/
  /*  position: block;
    color: rgb(255, 255, 255);
    
    left:35%;
    top: 20%;
    transform: translate(2%, -1%);
   
    background-color: rgba(255, 255, 255, 0.13);
   
    text-align: center;
    font-size: 10.5px;*/
    position: block;
    color: rgb(255, 255, 255);
    left:35%;
    top: 30%;
    transform: translate(2%, 5%);   
    background-color: rgba(255, 255, 255, 0.13);
    padding: 0.5rem;
    text-align: center;
    font-size: 11.5px;
  
  }


  .card3 {
    border-radius: 10px;
    filter: drop-shadow(0 5px 10px 0 #ffffff);
    
    width: 95vmin;  
  height: 36vmin;

    background-color: #ffffff;
    background: url(../images/portfolio/technoville-CREACION-Y-DISENO-DE-VIDEO-JUEGOS-INICIO.png) no-repeat center center/cover;  
    
    padding: 5px;
    position: relative;
    z-index: 0;
    overflow: hidden;
    transition: 0.6s ease-in;
  }
  
  

  
  .card3::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -15px;
    right: -15px;
   
    background: #c800ff3c;
    height:2600px;
    width: 35px;
    border-radius: 32px;
    transform: scale(0);
    transform-origin: 75% 75%;    transition: transform 0.25s ease-out;
  }
  
  .card3:hover::before{
    transition-delay:0.2s ;
  
    transform: scale(46);
  }
  
  .card3:hover{
      color: #ffffff;
  
  }
  
  .card3 p{

   /* position: block;
    color: rgb(255, 255, 255);
    
    left:35%;
    top: 30%;
    transform: translate(2%, 5%);
    
    background-color: rgba(255, 255, 255, 0.13);
    padding: 0.5rem;
    text-align: center;
    font-size: 11.5px;*/

   /* position: block;
    color: rgb(255, 255, 255);
    
    left:35%;
    top: 20%;
    transform: translate(2%, -1%);
   
    background-color: rgba(255, 255, 255, 0.13);
   
    text-align: center;
    font-size: 10.5px;*/
    
    position: block;
    color: rgb(255, 255, 255);
    left:35%;
    top: 30%;
    transform: translate(2%, 5%);   
    background-color: rgba(255, 255, 255, 0.13);
    padding: 0.5rem;
    text-align: center;
    font-size: 11.5px;
  
  }

  .card4 {
    border-radius: 10px;
    filter: drop-shadow(0 5px 10px 0 #ffffff);
    
    width: 95vmin;  
  height: 36vmin;

    background-color: #ffffff;
    background: url(../images/portfolio/technoville-programacion_inteligencia_artificial_txt.png) no-repeat center center/cover;  
    
    padding: 5px;
    position: relative;
    z-index: 0;
    overflow: hidden;
    transition: 0.6s ease-in;
  }
  
  

  
  .card4::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -15px;
    right: -15px;
   
    background: #ff00003c;
    height:2600px;
    width: 35px;
    border-radius: 32px;
    transform: scale(0);
    transform-origin: 75% 75%;    transition: transform 0.25s ease-out;
  }
  
  .card4:hover::before{
    transition-delay:0.2s ;
  
    transform: scale(46);
  }
  
  .card4:hover{
      color: #ffffff;
  
  }
  
  .card4 p{

   /* position: block;
    color: rgb(255, 255, 255);
   
    left:35%;
    top: 30%;
    transform: translate(2%, 5%);    
    background-color: rgba(255, 255, 255, 0.13);
    padding: 0.5rem;
    text-align: center;
    font-size: 11.5px;*/

 /*   position: block;
    color: rgb(255, 255, 255);
    
    left:35%;
    top: 20%;
    transform: translate(2%, -1%);
   
    background-color: rgba(255, 255, 255, 0.13);
   
    text-align: center;
    font-size: 10.5px;*/
    
    position: block;
    color: rgb(255, 255, 255);
    left:35%;
    top: 30%;
    transform: translate(2%, 5%);   
    background-color: rgba(255, 255, 255, 0.13);
    padding: 0.5rem;
    text-align: center;
    font-size: 11.5px;
  
  }

  .card5 {
    border-radius: 10px;
    filter: drop-shadow(0 5px 10px 0 #ffffff);
    
    width: 95vmin;  
  height: 36vmin;

    background-color: #ffffff;
    background: url(../images/portfolio/technoville_diseno_impresion-3D-txt.png) no-repeat center center/cover;  
    
    padding: 5px;
    position: relative;
    z-index: 0;
    overflow: hidden;
    transition: 0.6s ease-in;
  }
  
  

  
  .card5::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -15px;
    right: -15px;
   
    background: #0000003c;
    height:2600px;
    width: 35px;
    border-radius: 32px;
    transform: scale(0);
    transform-origin: 75% 75%;    transition: transform 0.25s ease-out;
  }
  
  .card5:hover::before{
    transition-delay:0.2s ;
  
    transform: scale(46);
  }
  
  .card5:hover{
      color: #ffffff;
  
  }
  
  .card5 p{

    position: block;
    color: rgb(255, 255, 255);
    /*left:35%;
    top: 30%;*/
    left:35%;
    top: 30%;
    transform: translate(2%, 5%);
    /*transform: translate(-30%, -60%);*/
    background-color: rgba(255, 255, 255, 0.13);
    padding: 0.5rem;
    text-align: center;
    font-size: 11.5px;
  
  }


  .card6 {
    border-radius: 10px;
    filter: drop-shadow(0 5px 10px 0 #ffffff);
    
    width: 95vmin;  
  height: 36vmin;

    background-color: #ffffff;
    background: url(../images/portfolio/technoville_creacion_drones-01.png) no-repeat center center/cover;  
    
    padding: 5px;
    position: relative;
    z-index: 0;
    overflow: hidden;
    transition: 0.6s ease-in;
  }
  
  

  
  .card6::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -15px;
    right: -15px;
   
    background: #ffb7003c;
    height:2600px;
    width: 35px;
    border-radius: 32px;
    transform: scale(0);
    transform-origin: 75% 75%;    transition: transform 0.25s ease-out;
  }
  
  .card6:hover::before{
    transition-delay:0.2s ;
  
    transform: scale(46);
  }
  
  .card6:hover{
      color: #ffffff;
  
  }
  
  .card6 p{

    position: block;
    color: rgb(255, 255, 255);
    /*left:35%;
    top: 30%;*/
    left:35%;
    top: 30%;
    transform: translate(2%, 5%);
    /*transform: translate(-30%, -60%);*/
    background-color: rgba(255, 255, 255, 0.13);
    padding: 0.5rem;
    text-align: center;
    font-size: 11.5px;
  
  }

/*  background-color: rgba(41, 41, 41, 0.13);*/
/*
      
    text-align: center;
    font-size: 6.5;
    padding: 2px 6px;
    margin-bottom: .5rem;*/

}