/* Font
=======================*/


/* Reset
=======================*/

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

ul,
li {
    padding: 0;
    margin: 0;
    list-style: none;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: 'Calibri', Helvetica, Arial, Sans-serif;
    font-size: 14px;
    line-height: 1.4;
    font-weight: normal;
    text-rendering: optimizeLegibility;
    color: black;
    background-color: white;
    opacity: ;
}
html,
body {
    /*overflow: hidden;
    width: 100%;*/
    /*height: 100%;*/
    min-height: 100%;
    width: 100%;
    min-width: 860px;
}

html {

}

body {

}
body.red {
    background: red;
}
body.blue {
    background: blue;
}
body.yellow {
    background: yellow;
}
input {
    -webkit-border-radius: 0;
            border-radius: 0;
    -webkit-appearance: none;
}
input:focus {
    outline:0;
}


/* Type
=======================*/
a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    text-decoration: none;
    color: inherit;
}

p {
    font-size: 1em;
    margin-top: 0;
    margin-bottom: 0;
    letter-spacing: 0.03em;
}
p a,
p a:hover {
    text-decoration: underline;
}

h1,
h2,
h3 {
    text-align: center;
    letter-spacing: .02em;
    line-height: 1.3;
    font-weight: normal;
    margin: 0 auto .5em;
    text-transform: none;
}

h1 {
    font-size: 1.75em;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1em;
}
::selection {
    /*background-color: transparent;*/
}
p::selection, p ::selection {
    background-color: #ccc;
    color: #000;
}
/*:focus { outline: thin dotted; }*/

h1,
h2,
h3,
.font-serif {
    font-family: 'AlbertusMT', serif;
    font-weight: normal;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.break-avoid,
.break-avoid p {
    -webkit-column-break-inside:avoid;
    -moz-column-break-inside:avoid;
    -o-column-break-inside:avoid;
    -ms-column-break-inside:avoid;
    column-break-inside:avoid;
}

/* Nav
=========================*/
nav {

}
nav ul {
    text-align: center;
    margin: 0 -.75em;
}
nav ul,
nav li,
nav a {
    display: inline-block;
    height: 2.5em;
    line-height: 2.5em;
    /*vertical-align: middle;*/
}
nav li {
    margin: 0 0;
}
nav a {
    padding: 0 .75em;
    cursor: pointer;
}

/* Header
=========================*/
header {
    font-size: 1rem;
    text-align: center;
    padding: 1.25em 2% .5em;
    border-bottom: 1px solid black;
    background: #FFF;
    height: 6em;
}

#logo {
    font-size: 2em;
    font-weight: 900;
    font-family: 'Univers LT', helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1em;
    height: .8em;
    width: 10em;
    background: url('../assets/logo.png') no-repeat center center;
    background-size: contain;
    margin: 0 auto .4em;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
#logo .city {
    font-family: 'AlbertusMT', serif;
    font-weight: 400;
}
header nav {
    margin: .25em 0;
}
header nav a {
    font-weight: 700;
}
header nav ul,
header nav li,
header nav a {
    height: 1em;
    line-height: 1em;
}
nav a:hover,
nav a.is-checked {
    text-decoration: underline;
}

/* Building
=========================*/
#building {
    overflow: hidden;
}

/* Kiosk
=========================*/
.kiosk {
    padding: 0 2%;
    border-bottom: 1px solid black;
    position: relative;
    z-index: 9999;
    background: #fff;
    height: 2.5em;
}
.kiosk {
    /*display: none;*/
    -webkit-transform: translateY(-110%);
       -moz-transform: translateY(-110%);
        -ms-transform: translateY(-110%);
         -o-transform: translateY(-110%);
            transform: translateY(-110%);
    -webkit-transition: all 750ms;
       -moz-transition: all 750ms;
         -o-transition: all 750ms;
            transition: all 750ms;
}
.gallery .kiosk {
    display: block;
    -webkit-transform: translateY(0%);
       -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
         -o-transform: translateY(0%);
            transform: translateY(0%);
}

.kiosk #filter-nav {
    float: right;
}
.kiosk #panel-nav {
    float: left;
}

.kiosk nav a {
    text-transform: capitalize;
}
ul.socials {
    margin-left: 1em;
}

.panels-group {
    position: relative;
    top: 100%;
    width: 100%;
    left: 0;
    right: 0;
    margin-top: 0px;
    background: #fff;
    z-index: 999;
    display: block;
    /*max-height: 0;*/
    /*overflow: hidden;*/
}
.panels-group.active {
    /*max-height: 1000px;*/
}
.panel {
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    right: 0;
    background: #fff;
    padding: 2em 2% 6em;
    border-bottom: 1px solid black;
    /*display: none;*/
    z-index: 1;
    -webkit-transform: translateY(-120%);
       -moz-transform: translateY(-120%);
        -ms-transform: translateY(-120%);
         -o-transform: translateY(-120%);
            transform: translateY(-120%);
    -webkit-transition: all 750ms;
       -moz-transition: all 750ms;
         -o-transition: all 750ms;
            transition: all 750ms;
}
.panel.active {
    display: block;
}
/*#panels.exhibition #panel-exhibition,
#panels.artist #panel-artist,
#panels.about #panel-about,
#panels.contact #panel-contact,*/
#panels.active .panel.active {
    display: block;
    /*max-height: 1000px; */
    z-index: 999;
    /*border-bottom: 1px solid black;*/
    /*transition: max-height 250ms ease, padding 250ms ease;*/
    -webkit-transform: translateY(0%);
       -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
         -o-transform: translateY(0%);
            transform: translateY(0%);
}

.panel .title {
    text-transform: uppercase;
    text-align: center;
    font-size: 1.75em;
    line-height: 1.3;
    padding: .5em 0 1em;
    width: 23.5%;
}
.panel .content {
    /*-webkit-column-count: 4; -moz-column-count: 4; column-count: 4; -webkit-column-gap: 2em; -moz-column-gap: 2em; column-gap: 2em;*/
}
.panel p {
    margin-bottom: 1em;
}
.panel .panel-column p:first-child {
    margin-top: 0;
}
.panel .content .panel-column {
    display: block;
    float: left;
    width: 23.5%;
    margin-right: 2%;
}
.panel .panel-column:last-child {
    margin-right: 0;
}
.panel .panel-close,
.close {
    position: absolute;
    height: 2em;
    width: 2em;
    margin: 1%;
    top: 0;
    right: 0;
    cursor: pointer;
}
.panel .panel-close:after,
.close:after {
    content: "×";
    font-family: 'AlbertusMT', serif;
    font-size: 1.5em;
    line-height: 2em;
    text-align: center;
    height: 2em;
    width: 2em;
    top: 0;
    right: 0;
    position: absolute;
}

/* Masonry filter
=========================*/
.filter-group {

}
.filter-group a {
    text-decoration: none;
}


/* Gallery
=========================*/
.iso-get-start #gallery {
    /*opacity: 0;*/
    /*background: red*/
}
.iso-get-success #gallery {
    /*opacity: 0;*/
    /*background: orange*/
}
.iso-get-error #gallery {
    /*opacity: 0;*/
    /*background: yellow*/
}
.iso-reset-complete #gallery {
    /*opacity: 0;*/
    /*background: green*/
}
.iso-loading #gallery {
    /*opacity: 0;*/
    /*background: cyan*/
}
.iso-loaded #gallery {
    /*opacity: 0;*/
    /*background: blue*/
}
.iso-init-start #gallery{
    /*opacity: 0;*/
    /*background: purple*/
}
.iso-layout-start #gallery {
    /*opacity: 0;*/
    /*background: pink*/
}
.iso-layout-complete #gallery {
    /*opacity: 1;*/
    /*background: grey*/
}

.iso-processing #gallery {
    opacity: 0;
}
#gallery-spinner {
    opacity: 0;
    transition: opacity 250ms ease;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 30px;
    height: 30px;
    /*background: pink;*/
    z-index: 0;
}
.iso-processing #gallery-spinner {
    opacity: 1;
}
/* Preloader based on
http://webdesign.tutsplus.com/tutorials/creating-a-collection-of-css3-animated-pre-loaders--cms-21978*/
#spinner_1{
    position:relative;
    width:30px;
    height:30px;
    background: transparent;
    -webkit-border-radius:50px;
            border-radius:50px;
    -webkit-animation: spinner_1 750ms infinite cubic-bezier(0,.65,.65,1);
       -moz-animation: spinner_1 750ms infinite cubic-bezier(0,.65,.65,1);
         -o-animation: spinner_1 750ms infinite cubic-bezier(0,.65,.65,1);
            animation: spinner_1 750ms infinite cubic-bezier(0,.65,.65,1);
}
#spinner_1:after{
    position:absolute;
    width:50px;
    height:50px;
    border-top:3px solid #000;
    border-left:3px solid #000;
    border-bottom:3px solid transparent;
    border-right:3px solid transparent;
    border-radius:50px;
    content:'';
    top:-10px;
    left:-10px;
    /*-webkit-animation: spinner_1_after 1.5s infinite linear;*/
}
@-webkit-keyframes spinner_1 {
    0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
    /*30% {transform: rotate(150deg);}
    70% {transform: rotate(210deg);}*/
    100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@-moz-keyframes spinner_1 {
    0% {-moz-transform: rotate(0deg);transform: rotate(0deg);}
    /*30% {transform: rotate(150deg);}
    70% {transform: rotate(210deg);}*/
    100% {-moz-transform: rotate(360deg);transform: rotate(360deg);}
}
@-o-keyframes spinner_1 {
    0% {-o-transform: rotate(0deg);transform: rotate(0deg);}
    /*30% {transform: rotate(150deg);}
    70% {transform: rotate(210deg);}*/
    100% {-o-transform: rotate(360deg);transform: rotate(360deg);}
}
@keyframes spinner_1 {
    0% {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);}
    /*30% {transform: rotate(150deg);}
    70% {transform: rotate(210deg);}*/
    100% {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg);}
}
@-webkit-keyframes spinner_1_after {
    0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
    50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
    100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}
@-moz-keyframes spinner_1_after {
    0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
    50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
    100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}
@-o-keyframes spinner_1_after {
    0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
    50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
    100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}
@keyframes spinner_1_after {
    0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
    50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
    100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}




/* Overlay
=========================*/
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: rgba(255,255,255,0.5);
    display: none;
    z-index: 99999;
    overflow: auto;
}
#overlay .content {

}
#overlay .content img {
    max-width: 100%;
    height: auto;
}

.reserve-pop-up {
    width: 80%;
    max-width: 1000px;
    /*border: 1px solid black;*/
    min-height: 200px;
    margin: 100px auto;
    padding: 40px;
    background: white;
    position: relative;
    -webkit-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.4);
    box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.4);
}
.reserve-pop-up img {
    display: block;
    margin: 0 auto 40px;
    max-height: 500px;
    width: auto;
}
.reserve-pop-up .caption {
    margin-top: .5em;
    font-size: .8em;
    float: left;
    width: 50%;
}
.reserve-pop-up .terms {
    float: right;
    width: 45%;
}
.reserve-pop-up .reserve {
    margin-top: 1em;
}

body.overlay #overlay{
    display: block;
}




/* Masonry
=========================*/
#gallery {
    padding-bottom: 10em;
    overflow: hidden;
    transition: opacity 500ms ease;
}

#container,
#gallery {
    font-size: 1rem;
    /*opacity: 0;*/
    margin: 3% 2% 0;
    width: 96%;
    min-height: 800px;
}
#container.active,
#gallery.active {
    /*opacity: 1;*/
}

.gutter-sizer {
    width: 2%;
}
.grid-sizer {
    width: 23.4%;
}

.item {
    width: 23.4%;
}
.item {
    /*height: 300px;*/
    height: auto;
    padding-bottom: 1em;
    overflow: hidden;
}
.item.lg {
    width: 49%;
}
.item img {
    width: 100%;
    height: auto;
}
.item.lg img {
    width: 75%;
}
.item:after {
    content: " ";
    display: block;
    position: absolute;
    top: 0%;
    right: 100%;
    height: 100%;
    width: 100%;
    background: rgba(255,255,255,1);
    /*transform: translateX(101%) scale(1.2);
    transition: all 1000ms cubic-bezier(.75,.1,.1,.75);*/
}
.complete.item:after {
    /*width: 0%;*/
    /*transform: translateX(0%) scale(1);*/
    /*transition: all 5000ms cubic-bezier(.22,.9,.22,.9);*/
}

.item.exhibit-name,
.item.artist-name {
    text-transform: uppercase;
    text-align: center;
    font-size: 1.75em;
    line-height: 1.3;
    padding: .5em 0 1em;
}
.item.artist-name,
.item.artwork img {
    cursor: pointer;
}

.item.artwork .caption {
    transition: color 500ms ease;
}

.item.artwork:hover .caption {
    color: #000;
}
.item.artist-name:hover > *,
.item.artwork:hover > * {
    /*transform: translateY(-3%);*/
}


.item.artist-name .view-more,
.item.artist-name .view-all {
    transition: opacity 500ms ease;
    opacity: 0;
    display: block;
    font-size: .35em;
    margin-top: 5px;
}
.item.artist-name:hover .view-more {
    opacity: 1;
}

.item.artist-name .view-more,
.item.artist-name:hover .view-more {
    display: block;
}
.item.artist-name .view-all,
.item.artist-name:hover .view-all {
    display: none;
}

.item.artist-info {
    width: 100%;
    padding-bottom: 3em;
}
.item.artist-info .profile,
.item.artist-info .biography {
    display: block;
    float: left;
}
.item.artist-info .profile {
    width: 23.5%;
    margin-right: 2%;
}
.item.artist-info .biography {
    width: 74.5%;
    min-height: 30em;
/*    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;
    -webkit-column-gap: 1.5%;
       -moz-column-gap: 1.5%;
            column-gap: 1.5%;*/
}
.item.artist-info .biography .biography-column {
    float: left;
    width: 31.5%;
    margin: 0 1.3%;
}
.item.artist-info .biography .biography-column-1,
.item.artist-info .biography .biography-column:first-child {
    margin-left: 0;
}
.item.artist-info .biography .biography-column-3,
.item.artist-info .biography .biography-column:last-child {
    margin-right: 0;
}

.item.artist-info p {
    margin-bottom: 1em;
}
.item .caption {
    color: #aaa;
    margin-top: .5em;
    font-size: .8em;
}
.item .caption .artist {
    /*padding-left: 2em;*/
}
.solo .item .caption .artist {
    display: none;
}
.item .caption .info {

}
.item .price {
    display: none;
    /*opacity: 0;
    -webkit-transition: all 500ms ease;
       -moz-transition: all 500ms ease;
         -o-transition: all 500ms ease;
            transition: all 500ms ease;*/
    /*display: inline-block;*/
    /*max-height: 0;*/
}
.item .reserve {
    padding: 0.5em 0;
    display: none;
    /*opacity: 0;
    max-height: 0;
    -webkit-transition: all 500ms ease;
       -moz-transition: all 500ms ease;
         -o-transition: all 500ms ease;
            transition: all 500ms ease;*/
}

.reserve input[type='submit'],
.reserve input[type='button']{
    -webkit-border-radius: 0;
            border-radius: 0;
    -webkit-appearance: none;
    padding: 0 .6em;
    background: #FFF;
    color: #000;
    border: 1px solid #000;
    font-size: .5em;
    line-height: 2em;
    height: 2.3em;
    text-transform: uppercase;
    cursor: pointer;
    display: block;
}

.reserve input[type='submit']:hover,
.reserve input[type='button']:hover{
    background: #000;
    color: #FFF;
}

.reserve input.disabled[type='submit'],
.reserve input.disabled[type='button'] {
    opacity: 0.3;
    cursor: default;
    display: none;
}
.reserve input[type='submit'].disabled:hover,
.reserve input[type='button'].disabled:hover {
    background: #FFF;
    color: #000;
}

/* Layout
=========================*/
.solo .item {
    /*width: 100%;*/
    padding-bottom: 2em;
}
.solo .item .pay {

}
.solo .item.artist-name {
    /*padding-right: 76.5%;*/
}
.solo .item.artwork,
.solo .item.lg.artwork {
    width: 23.5%;
}
.solo .item.artwork,
.solo .item.artwork img {
    cursor: default;
}
.solo .item img,
.solo .item.lg img {
    width: 100%;
}
.solo .item .caption {
    color: #000;
}
.solo .item .price {
    opacity: 1;
    display: inline-block;
    /*max-height: 1em;*/
}
.solo .item .reserve {
    opacity: 1;
    display: block;
    /*max-height: 2em;*/
}
.solo .item.artist-name:hover .view-all {
    opacity: 1;
}
.solo .item.artist-name .view-all,
.solo .item.artist-name:hover .view-all {
    display: block;
}
.solo .item.artist-name .view-more,
.solo .item.artist-name:hover .view-more {
    display: none;
}

/* Other sections
=========================*/
.section-title {
    text-transform: uppercase;
    text-align: center;
    font-size: 1.75em;
    line-height: 1.3;
    padding: .5em 0 1em;
}
.section-title.item {
    width: 100%;
}
.section-message {
    font-size: 50%;
}
.section-message-link {
/*    text-transform: none;
    font-family: 'Calibri', Helvetica, Arial, Sans-serif;*/
}
.section-message-link a{
    text-decoration: underline;
}

img.section-banner {
    display: block;
    width: 90%;
    max-width: 1400px;
    margin: 2em auto;
}
img.section-logo {
    display: block;
    max-width: 200px;
    height: auto;
    margin: 2em auto;
}


.red {
    background: red;
}

/* Footer
=========================*/
footer {
    padding: 2%;
    opacity: 0;
    width: 100%;
    text-align: center;
    font-size: .8em;
}
.iso-loaded footer{
    opacity: 1;
}
footer a {
    text-decoration: underline;
}

footer .reserve-message {
    margin: 1em auto 6em;
    width: 100%;
    max-width: 500px;
    font-size: 1rem;
    display: none;
}



/* Media query
=========================*/

/* Non-Retina stuff here */
@media (-webkit-max-device-pixel-ratio: 1.5), (-o-max-device-pixel-ratio: 3/2), (max-resolution: 144dpi) { }

/* Large screen */
@media only screen and (min-height: 650px) and (min-width: 1100px) { }
/* Phone */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { }
/* Portrait iPad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { }
/* Landscape iPad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { }

@media only screen and (min-width: 1600px) {
    html,
    body {
        font-size: 16px;
    }
    .reserve-pop-up {
        max-width: 1400px;
        margin-top: 50px;
    }
    .reserve-pop-up img {
        max-height: 650px;
    }

}
@media only screen and (min-width: 1400px) and (max-width: 1600px){
    html,
    body {
        font-size: 16px;
    }
    .reserve-pop-up {
        max-width: 1200px;
        margin-top: 50px;
    }
    .reserve-pop-up img {
        max-height: 550px;
    }

}
@media only screen and (max-width: 1400px), (max-height: 1000px) { }
@media only screen and (max-width: 1300px), (max-height: 900px) { }
@media only screen and (max-width: 1200px), (max-height: 800px) {
    html,
    body {
        font-size: 14px;
    }
}
@media only screen and (max-width: 1100px), (max-height: 700px) {
    html,
    body {
        font-size: 13px;
    }
}
@media only screen and (max-width: 1000px), (max-height: 600px) {
    html,
    body {
        font-size: 12px;
    }
    /*.gutter-sizer {
      width: 2%;
    }
    .grid-sizer,
    .item {
        width: 32%;
    }
    .item.lg {
        width: 66%;
    }   */
}