/* roboto-100 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: local('Roboto Thin'), local('Roboto-Thin'),
       url('fonts/roboto-v20-latin-100.woff') format('woff');
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('fonts/roboto-v20-latin-regular.woff') format('woff');
}
/* roboto-700italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
       url('fonts/roboto-v20-latin-700italic.woff') format('woff');
}    
.body     {font-size: 100%}

p         {font-family: Roboto;
          font-size: 1em;
          }

p.center  {text-align: center;
          font-size: 3em;}

p.bold    {margin: 0px;
          font-weight: 700;
          font-style: italic;
          text-transform: uppercase;
          line-height: 2,5em}

p.light   {margin: 0px;
          font-family: Roboto;
          font-weight: 100;
          line-height: 1,5em;}

h1        {font-family: Roboto;
          font-weight: 700;
          font-style: italic;
          text-transform: uppercase;
          line-height: 1em;}
    
h2        {font-family: Roboto;
           font-weight: 100;
          line-height: 1em}

h3        {font-family: Roboto;
           font-weight: 100;}

.xing     { width: 40px;
            height: 40px;}

.logo     {display: block;
            width: 65%;
            margin: 10% auto 10%;}

.keywords {width: 80%;
           margin: 0% auto 30%;}
    
.card     {width: 80%;
          margin: 0% auto 2%;
          padding: 2% 5% 5%;
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
          text-align: center;}

.card.mail  {padding: 1% 5%;}

a           {font-family: Roboto;
             font-weight: 100;
             color: black;
             font-size: 2em;
             text-decoration: none;}

a:hover     {color: gray;}

.link       {margin: 2%;
             font-size: 1em;
             text-align: center;}


/* Small devices (portrait tablets and large phones, 767px and up) */    
@media screen and (max-width: 767px) {
    p       {font-size: 0.6em;}
    .card p {font-size: 1em;
             text-align: justify;}
    .mail p {text-align: center;}
    p.center{font-size: 1.5em;}
    .name   {font-size: 2em;}
    .career {font-size: 1.5em;}
    .keyword {margin-bottom: 15%;}
    a       {font-size: 1em;}
    link    {font-size: 1em;}
    }
    
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    p       {font-size: 0.8em;}
    .card p {font-size: 1.5em;
             text-align: justify;}
    .mail p {text-align: center;}
    p.center{font-size: 2.25em;}
    .name   {font-size: 3em;}
    .career {font-size: 2em;}
    .keyword {margin-bottom: 15%;}
    a       {font-size: 1.5em;}
    link    {font-size: 1.5em;}
    }

/* Large devices (laptops/desktops, 930px and up) */
@media only screen and (min-width: 930px) {
    p       {font-size: 1em;}
    .card p {font-size: 1.5em;
             text-align: justify;}
    .mail p {text-align: center;}
    p.center{font-size: 2em;}
    p.light {font-size: 1.5em;}
    .name   {font-size: 3.5em;}
    .career {font-size: 2.25em;}
    .keyword {float: left;
             width: 32%;
             margin-right: 2%;}
    .keyword:last-child {margin-right: 0;}
    a       {font-size: 1.5em;}
    link    {font-size: 1em;}
    }