/*==========================
    CSS EN GENERAL
==========================*/



  @media only screen and (min-device-width : 310px) and (max-device-width : 480px) {
    .body-contact{
      zoom: 200%;
     }
  }

*{
  box-sizing: border-box;
}

#content{
  overflow-x: hidden;
  white-space: nowrap;
}

.divider {
    width: 90%;
    margin: auto;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
  }

  #headerMain{
    background-color: #003140 !important;
  }
  #containernav{
    background-color: #003140 !important;
    color: white;
  }



  /*=========================
      BOTON CON ESTILO
  ===========================*/

  .container-btn{

      transform: translate(-40%, -50%);
      
  }

  #skill .container .linkA001{
     margin: 0 auto; 
     margin-top: 25%; 
     display: flex; 
     align-items: center; 
     justify-content: center; 
     text-decoration: none;
  }
  .btn-main {
      position: absolute;
      width: 277px;
      font-size: 1em;
      font-weight: bold;
      line-height: 60px;
      text-align: center;
      text-transform:capitalize;
      background-color: transparent;
      cursor: pointer;
      text-decoration:none;
      font-family: 'Roboto', sans-serif;
      font-weight:900;
      font-size:17px;
      letter-spacing: 0.045em;
      
  }
  
  .btn-main svg {
      position: absolute;
      top:  0;
      left: 0;
  }
  
  .btn-main svg rect {
      stroke-width: 4;
      stroke-dasharray: 353, 0;
      stroke-dashoffset: 0;
      -webkit-transition: all 600ms ease;
      transition: all 600ms ease;
  }
  
  .btn-main span{
    background: rgb(255,130,130);
    background: -moz-linear-gradient(left,  rgba(255,130,130,1) 0%, rgba(225,120,237,1) 100%);
    background: -webkit-linear-gradient(left,  rgba(255,130,130,1) 0%,rgba(225,120,237,1) 100%);
    background: linear-gradient(to right,  rgba(255,130,130,1) 0%,rgba(225,120,237,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8282', endColorstr='#e178ed',GradientType=1 );
    
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .btn-main:hover svg rect {
      stroke-width: 4;
      stroke-dasharray: 196, 543;
      stroke-dashoffset: 437;
  }

  /*=================================
          BOTON DE MIS SKILLS
  ==================================*/


.button-skills {
  --offset: 10px;
  --border-size: 2.3px;
  display: block;
  position: relative;
  padding: 1.5em 3em;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: transparent;
  color: #e55743;
  text-transform: uppercase;
  letter-spacing: .25em;
  outline: none;
  cursor: pointer;
  font-weight: bold;
  border-radius: 0;
  box-shadow: inset 0 0 0 var(--border-size) currentcolor;
  -webkit-transition: background .8s ease;
  transition: background .8s ease;

  
}
.button-skills :hover {
  background: rgba(100, 0, 0, 0.03);
 
}
.button__horizontal, .button__vertical {
  position: absolute;
  top: var(--horizontal-offset, 0);
  right: var(--vertical-offset, 0);
  bottom: var(--horizontal-offset, 0);
  left: var(--vertical-offset, 0);
  -webkit-transition: -webkit-transform .8s ease;
  transition: -webkit-transform .8s ease;
  transition: transform .8s ease;
  transition: transform .8s ease, -webkit-transform .8s ease;
  will-change: transform;
}
.button__horizontal::before, .button__vertical::before {
  content: '';
  position: absolute;
  border: inherit;
}
.button__horizontal {
  --vertical-offset: calc(var(--offset) * -1);
  border-top: var(--border-size) solid currentcolor;
  border-bottom: var(--border-size) solid currentcolor;
}
.button__horizontal::before {
  top: calc(var(--vertical-offset) - var(--border-size));
  bottom: calc(var(--vertical-offset) - var(--border-size));
  left: calc(var(--vertical-offset) * -1);
  right: calc(var(--vertical-offset) * -1);
}
.button-skills:hover .button__horizontal {
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}
.button__vertical {
  --horizontal-offset: calc(var(--offset) * -1);
  border-left: var(--border-size) solid currentcolor;
  border-right: var(--border-size) solid currentcolor;
}
.button__vertical::before {
  top: calc(var(--horizontal-offset) * -1);
  bottom: calc(var(--horizontal-offset) * -1);
  left: calc(var(--horizontal-offset) - var(--border-size));
  right: calc(var(--horizontal-offset) - var(--border-size));
}
.button-skills:hover .button__vertical {
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}



/*===============================
            CONTACTO
=============================*/

#my-form{
  width: 50%; 
  padding-top: 10%;
  margin: auto;
}

.TitleHeader{
  margin-top: 2%;
}

#my-form-button{
  width: 100%;
  margin: 0;
  margin-top: 10px;
  height: 40px;
  text-align: center;
  
}


/*=========================
        COMPETENCIAS
================================*/


h1 {
  margin: 0;
  font-weight: 400;
  font-size: 35px;
}
h1 span {
  color: #A42CD6;
}
.container-title h2 {
  margin-bottom: 30px;
}

.submenu {
  display: flex;
  justify-content: center;
  margin: 10px auto 0;
}

.submenu__item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.submenu__item:not(:last-child) {
  margin-right: 30px;
}
.submenu__item a {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  display: inline-flex;
  align-items: center;
  font-size: 17px;
  color: inherit;
  text-decoration: none;
}
.submenu__item a:hover {
  color: #A42CD6;
}
.submenu__item a i {
  color: #A42CD6;
  margin-right: 5px;
}


/*=================
      SUBIDA TEXT
===================*/


.subida a{
  text-decoration: none; 
  justify-content: center;
  display: flex; 
  width: 20%; 
  margin: 0 auto; 
  color: black
}

/*========================================
  Comienzo de mis habilidades PAG ABOUT
========================================*/

.skills
{
	overflow:hidden;
	padding-top:50px;
	padding-bottom:20px;
	
}
.skills .info, .skills .progress
 
{
	margin:0px;
	float:left;
	width:50%;
  height: 100%;
  display: inline;
  background-color: rgba(255, 255, 255,);
}
.skills .info h1
{
	color:#666666;
	font-family:Arial, Helvetica, sans-serif;

}
.skills .info h1:hover
{
	color:#000000;
	cursor:pointer;
}
.skills .info  ul li
{
	
	color:#555555;
	font-family:Arial, Helvetica, sans-serif;
	font-size:20px;
	margin-top: 10px;
	list-style-type:circle;
	margin-left: 50px;
	
}
.skills .info  ul li:hover
{
	background:#2ecc71;
	color:#000000;
	cursor:pointer;
	font-size:25px;
	list-style-type:square;
	font-family:Arial, Helvetica, sans-serif;

	
}

.skills .container .progress .technique h2{
	font-size: 25px;
	font-family: Arial, Helvetica, sans-serif;
	color: #888080;
  
}

.skills .container .progress .technique h2:hover{
	font-size: 25px;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
}


.skills .info button 
{
	background:#FFF;
	color:#2ecc71;
	border:2px solid #2ecc71;
	cursor:pointer;
	width:180px;
	height:50px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:20px;
	margin-top:10px;
}
.skills .info button:hover 
{
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 30px;
}

.skills .progress .technique
{
	margin-left: 30px;
	max-width: 100%;
}
.skills .progress .technique h2
{
	color:#566366;
	font-family:Arial, Helvetica, sans-serif;
}
.skills .progress .technique div
{
	background:#e1e1dd;
	height:30px;
}

.skills .progress .technique div span
{
	background:#2ecc71;
	color:#FFF;
	height:30px;
	display:block;
	font-size:20px;
	font-weight:bold;
	line-height:25px;
	text-align:right;
	font-family:Arial, Helvetica, sans-serif;

	
}

.skills .progress .technique div span:hover
{
	background:#A42CD6;
	color:#000000;
	height:30px;
	display:block;
	font-size:20px;
	font-weight:bold;
	line-height:25px;
	text-align:right;
	font-family:Arial, Helvetica, sans-serif;
	
}


.containerskills {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.containerskills .info {
  grid-column: 1/2;
  grid-row: 1/3;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  height: 300px;
  display: grid;
}
.containerskills .sixtsSkill {
  grid-column: 1/2;
  grid-row: 2/2;
}
.imgSkill{
  border-radius: 20px;
}

.containerskills .info h1 {
  font-size: xx-large;
  font-weight: bold;
}

.containerskills .info .buttonSkils {
  width: 220px;
  margin: 0 auto;
  border-radius: 10px;
  width: 300px;
  height: 30px;
  margin-bottom: 62px;

}

.card {
  width: 350px;
  height: 430px;
  box-shadow: 1px 1px 1px 1px rgb(0, 0, 0, 0.3),
    1px 1px 2px 1px rgb(0, 0, 0, 0.3);
  border-radius: 10px;
  overflow: hidden;
  margin: 0 auto;
}

.card .bodyCard {
  margin: 15px;
}

.card .imgCard {
  width: 100%;
  height: 205px;
  margin: 0 auto;
  overflow: hidden;
}

.card .titleCard {
  margin: 5px;
}

.card .titleCard h1 {
  font-size: x-large;
  font-weight: bold;
}

.card .infoCard {
  margin: 5px;
  height: 123px;
}