body {
  padding: 0;
  margin: 0;
  font-family: 'Roboto', sans-serif; }

#menu {
  display: inline;
  position: fixed;
  bottom: .1;
  center: 0;
  height: 40px;
  z-index: 70; }

.movement {
  opacity: .8;
  white-space: nowrap;
  overflow: hidden;
  width: 30em;
  animation: type 5s steps(50, end) 1; }

footer {
  margin: 0 auto;
  text-align: center;
  vertical-align: bottom;
  padding-top: 15%; }

@keyframes type {
  from {
    width: 0; } }

.blank {
  animation: blink 1s infinite; }

@keyframes blink {
  to {
    opacity: .0; } }

.headerPic {
  width: 100%;
  padding: 0;
  margin: 0; }

.socialLinks {
  padding-left: 3px; }

.socialLinks img {
  max-height: 35px; }

.links {
  font-size: 15px;
  text-decoration: none;
  color: black opacity(87%);
  padding-left: 32%;
  text-align: center;
  display: inline-block; }

a {
  text-decoration: none;
  color: black opacity(87%);
  list-style: none; }

a:link, a:active, a:visited {
  color: black; }

.center {
  text-align: center;
  margin: 0 auto; }

h1 {
  font-size: 75px;
  font-family: 'Roboto', sans-serif;
  margin: 0 auto;
  color: black opacity(87%);
  font-weight: lighter; }

h2 {
  font-size: 60px;
  font-family: 'Roboto', sans-serif;
  margin: 0 auto;
  color: black opacity(87%);
  font-weight: lighter; }

h3 {
  font-size: 25px;
  font-family: 'Roboto', sans-serif;
  margin: 0 auto;
  color: black opacity(87%);
  font-weight: lighter; }

h4 {
  font-size: 20px;
  font-family: 'Roboto', sans-serif;
  margin: 0 auto;
  color: black opacity(87%);
  font-weight: lighter; }

.topCenter {
  margin: 0 auto;
  text-align: center;
  opacity: .8; }

.bold {
  font-weight: bolder;
  font-style: italic;
  opacity: .7; }

p {
  font-weight: 200;
  display: inline-block;
  opacity: .7; }

.descrip {
  width: 70%;
  text-align: left;
  padding: 0;
  margin: 0;
  display: inline-block; }

.theIcon {
  display: inline-block;
  vertical-align: middle; }

.theIcon img {
  max-height: 50px;
  margin: 0 0 50% 0;
  padding: 40px;
  display: inline-block; }

.text {
  display: inline-block;
  padding: 0;
  margin: 0;
  vertical-align: middle; }

.appTitle {
  padding: 0;
  margin: 0; }

.menuItem img {
  max-height: 25px;
  display: inline-block; }

li {
  display: inline;
  text-decoration: none;
  padding-left: 10px; }

a {
  text-decoration: none;
  display: inline;
  text-decoration: none; }

ul {
  text-decoration: none;
  align-items: center;
  text-decoration: none;
  margin: 0;
  padding: 0;
  display: inline;
  padding-left: 10px; }
  ul p {
    margin: 5px;
    text-align: center; }

.comm, .edu {
  display: inline-block;
  vertical-align: top;
  width: 45%;
  padding-left: 1%; }
  .comm img, .edu img {
    max-height: 10px;
    margin-bottom: 10px; }

.exp h2, .comm h2, .edu h2 {
  font-size: 40px;
  display: inline-block; }

.comm p, .exp p, .edu p {
  vertical-align: middle;
  opacity: .5;
  font-size: 12px; }

p .jobTitle2 {
  font-style: italic;
  margin: 0;
  padding-top: -3%;
  padding: 0; }

.exp {
  display: block;
  width: 100%;
  padding-left: 1%; }
  .exp img {
    max-height: 10px;
    margin-bottom: 10px; }

.education, .community {
  display: none;
  padding-left: 2%; }

.experience {
  display: none;
  display: block;
  vertical-align: top; }

.company {
  display: inline-block;
  width: 30%;
  vertical-align: top;
  padding-left: 1.5%; }

.work {
  margin: 0;
  margin-top: -20px; }
  .work ul {
    margin: 0; }
    .work ul li {
      margin: 0; }

.work ul li {
  display: block;
  padding-left: 1%;
  margin: 0;
  padding-top: 0; }

.education p, .community p {
  display: inline-block;
  padding: 0;
  margin: 0; }

.education h3, .community h4 {
  display: inline-block;
  margin: 1%; }

.liHide {
  display: none;
  padding-left: 2%;
  margin: 0; }

.jobtitle {
  font-style: italic;
  margin: 0;
  padding: 0 0 0 0;
  display: block; }

#closeGoco, #closeOoh, #closeEsd {
  opacity: .5;
  font-style: italic;
  font-weight: 100;
  font-size: 12px; }

div .aboutMe {
  display: inline-block;
  margin: 0 auto;
  text-align: center; }
  div .aboutMe a:hover {
    color: #BF8A37; }

section .splitMe {
  display: inline-block;
  padding: 0;
  margin: 0 auto;
  text-align: center; }

.splitMe img {
  padding-top: 1%;
  max-height: 400px; }

div .meText {
  display: inline-block;
  text-align: left;
  width: 60%;
  vertical-align: top;
  padding-left: 2%;
  padding-top: 4%;
  font-weight: bold; }

.para {
  width: 85%;
  font-size: 18px; }

@media (max-width: 1100px) and (min-width: 900px) {
  .theIcon img {
    margin: 0% 0% .1% 0%;
    padding-top: 25%; }
  .topCenter {
    padding-top: 6%; }
  .text {
    padding-left: 3%; }
  .exp {
    padding-top: 8%; }
  div .aboutMe {
    display: inline-block;
    margin: 0 auto;
    text-align: center; }
  section .splitMe {
    display: inline-block;
    padding: 0;
    margin: 0 auto;
    text-align: center; }
  .splitMe img {
    max-height: 250px;
    padding-top: 1%; }
  div .meText {
    display: inline-block;
    text-align: left;
    width: 90%;
    vertical-align: top;
    font-weight: bold; }
  .para {
    width: 95%;
    font-size: 18px; } }

@media (max-width: 899px) and (min-width: 601px) {
  .theIcon img {
    margin: 0% 0% .1% 0%;
    padding-top: 25%; }
  .topCenter {
    padding-top: 10%; }
  .text {
    padding-left: 1%; }
  .exp {
    padding-top: 12%; }
    .exp .jobTitle2 {
      display: none; }
  .exp h2, .comm h2, .edu h2 {
    font-size: 30px; }
  .descrip {
    font-size: 20px; }
  div .aboutMe {
    display: inline-block;
    margin: 0 auto;
    text-align: center; }
  section .splitMe {
    display: inline-block;
    padding: 0;
    margin: 0 auto;
    text-align: center; }
  .splitMe img {
    max-height: 200px;
    padding-top: 2%; }
  div .meText {
    display: inline-block;
    text-align: left;
    width: 90%;
    vertical-align: top;
    font-weight: bold; }
    div .meText h2 {
      font-size: 34px; }
    div .meText h3 {
      font-size: 18px; } }

@media (max-width: 600px) and (min-width: 401px) {
  .theIcon img {
    margin: 0% 0% .1% 0%;
    padding-top: 25%; }
  .topCenter {
    padding-top: 10%; }
  .text {
    padding-left: 1%; }
  .exp {
    padding-top: 12%; }
    .exp .jobTitle2 {
      display: none; }
  .exp h2, .comm h2, .edu h2 {
    font-size: 30px; }
  .descrip {
    font-size: 20px; }
  div .aboutMe {
    display: inline-block;
    margin: 0 auto;
    text-align: center; }
  section .splitMe {
    display: inline-block;
    padding: 0;
    margin: 0 auto;
    text-align: center; }
  .splitMe img {
    max-height: 200px;
    padding-top: 10%; }
  div .meText {
    display: inline-block;
    text-align: left;
    width: 100%;
    vertical-align: top;
    font-weight: bold; }
    div .meText h2 {
      font-size: 34px; }
    div .meText h3 {
      font-size: 18px; }
  .para {
    width: 90%;
    font-size: 14px;
    display: block; }
  .para2 {
    width: 90%;
    font-size: 14px;
    display: block; } }

@media (max-width: 400px) and (min-width: 10px) {
  ul li {
    display: none; }
  .theIcon img {
    margin: 3% 0% 1% 0%;
    padding-top: 25%; }
  .exp h2, .comm h2, .edu h2 {
    font-size: 20px; }
  h3 {
    font-size: 18px; }
  .descrip {
    width: 100%;
    font-size: 18px; }
  .topCenter {
    padding-top: 15%; }
  .exp {
    padding-top: 20%; }
    .exp .jobTitle2 {
      display: none; }
  div .aboutMe {
    display: inline-block;
    margin: 0 auto;
    text-align: center; }
  section .splitMe {
    display: inline-block;
    padding: 0;
    margin: 0 auto;
    text-align: center; }
  .splitMe img {
    max-height: 150px;
    padding-top: 30%; }
  div .meText {
    display: inline-block;
    text-align: left;
    width: 100%;
    vertical-align: top;
    font-weight: bold; }
    div .meText h2 {
      font-size: 34px; }
    div .meText h3 {
      font-size: 15px; }
  .para {
    width: 90%;
    font-size: 12px; }
  .para2 {
    width: 90%;
    font-size: 12px; } }