/*

 *这是单独为hello mui准备的个性化css，可以覆盖标准mui的css定义；

 * 在实际项目开发时，建议为App单独写一个css文件，从而实现项目的自定义皮肤功能；

 * 

 * */

.mui-plus header.mui-bar{

	display: none;

}

.mui-plus .mui-bar-nav~.mui-content{

	padding: 0;

}



/*hm开头的表示仅为 Hello MUI示例定义*/

.hm-description{

	margin: .5em 0;

}



.hm-description>li {

	font-size: 14px;

	color: #8f8f94;

}





Main components 



-------------------------------- */

.cd-popup-trigger {

  display: block;

  width: 170px;

  height: 50px;

  line-height: 50px;

  margin: 3em auto;

  text-align: center;

  color: #FFF;

  font-size: 14px;

  font-size: 0.875rem;

  font-weight: bold;

  text-transform: uppercase;

  border-radius: 50em;

  background: #35a785;

  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07);

}

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

  .cd-popup-trigger {

    margin: 6em auto;

  }

}



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, 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,

article, aside, canvas, details, embed, 

figure, figcaption, footer, header, hgroup, 

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

	margin: 0;

	padding: 0;

	border: 0;

	font-size: 100%;

	vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 

footer, header, hgroup, menu, nav, section, main {

	display: block;

}



ol, ul {

	list-style: none;

}

blockquote, q {

	quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

	content: '';

	content: none;

}



*, *:after, *:before {

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}

/* -------------------------------- 



xpopup 



-------------------------------- */

.cd-popup {

  position: fixed;

  left: 0;

  top: 0;

  padding-top:30%;

  height: 100%;

  width: 100%;

  background-color: rgba(94, 110, 141, 0.9);

  opacity: 0;

  visibility: hidden;

  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;

  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;

  transition: opacity 0.3s 0s, visibility 0s 0.3s;

}

.cd-popup.is-visible {

  opacity: 1;

  visibility: visible;

  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;

  -moz-transition: opacity 0.3s 0s, visibility 0s 0s;

  transition: opacity 0.3s 0s, visibility 0s 0s;

}



.cd-popup-container {

  position: relative;

  width: 90%;

  max-width: 400px;

  margin: 4em auto;

  padding-top:50px;

  background: #FFF;

  border-radius: .25em .25em .4em .4em;

  text-align: center;

  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);

  -webkit-transform: translateY(-40px);

  -moz-transform: translateY(-40px);

  -ms-transform: translateY(-40px);

  -o-transform: translateY(-40px);

  transform: translateY(-40px);

  /* Force Hardware Acceleration in WebKit */

  -webkit-backface-visibility: hidden;

  -webkit-transition-property: -webkit-transform;

  -moz-transition-property: -moz-transform;

  transition-property: transform;

  -webkit-transition-duration: 0.3s;

  -moz-transition-duration: 0.3s;

  transition-duration: 0.3s;

}

.cd-popup-container p {

  padding: 0.3em 1em;

}

.cd-popup-container .yzm{ position:absolute; right:15px; margin-top:-55px; width:120px; height:40px; line-height:40px; background:#39F; border-radius: 0 .25em .25em 0; color:#FFF; z-index:9999;}



.cd-popup-container .cd-buttons:after {

  content: "";

  display: table;

  clear: both;

}

.cd-popup-container .cd-buttons li {

  float: left;

  width: 100%;

}

.cd-popup-container .cd-buttons a {

  display: block;

  height: 60px;

  line-height: 60px;

  text-transform: uppercase;

  color: #FFF;

  -webkit-transition: background-color 0.2s;

  -moz-transition: background-color 0.2s;

  transition: background-color 0.2s;

}

.cd-popup-container .cd-buttons li:first-child a {

  background: #fc7169;

  border-radius: 0 0 0 .25em;

}

.no-touch .cd-popup-container .cd-buttons li:first-child a:hover {

  background-color: #fc8982;

}

.cd-popup-container .cd-buttons li:last-child a {

  background: #fc8982;

  border-radius: 0 0 .25em .25em;

}

.no-touch .cd-popup-container .cd-buttons li:last-child a:hover {

  background-color: #c5ccd8;

}

.cd-popup-container .cd-popup-close {

  position: absolute;

  top: 8px;

  right: 8px;

  width: 30px;

  height: 30px;

  font-family: "Lato", sans-serif;

}

.cd-popup-container .cd-popup-close::before, .cd-popup-container .cd-popup-close::after {

  content: '';

  position: absolute;

  top: 12px;

  width: 14px;

  height: 3px;

  background-color: #8f9cb5;

}

.cd-popup-container .cd-popup-close::before {

  -webkit-transform: rotate(45deg);

  -moz-transform: rotate(45deg);

  -ms-transform: rotate(45deg);

  -o-transform: rotate(45deg);

  transform: rotate(45deg);

  left: 8px;

}

.cd-popup-container .cd-popup-close::after {

  -webkit-transform: rotate(-45deg);

  -moz-transform: rotate(-45deg);

  -ms-transform: rotate(-45deg);

  -o-transform: rotate(-45deg);

  transform: rotate(-45deg);

  right: 8px;

}

.is-visible .cd-popup-container {

  -webkit-transform: translateY(0);

  -moz-transform: translateY(0);

  -ms-transform: translateY(0);

  -o-transform: translateY(0);

  transform: translateY(0);

}

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

  .cd-popup-container {

    margin: 8em auto;

  }

}