/**** MEDIA QUERIES START */
@media (min-width: 320px) {
    .container {
        max-width: 300px;
    }
    
    /**** Main Nav Start ****/
    #headerBackBar {
        height: 115px;
    }

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

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

    #navbarSupportedContent ul {
        width: 300px;
        margin-top: 0px;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    #spacerColumn {
        display: none;
        width: 100%;
        height: auto;
    }

    nav {
        left: -10px;
    }

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

    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;
    }
    /**** Main Nav End ****/

    #caseStudyIntroTextContainer {
        margin: 0px;
        margin-bottom: 70px;
        padding: 0px;
    }
    
    #caseStudyIntroTextContainer.col-5 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    #caseStudyIntroRow div.centerImage {
        width: 100%;
    }

    .centerImage {
        margin-left: auto;
        margin-right: auto;
    }
    
    .col-5.centerImage {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    #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;
    }
    
    /**** Main Nav Start ****/
    #headerBackBar {
        height: 115px;
    }

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

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

    #navbarSupportedContent ul {
        width: 540px;
        margin-top: 0px;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    #spacerColumn {
        display: block;
        width: 50%;
        height: auto;
    }
    
    nav {
        left: -15px;
    }
    
    .navbar {
        width: 100% !important;
        padding: 0px;
        margin-left: 0px;
    }
    
    #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;
    }
    /**** Main Nav End ****/

    #caseStudyIntroTextContainer {
        width: 100%;
        position: relative;
        float: right;
        margin-bottom: -30px;
    }
    
    #caseStudyIntroRow div.centerImage {
        width: 80%;
    }

    #caseStudyIntroRow {
        height: 550px;
    }

    .painFace {
        width: calc((100% - 44%) - 60px);
        float: left;
        margin-left: 15px;
        margin-right: 15px;
    }

    #digitalLogoExplorationSection div.centerImage {
        width: calc((100% - 45%) - 60px);

    }

    #appIconSection div.centerImage {
        width: calc((100% - 45%) - 60px);
    }

    #prototypeSection div.centerImage {
        width: calc((100% - 45%) - 60px);
    }

    #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;
    }
    
    /**** Main Nav Start ****/
    #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;
    }
    
    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;
    }

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

    #caseStudyIntroTextContainer {
        width: 100%;
        margin-left: 0px;
        margin-right: 25px;
    }

    #caseStudyIntroRow {
        height: auto;
        margin-bottom: 3rem;
    }
    
    #caseStudyIntroRow div.centerImage {
        width: 80%;
    }

    .painFace {
        width: calc((100% - 46%) - 60px);
        float: left;
        margin-left: 15px;
        margin-right: 15px;
    }

    #wireFrameSection p {
        width: 100%;
    }

    #wireFrameSection div.centerImage {
        width: calc((100% - 63%) - 60px);
        float: left;
        margin-left: 15px;
        margin-right: 15px;
    }

    #digitalLogoExplorationSection div.centerImage {
        width: calc((100% - 61%) - 60px);
    }

    #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;
    }
    
    /**** 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;
    }

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

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

    .col-5.centerImage {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@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 ****/

    #caseStudyIntroTextContainer {
        width: calc((100% - 50%) - 60px) !important;
        margin-left: 15px;
        margin-right: 25px;
    }

    #caseStudyIntroRow div.centerImage {
        width: 48%;
    }

    .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: 145px !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 ****/