/* ~~~~~~~~~~~ GENERAL ~~~~~~~~~~~ */
html, body, ul, div {
  margin: 0;
  padding: 0;
}

p, span, li {
  font-family: "Source Sans Pro", "Alegreya Sans", "Noto Sans", sans-serif;
  font-size: 14px;
  line-height: 20px;
}

h1, h2, h3, h4 {
  font-family: "Source Sans Pro", "Alegreya Sans", "Noto Sans", serif;
}

section h3 {
  font-weight: 600;
}

/* ~~~~~~~~~~~ LINKS ~~~~~~~~~~~ */
a {
  font-family: "Source Sans Pro", "Alegreya Sans", "Noto Sans", sans-serif;
  color: #0089ff;
  text-decoration: none;
  border-bottom: 1px rgba(0, 0, 0, 0) solid;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  -moz-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
a p {
  font-family: "Source Sans Pro", "Alegreya Sans", "Noto Sans", sans-serif;
  color: #0089ff;
  text-decoration: none;
  border-bottom: 1px rgba(0, 137, 255, 0.8) solid;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  -moz-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
a:visited {
  color: #0089ff;
}
a.constant {
  color: #008ACE;
}
a:hover, a p:hover {
  color: #CC0000;
  text-decoration: none;
  border-bottom: 1px #CC0000 solid;
}
a.in-dev {
  color: #A1A1A1;
}

/* ~~~~~~~~~~~~~~ COMMON ~~~~~~~~~~~~~~ */
.centered {
  position: relative;
  width: 100%;
  text-align: center;
}

/* ~~~~~~~~~~~~~~ HEADER ~~~~~~~~~~~~~~ */
.header {
  margin: 60px 0 0 50px;
  position: relative;
  /* language switcher */
}
@media only screen and (orientation: portrait), (max-device-height: 768px) {
  .header {
    margin: 60px 20px 0 20px;
  }
}
.header .link-home {
  display: inline-block;
  margin-right: 5px;
}
.header .link-home:hover {
  text-decoration: none;
  border-bottom: 0 white;
}
.header .link-home img {
  width: 15px;
  height: 15px;
  vertical-align: middle;
  margin-top: -3px;
}
.header .link-home img:hover {
  filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg);
}
.header .header-controls {
  font-family: "Source Sans Pro", "Alegreya Sans", "Noto Sans", sans-serif;
  font-size: 15px;
  position: absolute;
  top: -40px;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  -moz-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.header-content {
  display: inline-block;
}
.header-content .title, .header-content .description {
  text-align: left;
}
.header-content .title span {
  font-family: "Source Sans Pro", "Alegreya Sans", "Noto Sans", serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 36px;
  display: inline-block;
  color: #30415D;
}
.header-content .title .who {
  margin: 0 0 10px 0;
  font-weight: 700;
}
.header-content .description {
  padding-top: 5px;
  max-width: 700px;
  font-weight: normal;
}
@media only screen and (orientation: portrait), (max-device-height: 768px) {
  .header-content .description {
    padding-top: 20px;
  }
}
.header-content .description .description-line {
  display: block;
  margin-bottom: 10px;
  font-size: 18px;
  line-height: 32px;
}
@media only screen and (orientation: portrait), (max-device-height: 768px) {
  .header-content .description .description-line {
    font-size: 16px;
    line-height: 26px;
  }
}

/* ~~~~~~~~~~~~~~ ABOUT ~~~~~~~~~~~~~~ */
.about {
  margin: 0;
  padding-left: 50px;
}
@media only screen and (orientation: portrait), (max-device-height: 768px) {
  .about {
    padding: 0 20px 0 20px;
  }
}
.about .content {
  display: inline-block;
  text-align: left;
}
.about .content p {
  font-size: 18px;
  line-height: 32px;
  max-width: 900px;
}
@media only screen and (orientation: portrait), (max-device-height: 768px) {
  .about .content p {
    font-size: 16px;
    line-height: 26px;
  }
}

/* ~~~~~~~~~~~~~~ CONTACTS ~~~~~~~~~~~~~~ */
.contacts {
  width: 100%;
  padding: 0 0 0 50px;
}
@media only screen and (orientation: portrait), (max-device-height: 768px) {
  .contacts {
    padding: 0 0 0 20px;
  }
}
.contacts .content {
  display: inline-block;
  text-align: left;
}
.contacts .links {
  margin-top: 15px;
  list-style-type: none;
}
.contacts .links span {
  font-size: 20px;
  font-weight: 600;
  float: left;
  margin: 0 15px 0 0;
}
.contacts .links li {
  font-size: 20px;
  float: left;
  padding: 0 20px 10px 0;
}

/* ~~~~~~~~~~~~~~ PROJECTS ~~~~~~~~~~~~~~ */
.projects {
  margin: 20px 0 40px 0;
}
.projects h3 {
  margin: 0 0 10px 50px;
  font-weight: 700;
}
@media only screen and (orientation: portrait), (max-device-height: 768px) {
  .projects h3 {
    margin: 0 0 10px 20px;
  }
}
.projects .project {
  display: inline-block;
  width: 100%;
  text-align: left;
  padding: 20px 0 30px 120px;
  background-color: rgba(204, 203, 198, 0.1);
  border-top: 1px solid rgba(204, 203, 198, 0.3);
}
@media only screen and (orientation: portrait), (max-device-height: 768px) {
  .projects .project {
    padding: 20px 0 30px 90px;
  }
}
.projects .project .project-title, .projects .project .project-note, .projects .project .project-description, .projects .project .project-screenshots, .projects .project .project-techs, .projects .project .project-refs {
  display: block;
  color: black;
}
.projects .project .project-title {
  font-size: 20px;
  line-height: 22px;
  margin-bottom: 10px;
}
.projects .project .project-date {
  font-size: 16px;
  font-style: normal;
  margin: 6px 0 0 -70px;
  color: #8c8c8c;
  position: absolute;
}
@media only screen and (orientation: portrait), (max-device-height: 768px) {
  .projects .project .project-date {
    font-size: 14px;
  }
}
.projects .project .project-description {
  font-size: 18px;
  line-height: 34px;
  margin-bottom: 10px;
  max-width: 900px;
}
@media only screen and (orientation: portrait), (max-device-height: 768px) {
  .projects .project .project-description {
    font-size: 16px;
    line-height: 26px;
  }
}
.projects .project .project-description a span {
  border-bottom: 1px solid rgba(0, 0, 0, 0);
  font-size: 18px;
  white-space: nowrap;
}
.projects .project .project-description a img {
  height: 20px;
  margin: -8px 6px 0 2px;
}
@media only screen and (orientation: portrait), (max-device-height: 768px) {
  .projects .project .project-description a img {
    height: 18px;
  }
}
.projects .project .project-screenshots {
  margin: 0 0 15px 0;
}
.projects .project .project-screenshots a {
  text-decoration: none;
  border: none;
}
.projects .project .project-screenshots a img {
  border: 2px solid rgba(0, 0, 0, 0.05);
  border-radius: 3px;
  margin-right: 10px;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  -moz-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.projects .project .project-screenshots a img:hover {
  border: 2px solid #7DCDE8;
}
.projects .project .project-techs {
  font-size: 18px;
  line-height: 34px;
  max-width: 900px;
  color: rgba(0, 0, 0, 0.6);
}
@media only screen and (orientation: portrait), (max-device-height: 768px) {
  .projects .project .project-techs {
    font-size: 16px;
    line-height: 26px;
  }
}
.projects .project .project-techs span {
  font-size: 18px;
  line-height: 34px;
  font-weight: 600;
  color: #30415D;
}
@media only screen and (orientation: portrait), (max-device-height: 768px) {
  .projects .project .project-techs span {
    font-size: 16px;
    line-height: 26px;
  }
}
.projects .project .project-refs {
  margin: 20px 0 0 0;
}
.projects .project .project-refs ul {
  list-style: none;
}
.projects .project .project-refs ul li {
  font-size: 18px;
  display: block;
  margin-top: 15px;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  -moz-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (orientation: portrait), (max-device-height: 768px) {
  .projects .project .project-refs ul li {
    font-size: 16px;
    line-height: 26px;
  }
}
.projects .project .project-refs ul li a {
  border-bottom: 1px solid rgba(0, 0, 0, 0);
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  -moz-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.projects .project .project-refs ul li a:hover {
  border-bottom: 1px solid;
}
.projects .project .project-refs ul li span {
  font-size: 18px;
  font-style: italic;
}
.projects .project#project-datagrate a:not(:hover) {
  color: #4a90e2;
}
.projects .project#project-datagrate .project-description span.scs {
  color: #4a90e2;
}
.projects .project#project-telecom a:not(:hover) {
  color: #e60000;
}
.projects .project#project-telecom .project-description span.scs {
  color: #e60000;
}
.projects .project#project-toptal {
  border-bottom: 1px solid #00CC83;
  background-color: #204ECF;
  padding: 20px 0 15px 120px;
}
@media only screen and (orientation: portrait), (max-device-height: 768px) {
  .projects .project#project-toptal {
    padding: 20px 0 15px 90px;
  }
}
.projects .project#project-toptal .project-description {
  color: white;
  -webkit-font-smoothing: antialiased;
}
.projects .project#project-toptal img {
  background-color: white;
  display: inline;
  height: 24px;
  border-radius: 5px;
  border-bottom: 1px solid #00CC83;
  padding: 4px;
  margin: -2px 5px 0 5px;
  vertical-align: center;
  -webkit-font-smoothing: antialiased;
}
.projects .project#project-toptal a:not(:hover) {
  color: #00CC83;
}
.projects .project#project-toptal a:hover {
  color: #b1ffda;
  border-color: #b1ffda;
}
.projects .project#project-fasten .project-description, .projects .project#project-fasten .project-refs {
  border-color: #3cc47c;
}
.projects .project#project-fasten a:not(:hover) {
  color: #3cc47c;
}
.projects .project#project-magnit a:not(:hover) {
  color: #ff3b3f;
}

/* ~~~~~~~~~~~~~~ PUBLICATIONS ~~~~~~~~~~~~~~ */
.publications {
  margin-bottom: 30px;
}
.publications h3 {
  padding-left: 50px;
  margin-bottom: 20px;
}
@media only screen and (orientation: portrait), (max-device-height: 768px) {
  .publications h3 {
    padding: 0 20px 0 20px;
  }
}
.publications ul {
  margin-left: 50px;
  list-style: none;
}
@media only screen and (orientation: portrait), (max-device-height: 768px) {
  .publications ul {
    margin: 0 20px 0 20px;
  }
}
.publications ul li {
  font-size: 18px;
  line-height: 38px;
}
@media only screen and (orientation: portrait), (max-device-height: 768px) {
  .publications ul li {
    font-size: 16px;
    line-height: 26px;
  }
}

/* ~~~~~~~~~~~~~~ CONFERENCES ~~~~~~~~~~~~~~ */
.conferences h3 {
  padding-left: 50px;
}
@media only screen and (orientation: portrait), (max-device-height: 768px) {
  .conferences h3 {
    padding: 0 20px 0 20px;
  }
}
.conferences ul {
  margin-left: 50px;
  list-style: none;
}
@media only screen and (orientation: portrait), (max-device-height: 768px) {
  .conferences ul {
    margin: 0 20px 0 20px;
  }
}
.conferences ul li {
  font-size: 18px;
  line-height: 38px;
  margin-bottom: 10px;
}
@media only screen and (orientation: portrait), (max-device-height: 768px) {
  .conferences ul li {
    font-size: 16px;
    line-height: 26px;
  }
}
.conferences ul li span.by {
  font-size: 18px;
  font-style: italic;
}
.conferences ul li .conf-images {
  margin: 0 0 15px 0;
}
.conferences ul li .conf-images a {
  text-decoration: none;
  border: none;
}
.conferences ul li .conf-images a img {
  border: 2px solid rgba(0, 0, 0, 0.05);
  border-radius: 3px;
  margin-right: 10px;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  -moz-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.conferences ul li .conf-images a img:hover {
  border: 2px solid #7DCDE8;
}

/* ~~~~~~~~~~~~~~ CERTIFICATIONS ~~~~~~~~~~~~~~ */
.certifications h3 {
  padding-left: 50px;
}
@media only screen and (orientation: portrait), (max-device-height: 768px) {
  .certifications h3 {
    padding: 0 20px 0 20px;
  }
}
.certifications ul {
  margin-left: 50px;
  list-style: none;
}
@media only screen and (orientation: portrait), (max-device-height: 768px) {
  .certifications ul {
    margin: 0 20px 0 20px;
  }
}
.certifications ul li {
  font-size: 18px;
  line-height: 38px;
  margin-bottom: 10px;
}
@media only screen and (orientation: portrait), (max-device-height: 768px) {
  .certifications ul li {
    font-size: 16px;
    line-height: 26px;
  }
}
.certifications ul li span.by {
  font-size: 18px;
  font-style: italic;
}

/* ~~~~~~~~~~~~~~ FOOTER ~~~~~~~~~~~~~~ */
.footer {
  width: 100%;
  padding: 0 50px 0 50px;
}
@media only screen and (orientation: portrait), (max-device-height: 768px) {
  .footer {
    padding: 0 20px 0 20px;
  }
}
.footer .content {
  width: 100%;
  text-align: left;
  display: inline-block;
  margin: 20px 0 10px 0;
  border-top: 1px #C0C0C0 solid;
  color: #C0C0C0;
}
.footer .content p {
  padding-top: 10px;
}

/*# sourceMappingURL=work.css.map */