/*
=====================================================================
*   Woo v1.0 Layout Stylesheet
*   url: styleshout.com
*   05-02-2014
=====================================================================

   TOC:
   a. General and Common Styles
   b. Header Styles
   c. Hero Section
   d. Interview Section
   e. Pricing Section
   f. Screenshots Section
   g. Call To Action Section
   h. Global Section
   i. Subscribe Section
   j. Entry
   k. Footer
   l. lightbox

   todo: check bug in mobile z-index

===================================================================== */

/* ------------------------------------------------------------------ */
/* a. General and Common Styles
/* ------------------------------------------------------------------ */

body { background: #181d21; font-family: "メイリオ", Meiryo,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS ゴシック","MS Gothic",sans-serif; }

.section-head {
  	padding: 0 4%;
   text-align: center;
}
.section-head h1 {
   font: 20px/36px 'montserrat-bold', sans-serif;
   color: #333;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   margin-bottom: 12px;
}

/* for css animations */
.show { opacity: 1; }
.js #mc_embed_signup input[type="email"],
.js #mc_embed_signup input[type="submit"] {
   opacity: 0;
}


/* ------------------------------------------------------------------ */
/* b. Header Styles
/* ------------------------------------------------------------------ */

header {
   height: 54px;
   width: 100%;
   background: #13171B;
   position: fixed;
   left: 0;
   top: 0;
   z-index: 990;
}

/* header logo */
header .logo {
   margin-left: 36px;
   margin-right: 20px;
   margin-top: 13px;
   float: left;
   width: auto;
   z-index: 991;

   /* add position relative since z-index only applies to
   elements that have been given an explicit position */
   position: relative;
}
header .logo a {
   display: block;
   margin: 0;
	padding: 0;
	border: none;
	outline: none;
   width: 135px;
   height: 16px;
}

/* header social */
header .header-social {
	font-size: 20px;
   font-weight: normal;
   line-height: 48px;
   color: #424a56;
   margin: 0 10px 0 0;
   padding: 0;
   float: right;
}
header .header-social li {
   display: inline-block;
   margin-right: 20px;
}
header .header-social li a { color: #fff; }
header .header-social li a:hover { color: #11ABB0; }

header .header-social .button {

}
header .header-social a.button {
   padding:6px 20px;
}
header .header-social a.button:hover {
   color:#fff;
   background-color:#14D0D6;
}


/* primary navigation
--------------------------------------------------------------------- */
#nav-wrap, #nav-wrap ul, #nav-wrap li, #nav-wrap a {
	 margin: 0;
	 padding: 0;
	 border: none;
	 outline: none;
}

/* nav-wrap */
#nav-wrap {
   font: 11px 'montserrat-regular', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   float: left;
}

/* hide toggle button */
#nav-wrap > a { display: none; }

ul#nav {
   min-height: 54px;
   width: auto;

   /* left align the menu */
   text-align: left;
}
ul#nav li {
   position: relative;
   list-style: none;
   height: 54px;
   display: inline-block;

}

/* Links */
ul#nav li a {

   /* 8px padding top + 8px padding bottom + 38px line-height = 54px */
   display: inline-block;
   padding: 8px 8px;
   line-height: 38px;
	text-decoration: none;
   text-align: left;
   color: #58687A;

	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}
ul#nav li a:hover { color: #fff; }
ul#nav li a:active { background-color: transparent !important; }
ul#nav li.current a { color: #fff; }


/* ------------------------------------------------------------------ */
/* c. Hero Section
/* ------------------------------------------------------------------ */

#hero {
   padding-top: 66px;
   background: #23292f url(../images/main2.jpg);
   background-size:contain;
   background-position:center 54px;
   overflow: hidden;
}
#ryo #hero {
   background: #23292f url(../images/ryo/main.jpg);
   background-size:cover;
   background-position: center top;
}
#hero p,  {
   text-align:left;
   color:#666;
   position:absolute;
   bottom:10px;
}
#tetsuro #hero {
   background: #23292f url(../images/tetsuro/main.jpg);
   background-size:cover;
   background-position: center top;
}
#aya #hero {
   background: #23292f url(../images/aya/main.jpg);
   background-size:cover;
   background-position: center top;
}

@media (max-width:475px) {
   #ryo #hero {
      background-position: 50% top;
   }
   #tetsuro #hero {
      background-position: 60% top;
   }
   #aya #hero {
      background-position: 70% top;
   }

}

#symbol {
   margin-bottom:30px;
}

/* For high-res devices */
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

	#hero {
		background: #23292f url(img/hero-bg_@2X.png);
		background-size: 200px 200px;
	}
}

#hero .row { max-width: 1040px; }

/* Hero Text */
.hero-text {
	color: #a9bcca;
   width: 83%;
   text-align: center;
   margin: 30px auto 24px auto;
}
.hero-text h1 {
   font: 40px/1.2em 'montserrat-regular', sans-serif;
   color: #fff;
   padding: 0;
   margin: 0;
   text-shadow: 0px 1px 4px rgba(0, 0, 0, .2);
}
.hero-text h1 span,
.hero-text a { color: #11ABB0; }
.hero-text p {
   font: 16px/30px 'opensans-regular', sans-serif;
   padding: 0;
   margin: 12px 8% 0;
   text-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
}

/* Hero Image */
.hero-image {
   width: 100%;
   margin: 30px auto 0;
}
.hero-image img {
   vertical-align: bottom;
   display: block;
   margin:auto;
}

/* Hero CTA Buttons */
#hero .buttons {
   text-align: center;
   margin: 0 0 18px 0;
}
#hero .buttons .button {
   font: 14px/24px 'montserrat-bold', sans-serif;
   text-transform : uppercase;
   letter-spacing: 2px;
}
#hero .buttons .trial {
   background: #f64b39;
   margin-right: 30px;

   -webkit-animation-delay: 10s;
      -moz-animation-delay: 10s;
       -ms-animation-delay: 10s;
        -o-animation-delay: 10s;
   -webkit-animation-iteration-count: 3;
      -moz-animation-iteration-count: 3;
}
#hero .buttons .trial:hover { background: #F86A5A; }
#hero .buttons .learn-more {}


/* ------------------------------------------------------------------ */
/* d. Interview Section
/* ------------------------------------------------------------------ */

#features {
   background: #fff;
   padding-top: 96px;
   padding-bottom: 78px;
   overflow: hidden;
}

#features h2 {
   font-size:22px;
   margin:0 10px 40px;
   font-weight:bold;
   /*font-family:"メイリオ";*/
}

#features .section-head {
   padding:0;
}
#features .feature {
   margin-top: 30px;
   margin-bottom: 54px;
}
#features .right {
   padding-left: 32px;
   float: right;
}
#features .left {
   padding-right: 32px;
   float: left;
}
#features h3 {
   font: 16px/24px ;
   font-weight: bold;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #222;
}
#features .black {
   background-color:#000;
   color:#fff;
}
#features .black h1 {
   /*background-color:#000; */
   background-color:#fff;
   padding:0 0 40px;
   /*color:#fff;*/
}
#features .black h3 {
   color:#aaa;
   font-weight:bold;
   /*font-family:メイリオ;*/
   margin-bottom:20px;
   text-align:left;
}
#features .black h3 strong {
   color:#fff;
   font-size:20px;
}
#features .black h3 span {
   font-size:12px;
   font-weight:normal;

}
#features .black p {
   /*line-height:1.3;*/
   text-align:left;
}
#features p {
   line-height:22px;
}

.fluid-video-wrapper { margin-top: 18px; }



/*----------------------------------------------*/
/*	e. Member Section
/*----------------------------------------------*/

#member {
	background: #F7F7F7;
   padding-top: 107px;
   padding-bottom: 77px;
   border-top: 1px solid #F0F0F0;
   border-bottom: 1px solid #F0F0F0;
   text-align: center;
}
#member .price-block {
   background: #fff;
   border: 1px solid #E6E6E6;
   text-align: center;
   margin-bottom: 36px;
}
.plan-title {
  	font: 15px/30px 'montserrat-regular', sans-serif;
  	padding: 30px 20px 6px 20px;
   margin-bottom: 0px;
  	text-align: center;
   text-transform: uppercase;
   letter-spacing: 2px;
}
.plan-title img {
   width:200px;
   border-radius: 50%;
   display: block;
   margin:0 auto;
}
.plan-title .fa {
  	display: block;
  	margin-bottom: 6px;
   font-size: 26px;
}
.plan-price {
	/*font-family: 'montserrat-bold', sans-serif;*/
   font-size: 30px;
   color: #333;
	padding: 6px 30px 6px 30px;
   margin-bottom: 0;
	text-align: center;
   letter-spacing: .5px;
}
.plan-price span {
	/*font-family: 'opensans-light', sans-serif;*/
	font-size: 15px;
	color: #999;
	display: block;
	margin-top: 0;
}

p.features {
   margin:12px;
}

ul.features {
   margin: 12px 0 0 0;
   list-style: none;
}
ul.features li {
   line-height: 39px;
   margin-bottom: 0;
}
ul.features li:nth-child(odd) { }
ul.features li:nth-child(even) { }

.plan-sign-up {
  	padding: 24px 15px;
   margin: 0;
   text-align: center;
}
.plan-sign-up .button {
   font: 13px/24px 'montserrat-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 2px;
}


/* ------------------------------------------------------------------ */
/* c. Screenshots
/* ------------------------------------------------------------------ */

#culture {
   background: #fff url(img/grey.png);
   padding-top: 96px;
   padding-bottom: 120px;
}

/* For high-res devices */
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

   #culture {
      background: #fff url(img/grey_@2X.png);
      background-size: 397px 322px;
   }

}

/* Portfolio Content */
#screenshots-wrapper .columns { padding: 0; }
.item .item-wrap {
   background: #fff;
   overflow: hidden;
   position: relative;

   -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.item .item-wrap a {
   display: block;
   cursor: pointer;
}

/* overlay */
.item .item-wrap .overlay {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;

	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);

   -webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;

   background: url(img/overlay-bg.png) repeat;
}
.item .item-wrap .link-icon {
   display: block;
   color: #fff;
   height: 30px;
   width: 30px;
   font-size: 18px;
   line-height: 30px;
   text-align: center;

   opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);

   -webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;

   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -15px;
   margin-top: -15px;
}
.item .item-wrap img {
   vertical-align: bottom;

   -webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

/* on hover */
.item:hover .overlay {
	opacity: 1;
	-moz-opacity: 1;
	filter:alpha(opacity=100);
}
.item:hover .link-icon {
   opacity: 1;
	-moz-opacity: 1;
	filter:alpha(opacity=100);
}
.item:hover .item-wrap img {
   -moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}


/* ------------------------------------------------------------------ */
/* g. Call To Action Section
/* ------------------------------------------------------------------ */

#call-to-action {
   background: #23292F;
   padding-top: 72px;
   padding-bottom: 48px;
}
#call-to-action h1 {
   font: 18px/24px 'montserrat-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 3px;
   color: #fff;
}
#call-to-action h1 span { display: none; }
#call-to-action .header-col h1:before {
   font-family: 'FontAwesome';
   content: "\f093";
	padding-right: 18px;
	padding-top: 6px;
	font-size: 72px;
   line-height: 72px;
   text-align: center;
   float: right;
   color: #EBEEEE;
}
#call-to-action .action { margin-top: 18px; }
#call-to-action .action .button { text-align: center; }
#call-to-action h2 {
   font: 28px/36px 'montserrat-bold', sans-serif;
   color: #EBEEEE;
   margin-bottom: 12px;
}
#call-to-action h2 a {
   color: inherit;
}
#call-to-action p {
   color: #697B8B;
   font-size: 17px;
   padding-right: 5px;
}
#call-to-action p span {
	/*font-family: 'opensans-semibold', sans-serif;*/
	color: #A9B5C0;
}


/* ------------------------------------------------------------------
/* h. Global
/* ------------------------------------------------------------------ */

#global {
   background: #10999E url(img/escheresque.png);
   padding-top: 112px;
   padding-bottom: 66px;
   position: relative;
   min-height: 198px;
   width: 100%;
   overflow: hidden;
   text-align: center;
}

/* For high-res devices */
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

	#global {
		background: #10999E url(img/escheresque_@2X.png);
		background-size: 46px 29px;
	}

}

#global .quote-left,
#global .quote-right {
   position: absolute;
   top: 50%;
   color: #fff;
   font-size: 40px;
   margin-top: -25px;
}
#global .quote-left { left: 5%; }
#global .quote-right { right: 5%; }

#global .text-container {
   width: 86%;
   margin: 0 auto;
   color:#fff;
}

#global h1 {
   font: 20px/36px 'montserrat-bold', sans-serif;
   color: #6AECF0;
   text-transform: uppercase;
   letter-spacing: 2px;
   margin-bottom: 36px;
}

/*	Blockquotes */
#global blockquote {
   margin: 0 0px 30px 0px;
   padding-left: 0;
   position: relative;

}
#global blockquote:before { content: none; }
#global blockquote p {
   font-style: normal;
   color: #fff;
   padding: 10px 0;
   font-size: 12px;
   /*line-height: 42px; */
   margin:0;
   text-align:center;
   line-height:1.4;
   /*background-color:rgba(0,0,0,0.5); */
   /*display: block;*/
   width:100%;
   /*position:absolute;
   bottom:0;*/
}
#global blockquote cite {
   display: block;
   font-size: 12px;
   font-style: normal;
   line-height: 18px;
   color: #fff;
}
#global blockquote cite:before { content: "\2014 \0020"; }
#global blockquote cite a,
#global blockquote cite a:visited { color: #8B9798; border: none }

/* Flex Slider
/* ------------------------------------------------------------------ */

/* Reset */
.flexslider a:active,
.flexslider a:focus  { outline: none; }
.slides,
.flex-control-nav,
.flex-direction-nav { margin: 0; padding: 0; list-style: none; }
.slides li { margin: 0; padding: 0;}

/* Necessary Styles */
.flexslider {
   position: relative;
   zoom: 1;
   margin: 0;
   padding: 0;
}
.flexslider .slides { zoom: 1; }
.flexslider .slides > li { position: relative; }

/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; }
/* Suggested container for slide animation setups. Can replace this with your own */
.flex-container { zoom: 1; position: relative; }




/* Clearfix for .slides */
.slides:before,
.slides:after {
   content: " ";
   display: table;
}
.slides:after {
   clear: both;
}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child { display: block; }

/* Slider Styles */
.slides { zoom: 1; }
.slides > li {
   /*margin-right: 5px; */
   overflow: hidden;
}

/* Control Nav */
.flex-control-nav {
   width: 100%;
   text-align: center;
}
.flex-control-nav li {
   margin: 0 6px;
   display: inline-block;
   zoom: 1;
   *display: inline;
}
.flex-control-paging li a {
   width: 12px;
   height: 12px;
   display: block;
   background: #ddd;
   background: rgba(255, 255, 255, .3);
   cursor: pointer;
   text-indent: -9999px;
   border-radius: 20px;
   box-shadow: inset 0 0 3px rgba(255, 255, 255, .3);
}
.flex-control-paging li a:hover {
    background: #CCC;
    background: rgba(255, 255, 255, .7);
}
.flex-control-paging li a.flex-active {
    background: #fff;
    background: rgba(255, 255, 255, .9);
    cursor: default;
}


/* ------------------------------------------------------------------ */
/* i. Subscribe Section
/* ------------------------------------------------------------------ */

#subscribe {
   background: #23292F;
   padding-top: 96px;
   padding-bottom: 66px;
   overflow: hidden;
   text-align: center;
}

#subscribe a, #subscribe a:visited  { color: #fff; }
#subscribe a:hover, #subscribe a:focus { color: #11ABB0; }

#subscribe h1 { color: #fff; }
#subscribe p {
   color: #7A7A7A;
   text-align: center;
   padding: 0;
}

/* mailchimp signup form */
#mc_embed_signup {
   background: none;
   clear: both;
   display: block;
   margin: 6px auto 30px auto;
   width: 70%;
  	text-align: center;
}
#mc_embed_signup:before,
#mc_embed_signup:after {
    content: " ";
    display: table;
}
#mc_embed_signup:after {
    clear: both;
}
#mc_embed_signup input[type="submit"] {
   float: right;
   height: 60px;
   margin: 0;
   padding: 0 20px;
   font-size: 16px;
   line-height: 60px;
   width: 47%;
}
#mc_embed_signup input[type="email"] {
   display: inline;
   float: left;
   height: 60px;
   margin: 0;
   padding: 18px 20px;
   font-size: 18px;
   line-height: 24px;
   /*font-family: 'montserrat-regular',sans-serif;*/
   width: 47%;
   text-align: center;
}


/* ------------------------------------------------------------------ */
/* j. Entry
/* ------------------------------------------------------------------ */

#entry {
   padding:60px 0;
   background-color:#15181B;
   color:#fff;
}
#entry .buttons {
   text-align:center;
}



/* ------------------------------------------------------------------ */
/* k. Footer
/* ------------------------------------------------------------------ */

footer {
   padding-top: 84px;
   margin-bottom: 60px;
   color: #3c4753;
   font-size: 13px;
   line-height: 24px;
   position: relative;
}

footer a, footer a:visited { color: #0A6567; }
footer a:hover, footer a:focus { color: #fff; }

footer .info { padding-right: 85px; }

footer .footer-logo a {
   display: block;
   margin-bottom: 12px;
   margin-top: 12px;
   margin-left: 3px;
}
footer .footer-logo a img {
   height: auto;
   width: 204px;
}

footer .right-cols .columns {
   padding-right: 5px;
   padding-left: 5px;
   width: 33.33333%; ;
}
footer .right-cols .columns p { margin-bottom: 6px; }

footer h3 {
   font: 13px/24px 'opensans-semibold', sans-serif;
   margin-bottom: 0;
   font-weight: normal;
   color: #fff;
   text-transform: uppercase;
   letter-spacing: 1px;
}
footer h3:before {
   font-family: 'FontAwesome';
	margin: 0 0 6px 3px;
	font-size: 30px;
   line-height: 48px;
   text-align: left;
   color: #738291;
   display: block;
}
footer h3.address:before { content: "\f041"; }
footer h3.social:before { content: "\f0c0"; }
footer h3.contact:before { content: "\f0e0"; }

footer ul {
   margin: 0;
   padding: 0;
}
footer ul li {
   margin: 0;
   line-height: 24px;
}
footer ul li a,
footer ul li a:visited { color: #3c4753; }
footer ul li a:hover,
footer ul li a:focus { color: #fff; }

/* copyright */
footer .copyright {
   margin: 0;
   padding: 0 18px;
   clear: both;
}

/* Go To Top Button */
#go-top {
	position: absolute;
	top: -24px;
   left: 50%;
   margin-left: -30px;
   text-align: center;
   z-index: 889;
}
#go-top a {
	text-decoration: none;
	border: 0 none;
	display: block;
	width: 60px;
	height: 60px;
	background: #525252;

	-webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;

   color: #fff;
   font-size: 21px;
   line-height: 60px;
 	border-radius: 100%;
}
#go-top a:hover { background: #0F9095; }


/* ------------------------------------------------------------------ */
/* l. lightbox
/* ------------------------------------------------------------------ */

#imagelightbox {
   cursor: pointer;
   position: fixed;
   z-index: 995;
   -ms-touch-action: none;
   touch-action: none;
   -webkit-box-shadow: 0 0 3.125em rgba( 0, 0, 0, .3 ); /* 50 */
   -moz-box-shadow: 0 0 3.125em rgba( 0, 0, 0, .3 ); /* 50 */
   box-shadow: 0 0 3.125em rgba( 0, 0, 0, .3 ); /* 50 */
}

/* activity indication */
#imagelightbox-loading,
#imagelightbox-loading div { border-radius: 50%; }
#imagelightbox-loading {
   width: 2.5em; /* 40 */
   height: 2.5em; /* 40 */
   background-color: #444;
   background-color: rgba( 0, 0, 0, .5 );
   position: fixed;
   z-index: 999;
   top: 50%;
   left: 50%;
   padding: 0.625em; /* 10 */
   margin: -1.25em 0 0 -1.25em; /* 20 */
   -webkit-box-shadow: 0 0 2.5em rgba( 0, 0, 0, .3 ); /* 40 */
   -moz-box-shadow: 0 0 2.5em rgba( 0, 0, 0, .3 ); /* 40 */
   box-shadow: 0 0 2.5em rgba( 0, 0, 0, .3 ); /* 40 */
}
#imagelightbox-loading div {
   width: 1.25em; /* 20 */
   height: 1.25em; /* 20 */
   background-color: #fff;

   -webkit-animation: imagelightbox-loading .5s ease infinite;
   -moz-animation: imagelightbox-loading .5s ease infinite;
   -o-animation: imagelightbox-loading .5s ease infinite;
   animation: imagelightbox-loading .5s ease infinite;
}

@-webkit-keyframes imagelightbox-loading {
	from { opacity: .5; -webkit-transform: scale( .75 ); }
	50% { opacity: 1; -webkit-transform: scale( 1 ); }
	to { opacity: .5; -webkit-transform: scale( .75 ); }
}
@-moz-keyframes imagelightbox-loading {
	from { opacity: .5; -moz-transform: scale( .75 ); }
	50% { opacity: 1; -moz-transform: scale( 1 ); }
	to { opacity: .5; -moz-transform: scale( .75 ); }
}
@-o-keyframes imagelightbox-loading {
	from { opacity: .5; -o-transform: scale( .75 ); }
	50% { opacity: 1; -o-transform: scale( 1 ); }
	to { opacity: .5; -o-transform: scale( .75 ); }
}
@keyframes imagelightbox-loading {
	from { opacity: .5; transform: scale( .75 ); }
	50% { opacity: 1; transform: scale( 1 ); }
	to { opacity: .5; transform: scale( .75 ); }
}

/* lightbox overlay */
#imagelightbox-overlay {
   background-color: #383838;
   background-color: rgba( 0, 0, 0, .8 );
   position: fixed;
   z-index: 994;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}

/* close button */
#imagelightbox-close {
   position: fixed;
   z-index: 999;
   top: 2.5em; /* 40 */
   right: 2.5em; /* 40 */
}

#imagelightbox-close i {
	display: block;
	background: #fff;
	padding: 10px;
	border-radius: 100%;

	-webkit-box-shadow: 0 0 2.5em rgba( 0, 0, 0, .5 ); /* 40 */
	-moz-box-shadow: 0 0 2.5em rgba( 0, 0, 0, .5 ); /* 40 */
	box-shadow: 0 0 2.5em rgba( 0, 0, 0, .5 ); /* 40 */
}
a#imagelightbox-close { color: #333; }
a#imagelightbox-close:hover, a#imagelightbox-close:focus { color: #11ABB0; }

/* lightbox caption */
#imagelightbox-caption {
	text-align: center;
	color: #fff;
	background-color: #000;
	position: fixed;
	z-index: 999;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.625em; /* 10 */
}

#imagelightbox-loading,
#imagelightbox-overlay,
#imagelightbox-close,
#imagelightbox-caption {
	-webkit-animation: fade-in .25s linear;
	-moz-animation: fade-in .25s linear;
	-o-animation: fade-in .25s linear;
	animation: fade-in .25s linear;
}

@-webkit-keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@-moz-keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@-o-keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}


#ryo h2, #tetsuro h2, #aya h2 {
   margin:50px 0;
   text-align: center;
}
#ryo h3, #tatsuro h3, #aya h3 {
   border-bottom:1px dotted #555;
   margin:50px 0 30px;
}

@media only screen and (max-width: 41.250em) { /* 660 */

	#container	{ width: 100%; }
	#imagelightbox-close	{
		top: 1.25em; /* 20 */
		right: 1.25em; /* 20 */
	}
   #symbol {
      width:35%;
   }
   #ryo h3, #tatsuro h3, #aya h3 {
      margin:0px 0 30px;
   }

}


._50f7 {
   color:#fff !important;
}
._pup {
   color:#a9b6cf !important;
}