/*/////////////////////////////////// fonts ////////////////////////////////////////////*/

@import url('https://fonts.googleapis.com/css?family=Khula:300,400,600,700,800|Ubuntu:300,500,700');
/* @import url('https://fonts.googleapis.com/css?family=Khula:300,400|Parisienne|Ubuntu'); */

/*/////////////////////////////////// global defaults //////////////////////////////////*/

/* colours */
/* dd0022 red */
/* ee0054 redy pink */
/* ff0086 pink */
/* e10de9 purple bright */
/* a32fa7 purple */
/* 772277 purple dark */

* {
    box-sizing: border-box;
}

body {
    margin: 0px;
    font-size: 0px;
    min-width: 270px;
}

p {
    font-size: 14.5px;
    font-family: 'Khula', sans-serif;
    font-weight: 300;
    padding: 5px 0px;
}

p:before {
  content: "";
  width: 8em;
  display: block;
  overflow: hidden;
}

sup {
    vertical-align: top;
    font-size: 0.7em;
}

sub {
    vertical-align: bottom;
    font-size: 0.7em;
}

/*/////////////////////////////////// load animations //////////////////////////////////*/

.fadeIn {
    opacity: 0;
    transition: opacity 0.5s;
}

.fadeInSlow {
    opacity: 0;
    transition: opacity 1.5s 0.2s;
}

.fadeOnLoad {
    opacity: 0;
    transition: opacity 2s;
}

.swipeRightOnLoad {
    overflow: hidden;
    transition: max-width 1s;
    white-space: nowrap;
    max-width: 0px;
}

.swipeRightOnLoadSlow {
    overflow: hidden;
    transition: max-width 1s 0.7s;
    white-space: nowrap;
    max-width: 0px;
}

/*/////////////////////////////////// headings /////////////////////////////////////////*/

div.h1 {
    padding: 0px 20px;
}

h1 {
    font-family: 'Ubuntu', sans-serif;
    font-size: 40px;
    font-weight: 500;
    line-height: 250%;
    display: inline;
    padding: 7px 0px;
}

div.h2 {
    margin: 0px 0px 0px 0px;
    padding: 0px 10px;
}

h2 {
    font-family: 'Ubuntu', sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 40px;
    display: inline;
    padding: 4px 0px;
}

h4 {
    font-family: 'Ubuntu', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 40px;
    margin: 0px;
    padding: 0px 0px 0px 5px;
}

h5 {
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;
    line-height: 40px;
    margin: 0px;
    padding: 0px 0px 0px 5px;
}

/*/////////////////////////////////// buttons //////////////////////////////////////////*/

.button {
    font-family: 'Khula', sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px 8px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    min-width: 90px;
    text-align: center;
}

.button:hover {
    text-decoration: none;
}

a.twitter-button {
    color: #fff;
    border-radius: 3px;
    background-color: #3493ee;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    padding: 2px 6px 3px 6px;
    vertical-align: middle;
}

a.twitter-button i {font-size: 11px;}

a.twitter-button:hover {
    color: #fff;
    background-color: #47c;
    text-decoration: none;
}

/*/////////////////////////////////// forms ////////////////////////////////////////////*/

form input[type=text], select, textarea {
    font-family: 'Khula', sans-serif;
    font-weight: 300;
    font-size: 14.5px;
    width: 100%;
    border-radius: 4px;
    border: 1px solid #ccc;
    color: #555;
    padding: 7px;
    margin-top: 5px 0px;
    margin-bottom: 16px;
    resize: vertical;
}

form textarea {height: 200px;}

::-webkit-input-placeholder {color: #aaa; opacity:  1;}
:-moz-placeholder {          color: #aaa; opacity:  1;}
::-moz-placeholder {         color: #aaa; opacity:  1;}
:-ms-input-placeholder {     color: #aaa; opacity:  1;}
::-ms-input-placeholder {    color: #aaa; opacity:  1;}

form p.error {
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 15px;
    color: #e13;
    font-size: 12px;
    opacity: 0;
}

/*/////////////////////////////////// navbar general ///////////////////////////////////*/

nav {
    font-family: 'Khula', sans-serif;
    font-weight: 400;
    padding-left: 40px;
    max-width: 1500px;
}

nav a {
    text-decoration: none;
    font-weight: 400;
}

/*/////////////////////////////////// navbar-top ///////////////////////////////////////*/

nav#bar-top {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 100;
    height: 60px;
}

nav#bar-top div.name {
    display: inline-block;
    padding: 20px 0px 0px 0px;
}

nav#bar-top div.name a {
    font-weight: 600;
}

nav#bar-top div.name div.first {
    font-size: 23px;
    word-spacing: 0em;
    line-height: 18px;
}

nav#bar-top div.name div.last {
    font-size: 26px;
    margin-top: -6px;
    margin-bottom: -13px;
}

nav#bar-top div.menu-toggle {
    font-size: 14.5px;
    opacity: 0;
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
}

nav#bar-top div.menu-toggle:hover {cursor: pointer;}

/*/////////////////////////////////// navbar-side //////////////////////////////////////*/


nav#bar-side {
    display: inline-block;
    float: left;
    width: 170px;
}

nav#bar-side div#main-navigation {
    position: fixed;
    top: 75px;
    left: 0px;
    width: 170px;
    bottom: 0px;
    overflow-y: hidden;
    padding: 0px;
    z-index: 99;
    transition-timing-function: linear;
    -webkit-transition-timing-function: linear;
}

nav#bar-side div#main-navigation ul.top-level {
    margin: 20vh 0px 0px 0px;
    padding-bottom: 30px;
}

nav#bar-side ul {
    list-style-type: none;
    font-size: 15px;
}

nav#bar-side ul li {
    padding: 0px 0px 8px 0px;
    white-space: nowrap;
    overflow: hidden;
}

div.dropdown {
    display: inline-block;
    height: 22px;
    text-align: center;
    vertical-align: middle;
    transition: 0.2s;
    font-size: 14.5px;
    cursor: pointer;
    margin: -3px 0px 0px -5px;
}

div.dropdown i {pointer-events: none;}

div.dropdown-opened {
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Safari */
    transform: rotate(180deg);
}

nav#bar-side ul li ul {
    padding-left: 25px;
    overflow-y: hidden;
    max-height: 80px;
    transition: max-height 0.2s;
}

nav#bar-side ul li ul.hidden {
    max-height: 0px;
}

nav#bar-side ul li ul li {
    padding: 3px 0px 0px 0px;
}

div.body {
    width: calc(100% - 170px);
    position: relative;
    float: right;
    min-height: 100vh;
    max-width: 1330px;
    overflow: hidden;
    padding-bottom: 100px;
}

div.window-shadow {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

/*/////////////////////////////////// splash pages /////////////////////////////////////*/

div.splash {
    padding: 0px 50px;
    overflow: hidden;
    width: 100%;
}
div.splash div.content {
    width: 100%;
}
div.splash.home div.content {
    padding-top: 370px;
}
div.splash.home div.h1 {
    position: absolute;
    top: 80px;
    left: 0px;
    width: 650px;
}
div.splash div.img {
    width: 600px;
    height: 600px;
    border-radius: 50%;
    overflow: hidden;
    float: right;
    margin: 20px -100px 50px 50px;
}

/*/////////////////////////////////// messy list ///////////////////////////////////////*/

ul.messy-list {
    width: 100%;
    padding: 0px;
}
ul.messy-list li {
    width: 100%;
    padding: 20px 0px;
}
ul.messy-list li div.title-bar {
    width: 100%;
    margin-bottom: 50px;
}
ul.messy-list li div.title-bar div.left  {
    display: inline-block;
    vertical-align: middle;
    padding-right: 50px;
}
ul.messy-list li div.title-bar div.right {
    display: inline-block;
    vertical-align: top;
    text-align: right;
}
ul.messy-list li div.title-bar div.right div.h2 {
    background-color: none;
}
ul.messy-list li div.title-bar div.right h4 {padding-right: 50px;}
ul.messy-list li div.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    width: 100%;
}
ul.messy-list li div.flex.row,
ul.messy-list li div.flex.row-reverse {
    align-items: center;
    justify-items: flex-end;
}
ul.messy-list li div.flex.col {
    align-items: flex-start;
    justify-items: center;
}
ul.messy-list li div.flex.row {
    -webkit-box-direction: row;
    -moz-box-direction: row;
    -ms-flexbox-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}
ul.messy-list li div.flex.row-reverse {
    -webkit-box-direction: row-reverse;
    -moz-box-direction: row-reverse;
    -ms-flexbox-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
ul.messy-list li div.flex.col {
    -webkit-box-direction: column;
    -moz-box-direction: column;
    -ms-flexbox-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
ul.messy-list li div.content {padding: 0px 50px 0px 30px;}

/*/////////////////////////////////// containers ///////////////////////////////////////*/

span.bar {text-decoration: overline;}
span.nobr {white-space: nowrap;}
div.img img {width: 100%;}
div.img p {
    font-size: 10px;
    padding: 0px;
    margin: 5px 0px;
}
div.img.right {
    float: right;
    margin: 10px 0px 10px 50px;
}
div.img.left {
    float: left;
    margin: 10px 50px 10px 0px;
}
div.youtube {
     width: 100%;
     padding-top: 56%;
     position: relative;
}
div.youtube iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    border: 0px;
}

/*/////////////////////////////////// cookies //////////////////////////////////////////*/

div.cookieConsent {
    padding: 20px 50px;
    position: fixed;
    width: 100%;
    bottom: -125px;
    left: 0px;
    right: 0px;
    transition: bottom 1s ease-in-out, opacity 0.2s ease-out;
    -webkit-transition: bottom 1s ease-in-out, opacity 0.2s ease-out;
    -moz-transition: bottom 1s ease-in-out, opacity 0.2s ease-out;
    -ms-transition: bottom 1s ease-in-out, opacity 0.2s ease-out;
    -o-transition: bottom 1s ease-in-out, opacity 0.2s ease-out;
    opacity: 0;
    z-index: 1000;
}
div.cookieConsent div.info {
    display: inline-block;
    vertical-align: middle;
    font-size: 15px;
    width: calc(100% - 100px);
    font-family: Khula;
    font-weight: 300;
    padding-right: 50px;
}
div.cookieConsent div.button {
    display: inline-block;
    vertical-align: middle;
}

/*/////////////////////////////////// responsive style classes /////////////////////////*/

 /* 100% on small screens */
.w10      {width: 10%;}
.w15      {width: 15%;}
.w20      {width: 20%;}
.w25      {width: 25%;}
.w30      {width: 30%;}
.w35      {width: 35%;}
.w40      {width: 40%;}
.w45      {width: 45%;}
.w50      {width: 50%;}
.w55      {width: 55%;}
.w60      {width: 60%;}
.w65      {width: 65%;}
.w70      {width: 70%;}
.w75      {width: 75%;}
.w80      {width: 80%;}
.w85      {width: 85%;}
.w90      {width: 90%;}
.w95      {width: 95%;}
.w100     {width:100%;}
.w50px    {width:  50px;}
.w100px   {width: 100px;}
.w150px   {width: 150px;}
.w200px   {width: 200px;}
.w250px   {width: 250px;}
.w300px   {width: 300px;}
.w350px   {width: 350px;}
.w400px   {width: 400px;}
.w450px   {width: 450px;}
.w500px   {width: 500px;}
.w550px   {width: 550px;}
.w600px   {width: 600px;}
.w650px   {width: 650px;}
.w700px   {width: 700px;}
.w750px   {width: 750px;}
.w800px   {width: 800px;}
.w850px   {width: 850px;}
.w900px   {width: 900px;}
.w950px   {width: 950px;}
.w1000px  {width:1000px;}
.wm50px   {width: calc(100% -   50px);}
.wm100px  {width: calc(100% -  100px);}
.wm150px  {width: calc(100% -  150px);}
.wm200px  {width: calc(100% -  200px);}
.wm250px  {width: calc(100% -  250px);}
.wm300px  {width: calc(100% -  300px);}
.wm350px  {width: calc(100% -  350px);}
.wm400px  {width: calc(100% -  400px);}
.wm450px  {width: calc(100% -  450px);}
.wm500px  {width: calc(100% -  500px);}
.wm550px  {width: calc(100% -  550px);}
.wm600px  {width: calc(100% -  600px);}
.wm650px  {width: calc(100% -  650px);}
.wm700px  {width: calc(100% -  700px);}
.wm750px  {width: calc(100% -  750px);}
.wm800px  {width: calc(100% -  800px);}
.wm850px  {width: calc(100% -  850px);}
.wm900px  {width: calc(100% -  900px);}
.wm950px  {width: calc(100% -  950px);}
.wm1000px {width: calc(100% - 1000px);}

/*/////////////////////////////////// responsive ///////////////////////////////////////*/

@media screen and (min-width: 1500px) {
    nav {margin-left: calc(50vw - 750px);}
    nav#bar-side div#main-navigation {left: calc(50vw - 750px);}
    div.body {
        float: left;
        margin-left: calc(50vw - 750px + 170px);
    }
    div.splash div.img {margin: 20px 0px 50px 50px;}
}
@media screen and (min-width: 1200px) {
    div.splash.home div.h1 {width: 100%;}
    div.splash.home div.content {padding-top: 250px;}
}
@media screen and (max-width: 880px) {
    nav#bar-top {padding-left: 20px;}
    nav#bar-top div.name {padding: 15px 0px 0px 0px;}
    nav#bar-top div.menu-toggle {opacity: 1;}
    nav#bar-top div.name div.first {font-size: 17px;}
    nav#bar-top div.name div.last {font-size: 19px;}
    nav#bar-side {height: 0px;}
    nav#bar-side div#main-navigation {
        width: 100%;
        top: 60px;
        max-height: 0px;
        transition: max-height 0.3s;
        padding-left: 50px;
    }
    nav#bar-side ul {font-size: 18px;}
    nav#bar-side ul li ul {max-height: 90px;}
    nav#bar-side div#main-navigation ul.top-level {margin: 20vh 0px 0px 0px;}
    nav#bar-side div#main-navigation.open {max-height: 120vh;}
    div.body {
        width: 100%;
        padding-top: 60px;
    }
    div.splash {padding: 0px 40px;}
    div.splash div.img {
        width: 500px;
        height: 500px;
    }
    div.splash.home div.content {padding-top: 250px;}
    ul.messy-list li {padding: 40px 0px;}
}

@media screen and (max-width: 780px) {
    div.cookieConsent {padding: 20px 15px;}
    div.cookieConsent div.info {padding-right: 15px;}
    h1 {font-size: 30px;}
    nav#bar-top {height: 42px;}
    nav#bar-top div.name {padding: 5px 0px 0px 0px;}
    nav#bar-top div.menu-toggle {right: 20px;}
    nav#bar-side div#main-navigation {top: 40px;}
    div.body {padding-top: 42px;}
    div.splash {padding: 0px 20px;}
    div.splash.home div.h1 {
        width: 500px;
    }
    div.splash div.img {
        width: 500px;
        height: 500px;
    }
    div.splash.home div.content {padding-top: 200px;}
    ul.messy-list li div.flex.row,
    ul.messy-list li div.flex.row-reverse {
        align-items: flex-start;
        justify-items: center;
        -webkit-box-direction: column;
        -moz-box-direction: column;
        -ms-flexbox-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    ul.messy-list li {padding: 20px 0px 40px 0px;}
    ul.messy-list li div.title-bar div.right {text-align: left;}
    ul.messy-list li div.title-bar div.right h2 {
        padding-right: 0px;
        font-size: 18px;
    }
    div.content {padding: 0px 15px;}
    div.img img {width: 100%;}
    .w10      {width: 100%;}
    .w15      {width: 100%;}
    .w20      {width: 100%;}
    .w25      {width: 100%;}
    .w30      {width: 100%;}
    .w35      {width: 100%;}
    .w40      {width: 100%;}
    .w45      {width: 100%;}
    .w50      {width: 100%;}
    .w55      {width: 100%;}
    .w60      {width: 100%;}
    .w65      {width: 100%;}
    .w70      {width: 100%;}
    .w75      {width: 100%;}
    .w80      {width: 100%;}
    .w85      {width: 100%;}
    .w90      {width: 100%;}
    .w95      {width: 100%;}
    .w100     {width: 100%;}
    .w50px    {width: 100%;}
    .w100px   {width: 100%;}
    .w150px   {width: 100%;}
    .w200px   {width: 100%;}
    .w250px   {width: 100%;}
    .w300px   {width: 100%;}
    .w350px   {width: 100%;}
    .w400px   {width: 100%;}
    .w450px   {width: 100%;}
    .w500px   {width: 100%;}
    .w550px   {width: 100%;}
    .w600px   {width: 100%;}
    .w650px   {width: 100%;}
    .w700px   {width: 100%;}
    .w750px   {width: 100%;}
    .w800px   {width: 100%;}
    .w850px   {width: 100%;}
    .w900px   {width: 100%;}
    .w950px   {width: 100%;}
    .w1000px  {width: 100%;}
    .wm50px   {width: 100%;}
    .wm100px  {width: 100%;}
    .wm150px  {width: 100%;}
    .wm200px  {width: 100%;}
    .wm250px  {width: 100%;}
    .wm300px  {width: 100%;}
    .wm350px  {width: 100%;}
    .wm400px  {width: 100%;}
    .wm450px  {width: 100%;}
    .wm500px  {width: 100%;}
    .wm550px  {width: 100%;}
    .wm600px  {width: 100%;}
    .wm650px  {width: 100%;}
    .wm700px  {width: 100%;}
    .wm750px  {width: 100%;}
    .wm800px  {width: 100%;}
    .wm850px  {width: 100%;}
    .wm900px  {width: 100%;}
    .wm950px  {width: 100%;}
    .wm1000px {width: 100%;}
}
@media screen and (max-width: 520px) {
    h1 {font-size: 25px;}
    div.splash.home div.h1 {width: 400px;}
    div.splash div.img {
        width: 400px;
        height: 400px;
    }
}
@media screen and (max-width: 430px) {
    div.h1 {padding: 25px 10px;}
    h1 {font-size: 18px;}
    div.splash div.h1 {
        top: 40px;
    }
    div.splash.home div.h1 {
        width: 215px;
    }
    div.splash div.img {
        width: 320px;
        height: 320px;
        margin: 20px -50px 50px 50px;
    }
}


/*/////////////////////////////////// color schemes ////////////////////////////////////*/

/*
BACKGROUND: Black
TITLE:      Purple
SUBTITLE:   Red
*/
/*
body {background-color: #111;}
p {color: #fff;}
p a {color: #e56;}
p a:hover {color: #f67;}
h1 {color: #fff; box-shadow: 20px 0px 0px #727, -20px 0px 0px #727; background-color: #727;}
h2 {color: #fff; box-shadow: 10px 0px 0px #c13, -10px 0px 0px #c13; background-color: #c13;}
h4 {color: #fff;}
.button,
.button:hover {color: #fff;}
.button {background-color: #838;}
.button:hover {background-color: #727;}
nav, nav a {color: #fff;}
nav#bar-top div.name {color: #fff;}
nav#bar-top div.menu-toggle:hover,
nav#bar-side div#main-navigation a:hover,
nav#bar-side div#main-navigation div.dropdown:hover,
nav#bar-side div#main-navigation li.active a {color: #e56;}
@media screen and (max-width: 880px) {
    nav#bar-top,
    nav#bar-side div#main-navigation {background-color: #111;}
}
@media screen and (max-width: 430px) {
    h1 {box-shadow: 10px 0px 0px #727, -10px 0px 0px #727;}
}
 */

/*
Red and White

RED
FDC9CC
FB9FA6
F97982
DD4F59
C32833
 */
/*
body {background-color: #fafafa;}
p {color: #000000;}
p a {color: #DD4F59;}
p a:hover {color: #FB9FA6;}
h1 {color: #ffffff; box-shadow: 20px 0px 0px #DD4F59, -20px 0px 0px #DD4F59; background-color: #DD4F59;}
h2 {color: #ffffff; box-shadow: 10px 0px 0px #DD4F59, -10px 0px 0px #DD4F59; background-color: #DD4F59;}
h4 {color: #000000;}
h5 {color: #DD4F59;font-weight:300}
div.window-shadow {
    box-shadow: 0px 0px 10px 0px #cccccc;
    background-color: #ffffff;
}
nav, nav a {color: #bbbbbb;}
nav#bar-top div.name a {color: #DD4F59;}
nav#bar-top div.menu-toggle {color: #FFFFFF;}
nav#bar-top div.menu-toggle:hover {color: #FFFFFF;}
nav#bar-side div#main-navigation a:hover,
nav#bar-side div#main-navigation div.dropdown:hover,
nav#bar-side div#main-navigation li.active a {color: #DD4F59;}
.button,
.button:hover {color: #ffffff;}
.button {background-color: #DD4F59;}
.button:hover {background-color: #C32833;}
div.cookieConsent {background-color: #222222;}
div.cookieConsent div.info {color: #FFFFFF;}
@media screen and (min-width: 1500px) {
    div.window-shadow {
        left:  calc(50vw - 750px);
        right: calc(50vw - 750px);
    }
}
@media screen and (max-width: 880px) {
    nav#bar-top {                      background-color: #DD4F59; }
    nav#bar-side div#main-navigation { background-color: #FFFFFF; }
    nav#bar-top div.name a {color: #FFFFFF;}
}
@media screen and (max-width: 520px) {
    nav a { font-weight: 600; }
}
 */



/*
Red and Black
 */
body {background-color: #222222;}
p {color: #FFFFFF;}
p a {color: #FB9FA6;}
p a:hover {color: #DD4F59;}
h1 {color: #FFFFFF; box-shadow: 20px 0px 0px #C32833, -20px 0px 0px #C32833; background-color: #C32833;}
h2 {color: #FFFFFF; box-shadow: 10px 0px 0px #C32833, -10px 0px 0px #C32833; background-color: #C32833;}
h4 {color: #FFFFFF;}
h5 {color: #F97982; font-weight:300}
div.window-shadow {
    box-shadow: 0px 0px 10px 0px #333333;
    background-color: #111111;
}
nav, nav a {color: #FFFFFF;}
nav#bar-top div.name a {color: #FFFFFF;}
nav#bar-top div.menu-toggle {color: #FFFFFF;}
nav#bar-top div.menu-toggle:hover {color: #FFFFFF;}
nav#bar-side div#main-navigation a:hover,
nav#bar-side div#main-navigation div.dropdown:hover,
nav#bar-side div#main-navigation li.active a {color: #DD4F59;}
.button,
.button:hover {color: #FFFFFF;}
.button {background-color: #DD4F59;}
.button:hover {background-color: #C32833;}
div.cookieConsent {background-color: #444;}
div.cookieConsent div.info {color: #ffffff;}
@media screen and (min-width: 1500px) {
    div.window-shadow {
        left:  calc(50vw - 750px);
        right: calc(50vw - 750px);
    }
}
@media screen and (max-width: 880px) {
    nav#bar-top {                      background-color: #000000; }
    nav#bar-side div#main-navigation { background-color: #222222; }
    nav#bar-top div.name a {color: #FFFFFF;}
}
@media screen and (max-width: 520px) {
    nav a { font-weight: 600; }
}


/*
GREEN
B5E5E1
7DC6C1
4FA29C
328B84
197B74

RED
FDC9CC
FB9FA6
F97982
DD4F59
C32833

PURPLE
CFBDE9
A68AD0
815FB2
64409A
4D2588
 */