*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

ul,
li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #514F4F;
}

body {
    font-family: "Open Sans", sans-serif;
    width: 100%;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    padding: 0;
    margin: 0;
    position: relative;
}

html {
    width: 100%;
   
    padding: 0;
    margin: 0;
}

.container {
    width: 100%;
    min-width: 1180px;
    margin: 0 auto;
}

.colors th {
	background: #eeeeee;
	text-align: center;
	height: 28px;
}
.colors td {
	min-width: 20px;
	padding: 3px;
	font-size: 12px;
	background: #f9f8f8;
	color: #023769;
}
.colors tr:nth-child(2n) td {
	background: #fff;
}

/* Обёртка для цветных кружков */
.color-wrap {
	display: inline-flex;
}

/* Половинки круга */
.color_l, .color_r {
	width: 9px;
	height: 17px;
	border: 1px solid #eee;
}

.color_l {
	border-radius: 100% 0 0 100% / 50% 0 0 50%;
	border-right: none;
}
.color_r {
	border-radius: 0 100% 100% 0 / 0 50% 50% 0;
	border-left: none;
}

/* Цвета */
.c000 { background: #000; }
.cff0 { background: #ffea04; }
.c999 { background: #999999; }
.c7f0 { background: #7f0000; }
.c0f0 { background: #0f0; }
.cfff { background: #fff; }
.cf00 { background: #f00; }
.c00f { background: #00f; }
.cf0f { background: #f0f; }
.cf90 { background: #f90; }
.c639 { background: #639; }
.c0ff { background: #0ff; }


@media screen and (max-width: 800px) {
    .container {
        margin-left: 0;
        padding: 0 20px;
    }
}