@font-face {
	font-family: lime;
    font-weight: 300;
	src: local('lime'), url('lime.pcf') format('pcf');
}


@font-face {
	font-family: lemon;
    font-weight: 300;
	src: local('lemon'), url('lemon.pcf') format('bitmap');
}
@font-face {
	font-family: pixel;
	src: local('Minecraftia Regular'), url('Minecraftia.ttf') format('truetype');
}

@font-face {
        font-family: smd;
        font-weight: 200;
        src: local('Yanone Kaffeesatz ExtraLight'), url('yano2.ttf') format('truetype'), url('yano2.woff') format('woff');
}

@font-face {
        font-family: smd;
        font-weight: 300;
        src: local('Yanone Kaffeesatz Light'), url('yano3.ttf') format('truetype'), url('yano3.woff') format('woff');
}
@font-face {
    font-family: frank;
    src: Local('Franklin Gothic Medium'), url('/res/frank.ttf') format('truetype')
}



.backstretch img {
	opacity: 0.1;
	filter: alpha(opacity=10);
}
/*html {
	color: #444;
	background: #060606;
	background-image: url(/res/logowallpaper.png);
	background-repeat: no-repeat;
	background-attachment:fixed;
	background-size: 100%;
	background-position:center;
	font-family: sans-serif;
}
*/


hr {
	width: 50%;
	margin-left:auto;
	margin-right:auto;
	color: #111111;
	opacity: 0.5;
}

#head,
#wrap {
	-border: 1px solid #f0f;
	max-width: 800px;
	margin: 0 auto;
}
#head {
	position: relative;
	padding: 0em 0;
	font-weight: 100;
	font-family: smd, sans-serif;
	margin-bottom: 0em;
}
#head h1 {
	font-weight: 300;
	padding: .1em .3em;
	margin: -.3em 1em 0 0;
	line-height: 1em;
	font-size: 9em;
	display: inline-block;
	text-shadow: 0 1px 2px #888;
	border-radius: 0 0 24px 24px;
}
#head span {
	position: absolute;
	display: inline-block;
	font-size: 1.5em;
	line-height: 1.8em;
	border-left: 1px solid #bbb;
	padding-left: 1.67em;
	left: 50%;
	top: 18%;
}
#head strong {
	color: #38a;
	font-size: 1.1em;
	font-weight: 300;
}
#head br+*+strong,
#head br+*+strong+strong {
	/* because I can */
	color: #8a3;
}
#head em {
	display: inline-block;
	position: relative;
	top: -.1em;
	font-style: normal;
	font-size: .7em;
}
#head em:before { font-size: .8em; content: '(' }
#head em:after { font-size: .8em; content: ')' }
#wrap {
	margin-top: 2em;
	position: relative; /*mtrd*/
}

#textlinks a {
	transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
}

#banner {
	display: block;
	margin: 0 auto;
}
#banbox {
	margin: 6em 0;
	background: -moz-linear-gradient(left,#f7f7f7,#888,#f7f7f7);
}
#wrapper2 {
	position: absolute;
	margin-top: 10%;/* half of #content height*/
	left: 0;
	width: 100%;
	background-color: transparent;
}
#textlinks, .overle:hover{
	text-align: center;
	padding: 2em 0 1em 0;
	z-index: 50%;
	position: relative;
}
#textlinks a, .overle:hover{
	color: #000000;
	opacity: 1;
	font-size: 1.5em;
	text-decoration: none;
	border-width: 1px;
	font-family: smd;
	font-weight: 300;
	padding: 0 .5em;
	margin-left: -1px;
	z-index: 3 !important;
	transition: opacity 200ms ease-in 100ms;
}
#textlinks a:last-child {
	border-right: none;
}
#textlinks a:first-child {
	border-left: none;
}
#wrap:hover+#textlinks {
	display: none !important;
}
#textlinks a:hover {
	/*color: #330101;*/
    color: #566A6E;
	opacity: 1;
}

#wrapper3 {
    position: absolute;
    bottom: 25px;
    right: 5%;
    height: auto;
}
#wrapper3 a {
    opacity: 0.1;
    transition: opacity 500ms ease-in 100ms;
      -webkit-filter: blur(30px); /* Chrome, Opera, etc. */
  filter: url('blur.svg#blur'); /* Older FF and others - http://jordanhollinger.com/media/blur.svg */
  filter: blur(30px); /* Firefox 35+, eventually all */
}
#wrapper3 a:hover {
    opacity: 1;
      -webkit-filter: blur(0); /* Chrome, Opera, etc. */
  filter: url('blur.svg#blur'); /* Older FF and others - http://jordanhollinger.com/media/blur.svg */
  filter: blur(0); /* Firefox 35+, eventually all */
}

#wrapper4 {
    position: absolute;
    bottom: 25px;
    left: 5%;
    height: auto;
}
#wrapper4 a {
    opacity: 0.1;
    transition: opacity 500ms ease-in 100ms;
      -webkit-filter: blur(30px); /* Chrome, Opera, etc. */
  filter: url('blur.svg#blur'); /* Older FF and others - http://jordanhollinger.com/media/blur.svg */
  filter: blur(30px); /* Firefox 35+, eventually all */
}
#wrapper4 a:hover {
    opacity: 1;
      -webkit-filter: blur(0); /* Chrome, Opera, etc. */
  filter: url('blur.svg#blur'); /* Older FF and others - http://jordanhollinger.com/media/blur.svg */
  filter: blur(0); /* Firefox 35+, eventually all */
}

body { 
	background: url(/res/websitebg-2.png) fixed;
    background-size: 100%;
	background-repeat: repeat;
    background-position: center center;
}

.wrapper {
height: auto !important;
margin: auto auto;
text-align:center;
}
.footer, .push {
	height: 142px;
	text-align:center;
	position:absolute;
	font-family: lime;
	margin-left:auto;
	margin-right:auto;
	left:50%;
	bottom:0;
}

div.img
  {
  margin:2px;
  height:auto;
  width:auto;
  float:left;
  text-align:left;
  background-color: #222222;
  }
div.img img text
  {
  display:inline;
  margin:3px;
        color: #AAA;
        font-size: 1.5em;
        text-decoration: none;
        border: 1px solid #2A2A2A;
        border-width: 0 1px;
        font-family: smd;
        font-weight: 300;
        padding: 0 1em;
	width: 66%;
	margin: 0 auto;
          opacity: 1;
          padding: .5em 1em;
          border-radius: 16px;
  }

#div.img a:last-child {
        border-right: none;
}
#div.img a:first-child {
        border-left: none;
}
#wrap:hover+#div.img {
        display: none !important;
}
div.img a:hover img
  {
          background: #181818;
          color: #330101;
          opacity: 1;
          padding: .5em 1em;
          border-radius: 16px;
          box-shadow: 0 2px 8px #ccc;
div.desc
  {
  text-align:left;
  font-weight:normal;
  font
  margin:2px;
  }
div.hr {
        background: #181818;
        color: #330101;
        opacity: 1;
        border-radius: 16px;
        box-shadow: 1 2px 8px #ccc;
        }

pre {
    color: #808080
}
.kara h1, .kara h2, .kara h3 {
				color: #AAAAAA;
				float: left;
}
.kara p {
        font-size: .9em;
        margin: 1em 0;
}
.kara .c {text-align:center}
.kara *:first-child {margin-top:.5em}
.kara *:last-child {margin-bottom:.5em}
.kara ul {
        margin-left: 40px;
}
.kara blockquote {
        background: #181818;
        border: 1px solid #222;
        border-width: 1px 0;
        margin: 1em -.5em;
        padding: .5em 1em;
}
.kara .tty {
        margin: -.66em;
        white-space: pre;
        font-family: monospace;
}
.kara code {
        margin: .3em;
        color: #cc0;
}

.col-md-6, .col-md-3 {
     height: 200px;
     z-index: 1;
}

.rowseparator {
     height: 20px;
}

.img1 {
     background-image: url("/res/yuuka.png");
     background-position: left top;
     background-repeat: no-repeat;
     border-radius: 3px;
     height: 100%;
     opacity: 0.15;
     transition: opacity 500ms ease-in 100ms;
     z-index: 3 ! important;
}

.img1:hover, .img2:hover, .img3:hover, .img4:hover {
     opacity: 0.9;
}

.img2 {
     background-image: url("/res/koishi.png");
     background-position: center bottom;
     background-repeat: no-repeat;
     border-radius: 3px;
     height: 100%;
     opacity: 0.15;
     transition: opacity 500ms ease-in 100ms;
}

.img3 {
     background-image: url("/res/youmu.png");
     background-position: left bottom;
     background-repeat: no-repeat;
     border-radius: 3px;
     height: 100%;
     opacity: 0.15;
     transition: opacity 500ms ease-in 100ms;
}

.img4 {
     background-image: url("/res/satori.png");
     background-position: left top;
     background-repeat: no-repeat;
     border-radius: 3px;
     height: 100%;
     opacity: 0.15;
     transition: opacity 500ms ease-in 100ms;
}

.img5 {
     background-image: url("/res/kogasa.png");
     background-position: left bottom;
     background-repeat: no-repeat;
     border-radius: 3px;
     height: 100%;
     opacity: 0.15;
     transition: opacity 500ms ease-in 100ms;
}

.number1 {
     height: 200px;
     padding-left: 120px ! important;
     padding-right: 10px ! important;
     padding-top: 0px ! important;
}

.number2 {
     height: 200px;
     padding-left: 10px ! important;
     padding-right: 120px ! important;
     padding-top: 0px ! important;
}

.number3 {
     height: 200px;
     padding-left: 120px ! important;
     padding-right: 10px ! important;
     padding-top: 0px ! important;
}

.number4 {
     height: 200px;
     padding-left: 10px ! important;
     padding-right: 120px ! important;
     padding-top: 0px ! important;
}

.number5 {
     height: 250px;
     padding-left: 120px ! important;
     padding-right: 10px ! important;
     padding-top: 0px ! important;
}


h3 {
     background-color: rgba(0, 0, 0, 0.5);
     border-radius: 3px;
     border: 3px solid #000000;
     height: 200px;
     line-height: 200px ! important;
     overflow: hidden;
}

h3:hover {
     opacity: 1;
}

a {
     border-radius: 3px;
}

a:hover {
     border-radius: 3px;
     opacity: 1;
     text-decoration: none ! important;
     z-index: 4;
}

a:hover > h3 {
     background-color: rgba(0, 0, 0, 0.4);
}

.textdarkbg {
     background-color: rgba(0, 0, 0, 0.3);
     border-radius: 5px;
     transition: width 750ms ease-in-out 250ms;
}

h1, .h1, h2, .h2, h3, .h3 {
     margin-top: 0px ! important;
}

.midvert {
     position: relative;
     top: 50%;
     transform: translateY(-50%);
}

.pagecont {
     bottom: 0px;
     height: 100%;
     left: 0px;
     position: absolute;
     right: 0px;
     top: 0px;
     transform-style: preserve-3d;
}

.mobileview {
     color: rgba(255, 255, 255, 0.5);
     min-height: 100px;
     padding-top: 100px;
}

h2 {
     min-height: 100px;
}

.gay {
     display: inline-block;
     height: 38px;
     position: relative;
     top: -237px;
     width: 0%;
     z-index: -5;
}

.floatyfloaty {
     bottom: 0px;
     left: 0px;
     position: relative;
     right: 0px;
     top: 0px;
  	 color: rgba(255, 255, 255, 0.5);
}

h3:hover > .textdarkbg {
     transition: width 750ms ease-in-out 0s;
     width: 100%;
     z-index: -5;
}

a:hover > .img1 {
     opacity: 0.75;
}

a:hover > .img2 {
     opacity: 0.75;
}

a:hover > .img3 {
     opacity: 0.75;
}

a:hover > .img4 {
     opacity: 0.75;
}

a:hover > a:hover, a:focus {
     color: #ffffff ! important;
     transition: color 750ms ease-in-out 0s;
}