/* VARIABLES */

:root {

    --mobileMargin: 10%;

    --tabletMargin: 5%;

    --desktopMargin: 2%;

}

/* FORMATTING */

* {

    box-sizing: border-box;

    margin: 0 0 0 0;

    padding: 0 0 0 0;

}
  
header {

    margin-top: 0.5%;

}

#side-nav-bar-icon {

    color: #000000;
  
}

.backButton {

    margin: -2% 5% 0 0;

}


.body {

    width: 100vw;

    overflow: hidden;

}

.mainContainer {      
    
    width: 100vw;

    overflow: hidden;

    box-shadow: 0px 10px 5px #ffffff;  /*  rgb(83, 83, 83); */

    margin: 20% auto;
     
}

.sectionContainer {

    display: flex;

    flex-direction: column;

}

.sectionHeader {

    display: flex;

    flex-direction: column;

    width: 100%;
 
}

.projectTitle, .projectSectionTitle {

    width: 100%; 

    text-align: center;

}

.projectHeroImage img {

    width: 100%;

}

.projectSectionTitle img {

    width: 60%;

 /*   margin-top: 10%;*/

}

h1, h2, h3 {

    text-align: center;

}

#linkToLowFiPrototype, #linkToHiFiPrototype {

    text-align: center;

    margin: 1% auto;
 
}

/* MAIN FONTS */


#mainTitle, #endQuote, h1, h2, h3 {


    font-family:  "Helvetica Neue", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica", "Arial", "Lucida Grande", "sans-serif";
    color: blue;    

}

.summary {

    font-family: "Helvetica Neue", "Arial", "sans-serif";

}


.summaryLong {

    font-family: "Helvetica Neue", "Arial", "sans-serif";

}

.summarySteps {
    
    font-family: "Helvetica Neue", "Arial", "sans-serif";

}

.links {

    font-family: "Helvetica Neue", "Arial", "sans-serif";

    color: blue;

}

.links:visited {

    color: blue;

} 

li a {

    font-family: "Helvetica Neue", "Arial", "sans-serif";

}

.competitiveResearch {

    font-family:  "Helvetica Neue", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica", "Arial", "Lucida Grande", "sans-serif";

}

.backToTop {

    text-align: center;

    font-size: 1.25em;

    margin: 5% 0 5% 0;
   
}

.backToTop a, .backToTop a:visited {

    color: #0000ff;

}


/*** START OF MEDIA QUERIES ***/

@media screen and (min-width: 17em) {

    .side-nav-bar{

        top: 0;

        left: 9;

    }

    .mainContainer {      

        background-image: url("../images/backgrounds/ux_main_mobile.png");       
        background-repeat: no-repeat;     

        margin-top: 25%;

    }

    .sectionHeader {

        margin-top: 25%;

    }

    img {

       margin-top: var(--mobileMargin);

    }

    .problem, .goal, .roles, .responsibilities, .users, .userResearch, .painPoints, .persona, .journeyMap, .paperWireframes,.digitalWireframes, .lowFidelityPrototype,
    .usabilityResearch, .mockups, .prototypes, .highFidelityPrototype, .impactStatement, .outcomeStatement, .nextStepsContainer, .nextSteps {

        margin-top: var(--mobileMargin);

        text-align: center;
       
    } 

    .summary {

        margin-top: 10%;

    }

    .overview p, .problem p, .goal p, .roles p, .responsibilities p, .userResearch p, .paperWireframes p, .digitalWireframes p, .lowFidelityPrototype p, 
    .mockups p, .highFidelityPrototype p, .impactStatement p, .outcomeStatement p {

        width: 80%;

        text-indent: 10%;

        text-align: left;

        word-break: keep-all;

        margin: 10% auto;

    }

    .roles p {

        text-align: center;

    }

    .problem img, .goal img, .roles img, .responsibilities img, .accessibility img, .impactStatement img, .outcomeStatement img { 
       
        width: 75%;

    }

    .painPoints img, .persona img, .journeyMap img {

        width: 85%;

    }
   
    #mockupThree {

        margin-top: var(--mobileMargin);

        margin-bottom: var(--mobileMargin);

    }

    /* PAPER WIREFRAMES */

    .paperWireframes p {

        text-indent: 10%;

        text-align: left;

        width: 90%;

        margin: 0 auto;

    }

    .paperWireframes img {

        width: 100%;

    }

    /* DIGITAL WIREFRAMES */

    #digitalOne {

        width: 100%;
    
    }

    #digitalTwo {

        width: 80%;

    }

    /* PROTOTYPES */

    .lowFidelityPrototype img {

        width: 90%;

    }

    .lowFidelityPrototype p {

        text-align: left;

    }

    .highFidelityPrototype img {

        width: 90%;

    }

    /* USABILITY STUDY */

    .usabilityResearch img, .mockups img {

        width: 90%;

    }

    .nextStepsContainer {

        text-align: center;

    }

    .nextStepsContainer > img {

        width: 75%; 

    }

    .step img { 

        width: 15%;

    }

    .nextSteps {

        display: flex;

        flex-direction: column;

        justify-content: center;

    }

    .nextSteps ul {

        width: 50%;

        text-align: left;
      
        margin: 10% auto;
          
    }

    .nextSteps ul li {

        margin-top: 5%;

    }

    .contactContainer {

        margin-top: var(--mobileMargin);
    }

}


/* 540 */

@media screen and (min-width: 20em) {

    .side-nav-bar{

        height: 40vh;

    }

}

/* 540 */

@media screen and (min-width: 30em) {

    .mainNavBar {

        margin-top: -0.5%;

    }

    .mainContainer {

        margin: 0 0 0 0;

    }

    
    .projectHeroImage {

        text-align: center;

    }

    .projectHeroImage img {

        width: 90%;

    }

    .projectSectionTitle img {

        width: 50%;

    }

    img {

        margin-top: var(--tabletMargin);

    }
    
    .problem, .goal, .roles, .responsibilities, .users, .userResearch, .painPoints, .persona, .journeyMap, .paperWireframes, .digitalWireframes, .lowFidelityPrototype,
    .usabilityResearch, .mockups, .prototypes, .highFidelityPrototype, .conclusion, .impactStatement, .outcomeStatement, .nextStepsContainer, .nextSteps {

        margin-top: var(--tabletMargin);     
       
    } 

    
    .overview p, .problem p, .goal p, .roles p, .responsibilities p, .userResearch p, .paperWireframes p, .digitalWireframes p, .lowFidelityPrototype p, .mockups p,
    .highFidelityPrototype p, .impactStatement p, .outcomeStatement p {
     
        width: 75%;

        margin-top: var(--tabletMargin);

    }
    
    .problem img, .goal img, .roles img, .responsibilities img, .userResearch img, .impactStatement img, .outcomeStatement img { 
       
        width: 50%;

    }
    
    .painPoints img, .persona img, .journeyMap img {

        width: 85%;

    }
        
    #note {

        width: 70%;

        text-indent: 0%;

        margin-bottom: var(--mobileMargin);
               
    }

    .impactStatement {

        margin-top: 15%;

    }

    #screenShotsTitle {

        margin-top: 5%;

    }

    .nextStepsContainer > img {

        width: 65%; 

    }

    .step img {

        width: 10%;

    }

    .contactContainer {

        margin-bottom: var(--mobileMargin);

    }

}


/* 540 */

@media screen and (min-width: 33em) {

    .mainContainer{
          
        margin-top: 15%;
       
    }


}

/* 667 */

@media screen and (min-width: 40em) and (orientation: landscape){   

    .side-nav-bar{

        height: 140vh;

    }

    .mainContainer{

        background-image: url("../images/backgrounds/ux_main_desktop.png");
        background-repeat: no-repeat;
    
        margin-top: 15%;
       
    }

    .sectionContainer{

        margin-left: 5%;

    }

}

/* 768 */

@media screen and (min-width: 48em) {

    .mainContainer{

        background-image: url("../images/backgrounds/ux_main_desktop.png");
        background-repeat: no-repeat;
    
        margin-top: 0;

    }

    .sectionHeader {

        margin: 15% 0 0 0;

    }

    .projectHeroImage img {

        width: calc(100% * 0.7)

    }   

    .projectSectionTitle img {

        width: calc(100% * 0.3);

    }

    .problem, .goal, .roles, .responsibilities, .users, .userResearch, .painPoints, .persona, .journeyMap, .paperWireframes, .digitalWireframes, .lowFidelityPrototype,
    .usabilityResearch, .mockups, .prototypes, .highFidelityPrototype, .conclusion, .impactStatement, .outcomeStatement, .nextStepsContainer, .nextSteps {

        margin-top: var(--tabletMargin);
           
    } 

    .summary {

        margin-top: 10%;

    }

    .overview p, .problem p, .goal p, .roles p, .responsibilities p, .paperWireframes p, .digitalWireframes p, .lowFidelityPrototype p, .usabilityResearch p, .mockups p,
    .highFidelityPrototype p, .impactStatement p, .outcomeStatement p {

        width: 70%;

        font-size: 1.25em;

        margin: 10% auto;

    }   
    
    .problem img, .goal img, .roles img, .responsibilities img, .usabilityResearch img, .impactStatement img, .outcomeStatement img, .userResearch img { 
       
        width: 35%;

    }
    
    .painPoints img, .persona img, .journeyMap img {

        width: 70%;

    }  
    
    /* PAPER WIREFRAMES */

    .paperWireframes p {

        text-indent: 10%;

        text-align: left;

        width: 90%;

        margin: 5% auto;

    }

    .paperWireframes img {

        width: 60%;

    }

    /* DIGITAL WIREFRAMES */

    .digitalWireframes p {

        margin-top: 5%;

    }

    .digitalWireframes img {

        margin-top: 0;

    }

    #digitalOne {
            
        width: 50%;
    
    }

    #digitalTwo {

        width: 40%;

    }

    /* PROTOTYPES */

    .lowFidelityPrototype img, .highFidelityPrototype img  {

        width: 60%;

        margin-top: 0;

    }

    .lowFidelityPrototype p {

        text-align: left;

    }      
 
    /* USABILITY STUDY */

    .usabilityResearch img, .mockups img {

        width: 50%;

    }

    .mockups img {

        margin: 0;

    }

    .nextStepsContainer {

        text-align: center;

    }

    .nextStepsContainer > img {

        width: 40%; 

    }

    .step img {

        width: 8%;

    }

    .nextSteps {

        display: flex;

        flex-direction: column;

       justify-content: center;

    }

    .nextSteps ul {

        width: 50%;

        text-align: left;
      
        margin: 10% auto;
          
    }

    .nextSteps ul li {

        margin-top: 5%;

    }

    .contactContainer {

        margin-top: var(--mobileMargin);
    }

}


/* 800 */

@media screen and (min-width: 50em) {

   header{

        margin-top: 0;

    }


}

/* 1024 */

@media screen and (min-width: 64em) {

    .mainContainer {

        margin-top: 0;

    }

    h3 {

        font-size: 1.5em;

    }


}

/* 1280 */

/*** LAYOUT CHANGE ***/

@media screen and (min-width: 80em) {

    .sectionContainer {

        width: 80%;

        margin: 0 auto;

    }
    
    h1 {

        font-size: 2.5em;

    }

    h2 {

        font-size: 2em;

    }
           
    .projectHeroImage img {

        width: calc(100% * 0.5);

        margin: 2% auto;

    }

    .projectSectionTitle img {

        width: calc(100% * 0.25);

    }
    
    .projectContent {

        display: flex;

        flex-direction: column;
       
        margin: 0 0 0 0;

    }

    .introduction, .projectResearch {

        display: flex;

        flex-direction: row; 

        width: 80%;
        
        margin: 0 auto; 
      
    }

    .problem, .goal, .roles, .responsibilities {

        width: 50%;  
          
    }
     
    .problem img, .goal img, .roles img, .responsibilities img  {

        width: 250px;

        margin-top: var(--tabletMargin);

    }

    .problem p, .goal p, .roles p, .responsibilities p {

        width: 60%;

    }

    .problem, .goal, .roles, .responsibilities, .users, .userResearch, .painPoints, .persona, .journeyMap, .paperWireframes, .digitalWireframes, .lowFidelityPrototype,
    .usabilityResearch, .mockups, .prototypes, .highFidelityPrototype, .conclusion, .impactStatement, .outcomeStatement, .nextStepsContainer, .nextSteps {

        margin-top: var(--tabletMargin);
           
    } 
   
    .userResearch img {

        width: 30%;

    }

    .usersTopSection p {

        margin: 5% auto;

    }

    #digitalOne {

        width: 40%;

    }

    #digitalTwo {

        width: 30%;

    }

    .mockups {

        margin: 10% 0 0 0;

    }

    .mockups img {

        width: 40%;

        margin-bottom: var(--tabletMargin);

    }

    #mockupThree {

        width: 50%;

        margin-bottom: 0;

    }

    .conclusion {

        display: flex;

        flex-direction: row;

    }

    .impactStatement, .outcomeStatement {

        width: 50%;

    }      

    .impactStatement img, .outcomeStatement img {

        width: 250px;

    }

    .impactStatement p, .outcomeStatement p {

        width: 60%;

    }
    
    .nextStepsContainer {

        width: 80%;

        margin: 10% auto;

    }

    .nextStepsContainer img {

        width: 40%;

    }

    .nextSteps {

        display: flex;

        flex-direction: row;

    }

    .step img {

        width: 20%;

    }

    .step {

        width: 33.33%;

        font-size: 1.25em;

    }
        
    .contactContainer h2 {

        font-size: 2.5em;

    }

}

/* 1920 */

@media screen and (min-width: 120em) {

    .sectionContainer {

        width: 70%;

    }

    .problem, .goal, .roles, .responsibilities, .users, .userResearch, .painPoints, .persona, .journeyMap, .paperWireframes, .digitalWireframes, .lowFidelityPrototype,
    .usabilityResearch, .mockups, .prototypes, .highFidelityPrototype, .conclusion, .impactStatement, .outcomeStatement, .nextStepsContainer, .nextSteps {

        margin-top: var(--desktopMargin);
           
    } 

    .introduction, .projectResearch { 

        width: 70%

    }
  
    .problem img, .goal img, .roles img, .responsibilities img  {
       
        margin-top: var(--desktopMargin);

    }

    .problem p, .goal p, .roles p, .responsibilities p {

        width: 70%;

    }

    .conclusion {

        width: 80%;

        margin: 10% auto;

    }
  
    .impactStatement p, .outcomeStatement p {

        width: 85%;

    }

      
}

/* 2560 */

@media screen and (min-width: 160em) {

    .sectionContainer {

        width: 50%;

    }        
   
    .problem p, .goal p, .roles p, .responsibilities p {

        width: 75%;

    }

    .userResearch img {

        width: 20%;

    }

    .nextStepsContainer img {

        width: 30%;

    }

    .nextSteps {

        display: flex;

        flex-direction: row;

    }

    .step img {

        width: 15%;

    }
        
}

/* 3000 */ 

@media screen and (min-width: 200em) {

    .sectionContainer {

        margin-top: -2%;

    }

    .introduction, .projectResearch {
        
        width: 60%

    }
       
    .problem p, .goal p, .roles p, .responsibilities p {

        width: 70%;

    }
    
    .conclusion {

        width: 70%;

    }

    .impactStatement p, .outcomeStatement p {

        width: 75%;

    }
    
}

/*** END OF MEDIA QUERIES **/