/* Cover for onload function */

#cover {
    display: block;
    z-index: 999;
    background: black;
    /* background: url("to/your/ajaxloader.gif") no-repeat scroll center center #FFF; */
    position: fixed;
    height: 100vh;
    width: 100vw;
}

#rotate {
    display: none;
    background: black;
    /* background: url("to/your/ajaxloader.gif") no-repeat scroll center center #FFF; */
    position: fixed;
    z-index: 11;
    height: 100vh;
    width: 100vw;
    color: #eee;
	font-family: 'Cormorant Garamond', serif;
    font-size: 10vmin;
    text-align: center;
}

#rotate-text {
    position: relative;
    z-index: 11;
    text-align: center;
    top: 25vh;
}

#octo-rot1 {
    z-index: 10;
    width: 50vh;
    height: auto;
    position: absolute;
    top: 40vh;
    left: 10vh;
    animation: rotation 13s linear infinite;
    filter: sepia(60%) brightness(20%);
}

#octo-rot2 {
    z-index: 9;
    width: 75vh;
    height: auto;
    position: absolute;
    top: 0vh;
    left: -30vh;
    animation: rotation 15s infinite linear;
    filter: sepia(60%) brightness(20%);
}

#octo-rot3 {
    z-index: 8;
    width: 140vh;
    height: auto;
    position: absolute;
    top: 0vh;
    left: 0vh;
    animation: rotation-alt 20s linear infinite;
    filter: sepia(60%) brightness(10%);
}

@keyframes rotation {
	from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(359deg);}
}

@keyframes rotation-alt {
	from { transform: rotate(-359deg); }
    to { transform: rotate(0deg); }
}

@-webkit-keyframes rotation-alt {
    from {-webkit-transform: rotate(-359deg);}
    to {-webkit-transform: rotate(0deg);}
}

@media only screen and (orientation:portrait){
    #rotate {
        display: block;
    }
}

@media only screen and (orientation:landscape){
    #rotate {
        display: none;
    }
}