/* FUNDAMENTALS */

html, body {
    height: 100%;
}

.preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
}

h1, h2 {
    font-size: 1em;
}

html a {
    color: #666;
}

body {
    min-width: 300px;
    font-size: 100%;
    line-height: 1.3em;
    font-family: source-sans-pro, sans-serif;
    background-color: #F5F5F5;
    background-image: url('img/bg.png');
    background-position: -1000px 450px;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.touch body {
    background-attachment: scroll;
}

a {
    outline: 0 !important;
}

.main {
    overflow: hidden;
}

.size-small-image.portrait {
    max-width: 180px !important;
    height: auto !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.size-small-image.landscape {
    max-height: 180px !important;
    width: auto !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.size-small-image.alignleft {
    margin-left: 0 !important;
}

.size-small-image.alignright {
    margin-right: 0 !important;
}

hr {
    border: solid 1px #EEE; 
}

#kuoro #esittely,
#kuoro #kuorolaiset,
#kuoro #levytykset {
    border-bottom: solid 4px #EEE;
}

/*  SMALL
    Typography */

#splash-hol {
    font-family: source-sans-pro, sans-serif;
    font-weight: 600;
    font-size: 3em;
    line-height: 1em;
    margin-top: 0em;
    margin-bottom: 0.5em;
    color: #fff;
    text-shadow: 0.04em 0.04em #8d8d8d;
    text-align: center;
}

#teasers .teaser h1,
#teasers .teaser h2 {
    text-align: left;
}

#teasers .teaser h1 a,
#teasers .teaser h2 a {
    font-family: source-sans-pro, sans-serif;
    font-size: 2em;
    line-height: 1.2em;
    font-weight: 100;
    color: #666;
    text-decoration: none;
}

#home #teasers .teaser h1 a,
#home #teasers .teaser h2 a {
    color: #9C9B9B;
}

#home.sticky #teasers .teaser h1 a,
#home.sticky #teasers .teaser h2 a,
.touch #home #teasers .teaser h1 a,
.touch #home #teasers .teaser h2 a {
    color: #666;
}

#teasers .teaser p {
    font-family: source-sans-pro, sans-serif;
    font-size: 1.1em;
    line-height: 1.4em;
    font-weight: 300;
    color: #666;
}

#home #teasers .teaser p {
    color: #9C9B9B;
}

#home.sticky #teasers .teaser p,
.touch #home #teasers .teaser p {
    color: #666;
}

/*  SMALL
    Text bulks */

#single .post h1, .page h1, #page-content article h1, #error h1 {
    font-family: source-sans-pro, sans-serif;
    font-size: 2em;
    line-height: 1em;
    font-weight: 300;
    color: #666;
    text-decoration: none;
}

#single .post h2, .page h2, #page-content article h2, #error h2 {
    font-family: source-sans-pro, sans-serif;
    font-size: 1.6em;
    line-height: 1.2em;
    font-weight: 300;
    color: #666;
}

#single .post h3, .page h3, #page-content article h3, #error h3 {
    font-family: source-sans-pro, sans-serif;
    font-size: 1.3em;
    line-height: 1.1em;
    font-weight: 300;
    color: #666;
}

#single .post h4, .page h4, #page-content article h4, #error h4 {
    font-family: source-sans-pro, sans-serif;
    font-size: 1.2em;
    line-height: 1em;
    font-weight: 300;
    color: #666;
}

#single .post h1 a, .page h1 a, #page-content article h1 a,
#single .post h2 a, .page h2 a, #page-content article h2 a,
#single .post h3 a, .page h3 a, #page-content article h3 a,
#single .post h4 a, .page h4 a, #page-content article h4 a {
    text-decoration: none;
}

#single .post p, .page p, #page-content article p, #error p,
#single .post li, .page li, #page-content article li {
    font-family: source-sans-pro, sans-serif;
    font-size: 1em;
    line-height: 1.4em;
    font-weight: 300;
    color: #222;
}

#single .post p a, .page p a, #page-content article p a,  
#single .post li a, .page li a, #page-content article li a {
    font-family: source-sans-pro, sans-serif;
    font-size: 0.95em;
    letter-spacing: 0.01em;
    line-height: 1.473684em;
    font-weight: 400;
}

#single .post ul, .page ul, #page-content article ul {
    list-style: none;
    padding-left: 0;
}

#single .post ol, .page ol, #page-content article ol {

}

#single .post li, .page li, #page-content article li {
    padding-left: 0;
}

#single .post ul li:before, .page ul li:before, #page-content article ul li:before {
    content: "•";
    padding-right: 1em;
    color: #9C9B9B;
}

footer p {
    font-family: source-sans-pro, sans-serif;
    font-weight: 300;
    font-size: 1em;
    line-height: 1.3em;
    color: #666;
    margin-left: 70px;
    text-align: left;
}

blockquote {
    background: #f9f9f9;
    border-left: 10px solid #ddd;
    margin: 1.5em 0em;
    padding: 0.5em 10px;
    quotes: "\201C""\201D""\2018""\2019";
}

blockquote p {
    font-style: oblique;
    font-size: 5em;
    display: inline;
}

/*  SMALL
    Buttons */

.more-link {
    font-family: source-sans-pro, sans-serif;
    font-size: 1em;
    font-weight: 600;
    font-variant:small-caps;
    color: #C6C6C5;
    text-decoration: none;
}

.sticky .more-link,
.touch .more-link {
    color: #9C9B9B;
}

#news-button a {
    font-family: source-sans-pro, sans-serif;
    font-size: 1em;
    font-weight: 600;
    font-variant:small-caps;
    color: #9C9B9B;
    text-decoration: none;
}

.more, #news-button {
    display: inline-block;
    height: auto;
    width: 100%;
    text-align: center;
}

.more {
    margin-top: 1em;
    margin-bottom: 2em;
}

#news-button {
    margin-top: 2em;
    margin-bottom: 1em;
}

.more-link, #news-button a {
    background-color: #fff;
    background-color: rgba(255,255,255,0.9);
    border: solid #DDD 4px;
    border-color: rgba(221,221,221,0.7);
    padding: 0.5em;
}

.sticky .more-link, #news-button a,
.touch .more-link, .touch #news-button a {
    background-color: #fff;
    background-color: rgba(255,255,255,0.9);
    border-color: #BBB;
    border-color: rgba(187,187,187,0.7);
}

.more-link:hover, #news-button a:hover, 
.pagination ul li a:hover,
#back a:hover {
    color: #666;
    background-color: #EEE;
    border-color: #9C9B9B;
}

.pagination {
    height: 100%;
    margin-top: 1.5em;
}

.pagination ul {
    list-style: none;
    width: 100%;
    margin:auto;
    padding:0;
}

.pagination ul li {
    display: inline;
    padding: 1em 1em;
}

.pagination ul li a,
#back a {
    font-family: source-sans-pro, sans-serif;
    font-size: 1em;
    font-weight: 600;
    font-variant:small-caps;
    color: #9C9B9B;
    text-decoration: none;
    background-color: #fff;
    background-color: rgba(255,255,255,0.9);
    border: solid #BBB 4px;
    border-color: rgba(187,187,187,0.7);
    padding: 0.5em;
}

#back {
    margin: 2em 0 1em 0;
    float: left;
}

/*  SMALL
    Images */

#single img.portrait, #page-content img.portrait {
    max-height: 350px;
    width: auto;
    padding: 1em 0;
}

#single img.landscape, #page-content img.landscape {
    width: 100%;
    height: auto;
    padding: 1em 0;
}

.alignright,
.alignleft,
.aligncenter,
.alignnone,
img.portrait {
    display: block; 
    margin-left: auto; 
    margin-right: auto;
}

/*  SMALL
    Navigation */

header {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

#nav-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 10000;
    overflow: hidden;
}

.touch #nav-area {
    position: absolute;
}

#nav-container {
    height: 8em;
    z-index: 10001;
    text-align: center;
    border-bottom: solid 0em #ECECEC;
}

#hol-logo {
    display: inline-block;
}

#hol-logo h1 {
    float: left;
    font-family: source-sans-pro, sans-serif;
    font-weight: 600;
    font-size: 2em;
    line-height: 1em;
    color: #9C9B9B;
    padding: 0.1em;
    margin: 0.5em 0 0 0;
    text-align: center;
    border: solid 0.1em #9C9B9B;
    text-decoration: none;
}

#hol-logo a {
    text-decoration: none;
}

#nav-area #main-nav li {
    display: inline-block;
}

#main-nav {
    width: 100%;
}

#main-nav ul {
    display: inline-block;
    padding: 0;
}

#main-nav a {
    font-family: source-sans-pro, sans-serif;
    font-weight: 600;
    font-size: 0.9em;
    line-height: 2em;
    margin-left: 0.6em;
    color: #9C9B9B;
    text-decoration: none;
}

#main-nav a:hover, .sticky #main-nav a:hover {
    color: #666;
}

.current_page_item a {
    border-bottom: solid #D2535A 0.15em;
}

/*  SMALL
    Kuoro Nav */

#kuoro-nav {
    position: relative;
    text-align: center;
    border-color: rgba(236,236,236,0)
}

#kuoro-nav ul {
    display: inline-block;
    padding: 0;
    margin: 0;
    text-align: center;
    background-color: #F5F5F5;
    border: solid 0.2em #9C9B9B;
}

#kuoro-nav li {
    padding: 0.3em 1em;
}

#kuoro-nav li a {
    font-family: source-sans-pro, sans-serif;
    font-weight: 600;
    font-size: 0.9em;
    color: #9C9B9B;
    text-decoration: none;
}

#kuoro-nav a:hover {
    color: #666;
}

.active-nav-link {
    background-color: #9C9B9B;
}

#kuoro-nav li.active-nav-link a {
    color: #fff;
}

/*  SMALL
    Layout */

#top {
    position: absolute;
    top: 0;
}

#splash-container {
    height: 100%;
    margin: auto;
    margin-top: 10em;
    padding-top: 1.5em;
}

#teasers {
    width: 100%;
    background-color: #fff;
    background-color: rgba(255,255,255,0.96);
    margin-top: 15em;
    padding-bottom: 2em;
    text-align: center;
}

#home #teasers {
    margin-top: 2em;
}

#teasers .teaser {
    display: inline-block;
    width: 90%;
    max-width: 1100px;
    margin: auto;
    height: 100%;
    border-bottom: solid #ECECEC 2px;
}

.teaser-text {
    width: 100%;
    text-align: left;
}

.teaser-image {
    width: 100%;
    text-align: center;
}

.teaser-image img.landscape {
    max-width: 100%;
    height: auto;
}

.teaser-image img.portrait {
    max-height: 350px;
    height: auto;
    width: auto;
    max-width: 100%;
}

#kuoro #page-content {
    margin-top: 17em;
}

#single, #page-content {
    width: 100%;
    background-color: #fff;
    background-color: rgba(255,255,255,0.96);
    margin-top: 15em;
    padding-bottom: 2em;
    text-align: center;
}

#single .post, #page-content article {
    display: block;
    width: 90%;
    max-width: 800px;
    margin: auto;
    height: 100%;
    text-align: left;
}

#single #title-image {
    text-align: center;
}

#single.imageLandscape #title-image {
    width: 111.111%;
    margin-left: -5.555%;
    overflow: hidden;
}

#single.imageLandscape #title-image img {
    width: 115%;
    margin-left: -7.5%;
    height: auto;
    max-width: none;
}




/*  SMALL 
    Footer */

#content {
    Min-height: 100%;   /* IE */
    min-height: 100%;   
    margin-bottom: -200px;
}

#content:after {
    content: "";
    display: block;
}

footer, #content:after {
    min-height: 200px; 
}

footer {
    background-color: #EEE;
    background-color: rgba(238,238,238,0.95);
    text-align: center;
}

#footnotes {
    width: 80%;
    max-width: 600px;
    min-height: 60px;
    margin: auto;
    padding-top: 1em;
}

#footnotes p {
    margin: 0;
    font-size: 1em;
    font-weight: 100;
    text-align: center;
}

#footer-logo {
    width: 60px;
    height: 60px;
    display: inline-block;
    margin: auto;
    background-image: url('img/hol-logo-60.gif');
    background-repeat: no-repeat;
    background-size: 60px 60px;
    padding: 1em 0;
    background-position: 0 1em;
}

@media only screen and (min-width: 400px) {

    #kuoro-nav li {
        display: inline-block;
    }

}

/* MEDIUM */

@media only screen and (min-width: 650px) {

    /* ANIMATION */

    .main,
    #nav-area, #nav-container, 
    #hol-logo, #hol-logo h1, #nav-area nav a, #main-nav li,
    #kuoro-nav, .active-nav-link, 
    #splash-hol,
    #news-button a, .more-link, .pagination ul li a,
    #back a {
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
    }

    body {
        -webkit-transition: background-color 0.5s;
        -moz-transition: background-color 0.5s;
        -o-transition: background-color 0.5s;
        transition: background-color 0.5s;
    }

    .no-touch body.sticky {
        background-color: #DDD;
    }

    /*  MEDIUM
        Images */

    img {
        display: block;
        margin: auto;
    }

    img.aligncenter, img.alignnone {
        display: block; 
        margin-left: auto; 
        margin-right: auto;
    }

    .alignright {float:right; }
    .alignleft {float:left; }
    .aligncenter, .alignnone {display: block; margin-left: auto; margin-right: auto}

    #single img.portrait.alignleft, #page-content img.portrait.alignleft {
        margin: 0.5em 0.5em 0.5em 0;
    }

    #single img.portrait.aligncenter, #page-content img.portrait.aligncenter,
    #single img.portrait.alignnone, #page-content img.portrait.alignnone {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }

    #single img.portrait.alignright, #page-content img.portrait.alignright {
        margin: 0.5em 0 0.5em 0.5em;
    }

    /*    img.size-full.landscape,
        img.size-large.lanscape {
            max-width: 50%;
            height: auto;
        }
        
        img.size-full.portrait,
        img.size-large.portrait {
            max-width: 50%;
            height: auto;
        }*/

    /*  MEDIUM
        Typography */

    #splash-hol {
        font-size: 5em;
        margin-bottom: 0.5em;
        color: #fff;
        text-shadow: 0.02em 0.02em #8d8d8d;
    }

    #teasers .post h1 a,
    #teasers .post h2 a {
        font-size: 2.2em;
        line-height: 1.2em;
    }

    #teasers .post p {
        font-size: 1.3em;
        line-height: 1.3em;
        margin: 0 0 1em 0;
    }

    .more-link, #news-button a, .pagination ul li a, #back a {
        font-size: 1.3em;
        padding: 0.35em;
    }

    #single #heading h2 {
        font-size: 2em;
        font-weight: 100;
    }

    blockquote {
        margin: 1.5em 2em;
    }

    #footnotes p {
        font-size: 1.3em;
    }

    /*  MEDIUM
        Text bulks */

    #single .post h1, .page h1, #page-content article h1, #error h1 {
        font-size: 2.8em;
        line-height: 1.2em;
    }

    #single .post h2, .page h2, #page-content article h2, #error h2 {
        font-size: 2em;
        line-height: 1.2em;
    }

    #single .post h3, .page h3, #page-content article h3, #error h3 {
        font-size: 1.5em;
        line-height: 1.2em;
    }

    #single .post h4, .page h4, #page-content article h4, #error h4 {
        font-size: 1.3em;
        line-height: 1.1em;
    }

    #single .post p, .page p, #page-content article p, #error p,
    #single .post li, .page li, #page-content article li {
        font-size: 1.2em;
        line-height: 1.35em;
    }

    #single .post p a, .page p a, #page-content article p a,  
    #single .post li a, .page li a, #page-content article li a {
        letter-spacing: 0;
    }

    /*  MEDIUM
        Nav */


    #nav-area {
        position: fixed;
    }

    .touch #nav-area {
        position: absolute;
    }

    #nav-container {
        width: 96%;
        padding: 0 2%;
        max-width: 800px;
        height: auto;
        margin: auto;
    }

    .no-touch .sticky #nav-container {
        margin: auto;
    }

    #hol-logo h1 {
        font-size: 2.5em;
    }

    #main-nav li {
        padding: 0 1em;
    }

    #main-nav a {
        font-size: 1.2em;
    }

    .current_page_item a {
        border-bottom: solid #D2535A 0.2em;
    }

    /*  MEDIUM
        Minimized nav */


    .no-touch .sticky #nav-container {
        height: 100%;
        background-color: #fff;
        background-color: rgba(255,255,255,0.95);
        border-bottom: solid 0.3em #ECECEC;
    }

    .no-touch .sticky #hol-logo {
        margin-top: 0.5em;
        float: left;
    }

    .no-touch .sticky #hol-logo {
        display: inline-block;
    }

    .no-touch .sticky #hol-logo h1 {
        font-size: 2em;
        margin: 0.1em 0;
        color: #ECECEC;
        border-color: #ECECEC;
    }

    .no-touch .sticky #hol-logo h1:hover {
        color: #9C9B9B;
        border-color: #9C9B9B;
    }

    .no-touch .sticky #main-nav {
        height: 100%;
        margin: 0.6em 0;
        float: right;
        width: auto;
    }

    .no-touch .sticky #main-nav ul {
        margin: 0.3em 0;
    }

    .no-touch .sticky #main-nav li {
        padding: 0 0;
    }

    .no-touch .sticky #main-nav a {
        color: #BBB;
    }

    .no-touch #kuoro.sticky #nav-area {
        border-bottom: solid 0em #ECECEC;
    }

    /*  MEDIUM
        Kuoro nav */

    #kuoro-nav {
        margin-top: 2em;
        border-bottom: solid 0em #ECECEC;
        border-color: rgba(236,236,236,0);
    }

    #kuoro-nav li a {
        font-size: 1em;
    }

    /*  MEDIUM
        Minimized kuoro nav */

    #kuoro #nav-container {
        border: none;
    }

    .no-touch .sticky #kuoro-nav {
        margin-top: 0;
        height: auto;
        background-color: #F5F5F5;
        background-color: rgba(245,245,245,0.97);
        border-bottom: solid 0.3em #ECECEC;
    }

    .no-touch .sticky #kuoro-nav ul {
        border: none;
        background-color: rgba(245,245,245,0);
    }

    /*  MEDIUM
        Layout */

    #teasers .teaser {
        min-height: 350px;
    }

    #teasers .teaser.no-image h1,
    #teasers .teaser.no-image h2 {
        width: 100%;
    }

    #teasers .teaser.no-image .teaser-text {
        width: 100%;
    }

    #teasers .teaser .teaser-image img {
        padding-bottom: 1em;
    }

    #single.imagePortrait #heading {
        float: left;
        width: 50%;
    }

    #single.imagePortrait #title-image {
        width: 50%;
        height: auto;
        float: right;
    }

    #single.imagePortrait #title-image img {
        padding: 2.85em 0 1em 1em;
    }

    #single.imageLandscape #title-image {
        width: 100%;
        margin-left: 0;
    }

    #single.imageLandscape #title-image img {
        width: 100%;
        margin-left: 0;
    }

}

/* MEDIUM-LARGE */

@media only screen and (min-width: 750px) {
    #main-nav a {
        font-size: 1.3em;
    }

    img.size-article-image {
        max-width: 80%;
        margin: 0 10%;
    }

    #single img.portrait.aligncenter, #page-content img.portrait.aligncenter,
    #single img.portrait.alignnone, #page-content img.portrait.alignnone {
        margin: 0.5em auto;
    }

}


/* LARGE */

@media only screen and (min-width: 850px) {

    /*  LARGE
        Images */

    img {
        display: block;
        margin: auto;
    }

    img.alignright {
        float:right; 
        margin:0.5em 0 0.5em 0.5em;
    }

    img.alignleft {
        float:left; 
        margin:0 0.5em 0.5em 0;
    }

    #single img.portrait, #page-content img.portrait {
        max-height: 450px;
    }

    #single img.landscape, #page-content img.landscape {
        width: 50%;
    }

    #single img.landscape.aligncenter, #page-content img.landscape.aligncenter,
    #single img.landscape.alignnone, #page-content img.landscape.alignnone {
        width: 100%;
    }


    /*  LARGE
        Typography */

    #teasers .post h1 a {
        font-size: 3em;
        line-height: 1.2em;
    }

    #teasers .post h2 a {
        font-size: 2.5em;
        line-height: 1.2em;
    }

    #single .post h1, .page h1, #page-content article h1, #error h1 {
        font-size: 3em;
    }

    .more-link, #news-button a {
        font-size: 1.3em;
        padding: 0.5em;
    }

    #single #heading h2, #error h2 {
        font-size: 3em;
    }

    blockquote {
        margin: 1.5em 3.5em;
    }

    /*  LARGE
        Nav */

    #nav-area {
        border-bottom: solid 0em #F5F5F5;
    }

    #hol-logo {
        float: left;
    }

    #hol-logo h1 {
        font-size: 6em;
    }

    #main-nav {
        float: right;
        width: auto;
    }

    #main-nav a {
        line-height: 9em;
    }

    .no-touch .sticky #main-nav a {
        line-height: 2em;
    }

    #main-nav li, .no-touch .sticky #main-nav li {
        padding: 0 0.2em;
    }

    #kuoro-nav {
        margin-top: 6em;
    }

    #kuoro-nav ul {
        border: solid 0.3em #9C9B9B;
    }

    #kuoro-nav li {
        padding: 0.5em 1.5em;
    }

    #kuoro-nav li a {
        font-size: 1.2em;
    }

    /*  LARGE
        Minimized nav */

    .no-touch .sticky #nav-area {
        background-color: #fff;
        background-color: rgba(255,255,255,0.95);
        border-bottom: solid 0.3em #ECECEC;
    }

    .no-touch .sticky #nav-container {
        background: none;
        border: none;
    }

    .no-touch .sticky #hol-logo h1 {
        font-size: 2em;
    }

    .no-touch .sticky #kuoro-nav {
        background-color: rgba(245,245,245,0.5);
    }

    /*  LARGE
        Layout */

    #teasers,
    #single,
    #page-content,
    #kuoro #page-content {
        margin-top: 30em;
    }

    #splash-container {
        height: 30em;
    }

    #splash-hol {
        margin-top: 2.7em;
    }

    #teasers {
        width: 100%;
        padding-top: 2em;
        padding-bottom: 2em;
        text-align: center;
    }

    /*  LARGE
        Excerpt and image, text left */

    .teaser-text {
        width: 49%;
        text-align: left;
    }

    .teaser-image {
        float: right;
        width: 49%;
        height: 100%;
        vertical-align: middle;
        text-align: center;
    }

    .teaser-image img {
        line-height: 100%;
    }

    /*  LARGE
        Excerpt and image, text right */

    #teasers .teaser:nth-of-type(even) .teaser-text {
        float: right;
    }

    #teasers .teaser:nth-of-type(even) .teaser-image {
        float: left;
    }

    /*  LARGE
        Buttons */

    .more {
        display: inline-block;
        width: 50%;
    }

    .more-link {
        float: left;
    }

}

@media only screen and (min-width: 1000px) {

    #teasers h1,
    #teasers h2 {
        float: left;
        width: 49%;
    }

    #teasers .teaser:nth-of-type(even) h1,
    #teasers .teaser:nth-of-type(even) h2 {
        float: right;
    }

    .teaser .teaser-image img {
        max-height: 450px;
        width: auto;
    }

    #teasers .teaser p {
        font-size: 1.4em;
    }

}

@media only screen and (min-width: 1100px) {

    #splash-hol {
        margin-top: 3.5em;
    }

    #single img.landscape, #page-content img.landscape {
        width: 60%;
        max-width: 800px;
    }

    img.alignright {
        float:right; 
        margin: 0 -2em 0 1em;
    }

    img.alignleft {
        float:left; 
        margin: 0 1em 0 -2em;
    }

    #single img.landscape.aligncenter, #page-content img.landscape.aligncenter,
    #single img.landscape.alignnone, #page-content img.landscape.alignnone {
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
    }

}

/* WIDE */

@media only screen and (min-width: 1600px) { 

    #home #teasers {
        margin-top: 10em;
    }

    #splash-hol {
        margin-top: 4.5em;
    }

    #home #teasers .teaser p {
        font-size: 1.45em;
    }

    /*  WIDE
        Images */

    #single img.portrait, #page-content img.portrait {
        max-width: 60%;
    }

    #single.imagePortrait #heading {
        margin-left: -10%;
        width: 75%;
    }

    #single.imagePortrait #title-image {
        margin-right: -15%;
        width: 50%;
        height: auto;
    }

    #single.imagePortrait #title-image img {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 100%;
    }

    #single img.landscape, #page-content img.landscape {
        width: 70%;
    }

    img.alignright {
        margin: 0 -5em 0 1em;
    }

    img.alignleft {
        margin: 0 1em 0 -5em;
    }

}

/* CLEARFIX */

.group:before,
.group:after {
    content: "";
    display: table;
} 
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

/* NON-JS */

.no-js #nav-area {
    background-color: #fff;
}