@font-face {
  font-family: 'Macondo';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/macondo-v5-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Macondo'), local('Macondo-Regular'),
       url('fonts/macondo-v5-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/macondo-v5-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/macondo-v5-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/macondo-v5-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/macondo-v5-latin-regular.svg#Macondo') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Macondo Swash Caps';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/macondo-swash-caps-v4-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Macondo Swash Caps'), local('MacondoSwashCaps-Regular'),
       url('fonts/macondo-swash-caps-v4-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/macondo-swash-caps-v4-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/macondo-swash-caps-v4-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/macondo-swash-caps-v4-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/macondo-swash-caps-v4-latin-regular.svg#MacondoSwashCaps') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Harmattan';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/harmattan-v1-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Harmattan'), local('Harmattan-Regular'),
       url('fonts/harmattan-v1-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/harmattan-v1-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/harmattan-v1-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/harmattan-v1-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/harmattan-v1-latin-regular.svg#Harmattan') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Bellota';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/Bellota-Regular-webfont.eot'); /* IE9 Compat Modes */
  src: local('Bellota'), local('Bellota-Regular'),
       url('fonts/Bellota-Regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Bellota-Regular-webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/Bellota-Regular-webfont.woff') format('woff'), /* Modern Browsers */
       url('fonts/Bellota-Regular-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/Bellota-Regular-webfont.svg#Bellota') format('svg'); /* Legacy iOS */
}
/* yuji-syuku-regular - latin */
@font-face {
  font-family: 'Yuji Syuku';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/yuji-syuku-v1-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/yuji-syuku-v1-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/yuji-syuku-v1-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/yuji-syuku-v1-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/yuji-syuku-v1-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/yuji-syuku-v1-latin-regular.svg#YujiSyuku') format('svg'); /* Legacy iOS */
}


html,body,div,ul,li,h1,h2,h3,h4,h5,h6,
p,img,mark,small,section,header,nav,main {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: normal;
}

body {
}

header {
position: absolute;
top: 10px;
left: 2%;
z-index: 60;
}

h1 {
font: normal 40px 'Macondo Swash Caps', serif;
}

h1 span {
font: bold 24px 'Macondo Swash Caps', serif;
}

h1 span.less {
font: bold 24px 'Macondo', serif;
}

header a {
display: block;
font: normal 16px 'Yuji Syuku', serif;
color: #333333;
text-decoration: none;
letter-spacing: -1px;
}

header h2, h3 {
font: bold 14px 'Macondo', serif;
color: #000000;
z-index: 50;
position: absolute;
}


main {
font: normal 1em 'Macondo', serif;
position: absolute;
width: 100%;
height: 100%;
}

main#home-page {
overflow: hidden;
}

@media screen and (min-width: 500px) {

header {
position: absolute;
top: 8%;
left: 2%;
z-index: 60;
}
h1 {
font: normal 44px 'Macondo Swash Caps', serif;
}

h1 span {
font: bold 28px 'Macondo Swash Caps', serif;
}

h1 span.less {
font: bold 28px 'Macondo', serif;
}


}




section#tab-bars {
position: absolute;
width: 500%;
height: 100%;
}

section#tab-bars article {
position: absolute;
font-size: 0;
left: 0;
height: 18%;
word-wrap: none;
}

section#tab-bars article h2, section#tab-bars article h3 {
font: bold 20px 'Yuji Syuku', serif;
line-height: 1;
display: none;
}

section#tab-bars article#one h2 {
top: 50px;
left: 50px;
text-align: center;
}

section#tab-bars article#two h2 {
top: 30px;
left: 50px;
color: #ffffff;
}

section#tab-bars article#two h3 {
color: #ffffff;
top: 50px;
left: 70px;
}

section#tab-bars article#three h2 {
top: 60px;
left: 45px;
color: #ffffff;
}

section#tab-bars article#three h3 {
top: 50px;
left: 40px;
display: none;
}

section#tab-bars article#four {
top: 12%;
left: 8%;
}

section#tab-bars article#one {
top: 33%;
left: 6%;
}
section#tab-bars article#two {
top: 54%;
left: 6%;
}

section#tab-bars article#three {
top: 75%;
left: 4%;
}

@media screen and (min-width: 500px) {

section#tab-bars article#four {
top: 10%;
left: 9%;
}

section#tab-bars article#one {
top: 32%;
left: 7%;
}

section#tab-bars article#two {
top: 54%;
left: 6%;
}

section#tab-bars article#three {
top: 76%;
left: 4%;
}


}


section#tab-bars article img {
display: inline-block;
height: 100%;
width: auto;
}

section#tab-bars article img.svg-block {
z-index: 20;
height: 100%;
position: absolute;
top: -2px;
height: 105%;
}

section#tab-bars article#one img.svg-block {
left: -1%;
}

section#tab-bars article#two img.svg-block {
left: -4%;
}

section#tab-bars article#three img.svg-block {
left: -5%;
}

section#tab-bars article a img#underline {
display: none;
}

section#tab-bars article a:hover img#underline {
display: inline-block;
}

nav {
font: bold 24px 'Yuji Syuku', serif;
letter-spacing: -1px;
color: #333333;
}

nav a {
padding: 10px 22px 10px 22px;
text-decoration: none;
color: #333333;
}

nav a:hover {
text-decoration: underline;
}

section#portfolio {
height: 100%;
width: 100%;
overflow-x: hidden;
}


section#portfolio h1 {
font-size: 32px;
padding: 20px 22px 10px 22px;
}

section#portfolio h2 {
font: bold 18px 'Yuji Syuku', serif; 
letter-spacing: -1px;
position: relative;
margin: 35px 0px 35px 25px;
}

section#portfolio .scroll-box {
display: flex;
overflow-x: auto;
white-space: nowrap;
margin: 20px 0px 10px 0px;
font-size: 0px;
scrollbar-color: #bbbbbb #eeeeee;
align-items: center;
}

section#portfolio .scroll-box:hover {
scrollbar-color: #77cc77 #eeeeee;
}

@media screen and (min-width: 600px) {
section#portfolio .scroll-box { margin: 20px 0px 10px 10px;}
}


section#portfolio .scroll-box article {
display: inline-block;
position: relative;
background-color: #eeeeee;
padding-bottom: 12px;
}


section#portfolio .scroll-box article img {
display: inline-block;
height: 300px;
}

section#portfolio .scroll-box article p {
position: absolute;
display: block;
text-align: left;
bottom: 17px;
left: 11px;
color: #ffffff;
font: bold 14px 'Yuji Syuku', serif; 
letter-spacing: -1px;
}

section#portfolio .scroll-box div.textblob {
display: flex;
align-items: center;
font: bold 14px 'Yuji Syuku', serif; 
font-size: 14px;
letter-spacing: -1px;
color: #000000;
height: 300px;
background-color: #ffffff;
text-align: center;
padding: 0px 20px 0px 20px;
}


section#portfolio .scroll-box div.textblob div#buffer {
margin-right: -14px;
margin-left: 4px;
}

section#portfolio .scroll-box article p#dark {
color: #000000;
}

section#portfolio .scroll-box article p#darkbusy {
color: #000000;
background-color: #ffffffaa;
}

section#portfolio .scroll-box article p.high {
position: absolute;
top: 2px;
}

section#portfolio a.popup {
position: fixed;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
top: 0;
left: 0;
width: 100%;
height:100%;
opacity: 0;
pointer-events: none;
background-color: #00000077;
z-index: 1000;
} 

section#portfolio a.popup::backdrop {
}

section#portfolio a.popup img {
height: auto;
width: auto;
max-height: 100%;
max-width: 100%;
}

section#portfolio a.popup:target {
opacity: 1;
pointer-events: auto;
}


section#lh {
text-align: center;
}

section#lh article {
display: block;
position: relative;
}

section#lh img {
max-width: 100%;
}

section#lh a {
text-decoration: none;
color: #000000;
}

section#lh a:hover {
text-decoration: underline;
}

section#lh h1 {
font: bold 22px 'Yuji Syuku', serif;
color: #000000;
margin-top: 20px;
}


section#lh h2 {
font: bold 16px 'Yuji Syuku', serif;
}

section#lh h2 a {
font: bold 16px 'Yuji Syuku', serif;
text-decoration: none;
color: #663333;
}

section#lh a#left-arrow {
position: absolute;
left: 10%;
padding: 20px 0px;
font-size: 30px;
}

section#lh a#right-arrow {
position: absolute;
right: 10%;
padding: 20px 0px;
font-size: 30px;
}

section#lh article p {
font: normal 16px 'Yuji Syuku', serif;
}

section#lh article p img {
height: 100px;
width: auto;
margin-bottom: 10px;
}


.goaway {
position: absolute;
display: none;
opacity: 0;
font-size: 0px;
}