/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* https://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/

/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- ADDED layout styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
- ADDED Slide show
*/

/* webfonts
_____________________________________________*/

@import 'https://fonts.googleapis.com/css?family=Inconsolata|Open+Sans:300,300i,400,400i,700,700i';

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.container {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.column,
.columns {
    width: 100%;
    float: left;
    box-sizing: border-box;
}


/* -- ADDED for dement site 
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.row .column img {
    width: 100%;
    height: auto;
}

.row .column figure,
figure {
    text-align: center;
}

.row .column figure img {
    width: auto;
    height: auto;
    max-width: 100%;
}

figure video {
    width: auto;
    height: auto;
    max-width: 100%;
}



#bedsheet-list {
    list-style: disc;
    padding-left: 20px;
}


/*how to be an artist text slides */

#how-artist div {
    width: 90%;
    max-width: 580px;
    min-height: 300px;
    background-color: #ef7e1d;
    padding: 30px 6%;
    margin: 0 auto 5% auto;

}

#how-artist div h2 {
    color: #f4d69d;
    font-size: 3.4rem;
    /*    text-align: center;*/
    text-transform: uppercase;
    font-weight: bold;
}

#how-artist div p {
    color: #412310;
    font-size: 2.2rem;
}

#how-artist div .how-artist-num {
    color: #ffb831;
}


/* -- end added 
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* For devices larger than 400px */

@media (min-width: 400px) {
    .container {
        width: 85%;
        padding: 0;
    }
}


/* For devices larger than 550px */

@media (min-width: 550px) {
    .container {
        width: 80%;
    }

    .row {
        padding-bottom: 25px;
    }

    .column,
    .columns {
        margin-left: 4%;
    }

    .column:first-child,
    .columns:first-child {
        margin-left: 0;
    }

    .one.column,
    .one.columns {
        width: 4.66666666667%;
    }

    .two.columns {
        width: 13.3333333333%;
    }

    .three.columns {
        width: 22%;
    }

    .four.columns {
        width: 30.6666666667%;
    }

    .five.columns {
        width: 39.3333333333%;
    }

    .six.columns {
        width: 48%;
    }

    .seven.columns {
        width: 56.6666666667%;
    }

    .eight.columns {
        width: 65.3333333333%;
    }

    .nine.columns {
        width: 74.0%;
    }

    .ten.columns {
        width: 82.6666666667%;
    }

    .eleven.columns {
        width: 91.3333333333%;
    }

    .twelve.columns {
        width: 100%;
        margin-left: 0;
    }

    .one-third.column {
        width: 30.6666666667%;
    }

    .two-thirds.column {
        width: 65.3333333333%;
    }

    .one-half.column {
        width: 48%;
    }

    /* Offsets */
    .offset-by-one.column,
    .offset-by-one.columns {
        margin-left: 8.66666666667%;
    }

    .offset-by-two.column,
    .offset-by-two.columns {
        margin-left: 17.3333333333%;
    }

    .offset-by-three.column,
    .offset-by-three.columns {
        margin-left: 26%;
    }

    .offset-by-four.column,
    .offset-by-four.columns {
        margin-left: 34.6666666667%;
    }

    .offset-by-five.column,
    .offset-by-five.columns {
        margin-left: 43.3333333333%;
    }

    .offset-by-six.column,
    .offset-by-six.columns {
        margin-left: 52%;
    }

    .offset-by-seven.column,
    .offset-by-seven.columns {
        margin-left: 60.6666666667%;
    }

    .offset-by-eight.column,
    .offset-by-eight.columns {
        margin-left: 69.3333333333%;
    }

    .offset-by-nine.column,
    .offset-by-nine.columns {
        margin-left: 78.0%;
    }

    .offset-by-ten.column,
    .offset-by-ten.columns {
        margin-left: 86.6666666667%;
    }

    .offset-by-eleven.column,
    .offset-by-eleven.columns {
        margin-left: 95.3333333333%;
    }

    .offset-by-one-third.column,
    .offset-by-one-third.columns {
        margin-left: 34.6666666667%;
    }

    .offset-by-two-thirds.column,
    .offset-by-two-thirds.columns {
        margin-left: 69.3333333333%;
    }

    .offset-by-one-half.column,
    .offset-by-one-half.columns {
        margin-left: 52%;
    }

    /*    added for dement site*/
    /*    how to be an artist text slides*/
    #how-artist div h2 {
        font-size: 4rem;
    }

    #how-artist div p {
        font-size: 2.8rem;
    }
}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */

html {
    font-size: 62.5%;
}

body {
    /*ADDED bkg
    ------------------------------*/
    background-color: #000;
    background-repeat: repeat-x;
    background-image: url("../images/blood-bkg-top.jpg"), url("../images/blood-bkg-btm.jpg");
    background-position: top center, bottom center;
    color: #fff;
    /*end ADDED bkg
    ------------------------------*/
    font-size: 1.6rem;
    line-height: 1.6;
    /*    font-weight: 300;*/
    font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #222;
}


/*ADDED layout base styles
--------------------------------------------------*/

header {
    margin-top: 8rem;
}

main {
    margin-top: 4rem;
    border-left: 1px solid #240000;
    border-right: 1px solid #240000;
}

main#home {
    border: none;
}

#pic {
    text-align: center;
    padding: 2rem;
}

#pic img {
    max-width: 100%;
}

footer {
    padding: 5rem 0;
    margin-top: 8rem;
    margin-bottom: 8rem;
    border-top: 1px solid rgba(225, 225, 225, 0.2);
}

.flt-rt {
    float: right;
    padding left: 2rem;
}


/*end ADDED layout base styles
--------------------------------------------------*/

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #b1a9a3;
    margin-top: 0;
    margin-bottom: 2rem;
    font-weight: 300;
}

h1 {
    color: rgba(225, 225, 225, 0.54);
    font-size: 3.6rem;
    line-height: 1.2;
    letter-spacing: -.1rem;
}

h2 {
    font-size: 3rem;
    line-height: 1.25;
    letter-spacing: -.04rem;
}

h3 {
    font-size: 2.4rem;
    line-height: 1.3;
    letter-spacing: -.04rem;
}

h4 {
    font-size: 2.2rem;
    line-height: 1.35;
    letter-spacing: -.04rem;
}

h5 {
    font-size: 1.8rem;
    line-height: 1.5;
    letter-spacing: -.04rem;
}

h6 {
    font-size: 1.5rem;
    line-height: 1.6;
    letter-spacing: 0;
}


/* Larger than phablet */

@media (min-width: 550px) {
    /*
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
*/
}

p {
    color: #b1a9a3;
    margin-top: 0;
}


/* ADDED typography styles 
-------------------------------------------------*/

header h1 {
    font-family: "Inconsolata", Monaco, "Lucida Console", monospace;
    font-size: 5.6rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

figcaption {
    clear: both;
    color: #9d9792;
    text-align: center;
    margin-top: 0.8rem;
    font-size: 1.4rem;
}

figcaption small {
    font-size: 1.4rem;
}

figure {
    padding-top: 6rem;
    padding-bottom: 6rem;
    margin: 0;
}

#info {
    margin: 0 auto;
    max-width: 600px;
}

blockquote {
    color: #c4c4c4;
    font-size: 1.7rem;
}

blockquote p {
    color: #8e8277;
    margin-top: 1rem;
}

#funding {
    padding: 2rem 0;
    line-height: 1.2;
}

small {
    color: #8e8277;
}

small li {
    line-height: 1.3;
    padding: 2px;
    margin: 0;
}

.standout {
    /*    font-weight:bold;*/
    color: #c4c4c4;
}

.pullquote {
    font-size: 2rem;
}

.awry .star {
    color: #B7E1DA;
}

.inactive {
    opacity: 0.4;
}

#logos {
    text-align: center;
}


/* end ADDED typography styles 
-------------------------------------------------*/

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */

a:link,
a:visited {
    color: #f0e8e3;
    text-decoration: none;
}

a:hover {
    color: #fff;
}


/* ADDED link styles 
-------------------------------------------------- */

nav ul {
    list-style: none;
    text-align: right;
}

nav li {
    display: inline-block;
    margin-left: 10px;
}

nav li a:link {
    display: block;
    text-decoration: none;
    color: #6c1501;
    padding: 10px 0 10px 10px;
    font-size: 1.7rem;
}

nav li a:visited {
    color: #4b3834;
}


/*end ADDED link styles
-------------------------------------------------- */

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
    display: inline-block;
    height: 38px;
    padding: 0 30px;
    color: #555;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: .1rem;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border-radius: 4px;
    border: 1px solid #bbb;
    cursor: pointer;
    box-sizing: border-box;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
    color: #333;
    border-color: #888;
    outline: 0;
}

.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
    color: #FFF;
    background-color: #33C3F0;
    border-color: #33C3F0;
}

.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
    color: #FFF;
    background-color: #1EAEDB;
    border-color: #1EAEDB;
}


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
    height: 38px;
    padding: 6px 10px;
    /* The 6px vertically centers text on FF, ignored by Webkit */
    background-color: #fff;
    border: 1px solid #D1D1D1;
    border-radius: 4px;
    box-shadow: none;
    box-sizing: border-box;
}


/* Removes awkward default styles on some inputs for iOS */

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

textarea {
    min-height: 65px;
    padding-top: 6px;
    padding-bottom: 6px;
}

input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border: 1px solid #33C3F0;
    outline: 0;
}

label,
legend {
    display: block;
    margin-bottom: .5rem;
    font-weight: 600;
}

fieldset {
    padding: 0;
    border-width: 0;
}

input[type="checkbox"],
input[type="radio"] {
    display: inline;
}

label > .label-body {
    display: inline-block;
    margin-left: .5rem;
    font-weight: normal;
}


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */

ul {
    list-style: none;
}

ol {
    list-style: decimal inside;
}

ol,
ul {
    padding-left: 0;
    margin-top: 0;
}

ul ul,
ul ol,
ol ol,
ol ul {
    margin: 1.5rem 0 1.5rem 3rem;
    font-size: 90%;
}

li {
    margin-bottom: 1rem;
    color: #9d9792;
}


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */

code {
    padding: .2rem .5rem;
    margin: 0 .2rem;
    font-size: 90%;
    white-space: nowrap;
    background: #F1F1F1;
    border: 1px solid #E1E1E1;
    border-radius: 4px;
}

pre > code {
    display: block;
    padding: 1rem 1.5rem;
    white-space: pre;
}


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */

th,
td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #E1E1E1;
}

th:first-child,
td:first-child {
    padding-left: 0;
}

th:last-child,
td:last-child {
    padding-right: 0;
}


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

button,
.button {
    margin-bottom: 1rem;
}

input,
textarea,
select,
fieldset {
    margin-bottom: 1.5rem;
}

pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
    margin-bottom: 2.5rem;
}


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.u-full-width {
    width: 100%;
    box-sizing: border-box;
}

.u-max-full-width {
    max-width: 100%;
    box-sizing: border-box;
}

.u-pull-right {
    float: right;
}

.u-pull-left {
    float: left;
}


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */

hr {
    margin-top: 3rem;
    margin-bottom: 3.5rem;
    border-width: 0;
    border-top: 1px solid #E1E1E1;
}


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */

.container:after,
.row:after,
.u-cf {
    content: "";
    display: table;
    clear: both;
}


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

/* Larger than mobile */

@media (min-width: 400px) {}


/* Larger than phablet (also point when grid becomes active) */

@media (min-width: 550px) {}


/* Larger than tablet */

@media (min-width: 750px) {}


/* Larger than desktop */

@media (min-width: 1000px) {}


/* Larger than Desktop HD */

@media (min-width: 1200px) {}


/*styles for slideshow
----------------------------------------------------- */

#slide-nav {
    clear: both;
    text-align: center;
    /*    margin: 1rem 10rem;*/
}

#slide-nav a {
    margin: 0 1rem;
    font-size: 2.4rem;
    display: inline;
    padding: 0 1.5rem;
    border: 1px solid #240000;
}

.rslides li figure {
    margin: 0 0 1rem 0;
}


/*for very wide images in blackmist*/

.wide li figure img {
    padding: 40px 5px;
    margin: 0 5px;
}


/*---*/

.rslides {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
}

.rslides li {
    -webkit-backface-visibility: hidden;
    position: absolute;
    display: none;
    width: 100%;
    left: 0;
    top: 0;
    margin: 0 0 30px 0;
}

.rslides li:first-child {
    position: relative;
    display: block;
    float: left;
}

.rslides img {
    display: block;
    height: auto;
    /*  float: left;*/
    width: auto;
    height: auto;
    max-width: 100%;
    border: 0;
    margin: 0 auto;
}


/*end styles for slideshow
------------------------------------------------ */