body {
  /*font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;*/
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  width: 90%;
}

p {
  font-size: 19px;
  font-weight: lighter;
}

.ibody {
  overflow: hidden;
}
.Web_Nav_Bar {
  list-style-type: none;

  /* margin: auto; */
  padding: 5%;
  width: 30%;

  text-align: center;

  margin-top: -4%;
  margin-left: 35%;

  display: grid;
  grid-template-rows: 50px 50px;
  grid-template-columns: 90px 90px 90px;
  column-gap: 3px;
  row-gap: 1px;

  font-size: 20px;
}

p.cen1 {
  text-align: center;
  font-size: 30px;
  font-weight: lighter;
}

p.cen2 {
  text-align: center;
  font-size: 30px;
  font-weight: bold;
}

p.cen3 {
  text-align: center;
  font-size: 30px;
  font-weight: lighter;
  font-style: italic;
}

ul.decisionTable {
  list-style-type: none;

  width: 89%;

  margin: auto;

  display: grid;
  /* grid-template-rows: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px; */
  grid-template-columns: 600px 600px;

  padding: 1%;
}

.designTables {
  margin-top: -7%;
}

.wireFrames {
  margin-top: -5%;
}

h3.designSubHeading {
  text-align: center;
  font-weight: lighter;
  font-size: 30px;
}

li.decisionTableItem {
  border: 1px solid black;
  padding: 1%;
}

.contactContent {
  font-weight: lighter;
  margin-top: -5%;
  text-align: center;
}

.contactInfo {
  list-style-type: none;
  width: 48%;
  margin: auto;
  display: grid;
  grid-template-rows: 100px 50px;
  grid-template-columns: 200px 200px 200px;
  column-gap: 5px;
}

.contactInfoItem {
  /* border: 1px solid black; */
  padding: 1%;
  font-weight: lighter;
  text-decoration: none;
}

a.contactInfoItem1 {
  text-decoration: none;
  color: black;
  padding: 1%;
}

li.contactInfoItem a.contactInfoItem1:hover {
  text-decoration: none;
  display: block;
  border-radius: 3px;
  background-color: #c4c3d0;
  text-decoration: none;
  color: black;
  padding: 1%;
}
img.contactImage {
  width: 50%;
  height: auto;
}

.designList {
  list-style-type: none;
  margin: auto;
  padding: 5%;
  width: 30%;

  display: grid;
  grid-template-rows: 50px 50px 50px 50px 50px;
  grid-template-columns: 90px;

  row-gap: 5px;

  margin-top: -5%;

  text-align: center;

  margin-left: 41%;
}

li.designListItem a {
  text-align: center;
  color: black;
  text-decoration: none;
  display: block;
  background-color: #c4c3d0;
  border-radius: 3px;
  width: 100%;
  margin: auto;
  padding: 5%;
  font-weight: lighter;
}

li.designListItem a:hover {
  text-decoration: none;
  color: #c4c3d0;
  font-weight: lighter;
  display: block;
  background-color: black;
  padding: 5%;
  cursor: pointer;
  border-radius: 3px;
}

.nav_grid_item {
  text-align: center;
}

li.nav_grid_item a {
  text-decoration: none;
  color: black;
  font-weight: lighter;
  display: block;
  background-color: #c4c3d0;
  padding: 5%;
  border-radius: 3px;
}

li.nav_grid_item2 a {
  text-decoration: none;
  color: #c4c3d0;
  font-weight: lighter;
  display: block;
  background-color: black;
  padding: 5%;
  border-radius: 3px;
}

li.nav_grid_item2 a:hover {
  text-decoration: none;
  color: #c4c3d0;
  font-weight: lighter;
  display: block;
  background-color: black;
  padding: 5%;
  border-radius: 3px;
  cursor: pointer;
}

li.nav_grid_item a:hover {
  text-decoration: none;
  color: #c4c3d0;
  font-weight: lighter;
  display: block;
  background-color: black;
  padding: 5%;
  border-radius: 3px;
  cursor: pointer;
}

h1.title {
  margin: auto;
  text-align: center;
  font-weight: lighter;
  font-size: 50px;
}
h2.pageName {
  margin: auto;
  text-align: center;
  font-weight: lighter;
  font-size: 40px;
}

img.indexHands {
  width: 70%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3%;
}

.homeSubTitle {
  font-weight: lighter;
  font-size: 20px;
  text-align: center;
}

ol.blogList {
  margin: auto;
  margin-left: 30px;
  width: 99%;
  margin-top: -7%;
  padding: 3%;
}

li.blogItem {
  display: block;
  border-radius: 3px;
  background-color: #deddee;
  list-style-type: none;
  width: 90%;
  height: 100px;
  padding: 0;
}

h3.blogItemTitle {
  font-weight: lighter;
  padding: 1%;
  font-size: 20px;
}

h4.blogDate {
  font-weight: normal;
  font-size: 15px;
  padding: 1%;
  margin-top: -2%;
}

ul.palette {
  list-style-type: none;
  display: grid;
  grid-template-columns: 71px 71px 71px 71px 71px;
  margin-left: 32%;
}

div.whiteBlock {
  text-align: center;
  display: block;
  width: 68px;
  height: 68px;
  border-style: solid;
  border-width: 0.1px;
  border-color: black;
  background-color: white;
}

div.blackBlock {
  text-align: center;
  display: block;
  width: 70px;
  height: 70px;

  color: #c4c3d0;
  background-color: black;
}

div.lavBlock {
  text-align: center;
  display: block;
  width: 70px;
  height: 70px;

  background-color: #c4c3d0;
}
div.lPurp {
  text-align: center;
  display: block;
  width: 70px;
  height: 70px;

  background-color: #deddee;
}
div.dPurp {
  text-align: center;
  display: block;
  width: 70px;
  height: 70px;

  color: #c4c3d0;
  background-color: rgb(116, 114, 145);
}

h5.blogDescription {
  font-weight: normal;
  font-size: 15px;
  font-style: italic;
  padding: 0%;
  text-align: center;
  margin-top: -4%;
}
div.blogReadButton a.blogReadButton {
  /*float: right;*/

  width: 93px;

  font-weight: lighter;
  margin-right: 90%;
  margin-left: 89%;
  margin-top: -4%;
  padding: 1%;
  display: block;
  background-color: rgb(116, 114, 145);

  border-radius: 3px;
  text-decoration: none;
  color: white;

  height: 5px;

  text-align: center;

  font-size: 15px;
}

div.blogReadButton a.blogReadButton:hover {
  background-color: white;
  color: rgb(125, 125, 125);
  cursor: pointer;
}

a.blogReadButton {
  text-align: center;
}

div.readText {
  margin-top: -5%;
}

.aboutContent {
  display: block;
  width: 90%;
  margin: auto;
  margin-top: -10%;
  padding: 5%;
  margin-left: 10%;
}

h3.aboutSubtitle {
  font-weight: lighter;
  font-size: 40px;
}

section.BlogContent {
  display: block;
  margin: auto;
  width: 90%;
  height: auto;

  padding: 2%;

  margin-top: -8%;
}

.b {
  font-weight: bold;
  text-align: center;
}
h3.blogDatePosted {
  font-weight: lighter;
  font-size: 30px;
}

.blogText {
  font-size: 20px;
  font-weight: lighter;
}

ol.blogReferenceList {
  margin-top: -1%;
  list-style-type: none;
  font-weight: lighter;
}

li.blogReferenceItem {
  padding: 0.5%;
}

h4.referencesTitle {
  font-weight: lighter;
  font-size: 20px;
}

a.blogReturn {
  text-decoration: none;
  font-weight: lighter;
  color: black;
  display: block;
  background-color: #c4c3d0;
  width: 15%;

  text-align: center;

  border-radius: 3px;
}

a.blogReturn:hover {
  font-weight: lighter;
  text-decoration: none;
  color: #c4c3d0;
  display: block;
  background-color: black;
  width: 15%;

  text-align: center;
  cursor: pointer;

  border-radius: 3px;
}

a.referenceAccess {
  text-decoration: none;

  color: black;
  display: block;
  background-color: #c4c3d0;
  width: 13%;
  text-align: center;
  border-radius: 3px;
}

a.referenceAccess:hover {
  text-decoration: none;
  color: #c4c3d0;
  display: block;
  background-color: black;
  width: 13%;
  text-align: center;
  border-radius: 3px;
}

.blogReferenceList {
  font-size: 18px;
}

h4.blogSubtitle {
  font-weight: lighter;
  font-size: 25px;
}

h3.artTitle {
  font-weight: lighter;
  text-align: center;
  margin-top: -5%;
}

h4.artBookTitle {
  font-weight: lighter;
  text-align: center;
  font-size: 50px;
  color: white;
  position: absolute;
  display: block;
  width: 98%;
  margin-top: 5%;
  background-color: black;
  padding: 1%;
  z-index: 999;
}

img.adventureImg {
  width: 60%;
  height: auto;
  margin-left: 10%;
  transition: transform 0.2s;
}

/* img.adventureImg:hover {
  transform: scale(3);
} */

img.monsterImg {
  width: 50%;
  margin-left: 20%;
  transition: transform 0.2s;
}

/* img.monsterImg:hover {
  transform: scale(2);
} */

img.icyImg {
  width: 90%;
  height: auto;
  transition: transform 0.2s;
}

/* img.icyImg:hover {
  transform: scale(2.3);
} */

img.fFlowerShopImg {
  width: 57%;
  height: auto;
  margin-left: 20%;
  transition: transform 0.2s;
}

/* img.fFlowerShopImg:hover {
  transform: scale(2);
} */

img.bFlowerShopImg {
  width: 62%;
  margin-left: 20%;
  height: auto;
  transition: transform 0.2s;
}

/* img.bFlowerShopImg:hover {
  transform: scale(2);
} */

img.cWitchImg {
  width: 65%;
  height: auto;
  margin-left: 20%;
  transition: transform 0.2s;
}
/* img.cWitchImg:hover {
  transform: scale(1.5);
} */

img.fCityWitch {
  width: 65%;
  height: auto;
  margin-left: 20%;
  transition: transform 0.2s;
}

/* img.fCityWitch:hover {
  transform: scale(1.5);
} */

img.cthingsImg {
  width: 50%;
  height: auto;
  margin-left: 20%;
  transition: transform 0.2s;
}

/* img.cthingsImg:hover {
  transform: scale(2.5);
} */

img.skyWitchImg {
  width: 80%;
  height: auto;
  margin-left: 15%;
  transition: transform 0.2s;
}
/* 
img.skyWitchImg:hover {
  transform: scale(2);
} */

img.stairWitchImg {
  width: 50%;
  height: auto;
  margin-left: 20%;
  transition: transform 0.2s;
}

/* img.stairWitchImg:hover {
  transform: scale(1.5);
} */

img.morningWitchesImg {
  width: 65%;
  height: auto;
  margin-left: 20%;
  transition: transform 0.2s;
}

/* img.morningWitchesImg:hover {
  transform: scale(1.5);
} */

img.nightWitchesImg {
  width: 65%;
  height: auto;
  margin-left: 20%;
  transition: transform 0.2s;
}

/* img.nightWitchesImg:hover {
  transform: scale(1.5);
} */

img.animeRetroImg {
  width: 65%;
  height: auto;
  margin-left: 20%;
  transition: transform 0.2s;
}

/* img.animeRetroImg:hover {
  transform: scale(1.5);
} */

img.cherryGirlImg {
  width: 80%;
  height: auto;
  margin-left: 10%;
  transition: transform 0.2s;
}
/* 
img.cherryGirlImg:hover {
  transform: scale(1.5);
} */

img.benchtWitchImg {
  width: 45%;
  height: auto;
  margin-left: 20%;
  transition: transform 0.2s;
}

/* img.benchtWitchImg:hover {
  transform: scale(3);
} */

img.flyingWitchImg {
  width: 45%;
  height: auto;
  margin-left: 20%;
  transition: transform 0.2s;
}

/* img.flyingWitchImg:hover {
  transform: scale(3);
} */

img.colorfulPortraitImg {
  width: 80%;
  height: auto;
  margin-left: 10%;
  transition: transform 0.2s;
}
/* img.colorfulPortraitImg:hover {
  transform: scale(1.5);
} */

img.fieldImg {
  width: 100%;
  height: auto;
  transition: transform 0.2s;
  margin-top: 2%;
}
/* 
img.fieldImg:hover {
  transform: scale(1.5);
} */

img.flowImg {
  width: 70%;
  height: auto;
  margin-left: 15%;
  transition: transform 0.2s;
}

/* img.flowImg:hover {
  transform: scale(1.5);
} */

img.handsImg {
  width: 65%;
  height: auto;
  margin-left: 20%;
  transition: transform 0.2s;
}

/* img.handsImg:hover {
  transform: scale(1.5);
} */

img.sAndMoonImg {
  width: 65%;
  height: auto;
  margin-left: 20%;
  transition: transform 0.2s;
}
/* 
img.sAndMoonImg:hover {
  transform: scale(1.5);
} */

img.nightWaterImg {
  width: 50%;
  height: auto;
  margin-left: 20%;
  transition: transform 0.2s;
}

/* img.nightWaterImg:hover {
  transform: scale(1.5);
} */

img.rainicornImg {
  width: 40%;
  height: auto;
  margin-left: 30%;
  transition: transform 0.2s;
}
/* 
img.rainicornImg:hover {
  margin-top: -35%;
  transform: scale(2);
} */

img.ponyoImg {
  width: 45%;
  height: auto;
  margin-left: 30%;
  transition: transform 0.2s;
}
/* 
img.ponyoImg:hover {
  margin-top: -30%;
  transform: scale(2);
} */

img.fAndJakeImg {
  width: 100%;
  height: auto;
  transition: transform 0.2s;
}

/* img.fAndJakeImg:hover {
  transform: scale(2);
} */

img.gokuImg {
  width: 100%;
  height: auto;
  transition: transform 0.2s;
}

/* img.gokuImg:hover {
  transform: scale(2);
} */

img.linkImg {
  width: 80%;
  height: auto;
  margin-left: 10%;
  transition: transform 0.2s;
}

/* img.linkImg:hover {
  transform: scale(2);
} */

img.archerImg {
  width: 50%;
  height: auto;
  margin-left: 30%;
  transition: transform 0.2s;
}

/* img.archerImg:hover {
  transform: scale(2);
} */

#portfolio {
  width: 1300px;
  height: 400px;
  margin: auto;
}
#portfolio .turn-page {
  background-color: #c4c3d0;
}

img.artBookCover {
  width: 100%;
  height: auto;
  margin-top: 18%;
  transition: transform 0.2s;
}
/*
img.artBookCover:hover {
  transform: scale(3);
}*/

img.toolsImage {
  width: 100%;
  height: auto;
  transition: transform 0.2s;
}

/* img.toolsImage:hover {
  transform: scale(2);
} */
.artBook1 {
  position: relative;
  text-align: center;
}

.artBook2 {
  padding: 2%;
}

h5.artSectionTitle {
  font-weight: lighter;
  font-size: 30px;
  margin-top: 2%;
  margin-left: 1%;
}
/* 
body.bArt {
  overflow: hidden;
} */

article.artBookDescription {
  display: block;
  width: 90%;
  font-weight: lighter;
  font-size: 20px;
  padding: 2%;
  border-style: solid;
  border-color: black;
  border-width: 1px;
}

div.table_of_contents_artBook {
  margin-top: -40%;
  width: 20%;
  margin-left: 2%;
}

.artContents {
  font-weight: lighter;
  font-size: 30px;
}

ul.art_list_of_contents {
  list-style-type: none;

  margin-left: 80%;
  margin-top: 30%;
  display: grid;
  grid-template-columns: 110px 110px 130px 65px 65px 125px 50px 100px;
  grid-template-rows: 30px;
  column-gap: 10px 10px 10px 10px 10px 10px 10px 10px;
  width: 80%;
}

/* li.artIndex {
  padding: 1%;
  display: block;
  background-color: antiquewhite;
  width: 50%;
  border-radius: 2px;
} */

button.artButton {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  /* cursor: pointer; */
  outline: inherit;

  display: block;
  background-color: #c4c3d0;
  border-radius: 2px;
  padding: 3px;
}

button.artButton:hover {
  background-color: black;
  color: #c4c3d0;
}

button.artButton1 {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  /* cursor: pointer; */
  outline: inherit;

  display: block;
  background-color: #c4c3d0;
  width: 70%;
  border-radius: 2px;
}

button.artButton1:hover {
  background-color: black;
  color: #c4c3d0;
}

ul.bookNavButtons {
  list-style-type: none;
  display: grid;
  grid-template-columns: 50px 50px;
  grid-template-rows: 20px;
  margin-top: -4%;
  margin-left: 43%;
}

section.designReflection {
  margin-left: 10%;
  padding: 10%;
  margin-top: -15%;
}

img.webRef1Img {
  width: 80%;
  height: auto;
  margin-left: 5%;
}

p.uxQuestions {
  font-size: 20px;
  font-weight: lighter;
}
p.aimLine {
  font-size: 25px;
  font-weight: lighter;
}

h4.designSubtitle {
  font-size: 30px;
  font-weight: lighter;
}

img.wireframeImg {
  margin-left: 25%;
}

.mobileView {
  display: contents;
}

@media only screen and (min-device-width: 1024px) {
  .mobileView {
    display: none;
  }

  body.bArt {
    overflow: hidden;
  }

  .mobileHomeImage {
    visibility: hidden;
  }

  .mobileShowBlogList {
    display: none;
  }

  .contactInfo2 {
    display: none;
  }
}

@media (max-width: 450px) {
  ul.palette {
    grid-template-columns: 71px;
    grid-template-rows: 71px 71px 71px 71px 71px;
    margin-top: -5%;
  }
}
/*changed this from 1025 to 1024*/
@media (max-width: 1024px) {
  .mobileHomeImage {
    visibility: visible;
    width: 100%;
  }

  .MindexHands {
    width: 100%;
    height: auto;
  }
  .contactInfo2 {
    display: none;
  }
  img.webRef1Img {
    width: 100%;
    height: auto;
  }
  .Web_Nav_Bar {
    margin: 0 auto;
    list-style-type: none;

    padding: 5%;

    text-align: center;
    margin-top: -4%;
    margin-left: 60%;

    display: grid;
    grid-template-rows: 50px 50px;
    grid-template-columns: 90px 90px 90px;
    column-gap: 3px;
    row-gap: 1px;

    font-size: 20px;
    position: relative;
  }
}

@media only screen and (max-device-width: 1024px) {
  .dTableHolder {
    width: 90%;
    overflow-x: auto;
    border-style: solid;
    border-width: 1px;
    margin-left: 5%;
  }

  .artDisplay {
    display: block;
    width: 100%;
    height: 100%;
    padding: 5%;
  }
  img.wireframeImg {
    width: 80%;
    height: auto;
  }

  ul.palette {
    width: 100%;
    margin-left: 30%;
  }
  .mobileHideBlogList {
    display: none;
  }
  .artContentHide {
    display: none;
  }
  .mobileView {
    width: 90%;
    display: contents;
    margin-left: 10%;
  }

  body.bArt {
    overflow: scroll;
    overflow: visible;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  h4.artBookTitle {
    font-weight: lighter;
    text-align: center;
    font-size: 50px;
    color: white;
    position: absolute;
    display: block;
    width: 100%;
    margin-top: 5%;
    background-color: black;
    padding: 0%;
    z-index: 999;
  }

  div.artBook1 {
    width: 100%;
  }

  nav.mNav {
    width: 50%;
  }

  section.mobileShowBlogList {
    width: 95%;
  }

  ol.mblogList {
    margin: auto;
    width: 100%;
    margin-top: -7%;
    padding: 3%;
  }
  .mblogItem {
    display: block;
    border-radius: 3px;
    background-color: #deddee;
    list-style-type: none;
    width: 90%;
    height: 50%;
    padding: 0;
  }
  h3.mblogItemTitle {
    font-weight: lighter;
    padding: 1%;
    font-size: 20px;
  }

  h4.mblogDate {
    font-weight: normal;
    font-size: 15px;
    padding: 1%;
    margin-top: -2%;
  }
  h5.mblogDescription {
    font-weight: normal;
    font-size: 15px;
    font-style: italic;
    padding: 0%;
    text-align: center;
    margin-top: -4%;
  }

  div.mblogReadButton a.mblogReadButton {
    /*float: right;*/

    width: 93px;

    font-weight: lighter;
    margin-right: 90%;
    margin-left: 80%;
    margin-top: -3%;
    padding: 1%;
    display: block;
    background-color: rgb(116, 114, 145);

    border-radius: 3px;
    text-decoration: none;
    color: white;

    height: 15px;

    text-align: center;

    font-size: 15px;
  }

  div.mblogReadButton a.mblogReadButton:hover {
    background-color: white;
    color: rgb(125, 125, 125);
    cursor: pointer;
  }

  div.mreadText {
    margin-top: -5%;
  }
}

@media (max-width: 780px) {
  a.referenceAccess {
    width: 30%;
  }

  a.blogReturn {
    width: 30%;
  }

  a.referenceAccess:hover {
    width: 30%;
  }

  a.blogReturn:hover {
    width: 30%;
  }
}
img.mobileImg {
  width: 100%;
  height: auto;
}

a.designListItem2 {
  cursor: pointer;
  display: block;
  text-align: center;
  width: 10%;
  padding: 1%;
  border-radius: 3px;
  background-color: #c4c3d0;
  margin-left: 45%;
}

a.designListItem2:hover {
  background-color: black;
  color: #c4c3d0;
}

p.cen {
  text-align: center;
}

@media (max-width: 900px) {
  .contactInfo {
    display: none;
  }

  .contactInfo2 {
    padding: 3%;
    list-style-type: none;
    width: 48%;
    margin-left: 30%;
    display: grid;
    grid-template-rows: 100px 50px 100px 50px 100px 50px;
    grid-template-columns: 200px;
    column-gap: 5px;
  }
}

@media (max-width: 700px) {
  .Web_Nav_Bar {
    list-style-type: none;

    padding: 5%;

    text-align: center;
    margin-top: -4%;
    margin-left: 50%;

    display: grid;
    grid-template-rows: 50px 50px;
    grid-template-columns: 90px 90px 90px;
    column-gap: 3px;
    row-gap: 1px;

    font-size: 20px;
  }
}

@media (max-width: 600px) {
  .Web_Nav_Bar {
    list-style-type: none;

    padding: 5%;

    text-align: center;
    margin-top: -4%;
    margin-left: 40%;

    display: grid;
    grid-template-rows: 50px 50px;
    grid-template-columns: 90px 90px 90px;
    column-gap: 3px;
    row-gap: 1px;

    font-size: 20px;
  }
}

@media (max-width: 500px) {
  .Web_Nav_Bar {
    list-style-type: none;

    padding: 5%;

    text-align: center;
    margin-top: -4%;
    margin-left: 20%;

    display: grid;
    grid-template-rows: 50px 50px;
    grid-template-columns: 90px 90px 90px;
    column-gap: 3px;
    row-gap: 1px;

    font-size: 20px;
  }

  .contactInfo2 {
    margin-left: 20%;
  }
}

img.wireframeImg2 {
  width: 60%;
  height: auto;
  margin-left: 20%;
}

article.oldDiscuss {
  text-align: center;
  padding: 2%;
  width: 60%;
  margin-left: 20%;
}

ol.sChanges {
  list-style-type: none;
}

/* for ipad pro 12.9 inch */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
  .mobileShowBlogList {
    display: contents;
    display: inline;
  }
  .Web_Nav_Bar {
    list-style-type: none;

    padding: 5%;
    width: 30%;

    text-align: center;

    margin-top: -4%;
    margin-left: 70%;

    display: grid;
    grid-template-rows: 50px 50px;
    grid-template-columns: 90px 90px 90px;
    column-gap: 3px;
    row-gap: 1px;

    font-size: 20px;
  }

  ol.mblogList {
    margin: auto;
    width: 100%;
    margin-top: -7%;
    padding: 3%;
  }
  .mblogItem {
    display: block;
    border-radius: 3px;
    background-color: #deddee;
    list-style-type: none;
    width: 90%;
    height: 50%;
    padding: 0;
  }
  h3.mblogItemTitle {
    font-weight: lighter;
    padding: 1%;
    font-size: 20px;
  }

  h4.mblogDate {
    font-weight: normal;
    font-size: 15px;
    padding: 1%;
    margin-top: -2%;
  }
  h5.mblogDescription {
    font-weight: normal;
    font-size: 15px;
    font-style: italic;
    padding: 0%;
    text-align: center;
    margin-top: -4%;
  }

  div.mblogReadButton a.mblogReadButton {
    width: 93px;

    font-weight: lighter;
    margin-right: 90%;
    margin-left: 80%;
    margin-top: -3%;
    padding: 1%;
    display: block;
    background-color: rgb(116, 114, 145);

    border-radius: 3px;
    text-decoration: none;
    color: white;

    height: 15px;

    text-align: center;

    font-size: 15px;
  }

  div.mblogReadButton a.mblogReadButton:hover {
    background-color: white;
    color: rgb(125, 125, 125);
    cursor: pointer;
  }

  div.mreadText {
    margin-top: -5%;
  }

  .mobileHomeImage {
    visibility: visible;
    width: 100%;
  }

  .MindexHands {
    width: 100%;
    height: auto;
  }
  section.mobileShowBlogList {
    width: 95%;
  }

  /************************************/
  .mobileHomeImage {
    visibility: visible;
    width: 100%;
  }

  .MindexHands {
    width: 100%;
    height: auto;
  }
  .contactInfo2 {
    display: none;
  }
  img.webRef1Img {
    width: 100%;
    height: auto;
  }
  .Web_Nav_Bar {
    margin: 0 auto;
    list-style-type: none;

    padding: 5%;

    text-align: center;
    margin-top: -4%;
    margin-left: 60%;

    display: grid;
    grid-template-rows: 50px 50px;
    grid-template-columns: 90px 90px 90px;
    column-gap: 3px;
    row-gap: 1px;

    font-size: 20px;
    position: relative;
  }

  .dTableHolder {
    width: 90%;
    overflow-x: auto;
    border-style: solid;
    border-width: 1px;
    margin-left: 5%;
  }

  .artDisplay {
    display: block;
    width: 100%;
    height: 100%;
    padding: 5%;
  }
  img.wireframeImg {
    width: 80%;
    height: auto;
  }

  ul.palette {
    width: 100%;
    margin-left: 30%;
  }
  .mobileHideBlogList {
    display: none;
  }
  .artContentHide {
    display: none;
  }
  .mobileView {
    width: 90%;
    display: contents;
    margin-left: 10%;
  }

  body.bArt {
    overflow: scroll;
    overflow: visible;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  h4.artBookTitle {
    font-weight: lighter;
    text-align: center;
    font-size: 50px;
    color: white;
    position: absolute;
    display: block;
    width: 100%;
    margin-top: 5%;
    background-color: black;
    padding: 0%;
    z-index: 999;
  }

  div.artBook1 {
    width: 100%;
  }

  nav.mNav {
    width: 50%;
  }

  section.mobileShowBlogList {
    width: 95%;
  }

  ol.mblogList {
    margin: auto;
    width: 100%;
    margin-top: -7%;
    padding: 3%;
  }
  .mblogItem {
    display: block;
    border-radius: 3px;
    background-color: #deddee;
    list-style-type: none;
    width: 90%;
    height: 50%;
    padding: 0;
  }
  h3.mblogItemTitle {
    font-weight: lighter;
    padding: 1%;
    font-size: 20px;
  }

  h4.mblogDate {
    font-weight: normal;
    font-size: 15px;
    padding: 1%;
    margin-top: -2%;
  }
  h5.mblogDescription {
    font-weight: normal;
    font-size: 15px;
    font-style: italic;
    padding: 0%;
    text-align: center;
    margin-top: -4%;
  }

  div.mblogReadButton a.mblogReadButton {
    /*float: right;*/

    width: 93px;

    font-weight: lighter;
    margin-right: 90%;
    margin-left: 80%;
    margin-top: -3%;
    padding: 1%;
    display: block;
    background-color: rgb(116, 114, 145);

    border-radius: 3px;
    text-decoration: none;
    color: white;

    height: 15px;

    text-align: center;

    font-size: 15px;
  }

  div.mblogReadButton a.mblogReadButton:hover {
    background-color: white;
    color: rgb(125, 125, 125);
    cursor: pointer;
  }

  div.mreadText {
    margin-top: -5%;
  }
}

@media (max-width: 780px) {
  a.referenceAccess {
    width: 30%;
  }

  a.blogReturn {
    width: 30%;
  }

  a.referenceAccess:hover {
    width: 30%;
  }

  a.blogReturn:hover {
    width: 30%;
  }
}

.nextButton {
  padding: 20px;
  display: flex;
  flex-direction: row;
  margin-left: 20%;
}

a.blogButs {
  background-color: #c4c3d0;
  color: black;
  padding: 4px;
  margin: 4px;
  font-weight: lighter;
  border-radius: 3px;
}

a.blogButs:hover {
  background-color: black;
  color: #c4c3d0;
  cursor: pointer;
}

h4.carouselContent {
  font-weight: lighter;
  font-size: 40px;
  /*text-align: center;*/
}

.creationsBoxes {
  border-radius: 8px;
  width: 60%;
  text-indent: 10px;
  text-align: center;
}

.refCenter {
  margin: 0 auto;
}

.inspoImage {
  width: 20%;
  margin: 0 auto;
}

.inspoImage2 {
  width: 30%;
  margin: 0 auto;
}

.inspoImage3 {
  width: 10%;
  margin: 0 auto;
  border-radius: 50%;
}

.inspoText {
  width: 70%;
  margin: 0 auto;
}

a.hov:hover {
  cursor: pointer;
}

.lang {
  font-size: 25px;
}

.onPage {
  background-color: black;
  color: #c4c3d0;
}

.dIntro {
  text-align: center;
}