// *--------- MODULES ---------*
%clearfix {
    @include clearfix;
}

%transitionAll {
    @include transition;
}

// *--------- STYLES ---------*

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body {
    background-color: $generalBgColor;
    overflow-x: hidden;

    line-height: 1.5;
}

.container {
    width: 95%;
    margin: 30px auto;  

    .page-permalink & {
        width: 100%;
    }
}

.wrapper {
    width: 100%;
    margin: 0 auto;
}

    /* Preloader */
    #preloader {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #fff;
        z-index: 999;
    }

    #status {
        width: 82px;
        height: 82px;
        position: absolute;
        left: 50%;
        top: 50%; 
        margin: -42px 0 0 -42px; /* is width and height divided by two */
    }    

    .windows8 {
        position: relative;
        width: 52px;
        height: 52px;
        margin: 16px auto;
    }

    .windows8 .wBall {
        position: absolute;
        width: 49px;
        height: 49px;
        opacity: 0;
        transform: rotate(225deg);
            -o-transform: rotate(225deg);
            -ms-transform: rotate(225deg);
            -webkit-transform: rotate(225deg);
            -moz-transform: rotate(225deg);
        animation: orbit 4.8425s infinite;
            -o-animation: orbit 4.8425s infinite;
            -ms-animation: orbit 4.8425s infinite;
            -webkit-animation: orbit 4.8425s infinite;
            -moz-animation: orbit 4.8425s infinite;
    }

    .windows8 .wBall .wInnerBall{
        position: absolute;
        width: 6px;
        height: 6px;
        background: rgba(0,0,0,0.41);
        left:0px;
        top:0px;
        border-radius: 6px;
    }

    .windows8 #wBall_1 {
        animation-delay: 1.056s;
            -o-animation-delay: 1.056s;
            -ms-animation-delay: 1.056s;
            -webkit-animation-delay: 1.056s;
            -moz-animation-delay: 1.056s;
    }

    .windows8 #wBall_2 {
        animation-delay: 0.203s;
            -o-animation-delay: 0.203s;
            -ms-animation-delay: 0.203s;
            -webkit-animation-delay: 0.203s;
            -moz-animation-delay: 0.203s;
    }

    .windows8 #wBall_3 {
        animation-delay: 0.4265s;
            -o-animation-delay: 0.4265s;
            -ms-animation-delay: 0.4265s;
            -webkit-animation-delay: 0.4265s;
            -moz-animation-delay: 0.4265s;
    }

    .windows8 #wBall_4 {
        animation-delay: 0.6295s;
            -o-animation-delay: 0.6295s;
            -ms-animation-delay: 0.6295s;
            -webkit-animation-delay: 0.6295s;
            -moz-animation-delay: 0.6295s;
    }

    .windows8 #wBall_5 {
        animation-delay: 0.843s;
            -o-animation-delay: 0.843s;
            -ms-animation-delay: 0.843s;
            -webkit-animation-delay: 0.843s;
            -moz-animation-delay: 0.843s;
    }



    @keyframes orbit {
        0% {
            opacity: 1;
            z-index:99;
            transform: rotate(180deg);
            animation-timing-function: ease-out;
        }

        7% {
            opacity: 1;
            transform: rotate(300deg);
            animation-timing-function: linear;
            origin:0%;
        }

        30% {
            opacity: 1;
            transform:rotate(410deg);
            animation-timing-function: ease-in-out;
            origin:7%;
        }

        39% {
            opacity: 1;
            transform: rotate(645deg);
            animation-timing-function: linear;
            origin:30%;
        }

        70% {
            opacity: 1;
            transform: rotate(770deg);
            animation-timing-function: ease-out;
            origin:39%;
        }

        75% {
            opacity: 1;
            transform: rotate(900deg);
            animation-timing-function: ease-out;
            origin:70%;
        }

        76% {
        opacity: 0;
            transform:rotate(900deg);
        }

        100% {
        opacity: 0;
            transform: rotate(900deg);
        }
    }

    @-o-keyframes orbit {
        0% {
            opacity: 1;
            z-index:99;
            -o-transform: rotate(180deg);
            -o-animation-timing-function: ease-out;
        }

        7% {
            opacity: 1;
            -o-transform: rotate(300deg);
            -o-animation-timing-function: linear;
            -o-origin:0%;
        }

        30% {
            opacity: 1;
            -o-transform:rotate(410deg);
            -o-animation-timing-function: ease-in-out;
            -o-origin:7%;
        }

        39% {
            opacity: 1;
            -o-transform: rotate(645deg);
            -o-animation-timing-function: linear;
            -o-origin:30%;
        }

        70% {
            opacity: 1;
            -o-transform: rotate(770deg);
            -o-animation-timing-function: ease-out;
            -o-origin:39%;
        }

        75% {
            opacity: 1;
            -o-transform: rotate(900deg);
            -o-animation-timing-function: ease-out;
            -o-origin:70%;
        }

        76% {
        opacity: 0;
            -o-transform:rotate(900deg);
        }

        100% {
        opacity: 0;
            -o-transform: rotate(900deg);
        }
    }

    @-ms-keyframes orbit {
        0% {
            opacity: 1;
            z-index:99;
            -ms-transform: rotate(180deg);
            -ms-animation-timing-function: ease-out;
        }

        7% {
            opacity: 1;
            -ms-transform: rotate(300deg);
            -ms-animation-timing-function: linear;
            -ms-origin:0%;
        }

        30% {
            opacity: 1;
            -ms-transform:rotate(410deg);
            -ms-animation-timing-function: ease-in-out;
            -ms-origin:7%;
        }

        39% {
            opacity: 1;
            -ms-transform: rotate(645deg);
            -ms-animation-timing-function: linear;
            -ms-origin:30%;
        }

        70% {
            opacity: 1;
            -ms-transform: rotate(770deg);
            -ms-animation-timing-function: ease-out;
            -ms-origin:39%;
        }

        75% {
            opacity: 1;
            -ms-transform: rotate(900deg);
            -ms-animation-timing-function: ease-out;
            -ms-origin:70%;
        }

        76% {
        opacity: 0;
            -ms-transform:rotate(900deg);
        }

        100% {
        opacity: 0;
            -ms-transform: rotate(900deg);
        }
    }

    @-webkit-keyframes orbit {
        0% {
            opacity: 1;
            z-index:99;
            -webkit-transform: rotate(180deg);
            -webkit-animation-timing-function: ease-out;
        }

        7% {
            opacity: 1;
            -webkit-transform: rotate(300deg);
            -webkit-animation-timing-function: linear;
            -webkit-origin:0%;
        }

        30% {
            opacity: 1;
            -webkit-transform:rotate(410deg);
            -webkit-animation-timing-function: ease-in-out;
            -webkit-origin:7%;
        }

        39% {
            opacity: 1;
            -webkit-transform: rotate(645deg);
            -webkit-animation-timing-function: linear;
            -webkit-origin:30%;
        }

        70% {
            opacity: 1;
            -webkit-transform: rotate(770deg);
            -webkit-animation-timing-function: ease-out;
            -webkit-origin:39%;
        }

        75% {
            opacity: 1;
            -webkit-transform: rotate(900deg);
            -webkit-animation-timing-function: ease-out;
            -webkit-origin:70%;
        }

        76% {
        opacity: 0;
            -webkit-transform:rotate(900deg);
        }

        100% {
        opacity: 0;
            -webkit-transform: rotate(900deg);
        }
    }

    @-moz-keyframes orbit {
        0% {
            opacity: 1;
            z-index:99;
            -moz-transform: rotate(180deg);
            -moz-animation-timing-function: ease-out;
        }

        7% {
            opacity: 1;
            -moz-transform: rotate(300deg);
            -moz-animation-timing-function: linear;
            -moz-origin:0%;
        }

        30% {
            opacity: 1;
            -moz-transform:rotate(410deg);
            -moz-animation-timing-function: ease-in-out;
            -moz-origin:7%;
        }

        39% {
            opacity: 1;
            -moz-transform: rotate(645deg);
            -moz-animation-timing-function: linear;
            -moz-origin:30%;
        }

        70% {
            opacity: 1;
            -moz-transform: rotate(770deg);
            -moz-animation-timing-function: ease-out;
            -moz-origin:39%;
        }

        75% {
            opacity: 1;
            -moz-transform: rotate(900deg);
            -moz-animation-timing-function: ease-out;
            -moz-origin:70%;
        }

        76% {
        opacity: 0;
            -moz-transform:rotate(900deg);
        }

        100% {
        opacity: 0;
            -moz-transform: rotate(900deg);
        }
    }   
