@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Montserrat,'Courier New', Courier, monospace, sans-serif;
    /*background:#2b323c;*/
    background-color:#fff;
}

html{
    max-width:1540px;
    margin: 0 auto;
}

/* Header styles */

header{
    padding-top:4vh;
    padding-bottom:3vh;
   /* background-color:#686e76;*/
   /*background:#2b323c;*/
   background-color:#fff;
   font-weight:bolder;
}

#header-container{
    display:flex;
    flex-direction:row;
}

#name-div{
    width:20%;
}

#nav-div{
    width:80%;
    text-align:right;
}

header h2{
    color:#484848;
    font-size:calc(5px + 1.8vw);
    padding-left:2vw;
}

header a{
    text-decoration:none;
}

header nav li{
    display:inline;
    font-size:calc(1vw + 5px);
    margin-left:1vw;
    margin-right:1vw;
}

header li:hover{
    color:rgb(68, 0, 255);
}

header nav a{
    text-decoration: none;
    color:#484848;
}

.socials-icon{
    width:2.1%;
}

#page-title h1{
    font-size:calc(1px + 3vw);
    margin-top:10vh;
    margin-bottom:5vh;
    text-align:center;
}

/* footer */

footer{
    font-size:calc(5px + .5vw);
    text-align: center;
    margin:10vh auto;
}

/* project title*/

#project-title{
    text-align:center;
    margin-bottom:5vh;
    color:#484848;
    font-size:calc(5px + 1.5vw);
    height:auto;
}

/* Thesis Video */

video{
    display:block;
    margin:0 auto;
    border-radius:60px;
    height:auto;
    margin-bottom:6vh;
}

/* Table of Contents */

#table-of-contents{
    color:#484848;
    margin:14vh 0;
    text-align:center;
    height:auto;
}

#table-of-contents h2{
    font-size:calc(5px + 1.5vw);
    margin-bottom:2vh;
}

#table-of-contents h3{
    margin-top:2vh;
    margin-bottom:2vh;
    font-size:calc(5px + 1vw);
}

#table-of-contents a{
    color:rgb(68, 0, 255);
    font-weight:bold;
}

/* Thesis Statement */

#introduction{
    width:45%;
    margin:0 auto;
    margin-bottom:14vh;
}

#introduction h2{
    color:#484848;
    margin-bottom:2vh;
    font-size:calc(5px + 1.5vw);
}

#introduction p{
    color:#484848;
    margin-top:2vh;
    margin-bottom:2vh;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

/* How it Works section */

#how-it-works{
    text-align:center;
    color:#484848;
    margin-bottom:0;
    font-size:calc(5px + 1.5vw);
}

#hiw-boxes{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content: center;
    margin-top:6vh;
    margin-bottom:14vh;
    height:auto;
    text-align:center;
}

#hiw-box-1{
    width:29%;
}

#hiw-box-1 p{
    color:#484848;
    margin-top:2vh;
    margin-bottom:2vh;
    padding-right:1vw;
    padding-left:1vw;
    font-size:calc(5px + .6vw);
    line-height: 165%;
}

#hiw-box-2{
    width:29%;
}

#hiw-box-2 p{
    color:#484848;
    margin-top:2vh;
    margin-bottom:2vh;
    padding-right:1vw;
    padding-left:1vw;
    font-size:calc(5px + .6vw);
    line-height: 165%;
}

#hiw-box-3{
    width:29%;
}

#hiw-box-3 p{
    color:#484848;
    margin-top:2vh;
    margin-bottom:2vh;
    padding-right:1vw;
    padding-left:1vw;
    font-size:calc(5px + .6vw);
    line-height: 165%;
}

.hiw-title{
    font-size:calc(5px + .9vw);
}

/* Methodology Section 1 */

#methodology{
    display:flex;
    flex-direction:row;
    justify-content:center;
    height:auto;
}

#methodology-text{
    width:40%;
    color:#484848;
    margin:auto 0;
    font-size:calc(5px + .8vw);
    line-height: 170%;
}

#methodology-text h2{
    color:#484848;
    margin-bottom:2vh;
    font-size:calc(5px + 1.5vw);
}

#methodology-text p{
    color:#484848;
    margin-top:2vh;
    margin-bottom:2vh;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

#methodology-image{
    width:40%;
    display:flex;
    justify-content: center;
    align-items: center;
    padding-left:4vw;
}

/* Methodology Section 2 */

#methodology-2{
    display:flex;
    flex-direction:row;
    justify-content:center;
    height:auto;
    margin:14vh 0;
}

#triangle-image{
    width:40%;
    display:flex;
    justify-content: center;
    align-items: center;
    margin-right:2vw;
}

#methodology-2-text{
    width:40%;
    margin:auto 0;
}

#methodology-2-text p{
    color:#484848;
    margin-top:6vh;
    margin-bottom:2vh;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

/* Methodology Section 3 (Questions) */

#questioning{
    display:flex;
    flex-direction:row;
    justify-content:center;
    height:auto;
    margin-top:20vh;
}

#question-text{
    width:40%;
}

#question-text p{
    color:#484848;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

#big-questions{
    width:40%;
    padding-left:5vw;
    text-align:left;
}

#big-questions h2{
    color:#484848;
    margin-top:1.5vh;
    margin-bottom:1.5vh;
    font-size:calc(5px + .8vw);
}

/* Methodology Section 3 (Questions part 2) */

#questioning-2{
    display:flex;
    flex-direction:row;
    justify-content:center;
    margin:0;
    margin-bottom:20vh;
    height:auto;
}

#question-2-text{
    width:40%;
    margin-top:10vh;
}

#question-2-text p{
    color:#484848;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

#big-questions-2{
    width:40%;
    padding-left:5vw;
    text-align:left;
}

#big-questions-2 h2{
    color:#484848;
    margin-top:1.5vh;
    margin-bottom:1.5vh;
    font-size:calc(5px + .7vw);
}

/* The Problem Section */

#the-problem{
    display:flex;
    flex-direction:row;
    justify-content:center;
    height:auto;
    margin:30vh 0;
}

#problem-text{
    width:40%;
    color:#484848;
    margin:auto 0;
    font-size:calc(5px + .8vw);
    line-height: 170%;
}

#problem-text h2{
    color:#484848;
    margin-bottom:2vh;
    font-size:calc(5px + 1.5vw);
}

#problem-text p{
    color:#484848;
    margin-top: 2vh;
    margin-bottom:2vh;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

#problem-image{
    width:40%;
    display:grid;
    justify-content: left;
    align-items: center;
}

/* My Hypothesis */

#my-hypothesis{
    width:45%;
    margin:18vh auto;
    height:auto;
}

#my-hypothesis h2{
    color:#484848;
    margin-bottom:2vh;
    font-size:calc(5px + 1.5vw);
}

#my-hypothesis p{
    color:#484848;
    margin-top:2vh;
    margin-bottom:2vh;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}


/* Process */

#process{
    width:45%;
    margin:14vh auto;
    height:auto;
}

#process h2{
    color:#484848;
    margin-bottom:2vh;
    font-size:calc(5px + 1.5vw);
}

#process p{
    color:#484848;
    margin-top:2vh;
    margin-bottom:2vh;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

/* Process images */


#process-boxes{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content: center;
    margin-top:6vh;
    margin-bottom:16vh;
    text-align:center;
    height:auto;
}

#process-box-1{
    width:29%;
}

#process-box-1 img{
    width:90%;
    border-radius:40px;
}

#process-box-1 p{
    color:#484848;
    margin-top:2vh;
    margin-bottom:2vh;
    padding-right:1vw;
    padding-left:1vw;
    font-size:calc(5px + .6vw);
    line-height: 165%;
}

#process-box-2{
    width:29%;
}

#process-box-2 img{
    width:90%;
    border-radius:40px;
}

#process-box-2 p{
    color:#484848;
    margin-top:2vh;
    margin-bottom:2vh;
    padding-right:1vw;
    padding-left:1vw;
    font-size:calc(5px + .6vw);
    line-height: 165%;
}

#process-box-3{
    width:29%;
}

#process-box-3 img{
    width:90%;
    border-radius:40px;
}

#process-box-3 p{
    color:#484848;
    margin-top:2vh;
    margin-bottom:2vh;
    padding-right:1vw;
    padding-left:1vw;
    font-size:calc(5px + .6vw);
    line-height: 165%;
}

/* Experiments */

#experiments{
    width:45%;
    margin:0 auto;
    margin-bottom:8vh;
    margin-top:14vh;
    height:auto;
}

#experiments h2{
    color:#484848;
    margin-bottom:2vh;
    font-size:calc(5px + 1.5vw);
}

#experiments p{
    color:#484848;
    margin-top:2vh;
    margin-bottom:0;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

#select{
    font-size:calc(5px + .7vw);
    margin-top:4vh;
    text-align:center;
}

/* Experiment images and captions */

#experiment-boxes{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content: center;
    margin-top:6vh;
    margin-bottom:4vh;
    text-align:center;
}

#experiment-box-1{
    width:20%;
}

#experiment-box-1 p{
    color:#484848;
    margin-top:2vh;
    margin-bottom:2vh;
    padding-right:1vw;
    padding-left:1vw;
    font-size:calc(5px + .6vw);
    line-height: 165%;
}

#experiment-box-2{
    width:20%;
}

#experiment-box-2 p{
    color:#484848;
    margin-top:2vh;
    margin-bottom:2vh;
    padding-right:1vw;
    padding-left:1vw;
    font-size:calc(5px + .6vw);
    line-height: 165%;
}

#experiment-box-3{
    width:20%;
}

#experiment-box-3 p{
    color:#484848;
    margin-top:2vh;
    margin-bottom:2vh;
    padding-right:1vw;
    padding-left:1vw;
    font-size:calc(5px + .6vw);
    line-height: 165%;
}

#experiment-box-4{
    width:20%;
}

#experiment-box-4 p{
    color:#484848;
    margin-top:2vh;
    margin-bottom:2vh;
    padding-right:1vw;
    padding-left:1vw;
    font-size:calc(5px + .6vw);
    line-height: 165%;
}

/* Experiment hover effect */

.category{
    width:45%;
    margin:2vw;
    height:90vh;
    translate: none;
  rotate: none;
  scale: none;
  transform: translate(0px);
  opacity: 1;
}

.category:hover{
    transform: scale(1.02, 1.02);
    transition-duration: .3s;
}

.category:not(:hover){
    width:45%;
    margin:2vw;
    height:90vh;
    transform: scale(1, 1);
    transition-duration: .3s;
}

/* Interview Section */

#interview{
    display:flex;
    flex-direction:row;
    justify-content:center;
    height:auto;
}

#interview-text{
    width:40%;
    color:#484848;
    margin:auto 0;
    font-size:calc(5px + .8vw);
    line-height: 170%;
}

#interview-text h2{
    color:#484848;
    margin-bottom:2vh;
    font-size:calc(5px + 1.5vw);
}

#interview-text p{
    color:#484848;
    margin-top:2vh;
    margin-bottom:2vh;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

#interview-image{
    width:40%;
    display:flex;
    justify-content: center;
    align-items: center;
    padding-left:4vw;
}

/* Special Button (it can be used across this whole page!) */

.btn41-43 {
    padding: 1.5vh 2.5vw;
    font-weight: 500;
    font-size:calc(5px + .7vw);
    background: transparent;
    outline: none !important;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
  }
  
  .btn-41 {
    border: 2px solid rgb(68, 0, 255);
    border-radius:10px;
    z-index: 1;
    color:rgb(68, 0, 255);
  }
  
  .btn-41:after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    direction: rtl;
    z-index: -1;
    background: rgb(68, 0, 255);
    border-radius:5px;
    transition: all 0.3s ease;
  }
  
  .btn-41:hover {
    color:#fff;
  }
  
  .btn-41:hover:after {
    left: auto;
    right: 0;
    width: 100%;
  }
  
  .btn-41:active {
    top: 2px;
  }

  /* Competitive Audit section 1 */

#audit-1{
    width:45%;
    margin-top:20vh;
    margin-bottom:10vh;
    margin-left:auto;
    margin-right:auto;
    height:auto;
}

#audit-1 h2{
    color:#484848;
    margin-bottom:2vh;
    font-size:calc(5px + 1.5vw);
}

#audit-1 p{
    color:#484848;
    margin-top:2vh;
    margin-bottom:2vh;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

 /* Competitive Audit section 2 */

#audit-2{
    width:30%;
    display:flex;
    flex-direction: row;
    justify-content: center;
    height:auto;
    margin:0 auto;
}

#audit-2-img-1{
    width:100%;
    border-radius:20px 0 0 20px;
}

#audit-2-img-2{
    width:100%;
}

#audit-2-img-3{
    width:100%;
    border-radius:0 20px 20px 0;
}

/* Competitive Audit section 3 */

#audit-3{
    width:45%;
    margin:10vh auto;
    height:auto;
}

#audit-3 p{
    color:#484848;
    margin-top:2vh;
    margin-bottom:2vh;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

/* Mockups Section 1*/

#mockup-section-1{
    display:flex;
    flex-direction:row;
    justify-content:center;
    height:auto;
    margin-top:20vh;
    margin-bottom:10vh;
}

#mockup-text-1{
    width:40%;
    color:#484848;
    margin:auto 0;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

#mockup-text-1 h2{
    color:#484848;
    margin-bottom:2vh;
    font-size:calc(5px + 1.5vw);
}

#mockup-text-1 p{
    color:#484848;
    margin-top:2vh;
    margin-bottom:2vh;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

#mockup-image-1{
    width:40%;
    display:flex;
    justify-content: center;
    align-items: center;
    padding-left:4vw;
}

/* Mockup section 2 */

#mockup-section-2{
    display:flex;
    flex-direction:row;
    justify-content:center;
    height:auto;
    margin-top:20vh;
    margin-bottom:10vh;
}

#mockup-text-2{
    width:40%;
    color:#484848;
    margin:auto 0;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

#mockup-text-2 p{
    color:#484848;
    margin-top:2vh;
    margin-bottom:2vh;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

#mockup-image-2{
    width:40%;
    display:flex;
    justify-content: center;
    align-items: center;
    padding-left:4vw;
}

/* Mockup section 3 */

#mockup-section-3{
    display:flex;
    flex-direction:row;
    justify-content:center;
    height:auto;
    margin-top:20vh;
    margin-bottom:10vh;
}

#mockup-text-3{
    width:40%;
    color:#484848;
    margin:auto 0;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

#mockup-text-3 p{
    color:#484848;
    margin-top:2vh;
    margin-bottom:2vh;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

#mockup-image-3{
    width:40%;
    display:flex;
    justify-content: center;
    align-items: center;
    padding-left:4vw;
}

  /* Design Solutions section 1 */

  #solutions-1{
    width:45%;
    margin-top:20vh;
    margin-bottom:10vh;
    margin-left:auto;
    margin-right:auto;
}

#solutions-1 h2{
    color:#484848;
    margin-bottom:2vh;
    font-size:calc(5px + 1.5vw);
}

#solutions-1 p{
    color:#484848;
    margin-top:2vh;
    margin-bottom:2vh;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

/* Design Solutions section 2 */

#solutions-2{
    display:flex;
    flex-direction:row;
    justify-content:center;
    height:auto;
    margin-top:20vh;
    margin-bottom:10vh;
}

#solutions-2-text{
    width:40%;
    color:#484848;
    margin:auto 0;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

#solutions-2-text p{
    color:#484848;
    margin-top:2vh;
    margin-bottom:2vh;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

#solutions-2-image{
    width:40%;
    display:flex;
    justify-content: center;
    align-items: center;
    padding-right:4vw;
}


/* Design Solutions section 3 */

#solutions-3{
    display:flex;
    flex-direction:row;
    justify-content:center;
    height:auto;
    margin-top:20vh;
    margin-bottom:10vh;
}

#solutions-3-text{
    width:40%;
    color:#484848;
    margin:auto 0;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

#solutions-3-text p{
    color:#484848;
    margin-top:2vh;
    margin-bottom:2vh;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

#solutions-3-image{
    width:40%;
    display:flex;
    justify-content: center;
    align-items: center;
    padding-right:4vw;
}

/* Design Solutions section 4 */

#solutions-4{
    display:flex;
    flex-direction:row;
    justify-content:center;
    height:auto;
    margin-top:20vh;
    margin-bottom:10vh;
}

#solutions-4-text{
    width:40%;
    color:#484848;
    margin:auto 0;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

#solutions-4-text p{
    color:#484848;
    margin-top:2vh;
    margin-bottom:2vh;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

#solutions-4-image{
    width:40%;
    display:flex;
    justify-content: center;
    align-items: center;
    padding-right:4vw;
}

/* Design Solutions section 5 */

#solutions-5{
    display:flex;
    flex-direction:row;
    justify-content:center;
    height:auto;
    margin-top:20vh;
    margin-bottom:10vh;
}

#solutions-5-text{
    width:40%;
    color:#484848;
    margin:auto 0;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

#solutions-5-text p{
    color:#484848;
    margin-top:2vh;
    margin-bottom:2vh;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

#solutions-5-image{
    width:40%;
    display:flex;
    justify-content: center;
    align-items: center;
    padding-left:4vw;
}

/* Design Solutions section 6 */

#solutions-6{
    display:flex;
    flex-direction:row;
    justify-content:center;
    height:auto;
    margin-top:20vh;
    margin-bottom:10vh;
}

#solutions-6-text{
    width:40%;
    color:#484848;
    margin:auto 0;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

#solutions-6-text p{
    color:#484848;
    margin-top:2vh;
    margin-bottom:2vh;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

#solutions-6-image{
    width:40%;
    display:flex;
    justify-content: center;
    align-items: center;
    padding-right:4vw;
}

/* Conclusion */

  #conclusion-1{
    width:45%;
    margin-top:20vh;
    margin-bottom:10vh;
    margin-left:auto;
    margin-right:auto;
}

#conclusion-1 h2{
    color:#484848;
    margin-bottom:2vh;
    font-size:calc(5px + 1.5vw);
}

#conclusion-1 p{
    color:#484848;
    margin-top:2vh;
    margin-bottom:2vh;
    font-size:calc(5px + .7vw);
    line-height: 170%;
}

 /* Hide Hamburger Icon*/
 #hamnav label, #hamburger{display:none;}
 /* Small Screens */
 @media screen and (max-width:786px){
 /* Break into vertical menu */
 #ham-items{display:block;font-size: calc(2vw + 5px);}
 #ham-items a{
     display:block;
     width:100%;
     box-sizing:border-box;
     border-top:1px solid #fff;
     font-weight:bold;
 }
 /* Show Hamburger Icon */
 #hamnav label{
     display:inline-block;
     color:rgb(68, 0, 255);
     background:#fff;
     font-size:1.6em;
     padding:0 1vw;
 }
 /* Hide/collapse menu items for the default look */
 #ham-items{display:none;}
 #hamnav input:checked ~ #ham-items{display:block;}
 }



 @media only screen and (max-width:786px){
   /* html, body{width:90%;}*/
    header h2{padding-left:0;display:flex;justify-content: center;}
    #name-div{width:40%;}
    #name-div h2{font-size:calc(4px + 3.5vw);align-items: flex-end;}
    #nav-div{width:55%;}
    header nav li{font-size: calc(3vw + 10px);}
    ul#ham-items{margin:4vh 0;}
    a{margin:6vh 0;}
    .socials-icon{width:10%;}
    #page-title h1{font-size:calc(1px + 3.5vw);}

    /* project title */
    #page-title h1{font-size:calc(1px + 4vw);}
    #project-title{font-size:calc(1px + 3vw);}

    /* video */

    video{width:90%;border-radius:20px;}
    
    /* Table of Contents */

    #table-of-contents h2{font-size:calc(1px + 3vw);}
    #table-of-contents h3{font-size:calc(1px + 2.5vw);}

    /* thesis statement */

    #introduction{width:70%;}
    #introduction h2{font-size:calc(1px + 3vw);}
    #introduction p{font-size:calc(1px + 2vw);}

    /* how it works */

    #how-it-works{font-size:calc(1px + 3vw);}
    #hiw-box-1{border-radius:20px;}
    #hiw-box-1 p{font-size:calc(1px + 1.5vw);}
    #hiw-box-2{border-radius:20px;}
    #hiw-box-2 p{font-size:calc(1px + 1.5vw);}
    #hiw-box-3{border-radius:20px;}
    #hiw-box-3 p{font-size:calc(1px + 1.5vw);}
    .hiw-title{font-size:calc(1px + 2.8vw);}

    /* methodology */

    #methodology{flex-direction:column;align-items:center;}
    #methodology-text{width:70%;}
    #methodology-text h2{font-size:calc(1px + 3vw);}
    #methodology-text p{font-size:calc(1px + 2vw);}
    #methodology-image{width:70%;padding-left:0;margin-top:2vh;}

    /* methodology section 2 */

    #methodology-2{flex-direction:column;align-items:center;margin:8vh 0;}
    #methodology-2-text{width:70%;}
    #methodology-2-text p{font-size:calc(1px + 2vw);}
    #triangle-image{width:70%;margin-right:0;}

    /* Question section 1 */

    #questioning{flex-direction:column;align-items:center;margin-top:10vh;}
    #question-text{width:70%;}
    #question-text p{font-size:calc(1px + 2vw);}
    #big-questions{width:70%;padding-left:0;margin:2vh 0;}
    #big-questions h2{font-size:calc(1px + 2.2vw);text-align:center;}

    /* question section 2 */

    #questioning-2{flex-direction:column;align-items:center;}
    #question-2-text{width:70%;}
    #question-2-text p{font-size:calc(1px + 2vw);}
    #big-questions-2{width:70%;padding-left:0;margin:2vh 0;}
    #big-questions-2 h2{font-size:calc(1px + 2.2vw);text-align:center;}

    /* the problem */

    #the-problem{flex-direction:column-reverse;align-items:center;margin:10vh 0;}
    #problem-text{width:70%;}
    #problem-text h2{font-size:calc(1px + 3vw);}
    #problem-text p{font-size:calc(1px + 2vw);}
    #problem-image{width:70%;margin-top:2vh;}

    /* my hypothesis */

    #my-hypothesis{width:70%;}
    #my-hypothesis h2{font-size:calc(1px + 3vw);}
    #my-hypothesis p{font-size:calc(1px + 2vw);}

    /* process */

    #process{width:70%;}
    #process h2{font-size:calc(1px + 3vw);}
    #process p{font-size:calc(1px + 2vw);}

    /* process images */

    #process-box-1 img{border-radius:16px;}
    #process-box-1 p{font-size:calc(1px + 2vw);}
    #process-box-2 img{border-radius:16px;}
    #process-box-2 p{font-size:calc(1px + 2vw);}
    #process-box-3 img{border-radius:16px;}
    #process-box-3 p{font-size:calc(1px + 2vw);}

    /* experiments */

    #experiments{width:70%;}
    #experiments h2{font-size:calc(1px + 3vw);}
    #experiments p{font-size:calc(1px + 2vw);}
    #select{font-size:calc(1px + 2vw);}

    /* experiment boxes */

    #experiment-box-1{width:40%;height:auto;}
    #experiment-box-1 p{font-size:calc(1px + 2vw);}
    #experiment-box-2{width:40%;height:auto;}
    #experiment-box-2 p{font-size:calc(1px + 2vw);}
    #experiment-box-3{width:40%;height:auto;}
    #experiment-box-3 p{font-size:calc(1px + 2vw);}
    #experiment-box-4{width:40%;height:auto;}
    #experiment-box-4 p{font-size:calc(1px + 2vw);}

    /* thesis interview */

    #interview{flex-direction:column;align-items:center;margin:10vh 0;}
    #interview-text{width:70%;}
    #interview-text h2{font-size:calc(1px + 3vw);}
    #interview-text p{font-size:calc(1px + 2vw);}
    .btn41-43{font-size:calc(1px + 2vw);margin-left:18vw;margin-right:18vw;}
    #interview-image{width:70%;padding-left:0;}

    /* Competitive Audit */

    #audit-1{width:70%;margin-bottom:4vh;}
    #audit-1 h2{font-size:calc(1px + 3vw);}
    #audit-1 p{font-size:calc(1px + 2vw);}
    #audit-2{flex-direction:column;align-items:center;width:60%;}
    #audit-2-img-1{border-radius:20px;margin:2vh 0;}
    #audit-2-img-2{border-radius:20px;margin:2vh 0;}
    #audit-2-img-3{border-radius:20px;margin:2vh 0;}
    #audit-3{width:70%;}
    #audit-3 p{font-size:calc(1px + 2vw);}

    /* mockups */

    #mockup-section-1{flex-direction:column;align-items: center;margin-bottom:0;}
    #mockup-text-1{width:70%;}
    #mockup-text-1 h2{font-size:calc(1px + 3vw);}
    #mockup-text-1 p{font-size:calc(1px + 2vw);}
    #mockup-image-1{width:70%;padding-left:0;margin:2vh 0;}
    #mockup-section-2{flex-direction:column;align-items: center;margin-top:2vh;margin-bottom:0;}
    #mockup-text-2{width:70%;}
    #mockup-text-2 p{font-size:calc(1px + 2vw);}
    #mockup-image-2{width:70%;padding-left:0;margin:2vh 0;}
    #mockup-section-3{flex-direction:column;align-items: center;margin-top:2vh;margin-bottom:0;}
    #mockup-text-3{width:70%;}
    #mockup-text-3 p{font-size:calc(1px + 2vw);}
    #mockup-image-3{width:70%;padding-left:0;margin:2vh 0;}

    /* design solutions */

    #solutions-1{width:70%;}
    #solutions-1 h2{font-size:calc(1px + 3vw);}
    #solutions-1 p{font-size:calc(1px + 2vw);}
    #solutions-2{flex-direction:column;align-items:center;margin:4vh 0;}
    #solutions-2-image{width:70%;padding-right:0;margin-bottom:2vh;}
    #solutions-2-text{width:70%;}
    #solutions-2-text p{font-size:calc(1px + 2vw);}
    #solutions-3{flex-direction:column;align-items:center;margin:4vh 0;}
    #solutions-3-image{width:70%;padding-right:0;margin:2vh 0;}
    #solutions-3-text{width:70%;}
    #solutions-3-text p{font-size:calc(1px + 2vw);}
    #solutions-4{flex-direction:column;align-items:center;margin:4vh 0;}
    #solutions-4-image{width:70%;padding-right:0;margin:2vh 0;}
    #solutions-4-text{width:70%;}
    #solutions-4-text p{font-size:calc(1px + 2vw);}
    #solutions-5{flex-direction:column-reverse;align-items:center;margin:4vh 0;}
    #solutions-5-image{width:70%;padding-left:0;margin:2vh 0;}
    #solutions-5-text{width:70%;}
    #solutions-5-text p{font-size:calc(1px + 2vw);}
    #solutions-6{flex-direction:column;align-items:center;margin:4vh 0;}
    #solutions-6-image{width:70%;padding-right:0;margin:2vh 0;}
    #solutions-6-text{width:70%;}
    #solutions-6-text p{font-size:calc(1px + 2vw);}

    /* conclusion */

    #conclusion-1{width:70%;}
    #conclusion-1 h2{font-size:calc(1px + 3vw);}
    #conclusion-1 p{font-size:calc(1px + 2vw);}

 }

 @media only screen and (max-width:600px){
    /* html, body{width:100%;}*/
     header{margin-top:0;}
     header h2{margin-top:1vh;}
     #page-title h1{font-size:calc(1px + 4.5vw);}

     /*page title and project title*/

     #page-title h1{font-size:calc(1px + 5vw);}
     #project-title{font-size:calc(1px + 4vw);}

     /* Table of Contents */

    #table-of-contents h2{font-size:calc(1px + 4vw);}
    #table-of-contents h3{font-size:calc(1px + 3.5vw);margin:3.5vh 0;}

     /* thesis statement */

     #introduction{width:85%;}
     #introduction h2{font-size:calc(1px + 4vw);}
     #introduction p{font-size:calc(1px + 3vw);}

     /* how it works */

     #how-it-works{font-size:calc(1px + 4vw);}
     #hiw-boxes{flex-direction:column;align-content: center;}
     #hiw-box-1{width:90%;margin-bottom:8vh;}
     #hiw-box-1 p{font-size:calc(1px + 3vw);}
     #hiw-box-2{width:90%;margin-bottom:8vh;}
    #hiw-box-2 p{font-size:calc(1px + 3vw);}
    #hiw-box-3{width:90%;margin-bottom:0;}
    #hiw-box-3 p{font-size:calc(1px + 3vw);}
     .hiw-title{font-size:calc(1px + 2.8vw);}

     /* methodology */

    #methodology{flex-direction:column;align-items:center;margin:2vh 0;}
    #methodology-text{width:85%;}
    #methodology-text h2{font-size:calc(1px + 4vw);}
    #methodology-text p{font-size:calc(1px + 3vw);}
    #methodology-image{width:90%;padding-left:0;margin-top:2vh;}

    /* methodology section 2 */

    #methodology-2{flex-direction:column;align-items:center;margin:8vh 0;}
    #methodology-2-text{width:85%;}
    #methodology-2-text p{font-size:calc(1px + 3vw);}
    #triangle-image{width:100%;margin-right:0;}

    /* Question section 1 */

    #questioning{flex-direction:column;align-items:center;margin-top:6vh;}
    #question-text{width:85%;}
    #question-text p{font-size:calc(1px + 3vw);}
    #big-questions{width:85%;padding-left:0;margin:2vh 0;}
    #big-questions h2{font-size:calc(1px + 4vw);text-align:center;}

    /* question section 2 */

    #questioning-2{flex-direction:column;align-items:center;margin-bottom:16vh;}
    #question-2-text{width:85%;margin:2vh 0;}
    #question-2-text p{font-size:calc(1px + 3vw);}
    #big-questions-2{width:85%;padding-left:0;margin:2vh 0;}
    #big-questions-2 h2{font-size:calc(1px + 4vw);text-align:center;}

    /* the problem */

    #the-problem{flex-direction:column-reverse;align-items:center;margin:8vh 0;}
    #problem-text{width:85%;}
    #problem-text h2{font-size:calc(1px + 4vw);}
    #problem-text p{font-size:calc(1px + 3vw);}
    #problem-image{width:100%;margin-top:2vh;display:flex;align-items:center;justify-content: center;}

    /* my hypothesis */

    #my-hypothesis{width:85%;}
    #my-hypothesis h2{font-size:calc(1px + 4vw);}
    #my-hypothesis p{font-size:calc(1px + 3vw);}

    /* process */

    #process{width:85%;margin-bottom:2vh;}
    #process h2{font-size:calc(1px + 4vw);}
    #process p{font-size:calc(1px + 3vw);}

    /* process boxes */

    #process-boxes{flex-direction:column;align-items:center;}
    #process-box-1{width:80%;margin:2vh 0;}
    #process-box-1 p{font-size:calc(1px + 3vw);}
    #process-box-2{width:80%;margin:2vh 0;}
    #process-box-2 p{font-size:calc(1px + 3vw);}
    #process-box-3{width:80%;margin:2vh 0;}
    #process-box-3 p{font-size:calc(1px + 3vw);}

    /* experiments */

    #experiments{width:85%;}
    #experiments h2{font-size:calc(1px + 4vw);}
    #experiments p{font-size:calc(1px + 3vw);}
    #select{font-size:calc(1px + 3vw);}

    /* experiment boxes */

    #experiment-boxes{flex-direction:column;align-items:center;}
    #experiment-box-1{width:70%;margin:4vh 0;height:auto;}
    #experiment-box-1 p{font-size:calc(1px + 3vw);}
    #experiment-box-2{width:70%;margin:4vh 0;height:auto;}
    #experiment-box-2 p{font-size:calc(1px + 3vw);}
    #experiment-box-3{width:70%;margin:4vh 0;height:auto;}
    #experiment-box-3 p{font-size:calc(1px + 3vw);}
    #experiment-box-4{width:70%;margin:4vh 0;height:auto;}
    #experiment-box-4 p{font-size:calc(1px + 3vw);}

    /* thesis interview */

    #interview{flex-direction:column;align-items:center;margin:10vh 0;}
    #interview-text{width:85%;}
    #interview-text h2{font-size:calc(1px + 4vw);}
    #interview-text p{font-size:calc(1px + 3vw);}
    .btn41-43{font-size:calc(1px + 3vw);margin:4vh 19vw;margin-bottom:6vh;}
    #interview-image{width:90%;padding-left:0;}

    /* Competitive Audit */

    #audit-1{width:85%;margin-bottom:4vh;}
    #audit-1 h2{font-size:calc(1px + 4vw);}
    #audit-1 p{font-size:calc(1px + 3vw);}
    #audit-2{flex-direction:column;align-items:center;width:90%;}
    #audit-2-img-1{border-radius:20px;margin:2vh 0;}
    #audit-2-img-2{border-radius:20px;margin:2vh 0;}
    #audit-2-img-3{border-radius:20px;margin:2vh 0;}
    #audit-3{width:85%;}
    #audit-3 p{font-size:calc(1px + 3vw);}

    /* mockups */

    #mockup-section-1{flex-direction:column;align-items: center;margin-bottom:0;}
    #mockup-text-1{width:85%;}
    #mockup-text-1 h2{font-size:calc(1px + 4vw);}
    #mockup-text-1 p{font-size:calc(1px + 3vw);}
    #mockup-image-1{width:90%;padding-left:0;margin:2vh 0;}
    #mockup-section-2{flex-direction:column;align-items: center;margin-top:2vh;margin-bottom:0;}
    #mockup-text-2{width:85%;}
    #mockup-text-2 p{font-size:calc(1px + 3vw);}
    #mockup-image-2{width:90%;padding-left:0;margin:2vh 0;}
    #mockup-section-3{flex-direction:column;align-items: center;margin-top:2vh;margin-bottom:0;}
    #mockup-text-3{width:85%;}
    #mockup-text-3 p{font-size:calc(1px + 3vw);}
    #mockup-image-3{width:90%;padding-left:0;margin:2vh 0;}

    /* design solutions */

    #solutions-1{width:85%;}
    #solutions-1 h2{font-size:calc(1px + 4vw);}
    #solutions-1 p{font-size:calc(1px + 3vw);}
    #solutions-2{flex-direction:column;align-items:center;margin:4vh 0;}
    #solutions-2-image{width:90%;padding-right:0;margin-bottom:2vh;}
    #solutions-2-text{width:85%;}
    #solutions-2-text p{font-size:calc(1px + 3vw);}
    #solutions-3{flex-direction:column;align-items:center;margin:4vh 0;}
    #solutions-3-image{width:90%;padding-right:0;margin:2vh 0;}
    #solutions-3-text{width:85%;}
    #solutions-3-text p{font-size:calc(1px + 3vw);}
    #solutions-4{flex-direction:column;align-items:center;margin:4vh 0;}
    #solutions-4-image{width:90%;padding-right:0;margin:2vh 0;}
    #solutions-4-text{width:85%;}
    #solutions-4-text p{font-size:calc(1px + 3vw);}
    #solutions-5{flex-direction:column-reverse;align-items:center;margin:4vh 0;}
    #solutions-5-image{width:90%;padding-left:0;margin:2vh 0;}
    #solutions-5-text{width:85%;}
    #solutions-5-text p{font-size:calc(1px + 3vw);}
    #solutions-6{flex-direction:column;align-items:center;margin:4vh 0;}
    #solutions-6-image{width:90%;padding-right:0;margin:2vh 0;}
    #solutions-6-text{width:85%;}
    #solutions-6-text p{font-size:calc(1px + 3vw);}

    /* conclusion */

    #conclusion-1{width:85%;}
    #conclusion-1 h2{font-size:calc(1px + 4vw);}
    #conclusion-1 p{font-size:calc(1px + 3vw);}
 }
 
 @media only screen and (min-width:1540px){

    header h2{font-size:40px;}
    nav li{font-size:25px;}

    /*page title and project title*/

    #page-title h1{font-size:50px;}
    #project-title{font-size:40px;}

    /* Table of Contents */

   #table-of-contents h2{font-size:40px;}
   #table-of-contents h3{font-size:24px;}

    /* thesis statement */

    #introduction h2{font-size:40px;}
    #introduction p{font-size:20px;}

    /* how it works */

    #how-it-works{font-size:40px;}
    #hiw-box-1 p{font-size:20px;}
   #hiw-box-2 p{font-size:20px;}
   #hiw-box-3 p{font-size:20px;}
    .hiw-title{font-size:20px;}

    /* methodology */

   #methodology-text h2{font-size:40px;}
   #methodology-text p{font-size:20px;}

   /* methodology section 2 */

   #methodology-2-text p{font-size:20px;}

   /* Question section 1 */

   #question-text p{font-size:20px;}
   #big-questions h2{font-size:24px;}

   /* question section 2 */

   #question-2-text p{font-size:20px;}
   #big-questions-2 h2{font-size:24px;}

   /* the problem */

   #problem-text h2{font-size:40px;}
   #problem-text p{font-size:20px;}

   /* my hypothesis */

   #my-hypothesis h2{font-size:40px;}
   #my-hypothesis p{font-size:20px;}

   /* process */

   #process h2{font-size:40px;}
   #process p{font-size:20px;}

   /* process boxes */

   #process-box-1 p{font-size:20px;}
   #process-box-2 p{font-size:20px;}
   #process-box-3 p{font-size:20px;}

   /* experiments */

   #experiments h2{font-size:40px;}
   #experiments p{font-size:20px;}
   #select{font-size:20px;}

   /* experiment boxes */

   #experiment-box-1 p{font-size:20px;}
   #experiment-box-2 p{font-size:20px;}
   #experiment-box-3 p{font-size:20px;}
   #experiment-box-4 p{font-size:20px;}

   /* thesis interview */

   #interview-text h2{font-size:40px;}
   #interview-text p{font-size:20px;}
   .btn41-43{font-size:20px;}

   /* Competitive Audit */

   #audit-1 h2{font-size:40px;}
   #audit-1 p{font-size:20px;}
   #audit-3 p{font-size:20px;}

   /* mockups */

   #mockup-text-1 h2{font-size:40px;}
   #mockup-text-1 p{font-size:20px;}
   #mockup-text-2 p{font-size:20px;}
   #mockup-text-3 p{font-size:20px;}

   /* design solutions */

   #solutions-1 h2{font-size:40px;}
   #solutions-1 p{font-size:20px;}
   #solutions-2-text p{font-size:20px;}
   #solutions-3-text p{font-size:20px;}
   #solutions-4-text p{font-size:20px;}
   #solutions-5-text p{font-size:20px;}
   #solutions-6-text p{font-size:20px;}

   /* conclusion */

   #conclusion-1 h2{font-size:40px;}
   #conclusion-1 p{font-size:20px;}

 }