/*--------------------- How to Order page ----------------------*/
.hop-contant {
	float: left;
	width: 100%;
}
.hop-title-page {
	float: left;
	background: url(/img/title-hop-bg.png);
	width: 100%;
	height: 177px;
	margin-top: 24px;
}
.hop-title-page-txt {
	float: left;
	margin-top: 12px;
}
.hop-title-page-txt h4 {
	font-family: HelveticaBoldItalic;
	color: #dc0026;
	font-size: 28px;
	line-height: 23px;
	margin-top: 10px;
	margin-bottom: 0;
}
.hop-title-page-txt h3 {
	font-family: HelveticaBoldItalic;
	font-size: 48px;
	line-height: 38px;
	color: #00004c;
	margin-top: 0;
	margin-bottom: 0;
	padding-right: 17px;
	padding-bottom: 8px;
	border-bottom: 3px solid #00004c;
}
p.hop-text {
	float: left;
	width: 100%;
	font-family: Lato-Regular;
	font-size: 18px;
	line-height: 25px;
	margin-top: 32px;
	margin-bottom: 40px;
}
h4.hop-title {
	float: left;
	width: 100%;
	font-family: Lato-BoldItalic;
	font-size: 30px;
	color: #fff;
	background: #01004c;
	text-align: center;
	margin-top: 28px;
	margin-bottom: 10px;
	height: 59px;
	line-height: 59px;
}
p.hop-text {
	float: left;
	width: 100%;
	font-family: Lato-Regular;
	font-size: 23px;
	line-height: 35px;
	text-align: center;
	margin-bottom: 0;
	margin-top: 15px;
}
.hop-line {
	float: left;
	width: 100%;
	text-align: center;
	margin-top: 23px;
	margin-bottom: 0;
}
.hop-line span {
	width: 29px;
	height: 2px;
	display: block;
	background: #000;
	margin: 0 auto;
}
h4.hop-bluetitle {
	float: left;
	width: 100%;
	font-family: Lato-BoldItalic;
	color: #0000ff;
	font-size: 37px;
	line-height: 32px;
	margin-top: 70px;
	margin-bottom: 65px;
	text-align: center;
}
.hop-listicons {
	float: left;
	width: 100%;
	margin-bottom: 55px;
}
.hop-listicons ul {
	text-align: center;
	list-style: none;
	padding-left: 0;
	margin: 0;
}
.hop-listicons ul li {
	display: inline-block;
	width: 209px;
	margin-right: 62px;
}
.hop-listicons ul li:last-child {
	margin-right: 0;
}
.listicons-box {
	float: left;
	width: 100%;
}
.listicons-box h5 {
	float: left;
	width: 100%;
	font-family: Lato-BlackItalic;
	font-size: 30px;
	line-height: 25px;
	margin-top: 35px;
	margin-bottom: 12px;
	text-align: center;
}
.listicons-box p {
	float: left;
	width: 100%;
	text-align: center;
	font-family: Lato-Italic;
	font-size: 20px;
	line-height: 18px;
	margin: 0;
}
.listicons-img {
	float: left;
	width: 100%;
}
.quality img {
	height: 151px;
	width: auto;
	margin: 0 auto;
}
.color img {
	height: 143px;
	width: auto;
	margin: 0 auto;
}
.print-size img {
	height: 139px;
	width: auto;
	margin: 0 auto;
	padding-top: 10px;
}
.price img {
	height: 126px;
	width: auto;
	margin: 0 auto;
	padding-top: 17px;
}
p.hop-bluetext {
	float: left;
	width: 100%;
	font-family: Lato-Bold;
	font-size: 26px;
	line-height: 22px;
	text-align: center;
	color: #0000ff;
	margin-bottom: 0;
	margin-top: 40px;
}
.hop-form {
	float: left;
	width: 100%;
	padding: 30px 0 10px;
	border: 2px solid #000;
	border-radius: 10px;
	margin-top: 44px;
	margin-bottom: 58px;
}
.hop-form-left {
	float: left;
	width: 515px;
	margin-left: 30px;
	margin-right: 20px;
}
.hop-form-right {
	float: right;
	width: 525px;
	margin-right: 30px;
}
.hop-form-line {
	float: left;
	width: 100%;
}
.hopf-input-group {
	position: relative;
	float: left;
	width: 100%;
	margin-bottom: 20px;
}
.hopf-input-group.first-name {
	float: left;
	width: 245px;
	margin-right: 17px;
}
.hopf-input-group.last-name {
	float: right;
	width: 245px;
}
.hopf-input-group.qty {
	float: left;
	width: 130px;
}
.hopf-input-group.item {
	float: right;
	width: 365px;
}
.hopf-input-group.message {
	position: relative;
	top: -1px;
}
.hop-form input {
	float: left;
	height: 42px;
	line-height: 45px;
	font-size: 18px;
	border: 1px solid #828282;
	border-radius: 7px;
	padding-left: 10px;
}
.hop-form label {
	font-family: Lato-Italic;
	color: #4a4f53;
	font-size: 18px;
	padding: 0 6px;
	background: #fff;
	position: absolute;
	top: -12px;
	left: 17px;
}
.hop-form select {
	float: left;
	width: 100%;
	height: 45px;
	line-height: 45px;
	font-size: 18px;
	border: 1px solid #828282;
	border-radius: 7px;
	background: #fff;
	padding-left: 7px;
}
.hop-form textarea {
	float: left;
	width: 500px;
	height: 221px;
	resize: none;
	border: 1px solid #828282;
	border-radius: 7px;
	padding: 10px;
	font-size: 18px;
	font-family: Lato-Italic;
}
.company input,
.email input,
.phone input {
	width: 509px;
}
.qty input {
	width: 77px;
	background: url(../img/qty-bg.png) no-repeat;
	font-family: Lato-BoldItalic;
	background-position-y: 4px;
	padding-left: 43px;
	padding-right: 10px;
	text-align: right;
}
.item select {
	width: 372px;
}
.first-name input,
.last-name input {
	width: 240px;
}
button.hopf-btn-send {
	background: #d80025;
	color: #fff;
	float: right;
	width: 170px;
	height: 48px;
	line-height: 43px;
	font-family: Lato-BoldItalic;
	font-size: 24px;
	text-align: center;
	border-radius: 7px;
	cursor: pointer;
	border: none;
}
.block-singup,
.block-singup-answer {
	margin-top: 84px;
}
.hop-form-answer {
	display: none;
	float: left;
	width: 100%;
	height: 374px;
	border: 2px solid #000;
	border-radius: 10px;
	padding: 0 0;
	margin-top: 44px;
	margin-bottom: 58px;
}
.hop-form-answer p {
	font-size: 28px;
	line-height: 40px;
	float: left;
	width: 100%;
	text-align: center;
	margin: 135px 0;
}