html {
	position: relative;
  min-height: 100%;
}

body {
	font-family: 'Open Sans', 微軟正黑體, sans-serif;
	font-size: 14px;
	letter-spacing: 1px;
	line-height: 1.7;
	padding: 0;
	margin-bottom: 124px;
}

p {
	font-size: 14px;
	line-height: 1.2;	
}

.modal-body {
	padding: 0;
}

button.close {
	opacity: 0.8;
	float: none;
	position: absolute;
	right: -8px;
	top: -8px;
	background-color: #fff;
	width: 24px;
	height: 24px;
	border-radius: 24px;
	border: 2px solid #000;
	z-index: 999999;
}

.no-padding {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
}

.bg-pink {
	background-color: #fd869c;
}

.bg-blue {
	background-color: #5496c6;
}

.bg-orange {
	background-color: #f89829;
}

.bg-red {
	background-color: #c42d59;
}

.square {
	display: inline-block;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
}

.background {
	width: 100%;
	height: 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;	
}

.background.full {
	padding-bottom: 100%;
}

.background.half {
	height: 0;
	padding-bottom: calc(50% - 15px);
}

.text-white, .text-white a {
	color: #FFF;
}

h2.section-title {
	display: inline-block;
	margin-top: 0;
	padding: 8px 18px;
	width: 100%;
	background-color: #fd869c;
	color: #FFF;
}

.search-box {
	border-left: none !important;
}

hr.page {
	height: 1px;
	border: 1px solid #FF1773;
	background-color: #fee7f0;
}

.top-banner {
	text-align: center;
}

#logo {
	width: 360px;
	margin: 0 auto;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #FFF;
}

.navbar-default .navbar-toggle:hover {
    background-color: transparent;
}

.navbar-default .navbar-toggle {
    border-color: #ffe7f0;
}

.navbar {
	background-color: transparent;
	border: none;
	margin-bottom: 0;
}

.navbar a,  .navbar-default .navbar-nav>li>a:hover {
	color: #FFF;
}

.navbar-default .navbar-nav>li>a {
    color: #FFF;
}

.navbar-default .navbar-nav>li:hover, .navbar-default .navbar-nav>li.open>a {
	color: #FFF;
	background-color: #a20645;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover,  .navbar-default .navbar-nav>.open>a:hover {
	color: #FFF;
	background-color: #a20645;
}

.dropdown-menu > li > a {
	color: #FF1773;
}

.dropdown-menu > li:hover > a {
	color: #a20645;
}

.col-section {
	margin-bottom: 20px;
}

.col-title {
	padding: 5px 15px;
	box-sizing: border-box;
	color: #FFF;
	margin-bottom: 8px;
}

.col-content {
	font-size: 14px;
}

.col-content img, .block img {
	width: 100%;
}

.home-block {

}

.home-block .home-block-text {
	width: 100%;
	font-size: 10ch;
}

.cover {
	width: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.question li {
	padding: 12px 20px;
	font-weight: 800;
}

.question li:nth-child(odd) {
/*	background-color: #f1edd8; */
  border: 1px solid transparent;
}

.question li:nth-child(even) {
	background-color: #fafafa;
	border: 1px solid #eee;
/*	background-color: #dbd7c4; */
}

.question li a {
	text-decoration: none;
	color: #5e5d55;
}

.question li a:hover {
	color: #242320;
}

.section-lastest-news .fa-newspaper-o, .question .fa-comments, .question .fa-leanpub {
	color: #c42d59;
}

h3.post-title {
	color: #c42d59;
}

.section-bar p {
	line-height: 34px;
	margin: 0 0 0 0;
	color: #fff;
	padding-left: 20px;	
}

.section-bar p a {
	color: inherit;
}

.post-area h2.section-title a {
	text-decoration: none;
	color: inherit;
}

.post-area p a {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

.post-area p {
	padding: 20px;
	margin-bottom: 20px;
	border-radius: 5px;
	background-color: #fafafa;
	border: 1px solid #eee;
}

.post-area p:first-of-type {
	background-color: #c6e1c8;
}

.sponsor-banner {
	margin-bottom: 15px;
}

.sponsor-banner img {
	width: 100%;
	height: auto;
}


/* mansory */

.grid-item {
	margin-bottom: 20px;
}

.grid-item-content {
	width: 100%;
	height: auto;	
}


.grid-item img {
	width: 100%;
	height: auto;
}

.grid-item--width2 {
	width: 400px;
}

.thumb {
	cursor: pointer;
}

/* enquiry */

#enquiry_form .glyphicon {
	display: none;
}

.text-muted {
	display: none;
}

.has-warning {
	position: relative;
}

.has-warning .text-muted, .has-warning .glyphicon {
	color: #8a6d3b;
}

.has-warning .glyphicon {
	display: inline-block !important;
	position: absolute;
	top: 38px;
	right: 10px;
}

.scrollToTop {
	display: none;
	opacity: 0.7;
	padding-top: 10px;
	padding-right: 2px;
	position: fixed;
	bottom: 75px;
	right: 8px;
	height: 50px;
	width: 50px;
	border-radius: 8px;
	color: #FFF;
	font-size: 28px;
	font-weight: 800;
	text-align: center;
	cursor: pointer;
	z-index: 9999;
}

.footer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}

@media (max-width: 767px) {
	.navbar-default .navbar-nav .open .dropdown-menu>li>a {
			color: #FFF;
	}	
}

@media only screen and (min-width : 768px) {
	.scrollToTop {
		bottom: 180px;
		right: 50px;
	}
	
	.top-banner {
		text-align: left;
	}
	
	#logo {
		width: 550px;
		margin-left: 15%;
	}
}