body{
  font-family: 'Roboto', sans-serif;
  color: black;
  width: 100%;
  height: 100%;
  padding: 0vh;
  margin: 0vh;
  z-index: 1;
}
body p{
  font-size: 16px;  
}
*{
  margin: 0;
  padding: 0;
}
.titleSection{
  font-size: 40px;
  margin: 4vh 0;
  text-align: center;
  color: white;
  font-family: 'Fredericka the Great', cursive; 
}
/* ---------------------------- INICIO ANIMACION */
#estefania{
  min-height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background: linear-gradient(60deg,rgb(250, 128, 114),rgb(157, 224, 173), teal);
  /* background-image: url('./../../../Dragonfly-Wings-889x592.jpg'); */
  background-size: cover;
}
#estefania svg{
  z-index: 10;
}
#estefania h2{
  margin: -10vh auto 0;
  font-size: 40px;
  color: white;
  text-align: center;
  font-family: 'Fredericka the Great', cursive; 
  /* font-family: 'Marck Script', cursive; */
  /* font-family: 'Grand Hotel', cursive; */
  /* font-family: 'Cookie', cursive;  */  
}
/* ------------------------------- FIN ANIMACION */

/* ----------------------------- INICIO ABOUT ME */
#aboutMe{
  background-color: teal;  
  padding: 10vh 0;
  color: white;
  min-height: 100vh;
}
#aboutMe p{
  margin-top: 5vh;
  /*font-size: 2.8vh;*/
  line-height: 26px;
  text-align: right;
}
.myPic{
  margin: 2vh auto;
  width: 50vh;
  border: 1vh solid salmon;
}
/* -------------------------------- FIN ABOUT ME */

/* ------------------------------ INICIO MY WORK */
#myWork{
  background-color: #9de0ad;  
  padding: 10vh 0;
  min-height: 100vh;  
}
#myWork .row{
  margin: auto;
}
/* #myWork img{
  margin: 2vh 0 2vh -2vh;
} */
.demo a{
  color: white;
  text-decoration: underline;
  font-weight: bold;
  padding: 0.5vh;
  border-radius: 0.5vh;
}
.demo a:hover{
  background-color: teal;
  color: white;
}
/* --------------------------------- FIN MY WORK */

/* ------------------------------- INICIO SKILLS */
#skills{
  background-color: teal;
  color: white;
  padding-bottom: 2vh;
  min-height: 100vh;  
  text-align: center;
  display: flex;
  align-items: center;
}
#skills .row{
  height: 20vh;
}
#skills i{
  font-size: 60px;
  /* margin: 1vh 6vh; */
  padding: 1vh;
}
.materialize, .firebase, .chaijs{
  padding: 0 1vh;
  vertical-align: top;
}
.materialize{
  width: 100px;
  margin: 0.3vh auto 1vh auto;  
}
.firebase{
  width: 80px;
  margin: 0 auto 0.7vh;  
}
.chaijs{
  width: 11vh;
  /* height: 4.8vh; */
  margin: 0 auto ;  
}
.grid{
  margin: auto;
}
.eachSkill{
  padding-top: 1vh;
}
.eachSkill:hover{
  background-color: rgb(0, 71, 71);
  border-radius: 1vh;
}
/* ---------------------------------- FIN SKILLS */

/* ------------------------------ INICIO CONTACT */
#contact{
  background: linear-gradient(60deg,rgb(250, 128, 114),rgb(157, 224, 173), teal);  
  min-height: 100vh;  
  color: white;
  font-size: 16px;
}
#contact img{
  margin: 5vh 5vh 3vh 5vh;
  width: 7vh;
}
#contact p{
  margin-bottom: 5vw;
}
#contact label{
  margin-bottom: 1vh;
  float: left;
}
#contact .btn{
  background-color: teal;
  color: white;
  font-weight: bold;
  padding: 2.5vh;
  border-radius: 1vh;
}
#contact .btn:hover{
  background-color: salmon;
  color: white;
  font-weight: bold;  
}
#message{
  overflow: hidden;
  resize: none;
}
#showNumber{
  cursor: pointer;
}
#contact a{
  color: white;
  text-decoration: none;
}
#phoneNumber{
  cursor: pointer;  
  padding: 10vh 0;
}
.contactMedia{
  border: 1px solid white;
  margin: 3vh 1vh 6vh 1vh;
  cursor: pointer;
  border-radius: 1vh;
  height: 24vh;
}
/* --------------------------------- FIN CONTACT */
footer{
  height: 8vh;
  background-color: teal;
  color: white;
  text-align: right;
  padding: 3vh 0;
}
footer a{
  color: #9de0ad;
}
/* ---------------------------- INICIO ANIMACION */
.containerAnimation{
  margin: -80vh auto 0;
  background-color: rgba(0, 128, 128, 0.6);
  border-radius: 3vh;
  /* width: 80%; */
  /* border: 1px solid white; */
  /* border-spacing: 2vh;*/
}
.myName{
  margin: 0 auto 8vh -15px;
}
.lineName{
  stroke: white;
  fill: none;
  stroke-dasharray: 2190;
  opacity: 10;
  animation: animate 5s cubic-bezier(.43,.22,.41,.92);
  -moz-animation: animate 5s cubic-bezier(.43,.22,.41,.92);  
  -webkit-animation: animate 5s cubic-bezier(.43,.22,.41,.92);  
}
.lineT{
  stroke: white;
  fill: none;
  stroke-dasharray: 2190;
  opacity: 10;
  animation: animateT 5.2s cubic-bezier(.43,.22,.41,.92);
  -moz-animation: animateT 5.2s cubic-bezier(.43,.22,.41,.92);  
  -webkit-animation: animateT 5.2s cubic-bezier(.43,.22,.41,.92);  
  animation-timing-function: ease-in; 
  -moz-animation-timing-function: ease-in; 
  -webkit-animation-timing-function: ease-in; 
}
.lineI{
  stroke: white;
  fill: none;
  stroke-dasharray: 2190;
  opacity: 10;
  animation: animateI 5.5s cubic-bezier(.43,.22,.41,.92);
  -moz-animation: animateI 5.5s cubic-bezier(.43,.22,.41,.92);
  -webkit-animation: animateI 5.5s cubic-bezier(.43,.22,.41,.92);
}
@keyframes animate{
  0%{
    opacity: 10;
    fill: none;
    stroke: white;
    stroke-dashoffset: 2190;
  }
  30%{
    opacity: 10;
    fill: none;
    stroke: white;    
    stroke-dashoffset: 2190;
  }
  50%{
    stroke: white;
  }
  90%{
    stroke: white;
    fill: none;    
  }
  100%{
    opacity: 10;
    stroke-dashoffset: 0;
  }
}
@keyframes animateT{
  0%{
    opacity: 0;
    fill: none;
    stroke: transparent;
    stroke-dashoffset: 2190;
  }
  30%{
    opacity: 0;
    fill: none;
    stroke: transparent;    
    stroke-dashoffset: 2190;
  }
  95%{
    stroke: white;
    fill: none;    
    stroke-dashoffset: 2190;
    
  }
  100%{
    opacity: 10;
    stroke-dashoffset: 0;
  }
}
@keyframes animateI{
  0%{
    opacity: 0;
    fill: none;
    stroke: transparent;
    stroke-dashoffset: 2190;
  }
  30%{
    opacity: 0;
    fill: none;
    stroke: transparent;    
    stroke-dashoffset: 2190;
  }
  95%{
    stroke: white;
    fill: none;    
    stroke-dashoffset: 2190;
    
  }
  100%{
    opacity: 10;
    stroke-dashoffset: 0;
  }
}
/* ------------------------------- FIN ANIMACION */

/* ------------------------------------- HELPERS */
.flex{
  display: flex;
  align-items: center;
}
.showHide{
  display: none;
}