/* CSS Document */
.videopal-container {
    position: fixed;
    z-index: 99999;
    right: 0;
    bottom: 0;
    font-family: sans-serif
}

.videopal-hidden {
    position: fixed;
    left: 0;
    top: 0;
    width: 140px;
    height: 140px;
    pointer-events: none;
    opacity: .00000001
}

.videopal-unvisible {
    opacity: 0;
    display: none
}

.videopal-container video {
    background-color: transparent
}

.videopal-msg {
    width: 90%;
    margin: 5px auto;
    padding: 7px 12px;
    border: 1px solid #777;
    background-color: rgba(255, 255, 255, .3);
    border-radius: 4px;
    color: #252525;
    font-size: 14px
}

.videopal-blackout {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 5554;
    right: 0;
    top: 0;
    background-color: #000;
    opacity: .75;
    transition: opacity .3s ease;
    pointer-events: none
}

.videopal-blackout-transparent {
    opacity: 0
}

.videopal-blackout-hidden {
    opacity: 0;
    display: none
}

.videopal-text-shadow {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .7)
}

.videopal-container canvas,
.videopal-container video {
    position: absolute;
    left: 0;
    top: 0
}

.videopal-buttons {
    box-sizing: border-box;
    position: absolute;
    left: 15px;
    top: 15px;
    text-align: left
}

.videopal-buttons-autohide {
    opacity: 0;
    transition: opacity .3s ease
}

.videopal-button {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: 0 5px;
    padding: 0;
    border: 2px solid #aaa;
    border-radius: 50%;
    color: #777;
    background-color: #eee;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none
}

.videopal-button:hover {
    border-color: #777;
    color: #000;
    box-shadow: 0 0 12px rgba(255, 255, 255, .9)
}

.videopal-container:hover .videopal-buttons-autohide {
    opacity: 1
}

.videopal-button-close {
    margin: 0;
    position: absolute;
    right: 15px;
    top: 15px
}

.videopal-info-button {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 30px;
    text-align: center
}

.videopal-info-button a,
.videopal-info-button button {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    background-color: #36c836;
    font-size: 26px;
    color: #fff;
    border: 2px solid rgba(0, 0, 0, .4);
    border-radius: 12px;
    opacity: .9
}

.videopal-info-button a:hover,
.videopal-info-button button:hover {
    text-decoration: none;
    border-color: rgba(0, 0, 0, .6);
    opacity: 1;
    box-shadow: 0 0 15px rgba(255, 255, 255, .9)
}

.videopal-info-button a span,
.videopal-info-button button span {
    display: block;
    max-width: 250px;
    max-height: 62px;
    overflow: hidden
}

.videopal-info-button a.btn-dots:after,
.videopal-info-button button.btn-dots:after {
    content: '...';
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: .6em
}

.videopal-play-layer-button {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200px;
    height: 200px;
    margin: -100px 0 0 -100px;
    cursor: pointer;
    border: 0;
    background: none transparent
}

.videopal-play-layer-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.videopal-play-layer canvas {
    cursor: pointer
}

.videopal-form-container {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 18px;
    padding: 10px;
    text-align: center
}

.videopal-form-container form,
.videopal-form-container>div {
    padding: 10px;
    display: inline-block;
    background-color: #16ac0e;
    border-radius: 6px;
    vertical-align: middle;
    text-align: left
}

.videopal-form-container>div>form {
    padding: 0
}

.videopal-form-container input[type=email],
.videopal-form-container input[type=text] {
    width: 130px;
    padding: 8px;
    margin-right: 10px;
    vertical-align: middle;
    font-size: 16px;
    border: 1px solid rgba(0, 0, 0, .5);
    border-radius: 4px;
    color: #000
}

.videopal-form-container input[type=email]:focus,
.videopal-form-container input[type=text]:focus {
    border-color: rgba(0, 0, 0, .65)
}

.videopal-form-container button {
    vertical-align: middle;
    cursor: pointer;
    font-size: 16px;
    padding: 5px 10px;
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, .5);
    border-radius: 4px;
    color: #fff
}

.videopal-form-container button:hover {
    color: #fff;
    border-color: #fff
}

[class*=" videopal-icon-"],
[class^=videopal-icon-] {
    background-position: center center;
    background-repeat: no-repeat
}

.videopal-icon-play {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AsBFC4YFrh9gAAAAV9JREFUSMfdVbFKA0EQfTMmphAbK38mXURQUYMKQjpLP2D2yoDF3U1+QxAhoAEtwtn5L2JhOo0EuRubnJzhNGfuEPQ1s0wxb9682V3gX8E593H2PK+SmpRDcgrgIUmSYa/Xey1LwDm5dQBXzDxwzjXLKsojiKdxA0AkIhfdbnc5CAKISCUE2bE1iOh4PB4/icgBMzd+qogLGUW0SkR9M+uLSAsAgiCojiCDHSK6FpHzokp4Ad9WiKjjnHvzPG8rjuMGgC/94RIbWDOzWyIaiEhLVXMV1UpfJKJNAE3n3B0zn/i+P6pKwSeYGVU9ohRDM9tX1V3f90ezI+ISHcdEtA1gT1Wj1OTZ9V3EgxcAA1XtZE1NTS47ohsA7TAMO2li3oUrSvBsZkdEdBiGYVT2qbDMeQLgsl6vr6lqP0mSSdHOv/NgaRojMztT1fu046JF5xE8AmjPfjiLFP+VL/Pv4x0cdo5uhFPgmgAAAABJRU5ErkJggg==)
}

.videopal-icon-pause {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AsBFC4Hm7BwdQAAAFVJREFUSMdjYBg2oLy8nJEINQzl5eUkmcWIJvEfj76Ozs7OSqi6dgYGhgpcCjs7O+HmMpHgyZ842HgBE62DftSCUQtGLRi1YNQCelvAjoM9sFXm0AcA5owWUEqzGSAAAAAASUVORK5CYII=)
}

.videopal-icon-stop {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AsBFC4kOdcBBwAAADVJREFUSMdjYBg2oLy8nJEWZjGiSfynhgWdnZ1wc5loHTKjFoxaMGrBqAWjFoxaQJcqc+gDAEcACbyvBwrNAAAAAElFTkSuQmCC)
}

.videopal-icon-mute {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AsBFC8HgqtBNAAAAdRJREFUSMe1VrFuE0EQfe/iyoWLNAkS4h+gdpH0fEQUNz50SNfcrISFBcaONOfmJBA0IJmPoMWhOMmSf4MiVDRu8dLsWuezL4kvl+n2Znbezps3uwfcYnEcb61FBI1ZMbmIRCLyok6eoMqRZZlP/pXkR5IvGwHwJ4+iKBCRMcneXYe5N0Acx5uTt9vtEcnBQ6lu3UJLr4leblXQ7/fLtOyYMWbnW5IkSJJkbyyNMX0ATwCsAZwACCtyv1fVd27jGYBza+1NmqZfSlIOSZ4CmKvqdQvAJwBHB1Z+DmBIci0ix2maTlzyAclRgZnrVo3kAPDHVRyQHIvIbwAgOXb+tYupJz1V/Qxg6NckZyRnhZChizkcwDdTVSfW2ouy31p7oaoTHxvgke1ggOl0ikJDZ2U/yZmIDHxsrQqMMa+cWja0FOkiORKR0E/yvxpKOnHVrwEM0zT97oCfAhg5dZ16gOieg1a0uZerV4tvvDHmr8szBwAWd4VhGHQ6nQ8A3lRNsjEGqrpXWb4/W1dFBcffAFxWXRUPuq5dqT0AV43LNMuyDchqtXrbBMiOehaLBQBguVzaPM9/drvdZwCeA5jnef6rsUEr0fUawI/Gx7z827LvsbnL/gN7mrBxGIHhPgAAAABJRU5ErkJggg==)
}

.videopal-icon-unmute {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAXCAYAAAARIY8tAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AsBFC4u2QLoGQAAAxVJREFUSMetlk1oHVUUx3/n3kn8oAShbWhAs6iUqBVJa6EIgtCdLtSViu4EwYXKI2/m3pn4ARWaN3OngVELKQgupS5bQVeioNKFWOtCsdi4CEiDQZEoUl/ezHVzHzyTvCRPPKtzz7nzP+fc8zWwRzLG8L9Sq9UCIEmSU8aY13e6myTJUGdkGHhVVbTb7ekoir4D9hVFITsZieP4kNb6gvf+Vefcl325GgYex/Gs1voasG8vEWutnwMeEZGP0zSd7kcmQ8BntNafAwf7us0RGGOUiLzrvV92zi1477HWfiUiJ4DV9fX1u5aWlnr/iqCqKubm5qaUUlcGwbcjEYmA50XkTJqmT4gISqmHgV+BQxMTE6e35CCO46Na60+3Ay+KQowxLRGZjKLozW632xWR8yLyArDmvX/AObdqrY0BB1wXkZORtfYKcC/QABEwvoPXbeDOjY2N38qyPJtl2UtN0zwFHBSRp4G3tNZv13XdAY7UdX1YAceAW4HbdwIP9E4wVBpj7uh0Ol3gxaCzAAsLC13gEoBS6lk1Sm8UReGAy/08B9kF7z3AVJZlh4PuPID3/qQatQG9953APjrwdF8D1HV9N0DTNCtBNTmSgSRJEJHvA+jsgNEfAjsLUJbltXDnyEgGyrLEe39fOH47EME9gb0aHJkJ5+sjP5GIZMHrjwYieDB083JI7nSQ/xKNAm6tNcBD4eiC7JlwvtHpdH4KfL+yPlHAN8BN4C+gu4uNl4NniXPu9yzLxvsVAxQA8/Pz48Dj4d6lqCiK4wNJPKqU+gw4MMTAIjA5NjZ2LkkSVdf1ORGZANaapvkgVNIrgAZ+1FovbxnB7XZ7KoqiZeC2zaNi03ONA3+HvDyZ5/nFNE1v8d7/DOz33ufOuUxtnqaLi4s3mqY5Bqzt0g894D3gtTzPL3rvaZrmC2A/sOqcy7ZdOP2RnSTJrFLqchgj7LZwrLVt4Czwh4jcn+f5SpqmWxdOVVW0Wi3Ksrza6/VmgD/3UmF1Xb8PfAg8luf5CkCe57vvZGPMKWvtG6PsZGvt6D8B/+kj4B8oNzpeRGY4nwAAAABJRU5ErkJggg==)
}

.videopal-icon-close {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AsBFR4bUTVw/gAAAbFJREFUOMt9k8FqFEEQhr+aXsUIgjf1spgn8AFsWU8iePYdjCiyoOlR44AYJlsSCIhG8LAvkMdY5uhhn8BrToIS3BWclJdqbIfoDw3dU/XPX11/tQDUdX0VODSzL8AzVT0FSCkBoKoANE0T1uv1nohsAo9V9Vjqur5mZkfATeAUUOCNqq4okFLaAHaA54AAnYjcDzHGOXAXMKACbgEnMcbPXdf9KshPgNdONmAsIuORmS2Be8DFQnAPuJRSavy8A7wo4gL8MLNl6LpuEWM8Ae54BRnRz7eBl07K6IFtVd0fAYQQPvR9vwI+AqFQ2S72JXkrhDAnJy8WC5tMJksz++qK5zx55CtjBTwNIXxq27Yf/jl3+4H34PIg9B14parvyo9V9trJARgPGppxAbiSUhoV+X8qOMPns2Be3W6ek/APnzO+AT9dPV/5rzmRlFIF7Loyg4ZlF94CG4N4CzQjYN/VGViVVPW9VyjAQWExLni+EpHrPjA28PkwZ/p+y2O5FyIimxXwEOjyeALTEMI8+wzQtm3vgzP1HHHOIyme84GZLVV1xn+QUqpF5AYwnc1mx78Bg+KhuKGb0lIAAAAASUVORK5CYII=)
}

.videopal-icon-repeat {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABkklEQVRIS7WUwVHDMBBFtWkAOiCpgKSDpBKSCjAHS7rBUVIuTgWYDugAOkhKMB2kAn1mPTajsWXLyRBdpd2n/bv7Sdz40CX5pZSlc257ScxkgJTyjYherbWTY/gjkx5rrbcA3jng3wFh8kCaCsAngI/9fn8akyxZwQDgLyeAwjn3MgRJAjiwK1Ge58vZbMbNfuZ7ACfn3CoGiQKyLLsviuIcBrSQsAcN6FsIcSeEOFhrsy6kB9Baz733RwCbrr4MMcaUYZIGcqwnhmhhjKnC+x6AZ52InoZ+FJNhLCYGqIjogYg2xhguP3mCKipr7WK0AqUUrpn3obheBTcHSClribz3q9QStVJordcAvgD8OOfmKYmKZr6jYzfWZN7srhn2JArHLlZFzFHbfSCiZXJM+YdKqboKAOfuPjQ9Kq21u7Ca2HKOuqlSik3ssUlSeu8P3JN2CIQQPchkq2gftpWMLEISkjQ7tg4A7DHroKKaSUS7rnUkvSi1tq1EU5KP9mAIxICpya8FFDFbHvpQsgcpyVL3v4dw8BnnNoaNAAAAAElFTkSuQmCC)
}

.videopal-icon-repeat-disable {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABr0lEQVRIS91V3VXCMBTO1wd4lA3ECYQJlA3YQJyA+kCSEZrwghvgBm4gTgAbiBvoAOn13B7CCWla0AMv5qm97c3X7ye3EBdeuPD+4p8BaK0nLFlRFEsvnda6X5bl1Fr7FMqplKJYXgCPYS8/30uU53mv2+1uhRBX4YtKqY0Q4tYYcyBnDJDa/ACAb2az2SDLslUIwsCdTmdirV20MFgZY0apwNRMToGkGgMG3/xBQohnY0xeky0usOZE9OHrTdQZgJ855zZZlq0rOYCboihY5v2qMZBSLgE8ENE7gEHsSWD+xBvqe1IsUgArAHcARs65r9iTlFw7WddEtLHWDlsZeG19an7rSZy2GoMYoCldMZNUXy2mXJBSbgFcl2U5nM/nfAaq1cZEa31PRG9E9Gmt7R+TiPM+JaIXa211stlEvm4CUUrVevYpbIspswCQc6raPNlNAQ7H+GhMGdB/UQgemneq8UkP/KbeC38fp0NKWcV5d8BqQ65RIq85y9LEYMfST9NqVJw07Jo253pimi4ALJxzvbbDeJY/GnsC4JWIxmG0Wz1IjYS/1M7CoA344gA/Jfr+GdIfBLgAAAAASUVORK5CYII=)
}

.videopal-custom-content {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0
}

.videopal-custom-content .af-body {
    margin: 0 auto!important;
    border: 1px solid #ddd
}

.videopal-powered {
    display: block;
    padding: 2px 4px;
    position: absolute;
    right: 10px;
    bottom: 10px;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
    text-decoration: none;
    font-size: 11px;
    background: rgba(0, 0, 0, .3);
    border-radius: 3px;
    cursor: pointer
}

.videopal-powered span {
    color: rgba(255, 255, 255, .75)
}

.videopal-powered:hover {
    background: rgba(0, 0, 0, .4)
}

.videopal-countdown {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 15px;
    text-align: center;
    color: #fff
}

.videopal-countdown-text {
    margin-bottom: 3px;
    display: block;
    font-weight: 700
}

.time-part-wrapper .time-part .digit-wrapper {
    transition: margin-top .2s linear
}

.time-part-wrapper .time-part .digit-wrapper.no-transition {
    transition: all 0s ease 0s
}

.videopal-countdown>div {
    background-color: rgba(255, 255, 255, .85);
    border-radius: 4px
}

.videopal-countdown-gradient {
    background: -moz-linear-gradient(top, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .6) 100%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .6) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .6) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#99000000', GradientType=0)
}

.videopal-youtube-content {
    position: absolute;
    left: 0;
    top: 0
}