/* =====================================================
 * http://www.kessil.com/
 * Copyright 2016, kessil
 * By Monica Nov 2016
======================================================= */
@font-face {font-family: SF; src: url(../font/SF-UI-Display-Medium.otf);}
@font-face {font-family: SFBold; src: url(../font/SF-UI-Display-Bold.otf);}

/********************************************************************************************************************************
  ALL STYLING
 ********************************************************************************************************************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;	padding: 0;	border: 0;	outline: 0;	vertical-align: baseline;/* bottome, middle, top*/	background: transparent; font-weight:normal; }
IMG,INPUT ,BUTTON ,SELECT ,TEXTAREA ,LABEL{	VERTICAL-ALIGN: middle;}	
div{ width:100%;}
ol, ul {list-style: none; padding-top:5px;}
.sup { vertical-align: super; line-height:16px; font-size: 50%;}
a,input{text-decoration:none;	outline: none; 	blr: expression(this.onFocus=this.blur());  /*forIE*/	cursor:pointer;}
/*all*/
body{ background:#fff;font-family: 'SF', sans-serif; } 
.Separator{ clear:both; width:100%; height:5px; border-bottom:1px solid #dad9d7; margin-bottom:10px; padding-top:10px;}
/*main*/
.a_title,.title_a{font-size:22px; line-height:45px;color:#6d91b3;}
/*conterBox*/
h1{font-family: 'SF', sans-serif;font-size:26px; }
#conterBox h1{ font-size:26px; line-height:35px;}
#conterBox h2{ font-size:22px; line-height:35px;}
#conterBox h3{ font-family: 'SFBold', sans-serif;font-size:17px; line-height:25px;}
p{font-family: 'SF', sans-serif;font-size:16px; color:#231815; line-height:24px; text-align: justify;}
.p_bold { font-weight:bold;}
#conterBox p a{ color:#333; }
#conterBox .color3{color:#e4007f;}/*pink-note*/
.conter_A .con_title{ color: #356f79;/* text-align:center;  text-decoration:underline;*/}

/********************************************************************************************************************************
  ALL LAYOUT 
 ********************************************************************************************************************************/
html, body, #wrapper { width:100%; height: 100%;}
body > #wrapper {height: auto; min-height: 100%;}
#main {padding-bottom: 50px; margin:0 auto;width:100%;}
clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
.topbar{ width:100%; height:5px;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

img{ max-width:100%; height:auto;}
.clear{ clear:both}

/********************************************************************************************************************************
  CONTER LAYOUT 
 ********************************************************************************************************************************/
#conter{width:100%; margin:10px auto;}
.left{ float: left;}
.right{ float: right;}
.titleBox{ width:100%; height:auto; margin:20px auto; padding: 20px 0; box-shadow: 0 5px 5px #bbbbbb; text-align:center;}
.title{ font-size:17px; margin-top:5px;}
.titleBox p{ text-align:center; color: #999; font-size:12px;}
.indexDown {width:100%; display:block; height:10px; margin-top:10px; box-shadow: 0 -5px 5px #bbbbbb; text-align:center;}
.index { width:100%;text-align:center;font-size:24px; line-height:35px; color: #356f79; margin-top:10px;}
.index a{ text-decoration:none; color: #356f79; }
#conterBox{ width:100%;}

.getting{ width:90%; margin:0 auto;}
.getting_step{ clear:both;}
.getting_step_all{ width:100%; padding:2%;}
.getting_step_img{ width:100%; }
.getting_step_w1{ margin-top:25px;width:50%; padding:2%;}
.getting_step_w2{ width:40%; padding:2%;}
.getting_step_w2 img{ border: 1px solid #333;}

.getting h2{ width:100%; font-family: 'SF', sans-serif;font-size:18px;line-height:24px; padding:5px 0;}
.getting .title{ width:100%; font-family: 'SF', sans-serif;font-size:18px;line-height:24px; padding:5px 0;}
.getting .step{ font-size:16px; color:#FFF; background:#00758C; padding:5px 10px; border-radius:15px;}
.getting_step_w1 a{ text-decoration:none; color: #356f79 !important; }
.p_nav {padding-left:24px; line-height: 20px; margin-bottom: 10px;}
.p_nav2 { padding-bottom: 5px;}
.getting_step .item{ font-family:SFBold; font-weight:bold; font-size:16px;}
.getting_step ul{ padding-left:20px;}
.getting_step li{ list-style: disc; color:#00758C; font-size:18px; padding:5px 0;  }
.digital li{ list-style: decimal;}
.getting_step li ul{ padding-left:15px;}
.getting_step li ul li{ list-style: lower-roman;}

.w60{ width:60%;}
.w30{ width:30%;}
.w45{ width:45%;}

.ledIndicators{display:block; width:30px; height:30px;border-radius: 50%; float:left; margin-right:10px;}
.ledText{ width:calc(100% - 50px);float:left;}

/*==================================RESPONSIVE LAYOUTS===============================================*/
@media only screen and (max-width: 980px) {
	.getting_step_w1,.getting_step_w2,.getting_step_w3,.getting_step_w4,.getting_step_w6,.w60,.w30,.w45{ width:95%; margin-top:0px;}
}

@media only screen and (max-width: 480px) {
	body,#main{width:100%;}
	#conter{ width:95%;}

	.left{ float:none;}
	.right{ float:none;}
	
	.controllerImg{width:100%; background: none;}
	.controllerIfram{position: relative; margin: auto;}
    .getting_step_img{ width:90%; max-width:260px; margin:8px 0; text-align:left;}
	.getting_mounting_step{ width:98%;}
	
}

.cd-top {
  display: block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 20px;
  right: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  border-radius: 3px;
  /* image replacement properties */
  background: rgba(0, 115, 133, 0.8);
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}
.no-touch .cd-top:hover {
  background-color: #e86256;
  opacity: 1;
}