*,
*:before,
*:after {
  box-sizing: border-box;
  font-family: "Sawarabi Gothic";
}
html {
  margin-right: 0 !important;
}
p {
  margin: 0;
}
body {
  overflow-y:auto;
  -ms-overflow-style:none;
}
body::-webkit-scrollbar{
  display:none;
}
#press_body .mfp-close {
  display: block !important;
  width: auto !important;
  cursor: pointer;
  height: auto !important;
  top: 15px !important;
  opacity: 1;
  color: black !important;
  line-height: 1 !important;
}
#press_body .mfp-close:hover {
  opacity: 1;
}
.nt-addition {
  position: absolute;
  width: 250px;
  top: 45%;
  right: -280px;
  transform: translateY(-50%);
}
.nt-padding {
  width: 90%;
  max-width: 750px;
  margin: 100px auto;
}
.nt-padding2 {
  width: 94%;
  margin: 100px auto;
}
.no-side {
  width: 100% !important;
  margin: 100px 0 !important;
  margin-top: 80px !important;
}
.nt-presslist,
.nt-storylist {
  display: block;
  text-align: left;
  width: 100%;
}
.nt-storylist {
  width: 90%;
  margin: 0 auto;
}
.nt-presslist li,
.nt-storylist li {
  display: inline-block;
  width: 32%;
  margin-left: 1%;
  margin-bottom: 60px;
}
.nt-presslist li:first-child,
.nt-storylist li:nth-child(3n+1) {
  margin-left: 0%;
}
.nt-presslist li span,
.nt-storylist li span {
  display: block;
  position: relative;
  overflow: hidden;
  padding-top: 71.6%;
  height: 0;
  width: 100%;
}
.nt-storylist li span {
  padding-top: 55%;
}
.nt-storylist li h5,
.nt-storylist li p {
  text-align: center;
  margin-bottom: 0px;
}
.nt-presslist li img,
.nt-storylist li img {
  position: absolute;
  width: 100%;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.nt-storylist li span:hover {
  opacity: 0.8;
}
.img_excep img {
  width: auto !important;
  height: 100% !important;
  max-width: none;
}   
.nt-pressitem,
.nt-storyitem {
  width: 100%;
  height: auto;
  margin-top: 60px;
}
.nt-pressitem h4,
.nt-storyitem h4,
.nt-sub_title,
.nt-sub_expl {
  text-align: left;
}
.nt-sub_title {
  margin-bottom: 10px;
}
.nt-pressitem h4 {
  margin-bottom: 40px;
  color: #c0b160;
  font-weight: 500;
}
.nt-colored {
  background-image: url("https://www.pineapple-man.com/wp-content/uploads/2018/06/textile_paper_1.jpg");
  background-repeat: repeat;
  padding: 120px 0%;
}
.nt-proj_detail {
  width: 90%;
  display: table;
  margin: 50px auto;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 80px 0px;
}
.nt-proj_detail li {
  display: table-cell;
}
.nt-proj_detail li:last-child img {
  width: 85%;
}
.nt-proj_detail img {
  width: 100%;
}
.nt-proj_detail span {
  width: 100%;
  text-align: center;
  display: block;
  margin-top: 40px;
  font-size: 14px;
}
.nt-proj_head,
.nt-story_head {
  display: inline-block;
  position: relative;
}
.nt-proj_head h1,
.nt-story_head h1 {
  background-color: white;
  display: inline-block;
  font-size: 24px;
  font-weight: 700;
  padding: 10px 100px;
  text-align: center;
}
.nt-proj_head p,
.nt-story_head p {
  text-align: center;
  font-size: 16px;
}
.nt-story_head span {
  text-align: left;
  color: #cc9900;
}
.nt-presitem h4:first-of-type {
  margin-bottom: 80px;
}
.nt-slide {
  position:  absolute;
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.nt-slide li {
  display: table-cell;
  padding: 5px;
  vertical-align: middle;
}
.nt-slide li img {
  width: 100%;
  height: auto;
}
.nt-slide li h5 {
  font-size: calc(6px + 0.8vw);
  margin: 10px 0;
}
.nt-arleft {
  content: "\03c";
  position: absolute;
  left: 5%;
  color: #808080;
  font-weight: 900;
  font-size: 36px;
  top: 50%;
  transform: translate(-50%,-50%);
}
.nt-arright {
  position: absolute;
  right: 5%;
  color: #808080;
  font-weight: 900;
  font-size: 36px;
  top: 50%;
  transform: translate(-50%,-50%);
}
.nt-arright:hover,
.nt-arleft:hover {
  opacity: 0.6;
  cursor: pointer;
}
.nt-maketrig {
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
}
.nt-tellno {
  margin-top: 0 !important;
}
.nt-tellno li {
  display: block;
}
.nt-coffeemug,
.nt-ipad,
.nt-board,
.nt-pen {
  position: absolute;
  display: none;
}
.nt-board img,
.nt-ipad img {
  position: relative;
  width: 100%;
  vertical-align: top;
  height: auto;
}
.nt-coffeemug {
  width: 16%;
  left: 1.5%;
  bottom: -12%;
}
.nt-board {
  width: 44%;
  left: 5%;
  top: 0%;
}
.nt-ipad {
  width: 40%;
  right: 5%;
  top: 15%;
}
.nt-pen {
  width: 40%;
  right: 5%;
  top: 0%;
} 
.nt-more {
  display: block;
  text-align: center;
  width: 300px;
  height: 42px;
  color: #B39D2C;
  box-shadow: 0px 0px 1px 1px white;
  font-weight: 900;
  background-color: rgba(225,225,255, 0.9);
  line-height: 38px;
  border: solid 2px #B39D2C;
  margin: 0 auto;
  margin-top: 20px;
  position: relative;
  max-width: 100%;
}
.underline {
  border-bottom: solid 2px #B39D2C;
  width: auto;
  padding-bottom: 1px;
}
.nt-more:hover {
  opacity: 0.9;
  cursor: pointer;
}
.nt-more2 {
  position: absolute;
  width: 200px;
  right: 5%;
  bottom: 0%;
  z-index: 8;
  transition: all 0.8s ease;
  backface-visibility: hidden;
  max-width: 22%;
}
.nt-more2:hover {
  transform: rotate(30deg);
  opacity: 1 !important;
}
#nt-film a:hover,
#nt-film a img:hover {
  opacity: 1 !important;
}
.nt-projlist {
  width: 100%;
  display: flex;
  max-width: 100%;
  margin: 0 auto;
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  flex-wrap: wrap;
  padding: 0 5%;
}
.nt-projlist li {
  display: inline-block;
  vertical-align: middle;
  flex-basis: 33.333%;
  padding: 0 30px;
}
.nt-projlist li h5 {
  text-align: left;
}
.protrim {
  width: 100%;
  padding-top: 60%;
  position: relative;
  margin: 5px 0;
  display: block;
  overflow: hidden;
}
.protrim img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.proj-logo {
  width: 30%;
  height: auto;
  magin: 0 auto;
}
.svg-inline--fa path {
  fill: #cc9900 !important;
}
.fa-caret-right {
  width: 20px !important;
  height: 20px !important;
  vertical-align: top !important;
}
.fa-caret-right path {
  fill: black !important;
}
.nt-menubar,
.nt-menubar2,
.nt-menubar_res,
.nt-menubar2_res {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  padding: 20px 0;
  background-color: transparent;
  line-height: 40px;
  z-index: 999;
  transition: all 0.8s ease;
}
.nt-menubar2,
.nt-menubar2_res {
  background-color: rgba(255,255,255,0.9);
}
.nt-menusns,
.nt-menusns2,
.nt-menusns_res,
.nt-menusns2_res,
.nt-menuitem,
.nt-menuitem2 {
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  position: absolute;
  margin: 0;
  transition: all 0.8s ease;
}
.nt-menuitem_res,
.nt-menuitem2_res {
  display: block;
  position: absolute;
  background-color: rgba(255,255,255,0.9);
  top: 0;
  width: 100%;
  left: 0;
  transform: translate(0%,-100%);
  transition: all 0.3s linear;
  padding-top: 80px;
  margin: 0;
}
.nt-menuitem_res li,
.nt-menuitem2_res li {
  display: block !important;
  width: 100%;
  padding: 10px 0;
  border-top: solid 1px #cc9900;
}
.nt-menuitem_res li:last-child,
.nt-menuitem2_res li:last-child {
  border-bottom: solid 1px #cc9900;
}
#hamb-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding: 10px;
  height: 40px;
  border-radius: 5px;
  border: solid 1px #cc9900;
}
#hamb-btn svg {
  width: 20px !important;
  height: 20px !important;
  vertical-align: top !important;
  color: #cc9900 !important;
}
.nt-menuitem_res li a,
.nt-menuitem2_res li a {
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size: calc(10px + 1.2vw);
  font-style: italic;
  font-weight: 500;
}
.nt-minilogo,
.nt-minilogo_res {
  position: absolute;
  top: 50%;
  left: 40px;
  transform: translateY(-50%);
  width: 80px;
  height: auto;
  opacity: 1;
  transition: all 0.8s ease;
  z-index: 999;
} 
.nt-minilogo_res {
  max-width: 18%;
}
.nt-menusns,
.nt-menusns_res {
  width: 15%;
  right: 2%;
  top: 20px;
  opacity: 0;
}
.nt-menusns2,
.nt-menusns2_res {
  width: 15%;
  right: 2%;
  top: 20px;
}
.nt-menusns_res,
.nt-menusns2_res {
  width: 35%;
}
.nt-menusns li svg,
.nt-menusns2 li svg {
  width: calc(10px + 0.8vw) !important;
  height: auto !important;
  vertical-align: middle !important;
  filter: drop-shadow(0px 0px 3px white) !important;
}
.nt-menusns_res li svg,
.nt-menusns2_res li svg {
  width: calc(12px + 0.8vw) !important;
  height: auto !important;
  vertical-align: middle !important;
  filter: drop-shadow(0px 0px 3px white) !important;
}
.nt-menuitem {
  width: 62%;
  right: 18%;
  opacity: 0;
}
.nt-menuitem2 {
  width: 62%;
  right: 18%;
}
.nt-movie {
  max-width: none !important; 
}
.nt-movie li {
  width: 20% !important;
  margin: 0 1.5%;
  overflow: hidden;
}
.nt-trim {
  width: 65%;
  padding-top: 90%;
  left: 50%;
  top: 12%;
  transform: scale(1,1) translateX(-50%);
  position: absolute;
  z-index: 5;
  transition: 0.8s all ease;
  transform-origin: left center;
  filter: grayscale(100%);
}
.nt-clearmsk:hover + .nt-trim {
  filter: grayscale(0%);
  opacity: 1;
}
.nt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-left: solid 25px brown;
  border-top: solid 14.4px transparent;
  border-bottom: solid 14.4px transparent;
}
.nt-showing {
  width: 100%;
  height: auto;
  backface-visibility: hidden;
}
.nt-clearmsk {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 7;
}
.nt-posfr {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 6;
}  
.nt-header ul li,
.nt-header2 ul li {
  display: table-cell;
  text-align: center;
  font-family: 'Alegreya Sans SC', sans-serif;
}
.nt-menuitem li:first-child,
.nt-menuitem li:nth-child(7),
.nt-menuitem2 li:first-child,
.nt-menuitem2 li:nth-child(7) {
  border-right: solid 2px #cc9900;
}
.nt-menuitem li a,
.nt-menuitem2 li a {
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size: calc(8px + 0.8vw);
  font-style: italic;
  font-weight: 500;
}
.nt-menuitem li:first-child,
.nt-menuitem li:first-child a,
.nt-menuitem2 li:first-child,
.nt-menuitem2 li:first-child a,
.nt-menuitem_res li:first-child,
.nt-menuitem_res li:first-child a,
.nt-menuitem2_res li:first-child,
.nt-menuitem2_res li:first-child a {
  color: gray;
  font-size: 13px;
}
.nt-center {
  min-height: 100vh;
  position: relative;
}
.nt-header {
  height: 112.5vh;
  width: 100%;
  text-align: center;
  position: relative;
}
.nt-header2 {
  width: 100%;
  text-align: center;
  position: relative;
}
.nt-crossspace {
  position: absolute;
  top: -68.75vh;
  left: 0;
  height: 68.75vh;
  width: 100%;
  background-color: rgba(250,238,183,1);
  z-index: 3;
  text-align: center;
  line-height: 68.75vh;
  overflow: hidden;
}
.nt-filter {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 3;
  background-color: transparent;
  background-image: radial-gradient(rgba(255,255,255,0.3) 30%, transparent 30%), radial-gradient(rgba(255,255,255,0.3) 30%, transparent 30%);
  background-position: 0 0, 5px 5px;
  background-size: 10px 10px;
}
.nt-tell {
  position: absolute;
  top: 50%;
  width: 100%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: white;
  font-weight: 800;
  font-size: calc(16px + 1.2vw);
  font-family: 'EB Garamond', serif;
  z-index: 2;
  transition: all 1s ease;
}
.nt-great {
  position: fixed;
  top: 48.5%;
  width: 100%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: white;
  font-weight: 800;
  font-size: 32px;
  font-family: 'EB Garamond', serif;
  z-index: -1;
  opacity: 0;
  text-align: center;
  transition: all 1s ease;
}
.nt-great img {
  max-width: 85%;
}
.nt-video {
  min-width: 100%;
  height: auto;
  width: auto;
  min-height: 130%;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  left: 50%;
  z-index: -1;
}
.nt-cover {
  height: 100%;
  background: repeating-linear-gradient(90deg, rgba(112,219,112,1), rgba(112,219,112,1) 4%, rgba(112,219,112,0) 4%, rgba(112,219,112,0) 8%);
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  transition: background 1s ease;
}
.nt-title {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: block;
  z-index: 10;
  width: 50%;
}
.nt-title img {
  width: 100%;
  height: auto;
}
.nt-content {
  margin-top: 68.75vh;
}
.nt-section {
  position: relative;
  width: 100%;
}
.nt-scrollbar {
  position: fixed;
  top: 0;
  right: 5px;
  width: 10px;
  height: 100vh;
  z-index: 900;
}
.nt-bar {
  position: fixed;
  width: 10px;
  background: repeating-linear-gradient(45deg, rgba(112,219,112,1), rgba(112,219,112,1) 20%, white 20%, white 40%);
  right: 5px;
}
.nt-prepare {
  width: 100%;
  height: 100%;
  text-align: center;
}
.nt-prepare h2 {
  font-size: 36px;
}
.nt-prepare span {
  display: block;
  position: relative;
  padding: 15px 40px;
  text-align: center;
  margin: 5px auto;
  border-radius: 20px;
  border: solid 1px black;
  width: 250px;
}
.nt-prepare span:before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  border-bottom: solid 10px white;
  border-right: solid 5px transparent;
  border-left: solid 5px transparent;
  z-index: 3;
}
.nt-prepare span:after {
  content: "";
  position: absolute;
  top: -10.5px;
  left: 50%;
  transform: translateX(-50%);
  border-bottom: solid 11px black;
  border-right: solid 5.5px transparent;
  border-left: solid 5.5px transparent;
  z-index: 2;
}
.nt-sec1 {
  height: 268.75vh;
} 
.nt-sec2 {
  height: 175vh;
}  
.nt-sec3 {
  height: 400vh;
}
.nt-sec3-1 {
  padding-top: 0%;
  height: 0;
}
.nt-sec4,
.nt-sec5-1,
.nt-sec8 {
  padding-top: 60%;
  height: 0;
}
.nt-sec4 {
  margin-top: 8%;
}
.nt-sec4-5 {
  padding-top: 40%;
  height: 0;
}
.nt-sec6 {
  padding-top: 173%;
  height: 0;
}
.nt-sec7 {
  padding-top: 90%;
  height: 0;
}
.nt-sec9 {
  padding-top: 45%;
  height: 0;
}
.nt-sec5 {
  padding-top: 84.2%;
  height: 0;
}
.nt-sec5-1 {
  height: auto;
}
.nt-sec_title {
  position: absolute;
  right: 5%;
  text-align: right;
  font-size: calc(6px + 0.8vw);
  z-index: 8;
}
.nt-sec_title h3 {
  font-size: calc(8px + 1.2vw);
}
.nt-proj_title {
  top: 0;
}
.nt-work_title {
  top: 4%;
}
.nt-shop_title h3,
.nt-proj_title h3,
.nt-work_title h3 {
  border-bottom: solid 2px black;
  padding-bottom: 5px;
  display: inline-block;
}
.nt-shop_title {
  top: 0%;
}
.nt-cushion {
  width: 100%;
  padding-top: 35%;
}
.nt-cross {
  background: repeating-linear-gradient(90deg, transparent, transparent 4%, rgba(112,219,112,1) 4%, rgba(112,219,112,1) 8%);
  height: 100vh;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
}
.nt-twitnews {
  width: 100%;
  display: block;
  text-align: center;
  height: 100%;
  z-index: 5;
  position: relative;
}
.nt-update,
.nt-tweet {
  position: absolute;
}
.nt-update {
  width: 60%;
  left: 48%;
  z-index: 8;
  top: 15%;
  transform: translateX(-50%);
}
.nt-tweet {
  width: 78%;
  right: 51.2%;
  z-index: 8;
  top: 12.5%;
  height: 74%;
  transform: translateX(50%);
}
.nt-newslist {
  width: 100%;
}
.nt-newslist h5 {
  text-align: center;
}
.nt-newslist li {
  display: block;
  text-align: left;
}
.nt-newslist li span a {
  font-size: 14px;
  color: #808080;
}
.nt-frame0 {
  position: absolute;
  bottom: -10vh;
  width: 100%;
  height: 100vh;
  background-color: transparent;
  position: absolute;
  left: 0;
  text-align: center;
  transition: all 0.5s ease;
}
.nt-torsotrig {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
}
.nt-news,
.nt-project,
.nt-contact,
.nt-biography,
.nt-film,
.nt-shop,
.nt-work,
.nt-instafeed {
  width: 100%;
  height: 100%;
  padding: 100px 5%;
  position: relative;
  background-color: transparent;
  text-align: center;
}
.nt-work {
  padding: 0;
  z-index: 5;
}
.nt-project {
  z-index: 1;
}
.nt-workitems {
  position: absolute;
  top: 2.5%;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.nt-workitem {
  position: absolute;
  width: 100%;
  left: 0;
  height: 28.9%;
  -webkit-clip-path: polygon(0 18%,100% 0%, 100% 82%, 0 100%);
  clip-path: polygon(0 18%,100% 0%, 100% 82%, 0 100%);
  overflow: hidden;
}
.nt-workitem h1 {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  margin: 0;
  text-align: center;
  width: 100%;
  color: lime;
  font-size: calc(30px + 0.8vw);
  font-weight: 900;
  z-index: 5;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-style: italic;
}
.nt-workitem img {
  position: absolute;
  width: 100%;
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 2;
  filter: grayscale(100%);
  transition: all 0.4s linear;
}
.nt-workitems a:hover,
.nt-workitems a:focus {
  opacity: 1;
}
.nt-workitem:hover > img,
.nt-workitem:focus > img {
  filter: grayscale(0%);
}
.w-film {
  top: 0%;
}
.w-graph {
  top: 23.6%;
}
.w-photo {
  top: 47.3%;
}
.w-web {
  top: 71%;
}
.nt-shop {
  overflow: hidden;
}
.nt-instafeed {
  padding: 0 4%;
  padding-bottom: 100px;
  padding-top: 15%;
  height: auto;
}
#insta-parent {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 50%;
}
#insta-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas: "instf0 instf0 instf1 instf2 instf3 instf3"  "instf0 instf0 instf6 instf6 instf3 instf3"  "instf4 instf5 instf6 instf6 instf7 instf8";
}
.instf {
  border: solid 5px transparent;
}
.nt-instafeed a img {
  min-height: 100% !important;
  width: 100%;
  verticalalign: top;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.nt-instafeed a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.nt-film {
  z-index: 3;
}
.nt-brick {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-image: url("https://www.pineapple-man.com/wp-content/uploads/2018/06/textile-red-brick.png");
  background-repeat: repeat;
  z-index: 2;
  -webkit-clip-path: polygon(0 15%,100% 0%, 100% 85%, 0 100%);
  clip-path: polygon(0 15%,100% 0%, 100% 85%, 0 100%);
}
.nt-bottomtri {
  width: 100%;
  position: absolute;
  top: 20%;
  left: 0;
  height: 80%;
  background-image: url("https://www.pineapple-man.com/wp-content/uploads/2018/06/textile_paper_1.jpg");
  background-repeat: repeat;
  z-index: 2;
  -webkit-clip-path: polygon(0 25%,100% 0%, 100% 100%, 0 100%);
  clip-path: polygon(0 25%,100% 0%, 100% 100%, 0 100%);
}
.nt-filmimg {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0; 
}
.nt-triangle {
  width: 100%;
  position: absolute;
  top: -80%;
  left: 0;
  height: 100%;
  z-index: 2;
  background-image: url("https://www.pineapple-man.com/wp-content/uploads/2018/06/textile_paper_1.jpg");
  background-repeat: repeat;
  -webkit-clip-path: polygon(0 15%,100% 0%, 100% 85%, 0 100%);
  clip-path: polygon(0 15%,100% 0%, 100% 85%, 0 100%);  
}
.nt-biosqr {
  width: 42%;
  background-color: rgba(255,255,255,0.5);
  position: absolute;
  bottom: 20%;
  right: 5%;
  height: auto;
  text-align: center;
  padding: 40px;
  z-index: 3;
  box-shadow: 0px 0px 1px 1px #eeeeee;
}
.nt-biosqr h4 {
  font-size: 20px;
  margin-top: 0;
}
.nt-biosqr p {
  text-align: left;
  font-size: calc(8.5px + 0.4vw);
  font-weight: 700;
  line-height: 2;
  display: block;
  max-height: 450px;
  overflow: auto;
  padding: 10px;
}
.nt-biography img {
  width: 100%;
  height: auto;
  z-index: 1;
}
.nt-bloglist {
  margin-top: 20px;
  margin-bottom: 0;
}
.nt-bloglist li {
  display: block;
  margin: 10px 0;
  font-size: calc(8.5px + 0.4vw);
  text-align: left;
  font-weight: 700;
}
.nt-bloglist li a {
  color: black;
}
.nt-follow {
  position: absolute;
  top: 12%;
  right: 5%;
  border-bottom: solid 2px black;
  color: black;
  padding: 5px 0;
  font-weight: 800;
}  
.nt-biography {
  height: auto !important;
  padding: 0 !important;
}
.nt-contact {
  height: 100% !important;
  padding: 0 !important;
  display: flex;
}
.nt-contactchild {
  display; inline-block;
  vertical-align: bottom;
}
#foot-img {
  flex-basis: 55%;
  height: 100%;
  position: relative;
}
#foot-img img {
  position: absolute;
  bottom: 20px;
  left: 20%;
  transform: translate(-50%,0%);
  height: auto;
  width: 120%;
  z-index: 5;
}
.barcode {
  width: 100px;
  left: 70% !important; 
  bottom: 30px !important;
  transform: translate(0%,0%) !important;
  color: brown;
  z-index: 8 !important;
  position: absolute;
  font-size: 10px;
  margin-top: 5px;
}
.barcode img {
  width: 100% !important;
  height: auto !important;
  display: block;
  position: relative !important;
  transform: translate(0%,0%) !important;
  left: auto !important;
  bottom: auto !important;
}
#foot-contact {
  flex-basis: 45%;
  position: relative;
  text-align: right;
  height: 100%;
  z-index: 5;
}
#foot-contact h3,
#foot-contact h5 {
  text-align: right;
  font-weight: 800;
}
#foot-contact h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: calc(0px + 2vw);
}
#foot-contact h5 {
  margin-top: 25px;
  margin-bottom: 10px;
  font-size: calc(8px + 2vw);
}
#foot-contact span {
  margin-top: 25px;
  font-size: calc(5px + 0.75vw);
  display: inline-block;
}
#info-corner {
  position: absolute;
  bottom: 50px;
  left: 0;
  width: 100%;
  padding-right: 10%;
}  
.nt-torso,
.nt-arm,
.nt-celebrate,
.nt-self {
  position: absolute;
}
.nt-self {
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  max-width: 750px;
  width: 90%;
  padding-top: 598px;
  height: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 1.5s ease;
}
.nt-torso,
.nt-arm,
.nt-celebrate {
  width: 100%;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.nt-shake {
  animation: shake 5s linear 0s normal infinite;
  transform-origin: 0% 30%;
}
@keyframes shake {
  0% {
   transform: rotate(0deg) translate(-50%,-50%);
  }
  40% {
   transform: rotate(20deg) translate(-50%,-50%);
  }
  80% {
   transform: rotate(0deg) translate(-50%,-50%);
  }
  90% {
   transform: rotate(-5deg) translate(-50%,-50%);
  }
  100% {
   transform: rotate(0deg) translate(-50%,-50%);
  }
}
.nt-work-headline {
  opacity: 0;
  text-align: center;
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.nt-life {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
  width: 100%;
}
.nt-typewr {
  position: absolute;
  left: 50%;
  bottom: -10%;
  transform: translate(-50%,50%);
  width: 240px;
  z-index: 10;
  max-width: 35%;
}
.resp-bloglist {
  display: none;
}
.nt-life h3 {
  font-size: calc(18px + 1.8vw);
  text-align: center;
  font-family: 'Lora', serif;
  font-weight: 100;
  margin: 0;
}
.nt-life span {
  font-size: calc(12px + 0.5vw);
  font-family: 'Lora', serif;
}
.nt-undermenu {
  display: block;
  width: 100%;
  margin: 0 auto;
}
.nt-undermenu li {
  display: block;
  text-align: left;
  width: 100%;
}
.nt-undermenu li:first-child,
.nt-undermenu li:last-child {
  margin-bottom: 10px;
}
.nt-frame1,
.nt-frame2,
.nt-frame2-5,
.nt-frame3,
.nt-frame3-1,
.nt-frame4,
.nt-frame5,
.nt-frame6,
.nt-frame7 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.nt-frame1 {
  top: 10vh;
}
.nt-footer {
  width: 100%;
  height: 100px;
  background-image:url("https://www.pineapple-man.com/wp-content/uploads/2017/09/bckg-pineapple-man-1.png");
  background-repeat: repeat;
  text-align: center;
  z-index: 90;
  position: relative;
}
.nt-footer span {
  color: #ffffff;
  font-family: 'Alegreya Sans SC', sans-serif !important;
  font-size: 12px;
  display: inline-block;
  margin-top: 50px;
}
.nt-footer span a {
  color: white;
}
.nt-fixed {
  position: fixed !important;
  width: 100% !important;
}
.nt-hidden {
  display: none !important;
}
.nt-menubar_res,
.nt-menubar2_res {
  display: none;
}
@media screen and (max-width: 1500px) {
  .nt-biosqr p {
    max-height: 400px;
  }
}
@media screen and (max-width: 1300px) {
  .nt-biosqr p {
    max-height: 350px;
  }
}
@media screen and (max-width: 1200px) {
  .nt-biosqr p {
    max-height: 280px;
  }
}
@media screen and (max-width: 1050px) {
  .work-mid_child {
     flex-basis: 50%;
  }
  .mid_pic {
     flex-basis: 50%;
  }
  .nt-biosqr {
     padding: 20px;
  }
  .nt-bloglist {
    bottom: 20px;
    left: 30px;
    margin: 0;
  }
  .nt-typewr {
    bottom: 10%;
  }
  .nt-sec4-5 {
    padding-top: 60%;
  }
  .nt-more2 {
    width: 18%;
  }
}
@media screen and (max-width: 900px) {
  .nt-biosqr {
    width: 48%;
  }
  .nt-bloglist {
    display: none;
  }
  .resp-bloglist {
    display: block;
  }
  .resp-bloglist a {
    color: black;
  }
  .proj-logo {
    width: 40%;
  }
  .nt-projlist li {
    flex-basis: 50%;
  }
  .nt-sec7 {
    padding-top: 180%;
  }
  #foot-contact h5 {
    font-size: calc(16px + 0.8vw);
  }
  .barcode {
    width: 18%;
  }
  #foot-img {
    flex-basis: 60%;
  }
  #foot-contact {
    flex-basis: 40%;
  }
  #info-corner {
    bottom: 30px;
  }
}
@media screen and (max-width: 800px) {
  .nt-undermenu li:first-child,
  .nt-undermenu li:last-child {
    margin-bottom: 4px;
  }
  .nt-biosqr p {
    max-height: 220px;
  }
  .nt-sec4 {
    padding-top: 120%;
  }
  .nt-brick {
    -webkit-clip-path: polygon(0 7.5%,100% 0%, 100% 92.5%, 0 100%);
    clip-path: polygon(0 7.5%,100% 0%, 100% 92.5%, 0 100%);
  }
  .nt-movie li {
    width: 30% !important;
    margin: 10px 1.5%;
  }
  .nt-more2 {
    width: 25%;
  }
  .barcode {
    width: 85px;
  }
}
@media screen and (max-width: 750px) {
  .nt-menubar_res,
  .nt-menubar2_res {
     display: block;
  }
  .nt-menubar,
  .nt-menubar2 {
     display: none;
  }
  .nt-sec9 {
     padding-top: 60%;
  }
}
@media screen and (max-width: 700px) {
  .nt-biosqr p {
    max-height: 150px;
  }
}
@media screen and (max-width: 700px) {
  .nt-biosqr p {
    max-height: 120px;
  }
}
@media screen and (max-width: 550px) {
  #foot-contact h3 {
    font-size: 11px;
  }
  #foot-contact h5 {
    margin-top: 15px;
    margin-bottom: 5px;
  }
  #nt-more {
    font-size: 14px;
    margin-top: 5px;
  }
  #foot-contact span {
    margin-top: 10px;
  }
  .resp-bio,
  .resp-bloglist {
    display: none;
  }
  .nt-biosqr h4 {
    margin-bottom: 5px;
  }
  .nt-projlist {
    top: 55%;
  }
}
@media screen and (max-width: 500px) {
  .nt-projlist li {
    padding: 0 4%;
  }
  .resp-link {
    display: none;
  }
  .nt-projlist {
    top: 58%;
  }
}
@media screen and (max-width: 450px) {
  .nt-sec7 {
    padding-top: 200%;
  }
}
@media screen and (max-width: 400px) {
  .barcode {
    width: 50px;
  }
  .res-cl {
    display: none;
  }
  .nt-biosqr {
    padding: 10px;
    width: 55%;
    bottom: 14%;
  }
  .nt-sec5 {
    padding-top: 89%;
  }
  .nt-projlist li {
    padding: 0 2%;
  }
  .nt-sec7 {
    padding-top: 220%;
  }
  .nt-projlist {
    top: 55%;
  }
}
@media screen and (max-width: 350px) {
  .nt-sec7 {
    padding-top: 250%;
  }
  .nt-biosqr h4 {
    margin-bottom: 20px;
  }
  .nt-biosqr p {
    display: none;
  }
}