/* good colors
* original start bootstrap freelancer theme colors
* #2C3E50 slate
* #18BC9C dark sea foam green
*
* #286DA8 primary blue
* #2491EB material ui blue
*
*/
body {
  font-family: -apple-system,BlinkMacSystemFont,Segoe,UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,Neue,sans-serif;
  overflow-x: hidden; }

p {
  font-size: 20px; }

a,
a:hover,
a:focus,
a:active,
a.active {
  color: #2491EB;
  outline: none; }

nav {
  border-bottom: 1px solid #ccc;
  line-height: 1.5em;
}

.card-img-left {
  border-bottom-left-radius: calc(.25rem - 1px);
  border-top-left-radius: calc(.25rem - 1px);
  float: left;
  width: 100%;
}

.navbar {
  padding: 0 0.5rem;
}

.loading {
    display: flex;
    min-height: 100vh;
    width: 100%;
    padding: 0;
    margin: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

hr.star-light,
hr.star-primary {
  max-width: 250px;
  margin: 25px auto 30px;
  padding: 0;
  text-align: center;
  border: none;
  border-top: solid 5px; }

hr.star-light:after,
hr.star-primary:after {
  font-family: FontAwesome;
  font-size: 2em;
  position: relative;
  top: -.8em;
  display: inline-block;
  padding: 0 .25em;
  content: '\f005'; }

hr.star-light {
  border-color: white; }

hr.star-light:after {
  color: white;
  background-color: #2491EB; }

hr.star-primary {
  border-color: black; }

hr.star-primary:after {
  color: black;
  background-color: white; }

.img-centered {
  margin: 0 auto; }

section {
  padding: 100px 0; }
  section h2 {
    font-size: 3em;
    margin: 0; }

section.success {
  color: white;
  background: #2491EB; }

@media (max-width: 767px) {
  section {
    padding: 75px 0; }
  section.first {
    padding-top: 75px; } }

#mainNav {
  border: none;
  background: #FFF;
  z-index: 1999999999;
  border-bottom: 1px solid #ccc}
#mainNav .navbar-brand {
  color: #2491EB;
  font-weight: 700;
  font-size: 2em; 
}
#mainNav .navbar-nav {
  letter-spacing: 1px; 
}
#mainNav .navbar-nav li.nav-item a.nav-link {
  color: #2491EB;
  padding: 10px;
  margin: 5px; 
}
#mainNav .navbar-toggler {
  font-size: 14px;
  padding: 11px;
  color: #2491EB;
  border-color: #2491EB; }
#mainNav .navbar-toggler:hover, #mainNav .navbar-toggler:focus {
  color: white;
  border-color: #2491EB;
  background-color: #2491EB; 
}

a.nav-link.active {
    color: white !important;
    border-radius: 3px;
    background: #2491EB; 
}

.wrapper {
  padding-top: 100px;
  padding-bottom: 50px;
}

@media (min-width: 768px) {
  .wrapper {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}



header.masthead {
  text-align: center;
  color: white;
  background: url(https://res.cloudinary.com/dxqnb8xjb/image/upload/v1518400213/starman_oroujr.webp) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

header.masthead .container {
  padding-top: 100px;
  padding-bottom: 230px; 
}


@media (min-width: 768px) {
  header.masthead .container {
    padding-top: 75px;
    padding-bottom: 250px; }
  header.masthead .intro-text .name {
    font-size: 4.75em; }
  header.masthead .intro-text .skills {
    font-size: 1.75em; } 
}


footer {
  color: white;
  background-color: #2491EB;
  padding: 50px 0;
}


.btn-outline-green {
  font-size: 20px;
  margin-top: 15px;
  transition: all .3s ease-in-out;
  color: #2491EB;
  border: solid 2px #2491EB;
  background: transparent; 
}

.btn-outline-green:hover, .btn-outline:focus, .btn-outline:active, .btn-outline.active {
  color: white;
  border: solid 2px #2491EB;
  background: #2491EB;
}

.btn-outline {
  font-size: 20px;
  margin-top: 15px;
  transition: all .3s ease-in-out;
  color: white;
  border: solid 2px white;
  background: transparent; 
}

.btn-outline:hover, .btn-outline:focus, .btn-outline:active, .btn-outline.active {
  color: #2491EB;
  border: solid 2px white;
  background: white; 
}

.btn-social {
  font-size: 20px;
  line-height: 45px;
  display: inline-block;
  width: 50px;
  height: 50px;
  text-align: center;
  border: 2px solid white;
  border-radius: 100%; 
}

.btn:focus,
.btn:active,
.btn.active {
  outline: none; 
}

li {
  font-size: 20px;
}