@charset "UTF-8";
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden] {
  display: none;
}

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

a:focus {
  outline: thin dotted;
}

a:active,
a:hover {
  outline: 0;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

hr {
  box-sizing: content-box;
  height: 0;
}

mark {
  background: #ff0;
  color: #000;
}

code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}

pre {
  white-space: pre-wrap;
}

q {
  quotes: "“" "”" "‘" "’";
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 0;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}

button,
input {
  line-height: normal;
}

button,
select {
  text-transform: none;
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

input[type=checkbox],
input[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

input[type=search] {
  -webkit-appearance: textfield;
  box-sizing: content-box;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

@font-face {
  font-family: "WorkSans";
  src: url("../fonts/WorkSansRegular.eot");
  src: url("../fonts/WorkSansRegular.eot") format("embedded-opentype"), url("../fonts/WorkSansRegular.woff2") format("woff2"), url("../fonts/WorkSansRegular.woff") format("woff"), url("../fonts/WorkSansRegular.ttf") format("truetype"), url("../fonts/WorkSansRegular.svg#WorkSansRegular") format("svg");
}
@font-face {
  font-family: "WorkSansSemiBold";
  src: url("../fonts/WorkSansSemiBold.eot");
  src: url("../fonts/WorkSansSemiBold.eot") format("embedded-opentype"), url("../fonts/WorkSansSemiBold.woff2") format("woff2"), url("../fonts/WorkSansSemiBold.woff") format("woff"), url("../fonts/WorkSansSemiBold.ttf") format("truetype"), url("../fonts/WorkSansSemiBold.svg#WorkSansSemiBold") format("svg");
}
@keyframes pageFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@font-face {
  font-family: "fontello";
  src: url("../fonts/fontello.eot?19999311");
  src: url("../fonts/fontello.eot?19999311#iefix") format("embedded-opentype"), url("../fonts/fontello.woff2?19999311") format("woff2"), url("../fonts/fontello.woff?19999311") format("woff"), url("../fonts/fontello.ttf?19999311") format("truetype"), url("../fonts/fontello.svg?19999311#fontello") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
	@font-face {
		font-family: 'fontello';
		src: url('../fonts/fontello.svg?19999311#fontello') format('svg');
	}
}
*/
[class^=icon-]:before,
[class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: never;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: 0.2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-phone:before {
  content: "\e800";
}

/* '' */
.icon-globe:before {
  content: "\e801";
}

/* '' */
.icon-home:before {
  content: "\e802";
}

/* '' */
.icon-mail-alt:before {
  content: "\f0e0";
}

/* '' */
.icon-birthday:before {
  content: "\f1fd";
}

/* '' */
::-moz-selection {
  background: #E8737D;
}

::selection {
  background: #E8737D;
}

body {
  padding-top: 40px;
  color: #000000;
  font-family: "WorkSans", Helvetica, Arial, "sans-serif";
  -webkit-font-smoothing: antialiased;
  animation: pageFadeIn 600ms;
  font-size: 4vw;
}

h1,
h2 {
  font-family: "WorkSansSemiBold", Helvetica, Arial, "sans-serif";
}

a:link,
a:visited,
a:hover,
a:active {
  color: #000000;
}

ul {
  padding-left: 0px;
  list-style-type: none;
}

ul li i {
  padding-right: 7px;
}

span.nobr {
  white-space: nowrap;
}

.container {
  width: calc(100% - 40px);
  max-width: 1080px;
  padding: 0px 20px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  grid-template-areas: "introduction" "personal" "work" "education" "management-skills" "tech-skills" "personalia";
}

.container .introduction,
.container .personal,
.container .work,
.container .education,
.container .management-skills,
.container .tech-skills,
.container .personalia {
  margin: 0px 0px 10px 0px;
}

.container .work,
.container .education,
.container .management-skills,
.container .tech-skills,
.container .personalia {
  border-top: 1px solid #8E8A8A;
}

.container .work h2,
.container .education h2,
.container .management-skills h2,
.container .tech-skills h2,
.container .personalia h2 {
  text-transform: uppercase;
  margin-top: 5px;
}

.container .introduction {
  grid-area: introduction;
}

.container .introduction h1 {
  text-transform: uppercase;
  margin-bottom: 5px;
}

.container .introduction span {
  color: #8E8A8A;
}

.container .personal {
  grid-area: personal;
}

.container .work,
.container .education,
.container .management-skills,
.container .tech-skills,
.container .personalia {
  border-top: 1px solid #8E8A8A;
}

.container .work h2,
.container .education h2,
.container .management-skills h2,
.container .tech-skills h2,
.container .personalia h2 {
  text-transform: uppercase;
  margin-top: 5px;
}

.container .work {
  grid-area: work;
}

.container .education {
  grid-area: education;
}

.container .management-skills {
  grid-area: management-skills;
}

.container .tech-skills {
  grid-area: tech-skills;
}

.container .personalia {
  grid-area: personalia;
}

.subsection {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  grid-template-rows: auto;
  grid-template-areas: "start end ." "info info info";
  grid-column-gap: 20px;
  margin-bottom: 10px;
}

.subsection span {
  justify-self: start;
  color: #8E8A8A;
  font-size: 3.5vw;
}

.subsection span:nth-child(1) {
  grid-area: start;
}

.subsection span:nth-child(2) {
  grid-area: end;
}

.subsection div {
  grid-area: info;
}

.subsection div p {
  margin: 0px 0px 7px 0px;
}

.summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "type ." "items details";
  grid-column-gap: 20px;
  margin-bottom: 10px;
}

.summary span {
  color: #8E8A8A;
  grid-area: type;
  font-size: 3.5vw;
}

.summary ul {
  margin-top: 0px;
}

.summary div.items {
  grid-area: items;
}

.summary div.details {
  grid-area: details;
}

@media only screen and (min-width: 500px), print {
  body {
    font-size: 2.5vw;
  }
  .introduction {
    padding-right: 15px;
  }
  .subsection {
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto;
    grid-template-areas: "start info" "end info";
  }
  .subsection span {
    justify-self: end;
    font-size: 2vw;
  }
  .summary span {
    font-size: 2sw;
  }
  .summary {
    grid-template-columns: 1fr 1fr 2fr;
    grid-template-areas: "type items details";
  }
  .summary span {
    justify-self: end;
    font-size: 2vw;
  }
}
@media only screen and (min-width: 750px), print {
  body {
    font-size: 2vw;
  }
  .subsection span {
    font-size: 1.5sw;
  }
  .summary span {
    font-size: 1.5sw;
  }
  .container {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "introduction personal" "work work" "education education" "management-skills management-skills" "tech-skills tech-skills" "personalia personalia";
  }
}
@media only screen and (min-width: 960px), print {
  body {
    font-size: initial;
  }
  .subsection span {
    font-size: 12px;
  }
  .summary span {
    font-size: 12px;
  }
}
@media only screen {
  div.personalia div.summary:nth-child(4) div:nth-child(3) {
    display: none;
  }
}
@media only print {
  body {
    padding-top: 0px;
    font-size: initial;
  }
  h1 {
    font-size: 22px;
  }
  body h2 {
    font-size: 18px;
  }
  .subsection span,
  .summary span,
  p,
  ul li {
    font-size: 12px;
  }
  a:link,
  a:visited,
  a:hover,
  a:active {
    color: #000000;
    text-decoration: none;
  }
}