@media screen and (max-width: 500px) {
  span.name {
    font-size: 25px !important;
  }
  ul.info {
    padding-left: 0px !important;
  }

  div.intro-text {
    width: 100% !important;
    padding: 30px;
  }
}
ul.whitebg {
  color: black;
}

ul.whitebg li a {
  color: darkgreen !important;
}

ul.whitebg li.active a {
  color: white !important;
}

section#skills {
  background: white;
}

#portfolio {
  background: white !important;
  color: black;
}

h2 {
  font-size: 25px !important;
}

body {
  background: black;
}

body,
div,
p,
a,
ul,
li,
span,
header,
section,
h1,
h2,
h3,
h4,
h5 {
  font-family: "Roboto Condensed", sans-serif !important;
}
#about {
  background: black;
}
#portfolio {
  background: white;
}

div.intro-text {
  display: block;
  -webkit-transition: display 1000ms linear;
}

.name {
  line-height: 70px;
  font-size: 70px !important;
}

span.description {
  text-shadow: 0 0 4px black;
  display: block;
  margin-top: 20px;
  padding-left: 3%;
  text-align: center;
  padding-right: 3%;
}

header {
  background-image: url("rsrc/bannerbg.jpg");
  background-size: cover;
  background-attachment: fixed;
}

#prof {
  border-radius: 100%;
  -moz-border-radius: 100%;
  width: 200px;
}

span.name,
span.skills {
  text-shadow: 0px 0px 5px black;
}

div.intro-text {
  width: 77.5%;
  padding: 30px;
}

ul.info li {
  font-size: 15px;
}

ul.info {
  list-style-type: none;
}

section {
  padding-top: 50px;
  padding-bottom: 50px;
}

section#work {
  color: white !important;
}

section#work h4 {
  color: gray;
}

.progress-bar {
  background: darkred !important;
}

.progress {
  background-color: LIGHTGREY;
}

ul[role="alert"] li::before {
  content: " x ";
}
ul[role="alert"] {
  font-size: 14px;
  list-style-type: none;
  color: red;
}

p.char-ref {
  font-size: 14px;
  line-height: 14px;
}

div.close {
  padding: 30px;
  -moz-border-radius: 100%;
  border-radius: 100%;
  color: black;
}

#portfolio .portfolio-item .portfolio-link .caption {
  background: rgba(0, 0, 0, 0.7) !important;
}

/* BOOTSTRAP ELEMENTS OVERRIDE */

.nav-pills > li.active > a,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover {
  color: #fff;
  background-color: green;
}

li#contact-container.page-scroll.active a {
  background-color: transparent !important;
}

form#contactForm label,
form#contactForm input,
form#contactForm textarea,
form#contactForm button {
  font-size: 14px;
}