/**********
* BUTTONS *
**********/

.cms-button { display: inline-block; font-family: 'Rubik', sans-serif; border-radius: 999px; }
.cms-button:hover { background: #999; color: black; cursor: pointer; }

.butt-big { max-width: 180px; min-width: 180px; font-size: 16px; font-weight: 500; padding: 6px 0; text-align: center; white-space: nowrap; margin: 24px; }
.butt-huge { max-width: 280px; min-width: 280px; font-size: 16px; font-weight: 500; padding: 6px 0; text-align: center; white-space: nowrap; margin: 16px; }
.butt-small { max-width: 90px; min-width: 90px; font-size: 14px; font-weight: 500; padding: 4px 0; text-align: center; white-space: nowrap; margin: 8px; }


.butt-red { background: #c00; color: white; }
.butt-blue { background: #00c; color: white; }
.butt-green { background: darkgreen; color: white; }
.butt-maroon { background: maroon; color: white; }
.butt-black { background: black; color: white; }
.butt-yellow { background: yellow; color: black; }






/********
* NODES *
********/

#node-title-area {
    max-width: 1200px;
    padding: 12px;
    margin: auto;
}
#node-body {
    max-width: 100%;
    overflow: hidden;
}

#node-intro {  }


.section-title { text-align: left; color: maroon; }
.section-subtitle { text-align: left; color: black; }
.section-text { text-align: justify; font-family: 'Ubuntu Condensed', sans-serif; font-size: 18px; }

.responsive-image-div-float-right { max-height: 200px; border: 4px black solid; font-size: 0; }
@media all and (min-width: 600px) {
    .responsive-image-div-float-right {
        float: right; display: inline-block; margin: 0 0 18px 18px;
    }
}
@media all and (max-width: 599px) {
    .responsive-image-div-float-right {
        display: block;
    }
}

/*POLAROIDS*/
.polaroid { display: inline-block; width: 280px; height: 320px; text-align: center;
    background: #eee; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }
@media all and (max-width: 599px) {
    .polaroid { margin: 34px auto !important; }
}
.polaroid-pic { display: inline-block; background-size: cover;
    background-position: center center; width: 240px; height: 240px; margin-top: 20px; }
.polaroid-caption {
    font-family: "Permanent Marker"; font-size: 22px; max-width: 94%; margin: 2px auto;
    height: 2.3em; line-height: 1.1em; overflow: hidden;
}






/*********
* IMAGES *
*********/

.image-square300 {
    position: relative;
    display: inline-block;
    max-width: 300px; min-width: 300px; max-height: 300px; min-height: 300px;
    background-position: center;
    background-size: cover;
    margin: 12px;
}
.image-square300-caption {
    color: white;
    position: absolute;
    width: 100%;
    bottom: 0;
    margin: 0;
    padding: 4px;
    background: rgba(64,64,64,.7);
    box-sizing: border-box;
}

.gallery-image-container { display: inline-block; width: 30vw; min-width: 300px; padding: 0; font-size: 0; margin: 8px; }
.gallery-image { margin: 0px; display: inline-block; width: 30vw; height: 30vw; min-width: 300px; min-height: 300px;
    background-size: cover; background-repeat: no-repeat; background-position: center center; }
.gallery-image-caption { max-height: 100px; min-height: 100px; margin: 0; max-width: 100%; overflow: hidden; font-size: 18px !important; }
@media all and (max-width: 799px) {
    .gallery-image-caption {
        max-height: 136px;
        min-height: 136px;
    }
}







/*****************
* HEADSHOT TILES *
*****************/

.booking-tile { display: inline-block; margin: 7px; background: #eee; overflow: hidden;
    width: 136px; border: 1px solid #666; border-radius: 12px; text-align: center;
    max-height: 200px; min-height: 200px;
}
.tile-image { min-width: 136px; max-width: 136px; min-height: 120px; max-height: 120px; background-position: top center; background-size: cover; }
.tile-title { font-weight: bold; text-align: center; font-family: 'Ubuntu Condensed', sans-serif; margin: 1px 0 3px; }
.tile-caption { color: darkblue; font-weight: bold; text-align: center; font-family: 'Ubuntu Condensed', sans-serif; }
.city-group { display: inline-block; margin: 12px 36px; }

@media only screen and (max-width: 799px) {
    .city-group { margin: 0; }
}