/*

Theme Name: Center for Contemporary Printmaking 2016
Author: Zero Defect Design LLC
Author URI: http://www.zerodefectdesign.com 

*/

   /* resets and clearfix */

   html, div { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
   *, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }
   .cf:before, .cf:after { content: " "; display: table; }
   .cf:after { clear: both; }
   img { border: none; }

   /* structure */

   body 
   { 
      margin: 0px; padding: 0px 0px 0px 60px; color: #000000; text-align: center; 
      background: #DEDEDE url('images/bg.jpg') center center no-repeat;
      background-size: cover; background-attachment: fixed;
   }
   body, input, select, textarea, table, td, th { font: 300 18px/26px 'Open Sans', sans-serif; }
   .container 
   { 
      padding: 0px 40px 0px 80px; text-align: left; max-width: 1600px; margin: 0px auto; 
      background: #666666 url('images/bg.png') top left repeat-y; background-size: 100% 100%; 
   }
   body.onecolumn .container { background-image: none; background-color: #FFFFFF; }
   .primary { float: left; width: 75%; padding-right: 40px; }
   .secondary { float: right; width: 25%; padding-left: 40px; font-size: 18px; }
   .secondary div.social { margin-top: 20px; }
   #hd .secondary { position: absolute; bottom: 30px; right: 0px; }
   .content { margin: 40px 0px; }
   .footer { padding: 30px 0px 130px 0px; border-top: 1px solid #CCCCCC; }
   #hd { border-bottom: 1px solid #CCCCCC; text-align: left; padding: 30px 0px; position: relative; }
   img.alignright, .wp-caption { max-width: 50%; height: auto; float: right; margin: 0px 0px 20px 30px; font-size:13px; color:#333333; line-height:20px; }
   img.alignleft, .wp-caption { max-width: 50%; height: auto; float: left; margin: 0px 30px 20px 0px; font-size:13px; color:#333333; line-height:20px; }
   #mobilenav { display: none; }
   #mobilenav a { color: #999999; padding: 5px; }
   #mobilenav a i.material-icons { font-size: 36px; }
   body.home .secondary a { font-weight: 600; }
   
   /* alternate backgrounds */
   
   body.support { background-image: url('images/bg-fall.jpg'); }
   body.opportunities { background-image: url('images/bg-typesetting.jpg'); }
   body.exhibition, body.exhibitions { background-image: url('images/bg-black.jpg'); }
   body.event, body.workshops { background-image: url('images/bg-pigments.jpg'); }
   body.events { background-image: url('images/bg-intaglio.jpg'); }
   
   /* type */
   
   h1, h2 { font: 400 36px/40px 'Open Sans', sans-serif; margin: 0px 0px 20px 0px; letter-spacing: -1px; }
   h2 .light { color: #A95B34; }
   h3 { font: 400 24px/32px 'Oswald', sans-serif; margin: 20px 0px 20px 0px; text-transform: uppercase; color: #A95B34; letter-spacing: 1px; }
   h4 { font: 400 20px/22px 'Open Sans', sans-serif; margin: 0px 0px 10px 0px; }
   h5 { font: 400 18px/20px 'Oswald', sans-serif; color: #A95B34; text-transform: uppercase; margin: 0px 0px 25px 0px; }
   h5 { margin-top: 30px; padding-top: 30px; border-top: 1px solid #CCCCCC; }
   h5:first-child, .slide h5, h5.breadcrumb { margin-top: 0px; padding-top: 0px; border: none; }
   .info { font: 400 18px/26px 'Oswald', sans-serif; color: #A95B34; margin: 20px 0px; text-transform: uppercase; }
   .secondary ul { list-style-type: none; padding: 0px; margin: 25px 0px; }
   .secondary li { padding: 5px 0px; margin: 0px; font-weight: 400; }
   li { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; }
   .footer { font-size: 15px; font-weight: 400; color: #666666; line-height: 24px; }
   .footer b { color: #000000; }
   .secondary .date { font-weight: 400; font-size: 14px; color: #666666; }
   .moar { text-align: right; color: #A95B34; font-style: italic; font-size: 16px; }
   body.home .secondary .moar a { font-weight: 400; }

   /* search results */
   
   body.search dt { margin-top: 20px; }
   body.search h4 { margin-bottom: 5px; }
   body.search .date { font-size: 14px; }
   
   /* links */

   a { text-decoration: none; color: #2E65A4; } /* color: #0078A6; */
   a:hover { color: #A95B34; }
   a.btn, .btn 
   { 
      color: #FFFFFF; background-color: #2E65A4; font: 700 16px/16px 'Open Sans', sans-serif;
      white-space: nowrap; padding: 1px 5px; cursor: pointer; border: none; text-transform: lowercase;
   }
   a.btn:hover, .btn:hover { color: #FFFFFF; background-color: #A95B34; }

   .btn.inquire { font-weight: 400; font-size: 15px; }
   a#ccp 
   { 
      display: block; max-width: 580px; height: 60px;
      background: transparent url('images/ccp.png') left center no-repeat; background-size: contain; margin: 0px 0px 5px 0px;
   }
   body.home a#ccp { max-width: 100%; }
   a.ccp-reversed
   {
      display: block; max-width: 580px; height: 60px;
      background: transparent url('images/ccp-reversed.png') left center no-repeat; background-size: contain; margin: 0px 0px 5px 0px;
   }
   a#square
   {
      display: block; width: 60px; height: 60px; background-color: #FED016; position: absolute; left: -100px; top: 30px; 
   }
   a#logo 
   { 
      display: block; height: 75px; background: transparent url('images/logo.png') left center no-repeat; background-size: contain; 
   }
   a.social 
   { 
      display: inline-block; width: 26px; height: 26px; background-size: 26px 26px; margin: 0px 4px 0px 0px; 
      background-repeat: no-repeat; background-position: center center; background-color: transparent;
   }
   .instagram { background-image: url('images/icon-instagram.png'); }
   .facebook { background-image: url('images/icon-facebook.png'); }
   .twitter { background-image: url('images/icon-twitter.png'); }
   .flickr { background-image: url('images/icon-flickr.png'); }
   .email { background-image: url('images/icon-email.png'); }
   
   /* main menu */

   div#menu { text-align: left; }   
   ul#menu-mainmenu a { padding: 0px 3px 0px 2px; }
   ul#menu-mainmenu a i.search { position: relative; top: 5px; left: -4px; }
   ul#menu-mainmenu { display: inline; margin: 0px; padding: 0px; list-style-type: none; margin-left: -5px; }
   ul#menu-mainmenu li { margin: 0px; padding: 0px; display: inline-block; list-style-type: none; }
   ul#menu-mainmenu > ul, ul#menu-mainmenu li, ul#menu-mainmenu li ul, ul#menu-mainmenu li ul li { z-index: 500; }
   /* top-level */
   ul#menu-mainmenu>li 
   { 
      padding-left: 3px; padding-right: 6px; 
      background: transparent url('images/menu-dot.png') right 12px no-repeat; 
   }
   ul#menu-mainmenu>li>a { font: 400 18px/22px 'Oswald', sans-serif; text-transform: uppercase; color: #999999; }
   ul#menu-mainmenu>li>a:hover, ul#menu-mainmenu a:hover { color: #A95B34; }
   ul#menu-mainmenu>li:last-child { background-image: none; }
   /* sub-menus */
   ul#menu-mainmenu > li > ul > li > a { padding: 3px 10px 3px 10px; display: block; }
   ul#menu-mainmenu ul 
   { 
      background: transparent url('images/submenu.png') top left repeat-x;
      padding: 18px 5px 9px 0px; 
      position: absolute; visibility: hidden; font-size: 16px; font-weight: 400; text-align: left; margin-left: -5px;  
   }
   ul#menu-mainmenu li:hover ul { visibility: visible; }
   ul#menu-mainmenu li li { display: block; } 
   
   /* mobile menu */
   
   #mobilemenu 
   { 
      display: none; background-color: #173354; padding: 30px; color: #FFFFFF; text-align: left;
      position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: 600; overflow: auto;
   }
   #mobilemenu a.closemenu { display: block; text-align: right; }
   #mobilemenu a.closemenu i.material-icons { font-size: 48px; }
   ul#menu-mobilemenu { display: block; clear: both; list-style-type: none; margin: 20px 0px 0px 0px; padding: 0px; }
   ul#menu-mobilemenu li { list-style-type: none; margin: 0px; padding: 0px; border-bottom: 1px solid rgba(255,255,255,0.2); }
   ul#menu-mobilemenu li:first-child { border-top: 1px solid rgba(255,255,255,0.2); }
   ul#menu-mobilemenu li a { font-size: 32px; line-height: 32px; padding: 15px 0px; margin: 0px; display: block; font-weight: 400; color: #FFFFFF; }
   ul#menu-mobilemenu li:last-child, ul#menu-mobilemenu .search  { display: none; }   
      
   /* announcement bar */
   
   div.alertbox 
   { 
      font-size: 18px; line-height: 20px; font-weight: 700; color: #FFFFFF; background-color: #FED016; 
      padding: 6px; text-align: center; margin: 0px 0px 30px 0px; 
   }
   a div.alertbox { color: #FFFFFF; background-color: #2E65A4; }   
   a:hover div.alertbox { color: #FFFFFF; background-color: #A95B34; }
   
   /* tiles */
   
   .tiles { display: flex; flex-wrap: wrap; flex-direction: row; margin: 0px -20px -0px -20px; overflow: hidden; }
   .tile { padding: 0px 20px 0px 20px; margin-bottom: 20px; width: 33.333333%; position: relative; flex: 0 1 auto; }
   .tile h4 { margin-top: 15px; }
   .tile img { width: 100%; height: auto; margin: 0px 0px 9px 0px; }
   .img { width: 100%; padding-top: 56.25%; background-position: center center; background-repeat: none; background-size: cover; }
   .img img { display: none; }
   .tile .date { color: #000000; font-weight: 600; font-size: 14px; line-height: 18px; margin: 8px 0px 0px 0px; display: block; }
   .secondary .img { margin: 0px 0px 15px 0px; }

   .tiles.gallery .tile { width: 25%; }
   .tiles.gallery .tile .img { padding-top: 100%; }
   .tiles.gallery .tile h4 { margin: 10px 0px 0px 0px; font-size: 16px; line-height: 18px; }
   
   /* sponsor logos */
   
   .sponsors { display: flex; flex-wrap: wrap; margin: 0px -20px -0px -20px; overflow: hidden; }
   .sponsors a { padding: 0px 20px 0px 20px; margin-bottom: 20px; width: 25%; position: relative; text-align: center; }
   .sponsors a img { max-width: 100%; height: auto; }
   
   /* expanding zone */
   
   dl.expanding dt 
   { 
      color: #FFFFFF; background-color: #2E65A4; display: block; margin: 20px 0px; padding: 3px 9px; cursor: pointer; font-weight: 400;
   }
   dl.expanding dt:after { content: '+'; float: right; font-weight: 700; color: #FED016; }
   dl.expanding dt.open:after { content: '-'; }
   dl.expanding dt:hover { color: #FFFFFF; background-color: #A95B34; }
   dl.expanding dd { padding: 0px; margin: 10px 0px; display: none; }

   /* slider */
   
   .slider { margin-bottom: 30px; border-bottom: 1px solid #CCCCCC; width: 100%; }
   a.slide 
   { 
      display: block; width: 100%; padding-top: 56.25%; padding-bottom: 105px; position: relative; cursor: pointer; 
      margin-right: 20px;   
      
   }
   a.slide .image 
   { 
      position: absolute; top: 0px; left: 0px; display: block; width: 100%; padding-top: 56.25%; background-color: #FFFFFF; 
      background-position: center center; background-repeat: no-repeat; background-size: cover;
   }
   a.slide .caption 
   { 
      display: block; position: absolute; bottom: 0px; left: 0px;
      color: #000000; background-color: #FFFFFF; padding: 20px 30px 20px 0px; 
   }
   a.slide .caption h2 { margin: 10px 0px; color: #000000; }
   a.slide .caption h5 { margin: 10px 0px; color: #A95B34; }
   .flickity-page-dots { top: 15px; right: 15px; bottom: auto; width: auto; text-align: right; }
   .flickity-page-dots .dot { background-color: #FFFFFF; width: 15px; height: 15px; margin: 0px 0px 0px 8px; opacity: 0.5; }
   .flickity-page-dots .dot.is-selected { background-color: #FFFFFF; }
   .flickity-prev-next-button { display: none; }
   
   
   /* forms */

   .fscf-div-label             { font-family:'Open Sans', sans-serif;text-align:left; padding-top:15px; font-weight:bold;  }
   .fscf-required-indicator { text-align:left;  color: #8a0505; }
   .fscf-required-text      { font-family:'Open Sans', sans-serif;text-align:left;font-size: 14px; font-style:italic;}
   
   .fscf-option-label       { font-family:'Open Sans', sans-serif; display:inline; }
   .fscf-input-select       { font-family:'Open Sans', sans-serif; text-align:left; }
   .fscf-fieldset-field     { border:1px solid black; width:100%; max-width:1200px; padding:10px; }
   .fscf-input-text         { font-family:'Open Sans', sans-serif; text-align:left; margin:0; width:100%; max-width:1200px; }
   .fscf-input-textarea     { font-family:'Open Sans', sans-serif; text-align:left; margin:0; width:100%; max-width:1200px; height:120px; }
   .fscf-button-submit          {  color: #FFFFFF; background-color: #2E65A4; font: 700 16px/16px 'Open Sans', sans-serif;
                                                 white-space: nowrap; padding: 1px 5px; cursor: pointer; border: none; text-transform: lowercase; margin-top:15px; }
   .fscf-button-submit:hover,  .fscf-button-submit:active {  color: #FFFFFF; background-color: #A95B34;  }
   
   /* Placeholder Style - WebKit browsers - Safari, Chrome */
   ::-webkit-input-placeholder { font-family:'Open Sans', sans-serif; font-size: 15px; font-weight: 300; opacity:0.7; color:#666666; padding:5px; }
   /* Placeholder Style - Mozilla Firefox 4 - 18 */
   :-moz-placeholder { font-family:'Open Sans', sans-serif; font-size: 15px;  font-weight: 300; opacity:0.7; color:#666666; padding:5px; }
   /* Placeholder Style - Mozilla Firefox 19+ */
   ::-moz-placeholder { font-family:'Open Sans', sans-serif; font-size: 15px;  font-weight: 300; opacity:0.7; color:#666666; padding:5px; }
   /* Placeholder Style - Internet Explorer 10+ */
   :-ms-input-placeholder { font-family:'Open Sans', sans-serif; font-size: 15px;  font-weight: 300; opacity:0.7; color:#666666; padding:5px; }

   /* rl fixes */
   
   .rl-gallery-caption { padding-bottom: 0px !important; }
   .rl-gallery .rl-gallery-item-caption { line-height: 1.5em; }
   .rl-gallery-item-title { font-style: italic; margin-bottom: 5px; line-height: 1.5em; }
   .rl-gallery .requestlink { font-size: 0.75em; font-style: italic; font-weight: 400; border-bottom: 1px dotted #2E65A4; }
   .rl-gallery .requestlink:hover { border-bottom: 1px dotted #A95B34; }
   
   /* search control modal */

   #simplemodal-overlay { background-color: #FFFFFF; }
   #basic-modal-content { display: none; padding: 0px; text-align: center; }
   #basic-modal-content form { margin: 0px 30px; white-space: nowrap; }
   #basic-modal-content input
   {
      font-size: 48px; line-height: 48px; background-color: transparent; border: none;
      -webkit-appearance: none; border-radius: 0; -webkit-border-radius: 0px;
   }
   #basic-modal-content input:focus { outline: none; }
   #basic-modal-content input#s { max-width: 60%; border-bottom: 2px dotted #666666; color: #000000; }
   #basic-modal-content input#dosearch, #basic-modal-content input#closemodal { cursor: pointer; padding: 0px; color: #2E65A4; }
   #basic-modal-content input#dosearch:hover, #basic-modal-content input#closemodal:hover { color: #A95B34; }
      
   @media screen and (min-width: 1500px)
   {
      .container { border-left: 30px solid #FFFFFF; border-right: 15px solid #F3F3F3; }
      a#square { width: 100px; height: 100px; left: -140px; }
   }
   
   @media screen and (max-width: 1100px)
   {
      #menu { display: none; }
      #mobilenav { display: block; position: absolute; top: 26px; right: -5px; }
      a#ccp { height: 40px; top: 20px; }
      #hd { padding: 20px 0px; }
      div.hours { display: none; }
      #hd .secondary { bottom: 25px; }
      a#square { top: 20px; width: 40px; height: 40px; left: -60px; }
      .container { padding-left: 50px; padding-right: 25px; } 
      #hd div.social { display: none; }
   }
   
   @media screen and (max-width: 1040px)
   {
      #hd .primary { width: 100%; padding-right: 110px; }
      .container { background-color: #FFFFFF; background-image: none; }
      .content .primary, .content .secondary { float: none; padding: 0px; width: 100%; margin: 0px 0px 40px 0px; }
      .content .secondary { padding-top: 40px; border-top: 1px solid #CCCCCC; margin-bottom: 0px; }
      .footer .primary, .footer .secondary { float: none; padding: 0px; width: 100%; margin: 0px 0px 30px 0px; }
      .secondary ul
      {
         -webkit-column-count: 2; -moz-column-count: 2; column-count: 2;
         -webkit-column-gap: 30px; column-gap: 30px; -moz-column-gap: 30px;
      }
      a#logo { display: none; }
   }
   
   @media screen and (max-width: 900px)
   {
      body { padding-left: 40px; }
   }
   
   @media screen and (max-width: 760px)
   {
      img.alignright { float: none; margin: 0px 0px 30px 0px; max-width: 100%; }
      .tile { width: 50%; }
      .tiles.gallery .tile { width: 33.333333%; }
      .sponsors a { width: 50%; margin-bottom: 30px; }
   }
   
   @media screen and (max-width: 650px)
   {
      .tiles.gallery .tile { width: 50%; }
      body { background-image: none; padding-left: 0px; }
      .container { padding-left: 40px; }
      a#square { display: none; }
      #hd { padding: 10px 0px; }
      #mobilenav { top: 17px; }
      a.slide { padding-bottom: 125px; }
      a.slide .caption h2 { font-size: 36px; line-height: 36px; }
   }