

html, body {
  height:100%;
  width: 100%;
  scroll-behavior: smooth;
  background-color: #f7f7f7;
  overflow-y: overlay;
  box-sizing: border-box;
  font-family: Sans-Serif;
}


@media (min-width: 550px) {

  html, body {
    height:100%;
    /*
    width: calc(100vw - 60px);
    padding-left: 60px;
    */
    width: 100%;
    padding-left: 27px;
    scroll-behavior: smooth;
    background-color: #f7f7f7;
    overflow-y: overlay;
    box-sizing: border-box;
  }
  
}



.wrapper {
    margin: 0;
    padding: 0;
    
    height: 100vh;
    width: calc(100vw - 60px);
    align-self: center;
    justify-self: center;
    box-sizing: border-box;
}

* {
    box-sizing: inherit;
}


.title {
  background-color: #000000;
}


 @media (max-width: 992px) {
    .aboutme {
      margin-bottom: 50px;
    }
  }


.currency { font-size:16px; }
.number { font-size:22px; }
.decimal { font-size:14px; }


.title{
  background: url("../images/header.jpg") no-repeat top center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100vh;
  width: calc(100vw - 60px);
/*    left: -2.5vw;*/

}


.title h2 {
  margin-top: 30vh;
  text-align: left;
  color: white;
  font-size: 6vw;
  font-weight: 400;
  margin-left: 50px;
}

.title h4 {
  margin-top: -20vh;
  text-align: left;
  color: white;
  font-size: 1vw;
  font-weight: 100;
  margin-left: 50px;
}


.referenceicture {
    background: url("../images/baloons.png");
    background-size: cover;
    height: 80vh;
    width: calc(100vw - 70px);

}


.parra-one {
  background: url("../images/parrallax/p1.jpeg") no-repeat top center fixed;
    background-size: cover;
    height: 55vh;
    width: calc(100vw - 70px);
}
.parra-two {
  background: url("../images/parrallax/p2.jpg") no-repeat top center fixed;
    background-size: cover;
    height: 55vh;
    width: calc(100vw - 70px);
}

.parra-three {
  background: url("../images/parrallax/p3.jpeg") no-repeat top center fixed;
    background-size: cover;
    height: 55vh;
    width: calc(100vw - 70px);
}

.parra-four {
  background: url("../images/parrallax/p4.jpeg") no-repeat top center fixed;
    background-size: cover;
    height: 55vh;
    width: calc(100vw - 70px);
}

.parra-five {
  background: url("../images/parrallax/p5.jpeg") no-repeat top center fixed;
    background-size: cover;
    height: 55vh;
    width: calc(100vw - 70px);
}

.parra-six {
  background: url("../images/parrallax/p6.jpeg") no-repeat top center fixed;
    background-size: cover;
    height: 55vh;
    width: calc(100vw - 70px);
}

.parra-seven {
  background: url("../images/parrallax/p7.jpeg") no-repeat top center fixed;
    background-size: cover;
    height: 55vh;
    width: calc(100vw - 70px);
}

.parra-eight {
  background: url("../images/parrallax/p8.jpeg") no-repeat top center fixed;
    background-size: cover;
    height: 55vh;
    width: calc(100vw - 70px);
}



.right-pic {
  height: 50vh;
  width: 100%;
}
.left-pic {
  height: 50vh;
  width: 100%;
}

.charac-pic-text {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
}
 
  

  @media (max-width: 550px) {
    .left-pic {
      height: 50vh;
      width: calc(100vw - 70px);

    }
    .right-pic {
      height: 50vh;
      width: calc(100vw - 70px);
    }
  }
    

.parrallaxpicturetwo {
  background: url("../images/parrallax/circle.png");
    background-size: cover;
    height: 80vh;
    width: calc(100vw - 70px);

}



.scroll {
  text-align: center;
  color: white;
  font-size: 1.5em;
  font-weight: 50;
}

.blue-text {
  color: #2980b9;
}
.green-text {
  color: #16a085;
}
.red-text {
  color: #cc0000;
}


.text-center{
  text-align: center;
}
.text-jusitfy{
  text-align: justify;
}
.text-left{
  text-align: left;
}
.examen {
  padding-top: 10px;
}



.btn {
  cursor: pointer;
  margin: 10px;
  border-radius: 5px;
  text-decoration: none;
  padding: 10px;
  font-size: 22px;
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -o-transition: .3s;
  display: inline-block;
}



.color {
  color: #fff;
  border: 2px #fff solid;
}

.color:hover {
  color: #fff;
  border: 2px #2980b9 solid;
  color: #fff;
  background-color: #2980b9;
}

.download {
  color: #2980b9;
  border: 2px #2980b9 solid;
  margin: 5px;
  padding: 5px;
  font-size: 18px;
}









@media (min-width: 550px) {

  .title{
    background: url("../images/header.jpg") no-repeat top center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100vh;
    width: calc(100vw - 70px);
    margin: 0;
    padding: 0;
    margin-bottom: 0vh;
    text-align: center;
  }

  .title h1 {
    font-size: 10vw;
  }

  .referenceicture {
    background: url("../images/baloons.png") no-repeat top center fixed;
    background-size: cover;
    height: 80vh;
    width: calc(100vw - 70px);
    margin: 0;
    padding: 0;
    color: white;
    text-align: center;
    font-size: 30px;
  }

  .parrallaxpicturetwo {
      background: url("../images/parrallax/circle.png") no-repeat top center fixed;
      background-size: cover;
      height: 80vh;
      width: calc(100vw - 70px);
      margin: 0;
      padding: 0;
      color: white;
      text-align: center;
      font-size: 30px;
    }

}


@media (min-width: 768px) {
  .title h1 {
    font-size: 10vw;
  }

}


@media screen and (max-width: 768px) and (orientation:landscape) {
  .title{
    background: url("../images/header.jpg")no-repeat top center fixed;
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    height: 100vh;
    width: calc(100vw - 70px);

  }

  .referenceicture{
    background: url("../images/baloons.png");
    background-size: cover;
    height: 80vh;
    width: calc(100vw - 70px);
  }

  .parrallaxpicturetwo {
    background: url("../images/parrallax/circle.png");
    background-size: cover;
    height: 80vh;
    width: calc(100vw - 70px);
  }
}





















/*------------info card------------*/

.me {
  width: 447px;
  height: 575px;
}


.card {
  border: 1px solid rgba(0, 0, 0, 0.15);
  background-color: #fff;
  margin-top: -40px;
  width: calc(100vw - 70px);
}

.card-timeline {
  border: 1px solid rgba(0, 0, 0, 0.15);
  background-color: #fff;
  padding-top: 200px;
  padding-bottom: 120px;
  width: calc(100vw - 70px);
}


@media (min-width: 992px) {

  .card {
    margin: auto;
    margin-top: 20px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.15);
  }
  .card-timeline {
    margin: auto;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.15);
    background-color: #fff;
    padding-top: 200px;
    padding-bottom: 120px;
  }
}

@media (max-width: 550px) {

  .card {
    border: 1px solid rgba(0, 0, 0, 0.15);
    background-color: #fff;
    margin-top: -40px;
    width: 96vw;
  }
  .card-timeline {
    border: 1px solid rgba(0, 0, 0, 0.15);
    background-color: #fff;
    margin-top: -40px;
    width: 96vw;
    padding-top: 200px;
    padding-bottom: 120px;
  }

}





.int {
  width: 45px;
  height: 45px;
  position: relative;
}

.social-media {
  width:45px;
  height:45px;
}

.padding {
  padding: 20px;
}

.margin {
  margin: 300px;
}

.card-info::-webkit-scrollbar { 
    display: none; 
}

.contact-info::-webkit-scrollbar { 
    display: none; 
}


.card-info {
  overflow: scroll;
      align-items: center;
    justify-items: center;
/*  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;*/
}

.name {
  margin-bottom: -10px;
  margin-top: 10px;
  font-size: 2.5em;
  font-weight: 50
}

.contact-title {
  margin-bottom: 10px;
  margin-top: 10px;
  font-size: 2.5em;
  font-weight: 50
}


.about {
    margin-top: -10px;
  } 

.about p {
  position: relative;
  top: -5px;
}




.contact-info {
  overflow: overlay;
/*  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;*/
}

.contact{

    margin-top: -1em;
    margin-bottom: -2em;

  }

.time-edu {
    text-align: left;
    font-size: 2.5em;
  font-weight: 50
}
.time-work {
    text-align: left;
    font-size: 2.5em;
  font-weight: 50
}
.time-age {
    text-align: left;
  font-size: 2.5em;
  font-weight: 50;
}

.projects{
  margin-top: 2em;

}

.photoaccordian{
  margin-top: 3em;
}



  


 .card-info {
    height: 426px;
    overflow: overlay;
/*    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;*/
  }


  .contact-info {
    overflow: overlay;
/*    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;*/
  }


 

  .about {
    margin-top: -10px;
  }


}


@media (max-width: 768px) {

  .contact{
    margin-top: 50px;
    margin-bottom: 1em;

  }
}















.space {
  margin-bottom: 5vh;
}

.white {
  filter: invert(93%) sepia(93%) saturate(0%) hue-rotate(303deg) brightness(106%) contrast(108%);
}
.black {
  filter: invert(0%) sepia(6%) saturate(7500%) hue-rotate(328deg) brightness(94%) contrast(106%);
}
.gray {
  filter: invert(50%) sepia(50%) saturate(50%) hue-rotate(328deg) brightness(94%) contrast(106%);
}















.bold-text {
  font-weight: bold;
}

.blue-text {
  color: #2980b9;
}
.green-text {
  color: #16a085;
}
.red-text {
  color: #cc0000;
}



.card-work {
  /*border: 1px solid rgba(0, 0, 0, 0.15);*/
  background-color: none;
  width: 90vw;
  max-width: 1200px;
  margin: auto;
  text-align: left;
  
}

.chart-work {
   style="height: 25vh; 
   min-height: 200px; 
   max-height: 400px; 
   width: 50vw; 
   max-width: 400px;
}

.sum-work {

}

  @media (max-width: 550px) {
    .chart-work {
      style="height: 40vh; 
      min-height: 200px; 
      max-height: 400px; 
      width: 50vw; 
      max-width: 400px;
    }
  }
    


.card-education {
  /*border: 1px solid rgba(0, 0, 0, 0.15);*/
  background-color: none;
  width: 90vw;
  max-width: 1200px;
  margin: auto;
  text-align: left;
}

.chart-education {
   style="height: 25vh; 
   min-height: 200px; 
   max-height: 400px; 
   width: 50vw; 
   max-width: 400px;
}

.sum-education {

}

  @media (max-width: 550px) {
    .chart-education {
      style="height: 40vh; 
      min-height: 200px; 
      max-height: 400px; 
      width: 50vw; 
      max-width: 400px;
    }
  }


