/* search box */
.search.box { display: none; }
.search-box { position: relative; }
.search-box input[type=text] { 
	border: 1px solid #c6ced1;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	height: 38px;
	padding-left: 20px;
	position: relative;
	background-color: #b02420;
	color: #FFFFFF;
	transition: border 0.2s linear;
	-webkit-transition: border 0.2s linear;	
}
.search-box input.error { border: 1px solid #FF0000; }
.search-box ::-webkit-input-placeholder { color: #FFFFFF; opacity: 1; }
.search-box :-moz-placeholder { color: #FFFFFF; opacity: 1; }
.search-box ::-moz-placeholder { color: #FFFFFF; opacity: 1; }
.search-box :-ms-input-placeholder { color: #FFFFFF; opacity: 1; }
.search-box:after {
    content: '\f002';
    font-size: 13px;
    color: #FFFFFF;
    position: absolute;
    top: 8px;
    right: 16px;
    z-index: 10;
}
.search-box input[type=submit] { 
	position: absolute;
	top: 0px;
	right: 0px;
	width: 38px;
	height: 38px;
	background-color: transparent;
	z-index: 20;
	border: 0;
}

/* search list */
.search-list { display: block; }
.search-list .head { padding: 0px 0px 20px 0px; display: block;}
.search-list .sword { font-weight: 700; }
.search-list .result {
	display: block;
	cursor: pointer;
	padding: 20px 20px;
	background-color: #FFFFFF;
}
.search-list .result:nth-child(even) {
	background-color: #f0f2f2;
	padding: 20px 20px;
}
.search-list .result h3 { margin-bottom: 0px; }
.search-list .result h3 a { font-weight: 700; color: #b02420; }
.search-list .result h3 a:hover { text-decoration: none; }
.search-list .result p { padding: 0px; }

	/* media specific styles */
	@media(min-width: 768px){
		/* search box */
		.search.box {
			display: block;
			width: 50px;
			height: 50px;
			position: absolute;
			right: 90px;
			top: 36px;
			text-align: center;
			cursor: pointer;
		}
		.search-icon {
			display: block;
			width: 50px;
			height: 50px;
			top: 0;
			position: absolute;
			left: 0;
		}
		.search-icon:after {
			content: '\f002';
			color: #FFFFFF;
			font-size: 15px;
			margin-top: 10px;
			display: block;
			color: #b02420;
			transition: color .25s;
			-webkit-transition: color .25s;
			-moz-transition: color .25s;
		}
		.search-icon:hover:after { color: #000000; }
		.search-icon.active:after { content: '\f00d'; }
		.search.box > form {
			display: none;
			position: absolute;
			top: 100%;
			width: 200px;
			right: 0;
		}
	}
	@media(min-width: 1200px){
		.search.box { right: -40px; top: 26px; }
	}