.hrconv-wrapper {
	margin: 0 10%;
}
.hrconv-wrapper * {
	box-sizing: border-box;
}
.hrconv-wrapper .hrconv-top-text {
	margin-bottom: 15px;
}
.hrconv-wrapper .hrconv-info {
	font-size: 16px;
    line-height: 16px;
    background: #f4d9ae;
    padding: 15px;
    margin-bottom: 15px;
    text-align: center;
}
.hrconv-wrapper .hrconv-input-wrapper,
.hrconv-wrapper .hrconv-color-wrapper {
	float: left;
	width: 50%;
}
.hrconv-wrapper .hrconv-input-wrapper {
	padding-right: 5px;
}
.hrconv-wrapper .hrconv-color-wrapper {
	padding-left: 5px;
}
.hrconv-wrapper label {
	display: block;
    width: 100%;
    background: #ccc;
    margin-bottom: 15px;
    overflow: hidden;
    padding: 15px;
}
.hrconv-wrapper label span {
	font-weight: 700;
}
.hrconv-wrapper label input {
	float: right;
	width: 120px;
    padding: 10px;
    font-size: 16px;
}
.hrconv-color {
	display: block;
	width: 100%;
    height: 159px;
	text-align: center;
	color: #4a4a4a !important;
	padding: 50px 10px;
	text-decoration: none !important;
}
.hrconv-colors {
	clear: both;
	overflow: hidden;
	margin-top: 15px;
}
.hrconv-colors h2 {
	font-size: 24px !important;
}
.hrconv-color-analog-wrapper {
	width: 25%;
	padding: 5px 5px 15px;
	float: left;
}
.hrconv-color-analog {
	display: block;
	width: 100%;
	height: 60px;
	margin-bottom: 5px;
}
.hrconv-color-analog-wrapper p {
	margin: 0 !important;
    font-size: 14px;
}
.hrconv-color-analog-wrapper p span {
	float: right;
}

.hrconv-color-groups {
	clear: both;
	overflow: hidden;
	margin-top: 15px;
}
.hrconv-color-groups h2 {
	font-size: 24px !important;
}
.hrconv-color-groups .hrconv-color-group {
	width: 33.33%;
	padding: 5px;
	float: left;
}
.hrconv-color-groups .hrconv-color-group .hrconv-color-group-color {
	display: block;
	width: 100%;
	height: 60px;
}
.hrconv-color-groups .hrconv-color-group .hrconv-color-group-name {
	font-size: 14px;
	text-align: center;
}
.hrconv-preview {
	width: 300px;
    height: 300px;
}
.hrconv-preview .fancybox-button:hover {
	background-color: #ccc;
}

@media (max-width: 768px) {
	.hrconv-wrapper {
		margin: 0;
	}
}
@media (max-width: 576px) {
	.hrconv-color-name {
		display: block;
		font-size: 16px !important;
	}
	.hrconv-color {
		height: 255px;
	}
	.hrconv-color-analog-wrapper {
		width: 50%;
	}
	.hrconv-wrapper label input {
		width: 100%;
		margin-top: 10px;
	}
}
@media (max-width: 320px) {
	.hrconv-wrapper label span {
		font-size: 13px;
	}
	.hrconv-color {
		height: 255px;
	}
}