/* 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) {
    
    .dots{top:45%;}
    .dots li{margin-right:20px;
    margin-left:0px;}
    
/* SCREEN 1 - ABOUT */
    
    #screen1{height:28vh;
        padding-bottom:100px;
         padding-top:80px;
    }
    
    .intro, .right{
        margin-left: 12%;
        margin-right: 12%;}
    
    .intro{padding-top:0px;}
    
h3{font-size:1.25em;
    }

 #jill{font-size:3.25em;
    margin-right:1em;}
    
.right{
     margin-right:0px;
    }

    #info{margin-right:13%;
    font-size:1.25em;
    line-height:30px;}
    
    .beauty{
    border-bottom: 1.5px solid #aa1b6d;
    }
    
#learn{
    text-decoration:none;
    color:#0e6887;
    font-weight:500;
    font-size:1.25em;
    }
    
 #learn:hover{
        font-size:1.25em;
     
    }
    
  
    
/* SCREEN 2 - DESIGNS */
    
    #screen2{min-height:100vh;}
    
    .work{
    font-size:.9em;
}
    
    #web{
    min-height:155vh;
    display:block; 
    }
    
    
.modura img, .wayfarer img, .collimate img, .daisy img{
    margin:0px 0px 24px 0px;
    max-width:100%;
    }


.blabel{
    max-width:100%;}
    
   
/* SCREEN 3 - GRAPHIC */
    
.graphic{
    font-size:1.4em;
    margin-top:60px;
   }
    
#sshomes a{
     margin:40px 1.5em 60px 3.26em;}

#sshomes img{max-width:92.5%;
    margin:0px 1.5em 20px 0px;
    }

#poblanos a{
    margin:0px 1.5em 100px 3.26em;}

#poblanos img{max-width:92.5%;
margin:0px 1.5em 20px 0px; 
}

.glabel{max-width:100%;}
    
.company2{margin-right:50%; }
    

   
/* SCREEN 4 - VIDEO */
    
    #motion{margin-top:0px;
        margin-left:51.2px;
        font-size:1.4em;}
    
    #screen4{
    height:40vh;
}

    #video{
    margin-right: 1.5em;
    margin-left: 3.26em;
    max-width:90%;
    max-height:88%;
    }
    
/* SCREEN 4: CONTACT*/
    
    #screen4{
         margin-top:100px;  margin-bottom:200px;}
    
    .form{margin-bottom:40px;
    border: 1px solid #f4f4f4;
    border-radius:24px;
       }
    
 h4{font-size:2.5em;
        }
    
    #jillian{font-size:1.7em;}
    
    .link{font-size:1.6em;
    padding-left:70px;
    line-height:66px;}
    
     .link:hover{font-size:1.6em;}
    
/* FOOTER */
    
    #copyright{
        right:10px;
        font-size:1em;
        bottom:10px;}
    

/*
    .cs1{max-width:80%;}

    .tesla{max-width:70%;}

    .flyer{max-width:80%;}

    .cs2{max-width:80%;}

    .contrast{max-width:90%;}
   
    .contact, .right{max-width:100%}

    .contact{
        margin-left:0%;}
    
*/
    
}

/* 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;
        margin:26px 10px 30px 0px; 
      padding:0px;
        border: none;
        color:#333;
    }
    

    nav{position: relative;
        margin-top:0px;
        height:80px; 
        margin-right:10px;
   }
    
    
/* customized rules for this site */
    
/* NAVIGATION HEADER */
    
    aside{width:100%;
        bottom:auto;
        padding-top:0;
            }
    
#about{border-bottom:0px solid #aa1b6d;
padding-bottom:0px;}

    
    header{height:80px;}
    
   .home{width:30%;
        height:60px;
        padding-top:20px;
        padding-bottom:20px;
        margin-top:0px;
        margin-bottom:0px;
        margin-left:10px;
        }
    
    #shine{top:100px;}
    
    .dots{top:50%;}
    .dots li{margin-right:10px;
    margin-left:5px;}
    
/* SCREEN 1 - ABOUT */
    
#screen1{height:40vh;
    padding-top:80px;
    padding-bottom:80px;}
    
    .intro{
        margin: 0px 0px 4px 20px;
        padding-top:0px;
        padding-bottom:0px;
        }
    
h3{font-size:1em;
    margin-bottom:8px;}
    
#jill{font-size:2em;
    margin-bottom:0px;
    margin-right:1em;}

    .right{
        max-width:100%;   
       text-align:left;
     margin:0px 0px 0px 20px;
    }
    
    #info{
        margin-left:0px;
        margin-right:2em;
        margin-top:2%;
        font-size:1em;
        line-height:24px;}
    
    .beauty{
    border-bottom:1.5px solid #aa1b6d;
    }
    
    #learn{
    font-size:1em;
    }
    
     #learn:hover{
        font-size:1em;
     
    }
    
  
    .icons{padding-right: 0px;
    padding-left: 0px;
    line-height:15px;
    text-align:center;
    font-size:.7em;   
    }

    #adobe{
    background-size:75%;
    max-width:40px;
    margin-bottom:3px;
    padding-top:10px;
    padding-right:5px;
    padding-left:5px;
   }


    #figma{
    background-size:64%;
    max-width:50px;
        padding-top:40px;
       margin-bottom:3.7px;
        padding-right:5px;
   }


    #html{
    background-size:85%;
    max-width:50px;
     padding-top:40px;
    margin-bottom:2.2px;
   }

    #css3{
    background-size:80%;
     padding-top:40px;
    max-width:50px;
        margin-bottom:1.8px;
         padding-left:5px;
}

    #java{
    background-size:67%;
    max-width:100px;
     padding-top:40px;
      margin-bottom:2.35px;
   }
    
/* SCREEN 2 - DESIGNS */
    
#screen2{min-height:90vh;
    margin-bottom:100px;}
    
    .work{
    font-size:.6em;
    padding-bottom:0px;
    margin-left:20px;}
    
/* WEB DESIGN */
    
    #web{
    min-height:110vh;
    display:block; 
  
    }
    
    .modura a, .wayfarer a, .collimate a, .daisy a{margin:40px 20px 60px 20px;
    }
    
    .modura img, .wayfarer img, .collimate img, .daisy img{
    margin:0px 1em 24px 0px;
    max-width:100%;}
        
    .blabel{
    text-align:left;
    max-width:100%;}
    
.company{font-size:.6em;}
.project{font-size:1.1em;}
.context{font-size:.7em;}
.viewcs{font-size:.7em;}
.soon{font-size:.7em;}
        
/* SCREEN 3: GRAPHIC DESIGN */
    
.graphic{
    font-size:1em;
    padding-bottom:0px;
    margin-left:20px;}
    
#sshomes a{max-width:100%;
     margin:40px 1.8em 60px 20px;}

#sshomes img{
    max-width:100%;
    margin:0px 1.5em 20px 0px;}

#poblanos a{max-width:100%;
    margin:0px 1.8em 80px 20px;}

#poblanos img{max-width:100%;
margin:0px 1.5em 20px 0px;}

.glabel{max-width:100%;}

.company2{font-size:.9em;}
.project2{font-size:1.8em;}
.context2{font-size:1.1em;}
.viewcs2{font-size:1.1em;}


/*
    .tesla{max-width:70%;}

    .flyer{max-width:80%;}

    .cs2{max-width:80%;}

    .contrast{max-width:90%;}
    
*/
    
/* SCREEN 4 VIDEO */
    
    #screen4{max-height:20vh;}
    
    #motion{font-size:1em;
    margin-left:20px;
    margin-top:0px;}
    
    #video{
    max-height:137%;
    margin-right:10px;
    margin-left:20px;
    margin-top:20px;
    }
    
/* SCREEN 4: CONTACT */
    
    #screen4{margin-top:20px;  
    margin-bottom:120px; 
    max-height:100vh;}
    
    .form{margin-bottom:0px;
    border: 1px solid #f4f4f4;
    border-radius:24px;
    padding:20px 36px;
    }
    
    h4{font-size:2em;
        margin-bottom:12px;
       }

    #jillian{font-size:1.2em;
    margin-bottom:8px;}
    
     #linkedin{
    background-size:17.15%;
}

    #target{
    background-size:26.5%;
}

#resume{
    background-size:29%;
  }
    
    .link{font-size:1.2em;
    padding-left:48px;
      line-height:48px;}
    
     .link:hover{font-size:1.2em;}

    
    

/* FOOTER */

    #footer{height:50px;}  
    
    #footer p{font-size:.8em;}
    
    #infinity{width:60px;
        margin-bottom:1px;
        margin-top:41px;}
    
    #copyright{
        right:8px;
        font-size:.6em;
        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;
       }
    
    
}