* {
  box-sizing:border-box;
}

body {
  padding:0px;
  margin:0px;
  font-family: Verdana, Geneva, sans-serif;
  font-size:14px;
}

.heading {
  height:30px;
  margin-bottom:2em;
}

#name:after {
  content:" - ";
}

.heading .title {
  padding:5px;
  font-size:1.5em;
}

.title {
  margin-left:5px;
}

.main {
  width:90%;
  margin:auto;
}

.card {
  width:400px;
  min-width:375px;
  max-width:400px;
  margin:auto;
  border:1px solid grey;
  box-shadow: 10px 10px 5px #888888;
}

.content {
  position:relative;
  left: -11%;
  min-width:280px;
}

.picture {
  width:100px;
  border:2px solid black;
  border-radius:25px;
  display:inline-block;
  margin-top:3px;
}

.information {
  display:inline-block;
  vertical-align:top;
  list-style-type:none;
  -webkit-padding-start:2%;
  -webkit-margin-before:0px;
  -webkit-margin-after:0px;
  -webkit-margin-start:0px;
  -webkit-margin-end:0px;
  -moz-padding-start:2%;
  -moz-margin-start:0px;
  -moz-margin-end:0px;
  margin-top:10px;
}

.footer {
  position:fixed;
  bottom:0px;
  height:30px;
  width:100%;
  text-align:center;
}

@media only screen and (device-height:360px) {
  .heading {
    margin-bottom:3em;
  }
  .content {
    line-height:1.5em;
    padding-bottom:5px;
  }
  .picture {
      margin-top:10px;
  }
}

@media only screen and (max-device-width:640px) and (orientation: portrait) {
  body {
    font-size:18px;
  }
  #name::after {
    content: "";
  }
  #job_title {
    display:block;
  }
  .heading {
    margin-bottom:3em;
  } 

 .content {
    position:inherit;
    left:auto;
    min-width:0px;
    text-align:center;
    line-height:1.5em;
  }
  .card {
    width:40%;
    min-width:320px;
    max-width:none;
    padding:5px;
  }
  .picture {
    margin-top:5px;
  }
 .information {
    text-align:left;
    width:100%;
  }
}