/* default mobile */
.box-bg { background-color: white; }
.bgry{background-color:#eee;}
.bdark{background-color:#888;}
.blite{background-color:#f8f8f8;}
.gry{color:#eee;}
.dark{color:#888;}
.full{width:100%;}		
.bb{ background-color:black !important; }
.w { color:white !important; }
.bw { background-color:white !important; }
.clr, .clear{ clear:both; min-height: 1px; }
.b{background-color:black !important;}
.compact{ padding:0; margin:0; }		
.toright{float:right;}
.toleft{float: left;}
.hide{display:none;}

.space{margin:2px !important;}
.morespace{margin:4px !important;}
.hugespace{margin:12px !important;}

.pad{padding:1px;}	
.xpad{padding:2px !important;}
.xxpad{padding:4px !important;}
.xxxpad{padding:12px !important;}

.mid{vertical-align: middle !important;}
.tocenter{text-align: center; margin-left:auto; margin-right:auto;}		
.block{ display:block}
.iblock{ display:inline-block !important; }
.bl{font-weight: 540;}/*lite bold*/
.bld{font-weight: 700;} /*bold=700*/

.xrnd{border-radius: 5px;}
.xxrnd{border-radius: 8px;}
.xxxrnd{border-radius: 10px;}
.pline{border-top: 1px solid #ff5252;}

.tx1{font-size:2.6em;}
.tx2{font-size:2.2em;}
.tx3{font-size:1.8em;}
.tx35{font-size:1.2em;}
.tx4{font-size:1em;}
.tx45{font-size:0.8em !important;}
.tx5{font-size:0.5em;}
.lpad{padding-left:4px;}
.xlpad{padding-left:8px;}
.xxlpad{padding-left:16px;}
.tpad{padding-top:4px;}
.xtpad{padding-top:8px;}
.xwrap { white-space: nowrap; }
.shorter{margin-top: 0.0em; margin-bottom: 0.0em; -webkit-margin-before: 0.0em; -webkit-margin-after: 0.0em;}
.nodeco{text-decoration: none;}

.sc-y{
	overflow-y: auto;
	overflow-x: hidden;
	xheight:700px;
	xposition: absolute;
	top:0;
	bottom: 0;
}


/* for shadown use mdl-shadow--2dp */
.tbdr{ border: 1px solid #ddd; text-align: center; vertical-align: middle; padding: 10px 0px 4px 0px !important; }
.nbdr{ border:0; }

/* base color scheme paletton.com */
.color1{background-color:#FFF8C4 !important;}
.color1b{background-color:#FFF5A9 !important;}
.color2{background-color:#FFC4E2 !important;}
.color2b{background-color:#FFA9D5 !important;}
.color3{background-color:#C4FFF7 !important;}
.color3b{background-color:#A9FFF3 !important;}
.color4{background-color:#E9FFC4 !important;}
.color4b{background-color:#DFFFA9 !important;}

.color-ivory-b {background-color:#f5f5e1 !important;}
.color-royal-wood-b{background-color:#c2c2a3 !important;}
.color-shine{color:#ffff1a !important;}
.color-fade{color:#888 !important;}
.shine::first-letter {color:#ffff1a !important; margin-left:10px;}

/*
build-in
----------------------
mdl-cell--hide-desktop
mdl-cell--hide-tablet
mdl-cell--hide-phone 
*/

/* wider screen */
@media screen and (min-width: 480px) {
	
    .box-bg { background-color: white; }
	.pad{padding:5px !important;}	
	.space{margin:5px !important;}
	.morespace{margin:10px !important;}	

}
/* phone screen */
@media screen and (max-width: 480px) {

	.mdl-layout__header-row .mdl-navigation__link {
		padding: 0 5px;
		line-height: 1.5em;
		width:60px;
	}

}

@media screen and (min-width: 1010px) {
	.build-block { max-width:1010px; padding:10px; }

}

/*********************layout*************************/
/* ihuat scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #888; }
::-webkit-scrollbar-thumb:hover { background: #555; }

a{color:#888;text-decoration: none;}
a:hover{color:black;}
a:active{color:red;}

.hovgry { background-color:none !important; }
.hovgry:hover{background-color:#eee !important;}

/*********************4d result block*************************/
.result-card-table{
	border-spacing: 0px;
	border-collapse: collapse;
}

.result-card-wide.mdl-card {
	width: 100%;
	xbackground: url('https://d1yn1kh78jj1rr.cloudfront.net/preview/seamless-sky-and-clouds-vector_Gyu8b9Ou_M.jpgx') no-repeat #fff center center;
	xbackground-image: url('http://www.designbolts.com/wp-content/uploads/2012/12/Diamond-Eyes-White-Seamless-Textures.jpg');
	background-color:#fff;
	background-size: cover;
	xborder-style: solid;
    xborder-width: 2px;
	xborder-color:#f8f8f8;
}
.result-card-wide > .mdl-card__title {
	color: #555;
	background-color: none;
	height: 59px;	
	overflow:hidden;
	font-size:1.6em;
}
.result-card-wide > .mdl-card__menu {
	color: #fff;
}

.result-card-table .rs {
	color: #000;
}

.b4d{
	width: 19%;
	height:1.59em;
}

.bigbg{
	background-color:white;
}

.quick-link .mdl-list__item{
	padding:0px 0px 0px 8px !important;
	min-height: 42px !important;
}

.about-ribbon {
  width: 100%;
  height: 40vh;
  background-color: #c2c2a3;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}

.about-main {
  margin-top: -35vh;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}

.about-header .mdl-layout__header-row {
  padding-left: 40px;
}

.about-container {
	max-width: 1600px;
    width: calc(100% - 16px);
    margin: 0 auto;
    xposition: absolute;
    top: 250px;
}

.about-content {
  border-radius: 2px;
  padding: 80px 56px;
  margin-bottom: 80px;
}

.about-layout.is-small-screen .about-content {
  padding: 40px 28px;
}

.about-content h3 {
  margin-top: 20px;
}