@import url(https://fonts.googleapis.com/css?family=Raleway);

body {
    margin: 0px; 
    padding: 0px;
    font-size: 12.5px; 
    width: 100%; 
    height: 100%; 
    font-family: 'Raleway', sans-serif;
    vertical-align: baseline;
    background: #000;
}

html {
    width: 100%;
    height: 100%;
}

/*
 * General Effects for Links and Images
 */

a           { color: #fff; text-decoration: none; }
a:hover     { color: #fff; }
a img:hover { opacity: 0.7; filter: alpha(opacity=70); }

/*
 * Animation
 */

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

.txt { 
    padding: 9% 0px; 
    background: rgba(0,0,0,0); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0)); /* Standard syntax */
}

h1 {
	position: relative;
    text-align: center; 
    color: #fff; 
    font-size: 46px; 
    margin: 0; 
    margin-bottom: 20px;
}
h1:hover { cursor: pointer; }

h1 > span {
    position: absolute;
    margin: 49px 10px 0px -180px;
    font-size: 12px; 
}

.top { padding: 1%; top: 0; position: fixed; width: 100%; }
ol { margin-left: auto; margin-right: auto; display: table; list-style: none; color: #fff; margin-bottom: 0; margin-top: 0; padding: 0; }
ol li { float: left; position: relative; margin-right: 10px; margin-left: 10px; font-size: 18px; }
ol li span { position: absolute; left: 0; top: 20px; width: 100%; text-align: center; font-size: 12px; }
ol li a {
    -webkit-transition: font-size 0.5s; 
       -moz-transition: font-size 0.5s; 
         -o-transition: font-size 0.5s; 
            transition: font-size 0.5s; }
ol li a:hover { font-size: 21px; }

ul { list-style: none; padding: 0; margin: auto; display: table; position: relative; width: 150px; padding-left: 50px; }
ul div { position: absolute; margin: auto; }
ul li { border-bottom: 10px; }
ul li a { font-size: 23px;  display: block; margin-bottom: 5px; 
    -webkit-transition: margin-left 0.5s; 
       -moz-transition: margin-left 0.5s; 
         -o-transition: margin-left 0.5s; 
            transition: margin-left 0.5s; }
ul li a:hover { margin-left: 15px; }

.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
    animation-name: dropdown;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-fill-mode: backwards;
}

.fullscreen-bg__video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
}

ul.sidebar {
    position: fixed;
    right: 0;
    top: 0;
    text-align: right;
    width: 100%;
}

ul.sidebar li {
    float: right;
    margin: 10px;
}

.site-footer {
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    color: #fff;
    padding: 20px 0px;
    background: rgba(0,0,0,0); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(rgba(255,0,0,0), rgba(0,0,0,0.6)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(255,0,0,0), rgba(0,0,0,0.6)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(255,0,0,0), rgba(0,0,0,0.6)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgba(255,0,0,0), rgba(0,0,0,0.6)); /* Standard syntax */
}

.site-footer .info { 
    animation-name: dropdown; 
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-fill-mode: backwards; 
}

@media (max-width: 767px) {
    ol { margin-top: 20px; }
    ol li { font-size: 10px; }
    ol li span { top: 13px; font-size: 7px; }
    h1 { font-size: 36px; }
    h1 > span { margin: 37px 10px 0px -180px; font-size: 10px; }
    .txt { animation-delay: 0s; background: none; padding-top: 150px; }
    ul.sidebar { right: 0; margin-top: 100%;}
    ul.sidebar li { float: none; }
    ul.sidebar li a { font-size: 14px; }
    .site-footer { background: none; }
    .site-footer .info { display: none; }
}