/*index------------------------------------------------------------*/
body {
	background: #000 url('../images/result_bg.jpg') center top no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}

#result .container {
}
 #result div{/*
 	border: 1px solid #333;*/
 }
.result-title {	
}
.result-section {
	/*margin-top: 100px;*/
}
.result-board {
	width: 680px;
	height: 446px;
	clear: both;
	float: left;
	background: url('../images/result_board1.png') center top;
	-webkit-background-size: cover;
	background-size: cover;
	padding: 13px 20px;
	position: relative;
}
.hero {
	z-index: 999;
	position: relative;
}
#resultB h3 {
	padding: 0 60px;
	margin: 0;
}
.result-board img {
	max-width: 100%;
}
.board-content {
	width: 490px;
	margin: 38px auto;
}
.results {
	padding: 100px 0;
}
.results .subtitle, .results p {
	float: left;
	margin: 0 10px;
	vertical-align: top;
}
.results p {
 	margin-top: 30px;
 	font-size: 1.2em;
 	line-height: 1.8;
}
.result-board .brand {
 	position: absolute;
 	bottom: -20px ;
 	right: 0;
}
.menu {
	margin: 10px auto 0;
	clear: both;
	position: relative;
	z-index: 999;
}
.menu div {
	float: left;
	margin: 0 4px;
}
@media screen and (max-width: 320px) {
	.hero {
		width: 280px;
		left: 8%;
		top: -30px;
	}
	.result-board {
		width: 280px;
		height: 635px;
		padding-top: 4px;
	}
	.board-content {
		width: 260px;
		margin: 22px auto;
	}
	.result-section .col-sm-9 {
		margin-top: -360px;
		position: relative;
		z-index: 999;
	}
	.result-board .brand {
		right: 0;
		width: 180px;
	}
}
@media screen and (min-width: 321px) and (max-width: 480px) {
	.hero {
		width: 300px;
		left: 15%;
		top: -30px;
	}
	.result-board {
		width: 300px;
		height: 680px;
		padding-top: 4px;
	}
	.board-content {
		width: 260px;
		margin: 22px auto;
	}
	.result-section .col-sm-9 {
		margin-top: -360px;
		position: relative;
		z-index: 999;
	}
	.result-board .brand {
		right: -20px;
		width: 180px;
	}
	
}
@media screen and (max-width: 480px) {
	.board-content p {
		float: none;
	}
	.result-section .col-sm-9 {
		margin-top: -230px;
	}
	.results {
		padding-bottom: 100px;
	}
	.results p {
	 	margin-top: 0px;
	}
	.subtitle {
	}
	#resultB h3 {
		padding: 6px 14px;	
	}
	.result-board {
		margin: 0 auto;
		float: none;
		background: url('../images/result_board2.png') center top;
		-webkit-background-size: cover;
		background-size: cover;
	}
}
@media screen and (min-width: 480px) { 
	.board-content p span {
		display: block;
	}
}
@media screen and (max-width: 767px) {
	.result-title {
		width: 60%;	
		margin: 0 auto 20px;
	}
	.result-section .col-sm-9 {
		position: relative;
		z-index: 999;
	}
	.result-board {
		margin: 0 auto;
		float: none;
	}
}
@media screen and (min-width: 481px) and (max-width: 767px) {
 	.hero {
 		width: 440px;
 		left: 15%;
 		top: -60px;
 	}
 	.result-section .col-sm-9 {
 		margin-top: -360px;
 	}
 	.result-board {
 		width: 460px;
 		height: 300px;
 		padding-top: 4px;
 	}

 	#resultB h3 {
 		padding: 0 24px;	
 	}
 	#resultB h3 img {
 		width: 78%;
 	}
 	.subtitle {
 		width: 60px;
 	}
 	.board-content {
 		width: 380px;
 		margin: 22px auto;
 	}
 	.results p {
 	 	margin-top: 10px;
 	 	font-size: 1em;
 	 	line-height: 1.5;
 	}
 	.result-board .brand {
		right: -20px;
		width: 180px;
	}
}
@media screen and (min-width: 768px) and (max-width: 991px){
	.hero {
		width: 360px;
		left: -20px;
	}
	.result-board {
		width: 500px;
		height: 328px;
	}
	.result-section .col-sm-9 {
		padding-left: 60px;
	}
	#resultB h3 {
		padding: 0 25px;
	}
	#resultB h3 img {
		width: 76%;
	}
	.result-board {
		padding-top: 6px;
	}
	.board-content {
		width: 380px;
		margin: 28px auto;
	}
	.subtitle {
		width: 70px;
	}
	.results p {
		margin-top: 10px;
		font-size: 1em;
		line-height: 1.8;
	}
	.result-board .brand {
		right: 0;
		bottom: -50px;
		width: 200px;
	}
}
@media screen and (min-width: 991px) and (max-width: 1200px){
	.hero {
		width: 460px;
		left: -20px;
	}
	.result-board {
		width: 620px;
		height: 407px;
	}
	#resultB h3 {
		padding: 0 35px;
	}
	.long h3 img {
		width: 78%;
	}
	.board-content {
		width: 480px;
		margin: 20px auto;
	}
	.result-board .brand {
	 	right: -30px;
	}
	.result-board .agents {
		bottom: -40px;
	}
	.result-board {
		padding: 10px 20px;
	}
}
@media screen and (min-width: 991px) {
	.long h3 {
		padding: 0 28px;
	}
	.long h3 img {
		width: 78%;
	}
}