/* ======== variables ======== */
:root { 
--bgcol: #eee; /* #373e45 #b5b29e #dad3d0*/;
--bgdark: #282d32;
--black: #000;
--blue-navy: #000080;
--brighter: rgba(255,255,255,0.05);
--grey-dark: #373e45;
--grey-darker: #282d32;
--linkcol: #c09;
--linkcol-hvr: #f06;
--purpl-light: #660f43;
--purpl-med: #471332;
--purpl-drk: #301625;
--txt: #333;
--txtdark: #000;
--txtlight: #fff;
--white: #fff;
--logox: #5c5fd4;
}

/* ======== basics ======== */

/* body.default {background:fixed url(../images/7b.png)no-repeat center center;background-size: auto; }*/
@charset "UTF-8";
.default header {display:none;}
details, main {display: block; }
progress {vertical-align: baseline;}
summary {display: list-item;}
video {object-fit: fill;}
.vid {position: fixed; z-index: 1;width: 2560px;overflow: hidden;}
.wrapper {width: 100%; position: absolute; z-index: 2;}

article {padding:0.5em 0; margin-top: 15%;}
.default article {padding:0.5em 0; margin-top: 5%;}
.artists article, .customers article {column-count: 2;margin-bottom:3em;}
article h1 {padding: 0;margin: 0 0 20px 0;font-weight:normal;}
article h4 {padding: 0;margin: 0;font-weight:normal;}
article details {margin: 5px 0 15px 0;padding: 5px;}
article details[open] {padding: 5px;border-left: 1px dotted rgba(1,1,1,1);display: inline-block;}
article summary {cursor: pointer; list-style: none;}
article summary::-webkit-details-marker {display: none; }
article div.service {margin: 0;margin-left: 1em;
      text-indent: -0.1em;}
article p {margin-left: 1em;}
.edit {float:right;padding: 0.1em 0.2em;display: list-item;list-style: none;border:1px dotted #000;}
footer {position: fixed; z-index: 13; bottom: 0px;right: 0;display:inline-block;transition: height 0.2s ease-in-out;width: 100%;border-top:1px dotted #000;}
footer h3 {margin-bottom:0;}
footer li {line-height: 1.8em;width: 100%;}
footer div {margin:1em;}
footer:hover {transition: height 0.3s ease-in-out }
ul, li {list-style: none;margin: 0;padding: 0;}
.right {float: right;}

/* ======== logo ======== */
header {position: fixed; width: 100%;padding: 1%;margin: 0 auto;}

#logo {border-left: 0 solid #fff;border-bottom: 0 solid #fff;padding:0 0.2em;margin: 0;color: var(--txt);display: inline-block; float: left;}
#logo h2 {margin: 0;padding: 2px 0 0 0;}
#logo h3 {display: none;color: var(--txt);padding:3px 0 0 29px;}
.op08 {opacity:0.8;}
.op05 {opacity:0.55;}
.op02 {opacity:0.3;}

/* ======== nav ======== */
nav {text-align:right; margin: 0.5% 0 0 0;max-width: 100%;float:right;padding:0 0.2em;}
.site-navigation > div {margin: 0 0.2% 0 0;}
.site-navigation ul {margin: 0;padding: 0 1px 0 0;width: 100%;}
.site-navigation li {margin:0 10px 5px 0;float: left;}
.search {padding: 1em 5% 0.5em;display:none;}
.search input[type=search] {width: 16em;height: 2.125em;padding-right: 0.1875em;padding-left: 2em;border-radius: 0.5em; background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2732%27 height=%2732%27 viewBox=%270 0 32 32%27%3E%3Cg fill=%27%23333%27%3E%3Cpath d=%27M4,13c0-5,4-9,9-9c5,0,9,4,9,9c0,5-4,9-9,9C8,22,4,18,4,13z M13,19c3.3,0,6-2.7,6-6s-2.7-6-6-6s-6,2.7-6,6S9.7,19,13,19z%27/%3E%3Cpath d=%27M17.5,19l1.5-1.5l4.5,3L28,25c0,0,0,1.5-0.75,2.25S25,28,25,28l-4.5-4.5L17.5,19z%27/%3E%3C/g%3E%3C/svg%3E") no-repeat left center;background-size: 2em 2em;}


/* ======== colors ======== */
a {color: var(--txt);}


/* ======== Clearfix ======== */
header::after, footer::after, nav ul::after, nav ol::after, .container::after { content: "";display: table;clear: both;}


/* ======== Styling and layout for screen media (mobile first) 
   ===================================================================================== */
@media screen {html {-webkit-text-size-adjust: 100%; text-size-adjust: 100%;background-color: black;}
body {position: relative;margin: 0;}
.wrapper {padding: 1px 0;}
.container {width: 92%;max-width: 800px;margin: 80px auto 2em auto;min-height:100vh;}
.default .container {width: 92%;max-width: 1600px;margin: 0 auto;}
.article {margin-bottom: 1em;word-wrap: break-word;}
.complementary-content {margin: 2em -6% 0;padding: 0 6%;border-top: 2px dashed #cccccc;word-wrap: break-word;}
.accessibility {position: absolute;width: 1px;height: 1px;margin: -1px;padding: 0;overflow: hidden;clip: rect(0 0 0 0);border: 0;white-space: nowrap;}

/* Links
     ========================================================================== */
a, a:active, a:hover, #logo h2 a {text-decoration: none;}
a {-webkit-text-decoration-skip: ink;text-decoration-skip-ink: auto;touch-action: manipulation;}
a:hover, a:active {outline: 0;}
a:focus {outline: 1px solid #0066ff;}
h1, h2 {color: var(--txt);}
.paginator {display: flex;justify-content: space-between;}
.skip-link {position: absolute;z-index: 2;top: 1px;left: 1px;padding: 0.25em 0.5em;transform: translateY(-5em);transition: transform 0.25s ease-in-out;color: #333333;font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}.skip-link:focus, .skip-link:active {transform: translateY(0);}


/* Typography
     ========================================================================== */
@font-face {font-family: KEL; src: url('../../fonts/Krub-Light.ttf') format('truetype');font-weight: normal; font-style: normal;}
@font-face {font-family: KB; src: url('../../fonts/Roboto[wdth,wght].ttf') format('truetype');font-style: normal;}
article {font-size: 90%;}
article summary {font-size: 48px;line-height: 20px;font-weight: 400;}
.service div summary {font-size: 24px;line-height: 20px;}
.service div summary .right {font-size: 12px;}
article details {font-size: 18px;line-height: 20px;font-weight: 200;}
body {font-family: KB, Arial Unicode MS, "PT Sans", Helvetica, sans-serif;font: 1em, sans-serif;vertical-align: baseline;font-weight:400;}
#c1, #c2 {font-weight: normal;}
footer > div {text-transform: uppercase;}
footer summary {list-style: none}
footer summary::-webkit-details-marker {display: none; }
footer details summary::before { 
  content:"☰"; 
  color: black; font-size:120%; font-weight: 900;
  /* you can style it however you want, use background-image for example */
}

#logo h2 {font-size: 36px;line-height: 30px;font-weight: 200;}
#logo h3 {font-size: 11px;font-weight: normal;line-height: 0.9;text-transform: lowercase;word-break: break-all;}
nav li a {text-transform: uppercase;}
.start-msg, .start-msg2 {text-transform: uppercase;}
.start-msg, .start-msg2 {text-align: center;}
h1 {font-size:1.7rem;}
h2.start {font-size: 56px;text-transform: uppercase;line-height: 40px;}
h2.start2 {text-transform: uppercase;font-size: 40px;line-height: 30px;}

html {font-size: 1em;line-height: 1.3;}
h1,h2,h3,h4,h5,h6 {clear: both;font-weight:normal;}
h1 {text-transform: uppercase;font-weight:normal;}
h2 {margin: 0.75em 0;font-size: 1.7rem;letter-spacing: -0.25px;line-height: 1.25;}
h3 {margin: 1em 0;font-size: 1.5rem;letter-spacing: -0.25px;line-height: 1.3333333;}
h3.service {margin: 0;text-transform: uppercase;}
h4 { margin: 1em 0;font-size: 1.25rem;line-height: 1.4;}
h5 {margin: 1em 0;font-size: 1.125rem;line-height: 1.4444444;}
h6 {margin: 1em 0;font-size: 1rem;line-height: 1.5;}
b, strong {font-weight: bolder;}
address {margin: 1em 0;}
blockquote {margin: 0.8em 0;font-size: 1.25rem;font-style: italic;line-height: 1.4;text-align: center;}
abbr[title] {border-bottom: 0;-webkit-text-decoration: underline dotted;text-decoration: underline dotted;}
mark,var {padding: 0 0.25em;border-radius: 0.25em;background: #fff9e1;color: #333333;}
pre,code,kbd,samp {border: 1px solid #e3e3e3;border-radius: 0.2857143em;font-family: Menlo, Consolas, Monaco, monospace;font-size: 0.875rem;
line-height: 1.5;}
code,kbd,samp {padding: 1px 0.21429em;}
pre {
    padding: 0.5714286em 1.1428571em;
    /* 1 */
    overflow-x: auto;
    /* 2 */
    word-wrap: normal;
    /* 3 */
    -moz-tab-size: 4;
      -o-tab-size: 4;
         tab-size: 4;
  }
  pre code {
    padding: 0;
    border: 0;
    background-color: transparent;
    direction: ltr;
    font-size: 1em;
    -webkit-hyphens: none;
        -ms-hyphens: none;
            hyphens: none;
    text-align: left;
    word-wrap: normal;
    word-break: normal;
    word-spacing: normal;
    white-space: pre;
  }

  /**
   * Prevent `sub` and `sup` elements from affecting the line height in all
   * browsers.
   */
  sub,
sup.footnote,
sup {
    position: relative;
    font-size: 0.75em;
    line-height: 0;
    vertical-align: baseline;
  }

sup {top: -0.5em;}
sub {bottom: -0.25em;}
small,figcaption,tfoot,.footnote {font-size: 0.8125rem;line-height: 1.5;}
figcaption,tfoot,.footnote {color: #585858;}
figcaption {margin-top: 0.5em;font-style: italic;}
hr {box-sizing: content-box;height: 24px;margin: 1em 0;overflow: visible;border: 0;background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 240 24%27%3E%3Cpath fill=%27%23333%27 d=%27M0,0c1.742,13.61,54.74,20.912,119.995,15.279C184.922,9.679,238.594,13.024,240,24c-1.744-13.613-54.742-20.913-120.005-15.284C55.078,14.32,1.405,10.973,0,0z%27/%3E%3C/svg%3E") 50% 50% no-repeat;
    background-size: 240px 24px;}

/* Support for non-latin languages (can be removed if not required)
     ========================================================================== */
  /**
   * Bidirectional (bidi) text support.
   * See: https://www.w3.org/International/articles/inline-bidi-markup/#cssshim
   */
  [dir=ltr],
[dir=rtl] {
    unicode-bidi: -webkit-isolate;
    unicode-bidi: isolate;
  }

  bdo[dir=ltr],
bdo[dir=rtl] {
    unicode-bidi: isolate-override;
  }

  /**
   * Preferred font for Japanese language.
   */
  :lang(ja) {
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Meiryo UI", sans-serif;
    font-weight: 300;
  }

  /**
   * Preferred font for Korean language.
   */
  :lang(ko) {
    font-family: GulimChe, Gulim, sans-serif;
  }

  /**
   * Preferred font for simplified Chinese (PRC) language.
   */
  :lang(zh-cn) {
    font-family: "PingFang SC", SimHei, sans-serif;
  }

  /**
   * Preferred font for traditional Chinese (Taiwan, Hong Kong) language.
   */
  :lang(zh-tw) {
    font-family: "PingFang TC", PMingLiU, sans-serif;
  }

  /**
   * Suppress `text-decoration` in some RTL languages for better legibility.
   */
  [lang|=ar] a:hover,
[lang|=fa] a:hover,
[lang|=ur] a:hover {
    text-decoration: none;
  }

  /**
   * Computer code should be LTR.
   */
  [dir=rtl] code {
    direction: ltr;
  }

  /**
   * Swap image alignment right/left positions in RTL languages.
   */
  [dir=rtl] img.align-left {
    margin: 1em 0 1em 1em;
    float: right;
  }
  [dir=rtl] img.align-right {
    margin: 1em 1em 1em 0;
    float: left;
  }

  /**
   * Swap table caption alignment in RTL languages.
   */
  [dir=rtl] caption {
    text-align: right;
  }

  /**
   * Swap table cell text alignments in RTL languages.
   */
  [dir=rtl] th,
[dir=rtl] td {
    text-align: right;
  }

  /**
   * Swap menu/list padding positions in RTL languages.
   */
  [dir=rtl] menu,
[dir=rtl] ol,
[dir=rtl] ul {
    padding: 0 2em 0 0;
  }

  [dir=rtl] .site-navigation ul,
[dir=rtl] .article-list {
    padding: 0;
  }

  /**
   * Swap definition description margin positions in RTL languages.
   */
  [dir=rtl] dd {
    margin: 0 2em 0 0;
  }

  /**
   * Swap checkbox/radio margin positions in RTL languages.
   */
  [dir=rtl] input[type=checkbox] + label,
[dir=rtl] input[type=radio] + label {
    margin: 0 0 0 0.5em;
  }
  [dir=rtl] input[type=checkbox] + label:last-of-type,
[dir=rtl] input[type=radio] + label:last-of-type {
    margin: 0;
  }

  /**
   * Swap `select` icon position in RTL languages.
   */
  [dir=rtl] select {
    padding-right: 0.1875em;
    padding-left: 1.5em;
    background-position: 0.5em center;
  }

  /**
   * Swap ‘skip links’ position in RTL languages.
   */
  [dir=rtl] .skip-link {
    right: 1px;
    left: auto;
  }

  /**
   * Swap anchor float position on comments.
   */
  [dir=rtl] .comments h4 .comment-anchor {
    float: left;
  }

/* Embedded content
     ========================================================================== */
video {display: inline-block;}
img,video {max-width: 100%;height: auto;}
img {vertical-align: middle;}
img.align-left {margin: 1em 1em 1em 0;float: left;}
img.align-right {margin: 1em 0 1em 1em;float: right;}
img.align-center {display: block;margin: 1em auto;}
figure {margin: 1em 0;}
table {width: 100%;margin-bottom: 1em;border-spacing: 0;border-collapse: collapse;}
caption {margin-bottom: 0.5em;font-style: italic;text-align: left;}
th,td {padding: 0.5em;border: 1px solid #d4d4d4;vertical-align: top;text-align: left;}
thead tr {}
thead th,thead td {border: 1px solid #cccccc;}
tbody tr:nth-child(even) {background-color: #f7f7f7;}
tfoot th,tfoot td {padding: 0.6666667em;}
[rowspan] {vertical-align: middle;}

/* Lists
     ========================================================================== */
menu,ol,ul {padding: 0 0 0 2em;}
li > ul,li > ol {margin: 0;}
li::marker {color: color-text-heading;}
dd {margin: 0 0 0 2em;}
.article-list {margin: 0 0 2em;padding: 0;border-top: 1px solid #cccccc;list-style: none;}
.article-list li {margin-bottom: 0;border-bottom: 1px solid #cccccc;}

/* Forms
     ========================================================================== */
fieldset {min-width: 0;margin: 1em 0;padding: 1px 1em;border: 1px solid #cccccc;}
legend {display: table;box-sizing: border-box;max-width: 100%;padding: 0;color: inherit;white-space: normal;}
button,input {overflow: visible;touch-action: manipulation;}
button,input,optgroup,select,textarea {box-sizing: border-box;max-width: 100%;margin: 0;vertical-align: baseline;}
[type=color], [type=date], [type=datetime], [type=datetime-local], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url],[type=week], select, textarea {height: 2em;padding: 0.25em 0.1875em;border: 1px solid #cccccc;border-radius: 0;background: #eee; -webkit-appearance: none;-moz-appearance: none;appearance: none;}
[type=color]:focus, [type=date]:focus, [type=datetime]:focus, [type=datetime-local]:focus, [type=email]:focus, [type=month]:focus, [type=number]:focus, [type=password]:focus, [type=search]:focus, [type=tel]:focus, [type=text]:focus, [type=time]:focus, [type=url]:focus,
[type=week]:focus, select:focus, textarea:focus { border-color: #0066ff;outline: 1px solid transparent;} 
[type=checkbox],[type=radio] {padding: 0;}
[type=checkbox] + label,[type=radio] + label {margin: 0 0.5em 0 0;}
[type=checkbox] + label:last-of-type,[type=radio] + label:last-of-type {margin: 0;}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {height: auto;}
[type=search]::-webkit-search-decoration {/* autoprefixer: off */appearance: none;}
select {padding-right: 1.5em;
    background: #eee url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2717%27 height=%275%27 viewBox=%270 0 17 5%27%3E%3Cpolygon fill=%27%23333%27 points=%270,0 5,5 10,0%27/%3E%3C/svg%3E") right center no-repeat;
    background-size: 1.0625em 0.3125em;
    text-transform: none;
  }
select::-ms-expand {opacity: 0;}
select[size],select[multiple] {height: auto;padding-right: 0.5em;background-image: none;}
select[size="0"],select[size="1"] {height: 2em;}
optgroup {font-style: normal;font-weight: bold;}
textarea {width: 100%;height: auto; min-height: 3em;overflow: auto;vertical-align: top;resize: vertical;}
[disabled],[disabled] option,[disabled] optgroup,span.disabled {border-color: #d4d4d4 !important;opacity: 1;background: #eeeeee !important;box-shadow: none !important;color: #aaaaaa !important;text-shadow: none !important;cursor: default !important;}
.small input {width: 25%;min-width: 151px;}
.small textarea {height: 5.5em;}
.large input {width: 50%;min-width: 302px;}
.large textarea {height: 9.75em;}
input:focus:invalid,select:focus:invalid,textarea:focus:invalid {border-color: #9d261d;box-shadow: none;}

input:-moz-ui-invalid,
select:-moz-ui-invalid,
textarea:-moz-ui-invalid {
    border-color: #9d261d;
    box-shadow: none;
  }

  :-ms-input-placeholder {
    opacity: 1;
    color: #999999;
    /* 1 */
    font: inherit;
  }
  ::placeholder {
    opacity: 1;
    color: #999999;
    /* 1 */
    font: inherit;
  }

  .required {
    border: 0;
    color: #9d261d;
  }

/* Buttons
     ========================================================================== */
button {overflow: visible;text-transform: none;}
button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner {padding: 0;border-style: none;}
button,[type=button],[type=reset],[type=submit] {background-color: #dfdfdf;
    background-image: linear-gradient(#eeeeee, #dfdfdf);
    display: inline-block;
    position: relative;
    width: auto;
    height: 2em;
    padding: 0.25em 1em;
    border: 1px solid #dfdfdf;
    border-radius: 1em;
    background-clip: padding-box;
    box-shadow: 0 2px 0 #acacac;
    color: #333333;
    font-weight: normal;
    text-align: center;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    cursor: pointer;
  }
  button:hover,
[type=button]:hover,
[type=reset]:hover,
[type=submit]:hover {
    background-color: #eee;
    background-image: linear-gradient(#f8f8f8, #e9e9e9);
    border-color: #bebebe;
    color: #333333;
    text-decoration: none;
  }
  button:active,
[type=button]:active,
[type=reset]:active,
[type=submit]:active {
    top: 2px;
    border-color: #bebebe;
    box-shadow: none;
    color: #1a1a1a;
    text-decoration: none;
  }
  button:focus,
[type=button]:focus,
[type=reset]:focus,
[type=submit]:focus {
    border-color: #0066ff;
    outline: 1px solid transparent;
  }

  /**
   * Disbaled button additional styling.
   */
  button[disabled],
[type=button][disabled],
[type=reset][disabled],
[type=submit][disabled] {
    top: 2px !important;
  }

/* Comments
     ========================================================================== */
.comments {margin-bottom: 1em;padding: 1px 1em;border-radius: 0.5em;background: #f7f7f7; word-wrap: break-word;}
.comments h4 .is-author { font-weight: normal;}
.comments h4 .comment-anchor {float: right;font-weight: normal;}
.comments-author {background: #efefef;}
#cpreview {margin-bottom: 2px;padding: 1em;border-radius: 0.5em;background-color: #fff9e1;}
.error_message li {color: #9d261d;}
.comments_error {border-color: #9d261d;}

}

/* ==========================================================================
   Additional layout for screen media 576px and up
   ========================================================================== */
@media only screen and (min-width: 38em) {
article summary {font-size: 48px;line-height: 20px;}
.artists article, .customers article {column-count: 3;}
body {font-size:100%;}
#logo h2 {font-size: 48px;line-height: 30px;}
.site-navigation li {float: left;}
.site-navigation a {padding: 0 0.6em;}
.search {margin-top: 0.2em;padding: 0;background: transparent;}
.search input[type=search] {width: 2.125em;padding-right: 0;transition: width 0.2s ease-in-out, border-color 0.2s ease-in-out;cursor: pointer;}
.search input[type=search]:hover {background-color: #eee;}
.search input[type=search]:focus {width: 16em;padding-right: 0.1875em;background-color: #eee;cursor: auto;border:none;}

}

/* ============== Additional layout for screen media 864px and up === */
@media only screen and (min-width: 46em) {
.artists article, .customers article {column-count: 5;font-size: 70%;}
body {font-size:120%;}
.container {width: 92%;max-width: 1200px;margin: 80px auto 2em auto;min-height: 100vh;}
footer li {float: left;width: 33%;}
h2.start {font-size: 180px;line-height: 48px;margin:0 0 80px 0;}
h2.start2 {font-size: 48px;line-height: 36px;}
nav {text-align:right; margin: 0.5% 1% 0 0;max-width: 88%;float: right;padding: 0 0.2em;}
.site-navigation ul {width:100%;}
html {font-size: 1.125rem;}
#logo h3 {display: block; margin: 0;width: 113px;}
.search {padding: 1em 5% 0.5em;display: inline-block;}
}

/* =============== Additional accessibility for screen media */
@media screen and (prefers-reduced-motion: reduce), (update: slow) {
.search input[type=search] {transition-duration: 0;}
}

/* =============== Styling and layout for print media ============= */
@media print {body: display:none;}


/* ======== border radius ======== */
article, .edit, #logo, .site-navigation li, .site-navigation li a:hover {border-radius: 5px;}

/* animation */
@keyframes details-show {
  from {
    opacity:0;
    transform: var(--details-translate, translateY(-0.5em));
  }
}

details[open] > *:not(summary) {
  animation: details-show 700ms ease-in-out;
}