body, html { margin: 0; padding: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; height: 100%; color: #333; background: #f6f6f6; line-height: 1.5; font-weight: 300; }
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
h1, h2, h3, h4, h5 { font-weight: 400; margin: 0 0 5px 0; padding: 0; line-height: 1.2 }
h4, h5 { font-weight: 400; }
h1.xl { font-size: 200%;  }

h1 {color:#6dd178;font-weight:300}
a { text-decoration: none; color: #62cc6e; }
a:hover { color: #333; -webkit-transition: color 100ms linear; -moz-transition: color 100ms linear; -o-transition: color 100ms linear; -ms-transition: color 100ms linear; transition: color 100ms linear; }
a.active { color: #333 !important }
p { margin: 0; }
img { border: none; }
/* header */
header { margin-bottom: 10px; }
header.collapse { position: fixed; z-index: 100; width: 100%; min-height: 0; top: 0; }
header h1.logo { font-size: 72px; font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 1; font-weight: 500;
letter-spacing: -0.09em; }
header h1.logo:hover { color: #333; -webkit-transition: color 100ms linear; -moz-transition: color 100ms linear; -o-transition: color 100ms linear; -ms-transition: color 100ms linear; transition: color 100ms linear; }
header.collapse h1.logo { font-size: 24px; }

header .burger, .show-mobile {display:none}
 
nav ul { list-style: none; padding: 0; margin: 0; text-align: right; }
nav ul li { display: inline-block; }
nav ul li a { margin-right: 20px; color: #fff; font-size: 140%; display: block;  }
nav ul li a:hover { color: #333; -webkit-transition: color 100ms linear; -moz-transition: color 100ms linear; -o-transition: color 100ms linear; -ms-transition: color 100ms linear; transition: color 100ms linear; }

nav ul li ul {position:absolute;z-index:10;opacity:0;transition:opacity .5s;pointer-events:none}
nav ul li:hover ul {opacity:1;pointer-events:all}
nav ul li ul li {display:block;}
nav ul li ul li a{font-size:1rem;background:#6cd178;text-align:left;padding:.25rem .5rem;margin-left:-.5rem;}

.sub ul { list-style: none; padding: 0; margin: 0; }
.sub ul li { display: inline-block; }
.sub ul li a { margin-right: 20px; margin-right: 20px; font-size: 120%; }
.sub ul li a:hover { color: #333; -webkit-transition: color 100ms linear; -moz-transition: color 100ms linear; -o-transition: color 100ms linear; -ms-transition: color 100ms linear; transition: color 100ms linear; }
.gbg { background-color: #62cc6e; background-color: rgba(98,204,110,0.9); color: #fff; }
.wbg { background-color: #fff; background-color: rgba(255,255,255,0.8); color: #333; }
.bbg { background-color: #fff; background-color: rgba(0,0,0,0.8); color: #fff; }
.gbg a { color: #fff; }
/* page */
div.credits {    padding-bottom: 4rem;display: block;}

footer { margin-top: 50px; padding: 20px 0; font-size: 150%; }
#wrap { margin: 0px auto -100px; min-height: 100%; height: auto !important; height: 100%; background:#fff;}
#wrap.collapse { margin-top: 100px; }
#wrap .push { height: 120px; }
#msg { display: none; position: absolute; bottom: 10px; right: 10px; background: #ffc; font-size: 10px; padding: 10px; z-index: 100; }
#content { display: table; height: 100%; width: 100%; background: #f0c; }
#content .slide { display: table-cell; vertical-align: middle; text-align: center; font-size: 36px; font-weight: 400; }
.ph-slider{width:100%;height:10rem;padding:1rem 0;border-top:.5rem solid #62cc6e;border-bottom:.5rem solid #62cc6e;overflow:hidden;background:#fff;margin-top:1rem;}
.ph-slider-inner{width:200%;height:100%;white-space:nowrap;}
.ph-slider .item{display:inline-block;height:100%;}
.ph-slider img{height:100%;margin-right:.5rem;}

/* fixdiv */
.fixdiv { display: inline-block; position: relative; width: 100%; }
.fixdiv-spacer { padding-top: 75%; }
.fixdiv-inner { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; }
.fixdiv-inner img.p { height: 100% }
.fixdiv-inner img.l { width: 100% }
.hp .flexslider .fixdiv-inner img.ll { height: 100%; width: auto; }
.hp .flexslider .fixdiv-inner img.pp { width: 100%; height: auto; }
.hp .c4, .hp .c4 .c2 { padding: 0 }
.hp .c4 h1 { font-size: 200%; padding: 10px 20px; }
.hp .d3 { display: none; }
.hp .c4 .c2 .c2-inner { padding: 0px; }
.hp .c4 .c2 .c2-inner.wbg { padding: 10px; font-size: 120%; }
/* grid */
.c { width: 960px; margin: 0px auto }
.c0 ,.c1, .c2, .c3, .c4 { margin-right: -4px; display: inline-block; padding: 10px; vertical-align: top; }
.c0 { width: 150px; margin-bottom: 10px; }
.c1 { width: 300px; margin-bottom: 10px; }
.c2 { width: 600px; margin-bottom: 10px; }
.c3 { width: 900px; margin-bottom: 10px; }
.c4 { width: 100%; display: block; }
.c4 .c2 { width: 50%; }
.c4.hp .c2 h1 { font-size: 300%; margin-bottom: 30px; }
.c2 .c2-inner { margin: 10px; padding: 20px; }
header .c1, header .c3 { vertical-align: inherit; }
header .c3 { width: 600px; }
.read { padding: 10px; background-color: #fff; font-size: 110%;margin:0 auto;max-width:45rem; }
.read h1 { margin-bottom: 20px; }
div.itmz {  }
/* box */
.box { margin-bottom: 0; }
.box-inner {  background-color: rgba(255,255,255,0.8); cursor: pointer; padding-bottom: 20px; }
.box-inner:hover { background-color: #fff; -webkit-transition: background-color 100ms linear; -moz-transition: background-color 100ms linear; -o-transition: background-color 100ms linear; -ms-transition: background-color 100ms linear; transition: background-color 100ms linear; }
.box a { }
.box .fixdiv-spacer { padding-top: 75%; }
.box .hdr { height: 8.5rem; padding: 10px; }
.box .hdr h2{ min-height: 3.5rem; }
.box .txt { line-height: 1.4; height: 144px; overflow: hidden; padding: 10px; font-size: 14px; font-weight: 400; }
.box .plus { margin-left: -20px; }
/*----form-----*/
form { margin: 20px 0; display: block; clear: both; }
label { width: 300px; display: inline-block; vertical-align: top; margin-right: 10px; font-size: 14px; font-weight: 400; padding-top: 10px; }
input { width: 400px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 500; }
input[type=text] { padding: 10px 40px 10px 10px; border: 1px solid #eee; margin: 5px 0; box-shadow: 2px 2px 6px #eee; background: url(/lib/gfx/form_buts.gif) no-repeat right -160px }
input[type=submit] { margin-top: 20px; background: #eee; border: none; font-size: 14px;  width: 200px; padding: 10px; border-radius: 10px; box-shadow: 2px 2px 10px #ccc; border-radius: 4px; cursor: pointer; }
input[type=checkbox] { margin: 20px 0; }
input[type=submit]:hover { background: #ddd; }
input[type=text].required { background-position: right -40px }
input[type=text].ok { background-position: right -80px; }
input[type=text].error { background-position: right -120px; border-color: #c66 }
textarea { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 500; height: 200px; width: 400px; padding: 10px 40px 10px 10px; border: 1px solid #eee; margin: 5px 0; box-shadow: 2px 2px 6px #eee; }
textarea.error { border: 1px solid #c66; }
#response { background: #ffc; padding: 10px 20px; border: 1px solid #dd9; display: none; margin: 20px 0; }
.asterix { font-size: 150%; color: #62cc6e; ; position: absolute; margin-top: -5px; margin-left: 5px; }

.bg-img.thu {
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 75%;
}
.bg-img {
    top: 0;
    width: 100%;
    padding-top: 75%;
    background-size: cover;
    background-position: center center;
    margin-bottom: 1rem;
}
/*----sh-----*/
ul.sh { margin: 0; padding: 0; }
ul.sh li { list-style: none; padding: 10px 0; border-bottom: 1px solid #eee; }
ul.sh li.s { font-size: 100%; cursor: pointer; }
ul.sh li.s:hover { color: #62cc6e; }
ul.sh li.s.selected { }
ul.sh li.h { display: none; padding: 20px 0; }
/*----helprz-----*/
/*----itmz-----*/
.itmz { background: #fff; }
.itmz section { padding: 10px ; }
.itmz .fixdiv-spacer { padding-top: 75%; }
.itmz section.txt h2 { font-size: 150%; margin-bottom: 10px; }
.itmz section.txt h1 { font-size: 200%; margin-bottom: 20px; }
/*.itmz section.dwl { display: inline-block; margin-right: 1%; width: 23%; vertical-align: top; }*/
.itmz iframe { width: 100%; height: 100%; border: 0; }
/* ------------ files ------------- */
a.file { font-size: 14px; line-height: 1.2; }
a.file span { background: url(/lib/gfx/ico.png) no-repeat; width: 40px; height: 40px; margin-right: 10px; display: inline-block; vertical-align: top; float: left; }
a.file.pdf span { background-position: 0 -40px; }
a.file.pdf:hover span { background-position: 0 0; }
a.file.doc span { background-position: -40px -40px; }
a.file.doc:hover span { background-position: -40px 0; }
a.file.xls span { background-position: -80px -40px; }
a.file.xls:hover span { background-position: -80px 0; }
a.file.zip span { background-position: -120px -40px; }
a.file.zip:hover span { background-position: -120px 0; }
/* ------------ linkz ------------- */
.linkz { }
a.link { font-size: 80%;  line-height: 1; display: inline-block; width: 280px; margin: 10px; overflow: hidden; }
a.link span { background: url(/lib/gfx/ico.png) no-repeat; width: 40px; height: 30px; display: inline-block; vertical-align: bottom; }
a.link.twt { width: 260px; }
a.link.lin span { background-position: 0px -120px; }
a.link.lin:hover span { background-position: 0 -80px; }
a.link.twt span { background-position: -40px -120px; }
a.link.twt:hover span { background-position: -40px -80px; }
a.link.fcb span { background-position: -80px -120px; }
a.link.fcb:hover span { background-position: -80px -80px; }
a.link.pls span { background-position: -120px -40px; }
a.link.pls:hover span { background-position: -120px 0; }
a.link.url span { background-position: -160px -120px; }
a.link.url:hover span { background-position: -160px -80px; }
/* ------------ flexslider ------------- */
.flexslider { position: relative; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; }
.flexslider .rd { height: 50px; overflow: hidden; }
.flexslider h2 { height: 32px; overflow: hidden; }
.flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus { outline: none; }
.slides, .flex-control-nav, .flex-direction-nav { margin: 0; padding: 0; list-style: none; }
/* FlexSlider Necessary Styles
*********************************/ 
.flexslider { margin: 0; padding: 0; }
.flexslider.portrait { background: #0f0; }
.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; } /* Hide the slides before the JS is loaded. Avoids image jumping */
/* Clearfix for the .slides element */
.slides:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
html[xmlns] .slides { display: block; }
* html .slides { height: 1%; }
.no-js .slides > li:first-child { display: block; }
/* FlexSlider Default Theme
*********************************/
.flex-caption { margin: 0; width: 100%; padding: 2%; position: absolute; left: 0; bottom: 0; font-size: 150%; }
.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; }
.loading .flex-viewport { max-height: 300px; }
.flexslider .slides { zoom: 1; }
/* Direction Nav */
.flex-direction-nav { *height: 0;
}
.flex-direction-nav a { width: 30px; height: 30px; margin: -20px 0 0; display: block;  position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease; }
.flex-direction-nav .flex-next { background-position: 102% 0; }
.flex-direction-nav .flex-prev { }
.flexslider:hover .flex-next { opacity: 0.8; right: 5px; }
.flexslider:hover .flex-prev { opacity: 0.8; left: 5px; }
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; }
.flex-direction-nav .flex-disabled { opacity: .3!important; filter: alpha(opacity=30); cursor: default; }
/* Control Nav */
.flex-control-nav { width: 100%; position: absolute; bottom: 20px; text-align: center; }
.flex-control-nav li { margin: 0 6px; display: inline-block; zoom: 1; *display: inline;
}
.flex-control-paging li a { width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3); }
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }
.flex-control-thumbs { margin: 5px 0 0; position: static; overflow: hidden; }
.flex-control-thumbs li { width: 25%; float: left; margin: 0; }
.flex-control-thumbs img { width: 100%; display: block; opacity: .7; cursor: pointer; }
.flex-control-thumbs img:hover { opacity: 1; }
.flex-control-thumbs .flex-active { opacity: 1; cursor: default; }
textarea.embed { width: 400px; height: 60px; border: 1px solid #eee; padding: 10px; font-size: 12px; font-weight: normal; font-family: Andale Mono, monospace; color: #666 }
#preview { font-size: 14px; font-weight: 200;padding-left:20px; }
#preview h5{font-size:120%;margin-top:20px;}
#preview .asterix{display:none;}
#preview table{}
#preview table td {padding:5px;vertical-align:top;margin:0;}
#preview table td.l {width:40%; font-size:12px;}
#preview table td.r {width:60%;}
#preview table ttr:nth-child(even) {background: #eee}
#preview table td {border-bottom:1px solid #eee;}

 @media only screen and (max-width: 620px) {
.show-mobile {display: block}
header.collapse { position: relative; }
header {width:100vw;}
header h1.logo { font-size: 36px; padding-bottom: 0; text-align: center;}
header.collapse .sub { display: none; }
header.collapse h1.logo { font-size: 24px; }
header .c3{display:none;}
header .burger {position:absolute;font-size:150%;z-index:100;display:block;}
header .c1, header .c3 { margin-bottom: 0; }

.sub{position: absolute;
    z-index: 1000;
    background: #fff;
    width: 100%;
    transform:translate(-100vw, 0);
    transition: transform .5s;
}
.sub.active{transform:translate(0, 0);}

.sub ul li a{    padding: 1rem;
    display: block;
    border-top: 1px solid #eee;}
.c { width: 100vw; }

.c1, .c2, .c3, .c4 { width: 100vw; }
.c4 .c2 { width: 100%; padding: 10px; }
nav ul { text-align: left; }
.sub ul li { display: block; }
label, input, textarea { width: 100%; display: block; }
.itmz .fixdiv, .itmz .txt { width: 100%; display: block; }
.itmz section.dwl { width: 100%; }
.read { font-size: 120%;  }
.flexslider { min-height: inherit }
footer { padding: 20px 0; font-size: 100%; }
h1.xl { padding: 0px; }
}
 @media only screen and (min-width: 620px) and (max-width: 920px) {
header.collapse h1.logo { font-size: 48px; }
.c { width: 600px; }
.c3, .c4 { width: 100%; }
nav ul { text-align: left; }
input, textarea { width: 400px; }
.read { font-size: 120%; }
.itmz .fixdiv, .itmz .txt { width: 100%; display: block; }
.sub ul li { display: inline-block; width: 290px; }
.sub ul li a { margin-right: 20px; margin-bottom: 10px; font-size: 100%; }
.itmz section.dwl { width: 48%; }
.c4 .c2 { width: 100%; padding: 10px; }
footer { padding: 20px 0; font-size: 120%; }
.hp .d3 { display: inline-block; }
h1.xl { padding: 0px; }
}
@media only screen and (min-width: 920px) and (max-width: 1220px) {
.c { width: 900px; }
.hp .c4 .c2 .c2-inner.wbg { font-size: 100%; }
header.collapse h1.logo { font-size: 36px; }
header.collapse nav { margin: 10px }
.read { font-size: 140%; }
.c4 { width: 100%; }
input, textarea { width: 500px; }
section.read { font-size: 140%; }
}
@media only screen and (min-width: 1220px) {
.c { width: 1200px; }
header.collapse h1.logo { font-size: 36px; }
nav ul li a { font-size: 150%; }
header .c3 { width: 900px; }
input, textarea { width: 600px; }
.hp .d3 { display: inline-block; }
.hp .c4 .c2 .c2-inner.wbg { padding: 20px; font-size: 140%; }
}