/**** MEDIA QUERIES START */
/*#headerContainer {
    width: 100%;
    height: 115px;
    background-color: #f0f8fd;
    position: fixed;
    top: 0px;
    padding: 0px;
    z-index: 100;
}*/

@media (min-width: 320px) {
    .container {
        max-width: 300px;
    }

    #headerBackBar {
        height: 115px;
    }

    div#header.container {
        width: 300px;
        margin-left: -15px;
    }

    #spacerColumn {
        display: none;
        width: 100%;
        height: auto;
    }

    nav {
        left: -10px;
    }

    .navbar {
        width: 300px !important;
        padding: 0px;
        margin-left: 25px;
    }

    #navbarSupportedContent ul {
        width: 300px;
        margin-top: 0px;
        padding-left: 15px;
        padding-right: 15px;
    }

    a.nav-link {
        margin-top: 90px;
    }

    li.nav-item {
        width: 100px;
        float: right;
    }

    div.dropdown-menu.show {
        height: 430px !important;
        left: -75px;
    }

    #work, #workHome {
        margin-left: 0px;
        padding: 0px;
        float: right;
    }

    #about, #aboutHome {
        margin-left: 0px;
        padding: 0px;
        float: right;
    }

    #caseStudyIntroRow {
        width: 300px;
        height: 500px;
        margin-left: -30px;
    }

    #overviewSection, #useCasesSection, #targetMarketSection, #designProcessSection, #prototypeSection {
        width: 300px;
        margin-left: -30px;
    }

    #targetMarketSection, #useCasesSection {
        padding: 15px;
    }

    #targetMarketSection h4, #useCasesSection h4 {
        padding-left: 0px;
    }

    .userImages {
        width: 138px;
        height: auto;
        margin-right: 10px;
    }

    #useCase1Image, #useCase2Image, #useCase3Image {
        width: 138px;
        height: auto;
    }

    .flowcharts {
        width: 100%;
        margin-left: 0px;
        margin-top: 0px;
    }

    .col-4 {
        flex: 0 0 100% !important;
        max-width: 100%;
        margin-left: 10px;
    }

    #downloadRow {
        width: 270px;
        height: 30px;
        margin-left: calc((100% - 270px)/2);
        margin-bottom: 70px;
    }

    a#downloadPDF2 {
        float: right;
    }

    /*    footer div.container div.row {
            margin-left: 0px;
        }
    
        #footerCopyright, #footerEmail {
            text-align: center;
        }*/

    #footerCopyright, #footerEmail {
        font-size: 0.7em !important;
        text-align: center;
    }

    #footerCopyright {
        width: 70px;
    }

    #footerEmail {
        width: 80px;
    }

    #footerEmail a {
        width: 80px;
    }

    footer div.container div.row {
        margin-left: 0px;
    }

    footer div.container div.row ul {
        width: 100%;
    }

    [title~="copyright"] {
        width: 70px !important;
        margin-left: -10px !important;
    }

    [title~="email"] {
        width: 80px !important;
        margin-right: -10px !important;
    }

    footer div.container div.row ul li {
        float: left;
        margin-left: 5px;
        margin-right: 5px;
    }
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }

    #headerBackBar {
        height: 115px;
    }

    div#header.container {
        width: 540px;
        margin-left: -15px;
    }

    #spacerColumn {
        display: block;
        width: 50%;
        height: auto;
    }

    nav {
        left: -15px;
    }

    .navbar {
        width: 100% !important;
        padding: 0px;
        margin-left: 30px;
    }

    #navbarSupportedContent ul {
        width: 540px;
        padding-left: 15px;
        padding-right: 15px;
    }

    a.nav-link {
        margin-top: 90px;
    }

    li.nav-item {
        width: 100px;
        float: right;
    }

    div.dropdown-menu.show {
        height: 430px !important;
    }

    #work, #workHome {
        margin-left: 0px;
        padding: 0px;
        float: right;
    }

    #about, #aboutHome {
        margin-left: 0px;
        padding: 0px;
        float: right;
    }

    #targetMarketSection {
        padding: 15px;
    }

    #targetMarketSection h4, #useCasesSection h4 {
        padding-left: 0px;
    }

    .userImages {
        margin-right: 10px;
    }

    #useCasesSection {
        padding: 15px;
    }

    .flowcharts {
        width: 100%;
        margin-left: 0px;
        margin-top: 0px;
    }

    #prototypeSection {
        width: 540px;
        margin-left: -15px;
        margin-top: -110px;
    }

    #downloadRow {
        width: 515px;
        height: 30px;
        margin-left: calc((100% - 515px)/2);
        margin-bottom: 70px;
    }

    a#downloadPDF2 {
        float: right;
    }

    #caseStudyIntroRow, #overviewSection, #targetMarketSection, #useCasesSection, #designProcessSection {
        width: 540px;
    }

    #footerCopyright, #footerEmail {
        font-size: 1.0rem !important;
        text-align: center;
    }

    #footerCopyright {
        width: 190px;
    }

    #footerEmail {
        width: 190px;
    }

    #footerEmail a {
        width: 80px;
    }

    footer div.container div.row {
        margin-left: 0px;
    }

    footer div.container div.row ul {
        width: 100%;
    }

    [title~="copyright"] {
        width: 190px !important;
        margin-left: 0px !important;
    }

    [title~="email"] {
        width: 190px !important;
        margin-right: -10px !important;
    }

    footer div.container div.row ul li {
        float: left;
        margin-left: 5px;
        margin-right: 5px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }

    #headerBackBar {
        height: 115px;
    }

    div#header.container {
        width: 100%;
        margin-left: -15px;
    }

    div#header div.row {
        width: 720px;
        margin-left: 0px;
    }

    #spacerColumn {
        display: block;
        width: 100%;
        height: auto;
    }

    nav {
        left: -15px;
    }

    .navbar {
        width: 100% !important;
        padding: 0px;
    }

    #navbarSupportedContent {
        width: 720px;
    }

    #navbarSupportedContent ul {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        margin-left: 0px;
    }

    #prototypeHomeScreenContainer{
        margin-left: 25px;
    }

    #prototypeHomeScreen {
        margin-left: 70px;
    }

    a.nav-link {
        margin-top: 90px;
    }

    li.nav-item {
        width: 100px;
        float: right;
    }

    div.dropdown-menu.show {
        height: 430px !important;
        left: -125px;
    }

    #work, #workHome {
        /*margin-left: 0px;*/
        padding: 0px;
        float: right;
    }

    #workHome, #aboutHome {
        margin-right: 5px;
    }

    #about, #aboutHome {
        /*margin-left: 0px;*/
        padding: 0px;
        float: right;
    }

    #logo {
        margin-left: -10px !important;
    }

    .userImages {
        margin-right: 10px;
    }

    .flowcharts {
        margin-left: 0;
        margin-top: -10px;
    }

    #overviewSection {
        width: 708px;
        margin-left: -25px;
    }

    #targetMarketSection, #useCasesSection {
        width: 708px;
        margin-left: -25px;
        padding: 15px;
    }

    #prototypeSection {
        width: 738px;
        margin-left: -25px;
        margin-top: -110px;
        padding: 15px;
    }

    #downloadRow {
        width: 708px;
        height: 30px;
        margin-left: calc((100% - 708px)/2);
        margin-bottom: 70px;
    }

    a#downloadPDF2 {
        float: right;
    }

    #designProcessSection {
        width: 708px;
        margin-left: -25px;
    }

    #footerCopyright, #footerEmail {
        font-size: 1.0rem !important;
        text-align: center;
    }

    #footerCopyright {
        width: 190px;
    }

    #footerEmail {
        width: 190px;
    }

    #footerEmail a {
        width: 80px;
    }

    footer div.container div.row {
        margin-left: 0px;
    }

    footer div.container div.row ul {
        width: 100%;
    }

    [title~="copyright"] {
        width: 190px !important;
        margin-left: 15px !important;
    }

    [title~="email"] {
        width: 190px !important;
        margin-right: -10px !important;
    }

    footer div.container div.row ul li {
        float: left;
        margin-left: 5px;
        margin-right: 5px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 992px;
    }

    #pageName {
        margin-left: 15px;
    }

    /**** Main Nav Start ****/
    #headerBackBar {
        height: 115px;
    }

    div#header.container {
        width: 100%;
        margin-left: -15px;
    }

    div#header div.row {
        width: 992px;
        margin-left: 0px;
    }

    #spacerColumn {
        display: block;
        width: 100%;
        height: auto;
    }

    nav {
        left: -15px;
    }

    nav.navbar {
        width: 992px !important;
        padding: 0px;
        left: 0px;
    }

    #navbarSupportedContent {
        width: 992px;
        margin-right: 0px;
    }

    #navbarSupportedContent ul {
        width: 992px;
        padding-left: 15px;
        padding-right: 15px;
        margin-left: -15px;
    }

    a.nav-link {
        margin-top: 90px;
    }

    li.nav-item {
        width: 100px;
        float: right;
    }

    div.dropdown-menu.show {
        height: 430px !important;
    }

    #work, #workHome {
        /*margin-left: 0px;*/
        padding: 0px;
        float: right;
    }

    #workHome {
        margin-right: 0px;
    }

    #about, #aboutHome {
        /*margin-left: 0px;*/
        padding: 0px;
        float: right;
    }

    #aboutHome {
        margin-right: 0px;
    }
    /**** Main Nav End ****/

    #prototypeHomeScreen {
        margin-left: 420px;
        margin-top: -270px;
    }

    #overviewSection, #targetMarketSection, #useCasesSection, #designProcessSection {
        width: 992px;
        margin-left: -30px;
    }

    #targetMarketSection div.container div.row {
        padding-left: 15px;
    }

    .targetMarketUserDescriptionContainers div {
        margin-right: 10px;
    }

    .noBottomMargin {
        margin-bottom: 0px;
    }

    #useCasesSection div.container div.row div {
        padding-left: 15px;
        padding-right: 15px;
    }

    .flowcharts {
        width: 100%;
        margin-left: calc((30%/2) + -15px);
        margin-top: -50px;
    }

    #flowchart3 {
        margin-top: 0px;
    }

    #prototypeSection {
        width: 992px;
        margin-left: -15px;
        margin-top: -110px;
        padding-left: 15px;
        padding-right: 15px;
    }

    #downloadRow {
        width: 932px;
        height: 30px;
        margin-left: calc((100% - 932px)/2);
        margin-bottom: 70px;
    }

    a#downloadPDF2 {
        float: right;
    }

    #logo {
        margin-left: 0px !important;
    }

    #footerCopyright, #footerEmail {
        font-size: 1.0rem !important;
        text-align: center;
    }

    #footerCopyright {
        width: 190px;
    }

    #footerEmail {
        width: 190px;
    }

    #footerEmail a {
        width: 80px;
    }

    footer div.container div.row {
        margin-left: 0px;
    }

    footer div.container div.row ul {
        width: 100%;
    }

    [title~="copyright"] {
        width: 190px !important;
        margin-left: 10px !important;
    }

    [title~="email"] {
        width: 190px !important;
        margin-right: -10px !important;
    }

    footer div.container div.row ul li {
        float: left;
        margin-left: 5px;
        margin-right: 5px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1220px;
    }

    #pageName {
        margin-left: 15px;
    }

    /**** Main Nav Start ****/
    #headerBackBar {
        height: 115px;
    }

    div#header.container {
        width: 100%;
        margin-left: -15px;
    }

    div#header div.row {
        width: 1220px;
        margin-left: 0px;
    }

    #spacerColumn {
        display: block;
        width: 100%;
        height: auto;
    }

    nav {
        left: -15px;
    }

    nav.navbar {
        width: 1220px !important;
        padding: 0px;
        left: 0px;
    }

    #navbarSupportedContent {
        width: 1220px;
        margin-right: 0px;
    }

    #navbarSupportedContent ul {
        width: 1220px;
        padding-left: 15px;
        padding-right: 15px;
        margin-left: -15px;
    }

    a.nav-link {
        margin-top: 90px;
    }

    li.nav-item {
        width: 100px;
        float: right;
    }

    div.dropdown-menu.show {
        height: 430px !important;
    }

    #work, #workHome {
        margin-left: 0px;
        padding: 0px;
        float: right;
    }

    #about, #aboutHome {
        margin-left: 0px;
        padding: 0px;
        float: right;
    }
    /**** Main Nav End ****/

    #overviewSection, #targetMarketSection, #useCasesSection, #designProcessSection {
        width: 1220px;
        margin-left: -30px;
    }

    #prototypeSection {
        width: 1220px;
        margin-left: -15px;
    }

    #prototypeHomeScreen {
        margin-left: 550px;
        margin-top: -30px;
    }

    img#peoplePraying {
        margin-left: 15px;
    }

    #primaryMarketTextContainer {
        width: 650px !important;
        margin-left: 25px;
    }

    .targetMarketUserDescriptionContainers {
        width: 356px !important;
        margin-left: 15px;
        margin-right: 15px;
    }

    .userUseCases div {
        width: 1160px;
        margin-left: 15px;
        margin-right: 15px;
    }

    a#backToTop {
        margin-left: 15px;
    }

    #downloadRow {
        width: 1190px;
        height: 30px;
        margin-left: calc((100% - 1190px)/2);
        margin-bottom: 70px;
    }

    a#downloadPDF2 {

        float: right;
        margin-right: 15px;
    }

    .flowcharts {
        width: 70%;
        margin-left: calc((30%/2) + 115px);
        margin-top: 90px;
    }

    #flowchart3 {
        margin-top: 90px;
    }

    .col-4 {
        flex: 0 0 100% !important;
        max-width: 80% !important;
        margin-left: calc((100% - 80%)/2);
    }

    .footerFixedBottom div div {
        left: calc((100% - 1220px)/2);
        text-align: center;
    }

    #footerCopyright, #footerEmail {
        font-size: 1.0rem !important;
        text-align: center;
    }

    #footerCopyright {
        width: 190px;
    }

    #footerEmail {
        width: 190px;
    }

    #footerEmail a {
        width: 80px;
    }

    footer div.container div.row {
        margin-left: 0px;
    }

    footer div.container div.row ul {
        width: 100%;
    }

    [title~="copyright"] {
        width: 190px !important;
        margin-left: 165px !important;
    }

    [title~="email"] {
        width: 190px !important;
        margin-right: -10px !important;
    }

    footer div.container div.row ul li {
        float: left;
        margin-left: 5px;
        margin-right: 5px;
    }
}
/**** MEDIA QUERIES END ****/