@charset "UTF-8";

html, body {
    margin: 0px;
    margin-top: 0px;
    padding: 0px;
    color: white;
    font: 200 1em/1.25em 'Lato', sans-serif;
    overflow-x: hidden;
}


/*#LeftAdsenseDivPanel
{
    height: 96px;
    width: 9px;
}*/

::-webkit-scrollbar-thumb {
    background: -webkit-linear-gradient(left top, #334, #445); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, #334, #445); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, #334, #445); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, #334, #445); /* Standard syntax */
    /*background-color: rgba(234, 234, 234, 0.66) !important;*/
    border-radius: 3px !important;
    -webkit-box-shadow: inset 0 0 3px rgba(0,0,110,0.34) !important;
}

::-webkit-scrollbar-button {
    background-color: rgba(234, 234, 234, 0.34) !important;
}

::-webkit-scrollbar-corner {
    background-color: white !important;
}

::-webkit-scrollbar {
    background-color: rgba(0,0,0,.34) !important;
    height: 12px !important;
    width: 12px !important;
}

::-webkit-scrollbar-track {
    background-color: rgba(34,34,34,.34) !important;
    -webkit-box-shadow: inset 0 0 3px rgba(34,34,34,0.34) !important;
    border-radius: 3px !important;
}

::-webkit-scrollbar-track-piece {
    background-color: rgba(34,34,34,.34) !important;
    -webkit-box-shadow: inset 0 0 3px rgba(34,34,34,0.34) !important;
    border-radius: 3px !important;
}

::-webkit-resizer {
    background-color: rgba(0,0,0,.3) !important;
    -webkit-box-shadow: inset 0 0 3px rgba(0,0,34,0.34) !important;
    border-radius: 3px !important;
}

/**
{
    transition: all 1000ms ease-out;
    -webkit-transition: all 1000ms ease-out;
    -moz-transition: all 1000ms ease-out;
    -o-transition: all 1000ms ease-out;
}*/

a, a:visited, a:hover, a:active {
    color: white;
}

.vjs-default-skin .vjs-default-skin .vjs-control-bar {
    color: white;
}

.vjs-default-skin .vjs-control-bar {
    color: white;
}

.vjs-play-progress, .vjs-volume-level {
    background-color: #000000;
}

.vjs-control-bar, .vjs-big-play-button {
    background: rgba(0,0,0,0.7) !important;
}

.vjs-slider {
    background: white;
}

.vjs-control-bar {
    font-size: 175%;
}

.vjs-default-skin .vjs-play-progress,
.vjs-default-skin .vjs-volume-level {
    background-color: silver;
}
/*.vjs-default-skin .vjs-control-bar { font-size: 200% }*/

p {
    margin-bottom: 10px;
    font: 1em/1.5em 'Lato';
    line-height: 1.6em;
}

h1 {
    color: silver;
    font: 1em/1.5em 'Lato';
    line-height: 2em;
    font-size: x-large;
}

.btn {
    filter: drop-shadow(3px 3px 3px black);
}

.ButtonDiv {
    /*animation: sharebuttoncolor 9s infinite !important;*/
    /*border: 2px silver solid;*/
    border-radius: 2px;
    margin: 6px;
    background: transparent !important;
    /*background: rgb(18,34,66);*/
    display: block;
    width: 66px;
    filter: drop-shadow(1px 1px 3px black);
    /*box-shadow: black 6px 6px;*/
}



    .ButtonDiv:hover {
        padding: 3px;
        background: rgba(255,255,255,.34);
        /*border: 2px white solid;*/
        transform: matrix3d();
    }

.buttontext {
    text-shadow: 2px 2px black;
    font-size: 1.66vh;
    margin-top: -1.34vh;
    margin: auto;
    text-align: center;
    display: block;
}

.MobileNavigateImageStyle {
    -webkit-animation: MobileNavigateButtonRotate 20s infinite !important; /* Chrome, Safari, Opera */
    animation: MobileNavigateButtonRotate 20s infinite !important;
    filter: drop-shadow(9px 9px 9px black);
    height: 13.4vh;
    width: 13.4vw;
}

.MobileNavigateButtonBackground {
    filter: drop-shadow(9px 9px 9px black);
    background: rgba(0,0,0,.01);
    width: 18vw;
    height: 18vw;
    padding: 0;
    position: absolute;
    right: 0;
    top: 3.4vh;
    opacity: 1 !important;
    pointer-events: all;
    z-index: 99999;
    -webkit-animation: MobileNavigateButtonBackgroundFade 20s infinite !important; /* Chrome, Safari, Opera */
    animation: MobileNavigateButtonBackgroundFade 20s infinite !important;
}

@keyframes MobileNavigateButtonBackgroundFade {
    0% {
        opacity: 1;
    }

    10% {
        opacity: .88;
        transform: scale(1.34);
    }

    49% {
        opacity: 1;
        transform: scale(1);
    }

    60% {
        opacity: .88;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes MobileNavigateButtonBackgroundFade {
    0% {
        opacity: 1;
    }

    10% {
        opacity: .88;
        transform: scale(1.34);
    }

    49% {
        opacity: 1;
        transform: scale(1);
    }

    60% {
        opacity: .88;
    }

    100% {
        opacity: 1;
    }
}


@keyframes MobileNavigateButtonRotate {
    0% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(360deg);
    }

    49% {
        transform: rotate(360deg);
    }


    60% {
        transform: rotate(0deg);
    }

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

@-webkit-keyframes MobileNavigateButtonRotate {
    0% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(360deg);
    }

    49% {
        transform: rotate(360deg);
    }


    60% {
        transform: rotate(0deg);
    }

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

.larger {
    -ms-transform: scale(1.18,1.18); /* IE 9 */
    -webkit-transform: scale(1.18,1.18); /* Safari */
    transform: scale(1.18,1.18);
    z-index: 999;
    margin: 18px;
}

.NavigateButton {
    padding: 0 !important;
    height: 53px;
    width: 53px;
    margin: 3px;
    z-index: 10000;
    background: transparent !important;
    background-color: transparent !important;
    -webkit-animation: sharebuttonrotate 9s infinite !important; /* Chrome, Safari, Opera */
    /*animation: sharebuttonrotate 9s infinite !important;*/
}


.ShareButton {
    padding: 0 !important;
    height: 53px;
    width: 53px;
    margin: 3px;
    z-index: 10000;
    background-color: transparent !important;
    -webkit-animation: sharebuttonrotate 12s infinite !important; /* Chrome, Safari, Opera */
    animation: sharebuttonrotate 12s infinite !important;
}

.SubscribeButton {
    padding: 0 !important;
    height: 53px;
    width: 53px;
    margin: 3px;
    z-index: 10000;
    background-color: transparent !important;
    -webkit-animation: sharebuttonrotate 18s infinite !important; /* Chrome, Safari, Opera */
    animation: sharebuttonrotate 18s infinite !important;
}



@keyframes sharebuttonrotate {
    0% {
        transform: rotate(0deg)scale(0.7);
    }

    40% {
        transform: rotate(0deg)scale(0.7);
    }

    75% {
        transform: rotate(360deg)scale(0.66);
    }

    100% {
        transform: rotate(360deg) scale(0.7);
    }
}

@-webkit-keyframes sharebuttonrotate {
    0% {
        -webkit-transform: rotate(0deg)scale(0.7);
    }

    40% {
        -webkit-transform: rotate(0deg)scale(0.7);
    }

    75% {
        -webkit-transform: rotate(360deg)scale(0.66);
    }

    100% {
        -webkit-transform: rotate(360deg) scale(0.7);
    }
}

@-webkit-keyframes sharebuttoncolor {
    0% {
        background: #345;
    }

    40% {
        background: #345;
    }

    75% {
        background: navy;
    }

    100% {
        background: #345;
    }
}

@keyframes sharebuttoncolor {
    0% {
        background: #345;
    }

    40% {
        background: #345;
    }

    75% {
        background: navy;
    }

    100% {
        background: #345;
    }
}

#LeftAdDiv, #RightAdDiv {
    display: block;
    height: 600px;
    width: 120px;
    background: rgba(0,0,0,0);
}


#BottomAdDiv {
    height: 90px;
    width: 728px;
    margin: auto;
    background: rgba(0,0,0,0);
}


.TagText {
    margin-top: 18px;
    margin-bottom: 18px;
    font-style: italic;
    font-size: 1.3em;
    display: block !important;
}

.vjs-fade-in, .vjs-fade-out {
    visibility: visible !important;
    opacity: 1 !important;
    -moz-transition-duration: 0s !important;
    -o-transition-duration: 0s !important;
    -webkit-transition-duration: 0s !important;
    transition-duration: 1s !important;
}

.StatusPanelStyle {
    position: absolute;
    background-color: rgba(0,0,0,.66);
    pointer-events: none;
}

.StatusMessageStyle {
    /*width: 100%;*/
    font-size: 18px;
    color: lime;
    text-align: center;
    margin: auto;
    pointer-events: none;
    position: absolute;
    top: 34vh;
    width: 100%;
    left: 0;
    z-index: 99999;
}


.StatusMessageStyleOld {
    position: absolute !important;
    top: 64px;
    left: 100px;
    width: 100%;
    font-size: 18px;
    color: lime;
    text-shadow: 1px 2px 3px #666;
    text-align: left;
    margin: auto;
    pointer-events: none;
}

.PlayAgainStyle {
    border: none;
    background-color: black;
    color: silver;
    vertical-align: central;
    font-size: 20px;
}


#HeaderContainerDiv {
    display: inline-block;
}

#txtFrom {
    margin-top: 10px;
    font-size: 8vh;
}

#txtSubject {
    margin-top: 15px;
    font-weight: 100;
    font-size: 8vh;
    margin-bottom: 15px;
}

@keyframes fader {
    0% {
        opacity: .7;
        margin-top: 20px;
        background: black;
    }

    25% {
        opacity: .5;
        background: white;
    }

    50% {
        margin-top: 0px;
        opacity: .25;
        background: blue;
    }

    75% {
        margin-top: 30px;
        opacity: .7;
        background: white;
    }

    100% {
        margin-top: 0px;
        opacity: .5;
        background: navy;
    }
}

@-webkit-keyframes fader /* Safari & Chrome */
{
    0% {
        opacity: .7;
        margin-top: 20px;
        background: navy;
    }

    10% {
        opacity: .7;
        margin-top: 20px;
        background: aliceblue;
    }

    25% {
        opacity: .5;
        background: slateblue;
    }

    35% {
        opacity: .5;
        background: deepskyblue;
    }

    50% {
        margin-top: 0px;
        opacity: .5;
        background: blueviolet;
    }

    60% {
        margin-top: 0px;
        opacity: .5;
        background: lightblue;
    }

    75% {
        margin-top: 30px;
        opacity: .7;
        background: navy;
    }

    85% {
        margin-top: 30px;
        opacity: .7;
        background: black;
    }

    100% {
        margin-top: 0px;
        opacity: .5;
        background: white;
    }
}

#SharePointer img.xxx1 {
    animation-name: fader;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 3s;
    -webkit-animation: fader; /* Safari and Chrome */
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 3s;
}

#SharePointer img.xxx2 {
    animation-name: fader;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    -webkit-animation: fader; /* Safari and Chrome */
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 2s;
}

#SharePointer img.xxx3 {
    animation-name: fader;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    -webkit-animation: fader; /* Safari and Chrome */
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 1s;
}

#SharePointer img:hover {
    opacity: 0;
}


@keyframes inout {
    0% {
        transform: scale(0, 0);
    }

    25% {
        transform: scale(.7, 1.1);
    }

    50% {
        transform: scale(1.1,.9);
    }

    100% {
        transform: scale(1, 1);
    }
}

@-webkit-keyframes inout { /* Safari & Chrome */
    0% {
        -webkit-transform: scale(0, 0);
    }

    25% {
        -webkit-transform: scale(.7, 1.1);
    }

    50% {
        -webkit-transform: scale(1.1, .9);
    }

    100% {
        -webkit-transform: scale(1, 1);
    }
}
/*#LoadingDiv
{
	width: 100%;
	overflow: hidden;
	visibility: visible;
    display:block;
	position: absolute;
	top: 150px;
	left: 0px;
	background: rgba(0, 0, 0, 0.3);
}*/
.LoadingDivThumbnail {
    position: absolute;
    top: 150px;
    left: 0;
    /*height: 100%;
	width: 100%;*/
    opacity: .5;
}

.LoadingDivText {
    width: 100%;
    background: rgba(0,0,0,.34);
    text-align: center;
    font-size: 34px;
    color: white;
    text-shadow: 4px 3px 2px #234;
}

videojs {
    width: 100% !important;
    height: 100% !important;
}

video {
    width: 100% !important;
    height: 100% !important;
}

.GeneratedCodeStyle {
    background-color: transparent;
}

.OverlayPosition {
    position: absolute;
    top: 100px;
    height: 100%;
    margin: auto;
}

.ImageStyle {
    height: 88%;
    margin: auto;
}

.LoadingImageContainer {
    position: relative;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    max-height: 100%;
}

.LoadingImage {
    opacity: 88;
    width: 88%;
    height: auto;
    max-height: 88%;
}

.LoadingAnimationImage {
    position: relative;
    top: 24vh;
    margin: auto;
    height: 6vw !important;
    width: 6vw !important;
    opacity: .66;
}

.OverlayText {
    position: relative;
    top: -340px;
    font-size: 34px;
    text-shadow: 2px 3px 4px #234;
}

.GeneratedPlayerStyle {
    /* width: 95vw !important; */
    /* height: 95vh !important; */
    min-width: 300px;
    min-height: 200px;
    -webkit-transform-style: preserve-3d;
    z-index: 0;
    margin: auto;
    text-align: center;
}

.BigThumbnailStyle {
    /* position: relative; */
    /* top: 50px; */
    left: 0px;
    background: rgb(0, 0, 0) transparent;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0.6;
}

.SemiTransparent {
    top: 0px;
    left: 0px;
    background: rgb(0, 0, 0) transparent;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0.6; /* Fallback for web browsers that doesn't support RGBa */ /* RGBa with 0.6 opacity */
}

.ShareTopPanelStyle {
    height: 75px !important;
    width: 100%;
    background-color: transparent;
    -webkit-transform-style: preserve-3d;
    z-index: 50;
}


.ShareRespondStyle {
    overflow: none;
    /* must change in script when neeeded*/
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10000;
    margin: auto !important;
    background: rgb(255, 255, 255) transparent;
    background: rgba(0, 0, 0, 0.34);
    font-size: 1em;
    border-radius: 3px 4px;
    /*border: white 2px solid  !important;*/
    /* http://gradients.glrzad.com */
    background: rgba(0,0,0,.34);
    animation: inout 1s;
    animation-iteration-count: 1;
    -webkit-animation: inout 1s; /* Safari & Chrome */
    -webkit-animation-iteration-count: 1;
    margin: auto;
}

#BottomPanelDiv {
    /*background-color: orange;*/
}

.PlayerStyle {
    /*width: 100vw !important;
    height: 60vw !important; /* basing height on width of viewport */
    /*max-height: 90vh !important;
    height: 100vh !important;
    display: -webkit-flex;
    -webkit-flex-flow: row wrap;
    -webkit-align-content: center;
    display: flex;
    flex-flow: row wrap;
    align-content: space-around;
    align-content: center;
    text-align: center;*/
}

.LinksStyle {
    color: white;
    font-size: 18px;
    text-decoration: underline;
    margin: 10px;
}

.ShareIFrameStyle {
    border: 0px;
    visibility: collapse;
    background-color: transparent;
    position: relative;
    height: 100%;
    width: 100%;
    -webkit-transform-style: preserve-3d;
    z-index: 1000;
}

.PlaylistStyle {
    z-index: 4;
    margin: auto !important;
    width: 900px;
    height: 150px;
    vertical-align: bottom;
}

table {
    margin-left: 0px;
    border-spacing: 0px;
    border-collapse: collapse;
    margin: auto;
    border-style: none;
    border-color: inherit;
    /* text-align: right;  /*border-width: 1px;*/
}

td {
    padding: 0;
}

.MobileSubjectText {
    font-size: larger;
}

.MobileTagText {
    color: yellow;
}


.dateText {
    overflow: hidden;
    max-width: 300px;
    color: silver;
    vertical-align: bottom;
    text-align: left;
}

.headerTextContainer {
    margin: 10px;
    vertical-align: bottom;
}



.NormalMiddleDivStyle {
    border-color: rgba(0, 0, 0, 0);
    background-color: transparent;
    text-align: center;
    filter: drop-shadow(18px 18px 18px black);
    /* margin: auto; */
}

.HightlightMiddleDivStyle {
    border-color: rgba(0, 0, 0, 0);
    /*    background-color: rgba(0,0,0,.18);*/
    text-align: center;
    filter: drop-shadow(1px 18px 34px white);
    /* border: solid; */
    /* border-width: 4px 4px 4px 4px; */
    /* background: black;*/
    /*background: rgba(0, 0, 0, 0.1);*/
    /* border-color: transparent; */
    /* text-align: center; */
    /* color: black; */
    /* text-shadow: 3px 3px 0px rgba(255,255,255,0.6); */
}

#HeaderDiv {
    clear: none;
    float: left;
    margin-left: 2%;
    width: 70%;
    display: block;
}

#ButtonsPanelDiv {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}

.BottomAdDiv {
}

/*.LeftAdDiv, .RightAdDiv
{
    max-width: 150px;
    background-color: navy;
}*/

.TopPanelStyle {
    height: 100px;
    padding: 6px;
    z-index: 1;
}

.OverlayVideo {
    visibility: hidden;
    margin: auto;
}

.OverlayVideoDivStyle {
    width: 600px;
    padding: 0px;
    position: relative;
    top: -400px;
    margin: auto;
    /*position: absolute;*/
    visibility: hidden;
    border: 0px solid silver;
    background-color: transparent;
    z-index: 1000;
    animation-name: growframes;
    animation-timing-function: ease-in-out;
    animation-iteration-count: initial;
    animation-duration: 7s;
    animation-delay: 5s;
    -webkit-animation: growframes; /* Safari and Chrome */
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: initial;
    -webkit-animation-duration: 7s;
    -webkit-animation-delay: 5s;
}

#PlaylistFinishedPanel {
    /* position: relative; */
    /* top: -400px; */
    /* margin: auto; */
}

#DisplayDiv {
    background-color: rgba(0, 0, 0,.9);
    opacity: 0.5;
    position: absolute;
    top: 50px;
    left: 10px;
    z-index: 10000;
}

#ResolutionLayoutDiv1, #ResolutionLayoutDiv2, #ResolutionLayoutDiv3, #ResolutionLayoutDiv4, #ResolutionLayoutDiv5, #ResolutionLayoutDiv6 {
    z-index: 2;
    visibility: collapse;
    margin: 1px;
    display: none;
}

.BottomAdDiv {
    display: block;
    padding: 1px 3px;
    z-index: 100;
    opacity: 1;
    margin: auto;
    height: 90px;
    width: 734px;
}

.LeftAdDiv, .RightAdDiv {
    position: absolute;
    /*background-color: rgba(0,0,0,0);
    padding: 1px 3px;
    z-index: 100;
    border: groove;
    border-color: blue;
    border-width: 0px;
    opacity: 1;*/
}

    .LeftAdDiv:hover {
        filter: drop-shadow(-9px 9px 9px silver);
    }



    .RightAdDiv:hover {
        filter: drop-shadow(9px 9px 9px silver);
    }



#BottomPanelDiv {
    margin: auto;
}



@keyframes dropdownandslideup {
    0% {
        transform: scale(1, 1);
        transform: translateY(0);
    }


    10% {
        transform: scale(1, 1);
        transform: translateY(0);
        visibility: visible;
    }


    25% {
        transform: scale(1, 0);
        transform: translateY(-200px);
        visibility: collapse;
    }

    85% {
        transform: scale(1, 0);
        transform: translateY(-200px);
        visibility: visible;
    }

    100% {
        transform: scale(1, 1);
        transform: translateY(0);
    }
}

@-webkit-keyframes dropdownandslideup { /* Safari & Chrome */
    0% {
        -webkit-transform: scale(1, 1);
        -webkit-transform: translateY(0);
    }


    10% {
        -webkit-transform: scale(1, 1);
        -webkit-transform: translateY(0);
        visibility: visible;
    }


    25% {
        -webkit-transform: scale(1, 0);
        -webkit-transform: translateY(-200px);
        visibility: collapse;
    }

    85% {
        -webkit-transform: scale(1, 0);
        -webkit-transform: translateY(-200px);
        visibility: visible;
    }

    100% {
        -webkit-transform: scale(1, 1);
        -webkit-transform: translateY(0);
    }
}

@keyframes dropdownandslidedown {
    0% {
        transform: scale(1, 1);
        transform: translateY(0);
    }


    10% {
        transform: scale(1, 0);
        transform: translateY(0);
        visibility: visible;
    }


    25% {
        transform: scale(1, 0);
        transform: translateY(200px);
        visibility: collapse;
    }

    85% {
        transform: scale(1, 1);
        transform: translateY(200px);
        visibility: visible;
    }

    100% {
        transform: scale(1, 1);
        transform: translateY(0);
    }
}

@-webkit-keyframes dropdownandslidedown { /* Safari & Chrome */
    0% {
        -webkit-transform: scale(1, 1);
        -webkit-transform: translateY(0);
    }


    10% {
        -webkit-transform: scale(1, 0);
        -webkit-transform: translateY(0);
        visibility: visible;
    }


    25% {
        -webkit-transform: scale(1, 0);
        -webkit-transform: translateY(200px);
        visibility: collapse;
    }

    85% {
        -webkit-transform: scale(1, 1);
        -webkit-transform: translateY(200px);
        visibility: visible;
    }

    100% {
        -webkit-transform: scale(1, 1);
        -webkit-transform: translateY(0);
    }
}


.AlternateDropDown1 {
    margin-top: 0px;
    height: 100px;
    transform-origin: top right;
    animation-name: dropdownandslideup !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    animation-duration: 20s !important;
    animation-delay: 0s !important;
    animation-fill-mode: forwards !important;
    -webkit-animation: dropdownandslideup !important; /* Safari and Chrome */
    -webkit-animation-timing-function: ease-in-out !important;
    -webkit-animation-iteration-count: infinite !important;
    -webkit-animation-duration: 20s !important;
    -webkit-animation-delay: 0s !important;
    -webkit-animation-fill-mode: forwards !important;
    -moz-animation-fill-mode: forwards !important;
}

.AlternateDropDown2 {
    margin-top: -100px;
    height: 100px;
    transform-origin: top right;
    animation-name: dropdownandslideup !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    animation-duration: 20s !important;
    animation-delay: 10s !important;
    animation-fill-mode: forwards !important;
    -webkit-animation: dropdownandslideup !important; /* Safari and Chrome */
    -webkit-animation-timing-function: ease-in-out !important;
    -webkit-animation-iteration-count: infinite !important;
    -webkit-animation-duration: 20s !important;
    -webkit-animation-delay: 10s !important;
    -webkit-animation-fill-mode: forwards !important;
    -moz-animation-fill-mode: forwards !important;
}


.PeriodicallyDropDown {
    background-color: rgba(0,0,0,.75);
    transform-origin: top right;
    padding: 25px;
    animation-name: dropdownandslideup !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    animation-duration: 30s !important;
    animation-delay: 5s !important;
    animation-fill-mode: forwards !important;
    -webkit-animation: dropdownandslideup !important; /* Safari and Chrome */
    -webkit-animation-timing-function: ease-in-out !important;
    -webkit-animation-iteration-count: infinite !important;
    -webkit-animation-duration: 30s !important;
    -webkit-animation-delay: 5s !important;
    -webkit-animation-fill-mode: forwards !important;
    -moz-animation-fill-mode: forwards !important;
}

.SlideUpAndHide {
    transform-origin: top right;
    animation-name: slideup;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-duration: 1s;
    animation-delay: 4s;
    animation-fill-mode: forwards;
    -webkit-animation: slideup; /* Safari and Chrome */
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 4s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
}

@-webkit-keyframes MobileTopPanelStartAnimation { /* Safari & Chrome */
    0% {
        -webkit-transform: scale(1, 1);
    }


    50% {
        -webkit-transform: scale(1.1, 1.1);
        visibility: visible;
    }


    100% {
        -webkit-transform: scale(.9, .9);
        visibility: collapse;
    }
}

.MobileTopPanelStartAnimation {
    animation-name: MobileTopPanelStartAnimation !important;
    animation-iteration-count: 1 !important;
    animation-duration: 2s !important;
    animation-delay: 30s !important;
    animation-fill-mode: forwards !important;
    -webkit-animation: MobileTopPanelStartAnimation !important; /* Safari and Chrome */
    -webkit-animation-iteration-count: 1 !important;
    -webkit-animation-duration: 2s !important;
    -webkit-animation-delay: 30s !important;
    -webkit-animation-fill-mode: forwards !important;
}



@-webkit-keyframes MobileYoutubeInfoAnimation { /* Safari & Chrome */
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        visibility: visible;
        background: rgba(0,0,0,0);
    }

    5% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        background: rgba(0,0,0,.88);
    }

    80% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        visibility: visible;
        background: rgba(0,0,0,.88);
    }

    100% {
        -webkit-transform: perspective(400px) rotateX(-270deg);
        visibility: collapse;
        background: rgba(0,0,0,0);
    }
}

.MobileYoutubeInfo {
    visibility: visible !important;
    animation-name: MobileYoutubeInfoAnimation !important;
    animation-iteration-count: infinite !important;
    animation-duration: 34s !important;
    animation-fill-mode: forwards !important;
    -webkit-animation: MobileYoutubeInfoAnimation !important; /* Safari and Chrome */
    -webkit-animation-iteration-count: infinite !important;
    -webkit-animation-duration: 34s !important;
    -webkit-animation-fill-mode: forwards !important;
}

@-webkit-keyframes MobileTopPanelStartAnimation { /* Safari & Chrome */
    0% {
        -webkit-transform: scale(1, 1);
        background: rgba(0,0,0,0);
    }


    50% {
        -webkit-transform: scale(1.1, 1.1);
        visibility: visible;
        background: rgba(0,0,0,.34);
    }


    100% {
        -webkit-transform: scale(.9, .9);
        background: rgba(0,0,0,1);
        visibility: collapse;
    }
}




.MobileTopPanelStartAnimation {
    animation-name: dropdownandslidedown !important;
    animation-iteration-count: 1 !important;
    animation-duration: 2s !important;
    animation-delay: 18s !important;
    animation-fill-mode: forwards !important;
    -webkit-animation: dropdownandslidedown !important; /* Safari and Chrome */
    -webkit-animation-iteration-count: 1 !important;
    -webkit-animation-duration: 2s !important;
    -webkit-animation-delay: 18s !important;
    -webkit-animation-fill-mode: forwards !important;
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}

@-webkit-keyframes MobileShareInfoAnimation { /* Safari & Chrome */
    0% {
        -webkit-transform: scale(1);
        opacity: 1;
    }


    16% {
        -webkit-transform: scale(.88);
        opacity: .66;
    }

    18% {
        -webkit-transform: scale(.66,0);
        opacity: .34
    }

    20% {
        -webkit-transform: scale(1,0);
        opacity: 0;
        display: none;
    }



    88% {
        opacity: 0;
        display: block;
    }

    100% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}


.MobileShareInfo {
    animation-name: MobileShareInfoAnimation !important;
    animation-iteration-count: infinite !important;
    animation-duration: 60s !important;
    animation-fill-mode: forwards !important;
    -webkit-animation: MobileShareInfoAnimation !important; /* Safari and Chrome */
    -webkit-animation-iteration-count: infinite !important;
    -webkit-animation-duration: 34s !important;
    -webkit-animation-fill-mode: forwards !important;
    /*border-radius: 2vw 2vh;*/
    filter: drop-shadow(18px 18px 18px #183488);
    border: 1vh 1vw white solid;
    margin: 2vw 2vh;
    pointer-events: none;
    color: black;
}

.HiddenHeader {
    visibility: hidden;
}

.FullTimeHeader {
    /*IE*/
    animation-name: fulltime;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 20s;
    /* Safari and Chrome */
    -webkit-animation: fulltime;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 20s;
}

@-webkit-keyframes fulltime {
    0% {
        transform: scale(0, 0);
    }

    25% {
        transform: scale(.7, 1.1);
    }

    50% {
        transform: scale(1.1,.9);
    }

    100% {
        transform: scale(1, 1);
    }
}

@keyframes fulltime {
}

.FirstHalfHeader {
    /*IE*/
    animation-name: firsthalf !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    animation-duration: 20s !important;
    /* Safari and Chrome */
    -webkit-animation: firsthalf !important;
    -webkit-animation-timing-function: ease-in-out !important;
    -webkit-animation-iteration-count: infinite !important;
    -webkit-animation-duration: 20s !important;
}

@-webkit-keyframes firsthalf {
    0% {
        transform: scale(0, 0);
    }

    5% {
        transform: scale(.7, 1.1);
    }

    6% {
        transform: scale(1,1);
    }

    50% {
        transform: scale(.7, 1.1);
    }

    51% {
        transform: scale(0, 0);
    }

    100% {
        transform: scale(1, 1);
    }
}

@keyframes firsthalf {
    0% {
        transform: scale(0, 0);
    }

    5% {
        transform: scale(.7, 1.1);
    }

    6% {
        transform: scale(1,1);
    }

    47% {
        transform: scale(1,1);
    }

    50% {
        transform: scale(.7, 1.1);
    }


    51% {
        transform: scale(.7, .1);
    }

    54% {
        transform: scale(0, 0);
    }

    100% {
        transform: scale(0, 0);
    }
}

.SecondHalfHeader {
    /*IE*/
    animation-name: secondhalf;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 20s;
    /* Safari and Chrome */
    -webkit-animation: secondhalf;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 20s;
}

@-webkit-keyframes secondhalf {

    0% {
        transform: scale(0, 0);
    }


    64% {
        transform: scale(0,0);
    }


    65% {
        transform: scale(.7, 1.1);
    }

    66% {
        transform: scale(1,1);
    }

    100% {
        transform: scale(1, 1);
    }
}

@keyframes secondhalf {

    0% {
        transform: scale(0, 0);
    }


    64% {
        transform: scale(0,0);
    }


    65% {
        transform: scale(.7, 1.1);
    }

    66% {
        transform: scale(1,1);
    }

    96% {
        transform: scale(1,1);
    }

    99% {
        transform: scale(.7, 1.1);
    }

    100% {
        transform: scale(0, 0);
    }
}

/*
    third and fourth quarter not implemented... channel image needs the channel owner id and I don't have that
    maybe could read it from the webcache so it's there on the second veam of the channel
*/


.ThirdQuarterHeader {
    /*IE*/
    animation-name: thirdquarter;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 20s;
    /* Safari and Chrome */
    -webkit-animation: thirdquarter;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 20s;
}

@-webkit-keyframes thirdquarter {
    0% {
        transform: scale(0, 0);
    }

    100% {
        transform: scale(0, 0);
    }
}

@keyframes thirdquarter {
    0% {
        transform: scale(0, 0);
    }

    100% {
        transform: scale(0, 0);
    }
}

.FourthQuarterHeader {
    /*IE*/
    animation-name: fourthquarter;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 20s;
    /* Safari and Chrome */
    -webkit-animation: fourthquarter;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 20s;
}

@-webkit-keyframes fourthquarter {
    0% {
        transform: scale(0, 0);
    }

    100% {
        transform: scale(0, 0);
    }
}

@keyframes fourthquarter {
    0% {
        transform: scale(0, 0);
    }

    100% {
        transform: scale(0, 0);
    }
}

.headertable {
    height: 100px;
    font-weight: bold;
    font-style: oblique;
}

.headercol1 {
    background-color: transparent;
    width: 9vw;
}

.headercol2 {
    background-color: transparent;
    width: 100px;
}

.headercol3 {
    background-color: transparent;
    max-width: 24vw;
    min-width: 16vw;
}

.headercol4 {
    background-color: transparent;
    width: 66px;
}

.AvatarStyle {
    margin: 10px;
    height: 80px;
    width: 80px;
}

.LogoStyle {
    margin-top: 1vh;
    height: 6vh;
    filter: drop-shadow(18px 18px 18px black);
}


.LargeHeaderText {
    font-size: 1.5em !important;
    height: 100px;
    overflow: visible;
    pointer-events: none;
    z-index: 1000;
}

.OverlapHeaderText {
    overflow: hidden;
    max-height: 50px;
    height: 25px;
    margin-top: -25px;
    color: lightgray;
    vertical-align: top;
    text-align: left;
    font-size: 1em;
    pointer-events: none;
}

.HeaderText {
    overflow: hidden;
    max-height: 50px;
    height: 34px;
    color: white;
    text-shadow: 1px 1px black;
    vertical-align: bottom;
    text-align: left;
    font-size: 1.8vh;
    pointer-events: none;
}