#main-wrapper {
	display: table;
	position: absolute;
	height: 100%;
	width: 100%;
}

#logo-box {
	display: block;
	position: absolute;
	margin: 0;
}

#subtitle {
	height: 120px;
	background-color: #FFFFFF;
	line-height: 120px;
	vertical-align: middle;
	margin: 0 0 0 20px;
}

#main {
	display: table-row;
	height: 100%;
}

#vertical {
	display: table-cell;
	vertical-align: middle;
}

#palette {
	position: relative;
	max-width: 1050px;
	margin: 0 auto;
}


.circle {
	float: left;
	border-radius: 60px;
	margin: 45px;
}

.square {
	float: left;
	height: 120px;
	width: 120px;
	margin: 45px;
}

.paint.circle {
	border: 60px solid #FFABAA;
}

.paint.square {
	background-color: #A0CFFF;
}

.circle.olive {
	border-color: #A7A8C7;
}

.square.olive {
	background-color: #A7A8C7;
}

.circle.green {
	border-color: #AED27B;
}

.square.green {
	background-color: #AED27B;
}

.circle.gold {
	border-color: #C4AD5F;
}

.circle.sand {
	border-color: #E4D361;
}

.circle.pink {
	border-color: #E894B6;
}

.square.pink {
	background-color: #E894B6;
}

.square.silver {
	background-color: #C6C9D2;
}

.circle.gray {
	border-color: #7F7F7F;
}

@media screen and (max-width: 1100px) {
	#palette {
		max-width: 700px;
	}
	
	.circle {
		border-radius: 40px;
		margin: 30px;
	}
	
	.square {
		height: 80px;
		width: 80px;
		margin: 30px;
	}
	
	.paint.circle {
		border-width: 40px;
	}
}