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

   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: #181d21;}

.section-head {
  	padding: 0 4%;
   text-align: left;
}
.section-head h1 {
   font: 20px/36px 'montserrat-bold', serif;
   color: green;text-align: left;   font-weight: 700;
     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: 30px;
   margin-right: 20px;
   margin-top: 15px;font-family: serif;
   float: left;line-height: 22px;
   width: auto; font-size: 25px; font-weight: 700; font-style:italic;
   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: 60px;
   height: 25px;   
}


/* 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: 16px 'montserrat-regular', sans-serif;
   
   letter-spacing: 1.5px;
   float: left;margin-left: 50px;
}

/* 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: 50px;
   background: #23292f url(img/hero-bg.png);
   overflow: hidden;
}

/* 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: #676e73;
   width: 83%;
   text-align: left; padding-top: 50px;
   margin: 54px auto 24px auto;
}
.hero-text h1 {
   font: 30px  font-style:oblique;font-family:serif;
   color: #fff;
   padding: 0;
   margin: 10px;
   text-shadow: 0px 1px 4px rgba(0, 0, 0, .2);
}
.hero-text h1 span,
.hero-text a { color: #11ABB0; }
.hero-text p {text-align: left;
   font: 20px/30px "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
   padding: 0;color: #fff;
   margin: 30px 3% 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: 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. Features Section
/* ------------------------------------------------------------------ */

#features {
   background: #fff;
   padding-top: 60px;
   padding-bottom: 20px;
   overflow: hidden;
  
 
}
#features .feature {
   margin-top: 0px;
   margin-bottom: 50px; 
}
#features .right {
   padding-left: 32px;
   float: right;   
}
#features .left {
   padding-right: 32px;
   float: left;    
}
#features h1 {
   font-family: serif;font-style:italic;
  letter-spacing: 1px; text-align:left; 
   color: green; font-weight: 600;font-size:25px;
}

#features h2 {font-family:
  "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  letter-spacing: 1px; text-align:left; 
   color: #111;font-weight: 500;font-size:20px;
}


#features h3 {
 font-family: 
"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 20px;font-weight: 500;
	color: green;	
	display: block;
	margin-top: 0;




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

}

#features 

a { outline: none; color: #000080; }


#features a:hover {
 color: #ccc;text-decoration:none;

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

#pricing {
   background: #f7f7f7;
   padding-top: 80px;
   padding-bottom: 77px;   
   border-top: 1px solid #F0F0F0;
   border-bottom: 1px solid #F0F0F0;
   text-align: center;
}
#pricing 

a { outline: none; color: #000080; }


#pricing a:hover {

 color:blue;background:;text-decoration:underline;

}

#pricing .price-block {
   background: #fff;
   border: 1px solid #E6E6E6;
   text-align:left;padding:8px 8px 0px 8px;
   margin-bottom: 36px;
}
.plan-title {
  	font: 20px/30px  "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", 
"Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", 
sans-serif;



  	padding: 3px 2px 6px 2px;
   margin-bottom: 0px;
  	text-align:left;
  
   letter-spacing: 2px;
}
.plan-title .fa {
  	display: block;
  	margin-bottom: 6px;
   font-size: 26px;
}
.plan-price {
  font-family:  "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-style:oblique;


   font-size: 30px; line-height: 39px;
   color: #333;
  padding: 6px 30px 6px 30px;
   margin-bottom:15px;
	text-align:center;
   letter-spacing: 2px;
}
.plan-price span {
	font-family:  "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", 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;
}


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

#screenshots {
   background: #fff url(img/grey.png);
   padding-top: 60px;
   padding-bottom: 60px;
}
#screenshots h3 {  font-family: 
"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 22px;font-weight: 500; font-style:italic;
	color: green;	
	display: block;
	margin-top: 0;

}


/* 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: 2px; }
.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 url(img/hero-bg.png);
   padding-top: 90px;
   padding-bottom: 30px;  }

#call-to-action 

a { outline: none; color: #000080; }


#call-to-action a:hover {
 color: #0f3647;background:#0a6567;text-decoration:none;

}


#call-to-action h1 {
   font: 30px/20px 'montserrat-bold', sans-serif;
    font-style:italic;
   letter-spacing: 3px; text-align: center;
   color: #fff; margin-bottom: 50px;
}

#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: #fff;  
}
#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:#10999E url(img/escheresque.png);
   padding-top: 90px;
   padding-bottom: 60px;
   position: relative;
   min-height: 198px;
   width: 100%;
   overflow: hidden;
   text-align: center;
}
#testimonials 

a { outline: none; color: #000080; }


#testimonials a:hover {
 color: #0f3647;background:#0a6567;text-decoration:none;

}
/* For high-res devices */
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
#testimonials {
background: #fff url(img/grey.png);
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%;text-align:left;
   margin: 0 auto; 
}
#testimonials h1 {
   font: 28px/24px  "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;font-weight: 600;font-style:italic;
   color: #fff;
   text-transform: uppercase;
   letter-spacing: 2px;   
   margin-bottom: 30px;
}
#testimonials h2 {
   font: 20px/24px  "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
   color: #fff;font-weight: 500;font-style:oblique;
    letter-spacing: 2px;   margin-top: 20px;
   margin-bottom: 16px;margin-left: 36px;
}

/*	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: #000;
   padding: 0;
   font-size: 26px;
   line-height: 42px;   
}
#testimonials blockquote cite {
   display: block;
   font-size: 12px;
   font-style: normal;
   line-height: 18px;
   color: #000;
}
#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; }

/* 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: #fff;   padding-top: 80px;   padding-bottom: 30px;
   overflow: hidden;   text-align: left;
}

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

#subscribe h1 { color: #000; }
#subscribe p {
   color: #000;   text-align:left;   padding: 0;}



#mailform {
   background: #fff;
   padding-top: 20px;
   padding-bottom: 30px;
   overflow: hidden;
   text-align: left;
}

#mailform a, #mailform a:visited  { color: #fff; }
#mailform a:hover, #mailform a:focus { color: #fff; }


#mailform .text-container {
   width: 100%;text-align:left;
   margin: 0 auto; 
}
#mailform h1 {
   font: 28px/24px  "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;font-weight: 600;font-style:italic;
   color: green;
   text-transform: uppercase;text-align:center;
   letter-spacing: 2px;   margin-top: 80px;
   margin-bottom: 30px;
}
#mailform h2 {
   font: 20px/24px  "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
   color: #000;font-weight: 500;font-style:oblique;
    letter-spacing: 2px;   margin-top: 20px;
   margin-bottom: 16px;margin-left: 3px;
}








#mailform p {
   color: #000;
   text-align:left;
   padding: 0;
}


/* ------------------------------------------------------------------ */
/* j. 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: 90px; }

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

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








.page-top {
position: fixed;
	
   right: 5px;
   padding: 1px;
    background: #fff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    font-size: 25px;
    -ms-filter: "alpha(opacity=80)";
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;

bottom: 10px;
   
   z-index: 889;}
page-top a:hover { background: #0F9095; }

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

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

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





@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}


@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}


.progress {
  overflow: hidden;
  height: 27px;
  margin-bottom: 10px;
  background-color: #2196f3;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress a, progress-bar a,.progress-striped a,

.progress-bar-success a,.progress-bar-info a:visited { color:#fff; }

.progress-bar a:hover, progress-bar a:focus { color:yellow; }



.progress-bar {
  float: right;
  width: 0%;
  height: 100%;
  font-size: 16px;
  line-height: 12px;
  color: #fff;
  text-align:left; background-color: #001e43;
  padding: 8px 0 0 40px; 
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  -webkit-transition: width 0.6s ease;
  -o-transition: width 0.6s ease;
  transition: width 0.6s ease;
}



.progress-striped .progress-bar,
.progress-bar-striped {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
}



.progress.active .progress-bar,
.progress-bar.active {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
  -o-animation: progress-bar-stripes 2s linear infinite;
  animation: progress-bar-stripes 2s linear infinite;
}



.progress-bar-success {
  background-color: #4caf50;
}


.progress-striped .progress-bar-success {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255,255, 0.15) 75%, transparent 75%, transparent);
}



.progress-bar-info {
  background-color: #000;
}


.progress-striped .progress-bar-info {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}



.progress-bar-warning {
  background-color: #ff9800;
}


.progress-striped .progress-bar-warning {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}



.progress-bar-danger {
  background-color: #f44336;
}


.progress-striped .progress-bar-danger {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}



/*-----------table--------------*/

section table   { width: 100%; }
section th, section td  { padding: 0px; border: 1px solid #ddd; }
section th  { background: #f4f4f4; } 

.nst-table th  { width: 100%;  border: 1px inset #ddd;}
.nst-table td  { text-align: center;  border: 1px inset #ddd;}
.nst-table td:first-child  { text-align: center; background: #f4f4f4;font-weight: 700;
}
.nst-table { border-collapse: collapse;  border: 1px outset #ddd;
table-layout: fixed;
}

@media only screen and (max-width: 800px) { 
    .nst-table { 
        display: block; 
        width: 100%; 
        margin: 0 -1px;font-weight: 700;
    }
    .nst-table thead{ 
        display: block; 
        float: left;
        overflow-x:scroll; 
    }
    .nst-table tbody{ 
        display: block; 
        width: auto; 
        overflow-x: auto; 
        white-space: nowrap;
    }
    .nst-table th{ 
        display: block;
        width:auto;
    }
    .nst-table tbody tr{ 
        display: inline-block; 
        margin:0 -3px ;
    }
    .nst-table td{
        display: block;   margin:-10px -3px ; }}


.btn {
  display: inline-block;
  padding: 10px;
  border-radius: 5px;
  /*optional*/
  
  color: #aaa;
  font-size: .875em;
}

.pagination {
  background: #f2f2f2;
  padding: 20px;
  margin-bottom: 20px;
}

.page {
  display: inline-block;
  padding: 0px 9px;
  margin-right: 4px;
  border-radius: 3px;
  border: solid 1px #c0c0c0;
  background: #e9e9e9;
  box-shadow: inset 0px 1px 0px rgba(255, 255, 255, .8), 0px 1px 3px rgba(0, 0, 0, .1);
  font-size: .875em;
  font-weight: bold;
  text-decoration: none;
  color: #717171;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 1);
}

.page:hover,
.page.gradient:hover {
  background: #fefefe;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#f0f0f0));
  background: -moz-linear-gradient(0% 0% 270deg, #FEFEFE, #f0f0f0);
}

.page.active {
  border: none;
  background: #616161;
  box-shadow: inset 0px 0px 8px rgba(0, 0, 0, .5), 0px 1px 0px rgba(255, 255, 255, .8);
  color: #f0f0f0;
  text-shadow: 0px 0px 3px rgba(0, 0, 0, .5);
}

.page.gradient {
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f8f8f8), to(#e9e9e9));
  background: -moz-linear-gradient(0% 0% 270deg, #f8f8f8, #e9e9e9);
}

.pagination.dark {
  background: #fff;
  color: #feffff;
}

.page.dark {
  border: solid 1px #32373b;
  background: #fff;
  box-shadow: inset 0px 1px 1px rgba(255, 255, 255, .1), 0px 1px 3px rgba(0, 0, 0, .1);
  color: #feffff;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, .5);
}

.page.dark:hover,
.page.dark.gradient:hover {
  background: #3d4f5d;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#547085), to(#3d4f5d));
  background: -moz-linear-gradient(0% 0% 270deg, #547085, #3d4f5d);
}

.page.dark.active {
  border: none;
  background: #000;
  box-shadow: inset 0px 0px 8px rgba(0, 0, 0, .5), 0px 1px 0px rgba(255, 255, 255, .1);
}

.page.dark.gradient {
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#565b5f), to(#3e4347));
  background: -moz-linear-gradient(0% 0% 270deg, #565b5f, #3e4347);
}

img.example3 { vertical-align: middle; }





section table   { width: 100%; }
section th, section td  { padding: 5px; border: 0px; width: 70%; }
section th  { background: #fff; }
 
/*----------------------------------------------------
    .form
----------------------------------------------------*/
.form th  { width: 30%; text-align: right; }
 
@media only screen and (max-width:480px){
     .form { margin: 0 -10px; }
    .form th,
     .form td{
        width: 100%;
        display: block;
        border-top: none;text-align: left;
    }
     .form tr:first-child th   { border-top: 0; }
}



section table   { width: 100%; }
section th, section td  { padding: 10px; border: 1px solid #ddd; }
section th  { background: #f4f4f4; }
.demo03 th, .demo03 td  { width: 2%; text-align: left; }

@media only screen and (max-width: 480px) { 
    .demo03 { margin: 0 -10px; }
    .demo03 tr {
        display:block;
        margin-bottom: 10px;
    }
    .demo03 th {
        display:block;
        width: 100%;
    }
    .demo03 td {
        display: list-item;
        width: 90%;
        margin-left: 10%;
        border:none;
    }
}