body {
  font-family: 'Helvetica Compressed';
  color: #444444;
  font-size: 17pt;
  background-color: white;
  font-weight: bold;
  letter-spacing: -2px;
  line-height: 20px;
}

.color-list {
  position: relative;
  box-sizing: border-box;
}


.color-list .color-indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  box-sizing: border-box;
  background-color: #ee1973;
  padding-right: 20px;
  pointer-events: none;
  transition: left 260ms cubic-bezier(.2,.9,.3,1), width 260ms cubic-bezier(.2,.9,.3,1);
  z-index: 1;
  white-space: nowrap;
  display: block;
}

.color-list .color-indicator::after {
	content: '';
	position: absolute;
	right: -8px;
	top: 4px;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-right: 8px solid #EE1973;
	pointer-events: none;
}

.color-list a {
  position: relative;
  z-index: 2;
}

.color-list a.selected,
.color-list a:hover {
  color: white !important;
}

.color-list a:not(.selected):not(:hover) {
  color: unset;
}

 @font-face {
     font-family: 'Helvetica Compressed';
     font-style: normal;
     font-weight: normal;
     src: local('Helvetica Compressed'), url("https://db.onlinewebfonts.com/t/4a3f1c7e46148ca8f32a04538ec0c597.woff")format("woff"),
}
 .container {
     margin: auto;
     width: 1240px;
}
 .content {
     width: 1180px;
     margin: auto;
     margin-top: 40px;
     margin-bottom: 20px;
     padding-top: 20px;
}
 .bar {
     width: 195px;
     height: 25px;
     background-color: #383839;
     border-radius: 1px;
     display: inline-block;
}
 .dots-thingy {
     position: relative;
}
 .dot {
     position: absolute;
     width: 30px;
     height: 8px;
     background-color: #383839;
     border-radius: 1px;
}
 .dot.left {
     left: 50%;
     margin-left: -15px;
}
 .dot.center {
     text-align: center;
}
 .grey-900 {
     color: #58585A !important;
}
 .grey-800 {
     color: #6D6E70 !important;
}
 .grey-700 {
     color: #818285 !important;
}
 .grey-600 {
     color: #939598 !important;
}
 .grey-500 {
     color: #A7A9AC !important;
}
 .black {
     color: black !important;
}
 .pink-border {
     border: 3px solid #ED1890;
     padding: 25px;
     border-radius: 2px;
     height: 357px;
}
 .less-bold {
     line-height: 25px;
     font-family: 'Helvetica';
     font-size: 31px;
}
 .summary-section {
     padding-left: 10px;
}
 .even-less-bold {
     line-height: 25px;
     font-family: 'Helvetica';
     font-size: 23px;
     font-weight: lighter;
}
 .dot.right {
     right: 0px;
}
 h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td {
     margin: 0;
     padding: 0;
     border: 0;
     display:inline-block;
}
/* flex stuff */
 .flex {
     display: flex;
}
 .col-1 {
     flex: 1;
}
 .col-2 {
     flex: 2;
}
 .col-3 {
     flex: 3;
}
 .col-4 {
     flex: 4;
}
/* margin sides 10 */
 .inline-block {
     display: inline-block;
}
 .mt-10 {
     margin-top: 10px;
}
 .ml-10 {
     margin-left: 10px;
}
 .mr-10 {
     margin-right: 10px;
}
 .mb-10 {
     margin-bottom: 10px;
}
 .m-10 {
     margin: 10px;
}
/* margin sides 5 */
 .mt-1 {
     margin-top: 1px;
}
 .mt-2 {
     margin-top: 2px;
}
 .mt-3 {
     margin-top: 3px;
}
 .mt-4 {
     margin-top: 4px;
}
 .mt-5 {
     margin-top: 5px;
}
 .ml-5 {
     margin-left: 5px;
}
 .mr-5 {
     margin-right: 5px;
}
 .mb-5 {
     margin-bottom: 5px;
}
 .m-5 {
     margin: 5px;
}
/* margin sides 5 */
 .mt-0 {
     margin-top: 0px;
}
 .ml-0 {
     margin-left: 0px;
}
 .mr-0 {
     margin-right: 0px;
}
 .mb-0 {
     margin-bottom: 0px;
}
 .m-0 {
     margin: 0px;
}
/* width increments of 16 */
 .w-8 {
     width: 8px 
}
 .w-16 {
     width: 16px 
}
 .w-32 {
     width: 32px 
}
 .w-50 {
     width: 50px 
}
 .w-64 {
     width: 64px 
}
 .w-128 {
     width: 128px 
}
 .w-256 {
     width: 256px 
}
 .w-512 {
     width: 512px 
}
 .w-1024 {
     width: 1024px 
}
/* height increments of 16 */
 .h-8 {
     height: 8px 
}
 .h-16 {
     height: 16px 
}
 .h-32 {
     height: 32px 
}
 .h-50 {
     height: 50px 
}
 .h-64 {
     height: 64px 
}
 .h-128 {
     height: 128px 
}
 .h-256 {
     height: 256px 
}
 .h-512 {
     height: 512px 
}
 .h-1024 {
     height: 1024px 
}

:root { --banner-h: 44px; }

body {
  padding-top: 44px;                
  padding-top: var(--banner-h, 44px);
}

.banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  height: 44px;                      
  height: var(--banner-h, 44px);
  display: block;                   
  background: rgb(238,32,124);
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(0,0,0,.15);
}

.banner__track {
  display: inline-block;
  line-height: 44px;              
  line-height: var(--banner-h, 44px);
  padding-left: 100%;
  animation: banner-marquee 16s linear infinite;
}

.banner__text {
  font-weight: 700;
  letter-spacing: .02em;
  margin-right: 2rem;
}

@keyframes banner-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .banner__track { animation: none; padding-left: 0; }
}