/*
author: Kotaro Abe
http://kotaroabe.com/
*/

@font-face {
	font-family: Brown;
	src: url("fonts/Brown-Light.otf") format("opentype");
   	font-style: normal;
  	font-weight: 200;
}
@font-face {
	font-family: Brown;
	src: url("fonts/Brown-Regular.otf") format("opentype");
   	font-style: normal;
  	font-weight: 400;
}
@font-face {
	font-family: Brown;
	src: url("fonts/Brown-Bold.otf") format("opentype");
   	font-style: normal;
  	font-weight: 700;
}

html {
	font-size: 62.5%;
}
body {
	background: #fdfdfd;
	font-family: Brown, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  	font-weight: Bold;
	font-size: 2.4vh;
	text-align: left;
	line-height: 3.2vh;
	letter-spacing: 0.07vh;
	color: #111;
}
ul {
  list-style-type: none;
}
img, iframe {
	max-width: 100%;
	height: auto;
	display: block;
}
#top_space {
	width: 100%;
	height: 80px;
}

div#header {
	position: relative;
	z-index: 10;
	margin-top: 40px;
}

@media screen {
body>div#header {
}
}




/* HERE IS FOR THE INFO SECTION */
.sidenav {
	color: #111;
    height: 100vh; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 11; /* Stay on top */
    top: 0;
    left: 0;
/*	background-color: #4cc38f;*/
    background-color: #F0F0F0;
    /*padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */

    overflow: hidden;
}
/* The navigation menu links */
.sidenav a {
    color: #111;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: #ddd;
}
.sidenav .closebtn {
	color: #111;
	font-weight: 200;
    position: absolute;
    top: 1.3rem;
    right: 1rem;
    font-size: 3rem;
	z-index: 99;
}
.profile {
	position: absolute;
	width: 80%;
    margin: 0 auto;
	z-index: 2;
	visibility: visible;
}
.who {
	position: absolute;
	font-weight: 400;
	color: #111;
	margin-top: 1rem;

	text-align: left;
	line-height: 2.7vh;
	width: 75%;
	margin: 0 auto;
    left: 50%;
    top: 3rem;
    transform: translate(-50%, 0%);

	opacity: 1;
}
p.who {
	font-weight: 200;
	margin-top: 1rem;

	text-align: left;
	line-height: 2.7vh;
	width: 80%;
	margin: 0 auto;
}
p.who span.left {
	text-align: right;
}
p.who span.b {
	font-weight: 700;
}
p.who span.r {
	font-weight: 400;
}
p.who span.white {
	background-color: #fff;
	padding: 3px 3px 2px 3px;
}
p.who a {
	text-shadow: 0.5px 0.5px 1.5px #fff;
}
.content {
	height: 90vh;
	overflow: auto;
	top: 9vh;
}





/* HERE IS FOR CONTACT MENU SECTION */
ul {
  list-style-type: none;
}
li {
	width: auto;
	left: 2vw;
/*	top: 2.5vw;*/
	position: fixed;
	font-weight: 200;
	text-align: left;
	color: #111;
	display: block;
	text-shadow: 1px 1px 1px #fff;
	margin-top: 0rem;
}
ul li:nth-of-type(0) {
/*
	transform-origin: left top;
	-ms-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
*/
}
ul li:nth-of-type(1) {
	right: 10vw;
/*	top: 2.5vw;*/
	font-weight: 200;
	text-align: right;

/*
	transform-origin: right top;
	-ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
*/
}
li span {
	border-bottom: 1px solid currentColor; /* Or whatever color you want */
    text-decoration: none;
}
li span:hover {
	text-decoration: none;
}
.navSocial {
	width: auto;
	position: fixed;
	font-weight: 200;
	right: 10vw;
	text-align: right;
	line-height: 2.7vh;

	-webkit-transform: translate(calc(10vw - 2vw), -0.2vh);
        -ms-transform: translate(calc(10vw - 2vw), -0.2vh);
        transform: translate(calc(10vw - 2vw), -10.2vh);

	z-index: 11;
}





#white {
/*
	position: fixed;
	width: 100%;
	height: 100%;
	margin-top: 0rem;
	background-color: transparent;
	z-index: -1;
*/
}





/* HERE IS FOR PROJECT PICS */
#wrapper {
	z-index: 2;
    width: 80vw;
    margin: 0 auto;
}
.item {
    display: inline-block;
    background: transparent;
    padding: 0;
    margin: 1vw 0 5vw;
    width: 100%;
	height: auto;
	overflow: hidden;
}

.item :hover {
}

.item img{
	opacity: 1;
	display: block;

	z-index: 1;
}

.item :hover img{

	opacity: 1;

	z-index: 100 !important;
}

@media only screen and (min-width: 700px) {
    .container {
		    -moz-column-gap: 6vw;
	    	-webkit-column-gap: 6vw;
		    column-gap: 6vw;

        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
		.five, .six, .seven, .eight {
			margin: 120px 0 0 0;
		}
		.six {
			margin: 120px 0 0 0;
		}

	.content {
		height: 85vh;
		overflow: auto;
		top: 14vh;
	}
}

@media only screen and (min-width: 2200px) {
	.container {
	    -moz-column-gap: 2.5vw;
    	-webkit-column-gap: 2.5vw;
	    column-gap: 2.5vw;
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
	}

	.item {
	    margin: 1vw 0 5vw;
	}

	.two {
			margin: 0px 0px 0 0;
	}

	.content {
		height: 90vh;
		overflow: auto;
		top: 9vh;
	}
}


p.year {
	font-weight: 200;
	text-align: left;
	color: #111;
	display: block;
	text-shadow: 1px 1px 1px #fff;

	-webkit-transform: translateY(2.7vh);
        -ms-transform: translateY(2.7vh);
        transform: translateY(2.7vh);
}
p.name {
	font-weight: 200;
	text-align: right;

	color: #111;
	display: block;
	text-shadow: 1px 1px 1px #fff;
	margin-top: 0;
}
.item img{
	opacity: 1;
	display: block;
	-o-transition:.3
		s ease-in-out;
  -ms-transition:.2s ease-in-out;
  -moz-transition:.2s ease-in-out;
  -webkit-transition:.2s ease-in-out;
  transition:.2s ease-in-out;
	-webkit-transform: translateY(-2vh);
        -ms-transform: translateY(-2vh);
        transform: translateY(-2vh);

	z-index: 1;
}
.item :hover img{
	-webkit-transform: translateY(2vh);
        -ms-transform: translateY(2vh);
        transform: translateY(2vh);

	-webkit-filter: grayscale(30%); /* Safari 6.0 - 9.0 */
	    filter: grayscale(30%);
	z-index: 100 !important;
}





/* FROM HERE ON, THESE ARE ALL ABOUT THE CONTENTS somehow */
a {
	color: #222;
	text-decoration: none;
	line-height: 0px;
}
body {
	margin: 0% 0% 0% 0%;
	line-height: 0px;
	color: #222;
	background: rgb(255,255,255);
}
p {
	color: #222;
}
iframe {
	height: 80vw;
	width: 45vw;
}

div#footer {
	z-index: 10;
	height: auto;
	width: 100%;
	background-color: transparent;

  	font-weight: 200;
	font-size: 1.6vh;
	text-align: left;
	line-height: 2.16vh;
	letter-spacing: 0.056vh;
	color: #666;
	text-align: center;
	padding: 5rem 0 1rem 0;

}

.logo {
	width: 144px;
	position: fixed;
	left: calc(10vw - 8px);
	top: 40px;
	z-index: -100;

	-webkit-animation:spin 7s linear infinite;
-moz-animation:spin 7s linear infinite;
animation:spin 7s linear infinite;

/* filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%); */
	fill: #0000ff !important;
}

.logo svg path{
	fill: #0000ff !important;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

p.title {
	z-index: -1;
	color: #000000;
	font-weight: 700;
	position: absolute;
	top: 0.6vh;
	left: 10vw;
	width: 90vw;
	margin: 0;
}

p.subtitle {
	z-index: -1;
	color: #CBCFD3;
	font-weight: 700;
	position: absolute;
	top: 4vh;
	left: 10vw;
	width: 90vw;
	margin: 0;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

p.title span {
	font-weight: 200;

}
p.title a {
	color: #111;
}
p.title a:hover {
	-o-transition:.2s ease-in-out;
  -ms-transition:.2s ease-in-out;
  -moz-transition:.2s ease-in-out;
  -webkit-transition:.2s ease-in-out;
  transition:.2s ease-in-out;
}
p.space {
	line-height: 10rem;
	margin: 0;
}
p.text {
	font-weight: 400;
	text-align: left;
	display: block;
	text-shadow: 1px 1px 1px #fff;
	margin-top: 2rem;

	line-height: 2.7vh;

    width: 80vw;
    margin: 0 auto;
}
.column {
	column-count: 3;
}
img {
	width: 80vw;
	margin: 0 auto;
	padding: 0;
	vertical-align: bottom;
}
iframe {
	width: 80vw;
	height: 45vw;
}
p.cap {
	padding-right: 50%;
	text-align: center;

	font-weight: 400;
	line-height: 2.7vh;

	margin-left: auto;
	margin-right: auto;
}
p.ref {
	font-weight: 200;
	line-height: 2.9vh;

	padding-left: 50%;
	margin-left: auto;
	margin-right: auto;

	-webkit-transform: translateY(-4.75vh);
        -ms-transform: translateY(-4.75vh);
        transform: translateY(-4.75vh);
}
p.ref1 {
	font-weight: 200;
	line-height: 2.9vh;

	padding-right: 50%;
	margin-left: auto;
	margin-right: auto;
}










/*MEDIA QUERY*/
@media only screen and (max-width : 740px) {
body, .navSocial {
	font-size: 2.7vh;
	line-height: 3.5vh;
	letter-spacing: 0.035vh;
	color: #111;
}

div#header {
	z-index: 10;
	/*
	  Here to change the amount of height from the header to the very top
	*/
	margin-top: 24px;
}


#wrapper {
    width: 90vw;
    margin: 0 auto;
}

img {
	width: 90vw;
	margin: 0 auto;
	padding: 0;
	vertical-align: bottom;
}
iframe {
	width: 90vw;
	height: 50.625vw;
}
	.who {
		padding-top: 1vh;
	}
.content {
	height: 83vh;
	overflow: auto;
	top: 15vh;
}
p.title {
	font-weight: 700;
	left: 5vw;
	top: 1.6vh;
	width: 66%;
	margin: 0;
	padding-bottom: 5rem;
}
	p.title a {
		font-weight: 700;
	}
p.name {
	margin-top: 2vh;
}
p.year {
	margin-bottom: 3vh;
}
p.space {
	line-height: 1.25em;
}
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 11; /* Stay on top */
    top: 0;
    left: 0;
    /*padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */

    overflow: scroll;
}
.sidenav .closebtn {
    position: absolute;
    top: 1.5rem;
    font-size: 3rem;
	width: 100%;
	text-align: center;
	right: 0;
}
.item img{
/*
	-webkit-filter: blur(0px);
  filter: blur(0px);
*/

	-webkit-transform: translateY(0rem);
        -ms-transform: translateY(0rem);
        transform: translateY(0rem);
}
.item :hover img{
/*
	-webkit-filter: blur(0px);
  filter: blur(0px);
*/

	-webkit-transform: translateY(0rem);
        -ms-transform: translateY(0rem);
        transform: translateY(0rem);
}
li {
	top: 32px;
	right: 5vw;
	text-align: right;
}
.logo {
	top: 0px;
	position: absolute;
	left: calc(5vw - 8px);
}
ul li:nth-of-type(1) {
  top: 0px;
  position: absolute;
	right: 5vw;
	/* -webkit-transform: translateY(3.7vh);
        -ms-transform: translateY(3.7vh);
        transform: translateY(3.7vh); */
}
	p.who {
		line-height: 3.8vh;
	}
.navSocial {
	-webkit-transform: translate(10vw, -2.2vh);
        -ms-transform: translate(10vw, -2.2vh);
        transform: translate(10vw, -0.8vh);
}
p.cap {
	padding: 0;
	text-align: left;
}
p.ref {
	line-height: 3.8vh;
	padding-left: 0%;
	width: 100%;
	margin-left: auto;
	margin-right: auto;

	-webkit-transform: translateY(0vh);
        -ms-transform: translateY(0vh);
        transform: translateY(0vh);
}
p.ref1 {
	line-height: 3.8vh;

	padding-right: 0%;
	margin-left: auto;
	margin-right: auto;
}
}