/* 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) {
    
/* COLLIMATE */
    
    
 /* TOP SECTION */
    
    #top{
    padding:48px 24px 48px 0px;
    }

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

    #space{font-size:1.25em;
     margin: 0px 24px 48px 24px;
    }


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


 #block{ max-width:100%;
margin:0px 32px 72px 32px;
      gap:42px;
    justify-content: flex-start;
    }  
    
.satellite5{max-width:16%;
     margin-top:-488px;
    margin-left:-46px;
}

    
/* SHORT STORY */

.process{font-size:2em;
     margin: 48px 24px;
    }




    

.small-margins1{margin: 0px 32px;}
    
    .small-margins{margin: 0px 0px;}
    
.desktopvideo{max-width:80%;
  margin: 72px auto 48px auto;
    cursor:pointer;
}

#cpvideo{
   max-width:90%;
    }

.tabletvideo{max-width:40%;
    border-radius:24px;
    cursor:pointer;
}

.mobilevideo{max-width:20%;
    border-radius:24px;
    cursor:pointer;
}

/* GENERAL */


.margins{
    margin-left:32px;
    margin-right:32px;
    }

.h2{
    padding:24px 32px;
    }

  .content4{
    margin-right:0px;
    }

 .content6{
     margin-left:0px;
     margin-right:24px;
    }

.content-list-top{
    max-width:100%;
}

.content-list{
    max-width:100%;
}
 
    
/* SECTION COLL2 - DISCOVERY */


#full-dark{
    margin-bottom:24px;}
    
#dark-mode{max-width:60%;
flex: 1 1 60%;
    margin-right:12px;}

#glassmorphism{max-width:38%;
flex: 1 1 38%;
  }



#competition{max-width:100%;
flex: 1 1 100%;}


#annotations{max-width:100%;
flex: 1 1 100%;
  object-fit: contain;
}

/* SECTION COLL3 - SPRINT 1 */
    
  #google-earth, #nasa{max-width:48%;
   }  
    

#color-text{
max-width:56%;
}

.codes{max-width:40%;
}


.lofi1, .lofi2{max-width:48%;
}

 .iteration1, .iteration2{
    max-width:48%;
}

  

.image3d{max-width:100%;
}

.image2d{max-width:100%;
}

.science{
    max-width:50%;
    margin-left:-208px;
}

.mockup1{
    max-width:80%; 
    }

.satellite{max-width:8%;
    margin-top:-258px;
    margin-left:-50px;
}  
    
    
 /* SECTION COLL4 - SPRINT 2 */   

.mobile{max-width:50%;
flex: 1 1 50%;}


.ipad-iphone{max-width:50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    }

.maps-iphone{max-width:50%;
flex: 1 1 50%;
margin-right:0px;
    margin-bottom:24px;}

.maps-ipad{max-width:90%;
flex: 1 1 90%;
    }    
    

.iphone-mid1{
    max-width:63%;
}

.iphone-mid2{
    max-width:63%;
}
/* SECTION COLL5 - DELIVERY */

 /* DESIGN SYSTEM */


 #typeface-image{max-width:32%;
}   
    
#palette-image{max-width:60%;
    margin-bottom: 20px;
}
    
#full-system{max-width:100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom:24px;
    }

#system-text{max-width:100%;
flex: 1 1 100%;}

#background-color{max-width:100%;
flex: 1 1 100%;
  object-fit: contain;}    


.satellite4{max-width:8%;
     margin-top:-228px;
    margin-left:-50px;
}
   
 /* SECTION COLL5 - HANDOFF */
    .satellite2{max-width:8%;
     margin-top:-145px;
    margin-left:-50px;
}
    
    .cplink{
    border-radius:32px;
}

    #cpdesktop{ 
    width: 83%;
    margin:0px 29px;
  height: 95%;}



.cpcaption{
padding: 8px 16px;
  font-size: .9em;
  width: 68px; 
    
}
    
 /* SECTION COLL6 - REFLECTION */
    
  .satellite3{max-width:8%;
     margin-top:-255px;
    margin-left:-52px;
}
  
   /* OTHER WORK */




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


   /* 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;
        }
   
    
/* COLLIMATE */
  #coll1{max-width:100%;}  
    
 /* TOP SECTION */
    
    
     #top{
    padding:48px 24px;
 width: 100%;
    max-width:100%;
         display: flex;
    flex-wrap: wrap;
    justify-content: center; 
    align-items: center;
    box-sizing: border-box; 
   
    }

  #name-space, 
    .mockup2 {
        max-width: 100%;
        flex: 0 0 100%; 
    }
    
     #name{font-size:2em;
     margin: 0px 0px 12px 0px;
    }

    #space{font-size:1em;
     margin: 0px 0px 48px 0px;
    }
    
#over-info{
    margin: 72px 32px 0px 32px;
    gap:24px;
    justify-content: flex-start;
}

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

    #probsol{
    max-width:100%;}
    
 #b{max-width:100%;
    }   
 
.satellite5{max-width:12%;
     margin-top:-504px;
    margin-left:-34px;
}

  

/* SHORT STORY */

.process{font-size:2em;
     margin: 48px 24px;
    }


    
    
.small-margins1{margin: 0px 24px;}
    
    .small-margins{margin: 0px 0px;}
  
  

.tabletfin{max-width:58%;
}

.mobilefin{max-width:35%;}
    
.carousel-slide.single-image img {
    width:100%;
        object-fit: cover;
        }
    
    

.desktopvideo{max-width:88%;
  margin: 72px 24px 48px 24px;
    cursor:pointer;
    border-radius:12px;
}

#cpvideo{
   max-width:100%;
    }

.tabletvideo{max-width:60%;
    border-radius:12px;
    cursor:pointer;
}

.mobilevideo{max-width:40%;
    border-radius:24px;
    cursor:pointer;
}
    
    #scroll span{background:#fff; 
    padding:0 8px;
    margin-right:12px;
    margin-left:12px;
    }

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

    
    

/* GENERAL */


.margins{
    margin-left:32px;
    margin-right:32px;
    }

.h2{
    padding:24px 32px;
    }

  .content4{
    margin-right:0px;
    }

 .content6{
     margin-left:0px;
     margin-right:24px;
    }

.content-list-top{
    max-width:100%;
}

.content-list{
    max-width:100%;
}
 
    
/* SECTION COLL2 - DISCOVERY */


#full-dark{
    margin-bottom:24px;}
    
#dark-mode{max-width:100%;
flex: 1 1 100%;
    margin-right:0px;}

#glassmorphism{max-width:100%;
flex: 1 1 100%;
  }
    
    #glassmorphism img{max-width:100%;
margin-top:0px;}

    
#existing1{max-width:100%;
}
#existing2{max-width:100%;
border-radius:4px;}

 #existing1 img, #existing2 img{max-width:100%;
border-radius:4px;}
    


/* SECTION COLL3 - SPRINT 1 */
    
 #google-earth, #nasa{max-width:100%;
   }   
    
 .lofi1, .lofi2{max-width:100%;
}  
    
.iteration1, .iteration2{
    max-width:100%;
}    
    

#color-text{
max-width:100%;
    margin-bottom:12px;
}

.codes{max-width:100%;
}

.nav-options{max-width:100%;
}
    
#nav-text{
    margin: 24px -24px 12px -16px;}
   
#horizontal{max-width:100%;
  
}   
    
    
.image3d{max-width:100%;
}

.image2d{max-width:100%;
}
    
     
#fun{
    flex-direction:column;
      margin:0px 0px 300px 0px;
    justify-content:center;
    align-items: center;
    max-width:100%;
   min-height:40vh;
}

.science{
    max-width:100%;
    margin-left:0px;
    margin-top:-48px;

}

.mockup1{
    max-width:100%; 
   
    }

.satellite{max-width:16%;
    margin-top:-316px;
    margin-left:280px;
}   
    
    
/* SECTION COLL4 - SPRINT 2 */
    
 
 .full-mobile2{
    margin-top:0px;
   }
    

.mobile{max-width:100%;
flex: 1 1 100%;}


.ipad-iphone{max-width:100%;
    justify-content: center;
    margin-bottom:24px;
    }

.maps-iphone{max-width:80%;
    }

.maps-ipad{max-width:100%;
    margin-bottom:0px;
    }    
    
.mobile2{max-width:100%;
flex: 1 1 100%;}

.mid-fi-re{max-width:100%;
    flex: 1 1 100%;
    justify-content: center;

}
    
.iphone-mid1{max-width:80%;
}

.iphone-mid2{
    max-width:80%;
    margin-bottom:0px;
}


    
 /* DESIGN SYSTEM */
    
    
#type-text{max-width:100%;
flex: 1 1 100%}

#typeface-image{max-width:100%;
flex: 1 1 100%;
margin-right:0px;
margin-bottom:12px;}

#palette-type{max-width:100%;
flex: 1 1 100%;}
    
#palette-image{max-width:100%;
flex: 1 1 100%;
  }
    
    
#system-text{max-width:100%;
flex: 1 1 100%;}

#background-color{max-width:100%;
flex: 1 1 100%;
  }    

    
take{
    max-width:100%;
   
}

.satellite4{max-width:12%;
     margin-top:-460px;
    margin-left:-36px;
}
   
 /* SECTION COLL5 - HANDOFF */
    
    .success{
    max-width:100%;
}
    
    .satellite2{max-width:16%;
     margin-top:-240px;
    margin-left:-46px;
}
    
    
    #vp {
        flex-direction: column;
        align-items: center;
        gap: 24px; 
    }
    
.viewproto a {
    text-align: center;}
    
#vp-desktop{margin: 0 auto;}
    
#vp-tablet{max-width:60%;
    margin: 0 auto;
}

#vp-mobile{max-width:40%;
    margin: 0 auto;
}
    
    .cplink{
    border-radius:20px;
        transform: translateX(-50%);
        left: 50%;
}

    #cpdesktop{ 
    width: 82%;
    margin:0px 0px;
  height: 94%;
    }

#cptablet{ 
    width: 60%;
  height: 97%;
    margin: 0 auto;
    }
    
#cpmobile{ 
    width: 40%;
  height: 97%;
    margin: 0 auto;}

.cpcaption{
padding: 8px 16px;
  font-size: .9em;
  width: 90px;
}
    
.viewproto:hover .cplink{
  transform: translateX(-50%);
        left: 50%;
}
    
 /* SECTION COLL6 - REFLECTION */
    
  .satellite3{max-width:16%;
     margin-top:-444px;
    margin-left:-44px;
}
  
   /* OTHER WORK */

#othercs{max-width:100%;
    flex-wrap:wrap;
}
    
#otherw{margin:100px 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;
       }
    
    
}