#mainNav .navbar-toggler {
    font-size: 14px;
    padding: 11px;
    border: 1px solid #fff;
}

#mainNav {
    background-color: #f3b900;
}

a.nav-link.active {
    background-color: #006875;
    color: #fff !important;
}

a.contrast, a.contrast:link:visited {
    color: #fff;
    text-decoration: underline;
}
a.contrast:hover {
    text-decoration: none;
}

/* social media footer */
div.social-col {
    display: flex;
    justify-content: center;
}

div.social-col > a {
    margin: 0 0.5rem;
}

div.social-col > a:hover {
    text-decoration: none;
}

div.social-link > i.fa-2x {
    font-size: 1.5em;
}

p.social-text-link {
    font-size: 1rem;
    margin: 0;
}

p.footer.text-muted {
    padding-top: 8rem;
}

/* images */
img.register {
    /* border-radius: 80px; */
}

img.logo {
    width: 120px;
}

img.tariq-image {
    border-radius: 50%;
    width: 170px;
    max-width: 250px;
    margin: 3rem 0;
}

img.tariq-image, .project-img {
    box-shadow: 0 0 20px gray;
    display: inline-block;
}

/* aboutme quote */
div.blockquote-decoration {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
}

.blockquote-quote {
    margin: 0 0.5rem;
}

/* section and div spacing */
section.content-section > div.section-start {
    background-color: #0e274f;
    color: white;
    border-radius: 5px;
    padding-bottom: 3rem;
    padding-top: 4rem;
    margin-bottom: 4rem;
}

div.container-fluid:not(div.container-fluid.my-auto) {
    padding: 4rem 0;
}

section.content-section {
    padding: 0 0 6rem 0;
}

div.project.app {
    margin: 1.5rem 0;
}

button.app-link {
    margin: 1.5rem 0;
}

/* margins for text */
h1 {
    margin: 4rem 0 3.5rem 0;
}

h2 {
    margin: 3rem 0 2.5rem;
}

h2.no-padding {
    margin: 0.5rem 0;
}

h3 {
    margin: 2.5rem 0 2rem 0;
}

h4 {
    margin: 2rem 0 1.5rem 0;
}

p:not(p.mb-0):not(p.ignore):not(p.lead) {
    margin: 1.25rem 0 1rem 0;
}

p.image-caption {
    margin: 40px auto 100px auto;
    padding: 0 .5rem;
    max-width: 80vw;
}
p.lead {
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
}
/* list item styles */
ul.project-list {
    list-style-type: none;
    padding-left: 0;
}

/* div-list-group stuff */
img.div-list-group {
    width: 100px;
    box-shadow: none;
    margin: 1rem 0;
}

div.div-list-container {
    border-radius: 5px;
    margin-top: 3rem;
}

div.container-fluid.div-list-group {
    max-width: 700px;
}
  
div.col.div-list-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 0 0 2rem 0;
    align-items: center;
}

div.row.div-list-group:nth-of-type(2n) > div.col {
    flex-direction: row-reverse;
}
  
div.row.div-list-group:nth-of-type(2n) > div.col > div.text-container > * {
    text-align: right;
}

div.row.div-list-group:nth-of-type(2n+1) > div.col > div.text-container > * {
    text-align: left;
}
  
div.div-list-group.text-container {
    max-width: 75%;
    padding-left: 0.5rem;
    padding-right:0.5rem;
}
  
div.text-container.div-list-group > p {
    margin: 0;
}

/* flack infographic styling */
div.infographic-main-container {
    padding: 1rem 0 5rem 0;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
div.infographic.outer {
    display: flex;
}
div.infographic.outer.left {
    justify-content: flex-start;
}
div.infographic.outer.right {
    justify-content: flex-end;
}
div.infographic.inner {
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
}
div.infographic.text-container {
    width: 100%;
    max-width: 600px;
    padding: 0 0.5rem;
    margin-bottom: 0.25rem;
    border-radius: 20px;
    box-shadow: 0 0 10px gray;
}
div.infographic.text-container > p {
    text-align: center;
    margin: 0.5rem 0;
    font-weight: 400;
    color: white;
    font-size: 1.2rem;
}
div.infographic.outer:nth-of-type(2n+0) > div.inner > div.text-container {
    background-color: #1800f5;
}
div.infographic.outer:nth-of-type(2n-1) > div.inner > div.text-container {
    background-color: #008bf5;
}
i.fa-caret-down {
    color: #b5b5b5;
    text-shadow: 0 0 10px;
}

/* media queries */

/* bootstrap xs and small screens */
@media (max-width: 767px) {
    img.small-screen {
        display: inline-block;
        border-radius: 17%;
    }
    img.large-screen {
        display: none;
    }
    ul.highlight > li {
        background: #1341aa;
        color: #fff;
    }
    .project-img {
        max-width: 98%;
    }
    p.lead {
        padding: 0 1rem;
/*         text-align: left; rule causing text to be unaligned, need to test */
    }
}

/* bootstrap medium+ screens  */
@media (min-width: 768px) {
    img.small-screen {
        display: none;
    }
    img.large-screen {
        display: inline-block;
        border-radius: 6rem;
    }
    p.lead {
        padding: 0 3rem;
        font-weight: 400;
    }
    img.tariq-image {
        width: 30%;
    }
    .project-img {
        max-width: 95%;
    }
    ul.project-list > li {
        font-size: 1.1rem;
    }
    div.row.logo-container {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 1200px) {
    img.large-screen {
        max-width: 1100px;
    }
}