@charset "utf-8";
html, body {
    background: transparent;
    font-family: sans-serif;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

#video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

#video-background {
    height: auto;
    width: 100%;
    bottom: 0;
    left: 0;
    margin: auto;
    overflow: auto;
    position: absolute;
    right: 0;
    top: 0;
}

#background-image {
    visibility: visible;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}

/*Main Styling for home page*/
#partialWindowLeft {
    visibility: hidden;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: "FlipH";
    -ms-filter: "FlipH";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 20%;
}

#partialWindow {
    visibility: hidden;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 20%;
}

@media only screen and (max-width: 1024px) and (max-height: 1024px) {
    /*#video-background {*/
    /*height: 100%;*/
    /*width: auto;*/
    /*}*/
    #partialWindowLeft {
        visibility: visible;
    }

    #partialWindow {
        visibility: visible;
    }

    #background-image {
        visibility: hidden;
    }
}

.HomeContentArticle {
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 24px;
    z-index: 4;
    background: transparent;
}

@media only screen and (max-width: 1024px) and (max-height: 1024px) {
    .HomeContentArticle {
        line-height: 13pt;
    }
}

.HomeContentHeader {
    font-family: "Trebuchet MS", serif;
    color: #FFFFFF;
}

/*Home Screen Animation*/

.HomeContentArticle section {
    position: absolute;
    opacity: 0;
    z-index: 4;
    width: 50%;
}

#First-odd, #Second-odd, #Third-odd, #Fourth-odd {
    left: -100%;
    top: 18%;
}

#Third-odd, #Fourth-odd, #Fifth-odd, #Sixth-odd, #Seventh-odd {
    top: 13%;
}

#First-even, #Second-even, #Third-even, #Fourth-even, #Fifth-even, #Sixth-even, #Seventh-even {
    left: -100%;
    top: 28%;
}

@media only screen and (max-width: 1024px) and (max-height: 1024px) {
    #First-odd, #Second-odd, #Third-odd, #Fourth-odd, #Fifth-odd, #Sixth-odd, #Seventh-odd {
        left: -100%;
        top: 21%;
    }

    #Third-odd, #Fourth-odd {
        top: 17%;
    }

    #First-even, #Second-even, #Third-even, #Fourth-even, #Fifth-even, #Sixth-even, #Seventh-even {
        top: 34%;
    }
}

.HomeContentArticle section h1 {
    font-family: "Trebuchet MS", "Sans-Serif", serif;
    line-height: 30pt;
    height: 60pt;
    font-weight: bolder;
    font-size: 260%;
    color: #EEC37D;
    z-index: 4;
    text-shadow: 0 6px 9px rgba(0, 0, 0, 0.9), 7px 11px 19px rgba(0, 0, 0, 0.5), 7px 21px 29px rgba(0, 0, 0, 0.5);
}

.HomeContentArticle section p {
    font-size: 16pt;
    height: 60pt;
    color: white;
    text-shadow: 3px 6px 15px rgba(0, 0, 0, 0.9), 3px 11px 24px rgba(0, 0, 0, 0.1), 3px 21px 38px rgba(0, 0, 0, 0.1);
}

@media only screen and (max-width: 1024px) and (max-height: 1024px) {
    #video-background {
        height: 100%;
        width: auto;
    }

    .HomeContentArticle section {
        width: 80%;
    }

    .HomeContentArticle section h1 {
        font-size: 18pt;
        line-height: 19pt;
        height: 38pt;
    }

    .HomeContentArticle section p {
        font-size: 12pt;
    }
}

.run-animation {
    -webkit-animation-name: slidein2;
    -moz-animation-name: slidein2;
    -o-animation-name: slidein2;
    animation-name: slidein2;
    -webkit-animation-duration: 15s;
    -moz-animation-duration: 15s;
    -o-animation-duration: 15s;
    animation-duration: 15s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    -o-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -moz-animation-direction: normal;
    -o-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

.run-animation-header {
    -webkit-animation-name: slidein1;
    -moz-animation-name: slidein1;
    -o-animation-name: slidein1;
    animation-name: slidein1;
    -webkit-animation-duration: 15s;
    -moz-animation-duration: 15s;
    -o-animation-duration: 15s;
    animation-duration: 15s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    -o-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -moz-animation-direction: normal;
    -o-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

@media only screen and (max-width: 1024px) and (max-height: 1024px) {
    .run-animation {
        -webkit-animation-name: slidein4;
        -moz-animation-name: slidein4;
        -o-animation-name: slidein4;
        animation-name: slidein4;
    }

    .run-animation-header {
        -webkit-animation-name: slidein3;
        -moz-animation-name: slidein3;
        -o-animation-name: slidein3;
        animation-name: slidein3;
    }
}

#Second-odd, #Second-even {
    -webkit-animation-delay: 15s;
    -moz-animation-delay: 15s;
    -o-animation-delay: 15s;
    animation-delay: 15s;
}

#Third-odd, #Third-even {
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    animation-delay: 30s;
}

#Fourth-odd, #Fourth-even {
    -webkit-animation-delay: 40s;
    -moz-animation-delay: 40s;
    -o-animation-delay: 40s;
    animation-delay: 40s;
}

#Fifth-odd, #Fifth-even {
    -webkit-animation-delay: 50s;
    -moz-animation-delay: 50s;
    -o-animation-delay: 50s;
    animation-delay: 50s;
}

#Sixth-odd, #Sixth-even {
    -webkit-animation-delay: 60s;
    -moz-animation-delay: 60s;
    -o-animation-delay: 60s;
    animation-delay: 60s;
}

#Seventh-odd, #Seventh-even {
    -webkit-animation-delay: 70s;
    -moz-animation-delay: 70s;
    -o-animation-delay: 70s;
    animation-delay: 70s;
}

@keyframes slidein3 {
    from {
        opacity: 0;
        left: -100%;
    }

    10% {
        opacity: 0;
        left: -100%;
    }

    15% {
        opacity: 1;
        left: 10%;
    }

    85% {
        opacity: 1;
        left: 10%;
    }

    90% {
        opacity: 0;
        left: -100%;
    }

    to {
        opacity: 0;
        left: -100%;
    }
}

@keyframes slidein4 {
    from {
        opacity: 0;
        left: 100%;
    }

    10% {
        opacity: 0;
        left: 100%;
    }

    15% {
        opacity: 1;
        left: 10%;
    }

    85% {
        opacity: 1;
        left: 10%;
    }

    90% {
        opacity: 0;
        left: 100%;
    }

    to {
        opacity: 0;
        left: 100%;
    }
}

@keyframes slidein1 {
    from {
        opacity: 0;
        left: -100%;
    }

    10% {
        opacity: 0;
        left: -100%;
    }

    15% {
        opacity: 1;
        left: 27%;
    }

    85% {
        opacity: 1;
        left: 27%;
    }

    90% {
        opacity: 0;
        left: -100%;
    }

    to {
        opacity: 0;
        left: -100%;
    }
}

@keyframes slidein2 {
    from {
        opacity: 0;
        left: 100%;
    }

    10% {
        opacity: 0;
        left: 100%;
    }

    15% {
        opacity: 1;
        left: 27%;
    }

    85% {
        opacity: 1;
        left: 27%;
    }

    90% {
        opacity: 0;
        left: 100%;
    }

    to {
        opacity: 0;
        left: 100%;
    }
}