/* ====================================================
  Colors
====================================================== */
:root{
  --primary-color: #10647F;
  --secondary-color: #9DD7E5;
  --tertiary-color: #565752;
  --quaternary-color: #CCCCCC;
  --quinary-color: #FFFF99;
  --white-color: #ffffff;
  --black-color: #000000;
}
/* ===================================================
  Typography 
===================================================== */
body {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 22px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Playfair Display', serif;
}
.banner-tagline {
 color: var(--white-color);
}
.banner-tagline h1 {
  font-size: 3.5rem;
}
@media (min-width: 375px) {
  .banner-tagline h1 {
    font-size: 2rem;
    padding: 0 0.5em;
  }
  .banner-tagline p {
    padding: 0 1em;
  }
}
.center-text {
  text-align: center;
}
.copyright {
  border-top: var(--primary-color) 1px solid;
  font-size: small;
  margin-top: 1em;
  padding: 0.5em 0;
}
.heading-text {
  color: var(--primary-color);
  font-size: 1.3rem;
  line-height: 1.75em;
}
.main-content p.first,
footer p.first {
  margin-top: 0;
  padding-top: 0;
}
.page-title {
  font-size: 1.5rem;
}
.services p {
  margin: 0;
  padding: 0;
}
@media (min-width: 375px) {
  .services {
    padding-bottom: 1em;
  }
}
.text-right {
  text-align: right;  
}
/* ===================================================
  Layout 
===================================================== */
body {
  background-color: var(--white-color);
  background-image: url('../images/Stripe.png');
  background-repeat: repeat;
  margin: 0 auto;
  width: 87%;
}
footer {
  background-color: var(--secondary-color);
  border-radius: 0 0 0.35em 0.35em;
  border-top: #10647F 4px solid;
  margin: 0 0 1em 0;
  padding: 1em 2em;
}
.banner-top {
  background-color: var(--primary-color);
  padding: 1em 0 0.01em 0;
}
.bg-cover {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/webdeveloperdesk2.jpg');
  background-size: cover;
  color: var(--white-color);
  background-position: center center;
  position: relative;
}
.content-flex {
  display: flex;
  align-items: center;
  justify-content: center
}
.jumbotron {
  text-align: center;
  padding-top: 7rem;
  padding-bottom: 0rem;
}
.main-content {
  background-color: var(--white-color);
  border-top: 4px solid var(--primary-color);
  padding: 1em 1em 2em 1em;
}
.project-footer {
  border-top: 0.1em solid var(--tertiary-color);
  margin: 1em 0 0 0;
  padding-top: 0.45em;
}
.row-spacing {
  padding: 2em 0;
}
.social-icons {
  font-size: 1.4em;
  text-align: left;
}
.social-icons a {
  color: var(--primary-color);
  font-size: 1.2em;
  padding-left: 0.25em;
  text-decoration: none;
}
.social-icons a:hover {
  color: var(--tertiary-color);
  text-decoration: none;
}
.work-project-name {
  font-size: 1.3rem;
  padding-top: 0.5em;
}
/* ===================================================
  Navigation
===================================================== */
a,
a:hover,
.btn-link,
.btn-link:active,
.btn-link:visited,
.btn-link:hover {
  color: var(--primary-color);
}
nav {
  font-size: 1.3rem;
}
nav ul {
  padding: 0.75em 0 0 3em;
}
nav li {
  padding: 0.5rem 1.5rem 0.5rem 0;
}
nav li a, .nav-link-custom {
  color: #10647F;
}
nav li a:hover {
  background-color: var(--quinary-color);
  border-radius: 0.2em;
  color: var(--tertiary-color);
  text-decoration: none;
}
/* ===================================================
  Images 
===================================================== */
header img {
  max-width: 100%;
}
.about-photo {
  border: 3px solid var(--primary-color);
  margin-bottom: 1em;
  padding: 0.25em;
}
.process-photo, .tech-photo {
  border: 3px solid var(--primary-color);
  margin: 0;
  max-width: 100%;
  padding: 0.25em;
  width: 100%;
}
.project-sm {
  border: 0.5em solid var(--quaternary-color);
  max-width: 100%;
}
.tech-photo {
  border: 1px solid var(--primary-color);
}
/* ===================================================
  Bootstrap Overrides
===================================================== */
.bg-light {
  background-color: var(--white-color) !important;
}
.btn-contact {
  background-color: var(--primary-color) !important;
  color: var(--white-color) !important;
  font-size: 1.3em;
}
.btn-outline-info {
  color: var(--primary-color);
  border-color: var(--primary-color);
}
.btn-outline-info:hover,
.btn-outline-info:active,
.btn-outline-info:visited,
.btn-outline-info:focus {
  background-color: var(--secondary-color);
  border-color: var(--primary-color);
}
.card {
  border-color: var(--primary-color);
  border-radius: 0;
}
@media (min-width: 375px) {
  figure {
    margin: 0;
  }
}
/* ==================================================
  Form
=================================================== */
.form-decor {
  background-color: var(--quaternary-color);
  background-image: url('../images/light_toast.png');
  border: 1px solid var(--quaternary-color);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding: 0 1.5em 1em 1.5em;
  width: 80%;
}
@media (min-width: 375px) {
  .form-decor {
    width: 100%;
  }
}
/* ==================================================
  Media Queries
==================================================== */
@media (min-width: 576px) {
  .form-decor {
    width: 100%;
  }
  .page-title {
    font-size: 1.9rem;
  }
  .banner-top {
    padding: 2em;
  }
  .jumbotron {
    padding-top: 12rem;
    padding-bottom: 12rem;
  }
  .process-photo {
    margin: 0.5em;
  }
  .push-left {
    padding-left: 4rem;
  }
}