body {
  font-family: 'Raleway', sans-serif;
  /*   overflow-x: hidden; */ }
  @media all and (max-width: 1200px) {
    body {
      /* screen size until 1200px */
      font-size: 1.5em;
      /* 1.5x default size */ } }
  @media all and (max-width: 1000px) {
    body {
      /* screen size until 1000px */
      font-size: 1.2em;
      /* 1.2x default size */ } }
  @media all and (max-width: 500px) {
    body {
      /* screen size until 500px */
      font-size: 1.0em;
      /* 0.8x default size */ } }

.navbar .navbar-brand {
  font-size: 1.7em;
  color: #3cc4d1;
  letter-spacing: 1.5px; }

.navbar .nav {
  display: inline-block;
  vertical-align: top;
  color: white; }
  .navbar .nav li a:hover {
    background: white;
    color: black; }
  .navbar .nav li a:focus {
    outline: none;
    background: #222;
    color: white; }

.navbar .nav-pills {
  font-size: 1.4em; }
  .navbar .nav-pills li.active > a,
  .navbar .nav-pills .nav-pills > li.active > a:focus {
    background: white;
    color: black; }

.navbar .nav-pills:active {
  color: black; }

.navbar .navbar-collapse {
  text-align: center; }

.navbar .nav-link {
  color: white;
  letter-spacing: 2px; }

#about {
  background-color: #003D6B;
  padding: 100px 0; }
  #about #desc {
    margin: 0px 50px 0px 50px;
    color: #c0c0c0;
    font-size: 1.5em; 
  }
  #about #profile {
    max-width: 30%;
    border-radius: 65%;
    margin-bottom: 50px; }
  #about #icons a {
    font-size: 4em !important;
    margin: auto;
    padding: 10px;
    cursor: pointer;
    color: #bcc748; }
    #about #icons a .fa-linkedin:hover {
      color: #0077B5;
      transition: color .5s; }
    #about #icons a .fa-envelope-o:hover {
      color: #c71610;
      transition: color .5s; }
    #about #icons a .fa-twitter:hover {
      color: #00aced;
      transition: color .5s; }
    #about #icons a .fa-github:hover {
      color: #fafafa;
      transition: color .5s; }

hr {
  border-top: 4px double #8c8b8b;
  width: 60%;
  margin: 40px auto; }

#skills {
  font-size: 6em;
  text-align: center;
  margin: auto;
  padding: 50px 0; }
  #skills .skills-header {
    text-align: center;
    font-weight: 700;
    margin-bottom: 50px; }
  #skills .row {
    padding-bottom: 50px; }
  #skills i {
    margin: 15px;
    transition: color .5s; }
  /* #skills i:hover {
    color: #00aced; } */

#portfolio {
  background-color: #79C5FF;
  height: auto;
  overflow: auto; }
  #portfolio #portfolio-header {
    color: white;
    font-weight: 700;
    margin: 50px 0 30px 0; }
  #portfolio .project-title {
    font-size: 1.5em;
    font-weight: 700;
    letter-spacing: 2px; }

.grid {
  padding: 20px 20px 100px 20px;
  max-width: 1300px;
  margin: 0 auto;
  list-style: none;
  text-align: center; }
  .grid li {
    display: inline-block;
    width: 440px;
    margin: 0;
    padding: 20px;
    text-align: left;
    position: relative; }
  .grid figure {
    margin: 0;
    display: table; }
    .grid figure img {
      width: 100%;
      display: block;
      position: relative; }
  .grid figcaption {
    padding: 20px;
    background: #2c3f52;
    color: #ed4e6e;
    display: table-caption;
    caption-side: bottom;
    text-align: center; }
    .grid figcaption .project-title {
      margin: 0;
      padding: 0;
      color: #fff;
      text-transform: uppercase; }
    .grid figcaption .project-subtitle {
      color: #fff;
      margin-bottom: 10px; }
    .grid figcaption a {
      text-align: center;
      padding: 5px 10px;
      border-radius: 2px;
      display: inline-block;
      color: #fff; }

@media screen and (max-width: 31.5em) {
  .grid {
    padding: 10px 10px 100px 10px; }
    .grid li {
      width: 100%;
      min-width: 300px; } }

#contact #contact-header {
  font-weight: 700;
  text-align: center;
  margin: 50px 0; }

#contact #contact-text {
  font-size: 2em;
  text-align: center; }
  @media (max-width: 991px) {
    #contact #contact-text p {
      display: none; } }

#contact .contact-icon {
  font-size: 2em;
  margin: 20px; }

#contact #submit-btn {
  background: #3cc4d1;
  width: 100%; }

#contact #submit-btn:hover,
#contact #submit-btn:focus {
  background: #309ca7;
  color: white; }

.btn {
  color: white;
  font-weight: 700;
  border: none; }

footer {
  color: white;
  padding: 15px;
  text-align: center;
  margin-top: 50px;
  background: #2C3E50;
  font-weight: 700; }
  footer a {
    color: white; }
  footer a:hover {
    color: #3cc4d1;
    text-decoration: none; }