body {
  font-family: 'Barlow', sans-serif;
  background:url(circles-light.png);
  color:#343434;
  font-size:18px;
}

.container {
  width:95%;
  max-width: 1266px;
  margin:1rem auto;
  display:flex;
  flex-wrap: wrap;
  box-shadow: 1px 1px 4px 3px #969696;
}

.personal-info {
  width:25%;
  color:white;
  background:#003d74;
  padding:1rem 0;
  font-size:16px;
}

.inside-container {
  padding:1rem;
}

.personal-info .header {
  display:flex;
}

.personal-info .header  .name {
  font-weight: bold;
  font-size:31px;
  display:block;
}

.personal-info .header .profile {
  font-size:18px;
}

.personal-info .header img {
    max-width: 105px;
    padding-right: 1rem;
}

.personal-info a {
  color:white;
}

.general-info {
  width:75%;
  background:white;
}

.sideheader {
  background:#002e58;
  display:block;
  font-size:20px;
  font-weight: bold;
  padding:8px 1rem;
}

.contact-info .headline {
  display:block;
  font-weight: bold;
  margin-top:1rem;
}

.contact-info .headline:first-child{
  margin-top:0;
 }

 .skill {
   display:flex;
   flex-direction:column;
   margin-bottom:1rem;
 }

.skill .skill-header {
    display: block;
}

.skill .skill-bar {
  display: block;
  width: 100%;
  height: 10px;
  background: #002e58;
  margin: 10px 0;
}

.skill-bar-filled {
  background: white;
  height: 100%;
  display:block;
  width:0%;

}

.skill-bar-filled.forty {
  width:40%;
}

.skill-bar-filled.fifty {
  width:50%;
}

.skill-bar-filled.sixty {
  width:60%;
}

.skill-bar-filled.eighty {
  width:80%;
}

.skill-bar-filled.eighty-five {
  width:85%;
}

.skill-bar-filled.ninety-five {
  width:95%;
}

.skill-bar-filled.hundred {
  width:100%;
}

.skill-description {
  align-self:flex-end;
}

.general-info .inside-container {
  padding:1rem 2rem;
}

.general-info h2 {
  color:#002e58;
  border-top:2px solid #d5d6d6;
  border-bottom:2px solid #d5d6d6;
  padding:6px 1rem;
}

.experience-item {
  display:flex;
  margin-bottom:2rem;
}

.experience-item .period {
  width:15%;
  margin-right:1rem;
}

.experience-item .details {
  width:85%;
}

.experience-item h3 {
  margin:0;
  font-size:24px;
}

.experience-item .company {
  font-size:19px;
  padding-left:27px;
  font-style: italic;
  display:block;
  margin-top:5px;
}

.company.leaf {
  background:url(leaf-icon.png) top left no-repeat;
  height: 32px;
}


.company.fmp {
  background:url(fmp-icon.png) top left no-repeat;
  padding-left: 80px;
}


.company.bairesdev {
  background:url(bairesdev-icon.png) top left no-repeat;
}

.company.webventures {
  background:url(webventures-icon.png) top left no-repeat;
}

.company.eptisa {
  background:url(eptisa-icon.png) top left no-repeat;
  padding-left: 67px;
}

.company.adm {
  background:url(adm-icon.png) top left no-repeat;
  padding-left: 68px;
}

.company.aconex {
  background:url(aconex-icon.png) top left no-repeat;
}

.company.wsm {
  background:url(wsm-icon.png) top left no-repeat;
}

@media only screen and (max-width: 1024px) {
  .personal-info {
    width: 42%;
  }

  .general-info {
    width:58%;
  }

  .experience-item {
    flex-direction: column;
    border-bottom: 3px solid lightgray;
    padding-bottom: 2rem;
  }

  .experience-item .period {
    width:100%;
    margin-bottom:1rem;
  }
}



@media only screen and (max-width: 667px) {
  .personal-info {
    width: 100%;
  }

  .general-info {
    width:100%;
  }
}