body {
    margin: 0;
    background-color:#ecede9;
}



/*TEXT:*/
h1 {
    color: #232323;
    font-size: 100px;

    font-family: "rodchenko", sans-serif;
    font-weight: 700;
    font-style: normal;

    position: relative;
}

h2 {
    color: #232323;
    font-size: 40px;

    font-family: "rodchenko", sans-serif;
    font-weight: 700;
    font-style: normal;

    margin: 0 auto 0 auto;
    position: relative;
}

.contact h2 {
    float: right;
}

h3 {
    color: #232323;
    font-size: 60px;

    font-family: "rodchenko", sans-serif;
    font-weight: 700;
    font-style: normal;

    margin: 0 auto 0 -4px;
}

h4 {
    color: #232323;
    font-size: 20px;

    font-family: "aptos", sans-serif;
    font-weight: 700;
    font-style: normal;

    margin: 0 auto 0 auto;
    position: relative;
}

h5 {
    color: #232323;
    font-size: 20px;

    font-family: "aptos-narrow", sans-serif;
    font-weight: 400;
    font-style: normal;

    margin: 15px auto 0 15px;
    position: relative;
}

/*MAKES H2 SLIGHTLY BIGGER ON HOVER*/
.navbar:hover {
  font-size: 41px;
}


/*TITLE: "MELYSSA OKAZAKI":*/
.title {
    width: 99.99%;
    height: 130px;

    /*border: 1px solid #e06508;
    background-color: rgba(39, 93, 220, 0.835);*/

    margin: -50px 0 0 407px;
}



/*LINEBREAK:*/
.nav-line {
    border: 0;
    border-top: 5px solid #232323;

    margin: 0 auto 0 auto;
    padding: 0;
}

.nav-line2 {
    border: 0;
    border-top: 5px solid #232323;

    margin: 0 auto 0 auto;
    padding: 0;
}


.shelf {
    border: 0;
    border-top: 20px solid #232323;
    
    margin: 27.5px auto 0 auto;
    padding: 0;
}


/*.nav-line {
    display: block;
    height: 1px;

    border: 0;
    border-top: 5px solid #232323;

    margin: 0 auto -52px auto;
    padding: 0;
}*/




/*NAVIGATION BAR:*/
.nav {
    width: 50%;
    height: 30px;

    /*border: 1px solid #e06508;*/

    margin: 50px 0 0 400px;
    float: none;
}

.nav a {
    text-decoration: none; /* TURN OFF HYPERLINK COLOR AND UNDERLINE */
    color: #232323;
}

.home {
    width: 12%;
    height: 40px;

    /*border: 1px solid #e06508;
    background-color: rgba(39, 93, 220, 0.835);*/

    float: left;
    margin: -40px 40px 0 4px;
    padding: 9px;

    cursor: pointer;
    
}

.thegallery {
    width: 30%;
    height: 40px;

    /*border: 1px solid #e06508;
    background-color: rgba(39, 93, 220, 0.835);*/

    float: left;
    margin: -40px 0 0 94px;
    padding: 9px;

    cursor: pointer;
}

.contact {
    width: 19%;
    height: 40px;

    /*border: 1px solid #e06508;
    background-color: rgba(39, 93, 220, 0.835);*/

    float: right;
    margin: -40px 4px 0 10px;
    padding: 9px;

    cursor: pointer;
}



/*PERSONAL BOOKSHELF HERO:*/
.container1 {
    width: 99.99%;
    height: 500px;

    /*border: 1px solid #e06508;
    background-color: rgba(39, 93, 220, 0.835);*/

    margin: 30px 0 0 0;
    float: none;
}

/*
OG CODE FROM REFERENCE:
.container1{
  padding: 75px 0;
  margin: 0 auto;
  width: 1140px;
}*/

.overflow1 {
    width: 100%;
    height: 55vh;

    display: flex;
    flex-direction: row;

    /*border: 1px solid #e06508;
    background-color: rgba(39, 93, 220, 0.835);*/

    margin: 10px 0 0 0;
    float: left;
}

.item, .item2 {
  flex: 1;
  height: 100%;
  background-position:bottom;
  background-size: cover;
  background-repeat: none;
  transition: flex 0.8s ease;
  
  &:hover{
    flex: 3;
    /*flex: 7; ORIGINAL CODE*/
  }
}

.personalpiece1 {
    width: 180%;
    height: 55vh;
    /*height: 517px;*/

    /*border: 1px solid #e06508;
    background-color: rgba(39, 93, 220, 0.835);*/

    background-image: url('../images/personal_zine.png');
    /*background-color: #3fa9f5;*/
}

.personalpiece2 { 
    width: 180%;
    height: 55vh;

    background-image: url('../images/personal_fool.png');
    /*background-color: #7ac943;*/
}

.personalpiece3 { 
    width: 180%;
    height: 55vh;

    background-image: url('../images/personal_elephant.png');
    /*background-color: #ff7bac;*/
}

.personalpiece4 { 
    width: 180%;
    height: 55vh;

    background-image: url('../images/personal_bugs.png');
    /*background-color: #f3cf3d;*/
}

.personalpiece5 { 
    width: 180%;
    height: 55vh;

    background-image: url('../images/personal_unpack.png');
    /*background-color: #ed1d24;*/
}





.container2 {
    width: 99.99%;
    height: 500px;

    /*border: 1px solid #e06508;
    background-color: rgba(39, 93, 220, 0.835);*/

    margin: 0 0 0 0;
    float: none;
}

.overflow2 {
    width: 100%;
    height: 55vh;

    display: flex;
    flex-direction: row;

    /*border: 1px solid #e06508;
    background-color: rgba(39, 93, 220, 0.835);*/

    margin: 10px 0 0 0;
    float: left;
}

.packagingpiece1 {
    width: 180%;
    height: 55vh;
    /*height: 517px;*/

    /*border: 1px solid #e06508;
    background-color: rgba(39, 93, 220, 0.835);*/

    background-image: url('../images/packaging_mtah.png');
}

.packagingpiece2 { 
    width: 180%;
    height: 55vh;

    background-image: url('../images/packaging_happymeal.png');
}

.packagingpiece3 { 
    width: 180%;
    height: 55vh;

    background-image: url('../images/packaging_shokunin.png');
}

.packagingpiece4 { 
    width: 180%;
    height: 55vh;

    background-image: url('../images/packaging_eez.png');
}

.packagingpiece5 { 
    width: 180%;
    height: 55vh;

    background-image: url('../images/packaging_eezbottles.png');
}


.bottom1, .bottom2 {
    width: 99.99%;
    height: 12vh;

    /*border: 1px solid #e06508;*/

    margin: 0 0 0 0;
    float: none;
}

.personal {
    width: 31.5%;
    height: 9vh;

    /*border: 1px solid #e06508;*/

    margin: -13.5px auto 0 auto;
    float: left;
}

.packaging {
    width: 31.5%;
    height: 9vh;

    /*border: 1px solid #e06508;*/

    margin: -13.5px auto 0 auto;
    float: left;
}


















/*THE GALLERY:*/
/*FULL PORTFOLIO GALLERY::*/
.row1container1 {
    width: 50%;
    height: 275px;

    /*border: 0px solid #232323;
    background-color: rgba(39, 93, 220, 0.835);*/

    margin: 0 0 0 0;
    float: left;
}

.row1container2 {
    width: 50%;
    height: 275px;

    /*border: 0px solid #232323;
    background-color: rgba(143, 225, 28, 0.835);*/

    margin: 0 0 0 0;
    float: left;
}

.row2container1 {
    width: 50%;
    height: 275px;

    /*border: 0px solid #232323;
    background-color: rgba(255, 104, 11, 0.942);*/

    margin: 0 0 0 0;
    float: left;
}

.row2container2 {
    width: 50%;
    height: 275px;

    /*border: 0px solid #232323;
    background-color: rgba(41, 255, 155, 0.835);*/

    margin: 0 0 0 0;
    float: left;
}

.row3container1 {
    width: 50%;
    height: 275px;

    /*border: 0px solid #232323;
    background-color: rgba(183, 37, 227, 0.942);*/

    margin: 0 0 0 0;
    float: left;
}

.row3container2 {
    width: 50%;
    height: 275px;

    /*border: 0px solid #232323;
    background-color: rgba(241, 70, 23, 0.835);*/

    margin: 0 0 0 0;
    float: left;
}

.row4container1 {
    width: 50%;
    height: 275px;

    /*border: 0px solid #232323;
    background-color: rgba(220, 248, 13, 0.942);*/

    margin: 0 0 0 0;
    float: left;
}

.row4container2 {
    width: 50%;
    height: 275px;

    /*border: 0px solid #232323;
    background-color: rgba(241, 23, 99, 0.835);*/

    margin: 0 0 0 0;
    float: left;
}


.box1, .box2, .box3, .box4, .box5, .box6 {
    width: 275px;
    height: 275px;

    border: 5px solid #232323;
    /*background-color: rgba(132, 159, 221, 0.835);*/

    margin: -5px -5px 0 0;
    float: left;
}

.box7, .box8, .box9, .box10, .box11, .box12 {
    width: 275px;
    height: 275px;

    border: 5px solid #232323;
    /*background-color: rgba(132, 159, 221, 0.835);*/

    margin: 0 -5px 0 0;
    float: left;
}

.box13, .box14, .box15, .box16, .box17, .box18 {
    width: 275px;
    height: 275px;

    border: 5px solid #232323;
    /*background-color: rgba(132, 159, 221, 0.835);*/

    margin: 5px -5px 0 0;
    float: left;
}

.box19, .box20, .box21, .box22, .box23, .box24 {
    width: 275px;
    height: 275px;

    border: 5px solid #232323;
    /*background-color: rgba(132, 159, 221, 0.835);*/

    margin: 10px -5px 0 0;
    float: left;
}

.box1container, .box2container, .box3container  {
    width: 275px;
    height: 35px;

    /*border: 1px solid #232323;
    background-color: rgba(255, 154, 46, 0.835);*/

    margin: 0 0 0 0;
    float: left;
}

.box4container, .box5container, .box6container  {
    width: 275px;
    height: 35px;

    /*border: 1px solid #232323;
    background-color: rgba(255, 154, 46, 0.835);*/

    margin: 0 0 0 0;
    float: left;
}

.box7container, .box8container, .box9container  {
    width: 275px;
    height: 35px;

    /*border: 1px solid #232323;
    background-color: rgba(255, 154, 46, 0.835);*/

    margin: 0 0 0 0;
    float: left;
}

.box10container, .box11container, .box12container  {
    width: 275px;
    height: 35px;

    /*border: 1px solid #232323;
    background-color: rgba(255, 154, 46, 0.835);*/

    margin: 0 0 0 0;
    float: left;
}

.box13container, .box14container, .box15container  {
    width: 275px;
    height: 35px;

    /*border: 1px solid #232323;
    background-color: rgba(255, 154, 46, 0.835);*/

    margin: 0 0 0 0;
    float: left;
}

.box16container, .box17container, .box18container  {
    width: 275px;
    height: 35px;

    /*border: 1px solid #232323;
    background-color: rgba(255, 154, 46, 0.835);*/

    margin: 0 0 0 0;
    float: left;
}

.box19container, .box20container, .box21container  {
    width: 275px;
    height: 35px;

    /*border: 1px solid #232323;
    background-color: rgba(255, 154, 46, 0.835);*/

    margin: 0 0 0 0;
    float: left;
}

.box22container, .box23container, .box24container  {
    width: 275px;
    height: 35px;

    /*border: 1px solid #232323;
    background-color: rgba(255, 154, 46, 0.835);*/

    margin: 0 0 0 0;
    float: left;
}

.number1, .number2, .number3, .number4, .number5, .number6, .number7, .number8, .number9, .number10, .number11, .number12, .number13, .number14, .number15, .number16, .number17, .number18, .number19, .number20, .number21, .number22, .number23, .number24 {
    width: 35px;
    height: 35px;

    /*border: 1px solid #232323;
    background-color: rgba(77, 255, 46, 0.835);*/

    margin: 0 0 0 0;
    float: left;
}


.image1, .image2, .image19, .image24 {
    width: 45%; 
    cursor: pointer;
}

.image3, .image10 {
    cursor: pointer;
    width: 55%;
}

.image4, .image18 {
    cursor: pointer;
    width: 90%;
}

.image5, .image6, .image7, .image8, .image9, .image11, .image12, .image14, .image16, .image17, .image20, .image22, .image23 {
    cursor: pointer;
    width: 50%;
}

.image13 {
    cursor: pointer;
    width: 35%; 
}

.image15 {
    cursor: pointer;
    width: 65%;
}

.image21 {
    cursor: pointer;
    width: 130%;
}


.box1image {
    width: 275px;
    height: 195px;

    /*border: 1px solid #232323;
    background-color: rgba(46, 210, 255, 0.835);*/

    /*background-image: url("../images/fool_card.png");
    background-repeat: no-repeat;
    background-size: cover; /*TO FIT IMAGE TO THE DIV SPACE*/

    display: grid;
    place-items: center;

    float: left;
}

.box2image {
    width: 275px;
    height: 195px;

    /*border: 1px solid #232323;
    background-color: rgba(46, 210, 255, 0.835);*/

    display: grid;
    place-items: center;

    float: left;
}

.box3image {
    width: 275px;
    height: 195px;

    /*border: 1px solid #232323;
    background-color: rgba(46, 210, 255, 0.835);*/

    display: grid;
    place-items: center;

    float: left;
}

.box4image {
    width: 275px;
    height: 195px;

    /*border: 1px solid #232323;
    background-color: rgba(46, 210, 255, 0.835);*/

    display: grid;
    place-items: center;

    float: left;
}

.box5image {
    width: 275px;
    height: 195px;

    /*border: 1px solid #232323;
    background-color: rgba(46, 210, 255, 0.835);*/

    display: grid;
    place-items: center;

    float: left;
}

.box6image {
    width: 275px;
    height: 195px;

    /*border: 1px solid #232323;
    background-color: rgba(46, 210, 255, 0.835);*/

    display: grid;
    place-items: center;

    float: left;
}

.box7image {
    width: 275px;
    height: 195px;

    /*border: 1px solid #232323;
    background-color: rgba(46, 210, 255, 0.835);*/

    display: grid;
    place-items: center;

    float: left;
}

.box8image {
    width: 275px;
    height: 195px;

    /*border: 1px solid #232323;
    background-color: rgba(46, 210, 255, 0.835);*/

    display: grid;
    place-items: center;

    float: left;
}

.box9image {
    width: 275px;
    height: 195px;

    /*border: 1px solid #232323;
    background-color: rgba(46, 210, 255, 0.835);*/

    display: grid;
    place-items: center;

    float: left;
}

.box10image {
    width: 275px;
    height: 195px;

    /*border: 1px solid #232323;
    background-color: rgba(46, 210, 255, 0.835);*/

    display: grid;
    place-items: center;

    float: left;
}

.box11image {
    width: 275px;
    height: 195px;

    /*border: 1px solid #232323;
    background-color: rgba(46, 210, 255, 0.835);*/

    display: grid;
    place-items: center;

    float: left;
}

.box12image {
    width: 275px;
    height: 195px;

    /*border: 1px solid #232323;
    background-color: rgba(46, 210, 255, 0.835);*/

    display: grid;
    place-items: center;

    float: left;
}

.box13image {
    width: 275px;
    height: 195px;

    /*border: 1px solid #232323;
    background-color: rgba(46, 210, 255, 0.835);*/

    display: grid;
    place-items: center;

    float: left;
}

.box14image {
    width: 275px;
    height: 195px;

    /*border: 1px solid #232323;
    background-color: rgba(46, 210, 255, 0.835);*/

    display: grid;
    place-items: center;

    float: left;
}

.box15image {
    width: 275px;
    height: 195px;

    /*border: 1px solid #232323;
    background-color: rgba(46, 210, 255, 0.835);*/

    display: grid;
    place-items: center;

    float: left;
}

.box16image {
    width: 275px;
    height: 195px;

    /*border: 1px solid #232323;
    background-color: rgba(46, 210, 255, 0.835);*/

    display: grid;
    place-items: center;

    float: left;
}

.box17image {
    width: 275px;
    height: 195px;

    /*border: 1px solid #232323;
    background-color: rgba(46, 210, 255, 0.835);*/

    display: grid;
    place-items: center;

    float: left;
}

.box18image {
    width: 275px;
    height: 195px;

    /*border: 1px solid #232323;
    background-color: rgba(46, 210, 255, 0.835);*/

    display: grid;
    place-items: center;

    float: left;
}

.box19image {
    width: 275px;
    height: 195px;

    /*border: 1px solid #232323;
    background-color: rgba(46, 210, 255, 0.835);*/

    display: grid;
    place-items: center;

    float: left;
}

.box20image {
    width: 275px;
    height: 195px;

    /*border: 1px solid #232323;
    background-color: rgba(46, 210, 255, 0.835);*/

    display: grid;
    place-items: center;

    float: left;
}

.box21image {
    width: 275px;
    height: 195px;

    /*border: 1px solid #232323;
    background-color: rgba(46, 210, 255, 0.835);*/

    display: grid;
    place-items: center;

    float: left;
}

.box22image {
    width: 275px;
    height: 195px;

    /*border: 1px solid #232323;
    background-color: rgba(46, 210, 255, 0.835);*/

    display: grid;
    place-items: center;

    float: left;
}

.box23image {
    width: 275px;
    height: 195px;

    /*border: 1px solid #232323;
    background-color: rgba(46, 210, 255, 0.835);*/

    display: grid;
    place-items: center;

    float: left;
}

.box24image {
    width: 275px;
    height: 195px;

    /*border: 1px solid #232323;
    background-color: rgba(46, 210, 255, 0.835);*/

    display: grid;
    place-items: center;

    float: left;
}

.box1title, .box2title, .box3title, .box4title, .box5title, .box6title, .box7title, .box8title, .box9title, .box10title, .box11title, .box12title, .box13title, .box14title, .box15title, .box16title, .box17title, .box18title, .box19title, .box20title, .box21title, .box22title, .box23title, .box24title   {
    width: 275px;
    height: 40px;

    /*border: 1px solid #232323;
    background-color: rgba(255, 220, 20, 0.957);*/
    text-align: center;

    margin: 0 0 0 0;
    float: left;
}











/*CONTACT:*/
.socials {
    height: 700px;
    width: 1680px;

    /*border: 0px solid #232323;
    background-color: rgba(255, 220, 20, 0.957);*/
}

.socials_header {
    height: 100px;
    width: 1680px;

    display: grid;
    place-items: center;

    margin: 100px auto 0 auto;
}

.socials_subheader {
    height: 20px;
    width: 1680px;

    display: grid;
    place-items: center;

    margin: -30px auto 0 auto;
}

.instagram {
    color: #232323;
    transition: color 0.1s;

    font-size: 360px;

    margin: 20px auto 0 auto;

    display: grid;
    place-items: center;
}

.instagram:hover {
    color: #FFF;
}
                  






































/*----------------- MEDIA QUERY: TABLET ----------------- */
@media only screen and (max-width:1100px) {

/*TEXT:*/
h1 {
    font-size: 100px;

    text-align: center;

    margin: 10px auto 0 10px;
}

h2 {
    font-size: 35px;
    margin: 0 auto 0 auto;
}

/*h3 {
    font-size: 70px;
    margin: 0 auto 0 auto;
}*/


/*MAKES H2 SLIGHTLY BIGGER ON HOVER - unnecessary to have on tablet but code breaks if it isnt there */
.navbar:hover {
  font-size: 36px;
}



/*TITLE: "MELYSSA OKAZAKI":*/
.title {
    width: 1100px;
    height: 130px;

    /*border: 1px solid #e06508;
    background-color: rgba(39, 93, 220, 0.835);*/

    float: left;
    margin: 0 auto 0 auto;
}


/*LINEBREAK:*/
.nav-line {
    width: 99.99%;

    margin: 0 auto 0 auto;
    float: left;
}

.nav-line2 {
    width: 99.99%;

    margin: 0 auto 0 auto;
    float: left;
}

.shelf {
    margin: 0 auto 0 auto;
}


/*NAVIGATION BAR:*/
.nav {
    width: 99.99%;
    height: 65px;

    /*border: 1px solid #e06508;
    background-color: rgba(39, 93, 220, 0.835);*/

    margin: 0 auto 0 auto;
    float: none;
}

.home {
    width: 13%;
    height: 50px;

    /*border: 1px solid #e06508;
    background-color: rgba(39, 93, 220, 0.835);*/

    margin: 8px 0 0 136px;    
}

.thegallery {
    width: 20%;
    height: 50px;

    /*border: 1px solid #e06508;
    background-color: rgba(39, 93, 220, 0.835);*/

    text-align: center;
    margin: 8px 0 0 115px;
    /*margin: -40px 0 0 94px;*/
}

.contact {
    width: 13%;
    height: 50px;

    /*border: 1px solid #e06508;
    background-color: rgba(39, 93, 220, 0.835);*/

    float: right;
    margin: 8px 128px 0 auto;
    /*margin: -40px 4px 0 10px;*/
}


/*PERSONAL AND PACKAGING BOOKSHELF HERO:*/
.container1, .container2 {
    height: 450px;

    /*border: 1px solid #e06508;
    background-color: rgba(39, 93, 220, 0.835);*/

    margin: 0 auto 0 auto;
}

.overflow1, .overflow2 {
    height: 50vh;

    /*border: 1px solid #e06508;
    background-color: rgba(39, 93, 220, 0.835);*/

    margin: 0 auto 0 auto;
}

.personalpiece1, .personalpiece2, .personalpiece3, .personalpiece4, .personalpiece5 {
    height: 50vh;
}

.packagingpiece1, .packagingpiece2, .packagingpiece3, .packagingpiece4, .packagingpiece5 {
    height: 50vh;
}
    
.bottom1 {
    height: 9vh;

    /*border: 1px solid #e06508;*/

    margin: 0 auto 0 auto;
    float: left;
}

.personal {
    width: 99.99%;
    height: 9vh;

    margin: -14px auto 0 auto;
    float: left;
    text-align: center;
}

.bottom2 {
    height: 9vh;

    margin: 0 auto 0 auto;
    float: left;
}

.packaging {
    width: 99.99%;
    height: 9vh;

    margin: -14px auto 0 auto;
    float: left;
    text-align: center;
}
















/*THE GALLERY:*/
/*FULL PORTFOLIO GALLERY::*/
.row1container1, .row1container2, .row2container1, .row2container2, .row3container1, .row3container2, .row4container1, .row4container2  {
    width: 99.99%;
    height: 360px;

    /*border: 0px solid #232323;
    background-color: rgba(39, 93, 220, 0.835);*/
}

.box1, .box2, .box3 {
    width: 360px;
    height: 360px;

    margin: -5px -5px 0 0;
}

.box4, .box5, .box6 {
    width: 360px;
    height: 360px;

    margin: 0 -5px 0 0;
}

.box7, .box8, .box9 {
    width: 360px;
    height: 360px;

    margin: 5px -5px 0 0;
}

.box10, .box11, .box12 {
    width: 360px;
    height: 360px;

    margin: 10px -5px 0 0;
}

.box13, .box14, .box15 {
    width: 360px;
    height: 360px;

    margin: 15px -5px 0 0;
}

.box16, .box17, .box18 {
    width: 360px;
    height: 360px;

    margin: 20px -5px 0 0;
}

.box19, .box20, .box21 {
    width: 360px;
    height: 360px;

    margin: 25px -5px 0 0;
}

.box22, .box23, .box24 {
    width: 360px;
    height: 360px;

    margin: 30px -5px 0 0;
}

.box1container, .box2container, .box3container, .box4container, .box5container, .box6container, .box7container, .box8container, .box9container, .box10container, .box11container, .box12container, .box13container, .box14container, .box15container, .box16container, .box17container, .box18container, .box19container, .box20container, .box21container, .box22container, .box23container, .box24container  {
    width: 360px;
    height: 40px;

    /*border: 1px solid #232323;
    background-color: rgba(255, 154, 46, 0.835);*/

    margin: 0 0 0 0;
    float: left;
}

.number1, .number2, .number3, .number4, .number5, .number6, .number7, .number8, .number9, .number10, .number11, .number12, .number13, .number14, .number15, .number16, .number17, .number18, .number19, .number20, .number21, .number22, .number23, .number24 {
    width: 40px;
    height: 40px;

    /*border: 1px solid #232323;
    background-color: rgba(77, 255, 46, 0.835);*/

    margin: 0 0 0 5px;
}

.box1image, .box2image, .box3image, .box4image, .box5image, .box6image, .box7image, .box8image, .box9image, .box10image, .box11image, .box12image, .box13image, .box14image, .box15image, .box16image, .box17image, .box18image, .box19image, .box20image, .box21image, .box22image, .box23image, .box24image  {
    width: 360px;
    height: 275px;

    /*border: 1px solid #232323;
    background-color: rgba(46, 210, 255, 0.835);*/
}

.box1title, .box2title, .box3title, .box4title, .box5title, .box6title, .box7title, .box8title, .box9title, .box10title, .box11title, .box12title, .box13title, .box14title, .box15title, .box16title, .box17title, .box18title, .box19title, .box20title, .box21title, .box22title, .box23title, .box24title   {
    width: 360px;
    height: 40px;

    /*border: 1px solid #232323;
    background-color: rgba(255, 220, 20, 0.957);*/
}














/*CONTACT:*/
.socials {
    height: 620px;
    width: 1100px;

    /*border: 0px solid #232323;
    background-color: rgba(255, 220, 20, 0.957);*/
}

.socials_header {
    height: 100px;
    width: 1100px;

    margin: 100px auto 0 auto;
}

.socials_subheader {
    height: 20px;
    width: 1100px;

    margin: -30px auto 0 auto;
}
}

























/*----------------- MEDIA QUERY: PHONE ----------------- */

@media only screen and (max-width:600px) {

/*TEXT:*/  
h1 {
    font-size: 70px;

    margin: 10px auto 0 10px;
}

h2 {
    font-size: 30px;
    margin: 0 auto 0 auto;
}

h3 {
    font-size: 70px;
    margin: 0 auto 0 auto;
}

/*MAKES H2 SLIGHTLY BIGGER ON HOVER - unnecessary to have on phone but code breaks if it isnt there */
.navbar:hover {
  font-size: 31px;
}

h4 {
    font-size: 30px;
    margin: 0 auto 0 auto;
}

h5 {
    font-size: 30px;
    margin: 15px auto 0 15px;
}


/*TITLE: "MELYSSA OKAZAKI":*/
.title {
    width: 600px;
    height: 100px;

    /*border: 1px solid #e06508;
    background-color: rgba(111, 224, 73);*/


    float: left;
    margin: 0 auto 0 auto;
}


/*LINEBREAK:*/
.nav-line {
    width: 99.99%;

    margin: 0 auto 0 auto;
    float: left;
}

.nav-line2 {
    width: 99.99%;

    margin: 0 auto 0 auto;
    float: left;
}


/*NAVIGATION BAR:*/
.nav {
    width: 99.99%;
    height: 50px;

    /*border: 1px solid #e06508;
    background-color: rgba(111, 224, 73);*/

    margin: 0 auto 0 auto;
    float: none;
}

.home {
    width: 13%;
    height: 30px;

    /*border: 1px solid #e06508;
    background-color: rgba(39, 93, 220, 0.835);*/

    margin: 0 0 0 8px;
}

.thegallery {
    width: 32%;
    height: 30px;

    /*border: 1px solid #e06508;
    background-color: rgba(39, 93, 220, 0.835);*/

    margin: 0 0 0 78px;
    text-align:center;
}

.contact {
    width: 19%;
    height: 30px;

    /*border: 1px solid #e06508;
    background-color: rgba(39, 93, 220, 0.835);*/

    margin: 0 2px 0 0;
}


/*PERSONAL AND PACKAGING BOOKSHELF HERO:*/
.container1, .container2 {
    height: 300px;

    /*border: 1px solid #e06508;
    background-color: rgba(39, 93, 220, 0.835);*/

    margin: 0 auto 0 auto;
}

.overflow1, .overflow2 {
    height: 50vh;

    /*border: 1px solid #e06508;
    background-color: rgba(39, 93, 220, 0.835);*/

    margin: -110px auto 0 auto;
}

.personalpiece1, .personalpiece2, .personalpiece3, .personalpiece4, .personalpiece5 {
    height: 50vh;
}

.packagingpiece1, .packagingpiece2, .packagingpiece3, .packagingpiece4, .packagingpiece5 {
    height: 50vh;
}

.bottom1 {
    height: 9vh;

    /*border: 1px solid #e06508;*/

    margin: 0 auto 0 auto;
    float: left;
}

.personal {
    width: 99.99%;
    height: 9vh;

    /*border: 1px solid #e06508;*/

    margin: -16px auto 0 auto;
    float: left;
    text-align: center;
}

.bottom2 {
    height: 9vh;

    /*border: 1px solid #e06508;*/

    margin: 0 auto 0 auto;
    float: left;
}

.packaging {
    width: 99.99%;
    height: 9vh;

    /*border: 1px solid #e06508;*/

    margin: -16px auto 0 auto;
    float: left;
    text-align: center;
}




















/*THE GALLERY:*/
/*FULL PORTFOLIO GALLERY::*/
.row1container1, .row1container2, .row2container1, .row2container2, .row3container1, .row3container2, .row4container1, .row4container2  {
    width: 99.99%;
    height: 590px;

    /*border: 0px solid #232323;
    background-color: rgba(39, 93, 220, 0.835);*/

    float: none;
    display: BLOCK;
}

.box1 {
    width: 590px;
    height: 590px;

    /*background-color: rgba(39, 93, 220, 0.835);*/

    margin: 104px -5px 0 0;

    float: none;
    display: BLOCK;
}

.box2 {
    width: 590px;
    height: 590px;

    /*background-color: rgba(39, 93, 220, 0.835);*/

    margin: -5px -5px 0 0;

    float: none;
    display: BLOCK;
}

.box3 {
    width: 590px;
    height: 590px;

    margin: -5px -5px 0 0;
    float: none;
    display: BLOCK;
}

.box4 {
    width: 590px;
    height: 590px;

    margin: 1195px -5px 0 0;
    float: none;
    display: BLOCK;
}

.box5 {
    width: 590px;
    height: 590px;

    margin: -5px -5px 0 0;
    float: none;
    display: BLOCK;
}

.box6 {
    width: 590px;
    height: 590px;

    margin: -5px -5px 0 0;
    float: none;
    display: BLOCK;
}

.box7 {
    width: 590px;
    height: 590px;

    margin: 1195px -5px 0 0;
    float: none;
    display: BLOCK;
}

.box8 {
    width: 590px;
    height: 590px;

    margin: -5px -5px 0 0;
    float: none;
    display: BLOCK;
}

.box9 {
    width: 590px;
    height: 590px;

    margin: -5px -5px 0 0;
    float: none;
    display: BLOCK;
}

.box10 {
    width: 590px;
    height: 590px;

    /*background-color: rgba(39, 93, 220, 0.835);*/

    margin: 1195px -5px 0 0;
    float: none;
    display: BLOCK;
}

.box11 {
    width: 590px;
    height: 590px;

    margin: -5px -5px 0 0;
    float: none;
    display: BLOCK;
}

.box12 {
    width: 590px;
    height: 590px;

    margin: -5px -5px 0 0;
    float: none;
    display: BLOCK;
}

.box13 {
    width: 590px;
    height: 590px;

    margin: 1195px -5px 0 0;
    float: none;
    display: BLOCK;
}

.box14 {
    width: 590px;
    height: 590px;

    margin: -5px -5px 0 0;
    float: none;
    display: BLOCK;
}

.box15 {
    width: 590px;
    height: 590px;

    margin: -5px -5px 0 0;
    float: none;
    display: BLOCK;
}

.box16 {
    width: 590px;
    height: 590px;

    margin: 1195px -5px 0 0;
    float: none;
    display: BLOCK;
}

.box17 {
    width: 590px;
    height: 590px;

    margin: -5px -5px 0 0;
    float: none;
    display: BLOCK;
}

.box18 {
    width: 590px;
    height: 590px;

    margin: -5px -5px 0 0;
    float: none;
    display: BLOCK;
}
.box19 {
    width: 590px;
    height: 590px;

    margin: 1195px -5px 0 0;
    float: none;
    display: BLOCK;
}

.box20 {
    width: 590px;
    height: 590px;

    margin: -5px -5px 0 0;
    float: none;
    display: BLOCK;
}

.box21 {
    width: 590px;
    height: 590px;

    margin: -5px -5px 0 0;
    float: none;
    display: BLOCK;
}

.box22 {
    width: 590px;
    height: 590px;

    margin: 1195px -5px 0 0;
    float: none;
    display: BLOCK;
}

.box23 {
    width: 590px;
    height: 590px;

    margin: -5px -5px 0 0;
    float: none;
    display: BLOCK;
}

.box24 {
    width: 590px;
    height: 590px;

    margin: -5px -5px 0 0;
    float: none;
    display: BLOCK;
}

.box1container, .box2container, .box3container, .box4container, .box5container, .box6container, .box7container, .box8container, .box9container, .box10container, .box11container, .box12container, .box13container, .box14container, .box15container, .box16container, .box17container, .box18container, .box19container, .box20container, .box21container, .box22container, .box23container, .box24container  {
    width: 590px;
    height: 60px;

    /*border: 1px solid #232323;
    background-color: rgba(255, 154, 46, 0.835);*/

    /*margin: 0 0 0 0;
    float: left;*/
}

.number1, .number2, .number3, .number4, .number5, .number6, .number7, .number8, .number9, .number10, .number11, .number12, .number13, .number14, .number15, .number16, .number17, .number18, .number19, .number20, .number21, .number22, .number23, .number24 {
    width: 60px;
    height: 60px;

    /*border: 1px solid #232323;
    background-color: rgba(77, 255, 46, 0.835);*/

    margin: 0 0 0 5px;
}

.box1image, .box2image, .box3image, .box4image, .box5image, .box6image, .box7image, .box8image, .box9image, .box10image, .box11image, .box12image, .box13image, .box14image, .box15image, .box16image, .box17image, .box18image, .box19image, .box20image, .box21image, .box22image, .box23image, .box24image  {
    width: 590px;
    height: 470px;

    /*border: 1px solid #232323;
    background-color: rgba(46, 210, 255, 0.835);*/
}

.box1title, .box2title, .box3title, .box4title, .box5title, .box6title, .box7title, .box8title, .box9title, .box10title, .box11title, .box12title, .box13title, .box14title, .box15title, .box16title, .box17title, .box18title, .box19title, .box20title, .box21title, .box22title, .box23title, .box24title   {
    width: 590px;
    height: 60px;

    /*border: 1px solid #232323;
    background-color: rgba(255, 220, 20, 0.957);*/
}

















/*CONTACT:*/
.socials {
    height: 680px;
    width: 600px;

    /*border: 0px solid #232323;
    background-color: rgba(255, 220, 20, 0.957);*/
}

.socials_header {
    height: 100px;
    width: 600px;

    margin: 50px auto 0 auto;
}

.socials_subheader {
    display: none;
}

.instagram {
    font-size: 580px;

    margin: -20px auto 0 auto;
}
}