@-webkit-viewport{
  width: device-width;
}

@-moz-viewport{
  width: device-width;
}

@-ms-viewport{
  width: device-width;
}

@-o-viewport{
  width: device-width;
}

@viewport{
  width: device-width;
}

html, body {
    width:100%;
    height:100%;
    padding:0px;
    margin:0px;
    overflow:hidden;
    background-size:contain;
}

html {
    background-image:url(../img/bg.png);
    background-repeat:repeat;
    background-position:0%;
}

body {
    background-image:url(../img/horo.png);
    background-repeat:no-repeat;
    font-family: 'Lato', sans-serif;
    color:#fbf8eb;
}

body.animate {
    -webkit-animation: fadein 1.5s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1.5s; /* Firefox < 16 */
        -ms-animation: fadein 1.5s; /* Internet Explorer */
         -o-animation: fadein 1.5s; /* Opera < 12.1 */
            animation: fadein 1.5s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#logo {
    display:inline-block;
    position:absolute;
}

#logo div {
    background-image:url(../img/logo.svg);
    background-size:contain;
    background-repeat:no-repeat;
    width:150px;
    height:141px;
    margin:-0.22222222222em auto;
}

h1 {
    font-family: 'Advent Pro', sans-serif;
    font-weight:300;
    font-size:inherit;
    text-transform:lowercase;
    margin:0px;
    -webkit-font-smoothing: antialiased;
    /*text-shadow:0px 0px 2px #fbf8eb;*/
    white-space: nowrap;
}

#logo:before {
    content:'Coming soon…';
    font-size:18px;
    text-align:center;
    display:block;
    text-transform: lowercase;
    position:relative;
    top:12.125em;
    white-space: nowrap;
}

@media screen and (min-aspect-ratio: 185/100) {
    body {
        background-size:contain;
        background-position:0%;
    }

    #logo {
        bottom:calc(34.4148621042vh - 0.46049305555em);
        left:calc((((100vw - 129.287538304vh) - 7.04743055556em) / 2) + 129.287538304vh);
        font-size:3.75vw;
    }
}

@media screen and (max-aspect-ratio: 18499/10000) {
    body {
        background-size:auto 100%;
        background-position:calc(100vw - 48.5vh);
        content: 'viewport-units-buggyfill; background-position:calc(100vw - 48.5vh);';
    }

    #logo {
        bottom:calc(11.6546875vh - 0.46049305555em);
        left:calc(((100vw - 18.3820043103vh) - 7.04743055556em) / 2);
        content: 'viewport-units-buggyfill; bottom:calc(11.6546875vh - 0.46049305555em); left:calc(((100vw - 18.3820043103vh) - 7.04743055556em) / 2);';
    }
}

@media screen and (max-aspect-ratio: 18499/10000) and (orientation: portrait) {
    #logo {
        font-size:9.375vw;
    }
}

@media screen and (max-aspect-ratio: 18499/10000) and (orientation: landscape) {
    #logo {
        font-size:7.03125vw;
    }
}

/* 644px appears to be the inner height without the favorites bar, and 672px the outer height.
 * I expect it's a further 28px less with favorites bar.
 * No idea why this is the case when I get 672px in Inkscape mockup and it's otherwise the accepted standard.
 * Will probably have to fix this with JavaScript.
 */

@media (orientation: landscape) {
    html.ipad.ios7 > body {
        position: fixed;
        bottom: 0;
        width:100%;
        /*height: 644px !important;*/ /* JavaScript */
    }
}

/*body:after {
    content: '';
    position: absolute;
    color: transparent;
    left:-9999px;
}

@media all and (orientation: portrait) {
    body:after {
        content: 'p';
    }
}

@media all and (orientation: landscape) {
    body:after {
        content: 'l';
    }
}*/