/* hide the icon that opens and closes the topnav so it only shows on small screens */
nav a.responsiveMenuIcon{
    display: none;
    width: auto;
    color: #aa1b6d;
}

nav a.responsiveMenuIconx{
    display: none;
    width: auto;
    color: #aa1b6d;
}

/* IPAD: When the screen is more than 601 pixels wide and less than 840 pixels wide, make small changes to the menu and page geometry. */

@media only screen and (min-width: 601px) and (max-width: 840px) {
    
/* MODURA */


#modurafullsite{
    max-width:100%;

}  

    
    
 /* TOP SECTION */

    #name{font-size:2.5em;
     margin: 48px 24px 12px 24px;
    }

    #trendy{font-size:1.25em;
     margin: 0px 0px 48px 24px;
    }
    
    .mockup2{max-width:16%;
    flex: 1 1 16%;
  object-fit: contain;
     margin-bottom:-23px;
     margin-top:-5px;
    }

.over-info{margin: 72px 32px 24px 32px;
    gap:42px;
}
    
    #brief{
    }
    

    
#block{
    max-width:100%;
    margin:0px 32px 104px 32px;
   gap:42px;
    }
    
    #b{max-width:45.6%;
    }
    
.mobilefin{max-width:90%;}  
    
    
    
    
.process{font-size:2em;
     margin: 48px 24px;
    }
.surprise{
    background-position: 9.9% top;
}
.wow{
    max-width:70%;
   }



#scroll span{
    padding:0 12px;
    margin-right:12px;
    margin-left:12px;
    }
    

 
/* WHY I MADE THIS PROJECT */


    .photo, .photo2, .photo3{width:40%;
        height:12%;}

    .whyy{
        margin-top:0px;
        }

    .whyi{margin-bottom:24px;
        }


.question{
        margin-top:24px;
   }

    .quote{
        margin-right:36px;
    }
    
/* LONG STORY */
    
.margins{
    margin-left:32px;
    margin-right:32px;
    }    
    
    .h2{
        padding:24px 32px;}
    
    .h3{
    margin-top:72px;
    }
    
/* PART 2 - MARKET RESEARCH */
    
#research{
    margin-right:0px;

    }

#claim-problem{
    max-width:100%;
    float:none;
     align-content: flex-start;
    margin-bottom:24px;
    }


.description2{
    margin-right:0px;
     margin-left:0px;
    }

#chart{max-width:90%;
    margin: 0 auto;
    float:none;
    }
    
/* PART 3 - COMPETITIVE ANALYSIS */


#competitors{
    margin-bottom:48px;
    }
    
.comp{
    max-width:100%;
    float:none;
    }

.comp img{
     max-width:100%;
    float:none;
    }

#good-bad{
     max-width:100%;
    float:none;
    margin-top:48px;
    margin-left:0px;
    }

.title2{
    margin-left:0px;
    }

.content2{
    margin-left:0px;
    }

.card1{height:88px;}
    
/* PART 4 - USER SURVEY */


    .person{max-width:60%;
    max-height:60%;
    border-radius:100px;
    margin:16px 8px 0px 16px;
    text-align:left;}

.card1, .card2, .card3{
    width:100%;
}
   
.card1{height:104px;}  
    
 .card2{height:88px;}   
  
#ilike, #all{
    margin-right:0px;}

.opinion{
    max-width:590px;
    margin:16px 16px 16px 8px;
    text-align:left;
   }
   
    
/* DESIGN PRINCIPLES */
    
 #design-principles{
    column-count:1;
margin-bottom:72px;}

.principles{margin-right:0px;
    margin-bottom:48px;}   
    

/* PART 5 - FLOW DIAGRAM */


#flow{max-width:100%;
    }
    
/* PART 6 - LO FI WIREFRAMES */

/* PART 7 - HI FI UI DESIGN */

    
#keywords{
    max-width:70%;
    }

.logo{display:flex;
    margin-top:24px;
    }

#brand{gap:0px;
    }

    
#large{max-width:40%;}
    
#medium{max-width:30%;}

#small{max-width:30%;}

.logo-text{
     margin-left:42px;
    }

#logo-large{
     margin-left:48px;
    }

#logo-medium{margin-top:48px;
     }

#logo-small{
     margin-left:48px;
    margin-top:48px;
    }

.medium{
    margin-right: 48px;
    }
    
    
#icons{ 
    max-width: 100%;
    gap: 0px;
    }
    
    #lshapes, #dshapes{
 gap:0px;
 
}

#icons-light{margin-left: 10px;
    }
    
    

#colorpalette{margin-right:0px;
    float:none;}
    
 #accent{
    margin-left:88px;}
    
.palette{ 
gap:0px;}
    

#font{float:none;
    margin-top:48px;
    margin-right:0px;}



.inspo-photo{
    max-width:15.7%;
}
    
/* PART 7.25 - HIGH FI DESIGNS */


#test{max-width:100%;
    }


/* PART 7.75 - ALIGNMENT/GRID  */


#spacing{max-width:100%;
    }

/* PART 8 - PROTOTYPE */
    
#mpvideo{
    margin: 12px 0px 72px 0px;
    }


#vp{text-align: center;
    margin:12px 0px;}

#mplink{
    margin:2.2% 39%;
    border-radius:20px;
    }

#mpcaption{
   width:68%;
    max-height:20%;
    padding:.5em 1em;
    }


 /* PART 9 - USABILITY */

#results{
    justify-content: center;
    padding-bottom:0px;
    }

#new3{
    max-width:100%;
    float:right;
    margin-left:0px;
    margin-bottom:48px;
    }
    
#conceptlist{margin-bottom:24px;}

#new2{
    max-width:80%;
    float:none;
    margin-bottom:12px;
    }

#proto2{max-width:100%;
    float:left;
    display:flex;
    flex-wrap: wrap;}

#study{max-width:100%;
   float:none;
    }

#userresults{float:none;}

#protoupdate{float:none;
     max-width:100%;}
    
#update{
    padding-bottom:0px;
   }

/* PART 10 - ACCESSIBILTY */

#acc{
     margin-right:0px;
    margin-left:0px;
   }

#acc1{float:left;
    max-width:100%;
    height:100%;
    margin-left:-50px;}

#acc2{
    float:right;
    max-width:100%;
    height:100%;
    margin-left:164px;
    }

#specific{max-width:100%;
     margin-right:0px;
    margin-bottom:0px;
    }

    
/* PART 11 - FINAL THOUGHTS */

.scissors{
    }

.parting{
    margin: 0px 48px 24px 48px;
    }

    
  /* OTHER WORK */


#otherw{margin:28px 32px 80px 32px;
}
    
.othera{
max-width:31%;}


.otherfig{
font-size: 1em;}
    

    /* BACK NEXT NAV */

    .backnext{margin:0px 32px 0px 32px;

        }

    .backnext a{
        font-size: 1em;
   }

    .backnext a:hover{
        font-size:1em;}




/*BACK TO TOP BUTTON */

#myBtn {
   
  right: 8px; 
}
    
    }



/* IPHONE: When the screen is less than 600 pixels wide, hide top menu nav. Show the icon that opens and closes the nav. Make small changes to the menu and page geometry. */
@media screen and (max-width: 600px) {

    nav a{
        display: none;
    }
    
    
    nav a.responsiveMenuIcon{
        float: right;
        display: block;
        font-size:1.5em;
        font-weight:400;
        margin:26px 10px 30px 0px; 
      padding:0px;
        border: none;
        color:#333;
    }
    
    
    nav{position: relative;
        margin-top:0px;
        height:80px; 
        margin-right:10px;
   }
    
    
/* NAVIGATION HEADER */
    
    aside{width:100%;
        bottom:auto;
        padding-top:0;
            }

    
    header{height:80px;}
    
   .home{width:30%;
        height:60px;
        padding-top:20px;
        padding-bottom:20px;
        margin-top:0px;
        margin-bottom:0px;
        margin-left:10px;
        }
   
    
/* TOP SECTION */

    
    #top{padding:48px 0px;
    justify-content: center;
        width: 100%;
    }
    
    #name-trend{width: 100%;
}
    
 .mockup2{max-width: 33%;
     flex: 1 1 32%;
  object-fit: contain;
    
    }
    
    #name{font-size:2em;
     margin: 0px 0px 12px 0px;
    }

    #trendy{font-size:1em;
     margin: 0px 0px 48px 0px;
    }

    
  .over-info{
    margin: 72px 32px 0px 32px;
    gap:0px;
    justify-content: flex-start;
}

#brief{max-width:100%;
}  
    
.column{margin-top:0px;
    max-width:100%;}
    
    #block{
margin:0px 32px 104px 32px;
    justify-content: space-between;
    max-width:100%;
gap:0px;
    }

    #probsol{
    max-width:100%;}
    
 #b{max-width:100%;

    }   
 



    
    #mpvideo{
    margin: 48px 24px 0px 24px;
    }
    
    
#scroll{font-family: 'Montserrat', sans-serif;
    text-align:center;
    padding-top:48px;
    color:#757575;
    max-width: 100%; 
   text-align: center; 
   border-bottom: 3px dashed #cbcbcb; 
   line-height: 0.01em;
    font-weight:300;
   }

#scroll span{
    padding:0 12px;
    margin-right:12px;
    margin-left:12px;
    }


 /* PROGRESS BAR */
    
   .step-progress-bar {
       display: none !important;}

    
/* SHORT STORY */

.process{font-size:2em;
     margin: 72px 12px 0px 12px;
      
    }
.short{
    max-width:98%;
    margin-right:32px;
    margin-left:32px;
   }

    
    
.mobilefin{max-width:90%;}  
    
   

#scroll{
    margin-top:72px;
   }

#scroll span{background:#fff; 
    padding:0 12px;
    margin-right:12px;
    margin-left:12px;
    }
    
    
      /* PROGRESS BAR */
    
   .step-progress-bar {
       display: none !important;}

    
/* WHY I MADE THIS PROJECT */


    .photo, .photo2, .photo3{width:40%;
        height:12%;}

    .whyy{
        margin-top:0px;
        }

    .whyi{margin-bottom:24px;
        }


.question{
        margin-top:24px;
        font-size: 1.25em;
   }

    .quote{
        margin-right:32px;
    }
    
/* LONG STORY */
    
.margins{
    margin-left:32px;
    margin-right:32px;
    }    
    
    .h2{
        padding:24px 32px;}
    

/* PART 2 - MARKET RESEARCH */
    
#research{
    margin-right:0px;

    }

#claim-problem{
    max-width:100%;
    float:none;
     align-content: flex-start;
    margin-bottom:24px;
    }


.description2{
    margin-right:0px;
     margin-left:0px;
    }

#chart{max-width:100%;
    margin: 0 auto;
    float:none;
     margin: 0px;
    }
    
/* PART 3 - COMPETITIVE ANALYSIS */


#competitors{
    margin-bottom:48px;
    }
    
.comp{
    max-width:100%;
    float:none;
     min-height:3em;
    }

.comp img{
     max-width:100%;
    float:none;
    }

#good-bad{
     max-width:100%;
    float:none;
    margin-top:48px;
    margin-left:0px;
    }

.title2{
    margin-left:0px;
    }

.content2{
    margin-left:0px;
    }

    
/* PART 4 - USER SURVEY */


    .person{max-width:40%;
    max-height:40%;
    border-radius:100px;
    margin:16px 8px 0px 16px;
    text-align:left;}

.card1, .card2, .card3{
    width:100%;
}
   
.card1{height:154px;}  
    
 .card2{height:114px;}   
  
#ilike, #all{
    margin-right:0px;}

.opinion{
    max-width:200px;
    margin:16px 16px 16px 8px;
    text-align:left;
   }
    
.participants{
        margin-left:40px;}    

#graph{margin-top:32px;
    margin-left:0px;
    margin-right:0px;
    
    }
   
    
/* DESIGN PRINCIPLES */
    
 #design-principles{
    column-count:1;
margin-bottom:72px;}

.principles{margin-right:0px;
    margin-bottom:48px;}   
    

/* PART 5 - FLOW DIAGRAM */


#flow{max-width:100%;
    }
    
/* PART 6 - LO FI WIREFRAMES */

/* PART 7 - HI FI UI DESIGN */

    
#keywords{padding-top:0px;
    max-width:100%;
    margin-top:12px;
    }
    
.content{margin-left:0px;}
    
#accent{padding-top:0px;
    margin-left:0px;}

.logo{
    flex-direction: column;
    
    }

#brand{
   justify-content: center;
    gap:48px;
    }


.logo-text, .logo-text2{
     margin-left:0px;
    font-size:32px;
    }

#logo-large{max-width:30%;
     margin-left:0px;
    }

#logo-medium{margin-top:0px;
     }

#logo-small{max-width:40%;
     margin-left:0px;
    margin-top:0px;
    }

    
    
#icons{margin:48px 0px;
     flex-wrap:wrap;
    max-width: 100%;
    gap: 0px;
    }

#lshapes{
    gap:12px;
     align-items: none;
    justify-content: none;
    flex-wrap:wrap;
    }

#dshapes{
gap:12px;
     align-items: none;
    justify-content: none;
    flex-wrap:wrap;
}    
#icons-light{
   max-width: 94%;
    margin-left:8px;
    }

    
    

#colorpalette{margin-right:0px;
    float:none;
    height:auto;
  }
 
 #accent{width:100%;
    margin-left:0px;}
    
    .palette{display:flex;
        flex-direction: column;
    margin-bottom:0px;
align-items: none; 
gap:12px;
    }
    
    #lbackground{margin-bottom:24px;}
    
    
#circle1{
    margin-right:4px;
    margin-left:8px;
    height: 40px;  
    width: 40px; }
    
    
#circle2, #circle3, #circle4, #circle5, #circle6, #circle7, #circle8, #circle9, #circle10{
    margin-right:4px;
    margin-left:4px;
    height: 40px;  
    width: 40px; }
    
    
#dbackground{
    padding:4px;
    }

#font{float:none;
    margin-top:48px;
    margin-left:0px;
    margin-right:0px;}

#inspo{
    gap:4px;
    }

.inspo-photo{
    max-width:15.5%;
}
    
/* PART 7.25 - HIGH FI DESIGNS */


#test{max-width:100%;
    }


/* PART 7.75 - ALIGNMENT/GRID  */


#spacing{max-width:100%;
    }

/* PART 8 - PROTOTYPE */
    
    #mpvideo{margin: 12px 0px 24px 0px;
    }


#vp{text-align: center;
    margin:12px 0px;}

#mplink{
    margin:2.2% 39%;
    border-radius:8px;
    }

#mpcaption{
   width:68%;
    max-height:30%;
    padding:.5em 1em;
    font-size: .9em;
     border-radius:8px;
    }

 #clickimg{
    font-size:1em;
    margin-top:24px;
    }
    
 /* PART 9 - USABILITY */

#results{
    justify-content: center;
    padding-bottom:0px;
    }

#new3{
    max-width:100%;
    float:right;
    margin-left:0px;
    margin-bottom:48px;
    }
    
#conceptlist{margin-bottom:24px;}

#new2{
    max-width:100%;
    float:none;
    margin-bottom:16px;
    }

#proto2{max-width:100%;
    float:left;
    display:flex;
    flex-wrap: wrap;}

#study{max-width:100%;
   float:none;
    }

#userresults{float:none;}

#protoupdate{float:none;
     max-width:100%;}
    
#update{
    padding-bottom:0px;
   }

/* PART 10 - ACCESSIBILTY */

#acc{
     margin-right:0px;
    margin-left:0px;
   }

#acc1{float:left;
    max-width:100%;
    height:100%;
    margin-left:-30px;}

#acc2{
    float:right;
    max-width:100%;
    height:100%;
    margin-left:24px;
    }

#specific{max-width:100%;
     margin-right:0px;
    margin-bottom:0px;
    }

.scissors{
    }    


.parting{
    margin: 0px 16px 32px 16px;
    }



 /* OTHER WORK */

#othercs{max-width:100%;
    flex-wrap:wrap;
}
    

#otherw{margin:28px 32px 80px 32px;
}
    
    .othera{
max-width:100%;}
    
    /* BACK NEXT NAV */

    .backnext{margin:0px 32px 0px 32px;
        justify-content: space-between;
        gap:24px;
        }

    .backnext a{
        font-size: 1em;
   }

    .backnext a:hover{
        font-size:1em;}




/*BACK TO TOP BUTTON */

#myBtn {
  
  bottom: 72px; 
  right: 4px; 
}


    
/* FOOTER */

    #footer{height:50px;}  
    
    #footer p{font-size:.8em;}
    
    #infinity{width:60px;
        margin-bottom:1px;
        margin-top:41px;}
    
    #copyright{
        right:8px;
        font-size:.5em;
        bottom:5px;}
}

/* The "open" class is added to the nav with JavaScript when the icon is clicked. This class makes the links hidden by line 10 above, visible again  */
@media screen and (max-width: 600px) {
   
    
     nav.open{
        height:200px;
        margin-right:0px;
        display:block;
        position:relative;
        right: 0;
        top: 0;
        float:right;
        background-color: #fff;
   }
    
    
    nav.open a{
        display: block;
        color:#333;
        font-family: 'Montserrat', sans-serif;
        float:none;
        max-height:100%;
        text-align:right;
        }
    
    nav.open a.responsiveMenuIcon{
        text-decoration: none;
        font-size:1.5em;
        float:right;
        padding:0px;
        margin:26px 20px 0px 20px;
    }
    
    nav.open #reload{
        margin:64px 24px 0px 16px;
        font-size:1em;
        border-bottom:0px solid #aa1b6d;}
    
    nav.open #about{
        margin:12px 24px 0px 16px;
        font-size:1em;}
    
    nav.open #designs{
        margin: 12px 24px 0px 16px;
        font-size:1em;
        }
    
      nav.open #pdf{
        margin: 12px 24px 0px 16px;
        font-size:1em;
        }
    
      nav.open #linked{
        margin: 12px 24px 24px 16px;
        font-size:1em;
        }
    
  
    nav.open a:hover{
        border: none;
        text-decoration:none;
        font-family: 'Montserrat', sans-serif;
        }
   

    nav.open a.responsiveMenuIcon:hover {cursor: pointer;
       }
    
    
}