/*
* global styles
*/

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

.container-fluid {
  padding-left: 0px;
  padding-right: 0px;
}

/*
* Resume Container
*/

.resume-container {
  min-height: 1200px;
}

/*
* Jumbotron Styles
*/

.jumbotron {
  background: #12232E;
  color: white;
  font-weight: bold;
}

.jumbotron-img {
  width: 250px;
  border-radius: 50%;
  border: 6px solid #18c183;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.jumbotron-img:hover {
  transform: scale(1.2, 1.2);
  box-shadow: 1px 8px 20px #18c183;
}

.resume-navbar {
  background-color: #f2f6fc !important;
  color: grey;
}

.resume-head {
  background-color: #1abc9c;
  color: white;
  padding-top: 75px;
}

/*
* Horizontal Line
*/

.my-4 {
  background: #ffffff4a;
}

/*
* Nav Pills
*/

.tab-pane.active {
  animation: slide-down 2s ease-out;
}

@keyframes slide-down {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }

  35% {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  color: #fff;
  background-color: #007CC7;
}

.nav-pills a {
  color: #4DA8DA;
}

.nav-left {
  float: left;
}

.nav-right {
  float: right;
}

/*
* Projects Tab
*/

.projects-tab {
  display: inline-flex;
  flex-wrap: wrap;
}

.projects-tab .card {
  margin: 6px;
}

.card {
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05);
}

.card-animate {
  transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
  cursor: pointer;
}

.card-animate:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
}

/*
* Contact Form
*/

.contact-form-img {
  width: 30%;
}

.contact-form-card {
  flex-direction: row;
  align-items: center;
}

/*
* Resume Tab
*/

.resume-tab .card-header {
  background: #12232E;
  color: white;
}

.resume-tab .card {
  margin-bottom: 20px;
}

/*
* Type Animation
*/

.typewriter p i {
  overflow: hidden;
  border-right: .15em solid orange;
  margin: 0 auto;
  letter-spacing: .15em;
  animation:
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

/* The typewriter cursor effect */
@keyframes blink-caret {

  from,
  to {
    border-color: transparent
  }

  50% {
    border-color: orange;
  }
}


@media only screen and (max-width: 959px) {
  .row {
    display: block;
  }

  .contact-form-img {
    display: none;
  }

  .nav-left {
    float: none;
  }

  .nav-right {
    float: none;
  }
}