
@font-face {
  font-family: "KelsonSans";
 src: url("../fonts/Kelson/KelsonSans-Light.woff2");
  font-weight: 400;
}

@font-face {
  font-family: "KelsonSans";
  src: url("../fonts/Kelson/KelsonSans-Bold.woff2");
  font-weight: 600;
}

@font-face {
  font-family: "Raleway";
  src: url("../fonts/Raleway.ttf");
}

@font-face {
  font-family: "Bebas-Neue";
  src: url("../fonts/Bebas-Neue-Bold.ttf");
  font-weight: 600;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Bold.ttf");
  font-weight: 700;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Regular.ttf");
  font-weight: 400;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-SemiBold.ttf");
  font-weight: 600;
}

html, body{
  font-size: 12px;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
}

.row {
  display: flex;
  flex-direction: row;
}

.column {
  display: flex;
  flex-direction: column;
}

.header{
  background: black;
  padding-bottom: 2vw;
}

.container {
  width: 92%;
  margin: 0 auto;
}

.general{
  display: flex;
  position: relative;
  padding: 4.3vw 0 2vw 0;
  border-bottom: 0.2vw solid #949698;
  margin-bottom: 2vw;
}

.profile{
  width: 52%;
  display: flex;
  align-items: center;
  position: relative;
  border-right: 0.2vw solid #949698;
}

.avatar {
  max-width: 20vw;
  border-radius: 50%;
  margin-right: 3.3vw;
}

.text{
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-transform: uppercase;
  margin-right: 3.3vw;
}

.name{
  font-family: "KelsonSans", sans-serif;
  font-weight: 400;
  color: white;
  font-size: 3.5rem;
  margin: 0;
}

.surname{
  font-family: "KelsonSans", sans-serif;
  font-weight: 600;
  color: #d07628;
  font-size: 3.5rem;
  margin: 0;
}

.position{
  font-size: 1rem;
  color: white;
}

.info{
  width: 48%;
  display: flex;
  flex-direction: column;
  padding-left: 3vw;
  box-sizing: border-box;
}

.contacts {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 2vw;
}

.contact{
  display: block;
  text-decoration: none;
  font-size: 1rem;
  margin-bottom: 2vw;
}

.contact:last-child{
  margin-bottom: 0;
}

.contact-label {
  display: inline-block;
  width: 21%;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #a2a2a2;
}

.contact-value{
  /*font-family: "Montserrat", sans-serif;*/
  /*font-weight: 400;*/
  color: #a2a2a2;
}

.about {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: #a2a2a2;
  border-top: 0.2vw solid #949698;
  padding-top: 2vw;
}

.about-title {
  font-size: 2.3rem;
  font-family: "Bebas-Neue",sans-serif;
  font-weight: 600;
  margin: 0 0 2vw 0;
}

.about-description {
  font-size: 1rem;
  /*font-family: "Montserrat",sans-serif;*/
  /*font-weight: 400;*/
  margin: 0;
  line-height: 1.5rem;
}

.paragraph {
  box-sizing: border-box;
  padding: 5vw 4vw 4.5vw;
}

.list-social-icons{
  display: flex;
  flex-direction: row;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

/*.list-social-icons li:not(:last-of-type){*/

.list-social-icons li{
  margin-right: 5vw;
}

.list-social-icons li:last-child {
  margin-right: 0;
}

.link-social-icon{
  text-decoration: none;
  color: #b09ea7;
  font-size: 1.2rem;
  cursor: pointer;
}

.link-social-icon:hover{
  color: #d07628;
}

.link-social-icon i:after {
  display: inline-block;
  content: '';
  width: 1vw;
}
.info-experience{
  display: flex;
}

.experience{
  width: 61%;
}

.paragraph-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0 0 3.3vw;
}

.paragraph-title {
  text-transform: uppercase;
  font-family: "Bebas-Neue",sans-serif;
  font-weight: 600;
  color: #414142;
  font-size: 2.3rem;
  margin: 0;
}

.divider {
  display: flex;
  flex: 1;
  content: "";
  background:#949698;
  height: 0.2vw;
  margin: 2vw 0;
}

.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
}

.record {
  display: flex;
  flex-direction: row;
}

.record:not(:last-of-type) {
  margin-bottom: 2.4vw;
}

.timeline-column {
  min-width:15.7vw;
  margin-right: 4vw;
  text-align: right;
}

.record-position{
  color: #128fc1;
  font-size: 1.6rem;
  font-family: "Bebas-Neue", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
  white-space: pre-wrap;
}

.record-period{
  font-size: 1rem;
  /*font-family: "Montserrat-Regular";*/
  color: #808285;
}

.record-title {
  margin: 0 0 1.4vw 0;
  color: #414142;
  font-family: "Montserrat",sans-serif;
  font-weight: 600;
}

.record-description{
  font-size: 1rem;
  /*font-family: "Montserrat-Regular";*/
  margin: 0;
  line-height: 1.5rem;
  color: #808285;
}

.knowledge {
  width: 39%;
}

.pro-skills {
  min-height: 50%;
  background: #6fd0f6;
}

.per-skills {
  min-height: 50%;
  background: #eddc45;
}

.skills{
  list-style: none;
  padding: 0;
  margin: 0;
}

.skill {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.skill:not(:last-of-type) {
  margin-bottom: 1.9vw;
}

.skill-name {
  width: 36%;
  padding-right: 1.8vw;
  box-sizing: border-box;
  margin: 0;
  font-family: "Montserrat",sans-serif;
  font-weight: 600;
  text-align: right;
}

.progress-bar {
  position: relative;
  border: 0.1vw solid #303135;
  border-radius: 0.75vw;
  width: 57%;
  height: 1.5vw;
  box-sizing: border-box;
}

.progress {
  position: absolute;
  width: 50%;
  left: -0.1vw;
  bottom: -0.1vw;
  height: 1.51vw;
  background: black;
  border-radius: 0.85vw;
}

.education{
  background: #e4e2e3;
}

.hobbies{
  width: 61%;
  background: white;
}

.list-hobbies{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;

}

.hobby{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #414042;
}

.icon-hobby{
  font-size: 1.8rem;
  margin-bottom: 2vw;
}

.hobby-name{
  font-size: 1rem;
  font-family: "Montserrat",sans-serif;
  font-weight: 600;
}

.language{
  width: 39%;
  background:#f0efef;
}


