/* For testing purposes */
body {
    position: relative;
    overflow-y: scroll;
    margin-left: 0 !important;
}

a.btn,
.btn {
    font-size: -0.5em;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    padding: 0.5rem;
}

a.nav-link {
    font-size: -0.75em;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    margin: 0.5em;
}

/* font-family: 'Questrial', sans-serif;
font-family: 'Poppins', sans-serif;
font-family: 'Roboto Condensed', sans-serif; */
/* =====================================  */
/*            NAV BAR SECTION             */
/* =====================================  */
/* Add the below transitions to allow a smooth color change similar to lyft */

.bg-dark {
    transition: 500ms ease;
    background: transparent !important;
}

.bg-dark.scrolled {
    background-color: #ffffff !important;
}

.nav-cc {
    color: white !important;
}

.nav-cc.nav-color {
    transition: 500ms ease;
    color: #000000 !important;
}

.navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    border-style: none;
}

.navbar-dark .navbar-toggler {
    border-color: rgba(255, 255, 255, 0);
}

.navbar-toggler .navbar-toggler-icon.nav-color {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(68, 67, 67, 0.78)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    transition: 500ms ease;
}
/* .navbar-toggler.nav-color {
  border-color: rgba(68, 67, 67, 0.78);
    transition: 500ms ease;
} */

/* .navbar-toggler:focus {
  outline-color: rgb(255, 255, 255);
} */

nav {
    z-index: 1;
}
/* =====================================  */
/*          JUMBOTORN SECTION             */
/* =====================================  */
#home {
    padding: 4rem 1rem !important;
    background-image: url(https://images.unsplash.com/photo-1426647451887-5f2be01918a9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);
    background-size: cover;
    height: 100vh;
    opacity: 0.75;
}

#work-page {
    padding: 4rem 1rem !important;
    background-image: url();
    background-color: #f1582a;
    background-size: cover;
    height: 100vh;
    opacity: 0.75;
}

#about-page {
    padding: 4rem 1rem !important;
    background-image: url();
    background-color: #64c8d0;
    background-size: cover;
    height: 100vh;
    opacity: 0.75;
}

.jumbotron-content > h1 {
    color: #ffffff;
    text-shadow: 2px 3px 4px #000000;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: -0.05rem;
}

.jumbotron-content > h3 {
    color: #ffffff;
    text-shadow: 2px 3px 4px #000000;
    line-height: 0em;
    margin-left: 7rem;
    display: flex;
}

.container-inner {
    position: absolute;
    padding: 12rem 0rem;
}
/* =====================================  */
/*           ABOUT ME SECTION             */
/* =====================================  */

.about-container {
    max-height: auto;
    padding: 75px 25px 0 25px;
}

img.selfie {
    padding: 2em 2em;
}

.section-display {
    letter-spacing: -0.45rem;
    max-width: 100% !important;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 900;
}

.display-1 {
    font-size: 3.5em;
}

.about-lead,
.contact-lead {
    font-family: 'Questrial', sans-serif !important;
    font-weight: 400 !important;
}

p {
    letter-spacing: 1.5px;
    font-family: 'Questrial', sans-serif !important;
    font-weight: 400 !important;
}

.about-name {
    text-align: center;
    font-size-adjust: auto;
    font-size: 6vw;
    /* letter-spacing: -.45rem; */
    max-width: 100% !important;
    text-transform: uppercase;
    word-wrap: break-word;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 900;
}
/* figure out how to do this across the site */
.about-name {
    font-size: 1rem;
}

@media (min-width: 300px) {
    .about-name {
        font-size: 3rem;
    }
}
@media (min-width: 768px) {
    .about-name {
        font-size: 7rem;
    }
}
@media (min-width: 992px) {
    .about-name {
        font-size: 10rem;
    }
}
@media (min-width: 1200px) {
    .about-name {
        font-size: 13rem;
    }
}

#modal-embed {
    height: 500px;
    width: 100%;
}
/* =====================================  */
/*           WORK SECTION             */
/* =====================================  */

.work-container {
    padding: 75px 25px 0 25px;
}

.carousel-caption {
    position: absolute;
    right: 15%;
    bottom: 42%;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
}
.carousel-caption {
    text-shadow: 3px 2px 8px black;
    letter-spacing: 15px;
}

.carousel-h {
    margin: 0 -15%;
    font-size: 3.2em;
    text-shadow: 2px 2px 10px black;
    letter-spacing: 10px;
}

.carousel-p {
    margin: 0 -30%;
    padding: 0 40px;
    font-size: 1.2em;
    text-transform: uppercase;
    /* text-shadow: 1.5px 1.5px 8px black; */
    letter-spacing: 8px;
    background-color: rgba(0, 0, 0, 0.4);
}

.work-img {
    height: auto;
    width: 100%;
}

.row-bg {
    background-color: #e9eff5;
}

/* =====================================  */
/*           CONTACT SECTION             */
/* =====================================  */
.contact-container {
    padding: 75px 25px 75px 25px;
}

/* =====================================  */
/*           FOOTER SECTION             */
/* =====================================  */
footer {
    margin-top: 4em;
    padding: 3em 0em;
    background-color: #104c61;
    color: #dbe8ed;
    text-align: center;
}

.copyright {
    font-family: Questrial;
    letter-spacing: 5px;
}

.fa {
    font-size: 0.05rem;
}

.fab {
    color: #dbe8ed !important;
    text-decoration: none;
}

.fab:hover {
    text-decoration: none;
    color: #9dccd0 !important;
}