@import "./ios7-fix.css?0.3" screen;

body:before {
/* set cover page - mg */
    content: '';
    position: fixed;
    top:    0;
    right:  0;
    bottom: 0;
    left:   0;
    z-index: -1;
    margin: auto;
       -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
/* background-image is already set in internal style sheet - mg */
/*!
 * no need to assign 'fixed' value to background-attachment property as
 * it is reported to be problematic on earlier iOS versions
 */
    background-position: 50% 50%;
    background-repeat: no-repeat;
       -moz-background-size: cover;
         -o-background-size: cover;
    -webkit-background-size: cover;
            background-size: cover;
       -moz-filter: blur(.25px);
        -ms-filter: blur(.25px);
         -o-filter: blur(.25px);
    -webkit-filter: blur(.25px);
            filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="0.25" /></filter></svg>#filter');
            filter: blur(.25px);
    -webkit-transition: opacity .4s ease-in-out;
            transition: opacity .4s ease-in-out;
}
body:focus:before,
body:hover:before {
    opacity: .9;
}

body {
/* update pixel values in iOS 7 fix as needed - mg */
    padding-bottom: 50vh;
}
body,
#top {
    background-color: transparent;
    text-shadow: none;
}

.heading {
    display: block;
    max-width: none;
    min-width: auto;
}

.vcard .logo {
    display: none;
}
.vcard .youtube {
    display: block;
}

#apex {
    position: fixed;
    z-index: 1;
    top:  .625em;
    top:  .625rem;
    left: .625em;
    left: .625rem;
    margin: 0;
        -ms-transform-origin: 0 0 0;
    -webkit-transform-origin: 0 0 0;
            transform-origin: 0 0 0;
        -ms-transform: scale(0.63158);
         -o-transform: scale(0.63158);
    -webkit-transform: scale(0.63158);
            transform: scale(0.63158);
    -webkit-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
}

#content h1 {
/* move document title to very top and make it as wide as viewport width - mg */
    z-index: -1;
    position: fixed;
    top:    0;
    right:  0;
    left:   0;
    margin: -4px 0 0 0;
    padding: .625em  0;
    padding: .625rem 0;
/* magic number based on #apex width (36px) - mg */
    padding-left:           46px;
    padding-left:      calc(36px + .63rem);
    min-width: 17.125em;
    min-width: 17.125rem;
    min-width: calc(20em  - 36px - .63em);
    min-width: calc(20rem - 36px - .63rem);
    min-height:             36px;
    line-height:            36px;
    font-size: 2.75em;
    font-size: 2.75rem;
    text-shadow: 1px 1px .05em rgba(40, 70, 88, .45);
    text-transform: lowercase;
    color: rgba(255, 255, 255, .75);
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
    -webkit-transition: line-height .4s ease-in-out;
            transition: line-height .4s ease-in-out;
    -webkit-animation: slide-down 1s 1s forwards;
            animation: slide-down 1s 1s forwards;
}

#footer {
    background: rgba(242, 242, 242, .94) none;
/* darken font color for better legibility - mg */
    color: #666;
}

#main  {
    background: rgba(255, 255, 255, .9) none;
    color: #000;
}

#skip-to-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    top:    0;
    right:  0;
    bottom: 0;
    left:   0;
    margin: 0 !important;
    background-image: none;
}

#top {
    position: relative;
    box-sizing: border-box;
/* should be set to same value as body padding bottom property - mg */
    height: 50vh;
/* magic number based on #apex height (36px) - mg */
    min-height: 112px;
    min-height: calc(2 * (36px + 2 * .625em));
    min-height: calc(2 * (36px + 2 * .625rem));
}

#we-did-it {
/* darken font color for better readability - mg */
    color: #999;
}
#we-did-it > span {
    color: #666;
}

@media screen     and (min-width: 45em),
       projection and (min-width: 45em) {

    .heading {
        text-align: center;
        text-indent: -.25rem;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .vcard .logo {
        display: block;
    }

    #apex {
            -ms-transform: scale(1);
             -o-transform: scale(1);
        -webkit-transform: scale(1);
                transform: scale(1);
    }

    #content h1 {
        margin-top: 0;
    /* magic number based on #apex width (57px) - mg */
        padding: .625em  67px;
        padding: .625em  calc(57px + .63em);
        padding: .625rem 67px;
        padding: .625rem calc(57px + .63rem);
        font-size: 2.5em;
        font-size: 2.5rem;
        line-height:          57px;
        text-transform: initial;
        background-color: rgba(72, 128, 160, .4);
    }

    #top {
    /* magic number based on #apex witdh (57px) - mg */
        min-height: 154px;
        min-height: calc(2 * (57px + 2 * .625em));
        min-height: calc(2 * (57px + 2 * .625rem));
    }
}

@-webkit-keyframes slide-down {

    0% {
        -webkit-transform: translate3d(0, -100%, 0);
                transform: translate3d(0, -100%, 0);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
}

@keyframes slide-down {

    0% {
        -webkit-transform: translate3d(0, -100%, 0);
                transform: translate3d(0, -100%, 0);
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
}