﻿

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 100%;
    background-color:#f9f9f9;
    color: #666666;
    overflow: hidden;
}
.video-container {
    /*display: flex;
    position: relative;
    width: 100%;
    height:100%;*/
}
.header, .footer {
    position: fixed;
    display: flex;
    width: 100%;
    height: 64px;
    box-shadow: 0 0 5px #808080;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    background-color:#e9e9e9
}

.header-position {
    top: 0;
    left: 0;
}
.footer-position{
    bottom:0;
    left:0;
}

video {
    display: block;
    width: 100% !important;
    height:100% !important;
}

.cmd-skip-video{
    display:inline-block;
    position:absolute;
    left:144px;
    top:72px;
    text-decoration:none;
    font-weight:bold;
    padding:20px;
    color:white!important;
    z-index:2;
    width:100px;
    text-align:center;
    box-shadow:0 0 5px hsl(238,50%,50%);
    background-color:#182746;
    opacity:1;
}


/*Animation*/
.hide-video-view {
    visibility: hidden;
    transition: all 5s
}

.hide{
    opacity:0;
    transition:all 5s;
}

.fade-in {
    animation: fadeIn ease 5s;
    -webkit-animation: fadeIn ease 5s;
    -moz-animation: fadeIn ease 5s;
    -o-animation: fadeIn ease 5s;
}


@media screen and (min-width: 0px) and (max-width: 415px) {
    .showVersionInFooter {
        display: none;
    }
    /* hide it on smaller screen */
}

@media screen and (min-width: 416px) and (max-width: 1024px) {
    .showVersionInFooter {
        display: block;
    }
    /* show it on larger screens */
}
.website-maintenance-banner {
    display: none;
    position: fixed;
    width: 100%;
    height: 5vh;
    text-align: center;
    margin-top: 64px;
    background-color: #ffab00;
    overflow: visible;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
    font-size: 14px;
    z-index: 2000;
}
.website-maintenance-banner-span {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
    font-size: 14px;
    font-weight: 500;
}



.fade-out {
    -webkit-animation: fadeOut ease 5s;
    -moz-animation: fadeOut ease 5s;
    -o-animation: fadeOut ease 5s;
    animation: fadeOut ease 5s;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    animation-delay: 1s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        visibility: visible;
    }

    50% {
        opacity: 0.5;
        visibility:  visible;
        z-index: -1;
    }


    75% {
        opacity: 0.3;
        visibility: visible;
        z-index: -1;
    }


    100% {
        opacity: 0;
        visibility: hidden;
        z-index: -1;
    }
}

.mfs-copy-right-label {
    display: block;
    font-size: small;
    padding-left: 60px;
}