/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #fef5ee;
    text-shadow: none;
}

::selection {
    background: #fef5ee;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
	width:100%;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */
audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}
/*
 * Remove default fieldset styles.
 */
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */
.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

   /* ==========================================================================
      Mobile first
      ========================================================================== */

  html{font-size:100%;}
  body{font-family: 'Noto Sans', sans-serif;color: #7f7f7f;height:100%;font-size:0.875em;}
  a{color:#333;text-decoration: none;}
  a:hover{color:#333;text-decoration: underline;}
  h1{float:left;position:relative;color:#7f7f7f;width:100%;font-family: 'Noto Serif', serif;font-size:2em;margin:12px 0 12px 0;font-weight:200;}
  h1 a{text-decoration: none;color:#7f7f7f;}
  h1 a:hover{text-decoration: none;color:#7f7f7f;}
  #maincontainer{width:calc(100% - 72px); margin: 0 auto;}
  #header{float:left;width:100%;border-bottom:solid 1px #f9f9f9;margin-bottom:20px;}
  #footer{float:left;width:100%;border-top:solid 1px #f9f9f9;margin:20px 0 20px 0;}
  #copy-footer{font-size:0.75em;float:right;text-align:left;width:100%;margin-top:20px;}
  #hamburger{position:absolute;top:0px;right:20px;margin:24px 15px 0px 0px;display:block;cursor:pointer;}
  #nav{width:100%;float:left;display:none;margin-bottom:36px;}
  #nav ul{float:left;list-style: none;padding:0;margin:0;}
  #nav li ul{margin-left:10px;font-size:0.938em;width:calc(100% - 10px);}
  #nav li li ul{margin-left:10px;width:100%;font-size:1em;width:calc(100% - 10px)}
  #nav li .workcategorylink{text-transform: lowercase;}
  #nav li ul.sub-menu li a{text-transform: lowercase;}
  #nav li .link-selected{color:#999;}
  #social-icons{float:left;width:100%;margin-top:20px;}
  #social-icons img{max-width:24px;}
  #maincontent{float:left;width:100%; position: relative;height:100%;}
  #maincontent img.largeimage{float:left;width:100%;}
  .catgriditem {float:left;width:100%;padding:0 0 15px 0;}
  .catgriditem img{width:100%;}
  .catgriditem-link{float:left;width:100%;text-align: center;padding-top: 10px;}
  .dot-right{float:right;height: 12px;width: 12px;background-color: #ff0000;border-radius: 50%;}
  .dot-left{float:left;height: 12px;width: 12px;background-color: #ff0000;border-radius: 50%;}
  #artwork-content{float:left;width:100%;}
  #artwork-content img{float:left;width:100%;}
  #artwork-nav{float:right;width:100%;margin:20px 0 0 0;}
  #artwork-nav #artwork-thumbnails {list-style:none;float:left;padding:0;margin:0 0 20px 0;display:none;}
  #artwork-nav #artwork-thumbnails li {float:left;margin: 0 0 1px 1px;}
  #artwork-nav #artwork-thumbnails li img{height:50px;}
  #artwork-details{float:left;width:100%;margin-bottom:40px;text-align:left;}
  #artwork-details h2{font-family: 'Noto Serif', serif;font-weight: bold;margin:0 0 20px 0;font-size:1.125em;}
  #artwork-details span{font-size:0.750em;}
  #artwork-details #focusimage {cursor:grab;}
  #artwork-details #focusimage:active {cursor: grabbing;}
  /* ==========================================================================
     Wordpress styles
     ========================================================================== */
  #wordpress-container{float:left;width:100%; position: relative;height:100%;}
  #wordpress-container h1{font-size:1.125em;font-weight:bold;font-family: 'Noto Sans', sans-serif;margin:0 0 12px 0;}
  #wordpress-container #main-column{float:left;width:100%;margin-top: -12px;}
  #wordpress-container #main-column-full{float:left;width:calc(100%);margin-top: -12px;}
  #wordpress-container #main-column img{float:left;width:100%;height: auto;margin:10px 0;}
  #wordpress-container .entry-content img{float:left;width:100%;height: auto;}
  #wordpress-container .entry-meta{font-size:0.750em;}
  #wordpress-container footer{border-bottom:1px solid #f9f9f9;padding:10px 0;margin:12px 0 40px 0;}
  #wordpress-container footer.entry-meta .entry-meta-category-tag{float:right;}
  #wordpress-container ul.pagination{float:left;padding:0;margin:0;background-color:#f9f9f9;list-style-type:none;width:100%;padding:12px 0;}
  #wordpress-container ul.pagination li{float:left;margin-left:12px;}
  #wordpress-container h1.page-title{font-size:1em;font-weight:normal;}
  #wordpress-container h2.page-title{font-size:1em;font-weight:normal;}
  #wordpress-container .entry-content img{max-width:100%;}
  #wordpress-container .cp_button{font-weight: 400; float: left; clear: both; color: #333; background-color: #bbcde3; padding: 11px 20px; text-align: center; text-decoration: none; line-height: 22px; margin: 20px 0;}
  #wordpress-container .cp_button:hover{font-weight: 400; float: left; clear: both; color: #fff; background-color: #4775ad; padding: 11px 20px; text-align: center; text-decoration: none; line-height: 22px; margin: 20px 0;}
  #wordpress-container #sidebar-right{float:right;width:100%;background-color: #f9f9f9;padding:0x;margin:0 0 0 40px;}
  #wordpress-container #sidebar-right h1{font-size:1em;padding:0;margin:12px 0 8px 12px;}
  #wordpress-container #sidebar-right h2{font-size:1em;}
  #wordpress-container #sidebar-right ul{list-style-type:none;font-size:0.750em;padding:12px;margin:0 0 10px 0;}
#bootstrapbasic_search_widget-2{float:left;width:100%;padding:12px;}
#cpsearch-form{float:left;width:100%;}
#cpsearch-forminput{width:70%;float:left;font-family: 'Noto Sans', sans-serif;font-size: 11px;}
#cpsearch-formbutton{width:20%;float:left;border:none;background:none;padding:0;text-align: left;}
  #wordpress-container .gridable--col {float:left;}
  #wordpress-container .gridable img{float:left;width:100%;height: auto;}
  #wordpress-container .gridable--row {float:left;width:100%;margin-bottom:20px;}
  #wordpress-container .gridable .col-2 {float:left;width:100%;}
  #wordpress-container .gridable .col-4 {float:left;width:100%;}
  #wordpress-container .gridable .col-6 {float:left;width:100%;}
  #wordpress-container .gridable .col-8 {float:left;width:100%;}
  #wordpress-container .gridable .col-10 {float:left;width:100%;}
  #wordpress-container .gridable .col-12 {width:100%;}

  /* MailChimp Form Embed Code - Classic - 08/17/2011 */
  #mc_embed_signup form {display:block; position:relative; text-align:left; padding:10px 0 10px 3%}
  #mc_embed_signup h2 {font-weight:bold; padding:0; margin:15px 0; font-size:1.4em;}
  #mc_embed_signup input {border:1px solid #999; -webkit-appearance:none;}
  #mc_embed_signup input[type=checkbox]{-webkit-appearance:checkbox;}
  #mc_embed_signup input[type=radio]{-webkit-appearance:radio;}
  #mc_embed_signup input:focus {border-color:#333;}
  #mc_embed_signup .button {clear:both; background-color: #aaa; border: 0 none; border-radius:4px; color: #FFFFFF; cursor: pointer; display: inline-block; font-size:15px; font-weight: bold; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding: 0 22px; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto;}
  #mc_embed_signup .button:hover {background-color:#777;}
  #mc_embed_signup .small-meta {font-size: 11px;}
  #mc_embed_signup .nowrap {white-space:nowrap;}
  #mc_embed_signup .mc-field-group {clear:left; position:relative; width:96%; padding-bottom:3%; min-height:50px;}
  #mc_embed_signup .size1of2 {clear:none; float:left; display:inline-block; width:100%;}
  * html #mc_embed_signup .size1of2 {margin-right:2%; /* Fix for IE6 double margins. */}
  #mc_embed_signup .mc-field-group label {display:block; margin-bottom:3px;}
  #mc_embed_signup .mc-field-group input {display:block; width:100%; padding:8px 0; text-indent:2%;}
  #mc_embed_signup .mc-field-group select {display:inline-block; width:99%; padding:5px 0; margin-bottom:2px;}
  #mc_embed_signup .datefield, #mc_embed_signup .phonefield-us{padding:5px 0;}
  #mc_embed_signup .datefield input, #mc_embed_signup .phonefield-us input{display:inline; width:60px; margin:0 2px; letter-spacing:1px; text-align:center; padding:5px 0 2px 0;}
  #mc_embed_signup .phonefield-us .phonearea input, #mc_embed_signup .phonefield-us .phonedetail1 input{width:40px;}
  #mc_embed_signup .datefield .monthfield input, #mc_embed_signup .datefield .dayfield input{width:30px;}
  #mc_embed_signup .datefield label, #mc_embed_signup .phonefield-us label{display:none;}
  #mc_embed_signup .indicates-required {text-align:right; font-size:11px; margin-right:4%;}
  #mc_embed_signup .asterisk {color:#c60; font-size:200%;}
  #mc_embed_signup .mc-field-group .asterisk {position:absolute; top:40px; right:10px;}
  #mc_embed_signup .clear {clear:both;}
  #mc_embed_signup .mc-field-group.input-group ul {margin:0; padding:5px 0; list-style:none;}
  #mc_embed_signup .mc-field-group.input-group ul li {display:block; padding:3px 0; margin:0;}
  #mc_embed_signup .mc-field-group.input-group label {display:inline;}
  #mc_embed_signup .mc-field-group.input-group input {display:inline; width:auto; border:none;}
  #mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%;margin: 0 5%; clear: both;}
  #mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
  #mc_embed_signup #mce-error-response {display:none;}
  #mc_embed_signup #mce-success-response {color:#529214; display:none;}
  #mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}
  #mc-embedded-subscribe {clear:both; width:auto; display:block; margin:1em 0 1em 5%;}
  #mc_embed_signup #num-subscribers {font-size:1.1em;}
  #mc_embed_signup #num-subscribers span {padding:.5em; border:1px solid #ccc; margin-right:.5em; font-weight:bold;}
  
input[type="search"] {
  -webkit-appearance: textfield;
  box-sizing: content-box;
  width: 60%;
  padding: 3px;
}

.wp-block-search__label{display:none;}

   /* ==========================================================================
      Mid width
      ========================================================================== */

      @media only screen and (min-width: 650px) {
         #nav{width:200px;float:left;}
         #maincontent{width:calc(100% - 200px);}
         #wordpress-container{width:calc(100% - 200px);}
         #hamburger{display:none;}
         
         #topsearch{position:absolute;top:40px;right:100px;}
         #topsearch #topsearchform #s{border:none;}
         
         #nav{display:block;}
         #artwork-content{width:calc(78% - 200px);}
         #artwork-nav{float:right;width:calc(22% - 20px);margin:0 0 0 20px;}
         #artwork-nav #artwork-thumbnails {display:block;}
         h1{font-size:3em;}
         .catgriditem {float:none;width:150px;padding:0 15px 15px 15px;display:inline-block;vertical-align:top;}
         .catgriditem img{display: block;max-width:100%;max-height:100%;margin: 0 auto;width:auto;}
         .catgriditem .catgriditem-outer{width:165px;height:165px;max-width:165px;max-height:165px;margin-bottom:0;}
         .catgriditem .catgriditem-inner{width:165px;height:165px;max-width:165px;max-height:165px;margin-bottom:0;display:table-cell;vertical-align: middle;}
         .catgriditem .catgriditem-link{float:left;width:100%;text-align:center;padding-top:0px;}
         .catgriditem .catgriditem-link a{text-decoration: none;color:#666666;font-size:0.857em;}
         #wordpress-container #main-column{float:left;width:calc(100% - 200px);margin-top: -12px;}
         #wordpress-container #main-column img{float:left;width:100%;height: auto;}
         #wordpress-container .entry-content img{float:left;width:auto;height: auto;}
         #wordpress-container #sidebar-right{float:right;width:120px;background-color: #f9f9f9;padding:12px 20px;margin:0 0 0 40px;}
         #wordpress-container #sidebar-right h1{font-size:1em;padding:0;margin:0 0 8px 0;}
         #wordpress-container #sidebar-right ul{list-style-type:none;font-size:0.750em;padding:0;margin:0 0 10px 0;}
         #wordpress-container #sidebar-right #bootstrapbasic_search_widget-2{float:left;width:100%;padding:0;margin:0 0 10px 0;}
         #wordpress-container .gridable--col {float:left;}
         #wordpress-container .gridable img{float:left;width:100%;height: auto;}
         #wordpress-container .gridable--row {float:left;width:100%;margin-bottom:20px;}
         #wordpress-container .gridable .col-2 {width:calc(16.66% - 20px);padding-right:20px;}
         #wordpress-container .gridable .col-3 {width:calc(25% - 20px);padding-right:20px;}
         #wordpress-container .gridable .col-4 {width:calc(33.33% - 20px);padding-right:20px;}
         #wordpress-container .gridable .col-8 {width:calc(66.66% - 20px);padding-right:20px;}
         #wordpress-container .gridable .col-10 {width:calc(83.3333% - 20px);padding-right:20px;}
         #wordpress-container .gridable--col .smalltext{font-size:0.75em;}
         #mc_embed_signup .size1of2 {clear:none; float:left; display:inline-block; width:46%; margin-right:4%;}
      }

      /* ==========================================================================
         Bigger than Big Phone Landscape
         ========================================================================== */

         @media only screen and (min-width: 650px) {
            #nav{width:200px;float:left;}
            #maincontent{width:calc(100% - 200px);}
            #wordpress-container{width:calc(100% - 200px);}
            #hamburger{display:none;}
            #nav{display:block;}
            #artwork-content{width:calc(78% - 200px);}
            #artwork-nav{float:right;width:calc(22% - 20px);margin:0 0 0 20px;}
            #artwork-nav #artwork-thumbnails {display:block;}
            h1{font-size:3em;}
            .catgriditem {float:none;width:120px;padding:0 15px 15px 15px;display:inline-block;vertical-align:top;}
            .catgriditem img{display: block;max-width:100%;max-height:100%;margin: 0 auto;width:auto;}
            .catgriditem .catgriditem-outer{width:135px;height:135px;max-width:135px;max-height:135px;margin-bottom:0;}
            .catgriditem .catgriditem-inner{width:135px;height:135px;max-width:135px;max-height:135px;margin-bottom:0;display:table-cell;vertical-align: middle;}
            .catgriditem .catgriditem-link{float:left;width:100%;text-align:center;padding-top:0px;}
            .catgriditem .catgriditem-link a{text-decoration: none;color:#666666;font-size:0.857em;}
            #wordpress-container #main-column{float:left;width:calc(100% - 200px);margin-top: -12px;}
            #wordpress-container #main-column img{float:left;width:100%;height: auto;}
            #wordpress-container .entry-content img{float:left;width:auto;height: auto;}
            #wordpress-container #sidebar-right{float:right;width:120px;background-color: #f9f9f9;padding:12px 20px;margin:0 0 0 40px;}
            #wordpress-container #sidebar-right h1{font-size:1em;padding:0;margin:0 0 8px 0;}
            #wordpress-container #sidebar-right ul{list-style-type:none;font-size:0.750em;padding:0;margin:0 0 10px 0;}
            #wordpress-container .gridable--col {float:left;}
            #wordpress-container .gridable img{float:left;width:100%;height: auto;}
            #wordpress-container .gridable--row {float:left;width:100%;margin-bottom:20px;}
            #wordpress-container .gridable .col-2 {width:calc(16.66% - 20px);padding-right:20px;}
            #wordpress-container .gridable .col-3 {width:calc(25% - 20px);padding-right:20px;}
            #wordpress-container .gridable .col-4 {width:calc(33.33% - 20px);padding-right:20px;}
            #wordpress-container .gridable .col-8 {width:calc(66.66% - 20px);padding-right:20px;}
            #wordpress-container .gridable .col-10 {width:calc(83.33% - 20px);padding-right:20px;}
            #mc_embed_signup .size1of2 {clear:none; float:left; display:inline-block; width:46%; margin-right:4%;}
         }

          @media only screen and (min-width: 840px) {
             .catgriditem {float:none;width:150px;padding:0 15px 15px 15px;display:inline-block;vertical-align:top;}
             .catgriditem img{display: block;max-width:100%;max-height:100%;margin: 0 auto;width:auto;}
             .catgriditem .catgriditem-outer{width:165px;height:165px;max-width:165px;max-height:165px;margin-bottom:0;}
             .catgriditem .catgriditem-inner{width:165px;height:165px;max-width:165px;max-height:165px;margin-bottom:0;display:table-cell;vertical-align: middle;}
             .catgriditem .catgriditem-link{float:left;width:100%;text-align:center;padding-top:0px;}
             .catgriditem .catgriditem-link a{text-decoration: none;color:#666666;font-size:0.857em;}
          }

   /* ==========================================================================

      Full width

      ========================================================================== */

    @media only screen and (min-width: 980px) {
       #maincontainer{width: 980px;}
       .catgriditem {float:none;width:200px;padding:0 30px 30px 30px;display:inline-block;vertical-align:top;}
       .catgriditem img{display: block;max-width:100%;max-height:100%;margin: 0 auto;}
       .catgriditem .catgriditem-outer{width:260px;height:260px;max-width:260px;max-height:260px;margin-bottom:0;}
       .catgriditem .catgriditem-inner{width:260px;height:260px;max-width:260px;max-height:260px;margin-bottom:0;display:table-cell;vertical-align: middle;}
       .catgriditem .catgriditem-link{float:left;width:100%;text-align:center;}
       .catgriditem .catgriditem-link a{text-decoration: none;color:#666666;font-size:1em;}
       #wordpress-container .gridable .col-6 {width:calc(50% - 20px);padding-right:20px;}
    }

/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}