html, body {
    font-family: Helvetica, Verdana, Arial, sans-serif;
 
    background-repeat: repeat-x;
    background-color: #333333;
    color: black;
    text-align: center;
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}

a:link, a:visited {
    color: #000;
}

a:active, a:hover {
    color: #666;
}

p.header {
    font-size: small;
}

    p.header span {
        font-weight: bold;
    }

p.footer {
    font-size: x-small;
}






#topBannerBackground {
    background: rgba(0, 0, 0, 0) url("logo.png") no-repeat;
    height: 90px;

    position: relative;


   
}

 #menuIcons > ul {
        list-style-type: none;
        margin-right:  25px; 
        margin-top:   5px;    
        margin-bottom: 0px;   
        padding: 0;
        color: white;
    }

        #menuIcons > ul > li{
            display: inline;
        }


#menuIconsFooter > ul {
        list-style-type: none;
        margin-right:  25px; 
        margin-top:   5px;    
        margin-bottom: 0px;   
        padding: 0;
        color: white;
    }

        #menuIconsFooter > ul > li{
            display: inline;
        }





.topBannerButton {
    height: 40px;
    margin-right:  10px;   
    padding: 0; 
}


.topBannerButton:hover {
   transform: translateY(-5px);
}

.h2play {
   color: white;
   margin:  0px; 
   margin-top:   15px;   
}









div#content {
    width: 100%;
    margin: auto;
    position: relative;
 /*   background-color:yellow; */
}

div#unityBox {
    margin: auto;
  /*  width: 80%;*/
   
/* 450+10   600+10*/
    min-width: 460px;      
    max-width: 460px; 

    min-height: 610px;
    max-height: 610px;
    
  /*  padding-bottom: 56.4583333%; /* maintain 1.77 ratio */
   

    position: relative;

    border-radius: 10px;
    background-color: white;
  /*  background-color: red; */

}

#canvas {
    width: 98%;
    margin: 5px;
    
    min-height: 600px;
    max-height: 600px;

    background: rgba(0, 0, 0, 0) url("./loader.png") no-repeat;
    background-size: 100% 100%;
}




/*


div#unityPlayer {
    text-align: center;
    cursor: default;
    height: 100%;
    min-height: 100%;
    margin: auto;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}




#unityWebGlConainer {
    width: 100%;
    height: 100%;
    position: relative;
}


.flashtab {
    height: 600px;
    min-height: 600px;
    min-width: 760px;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}



.black_overlay {
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: white;
    background-image: url("");
    background-size: contain;
    z-index: 1001;
    -moz-opacity: 0.8;
    opacity: .80;
    filter: alpha(opacity=80);
}


#unityiFrame {
    width: 100%;
    height: 100%;
}

div.broken,
div.missing {
    margin: auto;
    position: relative;
    width: 100%;
    z-index: 30;
}

    div.broken a,
    div.missing a {
        height: 100%;
        width: 100%;
        position: relative;
        top: -50%;
    }

    div.broken img,
    div.missing img {
        border-width: 0px;
    }

div.broken {
    display: none;
}

*/




/* pie */


#buckHeader {
    width: 85%;
    height: 20px;
    margin: 10px auto;
}

.fb-like {
    float: left;
}

#menuIcons {
    float: none;
}

#buckFooter {
  /*  width: 100%;
    margin: 10px 0px;
*/
 /*   float: right;
    margin-right: 50px;
*/
}

    #buckFooter > ul, #buckHeader > div > ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        color: gray;
    }

        #buckFooter > ul > li, #buckHeader > div > ul > li {
            display: inline;
        }

            #buckFooter > ul > li::after, #buckHeader > div > ul > li::after {
                content: "|";
                padding: 0px 20px;
            }

            #buckFooter > ul > li:last-child::after, #buckHeader > div > ul > li:last-child::after {
                content: "";
                padding: 0px 0px;
            }

            #buckFooter > ul > li > a, #buckHeader > div > ul > li > a {
                color: gray;
                text-decoration: none;
                font-size: 0.5em;
            }

                #buckFooter > ul > li > a:hover, #buckHeader > div > ul > li > a:hover {
                    text-decoration: underline;
                }










/*
@media screen and (max-width: 708px), only screen and (max-device-width: 708px) {
    #buckHeader {
        width: 100%;
        height: 40px;
        margin: 10px auto;
    }

    .fb-like {
        float: none;
        text-align: center;
    }

    #menuIcons {
        float: none;
    }
}
*/
div#preloader {
    position: absolute;
    left: -9999px;
    top: -9999px;
}


#fader {
    width: 100%;
    height: 100%;
    background-color: black;
    position: relative;
}

#fader-frames {
    list-style: none;
    position: relative;
    width: 100%;
    height: 100%;
}

#blackbackdrop {
    width: 100%;
    height: 100%;
    background-color: black;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 4;
    animation-name: fade-out;
    animation-duration: 35s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    background-size: 100% 100%;
    opacity: 1.0;
    visibility: hidden;
}

#fader-board-one {
    width: 100%;
    height: 100%;
    background-image: url(SplashScreen1.jpg);
    background-size: cover;
    position: absolute;
    top: 0px;
    left: 0px;
    animation-name: billboard-swap;
    animation-duration: 28s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    background-size: 100% 100%;
    z-index: 5;
    opacity: 0.0;
}

#fader-board-two {
    width: 100%;
    height: 100%;
    background-image: url(SplashScreen2.jpg);
    background-size: cover;
    position: absolute;
    top: 0px;
    left: 0px;
    animation-name: billboard-swap;
    animation-duration: 28s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-delay: 7s;
    background-size: 100% 100%;
    z-index: 10;
    opacity: 0.0;
}

#fader-board-three {
    width: 100%;
    height: 100%;
    background-image: url(SplashScreen3.jpg);
    background-size: cover;
    position: absolute;
    top: 0px;
    left: 0px;
    animation-name: billboard-swap;
    animation-duration: 28s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-delay: 14s;
    background-size: 100% 100%;
    z-index: 15;
    opacity: 0.0;
}

#fader-board-four {
    width: 100%;
    height: 100%;
    background-image: url(SplashScreen_R5.jpg);
    background-size: cover;
    position: absolute;
    top: 0px;
    left: 0px;
    animation-name: billboard-swap;
    animation-duration: 28s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-delay: 21s;
    background-size: 100% 100%;
    z-index: 20;
    opacity: 0.0;
}

@keyframes billboard-swap {
    0% {
        opacity: 0;
        animation-timing-function: ease-in;
    }

    8% {
        opacity: 1;
        animation-timing-function: ease-out;
    }

    17% {
        opacity: 1;
    }

    25% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}
@keyframes fade-out {
    0% {
        opacity: 1;
        animation-timing-function: ease-in;
        visibility: visible;
    }

    80% {
        opacity: 1;
        animation-timing-function: ease-out;
        visibility: visible;
    }

    100% {
        opacity: 0;
        animation-timing-function: ease-out;
        visibility: hidden;
    }
}