/*
much thanks to ross zurowski for site help!
*/

@import url('https://fonts.googleapis.com/css?family=Rubik:400,400i,500,500i');

@import url(//weloveiconfonts.com/api/?family=entypo);

[class*="entypo-"]:before {
    font-family: 'entypo', sans-serif;
    padding: 5px;
}

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

.fullscreen {
    height: 100vh;
}

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

.container img {
    margin: 5px 0px 5px 0px;
}

/* For devices larger than 400px */
@media (min-width: 400px) {
    .container {
        width: 85%;
        padding: 0;
    }
}

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

.topimage {
    object-fit: cover;
    height: 250px;
    width: 100%;
}

.push {
    margin-top: 100px;
    margin-bottom: 50px;
}

main {
    margin-top: 40px;
}

/* For devices larger than 550px */
@media (min-width: 550px) {
    .topimage {
        height: 400px;
    }

    .container {
        width: 85%;
    }

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

    .column:nth-child(3n-1),
    .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%;
    }
}

/* Content Styling
–––––––––––––––––––––––––––––––––––––––––––––––––– */

nav {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #F1F1F1;
    padding: 11px 0px 10px 0px;
    font-size: 13px;
    z-index: 200;
}

.leftnav {
    padding-left: 15px;
    width: 40%;
}

.rightnav {
    width: 60%;
    padding-right: 15px;
    text-align: right;
    margin: 0 auto;
    float: right;
}

.about,
.polaroid,
.polaroid.blog {
    background-color: #f8f8f8;
    border: 3px solid #222222;
    box-shadow: 0px 10px #222222;
    border-radius: 5px;
    text-align: center;

}

.about {
    padding: 10px 25px 10px 25px;
    margin-top: 175px;
    margin-bottom: 40px;
}

.polaroid {
    margin-bottom: 25px;
}

.polaroid p,
h6 {
    margin-top: 1px !important;
    margin-bottom: 1em;
}

.polaroid img {
    width: 100%;
}

img.cover {
    height: 250px;
    object-fit: cover;
    margin: 0 auto !important;
}

.polaroid .title {
    font-size: 2rem;
    letter-spacing: -.05rem;
    margin-bottom: 1px;
    font-weight: 500;
}

.polaroid .tagline {
    font-size: 1.4rem;
    font-weight: 400;
    opacity: 0.7;
    padding: 0px 8px 0px 8px;
}

.polaroid.blog {
    text-align: left;
    padding: 20px 30px 20px 30px;
/*    margin-bottom: 40px;*/
}

#bottomline {
    background-color: #FFCC66;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 15px;
    z-index: -2;
}

.footnote {
    visibility: hidden;
    margin: 0px 15px 0px 0px;
    text-align: right;
    font-size: 0.6em;
    font-weight: 500;
    transition: 0.3s;
    opacity: 0;
}

@media (min-width: 970px) {
    .footnote {
        visibility: visible;
        margin: -25px 15px 0px 0px;
        transition: 0.2s;
        opacity: 1;
    }

}

.whitebg {
    background-color: #FFF;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.whiteborder {
    border: 5px solid #FFF;
}

/* 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 {
    background-color: #F1F1F1;
    background-image: radial-gradient(#DDDDDD 4%, transparent 5%),
        radial-gradient(#dddddd 4%, transparent 5%);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
    font-size: 1.6em;
    line-height: 1.8;
    font-weight: 400;
    font-family: "Rubik", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #222222;
    margin: 0 auto;
}

.about ol,
li,
h1,
h2,
h3,
h4,
h5,
    {
    text-align: left;
}

h1 {
    font-size: 3.6rem;
    line-height: 1.25;
    letter-spacing: -.1rem;
    margin-bottom: 0.75rem;
}

h2 {
    font-size: 2.2rem;
    line-height: 1.5;
    letter-spacing: -0.12rem;
    font-weight: 400;
    color: #555555;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

h3 {
    font-size: 1.9rem;
    line-height: 1.6;
    letter-spacing: -.05rem;
    display: inline-flex;
    background-color: rgba(255, 204, 102, 1);
    padding: 2px 4px 2px 4px;
    border-radius: 2px;
}

h4 {
    font-size: 1.6rem;
    color: #555;
    line-height: 1.5;
    letter-spacing: 0rem;
}

h5,
.taglist {
    font-size: 1.3rem;
    line-height: 2.2;
    letter-spacing: 0.03rem;
    text-transform: uppercase;
    font-weight: 500;
}

h5.highlight {
    text-align: center;
}

h6 {
    text-align: center;
}

h6,
.credits {
    font-size: 0.8em;
    color: #555555;
    font-weight: 100;
}

@media (min-width: 550px) {
    h1 {
        font-size: 4.0rem;
    }

    h2 {
        font-size: 3.0rem;
    }

    h3 {
        font-size: 2.0rem;
    }

    h4 {
        font-size: 1.7rem;
    }

    h5,
    .taglist {
        font-size: 1.4rem;
    }

}

p {
    margin-top: 1em;
}


.about p {
    font-size: 1.9rem;
    text-align: left;
    letter-spacing: 0;
}

strong,
bold {
    font-weight: 500;
}

em,
i {
    color: #9B9B9B;
}

.highlight {
    color: #222222 !important;
    background-color: rgba(255, 204, 102, 1);
    padding: 5px;
    border-radius: 2px;
}

.taglist {
    display: inline-block;
    margin-bottom: 20px;
    padding: 0px 2px 0px 2px;
}

.blog .taglist {
    margin-top: -15px;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    font-size: 1.1rem;
    line-height: 1.5rem;
}

.blog .taglist > .highlight,
.blog .taglist > a .highlight {
    background-color: #E7E7E7;
    color: #AAAAAA !important;
    display: inline-block;
    margin-left: 5px;
    margin-bottom: 5px;
}

time {
    font-size: 1.1rem;
    line-height: 0.5;
    letter-spacing: 0.03rem;
    margin: 5px 0px 20px 0px;
    text-transform: uppercase;
    font-weight: 500;
    text-align: left;
    display: flex;
}

.polaroid time {
    color: #9B9B9B;
}

hr {
    margin-top: 30px;
    margin-bottom: 20px;
    border-width: 0;
    border-top: 2px solid #FFCC66;
}

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

a {
    color: #222222;
    border-bottom: 2px solid #FFCC66;
    text-decoration: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

nav a {
    display: inline-block;
    padding: 2px;
    margin: 0px 5px 0px 5px;
}

.rightnav a {
    color: #888888;
    border-bottom: 0px;
}

.nbdr,
.nbdr a,
.taglist a {
    border-bottom: 0px;
}

a:hover {
    color: #FFCC66 !important;
}

a:hover .highlight {
    background-color: transparent;
    -webkit-box-shadow:inset 0px 0px 0px 2px #FFCC66;
    -moz-box-shadow:inset 0px 0px 0px 2px #FFCC66;
    box-shadow:inset 0px 0px 0px 2px #FFCC66;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

a.polaroid:hover {
    color: #656565 !important;
    border-color: #656565;
    box-shadow: 0px 5px #656565;
    margin-top: 5px;
}

a.polaroid:nth-child(3n-1) {
    margin-bottom: 25px;
}

a.polaroid:hover:nth-child(3n-1) {
    margin-bottom: 5px;
}

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

ul {
    list-style: circle outside;
}

ol {
    list-style: decimal outside;
    /*margin-left: 1em;*/
}

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

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

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

li {
    margin-bottom: 1rem;
}

ul.inlinelist {
    margin-top: 1.5rem;
}

ul.inlinelist li {
    margin: 0.5rem 1.5rem 1rem 0rem;
    display: inline-block;
}

ul.inlinelist ol {
    margin: 0.1rem;
}

/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
table {
    margin-top: 20px;
    width: 100%;
}

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

th:first-child,
td:first-child {
    padding-left: 0;
    min-width: 15%
}

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: 2rem;
}

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
    width: 100%;
    box-sizing: border-box;
}

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

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

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

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

/* Video
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin-top: 20px;
    margin-bottom: 10px;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Images
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.carousel {
    padding: 10px 0px 0px 0px;
}

.piclarge,
.picmed {
    position: absolute;
    transition: width 0.3s, height 0.3s;
}

.piclarge {
    background: url("../localkristine_me.jpg");
    background-size: cover;
    width: 140px;
    height: 156px;
    margin: -140px 0px 0px 10px;
    z-index: -1;
    box-shadow: inset 0px 0px 0px 3px #FFF;
}

.picmed {
    background: url("../localkristine_logo.png");
    background-size: cover;
    width: 20px;
    height: 46px;
    margin-top: -75px;
    margin-left: 150px;
    box-shadow: 0px 5px #222222;

}

.picsmall {
    background: url("../localkristine_logo.png");
    background-size: cover;
    width: 10px;
    height: 36px;
    margin-top: -75px;
    margin-left: 85%;
    box-shadow: 0px 5px #222222;
}

@media (min-width: 550px) {

    .piclarge {
        margin: -120px 0px 0px -50px;
    }

    .picmed {
        width: 40px;
        height: 66px;
        margin-top: -95px;
        margin-left: 70%;
    }
}