@charset "UTF-8";
/* STYLESHEET FOR SIELLE.CA _ Created by Gregor Kalfas */
/*  GLOBAL AND TYPE STYLES  */
@font-face {
    font-family: 'Fontin';
    src: url('fontin-regular-webfont.eot');
    src: url('fontin-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fontin-regular-webfont.woff') format('woff'),
         url('fontin-regular-webfont.ttf') format('truetype'),
         url('fontin-regular-webfont.svg#fontinregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'Fontin Sans';
    src: url('fontinsans-regular-webfont.eot');
    src: url('fontinsans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fontinsans-regular-webfont.woff') format('woff'),
         url('fontinsans-regular-webfont.ttf') format('truetype'),
         url('fontinsans-regular-webfont.svg#fontin_sans_rgregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

html {
    font-size: 100%;
}
body {
    font-size: 1em;
    font-family: "Fontin Sans", "Optima", "Helvetica Neue", sans-serif;
    color: #C80F3F;
    background-color: #333;
}
.container {

    position:relative;
    z-index:10;
}
p, ul {
    font-size: .875em;
    line-height: 1.25;
}
p a {
    color: #1062F1;
    text-decoration: underline;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Fontin", "Optima", "Trebuchet", serif;
}
h2 {
    font-size: 1.5em;
    font-weight: bold;
    color: #1062f1;

}
h3 {
    text-transform: uppercase;
}
h6 {
    color: #1062f1;
}

/*body {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
}
*/

@media only screen and (max-width: 319px) {
    body {
        background: url("/images/sielle-portrait300.jpg") no-repeat top right fixed;
        background-size: auto 348px;;
    }
}
@media only screen and (min-width: 320px) {
    body {
        background: url("/images/sielle-portrait500.jpg") no-repeat top right fixed;
        background-size: auto 825px;

    }
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 
    body {
        background: url("/images/sielle-portrait500.jpg") no-repeat top right fixed;
        background-size: auto 825px;

    }
}
@media only screen and (min-width: 500px) {
    body {
        background: url("/images/sielle-portrait800.jpg") no-repeat top right fixed;
        background-size: auto 1024px;
    }
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 500px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 500px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 500px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 500px),
only screen and (                min-resolution: 192dpi) and (min-width: 500px),
only screen and (                min-resolution: 2dppx)  and (min-width: 500px) { 
    body {
        background: url("/images/sielle-portrait800@2x.jpg") no-repeat top right fixed;
        background-size: auto 1024px;
    }
 
}
@media screen and (min-width: 800px){
    body {
        background: url("/images/sielle-landscape1400.jpg") no-repeat top right fixed;
        background-size: cover;
    }
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 800px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 800px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 800px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 800px),
only screen and (                min-resolution: 192dpi) and (min-width: 800px),
only screen and (                min-resolution: 2dppx)  and (min-width: 800px) { 
    body {
        background: url("/images/sielle-landscape1400@2x.jpg") no-repeat top right fixed;
        background-size: cover;
    }
}
@media screen and (min-width: 1400px){
    body {
        background: url("/images/sielle-landscape2200.jpg") no-repeat top right fixed;
        background-size: cover;
    }
}

.fixed {
    /* [disabled]width: 50%; */
    top: 1em;
    z-index: -28;
}
.tab-bar#menu-tab {
    -webkit-backface-visibility: hidden;
    background-color: #C80F3F;
    color: white;
    height: 2.8125rem;
    line-height: 2.8125rem;
    position: relative;
    width: 4em;
}
.menu-icon{
    font-size: 2em;
}
header {
    padding: 1em;
    margin-bottom: 1400px;
    
}
.logo {
    width: 175px;
    /*max-width: 225px;*/
    float: right;
    position: fixed;
    top: 1em;
    right: 1em;
    z-index: -1;
    margin-bottom: 1em;
}
.logo img{
    width: 100%;
    height: auto;
}
/*aside {
    position: fixed;
    top: 5%;
    right: auto;
    left: 0;
    z-index: 500;

}*/
.inner-wrap a.left-off-canvas-toggle span {
    width: 35px;
    height: 35px;
    position: fixed;
    top: 5px;
    left: 5px;
    z-index: 75;
}
.stay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1500;
}
ul > li {
    list-style-type: none;

}
ul.sidenav li a {
    color: #1062F1;
    font-size: .75em;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: .5em;
    margin-bottom: .5em;
    font-family: "Fontin", serif;
}
ul.sidenav li a span{
    float: right;
    font-size: 2em;
    margin-top: -10px;
}
ul.sidenav > li > a.white {
    background: rgba(255,255,255,0.8);
    color: #1062f1;
    padding-left: 0.5em;
    padding-right: .75em;
    font-size: .75em;
    width: 9em;
    text-align:left;
    padding-bottom: 4px;
    margin-left: -7em;
    -webkit-transition: margin-left .5s ease;
    transition: margin-left .5s ease;
}
.finger {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
ul.sidenav li a.white:hover {
    background: rgba(56,118,225,.8);
    color: #fff;
    width: 9em;
    margin-left: -1.1em;
}
.main {
    position: relative; 
    top:0;
    left:0;
    z-index: 1000;
}
#about {
    margin-top: 0px;
}
#about, #dates, #photos, #contact, #music, #press {
    width: 80%;
    background-color: rgba(255,255,255,0.9);
    padding: 1em;
    border-radius: 8px;
    margin-bottom: 500px;
    margin-left: 18%;
}
#videos {
    background-color: rgba(255,255,255,0.9);
    padding: 1em;
    border-radius: 8px;
    margin-bottom: 500px;
    margin-left: 10%;
}
#about img {
    width: 100%;
    height: auto;
    margin-bottom: 1em;

}
#photos ul li a.th {
    box-shadow: 2px 2px 4px #aaa;
}
 iframe {
    background: #333;
    position: relative;
    margin-left: 50%;
    left: -145px;
 }
.vxs,
.vs,
.vm,
.vl,
.vxl {
    display: none;
}
#contact p  i {
    color: #1062f1;
    font-size: 2.5em;
    position: relative;
    top: 6px;
    padding-right: 8px;
}
#contact span {
    margin-left: .5em;
}
.cdbaby {
    display: inline-block;
}
#music div a img {
    width: 90%;
    max-width: 110px;
    height: auto;
    margin-bottom: .5em;
}
@media screen and (min-width: 420px) {
    .vt { display: none; }
    .vxs { display: block; }
    iframe { left: -185px; }  
}
@media screen and (min-width: 700px) {
    .vt, .vxs { display: none; }
    .vs { display: block; }
    iframe { left: -280px; }  
}
@media screen and (min-width: 800px) {
    .vt, .vxs, .vs { display: none; }
    .vm { display: block; }
    iframe { left: -320px; }  
}
@media screen and (min-width: 1000px) {
    .vt, .vxs, .vs, .vm { display: none; }
    .vl { display: block; }
    iframe { left: -426px; }  
}

@media screen and (min-width: 25.063em){
/*    .logo {
        max-width: 250px;
        margin: 2%;
    }*/
    aside {
        top: 25%;
    }
    ul.sidenav > li > a.white {
        font-size: 1.125em;
    }
    #about, #dates, #photos, #contact, #music, #press {
        width: 88%;
        margin-left: 10%;
        margin-bottom: 1000px;
    }
    #about {
        margin-top: 0px;
    }
    #about img {
        width: 50%;
        min-width: 150px;
        float: right;
        margin-left: 1em;
    }
}
@media screen and (min-width: 50.063em){
    p, ul {
        font-size: 1em;
        line-height: 1.5em;
    }
    .logo {
        width: 200px;
        float: right;
    }
/*    ul.sidenav {
        text-align: left;
    }
    ul.sidenav > li > a.white {
        padding-left: .5em;
        width: 9em;
    }*/
    aside {
        right: 0;
        left: auto;
    }
/*    .finger {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
    }*/
    #about, #dates, #photos, #contact, #music, #press {
        width: 50%;
        max-width: 800px;
        margin-bottom: 1000px;
        margin-left: 5%;
    }
    #videos {
        margin-bottom: 1000px;
        margin-left: 5%;
        width: 88%;
        max-width: 920px;
    }
    #about img {
        width: 20%;
        min-width: 200px;
        height: auto;
        float: left;
        margin-right: 1em;
        margin-left: 0;
        margin-bottom: 0;
    }
#contact p > img {
    width: 50px;
    height: auto;
    }
}
@media screen and (min-width: 64.063em){
    #about img {
        width: 50%;
    }
}

@media screen and (min-width: 95.063em){
    #about, #dates, #press {
        margin-left: 7%;
    }
}