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

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

   todo: check bug in mobile z-index

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

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

body { background: #64b5f6; }

.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 {
	width: 100%;
	background: #13171B;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 990;
	padding-top: 10px;
	padding-bottom: 10px;
}

/* header logo */
header .logo { margin-left: 36px; margin-right: 40px; 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: 10px 0 0 0; padding: 0; border: none; outline: none; width: 150px; height: 34px; }

/* header social */
header .header-social { font-size: 20px; font-weight: normal; line-height: 54px; 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; }

/* 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 {
	text-transform: uppercase;
	letter-spacing: 0.03em;
	float: left;
	font-family: 'montserrat-regular', sans-serif;
	font-size: 13px;
	font-weight: bold;
}

/* 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: #f1f1f1;

	-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: #0288d1; }
ul#nav li a:active { background-color: transparent !important; }
ul#nav li.current a { color: #fff; }


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

#hero { padding-top: 66px; overflow: hidden; background: url(../images/header-photo.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 500px; position: relative;  }

/* For high-res devices */
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
#hero { background: url(../images/header-photo.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 500px; position: relative;  }
}

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

/* Hero Text */
.hero-text {
	color: #f1f1f1;
   width: 83%;
   text-align: center;
   margin: 54px auto 24px auto;
}
.hero-text h1 {
   font: 40px/1.2em 'montserrat-regular', sans-serif; 
   color: #f1f1f1;
   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: 0 auto;
}
.hero-image img {
   vertical-align: bottom;
   display: block;
}

/* Hero CTA Buttons */
#hero .buttons { text-align: center; margin-top: 160px; margin-right: 0; margin-left: 0; }
#hero .buttons .button { font: 14px/24px 'montserrat-bold', sans-serif; text-transform : uppercase; letter-spacing: 1px; }
#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 .downlord { background: #f64b39; margin-right: 30px; border: 1px solid #f1f1f1; }
#hero .buttons .downlord:hover { background: #F86A5A; }

#hero .buttons .go-site { background: #35abd7;　margin-right: 30px;　border: 1px solid #f1f1f1; }
#hero .buttons .go-site:hover { background: #54c0e8; }

#hero .buttons .japanese { color: #d94e4e; background: #f2f2f2; margin-right: 30px;  }
#hero .buttons .japanese:hover { background: #eaeaea; }

#hero .buttons .english { color: #d94e4e; background: #1565c0; margin-right: 30px; }
#hero .buttons .english:hover { background: #2b70be; }

#hero .buttons .chinese { color: #ffc400; background: #d13b3b; margin-right: 30px; }
#hero .buttons .chinese:hover { background: #d15050; }

English#hero .buttons .learn-more {}


/* ------------------------------------------------------------------ */
/* d. Features Section
/* ------------------------------------------------------------------ */

#features {
   background: #f8f8f8;
   padding-top: 96px;
   padding-bottom: 78px;
   overflow: hidden;
}
#features .feature {
   margin-top: 30px;
   margin-bottom: 54px;
}
#features .right {
   padding-left: 32px;
   float: right;   
}
#features .left {
   padding-right: 32px;
   float: left;   
}
#features h3 {
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #222;
	font-family: 'montserrat-bold', sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
}
.fluid-video-wrapper { margin-top: 18px; }

.map-wrapper {
	margin-top: 18px;
	height: 700px;
	width: 100%;
}


/*----------------------------------------------*/
/*	e. Pricing Section
/*----------------------------------------------*/

#pricing {
	background: #F7F7F7;
   padding-top: 107px;
   padding-bottom: 77px;   
   border-top: 1px solid #F0F0F0;
   border-bottom: 1px solid #F0F0F0;
   text-align: center;
}
#pricing .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 .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;
}

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;
}

#pricing h3 {
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #222;
	font-family: 'montserrat-bold', sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
}

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

#screenshots {
   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) {

   #screenshots {
      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 {
}


/* ------------------------------------------------------------------ */
/* 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. Testimonials
/* ------------------------------------------------------------------ */

#testimonials {
   background: #f5f5f5 ;
   padding-top: 95px;
   padding-bottom: 66px;
   position: relative;
   min-height: 198px;
   width: 100%;
   height: 100%;
   overflow: hidden;
   text-align: center;
}

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

	#testimonials {
		background: #f5f5f5 ;
		background-size: 46px 29px;
	}
  
}

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

#testimonials .text-container {
   width: 100%;
   margin: 0 auto;
}
#testimonials h1 {
   font: 20px/36px 'montserrat-bold', sans-serif;
   color: #333;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   margin-bottom: 12px;
}

/*	Blockquotes */
#testimonials blockquote {
   margin: 0 0px 30px 0px;
   padding-left: 0;
   position: relative;   
}
#testimonials blockquote:before { content: none; }
#testimonials blockquote p {
   font-family: 'opensans-semibold', sans-serif;
   font-style: normal;
   color: #fff;
   padding: 0;
   font-size: 26px;
   line-height: 42px;   
}
#testimonials blockquote cite {
   display: block;
   font-size: 12px;
   font-style: normal;
   line-height: 18px;
   color: #fff;
}
#testimonials blockquote cite:before { content: "\2014 \0020"; }
#testimonials blockquote cite a,
#testimonials 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; margin-top: 20px;
}

/* 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: 13px; height: 13px; display: block; background: #5c696a; background: #fff; cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; border: 3px solid #c9cbca; webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.flex-control-paging li a:hover { background: #fff; background: #212024); }
.flex-control-paging li a.flex-active { background: #fff; background: #212024; 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. Footer
/* ------------------------------------------------------------------ */

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

footer a, footer a:visited { color: #f3f3f3; }
footer a:hover, footer a:focus { color: #2a6fce; }

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

.footer-logo {
	width: 250px;
	margin-bottom: 10px;
   margin-left: auto;
   margin-right: auto;
}
footer .footer-logo a {
   display: block;
   margin-bottom: 12px;
   margin-top: 12px;
   margin-left: auto;
   margin-right: auto;
}
footer .footer-logo a img {
   height: 57px;
   width: 250px;
}

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: #f5f5f5;
   display: block;
}
footer h3.address:before { content: "\f0f7"; }
footer h3.social:before { content: "\f0e5"; }
footer h3.contact:before { content: "\f1d9"; }

footer ul {
   margin: 0;
   padding: 0;
}
footer ul li {
   margin: 0;
   line-height: 24px;
}
footer ul li a,
footer ul li a:visited { color: #f3f3f3; }
footer ul li a:hover,
footer ul li a:focus { color: #2a6fce; }

/* copyright */
footer .copyright {
   color: #0954b9;
	margin: 0;
	clear: both;
	padding-right: 18px;
	padding-bottom: 0;
	font-size: 13px;
   text-align: center;
}

/* 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: #7cb342; }


/* ------------------------------------------------------------------ */
/* k. 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: 4.25em; /* 40 */
	right: 2.5em; /* 40 */
}

#imagelightbox-close i {	  
	display: block;
	background: #000;
	padding: 10px;
}
a#imagelightbox-close { color: #fff; }
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; }
}

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

	#container	{ width: 100%; }
	#imagelightbox-close	{
		top: 4.25em; /* 20 */
		right: 1.25em; /* 20 */
	}

} 

/* ------------------------------------------------------------------ */
/* Waypoints
/* ------------------------------------------------------------------ */
.wp1, .wp2, .wp3, .wp4, .wp5, .wp6 { visibility: hidden; }
.bounceInLeft, .bounceInRight, .fadeInUp, .fadeInUpDelay, .fadeInDown, .fadeInUpD, .fadeInLeft, .fadeInRight { visibility: visible; }
.delay-05s { animation-delay: 0.5s; -webkit-animation-delay: 0.5s; }
.delay-1s { animation-delay: 1s; -webkit-animation-delay: 1s; }
.wp3 { background: url('../img/iphone-bg.png') no-repeat center center; background-position: 200px 10px; height: 100%; }


/*----------------------------------------------------------------
    Map
----------------------------------------------------------------*/

#map {
	height: 300px;
	background-color: #FFF;
	width: 100%;
}
.map {
	height: 15em;
}

.gm-style > div > div {
 /* Overlay color */
    height: 100%;
}

.gm-style img {
 /* Fix tooltip */
    max-width: none;
}

.gm-style div {
 /* Fix tooltip */
    border-style: none;
}

.gm-style > div.gmnoprint {
    /* display: none; */
}

.gm-style > div > a {
    /* display: none !important; */
}

.infoBox {
    text-align: center;
}

.infobox-inner {
    display: inline-block;
    padding: 6px 14px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background-color: #FFF;
    -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15);
    text-align: center;
    font-weight: 700;
    font-size: 12px;
    font-family: 'Montserrat', sans-serif;
}

.infobox-inner:after, .infobox-inner:before {
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 0;
    height: 0;
    border: solid transparent;
    content: " ";
    pointer-events: none;
}

.infobox-inner:after {
    margin-left: -10px;
    border-width: 10px;
    border-color: rgba(0,0,0,0);
}

.infobox-inner:before {
    margin-left: -10px;
    border-width: 10px;
    border-color: rgba(0,0,0,0);
    border-bottom-color: #fff;
}

.bold, b {
	font-family: opensans-bold, sans-serif;
	font-size: 15px;
	line-height: 20px;
	font-weight: bold;
	color: #666;
}
.text{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #333;
}
.text-mid{
	font-family: opensans-bold, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #333;
}
.text-sm{
	font-family: opensans-bold, sans-serif;
	font-size: 11px;
	font-weight: normal;
}
.text-sm-orange{
	font-family: opensans-bold, sans-serif;
	font-size: 12px;
	font-weight: bold;
	padding-left: 20px;
	color: #ff9100;
}
.text-sm-glay{
	font-family: opensans-bold, sans-serif;
	font-size: 12px;
	font-weight: bold;
	padding-left: 20px;
	color: #999;
}
.text-sm-blue{
	font-family: opensans-bold, sans-serif;
	font-size: 12px;
	font-weight: bold;
	padding-left: 20px;
	color: #2891ea;
}

.text-red{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #0288d1;
}
.text-red-mid{
	font-family: opensans-bold, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #0288d1;
}

.footer-midcol { margin-left: auto; margin-right: auto; }
.footer-midcol ul { text-align: center; padding: 0; }
.footer-midcol li { list-style: none; display: inline-block; margin-right: 5px; }
.footer-midcol li a { opacity: 1; 	-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; }
.footer-midcol li a:hover { opacity: 0.8; }
.youtube-icon { border: 1px solid #ccc; background: url(../images/link-youtube.svg); background-size:100%; height: 72px; width: 210px; display: block; text-indent: -9999px; }
.halsports-icon { border: 1px solid #ccc; background: url(../images/link-halsports.svg); background-size:100%; height: 72px; width: 210px; display: block; text-indent: -9999px; }
.facebook-icon { border: 1px solid #ccc; background: url(../images/link-facebook.svg); background-size:100%; height: 72px; width: 210px; display: block; text-indent: -9999px; }
.gokigen-icon { border: 1px solid #ccc; background: url(../images/icon-gokigen.jpg); background-size:100%; height: 131px; width: 210px; display: block; text-indent: -9999px; }
.book-icon { background: url(../images/halmethod/book.jpg); background-size:100%; height: 273px; width: 210px; display: block; text-indent: -9999px; }

.top-gradient{ 
    height:6px;
    background-image: -webkit-linear-gradient(left,
        #d9534f 20%, 
        #6f5499 20%, 
        #6f5499 40%, 
        #428bca 40%, 
        #428bca 60%,
        #f0ad4e 60%, 
        #f0ad4e 80%, 
        #5cb85c 80%);
  background-image: -moz-linear-gradient(left,
        #d9534f 20%, 
        #6f5499 20%,
        #6f5499 40%, 
        #428bca 40%, 
        #428bca 60%, 
        #f0ad4e 60%, 
        #f0ad4e 80%, 
        #5cb85c 80%);
    background-image: -ms-linear-gradient(left,
        #d9534f 20%, 
        #6f5499 20%, 
        #6f5499 40%, 
        #428bca 40%, 
        #428bca 60%, 
        #f0ad4e 60%, 
        #f0ad4e 80%, 
        #5cb85c 80%);
    background-image: linear-gradient(left,
        #d9534f 20%, 
        #6f5499 20%, 
        #6f5499 40%, 
        #428bca 40%, 
        #428bca 60%, 
        #f0ad4e 60%,
        #f0ad4e 80%, 
        #5cb85c 80%);
    background-size:100% 6px;
    background-position: 50% 100%;
    background-repeat: no-repeat;
    margin: 0 0 20px 0;
}


/*----------------------------------------------------------------
    Background Color Text
----------------------------------------------------------------*/
.glay-text { font-family: opensans-bold, sans-serif; font-size: 17px; line-height: 20px; font-weight: bold; color: #f9f9f9; background-color: #999; padding: 20px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #f4f4f4; }
.blue-text {
	font-family: opensans-bold, sans-serif;
	font-size: 16px;
	line-height: 20px;
	font-weight: bold;
	color: #f9f9f9;
	background-color: #2891ea;
	padding: 17px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #f4f4f4;
}
.orange-text {
	font-family: opensans-bold, sans-serif;
	font-size: 16px;
	line-height: 20px;
	font-weight: bold;
	color: #f9f9f9;
	background-color: #fb8c00;
	padding: 17px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #f4f4f4;
}
.red-text {
	font-family: opensans-bold, sans-serif;
	font-size: 16px;
	line-height: 20px;
	font-weight: bold;
	color: #f9f9f9;
	background-color: #ef5350;
	padding: 17px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #f4f4f4;
}
.green-text {
	font-family: opensans-bold, sans-serif;
	font-size: 16px;
	line-height: 20px;
	font-weight: bold;
	color: #f9f9f9;
	background-color: #81c784;
	padding: 17px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #f4f4f4;
}
.purple-text {
	font-family: opensans-bold, sans-serif;
	font-size: 16px;
	line-height: 20px;
	font-weight: bold;
	color: #f9f9f9;
	background-color: #9575cd;
	padding: 17px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #f4f4f4;
}
.cyan-text {
	font-family: opensans-bold, sans-serif;
	font-size: 16px;
	line-height: 20px;
	font-weight: bold;
	color: #333;
	background-color: rgba(66,165,245,0.4);
	padding: 17px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #f4f4f4;
}
.cyan-light-text {
	font-family: opensans-bold, sans-serif;
	font-size: 16px;
	line-height: 20px;
	font-weight: bold;
	color: #333;
	background-color: rgba(66,165,245,0.2);
	padding: 17px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #f4f4f4;
}

/* ------------------------------------------------------------------ */
/*　Button Effect Up-Down
/* ------------------------------------------------------------------ */
.special-container { margin-bottom: 3em; }
.special { text-transform: uppercase; position: relative; padding: 15px; -webkit-transition: background 0.3s ease-in 0.2s; color: #777; }
.special:after,
.special:before {  position: absolute; content: ''; left: 0;  bottom: 0;  height: 2px;  width: 100%; background: rgba(124,179,66,1);  -webkit-transition: all 0.3s ease-out; }
.special:before { opacity: 0; bottom: 50%; }
.special:hover { color: #777;  background: rgba(124,179,66,0.3); -webkit-transition: background 0.3s ease-in 0.2s; }
.special:hover:before { bottom: 100%;  opacity: 1; }

/*----------------------------------------------------------------
    Main Tittle
----------------------------------------------------------------*/
h2.tittle-us { text-align: left; color: #444; font-size: 22px; font-weight: bold; margin-bottom: 25px; text-transform: uppercase; }
h2.tittle-j { text-align: left; color: #444; font-size: 20px; font-weight: bold; font-family: RodinPro-EB; }
h3.tittle-j { text-align: left; color: #444; font-size: 23px; font-family: RodinPro-EB; margin: 0px; }
h4.tittle-j { text-align: left; color: #444; font-size: 14px; font-family: RodinPro-EB; margin: 0px; }

.thin-sep { height: 1px; background-color: #e7e7e7; width: 33.3333%; margin: 2% auto 2% auto; }

/* ------------------------------------------------------------------ */
/*　Text
/* ------------------------------------------------------------------ */
.txn{ font-family: RodinPro-M; font-size: 14px; color: #333; }

.txs{ font-family: RodinPro-M; font-size: 11px; color: #333; }

.txl{ font-family: RodinPro-M; font-size: 18px; color: #333; }

.txnb{ font-family: RodinPro-B; font-size: 14px; color: #333; }
.txnb-white{ font-family: RodinPro-B; font-size: 14px; color: #f2f2f2; }

.txsb{ font-family: RodinPro-B; font-size: 11px; color: #333; }

.txlb{ font-family: RodinPro-B; font-size: 18px; color: #333; }

red { color: rgba(237,81,81,1);  font-weight: bold; }

.border li{ font-family: RodinPro-M; display: inline-block; text-transform: capitalize; color: #f2f2f2; font-size: 13px; margin: 7px 0 0 0; padding: 8px 14px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; background-color: #9575cd; }
.circle li {
    position: relative;
    display: inline-block;
    margin: 0.3em;
    width: 178px;
    height: 178px;
    text-align: center;
background-color: #9575cd; color: #666; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; }

border { font-family: RodinPro-B; font-size: 13px; color: #333; font-weight: bold; border-width: 1px; border-style: solid; border-color: #888;  padding: 5px; margin-left: 20px; border-radius: 2px; }
mark-blue { background-color: #2891ea; color: #666; margin-left: 20px; }
mark-green { background-color: #81c784; color: #666; }
mark-orange { background-color: #fb8c00; color: #666; }
mark-red { background-color: #ef5350; color: #666; }
mark-purple { background-color: #9575cd; color: #666; }

h5.warning {
	display: inline-block;
	color: #f2f2f2;
	background-color: rgba(237,81,81,1);
	font-size: 22px;
	font-family: SeuratProN-DB;
	text-align: center;
	padding-top: 0.49em;
	padding-right: 0.89em;
	padding-left: 0.89em;
	padding-bottom: 0.49em;
	margin: 0 0 1em 0;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.arrow { background-image: url(../images/halmethod/arrow-down.svg); background-repeat: no-repeat; background-position: center; height: 4.5em; margin-bottom: 0.56em; }

/* ------------------------------------------------------------------ */
/*　Tag Navigation
/* ------------------------------------------------------------------ */
.list-unstyled { padding-left:0; list-style:none; margin: 0px; }
.tag_nav li{ display: inline-block; margin: 7px 0 0 0; }
.tag_nav li a{ font-family: RodinPro-M; display: block; text-transform: capitalize; color: #333; font-size: 13px; padding: 8px 14px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; text-decoration: none; border-width: 1px; border-color: rgba(237,81,81,1);  }
.tag_nav li.active a,.tag_nav li a:hover{ background: rgba(237,81,81,1); color: #ffffff; text-decoration:none; }
/* ------------------------------------------------------------------ */
/*　Right Navigation
/* ------------------------------------------------------------------ */
.right-nav li{ display: inline-block; margin: 7px 0 0 0; }
.right-nav li a{ font-family: RodinPro-M; display: block; text-transform: capitalize; color: #333; font-size: 13px; padding: 8px 14px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; text-decoration: none; border: 1px solid rgba(102,187,106,1);}
.right-nav li.active a,.right-nav li a:hover{ background: rgba(102,187,106,0.3); color: #333; text-decoration:none; }



/* ------------------------------------------------------------------ */
/*　Kids
/* ------------------------------------------------------------------ */
.cyan-text2 {
	font-family: opensans-bold, sans-serif;
	font-size: 16px;
	line-height: 20px;
	font-weight: bold;
	color: #333;
	background-color: #FFCF51;
	padding: 17px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #f4f4f4;
}
.cyan-light-text2 {
	font-family: opensans-bold, sans-serif;
	font-size: 16px;
	line-height: 20px;
	font-weight: bold;
	color: #333;
	background-color: #FFE49E;
	padding: 17px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #f4f4f4;
}