@charset "utf-8";
/*------------------------------------------------------------
 import.css
 スタイルシートのインポート
-------------------------------------------------------------*/
@import "format.css";


/* /////////////////////////////////////////
 Commons
///////////////////////////////////////// */

/*- Font */
body,select, input, textarea {
	font-family:"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
	/*font-family: 'メイリオ', Meiryo,"MS PGothic", "ＭＳ Ｐゴシック", sans-serif;*/
}

@font-face {
    font-family: 'LigatureSymbols';
    src: url('/lib/fonts/LigatureSymbols-2.11.eot');
    src: url('/lib/fonts/LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'),
         url('/lib/fonts/LigatureSymbols-2.11.woff') format('woff'),
         url('/lib/fonts/LigatureSymbols-2.11.ttf') format('truetype'),
         url('/lib/fonts/LigatureSymbols-2.11.svg#LigatureSymbols') format('svg');
    src: url('/lib/fonts/LigatureSymbols-2.11.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.lsf, .lsf-icon:before {
  font-family: 'LigatureSymbols';
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  -o-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-weight: normal;
	-webkit-font-feature-settings: "liga" 1, "dlig" 1;
	-moz-font-feature-settings: "liga=1, dlig=1";
	-ms-font-feature-settings: "liga" 1, "dlig" 1;
	-o-font-feature-settings: "liga" 1, "dlig" 1;
	font-feature-settings: "liga" 1, "dlig" 1;
}

.lsf-icon:before {
  content:attr(title);
  margin-right:0.3em;
  font-size:130%;
}
.lsf-icon.ic-home:before {
  content: '\E072';
}
.lsf-icon.ic-external:before {
  content: '\E046';
}
.lsf-icon.ic-solution:before {
  content: '\116';
}
.lsf-icon.ic-features:before {
  content: '\E055';
}
.lsf-icon.ic-solutions:before {
  content: '\E116';
}
.lsf-icon.ic-about:before {
  content: '\E023';
}
.lsf-icon.ic-contact:before {
  content: '\E08a';
}
.lsf-icon.ic-lock:before {
  content: '\E086';
}
.lsf-icon.ic-list:before {
  content: '\E084';
}
.lsf-icon.ic-map:before {
  content: '\E16d';
}
.lsf-icon.ic-help:before {
  content: '\E070';

}
.lsf-icon.ic-check:before {
  content: '\E029';

}

/*- Fit image size */
.res-image-full{
	width: 100%;
	max-width: initial;
	height: auto;
}
.res-image-original{
	max-width: 100%;
	height: auto;
}
/*- Frame */
#top{
	background-color: #3A3A3C;
}
#wrapper{
	width: 100%;
}
#contents{}
.inner{}
@media screen and (min-width: 960px){
.inner{
	max-width: 1024px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
}
/*- Module */

/*-- Header */
header{
	background-color: #55C7F3;
	color: #FFF;
	/*position: fixed;*/
	width: 100%;
	z-index: 100;
	background: rgba(38,199,243,0.95);
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #22B3DB;
}
#site-id{
	height: 33px;
	width: 63px;
	position: relative;
	left: 0;
	top: 0;
	right: 0;
	margin-right: auto;
	margin-left: auto;
	padding-top: 5px;
	padding-bottom: 5px;
}
#site-id img{
	height: auto;
	width: 63px;

}
@media screen and (min-width: 960px){
#site-id{
	height: 65px;
	width: 126px;
	padding-top: 10px;
	padding-bottom: 10px;
}
#site-id img{
	height: 65px;
	width: 126px;
}
}
#primary{
}

#toggle {
	display: block;
	position: absolute;
	right: 10px;
	top: 6px;
	width: 34px;
	height: 24px;
	cursor: pointer;
	z-index: 101;
	background-color: #7DAABF;
	background: rgba(125,170,191,0.55);
	padding: 2px;
	padding-top: 4px;
	padding-bottom: 4px;
	border-radius: 0.3em;
}
@media screen and (min-width: 960px){
#toggle {
	display: none;
}
}
#toggle span {
	display: block;
	position: absolute;
	height: 4px;
	width: 30px;
	background: #FFF;
	left: 4px;
	-webkit-transition: .20s ease-in-out;
	-moz-transition: .20s ease-in-out;
	transition: .20s ease-in-out;
}
#toggle span:nth-child(1) {
    top: 0;
}
#toggle span:nth-child(2) {
    top: 11px;
}
#toggle span:nth-child(3) {
    top: 22px;
}
.open #toggle span:nth-child(1) {
	top: 11px;
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	transform: rotate(135deg);
}
.open #toggle span:nth-child(2) {
	width: 0;
	left: 50%;
}
.open #toggle span:nth-child(3) {
	top: 11px;
	-webkit-transform: rotate(-135deg);
	-moz-transform: rotate(-135deg);
	transform: rotate(-135deg);
}


#toggle span:nth-child(1) {
	top: 6px;
}
#toggle span:nth-child(2) {
	top: 14px;
}
#toggle span:nth-child(3) {
    top: 22px;
}
.open #toggle span:nth-child(1) {
	top: 14px;
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	transform: rotate(135deg);
}
.open #toggle span:nth-child(2) {
	width: 0;
	left: 50%;
}
.open #toggle span:nth-child(3) {
	top: 14px;
	-webkit-transform: rotate(-135deg);
	-moz-transform: rotate(-135deg);
	transform: rotate(-135deg);
}

#global{
	display: none;
}
#global ul{
	display: block;
	width: 100%;
}
#global li{
	display: block;
	text-align: center;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #7DAABF;

}
#global a{
	color: #FFF;
	text-decoration: none;
	display: block;
	padding: 0.75em;
	font-weight: bold;
}
#global a:hover{
	background-color: #7DAABF;
	background: rgba(125,170,191,0.55);
}

@media screen and (min-width: 960px){
#global{
	display: inline;
	position: absolute;
	right: 12px;
	top: 14px;
	z-index: 101;
}
#global ul{
	padding-top: 0.25em;
	padding-bottom: 0.25em;
}
#global li{
	display: inline;
	border: 0px none #51D2F5;
}
#global a{
	display: inline-block;
	padding: 0.5em;
	width: auto;
}
#global a:hover{
	border-radius: 0.5em;
}

}

/*-- PageLink */
#page-link{
	position: fixed;
	z-index: 1000;
	display: none;
	right: 4px;
	top: 50%;
}

#page-link:before{
	position: absolute;
	display: block;
	width: 20px;
	height: 100%;
	content: "";
	z-index: 1001;
	right: 0px;
	background-color: #989;
}
#page-link ul{
	
	position: absolute;
	right: 0;
	background-color: rgba(125,170,191,0.50);
	display: block;
	padding: 10px 3px;
	border-radius: 12px;
	-webkit-transform: translate(0,-50%);
	transform: translate(0,-50%);
}

#page-link ul:before{
	content: "";
	position: absolute;
	display: block;
	width:100%;
	height: 100%;
	right: 0;
	top: 0px;
	padding: 0px 0px;
}

#page-link li{
	display: block;
	overflow: hidden;
	margin-top: 0px;
	margin-bottom: 0px;
	text-align: right;

}
#page-link li a{
	color: #333;
	text-decoration: none;
	display: block;
}

#page-link li a:after{
	display: inline-block;
	display: block;
	content: "";
	border-radius: 50%;
	height: 7px;
	width: 7px;
	margin: 7px 0;
	border: 1px solid #7DAABF;
	line-height: 1;
	background-color: rgba(255,255,255,0.2);
	
}

#page-link li a.current:after{
	background-color: rgba(255,255,255,0.8);

}

#page-link li a span{
	display: none;
	padding-right: 0.5em;
	color: #fff;
	padding: 0em 0.5em;
	margin-top: -0.5em;
	font-size: 0.85em;
	position: absolute;
	text-align: right;
	right: 20px;
	background-color: rgba(125,170,191,0.95);
	border-radius: 6px;
	white-space: nowrap;
}

#page-link.hover:before{
}
#page-link.hover li a span{
	display: inline-block;
	display: block;
		opacity: 1;
      animation-duration: 0.5s;
      animation-name: fade-in;
      -moz-animation-duration: 0.5s;
      -moz-animation-name: fade-in;
      -webkit-animation-duration: 0.5s;
      -webkit-animation-name: fade-in;
}

#page-link li a span:after {
	content: "";
	position: absolute;
	top: 50%; right: -5px;
	margin-top: -5px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 5px 0 5px 5px;
	border-color: transparent transparent transparent rgba(125,170,191,0.9);
}
@media screen and (min-width: 600px){
#page-link ul{
	padding: 10px 4px;
}
#page-link li a:after{
	height: 11px;
	width: 11px;
	margin: 8px 0;
}
#page-link li a span{
	font-size: 1.1em;
	right: 26px;
}
}
@media screen and (min-width: 960px){
#page-link:before{
	display: none;
}
#page-link:hover ul:before{
	right: 20px;
	width: 50vh;
}
#page-link:hover li a span{
	display: inline-block;
	opacity: 1;
   animation-duration: 0.5s;
   animation-name: fade-in;
   -moz-animation-duration: 0.5s;
   -moz-animation-name: fade-in;
   -webkit-animation-duration: 0.5s;
   -webkit-animation-name: fade-in;

}

}
@keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }

      1% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 1;
      }
}

@-moz-keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }

      1% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 1;
      }
}

@-webkit-keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }

      1% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 1;
      }
}

/*-- Contents */
#contents{
	/*padding-top: 45px;*/
}
@media screen and (min-width: 960px){
#contents{
	/*padding-top: 85px;*/
}
}

/*-- Footer */
footer{
	background-color: #3A3A3C;
	color: #A7A9AC;
}
footer p{
	font-size: 0.75em;
	background-image: url(/lib/img/dise-cloud-logo-w.png);
	background-repeat: no-repeat;
	padding-top: 85px;
	background-position: center 1em;
	text-align: center;
	padding-right: 1em;
	padding-bottom: 1em;
	padding-left: 1em;
	line-height: 1.6;
}
footer p span{
	display: inline-block;
}
footer nav{
}
footer nav ul{
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #000;
}
footer nav li{
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #000;
	position: relative;
}
footer nav li a:after{
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: 15px;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 0;
	border-top: solid 3px #A7A9AC;
	border-right: solid 3px #A7A9AC;
	-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
}
footer nav li a{
	color: #A7A9AC;
	text-decoration: none;
	display: block;
	padding: 0.5em;
}
footer nav li a:hover{
	background-color: #111;
}

#scroll{
	position: fixed;
	right: 15px;
	bottom: 15px;
	display: table;
}
#scroll a{
	background-color: #7DAABF;
	background: rgba(125,170,191,0.80);
	height: 40px;
	width: 40px;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
#scroll a:after{
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: 15px;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 0;
	border-top: solid 3px #FFF;
	border-right: solid 3px #FFF;
	-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg);
}
#scroll a:hover{
}
#copyright{
	font-size: 0.75em;
	text-align: center;
	display: block;
	padding: 0.5em;
	padding-top: 40px;
}
@media screen and (min-width: 960px){
footer p{
	background-position: 20px 20px;
	text-align: left;
	width: 48%;
	float: left;
	padding-top: 95px;
	padding-right: 0;
	padding-left: 2%;
}
footer nav{
	float: right;
	width: 50%;
	padding-top: 20px;
}
#copyright{
	clear: both;
	text-align: left;
	padding-left: 2%;
}
}
/* /////////////////////////////////////////
 Skin
///////////////////////////////////////// */
.sk-d-pale-blue{
	background-color: #A0D9F6;
}
.sk-d-blue{
	background-color: #26C7F3;
}
.sk-d-blue-grey{
	background-color: #7DAABF;
}
.sk-d-pale-grey{
	background-color: #A7A9AC;
}
.sk-d-grey{
	background-color: #3A3A3C;
}
.sk-white{
	background-color: #FFF;
}
.sk-pale-grey{
	background-color: #F2F2F2;
}
.sk-light-grey{
	background-color: #F6F6F7;
}
.sk-dark-blue{
	background-color: #265A72;
}

.sk-d-pale-blue,
.sk-d-blue,
.sk-d-blue-grey,
.sk-d-pale-grey,
.sk-d-grey,
.sk-white,
.sk-pale-grey,
.sk-light-grey,
.sk-dark-blue{
	padding: 1em 0;
}


/* /////////////////////////////////////////
 Modules
///////////////////////////////////////// */
/*- General Button */
#contents .parts-btn{
	text-align: center;
	padding: 1em;
}
#contents .parts-btn a{
	display: block;
	background-color: #265A72;
	box-sizing: border-box;
	padding: 0.5em;
	padding-right: 1.5em;
	padding-left: 1.5em;
	color: #FFF;
	font-weight: bold;
	text-decoration: none;
	border-radius: 0.625em;
	position: relative;
}
#contents .parts-btn a:after{
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: 0.75em;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 0;
	border-top: solid 3px #FFF;
	border-right: solid 3px #FFF;
	-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
}
#contents .parts-btn a:hover{
	background-color: #1B8CAB;
}

#contents .parts-btn-full a{
	width: 100%;
}
#contents .parts-btn-half a{
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}

#contents .btn{
	width: 100%;
	margin-bottom: 2em;
}
#contents .btn a{
	font-size: 1.25em;
	font-weight: bold;
	color: #FFF;
	text-decoration: none;
	display: block;
	background-color: #26C7F3;
	width: 85%;
	margin-right: auto;
	margin-left: auto;
	padding: 1em;
	border-radius: 0.5em;
	text-align: center;
}


#contents .btn a:hover{
	background-color: #7DAABF;
}
@media screen and (min-width: 600px){
#contents .btn a{
	width: 60%;
}
}
@media screen and (min-width: 960px){
}

/*- Mail Form */
#contact h2,
#contact p,
#contact dt{
	color: #FFF;
}


#contact form .row input,
#contact form .row textarea{
	font-size: 1.2em;
}
#contact form .row select{
	font-size: 1.0em;
}

#contact form .row,
#contact form .column{
	margin-bottom: 0.75em;
}
#contact form{
	padding: 2em;
}
#contact form .row{
	clear: both;
}
#contact form .row input{
	width: 100%;
}
#contact form .row input,
#contact form .row select{
	height: 2em;
}
#contact form .row textarea{
	width: 100%;
	height: 10em;
	resize: vertical;
}
#contact form .column,
#contact form .column{
}
#contact form .row dl{
	display: block;
}
#contact form .row dt{
	display: block;
	text-align: left;
	padding-bottom: 0.2em;
}
#contact form .row dt label{
	font-weight: bold;
}
#contact form .row dt label em{
	font-size: 0.8em;
}
#contact form .row dt label span{
	background-color: #C00;
	font-size: 0.8em;
	padding-top: 1px;
	padding-right: 3px;
	padding-bottom: 1px;
	padding-left: 3px;
	white-space: nowrap;
	margin-left: 1em;
	vertical-align: middle;
}
#contact form .row dd{
	display: block;
	text-align: left;
}
#contact form .row dl.form-check dd.coution{
	background-color: #F2F2F2;
	padding: 0.75em;
}
#contact form .row dl.form-check dd.check-box{
	background-color: #FFF;
	padding: 0.75em;
}
#contact form .row dl.form-check #send-privacy{
	display: inline;
	width: auto;
	height: auto;
	margin-right: 0.5em;
	margin-left: 0.5em;
	-webkit-transform: scale( 1.25 , 1.25 );
	transform: scale( 1.25 , 1.25 );
}
#contact form .row dl.form-check dd label{
}
#contact form .btn{
	padding-top: 1em;
	text-align: center;
}

input[type="button"],input[type="submit"] {
	-webkit-appearance: none;
}

#contact form .btn input{
	background-color: #177792;
	border: 0px none #26C7F3;
	width: 40%;
	cursor: pointer;
	font-size: 1.5em;
	padding: 0.5em;
	border-radius: 0.5em;
	color: #FFF;
	font-weight: bold;
}

#contact form .btn input:hover{
	background-color: #1B8CAB;
}

@media screen and (min-width: 960px){
#contact form .row input,
#contact form .row select,
#contact form .row textarea{
	font-size: 1.1em;
	padding-top: 0.25em;
	padding-bottom: 0.25em;
}

#contact form .row,
#contact form .column{
	margin-bottom: 1em;
}

#contact form .column,
#contact form .column-last{
	width: 49%;
}
#contact form .column{
	float: left;
	margin-right: 0.5%;
	margin-left: 0%;
}
#contact form .column-last{
	float: right;
	margin-right: 0%;
	margin-left: 0.5%;
}
}

/*- Icon */
.icon{
	display: inline-block;
	font-size: 0.8em;
	padding: 0.1em 0.5em;
	margin: 0.25em;
	color: #FFF;
	border-radius: 0.5em;
	font-weight: bold;
	line-height: 1.5;
}
.icon.icon-beta{
	background-color: #C30;
}



/* /////////////////////////////////////////
 Top page
///////////////////////////////////////// */

/*- Section */
.top #visual,
.top #about,
.top #info,
.top #points,
.top #system,
.top #features,
.top #feature-main,
.top #feature-other,
.top #contact{
	text-align: center;
	clear: both;
}
.top #about,
.top #info,
.top #points,
.top #system,
.top #features,
.top #feature-main,
.top #feature-other,
.top #contact{
	padding-top: 1em;
	padding-bottom: 1em;	
}
.top #visual{
	background-image: url(/lib/img/visual-bg.png);
	background-repeat: repeat;
}
.top #about,
.top #system{
}
.top #points,
.top #features{
}
.top #feature-other{
}
.top #contact{
}

body:before{
	position: fixed;
	z-index: 101;
	background-color: #F90;
	font-size: 10px;
}

/*- Heading */
.top h1{
	font-size: 1.1em;
	font-weight: bold;
	padding: 0.5em;
}
.top h2{
	font-size: 1.5em;
	font-weight: bold;
	padding: 1em;
}
.top h3{
	font-size: 1.375em;
	font-weight: bold;
	color: #3A3A3C;

}
.top #contents p{
	padding: 1em;
	font-size: 1.0em;
	line-height: 1.8;
	text-align: left;

}

/*- Text */
.top #visual h1 span,
.top #contents h2 span,
.top #contents h3 span{
	font-weight: bold;
}
.top #visual h1 span,
.top #contents h2 span,
.top #contents h3 span{
	display: inline-block;
}
@media screen and (min-width: 600px){
.top h1{
	font-size: 1.8em;
}
.top h2{
	font-size: 1.5em;
}
.top #contents p{
	font-size: 1.0em;
}
}
@media screen and (min-width: 960px){
.top h1{
	font-size: 2em;
}
.top h2{
	font-size: 1.75em;
}
.top h3{
	font-size: 1.5em;
}
.top #contents p{
	font-size: 1.125em;
	text-align: center;
}
.top #contents h2 span,
.top #contents p span{
	display: inline-block;
}
}


/*-- Visual */
.top #visual{
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
.top #visual h2{
	padding: 0em;
}
.top #visual p{
}
.top #visual .introduce{
	margin-left: 0.5em;
	margin-right: 0.5em;
	
	border-radius: 0.75em;
	padding-bottom: 0.25em;
}
.top #visual .menu{
}
.top #visual .menu li{
	display: block;
	font-size: 1.25em;
}
.top #visual .menu li a{
	display: block;
	color: #FFF;
	text-decoration: none;
	background-color: rgba(58,58,58,0.45);
	border-radius: 0.75em;
	padding: 0.75em;
	box-sizing: border-box;
	border: 1px solid #FFF;
	margin: 0.5em;
}
.top #visual .menu li a:hover{
	background-color: rgba(128,128,128,0.45);
}
.top #visual .menu li a:visited{
}
@media screen and (min-width: 960px){
.top #visual{
	padding-bottom: 1em;
}
.top #visual .menu{
	display: flex;
	justify-content: center;
}
.top #visual .menu li{
	width: 35%;
	font-size: 1.25em;
}
}


/*-- Info */
.top #info ul{
	padding-right: 1em;
	padding-left: 1em;
	padding-bottom: 1em;
}
.top #info ul li{
	text-align: left;
	word-wrap: break-word;
	margin-bottom: 1em;
	line-height: 1.25;
}
.top #info ul li small{
	font-size: 0.8em;
	color: #A7A9AC;
	display: block;
	padding: 0 0.5em;

}
.top #info ul li p{
	padding: 0em;
}
.top #info ul li p a{
	text-decoration: none;	
}
.top #info ul li p a:hover{
	background-color: rgba(255,255,255,0.6);
}
.top #info ul li p a:visited{
	color: #666;
}
.top #info ul li p.nolink,
.top #info ul li p a{
	border-radius: 0.5em;
	padding: 0.5em;
	display: block;
}

@media screen and (min-width: 600px){
.top #info ul{
	width: 85%;
	margin-right: auto;
	margin-left: auto;
}
.top #info ul li{

}
.top #info ul li small{

}
}
@media screen and (min-width: 960px){
.top #info ul{

}
.top #info ul li small{
	text-align: right;
	display: block;
	width: 20%;
	float: left;
	margin-right: 2em;
	padding: 1em 0.25em;
}
.top #info ul li p{
	text-align: left;
	float: left;
	width: 70%;
	display: block;
	margin-bottom: 1.5em;
}
}



/*-- Points */
.top #points .point-group{
}
.top #points .column{
	background-color: #FFF;
	border: 3px solid #7DAABF;
	box-sizing: border-box;
	width: 92%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 1em;
	margin-bottom: 1em;
	border-radius: 0.9375em;
	padding-right: 1em;
	padding-left: 1em;
	padding-top: 2em;
	padding-bottom: 2em;
}
.top #points .point-icon{
}
.top #points h3{
	font-size: 1em;
	font-weight: bold;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
.top #points p{
	font-size: 0.9375em;
	padding: 0;
	text-align: center;
}
.top #points p span{
	display: inline-block;
}
@media screen and (min-width: 600px){
.top #points .point-group{
	width: 96%;
	margin-left: auto;
	margin-right: auto;

}
.top #points .column{
	width: 48%;
	margin-left: 1%;
	margin-right: 1%;
	margin-bottom: 0.5em;
	margin-top: 0.5em;
	float: left;
	height: 20em;
}
.top #points .point-icon{
}
.top #points h3{
	
}
.top #points p{
}
}
@media screen and (min-width: 960px){
.top #points .point-group{
	width: 99%;
	margin-left: auto;
	margin-right: auto;

}
.top #points .column{
	width: 24%;
	margin-left: 0.5%;
	margin-right: 0.5%;
	margin-bottom: 0.5em;
	margin-top: 0.5em;
	float: left;
	height: 20em;
	padding-right: 5px;
	padding-left: 5px;
}
.top #points .point-icon{
}
.top #points h3{
}
.top #points p{
	font-size: 0.875em;
}
}

/*-- System */

/*-- Features */
.top #features .item,.top #features .item-last{
	margin-right: 1em;
	margin-left: 1em;
	padding-bottom: 2em;
}
.top #features .item{
	border-bottom-width: 3px;
	border-bottom-style: dotted;
	border-bottom-color: #A7A9AC;
}
.top #features .item-last{
}
.top #features .feature-image img{
	width: 100%;
	max-width: 480px;
	height: auto;
}
.top #features h3{
	padding-top: 1em;
	padding-bottom: 1em;
}
.top #features p em{
	font-size: 0.7em;
	color: #3A3A3C;
}


@media screen and (min-width: 960px){
.top #features{
	padding-top: 3em;
}
.top #features h3{
	display:block;
	padding-left: 0.0em;
	padding-right: 0.0em;
}
.top #features p{
	text-align: center;
	font-size: 1em;
	padding-left: 0.25em;
	padding-right: 0.25em;
	line-height: 2;
}

.top #features .item{
	margin-bottom: 2em;
}
.top #features .odd .summry{
	float: left;
}
.top #features .odd .feature-image{
	float: right;
	margin-right: 0.5%;
}
.top #features .even .summry{
	float: right;
}
.top #features .odd .summry,
.top #features .even .summry{
	width: 49%;
}
.top #features .even .feature-image{
	float: left;
	margin-left: 0.5%;
}
.top #features .odd .feature-image,
.top #features .even .feature-image{
	width: 49.5%;
	max-width: 480px;
}
}
/*-- Other Features */
.top #feature-other ul{
	padding: 0.5em;
	margin-bottom: 1em;
}
.top #feature-other ul li{
	background-color: #FFF;
	display: block;
	border-radius: 0.625em;
	padding: 0.5em;
	margin-bottom: 0.5em;
}
.top #feature-other .btn{
	width: 100%;
	margin-bottom: 2em;
}
.top #feature-other .btn a{
	font-size: 1.25em;
	font-weight: bold;
	color: #FFF;
	text-decoration: none;
	display: block;
	background-color: #26C7F3;
	width: 60%;
	margin-right: auto;
	margin-left: auto;
	padding: 1em;
	border-radius: 0.5em;
}
.top #feature-other .btn a:hover{
	background-color: #7DAABF;
}
@media screen and (min-width: 600px){
.top #feature-other ul li{
	width: 48%;
	float: left;
	box-sizing: border-box;
	margin-right: 1%;
	margin-left: 1%;
	margin-bottom: 0.75em;
}
}
@media screen and (min-width: 960px){
.top #feature-other ul li{
	width: 32%;
	float: left;
	box-sizing: border-box;
	margin-right: 1%;
	margin-left: 0.3%;
	margin-bottom: 1em;
}
}



/* /////////////////////////////////////////
 Pages Common
///////////////////////////////////////// */
.page #page-title{
	background-color: #EEE;
	background-image: url(/lib/img/visual-bg.png);
	background-repeat: repeat;
}
.page #page-title .bg-image{

	
	
	background-image: url(/lib/img/title-bg.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 125% auto;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #A7A9AC;
	padding-bottom: 1em;


}
@media screen and (min-width: 960px){
.page #page-title{

}
.page #page-title .bg-image{
	background-size: auto auto;
	padding-bottom: 2em;

}
}

.page #visual{
	background-color: #F2F2F2;	
}
.page #topic-path{
	font-size: 0.875em;
	padding: 0.75em;
}
.page #topic-path li{
	display: inline-block;
	position: relative;
	float: left;
	padding-right: 15px;
	margin-right: 10px;
	line-height: 1.6;
	
}
.page #topic-path li a{
	display: block;
	display: inline-block;
	color: #221E1F;
	text-decoration: none;
}
.page #topic-path li:after{
	display: block;
	content: "";
	position: absolute;
	top: 45%;
	right: 0px;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 0;
	border-top: solid 3px #3A3A3C;
	border-right: solid 3px #3A3A3C;
	-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
}
.page #topic-path li a:hover{
}

.page #topic-path .tp-home{
	height: 20px;
	width: 20px;
	font-size: 2em;
	line-height: 0.7;

}
.page #topic-path .tp-home:after{
	top: 50%;	
}
.page #topic-path .tp-home img{
	vertical-align: middle;
}
.page #topic-path li.tp-curent:after{
	border: 0px none #FFF;
}
.page #page-title h1,
.page #page-title h2{
	display: block;
	text-align: center;
	font-weight: bold;
	padding-left: 0.75em;
	padding-right: 0.75em
}
.page #page-title h1{
	font-size: 2em;
	color: #221E1F;
	line-height: 1.25;
}
.page #page-title h2{
	color: #A7A9AC;
	text-transform: uppercase;
	padding-top: 0;
	padding-bottom: 0;
	font-size: 1em;
}

/*- Text */
.page h2{
	font-size: 1.5em;
	font-weight: bold;
	padding: 1em;
	text-align: center;
}
.page #contents h3{
	font-size: 1.375em;
	font-weight: bold;
	color: #3A3A3C;
	text-align: center;
	padding: 1em;
}

.page #contents p{
	padding: 1em;
	font-size: 1.0em;
	line-height: 1.8;
	text-align: left;

}
.page #contents h2 span,
.page #contents h3 span{
	display: inline-block;
	font-weight: bold;

}
@media screen and (min-width: 600px){
.page #contents p{
	font-size: 1.0em;
}
}
@media screen and (min-width: 960px){
.page #contents p{
	font-size: 1.125em;
	text-align: center;
}
.page #contents h2 span,
.page #contents p span{
	display: inline-block;
}
}
/* /////////////////////////////////////////
 Featuers page
///////////////////////////////////////// */
.features #summary,
.features #player-features,
.features #compare,
.features #common-feature,
.features #feature-beta{
	padding-top: 1em;
	padding-bottom: 2em;
}
.features #summary .player-type{
	background-color: #FFF;
	width: 94%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
	border: 1px solid #a7a9ac;
	border-radius: 0.625em;
	box-shadow:0 0 2px 2px rgba(0,0,0,0.2) inset;
	box-sizing: border-box;
	padding: 1em;
}
.features #summary .player-type dt{
	padding: 0.5em;
	text-align: center;
}
.features #summary .player-type dd{
	padding: 0.5em;
}
@media screen and (min-width: 600px){
.features #summary .row{
	display: table;
	width: 98%;
	table-layout: fixed;
	border-spacing: 0.5em;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
}

.features #summary .player-type{
	background-color: #FFF;
	width: 50%;
	margin: 0;
	display: table-cell;
	padding: 1em;
	
}
.features #summary .player-type dt{
	padding: 0.5em;
	text-align: center;
	padding-top: 1em;
}
.features #summary .player-type dd{
	padding: 0em;
	display: table-cell;
	line-height: 2;
}

}
@media screen and (min-width: 960px){
.features #summary .player-type dd{
	text-align: center;
}
.features #summary .player-type dd span{
	display: inline-block;
}
}

.features #player-features .row{
	width: 100%;
	box-sizing: border-box;
	padding-left: 1em;
	padding-right: 1em;
	
}
.features #player-features .column{
	padding-top: 1em;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #EEE;
}
.features #player-features .column.first{
	border: 0px none #FFF;
}
.features #player-features .column .image{
	text-align: center;
	padding: 0.5em;
}
.features #player-features .column .image img{
	width: auto;
	max-width: 100%;
	height: auto;
}
.features #player-features .column h3{
	padding: 0;
}
.features #player-features .column p{
}
@media screen and (min-width: 600px){
.features #player-features .row{
	clear: both;
	
}
.features #player-features .column{
	width: 48.5%;
	float: left;
	margin-left:0.75%;
	margin-right:0.75%;
}
.features #player-features .column .image{
}
.features #player-features .column.second{
	border: 0px none #FFF;
}

}
@media screen and (min-width: 960px){
.features #player-features .column p{
	font-size: 0.875em;
	text-align: left;
}
}
.features #compare .feature-table{
	width: 100%;
	padding: 1em;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
}
.features #compare .column-header{
	display: none;
}
.features #compare .column-group{
	background-color: #FFF;
	width: 100%;
	box-shadow: 0 0 2px 2px rgba(0,0,0,0.2);
}
.features #compare .column-header,
.features #compare .column-group{
	border-radius: 0.675em;
	text-align: center;
	padding-left: 1em;
	padding-right: 1em;
	box-sizing: border-box;
	margin-bottom: 0.5em;
	
}
.features #compare .column-header li,
.features #compare .column-group li{
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #A7A9AC;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	position: relative;
}
.features #compare .column-group li:before{
	content:attr(title);
	display: block;
	font-size: 0.7em;
	background-color: #EEE;
	width: 15em;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0.5em;
	margin-top: 0.5em;
	border-radius: 1em;
	padding: 0.25em;
	line-height: 1.6;
}
.features #compare .column-group li.product-name:before{
	content:"";
	display: none;
}
.features #compare .column-group .lsf{
	font-size: 2em;
	line-height: 1.5;
	color: #26C7F3;
}
.features #compare .column-group li em{
	font-size: 0.75em;
	margin-left: 0.5em;
	position: absolute;
}
.features #compare .column-group .no-support{
	font-size: 2em;
	line-height: 1.5;
}
.features #compare .column-header li:last-child,
.features #compare .column-group li:last-child{
	border: 0px none #FFF;
}
.features #compare .column-group .product-name{
	padding-top: 16px;
	padding-bottom: 16px;
	height: 45px;
}
.features #compare .column-group .product-name img{
}
.features #compare .coution{
	padding-right: 2em;
	padding-left: 2em;
	margin-bottom: 2em;
}
.features #compare .coution li{
	font-size: 0.75em;
	line-height: 1.6;
}
@media screen and (min-width: 600px){
.features #compare .column-group{
	width: 48%;
	margin-left: 1%;
	margin-right: 1%;
}

.features #compare .column-header,
.features #compare .column-group{
	float: left;	
}
}
@media screen and (min-width: 960px){
.features #compare .feature-table{
	max-width: 992px;
}
.features #compare .column-header{
	background-color: #DDD;
	width: 32%;
	max-width: 311px;
	margin-top: 77px;
	display: block;
}
.features #compare .column-group{
	width: 33%;
	max-width: 330px;
	margin-right: 0%;
}
.features #compare .column-group li:before{
	content:"";
	display: none;
}
.features #compare .column-header,
.features #compare .column-group{
}
.features #compare .column-header li,
.features #compare .column-group li{
	line-height: 2;
	height: 3em;
}
.features #compare .column-header li.col-platform,
.features #compare .column-group li.col-platform{
	height: 4em;
}
}

.features #common-feature .common-feature-group{
	padding-left: 1em;
	padding-right: 1em;
	margin-bottom: 1em;
}
.features #common-feature .common-feature-group h3{
	background-color: #EEE;
	padding: 0.25em;
	margin-bottom: 0.5em;
	line-height: 1.6;
}
.features #common-feature .row{
}
.features #common-feature .row dl{
	width: 100%;
	box-sizing: border-box;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #EEE;
	padding: 0.5em;
	display: inline-block;
	vertical-align: top;
}
.features #common-feature .row dl:nth-child(1){
	border-top-width: 0px;
}
.features #common-feature .row dt{
	font-size: 1em;
	font-weight: bold;
	min-height: 36px;
	padding-bottom: 0.5em;
}
.features #common-feature .row dt img{
	vertical-align: middle;
	border: 2px solid #F2F2F2;
	border-radius: 50%;
	margin-right: 0.25em;
	width: 36px;
	height: auto;
}
.features #common-feature .row dd{
	font-size: 0.875em;
	line-height: 1.6;
}
@media screen and (min-width: 600px){
.features #common-feature .row dl{
	width: 49%;
	margin-left: 0.5%;
	margin-right: 0.5%;

}
.features #common-feature .row dl:nth-child(2){
	border-top-width: 0px;
}
.features #common-feature .row dt{
	padding-top: 0.25em;
}
.features #common-feature .row dl:nth-child(1) dt,
.features #common-feature .row dl:nth-child(2) dt{
	padding-top: 0em;
}

}

@media screen and (min-width: 960px){
.features #common-feature .row dl{
	width: 32.3%;
	margin-left: 0.5%;
	margin-right: 0.5%;
}
.features #common-feature .row dl:nth-child(3){
	border-top-width: 0px;
}
.features #common-feature .row dl:nth-child(3) dt{
	padding-top: 0em;
}
}



/* /////////////////////////////////////////
 About page
///////////////////////////////////////// */
.about #profile,
.about #about{
	padding-top: 1em;
	padding-bottom: 3em;
}
.about #profile{
}
.about #profile table{
	width: 96%;
	margin-right: auto;
	margin-left: auto;
	box-sizing: border-box;
	table-layout: fixed;
}
.about #profile th{
	width: 25%;
	background-color: #FFF;
	border: 2px solid #F2F2F2;
	text-align: center;
	padding: 1em;
	font-weight: bold;
}
.about #profile td{
	font-size: 0.875em;
	width: auto;
	background-color: #FFF;
	border: 2px solid #F2F2F2;
	padding: 1em;

}
.about #profile td{
	word-wrap: break-word;
}
.about #profile td ul{
}
.about #profile td li{
	line-height: 1.5;
	margin-bottom: 0.5em;
}

.about #about{
	background-color: #FFF;
}
.about #about h3{
}
.about #about figure{
	width: 94%;
	text-align: center;
	display: block;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 1.5em;
}
.about #about figure img{
	width: 100%;
	height: auto;
	border-radius: 0.625em;
}
.about #about figure figcaption{
	font-size: 0.875em;
	padding: 0.25em;
	text-align: right;
	color: #A7A9AC;
}
.about #about figure figcaption span{
	display: inline-block;
}
.about #about .capt{
	width: 94%;
	font-size: 0.875em;
	background-color: #EEE;
	margin-left: auto;
	margin-right: auto;
	padding: 1%;
}

/* /////////////////////////////////////////
 Privacy page
 Site policy page
///////////////////////////////////////// */
.privacy #terms,
.policy #terms{
	padding-top: 1em;
	padding-bottom: 2em;	
}
.privacy #terms h2,.privacy #terms h3,.privacy #terms p,
.policy #terms h2,.policy #terms h3,.policy #terms p{
	background-color: #FFF;
}
.privacy #terms h3,
.policy #terms h3{
	padding-bottom: 0em;	
}
.privacy #terms p,
.policy #terms p{
	text-align: left;
	margin-bottom: 1em;
}
/* /////////////////////////////////////////
 Site plicy page
///////////////////////////////////////// */

/* /////////////////////////////////////////
 Contact page
///////////////////////////////////////// */
.contact #completion{
	padding-top: 1em;
	padding-bottom: 2em;	
}
.contact #completion p{
	text-align: left;
}
/* /////////////////////////////////////////
 Sitemap page
///////////////////////////////////////// */
.sitemap #sitemap{
	padding-top: 1.5em;
	padding-bottom: 1.5em;
}


.sitemap #sitemap h1,
.sitemap #sitemap h2,
.sitemap #sitemap h3{
	font-size: 1em;
	padding: 0.5em;
	text-align: left;
	margin: 0;
}

.sitemap #sitemap h1 a,
.sitemap #sitemap h2 a,
.sitemap #sitemap h3 a,
.sitemap #sitemap h2 .nolink{
	display: block;
	background-color: #FFF;
	box-sizing: border-box;
	padding: 0.5em;
	padding-right: 1.5em;
	padding-left: 1.5em;
	color: #221E1F;
	font-weight: bold;
	text-decoration: none;
	border-radius: 0.625em;
	position: relative;
	border: 1px solid #A7A9AC;

}

.sitemap #sitemap h1 .nolink,
.sitemap #sitemap h1 a{
	margin-left: 0em;
}
.sitemap #sitemap h2 .nolink,
.sitemap #sitemap h2 a{
	margin-left: 1.5em;
}
.sitemap #sitemap h3 .nolink,
.sitemap #sitemap h3 a{
	margin-left: 3em;
}
.sitemap #sitemap h1 a:hover,
.sitemap #sitemap h2 a:hover,
.sitemap #sitemap h3 a:hover{
	background-color: #F2F2F2;
}
.sitemap #sitemap h1 a:after,
.sitemap #sitemap h2 a:after,
.sitemap #sitemap h3 a:after{
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: 0.75em;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 0;
	border-top: solid 3px #221E1F;
	border-right: solid 3px #221E1F;
	-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
}
/* /////////////////////////////////////////
 Solutions index
///////////////////////////////////////// */
.solutions #solutions ul{
	display: block;
	padding: 0.5em;
}
.solutions #solutions ul li{
	background-color: #FFF;
	box-sizing: border-box;
	margin-bottom: 1px;
	position: relative;
	
}
.solutions #solutions ul li figure{
	display: flex;
	align-items: center;
}
.solutions #solutions figure img{
	display: block;
	width: 30%;
	height: auto;
	min-width: 150px;
	min-height: 150px;
	object-fit: cover;
	
}
.solutions #solutions figure figcaption{
	display: block;
	padding: 0.5em 1.5em 0.5em 0.5em;
	word-break: break-all;
}
.solutions #solutions figure figcaption span{
	font-size: 0.85em;
}
.solutions #solutions figure figcaption strong{
	font-weight: bold;
}

.solutions #solutions ul li a:after{
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: 15px;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 0;
	border-top: solid 3px #A7A9AC;
	border-right: solid 3px #A7A9AC;
	-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
}
.solutions #solutions ul li a{
	color: #A7A9AC;
	text-decoration: none;
	display: block;
	padding: 0.5em;
}
.solutions #solutions ul li a:hover{
	color: #265a72;
	background-color: #e9f9ff;
}
@media screen and (min-width: 600px){
.solutions #solutions ul{
	display: flex;
	flex-wrap: wrap;
}
.solutions #solutions ul li{
	width: 49%;
	margin: 0.5%;
}
.solutions #solutions ul li figure{
	display: block;
	text-align: center;
}
.solutions #solutions figure img{
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	
}
.solutions #solutions ul li a:after{
	display: none;
}
}
@media screen and (min-width: 960px){
.solutions #solutions ul li{
	/*width: 32%;*/
}
}

/* /////////////////////////////////////////
 Solutions page common
///////////////////////////////////////// */
/*- Heading */
.smartsign h2{
	margin-bottom: 1em;
}



/*- Visual */
.smartsign #visual,
.noborders #visual{
	padding-bottom: 1em;
}
.smartsign #visual h1,
.noborders #visual h1{	
	width:100%;
	height:auto;
	background-image:url(/lib/img/smartsign/line.png);
	background-repeat:no-repeat;
	background-position:bottom;
	background-size:contain;
}
/* /////////////////////////////////////////
 NoBorders page
///////////////////////////////////////// */
/*- features */
.noborders #features{
}
.noborders #features .features-group{
	text-align: center;
}
.noborders #features .column{
	padding: 0.5em;
	background-image:url(/lib/img/smartsign/line.png);
	background-repeat:no-repeat;
	background-position:bottom;
	background-size:contain;
	margin-bottom: 0.5em;
}
.noborders #features .column:last-child{
	background-image: none;
}
.noborders #features .column h3{
	font-size: 1.1em;
}
.noborders #features .column p{
	font-size: 0.9375em;
	padding-top: 0;
}
.noborders #features .column .notice{
	font-size: 0.85em;
}

/*- composer */
.noborders #composer{
	color: #FFF;
	padding-right: 1em;
	padding-left: 1em;
}
.noborders #composer h2{
}
.noborders #composer p{
}
.noborders #composer .notice{
	font-size: 0.8em;
	padding-top: 0;
}
.noborders #composer .composer-ui{
	margin: auto;
	max-width: 500px;
	max-height: 415px;
}
.noborders #composer figure{
	padding-left: 4.8%;
	padding-right: 4.8%;
	background-image: url(/lib/img/noborders/composer-image-bg.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;
	text-align: center;
	padding-bottom: 22.4%;
	padding-top: 4.8%;
}
.noborders #composer figure img{
}

/*- layout */
.noborders #layout{
}
.noborders #layout figure{
	text-align:center;
	line-height: 0;
}
.noborders #layout figure img{
	margin-bottom: 1px;
}

/*- scalability */
.noborders #scalability{
}
.noborders #scalability .scalability-group{
	padding: 1.5em;
}
.noborders #scalability .scalability-group dl{
	margin-bottom: 2em;
	background-color: #FFF;
	border-radius: 0.675em;
	padding: 1em;
	box-sizing: border-box;
	box-shadow: 0 0 2px 2px rgba(0,0,0,0.2);
}
.noborders #scalability .scalability-group dt{
	text-align: center;
}
.noborders #scalability .scalability-group dt img{
	width: 100%;
}
.noborders #scalability .scalability-group dd{
}



@media screen and (min-width: 600px){
/*- layout */
.noborders #layout{
}
.noborders #layout figure{
	
}
.noborders #layout figure img{
	max-width: 50%;
}
/*- scalability */
.noborders #scalability{
}
.noborders #scalability .scalability-group{
	padding: 1.5em;
}
.noborders #scalability .scalability-group dl{
	display: flex;
	margin-bottom: 1em;
}
.noborders #scalability .scalability-group dt{
	line-height: 0;
}
.noborders #scalability .scalability-group dt img{
	width: auto;
}
.noborders #scalability .scalability-group dd{
	width: 60%;
	margin-left: 1.5em;
}
}
@media screen and (min-width: 960px){
/*- features */
.noborders #features{
}
.noborders #features .features-group{
	text-align: center;
	display: flex;
	justify-content: space-between;
}
.noborders #features .column{
	width: 328px;
	padding: 5px;
	background-image:none;
	margin-bottom: 4em;
}
.noborders #features .column:last-child{
}
.noborders #features .column h3{
}
.noborders #features .column p{
}
.noborders #features .column .notice{
}
/*- composer */
.noborders #composer{
	padding-right: 0;
	padding-left: 0;
}
.noborders #composer .inner{
	display: flex;
	justify-content: space-between;
}
.noborders #composer .composer-text-group{
	max-width: 477px;
}
.noborders #composer h2{
}
.noborders #composer p{
}

.noborders #composer .composer-ui{
	width: 500px;
	height: 415px;
	margin-top: -68px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}
.noborders #composer figure{
	padding-left: 4.8%;
	padding-right: 4.8%;
	background-image: url(/lib/img/noborders/composer-image-bg.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;
	text-align: center;
	padding-bottom: 22.4%;
	padding-top: 4.8%;
}
.noborders #composer figure img{
}

/*- scalability */
.noborders #scalability{
}
.noborders #scalability .scalability-group{
	padding: 0;
	display: flex;
	justify-content: space-between;
}
.noborders #scalability .scalability-group dl{
	width: 328px;
	display: block;
	margin-bottom: 2em;
	background-color: transparent;
	border-radius: 0;
	padding: 5px;
	box-sizing: content-box;
	box-shadow: none;
}
.noborders #scalability .scalability-group dt{
	
}
.noborders #scalability .scalability-group dt img{

}
.noborders #scalability .scalability-group dd{
	width: 100%;
	margin: 0;
	text-align: center;
	font-size: 0.9375em;
	padding: 1em 0;
}
.noborders #scalability .scalability-group dd span{
	display: inline-block;

}
}
/* /////////////////////////////////////////
 SmartSign page
///////////////////////////////////////// */

.smartsign #visual p:last-child{
	font-size: 0.85em;
}

/*- Points */
.smartsign #points {
	text-align:center;
}

.smartsign #points .column{
	background-color: #FFF;
	border: 3px solid #7DAABF;
	box-sizing: border-box;
	width: 92%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 1em;
	margin-bottom: 1em;
	border-radius: 0.9375em;
	padding-right: 1em;
	padding-left: 1em;
	padding-top: 2em;
	padding-bottom: 2em;

}

.smartsign #points .point-icon{
}

.smartsign #points .point-icon img{

}
.smartsign #points h3{
	font-size: 1em;
	font-weight: bold;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
.smartsign #points p{
	font-size: 0.9375em;
	padding: 0;
	text-align: center;
}
.smartsign #points p span{
	display: inline-block;
}

.smartsign #points .point-group{
	width: 96%;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (min-width: 600px){
.smartsign #points .column{
	width: 48%;
	margin-left: 1%;
	margin-right: 1%;
	margin-bottom: 0.5em;
	margin-top: 0.5em;
	float: left;
	height: 20em;
}
.smartsign #points .point-icon{
}
.smartsign #points h3{	
}
.smartsign #points p{
}

}


@media screen and (min-width: 960px){
.smartsign #points .point-group{
	width: 99%;
	margin-left: auto;
	margin-right: auto;
}
.smartsign #points .column{
	width: 24%;
	margin-left: 0.5%;
	margin-right: 0.5%;
	margin-bottom: 0.5em;
	margin-top: 0.5em;
	float: left;
	height: 22em;
	padding-right: 5px;
	padding-left: 5px;
}
.smartsign #points .point-icon{
}
.smartsign #points h3{
}
.smartsign #points p{
	font-size: 0.875em;
}

}

/*- Steps */

.smartsign #steps #step {
	width: 94%;
	margin: 45px auto 0 auto;
}

.smartsign #steps #step li{
	background-color:#FCFCFC;
	box-shadow: 0 0 2px 2px rgba(0,0,0,0.2);
	padding: 45px 1em 1em 1em;
	margin: 0 0 60px 0;
}

.smartsign #steps #step li:last-child{
	margin-bottom: 1em;
}

.smartsign #steps #step li .icon {
	display: block;
	margin: -90px auto 0 auto;
}

.smartsign #steps #step li .image {
	max-width:100%;
	height:auto;
	display: block;
	margin: 0 auto;
	padding: 0.5em;
}

.smartsign #steps p {
	font-size: 0.85em;
}

@media screen and (min-width: 600px){

.smartsign #steps #step li{
	position: relative;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	padding-top: 60px;
}

.smartsign #steps #step li .icon {
	position: absolute;
	left: 0;
	right: 0;
	margin-top: -105px;
}

.smartsign #steps #step li .image {
	float:left;
	margin-right: 0;
	display: inline;
}

.smartsign #steps p {
}


}


@media screen and (min-width: 960px){

.smartsign #steps #step{
	width: 100%;
}

.smartsign #steps #step li{
	text-align: center;
	width: 30.3%;
	min-height: 22em; 
	padding: 45px 0.5% 0 0.5%;
	margin: 0 1%;
	display: block;
	float: left;
}

.smartsign #steps #step li:last-child{
}

.smartsign #steps #step li .icon {
	margin-top: -90px;
}

.smartsign #steps #step li .image {
	padding: 0 0 1.5em 0;
	float: none;
	max-width: 100%;
	height: auto;
}
.smartsign #steps #step li span{
	display: inline-block;
}
.smartsign #steps p {
}

}

/*- Templates */

.smartsign #templates {
	
}

.smartsign #templates ul{
	text-align:center;
	border-bottom: 1px solid #CCC;
	padding: 1em 0;
	margin: 0 0 1em 0;
}

.smartsign #templates ul li {
	max-width: 48%;
	margin: 1%;
	display:inline-block;
	vertical-align: middle;
}	

.smartsign #templates ul li img {
	max-width: 100%; 
	height:auto;
	background-color:#EEE;
}

.smartsign #templates .item,
.smartsign #templates .item-last{
	margin-right: 1em;
	margin-left: 1em;
	padding-bottom: 2em;
	text-align:center;
}

.smartsign #templates .summary h3{
	font-size: 1.375em;
	font-weight: bold;
	color: #3A3A3C;
}

.smartsign #templates .summary p {
	
}

.smartsign #templates .feature-image img{
	max-width:100%;
	height:auto;
}

.smartsign #templates .item{
	border-bottom-width: 3px;
	border-bottom-style: dotted;
	border-bottom-color: #A7A9AC;
}



@media screen and (min-width: 600px){
	
.smartsign #templates{
}
	
.smartsign #templates ul{
	max-width: 600px;
	margin: 0 auto 1em auto;
}

.smartsign #templates ul li {
	max-width: 32.3%;
	margin: 0.5%;
}	

.smartsign #templates ul li img {
}
	
}

@media screen and (min-width: 960px){

.smartsign #templates{
}
	
.smartsign #templates ul{
	max-width: 1000px;
	margin: 0 auto 2em auto;
	border-bottom: none;
}
	
.smartsign #templates ul li {
	max-width: 19%;
	margin: 0.5%;
}

.smartsign #templates ul li img {
}

.smartsign #templates h3{
	display:block;
	padding-left: 0.0em;
	padding-right: 0.0em;
	margin-top:2em;
}
.smartsign #templates p{
	text-align: center;
	font-size: 1em;
	padding-left: 0.25em;
	padding-right: 0.25em;
	line-height: 2;
}

.smartsign #templates .summary p {
	text-align:center;
}

.smartsign #templates .item{
	margin-bottom: 2em;
}

.smartsign #templates .item-last{
	margin-bottom: 2em;
}

.smartsign #templates .odd .summary{
	float: left;
}
.smartsign #templates .odd .feature-image{
	float: right;
	margin-right: 0.5%;
}
.smartsign #templates .even .summary{
	float: right;
}
.smartsign #templates .odd .summary,
.smartsign #templates .even .summary{
	width: 49%;
}
.smartsign #templates .even .feature-image{
	float: left;
	margin-left: 0.5%;
}
.smartsign #templates .odd .feature-image,
.smartsign #templates .even .feature-image{
	width: 49.5%;
	max-width: 480px;
}

}


/*- Hardware */
.smartsign #hardware .manufacture {
	width: 94%;
	background-color:#fff;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2em;
	border-radius: 0.675em;
	text-align: center;
	padding: 1em;
	box-sizing: border-box;
	box-shadow: 0 0 2px 2px rgba(0,0,0,0.2);
}

.smartsign #hardware .manufacture h3 {
	padding: inherit 0 inherit 0;
	line-height: 1.25;

}
.smartsign #hardware .manufacture h3 span{
	font-size: 0.85em;
}

.smartsign #hardware .manufacture h3 img{
	padding: 0.5em;
}

.smartsign #hardware .manufacture .product-image {
	max-width:100%;
	height:auto;
	margin-bottom:1em;
}

.smartsign #hardware .manufacture .product-image img {
	max-width:100%;
	height:auto;
}

.smartsign #hardware .manufacture ul {
	text-align:left;
}

.smartsign #hardware .manufacture ul li {
	margin-top:0.5em;
}

.smartsign #hardware .manufacture ul li::before{
	color:#F00;
}

.smartsign #hardware .manufacture ul li span{
	display: inline-block;
}

.smartsign #hardware .manufacture h4{
	font-size:1.3em;
	font-weight:bolder;
	margin-top:2em;
	margin-bottom:1em;
}

.smartsign #hardware .manufacture p{

	
}

.smartsign #hardware .manufacture .btn{
	margin-top:30px;
	margin-bottom:50px;
}

@media screen and (min-width: 600px){
	
.smartsign #hardware .manufacture {
}

.smartsign #hardware .manufacture h3 {
	padding: inherit 0 inherit 0;
	line-height: 1.5;

}.smartsign #hardware .manufacture h3 span{
	font-size: 1em;
}

.smartsign #hardware .manufacture ul {
	display:inline-block;
	font-size:120%;
}

.smartsign #hardware .manufacture ul li::before{
}

.smartsign #hardware .manufacture h4{
}


}

@media screen and (min-width: 960px){
.smartsign #hardware .product-image {
	padding-left: 2.5%;
	width:43%;
	height:auto;
	float:left;
}

.smartsign #hardware .manufacture .summary {
	width:95%;
	margin:0 auto;
}

.smartsign #hardware .manufacture ul {
	max-width:52.5%;
	font-size:120%;
	float:left;
	margin-top:50px;
	margin-left:2%;
}



.smartsign #hardware .manufacture ul li{
	margin-top:1em;
	font-size:80%;
}

}

/*-- Hardware > table */
.smartsign #hardware table{
	width: 100%;
}
.smartsign #hardware thead{
	display: none;
}
.smartsign #hardware tbody{
	display: block;
	border: 1px solid #ccc;
	margin: 0 0 1em 0;
	padding: 0.5em;
}
.smartsign #hardware tr{
	display: block;
}
.smartsign #hardware th,
.smartsign #hardware td{
	display: block;
	font-weight: bold;
	text-align: center;

}
.smartsign #hardware th{
	background-color: #eee;
	
}
.smartsign #hardware td{
	padding: 0.5em;
	border-bottom: 1px solid #eee;
}
.smartsign #hardware td:last-child{
	border-bottom: 0px;
}
.smartsign #hardware td:before{
	content: attr(title);
	color: #666;
	display: block;
	font-size: 0.8em;
	background-color: #f9f9f9;
	border-radius: 1em;
	margin: 0.25em 2em;
	padding: 0.25em
}

@media screen and (min-width: 600px){


.smartsign #hardware table{
	
}
.smartsign #hardware thead{
	
}
.smartsign #hardware tbody{
	box-sizing: border-box;
	width: 48%;
	float: left;
	margin: 0 1% 1em 1%;
}
.smartsign #hardware tr{
}
.smartsign #hardware th{
}
.smartsign #hardware td{
}
.smartsign #hardware th,
.smartsign #hardware td{
}
.smartsign #hardware td:last-child{
}
.smartsign #hardware td:before{
}
}

@media screen and (min-width: 960px){
.smartsign #hardware table{
	width: 70%;
	margin: 0 auto;
}
.smartsign #hardware thead{
	display: table-header-group;
}
.smartsign #hardware tbody{
	border: none;
	display: table-row-group;
	float: none;
}
.smartsign #hardware tr{
	border: none;
	display: table-row;
}
.smartsign #hardware th{
	vertical-align: middle;
}
.smartsign #hardware td{
}
.smartsign #hardware th,
.smartsign #hardware td{
	padding: 0.5em;
	background-color: #eee;
	border: 1px solid #fff;
	display: table-cell;
}
.smartsign #hardware td:last-child{
}
.smartsign #hardware td:before{
	display: none;
}
}

/*-- Hardware > price */

.smartsign #hardware dl{
	background-color: #FFF;
	width: 94%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
	border: 3px solid #7DAABF;
	border-radius: 0.625em;
	box-sizing: border-box;
	padding: 1em;
}
.smartsign #hardware dt{
	padding: 0.5em;
	text-align: center;
}
.smartsign #hardware dt img {
	max-width: 100%; 
	height:auto;
}

.smartsign #hardware dd{
	padding-bottom:0.5em 0;
	font-weight:bold;
	font-size:150%;
}

.smartsign #hardware dd .tax {
	font-size:60%;
}


@media screen and (min-width: 600px){

.smartsign #hardware dl{
}

.smartsign #hardware dt{
	display:block;
	margin: 0 auto;
	text-align: center;
	padding: 1em;
}

.smartsign #hardware dt img {
}

.smartsign #hardware dd{
	display:block;
	font-size:2em;
}

}


@media screen and (min-width: 960px){
	
.smartsign #hardware dl{
}

.smartsign #hardware dl dt,
.smartsign #hardware dl dd{
	display: inline-block;
	margin: 0;
	vertical-align: middle;
}
	
.smartsign #hardware dl dt{
}

.smartsign #hardware dl dd{
}

}


/*- Options */

.smartsign #options p {
	max-width:100%;
	height:auto;
}

.smartsign #options p img{
	max-width:100%;
	height:auto;
}

.smartsign #options .btn {
	margin-top:30px;
	margin-bottom:50px;
}


/*- FAQ */

.smartsign #faq{
	padding-bottom:3em;
}

.smartsign #faq dl {
	width:90%;
	background-color:#fff;
	font-size:0.9em;
	margin: 1em auto;
	padding: 1em;
	display:block;
	position:relative;
	
}

.smartsign #faq .ic-help {
	line-height: 1.5;
	font-weight:bold;
	display:inline-block;
	font-size:1em;
	vertical-align: middle;
	min-height: 2.5em;
	margin-bottom: 0.5em;
	padding: 0.25em 0 0 2rem;
}

.smartsign #faq .ic-help:before {
	content: '\E070';
	font-size: 2.5rem;
	line-height: 1;
	color:#26C7F3;
	display:inline-block;
	position:absolute;
	left:0.25em;
	top:0.25em;
}

.smartsign #faq dd {
	background-color:#EEE;
	padding:1em;
	border-radius:15px;
}

@media screen and (min-width: 600px){
.smartsign #faq{
}

.smartsign #faq dl {
	font-size:1em;
}

.smartsign #faq .ic-help {

}

.smartsign #faq .lsf-icon.ic-help:before {
}

.smartsign #faq dd {
	line-height:1.5;
}
}

@media screen and (min-width: 960px){
.smartsign #faq h2 {
}

.smartsign #faq dl {

}

.smartsign #faq .ic-help {
	margin-bottom: 0.25em;
}

.smartsign #faq .lsf-icon.ic-help:before {

}

.smartsign #faq dd {

}
}

/*- Contact */

.smartsign #contact h3 {
	color:#fff;
	font-size:1em;
	padding:0.5em 0 0.5em 0;
	text-align:left;
}

/*-- Contact > privacy */
.smartsign #contact .form-check{
	margin-bottom: 2em;
}
.smartsign #contact .privacy{
	background-color: #FCFCFC;
	height: 15em;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.smartsign #contact .privacy h3,
.smartsign #contact .privacy p{
	color: #000;
}
.smartsign #contact .privacy h3{
	text-align: center;
	font-weight: bold;
}
.smartsign #contact .privacy h3{
	font-size: 1em;
}
.smartsign #contact .privacy p{
	font-size: 0.90em;
	text-align: left;
	margin-bottom: 1em;
}

.smartsign #contact .form-check .coution{
	border-bottom: 1px solid #CCC;
}

.smartsign #contact .form-check .check-box{
	text-align: center;
	border-top: 1px solid #EEE;
}
.smartsign #contact .form-check .check-box label{
	display: block;
}

.smartsign #contact .form-check .check-box #send-privacy,
.smartsign #contact .form-check .check-box label span{
	min-height: 1em;
	vertical-align: middle;
}

.smartsign #contact .form-check .check-box #send-privacy{
	display: inline-block;
	width: 8%;
}

@media screen and (min-width: 600px){
.smartsign #contact .privacy{
}
.smartsign #contact .form-check .check-box #send-privacy{
	width: 4%;
}
}
@media screen and (min-width: 960px){
.smartsign #contact .privacy{
}
.smartsign #contact .privacy p{
	padding: 1em 3em;
}
.smartsign #contact .form-check .check-box #send-privacy{
	width: 20px;
}
}

/*-- Contact > select subject */

.smartsign #contact #select-subject{
	width:100%;
	margin: 0 auto;
}

.smartsign #contact #select-subject li label {
	background-color:#fff;
	border-radius:50px;
	text-align:left;
	padding-left:1em;
	padding-top:0.3em;
	padding-bottom:0.5em;
	height:2em;
	margin:10px 2px;
	display:block;
	font-size:0.85em;
}

.smartsign #contact #select-subject input {
	width:10px;
	display:inline;
	vertical-align:middle;
	margin-right:0.5em;
	-webkit-transform:scale(2,2);
	-moz-transform:scale(1.25,1.25);
	transform:scale(2,2);
}

@media screen and (min-width: 600px){
.smartsign #contact #select-subject{
}

.smartsign #contact #select-subject li label {
	font-size:1em;
	font-weight:bold;
}

.smartsign #contact #select-subject li label:hover{
	opacity: 0.95;
	cursor: pointer;
}

.smartsign #contact #select-subject input {
}
}


@media screen and (min-width: 960px){

}


/*-- Contact > estimate > display num */

.smartsign #contact #group-estimate .display {
	background-color:#fff;
	padding:0.5em;
}

.smartsign #contact #group-estimate .display dl {
	padding: 4%;
	margin-bottom:0.5em;
	display:block;
	border-bottom: 1px solid #CCC;
}

.smartsign #contact #group-estimate .display dl:last-child {
	margin-bottom:0;
	border-bottom: none;
}

.smartsign #contact #group-estimate .display dt {
	color:#000;
	font-size:0.8em;
	font-weight:bold;
	margin-bottom:1em;
	background-color: #EEE;
	padding: 0.25em;
}

.smartsign #contact #group-estimate .display dd {
	padding-left:1em;
	margin-bottom:0.75em;

}

.smartsign #contact #group-estimate .display dd label {
	color:#000;
	font-weight:bold;
	display:block;
}

.smartsign #contact #group-estimate .display dd label .display-size {
	display:block;
	font-weight:bold;
}

.smartsign #contact #group-estimate .display input{
	width:70%;
	text-align:center;
}


@media screen and (min-width: 600px){
.smartsign #contact #group-estimate .display {
	padding:4%;

}

.smartsign #contact #group-estimate .display dl {
	padding:3%;
	background-color: #EEE;
	border-radius:10px;
	border-bottom: none;
}

.smartsign #contact #group-estimate .display dt {
	font-size:1em;
	padding:0 0 0.5em 0.5em;
	margin-bottom:0;
}

.smartsign #contact #group-estimate .display dd {
	width:49%;
	padding:0;
	margin-bottom:0;
	display:inline-block;
}

.smartsign #contact #group-estimate .display dd label .display-size{
	display:inline;
}

.smartsign #contact #group-estimate .display dd label {
	padding:0 0.5em;
	vertical-align:baseline;
	text-align:left;
}

.smartsign #contact #group-estimate .display label input.g3{
	width:5em;
	margin:0 0.1em;
}

}

@media screen and (min-width: 960px){
.smartsign #contact #group-estimate .display {
	padding:1em;
}

.smartsign #contact #group-estimate .display dl {
	padding:1em;
}

.smartsign #contact #group-estimate .display dt {
	padding-bottom:1em;
}

.smartsign #contact #group-estimate .display dd {
	width:40%;
	padding-left:3em;
}

.smartsign #contact #group-estimate .display dd label .display-size{

}

.smartsign #contact #group-estimate .display dd label {

}

.smartsign #contact #group-estimate .display label input.g3{
	width:10em;
	margin:0 0.1em;
}

}

/*-- Contact > estimate > option */

.smartsign #contact #group-estimate li {
	margin:0.5em 0;
}

.smartsign #contact #group-estimate li label {
	font-size:1em;
	min-height:1em;
	padding:0.5em;
	display:block;
	background-color:#fff;
}

.smartsign #contact #group-estimate li #option1,
.smartsign #contact #group-estimate li #option2,
.smartsign #contact #group-estimate li #option3,
.smartsign #contact #group-estimate li #option4,
.smartsign #contact #group-estimate li #option5,
.smartsign #contact #group-estimate li #option6,
.smartsign #contact #group-estimate li #option7 {
	width:8%;
	display:inline-block;
	min-height: 1em;
	vertical-align: middle;
	-webkit-transform:scale(1,1);
	-moz-transform:scale(1.25,1.25);
	transform:scale(1,1);
}

.smartsign #contact #group-estimate li .option-label {
	width: 85%;
	vertical-align:middle;
	display:inline-block;
	min-height: 1em;
	padding: 0.5em 0;
	margin-left:2%;
	font-weight:bold;
}

@media screen and (min-width: 600px){
.smartsign #contact #group-estimate li {
	width: 48%;
	margin: 1% 1%;
	float: left;
}


.smartsign #contact #group-estimate li label {	
}

.smartsign #contact #group-estimate li #option1,
.smartsign #contact #group-estimate li #option2,
.smartsign #contact #group-estimate li #option3,
.smartsign #contact #group-estimate li #option4,
.smartsign #contact #group-estimate li #option5,
.smartsign #contact #group-estimate li #option6,
.smartsign #contact #group-estimate li #option7 {
	min-height: 3.5em;
}

.smartsign #contact #group-estimate li label:hover{
	opacity: 0.95;
	cursor: pointer;
}

.smartsign #contact #group-estimate li .option-label {

}
}

@media screen and (min-width: 960px){
.smartsign #contact #group-estimate li {
	width: 49.5%;
	margin: 0.25%;
}

.smartsign #contact #group-estimate li label {
  padding:0.25em 0.25em 0.25em 1em;
}

.smartsign #contact #group-estimate li #option1,
.smartsign #contact #group-estimate li #option2,
.smartsign #contact #group-estimate li #option3,
.smartsign #contact #group-estimate li #option4,
.smartsign #contact #group-estimate li #option5,
.smartsign #contact #group-estimate li #option6,
.smartsign #contact #group-estimate li #option7 {
	width:20px;
	min-height: 3em;
}
}


/*-- Contact > estimate > delivery */

.smartsign #contact #group-estimate .column {
	padding:2em 0 1em 0;
}

.smartsign #contact #group-estimate .row dl dt label {
	
}


/* /////////////////////////////////////////
 404 page
///////////////////////////////////////// */
.notfound #message{
	padding-top: 1em;
	padding-bottom: 2em;	
}
/* /////////////////////////////////////////
 Debug
///////////////////////////////////////// */

/*
@media screen and (max-width: 599px){
body:before{
	content:"SF";
}


}
@media screen and (min-width: 600px){
body:before{
	content:"TB";
}
}
@media screen and (min-width: 960px){
body:before{
	content:"PC";
}
}
*/