:root {
  --cyan: #009fe3;
  --magenta: #EB008B;
  --yellow: #ffdc00;
  --black: #000;
  --white: #fff;
  /* TAB ACTIVE */
  --cont-yellow: #fff680;
  --cont-white: #00000014;
  /* TEXT COLOR */
  --text-cyan: #00a5d1;
  --text-magenta: #eb008b;
  --text-yellow: #ffed00; }

/* COLOR TABS */
.controller li#cont-yellow {
  background: var(--yellow); }

.controller li#cont-cyan {
  background: var(--cyan); }

.controller li#cont-magenta {
  background: var(--magenta); }

.controller li#cont-black {
  background: var(--black); }

.controller li#cont-white {
  background: var(--white); }

.controller li.active {
  background: #ffffff33 !important; }
  .controller li.active#cont-yellow {
    background: var(--cont-yellow) !important; }
  .controller li.active#cont-white {
    background: var(--cont-white) !important; }

.cont-cyan {
  background: var(--cyan); }
  .cont-cyan h1.head1 {
    color: var(--yellow); }
  .cont-cyan h1.head3 {
    color: var(--yellow); }
  .cont-cyan .link, .cont-cyan a {
    color: var(--text-magenta); }
  .cont-cyan .masonry .masonry-item span.title {
    background: var(--cyan); }
  .cont-cyan .masonry .masonry-item:before {
    border-bottom-color: var(--cyan); }
  .cont-cyan .masonry .masonry-item:after {
    border-right-color: var(--cyan); }
  .cont-cyan .masonry .masonry-item.masonry-text:hover {
    background: var(--magenta); }
    .cont-cyan .masonry .masonry-item.masonry-text:hover .masonry-content {
      background: var(--magenta); }

.cont-magenta {
  background: var(--magenta); }
  .cont-magenta h1.head1 {
    color: var(--yellow); }
  .cont-magenta h1.head3 {
    color: var(--yellow); }
  .cont-magenta .link, .cont-magenta a {
    color: var(--text-cyan); }
  .cont-magenta .masonry .masonry-item span.title {
    background: var(--magenta); }
  .cont-magenta .masonry .masonry-item:before {
    border-bottom-color: var(--magenta); }
  .cont-magenta .masonry .masonry-item:after {
    border-right-color: var(--magenta); }
  .cont-magenta .masonry .masonry-item.masonry-text:hover {
    background: var(--cyan); }
    .cont-magenta .masonry .masonry-item.masonry-text:hover .masonry-content {
      background: var(--cyan); }

.cont-yellow {
  background: var(--yellow); }
  .cont-yellow h1.head1 {
    color: var(--magenta); }
  .cont-yellow h1.head3 {
    color: var(--magenta); }
  .cont-yellow .link, .cont-yellow a {
    color: var(--text-cyan); }
  .cont-yellow .masonry .masonry-item span.title {
    background: var(--yellow); }
  .cont-yellow .masonry .masonry-item:before {
    border-bottom-color: var(--yellow); }
  .cont-yellow .masonry .masonry-item:after {
    border-right-color: var(--yellow); }
  .cont-yellow .masonry .masonry-item.masonry-text:hover {
    background: var(--cyan); }
    .cont-yellow .masonry .masonry-item.masonry-text:hover .masonry-content {
      background: var(--cyan); }

.cont-black {
  background: var(--black); }
  .cont-black h1.head1 {
    color: var(--yellow); }
  .cont-black h1.head3 {
    color: var(--magenta); }
  .cont-black .link, .cont-black a {
    color: var(--text-cyan); }
  .cont-black .masonry .masonry-item span.title {
    background: var(--black); }
  .cont-black .masonry .masonry-item:before {
    border-bottom-color: var(--black); }
  .cont-black .masonry .masonry-item:after {
    border-right-color: var(--black); }
  .cont-black .masonry .masonry-item.masonry-text:hover {
    background: var(--cyan); }
    .cont-black .masonry .masonry-item.masonry-text:hover .masonry-content {
      background: var(--cyan); }

.cont-white {
  background: var(--white); }
  .cont-white p {
    color: var(--black); }
  .cont-white h1.head1 {
    color: var(--magenta); }
  .cont-white h1.head2 {
    color: var(--black); }
  .cont-white h1.head3 {
    color: var(--magenta); }
  .cont-white .link, .cont-white a {
    color: var(--text-cyan); }
  .cont-white .masonry .masonry-item {
    border-top-color: #00000042;
    border-left-color: #0000006b; }
    .cont-white .masonry .masonry-item span.title {
      background: var(--white);
      color: var(--black); }
    .cont-white .masonry .masonry-item:before {
      border-bottom-color: var(--white); }
    .cont-white .masonry .masonry-item:after {
      border-right-color: var(--white); }
    .cont-white .masonry .masonry-item.masonry-text:hover {
      background: var(--cyan); }
      .cont-white .masonry .masonry-item.masonry-text:hover .masonry-content {
        background: var(--cyan); }
      .cont-white .masonry .masonry-item.masonry-text:hover p {
        color: var(--white) !important; }
  .cont-white .controller li:before {
    border-top: 20px solid #00000042;
    border-right: 20px solid #00000042; }
  .cont-white .controller li.active:before, .cont-white .controller li:hover:before {
    border-top: 20px solid #00000042;
    border-right: 20px solid #00000042; }
  .cont-white img.svg {
    filter: invert(1); }