@import 'https://fonts.googleapis.com/css?family=Cabin';

.space-after {
    padding-bottom: 1rem;
}

* {
    margin: 0;
    padding: 0;
}

html {
    overflow-y: scroll;
}

body {
    font: 500 16px/1.2 Cabin, Arial, sans-serif;
    color: #444;
    margin: 0 .5rem;
    background: #354;
}

h1,
h2,
h4,
h5 {
    text-transform: uppercase;
}

strong {
    font-weight: 700;
}

header,
nav,
main {
    margin: 1rem;
    text-align: center;
}

main p {
    text-align: left;
}

footer {
    font-size: 14px;
}

p,
article,
.artist-frame,
#artist-sub-header,
.hero-image {
    margin: 0 0 1rem 0;
}

.important {
    font-weight: 700;
}

img {
    max-width: 100%;
    margin: 0 0 1rem 0;
}

#wrapper {
    background: #eee;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 5;
    position: relative;
}

#iframe {
    height: 50vw;
    margin: .5rem 0;
}

iframe {
    height: 50vw;
    width: 100%;
    border: none;
    max-height: 444px;
}

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

blockquote {
    font: italic 20px/1.3 'Libre Baskerville', serif;
    margin-bottom: 1rem;
    color: #3c6081;
}

blockquote a {
    color: #e8d1bd;
}

blockquote a:visited {
    color: #e8cbbd;
}

blockquote a:hover {
    color: #676;
}

blockquote a:active {
    color: #9c9;
}

/*

                            SPECIFIC TYPOGRAPHY

*/

header h1 {
    color: #444;
    font-size: 58px;
    padding: 1.5rem .7rem;
}

main h1 {
    font-size: 36px;
    color: #444;
    text-align: center;
    margin-bottom: 1rem;
}

h2 {
    color: #888;
    text-align: center;
    font-size: 20px;
    padding-bottom: .3rem;
}

h3 {
    color: #49573a;
    font-size: 24px;
    padding-bottom: .4rem;
}

h4 {
    color: #3c6081;
    margin-bottom: -.5rem;
}

.text-overlay h2 {
    position: relative;
    z-index: 40;
    font-size: 24px;
    line-height: 1.5;
}

.artist-hero h1 {
    color: #fff;
    font-size: 26px;
}

.artist-hero blockquote, .exhibition-link blockquote, .info-hero blockquote {
    color: #d8ecff;
}

/* 

                            TWO COLUMN AREAS

*/

.two-col {
    margin: 0 -1%;
    overflow: hidden;
    text-align: center;
}

.col, .col-spec {
    margin: 0 1%;
    text-align: left;
}

@media (min-width: 36rem) {
    .col {
        float: left;
        width: 48%;
        padding: 0 -1rem;
    }
    .align-right-reg {
        text-align: right;
        margin-bottom: 0;
    }
    .col-img,
    .col-spec {
        width: 48%;
        overflow: hidden;
        margin: .5rem 1%;
    }
    .col-img {
        float: left;
        clear: left;
    }
    .col-spec {
        float: right;
        clear: right;
    }
}


/* 

                            HOME 

*/


/* 

                            ARTISTS 

*/

.artist-frame {
    float: left;
    text-align: center;
    width: 100%;
}

.artist-frame img {
    width: 98%;
}

@media (min-width: 28rem) {
    .artist-frame {
        width: 47.5%;
        margin: 1rem 1% 0 1%;
        overflow: hidden;
    }
}

@media (min-width: 40rem) {
    .artist-frame {
        width: 31.3%;
        margin: 1rem 1% 0 1%;
        overflow: hidden;
    }
    .article-overlay-two {
        text-align: left;
    }
}


/* 

                            ARTIST PAGES 

*/

#artist-sub-header {
    overflow: hidden;
    background: url("../images/other/artist-subheader-background.png") repeat-x top right;
    padding: .5rem;
}

#artist-nav {
    width: 8rem;
    display: inline-block;
    text-align: left;
}

.artist-hero .text-overlay {
    text-align: left;
}

.artist-hero img {
    min-width: 25rem;
}

#artist-nav ul {
    list-style: none;
    font-weight: 600;
}

.artist-hero {
    float: right;
    max-width: 32rem;
    max-height: 10rem;
    min-height: 20rem;
    margin: 1rem 0 0 0;
}

@media (min-width: 46rem) {
    .artist-hero {
        position: relative;
        bottom: 3.3rem;
    }
    #artist-sub-header {
        margin-bottom: -2rem;
    }
}


/* 

                            INFO 

*/

.big-text {
    font: 20px/1.3 'Libre Baskerville', serif;
}

.contact p {
    margin: 0;
}


/* 

                            IMAGE-TEXT OVERLAYS 

*/

.hero-image {
    width: 100%;
    overflow: hidden;
    position: relative;
    color: #fff;
}

.hero-image p {
    margin: 0;
}

.home-hero {
    max-height: 28rem;
    min-height: 16rem;
}

.info-hero {
    height: 19rem;
}

.info-hero img {
    min-width: 42rem;
}

.exhibition-link {
    height: 19rem;
}

.exhibition-link img {
    min-width: 42rem;
}

.home-hero img {
    min-width: 23rem;
    margin: -1rem 0;
}

.text-overlay {
    position: absolute;
    z-index: 10;
    margin: .5rem;
}

.align-bottom {
    bottom: 0;
    background-color: rgba(0, 0, 0, .35);
    margin: 0 -.5rem 0 -.5rem;
    padding: 0 1rem .5rem 1rem;
    width: 97%;
}

.info-hero blockquote, .artist-hero blockquote {
    margin: 0 .5rem 0rem 0;
}

#artist-sub-header .align-bottom {
    bottom: 0;
}

.align-top {
    top: 0;
}

.align-right {
    text-align: right;
    right: 0;
}

.top {
    z-index: 40;
}

@media (min-width: 26rem) {
    .align-center {
        top: 20%;
    }
}

.article-page-texture {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.article-overlay {
    position: relative;
    overflow: hidden;
    margin: .5rem;
}

.article-overlay-two {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 0 .5rem;
    box-sizing: border-box;
}


/* 

                            HEADER & NAV 

*/

header,
#wrapper {
    margin: 0 auto;
    max-width: 800px;
}

header h1 {
    text-align: center;
    margin: 1rem 0 1rem 0;
    line-height: 1;
}

nav {
    background: #eee;
    z-index: 2;
    text-align: center;
}

nav a {
    display: block;
    text-align: center;
    font-weight: 600;
}

nav, li a {
    color: #444;
}

nav a:hover, li a:hover {
    color: #676;
}

nav a:active, li a:active {
    color: #9c9;
}

.current-page,
.current-page:hover,
.current-artist, .current-artist:hover {
    color: #485;
}

@media (min-width: 32rem) {
    nav {
        margin: .2rem auto;
        padding: 0 2rem;
    }
    nav a {
        display: inline;
        padding: 0;
        margin: 0 .7rem 0 .7rem;
        z-index: 2;
    }
    nav a:hover {
        color: #676;
    }
    
    .current-page,
    .current-page:hover {
        color: #485;
    }
}

/*

                            LINKS

*/

p a {
    font-weight: 600;
    color: #339;
}

p a:visited {
    color: #437;
}

p a:hover {
    color: #35c;
}

p a:active {
    color: #44a;
}


/* 

                            FOOTER 

*/

footer {
    text-align: center;
    background: #ccc;
    padding: 1rem;
}

footer p {
    margin-bottom: 0;
    font-weight: 600;
    color: #555;
}

footer ul {
    list-style: none;
    font-weight: bold;
}

.twitter-share-button {
    margin-top: .5rem;
}

#footer-one {
    margin-bottom: .5rem;
}

@media (min-width: 30rem) {
    footer {
        text-align: center;
    }
    #footer-one {
        overflow: hidden;
    }
    footer li {
        display: inline-block;
        margin: 0 1rem 0 0;
    }
    .footer-contact {
        width: 80%;
        float: left;
    }
    .twitter-share-button {
        float: right;
        margin: 0 0 0 2%;
        width: 16%;
    }
}


/* 

                            FORMS 

*/

input[name="name"],
input[name="email"] {
    width: 65%;
}

label {
    font-weight: 600;
}

input,
textarea {
    display: block;
    color: #745138;
    border: 1px solid rgba(0, 0, 0, 0);
    font: 16px/1 Hind, Arial, sans-serif;
    padding: .2rem .5rem 0 .5rem;
    resize: none;
    background: #f9f4ed;
}

textarea {
    width: 100%;
    box-sizing: border-box;
    padding: .5rem .5rem 0 .5rem;
}

::-webkit-input-placeholder {
    color: #d4cabd;
}

input[name="name"],
input[name="email"],
textarea[name="message"] {
    margin-left: -1px;
}

input:focus,
textarea:focus {
    border: 1px solid #bc591d;
    background-color: #fff;
    outline: none;
}

input[name="submitted"] {
    line-height: 1.3;
}


/* 

                            BUTTONS 

*/

.button,
.button:focus, .button:visited {
    padding: .2rem .5rem .1rem .5rem;
    color: #e3d4bf;
    background: #bc591d;
    border: 1px solid rgba(0, 0, 0, 0);
    font-weight: normal;
}

.button:hover {
    color: #e6d6c2;
    background: #c66428;
}

.button:active {
    color: #c8b8a2;
    background: #9d5326;
}

.form-list {
    list-style: none;
}

.form-list li {
    margin: 0 0 .5rem 0;
}

#wrapper,
footer,
.button {
    -moz-box-shadow: inset -1px -1px 0px #a18e7e;
    -webkit-box-shadow: inset -1px -1px 0px #a18e7e;
    box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.3);
}

.button:active,
input,
textarea {
    -moz-box-shadow: inset 1px 1px 0px #a18e7e;
    -webkit-box-shadow: inset 1px 1px 0px #a18e7e;
    box-shadow: inset 1px 1px 0px rgba(0, 0, 0, 0.3);
}


/* 

                            PHP STUFF 

*/

.php-stuff ul {
    list-style: none;
}

.php-stuff li {
    font-weight: 600;
}

.php-stuff h1 {
    margin: 1rem;
}

.php-stuff ul, .php-stuff p {
    margin: 0 1rem 1rem 1rem;
}

#wrapper[class~="php-stuff"] {
    margin: 1rem auto;
}


/* 

                            DISCLAIMER 

*/

.disclaimer {
    font-size: 12px;
    padding: 0 1.5rem;
    margin: .4rem auto;
    max-width: 44rem;
    text-align: center;
    box-sizing: border-box;
}


/* 

                            SPECIFIC POSITIONING

*/

@media (min-width: 30rem) {
    .low-align {
        position: relative;
        bottom: 6.5rem;
        margin-bottom: -5rem;
    }
}

/* 

                            EMBEDDED VIDEOS & IMAGES

*/

.cont {
	position: relative;
    padding: 0 0 56.25% 0;
	height: 0;
	overflow: hidden;
    text-align: center;
}

.cont iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 97%;
}

/*

                            ALIGNMENTS

*/

.center {
    text-align: center;
}

@media (min-width: 34rem) {
    #sixty {
        width: 60%;
        margin: 0 auto;
    }
}